ionic(cordova) 開発で使ったcordovaプラグインやライブラリまとめ
最近、ionicを使ってハイブリッドアプリをいくつか作ったのでそのときに使ったcordovaプラグインとionic・angular関連のJSライブラリを忘れる前にまとめておく。
ionic系
ion-slides-tabs
タブの画面遷移をスワイプでも実装するのに使用。アプリぽいUIが実現できた。
ionic-segmen
iOSのセグメントコントロールを実装するの使用。
ionic-material
高さの異なる2列のリスト表示を実装するためにionic-materialのcard-galleryを使ったら簡単に実装できた。
angularjs
ngCordova
cordovaプラグインをラッパーして使いやすくしてくれる。あと、結果をプロミスとして返してくれるのもメリットと思ってる。
ngStorage
ローカルストレージを扱いやすくしてくれる。
ng-file-upload
input type=fileを扱いやすくしてくれる。デフォルトだとng-modelに対応していない？かわからないけどこれ使ってREADMEに書いてある内容を参考にしたらやりたいことできた。
angular-chart.js
グラフを表示する必要があったのでchart.jsを使用。それをangularでも同じように使えるようにしてくれる。
jsTag
タグ入力のUIを実装する際に使った。ngTagInputというのがメジャーぽいのだが、自分のシステムでは何かとバッティングしてしまいうまく動かなかった。そこで探して出てきたのがこれで機能もシンプルそうだけで十分だった。
angular-translate
英語対応する際に使用。jsonファイルで各言語のテキストを定義する形で簡単に呼び出すことが可能。
angular-dynamic-locale
英語対応する際に使用。時刻を扱う際に月や曜日の表記を言語ごとに自動で切り替えてくれる。
cordovaプラグイン
com.verso.cordova.clipboard
クリップボードへのコピーを実装するために使用。
cordova-plugin-add-swift-support
iOSのプラグインを開発する際にswiftで書くために使用。
cordova-plugin-camera
アプリでカメラを使えるようにするために使用。撮った画像をサーバーにアップロードする際に使用。cordova-plugin-file-transferと合わせて使った。
cordova-plugin-googleplus
Googleアカウントでのログインを実装するのに使用。
twitter-connect-plugin
Twitterアカウントでのログインを実装するのに使用。
cordova-plugin-image-picker
端末のフォトライブラリから画像を選択させるのに使用した。
cordova-plugin-inappbrowser
外部サイトをブラウザで表示するのに使用。
phonegap-plugin-push
プッシュ通知を実装するのに使用。
cordova-plugin-calendar
カレンダーアプリとの連携で使用。
cordova-plugin-network-information
ネットワーク状況を判定するために使用。「ネットワークに接続していません」画面とかを実現するのに使用。
cordova-plugin-screen-orientation
画面ごとにアプリの向きを固定にするのを実装するのに使用。
cordova-plugin-x-socialsharing
SNSやメールなどでシェアするダイアログを簡単に実装できた。
cordova-sqlite-storage
アプリからSQLiteを使うために使用。
cordova-plugin-google-analytics
Googleアナリティクスを使うために使用。
cordova-plugin-file-transfer
ファイルのアップロードとダウンロードを実装するのに使用。
cordova-plugin-dialogs
ionic2だとわからないけど、ionic1だとデフォルトのモーダルのUIがWebっぽくて嫌だったので使用。
こういうの書くときはGithubのURLものせておいたほうがよいのかな。ずらずら書いたけど、以上です。
ionic(cordova)にてion-nav-viewで$ionicHistory.goBackで2つ以上前に戻る
今回たまたまやる機会があったのでメモしておく。
$ionicHistory.goBack(-2);
これだけ。以上です
ionic(cordova)にてinstagram でのログインを実装
やりたいことは、instagramアカウントでのログインの実装。調べたところではSDKがなさそうで、webと同じような実装になりそう。また、投稿したりシェアしたり?のプラグインはあるみたいだけどログインはできなそうなので今回は自前で作る。
やることは以下。
・アプリケーション登録
・cordova-plugin-inappbrowserを導入
・プログラム実装
アプリケーション登録
https://www.instagram.com/developer
こちらのページから「Register Your Application」をクリックしてアプリを作成する。作成する際にサイトのURLとコールバックURLが必要になる。また、作成すると「Client ID」と「Client Secred」が発行されるのでこちらをメモしておく。
cordova-plugin-inappbrowserを導入
ブラウザで認証画面を表示したいのでInAppBrowserを使えるように。
$ ionic plugin add cordova-plugin-inappbrowser
プログラム実装
var auth_url = 'https://api.instagram.com/oauth/authorize/';
var user_url = 'https://api.instagram.com/v1/users/self/';
var redirect_uri = 'コールバックURLに指定したURL';
var client_id = 'クライアントID';
var url = auth_url + '?client_id=' + client_id + "&redirect_uri=" + redirect_uri + "&response_type=token";
this.iframe = window.open(url, 'iframeName');
var self = this;
self.iframe.addEventListener('loadstart', function(e) {
if (e.url.indexOf(redirect_uri) == 0) {
self.iframe.close();
var token = e.url.replace(redirect_uri + "#access_token=", "");
$http.get(user_url + '?access_token=' + token)
.then(function(result) {
// 成功
})
.catch(function(err) {
// 失敗
});
}
});こんなかんじで取れた。以上です。
ionic(cordova)にてtwitterログインを実装
やりたいことは、Twitterアカウントでのログインの実装。
前提としては、fabricへは登録済みであること。
やることは以下
・fabricからorganizationsを作成
・twitterアプリを作成
・twitter-connect-pluginプラグインの導入
・プログラム実装
fabricからorganizationsを作成
https://fabric.io/settings/organizations
作成したorganizationsの詳細画面へ行くと小さく「API Key」というのがあるのでコレをメモしておく。
ちなみに「Build Secret」というのもあるが今時点ではこちらは未使用。
twitterアプリを作成
https://apps.twitter.com/
作る際にハマったのが、今回は「Callback URL」使わないと思って未設定だったのだがこれが空だとなぜかうまくいかず。適当なURLをいれたらなぜかいけた。。
アプリを作ると「Consumer Key (API Key)」と「Consumer Secret (API Secret)」が確認できるのでこれをメモしておく。
twitter-connect-pluginプラグインの導入
ちょっと調べたらこのプラグインが1番ヒット気がしたので今回はこれで。
xxxxxの部分はfabricでメモした「API Key」
$ ionic plugin add twitter-connect-plugin --variable FABRIC_KEY=xxxxx
config.xml
・・・ <preference name="TwitterConsumerKey" value="xxxxx" /> <preference name="TwitterConsumerSecret" value="zzzzzz" /> </widget>
twitterアプリ作成時にメモしたConsumer KeyとConsumer Secretを設定
プログラム実装
TwitterConnect.login(
function(result) {
// 成功
console.log(result);
}, function(error) {
// 失敗
}前もfabricでの作業で完結するのか、twitterアプリをつくらなきゃならないのか。。てところで迷ってる気がする。両方って覚えておけばよいのかな。以上です。
ionic(cordova)にてGoogle+ログインを実装
簡単なものかと思ったらけっこう時間かかった。。
手順はざっくり以下
・ionicプロジェクトを作成
・Googleコンソールからプロジェクトを作成
・作ったプロジェクトに認証情報を作成
・cordova-plugin-googleplusプラグインを導入
・プログラム実装
ionicプロジェクトを作成
まずはプロジェクト作って、androidを追加する。
$ ionic start google-login blank --v1 $ cd google-login $ ionic platform add android
Googleコンソールからプロジェクトを作成
まずはここからプロジェクトを作成
https://console.developers.google.com/apis/dashboard
作ったプロジェクトに認証情報を作成
「認証情報を作成」から「OAuthクライアントID」を作成
・ios
バンドルIDが必要
・android
署名証明書フィンガープリントとパッケージ名が必要
フィンガープリントは以下のコマンドで確認。SHA1の内容をコピーして貼り付ける
$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
$ キーストアのパスワードを入力してください: android (パスワードはandroidぽい)
・・・
証明書のフィンガプリント:
MD5: ・・・
SHA1: ・・・
SHA256: ・・・
署名アルゴリズム名: SHA256withRSA
バージョン: 3
・・・パッケージ名はiosのバンドルIDと同じ。
cordova-plugin-googleplusプラグインを導入
以下のコマンドでプラグイン導入。iOS の URL スキームは認証情報を作成する際に作られる。Googleコンソールの認証情報の画面から確認できる。
$ ionic plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=[iOS の URL スキーム]
プログラム実装
・・・
.controller("MainCtrl", function($scope, $timeout) {
$timeout(function() {
window.plugins.googleplus.login({ /* なくてもデフォルトの設定で動く */ }
/* scopesを指定したい場合はスペースで複数指定可
{
'scopes': 'https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/userinfo.profile'
}
*/
, function (obj) {
console.log(obj);
}, function (msg) {
alert('error: ' + msg);
});
}, 3000);
・・・以上です
その他URLメモ
https://github.com/EddyVerbruggen/cordova-plugin-googleplus
https://developers.google.com/mobile/add?platform=ios&cntapi=signin
https://developers.google.com/mobile/add?platform=android&cntapi=signin
ionic(cordova)でiOSでのキーボード入力で完了ボタンを表示する
inputタグでキーボード表示したあとに何かたりないと思ったら、完了ボタンがなかった。
ionic startで作ったプロジェクトだとデフォルトで非表示に設定されてるぽい。
app.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
// ★ここをfalseに変更
//cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});これだけですが、デフォルトで表示でも良い気が。。以上です
angularのhttpでレスポンスヘッダーを取得する
今回やりたかったことは以下。
angularの$http.getまたは$http.postでAPIへリクエストしたレスポンスヘッダーを取得するということ。
chromeの開発ツールからはレスポンスヘッダーを確認できたのだが、angularでは取り扱う場合にうまく取得できずに少しはまりました。
$http.get("path/to")
.success(function(result, status, headers) {
// headers()
});上記の形で取得できるはずなのだが、なぜか上手くいかなかった。
理由ははサーバー側で対応する必要があったみたい。
下記の形でレスポンスヘッダーを追加してやればすんなり取得できました。
Access-Control-Expose-Headers: <header-name>, <header-name>, ...
以上です
