kintoneポータルをデザインしよう〜Kintone Portal Designerの使い方〜

目次

Kintone Portal Designerとは?

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

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

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

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

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

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

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

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

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

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

Kintone Portal Designerのインストール

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

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

  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を利用してポータルを簡単にデザインできます。
今後、サンプルを順次紹介していく予定です。

関連リンク

information

このTipsは、2019年7月版kintoneで動作を確認しています。