Kintone Portal Designerを使ってポータルをデザインしよう

Kintone Portal Designerとは？

Kintone Portal Designerは、kintoneのポータルを自由にデザインできるツール(Chrome拡張)です。

特長1: HTML・CSSのみでポータルをデザインできます

HTML・CSSを使ってポータルを簡単にデザインできます。JavaScriptに関する知識は必要ありません。

特長2: テンプレートやアイコンが用意されています

複数のテンプレートを用意しています。テンプレートの一部を書き換えるだけで、ポータルを簡単にデザインできます。

 一からHTML・CSSを書く必要はありません。また、デザインする際に便利なアイコンも50種類以上用意しています。

kintone ポータル デザインテンプレートギャラリー でも、有志の方が作成したkintoneポータルカスタマイズテンプレートを紹介しています。
また、kintone ポータルのカスタマイズ Tips もあります。

特長3: すべてのユーザにデザインを適用できます

Kintone Portal Designerで作成したデザインは、JavaScriptファイルとして書き出すことができます。
このファイルをkintoneに読み込むことで、すべてのユーザにデザインを適用できます。

Kintone Portal Designerのインストール

1. Kintone Portal Designerをインストールする
   

   下記リンクからChromeに拡張機能をインストールしてください。
   Kintone Portal Designer
   

2. Kintone Portal Designerを起動する
   kintoneのポータルを表示します。
   ツールバーに表示された Kintone Portal Designerのボタンを押します。
   
   
   Kintone Portal Designerが起動します。

Kintone Portal Designerの構成

Kintone Portal Designerの画面は以下のような構成になっています：
Kintone Portal Designerを有効化するトグルボタン、HTML/CSS/JavaScriptの編集パネル、デザインの保存、インポート、エクスポートボタンなどで構成されています。

テンプレートを読み込む

1. テンプレートを読み込む
   「Import」ボタンをクリックし、「Import Sample Template」をクリックしてください。
   
   テンプレートの一覧ダイアログが表示されます。「advanced-3tabs」を選択し「Import」ボタンをクリックします。
   テンプレートのHTMLやCSSが読み込まれます。
      
2. 有効化して保存する
   Kintone Portal Designerの左上にあるトグルボタンを押し「Design Portal」に表示を切り替えます。
   これにより、Kintone Portal Designerに書かれたHTML・CSSなどがkintoneに読み込まれるようになります。「Save」ボタンをクリックします。
   
3. デザインした内容を確認する
   ポータルに戻り、画面を再読み込みします。サンプルテンプレートが適用されています。

デザインを変更する

サンプルテンプレート「advanced-3tabs」を少しだけ変更してみましょう。
HTMLタブを選択し、「Tab1」「Tab2」「Tab3」と書いてある箇所を、「営業部」「開発部」「総務部」に書き換えます。


ポータルを表示し画面を再読み込みします。タブの文字列が書き換わっていることがわかります。

デザインを書き出す

作成したデザインは、JSONファイルとして書き出すことができます。
このファイルはKintone Portal Designerに再度読み込ませることができます。

デザインを書き出すには、「Export」ボタンから「Export as JSON」を選択します。JSONファイルがエクスポートされます。
デザインを読み込むには、「Import」ボタンから「Import JSON」を選択します。

すべてのユーザにデザインを適用する

すべてのkintoneユーザにデザインを適用するには、作成したデザインをJavaScriptファイルとして書き出す必要があります。

1. JavaScriptファイルをエクスポートする
   「Export」ボタンから「Export as JavaScript (Desktop)」を選択します。
   JavaScriptファイルがエクスポートされます。
   
2. Kintone Portal Designerを無効にする
   Kintone Portal Designerの左上にあるトグルボタンを押し「Default Portal」に表示を切り替えます。
   (「Design Portal」のままにしておくと、Kintone Portal Designerのデザインと、
   JavaScriptファイルによって適用されたデザインが二重で読み込まれることになります)
3. 「JavaScript / CSSでカスタマイズ」画面を開く
   kintoneのツールバーの設定アイコンを押し、「kintoneシステム管理」から「JavaScript / CSSでカスタマイズ」を開きます。
4. JavaScriptファイルを読み込む
   「PC用のJavaScriptファイル」にある「アップロードして追加」を押し、手順1で書き出したJavaScriptファイルを追加します。
   
5. ポータルのコンテンツを非表示にする
   JavaScriptファイルを適用した後は、もともとのポータルのコンテンツが、デザインされたポータルの下に表示されています。
   これを非表示にするには、「ポータルの設定」を開き、「ポータルに表示するコンテンツ」のすべてのチェックを外します。
   

まとめ

Kintone Portal Designerを使うと、HTML・CSSを利用してポータルを簡単にデザインできます。
今後、サンプルを順次を公開・紹介していく予定です。お楽しみに。

関連リンク

• kintoneのポータルデザイン開発ストーリー（Cybozu Inside Out）

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