検索
Close
カテゴリー内の他の記事

Garoon x Box 連携（ポータル・スケジュール）

作成日
更新日
フォローする

Index

はじめに

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

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

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

必要なもの

  • クラウド版 Garoon
  • Box ビジネスアカウント
  • OAuth.io アカウント

完成イメージ

ポートレット

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

完成イメージ（ポートレット）

スケジュール

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

Box Note の作成

完成イメージ（スケジュールでBox Noteを追加）

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

  • Box Note は、ひな形になる Box Note をコピーして作成されます。
  • Box Note は、議事録を作成する人が作成してください。
    共同で編集したい場合は、作成した Box Note の共有リンク設定を、編集権限付き共有リンクに変更してください（参考：Box Notes の共有）。

予定に紐づく Box Note の表示

完成イメージ（スケジュールでBox Note を表示）

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

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

システム構成

スケジュールカスタマイズにおいて、Garoon と Box の関係は次のようになっています。

スケジュールカスタマイズのシステム構成

  • Box に対する OAuth のフローは、OAuth.io というサービスを利用して実行し、API 実行に必要なアクセストークンを取得します。
  • OAuth.io 経由で取得したアクセストークンを利用して、Box のAPIを実行します。

注意事項

  • このカスタマイズには、クラウド版 Garoon の環境が必要です。
  • スケジュールのカスタム項目（additionalItems）を利用するカスタマイズは、同時に適用できません。
  • カスタマイズプログラムは、その動作を保証するものではありません。
    カスタマイズプログラムの技術的なサポート等は行っていません。

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

ポートレットのカスタマイズは、Garoon の設定のみ行います。

Garoon の設定

設定には、Garoon 管理者権限が必要です。手順の詳細は「HTMLポートレットの設定」をご参照ください。

手順1. カスタマイズの適用

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

  1. Garoon システム管理画面を開きます。
  2. [各アプリケーションの管理]タブをクリックし、[ポータル]をクリックします。
  3. [HTMLポートレット]をクリックします。
  4. [HTMLポートレットを追加する]をクリックします。
  5. 以下の内容を入力します。入力が終わったら、[追加する]をクリックします。
    ポートレットの追加

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

    ポートレットHTML

手順2. ポータルへの配置

手順の詳細は「ポートレットを配置する」をご参照ください。

  1. Garoon システム管理画面を開きます。
  2. [各アプリケーションの管理]タブをクリックし、[ポータル]をクリックします。
  3. [ポータルの一覧]をクリックします。
  4. 作成したポートレットを配置したいポータル名をクリックします。ポータルを新規に作る場合は、「ポータルの追加」を参考に作成してください。
  5. 左メニューのポートレット一覧から、作成したポートレット（Box 連携）を、右側のレイアウトにドラッグして配置します。
  6. 配置したポートレット右上の[未公開]ボタンをクリックして「公開中」に変更します。

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

スケジュールのカスタマイズでは、Box、OAuth.io および Garoon の設定を行います。

Box の設定

Box では、以下の設定を行います。

  1. テンプレートとする Box Note の準備
  2. OAuth の設定

手順1. ひな形 Box Note の準備

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

  1. Box にログインします。
  2. 任意のフォルダーを開き、[新規]ボタンをクリックします。
    新規ボタンをクリック
  3. [テンプレート使用の Box Note]を選択します。
    テンプレート使用の Box Note を選択
  4. 新規ウィンドウが表示されます。任意のテンプレートを選択し、[作成]ボタンをクリックします。
    この記事では、Box が用意している「ミーティングアジェンダ」を利用します。
    作成ボタンをクリック
  5. Note が作成されます。作成された Note の URL より、Note ID（「notes/」以降の値）を確認します。
    例： URL が https://app.box.com/notes/xxxxxx のとき、Note ID は xxxxxx です。
    ※ Note ID は、Garoon カスタマイズに利用するので、メモしておいてください。
    Note ID をメモ
  6. サンプルデータが入力されているので、不要な部分を削除しておきます。
    不要なサンプルデータを削除

手順2. OAuth の設定

OAuth による認可を行うための「クライアントID」と「クライアント機密コード」を発行します。

  1. Box 開発者コンソール にログインします。
  2. [アプリの新規作成]をクリックします。
    アプリの新規作成をクリック
  3. [カスタムアプリ]を選択し、[次へ]ボタンをクリックします。
    カスタムアプリを選択して次へ
  4. [標準OAuth 2.0（ユーザー認証）]を選択し、[次へ]ボタンをクリックします。
    標準OAuth を選択して次へ
  5. アプリの名前をつけます。この記事では「Garoon-Schedule」としています。
    入力が終わったら、[アプリの作成]ボタンをクリックします。
    アプリ名を入力して作成
  6. 作成したアプリが表示されます。左サイドバーから[構成]を選択します。
    構成をクリック
  7. 「OAuth 2.0リダイレクトURI」と「CORSドメイン」にそれぞれ以下の値を入力します。
      • OAuth 2.0リダイレクト URI：https://oauth.io/auth
      • CORS ドメイン：https://oauth.io
    「OAuth 2.0リダイレクトURI」と「CORSドメイン」を入力
  8. 「OAuth 2.0資格情報」の「クライアントID」と「クライアント機密コード」を確認します。
    ※ これらの値は、OAuth.io の設定に利用するので、メモしておいてください。
    「クライアントID」と「クライアント機密コード」を確認

OAuth.io の設定

Garoon と Box 間の OAuth のフローを実現するため、OAuth.io にアプリを登録します。

  1. OAuth.io にログインします。
  2. 左サイドバーの[Default app]をクリックします。メニューが表示されるので、[New app]をクリックします。
    New Appをクリック
  3. 「Application name」に作成するアプリ名を入力します。この記事では「Box」としています。
    入力が終わったら、[Create]ボタンをクリックします。
    アプリ名を入力し、Create
  4. 新しいアプリが作成されます。
    ※「App Keys」に表示される「Public Key」は、Garoon カスタマイズに利用するので、メモしておいてください。
    「Application name」と「Public Key」をメモ
  5. 「Domains & URLs whitelist」に、https://{subdomain}.cybozu.com/ を入力し、Enter で確定します
    ※ {subdomain} は利用している .com 環境に合わせて変更してください。
    Domains URLs whitelist
  6. [Save Changes]ボタンをクリックして、保存します。
    Save Changes をクリック
  7. 左サイドバーから、[Integrated APIs]を選択します。
    Integrated APIs を選択
  8. [Add APIs]ボタンをクリックします。
    Add APIs をクリック
  9. 検索バーに「box」と入力します。結果の一覧が表示されるので、「Box」を選択します。
    Box を選択
  10. Box の設定でメモしておいた「クライアントID」と「クライアント機密コード」を入力します。入力が終わったら、[Save changes]ボタンをクリックして保存します。
    • client_id：クライアントID
    • client_secret：クライアント機密コード
    クライアントIDとクライアント機密コードを入力

Garoon の設定

Garoon では、以下の設定を行います。

  1. BOX API を利用するためのプロキシ API を設定
  2. 予定連携メニュー
  3. スケジュールカスタマイズの適用

なお、このカスタマイズでは、次の外部ライブラリを利用しています。

手順1. プロキシ API 設定

ノート登録用と共有リンク作成用のふたつのプロキシAPIを設定します。
手順の詳細は「プロキシAPIの設定」をご参照ください。

  1. Garoon システム管理画面を開きます。
  2. [基本システムの管理]タブをクリックし、[API] を選択します。
  3. [プロキシAPIの設定]をクリックします。
  4. [追加する]をクリックします。
  5. ノート登録用のプロキシAPIを設定します。
    以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
    copyNote 　の設定

    項目 値
    ステータス 「有効」を選択します。
    プロキシコード copyNote
    メソッド 「POST」を選択します。
    URL https://api.box.com/2.0
  6. 4.〜の手順と同様に、共有リンク作成用のプロキシAPIを設定します。
    createSharedLink の設定

    項目 値
    ステータス 「有効」を選択します。
    プロキシコード createSharedLink
    メソッド 「PUT」を選択します。
    URL https://api.box.com/2.0

手順2. 予定メニュー連携

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

  1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
  2. [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
  3. [予定メニュー連携]を選択します。
  4. [予定メニュー連携を追加する]をクリックします。
  5. 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
    予定連携メニュー
    項目名 設定値
    予定メニュー名 任意の値を選択します。
    この記事では「打合」メニューが選択されたときに表示したいので、「打合」とします。
    ポートレット 下記のHTML を貼り付けます。

    ポートレットHTML

手順3. カスタマイズファイルの適用

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

  1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
  2. [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
  3. [JavaScript/CSSによるカスタマイズ]を選択します。
  4. [カスタマイズグループを追加する]をクリックします。
  5. 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
    カスタマイズファイルの適用

    項目名 設定値
    カスタマイズ 「適用する」を選択します。
    カスタマイズグループ名 任意の値を入力します。
    今回は「Box 連携」とします。
    適用対象 カスタマイズを適用するユーザー・グループを選択します。
    JavaScript カスタマイズ 次の順で指定します。
    • https://js.cybozu.com/jquery/3.4.1/jquery.min.js
    • oauth.min.js ※1
    • bundled_index.js
      詳細は、「サンプルプログラム」をご参照ください。
    CSS カスタマイズ Garoon の見た目に調和するスタイルシートである Garoon html/css/image-Kit for Customize を利用します。
    「grn_kit.css」※2 を指定します。

※1: oauth.min.js の入手方法

  1. https://github.com/oauth-io/oauth-js/releases/tag/0.6.2 にアクセスします。
  2. Source code(zip) をクリックし、zip ファイルをダウンロードします。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「dist」フォルダー以下の「oauth.min.js」を利用します。

※2 Garoon html/css/image-Kit for Customize の入手方法

  1. https://github.com/garoon/css-for-customize にアクセスします。
  2. [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

サンプルプログラム

サンプルプログラムでは、IE などの古いブラウザで対応していない JavaScript のバージョン（ES2015 以上）の記法を利用しています。
そのため、webpack を使って、IE でも動作するように、ライブラリの組み込みやプログラムの構文変換を行う必要があります（webpack の解説記事はこちら）。

※ webpack を実行するには、Node.js とnpm を扱える環境が必要です。

  1. Node.js 公式サイトからインストーラをダウンロードします。
    このカスタマイズでは、Node.js のバージョン 10 における webpack の実行を確認しています。
  2. ダウンロードしたインストーラを実行し、画面に従ってセットアップを行います（Node.js をインストールすると、自動で npm もインストールされます）。

webpack の実行手順

  1. https://github.com/garoon/garoonBox にアクセスします。
  2. [Clone or download] ボタンをクリックして、[Download ZIP]を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「src」フォルダー下の「index.js」を開き、次の値を修正します。
    8行目 OAUTHIO_PUBLIC_KEY：「OAuth.io の設定」でメモした Public Key
    10行目 BOX_TARGET_FILE_ID：「Box の設定 - 手順1. ひな形 Box Note の準備」でメモした Note ID
  5. ターミナルで、解凍したフォルダーに移動します。 
    $ cd garoonBox-master
  6. 次のコマンドで、必要なライブラリをインストールします。 
    $ npm install
  7. webpack を実行します。 
    $ npm run webpack_prod
  8. 生成された dist フォルダー以下の bundled_index.js をGaroon カスタマイズに利用します。

動作確認

ポートレット

  1. Garoon で、カスタマイズしたHTMLポートレットを配置したポータルを開きます。
  2. Box ポートレット上のログインボタンをクリックし、Box のアカウント情報を入力してログインします。
    ポートレット Box ログイン
    次の画面が表示される場合は、雲のアイコンを操作します。
    ポートレット Box ログイン（雲の操作）
  3. Garoon のポータルに Box のファイル一覧が表示されます。
    ポートレット Boxでファイル一覧を表示

スケジュール

  1. Garoon スケジュールで、予定を登録します。
    このとき、「タイトル」項目の予定メニューで「打合」（「Garoon の設定 手順2. 予定メニュー連携」で設定したメニュー名と同じ値）を選択します。
    予定の登録
  2. 登録した予定をクリックし、予定の詳細画面を表示します。
  3. 「打合」の[Box Noteを追加する]ボタンをクリックします。
    Box Note の追加
  4. Box へのログインを求めるウィンドウが表示されます。Box のアカウント情報を入力してログインします。
    Box へのログイン
  5. [Box へのアクセス許可]をクリックします。
    Box へのアクセス許可
  6. 予定の「タイトル」と同じ名前の Box Note が Box に作成されます。
    作成された Box Note は、Garoon の予定詳細画面に表示されます。
    ※ Box のログインを求められる場合は、Box のアカウント情報を入力してログインしてください。
    Box Note の表示

おわりに

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

このカスタマイズでは、次の API を利用しています。

 

このTipsは、2019年9月版 Garoonで確認したものになります。

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

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

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