Techvenience

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

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

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

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

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

1章 ハイブリッドアプリとは？

ハイブリッドアプリの構造

「ハイブリッドアプリとは？」という説明のなかでよく使われる画像がこれ。

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

これはハイブリッドアプリの構造を説明しているもので、アプリの画面にWebViewというネイティブのコンポーネントを使っており、このWebViewの中でHTMLの画面を表示している。つまり、

ネイティブとWebの性質を併せ持ったもの！

 ということ。

もう少しわかりやすい画像があったので拝借。

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

画像元：http://www.mdn.co.jp/di/articles/2685/?page=4

 

このように、

一つの画面上にネイティブの部分とWebの部分が同時に表示される 

これがハイブリッドアプリ！ 

 

ハイブリッドアプリが注目されている理由 

でも、ネイティブの部分とWebの部分が同時に表示される メリットってあるの？と考える人がいると思う。これに関してはメリット・デメリットがあるが、ハイブリッドアプリが注目される点はそこ（同時に表示される点）ではない。詳細は「3章 ハイブリッドアプリのメリット・デメリット」で説明するので、ここでは大まかな部分を。

＜ハイブリッドアプリが注目されている理由＞

・公式ストアでの配信が可能

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

 

■公式ストアでの配信が可能 

ネイティブアプリは公式ストアでの配信が可能。Webアプリは不可能。ハイブリッドアプリはこれが可能になっている！

公式ストアは集客性に優れているだけでなく、ユーザーからの信頼をとても得やすい。つまり

公式ストアでの配信がユーザー獲得のために必要

ということ。

そこで「 だったら最初から公式ストアで配信できるネイティブアプリで作ればいいのに」という声が聞こえてくる。

その通りだけど、ハイブリッドアプリにはそれ以外の利点もあり、それはネイティブアプリでは実現が難しいとされている。

 

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

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

これがネイティブアプリでは難しい。ネイティブアプリ開発では、Android版の開発にJava、iOS版の開発にObjective-C（Swift）といった開発言語を使用しなければならない。つまり

開発やメンテナンスに時間的・技術的なコストがかかる

単に開発言語だけでなく、開発環境や各OSの知識なども知っておかなければならない場合が多い。

そこをハイブリッドアプリは解決してくれる。

WebViewを用いることで、HTMLやJavaScript、CSSで記述したアプリが様々なOSで動作するようになっている。

一つのソースでiOS版、Android版のアプリを開発可能

（※全てを共通化できるわけではないので注意！）

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

他にもハイブリッドアプリが注目されている理由はあるが、ハイブリッドアプリがどのようなものかを理解してもらうには十分だろう。

 

次回は、「【連載】ハイブリッドアプリの最新情報とその動向【Corodva】- 2章 ネイティブアプリ、Webアプリとの違いは？」というタイトルで書いていく。

 

it-innovation.hatenablog.com

 

以上

 

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

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

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

本日は、連載の最初ということで今後の連載内容について記載。

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

 

＜連載内容＞

1章 ハイブリッドアプリとは何か？

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

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

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

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

6章 Cordovaの開発環境を整える【iOS、Android】

7章 CordovaでHelloWorld

 

ハイブリッドアプリに関する連載は、上記のようなメニューで記事を書いていく。

 

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

「1章 ハイブリッドアプリとは何か？」をご覧になる方は以下のページから。

 

it-innovation.hatenablog.com

以上。

【AngularJS・Cordova】勉強・学習方法について整理【備忘録】

備忘録

最近の学習のなかで思ったこと

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

 

まず、AngularJSについて勉強してると、わからないことがかなりあって、

何をどうやって学習すべきか

ということを意識しないと、訳が分からなくなる。

また、

本来の目的がハイブリッドアプリ開発であることを忘れてしまいがち

ということもあって、もう少し体系的な学習方法を模索していこうと思っている。

 

具体的には、

①アプリ開発と並行して、開発に必要な知識を得る

ハイブリッドアプリで作りたいものを決める

　　　　　　　　　　↓

それを実現するために必要な知識を学習する

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

 

②AngularJSについては初心者なので、学習計画に沿って勉強する

　　　　　　学習計画の作成

　　　　　　　　　↓

　　　　　　それに沿った学習

　　　　　　　　　↓

　　　学習した内容をどこかにまとめる

 

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

①についてはブログの最初の方で実践していたので、それを継続する形で実施。

アプリの詳細についてはリリースしてから紹介するが、ブログのエントリーは

実装したい機能ごと

の投稿を心がける！たとえば、

「OnsenUIでリスト表示」のようなタイトルで、その実装方法について書いていく。

 

② => 以下ように進める

1.AngularJSのチュートリアルを行う

2.用語の理解

3.ToDoアプリを作成

4.その後、ソースをいじってみて挙動を確認。

 

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

もう一度、情報の整理をしながら進んでいく。

焦らないでじっくりと。

以上

【AngularJS】今後の課題、調べること【備忘録】

AngularJS 備忘録

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

 

ただの羅列

 

・AngularJSの、コントローラでfunctionを分離したことによる利点は？

・AngularJSのmoduleがもつメソッド？について詳しく

・AngularJSのコントローラ、ディレクティブ、フィルタとは？

・AngularJSの情報をまとめたWikiの作成

・AngularJS以外にも、OnsenUI、Monacaについてまとめたwikiをつくる

 

wikiといってもブログで書いたものをわかりやすく整理したものにする予定。

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

以上

【AngularJS】$scopeを使う場合と使わない場合の比較【スコープ】

AngularJS

今回はAngularJSの$scopeについて調べた。

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

 

$scopeとは？？

it-innovation.hatenablog.com

上記の記事でも書いたが、

AngularJS 2系では$scopeが廃止される

$scopeを使わないでも実装が可能

 

ということもあって、基本的には$scopeを使わない方針。

$scopeを使った場合、使わなかった場合の比較を行う。

赤文字の部分が変わったところ。

$scopeを使った場合

index.html

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="js/HelloWorld.js"></script>

</head>
<body>
 <div ng-app="myApp">
  <div ng-controller="myController">
   {{message}}
  </div>
 </div>
</body>
</html>

HelloWorld.js

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.message = 'Hello Tom!';
});

 

$scopeを使わない場合

index.html

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="js/HelloWorld.js"></script>

</head>
<body>
 <div ng-app="myApp">
  <div ng-controller="myController as mycon">
   {{mycon.message}}
  </div>
 </div>
</body>
</html>

 

HelloWorld.js

var app = angular.module('myApp', []);
app.controller('myController', function() {
  this.message = 'Hello Tom!';
});

 

 

変わった部分

index.html

$scopeを使う場合

　　　　　ng-controller = "myController"  

$scopeを使わない場合

ng-controller = "myController as mycon"

$scopeはindex.htmlへの記述がなくても、データモデルをビューへ渡せる。$scopeを使わない場合はその代わりに、「as」を使う。

 

HelloWorld.js

$scopeを使う場合

　　　　　function($scope){

　　　　　　　$scope.message = 'Hello Tom!';

                  }

$scopeを使わない場合

　　　　　function(){

　　　　　　　this.message = 'Hello Tom!';

                  }

 $scopeの代わりに、「this」が使われている。また、引数も無くなっている。

このように、$scopeを使わない実装もできるので、覚えておく価値はある。

今後、当ブログでは$scopeを使わない実装をしていく。

 

 

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

以上！

【AngularJS】$scopeとは何か【スコープ】

AngularJS

今回はAngularJSの$scopeについて調べた。

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

 

$scopeとは？？

リファレンスで調べてみたけど、分かりにくかったので簡単に言うと、

ビューとコントローラの橋渡し

具体的には、

　　　モデルをビューにバインディングするためのオブジェクト

　　　ビューでのイベントを受けて、何かしらの振る舞いをするためのオブジェクト

 

 

さて、スコープの使い方について学ぼうか！と思っていた矢先にこんな情報を得た。

AngularJS 2系では$scopeが廃止される

 

そして、現在でも

$scopeを使わないでも実装が可能

 

らしい。

なので、基本的には$scopeを使わない方針でいく。

$scopeを使った場合、使わなかった場合の比較を以下のページで解説している。

it-innovation.hatenablog.com

 

 

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

以上！

【AngularJS】factoryとは【Service】

AngularJS

今回はAngularJSのfactoryについて調べた。

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

 

factoryとは？？

リファレンスで調べてみた！

サービス・インスタンスを返すために呼び出されるservice factoryを実装するためのもの。    
これは、factoryに与えられているgetプロパティのみで構成されるproviderの実装を省略するためのもの。  
providerにサービスを設定する必要がない場合は、$ provide.factory （）を使用する必要がある。

さっぱりわからない。 provider,injectorなどの用語も出てきて、理解できず。

ちなみにproviderについてもリファレンスを見てみると

$injectorを使用してプロバイダの機能を実装するためのもの。
providerメソッドは、サービスのためのfactoryの提供を担当しているコンストラクターです。

$injectionってなに???

 

こうなった。

これでは進まないので、もっといい解釈はないかと調べた結果が以下の通り。

コンポーネント化を行うために「Service」というものがあるが、factoryはその作成方法の一つ。
factoryを含めて、Serviceの作成方法には以下の3つがある。

Value()

値の定義に使用する。定数とかを扱う場合に使うことが多い。

Factory()

関数などの定義に使用する。値だけでなく、関数やオブジェクトを返すことができる。 

Service()

前述した「Service」と名称は一緒だが、別物。
コンポーネント化するためのServiceを作成する方法の一つに「Service」がある。
オブジェクトをインスタンス化したうえで、それを扱うためのもの。

簡単にいえば、上記のような感じ。

どんな時にそれぞれを使うのかはまだ調査中だが、現状の認識は以下の通り

 

■定数など値の定義・・・Value()

 

■関数、配列などの定義・・・Factory()

 

■クラスの定義・・・Service()

 

調査して違うようであれば修正する。

話を戻すと、Factoryとは・・・

 

値や関数などを定義するためのServiceを作るための一つの方法であり、そのうち関数や配列などを扱うもの

 

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

以上！

【AngularJS】moduleとはなにか【モジュール】

AngularJS

AngularJSのmoduleについて

 

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

 

<本日のメニュー>

moduleとは？

moduleの作成　　

moduleの取得 

moduleの依存関係　　

moduleの推奨セットアップ 　　

moduleのメソッド

-----------------------------------------------------

 

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

moduleとは？

公式リファレンスによると

AngularJS でアプリケーションを構築する時最初に必要になるのがモジュールです。

モジュールはアプリケーションが必要としているパーツの情報を持ったオブジェクトです。

AngularJS ではアプリケーションに必要な機能は全てモジュールのメソッドを使って定義します。

だそう。とりあえず「オブジェクト」という認識で。

 

moduleの作成

モジュールを作成するには angular.module メソッドを使用。

たとえば、以下のように記述する。

var myModule = angular.module('MyModule', []);

第一引数はアプリケーションの名前。 上の例では'MyModule'がそれに当たる。

第二引数の配列には作成するモジュールが依存している外部モジュールの名前を列挙する。 上の例では [] に当たる。
依存するモジュールがひとつも存在しない場合でも第二引数を省略出来ない。

 

moduleの取得

作成時は第二引数を省略できないが、モジュールの取得には第二引数を省略する。 

var myModule = angular.module('MyModule');

すでに存在するモジュール'MyModule'の取得は上記のように行う。

 

moduleの使い方

AngularJSは 「ng-app」 属性を持った要素を探し出し、属性値で指定されたモジュールをロードしてアプリケーションを開始する。

以下のように使いたいページに定義する。

<body ng-app="MyModule">
</body>

ちなみに、必ずしもbodyタグ内に記述しなければならないわけではない。 

<html lang="en" ng-app="myModule">

このようにhtmlタグ内などでもOK!
他のタグの中で正常に動くかどうかは試していないので、今後の課題。

 

moduleの依存関係

モジュールは別のモジュールに定義された機能を利用することが出来る。
例えば 

// sub.js
angular.module('Sub', []);

// myModule.js
angular.module('MyModule', ['Sub']);

MyModuleモジュールは自身に定義された機能以外に Sub モジュールに定義された機能も使用することが出来るようになる。Javaでいう継承みたいなもの？？

 

moduleの推奨セットアップ

以下のように、アプリケーションを複数のモジュールに分割することが推奨されている。 

サービス宣言のための、serviceモジュール  
      // コントローラやディレクティブ、フィルタなどで共通して使われる値や関数を定義する場所
ディレクティブ宣言のための、directiveモジュール  
      // HTML に新たな振る舞いを与えたり DOM を変更したりする
フィルター宣言のための、filterモジュール  
      // データを加工し表示する
上記のモジュールに依存し、初期化コードを持つモジュール  
      // ??どんな役割か調べる！

特に大きなアプリケーションを作る際には分割した方が良い。

  • Serviceモジュールとは
  • Directiveモジュールとは
  • Filterモジュールとは
  • 初期化コードを持つモジュールとは

上記の内容については追い追い。

 

moduleのメソッド

以下の12つのメソッドが用意されている。
- providerメソッド
- factoryメソッド
- serviceメソッド
- valueメソッド
- constantメソッド
- decoratorメソッド
-　animationメソッド
- filterメソッド
- controllerメソッド
- directiveメソッド
- configメソッド
- runメソッド 

それぞれの詳細についても追い追い。

 

以上がAngularJSの概要。まとめると

 

■moduleはオブジェクト

■作成は以下のようにする

var myModule = angular.module('MyModule', []);

■moduleの取得は

var myModule = angular.module('MyModule');

 

■moduleを使うためには、bodyタグやhtmlタグのng-app属性にmodule名を指定する

 

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

 

以上

【OnsenUI】リストを使って、詳細画面への遷移を行う【AngularJS】

AngularJS Monaca OnsenUI

前回の記事にも書いた通り、AngularJSとOnsenUIのリストを使って画面遷移を実装する

 

it-innovation.hatenablog.com

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

 

記事の作成から数年が経ち、情報が古くなったので新たに記事をおこした。

OnsenUI vaer2.0を仕様

www.sky-limit-future.com

 

 

 

 

---------------------------------------------------

以下古い記事なので参考までに

 

今後の開発についてだが、基本的にはMonacaを使用して行う。理由は開発環境が整っていて、ブラウザがあれば開発が可能だから。

 

 

＜本日のメニュー＞

0.事前準備
1.リストの作成
2.データを保持するServiceの実装
3.データの表示（リスト形式）
4.画面遷移の実装（データの受け渡し）

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

それぞれわからないところを細かく調べていく。

横道にそれることもあるので・・・

参考ページ

blog.asial.co.jp

 

参考というか、ソースは拝借して、ここではもっと深く入り込んでいく。

事前準備

まずはMonacaにログインして、OnsenUIテンプレートを選ぶ

（無料会員登録が済んでいない場合は、まず会員登録から）

monaca.io

 

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

これを選択すると、

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

 このように表示される。

このテンプレートではindex.htmlが呼ばれると、そのままpage1.htmlが表示される仕組みになっている。これは「ページナビゲーション」とよばれる実装方法。

 

以下、OnsenUIの説明

Onsen UIでは、<ons-navigator>コンポーネントでページナビゲーションを実装します。ons-navigatorは画面要素を持たない、ナビゲーションコントローラーです。そのため、一般的にはページ内にツールバーを表示するために<ons-toolbar>を組み合わせます。ナビゲーターは画面遷移をする際に自動的にアニメーションを適用し、親子関係を持つページを作成するために利用できます。

 なので、まずはpage1.htmlにリストを表示させる！

 

 

リストの作成

OnsenUIでリストを作成するには

 

<ons-list> </ons-list>

 

を使用する。もともとのpage1.htmlを以下のように変更する

 

<ons-page>
   <ons-toolbar>
      <div class="center">ListPage</div>
   </ons-toolbar>

   <div style="text-align: center">
      <ons-list>
         <ons-list-item>リスト1</ons-list-item>
         <ons-list-item>リスト2</ons-list-item>
         <ons-list-item>リスト3</ons-list-item>
      </ons-list>
   </div>
</ons-page>

すると、リストが表示される 

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

 

今回は、リスト押下時に画面遷移をさせたいので、矢印（＞）のようなものをつけたい。CSSや画像などで付ける方法もあるが、OnsenUIにはそれが用意されている

 

<ons-list modifier="chevron"></ons-list>

のように、「modifier="chevron"」をつけることによって、右矢印付きのリストが表示される。

修正後のpage1.htmlと表示画面は以下の通り。

<ons-page>
   <ons-toolbar>
      <div class="center">ListPage</div>
   </ons-toolbar>

   <div style="text-align: center">
      <ons-list>
         <ons-list-item modifier="chevron">リスト1</ons-list-item>
         <ons-list-item modifier="chevron">リスト2</ons-list-item>
         <ons-list-item modifier="chevron">リスト3</ons-list-item>
      </ons-list>
   </div>
</ons-page>

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

データを保持するServiceの実装

今回はデータを固定で用意して、それをリストに表示させる。上でリストを作成したのはどのように表示されるか試すためなので、page1.htmlはあとで修正する。

まずはdataService.jsを作成し、以下のように書く 

＜ dataService.js＞

var myApp = angular.module('myApp');
myApp.factory('Data', function(){
　　var data = {};

　　data.items = [
　　　{
　　　　title: 'Item 1',
　　　　description: 'Item 1 Description'
　　　},
　　　{
　　　　title: 'Item 2',
　　　　description: 'Item 2 Description'
　　　},
　　　{
　　　　title: 'Item 3',
　　　　description: 'Item 3 Description'
　　　}
　　];

　　return data;
});

 

 上記はAngularJSを用いた書き方。初見なので何をやっているかわからない。

調べつつ、情報の整理のために、書き方に解説を加えていく。

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

 

var List = angular.module('List');

まず思ったことは、「moduleってなに？？」ってこと

 

it-innovation.hatenablog.com

 

要約すると、

モジュールはアプリケーションが必要としているパーツの情報を持ったオブジェクト

 

続いて

List.factory('Data', function(){ });

 ここでは思ったことは「factoryってなに？？」ってこと

 

it-innovation.hatenablog.com

 

要約すると、

factory()は値や関数を定義する方法の一つ！

   { 
      id: 'Item 1',
      memo: 'Item 1 Description'
   }

 なのでdataService.jsでは「data」に配列を格納しており、それを返しているのだろう。長くなりそうなので、続きは次回。

データを表示させるところから。

 

 

【ハイブリッドアプリ開発】今後の課題【AngularJS・LocalStrage】

AngularJS OnsenUI LocalStrage

昨日の続き

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

＜調べること＞

  • LocalStrageの容量について
  • OnsenUIのリスト押下時の画面遷移について
  • AngularJSを用いたLocalStrageの使用方法
  • AngularJSの全般

それぞれについて簡単に説明してから、「OnsenUIのリスト押下時の画面遷移について」を実際に吟味していく

f:id:duo-taro100:20160218004600p:plainLocalStrageの容量について

まずはLocalStrageの容量についての疑問。

これは、LocalStrageには容量制限があると思うが、それはどのように決まっているのかどうか、ということ。自分の持っているスマートフォンなどの容量がある限り使えるのか、それともアプリごとの制約があるのか。これがはっきりしない。前者だと思っているが、ちゃんと調べようと思う。

 

OnsenUIのリスト押下時の画面遷移について

OnsenUIのリストを押下した時に、そのリストの詳細情報を持つ詳細画面への遷移をする方法について考える。OnsenUIはAngularJSとの相性が良いみたいなので、AngularJSを使って実現したい。

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

AngularJSを用いたLocalStrageの使用方法

AngularJSをハイブリッドアプリ開発の中心にしていこうと考えているので、LocalStrageの扱い方を学びたい。

 

AngularJSの全般

上記の内容と重なるが、AngularJSの知識は皆無なので、基本から学んでいきたい。

チュートリアルなどを使ってブログ内で考察もしていくつもり

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

 

 

 

 

 

概要はこんな感じ。

「OnsenUIのリスト押下時の画面遷移について」書こうと思ったけど、どこに書いたかを忘れそうなので、記事を新しく作成してから書く。

→

 

【ハイブリッドアプリ開発】Monacaでハイブリッドアプリ開発【OnsenUI・AngularJS】

Monaca OnsenUI AngularJS 備忘録 ハイブリッドアプリ

前回から更新がかなり遅くなった。

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

今回からMonacaを用いたハイブリッドアプリ開発について書いていく。

Corodvaの開発環境構築についても随時更新していく予定。

 

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

 

今回は今後まとめていく内容について、忘れないようにメモを！

ちなみに、Monaca + OnsenUI を主軸として開発を進めていく。

OnsenUIはAngularJSとの相性が良いそうだが、いままで触ったことがない。なのでAngularJSに関する記事が多くなりそう。

＜調べること＞

  • LocalStrageの容量について
  • OnsenUIのリスト押下時の画面遷移について
  • AngularJSを用いたLocalStrageの使用方法
  • AngularJSの全般

今日はここまで。

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

 

【ハイブリッドアプリ】MacでCordovaでの開発環境を整える③ -Android版-

開発環境構築 Cordova Android

本業が忙しく、更新が遅くなった。

やっとandroidの開発環境も整えることができたので。

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

 

<Cordovaを使ったAndroid開発環境の構築>

■JDKのダウンロード

■Android SDKのダウンロード

■Antのダウンロード

■細かい設定（PATHに通す、必要パッケージのダウンロード)

■プラットフォームの追加(Android と ブラウザ)

■エミュレーターの準備〜起動

 

以上の流れで。Android Studioをダウンロードするやり方もあるが、それは後日。たぶん、そっちの方が楽チン。

node.jsやcordovaのインストールについては前回の記事を。

it-innovation.hatenablog.com

 

■JDKのダウンロード

上記のリンクから進んで、Accept License Agreementを選択してから、環境にあったものをダウンロード。

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

 

■Android SDKのダウンロード

Download Android Studio and SDK Tools | Android Developers

こちらも、上記リンクから環境にあったものをダウンロード。

 

ダウンロードしたSDKをApplicationsディレクトリ直下に移動。

 

$ mv android-sdk-macosx/ ~/Applications/

 
 
移動が正常に行われたか確認。
 

cd Applications/

 

$ ls

android-sdk-macosx

 

■Androidビルド用にantのインストール

$ brew install ant

 

 

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

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

 🍺  /usr/local/Cellar/ant/1.9.4: 1597 files, 39M, built in 44 seconds

 

 

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

■細かい設定（PATHに通す、必要パッケージのダウンロード)

まずは現状の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を通す

$ export PATH=/Users/duotaro/Library/Android/sdk/tools:$PATH

 

$ export PATH=/Users/duotaro/Library/Android/sdk/platform-tools:$PATH

変更を適用

$ source ~/.bash_profile

 

変更後の確認

$ echo $PATH

/Users/duotaro/Library/Android/sdk/platform-tools:/Users/duotaro/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

 

 

次。

必要なパッケージのインストール。

$ android sdk

 

android sdkコマンドでこ以下のような画面がでてくる。

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

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

 

 

■プラットフォームの追加(Android、ついでにブラウザも）

サンプルプロジェクトへ移動

$ cd testCordova/

ブラウザの追加 

$ cordova platform add browser

Adding browser project...

Running command: /Users/duotaro/.cordova/lib/npm_cache/cordova-browser/4.0.0/package/bin/create /usr/local/bin/testCordova/platforms/browser io.cordova.hellocordova HelloCordova

Creating Browser project. Path: platforms/browser

Installing "cordova-plugin-whitelist" for browser

 

Androidの追加

$ cordova platform add android

Adding android project...

Creating Cordova project for the Android platform:

Path: platforms/android

Package: io.cordova.hellocordova

Name: HelloCordova

Activity: MainActivity

Android target: android-23

Android project created with cordova-android@5.1.0

Installing "cordova-plugin-whitelist" for android

 

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

 

$ cordova emulate android -d

Executing "before_emulate"  hook for all plugins.

Executing "before_prepare"  hook for all plugins.

Searching PlatformJson files for differences between project vs. platform installed plugins

No differences found between project and android platform. Continuing...

Generating config.xml from defaults for platform "android"

Wrote out Android application name to "HelloCordova"

Wrote out Android package name to "io.cordova.hellocordova"

This app does not have launcher icons defined

updated project successfully

Executing "after_prepare"  hook for all plugins.

ANDROID_HOME=/Users/duotaro/Library/Android/sdk

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_73.jdk/Contents/Home

No emulator specified, defaulting to Nexus_5_API_23

 

Waiting for emulator...

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

以上。

公式のエミュレータはかなり遅い。Genymotionを使う案も！それは次回。

実機での確認方法も次回以降に更新する予定。

 

【ハイブリッドアプリ】MacでCordovaでの開発環境を整える③ -iOS版-

開発環境構築 Cordova iOS ハイブリッドアプリ
結局、昨日もエラーを解決できなかったので、もう一度。
富士ゼロックス　スーパーカップを観ながら。
 

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

＜MacでCordovaでの開発環境を整える③ -iOS版-＞

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

・Cordovaのインストール

・サンプルプロジェクトの作成

・プラットフォームの追加（iOSのみ)

・iOSシュミレーターの準備

・ビルド

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

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

 

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

v5.6.0 Stableの方。
 

$ node -v

v5.6.0

$ npm -v

3.6.0

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

 

Cordovaのインストール

 

$ sudo npm install cordova -g

 

npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

/usr/local/lib

 

└── cordova@6.0.0 

WARNは出てるけど、確認。
 

$ cordova -v

6.0.0

 
できた。バージョンの問題か？再起動が必要だったのか？原因は不明。。。
 

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

サンプルプロジェクトの作成

$ cordova create testCordova

 

Creating a new cordova project.

 

プラットフォームの追加（iOSのみ)

サンプルプロジェクトのディレクトリへ移動

$ cd testCordova

 

プラトフォームの追加

androidについてはSDKにpathを通す必要があり、ちょっと面倒なので後回し。まずはiOSを。

iOSプラットフォームの追加

 

$ cordova platforms add ios

 

Adding ios project...

iOS project created with cordova-ios@4.0.1

Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project

Fetching plugin "cordova-plugin-whitelist@1" via npm

 

Installing "cordova-plugin-whitelist" for ios

 

iOSシュミレーターの準備

$ sudo npm install -g ios-sim

 

 

/usr/local/bin/ios-sim -> /usr/local/lib/node_modules/ios-sim/bin/ios-sim

/usr/local/lib

└─┬ ios-sim@5.0.6 

  ├── bplist-parser@0.0.6 

  ├─┬ nopt@1.0.9 

  │ └── abbrev@1.0.7 

  └─┬ simctl@0.0.8 

    ├── shelljs@0.2.6 

    └── tail@0.4.0 

 

ビルド

$ cordova build ios
 
長いので省略するが、成功すれば以下のように表示される。

** BUILD SUCCEEDED **

 

iOSシュミレーターの起動

$ cordova emulate ios
 
** BUILD SUCCEEDED **
 こちらも成功すれば、上記のように表示される。またiOSシュミレーター画面も起動する。こんな感じ
 

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

 
 
次回は、Androidでのエミュレーター起動まで。

【ハイブリッドアプリ】MacでCordovaでの開発環境を整える② -エラー対処の続き-

ハイブリッドアプリ 開発環境構築 アプリ開発 Cordova

前回記事から引き続き、開発環境の構築。

ちなみにブログは備考録的に使っているため、まとまっていないので読みにくいと思う。ある程度、進展があった段階でまとめページを作成(wikiで作成検討）する予定なので、乞うご期待。

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

昨日やったものを無かったことにして、最初からやり直した。

 

node.jsインストールからやり直し。昨日とは異なるバージョンをインストール。

まずはnode.jsやnpm、cordovaをアンインストール
 
再度インストール。
 
バージョン確認

$ node -v

v4.3.1

$ npm -v

2.14.12

 

 

続いて、Cordovaのインストール

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

$ sudo npm install -g cordova

 

昨日は出なかったWARNがでた。

npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

npm WARN unmet dependency/usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/sshpk requires assert-plus@'>=0.2.0 <0.3.0' but will load

npm WARN unmet dependency/usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/assert-plus,

npm WARN unmet dependency which is version 0.1.5

npm WARN unmet dependency/usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/sshpk/node_modules/dashdash requires assert-plus@'^0.2.0' but will load

npm WARN unmet dependency/usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/assert-plus,

npm WARN unmet dependency which is version 0.1.5

cordova@6.0.0 /usr/local/lib/node_modules/cordova

├── underscore@1.7.0

├── q@1.0.1

├── ansi@0.3.1

├── nopt@3.0.1 (abbrev@1.0.7)

├── update-notifier@0.5.0 (is-npm@1.0.0, semver-diff@2.1.0, repeating@1.1.3, string-length@1.0.1, chalk@1.1.1, configstore@1.4.0, latest-version@1.0.1)

└── cordova-lib@6.0.0 (opener@1.4.1, valid-identifier@0.0.1, cordova-registry-mapper@1.1.15, unorm@1.3.3, properties-parser@0.2.3, semver@4.3.6, dep-graph@1.1.0, nopt@3.0.6, shelljs@0.3.0, xcode@0.8.0, elementtree@0.1.6, npmconf@2.1.2, glob@5.0.15, request@2.47.0, cordova-serve@1.0.0, tar@1.0.2, aliasify@1.9.0, cordova-app-hello-world@3.10.0, init-package-json@1.9.3, plist@1.2.0, cordova-js@4.1.3, npm@2.14.20)

 

 

 

これはスルーしたらまずいかな、と思いつつCordovaのバージョン確認

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

 

$ cordova -v

 

module.js:327

    throw err;

    ^

 

Error: Cannot find module 'bplist-parser'

    at Function.Module._resolveFilename (module.js:325:15)

    at Function.Module._load (module.js:276:25)

    at Module.require (module.js:353:17)

    at require (internal/module.js:12:17)

    at Object.<anonymous> (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/cordova-common/src/ConfigChanges/ConfigFile.js:20:14)

    at Module._compile (module.js:409:26)

    at Object.Module._extensions..js (module.js:416:10)

    at Module.load (module.js:343:32)

    at Function.Module._load (module.js:300:12)

    at Module.require (module.js:353:17)

 

    at require (internal/module.js:12:17)

 

 

昨日とほぼ同じエラー。

ということはCordovaインストールがやはりうまくいっていないのだろう。

 

$ npm list

 

 

で確認。

 

npm ERR! missing: bplist-parser@^0.1.0, required by cordova-common@1.0.0

npm ERR! missing: osenv@^0.1.3, required by cordova-common@1.0.0

npm ERR! extraneous: lodash.repeat@3.1.0 /usr/local/lib/node_modules/npm/node_modules/node-gyp/node_modules/npmlog/node_modules/gauge/node_modules/lodash.pad/node_modules/lodash.repeat

npm ERR! extraneous: es6-symbol@3.0.2 /usr/local/lib/node_modules/npm/node_modules/node-gyp/node_modules/path-array/node_modules/array-index/node_modules/es6-symbol

npm ERR! extraneous: lodash.repeat@3.1.1 /usr/local/lib/node_modules/npm/node_modules/npmlog/node_modules/gauge/node_modules/lodash.pad/node_modules/lodash.repeat

npm ERR! extraneous: process-nextick-args@1.0.6 /usr/local/lib/node_modules/npm/node_modules/readable-stream/node_modules/process-nextick-args

npm ERR! extraneous: util-deprecate@1.0.2 /usr/local/lib/node_modules/npm/node_modules/readable-stream/node_modules/util-deprecate

npm ERR! invalid: assert-plus@0.1.5 /usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/assert-plus

npm ERR! extraneous: jsprim@1.2.2 /usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/jsprim

npm ERR! extraneous: sshpk@1.7.3 /usr/local/lib/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/sshpk

npm ERR! extraneous: is-typedarray@1.0.0 /usr/local/lib/node_modules/npm/node_modules/request/node_modules/is-typedarray

npm ERR! extraneous: aws4@1.2.1 /usr/local/lib/node_modules/npm/node_modules/request/node_modules/aws4

npm ERR! extraneous: isexe@1.1.1 /usr/local/lib/node_modules/npm/node_modules/which/node_modules/isexe

npm ERR! extraneous: aproba@1.0.1 /usr/local/lib/node_modules/npm/node_modules/aproba

npm ERR! extraneous: debuglog@1.0.1 /usr/local/lib/node_modules/npm/node_modules/debuglog

npm ERR! extraneous: has-unicode@2.0.0 /usr/local/lib/node_modules/npm/node_modules/has-unicode

npm ERR! extraneous: iferr@0.1.5 /usr/local/lib/node_modules/npm/node_modules/iferr

npm ERR! extraneous: imurmurhash@0.1.4 /usr/local/lib/node_modules/npm/node_modules/imurmurhash

npm ERR! extraneous: lodash._baseindexof@3.1.0 /usr/local/lib/node_modules/npm/node_modules/lodash._baseindexof

npm ERR! extraneous: lodash._baseuniq@3.0.3 /usr/local/lib/node_modules/npm/node_modules/lodash._baseuniq

npm ERR! extraneous: lodash._bindcallback@3.0.1 /usr/local/lib/node_modules/npm/node_modules/lodash._bindcallback

npm ERR! extraneous: lodash._cacheindexof@3.0.2 /usr/local/lib/node_modules/npm/node_modules/lodash._cacheindexof

npm ERR! extraneous: lodash._createcache@3.1.2 /usr/local/lib/node_modules/npm/node_modules/lodash._createcache

npm ERR! extraneous: lodash._getnative@3.9.1 /usr/local/lib/node_modules/npm/node_modules/lodash._getnative

npm ERR! extraneous: lodash.isarguments@3.0.6 /usr/local/lib/node_modules/npm/node_modules/lodash.isarguments

npm ERR! extraneous: lodash.isarray@4.0.0 /usr/local/lib/node_modules/npm/node_modules/lodash.isarray

npm ERR! extraneous: lodash.keys@4.0.2 /usr/local/lib/node_modules/npm/node_modules/lodash.keys

npm ERR! extraneous: lodash.restparam@3.6.1 /usr/local/lib/node_modules/npm/node_modules/lodash.restparam

npm ERR! extraneous: read-cmd-shim@1.0.1 /usr/local/lib/node_modules/npm/node_modules/read-cmd-shim

npm ERR! extraneous: read-package-tree@5.1.2 /usr/local/lib/node_modules/npm/node_modules/read-package-tree

npm ERR! extraneous: readdir-scoped-modules@1.0.2 /usr/local/lib/node_modules/npm/node_modules/readdir-scoped-modules

npm ERR! extraneous: unpipe@1.0.0 /usr/local/lib/node_modules/npm/node_modules/unpipe

npm ERR! extraneous: unique-filename@1.1.0 /usr/local/lib/node_modules/npm/node_modules/unique-filename

npm ERR! extraneous: lodash.clonedeep@4.0.4 /usr/local/lib/node_modules/npm/node_modules/lodash.clonedeep

npm ERR! extraneous: lodash.union@4.0.2 /usr/local/lib/node_modules/npm/node_modules/lodash.union

npm ERR! extraneous: lodash.uniq@4.0.2 /usr/local/lib/node_modules/npm/node_modules/lodash.uniq

 

npm ERR! extraneous: lodash.without@4.0.2 /usr/local/lib/node_modules/npm/node_modules/lodash.without

エラーが。実は昨日もこれと同じ流れで問題解決に挑んだが、解決できなかった。

今回はnode.jsのバージョンが違うからなのかエラーが増えていた。

 

明日は休みなので、もうちょっとやってみる。

 

つづく。

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

 

【ハイブリッドアプリ】MacでCordovaでの開発環境を整える① -エラー対処-

ハイブリッドアプリ アプリ開発 開発環境構築 Cordova

ハイブリッドアプリのメリット、デメリットは次回以降に。

Cordovaをインストールして開発環境を整えようかと思ったが、苦戦した。

というか、まだ解決していないので現状の記録。

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

 

＜MacでCordova開発環境を整える＞

・node.jsのインストール

・Cordovaのインストール

 

環境を整えて「Hello World!」くらいは表示させて終わらせたかったが、現状はCordovaのインストールでとまっている。ちなみに僕のmacbook airは以下のようなスペック。

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

これは私用のPCで、社用PCにも同時に開発環境を整えている。

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

■node.jsのインストール

以下のURLから

http://nodejs.jp/nodejs.org_ja/docs/v0.10/#download

 

ここではnode.jsと同時にnpmもインストールされる。

ターミナルを起動して、インストールが正常にされたかの確認。

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

上記のようにバージョン情報が確認できればOK。

ちなみに、僕の場合は

/usr/local/bin

にインストールされた。

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

■Cordovaのインストール

$ npm install cordova -g

このように書くとMacではエラーが出るらしいので

$ sudo npm install cordova -g

 

最初にインストールを実行したらこのようなエラーが・・・

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

調べてみたところ、npmなどをアンインストールしてから再度インストールで解決するとのこと。やってみたら成功？？エラーは出なかった。

 

ここでインストールができているかの確認をした。

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

このようなエラーが発生。

これを調べて、様々な方法を試したが解決できず。

明日はここを突破したい。