「Garoon Utility Library for JavaScript」の使い方

フォローする

 はじめに

今回は、「Garoon Utility Library for JavaScript」について紹介します。
「Garoon Utility Library for JavaScript」とは、サイボウズ ガルーンのSOAP APIにアクセスするJavaScript ライブラリです。
例えば、スケジュール登録でリクエストトークンの取得や登録する予定の作成などの処理を、よりシンプルに記述できます。
 
それでは、その使い方を説明します。

Garoon Utility Library for JavaScriptのダウンロード

GitHubよりダウンロードいただき、読み込ませてご利用ください。
使い方として製品内で使う場合、以下のように読み込ませます。
 
ワークフローの場合のファイル読み込み画面(5月のアップデート後より使用可能になります)
capture-javascript.PNG

利用可能な製品、及び必要な条件

  • Garoon on cybozu.comに対応しています。下記のアプリケーションで利用可能です。
    • ベース(Base)
    • スケジュール(Schedule)
  • 以下の JavaScript ライブラリに依存しています。

※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」は、皆さんの開発負荷を軽減できるよう、今後も機能を拡充していく予定です。
ぜひコメントでのフィードバックをお待ちしています。
 
 

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

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

Avatar
oota

kintoneアプリのcreate.submit時に上記プログラムが動作するように変更し、検証してみたところ、以下のようなエラーが発生しました

「Uncaught TypeError: e.update is not a function」

garoonUtility.min.js上でエラーになっている部分で「e」をログで出力したところ、「true」と返ってきており、updateメソッドが存在しないことが見受けられました。

何か原因があるのでしょうか

ご教授いただけると幸いでございます

 

Avatar
cybozu Development team

oota様

フィードバックありがとうございます。

kintoneアプリカスタマイズでjQueryを使用されてますでしょうか?

他のjQueryと競合してエラーが出る事例がありました。

その場合、以下の方法で回避できます。

1. jQuery 読み込み
2. JSカスタマイズ
var myJQuery = jQuery.noConflict(true);
(function($){
   console.log($().jquery);    // バージョン確認
})(myJQuery);
 
もし改善しなかった場合はお知らせください。
Avatar
oota

上記プログラムを適用して検証してみたところ、同じエラーが発生しています。

ソースコードは以下の通りです

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により編集されました
Avatar
cybozu Development team

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を読み込む必要がありませんでした。

よろしくお願いします。

 

 

Avatar
oota

修正後検証したところ、無事スケジュールに登録できたことを確認いたしました。

ご教授いただき、ありがとうございます

Avatar
Kintone初心者研修中

こちらのサンプルソースをともに試し登録はできたのですが、

コンソールログ上に「Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check」

が表示されます。POSTのタイミングで表示されているようですが、回避する方法はあるのでしょうか?

 

Avatar
cybozu Development team

Kintone初心者研修中様

こちらのエラーは以下のTipsにありますとおり、同期処理を行う際にXMLHttpRequestであまり推奨されない書き方をしていることから表示されていると考えられます。

Promiseを利用したモダンなアプリの全レコード取得の書き方
https://developer.cybozu.io/hc/ja/articles/204730600

Garoon Utility Library for JavaScript ライブラリは有志による開発で提供されています.

Promise対応するようライブラリを改修すればエラーは解消されるはずですが、Issueには登録されているものの、未対応となっている状況です。

順次対応いたしますので何卒ご容赦のほどお願いいたします。

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