Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
オープングラフを導入しよう
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Katsuhiro Ogawa
August 29, 2012
Programming
7.5k
3
Share
オープングラフを導入しよう
at Facebook Night Vol.9
Katsuhiro Ogawa
August 29, 2012
More Decks by Katsuhiro Ogawa
See All by Katsuhiro Ogawa
新規プロダクト開発に伴う既存マイクロサービスのリアーキテクティングとその後
fivestar
1
160
Goで学ぶSOLID原則
fivestar
0
440
メルカリ CSE チームの 歩みと取り組み / Steps and Tries in the CSE team for Mercari
fivestar
2
980
Go in Corporate Solutions Engineering
fivestar
0
2.6k
いつまでPHP 5.x使ってるの
fivestar
1
2k
PHP のドキュメントを読んで PHP のことをもっと知ろう
fivestar
1
3.4k
CrocosSecurityBundleを Symfony3.0に対応した話
fivestar
0
320
PHP BLT だけど HTML5 の コンテンツモデルのお話
fivestar
0
2.4k
THE NEW "PERFECT PHP" WILL BE COMING SOON
fivestar
0
8.2k
Other Decks in Programming
See All in Programming
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
shogogg
2
820
Go_College_最終発表資料__外部公開用_.pdf
xe_pc23
0
130
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
mackey0225
3
120
Don't Prompt Harder, Structure Better
kitasuke
0
420
Swift Concurrency Type System
inamiy
0
310
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
230
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
220
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
3
510
安いハードウェアでVulkan
fadis
1
920
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
290
SkillがSkillを生む:QA観点出しを自動化した
sontixyou
6
3.1k
VueエンジニアがReactを触って感じた_設計の違い
koukimiura
0
160
Featured
See All Featured
HDC tutorial
michielstock
1
610
How to build a perfect <img>
jonoalderson
1
5.4k
Accessibility Awareness
sabderemane
0
94
Ruling the World: When Life Gets Gamed
codingconduct
0
190
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
64
54k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
Navigating Weather and Climate Data
rabernat
0
160
Game over? The fight for quality and originality in the time of robots
wayneb77
1
160
How to Think Like a Performance Engineer
csswizardry
28
2.5k
Code Review Best Practice
trishagee
74
20k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.4k
Visualization
eitanlees
150
17k
Transcript
オープングラフを 導⼊入しよう 株式会社クロコス ⼩小川雄⼤大 https://www.facebook.com/katsuhiro.ogawa Facebook Night Vol.9
⾃自⼰己紹介 ‣খ༤େ / OGAWA Katsuhiro ‣ http://fvstr.jp/ ‣גࣜձࣾΫϩίε
None
Ϡϑʔͷ100ˋࢠձࣾʹͳΓ·ͨ͠ʂ
None
None
‣גࣜձࣾΫϩίε / Crocos Inc. ‣ http://crocos.co.jp/ ‣ https://www.facebook.com/Crocos.Inc ‣ೝఆϚʔέςΟϯάσϕϩούʔ
Crocosマーケティング ‣ ݒΞϓϦ ‣ ྦྷܭԠื 185ສ݅ ‣ ྦྷܭ։࠵ 6,000݅ ‣
ಉ࣌։࠵ 500݅ ‣ MAU 90,000~120,000 ‣ ίϯςετΞϓϦ ‣ ϓϨϛΞϜϓϥϯݶఆ NEW!!
本⽇日の内容 ‣Φʔϓϯάϥϑͱ ‣ΞΫγϣϯͱΦϒδΣΫτ ‣ΦʔϓϯάϥϑΛಋೖ͢Δ ‣ΦʔϓϯάϥϑΛެ։͢Δ ‣ΞΫγϣϯϦϯΫ
オープングラフとは ‣Ϣʔβ͕ΞϓϦ্Ͱߦ༷ͬͨʑͳ ߦಈΛγΣΞ͢ΔΈ ‣ http://developers.facebook.com/docs/ opengraph/
ΫϦοΫͯ͠ ΫʔϙϯΛऔಘ
ςΟοΧʔͳͲͰ γΣΞ
オブジェクトとアクション ‣ʮΫʔϙϯΛऔಘʯ ‣ ΦϒδΣΫτ Ϋʔϙϯ ‣ ΞΫγϣϯ औಘ ‣ ΞϓϦ͝ͱʹҙͰઃఆՄೳ
࣮ࡍӳޠ “get a coupon”
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ “get a coupon”
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ ‣ϑΥτίϯςετʹථ “vote for a photo”
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ ‣ϑΥτίϯςετʹථ ‣ݒͷԠืʁ “enter a present competition” ?
どんなシーンでオープングラフを 活⽤用できるか? ‣ΫʔϙϯΛऔಘ ‣ϑΥτίϯςετʹථ ‣ݒͷԠืʁ Ϣʔβ͕͍͕Γͦ͏ͳͷͰ ͍ͬͯͳ͍
導⼊入に必要なこと ‣ΦϒδΣΫτͱΞΫγϣϯͷఆٛ ‣ΞΫγϣϯͷൃߦॲཧͷ࣮ ‣Ϣʔβ͔ΒڐՄΛಘΔ ‣ΞΫγϣϯͷਃͱঝೝ
オブジェクトとアクションの定義 Φʔϓϯάϥϑ > Getting Started
オブジェクトとアクションの定義 ΞΫγϣϯͷઃఆ
オブジェクトとアクションの定義 ΦϒδΣΫτͷઃఆ
オブジェクトとアクションの定義 ελʔτΛԡͯ͠ొ
アクションのカスタマイズ ‣ςΩετͷΧελϚΠζ ‣ ݱࡏ/աڈɺ୯/ෳ ‣ લஔࢺͷࢦఆ (“vote for”) ‣ΧελϜϓϩύςΟ, etc...
オブジェクトの設定 ‣ΦϒδΣΫτύʔϚϦϯΫΛ࣋ ͍ͬͯͳ͚ΕͳΒͳ͍ ‣ ύʔϚϦϯΫ͕ΦϒδΣΫτͷ࣮ମΛද͢ ‣ http://coupon.crocos.jp/xyz ‣ΦϒδΣΫτͷใOGPͰઃఆ
アクションの発⾏行 ‣ ΞΫγϣϯͷURLʹPOSTϦΫΤετΛૹΔ ‣ /ϢʔβID/ΞϓϦͷ໊લۭؒ:ΞΫγϣϯ ‣ /me/crocos-coupon:get ‣ ΦϒδΣΫτΛύϥϝʔλʹࢦఆ ‣
ΦϒδΣΫτͷύʔϚϦϯΫ ‣ http://coupon.crocos.jp/xyz
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] );
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); ΞΫγϣϯͷൃߦ
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); POSTϝιου
実装(Using PHP-SDK) $facebook = new Facebook(...); $facebook->api( ‘/me/crocos-coupon:get’, ‘POST’, [
‘coupon’ => ‘http://coupon.crocos.jp/xyz’, ] ); ΦϒδΣΫτΛύϥϝʔλʹࢦఆ
ユーザから許可を得る ‣“publish_actions” ‣ ΞΫγϣϯͷൃߦʹඞཁͳݖݶ publish_actionsΛՃ͢ΔͱݱΕΔ
アクションの申請と承認 ‣ΞΫγϣϯFacebookʹਃͯ͠ ঝೝΛಘͳ͍ͱ։ൃऀҎ֎ʹެ ։͞Εͳ͍ ͡ΊʹGetCode͔ΒμΠΞϩάΛ։͍ͯ ॻ͔Ε͍ͯΔίϚϯυΛ࣮ߦ͓ͯ͘͠
アクションの申請と承認 ‣ΞΫγϣϯFacebookʹਃͯ͠ ঝೝΛಘͳ͍ͱ։ൃऀҎ֎ʹެ ։͞Εͳ͍ ૹ৴Λԡͯ͠ਃ͢Δ
アクションの申請と承認 ΞΫγϣϯͷൃߦखॱΛهड़ͯ͠ଓߦ
申請時のアドバイス ‣࣮ࡍʹFacebookͷਓ͕ΞΫηε͠ ͯ֬ೝͰ͖ΔڥΛ༻ҙ͓ͯ͘͠ ‣ ࣗͷ։ൃڥͰOK ‣ ඞͣಈ࡞֬ೝ͞ΕΔΘ͚Ͱͳ͍ʁ
申請時のアドバイス ‣ΞΫγϣϯ͕ൃޮ͞ΕΔ·Ͱͷख ॱΛ1͔Βॱ൪ʹهड़ ‣ ԡ͢ϘλϯͷςΩετॻ͘ͱ͍͍͔ ‣ ຊޠͰ௨Δ͔ෆ໌…
承認が下りなかったら ‣ཧ༝Λڭ͑ͯ͘ΕΔͷͰɺͯ͠ ͏1ਃ͢Δ ‣ ຊޠ͕ΞϨ͚ͩͲؾʹ͠ͳ͍
許可が下りたら ‣ͦͷͷ͏ͪʹฦ͕͘Δ ‣ΦʔϓϯάϥϑΛͬͯγΣΞ͠ ·͘Ζ͏ʂ
テキストの翻訳 ‣TranslationsΞϓϦ͔Βϝοηʔ δͷ༁͕Մೳ ‣ ϢʔβͷݴޠʹΑͬͯࣗಈతʹΓସΘΔ ‣70ϑϨʔζ/1ΞΫγϣϯ͘Β͍… ‣ਃ͕௨ͬͨ͋ͱʹΔͱ࣮֬
アクションリンク γΣΞ͞ΕͨΞΫγϣϯΛܦ༝ͯ͠ ࣗΞΫγϣϯΛߦ͏Έ
アクションリンクの設定 ͜͜ʹࢦఆͨ͠URLʹ Signed Request͕ඈΜͰ͘Δ
実装(Using PHP-SDK) $sr = $facebook->getSignedRequest(); $object = $sr['objects'][0]['url']; $action =
$sr[‘action_link’][‘type’]; if ($action === ‘crocos-coupon:get’) { // Ϋʔϙϯൃߦॲཧ } return [‘success’ => ‘true’];
‣Crocos Enginnering BlogΛݟ ͍ͯͩ͘͞ʂ ‣ http://engineering.crocos.jp/ ‣͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ まとめ