必要条件

この記事に必要な予備知識

この記事に必要な予備知識

jQueryの十分な理解、JavaScriptの一般的な知識、PhoneGapに関する多少の知識があると、この記事を最大限に活用できます。



必要なアドビ製品

PhoneGap(Cordova)

Kendo UIモバイル

ユーザーレベル

中級

原文 作成日: 2012/10/16
Getting started with Kendo UI Mobile

文明社会から離れて暮らしていたり、『タイムトラベラー きのうから来た恋人』のブレンダン・フレイザーのように地下の核シェルターに避難していなかった限り、PhoneGapについて聞いたことはあるでしょう。これは、Webアプリケーションを記述するのと同じ方法で、モバイルアプリケーションを記述できるマジックです。

しかし、これには若干の違いがあります。モバイルデバイスで実行するアプリケーションをPhoneGapで作成するのは簡単かもしれませんが、どのようにすればモバイルアプリケーションらしい外観にできるのでしょうか。このチュートリアルでは、HTML5ネイティブアプリケーション構築の新しいフレームワークであるKendo UIモバイルで作成する方法を説明します。これはPhoneGapとの相性もよく、TabStripsListViewsNavBarsその他の、ネイティブな外観にするコントロールを提供します。

また、Kendo UIモバイルのユニークなアダプティブレンダリングフレームワークとともにPhoneGap Buildを使用して、1回記述したアプリケーションを複数のプラットフォームに展開する方法を学習します。

Kendo UIモバイルの紹介

Kendo UIモバイルとは、ネイティブUIコントロールを実際使用しているように見えるスマートフォンおよびタブレットアプリケーションを構築する最新のHTML5モバイルフレームワークです。

Kendo UIモバイルの全機能だけでなく、サポートも付属する体験版をダウンロードできます。体験版をダウンロードする際には、名前と電子メールアドレスが必要です。

このモバイルフレームワークには、スマートフォンとタブレットの両形態向けの機能豊富なウィジェットのコレクションがすべて含まれます。こちらのデモでは、TabStripNavBarおよびあらゆる場所で使用されているiPadのSplitViewなど、なじみ深いモバイルUIコントロールを確認できます。

Kendo UIモバイルは、フレームワークとウィジェットの2つの部分で構成されていると考えることができます。

モバイルフレームワーク

モバイルフレームワークには、Kendo UIモバイル(図1参照)のコア機能があります。これは、アプリケーションをKendo UIモバイルで作成すると作成されるコアApplicationオブジェクトや、アプリケーションのヘッダーとフッター間のレンダリング対象のコンテンツを含むViewなどです。

ウィジェット

ウィジェットとは、モバイルアプリケーションのUIコンポーネントです(図2参照)。モバイルデバイスにはタッチインターフェイスがあるため、UIコンポーネントは通常のWebアプリケーションのものとは大幅に異なります。これらのウィジェットとは、TabStripListViewなどです。ListViewには、慣性スクロールや引っ張って更新など、高品質なモバイルアプリケーションに備わっているすべての機能があります。

アダプティブレンダリング

Kendo UIモバイルでは、UIは現在のデバイスのネイティブな外観に合わせて自動調整されます(図3参照)。同じアプリケーションでも、iOSとAndroidでは異なって表示されます。例えば、iOSでは、TabStripは通常下部に表示されるのに対し、Androidでは上部に表示されます。現在、Kendo UIモバイルでは、iOS、Android、BlackBerry、Meego(図4参照)をサポートしています。

注意:Windows Phoneがサポート対象のプラットフォーム一覧にない理由については、こちらの記事を参照してください。

PhoneGap Buildの概要

PhoneGap Buildは、現在ベータ段階にあるプロジェクトです。PhoneGap Buildにアプリケーションのソースをアップロードすると、すべてのサポート対象のPhoneGapプラットフォーム用にアプリケーションがビルドされ、アプリケーションをダウンロードするためのリンクまたはQRコードが表示されます。PhoneGapには、アプリケーションを1枚のindex.htmlページとして、またはプロジェクトアセットを含むZIPファイルとしてアップロードできます。または、PhoneGap Buildによって既存のGitリポジトリからコードがプルされるようにしたり、新しいコードを作成したりすることもできます。

注意: iOS用にビルドするには、デバイスをiOS Developer Centerに登録し、対応する証明書をアップロードする必要があります。このようにすれば、Xcodeを介さず、アプリを直接デバイスに展開できます。この設定について詳しくは、こちらの記事を参照してください。

PhoneGap Buildで新しいアプリケーションを作成する

build.phonegap.comにアカウントを作成します。Adobeのアカウントを使用したり、GitHubのアカウントでログインすることも可能です。サインインすると、アプリケーションの作成を求められます。名前を指定し、ソースをアップロードするか、Gitを使用するか指定します(図5参照)。GitHubを使用し、そこからプルすることも可能です。

新しいアプリケーションにはRedditsという名前を付けました。アプリケーションには任意の名前を付けることができます。

このチュートリアルでは、GitHubリポジトリにコードをプッシュして、PhoneGap Build用にプルすることを強くお勧めします。この場合は、「pull from·a·git/svn·repo·url(Git/SvnリポジトリURLからプル)」オプションを選択し、既存のGitHubリポジトリのURLを入力します。アプリケーションを更新するために、何度も圧縮してアップロードするのは手間がかかるので、この方法を選ぶのがよいでしょう。

Kendo UIモバイルのブートストラッププロジェクトを取得する

PhoneGap Buildの使用を開始するには、いくつかの特定のファイルが必要であるため、ここからダウンロードできるブートストラッププロジェクトを作成しました。

Kendo UIモバイルブートストラッププロジェクトには、PhoneGap Buildを使用した新しいKendo UIモバイルアプリケーションの作成に必要なファイルがすべて含まれます(図6参照)。具体的には次のファイルが含まれています。

  • Index.html – モバイルアプリケーションのメインページ
  • Config.xml – プロジェクトでPhoneGap Buildが使用する、後で編集して設定の一部を指定するファイル
  • Kendoモバイルのアセットを配置するアセットフォルダー、およびアプリケーションの読み込み先となるメインのapp.jsファイルサンプルプロジェクトには、Kendo UI CDNを使用しています。

Kendo UIモバイルアプリケーションの構造

Kendo UIモバイルは、アプリケーションの定義の多くをHTMLマークアップに依存する、使いやすいフレームワークです。HTML5のdata属性を使用するため、JavaScriptをほとんど記述せずに、HTMLでアプリケーションの構造を指定できます。これによって、何千ものセレクターを使用する複雑なJavaScriptコードを使用せずに、マークアップでモバイルアプリケーションのレイアウトを作成できます。

ページには、kendo.mobile.all.min.cssファイルを含める必要があります。このファイルには、様々なモバイルデバイス用のスタイルがすべて含まれます。次のように、jQueryとkendo.mobile.min.jsファイルも含める必要があります。

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css"> <script src="assets/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>

ブートストラッププロジェクトには、Kendo UIモバイルの基本レイアウトを含めました(図7参照)。Kendo UIモバイルアプリケーションには、一般的にLayoutViewの2つのメインコンポーネントが含まれています。これらのコンポーネントは、アプリケーションに任意の組み合わせで任意の数を構成できます。ただし、1つのLayoutに複数のViewを含めるのが一般的です。

index.htmlを開き、Kendo UIモバイルアプリケーションの構造を確認します。

レイアウト

Kendo UIモバイルのLayoutは、複数のビューによって使用される共有のコンテナです。これには、通常NavBarウィジェットまたはTabStripウィジェットが含まれますが、これはアプリケーションをどのように設計するかにも依存します。ブートストラップアプリケーションのLayoutには、次のマークアップがあります。

<div data-role="layout" data-id="main-layout"> <div data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </div> <div data-role="footer"> <div data-role="tabstrip"> <a data-icon="home" href="#home">Home</a> <a data-icon="settings" href="#settings">Settings</a> </div> </div> </div>

トップレベルのdivには、layoutdata-roleがあります。これは、Kendo UIモバイルにこれがLayoutコンテナにあることを知らせます。jQueryセレクターからHTML要素を選択し、適切なウィジェットを呼び出すことによって、Kendo UIモバイルコントロールを作成することも可能です。例えば、ListViewで次を使用します。

$(“#itemsList”).kendoMobileListView();

ただし、data-role属性で使用するウィジェットを指定し、data属性を追加してウィジェットを構成する方がはるかに一般的できれいです。

data-role="header"data-role="footer"の2つのdiv要素がトップレベルのレイアウト要素にあります。NavBarTabStripなどのウィジェットを使用する前に、レイアウトのヘッダーとフッターを定義する必要があります。これによって、ウィジェットをアプリケーションのどこに配置するかをKendo UIモバイルが認識できるようになります。

ヘッダー要素内に、NavBarウィジェットがあります。次いで、data-role="view-title"が使用された単純なspanがあります。これによって、NavBarに現在読み込まれているビューのタイトルが表示されます。これによって、(例えば、TabStripを使用して)ビューを切り替えた場合、現在のビューのタイトルが表示されるようになります。

フッターに、よく使用されるTabStripが含まれています。これは、divを使用し、data-role="tabstrip"を設定して宣言されます。各TabStripアイテムにdata-iconプロパティを設定すると、アイコンを使用することができます。使用可能なすべてのアイコンの一覧については、TabStripのドキュメントを参照してください。TabStripボタンは、href#とビューIDに設定することによって、対応するViewをポイントするようにできます。

ビュー

前述のとおり、ViewLayout内のコンテンツです。これは技術的には、Layout内に配置する必要はありませんが、通常はそこに配置されます。Layoutdiv内に配置するのが論理的に思えますが、そうではありません。Layoutdivと同じレベルに配置できます。

<div data-role="view" data-show="MYAPP.show" data-layout="main-layout” id="home" data-title="Home"> <p>Home View</p> </div> <div data-role="view" data-layout="main-layout" id="settings" data-title="Settings"> <p>Settings View</p> </div>

これで、構成にdata属性を使用する方法を理解いただけたことでしょう。ビューでは、(必要な場合に)ビューで使用されるLayoutと、ビューが読み込まれるときにNavBarに表示されるタイトルを定義するために使用されます。

ブラウザーでアプリケーションをプレビューする場合は、単純にブラウザーの開発者ツールを起動し、コンソールにMYAPP.run();と入力します。アプリケーションがネイティブで実行されると、この関数が、PhoneGap devicereadyイベントによって呼び出されます。

単純なアプリの作成

これでブートストラッププロジェクトを入手でき、Kendo UIモバイルで要素を配置する方法を理解できました。次は、単純なアプリケーションをビルドし、PhoneGap Buildにアップロードします。

この単純なアプリケーションでは、ブートストラップのホーム画面を使用し、Redditの最新のプログラミングトピックを追加します。これを行うには、アプリケーションにListViewを追加し、DataSourceを使用します。

ListViewを追加する

ホームビューにul要素を追加し、data-rolelistviewに設定します。これによって、これがKendo UIモバイルのListViewであることが指定されます。ListViewでは画面全部を使用するか、インセットにできます。この例では、data-style属性を使用して、ListViewスタイルをinsetに設定します。

<ul data-role="listview" data-style="inset"></ul>

ListViewには静的なアイテムを含めることも、(リモートまたはローカルの)データソースにバインドすることも可能です。例えば、ListViewをRedditのリモートのJSON APIにバインドできます。

データソースを作成する

次のコードをapp.jsに追加します。

// this function returns a Kendo UI DataSource // which reads the top threads off of the programming.reddit // datasource MYAPP.reddit = kendo.data.DataSource.create({ // set the data to a local array of object transport: { read: "http://www.reddit.com/r/programming.json" }, schema: { data: "data.children", fields: { title: "data.title" } } });

これは、Kendo UI DataSourceです。(jQueryの.ajax呼び出しを裏で使用して)リモートのエンドポイントを読み取り、返された結果を指定したスキーマオブジェクトを使用して解析します。これでデータソースを定義したので、ListViewに指定します。

注意:DataSourceになぜ奇妙な変数名(MYAPP.reddit)を付けたのか疑問に思っている方もいるでしょう。JavaScriptでは、1つのオブジェクトにすべての変数を入れ、グローバルな名前空間に入るようにする必要があります。これによって、グローバル名前空間が多数のカスタム変数でいっぱいになって、互いに干渉しないようにできます。

ListViewにデータソースを定義するデータ属性は、単純にdata-source="MYAPP.reddit"です。

あとは、ListViewにテンプレートを定義するのみです。

Kendo UIモバイルのテンプレートは、軽量で非常に高速に設計されています。テンプレートを宣言するにはスクリプトブロックを作成し、typeとして"text/x-kendo-templ"とIDを指定し、ListViewにテンプレートを含めることができます。Kendo UIモバイルテンプレートでは、いくつかの構文がサポートされています。下の例では、「#: <value> #」の形式が使用されています。ここで、<value>は、表示するDataSourceのフィールドです。

<script type="text/x-kendo-templ" id="reddit-template"> #: title # </script>

これをindex.htmlに追加します。これによって、ListView内のli要素内にタイトルフィールドが表示されます。liでは各要素をラップする必要はありません。

ListViewに、アイテムをレンダリングするときにこのテンプレートを使用することを通知する場合は、次のようにdata-template属性を設定します。

<ul data-role="listview" data-style="inset" data-template="reddit-template" data-source="MYAPP.reddit"></ul>

PhoneGap Buildの使用

PhoneGap Buildにまだプロジェクトを作成していない場合は、初めに作成します。ファイルを実際にアップロードしたりGitからプルする前に、config.xmlファイルを変更する必要があります。このファイルは、PhoneGap Buildに重要な情報をいくつか通知します。次に例を示します。

<?xml version="1.0" encoding="UTF-8"?> <widget xmlns = http://www.w3.org/ns/widgets xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.burke.www" version = "1.0.0"> <name>Reddits</name> <description> A super simple application for testing Phonegap Build With Kendo UI Mobile </description> <author href="http://a.shinynew.me" email="burkeholland@gmail.com"> Burke Holland </author> <icon src="icon.png" gap:role="default" /> <feature name="http://api.phonegap.com/1.0/network"/> <preference name="orientation" value="portrait" /> </widget>

これでアプリケーションのタイトルと説明、使用しているPhoneGapのバージョン、アプリケーションで必要となる権限が指定されます。例えば、カメラを使用する場合、追加の機能を指定します。

<feature name="http://api.phonegap.com/1.0/camera"/>

ビルドプロセス

アップロードが完了するか、プルするGitリポジトリを指定したら、PhoneGap Buildがすべてのプラットフォーム用のプロジェクトをビルドし始めます(iOS用には、証明書をアップロードし、プロファイルファイルをプロビジョニングする必要があります)。ビルドプロセスは約10分で完了します。ビルドプロセスが完了すると、ダウンロードボタンとQRコードが表示されます(図8参照)。

PhoneGap

プロジェクトにないphonegap.jsファイルへのスクリプト参照があることにお気付きかもしれません。

<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>

このファイルは、ビルド中のプラットフォームで使用できるよう、PhoneGap Buildによって用意されています。

ターゲットのPhoneGapのバージョンは、PhoneGap Buildの管理パネルに移動してバージョンを更新することにより、いつでも変更できます。

アプリを実行する

デバイスで受信したQRコードをスキャンするか、デバイスでbuild.phonegap.comに移動して「Download(ダウンロード)」ボタンをタップします。これによって、デバイスにアプリケーションがインストールされます。PhoneGap BuildからiPhone 4とGalaxy Nexusにアプリケーションをインストールしました。別の2つのデバイスで同じアプリを実行できます(図9参照)。

次のステップ

これですべての部分をまとめることができます。PhoneGapにはネイティブシェルが用意されており、デバイスにアクセスできます。PhoneGap Buildは、すべてのプラットフォーム用にアプリケーションをパッケージ化します。Kendo UIモバイルでは、なじみ深いjQueryと単純なマークアップを使用したアーキテクチャを使用して、すべてのデバイスにネイティブUIコントロールを提供します。

今すぐKendo UIをダウンロードし、HTML5でネイティブモバイルアプリのビルドを開始してください。

Kendo UIモバイルについてさらに詳しく見るには、モバイルのデモを参照してください。包括的なドキュメントサイトにも移動して、API、ウィジェットおよび様々なチュートリアル記事を参照してください。

次に参考となるリンクをいくつか示します。