2018年12月8日

プログラミング

【これからはじめるReact 360】 まずは環境構築

目次

  1. はじめに
  2. React 360とは
  3. 3Dオブジェクトを配置してみる
  4. まとめ

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay8です!

昨日はsorceryで実装するLINEログインについての記事でした。

sorceryで実装するLINEログイン

このシリーズではReact 360の使い方を、実際にランニングに関するVRを開発しながら解説していきます。
今回はFacebook社によるReactでVRコンテンツを開発可能な、React 360の環境構築やファイルの概要をご紹介します。

React 360とは

ReactはFacebook社が開発したJavaScriptライブラリです。
bageleeでも過去にこのような入門シリーズでご紹介しています。

Reactでスマートスピーカーのコマンド発音サービスを作ろう(1)【作りながら覚えるReact】

今回ご紹介するReact 360(旧React VR)は、ReactでWebVRの開発をする為のライブラリです。
VR(Virtual Reality)は皆さんご存知の通り、ヘッドセットを使用し仮想現実への「没入感」を味わうものです。

また、WebVRはその名の通り、Web上でVRを再現したものです。
ヘッドセットを使うVRとは異なり、スマートフォンをかざすことで擬似的に自分がその空間にいるような感覚を味わうことができます。
もちろん、ヘッドセットがない分没入感は弱くなりますが、より手軽なVR体験を行うことができます。

React 360はVRモードを用意しており、ヘッドセットをつけて本格的なVR体験をすることも可能です

では、WebVRのサンプルを見てみましょう。
bageleeの運営企業であるeishisでは、Web上でARやVRを実現可能なWebARWebVRを開発しており、そのサンプルコンテンツとなります。

WebVRゲーム – 寿司ポップ

プレイ動画はこちらです。
視点を合わせることでお寿司をキャッチしていくという簡単なゲームです。

このように、WebブラウザからVR体験することができるのがWebVRで、更にそれをReactで開発できる技術がReact 360(旧React VR)です。

3Dオブジェクトを配置してみる

環境構築

では、実際にReact VRで3Dのオブジェクトを配置していきましょう。
まず公式リファレンスに沿って環境を構築していきます。
※Mac OSでの開発フローをご紹介します。

まず、ターミナルからReact360のCLIをインストールします。
npm install -g react-360-cli

次にreact-360-cliからプロジェクトを作成します。
react-360 init bagelee360

Now enter the new project directory by running `cd bagelee360`
  Run `npm start` to initialize the development server
  From there, browse to http://localhost:8081/index.html
  Open `index.js` to begin editing your app.

メッセージの通り、bagelee360ディレクトリにcdで移動し、npm start を実行しましょう。

するとコンパイル後、http://localhost:8081/index.html にアクセスするとこのように表示されるはずです。

 2018-12-06 22.52.36.png (36.7 kB)

これで準備は完了です!

各ファイルやディレクトリの役割

ではReact360を構成する各ファイルやディレクトリをみていきましょう。

client.js
React360としてのインスタンスを生成し、背景画像を組み込み、index.jsのReactのコードを画面上にVRとしてレンダリングする役割を担っています。

index.html
アプリケーションを読み込むWebページです。

static_assets
画像や動画などの静的なアセッツを置いておくディレクトリです。

index.js
アプリケーションのメイン部分を担っています。
様々なコンポーネントを読み込み、表現することができます。
このファイルを中心に触っていきます。

package.json
React360ではnpmを使用し、様々なライブラリを読み込むことができます。
npmについてはぜひこちらの記事も参考にしてみてください。

npmのpackage.jsonと依存関係を理解しよう!

yarn.lock
インストールされたライブラリのバージョン情報が格納されています。
これにより、異なるマシンでも同じライブラリの同じバージョンでの環境構築が可能となります。

node_modules
読み込んだnode moduleがこのディレクトリに格納されます。

rn-cli.config.js
React Nativeの動作時の設定を行うことができるファイルです。

POINT!!

なぜReact Native?と思われた方もいらっしゃると思います。package.jsonをご覧頂ければわかりますが、実はReact 360では、一部React Nativeの機能を使用しています。StyleSheetをはじめReact Nativeに慣れている方は共通のお作法がある為に、すんなりとReact 360を理解することができるのではないでしょうか。

__tests__ディレクトリ
テストに関するファイルを置くディレクトリです。

index.jsを確認する

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class bagelee360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('bagelee360', () => bagelee360);

では、主な部分を解説していきます。

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

ここではreact-360のコンポーネントをimportしています。
他にも画像を扱うImageコンポーネントや3Dオブジェクトを扱うEntityなどもあります。
次回以降の記事では実際に3Dオブジェクトを配置していきます!

export default class bagelee360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text>
        </View>
      </View>
    );
  }
};

ここではViewコンポーネント内にTextコンポーネントでテキストを表示しています。
また、styleは後述のStyleSheetで定義されています。

ここでは先程のコードで当てているスタイルを定義しています。
React Nativeと同じStyleSheetを使用しています。

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

まとめ

ざっくりとですが、React 360の環境構築やファイルの構成をご紹介しました。
これから、index.jsをコンポーネント分割していき、また3Dオブジェクトなど様々なコンポーネントを使用し、リッチなランニングVRを作っていきます。

React360のお仕事に関するご相談

Bageleeの運営会社、palanではReact360に関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

2

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

asama

ando

iwasawa ayane

oshimo

yoko oshimo

異業界からやってきたデザイナー。palanARのUIをメインに担当してます。これからたくさん吸収していきます!

CONTACT PAGE TOP