Dreamweaber CS 5.5 の「PhoneGap」でスマホのネイティブアプリ制作

July 7, 2011
phonegap_main.gif

前回、Dreamweaber CS 5.5 の「jQuery Mobile」対応機能で、スマートフォンサイトのサンプルを作ったので、今回は、これも 5.5 で新しく追加された「PhoneGap」の機能で、Android のネイティブアプリケーションに変換してみました。

PhoneGap とは

Nitobi 社が開発したクロスプラットフォーム・モバイルアプリケーションの開発フレームワークで、HTML + CSS +JavaScript を用いて、iPhone / Android のネイティブアプリケーションを開発できます。通常 Objective-C や Java を習得しないとできないことを代わりにゴニョゴニョしてくれる非常にありがたいオープンソースソフトウェア。

PhoneGap 公式サイト

PhoneGap の変換工程

スマートフォンサイトが完成したら、PhoneGap でアプリに変換。

アプリケーションフレームワークの設定選択

まず最初に、【サイト → モバイルアプリケーション → アプリケーションフレームワークの設定】で Android SDK のパスを設定する( Mac 版は iOS も可能)。

アプリケーションフレームワークの設定

「簡易インストール」で任意の場所に Android SDK をインストール(今回はデスクトップに)。

ネイティブアプリケーション設定

続いて、【モバイルアプリケーション → アプリケーション設定】で、アプリ名や作成者名、アイコンなどの画像を設定。

※アイコン画像(36 x 36 px)とスタートアップスクリーン画像(320 x 480 px)は、あらかじめ PNG 形式で作成しておこう。

ビルドおよびエミュレート

最後に、【モバイルアプリケーション → ビルドおよびエミュレート → Android 】でスマホアプリに一発変換。
※DW が機嫌のいい時とわるい時があるみたいで、エミュレータが開いてくれないことがある。

変換中

変換中...

エミュレータ画面1

お、Android が起動

エミュレータ画面2

ロックを解除して

エミュレータ画面3

アプリを選択すると

エミュレータ画面4

アイコンが表示された

エミュレータ画面5

スタートアップ画面も

エミュレータ画面6

jQuery Mobile で作成したサイトもちゃんと表示しました!


たったこれだけの作業で、スマホアプリが作成できるってスゴイっすね(内容はともかく...)。こんなボクでも何か作れるんじゃないかって勘違いさせてくれますわ(笑

STAFF_01 [KYS-LAB]: ページが見つかりません。