今日は日曜でしたが、JavaScript系の勉強会。
200名満員御礼のはずが、席に隙間がちらほら。。
あいにく小雨の天気だったのが影響したのでしょうか。
あ、もしかして、デング熱騒動で閉鎖中の新宿御苑が近かったからとか？？
あと残念ながら、ライントニングトークと懇親会は時間の都合で不参加でした。
タイトル
秋のJavascript祭り （2014.9.7）
主催
ITかあさん（松田千尋氏）？
会場
東京都新宿区四谷4丁目29 株式会社IDCフロンティア
ブラウザでできるアニメーションあれこれ
安藤 真衣子氏
- Twitter：@ampersand_xyz
- BLOG：http://wp-e.org/
- CSSでアニメーション
- jQuery.Deferred で callback地獄から救われてスッキリ書ける
- リクエストアニメーションフレーム？
- Transitionsモジュール
- transition-property, transition-duration, transition-timing-function, transition-delay
- Animationsモジュール
- キーフレームによる動きの定義、逆再生・再生回数の指定も可能
- webkit-animation-duration, ・・・（ベンダプレフィックスは適宜つけてあげる必要あり）
- jQueryとかで cssのプロパティを変えてあげると、JSでアニメーションが可能！？
- 終了検知には、CSS3のアニメーションイベントを使う！ $('hoge').bind('transitionend', function(e) {
- transitionend
- animationstart
- animationend
- animationiteration
- プロパティの分だけ、終了イベントが発生してしまうので注意！
- タイミングの調整だけ、JSでうまいことやればいいんじゃないか。
- まとめ「CSS3で要素が動かせて、JavaScriptで何か管理できるっぽい」
Google Material DesignをPolymerで表現しよう
阿部 正幸 さん（KDDIウェブコミュニケーションズ）
- URL : http://www.kddi-webcommunications.co.jp/
- BLOG：http://shared-blog.kddi-web.com/
- BLOG：http://www.kddi-webcommunications.co.jp/
- エバンジェリストとか CPIスタッフブログ とか
- Material Design
- Evernoteも採用
- 昔からある良いデザイン（紙媒体とか）
- Material design with Polymer
- Polymer
- JavaScript UIフレームワークで、Web Componentsをモダンブラウザ以外でも利用(Polyfill)できるようにしたライブラリ
- デモ
- コンポーネント単位での開発が可能
- 近い将来、Web ComponentsがWeb標準になるかも
D3.jsでのデータビジュアライゼーション
小林 由憲
- Twitter：@AsbyuKobayashi
- BLOG：http://iao.wktktravel.com/
- ちなみに、東京都の統計データはオープンデータではない！
- http://ticklecode.com/present/140907_js_autumn_festival_d3js/
のようなデモが D3.js 一本でできる
- 画面の描画はSVG（DOMでもできなくはないが、細かい描写するならやはりSVGで）
- BSDライセンス
- 使う場合は著作権表記が必要（どこに表記してもよい）
- Data (JSON, XML, CSV)
- データを入れ替えると、グラフの表示も変わる
- 理解に必要な基本要素
- 1. メソッドチェーン
- jQueryによく似ている
- 2. スケール（縮尺）
- 実データの分布を、実際の描画位置にマッピングする
- domain: 入力データ、range: 出力域
- 3. Dataメソッド
- 理解するまで学習コストがかかる
- 簡単なグラフなら、jqPlotプラグインや Google Charts API の方が早い
- 1つずつのデータに対して、演算ができるのが強み
JavaScriptと共に歩む
藤田 無憂氏
- Twitter @anticyborg
- Blog http://stackstock.net/
![Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)](http://ecx.images-amazon.com/images/I/41sODBgDDaL._SL160_.jpg "Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)")
Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
- 作者: 西畑一馬
- 出版社/メーカー: KADOKAWA / アスキー・メディアワークス
- 発売日: 2013/05/30
- メディア: Kindle版
- この商品を含むブログを見る
-
- プログラムの習得要素が少ない
- あとはガリガリ書く
- 次の壁：自分が次のステップとして参考にした本
- 開眼/JavaScript
- JavaScript 良いパーツによるベストプラクティス
- すべての人に知っておいてほしい JavaScriptの基本原則
- またガリガリ書く
- 次の壁：処理を分割しよう
- グローバル変数、モジュール化、ファイルの分割、concat自動化
- JavaScriptパターン − 優れたアプリケーションのための作法
JavaScriptパターン ―優れたアプリケーションのための作法
- 作者: Stoyan Stefanov,豊福剛
- 出版社/メーカー: オライリージャパン
- 発売日: 2011/02/16
- メディア: 大型本
- 購入: 22人 クリック: 907回
- この商品を含むブログ (77件) を見る
-
- グローバル変数 app を作る
- Grunt, Gulpのconcatで一ファイルにする
- 必要なタイミングで必要な書籍が必要
- いいからとにかく書け（「痩せたいなら運動しろ」と同じ）
- あと、とりあえず書こう
Node.js Socket.ioを最小勉強コストで今すぐリアルタイムチャットを作る
ITかあさん（松田 千尋氏）
- Twitter：@chihiro_kaasan
- Blog http://www.kaasan.info/
- ネタ元
- Get Started: Chat application (Socket.io本家)
http://socket.io/get-started/chat/
- 今年5月ごろに Socket.io 1.0 が発表された
- 使うのはこれだけ
- Nodeサーバ
- socket.io ver1.0
- expressモジュール
- jQuery
- Socket.io 1.0からは、バイナリデータのサポートで画像の送信もできる
- そろえるもの
yum install nodejs npm -enablerepo=remi npm install socket.io
- Socket.ioはクロスブラウザ（IE対応）
- 一方、wsモジュールはシンプルで元々バイナリ対応（だが、若干柔軟性に欠ける）
- socket.emit(), socket.on() だけ理解できればOK
- 1.0 から io.get(), io.set() が廃止になり、前段階不要に。すぐ通信しようぜ！の精神
famo.usをもう試したかい？
ライオン氏
- Twitter：@lion_man44
- Blog：http://amanattou44.github.io/amanattou44/
Famo.usはもう試したかい？ from lion-man
