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スキームに対処できない点に気づいてしまった…

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

2016年12月6日火曜日

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

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

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