本番環境で直接カスタマイズするのは怖い

iPhoneで自分のブログを見た時、気になる点が以前から幾つかあったものの放置してたのですが、昨日久しぶりにカスタマイズをしました。

当ブログのスマホ版は、WordPressの「WPtouch」というプラグインで表示させています。PCで表示させるファイルとは違う、別のファイルをカスタマイズしなければならないので、けっこう面倒だし、慣れないうちは難易度も高いのがヤッカイ。

PCでは何の問題もなく表示成功してるのに、スマホで見るとダメダメな機能や表示がこれまで幾つもありました。

今回カスタマイズした内容も、PC版では表示が正常なんです。自分のブログをiPhoneで見る機会が少なく、PCのブラウザでばっかり見てるから、あんまり深刻に考えてなかった。

でも最近はスマホで見て下さる方が増えてきてるので、やっぱりこれはキチンとしなければイカンと。

WPtouchのカスタマイズをする時、作業はPC（私の場合はWindows）でやりますけど、実際にiPhoneでどう表示されるかをテスト環境で確認しなければならない。

Webにアップしてる本物のブログ（＝テスト環境に対して「本番環境」と呼びます）を直接修正して、iPhoneで表示を確認する手もあるんですけど、それをやっちゃうと私だけでなく、ブログを訪問してくれる方々にもテスト中の様子が丸見え。

丸見えだけなら恥ずかしいってだけでいいですが、これがバグを作り込んでしまって表示がおかしくなったり、最悪の場合何も表示されなくなったりしたら、もう大変。読者に迷惑をかけてしまいます。

なので、私みたいにカスタマイズでしょっちゅうミスってる人は特に、テスト環境の構築が必須。

自宅のWindowsなどローカル機器にテスト環境を構築するので「ローカル環境」と呼んだりもします。で、ローカル環境でのテストが「ローカルテスト」。そのまんま。

WindowsのSafariが重すぎた

ブログをカスタマイズする際、私のローカル環境では以下のようなツールやソフトを同時起動しながら作業してます。

XMAPP

Windowsマシンにローカル環境を構築するためのツール。これを起動しないとPHPによるテストができません。

TeraPad

WordPressの文字コード「UTF-8N」に対応しているテキストエディタ。HTML、CSS、jQuery、PHPなどのコードは全てTeraPadで編集し、テストをしています。

Evernote

変更前と変更後のコードや画面スクリーンショットなど、カスタマイズ内容は全てEvernoteに履歴を保存してます。

XMind

カスタマイズが複雑になると頭が混乱してパニックになり作業が進まなくなることも多々あります。そんな時はXMindを起動し、ブレインストーミングやマインドマップを作成して頭の中を整理し、作業項目の洗い出しや順序の見直しに利用してます。

Chrome

PCブラウザ。PCでの表示を確認する時に使います。他に「ワイヤーフレーム」と言って、ブログデザインのイメージ設計図を事前に作っておくときは「Cacoo」というWebサービスを利用してますので、その設計図を見ながら作業することもあります。

Safari

Safariのユーザエージェント機能を使うことで、WindowsでもiPhone表示が確認できます。これを知ったことでスマホ版のカスタマイズに着手することができました。

iPhoneを使うことなくiPhoneでの表示確認ができたので大変便利なのですが、いかんせん重すぎる。

Safariを起動すると、ホーム画面が表示されるまで1分近くかかりますし、起動後は上に連ねたEvernoteやXMindなど他のツールも釣られて重くなり、作業がまったくスムーズに進まなくなってイライラしまくります。

あまりに重くて遅いので、他に表示確認できる方法はないものかと探し、Chromeで拡張機能を見つけたのですが（今回の記事で紹介するのとは別の拡張機能です）、微妙に表示がスマホ版と違う。これでは表示テストの意味がなく、使えなかったので却下。

結局Safariで確認するしか手がなく困ってたのですが、今回ようやく解決。

Chrome拡張機能「User-Agent Switcher」が便利！

拡張機能を新規追加するには、Chromeウェブストアにアクセス。

↑検索欄に「User-Agent Switcher」と入力し、検索。

↑同じ名前の拡張機能が幾つか一覧で表示されます。私が今回インストールしたのは、青いアイコンのやつ。右側にある「CHROMEに追加」ボタンをクリックするとインストールされます。

↑インストールすると、Chromeの拡張機能アイコン欄に怪しい白マスクが出現します。これでOK。

↑これがChromeで見た通常の「PCモード」。ブラウザの幅を狭くしてiPhoneっぽくしてますが、表示はPCのまんま。当たり前ですけど。

iPhoneでの表示を確認したい時は、怪しい白マスクに働いてもらいます。

↑怪しい白マスクのアイコンをクリックすると、ユーザエージェントの一覧が表示されます。その中にある「iPhone」をクリック。

ユーザエージェントを切り替えた直後は表示が変わらないので、Windowsの場合はF5キーなどでブラウザを更新すると表示が変わります。

↑iPhoneで表示されるスマホ版に変わりました。WPtouchでローカル環境を変更し、Chromeを更新すれば瞬時にテストができます。しかもSafariと違ってPC全体がとても軽くて高速。ウソみたいに快適になりました。

↑ユーザエージェントを変更している時、白いマスクのアイコンはサングラスをかけて更に怪しくなります。「逃走中」でハンターに追いかけられてる気持ちになります。ならねえか。

ユーザエージェントを「Default」に変更し、ブラウザを更新すると元に戻ります。白マスクのサングラスも外れます。

ユーザエージェントの変更中は、Chromeで表示している他のタブにも反映されますので、「うわ！なんやこれは！」とビビらないように。私は最初、取り乱しました。

おまけ：今回のカスタマイズ内容

ということで、いつもの数倍スムーズで快適にテスト作業も捗り、幾つかのヘンテコなスマホ表示を改善することができましたので、最後にご紹介。

↑今までPC版と同じサイズのアイキャッチ画像を表示していたため、画像がデカすぎたのと、float（文字の回り込み）を設定してなくて画像の下に文字が表示されてたのですが、今回ようやく改善できました。放置しすぎた。

↑同様に、これまでサムネイル画像付きで紹介していた他のサイト・ブログの紹介欄ですが、こちらも画像サイズを調整し、文字を右側に並べて表示させるようにしました。

↑本文中で強調したい時に使う「薄いグリーンの枠」ですが、今までは右端が欠けていて、いろいろテストしたけど直らなかったのが、今回ようやく原因判明。キッチリ全画面に収まるようになりました。

今までボックスの幅（width）を「95%」にしたり「300px」にしたり、CSSでいろいろ試行錯誤してたのですが、そもそもこれが間違いのモトだったらしく、width指定を消したら直りました。なんのこっちゃ。WPtouchとCSS、いまだに難しくてマスターできませんわ。

↑書籍やDVDなど、Amazonと楽天のリンクを紹介する欄で、改行ピッチが狭くて文字がくっついてしまってたので、間隔を広げました。あと少しタップしやすくなるようカスタマイズしたかったのですが、今回はひとまずココまで。

↑表示を直すついでに、とてもやってみたかった「関連記事欄にアイキャッチ画像を表示」する機能、ようやく実装することができました。やっぱり画像があると印象が全然違うなーと感じたのですが、どうでしょうか。

まとめ

WPtouchのカスタマイズは、どうしてもSafariの重さが気になって、なかなかポンポンと作業着手しようという気持ちが盛り上がらなかったのですが、今回の拡張機能導入で今後は処理速度と同じく気持ちも軽くなりそうです。

今回のカスタマイズでまた幾つか勉強になってコツもつかんだので、時間を見つけてポツポツと機能追加していこうと思ってます。カテゴリー毎の新着記事も表示させたいので、次はそれに挑戦してみよう。

関連する記事