1. ayayan-z

    Posted

    ayayan-z
Changes in title
+Cordovaでハイブリッドアプリをつくる 2016
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,177 @@
+## はじめに
+
+Cordovaは、ハイブリッドアプリ開発フレームワークの1つです。
+
+スマホやタブレットの普及が広まってきた時代、
+「全社員にスマホやタブレットが配布された。何か業務で使えるアプリをつくってくれないか。」
+などといった依頼を受けることが多々ありました。
+
+実際の提案時には、HTML+JSで、それっぽい動きをするプロトタイプを作って、お見せすることが多かったのですが、
+アプリとして触れた方がテンション上がるので、さくっとアプリに変換できるCordova(当時はまだPhonegapという名前でした)は、かなり重宝しておりました。
+
+アプリ開発からはしばらく遠のいていたのですが、ふと自分用に欲しいアプリを思いついたので、久しぶりにCordovaを触ってみることにしました。
+当時(2010年くらい?)から、かなりいろいろパワーアップしていて、びっくりです。
+この手の記事は山のようにありますが、環境構築〜アプリ作成まで、自分用の備忘録として残します。
+
+
+## 環境構築
+
+### 1. node.js をインストールする
+
+しょっぱなから違う!前はnode.jsなんて使わなかった。
+もともと自PCにインストールされていたので、手順は割愛。
+バージョンは最新じゃないかもだけどキニシナイ。
+
+```
+$ node -v
+v6.6.0
+$ npm -v
+3.10.8
+```
+
+### 2. cordovaをインストールする&動作確認する
+
+本家サイトのとおりに。
+https://cordova.apache.org/
+
+かっこよくなってる!
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/782c5eca-bd0c-fc00-e7b7-1daeed2a35a0.png)
+
+GET STARTED の記載の通りにやる。
+コマンドがコピーできるようになっている。やさしい。
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/9391bae4-e41e-2394-8b2c-52cdd15352e8.png)
+
+No4の手順までやると、ブラウザが起動されて、HelloWorld!かんたん。
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/1628efe9-04d0-b515-7e92-7d330dfa51b7.png)
+
+確認
+
+```
+$ cordova -v
+6.4.0
+```
+
+### 3. iOSエミュレータを動かしてみる
+
+#### 3.1 事前準備
+
+事前にXcodeのインストールが必要です。
+自PCにはインストール済みなので手順は割愛。
+
+#### 3.2 Cordovaにエミュレータを追加&起動する
+
+- Cordovaのインストール手順内で作成したProjectのカレントディレクトリに移動して、iOS用のplatformを追加する。
+
+```
+$ cd MyApp
+$ cordova platform add ios
+```
+
+- エミュレータを起動する
+
+```
+$ cordova emulate ios -d
+```
+起動した。はやい。
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/4be3c45c-faee-ae82-1a25-96a24004845b.png)
+
+
+### 4. Androidエミュレータを動かしてみる
+
+#### 4.1 事前準備
+
+Android環境は今の自PCには入っていないので、インストールした。
+
+- ダウンロード
+
+本家サイトより、Android Studio をダウンロード
+https://developer.android.com/studio/index.html
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/dbb283d7-a556-61bb-efe1-6e6b7fbcd987.png)
+
+なんかおしゃれ
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/b4505147-6c5f-0955-37b8-c7410c2c7925.png)
+
+- セットアップ
+アプリ初回起動時にセットアップ画面がでる。
+とりあえず何も考えず次へ次へでFinish。
+ 
+
+- パスを通す
+
+cordovaコマンドは、Android SDKに含まれているコマンドを内部で利用するため、パスを通す必要がある。
+自分の環境だとこう。
+
+```bash:.bash_profile
+export PATH=$PATH:/Users/aue/Library/Android/sdk/tools/
+export PATH=$PATH://Users/aue/Library/Android/sdk/platform-tools/
+```
+
+`.bash_profile` を更新したから再読み込み
+
+```
+$ source .bash_profile
+```
+
+- Cordovaで必要なsdkをダウンロードする
+
+コマンドラインより、Android SDK Manager を起動する。
+
+```
+$ android
+```
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/2d5aba59-903e-2496-eeea-a124d5b0b870.png)
+
+`SDK Platform` と `ARM EABI v7a System Image` を選んでインストールする。
+(今回のCordovaのバージョンでは24を入れろとなっていたので、Android7.0の中から選択)
+
+- Android エミュレータを作成する
+
+コマンドラインより、Android Virtual Device (AVD) Manager を起動する
+
+```
+$ android avd
+```
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/ea25d604-7ba5-d43c-cdd7-9b88fd6c00e3.png)
+
+
+`Create` ボタンよりエミュレータを作成する。
+
+こんなかんじで。なんとなくNexus5を選んでみた。
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/333f3878-6765-92b8-15f3-404cf16ca532.png)
+
+#### 4.2 Cordovaにエミュレータを追加&起動
+
+- Android用のplatformを追加する。
+
+```
+$ cd MyApp
+$ cordova platform add android
+```
+
+起動した!おそい...
+フライングで黒画面...
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/116449/ba23bddb-691b-795f-fac1-0497779c26dd.png)
+
+
+
+なんかエラーが発生してやり直したい場合は、一回platformを削除する。
+
+```
+$ cordova platform remove android
+```
+
+
+
+## 3. なんかアプリをつくる
+
+プロト職人もどきであった当時、自分の中では、Cordova+HTML+CSS+jQuery(jQuery mobile)の組み合わせが流行っておりました。
+なので今回もその組み合わせで!
+
+
+完成が今日に間に合わなかったので、後日アップしますmm
+たいしたものではないです。
+