前回の記事でTwitterに投稿するところまで実装ができましたが、投稿したあとのwindowの遷移が起きないままになっていますので今回は画面遷移について解説していきます。また、今までのコードをgithubにて公開しましたので必要に応じて参照してみてください。各連載時のコミットにタグをつけてあるので連載にあわせてタグを選択すると便利です。

windowの遷移

windowを閉じる

Twitterに投稿したあとに、メッセージを書いていたwindowを閉じるようにしてみます。

以下のコードを追加します。

postButton.addEventListener(
    'click',
    function () {
        if ( textArea.value ) {
            tweet( textArea.value );
            win.close(); //この行を追加
        }
    }
);

これで 投稿が完了すると、メッセージ作成画面が閉じられるようになります。

windowを開く

さて、閉じるのは簡単に書けましたが、windowを開くにはいくつかの方法があります。

windowを開くコードを少し書き換えてみましょう。

messageButton.addEventListener(
    'click',
    function () {
        var messageWindow = Ti.UI.createWindow(
            {
                url: 'message_window.js',
                title: 'message',
                backgroundColor: '#fff'
            }
        );
        Ti.UI.currentTab.open(messageWindow); //ここを変更
    }
);

前回のコードからwindowを開く部分だけが変更されています。前回の記事ようにmessageWindow.open()と記述すると画面全体を覆うようにメッセージ入力画面が出現しますが、このようにTi.UI.currentTab.open()を利用すると画面上部のナビゲーションバーを残したまま次の画面を開くことができます。この時デフォルトの動作ではアニメーションが設定されており、次のページが右から覆いかぶさるような印象を与えます。

Ti.UI.currentTab.open(messageWindow,{animated:false});

と指定することでこのアニメーションは無効にすることができます。

windowを閉じるときも同様で、

postButton.addEventListener(
    'click',
    function () {
        if ( textArea.value ) {
            tweet( textArea.value );
            win.close({animated:false}); //この行を変更
        }
    }
);

とすることでアニメーションを制御できます。

TabGroupに要注意

ここで説明した、

• ナビゲーションバーを表示しつつ
• 画面遷移をアニメーションする

という実装は、Ti.UI.TabGroupを利用してwindowを管理しないと利用することができません。そこで、この連載では第1回からタブによる画面の切り替えを利用しないにもかかわらずTi.UI.TabGroupを利用したコードになっています。

Titaniumでアプリを作成する際には、タブによる遷移がなくても必ずTi.UI.TabGroupを作成し、Ti.UI.Window.hideTabBar()を使ってタブバーを消しておく実装をおすすめします。

ツイートの詳細を表示する

ツイートの一覧がでるだけでは物足りないので、ここまで説明したウィンドウの遷移を使って、ツイートのパーマリンクを開いてみましょう。

    }
    tableView.setData(currentData);

    tableView.addEventListener(
        'click',
        function(e) {
            var tweet = timeline[e.index];
            var webWindow = Ti.UI.createWindow(
                {
                    url: 'tweet_window.js',
                    status_id: tweet.id_str,
                    screen_name: tweet.user.screen_name
                }
            );
            Ti.UI.currentTab.open(webWindow);
        }
    );
}

table_view.jsのupdateTimeline関数の最後に上記のようなコードを追加します。tableViewのクリックイベントをListenすることでタップされた行を知ることができます（e.indexの行⁠）⁠。そしてその行のインデクスからツイートの情報を取得し、新しく作るwebWindowにその情報を渡しています。

createWindowで渡しているオブジェクトの任意のパラメータ（上記の例ではstatus_idやscreen_name）で新しく開くwindowにデータを渡せる点はTitaniumの大きな特徴です。新しく開いたwindowではスコープがまったく別になりますので、この方法を用いないとデータを渡すことが基本的にはできません。

urlパラメータで指定してるtweet_window.jsは以下のようになります。

var win = Ti.UI.currentWindow;

var permalink =
    'http://twitter.com/' + win.screen_name
    + '/status/' + win.status_id;

var webView = Ti.UI.createWebView(
    {
        url: permalink
    }
);
win.add(webView);

少ないコードですが、これだけでWebページを表示するwindowが作成できます。permalink変数にはTwitterのscreen_nameとstatus_idから生成されるツイートのパーマリンクを指定しています。Ti.UI.createWebViewはurlに任意のURLを指定でき、指定されたWebページがviewとして表示されます。

上記の変更を加えるとツイートをクリックしたときに、下記のようにツイートのパーマリンクページが表示されるようになります。

まとめ

Titaniumにおけるwindowの遷移について解説しました。TabGroupを利用することでナビゲーションバーを使った遷移が簡単になることも説明しました。この方法はよく利用することになるので、繰り返しになりますがTabGroupを利用するように実装することを忘れないでください。また、後半では簡単にWebページが表示できるTi.UI.webViewの利用方法と、新しく開くwindowへどうやってデータを渡すかについて解説しました。