ハイブリッドアプリ

ionicでのハイブリッドアプリ開発のメリット・デメリットについてそろそろまとめとく

3年くらい前からionicを使い始めて良いところと悪いところが少しつつわかってきたのでメモしておく メリッド 学習コストが低い & 開発リソースが確保しやすい swiftやjavaなどでの実装となるとそれぞれのプログラム言語の学習する必要がある。言語自体の学習…

cordova githubからcordova-androidをインストール

# githubからplatform add $ cordova platform add https://github.com/apache/cordova-android # ローカルからplatform add $ git clone https://github.com/apache/cordova-android /path/to/cordova-android $ cordova platform add /path/to/cordova-and…

cordova carthage対応のライブラリを使ったプラグイン開発

Carthageを使ったライブラリを使用して開発されたCordovaプラグインをいくつか見つけた。が、導入方法はプラグインインストール後や`platform add ios`した後にXcodeからCarthageのお決まりの作業を行わなくてはならないようだった。問題点は以下 ・手間がか…

【ionic3】iOSでvideoインライン再生

ionic3でvideoタグのインライン再生しようとしたら上手くいかなかったのでそのときのメモHTMLはこんな感じ <video muted="true" preload="auto" webkit-playsinline playsinline controls src="assets/imgs/sample.mp4"> </video>調べてみると wkwebview の設定で allowsInlineMediaPlayback という設定があった。 CDVWKWebViewEngine.m を見てると allowsInlineMediaPlayback …

ionic(cordova) iOSでのtwitterログインで403 Forbidden の対応

はじめに アプリのコードいじってないのにアプリで実装していたTwitterログインができなくなった。使っていたプラグインはこちら https://github.com/ManifestWebDesign/twitter-connect-pluginエラー内容 error: Request failed: forbidden (403) Error Dom…

cordova-androidで生成したプロジェクトにSupport Libraryを追加

cordova-androidのバージョンは7.1プロジェクト作成 $ cordova-android/bin/create android_demo test.android_demoGradle Scripts > build.gradle (Module: app) dependencies { implementation fileTree(include: '*.jar', dir: 'libs') // SUB-PROJECT DE…

【cordova】cordovaFileTransfer で params も付けてファイルアップロード

ngCordovaの$cordovaFileTransferの使い方メモ https://github.com/apache/cordova-plugin-file-transfer のラッパー $cordovaFileTransfer.upload( 'https://xxx.yyy.zzz/path/to/api' 'path/to/upload_file', { fileKey: 'image', // アップロードするファ…

cordova-plugin-purchaseでQuotaExceededError (DOM Exception 22): The quota has been exceededエラー

cordova-plugin-purchaseを使っての継続課金機能の開発中にこちらのエラーが多発した。iOSの話。 Error in Success callbackId: InAppPurchase1613437489 : QuotaExceededError (DOM Exception 22): The quota has been exceeded.この辺りの処理も呼ばれなく…

ionic(cordova)でiPhoneXでステータスバーの背景色が適用されなかった時の対応

タイトル通りですが、既存プロジェクトのアプリをiPhoneXに対応させたときの対応をメモ。やったことはざっくり以下1. ionic本体を1.3.3から1.3.4へバージョンアップ 2. cordova-plugin-statusbarプラグインを2.1から2.4.1へバージョンアップ1.については、コ…

ionic(cordova)にてpush通知受信でフォアグラウンド・バックグラウンドを判定する

https://github.com/phonegap/phonegap-plugin-push/ こちらのプラグインを使ってプッシュ通知を実装した。で、今回やりたかったことはアプリがフォアグラウンドの場合とバックグラウンドの場合で受信した時の処理を切り分けたいということだった。ドキュメ…

【cordova】clipboardコピーのプラグインがiOS11で動かなかったときの対応

https://github.com/VersoSolutions/CordovaClipboard こちらのプラグインを使っていたのだが、iOS11でコピーできなくなっていた。https://github.com/VersoSolutions/CordovaClipboard/pull/35/files メンテされていないだけだと思うけど、こちらのPRのとお…

【cordova】アプリがインストールされているかどうかを調べるプラグイン

https://github.com/nrikiji/cordova-app-installed-plugin とりあえずiOS版だけ作ってみた。こちらにswiftのやり方がのっていたのでプラグインに書き直しただけ。androidも簡単にできそうなので近々やろうと思う。が、誰か作ってくれたら嬉しいです。以上で…

【cordova】iOSのサイレントプッシュ通知について

cordovaでiosのサイレント通知を試したときの挙動についてメモしておく。試した環境 ・ios11 ・awsのsnsでサイレント通知送信結果 通知設定アプリ状態受信 onバックグラウンド可 フォアグラウンド可 停止中不可 offバックグラウンド可 フォアグラウンド可 停…

ionic state resetとrestoreの違い

それぞれのヘルプをみてみる $ ionic --help reset ・・・ Clear out the platforms and plugins directories, and reinstall plugins and platforms restore ・・・ Restore the platforms and plugins from package.jsonreset はplatformディレクトリとplu…

ionic(cordova) config.xmlを環境(development、production)毎に分ける

以前から気になっていた内容。 ionic か corodova の標準の機能でありそうだけどドキュメント眺めたり検索してもよくわからない。みんな必要な機能な気がするがどうやるのが正しいのだろうか。解決したかったこととしては以下 ・アプリのBundle Identifierや…

【ionic2】ログイン機能を実装する

はじめに 今回やりたかったのは、まぁ普通のログイン機能をもつアプリ。実装したい要件としては以下 ・未ログインの場合は、ログイン画面を表示。 ・ログイン済の場合は、他の画面が見れる。実装方法としては以下のような形で行ってみた。 ・ログイン済みか…

【ionic2】apiリクエストをproviderで共通処理化する

はじめに 今回やりたかったことは以下 ・APIのURLを開発と本番で切り替えられるようにしたい ・アプリ全体で認証トークンをhttpヘッダーに含めたいこれらを満たすAPIリクエストの共通処理実装したのでメモしておく。 APIのURLを開発と本番で切り替える こち…

【ionic2】ionicPageで各画面をurlに対応させる

はじめに ionic1のルーティングまわりはui-routerで検索すれば色々出て来たけどionic2で何で検索すればよいのかまだよくわかってないけどとりあえずやり方はわかったのでメモしておく。デバッグのときとかはブラウザでリロードしたいし。あれ、けど目的はそ…

【ionic2】画面遷移のアニメーションを変更する

やりたかったこととしては画面の遷移の際のアニメーションでandroidでもiosみたいに左から右にスライドするようにしたいとういこと。 本来はプラットフォームごとに奨励されているアニメーションを使うべきだとは思うのだがやっぱりiosをベースで考えている…

ionic(cordova)でdatepickerを使う

日付入力のUIを当初は「input type="date"」で実装していたのだが、「消去」ボタンを消したかったのだがこれのやりかたがわからず。。素直にDatepicker使うことにした。プラグインインストール $ ionic plugin add cordova-plugin-datepickerテンプレート <ion-view ng-controller="SampleCtrl"> <input type="date" readonly ng-click="openDatepicker()" ng-model="date" /> </ion-view>…

【cordova】Androidプラグイン開発でgradleに設定を追加する

こんな感じでいけるみたい。plugin.xml <platform name="android"> ・・・ <framework src="src/android/sample.gradle" custom="true" type="gradleReference" /> </platform>sample.gradle allprojects { repositories { maven { url "https://maven.google.com" } } } dependencies { compile "com.android.support:appcompat-v7:25.4.0"…

ionic(cordova) 開発で使ったcordovaプラグインやライブラリまとめ

最近、ionicを使ってハイブリッドアプリをいくつか作ったのでそのときに使ったcordovaプラグインとionic・angular関連のJSライブラリを忘れる前にまとめておく。 ionic系 ion-slides-tabs タブの画面遷移をスワイプでも実装するのに使用。アプリぽいUIが実現…

ionic(cordova)にてion-nav-viewで$ionicHistory.goBackで2つ以上前に戻る

今回たまたまやる機会があったのでメモしておく。 $ionicHistory.goBack(-2);これだけ。以上です

ionic(cordova)にてinstagram でのログインを実装

やりたいことは、instagramアカウントでのログインの実装。調べたところではSDKがなさそうで、webと同じような実装になりそう。また、投稿したりシェアしたり?のプラグインはあるみたいだけどログインはできなそうなので今回は自前で作る。やることは以下。 …

ionic(cordova)にてtwitterログインを実装

やりたいことは、Twitterアカウントでのログインの実装。 前提としては、fabricへは登録済みであること。やることは以下 ・fabricからorganizationsを作成 ・twitterアプリを作成 ・twitter-connect-pluginプラグインの導入 ・プログラム実装 fabricからorga…

ionic(cordova)にてGoogle+ログインを実装

簡単なものかと思ったらけっこう時間かかった。。手順はざっくり以下 ・ionicプロジェクトを作成 ・Googleコンソールからプロジェクトを作成 ・作ったプロジェクトに認証情報を作成 ・cordova-plugin-googleplusプラグインを導入 ・プログラム実装 ionicプロ…

ionic(cordova)でiOSでのキーボード入力で完了ボタンを表示する

inputタグでキーボード表示したあとに何かたりないと思ったら、完了ボタンがなかった。 ionic startで作ったプロジェクトだとデフォルトで非表示に設定されてるぽい。app.js angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPl…

【ionic】collection-repeatで行の高さを動的にする

まだ調査中。無限スクロール実装するときにng-repeatよりcollection-repeatを使った方がパフォーマンスが良いらしい。とのことで。試していたら行の高さが1行目の高さに合わせられてしまうようで、高さを動的にする場合は高さを計算してやる必要がありそう。…

ionic(cordova)にて$ionicPopupをカスタマイズしてモーダルを作る

今回やりたかったのはこんな感じの画面。 初めはionicModalのサイズを変えてやろうとしていたのだが、モーダルのサイズを中のテキストとかにあわせてリサイズするのを自前で実装するのが手間でした。 で、少し調べたらionicPopupをカスタマイズしたら簡単に…

ionic(cordova)にてアプリをリロードする

今回やりたかったことは、アプリでログアウトしたときなどにアプリをはじめから実行しなおしたい。ということ。いくつか試してみてうまくいくパターンとうまくいかなかったパターンをメモしておく。・うまくいかなかったパターン $state.go('path/to'); $win…