kintone 見積書アプリからGoogleスプレッドシートで帳票出力してみよう！

（Author : Fuji Business International Mamoru Fujinoki）

はじめに

今回は、kintoneアプリの見積書から、Googleスプレッドシートとデータを連携して見積書を出力できるようにしてみたいと思います。Googleスプレッドシートと連携すると、帳票のテンプレートを使用して簡単にカスタマイズできる上にEmail配信することも可能になります。

 

 

1. 事前に必要なもの

• Googleアカウント
• kintoneアカウント ※開発者ライセンスの取得方法はこちら

2. 開発の流れ

• Googleスプレッドシートの設定
• kintoneアプリの設定・変更
• プログラムの作成

以上の手順で開発して行きます。

3. Googleスプレッドシートの設定

ステップ１

Google.comより、ログインし、右上Googleアプリメニューより、スプレッドシートを選択します。

「+」 サインをクリックして、新しいスプレッドシートを作成します。

ステップ２

今回はスプレッドシートのテンプレートアドオンを利用して、帳票を作成します。
「アドオン」メニューより、「アドオンを取得」を選択します。

検索文字列に「Template Gallery」と入力し、表示された「Template Gallery」アドオンを追加します。画面に従って、Googleアカウントへのアクセスを許可してください。

「アドオン」メニューより「Template Gallery」−「Browse Template」を選択し、「Category」から、「Business」−「Invoices」をクリックします。表示されたInvoiceテンプレートより、今回は「Billing Invoice」を選択して、画面に従い、Google Driveにテンプレートをコピーします。

「Invoice」タブのシートを選択し、ファイル名を変更し、必要に応じ、帳票タイトルや見出しを日本語に変更します。

また、このGoogle スプレッドシートのURLから、スプレッドシートIDを取得します。

ステップ３

次にGoogle APIを利用するためにGoogle APIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
画面が表示されたら、「プロジェクトを選択」をクリックします。

右上の「＋」アイコンをクリックして、新規プロジェクトを作成します。

プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。ここではプロジェクト名を「kintone-Google-Calendar」にします。

ステップ４

再び、プロジェクト選択の画面を開き、新規作成したプロジェクトを開きます。

次に左サイドメニューより、「ライブラリ」を選択し、G Suite カテゴリーより、「Google Sheets API」を選択します。

「有効にする」をクリックして、Google Sheets API を有効にします。

 

ステップ５

右上の「認証情報を作成」をクリックします。

使用するAPIに「Google Sheets API」を選択し、APIを呼び出す場所に「ウェブブラウザ（JavaScript）」、アクセスするデータの種類に「ユーザーデータ」を選択し、「必要な情報」をクリックします。

クライアントID名を入力し、「認証済みのJavaScript 生成元」にお使いのkintoneのURLを入力し、「クライアントIDの作成」ボタンをクリックして、クライアントIDを生成します。

ステップ６

次にOAuth 2.0同意画面の設定をします。メールアドレスを選択し、サービス名を適当に入力して、「次へ」ボタンをクリックします。

クライアント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で確認したものになります。