PhoneGap + Androidについては↓こちら
AndroidでPhoneGapを使う際の手順メモ
http://ryooo321.blogspot.com/2011/10/phonegapandroid.html
今回は上記にjQuery Mobileを導入してみました。
jQuery Mobileとは、jQueryのプラグインとして動作するモバイルアプリのライブラリです。
こいつがすごいです！！
使ったことのない人は、下記ページのDemoを是非みてください。
jQuery Mobile
http://jquerymobile.com/
jQuery Mobile Demo
http://jquerymobile.com/demos/1.0rc2/
使い方で参考になるページは↓こちら
billboardtop100.net
http://billboardtop100.net/jquery-mobile/
またいつかこいつだけでじっくり使ってみた感想を書きたいです。
1. jQuery Mobileをダウンロード/解凍
↓こちらから「jquery.mobile-1.0rc2.zip」をダウンロードします。
http://jquerymobile.com/download/
解凍すると↓こんな感じです。
2. jqueryをダウンロード
↓こちらから1.6.2のMinifiedをダウンロードします。
http://docs.jquery.com/Downloading_jQuery
3. Android プロジェクト内に配置
www/css/jquery.mobile-1.0rc2.min.css
www/css/images/以下
www/js/jquery-1.6.2.min.js
www/js/jquery.mobile-1.0rc2.min.js
www/css/style.css (←中身は空でも構いません)
↓こんな感じです。
4. index.htmlを記載します。
<!DOCTYPE HTML>
<html>
<head>
<title>Multip6</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page" id="top">
<div data-role="header" data-position="inline" >
<h1>SNS送信</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textarea">投稿内容:</label>
<div><textarea cols="100" rows="25" name="textarea" id="textarea"></textarea></div>
</div>
<div data-role="fieldcontain">
<label for="name">画像:</label>
<div><input type="text" name="name" id="name" value="" /></div>
</div>
<a href="#" data-role="button" data-theme="c">送信</a>
</div>
<ul data-role="listview" data-split-icon="gear" data-theme="d">
<li><a href="#">Twitter<span class="ui-li-aside">送信</span></a><a href="#tw" data-rel="dialog" data-transition="pop" data-theme="d">Twitter</a></li>
<li><a href="#">Facebook<span class="ui-li-aside">送信</span></a><a href="#tw" data-rel="dialog" data-transition="pop" data-theme="d">Facebook</a></li>
</ul>
</div>
<div data-role="footer" data-theme="d">
<h4>Multi post 6</h4>
</div>
<div data-role="page" id="tw">
<div data-role="header" data-theme="e">
<h1>Twitter 投稿内容</h1>
</div>
<div data-role="content" data-theme="d">
<div data-role="fieldcontain">
<label for="textarea">投稿内容:</label>
<div><textarea cols="100" rows="25" name="textarea" id="textarea"></textarea></div>
</div>
<div data-role="fieldcontain">
<label for="name">画像:</label>
<div><input type="text" name="name" id="name" value="" /></div>
</div>
<p><a href="#top" data-role="button" data-inline="true" data-icon="back">戻る</a></p>
</div>
<div data-role="footer" data-theme="a">
<h4>Multi post 6</h4>
</div>
</div>
</body>
</html>
5. 実行
エミュで動かすと↓こんな感じです。
エミュなので若干重いですが、アニメーションするUIが簡単に作れました。
おおむねの開発はChromeでできるので、快適ですね。
0 件のコメント:
コメントを投稿