中安拓也のブログ

プログラミングについて書くブログ

Typescript

【Angular】useExistingで一つのサービスインスタンスに複数のDIトークンを紐づける

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

【ESLint】Angularのファイル名の命名規則をチェックするESLintのカスタムルールを作成した

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

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

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

【TypeScript】npmパッケージでコンパイル後のJSファイルをgit管理の対象外にする

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

【TypeScript】正規表現の後読み(lookbehind assertions)を禁止するESLintのカスタムルールを作成する

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

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

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

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

【TypeScript】非同期コールバック関数にasync/awaitを利用する

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

【Angular】小文字を大文字に変換するDirective

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

【Angular】サロゲートペア(絵文字など)でもカウントできるValidator/Directiveの作成

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

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

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

Angular + Firebase でGitHub認証

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

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

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

【Angular】Akita学習(2) - TODOアプリ作成

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

【Angular】Akita学習(1) - カウンターアプリ作成

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

【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のラジオボタンを使用する方法がわからず、手間取ってしまったため、メモとして残した。 …

【競プロ】[C++/TypeScript]B - Lucas Numberが解けない

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

【競プロ】TypeScriptでAtCoderをやる

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

【Angular】ngClassで三項演算子を使う

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

【Angular + Firebase】アプリケーションをデプロイする

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

【JavaScript】[バグ]配列にemptyという要素が挿入されてしまう

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

【Angular + Firebase】ログイン中のアカウントの情報を表示する

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