ログスケールの円形ナンバーピッカーを作る
材料:
注意:
年間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
ハイブリッドアプリをApple TestFlightへアップロードする方法
フロー:
手順
Getting Started Deploy Mobile Hybrid App To Apple TestFlight
Create test app on iTunes connect
- Goto iTunesConnect and create app
New App を選択
Add Certificate to your OS X Reference Link
Note * Skip this step if you're already connect your account with xCode
-
Goto Apple Member Center
-
Goto Identifiers session choose App IDs and create new
-
Goto Device session click Development and create new
iPhoneなどをパソコンに接続して、XCode のWindow>DevicesからそのデバイスのIDを調べて登録する。100件まで登録可能。
iOS端末のUDIDの確認方法 - jubilee
-
Goto Provisioning Profiles session and add your device
まずはDevelopmentから作る。あとでDistributionも作る。
About Creating a Certificate Signing Request (CSR)
To manually generate a Certificate, you need a Certificate Signing Request (CSR) file from your Mac. To create a CSR file, follow the instructions below to create one using Keychain Access.
In the Applications folder on your Mac, open the Utilities folder and launch Keychain Access.
Within the Keychain Access drop down menu, select Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.
- In the Certificate Information window, enter the following information:
- In the User Email Address field, enter your email address.
- In the Common Name field, create a name for your private key (e.g., John Doe Dev Key).
- The CA Email Address field should be left empty.
- In the "Request is" group, select the "Saved to disk" option.
- Click Continue within Keychain Access to complete the CSR generating process.
これを見て作る。
iOS実機開発手順#4-1 Provisioning Profiles ( Macintosh ) - エビ - Yahoo!ブログ
その後:
When your CSR file is created, a public and private key pair is automatically generated. Your private key is stored on your computer. On a Mac, it is stored in the login Keychain by default and can be viewed in the Keychain Access app under the "Keys" category. Your requested certificate is the public half of your key pair.
Upload CSR file.
Select .certSigningRequest file saved on your Mac.
参考サイト
Getting Started Deploy Mobile Hybrid App To Apple TestFlight · rotati/wiki Wiki · GitHub
iOS実機開発手順#4-1 Provisioning Profiles ( Macintosh ) - エビ - Yahoo!ブログ
Connect xCode to iTunes connect
Open ionic project with Xcode:
参考
Deploy an Ionic App to the iOS App Store — waaws-thinks — Medium
iOS Platform Guide - Apache Cordova
ionic platform add ios
$ cordova platform add ios
$ cordova prepare # or "cordova build"
config/xml を編集
https://coderwall.com/p/vvkyra/getting-started-with-ionic
Build process
The Build system is the process of compiling these apps into an .ipa file for IOS and .apk file for Android. We can use PhoneGap build for this, or Cordova build. PhoneGap is $9.99 per month for private repositories, Cordova is free and as simple as the commands below. The cordova and ionic build commands are one and the same in terms of functionality so just pick one of them.
cordova build --release android
cordova build --release ios
ionic build ios
ionic build ios
Getting started with Ionic (Example)
Build new iOS xcode project every time again? - ionic - Ionic
IMPORTANT: Whenever you make a change in your project or to the config.xml file, you must remember to run the command:
ionic prepare ios
in order to update your ios project folder with the latest changes.
Open file with name ending with "xcodeproj" in folder platform/ios
-
Add apple developer account > Preferences > Accounts tab and add
?
-
Goto Xcode tool bar > Product > Analyze.This runs a full check errors on all files
AppIcon has an unassigned child というエラーが出ていた。
参考:
[Xcode] icon画像の設定で警告が結構出た: スタジオプリズム㐧3ブログ
しかし今回は、unassigned というオブジェクトは見当たらなかったため、無視して次へ。
-
Goto Product > Archive click Submit to App Store, choose your account and submit (make sure your Bundle Identifier same as app that you created)
Archiveが灰色になっていて、クリックできない場合:
provisioning - Xcode Product -> Archive disabled - Stack Overflow
-
Check your iTunes Connect and invite user
GreenSock, TweenLite 動かない時
デモ:
https://codepen.io/GreenSock/pen/GFBvn
問題:
2回目以降のレンダリング(ハイブリッドアプリの該当画面の表示)ではTweenLiteオブジェクトの配置が何も指定されていないのと同じようになる
解決策:
・JavaScriptでのオブジェクトマークアップをなくし、すべてのスタイリングをCSSで行う
Javascriptファイルのなか:
// TweenLite.set($container, {height: 90+"%", width: 100+"%"});
// TweenLite.set($coin, {width:30+"%", height:10+"%", lineHeight:10+ "%"});
// TweenLite.set($sensor, {width:50+"%", height:50+ "%", lineHeight:1+ "%"});
TweenLite.set($container, {});
TweenLite.set($coin, {});
TweenLite.set($sensor, {});
問題:
2回目以降のレンダリング(ハイブリッドアプリの該当画面の表示)ではdragが使えない(ことがある)
・Position: absolute を用いてオブジェクトを再配置する
問題:
2回目以降のレンダリング(ハイブリッドアプリの該当画面の表示)ではhitTestが使えない
もともとのコード例
if (Draggable.hitTest('#test')) { console.log('hit'); }
解決策の案:
hitTest = this.hitTest("#drop1", e);
function hit_test(){
if(this.Draggable.hitTest($sensor, overlapThreshold)){console.log('hit')}
}
=> Uncaught Error: Syntax error, unrecognized expression: 50%
overlapThesholdの値がunrecognized.
原因候補
・
備忘6 » Post Topic » jQuery mobileでリロードしないとJavascriptが動かない場合
・onModal Show
Event after Modal show - Ionic
「実行タイミングがクイックビュー機能により意図的に変更される?」
参考
http://greensock.com/forums/topic/14745-animation-lagging-sometimes/
http://greensock.com/forums/topic/1960-tweens-not-always-completing/
他のサイト
・キャッシュのせいでajaxが二回目以降動かない
IEでAjaxのスクリプトが初回処理後に動かない原因!一時ファイルの設定で解決する方法! | 自作PCテクニカルセンター
ionic emulate iosエラー:Please use `cordova platform add <platform>`.
ionic emulate ios
Error: No platforms added to this project. Please use `cordova platform add <platform>`.
あとで使う
ionic command not found:
export PATH=/Users/local/ionic_projects/bin:$PATH
TIMEPICKER:
CIRCLE CROP OF PHOTOS