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

Garoon ポータルで OneDrive で管理しているファイル一覧を表示＆ファイルを追加しよう

作成日
更新日
2020年8月改訂のセキュアコーディング ガイドラインに抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所：外部ライブラリ（MSAL.js）内のアクセストークン保存部分
Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

はじめに

この記事では、Garoon のポータル機能を利用して、次のことができる Garoon カスタマイズポートレットを紹介します。

  • OneDrive 内のファイルの一覧を表示する
  • ポートレットからドラッグ&ドロップで OneDrive へファイル追加する

必要なもの

  • クラウド版 Garoon
  • Microsoft アカウント

完成イメージ

  • Garoon のポータルに、OneDrive 内のファイル一覧をリスト形式またはサムネイル形式で表示します。
    リスト形式 
    OneDrive 内のファイル一覧を表示するポートレット（リスト表示）
    サムネイル形式
    OneDrive 内のファイル一覧を表示するポートレット（サムネイル表示）
    • リスト形式またはサムネイル形式で、ファイル一覧を表示します。
    • フォルダー名をクリックすると、別タブでそのフォルダーの内容を表示します（OneDrive の画面に移ります）。
    • ファイル名をクリックすると、そのファイルをダウンロードできます。
      ※ ポータルを表示して1時間以上経過している場合は、ダウンロードURLの有効期限が切れるためファイルをダウンロードできません。ポータル画面を再読み込みすることで、ダウンロードできるようになります。
       
  • Garoon のポータルから、ドラッグ&ドロップ、または[ファイルを追加]ボタンのクリックで、OneDrive へファイルを追加します。
    • 同名のファイルがある場合は、上書きするかダイアログで選択できます。
    onedrive_file_upload.gif

システム構成

onedrive-portlet.png

  1. Garoon から OAuth を用いて Azure AD V2 Endpoint へサインインします。
    Microsoft Authentication Library for JavaScript （MSAL.js）を利用することで、OAuth を使った認可フローを実現します。
  2. Azure からアクセストークンを取得します。
    このアクセストークンを使って、Microsoft Graph API を実行し、OneDrive に対する取得・更新を行います。
    Microsoft Graph API（以降、Graph API）は、Microsoft 365 サービスの情報を利用するAPIです。

ファイル一覧を表示するフロー

  1. アクセストークンを使って、OneDrive のファイル情報を取得する API を実行します。
  2. OneDrive のファイル情報が返却されます。
  3. HTMLポートレットにファイル情報（ファイル一覧）を表示します。

ファイルを追加するフロー

  1. アクセストークンを使って、OneDrive にファイルを追加する API を実行します。
  2. ファイル追加後の OneDrive のファイル情報が返却されます。
  3. HTML ポートレットにファイル情報（ファイル一覧）を表示します。

Azure Active Directory の設定

Garoon から Graph API を利用するため、Azure Active Directory にアプリケーションを登録します。この設定は、管理者のみ行う作業です。利用者が個々に設定する必要はありません。

アプリケーションの作成

「Garoon ポータルで Outlook の未読メール数をチェックしよう - アプリケーションの作成」を参考に、Azure Active Directory にアプリケーションを登録します。

  • この記事では、作成するアプリケーション名を「garoon-onedrive」としています。
  • アプリケーション作成後、作成したアプリケーションの詳細画面が表示されます。
    「Application (client) ID」（「アプリケーション（クライアント）ID」）の値をメモしておいてください。
    Garoon カスタマイズファイルで利用します。
    azure07_ad_app_register.png
    ※ 詳細画面は、Azure ポータル > [Azure Active Directory] > [App registrations]の手順でも開くことができます。

アプリケーションの設定

作成したアプリケーションに対し、次の設定を行います。

  1. リダイレクト URI の設定
  2. OAuth 認証スコープの設定

手順1. リダイレクト URI の設定

「Garoon ポータルで Outlook の未読メール数をチェックしよう - アプリケーションの設定（手順1. リダイレクト URI の設定）」の手順と同様に、「リダイレクト URI」と「暗黙の付与」設定を行います。

手順2. OAuth 認証スコープの設定

「Garoon ポータルで Outlook の未読メール数をチェックしよう - アプリケーションの設定（手順2. OAuth 認証スコープの設定）」の手順を参考に、OAuth 認証スコープを設定します。

設定する Microsoft Graph API のアクセス権は、以下の2つです。

  • Files.ReadWrite.All
  • User.Read（デフォルトで設定されている権限）

20191015_143904.png

Garoon の設定

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

  1. Graph API を利用するためのプロキシ API を設定
  2. ポートレットに表示する画像ファイルの、画像アセットへの追加
  3. HTML ポートレットの作成・カスタマイズの適用
  4. ポータルへの配置

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

  • Microsoft Authentication Library for JavaScript（MSAL） v0.1.2,  ドキュメント
  • jQuery v3.3.1, ドキュメント
    • https://js.cybozu.com/jquery/3.3.1/jquery.min.js
  • SweetAlert2 v8.2.1, ドキュメント
    • https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.js
    • https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.css
  • Moment.js v2.24.0, ドキュメント
    • https://js.cybozu.com/momentjs/2.24.0/moment-with-locales.min.js
  • ES6-Promise v4.0.5, ドキュメント
    • https://js.cybozu.com/es6-promise/v4.0.5/es6-promise.auto.min.js
  • Garoon html/css/image-Kit for Customize, ドキュメント

手順1. プロキシ API 設定

手順の詳細は「プロキシAPIの設定を追加する」をご参照ください。

  1. 「Garoon システム管理」画面を開きます。
  2. 「基本システムの管理」タブをクリックし、[API] を選択します。
  3. [プロキシAPIの設定]をクリックします。
  4. [追加する]をクリックします。
  5. 以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックして、設定を追加します。
    プロキシAPIの設定（GET)
    項目 値
    ステータス 「有効」を選択します。
    プロキシコード GET_ONEDRIVE_PORTLET
    メソッド 「GET」を選択します。
    URL https://graph.microsoft.com/
  6. 4.〜の手順と同様に、POST用のプロキシAPIを設定します。
    プロキシAPIの設定（POST)
    項目 値
    ステータス 「有効」を選択します。
    プロキシコード POST_ONEDRIVE_PORTLET
    メソッド 「POST」を選択します。
    URL https://graph.microsoft.com/

手順2. 画像ファイルを画像アセットへ追加

ポートレットに表示するメールアイコンの画像ファイルを、画像アセットに保存します。
手順の詳細は「画像アセットの追加」をご参照ください。

  1. 「Garoon システム管理」画面を開きます。
  2. 「各アプリケーションの管理」タブをクリックし、[画像アセット] を選択します。
  3. [画像アセット一覧]をクリックします。
  4. [画像アセットを追加する]をクリックします。
  5. 「category20.gif」と「file20.gif」の2つのファイルを登録します。入力が終わったら、[追加する]ボタンをクリックして画像を追加します。
    項目 値
    ファイル こちらからダウンロードしたファイルを追加します。
    ファイルキー
    • downloadmore20.gif に設定する値
      ONEDRIVE_ICON_DOWNLOAD
    • link_sub16.png に設定する値
      ONEDRIVE_ICON_LINK
    • category20.gif に設定する値
      ONEDRIVE_ICON_FOLDER
    • file20.gif に設定する値
      ONEDRIVE_ICON_FILE
  6. 画像アセット登録後の画像アセット一覧は次のようになります。
    画像アセットの設定

手順3. HTML ポートレットの作成・カスタマイズの適用

カスタマイズポートレットを作成します。
手順の詳細は「HTMLポートレットの設定」をご参照ください。

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

    項目 値
    ポートレット名 任意の値を入力してください。
    この記事では、「OneDriveコンテンツ表示」とします。
    ポートレットの内容
  6. 追加した「HTML ポートレットの詳細」画面で、[JavaScript / CSSによるカスタマイズ]をクリックします。
  7. 次のように入力します。入力が終わったら、[設定する]ボタンをクリックして設定します。
    ポートレットカスタマイズの設定

    項目 値
    カスタマイズ 「適用する」を選択します。
    JavaScript カスタマイズ 次の順で指定します。
    • Microsoft Authentication Library for JavaScript（msal.min.js）※1
    • https://js.cybozu.com/jquery/3.3.1/jquery.min.js
    • https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.js
    • https://js.cybozu.com/momentjs/2.24.0/moment-with-locales.min.js
    • https://js.cybozu.com/es6-promise/v4.0.5/es6-promise.auto.min.js
    • カスタマイズファイル（onedrive_contents_portlet.js）
      詳細は、後述の「サンプルコード（onedrive_contents_portlet.js）」をご参照ください
    CSS カスタマイズ 次の順で指定します。
    • https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.css
    • Garoon html/css/image-Kit for Customize（grn_kit.css）※2
      Garoon の見た目に調和するスタイルシートです。
    • カスタマイズファイル（onedrive_contents_portlet.css）
      詳細は、後述の「サンプルコード（onedrive_contents_portlet.css）」をご参照ください

※1 Microsoft Authentication Library for JavaScript（msal.min.js）の入手方法

  1. GitHub リポジトリ にアクセスします。
  2. [Source code (zip)]から zip ファイルをダウンロードします（バージョンは 0.1.2 を利用します）。
  3. zip ファイルを解凍します。
  4. 解凍したフォルダーの「out」フォルダー以下の「msal.min.js」を利用します。

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

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

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

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

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

動作確認

Office 365 OneDrive へのサインインとファイル一覧の表示

  1. Garoon で、カスタマイズしたHTMLポートレットを配置したポータルを開きます。
  2. サインインを求めるダイアログが表示されます。
    OneDrive を利用しているアカウントでサインインします。
    ※「ポップアップウィンドウをブロックする」設定がされている場合、サインインのポップアップが表示されずにエラーメッセージが表示されます。
    その場合は、ブロック設定を解除した後、ポートレットの [OneDriveコンテンツ一覧を表示する] ボタンをクリックすると、サインインのダイアログを再表示できます。
  3. Garoon のポータルに OneDrive のファイル一覧が表示されます。

OneDrive へのファイル追加

  1. Garoon ポータルを表示します（Garoon ポータル上で OneDrive へサインイン済み）
  2. [ファイルを追加する]ボタンをクリックしダイアログからファイルを選択、または、追加したいファイルを[ファイルを追加する]ボタンにドラッグ&ドロップします。
  3. 追加対象のファイルが表示されます。[追加]ボタンをクリックすると、ファイルが追加されます。

サンプルコード

ポートレットHTML

onedrive_contents_portlet.js

※ 12行目の CLIENT_ID を、「Azure Active Directory の設定：アプリケーションの作成」でメモした「アプリケーション（クライアント）ID」に変更してください。

次の値は、必要に応じて変更してください。

  • 28行目 FOLDER_PATH：ファイル一覧として表示するフォルダーのパスです。絶対パスで指定します。
    例：フォルダーのパスが「ファイル > meeting > 2019」であれば、「/meeting/2019」を指定します。
  •  ポータルのファイル一覧に表示する内容
    • 32行目 MAX_NUMBER_OF_DISPLAY：ファイル/フォルダー表示数です。数字で指定します。
    • 34行目 UPDATE_USER：「更新者」列の表示設定です。false を設定すると列を非表示にします。
    • 36行目 UPDATE_TIME：「更新日時」列の表示設定です。false を設定すると列を非表示にします。
    • 38行目 SIZE：「サイズ」列の表示設定です。false を設定すると列を非表示にします。
    • 40行目 FOLDER：「フォルダ」列の表示設定です。false を設定すると列を非表示にします。
    • 42行目 SHOW_LOGIN_POPUP：ポートレット表示時に OneDrive へサインインするポップアップの表示設定です。false を設定すると列を非表示にします。
      ※ Outlook の未読メール数を表示するポートレットを追加している場合、false に設定してください。
    • 44行目 THUMBNAIL：サムネイル表示の設定です。false を設定するとリスト形式で表示します。
      また、サムネイル形式で表示したときの表示数は以下で設定できます。
      46行目 THUMBNAIL_COLUMNS：サムネイルの表示列数
      48行目 THUMBNAIL_ROWS：サムネイルの表示行数

onedrive_contents_portlet.css

おわりに 

この記事では、OneDrive 内のファイルの一覧を表示したり、ポータル上から OneDrive へファイル追加できるポートレットカスタマイズを紹介しました。
他にも cybozu developer network では、様々な Garoon ポータルカスタマイズを紹介しています。ぜひご参照ください。

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

変更履歴

サイボウズ オフィシャル SI パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズ

このカスタマイズは、サイボウズ オフィシャル SI パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズです。
詳細はこちらをご参照ください。

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

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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