【増席】加速するシェアリングエコノミーの技術の裏側を公開！(React.js,RoR..) での登壇資料 http://spacemarket.connpass.com/event/28859/

1. スペースマーケットの管理画面を支える技術
2016年4月18日
Shinichiro Suzuki

2. 鈴木真一郎
取締役 / CTO
NTTインターネット（銀行系SE）
ヤフー（スポーツ／ネタりか）
RCO（クリエイター）
スマホ事業で起業
スペースマーケット共同創業

3. スペースマーケットのミッション

4. 世界中のあらゆるスペースを
簡単に貸し借り

5. 空きスペースを貸したい人と
借りたい人をマッチング
借りたい人 貸したい人

6. 利用の流れ
借りたい人をマッチング

9. 5,000スペース以上掲載

10. 今日お話すること

11. ”あらゆるスペースを
簡単に貸し借り”
することができる管理画面
を支える技術と試行錯誤

12. 貸し手、借り手、サービス（KPI管理）
それぞれに管理画面
リニューアル
借りたい人 貸したい人
リニューアル
管理画面 管理画面 管理画面

13. 貸し手の管理画面でできる事
• 掲載スペース情報のCRUD
• 予約カレンダーの管理／変更
• 予約の承認・キャンセル等
• 借り手とのやりとり（チャット機能）
• 決済（クレジットカード・銀行振込）
• 売上管理（予約数等のKPI管理も）

14. 多種多様なワークフローを
いかに”簡単”に
管理できるようにするか

15. ”簡単に管理” 主な要求仕様
• タブレットアプリのようなリッチな操作感
– SPA (シングルページアプリケーション)
– 即時保存
– メッセージング（リアルタイム）
• 多様な検索、ソートに対応
• 他サービスともデータ連携
– Googleカレンダー

16. Tech Stack

17. Frontend
Backend API
Infrastucture
Data Store

18. Frontend

19. SPA・即時保存 操作イメージ
非公開スライド

20. 編集系画面のデータフロー
Screen Mouse / Touch
Frontend
(React.js)
Component View Component View
Backend API

21. レンダリングまでの流れ
Nginx / Passenger
Rails
react-rails
React.js
on Babel / Browserify
一部jQuery

22. react-railsの恩恵
• jsのサーバサイドレンダリングが可能に
• SEO対策が必要になるようなサービスメイ
ン部分でもReactベースで共通開発できる
• Rails側とJS側で同じような処理を書かなき
ゃいけないようなことがなくなった
(Isomophic)

23. 課題感
• JSが増えたのでprecompileが遅くなる
• react-railsの中でメモリを結構食う(ExecJS)
• Railsに比べてサーバサイドレンダリングの
時にdebugがしづらい

24. メッセージング機能
非公開スライド

25. メッセージング / データフロー
screen 投稿
Frontend
Backend API
Web(React.js)iOS

26. Pusherで事足りた＆簡単
• Nodeやwebsocket-rails等の自前実装の可能
性も考えたが、実装コストから見合わせ。
• RubyもiOSアプリもSDKがあるので導入が圧
倒的に楽（それぞれ1時間ほどで実装）
• 最安有料プランで今のところ運用。

27. Backend API

28. Frontend
Backend API
Infrastucture
Data Store

29. APIは自前フレームワーク開発
Nginx / Passenger
Rails
air_representer
（自前のAPI用フレームワーク）

30. 多様な検索、ソートへの対応
• 予約期間（開始〜終了）
• 予約ステータス
• メッセージの内容（キーワード検索）
• 掲載スペース情報
• 利用者名、電話番号などなど

31. 管理画面でもElasticSearch

32. データフロー
Screen Mouse / Touch
Frontend (React.js)
Backend API
インデックス作成
検索結果

33. ES導入のきっかけ（余談）
• SEO対策でLPを作るため、通常の検索条件
と緯度経度を組み合わせた検索機能を実装す
る必要があった
• 使っているMySQLのバージョンでは緯度経
度検索のインデックスが貼れずパフォーマン
スに問題（WBS砲で露呈して落ちた）
• 上記要件でそれなりの速度が出せた

34. 仕様のちょっとした工夫
Screen Mouse / Touch
Frontend
(React.js)
Component View Component View
Resource API
ビジネスロジックに加えテキスト表示仕様
(i18n等)もここで集中管理した
{space: {
“state”: “tokyo”, “state_text”: “東京”
}}
フロントエンドは基本APIからのデータをそのまま出す（加
工しない）。アプリなどデバイスが増えても仕様管理が楽

35. Development / Deploy

36. Githubフロー&CI
• デザインも含めてGithubフローで開発
• werkerでCI
• コードレビュー、stagingで検証後にdeploy
（capistrano）

37. まとめ

38. リニューアルを振り返ると
• ReactのComponentがある程度出来上がると
再利用できて開発が早い
• それまでRails中心の開発からの移行で学習
コストはかかった（jsのというかReact）
• 一度メンバーが覚えてしまえば、FEの開発
は格段に早くなった印象

39. これからやりたいこと
• 開発スピードのアップのために
– webpackの導入
• インフラの効率化のために
– 自前ElasticSearchをAWSのにのっける
– RDSからAuroraに移行したい
– herokuを活用したい

40. サービスの成長に
まつわる課題を
一緒に解決してくれる
エンジニア募集中！！

41. スペースマーケットのビジョン

42. チャレンジする人を増やす。
世の中を面白くする。

43. 世の中を良い方向に
面白くするサービスを
一緒につくりましょう

44. ご静聴ありがとうございました