kintoneを導入したものの初期デザインの設定方法が分からない人も多いはずです。また、kintoneポータルはカスタマイズする方法が多いため、どのようにカスタマイズすれば使いやすいのか分からないこともあります。
この記事ではkintoneポータルのカスタマイズ方法をご紹介します。
- kintoneポータルをカスタマイズする4つの方法
- kintoneポータルをシンプルにするためのカスタマイズ方法
- テンプレート、JavaScript、プラグインを使ったカスタマイズ方法
記事を読みながらカスタマイズすれば、kintoneポータルがより使いやすいものになります。
もしkintoneの特徴やできることについて詳細を知りたい方は下記の記事もあわせてご覧ください。
関連記事：サイボウズ社のkintone（キントーン）とは？機能や特徴をわかりやすく解説
また、kintoneポータルのカスタマイズには専門的な知識が必要となります。そのため、kintoneの活用に強い業者にサポートを受けることを検討してみてはどうでしょうか？
kintone（キントーン）ポータルとは？トップ画面のことを指す
kintoneで一番初めに表示される画面のことをポータルと呼びます。ポータルには情報が集約されており、社内の情報共有を手軽に行えることが特徴です。
しかし、初期設定デザインでは不便な場合もあります。具体的には下記のような問題が発生します。
- 該当のアプリを探すのが大変で時間がかかってしまう
- アプリのアイコンが似ている
- 必要な情報にたどり着くのが難しい
- 必要のない情報が上部に表示されて困る
このような場合、ポータルをカスタマイズすれば問題を解決できます。
用途にあったカスタマイズがkintoneポータルの利便性を高めるポイントとなります。
kintone（キントーン）ポータル（トップ画面）をカスタマイズする4つの方法
kintoneポータルをカスタマイズする方法は下記の4つです。
- kintoneのポータル設定画面からカスタマイズ
- Kintone Portal Designerを使ってカスタマイズ
- JavaScript×APIでカスタマイズ
- kintoneポータルのプラグインを利用してカスタマイズ
どのようなカスタマイズをしたいかによって、方法を選ぶことが大切です。
kintoneのポータル設定画面からカスタマイズ
kintoneのポータル設定画面からカスタマイズする方法はkintoneに慣れていない人でも簡単に行うことができます。kintoneの管理者であれば設定の変更が可能で、プログラミングの知識が無くても設定できます。
しかし、初心者の方が自由度の高い設定は難しいでしょう。
デフォルトに用意されていないカスタマイズを行うには、より専門的な知識が必要な場合があります。
kintoneのデザインテンプレート「Kintone Portal Designer」を使ってカスタマイズ
「Kintone Portal Designer」はkintoneポータルをカスタマイズするために使用するCromeの拡張ツールです。プログラミングの知識がなくても、kintoneポータルの利便性を高めることができます。
多くのデザインテンプレートが準備されているため、簡単にカスタマイズできます。
アプリが多く、探すのに時間がかかってしまう人におすすめの方法です。
kintoneポータルをJavaScript×APIでカスタマイズ
JavaScriptを利用しAPIを呼び出す方法でカスタマイズできます。ポータル画面全体を自由度高くカスタマイズできます。
ポータル画面の利便性を高め、効率的に業務を進めることができるようになります。
初期デザインからの設定では自社の業務に対応できない人におすすめです。
しかし、高度なプログラミングの知識が必要であるため、簡単にカスタマイズできる方法ではありません。そのため、専門知識を持った人材がいない場合、kintoneの活用に強い企業に委託を考える必要があります。
kintoneポータルのプラグインを利用してカスタマイズ
サードパーティー製の「ポータル内アプリ表示プラグイン」を使用すれば、ユーザーに合わせて表示するアプリを設定できたり、ポータルにアラートを表示させることが可能になります。
この方法ではコードを書く必要がないため、プログラミングの知識が無くても設定変更できます。アプリを整理したい、通知のポップアップのデザインを変更したいなど用途に合わせたカスタマイズが可能です。
しかし、プラグイン同士の相性があり、手順を間違えるとkintoneが不具合を起こすリスクもあるため、注意して作業を行う必要があります。
kintone（キントーン）ポータルをシンプルにするためのカスタマイズ方法【ケース別に紹介】
それでは、実際にkintoneポータルをカスタマイズするための方法をご紹介します。kintoneポータルをカスタマイズすれば、情報が整理できます。設定したい項目に合わせて参照してみてください。
kintoneポータルの設定からデフォルトデザイン（お知らせ掲示板・通知・未処理 ・スペース・アプリ）をカスタマイズ
kintoneポータルのデフォルトデザインを変更するときに最もシンプルかつ簡単な方法は標準機能の中で設定画面からデザインを編集する方法です。
kintoneのシステム管理権限を持つユーザーか、cybozu.com共通管理者であれば、ポータルのデザインを変更できます。
kinotoneポータルの設定からデフォルトデザインをカスタマイズする手順
- ポータル画面右上のオプションボタンを開き、ポータルの設定をクリック
- ポータル画面に表示させたいコンテンツ（お知らせ掲示板、通知、未処理、スペース、アプリ）にチェックを入れる
- 保存をクリック
kintoneポータルのお知らせ掲示板に「よく使うアプリ一覧」をカスタマイズ
お知らせ掲示板はkintoneに搭載されている、標準機能内でカスタマイズできます。お知らせ掲示板によく使うアプリ一覧を表示させることで、すぐにアプリにアクセスが可能です。
Wordで作成した表を挿入すれば、アプリへのリンクをアイコン付きで表示でき、直感的にポータルが使用できるようになります。
kintoneポータルのお知らせ掲示板に「よく使うアプリ一覧」をカスタマイズする手順
- Wordを開き、挿入タブから表をクリック
- 行×列を必要な数選択する
- kintoneポータルのお知らせ掲示板の編集画面を開く
- Wordで作成し表をコピーしてお知らせ掲示板の編集画面にペースト
- クリックアイコン（添付ファイル）から、アプリのアイコンにしたい画像を選択
- アイコンにカーソルを合わせサイズを調節する
- リンクアイコンをクリックして、表示させたいアプリのリンクを設定する
kintoneポータルのカバー画像・アイコンデザインをカスタマイズ
kintoneのポータル画像・アイコンデザインはkintoneポータルに標準搭載されている設定画面から設定できます。似た機能を持つアプリもアイコンデザインを変更しておくことで、間違えて開くことを防げます。
kintoneポータルのカバー画像カスタマイズする手順
- ポータルの右上にあるオプションボタン（3点リーダー）をクリックし、ポータルの設定を選択
- カバー画像の項目から設定したい画像を選択する
- 保存をクリックする
kintoneポータルのアイコンデザインをカスタマイズする手順
- アプリを開いてレコードの一覧を表示します。画面右上の歯車マークの横にあるＶをクリックして、一般設定からアイコンと設定を選択します
- デフォルトのアイコンを選択する、もしくは任意の画像をアップロードします
- 設定が完了したら、右下の保存ボタンをクリックします
kintone（キントーン）ポータルのデザインをテンプレートを使ってカタマイズする方法
Kintone Portal Designerを使用したカスタマイズ方法は、JavaScriptに関する知識が無くても、ポータルをカスタマイズできます。
「Kintone Portal Designer」を使用したカスタマイズの手順
- Kintone Portal DesignerをChromeの拡張機能に追加
- kintoneのポータル画面を表示し、GoogleChrome右上拡張機能のKintone Portal Designerを起動
- kintone内のツールバーから（</>）のボタンをクリック
- 設定画面のImportからImport Sample Templateをクリック
- 適用したいデザインを選び、「Import」ボタンをクリック
- Kintone Portal Designerの左上にあるトグルボタンをクリックし、表示をDesign Portalに変更
- 右上のメニューにある「Save」ボタンをクリックしてHTML・CSSをkintoneに反映
- 後にkintoneのポータル画面を再読み込みして、レイアウトの反映を確認
kintone（キントーン）ポータルのデザインをJavaScript×APIを使ってカスタマイズする方法
JavaScriptを使用してAPIを呼び出すことで、より自由度の高いカスタマイズが可能です。
kintoneポータルのデザインをJavaScript×APIを使ってカスタマイズする手順
- ポータル画面右上の歯車をクリックし、kintoneシステム管理画面を開く
- カスタマイズの項目から、「JavaScript / CSSでカスタマイズ」を選択
- 適用範囲をkintoneシステムの管理者だけに適用に設定
- パソコン版のJavaScriptファイルの項目からURL指定で追加またはアップロードして追加を選択、取り込むファイルを選ぶ。ファイルは最大30個まで取り込み可能
- 保存ボタンをクリックし、正しく反映されているか確認します
- 最後に適用範囲をすべてのユーザーに適用に変更すれば、すべてのユーザーにカスタマイズを共有できます。
kintone（キントーン）ポータルにプラグインを使ってアプリを表示させる方法
「ポータル内アプリ表示プラグイン」を活用して、ユーザーによって表示するアプリを切り替えたり、ポータルにアラートを表示させることができます。
「ポータル内アプリ表示プラグイン」を使ってアプリを表示させる手順
- TIS社の公式ホームページからプラグインをダウンロード(Zipファイルの解凍は不要)
- kintoneにダウンロードしたzipファイルをインストール
- 空のアプリを作成し、アプリの設定→プラグインの項目から、ポータル内アプリ表示プラグインを追加
- プラグインの設定画面（歯車アイコン）を開く
- 表示されたフィールドを設定する
- ページ下部のファイル書き出しボタンをクリック
- ダウンロードしたzipファイルを展開し、kintoneシステム管理のJavascript / CSSでカスタマイズよりファイルをアップロードして保存
- ポータル画面にボタンが表示されたことを確認
- ボタンをクリックすれば指定したアプリの一覧がポップアップで表示
kintone（キントーン）ポータルのカスタマイズをする際の注意点
これまでkintoneポータルをカスタマイズする方法をご紹介してきましたが、その際に注意するべきことが3つあります。
- 複数のポータルは作成できない
- プラグインを導入する際は既存プラグインとの相性を事前に把握する
- JavaScriptカスタマイズによる影響を検証する
複数のポータルは作成できない
kintoneでは、複数のポータルを作成できません。
複数のポータルを利用する場合、複数のスペースを作成し、個別のスペースのポータルを利用する方法があります。
プラグインを導入する際は既存プラグインとの相性を事前に把握する
kintoneのプラグインを導入する際は、既存プラグインとの相性を事前に把握するのが重要です。例えば、複数のプラグインを導入した場合、予期せぬエラーが発生する可能性があります。
そのようなリスクを回避するために、下記の4つの項目をチェックしておきましょう。
- プラグインの試用期間を利用する
- 導入前に公式ホームページや説明書でプラグイン同士の互換性を確認する
- システム管理者のみを適用範囲に設定し、相性を確かめる
- 開発元の評判を参照しておく
JavaScriptカスタマイズによる影響を検証する
プラグインと同様にJavaScriptを導入する際にも既存のシステムとの相性を検証する必要があります。
特に自由度が高いカスタマイズになるため、特に注意が必要です。
具体的にJavaScriptカスタマイズでは下記の3点には注意が必要です。
- 信頼性の高いソースからコードを取得する
- テスト環境で動作を確認してから、コードを適用する
- コード適用後も、定期的にメンテナンスする
JavaScriptカスタマイズではリスクがあることを十分に理解し、事前にバックアップを取っておくことが大切です。
kintone（キントーン）の活用を検討している方はサポートへ相談しましょう
今回はkintoneポータルをカスタマイズする方法を徹底解説しました。それぞれの方法を実際に使い、kintoneポータルをカスタマイズすれば業務効率化と使いやすいポータルを完成させることができます。
しかし、カスタマイズには注意点もあるため、知識が十分なければ、kintoneを使いこなすことは難しいでしょう。
そこで、kintoneの活用を検討している方はkintoneの活用に強い企業にサポートしてもらうことも1つの手段です。
数ある企業の中でも特におすすめなのが、ペパコミ株式会社です。ペパコミ株式会社によるkintone導入サポートサービスでは、無料で相談できます。また、kintone導入から改修内製化までを一気通貫・並走支援でサポートしてくれます。
ペパコミ株式会社のサポートを受け、kintoneを導入すると、企業に合ったシステムを構築可能です。
まずは無料相談で業務の悩みを共有してみませんか？
コメント