カスタム ALISランキングサイトの作り方(4)

はるか先生
2018/11/19 09:01

さて(1）から順を追ってGoogle Apps Scriptでコードを書いてきました。ここまででデータをシートに格納してコメントの多い順にならびなおすことまでできています。

これまでの記事

さて今日はいよいよWebアプリに仕立て上げましょう。Googleのサービスの優れいているところは簡単にWebアプリを作れるところです。そしてもちろん無料。

html ファイルを作成する

表示するページの作成をしていきましょう。ここからは多少htmlの知識が必要になります。今後web アプリを作る上で必須の科目なのでぜひ勉強しましょう。 Progate で html & cssを受講すればある程度基礎は身に付くと思います

エディターの画面にて　ファイル → HTMLファイルを選択してください。選択するとファイル名を聞かれますので今回は AlisRankingとてください。HTMLの最低限のことが書かれたベージが生成されます。

下記のように記載しましょう。

コード.gs

function getAlisPopularArticle(){

var sheetidx ="1D0PQSWSZQpeuxklUTg8ix_MTMIq0K5rlqD8y8QZC9-c";
var mySpread = SpreadsheetApp.openById(sheetidx);
var mySheets = mySpread.getSheetByName("シート1");
var response = UrlFetchApp.fetch("https://alis.to/api/articles/popular?limit=100&page=1").getContentText();
var results = JSON.parse(response);
var count = results["Items"].length;
Logger.log(results);

for (i=0;i<count;i++){
str = mySheets.getRange(i+1, 1).setValue(i+1);
str = mySheets.getRange(i+1, 2).setValue(results["Items"][i]["article_id"]);
str = mySheets.getRange(i+1, 3).setValue(results["Items"][i]["user_id"]);
str = mySheets.getRange(i+1, 4).setValue(results["Items"][i]["title"]);
str = mySheets.getRange(i+1, 7).setValue(results["Items"][i]["topic"]);
str = mySheets.getRange(i+1, 8).setValue(results["Items"][i]["eye_catch_url"]);

var responseArticle = UrlFetchApp.fetch("https://alis.to/api/articles/" + results["Items"][i]["article_id"] + "/comments?limit=100").getContentText();
var resultsArticle = JSON.parse(responseArticle);
var commentCount =resultsArticle["Items"].length;
str = mySheets.getRange(i+1, 5).setValue(commentCount);
}
mySheets.sort(5,false);}
function doGet() {
var html = HtmlService.createTemplateFromFile("alisRanking");
return html.evaluate().setTitle("ALISコメントランキング");
}

alisRanking.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br>
<h1><center>ALISコメントランキング</center></h1>
<P>
<center>
<table border="1">
<thead>
<tr>
<th>タイトル</th>
<th>ライター</th>
<th>コメント数</th>
</tr>
</thead>
<tbody>
<?
var sheetidx ="スプレッドシートID";
var myData = SpreadsheetApp.openById(sheetidx).getSheetByName('シート1').getDataRange().getValues();
for(var i=0;i<myData.length;i++){
output.append('<tr>');
output.append('<th>' + myData[i][3] + '</th>');
output.append('<th>' + myData[i][2] + '</th>');
output.append('<th>' + myData[i][4] + '</th>');
output.append('</tr>');
}
?>
</tbody>
</table>
</center>
</body>