« 2016年8月 | トップページ | 2016年10月 »

2016年9月

2016年9月18日 (日)

this は何?

LongDriver で、フィールドをスクロールするイベント・リスナーはメソッドではなく関数になっているので、これをメソッドにしようとしたのですが上手く行かず諦めました。試したのは次のようなコードです。


function Ground(){
    ・・・
    this.hbar = document.getElementById("hbar");
    this.deltX = 0;
    ・・・
}
var ground = new Ground();

Ground.prototype.startScroll = function(evt){
    ・・・
    this.hbar.prevX = evt.clientX;
    ・・・
    this.hbar.addEventListener("mousemove", this.hScroll, false);  // (1)
}

Ground.prototype.hScroll = function(evt){
    ・・・
    var delt = (evt.clientX - this.hbar.prevX)*scrlSp;  // (2)ここでエラー
    ・・・
}

これは Ground() 内の "hbar" で表されている水平バーの上をドラッグするとフィールドがスクロールされるということを意図したコードです。実際は (2) でエラーが発生します。その時 thiswindow になっていました。 windowhbar は無いために起きたエラーです。 thisground になると思っていたのが間違いでした。結局、イベント・リスナーはメソッドにせず、ただの関数として実装することにしました。

因みに、 (2) まで処理が進んだということは (1)thisground だと思うのですが、何故 (2)thiswindow になるんですかね? JavaScript はよく解らん。

2016年9月11日 (日)

HTML の <p> は paragraph ではない

HTML のタグ <p> について以前から気になっていることが有ります。この <p> に関する HTML での挙動が、私の期待しているものと違うのです。それは <p>~</p> の間に <div> やリストの <ol> などを入れると、その <div><ol> の直前に </p> が挿入されたのと同じ振る舞いをするということです。その結果 <p>~<p> の範囲が意図と違うものになってしまいます。因みに、このような振る舞いは <p>~</p> にブロック要素を挟むことは出来ないことが原因です。

ところで、この <p> は paragraph から来ているわけですが、 paragraph とはどういうものでしょうか? それについては パラグラフと段落パラグラフの構造 に説明が有ります。それから、ページが変な構造になっていて直接リンクを貼りにくいのですが、 日本語ライティング 内の「パラグラフの重要性と書き方」にも paragraph の説明が載っています。一言で言えば、1つのトピックについて述べた文の集まりが paragraph です。

あるトピックについて述べている paragraph の中でリストを記述したいことが有ったとしても、現状ではそれは出来ません。例えば次のような記述は出来ないのです。


<p>                              <!-- ここから -->
    パラグラフは3つの要素から成っています。
    それは以下の通りです。<br />

    <ol>
        <li>トピックセンテンス</li>
        <li>サポートセンテンス</li>
        <li>コンクルーディングセンテンス</li>
    </ol>

    サポートセンテンスは必要に応じて複数の
    センテンスで成り立っています。コンクルー
    ディングセンテンスは省略されることが
    あります。
</p>                              <!-- ここまでを paragraph としたい -->

<ol> の直前に </p> が挿入され、宙ぶらりんになった最後の </p> の直前にも <p> が挿入されます。これでは、私の意図した paragraph とは違ったものになってしまいます。

残念ながら、 HTML はそういう仕様なのだから、 <p> に対する考え方を変え、 <p> は paragraph ではないとしてブログ等を作成するしかないのでしょう。

ところで、以前は1つの paragraph に複数の空行を入れていたのですが、現在は一塊で表示しています。かつてウェブが世間に広まる前、いわゆるコンピューター通信と言っていたころ(例えば @nifty ではなく、 NiftyServe だったころ)は、コンピュータ画面の解像度があまり高くなく行間が狭かったため、 paragraph を一塊として表示すると窮屈になって読み難いものでした。それで当時は、本来は1つの paragraph になっているトピックについて記述する時でも、小まめに空行を入れて1つの paragraph を複数の塊りに分けることを心がけて書いていました。ある人は、内容に関わらず3行ごとに空行を入れている例も有りました。しかし現在は、印刷物と同程度に行間を空けて表示できるので、私の場合、1つの pargraph は途中に空行を入れずに一塊で表示するようにしています。

2016年9月10日 (土)

選手のプレイルートの作図(2)

Playdiagram02

LongDriver でプレイルート作成モード時に仮想マウスパッド上でクリックすると左図の矢印で示したような要素が生成されますが、これをゴーストと呼びます。仮想マウスパッド上でマウスボタンを押したままマウスを動かすと、このゴーストが移動します。この動作を3つの関数 startDrag, drag, endDrag とイベント mousedown, mousemove, mouseup で表すと下図のようになります。関数の下の表記はマウスが動いたかどうかのフラグです。

\[ \xymatrix{ \ar[r]^<{mousedown} & *[F:<3pt>]\txt{startDrag\\isStay = true} \ar[rr]^{mousemove} \ar[rrd]_<{mouseup\\=click} & & *[F:<3pt>]\txt{drag\\isStay = false} \ar[d]^{mouseup} \\ & & & *[F:<3pt>]\txt{endDrag\\isStay?\\=>addNode} } \]

mousedown の後、マウスを動かさずに mouseup した時にクリックとみなしゴーストが生成されます。しかし何か誤った操作をしたのか、それまで正常に動作していたのにクリックしてもゴーストが生成されくなりました。そこで JavaScript の動作を追ってみると、実行しないはずの drag が実行されていました。その drag の中で isStay = false が実施され、そのため endDrag 内で addNode が実行されていなかったので、ゴーストが生成されていませんでした。 LongDriver を再読み込みしてもこの不具合は治りません。結局PCを立ち上げなおして元に戻りました。取り敢えずの対処として、 drag 内でマウスの移動量が0かどうかを確認することにしました(そもそも、移動量0なら drag は実行されないはず)。並行してこの不具合の原因解明も進めて行きたいと思います。


function drag(evt){
    ・・・
    if ((deltY != 0)||(deltX != 0)){ // deltY, deltX はマウスの移動量
        playBook.isStay = false;
        ・・・
    }
    ・・・
}

2016年9月 6日 (火)

選手のプレイルートの作図(1)

アメリカンフットボールのプレイ図ソフト LongDriver で選手の動きを示すプレイルートの作図機能(の一部)を実装しました。プレイ図のコード化は未実装のため、作図したプレイ図を LongDriver で表示させることは未だ出来ていません。代わりにキャプチャー画像を張っておきます。

Playdiagram01

プレイルートの作図は次のようにします。画面の上下に選手を表す○や▽が並んでいますが、これをダミーと呼ぶことにします。このダミーをクリックすると、フィールド上の同じ番号の選手が選択されます。そこで、フィールドの下側の水平バーをクリックするとプレイルート作成モードに入り、先ほど選択した選手のゴーストが生成されます。プレイルート作成モードでは、仮想マウスパッド上でドラッグ(注意)するとプレイルートの線が表示されます。必要な箇所までドラッグし、仮想マウスパッドをクリックすると再びゴーストが生成されます。これらを繰り返してプレイルートを作成してから先ほどの水平バーをクリックするとプレイルート作成モードが終了します。

(注意):ここでは、 mousedown した状態でマウスを動かすことをドラッグと呼んでいます。

仮想マウスパッドでは、クリックにより選手のゴーストを生成し、イベント mousedown -> mousemove -> mouseup により選手(およびゴースト)をドラッグしていますが、 mousedown -> mousemove -> mouseup の時にも click が発生するという問題が起きました。それで、これを回避するためにクリックは onclick を使わずに自前で判定することにしました。 mousedownmouseup の間にマウスが移動したかどうかをチェックすることでクリックを判定します。

\[ \xymatrix{ \ar[r]^<{mousedown} & *+[F:<3pt>]\txt{startDrag} \ar[rr]^{mousemove} \ar[rrd]_<{mouseup\\=click} & & *+[F:<3pt>]\txt{drag} \ar[d]^{mouseup} \\ & & & *+[F:<3pt>]\txt{endDrag} } \]

« 2016年8月 | トップページ | 2016年10月 »