検索
Close
カテゴリー内の他の記事

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

作成日
更新日

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

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

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

__________2020-10-31___9.36.17.png

 

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


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

______________.png

classic-appの設定方法

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

準備するもの

  • Kintone Portal Designer (インストール手順)
  • kintone（スタンダードコース）
  • kintoneのシステム管理権限

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

  1. ヘッダーのツールバーから、Kintone Portal Designerのリンクをクリックし、Kintone Portal Designerの設定画面を開きます。PortalDesigner___.png
  2. 「Import」→「Import Sample Template」を選択し、表示されたダイアログから「classic-app」を選びます。
  3. 左上にある切り替えボタンを「DesignPortal」から「Default Portal」に変更します。
    （すでにDefault Portalに設定されている場合は変更する必要はありません）
    switch_default_portal.png

  4. 以下のリンクからアプリテンプレートをダウンロードします。
    ポータル管理アプリテンプレート.zip
    注意：アプリテンプレートはzip形式で圧縮されていますが、展開する必要はありません。

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

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

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

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

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

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

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

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

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

    例：アプリIDが”3”、レコードIDが”1”の場合
  3. 左上にある切り替えボタンを「Default Portal」から「DesignPortal」に変更します
    switch_design_portal.png

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

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

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

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

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

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

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

 

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

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


おわりに

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

関連リンク

このTipsは、2020年10月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。