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に２つファイルをいれると２つ実行されますが、順番は名前順(?)のような気がします。

登録: 投稿 (Atom)