Web初心者だけど1週間で作れた!ちゃちゃっとWebRTC・WebAR をモノにして、遊んじゃいません?

写真:茄子川導彦さん(右)とスタッフの村上(左)

16:00~16:45に渓谷ステージで行われた、茄子川導彦さんのセッションレポートです。
このセッションでは参加者様が多く、イスのみの増席では足りず、立ち見で参加された方もいらっしゃいました。

スピーカー紹介

DTPデザイナーでMUDディレクター、さらにAdobe Illustrator技術者として数々の登壇歴もある茄子川さん。だけど、Webはまだまだ初心者という自己紹介から始まりました。

『Web初心者だけど1週間で作れた!ちゃちゃっとWebRTC・WebAR をモノにして、遊んじゃいません?』という、その「Web初心者」ならではの目線でご自身が開発したWebアプリのご紹介を含め、簡単な作り方の方法をご紹介していただきました。

WebRTC

WebRTCとは、Web上で動くリアルタイムコミュニケーション(Real Time Communication)のことで、サーバーを介せず直接つなぐことができる(ピアツーピア通信)規格をこう呼ぶそうです。
茄子川さん自身がWeb初心者で詳しいことは解らないそうですが、そういう初心者あるあるからお話が始まりました。

実際にWebRTCのサイトを開いて「英語ばかりで全く解らない…」とおっしゃっていました。そのなかで、WebRTCのAPI「SkyWay」は説明やチュートリアル、さらにはコピペで作れるデモが掲載されているページも日本語で用意されている事を紹介され、「日本語だから、私読めるんです。」と冗談交じりのセッションに、参加者さんからも頷きの声。

「SkyWay」を使ったWebRTCでの映像配信はどういう感じで繋がるのかを紹介されていました。

  • SkyWayを読み込む
  • SkyWayでpeerをつくる
  • 自分のカメラ映像を取得
  • 複数同時に繋がることができる「ルーム」に接続する
  • 送られてきた映像データを表示する

映像だけでなくデータを飛ばすこともできるそうです。実際にその「SkyWay」を利用されて制作された「HUNT A CLUE」でデモをされました。

WebAR

WebARとは、Web上で動くAR。とそのままの意味でした。
ですが、ARはアプリが必要だったり特別な機材が必要だったりというイメージがありましたが、それがWebでできるということなんですね。

WebARを作る時に必要なものとして下記を紹介されていました。

  • A-FRAME:VR空間をhtmlを組み立てるように作れるもの
  • AR.js:A-FRAMEで作ったVR空間をARにするもの

また、ARで必要な3Dモデルを準備するのに簡単な下記のご紹介がありました。

  • Poly:3Dモデルをダウンロードできるサイト
  • MagicaVoxel:ボクセルの3Dモデルをお絵かき感覚で作れるアプリ

 

セッション後にインタビューしてみた参加者様の声をご紹介します。

何となく全体の“こうしたらこうできる”っていうのが理解でき、コピペでも作れることがわかりハードルが低く感じられたので、自分でもデキそうだなと思いました。

まとめ

セッションに参加されている皆さんや廊下で立ち見参加されている皆さんから「へぇ~!」「すごい!」という声が時折聞こえ、Web初心者という言葉を疑ってしまうほど圧巻のセッションでした。
作り方を実演していただいて、「もしかしたら、自分もWebRTCやWebARでなにかを作ることができるかもしれない…!」と思いました。

セッション資料

近日公開予定!

レポーター:黒﨑さん

当日スタッフの黒﨑さん(右)。見るからに癒し系の彼女。

この記事を書いた人

creative-hunt