Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
スペースマーケットの管理画面を支える技術
2016年4月18日
Shinichiro Suzuki
鈴木真一郎
取締役 / CTO
NTTインターネット(銀行系SE)
ヤフー(スポーツ/ネタりか)
RCO(クリエイター)
スマホ事業で起業
スペースマーケット共同創業
スペースマーケットのミッション
世界中のあらゆるスペースを
簡単に貸し借り
空きスペースを貸したい人と
借りたい人をマッチング
借りたい人 貸したい人
利用の流れ
借りたい人をマッチング
5,000スペース以上掲載
今日お話すること
”あらゆるスペースを
簡単に貸し借り”
することができる管理画面
を支える技術と試行錯誤
貸し手、借り手、サービス(KPI管理)
それぞれに管理画面
リニューアル
借りたい人 貸したい人
リニューアル
管理画面 管理画面 管理画面
貸し手の管理画面でできる事
• 掲載スペース情報のCRUD
• 予約カレンダーの管理/変更
• 予約の承認・キャンセル等
• 借り手とのやりとり(チャット機能)
• 決済(クレジットカード・銀行振込)
• 売上管理(予約数等のKPI管理も)
多種多様なワークフローを
いかに”簡単”に
管理できるようにするか
”簡単に管理” 主な要求仕様
• タブレットアプリのようなリッチな操作感
– SPA (シングルページアプリケーション)
– 即時保存
– メッセージング(リアルタイム)
• 多様な検索、ソートに対応
• 他サービスともデータ連携
– Goog...
Tech Stack
Frontend
Backend API
Infrastucture
Data Store
Frontend
SPA・即時保存 操作イメージ
非公開スライド
編集系画面のデータフロー
Screen Mouse / Touch
Frontend
(React.js)
Component View Component View
Backend API
レンダリングまでの流れ
Nginx / Passenger
Rails
react-rails
React.js
on Babel / Browserify
一部jQuery
react-railsの恩恵
• jsのサーバサイドレンダリングが可能に
• SEO対策が必要になるようなサービスメイ
ン部分でもReactベースで共通開発できる
• Rails側とJS側で同じような処理を書かなき
ゃいけないようなことがなくな...
課題感
• JSが増えたのでprecompileが遅くなる
• react-railsの中でメモリを結構食う(ExecJS)
• Railsに比べてサーバサイドレンダリングの
時にdebugがしづらい
メッセージング機能
非公開スライド
メッセージング / データフロー
screen 投稿
Frontend
Backend API
Web(React.js)iOS
Pusherで事足りた&簡単
• Nodeやwebsocket-rails等の自前実装の可能
性も考えたが、実装コストから見合わせ。
• RubyもiOSアプリもSDKがあるので導入が圧
倒的に楽(それぞれ1時間ほどで実装)
• 最安有料プラン...
Backend API
Frontend
Backend API
Infrastucture
Data Store
APIは自前フレームワーク開発
Nginx / Passenger
Rails
air_representer
(自前のAPI用フレームワーク)
多様な検索、ソートへの対応
• 予約期間(開始〜終了)
• 予約ステータス
• メッセージの内容(キーワード検索)
• 掲載スペース情報
• 利用者名、電話番号などなど
管理画面でもElasticSearch
データフロー
Screen Mouse / Touch
Frontend (React.js)
Backend API
インデックス作成
検索結果
ES導入のきっかけ(余談)
• SEO対策でLPを作るため、通常の検索条件
と緯度経度を組み合わせた検索機能を実装す
る必要があった
• 使っているMySQLのバージョンでは緯度経
度検索のインデックスが貼れずパフォーマン
スに問題(WBS砲で...
仕様のちょっとした工夫
Screen Mouse / Touch
Frontend
(React.js)
Component View Component View
Resource API
ビジネスロジックに加えテキスト表示仕様
(i18n等...
Development / Deploy
Githubフロー&CI
• デザインも含めてGithubフローで開発
• werkerでCI
• コードレビュー、stagingで検証後にdeploy
(capistrano)
まとめ
リニューアルを振り返ると
• ReactのComponentがある程度出来上がると
再利用できて開発が早い
• それまでRails中心の開発からの移行で学習
コストはかかった(jsのというかReact)
• 一度メンバーが覚えてしまえば、FEの...
これからやりたいこと
• 開発スピードのアップのために
– webpackの導入
• インフラの効率化のために
– 自前ElasticSearchをAWSのにのっける
– RDSからAuroraに移行したい
– herokuを活用したい
サービスの成長に
まつわる課題を
一緒に解決してくれる
エンジニア募集中!!
スペースマーケットのビジョン
チャレンジする人を増やす。
世の中を面白くする。
世の中を良い方向に
面白くするサービスを
一緒につくりましょう
ご静聴ありがとうございました
スペースマーケットの管理画面を支える技術
スペースマーケットの管理画面を支える技術
Upcoming SlideShare
Loading in …5
×

スペースマーケットの管理画面を支える技術

1,886 views

Published on

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

Published in: Engineering
  • Be the first to comment

スペースマーケットの管理画面を支える技術

  1. 1. スペースマーケットの管理画面を支える技術 2016年4月18日 Shinichiro Suzuki
  2. 2. 鈴木真一郎 取締役 / CTO NTTインターネット(銀行系SE) ヤフー(スポーツ/ネタりか) RCO(クリエイター) スマホ事業で起業 スペースマーケット共同創業
  3. 3. スペースマーケットのミッション
  4. 4. 世界中のあらゆるスペースを 簡単に貸し借り
  5. 5. 空きスペースを貸したい人と 借りたい人をマッチング 借りたい人 貸したい人
  6. 6. 利用の流れ 借りたい人をマッチング
  7. 7. 5,000スペース以上掲載
  8. 8. 今日お話すること
  9. 9. ”あらゆるスペースを 簡単に貸し借り” することができる管理画面 を支える技術と試行錯誤
  10. 10. 貸し手、借り手、サービス(KPI管理) それぞれに管理画面 リニューアル 借りたい人 貸したい人 リニューアル 管理画面 管理画面 管理画面
  11. 11. 貸し手の管理画面でできる事 • 掲載スペース情報のCRUD • 予約カレンダーの管理/変更 • 予約の承認・キャンセル等 • 借り手とのやりとり(チャット機能) • 決済(クレジットカード・銀行振込) • 売上管理(予約数等のKPI管理も)
  12. 12. 多種多様なワークフローを いかに”簡単”に 管理できるようにするか
  13. 13. ”簡単に管理” 主な要求仕様 • タブレットアプリのようなリッチな操作感 – SPA (シングルページアプリケーション) – 即時保存 – メッセージング(リアルタイム) • 多様な検索、ソートに対応 • 他サービスともデータ連携 – Googleカレンダー
  14. 14. Tech Stack
  15. 15. Frontend Backend API Infrastucture Data Store
  16. 16. Frontend
  17. 17. SPA・即時保存 操作イメージ 非公開スライド
  18. 18. 編集系画面のデータフロー Screen Mouse / Touch Frontend (React.js) Component View Component View Backend API
  19. 19. レンダリングまでの流れ Nginx / Passenger Rails react-rails React.js on Babel / Browserify 一部jQuery
  20. 20. react-railsの恩恵 • jsのサーバサイドレンダリングが可能に • SEO対策が必要になるようなサービスメイ ン部分でもReactベースで共通開発できる • Rails側とJS側で同じような処理を書かなき ゃいけないようなことがなくなった (Isomophic)
  21. 21. 課題感 • JSが増えたのでprecompileが遅くなる • react-railsの中でメモリを結構食う(ExecJS) • Railsに比べてサーバサイドレンダリングの 時にdebugがしづらい
  22. 22. メッセージング機能 非公開スライド
  23. 23. メッセージング / データフロー screen 投稿 Frontend Backend API Web(React.js)iOS
  24. 24. Pusherで事足りた&簡単 • Nodeやwebsocket-rails等の自前実装の可能 性も考えたが、実装コストから見合わせ。 • RubyもiOSアプリもSDKがあるので導入が圧 倒的に楽(それぞれ1時間ほどで実装) • 最安有料プランで今のところ運用。
  25. 25. Backend API
  26. 26. Frontend Backend API Infrastucture Data Store
  27. 27. APIは自前フレームワーク開発 Nginx / Passenger Rails air_representer (自前のAPI用フレームワーク)
  28. 28. 多様な検索、ソートへの対応 • 予約期間(開始〜終了) • 予約ステータス • メッセージの内容(キーワード検索) • 掲載スペース情報 • 利用者名、電話番号などなど
  29. 29. 管理画面でもElasticSearch
  30. 30. データフロー Screen Mouse / Touch Frontend (React.js) Backend API インデックス作成 検索結果
  31. 31. ES導入のきっかけ(余談) • SEO対策でLPを作るため、通常の検索条件 と緯度経度を組み合わせた検索機能を実装す る必要があった • 使っているMySQLのバージョンでは緯度経 度検索のインデックスが貼れずパフォーマン スに問題(WBS砲で露呈して落ちた) • 上記要件でそれなりの速度が出せた
  32. 32. 仕様のちょっとした工夫 Screen Mouse / Touch Frontend (React.js) Component View Component View Resource API ビジネスロジックに加えテキスト表示仕様 (i18n等)もここで集中管理した {space: { “state”: “tokyo”, “state_text”: “東京” }} フロントエンドは基本APIからのデータをそのまま出す(加 工しない)。アプリなどデバイスが増えても仕様管理が楽
  33. 33. Development / Deploy
  34. 34. Githubフロー&CI • デザインも含めてGithubフローで開発 • werkerでCI • コードレビュー、stagingで検証後にdeploy (capistrano)
  35. 35. まとめ
  36. 36. リニューアルを振り返ると • ReactのComponentがある程度出来上がると 再利用できて開発が早い • それまでRails中心の開発からの移行で学習 コストはかかった(jsのというかReact) • 一度メンバーが覚えてしまえば、FEの開発 は格段に早くなった印象
  37. 37. これからやりたいこと • 開発スピードのアップのために – webpackの導入 • インフラの効率化のために – 自前ElasticSearchをAWSのにのっける – RDSからAuroraに移行したい – herokuを活用したい
  38. 38. サービスの成長に まつわる課題を 一緒に解決してくれる エンジニア募集中!!
  39. 39. スペースマーケットのビジョン
  40. 40. チャレンジする人を増やす。 世の中を面白くする。
  41. 41. 世の中を良い方向に 面白くするサービスを 一緒につくりましょう
  42. 42. ご静聴ありがとうございました

×