スマホサイト制作の3種の神器！

hiruma

Jun 12, 2012

Adobe Shadow
charles
weiner
スマホ
スマートフォン

777ブログウェイ5日目です！

みなさん初めまして。HTMLファイ部の比留間です。
_level0はフロントエンド向けのブログということで、ファイ部も今後はこちらで更新を行うことになりました。
自分はHTML5関連のネタを主に書いていく予定です。よろしくお願いします！

スマホWebサイト制作に欠かせない3つのツール

スマホサイト制作で一番苦労するのはどこでしょうか。
人によって色々意見があると思いますが、デバッグツールの少なさは誰もが思っていることと思います。

これがPC版だったなら・・！と何度も唇を噛んだ経験があります。
ということで、今回ここで紹介するのはそうしたスマホサイト制作に欠かせない3つのツールについてご紹介したいと思います。

weinre

sample

weinreとは、Web Inspector Remoteの略だそうです。
つまり、リモートからWeb Inspectorの機能を利用できるツールです。

これがなにをもたらしてくれるか、というとスマホで閲覧しているサイトもPC版のWebKit系ブラウザに搭載されているWeb Inspectorとほぼ同等の機能を使ってデバッグが行える、ということです。

DOMの操作はもちろん、設定されているCSSの確認やリアルタイムにCSSを書き換えたり、あるいはconsole上からダイレクトにJavaScriptを実行してテストしてみたり、といったWeb Inspectorでは当たり前に行なっていることがスマホ上でもできるようになります。

もちろん、consoleにもちゃんとデータが表示されます。
Mobile Safariのconsoleでは、オブジェクトを出力しても[object Object]のようにテキスト化されて中身が見れません。

しかし、このweinreを使えばそうしたデータもしっかりと構造を維持した状態で確認することができるようになります。
と、いくら言葉で説明しても分かりづらいと思うので、実際に動画を見てもらったほうがいいでしょう。

手前味噌ではありますが、個人で書いているブログで過去に紹介しているのでぜひ、そちらを参考にしてみてください。動画で機能を紹介しています。

「[CSS-EBLOG] スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！」

Adobe Shadow

sample

少し前に発表されたAdobe Shadow、もうみなさん試されましたか？非常に強力なツールで、スマホサイトの制作には欠かせないツールになるのではないかと思っています。

ちなみにこのAdobe Shadow、軸となるツールは上記で紹介したweinreをベースとしています。
これをPC上で起動し、ネットワーク経由で接続されたたスマホに対してweinreと同様の機能を提供します。

ただこれだけであれば、わざわざこれを使う必要がありませんが、これのすばらしいところはPCと閲覧状況を共有できる、という点。
PC版、Chrome Extention、iOS(Android)それぞれでAdobe Shadowをインストールする必要がありますが、すべてにインストールしてしまえばあとのデバッグが非常に楽になります。
手順は以下の通り。

手順

PC版Adobe Shadowを立ち上げる

インストールしたAdobe Shadowを起動します。

iOS/Android版Adobe Shadowを立ち上げる

続いてiOS/Android版Adobe Shadowを起動します。（複数台同時接続可能）

Chrome Extentionを起動

そして最後にChromeを起動します。
起動するとポップアップ内に接続可能な端末の一覧が表示されます。（同一ネットワーク内にある必要があります）
あとは接続したい端末を選択し、接続すればスマホ側に、現在Chromeで見ている画面が表示されるようになります。

使う

この状態でPC側で別のページなどに遷移すると接続されているスマホが一斉にそのページに遷移します。
これがAdobe Shadowの強力なところです。

1〜2台くらいの端末数であればそれぞれ手作業とかでも問題ないかもしれませんが、これが10台など多くなっていくとより効果を発揮するでしょう。
いちいちそれぞれの端末でURLを入力したり、リンクをタップしたり、という手間を省くことができます。
さらに冒頭でも話したように、weinreを使っているのでweinreと同じことができます。例えばそれぞれの画面に対してalertを送る、なんていうこともできます。
（まったく意味ありませんがｗ）

そしてweinreよりもいい点があるとすれば、このツールを経由することでweinreの機能がすぐに使えるので、weinreのように下準備などがいらない点が上げられるでしょう。

ただ1点注意としては、Adobe Shdow上で見ているブラウザはあくまでWebViewなので、閲覧しているサイトによってはデフォルトブラウザと若干挙動が違う、などということがあるかもしれません。

とはいえ、それを押してでも使う価値は十分あると思うので、まだ導入していないかたはぜひ導入してみてください。

解説動画があったので、これを見るとより理解が深まると思います。
（2分40秒くらいのところで、複数台でAdobe Shadowを利用するシーンが見られます）

Charles

sample

最後にプロキシツールを紹介します。
こちらはスマホに限らず、サイト制作には必須なツールです。

なにをしてくれるツールかというと、自分のPC上でプロキシサーバを立ち上げることができます。
ではそれができたらなにが幸せなのか。
色々と幸せになれますｗ

どんな機能があるか簡単に紹介します。（自分自身も100％使いこなしているわけではないので、自分が使っている便利なところだけを紹介します）

Map remote/Map local

どちらかというと「Map local」のほうがよく使うでしょうか。
Map localで該当のURLをローカルのファイルにマッピングすると、そのURLへのリクエストはすべて指定したローカルファイルを参照するようになります。

つまり、手元で編集したものがそのまま本番サイトに反映したかのように見えるようになる、ということです。
PHPなどのように、プログラムで動くものであったり、サーバサイドの処理が必要なものはさすがに対応できませんが、画像やCSS、JavaScriptと言った静的なファイルであれば簡単に置き換えることができます。

例えば、CSSの修正をいったん反映してみたいけどいきなり本番に上げるのは不安・・なんていうときにも、反映前のファイルを実際に本番サイトに反映した想定でチェックする、なんてことができるようになります。

iOSでプロキシ設定

iOSにはWi-Fiの設定でプロキシサーバを指定することができます。
このサーバのIPアドレスに、Charlesを立ち上げたPCのIPを指定することで、上記で書いたようなMap localのような機能をiOSでも使うことができるようになります。

PC版と同様、ローカルのファイルをサーバに上げたかのように確認ができるので、本番に上げるのに不安なファイルがある場合はとても重宝するでしょう。

レスポンスを書き換える

Charlesはプロキシサーバなので当然通信を見ることができます。
そしてそれらの通信それぞれに対してBreak pointを張ることが可能です。
Break pointを張ることで、レスポンスを書き換えてブラウザに表示されるデータを改変することができます。

具体例を上げましょう。
例えば、まだAPI側が開発中、あるいは修正中で望みのレスポンスを返せてもらっていない、なんていう状況があるとしましょう。
大幅にレスポンス内容が違う、という場合はむずかしいかもしれませんが、ちょっとしたパラメータの違いくらいであれば、そのレスポンスをブラウザに渡す前にCharles上で書き換えることができます。

これがBreak pointを設定することで可能となります。
通信にBreak pointを張ることで、プログラムでBreak pointを張るような感覚で通信を停止し、場合によってはそれを書き換えてからレスポンスとしてブラウザなりに通す、などということができるというわけです。

こちらもテキストだけでは分かりづらいと思うので、これまた手前味噌ですが、前に自分のブログで取り上げたことがあるので紹介します。

[CSS-EBLOG] 本番環境でテスト？！ Charlesを使った簡単サイト修正

明日の777ブログウェイは意匠部ブログです。乞うご期待！