カテゴリー内の他の記事

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

フォローする

(Author : Fuji Business International Mamoru Fujinoki)

はじめに

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

gs2.png gs1.png

 

1. 事前に必要なもの

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

2. 開発の流れ

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

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

ステップ1

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

gs3.png

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

gs4.png

ステップ2

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

gs5.png

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

gs6.png

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

gs7.png

gs8.png

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

gs9.png

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

gssid.png

ステップ3

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

gs11.png

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

gs12.png

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

gs13.png

ステップ4

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

gs14.png

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

gs15.png

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

gs16.png

 

ステップ5

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

gs17.png

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

gs18.png

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

gs19.png

ステップ6

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

gs20.png

クライアントIDが作成されますので、メモしておきます。(後のプログラミングで使用します。)

gs21.png

ステップ7

再び、「認証情報を作成」メニューから、今度は、「APIキー」を選択します。

gs22.png

APIキーが作成されますので、メモしておきます。

gs23.png

左サイドメニューの「認証情報」をクリックすると生成した認証情報が確認できます。

gs24.png

以上でGoogleスプレッドシートの設定は終了です。

4. kintoneアプリの設定・変更

ステップ1

今回は、kintone アプリの「商品見積書パック」を元にアプリを設定・変更します。
kintoneアプリストアより、左サイドメニュー上部のアプリストア検索欄に「見積書」と入力し、検索します。「商品見積書パック」が表示されますので、「このアプリを追加」をクリックします。

gs25.png

ステップ2

「見積書」アプリを開いて、右上のギアアイコンをクリックして、アプリの設定画面に移行します。

gs26.png

ステップ3

下記テーブルを参考にフォームにフィールドの追加・変更を行います。

フィールドの種類 フィールド名 フィールドコード 備考
日付 見積日 date -
文字列(1行) 見積番号 quote_no -
文字列(1行) 顧客番号 customer_id -
日付 有効期限 valid_until -
文字列(1行) 顧客名 customer_name -
文字列(1行) 会社名 company_name -
文字列(1行) 郵便番号 postal_code -
文字列(1行) 都道府県 city -
文字列(1行) 住所 address -
文字列(1行) 電話番号 phone -
文字列(1行) 商品名 product_name -
数値 単価 単価 -
数値 数量 数量 -
計算 小計 小計 計算式:単価*数量
計算 合計金額 合計金額 計算式:SUM(小計)
文字列(複数行) 備考 note -
スペース - print_button_space ボタン用スペース

 

gs29.png

 

フィールドの設定、変更後、「フォームを保存」し、最後に「アプリを更新」します。

 gs001.png

これで、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形式で設定します。

gs31.png

上記で設定したリクエストを実行します。 今回は、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

設定を「保存」して、「アプリを更新」します。

gs002.png

6. 動作の確認

見積書で商品を選択するため、kintoneの商品リストアプリを開いて、幾つか商品を追加します。

gs32.png

次にkintoneの見積書アプリを開くとGoogleアカウントへの認証画面が表示されるので、メールアドレス、パスワードを入力してGoogleアカウントへログインします。(Googleスプレッドシートを作成したアカウントを選択してください。)また、お使いのブラウザのポップアップ設定を有効にしてください。認証画面が表示されない可能性があります。)

gs33.png

以下のような警告が表示される場合がありますので、「cybozu.com(安全ではないページ)に移動」を選択してください。

gs003.png

見積書に顧客情報、商品リストを入力して保存します。

gs34.png

保存後、「帳票出力」ボタンが画面右上に表示されるのでクリックして見積書をGoogleスプレッドシートに出力します。

gs35.png

見積書Googleスプレッドシートを開くとkintone見積書アプリで作成したデータが出力されています。「ファイル」メニューから印刷したり、PDFで保存してEmailで顧客に送信することもできます。

gs36.png

7. まとめ

今回は、kintoneのアプリストアから商品見積書パックを使って、見積書をGoogle スプレッドシートに帳票出力してみました。他にも色々なテンプレートを利用してGoogle スプレッドシートを帳票作成ツールとしてkintoneの機能を補う形で活用することができると思いますので是非、試してみてください。

8. 参照サイト

 

このTipsは、2017年11月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。