40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

TableViewのあるウィンドウからWebViewのあるウィンドウへの画面遷移のもたつき解消について

Titanium Mobile

先月位に


ということをつぶやいていた件について、状況まとめ＆回避方法についてまとめます

状況

TableViewを利用してこのような一覧表示をするウィンドウを最初に生成してます。
f:id:h5y1m141:20120416084729p:plain

任意の箇所をタッチすることで、以下のような詳細画面に遷移するといったよくあるViewerアプリの実装をしてます
f:id:h5y1m141:20120416084743p:plain

画面遷移はもちろん機能するのですが、起動して、最初の1回目のタッチの時だけ、表示がすぐに行われず、モッサリした感じがあります。

ただ最初の1回目だけその症状になり、2回目以降は一覧表示画面→詳細画面→一覧表示画面・・というの画面遷移のくり返しをしても、スムーズに行われる所を考えると、WebViewを生成するタイミングを考えてあげれば回避できそうに思いました。

取り組んだ事

アプリ起動時に、WebViewを生成して非常時にしておく。必要になったらHTMLコンテンツを挿入して表示をするというアプローチにして解消しました。

実装にあたって、CommonJSスタイルを貫く

CommonJSスタイルでの自分なりの書き方がなんとなく見えつつあります。

MVCのModelとなるentry.jsでブログエントリを管理。ui.jsにてUI全体の管理をする方針で考えていたけど、特にTableViewの各種処理を書いてくとちょっと見通し悪くなりそうなので、WebViewの生成などを担うwebView.jsとTableViewの生成＆各種イベントリスナーの設定をするtableView.jsとをひとまず別管理というやり方に現状してます。

ただui関係の処理というか名前空間がしっくりこなかったり、ローカル or リモートのJSONDBから条件にマッチするエントリを読み込んだりする処理のハンドリングをするためにController的なものが必要な気もしてきたのでこの辺りは作りながらもう少し試行錯誤しようかと思ってますがいづれにしても、今後CommonJSスタイル推奨されているのでこれは貫いていこうと思ってます

ソースコード一部

// app.js
var myApps = {};
myApps.ui = require('ui/ui');
myApps.webView = require('ui/webView');
myApps.tableView = require('ui/tableView');
myApps.entries = require('model/entries');
(function(){
  var entries;
  var blogger= 'xxxxxx'
  myApps.entries.load(blogger,function(entries){
    var rows = [];
    for(var i=0;i<entries.length;i++){
      var entry = entries[i];
      var row = myApps.ui.createEntryRow(entry);
      rows.push(row);
      myApps.tableView.setTableData(rows);
    }
  });

  myApps.ui.addElement(myApps.tableView.init());
  myApps.ui.addElement(myApps.webView.init());
  myApps.ui.createMainWindow();

}).call(this);

// ui/webView.js
var $$ = require('ui/styles').prop;
var webView = Ti.UI.createWebView($$.webView);
var htmlHeaderElement = '<html><head><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"></head>';
var exports = {
  init:function(){
    webView.html = htmlHeaderElement
      +'<body>'
      + '</body></html>';
    webView.hide();
    return webView;
  },
  insertContents:function(body){
    webView.html = htmlHeaderElement
        +'<body>'
        + body
        + '</body></html>';
    webView.show();
    return webView;
  }
};