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

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

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. サイト名とサイトのコンテンツを格納するローカルマシンのフォルダーを指定します。ローカルで使用するため、「サーバー」タブは無視します(図2)。

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

Dreamweaverサイトをセットアップしたら、アプリケーションの作成を開始できます。

アプリケーションを作成する

Dreamweaverサイトをセットアップしたので、アプリケーションの作成を開始します。まず、ライブラリをセットアップしてから、このアプリケーションを構成するコードについて学習します。

アプリケーションのライブラリをセットアップする

  1. Dreamweaverのようこそ画面で、図3のように「新規作成」の「HTML」を選択し、HTMLファイルを新規作成します。

DreamweaverにHTMLエディターインターフェイスが表示されます。まず、以下の手順に従って最初のHTMLコンテンツをセットアップします。

  1. 次のHTMLコードを追加し、index.htmlとして保存します。これがアプリケーションの開始点になります。
<!DOCTYPE html> <html> <head> <title>Rotten Tomatoes</title> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <body></body> </html>
  1. 先ほどダウンロードしたapp-UIが格納されているZIPファイルアーカイブを探して解凍し、libsおよびviewnavigatorフォルダーをDreamweaverプロジェクトにコピーします。フォルダーが正しくコピーされると、Dreamweaverのファイルビューに表示されます。
  2. HTMLファイルに適切なスクリプトおよびCSSリンクを追加する(HTMLコンテンツ内部で使用できるようにするため)には、次の行をindex.htmlファイルの<head>タグの子として追加し、適切な依存関係を追加します。
<script src="cordova-1.7.0.js"></script> <script src="libs/jquery-1.7.1.js"></script> <script src="libs/jquery.animate-enhanced.js"></script> <script src="libs/iscroll.js"></script> <script src="libs/noClickDelay.js"></script> <link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css"/> <script src="viewnavigator/viewnavigator.js"></script> <link rel="stylesheet" href="libs/css/activityIndicator.css" type="text/css" />

app-UIでは、jQueryjQuery.animate.enhancediScroll、その他少数のオープンソースのライブラリを使用して、全体的にアプリケーションらしいアプリケーションを作成できます。jQueryライブラリは、JavaScriptのコーディング全般を行いやすくする、ソリューションアクセラレーターツールです。jQuery.animate.enhancedライブラリは、CSS3の変形アニメーションで「top」または「left」の位置指定の代わりに使用されます。CSS3の変形は、Apple iOSや最新バージョンのAndroidなど、多くのモバイルプラットフォームで、ハードウェアアクセラレーションによって処理されます。iScrollライブラリを使用すると、タッチによってモバイルデバイスのコンテンツが一貫してスクロールされるようになります。viewnavigator.cssおよびviewnavigator.jsファイルには、この例で使用するViewNavigatorコンポーネントの核となるロジックが含まれています。

また、cordova-1.7.0.jsへのリンクはあるものの、プロジェクト内にその名前のファイルがないことにもお気づきでしょうが、心配する必要はありません。このファイルは、PhoneGap Buildでコードをアップロードすると自動的に追加されます。この件については、後ほど詳しく説明しましょう。

app-UIアプリケーションコンテナを初期化し、デフォルトのビューを指定します。app-UIのViewNavigatorでは、ユーザーインターフェイスにビューを追加したり、ユーザーインターフェイスからビューを削除したりする場合、pushViewpopViewまたはreplaceView関数を使用します。pushView関数のパラメーターは、titleおよびviewを必須属性とするJavaScriptオブジェクトです。このオブジェクトを、「ビュー記述子」として参照します。view属性は、DOM要素へのjQuery参照です。

jQueryの「ready」イベントで次のコードがトリガーされます。最初のビュー記述子が作成され、HTMLの<body>タグを対象とするViewNavigatorインスタンスが作成されて、最初のビュー記述子がViewNavigatorインスタンスにプッシュされます。

<script> $(document).ready( function() { rootView = { title: "Rotten Tomatoes", view: $("<div id='rootView'><div class='activityIndicator'></div></div>") }; window.viewNavigator = new ViewNavigator( 'body' ); window.viewNavigator.pushView( rootView ); }); </script>

Dreamweaverでのライブプレビューを有効にして、アプリケーションのインタラクティブビューの隣にコードを並べて表示できます。ビュー記述子で指定したとおり、青色のヘッダーにタイトルが、メインの本文領域に回転するアニメーションが表示されています。

次に、いくつかのデータを要求して、ビューに表示します。この例では、公開中の最新映画のレビューを提供するRotten Tomatoes APIのデータを使用します。この例で使用するAPIキーをRotten Tomatoesから取得する必要があります。

  1. <script>ブロックに、次の変数を追加します。この変数はこの例のコード全体を通して使用されます。
var API_KEY = "PUT YOUR API KEY HERE"; var data = [], rootView=undefined, rootData=undefined;
  1. 「ready」イベントヘッダー関数に次のコードを追加します。これは、jQueryのajaxメソッドを使用してRotten Tomatoesからデータを非同期的に要求するコードで、このメソッドは、ユーザーインターフェイスをアップデートするときに使用できます。
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY; $.ajax({ url: url, dataType: "json", success: function(data, textStatus, jqXHR) { rootData = data; renderDefaultView(); }, error: function(jqXHR, textStatus, errorThrown) { alert("error") } });

サーバーからデータが取得されると、rootData変数に格納され、renderDefaultView関数が呼び出されます。この関数を詳しく見てみましょう。

renderDefaultView関数

renderDefaultView関数は、先ほど作成したルートビューにアクセスして、子要素を削除します。次に、Rotten Tomatoes APIから取得された映画をループ処理し、すべての映画を含むHTML文字列を作成します。APIでリストが作成されると、HTML文字列はルートビューのHTMLとして設定され、ViewNavigatorのスクロール可能領域がresetScroller()関数を使用してリセットされます。

function renderDefaultView() { rootView.view.children().remove(); var html = "<ul>"; for ( var i = 0; i < rootData.movies.length; i ++ ) { var movie = rootData.movies[i]; html += "<li id='" + movie.id + "'onclick='renderDetails(\"" + i + "\")'>" + movie.title + "</li>"; } html += "</ul>"; rootView.view.html( html ); window.viewNavigator.resetScroller(); }

ここで中止してこのコンテンツをプレビューすると、データがロードされ、ViewNavigator内にHTMLリストとして表示されます。

renderDefaultView()関数の各リスト項目にclickイベントハンドラーがあります。ここでリスト項目をクリックしても、renderDetails関数が定義されていないため、ランタイムエラーが発生します。次にこの関数を定義しましょう。

renderDetails()関数

renderDetails()関数は、選択された行のデータをHTML文字列に変換し、ビュー記述子を作成してから、pushView()関数を使用してViewNavigatorインスタンスにプッシュします。renderDetails関数は、Rotten Tomatoes APIから取得したデータが含まれているrootData配列の、適切な配列インデックスに対応する整数のインデックスパラメーターを取ります。

renderDetailsは、まずlistSelected CSSクラスをデフォルトビューのすべての<li>要素から削除し、listSelected CSSクラスをユーザーがクリックする<li>に適用します。CSSスタイルをまだ追加していないので、現時点では違いはわかりませんが、後ほど、ユーザーがどのリスト項目をクリックしたかを示すためのCSSクラスを追加します。

リスト項目にスタイルを設定すると、renderDetailsによって、映画の詳細を表示するときに使用されるHTML文字列が生成されます。この例では、Raw文字列処理のみを使用しますが、HTMLテンプレートライブラリを使用したい場合は、ここで使用できます。

HTML文字列が生成されると、ビュー記述子が作成され、pushView()関数を使用してViewNavigatorにプッシュされます。

function renderDetails(index) { var movie = rootData.movies[index]; rootView.view.find( "li" ).each(function(index) { $(this).removeClass( "listSelected" ); }); $( "#"+movie.id ).addClass( "listSelected" ); var html = "<div id='detail'>"; html += "<h1>" + movie.title + "</h1>"; html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>"; html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>"; html += "<p>" + movie.synopsis + "</p>"; html += "<h3>Ratings:</h3><p>"; html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>" html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>" html += "</p>" html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>"; html += "<h3>Cast:</h3><p><ul>"; for ( var i = 0; i < movie.abridged_cast.length; i ++ ) { var actor = movie.abridged_cast[i]; html += "<li><strong>" + actor.name + ":</strong> "; if ( actor.characters ) { for ( var j = 0; j < actor.characters.length; j ++ ) { if ( j > 0 ) { html += ", " }; html += actor.characters[j]; } } html += "</li>"; } html += "</ul></p></div>"; var viewDescriptor = { title: movie.title, view: $(html), backLabel: "Back" }; window.viewNavigator.pushView( viewDescriptor ); }

この例では、ビュー記述子にbackLabel属性がありますが、これは、ViewNavigatorで自動的に作成される戻るボタンのラベルテキストを指定する属性です。戻るボタンをクリックすると、現在のビューがViewNavigatorインスタンスからポップまたは削除され、直前のビューが表示されます。

ここでこの例を実行した場合、リスト項目をクリックすると、図6のようにビューナビゲーターに映画の詳細が表示されます。

ここまでで、ViewNavigatorインスタンスを作成し、サーバーのデータを要求して、データをViewNavigatorで表示するロジックが作成されました。ViewNavigatorには、デフォルトのスタイルがあり、コンテンツ間のトランジションが処理されますが、全体的にこのアプリケーションは洗練されていないので、修正しましょう。

次は、アプリケーションの外観を改善するCSSスタイルを追加します。

  1. HTMLに<style>要素を追加し、次のスタイルを追加します。
<style> * { font-family: Arial, sans-serif; } .listSelected { background-color:#555; background-color:rgba(0,0,0,0.75); color: #FFF; font-weight:bold; } ul,li { padding:0; margin:0; border:0; } .viewNavigator_contentHolder li { padding:0 10px; border-bottom:1px solid #ccc; height:40px; line-height:40px; font-weight:normal; cursor:pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); } </style>

「*」に適用されたスタイルは、アプリケーション全体のフォントを設定します。これで、デフォルトのTimes New Romanフォントではなく、Arialフォントが使用されます。listSelected CSSスタイルは、ユーザーがクリックしたリスト項目の背景色を変更します。これで、リスト内で選択された項目が視覚的にわかりやすくなります。ulliおよびviewNavigator_contentHolder liスタイルは、HTMLリストがアプリケーション内でより実際のリストらしく見えるようにフォーマットを設定します。

リストのフォーマットを設定したら、選択された映画の詳細ビューにさらにフォーマットを追加しましょう。

  1. 次のCSSスタイルを追加します。
#detail { padding:10px; } .moviePoster { float:right; width:120px; height:178px; overflow:hidden; margin:10px; padding:2px; border:1px solid #999999; } #detail li { white-space: normal; overflow: visible; height:auto; }

#detail CSSスタイルは、映画の詳細が含まれる<div>に適用されます。このスタイルは、HTMLコンテンツの周囲にパディングを追加して、見た目に美しい視覚的な境界を作ります。moviePosterは、映画のポスター画像の周囲にパディングと境界を追加し、画像を説明コンテンツの右側に表示します。#detail li CSSスタイルは、キャストの一覧にフォーマットルールを適用します。

これでアプリケーション内のコンテンツは美しくフォーマット設定されましたが、app-UIフレームワークのデフォルトのスタイルである青色のヘッダーと白色の背景はそのまま使用されています。CSSスタイルでこれを変更しましょう。

最初に、app-UIのスタイルで設定されているヘッダーの背景を変更します。図9のような、下部にボーダーと影があり、テクスチャー加工を施した赤いグラデーション付きの背景を作成しました。

  1. app-UIのヘッダースタイルを変更するには、viewNavigator_headerスタイルを変更して、背景画像へのURLを指定するだけです。
.viewNavigator_header { background:url(assets/header_background.png); }
  1. 背景に目立ちすぎないように画像を追加します。まず、viewNavigator_contentおよびviewNavigator_contentHolder CSSスタイルの背景色を設定し、次に#detailおよび#rootView CSSスタイルに背景画像を追加します。ライトグレーのトマトの画像を追加して、ユーザーインターフェイスの邪魔にならないように、視覚的な奥行きを加えます。
.viewNavigator_content, .viewNavigator_contentHolder { background:white; } #detail, #rootView { background-image:url(assets/tomato.png); background-position:center 50px; background-repeat:no-repeat; }
  1. デフォルトでは、app-UIの戻るボタンは角が丸められています。戻るボタンの角を四角くして色をより濃くするには、次のCSSスタイルを使用します。
.viewNavigator_backButton { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background:#555; color:white; border:1px solid black; }

ここでアプリケーションをプレビューすると、図10のように、新しいヘッダースタイルと背景の画像を確認できます。

PhoneGap Build

アプリケーションが完成したら、デバイスにインストールしましょう。

  1. PhoneGap Buildでアカウントを作成します。PhoneGap Buildを使用すると、コンテンツを直接PhoneGap Buildサイトにアップロードしたり、PhoneGap BuildでGitリポジトリを使用したり、DreamweaverからPhoneGap Buildにコードをプッシュしたりできます。PhoneGap Buildでは、どの方法でコードを取り込むかに関係なく、アプリケーションのバイナリがクラウドベースでコンパイルされ、インストールするデバイスにダウンロードできるようになります。

この例ではDreamweaverで作業したので、Dreamweaver CS6に搭載されているPhoneGap Buildとの連携機能を使用します。

  1. PhoneGap Buildを開き、Site(サイト)メニューに移動します。PhoneGap Build Service(PhoneGap Buildサービス)/PhoneGap Build Service(PhoneGap Buildサービス)メニューオプションを選択します。

PhoneGap Build Service(PhoneGap Buildサービス)ウィンドウが表示されます。

  1. PhoneGap Buildアカウントにログインします。ログインすると、プロジェクト設定画面が表示されます(図12)。
  1. 「Create as new project(新規プロジェクトとして作成)」オプションを選択してPhoneGap Buildで新規プロジェクトを作成し、「Continue(続行)」をクリックします。PhoneGapアプリケーションに関するメタデータが格納された、config.xmlという名前の新しいファイルが作成されます。表示される名前や固有のIDなど、アプリケーションのメタデータをカスタマイズするには、このconfig.xmlファイルを編集します。config.xmlファイルについて詳しくは、PhoneGap Buildのドキュメントを参照してくさだい。
  1. DreamweaverからPhoneGap Buildにコードがアップロードされ、アプリケーションのコンパイルが自動的に開始します。アプリケーションがコンパイルされると、PhoneGap Build Service(PhoneGap Buildサービス)ウィンドウに、「Build Complete(ビルド終了)」のメッセージが表示され、デバイスにコードをダウンロードするためのオプションが表示されます(図13)。

注意:iOSデバイス用にアプリケーションをビルドする場合は、有効なApple Developerのアカウントが必要です。また、PhoneGap Buildサービスにプロビジョニング証明書をアップロードする必要があります。

  1. QRコードボタン(不明瞭なバーコードのようなボタン)をクリックして、図14にように、PhoneGap Build Service(PhoneGap Buildsサービス)ウィンドウにQRコードを表示します。モバイルデバイスのQRコードリーダーを使用してQRコードの画像を取り込むことで、自動的にアプリケーションのバイナリファイルがモバイルデバイスにダウンロードされてインストールされます。

まとめ

PhoneGap Buildを使用すれば、複数のプラットフォームを対象としたコンパイルも面倒ではありません。プラットフォームに固有のアプリケーションのバイナリファイルを簡単にコンパイルできます(IPA、APK、XAPなど)。PhoneGap Buildには、これらのファイルをダウンロードしてデバイスに簡単にインストールするためのクイックリンクが用意されています。プラットフォームごとに個別に開発環境をセットアップする必要はありません。

PhoneGapを使用すれば、ネイティブにインストールできるモバイルアプリケーションを、HTML、CSSおよびJavaScriptで簡単に作成できます。アプリケーションコンテナのオープンソースのコレクションであるapp-UIでは、慣れ親しんだアプリケーションのパラダイムをHTMLベースのコンテンツに活用できます。PhoneGap Buildは、PhoneGapによるマルチプラットフォーム対応のアプリケーション開発を合理化するサービスです。

次のステップ

PhoneGapについて詳しくは、Adobe Developer ConnectionのPhoneGapに関する記事またはPhoneGapのスタートガイドを参照してください。

app-UIについて詳しくは、オープンソースプロジェクトを参照してください。

PhoneGap Buildについて詳しくは、build.phonegap.comを参照してください。