*

003PhoneGapを使ってiPhoneアプリつくるよ

公開日: : 未分類

はじめに

少し前に、サンプルのアプリを自分のiPhoneに入れることができただけで満足してしまった、iPhoneアプリ開発。また、そろりと再起動してみようかと思い立ちました。

自分のiPhoneアプリ開発の方針としては、iPhoneアプリといってもObjective-Cという言語は使わずに、フレームワークのPhoneGapを使おうというものです。そうです、この本です。

iPhoneアプリケーション開発ガイド――HTML+CSS+JavaScriptによる開発手法(オライリー)

新しい言語を覚えるのは楽しいけれど、やりたいことは言語を覚えることじゃなくてアプリをつくることなので、簡単そうな方法があるのならばありがたく使わせてもらいます。HTMLやWebアプリなら今までも少しはやっていたので、なんとなく「やれそう」という感じがすることも大きいです。

そんなこんなで、今日はまず環境の再構築からはじめました。

なにがともあれXcode

iPhoneアプリの開発には、MacOSが必要です。そして、開発環境のXcodeです。PhoneGapを使ってiPhoneアプリをつくる場合にでも、これは普通のiPhoneアプリ開発と同じく必要です。

AppStoreでXcodeが出てきたときは、確か600円位したのですが、今日みたら無料になっていました。どうやら、Lionが出た時点で無料のキャンペーンが開催されているそうです。前にXcodeをダウンロードしたときにはAppStoreはなかったので、Appleに無償の開発者登録をしてXcodeを無償でダウンロードしていました。いまは、それよりハードルがさらにさがったと思います。

ちなみに、AppStoreでインストール済みとなっても勝手にインストールされるわけではなく、アプリケーションフォルダに「Install Xcode」というアプリケーションができあがるだけですので、このアプリケーションを実行してXcodeをインストールします。ここはナビゲーション通りに画面をすすめていくだけでインストールを完了しました。

そしてPhoneGapインストール

PhoneGapのWebサイトを開いて、左上にあるPhoneGapのZipファイルをダウンロードします。

展開されたファイルの中から、「iOS」というフォルダを開いて、その中のdmgファイルを開きます。

その中に入っている、.pkgファイルを実行してインストーラを起動させます。

PhoneGapのインストールも、特に画面の指示に従っていけば問題なくインストールできました。

PhoneGapがインストールされると、iOSの新規プロジェクトの作成テンプレートの中に、「PhoneGap-based Application」というのが出現しますので、これをクリックして新規プロジェクトの作成をします。

これで、iPhoneアプリの作成の準備ができました。

が…追加でやらないといけないことが2つ

以前はそのままでサンプルコードがビルドできたのですが、今のバージョンでは(自分の環境では?)追加で2つのことをやらねばなりませんでした。

1つ目は、「www」フォルダをプロジェクトに登録することです。

プロジェクトを作成したフォルダをFinderで開くと、「www」フォルダがあります。そのフォルダをドラッグ&ドロップで、ファイルツリーのトップフォルダに持っていきます。

そうすると、「wwwフォルダってのを追加するのか?」と聞いてくるので、そのままでFinishボタンを押して追加します。

2つ目は、「PhoneGap.plist」というファイルをプロジェクトに追加することです。
エラーメッセージでみると、どうやらこのファイルも必要らしいのだけど、プロジェクトのフォルダツリーを探してもみつかりません。よくよくみたら、上記のwwwフォルダがあった同じところに、「HelloWorldApplication」(自分がつけたアプリケーション名)というフォルダがあり、その中に入っていました。これも、wwwフォルダと同じように、プロジェクトのフォルダツリーのトップにドラッグ&ドロップして登録します。

最初はHello World!

wwwフォルダの中にある、「index.htm」がアプリ起動後に表示されるHTMLファイルになります。なので、このファイルに、「Hello World」 と書いておきます。最初はやはりこのお決まりのフレーズです。

ビルドすると、ちゃんとiPhoneシミュレータで表示されました。

このindex.htmにHTMLやJavaScript、場合によってはjQueryなどを駆使してアプリケーションを作っていくことでiPhoneアプリケーションをつくることができます。なんと素晴らしい。

任意のWebページの表示

index.htmはHTMLなので、リンクを書いて既存のWebアプリケーションを開けばそのままアプリ内に表示させることができます。早速やってみようと思いました。が、ここでも一つつまづきました。

以前はそんな設定なかったと思うのですが、開くことのできるHostを許可してあげないといけないようになっていました。このサンプルページに書いてあります。

設定するファイルは、さきほどプロジェクトに追加した「PhoneGap.plist」ファイルです。このファイルを開くと、「ExternalHosts」に行を追加して、開きたい外部のHost名を追加します。ここでは試しに自分のブログを開かせましたので、「shiko-train.com」と追加しました。

そうすると、めでたく外部のWebサイトを開くことができました。

ここまで、103分でできました。もしかすると、このブログをかき上げる時間の方が長いかもしれません…。

さいごに

PhoneGapを使えば、これまで以上に気軽にiPhoneアプリ開発をはじめることができるに違いありません。

おまけ

このPhoneGapは優れもので、同じソースでAndroid版のアプリも作れるようになっています。そっちは自分は試してみてはいませんが、ひとつのソースで 、iOSにもAndroidにも対応できて便利だと思います。

以上

 

 

 

 

関連記事

slooProImg_20130508065016.png

ぐぐるろご駅、きょうは「ソウル バス生誕93周年」前

まもなく、ぐぐるろご駅〜ぐぐるろご駅〜 きょうは、「ソウル バス生誕93周年」前です 記憶に残って

記事を読む

slooProImg_20130530060700.jpg

モートピ駅、150日目の「地価上昇地区、半数超す。地方は、ばらつき目立つ」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前です 詳細なニュース内容にお越

記事を読む

no image

モートピ081:国債利回り、じわり変化。くすぶる財政懸念

◆モーサテトピックス <欧米市場動向> ・三菱自動車、戦略自動車を発売へ ・日産、ダットサンブランド

記事を読む

no image

モートピ駅、278日目の「小型iPad、KDDIが契約交渉か」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前です 詳細なニュース内容にお越

記事を読む

no image

前のブログと関連のあるドメイン名でリスタート

はじめに 少し前にWordPressでブログをはじめていますが、今日あらためて新しいドメイン名

記事を読む

no image

モートピ046:ユーロ圏財務相会合、20日まで延期

◆モーサテトピックス <欧米市場動向> ・NYダウは、20ドル安の12852ドル ・ドル円は、78.

記事を読む

no image

モートピ349イタリア国債、再び危険水域へ

◆モーサテトピックス ・NYダウは、130ドル安の11824ドルで推移 ・ユーロ、1月以来の安値 ・

記事を読む

no image

モートピ駅、テレビ東京ビジネスオンデマンドがすごい!前

まもなく、モートピ駅〜モートピ駅〜 テレビ東京ビジネスオンデマンドがすごい!前です テレビ東京ビ

記事を読む

no image

ノート160きりたんぽ鍋会での話

昨日は、友人らと一緒に鍋会をしました。きりたんぽ鍋です。 鶏だしがよくでていて、おいしかったです

記事を読む

no image

好きなモノ駅、パッと見分からないけどわかる人には分かる位がいい前

まもなく、好きなモノ駅~好きなモノ駅です パッと見分からないけどわかる人には分かる位がいい前です 気

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

slooProImg_20131113060635.jpg
モートピ駅、317日目の「消費者心理、10月は悪化。下げ幅は東日本大震災以来の大きさ」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前

slooProImg_20131112060725.jpg
モートピ駅、316日目の「福島県沖で洋上風力発電がスタート」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前

slooProImg_20131028060548.jpg
モートピ駅、301日目の「Twitter上場で、26日に予行演習」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前

slooProImg_20131022060428.jpg
モートピ駅、295日目の「電子部品産業、復調鮮明に。スマホや車、市場に広がり」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前

slooProImg_20131021060541.jpg
モートピ駅、294日目の「香港、テレビ開局申請却下でデモ」前

まもなく、モートピ駅~モートピ駅です。 最新のニュースヘッドライン前

→もっと見る


  • おがわ(@ogw_m)
    33歳のIT系のSIerに勤めるシステムエンジニア。仕事ではプログラムは書かないですが、趣味でプログラミングをやります。いつのまにか増えていたApple製品とライフハックに興味があります。iPhoneを持たせておくと静かになります。Twitterのタイムラインをみる時間が、安らぎタイム。既婚。

PAGE TOP ↑