Ｗｅｂアプリ開発日記 -4ページ目
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

Ｗｅｂアプリ開発日記

e-veryStudyシステム(Java)をiPhoneに搭載されているSafari[WebKit]に対応する為の、ソフト開発日記。

<< 前ページ次ページ >>

第１章　［iPhoneアプリ開発 ］事前準備作業　その2

第１章　［iPhoneアプリ開発 ］事前準備作業　その2



開発に必要なソフトウェアは，アップルから無償で提供されています。



「iPhone SDK」という開発キットです。



iPhone SDKをインストールすることで，XcodeからCocoa Ｔｏｕｃｈを使ったり，開発中のアプリをMac上で動かす



ための「iPhone シミュレータ」を使ったりできるようになります。開発中の画面設計ツール「Ｉｎｔｅｒｆａｃｅ Builder」



も一緒にインストールされるで、画面開発にはとても便利です。



「iPhone SDK」をダウンロードする時は、AppleIDが必要です。



Apple IDの登録は、アップルのホームページのから行えます。



ホームページ内の「iPhone Dev Center 」に移動して、右上の「Register」をクリックして登録します。



Ｗｅｂアプリ開発日記





Ｗｅｂアプリ開発日記



日本語で入力すると、文字化けしてしまうので、気をつけ下さい。



無事登録が完了すると，登録したApple IDを使ってiPhone Ｄｅｖ Ｃｅｎｔｅｒにログインできます。



ログインしたら，ページの中から「iPhone SDK」のダウンロードリンクを探し，クリックしてダウンロードします。



ダウンロードが完了すると，ダウンロードしたイメージを開き，中にある「iPhone SDK.mkpg」をダブルクリックして



実行します。




Ｗｅｂアプリ開発日記



「iPhone SDK のインストール」が表示されたら，画面の指示に従って先に進みます。



インストール完了したら、開発環境構築が完了です。


第１章　［iPhoneアプリ開発 ］事前準備作業　その１

第１章　［iPhoneアプリ開発 ］事前準備作業　その１




いよいよiPhoneアプリを本格的に作りこんでいきます。



まずは開発準備として、iPhoneアプリを開発するために必要なものを準備しました。




iPhoneアプリを作るために必要なハード関連

　　・Mac本体（インテルのCPUを搭載したもの）

　　・Mac OS X v10.5（Leopard）以降


　　・iPhone 3G



後は開発に必要なソフトウェアを揃えます。



次回は「iPhone SDK」という開発キットの取得とインストールを行います。






第１０章 ［WebKit活用術］横向き、縦向き、画面表示を調整する。

第１０章 ［WebKit活用術］横向き、縦向きで画面表示を調整する。



iPhoneの横向き、縦向きにした時に、画面サイズが合わない場合、この動作イベントで


画面サイズを最適化することが出来ます。


イベント内では、傾き角度で横縦を判断します。

【手順】

①まず、ボディ部に下記を記述してイベントの定義

　<body onload="updateOrientation()" Onorientationchange="updateOrientation()">

②Viewportの設定

　　<meta id="viewport" name="viewport" content="width=device-width, user-scalable=0" />

③ＪａｖａＳｃｒｉｐｔ関数

　function updateOrientation() {
　　//回転角度を検出
　　switch(window.orientation) {
　　//横向きを判定
　　case 90:
　　case -90:
　　　　document.getElementById("viewport").setAttribute('content','device-width=480,

　　　　　　　　　width=480,initial-scale=1.0,maximum-scale=1.0, user-scalable=0');

　　　　break;

　　//縦向きを判定
　　case 0:
　　case 180:
　　default:
　　　document.getElementById("viewport").setAttribute('content','device-width=320,

　　　　　　　　　width=320,initial-scale=1.0,maximum-scale=1.0, user-scalable=0');
　　　break;
　}
}



<< 前ページ次ページ >>