検索
Close
カテゴリー内の他の記事

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

作成日
更新日

Index

Kintone Portal Designerとは？

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

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

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

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

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

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

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

designe-gallary.png

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

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

Kintone Porta Designerでデザインしたポータルのスクリーンショット

 

Kintone Portal Designerのインストール

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

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

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

    Kintone Portal Designerが起動します。

Kintone Portal Designerの構成

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

テンプレートを読み込む

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

デザインを変更する

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

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

デザインを書き出す

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

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

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

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

  1. JavaScriptファイルをエクスポートする
    「Export」ボタンから「Export as JavaScript (Desktop)」を選択します。
    JavaScriptファイルがエクスポートされます。
    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ファイルを追加します。
    JavaScriptファイルを読み込む
  5. ポータルのコンテンツを非表示にする
    JavaScriptファイルを適用した後は、もともとのポータルのコンテンツが、デザインされたポータルの下に表示されています。
    これを非表示にするには、「ポータルの設定」を開き、「ポータルに表示するコンテンツ」のすべてのチェックを外します。
    portalsetting_off.png

まとめ

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

関連リンク

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。