*

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

ぐぐるろご駅、きょうはエイダ・ラブレス生誕197周年前

まもなくぐぐるろご駅〜ぐぐるろご駅〜 きょうはエイダ・ラブレス生誕197周年前です いつもと違うG

記事を読む

no image

モートピ362ブラジル経済規模、イギリス抜き世界6位

◆モーサテトピックス <欧米市場動向> ・NYダウは、12ドル高の12306ドルで推移 ・ドル円は、

記事を読む

no image

ノート192:先週から続くダルさ、花粉症かも?

昨日、嫁さんに言われてハッとしたことです。 ここ1週間くらい、帰ってからのダルさがひどいのです。

記事を読む

no image

モートピ駅、277日目の「韓国との通貨協定拡充、延長せず。韓国からの要請なければ」前

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

記事を読む

no image

モートピ194:企業年金、給付絞る動き

194日目の水曜日。7/11のモートピです。 今朝もいい天気です。 ◆モーサテトピックス <欧米市

記事を読む

no image

ノート166自分のbotに、夕飯提案機能付けた

自分のbot、おがわましん(@ogw_machine)に夕飯提案機能を付けました。まだあんまり賢くは

記事を読む

no image

モートピ346インドネシア、紙おむつが売れている

◆モーサテトピックス ・先週末のNYダウは、186 + 12184ドル ・ドル円は、77.60円台

記事を読む

no image

モートピ駅、276日目の「産業界、派遣離れ進む。改正派遣法が施行。初の規制強化」前

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

記事を読む

no image

モートピ027消費税増税後も国債増。財政厳しく

◆モーサテトピックス <欧米市場動向> ・NYダウは、22ドル安の12733ドルで推移 ・ドル円は、

記事を読む

no image

タスク管理駅、Excelのちょい技でTaskChuteの利用時にドデカ時計を付けよう

はじめに はじめに断っておきますが、このページの内容はTaskChuteをお使いの方向けになります。

記事を読む

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 ↑