PlayCanvas Editorで使われているUIのフレームワークがオープンソースになった

PlayCanvas EditorのUIを構築しているフレームワークがオープンソースになりました。
コンポーネントの確認〜Reactで使用するところまでを紹介します。

オープンソースとなったプロジェクトはGitHub上に公開されています。
https://github.com/playcanvas/pcui

### 使用方法

##### 1. リポジトリを`clone`

```bash

git clone git@github.com:playcanvas/pcui.git
cd pcui
```

##### 2. 依存するパッケージのインストール

```bash

npm install
```


##### 3. `storybook`でコンポーネントの中身を確認
storybookで整理されているコンポーネントを確認します。

```bash
npm run storybook
```

### storybookのページへアクセス
![](https://i.imgur.com/jK7IJ0R.png)

storybookを実行すると、コンポーネントの一覧をウェブページで見ることができるようになります。

下記のページにアクセスして使えるコンポーネントが確認できます。

Local:            http://localhost:9009/       
On your network:  http://192.168.11.10:9009/ 

### 
このような形でコンポーネントの一覧が確認できます。


![](https://i.imgur.com/hqQ0MUX.png)

### コンポーネントをReactで使用する
コンポーネントをReactで使用するには、ビルドをすることで使えるようになります。

NPMのパッケージも公開されているようなのでパッケージを利用します。

npmパッケージのリポジトリはこちら
https://www.npmjs.com/package/@playcanvas/pcui

PCUIのドキュメントはこちらにあります。
https://playcanvas.github.io/pcui/react/


#### React.jsのプロジェクトを作成

Reactの公式サイトを参考に新規プロジェクトを作成します。
https://ja.reactjs.org/docs/create-a-new-react-app.html

```bash=
npx create-react-app my-app
cd my-app
```


#### PCUIをインストール
```
npm install @playcanvas/pcui
```

#### App.jsを書き換える
ドキュメントやStorybookを参考に`/src/App.js`を書き換えます。
https://playcanvas.github.io/pcui/react/

今回はシンプルにラベルとテキストインプットを表示しています。

```App.js
import React from 'react';
import { Label, TextInput } from '@playcanvas/pcui/pcui-react.js';

function App() {
  return (
    <div className="App">
        <Label text="Hello World" />
        <TextInput placeholder="Hello" />
   </div>
  );
}

export default App;
```

##### Reactのプロジェクトを起動します。
```bash=
npm start
```


### 起動画面

![](https://i.imgur.com/RaqLnPY.png)

起動するとPlayCanvasでお馴染みのUIの画面を作成することができます。
今回の記事で、意見、質問などが有りましたら [@mxcn3](https://twitter.com/mxcn3)までお願いします。


<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)


</font>

<font color="OrangeRed">
その他関連

- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>

### PlayCanvasのユーザー会のSlackを作りました！

 少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)