カテゴリー内の他の記事

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

2020年8月改訂のセキュアコーディング ガイドラインに抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所:JavaScriptプログラムの6行目

(Author : Fuji Business International Mamoru Fujinoki)

Index

はじめに

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

gs2.png gs1.png

概要

連携の流れは以下となっています。

  1. kintoneからGoogleのクライアントIDをもとにOAuth認証
  2. kintoneからGoogleのアクセストークン取得
  3. アクセストークンを利用してGoogle Sheets APIを実行
  4. kintone アプリのレコードから Googleスプレッドシートにデータを登録

kintone アプリの作成

アプリの追加

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

gs25.png

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

gs26.png

フィールドの追加

下記テーブルを参考にフォームに対してフィールドの追加を行います。

フィールドの種類 フィールド名 フィールドコード 備考
日付 見積日 見積日 -
文字列(1行) 見積番号 見積番号 -
文字列(1行) 顧客番号 顧客番号 追加フィールド
日付 有効期限 有効期限 追加フィールド
文字列(1行) 宛名 宛名 -
文字列(1行) 会社名 会社名 追加フィールド
文字列(1行) 郵便番号 郵便番号 追加フィールド
文字列(1行) 都道府県 都道府県 追加フィールド
文字列(1行) 住所 住所 追加フィールド
文字列(1行) 電話番号 電話番号 追加フィールド
テーブル 見積明細 見積明細 -
文字列(1行) 商品名 商品名 テーブル内フィールド
数値 単価 単価 テーブル内フィールド
数値 数量 数量 テーブル内フィールド
計算 小計 小計 計算式:単価*数量
テーブル内フィールド
計算 合計金額 合計金額 計算式:SUM(小計)
文字列(複数行) 備考 備考 -
スペース - print_button_space ボタン用スペース
追加フィールド

追加フィールドは以下のように配置します。

mceclip0.png

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

gs001.png

これで、kintoneアプリの設定は終了です。

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

1. スプレッドシートの作成

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

spreadsheet-1.png

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

spreadsheet-2.png

2. アドオンの設定

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

spreadsheet-3.png

検索文字列に「Template Gallery」と入力し、表示された「Template Gallery for Sheets」アドオンをクリックします。

spreadsheet-4.png

インストール画面が表示されるので、インストールをクリックします。
インストール完了後、画面に従ってGoogleアカウントへのアクセスを許可してください。
spreadsheet-5.png

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

spreadsheet-6.png

gs8.png

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

gs9.png

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

gssid.png

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

Google APIの認証情報の設定

1. プロジェクトの作成

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

mceclip1.png

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

mceclip6.png

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

mceclip7.png

2. Gmail APIの有効化

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

mceclip18.png

次に左サイドメニューより「ライブラリ」を選択し、表示された画面の左サイドメニューからGoogle Workspace カテゴリーを選択し、「Google Sheets API」を選択します。

mceclip9.png

mceclip10.png

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

spreadsheet-14.png

3. 認証情報の作成

OAuth同意画面を設定します。
左サイドメニュより「OAuth同意画面」を選択し、右画面より「User Type」を指定し、「作成」ボタンをクリックします。
※今回は検証用として「外部」を選択します。利用状況に応じて適切に選択してください。

mceclip11.png

アプリケーション名を入力します。ここでは「kintone-google-spreadsheet」にします。
ユーザーサポートメールをドロップダウンメニューから選択し、デベロッパーの連絡先情報にメールアドレスを入力(ユーザーサポートメールのメールアドレスと同じでOKです)し、「保存して次へ」ボタンをクリックします。

mceclip12.png

mceclip13.png

4. クライアントIDの作成

次は、OAuthクライアントIDを作成します。
左サイドメニューより「認証情報」を選択し、右側の「+認証情報を作成」をクリックし、「OAuthクライアントID」を選択します。

mceclip14.png

アプリケーションの種類に「ウェブアプリケーション」を選択し、名前を自由に入力し、「承認済みのJavaScript生成元」にご自身のkintone環境のURLを入力し、「作成」ボタンをクリックします。
クライアントIDが作成されますので、メモしておきます。(後のプログラミングで使用します。)

mceclip15.png

5. APIキーの作成

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

mceclip16.png

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

gs23.png

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

mceclip17.png

以上で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形式で設定します。

gs31.png

上記で設定したリクエストを実行します。 今回は、batchUpdate関数を使って、スプレッドシートに出力しています。

スプレッドシート出力データのパラメーター設定及びAPIに関する詳細は、Google Sheets API Referenceのspreadsheets.valuesの項目を参照してください。

プログラムの配置

これらのプログラムを「アプリの設定 > JavaScript/CSSでカスタマイズ」下に配置します。

javascriptcsscustomize.png

動作確認

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

gs32.png

見積書アプリに新規レコードを追加します。

mceclip3.png

保存後、「Googleログインボタン」が表示されます。

mceclip4.png

「Googleログインボタン」をクリックするとGoogleアカウントへの認証画面が表示されるので、メールアドレス、パスワードを入力してGoogleアカウントにログインします。(Googleスプレッドシートを作成したアカウントを選択してください。)

また、お使いのブラウザのポップアップ設定を有効にしてください。認証画面が表示されない可能性があります。

gs33.png

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

gs003.png

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

mceclip5.png

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

gs36.png

まとめ

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

参照サイト

 

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

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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 運営事務局 ご担当者様

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

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

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

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

Avatar
鈴木陽

cybozu developer network 運営事務局 ご担当者様
お世話になっております。

Googleアカウントの認証処理をアプリを開くタイミングで行っている理由はございますでしょうか?

複数のGoogleアカウントに紐づいたスプレッドシートへデータ出力を実装したいと考えております。
アカウントごとに帳票出力ボタンを用意し、それぞれのボタンクリック内でAPIKeyとクライアントIDの切り替えを行い、
Googleアカウントの認証処理を行うことができればと考えております。

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

Avatar
cybozu Development team

鈴木陽 様

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

こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。

コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。

Avatar
Ryoji

cybozu developer network 運営事務局御中

お世話になっております。
gapi.auth2での認証は今後使えなくなるようで、google.accounts.oauth2への切り替えが必要だそうです。
コンソールに以下のとおり警告が表示されますので、本記事にもその旨記載してはいかがでしょうか。

Avatar
cybozu Development team

Ryoji 様
お世話になっております。cybozu developer network 運営でございます。

情報をご共有いただき、ありがとうございます。
社内にフィードバックさせていただき、方針を検討いたします。

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

Avatar
BTS佐々木

cybozu developer network 運営事務局御中

 

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

サンプルプログラムの更新ありがとうございます。

更新後のプログラムにて作成進めてみましたが、下記のような状況です。

1.「帳票出力」ボタンを押してもスプレッドシートに出力されない。

2.「帳票出力成功」「エラー」いずれのアラートウインドウが出てこない。

3.「Refresh」「Googleログアウト」ボタンは問題なく動いています。

 

APIキー、クライアントID、スプレッドシートID変更済み。

説明にはありませんでしたが、「OAuth同意画面」にて公開ステータスを本番環境に変更済み。

 

 

 

Avatar
BTS佐々木

エラー内容を追記します。

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

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

Avatar
cybozu Development team

BTS佐々木 様

お世話になっております。cybozu developer network 運営事務局です。
こちらで動作確認をしたところ、下記状況で、同じエラーを再現しました。

「商品見積書パック」アプリのフィールドの設定で、
本記事の「フィールドの追加」部分の内容と一致しないフィールドコードが設定されている場合

下記エラーメッセージのリンク(download.do?...)をクリックしていただき、
本記事の内容と一致していないフィールドの行でエラーが出ているはずですが、ご確認いただけないでしょうか。

 printInvoice (download.do?app=90&contentId=1817&jsType=DESKTOP&hash=3........................8)

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

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

Avatar
BTS佐々木

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

回答遅くなり申し訳ございません。

ご指摘のとおり、一部のフィールドコードの変更を忘れており、一致していない状態でした。

修正後、出力されること確認済です。

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