iPhoneとiPadのハイブリッドにする
サンプル2はiPhone専用として作成しましたが、iPadにも対応させたい場合もあるでしょう。ただ、iPhone専用のアプリをiPadで実行すると、以下のようにiPad画面内にiPhoneの画面領域が表示され、その中にアプリの画面が描画されます。iPadの画面に合わせて2倍に拡大もできますが、拡大すると写真がぼけた感じになってしまいます。
iせっかくの大画面なのですから、iPadにはiPadに最適なサイズと解像度で表示したいところです。そこで、iPhone用のアプリをそのままiPadで動作させるのではなく、iPhone/iPadそれぞれのスペックに応じたアプリを作成しましょう。
まず、以下のようなiPhone用とiPad用の画像を用意しておきます。
iPhone用 | 320×480 |
iPad用 | 768×1024 |
次に、新規にプロジェクトを作成し、「Product」のポップアップメニューで「iPhone/iPad」を選択します。iPad専用にしたい場合は「iPad」を選択してください。
プロジェクト名と保存先を指定します。
プログラムはサンプル2のコードをそのまま流用します(コピー&ペーストで構いません)。用意した画像は、iPhone用を「images」、iPad用を「images2」フォルダに入れ、どちらもResourcesフォルダに入れておきます。
続いて、アプリが動作している環境を調べ、表示する画像を切り替える処理を追加します。NimbleKitには、機種/デバイスを判別するためのクラスやメソッドが存在しないので、navigator.userAgentの文字列を調べ、iPadかどうかを判別します。iPhoneとiPadのuserAgent文字列は以下のようになっています。
- iPad
- Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8F190
- iPhone
- Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8F190
サンプル3では、if文を使って、userAgent内に「iPad」の文字があればiPad用のフォルダを参照するようにパスを変更しています。また、デバイスの表示幅に合わせて画像の表示サイズを決定するため、windowオブジェクトのinnerWidthとinnerHeightでデバイス幅を取得し、init()メソッドの引数に指定しています。
iOSシミュレーターを使って動作を確認してみましょう。プロジェクトメニューから「アクティブな実行可能ファイルを設定」>「ImageViewer_iPad - iPad Simulator 4.3」を選択し、プロジェクトウィンドウで「ビルドと実行」ボタンをクリックします。
iOSシミュレーター上でiPhoneとiPadを切り替えると、デバイスに応じた画像が表示されます。
■サンプル3
<html> <head> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="NKit.js"></script> </head> <body> <script> var count = 0; var dir = "./images/"; if(navigator.userAgent.indexOf("iPad") > -1){ dir = "./images2/"; // iPad用画像がある場所 } var imageURL = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; var imageview = new NKImageView(); var w = window.innerWidth; var h = window.innerHeight; imageview.init(0,0, w, h, dir+"1.jpg"); imageview.show(); setInterval("rotateImage()", 2000); function rotateImage(){ count = count + 1; count = count % imageURL.length; imageview.setImage(dir+imageURL[count]); } </script> </body> </html>