社内システム上に必要な情報が散らばっていて、探すのに毎回苦労したり、ユーザーからの問い合わせ対応に追われることはありませんか？
この記事では、Garoonのポータル機能「HTMLポートレット」を使った、行き先案内板カスタマイズを紹介します。
さらに「画像アセット」という機能も使用しているため、画像ファイルを簡単に呼び出すことができ、 今までご紹介していた方法より短いステップでポータルをカスタマイズできるようになっています。
必要な情報を一画面に集約できるだけでなく、アイコンを配置したり、背景をつけたりすることで、よりグラフィカルでユーザーにとって見やすい画面を自由に作ることができます。

• このカスタマイズには、Garoonのクラウド版の契約が必要です。
• 利用者は、Garoonのアカウントが必要です。
• ブラウザーはGoogle Chromeを利用してください。

上のサンプルでは、社内手続きでよく使われるリンクをまとめています。
目的別に分かれており、それぞれ説明文もあるので分かりやすいですね。
見たい項目をクリックすると、掲示板、ワークフロー、ファイル管理といったGaroonアプリケーションの該当ページが別タブで開きます。
また、フッターにはリンク集を設けており、よく見られるリンクをここに集約できます。
行き先案内板により、PC操作が得意でないユーザーでも、必要な情報にスムーズにアクセスできます。
なお、テキストの内容やアイコン画像は、環境に合わせて自由にカスタマイズできます。

それでは、作成手順を見ていきましょう。

次の動画は設定手順の流れをまとめたものです。

行き先案内板では、画像とHTMLファイルを使用します。

画像は、背景やアイコンで使われます。
HTMLファイルは、HTMLポートレットのページ構成や、タイトル、説明文などのテキストの内容が書かれています。
まず、これらのリソース（画像、HTMLファイル）をGaroonにアップロードします。その後、環境に合わせて内容をカスタマイズしていきます。

操作方法の詳細はヘルプページ「 ポータル作成の流れ 」を参照してください。

今回使う画像とHTMLファイルは、以下からダウンロードできます。

ikisaki-annai.zip

ダウンロードしたzipファイルは解凍しておきます。

ダウンロードしたzipファイルは以下のようなファイル構成になっています。

操作方法の詳細はヘルプページ「 画像アセットの追加 」を参照してください。

1. Garoonシステム管理 > 各アプリケーションの管理 > 画像アセットを開きます。

2. 「画像アセットを追加する」をクリックし、先ほどダウンロードした画像アセットフォルダーの中身をすべて選択します。

3. 「ファイルキー」のフィールドに、ファイル名から拡張子（.png）を除いた部分をコピー＆ペーストします。

   

4. すべての「ファイルキー」の入力が完了したら、一番下の「追加する」をクリックします。

操作方法の詳細はヘルプページ「 XMLファイルでのHTMLポートレットの管理 」を参照してください。

1. Garoonシステム管理 > 各アプリケーションの管理 > ポータル > ファイルからの読み込みを開きます。

2. 「HTMLポートレットの読み込み」をクリックし、先ほどダウンロードした「ikisaki_html_portlet.xml」を選択し、読み込みます。

3. 成功すると、HTMLポートレット一覧に「行き先案内板」が追加されます。クリックして開きます。

   

4. ページ上部にある「JavaScript / CSSによるカスタマイズ」をクリックして開き、カスタマイズを「適用する」にチェックを入れます。

   

操作方法の詳細はヘルプページ「 HTMLポートレットの設定 」を参照してください。

1. HTMLポートレットの一覧より「行き先案内板」を開きます。
2. 「変更する」をクリックし、内容を編集します。

以下の★印の部分のテキスト内容やアイコン画像、URLは、HTMLを編集することでカスタマイズできます。

HTMLを書き換えるポイント

少し難しく感じてしまうHTMLの書き換えについてポイントを紹介します。

1. テキスト内容を変更したい。
   すでに書かれているテキスト内容を削除し、表示したい内容を直接入力することで変更できます。

   2 3 4 5 6

   <!-- 変更前 --> <h1>社内手続きガイド(サンプル)</h1> <!-- 変更後（例） --> <h1>入社手続きポータル</h1>

2. 画像を変更したい。
   img src =（読み方：イメージソース）という文字列から始まる箇所を探します。
   11行目の「img_information」と書かれている箇所がファイルキーと呼ばれる部分になっており、この部分を書き換えることで画像ファイルの指定ができます。
   たとえば、画像アセットに新しく画像を追加し、「img_pc」というファイルキーに設定したとします。
   この新しい画像をポータルに表示させたい場合は、14行目のようにファイルキーの部分を「img_pc」と書き換えてあげると表示する画像を変更できます。

   10 11 12 13 14

   <!-- 変更前 --> <img src='" + garoon.assets.images.getUrl('img_information') + "' style='width:80px; height:81px;' /> <!-- 変更後(例) --> <img src='" + garoon.assets.images.getUrl('img_pc') + "' style='width:80px; height:81px;' />

3. URL（リンク先）を変更したい。
   href =（読み方：エイチレフ）という文字列から始まる箇所を探し、URLを書き換えます。
   URLは、Garoon内のページ、外部サイトどちらも設定できますが、書き方が少し異なるので注意が必要です。
   それぞれの場合に分けて例を挙げます。

   • 外部サイトにリンクしたい場合
     「http://」または「https://」より後の部分をコピー&ペーストして変更できます。

     18 19 20 21 22

     <!-- 変更前 --> <a target="_blank" href="https://garoon.cybozu.co.jp/price/package/"> <!-- 変更後（例） --> <a target="_blank" href="https://cybozu.co.jp/">

   • Garoon内のページにリンクしたい場合
     「/g/」より後の部分をコピー&ペーストして変更できます。

     26 27 28 29 30

     <!-- 変更前 --> <a target="_blank" href="/g/bulletin/view.csp?cid=3&aid=6"> <!-- 変更後(例) --> <a target="_blank" href="/g/cabinet/index.csp?sp=0&hid=2">

操作方法の詳細はヘルプページ「 ポータルの追加 」を参照してください。

1. Garoonシステム管理 > 各アプリケーションの管理 > ポータル > ポータルの一覧を開きます。

2. 「ポータルを追加する」をクリックし、ポータルを新規作成します。

3. 作成したポータルを開き、左側のポートレット一覧から、「行き先案内板」をドラッグ&ドロップで配置します。

   

4. ポートレット、ポータルをそれぞれ「非公開」から「公開」に変更します。

以上で行き先案内板の設定は完了です。

いかがでしたでしょうか？行き先案内板は、HTMLの知識を組み合わせることでカスタマイズの可能性が無限に広がります。
cybozu developer networkでは、今回紹介した方法の他にも ガルーンポータルのカスタマイズを紹介しています。
ぜひオリジナリティ溢れる行き先案内板を作ってみてくださいね！
今後もTipsを定期的に公開していきますので、ご期待ください。

このTipsは、2020年3月版Garoonで動作を確認しています。