AngularでFirebase認証(その１) Firebaseのセットアップ - L08084のブログ AngularでFirebase認証(その２) Angular Materialを使ったログイン画面の作成 - L08084のブログ AngularでFirebase認証(その3) Firebase Authentication の呼び出し - L08084のブロ…

Angular + Firebase でアカウント登録画面の作成

仕事中に遭遇した障害についてのメモ。iOS13(ベータ版)とAndroid 9で検知した。 発生事象 原因 対応 バージョン情報 参考サイト 発生事象 Ionic(Angular)のGestureを使ってピンチイン・ピンチアウトによるズームを有効にしている画面で、縦方向のスクロール…

【Ionic(Angular)】Hammer.jsを使っている画面で垂直スクロールができなくなる問題

前回の記事はこちら 引き続き、AngularとFirebaseを使って認証機能を作成していきます。 前回はログイン画面の見た目を作成したので、今回はそのログイン画面にFirebase Authenticationを使って認証機能を導入していきます。 テストアカウントの作成 認証機…

AngularでFirebase認証(その3) Firebase Authentication の呼び出し

前回の記事はこちら 引き続き、AngularとFirebaseを使って認証機能を作成していきます。 前回ではFirebaseコンソールで認証機能を有効化したあと、AngularプロジェクトにAngularFireをインストールするところまで実施しました。 今回の記事では、AppModuleの…

AngularでFirebase認証(その２) Angular Materialを使ったログイン画面の作成

Angularのルーティング設定モジュールを作成中に下記のエラーが発生した Error: Invalid configuration of route '/home': path cannot start with a slash at validateNode (router.js:613) at validateConfig (router.js:577) at Router.push../node_modul…

【Angular】[障害メモ]Error: Invalid configuration of route path cannot start with a slash

Angularにメールアドレスとパスワードを使用するFirebase認証を実装していきます。 Firebaseのセットアップ Angularプロジェクトのセットアップ バージョン情報 参考サイト Firebaseのセットアップ 自分のGoogleアカウントでFirebaseの管理画面にログインし…

AngularでFirebase認証(その１) Firebaseのセットアップ

障害対応でAngularのChange Detectionをコントロールするクラス(ChangeDetectorRef)を使用する機会があったのでメモ 発生した障害 対応内容 終わりに バージョン 参考サイト 発生した障害 クリックでインクリメントする値と複数のngIfを組み合わせて、アプリ…

Angularがデータの変更を検知してくれないのでChange Detectionを呼ぶ

業務で作成したiOSアプリの障害についてのメモ 障害内容 iOS 12.2以降の端末でIonic v3.9.3で作成したiOSアプリを動かしたら、スクロールができなかった。 改修方法 Ionic v3.9.5以前のバージョンによるバグが原因の障害となる。ionic-angularのバージョンを…

【バグ対応メモ】[Ionic]iOS 12.2以降の端末でスクロールができなくなった

はじめに バージョン情報 そもそもどうやってデプロイしたのか？ 結局どうしたのか？ はじめに Angularで作成したサイト(GitHub Pagesにデプロイ)を、更新したくなった時はどうすればいいんだろう？私、わかりません...という記事です。ググるなり Stack Ove…

【Angular】GitHub Pagesの更新方法がわからない

はじめに 使用ライブラリ・言語のバージョン情報 「モールス信号 翻訳」の機能 実装 ディレクトリ構成 コンポーネントの構成 ルートコンポーネントの実装 input コンポーネントの実装 convert サービスクラスの実装 share-buttonコンポーネントの実装 デプロ…

【JavaScript】Angularでモールス信号を翻訳するWebサイトを作成した

はじめに 参考サイト バージョン情報 環境構築 開発 ディレクトリ構成 コード おわりに はじめに AngularでFluxを実現するために採用されるライブラリについては、NgRxがデファクトスタンダードになりつつあるのではないか.....という話を結構前に聞いたので…

【Angular】NgRx入門

はじめに バージョン 学習メモ ライフサイクル パイプ フォーム HTTPClient Service WorkerとPWA バージョニング チートシート あとがき はじめに 日本語翻訳していただいた全ての人々に感謝....... angular.jp バージョン v.7.2.0時点のドキュメント 学習メ…

Angular公式ドキュメント(翻訳されている部分は)全部読む

はじめに 引用元の記事 試しに触ってみる 実装 バージョン情報 質問フォーム作成 回答を表示するコンポーネントを作成する 動作確認 あとがき はじめに Vue.jsの公式ドキュメントに、質問するとユーザーの代わりにYES or NOの意思決定を行ってくれるWebAPI(Y…

【Angular】シャイニングブルートウキョウでは、プログラムがあなたを条件分岐する！！

はじめに アプリケーションを作る上で避けられない、ボタンの連続クリック防止機能を今回は作成します。この機能がないと同じメールが2通飛んだりデータベースにレコードが重複してINSERTされてしまうかも...... バージョン情報 JavaScriptのフレームワーク…

【Angular】 ボタンの連打を防止するディレクティブを作る(連続クリック・二重送信の禁止)

パスワード・確認用パスワード入力フォームの例 はじめに アカウント登録画面を作っていて出現頻度が著しく高い項目といえば............そう！パスワードの入力フォームですね。というわけで今回は、パスワードと確認用パスワードが一致しているか確認する…

【Angular】複数項目にまたがるカスタムバリデーションを作る（パスワード・確認用パスワードなど）

はじめに アカウント登録画面でよく見る姓と名の入力欄について、フォームが二つに別れているパターンと、フォームが一つになっていてスペースで姓と名を区切るパターンの二つがあると思います。 今回は後者を採用した場合に必要になるバリデーションについ…

【JavaScript】文字列の間に空白(スペース)が入力されているか確認する（氏名などのバリデーション）

モチベーション 強力そうだけどいまいち使いこなせていない関数筆頭のArray.prototype.reduce()について、ちゃんと習得したいという思い バージョン情報 Angular: 6.0.3 Typescript: 2.7.2 今回やること 下記のオブジェクトの配列から、reduce()を使って値が…

【JavaScript】reduceを使ってオブジェクトの配列から一番大きいIDを取得する

はじめに 以前、iOSのFace ID, Touch IDを使用したログイン機能を設計する - l08084のブログ という記事を書いたんだけど、実装してて辛かったり、そもそもセキュリティ的にマズそうだったので、色々と設計を変えた。 前回の設計 前回した設計なんですが、だ…

iOSのFace ID, Touch IDを使用したログイン機能を設計する - Part2

戻り値がPromiseのメソッドを順番に実行し、前の処理の結果を次の処理で使いたいという場合があります。そんな時は、Promise チェーンを使いましょう。 バージョン情報 Angular: 5.0.1 TypeScript: 2.4.2 サンプルコード 下記のコードは、iOSのFace ID/Touch…

【JavaScript】Promise チェーンで、戻り値がPromiseのメソッドをつなぐ

バージョン情報 Angular: 5.0.1 エラー内容 AサービスクラスにBサービスクラスをDI、BサービスクラスにAサービスクラスをDI みたいなこと（循環参照状態）をしていた結果、タイトルのエラーが発生 Uncaught Error: Can't resolve all parameters for XXXServ…

【Angular】お互いにDIしあっている（循環参照）と発生するエラー「Uncaught Error: Can't resolve all parameters for XXXService: (?, [object Object], [object Object]).」

業務でFace ID, Touch IDを使ったログイン機能を実装することになったので色々と調べた。 作成予定のシステム Face ID, Touch IDに対する誤解について 処理詳細 初回ログイン Face ID, Touch IDによるログイン Appleのレビューガイドライン 考えた点・補足 …

iOSのFace ID, Touch IDを使用したログイン機能を設計する

モチベーション 業務でFace ID, Touch ID対応のiOSアプリを作成することになったので、触っておきたい。 バージョン情報 Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています ioni…

IonicでiOSの生体認証(Face ID, Touch ID)を扱う

Xcodeで実機ビルドをしたタイミングで、下記のエラーが発生した。 Showing All Messages clang: error: linker command failed with exit code 1 (use -v to see invocation) バージョン情報 Xcode: 9.3 cordova-plugin-touch-id: 3.3.1 原因 cordova-plugin…

【メモ】Xcodeでエラー「Showing All Messages clang: error: linker command failed with exit code 1 (use -v to see invocation)」

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していました。 最低限の機能は、実装できたかな？というところまで来たので、今回で一旦完成ということにします。 下記のURL…

【JavaScript】Ionicで架空のECアプリを作成する #10 - 完成

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。 第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変…

【JavaScript】Ionicで架空のECアプリを作成する #9 - スワイプするとボタンが表示されるリスト

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成します。 第8回目である今回は、ショッピングカート画面のヘッダーに「空にする」ボタンをつけます デモ こちらのURLで、完成…

【JavaScript】Ionicで架空のECアプリを作成する #8 - ヘッダーにボタンをつける

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第7回目である今回は、同じ商品を二つ買った場合でも、まとめて表示されない問題について解決します。 デモ こちらのU…

【JavaScript】Ionicで架空のECアプリを作成する #7 - 同じ商品を買った場合は、まとめて表示したい

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第6回目である今回は、カートアイコンにショッピングカート内の商品数を表示するバッジをつけるところまで デモ こち…

【JavaScript】Ionicで架空のECアプリを作成する #6 - タブバーのアイコンにバッジをつける

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第5回目である今回は、カート画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することがで…

【JavaScript】Ionicで架空のECアプリを作成する #5 - カート画面を作る（後編）

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第4回目である今回は、ショッピングカートに商品を追加する処理の実装まで デモ こちらのURLで、完成版のアプリを実際…

【JavaScript】Ionicで架空のECアプリを作成する #4 - カート画面を作る（前編）