千年戦争アイギスのクリック操作が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ブラウザ側の対応は必要ありません.

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でしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)

御城プロジェクト: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ごとクラッシュさせうる問題なので, 喜んで受け取ってくれるはずです

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バグを見つけたので修正

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

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

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

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

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

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

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

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

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

千年戦争アイギス・御城プロジェクト：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

とりあえず公開

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

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

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

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

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

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

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

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の基本的な使い方・まとめ

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

御城プロジェクト:REをほんのり快適にするスクリプト 城福.js

GreaseMonkeyを使った御城プロジェクト:RE拡張スクリプトを書きました．
導入すると以下の機能が追加されます．

• BGMとボイス・SEのボリューム調整機能
  ボイスとSEは共通です．
• ゲーム画面のスクリーンショット取得機能
  自動的にIDをマスクすることもできます．
• ゲームの描画処理を若干軽量化
  環境にも依りますが，描画処理が滑らかになります．スクロール処理などで顕著．
• ゲームの描画品質の変更機能
  アンチエイリアスを切ることで描画速度が改善する可能性があります．
• スクリーンサイズの変更が出来ます
  50%から10%刻みの6段階の変更が可能です．
  （タッチ操作は一切考慮に入れてないから正しく動作しないかも…）
• フルスクリーンへの切り替えを追加してみました
  esc/f11キーの他, 画面右上をクリックすることで復帰可能にしています.
• フレームスキップ機構を追加してみました
  処理が重い環境で試してみると良いかもしれません.

※いずれもサーバー側には一切影響を与えないようにしています．
※チートツールではありません．あくまで，インターフェースの機能改善ツールであって，ゲームの中身には一切触れていません．また，筆者は自動化とかには興味ありません．
※今後パフォーマンス改善やボリューム設定機構がゲーム側で実装された場合，本スクリプトが競合を引き起こすかもしれません．(ゲームのリサイズ機能が実装されたら多分死ぬ)
※現状に不満がなければ無理に導入するものでもありません．どうしてもこれが必要な場合に限って渋々入れてください．

(zoom機能は無理っぽいな…イベントがゲームのフレーム外で管理されている気がする．)