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

タグ: iOS

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

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

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

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

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

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

インストール手順

こういう順序です。

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

Xcodeをインストールする

(さらに…)

CSSでiOS風のチェックボタンをつくるチュートリアル。(CSS おれおれ Advent Calendar 2012 – 21日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 21日目

セフセフ。

iOSの選択ボタン。HTMLでいうチェックボタン的なもの。”Switch Control”というらしいです。

Switch Control風チェックボックス

HTML

こんな感じです。

(さらに…)

CSSでiOS風の選択ボタンをつくるチュートリアル。(CSS おれおれ Advent Calendar 2012 – 10日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 10日目

iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。

Segmented Control風ラジオボタン。

HTML

こんな感じです。

(さらに…)

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にすると、正常に動き始めた。

touch系イベントを一夜漬けして回転とか拡大とかやってみたよ。

カテゴリー: JavaScript

ちょっと機会があったので、ようやくtouchイベントを触ってみました。

iOS5でのみ動作確認。”This page”のリンクから別タブで開き直すとスムーズです。

  • 触れた位置を表示 (3点まで)
  • ブロックを、

    • スライドして移動
    • ピンチ・イン、ピンチ・アウトして拡大縮小
    • ピンチして回転

    (さらに…)