Unityでフォームを送信し よう コーディング課 guu

目次 • 今回やること • GASとは • システム全体の流れ • システムの実装方法

今回やること Unity Google スプレッドシート

役立て • ユーザの声が知りたい • 発見できなかったバグを見つけたい • スプレッドシートで見やすく • 送信日時も分かる

用意するもの • Unity Input Field(入力欄)、Button(送信ボタン)、スクリプト(1つで実装可能) • グーグルスプレッドシート GAS(Google Apps Script) • Googleアカウント

GASとは • Googleのサービスをスクリプトでいじれる 書き込み

スプレッドシートに GASを導入 1. Googleドライブを開く 2. 新規>その他>アプリを追加 でGoogle Apps Scriptを追加 3. 新規＞Googleスプレッド シートからスプレッドシー トを作成 4. ツールバーの拡張機能から Apps Scriptを選択

GASをAPIとして利用できるようにする 1. デプロイ＞新規デプ ロイを選択 2. 種類の選択>ウェブ アプリを選択 3. 次のユーザとして実 行を自分にする 4. アクセスできるユー ザを全員にする 5. デプロイ

GASの注意 • 最初に実行される関数が あっているか確認しよう • スクリプトの更新のたびに デプロイの更新が必要

システムの流れ(送信側) 1. 入力された文字の取得 2. フォームの作成 3. フォームに文字列を追加 4. ヘッダーの設定 5. フォームの送信 6. 返信を待機 7. 送信結果の表示 送信完了 or 失敗

システムの流れ(受信側) 1. 書き込むスプレッドシートの シートと行を取得 2. 受けとったリクエスト(手紙)か ら文字列取得 3. その文字列をシートに書き込 む 4. 正常に送信できた(or できな かった)というレスポンス(返 信)を送信者に送信 送信完了 or 失敗

システムの実装 (入力された文字列の取得) • Input Field(入力欄)から、文字列取得。 InputField.text.ToString()で取得 (using UnityEngine.UIを忘れない) • InputFieldのInspector>ContentType>Line Type をMulti Line Newlineにすると、InputField内で 改行できるようになる

システムの実装(フォームの作成) • フォーム スプレッドシートに文字列を送信するためのオブジェクト • 型(WWWForm) [key(string), value(string)]というデータのリスト 変数 string key= “value”; 値が欲しいときは、変数名を呼び出す

システムの実装(フォームの作成) • フォームに文字列を追加する WWWForm.AddField(“key”, “value”) 先頭から追加されていく

システムの実装(ヘッダーの作成) • 送信側と受信側の情報や決め事(ex:文字コード) • 基本的なことはすでに記載されている(ex:送信者が誰なのか) • request.SetRequestHeader(“項目”, “内容”)で設定 英語 日本語

システムの実装(設定するヘッダー) • Content-Type：application/x-www-form-urlencoded 送信する本文の型はURLエンコードされている • URLエンコード URLに日本語が含まれても、適切な記号に変換している • URLエンコード・デコードを体験できるサイト https://tech-unlimited.com/urlencode.html

システムの実装(設定するヘッダー) • クロスオリジンリソース共有(CORS) 受信するリクエストを制限 (知らない住所からの手紙は受け取らない) 分かりやすいサイト https://aws.amazon.com/jp/what-is/cross-origin-resource-sharing/

システムの実装(設定するヘッダー) • Access-Control-Allow-Origin：* 全員のリクエストを許可 • Access-Control-Allow-Origin：”URL”, “URL” 指定されたURLからのリクエストを許可 • Access-Control-Allow-Methods：POST(データの送信), GET(データの要求), OPTIONS(通信設定変更) 許可するリクエストのメソッド

システムの実装(ヘッダー設定の要求) • CORSのヘッダー設定は受信側で行う 受信側にやってほしくないリクエストがあるかも データベース API GET POST

システムの実装(ヘッダー設定の要求) • 送信側(SetRequestHeader) Origin： https:// + GASID + .script.googleusercontent.com GASID = スクリプトID

システムの実装(ヘッダー設定の要求) • 受信側 //CORS対策のヘッダー設定 var headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS’, //リクエストヘッダーの許可 ‘Access-Control-Allow-Headers’: ‘Content-Type, Authorization’ }; // リクエストがOPTIONSメソッドの場合は、CORS設定を返す if (e.requestMethod == 'OPTIONS') { return ContentService.createTextOutput('') .setMimeType(ContentService.MimeType.TEXT) .setHeaders(headers); }

リクエストの作成 • UnityWebRequest.Post(APIURL, フォーム) • APIURL=デプロイ>デプロイの管理>ウェブアプリの項目の URL

リクエストの送信・返信の待機 • リクエスト.SendWebRequest()で送信 • 返信は送信したリクエストのオブジェクトに保存 • 待機にはコルーチンを使う IEnumerator 関数名() yield returnリクエスト.SendWebRequest() StartCoroutine(関数名())

システムの流れ(書き込む場所を取得) • スプレッドシートのシー トを取得 SpreadsheetApp.openById (スプレッドシートのID) .getSheetByName (シートの名前); • 書き込む行を取得 sheet.getLastRow()+1; 最終行を取得 シートの名前 シートのID URLの”spreadsheets/d/”の 後から“/edit”の前まで

システムの流れ (送られた文字列の書き込み) • 関数をdoPost(e)に設定 eは送られたリクエスト、GetリクエストならdoGet(e) • 送られた文字列の取得 e.parameter.設定したキー名 • シートに書き込み シート名.getRange(行数, 列数).setValue(e.parameter.設定したキー名 )

システムの流れ(返信の作成・送信) //返信の作成 const output = ContentService.createTextOutput(); output.setMimeType(ContentService.MimeType.JSON); output.setContent(JSON.stringify({"message":"success"})); //返信の送信 return output;

システムの流れ(返信の表示） • リクエストの状態で判断 UnityWebRequest.ResultがSuccessなら送信成功している • リクエストの状態一覧 https://docs.unity3d.com/ja/2020.3/ScriptReference/Networking.Unit yWebRequest.Result.html

参考資料 https://developer.mozilla.org/en- US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers