SQLite pluginのデータのある場所
databasesにopenDatabaseで指定したデータファイル(例: data.db)が入っているのでこれをバックアップすれば良い。
2015年9月27日日曜日
2015年9月21日月曜日
OnsenUIでIE11に対応する
「他のブラウザはOKだけどIEは動かない」、というのはもちろんOnsenUIにも当てはまりました。ですが、デザインはボロボロに崩れて、動作はガクガクというような状況ではなく、少し習性を覚えて置いて修正が必要という程度でした。
Angularjs関連
バインドが反映されない
- タグのstyleなどに直接 {{}} を記載しても反映されない。
- ng-styleなどを使う必要がある。
細々したアラート・エラーが出る
- タイミング依存の再現性のないアラート・エラーなどが出ます。なぜかアプリがクラッシュ・フリーズするようなものは出ません。
2015年9月20日日曜日
OnsenUI 小ネタ集
自分で使う小ネタ集
Ver 1.3.10 対象
ionic keyboard pluginを使ってソフトウェアキーボードの表示、非表示のイベントをとることでタブの表示・非表示を行う事ができます。
iOSではキーボードはページの上に覆うような形なので問題はありませんでした。
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;
}
//ページ読み込みの場合
navigator.once("postpush", function () {
initPage();
});
//重ねたページをポップしたときに処理を入れる場合
navigator.once("postpop", function () {
doAction();
});
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は公式のサポートに入っていません。
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">幅いっぱいのリストの ヘッダーアイテム
<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>
<div class="row ons-row-inner">
<ons-col>
<div class="col ons-col-inner">
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から転記されているのでそちらを修正します。
確かに 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
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管理のもののみ)
npm install -g cordova-plugin-update
cordova plugin add hoge --save
でconfig.xmlにプラグインの情報を書き込んでいない場合は
cordova plugin save
で一度書き込む必要があります。
以下のコマンドを実行
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
cordova-plugin-update --all
これまで 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
登録:
投稿 (Atom)