【Unity / PlayMaker】カスタムアクション「Get Http Request」の使い方

2021年09月01日

本記事では、Webリクエストにより文字列を取得する機能の紹介をします。
これを活用すると例えば「天気の情報を取得して、シーンの天候を変える機能」や「世界中の時刻を取得して、世界時計を作る」などの機能を、STYLY Unity Plugin v1.3.0に含まれるカスタムアクション「Get Http Request」で実現することができます。

1 サンプル
2 動作プラットフォーム
3 カスタムアクションを利用する準備
4 Get Http Requestについて
5 サンプルシーン作成
6 サンプルの動作の説明
7 STYLYへアップロード

サンプル

この記事で紹介する内容を反映して作成したサンプルシーンになります。

動作プラットフォーム

Get Http Requestは全プラットフォームで利用できます。

プラットフォーム	動作
VR	〇
Ｗeb	〇
Mobile	〇

カスタムアクションを利用する準備

Change STYLY Sceneを利用するためには、UnityアセットのPlayMakerが必要です。

【Unity】ゼロからわかるPlayMaker「超」入門基礎知識

Unity Plugin for STYLYに格納されているPlayMakerのカスタムアクション「Change STYLY Scene」を使用します。
Unity Plugin for STYLYをダウンロードしていない場合は、ダウンロードしておきましょう。

STYLY Plugin for Unity DOWNLOAD

Unity Plugin for STYLYを既にImport済みの方は、バージョン1.3.0以上からご利用いただけます。
現在のバージョンはUnityから STYLY -> Check for UpdatesでUpdate Checkerを開くとご確認いただけます。
バージョン1.3.0以下であった場合、最新のUnity Plugin for STYLYを再度ダウンロードしなおしてください。

STYLY Plugin for Unityのバージョン確認

Get Http Requestについて

参考に、Get Http Request実装の様子を動画でどうぞ。
（初めて実装する際の動画なので、uGUIの構成が多少違う点ご了承ください。）

Get Http RequestはSTYLYのシーンでGETのHTTPリクエストをする機能です。

Get Http RequestのCustomActionの場所

UrlとしてStringを設定してHTTP GETを行います。
また、Headerとして任意の数のKey-Valueを設定できます。

サーバーからの応答が正常なときはDoneイベントが呼ばれます。
エラーになるときには、Errorのイベントが呼ばれます。

サーバーからの応答はHttp Response Code/Bodyに保存され、エラーの際は、Error Stringにエラー内容が保存されます。
404などのエラー系のResponse Codeの場合Errorイベントが呼ばれます。
200などの正常なResponse Codeの場合Doneイベントが呼ばれます。
必要によっては、Response Codeを利用した異常系を実装してください。

制限として、WebGLの場合はサーバ側でのCORS設定が必要です。
CORS設定がされてないURLのリクエストはErrorイベントが呼ばれます。

サンプルシーン作成

この記事では、動作確認がしやすいようuGUIでURL設定や結果が見えるシーンを制作します。

uGUIでURL入力欄と結果表示欄の準備

入力欄や表示欄を作る地としてCanvasを作ります。
UnityのHierarcy上で右クリック->UI->Buttonなど選択するとCanvasが自動生成されます。
VR上でも見れるように、生成されたCanvasを空間上に配置するように設定変更します。

Render ModeをWorld Spaceにし、Transformの設定もそれぞれScale = 0.005、Width = 800、Height = 600にすると程よいサイズになります。
Prefab化して利用する際は、ここでLayerをDefaultに変更してください。

Canvasの追加とWorld Spaceの設定

Canvasができたので、この下に入力欄としてInputField、結果表示にText、リクエスト開始にButtonを配置します。
好きな位置に配置していきましょう。
また、Hierarchy上のGameObjectの名前を適宜変更するとわかりやすいです。

Canvas内へ各UI要素の追加

InputFiledについて、初期アクセスURLがあればここで設定しましょう。
InspectorからInput Filed ComponentのTextで設定できます。
今回はシンプルなHTTPSリクエストのテストに使えるhttps://httpbin.org/getを使います。

Input FiledのInspectorでの設定

PlayMakerの設定

PlayMakerで実装する為に、FSM Componentを追加します。
FSM Componentを追加するGameObjectを選択し、PlayMaker Editor上で右クリック->Add FSMで追加できます。

PlayMaker Editorは、UnityのメニューからPlayMaker -> PlayMaker Editorで開けます。
GameObjectは、既存のCanvasに追加しても良いですし、今後流用するようであればLogic等に名前を変更した空のGameObjectを作っても良いです。

FSM Componentの追加

PlayMakerの実装

これから実装するものは以下になります。

init：変数の初期化用のステータス（今回は特に初期化するものはありませんが、おまじないとして置きます。）
Wait：ボタンが押されるまで待つ
Request：ボタンが押されたら、InputFieldからURLを取得しGet Http Requestを呼び出す
Show Result / Show Error：Doneイベント/Errorイベントが発火したら、 Http Response Code/BodyとError Stringを表示する

今回実装するFSM

PlayMaker：Wait Status の実装

まずボタンを押されたことを検知するカスタムイベントOnClickedを作ります。
PlayMaker EditorからEventタブを開き、Add Eventへ入力してEnterで追加できます。

HTTP Requestの結果を受け取る際のカスタムイベントOnFinished/OnErrorも併せて作ります。
カスタムイベントの名前は任意なので、好きな名前で実装します。

FSMへカスタムイベントの追加

Waitステータスをつくったら、Waitステータスを右クリックしAdd Transition -> OnClickedを選択してEventを追加します。

StateへTransitionの追加

uGUIのButtonからのイベントをこのFSMに流す設定をします。
ButtonのInspectorでOn Click()の+ボタンを押すとGameObjectが設定できるようになります。
FSMが含まれるGameObjectを設定したら、PlayMakerFSM.SendEventを選択し、OnClickedと入力します。

uGUIのButtonの設定

PlayMaker：Request Statusの実装

Actionの実装をしていきます。
Get HTTP Requestを呼び出す前に、任意でFSMの状態を表示するためにUI Text Set Text ActionでTextの表示を更新します。
また、URLをInput Filedから取得しurl変数に保存するために、UI input Field Get Text Actionを利用します。
最後にGet HTTP Request Actionを追加し、Input Filedから取得したUrlを設定します。

また、ResultとしてHttp Request Code/Body, Error Stringをそれぞれ変数に保存します。
Eventには先ほど追加したOnFinished / OnErrorイベントをそれぞれ設定します。

最後にTransition EventとしてOnFinished / OnErrorを忘れずに追加しましょう

Request stateのAction実装

PlayMaker：Show Result / Show Error Statusの実装

表示結果に合わせて結果を更新していきます。
今回はuGUIのTextを更新するだけなので、Get HTTP Request ActionのResultとして取得したHttp Request Code/Body, Error String変数を表示します。

Textの更新にはUI Text Set Text Actionを利用します。

Requestの結果を表示する

今回はそのまま表示するだけですが、Resultのデータを加工したり内容によって分岐する場合はここで実装するとよいでしょう。

サンプルの動作の説明

まずデフォルトのhttps://httpbin.org/getにアクセスしてみます。
Input FiledのURLをそのままでStartボタンを押すと、Response Code 200でBodyも問題なく取得できました。

正常に取得できた場合

次にhttps://httpbin.org/get2にアクセスしてみます。
Errorイベントが呼ばれ、サーバが存在しないURLとしてResponse Code 404を返してきました。

サーバーエラーの場合

最後に存在しないURL、もしくはCORS設定ができていないサーバへアクセスしてみます。
するとErrorイベントが呼ばれ、HTTP Response code/bodyが空の状態となります。
Unity上ではCORS設定ができているかどうかは確認できないので、STYLYへUploadしてからWebで確認しましょう。