UE4の勉強記録

UE4の勉強の記録です。個人用です。

12章15節 HTTP API – ウェブリクエスト

<前文>

f:id:kazuhironagai77:20190324210258p:plain

とうとう最後のレシピです。大抵の人は物事を途中で投げ出して最後までやり通しません。最後までやり通す人は極めて少数です。私は最後までやり通しました。私は子供の時は途中で諦めるタイプだったのですが自分でそれが凄く嫌いでした。そしてある時ある事に関して最後までやり通すコツを見つました。それは他の事にも結構通用して色々な事で最後までやり通す事が出来るようになりました。今回もそのコツを単に守っていただけで最後までやり通す事が出来ました。しかし最後までやり通すと結構後悔する事の方が多い事も気が付きました。大抵の人は物事を最後までやり通す人を尊敬しますが、実際は途中で投げ出した方が後悔しないで済む事が多い様です。今回は、後悔よりも満足感の方が勝っています。と言うかかなり最後までやって良かった。

ので、私流の最後までやり通すコツをまとめておきます。

  1. 頑張らない。頑張らないと出来ない事は長続きしません。どうしても頑張りたい人は前日の準備を頑張りましょう。ある参考書を勉強すると決めたとします。勉強時間は朝早起きして確保する事に決めました。ここで朝早起きする事を頑張る人は必ず途中で挫折します。頑張って早起きする事は自分に無理を強制しているからです。それなら前の日に頑張って1時間早く寝れるようにすべきです。それが出来れば自然に一時間早く目が覚めますから。
  2. 趣味にする。趣味なら楽しく出来ます。更に休憩時間、通勤時間、休日という膨大な時間を味方につけられます。
  3. 半分だけする。難しくて進捗が停止してしまう事は何かをしていると必ず起きます。誰かが奇跡的に助けてくれる事は割とありますが、無い時は半分だけやる事が良いです。例えばある問題をどうやって解いていいのか全く分からない場合、答えを見つける。その答えを理解する。に分解して答えを見つけるだけにまず集中するやり方です。

<本文>

<目的>

HTTPのAPIのIHttpRequestのオブジェクトを使用してダウンロードの進捗を示すプログレスバーを作成します。

<方法>

Step.0

取りあえず今回も新しいプロジェクトでやりますが、前回の内容が必要な事が判明したら前回のプロジェクトに追加する事にします。プロジェクト名は、Chapter12Part14とします。バージョンは4.22です。

教科書の説明だと、兎に角、この関数を使用して作成するそうです。

f:id:kazuhironagai77:20190324210402p:plain

Step.1

f:id:kazuhironagai77:20190324210427p:plain

サンプルコードも確認します。

f:id:kazuhironagai77:20190324210516p:plain

Networking、Sockets、Messaging、MessagingRPCあたりのAPIは今回使用しそうですが教科書の方では書いていませんね。

私のコードには、HttpとUMGのみを追加します。

f:id:kazuhironagai77:20190324210534p:plain

もし他のAPIが必要になったら随時追加します。

Step.2

f:id:kazuhironagai77:20190324210559p:plain

はい。特にやり方は述べていないのでBPから作成します。

f:id:kazuhironagai77:20190324210616p:plain

ProgressBarUMGと名付けました。

f:id:kazuhironagai77:20190324210634p:plain

f:id:kazuhironagai77:20190324210645p:plain

Progress barを追加しました。

ウーン。どこまで作成すればいいのか不明ですね。取りあえずレベル上に表示されるところまでは作成します。

f:id:kazuhironagai77:20190324210704p:plain

f:id:kazuhironagai77:20190324210720p:plain

こんな感じです。

Step.3

f:id:kazuhironagai77:20190324210816p:plain

f:id:kazuhironagai77:20190324210824p:plain

これは、前回のレシピのstep.3と全く同じですね。前回と全く同じ手順で作成します。前回のプロジェクトをそのまま使用しても良かったのですが、まあ復習も兼ねて作成します。

f:id:kazuhironagai77:20190324210842p:plain

作成しました。

Step.4

f:id:kazuhironagai77:20190324210904p:plain

f:id:kazuhironagai77:20190324210912p:plain

これが、前回のIHttpRequestクラスのオブジェクトであるhttpの関数を呼び出す工程2ですね。

f:id:kazuhironagai77:20190324210946p:plain

サンプルコードは以下の様になっています。

f:id:kazuhironagai77:20190324211004p:plain

ここで大切なのはHttpProgressBarとBP上で作成したProgressBarをどう関係付けるかだと思います。思いますが最初はサンプルコードのコピーからやって行きます。

f:id:kazuhironagai77:20190324211029p:plain

まず、サンプルコードの工程2の部分をコピーしました。エラーが表示されていますが先週同じコードのエラーを既に直しているので全く同じ方法で直します。

f:id:kazuhironagai77:20190324211108p:plain

正し今回はLoggingファイルはサンプルコードをそのままコピーしました。

f:id:kazuhironagai77:20190324211124p:plain

Cppのインクルードは変えましたが、hファイルの方は全く同じです。

f:id:kazuhironagai77:20190324211158p:plain

それでは、HttpDialogについてやって行きます。

先ず、サンプルコードのhファイルをみると、

f:id:kazuhironagai77:20190324211218p:plain

となっていますので、

私のコードにこの部分をコピーします。

f:id:kazuhironagai77:20190324211252p:plain

案の定、UHttpDialogがエラーに成っています。何をインクルードすればいいのかをサンプルコードから調べると、

f:id:kazuhironagai77:20190324211312p:plain

となっていました。

何、このクラス?サンプルコードから開いて見ると以下の様に成っていました。

f:id:kazuhironagai77:20190324211346p:plain

ひょっとしてこれをStep.2で作成すべきだったの?

うーん。作り直しますか。

f:id:kazuhironagai77:20190324211403p:plain

まず、HttpDialogクラスから作成します。

f:id:kazuhironagai77:20190324211443p:plain

プログレスバーを追加します。

f:id:kazuhironagai77:20190324211501p:plain

f:id:kazuhironagai77:20190324211509p:plain

サンプルコードのHttpDialog.hの方は以下に示すインクルードが含まれていました。

f:id:kazuhironagai77:20190324211526p:plain

これらもインクルードする必要があるのでしょうか?ウーン。分かりませんね。

サンプルコードではコンストラクターがありました。

f:id:kazuhironagai77:20190324211543p:plain

f:id:kazuhironagai77:20190324211553p:plain

のでこれも追加します。

f:id:kazuhironagai77:20190324211623p:plain

f:id:kazuhironagai77:20190324211630p:plain

エラーになってます。

このサイトによるとsuper()が必要と書かれていました。ので

f:id:kazuhironagai77:20190324211650p:plain

Super(PCIP)を追加するとエラーが消えました。よく見たらサンプルコードの方はSuper(PCIP)が元々付いていました。

最後に残っている関数も追加しました。

f:id:kazuhironagai77:20190324211709p:plain

f:id:kazuhironagai77:20190324211719p:plain

ウーン。ここまでは出来たんですがこれが何を意味するのですか分からないです。勿論書いてある事は分かるのですがUMGとは結局、以下に示すようなUIデザインの事でしょう。

f:id:kazuhironagai77:20190324211743p:plain

このクラスの何処にこのデザインの情報が入っているのでしょうか?

ウーン。教科書をひっくり返してみると、何か7章辺りでやったような感じなんですが全く覚えていません。

うーん。先に行ってしまいましょう。

Step.5

f:id:kazuhironagai77:20190324211841p:plain

はい。

f:id:kazuhironagai77:20190324211903p:plain

これだけ?

何か足りないような気がしますが。

<結果>

取りあえずplayを実行してみます。

f:id:kazuhironagai77:20190324212000p:plain

何にも現れませんね。

f:id:kazuhironagai77:20190324212017p:plain

思いっきりエラーに成っていましたね。それでは直していきましょう。

まず、最初にトライしたい事は、前回使用したIHttpRequestクラスのオブジェクトであるhttpの関数を呼び出す工程の3と

f:id:kazuhironagai77:20190324212037p:plain

FHttpRequestCompleteDelegateクラスのオブジェクトであるdelegateの関数を呼び出す工程のどれか一つ

f:id:kazuhironagai77:20190324212103p:plain

を追加する事です。

ビルドしてplayを実行するとエディターがクラッシュしました。

IHttpRequestクラスのオブジェクトであるhttpの関数を呼び出す工程の2を消してもう一度ビルドしてplayを実行すると、やっぱりクラッシュしました。

調べて見ると、以下に示すIHttpRequestクラスのオブジェクトであるhttpの関数を呼び出す工程の4がまるまる抜けていました。

f:id:kazuhironagai77:20190324212132p:plain

追加してplayを実行すると今度は成功しました。

ので、もう一度、IHttpRequestクラスのオブジェクトであるhttpの関数を呼び出す工程の2を追加してビルドしてplayを実行しました。

今度はエディターがクラッシュする事なく正常に作動しました。

f:id:kazuhironagai77:20190324212149p:plain

まず、play中の画面ですが、プログレスバー自身の表示はされません。

f:id:kazuhironagai77:20190324212205p:plain

ただし、outputLogには以下に示すコードの実行された結果らしきものがプリントされていました。

f:id:kazuhironagai77:20190324212221p:plain

コードを見ると、sentByteは常に0。recievedBytesは常に値を受け取っている。contentLenも常に0。なのでrecievedBytes/ contentLenであるpercentCompleteはエラーのようです。

2割ぐらいは出来ていると言う事でしょうか?

contentLenが0の理由から調べていきます。

使用したウェブアドレスはUE4のサイトなので、映像が常に切り替わっています。そのせいでcontentLenが測れていないのかもしれません。いくつかの別のウェブアドレスで試してみます。

f:id:kazuhironagai77:20190324212244p:plain

一緒でした。sentByteはともかく、ContentLenの値が分からないと、ダウンロードの進捗が分からずプログレスバーは作成出来ません。ウーン。どうしましょうか?

サンプルコードを読んでいたらこんなコードがありました。

f:id:kazuhironagai77:20190324212307p:plain

ブループリントから初期化してください。(ブループリントのコンストラクション図からこれをコンストラクトして下さい。)

これがcontentLenが0になる理由とは思えませんがプログレスバーが表示されない原因かもしれません。これを直してみましょう。

このサイトを参考にしてやってみます。

まず、HttpDialogクラスのBPの作成です。

f:id:kazuhironagai77:20190324212346p:plain

Content内から右クリックしてリストを開きBlueprint Classを選択します。すると新しいリストが開きます。

f:id:kazuhironagai77:20190324212424p:plain

開いたリストの中にあるAll Classesの下にあるボックスにHtttpDialogをタイプしてHttpDialogを選択します。

f:id:kazuhironagai77:20190324212450p:plain

HttpDialogBPと名付けました。ダブルクリックしてHttpDialogBpのダイアグラムを開きます。

f:id:kazuhironagai77:20190324212519p:plain

Variables内のStats下に作成したプログレスバーがありました。(本当にC++で作成したプログレスバーであるか確認するために名前をmyProgressBarに変更して確認しています。)

LevelBP上で、HttpDialogクラスのBPを初期化します。

f:id:kazuhironagai77:20190324212550p:plain

Playを実行しましたが、プログレスバーは表示されなかったです。

f:id:kazuhironagai77:20190324212610p:plain

やっぱり、何処かで、UMG内にプログレスバーを設置してそれとHttpDialogクラスのBPをバインドするなどの方法が必要と思われます。

うーん。これ以上の改変が必要となるとちょっと魔改造の域に入ってしまいそうですね。このブログの目的の一つはこの教科書を生徒の立場から評価する事ですのでこの辺で中止します。

<結論>

教科書のレシピの方法では、プログレスバーをPLAY画面に表示してそれをダウンロードの残り%を表示する事は出来ませんでした。出来ない原因が少なくとも2つ見つかりました。

1.contentLenが常に0。

2.UUserWidgetクラスから派生したUHttpDialogクラス内で作成したUProgressBarクラスのオブジェクトであるmyProgressBarをUMG上で表示する方法が不明。

1.についてはひょっとするとサーバー側の問題で、サーバー側で解決しないといけないのかもしれません。2については、UProgressBarクラスのオブジェクトであるmyProgressBarを使用しないで、UMG上にprogress Barを作成してその値をintかfloatでC++側から送れば解決しそうですが、そうするとレシピと似ても似つかないものになりそうなので止めます。

<おまけ1>

ラムダについてまとめると先週書きましたが、復習したらあんまり大した内容でなかったのでやりません。

<おまけ2>

最後は楽しく終われると思っていましたが何とも言えないビターな終を迎えてしまいました。まあ、サーバーとの関係はネットワームゲームの勉強でやらないといけませんしこんな触りの勉強でマスター出来る訳でもないのでこんなもんでしょう。