スポンサーリンク

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

Android jQueryMobile html5 jQuery デザイン ハイブリッドアプリ

重要なお知らせ：

この記事で公開した情報は，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を使って，たった３ステップでネイティブアプリを作成し，実機で動作させる。

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

  • （１）Eclipseで，Androidプロジェクトを作成する。
  • （２）jQuery Mobile製のページを作成し，ブラウザで動作確認する。
  • （３）ネイティブアプリに組み込んで，実機で動作確認する。

（１）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はノータッチ。


参考：

たった２ファイルで，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

（２）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は３つあるように見えるが，１つしか使わない。

  • 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...

ページ１からはページ２に遷移できる。

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

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


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

（３）ネイティブアプリに組み込んで，実機で動作確認する。

前項の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の記述を簡素にするための，７つの基礎知識
http://language-and-engineering.hatenablog.jp/entry/20121114/SimpleAndroidLay...


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


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

　

language_and_engineering 読者になる

広告を非表示にする
スポンサーリンク
スポンサーリンク