cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

【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
k&iソリューションズ株式会社

「プロキシ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とデータの登録はできています。

 

Avatar
Yudai Shibuya

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

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

 

このダウンロードリンクの取得方法が分からなかったという質問を個別に頂いたことがあったので、

もし可能であれば、ファイル管理上のファイルのダウンロードリンク取得方法も補足で載せておくと親切かもしれません。

Avatar
cybozu Development team

Yudai Shibuya様

コメントありがとうございます。

 

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

部分に補足画像、および説明文を追加いたしました。

 

ご指摘いただきありがとうございます。

Avatar
kintone初心者研修中

2018/5/15時点では動作

2018/5/16時点で

Refused to execute script from 'https://xxx.cybozu.com/g/cabinet/download.csp/-/grkin_schedule.js?hid=15&fid=88&ticket=&.js' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.

の表示が出るようになり動作しなくなりました。

IE11/Chrome

kintone初心者研修中により編集されました
Avatar
kintone初心者研修中

追記＞急に動作するようになりました。

 

予定連携メニューが複数あるのですが、

<script type="application/javascript" src="/g/cabinet/download.csp/-/grkin_s　

　※MIMEのTYPEエラーの為上記のように予定連携メニューのスクリプトを修正した

<script  src="/g/cabinet/download.csp/-/grkin_s

のともに普通に動作しています。

こういう現象はまれに発生するのでしょうか？

Avatar
cybozu Developer team

Kintone初心者研修中 様

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

ご質問いただいた件について調査を進めましたが、
すみません、ブラウザ側にエラーを表示している原因は不明でした。

ただ、以下の２点を設定することで、コードの修正なしでも解決できるかと思いまので、
こちらを試してみていただけますでしょか。

1) GaroonのMIMEタイプにjs application/javascriptを追加
　※MIMEタイプを追加する(Garoon ヘルプ)：
　　https://jp.cybozu.help/ja/g/admin/system/files/type#files_type_01

2) ブラウザのキャッシュをクリア

お手数おかけしますが、よろしくお願い致します。

Avatar
kintone初心者研修中

内容を追記します。

現状発生時には、

grkin_common.jsはcontent-typeがapplication/javascript

grkin_schedule.jsはcontent-typeがapplication/octet-stream

として通信されていました。

現在は、サンプルのとおり、「予定メニュー連携」に記載しておりますが、双方ともに

content-typeがapplication/javascript　で通信されており問題なく動作しています。

ご指示いただきました設定は追加　拡張子　js　MIMEタイプにjs application/javascriptを追加しましたが正常動作に変化はありません。

不具合から正常動作までにはキャッシュのクリア等も行っておりませんし、ソース自体の書き換えも行っておりません。

変更した部分は、「予定メニュー連携」部分にTYPEを記載するかしないかのみです。

 

 

 

Avatar
kintone初心者研修中

8/12のJSON.stringify()の挙動の変更により本サンプルg動作しなくなることはありますでしょうか？

8/11時点では、本サンプルのままで動作していましたが、8月12日以降動作しなくなっております。

停止する箇所も、

PUT、POSTとも、

SyntaxEditor Code Snippet

                    // *Note: The value return from JSON.stringify() is invalid because of protoype.js affection
                    Object.toJSON(postParam),　この位置
                    function(resp, status, headers) {

該当箇所で、呼び出ししたところで停止しています。デバックコンソール上ではなんらエラーは発生していません。

 

 

Avatar
しぶい

Kintone初心者研修中 さん

こちらで回答来てましたので、連絡しておきます。

Avatar
cybozu Development team

Kintone初心者研修中 様、しぶい様

2018年８月12日のアップデート「JSON.stringify()の挙動の変更」の影響で、動作に不具合が発生しておりました。
ご迷惑をおかけして申し訳ございません。

お手数ですが、ソースコードの下記２行を書き換えてご利用ください。

490行目：

JSON.stringify(postParam),

583行目：

JSON.stringify(putParam),

記事のソースコードも修正いたしました。

この度はご迷惑をおかけしまして申し訳ございませんでした。今後ともよろしくお願いいたします。

Avatar
KUNI

スケジュールを登録して、ボタン「kintone登録」までは設定できたのですが

ボタンをクリックしてもまったく反応しません。

※正常だと「登録しますか？」ダイアログが表示されるところ

 

デバッグしたところ以下のメッセージエラーが表示されました。

SCRIPT5009: 'garoonScheduleKintone' は定義されていません。

view.csp (660,31)

 

何が原因でしょうか？

Avatar
kintone初心者研修中

ファイル管理にあるgrkin_schedule.jsの保存先の指定を誤っていませんか？

サンプルではgrkin_schedule.js内に、garoonScheduleKintoneがサンプルでは定義されていますので

参照できていないように思います。

一度はまったことですが、Cookie等が残っている場合に、新しくファイルを入れ替えても依然のファイルのまま

動作したことがありましたので、一度Cookie等も削除してみたほうがいいと思います。

 

Avatar
KUNI

>>サンプルではgrkin_schedule.js内に、garoonScheduleKintoneがサンプルでは定義されていますので

>>参照できていないように思います。

grkin_schedule.js内のどこかの行を修正しないといけないのでしょうか？

もしくは

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

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

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

の事でしょうか？

６行目、７行目でしたらファイル管理のリンクをコピーしております。

Avatar
cybozu Development team

KUNI 様

エラー文言を見ると、Kintone初心者研修中 様のおっしゃる通り「garoonScheduleKintone」が呼び出せていないようです。

garoonScheduleKintone は、ガルーンの設定手順「4. 予定メニュー連携の設定」でダウンロードリンクを記載した、「grkin_common.js」ファイルの中に書かれています。

ファイル管理のリンクをコピーいただいたとのことですが、「grkin_common.js」ファイルのURLが正しいか再度ご確認いただけますでしょうか。

 

確認方法：

予定メニュー連携の設定に貼り付けた6行目と7行目のURLをコピーしてブラウザで開き、下記を確認してください。

  • ファイルがダウンロードできるか
  • ファイルの中身が正しいか

※grkin_common.js ファイルは、アプリIDのみご自身の環境に合わせて修正してください。
※grkin_schedule.js ファイルは、修正の必要はありません。

 

Kintone初心者研修中 様

フォロー頂きましてありがとうございます。

Avatar
KUNI

Kintone初心者研修中様

cybozu Development team様

ご回答ありがとうございました。

「grkin_common.js」ファイルのURLですが、再度確認しました。

問題ありませんでした。

もう１度、このサイトの文章を読み込んだところ以下の記事が引っかかったのでを登録を確認してみました。

1) GaroonのMIMEタイプにjs application/javascriptを追加
　※MIMEタイプを追加する(Garoon ヘルプ)：
　　https://jp.cybozu.help/ja/g/admin/system/files/type#files_type_01

設定が無かったので、Garoonで設定を行い再度実行してみるとエラーメッセージが以下に変わりました。

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

念のため、ファイル管理に登録している「grkin_schedule.js」を再度更新しました。

※内容は前回と同じで修正はしていません。

すると、ポップ画面が表示され、無事kintonenに登録できました。

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

KUNIにより編集されました
Avatar
KUNI

kintoneで既に作成しているアプリに
以下のように変更（分割）して登録することは可能でしょうか？

【Garoon】タイトル　→　　　　　　　　　　【kintone】 活動内容＋訪問店
（例）商談　○△商事　　　　　　　　　　　　　　　　　 活動内容：商談　　※ラジオボタン
　　　↑　　　　　　　　　　　　　　　　　　　　　　　 訪問店：○△商事　※文字列（一行）
予定メニュー名

【Garoon】日時　　　→　　　　　　　　　　【kintone】 訪問日＋開始時刻＋終了時刻
（例）2018年10月03日（水）14:00 ～ 17:00　　　　　　　訪問日：2018-10-03　※日付
　　　　　　　　　　　　　　　　　　　　　　　　　　　開始時刻：14:00　　 ※時刻
　　　　　　　　　　　　　　　　　　　　　　　　　　　終了時刻：17:00　　 ※時刻

【Garoon】参加者　　→　　　　　　　　　　【kintone】 作成者＋更新者
 attendees: 'AttendUser',
　↓
 attendees: '作成者',
 attendees: '更新者',
 ※上記ではエラーになり登録できませんでした。

Avatar
kintone初心者研修中

KUNI様

可能だと思います。

確認ですが、エラー個所はユーザの登録部分ですか？それとも特定の個所でしょうか？

また、作成者＋更新者等は、Kintoneのユーザ選択フィールドを利用しますか？文字列を利用しますか？

ユーザ選択フィールドを利用する場合は、下記の注意が必要です。

＜注意＞

参加者（予定になっている人）：attendees

作成者（予定を登録した人）：creator

更新者（予定を変更した人）：updater 

を利用する必要があります。また、別の注意事項としで、attendees.idとGaroonのユーザIDが取得できますが

GaroonユーザIDとKintoneのユーザIDとは違いますので、変換が必要です。

私は、attendees.codeでユーザ名を取得し、Kintoneからもattendees.codeで取得したID名を検索してKintoneのユーザIDに変換後

Kintoneのレコード情報として追加しています。

 

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

KUNI 様

こちらは記事のフィードバック欄です。

恐れ入りますが、技術的なご質問はコミュニティをご活用ください。

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