ドゥアイネットのプログラマー、湯川が開発日記を綴ります。

CALENDAR
S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
<< November 2018 >>
ARCHIVES
CATEGORIES
レスポンス向上
 スマートフォン版mixiアプリを開発していて、
データ読み込み速度の遅さが問題になりました。

携帯版(flash lite2.0)とあわせてデータのやり取りをXMLで作成していました。
携帯よりスペックが上のスマートフォンなので問題ないかと思っていましたが、
XMLだと、ちょっと遅いようです。とくに回線が遅い場合はかなり時間がかかります。

そこで、データのやり取りをXMLではなくJSONに変えました。
これが効果があったらしく、読み込み速度は速くなりました。

以前書いたイメージの切り替えとあわせて、ようやく使えるレスポンスになりました。
| jquery mobile | 16:53 | comments(0) | - |
イメージの切り替え
 スマートフォン用のアプリを作成していて、
javascriptの書き方が悪くて速度がでないところがありました。

イメージを切り替える処理なのですが、

以下のようにスタイルの「backgroundImage」でイメージを切り替えていたら
非常に遅かったです。

v_style = document.testbtn.style;
v_style.backgroundImage = "url(./images/btnimage/btn_no" + v_no + ".gif)";

画像

このように書くと毎回、指定したurlから読み込まれるようです。
そのため回線が遅い場合、イメージの表示が遅れてしまいます。

改善するためにスタイルを定義してクラス名で変更するようにしました。

document.testbtn.className = "numbtn_" +  v_no;

こうすることで、読み込みが改善されました。
| jquery mobile | 18:08 | comments(0) | - |
jquery mobleの「tap」イベント
 jquery mobleを使っているのですが、
ボタンをタップしたときの処理が続けて2回実行されていまいました。

以下のように「tap」イベントをセットすると

$('#ansclear').bind('tap',this.clearClick);

「clearClick」が2回続けて実行されていまいます。。


最新の「jquery.mobile-1.0a4.1.min.js」を使用すると
イベントが2回実行されることはなくなりましたが
タップしてから間があって実行される感じになっていまいました。
「click」イベントと同じ動きのような感じです。

画像

できれば、タップしてからの間がない状態で
正しく実行されるようにしたいと思い、いろいろ試しました。

まず、2回実行されるうちの1回目には
「clientX」などの値が設定されていないことがわかりました。

値が設定されていないイベントの方が先に発生して、
後で発生するイベントには「clientX」などに値が入っていました。

そこでこうしてみました。
this.clearClick = function (event){

  //二度押しが発生するので制御
  //座標がとれているイベントは無視
  if (event.clientX != undefined && event.clientY != undefined){
    return;
  }
 
  処理・・・
 
}

これでイベントを1回に絞ることができた!
と思い実機テストをしていると。。

まだ、2回実行されてしまうことがありました。

さらに調べると、「clientX」などに値が設定されていないイベントも
続けて発生することがあるようです。

制御を追加して、以下のようにしました。

this.clearClick = function (event){

  //二度押しが発生するので制御
  //座標がとれているイベントは無視
  if (event.clientX != undefined && event.clientY != undefined){
    return;
  }
 
  //時間差が100以下のイベントは無視
  if (beforeTimeStamp != undefined){
    if (event.timeStamp - beforeTimeStamp < 100){
      return;
    }
  }
 
  beforeTimeStamp = event.timeStamp;
 
  処理・・・
 
}

イベントの「timeStamp」を使用して、
前回のイベント発生からの間隔が100以下の場合は実行しないようにしました。

これでようやく、2回実行を回避して、タップしてすぐに処理が実行できるようになりました。
| jquery mobile | 13:20 | comments(1) | - |
タップしたときの操作感
 スマートフォン向けのアプリを
jquery mobileで作成しています。

実機で試してみると、ボタンをタップしたときの
レスポンスが悪いことがわかりました。

タップしてしばらくしてから入力の反応がある感じです。
画像


スクリプトを見直したのですが、とくに問題なさそうでした。

ボタンを押したときに、色の濃い画像に切り替えていたので
試しにやめてみました。

そしたら、イメージどおりの操作感になりました。
スマートフォンでは、この方法でのイメージの切り替えは
動きが重くなるようです。

.numbtn:active{
  background-position: left bottom;
}

あまりレスポンスを気をつけていなかったので
スクリプトも見直して少しでも動きを軽くしたいと思います。

| jquery mobile | 18:38 | comments(0) | - |
残り時間表示
 残り時間表示

残り時間の表示を作成しました。
メーターのようにしたいので、まずは
jqueryの「progressbar」を使用してみました。


$("#progressbar").progressbar();
  var value = 100;
  var timer = setInterval(function(){
      if(value == 0) {
          clearInterval(timer);
          value = 0;
      } else {
          value = value - 0.5;
      }

      // プログレスバーの値を変更
      $("#progressbar").progressbar("option", "value", value);
  }, 100
);

プログレスバーのvalueの最大値が100と決められているようなので、
引いていく値を0.5にしてインターバルを0.1秒にしてみました。

画像
ですが、なんか動きがスムーズではありませんでした。
うまく調整すればいいのかもしれませんが、別の方法が良さそうです。

次は「animate」を試してみました。

<div style="width:100%;height:20px;border: 1px solid #666666;">
  <div id="timebar" style="width:100%;height:20px;background-color:#9cc900;"></div>
</div>

$("#timebar").animate(
  {width:"0px"},
  10000,"linear",
  function(){
    //0になったときの処理
  }
);
使用してみたところ、イメージどおりの動きになりました。
バーの動きがスムーズです。

画像

まだちょっと地味ですけどスタイルを変えたり、
残り時間に応じてバーの色を変えたりできたらいいかなと思います。

| jquery mobile | 09:18 | comments(0) | - |
スマートフォン対応
 先日リリースしたmixiアプリ「年号クイズ」のスマートフォン対応をはじめました。

最初はhtmlとjqueryで作成していたのですが、
慣れていないせいか、なかなかうまくいきませんでした。

検索してみると、スマートフォン開発用のjavascriptライブラリが
いくつかあることがわかりました。

jquery mobile
sencha touch
jqtouch

などです。

今回はデータの読み込み部分をjqueryで作成済みだったので
「jquery mobile」を使うことにしました。

使ってみると、便利で簡単にスマートフォンな感じを作成できます。
画像


画像

最初は右側の矢印アイコンが表示されませんでした。
どうも「jquery.mobile-1.0a3.min.css」をダウンロードして使うとダメみたいです。

×<link rel="stylesheet" href="./css/jquery.mobile-1.0a3.min.css" />
○<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />

動きも制御できていい感じです。早く対応完了できるようにしたいです。
| jquery mobile | 11:15 | comments(0) | - |
| 1/1PAGES |