「春のJavaScript祭」に参加してきました

タイトル

<a href="https://javascript-fes.doorkeeper.jp/events/22834">春のJavaScript祭　in GMO Yours</a>春のJavaScript祭 in GMO Yours - Javascript祭り | Doorkeeper　（2015.4.25）

主催

ITかあさん（@chihiro_kaasan）

会場

東京都渋谷区桜丘町26番1号　セルリアンタワー11階 GMO Yours

Twitter

#jsfes のツイート

なお、今回のイベントは、schoo でも生放送されていたようです。

<a href="https://schoo.jp/class/2284/">【Javascriptを愛する全ての人へ】春のJavaScript祭をスクーで生放送！ ITかあさん先生 - 無料動画学習｜schoo（スクー）</a>schoo.jp

schooさんの機材をちらっと見たのですが、おそらく ↓ のスイッチャーを使ってたっぽいです。10万円を切るスイッチャーということで、ちょっと前に話題になってたやつですよね。

Cerevo Live配信機能搭載HDビデオスイッチャー LiveWedge CDP-LW01A

出版社/メーカー: Cerevo
メディア: エレクトロニクス
この商品を含むブログを見る

ビデオカメラ 2台と音声？の 3チャンネルをミキシングして、iPad mini でスイッチング操作していたように見えました。音声は、Ustream側のセッティングで調整してたかもしれません。

WEBアプリ全自動テスト！Selenium×JSで業務徹底効率化

ITかあさん ( @chihiro_kaasan )

BLOG : http://kaasan.info/

かあさんのセッション始まりました！「Webアプリ全自動テスト！SeleniumxJSで業務徹底効率化」#jsfes #gmoyours pic.twitter.com/j3FJXDQBzA
— 齋木弘樹 Hiroki SAIKI (@hrksaiki) 2015, 4月 25

Selenium WebDriver
- ブラウザごとにDriverがある
アドオンのIDEもまだまだ現役
- ブラウザの操作を記憶
画面全体をスクロールしてキャプチャすることも可能
Selenium WebDriver x Node.js
- Selenium Serverを先に起動しておく
- コマンドをポチッとするだけ
レスポンシブのテストも可能

Bootstrap の便利なティップス紹介

阿部正幸さん

URL : http://www.kddi-webcommunications.co.jp/
BLOG : http://shared-blog.kddi-web.com/
BLOG : http://www.kddi-webcommunications.co.jp/

「Bootstrapにちょい足しアニメーション」KDDIの阿部さんのセッション始まりました！#jsfes #gmoyours pic.twitter.com/TXVywG6Qkf
— lunaluna web design (@lunaluna_dev) 2015, 4月 25

Demoサイト

Fixed Top Navbar Example for Bootstrap

結構自在にカスタマイズできる
現状、使わない理由が見つからない
事例もたくさん
- 大きな写真素材はプロにお任せしよう！
心地よいアニメーションも意外と重要
Bootstrapの基本的な使い方はCPIブログを見てね
1. scrollspy
- たった数行でスクロールを監視してアクティブなタブを切り替えることができる
2. Animate.css
- スタイルを足すだけでアニメーションを足すことができる
- Bootstrapで使われているjQueryのhover()メソッドを使うとよい
- スクロールの監視は Waypoint

Start React with Browserify

藤田無憂さん ( @anticyborg )

BLOG : http://stackstock.net/

無憂さんのReact+Browserifyの話！「俺スターターキット」の話はやめたそうでw #jsfes #gmoyours pic.twitter.com/N9IxOLgFWy
— lunaluna web design (@lunaluna_dev) 2015, 4月 25

サンプルコード

muyuu/searchKindle · GitHub

React
- Facebook星Viewフレームワーク
- コンポーネント志向
- VertualDOM
何が良いのか？
- DOM操作を単純化
- コンポーネント（パーツ）単位で設計しましょう
- 可読性高い、メンテしやすい
- Reactは「今のデータを元にDOMをレンダリングする」方式
1つのコンポーネントは機能もviewも一箇所に記述
小さなアプリにはそもそも向かない？
よく使われるrequireって？
- JSはモジュールの仕組みがない。けど、importしたい！
- Browserify
ファイル管理が便利になる（コンポーネントごとにまとめておく）
Watchifyでファイルを監視して、Browserifyのビルドを自動化

AWS LambdaとNode.jsで作るサーバ不要のイベントドリブンアプリケーション

佐々木きはるさん ( @bump_of_kiharu )

後半最初のセッション、佐々木さんの「AWS Lambdaとnode.jsで作るサーバ不要のイベントドリブンアプリケーション」始まりました！#jsfes #gmoyours pic.twitter.com/uQd3VdSCsm
— 齋木弘樹 Hiroki SAIKI (@hrksaiki) 2015, 4月 25

AWS Lambda
- 自動でスケールする、フルマネージドサービス
- S3上のファイルやDBの追加変更などのイベントを検知して動作する、イベントドリブン
  - イベントが発生していない待機時間は料金がかからない！
- 無料枠も。100万リクエスト/月まで
トリガーとなるイベントはAWSのみ
- Cognito, Kinesis, S3, SNS, DynamoDB
Lambdaファンクションは、Java, Node.js のみ
- コードは、zip形式でアップロードするか、コンソール上で直接記述