akiyoko blog

akiyoko の IT技術系ブログです

「秋のJavascript祭り」に参加してきました

今日は日曜でしたが、JavaScript系の勉強会。


200名満員御礼のはずが、席に隙間がちらほら。。
あいにく小雨の天気だったのが影響したのでしょうか。

あ、もしかして、デング熱騒動で閉鎖中の新宿御苑が近かったからとか??


あと残念ながら、ライントニングトークと懇親会は時間の都合で不参加でした。


タイトル

秋のJavascript祭り (2014.9.7)

主催

ITかあさん(松田千尋氏)?

会場

東京都新宿区四谷4丁目29 株式会社IDCフロンティア

ブラウザでできるアニメーションあれこれ

安藤 真衣子氏

  • 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ウェブコミュニケーションズ)


 


 

D3.jsでのデータビジュアライゼーション

小林 由憲


のようなデモが D3.js 一本でできる

  • 画面の描画はSVG(DOMでもできなくはないが、細かい描写するならやはりSVGで)
  • BSDライセンス
  • 使う場合は著作権表記が必要(どこに表記してもよい)
  • Data (JSON, XML, CSV)
  • データを入れ替えると、グラフの表示も変わる
  • 理解に必要な基本要素
  • 1. メソッドチェーン
  • 2. スケール(縮尺)
    • 実データの分布を、実際の描画位置にマッピングする
    • domain: 入力データ、range: 出力域
  • 3. Dataメソッド
  • 理解するまで学習コストがかかる
  • 簡単なグラフなら、jqPlotプラグインGoogle Charts API の方が早い
  • 1つずつのデータに対して、演算ができるのが強み


 

JavaScriptと共に歩む

藤田 無憂氏


  • 挫折しないJSの習得の流れ
  • そこで、初めに jQuery
    • Web制作者フレンドリーで、敷居が低い
  • Web制作の現場で使う jQueryデザイン入門

    • プログラムの習得要素が少ない
  • あとはガリガリ書く
  • 次の壁:自分が次のステップとして参考にした本
  • 開眼/JavaScript
  • JavaScript 良いパーツによるベストプラクティス
  • すべての人に知っておいてほしい JavaScriptの基本原則
  • またガリガリ書く
  • 次の壁:処理を分割しよう
  • JavaScriptパターン − 優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

  • 必要なタイミングで必要な書籍が必要
  • いいからとにかく書け(「痩せたいなら運動しろ」と同じ)
  • あと、とりあえず書こう


 

Node.js Socket.ioを最小勉強コストで今すぐリアルタイムチャットを作る

ITかあさん(松田 千尋氏)


  • ネタ元
  • 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をもう試したかい?

ライオン氏


  • famo.us(ファモ・ユーエス?)
  • HTML5アプリケーションを高速にきれいに表示するフレームワークらしい
  • IEはサポートが微妙らしい
  • Yeoman が generator-famous を出してくれてた!
  • grunt serve で画像がグルグル回ってるページが表示される
  • 現状使う必要はぶっちゃけ無い
    • 海外では流行ってる??
  • まだ、「書きやすい」までには至っていない