2012年8月24日金曜日

スマホサイト制作に役立つiPhoneアプリ

最近ではスマホ用のサイトを制作する機会が増えてきました。
私の場合は、自社でサイトを運営するにあたって、スマホに最適化したサイトの制作ディレクションを行なっています。

PCのサイトの場合は、表示確認用のエミュレーターやデバッグツールが無料で多く提供されていますが、スマホの場合はまだまだ。Firefoxの拡張機能のエミュレーターをメインに活用していますが、実機で見るとまた実際とは違って見えることもしばしばです。

そこで、今回は私が実際に活用しているアプリをご紹介します。



Adobe Shadow

無料
(2012.08.23時点)
posted with ポチレバ
Adobeさんが無料で提供してくれている神ツール!
通常、iPhoneの実機で表示を確認する際は、Safariを立ちあげて、URLを入力して、開発環境の場合はID/パスワードを入力して…など、結構面倒なもの。詳しい使い方は以下のブログ記事を見てもらうとして、簡単に説明すると、PCのブラウザ(Chrome)で見ているページをWifiでシンクして、ほぼ同時にiPhoneでも見れてしまうのです。

iPhoneだけでなくて、iPadやAndroid、さらにはKindleにも対応しています。例えば、複数の端末をPCの横に並べて、ChromeにURLを入力すれば一斉に表示確認ができるわけです。

利用には、デスクトップアプリケーションとChromeの拡張機能、そしてスマホのアプリをインストールする必要があります。

iPhoneのアプリ上で画面のスナップショットを撮影して、Wifi経由で画像をPCに転送することもできちゃうのもすごいです。画像とあわせて、端末の名前、OSのバージョン、日時、URLを記載したテキストファイルも一緒に転送されます。表示崩れの修正を指示するのに必要な情報が記載されています。おそらくAdobe社内で使っているものと思われますが、その点さすがだなと感じす。



Cacoo-i

Cacoo-i (無料) 
(2012.08.23時点)
posted with ポチレバ
Cacooの非公式アプリ。
ワイヤーフレームをCacooで作成している人はぜひ入れておきたいです。
まあ、非公式アプリということで、痒いところに微妙に手が届かないところもあるのですが…
スマホでワイヤーフレームを確認しよっと思った時に便利なアプリです。


ScriptBrowserplus

ScriptBrowserPlus (無料) 
(2012.08.23時点)
posted with ポチレバ
スマホサイトのソースコードを見るのに便利なアプリです。
PCのエミュレータではスマホサイトが閲覧できないケースも多々あります。例えば、他のサイトで利用している機能を自分のサイトでも実装したいけど、そのソースコードをちょこっと拝見したいということもあると思います。その時に、エミュレータで見れなくても、これを使えばバッチリ確認できますよ。



Chrome

Chrome (無料) 
(2012.08.23時点)
posted with ポチレバ
ご存知Google Chromeの公式iPhoneアプリ。
個人的には戻るボタンの位置が右上にあることが気になってデフォルトのブラウザとしては使用してないですが、Safariから乗り換えたよという人も多いくらい評価が高いアプリです。

なぜこれがWeb制作に活用できるかというと、「PC版サイトをリクエスト」する機能がついているからです。どういうことかというと、普通Safariではスマホ用のサイトしか見れません。時々、気が効いたサイトだとPC版UIに表示を切り替えるリンクがついていたりしますが、そうなっていないものも多いです。

Chromeの「PC版サイトをリクエスト」を利用すれば、そのように気が効いたサイトじゃなくてもPC版のページを見ることができます。

スマホサイトのレイアウトやUIを考えるときに、他のサイトがPC版とんなふうに差別化してるのかなと気になることがあるのですが、そんなときに重宝します。


GalapaBR

GalapaBrowser (無料) 
(2012.08.23時点)
posted with ポチレバ
これはガラケーでの表示をチェックするために利用しています。
サイトに修正を入れる際、スマホ版だけでなくガラケー版にも同様の修正をかけることって多いと思います。その時に、両方のデバイスでちゃんと修正が反映されているかをチェックするのに使ってます。
まあ、あくまでこれはエミュレーターなので正確な表示はもちろんできないのですが、スマホ端末上で両方見れるのは便利です。


SBrowser
これもGalapaBRと同じくガラケーエミュレーター。
SBrowserもGalapaBRもどちらも完璧ではなく、クセがあるので、一応両方入れてます。
ただし、こちら現在は配布されていないのかな?
かなり昔にインストールしたものですが、今回の記事を作成するにあたって発見できませんでした。


WordPress

WordPress (無料) 
(2012.08.23時点)
posted with ポチレバ
WordPressで運用しているブログのエントリーを端末上から修正したりしたい時に活用できます。ただ、僕自身、あまり活用回数は多くないです。


Blogger

Blogger (無料) 
(2012.08.23時点)
posted with ポチレバ
ノマドワーカースタイルを稼働させているBloggerの公式アプリ。
PCがなくても、文言修正などがモバイル端末上でできるので、万が一のために入れています。
これもあまり活用回数が多くないです。