GASを使ってOverWatchの勝率の統計グラフの作成

# GASを使ってOverWatchの勝率の統計グラフの作成
このごろ[OverWatch](https://playoverwatch.com/)というゲームにはまってるみゅみゅです。
（しかも下手くそ、そして地雷）
OverWatchのプレイヤー情報を取り出せるAPIがunofficialとして公開されています。
[Unofficial OverWatch API](https://api.lootbox.eu/documentation)
（公式のプレイヤー情報検索をJSON形式に整形してくれるラッパーみたいな感じで動作するっぽいです）

こちらを利用してGASを使って毎日の勝率をスプレッドシートに記録して動的なグラフを生成していきたいと思います。

## Google スプレッドシートの準備
![42b577b7b2485aa2b11abdeb033a9666.png](https://qiita-image-store.s3.amazonaws.com/0/79067/8c4bfa9e-b287-34ce-601b-c0e41bf2977d.png)

名前はなんでも良いのですが例として【OverWatchDATA】という名前でスプレッドシートを作成しました。

## スクリプトの作成
![1.png](https://qiita-image-store.s3.amazonaws.com/0/79067/5f3bfb7d-695b-0d72-1b12-4b134731a0b6.png)
ツールからスクリプトエディタを起動して、スクリプトを作成します。

スクリプトの中身はこんな感じです。

```js
var user = "みゅみゅ";
var id = "1453";

var baseurl = "https://api.lootbox.eu/pc/kr/";
var profile = "/profile";

function myFunction() {
  
  var geturl = baseurl + user+"-"+id+profile;
  var data = getContent(geturl);
  if(data != "")
  {  
    var today = new Date();
    var datasheet =  var datasheet = SpreadsheetApp.getActiveSheet();
    var lastrow = datasheet.getLastRow() + 1;  
    datasheet.getRange(lastrow,1).setValue(today);
    datasheet.getRange(lastrow,2).setValue(data["data"]["games"].win_percentage);
  }  
}


function getContent(url) {
  var response = UrlFetchApp.fetch(url);  
  var dataAll = JSON.parse(response.getContentText());  
  if(dataAll["statusCode"] == "404")
  {
    return "";
  }else{  
    return dataAll;
  }
}

```
- userのところにOverWatchのユーザ名
- idのところにBattle.netのIDを入れてください

作成後、確認の為【myFunction】を一度実行してみます。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/79067/ef53b6f2-2ab0-f020-f1e4-712867784a06.png)

問題がなければスプレッドシートに１行日付と勝率が記載されます。
![87ffa65ec3d7a272825d332bdf7d40be.png](https://qiita-image-store.s3.amazonaws.com/0/79067/e087a65d-04de-6a89-55b4-f268fcac2b7d.png)

## グラフを作成

スプレッドシート内にグラフを作成しますが、１行だけだとスプレッドシート側でどんなグラフを作成したらよいかわからないので、何行か適当な日時を数字を入れます。

![597911393aa2cdff64bfc0c03b7edca1.png](https://qiita-image-store.s3.amazonaws.com/0/79067/f5d077bf-f456-c9f3-1241-2e469b4a79b2.png)
※適当に作ったデータ

【挿入】→【グラフ】でグラフエディタを起動します。
![4274e51fbd21c3ef0b1e3120773eaf99.png](https://qiita-image-store.s3.amazonaws.com/0/79067/b1278bde-ca6c-d18e-0ee0-f314bd6dfca8.png)

範囲はA1からB1000ぐらい（１日１行計算で３年ぐらいもつから良いでしょう）
グラフの種類は折れ線グラフを選択
カスタマイズは適当にタイトル等を記載します

そして挿入ボタンを押します。

## グラフを一般公開する

ファイルメニューから【ウェブに公開】を選択します。

![8bc3863d04830b5b4d0dbfd61f26db79.png](https://qiita-image-store.s3.amazonaws.com/0/79067/e374e9b7-c0e7-efab-1876-ee5b4e551c8a.png)

公開するものを先ほど作成したグラフ、データ形式を画像として公開します。
公開するとURLが表示されますので、それがグラフ情報となります。

![](https://docs.google.com/spreadsheets/d/1fjtei2A9ARuPZdrNcLR84e_PINCVOZUGv_7MMgbCEbU/pubchart?oid=2092711541&format=image)

こんな感じ（データが一個しかないときはグラフは変です）

## １日１回実行設定と後始末

作成したスクリプトを１日１回実行すれば日々の勝率のグラフが自動生成されます。
１日１回の実行はトリガーで設定します。

スクリプトエディタから【リソース】→【現在のプレジェクトのトリガー】を選択
【トリガーが設定されていません。今すぐ追加するにはここをクリックしてください。】と言われるのでクリックします。

![8ffebced927095305410842a7be8ba21.png](https://qiita-image-store.s3.amazonaws.com/0/79067/77a79832-75ea-c341-3e7c-a4d185dcff60.png)

こんな感じで、日付が変わったタイミングでスクリプトを１日１回実行します。

スプレッドシートを一度綺麗な状態にして（グラフ作成の為適当なデータを入れたから）一度作成したスクリプトを実行します。
※明日の朝からトリガーで実行なので今日の分のデータを収集


## 終わりに
ちょっとしたcron系の処理やデータ収集はさくっと作れるGASは便利かなぁっと。。。
そして集計を行って自分の下手さ加減を改めて認識しました。
こんな私でも一緒に遊んでくれる方募集です　＞＜