cordovaで作ったアプリをandroidでリリースするまでの手順まとめ
androidアプリのリリースはiosに比べると遥かに簡単だったけど、備忘のためにまとめます。
1.ビルドする
実機につないで動作確認OKとなったらリリース用にビルドします。ここで作られたファイルは[アプリフォルダ]/platforms/android/app/build/outputs/apk/release/の配下に生成されました。
cordova build --release
2.鍵ファイルの作成
署名用の鍵ファイルを作成します。
ここで設定したパスワードは後でたくさん聞かれるので、必ず控えておくこと。
keytool -genkey -v -keystore <鍵ファイル名> -alias <エイリアス名> -keyalg RSA -validity <有効期間>
keytool -genkey -v -keystore keystore.private -alias <エイリアス名> -keyalg RSA -validity 10000
鍵ファイルが生成されたらファイルができたことを以下のコマンドで確認する。
keytool -list -v -keystore <鍵ファイル名> -storepass <パスワード>
keytool -list -v -keystore keystore.private -storepass <パスワード>
3.署名の作成
2で作成した鍵ファイルを使って1のビルドファイルに署名をします。
jarsigner -verbose -keystore <鍵ファイル名>
jarsigner -verbose -keystore keystore.private ./platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk <エイリアス名>
4.アプリの最適化
3で生成されたファイルをandroidで読みやすい形に最適化する。
zipalign -v 4 [被最適化apk] [最適化後の名前]
zipalign -v 4 ./platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk ./app-release20190223.apk
zipalignが見つからないよとエラーが出たので実行ファイルをtools配下にコピーして再度コマンドを実行。
cp ~/zipalign /Users/username/Library/Android/sdk/tools/zipalign
コマンド実行できたら最適化できていることを確認する。
zipalign -c -v 4 ./app-release20190223.apk
生成されたapkファイルを試しに実機に入れてみて動作確認。
問題ないことが確認できたらGooglePlay Consoleにapkをアップロードして完了。
cordovaでのリリース準備：アイコンとスプラッシュ画面の作成
cordovaでのアプリができた、ということでリリース準備を始めることに。
リリースにはアイコンとスプラッシュ画面が必要。（スプラッシュはなくてもいいみたいだけど、一応今回は用意することにした）monacaで開発していた時には、1つの画像を入れたら勝手にmonaca上でリサイズしてくれていたのが、cordovaにはいちいち登録しなくちゃいけないのか・・と思っていたところ、なにやらプラグインで自動的にリサイズしてくれるものがあるらしい。
とりあえずインストールしてみる。
brew install imagemagick npm install splashicon-generator -g
アプリのresourcesフォルダ配下にicon.pngという1024×1024pxのファイルとsplash.pngという2048×2048pxのファイルを置いておいてプラグインを実行。
コマンドのresourcesの部分は配置したフォルダを指定する。
splashicon-generator --imagespath=“resources"
そうするとresフォルダ配下にandroid、ios、windows、wp8のアイコンとスプラッシュ画面がそれぞれ作成される。
インストールするプラグインの詳細
splashicon-generator - npm
config.xmlというファイルがあるので、そこに生成されたファイルのパスを追記していく。プラグインの詳細にコードが書いてあるのでそれをそのままコピペ。
android、iphoneそれぞれ実機にアプリを入れた時にアイコンとスプラッシュが設定されていることを確認したらOK。
参考にしたブログ
【ionic】iconとsplashとはから実装まで - Qiita
xcodeでビルドした時に以下のようなwarningが出たけど、AppleWatchのアイコンだったのでスルー。
The file "AppIcon98x98@2x.png" for the image set "AppIcon" does not exist.
最後に、xcodeでアプリをリリースしようとした際に透過画像だと怒られてしまったので、ios配下のアイコン画像は全てアルファチャンネルを除去して再度ビルドしました。
一人でやってると細かい画像の準備が意外と面倒なんですが、ある程度一括で作ってくれるので助かりました。
cordova開発のライブローディング
アプリ作っていていちいちビルドして確認というのはかなり手間になる。
最初の見た目を作るところまではブラウザである程度確認ができるので、ライブローディングできるプラグインを入れてみた。
cordova plugin add cordova-plugin-browsersync
https://www.npmjs.com/package/cordova-plugin-browsersync
cordova run browser -- --live-reload
上記オプションを付けて実行すると更新の度にブラウザで確認できる。
【framework7】themeの色はlessファイルを変更で変えられる
今回はテーマの色をデフォルトから変更したかったので、以下のサイトを参考にしてテーマの色を変更してみた。
[discussion] Idea about themes - Questions - Framework7 Forum
①新規lessファイルの配置
wwwのcss配下に新しくlessファイルを作ってcustomカラーを定義する。
-www
-css
app.css
icons.css
f7-theme.less ←これ
lessファイルの中身。
@import '../../node_modules/framework7/framework7.less'; @themeColorIos: #FFC666; @themeColorMd: #FFC666; @colorsIos: red #ff3b30, green #4cd964, blue #007aff, pink #ff2d55, yellow #ffcc00, orange #ff9500, gray #8e8e93, white #ffffff, black #000000, custom #FFC666; @colorsMd: red #f44336, green #4caf50, blue #2196f3, pink #e91e63, yellow #ffeb3b, orange #ff9800, gray #9e9e9e, white #ffffff, black #000000, custom #FFC666;
元々色を定義していたframework7.lessの中身を上書きしている感じ。
customという色を作って適用した。
②lessファイルのコンパイル
ファイルをコンパイルしてcssファイルを生成。
SyntaxError: Inline JavaScript is not enabled. Is it set in your options?
と言われるのでオプションをつけて実行した。
lessc --js ./www/css/f7-theme.less ./www/css/f7-theme.css
③生成されたcss配置
先ほどのコンパイルがうまくいくとcssが作成される。
-www
-css
app.css
icons.css
f7-theme.less
f7-theme.css ←これ
index.html内でcssを読み込む。
<link rel="stylesheet" href="css/f7-theme.css”> （略） <body class="color-theme-custom”>
とするとカスタムカラーが適用されるようになる。
チェックボックスとインプットエリアだけ作成した色が適用されていなかったので、以下の記述をlessファイルに追加して再度コンパイル。
@import url('../../node_modules/framework7/components/checkbox/checkbox.less');
@import url('../../node_modules/framework7/components/input/input.less’);最終的なファイルの中身。
@import '../../node_modules/framework7/framework7.less';
@themeColorIos: #FFC666;
@themeColorMd: #FFC666;
@colorsIos: red #ff3b30, green #4cd964, blue #007aff, pink #ff2d55, yellow #ffcc00, orange #ff9500, gray #8e8e93, white #ffffff, black #000000, custom #FFC666;
@colorsMd: red #f44336, green #4caf50, blue #2196f3, pink #e91e63, yellow #ffeb3b, orange #ff9800, gray #9e9e9e, white #ffffff, black #000000, custom #FFC666;
@import url('../../node_modules/framework7/components/checkbox/checkbox.less');
@import url('../../node_modules/framework7/components/input/input.less’);framework7のv4ではこの辺また変わると書いてあるけど、v3で作る場合にはカスタムカラーは定義が必要でした。
妊娠と体重制限と食欲と
前回妊娠した時には体重なんて全然気にしなかった。
検診で測って毎回お腹回りと同じように増えているなぁといった感じ。
今回初めて体重増加を注意された。
24w妊娠前より3.2kg増加。母子手帳の体重欄に赤いアンダーラインが引かれて助産師さんから「ちょっと増えてるねーこの時期の妊婦さんは可哀想なんだけどね」と言われる。
そう、この検診の日は12月25日。その前までが3連休で温泉に行っていたため毎日毎日飽きもせず食べまくっていたのだ。
次の検診は1月8日のお正月明け。「お正月だからご馳走出るだろうけど増えすぎないようにね」と釘を刺される。
お酒を飲めない妊娠中は食べることがいちばんの楽しになっていて、成人女性の1.5倍くらいの量を普通に食べていた。コンビニでお昼買うなら大盛りのパスタとオレンジジュースとおにぎりみたいな組み合わせ。
お弁当を会社に持っていってもペロッと食べ終わってコンビニにパスタを追加で買いに行く、メロンパンがどうしても食べたくて食べたくて仕事中もメロンパンのことばっかり考えてお弁当食べた後に追加で買いに行くなんてことをコソコソ繰り返していた。
周りも「2人分だから大丈夫だよ」とか甘やかしてくるから調子に乗って続ける。
ちょっとやりすぎたかなと反省し、お正月も3が日を過ぎてからは野菜中心の節制メニューに。夫も健康診断でコレステロールに引っかかっていたので2人でちょうどいいタイミングで節制協定。
まだあと2ヶ月あるけど現時点では30wで妊娠前より5kg増加。最近は注意されていないしこのペースなら大丈夫かな。冬は汗かかないし代謝落ちているから食べる分カロリーちゃんと消費しにいかないと大変なことになるぞと言う戒め。
お産が辛くなるのは嫌だけど、もっと嫌なのは元の体重に戻らなくなること。
前回はなんだか気づいたら体重戻っていた感じだけど、今回はあれから2年半も年取ってるし、そんなに簡単に体重落ちないかもよ。
と言いながら次の楽しみは来週末のディナーブッフェ。
お酒飲めない分それくらい楽しまないとという言い訳を携えて。
2歳・妊婦・夫の3人がインフルエンザで全滅
息子が保育園でインフルエンザをもらってきた。
結果、今週は一家全滅。
月曜日11時に着信
38度以上になってしまったのでお迎えをお願いします、とのこと。久しぶりのお迎え電話。保育園に着いた時には37.7度と少し落ち着いた状態。他のお友達もお熱の高い子がいて、明日は休んでくださいと言われる。
熱は38度くらいだけどよく食べる。ご本読んでーと甘えたがりがいつもより強い感じだったけどいつもの風邪かなと言う感じ。
念の為夕方夫が病院に連れて行ってくれる。
帰ってくるとインフルエンザA型だったと言うこと。タミフルとカロナール、カルボシステインシロップを処方されて帰ってくる。
登園するためには感染から5日間もしくは解熱から3日間とあるので、今週いっぱい保育園にはいけないことが決定。インフルエンザとの戦いがスタート。
火曜日息子の症状はピークに
朝から熱は39度台と終始高め。ほとんど1日寝ている状態。見ていても辛そう。でも食欲はある。
大人二人は一日在宅で仕事。夕飯後くらいから雲行きが怪しくなる。
体が痛い気がする・・なんか怠いかもと言う感じ。
水曜大人も感染
朝一の内科に夫が行ってインフルエンザA型と診断された。
夫は今年早々と10月にはワクチンを打っていたのにインフルエンザにかかったと不満気。妊婦でも薬処方してくれると言うことを聞いて、同じ内科に行くことに。その時は38度くらい。雨も降ってて歩くのも辛い。「さっきご家族の方来ましたよね」と言われ診察してすぐにインフルエンザの判定。
妊娠8ヶ月ですが飲めますか？と聞いて薬を無事処方してもらった。
夫：イナビル、カロナール、レスプレン、カルボシステイン
私：イナビル、カロナール、小青湯エキス顆粒
薬の内容は息子だけタミフル、大人はイナビルだった。どっちが効くのかはわからないが、イナビルは処方されたその日に吸引すれば効果があると言うことで毎日飲まなくていいので楽。大きく息を吸ってと言うやり方が多分子供は難しいから大人にしか出なかったのかな。
咳、痰止めが妊婦の私は2人とは異なり漢方に置き換わってました。
この日は私の辛さがMAX。私もインフルエンザ予防接種を打っていたのに。インフルエンザだと言いいながら仕事をしている夫とのこの体調の差は多分妊娠しているのとも関係しているはず。おかげで買い出しとかお願いすることができたので良かったです。
木曜日熱下がり始め
午前中は辛かったものの、午後になって洗濯物を干したり、お昼にラーメン作ったりちょっとずつ動けるようになってきた。夫は相変わらずちょっと体が痛いとか言いながら仕事している。
困ったのは息子が元気を取り戻しつつあり、外に行きたいとかご本を読んで欲しいとか遊んで攻撃の手を緩めないこと。2人とも自分のことで精一杯なのでそんな余裕はなく、かと行ってインフルエンザの病原菌である息子をばあばに預けるわけにもいかず、ゴロゴロしながら持ちこたえました。
金曜日在宅復帰
朝になるともう熱はなく、頭も回りそう。喉が痛くて声が出ないのと鼻水出るくらいだけど、人と会わないので、まぁ大丈夫そうと言うことで私も在宅で仕事開始。
前2日間は辛かったけどご飯も作れるし、いつも通り動けるようになってきた。イナビル効くのか疑ってごめんなさい。でも予防接種は効果あったのか謎。
息子は鼻水垂らしながらも相変わらず元気。ちょっといつもより昼寝の時間が長いかなと言うくらい。
3人揃ってのインフルエンザ感染は大人がダウンして子供が復活したあたりが辛さのピークでしたが、なんとかレトルト食材とスーパーに助けられて生活できました。
2人とも一発でやられたので今回のインフルエンザ感染力はかなり強そう。まだ病原菌は体に残っていそうなので週末の予定はあえなく全てキャンセル。
久々の呼び出しがヘビーで辛かった。シーズン型違いで2回かかる人もいると言うことを聞いてまた恐怖。
お前の母ちゃんデベソって言うけど多分それは妊娠してたんだ
前回の妊娠ではほとんど気にならなかった。
今回7ヶ月を過ぎた頃からお腹が前に前に尖ってくるようにせり出してきた。
それでも冬だからまだ服を着ていると気づかれないこともある。
妊娠線もまだ7ヶ月だとケア始めるかなーって時期だけど、1個だけ目に見えてすごい変化が出てきたのがおへそ。
気付いた時にはデベソだった。
夫に見せたらびっくりされた。
検診いくのに先生に見られるの恥ずかしいね、と綿棒で一生懸命くるくる掃除した。
多分先生はそんなおへその出てる妊婦はたくさん見てるだろうから気にしないと思うけど。
悪口で「お前の母ちゃんデベソ」ってあるけど、あれは絶対夏の妊婦さんだったんだと思う。
冬の妊婦は服着てるとわかんないから。
いじめっ子も多分羨ましかったんだろう、その子に弟か妹ができることが。
おへその掃除ができるくらいしかメリットないよこのデベソ。
無駄に出てる。主張してる。
macでcordova環境を作ろうとしてつまづいたところ
monacaから脱出して自分で環境構築しようとしたがたくさんつまづいた。
手順をひきながら調べらながらでやっと到達した。
駆除したエラーの数々。。
npm install -g cordovaが実行できない
→nodebrewのインストールをcurlではなくてbrewでやってみる。
brew install node
brewコマンドを実行するとgccをインストールしなさいと怒られる.
Error: An exception occurred within a child process: CompilerSelectionError: nodebrew cannot be built with any available compilers. Install GNU's GCC
gccを入れる。
brew install gcc
gccを入れてもまたまた怒られる。
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
xcrunがなくなったとかなんとか。これは同じ症状の人がたくさんいた。macのOSアップデートしたらなったとかなんとか。
xcode-select --install
これでこのエラーは消えた。
再度実行するも、npmが実行できない
→nodebrewのバージョンを指定すると実行できるように。
nodebrew use v10.14.2
やっとここまででcordovaコマンドが使えるようになった。
cordova run iosでエラーがでる
CordovaError: Promise rejected with non-error: 'xcode-select: error: tool \'xcodebuild\' requires Xcode, but active developer directory \'/Library/Developer/CommandLineTools\' is a command line tools instance\n' at cli.catch.err (/Users/username/.nodebrew/node/v10.14.2/lib/node_modules/cordova/bin/cordova:30:15) at process._tickCallback (internal/process/next_tick.js:68:7)
インストールしているディレクトリがダメだよと怒られているみたい。
xcode-select --switch /Applications/Xcode.app
でこのエラー出なくなった。
またまたcordova run iosで以下のエラー
No target specified for emulator. Deploying to iPhone-X, 12.1 simulator /Users/username/VoiceApp/platforms/ios/build/emulator/HelloCordova.app/Info.plist file not found.
iosのエミュレータを実行しようとするとplistが見つからないと言われる。
cordova run ios --buildFlag='-UseModernBuildSystem=0’
実行する際にパラメータを指定してやるといいいよということで、こちらでエラーは出なくなった。
でも毎回パラメータつけなくちゃいけないのは面倒。
cordova run android のエラー
Error: Requirements check failed for JDK 1.8 or greater
これはjavaが複数入っていたのが原因みたい。
ここを参考にして前のjavaを全部消して再度java8をインストールする
Cordova向けにJDKを再インストール - Qiita
javaを入れ直したらエラーが変わった。
Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio
gradleのパスを通してねということ。
echo 'export PATH="/Applications/Android Studio.app/Contents/gradle/gradle-4.6/bin":$PATH' >> .bashrc
パスを通してあげる。
gradle -vするとパーミッションで怒られたので権限を変える。
chmod +x /Applications/"Android Studio.app"/Contents/gradle/gradle-4.6/bin/gradle
再度cordova run android でエラーで怒られる。
You have not accepted the license agreements of the following SDK components: [Android SDK Platform 27].
ここを参考にSDK Manager の画面からライセンスに同意する。
MacでCordova開発環境を構築した備忘録 - Qiita
再度cordova run android
PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT
AVDのパスがないよと言われているみたいなので、パスを通してあげる
echo 'export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk' >> .bashrc
またパニック！と言われる。
PANIC: Broken AVD system path. Check your ANDROID_SDK_ROOT value [/Users/username/Library/Android/sdk]!
adndroid sdkの画面からエミュレータをダウンロードしてみたらエラーが変わった。適当にNexxus_5Xで最新のAPIを選択。
No emulator specified, defaulting to Nexus_5X_API_28 PANIC: Missing emulator engine program for 'x86’ CPU
今度はまた別のx86が見つからないよ、というエラーになる。
結局古いAPIのエミュレータを入れたら正しく起動できた。cordovaが最新のバージョンのAPIには対応していなかったらしい。
環境構築終わり。長かった。
【framework7】HTML内でのjavascriptの呼び出し方
開発しているとすぐにHTMLの中でjavascriptを呼び出したいという場面が出てくる。framework7の中でHTML内でjavascriptを使うにはちょっとステップを踏まなければいけなかった。
普通にこんな風に書いてみたところでうんともすんとも言わない。
<script>
app.dialog.alart(“test");
</script>
Router Component | Framework7 Documentation
ドキュメントを見てみると確かにHTMLの中でJavascriptを呼び出しているし、そんな書き方もできるみたい。
呼び出すのに変更した箇所は2つ。
1.HTML側の先頭と最後にtemplateを追加
<template>
<!-- HTML本文 —>
</template>
<script>
return { ... }
</script>loader.html
こんな構成にする。
2.route.jsでjavascriptを呼び出したいページをcomponentUrlに指定
routes = [ { path: '/', url: './index.html', }, { path: '/loader/', componentUrl: './pages/loader.html', }, ・・・ ];
この2つの手順を踏むとHTMLの本文内でjavascriptが呼び出せるようになった。
Router Component | Framework7 Documentation
<script>
return {
// Page Events
on: {
pageAfterIn: function(e, page) {
viewEditMembers();
},
}
}
</script>
あとはこんな書き方をするとonLoadみたいに使うことができる。framework7のアプリ内はシングルページみたいな構成になっていてbodyがindex.htmlにしか出現しないので、これもちょっと困ったところでした。
【framework7】アイコンを使ってみた
最終的にデザインを仕上げる段階になってきて、HTMLのそのままじゃボタンが押しにくいのでデザインを入れるか何かしないとということになってきた。
そこで見つけたのがこのアイコンたち、かわいい。
Framework7 Icons
これなら書式をダウンロードしたりしなくてもそのまま使える。
Icons | Framework7 Documentation
<div class="chip" onClick="addText()">
<div class="chip-media bg-color-green">
<i class="f7-icons">add_round_fill</i>
</div>
<div class="chip-label">参加者追加</div>
</div>
前より押しやすくなった。
【framework7】CSSでデザインを追加
基本的なデザインはCSSファイルをいじらなくてもできるようになっているけど、やっぱり微調整をしたい、テンプレート使うよりはCSSで直した方が早い、ということもある。
framework7でCSSを使うのも簡単で、CSS配下にあるapp.cssに追記していくだけ。
-node_modules
-res
-www
-css
app.css ←これ
icons.css
style.css
テンプレートで使えるGridの記法はこちら。
これもマスターすれば有効に使えそう。
Grid / Layout Grid | Framework7 Documentation
