cybozu developer network

カテゴリー内の他の記事

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

  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. 「ポータル管理アプリ」のレコード一覧画面を開き「初期データを登録」ボタンを押します。
    レコードが1件登録されます。
    _________.png

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

手順2: 追加したアプリの情報を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のポータル画面を再読み込みします。リンク集が表示されます。

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

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

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

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

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

 

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

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


おわりに

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

関連リンク

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

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

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

Avatar
Jsat

記事通りにインストールしましたが、以下でポータル画面が表示されません。
手順2 5.kintoneのポータル画面を再読み込みします。リンク集が表示されます。

エラーを確認すると
 Uncaught(in promise)Error:JsRender cannot be loaded.
となっていましたので、"JavaScript"のリンク先なのかなと思い、cybozuライブラリ
から以下のリンク先をコピーして貼り付けました。

const JS_RENDER_URL = "https://js.cybozu.com/jsrender/1.0.11/jsrender.min.js";

しかし結果は、上記エラーとなります。
解決方法を教えて下さい。 宜しくお願い致します。

Avatar
cybozu Development team

Jsat 様

お世話になっております。cybozu developer network 運営でございます。

こちらも再現するかためしてみたところ、特に問題は発生しませんでした。
もう最初から一度おためしいただいてもよろしいでしょうか。

どうしても動作しない場合は、固有の問題が考えられます。その場合は使っているブラウザなどより詳細の情報をお教えください。

よろしくお願い致します。

 
 
Avatar
Jsat

運営様

ご回答有難うございました。
再度最初からやり直し致しましたが、結果はNGでした。

  • 問題が発生した箇所::JsRenderを読み込んでいない。
  • 権限設定:アプリ管理者
  • デバイス(PC or モバイル):PC
  • OS・ブラウザ:Chrome
  • IP制限などネットワークに特殊なことがあれば:IP制限
    こちらも確認しましたが、貴社「IPアドレスのCIDR記法」のアドレスで
    設定されていました。
Avatar
cybozu Development team

Jsat 様

お世話になっております。cybozu developer network 運営でございます。

詳細の情報ありがとうございます。特にエラーを引き起こすようなことはなさそうにみえますね..

こちらではどうしても再現できず、解決されたい場合は、より詳細を確認したいので、下記も回答いただけますでしょうか?

1. OSはWindowsでしょうか、Macでしょうか?
2. Chromeのバージョンをおしえてください。
3. 画面と、エラーのスクリーションショットをいただけますでしょうか?
4. 念の為ですが、記事の通り実施していただき、PortalDesigner上では、アプリID/レコードIDの編集以外は行っていない(カスタマイズしていない)かどうか。
5. 「kintone全体のカスタマイズ」を行っているか。設定されている場合、すべて外して試してもうごかないかどうか。
6. 
https://js.cybozu.com/jsrender/1.0.7/jsrender.min.js に直接ブラウザでアクセスできるかどうか。

よろしくお願い致します。

 
 
 
 
 
cybozu Development teamにより編集されました
Avatar
RAD_kod

ご担当者様

お世話になります。

こちらの環境でもJsat様のコメントと同様の現象が発生しております。

 

「kintone全体のカスタマイズ」に以下サイトから取得している各jsを設定しておりますが、これらのカスタマイズが影響しているのでしょうか。

https://developer.cybozu.io/hc/ja/articles/202960194-Cybozu-CDN

・jszip-v2.5.min.js

・angular-1.7.7.min.js

・moment-2.24.0.min.js

・moment-with-locales-2.24.0.min.js

・jquery-3.3.1.min.js

・sweetalert2_v7.33.1.min.js

classic-appのjavaScriptファイルの38~40行目をコメントアウト、

51行目をconst $ = window.jsRender; から

const $ = window.jQuery; に変更するとエラーが解消しポータル画面が表示されます。

 

全体カスタマイズに設置している各ライブラリはそのままで、

JavaScriptを編集せずにこちらのカスタマイズポータルを表示させる方法はあるでしょうか。

ご確認お願い致します。

Avatar
cybozu Development team

RAD_kod 様

お世話になっております。cybozu developer network 運営局です。

> JavaScriptを編集せずにこちらのカスタマイズポータルを表示させる方法はあるでしょうか。

JavaScript を書き換えずに対応するのは難しいかと思われます。

jsRender は、jQuery と一緒に使う場合、jQuery のプラグインとして読み込まれるようです。
その場合、window.jsrender ではなく、$(=jQuery)に直接 jsRender の関数が差し込まれるようです。
参照:https://github.com/BorisMoore/jsrender/blob/master/README.md#using-jsrender-with-jquery

classic-app では、jQuery の読み込みを想定していないため、jQuery なしの書き方をしています。
この状態で jQuery を読み込むと、window.jsrender が存在せず JavaScript 37行目で「jsRender cannot be loaded.」というエラーが発生します。

 

そのため、以下のいずれかの対応をする必要があるかなと思っています。

  • 全体カスタマイズに適用しているカスタマイズで、jQuery の利用をやめる

または

  • RAD_kod 様が記載しているように、window.jsrender のチェックの無効化と $ を jQuery にする
    50行目の assertJsRender(); をコメントアウト
    51行目の const $ = window.jsrender; をコメントアウト
    // 51行目で 本来 $ に入っていた jQuery を上書きしています。この行をコメントアウトすれば、$ は jQuery になります。

よろしくお願いいたします。

Avatar
shima

リンクをクリックした際新しいタブで開くことは可能なのでしょうか?

Avatar
cybozu Development team

shima 様

お世話になっております。cybozu developer network 運営でございます。

カスタマイズの内容自体は好きにHTMLを変更できますので、
新しいタブで開くというようなカスタマイズも可能です。

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問や具体的な実装方法はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

Avatar
K

手順2の作業は、全ユーザーに反映されてしまうのでしょうか。

もしくは、Kintone Portal Designeは「JavaScriptファイルとして書き出し、

このファイルをkintoneに読み込むことですべてのユーザにデザインを適用」とあるように、

「JavaScriptファイル読み込むまでは作業者にしか反映しない」という認識で良いのでしょうか。

Kにより編集されました
Avatar
cybozu Development team

K 様

お世話になっております。cybozu developer network 運営でございます。

手順2の作業は作業者のみにデザインを適用されます。

このファイルをkintoneに読み込むことですべてのユーザにデザインを適用」とあるように、「JavaScriptファイル読み込むまでは作業者にしか反映しない」という認識で良いのでしょうか

ご認識の通りです。

今後ともよろしくお願いします。

Avatar
Miyawaki

担当者様

お世話になっております

このやり方でポータルがかわったのは確認できました

追加でこのポータルの下部に、今までのお知らせ機能を入れたいのですが、何か方法はありますか?

Avatar
cybozu Development team

Miyawaki 様

お世話になっております。cybozu developer network 事務局です。

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問や具体的な実装方法は cybozu developer コミュニティ をご活用ください。

どうぞよろしくお願いいたします。

Avatar
Yasu.H

ご担当者様

 

お世話になります。

このやり方で、ポータルの見た目を変えようとしております。

 

手順2-3の「Design Portal」を押すと、もともとあったポータルの画面やアプリの一覧が消えてしまう事象が発生しております。

解決方法をWeb検索などで調べようと思ったのですが、残念ながら無理でした。

サポートデスクに問い合わせたところ、こちらで問い合わせるようにとのお達しがあったので、こちらで書き込みさせて頂きます。

 

よろしくお願いいたします。

 

Avatar
cybozu Development team

Yasu.H 様

お世話になります。cybozu developer network 事務局です。

kintone全体のカスタマイズに他のJSが適用されていますか?

適用されているようでしたら、「適応しない」をチェックした上で、もう一度Kintone Portal Designerを適用してみていただけますでしょうか?

kintone全体のカスタマイズ画面の開き方はこちらをご参考ください。

よろしくお願いします。

cybozu Development teamにより編集されました
Avatar
Yasu.H

ご担当者様

 

早速のご返答ありがとうございます。

上記赤枠の通り「適用しない」にしたのですが、ダメでした。

下記が、適用前のポータルなのですが、

 

Design PortalをOnにすると

 

下記の通り、一番上の画像が消えてしまいます。

Avatar
cybozu Development team

Yasu.H 様

お世話になります。cybozu developer network 事務局です。
返事が遅くなり大変申し訳ありませんでした。

お知らせのエリアは表示されなくなったとうことでしょうか?

記事の冒頭にも記載していますが、
このテンプレートは、ポータル画面に表示されるリンクを、アプリで管理できるものです。

ポータル管理アプリに記載していないものはポータルに表示されません。
こちらの記事で提供しているポータル管理アプリのテンプレートを使ってアプリを作った後に、アプリを開いて、レコード番号「1」のレコードを編集し、自分の環境に合わせて、リンクやリンクの表示名を変更していただく必要があります。

また、こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。

コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います

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