Prototypeとモジュールパターン的なサムシング
実のところ未だに分かってるのかどうか自分でも怪しいprototypeのお話。 自分の理解を深める旅です。
理解の整理も兼ねてモジュールパターンで書いたコードを置き換えてみた。こういう感じね。
var foo = function(arg){
this.props={
prop1:arg
};
};
foo.prototype.shout = function(){
console.log(this.props.prop1)
}
var bar = new foo("test");
ちなみにモジュールパターンだと
var foo = function(arg){
var props = {
prop1:arg
}
return {
shout:function(){
console.log(props.prop1.arg)
}
};
}
こうなる。
個人的にモジュールパターンは親のfunction内に一通り書き切れるのでコードの見た目的にも好きなんですが、言ってしまえば同じ処理を複製してる訳なので、prototypeベースのが合理的ですわね。例えばこれがアニメーションを行う処理なら、デュレーション値をグローバル変数で持たせるなんて不細工なことしなくてもprototypeの下に持たせればいいわけだね。なんとなく分かったぜ、沖縄の師匠！
今日も良い勉強になりましたね。
※追記
実はprototypeで書いた方にreturnを書いた時の挙動がイマイチ理解できてない。falseやらtrueやら文字列を返しても問題がないのに、オブジェクトを返すとこける。なじぇ？
切り抜いた輪郭に色が乗ってる素材を改善する方法(ベタ塗り編)
こんな画像、見たことありませんか？
ほら。切り抜きが甘くてさ、周りが綺麗に抜けてない奴。
ガーーーーーッテーーーム！！！！！！！
ってなりません？私はなります。
控えめに言っても○したくなります。
確かに元のパス付きデータがあれば話は早いんですよ。でも、そうも行かない状況って、まあ多少なりともある訳なんです。でも、そういうときに綺麗に差し込んでるか否かで、ブランドというものに対する意識をきっちり示せる気はするわけですよ。
こういうのをトレースでも、切り抜きでもない第3の方法で対処しちゃおう、というのが今日のお話。 色がベタ塗りなロゴなどは、本当にサクっと済んでしまいます。
※今回サンプルとして、白背景に配置した後、低品質ぎみにJPEG化したWikimedia財団のロゴを用意しました。オリジナルはSVGです。イケてます。イケメンです。ジミーウェールズ並にイケメンです。
続きを読む
jQueryの使い方を簡単に説明してみるなど
私が出入りしている某社のWebをメンテナンスしている部署の方々から「こういうのやりたいんだけど、出来る？」とコンテンツの開閉を見せられたりやら、「jQueryの本だけは買ってみたんだけど...」的な話をチラホラ聞かされたりなど、この手の事に興味を持ってもらえそうな感じだったので、5分程度でさらっとなぞれる解説を書いてみてました。 まあ僕も人に偉そうに言えるほど詳しい訳じゃないんですが...
ちなみにターゲットとしているのは、CSSすら若干怪しく、JavaScriptはDocument.writeでコンテンツを差し込む為のものだと半ば本気で思っている人たちです。そういう人向けに書いてます。
本当はもうちょっと社内の実例を出しながら書いてあったので流石にマズいので適当に変えて晒してみたいと思います。
続きを読むCSSなblendingを試してみる等
こないだ見つけてこれは素晴らしいと一人大盛り上がりしていたCSS3のblend-modeについて。 このところnode-webkitでいろいろ映像絡みのオモチャを作っているので、主にその辺を前提にこいつを触ってみました。
なんなんそれ
どんなもんなのかはこちらのサイトさんで割とわかりやすく解説されてます。
動作環境
別にWebkit限定でないみたいですが、とりあえずChromiumではデフォルトで動作。GoogleChromeは現在のDevChannelでもFlagsで有効化が必要です。
触ってみた感じ
Photoshop野郎としては提案者のAdobeが仕様として合成の計算式出してる事もありPhotoshopのレイヤーモードの感覚で使えるのがなにより好印象です。（乗算・スクリーン以外は割とグラフィックソフト間で結果が異なったりするもんで）
動かしてみた。
Chromeの上でいくつかテストしてみました。 上の動画はそのときのテストの要素をキャプチャしたもんです。
img要素にただanimationを乗せた状態
単なる重ね合わせなので、透過もなにもないです。レンダリングもちゃんと補完がかかります。まあこの地点では特に今回のblendingはまったく関係ありません。mix-blend-mode: screen; を有効にする。
それぞれのリングが重なり合い、3つとも重なったところが白になっています。レイヤーモードが正しくスクリーンとして扱われている証拠です。しかしながら、transformによる変形の補間がかからなくなりました。さらに親要素にfilter:blur(6px)を与える
親要素にfilter:blurを掛けてもちゃんとブラーがかかります。何故親要素に掛けたのかというと...実はimgそのものにデバッガーからフィルタを掛けるとおもっくそ崩壊したからです。（ちなみにあらかじめCSSで与えてるとちゃんと出るにはでますが、animateを与えると壊れます）ちなみにこんな具合に壊れます。
一旦blurを抜き、下にvideoタグを引く
ではvideoタグの上ではどうか？問題なかったです。この地点までは。 ただ、この状態、レイヤーの合成モードが伝搬せず、この画像を囲ってる親要素で止まってるんですわ。 この辺の挙動はまだよく分からない。この要素にblendオプションを掛ければ望み通りなんですが...さらに親要素にmix-blend-mode: screen; を掛ける
はい、豪快に壊れましたね。animateに引っ張られていく感じです。 ただ動かさない限りは問題無く動きそうな感じではありますな。
まあ軽く触っただけなのでまだなんも言えませんが、現状の実装でもそれなりに面白い使い方はできそうです。
