最近はChatGPTやClaudeなどのAIを使って開発する機会が増えました。
便利になった一方で、「あと少しこうだったらいいのに」と感じる場面も少なくありません。
今回は、そんな日々の小さなストレスから生まれたWebアプリ「QuickAiMemo」を作ったきっかけについて書いてみます。
AIへの指示を書いている途中で送信してしまう
AIにお願いするときは、数行ではなく長い文章になることがよくあります。
例えば、
- 修正してほしい内容
- エラー内容
- 希望する仕様
- コード
などをまとめて入力することがあります。
ところが、入力中に誤ってEnterキーを押してしまい、そのまま送信されてしまうことが何度もありました。
「まだ書き終わっていないのに……。」
そんな経験を何度も繰り返していました。
Claude Codeでは特に不便さを感じていました
Claude Codeはターミナル上でAIとやり取りを行います。
最初は改行方法が分からず、普通にEnterキーを押してしまい、そのまま送信されてしまうことがよくありました。
長い指示を書こうとしても途中で送信されてしまうため、
「一度どこか別の場所で文章を書いてから貼り付けよう」
という流れになり、少し手間に感じていました。
小さなことですが、毎日何度も繰り返す作業だからこそ、このストレスは意外と大きかったです。
改行に関して、やりやすい方法を見つけたので、同じく煩わしさを感じている方がいたらチェックしてください👇
小さな入力欄では考えを整理しづらい
ブラウザ版のAIでも、長い文章を書くことがあります。
仕様書を書いたり、プロンプトを考えたりすると、何百文字、何千文字になることもあります。
入力欄だけで書こうとすると、
- 全体を見渡しにくい
- 書き直しが大変
- コピーし忘れることがある
といったことがありました。
私は文章を何度か見直してからAIへ送ることが多いため、もっと広い画面で整理できたら便利だと感じていました。
「AIへ送る前のメモ帳」が欲しかった
そこで作ったのがQuickAiMemoです。
コンセプトはとてもシンプルで、
「AIへ送る前に、一度整理する場所」
ということだけを考えて作りました。
文章を書いて、
必要ならMarkdownを確認して、
コードならシンタックスハイライトで見やすくして、
最後にコピーしてAIへ貼り付ける。
ただそれだけのアプリですが、自分の作業スタイルにはとても合っています。
3つの編集モードに対応
用途に合わせて3種類の編集モードを切り替えられます。
テキストモード
シンプルなメモ帳です。
シンタックスハイライトがないため、プロンプトの下書きや文章作成に適しています。
コードモード
シンタックスハイライト付きのコードエディタです。
言語を自由に切り替えられるため、HTML・CSS・JavaScriptをはじめ、さまざまなコードを見やすく編集できます。
Markdownモード
Markdownを入力するとリアルタイムでプレビューが表示されます。
PCでは左右2カラム、スマートフォンでは上下表示となるため、画面サイズに合わせて快適に利用できます。
複数メモを切り替えて管理
QuickAiMemoでは複数のメモを作成できます。
コード用、プロンプト用、作業メモなど用途ごとに分けて保存できるため、必要な内容をすぐに切り替えられます。
保存される内容は以下の通りです。
- メモ本文
- 編集モード
- 選択した言語
- メモ名
それぞれ独立して保存されるため、前回の状態をそのまま復元できます。
自動保存で入力内容を保持
入力内容はLocalStorageへ自動保存されます。
ページを更新してもメモは復元され、データはブラウザ内だけに保存されるため外部へ送信されることはありません。
ただし、次のような場合は保存内容が失われます。
- ブラウザのサイトデータを削除した場合
- シークレット（プライベート）ブラウズを利用した場合
- 別のブラウザ・別の端末で利用した場合
- ブラウザの初期化や再インストールを行った場合
大切なデータは定期的に保存することをおすすめします。
コード量をリアルタイムで確認
ステータスバーでは入力内容をリアルタイムで確認できます。
表示される情報は以下の通りです。
- 文字数
- 行数
- UTF-8バイト数
- 推定トークン数
- 選択範囲の文字数
- 選択範囲の推定トークン数
AIへ送る前に、プロンプトやコードのボリュームを確認したい場合にも便利です。
コピー・保存もワンクリック
作業効率を上げるため、よく使う操作をボタンひとつで行えます。
- コピー
- txtファイル保存
- テキスト全削除
さらに「txtをドラッグ」ボタンでは、テキストをtxtファイルとしてドラッグできます。
ChatGPTでは入力欄へドラッグ＆ドロップすることで、txtファイルとして添付できることを確認しています。
※Claude、Gemini、Grok、Gensparkでは動作を確認できませんでした。
常に最前面で作業できる
Chrome・Microsoft Edge（116以降）では、Document Picture-in-Picture機能に対応しています。
ピンボタンを押すことで、小さなウィンドウとして常に最前面へ表示できます。
AIチャットと並べて作業したい場合に便利な機能です。
ダークモード・ライトモード対応
テーマはダークモードとライトモードを切り替えられます。
シンタックスハイライトのテーマも連動して切り替わり、設定は自動保存されます。
初期設定はダークモードです。
アクセシビリティにも配慮
QuickAiMemoでは、使いやすさだけでなくアクセシビリティにも配慮しています。
- aria-label設定
- キーボード操作対応
- フォーカスリング表示
- Tabキーによるインデント
- スクリーンリーダー対応のトースト通知
マウスだけでなく、キーボード操作でも快適に利用できます。
自分が毎日使いたいものを作るのが一番楽しい
個人開発をしていて思うのは、自分が困っていることを解決するアプリは作っていて楽しいということです。
誰かのためというより、まずは自分が毎日使いたいと思えるものを形にする。
すると自然と改善したい点も見つかり、アップデートのアイデアも次々に浮かんできます。
QuickAiMemoもその一つです。
今後も実際に使いながら改善を続けて、AIとのやり取りをもっと快適にできるアプリに育てていきたいと思っています。
最近作ったアプリの中で一番活躍しているこのアプリ、ぜひ使ってみてください！
裏側話を書いています👇
この記事のカテゴリー
開発ブログ の記事をもっと見る →