カメラを使ってみよう

前回はiPhoneらしい機能として，GPSとマップ表示の利用法について解説しましたが，今回はカメラの利用方法について解説します。また，既に撮影してある写真からも選択できるように，写真の選択方法をOption Dialogで選べるように実装してみます。また，TwitPicへの投稿方法も簡単に解説します。

ImageViewを準備

選択した写真をプレビューできるように，写真を表示するViewを用意しておきます。表示する部分は前回，地図を表示した部分と同じところにします。

前回実装を追加したmessage_window.jsに次のコードを追加します。

var imageView = Titanium.UI.createImageView(
    {
        width: 'auto',
        height: 240,
        top: 220
    }
);
imageView.hide();
win.add(imageView);

前回の地図表示と同じく，必要になるまで表示しないようにhideメソッドで表示を隠しています。また，width を 'auto' に指定していることに注意してください。widthをautoに指定することで，この後写真のデータを指定した時に縦横比がある程度維持されるように自動で調整が行われます。

OptionDialogを用意

写真の添付はその場で撮影することも，既に撮影した画像から選択することも考えられるので，OptionDialogと呼ばれる図のようなViewを出してユーザーに選択してもらうようにします。

var sourceSelect = Titanium.UI.createOptionDialog({
    options:['撮影する', 'アルバムから選ぶ', 'キャンセル'],
    cancel:2,
    title:'写真を添付'
});

sourceSelect.addEventListener('click',function(e)
{
    switch( e.index ) {
    case 0:
        startCamera();
        break;
    case 1:
        selectFromPhotoGallery();
        break;
    }
});

var photoButton = Ti.UI.createButton(
    {
        top: 160,
        left: 100,
        width: 80,
        height: 44,
        title: 'photo'
    }
);

photoButton.addEventListener(
    'click',
    function() {
        sourceSelect.show();
    }
);
win.add(photoButton);

Titanium.UI.createOptionDialogに渡すオブジェクトのoptionsに指定する配列で，表示する文言を指定できます。次に作成した，optionDialogオブジェクトに対してclickイベントのイベントリスナを設定しています。イベントオブジェクトeのe.indexから押されたボタンのインデクスが取得できます。ここでは，「⁠撮影する」「⁠アルバムから選ぶ」の二つのボタンそれぞれで写真を取得する実行する関数を呼び出しています。

後半部分では，ダイアログを表示するためのボタンをphotoButton変数に作成し表示しています。ボタンがクリックされた際にダイアログが表示されるように，photoButton.addEventListenerで指定する関数の中で，sourceSelect.show()を呼び出しています。