こんにちは。スマブラのCPUレベル8に勝てない弱小なっかのうです。
みなさん、スマブラやったことありますか？
簡単に言えば、任天堂のキャラクターがたくさん出てきて、格闘するゲームです。
それで、友人に「スマメイトみたいなのが欲しい」と言われた気がしたので、校内ランキングを作ってみました。
その１ Googleフォーム
今回は、Googleフォームで「ニックネーム」「撃墜数」「ミス数」「キャラ」を記録して、
スプレッドシートで整理し、GASでwebサイトにしていくという流れです。
Googleフォームは特に説明しなくても他に優良な記事があるので、割愛します。
その２ Googleスプレッドシート
次にスプレッドシートで、先ほどのデータを収集します。
こんな感じで、スプレッドにデータがあるので、
=SUMIF()関数（ある値に沿ったデータの数の合計）や=COUNTIF()関数（ある値に沿ったデータの数）を用いて集計します。
するとこんな感じのランキングが出ます。（最頻出キャラの出し方は難しいので割愛）
次に、１位から順番にしていきます。
=QUERY(範囲,"WHERE B!='' ORDER BY A asc")
という中にスクリプト（？）が組める関数があるので、
ORDER BY A asc（順位が書いてあるA行基準で整列）と書いて1位から整列させます。
その3 GASでWEBページ化
最後に完成したランキングをWEBページにします。
まず、index.htmlを作ります。
すると左側はこんな感じになります。
「コード.gs」と「index.html」がありますね。（たぶんファイル名日本語は危なかった気がするので、よいこのみんなは変更することをお勧めします。）
それではソースコードです。（CSSは割愛します）
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>横浜CPスマブラ部 公式サイト</title>
<style>
</style>
</head>
<body>
<header>
<div class="header">
<h1 class="topp">スマブラ部</h1><br>
</div>
</header>
<div id="main">
<div id="hana">
<h2 class="appeal">ランキング</h2><br>
<div id="ranking"></div>
</div>
<div id="hana">
<h2 class="appeal">キャラ使用数ランキング</h2><br>
<div id="cranking"></div>
</div>
</div>
<script>
google.script.run.withSuccessHandler(onSuccess).hokanman();
google.script.run.withSuccessHandler(onSuccess2).charaman();
function onSuccess(data){
document.getElementById('ranking').innerHTML = data;
console.log(data)
}
function onSuccess2(data){
document.getElementById('cranking').innerHTML = data;
console.log(data)
}
</script>
</body>
</html>
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('ランキング');
var sheet2 = ss.getSheetByName('キャラ');
function hokanman(){
var i = 2;
var rank = "a";///順位
var name = "";///名前
var win = 0;//撃墜
var lose = 0;//ミス
var play = 0;//戦闘回数
var lating = 0;//レーティング
var like = "";//好きなキャラ
var htmlcode = "";
var lastrank = sheet.getRange(1, 1).getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow();///一番下
while(i<=lastrank){
rank = sheet.getRange('A'+i);//A行から取得
name = sheet.getRange('B'+i);
win = sheet.getRange('C'+i);
lose = sheet.getRange('D'+i);
play = sheet.getRange('E'+i);
lating = sheet.getRange('F'+i);
like = sheet.getRange('I'+i);
htmlcode += "<div class='ranks' id='rank'"+rank.getValue()+"><h1>"+rank.getValue()+"</h1> <h2>"+name.getValue()+"</h2>("+like.getValue()+")<h3 class='yellow'>"+lating.getValue()+"</h3> <h4 class='play'>"+play.getValue()+"戦</h4><h4 class='win'>"+win.getValue()+"撃</h4><h4 class='lose'>"+lose.getValue()+"墜</h4></div>"
i++
}
return htmlcode
}
function charaman(){
var i = 2;
var rank = "a";
var name = "";
var win = 0;
var lose = 0;
var lating = 0;
var like = "";
var htmlcode = "";
var lastrank = sheet2.getRange(1,4).getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow();
while(i<=lastrank){
rank = sheet2.getRange('D'+i);
name = sheet2.getRange('E'+i);
win = sheet2.getRange('F'+i);
htmlcode += "<div class='ranks' id='rank'"+rank.getValue()+"><h1>"+rank.getValue()+"</h1> <h2>"+name.getValue()+"</h2> <h3 class='yellow'>"+win.getValue()+"</h3>回</div>"
i++
}
return htmlcode
}
完成品
