くもりガラスとCSS Filter Effects - C#でプログラミングあれこれ

いやーもうすっかりC#の人になっちゃったんで、元々大好きなUI/UXとかデザインを試す機会が無くなりつつある。
まあそうは言うても全く興味が無いわけじゃ無いんでアンテナは立ててるわけでその範囲で今一番気になってる話題を少し。

デザイナーじゃ無いんで完全にデザイントレンドを理解してるわけでも追ってるわけでも無いんやけど、最近はなんつってもフラットデザインの流れと言わざるを得ないのな。
コンピュータと言えばPC、ネットもPC上のウェブブラウザでしか見ないって人にとってはマイクロソフトやアップルが舵を切った解像度に依存しないデザインがしやすいフラットデザインは何のメリットがあるのかわかりにくい。（つーか、デメリットしか無い？）

そういう人もスマホやタブレットを使う機会はあると思うんやけど、そっちはユーザー視点なんで背景やらなんやらは読み取らない。そう、自動車を運転してる時は歩行者が危険で危ないとムカつきながら、道を歩いてる時は車が乱暴やとムカつくのと同じ。
売る立場と客の立場の両方を知ってても、双方の視点や思考と持つのはまあまあ難しいのな。

・・・話がそれた。

今年のデザイントレンドの１つがフラット（メトロ化でも良い）やとして、iOS7の発表後にわかに注目が高まったデザイントレンドが「曇りガラス」エフェクト。WindowsがVistaで導入してWindows8で捨て去ったAeroをアップルがフラッチに足してきた。
昔にあった不透明なグラッシー（ガラス的）なアクア（アクアピルのボタンとかね）を一歩進めたよりリアルなガラス的なデザイン。

ざっくり定義しちゃえば、iOS6までのスキュオモーフィック・デザイン（Skeuomorphic Design）を捨ててフラット化させながら、概念上のガラスを模した美しいデザインを作り出してる・・・と俺っちは思ってる。（スキュオモーフィック・デザインが現実世界の物体・実体を模したのに対して、現実世界の概念・意味を模すようになったって話）
少なくとも俺っちはWindows8のメトロよりはこっちのデザインコンセプトの方が好き。

前置き長いけど、もうちょっと続く。

iOS7用のツイッターアプリにTweet7ってのがある。

http://www.appbank.net/2013/10/31/iphone-application/692047.php

↑こういう画面。iOS7のデザインコンセプトを見事なまでに体現してると個人的には思う。
で、で、で、後じゃんけんっぽいけど実はこういうデザインをウェブでやりたいってずっと思ってたのな。
CSS3の表現力とGPU性能の向上で「すりガラスエフェクト」出来んじゃね？って思って実験して諦めてたっつーね。

だけど、死にかけてたと思ってたSVGとプログレッシブ・エンハンスメントって概念がCSS Filter Effectsって技術を生み出した。
論より証拠まずはこのサイトを見てみよう。

dinamic INSIDE blur
http://codepen.io/Kseso/full/JBrcD

CSS Filter EffectsってのはCSSでHTML要素自体にぼかしとか色相変換とかの画像効果をSVGを使ってリアルタイムで入れれるってことなのな。
当然モダンブラウザ限定やけどプログレッシブ・エンハンスメント時代なんやから問題無い。
ウェブから結構遠ざかってるけど、これが出来るんなら何かウェブ上でのツール作ってみたなるなあ。

SignalRは一般的じゃ無いんで、WebSocket + AngularJS + CSS Filterで自分の欲しいツールなんか作ってみよっかなあ。
node.js でやると若干いろいろつらいか・・・Play2+Scalaは勉強不足やしなあ。Play1.2(Java)+WebSocketぐらいでイイかな？（最近全くJava触ってないけど）
まあ、サーバーサイドはオマケでCSS Filter EffectsとWebSocketでリアルタイム更新するUI作りたいだけなんやけどな。

しばらく考えてみよう。