中安拓也のブログ

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

JavaScript

【Cordova】[Android] APK/AABのファイル名を変更する

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

【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…

自作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でモバイルアプリケーションを作成して…

【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:…

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

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

【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がデフォルトで対応してくれているダークモードを解除したい。 外観モードをライトにした場合 外観モードをダークにした場合 環境 ハイブリットモバイルア…

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

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

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

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

【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…

Angular + Firebase でメモアプリを作りました

作ったメモアプリ。名前はスリーメモ はじめに スリーメモの機能 SNS認証 フォルダ スリーメモで使われている技術 はじめに Firebaseの勉強のためにスリーメモというアプリを作りました。Evernoteみたいなメモアプリです。モバイル対応はまだできていないの…

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

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

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

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

【Angular】クロスフィールドバリデーションを使用した時にフォーム全体をエラーにする

はじめに 環境 やりたいこと バリデーションの実装 HTMLテンプレート コンポーネントクラス カスタムバリデーター 参考サイト はじめに Angularでクロスフィールドバリデーション(複数項目にまたがるバリデーション )を使った時に、フォーム全体をエラーに…

【Angular】自作コンポーネントにngModelを使用する

はじめに 環境 今回作るもの 分数入力コンポーネントの実装 参考サイト はじめに 自作コンポーネントで双方向バインディング機能(ngModel)を使えるようにしたい。 環境 CSSフレームワークとしてAngular Materialを使用しています Angular: 8.2.14 Node: 12.1…

window.open()で開いたウィンドウにデータを渡す

はじめに 環境 今回やりたいこと ウィンドウにデータを渡す二つの方法 1. ローカルストレージを用いる方法 2. window.postMessage()を用いる方法 ウィンドウにデータを渡す実装 ローカルストレージを採用した場合 親ウィンドウの実装 子ウィンドウの実装 win…