akiyoko blog

akiyoko の IT技術系ブログです

「月刊ライトニングトーク2014年8月号: MEAN祭り」に参加してきました

今日は上野の LIG オフィスで、JS系の勉強会でした。
こんなところにオフィスがあるんだなぁ、と入ってみたら、ん? キッチンでカレー作ってるけど?? 聞けば、懇親会でカレーが振る舞われるとのこと。 ^o^
(遅くなったので、結局食べずに帰ることになりました。。残念)

主催

株式会社LIG

会場

株式会社LIG オフィス
東京都台東区東上野2−18−7 共同ビル 10F

Twitterハッシュタグ

#mlt201408



MEAN スタック と言えば、MongoDB + Express + AngularJS + Node.js を組み合わせた、今すごく勢いのある新定番フレームワーク、というのは知っているのですが、まだ本格的に試せておらず。

そういえば、Yeoman でも generator とかいろいろありますね。
Full-Stack JavaScript With MEAN And Yeoman


でも、今日の勉強会は MEAN スタック全体とか組み合わせについての話というよりは、それぞれ個別の話題という感じでした。

あと、私はフロントエンジニアではないのでいろいろ聞き間違いが多いかと思いますが、そのへんは気にせず読み飛ばしてくださいませ。
あくまでメモということで。





 

Node.jsでペンギンを飛ばす

(@hirokazu_goto_501さん LIG)

  • Chrome拡張機能を使ってペンギンを飛ばす
  • Chrome + JS + Arduino
    • Arduino UNO R3」を使ってる
    • 赤外線の反射を使ってる
    • chrome serial というのがあって、シリアル通信用のjsを書く
  • Google Chrome の拡張を作るには、manifest.json, icon画像, htmlファイル(background.js)


 

『はじめてのgulp (仮)』gulp.jsの連載始めます〜

(@cognitomさん OSS Cafe)


 

AngularJSでデータビュジュアライズ

(@ichizinさん マインドパレッド)

  • データ分析の集計画面を再構築中
  • D3.jsには、SVGの知識が必要?
    • ラッパーがある
    • XChart.js, C3.js
  • コードが長い! そこで、AngularJS
  • Directive機能を使ってコンポーネント化しよう
  • $watch, $watchCollection で監視
  • サンプル


 

カジュアルにリアクティブウェブを実現している話

(@nashibaoさん プレイド)

  • 簡単にウェブアプリをリアクティブにする方法
  • 特別な書き方をしなくても、テンプレートからフロント、サーバサイドのデータまでがバインディングされること
    • Meteor.js はリアクティブの代表?だったり
  • なぜやるのか?
    • とにかくコードが減る
    • リアルタイムでデータベースの変更を描画することができる(リアルタイム性)→管理画面にうれしい
  • 「プレイド」(B2B解析サービス)作ってる
  • rpc over socket.io, knockout.js(vue.js?) を使ってる
  • Knockout.js はどちらかというとバインディング用のライブラリ。薄い。パフォーマンスがいい
  • デモ
  • 認証、データ型(JSONで直接扱えないものを独自で)、mongoのtailingを使うかどうか、には気をつけるべし
  • サーバとはJSONでやり取り


 

簡単おいしいWebAPIのnpmサクサク包み揚げレシピ

(@pchwさん Tokyo Otaku Mode)

  • 色んな Web Service が RESTful API を公開している
    • Uber やメトロが REST APIを公開してたり
  • npm module を作って徳を上げよ
  • Web API のラッパーは簡単に作れる
    • superagent 使うと Web API を簡単にラップできる
    • それぞれのメソッドがチェーンできるのがいい感じだったり
  • endpointごとに塊にして param をメソッドにするといい感じに
  • 最近は、Yeoman の generator-coffee-module がお気に入り
  • こんな感じで作ってみた



 

Nodeでキュレーションアプリを運用してみて

(@novi_さん 白ヤギコーポレーション)

  • カメリオ

http://lp.kamel.io

  • ユーザ登録6万アカウント前後
  • クローラ、言語処理系、リコメンドは Python
  • アプリ向けAPIを Node.js + Express で(メール生成とか Push通知も Node.js)
  • 悪いところ
    • Node.js はシングルプロセスなので、後ろのサーバが止まったときに困る
    • Nodeプロセスはスーパーバイザにして落ちたら戻すようにしている(死活監視)
    • 全体設計の難しさ、等々
  • Node.js だと良い感じの ORM が無かったりするので、MySQL使ってる
  • 静的なランディングページは、Gulp + Jade + Stylusで作ってる
  • S3へのデプロイも、Gulpで簡単
  • Webサービス初期〜中期の頃は、Node.js をAPIサーバに使うのは良かったと思う。今後については要検討
  • Sketch



 

はじめてのExpress・socket.io

(@inureoさん nanapi)

  • IGNITION
  • 100人規模のイベントでクイズをやる
  • 平成教育委員会みたいに回答システムを作りたい
  • ゲームマスターとクライアントという構成のアプリとして、以下の二つがあった
    • マジカル☆ビンゴ COCORO
    • Quizar
  • あまり参考にならない。。
  • 選定理由は、ドットインストールにあるから!w
  • Express 4 とか Middleware とか
  • 基本はすぐに理解できるのが良かった
  • 悩みどころは、
    • Express 3の情報がヒットしすぎる(4 の情報が少ない)
    • 自由度が高すぎて、こう書くといいよというお作法が欲しい



 

ExpressのSNS連携モジュールPassportの翻訳した話

(@orga_chemさん ミクシィ)

  • Expressは簡単にルーティングが書ける便利なHTTP server
  • Middlewareで簡単に拡張できる(圧縮したいときはcompressionミドルウェア
  • 認証したいときは、passportミドルウェア
  • SSOができるのが、passportミドルウェア
  • 認証・認可を手軽に実装できるミドルウェア
    • 対応しているサービスが140以上
    • 複数SNSを使うなら、passportを使わないと厳しい
  • Passportはコードが非常に洗練されている(コードに魔術が少ない)
  • 日本語少ない。。英語ォ
  • 翻訳してみた!
  • この資料が超便利
    • Express+Passportでお手軽ユーザー認証
    • Social Authentication With Passport.js
  • Express 4 に未対応!!
    • プルリクがたくさん上がってるのでもうすぐ対応されるはず
    • これからも安心して使えるはず



 

Express / Socket.IO をスケールアウトしてみよう

(@nulltaskさん Uniba)


[SLIDE] https://gist.github.com/nulltask/89e6f36e194c951697a0


  • 小さい Expressアプリを use でマウントできる
  • express.Router() は Express 4以降。。
  • シングルスレッドだからパフォーマンス悪いんじゃないの?とよく聞かれるが、Cluster でマルチプロセス化できるよ
    • AWSでnginxを置かない方がパフォーマンスが高い場合もあった
  • Socket.IO はリアルタイムウェブアプリケーションフレームワーク
  • Linux系OSでファイル数の参照制限があるので、これも要注意
    • /etc/security/liimts.conf, /etc/sysconfig/init
  • Socket.IO + ELB の制約が結構やっかい

 

参考

で、最近買った Node.js の本。
解説が丁寧で読みやすいです。

今日の勉強会で出た「Express 3(4 ではなく)」や「Socket.IO」の解説もきっちり入っています。オススメ。