【Garoon JavaScript API】ガルーンのスケジュールをkintoneに連携する

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

• 概要
• 前提条件と注意事項
• できること
• 完成イメージ
• kintone アプリの設定手順
• ガルーン ワークフローの設定手順
• おわりに
• 変更履歴

概要

ガルーンから外部のAPIを実行する機能を使って、ガルーンのスケジュールのデータをkintoneのアプリに登録します。

前提条件と注意事項

• このカスタマイズには、クラウド版 Garoon または パッケージ版 Garoon 4.6以降とkintoneのスタンダードコースの契約が必要です。
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません 。
• 次の項目については対象外となります。
  • 　繰り返し予定
  • 　組織の参加者
  • 　予定情報: 施設, 添付ファイル, 会社情報, 詳細設定
  • 　リモートアクセスモード
  • 　多言語
  • 　モバイル
  • 　kintoneからGaroonへのデータ同期

できること

 Garoon JavaScript APIで、プロキシAPIの機能(外部APIを実行する仕組み)が追加されました。このAPIでは、外部サービスへデータを登録/更新する際のアクセストークンをコード上に持たずに連携できるというメリットがあります。

今回は外部サービス=kintoneとして連携します。機能は次のとおりです。

• ガルーンの予定メニュー連携のボタンを押す
  • kintoneアプリに未登録の場合　⇒　登録
  • kintoneアプリに登録済みの場合　⇒　更新
  • ガルーンのコメントはkintoneアプリのテーブルにコメント数分登録

スケジュールの情報について、ガルーンのコメントとは異なり翌日以降もkintoneのレコードコメント上でコミュニケーションをとったり、プロセス管理でステータスを設定したりといったことができるようになります。

完成イメージ

ガルーンの予定メニュー連携を利用してスケジュール詳細画面にボタンを表示し、ボタンをクリックすると、あらかじめ指定したkintoneのアプリにデータが登録されるという流れになります。予定メニュー連携については以下のヘルプをご参照ください。

Garoon ヘルプ - 予定メニュー連携の設定　クラウド版・パッケージ版

今回はkintoneのアプリにはJavaScript/CSSファイルの設定は不要です。

ガルーンのスケジュールの設定にのみ、JavaScript/CSSを適用しカスタマイズしていきます。
kintoneアプリのフィールドコードは利用するため、まずはkintoneアプリの設定からはじめます。

kintone アプリの設定手順

1. アプリの作成

最初はkintoneのアプリを作成します。
完成すると、作成画面は下記のようになります。
※アプリの具体的な作成方法は、以下のヘルプをご参照ください。
アプリをはじめから作成する ～FAQアプリを作ってみよう～

1-1. フォーム

フィールドは以下の通り設定してください。  
フィールドコードは、ガルーン側に設定するJavaScriptコード内でそれぞれのフィールドを指定するための一意の文字列となります。
間違えないように設定してください。

フィールド名	フィールドコード	フィールドタイプ	備考
イベントID	EventId	文字列（一行）
タイトル	Title	文字列（一行）
開始日時	StartDate	日時
終了日時	EndDate	日時
参加者	AttendUser	ユーザー選択
メモ	Memo	文字列（複数行）
コメント日時（テーブル）	CommentDate	日時	「コメント日時」から「コメント内容」まではテーブルとして設定します。
コメント登録者（テーブル）	CommentUser	ユーザー選択
コメント内容（テーブル）	CommentContents	文字列（複数行）
-	CommentTable	テーブル	上記3つのフィールドのテーブルのフィールドコード

1-2. APIトークンの生成

[設定]タブ-「APIトークン」に移動し、「生成する」ボタンを押してAPIトークンを生成します。「レコード追加」「レコード編集」にチェックを入れます。

APIトークンはプロキシAPIの設定画面で入力しますので、控えておいてください。

最後にアプリの設定画面に戻って「アプリを公開」を押したら、kintoneアプリの設定は完了です！
ガルーン側に設定するJavaScriptファイルの中にkintoneのアプリIDを入力しますので、こちらも控えておいてください。

例）https://xxxxx.cybozu.com/k/xxx/ ←アプリIDはこの赤文字の部分に書いてある数字です。

ガルーンの設定手順

今回の要件はガルーンの予定データをkintoneに連携したいというものです。

しかし、現在の2017年8月版の環境ではスケジュールJavaScript APIは一覧のイベントのみで、また予定データを取得するといった機能が搭載されていません。

そのため今回はガルーンの予定メニュー連携の機能を使って、HTMLからファイル管理上のJavaScriptファイルやその他のライブラリを呼び出すという方法で実装しました。

1. プロキシAPIの設定

管理画面の「API」>「プロキシAPIの設定」で、次の3つのプロキシコードの設定を追加します。管理画面の使用方法については、Garoonヘルプ クラウド版・パッケージ版 もご参照ください。

• getKintoneRecord
• registerKintoneRecord
• updateKintoneRecord

それぞれ、以下の表と画面を参考にして設定してください。
※画面ではBasic認証を利用した環境のため、キーにAuthorization, 値に Basic 'BASE64エンコードされたID:パスワードの文字列'を設定しています。

プロキシAPIの設定画面の主な項目

プロキシコード	ステータス	メソッド	ヘッダー（キー:値）	説明
getKintoneRecord	有効	GET	X-Cybozu-API-Token: kintoneで生成したAPIトークン	kintoneデータ取得用プロキシコード。 登録か更新かの判別のために必要です。
registerKintoneRecord	有効	POST	X-Cybozu-API-Token: kintoneで生成したAPIトークン Content-Type:application/json	kintoneデータ登録用プロキシコード。 該当イベントIDがない場合、kintoneに登録します。
updateKintoneRecord	有効	PUT	X-Cybozu-API-Token: kintoneで生成したAPIトークン Content-Type:application/json	kintoneデータ更新用プロキシコード。 該当イベントIDがある場合、kintoneを更新します。

getKintoneRecordの詳細画面

registerKintoneRecordの詳細画面

updateKintoneRecordの詳細画面

2. 適用ファイルの準備

下記のサンプルコードをエディタにコピーして、ファイル名を「grkin_common.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
※15行目のkintoneアプリIDは、お客様の環境に合わせて修正ください。

次に、下記のJavaScriptファイルをダウンロードしてください。
※文字化けする可能性があるため、右クリックし、直接ダウンロードしてください。
※こちらのファイルは修正せず、そのまま適用して利用いただくファイルとなります。

• grkin_schedule.js ファイル

【ポイント】

プロキシAPIを使ってkintone APIを実行している箇所を抜粋します。

GET

POST

PUT

3. JavaScriptとCSSファイルのアップロード

• grkin_common.jsとgrkin_schedule.jsをファイル管理に保存します。

  

• sweetalert_button_grn.css をファイル管理に保存します。
  sweetalert_button_grn.css は SweetAlert の表示崩れを防ぐ css です。詳細はこちらをご参考ください。
  sweetalert_button_grn.cssの入手方法：

  1. https://github.com/garoon/css-for-SweetAlert にアクセスします。
  2. [Clone or download]ボタンをクリックして、「Download ZIP]を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー以下の「sweetalert_button_grn.css」を利用します。
  

このとき、それぞれのファイルのダウンロードリンクをのちほどメニュー連携で使うので控えておいてください。

ファイルの詳細から「ファイル右クリック→リンクのアドレスをコピー」でダウンロードリンクが生成できます。

4. 予定メニュー連携の設定

管理画面の「スケジュール」>「予定メニュー連携」>「予定メニュー連携を追加する」で、既存または新規の予定メニューの項目に、以下のHTMLコードを記述します。

※ 6～8行目のgrkin_common.jsとgrkin_schedule.js、sweetalert_button_grn.cssのダウンロードリンクについては、お客様の環境に合わせて修正ください。また、grkin_common.jsとgrkin_schedule.jsの記載順番を間違えたら、プログラムが動けないので、ご注意ください。

「往訪」メニューに連携させるよう記述した例が以下の画面です。

以上ですべての設定は完了です！
最初にお見せした完成イメージの通り、動けば成功です。
お疲れ様でした！

おわりに

ガルーンのスケジュールとkintoneとの壁がついになくなりました！ このサンプルの場合、ガルーンのスケジュールと連携したkintoneでの議事録管理や案件管理に使うことができそうです。フィードバックをお待ちしております。

変更履歴

• 2020/02/13
  
  • sweetalert_button_grn.css適用方法の追記
  • grkin_common.jsとgrkin_schedule.jsの記載順番に関する注意事項の追記