---
title: UE Tokyo .dev #1 UnrealEngineで作る業務アプリ
tags: 
author: [ぽちお](https://www.docswell.com/user/3923277857)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DEYVZZ8PEM.jpg?width=480
description: UE Tokyo .dev #1 でLTさせて頂いた「UnrealEngineで作る業務アプリ」です。 HTTP通信・QRコード読取りについて解説しています。  資料内の動画のURLは以下の通りです。  ・天気情報の取得デモ https://youtu.be/dALJEntDGXI  ・QRコード読取りデモ https://youtu.be/c9f0DxkkMjs
published: July 29, 23
canonical: https://www.docswell.com/s/3923277857/Z24QWV-2023-07-29-113934
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/DEYVZZ8PEM.jpg)

UnrealEngineで作る業務アプリ
HTTP通信＆QRコード読取り編
ぽちお
(FutureSoftware 和田敏幸)
2023/07/28


# Page. 2

![Page Image](https://bcdn.docswell.com/page/VJNM33QM78.jpg)

自己紹介
和田 敏幸
(ぽちお)
静岡でフリーランスのシステム屋してます。一児のパパ。ぷちコン勢。
@toshiyuki_wada
WEBアプリ(フロント・サーバ )・スマホアプリ・インフラ構築・クラウド環境構築などなどシステムの事ならなんでも
やってます。
扱える言語は C/C++・Java・PHP・Python・Kotlin・Swift・JavaScript等で一番経験が短いのが BPです。
現在、法人化の方法で動き出しています。法人化した際には UnrealEngineの仕事も受けていきたいと思っていま
すので、宜しくお願いします。
Twitterのアイコンは赤い自動車です。 (S15シルビアに見えますが、 180SXという車のフロント部分を自分で交換 し
たシルエイティという車になります )


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YE9N99DWE3.jpg)

そもそも業務アプリって？
種類：
生産管理・販売管理・受注管理などなど・・・
プラットフォーム：
Windowsアプリ・WEBブラウザ・スマホアプリなどなど・・・
仕様：
ネットワークを使って他システムと連携したり、バーコードやQRコードを使って入力を自
動化したり、RFIDやNFCを使って情報を読み取ったり、カメラ画像から文字や画像を
認識したり、AIで学習・分析などなど・・・
様々なプラットフォームで
色んな実装ができないといけない！
UnrealEngineならマルチプラットフォームに対応しているので
どこまで実現できるか調査してみよう！


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GE8K993R7D.jpg)

今回の調査範囲
１．HTTP通信(WebAPI)
外部システムとの連携で必須な機能となります。
これができれば、最悪UnrealEngine側で機能を実装できなくても、サーバに入力データを投げて処
理させて結果を受け取ることで、様々な機能を実現できるようになります。
２．QRコード読取り
業務システムでは、何かとQRコード読取りの要件がありがちです。(URLを読むだけでなく、コードの
読取りとかに使用することが多いです。ちなみに無線の場合はRFIDを使用します。)
今回はオープンソースライブラリを使って、UnrealEngineでQRコードの読取機能を実装してみます。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LELZWWV2JR.jpg)

HTTP通信(WebAPI)
UE5からプラグイン(Beta版)を有効にするだけでBPのみでHTTP通信/Jsonエンコード・デコードが
行えるようになりました。
HttpBlueprint(beta)にチェック
Json Blueprint Utilities(beta)にチェック
(HttpBlueprintにチェックを入れると勝手に
チェックされるかもしれません )
元々C++を使えばHTTP通信の実装は可能でしたが、BPのみで実装できるようになったことで開発
の難易度が下がりました。
注：Jsonとは軽量なテキストベースのデータ交換用フォーマットの事で、WebAPIサーバとの会話はJsonフォーマットで行う
のが一般的です。中身がテキストなので、データ構造が分かりやすいのが特徴です。


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4JMV99G9JW.jpg)

天気情報の取得
サンプルとして天気予報API(livedoor天気互換)というサイトから天気情報を取得してみましょう。エ
ラー処理等を含めなければ、ロジックはこれだけです！
天気情報から渡されるJsonテキストを”Load Json from String”ノードに渡すことで、サーバから取得
した天気情報をUnrealEngineで扱えるようになります。
更に“Get Field”ノードで天気情報の中から欲しい情報のみを取得し、UnrealEngineの構造体に格
納しています。(構造体はサーバから返却されるフォーマットに従って事前に作成しておく必要があり
ます)
後は構造体から画面に表示したいデータを取得して、PrintStringしているだけです。


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PJR2GGZ9E9.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/PEXDXX937X.jpg)

更にデータテーブルのインポートでも使えます
なにかと面倒なデータテーブルですが、Google Sheets(旧 スプレッドシート)からデータテーブルへのインポートも今回のプ
ラグインを使えばBPのみで実装できてしまいます。
過去にはEpic Games Japan)岡田さんのブログでも同様の事に挑戦していましたが、当時はHTTP通信もJsonデコードもBPでは実
装できなかった為、&quot;大人の汚い力”を使ってマーケットプレイスで解決していましたが・・・
https://pafuhana1213.hatenablog.com/entry/2019/10/12/221139
UE5からはプラグインを有効にすれば、”大人の力”を使わなくてもＢＰだけでサクッとデータの取り込みが出来ちゃいます。
Editor
Utility
Widget
(BPのみ)
Google Sheets
Data Table
https://ueblog.futuresoftware.dev/archives/1545
Game


# Page. 9

![Page Image](https://bcdn.docswell.com/page/3EKXWWPN7D.jpg)

QRコードの読取り
UnrealEngineの標準機能ではQRコードを読取る機能は存在していません。(マーケット
プレイスでは数個それっぽいものがありました)
今回はZXing(ゼブラクロッシング)というバーコード・QRコードの読取りライブラリのC++
版ソースコードを使用して、WEBカメラによるQRコード読取りを行う方法を解説していき
ます。


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L73511XZE5.jpg)

処理の流れ
BP処理
Media Player
Media Texture
Material
Draw Material to RenderTarget
RenderTarget
Media Texture → Texture2D
https://stackoverflow.com/questions/69883155/unreal-how-to-access-image-in-mediatexture-with-c
C++
ZXing
ReadQRCode(自作関数)
ReadQRCodeFromRenderTarget(自作関数)
Texture2Dをパラメータとして受け
取り、画像をRGB配列に変換し、
ZXingに渡す。
ZXingの画像解析結果を文字列で
返却する
RenderTargetをパラメータとして受け取り、Texture2Dに
変換し、ReadQRCode関数を呼び出して、その戻り値を
返却する


# Page. 11

![Page Image](https://bcdn.docswell.com/page/87DDXX247G.jpg)

ReadQRCode関数
FString UMyBlueprintFunctionLibrary::ReadQRCode(UTexture2D* texture2D){
FString code = &quot;&quot;;
// texture2D設定
texture2D-&gt;CompressionSettings = TextureCompressionSettings::TC_VectorDisplacementmap;
texture2D-&gt;MipGenSettings = TextureMipGenSettings::TMGS_NoMipmaps;
texture2D-&gt;SRGB = false;
texture2D-&gt;UpdateResource();
// テクスチャの先頭 mipmapの取得
FTexture2DMipMap&amp; mipmap = texture2D-&gt;GetPlatformData()-&gt;Mips[0];
Texture2D
// 幅と高さを取得
int width = texture2D-&gt;GetPlatformData()-&gt;SizeX;
int height = texture2D-&gt;GetPlatformData()-&gt;SizeY;
// RGB配列を取得
uint8* Data = (uint8*)mipmap.BulkData.Lock(LOCK_READ_ONLY);
if (Data == nullptr) {
mipmap.BulkData.Unlock();
return code;
}
255,255,255,1,255,255,255,1,255,255,255,1,255,25
5,255,1,0,0,0,1,255,255,255,1,0,0,0,1,255,255,255,1
,0,0,0,1,255,255,255,1,0,0,0,1,255,255,255,1,0,0,0,1
,255,255,255,1,0,0,0,1,255,255,255,1,0,0,0,1,255,
// ZXingにRGB配列を渡して QRコードを解析させる
DecodeHints hints;
Result result = ZXing::ReadBarcode({Data, width, height, ImageFormat::BGRX}, hints);
// 結果文字列を FString型に変換
code = result.text().c_str();
ZXing
mipmap.BulkData.Unlock();
// 取得した QRコードの値を返却
return code;
}
https://www.unrealengine.com/ja/unreal-engine-5


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VJPXPP1V78.jpg)

ReadQRCodeFromRenderTarget関数
FString UMyBlueprintFunctionLibrary::ReadQRCodeFromRenderTarget(UTextureRenderTarget2D* textureRenderTarget){
// 描画ターゲットからピクセル情報を取得しておく
TArray&lt;FColor&gt; Pixels;
FRenderTarget *RenderTarget = textureRenderTarget-&gt;GameThread_GetRenderTargetResource();
RenderTarget-&gt;ReadPixels(Pixels);
UTexture2D *Texture = UTexture2D::CreateTransient(textureRenderTarget-&gt;SizeX, textureRenderTarget-&gt;SizeY, PF_B8G8R8A8);
Texture-&gt;MipGenSettings = TextureMipGenSettings::TMGS_NoMipmaps;
Texture-&gt;SRGB = textureRenderTarget-&gt;SRGB;
RenderTarget
Texture-&gt;AddToRoot();
Texture-&gt;SetPlatformData(new FTexturePlatformData());
Texture-&gt;GetPlatformData()-&gt;SizeX = textureRenderTarget-&gt;SizeX;
Texture-&gt;GetPlatformData()-&gt;SizeY = textureRenderTarget-&gt;SizeY;
Texture-&gt;GetPlatformData()-&gt;SetNumSlices(1);
Texture-&gt;GetPlatformData()-&gt;PixelFormat = EPixelFormat::PF_B8G8R8A8;
FTexture2DMipMap* Mip = new(Texture-&gt;GetPlatformData()-&gt;Mips)FTexture2DMipMap();
Mip-&gt;SizeX = textureRenderTarget-&gt;SizeX;
Mip-&gt;SizeY = textureRenderTarget-&gt;SizeY;
Mip-&gt;BulkData.Lock(LOCK_READ_WRITE);
uint8* TextureData = (uint8*)Mip-&gt;BulkData.Realloc(textureRenderTarget-&gt;SizeX*textureRenderTarget-&gt;SizeY*4);
FMemory::Memcpy(TextureData, Pixels.GetData(), sizeof(uint8)*textureRenderTarget-&gt;SizeX*textureRenderTarget-&gt;SizeY*4);
Mip-&gt;BulkData.Unlock();
return ReadQRCode(Texture);
}
Texture2D
RenderTarget
Texture2D


# Page. 13

![Page Image](https://bcdn.docswell.com/page/2EVL22YRJQ.jpg)

UnrealEngineでZXingライブラリを使用する前準備
UnrealEngineで外部ライブラリを参照する場合は、各環境に合わせたライブラリファイルを作成した
うえで、[プロジェクト名].build.csに定義を追加する必要があります。
本サンプルはWindows(64bit)環境での動作確認しか行っていませんが、スマホアプリを作りたい場
合はAndroid/iOS用にライブラリを作成し、定義を追加する必要がありますのでご注意ください。
using UnrealBuildTool;
using System.IO;
public class ZXing : ModuleRules
{
….
public ZXing(ReadOnlyTargetRules Target) : base(Target)
{
…
// ZXingライブラリのパスを定義
string ZXingLibPath = Path.Combine(ThirdPartyPath, &quot;zxing-cpp-master&quot;);
ライブラリの使用方法については、まめお様のブロ
グ記事がとても分かりやすかったです。
https://papersloth.hatenablog.com/entry/UE4AC2019
// スタティックライブラリのインクルードパスとライブラリパスを定義
PublicSystemIncludePaths.Add(Path.Combine(ZXingLibPath, &quot;core/src&quot;));
PublicAdditionalLibraries.Add(Path.Combine(ZXingLibPath, &quot;lib&quot;, &quot;x64&quot;, &quot;ZXing.lib&quot;));
}
private string ThirdPartyPath {
get { return Path.GetFullPath(Path.Combine(ModuleDirectory, &quot;../../Source/ThirdParty&quot;)); }
}
}


# Page. 14

![Page Image](https://bcdn.docswell.com/page/57GXRR96EL.jpg)



# Page. 15

![Page Image](https://bcdn.docswell.com/page/4EQ8VVW2JP.jpg)

まとめ
検証の結果、HTTP通信(WebAPI)・QRコード読取りについてはUnrealEngineでも実現
できることがわかりました。
しかも、UnrealEngineを使えばリッチな表現も容易に作れるので、他のマルチプラット
フォーム対応のフレームワークより利点が多いのではないでしょうか？
(最近は業務アプリでも3Dのデータを表示したいなんて案件もあります・・)
今後も検証内容等はブログで公開していきますので、よろしければお付き合い頂ければ
と思います。
https://ueblog.futuresoftware.dev/


