Ionic
はじめに tappable属性とは？ 環境 実装 package.json作成 tsconfig.json テストコード ESLintカスタムルール作成 index.ts作成 npmパッケージ公開 動作確認 参考サイト はじめに JavaScriptやTypeScriptではなく、HTMLをチェックするESLintのカスタムルール…
はじめに Ionic Nativeとは 環境 Ionic Native作成 Ionic Nativeのテンプレートを作成 プラグインラッパーの作成 動作確認 参考サイト はじめに 以前作ったCordovaプラグイン、cordova-plugin-cache-deleteのIonic Nativeを作ります。 Ionic Nativeとは Ioni…
はじめに 関連記事 cordova.execについて プラグインの改修 動作確認 参考サイト はじめに 今回は、以前自作したCordovaプラグイン、cordova-plugin-cache-deleteについて、引数に成功・失敗時のコールバック関数を受け取る形式から、コールバック関数を使わ…
はじめに Cordovaプラグイン公開 npmアカウント作成 npm adduserコマンド npm publishコマンド 動作確認 参考サイト はじめに 前回の記事でcordova-plugin-cache-deleteというCordovaプラグインを作成したので、他の開発者にも使いやすいようにこのプラグイ…
はじめに 関連記事 環境 Cordovaプラグイン作成 package.jsonの作成 plugin.xmlの作成 JavaScriptファイルの作成 ネイティブコード(Android)の作成 プラグインのテスト 参考サイト はじめに 情報漏洩の対策として、Webviewに格納されるキャッシュを削除するC…
スライド画面 はじめに 環境 今回使用するサンプルアプリについて スライドのパフォーマンスを改善する方法 案1: バーチャルスライド 動作確認 案2: Lazy Loading（遅延読み込み） おわりに 参考サイト はじめに Ionicでモバイルアプリケーションを作成して…
環境 Alert/Modal同士でz-indexを交換する Alert/Modalのz-indexを参照できるのはなぜか？ おわりに 参考サイト 環境 TypeScriptベースのフレームワークであるAngularと、iOS/AndroidのハイブリッドモバイルアプリケーションのフレームワークであるIonicを使…
はじめに 環境 アラート表示の実装 ObservableではなくSubjectが必要になるタイミング メンテナンスよりも強制バージョンアップのアラートを優先して表示する 動作確認 おまけ: どうしてSubjectにasObservableが必要なのか 参考 はじめに 今回は、前回の記事…
はじめに Firebaseが提供しているデータベースについて 環境 環境構築 補足 Realtime Databaseのデータ構造を構築する メンテナンスと強制バージョンアップのポップアップを表示する 動作確認 メンテナンスメッセージの表示 強制バージョンアップメッセージ…
はじめに ダークカナリアリリースとは ダークカナリアリリースのイメージ HTTPヘッダーの追加方針 モバイルアプリの環境 ビルドスクリプトの作成 インターセプターの作成 動作確認 参考サイト はじめに 最近、仕事でダークカナリアリリース対応を少しだけお…
はじめに 環境 キャッシュファイルの確認方法 そもそもキャッシュを作らないという手もある キャッシュファイルの削除 カスタムプラグインの作成 動作確認 苦労した点 追記 参考サイト はじめに ハイブリッドアプリフレームワークである、Ionic(Cordova)を使…
はじめに 環境 Cordova フックスクリプトを作成する 参考記事 はじめに Ionic(Cordova/Angular)アプリのAndroidビルドに時間がかかりすぎているせいで、Jenkinsのビルドが不安定になるという問題が発生しました。 そのため、mavenリポジトリの参照先をMaven …
はじめに 環境 ログイン画面にリンクをつける 利用規約画面を作成する プライバシーポリシー画面を作成する 参考サイト はじめに Ionicで作成中の体重計アプリ「SpeedWeight」に利用規約とプライバシー画面を追加します。 環境 ハイブリットモバイルアプリ用…
![はてなブックマーク - 【Ionic v5】[個人開発]利用規約とプライバシーポリシー画面を作る](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2020/10/31/191911)
はじめに 環境 ダークテーマを無効にする 参考サイト はじめに ダークモード対応が面倒なので、Ionicがデフォルトで対応してくれているダークモードを解除したい。 外観モードをライトにした場合 外観モードをダークにした場合 環境 ハイブリットモバイルア…
はじめに 関連記事 環境 FirebaseコンソールでGoogle認証を有効にする Googleのログインボタン作成 Step1: Googleのロゴアイコンを取得 Step2: GoogleカラーをIonicに追加 Step3: ログインボタンのテンプレートを作成 Step4: リダイレクトモードでFirebase認…
はじめに Shadow DOMって？ ボタンのレイアウトを変更する 参考サイト はじめに 本記事では、Ionic v5のボタンのレイアウトを変更します。Ionic v5のボタン(ion-button)ではShadow DOMが適用されているため、Shadow DOMでないコンポーネントと同様のやり方で…
![はてなブックマーク - 【Ionic v5】[Shadow DOM]ボタンのレイアウトを変更する](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2020/10/04/200216)
はじめに 環境 リダイレクトモードでFirebase認証 ポップアップモードのFirebase認証 参考サイト はじめに FirebaseのSNS認証には、ポップアップウィンドウを表示するポップアップモードとログインページにリダイレクトするリダイレクトモードの2種類の形式…
はじめに 環境 配色の追加 Step1: レイヤードスタイルの作成 Step2: SCSSファイルにレイヤードスタイルを追加 Step3: ボタン作成 参考サイト はじめに Ionicには9つのデフォルトカラーがある Ionicにはprimary, secondary...といったように9つのデフォルトカ…
テーブル内でラジオボタンを使用する はじめに 環境 通常のIonicのラジオボタン テーブルのセル内でion-radioを使用する 参考サイト はじめに テーブルのセル内でIonicのラジオボタンを使用する方法がわからず、手間取ってしまったため、メモとして残した。 …
はじめに 環境 発生したエラー 対処法 参考サイト はじめに npm scriptsを使ってIonic(Angular/TypeScript)のAndroidビルドをしている時にFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryエラーが発生して処理が落ちて…
障害内容 環境 原因 エラーが発生した箇所 対応方針 電話の発信と管理の許可についてのモーダル 障害内容 Ionic v3で作成されたAndroidアプリで、「電話の発信と管理を許可しますか？」と表示されるモーダルで「許可しない」を選択したユーザーの、端末識別I…
![はてなブックマーク - 【障害メモ】[Ionic v3][Android]電話の発信と管理を許可しないとDevice Idを取得できない](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2020/02/22/215947)
はじめに 環境 発生した障害 原因 修正方法 まとめ 参考サイト はじめに クリックイベントが検知されないときって、ほかのDOM要素が覆っていないかとか、z-indexの設定とかしか気にしていなかったんですが、 posinter-events: noneが設定されていたせいでク…
![はてなブックマーク - 【障害メモ】[ionic-v3][iOS]ion-pickerとion-modalを両方開くとion-modalを閉じることができなくなる](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2020/01/28/220448)
障害内容 環境 修正方法 参考サイト 障害内容 Ionic v3のAndroidアプリで、入力フォームを複数回タップしないとソフトキーボードが出てこなかったり、文章の途中に間違いがあってもカーソルをテキストの最後にしか移動できないから、全消ししないと誤った文…
![はてなブックマーク - 【障害メモ】[ionic-v3][Android][input text]ワンタップでキーボードが出てこない・文章の途中にカーソルを合わせることができない](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2019/12/04/212732)
障害内容 環境 修正方法 アプリを全画面表示にするのをやめる 参考サイト 障害内容 モバイル・タブレット端末のソフトウェアキーボードが、入力フォームの前面に表示されてしまうため、画面の下部にある入力フォームがキーボードに隠されて見えない。Android…
![はてなブックマーク - 【障害メモ】[cordova-plugin-keyboard][Android]ソフトウェアキーボードが入力フォームを覆い隠してしまう](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2019/11/17/002049)
障害内容 環境 修正方法 参考サイト 障害内容 cordova-plugin-cameraを使用して、端末の画像ライブラリから画像を選択したり、写真を撮影したりすると、画像の向きが縦から横に変わって表示される。Android端末のみで発生 環境 cordova (Cordova CLI) : 8.0.…
![はてなブックマーク - 【障害メモ】[cordova-plugin-camera]縦向きに撮影した画像が横向きで表示される](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2019/11/16/213921)
仕事で「iPhone/iPad端末にアプリがインストールされてたら起動するリンク」（URL Scheme）を実装したのでメモ バージョン情報 実装した要件 実装 ライブラリのインストール AppComponentの改修 Webサイト側の設定 参考サイト バージョン情報 iOSアプリの作…
仕事中に遭遇した障害についてのメモ。iOS13(ベータ版)とAndroid 9で検知した。 発生事象 原因 対応 バージョン情報 参考サイト 発生事象 Ionic(Angular)のGestureを使ってピンチイン・ピンチアウトによるズームを有効にしている画面で、縦方向のスクロール…
業務で作成したiOSアプリの障害についてのメモ 障害内容 iOS 12.2以降の端末でIonic v3.9.3で作成したiOSアプリを動かしたら、スクロールができなかった。 改修方法 Ionic v3.9.5以前のバージョンによるバグが原因の障害となる。ionic-angularのバージョンを…
![はてなブックマーク - 【バグ対応メモ】[Ionic]iOS 12.2以降の端末でスクロールができなくなった](https://b.hatena.ne.jp/entry/image/https://www.l08084.com/entry/2019/06/23/202616)
今回やること PCからみると、スマホの枠の中にコンテンツが表示されるようなデザインの画面を作る。参考サイト(フィッシャーマン・コール) PCだとこーいう表示になる モバイルからだとこういう表示になる メリット PC用の画面デザインを用意せずに、スマホ用…
業務でFace ID, Touch IDを使ったログイン機能を実装することになったので色々と調べた。 作成予定のシステム Face ID, Touch IDに対する誤解について 処理詳細 初回ログイン Face ID, Touch IDによるログイン Appleのレビューガイドライン 考えた点・補足 …
