技術ナレッジ React アプリでカメラ撮影し画像データを取得する [react-webcam 使用]
React アプリ内でデバイスのカメラを操作し、撮影した画像データを取得するコードを紹介します。react-webcam というモジュールを使用しています。
React
技術ナレッジ 
その他 React で Chart.js のグラフサイズを自動リサイズする [MUI 使用]
Chart.js のグラフが画面の大きさによって自動リサイズする機能が期待通りに動かないケースがあっため、MUI を使用して代替機能を実現しました。
サーバレスアーキテクチャ React 18 で aws-amplify v5 と AWS Amplify UI v4 にアップグレードしてみた
AWS が提供している React 用モジュール aws-amplify と @aws-amplify/ui-react のアップグレードをした際の変更経験談を紹介します。
サーバレスアーキテクチャ AWS AppSync + Amazon DynamoDB + React で簡易チャット WEB アプリをつくる
AWS AppSync のプッシュ通知機能を活用して、簡易なチャット WEB アプリをつくってみましたので紹介します。主に AWS AppSync で必要になる GraphQL 周りのコード例です。
その他 Amazon S3 にある音声ファイルを React アプリ経由でダウンロードするボタンをつくる
音声ファイルをブラウザからダウンロードさせようとしても、ダウンロードではなくブラウザ上で自動再生されてしまいます。React アプリ画面内でダウンロードさせるコードを紹介します。
その他 React でテキストデータをクリップボードにコピーするボタンをつくる
WEB 画面内のテキストをクリップボードにコピーさせるボタン作成に数時間ハマったので、成功したコードを書き落とします。
その他 React アプリ内でファイル選択 UI から読み込んだ画像をすぐにプレビューする [MUI file input 使用]
多くのサイトでよく使われている機能なので特段珍しい内容ではありませんが、自分の備忘を兼ねてブログ化しておきたいと思います。
サーバレスアーキテクチャ AWS AppSync を使って React アプリからキックした非同期ジョブの結果をプッシュ通知で受け取る
非同期ジョブを実行した後、結果をどう受け取るか？というのは開発者として作り込み甲斐のあるテーマです。今回は React アプリが非同期ジョブを実行した後に、AWS AppSync 経由でジョブ完了のプッシュ通知を受け取る仕組みを紹介します。
その他 React アプリでファイル選択 UI をつくる [MUI file input 使用]
MUI file input というモジュールを使ってファイル選択 UI をつくってみました。
技術ナレッジ [React・MUI 学習用] 参考になったフリーの React アプリテンプレート紹介
私が React・MUI 学習時に参考にしたフリーの React コードテンプレートを紹介します。