ブローヴちゃん

最近公開した楽曲用ページ を作る際に、簡単なパララックス風の効果を作るためにアルファチャンネル情報を持った画像ファイルを複数扱う必要があるケースに出くわした。 以前ゲームを作った時 は画像のデコード処理自体を外部デコーダに頼らなくてもできる状況だったので画像ファイルを WebP 形式にして、PNG 形式で 3.60MB ぐらいあった画像が 207KB まで容量削減できた（※この時使った WebP 形式はロスレスではない）のだが、ブラウザで WebP 形式を使うのは時期尚早……というかまともに使える日は来るんだろうか。 JavaScript によるデコーダがあることも知ってはいるものの わりとどうでもいい理由でボイコットされても困る し、それは冗談としても、とにかく WebP 形式は今回の選択肢にはなかった。 そうなると PNG の最適化の路線が残るわけで、まずは有名どころの PNGGauntlet  を試してみた。圧縮アルゴリズムの最適化だけではそう大きくは縮まないだろうとは思ってはいたものの、ほぼ容量が変わらなかったので、別のアプローチの併用も必要そうだと思った。 とはいえここまで来ると減色ぐらいしか選択肢がない気がしてきた。 昔、今よりもインターネットが好きだった頃は OPTPiX webDesigner v2.x を買って使ったりもしていたこともあったものの、今となっては開発終了してしまっていて v2.x 系では少なくともアルファチャンネル付き PNG は扱えない。WebFree 版は制限厳しそうで面倒そうだし、Padie 系列のソフト類も現状は消息がよくわからんことになってるし、 COLGA も試してみたものの容易く視認できるぐらいに劣化してしまった。 などと困っていたところで  PNG Color Reducer Pro を見つけた。 試しに減色してみたら見た目がほとんど変化しないまま減色後の画像が生成された。 減色後のファイルサイズが表示されなかったのでどのぐらい縮んだのかわからず若干不安ではあったものの、楓 software の人は以前からアルファチャンネル対応動画形式の実装日記なんかも書いてて半透明を含む圧縮という分野での遭遇は初めてじゃないし、少なくとも出力結果から視認できるレベルの劣化は見当たらなかっ...

LESS « The Dynamic Stylesheet language http://lesscss.org/ CSS を書いているとき、 コメントアウトに /* ～ */ じゃなくて // を使いたい 入れ子で書いたのを解釈して欲しい と思ったことがある人なら多分夢のようなライブラリだと思う。

はてなブックマークボタンが使いやすくなった らしいので、Blogger の各記事の下に加えるようにしてみた。 Blogger では記事の側にボタンを設置しようと思うと HTML 編集モードに入らないといけないっぽいのだが、どうも記事ひとつひとつに対して調節しようと思うと「ウィジェットのテンプレートを展開」を使って展開されたソースに対して書き換えを行う必要があるらしい。 ただこれを一度展開してしまうとテンプレが巨大になって見通しが悪くなるし「ここから先は自力で頑張って下さい」ムードが漂っていてせっかくのインターフェイスが使えなくなりそうで怖いので（※実際にどうなるのかは未確認）、JavaScript 経由で挿入する方法でお茶を濁すことにした。 このブログには既にシンタックスハイライト用の JavaScript を仕込んでいて、その時に jQuery も読み込んでいたので jQuery を使った。実際に必要なコードはこんな感じ。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $('h3.post-title.entry-title').each(function(){ var $this = $(this), title = $this.text(), url = $this.find('a:first').attr('href') || $('head:first link[rel=canonical]:first').attr('href'), encoded_url = encodeURIComponent(url); $this.closest('div.post.hentry').find('div.post-footer-line.post-footer-line-1') .prep...