今回WordPressを使ったお引っ越しを機に心を入れ替え、モバイル(スマフォ)用テーマも自分で作ることにしたお話はしました(笑)
その際、
『iPhoneもAndroidもあるとはいえ、確認とか大変だったでしょ?』
というようなねぎらいのお言葉を各方面から頂きました。

ん…
(・~・)

実は、全然大変じゃなかったのです(^◇^;)

WordPressじゃなくてもブログサービスでスマフォ用のテンプレートをいじりたい時も同じです。

 

 

モバイルテーマを作る時は、SafariのユーザーエージェントをiOSにすればOK

モバイル(スマフォ)用テーマ、テンプレートを作るのにスマフォは絶対必要か?というと、実は、そうでもありません。
これで、スマフォを持たない人でもお手軽にモバイルテーマが作れると言うもの。(。・∀・) 。_。))ウンウン

もちろん実機での確認は出来きるなら絶対した方が良いですが。

 

準備するものは…

じゃん!

Safari〜!

 

130411_06

Macで標準に入っているSafariにはユーザーエージェントを変更出来る機能がついています。これを利用すればお手軽、仮想モバイルSafariになちゃうんです。 iPhoneやAndroidのブラウザをリロードしまくる必要はありません。
Macからちょいちょい確認できて、すごく簡単ラクチン(。´▽`)

 

 

手順

Safari > 環境設定 > 詳細(タブ) > 「メニューバーに”開発”メニューを表示」にチェック

 130411_01

 

こうすることで、メニューバーに開発の項目が増えます。
開発を開けると…
ユーザエージェントという項目がありますね。覗くとたくさんのブラウザとバージョンが!

 

130411_02

 

 

 

 

その時、開いているタブのみ、選んだブラウザの”フリ”をしてくれます。

ここで「Safari iOS x.x iPhone」を選ぶと、アクセスしたページは、「iPhoneのSafariからのアクセスだな。じゃ、このテーマで表示しようね。うんせうんせ…」という仕組みです。

 

これで表示確認や動作確認が手軽に行えます
リキッドレイアウトで作ったので、その様子も(ある程度)見られます。

 

130411_03

こんなカンジ…

 

ちなみにSafari以外のブラウザでもユーザーエージェントの変更は出来ます。
私は、Safariが軽いと思うので、Safariでやっていますけど。

 

 

 

 

もちろんiPhoneやAndroidのモバイルデバイスでの表示動作確認用アプリなんかもありますよ!

 

Mobilizer
130411_04

 

 

 

 

でも、個人的にはSafariの開発メニューで十分でした。
こうやってMacのSafariで確認しながら作って、最後に実機(iPhoneやAndroid)で確認をして、気になるところ、気がついたところを修正。φ(..)ちまちま

 

 

スマートフォン用テーマ(テンプレ)はMac(Windowsもあるね)のSafariで簡単に確認して、作業効率をあげられます、ってお話でした。( ´ ▽ ` )ノ

 

 

 

おまけ

 

Safariの開発メニューにはページのソースを見るなど定番のお役立ち機能が隠れています。取りあえずメニューに出しておくと何かの時に役にたつかも。

ちなみにページのソースを見るのはFirefoxの選んだ箇所のみソースを表示する機能が便利です。^^

 

 130411_05

 

おまけ2

ユーザエージェントがいろいろ選べるので、一瞬「これで全ブラウザの表示確認出来ちゃうじゃん(。´▽`)ワーイ」と思うかもしれませんが、実際表示や動作はちがいます。確認するのには使えないんですよ〜。

ですが、他のブラウザのフリ(偽装w)が出来ますから、「ここのスマフォサイトはどうなっているんだ?」と開いてソースを調べたり、IE以外お断りページにアクセスしたり、「リンあれのベージビューのWindows率をあげてやれ!」などいろいろ出来ます。(今どきIE以外お断りページなんて無いと思うでしょ…これが遭遇したんですよ、最近( ꒪⌓꒪)

 

みなさんもお試しあれ!(๑´ㅂ`๑)

 

 

 

このブログがお役に立ったり楽しんでもらえたら「いいね!」お願いします(๑⁰ 〰⁰)
いろいろなところでシェアしてくれると嬉しいです(*´ー`*)
このエントリーをはてなブックマークに追加

↓今更ですがPinterestが楽しいです。日本ではあまり流行ってないですし、私も知ってからから始めるまで2年くらいの差がありましたが、利用してみたらかなりお気に入りです。写真、映像、デザイン、イラスト、ハンドクラフトをやっている人には激オススメしておきます。

↓Instagramをひっそりとやってます。Apple、食べ物、猫が主な被写体です。気になる方はFollowしてみてください。

→今までのApple製品を並べてみました。そんなに買ってないような気がしてたんですが、買ってます…(;´Д`)ありぇ。
▶さらにくわしいネタやプロフィールはAbout