Titanium Mobileで作る! iPhone/Androidアプリ

第22回 TitaniumでiPadアプリ

この記事を読むのに必要な時間:およそ 2.5 分

今まで,iPhone/iPodやAndroidを対象としたアプリ制作について解説してきましたが,今回はiPadアプリの作成について解説します。

すでに対応してるかも?

Titanium Studioを利用するようになったTitanium Mobile 1.7から,iPhoneアプリはiPadでも動くUniversal Binaryに対応しています。普通に新プロジェクトを作成するとiPadでも起動するようになっていて,Titanium Studioの左ペインにあるシミュレータ起動ボタンから,iPad Simulatorを選ぶだけでiPadでの動作が確認できます。

古いバージョンで作成しているプロジェクトをUniversal Binaryに対応させるには,まずtiapp.xmlのDeployment TargetsにあるiPadのチェックボックスがonになっていることを確認します。そのあと,projectのディレクトリにあるbuild/iphone以下をすべて削除します。その上でTitanium Studioを再起動すると,古いプロジェクトでもiPadで起動できるようになっているはずです。

図1 Deployment Targetsに注意

図1 Deployment Targetsに注意

Universal Binaryでの注意点

iPhone/iPad両対応のアプリを作成するのは上記のように簡単なのですが,デザインの調整まで自動でやってくれるわけではありません。iPhoneでは画面サイズを横幅320px,縦幅480pxとしてデザインしていたわけですが,iPadでは横幅が768px,縦幅1024pxとしてUIをデザインする必要があります。なにも変更を加えないと,iPhoneでもiPadでも同じ位置や幅の指定が行われるので間延びしたデザインになってしまいます。これを防ぐにはTitanium.Platform.osnameプロパティを参照するなどしてデバイスごとにデザインを変更する必要があります。

iPad版のみで可能なこと

iPadのみでつかえる機能としてTitanium.UI.iPad.PopoverとTitanium.UI.iPad.SplitWindowの2つがあります。これらはiPad特有のネイティブUIで,それぞれ下記のような表示を行うことができます。

図2 Popover

図2 Popover

図3 SplitWindow

図3 SplitWindow

それではPopoverの実装方法から解説します。

var win = Ti.UI.currentWindow;

var button = Ti.UI.createButton({
    width: 200,
    height: 50,
    top: 100,
    left: 10,
    title: 'popover'
})

button.addEventListener('click',function(){
    var popover = Ti.UI.iPad.createPopover({height:100,width:100});
    var label = Ti.UI.createLabel({
        text:'Title',
        color: 'white'
    });
    popover.add(label);
    popover.show({view:button});
})
win.add(button);

popoverは常に表示されているわけではなく,ユーザーの操作に応じて表示されるものなので,ここではボタンがタップされた時に表示されるように実装しています。実際にpopoverのViewを作成しているのが Ti.UI.iPad.createPopover({height:100,width:100}); の部分で,このメソッドで作成したViewに対して表示する要素をaddしていきます。ほかの普通のViewと同じですね。1つだけ普通とちがうのは,表示するときにWindowにaddするのではなく,showメソッドを呼び出す点です。また,showメソッドにはViewをプロパティに持つオブジェクトを渡す必要があり,このViewプロパティに渡したUIから吹き出しが生えたように表示されるのが大きな特徴になっています。また,popoverはpopoverではない部分をタップされたときに勝手に消えるようになっているので注意してください。

また,popoverにはタイトルやボタンを一番上に表示することができ,

var popover = Ti.UI.iPad.createPopover({
        height:300,
        width:300,
        title: "This is popover",
        rightNavButton:button2,
});

のように設定することで,表示が変更できます。この時rightNavButtonにはTitanium.UI.Buttonオブジェクトを指定してください。このbuttonオブジェクトの 'click' イベントにリスナを設定しておくことで機能を割り当てることができます。

図4 タイトルとボタンが増えている

図4 タイトルとボタンが増えている

著者プロフィール

倉井龍太郎(くらいりゅうたろう)

株式会社はてな アプリケーションエンジニア。

スマートフォンアプリからSQLチューニングまで幅広く格闘中。好きな言語はRuby。

URLhttp://d.hatena.ne.jp/r_kurain/
Twitter@kurain

コメント

コメントの記入