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

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

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

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

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

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

CSS Painting APIについて取り急ぎまとめてみた

次期Chrome65でのサポートがうたわれているCSS Painting APIについて構成がcanvasっぽいとのことだったのでまとめてみました.

CSS Painting APIの基本的な使い方・まとめ
https://defghi1977-tech.firebaseapp.com/cssPainting/cssPainting.htm
http://defghi1977.html.xdomain.jp/tech/cssPainting/cssPainting.htm

※二つあるのは本APIがHTTPS環境でしか動作しないから.
ずっとlocalhost環境で試していたからわからんかったけれど, 確かChromeのポリシーに強力なAPIはとりあえずHTTPSでしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)

WEB仕様におけるHSL色空間の混沌

WEB(HTML/CSS/SVG)が扱う標準的な色空間はsRGBだったが 最新のCSSカラーではHSLによる色の指定が可能となった.

sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.

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

前回作ったdotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチとRGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元とを組み合わせてみたところ, それはもう素晴らしい出力結果が得られたので公開する.

従来SVGでは実現が困難と考えられてきた多階調の自然画風グラフィックを無理やりベクタ化する際の一つのアプローチとして非常に効果的である.

NOTE:2017/12/13
但し本スクリプトでの出力結果はSVG本来のメリットであるスケール非依存性が失われるため, 使い勝手は悪い.

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

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

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

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

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

ドット絵SVG化スクリプト:dotrace.js

以前から公開している「ドット絵SVG化スクリプト」シリーズをバッチで処理したいという意見を聞いた気がしたので, 元のコードからweb依存性を排除してNode.js環境(つまりコマンドライン)でも動作するようにしてみた.

dotrace.js
(http://defghi1977.html.xdomain.jp/tech/dotrace/dotrace.htm)

機能的にはver2とver3のいいとこ取りをしたつもりなので, 使い勝手はこれまで通りだ(と思う).
※色数制限等の細かいことは全くしていません（でかいSVGが作られても知らね）. 予め減色しておくとか, JPEGを弾くとか各自で工夫して下さい. (最適な出力は環境毎に異なると思うので, 柔軟に扱えるようにしている)

ライセンスをMITにしておいたので, 適宜使い倒して下さい.

動作原理はこちら
https://stackoverflow.com/questions/42595343/bitmap-to-svg-path/42595975#42595975

WebExtensionを用いてスクリーンキャプチャを行うAPIを構築する

WEBブラウザにおいて, 現在表示中のWEBページを画像化(スクリーンキャプチャ)する手段はセキュリティの観点から存在しない. そのため, html2canvas等のHTMLDOMのレンダラを用いて無理やり画像化する方法が一般的である.

一方WebExtension機構を利用してよいのであれば, 不可能ではない. そこで本記事では通常のスクリプトコンテキストからWebExtensionを利用可能なアドオンコンテキストを介してスクリーンキャプチャ画像を入手する方法を探る.

※ブラウザとしてはFireFoxを利用した. Chrome等の他のブラウザでは適宜コードを読み替える必要がある.

なお, 本記事で作成したアドオンは使い方によっては深刻なセキュリティリスクを孕むため, ローカル(私用アドオン)利用を原則とし, 一般公開してはならない.

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

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

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

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

千年戦争アイギスの音声ボリュームを上げるユーザースクリプト

DMM社提供のWEBブラウザゲーム「千年戦争アイギス」はなぜか効果音を含めた音声出力が低く, いちいちPC本体の音声ボリュームを操作するのも面倒なため, これを改善するスクリプトを書いてみた.

10/29追記
本スクリプトを導入することで多少なりともブラウザへの負荷が高まるようです(Chrome系)
元々クラッシュしやすい環境では導入しないで下さい

[使い方]

通常のユーザースクリプトの導入と一緒.

• Web Extensionsをサポートする環境（FireFox, Chrome, Opera等）
  Tampermonkeyアドオンを導入して下記コードを新規ユーザースクリプトとして登録
• レガシーFireFox（※動くかどうか確認していないが多分動くと思う）
  GreaseMonkeyアドオンを導入して下記コードをユーザースクリプトとして登録

導入すると音声周りのAPIの中身を書き換えて, ゲーム本体に手を入れることなく音声ボリュームが大きくなります.

// ==UserScript==
// @name        aigis_amp
// @namespace   defghi1977
// @description 千年戦争アイギスの音声ボリュームを上げます
// @include     http://assets.millennium-war.net/*
// @version     0.1
// @grant       none
// ==/UserScript==

'use strict';
{
    //増幅倍率
    const amp = 4;
    const ctx = new AudioContext();
    const gainNode = ctx.createGain();
    gainNode.gain.value = amp;
    gainNode.connect(ctx.destination);
    const proto = HTMLAudioElement.prototype;
    const play = proto.play;
    proto.play = function(){
        if(!this.amplefied){
            //NOTE:HTMLAudionElementは内部で使いまわされているのでメモリリークの恐れなし
            ctx.createMediaElementSource(this).connect(gainNode);
            this.amplefied = true;
        }
        return play.call(this, arguments);
    };
    console.log("Aigis' audio has been amplefied.");
}

なに？殿王子はコピペは嫌か？
しからばこのリンクをクリックするのだ！
インストーラが立ち上がるから導入が楽ぞ！
スクリプトの導入は自己責任だが、中身は大したことないから安心するが良いぞ！

千年戦争アイギス・御城プロジェクト：REの動作を改善するユーザースクリプト

DMM社提供の「千年戦争アイギス」及び「御城プロジェクト：RE」は基本となる構成が同じせいか、経験上ブラウザクラッシュ(主にChrome)の傾向も似通っている.

クラッシュ時のエラーコンソールを確認するに, 主たる原因はcanvasグラフィックを描く際のメモリ浪費にあると当たりをつけ, この部分を修正するユーザースクリプトを作ってみた.

なお, これで本当に問題が解決するかどうかは全く不明なため, 本スクリプトを利用する際は全て自己責任にてお願いします. 現状困っていないのであれば無理に導入する必要はありません.

(今日の今日作った突貫工事品だし, さほど検証もしていないし. 効果があるといいなあ. 何度もクラッシュするのは精神的にきついので)

→実際に改善効果があるっぽいので, 困っている方は是非試してみて下さい.

追記：2018/02/03
[重要]
Chrome 64.0.3282.140にて, 致命的にパフォーマンスが落ちた(メモリを浪費する)場合は

詳細設定から「ハードウェア アクセラレーションが使用可能な場合は使用する」のチェックを外して下さい.
(本スクリプトだけでは症状が改善しません)

追記：2018/02/05
対処方法をまとめました.

追記:2018/02/14
[重要] 
Chrome 64.0.3282.167（Official Build） （64 ビット）
が公開されました. 本バージョンでは上記不具合が解消しています.

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

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

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

とりあえず公開

XNG(SVG+CSS Animations)を使った背景アニメーション

XNGってのは↓で命名されたSVGによるパラパラアニメーション.
http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/

これを改良しつつ, スクリプトでXNG構造を生成してみた.



XNG自体は使いにくいフォーマットなものの, クライアント側でアニメーションをこねくり回す用途であれば, これと言ったライブラリを必要とせず極めて明快なコードで記述できる.

従って、

• APNGやアニメーションWEBP等の一時デコード先
• canvasアニメーションの記録先
• パラパラアニメーションの動作確認用

と言ったケースで有効なテクニックと言える. 

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

SVGフィルタによる画像の隠蔽(提案・検証)

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

SVGフィルタエディタ作った

SVG仕様の中でも理解のし難さの頂点を争うフィルタ仕様(もうひとつはSVGフォント). 試すにしても手書きで書き起こすのは非常に面倒. であるならヘルパアプリケーションを作ってしまえと.

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

似たようなツールは既にあってもおかしくない割にググっても見つからんかったので, 存在意義は十分にあるかと思ふ.

Web Animations APIの使い方をまとめた

Web Animations APIの基本的な使い方・まとめ 
http://www.h2.dion.ne.jp/~defghi/webanim/webanim.htm
↓新URL
http://defghi1977.html.xdomain.jp/tech/webanim/webanim.htm

骨組みだけは作ったけれど

SVGの高速化・生DOMを直接描画するな

戯れ(?)に作ってみた「ラスタ画像SVG化スクリプト:カラー対応版」から判ったこととしては，表示対象のSVGが(比較的）多量の複雑なpath要素から構成されていた場合，その表示方法によってはグラフィック描画パフォーマンスに雲泥の差が発生する，ということ．

※なお, スクリプトによるアニメーションを行う場合はまた違った結果となる.

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

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

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

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