初めてのことだらけでワケが分からなかった

Army engages young scientists in lab work by RDECOM

「秋のカスタマイズ第2弾」でイチバン苦労したのがスマホでの表示を改造する作業でした。

当ブログはWordPressでブログを作成していて、これまではスマホでの表示を「WPTouch」というプラグインに全部お任せしてたのだけど、それを自分なりの表示方法に変えたかった。

WPTouchを改造するのも初めて。スマホの表示テストも初めて。何から何まで分からないことだらけ。

中でも最初の大きな壁として立ちはだかったのが、「改造中のテスト版をどうやって見るのか／チェックするのか」ということ。

テスト環境・ローカル環境とは

いま、このブログを読んで頂けている環境は、インターネットですよね。ネット環境とかWeb環境とか言ったりもします。

ブログに新しい機能を追加したり、バグ（不具合）を修正する時、修正作業する場所として自分のPC（WindowsでもMacでも）にネット上のブログと同じ環境を作っちゃいます。これをテスト環境とかローカル環境と呼びます。以後「ローカル環境」で表記を統一します。

ローカル環境に構築したテスト用のブログ（ネット上のブログと全く同じ内容じゃなくても構いません）をあれこれ修正し、「よし完成！もう大丈夫！」となったらネット上にアップし、読んで下さる方々に公開する、という手順を踏んでます。

ローカル環境と対比で、最終的にアップするネット上の場所を「本番環境」と呼ぶことも多いです。

ローカル環境を構築せず、本番環境のブログを直接修正する人もいます。この場合、訪問して頂いた方々にもテストしてる状態がモロに見られてしまいます。

なので、たとえば修正を間違え、表示がおかしくなっちゃったら、自分だけでなく見に来てくれてる全員にも表示がおかしな状態で絶賛公開中の状態になる。

私も少々の修正ならローカル環境を介さず本番環境でやっちゃいますが、大掛かりな修正やカスタマイズはローカル環境で必ずテストしてから本番環境にアップしています。

ローカル環境構築に便利な「XAMPP」

私は現在Windowsを使用しています。そのWindowsマシンをネット上の本番環境と同じく「仮のサーバー」として、ブログを作ったり表示させたりするツールで有名なのが「XAMPP」。

Googleなどで検索すれば、導入方法やWordPressのインストール方法などを細かく解説されているサイトやブログが多数見つかります。細かく解説すると長くなり過ぎるし主旨と外れるので、今回のエントリーでXAMPPの解説は割愛します。

私がブログ開設準備をしてた2011年の10月から11月にかけて調査した際にお世話になった記事を以下に紹介します。調査したのが1年前なので、最新バージョンの設置方法や画面イメージが異なる可能性もあります。ご了承ください。

【参考】XAMPP for WindowsとWordpressのインストール – カメぞうのメモ書き
【参考】XAMPP を使って Windows に wordpress をインストールしてみた – 教えて！Turing先生

自分のiPhoneに表示させてみたかったのだけど…

ローカル環境の構築は1年前にブログ開設準備を始めた頃から既にできてました。今回のカスタマイズ作業における「スマホ版表示テスト」でまず大苦戦したのが、「実際のiPhoneにローカル環境のブログを表示させる方法」。

これもGoogleで検索したら、解説されてる記事が多数見つかった。で、実際にやってみたのだけど、全てダメでした。マトモに表示されやしない。

設定が悪いのか、記事が間違ってるのかは分からないけど、幾つもの方法を試したけれど全て失敗。半日以上の時間を費やすハメに。相当イライラしたのでこの方法は却下。

ホンモノのiPhoneでどう表示されるかを確認するのがもっとも正確だから、やってみたかったんですけどね。初心者の哀しさ。

「iBBDemo3」の導入

実物のiPhoneで表示テストするのは断念。となるとWindows上でスマホの表示を再現させる「エミュレータ」が欲しい。

探してみたら、「iBBDemo2」というツールを発見。これ良さそう！と思って調べたら、最新版として「iBBDemo3」がリリースされてることを知る。これを早速導入。

iPhoneの縦も横も表示シミュレーションが出来るし、iPadでの表示テストも可能。ちょっとカクカクしたり表示遅い時もあるけど、ローカル環境のブログがバッチリ「スマホ版と同じように」表示された。よっしゃ！

しばらくこれを使ってテストしてたのですが、もっとイイ方法を発見。

WindowsにSafariを初導入

私がWPtouchのカスタマイズでウンウン唸って苦しんでるのを、まるで背後から見られていたかのような、ナイスなタイミングでアップされた@hondamarlboro さんのエントリー。

ブラウザ「Safari」は、iPhoneではモチロン使ってるけどPCでは使ったことがない。Safariの開発モードというのでスマホ表示のシミュレートが出来るのか。なるほど！

というわけで、WindowsにSafariを導入することに決定。

開発モードは…どこだ？

Safariを起動したのはいいけれど、開発モードってどこを見ればいいのだろう…。初期状態ではそれらしきものがどこにもない。途方に暮れる私。

【参考】safariの開発モードがあった。: 人生で使うツールの紹介

上記記事を発見。Safariメニュー＞環境設定＞詳細タブで、「メニューバーに開発メニューを表示」をチェックすれば良い。ふむふむ。

で、メニューバーってどこなんやろ。Safariメニューってどこ？

↑初期画面は上のような状態。「環境設定」というものがどこにもない。

さらに調べたところ、謎が解けた。

【参考】Safariのメニューバーが消えてしまい…: Apple サポートコミュニティ

↑解説にあった通りAltキーを押すと上部にメニューが表示された。

↑メニュー＞表示の「メニューバーを隠す」をクリックすると、メニューバーの表示が固定され、消えなくなった。第1段階クリア。

↑続いてメニューバーの編集＞設定をクリック。

↑ようやくたどり着いた。「メニューバーに”開発”メニューを表示」にチェックを入れる。

↑メニューバーに「開発」が追加された。第2段階クリア。

ユーザエージェントを追加する

めでたく開発モードが表示されたので、「ユーザエージェント」を確認してみたところ…

↑上の画像は現在のSafariの状態なのだけど、Safariを入れた直後は青い枠で囲った通り、iPhoneもiPadも「4.3.3」までしか入ってなかった。

カスタマイズした時点での最新はiOS6。表示に違いがあるのかないのか分からないけれど、気分的にはiOS6で表示させたいところ。

↑ PCのSafariを保存したフォルダ内に、「UserAgents.plist」を発見。テキストエディタで開く。

iPhoneのiOS6設定は上のようにしてみた。バージョン「6.0.0」ってのはテキトーです。表示を他のと合わせたかっただけ。

保存してSafariを再起動すると、めでたくユーザエージェントに反映された。

SafariはHTMLもCSSもチェックできるから便利

↑Safariを起動し、ローカル環境のブログを表示させてみると、最初はPC版と同じ表示。

↑ユーザエージェントをiOS6に変更すると…

↑Safariでスマホ版のレイアウトが表示された。ここまで長かった～。

↑Chromeの拡張機能にも同じ機能があるのだけど、SafariにもHTMLやCSSの詳細をチェックできる機能がある。チェックしたい箇所をドラッグなどで範囲指定し、右クリックして「要素の詳細を表示」をクリック。

↑指定した箇所のHTMLソースやCSS指定がどうなってるか、この機能を使えば分かる。

お手本となるブログの通りに作ったはずが、自分のブログは全然違う表示になった、なんでやねん！って時、そのお手本ブログをSafariで表示させ、「要素の詳細を表示」機能を使ってHTMLやCSSをチェックして「なるほどー、こうやって作るんだー」と参考にする使い方も出来る。私は今回のカスタマイズでその方法を使いまくった。

HTMLやCSSをある程度理解されてる人であれば、Safariを利用することでスマホ版の表示チェックも出来るし、HTMLソースやCSSソースのチェックまで出来るので、この方法はかなり便利だと思います。

カスタマイズされる方は参考にして頂ければ幸いです。