静的なデータを取得してみよう

この章で学ぶこと

サーバからデータを取得してみます。

Codespace の起動

GitHub にログインした状態で https://github.com/codespaces にアクセスします。

Codespaces のページです。さきほど使っていた Codespace をクリックして起動します。

サーバの起動

• ターミナルで node term1-2-chapter01.js をサーバ起動
• ポートタブで今回のサーバ起動を公開
• シークレットウィンドウで今回のサーバが公開されているか確認します

こちらの手順を進めます。

✅ポイント

• 前回は public フォルダの中身を取ってくる仕組みだったが、今回は明確に特定のパスにアクセスすると特定の文言が返ってくる仕組みになっています。
• サーバー URL に /api/get/sample というパスを加わったときに、ブラウザや GET リクエストをすると GET OK! というテキストが取得できる
• サーバー URL に /api/post/sample というパスを加わったときに、POST リクエストをすると POST OK! というテキストが取得できる

今回の Unity シーンを起動

Project タブから Assets > Scenes を選択します。Scene-Term1-2-Chapter01 をダブルクリックして起動しましょう。

シーンの仕組みの解説

シーンの仕組みを解説します。

✅ポイント

• GET リクエストと POST リクエストを試すものです
• GET リクエストは CubeGet オブジェクトに CubeEvent03_01.cs スクリプトがコンポーネントとして加わっています
• POST リクエストは CubePost オブジェクトに CubeEvent03_02.cs スクリプトがコンポーネントとして加わっています

サーバーの起動をチェック

今回のサーバーの行のクリップボードマークをクリックして今回の URL をコピーしてブラウザで表示されるか確認しましょう。

このサーバー URL を覚えておきましょう。

ブラウザで GET リクエストでパスつきのアクセスを体験

今回は、サーバー側の以下のコードによって、先ほどアクセスしたサーバー URL に /api/get/sample というパスを加わったときに GET OK! というテキストが取得できる仕組みになっています。

また、この仕組みが動作すると、サーバーが返答すると同時に console.log('GET Response!'); というコードによってサーバー側のターミナルで GET Response! というログが残るのでアクセスしたことが分かりやすいです。

// /api/get/sample というパスで GET リクエストでアクセスすると GET OK! が取得できます
// GET リクエストなのでブラウザから見れます
app.get('/api/get/sample', (req, res) => {
  console.log('GET Response!');
  res.send('GET OK!')
});

ブラウザで、さきほどアクセスできた、サーバー URL に /api/get/sample というパスを加えてアクセスしてみましょう。

このように GET OK! とブラウザで表示されたら、正しくサーバーが動いています。

サーバー側でも GET リクエストが反応していることを体験

この仕組みが動作したのでサーバー側のターミナルで GET Response! というログが残ることも確認しましょう。

Unity で GET リクエストでパスつきのアクセスを体験

Unity シーンでは GET リクエストは CubeGet オブジェクトに Term1_2_Chapter01_CubeEvent01.cs スクリプトがコンポーネントとして加わっています。

Assets/Scripts/Term1_2_Chapter01_CubeEvent01.cs をエディタで開きます。

using UnityEngine;
using UnityEngine.EventSystems;

using System.Collections;       // IEnumerator のための参照
using UnityEngine.Networking;   // UnityWebRequest のための参照

public class Term1_2_Chapter01_CubeEvent01 : MonoBehaviour, IPointerClickHandler
{
    // アクセスする URL
    // サーバー URL + /api/get/sample
    string urlGitHub = "ここにサーバーURLを入れる";

    public void OnPointerClick(PointerEventData eventData)
    {
        // マウスクリックイベント
        // Debug.Log($"オブジェクト {this.name} がクリックされたよ！");

        // HTTP GET リクエストを非同期処理を待つためコルーチンとして呼び出す
        StartCoroutine("GetGitHubData");
    }

    // GET リクエストする本体
    IEnumerator GetGitHubData()
    {
        // HTTP リクエストする(GET メソッド) UnityWebRequest を呼び出し
        // アクセスする先は変数 urlGitHub で設定
        UnityWebRequest request = UnityWebRequest.Get(urlGitHub);

        // リクエスト開始
        yield return request.SendWebRequest();

        // 結果によって分岐
        switch (request.result)
        {
            case UnityWebRequest.Result.InProgress:
                Debug.Log("リクエスト中");
                break;

            case UnityWebRequest.Result.Success:
                Debug.Log("リクエスト成功");

                // コンソールに表示
                Debug.Log($"responseData: {request.downloadHandler.text}");

                break;
        }


    }
}

前章で習った仕組みと同じものです。

    // アクセスする URL
    // サーバー URL + /api/get/sample
    string urlGitHub = "ここにサーバーURLを入れる";

こちらを「ブラウザで GET リクエストでパスつきのリクエストを体験」でアクセスできた URL に変更して保存します。

Unity で GET リクエストを動かしてみる

Play ボタンをクリックします。

CubeGet をマウスでクリックしてみましょう。先ほど設定した URL にアクセスします。

Console で GET OK! というログが出てくれば成功です！

サーバー側の POST リクエストの仕組み

今回は、サーバー側の以下のコードによって、先ほどアクセスしたサーバー URL に /api/post/sample というパスを加わったときに POST OK! というテキストが取得できる仕組みになっています。

また、この仕組みが動作すると、サーバーが返答すると同時に console.log('POST Response!'); というコードによってサーバー側のターミナルで POST Response! というログが残るのでアクセスしたことが分かりやすいです。

// /api/post/sample というパスで POST リクエストでアクセスすると POST OK! が取得できます
app.post('/api/post/sample', (req, res) => {
  console.log('POST Response!');
  res.send('POST OK!')
});

ブラウザで POST リクエストでパスつきのアクセスができないことを体験

ブラウザでアクセスできるのは GET リクエストです。サーバー URL に /api/post/sample というパスを加えてアクセスしてみましょう。

このようにエラーになります。ただこれは「GET リクエストをブラウザでしてみたけど GET リクエストで返答できなかった」という意味で、正確には POST リクエストが失敗したわけではないです。

POST リクエストはこのようにブラウザでアクセスして簡単に見ることができない点で、セキュリティ的には少し安全です。

さらに、POST は GET とくらべてより多くのデータを仕込むこともできるので、ユーザーに紐づいたログインのやりとりなどを仕込めば、よりセキュリティを高めたやり取りができます。

Unity で POST リクエストでパスつきのアクセスを体験

ブラウザでは直接アクセスできませんでしたが、Unity では UnityWebRequest で POST リクエストを行うことができます。

Unity シーンでは POST リクエストは CubePost オブジェクトに Term1_2_Chapter01_CubeEvent02.cs スクリプトがコンポーネントとして加わっています。

Assets/Scripts/Term1_2_Chapter01_CubeEvent02.cs をエディタで開きます。

using UnityEngine;
using UnityEngine.EventSystems;

using System.Collections;       // IEnumerator のための参照
using UnityEngine.Networking;   // UnityWebRequest のための参照
using System.Text;              // Encoding のための参照

public class Term1_2_Chapter01_CubeEvent02 : MonoBehaviour, IPointerClickHandler
{
    // アクセスする URL
    // サーバー URL + /api/post/sample
    string urlGitHub = "ここにサーバーURLを入れる";

    public void OnPointerClick(PointerEventData eventData)
    {
        // マウスクリックイベント
        // Debug.Log($"オブジェクト {this.name} がクリックされたよ！");

        // HTTP リクエストを非同期処理を待つためコルーチンとして呼び出す
        StartCoroutine("PostGitHubData");
    }

    // リクエストする本体
    IEnumerator PostGitHubData()
    {
        // HTTP リクエストする(POST メソッド) UnityWebRequest を呼び出し
        // アクセスする先は変数 urlGitHub で設定
        UnityWebRequest request = new UnityWebRequest(urlGitHub, "POST");
        // 空ではやりとりできないので、今回は仮の dummy 文字を用意
        byte[] bodyRaw = Encoding.UTF8.GetBytes("dummy");
        // アップロード（Unity→サーバ）のハンドラを作成
        request.uploadHandler = new UploadHandlerRaw(bodyRaw);
        // ダウンロード（サーバ→Unity）のハンドラを作成
        request.downloadHandler = new DownloadHandlerBuffer();

        // リクエスト開始
        yield return request.SendWebRequest();

        // 結果によって分岐
        switch (request.result)
        {
            case UnityWebRequest.Result.InProgress:
                Debug.Log("リクエスト中");
                break;

            case UnityWebRequest.Result.Success:
                Debug.Log("リクエスト成功");

                // コンソールに表示
                Debug.Log($"responseData: {request.downloadHandler.text}");

                break;
        }


    }
}

このようなコードです。

✅ポイント

• using System.Text;
  • 今回の Encoding のための参照のために追加されています。
• UnityWebRequest request = new UnityWebRequest(urlGitHub, "POST");
  • HTTP リクエストする(POST メソッド) UnityWebRequest を呼び出し
  • アクセスする URL は変数 urlGitHub で設定
• byte[] bodyRaw = Encoding.UTF8.GetBytes("dummy");
  • 空ではやりとりできないので、今回は仮の dummy 文字を用意
• request.uploadHandler = new UploadHandlerRaw(bodyRaw);
  • アップロード（Unity→サーバ）のハンドラを作成
• request.downloadHandler = new DownloadHandlerBuffer();
  • ダウンロード（サーバ→Unity）のハンドラを作成
• リクエスト後の結果待ちの処理は GET リクエストの時と同じ

    // アクセスする URL
    // サーバー URL + /api/post/sample
    string urlGitHub = "ここにサーバーURLを入れる";

こちらをサーバー URL に /api/post/sample というパスを加えてアクセスしてみます。

わたしの仕事でも POST リクエストでアクセスするケースは多いのですが GET リクエストと違いブラウザで一旦確認できず、Unity 側で試すことになるところが POST リクエストの少しハマりやすいところです。

Unity で POST リクエストを動かしてみる

Play ボタンをクリックします。

CubePost をマウスでクリックしてみましょう。先ほど設定した URL にアクセスします。

Console で POST OK! というログが出てくれば成功です！

サーバー側でも POST リクエストが反応していることを体験

この仕組みが動作したのでサーバー側のターミナルで POST Response! というログが残ることも確認しましょう。

今回の Codespace の終了

今回の Codespace 終了しておきましょう。