はじめに
勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。
個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。
↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした
【Day3】まずはフロントだけ開発環境を構築する
【Day4】バックエンドの開発環境を整えつつ、マルチコンテナ対応のDevcontainerにする
【Day5】お試し実装！ファイルをアップロードしてバックエンドで処理する
【Day6】Docker Desktopが起動しなくなり泣きながら原因調査する
【Day7】画像にフレームとExif情報を付けてみる
【Day8】フロントに表示する画像のサイズを小さくする
【Day9】フロントエンドとバックエンドをそれぞれデプロイする
【Day10】結局コンテナ1つで開発する方が楽かもしれない
【Day11】アプリが一通り完成！！
【Day12】FastAPIのコードをリファクタリングする
【Day13】機能実装！フレームに記載するExif情報を編集できるようにする（前編）
【Day14】ReactのリファクタリングとUI変更を同時にやった
【Day15】機能実装！フレームに記載するExif情報を編集できるようにする（後編）
前回やったこと
追加機能として、画像のアップロード前にExif情報を手入力できる機能を実装しました！
実はまだ入力値のバリデーションなどなど不完全なのは内緒！！
今回やったこと
次は画像のExif情報から自動的にインスタ用のキャプションを作成する機能を実装します！
今回はその先駆けとして、まずはフロント側にキャプションを表示させるエリアを作成しました。
キャプション表示エリア
こんな感じで画像の下に表示させてます！
そんでもって、今回のこだわりポイントはコピーボタンを押下するとポップアップとともに自動的にクリップボードにキャプションがコピーされることです！！
ポップアップを出す方法
今回はReactのreact-toastifyというライブラリを使用しました。
まずはApp.tsxにToastContainerを追加します。このときにどういうポップアップを出すかの設定もできます。
import "./App.css";
import ImageUploader from "./features/imageUploader/components/ImageUploader";
import Titel from "./components/Title";
import Viewer from "./features/imageUploader/components/ResultArea";
import { useState } from "react";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
function App() {
const [processedImage, setProcessedImage] = useState<string | null>(null);
const [statusMessage, setStatusMessage] = useState<string | null>("");
return (
<>
<div className="app-container">
<ToastContainer
position="top-center"
autoClose={1000}
hideProgressBar
newestOnTop
closeOnClick
pauseOnHover
draggable
/>
<Titel />
<ImageUploader
setProcessedImage={setProcessedImage}
setStatusMessage={setStatusMessage}
/>
<Viewer statusMessage={statusMessage} processedImage={processedImage} />
</div>
</>
);
}
export default App;
その後、このコピーボタンのクリック時に実行される関数内でtoast.success("キャプションをコピーしました！");のように使うとポップアップが表示されるようになります。
import React from "react";
import { toast } from "react-toastify";
import "./CopyText.css";
type Props = {
text: string;
};
const CopyText: React.FC<Props> = ({ text }) => {
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(text);
toast.success("キャプションをコピーしました！");
} catch (err) {
console.error("コピーに失敗しました:", err);
toast.error("コピーに失敗しました");
}
};
return (
<div className="caption-box">
<textarea className="caption-text" value={text} readOnly />
<button className="caption-copy-button" onClick={handleCopy}>
コピー
</button>
</div>
);
};
export default CopyText;
おわりに
今回はダミーテキストでキャプションを作成して、コピーまでできるようにしました！
コピーは良い感じのポップアップを表示させることでUXがちょっと上がったかも！！
ちなみにこのポップアップはChat GPTが提案してくれたんですよ！！すごい！！！！優秀！！！！！！
クリックorタップ時にコピーさせたい、しか聞いてないのに！！！！！！！！！
次回はAPIのレスポンスにキャプション用のテキストを追加して、キャプションを完全に自動生成させます！