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辺りに集約されていくのかな？


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


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