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

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

【ポイント】

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

GET

POST

PUT

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

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

__________2017-09-28_16.12.18.png

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

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

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

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

__________2017-09-29_17.38.24.png

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

おわりに

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

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

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

Avatar
株式会社ケインズアイ

「プロキシAPIの設定画面の主な項目」のPUTメソッド内のプロキシコードの記載が「updateKintonerRecord」となっています。正しくは「updateKintoneRecord」になると思います。

Avatar
cybozu Development team

株式会社ケインズアイ様

ご指摘をありがとうございます。

>「プロキシAPIの設定画面の主な項目」のPUTメソッド内のプロキシコードの記載が「updateKintonerRecord」

-> 「updateKintoneRecord」に修正いたしました。

Avatar
Kintone初心者研修中

コピペ&値変更で動作確認できるように記述するならば、「grkin_common.js」と記載されていますが、

JAVAファイルのアップロード「grkin_schedule_common.js」で記載されていますので統一したほうがいいのではないでしょうか?

 

 

Avatar
Kintone初心者研修中

予定メニューの連携部分のHTMLコードですが、最終行の

"garoonScheduleKintone.regiterKintoneRecord();"ですが、"garoonScheduleKintone.regitsterKintoneRecord();

でしょうか?

 コピー用のコードでは、"garoonScheduleKintone.regitsterKintoneRecord();になっており、画像ではgaroonScheduleKintone.regiterKintoneRecord();になっています。

動作できるのは、画像の方です。

Kintone初心者研修中により編集されました
Avatar
cybozu Development team

Kintone初心者研修中 様

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

混乱を招いてしまい申し訳ありません。
ご指摘いただいた2件につきましては、社内にフィードバックし、対応を完了いたしました。

1)「grkin_common.js」に統一
2)「予定メニュー連携の設定」のHTMLコードの10行目をgaroonScheduleKintone.registerKintoneRecord(); に修正

画像の部分に誤字があるところも、すぐに差し替えできるようにフィードバックいたしますので、
何卒よろしくお願い致します。

Avatar
cybozu Development team

Kintone初心者研修中 様

こんにちは。

cybozu developer network運営事務局です。
ご指摘いただいた画像につきましても修正を完了いたしました。
ありがとうございました。

今後ともcybozu developer networkをよろしくお願いいたします。

Avatar
sohan

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

記述の通り、何回も試しましたが動作しません。

手順を検証してみてもらえませんか?

Avatar
cybozu Development team

sohan様 ご不便をおかけして申し訳ございません。

「4. 予定メニュー連携の設定」のHTMLコードに誤りがございました。

6行目の"grkin_schedule_common.js"を"grkin_common.js"に修正してご確認いただけますでしょうか。

もしうまくいかない場合は、ブラウザの開発者ツールのコンソールのエラーをご教示ください。

よろしくお願い申し上げます。

Avatar
sohan

cybozu Development team様
お世話になっております。

HTMLのところは直しました。動かないのでボタンを押して実行するときのエラーを送ります。

SCRIPT438: オブジェクトは 'registerKintoneRecord' プロパティまたはメソッドをサポートしていません。

6行目で止まってしまいます。また、Garoonのファイル管理に付与するフォルダアクセス権の設定は関係ありませんか?

 

 

Avatar
cybozu Development team

sohan様

ご連絡をありがとうございます。

再度検証しましたところ、garoon_schedule.jsの関数名を  'regiterKintoneRecord' を'registerKintoneRecord' に直したところ動作したという報告があります。

garoon_schedule.jsをそのように修正して再度アップロードいたしましたので、ダウンロードしご確認いただけますでしょうか。

たびたびお手数をおかけし大変申し訳ありません。

Avatar
sohan

cybozu Development team様
お世話になっております。

新しいgaroon_schedule.jsに置き換えたら動作しました。

ありがとうございました!

Avatar
KUNI

kintoneからガルーンのスケジュールと連携することは可能なのでしょうか?

今回の内容を「kintone」で登録することで「ガルーン」の予定を登録したいのですが・・・

Avatar
Kintone初心者研修中

KUNI様

完全な連携とはいきませんが可能ですよ。Kintoneからは、GaroonSOAPを利用して登録することは可能です。

できないこととしては、Garoonでスケジュールを削除した場合には、Kinton側のデータが消せないと思います。

Garoon側にスケジュール削除のイベントが取れないので実行させるトリガーが思い浮かびません。

私の方も何点かコミュニティーで確認して、Graroon→Kintone Kinton→Garoonとデータの登録はできています。

 

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