ログスケールの円形ナンバーピッカーを作る

材料:

注意:

年間1万円程度の年会費がダウンロードに必要 GreenSock | ThrowPropsPlugin

チュートリアル


実装した後

ドラッグ中、ドラッグした後の地点でのポジションの値を返す:

Draggable End Position

 

 

目もりをログスケールにする:


 

 

 

他の材料:

 

dougTesting.net : Home

 

Edit fiddle - JSFiddle

Edit fiddle - JSFiddle

 

Spinning wheel javascript · GitHub

GitHub - zarocknz/javascript-winwheel: Create spinning prize wheels on HTML canvas with Winwheel.js

ionic pushでプッシュ通知を実装する 2: full push

概要:

docs.ionic.io

この後に

docs.ionic.io

 

 

エラー:

Undefined "init" function for notification push · Issue #91 · driftyco/ionic-platform-web-client · GitHub

解決:

実機でしかテストできない。

 

 

実機を使う(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.

docs.ionic.io

 

 

iOS, Android どっちのtoken か

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

github.com

 

解決:

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

チュートリアル

 

docs.ionic.io

 

以下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へアップロードする方法

フロー:

coderwall.com

 

手順

Getting Started Deploy Mobile Hybrid App To Apple TestFlight

Create test app on iTunes connect

  1. 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

  1. Goto Apple Member Center

  2. Goto Identifiers session choose App IDs and create new

  3. Goto Device session click Development and create new

iPhoneなどをパソコンに接続して、XCode のWindow>DevicesからそのデバイスのIDを調べて登録する。100件まで登録可能。

iOS端末のUDIDの確認方法 - jubilee

  1. 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

  1. Add apple developer account > Preferences > Accounts tab and add

  1. Goto Xcode tool bar > Product > Analyze.This runs a full check errors on all files

AppIcon has an unassigned child というエラーが出ていた。

参考:

[Xcode] icon画像の設定で警告が結構出た: スタジオプリズム㐧3ブログ

しかし今回は、unassigned というオブジェクトは見当たらなかったため、無視して次へ。

  1. 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

 

  1. Check your iTunes Connect and invite user

 

 

github.com

 

 

 

mzgk.github.io

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);

greensock.com

 
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/

http://greensock.com/forums/topic/10964-bug-report-with-rotate180deg-tweenmax-sometimes-does-the-wrong-matrix-conversion/

 

 

他のサイト

 

・キャッシュのせいでajaxが二回目以降動かない

IEでAjaxのスクリプトが初回処理後に動かない原因!一時ファイルの設定で解決する方法! | 自作PCテクニカルセンター