アプリ設定画面のフロントエンド基盤の刷新の詳細

記事番号:040789

kintone開発チームでは、画面UIの開発に使用し続けていた基盤(フロントエンド基盤)の刷新に取り組んでいます。
その中でもアプリ設定画面の範囲におけるフロントエンド基盤刷新版を、2023年2月にリリース予定です。
フロントエンド基盤の刷新にあたり、画面によっては、デザインやレイアウトの大きな変更が発生する場合があります。それらの画面に関しては、アップデートオプションの「開発中の新機能」を通じて、2023年2月の正式リリース前に先行してご利用いただけるようにしています。

ここでは、フロントエンド基盤の刷新に伴う画面変更の詳細や、変更後の画面の先行利用に関する詳細を説明します。

アップデート予告

2023年2月の定期アップデートにて、アプリ設定画面のフロントエンド基盤が刷新されます。

  • アプリ設定の各種画面が新しい実装に置き換わり、それに伴って、アプリ設定画面のデザインやレイアウトも新しいものに置き換わります。

  • 先行利用するためのアップデートオプションを提供しています。プラグイン開発者の方はプラグイン設定画面への影響もご確認ください。

  • アップデート後も、無効化可能な期間を設けます(2023年5月の定期アップデートまでの約3か月間を予定しています)。

フロントエンド刷新が適用される対象画面

2023年2月のアップデートで変更が適用されるのは、アプリ設定のうち以下の画面です。フォーム設定や一覧設定、グラフ設定の画面に変更はありません。

  • 一般設定

    • アイコンと説明
    • デザインテーマ
    • プロセス管理
  • 通知

    • アプリの条件通知
    • レコードの条件通知
    • リマインダーの条件通知
  • カスタマイズ/サービス連携

    • プラグインの一覧
    • プラグインの追加
    • プラグインの設定
    • JavaScript / CSSでカスタマイズ
    • APIトークン
    • Webhookの一覧
    • Webhookの追加
    • Webhookの編集
    • Slack連携
  • アクセス権

    • アプリのアクセス権
    • レコードのアクセス権
    • フィールドのアクセス権
  • その他の設定

    • カテゴリー
    • 言語ごとの名称
    • レコードのタイトル
    • 高度な設定
    • アクションの一覧
    • アクションの追加
    • アクションの編集

主な変更内容

フロントエンド基盤の刷新に伴うアプリ設定のレイアウト・デザイン変更について詳細を説明します。

画面共通部分

スクリーンショット:新しいレイアウト・デザイン画面

1:ヘッダー・グローバルナビゲーションエリア
新しい実装に置き換わります。デザインの大きな変更はありません。

2:パンくずリスト
新しい実装に合わせてデザインが変更されます。スペース内アプリはスペース名も表示されるようになります。

3:設定保存・キャンセルボタン(プラグイン設定画面を除く)
実装の置き換えに合わせてボタンのデザインやレイアウトが変更されます(画面上部から画面下部に変更され、スクロールに追従し常時表示されます)。

設定UI部分

実装の置き換えにあわせて、各種UIパーツのレイアウトやデザインを変更します。UIパーツはキーボード操作対応や色のコントラストなどのアクセシビリティ面での改善も進めています。

  • これまで(例:レコードのアクセス権設定画面)

スクリーンショット:従来の画面

  • フロントエンド基盤刷新後(例:レコードのアクセス権設定画面)

スクリーンショット:フロントエンド基盤刷新後の画面

先行利用する方法

フロントエンド基盤を刷新したアプリ設定画面は、2023年2月の定期アップデート前から先行してお試しいただけます。
アップデートオプション画面の「開発中の新機能」で、以下の設定を有効にします。
設定を有効にすると、フロントエンド刷新が適用される対象画面のうち、プラグイン設定以外の画面に変更が適用されます。

「アプリ設定画面内のデザイン・レイアウト変更」を有効にする

なお、プラグイン設定画面については、以下のオプションで有効・無効の切り替えを行ないます。

(プラグイン開発者向け)「プラグイン設定画面内のデザイン・レイアウト変更」を有効にする

プラグイン設定画面とは、アプリ設定に追加した各プラグインの設定ボタンをクリックすると表示される画面のことです。
この設定は、プラグイン開発者の方が、フロントエンド基盤刷新後のプラグイン設定画面に対して事前に動作を確認する目的で利用することを想定しています。

プラグインの設定画面の実装がAPIとして提供されていない要素に依存している場合など、プラグインの設定画面の実装方法によっては、ボタンやUIの表示が崩れるなどの影響が発生する可能性があります。プラグイン開発者の方は必要に応じて動作の確認を行なってください。

スクリーンショット:プラグイン設定画面