tag:blogger.com,1999:blog-84049508877439524412024-03-06T02:25:07.781+09:00ゲームミュージックと生存確認をかねた画期的な玉石混交なトピックスをつらつらと.拾うも磨くもあなた次第.
リンク・引用ご自由にどうぞUnknownnoreply@blogger.comBlogger477125tag:blogger.com,1999:blog-8404950887743952441.post-62651252730334473272018-06-09T10:33:00.000+09:002018-06-18T18:12:25.220+09:00千年戦争アイギスのクリック操作がChromeで無視される件システムアップデートに伴い以前より格段にクリック無視の頻度が上がったため, 操作の応答速度を犠牲に不具合を緩和するユーザースクリプトを書いてみました
追記&更新履歴
2018/6/17 v0.3 ユニットの誤選択が発生していた部分を修正しました
例によりこちらにリンクを貼っておきますで, クリック不発によりゲームにならなくて困っている場合は下記に目を通した上で試してみましょう
スクリプトのライセンスはフリー(コードの改変なども自由, 利用時の連絡も不要)とし, 作者は本スクリプトの導入によって発生したいかなる損害についても保証しません. 導入はあくまで自己責任で行なって下さい.
例によりそれほど動作検証はしていません.
スクリプトの導入によりゲームのマウスに対する応答が若干遅くなることから,1フレームを争うシビアなプレイには向いていません
(クリック不発によるUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-32165544335952227072018-04-27T10:54:00.001+09:002018-04-27T11:06:19.386+09:00グリッドレイアウトによるピュアCSSなスクロールテーブルの実装CSSにおける大きな課題の一つとして「ヘッダー・フッターを固定した上での表のスクロール」が挙げられます. 既にこのブログにおいてもCSSによるおそらく最も簡単にヘッダとフッタを固定するスクロールテーブルの実装方法として言及していましたが, この方法を紹介してから既に6年が過ぎており, いささか時代遅れの印象があります.
そこで, 本記事ではよりモダンな方法で簡潔にスクロールテーブルを実装する方法について紹介します.
それではコードについてみてみましょう.
table{
display: grid;
grid-auto-flow: row;
grid-auto-rows: 2.5em;
width: 600px;
height: 300px;
overflow: scroll;
grid-gap: 2px;
}
thead, tbody, tfoot{
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-17386051633621353982018-04-24T21:11:00.002+09:002018-05-02T15:13:49.554+09:00FireFox60で御城プロジェクト:REが起動しない場合の対処法2018/05/02
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.
Chrome66に引き続き, FireFox60においても御城プロジェクト:REが起動しないことが確認されています. FireFox60のリリース予定日は2018/05/09であるため,予めその対処法についてまとめておくこととします.
このように真っ白となる
1)設定画面を開きます.
2)左ペインから「プライバシーとセキュリティ」を選択し, パネル下部の「証明書を表示」をクリックします.
3)サーバー証明書タブが選択されている状態で,「例外を追加」ボタンをクリックします.
4)URLに「https://assets.shiropro-re.net/」と入力し, 「証明書を取得」ボタンをクリックします.
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-55660546189682343412018-03-17T17:09:00.002+09:002018-05-02T15:13:28.422+09:00Chrome66で御城プロジェクト:REが起動しない場合の対処法
2018/05/02
サーバー側の証明書が正しく更新されました.
従って, 以降はこの作業を行う必要はありません.
NOTE: wikiへの(引用なしでの)転載が確認されましたが, 問題はありません.
更新日付を見るにwikiの方が早かったようです(ほぼ同時期に全く同じ対処策が見つかった模様です). ※あなた, 自意識過剰よorz...
なんか結局こちらの方が早いという結論だったそうで…(みなさんお疲れ様です)
当方何ら気にしておりませんので, ご安心を.
なお, この操作を行うかどうかはあくまで自己責任でお願いいたします. (特に問題は出ていないようです)
NOTE:4/25追記
通信エラー0が発生する場合もこの操作を行うことで問題が改善するかもしれません.
(https://api.shiropro-re.net/にアクセスできなかった場合Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-49447485139836472082018-02-16T22:03:00.002+09:002018-02-16T22:03:44.371+09:00CSS 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でしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-86357428795184856392018-02-05T22:57:00.002+09:002018-02-15T16:15:58.202+09:00御城プロジェクト: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でもハードウェアUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-70359536509138195772017-12-14T12:24:00.000+09:002017-12-14T12:24:02.317+09:00WEB仕様におけるHSL色空間の混沌WEB(HTML/CSS/SVG)が扱う標準的な色空間はsRGBだったが 最新のCSSカラーではHSLによる色の指定が可能となった.
sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.
RGBとHSL
WEBでは色をsRGB色空間, つまりR(赤)G(緑)B(青)の光の三原色を数値化したもので扱い, 「rgb(127,127,127)」や「#00ff00」といった記法で指定します.
一方最新のWEB仕様ではRGB値による色の指定の他にHSL値による色の指定が可能となっています. HSLはそれぞれH(色相)S(彩度)L(輝度)を表しており, 「hsl(Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-36267684290071886692017-12-12T20:56:00.002+09:002017-12-13T17:18:04.417+09:00dotrace.jsの使い方・SVGにおける多色画像のHSLAビット合成的アプローチ前回作ったdotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチとRGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元とを組み合わせてみたところ, それはもう素晴らしい出力結果が得られたので公開する.
従来SVGでは実現が困難と考えられてきた多階調の自然画風グラフィックを無理やりベクタ化する際の一つのアプローチとして非常に効果的である.
NOTE:2017/12/13
但し本スクリプトでの出力結果はSVG本来のメリットであるスケール非依存性が失われるため, 使い勝手は悪い.
dotrace.js+jimp+nodeコード
"use strict";
(async () => {
const Dotrace = require("./dotrace.core.js");
const Jimp = require("jimp")Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-36072044907990867222017-12-09T20:58:00.000+09:002017-12-12T20:28:47.361+09:00dotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチWEBでは画像をRGBA各8bitで扱う. なので, RGBA値をそれぞれbit値毎にpath図形化し, SVGフィルタで合成し直すことで, 理論上はあらゆるグラフィックは高々32個のpath要素(とSVGフィルタ)で表せるはずだ.
では実際にこのようなアプローチに沿って作ったSVGの描画パフォーマンスは如何なものか?
ということで, Node.jsスクリプトを書いてみた.
結果は「使い物にならないSVGを吐くポンコツスクリプト」であることが判明したが, まぁ, dotrace.jsの使い方の例としての意義はあると思い公開した.
12/12バグを見つけたので修正
※SVGでは「SVGフィルタの複雑さ」及び「各種ノード数」がグラフィックの描画パフォーマンスに大きく影響することが判っており, 今回のケースでは前者にグラフィックの複雑さを押し込んだケースに相当する. Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-34867742080745590422017-12-09T10:37:00.000+09:002017-12-16T20:38:51.325+09:00ドット絵SVG化スクリプト:dotrace.js以前から公開している「ドット絵SVG化スクリプト」シリーズをバッチで処理したいという意見を聞いた気がしたので, 元のコードからweb依存性を排除してNode.js環境(つまりコマンドライン)でも動作するようにしてみた.
dotrace.js
(http://defghi1977.html.xdomain.jp/tech/dotrace/dotrace.htm)
機能的にはver2とver3のいいとこ取りをしたつもりなので, 使い勝手はこれまで通りだ(と思う).
※色数制限等の細かいことは全くしていません(でかいSVGが作られても知らね). 予め減色しておくとか, JPEGを弾くとか各自で工夫して下さい. (最適な出力は環境毎に異なると思うので, 柔軟に扱えるようにしている)
ライセンスをMITにしておいたので, 適宜使い倒して下さい.
動作原理はこちら
https://Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-32546679360585058702017-11-28T13:55:00.000+09:002017-11-28T19:39:32.440+09:00WebExtensionを用いてスクリーンキャプチャを行うAPIを構築するWEBブラウザにおいて, 現在表示中のWEBページを画像化(スクリーンキャプチャ)する手段はセキュリティの観点から存在しない. そのため, html2canvas等のHTMLDOMのレンダラを用いて無理やり画像化する方法が一般的である.
一方WebExtension機構を利用してよいのであれば, 不可能ではない. そこで本記事では通常のスクリプトコンテキストからWebExtensionを利用可能なアドオンコンテキストを介してスクリーンキャプチャ画像を入手する方法を探る.
※ブラウザとしてはFireFoxを利用した. Chrome等の他のブラウザでは適宜コードを読み替える必要がある.
なお, 本記事で作成したアドオンは使い方によっては深刻なセキュリティリスクを孕むため, ローカル(私用アドオン)利用を原則とし, 一般公開してはならない.
方針
WebExtension仕様でUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-39079104198009252582017-11-11T09:55:00.000+09:002017-11-11T09:55:10.510+09:00JavaScriptにおけるスレッドをブロックしないループ処理の実現JavaScriptは通常シングルスレッドで動作しており, もともと「すぐに終わる処理」の実行のみが想定・推奨されている. が, 昨今のWEB環境の発展に伴い, 以前とは比較にならない程複雑で負荷の高い処理がブラウザ上で行われるようになっている.
これらの問題の幾つかはWeb Workerを用いたマルチスレッドの導入により解決するが, DOMやフォントを扱う必要がある場合などはどうしてもメインスレッド上で処理をせざるを得ない.
そこでES2016/2017で導入されたJavaScript言語機構を使って, 負荷の高い処理を複数のタスクに分割しそれらを非同期的に順次実行することでブラウザの応答性を改善する方法を考えてみた.
以下はそのサンプルである.
"use strict";
//渡されたgenerator関数を非同期で繰り返し実行する
//実行結果をPromiseとして返すUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-12769268376708429762017-10-26T18:07:00.001+09:002017-10-29T04:56:13.317+09:00千年戦争アイギスの音声ボリュームを上げるユーザースクリプトDMM社提供のWEBブラウザゲーム「千年戦争アイギス」はなぜか効果音を含めた音声出力が低く, いちいちPC本体の音声ボリュームを操作するのも面倒なため, これを改善するスクリプトを書いてみた.
10/29追記
本スクリプトを導入することで多少なりともブラウザへの負荷が高まるようです(Chrome系)
元々クラッシュしやすい環境では導入しないで下さい
[使い方]
通常のユーザースクリプトの導入と一緒.
Web Extensionsをサポートする環境(FireFox, Chrome, Opera等)
Tampermonkeyアドオンを導入して下記コードを新規ユーザースクリプトとして登録
レガシーFireFox(※動くかどうか確認していないが多分動くと思う)
GreaseMonkeyアドオンを導入して下記コードをユーザースクリプトとして登録
導入すると音声周りのAPIの中身をUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-5481139564558688532017-08-28T19:03:00.003+09:002018-02-14T10:51:00.586+09:00千年戦争アイギス・御城プロジェクト:REの動作を改善するユーザースクリプトDMM社提供の「千年戦争アイギス」及び「御城プロジェクト:RE」は基本となる構成が同じせいか、経験上ブラウザクラッシュ(主にChrome)の傾向も似通っている.
クラッシュ時のエラーコンソールを確認するに, 主たる原因はcanvasグラフィックを描く際のメモリ浪費にあると当たりをつけ, この部分を修正するユーザースクリプトを作ってみた.
なお, これで本当に問題が解決するかどうかは全く不明なため, 本スクリプトを利用する際は全て自己責任にてお願いします. 現状困っていないのであれば無理に導入する必要はありません.
(今日の今日作った突貫工事品だし, さほど検証もしていないし. 効果があるといいなあ. 何度もクラッシュするのは精神的にきついので)
→実際に改善効果があるっぽいので, 困っている方は是非試してみて下さい.
追記:2018/02/03
[重要]
Chrome Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-8099960898114125342017-03-31T08:45:00.001+09:002017-03-31T08:45:22.048+09:00SIMD.jsについてまとめてみたSIMD.jsの基本的な使い方・まとめ
http://defghi1977.html.xdomain.jp/tech/SIMD/SIMD.htm
とりあえず公開Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-12634218385002668252017-01-05T11:06:00.000+09:002017-01-05T11:06:14.863+09:00XNG(SVG+CSS Animations)を使った背景アニメーションXNGってのは↓で命名されたSVGによるパラパラアニメーション.
http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/
これを改良しつつ, スクリプトでXNG構造を生成してみた.
XNG自体は使いにくいフォーマットなものの, クライアント側でアニメーションをこねくり回す用途であれば, これと言ったライブラリを必要とせず極めて明快なコードで記述できる.
従って、
APNGやアニメーションWEBP等の一時デコード先
canvasアニメーションの記録先
パラパラアニメーションの動作確認用
と言ったケースで有効なテクニックと言える.
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-23116091951795613842016-12-23T22:16:00.000+09:002016-12-28T21:20:54.627+09:00Service Workerを使ってWEBP画像をシームレスに読み込む次世代のWEB画像形式WEBPが発表されてから結構時間が経っているのに、未だにFireFoxとEdgeでは未サポートという悲しい現実があります.
そこで, 今回この問題の解決策を探ったところ, 条件付きではあるもののなんとかなる!ところまで確認できました. ので, まとめてみることとします.
12/25 スクリプトを更新
12/28 データ(Blob)URIスキームに対処できない点に気づいてしまった…
使ったもの
Service Worker
WEBP画像のデコーダJavaScriptライブラリ
透過BMP画像
どれも解説に時間が掛かるトピックスなので、要点だけ
ストラテジ
Service WorkerはWEBページの背後で動作するスクリプトを指し, WEBページ側のリクエストをトリガーとして任意のレスポンスを返すことが出来る.
なので, WEBP画像のリクエストUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-52951708128328171592016-12-21T16:46:00.002+09:002017-09-11T20:28:55.564+09:00WEBP形式の画像をデコードする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なるUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-87754978761481060832016-12-06T10:31:00.000+09:002016-12-06T10:33:07.372+09:00Ubuntu16.10にpresto版Opera(opera-next)をインストールするWEBブラウザのOperaは今でこそレンダリングエンジンとしてblinkを搭載することでChromeクローンのような立ち位置ですが, バージョン12までは独自のprestoエンジンを利用していました.
このprestoエンジン, 実はSVGのレンダリングが綺麗だったり, SVG1.2が一部動作すると言った貴重な代物なので, 古くなったといえど未だ利用価値があります. が, プロジェクトのメンテナンスは既に終了しており, ついにUbuntu16.10では(そのままでは)インストール出来なくなってしまいました.
これは旧Operaが参照していたライブラリが時代遅れとなり, Ubuntu最新版ではリポジトリから削除されてしまったことに起因しています.
従って, 別途ライブラリを手動で導入すれば再び旧Operaがインストールできることになります. 以下その手順について示します.
※なお,Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-19151026077899752472016-10-21T20:10:00.001+09:002016-10-21T20:10:18.597+09:00SVGフィルタによる画像の隠蔽(提案・検証)http://defghi1977.html.xdomain.jp/tech/imageCrypto/imageCrypto.htm
SVGフィルタには
可逆なもの元画像を復元可能なもの
色交換
色反転
基準ずらし
RGB/HSL分解・合成
準可逆なもの復元可能な画像に条件が付くもの
ノイズ加算・除去
サンプリング
グレイスケール
変異マップによる変形
非可逆なものどうあがいても元画像を復元出来ないもの(単色画像を除く)
ガウスぼかし
モルフォロジー
光源効果
の3つがあって, この内, 上の2つには自身を取消すフィルタ(逆フィルタ)を考えることが出来る. このフィルタと逆フィルタの対をうまく用意することができれば様々な用途に応用できるんじゃね?
ということで思いついたものが, フィルタを使って画像にノイズを加算・除去するという例.
なおアイディアそのものは悪くUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-85528031233986583662016-08-15T20:04:00.001+09:002016-10-23T17:21:38.386+09:00SVGフィルタエディタ作ったSVG仕様の中でも理解のし難さの頂点を争うフィルタ仕様(もうひとつはSVGフォント). 試すにしても手書きで書き起こすのは非常に面倒. であるならヘルパアプリケーションを作ってしまえと.
http://www.h2.dion.ne.jp/~defghi/filterEditor/filterEditor.htm
↓ 新URL
http://defghi1977.html.xdomain.jp/tech/filterEditor/filterEditor.htm
似たようなツールは既にあってもおかしくない割にググっても見つからんかったので, 存在意義は十分にあるかと思ふ.
SVGファイルを読み込んでフィルタ設定を抽出します.Inkscape等からフィルタ設定を取り出して眺めるとか出来ます.
幾つかのフィルタ設定はプリセットとして選べます.プリセットの内容を弄ることも出来ます.
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-64382008595107159992016-06-17T11:44:00.003+09:002017-01-16T09:09:38.233+09:00解体されゆくSVG最近目につくようになったSVG2ですが, 一体何者なのでしょうか? 今一度考えてみました.
(単なる)SVG1.1SEの改訂版ではないSVG2
名前だけ見るとあたかも前バージョンたるSVG1.1SEからのメジャーアップデート仕様に見えます. が, その実情は全く異なります.
HTML仕様となったSVG
(2010年位)
HTML5黎明期, WEB表現力の向上を念頭に高度なグラフィックを扱うための新たな仕組みが求められていました. そこで白羽の矢が立ったのがSVGでした. HTMLと兄弟関係にあるXMLをベースにしたSVGであれば既存の仕組みを損なうこと無く, 無理せずにHTML機能の向上が可能と期待されたからです.
この試みはSVGにも多くの恩恵をもたらしました. 半放置気味だった仕様は最新のもの(SVG1.1からSVG1.1SE)に置き換えられ, それまで動作Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-52781062458919360352016-06-11T22:12:00.001+09:002016-10-23T17:22:10.243+09:00Web 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
骨組みだけは作ったけれど
雑感
まだまともには動かない(Firefoxがちょっと先行.Chromeも割と動く.でも相変わらず互換性が無い)
仕様は相変わらず何を言っているか分かり難い.わかってる人がわかってる人に説明している感じ(Editors Draftなんだからアタリマエ)
でも触ってみてなんぼなAPIなので割と直感的に扱える.が,そこまでが長い.
やっぱSVGアニメーションはしねしねなのね.(私もしねしね団の一人だけれど)
Mozillaの解説が盛大に間違ってたりとUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-62497730291850423142016-05-24T07:29:00.000+09:002016-10-23T17:23:06.582+09:00SVGの高速化・生DOMを直接描画するな戯れ(?)に作ってみた「ラスタ画像SVG化スクリプト:カラー対応版」から判ったこととしては,表示対象のSVGが(比較的)多量の複雑なpath要素から構成されていた場合,その表示方法によってはグラフィック描画パフォーマンスに雲泥の差が発生する,ということ.
※なお, スクリプトによるアニメーションを行う場合はまた違った結果となる.
経緯
mix-blend-modeを使った合成をfilter要素で書き換えるコードを記述していた際、たまたまuse要素を使うロジックにしたところ、出力したSVGの描画速度に驚くほどの差が発生したことに気づく.それまではpath要素の描画が順次行われており,SVGグラフィックの構築過程が観察できていたのが,ほぼ瞬時にスクリーンに表示されるようになった.(※SVGを直接ブラウザで表示した場合)
考察
canvas要素にも言えることだが,スクリーンのUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-8404950887743952441.post-60491466775519967462016-05-19T19:52:00.003+09:002016-10-23T17:23:37.796+09:00asm.jsについてまとめてみた前から気になってたasm.jsについてひと通りまとめてみた.
需要あるんかいな?
asm.jsの基本的な使い方・まとめ
雑感・構造はさほど面倒ではない. だが, ある程度処理が大きくなると手書きでは厳しい.(自動生成を前提にしているのだからアタリマエ)
でも, 単純な数値計算をガッツリ行う用途なら手書きでも十分その恩恵に預かれる. Unknownnoreply@blogger.com0