2015年12月17日木曜日

プラグイン作成

呼び出し方

plugin.xml

<js-module src="www/google_sign_in.js" name="GoogleSignIn">

</js-module>

呼び出し方1. プラグイン名+js-moduleのname

var plugin = cordova.require('google-sign-in.GoogleSignIn');

plugin.signin();

呼び出し方2. clobbersのtargetで指定した

window.googleSignIn.signIn

参考サイト

Cordovaの起動時にプラグインで何か処理をするには[つれずれなるまま開発日記]
cordova:Cordova Pluginからconfig.xmlの設定(Preference)の値を取得する[つれずれなるまま開発日記]
Use Cordova Config Values -> 今は記載のやり方では駄目のようです

2015年12月11日金曜日

ブラウザ向けにビルドする

あまり知られていませんがcordovaには出力対象のプラットフォームにbrowserというものがあります。用途は開発用ということですが、buildコマンドでパッケージ(zipにしただけですが)にすることもできます。
プラグインについてもFileプラグインなど一部はbrowserに対応しています。

セットアップ

cordova platform add browser --save

動作確認

cordova run browser

8000ポートでWebサーバーが起動します

ビルド

cordova build browser --release

platform/browser/build/package.zip が作成されます

(なぜか現在package.zipが壊れて作成されて開くことができません。ただwwwフォルダをzipしているだけ？のようなので自分でzipにすれば良いのかもしれません。)

2015年12月3日木曜日

Cordova Android5でSqliteプラグインを使うとデータが消失

アプリをアップデート時(apkを切り替え)にsqliteデータファイルが上書きされてしまいました。

Cordova CLI 5.3
Cordova Android 5.0.0
SQLite plugin 0.7.4

必ずテストしてからあげないと大変なことになります。
Cordova Android 4.1.1では問題なしです。

2015年12月1日火曜日

Failed to load resource: A .. server with the specified hostname could not be found.　

iOSエミュレータで以下のエラーが出て開発中のアプリからアクセスできませんでした。

Failed to load resource: A .. server with the specified hostname could not be found.　

2015年11月30日月曜日

アプリのレジューム検知

レジュームとは別のアプリなどを開いて一度バックに入ったアプリを再度開くことです。

ブラウザでは $window.addEventListener("focus",) のようにwindowを再フォーカスした場合にレジュームを検知できますが、cordovaではこのイベントは発行されないので以下のイベントで検知できます。

document.addEventListener("resume",function(){},false);

2015年11月26日木曜日

プッシュ通知(記載中)

プッシュ通知用のプラグイン

phonegap-plugin-push

Android, iOS, Windows
利用者が多そうです
phonegapと書かれているがcordova単体でも利用可
インストール手続きなし

cordova-plugin-push-notification

Android, iOS, Windows, Fire OS, Windows Phone
インストール手続き有り

GCMPushPlugin

Android, iOS
GCMを使ってAndroid,iOSへ送信できます
GCMを使わずにネイティブのiOSへの送信も可能
インストール手続き有り

参考

Sencha Tips #1: プッシュ通知機能の実装 (iOS)

2015年11月19日木曜日

socketfilterfw 187.7%

xcode7.1.1を起動すると同時にsocketfilterfwのプロセスも燃え上がります。
現在のところ187.7%が最高記録です。

Webのいろいろなやり方を試しましたがいまいち有効な対応方法がわかりません。
アップル社の社員の方はどうしているのでしょうか。

187.7%を超えた方はコメントください

2015年11月16日月曜日

ios9 transport security cordovaの取り扱い

ios9からhttpsアクセスを防ぐというApp Transport Securityですが、cordovaが標準でどのように扱っているのかよくわかりませんでした。

config.xml
<access origin="http://hogehoge.com" />
<access origin="http://fugafuga.com" />

と記載していると {アプリ名}-info.plistには以下のように自動的に追加されています。

platform/ios/{アプリ名}/{アプリ名}-info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>hogehoge.com</key>
<dict/>
<key>fugafuga.com</key>
<dict/>
</dict>
</dict>

やろうとしていることは<accsss>に記載されたURLへは例外として通してくれようとしてくれているとは思いますが、理解が全く足りていませんが、まずは
NSAllowsArbitraryLoads　を falseにして、NSExceptionAllowsInsecureHTTPLoadsをそれぞれのurlのdictに加えることが必要ではないでしょうか。

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<false/>
<key>NSExceptionDomains</key>
<dict>
<key>hogehoge.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
<key>fugafuga.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

これでhttp://hogehoge.comにアクセスできるようになりました。
しかし、ビルドの度にplistは書き換えられるので、フックして書き換える処理をいれるか、cordovaのビルド後に最後に修正というのがよいのでしょうか。

GoogleMobileAds does not contain bitcode

アーカイブ時にbitcodeのリンクエラーがAdmobに出る場合は、Admobがbitcodeに対応していない(?未確認)かもしれないので Bitcodeをoffにしてアーカイブすると通ります。

2015年11月5日木曜日

Plugin doesn't support this project's cordova-ios version. cordova-ios: 3.9.2, failed version requirement: >=4.0.0-dev

エラー内容
Plugin doesn't support this project's cordova-ios version. cordova-ios: 3.9.2, failed version requirement: >=4.0.0-dev
Skipping 'cordova-plugin-whitelist' for ios

エラーの内容通りで cordova-whitelist 1.1.0 はまだ正式リリースされていない cordova ios 4.0.0以上に対応らしいです。
whitelistのバージョンを1.0.0に落とせばいいらしいのですが・・・

2015年10月23日金曜日

CrosswalkでARMのAPKをアップロードしたのにx86が含まれる

apkをzipに拡張子を変更して開いてみるとlibの中にx86のライブラリが入っています。sqliteプラグインを外して再度インストールを行うとなくなりました。

2015年10月2日金曜日

ファイルを扱う

Fileプラグイン自体の使い方は簡単なので割愛します。
FileプラグインはHTML5のFile APIに準拠しているそうなのでFile APIの使い方をメモ。
コールバック地獄へ入るのでAngularを使っている場合はng-cordova, そうでない場合は何らかの手段でpromiseを使用するのが必須だと思います。(FileAPIを簡易に扱うためのライブラリをいくつか試しましたがこれというものがありませんでした)

FileEntryオブジェクト

filesystem: FileSystem

fullPath: "/hoge.txt"

isDirectory: false

isFile: true

name: "hoge.txt"

nativeURL: "file:///storage/sdcard0/hoge.txt"

ファイルかディレクトリかの判断はisDirectory,isFileで可能

資料

html5rock FileSystem API について知る - 重要ページ！

2015年10月1日木曜日

com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompatIcs;

UNEXPECTED TOP-LEVEL EXCEPTION:
com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompatIcs;
at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:454)
at com.android.dx.command.dexer.Main.runMonoDex(Main.java:303)
at com.android.dx.command.dexer.Main.run(Main.java:246)
at com.android.dx.command.dexer.Main.main(Main.java:215)
at com.android.dx.command.Main.main(Main.java:106)

MFileChooserを使おうとして上記のエラーが出ました。
エラー原因は読んでそのままですが、修正がとても難しいです。
絶対に間違っている方法だと思いますが重複している片方のプラグインのconfig.xmlで依存をコメントアウトしました。。。。。。。

zip圧縮・解凍を行う

ng-cordovaで使われているのはcordova-plugin-zipですが、こちらのプラグインは解凍のみです。Androidのみとなりますが圧縮・解凍を行うプラグインがありました。(未検証)

jjdltc-cordova-plugin-zip

2015年9月27日日曜日

アプリデータバックアップ・リストア[Android](調査中)

Android backup service を簡単に扱えるようなプラグインがあるかと思いましたが見当たらないようです。

SQLite pluginのデータのある場所

databasesにopenDatabaseで指定したデータファイル(例: data.db)が入っているのでこれをバックアップすれば良い。

参考

パズラドラでのデータ以降

2015年9月21日月曜日

OnsenUIでIE11に対応する

「他のブラウザはOKだけどIEは動かない」、というのはもちろんOnsenUIにも当てはまりました。ですが、デザインはボロボロに崩れて、動作はガクガクというような状況ではなく、少し習性を覚えて置いて修正が必要という程度でした。

Angularjs関連

バインドが反映されない

タグのstyleなどに直接 {{}} を記載しても反映されない。
ng-styleなどを使う必要がある。

細々したアラート・エラーが出る

タイミング依存の再現性のないアラート・エラーなどが出ます。なぜかアプリがクラッシュ・フリーズするようなものは出ません。

2015年9月20日日曜日

ダウンロードバッジの入手方法

ダウンロードバッジとは下記のようなものです。
公式サイトなどで作る事ができます。

OnsenUI 小ネタ集

自分で使う小ネタ集
Ver 1.3.10 対象

一覧から詳細ページへIDを渡す

一覧ページ

<ons-list-item ng-repeat="book in books"

ng-click="hogeNavigator.pushPage('/show.html', {id:book.id } );">

詳細ページのコントローラ

var page = $window.hogeNavigator.getCurrentPage();

var id = page.options.id;

サポート対象以外で実用に耐えるブラウザ

OnsenUIが実用に耐えるWebブラウザを調べました。(あくまで自分用途での場合)
Githubによる記述ではFirefox,IE,Edgeは公式のサポートに入っていません。

◯ Chrome(PC, Android[アプリ+4.4以上の標準])
◯ Safari(Mac, iOS)
△ Firefox(PC) 限りなく◯
× Firefox(Android) -> 動作はするがとても遅い,コンポーネントが壊れる
△ Android4.4未満の標準ブラウザ(Chromeベースも含む)
△ IE11 -> Angular関係で修正が必要(別記事に記載)
- Edge 未検証

ons-listの代わりにCSSをあてる

代わりにCSSであてる。

<ul class="list"> 幅いっぱいのリスト

<li class="list__item"> 幅いっぱいのリストのアイテム
<li class="list__header">幅いっぱいのリストのヘッダーアイテム

<ul class="list list--inset"> insetリスト

<li class="list__item list__item--inset"> insetの中のアイテム

<li class="list__header ons-list-header-inner">insetのヘッ

<li class="list__item list__item--tappable"> タップアクション

<li class="list__item list__item--chevron">　タップアクション + 右端に>をつける

ons-row ons-colの代わりにCSSをあてる

ons-listと違い単純な分割の場合のみCSSを代わりにあてる

<ons-row>

<ons-col>

align="center"をつけた場合は　col-center　をつける

Androidでキーボード表示時にTabbarを隠す

Androidでキーボードが表示されると下に固定してあったタブバーがキーボードの上に張り付いて見辛くなります。

ionic keyboard pluginを使ってソフトウェアキーボードの表示、非表示のイベントをとることでタブの表示・非表示を行う事ができます。

iOSではキーボードはページの上に覆うような形なので問題はありませんでした。

popover内でスクロールする

ipadでドロップダウンを開くと(ネイティブの)popoverが開きその中でスクロールをして項目を選択する事ができます。

popoverの中全体をスクロールさせる

.hoge_popover .popover__content {
max-height: 256px;
overflow-y: auto;
display: block;
-webkit-overflow-scrolling: touch;
}

popoverの中の一部をスクロールさせる(最上部に検索テキストボックスを置く場合など)
.my_scroll_div{
height: 350px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

遷移アニメーションをスムーズにする

Controllerの初期処理が重たいとアニメーションがガタガタするので、遷移アニメーション終了後に処理を行うようにする。

//ページ読み込みの場合
navigator.once("postpush", function () {
initPage();
});

//重ねたページをポップしたときに処理を入れる場合
navigator.once("postpop", function () {
doAction();
});

2015年9月17日木曜日

org.xwalk.core.ReflectionHelper.handleException

Cordova5.3.1
Crosswalk 13(Not shared mode)
Android4.4

エラー

java.lang.RuntimeException: Unable to start activity ComponentInfo{hoge.MainActivity}: java.lang.RuntimeException: Failed to create webview.
..
Caused by: java.lang.RuntimeException: Failed to create webview.
...
Caused by: java.lang.reflect.InvocationTargetException
...
Caused by: java.lang.RuntimeException: java.lang.RuntimeException: Use SharedXWalkView if you want to support shared mode
...
Caused by: java.lang.RuntimeException: Use SharedXWalkView if you want to support shared mode

結果

アプリが立ち上がらない。

参考

App crashed which was built by Cordova 4.0 since crosswalk 15.44.361.0.

2015年9月15日火曜日

Missing one of the key attributes 'action#name,category#name' on element intent-filter at AndroidManifest.xml:16:13

私の場合はimagepickerプラグインが原因でした。
確かに AndroidManifest.xmlで intent-filterが空になっています。

<activity android:label="@string/multi_app_name" android:name="com.synconset.MultiImageChooserActivity" android:theme="@android:style/Theme.Holo.Light">
<intent-filter />
</activity>

Githubのイシューでも上がっています。

この問題はImagePickerを使った場合に必ず起こる訳ではありませんでした。(条件不明？)
AndroidManifest.xmlの問題の箇所はplugins/android.jsonから転記されているのでそちらを修正します。

暫定修正方法

メンテナンスに難が出るのであまり取りたくはない方法ですが暫定対応方法を記載いたします。

plugins/android.json

"xml": "<activity android:label=\"@string/multi_app_name\" android:name=\"com.synconset.MultiImageChooserActivity\" android:theme=\"@android:style/Theme.Holo.Light\"><intent-filter /></activity>",

の行を探して<intent-filter />を削除します。

すでにAndroidManifest.xmlがある場合はきれいにしてからビルドします。

2015年9月14日月曜日

プラグインをまとめてアップデート

Cordovaのコマンドラインツールにはプラグインをまとめてアップデートするオプションがないので一つづつアップデートをする必要があります。
これまで list で一覧を取得してループで全部アップデートするスクリプトを書いて使っていたのですがもっと高性能なツールを作っている方がいらっしゃいました。

cordova-plugin-update を使うと一度にアップデートかつバージョンを選んだりできます。(ただしnpm管理のもののみ)

(1)インストール

npm install -g cordova-plugin-update

(2)config.xmlでプラグインを管理

cordova plugin add hoge --save
でconfig.xmlにプラグインの情報を書き込んでいない場合は
cordova plugin save
で一度書き込む必要があります。

(3)対話式にアップデート

以下のコマンドを実行
cordova-plugin-update

対話式に表示されます
A newer versions of `cordova-plugin-whitelist` is available (currently 1.0.0)

1) 1.1.0
2) Don't update

Install (1/2)? 1

(4)まとめてアップデート

以下のコマンドを実行
cordova-plugin-update --all

スプラッシュスクリーン表示

1. splashscreenプラグイン追加

cordova plugin add cordova-plugin-splashscreen

2. config.xmlにファイルパス追加

</platform>

</platform>

3. 画像ファイル設置

１つ１つの画像を作るのは面倒なのでプログラムを使って 2208pixelx2208pixel以上の１つの画像から全部の画像を作ります。

これでスプラッシュスクリーンが表示されるようになります。アプリが起動すると自動的に非表示になります。

(Option)ページの初期化が終るまで表示する

シングルページアプリの場合は初期処理に時間がかかるので、初期処理が終るまでスプラッシュスクリーンを表示し続けたい事があります。

(1)自動的に非表示にならないようにする

config.xml

(2)マニュアルで閉じる

hoge.js(初期化が終ったら)

navigator.splashscreen.hide();

SplashScreenDelayは十分に長い時間にする必要がありますが、hide()メソッドが過去動作しない不具合があったことがあり、SplashScreenDelayの時間分表示されてしまったので、初期化が終わるぐらいの適度な長さにしておくのが万が一にもいいと思います。

(Option)任意のタイミングで表示

(未検証) データを全て消すのに時間がかかる場合などにスプラッシュスクリーンを表示して、処理が終ったら最初の画面に戻る場合に使えるかもしれません。

navigator.splashscreen.show();//表示

navigator.splashscreen.hide();//非表j

注意？

アプリを起動 -> スプラッシュスクリーン表示される
戻るボタンでアプリ停止
アプリを起動 -> スプラッシュスクリーン表示されない

戻るボタンの場合はアプリはおちておらずブラウザは死んでいる(?)

2015年9月12日土曜日

menubuttonが動作しない

document.addEventListener("menubutton",menuBtnClicked, false);
が動作しません。

JIRA menubutton event not firing で議論されている通りの状況のようです。

deviceready has not fired after 5 seconds

cordovaアプリの起動に１０秒近く時間がかかるようになった場合はログを見ると下記のようなワーニングが出ているかもしれません。
調査した結論としては原因不明でした。

deviceready has not fired after 5 seconds. cordova.js:1183
Channel not fired: onPluginsReady cordova.js:1176
Channel not fired: onCordovaReady cordova.js:1176

一応10秒待つとdevicereadyが無理にでも発火されるのかアプリ自体は起動します。
たくさんの人が困っているようですが原因や答えが分かる人はいないようでした。

Beware when import cordova.js

私の場合はこの問題が起こる前にCrosswalkのアップデート(plugin1.3.1,Crosswalk14)を行っていたので、Crosswalkを一度rmし、addしたところ直りました。

2015年9月11日金曜日

Angularjs1.x逆引き

オブジェクトのプロパティ全体を監視

$scope.$watch("targetObj",function(){

},true)

最後のtrueが無い場合はオブジェクトの参照を監視している。これでプロパティに変更があった場合もOK

モジュールを後からロード

ocLazyLoadを使用する。

2015年9月4日金曜日

ビルド中に処理を挟みたい(hookフォルダの使用方法)

ビルド時などに圧縮処理を挟んだりしたい場合はhookフォルダを使うとよさそうです。
/hooks/README.mdに説明が書かれていますがとりあえず実行する所までメモ。

簡単なサンプル

処理をフックするタイミングはたくさんありますがここではafter_prepareを選びました。before_buildもよく使われるタイミングのようです。

/hooks/にafter_prepareフォルダを作成
after_prepareフォルダの中にsample.jsを作成
sample.jsに以下を記入

#!/usr/bin/env node

console.log("Hello Hook");

コマンドなどでsample.jsに実行権限を付与します
cordova build　を実行するとHello Hookと出力されます

環境変数

hook内のjsでは以下のような環境変数(一部)が使えます。

// cordovaプロジェクトフォルダへの絶対パス

var rootdir = process.argv[2];

// android

var platform = process.env.CORDOVA_PLATFORMS;

//node /usr/local/bin/cordova build android

var command = process.env.CORDOVA_CMDLINE;

Tips

after_prepareに２つファイルをいれると２つ実行されますが、順番は名前順(?)のような気がします。

2015年8月30日日曜日

グラフライブラリ一覧

Cordovaとは直接関係ありませんが、MIT,Apache2ライセンス(もしくはこれらと同等の使用許可)のJSのグラフライブラリをまとめておきます。

個人的な選ぶポイント

SVG(Canvasは解像度が高い端末できついので)

Chartjs

圧縮11k
Canvas
ライン、バー、円、ドーナツ、レーダー、ポーラー
依存無し

C3

圧縮142k
SVG
ライン、エリア、バー、円、ドーナツ、ゲージ
D3依存

Chartist.js

圧縮10k
SVG
ライン、バー、円、ドーナツ
依存無し

n3-charts

サイズ?
SVG
ライン、バー
Angularjs,D3依存

ECharts

baiduがメンテナンス
グラフの種類も機能も有料グラフに匹敵(それ以上?)
ライセンスは少し厳しい(要チェック)

2015年8月29日土曜日

端末がgpu blacklistに入っているか調べる

gpu blacklistについての説明は省きます。
Stackoverflow Supporting WebGL on Android 5's WebView
で端末がblacklistに入っているか調べる方法が記載してありましたのでメモしておきます。(やり方の真偽はわかりません)

chrome://gpu を開く
"reset notification strategy field"を探します(一部文字がきれていると思います)
値が 0x8252 だとブラックリストに入っていない 0x0000だと入っているのだそうです

2015年8月15日土曜日

ビルドで作成されたファイルの削除

Crosswalkを使うとAndroidのbuildフォルダが150Mbyteを超えてしまっていましたが、Cordova CLI 5.2.0 から加わったcleanコマンドを使うとそれらのファイルを削除してくれるようです。(直接削除するのと何が違うのかはよくわかりませんでした)

全buildファイルっ削除

cordova clean

特定のプラットフォームのファイル削除

cordova clean android

Cordova コマンドラインツールのアップグレード

アップグレード
(sudo) npm install -g cordova

バージョン確認
cordova -v
> 5.2.0

2015年8月6日木曜日

端末のファイル(画像,動画)を選択する

端末に保存してある写真や動画を選択する事はアプリとしてもよくあることだと思いますが、やり方が色々ありましたので簡単にメモしておきます。

どのやり方もファイルへのパスが取得できることに変わりはありません。

Cameraプラグイン

画像を１つ選択できる
動画を１つ選択できる

ImagePickerプラグイン

複数の画像を選択できる

Input type="file"タグ

なんでも(画像,動画,サウンド)選択できる
Android4.4.2ではバグのため使用できない(ただしCrosswalkを使えば関係ない)

補足

画像,動画,サウンドまでは以上のやり方で選択できますが、SDカードに保存されたtxtファイルの選択の方法がわかりませんでした。MFileChooserというプラグインで昔はできたようなのですが、今はプラグインが動きませんでした。

2015年7月31日金曜日

アプリ表示名の多言語化(Android)

標準の機能としてはできないようです。Cordova5で以下の方法でできることを確認しています。
英語(ディフォルト)と日本語の表示を切り替える場合を記載しています。

/platforms/android/res/ に values-ja というフォルダを作ります。
同じ階層にあるvaluesの中にあるstrings.xmlをコピーしてきます
app_nameを変更します

launcher_name 表示名(app_nameと同じになっているので個別に変更する場合のみ変更)

ビルドではファイルがなくならないので一度設定すれば良い作業ですが、platform rm android のようにandroidフォルダ毎消すと当然ながらなくなります。

2015年7月30日木曜日

UIフレームワークを選ぶ

Cordovaで使用する際に検討しましたUIフレームワークを記載します。ライセンスはMITかApache2となっています。
選ぶポイントになりそうな箇所を黄色マーカーで注意する箇所をオレンジマーカーで書いています。

Cordovaアプリにした際の動きを確認してみたかったので、色々なUIフレームワークアプリを試すことができるアプリ「UI Framework Catalog」を作成いたしました。

Framwrok7

Android(Material Design), iOS
x AngularJS (Template7という独自のフレームワーク)

コンポーネントの数がとても多く、UIの再現度もかなり高いです。

1点個人的に残念なことにAngularJSではなく独自のフレームワーク(Template7)を使用しているという点です。Angularを使用に慣れてる方には機能が足りないかなと思います。
iOS UIデモ Material UIデモ

ionic2(preview版)

UIはOS別にネイティブルック

ver1と違い一気にネイティブの見た目に近づきました。Android,iOS,Windowsの３つの見た目を備えています。Angularjs2の使用が前提となっています。

ionic1

UIはOS別ではなく独自
AnguarJS使用前提
Githubのスターが２万近く

最もポピュラーなフレームワークではないでしょうか。使う人も多い分フォーラムやサンプルも充実しています。UIはiOSともAndroidともいえない独自の見た目です。

Quasar

調査中。ionicのように専用のコマンドツールを持つ大きめのフレームワーク。コンポーネントの数も豊富です。パンくずリスト、ツリー表示、ページネーションなど他のフレームワークにはないものも含まれています。

OnsenUI

OS別(iOS,Android)別に若干デザインが変わる
AngularJS前提(一応知識がなくても使用可能)
コンポーネント数はionicとほぼ同じ

日本のアシアル社がメンテナンスしているため、日本語のドキュメントがあります。ネイティブライクなUIですが見た目もコンポーネントの数もFramework7の方が上です。
次のバージョンOnsenUI2ではMaterialDesignに対応になり、Angularjsが必須でなくなるようです。[公式ブログ]

Phonon

軽量が売り。AngularJS,Reactなど組み合わせは自由
デザインはマテリアルデザインに若干似ているフラットデザイン
コンポーネントはAndroid系が一通り揃っている

2016年8月現在開発が活発なフレームワークです。軽量かつ、AngularJSやReactなどに縛られないため、自由に選択ができます。タブレット様にスプリットビュー風にも対応しているなど、ニーズに合わせてよく考えられていると思いました。ただ、Form周りのコポーネントは１行テキスト入力、シンプルなラジオ・チェックボックスと、入力がメインのアプリには物足りないと思いました。

Material Design Lite

名前の通りMaterial Design
x AngularJS

スマホでもさくさく動きますがコンポーネントは少ないです。あくまでUIのみなので画面遷移時のアニメーションなどは別途ライブラリが必要になります。
CSS Classで定義していくので別途テンプレートライブラリがないと記述量が多くなる印象です。

jQuery Mobile

UIは独自
x AngularJS(組み合わせて使用するプロジェクトは既に開発終了)

古いIEなども含めて幅広いブラウザに対応しているためか動作は遅め。幅広いブラウザに対応する必要のあるWebアプリも作成する場合に検討するとよいかもしれません。バージョンアップの頻度も落ちているので将来性は(?)
デモ

OpenUI5

UIは独自

ERPパッケージ世界最大のソフトウェア企業SAPの作ったものだけに業務アプリ向けのコンポーネントが揃っている。動作速度は遅めで個人が使用することは難しそうです。

Angular Material

マテリアルデザイン
Angularjs

コンポーネントは豊富ですが、若干重いです(1.2Ghz x 4core)。また、モバイルで使用するとアプリとしては動作が不自然な箇所があるので、スマホアプリとしては使用は難しそうです。

ChocolateChip-UI

iOS,Android,WindowsPhone

現在は開発は特に積極的に行われていないようです。

App.js

iOS,Andorid別のネイティブルックですがタイトルバー,ダイアログぐらいの違いです
コンポーネントの数はかなり少ないですが軽いです

スマホ向けのちょっとした画面を作る際などには軽いので個人的には重宝しています。学習コストも非常に低く、すぐに使い始めることができます。

iOS UIデモ Android UIデモ

Mobile Angular UI

Bootstrap3を使用したiOSライクなUI
名前のとおりAngularjsが使用の前提

どちらかというとWebアプリ向きのフレームワークだと思います。

その他

2015年7月29日水曜日

デバイスを指定してiOSシュミレータを起動する

--target　オプションに起動したいデバイスを指定すると指定したiOSシュミレータが起動します。

cordova emulate ios --target="iPhone-6-Plus"

デバイスのリストは ios-sim showdevicetypes で表示できました。

デバイス名サンプル
iPhone-4s
iPhone-5s
iPhone-6
iPhone-6-Plus
iPad-2
iPad-Retina
iPad-Air
iPad-Air-2
iPad-Pro 　

2015年7月28日火曜日

アイコン・スプラッシュスクリーン作成サイト

iOS,Androidでアプリをリリースするためにはアイコンやスプラッシュスクリーンが必要ですがこれらを生成できるサイトをリストしていきます。
基本的にどのサイトも大きな画像をアップロードして、縮小するものがほとんどです。

Icon Generator for Corona SDK

iOS, Android向けのアイコン生成
最低1024x1024の画像使用を推奨
装飾の選択は不可

Launcher Icon Generator

Android向けのアイコンを作成
ShapeはBevelの方がSquareより大きさがちょうど良くなる

Android Feature Graphic Generator

Androidの紹介画像(1024x500)を作成できます

外部サイトをブラウザ(safari)で開く(iOS)

Cordova5 Cordova iOS 3.8　についての情報です。(バージョンによってやり方が違うため他のバージョンでは別のやり方があるようです)

自サイトのお問い合わせなどアプリからSafariを起動してWebページを開きたい場合がありました。一見簡単にできそうですが、Cordovaのバージョンによってやり方が頻繁にかわっているようで、Web上でも情報が錯綜して多くの方が困っていました。

inAppBrowserプラグインを使用する方法

こんなことにプラグインを追加したくはないことは全ての人に共通する思いだと思いますが、inAppBrowserを使用するとあっさり解決できました。

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

cordova plugin add cordova-plugin-inappbrowser

WebページをSafariで開く

cordova.InAppBrowser.open(url, "_system");

Cordova5では既に駄目だった方法

Cordova iOS Safari Pluginを使用する
window.open(url,'_system')
window.open(url,'_blank','location=no')

iOS9 App Transport Security 対応

inAppBrowserを使って上記のようにsafariを別途立ち上げて開くのは何も設定が必要ありませんでした。

しかし、せっかくinAppBrowserをいれたのだからと内部にinAppBrowserを立ち上げて開こうとするとHttpの場合Transport Securityに引っかかります。

2015年7月27日月曜日

cordova iosアプリ作成時の注意事項

たくさんあるかと思いましたがほとんどありませんでした。

画面全体がスクロール時にバウンドするのを防ぐ

アプリとしてあり得ない動きとなるので防がなければなりません。

config.xml
<preference name="DisallowOverscroll" value="true" />

CSP調整

frame-src gap:;

を追加

2015年7月26日日曜日

iosで"violates the following Content Security "が出る場合

下記のようなエラーが出てCordovaアプリが起動しない場合

Refused to frame 'gap://ready' because it violates the following Content Security Policy directive: "frame-src 'self'".

CSPタグのframe-srcにgap:を追加する。(Whitelistプラグインの公式ドキュメントにも書いてありました)

<meta http-equiv="Content-Security-Policy" content="frame-src gap:;">

frame-src以外も適宜追加する必要があります。

2015年7月5日日曜日

ChromeのSame Origin Policy を無効化する

開発中にローカルのAPIサーバへ接続したい場合などに同じオリジンを作るのが面倒な場合があります。その際にはChrome起動時に無効化オプションを設定することでアクセスできるようになります。

Macの場合

~~open -a Google\ Chrome --args --disable-web-security -–allow-file-access-from-files~~

open -a Google\ Chrome --args --disable-web-security --user-data-dir

Chromeのプロセスがしっかり無くなっているのを確認してから起動します。起動後にWebサイトを開くと警告が表示されるのでオプションが効いている事を確認できます。

開発中の自分のサイト以外を開かないように注意が必要です。

Mac Safari9 ではメニューとして「クロスオリジンの制限を無効にする」があります。使ったことはありませんがiOS向けのテストの場合はこちらの方が手頃でしょうか。

2015年7月1日水曜日

Crosswalkのサイズが半分になるLiteについて(検証中)

Crosswalkの欠点の一つであるサイズが巨大になるという課題を克服するためにCrosswalk Liteというブランチプロジェクトがあります。
APKのサイズは10-15M, 端末でのメモリは40Mと公式ブログではなっていますので期待して検証しておりますが現在ビルドが通っておりません。
とりあえず調査状況をメモしておきます。

Crosswalk Lite関連HP

使用できなくなる機能

サイズを小さくするためにいくつかの機能が省かれているそうです。(ビルドが通っていないため未確認)

Crosswalk Lite Disabled Feature List

個人的に気になったのは Web Inspector ぐらいでしょうか。

2015年6月12日金曜日

外部サイトをブラウザで開く(Android)

Cordova5(Cordova Android4)からは外部サイトを他のブラウザ開くだけでもプラグインwhitelistが必要になりました。

手順

1 プラグインインストール
cordova plugin add cordova-plugin-whitelist

2 config.xmlに以下を追加
http://www.sample.comを許可する場合
<allow-intent href="http://www.sample.com" />

http,https全部許可する場合

<allow-intent href="http://*/*" />

<allow-intent href="https://*/*" />

上記で動くようになりました。許可されていないリンクをクリックした場合は何もアクションは出されません。
これでリンク自体は開けるようになったのですがCSP(Content Security Policy)タグを追加していない場合は以下の警告がコンソールに出されました。
No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.

Cordova Android 3.7.2 -> 4.0.2 へのアップグレード

変更点

「android.permission.ACCESS_WIFI_STATE」が追加された

どんな些細なものでもPermissionが追加されるのはとても困まります

2015年6月10日水曜日

ビルドエラー対応 q/q.js:126 throw e;

platforms/android/cordova/node_modules/q/q.js:126
throw e;

上記のビルドエラーが起きたらエラー全文読んでも何が悪いのか分からないので、
cordova platform rm android
cordova platform add android

で直りました。

エラーが起き始める条件として「build途中でbuildをキャンセル」した場合に起きました。

2015年6月4日木曜日

PCのChromeでCordovaアプリを分析

ChromeでURLに chrome://inspect とうつと、接続している端末のChrome及びWebViewアプリが分析できるようになる。

consoleに出力するには
console.log ではなく window.console.log からうつ必要がある

2015年5月31日日曜日

Android Chromium バージョン

Crosswalkを使用しない場合、Android4.x,5.xのWebViewのChromiumのバージョンに多少注意の必要がある。

4.4.0 - 4.4.2

Chromium 30

4.4.3 - 4.4.4

Chromium 33

5.x

Chromium37以上　独立apkによってバージョンがアップデートされるため固定ではない。

Crosswalk

ビルド時に使用したCrosswalkのバージョンによって異なる。基本的にほぼ最新。

Crosswalk Release Dates and Release Notes

2015年5月29日金曜日

BeginFrameOnMainThread skip becuase no gl

Cordova5(Cordova Android 4.0.2)でcanvasを表示すると「skip becuase no gl」とログに出力されてフリーズします。

Cordova Android 3.7.2に戻すと正常に動きます。

分かっている事はスマホの高い解像度に対応するために大きなキャンバスを作成して小さく表示した場合にフリーズします。 canvas.width,canvas.heightを解像度に合わせて２倍の大きさで作成してcanvas.style.width,canvas.style.heightとした場合などがそれにあたります。ライブラリでscaleが提供されている場合は実質は同じ処理をしているので落ちます。

Crosswalk(Chromium42)だとフリーズしませんでした。表に表すと以下のような状況です。

Cordova Android	Crosswalk	結果
3.7.2		正常
4.0.2		フリーズ
4.0.2	使用	正常

Cordova Android に脆弱性(CVE-2015-1835)の対応

CVE-2015-1835への対応
https://cordova.apache.org/announcements/2015/05/26/android-402.html

cordova platform add android@4.0.2
又は
cordova platform update android@4.0.2

~~普通にadd,updateすると4.0.0がまだ入るようなのでバージョンを明示する必要有り。~~
6/11にリリースされたCordova5.1.1からは4.0.2が入るようになりました。
3.7系を使用している場合は3.7.2を指定する。

2015年5月26日火曜日

crosswalk版と通常版の２つのAPKを公開

Crosswalkはサイズが大きく、なぜか4.4ではcrosswalkの方が遅いので、複数のAPKを同時に公開する方法を調べました。実際に２種類公開してみて、公開手順は簡単で特にひっかかることはありませんでした。

やりたい事

4.0-4.3の端末ではcrosswalkのapkをダウンロード
4.4- ではcrosswalkなしのapkをダウンロード

Multiple APK

Multiple APK Support
Multiple APK Support - 日本語訳

「アドバンスドモード」にすると複数APKサポートに切り替わる
端末が複数のAPKの条件にマッチした場合はバージョンコードが高い方がインストールされる

config.xmlでminSDKVersionをコントロールする。maxSDKVersionを設定するとユーザが端末を変えてrestoreをした際に困る事になるので使わない。

通常のAPK

Crosswalk版のAPK

バージョンコードの変更方法

通常はconfig.xmlのwidgetタグのversionがバージョンコードにも反映される。
1.0.5 -> 10005
自分でバージョンコードのみ変える場合は
同じくwidgetタグにandroid-versionCodeで指定する。

アドバンスドモードから通常モードに戻す

例えばCrosswalkに統一する場合などに複数のAPKの公開を解除したい場合がありました。
公開APKを１つの状態にして「アドバンスドモード」を解除すると通常の１つ公開している状態に戻りました。

困った事

ユーザさんからのレビューでバージョンコードではなく外に表示用のバージョン(1.0.1など)が表示されるため、同じ1.0.1でもどちらのAPKについて書かれているのか判断ができませんでした。

Android4.4 Cordova Crosswalk動作検証

Crosswalkに関係なくChromeのバージョンが上がった結果、js自体かWebフレーム「OnsenUI」の動作が変わったためにガタついて見えるようです。

アニメーションのみもたつく
https://crosswalk-project.org/documentation/about/faq.html

Next GPUを有効にする

Crosswalkの問題ではなくChromeのバージョンの問題の可能性があります。

Cordova5でsigned apkが生成されなくなったら

ant.propetiesにkey storeを記載していた場合は Cordova5になって(?) antからGradleになったそうなので署名ができずに署名無しapkのみ生成されるようになってしまいました。

修正方法

ant.properties を release-signing.properties に変更する
storeFile keyAlias storePassword keyPassword とパラメータ名を変更する

Cordova5でCrosswalk導入

Cordova5(Cordova Android4.0)を使用すると簡単に導入できました。

Crosswalkインストール手順

https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

cordova plugin add cordova-plugin-crosswalk-webview --save
cordova platform rm android
cordova platform add android
cordova plugin list

cordova-plugin-crosswalk-webview 1.4.0 "Crosswalk WebView Engine”がでてくる

cordova build android

crosswalkに必要なファイルがダウンロードされる。(時間がかかる)

以降はcrosswalkが含まれてビルドされる。アプリのサイズを見ると一目瞭然に。
ビルドでサイズの大きなapkがたくさんできてしまうので、PlayStoreへapkのアップロードが終ったら、「cordova clean」コマンドで綺麗にするようにしています。

使えなくなったプラグイン

一部動かなくなったものもありましたが、Crosswalkには関係なくCordova Android4.0に上げたのが原因でした。

サイズの増加

APKサイズ 5.3MB -> 24.5MB
端末メモリサイズ 10MB -> 64MB

端末メモリサイズはTwitter25MB Facebook40MBを考えるととても大きい。
いくつかの機能を省いてサイズを半分にするCrosswalk Liteという派生プロジェクトもあるのでこちらも試してみたいです。(Crosswalkのサイズが半分になるLiteについて)
また、Air SDKのようにランタイムを共有するSharedモードもあるようですが個人的には一般ユーザ向けの導入には期待しておりません。

動作の感覚

Android4.4ではcrosswalkを入れた方が重く感じる(参照動作検証)

アプリの起動

Crosswalkの方が遅いですが最近の端末はメモリが大きいので最初だけと思えば問題はないです

ビルド時の問題

指定したandroid-versionCodeが無視されて違う値が設定されました。(crosswalkではなくビルドツールの方の問題?)
問題ではありませんがArmとx86２つapkが生成されますので、両方対応する方はまとめる必要があります。Android4以上のArm対応端末は8000, x86は200ぐらいのようです。

トラブルシューティング

cordova build androidが終了しない

ウィルス対策をソフトを一時的に切ってみる

リリース後の問題

Crosswalkなしのバージョンでは一度もクラッシュレポートがありませんでしたがCrosswalkを使ったアプリでは起動時にクラッシュするケースがありました。(深く追ってないので断定はできません)

登録: 投稿 (Atom)