せっかくなのでLanPlay用の記録ウェブサイトつくってみた

Javascript

サーモンラン記録サイト

ガンジー氏が運営されている以下のサイト、デザインもなかなかいい感じでひと目で記録が見れて割と重宝されている様子。

Salmon Run Records
有志によってまとめられているサーモンランの記録集です。

で、これはこれで便利なのですが、理論値を突き詰めたLanPlayの記録もどうせならまとめてしまおうと思ったわけです。

データについて

サーモンラン記録サイトはGoogle SpreadSheetにアクセスしてそのデータをとってきています。

ちなみにそのシートは以下から見れます。

For Salmon Run Records
Records registration date,stage id,record id,score,member 1,member 2,member 3,member 4,links,rotation id,stage (ref),record (ref),stage-record-score (ref),stag...

が、どうもなにやら複雑なAPIを使っているようで同じように取得するのは難しそうでした。

そうだ、GASをつかおう。

GASでSpreadSheetのデータを取得

今回取得したいのは上のシートのRecordsというシート(シートシートでややこしいが)なので、以下のコードで取得できます。

function getData(id, sheetName) {
  var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = item;
    });
    return obj;
  });
}

function doGet() {
  const id = "1v-OCTcqyj_mEgxityyfAWCfT2_2IueRrtsGItYPZCMU"
  var data = getData(id, 'Records');
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}

doGet()はブラウザでGETリクエストしたときに実行される関数で、idで指定されたSpreadsheetにアクセスして、そのうちRecordsのシートのデータを全部取得してくる仕組みです。

で、あとはそれをAPIとして叩けるようにすればいいわけで、完成したAPIがこちらになります。

Spreadsheet+GASのメリット

この仕組みを使えばいちいちJSONファイルを作成しなくても編集可能なSpreadsheetを公開しておけばリアルタイムで記録が更新されます。

めんどくさいJSON作成をGASが自動でやってくれるので、パソコンの知識がない人でもエクセル感覚でシートを更新すればいいだけなので楽というわけです。

まあ、悪意ある人が変な記録を載せるとそれが直ちに反映されるというデメリットはありますが、いくらでも巻き戻しは利くので大丈夫でしょう。

デメリット

思った以上にGASからの応答が遅いです。

定期的にデータを取得してキャッシュとしてどっかに保存しておきたいレベル。

誰かうまい仕組み考えてないのかな。

LanPlay記録サイトを立てる

ベースはNuxtで作成し、それをちまちま編集する感じです。

NuxtにはなんかバグがあってWindowsでfibersがどうしてもビルドできなかったのですが、最新のアップデート?で動くようになりました。

デフォルトだとCSSのプリプロセッサが使えないので、公式ドキュメントを参考に導入します。

CSS プリプロセッサを使うには?
Nuxt.js でプリプロセッサを使うには?

ググると多分いろんな解説記事がでてくるけど、これだけで済みます。変なファイル編集も要らないので簡易的なプロジェクトならこれ一択。

SpreadSheet+GAS

以下のシートを用意しました。GASのコードは上で紹介したものを利用するだけなので割愛。

LanPlay Records
LanPlay stage_id,water_level,event_type,golden_ikura_num,ikura_num,players,weapon_list,movie,seed 0,0,0,-1 0,0,4,-1 0,0,5,-1 0,0,6,-1 0,1,0,-1 0,1,1,-1 0,1,2,-...

GitHub

GitHub上にレポジトリを作成するだけ。あとはこれをNetilfyで変更チェックするように設定します。

tkgstrator/SalmonRun-Records
Contribute to tkgstrator/SalmonRun-Records development by creating an account on GitHub.

完成したページ

というわけで、Scssを扱うのは初めてだったのですが書いてみるとまあ意外と楽しかったです。

salmonrun-records
## Build Setup

レスポンシブデザインにしてみましたが、スマートフォンだとやはり横幅が狭くて表示が乱れやすいですね。

とにかく記録がスカスカなので適当に埋めていきたいと思います。

記事は以上。

コメント

タイトルとURLをコピーしました