PhoneGapの環境を整えよう! (3/5)
作成:2012-03-05 07:53
更新:2012-03-05 07:53
更新:2012-03-05 07:53
■iPhone開発のプロジェクトを作る
では、PhoneGapを利用した開発の手順を説明しましょう。まずは「iPhone」のアプリ開発からです。iPhoneの開発は、先に触れたようにXcodeで行います。Xcodeを起動し、新しいプロジェクトを作成しましょう。
1. 新規プロジェクトの作成
Xcodeを起動して現れる「Welcome to Xcode」ウインドウにある「create a new Xcode project」のボタンをクリックするか、あるいは<File>メニューの<New>のサブメニューにある<New Project>を選びます。
2. テンプレートの選択
現れた「Choose a template for your new project」ダイアログの左側にある「iOS」という項目にある「Application」を選択すると、画面にさまざまなプロジェクトのアイコンが現れます。ここに「PhoneGap-based Application」というアイコンが追加されているはずです。これを選択して「Next」ボタンを押します。
3. プロジェクト名など
次に進むと、プロジェクトの名前などを入力する設定が現れます。これは以下のように行います。
Product Name:プロダクトの名称を入力します。ここでは「pgapp」としておきました。
Company Identifier:開発者IDを指定します。ここでは「jp.tuyano.phonegap」としておきました。
Use Automatic Reference Counting:ARCという機能を使うためのものです。普通はONにしておきます。
4. 保存場所の指定
次に進むと保存場所を選択するダイアログが現れます。ここでフォルダを選び「Create」ボタンを押すとプロジェクトが生成されます。
5. プロジェクトの実行(失敗)
ウインドウの左上にある「Run」ボタンをクリックします。プロジェクトをビルドし、iOSシミュレータを起動してアプリが実行されます。ただし! この段階ではエラーになってアプリはすぐに強制終了します。そのままXcodeの「Run」の隣にある「Stop」ボタンを押して実行を中断します。
6. 「www」をプロジェクトに追加
作成したプロジェクトのフォルダをFinderで開いてください。その中に「www」というフォルダが自動作成されています。このフォルダを、Xcodeのウインドウの左側に表示されているプロジェクト名の部分(青いファイルのアイコン)にドラッグ&ドロップします。画面にダイアログが現れますが、そのまま設定などは変更せずFinishしてください。これで「www」フォルダがプロジェクトに組み込まれます。
7. プロジェクトの実行(成功)
もう一度、Xcodeの「Run」ボタンを押してプロジェクトを実行しましょう。今度は問題なくアプリが起動します。起動すると画面にアラートが表示されますが、これはデフォルトでそういうJavaScriptが用意されているためです(要するにスクリプトを動かすサンプルですね)。表示はただのテキストが表示されているだけのものですが、とりあえず「プロジェクトを作ってビルドし実行する」という基本はこれでできるようになりました!
1. 新規プロジェクトの作成
Xcodeを起動して現れる「Welcome to Xcode」ウインドウにある「create a new Xcode project」のボタンをクリックするか、あるいは<File>メニューの<New>のサブメニューにある<New Project>を選びます。
2. テンプレートの選択
現れた「Choose a template for your new project」ダイアログの左側にある「iOS」という項目にある「Application」を選択すると、画面にさまざまなプロジェクトのアイコンが現れます。ここに「PhoneGap-based Application」というアイコンが追加されているはずです。これを選択して「Next」ボタンを押します。
3. プロジェクト名など
次に進むと、プロジェクトの名前などを入力する設定が現れます。これは以下のように行います。
Product Name:プロダクトの名称を入力します。ここでは「pgapp」としておきました。
Company Identifier:開発者IDを指定します。ここでは「jp.tuyano.phonegap」としておきました。
Use Automatic Reference Counting:ARCという機能を使うためのものです。普通はONにしておきます。
4. 保存場所の指定
次に進むと保存場所を選択するダイアログが現れます。ここでフォルダを選び「Create」ボタンを押すとプロジェクトが生成されます。
5. プロジェクトの実行(失敗)
ウインドウの左上にある「Run」ボタンをクリックします。プロジェクトをビルドし、iOSシミュレータを起動してアプリが実行されます。ただし! この段階ではエラーになってアプリはすぐに強制終了します。そのままXcodeの「Run」の隣にある「Stop」ボタンを押して実行を中断します。
6. 「www」をプロジェクトに追加
作成したプロジェクトのフォルダをFinderで開いてください。その中に「www」というフォルダが自動作成されています。このフォルダを、Xcodeのウインドウの左側に表示されているプロジェクト名の部分(青いファイルのアイコン)にドラッグ&ドロップします。画面にダイアログが現れますが、そのまま設定などは変更せずFinishしてください。これで「www」フォルダがプロジェクトに組み込まれます。
7. プロジェクトの実行(成功)
もう一度、Xcodeの「Run」ボタンを押してプロジェクトを実行しましょう。今度は問題なくアプリが起動します。起動すると画面にアラートが表示されますが、これはデフォルトでそういうJavaScriptが用意されているためです(要するにスクリプトを動かすサンプルですね)。表示はただのテキストが表示されているだけのものですが、とりあえず「プロジェクトを作ってビルドし実行する」という基本はこれでできるようになりました!
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る