中安拓也のブログ

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

JavaScript

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

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

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

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

webpackで「JavaScript heap out of memory」エラー

はじめに 環境 発生したエラー 対処法 参考サイト はじめに npm scriptsを使ってIonic(Angular/TypeScript)のAndroidビルドをしている時にFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryエラーが発生して処理が落ちて…

【TypeScript】Promiseをasync/awaitに書き直す

はじめに 環境 実践 例1: Promiseが値を返さないパターン Before: Promiseで書かれた処理 After: async/awaitに書き直した処理 例2: Promiseが値を返すパターン Before: Promiseで書かれた処理 After: async/awaitに書き直した処理 参考サイト はじめに 非…

【障害メモ】[Angular CLI]Invalid rule result: Instance of class Promise.

発生した障害 障害が発生した環境 障害の改修手順 Angular CLIの最新版をインストール Node.jsのバージョン10.9以上をインストール 動作確認 参考サイト 発生した障害 Angular v8のプロジェクトでAngular CLIのng generateコマンドを使用してコンポーネント…

Angularで入れ子(ネスト)のルーティング

やりたいこと 一つ目のルーティング基点 二つ目のルーティング基点 参考サイト やりたいこと <router-outlet>をふたつ設置することで、ホーム画面にサイドメニューを作成します。 一つ目の<router-outlet>では、URLに応じて、ログイン画面・アカウント登録画面などを表示し、二つ目の<router-outlet>をホー</router-outlet></router-outlet></router-outlet>…

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

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

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

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

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

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

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

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

【JavaScript】window.open()で開かれるウィンドウがタブではなく新規ウィンドウで開かれるようにしたい(IE11)

はじめに 環境 調査 調査結果 ブラウザ設定方法 はじめに アプリでリンク先の画像を開くとタブで開かれてしまうから、プログラム(JavaScript)で制御して常に新しいウィンドウで開かれるようにしてほしいとの依頼があったので、やり方を調べた なお、リンク先…

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

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

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

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

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

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

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

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

【Vue.js】Nuxt.jsのひな形を作成する

Nuxt.jsに入門したいので、ひな形の作成からはじめました。 バージョン情報 npm 5.6.0 yarn 1.5.1 手順 ターミナルを開いて、下記のコマンド実行する。 $ npm i -g @vue/cli @vue/cli-init Vue CLIが正しくインストールされていることを確認する。 $ vue -V …

【JavaScript】return なしでもPromiseはメソッドチェーンできる

はじめに Promiseチェーンの色々な例 returnなし returnあり 数値を伝搬するPromiseチェーン Promiseを伝搬するPromiseチェーン 結論 参考サイト はじめに then関数に新しいPromiseオブジェクトを返す機能があるので、then内でPromiseをreturnする処理を書か…

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

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

Express(Node.js) + SQLite でパパッとブログを作る

パパッとは作れてないです。 はじめに バージョン情報 1.アプリのひな形を作る 2. SQLiteのインストール 3. SQLiteのGUIツールもインストール 4. データベースを設計する 5.コードを書く 5-1. 記事の投稿画面を作る 5-2. 記事の閲覧画面(ホーム画面)を作る 6…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【JavaScript】Ionicで架空のECアプリを作成する #3 - 商品詳細画面を作る

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