カテゴリー内の他の記事

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 コミュニティをご活用ください。

Avatar
やまもと

KINTONE超初心者です。

当記事より、お陰様でやりたかった機能を実現できそうです。

1点だけ、テーブル内の関連レコード一覧(最新の1行のみ)を

Googleスプレッドシート上へ出力する方法はありませんでしょうか。

 

他記事も参考に色々と試してみましたが、力及ばず。。

ご教示いただけましたら大変助かります。

どうぞ宜しくお願いいたします。

 

Avatar
cybozu Development team

やまもと 様

お世話になっております。cybozu developer network運営事務局です。

 

関連レコード一覧 は「別アプリのレコードを表示」している機能のため、
kintone.app.record.get()等で取得したレコード情報内には含まれません。
REST APIの レコード一括取得取得 を利用して関連レコードの情報を取得いただく必要があります。

REST APIを利用した関連レコードの情報取得は、
関連レコードの件数を取得するワザ のサンプルコード内「fetchRecords関数」(17~30行目)が参考になるかと思います。

 

関連レコードではなくテーブル 内の情報を取得したいということでしたら、kintone.app.record.get() で値の取得が可能です。
フィールド形式 内のテーブルにデータの形式が記載されていますのでご確認ください。

また、下記の記事でテーブルについて詳細な解説を記載しています。
kintoneにおけるテーブル操作の基本(行の追加・更新・削除)

 

なお、こちらは記事のフィードバック欄となっております。
コード書き換え時のご不明点に関しましては、コミュニティをご活用いただけますと幸いです。

よろしくお願いいたします。

Avatar
やまもと

cybozu developer network運営事務局
ご担当者さま

ご回答、ありがとうございました。
やはり、kintone.app.record.get() では、
関連レコードの情報は参照できないのですね。。

ご教示いただいた記事も参考にさせていただいて、
何とか機能を完成させることができました。

今後とも、どうぞ宜しくお願いいたします。

 

Avatar
ウッディ

お世話になっております。

こちらの記事を参考にすれば、Googleスライドでデータを出力することも可能でしょうか。

Kintoneで管理している資料をpptx形式で出力できたら良いなと思っているのですが。

Avatar
cybozu Development team

ウッディ様

お世話になっております。cybozu developer network 運営事務局です。

Google スライドもAPIが用意されているようですので、Googleスライドへのデータ出力自体は可能です。
ただし、GoogleスライドとGoogleスプレッドシートでは利用するAPIが全く異なりますので、
本記事のサンプルコードから出力部分を大幅に書き換えていただく必要がありそうです。

なお、こちらは記事のフィードバック欄となっております。
コード書き換え時のご不明点に関しましては、コミュニティをご活用いただけますと幸いです。

よろしくお願いいたします。

Avatar
ウッディ

cybozu developer network 運営事務局 ご担当者様

お世話になっております。

技術的に実現可能とのこと、ご回答ありがとうございました。

コミュニティを活用して試してみたいと思います。

今後とも よろしくお願いいたします。

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