ポータルに追加するだけ！ HTMLポートレットデザインテンプレート2種ご紹介
2020.08.26
こんにちは。Garoonマーケティングチームです。
今回は汎用性の高いHTMLポートレットのデザインテンプレートを2種類ご紹介します。
「画像つきの通達」や「社内報へのリンク」、「社長メッセージの掲載」など、幅広い利用シーンでご利用いただけます。
ポータルのどの位置に設置しても綺麗に表示されるレスポンシブデザインにも対応しています。ぜひご活用ください。
Garoon には、ポータルに設置できるポートレットの 書き出し／読み込み 機能が標準で搭載されています。
既に作成されたポートレットであれば、書き出し／読み込み 機能を使うことにより、あっという間に自社の環境に設定できます。
それでは設定を進めていきましょう。
設定方法（動画）
STEP1 ポートレットを設定する
1. XMLファイルをダウンロードする
設定したいHTMLポートレットファイルを必ず右クリックしていただき「名前を付けて保存」を選択してダウンロードしてください。
 |
|
 |
※本HTMLは Garoon の製品内部で利用する場合のみ利用を許可致します。
2. Garoon のシステム管理画面を開く
※管理権限が必要になります。管理権限が無い場合、「個人設定」のポータル設定から Myポータル としてつくることができます。
3. システム管理 > 各アプリケーションの管理 > ポータル に移動し[ファイルからの読み込み]をクリックする
4. [HTMLポートレットの読み込み]をクリックする
5. [参照]ボタンを押し、1でダウンロードしたXMLファイルを選択し、[読み込む]ボタンを押す
6. システム管理画面 > 各アプリケーションの管理 > ポータル に移動し[HTMLポートレット]をクリックする
新しいポートレットが追加されていることが確認できます。
7. [変更する]をクリックして、実際の利用環境に合わせて文言やリンク先などを編集する
コメントで見出しや本文など、変更できる箇所が記載されています。文字やURLを書き換えて保存しましょう。
画像の変更方法はこの後のステップでご紹介します。
STEP2 ポートレット内の画像を設定する
続いて、ポートレット内の画像の設定方法を解説します。
本ポートレットでは、クラウド版 Garoon, パッケージ版 Garoon 5 に搭載されている「画像アセット」機能を用いて画像を表示させています。
1. Garoon のシステム管理画面を開く
※管理権限が必要になります。
2. システム管理 > 各アプリケーションの管理 > 画像アセット に移動し[画像アセット一覧]をクリックする
3. [画像アセットを追加する]をクリックする
4. ポートレットに表示させたい画像を[ファイルを添付]からアップロードし、[ファイルキー]を入力する
ポートレット デザインテンプレート①（社内報）.xmlを利用する場合は、ファイルキーには「portlet_01_gazou」と入力してください。
ポートレット デザインテンプレート②（社長メッセージ）.xmlを利用する場合は、ファイルキーには「portlet_02_gazou」と入力してください。
ファイルキーを元に、HTMLポートレットが画像アセットから画像を呼び出す仕組みになっています。
※画像を更新したい場合
1．該当画像アセットのファイルキーを控えたうえで、一旦該当画像アセットを削除してください。
2．同じファイルキーで新たに画像アセットを追加することで、画像を更新できます。
STEP3 ポータルにポートレットを追加する
ポートレットの設定は完了しました。あとはご利用中のポータルにポートレットを追加するだけです。
1. Garoon のシステム管理画面を開く
※管理権限が必要になります。
2. システム管理 > 各アプリケーションの管理 > ポータル に移動し[ポータルの一覧]をクリックする
3. ポートレットを追加したいポータルをクリックし編集画面に移動する
4. 左のポートレット一覧下部の今回設定したポートレットをドラッグ&ドロップで任意の場所に設置する
5. ポートレット右上の[非公開]ボタンをクリックし[公開中]に変更する
以上でポートレットが無事公開されました！
公開前に[プレビュー]で見栄えを確認するのもおすすめです。
サイボウズへのご意見・ご要望の送り方
クラウド版 Garoon をご利用中の方は、どなたでも Garoon 内からご意見・ご要望を送ることができます。
詳しい手順は「みなさまからいただいたご意見・ご要望をご紹介します！」をご覧ください。
皆さまのご意見・ご要望、お待ちしております！
Garoon マーケティングチーム
