Web IDE cloud9でのスマホアプリ開発 using React

大抵の願いはcloud9で解決するのではないかと思う今日この頃、久しぶりに[Monaca](https://www.google.co.jp/search?q=monaca&oq=monaca&aqs=chrome..69i57j69i60l5.1671j0j4&sourceid=chrome&ie=UTF-8)を触って見ると[Monaca CLI](https://docs.monaca.io/ja/manual/development/monaca_cli/)なるものが公開されていました。

なんとこれを利用することで、Reactでのスマホアプリ開発ができるということでした。ということで詳細を見てみると、WindowsとMac対応とありました。ただ、自分のPCに色々とインストールすることがあまり好きではなかったので、cloud9でできないかなーと見ていたところ。。。

```bash:command
npm install -g monaca
```

なんかLinuxでも普通に動きそうです！
ということで、今回Monaca CLIを使ってcloud9上にスマホアプリ開発環境を構築してみました。

次に進む前に、[cloud9](https://c9.io/)のアカウントを取得して、Workspaceを作成しておいてください。また、今回は[Monaca](https://ja.monaca.io/)を利用するため、こちらもアカウントを作成しておいてください。
※Workspaceの説明は[cloud9環境でReactの検証① -導入-](http://qiita.com/tomine3/items/e6390cd6691a95a8ea53)でも参考にしてみてください。

1. Monaca CLI のインストール
-----
cloud9のTerminalからコマンド一発！

```cloud9:command
npm install -g monaca
```

2. プロジェクト作成
-----
下記コマンドでプロジェクトを作成します！
※「react-sample」はプロジェクトのディレクトリ名になります

```cloud9:command
monaca create react-sample
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/1e8f2180-4883-a3a6-99d8-88bd712142e2.png" width="400px">

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/2afe8afa-41f6-4586-f174-fa5633f0b970.png" width="400px">

どのフレームワークで開発するか聞かれるので、
「Onsen UI and React」を選択。
テンプレートの種類を聞かれるので、
「Onsen UI V2 Tabbar」を選択。
※ここは好みのもので良いですが、Reactと銘打ったのでReactにしました。

3. ブラウザ確認
-----
プロジェクトフォルダに移動して、previewコマンドを打ちます。
[cloud9で使用できるポート](https://docs.c9.io/docs/multiple-ports)は8080、8081、8082の3種類なので、
ここではpreviewコマンド実行時にオプションでポート指定をしてやります。

```cloud9:command
cd /home/ubuntu/workspace/react-sample/
monaca preview -p 8080
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/38d3b36f-6841-db22-5ccd-7e51c9e6048c.png" width="400px">

「HTTP server available on」と表示されれば、ビルドして「webpack dev server」の起動が完了しています。

ここで、http://127.0.0.1:8080/webpack-dev-server/ にアクセスと書かれていますが、このURLでは確認できません。
ブラウザでの確認では、https://[cloud9のworkspace名]-[cloud9のユーザ名].c9users.io:8080/webpack-dev-server/ でアクセスしてください。

ユーザ名やWorkspace名が分からない方は、IDEのURLから判断してください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/3d4f5a92-ef36-fdea-7cf3-a252556944dc.png" width="400px">

ページにアクセスし、下図のように表示されていれば成功です！

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/134b6650-e056-8704-08ca-86308cd99bd4.png" width="400px">

試しに「/home/ubuntu/workspace/react-sample/src/HomePage.jsx」を修正してみましょう。
※「Home Page」から「Hello World」に変更

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/138d40da-e30c-8102-b3c8-c712f7901972.png" width="400px">

ファイルを保存したタイミングでビルドが走り、Web画面が変更されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/91976/d0fd0c11-27e6-2c57-d6e7-8b4203f8c9c1.png" width="400px">

4. Androidアプリのデバッグビルド
-----
ログインしてビルドします！たった3行

```bash:cloud9
cd /home/ubuntu/workspace/react-sample/
monaca login
monaca remote build android --build-type=debug
```

まずMonacaのアカウントでログイン。
![monaca8.png](https://qiita-image-store.s3.amazonaws.com/0/91976/40a8717b-ceb0-4101-9287-4e09c615477d.png)

次にビルド！完了すると「/home/ubuntu/workspace/react-sample/build/」配下にapkファイルが出力されます！

![monaca8.png](https://qiita-image-store.s3.amazonaws.com/0/91976/1e4742ed-f336-64a5-58aa-59f681a20c5f.png)

これをスマホに叩き込んで終了！

5. あとがき
-----
まだ全然触れていませんが結構便利そうです。cloud9にインストールしてしまえば、プロジェクト共有も楽そうでいい感じです。
追加したいパッケージがあればnpmコマンドで追加すればよさそうですし、個人利用であればMonacaの無料プランで全然いけますね！

ただ、Monacaの特徴であるMonacaデバッガーが使えなさそう？な感じです。
こちらは後日調べてみたいと思います。知ってる人いたら教え(ry

6. 参考
-----
インストールの参考
https://docs.monaca.io/ja/manual/development/monaca_cli/overview/#install-monaca-cli
monacaコマンドについてはこちらから
https://docs.monaca.io/ja/manual/development/monaca_cli/