スプレッドシートを使った難易度表の管理

スプレッドシートを使って難易度表を管理する

難易度表のデータ部をスプレッドシートを用いて管理します

できること

GAS（Google Apps Script） を使ってスプレッドシートのデータをJSONで取得します

↓こんなシートを書いたら

↓これが取得できるURLを作れます

[
  {
    "level": "1",
    "title": "星の器～STAR OF ANDROMEDA (ANOTHER)",
    "artist": "ZUN (Arr.sun3)",
    "comment": "コメント1",
    "md5": "f8dcdfe070630bbb365323c662561a1a",
    "url_diff": "https://drive.google.com/..."
  },
  {
    "level": "20",
    "title": "Air -GOD-",
    "artist": "SHIKI / black train",
    "comment": "コメント2",
    "md5": "751738dea1169c5c39db935adfc9e85f",
    "url_diff": "https://drive.google.com/..."
  }
]

この方法を、難易度表のデータ部に用いることで、 難易度表のデータ部とスプレッドシートを自動的に同期することができます。

つまり、難易度表の更新作業をスプレッドシートのみで行うことができるようになります。 便利！すごい！！

手順

  1. スプレッドシートを作成する
  2. スクリプトを作成する
  3. ウェブアプリケーションとして公開する

スプレッドシートを作成する

スプレッドシートを作成し、難易度表のデータ部の情報を入力します。

このとき1行目には、データ部の json のオブジェクトキーを入力します。次期難易度表フォーマットの仕様の詳細はこちら。

2行目以降にデータを入力していきます。書式等は好きにいじっても大丈夫です。また、関数の使用も問題ありません。

シートのIDとシート名をメモする

シートのIDとシート名をメモしておきます

シートのURLが

https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/edit#gid=0000000000

ならxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxがシートのIDとなります

シート名はシート下部のタブの名前となります（デフォルトはシート1）

スクリプトを作成する

スプレッドシートのデータを json 形式で取得するスクリプトを GAS を用いて作成します。

メニューの [ツール] > [スクリプトエディタ...] からスクリプトエディタを開きます。

スクリプトエディタに下記のコードを入力します。

function getSheetAsObj(id, sheet_name) {
  var sheet = SpreadsheetApp.openById(id).getSheetByName(sheet_name);
  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[keys[index]] = String(item);
    });
    return obj;
  });
}

function doGet() {
  var obj = getSheetAsObj('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'シート1');
  return ContentService.createTextOutput(JSON.stringify(obj, null, 2)).setMimeType(ContentService.MimeType.JSON);
}

このとき 上記のコードの ('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'シート1') の部分を先程メモしたシートIDとシート名に変更してください

プロジェクトを適当な名前で保存します

ウェブアプリケーションとして公開する

作成したスクリプトをウェブアプリケーションとして公開します

このウェブアプリケーションにアクセスすることで外部からスプレッドシートのデータを json 形式で取得できるようになります

  1. メニューの [公開] > [ウェブアプリケーションとして導入...] を選ぶ

  2. 「プロジェクト バージョン」 を 「新規作成」 に設定　説明欄は適当に入力

  3. 「次のユーザーとしてアプリケーションを実行」 を 「自分」 に設定

  4. 「アプリケーションにアクセスできるユーザー」 を 「全員（匿名ユーザーを含む）」 に設定

  5. 「導入」をクリックして公開。

承認が必要になるので許可してください。

Googleの検閲がまだ通ってない場合、このアプリは確認されていませんと出ることがあります。 この場合は暫く時間を置き検閲が通るのを待つか、詳細から移動をクリックしてウェブアプリケーションに移動してください。

「現在のウェブアプリケーションのURL」にアクセスするとスプレッドシートのデータを json 形式で取得できます。

ファイルがありませんというエラー出る場合はスプレッドシートを一度開き直すとうまくいくと思います。

難易度表に登録する

難易度表の header.json 内の “data_url” の値に、作成したウェブアプリケーションの URL を設定します

難易度表の作成方法については以下のページが参考になるかもしれません

難易度表を設置するためのサイトのホスティングサービスには GitHub Pages がおすすめです

まとめ

難易度表のデータ部をスプレッドシートで管理する方法でした

この方法を用いることで以下のような利点があるかと思います

  • スプレッドシートなのでデータの編集が簡単に行える

  • シートの変更内容が即時 json に反映されるので json を作成しウェブサイトを更新する手間が省ける

  • スプレッドシートの機能を用いた共同編集や応用も可能

  • javascript の知識があれば、GAS を用いたより高度な応用も可能

身内間程度の表の管理などには便利なのではないでしょうか

コードの詳細

一応今回用いたコードについて書いておきます

  • doGet(e)

    • ウェブアプリケーションにGETリクエストが送られた際に実行される関数。
    • 返り値にHtmlOutputかTextOutputを設定。返した値が表示される。
    • doPost(e)を用いればPOSTリクエストの処理も可能。
    • 引数eでパラメーターの取得が可能。 例えば”…/exec?table=aaa”とパラメーターをつけてアクセスすると、e.parameterには{“table”: “aaa”}が入る。 １つのスプレッドシートから複数の難易度表を管理したいときに便利。
    • 詳細はこちら https://developers.google.com/apps-script/guides/web

  • SpreadsheetApp.openById(id).getSheetByName(sheet_name)

    • スプレッドシートを取得する。
    • openByIdでスプレッドシートを開き、getSheetByNameでシートを開いている。
    • ウェブアプリケーションとして実行するのでgetActiveSheet()等は使わずIDで指定している。

  • sheet.getDataRange().getValues()

    • getDataRangeでデータが存在するすべての範囲のRangeオブジェクトを返す。
    • getValuesで範囲内のデータを二次元配列で取得。

  • GASの詳しい詳細はこちら https://developers.google.com/apps-script/

Changed 2019-7-1