Cordovaでつくるハイブリッドアプリ

##ネイティブアプリの開発といえば...

---

##ネイティブアプリ開発言語

- Java
- Objective-C
- Swift


---

##クロスプラットフォーム開発環境

言語|開発環境
---|---
Java|libGDX
C++|Cocos2d-x
C++|Qt
Python|Kivy
Ruby|RubyMotion
JavaScript|Cordova
JavaScript|ReactNative
JavaScript|Meteor
C#|Unity
C#|Xamarin
etc...

---

##ハイブリッドアプリ

ネイティブアプリをWebの技術(HTML/CSS/JavaScript)で開発したものの総称

- 端末の機能にアクセスできる
- クロスプラットフォーム
- WebViewである

---

##Cordova

![imgres-2.jpg](https://mapion.qiita.com/files/3516a499-708e-b87b-172d-84f7c896ca62.jpeg)

HTML/CSS/JavaScriptでハイブリッドアプリを作成できるフレームワークです
元々はPhoneGapという名称でした

---

##やること

- Cordovaのインストール
- プロジェクトの作成
- IPhoneで確認
- アイコンとスプラッシュを変更
- TOPページを変更しカメラを起動する

---

##Cordovaのインストール

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

---

## プロジェクトを作成

```
$ cordova create MyApp
$ cd MyApp
```

コマンドはプロジェクト直下で打つので移動します

---

## ディレクトリ構造

ファイル・フォルダ|概要
------------------|----------------------
config.xml|設定ファイル
hooks/|Cordovaコマンドをカスタマイズするファイルを格納
platforms/|buildしたplatformごとのファイルを格納
plugins/|インストールしたプラグインが格納
www/|platformsに展開されるファイルが格納

## www

ファイル・フォルダ|
------------------|
index.html|
css/index.css|
js/index.js|
img/|

---

## 主なコマンド

コマンド|概要
---|---
cordova create myApp| プロジェクトを作成
cordova platform add ios| platformを作成
cordova platform rm ios| platformを削除
cordova compile ios| ソースコードをplatformに更新
cordova prepare ios| 設定ファイルや画像ファイルをplatformに更新
cordova build ios| prepare+compile
cordova plugin ls | インストール済みのプラグインを確認
cordova plugin add | プラグインを追加
cordova plugin rm | プラグインを削除

---

##IPhoneで表示してみる

---

##config.xmlを編集

```config.xml
<widget id="com.hoge.huga" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
```
idを変更します

```config.xml
<name>はじめてのCordova</name>
```
アプリ名を変更します

```
$ cordova platform add ios
```

iosのプラットフォームを作成します

```
platforms/ios/はじめてのCordova.xcodeproj
```

xcodeprojファイルが作られるのでxcodeで開いて実行します
※xcodeの説明は省きます

---

## アイコンとスプラッシュを変えてみる

---

## resディレクトリを作成

ファイル・フォルダ|概要
------------------|----------------------
config.xml|設定ファイル
hooks|Cordovaコマンドをカスタマイズするファイルを格納
platforms|buildしたplatformごとのファイルを格納
plugins|インストールしたプラグインが格納
www|platformsに展開されるファイルが格納
res|アイコンとスプラッシュ画像を格納 

---

## resの直下に画像を追加

ファイル・フォルダ|
------------------|
ios|
ios/Icon-40.png|
ios/Icon-40@2x.png|
ios/Icon-50.png|
ios/Icon-50@2x.png|
ios/Icon-60@2x.png|
ios/Icon-60@3x.png|
ios/Icon-72.png|
ios/Icon-72@2x.png|
ios/Icon-76.png|
ios/Icon-76@2x.png|
ios/Icon-Small.png|
ios/Icon-Small@2x.png|
ios/Icon.png|
ios/Icon@2x.png|
screen|
screen/ios|
screen/ios/Default@2x~universal~anyany.png|

下記のサイトで簡単に画像をリサイズできます
https://resizeappicon.com/

---

## プラグインのインストール

```
$ cordova plugin add cordova-plugin-splashscreen
```


---

## config.xmlを編集

```config.xml
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <icon height="180" src="res/ios/icon-60@3x.png" width="180" />
    <icon height="60" src="res/ios/icon-60.png" width="60" />
    <icon height="120" src="res/ios/icon-60@2x.png" width="120" />
    <icon height="76" src="res/ios/icon-76.png" width="76" />
    <icon height="152" src="res/ios/icon-76@2x.png" width="152" />
    <icon height="40" src="res/ios/icon-40.png" width="40" />
    <icon height="80" src="res/ios/icon-40@2x.png" width="80" />
    <icon height="57" src="res/ios/icon.png" width="57" />
    <icon height="114" src="res/ios/icon@2x.png" width="114" />
    <icon height="72" src="res/ios/icon-72.png" width="72" />
    <icon height="144" src="res/ios/icon-72@2x.png" width="144" />
    <icon height="29" src="res/ios/icon-small.png" width="29" />
    <icon height="58" src="res/ios/icon-small@2x.png" width="58" />
    <icon height="50" src="res/ios/icon-50.png" width="50" />
    <icon height="100" src="res/ios/icon-50@2x.png" width="100" />
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
</platform>
```
---

## config.xmlとresの反映

```
$ cordova prepare ios
```

xcodeでアプリを再度実行します

---

##アプリからカメラを起動

---

## プラグインのインストール

```
$ cordova plugin add cordova-plugin-camera
```

---

##ファイルの中身を書き換える

```www/index.html
<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
	    <h1>カメラ</h1>
            <div>
                <button id="camera">カメラ起動</button>
                <div>
                    <img id="myImage" />
                </div>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
```

```www/js/index.js
var app = {
    initialize: function() {
	document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
	var button = document.getElementById("camera");
        button.addEventListener("click", openCamera);
    }
};

app.initialize();

function openCamera() {
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}
```


```www/css/index.css
#myImage {
    width: 100%;
}
```

---

## ソースの反映

```
$ cordova compile ios
```

xcodeでアプリを再度実行します

---

##やったこと

- Cordovaのインストール
- プロジェクトの作成
- IPhoneで確認
- アイコンとスプラッシュを変更
- TOPページを変更しカメラを起動する

---

##便利なサービス

---

##プラグイン一覧
https://cordova.apache.org/plugins/

---

##CodePush
https://microsoft.github.io/code-push/

- githubと連携してzip化したwwwファイルをユーザーの端末に配ることができるサービス
- 審査なしで処理を変えることができる
- 一応アプリの内容を大きく変えないという前提で規約的にはセーフ
- プラグインの追加はできません

---

##Monaca
https://ja.monaca.io/ 

ブラウザ上でハイブリッドアプリが作れるクラウドIDE

- 日本製なのでドキュメントが豊富
- スマホっぽい見た目が簡単に作れる(Onsen UI)


---

##Ionic 2

http://ionicframework.com/docs/v2/intro/installation/

- Cordova用のフレームワーク
- 世界的にはこっちが有名
- スマホっぽい見た目が簡単に作れる
- JSフレームワークはAngular2

### Ionic Market
Ionic用のテンプレートやプラグインが売っている
https://market.ionic.io/

### Ionic Creator
画面上からパーツを配置してアプリが作れる
https://creator.ionic.io/

---

## まとめ

- ECサイトやニュースサイトのアプリ、モック作成にはハイブリッドアプリはすごく効果的だと感じました
- これからハイブリッドアプリを作るならMonacaかIonic2で

---

##ありがとうございました