jQTouchライブラリーと組み合わせる
NimbleKitにはiOSで使えるUIパーツが多数用意されていますが、座標を指定して配置するものが多く、やや面倒な場合もあります。また、いずれAndroid OSでも動作させたいと考えるのであれば、メジャーなUIライブラリーを使う方がよいでしょう。
代表的なiPhone/Android用のUIライブラリー（フレームワーク）には以下のようなものがあります。
- iUI
- http://code.google.com/p/iui/
- jQTouch
- http://jqtouch.com/
- jQuery Mobile
- http://jquerymobile.com/
- Sencha Touch
- http://extjs.co.jp/products/touch/
- jQuery iPhone UI
- http://iphone.hohli.com/
- iWebKit
- http://iwebkit.net/
今回はこの中から、jQueryをベースにした「jQTouch」を使ってiPhone風のUIを実装しましょう。UIライブラリーごとにサポートしているパーツや機能が異なりますし、NimbleKitとの相性もあるので、いろいろなライブラリーを使ってみるとよいでしょう。
jQTouchを公式サイトからダウンロードすると、jQTouchに対応したjQueryライブラリーファイルも含まれています。jQueryは最新バージョンでも動作すると思われますが、不具合が発生するようであればjQueryのバージョンを1.3.2に変更してください。
jQTouchのサイトからダウンロードしたファイルのうち、必要なものをプロジェクトウィンドウのResourcesフォルダに入れます。
HTMLをjQTouchのフォーマットに沿って作成します。今回はタイトルとリストしかありませんので以下のような構成にしました。再生する動画のファイル名はli要素のtitle属性に設定しています。
<div id="home"> <div class="toolbar"> <h1>動画作品</h1> </div> <ul> <li title="atera.mov">阿寺渓谷</li> <li title="fireworks.mov">諏訪湖花火</li> ： </ul> </div>
jQTouchのデザインを適用するには、必要なCSSファイルとテーマファイルを読み込ませます。
<link rel="stylesheet" href="css/jqtouch.min.css" /> <link rel="stylesheet" href="css/themes/apple/theme.min.css" />
標準で用意されているテーマはiPhone風のデザインと、jQTouchオリジナルのデザインがあります。上ではiPhone風のテーマを読み込んでいますが、jQTouchのテーマにしたい場合は以下のようにします。
<link rel="stylesheet" href="css/themes/jqt/theme.min.css" />
CSSファイルを読み込ませたら、次にjQueryとjQTouchのライブラリーファイルを読み込ませます。
<script type="text/javascript" src="js/jquery.1.3.2.min.js"></script> <script type="text/javascript" src="js/jqtouch.min.js"></script>
以下の1行を実行するとiPhoneライクなUIが表示されます。
$.jQTouch();
簡単なスマートフォンサイトであれば、仕様に沿ってHTMLの構造や属性を設定し、$.jQTouch()とするだけでできあがりです。今回はNimbleKitのNKVideoPlayerを呼び出す必要があるので以下のようにしてクリック時の処理を設定します。クリック時の処理はサンプル2と同様です。
$("#home li").click(function(){ クリック時の処理 });
ここまでをまとめたのがサンプル3です。リストをクリック（タッチ）すると、動画が自動的に読み込まれて再生されます。iPadで表示すると表示幅に応じて動画が拡大されます。
iPhoneの場合
iPadの場合
■サンプル3
<html> <head> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="css/jqtouch.min.css" /> <link rel="stylesheet" href="css/themes/apple/theme.min.css" /> <script type="text/javascript" src="NKit.js"></script> <script type="text/javascript" src="js/jquery.1.3.2.min.js"></script> <script type="text/javascript" src="js/jqtouch.min.js"></script> <script> $.jQTouch(); $(function(){ $("#home li").click(function(){ var src = "movie/"+this.title; // Movie URL var video = new NKVideoPlayer(); video.openFileName(src); video.play(); }); }); </script> </head> <body> <div id="home"> <div class="toolbar"> <h1>動画作品</h1> </div> <ul> <li title="atera.mov">阿寺渓谷</li> <li title="fireworks.mov">諏訪湖花火</li> <li title="lake.mov">夏の湖</li> <li title="matsumoto.mov">松本城の桜</li> <li title="misyakaike.mov">御射鹿池</li> <li title="ono.mov">小野の滝</li> <li title="stone.mov">蛇石</li> <li title="train.mov">普通電車</li> <li title="tsutsuji.mov">つつじ</li> </ul> </div> </body> </html>
