千年戦争アイギスのクリック操作がChromeで無視される件

システムアップデートに伴い以前より格段にクリック無視の頻度が上がったため, 操作の応答速度を犠牲に不具合を緩和するユーザースクリプトを書いてみました

追記＆更新履歴
2018/6/17 v0.3 ユニットの誤選択が発生していた部分を修正しました

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

dotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチ

WEBでは画像をRGBA各8bitで扱う. なので, RGBA値をそれぞれbit値毎にpath図形化し, SVGフィルタで合成し直すことで, 理論上はあらゆるグラフィックは高々32個のpath要素（とSVGフィルタ）で表せるはずだ.

では実際にこのようなアプローチに沿って作った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

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

とりあえず公開

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

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

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

asm.jsについてまとめてみた

前から気になってたasm.jsについてひと通りまとめてみた.
需要あるんかいな? 

asm.jsの基本的な使い方・まとめ

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

城VOLUME

firefox greasemonkey拡張

機能がなければ作ればいい．
とあるゲームに全体ボリュームの変更を行う機能をこっそり追加します．

greasemonkey拡張を導入し，下記のスクリプトをインストールすると
ゲーム画面左下にBGMとサウンドエフェクトの音量を変更するツマミが追加されます．

※作者は下記スクリプトの動作について、如何なる保証もしません．どのような損害を被っても自己責任でおねがいします．

何をしているの?
ゲームが使っているAPIをフックして，内部で呼び出しているHTMLAudioElementを特定しています．ここまでくれば後は適当なGUIを用意してやればボリューム調整機能の追加なぞさほど難しくない．
※なお，本家がボリューム調整機能を実装した際に機能が競合するかもしれないので，あくまで暫定的な機能ということで…

NOTE:
セリフと効果音毎のボリューム設定はできるの?
→できません．loopの有無でBGMとそれ以外は区別できるのですが・・・

Bash on Ubuntu on Windowsメモ

単なるメモ
間違いがあっても知らね

Ubuntuにmime typeを追加する/サムネイラを追加する

デスクトップubuntuを使う上で, 独自のファイルタイプを定義したい場合がある. こうすることで特定のファイルに目立つアイコンを割り当てたり, アプリケーションを関連付けたりすることが可能となり, 作業効率の向上が見込めるからだ.

そこで本ドキュメントではxubuntu14.04(+nemo)環境におけるファイルタイプの追加およびカスタマイズについてまとめておくこととする.

まとめておく手順は主に次の2つ

• mime typeの追加・上書き定義
• thumbnailerの追加

※なお, (Apacheといった)サーバーとしてのmime typeの追加ではなくてあくまでデスクトップ利用時のtipsである点に注意されたし.

mime typeの追加・上書き定義

ubuntuではファイルタイプをmime typeと言ったもので管理している. これはwindowsでの拡張子に当たるものだが, 拡張子が単にファイル名から得られるものに対し, mime typeはファイル名に加え場合によりファイルの中身(バイナリ)から算出することも可能となっている. そのため, ubuntuではファイル名を変更してもアプリケーションの関連付けが維持されていることがよくある.

大抵のmime typeは予めubuntu側で定義されているが, wine環境でwindowsアプリを稼働させている等, 未知のファイル型に対して独自のmime type型を与えたい場合は次のようにする.

1)/usr/mime/packagesもしくは~/.local/share/mime/packagesにmime typeの定義ファイルを定義する.
※前者はユーザー間で設定を共有する場合に用いる. なお作業にはスーパーユーザー権限が必要.

例えば次のようなxmlファイルを作成し, ~/.local/share/mime/packages/my-setting.xmlとして保存する.

<?xml version="1.0" encoding="UTF-8"?>
<mime-info xmlns="http://www.freedesktop.org/standards/shared-mime-info">
  <mime-type type="audio/gameboy-sound">
    <glob pattern="*.gbs"/>
    <sub-class-of type="application/octet-stream"/>
    <magic>
      <match type="string" offset="0:2" value="GBS"/>
    </magic>
    <generic-icon name="gb"/>
    <comment>GBS オーディオ</comment>
  </mime-type>
</mime-info>

各要素の意味合いは概ね次の通り

• mime-info mime
  type設定を表すrootノード
• mime-type mime
  typeを表すノード. type属性にmime type名を指定する. 個人で利用する場合, 命名規則を意識する必要はない筈.
• glob
  ファイル名で型を判定する際の条件. 大体windowsでの拡張子と思って良い.
• sub-class-of
  このmime typeが他の型から派生したものの場合に指定する.
  大抵は「application/octet-stream」か「text/plain」となる. 別になくても良いが, アプリの一覧に派生元mime typeに関連付けされたものが表示されるようになる.
• magic
  mime typeがファイルのバイナリデータ(主にファイルヘッダ)から算出される場合はその条件を表す. 別になくても良い.
• match
  型判定の条件を記述する. バイナリデータの読み込み位置と比較条件を設定する. match要素を併記した場合はor条件を, match要素をネストさせた場合はand条件を表す.
• generic-icon
  このmime typeに対応するアイコンを指定する. 既存のシステムアイコン名を指定しても良いが, /usr/share/iconsもしくは~/.local/share/icons直下に自作のアイコンを配置し, それを参照することもできる. 上記は「gb.svg」をアイコンとして利用することとしている.

xmlファイルの詳細については下記を参照
https://specifications.freedesktop.org/shared-mime-info-spec/0.18/ar01s02.html#idm139750563085760
システムに登録されているmime typeはすべて/usr/share/mime/package/freedesktop.org.xmlに記述されているので, 詳しい書き方がわからない場合はこの内容を参考としても良い.


2)update-mime-databaseコマンドを実行し, mime type設定を更新する.
コマンドの実行対象はmime type設定ファイルを保存したディレクトリとする.

update-mime-database ~/.local/share/mime

※なお更新に失敗した場合は設定ファイルを一旦削除し再度コマンドを実行することで元の内容に戻せる. なお誤ったmime type設定がシステムに反映された場合でもアプリの関連付けやアイコンの表示がグチャグチャになるだけで済む.

後は独自のmime typeに対しnemoなりnautilusなりのファイラからアプリの関連付け設定を追加すれば良い.


なお, このmime typeの設定は非常に柔軟に行うことができる. 例えば次のような設定も可能である.

• 特定の拡張子ファイルに複数の意味付けを与える
  バイナリのdocはofficeファイルでテキストのdocは単なるテキストファイルとして扱うなど. 
• 特定のファイルタイプに対するアイコンを変更する
  システムで共有されているmime type設定は個人の設定で上書きされる. そのため,特定のファイルタイプに対するアイコンを変更することが可能である.

thumbnailerの追加

 

画像ファイルのアイコンがファイラ上でサムネイル画像として表示されるのは, ファイラの背後でサムネイラと呼ばれる仕組みが動作しているためだ. サムネイラは独自定義することも出来, ソースとなるファイルを画像化する手段があれば, 任意のmime typeのファイルに対してサムネイルを生成・表示させることも可能だ. 例えばhtmlのプレビューをファイラに表示させることもできる. 

以下nemoでの挙動について示す. なおxubuntuの標準ファイラであるthunarでは内容が異なるので注意.

●サムネイラは/usr/share/thumbnailersもしくは~/.local/share/thumbnailersに保管されている. 自作のサムネイラ(ファイル名*.thumbnailer)はここに保存することで即時に有効となる. 例えば下記はxcf画像に対するサムネイラを与える.

#xcf-thumbnailer.thumbnailer
[Thumbnailer Entry]
TryExec=gnome-xcf-thumbnailer
Exec=gnome-xcf-thumbnailer %i %o
MimeType=image/x-xcf;image/x-compressed-xcf;

• TryExec
  サムネイルを生成するコマンド(存在確認のため) 無くても良い.
• Exec
  サムネイルの生成コマンド. 引数としては次が与えられる.
  
  • %i…サムネイルの作成対象のファイルパス
  • %s…サムネイル画像のサイズ(大体128が渡されるっぽい)
  • %o…サムネイル画像の作成先ファイルパス
  複雑なコマンド記述が必要な場合は, 別途自作スクリプトを参照させても良い.
• MimeType
  サムネイラが処理対象とするファイルのmime typeのリスト. セミコロン区切り.
  既存のサムネイラにおいて特定のファイルタイプのサムネイルが作られない場合は, ここの内容を見直すと良い.

※詳細は下記を参照
https://developer.gnome.org/gnome-desktop3/stable/GnomeDesktopThumbnailFactory.html

※thunarにおいてもサムネイラの独自記述ができるとのことだが, 上手く行かなかった.
http://www.geocities.jp/cabezon_hashimoto/doc/thunar/ja/customizing-thunar.html


●サムネイラによって作成されたサムネイルは「~/.local/cache/thumbnails」に保存される.
サムネイルを再作成する場合は, nemoを強制終了(nemo -qを実行)し, 内部の「normal」等のディレクトリを削除した後にnemoを再起動させる(サムネイル画像のキャッシュがメモリに残っているとサムネイルの再作成が行われないため).

なおサムネイル生成に失敗した場合は「fail」ディレクトリを削除し, F5キーによるディレクトリの再読み込みを行うだけで良い.

※thunarではサムネイル画像が「~/.local/thumbnails」に保存される. nemoとthunarとを並行稼働する場合, 全く同じサムネイル画像が複数箇所に存在することとなる そこで予め「~/.local/cache/thumbnails」から「~/.local/thumbnails」にシンボリックリンクを貼っておくと画像がファイラ間で共有されるため便利である.

---
以下サムネイラの実装例を示す. 


例)サムネイラの実装例:テキストファイルのサムネイラ
※事前にimagemagickとnkfをインストールしておくこと

#text.thumbnailer
[Thumbnailer Entry]
TryExec=nkf
Exec=/home/xxx/.local/share/thumbnailers/text.thumbnailer.sh %i %o
MimeType=text/plain;text/css;application/javascript;application/x-php;・・・

#text.thumbnailer.sh
#!/bin/bash

#font設定
text_font='/home/xxx/.fonts/ipam-mona.ttf';
charset_font='/usr/share/fonts/truetype/ubuntu-font-family/UbuntuMono-B.ttf'

#改行コード判定
charset=`nkf --guess "${1}"`
if [[ $charset =~ '(CR)' ]] ; then
    nlc='[m]' #new line code
    nlcc='crimson'
elif [[ $charset =~ '(CRLF)' ]] ; then
    nlc='[w]'
    nlcc='darkcyan'
else
    nlc=''
    nlcc='navy'
fi

#文字セット判定
charset=`nkf -g "${1}"`
if [[ ! -s "${1}" ]] ; then
    charset='EMPTY'
    bgc='white'
elif [[ $charset = 'Shift_JIS' ]] ; then
    charset='S_JIS'
    bgc='azure'
elif [[ $charset = 'CP932' ]] ; then
    bgc='mistyrose'
elif [[ $charset = 'EUC-JP' ]] ; then
    bgc='lightyellow'
elif [[ $charset = 'ISO-2022-JP' ]] ; then
    charset='JIS'
    bgc='aliceblue'
elif [[ $charset = 'BINARY' ]] ; then
    bgc='whitesmoke'
elif [[ $charset = 'UTF-8' ]] ; then
    bgc='white'
elif [[ $charset = 'ASCII' ]] ; then
    bgc='white'
else
    bgc='thistle'
fi

#出力内容の取得
if [[ $charset != 'BINARY' ]] ; then
    text=`nkf -w80Lux "${1}" | grep -v '^\s*$' | head -n 10 | sed s/"\t"/" "/g`
else
    text=`nkf -w80 "${1}" | head -c 1000`
fi

#画像生成
#see http://qiita.com/mtakizawa/items/94b4cb6d2da99482c6ac
convert \
    -size 83x104 xc:$bgc \
    -font "$text_font" -gravity northwest -pointsize 10 -fill black -annotate 0x0+0+0 "$text" \
    -bordercolor $bgc -border 3 \
    -size 89x16 xc:white -append \
    -fill $nlcc -font "$charset_font" \
        -gravity "southwest" -pointsize 15 -annotate 0x0+2+0 "$charset$nlc" \
    -bordercolor lightgray -border 1 \
    png32:- > "${2}"

これをテキストファイルに適用するとこんなサムネイルが作られる．(文字コードと改行コードをプレビュー出来るので便利かも)

なおサムネイル化処理が複雑な場合, 相応の負荷がかかることでシステムとしての軽快さが犠牲になるので注意すること.

サムネイラスクリプト作成時の注意

サムネイラから渡されるパラメータには「png画像を生成しろ」と言った内容は含まれていないので, コマンドによっては明示的にpng画像を生成させる必要がある. 上の例では%oで渡されたファイル名に「.png」が含まれておらず, そのままconvertコマンドに渡すと画像形式の判定に失敗する. そのためpng形式の標準出力に画像データを生成してからリダイレクトしている.

追記

頻発するサムネイル画像の削除でrm -rコマンドを暴発してホームディレクトリをふっ飛ばしたのは嫌な思い出． ファイルの削除には細心の注意を…

UbuntuへのApache Flex導入メモ

単なるメモ書き. Ubuntu 14.04でAction Scriptの(最も原始的な)コンパイル環境を整える方法.

WebComponentsの基本的な使い方・まとめ

http://www.h2.dion.ne.jp/~defghi/webc/webc.htm
↓新URL
http://defghi1977.html.xdomain.jp/tech/webc/webc.htm

Eclipseをsvgエディタとして利用する

いろいろ調べてみたけれど，フリーのエディタでsvgを手打ちするようなユースケースを想定したものは見つからなかった．そこでEclipseをその代用とするための設定についてまとめてみました．（個人的なメモとも言う）
つーか，Eclipseなんて大物を使うってのもなんだか間違ってる気がするんですが，ubuntu上で探すのは骨なんです…

2014/02/12追記
svgエディタとして探していたから見つからなかったわけで，html5エディタで探していたら良さげなツールを見つけました．
あんまり良い代物ではなかった…

Aptana studio3
http://www.aptana.com/products/studio3

本記事と同様にeclipseをベースとしたオープンソースのweb統合開発環境で，インラインsvgをも編集することが可能なようです．
なお，プログラムの配布形態としては

• eclipse込みのスタンドアロン形式
• eclipse向けのプラグイン形式

の2種類から選べますが，既に別の用途でeclipseを利用している場合はスタンドアロン形式を選択したほうが良いでしょう．筆者はプラグイン形式で導入してしまったため既存の環境設定と干渉し，却って使いにくくなってしまいました（トホホ…）

なお下記のdtdを利用した方法はsvg2を目前として今後使えなくなる事が判っているため，参考程度に考えてください．
どうやらsvgサポートは限定的で属性のリストアップまではサポートしていないようです（エラーとなる）．

svgとセレクタを駆使してカレンダーを作る

いろいろと試してみる内にsvgとセレクタとは実は非常に相性が良いとの結論に至りました．
というのも，htmlでは文書の構造上要素を記述すべき順序が基本的に左上から右下に向かって一並びとなるのに対し，svgではこの順序を自由に記述できるからです．

htmlにおいてもposition:absoluteを使えば絶対位置によるレイアウトを行うことができますが，table要素など階層構造がきっちりと定義されているものについては，中々難しい面があります．その点svgでは階層構造すら勝手に定義することができるため，工夫次第で実に様々な表現を行うことができます．

今回紹介するのはスクリプトなしにsvgとセレクタだけで作ったカレンダーです．前回のトランプカードを発展させたもので，中々面白い結果となっています．

canvasで描いた画像をローカルに保存する方法

HTML5のcanvas要素で生成した画像は，toDataURLメソッドを使ってdataスキーマ形式のpng画像に変換することができます．従って，この文字列を例えばa要素のhref属性に設定してやれば，ユーザーはこのリンクをクリックすることでファイルをダウンロードすることができます．

しかしこのやり方には一箇所落とし穴が存在します．chromeにおいて概ね長さが1MBを超えたurlを指定したリンクを開こうとした場合，あろうことかブラウザがクラッシュしてしまうのです．エラーを発生すること無しにいきなりクラッシュするため，try-catch構文による対応が出来ません．

更に困ったことにcanvas要素が出力するpng形式の画像はそのファイルサイズがまちまちで，カンバス領域のサイズから最終的なファイルサイズを推し量ることが出来ません．従ってこのやり方はクロスブラウザを念頭に入れた場合，非常に扱いにくいものとなってしまっています．この他に上手なやり方は無いのでしょうか？

※追記
BlobBuilderが非推奨となった模様です．
代替の記述法はhttps://developer.mozilla.org/en-US/docs/DOM/Blobこちらを参照して下さい．

potrace.js解説

ラスタ画像のアウトラインをトレースし，svg等のベクタ画像に変換するpotraceですが，javascript版の高速化を行った際にざらっと分かった処理の流れについてまとめてみます．なお，パス演算等のアルゴリズム的な所についてはよく判っていません．が，まあ動いているからいいんじゃない？

ラスタ画像からsvgを作るアプリpotraceHtml更新

拙作svg生成スクリプトpotraceHtmlを更新してみた．

• 画像にフィルタを掛けてからトレース処理を行う為の機能を追加．
  特定の色情報だけを取り出して処理したい場合に使える（かもしれない）．

ぶっちゃけ前回の調査によりsvgのフィルタを流用できないという結論に至ったので，canvasを利用することとした．こんなありふれた処理なんだから，ライブラリも見つかるだろうと高をくくっていたが，意外なことにcanvasに対するフィルタ処理だけのライブラリって見つからないのですね．仕方が無いので，ライブラリも自作することに．

フィルタの仕様はsvg1.1seのものと，filter effects1.0のものを参考にして実装してみた．だが動作検証させてみるとコンボリューションフィルタの結果が違っているように見える．スクリプトのバグも疑ってみたが，gimpでのフィルタ結果とほぼ同様なので，svgにおける処理とは若干動作原理が異なるのかもしれない．