HerokuとCloud9を利用してiPad開発

#目標
iPadアプリの開発、ではなく、iPadを使っての開発、を試してみる。
クラウド上の開発環境であるcloud9とherokuを利用すればクラウド環境のみでの開発が可能になるはず、ということで環境を整えてみた。

言語はPHPを想定。

#herokuアプリの作成
##PHPプロジェクトの作成
cloud9上にPHPのプロジェクトを作成する。

##ファイルの準備
とりあえず、index.phpだけを作っておく。  
中身はなんでもよいが、`phpinfo()`だけを表示させるようにしておいた。

```index.php
<?php phpinfo();
```

##herokuへログイン
cloud9上のbashコマンドからherokuにログインする。

```shell
$ heroku login
Installing Heroku Toolbelt v4... done.
For more information on Toolbelt v4: https://github.com/heroku/heroku-cli
heroku-cli: Adding dependencies... done
heroku-cli: Installing core plugins...
 done
Enter your Heroku credentials.
Email: Email: xxx@xxx.com
Password (typing will be hidden): 
Logged in as xxx@xxx.com
```

heroku toolbeltがインストールされて（かなり時間がかかった）ログイン情報を入力。  
するとログインされる。

##Git作成
通常通り作成。

```shell
$ git init
```

##herokuのアプリを作成

```shell
$ heroku create cloud9-heroku-test
Creating cloud9-heroku-test... done, stack is cedar-14
https://cloud9-heroku-test.herokuapp.com/ | https://git.heroku.com/cloud9-heroku-test.git
Git remote heroku added
```
	
アプリ名を指定して作っている。(指定しなくてもよい)  
gitを作成していれば、自動的にリモートに追加される。

##herokuへデプロイ
gitでコミットしておく。  
cloud9のコマンド上では日本語が上手く変換出来なかったので、コミットメッセージには日本語を使わないほうがよさそう。  
(元々使わない方がいいのかもしれないが）

```shell
$ git add .
$ git commit -m 'xxx'
```

プッシュしてデプロイ。

```shell
$ git push heroku master
```

とりあえずこれでherokuにPHPアプリをcloud9からデプロイ出来た。

#環境を整える
##composerを使用してデプロイ
herokuでPHP環境を作成するには、composer.jsonから、composer.lockを作成しデプロイすることでPHPと認識させる事が出来る。  
cloud9の環境ではcomposerは最初からインストールされている。  

compser.jsonの内容はherokuのドキュメントには以下のようにPHPのバージョンを指定する形での記述が載っている。

```composer.json
{
  "require": {
    "php": "~5.6.0"
  }
}
```
<https://devcenter.heroku.com/articles/php-support#selecting-a-runtime>

しかしこのまま`composer install`するとエラーが出てしまう。

```shellのlog
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - This package requires php ~5.6.0 but your PHP version (5.5.9) does not satisfy that requirement.

```

これはcloud9の環境が PHP5.5.9 で動作しているため、PHP5.6を指定する事が出来ない、というもの。  
仕方がないので、5.5.9指定で作成する。

```composer.json
{
  "require": {
    "php": "~5.5.9",
    "ext-mbstring": "*"
  }
}
```

ついでに`mbstring`も入れておいた。  
この状態でインストールする。

```shell
$ composer install
```

無事、compser.lockが作成された。

##ドキュメントルート
herokuではProcfileでドキュメントルートを指定出来るので、その指定もしておく。  
`Procfile`という名前のファイルを作成し、htdocsをドキュメントルートとして指定してやる。


```Procfile
web: vendor/bin/heroku-php-apache2 htdocs/
```

合わせて、`htdocs`というディレクトリを作成し、先ほどのindex.phpをその中に移してやる。  
以下の様な階層。

```ディレクトリ構造
/htdocs/index.php
/vendor/
/composer.json
/composer.lock
/Procfile
```

###cloud9のドキュメントルート
上記でherokuのドキュメントルートは変更出来たが、このままだとcloud9のドキュメントルートが変更出来てないため、ディレクトリがずれてしまう。  
なので、cloud9上のドキュメントルートも合わせて変更しておく。  

IDE下部にある、`PHP - Stopped`タブを選択し、右側にある`CWD`をクリック。  
(タブがなければ、Run Projectすれば表示される)

![cloud9_001.jpg](https://qiita-image-store.s3.amazonaws.com/0/8037/79fd2041-4a52-ddca-6cee-c85c9ea8562b.jpeg)

クリック後、表示されるウインドウでドキュメントルートにしたいディレクトリを選択し、`select`をクリック。  

![cloud9_002.jpg](https://qiita-image-store.s3.amazonaws.com/0/8037/8a5e5e09-c003-1eea-cdd4-d6297f7a1a40.jpeg)

で、Runするとドキュメントルートが変更される。

```起動ログ
Document root is /home/ubuntu/workspace/htdocs
```

（調べるとconfファイルを直接触る方法がよく載っていたが、仕様が変わったのかそれでは変更出来なかった。）

##gitignore
先程herokuにアップする際には全てアップしていたが、vendorディレクトリはアップしなくてよいので、`.gitignore`で除外しておく。

```.gitignore
/vendor
/.c9
/php.ini
```

ドットから始まる不可視ファイルはデフォルトでは見えないので、  
ディレクトリツリーのルートディレクトリの横にある歯車アイコンから、`Show Hidden Files`を選択して表示出来るようにしておく。

cloud9の環境の場合、gitに追加する際に削除したものがある場合、そのまま`git add`だけでは登録されないよう。  
表示される案内に従って、`--all`をオプションでつけると削除ファイルも含めて追加される。  
(`--ignore-removal`をつけると削除分は無視されるよう）

```shell
$ git add --all .
```

##デプロイ
で、再度herokuへデプロイ。
無事、herokuへデプロイされた。

<https://cloud9-heroku-test.herokuapp.com/>

#Github
続いてgithubでバージョン管理をすべくgithubにリポジトリを作成し、そちらにpushしてみる。

<https://github.com/k-usk/cloud9-heroku-test>

##リモートに追加
上記で作成したリポジトリのURLをリモートに追加する。

```shell-session
$ git remote add github https://github.com/k-usk/cloud9-heroku-test.git
```

で、githubへプッシュ。

```shell-session
$ git add .
$ git commit -m 'add file'
$ git push github master
Username for 'https://github.com': k-uxk
Password for 'https://k-usk@github.com': 
```

ユーザー名とパスワードを聞かれるので入力する。

##herokuへのデプロイ設定
githubへpushされたらherokuへ自動的にpushされるように連携させておく。

herokuアプリの設定画面から、Deployを選択し、GitHubをクリック。
連携させておく。

![cloud9_003.jpg](https://qiita-image-store.s3.amazonaws.com/0/8037/7d7c6400-60b9-9222-3d9e-62fa0011b9b2.jpeg)

連携後、先程作成したリポジトリを選択し、接続する。
接続後、その下にある、`Automatic deploys`の`Enable automatic deploys`のボタンをクリックして、自動でデプロイされるように設定しておく。
これで、設定したgithubのリポジトリのmasterブランチにpushしたらherokにデプロイされるようになった。

##githubのsshでプッシュ
githubにhttpsでプッシュしていると都度パスワードやらを聞かれてめんどくさいので、sshでプッシュしてみる。

まず、cloud9のホーム画面から(IDEではない)右上の歯車マークをクリックしてセッティグ画面へ遷移。

![cloud9_005.jpg](https://qiita-image-store.s3.amazonaws.com/0/8037/839b0e08-1890-80b8-bf06-399bfa099252.jpeg)

左メニューからSSH Keysをクリックすると、Default SSH keyが表示されるのでそれをコピペしておく。
(show ssh keyなどをクリックする必要があったかもしれない。）

次にGithubのSetting画面から、SSH Keysを開き、先程コピーしたSSHキーを登録する。
これで準備は完了。

cloud9のIDEに戻り、gitのリモートにgithubのsshのURLを追加。
これでユーザー名などを聞かれることなくプッシュ出来るようになった。

#実践
おわかりいただけただろうか
これでブラウザのみでの開発が可能となる、とでもいうのだろうか。

iPad Air2で動作確認してみた。

結果は……cloud9のIDEが重すぎてまともに動作しない。
なんとかかんとかherokuにデプロイまでは出来たが、とても耐えられるレベルではなかった。

#まとめ

iPadのみでの開発は、まだ早い。と思う。※

※iPad Proは試してないのでもしかしたらいけるのかも。