グリッドレイアウトによるピュアCSSなスクロールテーブルの実装

CSSにおける大きな課題の一つとして「ヘッダー・フッターを固定した上での表のスクロール」が挙げられます. 既にこのブログにおいてもCSSによるおそらく最も簡単にヘッダとフッタを固定するスクロールテーブルの実装方法として言及していましたが, この方法を紹介してから既に6年が過ぎており, いささか時代遅れの印象があります.

そこで, 本記事ではよりモダンな方法で簡潔にスクロールテーブルを実装する方法について紹介します.

CSS 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でしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)

WEB仕様におけるHSL色空間の混沌

WEB(HTML/CSS/SVG)が扱う標準的な色空間はsRGBだったが 最新のCSSカラーではHSLによる色の指定が可能となった.

sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.

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

前回作ったdotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチとRGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元とを組み合わせてみたところ, それはもう素晴らしい出力結果が得られたので公開する.

従来SVGでは実現が困難と考えられてきた多階調の自然画風グラフィックを無理やりベクタ化する際の一つのアプローチとして非常に効果的である.

NOTE:2017/12/13
但し本スクリプトでの出力結果はSVG本来のメリットであるスケール非依存性が失われるため, 使い勝手は悪い.

ドット絵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

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

XNGってのは↓で命名されたSVGによるパラパラアニメーション.
http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/

これを改良しつつ, スクリプトでXNG構造を生成してみた.



XNG自体は使いにくいフォーマットなものの, クライアント側でアニメーションをこねくり回す用途であれば, これと言ったライブラリを必要とせず極めて明快なコードで記述できる.

従って、

• APNGやアニメーションWEBP等の一時デコード先
• canvasアニメーションの記録先
• パラパラアニメーションの動作確認用

と言ったケースで有効なテクニックと言える. 

SVGフィルタによる画像の隠蔽(提案・検証)

http://defghi1977.html.xdomain.jp/tech/imageCrypto/imageCrypto.htm

SVGフィルタエディタ作った

SVG仕様の中でも理解のし難さの頂点を争うフィルタ仕様(もうひとつはSVGフォント). 試すにしても手書きで書き起こすのは非常に面倒. であるならヘルパアプリケーションを作ってしまえと.

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

似たようなツールは既にあってもおかしくない割にググっても見つからんかったので, 存在意義は十分にあるかと思ふ.

解体されゆくSVG

最近目につくようになったSVG2ですが, 一体何者なのでしょうか? 今一度考えてみました.

Web 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

骨組みだけは作ったけれど

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

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

SVG2のmix-blend-modeを試してみる

SVG2の仕様確定が遠のいてしまいましたが，翻ってWEBブラウザ側では着実に新機能の実装が為されています．今回紹介するmix-blend-modeもその一つで，HTMLとの仕様の統合をはかる上で新たにSVG2で導入されるプロパティです．従って実用には程遠いのですが，非常に魅力的な機能ですからいち早く試してみることとしました．

なお，現状Editor's Draft版を参考としているため，今後仕様の修正に伴い内容が不正確になる可能性があります．
また，本ページの内容はmix-blend-modeをサポートしているブラウザで見てください．

インラインSVGの見た目がボケてしまう事に対する処方箋

インラインSVGを使っていて困ること，それは「いつ何時ボケボケになるかわからん」ということです．そこでどうやったらこの「ボケ」を取り除けるかをまとめました．

ブログにまとめようとも思ったけれど面倒なのでリンクを貼っておきます．

要はSVGの枠をスクリーンのピクセルに合わせるにはCSS transformが最も手っ取り早いんだけれど，ブラウザ毎の動作の違いもあって，実現に少し細工が必要ってこと．ScreenCTMとtransformとベンダプレフィクスを組み合わせて, 下のようなスクリプトを発行するんだ.

svg = document.querySelector("[selector]");
m = svg.getScreenCTM();
svg.style.transform = "translate(0,0)";
svg.style.msTransform = "translate(" + (Math.floor(m.e)-m.e) + "px," + (Math.floor(m.f)-m.f) + "px)";

HTMLパーサーを使ったインラインSVGのフォールバック方法

表題の件って以前にも当ブログで紹介していたんだけれど，それには一点問題があったのだけれど，ようやっと解決策を思いついたのでご紹介．って二年越しだよコレ！

Snap.svgの使い方をまとめました

Snap.svgの使い方まとめ

svg時代のjavascriptライブラリ「Snap.svg」について，日本語のドキュメントが極めて乏しいことからまとめてみました．豊富なapiを使い方を含めて全て１枚のwebページに収めたために，とっても重い代物になっちまいましたが，中々使えるものになったかと自負しています．

svgビュー指定って知ってますか？

svgをimg要素等から参照する場合，直接ファイル名を指定する他に「svgビュー指定」と呼ばれるパラメータを渡すことが出来るんです．これってグラフィックの作画に直接関わる機能じゃないので，あまり知られていないのですが，憶えておくと結構便利ですから是非マスターして下さいね．

2014/03/24 ちょこっと内容を追加．基本は変わらず．
※注意：記事を書いては見たものの，その後いろいろ試してみたら結構な動作不良っぽいものがザクザクと．
ですから，フル活用する前にきっちりと動作検証をして下さいね．
私はブラウザベンダーにフィードバック入れときます．

レスポンシブなsvgを作ったら背景画像を追加してみよう

svgを単なる画像ファイルだと考えていたら大間違いなんです．そこで今回はsvgに背景画像を追加して，画像の大きさを変えても固定位置に画像が表示されるというサンプルを紹介します．
※2014/3/22 補足を追加

svgを使って背景画像を傾ける

svgを使えば背景画像を傾けることだってできちゃうんだぜ．

svgをプログラム言語としてとらえると-svgエチケット論

web上でベクタグラフィックを描けるのは非常に便利であるものの，使い方によっては薬にも毒にもなるよという話．長いので，すっ飛ばして結論だけ読んでもよし．
※例によって個人調べなので，多分に間違いが含まれているものと思われます…

2014/3/4 ちょっと改訂
2014/3/5 補足を追加
2014/3/6 optimizeSpeedについての記述を追加
2014/3/19 strokeについての記述を追加

インラインsvgを別ウインドウに開くブックマークレット

表題の通りです．
インラインsvgはそのままでは保存しにくいので，それをサポートするツールを作ってみました．
web開発のお供に使ってみてください．結構面白いよ．

※なお，他人のサイトのsvgを勝手にコピーするのは著作権に触れることも考えられるから，お気を付け下さい．

なんだ，似たようなツールってば既にあるのね…
http://nytimes.github.io/svg-crowbar/

---