ionicアプリでAngularJSチェックボックスから値を読み込む
時系列
問題:
値を取得できない
できていなかったこと
1:type=submitのボタンをフォームタグで囲っていなかった
2:渡したい値の定義方法が違った
contact.UIDではなくcontact.contactUID
ー
問題:デバッグのために選択した値を値をconsole.logで表示する
1: [object Object] や空欄が表示される
2: How can I display a JavaScript object? - Stack Overflow
すると意味不明な文字列("entire object"オブジェクト全体)がプリントされるが
その中に checkboxで指定しているvalueがない
on; 1: on; length: 2; prevObject: [object Object]; jquery: 3.1.0; constructor: function (a,b){return new r.fn.init(a,b)}; toArray: function (){return f.call(this)}; get: function (a){return null!=a?a<0?this[a+this.length]:this[a]:f.call(this)}; pushStack: function などと続いている
3: jQueryでチェックボックスのチェック済みの値のみを取得 - MasKのpermission denied.
on,onと表示される
解決
ion-checkboxではなくてinput style="checkbox" としたら洗濯した値がvalue=""の中身となった。
tocheck
Ionic/AngularJS checkbox and ng-repeat from API - Stack Overflow
javascript - How to bind to list of checkbox values with AngularJS? - Stack Overflow
【jQuery】チェックされたチェックボックスを取得する - Qiita
ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 - Qiita
メモ:
jQueryは値の取得は先頭のものだけが対象になるのが普通で、 .val()
もそう。
全部取るために、 .map()
でループします。
1 |
< form id = "my-form" > |
2 |
< input type = "checkbox" name = "my-checkbox" value = "A" /> |
3 |
< input type = "checkbox" name = "my-checkbox" value = "B" checked /> |
4 |
< input type = "checkbox" name = "my-checkbox" value = "C" checked /> |
5 |
</ form > |
1 |
var $checked = $( '#my-form [name=my-checkbox]:checked' ); |
2 |
var valList = $checked.map( function (index, el) { return $( this ).val(); }); |
3 |
console.log(valList); // => ["B", "C"] |
複数あるかもなので、値も配列に詰めてます。
あ、 .map()
の使い方は解説しないので、わからない人は探してみてくださいね。
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
var checkedSeasons = []; $('[name="seasons"]:checked').each(function(){ checkedSeasons.push($(this).val()); });http://codenote.net/javascript/jquery/2250.html |
[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法 | CodeNote.net
フォームの中でない場合:
console.log
アプトプットが[object Object]になってしまうときの対処除法
ionicでフッターを二つ作りたいとき
成功:
bar-subfooter
bar-footer
の使い分け
失敗:
divをion-contentに入れる
footer-barにdivやrowを二つ入れる
サブフッターをfloat、clearする
<br>を使う
rangeslider.jsをカスタマイズする
使うもの
カスタマイズ例を見てもCSSが当たらなかった
原因
・ブラウザでCSS変数の使用ができなかった
・SCSS, SASSフォーマットからうまく変換できなかった
・rangeslider.cssを読み込めてなかった
・rangesliderをJavaScriptでinitializeできていなかった
Building out your app - Ionic Framework
AngularJSのControllerとScopeの基礎を学ぼう | HTML5Experts.jp
解決策
ブラウザのInspectorでチェックしながらCSSで上書き
見たけど応用できなかったもの
ログスケールの円形ナンバーピッカーを作る
材料:
注意:
年間1万円程度の年会費がダウンロードに必要 GreenSock | ThrowPropsPlugin
実装した後
ドラッグ中、ドラッグした後の地点でのポジションの値を返す:
目もりをログスケールにする:
他の材料:
Spinning wheel javascript · GitHub
GitHub - zarocknz/javascript-winwheel: Create spinning prize wheels on HTML canvas with Winwheel.js
ionic pushでプッシュ通知を実装する 2: full push
概要:
この後に
エラー:
解決:
実機でしかテストできない。
実機を使う(Android)
BUILD FAILED
Total time: 5.096 secs
Error: /Users/HOkaniwa/ionic_projects/bitCake-prototype/platforms/android/gradlew: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':_debugCompile'.
> Could not find any version that matches com.google.android.gms:play-services-gcm:9.0.2+.
Versions that do not match:
8.3.0
8.1.0
7.8.0
Searched in the following locations:----- ファイルリスト
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
------
問題:実機がダメなのではなくてionic build androidが出来ていない。
ionic platform add android はすでにしてある。
解決:Android Support Library and Android support Repository をインストール
Android StudioでAndroid SDK Managerを開いて、ライブラリをアップデートする - Qiita
結果:
Note: /Users/local/ionic_projects/bitCake-prototype/platforms/android/src/org/apache/cordova/splashscreen/SplashScreen.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
問題:ionic run androidをすると device not found
emulatorでしかエミュレートできない。
解決1:adb を使って携帯を認識する
adbをMacのターミナルで使えるようにする - Qiita
解決2:端末を指定してionic runする
解決3:再起動、Macに接続、Androidを開く、「OK」する
ーー
問題:実機でログを見れない
解決:adb logcat
問題:長すぎるログ
テキストファイルにする:
How to pull a Logcat file from your android device - YouTube
他の方法:
android - Get devices token? - Stack Overflow
他のチュートリアル
The following docs demonstrate the different capabilities of the Ionic.Push
service that you get with the Ionic platform web client.
How to identify if device token is for android or iOS? - Stack Overflow
➜ pushTest ionic plugin add phonegap-plugin-push --variable SENDER_ID=bitcake01
Updated the hooks directory to have execute permissions
Fetching plugin "phonegap-plugin-push" via npm
Installing "phonegap-plugin-push" for android
Installing "phonegap-plugin-push" for ios
Plugin doesn't support this project's cordova-ios version. cordova-ios: 3.8.0, failed version requirement: >=4.1.0
Skipping 'phonegap-plugin-push' for ios
Using this version of Cordova with older version of cordova-ios is being deprecated. Consider upgrading to cordova-ios@4.0.0 or newer.
cp: no such file or directory: /Users/local/ionic_projects/pushTest/resources/ios/icon/icon-40@3x.png
Saving plugin to package.json file
=>?
ーーーー
問題:
Ionic Push: GCM_INVALID_REGISTRATION
logを見る
ionic run android -l -c -s
解決:
device token をlogから取ってくる
device token は device id (15文字の数字)ではない!
結果:curl コマンド
curl -X POST -H "Authorization: Bearer API_KEY" -H "Content-Type: application/json" -d '{
"tokens": ["DEVICE_TOKEN"],
"profile": "profile01",
"notification": {
"message": "This is my demo push!"
}
}' "https://api.ionic.io/push/notifications"
ionic pushでプッシュ通知を実装する 1:limited push
以下Limited Push Tutorialから:
エラー:ionic plugin add phonegap-plugin-push
Updated the hooks directory to have execute permissions
Fetching plugin "phonegap-plugin-push" via npm
Error: Variable(s) missing (use: --variable SENDER_ID=value).
解決:
ionic plugin add phonegap-plugin-push --variable SENDER_ID="アンドロイドアプリの「プロジェクトID」"
Updated the hooks directory to have execute permissions
Fetching plugin "phonegap-plugin-push" via npm
Installing "phonegap-plugin-push" for android
Installing "phonegap-plugin-push" for ios
Saving plugin to package.json file
参考:
cordova - Ionic Android Push Notification getting error on phonegap-plugin-push - Stack Overflow
エラー:cURLでのプッシュ通知開始時
Getting Started · Ionic.io Documentation
curl -H "Authorization: Bearer キーがここに入る" https://api.ionic.io/auth/test
{"meta": {"status": 401, "version": "2.0.0-beta.0", "request_id": "873c3328-a2ab-42a8-bb3d-26941e477385"}, "error": {"type": "Unauthorized", "link": null, "message": "JWT decode error occurred."}}%
http://docs.ionic.io/v2.0.0-beta/docs/api-getting-started#section-creating-a-token
解決策:
・app.jsのコードを正しくした
・API Keys(Legacy API)ではなくAPI Keysを作成した
=> 解決!
次にこれを打ったら:
curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{ "tokens": ["DEV_DEVICE_TOKEN"], "profile": "fake_push_profile", "notification": { "message": "Hello World!" } }' "https://api.ionic.io/push/notifications"
エラー:
{"meta": {"version": "2.0.0-beta.0", "request_id": "8^^^^^^^^^^9", "status": 422}, "error": {"message": "Invalid JSON in request body. For empty JSON, pass '{}'.", "type": "UnprocessableEntity", "link": null}}%
解決策
・Ionic DashboardでのAPI Keys詳細設定(Apple, Android連携)をしていないこと
・Androidアプリの設定をしていないこと
Android Push Profiles · Ionic.io Documentation
・JSONの表記がおかしかった
スクリプトファイル(~~.sh)を作って、そこにコマンドを打つ。
改行ができる。
例:
➜ vi script.sh
ファイル編集 (ここからLimited Setup · Ionic.io Documentation)
➜ chmod +x script.sh
➜ ./script.sh
{"meta": {"request_id": "-----", "status": 201, "version": "2.0.0-beta.0"}, "data": {"config": {"profile": "limitedpushprofile01", "tokens": ["DEV------------"], "notification": {"message": "Hello!"}}, "app_id": "ee60ffrrff", "uuid": "sfrgrdg-e40b-4rrgr-rfef08-----------", "status": "open", "created": "2016-08-08T02:36:31.086718+00:00", "state": "enqueued"}}%
使えるかも:JSONLint - The JSON Validator.
他のチュートリアル
The Complete Ionic Push Notifications Guide
cordova + ionicでプッシュ通知(iOS)の1から9! - 鈴木商店ブログ
https://www.airpair.com/ionic-framework/posts/push-notifications-using-ionic-framework
Push Notifications in Ionic Apps with Google Cloud Messaging
他
AIzaSyAqAIcbBP9TzhlrKUgQzBIh97ODHFZsWl3Y