システムアップデートに伴い以前より格段にクリック無視の頻度が上がったため, 操作の応答速度を犠牲に不具合を緩和するユーザースクリプトを書いてみました
追記＆更新履歴
2018/6/17 v0.3 ユニットの誤選択が発生していた部分を修正しました
2018年6月9日土曜日
2018年4月27日金曜日
グリッドレイアウトによるピュアCSSなスクロールテーブルの実装
CSSにおける大きな課題の一つとして「ヘッダー・フッターを固定した上での表のスクロール」が挙げられます. 既にこのブログにおいてもCSSによるおそらく最も簡単にヘッダとフッタを固定するスクロールテーブルの実装方法として言及していましたが, この方法を紹介してから既に6年が過ぎており, いささか時代遅れの印象があります.
そこで, 本記事ではよりモダンな方法で簡潔にスクロールテーブルを実装する方法について紹介します.
そこで, 本記事ではよりモダンな方法で簡潔にスクロールテーブルを実装する方法について紹介します.
2018年4月24日火曜日
FireFox60で御城プロジェクト:REが起動しない場合の対処法
2018/05/02
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.
Chrome66に引き続き, FireFox60においても御城プロジェクト:REが起動しないことが確認されています. FireFox60のリリース予定日は2018/05/09であるため,予めその対処法についてまとめておくこととします.
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.
Chrome66に引き続き, FireFox60においても御城プロジェクト:REが起動しないことが確認されています. FireFox60のリリース予定日は2018/05/09であるため,予めその対処法についてまとめておくこととします.
 |
| このように真っ白となる |
2018年3月17日土曜日
Chrome66で御城プロジェクト:REが起動しない場合の対処法
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.
なんか結局こちらの方が早いという結論だったそうで…（みなさんお疲れ様です）
当方何ら気にしておりませんので, ご安心を.
なお, この操作を行うかどうかはあくまで自己責任でお願いいたします. (特に問題は出ていないようです)
NOTE:4/25追記
通信エラー0が発生する場合もこの操作を行うことで問題が改善するかもしれません.
(https://api.shiropro-re.net/にアクセスできなかった場合のエラー)
FireFox60版はこちら
---
現在ベータ版であるChrome66で御城プロジェクト:REを起動しようとするとエラーが発生し画面が白いままとなります. このままリリース予定日である4/17を迎えてしまうと, 正規版のChrome66が拡散し, 推奨環境であるにも関わらずゲーム起動が出来ないというこの前の二の舞いとなることが予想されるため, 前もって対処策についてまとめておくこととします.
なお, リリース前までにWEBサーバー側での対処が完了すればWEBブラウザ側の対応は必要ありません.
2018年2月16日金曜日
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でしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)
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でしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)
2018年2月5日月曜日
御城プロジェクト: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ごとクラッシュさせうる問題なので, 喜んで受け取ってくれるはずです
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ごとクラッシュさせうる問題なので, 喜んで受け取ってくれるはずです
2017年12月14日木曜日
WEB仕様におけるHSL色空間の混沌
WEB(HTML/CSS/SVG)が扱う標準的な色空間はsRGBだったが 最新のCSSカラーではHSLによる色の指定が可能となった.
sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.
sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.
2017年12月12日火曜日
dotrace.jsの使い方・SVGにおける多色画像のHSLAビット合成的アプローチ
前回作ったdotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチとRGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元とを組み合わせてみたところ, それはもう素晴らしい出力結果が得られたので公開する.
従来SVGでは実現が困難と考えられてきた多階調の自然画風グラフィックを無理やりベクタ化する際の一つのアプローチとして非常に効果的である.
NOTE:2017/12/13
但し本スクリプトでの出力結果はSVG本来のメリットであるスケール非依存性が失われるため, 使い勝手は悪い.
従来SVGでは実現が困難と考えられてきた多階調の自然画風グラフィックを無理やりベクタ化する際の一つのアプローチとして非常に効果的である.
NOTE:2017/12/13
但し本スクリプトでの出力結果はSVG本来のメリットであるスケール非依存性が失われるため, 使い勝手は悪い.
2017年12月9日土曜日
dotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチ
WEBでは画像をRGBA各8bitで扱う. なので, RGBA値をそれぞれbit値毎にpath図形化し, SVGフィルタで合成し直すことで, 理論上はあらゆるグラフィックは高々32個のpath要素（とSVGフィルタ）で表せるはずだ.
では実際にこのようなアプローチに沿って作ったSVGの描画パフォーマンスは如何なものか？
ということで, Node.jsスクリプトを書いてみた.
結果は「使い物にならないSVGを吐くポンコツスクリプト」であることが判明したが, まぁ, dotrace.jsの使い方の例としての意義はあると思い公開した.
12/12バグを見つけたので修正
では実際にこのようなアプローチに沿って作った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
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
2017年11月28日火曜日
WebExtensionを用いてスクリーンキャプチャを行うAPIを構築する
WEBブラウザにおいて, 現在表示中のWEBページを画像化(スクリーンキャプチャ)する手段はセキュリティの観点から存在しない. そのため, html2canvas等のHTMLDOMのレンダラを用いて無理やり画像化する方法が一般的である.
一方WebExtension機構を利用してよいのであれば, 不可能ではない. そこで本記事では通常のスクリプトコンテキストからWebExtensionを利用可能なアドオンコンテキストを介してスクリーンキャプチャ画像を入手する方法を探る.
※ブラウザとしてはFireFoxを利用した. Chrome等の他のブラウザでは適宜コードを読み替える必要がある.
なお, 本記事で作成したアドオンは使い方によっては深刻なセキュリティリスクを孕むため, ローカル(私用アドオン)利用を原則とし, 一般公開してはならない.
一方WebExtension機構を利用してよいのであれば, 不可能ではない. そこで本記事では通常のスクリプトコンテキストからWebExtensionを利用可能なアドオンコンテキストを介してスクリーンキャプチャ画像を入手する方法を探る.
※ブラウザとしてはFireFoxを利用した. Chrome等の他のブラウザでは適宜コードを読み替える必要がある.
なお, 本記事で作成したアドオンは使い方によっては深刻なセキュリティリスクを孕むため, ローカル(私用アドオン)利用を原則とし, 一般公開してはならない.
2017年11月11日土曜日
JavaScriptにおけるスレッドをブロックしないループ処理の実現
JavaScriptは通常シングルスレッドで動作しており, もともと「すぐに終わる処理」の実行のみが想定・推奨されている. が, 昨今のWEB環境の発展に伴い, 以前とは比較にならない程複雑で負荷の高い処理がブラウザ上で行われるようになっている.
これらの問題の幾つかはWeb Workerを用いたマルチスレッドの導入により解決するが, DOMやフォントを扱う必要がある場合などはどうしてもメインスレッド上で処理をせざるを得ない.
そこでES2016/2017で導入されたJavaScript言語機構を使って, 負荷の高い処理を複数のタスクに分割しそれらを非同期的に順次実行することでブラウザの応答性を改善する方法を考えてみた.
これらの問題の幾つかはWeb Workerを用いたマルチスレッドの導入により解決するが, DOMやフォントを扱う必要がある場合などはどうしてもメインスレッド上で処理をせざるを得ない.
そこでES2016/2017で導入されたJavaScript言語機構を使って, 負荷の高い処理を複数のタスクに分割しそれらを非同期的に順次実行することでブラウザの応答性を改善する方法を考えてみた.
2017年10月26日木曜日
千年戦争アイギスの音声ボリュームを上げるユーザースクリプト
DMM社提供のWEBブラウザゲーム「千年戦争アイギス」はなぜか効果音を含めた音声出力が低く, いちいちPC本体の音声ボリュームを操作するのも面倒なため, これを改善するスクリプトを書いてみた.
10/29追記
本スクリプトを導入することで多少なりともブラウザへの負荷が高まるようです(Chrome系)
元々クラッシュしやすい環境では導入しないで下さい
通常のユーザースクリプトの導入と一緒.
導入すると音声周りのAPIの中身を書き換えて, ゲーム本体に手を入れることなく音声ボリュームが大きくなります.
なに？殿王子はコピペは嫌か？
しからばこのリンクをクリックするのだ！
インストーラが立ち上がるから導入が楽ぞ！
スクリプトの導入は自己責任だが、中身は大したことないから安心するが良いぞ！
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.");
}
なに？
しからばこのリンクをクリックするのだ！
インストーラが立ち上がるから導入が楽ぞ！
スクリプトの導入は自己責任だが、中身は大したことないから安心するが良いぞ！
2017年8月28日月曜日
千年戦争アイギス・御城プロジェクト：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 ビット）
が公開されました. 本バージョンでは上記不具合が解消しています.
クラッシュ時のエラーコンソールを確認するに, 主たる原因はcanvasグラフィックを描く際のメモリ浪費にあると当たりをつけ, この部分を修正するユーザースクリプトを作ってみた.
なお, これで本当に問題が解決するかどうかは全く不明なため, 本スクリプトを利用する際は全て自己責任にてお願いします. 現状困っていないのであれば無理に導入する必要はありません.
(今日の今日作った突貫工事品だし, さほど検証もしていないし. 効果があるといいなあ. 何度もクラッシュするのは精神的にきついので)
→実際に改善効果があるっぽいので, 困っている方は是非試してみて下さい.
追記：2018/02/03
[重要]
Chrome 64.0.3282.140にて, 致命的にパフォーマンスが落ちた(メモリを浪費する)場合は
追記：2018/02/05
対処方法をまとめました.
追記:2018/02/14
[重要]
Chrome 64.0.3282.167（Official Build） （64 ビット）
が公開されました. 本バージョンでは上記不具合が解消しています.
2017年3月31日金曜日
2017年1月5日木曜日
XNG(SVG+CSS Animations)を使った背景アニメーション
XNGってのは↓で命名されたSVGによるパラパラアニメーション.
http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/
これを改良しつつ, スクリプトでXNG構造を生成してみた.
XNG自体は使いにくいフォーマットなものの, クライアント側でアニメーションをこねくり回す用途であれば, これと言ったライブラリを必要とせず極めて明快なコードで記述できる.
従って、
http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/
これを改良しつつ, スクリプトでXNG構造を生成してみた.
XNG自体は使いにくいフォーマットなものの, クライアント側でアニメーションをこねくり回す用途であれば, これと言ったライブラリを必要とせず極めて明快なコードで記述できる.
従って、
- APNGやアニメーションWEBP等の一時デコード先
- canvasアニメーションの記録先
- パラパラアニメーションの動作確認用
2016年12月23日金曜日
Service Workerを使ってWEBP画像をシームレスに読み込む
次世代のWEB画像形式WEBPが発表されてから結構時間が経っているのに、未だにFireFoxとEdgeでは未サポートという悲しい現実があります.
そこで, 今回この問題の解決策を探ったところ, 条件付きではあるもののなんとかなる！ところまで確認できました. ので, まとめてみることとします.
12/25 スクリプトを更新
12/28 データ(Blob)URIスキームに対処できない点に気づいてしまった…
そこで, 今回この問題の解決策を探ったところ, 条件付きではあるもののなんとかなる！ところまで確認できました. ので, まとめてみることとします.
12/25 スクリプトを更新
12/28 データ(Blob)URIスキームに対処できない点に気づいてしまった…
2016年12月21日水曜日
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
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
2016年12月6日火曜日
Ubuntu16.10にpresto版Opera(opera-next)をインストールする
WEBブラウザのOperaは今でこそレンダリングエンジンとしてblinkを搭載することでChromeクローンのような立ち位置ですが, バージョン12までは独自のprestoエンジンを利用していました.
このprestoエンジン, 実はSVGのレンダリングが綺麗だったり, SVG1.2が一部動作すると言った貴重な代物なので, 古くなったといえど未だ利用価値があります. が, プロジェクトのメンテナンスは既に終了しており, ついにUbuntu16.10では(そのままでは)インストール出来なくなってしまいました.
このprestoエンジン, 実はSVGのレンダリングが綺麗だったり, SVG1.2が一部動作すると言った貴重な代物なので, 古くなったといえど未だ利用価値があります. が, プロジェクトのメンテナンスは既に終了しており, ついにUbuntu16.10では(そのままでは)インストール出来なくなってしまいました.
登録:
投稿 (Atom)
投稿
