中安拓也のブログ

プログラミングについて書くブログ。 Twitterやってます @takuya_nakayasu

Ionic

【ESLint】Angularのテンプレート(HTML)をチェックするESLintのカスタムルールを作成する

はじめに tappable属性とは? 環境 実装 package.json作成 tsconfig.json テストコード ESLintカスタムルール作成 index.ts作成 npmパッケージ公開 動作確認 参考サイト はじめに JavaScriptやTypeScriptではなく、HTMLをチェックするESLintのカスタムルール…

自作CordovaプラグインのIonic Nativeを作る

はじめに Ionic Nativeとは 環境 Ionic Native作成 Ionic Nativeのテンプレートを作成 プラグインラッパーの作成 動作確認 参考サイト はじめに 以前作ったCordovaプラグイン、cordova-plugin-cache-deleteのIonic Nativeを作ります。 Ionic Nativeとは Ioni…

自作Cordovaプラグインの戻り値をPromiseにする

はじめに 関連記事 cordova.execについて プラグインの改修 動作確認 参考サイト はじめに 今回は、以前自作したCordovaプラグイン、cordova-plugin-cache-deleteについて、引数に成功・失敗時のコールバック関数を受け取る形式から、コールバック関数を使わ…

初めてのCordovaプラグイン公開

はじめに Cordovaプラグイン公開 npmアカウント作成 npm adduserコマンド npm publishコマンド 動作確認 参考サイト はじめに 前回の記事でcordova-plugin-cache-deleteというCordovaプラグインを作成したので、他の開発者にも使いやすいようにこのプラグイ…

Webviewのキャッシュを削除するCordovaプラグインを作成しました

はじめに 関連記事 環境 Cordovaプラグイン作成 package.jsonの作成 plugin.xmlの作成 JavaScriptファイルの作成 ネイティブコード(Android)の作成 プラグインのテスト 参考サイト はじめに 情報漏洩の対策として、Webviewに格納されるキャッシュを削除するC…

【Ionic v5】スライドの枚数が多いSlidesのパフォーマンスを改善する

スライド画面 はじめに 環境 今回使用するサンプルアプリについて スライドのパフォーマンスを改善する方法 案1: バーチャルスライド 動作確認 案2: Lazy Loading(遅延読み込み) おわりに 参考サイト はじめに Ionicでモバイルアプリケーションを作成して…

【Ionic v5】Alert/Modal同士でz-indexを交換する

環境 Alert/Modal同士でz-indexを交換する Alert/Modalのz-indexを参照できるのはなぜか? おわりに 参考サイト 環境 TypeScriptベースのフレームワークであるAngularと、iOS/AndroidのハイブリッドモバイルアプリケーションのフレームワークであるIonicを使…

【RxJS】Subjectを使って好きなタイミングでデータを流す

はじめに 環境 アラート表示の実装 ObservableではなくSubjectが必要になるタイミング メンテナンスよりも強制バージョンアップのアラートを優先して表示する 動作確認 おまけ: どうしてSubjectにasObservableが必要なのか 参考 はじめに 今回は、前回の記事…

Angular + Firebase Realtime Databaseでメンテナンスと強制バージョンアップのポップアップを表示する

はじめに Firebaseが提供しているデータベースについて 環境 環境構築 補足 Realtime Databaseのデータ構造を構築する メンテナンスと強制バージョンアップのポップアップを表示する 動作確認 メンテナンスメッセージの表示 強制バージョンアップメッセージ…

【Angular(Ionic)】ダークカナリアリリースのモバイルアプリ側対応

はじめに ダークカナリアリリースとは ダークカナリアリリースのイメージ HTTPヘッダーの追加方針 モバイルアプリの環境 ビルドスクリプトの作成 インターセプターの作成 動作確認 参考サイト はじめに 最近、仕事でダークカナリアリリース対応を少しだけお…

【Cordova】【Android】 Webviewのキャッシュを消す

はじめに 環境 キャッシュファイルの確認方法 そもそもキャッシュを作らないという手もある キャッシュファイルの削除 カスタムプラグインの作成 動作確認 苦労した点 追記 参考サイト はじめに ハイブリッドアプリフレームワークである、Ionic(Cordova)を使…

【Ionic(Cordova)】GradleによるAndroidビルド時のリポジトリの参照先をNexusに変更する

はじめに 環境 Cordova フックスクリプトを作成する 参考記事 はじめに Ionic(Cordova/Angular)アプリのAndroidビルドに時間がかかりすぎているせいで、Jenkinsのビルドが不安定になるという問題が発生しました。 そのため、mavenリポジトリの参照先をMaven …

【Ionic v5】[個人開発]利用規約とプライバシーポリシー画面を作る

はじめに 環境 ログイン画面にリンクをつける 利用規約画面を作成する プライバシーポリシー画面を作成する 参考サイト はじめに Ionicで作成中の体重計アプリ「SpeedWeight」に利用規約とプライバシー画面を追加します。 環境 ハイブリットモバイルアプリ用…

【Ionic v5】ダークモードを無効にする

はじめに 環境 ダークテーマを無効にする 参考サイト はじめに ダークモード対応が面倒なので、Ionicがデフォルトで対応してくれているダークモードを解除したい。 外観モードをライトにした場合 外観モードをダークにした場合 環境 ハイブリットモバイルア…

Angular + Firebase でGoogle認証

はじめに 関連記事 環境 FirebaseコンソールでGoogle認証を有効にする Googleのログインボタン作成 Step1: Googleのロゴアイコンを取得 Step2: GoogleカラーをIonicに追加 Step3: ログインボタンのテンプレートを作成 Step4: リダイレクトモードでFirebase認…

【Ionic v5】[Shadow DOM]ボタンのレイアウトを変更する

はじめに Shadow DOMって? ボタンのレイアウトを変更する 参考サイト はじめに 本記事では、Ionic v5のボタンのレイアウトを変更します。Ionic v5のボタン(ion-button)ではShadow DOMが適用されているため、Shadow DOMでないコンポーネントと同様のやり方で…

【Angular】リダイレクトモードでFirebase認証を行う

はじめに 環境 リダイレクトモードでFirebase認証 ポップアップモードのFirebase認証 参考サイト はじめに FirebaseのSNS認証には、ポップアップウィンドウを表示するポップアップモードとログインページにリダイレクトするリダイレクトモードの2種類の形式…

【Ionic v5】Colorsに色を追加してボタンに適用する

はじめに 環境 配色の追加 Step1: レイヤードスタイルの作成 Step2: SCSSファイルにレイヤードスタイルを追加 Step3: ボタン作成 参考サイト はじめに Ionicには9つのデフォルトカラーがある Ionicにはprimary, secondary...といったように9つのデフォルトカ…

【Ionic v5】テーブル内でラジオボタンを使用する

テーブル内でラジオボタンを使用する はじめに 環境 通常のIonicのラジオボタン テーブルのセル内でion-radioを使用する 参考サイト はじめに テーブルのセル内でIonicのラジオボタンを使用する方法がわからず、手間取ってしまったため、メモとして残した。 …

webpackで「JavaScript heap out of memory」エラー

はじめに 環境 発生したエラー 対処法 参考サイト はじめに npm scriptsを使ってIonic(Angular/TypeScript)のAndroidビルドをしている時にFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryエラーが発生して処理が落ちて…

【障害メモ】[Ionic v3][Android]電話の発信と管理を許可しないとDevice Idを取得できない

障害内容 環境 原因 エラーが発生した箇所 対応方針 電話の発信と管理の許可についてのモーダル 障害内容 Ionic v3で作成されたAndroidアプリで、「電話の発信と管理を許可しますか?」と表示されるモーダルで「許可しない」を選択したユーザーの、端末識別I…

【障害メモ】[ionic-v3][iOS]ion-pickerとion-modalを両方開くとion-modalを閉じることができなくなる

はじめに 環境 発生した障害 原因 修正方法 まとめ 参考サイト はじめに クリックイベントが検知されないときって、ほかのDOM要素が覆っていないかとか、z-indexの設定とかしか気にしていなかったんですが、 posinter-events: noneが設定されていたせいでク…

【障害メモ】[ionic-v3][Android][input text]ワンタップでキーボードが出てこない・文章の途中にカーソルを合わせることができない

障害内容 環境 修正方法 参考サイト 障害内容 Ionic v3のAndroidアプリで、入力フォームを複数回タップしないとソフトキーボードが出てこなかったり、文章の途中に間違いがあってもカーソルをテキストの最後にしか移動できないから、全消ししないと誤った文…

【障害メモ】[cordova-plugin-keyboard][Android]ソフトウェアキーボードが入力フォームを覆い隠してしまう

障害内容 環境 修正方法 アプリを全画面表示にするのをやめる 参考サイト 障害内容 モバイル・タブレット端末のソフトウェアキーボードが、入力フォームの前面に表示されてしまうため、画面の下部にある入力フォームがキーボードに隠されて見えない。Android…

【障害メモ】[cordova-plugin-camera]縦向きに撮影した画像が横向きで表示される

障害内容 環境 修正方法 参考サイト 障害内容 cordova-plugin-cameraを使用して、端末の画像ライブラリから画像を選択したり、写真を撮影したりすると、画像の向きが縦から横に変わって表示される。Android端末のみで発生 環境 cordova (Cordova CLI) : 8.0.…

【Ionic】WebサイトからiOSアプリを開くリンク(「アプリで開く」ボタン)を実装する

仕事で「iPhone/iPad端末にアプリがインストールされてたら起動するリンク」(URL Scheme)を実装したのでメモ バージョン情報 実装した要件 実装 ライブラリのインストール AppComponentの改修 Webサイト側の設定 参考サイト バージョン情報 iOSアプリの作…

【Ionic(Angular)】Hammer.jsを使っている画面で垂直スクロールができなくなる問題

仕事中に遭遇した障害についてのメモ。iOS13(ベータ版)とAndroid 9で検知した。 発生事象 原因 対応 バージョン情報 参考サイト 発生事象 Ionic(Angular)のGestureを使ってピンチイン・ピンチアウトによるズームを有効にしている画面で、縦方向のスクロール…

【バグ対応メモ】[Ionic]iOS 12.2以降の端末でスクロールができなくなった

業務で作成したiOSアプリの障害についてのメモ 障害内容 iOS 12.2以降の端末でIonic v3.9.3で作成したiOSアプリを動かしたら、スクロールができなかった。 改修方法 Ionic v3.9.5以前のバージョンによるバグが原因の障害となる。ionic-angularのバージョンを…

【CSS】PCでもモバイルと同じレイアウトの画面で表示する(スマホのフレーム画像に画面をはめる)

今回やること PCからみると、スマホの枠の中にコンテンツが表示されるようなデザインの画面を作る。参考サイト(フィッシャーマン・コール) PCだとこーいう表示になる モバイルからだとこういう表示になる メリット PC用の画面デザインを用意せずに、スマホ用…

iOSのFace ID, Touch IDを使用したログイン機能を設計する

業務でFace ID, Touch IDを使ったログイン機能を実装することになったので色々と調べた。 作成予定のシステム Face ID, Touch IDに対する誤解について 処理詳細 初回ログイン Face ID, Touch IDによるログイン Appleのレビューガイドライン 考えた点・補足 …