はじめに
前回の記事では、HTMLを貼り付けるだけで画像にしてコピーできるツールを紹介しました。
その時点では、まず動くものを作ることを重視し、最小限の機能に絞っていました。
今回は新しく部分画像切り出し機能を実装しました。
課題感
これまでのアプリでは、HTML全体を画像としてコピーしていました。
しかし実際にメモアプリに貼るときには、AIが生成した図解の中から特定の表や図だけをコピーしたい場面が多くありました。
部分画像切り出し
そこで今回、プレビュー画面上の任意の要素をクリックし、その領域だけを画像としてコピーできる機能を追加しました。
使い方はシンプルです。
- HTMLコードを貼り付けてプレビュー
- プレビュー画面で、コピーしたい部分にカーソルを合わせると自動でハイライト
- ハイライトされた状態でクリックして対象を確定
- 部分コピーボタンを押すと、その要素だけを画像化してクリップボードにコピー
これにより、必要な部分だけを簡単にコピーできるようになりました。
感想
- 想像していた通りの機能を形にできたので、とても達成感がありました
- 開発の楽しさを改めて味わうことができました