LoginSignup
54
64

More than 5 years have passed since last update.

@mako

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

Last updated at Posted at 2017-03-06
1 / 31

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

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

  • 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

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ページを変更しカメラを起動する

便利なサービス

プラグイン一覧

CodePush

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

Monaca

https://ja.monaca.io/

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

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

Ionic 2

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

Ionic Market

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

Ionic Creator

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

まとめ

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

ありがとうございました

54
64
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
54
64