Index
Kintone Portal Designerとは？
Kintone Portal Designerは、kintoneのポータルを自由にデザインできるツール(Chrome拡張)です。
特長1: HTML・CSSのみでポータルをデザインできます
HTML・CSSを使ってポータルを簡単にデザインできます。JavaScriptに関する知識は必要ありません。
特長2: テンプレートやアイコンが用意されています
複数のテンプレートを用意しています。テンプレートの一部を書き換えるだけで、ポータルを簡単にデザインできます。
一からHTML・CSSを書く必要はありません。また、デザインする際に便利なアイコンも50種類以上用意しています。
自分の環境にかんたんに適用できる、有志の方が作成したkintoneポータルカスタマイズテンプレートも紹介しています。
kintone ポータル デザインテンプレートギャラリー からテンプレートを確認しましょう。
また、ポータル画面の内容をアプリで管理したり、組織によって表示する内容を出し分けするなど、
ポータルカスタマイズの実例を紹介する Tips記事もありますので、ぜひご確認ください！
特長3: すべてのユーザにデザインを適用できます
Kintone Portal Designerで作成したデザインは、JavaScriptファイルとして書き出すことができます。
このファイルをkintoneに読み込むことで、すべてのユーザにデザインを適用できます。
Kintone Portal Designerのインストール
- Kintone Portal Designerをインストールする
下記リンクからChromeに拡張機能をインストールしてください。
Kintone Portal Designer
- Kintone Portal Designerを起動する
kintoneのポータルを表示します。
ツールバーに表示された Kintone Portal Designerのボタンを押します。
Kintone Portal Designerが起動します。
Kintone Portal Designerの構成
Kintone Portal Designerの画面は以下のような構成になっています：
Kintone Portal Designerを有効化するトグルボタン、HTML/CSS/JavaScriptの編集パネル、デザインの保存、インポート、エクスポートボタンなどで構成されています。
テンプレートを読み込む
- テンプレートを読み込む
「Import」ボタンをクリックし、「Import Sample Template」をクリックしてください。
テンプレートの一覧ダイアログが表示されます。「advanced-3tabs」を選択し「Import」ボタンをクリックします。
テンプレートのHTMLやCSSが読み込まれます。
- 有効化して保存する
Kintone Portal Designerの左上にあるトグルボタンを押し「Design Portal」に表示を切り替えます。
これにより、Kintone Portal Designerに書かれたHTML・CSSなどがkintoneに読み込まれるようになります。「Save」ボタンをクリックします。
- デザインした内容を確認する
ポータルに戻り、画面を再読み込みします。サンプルテンプレートが適用されています。
デザインを変更する
サンプルテンプレート「advanced-3tabs」を少しだけ変更してみましょう。
HTMLタブを選択し、「Tab1」「Tab2」「Tab3」と書いてある箇所を、「営業部」「開発部」「総務部」に書き換えます。
ポータルを表示し画面を再読み込みします。タブの文字列が書き換わっていることがわかります。
デザインを書き出す
作成したデザインは、JSONファイルとして書き出すことができます。
このファイルはKintone Portal Designerに再度読み込ませることができます。
デザインを書き出すには、「Export」ボタンから「Export as JSON」を選択します。JSONファイルがエクスポートされます。
デザインを読み込むには、「Import」ボタンから「Import JSON」を選択します。
すべてのユーザにデザインを適用する
すべてのkintoneユーザにデザインを適用するには、作成したデザインをJavaScriptファイルとして書き出す必要があります。
- JavaScriptファイルをエクスポートする
「Export」ボタンから「Export as JavaScript (Desktop)」を選択します。
JavaScriptファイルがエクスポートされます。
- Kintone Portal Designerを無効にする
Kintone Portal Designerの左上にあるトグルボタンを押し「Default Portal」に表示を切り替えます。
(「Design Portal」のままにしておくと、Kintone Portal Designerのデザインと、
JavaScriptファイルによって適用されたデザインが二重で読み込まれることになります) - 「JavaScript / CSSでカスタマイズ」画面を開く
kintoneのツールバーの設定アイコンを押し、「kintoneシステム管理」から「JavaScript / CSSでカスタマイズ」を開きます。 - JavaScriptファイルを読み込む
「PC用のJavaScriptファイル」にある「アップロードして追加」を押し、手順1で書き出したJavaScriptファイルを追加します。
- ポータルのコンテンツを非表示にする
JavaScriptファイルを適用した後は、もともとのポータルのコンテンツが、デザインされたポータルの下に表示されています。
これを非表示にするには、「ポータルの設定」を開き、「ポータルに表示するコンテンツ」のすべてのチェックを外します。
まとめ
Kintone Portal Designerを使うと、HTML・CSSを利用してポータルを簡単にデザインできます。
今後、サンプルを順次を公開・紹介していく予定です。お楽しみに。
関連リンク
このTipsは、2019年07月版 kintoneで確認したものになります。
Kintone Portal Designerを利用してポータルをデザインしようと思っているのですが、
標準ポータルのお知らせのようにアプリの一覧やグラフを表示させる際のHTML上での記述方法がわかりませんでした。
お手数ですがご教授いただけないでしょうか。
よろしくお願いいたします。
こと 様
お世話になっております。cybozu developer network 運営局です。
記事上に記載があります kintone ポータル デザインテンプレートギャラリーなどが参考になると思います。
（アプリ一覧やグラフであればその中にある pastel-portalのhtmlが参考になるかと思います）
ご注意いただきたいのが、Kintone Portal Designerを利用してポータルをデザインする場合、
動的にアプリ一覧のデータやグラフに使うデータなどを反映したい場合はJavaScriptを利用して、
kintone REST APIからデータを取得したりする必要があります。
こちらのコメント欄は記事内容のフィードバック目的となっておりますので、
試してみてわからない技術的なご質問などはcybozu developer コミュニティをぜひご活用ください。
部署毎にスペースで管理されいてる為、特定のスペースのみに テンプレートを適用させる方法はございますでしょうか
（ポータル画面 その他のスペースは デフォルトの設定のまま）
tereterekom 様
お世話になっております。cybozu developer network 運営でございます。
スペースのトップ画面をカスタマイズできる スペース表示イベント があります。
特定のスペースへのテンプレートの適用は、テンプレートのソースコードから、
表示イベントをスペース表示イベントに書き換え、スペースの spaceId を指定するなどの変更で、対応できます。
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
その際、コードも公開するなどより詳細に情報を示すと回答が集まりやすいかと思われます。
今後とも cybozu developer network よろしくお願いします。
谷口太一 様
お世話になっております。cybozu developer network 運営でございます。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっており、
今回のような外部で公開されているコードを利用している場合などの
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
ポータルの適用に問題がある場合やコード自体に不具合がある場合も考えられるかと思います。
ポータルの適用に関してはこちらの記事を一度ご確認ください。
※PortalDesingerのプラグインがオンになってしまっていて一部表示できている場合がある可能性があります。
コード自体に不具合がある可能性においてはデバッグ記事を参考にエラーなどがないかも合わせてコミュニティに投稿してもらうとより返信が付きやすいかと思います。
よろしくお願い致します。
返信ありがとうございます。
こちらで質問してしまい申し訳ありません、developer comunityの方で再度質問したいと思います。
質問の投稿は削除した方がよろしいでしょうか？
谷口太一 様
質問の投稿は削除いただいても残していただいても構いません。
よろしくお願いいたします。
表示スペースが大きかったので削除させていただきました。ありがとうございました。
弊社ではkintone portal designer の「classic-days2020」を使ってポータル画面を作成しています。
半年くらい運用していましたが、2/28に業務中、突然何も表示されなくなってしまいました。
再インポートを行ってやり直しても結果は同じです。
誰か原因および解決策がわかる方がいらっしゃいましたら、コメント投稿お願いできれば助かります。
南本
**** 認証情報が含まれていたため運営により添付画像を修正しました ****
南本 静志 様
お世話になっております。cybozu developer network 事務局です。
事務局にて確認したところ、テンプレート「classic-app（classic-days2020）」が正常に読み込まれない現象が再現いたしました。
Chrome 拡張機能 Kintone Portal Designer を修正いたしましたので、
次の手順に沿ってお手元で拡張機能のアップデートをお願いいたします。
拡張機能をアップデートしたあと、該当テンプレートでポータルが正常に表示されるかご確認ください。
ご不明点等ございましたらお気軽にご質問ください。
どうぞよろしくお願いいたします。