JavaScriptやCSSを使用したカスタマイズ

記事番号:04042

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

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

kintoneに適用するJavaScriptプログラムの作成には、kintoneが提供するAPIを利用できます。APIの詳細は、cybozu developer networkを参照してください。

JavaScriptとCSSが適用されない画面

JavaScriptとCSSが適用されない画面は、次のとおりです。

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

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

JavaScript/CSSファイルを取り込む

作成したファイルをkintoneに取り込む手順を説明します。
kintoneのシステム管理者だけがファイルを取り込めます。

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

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

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

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

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

  4. [URL指定で追加]または[アップロードして追加]をクリックし、取り込むファイルを選択します。

    • URLには、cybozu.com以外のドメインも指定できます。
    • ファイルは、それぞれ30個まで取り込めます。
    • ファイルは上から順番に読み込まれます。
    • ファイルの順番は、ファイル名の左側にある「ドラッグして並び替え」アイコンをドラッグアンドドロップして変更できます。 全体カスタマイズ画面
  5. [保存]をクリックします。