Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/08/10 14:00

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

目次

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

Dreamweaver 体験版のダウンロードはこちら!
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ベースのどのツールでも機能します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • Andrew Trice(Andrew Trice)

    Universal Mind の主席ソフトウェアアーキテクト。 RIA の設計および実装に10年以上の経験を持ち、FlexやAIR、Objective C、Flash、Java、MySQL、Oracleなど多くの技術に精通し、オブジェクト指向、マルチデバイス開発、リアルタイムデータシステム、データ...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5