「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には登録されているものの、未対応となっている状況です。

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

Avatar
oota

お世話になっております

上記プログラムでスケジュールの登録は正常に動作するのですが、id部分をスケジュールIDに書き換えて、更新処理(.modifyEvent())を行うと

「パラメーターが不足しております」と表示され、更新処理が失敗してしまいます

対処方法をご教授いただいてもよろしいでしょうか

 

Avatar
cybozu Development team

oota 様

回答遅くなりまして申し訳ございません。

詳細は確認中ですが、エラー「パラメータが不足しております」と次の仕様からすると、membersとwhenの指定が必要ではないかと推測しております。

https://github.com/garoon/garoonUtlity/blob/master/src/soap/schedule.js#L286

それを追加して試していただけますでしょうか。

よろしくお願いいたします。

Avatar
oi

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

addEventにてスケジュール登録はできたのですが、

1.public_typeはソースを見ると"public"固定になっているようですが理由があるのでしょうか。

2.戻り値がfalseになるのですが、どのような理由が考えられますでしょうか。スケジュールの登録自体はうまくいっております。

Avatar
oi

oiです。すみません。2.についてはvisStart, visEnd を指定してなかったからでした。指定すれば戻り値が取得できました。

Avatar
cybozu Development team

oi 様

こんにちは。
cybozu developer networkの運営事務局です。

質問くださった、1番についてですが、
public_typeには「public」、「private」、「qualified」この3つが指定可能となっております。

詳しくは以下のドキュメントをご参照ください。
https://developer.cybozu.io/hc/ja/articles/202463250#step5


よろしくお願いいたします。

 

Avatar
oi

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は問題なく動作します。

以上、よろしくお願いいたします。

Avatar
cybozu Development team

oi 様

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

色々と試していただきありがとうございます。
また、ご不便おかけしまして申し訳ありません。

ご指摘いただいた部分については社内にフィードバックをさせていただきました。
また、githubのissueにも登録しておきましたので、これから調査を進める予定です。

何卒よろしくお願いします。

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