ionic

cordova8 で plugin addエラー 最低限のpackage.jsonが必要

cordova7まではpluginのpackage.jsonなしでもプラグインの追加を行えた。cordova8からはpackage.jsonの中も見てるようで最低限のpackage.jsonが必要になったぽい。package.json { "name": "my_plugin", "version": "0.0.1", "description": "" }試したらname…

Ionic3とAngularのバージョン確認

IonicはCLIとフレームワークとでそれぞれバージョン違うし。Angularはバージョンどんどん上がってる印象なので。自分がそれぞれどのバージョン使ってるかわからなくなってきた。CLIのバージョン $ ionic -v 3.20.0FWのバージョンはpackage.jsonを見るとわか…

ionic(cordova) CircleCI2とFastlaneでiOSアプリをデプロイゲートにアップロードする手順まとめ

はじめに 今回やりたかったことは ・ionicで開発したiOSアプリをCircleCI2上でAdHoc版ビルド ・ビルドしたアプリをデプロイゲートへアップロード ・Fastlane Matchは使わず手元にある証明書とプロビジョニングプロファイルで行う ビルドとアップロードはFast…

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

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

Fastlaneにてcordova(ionic)プロジェクトのiOSアプリをDeploygateにアップロードする手順

今回やりたいことは以下 ・cordova(ionic)プロジェクトで作成したアプリをビルド ・ビルドしたアプリをデプロイゲートへアップロード とりあえずはデプロイゲートまでアップするのが目標 fastlaneインストール fastlaneをインストール $ sudo gem install fa…

ionic3でcordova pluginを使用する

ionic2からionic-native経由でcordovaプラグインを使うような形になってる。 素のcordovaプラグインを使うことも多いと思うのでメモしておく。pages/home/home.ts import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; de…

ionic(cordova)iPhoneXでスプラッシュ画像が正しく表示されなかったときの対応

まず、スプラッシュ画像をセットする方法は2つあってxcodeのimages.xcassetsの以下のどちらかに正しいサイズの画像をセットすれば良いらしい。 1. LaunchImageに画像をセット 2. LaunchStoryboardに画像をセット今回は1.の方でやったときの流れをメモしてお…

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

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

【angularjs】パスワード確認用入力フォームを実装する

今回やりたかったのは、サインアップ画面等でパスワードとパスワード(確認用)の入力画面を用意して、一致していなかったらバリデーションではじく。というありがちな画面。https://github.com/TheSharpieOne/angular-validation-match 探したところこちらに…

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

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

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や…

【ionic】ion-list ion-itemをタップしたときのhighlightの無効化

正しいやり方わからないけど、これでできたので自分用にいったんメモしておく .item.activated.item-complex > .item-content { border-color: #FFF; background-color: #FFF; }

【ionic】ionicPopup.promptの入力フォームがキーボードで隠れないようにする

app.js angular.module('starter', ['ionic']) .run(function($ionicPlatform, $localStorage, ParentService) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccess…

【ionic2】無限スクロールの使い方

なかなか手をだせにずにいたionic2を次の案件では使えるように準備中。とりあえずionic1でできてたことをionic2でもできるようになることが当面の目標。今回はapiから取得したjsonからリスト表示で、無限スクロールを実装してみる。blankでプロジェクト作成 …

【ionic】angular-messageで入力フォームのバリデーションとエラーメッセージを実装する

はじめに 今回やりたかったことは入力フォームにバリデーション機能を実装して、不備があった場合は送信ボタンを押せなくして不備の内容を画面に表示するということ。今回は angular-messages というライブラリを使った。angular-messagesのインストール $ b…

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>…

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…

ionic(cordova)にて無限スクロールが途中で止まった時の対応

なんのこっちゃというタイトルですが。無限スクロール実装して、実機で検証していると意図せず途中で止まってしまうことがあった。不定期なので気づきずらかった。ちなみに無限スクロールに実装サンプルはこちらに書いて見た。で、以下のコードを無限スクロ…

ionic(cordova)にて無限スクロールを実装する

今回やりたいこととしては以下 ・サーバーからデータを取得してレスポンスがなくなるまで無限スクロール ・エラーがあったら再読み込みボタンを表示普通の無限スクロールです。ひな形としてメモしておく。想定するJSON [{id: 1, name: "Tom"}, {id: 2, name:…

ionic(cordova)にてAndroidでもタブバー(ion-tabs)を画面下にする方法

Androidでion-tabsをデフォルトのまま使うとこんな感じで、画面上に設置され選択中のタブの下にラインが表示される。Android的にはこのUIが推奨されるのでしょうが、実案件ではiOSと合わせるということも多いはず・・・ angular.module('starter', ['ionic',…

ionic(cordova)の開発環境構築で最低限必要そうなプロジェクト開始手順をまとめておく

はじめに いまさらバージョン1系かよ。 という内容だが個人的にはまだまだ使う機会ありそうなのでプロジェクトを作成してから開発に入るまでの最低限必要そうな手順をメモしておく。バージョン2は勉強中。 各ツールバージョン バージョンによって動いたり動…