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

こんにちは。スマブラのCPUレベル8に勝てない弱小なっかのうです。

みなさん、**スマブラ**やったことありますか？

簡単に言えば、任天堂のキャラクターがたくさん出てきて、格闘するゲームです。


それで、友人に「[スマメイト](https://smashmate.net/)みたいなのが欲しい」と言われた気がしたので、校内ランキングを作ってみました。

##その１　Googleフォーム

今回は、Googleフォームで「ニックネーム」「撃墜数」「ミス数」「キャラ」を記録して、

スプレッドシートで整理し、GASでwebサイトにしていくという流れです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/8f4c27dc-9547-73a8-f021-38d3137a7a56.png)

Googleフォームは特に説明しなくても他に優良な記事があるので、割愛します。

##その２　Googleスプレッドシート

次にスプレッドシートで、先ほどのデータを収集します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/4c0870c1-ad81-e19a-34cf-559557cf6ae6.png)

こんな感じで、スプレッドにデータがあるので、

`=SUMIF()`関数（ある値に沿ったデータの数の合計）や`=COUNTIF()`関数（ある値に沿ったデータの数）を用いて集計します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/feb1a236-1eac-5089-710d-030c56831aad.png)

するとこんな感じのランキングが出ます。（最頻出キャラの出し方は難しいので割愛）

次に、１位から順番にしていきます。

`=QUERY(範囲,"WHERE B!='' ORDER BY A asc")`

という中にスクリプト（？）が組める関数があるので、
`ORDER BY A asc`（順位が書いてあるA行基準で整列）と書いて1位から整列させます。

##その3 GASでWEBページ化

最後に完成したランキングをWEBページにします。

まず、index.htmlを作ります。
すると左側はこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/ef12d647-1bab-d9d6-62a8-0601d52844b5.png)
「コード.gs」と「index.html」がありますね。（たぶんファイル名日本語は危なかった気がするので、よいこのみんなは変更することをお勧めします。）

それではソースコードです。（CSSは割愛します）

```html: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>
```

```js:コード.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
}

```
##完成品
<img width="1426" alt="スクリーンショット 2020-07-21 15.54.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/ef23a83a-e41b-efb6-9865-eca3404e088c.png">