スマホ対応の進化
TOP ページの写真ギャラリーのバージョンアップを完了した。これまでは、"とりあえずスマホでも写真が見れる"ことを目標としてきたが、スマホが生活の中に浸透するに従って、もはやそのレベルでは物足りなさを感じざるを得なくなった。
今回のバージョンアップはスマホ対応の進化が目的で、ここ数年間で取得した javascript の使い方を積極的に実装することで、いままで諦めていた部分を丁寧に埋め、スマホで写真を十分に鑑賞できるようにすることができた。
具体的な改善目標は次の点。
・狭い画面を最大限に使いきるためのデザインの見直し
・画面回転への対応
・画面切り替え時の表示の乱れ対策
これらのテーマに対応する技術は速いテンポで進化中で、旧機種への対応をどこまで視野に入れるかによって使える技術が制限される。今回のバージョンアップにおいて、検討した事項を順に記載していきたい。
(1) 画面デザイン（スマホ縦、スマホ横、PC、タブレットに対する CSS の対応）
(2) FLEX と GRID レイアウトの使い分け
(3) 写真のフレーム（枠）の扱い
(4) ブラウザの仕様（アドレスバー）の理解
(5) 画面回転の検知方法
(6) 画面表示乱れ対策
画面デザイン
画面のデザインについては次のテーマについて検討した。
・写真を表示するときは、PC、タブレット、スマホとも、画面からはみ出すことなく、１画面の中に写真全体を表示しなければならない。これは鑑賞に必要な必須条件といえる。文章であればスクロールしてみれば良いのだが、写真はそうはいかない。
・最近のスマホの画面の縦横比、すなわちアスペクト比は、縦サイズ／横サイズで数値化すると、1.78 ～ 2.33 の範囲が多いようで、それに対して写真のサイズにおけるアスペクト比は 1.25 ～ 1.5 程度であり、あきらかにスマホの方が大きい。これは、スマホを横回転(すなわち横長)にした状態で、写真をはみ出すことなく表示するときに、縦方向がクリチカルであることを意味する。つまり、写真を少しでも大きく表示するためには、縦方向の余分な隙間を徹底して削る必要がある。そこから次の方針が決まった。
－上下の余白を徹底して削り、写真のフレームを画面の上下に密着させる。
－タイトル、ナビゲーションアイコン、撮影データなどの付帯情報は写真の上下ではなく、左右に配置する。これはスマホ横画面のみ採用するデザインとなる。
－ナビゲーションの位置は、操作性を確保するため、写真が変わっても基本的に画面の同じ位置に表示する。また、 PC の場合はマウスポインタ、スマホの場合は指となるため、むしろスマホ用のナビゲーションアイコンは大きめにする必要がある。
FLEX と GRID レイアウトの使い分け
・HTML ソースを PC 用に記述し、それをタブレット・スマホで共用することとした。そして、デザイン変更は基本的に CSS によることとし、一部 javascript による動的なカスタマイズを加えた。
・PC 用の CSS は FLEX、スマホ用は Grid レイアウトを採用することとした。ソースの記述順にそのまま流し込むには FLEX が適しており、配置を大きく変えるためには GRID の方が適している。同一のレイアウト手法の方が単純化されて良いとは思うが、記述量の少ない FLEX をベースに採用し、大きくレイアウトを変更する部分で GRID を使用するという役割分担で、全体としての"分かり易さ"を重視することとした。
・CSS の構成は、①タブレット・スマホ縦画面用、②スマホ横画面用、③PC 画面用の別々の外部ファィルとし、HTML の header の中で javascript によって CSS フィルへのリンクを切り替える構造とした。@media による重層的な構造を採用したくなるところだが、ファイルの数が増えても、仕組みを単純化し、ソースの可読性と理解し易さを優先することとした。
－HTMLのheaderの中でCSSを切り替える方法(PDF)
・複雑なボックス構造を考える時は正確性と保守性を確保するため、構造図を書くようにしている。そこにCSSの主要な記述を付記するとさらに理解しやすくなる。（別ページで開きます）
－デバイスがPCまたはタブレットの場合のボックス構造図(PDF)
写真のフレーム
・写真のフレームには写真の背景と写真の境界を明確にするという目的がある。例えば、背景が白色の額縁に冬の雪の場面の写真を収めると、境界がわかりずらくなってしまう。また、写真を鑑賞するときに色のバイアスを与えないようにするため、フレームはグレー色としたい。その濃度は個々の写真によって異なることから、CSS で統一的に設定するだけでは不完全で、最終的には個別の HTML において、インライン CSS によって指定できるようにする必要がある。
・フレームのサイズについては、標準的なサイズはないようだが、スマホ横画面にあっては1ピクセルでも節約したいところで、ぎりぎりのところを見極めて設定することとした。
ブラウザの仕様
・スマホ横画面においては、１ピクセルでも切り詰めたいところ、ブラウザのアドレスバーが結構な縦幅を占有している。この部分を開放できれば、写真の表示サイズはぐんと大きくなる。
・アドレスバーを開放する方法については、自動スクロールなどいくつかの方法を試行してみたが、結局、現状において有効な方法は見つけられなかった。以前は使えた方法がブラウザのバージョンアップによって使えなくなったということもあるようだ。残念だが、スマホの活躍の場を広げるために極めて重要なポイントだけにブラウザの機能や CSS の標準化の今後の動向を注視し、機会があったら再トライしたい。
画面回転の検知方法
・スマホの縦横画面切り替えを検知する方法については、orientationchange イベントを使用し、タブレットに関してはPC同様 window.onresize イベントを使用した。
画面表示乱れ対策
・画面まわりの設定や設定変更に際して、瞬間ではあるが表示が乱れることになる。具体的には、次のケースが該当する。
－ソースのローディング完了後にデバイスの種類に対応する CSS に切り替えるとき。
－スマホやタブレットの縦横回転などによる再表示の際に、各ボックスを最適配置するための再計算と計算結果の設定を行うが、その際のタイムラグで画面の表示が乱れる。
－PCにおいては windows.onresize イベントが連続して発生し、いわゆるチャタリング状態になることを避けるためにタイムラグを設定するが、それが画面表示に一息つくようなつまづき感を発生させる。
・これらの不規則な画面の乱れを解消するために、最初から画面全体を非表示（visibility:hidden）に設定しておいて、すべての設定処理が完了してから画面を表示するようにした。
ソースの代わりに
・javascriptのソースの代わりに、プログラムをほぼ１ステップ対応で記述したフローチャートを掲載したい。プログラム用のフローチャートは作成に手間がかかるため、時代遅れという認識もあるかと思うが、全体を俯瞰し、部分と全体の関係を把握するには効率的なツールと思う。