QA@IT

FacebookいいねボタンみたいなJavaScriptウィジェット(?)を作りたい

6008 PV

他サイトに指定されたソースコードを貼り付けるだけで動作するJavaScriptウィジェット(?)を作りたいです。
イメージとしてはFacebookのいいねボタンのようなものです。
即時関数を使って何かやるんだろうな、くらいしかわからずほとんどやり方がわからない状況です。

JavaScriptの学習のため、以下をシンプルなコードでやりたいと考えています。

【設定】
Webサービス:ウィジェットを提供する元のサイトです
他サイト:Webサービスより提供されたソースコードを貼り付けるだけで動的なパーツを画面に表示する(貼り付けるソースにはそのサイトのURLやIDなどユニークな値を付与する)
※jQueryは使わずにJavaScript、HTML、CSS、PHP、MySQLの技術にて実現する。

(1)Webサービスより提供されたソースコードを自サイト(他サイト)に貼り付ける
(2)画面に「いいねボタン」の画像と数値が出る
(3)「いいねボタン」を押すと、WebサービスのDBのカウント用テーブルに値が1加算される

※表示されるWebデザインは「Webサービス」側で設定できるものとする。

上記をやるために参考になる書籍、Webサイト、サンプルソースなどありましたらご教示いただければと思います。
よろしくお願いします。

回答

あなたがどの程度の知識をお持ちかわからないのでなんとも言えないので、
先に自分が何ができるか精査した方がいいと思います。

(とりあえずそのものずばりの本や記事は思い当たらないといいますか現状だと範囲が広すぎて…)

「いいねボタン」を押すと、WebサービスのDBのカウント用テーブルに値が1加算される

これをphpを使って HTML Form(要するにFormタグ)でmethod getで送信できるページはつくれますか?
できないのであればまずはphpなどサーバーサイドアプリケーションの入門書が必要という事になります。

できるのであればボタンではなくて、アンカータグ(A タグ)で処理できるようにしてみてください。

そこまでできればjavascriptでやることはElementの追加とClickイベントの処理になります。

特殊機能ではないので javascriptでElementの生成と追加の方法 を検索すれば見つけられると思います。
ごく簡単なサンプルとしては以下の様になります。jsは学習されるとのことなので説明はしません(Chromeでのみ確認)。

<script>
  function addElement(){
    var ele=document.createElement('span');
    ele.innerText="Hello, World!";
    document.getElementById('sample').appendChild(ele);
  }
</script>
<div id="sample" onclick="addElement()">click me</div>

別サイトに貼ってもらう時はXMLHttpRequestを生成してサーバーと通信するのですが、
最近は素のXMLHttpRequestを使っている本っていうのはなさそうな気がしますので、

以下のサイトなどが参考になるんじゃないでしょうか。

https://developer.mozilla.org/ja/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests


あとで問題があるとすれば「貼り付けるだけで」の部分といいますか、セキュリティの都合上表示しているページと違うサイトの情報をjavascriptで取ってくる場合に制約を受けます。
Cross-origin resource sharing というメカニズムによるものです。

これを回避する一つの回避策としてはjsonpがあります。

http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011?page=1

別の回避策としては Access-Control-Allow-Origin ヘッダを返す方法があります。
こちらの方が王道ではあると思います。このヘッダを返すのはphpなどサーバー側の仕事です。

http://qiita.com/kawaz/items/6a22c2c970c8d932a3a1

昔は iframeを使って埋め込まれたソーシャルボタンもあったような気がするんですが、(今もあるのかな?)、スマホだと扱いが特殊になるケースもあったりするので最近は減っているかもしれません。

編集 履歴 (0)

flied_onion様

ご回答いただきありがとうございます。
言葉が足らずすみません。
私の技術レベルですが、C言語2年、PHP2年程度のプログラマーで、PHP(フレームワーク可)・MySQL・HTML・CSS・JavaScript(jQuery・Ajax)を用いてWebアプリケーションを作れるくらいです。(サーバーサイドメイン)

Aタグの文字列をクリックした際に、Form(method="GET")タグにて別URLに送信する処理を書くことは可能です。
また、受け取り側(Webサービス)はGETパラメータを受け取って動作する処理をPHPで記載し、JSON形式でリターンする(Ajaxのサーバーサイドでの動きと同じイメージ)感じでしょうか?

それでセキュリティ的な観点で、他サイトからWebサービスへデータの取得・更新をする場合は、Webサーバー側が「Access-Control-Allow-Origin ヘッダを返す」必要があるということでしょうか?

上記であっていましたら、なんとなくのイメージはわいてきたのですが、「ウィジェットのデザインはWebサービス側が指定する」という点がまだイメージがわきません。
外部js(Webサービスが提供)でcreateElementでスタイルを指定していくような形でしょうか。

Cross-origin resource sharing、jsonp、Access-Control-Allow-Originなどのキーワードが知れて、大変助かりました。
実装する順序や内容、検索する際のキーワードなど実装に必要なアドバイスがありましたらご教示頂けますと幸いです。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。