中安拓也のブログ

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

【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 - 中安拓也…

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

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

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

【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のフレームワーク…

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

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

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

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

アカウント登録メールの実装をしています

アカウント登録メールの例 はじめに Webサービスで会員登録の情報を入力した後に、メールアドレス確認のメールが飛んでくるサービスよくありますよね。 あれの実装をいま仕事でしています。よくある機能だと思うので、実装方針を備忘録として記録しました。 …

【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する処理を書か…

HTMLメールのCSSなどレイアウト設定について

はじめに 最近仕事でHTMLメールのレイアウトを設定する機会があったので、HTMLメールを作成するときの注意点や参考サイトなどをまとめました ベースになるテンプレート HTMLメールを作るのが初めての人は、そもそもHTMLメールのHTMLってどう書けばいいの?っ…

【HTML】押すと電話がかかるボタンを作る

はじめに 押すと、電話がかかるボタンを作りたい TELリンクを使う a要素にhref="tel:[電話番号]"を設定すると、電話発信用のリンクを作ることができる。 <a href="tel:090XXXXXXXX">電話をかける(090XXXXXXXX)</a> 実際の表示 TELリンクをボタン風に表示する TELリンクを設定したa要素(アン…

【Java8】年月日の計算が簡単にできる Date and Time APIについて

新卒ぶりくらいにJavaを触ったら、日時の計算が楽にできるようになってて驚いた この記事について Date and Time API 日付・時間・日時をそれぞれ別クラスで扱う コード 現在の日付、時間、日時の取得 StringからLocalDateに変換 LocalDateからStringに変換 …

【CSS】PCでもモバイルと同じレイアウトの画面で表示する(スマホのフレーム画像に画面をはめる)

今回やること PCからみると、スマホの枠の中にコンテンツが表示されるようなデザインの画面を作る。参考サイト(フィッシャーマン・コール) PCだとこーいう表示になる モバイルからだとこういう表示になる メリット PC用の画面デザインを用意せずに、スマホ用…

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

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

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

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

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

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

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…