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の環境が必要です。
  • 使用しているWebブラウザーの設定によっては、サードパーティー Cookieの読み取りを許可する必要があります。

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

固定リンクがコピーされました

完成イメージ

固定リンクがコピーされました

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で動作を確認しています。