AngularJS から Angular への移行手法について振り返る
こちらは Angular Advent Calendar 2022 23 日目の記事です。
GMOペパボで働き、現在進行形で6,7年ほど AngularJS および Angular で構築されたWebアプリケーション開発に携わっています。（参考までに私が携わっている開発の一部が下記ブログで見れます)
- 「GMO Developers Night 10 ペパボ EC テックカンファレンス」を開催しました - Pepabo Tech Portal
- カラーミーショップの一機能をAngular Elementsで実装しました - Pepabo Tech Portal
今回は昨年LTSが終了した AngularJS を Angular に移行するための二つの機能について私が使ってみた感想を交えつつ振り返ってみたいと思います。
ngUpgrade による段階的な移行
Angularの公式ガイドを見ると AngularJS から Angular への移行方法として ngUpgrade というライブラリを提供しています。
ngUpgerade ライブラリにある UpgradeModule を利用することで Angular を AngularJS のアプリケーションに組み込むことができ、そこから AngularJS と Angular を同時に動かしつつ AngularJS のコンポーネントを Angular に一つずつ移行することで段階的に移行させられるというものです。
例えば Angular のコンポーネントやサービスを AngularJS アプリケーション内で使いたい場合は以下のように downgradeComponent , downgradeInjectable を使うことで AngularJS にダウングレードして使うことができます。
import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static'; angular.module("exampleApp", []) .directive( "hogeButtonComponent", downgradeComponent({ component: hogeButtonComponent }) as angular.IDirectiveFactory ) .factory( "PiyoService", downgradeInjectable(PiyoService) );
このようにコンポーネントやサービス単位で置換ができるため AngularJS と Angular のコードの二重管理を避けつつ Angular のコードが書けるため、私が開発を担当しているプロダクトにも当初この手法を取り入れて移行アップグレードを進めていました。しかし、プロダクトの複雑さも相まってか簡単には移行できませんでした。
（これは個人的な感想であり ngUpgrade による移行手法を下げる意図はありません）
ngUpgrade では移行のための特殊なコード記述が多い
上記のコード例のように Angular のコードを AngularJS にダウングレードすること自体は難しくありません。
一方で、 AngularJS のコンポーネントやサービスを Angular 側で利用したい場合が少し厄介です。
Angular のコンポーネントに AngularJS のコンポーネントを含めなければならない例を考えてみましょう。この場合は UpgradeComponent を利用してコンポーネントをアップグレードする必要があります。
コンポーネントクラスは以下のようになりますが、アップグレードになった途端に記述量が増えました。
// AngularJS Code class MessageBoxController {} export const messageBox = { template: "<p>{{ message }}</p>", bindings: { message: "<" }, controller: MessageBoxController }; // Angular Code import { Directive, ElementRef, Injector, Input } from '@angular/core'; import { UpgradeComponent } from '@angular/upgrade/static'; @Directive({ selector: 'message-box' }) export class MessageBoxDirective extends UpgradeComponent { @Input() message; constructor(elementRef: ElementRef, injector: Injector) { super('messageBox', elementRef, injector); } }
また、サービスのアップグレードの場合はファクトリプロバイダーを利用して以下のような記述をする必要があります。
import { userStore } from 'services/user-store'; export function userStoreServiceFactory(i: any) { return i.get('userStore'); } export const userServiceProvider = { provide: userStore, useFactory: userStoreServiceFactory, deps: ['$injector'] }
ボトムアップで常に AngularJS に依存しないコンポーネントやサービスを作ることができるなら上記のようなアップグレードの記述が必要になることはありません。
しかし、私が担当するプロダクトでは大量のDIや状態管理を担うサービスや適切な粒度でコンポーネント化されていないテンプレートを持つコントローラーやコンポーネントが多くあったためアップグレードが必須でした。そのため ngUpgrade を利用することで新しく作るコンポーネントやサービスを Angular で書くことはできましたが、一方で組み込み先の AngularJS のことを常に考慮しつつ設計・実装しなければなりませんでした。
このように担当プロダクトではアップグレード時の移行コストが低くないため移行作業が難航していました。
Angular Elements による段階的な移行
Angular のコンポーネントを Custom Elements に変換する Angular Elements という機能を利用することでも AngularJS からの段階的な移行が実現できます。
Angular Elements によって Custom Elements としてパッケージ化されて閉じられることで外側がどんなアプリケーションであっても組み込めるので AngularJS アプリケーションにも利用できるわけです。
具体的な移行方法については lacolaco さんの記事で紹介されているため今回は割愛させていただきます。
Angular ElementsによるAngularJSの段階的アップグレード戦略 | lacolaco/tech
移行のためのコードとして純粋な Angular のコードが書ける
ngUpgrade による移行で問題点として挙げていたダウングレード・アップグレードのような特殊なコード記述が不要となることで移行先のコードは純粋な Angular のコードを書ける点はとても大きなメリットだと感じました。ある程度の規模のプロダクトを特殊なコード記述のルールを作ることなく移行を進められることは実装する開発者やそのコードを読むレビュアーという視点で見た時に大変助かりました。
一方で Angular Elements を利用したとしても移行途中の場合は AngularJS とのデータのやり取りが発生しますが、以下のような AngularJS とのやり取りを担うコンポーネントを間に噛ませることで AngularJS への依存度を下げることはできると考えています。（担当プロダクトではこのような役割を持ったコンポーネントを Adapter コンポーネントと呼んでいます）
@Component({ template: `<foo-container></foo-container>` }) class FooAdapterComponent { // 1. AngularJS -> Angular // 属性を経由してデータを渡す @Input() hoge: any; // 2-1. Angular -> AngularJS // イベントを発火して AngularJS 側がイベントリスナーで受け取る @Output() event = new EventEmitter(); @ViewChild(FooContainer) container: FooContainer; ngOnInit() { // 2-2. AngularJS -> Angular // userChange: EventTarget的な役割を担う window.userChange.addEventListener(event => { this.container.changeUser(event.user); }); } }
1で AngularJS から Angular に属性を経由してデータを渡したい場合は ngProp を利用して以下のように渡せます。
<foo-element ng-prop-hoge="piyopiyo"></foo-element>
まとめ
AngularJS を Angular に移行するための二つの機能について ngUpgerade と Angular Elements をそれぞれ振り返りました。
適切な粒度で分割されたコンポーネントなど AngularJS の各ロールが疎結合な状態であれば ngUpgerade による移行でも十分かもしれませんが、個人的にはそれを考慮してもほとんど移行を意識させずに Angular のコーディングができる Angular Elements は魅了的でした。
今回のような移行以外でも様々な用途で活躍できる Angular Elements をこれからも推していきたいと思います。
2020年のまとめ
今年はCOVID-19によって仕事もプライベートも環境がガラッと変わったこともあり、去年とはまた違った一年だったなあという印象でした。
Angularで開発をした
チームで管理してるプロダクトのAngularJS脱却..は今年中には終わりませんでしたが、Angular+Railsのアプリケーションを1つ作ることができました。
AngularJS脱却では学べないAngularの知見だったり、Angular Elements（Web Components）を使ってみたりと初めてのことが多く作ってて楽しかったです。
イベント登壇をした
久しぶりの登壇でした。
オンラインイベントなので視聴者が目の前にいないので発表に対する反応が見えづらいところがありましたが、個人的には人が見えない方が緊張せずに話せました。
上であげたAngularアプリについてもちょっと説明してます。
執筆活動をした
社の人経由で執筆やってみませんか〜という募集がかかっていたので乗っかってやってみました。
初執筆かつ、「リモートワーク」という難しい題材だったため目次を作る段階でとても苦戦しましたが、なんとか形にすることができました。相談に乗っていただいた執筆メンバーの方々、編集者さん本当にありがとうございました！自分の名前と文章がこうした形で残ることもなかなかないので貴重な経験をさせてもらいました。
気になる人は買ってみてね↓
ゲームをたくさんした
プライベートで交流のあった友人のDiscord鯖に招待してもらったのをきっかけに今まで以上にたくさんゲームをやった一年でした。
今年特に面白かったゲームは？と聞かれたら自分は「ARK」「原神」「Cyberpunk 2077」をあげますね。
マイクラと同じで気づいたら無限に時間が溶けるやつ。ARKは人生 store.steampowered.com
ガチャが渋いけど、バトルシステムが好みでどのキャラを組み合わせて戦おうか考えるのが楽しい。運営のキャラに対する愛が深いのがゲームからたくさん伝わってくるので気づいたら課金してる genshin.mihoyo.com
世界観が好き。サブミッションが無限にあってそっちをやってて全然メインストーリーが進まない。自分は物理特化の脳筋で戦ってる store.steampowered.com
他にも遊んだゲーム
- Control
- Black Mesa
- Quantum Break
- No Man's Sky
- Gunfire Reborn
- DOOM
- Craftopia
- DEEMO -Reborn-
- Among Us
- Project Winter
運動をたくさんした
仕事が基本リモートワークになったことで通勤時間がゼロになり通勤による運動がなくなったので、代わりに任天堂のリングフィットアドベンチャーをやっていました。
購入したのは去年の12月頃で、本格的に始めたのはリモートワークが始まる2月頃から。毎日しっかりやるのではなく、無理せず続けて習慣化させることに重きを置いて1~3日おきくらいにやるように心がけて始めました。このスタイルが合っていたようで完全放置することなく今日まで続けることができました。
アドベンチャーモードは2周目からバトルシステムが面倒になってしまって効率重視のカスタムモードで鍛えるようになってしまったので、来年は少しずつ進めて3周目まで行きたいです..。 （効率厨のためにもカスタムモードにも運動負荷を適用してくれたら最高なのだけど）
1周目クリア時
111日目。のりたろうの次回作にご期待ください #リングフィットアドベンチャー #RingFitAdventure #NintendoSwitch pic.twitter.com/tdACMQDY0y
— のりたろう (@ku00_) 2020年6月14日
フィットスキルコンプ時
159日目。全フィットスキルコンプしたぞ！！ #リングフィットアドベンチャー #RingFitAdventure #NintendoSwitch pic.twitter.com/QwQoHbR7yC
— のりたろう (@ku00_) 2020年9月18日
どのスキルをどのくらいやったのか調べるために全スキルをやろうとしたけど途中で力尽きた
197日目。今年最後なのでヨガ以外のスキル全部やったよ #リングフィットアドベンチャー #RingFitAdventure #NintendoSwitch pic.twitter.com/lMstoVwwf1
— のりたろう (@ku00_) 2020年12月31日
配信をいくらかやった
リモートワークで時間が空いたのもあり、一時期配信してました。 喋りながらゲームをやるのが絶望的に苦手だったので、ストーリーのあるゲームを選択してやりましたがそれでも難しかった..。 youtu.be
推しが増えた
COVID-19の影響で例年だと開催されるはずの推しのライブやイベントが無くなったりしたこともあり、次第にリアルイベントから遠ざかるようになりました。
一方で暇つぶしくらいで観ていたVTuberを観る機会が次第に多くなり、そこで桐生ココさんと出会いホロライブの沼にハマるようになりました。自分がスパチャをした額も集計しようと思いましたが怖くなったのでやめておきます..。
（リアルからバーチャルに推し変したわけではないので、これからもラブライブ！シリーズは応援していきます）
ボクセルアバターを作ってみたよ
こんにちは～、わさびのりたろうです。
VRoidを使わない自分のオリジナルアバターをそろそろ作りたいなあと思ったので、今回は簡単にできそうなドット絵の3Dアバターを作ってみました。
3Dドットのことをボクセル(voxel)と言うのですが、ボクセルアバターのモデリングソフトに MagicaVoxel というのがあるので今回はこれを使いました。
今回は備忘録であり作り方を丁寧に紹介する記事ではありません。なので、実際に作りたい方はあげている参考ブログなどを読んで挑戦してみてください。
作業環境
参考にしたブログなどは1,2年前のものだったりしますが、それでも下記のような最新の作業環境で動作しました。
- MagicaVoxel:
0.99.2 - Blender:
2.79 - Unity:
2017.4.18f1 - UniVRM:
0.48
ボクセルを作る
ボクセルの素体には daishi さんが配布していたものを使いました。
この素体に髪やスカートなどを肉付けしていく感じです。
ボクセルがいい感じにできたらエクスポートします。
はじめは OBJ 形式でエクスポートしていましたが、それだと後述するウェイトの設定作業で詰まってしまったので PLY 形式でエクスポートしました。
3Dモデルとして動くようにする
以下のブログなどを参考にしながらボクセルを3Dモデルとして動かせるようにしました。
- オリジナルアバターを簡単に作りたい人向けチュートリアル リギング編 PLYバージョン
- MagicaVoxel→Blender→Unityでボクセルモデルを動かす③ - 裏鍵.dump
- 【Blender】ボーンヒートウエイトのエラーが出たときに試す5つの解決策 - おもちゃラボ
- ボーンヒートウェイト：一つ以上のボーンで解決に失敗しました（failed to find solution for one or more bones）の原因
頂点数を削減する
頂点が重複していると後述する自動ウェイトがエラーで使えなかったのでやっておきます。
なおこの作業を OBJ 形式のボクセルでやろうとするとピクセルの角が消えてボクセルらしさが失われてしまうので PLY 形式でやるのが良さそうです。
テクスチャを作成する
PLY 形式でボクセルを読み込んだ場合の注意点として Blender 以外でボクセルに色が付かなくなることがあります。なので、Unity へモデルを持って行った際にも色が反映されるようにするためにテクスチャを作成しておきます。
スマートUV展開で画像を作成し、マテリアルを作成して画像はテクスチャとして設定すればOkです。
ボーンとウェイトを設定する
ボクセルだけでは3Dモデルは動かないので、ボーンを入れます。
ボーンは @megakumadori さんのものを使いました。
ボクセルとボーンのスケールが合わないこともあるかと思うのでそこを調整します。
次にウェイトを設定します。ウェイトペイントで塗ってもいいのですが、楽をするために自動ウェイトを入れるだけにします。
できたら FBX 形式でエクスポートします。VRM対応のアプリケーションに読み込むことがないのであればここまででOKです。
VRM にコンバートする
基本的にはドワンゴさんのこの記事通りにやるだけです。
注意点としては、 VRM にコンバートするだけならボーンのマッピングに Neck, Chest, Shoulder, Toes は不要なのですが、ないと VRoid Hub にアップロードする際にエラーが発生して失敗してしまったので入れておきます。 (自分の時は Chest 以外は自動で入りました)
VRM にコンバートするときは利用可能なシェーダーに変更しておく必要があるのですが、自分の場合はなぜかテクスチャの Inspector が disable になっていて編集できない状態になっていましたが、この問題はマテリアル用のフォルダを作成することで解消しました。
FBX ファイルの [Inspector -> Materials -> Extract Materials] を押下して Assets 以下にマテリアル用のフォルダを作成すればOK。
VRM ファイルにしてしまえばあとは簡単、VRoid Hub にアップロードするだけです。お疲れさまでした。
今回のようにボクセルアバターを作るのは Blender でメッシュを一から作るわけではないので Blender 入門として気軽にできてよいなあという感想でした! それでは～。
VRoid Hubに3Dモデルをアップロードしてみた
こんにちは、わさびのりたろうです。
私は3Dモデル作成アプリケーションの VRoid Studio でよく遊んでいますが、最近3Dモデルのプラットフォームとして VRoid Hub というものが新しく登場しましたので、今回はその紹介をします。
アップロードしてあるモデルだけ見せてくれ！という方はこちらから。
ラーラちゃんは個人利用OKにしてあるので、ぜひダウンロードして使ったりVRoid Hub と連携しているサービスで使ったりしてみてください。利用報告はしなくて大丈夫ですが、Twitterで私 ku00_ 宛にメンション付けてツイートしたりしていただけるととても喜ぶと思います。
3Dモデルのプロフィールページが作れる
VRoid Hub は3Dモデルのプロフィールページを作れたり、VRoid Hub と連携しているサービスに pixiv アカウントでログインすることで VRoid Hub にアップロードされているモデルを使って遊べたりします。
3Dモデルを好きな角度から眺められるページがモデルデータをアップロードするだけで作れてしまうのです！ 百聞は一見に如かずなので、まずはアップロードしたのりたろうちゃんのプロフィールページを見てみましょう。
（プロフィールページでサムネイル画像を設定しておくと、Twitterに投稿したときなどに表示されるカードがいい感じになるのも好き）
プロフィールページでは、他人が利用するときのライセンス等の規約に従えばそのモデルデータをダウンロードして利用することもできます。（もちろんのりたろうちゃんのように他人が利用できないように設定することもできます）
VRoidと名前が付いていますが、決して VRoid Studio で作成されたモデルデータしかアップロード・利用できないわけではありません。3DモデルのデータフォーマットがVRMになっていれば大丈夫です。
VRoid Hubのモデルを使って遊んでみる
現在対応しているサービスは SHOWROOM V と Vワールド のみですが、今回はVワールドを使ってみましょう。
Vワールドでは、自分好みにワールドを作ったりワールドに3Dモデルを置いて撮影したりできます。また、VTuberにように配信に利用することもできます。
ＶワールドがVRoidHubに対応しました！
— Vワールド＠公式 (@Vworld_official) December 21, 2018
ウェブ上に投稿されたＶＲＭアバターを選んで遊ぶことができます！
さらにワールドの時間設定、天気の変更が出来るようになりました
より雰囲気豊かな自作ワールドが作れるようになります
気に入ったモデルを探して遊んでみてください！https://t.co/FV2ZriISXr pic.twitter.com/Mm3kNHZOKd
今回使うモデルは私が作ったラーラちゃんにします。
ダウンロードしたVワールドを起動して左上端の開くを押下するとアバターの呼び出し先を選択する画面になるのでVRoid Hub を選択します。
選択すると VRoid Hub の連携画面に遷移するので許可・不許可される項目を確認した上で [連携する] を押下してください。
連携に成功すると認証トークンが発行され画面に表示されるので、それをコピーしてVワールドの画面に貼り付けます。
認証に成功すると自分がVRoid Hub にアップロードしたモデルと♡（正式名称がわからない。ハート?）したモデルで利用可能なものが表示されるようになります。自分で使いたいモデルがある場合には、事前に VRoid Hubで♡しておくとよいかと思います。
使いたいモデルを選択するとモデル名や規約などの情報が表示されるので、規約をよく読んだ上で [同意する] を押下しましょう。
モデルによっては VRoid Hub とモデルデータに記載されている規約が異なることがあるかもしれませんが、基本的にはモデルデータの方の規約を優先しましょう。
ダウンロードしたモデルデータの利用条件が、以前と異なっています – VRoid ヘルプ
同意するとモデルデータが読み込まれるのであとは遊ぶだけです！
かわいい！
ざっくり VRoid Hub と Vワールドを紹介しました。どちらも無料で利用できるので自分のお気に入りのモデルを探したり、そのモデルを使って遊んだりしてみてください。
バ美肉てっくみーてぃんぐを開催したよ
こんにちは～。わさびのりたろうです。
最近はセールで購入したFallout4 VRにハマっています。好きな武器はレーザーマスケットです。
「技術方面のお話をする企画やりたい！」というお声をいただいたので、今回はバ美肉に関する自分たちの知見を共有するミーティング、『バ美肉てっくみーてぃんぐ』を開催しました。 テックを謳いつつも内容はライトなものがほとんどだったため緩さを表現するのに平仮名にしてあります。
テックミーティングとは?という方はこちらのクックパッドさんの記事をどうぞ。
エンジニア全体ミーティング Tech MTGのすゝめ - クックパッド開発者ブログ
とにかくやってる様子を見せて
配信アーカイブを残してあるので、こちらからどうぞ！
動画にも使われているサムネイルはkumak1さんにお願いしました！素敵なサムネイルありがとうございました！
配信アーカイブ長すぎるのでざっくり教えて
アーカイブが2時間もあり全部見ている時間がないという方もいらっしゃるかと思うので、各登壇者の発表内容を紹介します。その登壇者の発表から始まるリンクも置いておくので合わせてご覧ください。
ヘラないバ美肉
お絵かきもできるし趣味でUnityのゲーム制作をしている kumak1 さん。今回の企画に合わせてバ美肉してくれました。自分のバ美肉手法とともに、受肉するバーチャル美少女とのヘラらない付き合いについて解説してくれています。バ美肉してみたいけれど自分にできるかどうかわからないし怖いという方におすすめです。
もう一人の私
私わさびのりたろうの発表です。私自身についてはブログや動画で日々発信をしていて改めて特定のトピックについて語りたいネタも思いつかなかったので、私の誕生から今日までを振り返るテーマにしました。私がどんな人でどんなことをしてきたのかを改めて皆さんに知っていただけたらと思います。ここだけの話、裏テーマとして「キャリアキーノート」を意識しながら作ったつもりです。キャリアキーノートが気になる方は hfm さんが良い記事を書いているのでそちらをご覧ください。
変身~バ美肉の可不可~
第2回目の動画にも出演していただいている あさけ ちゃんです。あの動画ではプロモーションムービーの脚本家兼演出家を担当してくれました。今回は、バ美肉を生物としての変化 = 変身と捉えて、その恩恵と可能性について語ってくれています。あさけちゃん自身もバ美肉して何がやりたいのか一時期悩んでいたそうですが、私はこうやって吹っ切ったという熱い思いが感じられる発表でした。
開発合宿でバーチャルオフィスを作ろうとしたお話
第2回目の動画の会場でもあったバーチャルオフィスを作ってくれた くろやん さんです。今回はそのバーチャルオフィス制作の裏側について開発者の目線からお話してもらいました。自分のブログでは解説しきれなかったことをたくさん喋っていただいたので裏側の技術について知りたい方はぜひ見てみてください。
バーチャルゲーム開発美少女おじさん
今回のゲスト枠兼トリのバビたん(Virtual Anonymous Beautiful Interface Tanks)です。これはネタバレになるのであまり詳しいことは言えないのですがこの発表を見る際は音量注意です。
まとめ
YouTube Liveによる動画配信のみで時間帯も22時半頃開始と遅かったのですが、当日は数十人の方が見てくださっていて自分が予想していたよりも多く驚きました。視聴者の皆さま本当にありがとうございました。
今回は登壇してくださったバーチャル美少女の方々みんなが主役でしたが、どの方も個性豊かで自分としては聞いていて全く飽きることはありませんでした。発表内容と順番について、事前に打ち合わせしたわけでもないのに内容の被りもなく、かつ順番に聞くことで前の発表がその登壇者の発表の補足になって助かるという奇跡もありました。一人で喋るだけではコンテンツとして微妙でも、人を募って発表大会のような構成を組むことで面白いコンテンツに昇華できる良い事例になったのではないかと思っています。
第2回目の開催は今のところ未定ですが、「この情報発信したい」「みんなとわいわい喋りたい」という方がいらっしゃいましたらぜひお声がけください！
最新のVRoidでVRChatに3Dアバターを送り出してみる
以前VRoidの3DアバターでVRChatの世界に入る記事を書きましたが、あれから二ヵ月ほど経って各ツールがだいぶバージョンアップされていたので、自分の書いた記事を見ながら差分について説明していきます。
今回使ったVRoidのバージョンは0.2.13-p1です。
VRMに出力したところから始めます。
必要なソフトウェアやパッケージを揃える
Unityのバージョンは変わらず、以下のUnity Packageのバージョンを上げてみましょう。
- Unity Package
- UniVRM-0.44_67a6.unitypackage
- VRCSDK-2018.10.02.10.29_Public.unitypackage
VRM形式の3DモデルをFBX形式にコンバートする
特に変更なし。
ただ、VRMインポート時に発生してたNormal Mapのエラーが解消されたのか出なくなっていました。
VRChat用に3Dモデルを整える
VRoidのモデル構成がだいぶ変わっていて今まであったUMARendererはBody, Face, Hairsに分割されてより分かりやすくなりました。
構成は変わりましたがシェーダーの変更の仕方は変わりません。
髪などが前から見たときに透けてしまうのが気になる方は該当のマテリアルのシェーダーをFlat Lit Toon LiteにしてCulling ModeをOFFにしましょう。(透けるのはマテリアルの裏側が用意されていないためだそうです)
ついでにリップシンクもやってしまいましょう。
Face MeshにはFaceを指定します。また、VRoidのアップデートによってシェイプキーのM_F00_000_Fcl_MTH_Closeがなくなった代わりにM_F00_000_Fcl_MTH_Neutralが追加されたのでそちらを使うようにします。
VRChatにアップロードする
特に変更なし。
以上で終わりです。お疲れさまでした。
お産合宿でバーチャルオフィスを作っておしゃべりしたよ
またまた会社のイベントでバ美肉しました。
前回のバ美肉ライブ後から徐々にVRやバ美肉に興味のある人が増えてきたので、個人ではできないより大きなことをやってVRでこんなこともできるんだよ～ということをより社内に広めたいなと思っていました。(ワンチャンVR機材を会社に導入してもらうきっかけも作れないかと考えてた)
そこにちょうどいいイベントがあったので勢いで参加することにしたのでした。
「お産合宿」はデザイナー🎨やエンジニア💻、ディレクター✍、カスタマーサービス📞、バックオフィス📃などの職種や所属する部署にとらわれず、普段は別々の仕事をしているさまざまな職種のパートナー（ペパボでは社員のことをパートナーとよんでいます）がチームを作り、自分たちが「もっとおもしろくできる」と思うものを同じ屋根の下🏠で寝食🍴を共にしながら存分に作る、そんな合宿です。
何をやるのか全く決めずに参加表明をしてしまったのですが、これに乗ってくれた方々がいて出来上がったチームがこちらになります。
バ美肉おじさんズ | お産合宿12 | GMOペパボ株式会社
何を作ったの?
VRChat上に、イベント会場などのリアル空間と中継できるバーチャルオフィス(仮)のワールドを作りました。 バーチャルオフィスの説明は後でします。
また、社内ではVRに興味ある方がまだまだ少なかったので、そのような人にも作ったものがどんなものなのか伝わるようにしなければならないので、プレゼン用のスライド資料とプロモーションムービーも作りました。
ちなみにチーム全体で作ったものはバーチャルオフィス、スライド資料、プロモーションムービーの3つが主なのですが、私個人は以下を担当しました。
かわいいうちの子たちです。
ラーラちゃん
撮影中～ #VRChat pic.twitter.com/0Ig3aMNibo
— わさびのりたろう (@ku00_) September 21, 2018
あすみちゃん
今日も一日お疲れさまでした #VRChat pic.twitter.com/nWKnBe8A37
— わさびのりたろう (@ku00_) September 24, 2018
VR演劇のようなプロモーションムービーはこちら!
なぜバーチャルオフィス?
冒頭で言った通りワンチャンVR機材を会社に導入してもらうきっかけも作れないかと考えてたので、これが実現できるようにVRをすでに業務に取り入れてる他社の例を出しつつ説得力のある提案にしたかったためです。
あとバーチャル空間なら美少女でいられるし、(たぶん)美少女にも会えるじゃないですか..!!
プレゼン用に作ったスライド資料の一部がこちらです。
バーチャルオフィスを支える技術
バーチャルオフィスはこんな感じです。
チームにUnity経験者がいましたがスケジュールの都合上リアルオフィスの完全再現とはいかず、VRChatのデフォルトワールドにいくつか装飾とギミックを加えたものになっています。
全体
会社のアイコン「ぺパポン」もあります。
SUZURIの公式忍者スリスリくんも遊びに来てくれています。
ここに動画が流れます。
イベント当日には品評会というものがあり、この時間に各チームが作ったものを紹介したり見て回ります。
私たちのチームでは作ったバーチャルオフィスに実際に入ってみて、お話しをするという体験コーナーを設けました。ただ、イベント会場にはバーチャルオフィスに入るための機材が用意できなかったため、会場にいる人と中継でバーチャルオフィスを繋いでコミュニケーションを取れるようにしました。そのときの様子がこちらの動画になります。
なぜこのような体験コーナーを用意したかというと、前回行ったバ美肉ライブで一方的なライブ配信になってしまって会場にいる人とコミュニケーションをとることができなかった反省を少しでも活かそうとしたためです。
システムを図解するとこんな感じです。
これ以外にも私の方ではVRChatをしながら裏でOBSを使ってYouTube Liveをしていました。こちらの配信が上の動画の元となっています。また、前回と同様に恋声を通しておしゃべりをしていました。
感想と反省
上で説明した体験コーナーは一見良さそうに見えますが、実際にやってみた感想としては、会場側の音声と映像を分けたことで映像側の遅延が気になってしまったり、VRChatから見れる会場の様子を映したスクリーンを片方が見れない(これはVRC_SyncVideoStreamの不具合?)などの技術的な問題が解決できなかったのが心残りでした。
良かった点としては、前回の反省を活かして会場にいるリアルの人とコミュニケーションをとることができたのが何より嬉しかったです。また、会場にいる人からは「リアルの姿を知っているだけに見ていると頭がバグる」、「名前を呼ばれると嬉しい」、「なんかわからないけど立ち寄ってしまう」などの感想もいただきました。このような生の声がリアル側の様子を見ながらすぐに返ってくるのはバーチャル側にいた自分にとっても面白い体験でした。
