警告

近日中にKintone Portal Designerがアップデートされる予定です。
アップデート後、以下の手順を実施する必要があります。

1. ブラウザーのURL入力欄にchrome://extensionsと入力します。
2. 画面右上にあるトグルボタンを押して、デベロッパーモードを「ON」にします。

3. Kintone Portal Designerの画面を開きます。
4. Kintone Portal Designerの画面で「Save」ボタンを押します。

Kintone Portal Designer は、kintoneのポータルをJavaScriptの知識なしで、テンプレートでデザインできるツール（Chrome拡張）です。

cybozu developer networkでは、Kintone Portal Designerを使ったポータルカスタマイズを複数紹介しています。
詳細は次のページを参照してください。
kintoneポータルカスタマイズTips

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

複数のテンプレートを用意しています。
テンプレートの一部を書き換えるだけで、ポータルを簡単にデザインできます。
ゼロからHTML・CSSを書く必要はありません。
また、デザインする際に便利なアイコンも50種類以上用意しています。
詳細は portal-design-templates を確認ください。

自分の環境に簡単に適用できる、有志の方が作成したkintoneポータルカスタマイズテンプレートも紹介しています。
kintoneポータル デザインテンプレートギャラリー からテンプレートを確認しましょう。

また、ポータル画面の内容をアプリで管理したり組織によって表示する内容を出し分けするなど、 ポータルカスタマイズの実例を紹介する 記事もあります。
ぜひ確認してください！

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

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を有効化するトグルボタン
• 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年7月版kintoneで動作を確認しています。