中安拓也のブログ

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

Angular

【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)を使用し…

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

【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を使ってカウンターアプリを作ること…

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

【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みたいなメモアプリです。モバイル対応はまだできていないの…

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

Angular(SPA)でwindow.open()を使う

はじめに 環境 作ったもの 実装 ルーティング設定 親ウィンドウの実装 子ウィンドウの実装 データの受け渡しについて 参考サイト はじめに 仕事でAngularを使ってアプリケーションを作成している時に、window.open()で別ウィンドウを表示する要件があったの…

HTMLとCSSでマトリックス図を描く

はじめに 環境 マトリクス図の作成 CSSリセット マトリクス図の全コード 参考サイト 作成したマトリクス図 はじめに 仕事でCSSフレームワークを使わずにテーブルを作成する機会があったので、備忘録としてプライベートでもマトリクス図を作ってみました。 環…

Angular + Firebase でFacebook認証

はじめに 環境 Facebook for Developersアカウントを作成 アプリの登録 FirebaseコンソールでFacebook認証を有効にする 「Facebookでログイン」ボタンを作成する Facebook認証機能の実装 補足: Facebook認証を利用したアカウント登録機能の実装 参考サイト …

Angular + Firebase でTwitter認証

はじめに 環境 TwitterのAPIキーとAPIシークレットを取得する Twitter Developer アカウントの作成 アプリの登録 FirebaseコンソールでTwitter認証を有効にする 「Twitterでログイン」ボタンを作成する Twitter認証機能の実装 補足: Twitter認証を利用したア…

【IE11】PDFファイルを保存せずにそのまま開けるようにする

はじめに 環境 msSaveBlobからmsSaveOrOpenBlobに変更 参考サイト はじめに SPAアプリ上でIE11ブラウザを使ってPDFファイルを参照する場合に、PDFファイルをダウンロードせずにそのまま開いて参照したいとの要望をクライアントからいただいたため、ソースコ…