Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@ayayan-z

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

More than 3 years have passed since last update.

はじめに

Cordovaは、ハイブリッドアプリ開発フレームワークの1つです。

スマホやタブレットの普及が広まってきた時代、
「全社員にスマホやタブレットが配布された。何か業務で使えるアプリをつくってくれないか。」
などといった依頼を受けることが多々ありました。

実際の提案時には、HTML+JSで、それっぽい動きをするプロトタイプを作って、お見せすることが多かったのですが、
アプリとして触れた方がテンション上がるので、さくっとアプリに変換できるCordova(当時はまだPhonegapという名前でした)は、かなり重宝しておりました。
Web Storage も簡単に扱えるので、より現実味のあるデモも可能で、そもままサービスインなんてことも。

ネイティブアプリに比べると重たい、機能が限られるなど、いろいろ言われていましたが、そこは使いどころを工夫すればこそ、
実際に、大手のWebサービスでも利用してるところがたくさんあります。

アプリ開発からはしばらく遠のいていたのですが、ふと自分用に欲しいアプリを思いついたので、久しぶりにCordovaを触ってみることにしました。
当時(2010年くらい?)から、かなりいろいろパワーアップしていて、びっくりです。
この手の記事は山のようにありますが、環境構築〜アプリ作成まで、自分用の備忘録として残します。

環境構築

マイマシーン。(アップデートせな...)
image

1. node.js をインストールする

しょっぱなから違う!前はnode.jsなんて使わなかった。
もともと自PCにインストールされていたので、手順は割愛。
バージョンは最新じゃないかもだけどキニシナイ。

$ node -v
v6.6.0
$ npm -v
3.10.8

2. cordovaをインストールする&動作確認する

本家サイトのとおりに。
https://cordova.apache.org/

かっこよくなってる!
image

GET STARTED の記載の通りにやる。
コマンドがコピーできるようになっている。やさしい。
image

No4の手順までやると、ブラウザが起動されて、HelloWorld!かんたん。
image

確認

$ 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

4. Androidエミュレータを動かしてみる

4.1 事前準備

Android環境は今の自PCには入っていないので、インストールした。

  • ダウンロード

本家サイトより、Android Studio をダウンロード
https://developer.android.com/studio/index.html

image

(あるある?会社WLANプロキシバリバリとかだと落とせない系かもです。)

なんかおしゃれ
image

  • セットアップ
    アプリ初回起動時にセットアップ画面がでる。
    とりあえず何も考えず次へ次へでFinish。
     

  • パスを通す

cordovaコマンドは、Android SDKに含まれているコマンドを内部で利用するため、パスを通す必要がある。
自分の環境だとこう。

.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

SDK PlatformARM EABI v7a System Image を選んでインストールする。
(今回のCordovaのバージョンでは24を入れろとなっていたので、Android7.0の中から選択)

  • Android エミュレータを作成する

コマンドラインより、Android Virtual Device (AVD) Manager を起動する

$ android avd

image

Create ボタンよりエミュレータを作成する。

こんなかんじで。なんとなくNexus5を選んでみた。
image

4.2 Cordovaにエミュレータを追加&起動する

  • Android用のplatformを追加する。
$ cd MyApp
$ cordova platform add android
  • エミュレータを起動する
$ cordova emulate android -d

起動した!おそい...
フライングで黒画面...

image

なんかエラーが発生してやり直したい場合は、一回platformを削除する。

$ cordova platform remove android

3. なんかアプリをつくる

プロト職人もどきであった当時、自分の中では、Cordova+HTML+jQuery(jQuery mobile)の組み合わせが流行っておりました。
なので今回もその組み合わせで!

jQuery Mobileは、当時は最強だった(個人的に、2010年頃。)と思う。(その後、Bootstrapとかとかいろいろ素敵なのが出てきたけど)
もともとJavascpriptが苦手だったけれど、jQueryを使う内にJSに開眼した!という思い入れもある...!

完成が今日に間に合わなかったので、後日アップしますmm
たいしたものではないです。

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ayayan-z

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?