Index
はじめに
社内システム上に必要な情報が散らばっていて、探すのに毎回苦労したり、ユーザーからの問い合わせ対応に追われることはありませんか？
今回はGaroonのポータル機能の一つである「HTMLポートレット」を使った、行き先案内板カスタマイズをご紹介します。
さらに「画像アセット」という機能も使用しているため、画像ファイルを簡単に呼び出すことができ、
今までご紹介していた方法より短いステップでポータルをカスタマイズできるようになっています。
必要な情報を一画面に集約できるだけでなく、アイコンを配置したり、背景をつけたりすることで
よりグラフィカルでユーザーにとって見やすい画面を自由に作ることができます。
動作環境と注意事項
- このカスタマイズには、Garoonのクラウド版の契約が必要です。
- 利用者は、Garoonのアカウントが必要です。
- ブラウザはGoogle Chromeをご利用ください。
- サンプルプログラムは、その動作を保証するものではありません。
- サンプルプログラムの技術的なサポート等は行っていません 。
完成イメージ
上のサンプルでは、社内手続きでよく使われるリンクをまとめています。
目的別に分かれており、それぞれ説明文もあるので分かりやすいですね。
見たい項目をクリックすると、掲示板、ワークフロー、ファイル管理といったGaroonアプリケーションの該当ページが別タブで開きます。
また、フッターにはリンク集を設けており、よく見られるリンクをここに集約することができます。
行き先案内板により、PC操作が得意でないユーザーでも、必要な情報にスムーズにアクセスすることができます。
なお、テキストの内容やアイコン画像は、環境に合わせて自由にカスタマイズすることができます。
それでは、作成手順を見ていきましょう。
設定手順
下記の動画は設定手順の流れをまとめたものです。
手順の概要
行き先案内板では、画像とHTMLファイルを使用します。
画像は、背景やアイコンで使われます。
HTMLファイルは、HTMLポートレットのページ構成や、タイトル、説明文などのテキストの内容が書かれています。
まず、これらのリソース（画像、HTMLファイル）をGaroonにアップロードした後、環境に合わせて内容をカスタマイズしていきます。
リソースの準備
今回使う画像とHTMLファイルは、以下からダウンロードできます。
ダウンロードしたzipファイルは解凍しておきます。
ダウンロードしたzipファイルは以下のようなファイル構成になっています。
|
ファイル名またはフォルダ名 |
説明 |
修正が必要か |
配置先 |
|---|---|---|---|
|
ikisaki_html_portlet.xml |
ページの構成やテキストの内容 |
必要 |
HTMLポートレット |
|
asset |
背景やアイコン |
不要 |
画像アセット |
画像を画像アセットへアップロードする
- Garoonシステム管理 > 各アプリケーションの管理 > 画像アセット を開きます。
- 「画像アセットを追加する」をクリックし、先ほどダウンロードした画像アセットフォルダの中身をすべて選択します。
- 「ファイルキー」のフィールドに、ファイル名から拡張子（.png）を除いた部分をコピー＆ペーストします。
- すべての「ファイルキー」の入力が完了したら、一番下の「追加する」をクリックします。
HTMLファイルを読み込む
- Garoonシステム管理 > 各アプリケーションの管理 > ポータル > ファイルからの読み込み を開きます。
- 「HTMLポートレットの読み込み」をクリックし、先ほどダウンロードした ”ikisaki_html_portlet.xml” を選択し、読み込みます。
- 成功すると、HTMLポートレット一覧に ”行き先案内板” が追加されます。クリックして開きます。
- ページ上部にある「JavaScript / CSSによるカスタマイズ」をクリックして開き、カスタマイズを「適用する」にチェックを入れます。
HTMLポートレットをカスタマイズする
- HTMLポートレットの一覧より、“行き先案内板”を開きます。
- 「変更する」をクリックし、内容を編集します。
以下の★印の部分のテキスト内容やアイコン画像、URLは、HTMLを編集することでカスタマイズできます。
HTMLを書き換えるポイント
少し難しく感じてしまうHTMLの書き換えについてポイントをご紹介いたします。
- テキスト内容を変更したいとき
既に書かれているテキスト内容を削除し、表示したい内容を直接入力することで変更することができます。 - 画像を変更したいとき
「img src =」(読み方：イメージソース)という文字列から始まる箇所を探します。
11行目の「img_information」と書かれている箇所がファイルキーと呼ばれる部分になっており、この部分を書き換えることで画像ファイルの指定ができます。
例えば、画像アセットに新しく画像を追加し、「img_pc」というファイルキーに設定したとします。
この新しい画像をポータルに表示させたい場合は、14行目のようにファイルキーの部分を「img_pc」と書き換えてあげると表示する画像を変更することができます。 - URL(リンク先)を変更したいとき
「href =」(読み方：エイチレフ)という文字列から始まる箇所を探し、URLを書き換えます。
URLは、Garoon内のページ、外部サイトどちらも設定することができますが、書き方が少し異なるので注意が必要です。
それぞれの場合に分けて例を挙げます。- 外部サイトにリンクしたい場合
「http://」または「https://」より後の部分をコピー&ペーストして変更することができます。 - Garoon内のページにリンクしたい場合
「/g/」より後の部分をコピー&ペーストして変更することができます。
- 外部サイトにリンクしたい場合
ポータルを作成し公開する
- Garoonシステム管理 > 各アプリケーションの管理 > ポータル > ポータルの一覧 を開きます。
- 「ポータルを追加する」をクリックし、ポータルを新規作成します。
- 作成したポータルを開き、左側のポートレット一覧から、「行き先案内板」をドラッグ&ドロップで配置します。
- ポートレット、ポータルをそれぞれ「非公開」から「公開」に変更します。
以上で行き先案内板の設定は完了です。
おわりに
いかがでしたでしょうか？行き先案内板は、HTMLの知識を組み合わせることでカスタマイズの可能性が無限に広がります。
cybozu developer networkでは、今回ご紹介した方法の他にもガルーンポータルのカスタマイズをご紹介しています。
ぜひオリジナリティあふれる行き先案内板を作ってみてくださいね！
今後もTipsを定期的に公開していきますので、ご期待ください。
このTipsは、2020年3月版 Garoonで確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。