tweetaniumのソースコードリーディング - 40歳からのキャリアチェンジ

自分が作ってるアプリの参考になるかと思ってtweetaniumのソース読んでいました。

全部をくまなく読んだわけではないものの、最終的には自分のアプリで応用するのは難しいかなぁと判断しました。ただせっかく読んだソースなので理解した内容をまとめようかと思います

アプリケーション起動までの流れ

最初に読み込まれるapp.jsにはたったこれしか書かれていませんでした

//app.js
Ti.include('/tweetanium/tweetanium.js');

tt.app.mainWindow = tt.ui.createApplicationWindow();
tt.app.mainWindow.open();

tweetanium.jsで起動時の色々な処理があるのかと思ってそっちを見たのですが

名前空間の定義（var tt = {}とかtt.app={}
ライブラリ内で多用するユーティリティメソッド的なもの(tt.mixin）

という感じでした。
結局、app.jsの2行目にあるtt.ui.createApplicationWindow()に初回起動時の処理のベースがあるようでした。

このメソッドがどこに書かれているのかというとResources/tweetanium/ui/ApplicationWindow.jsの12行目にあったので、それ以降の行を中心に読み始めました

Window内の要素の配置

ソースコードを読み進める前に、「Window内に必要な要素を配置して、Titanium.UI.createTabGroupを使ってタブ内にそのWindowを配置する」というのを勝手に期待していました。

ただApplicationWindow.jsを読み進めて行ってもそれらしきものがなく、しかも29行目の

//Resources/tweetanium/ui/ApplicationWindow.js

		var appFilmStrip = tt.ui.createFilmStripView({
			top:0,
			left:0,
			right:0,
			bottom:tabHeight-10,
			views: [
				tt.ui.createTimelineView(),
				tt.ui.createMentionsView(),
				tt.ui.createDMView(),
				tt.ui.createAccountView(),
				tt.ui.createAboutView()
			]
		});

というのが最初何をやろうとしてるのかさっぱりわかりませんでした。

とりあえず、TitaniumStudioでtweetaniumをビルドしてシミュレーターでアプリを実行して実際の画面イメージを確認しました

シミュレーターでアプリを動かしてみてわかったのですが、以下のような感じなんですね

Ti.UI.createView()でレイアウトの一番外枠となるウィンドウとなる要素を生成
そのViewの中にTi.UI.createImageView()やTi.UI.createView()を入れ子にする
DMとか＠されたtweet別にウィンドウを順番に生成。（対応するファイルはResources/tweetanium/ui配下にあるDMView.jsとかMentionsView.js等など）

ウィンドウの表示切替は？

Window内に必要な要素を配置して、Titanium.UI.createTabGroupを使ってタブ内にそのWindowを配置するという手法ではないから、それぞれおのウィンドウの表示切り替えはどうしているのかなと思ったのですが、ApplicationWindow.jsの107行目のselectIndex(_idx) で、現在選択されているウィンドウが何番目なのか判定した適切に処理しているようですね
※ここはじっくりソース読んでないので実際には間違っているかも・・

この辺りまで読んで、最終的には自分のアプリで応用するのは難しいかなぁと判断してあまり深追いしないようにしました

細かい所で参考にしたいソース

tt.mixin()とかはそのまま応用したいなぁと思ったのですが他にも参考になりそうな書き方あったのでいくつかまとめておきます

引数のコメントの付け方

tweetanium.jsの中にあるmixinの引数の所

	function mixin(/*Object*/ target, /*Object*/ source){
		// 略
        }

という感じで、引数の前にコメントでその引数の型を書いていました。こういうコメントの書き方を今まで見たことが無かったのですが、ソース読んでいる時にこのように期待される型が書かれていると読みやすく感じたのでこれは参考にしたいですね。

styles.jsの$$ショートカット

UI上に配置するラベル等の設定情報はResources/tweetanium/ui/style.jsに集約しており、このあたりは以前から自分もやっていたのですが、

(function() {
//中略
	//All shared property sets are declared here.
	tt.ui.properties = {
          //中略
	};
})();

//global shortcut for UI properties, since these get used A LOT. polluting the global
//namespace, but for a good cause (saving keystrokes)
var $$ = tt.ui.properties;

の最後にあるglobal shortcut for UI propertiesの所はかなり参考になるので、自分が作っているアプリにもこれ応用させてもらうことにしましたｗｗ

ソースコード読んだ内容を踏まえて、自分が書いてるアプリは全面的にシングルコンテキストな形に書き換えているのですが、次回そのあたりについて触れていこうと思います