時系列が関係あるような機能の動作確認をする際に、現在日時を変更したくなるケースがありますが、OSの時間を変更するとちょっと怖いです。 ローカル端末上で実行中のアプリだけに日時を変更する方法を記載します。 フロントエンド React.jsやVue.jsなどで作っているWebアプリケーションの日時を変更したいです。 new Date() した際の日時を変更する mockdate というライブラリを使います。 まずは、ライプラリをインストールします。 npm install -D mockdate # or yarn add -D mockdate あとは、main.tsなど、アプリを起動する処理の直前に以下を指定します。 import MockDate from "mockdate"; MockDate.set("2022-06-29 19:30:00" Continue Reading
この記事では、Amplify SDK（JavaScript）を使い、Cognitoの認証機能を試してみたいと思います。 ただ、Amplify でアプリを作成したいわけではないので、amplify initなどは使わず、Amplify SDKだけを利用する形で検証してみたいと思います。 これができれば、既存のアプリにCognitoを組み込みたい場合にも都合が良さそうです。 登場人物 今回はホストされたUIは利用せず、UIを自作した上でAPIを直接呼び出して、サインアップ、サインインなどの処理を行います。 Cognito ユーザプール サインアップ画面 コード確認画面 サインイン画面 現在のセッション確認画面 パスワード変更画面 パスワード忘れ画面 ユーザプールを作成 AWSコンソール画面からユーザプールを作成します。 APIの検証が主目的なので、最もシンプルな構成にしようと思います。 1.サ Continue Reading
以前から husky と lint-staged を使ってコミット時にリンターを実行していたのですが、huskyのバージョンがv7に上がってから、設定方法が少し変わり、pakcage.jsonだけで完結しなくなったので、改めて設定方法を紹介します。 インストールと初期設定 自力でゼロから設定するのは結構難しいですが、huskyとlint-stagedをインストールして、サンプル初期設定を作成してくれる便利なコマンドが提供されていますので、これを実行します。 npx mrm@2 lint-staged 実行結果は以下の通りです。 package.jsonに以下が追加される huskyの初期化スクリプトを実行する設定が "scripts": { "prepare": "husky install" }, => npm insta Continue Reading
フロントエンドのアプリケーションを構築していて、リンターとフォーマッターをどのように設定するのがベストなのか自分なりに調査しました。 結論 まず最初に、自分がベストだと思う設定方針を書いておきます。 開発時 一般的なスタイルに関する問題 Prettier でフォーマットする ファイル保存時に自動フォーマットする 言語毎のコード構造に関する問題 JavaScript や TypeScript については ESLint で、CSS や SCSS については StyleLint でリント＆フォーマットする Prettier と競合するルールは無効化する エディター上でリント結果のワーニングやエラーを表示する ファイル保存時に自動フォーマットする コミット時 pre-commit のタイミングでリントを実行して、エラーならコミットできないようにする Prettier + ESLint + Styl Continue Reading
ちょっと雑ですが、npmパッケージのバージョンアップと脆弱性対応の方法をまとめました。これがベストかはわからないけど、一つのやり方として紹介します。 node: v14.15.1 npm: v8.1.3 yarn: v1.22.17 パッケージのバージョンアップ バージョンアップ必要なパッケージを調査 npm-check-updatesをインストール npm install -g npm-check-updates // or yarn add global npm-check-updates バージョンアップが必要なパッケージをリストアップ ncu > @nuxtjs/eslint-config 5.0.0 → 6.0.1 > @nuxtjs/eslint-config-typescript 3.0.0 → 6.0.1 > eslint 7.24.0 → 8.1.0 & Continue Reading
TypeScript を使って、 Node.js で DB アクセスするシンプルな Web アプリケーションを作ってみようと思います。 Node.js: v14.17.0 npm: 6.14.13 TypeScript: 4.3.2 express: 4.17.1 MariaDB: 10.5.10 事前準備 Node.js インストールと package.json 作成 以下のいずれかの方法で Node.js をインストールします。 公式サイト からインストーラーをダウンロードしてインストール nodebrew を使ってインストール（こちら を参考にさせていただくといいと思います） 次に、package.jsonを作成します。 npm init TypeScript インストールと tsconfig.json 作成 npm を使用して、TypeScript をインストールします。 npm Continue Reading
WordPressで作成しHTML化してFirebaseHostingしている本サイトに、HTMLとJavaScriptで以下のソーシャルボタンを追加しました。 はてなブックマーク はてなスター Pocket Twitter コードの埋め込み方法 WordPressなのでphpを直接修正しても良いのですが、どこを修正したか分からなくなりがちなので、Insert Headers And Footersというプラグインを使ってHTMLを埋め込むことにしました。 このプラグインは、<head>の最後・<body>の最初・<body>の最後、のいずれかの場所にHTMLコードを差し込むことができる、とてもシンプルなプラグインです。 これを使って、<body>の最後に取得したコードを埋め込みました。 はてなブックマーク https://b.hatena. Continue Reading
とある母集団文書に含まれる単語頻度を可視化する目的で、タグクラウドをブラウザ上でJavaScriptで作成できないかを調べました。 タグクラウド（ワードクラウド）とは WikiPedia には以下のように記載されています。 タグ・クラウド (tag cloud、 ワードクラウド 、またはビジュアルデザインの重み付きリスト ）はタグの視覚的記述を指す。テキストデータの斬新な視覚表現であり、通常はWebサイトでキーワードメタデータ（タグ）を描写したり、自由形式のテキストを視覚化するが、通常タグは単一の単語であり、各タグの重要性はフォントサイズまたは色で示される。 以下のようなやつです（画像もWikiPediaから拝借しました）。 文字の大きさや色から単語の重要度を視覚的に捉えることができます。 候補ライブラリ ある程度見た目が綺麗で、人気がありそうな物をピックアップしました。 amCharts Continue Reading
コロナの影響で、リモートでの勉強会が増えてきましたが、プレゼン中に反応が少なくて寂しいなぁと感じることがあります。 でも意外にチャットは盛り上がってることが多いので、画面共有しているブラウザ上にニコニコ動画風にメッセージをアニメーション表示する機能を作ってみることにしました。 やりたいこと プレゼンターが会議URLを発行する 参加者は会議URLからコメントを入力する プレゼンターのWebブラウザ上に、参加者のコメントがニコニコ動画風にアニメーション表示される アーキテクチャ 検討の結果、以下の技術を採用することにしました。 ブラウザ上でコメント常時受付（フロント、プレゼンター側） => WebSocket(socket.io) 任意のページ上にコメント表示（フロント、プレゼンター側） => ブックマークレット（良いものができたらChrome拡張化して公開） コメント常時受付（サ Continue Reading
reCAPTCHAはスパムやBOTなどからサイトを保護するためのもので、v2とv3があります。今回は自分がtypescriptで作っているフロントエンドアプリ（Chrome拡張）をBOTアクセスから保護する目的でreCAPTCHAのv2とv3の両方を同じ画面に導入しました。 v2とv3 v2はWEBサイトでみかけるやつで「この中から車が写っている画像を選んでください」みたいな感じで、ユーザ操作の結果でBOTアクセスなのかどうか（True/False）を返してくれます。 v3は、ユーザフリクション（本来の目的を妨げるような事象。）は一切なく、スコア（1が正常で、0.0に近づくほどBOTの可能性が高い）を返してくれます。 処理の流れ DBにアクセスする3つのアクション（Chrome拡張起動、保存ボタン、削除ボタン）の際にv3を使ってスコアを計算する フロントエンド（Chrome拡張のポップアッ Continue Reading
