はじめに 環境 インストール Fluroの使い方 ルーティングの初期設定 routeと遷移先画面の紐付け 値を渡さない場合の画面遷移 パラメーター付きrouteで遷移先画面に値を渡す オブジェクトを遷移先の画面に渡す 参考サイト はじめに Flutterのルーティングライ…

はじめに 基本的なプロバイダー設定 useExistingについて 使用例 カスタムエラーハンドラーを直接呼び出す 参考サイト はじめに あるDIトークンを別のDIトークンにマッピングすることができる、プロバイダーキーuseExistingについて説明します。 基本的なプ…

はじめに 環境 デフォルトのファイル名 Android Application Package（.apk）の場合 Android App Bundle（.aab）の場合 ファイル名の変更方法 Gradle経由でファイル名を変更する build-extras.gradleをコピーするCordovaフックスクリプトを作成する APKファ…

はじめに eslint-plugin-angular-file-namingの概要 使用例 環境 実装 カスタムルールのコード テストコード 参考サイト はじめに Angularプロジェクトで作成したファイル名がAngularコーディングスタイルガイドに沿っているかチェックするESLintのカスタム…

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

はじめに 環境 prepublishOnlyの設定 動作確認 参考サイト はじめに コンパイル後のJSファイル(distディレクトリ)がgit管理されてしまっている npmのライフサイクルスクリプトであるprepublishOnlyを使うことで、コンパイル後のJSファイルをgit管理下から除…

はじめに 環境 ESLintを動かしてみる ESLintのカスタムルール作成 package.json tsconfig.json カスタムルール作成 テストコード作成 index.ts作成 動作確認 npmパッケージ公開 参考サイト はじめに RegExp - JavaScript | MDN 上記サイトに記載されている通…

はじめに 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)を使…

はじめに コールバック関数のままだと困ること コールバック関数をasync/awaitに変換する 参考サイト はじめに 非同期型のコールバック関数（Callback function）にasync/awaitを利用する方法について説明します。使用言語はTypeScriptです。 コールバック関…

はじめに 環境 大文字に変換するディレクティブ 参考サイト はじめに 小文字で入力したアルファベットを大文字に変換するDirectiveを作成します。 環境 TypeScriptベースのフレームワークであるAngularを使用しています。 ng versionの実行結果 Angular CLI:…

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

はじめに サロゲートペアについて 環境 絵文字を正確にカウントできるライブラリ Validatorの作成 Directiveの作成 参考サイト はじめに 絵文字を使ってもバグらずに動くValidatorとDirectiveを作成します。 サロゲートペアについて サロゲートペアとは、2つ…

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

はじめに 関連記事 環境 Step1: FirebaseコンソールでGitHub認証を有効にする Step2: GitHubからクライアントIDとクライアントシークレットを取得する Step3: GitHubログインボタンのテンプレートを作成する Step4: リダイレクトモードでFirebase認証(GitHub…

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

はじめに 環境 TODOアプリ作成 Model EntityStore Query Service Component 実際にTODOアプリを動作させる 参考サイト はじめに 前回の記事に引き続き、状態管理ライブラリのAkitaについて学習していきます。今回は、AkitaのEntityStoreを使用して、TODOアプ…

はじめに Akitaって？ 環境 Akitaインストール カウンターアプリ作成 Store Query Service Component 次回の記事 参考サイト はじめに 仕事で状態管理ライブラリのAkitaを使うことになったので勉強のためにAngularとAkitaを使ってカウンターアプリを作ること…

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

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

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

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