iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。
シミュレーター(エミュレーター?よくわからn)はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな?w
Mobilizer
動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。
4つ同時に起動可能
日本なら、基本的にiPhoneとAndroidだけあれば困らなそうですけどどうなんでしょうかね・・シェアとかよくしらない。あいにくAndroidは入っていませんでしたが、iPhone4の確認が出来るだけでも大きいのでは無いかなと思います。
webkit
css3で作ったドラえもんも問題なく表示。-webkitプレフィクスのみが付いたcssで動かしてる目の部分もアニメーションしましたのでsafari同様のレンダリングをしてくれると考えて問題ないと思います。ちょっとこの辺詳しくないので変な事言ってたらごめんなさい。
User agent
ただ単にそのデバイスと同じ幅で表示するのではなく、それぞれユーザーエージェントが設定されているみたいです(多分)。上記は当ブログにアクセスした状態のキャプチャです。このブログではiPhoneによるアクセスのみ、別のWPテーマに切り替えていますが、このようにMobilizerでアクセスしてもちゃんとテーマが切り替わってくれました。未完成のテーマで恥ずかしいんですけど・・
Media Query
Media Queryによる表示の切り替えも勿論問題ありません。上記はTrent Walton のキャプチャです。
ローカル上のHTMLも確認できる
わざわざサーバーに上げなくてもローカル上のHTMLを起動しているシュミレーターにドラッグ&ドロップすれば確認できます。
地味に嬉しいキャプチャ機能
表示している状態を端末と一緒にキャプチャ撮れます。これがかなり気に入りました。表示している端末上で右クリックでメニューが出ますので、PNGで書きだせばおkです。以下がテストしたキャプチャ。
きれい!これが気に入って記事にしたのでしたwクライアントさんに出来を見せる時もいいのでは無いでしょうかね。
雑感
ただ、どうもまだ不具合というか、操作性で微妙な点が見受けられます。例えば、WinだとURLボックス脇のリロードは効いてくれませんので、URL入れてエンター押さなきゃだし、たまに表示が白くなってしまい、再起動せねばなりません。起動も早いからいいんですけど・・
今のところ目立つのはこの2点くらいですけが、がっちり検証してないので他にもあるかもです。あ、横スクロールも出ないし、フリック等も出来ないですので、モニタより横に広がってしまう部分は多分非表示になります。「WebサイトをiPhoneに最適化」する際に利用するシュミレーターですね。
多くの場合、ちょっと確認したいだけだったりするので個人的には嬉しいソフトウェアでしたので多少のストレスも気にせず使い続けそうです。いちいちiPhoneでアクセスするほうが面倒ですしね・・
まぁ試しに使ってみる程度で如何ですかねw良ければそのまま使い続ければいいだけですしね。以下よりダウンロードできます。iPhone持ってない、という方はぜひどうぞ。
※シミュレーターが正しい言い方なんすねwお恥ずかしい。
2011 年 6 月 30 日 11:24 AM
動作サクサクで感動しました!
というか逆に速すぎて動作感のプレビューには不向きかも…
メディアクエリのレイアウト確認、キャプチャ専用と考えたらものすごく快適なソフトかもですね!
これでiPhoneでキャプチャ撮って送ってはめこんで…って手間が省けます。
ありがとうございました。
2011 年 6 月 30 日 1:22 PM
こんにちは!動作速いですねー。基本的にパソコン側の通信速度ですしね。
たははwそうですねw個人的にはあのiOSのもっさい動きまで再現されちゃうと困っちゃうので好みが分かれそうですwおっしゃるようにレイアウトの確認やモックアップなどに使えるかなと思います:)
まだリリース間もないみたいなので不具合があればフィードバックを送ってあげてください:D
2011 年 6 月 30 日 12:31 PM
確かに、確認作業にはもってこいのよくでた AIR アプリだと思います。
表示だけでなく、キャプチャができるというのも心憎い 🙂
jQuery Mobile 独自の『戻る』ボタンが動かないような気がしますが、簡単に確認できるだけでもありがたい。
2011 年 6 月 30 日 1:27 PM
こんにちは!
ですねー、同感です。楽になりますなぁw
ん?僕の方では動作確認出来ましたけど戻れないですか?
http://jquerymobile.com/demos/1.0b1/
デスクトップ上のフォルダに置いたものではなく、ローカル環境に設置したサーバー上で再度確認してみてください:)
2011 年 6 月 30 日 5:46 PM
jQuery Mobile の『戻る』ボタンですが、『data-rel=”back”』とするとダメっぽいです。
href を記述すると大丈夫みたい。
2011 年 6 月 30 日 7:41 PM
ありゃりゃ、マジですかwうーん、ちょっと検証してみますー!ご報告有難うです!
あ、もし良かったらフィードバック送ってあげてください!募っているようですので:)
2011 年 6 月 30 日 1:49 PM
HTCはAndroidですよ。
2011 年 6 月 30 日 4:05 PM
こんにちは!
Oh…そうなんすねw消しときましたー!教えてくれてありがとうです:D
2012 年 4 月 11 日 12:29 AM
はじめまして!AIR開発経験者です。
AdobeAIRはCSSのbox-shadow描画のメモリ消費量が著しく、
その為かこのシュミレータはbox-shadowをサポートしていないようです。
またWinXPなど、テキストのアンチエイリアスをサポートしていないOSでは
シュミレータ上でもアンチエイリアスを確認することはできません。
よって、最新版のSafariからサイト等を確認することが最も有効的かも知れません。
※Safariの設定によりユーザーエージェント、アンチエイリアスを変更/有効にすることができます。
2012 年 4 月 11 日 1:29 AM
はじめまして、こんにちは。おおー!色々な情報有難う御座います:)
でも、結局クライアントワークなら確認は実機でしなくてはなりません。ですので、個人的にはこのシミュレーターは「そういうもの」として利用しています。Safariでも良いといえば良いのですが、これはこれで用途に応じて利用しています!