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 で動作を確認しています。