読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

Mac がなくても iPhone アプリをつくりたい!

JavaScript

おつかれさまです。藤澤です。

自分もそうでしたが、普段 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">ページ1</a></li>  
        <li><a href="#page2">ページ2</a></li>  
        <li><a href="#page3">ページ3</a></li>  
    </ul>  
      
    <!-- class="panel" でグレー背景(設定画面系でよく見るやつ) -->  
    <div id="page1" title="title1" class="panel">  
        1ページ目です  
    </div>  
      
    <div id="page2" title="title2" class="panel">  
        2ページ目です  
    </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>  

ちょっと趣味で作ってみるだけなら まずはこんなところから始めてみるのもいいかもしれません(?)。

今回は以上です。