private-works
ニコ動 超チューニング祭で最優秀賞もらいました
Posted by Miki Ishijima on .ニコニコ超会議で開催された「超チューニング祭り」に恋人である武藤スナイパーカスタムからお誘いされて参加しました。
投票してくださった方々のおかげで最優秀賞！ ありがとうございます！
ニコ動モバイル版のトップページのhtml,css,jsを軽量化するお祭りでして、にぎやかな会場、狭いブースの中で詰め込まれておもしろかったです。
チーム：ウルフギャングの紹介
エンジニア、デザイナーのバランスチーム。 武藤さんが狼が好きなのでそれっぽい名前にしました。ギャングらしくふたりとも革ジャン装備。
武藤スナイパーカスタム
Twitter : tai2
イシジマミキ
Twitter : woopsdez
他はエンジニアふたり、個人での参加などがあり学生さんやエンジニアさんが非常に多かったです。非常に高名なドワンゴスターエンジニアも参加していたのですが、HTML,CSS,JS等の専門外のチューニングを行う。というのがなんかおもしろかったです。
コード
https://github.com/tai2/nicohaya
チーム：ウルフギャングのやったこと
エンジニア
- html5 APIを利用した画像やスクリプトのローカルキャッシュ
- jsの整理
- jsCacheの改造
- css,jsのminify
エンジニアがやったことがGistにまとめられました。 https://gist.github.com/tai2/11366229
デザイナー
- 意味のない装飾はしない
- CSS Sprite
- PNGのフィルタを利用した画像ごとの書き出し
- ImgOptimでPNG軽量化
- JPGの軽量化
意味のない装飾はしない
以前参加したフロントエンドのイベントであほむさんが出していたCSS3プロパティ レンダリングの速度が印象に残っていたので意識してみました。
引用：http://havelog.ayumusato.com/develop/performance/e561-wcan_2013_summer.html
つい角丸やシャドウは使ってしまいがちですけど、重要なものってそうないんですよね。
CSS Sprite
アイコンなど、背景だけで使う小さな画像をまとめておきリクエスト回数を削減する方法です。小さいアイコンで何度もリクエストが発生するとサーバーを圧迫しちゃうんですね。同じ画像サイズならリクエストが少ない方がお得。
CSS Sprite Generator 画像群をzipで圧縮したものを添付するだけで自動で作成してくれます。
スプライトした方がいい画像はChrome拡張機能のPageSpeed Insights (by Google)で教えてもらえます。
PNGフィルタを利用した画像ごとの書き出し
GIF BOOKの作例にてGIFは横方向に同じ色が続くと軽量化できるという記述があったのでPNGでもあるかなと探したらビンゴでした。
ですので画像形式に合わせてこのフィルタを活用しています。
ImgOptimでPNG軽量化
画像の軽量化、圧縮ではかなりと言っていいほど紹介されるアプリですね。ImageOptim
使い方も非常に簡単で、ドラッグ&ドロップするだけで圧縮して置き換えてくれます。
JPEGの圧縮はJPEG mini Lite
いろんなの使ってみたかったんでこちらも試しました。
JPEG mini LITEは1日使える回数に制限がありますが、無償で使えます。とりあえず試したいならブラウザ版を使うと良いでしょう。
JPEGの圧縮アルゴリズムを利用した一石二鳥の圧縮
それだけではつまらないので特徴のあるアプローチをしました。
PNGは色数で軽量化でき、色の範囲が多くても関係ないですが、JPGも色情報が多いほど重くなるのは一緒。
と、言うことは近似色をまとめておけば軽くなる？と思ったので絵柄によってぼかしをかけても問題ない場合は演出に見せかけてぼかしています。
僅かだけど確かに変わったので何かしら影響あったんだろうと思いますが、詳しくは良く分かりません。時間があればここら辺を理解して検証してみたいです。
正直、画像の軽量化とかあんまり興味なかった。
スマフォで使う画像なんて、ほとんどユーザー投稿系じゃないですか。細かいアイコンはWebフォント化するなりしているだろうし、メイン画像はデザイナー作ってくるから軽量化アプリとかちょっとかますくらい。
そんなの誰でもできそうなので、「何しようかなー」と軽部さんのガッチャマン聞きながらボーっとしてました。
でも、やってみたらけっこう面白くて新しい知識を得られておもしろかったです。
絵柄と画像形式ごとに最適な圧縮方法を見つけたり、演出っぽいエフェクトをかけて軽量化の実験するのは簡単でスグ効果も分かるし、普段身近に扱っている「画像」たちの新な一面を知ることができました。
LTのスライド
同じものをみんなで作るのやりたい
同じものでのいろんなアプローチは非常におもしろかったです。今度、わたしの運営しているコワーキングスペースこけむさズで何かやってみたいですね。
Webサービス系の企業さま! トップいじらせてくれませんか！ グッズとかくれませんか!
