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

はるか先生
2018/11/20 09:56

さてこれで最終回です。今日は綺麗にサイトを仕上げましょう。前回までの講座はこちら。

前回までのプログラミングによる結果

前回まででALISからAPIを用いてデータを取得し、Google スプレッドシートに保存し、ユーザーのリクエストに従い、ウェブサイトで表示するところまでできました。

このままではあまり見やすいウェブ担っていないのでユーザーが見やすい形への加工をしていきましょう。

Bootstrap

ウェブサイトを装飾するにはCSSを用いて作成するのが一般的です。CSSを自分でフルに手書きをして作成することも可能ですが簡単なサイト作成の場合にはbootstrapというCSSのパッケージを使うことがよくあります。bootstrapは実はtwitter社が開発したパッケージです。

今回は楽に綺麗に作成するためにBootstrapを用いましょう。Bootstrapは外部から読み込む形で使います。

Bootstrapを使用する準備

こちらの正式サイトを参照しています。
Bootstrapスタートアップサイト

1) メインのHTMLに下記を<head> </head>内に追加してください。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

2) </body> の直前に下記を追加してください

<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>

3) 新規に js.htmlを作成し下記の記事を入力してください。これだけでいいです。読み込み用ですので。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Bootstrapで装飾する

Bootstrapでの装飾および今回はスマホで見やすいようにフォントも大きくして整形しました。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<base target="_top">
</head>
<body>
<br>
<h1><center>ALISコメントランキング</center></h1>
<P><center><font size ="10">
4時間ごと更新（1時,5時,9時,13時,17時,21時)<br>
</font>
</center>
<br>
//表の作成 tableの装飾はBootstrapで準備されいるものを採用
<div class="table-responsive">
<table class="table table-striped table-condensed">
<tbody>

//ここからJS
<?
var sheetidx ="シートID";
var webAdd;
var br = "<br>";
var eyecatch;

//シートのデータを読み込み myDataに格納
var myData = SpreadsheetApp.openById(sheetidx).getSheetByName('Ranking').getDataRange().getValues();

//各記事のデータを順番に処理していく
for(var i=0;i<myData.length;i++){

//コメント数が５以上のものだけ抽出する
if(myData[i][4] > 4){
webAdd = '<a href="https://alis.to/' + myData[i][2] + '/articles/' + myData[i][1] +'">' + myData[i][3] + '</a>';

//アイキャッチの画像を表示できるHTML表記へ整形
eyecatch ='<a href="https://alis.to/' + myData[i][2] + '/articles/' + myData[i][1] +'">' + '<img src="' + myData[i][7] + '" width="270px"></a>';

// 各行を記載していく。ユーザは理解できると踏んで
// 各行の意味については表示せずに作成
// 一行目アイキャッチの表示
// 二行目タイトル、筆者
// 三行目コメント数
output.append('<tr>');
output.append('<th class="align-middle">' + eyecatch + '</th>');
output.append('<th class="align-middle"><font size ="10">'+ webAdd + '<br>'+ myData[i][2]　+　'</font></th>');
output.append('<th class="align-middle"><font size ="10"><center>' + myData[i][4] + '</center></font></th>');
output.append('</tr>');
}
}
?>
</tbody>
</table>
</div>
<br><br><br>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>