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

目次

kintone Portal Designer とは?

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

特長 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 で動作を確認しています。