*

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

モートピ駅、164日目の「首都高の空中権に意欲、国土交通相」前

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

記事を読む

no image

ノート193:日々の記録で知る、年間の生活パターン

10年日記から知る 去年から、10年日記を付けはじめています。去年は1年目なので、淡々と記録をし

記事を読む

no image

モートピ040:中国、最低賃金5年で倍にする政府計画

◆モーサテトピックス <欧米市場動向> ・NYダウは先日終値と同水準の12878ドル ・ドル円は、7

記事を読む

no image

宣言:曖昧なことを言うクセを直します

宣言 この夏を超えるまでには、曖昧なことを言うクセを直します もし言ったときには、嫁さんのお願いご

記事を読む

slooProImg_20130426060447.jpg

モートピ駅、116日目の「企業、不動産に先行投資。低金利が追い風に」前

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

記事を読む

slooProImg_20130329060655.jpg

モートピ駅、088日目の「株価、10銭きざみに。来年1月に試験導入、15年本格導入へ」前

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

記事を読む

no image

モートピ026米、少なくとも2014年後半まで、ゼロ金利延長

◆モーサテトピックス <欧米市場動向> ・米、少なくとも2014年後半まで、ゼロ金利延長へ。実質的な

記事を読む

no image

メモ:Twitterで気軽にTasQuestがしたい

まろさん(@maro_draft)がTaskChute2のアドオンで作られているTasQuestです

記事を読む

no image

モートピ駅、305日目の「日立、英の原発会社の買収」前

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

記事を読む

no image

メモ:WordPressの初期設定では、検索エンジンブロック設定

さっき気がついたので、とりあえずメモの投稿をしておきます。 管理画面をみていたら、偶然以下の設定を見

記事を読む

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 ↑