個別の写真を表示するページについて、デザインの見直しを行った。@mediaによるスクリーンサイズに対応したCSS切り替えから、ブラウザ表示領域と写真のアスペクト比を根拠として２つのタイプのデザインを切り替えて使用することとした。これにより、PCディスプレイ、タブレット、スマホについて縦画面も横画面も最適なデザインを適用できるようになった。

新しい写真表示ページのデザインを進める中で、一部詳細設計に入った部分があり、javascriptの処理フローを書き始めた。
そこで気づいたのだが、自分はいまだに変数定義にvarを多用している。この際、新しい仕様であるletを使った記述に改めようという気になった。その場限りで適当に使い散らすのではなく、全体を通して節度ある行儀のよい使い方に改めようという考え方だ。

しかし、ここで一つ問題がある。実は今までletを使ってこなかった理由のひとつなのだが、スコープの定義にいまひとつ不安がある。スコープチェーンの部分だ。
letはブロックスコープなので、ブロックがネストになっている場合は、
・親ブロックで定義したlet変数は子ブロックで参照できる。
・子ブロックで定義したlet変数は親ブロックで参照できない。

ここまでは、どこにでも書いてあるいわば基本中の基本。しかし、
・親ブロックで定義したlet変数を子ブロックで更新し、それを後で親ブロックから参照できる。

といった記述はなかなか見つからない。
(そんなこと当たり前だろうという声が聴こえる)

親ブロックでlet変数を定義した場合、
let変数はブロックスコープで、子ブロックも親ブロックの一部
なので、
親ブロックから見た場合、子ブロックの中は透けて見える
なので、子ブロックで更新したものは当然に親ブロックからも見える。

と、ここまでくどくど書いたものを「let変数はブロックスコープ」の一言で理解しなければならないのだ。
国語的にも良く考えれば、当然なのだが、老化した頭ではピンとこない。
テストプログラムを書いて、結果を確認してようやく自信が持てた。

来週、病院だが、どうやら聴力はいつまでもつかわからない状況になってきた。
耳がダメになると、他の感覚にも影響が出るのだろう。
時間はあまりなくなってきた。

@mediaによる単純なCSSの切り替えから、より柔軟で正確なレスポンシブ機能を持ったページに進化させたいと、ここひと月ほど取り組んでいるのだが、一進一退でなかなかゴールが見えてこない。
デバイスのスクリーンの絶対的なサイズの違いもあるが、縦長画面と横長画面に分類し、そこに縦長写真と横長写真を表示する。組み合わせとしては４つの類型になる。
しかし、そこから始めると間口が広すぎるので、まずは二つの累計、すなわちスクリーンの縦長と横長の２つのパターンからスタートし、それぞれの処理において縦長写真と横長写真をレイアウトしていく考え方とした。
写真はどのような場合も縮小表示はしても決して拡大表示はしない。
サイズは最大でもfullHD1920*1080を限界としたい。縦画面では1080×1920となる。
写真はスクリーンのサイズに応じて縮小表示するが、タイトルや説明文、ページ切り替えアイコンなど、固定サイズの要素もあり、サイズ可変要素とサイズ固定要素が合体したブロックをスクリーンの形状に合わせてどのように配置するか．．．
これが意外に難しいテーマだった。
関数式で表現しようとしたが、あまりにも正攻法すぎて収集がつかなくなりかけたので、方針転換、職人技的な経験に基づくロジックの構想で対応することとした。
まずは出来上がりのコンテンツ全体のサイズとして縦辺と横辺でどちらが先にスクリーンサイズの限界値に達するか、すなわちクリチカルな要素は縦方向か横方向かを識別することで、そこを突破口にすることとした。
クリチカルな辺の要素のCSSを設定し、そこから他の辺のCSS値を算出するという手順だ。結果、限界値をオーバーした場合はその辺のサイズを限界値に合わせて、そこから元の辺に戻って再設定するという手順だ。
スマホ・タブレットの操作性を考慮してアイコン類は下段に配置するが、その位置は固定したい。しかし写真のサイズが変わると、アイコンと写真の位置関係が微妙にずれてしまうため、アスペクト比2:3の仮想的なボックス(pseudo_mount)を採用し、写真をそのボックスの中に中央配置して、写真を切り替えても目線の中心点は移動しないようにしたい。
右利きと左利きに対応するためのデザインの切り替えなど、まだまだ、採用したいデザイン要素はあるのだが。ここまでで中核部分はクリアできると思っている。
パソコン、タブレット、スマホというデバイスを意識するのではなく、どのようなアスペクト比の画面であっても、どのようなサイズの画面であっても、最適かつ操作性の良い画面を一貫性をもって表示できるようにしたいのだ。登山でいうとまだ４合目くらいだろうか。
ただ、基本デザインを突破できる光が見えてきたような気がしている。