ペアプログラミングしながら１日でアプリを公開した

会社の後輩が友達にアプリ作って？と頼まれたらしく、
ひょんなことから私がその後輩にアプリ開発を教えていました。
初めてペアプログラミングしながら爆速で１日でAndroidアプリを申請したので
そのときに使ったツールやノウハウをまとめておきます。
（アプリ申請用の
Google Play Developerアカウントの$25と
Apple Developerアカウントの$99以外
基本無料でいけます。）

# 作ったもの
しょっぱい世界時計アプリです。
[Google Play](https://play.google.com/store/apps/details?id=io.cordova.wwwclock)にてインストールしていただければ幸いです。
機能自体はしょっぱいですが、ペアプログラミングしたことと申請手順を覚えてもらうことの方が大事だと思ったのでそちらを優先しました。

<img width="257" alt="スクリーンショット 2016-10-03 15.44.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/19c693e2-68c0-bfed-a015-3827d4cd7c75.png">

# 開発環境

## ローカル環境構築

### Cordova
Cordova+OnsenUIにてAndroidアプリ開発してました。（iOSも対応可）
ローカルでの開発環境構築はこちらを参照ください
[３分間でiOS、Android両対応アプリを作る](http://qiita.com/teradonburi/items/5b214c74cddd776cb67f)

## ペアプログラミング環境構築

### GitLab
Privateリポジトリを[GitLab](https://gitlab.com/)に作成します。

![スクリーンショット 2016-10-04 17.16.51.png](https://qiita-image-store.s3.amazonaws.com/0/55077/2ebce825-2224-8a95-5902-4b740e6b2b05.png)

作成したリポジトリのプロジェクトにメンバーを適宜追加します。
歯車アイコンからMembersを選択します。
![スクリーンショット 2016-10-04 17.08.55.png](https://qiita-image-store.s3.amazonaws.com/0/55077/50668d71-7a51-7347-8aae-c3d31f7fb050.png)

<img width="818" alt="スクリーンショット 2016-10-04 17.15.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/331e9fa9-4a92-17cc-7f98-38195faddebb.png">



### Slack
Slackはチャットツールとしてももちろん、コミット履歴を残す意味でも重宝しました。

GitLabとSlack連携するには下記参照
参考：[GitLabとSlackの連携](http://qiita.com/txmy/items/975ef6e05842970fada0)

### Cloud9
ペアプログラミングするときは[Cloud9](https://ide.c9.io/)を使っていました。
オンラインで共同編集ができるIDEです。
（環境導入の手間も省けるし、共同編集できるのでハッカソン向けな気がします。）
クレジットカード登録は必要ですが無料で使えます。
新規Workspaceを作成します

![スクリーンショット 2016-10-04 17.04.23.png](https://qiita-image-store.s3.amazonaws.com/0/55077/6949c4c1-08b8-c034-5403-dea0a051dee3.png)

先ほど作成したGitLabのPrivateリポジトリを指定します。
アクセス制限するためにはPrivateのWorkspaceで作成します。

<img width="912" alt="スクリーンショット 2016-10-04 17.14.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/ec8544c7-26aa-10ab-e1c3-dbbcf9b179a7.png">


画面下のコンソールからコマンドが叩けます。
gitからコミット内容を取得します。

```
$ git pull
```

![スクリーンショット 2016-10-03 17.51.55.png](https://qiita-image-store.s3.amazonaws.com/0/55077/b3990eb2-c2db-ca59-3850-ae1b20085fdc.png)

Git経由で一々Commitして確認という手間も省けたため良い選択肢だったと思います。
（Cloud9で共同コーディング＆レビュー→git push→実機確認の手順にできたのが良い）

NodeJS(v4.5.0)がデフォルトで入っているため、npmコマンドにてモジュールをインストールできます。
Cloud9にてCordovaを実行できるようにするためにcordovaモジュールを入れます。

```
$npm install -g cordova
```

cordova serveコマンドにてブラウザでの動作確認ができます。
Cloud9で公開サーバのportは8080を指定します。

```
$cordova serve 8080
```

wwwフォルダのindex.htmlにアクセスしたい場合は
次のようなURLにてアクセスできます。
（cordova.jsが読み込まれた状態でブラウザ表示されます）

```
https://(プロジェクト名)-(アカウント名).c9users.io/browser/www/index.html
```

teradonburiアカウントのstartup_jabプロジェクトであれば次のようなパスになります。_（アンダースコア）は-（ハイフン）になることに注意してください

```
https://startup-jab-teradonburi.c9users.io/browser/www/index.html
```

![スクリーンショット 2016-10-03 16.11.58.png](https://qiita-image-store.s3.amazonaws.com/0/55077/e35dc9f0-5bde-bb25-6595-15830d2becca.png)

### Join me
審査作業手順の説明などの画面共有には[Join me](https://www.join.me/)を使いました。（無料でも十分使えます）
画面配信側はアプリをインストールする必要がありますが、
受信側はjoinmeアプリから払い出される次のようなURLをクリックするだけでブラウザにて配信側の画面操作が確認できます。

![スクリーンショット 2016-10-03 17.55.11.png](https://qiita-image-store.s3.amazonaws.com/0/55077/d280332a-7690-7e12-ee86-653688fd4dee.png)


セミナーとか勉強会とかでも活躍しそうですね。

# 実装

## Onsen UI
モバイル画面のレイアウト周りは[Onsen UI](https://ja.onsen.io/)に任せました。
[チュートリアル](https://ja.onsen.io/tutorial/)もよくできているので初めてでも何となくわかりました。
今回monacaを使わずに直接bowerにてインストールしました。
（monacaはプロジェクト数が増えてきたときに有料化するし、何となく依存したくなかったので）
ただし今回、ページ遷移周りに関してはAngular JSなどのJSフレームワークをいれなくて失敗したと思いました。
（どうやら単体だとhtmlファイル分割が上手くいかないようなので）

```
$bower init
$bower install onsenui
```

## Cordovaではまったとこ

### 文字化け
www/index.htmlに次のUTF-8コードのmetaタグを入れないと文字化けします。

```
<meta character="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">        
```

### CSP（Content Security Policy）の設定
クロスドメインでリソースを取得するため、CSPにドメインの許可設定をしなければなりません。google mapを使うためには次のようなCSPを使いました。

```
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ws: 'unsafe-inline' https://fonts.googleapis.com https://maps.gstatic.com https://csi.gstatic.com https://maps.googleapis.com 'unsafe-eval'; style-src 'self' * 'unsafe-inline' 'unsafe-eval';font-src *;media-src *">
```

### 申請に必要な設定項目
config.xmlにてアプリの向きを固定させたり
アプリIDやアプリ名を指定させたりする必要がありました。

* widget id:アプリID(Androidのパッケージ名、iOSのbundle identifer)
* nameタグ:アプリ表示名
* preference name="Orientation":アプリの画面向き固定させたい場合必要

```
<widget id="io.cordova.wwwclock" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>WWWClock</name>

    <preference name="Orientation" value="portrait" />
```

上記変更後、platformを作成する必要があります。

アプリアイコンとアプリスプラッシュ画像に関してはconfig.xmlで書き換える方法がわからなかったのでplatforms/android/resフォルダ（Android Studio）のアイコンやらスプラッシュ画像を直接差し替えました。

アイコン画像は[App Icon Resizer](https://resizeappicon.com/)を使って一括で作成しました。
iOS版は[iOS zip](http://ioszip.mashroom.in/)で作るとよさそうです。

# リリース
Androidのリリース版apkファイルは次のような手順で作成します。
参考：[Cordova で Android リリースビルドして Google Play リリース用 apk を作る方法](http://phiary.me/cordova-android-release-build-apk-for-google-play/)

zipalignのbuild-toolsに関してはAndroid SDKのバージョンにパスを直してください
（今回は23.0.1を使っています。）

```
$ cordova build android --release
$ cd ./platforms/android/build/outputs/apk/
$ keytool -genkey -v -keystore release.keystore -alias <エイリアス名> -keyalg RSA -validity 10000
$ jarsigner -verbose -keystore release.keystore android-release-unsigned.apk <エイリアス名> -tsa http://timestamp.digicert.com
$ ~/Library/Android/sdk/build-tools/23.0.1/zipalign -v 4 android-release-unsigned.apk android-release-signed.apk 
```

<font color="red">keystoreファイルに関しては
ファイルそのものとエイリアス、パスワードをなくさないようにしてください。
アプリのアップグレードに必要です。</font>

# 所感
今回は作るものも決まってたし、画面イメージも適当だったのでなんとかなりましたが
規模がある程度大きくなったりすると
prottでプロトタイプを開発して画面イメージを共有したり
trelloでタスク管理をして
さらにslack通知を連携させると色々捗る気がしました。