昨今、非常に多くのWebサービスが提供されており、WebサイトとWebサービスを連携する機会がよくあるかと思います。
例えば、Twitter、Facebook、Instagramなど。
当然、各サービスはそれぞれ異なった実装方法があります。
そして当然、私もそういった実装を行うときはGoogle、Bingに知恵を借ります。
「～をすると、うまくいったよ。」
「そもそもそんなことするのはやめて、設計見直したほうがいいよ。」
ふむふむ。参考になります。ですが……
どのようにしてその答えに辿りついたのかいつも気になります。
経験？手法？閃き？メンター？
色々なブログで、実装方法や行き詰った箇所の紹介をよく見かけます。
しかし、どのように調べ、どのようにその方法にたどり着いたのか記載されている記事に、あまり出会うことがありません。
※私のネットサーフィン能力不足でありましたら誠に申し訳ございません。
そもそも、そういった内容が求められていないのかもしれませんが、私は気になります。
わがままをお許しください。
今回はそのような記事を書かせていただければと思います。
お題は「WebサイトにFacebookの［いいね！］ボタンを設置する」です。
これまで実際に［いいね！］ボタン設置の作業に携わったことがないことと、それほど大掛かりにならない作業であろうとの見立てです。
前置き
以下内容はほぼ経験談のため、明確な根拠に欠ける面があるかもしれません。
寛大なお心でご覧いただけると幸いです。
実装の進め方
1. ゴールを意識する
「［いいね！］ボタンをつけて、FacebookからWebサイトへの流入を増加させる」という要件を満たすため、「Webサイトに［いいね！］ボタンをつける」そして「それが正常に動作すれば完了」ということを強く意識します。
よーし。今後も似たような実装をするだろうし、使いまわせるように汎用性を持たせよう。
このような考えは一旦置いておきます。
経験上、最初から汎用性を持たせようとすると、理解が至っていない仕様と衝突する箇所が後になって発覚し、その帳尻合わせに時間がとられ、その挙句、次のようなコードがよくできました。
- 「Webサイトに［いいね！］ボタンをつけて、それが正常に動作すれば完了」にとって中途半端に冗長。
- 汎用性を持っているといえないほど、中途半端な設計。
2. 実装方法をイメージする
- ［いいね！］ボタンって同じようなデザインだから、何かコード埋め込むとあのデザインのボタンがでてくるんだろうな。
- cssとjs両方個別に埋め込むのは手間だし、カウント値の送信で動的な処理も行うから、外部のjavascriptになっているのかな。
- 2個3個もjavascript読み込むの大変だから1個のjavascriptでまとめられているのかな。
- そういば、［いいね！］ボタンってサイトを表示した時、一瞬遅延して表示されることがあったな。そうだそうだあれはjavascriptで非同期処理しているはず。
以上のように、なんとなく実装方法をイメージします。
後に触れますが、作業時にこういったイメージを行うようにしていると、経験がより充実し、別の外部サービス連携や自身が設計を行う時、少し気を楽にして臨めるようになっていくのかなと感じております。
以上、ここまでは特にコードを書かず、のびのびと考えを巡らします。
この記事を書いている時も実際にコードを書いたり調査しませんでした。
続いて具体的な調査・実装に移ります。
3. 簡単な調査をする
Googleで「いいねボタン 設置」と検索します。
結果で出てきたページをざっと読んでなんとなく概要を眺めます。
ここで気を付けるのが、各ページの更新日付。
あまりに古いものですと、すでに仕様が変わっていて使えない可能性があります。
更新日付については経験上次のような印象を持ちます。
- 今年（2016年）のページがあれば、概ねページに記載されている方法が使えそうだな。
- 今年のものがなく、昨年（2015年）のページが上位にきているなら、それは仕様が枯れてきていると期待できるかな。
- 2年前以前（2014年）のページが多数見受けられるなら、サービス自体が現在も使えるのかどうか不安だな。
簡単な調査をすると、次のことが分かりました。
- FacebookDeveloperというものがある。
- 設置はコードを埋め込む方法のよう。
4. きちんと調査をする
きちんと調査をするといっても入り口はGoogleやBingです。
Googleで「facebook いいねボタン」と検索します。
検索結果で公式のページが出てきました。
［Like Button - Social Plugins - Facebook Developers］
ページを見ると、［対象のURL］、［幅］、［レイアウト］、［ActionType］、これらを入力して［Get Code］を押すと埋め込みコードが出力されるようです。
思ったより簡単に実装方法にたどり着けました。
そしてここで、［2. 実装方法をイメージする］で考えていた実装方法と比較します。
- 外部javascriptでなくコードの埋め込みだったんだな。
- ボタンの位置にhtml要素も埋め込む必要があるんだな。
- パラメータはhtml要素側に持たせるのか。data-abc等。違うときの設計に使えそう。
自身の経験上、先に実装方法をイメージしておき実際の方法と比較する機会を増やすことで、別の外部サービス連携や自身が設計を行う時、
- Facebookのときはこう考えていて、ある程度的を得ていた。今回の別サービスもそういう感じかな。
- ～という点についてはまったく見当違いだったな。そういった設計にはしないんだな。
と、より一層勉強の機会になり、次の機会には少し余裕をもって作業に臨めるようになっていくのではないかと感じます。
あと合わせて［Like Button - Social Plugins - Facebook Developers］の左メニューに、
［FAQs］、［Deprecated］というページが目にとまったので確認いたしました。次の理由からです。
- ［FAQs」には［いいね！］ボタン設置に伴う何かしらの質問が書かれているかもしれない。
- ［Deprecated］に［いいね！］ボタン設置に関する記載があるなら、実装方法を変えなければいけないかもしれない。
各ページを開き、［Ctrl + F］でlikeでページ内検索します。
検索でひっかかった箇所を読んでいきます。
FAQsページを検索してみて
-
The Like, Share and Send Button available for Web, iOS and Android.
-> iOSやAndroidでも有効に機能するようです。 - iOS/Android: If you are using Social Plugins within a iOS or Android app, you will have to submit your integration of the Like button for review via the App Review tab in the App Dashboard.
->アプリ自体に組み込む場合だと、アプリのレビューが必要なようです。［1. ゴールを意識する］より、今回は関係ないので深く読みません。
Deprecatedページを見て
likeでページ内検索すると、LikeBoxがひっかかりました。
- the Like Box plugin is deprecated
->いいねボタンなくなるの！？でも世間でそんなに騒がれていないし……どうなんだろう。
続きを読みます。
- The Like Box is a special version of the Like Button designed only
for Facebook Pages. It allows admins to promote their Pages and embed
a simple feed of content from a Page into other sites.
->文面の［Like Button］にリンクがあるのでクリックします。
クリックすると、さきほどの［Like Button - Social Plugins - Facebook Developers］に移動しました。
なるほど、なくなるのは［Like "Box"］というものなのですね、［Like "Button"］ではない。早とちりでした。
ここが曖昧だと後に不安になりそうです。LikeBoxって何だろう。［like box］とGoogle検索します。
検索結果のページをいくつか見ると、［いいね！］ボタンとはまた別の部品ということが分かりました。
［1. ゴールを意識する］を踏まえ、関係ないのでこれ以上は深く読みません。
5. 規約を確認する
実装方法が分かり、うまく設置できても、それが規約上NGである可能性があります。
規約の確認は大変な作業です。しかし後に問題になる可能性が高いため、こつこつと公式のページで確認します。
実装作業よりも、この規約確認作業に時間がかかる場合があります。
実装方法を調べる前に規約を調べるという順序の方が順当かもしれません。
ですが私は、実装方法を見てから規約を調べることが多いです。
理由は、規約文書は量が多い場合もあり、ある程度「実装に関する箇所」が把握できていないと、確認すべき対象を見つけることが困難な場合があるからです。
規約を確認するため［like button policy］とGoogle検索します。
Webサービスだとlicenseより、policyで検索したほうが規約にたどり着きやすいように思います。
［プラットフォームポリシー - Platform Policy - Facebook for ...］
日本語のページがあったのですね。この時点で初めて気づきました。
ページを表示して「いいね」でページ内検索します。
-
ユーザーにインセンティブを提供してよい行動は、ユーザーによる提供アプリへのログイン、そのアプリのFacebookページに対する[いいね！]、そのアプリのFacebookページにおけるプロモーションへの参加、またはスポットへのチェックイン操作のみです。その他のアクションに対してインセンティブを提供してはなりません(2014年11月5日より、提供アプリのFacebookページを[いいね！]する行為に対するインセンティブ提供は禁止されます)。
->なるほど。 - iOS上またはAndroid上で[いいね！]ボタンを使用する場合、このボタンからいかなる情報も収集してはなりません。
->ふむふむ。
「1. ゴールを意識する」の要件を実現できない規約がないか確認を進めます。
もし要件に合わない場合、代替の方法をとれないか検討します。
設置の場所を変えれば問題ない？方法を変えれば問題ない？等。
場合によっては［いいね！］ボタンの設置を見送る判断も必要になります。
6. 実装する
［3. 簡単な調査をする］で調べた方法で実装します。
一番楽しい作業ですね。
［1. ゴールを意識する］を忘れないよう意識して実装を進めます。
7. 実装で行き詰る
実装中に行き詰る場合があります。
公式通りに実装しているのに動かない等。
今回の記事を作成しているときは幸いそういうケースに出会いませんでしたが、自身が行き詰ったとき次のような調べ方をしています。
- エラーコードやエラーメッセージが出力されるものであれば、その内容でGoogle検索。
->出力される内容で検索できると、答えにたどり着きやすいです。 - 「how to ...」、「like button is not display」など、英語でGoogle検索。
->意外にこういった言葉を付けるだけで、解決方法が見つかる場合が多いです。 - もう一度公式ページの説明を見る。
->そもそもの使い方を間違っていたので、Google検索しても同様の現象について情報を得られなかったという場合がありました。 - 今日はあきらめる。
->素直にあきらめて帰宅。帰りの電車の中でふと「こうやったらいいのかな？」と思いつくことが結構あります。
長々と大変失礼いたしました。
以上です。
もしかするとあまり効率のよい方法ではないかもしれませんが、私は以上のような流れでよく実装を行います。
Facebook問わず、サードパーティ製のAPI等を利用する場合も同様に。
皆様にとって少しでも参考になれば幸いです。