GASでスマブラのキャンパス内ランキングを作ってみた。

19470 ワード
Googleフォーム Googleスプレッドシート gas gas テキストリンク

こんにちは。スマブラの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
}

完成品