海での集団泳に参加したことがあります。海で泳ぐことはプールで泳ぐのとは違った楽しさがあります。視覚的な美しさはもちろんですけれども、波の音、潮の香り……等々五感を刺激してくれるものに満ちていて、なんというか幸せな気持ちになってきます。
そうはいっても、最初は不安でいっぱいでした。プールのように静止した水ではなく、常に変化し続ける海で泳ぐこと、そこそこの距離を泳ぐこと、また足のつかないところで泳ぐことに対する不安もありました。それに加えてその日はちょっと天気の悪い日でしたので、打ち寄せる波がなかなか強くて、油断すると後ろに倒れそうになるほどでした。でもしばらく泳いでいるうちに、ライフセーバーの方たちが見守っていてくださるという安心感もあり、不安が薄らいできました。最初脅威に感じた波も、海岸から離れるにつれて、前から押し寄せるというよりも上下にうねる感じになってきたので、面白かったというとあれですけれども、あまり怖いという感じはしませんでした。足がつかないということに関しても、不安なのも最初だけで慣れちゃうんですよね。休憩の時に5mくらいの深さと教えられたのですけれども、海が濁っていて底が見えないのもあって、そんなにあるのかなぁ……という感じでした。
またこうした催しものに参加したいなと思いますが、今年はもちろんですけれども、来年以降もどうなるか分かりません。先の見えない状況に対して、不安とか焦りとかそういう感情がないといったら嘘になりますけど、でもこうした制約のある環境の中でも、むしろ制約があるからこそ、外側の事象に向かいがちな感覚を内側に向けて、自分自身を見つめ直す機会になるかもしれないと感じています。▲
長年慣れ親しんだフォームを変えるというのは、言うは易しですけれども結構大変なものです。その部分だけ変えればいいというのならまだしも、バランスが崩れたりリズムが狂ったりなど、どうしても他の部分にも影響が出てきます。そういう意味ですと、フォームの改善というのは、局所的なように見えても全体的な変化を促すものでありますし、たとえ小さな変化のように思えても、足し算というよりもかけ算のような変化を生じるものであると言えるかもしれません。
もう一つ心理的な抵抗もあります。どこかプライドのようなものがあるんでしょうね。さらにネットや本で仕入れた知識が邪魔をするというのもあります。最初は抵抗を感じながらも教えられたとおりに練習を続け、その泳ぎ方に慣れてくると、以前よりも気持ちよく泳げることに気がつきます。
指導の経験が豊富で、もっと広い世界のことを知っている指導者に比べたら、自分は井の中の蛙といったところかもしれません。もちろん自分で調べて考えるということも大切だと思いますけども、人から学ぶときはいったん自分の考えを横に置いて、虚心に学ぶ姿勢、素直さも大事だなと思います。▲
飽き性の自分がよく水泳を続けられているなと思うことがあります。たぶん性格に合っているというのもあるでしょうし、水の中という非日常的な空間というのも、魅力的なのかなと思います。水泳を続けていて感じるのは、小さな改善の積み重ねが大事ということです。
試合に出ようとかそういう気持ちはなく（もっとも性格的にも体力的にも無理だと思いますが）、どちらかというと楽しみのためにやっているので、たとえば、けのびの時に肘が曲がっているとその部分が抵抗になるよといわれても、そんな大きな違いはないだろうと思ってしまいがちです。でも、けのびの姿勢は水泳の基本中の基本ですから、すべての泳法に影響を及ぼすものです。ちょっとしたフォームの乱れでも、痛みとか故障の原因になったりすることもあります。
うまい人の泳ぎは、一目見て美しいと感じるものです。装飾的な美というよりも、無駄（抵抗）を廃した機能的な美という面が大きいと思います。速さを求めなくても、故障なく水泳を続けるため、楽に泳げるようになるため、そして美しいフォームを身につけるためにも、小さなこととゆるがせにしないで、改善に努めることが大事なのだと思います。▲
自室には音楽再生専用と化したRaspberry Pi3（ラズパイ）があります。これにWWWサーバーをインストールすればよいかと思い、Apache2をインストールしました。ところがここで問題が発生して、WindowsやPixel 3aからはラズパイのIPアドレスを指定してあげればちゃんと見えるのですが、iPhone 5sから接続できません。
Safariが原因かと思い、他のブラウザを試してみても見えません。IPアドレス直打ちなのでたぶんDNSは関係ない、ネットワーク（192.168.1.0/255.255.255.0）は同じなのでデフォルトゲートウェイとかの問題でもない……といろいろ悩み出して、ひょっとしてOSの設定で何かあるんじゃないかと思い、ホーム画面にある設定をタップして開きました。そのとき目に飛び込んできたのはWi-FiのGuestという文字でした。
知人が来たときに家の無線LANに接続することがあるのですが、これはそのときに用いるSSIDで、LAN内の他の子機には接続できないように設定してありました。なぜこのSSIDのネットワークを使っていたのかといいますと、どうせLANにはつながないからと思い、MACアドレスを調べることとアクセスポイントに登録することを横着していたからでした。MACアドレスフィルタリングという登録したMACアドレスを持つ機器以外からの接続要求をはじくための設定なのですが、数分で終わる作業をやらなかったばかりに、そしてそのことをすっかり忘れていたために、しなくてもいい苦労をしてしまいました。
無事にiPhone 5sでも見ることができてやれやれ……と安堵していると、ふと頭に思い浮かんだのは、VS Code+Preview on Web Serverが動いているWindowsのIPアドレス（とポート番号）を指定してあげれば、見えるんじゃないかということでした。結果はその通り、スマホからちゃんと見ることができました。ちょっと面白くて、スマホで表示したページをスクロールしたり、リンクをタップして遷移すると、Windowsのブラウザに表示されたページもそれに合わせて自動でスクロールしたり、ページが切り替わったりします（「戻る」とか「進む」ボタンによる遷移は追従してくれませんが）。Windows側で操作しても同じように、スマホのブラウザに表示されたページが切り替わりました。アイディア次第で、面白い使い方ができるかもしれませんね。▲
リンクを絶対パス（/style.css など）で記述しても、VS Codeの拡張機能である「Preview on Web Server」を使用すれば、ローカルな環境で確認できるようになったことを書きました。でもスマホからどのように見えるか確認できないなぁ……と思っていました。
ブラウザのFirefoxにはレスポンシブデザインモード（Ctrl+Shift+M)という、スマホやタブレットからどのような見た目になるか表示してくれる機能があります。縦向き（ポートレートモード）だけでなく、横向き（ランドスケープモード）にしたときの見え方も確認できます。実機（iPhone 5s）で確認したところ、縦向きは想定したとおりだったのですが、横向きにしたときに文字が拡大されて表示されるという現象がおきました。これは仕様だそうで、スタイルシートに一部追記（-webkit-text-size-adjust: 100%;）したところ、文字のサイズが変わらずに表示されるようになりました。
レスポンシブデザインモードは便利な機能ですが、必ずしもすべての挙動を再現してくれるわけではないようです。ちゃんと実機でも確認することの大切さを感じました。▲
| 機器名 | 画面サイズ | ピクセル密度 | 目からの距離 |
|---|---|---|---|
| Pixel 3a | 5.6インチ | 441ppi | 19cm |
| iPhone 5s | 4インチ | 326ppi | 25cm |
| Kindle Paperwhite | 6インチ | 300ppi | 28cm |
| iPad Air3 | 10.5インチ | 265ppi | 31cm |
| Nintendo Switch | 6.2インチ | 237ppi | 35cm |
| Fire 7 | 7インチ | 170ppi | 49cm |
| ThinkPad | 14インチ | 157ppi | 53cm |
| FS2333 | 23インチ | 96ppi | 86cm |
| 液晶テレビ | 32インチ | 49ppi | 169cm |
※Kindle Paperwhiteは第10世代、Switchは旧モデル、Fire 7は第7世代です
目からの距離は、これ以上離れて見ればきれいに見えるという一つの目安です。PPDは 2dr * tan (0.5∘) で、r（PPI）は (縦の解像度)/(画面の高さ) で求まりますから
PPD = 2d * ((縦の解像度)/(画面の高さ)) * tan (0.5∘)
となります。ここでPPD=57とすると、dの値はおよそ 3266 * (画面の高さ)/(縦の解像度) となります。
FullHD（1920×1080）の時について考えてみると、距離dは 3266 * (画面の高さ)/1080 ≒ 3 * (画面の高さ) となります。視聴距離は画面の高さの3倍というわけですね（縦長にディスプレイを設置した場合は、画面の高さの1.7倍となります）。4K（3840×2160）の場合は解像度が2倍になりますから、画面の高さの1.5倍になります。ただ、近くによってもきれいに見えるという話なので、その距離まで近づいて見なければならないわけではないですし、また実際の見やすさは別の話だと思います。▲
英語が苦手なので間違っていたら申し訳ないのですが、こちらのサイトによると、30cm300ppiという数字は、iPhone 4発表時のRetina displayの説明に出てきたもののようですね。Retina displayは、端末と目との距離が10～12インチ（25～30cm）のとき、およそ300ppi必要であると。もう一つRetina displayを説明する方法としてPPD（pixels-per-degree）という単位があり、57ppdから始まるとされているようです。
PPDは 2dr * tan (0.5∘) という式によって計算できるそうで、dは画面からの距離、rはPPIの値です。実際、PPD=57、r=300ppiとして計算してみると、d=10.8859……という数字が出てきます。「あれっ、30cmにならない……」とちょっと不安になりながら考えていると、そもそも単位が違うんですよね。PPIはpixels-per-inchですから、インチ→cmに直してあげると、d=27.65……となり、10～12インチ（25～30cm）の範囲におさまる値となりました。▲
| 機器名 | 画面サイズ | 解像度 | ピクセル密度 |
|---|---|---|---|
| Pixel 3a | 5.6インチ | 1080×2220 | 441ppi |
| iPhone 5s | 4インチ | 640×1136 | 326ppi |
| Kindle Paperwhite | 6インチ | 1072×1448 | 300ppi |
| iPad Air3 | 10.5インチ | 1668×2224 | 265ppi |
| Nintendo Switch | 6.2インチ | 1280×720 | 237ppi |
| Fire 7 | 7インチ | 1024×600 | 170ppi |
| ThinkPad | 14インチ | 1920×1080 | 157ppi |
| FS2333 | 23インチ | 1920×1080 | 96ppi |
| 液晶テレビ | 32インチ | 1366×768 | 49ppi |
※Kindle Paperwhiteは第10世代、Switchは旧モデル、Fire 7は第7世代です
すべてではありませんが、家にある電子機器の画面サイズ（インチ）、解像度（ピクセル）、ppiの値です。例にあげた数が少ないのでなんとも言えませんけれども、ただ画面から目までの距離が短くなる機器ほど、ppiの値が高くなる傾向があるような印象を受けます。Kindle Paperwhiteがほぼ300ppiというのは、狙ったようで面白いですね。それにしてもノートパソコン（ThinkPad）より、ずっと小さな画面のスマホ（Pixel 3a）の方が高解像度というのは、ちょっとびっくりです。
数字だけ見ると液晶テレビのppiちょっと低いのでは？ と感じますが、離れてみるので（＋近眼でいい具合にボヤけるので）気にならないですね。でも、もう10年以上使っているので、さすがに液晶テレビを買い換えたいと思っています。本当は去年に買い換える予定だったんですけど、ズルズルきちゃいました。わりと衛星放送は見ますし、またBS1とBSプレミアムが統合されて、BS4KとBS8K放送の3波になるという話が出ているそうですから、今から買い換えるとしたら4K（3840×2160）対応のテレビ……なんでしょうかね。▲
液晶画面のサイズも大きくなるのならともかく、サイズが同じままで解像度が上がっていくのは、より精細な表示ができるからなんでしょうね。ノートパソコンの液晶パネルの交換を通して、そのことはよく分かりましたし、この次にThinkPadを買うときはWQHD（2560×1440）にしようと決めています。計算上は拡大率を200%に設定すれば、見た目の解像度が1280×720になるので、今と大きく変わることはないはず……と思っています。
画面の精細さをあらわす単位としてppi（Pixels per inch）というのがあり、1インチあたりのピクセルの数を表現したものだそうです。たとえば14インチ、FHD（1920×1080）の場合ですと、14インチというのは画面の対角線の長さですから、横のサイズをXインチ、縦をYインチとすると、142 = X2 + Y2（三平方の定理）となります。またXとYの比は解像度の比と等しいとみなすと、X : Y = 1920 : 1080となります。これから横のサイズXはおよそ12.2インチ、縦のサイズYは6.9インチとなります。ppiは1インチあたりのピクセル数ですから、横、縦のサイズそれぞれについて求めてみると、両方ともおよそ157ppiとなります。この数字が大きければ大きいほど、1インチあたりのピクセル数が多いということですから、より高精細な画面ということができるわけですね。
ただ肉眼には限界があって、ある数値以上になると見分けがつかなくなるそうです（一説には30cmで300ppiとも）。画面に近寄れば近寄るほど小さな粗が気になり、逆に離れて見れば気にならなくなるように、見る距離によってもその値が変わってくるそうです。▲
iPhoneの使い方を知っておきたいと思い、中古で購入したiPhone 5sがあります。この機種の解像度が640×1136で、またこのサイトの横幅（width）を640pxで指定していたので、横向き（ランドスケープモード）はもちろん、縦向き（ポートレートモード）でもギリギリ大丈夫と思っていました。ところが実際に見てみると、縦も横向きも、横にスクロールしないと読めない状態でした。なぜだろう？ と思って調べると、論理解像度（またはCSS解像度）と呼ばれるものがあり、iPhone 5sの場合それが320×568だからなんだそうです。
最近ThinkPadの液晶パネルをFWXGA（1366×768）からFHD（1920×1080）に交換したことを書きました。画面サイズ（インチ）が同じなので、解像度が大きくなると字とか小さくなって読みにくくなってしまいます。そこで、ディスプレイの表示を拡大縮小して表示する機能（スケーリング）を利用します。自分の環境ですと、Windowsがその値を自動で決定してくれて、150%になっていました。物理的な液晶の解像度は1920×1080ですけれども、見た目は1280×720相当の解像度になるということなんですね。
iPhone 5sの2つの解像度の存在もこれと同じようなものだと考えると、拡大率は200%ということになります。メインで使っているスマホのPixel 3aは、解像度が1080×2220、論理解像度は393×808ですので、拡大率はおよそ275%となります。▲
絶対パスの /index.html という書き方ですと、環境次第かもしれませんが、そのままローカルで確認することができません。たとえばWindowsで、ユーザーフォルダのドキュメント以下に www というフォルダ（C:\Users\<ユーザー名>\Documents\www\）を作成して、そこに index.html と絶対パス（/style.css）で指定したCSSファイルを入れてブラウザ（Firefox）で開いても反映されません。ソースで確認してみると、CSSファイルのアドレスが file:///C:/Users/<ユーザー名>/Documents/www/style.css ではなく file:///style.css になっているみたいなんですね。この場合、ブラウザが判別するドメイン？ に相当する部分が file:/// ということなのかもしれません（/C:/Users/<ユーザー名>/Documents/www/style.css のように指定したらちゃんと読み込まれました）
/index.html や /style.css のような書き方で、ローカルで確認するにはどうすればよいかという話になりますが、ひょっとしたらもっと簡単な方法があるかもしれませんけど、WWWサーバーを立てるという方法をとりました。C:\Users\<ユーザー名>\Documents\www\ をドキュメントルート（WEB公開用の仮想的なルート）にするということですね。もちろんサーバーといっても本格的なものでなくて簡易的なものですし、さらに言えばVS Codeの拡張機能として提供されているものです。本当にVS Codeはいろいろなことができますね。もちろんそれらの拡張機能を作ってくださる人のおかげであることは言うまでもありません。
今回、利用したのは「Preview on Web Server」という拡張機能です。かんたんな使い方としては、ファイルを開いている状態で右クリック＞vscode-preview-server: サイドパネルでプレビュー表示（Ctrl+Shift+V）もしくは vscode-preview-server: ブラウザーで起動（Ctrl+Shift+L）を選ぶだけです。サーバーの機能を停止するには、表示＞コマンドパレット（Ctrl+Shift+P) で vscode-preview-server: Webサーバーを停止（Ctrl+shift+S）を選びます。
VS Codeのエクスプローラー（Ctrl+Shift+E）に表示されるワークスペースに登録されているフォルダがドキュメントルートになるようですので、そのフォルダ（サブフォルダ含む）以外に存在するファイルを開こうとすると、Cannot GET～と表示されてエラーになります。またデフォルトのポート番号が8080番ですので、他のサービスで利用している場合は変更する必要があります（拡張機能の設定にある Preview Server:Port で変更します）
WWWサーバーとしての機能はもちろんですけれども、VS Codeで変更を加えてセーブをすると、サイドパネルのプレビュー表示はもちろん、ブラウザも自動的にリロードしてくれるので、とても便利です。▲
こうやってサイトを作っていると、まだまだ知らないことがたくさんあるんだなということを思い知らされます。その一つに絶対パスと相対パスがあります。絶対パスというと https://www.example.com/index.html という書き方しか知らなかったのですけど、単に /index.html と書いてもいいんですね。サーバーのドメインやアドレスに応じて、適宜置き換えてくれるようです。自分が知らないだけで、昔からあった書き方だったのでしょうか。
以前のような絶対パスの書き方、例えばローカルに index.html があって、スタイルシートを https://www.example.com/style.css のように指定していると、CSSファイルをサーバーにアップロードしないとどのような表示になるか確認できません。これが相対パス（style.css や ./style.css など）で指定してあれば、アップロードしなくてもローカルな環境で確認することができます。index.htmlの置いてある場所（ディレクトリ）が変わるとパスを書き換えなければなりませんが、ローカルな環境でチェックできる利点の方が上回る（と感じられた）ので、一部のファイル（例えばURLが一定でないエラー表示用など）を除いて、これまで相対パスで指定していました。▲
でもそうやって個人でホームページを作る時代は終わったとは言いませんけれども、もう下火なんだろうなとは感じます。ネットの世界も専門・分業化していって、好事家が趣味として関わる時代から、それを生業とする人が作ったサービス・コンテンツを利用する時代になったのかなと思います。
そもそもこのサイトにしても、MarkdownやPandocといった他の人が作ってくださった成果物の上に成り立っているわけですしね。さすがにもう昔のようにメモ帳でタグ打ちして、一から作ろうという気力はないです。気力もないですし、また続かないと思います。この点に関して言えば、今も昔も変わらないですね。
そういえば、あれだけあった個人サイトも、1年後も継続して更新し続けられたサイトは、どれだけあったのでしょうか。自分もいくつかサイトを作りましたが、1年後も続けていたのは“0”です。▲