なぜ左利き対応デザインが必要か
ページをめくるときにクリック／タップするアイコンは、マウスで操作する場合には、画面のどの位置にあっても特に問題はないと思う。しかし、スマホの場合、タップするとき指で画面が覆われて見えなくなる。これは煩わしい。なので、右手の人差し指で操作するのであればアイコンは画面の右下隅というのが合理的ではないだろうか。そう考えると、左利きの人、あるいは右利きでも都合で左手で操作したい人にとっては、左下隅ということになり、そこで、右手／左手の切り替えの機能があれば便利ということになると思う。これが今回の改修の動機になった。
右利き・左利きの意思表示
統計によると左利きの人は約10%とのことで、デフォルトは右利きにするとして、"左手で操作したい"という意思表示とその記憶をどのようにするかを最初に考えなければならない。
各画面の中に「右・左」切り替えのアイコンを配置すれば分かり易いのだが、事情があってそれはしたくない。事情というのは、写真表示の画面がそれぞれ１枚の完結したHTMLページになっていて、全体でおよそ1000枚になる。その全部を修正する作業は大変なボリュームになる。修正するとしてもソースの修正範囲を極力限定し、同じ記述を同じ場所に追加・置き換えするようにすれば、エディタの機能をフルに活用して作業を効率化できるのだが、今回はそれをしないこととした。
もっと早い時期から、フォトビューワとしての位置づけを明確にし、１つのページに写真のアドレスと必要な付加情報を渡す形でサイトを作り上げれば、データベースとの連携も視野に入り、いろいろな切り口から"ブック"的な構成も可能だったのだが、ページを単純にコピーして必要な部分だけ書き換えるという簡単さにかまけてしまったということなのだ。まあ、ここまで大きくなると考えていなかったこともある。
さて、それではどうするか、そもそも左右利き手の切り替えはそう頻繁に行うことではない。そう考えると、切り替えアイコンが常に表示されていること自体に煩わしさを感じてしまうのではないか、と考え、トップページに「設定」アイコンを追加して、そこから左右利き手の設定を行うページに入る形とした。
利き手登録の方法
利き手を登録するページは一般的なラジオボタン形式で、選択して設定ボタンをクリックする形とした。
利き手の登録は個人を認識して登録するほどのものではないため、ログインやクッキーを使うような本格的な仕組みは必要なく、タブを閉じれば消滅して良いものなので、結局sessionStorageを使うことにした。
最近のブラウザでは問題な使用できるのだろうが、WebStorage の使用可否に加えてsessionStorageの使用可否を確認し、かつエラー処理もぬかりなく行い、問題があれば、右利きオンリーで機能するように安全性を優先した。
左利きデザイン
左利きデザインは基本的には右利きデザインを左右対称に入れ替えるだけで良いと思っていたのだが、よく考えたみるとそうもいかない部分が見えてきた。
写真のサイズに色々なバリエーションがあり、写真全体を包含するボックスの配置を優先したうえで、個々の写真によって重心位置が移動しないようにしている。そのため、写真の左端が移動し、写真と適切な隙間をとって配置しているタイトル文の位置にも影響が及ぶこととなる。
写真ページ１枚ごとにCSSで細部の設定を行えば問題のないことであるが、個々の写真の事情はイメージデータのURLと、タイトル、撮影データのみで、その他の部分のHTMLは全ページ共通になっている。さらに、レスポンシブ前提のページ作りのため、共通化・標準化されたロジックによって位置決めしなければならない。
基本的にはGridやFlexによってレイアウトするのであるが、ひとつ困難な条件がある。
・写真はタイトルの位置にかかわらず独自の基準で水平位置決めされる。
・タイトルは文字数、行数とも可変で左詰めで記述
・タイトルボックスの水平位置を調整して写真との距離感を制御する
この制御を行うためには、そもそもタイトルの幅(width)が決まっていなければならない。しかし、gridの子要素は親要素で決められた幅の制約は受けるものの、子要素自体のwidth属性は初期値autoのままで、javascriptでwidth値を取得すると親要素によって与えられた幅の数値が返ってくる。これでは子要素の左右位置をmargin-left等で制御することができない。
子要素(タイトル)の実態としての幅の取得が必要で、それが取得できなければ、タイトルと写真の左右位置調整はできないことになる。
これを無理やりやろうとすれば、タイトルの文字数からwidth値を算出する方法もあるかもしれないが、明示的な改行だけではなくて英単語などの自動折り返しなどの行末処理もあり、そこまでプログラムで追従できるかと言われるととても自信が持てない。
色々と試行錯誤しているうち、自動折り返しがなければ子要素にjustify-selfを指定すると子要素に実態としてのwidth値が発生することが分かった。意図的に改行を指定して複数行になった場合も実態としてのwidth値が発生する。タイトルはCSS上は固定幅なので、自動改行とならないように行幅を意識して必要の都度改行を指定すれば問題ない。
フォントは最終的にはブラウザ任せになるので、余裕を持った文字数制限を運用上の注意事項として意識すれば良いと思う。
デザインの種類
処理の構成をシンプルにするため、左利き、右利き、縦画面、横画面の組み合わせで、計４つのデザインとし、それぞれに専用のCSSを用意した。HTMLは各デザインに共通。左利き、右利きの違いはjavascriptでcssを動的に修正すれば、実現可能とは思うが、処理が複雑になって、後日思い出すことが困難になってしまう。ここは、ソースの量が増えても分かり易く単純な構成の方が良いと考えた。
処理フロー
３月に掲載したフローもかなりの部分が更新されているので、ここで改めて最新版として掲載しておく。あくまでも自分の備忘録なので内容は保障しかねる。