Webプログラミング演習
特別編
「いいね」ボタン
（英語では
Like）
Facebookで，他の人のコンテンツ（コメント・写真など）の
支持を表明するためのボタン
–クリックすると，自分の
Facebookのタイムラインに支持したことが
記録される（コメントを同時投稿することも可能）
⇒友達のニュースフィードに表示
–コンテンツ毎にクリックしたユーザ数がカウントされる
コンテンツに対するポジティブフィードバック
–友達へのお勧めも兼ねている
Facebookコンテンツ以外（一般のサイト）にも設置可能
–ウェブマーケティングにも利用されている
外部コンテンツの場合
Facebookサイトでユーザを一元管理しているので，訪問者のユーザ
ID取得やクリックユーザ数のカウントが可能
Facebookの「いいね」の仕組み
一般サイト
Facebookサイト
Facebookサイトで生成した 外部コンテンツ用のHTMLコード <iframe src="... ... /> 外部コンテンツ用 HTMLコード一般サイト
コンテンツに 埋込み <iframe src="... ... /> コンテンツに 埋込みこの演習での「いいね」の仕組み
訪問者ごとにサイトが異なる（別々のユーザ管理）
– ユーザ数のカウントはできない． – 訪問者が誰かはユーザに入力してもらうコンテンツ提供者のサイト
自サイトで生成した HTML，JavaScript訪問者のサイト
<div> <input type="..."/> </div>訪問者のサイト
ユーザID の入力 ユーザIDで 振り分け Basic 認証 Basic 認証 #!/usr/bin/perl use CGI; ... コメント投 稿用CGI #!/usr/bin/perl use CGI; ... コメント投 稿用CGI演習
like.png（ボタンの画像）を作成する
–サンプルはここ
like.jsを作成する
–内容はここ
–先頭の
myurl（個別エントリページ用PHP）, mytitle（ブログのタイト
ル）は各自のブログサイトのものに変更
「いいね」ボタンを配置する
PHP（index.php,
entry.php）を次ページのように変更する
% cd myblog
index.php, entry.phpの変更
head領域内でlike.jsを読み込む
<script type="text/javascript" src="like.js">//</script>
エントリー出力部分を変更する（各自のデザインに合わせ
て）
–エントリーに
link要素(<link>...</link>)が含まれていたら，aタグを
使ってリンクを生成する
–div要素を作り，その中に「いいね」ボタンを置く．クリックされた時に
は
like(this,
id
)が呼ばれるようにする
<div><input type="image" src="like.png" alt="いいね" onclick="like(this, $id)"/>
</div>
「いいね」ボタンを押した時に自分のエン
トリを追加する
CGI
like.cgiを作成
–内容はここ
–作成後の手続き（実行許可を与える）
% cd mng
% cp entries.xml entries.bak
(誤ってXMLファイルを壊してしまった時 のためのバックアップ)% chmod +x like.cgi
ブラウザによる確認
「いいね」ボタンの表示の確認
–自分のブログサイトの
index.php, entry.phpにアクセスすると，
「いいね」ボタンが表示される
–「いいね」ボタンをクリックした時に，ユーザ
IDとコメントを入力して
投稿するためのフォームが表示される
「いいね」ボタン をクリックブラウザによる確認
いいねエントリの追加の確認
–他の人のブログサイトにある「いいね」ボタンをクリックする
Webプログラミング演習のサイトでもＯＫ
–ユーザ
ID（自分の演習室ID，s185xxx）とコメントを入力して投稿
ユーザ認証を求めてきたら，
mngディレクトリにアクセスする時のID,
パスワードを入力（「
Perl/CGIによる・・・(その2)」で設定したもの）
–自分のブログサイトに新しいエントリが追加されたことを確認
like.jsの解説（１）
function like(btn, id){
var like = btn.parentNode;
var form = like.getElementsByTagName("form")[0]; if(!form){
form = document.createElement("form"); form.method = "POST";
form.onsubmit = like_submit;
form.innerHTML = "<input type='hidden' name='url' value='"+myurl +"?id="+id+"'/>";
form.innerHTML += "<input type='hidden' name='title' value='"+mytitle+"'/>"; form.innerHTML += "<div>ユーザID:<input type='text' name='uid'/></div>"; form.innerHTML += "<div>コメント:<input type='text' name='comment'/></div>"; form.innerHTML += "<input type='submit' value='投稿'/>";
like.appendChild(form); } form.style.display = "block"; } 入力用フォームの作成 （urlとtitleは隠し要素） 「いいね」ボタンがクリックされた時の処理（btnはクリックされたボタン，idは クリックされたエントリーの親要素(div)の取得 id属性） divの中にあるform要素を取得 form要素が存在しなければひとつ作成して，divに追加する form要素のmethodはPOST submitボタン（投稿）を押した時にはlike_submit関数を呼び出す form要素を表示する（隠れている場合があるため）
like.jsの解説（２）
function like_submit(evt){ var form = evt.target; var uid = form.uid.value;
var act = "http://webdesign.center.wakayama-u.ac.jp/~"+uid+"/myblog/mng/like.cgi"; form.action = act; form.style.display = "none"; form.submit(); return true; } form要素の取得 「投稿」ボタンがクリックされた時の処理 ユーザIDから投稿用cgiのURLを作成してformのアクションとする ユーザIDの取得 form要素を隠す 投稿用cgiを実行
like.cgiの解説（1）
regist.cgiと異なる部分
($sec,$min,$hour,$mday,$mon,$year) = localtime;
$str = sprintf("%04d.%02d.%02d %02d:%02d", ($year+1900), ($mon+1), $mday, $hour, $min);
$e=$doc->createElement("date"); $e->appendChild($doc->createTextNode($str)); $entry->appendChild($e); $str = decode("utf8","いいね（").param("title").decode("utf8","より）"); $e=$doc->createElement("title"); $e->appendChild($doc->createTextNode($str)); $entry->appendChild($e); $e=$doc->createElement("category"); $e->appendChild($doc->createTextNode(decode("utf8","いいね"))); $entry->appendChild($e); date要素の中身は， 現在日時とする title要素の中身は， 「いいね（ブログ名より）」 とする category要素の中身は， 「いいね」とする
like.cgiの解説（2）
$e=$doc->createElement("body"); $e->appendChild($doc->createTextNode(param("comment"))); $entry->appendChild($e); $e=$doc->createElement("link"); $e->appendChild($doc->createTextNode(param("url"))); $entry->appendChild($e); body要素の中身は 「いいね」で入力したコメント link要素を作成する 中身は「いいね」をクリックした 個別エントリーへのURLCookie
HTTPのやり取りの中で，
サーバからブラウザに
データ（名
前と文字列の組）を送る仕組み
–HTTPレスポンスのヘッダにCookieデータを含める
–ブラウザは，サーバ，名前，文字列をセットとして記録する（ユーザ
が許可している場合）
–以降，ブラウザがそのサーバのページにアクセスする際には，名
前と文字列の組がサーバに送信される．
サーバ側のセッション管理（同一ユーザからの連続アクセ
スの把握など）に利用されることが多い
注
：ブラウザ（あるいはユーザ）が自由にデータ文字列を変
更できる
–一般的には暗号化し，ユーザの改変が判別できるようにする
Cookieを使ってユーザIDを記録させる
「いいね」ボタンをクリックする度にユーザ
IDを入力するの
は面倒
一度いいねエントリを投稿したら，ユーザ
IDをCookieに記
録させる
–like.cgiの実行時にサーバからブラウザにCookieとしてユーザID情
報を送信する
–Cookieの名前はmybloguidとする
「いいね」ボタンがクリックされた時に，
CookieにユーザID
が記録されていたら，ユーザ
IDを入力済み・変更不可とす
る
演習（
Cookieの利用）
mng/like.cgiの修正
–
HTTPレスポンスのヘッダーにCookieを追加する
print header(-type=>"text/html; charset=UTF-8");
$cookie = cookie(-name=>'mybloguid', -value=>'s175xxx');
print header(-type=>"text/html; charset=UTF-8"
, -cookie=>$cookie
);
演習（
Cookieの利用）
like.jsの修正
–getCookie関数を追加する（内容はここ）
引数で指定された名前を持つCookieが記録されていたらそのデータ文字列を， 無ければ空文字列を返す関数 –like関数の中で，mybloguidという名前のCookieが空文字列でなけ
れば，ユーザ
IDが設定されていた場合の処理を行う
var uid = getCookie("mybloguid");
if(uid != ""){ form.uid.value = uid; form.uid.disabled = true; } form.style.display = "block"; 追加するコード
