L08084のブログ

技術記事の執筆は、祈りに近い

【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を使用したログイン機能を設計する - l08084のブログ という記事を書いたんだけど、実装してて辛かったり、そもそもセキュリティ的にマズそうだったので、色々と設計を変えた。 前回の設計 前回した設計なんですが、だ…

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

iOS端末(iPhone/iPad)のUDIDを確認する方法

Apple開発者アカウントにデバイスを登録するときに必要になる、デバイスID(UDID)の確認方法について バージョン情報 UDIDの確認方法 iTunesで調べる方法 Xcodeで調べる方法 参考サイト バージョン情報 MacBook Pro(15-inch, 2017) macOS High Sierra: 10.13.…

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

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

IonicアプリをGitHub Pagesで公開する

Ionic3を使って作成したアプリを、GitHub Pagesで公開する方法について バージョン情報 GitHub Pagesで公開する GitHubの設定を変更する Ionicアプリをビルドする 実際に参照してみる バージョン情報 ionic-angular@3.9.2 Angular@5.2.10 GitHub Pagesで公開…

Ionicで戻るボタンのラベルテキストを設定する

Ionicのヘッダーについている戻るボタンのテキストの設定方法について 参考サイト javascript - How to change the label from back button in Ionic 2? - Stack Overflow バージョン情報 ionic-angular@3.9.2 Angular@5.2.10 Google Chrome バージョン: 60.…

【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で、完成版のアプリを実際に操作することが…

【JavaScript】Ionicで架空のECアプリを作成する #2 - 商品リスト画面を作る

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

【JavaScript】Ionicで架空のECアプリを作成する #1 - 商品データを作る

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第1回目である今回は、商品(洋服)データを作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することができます http…

GitHubから通知が来た:依存関係の1つに潜在的なセキュリティ脆弱性があります

GitHubの通知欄にめずらしく(本当に)通知が来ていた。 Potential security vulnerability found in the ssri dependency 実際の通知画面はこんな感じ 通知をクリックして詳細を見ると、「./package-lock.jsonで定義されている依存関係には既知のセキュリテ…

仮想通貨取引所のAPIを使ってみる #3 - Private API にアクセスする

前回記事はこちら 仮想通貨取引所のbitFlyerのHTTP Private APIにアクセスして、自分の資産残高を取得する。 バージョン情報 今回アクセスするAPIは認証が必要 Private APIの認証 下準備 コード 動作確認 参考サイト バージョン情報 JavaScriptのフレームワ…

Angular Materialでログインフォームを作る

Angular Materialを使って、ログイン用のフォームを作ります Angular Materialのインストールから解説している記事はこちら バージョン情報 テンプレート駆動型とモデル駆動型 NgModuleの設定 index.htmlにアイコンのCDNを追加 ログインフォームを作る 参考…

【Angular】エラー: Can't bind to 'ngModel' since it isn't a known property of 'input'.

Angularでフォームを書いていたら、Can't bind to 'ngModel' since it isn't a known property of 'input'.というエラーに遭遇した バージョン情報 エラー原因 参考サイト バージョン情報 Angular: 5.2.9 Node: 8.1.4 エラー原因 formControlを使っているの…