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を作っていきます。

0

0

AUTHOR

eishis

Eishi Saito 総務

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

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

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

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP