macOSのインターフェースに適したネイティブ入力スタイルを選ぶ

最新のオペレーティングシステムでは、より一貫性があり洗練されたユーザー体験を提供するために、ネイティブコントロールの進化が続いています。macOSでの「Liquid Glass」の導入に伴い、入力オブジェクトの外観が一新され、角がより丸みを帯び、テキストと境界線の間のスペースが広くなりました。

この新しい外観は、最新のmacOSインターフェースには自然に溶け込んでいますが、既存の4Dアプリケーションにも影響を与える可能性があります。内部パディングが広くなったことで、同じ幅でも入力オブジェクトの高さが増し、表示できるテキスト量が減少する可能性があります。

4D 21 R5以降では、新しい境界線スタイル「System rounded」を使用して、この変更を制御できるようになりました。

入力オブジェクトの 2 種類のネイティブ外観

macOSでは、Appleは入力オブジェクトに対して2つのネイティブ外観を提供しています。従来の「角が直角」な外観と、新しい「角が丸い」外観です。

4Dでは、ボーダースタイルプロパティを通じて、これら両方の外観を利用できるようになりました：

• 「System」は、従来のネイティブ入力外観を維持します。
• 「System rounded」は、システムで定義された境界線の色と、内側のパディングが拡大された、新しい角丸の外観を使用します。

これにより、アプリケーションの既存のデザインに合った外観を選択できます。

両方のスタイルが利用可能であるため、既存のフォームをすぐに再設計する必要がなく、新しい外観を段階的に導入することができます。

スタイルの選択

フォームエディタで、入力オブジェクトの境界線スタイルプロパティから直接「System rounded」を選択できます。

これにより、既存のアプリケーションを更新する場合でも、新しいアプリケーションを設計する場合でも、各フォームに最適な外観を簡単に選択できます。

実行時にも、 OBJECT SET BORDER STYLE。

OBJECT SET BORDER STYLE(*; "myInput"; Border System Rounded)

また、CSS を使用して境界線のスタイルを定義することもでき、フォームのテーマに応じて異なるネイティブな外観を適用することが可能です：

@media (form-theme: mac-classic) {
  input {
    borderStyle: system;
  }
}

@media (form-theme: liquid-glass) {
  input {
    borderStyle: system;
  }
}

これにより、各入力オブジェクトを個別に変更することなく、角張った外観と丸みを帯びた外観を自動的に切り替えることができます。

さらに、これらのボーダースタイルにカスタムのパディングを組み合わせることで、虫眼鏡アイコンを表示するスペースを確保したFinder風の検索フィールドなど、他のmacOSネイティブコントロールを模倣することも可能です。

あらゆるプラットフォームでネイティブな操作感を実現

「System rounded」は、各プラットフォームのネイティブな外観を尊重するように設計されています。

macOSでは、新しい角丸の入力スタイルが表示されます。

Windows では、「System rounded」は「System」と同じネイティブな外観を使用します。クラシック Windows では、入力オブジェクトの角は角ばっていますが、Fluent UI では、角がわずかに丸みを帯びています。

したがって、ネイティブな外観を維持するためだけにプラットフォーム固有のロジックを導入することなく、クロスプラットフォームのフォームで「System rounded」を使用できます。

新しいmacOSのルックへのスムーズな移行

Liquid Glass は macOS の入力オブジェクトに新しいネイティブデザインをもたらしますが、これを採用するために既存のフォームを再設計する必要はありません。

「System」と「System rounded」を活用することで、アプリケーションに最適なネイティブ入力スタイルを選択し、ご自身のペースで新しい macOS の外観へ移行することができます。

入力オブジェクトの見た目を一新する準備はできましたか？ドキュメントを参照して、新しい border-style プロパティの詳細や、フォームでの使用方法について確認してください。