（Author : Fuji Business International Mamoru Fujinoki）
はじめに
今回は、kintoneアプリの見積書から、Googleスプレッドシートとデータを連携して見積書を出力できるようにしてみたいと思います。Googleスプレッドシートと連携すると、帳票のテンプレートを使用して簡単にカスタマイズできる上にEmail配信することも可能になります。
1. 事前に必要なもの
- Googleアカウント
- kintoneアカウント ※開発者ライセンスの取得方法はこちら
2. 開発の流れ
以上の手順で開発して行きます。
3. Googleスプレッドシートの設定
ステップ１
Google.comより、ログインし、右上Googleアプリメニューより、スプレッドシートを選択します。
「+」 サインをクリックして、新しいスプレッドシートを作成します。
ステップ２
今回はスプレッドシートのテンプレートアドオンを利用して、帳票を作成します。
「アドオン」メニューより、「アドオンを取得」を選択します。
検索文字列に「Template Gallery」と入力し、表示された「Template Gallery for Sheets」アドオンをクリックします。
インストール画面が表示されるので、インストールをクリックします。
インストール完了後、画面に従ってGoogleアカウントへのアクセスを許可してください。
「アドオン」メニューより「Template Gallery for Sheets」−「Browse Template」を選択し、「Category」から、「Business」−「Invoices」をクリックします。
表示されたInvoiceテンプレートより、今回は「Billing Invoice」を選択して、画面に従い、Google Driveにテンプレートをコピーし、「Open File」ボタンをクリックします。
「Invoice」タブのシートを選択し、ファイル名を変更し、必要に応じ、帳票タイトルや見出しを日本語に変更します。
また、このGoogle スプレッドシートのURLから、スプレッドシートIDを取得します。
ステップ３
次にGoogle APIを利用するためにGoogle APIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
画面が表示されたら、「devnet Map API」をクリックします。
右上の「新しいプロジェクト」をクリックして、新規プロジェクトを作成します。
プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。ここではプロジェクト名を「kintone-Google-Calendar」にします。
ステップ４
再び、プロジェクト選択の画面を開き、新規作成したプロジェクトを開きます。
次に左サイドメニューより「ライブラリ」を選択し、表示された画面の左サイドメニューからG Suite カテゴリーを選択し、「Google Sheets API」を選択します。
「有効にする」をクリックして、Google Sheets API を有効にします。
ステップ 5
OAuth同意画面を設定します。
左サイドメニュより「OAuth同意画面」を選択し、右画面より「User Type」を指定し、「作成」ボタンをクリックします。
※今回は検証用として「外部」を選択します。利用状況に応じて適切に選択してください。
アプリケーション名を入力します。ここでは「kintone-google-calendar」にします。
サポートメールをデフォルトのままにして「保存」ボタンをクリックします。
ステップ 6
次は、OAuthクライアントIDを作成します。
左サイドメニューより「認証情報」を選択し、右側の「＋認証情報を作成」をクリックし、「OAuthクライアントID」を選択します。
アプリケーションの種類に「ウェブアプリケーション」を選択し、名前を自由に入力し、URLにご自身のkintone環境のURLを入力し、「保存」ボタンをクリックします。
クライアントIDが作成されますので、メモしておきます。（後のプログラミングで使用します。）
ステップ７
再び、「認証情報を作成」メニューから、今度は、「APIキー」を選択します。
APIキーが作成されますので、メモしておきます。
左サイドメニューの「認証情報」をクリックすると生成した認証情報が確認できます。
以上でGoogleスプレッドシートの設定は終了です。
4. kintoneアプリの設定・変更
ステップ１
今回は、kintone アプリの「商品見積書パック」を元にアプリを設定・変更します。
kintoneアプリストアより、左サイドメニュー上部のアプリストア検索欄に「見積書」と入力し、検索します。「商品見積書パック」が表示されますので、「このアプリを追加」をクリックします。
ステップ２
「見積書」アプリを開いて、右上のギアアイコンをクリックして、アプリの設定画面に移行します。
ステップ３
下記テーブルを参考にフォームにフィールドの追加・変更を行います。
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
|---|---|---|---|
| 日付 | 見積日 | date | - |
| 文字列（１行） | 見積番号 | quote_no | - |
| 文字列（１行） | 顧客番号 | customer_id | - |
| 日付 | 有効期限 | valid_until | - |
| 文字列（１行） | 顧客名 | customer_name | - |
| 文字列（１行） | 会社名 | company_name | - |
| 文字列（１行） | 郵便番号 | postal_code | - |
| 文字列（１行） | 都道府県 | city | - |
| 文字列（１行） | 住所 | address | - |
| 文字列（１行） | 電話番号 | phone | - |
| 文字列（１行） | 商品名 | product_name | - |
| 数値 | 単価 | 単価 | - |
| 数値 | 数量 | 数量 | - |
| 計算 | 小計 | 小計 | 計算式：単価＊数量 |
| 計算 | 合計金額 | 合計金額 | 計算式：SUM(小計) |
| 文字列（複数行） | 備考 | note | - |
| スペース | - | print_button_space | ボタン用スペース |
フィールドの設定、変更後、「フォームを保存」し、最後に「アプリを更新」します。
これで、kintoneアプリの設定は終了です。
5. プログラムの作成
下記サンプルコードを参考にプログラムを作成します。
サンプルコード
こちらからサンプルコード（tips-115005283123-01.js）をコピーし拡張子「.js」でPCに保存してください。（例：sample-google-sheets.js）
解説
Google API認証情報の設定
Googleスプレッドシートの設定で取得した各設定値をセットします。
2行目のapi_keyにはGoogle API キー、4行目のclient_idにはクライアントID、6行目のsheet_idにスプレッドシートIDの値をセットします。
スコープとディスカバリードックの情報の詳細はGoogle Sheets APIのガイドを参照してください。
Google API モジュール
Google APIのJavaScriptクライアントとOAuth2.0モジュールのライブラリーをロードし、認証後の、コールバック関数を設定しています。
JavaScriptクライアントとOAuth 2.0の認証情報の詳細に関しましては、OAuth 2.0 for Client-side web applicationを参照してください。
レコード詳細画面の表示後イベント
レコード詳細画面の表示後イベントは以下の関数内に記述します。
Google スプレッドシートに見積書データを出力するボタンを見積書アプリ画面下部スペースに設置します。また、イベントリスナーにボタンのクリック時に呼び出される関数を設定しています。
Googleスプレッドシートへ出力
まずは、見積書アプリで設定したレコードのデータの取得を行います。
レコードのデータ取得後、すでにGoogle アカウントへ認証済みかチェックし、もし、認証済みでない場合は、Google認証画面を呼び出します。
スプレッドシートIDを変数に設定します。
見積書のサブテーブルの商品リストをArrayとして設定します。
次にGoogleスプレッドシートに出力するデータのパラメーターをJSON形式で設定します。
上記で設定したリクエストを実行します。 今回は、batchUpdate関数を使って、スプレッドシートに出力しています。
スプレッドシート出力データのパラメーター設定及びAPIに関する詳細は、Google Sheets API Referenceのspreadsheets.valuesの項目を参照してください。
コードのアップロード
サンプルコードにGoogle API認証情報の設定を実施した後に、ファイルを保存します。
保存したファイルを「アプリの設定」から、「JavaScript/CSSでカスタマイズ」を選択し、アップロードします。
また、Google APIのJavaScriptクライアント及びjQueryライブラリーを以下のURLを指定して参照します。
https://apis.google.com/js/api.js
https://js.cybozu.com/jquery/3.2.1/jquery.min.js
設定を「保存」して、「アプリを更新」します。
6. 動作の確認
見積書で商品を選択するため、kintoneの商品リストアプリを開いて、幾つか商品を追加します。
次にkintoneの見積書アプリを開くとGoogleアカウントへの認証画面が表示されるので、メールアドレス、パスワードを入力してGoogleアカウントへログインします。（Googleスプレッドシートを作成したアカウントを選択してください。）また、お使いのブラウザのポップアップ設定を有効にしてください。認証画面が表示されない可能性があります。）
以下のような警告が表示される場合がありますので、「cybozu.com（安全ではないページ）に移動」を選択してください。
見積書に顧客情報、商品リストを入力して保存します。
保存後、「帳票出力」ボタンが画面右上に表示されるのでクリックして見積書をGoogleスプレッドシートに出力します。
見積書Googleスプレッドシートを開くとkintone見積書アプリで作成したデータが出力されています。「ファイル」メニューから印刷したり、PDFで保存してEmailで顧客に送信することもできます。
7. まとめ
今回は、kintoneのアプリストアから商品見積書パックを使って、見積書をGoogle スプレッドシートに帳票出力してみました。他にも色々なテンプレートを利用してGoogle スプレッドシートを帳票作成ツールとしてkintoneの機能を補う形で活用することができると思いますので是非、試してみてください。
8. 参照サイト
- Google Sheets API Guides
- Google Identity Platform
- Google Sheets API Reference
- Google Sheets API Samples
このTipsは、2017年11月版 kintoneで確認したものになります。
KINTONE超初心者です。
当記事より、お陰様でやりたかった機能を実現できそうです。
１点だけ、テーブル内の関連レコード一覧（最新の１行のみ）を
Googleスプレッドシート上へ出力する方法はありませんでしょうか。
他記事も参考に色々と試してみましたが、力及ばず。。
ご教示いただけましたら大変助かります。
どうぞ宜しくお願いいたします。
やまもと 様
お世話になっております。cybozu developer network運営事務局です。
関連レコード一覧 は「別アプリのレコードを表示」している機能のため、
kintone.app.record.get()等で取得したレコード情報内には含まれません。
REST APIの レコード一括取得取得 を利用して関連レコードの情報を取得いただく必要があります。
REST APIを利用した関連レコードの情報取得は、
関連レコードの件数を取得するワザ のサンプルコード内「fetchRecords関数」（17～30行目）が参考になるかと思います。
関連レコードではなくテーブル 内の情報を取得したいということでしたら、kintone.app.record.get() で値の取得が可能です。
フィールド形式 内のテーブルにデータの形式が記載されていますのでご確認ください。
また、下記の記事でテーブルについて詳細な解説を記載しています。
kintoneにおけるテーブル操作の基本（行の追加・更新・削除）
なお、こちらは記事のフィードバック欄となっております。
コード書き換え時のご不明点に関しましては、コミュニティをご活用いただけますと幸いです。
よろしくお願いいたします。
cybozu developer network運営事務局
ご担当者さま
ご回答、ありがとうございました。
やはり、kintone.app.record.get() では、
関連レコードの情報は参照できないのですね。。
ご教示いただいた記事も参考にさせていただいて、
何とか機能を完成させることができました。
今後とも、どうぞ宜しくお願いいたします。
お世話になっております。
こちらの記事を参考にすれば、Googleスライドでデータを出力することも可能でしょうか。
Kintoneで管理している資料をpptx形式で出力できたら良いなと思っているのですが。
ウッディ様
お世話になっております。cybozu developer network 運営事務局です。
Google スライドもAPIが用意されているようですので、Googleスライドへのデータ出力自体は可能です。
ただし、GoogleスライドとGoogleスプレッドシートでは利用するAPIが全く異なりますので、
本記事のサンプルコードから出力部分を大幅に書き換えていただく必要がありそうです。
なお、こちらは記事のフィードバック欄となっております。
コード書き換え時のご不明点に関しましては、コミュニティをご活用いただけますと幸いです。
よろしくお願いいたします。
cybozu developer network 運営事務局 ご担当者様
お世話になっております。
技術的に実現可能とのこと、ご回答ありがとうございました。
コミュニティを活用して試してみたいと思います。
今後とも よろしくお願いいたします。
cybozu developer network 運営事務局 ご担当者様
お世話になっております。
Googleアカウントの認証処理をアプリを開くタイミングで行っている理由はございますでしょうか？
複数のGoogleアカウントに紐づいたスプレッドシートへデータ出力を実装したいと考えております。
アカウントごとに帳票出力ボタンを用意し、それぞれのボタンクリック内でAPIKeyとクライアントIDの切り替えを行い、
Googleアカウントの認証処理を行うことができればと考えております。
よろしくお願いいたします。
鈴木陽 様
お世話になっております。cybozu developer network 運営事務局です
こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。