Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

0章 連載内容まとめ -【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る AngularJS OnsenUI Monaca Cordova

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

f:id:duo-taro100:20160218004611p:plain

0章 連載内容まとめ 

現在、「AngularJSの基本操作」という内容の記事を何回かに分けてまとめているけど、このブログの主なテーマの一つがハイブリッドアプリ開発なので、並行して、実際にアプリを作っていく様子を細かくまとめていく。すでにほとんどの機能が完成しているので、開発を遡っての紹介になる。

今回はその連載でどのような内容をまとめていくかを考える。

 

まず使う環境・フレームワークは以下の通り。

 

・Cordova(当面はMonacaを使った開発）

・OnsenUI

・AnglarJS

 

Monacaなどを使わないでもいいけど、個人での開発ならMonacaの無料版でも十分。

実際にはMonacaで開発を行い、それを以下の連載で紹介したCordova開発環境に落とし込んで、リリースまで実施する。

it-innovation.hatenablog.com

 

 

続いて、まとめていく内容。状況に応じて変更するので、現時点での考え。

cssに関しての説明はしない予定。

 

0.5章 アプリの設計
1章 UI開発

1-1【UI開発】OnsenUIを使ったページ遷移の実装1【tabbar編】

1-2【UI開発】OnsenUIを使ったページ遷移の実装2【Navigator編】

1-3【UI開発】OnsenUIを使った画面内スクロールの実装【ons-carousel 】

1-4【UI開発】OnsenUIを使ったリストの実装【ons-list】

1-5【UI開発】OnsenUIを使ったフォームの実装【ons-input・ons-switch】

f:id:duo-taro100:20160322234952p:plain

 

2章 機能実装

2-1 【機能実装】一覧画面の実装 - Angularのng-repeatを使ってリストを表示 -【ng-repeat】

 

以降、追記予定。。。

f:id:duo-taro100:20160322234907p:plain

 

3章 リリース

未定（実装完了後のリリースまでをまとめる予定）

 

f:id:duo-taro100:20160218004753j:plain

 

 

1-2.【AngularJS】データモデルをビューへ表示する② - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作 AngularJS

【連載】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

1-2.【AngularJS】データモデルをビューへ表示する②

 

 

前回の記事では、用意したデータモデルをビューへ表示させる方法をまとめた。

it-innovation.hatenablog.com

 

今回は、inputなどへ入力した値をビューに反映する方法についてまとめていく。

この方法ではjavascriptファイルは使用しないので、htmlのみの編集。

 

<!DOCTYPE html>

<html ng-app>

<head>

　<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

</head>

<body>

　<div>

　　<input type="text" ng-model="greet">

　　<p>{{greet}}</p>

　</div>

</body>

</html>

 前回と大きく異なる点は「モジュールとコントローラ指定の有無」。

今回に限って言えば、自分で定義したモジュールやコントローラを使用していないので、ここで指定する必要はない。（jsファイルを読み込んでないので、指定すると正常に動作しない）

実際にアプリを作成する場合にはありえないけど。

f:id:duo-taro100:20160322234907p:plain

上記のファイルをブラウザで確認すると、入力フォームに入力した値がそのまま画面上に表示されるのがわかると思う。

以上で、データをビューに表示させる方法についてのまとめは終了。

 

次回以降はディレクティブ（ループ文やif文など）の扱い方をまとめていく。

f:id:duo-taro100:20160218005810j:plain

 

以上。

 

 

1-1.【AngularJS】データモデルをビューへ表示する① - 【連載】AngularJSの基本操作

AngularJS 【連載】AngularJSの基本操作

AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

1-1.【AngularJS】データモデルをビューへ表示する① 

今回からAngularJSの実装メモをまとめていく。勉強しながらなので、ベストアンサーではないかもしれないので、そこはご理解いただけたらと・・・

ネット接続とブラウザがあればできるので、特別な準備は不要。

最初にHelloWorld!を表示することをやっていく。

f:id:duo-taro100:20160322234907p:plain

index.html と データモデルを保持するdata.jsの二つのファイルを作成して、それぞれを以下のような構成で配置します。

appディレクトリ

- index.html
- jsデイレクトリ   - data.js

 appディレクトリの直下にindex.htmlとjsディレクトリがあり、jsディレクトリの下にdata.jsを置いた。例ではこの構成で作成しているが、そこは個人におまかせします。

 

HelloWorld!を表示する方法は複数あるけど、２つのパターンでやってみます。

・data.jsに「HelloWorld」というモデルを持ち、それを表示させる

・inputフォームに入力された内容をそのまま表示させる

今回は前者。 もう一つは次回の記事で。

 

data.jsに「HelloWorld」というモデルを持ち、それを表示させる　　

最初はdata.jsにHelloWorld!というデータを用意して、それを表示する方法。

index.html 　

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div>
<div ng-controller="MyCtrl as myctrl">
<p>{{myctrl.str}}</p>
</div>
</div>
</body>
</html>

 

モジュールの指定

まず2行目、このhtmlでangularjsを使うと宣言するために、

　　<html ng-app="myApp">

と書いている。myAppはdata.jsで定義しているモジュールの名前。詳細は後程。

コントローラの指定

また9行目で以下のような記述がある

<div ng-controller="MyCtrl as myctrl">　　

こちらではここで使用するコントローラの指定を行っている。 　このコントローラもdata.jsで定義する。また「as」を使って、MyCtrlをmyctrlに置き換えている。この理由は以下のページに書いてある。

it-innovation.hatenablog.com

 

データモデルの表示

10行目

<p>{{myctrl.str}}</p>

htmlファイル内でAngularJSのデータを扱うためには

{{ //なんらかの操作 }}

のように　{{　と　}}　で囲まれた部分で行う。 ここではmyctrl内のstrという変数に入っているデータを表示しようとしている。

f:id:duo-taro100:20160218004600p:plain

 

data.js

var myapp = angular.module('myApp',); myapp.controller('MyCtrl',function(){

   this.str = 'Hello World!';
   this.arrs = [
      {
         name:"kobayashi",
         score:24
      },

      {
         name:"kikuchi",
         score:18
      },
      {
         name:"yamada",
         score:87
      }
   ];
});

 

 モジュールの定義

1行目でモジュールの定義をしている。 

var myapp = angular.module('myApp',);

モジュールについての詳細は以下のページを参照。

it-innovation.hatenablog.com

コントローラの定義

また2行目以降ではコントローラの定義をしている

myapp.controller('MyCtrl',function(){
// データモデルなどの記述
});

コントローラの定義方法にはさまざまあるが、このブログでは基本的には上記の形で記述することにしている。 場合によっては関数部分を外出しすることもある。
コントローラについての詳細は今後まとめる予定。

 

コントローラ「MyCtrl」のなかには、文字列strと連想配列arrsを用意している。
今回は文字列strの中に"Hello World!"というデータモデルを用意し、これをビューに表示する。ここまでの内容をセーブして、index.htmlをブラウザで見てみると「Hello World!」と表示されていると思う。

f:id:duo-taro100:20160218005810j:plain

 

これで一つ目のHelloWorld表示は完了！

次回は「inputフォームに入力された内容をそのまま表示させる」というタイトルでまとめていく。

 

7章 CordovaでHelloWorld! - 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリ概要 Cordova

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

7章 CordovaでHelloWorld!

前回まででハイブリッドアプリの開発環境構築が終わったので、今回から実装にはいるけど、まずはHelloWorld!の出力まで。 とりあえず連載はここで終了にして、angularJSだったり、ハイブリッドアプリ開発ではまったところとかをまとめていきたい。ただAndroid系の環境構築に関してもう少し詳細な説明が必要な部分もあるので、 時間のあるときに追記する予定。

f:id:duo-taro100:20160322234907p:plain

 

前回のおさらいも兼ねて、プロジェクトの作成から。


プロジェクトの作成

まず、Cordovaをインストールしたディレクトリに移動する。 基本的には /usr/local/bin　のはず。

$ cd /usr/local/bin

ここでプロジェクトの作成。例では「TestCordova」という名称のサンプルプロジェクトを作成する。

$ cordova create TestCordova

これでプロジェクトが作成された。

成功すれば以下のように表示される。

 

Creating a new cordova project.

ソースの修正方法　　

先ほど作成した「TestCordova」プロジェクトのwwwディレクトリの中のファイルを編集していくことになる。まずはプロジェクトディレクトリに移動する。

$ cd /usr/local/bin/TestCordova

このディレクトリのwwwを開く。

$ open www

すると、画像のようにwwwディレクトリの中身が表示される。

f:id:duo-taro100:20160414002610p:plain


ここにある、「index.html」がアプリ起動時に表示されるので、HelloWorld!を表示するにはこのファイルを編集。適当なエディタでindex.htmlを開く。デフォルトでは以下のような記述がされているはず。

 

<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<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 *">
<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>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html

 

このファイルを以下のように変更してセーブ。(いらない部分は削除した）

<!DOCTYPE html>
<html>
<head>
<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 *">
<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>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Hello WOrld!</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>


これでソース編集は終了。あとはちゃんと表示されるかをエミュレータを使って確認する。


HelloWorld!の確認

プロジェクトのディレクトリ内でビルドコマンドをたたく。

$ cordova build

 特定のプラットフォーム向けのビルドなら以下のように、末尾に対象のプラットフォームを記述すればいい。

$ cordova build ios

$ cordova build android

 など。「** BUILD SUCCEEDED **」と表示されたらOK。

最後にエミュレータを起動して、編集した内容が反映されているかの確認。　　

$ cordova emulate ios

$ cordova emulate android

これらを実行するとエミュレータが起動する。実際に、以下のような画面が表示されれば完了。Androidも外枠が異なるだけで、表示される画面は同じ。

HelloWorldは背景が緑色の部分に表示されている。

f:id:duo-taro100:20160414003949p:plain


後は自由にwwwディレクトリ以下を編集していくだけ。

 

f:id:duo-taro100:20160218005701p:plain

今回までで、ハイブリッドアプリの概要から開発環境構築、そしてHelloWorld!の表示までを連載としてまとめてきた。
次回以降も何か目的を持って、記事をまとめていく。予定としては、現在作っているアプリの実装に関するメモ、を記事にしていくつもり。
OnsenUIとAngularJSを使う予定だったが、OnsenUIがAngularJSから離れた（使えないわけではない）ことと、AngularJSが1.0系と互換性のない2.0系をリリースする予定（現在、Beta版）ということもあって迷い中。
ただAngularJSは個人的にかなり気に入っているので使っていきたい。

 

以上

【Cordova】「Error: Please install Android target "android- XX".」の解決方法【エラー対処】

エラー 【連載】ハイブリッドアプリ概要 Android ハイブリッドアプリ

「Error: Please install Android target "android- XX".」の解決方法

f:id:duo-taro100:20160218004611p:plain

「Error: Please install Android target "android- XX".」の解決方法

 

表題のエラーの解決方法をここでまとめる。

このエラーメッセージで見てもらいたいところは最後の「XX」の部分。数値が入っていると思う。その数値を覚えておく。

今回は例として

Error: Please install Android target "android- 22".

に対する解決方法。

 

まず、Android SDKがインストールされているディレクトリに移動する。

多分「/Users/**user名**/Library/Android/sdk」だと思う。環境によっては違うかな？？このディレクトリの中のtoolsに移動する。

コマンドラインで

$ cd  /Users/**user名**/Library/Android/sdk/tools

 移動できたら、androidコマンド

$ android

すると、以下のような画面が出てくる。

 

f:id:duo-taro100:20160404003636p:plain

パスが通っていない場合は「-bash: android　avd: command not found」というエラーメッセージが表示されるので、その場合はパスを通してから実行。パスを通す方法については以下のページの最後の方で説明している。 

 

it-innovation.hatenablog.com

 

正常に画面に遷移できたら、少し下の方にスクロールしてもらうと、「Android x.x.x」のようにバージョンごとのディレクトリがある。画像の色がついている部分。

そのディレクトリ名称の末尾に（API XX）というものが書いてあると思う。

この「XX」の数値と、エラーメッセージの「XX」が同じものをインストールしなさい！というのが今回のエラーメッセージの正体。

 

例では「XX」が「22」だったので、

Android 5.1.1 (API 22)

これをインストールする。該当ディレクトリの左のチェックボックスにチェックをいれて、画面右下の「install ? packages...」をクリック。すると同意を求める画面が出てくるので、同意してインストール開始。

インストールが終わればこのエラーは解決するはず！！

f:id:duo-taro100:20160220151848p:plain

【高速化】MacでAndroidエミュレータを使えるようにする【Cordova】

【ハイブリッドアプリ開発】MacでAndroidエミュレータを使えるようにする【Cordova】

f:id:duo-taro100:20160218004611p:plain

【ハイブリッドアプリ開発】MacでAndroidエミュレータを使えるようにする【Cordova】

 

今回はAndroidエミュレータの設定方法についてまとめていく。

ハイブリッドアプリ開発（Cordova）のAndroidのエミュレータに限らず、現状では実際のテストでは使用できないほど動作が重い。 実機での確認がベストだが、実機を持っていない人もいるので、とりあえず、現状のエミュレータを使えるようにしておく。

最後にエミュレータの高速化についても触れる。

f:id:duo-taro100:20160404001647p:plain

Androidエミュレータ上でCordovaのアプリを実行したい場合は、Android仮想デバイス（AVD）を作成する必要がある。 この設定をしないとエミュレータ起動時にエラーが生じるだけでなく、もともと遅いアンドロイドエミュレータがさらに遅くなるというデメリットがある。ここはめんどくさがらずに、時間をとってじっくりと設定をした方がいい。

AVDの設定

まずAndroid SDKのインストールされているディレクトリに移動。基本的には以下のディレクトリにあると思うが、環境によっては違うこともあるので注意（**user名**は環境に合わせる）

→「/Users/**user名**/Library/Android/sdk」

このディレクトリにtoolsがあるので、そこに移動。

$ cd /Users/**user名**/Library/Android/sdk/tools

ここで、Android SDK Managerを起動する。
そこでAndroid SDK Managerを起動。

　　 $ android avd

このときに「-bash: android: command not found」って怒られる場合はパスが通っていないので注意。パスの通し方は以下のページの最後の方で説明している。

it-innovation.hatenablog.com

うまくいけばAndroid SDK Manager起動する。

 

f:id:duo-taro100:20160407233803p:plain

この画面の右側に「create」とあるので、そこをクリック。すると以下の画面が表示される。 

f:id:duo-taro100:20160407233914p:plain

ここでAVDの名前だったり、サイズなどを決めていく。細かく説明すると時間がいくらあっても足りないので、以下のサイトを参考に。英語だけど・・・

Managing AVDs with AVD Manager | Android Developers

 

これでエミュレータの設定が完了するはず。

 

以上。

6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】- 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain


6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】


前回まででAndroidとiOS独自の設定が終わったので、今回は共通の設定を行う。
AndroidとiOSの設定をしていないと進められない部分もあるので、まだの方は以下のリンクから。

it-innovation.hatenablog.com

 

it-innovation.hatenablog.com


共通の設定ではコマンドラインを使った設定が多々あるのでコマンドラインを起動しておく。


共通の設定

・node.jsとnpmのインストール
・Cordovaのインストール
・プロジェクトの作成
・プラットフォームの追加
・エミュレーターの起動　　


node.jsとnpmのインストール

Cordovaは、NPMパッケージとして配布されるので、Node.jsとnpmのインストールを行う。インストールは以下のリンクから。node.jsをインストールすると、同時にnpmもインストールされる。

Download | Node.js

Mac OS X Installer (.pkg)を選択します(画像参照)

f:id:duo-taro100:20160404221651p:plain

 インストールが正しくされているかを確認するためにのバージョン確認。

$ node -v

$ npm -v

正しくインストールされていれば、バージョン情報が表示される。


Cordovaのインストール

Node.jsのnpmユーティリティを使って、コルドバmoduleをインストール。コマンドラインにて以下のコマンドを実行。
(※MacやLinux上では「sudo」を付けないと、エラーが起こる可能性があるので注意)

$ sudo npm install -g cordova

 また、上記のように「-g」オプションを付けてインストールすること。

→ npm installコマンドの-gオプションについて

同様に、インストールが正しくされているかを確認。

$ cordova -v 

 
プロジェクトの作成

Cordovaのインストールが終了したら、/usr/local/binに移動し、プロジェクトを作成する。

$ cd /usr/local/bin

Cordovaのインストールが正しくされていれば、このディレクトリに「Cordova」が配置されているはず。（コマンドで「ls」叩けば中身を見ることができる）
例えば、「TestCordova」という名前のプロジェクトを作成する場合は以下のようになる。

$ cordova create TestCordova

プロジェクトの作成についての詳細はこちらを参照のこと。テンプレートを使用するなど、プロジェクトの作成の際にはオプションの指定も可能だが、プロジェクトを作成するだけなら、上記のコマンドだけで十分。

ちなみにこの段階でエラーが生じる場合はCordovaが正しくインストールされていない場合があるので注意。

プロジェクトが作成されたら、「Creating a new cordova project.」と表示される。


プラットフォームの追加

対象プラットフォームを加える。今回はiOSとAndroidでの開発を念頭に置いているので、2つを追加。まずは先程作成したTestCordovaプロジェクトに移動。

$ cd /usr/local/bin/TestCordova

続けて、以下のコマンドを実行する。

$ cordova platforms add ios

$ cordova platforms add Android

これでプラットフォームの追加は完了。
ブラウザ上でエミュレーターAPIを起動するためにはブラウザもプラットフォームに追加する必要がある。入れておきたい方は以下のコマンドを。

$ cordova platform add browser

Androidを追加するときに、以下のようなエラーが出ることがある。

Error: Please install Android target "android- XX".

これは対応するAPIがはいっていないですよ、と怒られているのでそれをいれてあげればいい。詳細は以下のページで。ちなみにXXには数値が入る。

it-innovation.hatenablog.com

 

 


シュミレータ・エミュレータの起動

●iOSシュミレータの準備


Xcodeでの起動も可能だけど、今回はコマンドラインから。
ちなみにCordovaのアプリ開発にはコマンドラインでの操作を良く使うので、基本的な操作は覚えておくといい。


ios-simがインストールされていない場合は以下のコマンドを実行。
（※Xcodeがインストールされていれば不要？？）

$ sudo npm install -g ios-sim

インストールが完了したら、プロジェクトのディレクトリに移動。
このページの順序どおりに実施している場合は、/usr/local/binの直下にプロジェクトのディレクトリがあるはず。 　　　

例えば、「TestCordova」というプロジェクトの場合は　　

$ cd /usr/local/bin/TestCordova

続いて　　

$ cordova build ios

 を実施すれば、ios向けのビルドが行われる。 

(※ビルドを行う前に、プラットフォームの追加が必要なので注意！)

最後に、シュミレータを起動させるには以下のコマンドを実行。

$ cordova emulate ios

このようにシミュレータが立ち上がるはず。 （下の画像のDevice is Readyが点滅してるはず。)ソースをいじる前はこの画面がでてくる。

 

f:id:duo-taro100:20160220151848p:plain


●Androidエミュレータの準備
設定については以下のページを参照。

it-innovation.hatenablog.com

また、この辺りで

$ android

のコマンドを叩いたときに、「android: command not found」とか出てくる場合は、パスが通っていない可能性があるので下の記事の最後の方を参照して、パスを通す。

it-innovation.hatenablog.com

 

さて、Android AVDの設定まで終わったらエミュレータの起動まで実施する。

サンプルプロジェクトのディレクトリに移動して、ビルドからエミュレータ起動までを実施。

$ cd /usr/local/bin/TestCordova

ビルド

$ cordova build android

エミュレータの起動

$ cordova emulate android

 

これでエミュレータが表示されたら完了。しかし、最初の方にも言った通りこの標準のエミュレータは基本的に使えない。 なので高速化する方法をいろいろと試したので、そのうち紹介する。

 

 

f:id:duo-taro100:20160218004600p:plain

以上で開発環境が整った。おそらくAndroidの設定でハマってしまう方がいるはず。
環境設定は一人でやっていてもなかなか解決できないので、質問等あればコメントに！
次回はCordovaでHelloWorld!

 

it-innovation.hatenablog.com

6章-2 Cordovaでハイブリッドアプリ開発環境を整える【iOS】 - 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain


6章-2 Cordovaでハイブリッドアプリ開発環境を整える【iOS】


前回はAndroidに関する設定をした。

it-innovation.hatenablog.com

 

今回は引き続き、iOS版の準備。 Androidの準備はちょっと長く、複雑なところもあったのでハマることもあったと思うけど、iOSに関しては簡単で時間もかからないのでご安心を。 これを一つの記事にするには忍びないくらい・・・

 

f:id:duo-taro100:20160218005810j:plain


iOS版 事前準備


Xcode最新版のインストール


AppStoreから最新版をインストール。

下のXcodeのアイコンからインストール可能！


iOS版特有の環境設定は以上。

それ以外で必要な設定は共通の設定になるので次回。
Android版の開発準備が整っていない方は、共通の項目に行く前に以下のページを参照。


it-innovation.hatenablog.com

 

次回、6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】- 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

it-innovation.hatenablog.com

Android Studioを日本語化する【5分で終わる】

Android アプリ開発

Android Studioを日本語化する【5分で終わる】

f:id:duo-taro100:20160218004611p:plain

 

Android Studioを日本語化する【5分で終わる】

AndroidStudioの日本語化はかなり簡単なので、以下の手順に沿って進めれば5分で終わる。  

リソースファイルのダウンロード

以下のページにいって、「DOWNROAD ZIP」をクリック。
https://github.com/yuuna/IDEA_resources_jp9
スクリーンショット 2016-04-03 14.30.53.png

リソースファイルから該当ディレクトリへの移動

リソースファイルの「resources_jp.jar]」を「Applications/AndroidStudio.app/Contents/lib」の下に置く。
コマンドラインからの実行は以下のとおり

$ cp ~/Downloads/IDEA_resources_jp-master/resources_jp.jar /Applications/"Android Studio.app"/Contents/lib/

Android Studioの再起動

Android Studioを再起動すれば日本語化されているはず。

6章-1 Cordovaでハイブリッドアプリ開発環境を整える【Android】 - 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

Android 【連載】ハイブリッドアプリ概要 ネイティブアプリ

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

 

6章-1 Cordovaでハイブリッドアプリ開発環境を整える【Android】

CordovaではAndroid、Blackberry10、iOS、OS X、Windowsなどに向けてのアプリ開発できるが、今回はAndroid版とiOS版に限っている。

AndroidやiOS向けに開発を行うには、それぞれ独自の設定が必要で、かつ共通の設定もある。それを一つの記事にすると少し長くなってしまうので、Android版の設定とiOS版の設定と共通の設定の3つに分けて解説をしていく。また今回はMacOS上での環境構築。Windowsについては時間があれば後日。

今回はAndroid独自の設定。ちょっと複雑で、時間もかかるので1時間〜1時間半程度、集中できる時間にやった方がいい。iOSは簡単なのに・・・

f:id:duo-taro100:20160404001647p:plain

Android版 事前準備

1.JDKのインストール
2.Android SDKのインストール
3.Android SDKパッケージの追加
4.環境設定変更

1.JDKのインストール

以下のサイトからJDK7、もしくはそれ以降をインストール。現状、JDK8は推奨されていないので、JDK7の方を（画像はJDK8でやっているが手順は同じなので気にせず）
→JDK7のインストール

 

上記リンクに飛ぶと、以下の画面が表示される。

矢印で示した部分「Accept License Agreement」にチェックを入れて、Mac OS X用をダウンロード。

f:id:duo-taro100:20160404002120p:plain

ダウンロードしたものを開くと以下の画像のようになるので、ダブルクリック。するとインストーラが立ち上げるので、特に変更を加えることなく「続ける」を押してインストールを進める。

f:id:duo-taro100:20160404002359p:plain

インストールが終わったら、正しくインストールされているかバージョンの確認。

コマンドラインから

java -version

上記のコマンドを実行すると、「java version "1.8.x_xx"」のように表示される。

されない場合は正しくインストールされていない。  

2.Android SDKのインストール

Android用プラグインを作成しない場合は Android Stand-alone SDK Toolsからのインストールで十分だけど、今回は開発に幅を持たせるという意味からAndroid Studioをインストール。
詳細なインストール手順は以下の通り。

Android Studio と SDK Tools のダウンロード | Android Developers

上記リンクから。


まずはダウンロード

 

f:id:duo-taro100:20160404003008p:plain


左下にある「DOWNLOAD ANDROID STUDIO FOR MAC」という緑色の部分をクリック（赤い矢印）

そうすると同意を求める文章が出てくるので、該当箇所にチェックを入れてダウンロードを開始。

f:id:duo-taro100:20160404003050p:plain

 

次にアプリケーションフォルダへの移動


ダウンロードしたもの（.dmg)を立ち上げると、以下の画面が立ち上がるのでAndroid StudioをApplicationsへドラッグ&ドロップ。

f:id:duo-taro100:20160404003128p:plain


続いて、AndroidStudioの起動


Android Studioが正常に起動すれば完了。 その他設定については次の「Android SDKパッケージの追加」で行う。
※Android Studioの日本語化について。
Android Studioを開発で利用することはあまりないので、不要かと思うが実施する方は以下のページを参照。

it-innovation.hatenablog.com

3.Android SDKパッケージの追加

Android SDK をセットアップする場合、少なくとも最新の SDK Tools と Android プラットフォームのダウンロードが必要。今回は必要最低限のものだけダウンロード。　

　

まず、AndroidStudio SDK Managerの起動

 

Android Studioを起動すると画像の左側の画面が表示される。ここで「Configure」を選択し、「SDK Manager」をクリック。

f:id:duo-taro100:20160404003401p:plain

 

SDK Tools、Platformの入手

 

f:id:duo-taro100:20160404003452p:plain



画像のように、「Android SDK」を選択し、ページ下部の「launch Standalone SDK Manager」をクリック。 　 すると以下の画面が立ち上がる。

f:id:duo-taro100:20160404003525p:plain

Toolsディレクトリ直下にある以下のものにチェックをつける（最後にまとめてインストールするので今はチェックをつけるだけ)
・Android SDK Tools
・Android SDK Platform-tools
・Android SDK Build-tools（最新バージョン）

 

また、少し下に移動するとAndroid x.x.x のようにバージョンごとのディレクトリがあるので、開発対象バージョンのディレクトリを開く。例ではAndroid 6.0。

f:id:duo-taro100:20160404003636p:plain


ディレクトリのなかの、SDK Platformにチェックをいれる。また以下の画像で「Installed」となっているものはチェックをつけておく。自分の画面で既に「Installed」と表記されているものはそのままで大丈夫。 「Update」という表記されているものはチェックをつける必要がある。

f:id:duo-taro100:20160404003744p:plain

 

追加API用のサポートライブラリを取得する


続いて、追加API用のサポートライブラリやその他のAPI用の「Google Play」サービスを入手する。


画面の下の方に「Extras」ディレクトリがあるので、そこで以下のものを選択。
・Local Maven repository for Support Libraries
・Android Support Library
・Google Repository
・Google Play Service
・Intel x86 Emulator Accelerator (HAXM installer)

f:id:duo-taro100:20160404003840p:plain


パッケージをインストールする


必要なパッケージをすべて選択したら、インストール。
右下の[Install ? packages] をクリック。

f:id:duo-taro100:20160404003942p:plain


次のウィンドウで、左側のパッケージ名を1つずつダブルクリックし、各パッケージの使用許諾契約に同意する。最後に[Install] をクリック。

SDK Manager のウィンドウの1番下に、ダウンロードの進捗状況が表示されるので、ダウンロードが終わるまでSDK Managerを終了しないこと。SDK Managerを終了すると、ダウンロードはキャンセルされてしまう。

 

4.antのインストール

Androidのビルド用にantが必要なのでインストール。

コマンドラインから以下のコマンドを実行する。

$ brew install ant

 成功すれば、以下のような表示がでる。

==> Downloading https://archive.apache.org/dist/ant/binaries/apache-ant-1.9.4-bi

######################################################################## 100.0%


以上で必要なものは揃ったので、用意したものを使えるように環境変数の設定を行う。

5.環境設定変更

CordovaCLIツールを正しく機能させるために環境変数の設定する必要がある。 ダウンロードした、Android SDKの「tools」と「platform-tools」にパスを通す。


まずは現状のPATHを確認

 

$ echo $PATH

現在の状態が表示されます。

/usr/local/sbin:/usr/local/sbin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

ここは人によって違うので、上記と同じでなくても気にしない。 

 

以下のコマンドでPATHを通す。

 

「**USER名**」の部分は環境に合わせて変える。

$ export PATH=/Users/**USER名**/Library/Android/sdk/tools:$PATH
$ export PATH=/Users/**USER名**/Library/Android/sdk/platform-tools:$PATH

 

変更を適用。

 

$ source ~/.bash_profile

 

変更が適応されたかの確認。

 

$ echo $PATH

 

以下のように太青文字部分が追加されていれば完了。

/Users/USER名/Library/Android/sdk/platform-tools:/Users/USER名/Library/Android/sdk/tools:/usr/local/sbin:/usr/local/sbin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

 

f:id:duo-taro100:20160218004753j:plain

以上でAndroid開発の事前準備は終了。

その他にも設定が必要だけど、共通の設定なので続きは以下の記事を。

it-innovation.hatenablog.com

 

 

上記の記事に入る前にiOSの設定が必要なので、次回はiOSの環境を整える。Androidは結構複雑だけど、iOSは簡単なので！

6章-2 Cordovaでハイブリッドアプリ開発環境を整える【iOS】 - 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

　　

it-innovation.hatenablog.com

5.5章　ハイブリッドアプリ開発に適したアプリとは？-【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリ概要 ハイブリッドアプリ アプリ開発

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

 

5.5章　ハイブリッドアプリ開発に適したアプリとは？

 

今回は過去の2つの記事を総合的にまとめたもの。

それぞれハイブリッドアプリに適している状況について書いたが、観点が異なるので、別々に読むと分かりにくかった。なのでそれらを合わせて紹介する。

 

一つ目の記事はハイブリッドアプリ開発について対外的な観点から評価した。  

it-innovation.hatenablog.com

 

二つ目に記事は業務的な観点での評価。

it-innovation.hatenablog.com

 

以下にハイブリッドアプリ開発を使うのに最適なのはどのような状況なのかをまとめた。

高速処理を必要としないアプリの場合

ハイブリッドアプリとして開発した場合に、ユーザーに満足してもらう操作性を実現するという大前提をクリアしないとだめ。それを満たすことができないのならネイティブで作るべき。開発コストが低いからと言って、高速処理が必要なアプリをハイブリッドアプリとして作っても、ユーザーに満足してもらえずに、アプリを使ってもらえなくなる。ネイティブでなくても心地よい操作性を実現できるなら、ハイブリッドアプリとして開発しても問題はない。 　 　

飲食、旅行などのジャンルに属するアプリ

これらは比較的再訪問率の低いジャンルのアプリ。なので、アクティブユーザーをより多く獲得するためには複数のプラットフォームに対応する必要が出てくる。でも複数のプラットフォームに対応するため時間とお金をたっぷりかけると、売上が良くても利益が出ないなんて事も・・・ できるだけそういったことをなくすためにもハイブリッドアプリのスピーディーな開発と優れたメンテナンス性を有効活用したいところ。

パフォーマンスを必要とする部分とそうでない部分が混在するアプリ

ゲームのように全体的にパフォーマンスを求められるアプリは厳しい。 でも一部にはパフォーマンスが求められるけど、他の部分ではそのような心配はないアプリであればハイブリッドアプリが最適。パフォーマンスが求められる部分だけをネイティブで書いて高速化を実現し、それ以外の部分では開発コストが低く、メンテナンスもしやすいHTMLやJavaScriptで記述していく。そうすることで必要なパフォーマンスと健全なアプリ運営が実現できる。

 開発・メンテナンスに時間と費用がかかるアプリ

プロジェクトに参加する人数が少なかったり、開発期間が十分でない場合はハイブリッドアプリが最適。
開発だけでなく、メンテナンスも少人数で進めていくとなればハイブリッドアプリのクロスプラットフォーム性が後々の作業を楽にしてくれる。
逆に、プロジェクトに十分な時間と、人数を動員できるならネイティブで開発すればいいと思う。

リスクを抑えて、開発を行いたい場合

アプリが成功するかどうかはリリースしてみないとわからない。市場調査などを行ってから、自信を持ってリリースしても実際はどうなるか・・・

時間とお金をかけて作成したアプリが無駄になってしまうのはもったいないし、場合によっては利益が出ないだけでなく、損失につながる場合もある。そうなったときの損失や無駄を減らすためにできるだけリスクの低いアプリ開発、つまりハイブリッドアプリがおすすめ！

 

f:id:duo-taro100:20160218004753j:plain

 

ハイブリッドアプリに適切なアプリ・状況など

■パフォーマンスと開発コスト削減を両立したい場合

■再訪問率の低いジャンルのアプリ

■開発・メンテナンスコストの高いアプリ

■あまりリスクを負いたくないアプリ

 

以上がハイブリッドアプリに最適な状況のまとめ。

次回はハイブリッドアプリ開発用フレームワーク「Cordova」の開発環境を整える！

it-innovation.hatenablog.com

 

5章 ハイブリッドアプリ開発はどのように使われているのか -【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリ概要 ハイブリッドアプリ アプリ開発

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

5章　ハイブリッドアプリ開発はどのように使われているのか

 

以下の記事の中でハイブリッドアプリ開発のエキスパートたちが、ハイブリッドアプリについて語っている。これを簡単にまとめた。詳細はリンク先を！！

html5experts.jp 

ハイブリッドアプリの活用方法

分担作業のしやすさ

デザイナーとエンジニアの分担作業がしやすい。
ハイブリッドアプリはUIのデザインはコーディングも含めてデザイナーに任せやすい。 エンジニアはロジックに集中できる。 早い・安いだけではなく、エンジニアのモチベーションに寄与することも多い。

プロトタイプをスピーディーに作れる　　

設計書通りに作ってみても、触ってみたら「やっぱりこうしよう！」といった修正点がでてくるはず。ハイブリッドアプリ開発では、UI側作成のスピード感が際立っているので、プロトタイプをスピーディーに作成し、実装とUIのテスト・修正などを並行して進めることができる。これは社内プロダクトよりも、外注の案件で効果を発揮する点だと思う。もちろん社内の案件でも十分活躍するが。

リスクの低い開発が可能

素早くリリースして、ユーザーの反応を見る。 開発コストの低いハイブリッドアプリでリリースして、ユーザーの様子を見る。状況に応じてネイティブシフトしてもいいし、そのままの形で続けるのもいい。はじめからAndroidとiPhone用のネイティブアプリを両方開発するより、リスクが少ない。

f:id:duo-taro100:20160218004600p:plain

 

今回の内容はリンク先をじっくり見てもらえたらと思って簡単にまとめたが、業務的な観点からハイブリッドアプリを評価してみた。前回の記事は業務的というよりは対外的な観点での評価。

it-innovation.hatenablog.com

 

もともと、開発する方法（ハイブリッドかネイティブかWebか）の選定の手助けとなればと思ってまとめたが、やはり難しい。どの開発手法を使うのか、今回の記事と前回の記事をまとめてみたので、興味のある方は是非。

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】- 5.5章　ハイブリッドアプリ開発に適したアプリとは？ 

it-innovation.hatenablog.com

 

 

f:id:duo-taro100:20160218004753j:plain

 

今までハイブリッドアプリの概要や、動向についてまとめてきた。

次回からはハイブリッドアプリを開発するための環境を構築していく。使うのは Cordova。Mac上での開発を想定して準備をしていく。Monacaについても軽く触れる予定。お楽しみに！！

次回、「【連載】ハイブリッドアプリの最新情報とその動向【Corodva】- 6章 Cordovaの開発環境を整える【iOS、Android】」

it-innovation.hatenablog.com

 

 

 

 

4章 ハイブリッドアプリの最新動向 -【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリ概要 Cordova Webアプリ ネイティブアプリ ハイブリッドアプリ

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

4章 ハイブリッドアプリの最新動向

前回まででハイブリッドアプリの概要、ハイブリッドアプリを使うに当たってのメリット・デメリットなどをまとめてきた。 その中で出てきた課題の一つに、ハイブリッドアプリとして開発するのか、ネイティブとして開発するのか、Webアプリとして開発するのかを決めるのが難しいという点を挙げたが、実際にかなり難しくて、あとになって「こっちにしておけばよかった！」と思うことも多々ある。
だけど、それは”後悔”だけで済まない話で、結果的にアクティブユーザーの獲得やアプリの動作状況などにも影響を与えてくるため、アプリの存続にかかわってくる、なんてことにもなりうる。
そうならないように、現状のアプリ業界とアプリ開発の動向を探ってみたので、ここでまとめる。


アプリ業界全体の動向

まずはアプリ業界の全体像を。

スマホOSのシェア(国内)

日本国内でのスマホOSにシェアは

1位がiOSの50%程度

2位がAndroidの49%程度

+その他

といった感じ。(2016年1月時点)

f:id:duo-taro100:20160330212735p:plain

AndroidとiOSが全体の99%以上を占めている。ちなみに2015年8月時点ではこのようになっている。

f:id:duo-taro100:20160330213117p:plain

参考：Smartphone OS sales market share – Kantar Worldpanel ComTech


近年Android勢が多くなってきているという情報もあったが、どうやらiOSが勢力を回復してきたらしい。国外のスマホOSのシェアもこちらのサイトで見ることができるので、きになる方はどうぞ。

www.kantarworldpanel.com


要するに、世界的にAndroidがトップシェアを維持している、ということ。
複数のプラットフォームに対応したアプリの開発を考えているとしたら、Android版とiOS版に絞って、他のプラットフォームは避けるのが現実的だと思う。

スマホOSのシェア(国内)

■iOSがトップシェア
■AndroidとiOSで90%以上のシェア 

・アプリストアへの登録アプリ数

アプリの登録数についても同様で、AppStore(iOS),GooglePlay(Android)の2強状態。

f:id:duo-taro100:20160330213756p:plain

参考：App Stores Growth Accelerates In 2014 | App store Intelligence from appFigures

 

AppStoreへの登録アプリ数をGooglePlayが追い越したのもわかる。Amazonも結構頑張っている印象。これは2014年の情報なので、現在はAppStoreとGooglePlayの差が広がっていると思う。たぶん。

 

AndroidとiOSではライバルが多く、作成したアプリが埋もれてしまうという見方もある・・・ そういった考えの中では、ライバルが少ない他のプラットフォーム向けのアプリもいいかもしれないがリスクは高い。なのでやはりAndroidとiOSに絞るべきかと思う。

アプリストアへのアプリ登録数

■GooglePlayがAppStoreを追い抜きトップに
■GooglePlayとAppStoreの2強状態

 

■ユーザーの動向

続いて、ユーザーのアプリに関する動向をまとめた。

・ユーザーの利用時間が多いアプリ

 

f:id:duo-taro100:20160330214827p:plain

参考：Apps Solidify Leadership Six Years into the Mobile... | Flurry Insights Blog

 

これをみるとネイティブの利用時間割合が86%、それに対してWebアプリが14%となっている。この理由のひとつとして、インストールして使うかどうかというの点がある。
インストールして使うネイティブアプリは画面上にアイコンがあって、そのアイコンをタップすればアプリが起動できるため、ユーザーへの負担が少ない。 逆に、Webアプリはブックマークやブラウザ検索を経ての利用になるのが、ユーザーにとっては不便で、再訪問率が著しく低下するといわれている。
単にネイティブやハイブリッドアプリの割合が高いからということもできる。
(※ハイブリッドアプリはユーザー側からみるとネイティブアプリと同じ）

ユーザーが使うアプリの種類

■圧倒的にネイティブアプリを使う時間が長い

・ユーザーの継続利用

f:id:duo-taro100:20160330220026p:plain

参考：Pull back the curtain on mobile with the first-ever Mobile Benchmark report

 

このグラフが表しているのは、アプリのダウンロードから一週間後に再訪問してくれるユーザー割合。これをみると、ユーザーの15%（平均）くらいしかアプリを起動してくれない。 ジャンルによっては5%程度というのもある。アクティブユーザーの獲得がかなり困難であることがわかる。

以下のジャンルについては比較的、再訪問率が高い。

■ゲーム
■ソーシャル
■ビジネス

一方で、以下のジャンルは低くなっている。

■飲食
■旅行
■エンタメ

f:id:duo-taro100:20160218004600p:plain

アプリの継続利用ユーザー

■ダウンロードから一週間後の再訪問ユーザーの割合は15％程度

■ジャンルによっても再訪問率が異なる。

■アプリ開発の動向

・ハイブリッドアプリの台頭

米国、調査会社Gartnerによると2016年、企業向けアプリのうち約50%がハイブリッドアプリになるといわれている。

f:id:duo-taro100:20160330221140p:plain

 また、2017年には90%程度がHTML5化になるという予測

ただし、これはネイティブが廃れることを意味しているわけではなく、現在よりも棲み分けが進行するという意味。たとえばゲーム業界（DeNA、Gree、サイバーエージェントなど）ではネイティブシフトの動きが顕著になっている。

 

ハイブリッドアプリの台頭

■ハイブリッドアプリは今後のアプリ開発の主流に　

■ゲームなど複雑なサービスはネイティブ　　

■簡潔なアプリはハイブリッドアプリorWebアプリ 　

・ハイブリッドアプリのデファクトスタンダード

ハイブリッドアプリの開発フレームワークにもさまざまなものがあるが、今はCordovaがハイブリッドアプリ開発で最も使われてる。　

ハイブリッドアプリのデファクトスタンダード

■ハイブリッドアプリ開発ではCordovaが最も使われている

f:id:duo-taro100:20160218004753j:plain

 

 

ここまでのまとめ

■アプリ業界全体の動向

スマホOSのシェアやアプリ登録数などを見てみるとAndroidとiOSの2つがほとんどの割合を占めているので、複数のプラットフォームに対応するアプリを作成する場合、費用対効果を考えるとiOS版とAndroid版に絞ったほうが良い。 　

特にAndroidはOSシェア、ダウンロード数などがiOSよりも多いので、技術的にAndroidアプリとiOSアプリを作ることができて、どっちかだけの開発を考えている場合はAndroidの方がおすすめ。

■ユーザーの動向

ユーザーがネイティブアプリに消費する時間は、Webアプリよりも圧倒的に多い。アプリの起動が楽であることが一つの要因だと思う。
またアプリダウンロードの一週間後に再訪問してくれるユーザーの割合は平均して15%程度で、アプリのジャンルによってその数値も異なる。
アプリを成功させるにはアクティブユーザーの獲得が必須。
上記のことを参考に考えると、アクティブユーザーを増やす方法は２つ。

・ユーザーの絶対数が多いプラットフォームでの配布(Android、iOS)

・比較的、再訪問率の高いジャンルのアプリを作成する


■アプリ開発の動向

ハイブリッドアプリ開発の割合は年々増加してきている。そのため、開発環境も充実してきているとともに、以前から言われていたハイブリッドアプリの欠点についても克服されつつある。
そのハイブリッドアプリ開発のなかで最も使われているのがCordovaであり、多くの企業が開発のためのツールを提供している。

f:id:duo-taro100:20160218005810j:plain


最後に、全体の総括。

■アプリを作るならAndroid,iOSで！

■理想は両方、どちらかを選ぶならAndroid！技術的な観点から考えて決めるといい！

■アクティブユーザーを獲得するにはネイティブアプリかハイブリッドアプリがおすすめ！
■ハイブリッドアプリ開発なら、環境が充実しているCordova！


次回は今回の内容と関連付けて、ハイブリッドアプリ開発の事例などを紹介する。「【連載】ハイブリッドアプリの最新情報とその動向【Corodva】- 5章　ハイブリッドアプリ開発はどのように使われているのか」というタイトルで書いていく。

3章 ハイブリッドアプリのメリット・デメリット -【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリ概要 ハイブリッドアプリ メリット・デメリット

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

3章 ハイブリッドアプリのメリット・デメリット

前回はハイブリッドアプリがネイティブアプリ・Webアプリと比較してどのように違うのかをまとめた。

it-innovation.hatenablog.com

 

今回は、前回の記事をもとにハイブリッドアプリのメリットとデメリットを紹介。
若干前回と被るけど、前回の内容を分かりやすくまとめるのに加えて、他にも伝えたいことを。

＜開発者視点のまとめ＞

f:id:duo-taro100:20160329220403p:plain

＜ユーザー視点のまとめ＞

f:id:duo-taro100:20160329220443p:plain

＜共通のまとめ＞

f:id:duo-taro100:20160329220504p:plain

 

表には書いてないけど、ハイブリッドアプリのメリットの一つに

パフォーマンスを求めるところはネイティブでの実装！！

というものがある。これが「ハイブリッド」と呼ばれる所以であり、開発にかかる時間的・技術的コストの低いWeb開発と、パフォーマンスの高いネイティブ開発、それぞれの良いところを組み合わせて開発ができる。 基本的には開発に時間のかからないWeb技術での開発。アプリ内の速度を求める部分に関してはネイティブでの記述で対応する。これはハイブリッドアプリにしかできない。

f:id:duo-taro100:20160218004600p:plain

 

ハイブリッドアプリのメリット・デメリット

＜メリット＞

■開発コストを抑えることができる

■クロスプラットフォーム開発が可能

■Web技術の再利用ができる

■メンテナンス性に優れている

■オフラインでの利用が可能

■公式ストアでの配信が可能で、信頼性と集客性に優れてる

■デバイス機能の利用

クロスプラットフォーム開発が可能であり、またWeb開発技術の再利用ができるので開発コストを低く抑えることが可能。

メンテナンス性に優れている点や、アプリストア経由でなくても機能のアップデートができることが大きな強みになっている。

公式ストアからの配信が可能で、集客性や信頼性という点でもメリットがあり、ユーザーはアプリをインストールして使うため、基本的にはオフラインでもアプリが利用できる。

Webアプリでは不可能だったネイティブ機能へのアクセスも可能になっており、開発の幅も広がってきている。

＜デメリット＞

■動作速度がネイティブに比べて遅い

■開発制約が多くなることがある

■公式ストアの審査を通りにくい

■デバイス機能の利用範囲が開発ツールに依存する

■ネイティブUIが使えない

 

動作速度はネイティブと比較して遅く、高速処理を必要とするアプリなどには向かない。

公式ストアを経ての配信となるため、開発に際しての制約が多くなる場合があり、ネイティブアプリと比較して公式ストアの審査を通りにくいという点も開発者としては意識しておく必要がある。

またネイティブ機能へのアクセスが可能だが、全ての機能にアクセスできるわけではなく、使用する開発ツールに依存することになる。 

ネイティブUIを利用できないので、UI・UXに問題を抱えることが多々ある。（ハイブリッドアプリ用、Webアプリ用のUIフレームワークを使用するのが主流)

 

f:id:duo-taro100:20160218005810j:plain

ここまでハイブリッドアプリのメリット・デメリットについてまとめてきた。前回の記事ではネイティブアプリ、Webアプリについてもまとめてきたが、それぞれの開発手法には特徴があり、一概にどれがいい！というのは難しい。作成するアプリによってどれを選択すべきなのかが変わってくる。
しかし、それを決めるのがまた難しい。そこで次回以降の記事では、世の中的にはどんな時にハイブリッドアプリが使われているのか、ハイブリッドアプリの動向はどうなっているのかをまとめていく。

 

個人的にはハイブリッドアプリでの開発が今後の主流になってくると思っている。もちろんゲームなどはネイティブでの開発にはなるが。 

ということで次回は「【連載】ハイブリッドアプリの最新情報とその動向【Corodva】- 4章 ハイブリッドアプリの最新動向」というタイトルで書いていく。

 

it-innovation.hatenablog.com

以上

2章 ネイティブアプリ、Webアプリとの違いは？-【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリ概要 ハイブリッドアプリ ネイティブアプリ Webアプリ

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

2章 ネイティブアプリ、Webアプリとの違いは？

今回はハイブリッドアプリがネイティブアプリ・WEbアプリとそれぞれどのように違うのかを詳しくみていく。

まずはハイブリッドアプリとの比較の前に、ネイティブアプリとWebアプリの特徴を以下の観点でまとめる。 ネイティブアプリ、Webアプリの知識が十分だという方はページ下部の「ハイブリッドアプリについて」からみてもらえればいいと思う。

ネイティブアプリについて

＜開発者視点＞

開発コスト

開発にあたってプラットフォームごとの開発言語を使用するため、開発コストは比較的高い。 Android版ならJava, iOS版ならObjective-CやSwiftを使う。
開発言語だけでなく、開発環境や各OSの知識なども必要になる。

メンテナンスのしやすさ

上記のように各プラットフォームごとの開発なので、修正を加える場合にはそれぞれのソースを修正する必要があり、メンテナンスする際の労力が大きくなってしまう。また修正内容をすぐにアプリに反映することができない。公式ストアを介しているので、配信のための審査が入り、その修正内容がアプリに反映されるためには時間が必要。

開発制約

公式ストアの審査を通るためには、開発に制約をかけなければならない場合もある。
例えばAndroid、iOSはそれぞれの公式ストアに配信する開発者向けのガイドラインを用意しているが、 それに則って、開発を進める必要がある。


＜ユーザー視点＞

動作速度

ネイティブアプリは動作が速い。
なので、高速処理を必要とするゲームや、グラフィックにこだわったアプリなどではネイティブアプリが使われることが多い。

利用環境 （オフライン？オンライン？）

ネイティブアプリは実機にインストールして使われるため、基本的にはオフラインでも利用可能。


＜共通＞

公式ストア

ネイティブアプリは公式ストアでの配信が可能であり、開発側としてはユーザーに見つけてもらいやすいという大きなメリットがある。ユーザーとしても公式ストアに配信されている方が検索しやすく、また信頼性が高い。なので公式ストアで配信できるネイティブアプリは開発側、ユーザー双方にメリットがある。 集客性は公式ストア経由が圧倒的に強い！　　 

デバイス機能の利用

ネイティブアプリではデバイスの機能を最大限に生かしたアプリの作成が可能。
機能の利用に制限がないこと、機能を利用する際の速度も速いことがネイティブアプリの強み。

UI・UX

基本的にはデバイスにあるネイティブUIがそのデバイスに最適化されているため、使いやすく(UX)、スタイリッシュ(UI)に見えることが多い。ネイティブアプリではこのネイティブUIを利用できるので、開発者にとってもユーザーにとってもメリットが大きい。 

f:id:duo-taro100:20160218005810j:plain 

Webアプリについて

＜開発者視点＞

開発コスト

ブラウザで表示を行うため、プラットフォームごとに開発言語を分ける必要がないWebアプリは開発コストが低いといえる。HTML,CSS,javascriptでの実装ができるので、Web開発技術の流用ができ、学習コストもかからない。

メンテナンスのしやすさ

上記のように基本的には開発言語を分割する必要がないのでメンテナンスの労力が少しで済む。また修正内容をすぐに反映させることができ、バグが発生した時などは迅速な対応が可能。

開発制約

公式ストアの審査を経るネイティブアプリと比較すると制約は少ない。

 

＜利用者観点＞

動作速度

Webアプリはネイティブアプリと比較するとは動作が遅い。
なので、高速処理を必要とするゲームや、グラフィックにこだわったアプリなどには向いていない。以前よりはWebアプリの動作速度は向上しており、複雑な処理が少ないアプリであればネイティブとあまり変わらない。

利用環境（オンライン or オフライン)

ブラウザでの表示を行うためオンライン環境が必要。HTML5ではブラウザ内のキャッシュが利用可能だが、それにも制限があるのでオフラインでユーザーに満足してもらうことは難しい。


＜共通＞

公式ストア

Webアプリは公式アプリからの配信ができない。そのため、ユーザーが目に入れる機会は、ネイティブアプリに比べると少なくなる。また公式アプリからインストールして使うアプリに比べて、信頼度はガクッと落ちる。
ブックマークやブラウザ検索からの利用者が多いWebアプリは、インストールして画面上にアイコンが表示されるネイティブアプリに比べて再訪問率が低い。

デバイス機能の利用

Webアプリではデバイスの機能を最大限に生かしたアプリの作成は難しい。
現状では、この点に関してネイティブアプリに太刀打ちできない。
一方で、近年はデバイス側がこの点を改善する方向で(Webアプリからもデバイス機能にアクセス可能にするという)動いている。
近い将来は、このような憂いが無くなる可能性も？？

UI・UX

WebアプリではネイティブUIを使えないため、使いやすさ(UX)や見た目(UI)の問題を抱えることが多い。 しかし、この問題を解決するためにWebアプリ用のUI専用フレームワークも出ているので、そこまで気にしなくてもいいかもしれない。

f:id:duo-taro100:20160218004600p:plain

 

ネイティブアプリとWebアプリの特徴については以上。

ではハイブリッドアプリとはどのように違うのか、比較形式でみていく。

ハイブリッドアプリについて

＜開発者視点＞

開発コスト

Webアプリと同様。ネイティブアプリと比較すれば開発コストを低く抑えることが可能。

メンテナンスのしやすさ

Webアプリと同様。ネイティブアプリと比較すればメンテナンスの労力を低く抑えることが可能。またアプリストア経由でなくても機能のアップデートができるのは強み。

開発制約

ネイティブアプリ同様、公式ストアの審査を通るためには、開発に制約をかけなければならない場合もある。また、ネイティブアプリと比べて審査を通りにくいという点も注意しなければならない。（最近はかなり改善されてきている)


＜ユーザー視点＞

動作速度

Webアプリと同様、動作速度はネイティブに劣る。
なので、高速処理を必要とするゲームや、グラフィックにこだわったアプリなどには向かない。一方でWebアプリよりは動作速度は優れている。


利用環境 （オフライン？オンライン？）

ネイティブアプリ同様に、実機にインストールして使われるため、基本的にはオフラインでも利用可能。


＜共通＞

公式ストア

ネイティブアプリ同様に、公式ストアでの配信が可能であり、開発側としてはユーザーに見つけてもらいやすく、ユーザーとしても公式ストアに配信されている方が検索しやすく、また信頼性が高い。

デバイス機能の利用

ネイティブアプリ同様に、デバイスの機能を生かしたアプリの作成が可能。
でも実装可能な機能は、開発に使うツール（フレームワーク）に依存するというデメリットもある。

UI・UX

Webアプリ同様に、ネイティブUIを使えないため、使いやすさ(UX)や見た目(UI)の問題を抱えることが多い。 しかし、この問題を解決するためにハイブリッドアプリ用のUI専用フレームワークも出ているので、そこまで気にしなくてもいいかもしれない。

 

f:id:duo-taro100:20160214124138j:plain

以上が、ハイブリットアプリとネイティブアプリ、Webアプリそれぞれの違い。

次回は今回と似ている内容だが、「【連載】ハイブリッドアプリの最新情報とその動向【Corodva】- 3章 ハイブリッドアプリのメリット・デメリット」というタイトルで書いていく。

it-innovation.hatenablog.com

 

以上