スマホ対応 レスポンシブ レイアウト　その②

POINTこちらの記事はQiita記事のリライト版です。

はじめに

こんにちわ。ヨウセイです。本記事は以前Qiitaに投稿したものを最近のアップデートや追加のTipsなどを加えリライトした記事になります。
※重複している箇所がありますがご容赦ください。

今回は以前に自社アプリをレスポンシブレイアウトでモバイル対応した際の実装をベースに、レスポンシブレイアウトについての情報やTipsなどを掲載しています。
その①ではWeb版とモバイル版を作るパターンやレスポンシブの概要、導入部分を掲載しました。
その②では実際にモバイル版画面を作成する部分を掲載します。
前回の記事はこちら

実装サンプル

モバイル用画面のレイアウト調整

TIPS現在は編集画面のプレビューでタブレット、モバイルのプレビューができるようになったので、楽に状態の確認ができるようになり、かなり便利になりました！
作成中はプレビューで確認し、ポイントポイントで公開、実機で確認を行うのが良いと思います。

モバイル用画面の調整ですが、基本は以下の流れです。

• 1. 編集しやすいように画面の幅をいったん320くらいにしておく
  2. Web版から各種コントロールを一気にコピペする
  3. コンテナや各種コントロールの位置や幅などを調整する（レスポンシブに）
  4. 必要に応じてスマホ用にコントロールの見た目や位置を変更する
  5. 必要に応じてスマホ用に不要な処理を削除したり追加したり調整する

順に解説していきます。

① 画面の幅をいったん320くらいに

そのままやるとPC画面幅の表示になってるのでイメージつかみずらいため。完了後に戻す感じです。
※320のままだともっと表示できるスマホで右に隙間ができるのでダサいので後でMax(App.Width, App.MinScreenWidth)にします。

② Web版から各種コントロールを一気にコピペ

基本はWeb版につくったものをコピーして張りつけます。
その後にコンテナーや各コントロールなどの位置（主にX）と幅を調整していきます。

③ コンテナや各種コントロールを調整（レスポンシブ）

例：PC版ではギャラリーが左にあり右エリアに詳細画面となっていた。
スマホ版ではギャラリー部分のコンテナーの幅を以下のように調整して詳細開いた場合は幅0にし、詳細画面のコンテナは親からギャラリー部分コンテナーの幅を引いたサイズにする
使っている変数DetailShowは新規ボタンやレコード選択時にTrueにし、戻るや保存時にFlaseにする
→こうするとギャラリーと詳細画面の表示切替ができます。

・ギャラリー配置コンテナーの幅

・詳細画面エリア配置コンテナーの幅


・新規ボタンやレコード選択で詳細画面のみ表示となる

X、Widthの調整ポイント

TIPS各コントロールのX座標と幅はParent.WidthやSelfなどを使って相対的な値にします（固定値にしない）
真ん中や右からどれくらいか、他コントロールと相対的な位置にするなど

Xの定義例：
真ん中　Parent.Width/2 – Self.Width/2
右端から30px前　Parent.Width- Self.Width – 30
右にあるコントロールから20px前　右コントロール.X – Self.Width- 20

フォームのカラム落ち

TIPSフォームは実はレスポンシブ対応そのまましてくれます。フォームに指定のカード幅が画面サイズに足りなければカラム落ちして表示されます。想定する幅に合わせて事前にカードサイズを調整しておけば大体いけます。

・幅400の場合

・320の場合

④ コントロールの見た目や位置を変更

スマホで操作しやすい位置や大きさに調整します。
・Web版では上部に表示していた経費合計部分は下に持ってきて、定期代、交通費は丸ボタンで”定”、”交”で表す
・操作エリアは上部でなく基本下に配置する。
最近はおっきなスマホが多いですし下にあるほうが操作しやすいですよね。本来は削除ボタンは押し間違えのないように上部に移動させたほうがよいですね。

・Web版とスマホ版の比較

⑤ 不要な処理の削除や追加

本当はデータテーブル部分もギャラリーに変更しようと思っていましたが、今回のケースでは意外にそのままでも悪くなかったのでそのままにしました。

TIPS・収まらない場合は横スクロールできるのでスライドで見れる
・列の幅も列の際をうまくつかめば広げて表示することができる

明細の修正画面はダイアログ表示 →基本そのままで幅、位置の調整くらいで済んだ

その他調整

NOTE添付ファイルコントロールでの表示がTeams版だと画面表示となるが前画面に戻ることができない事象を確認。

スマホアプリ版だとDLするかなどの表示となるのですが、Teams版の仕様（不具合？）なのか、画面一杯に表示されて、前の画面には戻るアイコンなどなし、戻ろうとするとアプリを再度開く挙動となる。。
しょうがないので、編集時は注意する運用でカバー、閲覧時は添付ファイルコントロールを非表示にして名前とプレビュー表示、ボタンで大きく表示する機能を追加しました。

という感じで調整して、適宜実機で状態を見つつ完了です。
実機やプレビューで見ると幅が広がっていない、位置がおかしいという点に気づきやすいです（レスポンシブにした後に触ったら固定値になってたりするので）
今回は思ったほど調整箇所がなかったので数時間で完了しました。

おわりに

以前にDataVerse for Teams版アプリをレスポンシブ（PCとモバイル2画面作成）した際の記事でした。
最近は自動生成アプリでもレスポンシブで1画面でアプリが出来るようになっています。PCとモバイルで大きく違いがない場合はこういったテンプレートをベースにレスポンシブアプリを作ってみるのもよいかと思います。
また、先日作成したスロットゲームアプリではレスポンシブではなく、普通に1アプリで2画面を作りメニューで切り替える方式で作成もしました。PC版、モバイル版を作成する場合でも色々なパターンで作れるので、要件やニーズ、状況に合わせてチョイスするのが良いと思います。それでは。