ポータルテンプレート「classic-app」とは？
classic-appは、ポータル画面の内容をアプリで管理するためのポータルテンプレートです。
このテンプレートを使うと、ポータル画面に表示されるリンクを、アプリを使って管理できるようになります。
以下のように、ポータルをセクションごとに分け、リンクを自由に配置することができます。
リンク先やアイコンはアプリで自由に設定できます。
リンクはkintone内のアプリに限らず、基幹システムやコーポレートサイトなど、どんなページへもリンクできます。
このテンプレートは、Kintone Portal Designerのサンプルテンプレートの1つとして配布されています。
Kintone Portal Designerの設定画面を開き、「Import」→「Import Sample Template」を選択し、
表示されたダイアログから「classic-app」を選ぶことで利用することができます。
classic-appの設定方法
classic-appを使うには、専用のアプリ「ポータル管理アプリ」を追加し、セットアップする必要があります。セットアップ手順を以下に示します。
準備するもの
- Kintone Portal Designer (インストール手順)
- kintone（スタンダードコース）
- kintoneのシステム管理権限
手順１: 「ポータル管理アプリ」を作成しよう
- ヘッダーのツールバーから、Kintone Portal Designerのリンクをクリックし、Kintone Portal Designerの設定画面を開きます。
- 「Import」→「Import Sample Template」を選択し、表示されたダイアログから「classic-app」を選びます。
- 左上にある切り替えボタンを「DesignPortal」から「Default Portal」に変更します。
（すでにDefault Portalに設定されている場合は変更する必要はありません）
- 以下のリンクからアプリテンプレートをダウンロードします。
ポータル管理アプリテンプレート.zip
注意：アプリテンプレートはzip形式で圧縮されていますが、展開する必要はありません。 - kintoneのポータル画面を開きます。（すでに開いている場合は再読み込みします）
- 「＋ボタン」（アプリの追加）を押し、kintoneアプリストアを開きます。
- 「テンプレートファイルを読み込んで作成」を選びます。
注意：kintoneシステム管理権限がないと「テンプレートファイルを読み込んで作成」は表示されません。 - 「参照」ボタンを押しダウンロードしたテンプレートファイル（zip形式）を指定します。
「アプリを作成」ボタンを押して「ポータル管理アプリ」を作成します。
- 「ポータル管理アプリ」のレコード一覧画面を開き「初期データを登録」ボタンを押します。
レコードが１件登録されます。
- 作成したレコードの詳細画面を開き、アプリIDとレコードIDを確認します。
手順２: 追加したアプリの情報をKintone Portal Designerに反映しよう
- Kintone Portal Designerの設定画面を開き、JavaScriptタブを開きます。
- 先頭に書かれているCONFIG_APP_IDにアプリIDを書き込みます。
先頭に書かれているCONFIG_RECORD_IDにレコードIDを書き込みます。
※半角で入力してください。
例：アプリIDが”3”、レコードIDが”1”の場合
- 左上にある切り替えボタンを「Default Portal」から「DesignPortal」に変更します
- 「Save」ボタンを押します。
- kintoneのポータル画面を再読み込みします。リンク集が表示されます。
手順３: ポータルに表示している内容を変更しよう
再び「ポータル管理」アプリを開くには、kintoneのヘッダーの「設定メニューを表示する」アイコンから「アプリ管理」を開き、該当のアプリを選びます。
アプリのレコードを編集することで、リンク名、リンクのURL、アイコンなどを自由に設定できます。
レコードは「セクション」テーブルと「リンク」テーブルで構成されています。
「セクション」テーブル:
見出しで区切られたリンクのまとまり（セクション）を管理します。
テーブル1行がセクション1つ分に相当しています。
| セクションID | セクションIDセクションに固有のIDです。 他のセクションと重複しない数値を指定します。 |
|---|---|
| 見出し | セクションの見出しの文言です。 |
| 配置 | セクションの配置です。 左右どちらかを選ぶことができます。 |
| アイコン（任意） | セクションの見出しに配置するアイコンを添付します。 |
「リンク」テーブル:
ポータルに配置するリンクの一覧です。テーブル1行がリンク1つ分に相当しています。
| セクションID | 「セクション」テーブルで設定したセクションIDを指定します。 リンクを紐づけるセクションを決めます。 |
|---|---|
| リンク名 | リンクの文言です。 |
| URL | リンクのURLです。 |
| アイコン（任意） | セクションの見出しに配置するアイコンを添付します。 |
おわりに
classic-appテンプレートを使うと、アプリの設定を行うだけで、ポータル画面のリンクを自由に編集することができます。
お使いのドメインに合わせて、ポータルをさらに使いやすくしていきましょう。
関連リンク
このTipsは、2020年10月版 kintoneで確認したものになります。
記事通りにインストールしましたが、以下でポータル画面が表示されません。
手順２ 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";
しかし結果は、上記エラーとなります。
解決方法を教えて下さい。 宜しくお願い致します。
Jsat 様
お世話になっております。cybozu developer network 運営でございます。
こちらも再現するかためしてみたところ、特に問題は発生しませんでした。
もう最初から一度おためしいただいてもよろしいでしょうか。
どうしても動作しない場合は、固有の問題が考えられます。その場合は使っているブラウザなどより詳細の情報をお教えください。
よろしくお願い致します。
運営様
ご回答有難うございました。
再度最初からやり直し致しましたが、結果はNGでした。
こちらも確認しましたが、貴社「IPアドレスのCIDR記法」のアドレスで
設定されていました。
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 に直接ブラウザでアクセスできるかどうか。
よろしくお願い致します。
ご担当者様
お世話になります。
こちらの環境でも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を編集せずにこちらのカスタマイズポータルを表示させる方法はあるでしょうか。
ご確認お願い致します。
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.」というエラーが発生します。
そのため、以下のいずれかの対応をする必要があるかなと思っています。
または
50行目の assertJsRender(); をコメントアウト
51行目の const $ = window.jsrender; をコメントアウト
// 51行目で 本来 $ に入っていた jQuery を上書きしています。この行をコメントアウトすれば、$ は jQuery になります。
よろしくお願いいたします。
リンクをクリックした際新しいタブで開くことは可能なのでしょうか？
shima 様
お世話になっております。cybozu developer network 運営でございます。
カスタマイズの内容自体は好きにHTMLを変更できますので、
新しいタブで開くというようなカスタマイズも可能です。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問や具体的な実装方法はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
手順２の作業は、全ユーザーに反映されてしまうのでしょうか。
もしくは、Kintone Portal Designeは「JavaScriptファイルとして書き出し、
このファイルをkintoneに読み込むことですべてのユーザにデザインを適用」とあるように、
「JavaScriptファイル読み込むまでは作業者にしか反映しない」という認識で良いのでしょうか。
K 様
お世話になっております。cybozu developer network 運営でございます。
手順2の作業は作業者のみにデザインを適用されます。
ご認識の通りです。
今後ともよろしくお願いします。
担当者様
お世話になっております
このやり方でポータルがかわったのは確認できました
追加でこのポータルの下部に、今までのお知らせ機能を入れたいのですが、何か方法はありますか？
Miyawaki 様
お世話になっております。cybozu developer network 事務局です。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問や具体的な実装方法は cybozu developer コミュニティ をご活用ください。
どうぞよろしくお願いいたします。
ご担当者様
お世話になります。
このやり方で、ポータルの見た目を変えようとしております。
手順2-3の「Design Portal」を押すと、もともとあったポータルの画面やアプリの一覧が消えてしまう事象が発生しております。
解決方法をWeb検索などで調べようと思ったのですが、残念ながら無理でした。
サポートデスクに問い合わせたところ、こちらで問い合わせるようにとのお達しがあったので、こちらで書き込みさせて頂きます。
よろしくお願いいたします。
Yasu.H 様
お世話になります。cybozu developer network 事務局です。
kintone全体のカスタマイズに他のJSが適用されていますか？
適用されているようでしたら、「適応しない」をチェックした上で、もう一度Kintone Portal Designerを適用してみていただけますでしょうか？
kintone全体のカスタマイズ画面の開き方はこちらをご参考ください。
よろしくお願いします。
ご担当者様
早速のご返答ありがとうございます。
上記赤枠の通り「適用しない」にしたのですが、ダメでした。
下記が、適用前のポータルなのですが、
Design PortalをOnにすると
下記の通り、一番上の画像が消えてしまいます。
Yasu.H 様
お世話になります。cybozu developer network 事務局です。
返事が遅くなり大変申し訳ありませんでした。
お知らせのエリアは表示されなくなったとうことでしょうか？
記事の冒頭にも記載していますが、
このテンプレートは、ポータル画面に表示されるリンクを、アプリで管理できるものです。
ポータル管理アプリに記載していないものはポータルに表示されません。
こちらの記事で提供しているポータル管理アプリのテンプレートを使ってアプリを作った後に、アプリを開いて、レコード番号「1」のレコードを編集し、自分の環境に合わせて、リンクやリンクの表示名を変更していただく必要があります。
また、こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います