HTMLポートレットの設定

HTMLポートレットは、HTMLタグを記述して作成するポートレットです。
HTMLポートレットにタグを記述して、Garoon以外のシステムやWebサイトなどを表示します。

HTMLタグに関する注意点

HTMLポートレットが正常に動作するように、次の点に注意してタグを正しく記述します。
小文字の使用
HTMLタグは小文字で記述します。
良い例:<p>
悪い例:<P>
終了タグの使用
開始タグと終了タグは必ずセットで記述します。HTMLタグが完結していないポートレットをポータルに配置すると、ポータルの編集画面が正しく表示されない、ポートレットを移動できないなどの問題が発生する場合があります。
ネスト構造のHTMLタグは、開始タグと終了タグが交差しないように記述します。
例:
ネスト構造のHTMLタグの記述例
記述不要のタグ
次のタグは、HTMLポートレットに記述する必要はありません。
  • <html>と</html>
  • <head>と</head>
  • <body>と</body>
セキュアコーディングガイドラインの確認
JavaScriptを記載する場合は、セキュアコーディングガイドラインの次のセクションを確認してください。
クロスサイトスクリプティングを防ぐ
クロスサイトリクエストフォージェリを防ぐ

HTMLポートレットを追加する

HTMLポートレットを作成します。システム管理者の設定によって、Myポータルの使用権限が許可されている場合は、ユーザーがMyポータルで使用することもできます。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ポータル]をクリックします。
  5. [HTMLポートレット]をクリックします。
  6. 「HTMLポートレット」画面で、[HTMLポートレットを追加する]をクリックします。
    HTMLポートレットを追加するの操作リンクが赤枠で囲まれている画像
  7. 「HTMLポートレットの追加」画面で、「ポートレット名」項目を入力します。
    標準のポートレット名は必ず設定します。
    [言語ごとに表示名を設定する]をクリックすると、複数の言語でポートレット名を設定できます。
    ユーザーが設定している言語のポートレット名を設定していない場合、標準のポートレット名が表示されます。
    設定できる言語は、次のとおりです。
    • 日本語
    • English
    • 中文(简体
    • 中文(繁體
    ポートレット名を入力している画像
  8. 「グループ」項目を設定します。
    ポートレットを分類するポートレットグループを選択します。
    グループ項目を設定している画像
  9. 「Myポータル」項目を設定します。
    追加したHTMLポートレットをユーザーがMyポータルで利用できるようにする場合は、「Myポータルでの利用を許可する」のチェックボックスを選択します。
    Myポータルでの利用を許可している画像
  10. 「ポートレットの内容」項目を設定します。
    HTMLタグや書式編集を使用して、ポートレットの内容を記述します。
    ポートレットの内容を設定している画像
    ポートレットの内容に次の機能を利用して、HTMLポートレットをカスタマイズすることもできます。
    • キーワードの記述:
      使用できるキーワードを記述すると、ポートレットを使用するユーザーの情報を表示することができます。
    • kintoneのグラフまたは集計表の表示:
      kintoneのアプリから取得したHTML形式のコード(埋め込み用タグ)を記述すると、グラフや集計表を表示することができます。
      詳細は、kintoneヘルプの集計結果の埋め込み用タグを取得する方法を参照してください。
  11. 設定内容を確認し、[追加する]をクリックします。

使用できるキーワード

キーワードを使用すると、ポートレットを使用するユーザーのユーザー情報を、HTMLポートレットに表示できます。
キーワードは、ポートレットを使用するユーザーのユーザー情報に置き換わります。
使用できるキーワードは、次のとおりです。
キーワード 意味
%Name% ユーザー名
%ID% Garoonのシステム内で使用されているユーザーID
%Account% ログイン名
%Mail% ユーザー情報に登録されているE-mail
%Tel% ユーザー情報に登録されている連絡先
%URL% ユーザー情報に登録されているURL
補足
  • cybozu.com共通管理で、ユーザー情報にカスタマイズ項目が追加されている場合は、次の書式を使用してHTMLポートレットにユーザー情報項目を追加できます。
    書式 :%grn.common.login.login.extension.ユーザー情報項目の項目コード%
    記述例:%grn.common.login.login.extension.item_01%

kintone 最新情報ポートレットのHTMLサンプル

次のHTMLタグを記述すると、「kintone 最新情報」ポートレットをHTMLポートレットとして追加できます。
<table class="top_title">
<tr><td><strong>kintone notifications</strong></td></tr>
</table>
<table class="list_column">
<tr>
<td>
<iframe src="/k/portlet/notifications" height="500" width="100%" style="border:0px;">
</iframe>
</td>
</tr>
</table>

メールワイズポートレットのHTMLサンプル

次のHTMLタグを記述すると、「メールワイズ」ポートレットをHTMLポートレットとして追加できます。
<table class="top_title" style="">
 <tbody><tr>
  <td nowrap="nowrap"><strong><nobr><a class="" href="/m/" target="_blank">メールワイズ</a></nobr></strong></td>
 </tr>
</tbody>
</table>
<div class="portal_frame">
<table class="list_column" style="">
<tr><td>
<div class="mailwise_portlet_main" style="padding:4px;"></div>
</td></tr>
</table>
</div>
<script type="text/javascript">
document.open();
document.write(
      '<script src="' +
(function(){
      var linkTags = document.getElementsByTagName("link");
              for(var i=0; i<linkTags.length; i++){
                      if(linkTags.item(i).href.match( /std/ )){
                               return linkTags.item(i).href.replace( /grn¥/html¥/std.css.*/, "cbmw5/" );
                      }
              }
              return "";
       })() +
       'portlet_compiled.js"></sc'+'ript>');
document.close();
</script>

<script type="text/javascript">
grn.mailwise.portlet.draw();
</script>

HTMLポートレットを変更する

HTMLポートレットを変更します。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ポータル]をクリックします。
  5. [HTMLポートレット]をクリックします。
  6. 「HTMLポートレット」画面で、変更するHTMLポートレットのポートレット名を選択します。
  7. 「HTMLポートレットの詳細」画面で、[変更する]をクリックします。
    変更するの操作リンクが赤枠で囲まれている画像
  8. 「HTMLポートレットの変更」画面で、必要に応じて設定内容を変更します。
  9. 設定内容を確認し、[変更する]をクリックします。

HTMLポートレットをJavaScript / CSSでカスタマイズする

JavaScriptファイルやCSSファイルを使って、HTMLポートレットの画面をカスタマイズできます。
詳細は、ポータルのカスタマイズを参照してください。

HTMLポートレットの表示を確認する

HTMLポートレットを公開する前に、ユーザー画面でどのようにポートレットが表示されるかプレビューできます。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ポータル]をクリックします。
  5. [HTMLポートレット]をクリックします。
  6. 「HTMLポートレット」画面で、プレビューするHTMLポートレットを選択します。
  7. 「HTMLポートレットの詳細」画面で、[表示を確認する]をクリックします。
    表示を確認する操作リンクが赤枠で囲まれている画像

HTMLポートレットを削除する

HTMLポートレットを削除します。
注意
  • 削除したHTMLポートレットは、元に戻せません。
    削除するHTMLポートレットがポータルやMyポータルで使用されている場合は、削除しても問題ないことを確認してください。

1件ずつHTMLポートレットを削除する

HTMLポートレットを1件ずつ削除します。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ポータル]をクリックします。
  5. [HTMLポートレット]をクリックします。
  6. 「HTMLポートレット」画面で、削除するポートレットのHTMLポートレットのポートレット名を選択します。
  7. 「HTMLポートレットの詳細」画面で、[削除する]をクリックします。
    削除するの操作リンクが赤枠で囲まれている画像
  8. 「HTMLポートレットの削除」画面で、[はい]をクリックします。

複数のHTMLポートレットをまとめて削除する

複数のHTMLポートレットをまとめて削除します。
操作手順:
  1. へッダーの歯車の形をした管理者メニューアイコンをクリックします。
  2. [Garoonシステム管理]をクリックします。
  3. 「各アプリケーションの管理」タブを選択します。
  4. [ポータル]をクリックします。
  5. [HTMLポートレット]をクリックします。
  6. 「HTMLポートレット」画面で、削除するポートレットのチェックボックスを選択し、[削除する]をクリックします。
    削除するHTMLポートレットが選択されている画像
  7. 「HTMLポートレットの一括削除」画面で、[はい]をクリックします。