Titanium Mobileで開発したiPhoneアプリをリリース（その2）

前回に引き続き、今回はTitanium Mobileで開発している時に調べたこと、教えていただいたこと等をご紹介したいと思います。

まずアプリの基本的な部分はgihyo.jpの連載を参考にさせていただきました。UIがツイッタークライアントと似ている部分も多く、大変参考になりました。

その他に開発過程で挙がった課題について書いて行きます。
・日本語のアプリ名
・ImageViewの画像リサイズとデフォルト設定
・Safariで開く
・admobを仕込む
・ビルド


日本語のアプリ名
Titanium Developerでプロジェクトを作成する際にアプリ名を英語で付けていましたが、最終的にはAndroid版と同じ「ぐぐっと！急上昇ワード」としてリリースしたいと思いました。

titanium-mobile-doc-jaに
iOS系の場合はbuildフォルダに生成されたInfo.plistを加工後、プロジェクト直下に配置しておけばOK。
との記述が

Info.plist（一部抜粋）

 CFBundleDevelopmentRegion
 Japanese
 CFBundleDisplayName
 ぐぐっと！
 ...

1行に入るように「ぐぐっと！」だけ入れてますが、これで日本語アプリ名が表示されるようになりました。

また、Titanium BBS(JP unofficial)によるとAndroidでも可能なようです。



ImageViewの画像リサイズとデフォルト設定
キーワードに合わせてサムネール画像を取得している関係で、都度画像サイズが異なります。
そこで画像取得後リサイズしたいのですが、その方法とデフォルト画像を設定するとさらに良いのではと思います。

app.js （一部抜粋）

var thumb_img = Ti.UI.createImageView({
  defaultImage:'./images/default_image.png', //デフォルト画像を指定
  image:encodeURI(画像ファイルのURL),
 width:'auto',
 height:'auto'
});
// 画像読み込み完了時のイベント
thumb_img.addEventListener('load', function(e){
  // height 170以上の場合縮小
  if(.height>170){
    thumb_img.width = thumb_img.width*(170/thumb_img.height);
    thumb_img.height = 170;
  }
});
view.add(thumb_img);

読み込み完了後にリサイズ処理が走りますので、画面表示後、縮小された画像が表示されるまで多少タイムラグがあったりします。
なので実際に表示したい画像が表示されるまでのつなぎ、および最終形に近いサイズでの領域確保の意味合いもあります。
また、デフォルト画像を指定すると、画像の取得に失敗してもデフォルト画像が表示されているので、ごまかせたりもします。
今回のアプリでは画像があるというのがわかるようなデザインにしていますが、背景色と同じ画像を使ってもいいと思います。



Safariで開く
アプリ内でWebViewを使ってWebページを表示させ、ユーザーの任意の操作によってSafariを開きページを引き継ごうとした際に、すでにページ遷移している場合も考えて、現在表示されているページのURLを取得する必要があります。

app.js （一部抜粋）

// WebViewで現在表示しているページのURLを取得
webView.addEventListener('load', function(e){
  currentUrl = e.url;
});
// Safariで開く
btn_safari.addEventListener('click', function(){
  Titanium.Platform.openURL(currentUrl); //Safariで開く
});

WebView内でページがロードされるたびに、URLを取得しておきます。そいつを渡してやればOK！



admobを仕込む
Titaniumの開発元であるAppceleratorよりadmobモジュールが公開されたことで、Titanium Mobileで開発したアプリにも広告を掲載することが可能になりました。
モジュールの使い方がよくわからないので、Twitter経由で質問したところ、親切にもブログで解説していただいたので、参考にさせていただきました。

AdMobモジュールの設置方法

ダウンロードしてきたadmobモジュールを解凍しると、そのまま使える状態（ビルド済み）だったので、指定されたディレクトリにそのままコピーしました。
/Library/Application Support/Titanium/modules/iphone/ti.admob/......
↑こんな感じのパスになるように
※私が組み込んだ時点ではビルド不要だったのですが、今はビルドが必要との情報もあり

あとは、指定されたコードを追加します。
app.js （一部抜粋）

// admob
Titanium.Admob = require('ti.admob');
var adview = Titanium.Admob.createView({
  bottom:0,
  left:0,
 width:320,
  height:48,
 publisherId:'admobのパブリッシャーID'
});
win.add(adview);

tiapp.xml（一部抜粋）

  ...
 
    ti.admob
 

tiapp.xmlでは、最後あたりに追加すれば良いみたいです。

これで広告が表示されると思います。もうモジュールも怖くありません。

しかしadmobモジュールでハマった点がありました。何故か一番上（最初）のWindowでないと広告がタップできないのです。
アプリの作りが［リスト＞詳細］となっていて、最初その詳細画面に設置していました。そうすると、広告は表示されるのですがタップできないという現象が…
回避方法が見つけられなかったので、一番上 のWindowにadmobを移動させました。何が悪いの？



ビルド
Titaniumでビルドするととても時間が掛かるようです。（私は途中でキャンセルしました）Titaniumで書き出されたXcodeのプロジェクトファイルをダブルクリックしてXcodeを起動してビルドした方が早いですし、実機転送やオーガナイザでの画面キャプチャなど、その後の作業がスムースに運んで幸せになれると思います。

ビルドやテスト、リリースについては、ネイティブ（というか通常のiPhone開発ですねw）での情報が入手しやすいです。
開発効率でTitanium mobileを選択したならば、いいとこ取りでいきましょー


開発中は必須のページ
下記は特にお世話になりました。
・titanium-mobile-doc-ja
・API Reference Guide
上記に書いてないことは、“titanium　○○○　×××”見たいな感じでググって、根気よく探しています。
今後は、Titanium BBS辺りに集約されていくのかな？


以上、大したことない内容ですが、誰かのお役に立てば嬉しいです。


「ぐぐっと！急上昇ワード 」

Titanium Mobileで開発したiPhoneアプリをリリース（その1）

リリース後2週間以上経ってしまいましたが、iPhoneアプリをリリースしたので、少々書き記しておきたいと思います。

アプリ名：ぐぐっと！急上昇ワード
価格：無料アプリ
動作環境：iOS3.1以降
リリース：3/27
対象地域：日本




去年リリースしたAndroidアプリ「ぐぐっと！急上昇ワード」が順調にDL数を伸ばし、「来月には5万DL突破だな」といった2月中旬「無料のAndroidアプリ（途中から広告入り）を開発＆リリースし、運用してみて色々勉強になったけど、ここらで一段落かな。」と感じるようになり、「iPhoneアプリをやるしかない！」とiPhoneアプリ開発を決意しました。

実はTitanium Mobileを昨年末ぐらいにいじっていて、「ぐぐっと...」を途中まで作っていたのですが投げ出していて、今回iPhoneアプリを開発するにあたってはObjective-C（俺のC言語のスキルはさわり程度しかない）でやる！と意気込み、入門書を購入し、サンプルコードを参考に「ぐぐっと...」iPhone版を作り始めました。
ある程度まで進んだところで（偶然にもTitaniumで投げ出したのと同じようなところまでだった(^_^;)）さて次はどうやるんだろうと試行錯誤モードの時に、気まぐれでTitaniumではどうやるんだろうとやってみると。。。アレ？なんか続きが出来たぞ！「このままTitanium Mobileで開発しよう」と、当初の意気込みは何処へやら、Titanium MobileのiPhoneアプリと相成ったという訳です。（Titaniumをいじろうと思ったのは、hidev勉強会でTitaniumやってる人が意外に多かったてのもあります）

その後はいくつかつまずくところがあったものの、比較的スムースに完成したのではないかと思います。
機能的にはAndroid版と同じものを目指しているので、粛々と実装をしていくだけだったのですが、INTENTでブラウザに処理を投げる＆Backキーで戻るというAndroid的な処理ができないので、iPhone版はまずアプリ内ブラウザ（WebView）で見せて、Safariに引き継げるようにしたり、ナビゲーションをどのように実現するか（戻るキーとメニューキーの偉大さを実感）を考えないといけなかったりしたところが最大の課題だったともいえます。
※Titanium Mobileの開発で調べたことやTwitterで教えてもらったことは別途書こうと思います。

Developer登録でよくある問題に陥ったり、Reviewに時間がかかったり、といったことも経験しましたが、ググれば山のように出てくる話なので、ここでは割愛します。

余談ですが、Android版「ぐぐっと...」をリリースした時は、このジャンル（Google急上昇ワードのマッシュアップ）のアプリはiPhoneアプリの「トレ○ドなう」ぐらいだったと記憶していて、「ぐぐっと」はAndroidでは少なくとも先行者であると自負しています。今回iPhoneアプリを調べてみると、いくつかの類似アプリがリリースされていて、ひとつのジャンルが形成されていると感じました。（つまり、ニーズがあるということ）

iTunes Connectの見方がイマイチ分かりづらく、数字を読み間違えていないならば、リリース後2週間程で約5,000DLされた模様です。
この数字が多いのか少ないのかさえ分からない位、iPhoneアプリのノウハウを持ってないのですが、元々Long Termを狙ったアプリなので、今はあまり気にしないことにします。

今後もアプリの小さいアップデートを計画していますが、Android版も含めアプリとしての基本形は出来ていると思っています。
このアプリというかこのサービスを進化させていくためには、今後別のサービスとの連携が必要かなと思っていて、今それについて考えているところです。

とりあえず、技術的な話のない第一弾ということで。

次回に続く

2010年の振り返り

奇跡的にこのブログが1年以上継続できたので、2010年の振り返りをしてみることにします。

まず個人活動としては、

1月
・Twitter bot「@kokucheese_bot」作成。AppEngineをPythonに乗り換える。それなりの多くの人の役に立っているようで嬉しい限り。

3月
・JavaScript強化宣言。今後の主要言語として外せません。継続してフォローしていきたいと思っています。

5月
・Androidアプリ「ぐぐっと！急上昇ワード」公開。その後も継続してアップデートし、現在約27,000ダウンロード。こちらも多くの人の役に立っているようで嬉しい限り。

7月
・スマートフォン向けJavaScriptライブラリ「iUI」を試す。

9月
・注目度がとても高いサーバーサイドJSの「Node.js」をさわってみた。

10月
・スマートフォン向けJavaScriptライブラリ「JQuery Mobile」を試す。

11月
・AIR for Androidで作成したアプリ「Simple Timer」を公開。
・アプリ紹介ページ作成。これもAppEngine上に公開。静的ページだけでもAppEngine。

12月
・Twitterのタイムラインをタイムシフト視聴するためのWebアプリケーション作成。これもAppEngineを活用。

キーワードを抽出すると、

• Google App Engine
• JavaScript
• Twitter
• スマートフォン
• AIR/AS3

ってところでしょうか。

上記以外にも、RailsやSinatraでrubyに触れたり、NoSQLであるMongoDBを触ってみたり、スマートフォン向けサイトでhtml5＆CSS3を使い始めてみたりしてます。あと、Titanium MobileでiPhone向けアプリにも挑戦中です。

仕事では、当時在職していた会社で、メイン事業の携帯アプリのデザインと新規開発の携帯アプリのデザインを手掛けたりしました。
また、たくさんの勉強会やセミナーに参加できて、仕事では関われないようなクラウド系、大規模系、インフラ系等の話が聞けたりしたのもかなりの収穫でした。

それと書籍のレビューをお手伝いし、謝辞を戴いたことも初めての経験でした。

今年1年、たくさんの方々のおかげで、小さいながらも公開できるモノを作ってこれました。この場をかりて厚く御礼申し上げます。
私も誰かの役に立てるようにできるだけ情報発信に努めたいと思っております。
そして近いうちに新しいアプリの公開やWebサービスの実現へ繋げていきたいと考えています。

今年も成長曲線を描けたと思います。（一応このブログのタイトルなので…）
そして来年も（成長曲線を描けるように）頑張りまっせ〜

jQueryでAjaxメモ

jQueryでAjaxする時のためのメモ（備忘）です。
「初めてのJavaScript 第2版」に出てくるサンプルをjQueryを使ったバージョンと比べてみます。

まずは、本に出てくるAjaxのサンプルです。（scriptの部分のみ抜粋）

コード量が多いし、解説が欲しいですね。

これをjQueryを使うと、かなり記述量が減り、可読性も上がります。jQuery万歳！！な感じです。

※jQueryから操作しやすいようにidを付け加えたりしています。
※$.getよりも$.ajaxの方が、柔軟性があって良いみたい。

通信しているサーバサイドは共通です。
（※SyntaxHighlighterの表示が少しおかしいです）

札幌" .
        "旭川" .
        "根室";
        break;
      case "FU" :
        $result = "福井" .
        "鯖江" .
        "越前";
        break;
      case "NA" :
        $result = "長野" .
        "松本" .
        "Web3.0シティ" .
        "上田";
        break;
      case "OK" :
        $result = "那覇" .
        "石垣";
        break;
      defaut :
        $result = "都市が見つかりません";
        break;
    }
    echo $result;
  }
?>

上記を発展させると、イベントをトリガとして通信し、データを書き換えるという処理がいろいろできると思います。

jQuery日本語リファレンス

jQuery Mobileを試してみた

JavaScriptライブラリの標準といってもいいjQueryから、モバイル向けの「jQuery Mobile」がリリースされました。
バージョンはまだALPHA 1ですが、最も期待しているライブラリですので、早速試してみました。

お題として、以前iUIを利用した「iOS向けに「ぐぐっと！急上昇ワード」のWebアプリ版をつくってみた」と同じものをつくってみました。


画面はこんな感じになりました。（リンク）
iUIに比べると、リストの高さが狭かったり、文字サイズも少し小さいかな。全体的に表示が小さいですね。

コーディングのやり方はiUIと似ています。同一htmlファイル内に、各画面の記述をして、画面遷移の際にうまいこと表示してくれます。大きく違うのは、独自属性を使って各要素や動作を設定しているところでしょうか。また、戻るボタンが自動的に表示される（記述しないで良い）のには、へぇ〜って感じでした。

jQuery Mobileのページで公開されているデモを見ると、複数htmlを使って画面遷移しているようで、どうやら、ページの一部を別htmlの内容に置き換えて表示する方法があるようです。この辺の検証も追々やっていこうかと思ってます。

動作が少し重いと感じましたが、まだまだアルファ、やはり期待できるライブラリです。
jQuery Mobileの登場で、今後スマートフォン向けサイトが増えそうですね。
Webもどんどん変わってきますね。

jQuery Mobile

追記：2010/11/12 Alpha2がリリースされましたので、サンプルもAlpha2に対応させました

Node.jsをさわってみた

今話題!?のNode.jsをさわってみた。

APIの日本語訳がすでにあります。アツいです。

まずインストールですが、今回はMacPortsからインストールしました。バージョンが古かったのですが（現時点での最新はv0.2.1、Portsのはv0.2）、インストール時にNode.js本体の他に依存パッケージが6つ入っていたので、無用なトラブルを避けるためにも初回はこれでよかったかも。


では手始めにAPIの日本語訳からHello Worldを。

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

次にHTML形式を返すようにしてみます。

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

Content-Typeをhtmlにすれば、タグが使えるようになります。太字になりました。

ではパラメータを受け取ってみます。

var http = require('http');
var url  = require('url');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});
  
  // リクエストURLを解析したオブジェクトの取得
  var req_str = url.parse(request.url, true);
  
  if (req_str['query']) {
    response.end('Hello ' + req_str['query']['name'] + '\n'); //クエリnameの値にアクセス
  } else {
    response.end('Hello World!\n');
  }
  
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

パラメータで渡したnameが反映されて表示されてます

サーバーサイドということでまずは以上のようなことをやってみました。
次は、もっとNode.js的に期待されている非同期処理とかにも挑戦していきたいです。


※Node.js向けにnpm（Node Package Manager）というパッケージ管理の仕組みがあって、モジュールの管理ができるそうです。また、便利なモジュールの提供がされてるとか。

JavaScriptでマッシュアップ

最近学習に力を入れているJavaScriptでマッシュアップをやってみました。

どのあたりがマッシュアップ？かというと、背景画像をflickrから取ってきてランダムにbackgroundに設定しています。
ちょうど参考になる記事がありましたので、サンプルのソースを流用させて貰いました。

マッシュアップ部分のJavaScriptは以下の通りです。
※全部のソースが見たい場合は上記画像からリンク先にてご確認ください。

/*index.htmlのhead内*/
 

 

/*flickr-search.js*/
// 画像検索を行う関数
function photo_search ( param ) {
    // APIリクエストパラメタの設定
    param.api_key  = 'APIキーを取得して設定';
    param.method   = 'flickr.photos.search';
    param.per_page = 100;
    param.license  = '1,2,3,4,5,6';
    param.sort     = 'date-posted-desc';
    param.format   = 'json';
    param.jsoncallback = 'jsonFlickrApi';

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
};

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
}

// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
    // データが取得できているかチェック
    if ( ! data ) return;
    if ( ! data.photos ) return;
    var list = data.photos.photo;
    if ( ! list ) return;
    if ( ! list.length ) return;
    
    // ランダムに1つ取り出す
    var n = Math.floor(Math.random() * list.length);
    var photo = list[n];
    
    var link = 'http://www.flickr.com/photos/' + photo.owner + '/' + photo.id + '/';
    $('#cc').attr('href',link).text(photo.id);

    var val = 'url("http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_b.jpg")';
    //$('body').css('background-image',val);
    $.backstretch(val);
}

大雑把な処理の流れとしては、どんな写真を検索するかパラメータを渡してJSのメソッドを呼びます。
JS側ではflickrApiを使うための手続きをしたり、どんな形式でレスポンスを返してもらうかなどの決め事を元に、写真を検索し、その中からランダムに返ってきた写真のURLをbackground-image jquery-backstretchに渡してブラウザのウィンドウサイズに合わせて背景(7/26追記)にセットします。

仕事ではこんな重い処理を採用することはないと思いますが、いろいろとキレイな写真が見られるので、OKとしましょう。

• jquery-backstretch

iOS向けにiUIで「ぐぐっと！急上昇ワード」のWebアプリ版をつくってみた

以前リリースしたAndroidアプリ「ぐぐっと！急上昇ワード」のWebアプリ版をつくってみました。
どうせならということで、iPhoneっぽいUIライブラリのiUIをつかって、iOSを対象としたiPhoneアプリぽいインターフェースのWebアプリケーションになっています。

http://jp-trends.appspot.com （iOS端末またはWebkit系のブラウザでご覧ください）
自分でプログラム書く場合にデザインが二の次になるのはいかんですなぁ＞俺

Androidアプリの場合はGoogleから直接XMLを取得しているのですが、Webアプリ、そしてJavaScriptということもあり、サーバ側でいったんXMLをJSONに変換しています。

Google急上昇キーワード→GAEでXMLを取得しJSONに変換（cron実行）→JavaScriptでJSON取得・表示

「続・ハイパフォーマンスWebサイト」によると、JSONのパースはeval()ではなくて、JSON.parse()を推奨とのことでしたので、今回そのように実装したのですが、iPod toutch（v2.2.1）やAndroid 1.6の端末ではうまくデータが取得できていないようだったので、もしかしたら、上記2機種のWebkitには、JSONのネイティブパーサが搭載されていないのかも知れません。また、iPad（v3.2）とiPhone 3GS（v4.0）で表示や挙動が若干異なる部分もあるようなので、Safari自体に差があるのか、ライブラリの問題なのか、iOSといえどもWebアプリによくある問題とは無縁ではないことを改めて実感した次第です。
今後はiUI以外のライブラリ（Senchaとか）も試してみたいですね。

JavaScriptを勉強しよう！

「html5を使いこなすにはJavaScriptができないといけない by 俺」ということで、まずはこの本で勉強します。