ReactでVR空間が作れてiPhoneでグルグル動かせるらしいので触れて見る【React 360】

※12月1日 リンクを修正しました
## 約１年前の記事なので情報が古いかもしれません
<img width="1251" alt="Image 34.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/d30bbd1c-60af-c4c4-d804-abcb1a6a70d8.png">


VRとReactに興味があったので、React 360に触ってみます。


## React 360とは?

> React 360は、Facebook社製の3DおよびVR空間上のユーザーインターフェイスを実装するためのフレームワーク
> https://qiita.com/shiruco/items/3e77babe80a373c71fd5

公式サイトはこちらになります
https://facebook.github.io/react-360/

## React 360のインストール

#### react-360-cliのインストール
npm
```npm install -g react-360-cli```
yarn
```yarn global add react-360-cli```

#### 環境を構築する
```Bash
mkdir workspace //作業用のディレクトリを作成します
cd workspace

react-360 init Hello360 // 今回はHello360というreact-360のプロジェクトを作ります
cd Hello360
```

これで環境ができあがるので実行してみます。
実行する
```yarn start```

ローカルサーバーが立ち上がるのでアクセスします。
http://localhost:8081/index.html
<img width="1172" alt="Image 35.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/7ef7bcce-b864-2d04-1b92-5fea93c73f7f.png">


実機で確認
ローカルホストで立っているサーバーに対して同じLAN内にいるiPhoneからアクセスをしてみます。
```http://ホストのIPアドレス:8081/index.html```

めっちゃグリグリ動かせる

![Routput5.gif](https://qiita-image-store.s3.amazonaws.com/0/257048/80137bbd-e214-75ae-4588-7bbe9496fed4.gif)

動かせることが確認できたので少しいじってみたいと思います。

```Bash:tree
.
├── __tests__
├── client.js
├── index.html
├── index.js
├── node_modules
├── package.json
├── rn-cli.config.js
├── static_assets
└── yarn.lock
```

initした直後のファイル構成はこの様になっており、実際いじるファイルは index.js  とclient.jsの２ファイルになるかと思います。
https://facebook.github.io/react-360/docs/explore-code.html
https://facebook.github.io/react-360/docs/explore-code.html
## index.js
実際にアプリのメインのコードをこちらに記述します。


## client.js
ランタイムに接続するために使用します。
React 360のインスタンスを作成する。
アプリを初期化するためのオプションを渡すことができる。

## React 360が提供しているコンポーネント
使用できるコンポーネントは５つあるようです。

- View
- Text
- Image
- Entity
- VrButton

init時のindex.jsです。

```Javascript:index.js
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class Hello360 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('Hello360', () => Hello360);
```


単純にボックスを重ねてみます。

```Javascript:index.js
export default class Hello360 extends React.Component {
    render() {
        return (
            <View style={styles.panel}>
                <View style={styles.greetingBox}>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>

                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                </View>
                <View style={styles.greetingBox}>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>

                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                    <Text style={styles.greeting}>
                        Welcome to React 360
                    </Text>
                </View>
            </View>
        );
    }
};
```
<img width="863" alt="Image 36.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/4981496b-e8a2-0a5b-9876-b3bbf4f08181.png">

縦に２列並びました。VRなのでどうせならぐるぐる回転しながら全画面を見たいので、横に並べてみたいと思います。横に並べるにはCSSの方を少しいじります。

```Javascript:index.js
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,
    },
});
flexDirectionを指定して見ましょう。
const styles = StyleSheet.create({
    panel: {
        // Fill the entire surface
        width: 1000,
        height: 600,
        backgroundColor: 'rgba(255, 255, 255, 0.4)',
        justifyContent: 'center',
        alignItems: 'center',
flexDirection: "row",
    },
    greetingBox: {
        padding: 20,
        backgroundColor: '#000000',
        borderColor: '#639dda',
        borderWidth: 2,
    },
    greeting: {
        fontSize: 30,
    },
});
```

<img width="860" alt="Image 37.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/dd8a6446-a4e5-be21-a15d-6047c0fb6a29.png">

横並びになりました。

タップできるようにする。
タップできるようにするにはVrButtonのコンポーネント新たにインポートします。

```Javascript:index.js

index.js
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    VrButton
} from 'react-360';

```

importしたVrButtonはrender内で使用します。View コンポーネントと同じような機能を持っているようなので、詳細は２つのコンポーネントのドキュメントを御覧ください。

> https://facebook.github.io/react-360/docs/vr-button.html
> https://facebook.github.io/react-360/docs/view.html#props

## SHOWボタンがされたらアイコンが表示されHIDEボタンがタップされたらアイコンを消すようにします。

## VRの画面上にタッチできるイベントを追加する。

```Javascript:index.js
import React from 'react'
import { AppRegistry, StyleSheet, Text, View, VrButton, Image } from 'react-360'

export default class Hello360 extends React.Component {
  state = {
    imageUrl: ''
  }

  render() {
    return (
      <View style={styles.panel}>
        <VrButton
          style={styles.greetingBox}
          onClick={() =>
            this.setState({
              imageUrl: ''
            })
          }
        >
          <Text style={styles.greeting}>Hide</Text>
        </VrButton>
        <Image style={styles.image} source={{ uri: this.state.imageUrl }} />
        <VrButton
          style={styles.greetingBox}
          onClick={() =>
            this.setState({
              imageUrl:
                'https://pbs.twimg.com/profile_images/1037603664863449088/THB1myp8.jpg'
            })
          }
        >
          <Text style={styles.greeting}>Show</Text>
        </VrButton>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1200,
    height: 600,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2
  },
  greeting: {
    fontSize: 30
  },
  image: {
    padding: 100,
    width: 300,
    height: 300
  }
})

AppRegistry.registerComponent('Hello360', () => Hello360)
```


変更点

- state
- onClickの動作
- Imageコンポーネント

## 現在の画像のURLを保持しているStateの定義

```Javascript:index.js
state = {
    imageUrl: ''
  }
```


## クリック時の動作
VrButtonコンポーネントではボタンがタッチされたときに起こる挙動を書きます。

```Javascript:index.js
<VrButton
          style={styles.greetingBox}
          onClick={() =>
            this.setState({
              imageUrl:
                'https://pbs.twimg.com/profile_images/1037603664863449088/THB1myp8.jpg'
            })
          }
        >
          <Text style={styles.greeting}>Show</Text>
</VrButton>
```

## Imageコンポーネント
Imageコンポーネントを利用するためにまずImageコンポーネントをインポートします。

```Javascript:index.js
import { AppRegistry, StyleSheet, Text, View, VrButton, Image } from 'react-360'
```
利用方利用方法はドキュメントにある通りの使い方をします。 this.state.imageUrlには先程指定した値が入ります


```Javascript:index.js
<Image style={styles.image} source={{ uri: this.state.imageUrl }} />
```


## 完成

![Routput5.gif](https://qiita-image-store.s3.amazonaws.com/0/257048/053da804-dd0f-4836-a20a-dd43bbc2996e.gif)


早速動かしてみるといい感じに動きました。取り敢えずここまでReact 360に触れて見たでした。


Twitter https://twitter.com/mxcn3
GitHub https://github.com/yushimatenjin
 必要とあればこちらのアカウントに上げたいと思います。


## 追記
### デプロイまでを行うQiitaを書きました。
> ## React 360で作ったウェブページを今流行りのNetlifyを使ってサクッとデプロイをする
> https://qiita.com/yushimatenjin/items/54e03310a0bb2c813b7a