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

記事番号:040556

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

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

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

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

JavaScriptやCSSを用いて作成したカスタマイズファイルをアプリに適用する手順を説明します。
kintoneのシステム管理者だけが、kintoneにJavaScriptやCSSを適用できます。また、カスタマイズはPC用とスマートフォン用（スマートフォンアプリを含む）で分けて作成できます。

kintoneに取り込んだカスタマイズファイルは、次の画面に適用されます。

  • レコードの一覧画面
  • レコードの登録画面
  • レコードの編集画面
  • レコードの詳細画面
    アプリからの通知を開くと表示されるレコード詳細画面にも適用されます。
  • レコードの印刷用画面
  • レコードを集計した表やグラフ
  • 動作テスト環境の上記の画面（PCのみ）

  1. 「レコードの一覧」画面で、画面右上にある歯車の形をした[アプリを設定]アイコンをクリックします。
    スクリーンショット：[アプリを設定]アイコンが枠線で強調されている

  2. 「アプリの設定」画面で、[設定]タブの「カスタマイズ／サービス連携」にある[JavaScript / CSSでカスタマイズ]をクリックします。

  3. 「JavaScript / CSSでカスタマイズ」画面で、カスタマイズの適用範囲を、次の中から選択します。

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

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

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

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

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

  7. 「アプリを更新」ダイアログで、[アプリを更新]をクリックします。