ガルーンにコラボフローの申請状況ポートレットを配置する

ガルーン クラウド版「Garoon on cybozu.com」のポータルにコラボフローの申請状況の概要を表示するHTMLポートレットを作成します。

この記事に添付されているテンプレートファイルをダウンロードし、ご利用の環境に合わせて修正を行った後に自社のガルーンに読み込むことでポートレットが出来上がります。

前提条件

このポートレットを利用するには、ガルーンおよびコラボフローが共にSAML認証によるシングルサインオン（SSO）が構成されている必要があります。

SSOを構成するには認証プロバイダーサービス（AzureAD、HENNGE One等）の利用が必要となります。

１.サイトURLとアプリケーションコードの確認

ポートレットで指定するコラボフローのサイトURLとアプリケーションのコードを確認します。

1. コラボフローに管理権限のあるユーザーでログインします。
2. システム管理（歯車アイコン）＞アプリ管理を開きます。
3. 一覧にあるコラボフローアプリケーションの、「コード」欄がアプリケーションコードです。
4. ブラウザのアドレスバーの、最後のスラッシュ記号「/」までがサイトURLです。

２.ポートレットファイルの準備

1. 「collaboflow-garoon-portlet.zip」をダウンロードします。

2. ZIPファイルを展開します。
   ※展開した「collaboflow-garoon-portlet.xml」がポートレットファイルのテンプレートになります。

3. メモ帳でポートレットファイルを開きます。
   ※メモ帳はMicrosoft Windows標準のテキストエディタです。
   　UTF-8文字セットが扱えるテキストエディタであれば、メモ帳以外でも編集できます。

4. 連携するコラボフローの「サイトURL」と「アプリコード」を修正します。

5. 「<!-- ポートレットベース -->」の次の行、9行目の下記箇所を指示に従って修正します。

   < class="portlet_base_grn collaboflow-portlet" data-collaboflow-siteurl="https://cloud.collaboflow.com/example/" data-collaboflow-appcd="1">

   修正① data-collaboflow-siteurl="（サイトURLに書き換える）"
   修正② data-collaboflow-appcd="（アプリコードに書き換える）"
   

6. 225行目の下記箇所を、指示に従って修正します。

        portlet = $('[data-collaboflow-appcd="1"]');

   data-collaboflow-appcd="（アプリコードに書き換える）"
   

7. メモ帳のファイルメニューから上書き保存します。

３.ガルーンにポートレットの取り込み

1. ガルーンにログインします。
2. 右上の歯車アイコン＞Garoonシステム管理を開きます。
   
3. 各アプリケーションの管理タブ＞ポータルを開いて「ファイルからの読み込み」をクリックします。
   
4. 「HTMLポートレットの読み込み」を開きます。
   
5. ステップ１準備で用意したファイル「collaboflow-garoon-portlet.xml」を指定して「読み込む」をクリックします。
   
6. 各アプリケーションの管理タブ＞ポータル＞HTMLポートレットで「コラボフロー」があれば、取り込み成功です。
   

４.ポータルにコラボフローポートレットを配置する

1. 各アプリケーションの管理タブ＞ポータル＞ポータルの一覧を開きます。
2. 修正するポータルを選択して開きます。
3. 左のポートレット一覧から「コラボフロー」をドラッグ＆ドロップで配置します。
   ※ポートレットの種類を“(全HTMLポートレット)”に絞り込むと探しやすいです。
   
4. 配置したポートレットの非公開ボタンをクリックして【公開中】にします。
   

５.ポートレット表示の確認

ポータルに戻り、コラボフローのポートレットが表示されていれば配置完了です。

補足

ポートレットは、コラボフローのアプリケーション毎に作成します。
コラボフローに複数のアプリケーションがある場合は、アプリケーション毎に
ガルーンのポートレットを設定する必要があります。

注意事項

macOS・iOSをご利用の場合

「サイト越えトラッキング」の設定と確認をしてください。

safariをご利用の場合

以下手順にて「サイト越えトラッキングを防ぐ」をOFFにします。

1. 認証プロバイダーサービス、及びコラボフローから一度ログオフします。
2. Webサイト越えトラッキングを許可します。
   
   macOSの場合
   
   以下サイトの手順で「サイト越えトラッキングを防ぐ」をOFFにします。
   
   MacのSafariでサイト越えトラッキングを防ぐ
   
   
   iOSの場合
   
   設定アプリのSafari＞「サイト越えトラッキングを防ぐ」をOFFにします。
3. コラボフローのURLにアクセスします。
4. 認証プロバイダーサービスのログイン画面が表示されます。
5. ユーザー名、パスワードを入力し、ログインします。
6. ガルーンのポートレットを表示できることを確認します。

chromeをご利用の場合

1. 認証プロバイダーサービス、及びコラボフローから一度ログオフします。
2. Webサイト越えトラッキングを許可します。
   
   macOSの場合
   
   以下サイトの手順で「トラッキング拒否」をOFFにします。
   
   「トラッキング拒否」をオンまたはオフにする
   
   
   iOSの場合
   
   設定アプリのChrome＞「Webサイト越えトラッキングを許可」をONにします。
3. コラボフローのURLにアクセスします。
4. 認証プロバイダーサービスのログイン画面が表示されます。
5. ユーザー名、パスワードを入力し、ログインします。
6. ガルーンのポートレットを表示できることを確認します。

制限事項

SAML認証

SAML認証が未設定またはSAML認証を迂回してガルーンやコラボフローにログインした状態では連携ユーザーを把握できないため、申請状況が正常に表示できません。

初回表示

初回のみポートレットが読み込み中のままタイムアウトする場合があります。
ポートレットタイトルの「コラボフロー」リンクをクリックして一度コラボフローのページを開いた後に、ガルーンのポートレットを再表示することで正常に表示されるようになります。

ポートレットファイルのテンプレート