Tips

ポータル画面の内容をアプリで管理しよう(classic-app の使い方) ~ kintone のポータルカスタマイズ紹介 #3 ~

目次

ポータルテンプレート「classic-app」とは？

固定リンクがコピーされました

classic-appは、ポータル画面の内容をアプリで管理するためのポータルテンプレートです。
このテンプレートを使うと、ポータル画面に表示されるリンクを、アプリを使って管理できます。

以下のように、ポータルをセクションごとに分け、リンクを自由に配置できます。

リンク先やアイコンはアプリで自由に設定できます。
リンクはkintone内のアプリに限らず、基幹システムやコーポレートサイトなど、どんなページへもリンクできます。

このテンプレートは、 Kintone Portal Designer (External link) のサンプルテンプレートの1つとして配布されています。
kintone Portal Designerの設定画面を開き、「Import」→「Import Sample Template」を選択し、表示されたダイアログから「classic-app」を選ぶことで利用できます。

classic-appを使うには、専用のアプリ「ポータル管理アプリ」を追加し、セットアップする必要があります。
セットアップ手順を以下に示します。

準備するもの

固定リンクがコピーされました

  • kintone Portal Designer（ インストール手順）

  • kintone（スタンダードコース）

  • kintoneのシステム管理権限

手順 １: 「ポータル管理アプリ」を作成しよう

固定リンクがコピーされました

  1. ヘッダーのツールバーから、kintone Portal Designerのリンクをクリックし、kintone Portal Designerの設定画面を開きます。

  2. 「Import」→「Import Sample Template」を選択し、表示されたダイアログから「classic-app」を選びます。

  3. 左上にある切り替えボタンを「DesignPortal」から「Default Portal」に変更します。
    （すでにDefault Portalに設定されている場合は変更する必要はありません）

  4. 以下のリンクからアプリテンプレートをダウンロードします。
    ポータル管理アプリテンプレート.zip

    information 

    アプリテンプレートはzip形式で圧縮されていますが、展開する必要はありません。

  5. kintoneのポータル画面を開きます。（すでに開いている場合は再読み込みします）

  6. 「＋ボタン」（アプリの追加）を押し、kintoneアプリストアを開きます。

  7. 「テンプレートファイルを読み込んで作成」を選びます。

    information 

    kintoneシステム管理権限がないと「テンプレートファイルを読み込んで作成」は表示されません。

  8. 「参照」ボタンを押しダウンロードしたテンプレートファイル（zip形式）を指定します。
    「アプリを作成」ボタンを押して「ポータル管理アプリ」を作成します。

  9. 「ポータル管理アプリ」のレコード一覧画面を開き「初期データを登録」ボタンを押します。
    レコードが1件登録されます。

  10. 作成したレコードの詳細画面を開き、アプリIDとレコードIDを確認します。

手順 ２: 追加したアプリの情報を kintone Portal Designer に反映しよう

固定リンクがコピーされました

  1. kintone Portal Designerの設定画面を開き、JavaScriptタブを開きます。

  2. CONFIG_APP_IDとCONFIG_RECORD_IDに、アプリIDとレコードIDを書き込みます。
    半角で入力してください。

    例：アプリIDが3で、レコードIDが1の場合

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    (function() {
 /**
  * アプリIDをここに入力します
  */
  const CONFIG_APP_ID = "3";

 /**
  * レコードIDをここに入力します
  */
  const CONFIG_RECORD_ID = "1";

  3. 左上にある切り替えボタンを「Default Portal」から「DesignPortal」に変更します。

  4. 「Save」ボタンを押します。

  5. kintoneのポータル画面を再読み込みします。
    リンク集が表示されます。

手順 ３: ポータルに表示している内容を変更しよう

固定リンクがコピーされました

再び「ポータル管理」アプリを開くには、kintoneのヘッダーの「設定メニューを表示する」アイコンから「アプリ管理」を開き、該当のアプリを選びます。
アプリのレコードを編集することで、リンク名、リンクのURL、アイコンなどを自由に設定できます。

レコードは「セクション」テーブルと「リンク」テーブルで構成されています。

セクションテーブル

固定リンクがコピーされました

見出しで区切られたリンクのまとまり（セクション）を管理します。
テーブル1行がセクション1つ分に相当しています。

フィールド 備考
セクション ID セクションに固有の ID です。
他のセクションと重複しない数値を指定します。
見出し セクションの見出しの文言です。
配置 セクションの配置です。
左右どちらかを選ぶことができます。
アイコン（任意） セクションの見出しに配置するアイコンを添付します。

固定リンクがコピーされました

ポータルに配置するリンクの一覧です。
テーブル1行がリンク1つ分に相当しています。

フィールド 備考
セクション ID 「セクション」テーブルで設定したセクション ID を指定します。
リンクを紐づけるセクションを決めます。
リンク名 リンクの文言です。
URL リンクの URL です。
アイコン（任意） セクションの見出しに配置するアイコンを添付します。

おわりに

固定リンクがコピーされました

classic-appテンプレートを使うと、アプリの設定をするだけで、ポータル画面のリンクを自由に編集できます。
お使いのドメインに合わせて、ポータルをさらに使いやすくしていきましょう。

関連リンク

固定リンクがコピーされました

information

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