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

フォローする

Index

概要

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

kintoneRegister-11.JPG

前提条件と注意事項

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

できること

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

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

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

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

完成イメージ

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

 予定メニュー連携を設定する

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に登録します。
updateKintonerRecord 有効 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」にしてください。
※ 13行目のkintoneアプリIDは、お客様の環境に合わせて修正ください。

次に、下記のJavaScriptファイルをダウンロードしてください。
※ こちらのファイルは修正せず、そのまま適用して利用いただくファイルとなります。

【ポイント】

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

GET

POST

PUT

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

grkin_common.jsとgrkin_schedule.jsファイル管理に保存します。このとき、それぞれのファイルのダウンロードリンクをのちほどメニュー連携で使うので控えておいてください。

kintoneRegister-17.JPG

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

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

※ 6行目と7行目のgrkin_common.jsとgrkin_schedule.jsのダウンロードリンクについては、お客様の環境に合わせて修正ください。

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

kintoneRegister-16.JPG

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

おわりに

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

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

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

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