kintone ヘルプ

JavaScriptやCSSでアプリをカスタマイズする

JavaScriptやCSSを使用して、アプリの動作や画面をカスタマイズできます。

kintoneの製品サイトでは、カスタマイズ機能の活用例をご紹介しています。
JavaScriptプログラムの作成には、APIを使用します。
APIの詳細は、次のサイトで公開されています。  
  • JavaScriptやCSSを使用したカスタマイズは、kintone スタンダードコースでのみ利用できます。

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

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

JavaScriptファイルは、PC用とスマートフォン用(スマートフォンアプリを含む)とで分けて取り込めます。
CSSファイルは、PC用にのみ取り込めます。

取り込んだファイルは、次の画面に適用されます。
  • レコードの一覧画面
  • レコードの登録画面
  • レコードの編集画面
  • レコードの詳細画面
    アプリからの通知を開くと表示されるレコード詳細画面にも適用されます。
  • レコードを集計した表やグラフ(PCのみ)*1
  • 動作テスト環境の上記の画面(PCのみ)
*1 埋め込み用タグを使用して外部サイトに埋め込んだグラフには適用されません。

手順:

  1. アプリの設定画面を開きます。
    アプリの設定画面を開く
  2. 「設定」タブをクリックします。
  3. Click to zoom this image
    「カスタマイズ/サービス連携」の[JavaScript / CSSでカスタマイズ]をクリックします。
  4. カスタマイズの適用範囲を、次の中から選択します。
    • すべてのユーザーに適用
    • アプリ管理者だけに適用
    • 適用しない
    すべてのユーザーにカスタマイズを適用する前に、アプリ管理者だけに適用して、正しくカスタマイズされていることを確認してください。なお、「すべてのユーザーに適用」を選択すると、カスタマイズはゲストユーザーにも適用されます。
  5. [URL指定で追加]または[アップロードして追加]をクリックし、取り込むJavaScriptファイルを選択します。
    URLには、cybozu.com以外のドメインも指定できます。
    PC用のJavaScriptファイル、スマートフォン用のJavaScriptファイル、およびPC用のCSSファイルは、それぞれ30個まで取り込めます。
    ファイルは上から順に読み込まれます。ファイルの順番は、 矢印アイコン をドラッグアンドドロップして変更できます。
  6. [保存]をクリックします。