joho2_like
改造のヒント：「いいね」を作る．
サーバ側のadd_chat2, read_chat2，クライアント側 Main2を改造して，書き込みに対して「いいね」ができるようにしてみましょう．
データファイルの仕様
- user/like.txt に，「いいね」された書き込みを記録します．
- それぞれの行には「チャットのファイル（user/chat2.txtなど）の何行目がいいねされたか（先頭は0行目）」を記録します．
例：
- user/chat2.txtがこうなっているとすると，先頭の山田さんの書き込みが０行目，田中さんの書き込みが１行目...となります．
山田 こんにちは 田中 こんばんは 長 ちゃんと書き込めるかな？
- user/like.txtがこうなっているとすると，０行目，１行目，０行目の順に「いいね」がされたことになり，結果として０行目の書き込みが２いいね，１行目の書き込みが１いいね，となります．
0 1 0
サーバ側
「いいね」の追加(add_like)
行数をあらわす数値を入力し，user/like.txtに追記します．
add_like（Python）
index=input()
f=open("user/like.txt","a")
f.write(index+"\n")
f.close()
print("Like added to",index)
「いいね」の読み出し(read_like)
user/like.txtの内容を表示します．
read_like（Python）
f=open("user/like.txt","r")
for i in f:
print(i,end="")
f.close()
これらのプログラムは，既存のadd_chat, read_chatと似ているので，演習問題にしてもいいかもしれません．
クライアント（ブラウザ）側
- Main2をコピーして新しいファイルを作ります．ここではMain_Likeとします．
準備：書き込みの表示を関数にする(Main_Like)
Main2では，read関数の中で名前や内容の表示を行っていますが，今から処理が増えるため，showPostという新しい関数を作ってreadから呼び出します．
Main2（JavaScript）
//ここまでのプログラムは省略
function read() {
var r=callServer(readUrl);
var lines=r.split("\n");
setText("hist","");
var i=0;//追加
for (var line of lines) {
var data=line.split("\t");
if (data.length<2) continue;
var name=data[0];
var content=data[1];
showPost(i,name,content);//変更
i+=1;//追加
}
}
//追加↓
function showPost(i, name, content) {
addText("hist",i+"番目の書き込み<br/>");
addText("hist","名前: "+name+"<br/>");
addText("hist","内容: "+content+"<br/>");
addText("hist","<hr/>\n");
}
「いいね」の取得(Main_Like)
Main_Like（JavaScript）
serverTop="https://run.eplang.jp/bitarrow/fs/pub/5d9fc1ce/";
readUrl=serverTop+"read_chat2.html";
addUrl=serverTop+"add_chat2.html";
readLikeUrl=serverTop+"read_like.html"; //追加：「いいね」取得プログラムのURL
onClick("write",write);
var likes={};//追加：「いいね」を格納するオブジェクト．
//likesにはキーに行番号，値にいいね数．0行目の書き込みに5いいねなら，like[0]==5
readLike();//追加：サーバから「いいね」を読み込む
read();
function write() {//略
}
function read() {//略
}
function showPost(i, name, content) {
addText("hist",i+"番目の書き込み<br/>");
addText("hist","名前: "+name+"<br/>");
addText("hist","内容: "+content+"<br/>");
//追加：「いいね」の表示
if (likes[i]) {
addText("hist",likes[i]+"いいね<br/>");
}
// 追加ここまで
addText("hist","<hr/>\n");
}
//以下すべて追加：
function readLike() {
likes={};//いいね数を初期化
var r=callServer(readLikeUrl);//サーバ側からlike.txtを取得
var lines=r.split("\n");//行で分割
for (var line of lines) {//行ごとに実行
//まだ「いいね」がない書き込みなら１をセット
if (!likes[line]) likes[line]=1;
//すでに「いいね」がある書き込みなら１増やす
else likes[line]++;
}
}
「いいね」の追加
Main_Like（JavaScript)
//readLikeUrlを初期化している場所のすぐ下に追加．
addLikeUrl=serverTop+"add_like.html";
//中略
function showPost(i, name, content) {
addText("hist",i+"番目の書き込み<br/>");
addText("hist","名前: "+name+"<br/>");
addText("hist","内容: "+content+"<br/>");
if (likes[i]) {
addText("hist",likes[i]+"いいね<br/>");
}
//追加：いいねボタン
newElement("button",{
parent:"hist",//ボタンを追加する場所
onClick: addLike, //クリックされたときに↓のaddLikeを呼ぶ
index:i,//何番目の書き込みかを識別
},"いいね！");//ボタンに書く文字
//---追加ここまで
addText("hist","<hr/>\n");
}
//以下すべて追加
function addLike(button) {
var index=getAttr(button, "index");//何番目の書き込みか取得
setText("result",index+"番目のに書き込みにいいね！");
callServer(addLikeUrl,index);//サーバ側のadd_likeを呼び出す
readLike();//いいね数再読み込み
read();//書き込み再表示
}
使用している命令の詳細→newElement
