【プリチャン】ARコーデ管理アプリ作ってみた　その３　～データ連携編～

これは「プリッカソン Advent Calendar 2018」13日目の記事です。

前回のあらすじ

前々回の記事ではVuforiaによるコーデ認識、前回の記事では管理状況を保存するためにGoogle App Script(GAS)でGoogleスプレッドシートへの入力をできるようにした。
今回はGoogleスプレッドシートのデータをUnityに読み込ませてコーデ認識時に所持状態を表示するようにしてみる。

WebアプリケーションでJSON公開してみた

Unityとの連携のためにGASを使って前回作成したGoogleスプレッドシートを下記の記事を参考にWeb APIでJSON形式で取得できるようにする。

Googleスプレッドシートの内容をjsonデータとして利用する

function doGet(e) {  
  var id = e.parameter.sheetId;
  var data = getData(id, e.parameter.sheetName);
  
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}

//シートの内容をJSON化して返す
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[keys[index]] = item;
    });
    return obj;
  });
}

URLのパラメータをdoGet()で受け取り、スプレッドシートのシートの内容をJSON化して返すScript部分を抜粋した。
公開したWebアプリケーションは以下のURLからアクセスできる。

https://script.google.com/macros/s/{アプリケーションID}/exec

ここに以下のようにパラメータを加えたURLでアクセスすることで任意のスプレッドシート（共有設定が必要）の任意のシートの中身全てをJSON形式で取得できる。

https://script.google.com/macros/s/{アプリケーションID}/exec
?id={スプレッドシートID}&sheetName={シート名}

前回作成したシートを例にすると
スプレッドシートIDを1MtuxiWc2xij30EVCgyMmKOd8BqSHAISAY3lBrcbcmkシート名をSampleRY
とすることで以下のようなJSONが出力される。

シートをまとめてみた

Googleスプレッドシートのデータを取得する準備は整ったが、Webアプリケーションのページを表示するのにそれなりに時間がかかるので（Googleの仕様？調査不足で申し訳ない）必要な情報を別のシートに集約する。コーデのシートは段ごとに分離しておいたほうが（多分）使い勝手はいいし、データを１つに集めてからJSON出力することでアクセス時間も減らせる。

Googlスプレッドシートに新しくシートを作成し、以下の関数を入力する。

=Query({'PCH5'!A2:J67;'PCH4'!A2:J96;'SL5'!A2:J24})

Query関数は選択範囲をシートに反映させる関数である。
上記の例の場合は、「PCH5」シートのA2:J67の範囲、「PCH4」シートのA2:J96の範囲、「SL5」シートのA2:J24の範囲を1つのシートに表示する。

UnityでJSON取得してみた

いよいよUnityとGooglスプレッドシートを連携するときがやってきた。
以下のScriptでWebアプリケーションにアクセスして、ページに表示されたJSONをstringで取得する。

var api_url = "https://script.google.com/macros/s/{アプリケーションID}/exec";
var sheet_id = "{スプレッドシートID}";
var sheet_name = "シート名";

var json_text = "";//取得したJSONが入る

public void loadJSON()
{
    StartCoroutine( GetData(sheet_id,sheet_name) );
}

private IEnumerator GetData(string sheet_id, string sheetName)
{
    //WebアプリケーションのURLにパラメータを追加してGet
    var request = UnityWebRequest.Get(
                      string.Format("{0}?{1}&{2}",
                      api_url,
                      Param("sheetId", sheet_id),
                      Param("sheetName", sheetName)
                  )
    );

    yield return request.SendWebRequest();

    if (!request.isNetworkError)
    {
        json_text = request.downloadHandler.text;
    }
}

private string Param(string key, string param)
{
    return string.Format("{0}={1}", key, param);
}

UnityにはJsonUtilityというJSONを扱うAPIが用意されている。

JSON 形式にシリアライズ - Unity マニュアル

まず受け取るJSONに合わせたクラスを用意する。フィールド名はJSONとクラスを対応したものを作成する。クラスにはSerializable属性をつけておく。

//取得したjson_textの中身
[
  {
    "have": 1,
    "possession_num": 1,
    "id": "SL5-77",
    "rarity": "SR",
    "name1": "ウィッシュリボン",
    "name2": "アイドルブラウスL",
    "image_num": 70691,
    "rating": 0,
    "database_name": "SL5",
    "group_name": "5-L1"
  },
  {
    "have": 0,
    "possession_num": 0,
    "id": "SL5-78",
    "rarity": "SR",
    "name1": "ウィッシュリボン",
    "name2": "アイドルスカートL",
    "image_num": 70692,
    "rating": 0,
    "database_name": "SL5",
    "group_name": "5-L1"
  },
  ...
]

//全コーデのリスト
[Serializable]
public class ItemListJSON
{
    public List<ItemJSON> item_list;

    public ItemListJSON()
    {
        item_list = new List<ItemJSON>();
    }
}

//コーデ単位のクラス（フィールド名をJSONと合わせること）
[Serializable]
public class ItemJSON
{
    public bool have;
    public int possession_num;
    public string id;
    public string rarity;
    public string name1;
    public string name2;
    public int image_num;
    public int rating;
    public string database_name;
    public string group_name;
}

JSONのクラスが準備できたらJsonUtility.FromJsonでインスタンス化する。

//Listとして読み込ませるために文字列を追加
var json = "{ \"item_list\": " + json_text + "}";

//この1行でJSONの中身がぜんぶItemListJSON型に入る
var item_list = JsonUtility.FromJson<ItemListJSON>(json);

これでGoogleスプレッドシートからUnity内に所持データを持ってくることが完了したので、前々回の記事の最後に紹介した動画のように持っているコーデと持っていないコーデの判別が可能になった。

ついでにコーデ一覧も作ってみた

自分の所持状態を一覧で持っているのでコーデの一覧画面を作成する。Vuforiaのコーデ認識からそのまま移行できるようにUnityのuGUIを使用する。（Vuforiaで認識できなかったコーデの所持状態をアプリ内から更新するという目的も含んでいる）

取得したJSONを元にGrid Layout Group、Scroll Rect、Toggle Groupなどを組み合わせて画面を作成する。JSONを元に自動生成するScriptを作成したので取得先のJSONを変更すれば自動的に更新される（はずだったが一連の記事を作成するにあたってJSONの中身を調整していたら既存のアプリが動作しなくなったのでアプリ自体はプリティーリメイクすることになった）。

今回はこのあたりで。

Session Continues...　次回は「所持数更新などなど」です。