Unityでフォームを送信しよう

Transcript

1. Unityでフォームを送信し よう コーディング課 guu
2. 目次 • 今回やること • GASとは • システム全体の流れ • システムの実装方法
3. 今回やること Unity Google スプレッドシート
4. 役立て • ユーザの声が知りたい • 発見できなかったバグを見つけたい • スプレッドシートで見やすく • 送信日時も分かる
5. 用意するもの • Unity Input Field(入力欄)、Button(送信ボタン)、スクリプト(1つで実装可能) • グーグルスプレッドシート GAS(Google Apps Script) • Googleアカウント
6. GASとは • Googleのサービスをスクリプトでいじれる 書き込み
7. スプレッドシートに GASを導入 1. Googleドライブを開く 2. 新規>その他>アプリを追加 でGoogle Apps Scriptを追加 3. 新規＞Googleスプレッド シートからスプレッドシー トを作成 4. ツールバーの拡張機能から Apps Scriptを選択
8. GASをAPIとして利用できるようにする 1. デプロイ＞新規デプ ロイを選択 2. 種類の選択>ウェブ アプリを選択 3. 次のユーザとして実 行を自分にする 4. アクセスできるユー ザを全員にする 5. デプロイ
9. GASの注意 • 最初に実行される関数が あっているか確認しよう • スクリプトの更新のたびに デプロイの更新が必要
10. システムの流れ(送信側) 1. 入力された文字の取得 2. フォームの作成 3. フォームに文字列を追加 4. ヘッダーの設定 5. フォームの送信 6. 返信を待機 7. 送信結果の表示 送信完了 or 失敗
11. システムの流れ(受信側) 1. 書き込むスプレッドシートの シートと行を取得 2. 受けとったリクエスト(手紙)か ら文字列取得 3. その文字列をシートに書き込 む 4. 正常に送信できた(or できな かった)というレスポンス(返 信)を送信者に送信 送信完了 or 失敗
12. システムの実装 (入力された文字列の取得) • Input Field(入力欄)から、文字列取得。 InputField.text.ToString()で取得 (using UnityEngine.UIを忘れない) • InputFieldのInspector>ContentType>Line Type をMulti Line Newlineにすると、InputField内で 改行できるようになる
13. システムの実装(フォームの作成) • フォーム スプレッドシートに文字列を送信するためのオブジェクト • 型(WWWForm) [key(string), value(string)]というデータのリスト 変数 string key= “value”; 値が欲しいときは、変数名を呼び出す
14. システムの実装(フォームの作成) • フォームに文字列を追加する WWWForm.AddField(“key”, “value”) 先頭から追加されていく
15. システムの実装(ヘッダーの作成) • 送信側と受信側の情報や決め事(ex:文字コード) • 基本的なことはすでに記載されている(ex:送信者が誰なのか) • request.SetRequestHeader(“項目”, “内容”)で設定 英語 日本語
16. システムの実装(設定するヘッダー) • Content-Type：application/x-www-form-urlencoded 送信する本文の型はURLエンコードされている • URLエンコード URLに日本語が含まれても、適切な記号に変換している • URLエンコード・デコードを体験できるサイト https://tech-unlimited.com/urlencode.html
17. システムの実装(設定するヘッダー) • クロスオリジンリソース共有(CORS) 受信するリクエストを制限 (知らない住所からの手紙は受け取らない) 分かりやすいサイト https://aws.amazon.com/jp/what-is/cross-origin-resource-sharing/
18. システムの実装(設定するヘッダー) • Access-Control-Allow-Origin：* 全員のリクエストを許可 • Access-Control-Allow-Origin：”URL”, “URL” 指定されたURLからのリクエストを許可 • Access-Control-Allow-Methods：POST(データの送信), GET(データの要求), OPTIONS(通信設定変更) 許可するリクエストのメソッド
19. システムの実装(ヘッダー設定の要求) • CORSのヘッダー設定は受信側で行う 受信側にやってほしくないリクエストがあるかも データベース API GET POST
20. システムの実装(ヘッダー設定の要求) • 送信側(SetRequestHeader) Origin： https:// + GASID + .script.googleusercontent.com GASID = スクリプトID
21. システムの実装(ヘッダー設定の要求) • 受信側 //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); }
22. リクエストの作成 • UnityWebRequest.Post(APIURL, フォーム) • APIURL=デプロイ>デプロイの管理>ウェブアプリの項目の URL
23. リクエストの送信・返信の待機 • リクエスト.SendWebRequest()で送信 • 返信は送信したリクエストのオブジェクトに保存 • 待機にはコルーチンを使う IEnumerator 関数名() yield returnリクエスト.SendWebRequest() StartCoroutine(関数名())
24. システムの流れ(書き込む場所を取得) • スプレッドシートのシー トを取得 SpreadsheetApp.openById (スプレッドシートのID) .getSheetByName (シートの名前); • 書き込む行を取得 sheet.getLastRow()+1; 最終行を取得 シートの名前 シートのID URLの”spreadsheets/d/”の 後から“/edit”の前まで
25. システムの流れ (送られた文字列の書き込み) • 関数をdoPost(e)に設定 eは送られたリクエスト、GetリクエストならdoGet(e) • 送られた文字列の取得 e.parameter.設定したキー名 • シートに書き込み シート名.getRange(行数, 列数).setValue(e.parameter.設定したキー名 )
26. システムの流れ(返信の作成・送信) //返信の作成 const output = ContentService.createTextOutput(); output.setMimeType(ContentService.MimeType.JSON); output.setContent(JSON.stringify({"message":"success"})); //返信の送信 return output;
27. システムの流れ(返信の表示） • リクエストの状態で判断 UnityWebRequest.ResultがSuccessなら送信成功している • リクエストの状態一覧 https://docs.unity3d.com/ja/2020.3/ScriptReference/Networking.Unit yWebRequest.Result.html
28. 参考資料 https://developer.mozilla.org/en- US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers