ポータル画面の内容をアプリで管理しよう(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: 「ポータル管理アプリ」を作成しよう

  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を確認します。

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

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

  2. CONFIG_APP_IDCONFIG_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のポータル画面を再読み込みします。
    リンク集が表示されます。

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

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

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

セクションテーブル

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

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

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

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

おわりに

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

関連リンク

information

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