千年戦争アイギスのクリック操作がChromeで無視される件

システムアップデートに伴い以前より格段にクリック無視の頻度が上がったため, 操作の応答速度を犠牲に不具合を緩和するユーザースクリプトを書いてみました

追記＆更新履歴
2018/6/17 v0.3 ユニットの誤選択が発生していた部分を修正しました

グリッドレイアウトによるピュアCSSなスクロールテーブルの実装

CSSにおける大きな課題の一つとして「ヘッダー・フッターを固定した上での表のスクロール」が挙げられます. 既にこのブログにおいてもCSSによるおそらく最も簡単にヘッダとフッタを固定するスクロールテーブルの実装方法として言及していましたが, この方法を紹介してから既に6年が過ぎており, いささか時代遅れの印象があります.

そこで, 本記事ではよりモダンな方法で簡潔にスクロールテーブルを実装する方法について紹介します.

FireFox60で御城プロジェクト:REが起動しない場合の対処法

2018/05/02
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.

Chrome66に引き続き, FireFox60においても御城プロジェクト:REが起動しないことが確認されています. FireFox60のリリース予定日は2018/05/09であるため,予めその対処法についてまとめておくこととします.

このように真っ白となる

Chrome66で御城プロジェクト:REが起動しない場合の対処法

2018/05/02
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.


NOTE: wikiへの（引用なしでの）転載が確認されましたが, 問題はありません. 

更新日付を見るにwikiの方が早かったようです(ほぼ同時期に全く同じ対処策が見つかった模様です). ※あなた, 自意識過剰よorz...

なんか結局こちらの方が早いという結論だったそうで…（みなさんお疲れ様です）
当方何ら気にしておりませんので, ご安心を. 

なお, この操作を行うかどうかはあくまで自己責任でお願いいたします. (特に問題は出ていないようです)

NOTE:4/25追記
通信エラー0が発生する場合もこの操作を行うことで問題が改善するかもしれません.
(https://api.shiropro-re.net/にアクセスできなかった場合のエラー)

FireFox60版はこちら

---

現在ベータ版であるChrome66で御城プロジェクト:REを起動しようとするとエラーが発生し画面が白いままとなります. このままリリース予定日である4/17を迎えてしまうと, 正規版のChrome66が拡散し, 推奨環境であるにも関わらずゲーム起動が出来ないというこの前の二の舞いとなることが予想されるため, 前もって対処策についてまとめておくこととします.

なお, リリース前までにWEBサーバー側での対処が完了すればWEBブラウザ側の対応は必要ありません.

御城プロジェクト:RE/千年戦争アイギスがChromeで余りに重い件

2018/02/14
Chromeがバージョンアップしました.
バージョン: 64.0.3282.167（Official Build） （64 ビット）
で本不具合が改善（元に戻る)します

https://chromium.googlesource.com/chromium/src/+log/64.0.3282.140..64.0.3282.168?pretty=fuller&n=10000 

"Fix canvas flickering properly and remove GPU performance regression"
とのことで, 公式に「canvasのGPU周りでしくじってたのを直した」との見解が出たので速やかにバージョンアップして良さそうです.

---

公式の対処策だと,WebGLを使っているゲーム(神姫とか)やFlashでもハードウェアアクセラレーションが無効化されてしまうので, 快適にゲームをするためにいちいちブラウザ設定を変更する必要があります.

そこで本記事ではその代替案を紹介します.

※この手の問題はDMMに文句を言うよりもGoogleに報告するのが筋です
Chromeの「問題の報告」から「お前さんのところのChromeを使うとめっさパフォーマンスが落ちるサイトがあるよ」と伝えてあげましょう
ブラウザをOSごとクラッシュさせうる問題なので, 喜んで受け取ってくれるはずです

dotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチ

WEBでは画像をRGBA各8bitで扱う. なので, RGBA値をそれぞれbit値毎にpath図形化し, SVGフィルタで合成し直すことで, 理論上はあらゆるグラフィックは高々32個のpath要素（とSVGフィルタ）で表せるはずだ.

では実際にこのようなアプローチに沿って作ったSVGの描画パフォーマンスは如何なものか？
ということで, Node.jsスクリプトを書いてみた.

結果は「使い物にならないSVGを吐くポンコツスクリプト」であることが判明したが, まぁ, dotrace.jsの使い方の例としての意義はあると思い公開した.

12/12バグを見つけたので修正

JavaScriptにおけるスレッドをブロックしないループ処理の実現

JavaScriptは通常シングルスレッドで動作しており, もともと「すぐに終わる処理」の実行のみが想定・推奨されている. が, 昨今のWEB環境の発展に伴い, 以前とは比較にならない程複雑で負荷の高い処理がブラウザ上で行われるようになっている.

これらの問題の幾つかはWeb Workerを用いたマルチスレッドの導入により解決するが, DOMやフォントを扱う必要がある場合などはどうしてもメインスレッド上で処理をせざるを得ない.

そこでES2016/2017で導入されたJavaScript言語機構を使って, 負荷の高い処理を複数のタスクに分割しそれらを非同期的に順次実行することでブラウザの応答性を改善する方法を考えてみた.

SIMD.jsについてまとめてみた

SIMD.jsの基本的な使い方・まとめ

http://defghi1977.html.xdomain.jp/tech/SIMD/SIMD.htm

とりあえず公開

Service Workerを使ってWEBP画像をシームレスに読み込む

次世代のWEB画像形式WEBPが発表されてから結構時間が経っているのに、未だにFireFoxとEdgeでは未サポートという悲しい現実があります.

そこで, 今回この問題の解決策を探ったところ, 条件付きではあるもののなんとかなる！ところまで確認できました. ので, まとめてみることとします.

12/25 スクリプトを更新
12/28 データ(Blob)URIスキームに対処できない点に気づいてしまった…

WEBP形式の画像をデコードするlibwebpjsの使い方サンプル

作ってみた
http://defghi1977.html.xdomain.jp/tech/canvasMemo/loader/webp/webp.htm

libwebpjsは内部がブラックボックス化しているので, さっぱりわからんけれど少なくともこれで動いた.
WEBPを普及させたいならもう少しサンプルコードを整理してもらわんと困る.

追加
worker版も作ってみた
http://defghi1977.html.xdomain.jp/tech/canvasMemo/loader/webp/webpWorker.htm

libwebpjsをworker内部で読み込むと, 変数windowを参照していてエラーとなってしまう.
そこで関数呼び出しにコケているだけと見込んで「self.window = self;」としたら案の定動作した.

2017/09 更に追加
v0.6.0なるものが出来ていたので動作サンプルを追加
アニメーションも動く, すごい
でも内部構造がえらく変わってしまったおかげで動作サンプルを作るのがまた一苦労という
http://defghi1977.html.xdomain.jp/tech/canvasMemo/loader/webp/webpWorker.0.6.0.htm

Ubuntu16.10にpresto版Opera(opera-next)をインストールする

WEBブラウザのOperaは今でこそレンダリングエンジンとしてblinkを搭載することでChromeクローンのような立ち位置ですが, バージョン12までは独自のprestoエンジンを利用していました.

このprestoエンジン, 実はSVGのレンダリングが綺麗だったり, SVG1.2が一部動作すると言った貴重な代物なので, 古くなったといえど未だ利用価値があります. が, プロジェクトのメンテナンスは既に終了しており, ついにUbuntu16.10では(そのままでは)インストール出来なくなってしまいました.

asm.jsについてまとめてみた

前から気になってたasm.jsについてひと通りまとめてみた.
需要あるんかいな? 

asm.jsの基本的な使い方・まとめ

雑感・構造はさほど面倒ではない. だが, ある程度処理が大きくなると手書きでは厳しい.（自動生成を前提にしているのだからアタリマエ）
でも, 単純な数値計算をガッツリ行う用途なら手書きでも十分その恩恵に預かれる.

UbuntuへのApache Flex導入メモ

単なるメモ書き. Ubuntu 14.04でAction Scriptの(最も原始的な)コンパイル環境を整える方法.

WebComponentsの基本的な使い方・まとめ

http://www.h2.dion.ne.jp/~defghi/webc/webc.htm
↓新URL
http://defghi1977.html.xdomain.jp/tech/webc/webc.htm

SVG2のmix-blend-modeを試してみる

SVG2の仕様確定が遠のいてしまいましたが，翻ってWEBブラウザ側では着実に新機能の実装が為されています．今回紹介するmix-blend-modeもその一つで，HTMLとの仕様の統合をはかる上で新たにSVG2で導入されるプロパティです．従って実用には程遠いのですが，非常に魅力的な機能ですからいち早く試してみることとしました．

なお，現状Editor's Draft版を参考としているため，今後仕様の修正に伴い内容が不正確になる可能性があります．
また，本ページの内容はmix-blend-modeをサポートしているブラウザで見てください．

SVGにはどのようにしてスクリプトが混入するのか

SVGが他の画像形式と一線を画している点として，javascript等によるスクリプトを挿入することが出来ることが挙げられます．この特徴により特別なツールを必要とせずにダイナミックに内容を書き換えることが出来るのがウリの一つです．しかしスクリプトが全て善意から成り立っているとは限らず，ウィルス等の良からぬ内容が含まれている可能性を否定できません．

ではSVGに対するスクリプトの混入有無を確認するにはどうすればよいのでしょうか?
※少し追記
※10/10追記 補足はアンチパターンとして紹介していますから，そのようなものだと勘違いしないでくださいね．

インラインSVGの見た目がボケてしまう事に対する処方箋

インラインSVGを使っていて困ること，それは「いつ何時ボケボケになるかわからん」ということです．そこでどうやったらこの「ボケ」を取り除けるかをまとめました．

ブログにまとめようとも思ったけれど面倒なのでリンクを貼っておきます．

要はSVGの枠をスクリーンのピクセルに合わせるにはCSS transformが最も手っ取り早いんだけれど，ブラウザ毎の動作の違いもあって，実現に少し細工が必要ってこと．ScreenCTMとtransformとベンダプレフィクスを組み合わせて, 下のようなスクリプトを発行するんだ.

svg = document.querySelector("[selector]");
m = svg.getScreenCTM();
svg.style.transform = "translate(0,0)";
svg.style.msTransform = "translate(" + (Math.floor(m.e)-m.e) + "px," + (Math.floor(m.f)-m.f) + "px)";

Catmull-Rom曲線をBezier曲線に変換する

面倒な能書きは止めた．Catmull-Rom曲線は3次のBezier（ベジェ）曲線に簡単に変換出来るという実演．本スクリプトを組み込むことでSVGやcanvas要素でCatmull-Rom曲線を扱うことが可能になります．

※個人的なメモですので，間違いがあるかも知れません．
9/5 バグ修正

HTMLパーサーを使ったインラインSVGのフォールバック方法

表題の件って以前にも当ブログで紹介していたんだけれど，それには一点問題があったのだけれど，ようやっと解決策を思いついたのでご紹介．って二年越しだよコレ！

Snap.svg v0.3.0のメモリリークを回避するパッチ

Snap.svgの使い方まとめでも書いておいたけれど，Snap.svgはオブジェクトのキャッシュを開放する術がありません．従ってオブジェクトの生成・廃棄を繰り返すことでメモリリークを引き起こします．

この問題は公式に認識されており，v0.3.0で解決したとあるのですが，コードを読む限り正しく実装されていません．

このことについての質問があったため，とりあえず回避コード（パッチ）を作ってみました．なお，詳しい動作検証は行っていませんので，導入は自己責任でお願いいたします．

※ライセンスはSnap.svgと同等としますので，ご自由にお使いください．