Drop & Draw

JavaScript で実装する上で詰まった箇所と今後の方針

1. 【症状】Element に値をセットしても黙って無視される。問題の原因が特定できない。
   • 【原因】
     下記が問題原因である場合がほとんどだが、問題についてのフィードバックが全くないため原因特定に非常に時間がかかる。
     1. 設定文字列の最後に単位 (pxなど) がない
     2. 設定文字列に余計な文字が入っている (セミコロンが入っている、など)
     3. Property が Read only である可能性 (CSS 定義など)
     4. Spell miss, または 大文字/小文字の間違い
     5. (クロージャなどで) 変数定義が使用箇所よりも後になっている
   • 【対策】
     1. Element 操作用 Wrapper Class を作成し、そこを通してアクセスする
        Setter は単位漏れをチェックするして追加するなりエラーを吐くなり人間側が分かるようにする
     2. Spell miss などは Unit test で検出できるようにする
2. 【症状】true になるはずの比較結果が false になる
   • 【原因】
   1. 文字列を値を "==" や "<=" で比較している
      Edge と Chrome で動作結果が変わる
   • 【対策】
     1. Element 操作用 Wrapper Class を作成し、Property は number か enum 保持で統一する
3. 【症状】Mouse downでElementを最前面にする処理(removeChild/appendChild)があるとscrollbarが効かなくなる
   • 【条件】
   1. ツールバーが複数表示されている
   2. ツールバーの中にはボタンが並んでおり、ツールバー内で縦横スクロール表示する
   3. ツールバーは選択(mouse down)したものが他のツールバーよりも手前に移動する
   • 【症状(詳細)】
   1. ボタンを表示しようとスクロールバーをクリックした瞬間にスクロールバーが消える
   2. クリックしたツールバーが最も手前に表示される
   • 【原因】
   1. スクロールバーがmouseイベントをその親にも投げるために親要素の処理が動く
   2. スクロールバーがイベントを拾ったことがわからない(親要素が初めてイベントを拾ったような情報で入ってくる)
   3. (推測)removeChild → appendChildしたタイミングで要素の初期化が走っているっぽい(Animationも再実施されたりする)
      そのためスクロールバー表示状態も失われると推測
   • 【回避策】
   1. z-indexを使う(情報が初期化されなければいい)
4. 【症状】要素を回転させた状態でCSS Animationを適用したい
   • 【問題点】
     1. User入力での回転(rotateZ())とCSS Animation定義のrotateZ()が被る
   • 【対策】
     1. DIVを2枚作成して、User操作は1枚目に、Animationは2枚目に適用させる
     2. 定義を反映させる数だけDIVを重ねたいが、要素を重ねる枚数が増えるほど Microsoft Edge の動作が不安定になる
        そのため今回は2枚重ねまでにする
5. 【症状】CSS定義が反映されない
   • 【条件】
     1. CSSファイルの定義が一部反映されない
     2. Styleタグ内の定義が一部反映されない
   • 【原因】
     1. 反映されない定義付近に "//" でコメントしている箇所がないか(CSSはブロックコメントのみ)
     2. 要素を半透明にするとblock-shadowやtext-shadowが非常に見づらくなる場合がある
6. 【症状】console.errorが出力されない。変数がundefinedのまま更新されない
   • 【条件】
     1. ES6のClass構文を使っている
     2. constructor内で処理している
   • 【原因】
     1. はっきりは分からない
     2. (推測)constructor()内はinstanceが作成される前の状態なので外部関数が正しくcallできないのかもしれない
        この辺りの動作は実装依存なのか？それすら不明。
   • 【回避策】
     1. constructor()では内部変数の定義と初期化のみにする
     2. 必要な初期化処理は initialize() 関数を別途用意してnewの後に呼び出す
7. 【症状】Pure JavaScriptのProjectから WinJSを使ったProjectにしたら画面周りの動きが変わった
   1. 1. かなり酷い
      2. 最初から方針が決まっているならReleaseに近い環境で開発する(当然だが)
         今回のように習得しながらの場合は絶望的。
      • WinJSに拘らず、Cordovaなども考慮に入れて対応していくしかない
8. 【症状】Pure JavaScript環境から WinJS環境に変更すると、一部のElementのscrollbarが効かない
   • 見た目上は No.3 の症状と同じに見える
   • 【回避策】
     1. scrollbarを表示しているElementに "position: relative" を追加する
        ※ 対応前は未定義だった( == position: static)
   • 【原因】
     1. はっきりは分からない
     2. この症状が出たときにscrollbar表示Elementの高さを、親Elementの2倍にしてみた
        すると下半分だけスクロールバーが操作できる状態になった
     3. この現象からの想像でしかないが、position:staticだとscrollbar eventを無視してもっと親のElementに通知するという実装になっているようにしか見えない
        (ちょうどposition:absoluteの親にposition:staticがあっても無視するような)
9. 【症状】Pure JavaScript環境から WinJS環境に変更すると、index.htmlのviewport指定が無視される
   • 【原因】
     1. はっきりは分からない。指定が無視されるとか理解できない。Edgeは独自実装を避ける路線で開発されているはずでは？
     2. とりあえず WinJS のコントロールに Viewbox というものがあるらしい。しかし使いたくない。使いたくもないLiblaryに作法を強要されて素直には従えない。コードも共有できないものになるし。

UWP

• File access 制限が不便に感じる。アプリ化しても UWP の場合は File picker での指定が必要になる。
  従来通り file access するには WPF で作成する必要がある。