【Javascript】携帯用ストップウオッチを作る2

携帯用ストップウオッチを作る2

---

1: onclickをonfocusへ
2: 問題点
3: クロスブラウザ化
4: サンプル

スタートタップで動作

今回は、前回作った、スマートフォン向けストップウオッチのチューンナップです。

このストップウオッチは、Windows Mobile5.0(WM5)を積んだスマートフォン、ソフトバンクX01HTでデフォルト搭載されているブラウザIEをターゲットとして作ったスクリプトでしたが、一般のPCブラウザでも動作しました。

今回は、まず、これを、WM5版IEに絞り込んで性能をチューンナップします。そして、次に、そのチューンナップされたスクリプトを元に、 再度他の一般のPCブラウザでも動作するようにクロスブラウザ化を施してみます。

onclickをonfocusへ

前回は、「スタート」「ストップ」「リセット」の動作を起動させる イベントハンドラとして、次のように、onclickイベントを用いました。

    <!-- スタート/ストップ/リセット ボタン -->
    <a href="javascript:void(0)" 
       onclick="timer.tap();this.blur()"
       ><img 
       id="timer-btn"
       alt="Start→Stop→Reset"
       border="0"
       src="start.jpg"></a>
       

これは、ボタン画像をクリック(タップ)することで、「スタート」「ストップ」「リセット」の動作を分岐するメソッドtimer.tap()を起動しています。(前回のJavaScriptソースを参照。ちなみに、this.blur()は、クリック後、画像周囲に現れるフォーカスラインを、リンクフォーカスを外すことで消去する小ワザです。)

ところが、実際にX01HTのIEで使ってみるとわかりますが、タッチパネルのクリックイベントは、押し方によって微妙に反応したりしなかったりします。 つまり、押したつもりが押せていないという事が起こるのです。

PCのブラウザでは、そんなことは起こりませんが、そこはやはり、タッチパネル式のスマートフォン固有の癖というものです。

しかし、しっかり押さないと動作不良が起こるというのでは問題です。 そこで、いくつかのJavaScriptのイベントの中から、onclickよりも先に発生するonfocusイベントを試してみます。すると、 この問題を回避できることがわかります。

方法は簡単です。単純に、onclickをonfocusに変えただけです。

    <!-- スタート/ストップ/リセット ボタン -->
    <a href="javascript:void(0)" 
       onfocus="timer.tap();this.blur()"
       ><img 
       id="timer-btn"
       alt="Start→Stop→Reset"
       border="0"
       src="start.jpg"></a>
       

(*ちなみに、JavaScriptのイベントには、このonfocus他にもマウスが重なった時に動作するonmouseoverイベントがありますが、これは、残念ながら、WM5版のIEでは動作しません。更に、普通なら、oj.onfocus=関数や、あるいは、IEのイベントメソッドであるoj.attachEventなどを使って更にスクリプトを整理するところですが、これらもWM5版のIEでは動作しません。このように、WM5版のIEで動作させるためには、MSIE 4.01ベースの古いJScript実装であることに注意して、命令の実装チェックが不可欠です。)

さて、今回は、更にこの「timer.tap();this.blur()」という2つの動作をtap()にまとめて、HTML内でのJavaScript記述を簡単にします。前回のJavaScriptソースでストップウオッチクラス 内のtap()メソッドは、次のようなものでしたが、、、

  this.tap=switchFunc;

今回は次のようになりました。

  this.tap=function (oj){switchFunc();oj.blur()}; 

参考までに、ここで使っている関数switchFuncは次のようにストップウオッチの動作をスイッチする働きをします。

  //スタート ストップ リセット 切り替えスイッチ
  function switchFunc(){
    switch(oj.swt){
      case 0 : start()  ;break;
      case 1 : stop()   ;break;
      case 2 : reset()  ;break;
    }
  }

これによって、上記HTML内のonfocus部分は、次のようにメソッド1個だけのシンプルな記述に変わります。blur()するオブジェクトthis(つまりこのA要素)は、メソッドtapの第一引数ojとして渡し、メソッド内では、oj.blur()として処理しています。

    <!-- スタート/ストップ/リセット ボタン -->
    <a href="javascript:void(0)" 
       onfocus="timer.tap(this)"
       ><img 
       id="timer-btn"
       alt="Start→Stop→Reset"
       border="0"
       src="start.jpg"></a>
       

問題点

しかし、これは、X01HTでは、うまく動作するのですが、実は、問題があります。それは、いくつかのPCブラウザでうまく動作しないことです。

たとえば、 Opera9やSafari1及び2はA要素のonfocusイベントを検知できず、Firefox1.5や2はoj.blur()のせいで、すぐに動作が停止してしまいます。

つまり、onclickでは動作していたPCブラウザが、動作しなくなってしまいます。さらに、同一要素へonfocusとblur()を適用するという組み合わせは、X01HTのIEでは大丈夫でしたが、ブラウザによっては無限ループを起こす危険性も排除できません。

一応、上記PCブラウザではうまく動作はしませんが、念のために、サンプルは次のようになります。

サンプル→StopWatch

もちろん、そもそも、このストップウオッチが想定していた用途は、スマートフォン用アプリですから、これで終了しても良いのですが、せっかくですので、この問題を回避する方法も紹介しておきます。

次ページでは、この問題を回避して、再度PCブラウザでも動作するクロスブラウザ化を行ってみます。