Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

HTML・CSSでモバイルアプリ作成!PhoneGap Buildを使ってみよう

どうもこんにちは!僕です。
今日は、HTMLやCSSを使ってモバイルアプリが作れてしまう『PhoneGap Build』を紹介していきたいと思います。

PhoneGapとは、Adobe社より公開されている、スマートフォン向けアプリケーション制作のためのフレームワークです。
簡単に説明すると、「HTML・CSSの知識さえあればスマホアプリが作れてしまう」スグレモノです。
そして、今回解説する『PhoneGap Build』は、ソースコードをアップロードすることでアプリをビルドしてくれるWebサービスとなっています。

それでは、実際に使ってみましょう。

HTML・CSS・でコーディングをする

f:id:webarekore:20121126020543j:plain

今回はとりあえず「Hello World!!」と表示するだけのアプリを作ってみます。
コーディングが終わったら、index.htmlとして保存し、zipファイルに圧縮しておきましょう。



PhoneGap Buildのサイトへ行く

f:id:webarekore:20121126020517j:plain

zipファイルが用意できたら、Adobe PhoneGap Buildのサイトへ行きましょう。
「Get started!」ボタンをクリックして下さい。

f:id:webarekore:20121126020608j:plain

すると、ページ下部にジャンプします。
「free」と「$9.99/mo」の2つのボタンがありますが、今回はとりあえず使ってみるだけなので「free」ボタンをクリックして下さい。

f:id:webarekore:20121126020650j:plain


このログイン画面が表示されます。
PhoneGap Buildを使用するにはログインが必要です。
Adobe IDGithubでのログインが可能となっています。

 


zipファイルをアップロード

f:id:webarekore:20121126020945j:plain

 

ログインに成功すると、この画面が表示されます。

今回はzipファイルをアップロードするので、「Upload a .zip file」ボタンをクリックして下さい。

 

 

アプリの名前を設定

f:id:webarekore:20121126021338j:plain

 

アップロード完了後、この画面が表示されます。

画面上で「PG Build App」と表示されているところが、作成するアプリの名前になります。

自由に名前を決められますが、今回はとりあえず「Hello World」と付けましょう。

 名前を付けたら、右下の「Ready to build」ボタンをクリックしましょう。

ここまでくればもう一息です!

 

作成完了!

f:id:webarekore:20121126022008j:plain

 

ボタンをクリックすると、アプリのビルドが開始されます。

しばらく待つと、このように6つのボタンが表示されます。各ボタンをクリックすると詳細な設定ができます。

ビルド完了後は、右のQRコードを対応スマートフォンで読み取るとダウンロードが開始されます。

(今回は、Windowsで作成したのでiOSアプリは作成できませんでした。このように、アプリが作成できなかった時はボタンが赤くなります)

 

 

…と、このようにHTML・CSSの技術だけでアプリを作成することができました!

今回は僕の都合上(スマートフォンを持っていないのです;;)、実機テストをすることができませんでしたが、Android端末を持っている方はすぐにでもアプリ作成・動作確認をすることができます。

皆さんも、PhoneGap Buildで簡単なアプリを作ってみてはいかがでしょうか?