目を惹くHTMLポートレット・ポータルを作る！

2024.07.31

こんにちは。Garoon カスタマーサクセスチームです。

Garoon のシステム管理者の皆様は、利用者が社内の情報にアクセスしやすくなるよう、ポータルの設定やポートレットの作成など工夫されているのではないでしょうか。

中でもHTMLポートレットはユーザーに伝えたい情報を強調・整理して伝えることができる便利なポートレットです。

今回はそんなHTMLポートレットの活用法についてご紹介します。

＜目次＞

  1. HTMLポートレットを活用してみよう
  2. HTMLポートレット作成の小ワザ
  3. さいごに

1．HTMLポートレットを活用してみよう

Garoon のHTMLポートレットは、HTMLタグを記述して作成するポートレットです。CSSやJavaScriptによって動的なポートレットを開発することでユーザーに対して目を惹き、情報を届けやすいポータルを構築することができます。
※HTMLポートレット作成にあたっては注意事項がありますので、HTMLポートレットの作成・利用前にご確認ください。

2．HTMLポートレット作成の小ワザ

HTMLポートレットはテキスト表示を簡単に作成・表示することができます。

グループウェアNEWS_7月_1.png

このようなポートレットを作成すると、ポータル上では

グループウェアNEWS_7月_2.png

と表示されます。

しかしテキストで作成したポートレットは味気ない表示ですし、ポータルを閲覧するユーザーの目に留まりにくいのではないでしょうか？

HTMLポートレットを作成する際に書式編集を用いることで

グループウェアNEWS_7月_3.png

HTML構文を書かなくても

グループウェアNEWS_7月_4.png

上の表示が出来るポートレットを作成することができます。
※ 文体を整えることや、図・リンクの埋め込みもできます！

書式編集だけでも文字を強調したり、表を挿入して表示出来るポートレットを作成することが出来ますが、さらにHTMLタグを挿入したり、JavaScriptを記述することでより一層ユーザーに対して情報が目立ちやすいポートレットを作成することが可能です。

書式編集を用いて作成したHTMLポートレットは一旦保存して開き直すと、

グループウェアNEWS_7月_5.png

「ポートレットの内容」はHTML構文に変換されますので、これをベースに手を加えてみましょう。

手順は、

  • 「ポートレットの内容」に表示されているHTML構文を選択してコピーする
  • 新たに「HTMLポートレットを追加」を選択し、「ポートレットの内容」にコピーしたHTML構文をペーストする
  • ペーストしたHTML構文にHTMLタグを追記、JavaScriptを記述する

HTMLタグを追加することで文字列をスクロールや点滅させることが出来たり、JavaScriptを記述することで特定の条件で特定の文字列を表示させることが出来ます。

例えば、毎週水曜日に施設点検を実施しているチーム向けにポートレットを作成し、水曜日になると施設点検のメッセージを表示させたり、月末の締日になると経費精算や売上処理の注意喚起のメッセージを表示させるといったことが可能です。

Anime.gif

※サムネイル画像をクリックすると、お知らせが流れるのをご確認いただけます。

HTMLタグやJavaScriptについてはさまざまな方が構文の書き方や解説を公開されていますので、少しHTMLとJavaScriptを勉強してオリジナルのHTMLポートレット作成にチャレンジしてみてはいかがでしょうか？

また、HTMLポートレットの設定 のヘルプページには

を掲載していますので、必要に応じて参考にしてください。

3．さいごに

HTMLポートレットの作成方法について紹介しましたが、JavaScriptファイルやCSSファイルを使うと更に画面をカスタマイズすることができます。

今までHTMLポートレットを作ったことがないということでしたらぜひオリジナルのHTMLポートレット作成にチャレンジして、よりユーザーの目を惹き情報を届けやすくするポータルや、必要なときに必要なメッセージが表示されるようなポータルの作成に取り組んでみてはいかがでしょうか。

さて、8月はGaroon のポータルについて学べるセミナーをご用意しております。
ポータルの基本設定や、知っておけると便利な機能および事例についてご紹介します。

どうぞご利用ください。

▼2024年8月15日 開催：Garoon ポータル活用促進セミナー
https://topics.cybozu.co.jp/seminar/2024/06/post-30004.html
※上記のセミナーは終了いたしました。
※開催中のセミナーについては下記ページをご参照ください。
https://garoon.cybozu.co.jp/lp/seminar/newlist/

Garoonカスタマーサクセスチーム

Recomended