Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Twilio Syncで作ったみた
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Akihiro NAGASHIMA
August 31, 2016
Technology
570
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Twilio Syncで作ったみた
Akihiro NAGASHIMA
August 31, 2016
More Decks by Akihiro NAGASHIMA
See All by Akihiro NAGASHIMA
時代がReTechを求めている
eiei19
0
1.3k
JP/US/UK 3ヶ国展開を支える管理画面の話@管理画面チラ見せナイト#4
eiei19
0
110
Other Decks in Technology
See All in Technology
ScotSecure West 2026 - Glasgow
raybugg
0
150
AIエージェントを最高のパートナーに育てる方法|評価と判断軸を育てる5つのステップ
koichiaoki
1
160
Claude in Chrome 入門 / Introduction to Claude in Chrome
cielo1985
0
880
LLMに渡さなかった仕事
nanaism
0
1.3k
エージェントはローカル、検証はMicroVM — Lambda MicroVMsでつくるServerless CI
fujioka6789
3
670
「どのログを見ればいい?」 から始めた サーバーレス障害解析
y_waka1
1
120
登壇の自信を奪う3匹のオバケ / 3 Ghosts That Rob You of Your Confidence in Public Speaking
pauli
9
1.1k
技術的負債から考える、AI時代のエンジニアリング投資 — ビズリーチの技術的負債と向き合った経験から、変更し続けられるソフトウェアを考える/ technical-debt-con2026
visional_engineering_and_design
4
3.6k
C#コードの結合を可視化する Roslyn解析による設計改善と リファクタリング判断
dora56
0
330
Oracle Cloud Network Path Analyzerを試してみた/I Tried Out Oracle Cloud Network Path Analyzer
masakiokuda
1
110
顧客に向き合う開発組織へ。リアーキテクチャとフィーチャーチーム化で挑む組織改革
safie
0
2.3k
ADKで始める業務改善 - AIエージェント開発時の考えと設計
harappa80
2
260
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
57
14k
The Spectacular Lies of Maps
axbom
PRO
1
1k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
430
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Designing for humans not robots
tammielis
254
26k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
550
Navigating Weather and Climate Data
rabernat
0
530
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Transcript
Twilio Syncで作ってみた 永嶋 章弘
自己紹介 元: 職業エンジニア 現: 日曜エンジニア 永嶋 章弘(eiei19) プロデューサー@株式会社mercari Ruby on
Rails、Twilio、Swift 柴犬が好き
自己紹介 前職でTwilioを使って 「ぶっかくん」というサービスを作ってました 賃貸の空室状況を自動応答するサービス 月間10万本弱を自動で処理
自己紹介 ServiceSafariの中の人 結婚式の2週間前に婚約解消した男 としてBuzzfeedに取材される
Twilio Syncってなに? データをリアルタイムで同期できる しかもクロスプラットフォーム A B Data 更新 即座に通知
なぜ Twilio が Sync? Twilioを使っていると 状態を同期したい!! と思うことが実は結構ある
ちょっとサービス考えてみた • 電話による相談プラットフォーム • 先生と相談者がいる • 先生は自分が役に立てる相談内容を表明 • 相談者が先生に電話をかけて相談する
ちょっとサービス考えてみた 物理について 恋愛について 物理について 物理について 恋愛について 恋愛について 先生1 先生2 生徒
同期どうする問題 そこで Twilio Sync!! • ポーリング? • 即時じゃないしダサいよねー • Webソケット?
• 即時だけどサーバの用意とメンテが・・・ • IP Messaging? • やれなくないけどちょっと用途違うよね
DEMO http://bit.ly/sync_demo http://bit.ly/sync_demo_git ソースコード デモ
Syncの登場人物 Object (Doc,List,Map) Service User (Identity)
Syncを使う流れ 1. APIキーとシークレットの作成(管理画面から) 2. サービスインスタンスの作成(curlとかでやる) 3. 上記で得た情報を元にトークンを生成(サーバサイド) 4. 生成したトークンでクライアント初期化 identity
= params[:identity] endpoint_id = "Consultation:#{params[:identity]}:#{params[:device_id]}" token = Twilio::Util::AccessToken.new( ENV["TWILIO_ACCOUNT_SID"], ENV["TWILIO_API_KEY"], ENV["TWILIO_API_SECRET"], 3600, identity ) grant = Twilio::Util::AccessToken::SyncGrant.new grant.service_sid = ENV["TWILIO_SYNC_SERVICE_SID"] grant.endpoint_id = endpoint_id token.add_grant(grant) Identity: ユーザを特定する Endpoint: デバイス(画面)を特定する
IdentityとEndpoint Identity: eiei19 Endpoint: eiei19:mac Endpoint: eiei19:ipad 一意ならなんでもいい
Syncを使う流れ accessManager = new Twilio.AccessManager(token); syncClient = new Twilio.Sync.Client(accessManager); syncClient.map("consultation.members").then(function(map)
{ _syncMap = map; _consultant.changeStatus("待受中"); updateOnlineConsultantsView(); $.each(["itemUpdated", "itemAdded", "itemRemoved"], function(index, action) { _syncMap.on(action, function() { updateOnlineConsultantsView(); }); }); }); _syncMap.set(this.identity, {status: this.status, topic: this.topic});
Syncの登場人物 Object (Doc,List,Map) Service UserがObjectをSubscribeする(event設定) Object-User間に権限設定(read,write,manage) User (Identity)
DEMOアプリの問題点 Members(MapObject) { User1: {status: 待受中}, User2: {status: 通話中} }
権限はオブジェクト単位 UserにWrite権限をつけてしまうと、 User1はUser2の情報を更新できてしまう (KEY単位ではないため) 使い所や権限設定に注意が必要
DocumentはJSONなのになぜList,Mapがある? Index or Keyでの更新が可能 またそれらのeventもある (itemAdded, itemRemove, itemUpdated) 全体で意味を持つ(Ex.◯×ゲーム)=> Doc
個別に意味を持つ(Ex.DEMO)=> Map,List Document VS. List,Map
試してない機能 Webhook オブジェクトに特定のイベントが発生したとき 指定したURLをキックするようにできる Conflict検知 同時に更新が走ったときにそれを検知し 対応処理を書くことができる(クライアントSDK)