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

記事番号:040556

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

kintoneの製品サイトでは、カスタマイズ機能の活用例をご紹介しています。
JavaScriptやCSSカスタマイズ(独自開発)でできること(日本語のみ)

JavaScriptプログラムの作成には、APIを使用します。
JavaScriptやCSSでアプリをカスタマイズする方法について、詳しくはcybozu developer networkを参照してください。

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

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

JavaScript/CSSファイルは、PC用とスマートフォン用(スマートフォンアプリを含む)とで分けて取り込めます。取り込んだファイルは、次の画面に適用されます。

  • レコードの一覧画面
  • レコードの登録画面
  • レコードの編集画面
  • レコードの詳細画面
    アプリからの通知を開くと表示されるレコード詳細画面にも適用されます。
  • レコードの印刷用画面
  • レコードを集計した表やグラフ
    埋め込み用タグを使用して外部サイトに埋め込んだグラフには適用されません。
  • 動作テスト環境の上記の画面(PCのみ)
  1. レコード一覧画面の右上にある歯車の形をしたアプリ設定アイコンをクリックし、「設定」タブの「カスタマイズ/サービス連携」にある[JavaScript / CSSでカスタマイズ]を選択します。
    スクリーンショット:設定アイコン

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

    • すべてのユーザーに適用
    • アプリ管理者だけに適用
    • 適用しない

    すべてのユーザーにカスタマイズを適用する前に、アプリ管理者だけに適用して、正しくカスタマイズされていることを確認してください。
    「すべてのユーザーに適用」を選択すると、カスタマイズはゲストユーザーにも適用されます。

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

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

    カスタマイズファイル読み込み画面

  4. 画面右下の[保存]をクリックします。

  5. 画面右上の[アプリを更新]をクリックします。

  6. 確認ダイアログで[アプリを更新]をクリックします。