スポンサーリンク

jQuery Mobile と HTML5 で、Androidのネイティブアプリを作成する手順

重要なお知らせ:

この記事で公開した情報は,AndroidのMVCフレームワーク「Android-MVC」の機能の一部として取り込まれました。

より正確な設計情報や,動作可能な全ソースコードを閲覧したい場合,「Android-MVC」の公式ページより技術情報を参照してください。


AndroidのMVCフレームワーク - 「Android-MVC」
http://code.google.com/p/android-mvc-...


jQuery Mobileは,
スマホ向けの動的UIを,JavaScriptを書かずに作成できるツール。


HTML5を書くだけで,動きのある画面がコーディングできる。

極めて恐るべきUI構築能力を持っているので,「UIのためのDSL(ドメイン特化言語)」と呼んでもいいぐらいだ。


このライブラリは,Webサイトの画面だけでなく,ネイティブ・アプリのView層を実装するためにも使える。


以下では,jQuery Mobileを使って,たった3ステップでネイティブアプリを作成し,実機で動作させる。

PhoneGapなどの大掛かりなフレームワークは必要ない。

  • (1)Eclipseで,Androidプロジェクトを作成する。
  • (2)jQuery Mobile製のページを作成し,ブラウザで動作確認する。
  • (3)ネイティブアプリに組み込んで,実機で動作確認する。

(1)Eclipseで,Androidプロジェクトを作成する。


新規Androidプロジェクトを生成する。

Activityクラスを書き換え。

package com.example;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

/**
 * jQuery MobileでUIを構築するテスト。
 * @author id:language_and_engineering
 *
 */
public class JQueryMobileTestActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView wv = new WebView(this);

        // WebView内でJavaScriptを有効化
        wv.getSettings().setJavaScriptEnabled(true);

        setContentView(wv);

        // WebView内に,アプリが保持するHTMLを表示
        wv.loadUrl("file:///android_asset/sample_jquery_mobile.html");
    }
}


JSが有効化されたWebView経由で,アプリが保管するHTMLを表示する。


Javaのコードはこれだけ。

レイアウトXMLとかマニフェストXMLはノータッチ。


参考:

たった2ファイルで,HTML+JS製のネイティブAndroidアプリを作る手順 (動作するサンプルコード付き。WebViewの活用方法)
http://language-and-engineering.hatenablog.jp/entry/20120710/CreateAndroidApp...


AndroidやiOSの「ハイブリッドアプリ」で,JavaScriptとネイティブ・コードが連携する仕組みを図解 (おまけ:HTML側で施すべき,クロスプラットフォーム対策)
http://language-and-engineering.hatenablog.jp/entry/20120713/p1

(2)jQuery Mobile製のページを作成し,ブラウザで動作確認する。

ここから,Web制作の技術でUIを構築する。


まず,HTML5で下記のようなファイルを作成する。

sample_jquery_mobile.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
  <meta name="viewport" contetnt="width=device-width, initial-scale=1">
  <title>jQuery Moblie test</title>
  <link rel="stylesheet" href="./css/jquery.mobile-1.1.1.min.css" />
  <script src="./js/jquery-1.7.2.min.js"></script>
  <script src="./js/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>


<div id="one" data-role="page" data-url="one" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 264px;">

	<div data-role="header" class="ui-header ui-bar-a" role="banner">
		<h1 class="ui-title" role="heading" aria-level="1">Multi-page</h1>
	</div><!-- /header -->

	<div data-role="content" class="ui-content" role="main">	
		<h2>Page One</h2>
		
		<p><a data-role="button" href="#two" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Show page "two"</span></span></a></p>	
		<p><a data-transition="pop" data-rel="dialog" data-role="button" href="#popup" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Show page "popup" (as a dialog)</span></span></a></p>
	</div><!-- /content -->
	
	<div data-theme="d" data-role="footer" class="ui-footer ui-bar-d" role="contentinfo">
		<h4 class="ui-title" role="heading" aria-level="1">Page Footer</h4>
	</div><!-- /footer -->
</div>


<div data-theme="a" id="two" data-role="page" data-url="two" tabindex="0" class="ui-page ui-body-a" style="min-height: 264px;">

	<div data-role="header" class="ui-header ui-bar-a" role="banner">
		<h1 class="ui-title" role="heading" aria-level="1">Two</h1>
	</div><!-- /header -->

	<div data-theme="a" data-role="content" class="ui-content ui-body-a" role="main">	
		<h2>Page Two</h2>
		<p><a data-theme="b" data-role="button" data-direction="reverse" href="#one" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back to page "one"</span></span></a></p>	
		
	</div><!-- /content -->
	
	<div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo">
		<h4 class="ui-title" role="heading" aria-level="1">Page Footer</h4>
	</div><!-- /footer -->
</div>


<div id="popup" data-role="dialog" data-url="popup" tabindex="0" class="ui-page ui-body-c ui-dialog ui-overlay-a" style="min-height: 264px;"><div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow">

	<div data-theme="e" data-role="header" class="ui-corner-top ui-header ui-bar-e" role="banner"><a data-iconpos="notext" data-icon="delete" href="#" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-e" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="e" title="Close" data-transition="none" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Close</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a>
		<h1 class="ui-title" role="heading" aria-level="1">Dialog</h1>
	</div><!-- /header -->

	<div data-theme="d" data-role="content" class="ui-content ui-body-d" role="main">	
		<h2>Popup</h2>
		<p><a data-icon="back" data-inline="true" data-role="button" data-rel="back" href="#one" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-icon-left"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back to page "one"</span><span class="ui-icon ui-icon-back ui-icon-shadow">&nbsp;</span></span></a></p>	
	</div><!-- /content -->
	
	<div data-role="footer" class="ui-corner-bottom ui-footer ui-bar-a" role="contentinfo">
		<h4 class="ui-title" role="heading" aria-level="1">Page Footer</h4>
	</div><!-- /footer -->
</div></div>


<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div>


</body>

各タグに付与されている色んな属性は,要素の動的な振る舞いを定義している。

jQuery Mobileは,それらの属性を読み取って,各要素に対してデザインやイベントを自動的に割り振る。

属性の細かい意味は,後でリファレンスを見て調べればいい。



次に,JavaScriptのライブラリをダウンロードする。

下記からjQueryを。

下記からjQuery Mobileを。


jQuery Mobileのほうは,zipを解凍すると色々入っている。

CSSは3つあるように見えるが,1つしか使わない。

  • jquery.mobile-1.1.1.css 完全版のCSS。通常はこれ一つを使用。
  • jquery.mobile.structure-1.1.1.css コア機能だけを分離したCSS。独自テーマ利用時に使う。
  • jquery.mobile.theme-1.1.1.css 標準テーマだけを分離したCSS。

で,先に作成したHTMLファイルと合わせて,下記のようなフォルダ構成にする。

│  sample_jquery_mobile.html
│
├─css
│  │  jquery.mobile-1.1.1.min.css
│  │
│  └─images
│          ajax-loader.gif
│          ajax-loader.png
│          icons-18-black.png
│          icons-18-white.png
│          icons-36-black.png
│          icons-36-white.png
│
└─js
       jquery-1.7.2.min.js
       jquery.mobile-1.1.1.min.js

imagesフォルダは,そのままcssフォルダの中に入れればよい。



この状態で,HTMLファイルをPCのブラウザで開いてみる。


ちょうど,下記のオンラインデモと似たようなUIが体験できるはずだ。
(文言などは消してあるが)

jQuery Mobile Demo / Multi-Page
http://jquerymobile.com/demos/1.1.1/d...

ページ1からはページ2に遷移できる。

また,ダイアログのポップアップを開く事もできる。

HTMLは1つしか作成していないにも関らず,こういった動きが可能なのである。


これで,ブラウザによる動作確認は終わり。

(3)ネイティブアプリに組み込んで,実機で動作確認する。

前項のUIを,Androidのネイティブアプリにする。


前項で掲載したフォルダツリーを,プロジェクトのassets内にそのまま配置する。

※assetsフォルダを右クリック>外部で開く>エクスプローラ でコピペするのが一番手っ取り早いだろう。


それだけ。


さっそく,実機をUSBケーブルでつないで,プロジェクトを実機で実行して動作確認してみる。



先ほどブラウザで動作したのとまるっきり同じUIが,スマートフォン上で,ネイティブアプリとして動作する。

※正確には「ハイブリッド・アプリ」だけども。


以上。


jQuery Mobileを使うと,HTML5を書くだけで,動きのある画面が作れる。(ノンプログラミング)

しかも,WebだけでなくネイティブアプリのUIとしても使える。

しかもクロスプラットフォーム。


これらの点の,はっちゃけた素晴らしさを実感できただろうか。



補足:jQuery Mobileについての情報

以下は,jQuery Mobileに関する様々な情報。


このツールのインパクトを概観:

「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる
http://www.publickey1.jp/blog/11/jque...

  • HTMLを書くだけでモバイルアプリケーションになる。HTMLで記述すれば、それを自動的にモバイル対応のインターフェイスに置き換えて表示してくれる
  • JavaScriptのプログラミングが不要で,HTMLの記述だけで基本的な開発が行えるjQuery Mobileはハードルの低さと開発効率の点で抜きんでている


スマホアプリ開発は
HTML5/jQuery Mobileとネイティブ
どっちがいいの?
http://www.atmarkit.co.jp/fsmart/arti...

  • jQuery Mobileはタッチデバイス向けに最適化されたユーザーインターフェイスを、HTMLの知識をベースに作成できるフレームワーク
  • iOS、Android、Windows Phoneといったさまざまなプラットフォームに対応
  • 必要に応じてPhoneGapの技術を使ったネイティブアプリ化にも対応


連載:jQuery Mobile入門 / 第1回 jQuery Mobileページの基本構造を理解しよう
http://www.atmarkit.co.jp/fdotnet/chu...

  • 2011年の11月にようやく1.0リリースに到達したばかりだが、対応デバイスが非常に多く,スマホのフレームワークの最有力候補の一角


入門用の学習ページ:

@IT 連載:jQuery Mobile入門
http://www.atmarkit.co.jp/fdotnet/chu...

  • 2012年前半の情報


西畑一馬のjQuery Mobileデザイン入門
http://ascii.jp/elem/000/000/607/607366/

  • 使い方のチュートリアル
  • 2011年後半の時点での情報


jQuery Mobileでスマホ向け企業サイト構築
http://www.atmarkit.co.jp/fsmart/inde...

  • 2012年後半以降の情報


サンプル集と入門用のリファレンス:

jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
http://kachibito.net/web-design/jquer...

  • 2011年2月の時点での情報


jQuery Mobile リファレンス的なもの
http://d.hatena.ne.jp/pikotea/2010101...

  • 2011年11月の時点での情報


jQuery Mobile例文辞典 (1.1.1)
http://www.openspc2.org/reibun/jQuery...

  • 2012年7月以降の情報。バージョンは1.1.1


関連する記事:

AndroidのUIで,レイアウトXMLの記述を簡素にするための,7つの基礎知識
http://language-and-engineering.hatenablog.jp/entry/20121114/SimpleAndroidLay...


Androidアプリの画面レイアウトを,まるでjQueryのようなコードで動的構築できるライブラリ (の試作品。UIコーディングのためのDSL)
http://language-and-engineering.hatenablog.jp/entry/20120210/p1


HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階)
http://language-and-engineering.hatenablog.jp/entry/20110702/p1