のぼみ～日記をスマホ対応に

このところずっと取り組んでいるWEBページのスマホ対応。今日も奮闘している。
のぼみ～日記は毎年数百ページもあるので、過去の分も全部直すにはどうすればいいのか……。これから書いていく分はどのように改良したらいいのか……。

いろいろ考えたり、WEBで検索しながら勉強したりした結果、結論としては、

• スマホ対応ページは新たに作らない。過去のページをそのまま生かす方法にする
• スマホ対応のCSS（スタイルシート）を別に作って振り分ける方法だと、デザイン変更するたびに２つのCSSを書き換えなければいけないので、CSSも１つにしたい

……ということで、１つのCSSにPCブラウザ用とスマホ用の記述を併記する方法を採用することにした。

いろんなページを参考にさせてもらったが、いちばん役に立ったのは⇒ここかな。感謝。

簡単に解説すると、まず、htmlのヘッダー内に、

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

という記述を追加する。これで、外部スタイルシートに併記されたスマホ用の内容が反映されるようになる。

次に、スタイルシートにスマホ用の記述を追加していく。
最初に、おまじないだと思って、

@media screen and (max-width: 480px) { img { max-width : 100% ; height : auto ; float : none ; } }

という記述を追加。
これは写真画像をスマホの横幅に合わせて縮小表示させるためのもの。端末のスクリーンが480ピクセル以下の場合（スマホやiPod touchなどの場合）は画像は横幅100％に表示してね、なおかつテキストの回り込みもさせないでね、という意味になる。

この記述の最初にある @media screen and (max-width: 480px) { という1行は重要で、ここからはスマホ用の記述ですよ、という命令。この記述のおかげでhtmlだけでなく、スタイルシートも1つで済む。
ブラウザの横幅を480ピクセルを境界にして、それより大きければここから先の記述は無視してね、それより小さければスマホだから、ここから先の記述に従ってね、という意味だ。

例えば、のぼみ～日記は今まで、本文テキストは <div class="d1">　～　</div>で囲んで記述して、写真のキャプションはそれを指定せず、BODYの素のフォントを小さめにして、写真と一緒に中央揃えしていた。
写真の基本横幅を今は800ピクセルにしているので（以前は650ピクセルにしていたが、一般的に回線が速くなっているので、後から転用するときに解像度不足にならないよう、800ピクセルにした）、キャプションはたいてい1行で収まるから、中央揃えでもいいだろう、という判断だ。
ところが、スマホでは横幅が狭いのでキャプションが中央揃えになるとほとんどは改行されてしまってみっともない。
そこで、PCでは中央揃えでいいけれど、すまほだと普通に左揃えにならないかな、と考えた末に、こんな風にしてみた。

.cap{ width:800px; font-size:0.8em; font-family:sans-serif; color:#0000e8; margin-left:12px; margin-right:12px; background-color:#f0f0f0; -webkit-text-size-adjust : 100%!important ; padding-bottom:0.4em; text-align:center; } @media screen and (max-width: 480px) { .cap{ width:100%; font-size:0.8em; font-family:sans-serif; color:#0000e8; line-height:1.5em; margin-left:0px; margin-right:0px; background-color:#dfdfdf; padding-bottom:0px; -webkit-text-size-adjust : 100%!important ; text-align:left; } }

これでPCで見るとキャプションは画像に合わせて中央揃えだが、スマホだとキャプションは普通に左揃えになった。

@media screen and (max-width: 480px) {を使うときは、これの閉じカッコを忘れないように。
本来の記述用の { }　があるから、スマホ用の記述の最後は　} }　と２つの閉じカッコがつくことになる。

そんなわけで、大変な苦労の末に、のぼみ～日記はほぼ全ページ、一気にスマホ対応になったとさ。やれやれ。

のぼみ～日記は1年に数百ページ書いているので、過去の分を含めると数千ページになる。これだけのhtmlファイルをすべてスマホ対応に書き換えるのはどうやったか？
例えば、 <meta name="viewport" content="width=device-width,initial-scale=1.0" />という1行をすべてのページのヘッダ部分に追加しなければいけないわけだが、入れたい場所の直前に書いてある文字列を適当に指定して、それを含めた形で<meta name="viewport" content="width=device-width,initial-scale=1.0" />という文字列に一括置換すればいい。
これができるのは、今なおすべてのhtmlをテキストエディタでしこしこソース直書きしているから。
今この日記を書いている画面はこんな感じ↓

複数ファイルの一括置換にはDevasというフリーソフトを使った。これは本当にすごいソフトで、複数ファイルから指定された文字列を探しだすだけでなく、それを一覧表示して、別の文字列に一括置換してくれる。数百のファイルでも瞬時にやってくれる。しかも文字コードはUTF-8でもShift-JISでも大丈夫なので、htmlファイルの文字コードを問わない。

こういう作業は、Windowsが多数のフリーソフト作家たちによって支えられていたよき時代の産物。僕は今では、音楽と動画はMacを使っているが、文章関連の作業をMacではまったくやれない。QXや秀丸のような日本語環境を重視したテキストエディタ（縦書き表示に対応して、さまざまなマクロが発表されている）や使いやすいファイラーが見つからない。探せばあるのかもしれないが、とても今からそれをやる気にはならないし、やる意味も見つけられない。
重い処理をする動画や音楽の作業をMacにやらせることで、コンピュータの役割分担ができ、それぞれに特化した環境設定ができるというのもWindowsとMacを使い分けるメリットだ。
それでも、Macで動画編集などをしていると、キャプションやタイトル文字を入れるだけでWindows環境の何倍もの時間がかかって難儀している。ファイルのコピーや移動も慣れない。作ったはずのフォルダがなかなか表示されなかったり……Finderだけはどうしても受け入れられないなあ。

tableタグは使うな！

というわけで、話が少し脱線したが、のぼみ～日記が終わったので、引き続き、日光どっと倶楽部や日光クリックのページにも着手。
考えてみると、こういう地域ガイドのサイトこそ、出先でスマホで情報を得たいと思うケースが多いはずで、もっと早く気づくべきだった。
しかし、こちらは表組が多く、入り組んだレイアウトにしてあるページばかりなので、CSSだけで対応するのは無理で、htmlを相当手直しする必要がある。
大変な作業になってしまった。