おつかれさまです。藤澤です。
自分もそうでしたが、普段 Windows の開発しかしていないし Mac なんて持ってないけど、せっかく iPhone を持ってるんだから何かアプリを作ってみたい、と思っている方 多いんじゃないでしょうか。（このブログを見てくださっている方には少ないかもしれませんが）
Windows 環境で iPhone でも使えるアプリを作ろうと思ったら、現状では Web アプリ（もしくは Flash）という選択になるかと思います。しかし、せっかくだから見た目もそれっぽいアプリにしたいですよね。
そんな気持ちを和らげてくれるのが 今回ご紹介する iUI というライブラリです。
このライブラリでは css と JavaScript を使って iPhone アプリっぽい look & feel を実現してくれます（※）。
前回ご紹介した Google App Engine 上で動かせば無料で始められるのもうれしいところです。
※ ただし、残念なことに iOS7 以降の UI には対応していません
iUI の基本的な使い方は以下のようになります。
<!DOCTYPE html> <html> <head> <title>iui test</title> <!-- 画面サイズを端末にあわせて拡縮を不可にする --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <!-- iUI の css と js を読み込み --> <link rel="stylesheet" href="iui/web-app/iui/iui.css" type="text/css" /> <link rel="stylesheet" title="Default" href="iui/web-app/iui/t/default/default-theme.css" type="text/css"/> <link rel="stylesheet" href="iui/web-app/css/iui-panel-list.css" type="text/css" /> <script type="application/x-javascript" src="iui/web-app/iui/iui.js"></script> </head> <body> <!-- ヘッダ --> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <!-- 初期ページ。selected="true" で初期表示される --> <ul id="home" title="test" selected="true"> <!-- href に遷移先の id を指定 --> <li><a href="#page1">ページ１</a></li> <li><a href="#page2">ページ２</a></li> <li><a href="#page3">ページ３</a></li> </ul> <!-- class="panel" でグレー背景（設定画面系でよく見るやつ） --> <div id="page1" title="title1" class="panel"> １ページ目です </div> <div id="page2" title="title2" class="panel"> ２ページ目です </div> <!-- リスト形式 --> <ul id="page3" title="title3"> <li>page3-1</li> <li>page3-2</li> </ul> </body> </html>
簡単ですね。
ul や div がひとつひとつのページに対応し、複数のページをひとつの html ファイルにまとめて記述するイメージです。
これを使って、近所のビールを検索するアプリも こんな感じ に作れちゃいます。
<!DOCTYPE html> <html> <head> <title>beer search</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <link rel="stylesheet" href="iui/web-app/iui/iui.css" type="text/css" /> <link rel="stylesheet" title="Default" href="iui/web-app/iui/t/default/default-theme.css" type="text/css"/> <link rel="stylesheet" href="iui/web-app/css/iui-panel-list.css" type="text/css" /> <script type="text/javascript" src="iui/web-app/iui/iui.js"></script> <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="js/linq.min.js"></script> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript"> var _location; // 位置情報を取得 function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { _location = position; }, function (error) { } ); } } // 周辺施設を検索して result ページに一覧表示 function doSearch() { if (_location === undefined) { $("#result").empty(); $("#result").append("<li>位置情報の取得に失敗しました</li>"); return; } // 検索中は loading 表示 $("#result").append("<li>loading...</li>"); // 今回は登録不要で使える Mapion の API を利用させていただきました var key = $("#key").val(); var q = $("<div>").text(key).html(); var lat = _location.coords.latitude; var lon = _location.coords.longitude; var url = "http://searchapi-stg.mapion.co.jp/search/ver1/localsearch/landmark/?key=MA10&q=" + q + "&lat=" + lat + "&lon=" + lon + "&radius=20000&ot=jsonp"; $.ajax({ type: "GET", url: url, dataType: "jsonp", cache: true, success: function(data) { // loading を消す $("#result").empty(); // 詳細表示で使うので検索結果を Web Storage に退避しておく sessionStorage.setItem("data", JSON.stringify(data)); // 検索結果を整形して result ページに追加する // タップしたら詳細ページに遷移するように <li><a href="#detail" onclick="showDetail(poi_code)">poi_name</a></li> の形式で Enumerable .From(data.Result.ResultList) .Select(function(item) { return { code: item.poi_code, name: item.poi_name }; }) .Select(function(item) { return $("<a>" + item.name + "</a>").attr("href", "#detail").attr("onclick", "showDetail('" + item.code + "')"); }) .Select(function(item) { return $("<li>").append(item); }) .ForEach(function(item) { $("#result").append(item); }); } }); } // 一覧で選択された施設の詳細を detail ページに表示 // 引数は poi_code function showDetail(key) { var data = JSON.parse(sessionStorage.getItem("data")); var item = Enumerable .From(data.Result.ResultList) .First(function(item) { return item.poi_code == key; }); $("#detail_name").val(item.poi_name); $("#detail_category").val(item.gnr2_name); $("#detail_address").val(item.address); } </script> </head> <body onload="getLocation();"> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <div id="home" title="beer search" selected="true" class="panel"> <fieldset> <div class="row"> <label>ご注文は？</label> <input id="key" type="text" name="key" value="ビール" /> </div> </fieldset> <a class="whiteButton" type="submit" href="#result" onclick="doSearch();">search</a> </div> <ul id="result" title="beer search"> </ul> <div id="detail" class="panel"> <fieldset> <div class="row"> <label>name:</label> <input id="detail_name" type="text" value="" /> </div> <div class="row"> <label>category:</label> <input id="detail_category" type="text" value="" /> </div> <div class="row"> <label>address:</label> <input id="detail_address" type="text" value="" /> </div> </fieldset> </div> </body> </html>
ちょっと趣味で作ってみるだけなら まずはこんなところから始めてみるのもいいかもしれません（？）。
今回は以上です。