（Author : Fuji Business International Mamoru Fujinoki）
Index
はじめに
今回は、kintoneアプリの見積書から、Googleスプレッドシートとデータを連携して見積書を出力できるようにしてみたいと思います。
Googleスプレッドシートと連携すると、帳票のテンプレートを使用して簡単にカスタマイズできる上にEmailに添付することも可能になります。
概要
連携の流れは以下となっています。
- kintoneからGoogleのクライアントIDをもとにOAuth認証
- kintoneからGoogleのアクセストークン取得
- アクセストークンを利用してGoogle Sheets APIを実行
- kintone アプリのレコードから Googleスプレッドシートにデータを登録
kintone アプリの作成
アプリの追加
今回は、kintone アプリの「商品見積書パック」を元にアプリを設定・変更します。
kintoneアプリストアより、左サイドメニュー上部のアプリストア検索欄に「見積書」と入力し、検索します。「商品見積書パック」が表示されますので、「このアプリを追加」をクリックします。
「見積書」アプリを開いて、右上のギアアイコンをクリックして、アプリの設定画面に移行します。
フィールドの追加
下記テーブルを参考にフォームに対してフィールドの追加を行います。
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
|---|---|---|---|
| 日付 | 見積日 | 見積日 | - |
| 文字列（１行） | 見積番号 | 見積番号 | - |
| 文字列（１行） | 顧客番号 | 顧客番号 | 追加フィールド |
| 日付 | 有効期限 | 有効期限 | 追加フィールド |
| 文字列（１行） | 宛名 | 宛名 | - |
| 文字列（１行） | 会社名 | 会社名 | 追加フィールド |
| 文字列（１行） | 郵便番号 | 郵便番号 | 追加フィールド |
| 文字列（１行） | 都道府県 | 都道府県 | 追加フィールド |
| 文字列（１行） | 住所 | 住所 | 追加フィールド |
| 文字列（１行） | 電話番号 | 電話番号 | 追加フィールド |
| テーブル | 見積明細 | 見積明細 | - |
| 文字列（１行） | 商品名 | 商品名 | テーブル内フィールド |
| 数値 | 単価 | 単価 | テーブル内フィールド |
| 数値 | 数量 | 数量 | テーブル内フィールド |
| 計算 | 小計 | 小計 | 計算式：単価＊数量 テーブル内フィールド |
| 計算 | 合計金額 | 合計金額 | 計算式：SUM(小計) |
| 文字列（複数行） | 備考 | 備考 | - |
| スペース | - | print_button_space | ボタン用スペース 追加フィールド |
追加フィールドは以下のように配置します。
フィールドの設定、変更後、「フォームを保存」し、最後に「アプリを更新」します。
これで、kintoneアプリの設定は終了です。
3. Googleスプレッドシートの設定
1. スプレッドシートの作成
Google.comより、ログインし、右上Googleアプリメニューより、スプレッドシートを選択します。
「+」 サインをクリックして、新しいスプレッドシートを作成します。
2. アドオンの設定
今回はスプレッドシートのテンプレートアドオンを利用して、帳票を作成します。
「アドオン」メニューより、「アドオンを取得」を選択します。
検索文字列に「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スプレッドシートの設定は終了です。
Google APIの認証情報の設定
1. プロジェクトの作成
次にGoogle APIを利用するためにGoogle APIの認証情報を設定します。
まず、Google Cloudのデベロッパーコンソールにログインします。
画面が表示されたら、「プロジェクトの選択」をクリックします。
右上の「新しいプロジェクト」をクリックして、新規プロジェクトを作成します。
プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。ここではプロジェクト名を「kintone-google-spreadsheet」にします。
2. Gmail APIの有効化
再び、プロジェクト選択の画面を開き、新規作成したプロジェクトを開きます。
次に左サイドメニューより「ライブラリ」を選択し、表示された画面の左サイドメニューからGoogle Workspace カテゴリーを選択し、「Google Sheets API」を選択します。
「有効にする」をクリックして、Google Sheets API を有効にします。
3. 認証情報の作成
OAuth同意画面を設定します。
左サイドメニュより「OAuth同意画面」を選択し、右画面より「User Type」を指定し、「作成」ボタンをクリックします。
※今回は検証用として「外部」を選択します。利用状況に応じて適切に選択してください。
アプリケーション名を入力します。ここでは「kintone-google-spreadsheet」にします。
ユーザーサポートメールをドロップダウンメニューから選択し、デベロッパーの連絡先情報にメールアドレスを入力（ユーザーサポートメールのメールアドレスと同じでOKです）し、「保存して次へ」ボタンをクリックします。
4. クライアントIDの作成
次は、OAuthクライアントIDを作成します。
左サイドメニューより「認証情報」を選択し、右側の「＋認証情報を作成」をクリックし、「OAuthクライアントID」を選択します。
アプリケーションの種類に「ウェブアプリケーション」を選択し、名前を自由に入力し、「承認済みのJavaScript生成元」にご自身のkintone環境のURLを入力し、「作成」ボタンをクリックします。
クライアントIDが作成されますので、メモしておきます。（後のプログラミングで使用します。）
5. APIキーの作成
再び、「認証情報を作成」メニューから、今度は、「APIキー」を選択します。
APIキーが作成されますので、メモしておきます。
左サイドメニューの「認証情報」をクリックすると生成した認証情報が確認できます。
以上でGoogle APIの認証情報の設定は終了です。
プログラム
今回使用するプログラム
URL指定で追加
- https://apis.google.com/js/api.js
- https://accounts.google.com/gsi/client
アップロードして追加
-
sample-google-sheets.js
Google APIの認証情報の設定を記述している為、環境に合わせて修正する部分があります（後述）
プログラムの修正
Googleスプレッドシートの設定とGoogle APIの認証情報の設定で取得した各設定値をセットします。
API_KEYにはGoogle API キー、CLIENT_IDにはクライアントID、SHEET_IDにスプレッドシートIDの値をセットします。
スコープとディスカバリードックの情報の詳細はGoogle Sheets APIのガイドを参照してください。
解説
Google API 認証
Google APIのJavaScriptクライアントとGoogle Identity Services ライブラリをロードし、ログイン時の処理を記述します。
JavaScriptクライアントとGoogle Identity Services ライブラリの詳細に関しましては、Google Identity Services JavaScript SDKを参照してください。
レコード詳細画面の表示後イベント
レコード詳細画面の表示後イベントは以下の関数内に記述します。
Googleログインボタン、Googleログアウトボタン、見積書データを出力する帳票出力ボタンをスペースフィールドに設置します。また、イベントリスナーにボタンのクリック時に呼び出される関数を設定しています。
Googleスプレッドシートへ出力
まずは、見積書アプリで設定したレコードのデータの取得を行います。
スプレッドシートIDを変数に設定します。
見積書のサブテーブルの商品リストをArrayとして設定します。
次にGoogleスプレッドシートに出力するデータのパラメーターをJSON形式で設定します。
上記で設定したリクエストを実行します。 今回は、batchUpdate関数を使って、スプレッドシートに出力しています。
スプレッドシート出力データのパラメーター設定及びAPIに関する詳細は、Google Sheets API Referenceのspreadsheets.valuesの項目を参照してください。
プログラムの配置
これらのプログラムを「アプリの設定 > JavaScript/CSSでカスタマイズ」下に配置します。
動作確認
見積書で商品を選択するため、kintoneの商品リストアプリを開いて、幾つか商品を追加します。
見積書アプリに新規レコードを追加します。
保存後、「Googleログインボタン」が表示されます。
「Googleログインボタン」をクリックするとGoogleアカウントへの認証画面が表示されるので、メールアドレス、パスワードを入力してGoogleアカウントにログインします。（Googleスプレッドシートを作成したアカウントを選択してください。）
また、お使いのブラウザのポップアップ設定を有効にしてください。認証画面が表示されない可能性があります。
以下のような警告が表示された場合は「cybozu.com（安全ではないページ）に移動」を選択してください。
「帳票出力」ボタンが画面右上に表示されるのでクリックして見積書をGoogleスプレッドシートに出力します。
見積書Googleスプレッドシートを開くとkintone見積書アプリで作成したデータが出力されています。「ファイル」メニューから印刷したり、PDFで保存してEmailで顧客に送信することもできます。
まとめ
今回は、kintoneのアプリストアから商品見積書パックを使って、見積書をGoogle スプレッドシートに帳票出力してみました。他にも色々なテンプレートを利用してGoogle スプレッドシートを帳票作成ツールとしてkintoneの機能を補う形で活用することができると思いますので是非、試してみてください。
参照サイト
- Google Identity Services JavaScript SDK
- Google Sheets API Guides
- Google Sheets API Reference
- Google Sheets API Samples
このTipsは、2022年7月版 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 運営事務局です
こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。
cybozu developer network 運営事務局御中
お世話になっております。
gapi.auth2での認証は今後使えなくなるようで、google.accounts.oauth2への切り替えが必要だそうです。
コンソールに以下のとおり警告が表示されますので、本記事にもその旨記載してはいかがでしょうか。
Ryoji 様
お世話になっております。cybozu developer network 運営でございます。
情報をご共有いただき、ありがとうございます。
社内にフィードバックさせていただき、方針を検討いたします。
よろしくお願い致します。
cybozu developer network 運営事務局御中
お世話になっております。
ｻﾝﾌﾟﾙﾌﾟﾛｸﾞﾗﾑの更新ありがとうございます。
更新後のﾌﾟﾛｸﾞﾗﾑにて作成進めてみましたが、下記のような状況です。
1.「帳票出力」ﾎﾞﾀﾝを押してもｽﾌﾟﾚｯﾄﾞｼｰﾄに出力されない。
2.「帳票出力成功」「ｴﾗｰ」いずれのｱﾗｰﾄｳｲﾝﾄﾞｳが出てこない。
3.「Refresh」「Googleﾛｸﾞｱｳﾄ」ﾎﾞﾀﾝは問題なく動いています。
APIｷｰ、ｸﾗｲｱﾝﾄID、ｽﾌﾟﾚｯﾄﾞｼｰﾄID変更済み。
説明にはありませんでしたが、「OAuth同意画面」にて公開ｽﾃｰﾀｽを本番環境に変更済み。
ｴﾗｰ内容を追記します。
よろしくお願いいたします。
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at printInvoice (download.do?app=90&contentId=1817&jsType=DESKTOP&hash=3........................8)
at HTMLButtonElement.<anonymous> (download.do?app=90&................22
BTS佐々木 様
お世話になっております。cybozu developer network 運営事務局です。
こちらで動作確認をしたところ、下記状況で、同じエラーを再現しました。
「商品見積書パック」アプリのフィールドの設定で、
本記事の「フィールドの追加」部分の内容と一致しないフィールドコードが設定されている場合
下記エラーメッセージのリンク（download.do?...）をクリックしていただき、
本記事の内容と一致していないフィールドの行でエラーが出ているはずですが、ご確認いただけないでしょうか。
また、こちらは記事のフィードバック欄となっております。
コード書き換え時のご不明点に関しましては、コミュニティをご活用いただけますと幸いです。
どうぞよろしくお願いいたします。
お世話になっております。
回答遅くなり申し訳ございません。
ご指摘のとおり、一部のﾌｨｰﾙﾄﾞｺｰﾄﾞの変更を忘れており、一致していない状態でした。
修正後、出力されること確認済です。