遅い処理での小さな心遣い

今回は、Titanium Mobileを使って開発しているアプリでの、ちょっとした心遣いのお話です。前回の投稿で、UI部品が100個以上にもなるViewの話が登場しました。実機でテストしていると、表示されるまでの遅さが気になります。たった2秒弱なのですが、表示されるまでの間に「あれ、動いてないのかな」と感じてしまいます。おそらく、人によっては画面をタップしてしまうでしょう。何か対策を打つのが、良い選択ではないかと考えました。

実際に処理中ですから、ActivityIndicatorを表示させるのが適切な選択でしょう。ActivityIndicatorが回っているのを見せれば、「処理してますから、少し待ってくださいね」と伝わります。ActivityIndicator自体は白いので、四角いグレーのViewを用意し、その中央で回ってもらいましょう。これも、いつものように生成関数を用意して、処理する側では1行で生成しました。JavaScriptは、次のようになります。

// 処理中を伝えるView表示
var view9 = bbb.createViewF(win, 256, 256, 220, 220);
view9.backgroundColor = '#ccc';
var activityIndicator = bbb.createActIndcF(view9, 110, 110);
activityIndicator.show(); 
// 本来のViewを生成（Viewをhideして多数のUI部品を追加）
var view1 = bbb.createViewF(win, 768, 768, 0, 0);
view1.hide();
var lblTitle1 = bbb.createLblF(view1, 'Viewタイトル', 24, 'left', 24, 'auto', 20,20);
...
// 処理中Viewを消す（削除する）
win.remove(view9);
// 本来のViewを表示
view1.show();

本来のview1を生成する前に、処理中だと伝えるview9を真っ先に生成して、そこにActivityIndicatorを追加してshowします。これで処理中の表示が始まりました。続いて、本来のview1とUI部品を生成します。ここが、一番時間のかかる処理ですね。生成が終わったら、処理中表示のview9をウィンドウから削除して、本来のview1をshowします。

上記のJavaScript全体は関数として呼び出す形なので、view1を生成すると終了します。処理中表示のview9は、ウィンドウから削除していますし、関数内の変数も関数の終了で消えてますから、view9で使ったメモリーは解放されるというわけです。本来のview1だけが画面に表示され、動き続けます。

実際に初代iPadで動かしてみると、受ける印象が全く違います。256x256サイズの四角いグレーの中に、ActivityIndicatorが回っているだけですが、待たされているという感じはぜんぜんありません。ActivityIndicatorが動いていて、それを眺めてしまうのが原因でしょうか。待っている際のイライラ感が完全に消えてしまいました。とりあえず、大成功のようです。