Garoon 開発 Tips

Garoon × Box 連携（ポータル／スケジュール）

目次

caution
警告

導入する際は、次の該当箇所を確認し、認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所：一時的なアクセストークンを発行する部分
参考）

はじめに

Box (External link) は、Box Inc. が提供するクラウドコンテンツ管理サービスです。

cybozu developer network では Box と連携した Box for kintone プラグイン を公開していますが、今回は Garoon と連携する便利なカスタマイズを 2 件紹介します。

  • ポートレットのカスタマイズ
    Garoon のログインユーザーに紐づく Box アカウントのフォルダーを表示します。
    Box で管理しているファイルを Garoon から閲覧できます。
  • スケジュールのカスタマイズ
    予定に紐づく Box Notes (External link) をボタンひとつで作成・表示します。
    Box Note を作っておけば、打ち合わせなどの議事録のメモ帳として使えるので、議事録管理も簡単です。

必要なもの

  • クラウド版 Garoon
  • Box (External link) ビジネスアカウント

注意事項

このカスタマイズには、クラウド版 Garoon の環境が必要です。

ポートレットのカスタマイズ

完成イメージ

Box アカウントのフォルダー一覧を表示するポートレットです。

カスタマイズの設定

Garoon ポートレットを追加、ポータルに表示します。

1. HTML ポートレットの追加

次の内容で、HTML ポートレットを追加します。
手順の詳細は、 HTML ポートレットの設定 (External link) を参照してください。

項目 値
ポートレット名 任意の値を入力してください。
この記事では「Box 連携」とします。
ポートレットの内容
  • 「テキスト」を選択します。
  • 「内容」には、次のポートレット HTML を貼り付けます。
ポートレット HTML
1
2
3
4
5
6
7
8

<!--
* Box portlet sample program
* Copyright (c) 2019 Cybozu
*
* Licensed under the MIT License
-->

<iframe id="Boxiframe" src="https://app.box.com/embed/folder/0" width="100%" height="600" frameborder="0" allowfullscreen webkitallowfullscreen msallowfullscreen></iframe>
2. ポータルへの配置

作成した HTML ポートレットをポータルに配置します。
手順の詳細は、 ポートレットを配置する (External link) を参照してください。

動作確認

  1. Garoon で、カスタマイズした HTML ポートレットを配置したポータルを開きます。

  2. Box ポートレット上のログインボタンをクリックし、Box のアカウント情報を入力してログインします。

    次の画面が表示される場合は、雲のアイコンを操作します。

  3. Garoon のポータルに Box のファイル一覧が表示されます。

スケジュールのカスタマイズ

完成イメージ

予定メニュー連携 (External link) を使って、特定の予定メニューのときに、予定の詳細画面で Box Note を作成、表示します。

Box Note の作成

予定の詳細画面の[Box Note を追加する]ボタンをクリックすると、予定のタイトルと同じファイル名で Box Note を作成します。

  • Box Note は、ひな型になる Box Note をコピーして作成されます。
  • Box Note は、議事録を作成する人が作成してください。
    共同で編集したい場合は、作成した Box Note の共有リンク設定を、編集権限付き共有リンクに変更してください。
    参照： box Support | Box Notes の共有 (External link)
予定に紐づく Box Note の表示

予定に紐づく Box Note が作成されていれば、予定の詳細画面に Box Note の内容を表示します。

  • [Box で編集する]ボタンをクリックすると、別タブでその Box Note が表示され内容を編集できます。
  • [Box note の連携削除]ボタンをクリックすると、予定と Box Note の紐付けが解除されます。
    • 連携を解除しても、作成した Box Note は削除されません。
    • 繰り返し予定では、同じ Box Note が表示されます。

システム構成

Garoon と Box の関係は次のようになっています。

  • Box API で API 実行に必要なアクセストークンを取得します。
  • 取得したアクセストークンを利用して、Box の API を実行し、ノートの作成や共有 URL を生成します。

スケジュールのカスタマイズの設定

スケジュールのカスタマイズでは、Box と Garoon で設定します。

Box の設定

Box では、以下を実施します。

  1. アプリの作成
  2. テンプレートとする Box Note の準備
  3. 管理対象ユーザーの追加
1. アプリの作成

OAuth による認可のため、「クライアント ID」と「クライアントシークレット」を発行します。

  1. Box 開発者コンソール (External link) にログインします。

  2. [アプリの新規作成]をクリックします。

  3. [カスタムアプリ]を選択します。

  4. [サーバー認証（クライアント資格情報許可）]を選択し、アプリ名を入力します。
    ここでは、例として「Garoon-schedule」を入力しています。
    入力が終わったら、[アプリを作成]ボタンをクリックします。

  5. [構成]タブで、次の内容を設定します。設定したら[保存]ボタンをクリックします。

    • アクセスレベル：「アプリ + Enterprise アクセス」を選択
    • 管理操作：「ユーザーを管理する」にチェック
    • 高度な機能：「as-user ヘッダーを使用して API 呼び出しを行う」

  6. [承認]タブで、「Enterprise へのアクセス権限に対する承認を得るためにアプリを送信」の[確認して送信]ボタンをクリックします。

  7. 「アプリ承認の送信内容の確認」ダイアログで、「アプリの説明」に適当な内容を入力し、[送信]ボタンをクリックします。

  8. 右上のユーザーアイコンをクリックし、「管理コンソール」を選択します。

  9. 左メニューの「アプリ」を選択し、[カスタムアプリ]タブで作成したアプリを選択します。

  10. [承認]ボタンをクリックします。

  11. 「カスタムアプリの承認」ダイアログで、[承認]ボタンをクリックします。

  12. [マイアプリ]で[作成したアプリ名]をクリックし、[一般]タブを開きます。

  13. 「マイアプリ」で、Enterprise ID を確認します。
    Enterprise ID は、後述の プロキシ API の設定 で使用するので、メモしておいてください。

  14. 「サービスアカウント情報」で、Service Account ID を確認します。
    Service Account ID は、後述の ひな形 Box Note 準備 で Note の共有先として利用するので、メモしておいてください。

  15. [構成]タブを開きます。

  16. 「OAuth 2.0 資格情報」で、クライアント ID とクライアントシークレットを確認します。
    クライアントシークレットは、[クライアントシークレットを取得]ボタンをクリックすると取得できます。
    クライアント ID とクライアントシークレットは、後述の プロキシ API の設定 で使用するので、メモしておいてください。

以上で、アプリの設定は終わりです。

2. ひな型 Box Note の準備

予定に紐づく Box Note の元となる、ひな型 Box Note を用意します。

  1. Box (External link) にログインします。
  2. 任意のフォルダーを開き、[新規]ボタンをクリック、[テンプレート使用の Box Note]を選択します。

  3. 新規ウィンドウが表示されます。任意のテンプレートを選択し、[作成]ボタンをクリックします。
    この記事では、Box が用意している「ミーティングアジェンダ」を利用します。

  4. 作成された Note の URL より、Note ID（「notes/」以降の値）を確認します。
    例： URL が https://app.box.com/notes/xxxxxx のとき、Note ID は xxxxxx です。
    Note ID は、後述の カスタマイズファイルの適用 で利用するので、メモしておいてください。
  5. サンプルデータが入力されているので、不要な部分を削除しておきます。
  6. ノートを追加したフォルダーに戻り、[共有]ボタンをクリックします。
  7. 「ユーザーを招待」に、先ほどメモしておいた Service Account ID を入力し、[送信]ボタンをクリックします。

以上で、ひな型 Box Note の準備は終わりです。

3. 管理対象ユーザーの追加

管理対象ユーザーに、Box カスタマイズを適用するユーザーのメールアドレスを追加します。
このとき、 cybozu.com のユーザーアカウント (External link) のメールアドレスと同じメールアドレスを指定してください。
手順の詳細は box Support | 管理対象ユーザーの追加 (External link) を参照してください。

Garoon の設定

Garoon では、以下を実施します。

  1. プロキシ API の設定の追加
  2. 予定連携メニューの追加
  3. スケジュールカスタマイズの適用
1. プロキシ API の設定の追加

Box API を実行するため、6 つのプロキシ API 設定を追加します。
手順の詳細は、 プロキシ API の設定 (External link) を参照してください。

  • ファイルのコラボレーション（アクセス権）に操作ユーザーを追加する

    項目 値
    ステータス 「有効」を選択
    プロキシコード addUserToCollaborations
    メソッド 「POST」を選択
    URL https://api.box.com/2.0/collaborations
    ヘッダー
    • コンテンツタイプ
      • キー：Content-Type
      • 値：application/json

  • テンプレートとする Box Note をコピーする

    項目 値
    ステータス 「有効」を選択
    プロキシコード copyNote
    メソッド 「POST」を選択
    URL https://api.box.com/2.0/files
    ヘッダー
    • コンテンツタイプ
      • キー：Content-Type
      • 値：application/json

  • 共有リンクのURLを作成、取得する

    項目 値
    ステータス 「有効」を選択
    プロキシコード createSharedLink
    メソッド 「PUT」を選択
    URL https://api.box.com/2.0/files
    ヘッダー
    • コンテンツタイプ
      • キー：Content-Type
      • 値：application/json

  • アクセストークンを取得する

    項目 値
    ステータス 「有効」を選択
    プロキシコード getApiToken
    メソッド 「POST」を選択
    URL https://api.box.com/oauth2/token
    ヘッダー
    • コンテンツタイプ
      • キー：Content-Type
      • 値：application/json
    ボディ

  • ファイルのコラボレーション（アクセス権）を取得する

    項目 値
    ステータス 「有効」を選択
    プロキシコード getCollaborations
    メソッド 「GET」を選択
    URL https://api.box.com/2.0/files
    ヘッダー
    • コンテンツタイプ
      • キー：Content-Type
      • 値：application/json

  • Box ユーザーのユーザー ID を取得する

    項目 値
    ステータス 「有効」を選択
    プロキシコード getUserId
    メソッド 「GET」を選択
    URL https://api.box.com/2.0/users
    ヘッダー
    • コンテンツタイプ
      • キー：Content-Type
      • 値：application/json
2. 予定メニュー連携

予定メニュー連携を使うと、予定を登録するときに選択する「予定メニュー」に連携して、スケジュール詳細画面の「メモ」の下に行を追加できます。
手順の詳細は、 予定メニュー連携を追加する (External link) を参照してください。

追加する予定メニューは次のとおりです。

項目名 設定値
予定メニュー名 任意の値を選択します。
この記事では「打合」メニューが選択されたときに表示したいので、「打合」とします。
ポートレット 「ポートレット例」を選択し、次のHTML を貼り付けます。
ポートレット HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!--
* Box notes to schedule sample program
* Copyright (c) 2019 Cybozu
*
* Licensed under the MIT License
-->

<div id="box-content">
  <button style="display: none" type="button" id="create-note-button" class="button_main_sub_grn_kit">
    Box Noteを追加する
  </button>
  <button style="display: none" type="button" id="link-note-button" class="button_normal_sub_grn_kit">
    Boxで編集する
  </button>
  <button style="display: none" type="button" id="disconnect-note-button" class="button_attention_sub_grn_kit">
    Box noteの連携削除
  </button>
</div>
<div>
  <iframe style="display: none" id="embedded-box-note" src="" width="800" height="550" frameborder="0" allowfullscreen webkitallowfullscreen msallowfullscreen></iframe>
</div>
3. カスタマイズファイルの適用

カスタマイズグループを作成し、スケジュールのカスタマイズファイルを適用します。
手順の詳細は、 スケジュールのカスタマイズ (External link) を参照してください。

追加するカスタマイズ設定は、次のとおりです。

項目名 設定値
カスタマイズ 「適用する」を選択します。
カスタマイズグループ名 任意の値を入力します。
今回は「Box 連携」とします。
適用対象 カスタマイズを適用するユーザー・グループを選択します。
JavaScript カスタマイズ 次の内容を指定します。
サンプルプログラム

サンプルプログラムでは、webpack を使って次のことを行っています。

webpack における Internet Explorer 対応の詳細は、 webpack 入門 ~Babel,Polyfill を使って快適 ES6 ライフ~ を参照してください。

webpack を実行するには、Node.js の実行環境が必要です。
Node.js 公式サイト (External link) からインストーラーをダウンロードし、セットアップしてください。
このカスタマイズでは、Node.js 14 で動作を確認しています。

  1. https://github.com/garoon/garoonBox (External link) にアクセスします。

  2. [Clone or download]ボタンをクリックして、[Download ZIP]を選択します。

  3. ダウンロードした zip ファイルを解凍します。

  4. 解凍したファイルの「src」フォルダー下の「index.js」を開き、次の値を修正します。
    8 行目 BOX_TARGET_FILE_ID：メモした Note ID

  5. ターミナルで、解凍したフォルダーに移動します。

    1

    cd Garoonox-master

  6. 次のコマンドで、必要なライブラリをインストールします。

    1

    npm install

  7. webpack を実行します。

    1

    npm run webpack_prod

  8. 「dist」フォルダー以下の bundled_index.js を Garoon カスタマイズに利用します。

動作確認

  1. Garoon スケジュールで、予定を登録します。
    このとき、「タイトル」項目の予定メニューで「打合」（ 予定メニュー連携 で設定したメニュー名と同じ値）を選択します。

  2. 登録した予定をクリックし、予定の詳細画面を表示します。

  3. 「打合」の[Box Note を追加する]ボタンをクリックします。

  4. Box へのログインを求めるウィンドウが表示されます。Box のアカウント情報を入力してログインします。

  5. 予定の「タイトル」と同じ名前の Box Note が Box に作成されます。
    作成された Box Note が、Garoon の予定詳細画面に表示されれば OK です。

    Box のログインを求められる場合は、Box のアカウント情報を入力してログインしてください。

おわりに

この記事では、Box 内のファイル一覧のポータル表示や、スケジュールに紐づく Box Note を作成・表示するポートレットカスタマイズを紹介しました。
他にも cybozu developer network では、さまざまな Garoon ポータルカスタマイズ や Garoon スケジュールカスタマイズ を紹介しています。ぜひ参照してください。

サンプルコードで使用している API

このカスタマイズでは、次の API を利用しています。
お使いの Garoon で使用できる API かどうかは、各 API のドキュメントを参照してください。

変更履歴

  • 2021 年 8 月 16 日スケジュールカスタマイズのコード修正
    すでにこのカスタマイズを適用している場合、 スケジュールのカスタマイズの設定 を参考にもう一度適用し直してください。
    なお、適用し直す前に作成した Box Note は表示されなくなります。
    変更内容の詳細は次のとおりです。
    • Box の共有リンクの保存先を、カスタム項目（additionalItems）からカスタム項目（Schedule datastore）に変更
    • jQuery と Garoon html/css/image-Kit for Customize を webpack でバンドルするように変更
    • Box への認証方法を、OAuth.io の利用から、Box のサーバー認証（クライアント資格情報許可）に変更
information

この Tips は、2021 年 7 月版 Garoon で動作を確認しています。