フロントエンド基盤の刷新に伴う変更(開発中の新機能)

記事番号:040789

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

ここでは、フロントエンド基盤の刷新の詳細や、フロントエンド基盤の刷新が適用された画面の先行利用に関する詳細を説明します。

フロントエンド基盤の刷新とは

kintone開発チームでは毎月アップデートを実施し、機能追加などの製品改善を継続的に行っています。そして現在、そういった製品価値を高める開発のスピードを根本的に向上させるための活動を、各方面で実施しています。その活動のひとつが、リリース当初から10年以上に渡り画面UIの開発に使用し続けていた基盤(フロントエンド基盤)の刷新です。kintone内のすべての画面を対象にフロントエンド基盤を刷新することにより、最新の技術や開発手法の導入を進め、開発速度の向上を目指しています。

フロントエンド基盤の刷新は、画面UIの開発を大きく変えるものですが、必ずしも画面の見た目や動作の大きな変更を伴うものではなく、システム管理の一部の画面については、既に刷新を終えています。

ただし、基盤の刷新と同時にUIパーツの統合や共通化を行う場合があり、画面デザインやレイアウトの大きな変更を伴う画面もあります。それらの画面に関しては、正式リリース前に先行してご利用いただけるオプションを提供し、いただいたフィードバック等を踏まえながら、継続的な改善を進めたうえで、正式版のリリースを行います。また、正式リリース後も、刷新前の状態をしばらくの間利用できるオプションを提供する予定です。今後のリリース予定については、順次アナウンスいたします。

フロントエンド基盤を刷新したアプリ設定画面の先行利用

2022年8月の定期アップデートから、フロントエンド基盤の刷新が適用された状態のアプリ設定画面の一部を先行利用いただけます。なお、UIやデザイン・レイアウト変更は現時点でのものであり、改善したバージョンを今後も継続的に開発・提供していく予定です。

主な変更内容

アプリ設定の各種画面では、フロントエンド基盤の刷新にあわせ、従来各画面で異なっていた保存ボタンの配置等のレイアウトを揃えています。

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

1:ヘッダー・グローバルナビゲーションエリア
基本的にデザインの変更はありませんが、各種ボタンや、サイドメニュー、お気に入り、ヘルプメニューなどが新しい実装に置き換わっています。

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

3:設定保存・キャンセルボタン
ボタンのデザインやレイアウトが変更されます(画面上部から画面下部に変更され、スクロールに追従し常時表示されます)。そのほか、上位の画面に戻るためのボタンが追加されます。


上記以外にも、各種ボタンや入力フォームのデザインが、以下のように変更されます。そのほか、キーボード操作対応などのアクセシビリティの改善も進めています。
  • 従来の画面

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

  • フロントエンド基盤刷新後の画面

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

先行利用できる画面

先行してご利用いただけるのは、アプリ設定の以下の画面です。

  • 一般設定

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

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

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

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

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

先行利用する方法

先行利用するには、アップデートオプション画面の「開発中の新機能」で、以下の設定を有効にします。

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

この設定を有効にすると、先行利用できる画面のうち、プラグイン設定以外の画面に、変更が適用されます。

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

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

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

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

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