Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
オープングラフを導入しよう
Search
Katsuhiro Ogawa
August 29, 2012
Programming
3
7.5k
オープングラフを導入しよう
at Facebook Night Vol.9
Katsuhiro Ogawa
August 29, 2012
Tweet
Share
More Decks by Katsuhiro Ogawa
See All by Katsuhiro Ogawa
新規プロダクト開発に伴う既存マイクロサービスのリアーキテクティングとその後
fivestar
1
150
Goで学ぶSOLID原則
fivestar
0
410
メルカリ CSE チームの 歩みと取り組み / Steps and Tries in the CSE team for Mercari
fivestar
2
960
Go in Corporate Solutions Engineering
fivestar
0
2.6k
いつまでPHP 5.x使ってるの
fivestar
1
2k
PHP のドキュメントを読んで PHP のことをもっと知ろう
fivestar
1
3.3k
CrocosSecurityBundleを Symfony3.0に対応した話
fivestar
0
290
PHP BLT だけど HTML5 の コンテンツモデルのお話
fivestar
0
2.4k
THE NEW "PERFECT PHP" WILL BE COMING SOON
fivestar
0
8.1k
Other Decks in Programming
See All in Programming
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
6
3.4k
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
420
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
110
tparseでgo testの出力を見やすくする
utgwkk
2
220
LLMで複雑な検索条件アセットから脱却する!! 生成的検索インタフェースの設計論
po3rin
3
720
AtCoder Conference 2025「LLM時代のAHC」
imjk
2
470
これだけで丸わかり!LangChain v1.0 アップデートまとめ
os1ma
6
1.8k
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
240
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
2.5k
20 years of Symfony, what's next?
fabpot
2
360
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
680
生成AIを利用するだけでなく、投資できる組織へ
pospome
2
330
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
50
14k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
KATA
mclloyd
PRO
32
15k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Practical Orchestrator
shlominoach
190
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Automating Front-end Workflow
addyosmani
1371
200k
Building Applications with DynamoDB
mza
96
6.8k
The Pragmatic Product Professional
lauravandoore
37
7.1k
RailsConf 2023
tenderlove
30
1.3k
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/ ‣͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ まとめ