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;」としたら案の定動作した.

2016年12月6日火曜日

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

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

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