L08084のブログ

技術記事の執筆は祈りに似ている

【Angular】オブジェクトの中身を表示する JSON パイプ

「TypeScript(Angular)でオブジェクトの中身を画面に表示したいのに[object Object]って表示される。どうしたらいい?」みたいな質問を仕事中に受けたのでメモ。 オブジェクトをJSON文字列に変換する バージョン情報 オブジェクトをJSON文字列に変換する 質…

【iPhone】Touch IDで表示されるダイアログのスクショをとる

iPhoneのTouch IDで表示されるダイアログって、ホームボタンに触ると消えてしまうので、いつものやり方だとスクショが取れない.... こんな時のために(?)、ホームボタンと電源ボタンの同時押し以外でスクリーンショットを撮る方法について整理します バージ…

Angular Materialでサイドメニューを作る

初期状態 上記画像の画面に、Angular Materialを使ってサイドメニューを追加します。 前提 バージョン情報 開発 AppModuleの設定 サイドメニューの雛形を作成 ナビゲーション(メニュー)の表示 参考サイト 前提 下記の対応についてはすでに完了しているものと…

【Angular】Guardで認証されていないアカウントをブロックする

やりたいこと 前提 Guardを作成する ログインしてないアカウントをホーム画面に入れない ログイン済みのアカウントをログイン画面に入れない 動作確認 未ログインのアカウントをホーム画面に遷移させない ログイン済のアカウントをログイン画面に遷移させな…

【Angular】Firebase認証からログアウトする

AngularとFirebaseを使ったログイン処理については、下記の記事ですでに実装済みのため、今回はログアウト処理を実装していきます。 関連記事 バージョン情報 実装 ヘッダーにログアウトボタンをつける ログアウト処理を実装する 動作確認 関連記事 Angular…

【Angular】HttpInterceptorを使ってスピナーを表示する

スピナーが表示されている様子 はじめに バージョン情報 開発 AppModuleの設定 スピナーコンポーネントの作成 スピナーサービスの作成 インターセプターの作成 AppModuleの設定 動作確認 HttpClientによるHTTPリクエスト HttpClientを使わない場合 参考サイ…

【Python】楽天カードの利用明細をダウンロードする

前回の記事 バージョン情報 楽天カードの利用明細をダウンロードする 苦労した点 参考サイト 前回の記事 www.l08084.com 前回に引き続き、クレジットカードの利用明細のダウンロードをしていきます。 前回は、UIテスト自動化ツールのSeleniumuとChrome Drive…

【Git】既存のリポジトリから別のリポジトリを作成する

一瞬forkかなと思ったけどforkだとcommit履歴も持ってきちゃうし... やりたいこと バージョン情報 やってみる やりたいこと リポジトリAをベースにリポジトリBを作成したい commit履歴は引き継ぎたくない 開発ブランチも引き継ぎたくない バージョン情報 使…

【Ionic】WebサイトからiOSアプリを開くリンク(「アプリで開く」ボタン)を実装する

仕事で「iPhone/iPad端末にアプリがインストールされてたら起動するリンク」(URL Scheme)を実装したのでメモ バージョン情報 実装した要件 実装 ライブラリのインストール AppComponentの改修 Webサイト側の設定 参考サイト バージョン情報 iOSアプリの作…

【Python】[Selenium]クレジットカードの利用明細をダウンロードする

Pythonを練習しようパート1 Pythonの入門書を読んでから数ヶ月...全くパイソンを書かない日々が続いたので、勉強がてらクレジットカード利用明細のダウンロードをやってみました 出典 バージョン情報 SeleniumとChromeDriverのインストール テストプログラ…

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

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

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

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

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

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

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

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

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

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でFirebase認証(その1) Firebaseのセットアップ

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

【Git】別々のリポジトリ間でmergeを実行する

リポジトリ間でブランチをマージできるということを知らなかったので...メモ リモートリポジトリとして追加してあげるだけでいいんですね 別のリポジトリにマージするときのコマンド 本記事では、例として下記の条件でマージを実施します Gitリポジトリ http…

【ミラーリング】iPhoneの画面をPCのディスプレイで表示する

画面ミラーリングのやり方を知っていると、iOSアプリのプレゼンをする時とかに大きいディスプレイでできて便利です。 ミラーリングの手順 バージョン情報 注意点 ミラーリングの手順 iPhoneの画面を表示したいPCにミラーリングソフトをインストールします。 …

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

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

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

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

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

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

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

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

【Git】SouceTreeでpushが失敗する「hint: Updates were rejected because the tag already exists in the remote.」

SourceTreeでgit pushを実行した時に下記のようなメッセージが表示されて失敗した。 git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks -c credential.helper= -c credential.helper="C:/Users/XXX/AppData/Local/ATLASS~1/SOU…

【Angular】NgRx入門

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

【Python3】特徴的だと思った機能まとめ その4

引き続き、『入門 Python 3』を読んでいて印象に残った箇所をメモに残していく 前回の記事 バージョン情報 出典元 学習メモ \による長い行の分割 内包表記 リスト内包表記 辞書内包表記 前回の記事 【Python3】特徴的だと思った機能まとめ その3 - L08084の…

【Python3】特徴的だと思った機能まとめ その3

引き続き、面白いな〜と思った機能をまとめていく(2) 前回の記事 バージョン情報 出典元 学習メモ del文によるリストや辞書の削除 inを使った値の有無のテスト タプル 次回の記事 前回の記事 【Python3】特徴的だと思った機能まとめ その2 - L08084のブ…

【Python3】特徴的だと思った機能まとめ その2

引き続き、面白いな〜と思った機能をまとめていく 前回の記事 バージョン情報 出典元 学習メモ 文字列操作関数の種類が豊富(isalnum(), title(), capitalize(), center(), ljust(), rjust()) 文字列が英数字のみか判定するisalnum() 文字列の単語の頭文字…

【Python3】特徴的だと思った機能まとめ その1

はじめに バージョン情報 出典元 学習メモ 算術演算子(//)による切り捨て除算 intの制限の最大値が任意の数 スライス([start:end:step])による部分文字列の取得 次回の記事 はじめに 仕事では主にTypeScript(JavaScript)とJavaしか使用していないんですが、…

【Docker入門】とりあえずDockerでWebサーバ(Nginx)を動かしてみる

はじめに バージョン情報 インストール Nginxの起動と停止 参考記事 はじめに 職場の開発環境構築を自動化したいのでDockerの勉強を始めました。今回はDocker for MacのインストールからDockerを使用したNginxの起動までをやります。 バージョン情報 macOS H…

【Vue.js入門】Angularのツアー・オブ・ヒーローズチュートリアルをVueで作成する

はじめに ツアー・オブ・ヒーローズチュートリアルとは? バージョン情報 開発 環境構築 axiosをインストールする vue-routerをインストールする lodashのインストール 完成後のコード エントリファイル ルートコンポーネント ルーティング設定ファイル Stor…