Cordovaでアイコンを設定する方法

はじめに

Cordovaでプロジェクトを作ると、Cordovaの標準アイコンがインストールされる。でも、アプリをリリースするときは、別なアイコンにしたいよね。そういう時、アイコンを変えるにはどうすればいいのかという話。

まずアイコンを用意

アイコンを透明色付きのpngで用意します。せっかくなので解像度は512px × 512px 。なんでこんなに大きなアイコンを用意するのかというと、Google Playで指定されるアイコンサイズだから。実際には、もっと小さいアイコンを組み込んでもいいんだけど。作るときは大きいほうがいいと思う。

アイコンを設定する方法

アイコンを設定する方法には、主に二通りの方法がある。

  • 各platformのアイコンpngを書き換えてしまう方法
  • config.xmlにiconファイルを定義する方法

ここでは、二つ目のconfig.xmlを書き換える方法を説明する。

一番簡単な方法

config.xmlに次の行を書き加える

そして、icon.pngをres/に入れる。このresディレクトリはwww/の中ではなくて、config.xmlの書いてあるディレクトリにresディレクトリを作るということ。これだけ。 すごく簡単。

もう少し細かい方法

platformごと、また解像度ごとに分けたい場合は、

という感じらしい。とはいえ、一番簡単な方法で動くので、細かいことを設定したいときに使えばいいと思う。

まとめ

  • アイコンのpng(icon.png)を用意してres/に入れる。
  • config.xmlに<icon src="res/icon.png" />を書くだけ

簡単だね。

続きを読む

CordovaでAdmobを使う方法

はじめに

スマホアプリを作って公開した時に、どうやって収入を得るんだろう?有料アプリにする方法、ガチャみたいな課金にする方法、そして広告を入れる方法。だいたいこの三つが考えられると思う。

僕がよく使うのは、広告を使う方法だ。と言っても、僕の収入は微々たるもの(月100円くらい??)なんだけど。

とりあえず、広告を入れるには、広告を選ぶ必要がある。今日はGoogleがやっているAdmobを紹介する。

AdMobプラグインのインストール

AdMobについては、いろんなサイトで紹介されているので、使い方はGoogleで調べてもらったらいいと思う。

それで、僕が今から説明するのは、AdMobのCordovaプラグインのインストールと使い方。

プラグインのインストールは、こんな感じ

うわ!。すごい簡単!。でも、これでAndroidに書き込むと、コンパイルエラーが出る時がある(僕はそれでハマった)ので、念のためにplatformを入れなおす。

あとは、javascriptでコードを書くだけ。

AdMobプラグインの使い方。

プラグインを使うときは、忘れずにcordova.jsを読み込んでおく。そして、devicereadyイベント後に、admobプラグインを表示させる。例えば、こんな感じ。

admob.initAdmobメソッドの引数は、AdMobのページで表示されるアプリ用の識別子を書く。そのあと、admob.showBannerでどこに表示させるのか記述する。この場合は、下に表示される。例えばこんな感じ

AdMobの実際例

この画像は、今作っているサイクルコンピュータアプリ(すごくシンプルだけど)でAdMobを表示させたところ。

まとめ

やったこと

  • CorovaのAdmobプラグインをインストール。
  • Javascriptでadmob.initAdmobとadmob.showBannerメソッドを呼ぶだけ。

Cordovaで広告を表示させるのは簡単でした。

続きを読む

Yeoman+angularjsそしてcorodva

Yeomanで作ったangularjsのひな型をcordovaアプリにしてしまう。

Yeomanでangularjsの導入で、angularjsのひな型は作れるけど、これをcordovaではハイブリッドアプリにしたいとき、最終的な出力先が、distだと困るよね。wwwでないと。そういう時は、gruntfile.jsを変更する。例えば、gruntfile.jsの10行目付近の下記の部分書き換える。

これで、

ばっちりじゃん

実機のデバッグは?

これで、実機で動くのも確認できるし。と思うのもつかの間、chromeでリモートデバッグをしてもminify化されたソースコードなんて正直読めるわけがない・・・。

そういうわけで、デバッグするためのモードを作らなければならない。そういう時は、gruntfileでコピータスクを作ってしまう。コピーは、appディレクトリとbower_componentsディレクトリを全部wwwにコピーしてしまえばいい。

上の記述を足した状態で

で、minifyされていない状態で実機デバッグできる。

そもそもbuildする必要あるの?

さて、コピーすればcordovaで動くんであれば、buildなんてする必要ないんじゃなかろうか?と思うけど、実際buildコマンドでファイルサイズが小さくなる。特にgoogle playにアップするパッケージファイルが変に大きいと、ダウンロードも躊躇されちゃうんじゃないだろうか?じゃあ。実際のところ、単純コピーとgrunt buildした時のパッケージファイルのサイズってどれぐらい違うのか調べてみた。条件は、yeomanでangularjsのひな型を作って、ui-bootstrapを追加しただけの状態のapkファイルのサイズ。

コピーだけの時 grunt build
4.5M byte 2.0M byte

半分近く違うじゃん!。やっぱり、minify化は効果があるみたい。リリースの時だけgrunt buildを使用して、後は、さっき作ったコピーコマンド grunt cordova-debugをするのがよさそうだ。

まとめ

ブラウザ上で確認したいときは、

実機でデバッグしたいときは、

実機でリリース版を動かしたいときは、

番外編で、cordovaプラグインも含めてブラウザでデバッグするときは

こんな感じの開発手順がいいんじゃないだろうか。

続きを読む

Yeomanでangularjsの導入

初めに

新しくプロジェクトを作って、angularjsのひな型を作るのは、面倒だ。もちろん、慣れるまでには、試行錯誤しながらangularjsのWebアプリとかWebページを自力で作っていくのは勉強になるんだけど。でも、だいたい仕組みがわかってきてから、新たにプロジェクトを作って、さてangularjsに必要なものは何だっけ?そもそも、なんのライブラリ使うんだっけ?bootstrapやら、Font Awesomeはどこからダウンロードするんだっけ?。ってやってるとひな型作るだけで、一日終わってしまう。まあ、それはそれで勉強になって楽しいけれど。でもひな型を、ある程度作ってくれるものがあったら便利だよね。それがYeomanだったりする。

下準備

最初にnode jsは入っているよね。もし入っていなかったら

https://nodejs.org/en

からダウンロードして、インストールする。

次に、YeomanとYeomanで使うツールgruntとbowerのインストール。gruntは、プロジェクトのmin化してくれたり、coffee scriptやlessのコンパイルしてくれたりする。bowerはライブラリ関連のインストールや管理をしてくれる。最後に、ひな型を作ってくれるgenerator-angularをインストール

ここまでの作業は、環境づくりなので、一度やればOK。

プロジェクトの生成

いよいよプロジェクト作るよ。

これだけ。

もちろん、プロジェクト名を聞かれたり、angularのモジュールのどれを入れるのか?bootstrapを入れるか?は聞かれるけど、これだけでbootstrapとangularとangular-routeとangular-animateが入ったひな型ができてしまう。便利すぎる。

とりあえず動かしてみる。

これで、ひな型だけでWebページが見れる。gruntがWebserverの役割を果たしてくれる。実際のプロジェクトはapp/の中にある。試しに、この状態で、app/views/main.htmlの中を書き換えてみると、即座にブラウザでもリロードしてくれる。デバッグが凄くしやすくて便利♪

ほかのライブラリを入れる

たとえば、ほかにui bootstrapとかmoment.jsとか入れたくなったらbowerコマンドを使う。

もし、ライブラリがいなくなったら

サーバーにアップするのはどうすれば??

ここまででブラウザでのチェックとか、ライブラリのインストールとかはわかったけれど、そもそもどれをサーバーにアップすればいいのだろう??ディレクトリを見た人はわかると思うけど、あまりにも複雑で何をアップしていいのやら・・・

でも、ここからがyeomanの本領発揮(いやgruntか)!。

これで、なにやら作業をはじめて、distディレクトリができます。grunt buildコマンドで、coffee scriptのコンパイルとかlessのコンパイルとかminify作業とか全部やって、結果だけdistに放り込んでくれます。僕らは、出来上がったdistディレクトリの中身だけをサーバーにアップすれば、もうやることはない。しかも、サーバに上げるものは、minify化されていて小さくなっているし。すごいねyaoman!

続きを読む

sqlite3のテーブルとカラムの存在確認

テーブルの存在確認

これで、存在すれば1が帰ってくる

カラムの存在

カラムも同様に、以下のSQLで存在を確認できる。

続きを読む

sqlite3のテーブルにcsvの取り込み

前提

sqlite3.exeがコマンドラインから使えること。

もし持ってない場合は、http://www.sqlite.org/ からダウンロード

あとはパスを通す

csvのインポート

csvファイル

csvファイルはUTF-8のエンコードにしておく

import

コマンドラインからデータベースを開く

それから、区切り文字を指定する。自分の場合は、「 ; 」にしてしている。「 , 」だと、中で使っている可能性があるため、セミコロンで区切ったcsvにしてある。

これで、csvファイルをテーブルへインポートできる。

続きを読む

PELを使ってリサイズしてもExif情報を残す

リサイズしてExifを残す

PHPで画像のリサイズをするときは、新しい画像を作って、リサイズしながらコピーして保存する方法が一般的だと思う。でもそれだとExifデータはなくなってしまう。

PELライブラリに入っているexamples/resize.phpを参考にExifを残すリサイズプログラムを作った。

ソース

続きを読む

CordovaでQRリーダを作る。

BarcodeScannerプラグインのインストール

BarcodeScannerプラグインをインストールする。

プラグインの使い方

index.htmlでcordova.jsを読み込む。これでプラグインが使用できるようになる。

javascriptで、

という感じで、プラグインを使用する。読み込めれば、第一引数のコールバック関数が呼ばれる。内容は、result.textに入っている。

テストの仕方

http://ja.qr-code-generator.com/ とかで、適当にQRコードを生成してみて、アプリでスキャンすると入っていることがわかる。

フロントカメラを使う方法

と、ここまではBarcodeScannerのgithubに書いてある内容と一緒。僕がほしい機能は、フロントカメラを使用する方法。フロントカメラを使用すれば、操作しながらQRコードをかざして認証みたいな処理が可能になる。でも、BarcodeScannerは、デフォルトでバックカメラを使用している。それで、フロントカメラを使用する場合は、プラグインを変更する。

ググってみたら、ありました。さすがはstackoverflow!! http://stackoverflow.com/questions/25488284/cordova-barcodescanner-use-front-facing-camera

でも、英語だったので、自分がやってみたことを書いておきます。

Antのインストール

プラグインをコンパイルするのに、Antが必要なので、Antを用意する。ない場合は、 Apache Ant から、ダウンロードして、環境変数のpathにantのパスを通す。

プラグインの変更

Antの設定ファイルの変更

プロジェクト\plugins\phonegap-plugin-barcodescanner\src\android\LibraryProjectlocal.propertiesファイルを新しく作成する。 local.propertiesファイルの中は、

とする。例えば、

みたいな感じ。

次に、project.propertiesファイルを変更する。

の部分を、使用したいSDKのバージョンに変更する。もしくは、android-SDKのAPI17をインストールする。

GingerbreadOpenCameraInterface.javaの変更

プロジェクト\plugins\phonegap-plugin-barcodescanner\src\android\LibraryProject\src\com\google\zxing\client\android\camera\open\GingerbreadOpenCameraInterface.javaを変更する。大体48行目あたりを下記のように変更する。

コンパイル

コマンドプロンプトで、

プラグインのコピー

binのなかにclasses.jarができるので、com.google.zxing.client.android.captureactivity.jarという名前に変更してプロジェクト\platforms\android\libsにコピーする。

build

いつものように

で、BarcodeScannerプラグインのカメラがフロントに変更されている。

続きを読む

CordovaでAndroidアプリを作る環境を作る方法

nodeのインストール

下記ページからnode.jsを node.js

cordovaのインストール

Android SDKのインストール

下記からAndroid SDKをダウンロード Android SDK

SDK Manegerを立ち上げて、下記の項目をインストール * build tools * API 15 * API 21 * extras

環境変数の設定

下記のパスを環境変数pathに追加する。 * android sdk * build-tools\22.0.1 * tools * platform-tools * java sdk のbin

cordovaのプロジェクト作成

を実行する。例えば

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

android を追加する場合は、

cordovaの実行

アンドロイドの実機で動作を確認する場合は、

ブラウザ上で動作確認する場合は、

そのあと、localhost:8000にアクセスする。chromeのrippleを使用して確認すると、描画のイメージとかもしっかりわかる。

続きを読む

最近気になるMonaca

Monacaとは

HTML5を使ったクロスプラットフォームの開発ツール。昔、AndroidとiOS用のクロスプラットフォームのTitaniumという開発ツールを使ったことがあったけど、コンパイルに時間はかかるし、Androidでは使えない部品があって、痛い目にあったことがあった。しかも実機にプログラムを転送するのに一分以上待ったうえに、JavaScriptの構文エラーだったり、変数の名前を間違えたという感じで、いちいち細かい修正に時間がかかった苦い思い出がある。そんなわけで、僕はクロスプラットフォームをあんまり信用していない。

Monacaはその点、基本的にWebアプリケーションみたいな動作をするみたい。ブラウザ上で動作するのをアプリのように見せかけて動かす感じ。でも、ただのブラウザアプリでは、ファイル操作とかセンサ情報の取得ができない。Monacaは、その辺をフレームワークで処理して、ブラウザアプリから操作できるようにしてあるみたい。

今まで、Webアプリを作成してきた人たちには、Object CとかJavaとかを覚える必要もなく、HTMLとCSSとJavaScriptだけでモバイルアプリを手軽に作成できる。TitaniumもJavaScriptだったんだけど重かったなぁ。Monacaはどうなんだろう?

Monacaを試してみる

https://ja.monaca.io/cloud.html

から、[今すぐ試す(無料)]でアカウントを作成して、すぐにアプリ開発に移れるみたい。

そして、やってみるとWebブラウザ上からプロジェクトを作成してコーディングし、実機への転送までできる!!
いったいどうなってるんだ??。そんな感じの第一印象。時代は変わったなぁ。

http://yoshi.esy.es/wp-content/uploads/2015/06/monaca2.png

今度、Monacaのさわりの部分を記事にしてみたい。

実際使った感じとか、ライセンスの関係とか、今後開発に使えるかどうかはもう少し検討してみる価値があると思う。

続きを読む