
2025.02.18
「売上をスケールする」AIの使い道とは アルペンが挑む、kintone×生成AIの接客データ活用法
React × Unity(全1記事)
リンクをコピー
記事をブックマーク
青山広大氏:ヤフーの青山です。『React × Unity』ということで発表させてもらえればと思います。
言語としては、ReactだったりTypeScriptだったり、Javaだったり、フロント、バックエンド問わず仕事しています。趣味はショッピングと自作キーボードで、ものづくり全般が好きです。休日とかは猫と一緒にアニメ見たりしてゆっくりとしています。
なんでUnityなのか、というところから説明していけたらと思います。Unityって「ゲーム作れるすごいやつだよね」だと思うんです。対応プラットフォームを見ますと、PCだったり、iOSだったり、Androidだったり、WebGLだったり……ん? WebGL?
つまり、Webの世界にゲームの表現力をもってこれるんじゃないかな!? ということで、今回はReact × Unityについて話せたらなと思います。
今日のゴールは、実際にReactとUnityは連携できるぞというのを実感してもらえたらなと思っています。React × Unityの「×(かける)」の部分、どうやるか一番気になりますよね。僕もここが最初気になりました。ということで、みんな大好きnpmで検索すると、「react-unity-webgl exact match」ということで、まさしくこれですね。
「React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application……」、うん、これ使えばできそうだなということで。今回はこのライブラリを使ってやっていこうかなと思います。
連携できるって言っても、何を以って連携できるぞと言えるのかというのがあると思うんですけれども、3点あると思っています。
1点目がReactのコンポーネントとしてUnityのビルド結果を表示できる。Reactの画面にゲームの画面が表示できたら連携できるかなというところです。2点目がReactからUnityのメソッドを呼び出せる。3点目は、逆にUnityからReactのメソッドを呼び出せる。
この3点を満たせれば、連携できると言っていいんじゃないかなと思います。まず上から順に、ReactのコンポーネントとしてUnityのビルド結果を表示できるというのを確認していこうと思います。トゥ!
ということで、まずUnityをWebGLでビルドします。Unity側の作業です。UnityのところのビルドセッティングでWebGLを選んであげまして、ビルドボタンを押します。
するとこのようなかたちでビルド結果が出まして、unitywebという拡張子のものであったり、jsonファイルであったり、UnityLoaderというjsファイルが出力されます。Unity側の作業は以上です。あとはこれをReactで取り込んでいこうと思います。ピッ!
これも本当簡単でして、まずReactでcreate-react-appなどをしまして、初期状態のReactの画面を作ります。そこのpublicフォルダに先ほどのビルド結果をそのままボーンともってきちゃってください。以上です。
あとはReact側の作業で、react-unity-webglライブラリを読み込んでもらって。先ほどのビルド結果の2つのjsonファイルとJavaScriptファイルをライブラリに取り込ませてあげます。ライブラリがunityコンポーネントというものを持っているので、そいつをそこに取り込ませてあげます。
今回はわかりやすくするためにReact側ではHeaderコンポーネントを作って、Mix Leapという文字を表示させています。これで完成です。
どうなるか見てみましょう。ポン!ポチッと。ブラウザ上でこのようなかたちでヘッダーの部分に先ほどの文字列と、下のほうにゲーム画面が確認できるかなと思います。これで1点目のReactのコンポーネントとしてUnityのビルド結果は表示できたと言えると思います。
じゃあ2点目いきます。one by oneでジャンジャンいきますね。ReactからUnityのメソッドを呼び出せることを確認していきます。
まずReact側の作業です。React側でUnityのメソッドを呼ぶボタンなどを作りましょう。MoveRightButton([右へ]ボタン)。これをonClickするとUnity側のBallオブジェクトのMoveRightメソッドに対して1という数字を渡します。これが右に1移動するみたいなかたちで実装できたらなと思っています。こいつを先ほどのHeaderのUnityコンポーネントの間に入れる感じで作ります。
ではUnity側のほうを見ていきましょう。Unity側は先ほどのBallオブジェクトにひもづくBallControllerなどを作りまして、そこに呼び出したいMoveRightメソッドを作ります。MoveRightメソッドに1が渡ってきたら、ここのX座標に1が入ってきてプラスされる。なので右にX座標分ずれるという動作ができるかなと思います。これで実際にビルドして、結果を見てもらいましょう。
バーン! ということで。[右へ]を押すと、パーン、パーン、パーンと右へプラス1するのが確認できます。あ、ついでに[左へ]ボタンも作りまして-1を渡しています。すると逆方向にちゃんと動きます。これで2点目、ReactからUnityのメソッドを呼び出せるというのが確認できたのではないかなと思います。
続きまして3点目いきます。逆にUnityからReactのメソッドを呼び出せる。確認していきます。ドーン!
React側の作業としまして、Unity側のChangeYearメソッド、これはイベントハンドラーですね、が呼び出された際に、React側のsetYearというメソッドを呼びます。こちらは先ほど紹介がありましたHooksを使っています。Hooksで2020という値を初期値に持っていて、そいつをHeaderで読み込んで。ここのMix Leapのあとのyearの部分に渡しています。
初期値は2020なので最初は2020と表示されていますが、Unity側でChangeYearメソッドで例えば2021などの数字が渡りますと、ここのsetYearにセットされて、Headerの部分、ここが2021になれば連携できるぞと言えるかなと思います。React側の作業は終わりです。ということで、バーン!
Unity側、この作業だけちょっと面倒くさくて、プラグインを作らなきゃいけないんですけれども。1行目はそういうものだと思ってください。2行目、3行目が大事でして、Unity側のChangeYearメソッドに対してReact側のChangeYearメソッドをひもづけるという、本当シンプルなプラグインを作りました。
あとはこれをUnity側で呼び出します。先ほどのプラグインをDllImportというかたちで取り込みまして、ChangeYearメソッドをここで定義しています。
Unityのゲーム画面に、OnClickUnityButtonがセットされたボタンがあって、押されたとしましょう。そのときに、ChangeYearが2021という数字を渡して実行されます。これだけでUnity側の作業も完了です。
動作見ていきましょう。UnityButton押しますね。ポンッと。今変わったの見えましたかね? ここのヘッダーの部分です。たぶん見逃した方が多いと思うので、もう1回やります。ボタンを押しますと……2020が2021になりましたね。
ということで、3点目。UnityからReactのメソッドを呼び出せる。これも確認できたかと思います。1、2、3全部確認できたので、ReactとUnityは連携できるという実感を持ってもらえたんじゃないかなと思います。
まあ連携できるとは言っても、これ何に使うんだと。みなさんのやる気を引き出そうかなと思いまして、実際に作ってみました! 上の部分がヘッダーでReactで実装しています。下の部分はUnityのゲーム画面です。再生しますね。
食品ストアを作ってみました。ユニティちゃんというモデルがいるんですけれども、その子がビールの棚に近づくと……このようなかたちでReactのモーダルが動きます。実際に表示を確認できるかなと思います。もうこの時間なので、みなさんビールとか飲みたくなっているんじゃないでしょうか。
ビールだけじゃなくソーダとかでもいいですけども。梅酒ソーダ割りうまいですよねという感じで。ちゃんと連携できるということを確認できるかなと思います。
最後、お酒いっぱい飲んだので、水も飲んどきましょう。カートもちゃんと押すと、プラス2というかたちで入ってますね。というのが確認できたかなと思います。
というわけで、完!という感じで。みなさん家に帰って……あ、みなさんもう家ですね。家でちょっとやってみてください!(笑)。以上です。
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
第20回エクゼクティブメンターイベント「今、「ひと」と組織が共創する〜働き方の未来へ」
2024.12.07 - 2024.12.07