この記事で使用されるアドビ製品
この記事で使用されるその他の製品
- 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ベースのどのツールでも機能します。
