はじめに
今回は、「Garoon Utility Library for JavaScript」について紹介します。
「Garoon Utility Library for JavaScript」とは、サイボウズ ガルーンのSOAP APIにアクセスするJavaScript ライブラリです。
例えば、スケジュール登録でリクエストトークンの取得や登録する予定の作成などの処理を、よりシンプルに記述できます。
それでは、その使い方を説明します。
Garoon Utility Library for JavaScriptのダウンロード
GitHubよりダウンロードいただき、読み込ませてご利用ください。
使い方として製品内で使う場合、以下のように読み込ませます。
ワークフローの場合のファイル読み込み画面（5月のアップデート後より使用可能になります）
利用可能な製品、及び必要な条件
- クラウド版 Garoonに対応しています。下記のアプリケーションで利用可能です。
- ベース（Base)
- スケジュール（Schedule）
- 以下の JavaScript ライブラリに依存しています。
- jQuery v3.1.1
※SOAP APIの扱えるバージョンであればオンプレ版ガルーンでも動作しますが、動作確認が取れておりません。
セキュリティ
APIアクセスの度に、ログイン名およびパスワードをプレーンテキストでサーバーに送信しています。セキュリティを確保するためには、SSLをご利用ください。
Garoon Utility Library for JavaScriptの構造
以下は、Garoon Utility Library for JavaScriptで提供されたクラスです。
詳細はこちらをご確認ください。
サンプルコード
例：下記の予定を新規登録するサンプルコードです。
・開始時刻 : 2017/2/15 10:30
・終了時刻 : 2017/2/15 11:00
・予定メニュー : 打ち合わせ
・タイトル : bozuman会議
・詳細 : 議事録必要
・参加者のユーザーID : 2
・タイムゾーン : Asia/Tokyo
・公開方法 : 公開
まず、「Garoon Utility Library for JavaScript」を使わなかった場合、
「Garoon SOAP API」でリクエストトークンを取得し、「予定を登録する」のようにXML形式で登録する予定の情報を記述する必要があります。
「Garoon Utility Library for JavaScript」を使わなかった場合
一方、「Garoon Utility Library for JavaScript」を使うと、パラメータ（JSON）を指定するだけで、スケジュールを新規登録することができます。レスポンスもJSON形式で取り扱うことができます。
「Garoon Utility Library for JavaScript」を使った場合
この様にコードが簡素化できました。
cybozu-connectとの相違点
cybozu-connect はサイボウズの連携APIにアクセスするための JavaScript ライブラリです。
詳細はこちらをご参考ください。
cybozu-connectとの相違点は以下です。
- kintoneやガルーンカスタマイズ時に利用する想定で、各関数をカスタマイズJSから参照しやすい形に変更しています。
（内部的な変更であり利用の仕方自体に変わりはありません。）
最後に
「Garoon Utility Library for JavaScript」は、皆さんの開発負荷を軽減できるよう、今後も機能を拡充していく予定です。
ぜひコメントでのフィードバックをお待ちしています。
kintoneアプリのcreate.submit時に上記プログラムが動作するように変更し、検証してみたところ、以下のようなエラーが発生しました
「Uncaught TypeError: e.update is not a function」
garoonUtility.min.js上でエラーになっている部分で「e」をログで出力したところ、「true」と返ってきており、updateメソッドが存在しないことが見受けられました。
何か原因があるのでしょうか
ご教授いただけると幸いでございます
oota様
フィードバックありがとうございます。
kintoneアプリカスタマイズでjQueryを使用されてますでしょうか？
他のjQueryと競合してエラーが出る事例がありました。
その場合、以下の方法で回避できます。
上記プログラムを適用して検証してみたところ、同じエラーが発生しています。
ソースコードは以下の通りです
var myJQuery = jQuery.noConflict(true);
(function($) {
"use strict";
kintone.events.on("app.record.create.submit", function(event) {
var garoonUrl = 'https://domain.cybozu.com/g/';
var id=kintone.getLoginUser().id;
var testEvent = {
'id': 'dummy',
'allDay': false,
'start': new Date(2017, 4, 22, 10, 30),
'end': new Date(2017, 4, 22, 11, 0),
'event_type': 'normal',
'public_type': 'public',
'plan': '構築/修正',
'detail': 'bozuman会議',
'description': '議事録必要',
'timezone': 'Asia/Tokyo',
'start_only': true,
'userIdList': [id],
'orgIdList': [],
'facilityIdList': []
};
console.log(testEvent)
console.log($().jquery)
var myAccess = new GSC.CybozuConnect.App(garoonUrl).sso();
var schedApi = new GSC.CybozuConnect.Schedule(myAccess);
schedApi.addEvent(testEvent);
});
})(myJQuery);
oota様
cybozu developer network運営チームでございます。
サンプルソースコードの書き方が間違っていました。
大変申し訳ありませんでした。
修正後のソースコードを参考し、もう一回お試していただけますでしょうか。
修正前：
var myAccess = new GSC.CybozuConnect.App(garoonUrl).sso();
修正後：
var myAccess = new GSC.CybozuConnect.App(garoonUrl);
myAccess.sso();
また、1点訂正させていただきます。
Garoon Utility LibraryはjQuery内包していありますので、新たにjQueryを読み込む必要がありませんでした。
修正後検証したところ、無事スケジュールに登録できたことを確認いたしました。
ご教授いただき、ありがとうございます
こちらのサンプルソースをともに試し登録はできたのですが、
コンソールログ上に「Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check」
が表示されます。POSTのタイミングで表示されているようですが、回避する方法はあるのでしょうか？
Kintone初心者研修中様
こちらのエラーは以下のTipsにありますとおり、同期処理を行う際にXMLHttpRequestであまり推奨されない書き方をしていることから表示されていると考えられます。
Promiseを利用したモダンなアプリの全レコード取得の書き方
https://developer.cybozu.io/hc/ja/articles/204730600
Garoon Utility Library for JavaScript ライブラリは有志による開発で提供されています.
Promise対応するようライブラリを改修すればエラーは解消されるはずですが、Issueには登録されているものの、未対応となっている状況です。
順次対応いたしますので何卒ご容赦のほどお願いいたします。
お世話になっております
上記プログラムでスケジュールの登録は正常に動作するのですが、id部分をスケジュールIDに書き換えて、更新処理(.modifyEvent())を行うと
「パラメーターが不足しております」と表示され、更新処理が失敗してしまいます
対処方法をご教授いただいてもよろしいでしょうか
oota 様
回答遅くなりまして申し訳ございません。
詳細は確認中ですが、エラー「パラメータが不足しております」と次の仕様からすると、membersとwhenの指定が必要ではないかと推測しております。
https://github.com/garoon/garoonUtlity/blob/master/src/soap/schedule.js#L286
それを追加して試していただけますでしょうか。
よろしくお願いいたします。
お世話になっております。
addEventにてスケジュール登録はできたのですが、
1.public_typeはソースを見ると"public"固定になっているようですが理由があるのでしょうか。
2.戻り値がfalseになるのですが、どのような理由が考えられますでしょうか。スケジュールの登録自体はうまくいっております。
oiです。すみません。2.についてはvisStart, visEnd を指定してなかったからでした。指定すれば戻り値が取得できました。
oi 様
こんにちは。
cybozu developer networkの運営事務局です。
質問くださった、1番についてですが、
public_typeには「public」、「private」、「qualified」この3つが指定可能となっております。
詳しくは以下のドキュメントをご参照ください。
https://developer.cybozu.io/hc/ja/articles/202463250#step5
よろしくお願いいたします。
cybozu developer network運営事務局様
oiです。
仕様はそうなのですが、privateに設定しても公開となってしまいます。
v0.1.2のschedule.jsソースを見ると以下の通り”public_type”固定でした。
this.addEvent = function (event, visStart, visEnd) {
/// <summary>予定を追加する。</summary>
/// <param name="event" type="Object">追加する予定の情報</param>
/// <param name="visStart" type="Date">（戻り値としての予定を）取得する期間の開始日時</param>
/// <param name="visEnd" type="Date">（戻り値としての予定を）取得する期間の終了日時</param>
/// <returns type="Array">追加された予定の配列</returns>
if (event.userIdList) {
if (event.userIdList.length + event.orgIdList.length + event.facilityIdList.length == 0) {
alert("参加者がいません。");
return null;
}
}
var params = {
schedule_event: {
xmlns: "",
id: "dummy",
event_type: event.event_type,
version: "dummy",
public_type: "public",
plan: event.plan,
detail: event.detail,
description: event.description,
allday: String(event.allDay)
}
};
ちなみに.modifyEventは問題なく動作します。
以上、よろしくお願いいたします。
oi 様
お世話になっております。
cybozu developer network 運営事務局です。
色々と試していただきありがとうございます。
また、ご不便おかけしまして申し訳ありません。
ご指摘いただいた部分については社内にフィードバックをさせていただきました。
また、githubのissueにも登録しておきましたので、これから調査を進める予定です。
何卒よろしくお願いします。