半月前から行ってきた、ウェブサイトの改良の作業。
それが一段落したので、報告する記事の第二弾です。
「村本尚立のウェブサイト」がスタートしたのは、２０１２年６月でした。
当時は、インターネットに接続するのに、まだパソコンが半分くらいを占めてました。
もうスマホは登場してましたが、まだまだ携帯電話を使う方が沢山いたし、スマホの性能から考えても、パソコン経由でネット記事を見るほうが安定してました。
このサイトは、立ち上げてから５年くらいは、パソコン向けにサイトを作っていたのもあり、グーグル検索で訪れる方の４～５割がパソコン使用者でした。
ところが、２０１７年くらいだったと思うのですが、一気にスマホ使用者の訪問の割合が増え始めました。
スマホがそれだけ普及したからなのですが、サイトをスマホ対応にしていないので、見るのが大変だろうし、一時的な現象だろうと思ってました。
私は、どうもスマホが好きになれないのです。
だから持つ気はないし、スマホでこのサイトを見る人々をずっと軽視してました。
「このサイトは文章のみの固い内容だが、長文をスマホで見るのはキツイ。
スマホは文字を沢山読んでいくのに適した道具ではない。
つまるところ、スマホで見に来た人達は、定着しないだろう。
パソコンで見に来る、コアな人達がきちんと読める、そういうサイトにしておけばいいのだ。」
私はこう思ってました。
ところが、その後もスマホでの訪問者の割合は減らず、私は本当にショックだったのですが、ここ１年くらいは訪問者の９５％がスマホからです。
それに加えて、「最近の若者はパソコンを持たず、スマホでネットの全てを見ている」との話がもっぱらです。
こうなるとさすがに、スマホ・ユーザーを強く意識せざるを得ません。
私からすると、「おいっ、パソコン・ユーザー達はどこに行った？ スマホを使わない、パソコンのヘビー・ユーザーの私が寂しいじゃないか。なんという事だ！」という心境です。
残念極まりない事態ですが、仕方ありません。
実は２０２０年１２月の時点で、スマホ対応（モバイル対応）に着手してました。
その事は、当時の日記「ウェブサイトを改修中です」に書いてます。
この時は結局、１年かけて改修作業を終えました。
上記した、「ここ１年くらいは訪問者の９５％がスマホから」という現実は、この時の改修の成果なのかもしれません。
私は、すぐ上にリンクを貼った、前回のサイト改修作業により、それなりの形でスマホにて、このサイトが表示されてると思ってました。
だが、そうではないと気付かされたのです。
半年ほど前に、母がスマホを持ち始めました。
そうして最近になり、ようやくスマホ操作に慣れてきて、スマホを使ってネットに接続し、好きなサイトを見られるようになりました。
そこで私は、母に頼んで、このサイトを初めてスマホで見てみたのです。
見てびっくりしました。
最初はページの左上だけがドアップで表示され、ページを縮小して全体を表示させると、文字が小さくてまともに読めなかったからです。
前述した２０２０年１２月から行った改修では、リンクを貼った文中でも書きましたが、「デベロッパー・ツール」というものを使って、スマホでの画面表示の状態を確認してました。
そのツールで見る限りでは、ページ左上のドアップは解消しており、文字サイズもまあ一応は読める印象だったのです。
それなのに、実機で確認したところ、スマホ対応できていると言えない状態でした。
まともに読めるページになってません。
「だめじゃん、これじゃ……」と思いましたね。
この状態なのに、グーグル検索して私のページを訪れ読む方がいることに、感謝と申し訳ない気持ちが生じました。
スマホで私のサイトがどう見えるかは、ずっと気になってたんですよ。
しかし私はスマホを持ってないし、持つ気持ちもありません。
それにスマホというのは、パソコンもそうですが、とても個人的なものなので、安易に他人に「ちょっと借りるよ」と言えません。
でも母ならばスマホを長時間借りるのも可能なので、ようやくサイトの確認が出来たわけです。
確認した結果、このままではダメだと確信し、今回の改修作業（サイトの改良）に至りました。
ようやく本題に入るのですが、少しCSSをいじって文字サイズなどを変えてみましたが、らちがあかないので、@mediaという「ブレイクポイント」を設定するものをCSSに新たに記述する事にしました。
これはレスポンシブ対応という、サイトの表示に柔軟性を持たせるプログラムです。
画面のサイズに合わせて、表示を変えることが出来ます。
ビューポートというのをページに付与しておかないと効かないのですが、ビューポートは前回の改修作業で全てのページに置いてます。
下準備ができていたので、いよいよ@mediaに着手したというのが、今回の改良の主眼です。
@mediaは、数値の設定が難しそうで、かなり数値の調整に時間がかると予想してました。
ところが、私のサイトはシンプルな作りなので、文字サイズ、画面の横幅、左右の余白の数値を変えるだけで、スマホでそれなりに見られる様になりました。
CSSへの記述の仕方が独特なので、その勉強には時間がかかりましたが、記述を始めたらそこからは早かったですね。
で、サイトの全ページのスマホ対応が終了しました。
スマホで見てもらうと分かるのですが、普通に見られます。
ただし、私はスマホ・ユーザーでないので、スマホではどの位の文字サイズが適切なのかとか、どういうレイアウトだと見やすいがが、さっぱり分かりません。
大きい文字のほうが見やすいだろうと思い、大き目にしたのですが、案外見づらいとかあるかもしれません。
あと、スマホだと見づらいページが、やはりありました。
「私の愛するジャズアルバム」にある、コード進行を書いたページがそうで、スマホの横幅だと綺麗な表示にならず、分かりづらいです。
これは解決方法は無くて、気になる方はパソコンで見てもらうのがベストです。
スマホ対応したのを応用して、iPadに対応する@mediaも記述しました。
調べたところ、iPadでのネット利用者は５％くらいとの事ですが、スマホ用のを数値を変えるだけでiPad用に出来るので、この際だからやってしまおうと、頑張って作業しました。
ただし、現状では私はiPadでどう表示されるかの確認ができてません。
スマホとパソコンの中間でちょうど良いだろうと、中間の数値を当てましたが、どう表示されているのか。
弟がiPadを持っているので、彼が遊びに来た時に借りて、自分の目でじっくりと確認したいと思います。
２回にわたって、このサイトの改良（改修）作業の報告をしましたが、一連の改良でかなり進化したと感じてます。
このところ、見やすさと使いやすさを考えて改良をしてきましたが、かなり成果が出てきたと思います。
それにしても、ここまでスマホがネット接続の主流になり、人々の生活に入り込んで長時間を奪うと思ってませんでした。
私のようなスマホと距離をとっている人間からすると、スマホの技術革新が急すぎて、気持ち悪いですね。
あの小さな薄い機器に、あれほどの機能が搭載されているのは、異常です。
「宇宙人のテクノロジーが使われている」との説も出てますが、私はその説を信じてます。
宇宙人テクノロジーの盗用は、フィリップ・J・コーソー著の『ペンタゴンの陰謀』に詳しく書かれてます。
これは、ロズウェル事件で墜落したUFOから回収したものを、アメリカ政府（アメリカ軍）の上層部が極秘に研究して、様々な技術を獲得しつつ、アメリカの軍需企業にも内密に技術供与した事を証言した本です。
私は読んでみて、インチキな話だと思いませんでした。
かなりの部分が事実だと思ってます。
スマホだけでなくパソコンもそうですが、非常に便利なのは事実ですが、頼りすぎたり、盲信したり、信奉したりしないように、私は気を付けてます。
あくまでも道具として使い、依存しすぎないように常に気を配ってます。
テレビもそうなのですが、そこにどっぷり浸かると、大事なものを見失います。