披露宴で公開したサービスのお話。 参加者がアップロードした写真をスクリーンにリアルタイムで表示して共有できるサービスの仕組みについてまとめています。

1. リアルタイム写真共有サービス
ぱふぉしぇ

2. • BaaS基盤開発 3年 サーバサイド
• 趣味
自己紹介

3. 過去にリリースした子たち
• Dockerfile for personium.io
Dockerfile of personium.io for Docker's automated build.
• gulp-personium
gulp 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.

4. ぱふぉしぇのコンセプト
パーティーに来たみんなが
とってくれた写真を
リアルタイムで共有したい
機能
・写真アップロード
・写真の表示・ダウンロード
・リアルタイムでスクリーンに表示

5. upload
display
とった写真をアップロードするだけで
会場のモニタに映し出される

6. リアルタイムスクリーン表示のデモ

7. ぱふぉしぇの仕組み

8. development
machine
AWSOAuth Provider
システム構成
Client

9. development
machine
AWSOAuth Provider
リアルタイムスクリーン表示の仕組み
Client

10. mobile server
monitor
リアルタイムスクリーン表示の仕組み
ソケット通信を利用して、写真のアップロードイベン
トを通知
queue
写真ID
notify event
emit
pop

11. development
machine
AWSOAuth Provider
性能のための工夫 その１
Client
画像への
アクセス方法

12. 画像アクセス（当初）
AWS
Client
アップロード中に一覧表示すると１０秒もかかる！！
たったの２多重にたえられない！！？
list pictures
upload picture

13. 画像アクセス（改）
AWS
Client
Nodejsはシングルプロセス・シングルスレッド
ノンブロッキングI/Oを採用したイベント駆動モデル
ブロッキング処理をしてしまうとみんな待たされる
静的コンテンツの取得
はNginxにまかせる

14. development
machine
AWSOAuth Provider
性能のための工夫 その2
Client
写真の
保存方法

15. 写真の保存方法（当初）
ダウンロード用にオリジナルの写真を保持しておきた
かった
が、遅い！！
（当然）
original

16. 写真の保存方法（改）
ダウンロード／拡大表示／サムネイル用のサイズを作
成し、用途に応じて使い分け
small
medium
large

17. ぱふぉしぇをささえる
ライブラリ

18. A Javascript library for building user
interfaces
• Virtual DOM
• One-way reactive data flow
• Server side rendering
おすすめ(入門)：http://qiita.com/advent-calendar/2014/reactjs

19. なんでReactにしたか
Flipboard の list view engine
60fps on the mobile web — Flipboard Engineering
by Michael Johnston ∙ February 10, 2015
The 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 にしたよ

20. なんでReactにしたか
コンポーネント志向
• HTML上のパーツを動きや見た目を含めてコンポー
ネントとして定義できる
• 同じパーツを使用したいときに複数の箇所に同じ
コードを書かなくてよい（再利用可能）
• さらにみんなでコンポーネントを共有できる
http://react-components.com/
http://react.rocks/

21. browserify
クライアントサイドの開発で require( module ) メ
ソッドをサポート。browserifyが依存関係をバンドル
してくれる。
• npmモジュールをそのまま使える
• クライアントサイドでもrequire
スタイルで書ける
• 使うの簡単

22. ぱふぉしぇ開発環境

23. SCM
CI service
development machine
開発環境
nodemon
• DBやNginxはdockerプロセスで起動→どこでも開発環境が再現可能
• CIにはプライベートでもフリーで利用できるwerckerを採用

24. 保存したら勝手に再起動＆リロード
js
js
nodemon
update
watch & build
watch & server restart & notify
reload
詳しい設定方法は こちら
課題：watchify使えてないので毎回フルコンパイル

25. 実際に使ってもらって

26. 感想
• 披露宴に参加しているみんなが披露宴をつくってく
れている感が楽しかった
• 友達視点ならではの写真・自分たちがいない間の写
真も見れて楽しい
• みんなが自分のアプリ使ってくれてすごく嬉しい
• 動作不具合があった方々 すみませんでしたm(_ _)m

27. 趣味プログラミングの
いいところ

28. “失敗したら
やり直せばいい”
使ったことないライブラリ/MW/手法
どんどん使える
検証レベルじゃわからない使用感もわかる

29. “必然的に人のコード
たくさん読む”
書籍学習も大事 人のコード読むのも大事
実運用に必要な知識が得られる

30. “自分がつくったアプリは
かわいい”

31. ご清聴
ありがとうございました