カテゴリー内の他の記事

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

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

Index

概要

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

kintoneRegister-11.JPG

前提条件と注意事項

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

できること

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

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

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

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

完成イメージ

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

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

kintoneRegister-8.JPG.gif

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

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

kintone アプリの設定手順

1. アプリの作成

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

__________2017-08-08_15.18.54.png

1-1. フォーム

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

フィールド名 フィールドコード フィールドタイプ 備考
イベントID EventId 文字列(一行)  
タイトル Title 文字列(一行)  
開始日時 StartDate 日時  
終了日時 EndDate 日時  
参加者 AttendUser ユーザー選択  
メモ Memo 文字列(複数行)  
コメント日時(テーブル)

CommentDate

日時

「コメント日時」から「コメント内容」まではテーブルとして設定します。

コメント登録者(テーブル) CommentUser ユーザー選択  
コメント内容(テーブル) CommentContents 文字列(複数行)  
- CommentTable テーブル 上記3つのフィールドのテーブルのフィールドコード

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

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

__________2017-08-09_10.53.50.png

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の詳細画面

kintoneRegister-14_Basic_____.png

registerKintoneRecordの詳細画面

kintoneRegister-13_Basic_____.png

updateKintoneRecordの詳細画面

kintoneRegister-12_Basic_____.png

2. 適用ファイルの準備

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

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

【ポイント】

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

GET

POST

PUT

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

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

    garkin-5.png

  • 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」を利用します。
    garkin-6.png

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

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

image1.png

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

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

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

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

garkin.png

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

おわりに

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

変更履歴

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

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

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

Avatar
KUNI

今回の概要説明にある、Garoon側 予定メニュー「往訪」のみ、kintone側 タイトル欄に登録。

または、Garoon側 予定メニュー「Meetup参加」のみ、kintone側 タイトル欄に登録するには、

どのように指定すれば(grkin_schedule.js 内を変更)良いでしょうか?

そもそも可能でしょうか?

Avatar
Kintone初心者研修中

Garoonのスケジュールの予定メニューに「往訪」、「会議」、「仮予定」

と設定している場合、ボタン登録をしたい各予定メニューに対して、【4. 予定メニュー連携の設定】の設定が必要です。

仮に、「仮予定」のみ設定しない場合、Garoonスケジュールの予定メニューが「往訪」、「会議」に設定

されているスケジュールのみ登録ボタンが表示される仕組みになっています。

設定するスクリプトはすべて同じもので構いません。

また、サンプルのスクリプトでは「スケジュール内容」ではボタンが表示されませんので、スクリプトを変更する必要があります。

Avatar
Kintone初心者研修中

本記事の、grkin_schedule.js ファイル GET では、offset の制限値を考慮したレコード一括取得についてに記載されている警告は該当しないコードになっていますでしょうか?

現在、自身の環境で、対象のアプリにて警告が発生しています。(登録レコードは10万件超です)

 

Avatar
cybozu Development team

Kintone初心者研修中 様

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

本記事で使用している GET のコードは、取得するレコードが 1 万件を超えると見込まれる場合を想定しておりません。
1万件を超えることが想定される場合は、offset の制限値を考慮した書き方に変更していただく必要があります。

その際の技術的なご質問につきましては、ぜひ cybozu developer コミュニティ をご活用ください。

ご確認よろしくお願いいたします。

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