カテゴリー「ビリヤードの配置図ソフト」の61件の記事

FlatTable 作成記事

2020年5月19日 (火)

古傷のデバッグ(<span class="sl_ft" style="font-weight:normal">FlatTable</span>)

FlatTable (ビリヤード配置図ソフト)のバグを修正しました。このバグは PC では発生せず、スマートフォンで発生していました。その症状と対処を以下に示します。

症状

配置図

FlatTable の両側に▲が4個ずつ並んでいますが、これらは球を移動させるボタンです。このボタンは次のように操作することになっていました。

  • PC:移動ボタンの上でマウスボタンを押し続けると、その間、球が移動する。
  • スマフォ:移動ボタンをタップすると球が移動を開始し、再度タップすると停止する。

ところが、スマートフォンでは次のような症状が確認されました。

    エラーの症状
  1. タップの場合:球は少しだけ移動して止まる(移動し続けない)。
  2. 数秒間押し続けてから離した場合:球が移動し続けて、指を離しても球は止まらない。

このボタンを押す(タップもしくは押し続ける)と下記コードを実行するようになっていました。今はスマートフォンを問題にしているので (1) は真です。

var btnDeltX;
var btnDeltY;
var tpStop = true;
var tpId;

function moveByBtn(evt, deltX, deltY){
    ・・・
    move(curObj, deltX, deltY);

    btnDeltX = deltX;
    btnDeltY = deltY;
    if (fTouchPnl){            // (1)
        if (tpStop = !tpStop){    // (2)
            clearInterval(tpId);  // (3)
        } else {
            tpId = setInterval("willGo()", 300);  // (4)
        }
    } else {
        var id = setInterval("willGo()", 200);
        target.onmouseup = function (){
            clearInterval(id);
            target.onmouseup = null;
        };
    }
}

実は、上記コードになった経緯がタッチパネルはよく解らん -5-に有ります。8年前にも、この箇所で苦労したことが書かれています。その時は問題を解消したつもりでいたのですが・・・。

タップの場合、コードの (2) はまず tpStop = false になるので、 (4) が実行されます。 willGo() は球を少し移動するルーチンです。この (4) により球は移動し続けます。2回目のタップで (2) は tpStop = true となり、 (3) が実行されて球は止まるはずです。実際は、1回目のタップですぐに止まるので不思議です。また、押し続けてもタップと同じ動きをするはずなのに、実際は球が移動し続けるのも不思議です。

対処

とにかく、アレコレ試行錯誤して最終的に下記コードになりました。上記のダメだったコードでは PC とスマートフォンを別扱いしていましたが、下記コードでは共通のコードにまとめています。また、ボタンの操作方法も PC と同じにしました。

var btnDeltX;
var btnDeltY;

function dmyHdl(evt){
    evt.preventDefault();    // (5)
}

function moveByBtn(evt, deltX, deltY){
    ・・・
    move(curObj, deltX, deltY);

    btnDeltX = deltX;
    btnDeltY = deltY;
    var id = setInterval("willGo()", 200);  // (6)
    target[onMouseUp] = function (){        // (7)
        clearInterval(id);
        target[onMouseUp] = dmyHdl;
        refresh();    // (8)
    }
}

まず、注意を1つ。 (7) の onMouseUp は PC では onMouseUp = "onmouseup", スマートフォンでは onMouseUp = "ontouchend" になっています。このように、 onMouseUp は文字列なので、これを用いてプロパティを指定しようと target.onMouseUp としてもダメでした。 (7) のように [ ] を使用する必要が有るようです。

では、上記コードの動作を説明します。 (6) で球は 200 msec 毎に少しずつ移動させていることが分かります。その後、 (7) で onMouseUp を検出して function を実行します。 (8) の refresh() は仮想マウスパッドを再表示するルーチンです。 LongDriver (フットボールのプレイブック・ソフト)のデバッグをした時の touchEvent の奇妙な振る舞いを回避するための処理を、ここでも使いました。もし、この refresh() が無いと、見た目には判らないエラーが発生します。

もし、ボタン操作がタップだった場合は、ここに示したルーチン moveByBtn() を実行する前にイベント touchend が発生するかも知れません。それで、前もって touchend のイベントハンドラーとして (5) の dmyHdl() を登録しておき、そのハンドラーで必要な処理をします。その処理とは・・・ evt.preventDefault() のみ。初めは、このハンドラーでフラッグ処理( touchend の有無を設定)を試したのですが、それは不必要という結論になりました。一方、 eve.preventDefault() をコメントアウトすると正常な動作になりません。 eve.preventDefault() だけのイベントハンドラーが役に立つとはビックリです。これ、業界の常識でしょうか?

今回、ブレイク・ポイントを設定すると動作が変わるという事態が有り、問題点を正しく把握するのに苦労しました。微妙なタイミングが問題となるようなコードは、どうやってデバッグすれば良いのでしょうか?

2020年3月28日 (土)

デバッグで新たなバグ作成 (<span class="sl_ft" style="font-weight:normal">FlatTable</span> )

FlatTable(ビリヤードの配置図ソフト)でも LongDriver(フットボールのプレイブック・ソフト)と同様の不具合が見られたので、修正しました。 FlatTable は何故か一見正常に動作しているように見えたのですが、デバッガーで見るとエラーは発生していました。デバッグ内容は基本的には LongDriver と同じく、 touchEvent 処理時に下記コードで仮想マウスパッドを再表示するというものです。

        curPage.exPad.setAttribute("display", "none");
        setTimeout(function(){
            curPage.exPad.setAttribute("display", "inline");
        }, 10);

ところが、このデバッグの所為で新たなバグを生むことにもなりました。 FlatTable は初期配置を指定出来るのですが、そこでバグを作ることになりました。初期配置を処理するコードが配置図を作成するときに使用するコードと兼用になっている箇所が有ります。例えば、球の経路を描画するルーチンなどです。そういう所に上記の再表示コードを入れると、正しく初期配置を表示しなくなったのです。上記コード内の curPage.exPad は仮想マウスパッドですが、初期配置を表示する時点では、この仮想マウスパッドは未だ作成されていないため、 undefined のエラーが発生しました。それで、上記コードを実行する前に curPage.exPad の存在を確認することでエラーを回避しました。もう大丈夫なはずです。

FlatTable は JavaScript も SVG も初めて扱った時のソフトなので、今回コードに目を通してみて「ナンダカナァ」と思うところも有りました。書き直そうかという考えが無くは無いのですが、今さら手間を掛けるのも「ナンダカナァ」といったところです。

2019年4月28日 (日)

FlatTable のバグ取り

昨年の暮れからこのブログでビリヤードネタの記事も書くようになり、配置図を幾つか描いて来ました。その際に配置図ソフト FlatTable の不具合が見つかったので、このゴールデンウィークを利用してバグ取りをすることにしました。

球の経路作成時のバグ

球の経路作成は次の手順で行うことになっています。

  1. 球をクリックする(球が選択される)
  2. 長クッションの木枠をクリックする(球のゴーストが作成される)
  3. 仮想的マウスパッド上でドラッグ(注1)する(ゴーストが移動する)
  4. 仮想的マウスパッド上をクリックする(ゴーストが作成される)
  5. 3, 4 を繰り返す
  6. 長クッションの木枠をクリックする(経路作成が終了する)

(注1):マウスボタンを押したままマウスを移動することを「ドラッグ」と呼ぶことにします。

最後の操作 6 で長クッションではなく短クッションをクリックすると、球の選択がキャンセルされて経路作成も終了するのですが、経路作成モードが完了しないことになり、次に経路作成を行う時に異常な動作になっていました。

これに対しては、短クッションをクリックした時の処理に次のコードを追加することで正常になりました。このコードの意味は「長クッションをクリックした時の処理として経路作成を予約しておく」ということです。

    longRail.onclick = makePath;

経路の無いページをアニメーションさせた時のバグ

複数のページをアニメーションさせる時、そのページのどれかが経路の指定されていない(配置だけの)ページだと、アニメーション終了時に異常が発生していました。このバグは、ショット開始時に実行する関数 aim()

        shotId = setInterval("shot()", 1000/FPS);
        shot();
    } else {
        shotId = setInterval("shot()", 1000/FPS);	// (1)
        action();

        shotId = setInterval("shot()", 1000/FPS);
        shot();
    } else {
        actionId = setInterval("action()", 1000/FPS);	// (2)
        action();

に直すことで解決しました。今までは (2) とすべき所を (1) に間違えていたというわけです。

2017年11月23日 (木)

Chrome での Flash 版 FlatTable

Flash はジョブズの陰謀や脆弱性のため、インターネットから締め出されつつあります。 Chrome でも、表示の許可を確認するようになっています。それのみならず、 Flash ファイル(*.swf)にアクセスしてもダウンロードの許可を聞いてくるだけで、画面表示してくれません(HTML ファイル(*.html)へ埋め込んだ Flash は表示します)。もしかしたら、他のブラウザでも同様の現象が起きているかも知れませんが未確認です。

そこで、 Flash 版 FlatTable を表示する HTML ファイルを Chrome 用に用意しました。以下がそのページへのリンクです。 Chrome を使用している方はこれをご利用下さい。なお、 SVG 版は直接アクセスしても問題ありません。(因みに、 FlatTable のトップページはここ

FlatTable_P(Flash 版)
FlatTable_C(Flash 版)

これらのページは次のような簡単なものです(プール用の場合)。

<!DOCTYPE html>
<html>
<head>
    <title>FlatTable_P</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <style>
        html, body {height: 98%}
    </style>
</head>

<body>
    <object data="FlatTable_P.swf" width="100%" height="100%">
    </object>
</body>
</html>

上記コードで赤字部分が無いと object タグの height="100%" が有効になりません。また、 98% なのは、 100% ではスクロールバーが表示されるので、それを抑えるためです。

2014年4月20日 (日)

<span class="sl_ft" style="font-weight:normal">FlatTable</span> のアニメーションに球の音を追加

FlatTabe のアニメーションには球を撞いた時や球同士が当たった時に音を出す機能が有りませんでしたが、今回、それが出来るようになりました。

音を出す方法を調べたところ、audio タグを使えば良いらしいと分かったのですが、それを FlatTable で使おうとしても上手く行きませんでした。audio タグについての解説は、どれも html ファイルを前提としており、SVG ファイルである FlatTable では audio タグを正しく認識してくれません。エラー画面には

    Uncaught TypeError: undefined is not a function 
が表示さていました。

ブラウザで音を出す方法を更に調べて行くと、Web Audio API が有ることが分かりました。これは JavaScript で使える API なので FlatTable でも使えるのではないかと期待しました。さっそく、解説に載っているサンプルプログラムを参考に簡単なコードを書いてローカルに置き、動作確認を試みました。しかし、コード中で使っている XMLHttpRequest がローカルの音源ファイルをロード出来ません(ブラウザは Chrome)。エラーメッセージとして

    Cross origin requests are only supported for HTTP.
が表示されていました。これは、ブラウザがセキュリティを考慮して、ローカルへのアクセスを制限しているのが原因です。試験用のファイルをサーバにアップロードして動作確認することは可能ですが、気が進みません。 FlatTable はローカルでも使えるものにしておきたいのです。

ほとんど諦めた気持ちになりながらも audio タグに名前空間を指定すればどうだろうかと考えて、その方法を調べることにしました。そして、やっと

    <audio xmlns="http://www.w3.org/1999/xhtml" id="id " preload="auto">
        <source src="音源ファイル " type="MIMEタイプ " />
    </audio>
に辿り着くことが出来ました。因みに、今回使用した音源ファイルの MIME タイプは audio/mp3 です。上記コードを FlatTable の SVG ファイルに挿入、そして、アニメーションを担当する JavaScript ファイルに
function soundShot(){
    document.getElementById("id ").play();
}
・・・
// 音の必要な箇所で soundShot() を実行
を挿入することで、音が出るようになりました。ただし、用意出来ている音源が MP3 だけ(追記2)なので、ブラウザによっては音が出ないかも知れません。なお、球を撞く強さや、球同士の当たる強さに応じて、音の大きさを変えるべきですが、現時点では、どれも同じ大きさです。いずれ修正したいと思っています(追記1)

追記1:修正しました。
追記2:Ogg を追加しました。

今回、使用した音源は効果音ラボさんで公開しているものを使わせてもらいました。

サンプルを載せておきます。画像の左上のボタン [ Anim ][ sequential ] でアニメーションが始まります。

2014年4月 6日 (日)

<span class="sl_ft" style="font-weight:normal">FlatTable</span>の部分的表示

FlatTable を表示する際、配置コードの後ろに

#svgView(viewBox(x1 y1 x2 y2 ))
を付けると FlatTable の一部分だけを表示することが出来ます。上記において座標 (x1 y1 x2 y2 )FlatTable の表示領域を表します。以下に部分的表示の例を示します。ここに width, heightiframe の大きさです。
<iframe src="http://spacelike.in.coocan.jp/flat//FlatTable_C.svg?
  ILC=21PDBtSFSsfEMuGEDuP32EYsEDIsz32GXroFPraJvsqHauPGEtaQFIuPAveWJvrtjvmOJvgtRFItODIsl.#svgView(viewBox(0 0 400 260))" 
  width="500" height="300">
</iframe>


この画像は FlatTable なので FlatTable の操作が可能です。例えば、[ Anim ][ Single ] とクリックすればアニメーションを実行することが出来ます。

この SVG の部分的表示の方法は「ゲームミュージックと生存確認をかねた画期的な」さんの記事 svgビュー指定って知ってますか? が参考になりました。

2013年4月 6日 (土)

<span class="sl_ft" style="font-weight:normal">FlatTable</span> の縦長表示

FlatTable の作成が終了してから、 MathJax の動作を調べようとしたのですが、難しくて途中放棄の状態が続いています。私には FlatTable で遊んでいるレベルが合っているのでしょう。

ところで FlatTable は横長の表示にしか対応していません。フットスポットの位置を左右変更できるように台を 180°回転させる機能は付いているのですが、縦長に表示できるような 90°の回転機能は有りません。

時には縦長に表示したいという状況も有るかも知れませんが、その場合は、CSS で画像を回転させて対応することになります。右の配置図は、そのようにして表示したものです。球の番号が寝ていますが、それは許して下さい。そもそも、実際の配置では、球は色々な方向を向いている訳ですから。

CSS と HTML は次のようになっています。

- CSS -
.sl_tate {
    position: relative;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

基本的な部分は transform: rotate(90deg) なのですが、この機能はベンダープレフィックスが必要で、 -webkit- などの付いているプロパティがそれに該当します。上記には4通りのベンダープレフィックスが記述されていますが、省略可能なものも有るかも知れません。

- HTML -
<div style="width:300px;height:500px;float:right">
<iframe width="500" height="300" class="sl_tate" style="top:100px;left:-100px" src="配置コード" ></iframe>
</div>
・・・(文章など)
<div style="clear:both"></div>

"配置コード" には必要な配置コードを入れます。上記配置図例の場合、配置コード は次のようになっています。

http://spacelike.in.coocan.jp/flat/FlatTable_P.svg?
ILC=21P31FCKTKVVHATAtKBUi36AHKhVe36ADLOVV36ABLDUtQ310000kdvAjtud36BKkQvV36AUlOvh36AGlJuw.

2012年12月 1日 (土)

SVG ファイルへのアクセスを受け付けるようになった

ビリヤード配置図ソフト FlatTable は @nifty のレンタル・サーバーに置いているのですが、SVG ファイルを提供するためには .htaccess に MIME タイプを記述しておく必要が有ります。記述内容をインターネットで調べてその通りやったのですが、サーバーが SVG ファイルを処理してくれません。 .htaccess で SVG 関連の箇所は次の1行です。

AddType image/svg+xml .svg
この記述に間違いは有りません。しかし、ブラウザで SVG ファイルにアクセスしようとしても表示しないのです。しかたなく FlatTable の公開は HTML ファイルとして行っていました。

数か月その状態が続いていたのですが、やっと解決することが出来ました。今まで .htaccess の文字のエンコードは UTF-8 にしていたのですが、これだと BOM が悪さをするかも知れないということが某サイトに載っていました。そこでエンコードを EUC に変更したところ、めでたくサーバーが SVG ファイルへのアクセスを受け付けるようになりました。

そこで、早速 FlatTable を書き換えて SVG ファイルに変更しました(サフィックスは .svg )。書き換えた箇所は次の通りです。

変更前(ファイルの先頭箇所)
<!DOCTYPE html>
<html>

<head>
    <lmeta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="ビリヤード, 配置図, pool, billiard, diagram, layout, FlatTable" />
    <title>FlatTable_P</title>
    <link rel="shortcut icon" href="../favicon.ico" />
</head>>

<body style="margin:0">

<svg
変更後(ファイルの先頭箇所)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    ・・・ />

   <title>FlatTable_P</title>
<title>head 領域から svg 領域に移動しています。 SVG ファイルでのアイコンの設定方法が分らない(出来ないのかも?)ので、その部分は削除しています。
変更前(ファイルの末尾)
</svg>

<script>

(function (){                // (1)
    var win = navigator.userAgent.indexOf("MSIE");
    if (0<= win){
        var ft = document.getElementById("flattable");
        ft.setAttribute("height", document.body.clientHeight*3.5);
    }
})();

・・・

</script>
<script src="js/FToperate.js"></script>
<script src="js/FTpeep.js"></script>
<script src="js/FTencode.js"></script>
<script src="js/FTinit.js"></script>
<script src="js/FTanimation.js"></script>

</body>
</html>
変更後(ファイルの末尾)
<script>
<![CDATA[

・・・

]]>
</script>
<script xlink:href="js/FToperate.js" />
<script xlink:href="js/FTpeep.js" />
<script xlink:href="js/FTencode.js" />
<script xlink:href="js/FTinit.js" />
<script xlink:href="js/FTanimation.js" />

</svg>

変更前のコードで (1) の関数はIE対応のためのコードでした。 FlatTable が HTML5(or XHTML) の時IEでは小さく表示されるので、画像を拡大するためにこのコードが必要でした。 SVG になったら、このコードが無くても正常な大きさで表示されるので削除しました。

これで、当初の計画通り、 FlatTable を SVG ファイルとして公開することが出来るようになりました。 FlatTable は、本ブログのサイドバー「Link」の FlatTable からアクセス出来ます。

2012年8月21日 (火)

XHTML ⇒ HTML5

SVG+JS 版 FlatTable は今まで XHTML でしたが、これを HTML5 に変更しました。サフィックスは .html です。主な修正個所は以下の通りです。

変更前
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 

<head>
変更後
<!DOCTYPE html>
<html> 

<head>

ファイルの先頭部分を上記のように変更するだけで良いかと思ったのですが、JavaScript に関する部分も変更する必要が有りました。

変更前
<script>
<![CDATA[
・・・
]]>
</script>
<script xlink:href="js/FToperate.js" />
<script xlink:href="js/FTpeep.js" />
<script xlink:href="js/FTencode.js" />
<script xlink:href="js/FTinit.js" />
<script xlink:href="js/FTanimation.js" />

</svg>
変更後
</svg>

<script>
・・・
</script>
<script src="js/FToperate.js"></script>
<script src="js/FTpeep.js"></script>
<script src="js/FTencode.js"></script>
<script src="js/FTinit.js"></script>
<script src="js/FTanimation.js"></script>

変更前は SVG 領域に JavaScript を記述していたのですが、 HTML5 では SVG 領域の外に記述しなければならないようです。また、 JavaScript ファイルの指定も xlink:href から src に変更する必要が有りました。

変更前のファイルで JavaScript が SVG 領域に有った理由は次の通りです。当初 SVG+JS 版 FlatTable は SVG ファイルとして作る積りでいました。SVG ファイルの場合は JavaScript は SVG 領域に記述することになります。しかし、サーバーの設定がうまく行かず SVG ファイルを扱えなかったため、しかたなく XHTML(or HTML5) で対応することになりました。そして JavaScript の位置は初めのまま残っていたというわけです。

2012年8月 9日 (木)

キャロム用 <span class="sl_ft" style="font-weight:normal">FlatTable</span> 公開

キャロム用 FlatTable が完成したので公開します。
FlatTable キャロム用( SVG+JavaScript 版)

サンプルを載せます。



画像の [ Anim ][ Sequential ] でアニメーションします。

これで FlatTable の SVG+JavaScript 対応は一応終了です。これ以後は、基本的にバグ修正のみとなります。

さて、次は何をやるか? タブレットでの MathJax の動作に気に入らないところが有るので、その辺を調べてみようかと思っています。かなり難しそうです。

より以前の記事一覧