2011年6月12日日曜日

DroidgapでWebアプリをAndroidアプリに変換してみる

PhoneGapはHTML＋CSS＋JavaScriptでAndroidやiPhoneなどのアプリケーションを開発できるフレームワークで、DrodiGapってのはPhoneGapでの開発に必要なファイルを生成してくれるテンプレート生成ツール。

DrodiGapではWebアプリをAndroidアプリに変換もできるようなので、ちょっと試してみる。
参考：5分で作るAndroidアプリケーション

まずは準備。Webアプリがないので作る。動画と同じにしてLightsOutで良いけど、せっかくなのでjQuery Mobileの勉強がてら適当に作る。
とりあえずなんとなくオークション検索APIにリクエストして結果を表示するだけのWebアプリを書く。
下記index.htmlが1つあるだけのシンプルなアプリ。細かい処理やエラー処理はしていない。
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>オークション</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript">  
<!--
function a() {
    var appid = '<ヤフーアプリケーションID>';
    var query = $("#query").val();
    var url = 'http://auctions.yahooapis.jp/AuctionWebService/V2/json/search?callback=b&appid=' + appid + "&query=" + encodeURI(query);
    var target = document.createElement('script');  
    target.charset = 'utf-8';
    target.src = url;  
    document.body.appendChild(target);  
}  
  
function b(result) {  
    $("#result_list li:gt(0)").remove();
    if (result.ResultSet["@attributes"].totalResultsReturned > 0) {
        for (i = 0; i < result.ResultSet["@attributes"].totalResultsReturned; i++ ) {
            var r = result.ResultSet.Result.Item[i];
            var row = $("#result_template").clone();
            row.removeAttr("style");
            row.appendTo("#result_list");
            row.find("#image").attr("src", r.Image);
            row.find("#link").attr("href", r.AuctionItemUrl);
            row.find("#title").text(r.Title);
            row.find("#price").text(parseInt(r.CurrentPrice) + "円");
        } 
    }
}  
-->
    </script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>オークション</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain" data-inline="true">
                <input type="text" id="query">

                <input type="button" onclick="a()" value="検索">

            </div>

            <ul id="result_list" data-role="listview" data-inset="true">
                <li id="result_template" style="display:none">
                    <img id="image"><a id="link"><h2 id="title"></h2><p id="price"></p></a>
                </li>
            </ul>
        </div>

    </div>
</body>
</html>
ブラウザで見るとこんな感じでjQuery Mobileのおかげで割ときれいに表示される。jQuery Mobile覚えたら色々と便利そう。
これで準備完了。

さっそくこのアプリをDroidGapでAndroidアプリに変換してみる。
まずは、phonegap/phonegap-android - GitHubからソースを落として展開する。

  DroidGap Create
  ----------------
  
  Creates an Android compatable project from a PhoneGap project. For example, if you have MyProject with index.html this command will create MyProject_android.
  
  Usage:
  
    droidgap create <path>
createで作るようなのでやってみる。(droidgapコマンドが使えるようにパスは通してある。)
$ droidgap create auc

BUILD FAILED
/・・・/phonegap/framework/build.xml:56: taskdef class com.android.ant.SetupTask cannot be found
 using the classloader AntClassLoader[]

Total time: 0 seconds
Error: Project folder 'auc/www/../www_android' is not empty. Please consider using 'android update' instead.
Build失敗と何かErrorが出た。Errorは絶対パスにするか、展開したディレクトリに移動してコマンド実行することで解消したけどbuild失敗はそのままやっちゅーことで、classicを使ってみることにした。
  DroidGap Classic
  ~~~~~~~~~~~~-~~~
  
  Compatability for older droidgap scripts. 
  
  Usage:
  
  droidgap classic [android_sdk_path] [name] [package_name] [www] [path]

  android_sdk_path ... The path to your Android SDK install.
  name ............... The name of your application.
  package_name ....... The name of your package (For example: com.nitobi.demo)
  www ................ The path to your www folder. (Wherein your HTML, CSS and JS app is.)
  path ............... The path to generate the application.
これでAndroid用applicationの生成は完了。指定したpathにディレクトリができてるのでそこに移動する。ちなみにpathはダウンロードしたファイルを展開したディレクトリからの相対パスっぽい。

www folderのパスがおかしい場合は下記エラーが出るが、絶対パスで指定してやればでなくなった。
/usr/lib/ruby/1.8/fileutils.rb:1257:in `copy': unknown file type: auc/. (RuntimeError)

あとは、生成したディレクトリに移動したら、ant debugしてinstallする。
$ ant debug
$ adb -e install bin/aucsearch-debug.apk

installして実行したら上手く行かなかった。。「The requested file was not found. www/index.html (file:///android_asset/www/index.html)」とのこと。
見てみるとなぜかasset/www/www/index.htmlってなってたので、配置し直して繰り返す。
$ mv assets/www/www/index.html assets/www/
$ rm -rf assets/www/www
$ ant debug
$ adb -e install bin/aucsearch-debug.apk
今度は成功。Androidアプリになりました。
割と簡単にAndroidアプリができたのはいいけど、やたら動きが重い。。。

既にあるWebアプリをAndroidアプリに変換できるなら魅力的だなーと思って試してみたけど、これはどうなんだろう。まぁ既にあるWebアプリを変換とは言っても、クライアントサイドでJavascriptで動いてるのは変換できるけど、サーバサイドでのPHPなどで動いてるWebアプリをAndroidアプリに変換してくれるわけではないので、あまりこのDroidGapでの変換は使わないのかな。
とりあえずもう少し調べてみようかな。あとjQuery Mobileについても。
ラベル: , , ,