サイトの改良②
スマホ対応(レスポンシブ対応)にしました
(2022.6.6.)

半月前から行ってきた、ウェブサイトの改良の作業。

それが一段落したので、報告する記事の第二弾です。

「村本尚立のウェブサイト」がスタートしたのは、2012年6月でした。

当時は、インターネットに接続するのに、まだパソコンが半分くらいを占めてました。

もうスマホは登場してましたが、まだまだ携帯電話を使う方が沢山いたし、スマホの性能から考えても、パソコン経由でネット記事を見るほうが安定してました。

このサイトは、立ち上げてから5年くらいは、パソコン向けにサイトを作っていたのもあり、グーグル検索で訪れる方の4~5割がパソコン使用者でした。

ところが、2017年くらいだったと思うのですが、一気にスマホ使用者の訪問の割合が増え始めました。

スマホがそれだけ普及したからなのですが、サイトをスマホ対応にしていないので、見るのが大変だろうし、一時的な現象だろうと思ってました。

私は、どうもスマホが好きになれないのです。

だから持つ気はないし、スマホでこのサイトを見る人々をずっと軽視してました。

「このサイトは文章のみの固い内容だが、長文をスマホで見るのはキツイ。
スマホは文字を沢山読んでいくのに適した道具ではない。

つまるところ、スマホで見に来た人達は、定着しないだろう。

パソコンで見に来る、コアな人達がきちんと読める、そういうサイトにしておけばいいのだ。」

私はこう思ってました。

ところが、その後もスマホでの訪問者の割合は減らず、私は本当にショックだったのですが、ここ1年くらいは訪問者の95%がスマホからです。

それに加えて、「最近の若者はパソコンを持たず、スマホでネットの全てを見ている」との話がもっぱらです。

こうなるとさすがに、スマホ・ユーザーを強く意識せざるを得ません。

私からすると、「おいっ、パソコン・ユーザー達はどこに行った? スマホを使わない、パソコンのヘビー・ユーザーの私が寂しいじゃないか。なんという事だ!」という心境です。

残念極まりない事態ですが、仕方ありません。

実は2020年12月の時点で、スマホ対応(モバイル対応)に着手してました。

その事は、当時の日記「ウェブサイトを改修中です」に書いてます。

この時は結局、1年かけて改修作業を終えました。

上記した、「ここ1年くらいは訪問者の95%がスマホから」という現実は、この時の改修の成果なのかもしれません。

私は、すぐ上にリンクを貼った、前回のサイト改修作業により、それなりの形でスマホにて、このサイトが表示されてると思ってました。

だが、そうではないと気付かされたのです。

半年ほど前に、母がスマホを持ち始めました。

そうして最近になり、ようやくスマホ操作に慣れてきて、スマホを使ってネットに接続し、好きなサイトを見られるようになりました。

そこで私は、母に頼んで、このサイトを初めてスマホで見てみたのです。

見てびっくりしました。
最初はページの左上だけがドアップで表示され、ページを縮小して全体を表示させると、文字が小さくてまともに読めなかったからです。

前述した2020年12月から行った改修では、リンクを貼った文中でも書きましたが、「デベロッパー・ツール」というものを使って、スマホでの画面表示の状態を確認してました。

そのツールで見る限りでは、ページ左上のドアップは解消しており、文字サイズもまあ一応は読める印象だったのです。

それなのに、実機で確認したところ、スマホ対応できていると言えない状態でした。
まともに読めるページになってません。

「だめじゃん、これじゃ……」と思いましたね。

この状態なのに、グーグル検索して私のページを訪れ読む方がいることに、感謝と申し訳ない気持ちが生じました。

スマホで私のサイトがどう見えるかは、ずっと気になってたんですよ。

しかし私はスマホを持ってないし、持つ気持ちもありません。

それにスマホというのは、パソコンもそうですが、とても個人的なものなので、安易に他人に「ちょっと借りるよ」と言えません。

でも母ならばスマホを長時間借りるのも可能なので、ようやくサイトの確認が出来たわけです。

確認した結果、このままではダメだと確信し、今回の改修作業(サイトの改良)に至りました。

ようやく本題に入るのですが、少しCSSをいじって文字サイズなどを変えてみましたが、らちがあかないので、@mediaという「ブレイクポイント」を設定するものをCSSに新たに記述する事にしました。

これはレスポンシブ対応という、サイトの表示に柔軟性を持たせるプログラムです。
画面のサイズに合わせて、表示を変えることが出来ます。

ビューポートというのをページに付与しておかないと効かないのですが、ビューポートは前回の改修作業で全てのページに置いてます。

下準備ができていたので、いよいよ@mediaに着手したというのが、今回の改良の主眼です。

@mediaは、数値の設定が難しそうで、かなり数値の調整に時間がかると予想してました。

ところが、私のサイトはシンプルな作りなので、文字サイズ、画面の横幅、左右の余白の数値を変えるだけで、スマホでそれなりに見られる様になりました。

CSSへの記述の仕方が独特なので、その勉強には時間がかかりましたが、記述を始めたらそこからは早かったですね。

で、サイトの全ページのスマホ対応が終了しました。

スマホで見てもらうと分かるのですが、普通に見られます。

ただし、私はスマホ・ユーザーでないので、スマホではどの位の文字サイズが適切なのかとか、どういうレイアウトだと見やすいがが、さっぱり分かりません。

大きい文字のほうが見やすいだろうと思い、大き目にしたのですが、案外見づらいとかあるかもしれません。

あと、スマホだと見づらいページが、やはりありました。

「私の愛するジャズアルバム」にある、コード進行を書いたページがそうで、スマホの横幅だと綺麗な表示にならず、分かりづらいです。

これは解決方法は無くて、気になる方はパソコンで見てもらうのがベストです。

スマホ対応したのを応用して、iPadに対応する@mediaも記述しました。

調べたところ、iPadでのネット利用者は5%くらいとの事ですが、スマホ用のを数値を変えるだけでiPad用に出来るので、この際だからやってしまおうと、頑張って作業しました。

ただし、現状では私はiPadでどう表示されるかの確認ができてません。

スマホとパソコンの中間でちょうど良いだろうと、中間の数値を当てましたが、どう表示されているのか。

弟がiPadを持っているので、彼が遊びに来た時に借りて、自分の目でじっくりと確認したいと思います。

2回にわたって、このサイトの改良(改修)作業の報告をしましたが、一連の改良でかなり進化したと感じてます。

このところ、見やすさと使いやすさを考えて改良をしてきましたが、かなり成果が出てきたと思います。

それにしても、ここまでスマホがネット接続の主流になり、人々の生活に入り込んで長時間を奪うと思ってませんでした。

私のようなスマホと距離をとっている人間からすると、スマホの技術革新が急すぎて、気持ち悪いですね。

あの小さな薄い機器に、あれほどの機能が搭載されているのは、異常です。

「宇宙人のテクノロジーが使われている」との説も出てますが、私はその説を信じてます。

宇宙人テクノロジーの盗用は、フィリップ・J・コーソー著の『ペンタゴンの陰謀』に詳しく書かれてます。

これは、ロズウェル事件で墜落したUFOから回収したものを、アメリカ政府(アメリカ軍)の上層部が極秘に研究して、様々な技術を獲得しつつ、アメリカの軍需企業にも内密に技術供与した事を証言した本です。

私は読んでみて、インチキな話だと思いませんでした。
かなりの部分が事実だと思ってます。

スマホだけでなくパソコンもそうですが、非常に便利なのは事実ですが、頼りすぎたり、盲信したり、信奉したりしないように、私は気を付けてます。

あくまでも道具として使い、依存しすぎないように常に気を配ってます。

テレビもそうなのですが、そこにどっぷり浸かると、大事なものを見失います。


日記 2022年4~6月 目次に戻る

日記 トップペ-ジへ行く

サイトのトップページへ行く