2017年11月11日土曜日

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

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

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

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


2017年10月26日木曜日

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

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.");
}


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

2017年8月28日月曜日

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

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

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

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

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

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


2017年1月5日木曜日

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

XNGってのは↓で命名されたSVGによるパラパラアニメーション.
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スキームに対処できない点に気づいてしまった…