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

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

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

※本設定に、オプション製品「コラボフロー for ガルーン」の購入は不要です。

※ガルーンパッケージ版のポートレット設定は、パッケージ版の記事をご確認ください。

前提条件

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

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

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

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

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

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

「collaboflow-garoon-portlet.zip」をダウンロードします。
ZIPファイルを展開します。
※展開した「collaboflow-garoon-portlet.xml」がポートレットファイルのテンプレートになります。
メモ帳でポートレットファイルを開きます。
※メモ帳はMicrosoft Windows標準のテキストエディタです。
　UTF-8文字セットが扱えるテキストエディタであれば、メモ帳以外でも編集できます。
連携するコラボフローの「サイトURL」と「アプリコード」を修正します。
「」の次の行、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="（アプリコードに書き換える）"
225行目の下記箇所を、指示に従って修正します。
```
     portlet = $('[data-collaboflow-appcd="1"]');
```
data-collaboflow-appcd="（アプリコードに書き換える）"
メモ帳のファイルメニューから上書き保存します。