JavaScriptやCSSを使用したkintone全体のカスタマイズ

記事番号:04042

JavaScriptやCSSを利用して、kintone全体の動作や画面をカスタマイズできます。PC用とスマートフォン用(スマートフォンアプリを含む)とで分けてカスタマイズします。

JavaScript/CSSファイルは、kintoneのシステム管理から適用します。kintoneのトップページのポータルや、スペースのポータルをカスタマイズする場合も同様です。
アプリを個別にカスタマイズする場合は、アプリの設定画面からJavaScript/CSSファイルを適用します。 詳細は、「JavaScriptやCSSでアプリをカスタマイズする」を参照してください。

kintoneに適用するカスタマイズファイルの作成には、kintoneが提供するAPIを利用できます。APIの詳細は、cybozu developer networkを参照してください。

カスタマイズが適用されない画面

カスタマイズが適用されない画面は、次のとおりです。

  • kintoneシステム管理から設定できる画面
  • アプリの設定画面
  • 個人設定画面
  • 埋め込み用タグを使用して外部サイトに埋め込んだグラフ

上記の画面を除き、すべての画面に適用されます。

JavaScriptファイルやCSSファイルを適用する

JavaScriptやCSSを用いて作成したカスタマイズファイルをkintoneに適用する手順を説明します。
kintoneのシステム管理者だけがカスタマイズを適用できます。

  1. kintoneシステム管理画面を開きます。
    kintoneシステム管理画面を開く

  2. [JavaScript / CSSでカスタマイズ]をクリックします。

  3. カスタマイズの適用範囲を、次の3種類から選択します。

    • すべてのユーザーに適用
    • kintoneのシステム管理者だけに適用
    • 適用しない

    すべてのユーザーにカスタマイズを適用する前に、システム管理者だけに適用して、正しくカスタマイズされていることを確認してください。
    ここでの設定に関わらず、ゲストユーザーにはカスタマイズは適用されません。

  4. [URL指定で追加]または[アップロードして追加]をクリックし、取り込むファイルを選択します。
    複数のファイルを取り込んだ場合、上から順番に読み込まれます。また、ファイルの順番は、ファイル名の左側にある「ドラッグして並び替え」アイコンをドラッグアンドドロップして変更できます。
    スクリーンショット:全体カスタマイズ画面

  5. 画面左上の[保存]をクリックします。