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

はじめに 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プラグイン作成 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ヘッダーの追加方針 モバイルアプリの環境 ビルドスクリプトの作成 インターセプターの作成 動作確認 参考サイト はじめに 最近、仕事でダークカナリアリリース対応を少しだけお…

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

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

はじめに サロゲートペアについて 環境 絵文字を正確にカウントできるライブラリ 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を使ってカウンターアプリを作ること…

はじめに 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つのデフォルトカ…

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

はじめに 「B - Lucas Number」 とは 間違った回答 C++での正しい回答 TypeScriptでの正しい回答 参考サイト はじめに 競技プログラミングする前にC++の勉強しよ〜〜と思ってC++入門 AtCoder Programming Guide for beginners (APG4b)をやっていたんですが、…

はじめに AtCoderのTypeScriptの対応状況 標準入力をどうやるか 実際に問題を解いてみる 参考サイト はじめに 仕事でいつも使っているTypeScriptを競技プログラミング(AtCoder)でも使う方法について調べました。 AtCoderのTypeScriptの対応状況 AtCoderはTyp…

はじめに 環境 実装 参考サイト はじめに AngularのngClass(テンプレート内でclass属性を動的に変更する機能)で三項演算子を使う方法を説明します。 <div class="block" [ngClass]="isRed ? 'red' : 'blue'"></div> 環境 Angular: 8.2.14 実装 isRed が true の時は赤色になる ngClassで三項演算子を使う方法について説明…

はじめに 前提条件 環境 デプロイ準備 アプリケーションを本番ビルドする デプロイ実施 参考サイト はじめに AngularとFirebaseを使って作成したアプリをFirebaseのHostingという機能を使ってデプロイします。 前提条件 Angularプロジェクトは作成ずみ Fires…

はじめに 環境 本事象が発生した原因 参考サイト はじめに TypeScriptを使用し、配列に配列の 要素数 + 1 の数値を代入するメソッドを３回呼んだところ、配列が[1, 2, 3]ではなく、[empty, 1, empty, 3, empty, 5]になってしまった。 本事象が発生した誤った…

はじめに 環境 ログイン中のアカウントの情報を表示する 認証のサービスクラスを作成する ヘッダーにアカウントの情報を表示する HTMLテンプレート コンポーネントクラス 参考サイト ログイン中のアカウントの情報を表示している はじめに ログインしている…