SwapSkillsDoubbble(vol.6)に参加しました

勉強会

同じ会社の人が登壇するというきっかけがあり、
また、会社から金が出るということで（大事）、出席しました。
以下、要点と感想。

CSS3で作成するインタラクティブアニメーション

・CSS3(CSS4)はどこへ向かっているのか
SVGからの導入が多い。SVGに近づいている？

・Connecting Dots
複数のプロパティを組み合わせていく
一つ一つのプロパティを使えるのは当たり前として、
複数のプロパティをいかに組み合わせていくかが大事。
→ネット上にサンプルはいろいろあるから参考に。　

Box Modelは大事。
どのプロパティがどこまで反映されているかを知ることは重要。

filterなど、一部のブラウザのみで実装されているプロパティもたくさんある。
→ブラウザ依存となってしまうため、業務では利用できない？
→Chrome Web Storeなど、ブラウザを特定できれば利用価値あり。

WebGLを使った画像処理と3Dグラフィックス

OpenGL→OpenGL ES→WebGL

Chrome, Firefoxはサポートされているが、
それ以外のブラウザはこれから＋オプション扱い。
Android、iPhoneで利用できない。
→ただし、今のうちに学んでおいたほうが得。
また、Chrome Web Storeであれば、利用価値あり。

実装は大変。手続きがたくさん。
→DirectXプログラミングっぽい？
→昔、これを読んだのを思い出した。

DirectXゲームグラフィックスプログラミング Ver. 2.0

DirectXゲームグラフィックスプログラミング Ver. 2.0

→画面表示時にコンパイルが必要なのは、実行環境によってバイナリがことなるから？

画像や動画をテクスチャに貼れる
→マッシュアップとかで利用できる？

手続きのめんどくささは、ライブラリを利用しよう。
three.js - JavaScript 3D library の紹介。
うまく隠蔽されているので、比較的直感的に利用できる。

その他、いろいろなデモの紹介。

ネイティブアプリは更新が障壁となる。
Webなら、最新のアプリケーションを提供できる。
近い将来、WebGLがその役割の一端を担うであろう。

Webアプリケーションのオフライン対応

オフラインで動作するWebアプリケーション
スマホなど、ネットワーク環境が不安定な場面で力を発揮。
サーバ停止時にも動作可能。
キャッシュによって、ネットワーク遅延を回避し、高速動作

１．シンプルな構成
・コンテンツのキャッシュ→AppCache
・DBをブラウザ側に持つ→Web Storage

Application Cacheの利用方法
・manifestを作成
・htmlタグの属性にmanifestを追加

Application Cacheの特徴
・manifest属性を付与したHTMLは、自動的にキャッシュされる
・1つでも404などエラーがあると、全てがキャッシュされない
・キャッシュを変更するには、manifestの更新が必要（更新日時などをコメントで記載する）
・20〜30MBぐらいキャッシュできる
・更新直後は1つ前のバージョンが表示される（JSで再読み込みさせれる）

manifest生成ツールやバリデータツールを活用しよう。

Web Storage
・文字列の保存
・KVS
・localとsessionがある
　sessionは別タブなどと共有できない
・Same Origin Policyによってデータが保存される
　httpとhttpsでは別々に保存される
・容量は5MBぐらい
・個人情報などの機微データは保存しないほうがよい

Web SQL Database
・RDBMS
・Android, iPhoneなどでは利用可能
　IEは未実装
　→スマホ限定サイトではあり

Indexed DB
・JavaScriptオブジェクトを保存可能
・非SQL
・トランザクションを利用可能
・APIはまだ扱いづらい


２．データの同期
バックグラウンドプロセスでサーバ内DBと動機する
完全なデータ同期を行おうと思うと大変。
ある程度、仕様で諦める必要が出る（コストと相談）

利用するであろうAPI
・Shared worker
・ネットワーク情報を取得するAPI、イベント
　ただし、LANのみか、インターネットまでつながっているかは取得できない
　→とりあえず、リクエストを投げてみる？
　→LANのみ→インターネットに接続のイベントは取得できる？
・XHR2、WebSocket

Shared worker
　バックグラウンドでJSを動作
　メッセージ駆動

３．ファイルの保存
ファイル操作が可能
File APIs

DESIGN IT AND BUILD IT デザインしろ、コーディングをしろ

→英語を聞き取れないため、情報がたくさん欠落している気がする

現在の構図
designer vs coder

designer + coder = HYBRIDな人間が必要となってくる。

ハイブリッドである利点
・それぞれの仕事を理解することでコミュニケーションを円滑に進められる
・相手が必要としている形式などを理解することで、仕事を円滑に進められる
・両方を理解することでアイディアが生まれる
　技術的に実現可能なデザインを構築できる

デザイナーへ
・コードを学べ
　どういったものか知ることから始めよう
・技術を知ることで、効率的な開発ができる
・新たな発見・発想につながる

コーダへ
・ビジュアルに対して繊細になろう

JavaScriptのライブコーディング
内容は CreativeJS for Designers on Vimeo と殆ど同じ。
・キャンバスの塗りつぶしを透過色で行うことで、残像を表現できる
・パラメータを変えるだけで、まったく違う見え方になる

素晴らしいデザインがWeb上で閲覧できる。
Who will pay me to do this?→NO ONE. (yet)

個人的プロジェクトを完結させた人は少ない
・問題に直面する
・目指すものが高すぎる
・時間がない
↓
・小さなところから公開してみる
・改良を加えていく
・考え方を変えてみる（粒子の移動→アステロイドの移動→オンラインゲーム風アステロイド）

実際にやってみるところから始めてみよう
そしてシェアしよう

以下、聞きながらとったメモ

* CSS3で作成するインタラクティブアニメーション

・Webがプラットフォームになっていっている
　メトロ・車などのAPIが提供され始めている

・CSS3
　transform transition gradient regions filter
　SVG(XML)からの導入が多い
　　SVGは大きくなりすぎた。

・Connecting Dots
　複数のプロパティを組み合わせていく

box model→どのプロパティがどの要素に適用されるかが重要(margin, padding, border)
border
RGBa
　background-clip:padding-box(背景色の適用範囲)

transision
:after
:hover
→ナビゲーション（マウスの動きに追随する）

transform2d
filter(Chromeのみ)
ギャラリーの、ホバーされていない要素をグレイスケール

ふーろーてーと？
CSS4？色味を変更、アニメーションと組み合わせる

CSS4では親要素を指定できる？

CSSでJavaScriptを置き換えられる？
→//速度的にどうなの？


* WebGLを使った画像処理と3Dグラフィックス松井 健

OpenGL→OpenGL ES→WebGL

ブラウザサポート
・Chrome
・Firefox
・Safari（Option）
・Opera（次からOption）
・iPhone, Androidはこれから。

Chromeは対応しているので、Chrome Web Storeで出せばよい？

GPUを利用できる。
頂点シェーダー→ラスタライズ→フラグメントシェーダー
→//DirectXなどを勉強しておくと楽？

JavaScriptの頂点配列
↓
GLSL→頂点シェーダー
↓
ラスタライズ
↓
GLSL→フラグメントシェーダー


videoをテクスチャに貼ったりできる。


利用方法
Webだから？コンパイルが必要
→//環境がわからないから、表示のたびにコンパイルが必要となる？


WebGLは難しい？
めんどくさい
→ライブラリを利用して、効率良く開発しよう。
　ただし、裏で何が行われているかは知っておいたほうがよい

three.js
・3Dライブラリ
・直感的に操作できる


webgl grobe
・データビジュアライゼーション


更新の容易さなどを考えるとネイティブアプリから、
Webアプリへ移っていく可能性がある。
WebGLはそのときの有力な候補となる。


* Webアプリケーションのオフライン対応吉川徹

オフラインで動作する
キャッシュするので高速動作
UXの向上

１．シンプルな構成
・キャッシュさせる→AppCache
・DBをブラウザに持つ→Web Storage

Application Cahe
・manifestを作成
・htmlにmanifestを読み込む

・HTMLは自動的にキャッシュされる
・1つでも404などがあるとキャッシュされない
・ファイルの更新時にmanifestの更新が必要
・20〜30MBぐらいキャッシュできる
・更新直後は1つ前のバージョンが表示される（JSで再読み込みさせれる）

manifest生成ツールあり。
バリデータあり。


Web Storage
・文字列を保存できる
・KVS
・localStorage, sessionStorage
・オリジンごとにデータが保存される（Same Origin Policy）
・5MBぐらい
・機微データは保存しないほうがよい


Web SQL Database
・RDBMS
・モバイルでは利用可能
・IEとかは無理

indexedDB
・JavaScriptオブジェクトを保存可能
・非SQL
・トランザクションを利用可能
・APIが扱いづらい


２．データの同期
バックグラウンドプロセスでサーバDBと同期する

Shared worker
ネットワーク情報を取得するAPI、イベント
　（インターネットに接続されているかは不明）
XHR２、WebSocket

Network Information API
　ネットワーク速度、課金の有無を取得できる
　実装が追いついていない（依存する）

Shared Worker
　バックグラウンドでJSを動作させられる
　メッセージ駆動


３．ファイルの保存

File APIs
ブラウザ内のファイルシステム

HTML5 terminal

filer.js



* PIXELS, PEOPLE AND PLAYSeb Lee Delisle（セブ・リー・デリスル）


desiner vs coder

desiner + coder = HYBRIDが必要。

小さなオフィスで隣り合わせで開発する分には問題ない
大きなオフィスでは別フロアなどになっている

hybridity yourself

ハイブリッドである利点
・コミュニケーションを円滑に進められる
・形式の齟齬などが発生しづらい
・両方を理解することでアイディアが生まれる
　現実的なデザインが構築できる

デザイナーへ
　コードを学べ
　どういったものかを知ることから始めましょう
　テクノロジーを知ることで効率的な開発ができる
　新たな発見につながる
　Flashはよい導入になった

コーダーへ
　ビジュアルに大して繊細になる


コモド６４
　２行で幾何学模様が作成できる


JavaScript
　残像を透過背景色を重ねることで表現する
　パラメータを変えることで様々な見え方をする


Who will pay me to do this?
→NO ONE (yet)

個人的プロジェクトを完結させた人は少ない
→問題に直面する
　目指すものが高すぎる
　時間がない
↓
小さなところから公開してみる
→改良を加えていく
→考え方を変えてみる（particleの移動→アステロイドの移動）

実際にやってみるところから始めてみよう

PLAY
CREATE
SHARE