*

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_20131028060548.jpg

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

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

記事を読む

no image

モートピ025ユーロ圏が、緩やかに景気後退へ

◆モーサテトピックス <欧米市場動向> ・NYダウは、45ドル安の12662ドル ・NYダウは、朝方

記事を読む

no image

モートピ030イラン、駆け引き活発に

◆モーサテトピックス <欧米市場動向> ・先週末のNYダウは、74ドル安の12660ドル ・米市場、

記事を読む

no image

jubeatが楽しい

ゲーセンにある、jubeat(ゆびーと)という音ゲーを最近やってます。あんまりうまくありませんが、

記事を読む

no image

ノート158モーニングページ、続いてます

2習慣前にはじめたモーニングページ、毎日続いて今日で14日間になります。 モーニングページ、今の時

記事を読む

slooProImg_20130224164306.jpg

イベント駅、ふじもなおのアトリエオフに参加しました前

まもなく、イベント駅〜イベント駅〜 ふじもなおのアトリエオフに参加しました前です スーパー似顔絵ク

記事を読む

no image

モートピ047:中国、iPadの輸出入禁止申請。商標権主張の中国企業

◆モーサテトピックス <欧米市場動向> ・NYダウは、89ドル安の12788ドル ・NYダウは、上昇

記事を読む

slooProImg_20131002060501.jpg

モートピ駅、275日目の「米、18年ぶりの異常事態突入。株への影響は限定的」前

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

記事を読む

no image

モートピ駅、353日目の「きょうの日経平均ポイントは、騰落レシオの140%台。先高の兆候か」前

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

記事を読む

no image

モートピ032アジアが弱含み

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

記事を読む

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 ↑