PhoneGapとapp-UIで、複数デバイスに対応するアプリを作成！

原題：PhoneGapとapp-UIでネイティブのようなユーザーエクスペリエンスを作成する

　PhoneGapは、無料のオープンソーステクノロジーです。デベロッパーはPhoneGapを使って従来のWebベースのテクノロジーを活用し、全ての主要なモバイルプラットフォームを対象に、ネイティブにインストールできるアプリを開発できます。今回は、Dreamweaverで基本的なアプリを作成し、最新のPhoneGap Buildで複数デバイスに展開する方法を説明します（転載元：Adobe Developer Connection）。

この記事で使用されるアドビ製品

• Dreamweaver
• PhoneGap
• PhoneGap Build

Dreamweaver 体験版のダウンロードはこちら！

この記事で使用されるその他の製品

• app-UI：無料で提供されているオープンソースの再利用可能な「アプリケーションコンテナ」ユーザーインターフェイスコンポーネントのコレクション。Webおよびモバイルデベロッパーが、特にモバイルデバイスを対象として、HTMLおよびJavaScriptを使用してインタラクティブアプリケーションを作成する場合に役立ちます。
• Rotten Tomatoes API：公開中の最新映画のレビューを提供するAPIです。この例で使用するAPIキーをRotten Tomatoesから取得する必要があります。方法については、このチュートリアルの「アプリケーションを作成する」のセクションで説明します。

はじめに

　PhoneGapは、無料のオープンソーステクノロジーで、これを使用すると、デベロッパーは従来のWebベースのテクノロジーを活用して、すべての主要なモバイルプラットフォームを対象に、ネイティブにインストールできるモバイルアプリケーションを開発できます。PhoneGapアプリケーションは、Webビューが画面の全幅と全高さを占める「クロムレス」なWebブラウザーと考えるとわかりやすいでしょう。アプリケーションのインターフェイスは、HTML、CSSおよびJavaScriptを使用して構築します。

　アプリケーションはHTML、CSSおよびJavaScriptを使用して構築するため、ルックアンドフィールやユーザーによる操作方法を完全にコントロールすることが可能です。ただし、ユーザーインターフェイスはWebビューに基づくので、アプリケーションというよりもWebページのような感覚のアプリケーションを簡単に作成できます。より「アプリケーションらしい」アプリケーションを作成するには、全体的なユーザーエクスペリエンスと、ユーザーがアプリケーションのビジュアルコンテンツをどのように操作するのかを考慮する必要があります。

　PhoneGapアプリケーションでネイティブのようなユーザーエクスペリエンスを実現するために、私が使用しているお気に入りのプロジェクト、app-UIをご紹介しましょう。このプロジェクトはこちらからダウンロードできます。app-UIは、HTML、CSSおよびJavaScriptで作成されたオープンソースのコンテナのセットで、無料で提供されています。app-UIには、PhoneGapまたはWebアプリケーションで使用できるネイティブのようなユーザーインターフェイスのシェルが用意されています。app-UIの内容は以下のとおりです。

• ユーザーインターフェイスの内外でビューを「プッシュ」したり「ポップ」したりする単純なViewNavigator
• コンテンツを並べて表示し、デバイスの向きが変わったときには自動的に調整を行うSplitViewController
• スワイプ操作でメインコンテンツの背後のコンテンツを表示できるようにするSlidingView

　app-UIは、コンテンツの入れ替えの厄介な部分を、優れたアニメーションやトランジションで処理してくれるため、デベロッパーはアプリケーションの作成に集中できます。

　この記事では、DreamweaverでViewControllerを使用して基本的なアプリケーションを作成し、最新のPhoneGap Buildを使用して複数のデバイスに展開する方法を説明します。

　PhoneGap Buildは、PhoneGapアプリケーション用のクラウドベースのコンパイラーです。HTML、CSSおよびJavaScriptのRawコードをPhoneGap Buildにアップロードするだけで、PhoneGap Buildサービスから提供されるリンクを使ってプラットフォーム固有のバイナリを直接デバイスにダウンロードできます。app-UIは、DreamweaverやPhoneGap Buildとの併用が必須というわけではなく、HTMLベースのどのツールでも機能します。

ファーストステップ

　まず、この記事の冒頭のその他の製品セクションでapp-UIをダウンロードする必要があります。app-UIをダウンロードしたら、Dreamweaverで開発環境をセットアップしましょう。

1. Dreamweaverを開き、ようこそ画面の「新規作成」で「Dreamweaverサイト」を選択します（図1）。

    

   図1：Dreamweaverのようこそ画面

   
2. サイト名とサイトのコンテンツを格納するローカルマシンのフォルダーを指定します。ローカルで使用するため、「サーバー」タブは無視します（図2）。

    

   図2：Dreamweaverの新規サイト

   
   　ユーザー情報を入力し、「保存」をクリックして続行します。Dreamweaverで新規サイトが作成されますが、まだファイルがないので空です。したがって、再びようこそ画面が表示されます。Dreamweaverサイトをセットアップしたら、アプリケーションの作成を開始できます。

　ここまでで、アプリ作成のための環境設定方法を解説しました。続いて、実際のアプリケーションの作成手順を、サンプルに沿って見て行きましょう。

　この記事の続きは、PhoneGapデベロッパーセンターにてご覧ください。

記事の続きはこちら！

　この作品はCreative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseに基づき使用が許可されます。この作品に含まれるサンプルコードに関して、このライセンスの範囲を超えた使用の許可については、アドビのWebサイトを参照してください。

参考情報

• PhoneGapデベロッパーセンター