※スマホ対応はしてません。

タグ: iPhone

iPhone向けサイト開発に便利なiOSシミューレーターのインストール方法。あと使い方やTipsとか。

カテゴリー: Web, 開発環境

iPhone版のサイトを製作する手順ってどうしてますか。いちいちサーバーにアップロードして実機で確認して、問題があれば修正してアップロードして確認して……って面倒ですよね。

そんなときはシミューレーターです。Macでシミューレーターを起動すると、ローカルファイルにアクセス出来ます。またインスペクター(開発者ツール)を使ってPC版の開発のようにデバッグも行えます。

さくっとインストールしてみましょう!

なお公式に配付されているのはMac版のみです。あとMac OSのバージョンが古いと利用できません。

インストール手順

こういう順序です。

  1. Apple Xcodeをインストールする(無料)
  2. iOSシミューレーターを探す
  3. 起動する

Xcodeをインストールする

(さらに…)

Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。

カテゴリー: JavaScript, Web

開発ツールの設定から、エミュレートするかしないかを設定できます。

右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ&ドロップでtouchstart, touchmove, touchendが発火するようになる。

開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。

ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。(ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。) 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。

Settingsの項目は、なんか気がついたら(Chromeが更新されてて)変わってるから、ときどき覗いてみるといいんじゃないでしょうか。

ちゃんちゃん。

2012/05/29 追記:

せっかくなんで過去記事貼っておきます。

これマルチタッチで操作するやつなんだけど、一本でも移動できます。

あと触ってみた感じ、ちょっと不安定なところもあるみたい。onにしっぱなしだとうまく動かなくなる場合がある。一度offにしてから画面を再読み込みし、再びonにすると、正常に動き始めた。