ブログ

[読書会]大画面デバイス

※本サイトは docs.flutter.dev / Large screen devices のリファレンスブログです。

このページでは、大画面での動作を改善するためにアプリを最適化するためのガイダンスを提供しています。 FlutterはAndroidと同様に、大画面をAndroidが動作するタブレット、フォルダブル、ChromeOSデバイスと定義しています。 また、Flutterは大画面のデバイスをウェブ、デスクトップ、iPadと定義しています。

大画面の需要は増加の一途をたどっています。 2024年1月現在、2億7,000万台以上のアクティブな大画面および折りたたみ式デバイスがAndroidで動作し、1,490万人以上のiPadユーザーがいます。 アプリが大画面をサポートすると、他のメリットも得られます。 画面いっぱいにアプリを最適化することです。 例えば、次のようなことが可能です。 アプリのユーザーエンゲージメント指標を向上させます。 Playストアでのアプリの視認性を高めます。 最近のPlayストアのアップデートでは、デバイスタイプ別の評価が表示され、アプリが大画面をサポートしていない場合も表示されます。 あなたのアプリがiPadOSの提出ガイドラインを満たし、App Storeで受け入れられるようにします。

１．GridView利用によるレイアウト

ListViewで作成したアプリを、小画面（スマフォ等）では普通に複数のリスト（写真等）表示されていても、大画面（横長のタブレット等）では（複数リスト中のたった１つの）写真が画面幅いっぱいに表示されてしまうことがあります。

この様な動作を防止する為には、ListViewをGridViewに移行しておくことが有効です。

（１）GridView

GridViewはListViewウィジェットに似ていますが、直線的に並べられたウィジェットのリストだけを扱うのではなく、２次元の配列でウィジェットを並べることができます。 GridViewにもListViewに似たコンストラクタがあります。 ListViewのデフォルトコンストラクタはGridView.countに対応し、ListView.builderはGridView.builderに似ています。

GridViewには、よりカスタムなレイアウトのための追加コンストラクタがいくつかあります。

[読書会]GridView クラスについて

例えば、元のアプリで ListView.builder を使用していた場合、それを GridView.builder に置き換える。 アイテム数が多いアプリの場合、このビルダーコンストラクタを使用して、実際に表示されるアイテムウィジェットだけをビルドすることをお勧めします。 コンストラクタのパラメータのほとんどは、２つのウィジェット間で同じなので、簡単に交換できます。

Flutterには、強力なgridDelegateがあらかじめ用意されています。

・　SliverGridDelegateWithFixedCrossAxisCount
　　　グリッドに特定の列数を割り当てることができます。

・　SliverGridDelegateWithMaxCrossAxisExtent
　　　項目の最大幅を定義できます。

これらのクラスのグリッド・デリゲートは、カラム数を直接設定したり、デバイスがタブレットかどうかに基づいてカラム数をハードコードしたりするようなことはしないでください。 列数はウィンドウのサイズに基づくべきで、物理的なデバイスのサイズに基づくべきではありません。
物理的なデバイスサイズではなくアプリのウィンドウサイズを取得するためにMediaQueryを使いましょう。

[読書会]セーフエリアとMediaQuery

（２）その他

これらの状況にアプローチするもう１つの方法は、BoxConstraintsのmaxWidthプロパティを使用することです。
これには次のような方法があります。

・　GridViewをConstrainedBoxで囲み、最大幅を設定したBoxConstraintsを与えます。

・　背景色の設定など他の機能が必要な場合は、ConstrainedBoxの代わりにContainerを使用します。

最大幅の値の選択については、『Applying layout guide』のMaterial３が推奨する値を参照して下さい。

２．Foldables(折りたたみ式の画面)

折りたたみ式の画面の場合、MediaQueryを使用しても、表示がおかしくなる場合があります。
（画面を開いた時に、中央にレターボックス状態で表示される（周りが真っ黒、等）。）

これを解決するには、２つの方法があります。
・　すべてのオリエンテーションをサポートする。（全部のデバイスを調査する、ということ）
・　物理的なディスプレイの寸法を使用する。（Display API を使用してサイズを調査する、ということ）

Flutter 3.13で導入されたDisplay APIを使えば、物理デバイスのサイズ、ピクセル比、リフレッシュレートを取得できます。

Display クラスの利用：
ui.FlutterView? _view;

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  _view = View.maybeOf(context);
}

void didChangeMetrics() {
  final ui.Display? display = _view?.display;
}

上記を利用して、気になるデバイスについて調査することが薦められています。

３．Adaptive input(適応入力)

より多くのスクリーンをサポートすることは、入力コントロールを拡大することでもあります。
Material３では、大型デバイスのサポートレベルを、３つに分けています。

・　Tier３（ベーシック） – 大画面に(一応)対応している
　　　マウスとスタイラス入力のサポートが含まれます。
・　Tier２（優良） – (ざっくりと)大画面向けに最適化されている　　　
・　Tier１（最高） – (個別に)大画面(毎にデバイスを意識、調査して)差別化されている

４．Navigation

ナビゲーションは、サイズの異なるさまざまなデバイスで作業する際に、ユニークな課題を引き起こす可能性があります。
一般的に、利用可能な画面スペースに応じて、BottomNavigationBarとNavigationRailを切り替えるべきです。

より詳しい情報（とそれに対応するサンプルコード）は、Developing Flutter apps for Large screens 参照。

５．参考（UIデザイン（大画面ギャラリー））

「UIデザイン（大画面ギャラリー）」には大画面における最適化されたUIデザインがギャラリーとして提供されています。（このURLは本来Android開発者向けサイトなのですが、docs.flutter.devでは、大画面レイアウトの部分を切り取って参考にする、という形式で紹介されています。）

（１）ソーシャルメディア

（２）メディア

（３）仕事効率化

（４）ショッピング

（５）読書

（６）想像力

（７）ゲーム

６．（参考）マテリアルデザイン３

ご周知の「マテリアルデザイン３」ですが、ここでも参照先として紹介されています（･･･ので、以下、レジュメになります。）

６-１．HOME

（１）News & launches

  1. △Material Design at Google I/O
  2. □How to get Google Fonts
  3. △Figma design kit

（２）Design system updates

（３）Resources

６-２．Get started

  1. What’s Material ?
  2. Using Material
  3. Design
  4. Develop

６-３．Develop

  1. Flutter
  2. Web
  3. Android

６-４．Foundations

  1. Accessibility
  2. Content design
  3. □Customizing Material（Figmaによるダイナミックカラー利用）
    • （研修）アプリでダイナミックカラーを可視化する
      • （資料）Visualizing dynamic color in your app with Material Design
      • （資料）Figmaコミュニティ内コンテンツ検索
      • デザイントークン（設定値ではなく UI 内の要素のカラーロールをデザイナーが割り当てることができる）
      • （資料）Material Theme Builder Figma プラグイン
        • デザインライブラリ
          • UIキット
            • Material3 Design Kit
            • Material Design Icons
              Google Fonts チームが管理する公式のマテリアル デザイン アイコン ステッカーシートです。マテリアル デザイン アイコンは 5 つのスタイルで利用できます。アイコンは、マテリアル デザイン ガイドラインのコア デザイン原則とメトリクスに基づいて作成されています。アイコンは誰でも無料で使用できます。Apache ライセンス バージョン 2.0 で利用できます。このファイルには、2000 を超えるマテリアル デザイン アイコンが、塗りつぶし、アウトライン、シャープ、丸み、ツートンの 5 つのバリエーションのコンポーネントとして構築されています。アイコンには fonts.google.com/iconsから直接アクセスできます。
          • ワイヤーフレーム
          • すべてのデザインライブラリ
        • デザインテンプレート
          • デスクトップアプリとWebサイト
          • モバイルアプリ
          • ポートフォリオテンプレート
          • 履歴書テンプレート
          • すべてのデザインテンプレート
        • アセット
          • イラスト
          • アイコン
          • シェイプとカラー
          • すべてのアセット
        • プラグイン
          • 編集とエフェクト
          • ファイル編成
          • 開発
          • ウィジェット
          • インポートとエクスポート
          • プロトタイピングとアニメーション
          • すべてのプラグイン
        • ホワイトボーディング
          • ブレインストーミング
          • ダイアグラム作成
          • 娯楽とゲーム
          • チームミーティング
          • 戦略策定
          • すべてのホワイトボーディング
        • プレゼンテーション
          • スタートアップのピッチ
          • プロダクトロードマップ
          • すべてのプレゼンテーション
  4. Design tokens
    • Overview
      ※VSCode拡張機能｢Adobe Xd｣：現在メンテナンス中(既存ユーザのみ使用可能)
      　現在はAdobe XDとVS Codeの統合機能を使うことは難しい状況です。AdobeはXDのサポートを続けるものの、将来的にはFigmaなど他のデザインツールへの移行が推奨されるケースも多いです。AdobeがFigmaの買収を試みたことからも、Adobe自身がこの分野での戦略を見直している可能性があります。　
    • How to read tokens
    • □How to use tokens
      • 詳細な手順あり
  5. Interaction states
    • Gestures
    • Inputs
      • Context menus (右クリックで表示されるメニュー )
    • Selection
      • 選択インジケータ）
        Cards, Checkboxes, Chips, Data tables, Icon buttons, List items, Menu items, Pickers, Radio buttons, Segmented buttons, Sliders, Switch
      • コンポーネント）
        Navigation bar, Navigation drawer, Navigation rail, Tabs
      • タッチ選択）
        長押し、２指選択、選択ショートカット（アバターのタップ、等）
      • より幅広い選択肢）
        ・長押しとドラッグの併用で項目を一括選択可能
    • States
  6. Layout
  7. Material A-Z
    • Banner
    • Button
    • Bottom app bar
    • Bottom sheet
    • Card
    • Checkbox
    • Chip
    • Color: Baseline scheme
    • Color: Dynamic color
    • Color: Extended color
    • Color: Key color
    • Color: Scheme
    • Color: Source color
    • Color: Tonal palette
    • Color: Tone
    • Color: User-generated schemes
    • Contrast
    • Customization
    • Dark theme
    • Data table
    • Date picker
    • Design attribute
    • Design guidelines
    • Design specs
    • Design System Package ( DSP )
    • Design tokens
    • Design tokens: Context
    • Design tokens: Role
    • Design tokens: Types
    • Design tokens: Value
    • Dialog
    • Divider
    • Element
    • Extended FAB
    • Floating action button ( FAB )
    • HCT
    • Image list
    • Libraries
    • List
    • Material Components
    • Material Design
    • Material Theming
    • Menu
    • Mode
    • Navigation bar
    • Navigation drawer
    • Navigation rail
    • Progress indicator
    • Radio button
    • Role
    • Side sheet
    • Slider
    • Snackbar
    • Style
    • Switch
    • Tab
    • Text field
    • Theme
    • Time pickker
    • Tooltip
    • Top app bar

６-５．Styles

  1. Color
    • Color system
      • Overview
      • How the system works( Material動的カラー機能の利用 )
        • 色ソースの設定：
          　シードカラーの設定
        • 静的または調和された色の追加：
          　シードカラーから生成された調和の取れた色がUI要素に追加される
        • どの要素にどの「番号」を割り当てるかを変更する：
          　各UI要素にどの色（番号）を適用するかを変更できる
    • Color roles
      • What are color roles ?
      • General concepts
      • Primary
      • Secondary
      • Tertiary
      • Error
      • Surface
      • Outline
      • Add-on color roles
    • Color schemes
      • Choosing a scheme
        • Static color
        • Dynamic color
      • Static
      • Dynamic
        • Choosing a source(ソースの選択)
          • ユーザが生成した色
            (ユーザー生成カラーは、 Android ユーザーの個人的な壁紙から取得されます。壁紙はデジタル分析され、単一の色がソースカラーとして選択され、トーンが選択され、各カラーロールに割り当てられます。)
          • コンテンツベースの色
          • 複数のカラーソース
        • User-generated source( ユーザ生成ソース )
          • ユーザー生成カラーは、 Android ユーザーの個人的な壁紙から取得されます。壁紙はデジタル分析され、単一の色がソースカラーとして選択され、トーンが選択され、各カラーロールに割り当てられます。
          • Material Theme Builder公式サイト
        • Content-based source( コンテンツベースのソース )
    • Advanced
      • Overview
        　デフォルトで提供されていない場所や方法で色を適用できます。
        • 複数のカラースキームを組み合わせる
          　ベースライン スキームと動的なコンテンツ ベースのスキームとを組み合わせるなど、同じアプリ エクスペリエンスで複数のカラー スキームを使用できます。
        • UI要素に色をマップまたは再マップする
          　コンポーネントのデフォルトの色マッピングを変更したり、独自のカスタムコンポーネントに色を適用したりできます。
      • Apply colors
      • Define new colors
      • Adjust existing colors
    • Color resources
  2. Elevation
  3. Icons
  4. Motion
  5. Shape
  6. Typography

６-６．Components

  1. Overview
  2. App bars
  3. Badges
  4. Buttons
  5. Cards
  6. Carousel
  7. Checkbox
  8. Chips
  9. Date pickers
  10. Dialogs
  11. Divider
  12. Lists
  13. Menus
  14. Navigation　※同じ画面上で以下を同時に使用してはいけない
    • Navigation bar(コンパクトなウィンドウ サイズ)
    • Navigation rail(中サイズおよび拡張ウィンドウ サイズ)
    • Navigation drawer(拡張、大、特大ウィンドウ サイズ)
      • Overview／Specs／Guidelines／Accessibility
        1. 標準(拡大、大、特大のウィンドウ サイズ)
        　・常に表示時：
        　　　宛先を頻繁に切り替える場合に最適
        　・メニュー アイコンをタップして開閉時：
        　　　画面のコンテンツに重点を置く場合に最適
        2. モーダル(中サイズおよびコンパクト サイズ)
        　※スクリムにより他のコンテンツをブロック可能
  15. Progress indicators
    　確定／不確定インジケータ
    　円形／直線
  16. Radio button
  17. Search
  18. Sheets
    • Bottom sheets (コンパクト・中サイズ)
      • Overview／Specs／Guidelines／Accessibility
        1. コンパクト・中サイズ
        2. 標準・モーダル
        3. 二次的な目的地でなければならない( メインは不可 )
        4. メインコンテンツ操作の為にBottom sheets は閉じることが可能
        5. ドラッグハンドルによるタッチターゲット確保
    • Side sheets
  19. Sliders
  20. Snackbar
    • Overview／Specs／Guidelines／Accessibility
      1. フォーカスを奪ってはいけない
      2. 自動消去後は元のフォーカスに戻す
      3. 処理後なら次のフォーカスに移す
  21. Switch
  22. Tabs
  23. Text fields
  24. Time pickers
  25. Tooltips

６-７．Blog

タグ: , , , , , ,

コメントを残す