ionic

【Ionic】メニュー内で画面遷移するサイドメニュー、ナビゲーションメニュー、ドロワーを実装する

Webアプリやスマホアプリで実現したいUIの作り方を検索するときのキーワードに悩むことが多い。画面左上(または右上)のアイコンをクリックすると左からスライドして表示されるメニューって、人によって呼び方が違うが何と呼ぶのが正解なのだろう。サイドメ…

ionic(cordova)でsignin with appleを実装するプラグイン

iOS13のリリースも近いがcordovaアプリでも当然実装しないとならなくなりそう ionicで標準装備してくれるとありがたいが、まだなさそうなのでサードパーティのプラグインを使うしかなさそうgithub.com こちらで以上です

ionic Platform.readyについて

ionicのPlatform.readyはネイティブ側で必要な初期化処理が完了したときに発火される。ネイティブの機能を使うプラグインを使用する場合、Platform.readyが終わってないと使用できないというわけだ。console.logも実機で動かす場合はcordovaがラップしてObje…

ionic(cordova) での動画のトリミング

はじめに ionic(cordova)で動画を時間でトリミングすることができるUIを実装したくてプラグインを探した。Instagramの動画投稿のようなものをイメージしている。https://github.com/jbavari/cordova-plugin-video-editor 最初に見つかったのがこちらのプラグ…

ionic cordova-firebase-pluginとphonegap-plugin-pushを併用する

Badノウハウ 今回やりたかったことはphonegap-plugin-pushを使用してプッシュ通知を実装しているプロジェクトに、firebase analyticsを導入したいということ。新規のプロジェクトだったらプッシュ通知もfirebaseに寄せればいいのだろうが古いプロジェクトな…

ionic1 iosでunsafeエラーで画像が表示されないときの対応

またionic1。ionic-cli5.0.2でtabsのテンプレートプロジェクトを作成後、iPhoneでアプリを起動すると画像が表示されない。safariの開発モードで見るとこんなエラーが出てた unsafe://ionic/localhost/img/adam.jpg$compileProvider.imgSrcSanitizationWhitel…

ionic1 ion-slidesのスワイプでのページ切り替えを無効化する

今さらすぎて誰の役にも立たない内容だけど、ハマったのでメモしておく。今だにionic1使ってるプロジェクトあるから仕方ない。ionicではswiperというのを使ってるらしくswiperのドキュメントみたら解決した。swiperのドキュメントはこちら https://idangero.…

node dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.xxx.dylibエラー

node6がEOLになったのでnode8にあげてfastlaneでionicプロジェクトをビルドしようとしたら以下のエラー発生 dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib Referenced from: /usr/local/bin/node Reason: image not found (省略)…

ionic cordova-plugin-ionic-webviewプラグインでアプリインストール直後だけFileプラグインでのファイル処理が動作しなかった原因

誰にも必要とされないと思われる情報cordova-plugin-ionic-webviewプラグインのバージョンを2.4から4.01にバージョンアップした際になぜかアプリインストール直後だけファイルプラグインによるファイルの読み込みがうまくいかなかった。2回目の起動以降はう…

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のお決まりの作業を行わなくてはならないようだった。問題点は以下 ・手間がか…

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が実現…