*

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にも対応できて便利だと思います。

以上

 

 

 

 

関連記事

no image

思い出駅、実家にいる昔の自分前

まもなく、思い出駅~思い出駅~ 実家にいる昔の自分前です きょうは、日帰りで帰省していました。

記事を読む

no image

モートピ駅、008日目の「きょうの日経平均ポイントは、押し目待ちに押し目なし」前

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

記事を読む

no image

モートピ駅、283日目の「中国通信大手、米から締め出しを。安全保障を理由に」前

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

記事を読む

no image

ノート173「ゲーセンで出会った不思議な子の話」を読んで思い出したこと

    ゲーセンで出会った不思議な子の話:哲学ニュースnwk

記事を読む

no image

モートピ360ブラックベリー争奪戦?

◆モーサテトピックス <欧米市場動向> ・NYはまだクリスマス、明日は休み ・NYダウは、124ドル

記事を読む

no image

ノート155TaskChute2に移行

やっとTaskChute2に、移行しました。 明後日から、いや今夜から?使いはじめます。 お話で聞

記事を読む

slooProImg_20130402073928.png

ぐぐるろご駅、きょうは「マリア ジビーラ メーリアン生誕366周年」前

まもなく、ぐぐるろご駅〜ぐぐるろご駅〜 きょうは「マリア ジビーラ メーリアン生誕366周年」前です

記事を読む

no image

私が”必ず”毎日使ってるアプリ

はじめに @kuracyanさんのブログ「Singer Song iPhone」で、”必ず”毎日使

記事を読む

no image

好きなお店駅、自宅付近の気になる居酒屋さんは最高前

まもなく、好きなお店駅~好きなお店駅~ 自宅付近の気になる居酒屋さん「はれ晴れ」前です おでんが気

記事を読む

slooProImg_20130422073150.jpg

ぐぐるろご駅、きょうのぐぐるろごは「鯉のぼりセット」前

まもなく、ぐぐるろご駅〜ぐぐるろご駅〜 きょうのぐぐるろごは、「鯉のぼりセット」です。 鯉のぼ

記事を読む

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 ↑