見出し画像

Documentary of 「Web大好きフロントエンドエンジニアが、インタラクティブエンジニアの第一歩を踏み出すまで」

Think & Craft

「インタラクティブコンテンツを実装できるエンジニアになりたいです！」

2020年3月。弊社Think & Craft（当時Dentsu Craft Tokyo）の中途面接で、純粋無垢な目をキラキラ輝かせながら熱く語りました。

晴れて採用された僕は、まずWebGLを勉強して、Three.jsやBabylon.jsを駆使した演出のある3Dサイト実装が（すこーし）できるようになった。WebARも勉強して、8thwallでARコンテンツを実装できるようにもなった。フレームワークはVue.jsしか使えなかったけど、Reactも勉強して、Next.jsで複雑なWebアプリも作れるようになった。JAMstack構成のサイトも作れるようになった。
もちろん課題はある。アクセシビリティの勉強もしないと。あ、最近はデザインも勉強したいなって思ってる。クリエイティブコーディングも日課にしたい。まあ、これまでのキャリアは悪くなかったんじゃないかな！

できることは増えてそれなりに満足はしていました。
しかし一度立ち止まって、自分が走ってきた道を振り返って気づいたのです。

「あれ、結局Webしかやってない…。やっぱりインタラクティブコンテンツを作れるようになりたい…！」

このnoteは、「今までWebを専門的にやってきたけど、体験型コンテンツにもチャレンジしてみたい。でも、何から始めたらいい？」と悩めるフロントエンドエンジニアが、先輩方の助けを借りながらひとつのインタラクティブコンテンツを作り上げていくまでの記録です。
願わくば、同じようなエンジニアの皆さまの背中を押すような記録になれば嬉しいです。

目次


Webの好きなところ。インタラクティブコンテンツへの憧れ。

フロントエンドエンジニアの田辺と申します。
プロローグの通りWeb一本で頑張ってきたエンジニアで、インタラクティブコンテンツ制作を夢想しながらも結局Webばっかり作ってました。

弊社はWebサイト制作に限らず、UnityやUnreal Engine、TouchDesignerなどを活用したインタラクティブコンテンツを制作する案件もあり、フロントエンドエンジニアもインタラクティブエンジニアも同じチームに在籍しています。
つまり、手を挙げれば新領域にいつでもチャレンジできる環境であり、言い訳できない環境でもあるわけです。それでも僕は「Web大好きだから他はやらないし…！」というもはや意味不明な言い訳をかざしては、チャンスを棒に振り続けていました。

Webが好きな理由

フロントエンドエンジニアの武器はJavaScript。
この武器ひとつでブラウザで何でもできる。Webの大好きなところです。
ブラウザは、デバイスとインターネット環境さえあれば誰でも簡単にコンテンツを体験できる場所。アプリみたいにインストールの必要もありません。
ブラウザという環境でこそ生まれる実装制限はありますが、障壁を乗り越えようと試行錯誤して頑張るのも楽しい。実現できたときの達成感も半端ない。
もっと極端に、誤解を恐れず言えば、JavaScriptで解決できないことは大嫌いでした。

インタラクティブへの憧れ

しかし、面接時に語っていたインタラクティブコンテンツ制作への熱量は失っていませんでした。理由は以下の三つです。

  1. フィジカルな体験を実装して、ユーザーが夢中になって体験している姿を見たかったから。

  2. "打ち上げ花火"的なプロジェクトを担当して見たかったから。

  3. JavaScriptが使えない案件で、自分が選択肢にならないことが悔しかったから。

1つ目について、Web制作においてユーザーがコンテンツ体験している様子を拝める機会はほぼ無いです。SNSの反応をエゴサしてしまうことはありますが、ユーザーが端末の前で狂喜乱舞していようとその姿はお目にかかれないわけです。
一方、体験型コンテンツはユーザーの反応を直で見ることができます。
全身を動かしながら、喜怒哀楽の感情を発露している姿を見てみたい。
例えば小さなお子さまが、自分が制作したコンテンツを無邪気に楽しんでる姿を拝めたらとても幸せだなと思ったのです。泣きます。

2つ目。イベントや1日限りの体験型コンテンツとWebコンテンツの決定的な違いは、「終わりが明確であること」だと思います。
Webサイトはむしろローンチしてからが本番。
KPIが達成されるかハラハラしながら運用&改善していきます。
インタラクティブコンテンツはイベントが終了すれば終わり。
明確にプロジェクトにピリオドが打たれる感覚は、フロントエンドエンジニアにとってかなり新鮮です。
僕はこの性質を「打ち上げ花火的である」と表現します。

3つ目。「JavaScriptじゃ実装できないからアサインできないね」という状況になることが悔しかったということ。
先に断っておきたいのは、Webを極めるキャリアの是非を問うている訳ではないということです。魅力的なWebを生み出し続ける、偉大で尊敬している先輩方は業界内に多くいます。要は完全に個人のキャリア志向の問題だと思います。「Web以外にもチャレンジしたい」とずっと前から思っていて、「チャレンジできる環境がある」にもかかわらず逃げ続けている状況だな、と思ったのです。

JavaScriptで解決できないなら、違う言語で解決する。

広告制作において「この要件だと実装できませんね…」なんて日常茶飯事です。「じゃあ僕担当できません」を乗り越えて、代替案を提示し、実装できるエンジニアになりたかったのです。

そうして4年の時を経てようやく目覚めた（遅すぎる！）僕は、今度こそインタラクティブコンテンツを作れるようになろう、と決意しました。
弊社は学習中の技術のアウトプットとしてR&Dを制作する文化があるのですが、それに乗じてR&Dとしてインタラクティブコンテンツを作れたらいいなと思い立ちました。

測域センサーで何か作ってみよう！

第一歩を踏み出す上で、「ユーザーが身体を目一杯動かすような体験型コンテンツを作りたいな」と考えました。そのためには人間の動きをセンシングするセンサーが必要です。今回は案件でよく使用される北陽電機さんの測域センサーを使うことにしました。

測域センサーを勉強したいと相談したら、早速先輩方が勉強会を開いてくれました。手前味噌ですが、頼れるエンジニアがいる安心感がうちの自慢したいポイントです。

測域センサーはブラウザ上でコントロールできないので、TouchDesignerというソフトを使用することになります。数年前勉強して一度挫折しているツールです。
しかし、STARRYWORKSさんが開発しているHokuyoUtilを使用すると、TouchDesignerでセンサーを簡単に扱うことができます。

また、測域センサーの基本的な扱い方はこちらの記事がとても丁寧でわかりやすかったです。

恐怖のUnity入門

センサーで座標が取得できた後はビジュアルを生成する必要があります。
今後インタラクティブエンジニアとして案件に参画することを見据えて、弊社でよく使われるUnityで実装することにしました。
タイトルに"恐怖"と書いたのは、僕はUnityを得体の知れない奴だと思っているからです。
だってこれゲームエンジンですよね。2Dもしくは3Dのゲームが作れる。AR Foundationを使えばマルチプラットフォーム対応のARアプリも作れるし、今回みたいにインタラクティブコンテンツにも使えるし…

インタラクティブコンテンツ作るためのUnityの情報って世の中に全然落ちてないんですね… 結構困りました。
エンジニアの性として、新技術を学ぶ時はテンション高く入門したいものです。僕は単純なので、「このビジュアル出せるんだすっげ〜〜！」という感動さえ摂取できればテンションがあがります。WebGLが好きなのはそういうことです。Unityにそういうの無いかな〜と探していたら、「Visual Effect Graph（通称VFX Graph）」というものを教えてもらいました。簡単に言うとパーティクルをかっこよく大量にspawnできます。

VFX Graphの学習にはColosoの講座を受講しました。VFX GraphでSci-Fiエフェクトを実装するというテーマの講座で、Unityをインストールする入門レベルから説明して頂けるのでとてもありがたかったです。BlenderのGeometry NodesやAfter Effectsも学習できちゃいます。

Unity入門への恐怖心は、「カッコイイビジュアルを作れる！」というモチベーションで克服することができました。
C#の言語学習から始めたり、2D横スクロールゲームを作るチュートリアルからスタートしたら挫折していたと思います。
自分のご機嫌をどうやったら取れるのか、エンジニアとして自己分析することは大事かもしれません。

最初の試作品が完成

恐る恐るUnityに入門し、先輩方に助けて頂きながら最初に実装できたものがこちらの動画です。

UnityのVFX Graphで発生させたパーティクルが、体験者の脚に追従するシンプルなコンテンツです。

動画に写っている机上の左のPCが測域センサーを管理するTouchDesignerを起動しているPCで、右のPCがUnityでビジュアルを出力しているPCです。

プロジェクターで床にビジュアルを投影
測域センサーは箱の上に雑に置いた。床から少し離す必要があるらしい。

ファーストステップとしてはいい感じです。
ただこれだけだとシンプルすぎるので、もう少し体験型コンテンツっぽくしようということになりました。

  • 床に投影しているが、壁に投影してみるのも面白いのでは。脚ではなく壁に触れるようなコンテンツを作ってみよう。

  • ゲーム性があった方が面白いので、ただオブジェクトが追従するのではなくテーマ性があって難易度があるコンテンツを考える。オブジェクトの動きに複雑性のあるアニメーションがあればいいかも。

このようなFBを頂きコンテンツをブラッシュアップしていくことにしました。正直この段階ではUnityの勉強だけで手一杯だったので、あらためてシステム構成も考慮しながら実装し直すことにしました。

フロントエンドエンジニアの理不尽イライラポイント

今回のコンテンツを構築する上でのシステム構成が上図なのですが、ここでフロントエンドエンジニアの僕は壁にぶつかります。（僕だけ..？）
機材とかネットワークの構成とか全くわからないのです。聞いたことない用語のオンパレードにたちまち困惑し、動揺し、激昂することになります。
なぜこんなにもブチギレているのか、おそらく周りは不思議だったと思います。当然です。僕も理由がわからないです。
以下、Web畑の僕が抱いた、理不尽イライラポイントをご笑覧ください。

「おいUnityよ。こんな簡単に3Dオブジェクト出てきてなんか腹立つ」

完全に八つ当たりです。誰も悪くありません。理不尽です。
しかし僕はブチギレました。

ノードをぽちぽち繋げるだけでこんな簡単にCurlNoiseが…

VFX Graphくん、どうしてそんな簡単にCurl Noise出せるの？
WebGLだったらどんだけ大変か知ってる？
まずね、シェーダーを勉強する必要があるんだよ。
あとGPGPUも勉強しなきゃ。
いまWebGPUっていうのも使えるようになってきてるけどね、
とにかく大変なんだよ。
そうだこれ、パラメータすぐ調整できるのめっちゃ便利だな！
Webってパラメータ調整するUI作るのもめんどくさいからな〜！
ビジュアルのプロトタイプ作るなら、
WebGLよりUnityの方が優位性あるんだろうな。

みたいなことを、実装中ずっと考えてました。
プロトタイプ制作までのスピードはWebが勝ちますが、質の高いビジュアルを作るスピード感はUnityが勝つな、と思いました。

「JavaScript使えないの？もう帰っていいですか…」

「JavaScriptで解決できないなら、違う言語で解決する」ってカッコつけたけど、ごめんなさい前言撤回します。やっぱりJSで書けたらいいなって思います。

C#？知りませんそんなの。
MonoBehaviourってなんですか？
ああ、publicとかprivateとかなんだっけ… この言語、型に厳しいなあ。TypeScriptをちゃんと勉強してたらC#に馴染めたのかな…
ところでデバッグするときってconsole.log() じゃなくて Debug.Log()なんだ。さて、このObjectの中身なんだろう。

ってあれ、Objectの中身見れねえのかよ！
console.log()ならみれるのに…！！

「スイッチングハブって何？」

Webをやってたらまず出会わない単語ばっかりです。まず「スイッチングハブ」って何！？Wi-Fiルーターは知ってるけど、この機器は見たことないよ。

どうやらこの機器をローカルのネットワークのハブとして、測域センサー、TouchDesigner用PC、Unity用PCが有線LANケーブルで繋がれるとのこと。
インタラクティブエンジニアの皆さまには常識かもしれませんが、基本的なIPアドレスの設定うんぬんで数時間溶けました。

「OSCって何？」

そしてまた新しい単語がでてきた。「OSC」。
以下の記事がわかりやすかったです。

ローカルネットワーク間での機器同士の情報のやり取りで使われるプロトコルみたいです。今回はTouchDesigner用PCからUnity用PCへ座標を送信するために使用しました。Node.jsでもOSCが使えるらしいけど、聞いたことなかったな。そもそも普通のWeb作ってたらデバイス間で何かやり取りするってなかなかないもんな。
UnityでのOSCの取り扱いは、先輩から教えてもらった「extOSC」を使用しました。

最終的にできたもの

見えないような小さな段差にひとつひとつ丁寧に引っかかりながら、とうとうひとつのインタラクティブコンテンツが完成しました。

楽器をタッチすると音符のパーティクルが発生し音が鳴る、というコンテンツです。
前回との大きな違いは、測域センサーのセンシング対象を変えたこと。床ではなく壁に投影し、脚ではなく手を検知させることにしました。
最初は「手をかざし続けて常にオブジェクト追従させる」コンテンツを考えていたのですが、いまいち身体にオブジェクトがついてきている、という感触を得られなかったので「タッチする」というコンテンツになりました。
インターフェースデザインの文脈でよく使われる「自己帰属感」が、今回はタッチという行為に変更したことで得られたイメージです。

壁に触れた手を検知するため、雑に測域センサーを設置。
ほんとは固定したりしないといけないんだろうな..

楽器の3DモデルやアニメーションライブラリはAsset Storeで配布されているものを使用しました。アニメーションライブラリにはDOTweenを使用。理解せず使っていたのですが、「Webでいうところのgsapみたいなものだよ」と言われて納得しました。

まとめ

先輩方の助けを借りながら、インタラクティブエンジニアとしての「Hello World!」をなんとか踏み出すことができました。実際の案件では考慮すべき事項は多くあると思います。プロジェクターはどう吊るすのか、安全性はどう担保するのか、機材は何が適しているのか…

とはいえ、「アドバイスをもらいつつ、ギリギリ自走できるレベル」くらいにはなんとか成長できたかな…と思っています。実装中は散々文句を垂れてしまいましたが、インタラクティブコンテンツの制作を通して、Web制作に還元できることも多々あるなと実感しました。

  • 「パーティクルってこのベクトルをこう設定したらこういう動きになるよね」

  • 「パラメータがあるとやっぱり調整しやすいな。Web作る時もそうしよう」

  • 「型安全な言語っていいな。TypeScript勉強しようかな」

などなど。普段慣れ親しんでいるメディアを越境するコンテンツ制作を通して、得意領域の強化にも繋がる。キャリア拡張がもたらす良い効果を実感しました。まだひよっこですが。

最後に、こんなブチギレフロントエンドエンジニアの僕を懇切丁寧にサポートしてくださった心強い先輩エンジニアのみなさまには心から感謝申し上げます。
うちのチームは、多種多様な分野に精通する頼れる優しいメンバーが在籍しているところが自慢です。

現在メンバー募集中ですので、是非お気軽にご連絡ください。


Think & Craft 公式SNS
X：https://twitter.com/thinkandcraft
Instagram：https://www.instagram.com/_thinkandcraft/
Facebook：https://www.facebook.com/thinkandcrafttokyo/
YouTube：https://www.youtube.com/@thinkandcrafttokyo

Think & Craft Webサイト