このページの本文へ

jQuery Mobile×PhoneGap連携機能にアドビの本気度を見た!

Dreamweaver CS5.5でスマホアプリ作ってみた

2011年04月19日 11時00分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

PhoneGapでネイティブアプリに変換

 スマートフォンサイトができたら、今度はネイティブアプリに変換してみる。「PhoneGap」は、HTML/CSS+JavaScriptで作成したWebページをスマートフォンのアプリにパッケージ化するオープンソースのソリューションだ。Dreamweaver CS5.5ではPhoneGapとの連携機能が搭載され、PhoneGapの機能をDreamweaverからシームレスに利用できる。

 最初に、ツールバーの「サイト」→「モバイルアプリケーション」→「アプリケーションフレームワークの設定」から、Android/iOSのSDKのパスを設定する(iOSはMac OS版のみ利用可能)。今回はWindows版なので、Android SDKのみ設定する。PCにAndroid SDKがインストールされていない場合、「簡易インストール」をクリックするとSDKのダウンロードと設定が自動的にスタートする。

「サイト」の中に「モバイルアプリケーション」が新たに追加された
Android SDKのパスを設定する

 次に、「モバイルアプリケーション」→「アプリケーション設定」で、作成するアプリの名前や作成者名、ホームスクリーンアイコンの画像を設定する。

作成するアプリの情報を入力する

 設定が終わったら、「モバイルアプリケーション」→「ビルドおよびエミュレート」→「Android」を選択しよう。

「ビルドおよびエミュレート」「Android」を選択する

 ビルドが終わるとAndroidエミュレーターが自動的に起動し、完成したアプリの動作をすぐに確認できる。

しばらくするとエミュレーターが起動する
作成したアプリのアイコンが追加されている
アプリを起動すると、作成したスマートフォンサイトが表示される。表示結果は標準のブラウザーと同じだ

 「アプリを作る」と聞くとハードルが高いが、ここまで面倒な操作や難しい設定はなく、あっという間にできてしまった。Objective-CやJavaの知識どころか、Android SDKを自分で用意する必要すらない。今回は単にスマートフォンサイトをアプリ化しただけだが、JavaScriptを使えばもっと本格的なアプリも作れるだろう。

 これまでのDreamweaverはどちらかいうと、業界で必要とされる機能を後追いして実装している感があった。しかしCS5.5の新機能は、jQuery MobileやPhoneGapといった最新のテクノロジーをいち早く取り込み、すでに十分実用的なレベルまで作り込まれている。アップグレードにかかる費用は決して安価とはいえないが、スマートフォン関連のビジネスを拡大したいWeb制作者には十分魅力的な新製品だ。間もなく公開される体験版で実力を確認して、導入を検討してはどうだろうか。

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング