AlloyでiOSデバイスの画面サイズを判別、分岐させる

どうも僕です。
ちょっとメモ程度に残しておこうかなと思います。

以前までは、生JS(女子小学生じゃないですよ)をゴリゴリ書いてたんですが
いかんせん、アップデートを繰り返すうちに保守性も糞もなくなってしまったんですね。

んで、手を付けたくなかったAlloyに手を出した訳です。
現在リリース中の「鉄道オルゴール増幅器」では、Ver3.0.1からAlloy
完全移行してます。

ここで問題になるのがiPhone4Sまでの画面サイズと、iPhone5からの画面サイズ。
iPhone5から縦に画面が伸びたのでそれに対して対応する必要がありました。

Classic(今までのJSゴリ書き)では「app.js」に画面サイズによる分岐で対処してました。

//iPhone5の判別部分
    function iPhone5() {
        return Ti.Platform.displayCaps.platformHeight == 568;
    };
   
    if (iPhone5()) {
         win1 = app.iphone5.maincreateWindow();
   
    } else{
         win1 = app.iphone4s.maincreateWindow();
    };

Ti.Platform.displayCaps.platformHeightで画面サイズを取得し、
それを基にifで画面を分岐させています。

Alloyでもcontrollersのindex.jsにviewをremoveするなどの処理を記述するなどすれば
従来のClassicのコードをちょっと弄るだけで対応できます。

しかし、MVCフレームワークの恩恵を受ける事は出来んのですよ。
じゃあどうするか...?

なんのことはありません。
alloy.jsに同様の文を書いてやればいいのですよ。

Classic環境では、index.jsが最初に参照されて必要であれば分割したjsファイルをrequireで引っ張ってやるのが多く取られてました。
(もちろんindex.jsにゴリ書きもありますけどね)

Alloyでは、alloy.jsが最初に呼び出されるのでそこに分岐処理を書きます。

	//端末の画面サイズを取得
	function iPhone5win() {
		return Ti.Platform.displayCaps.platformHeight == 568;
	};
	
	//端末ごとのviewファイルを取得
	var iphone5 = Alloy.createController('index').getView();
	var iphone = Alloy.createController('iphone').getView();
	
	//端末別にviewを分岐
	if (iPhone5win()) {
		iphone5.open();
	
	} else{
		iphone.open();
	};

画面サイズ取得はClassicの方法と同じで問題ありません。
requireでViewを取得する時同様、Alloy.createController('hogehoge').getView();で
端末別のViewを取得します。
(この時、indexをiPhone5用、iPhoneiPhone4S以前用のViewとしています。)

あとは、ifでViewを端末別に分岐してやれば終了。

これでそれぞれのViewとControllerが共存しないのでMVCの恩恵が受けられるかなと...

無論、iPhone6とか出てて画面サイズのラインナップが増えたとしても端末分岐のifをSwitchに変えて画面サイズ取得の部分を弄ってやれば簡単に対応出来ます。