今回は、弊社社内向けツールとしてAI機能を搭載したテキストエディタの開発を行いました。
日々のメモや議事録作成やコード編集など、日常業務で使うテキスト作業を効率化するために開発した社内向けWebエディタです。
Notionでいいんじゃない？とか当然言われそうですし、Notionでいいと思いますが、もっとテキストエディタっぽくてサクサク動いてかつ音声入力・AIアシスタントがあり自分好みのコマンド付きにカスタマイズしたかった感じです。
音声入力・AIアシスタント・クラウド保存を軸により自分好みのカスタマイズをしてみました。
テキストエディタを使って開発する、のではなく、テキストエディタ自体を自分で作れるとは技術の進歩は素晴らしいです。
主要機能
機能をまとめてみました。よくある機能はだいぶある感じです。
機能 | 説明 |
|---|---|
マルチファイル編集 | タブ切り替えによる複数ファイルの同時編集。サイドバーのファイルツリーで一覧管理が可能。 |
AIアシスタント | Claude APIを統合。開いているドキュメントの内容を踏まえた質問・相談ができます。 |
音声入力 | ブラウザの音声認識を活用し、カーソル位置への直接入力と、音声だけで新規ドキュメントを作成する2つのモードを搭載。 |
クラウド自動保存 | Supabase連携により、編集内容を自動でクラウドに保存。端末を変えても続きから作業可能。 |
ショートカット & コマンドパレット | 主要操作はキーボードショートカットに対応。コマンドパレットからすべての機能にアクセス可能。 |
多言語ファイル対応 | HTML, CSS, JavaScript, TypeScript, JSON, Markdownなど主要な形式に対応。拡張子による自動判定でアイコンも変化。 |
エディタとしての地道な作り込み
括弧の自動補完、Tabキーによるスペース挿入、選択テキストの括弧囲み、日付ヘッダーのワンタッチ挿入（⌘ Shift L）など、日常的に繰り返す操作を丁寧にサポートしています。日本語IMEとの組み合わせ（compositionイベントの適切な処理）にも対応し、日本語環境でストレスなく使えます。
音声からのドキュメント直接作成
「音声で新規ドキュメント」モードでは、話すだけで新しいファイルが作成されます。急なメモや、PCの前に座れない状況での記録に便利です。AIパネル内でも音声入力が使えるため、タイピングせずにAIへ質問を投げることも可能です。
AIがドキュメント全体を理解
AIに質問を送ると、現在開いている全ドキュメントの内容がコンテキストとして渡されます。ファイルを横断した質問や、プロジェクト全体を踏まえた提案が可能です。応答はストリーミングで逐次表示されるため、待ち時間のストレスもありません。
モバイル対応
レスポンシブデザインにより、スマートフォンやタブレットからもアクセス可能です。小画面ではサイドバーが自動的に折りたたまれ、モバイル向けのツールバーが表示されます。
テキストエディタアプリ：まとめ
今回は、自前で作ってみたテキストエディタアプリを紹介してみました。
以前は世の中にある既に似たようなツールが格安、あるいは無料で使える中で、少しカスタマイズしたいからといってわざわざ自分で作るようなことはしようとは思いませんでした。
ですが、これくらいのアプリも作れるような時代になると、自分たちのやりたいことに合わせて細かく最適化されたアプリを作っていくことが大事になってくるかもしれませんね。
自社の業務を効率化させたい、でもどう作ったらいいかわからない、予算が限られている、DXの進め方から丁寧に教えてもらいたい、などのお悩みの方はいつでも気軽にご相談ください。