Embed Size (px)
Citation preview
リアルタイム写真共有サービス
ぱふぉしぇ
• BaaS基盤開発 3年 サーバサイド
• 趣味
自己紹介
過去にリリースした子たち
• Dockerfile for personium.ioDockerfile of personium.io for Docker's automated build.
• gulp-personiumgulp plugin for personium.io client development.
• TwiPresso (src)TwiPresso brings you news shared from your twitter friends.This service corrects tweets from your twitter timeline which have URL link.
ぱふぉしぇのコンセプト
パーティーに来たみんながとってくれた写真をリアルタイムで共有したい
機能・写真アップロード・写真の表示・ダウンロード・リアルタイムでスクリーンに表示
upload
display
とった写真をアップロードするだけで 会場のモニタに映し出される
リアルタイムスクリーン表示のデモ
ぱふぉしぇの仕組み
development machine
AWSOAuth Provider
システム構成
Client
development machine
AWSOAuth Provider
リアルタイムスクリーン表示の仕組み
Client
mobile server
monitor
リアルタイムスクリーン表示の仕組み
ソケット通信を利用して、写真のアップロードイベントを通知
queue
写真ID
notify event
emit
pop
development machine
AWSOAuth Provider
性能のための工夫 その１
Client
画像への アクセス方法
画像アクセス（当初）AWS
Client
アップロード中に一覧表示すると１０秒もかかる！！たったの２多重にたえられない！！？
list pictures
upload picture
画像アクセス（改）AWS
Client
Nodejsはシングルプロセス・シングルスレッド ノンブロッキングI/Oを採用したイベント駆動モデル ブロッキング処理をしてしまうとみんな待たされる
静的コンテンツの取得はNginxにまかせる
development machine
AWSOAuth Provider
性能のための工夫 その2
Client
写真の 保存方法
写真の保存方法（当初）
ダウンロード用にオリジナルの写真を保持しておきたかった
が、遅い！！ （当然）
original
写真の保存方法（改）
ダウンロード／拡大表示／サムネイル用のサイズを作成し、用途に応じて使い分け
small
medium
large
ぱふぉしぇをささえる ライブラリ
A Javascript library for building user interfaces
• Virtual DOM
• One-way reactive data flow
• Server side rendering
おすすめ(入門)：http://qiita.com/advent-calendar/2014/reactjs
なんでReactにしたか ~ Flipboard の list view engine ~
60fps on the mobile web — Flipboard Engineeringby Michael Johnston ∙ February 10, 2015The DOM is too slow. It’s not just slow, it’s really slow.
You cannot build a 60fps scrolling list view with DOM.
Flipbord で使ってる Canvas layout engine を React
Components にしたよ
なんでReactにしたか ~ コンポーネント志向 ~
• HTML上のパーツを動きや見た目を含めてコンポーネントとして定義できる
• 同じパーツを使用したいときに複数の箇所に同じコードを書かなくてよい（再利用可能）
• さらにみんなでコンポーネントを共有できるhttp://react-components.com/ http://react.rocks/
browserify
クライアントサイドの開発で require(‘module’) メソッドをサポート。browserifyが依存関係をバンドルしてくれる。
• npmモジュールをそのまま使える
• クライアントサイドでもrequireスタイルで書ける
• 使うの簡単
ぱふぉしぇ開発環境
SCM
CI service
development machine
開発環境
nodemon
• DBやNginxはdockerプロセスで起動→どこでも開発環境が再現可能
• CIにはプライベートでもフリーで利用できるwerckerを採用
保存したら勝手に再起動＆リロード
js
js
nodemon
update
watch & build
watch & server restart & notify
reload
詳しい設定方法は こちら課題：watchify使えてないので毎回フルコンパイル
実際に使ってもらって
感想
• 披露宴に参加しているみんなが披露宴をつくってくれている感が楽しかった
• 友達視点ならではの写真・自分たちがいない間の写真も見れて楽しい
• みんなが自分のアプリ使ってくれてすごく嬉しい
• 動作不具合があった方々 すみませんでしたm(_ _)m
趣味プログラミングの いいところ
“失敗したら やり直せばいい”
使ったことないライブラリ/MW/手法どんどん使える
検証レベルじゃわからない使用感もわかる
“必然的に人のコード たくさん読む”
書籍学習も大事 人のコード読むのも大事
実運用に必要な知識が得られる
“自分がつくったアプリはかわいい”
ご清聴 ありがとうございました
