AX1AX2
AY1AY9
Mmatsutomo.dev
商品FDEログイン相談する
← 記事一覧へ戻る
2026年9月14日無料X でシェア

線 SEN 制作記 — AI に「選んだところだけ」直してもらう Markdown エディタ

全文を AI チャットに貼って、返ってきた文章から必要な段落を探して戻す。この往復をなくすために、1 枚の HTML で動く Markdown エディタを作りました。設計図の画面にした理由と、公開前に外した機能の話です。

AI に文章を手伝ってもらうとき、いちばん時間を取られていたのは生成そのものではありませんでした。 全文をチャットに貼り付け、返ってきた文章から必要な段落を探し、元の文書に戻す——この往復です。

線 SEN は、この往復をなくすために作った Markdown エディタです。1 つの HTML ファイルで動き、 直したい範囲を選んで指示を送ると、その範囲だけが差し替わります。

範囲を選んで指示を送り、結果で置き換えるまでの流れ
書く → 範囲を選ぶ → 指示を送る → 置き換える(デモ用のダミー応答)

「選んだところだけ」を基本の操作にする

最初に決めたのは、AI に渡す単位を文書ではなく選択範囲にすることでした。

  • 範囲を選ぶと、送る対象が「選択範囲(N 字)」に切り替わる
  • 何も選ばなければ文書全体が対象になる
  • 結果は右下に朱書きで表示し、「対象と置き換える / 文末に挿入 / コピー」から選んで反映する

結果をすぐ本文に書き込まず、一度朱書きで見せてから反映させるのは、赤入れの作法に合わせたためです。 採用するかどうかは、書き手が決めます。

なぜ設計図の画面なのか

画面は設計図の作法で組みました。上に寸法線、左に通り芯、下に表題欄。 寸法線には各列の実際の幅がピクセルで表示され、仕切りをドラッグすると数字が追従します。

凝った意匠を足したかったわけではありません。罫線だけで区切り、色は墨と朱の 2 色に絞るための約束事として、 図面の形式を借りました。区切りと役割が線だけで伝わるので、長く書いていても目が散りません。

サーバーを持たない

線 SEN には、私が運営するサーバーとの通信がありません。

データ保存場所
書いた文書使っているブラウザの中
API キー・モデル設定使っているブラウザの中
AI への指示と対象の文章使う人の端末から Anthropic の API へ直接

API キーは使う人が自分で用意します。そのぶん月額はなく、買い切りにできました。 一方で、ブラウザの閲覧データを消すと文書も消えます。大切な文書は .md で書き出してもらう前提です。

公開前に外した機能

開発中の版には、手元の PC で動く小さな中継プログラムを付けていました。 ブラウザからその中継に文章を送り、PC にインストール済みの AI コマンドを呼び出す仕組みです。 API キーを入れずに使えるので、自分用としては便利でした。

販売を前に見直したところ、この形には設計上の弱点がありました。 ローカルで待ち受ける中継は、同じ PC のブラウザで開いている別のサイトからも呼び出せてしまうのです。 認証も接続元の制限もない中継では、悪意あるページが購入者の PC で AI コマンドを動かし、結果を読み取れる恐れがあります。

直す方法はあります。起動ごとに合言葉を発行する、接続元を絞る、呼び出せる機能を最小にする、などです。 それでも、購入者の環境で安全に動かし続ける責任を考え、販売版では中継を外し、Anthropic の API を直接呼ぶ経路だけにしました。

⚠️ 注意

ローカルで待ち受けるプログラムを自作するときは、「自分のブラウザからしか来ない」とは考えないでください。ブラウザで開いている他のサイトからもリクエストは届きます。認証と接続元の確認を、最初から組み込んでおくのが安全です。

開いた文書からキーを盗まれないようにする

もう 1 つ、公開前に直したのがリンクの扱いです。 Markdown のリンクに javascript: のような形式を書くと、プレビューでクリックしたときにスクリプトとして動いてしまう。 API キーをブラウザに保存するアプリでは、受け取った .md を開いただけでキーを読まれる入口になります。

販売版では、リンクと画像に使える形式を http / https / mailto などの安全なものに限りました。 それ以外は無効にして表示します。 大文字を混ぜる、途中に制御文字を挟むといった書き方も含めて、テストで確かめています。

1 枚の HTML で届ける

配布物は、本体の HTML と使い方の README を入れた zip です。インストールもアカウント登録もなく、 展開してブラウザで開けば使えます。自分の文章の道具として、手元に置いておける形にしました。

[https://matsutomo.dev/products/sen]

この記事をシェアX でシェア

実装を相談したい人へ。30 分の相談から、課題の解き方を一緒に見つけます。

FDE に相談する →
商品FDE有料相談を予約お問い合わせログイン特定商取引法プライバシー利用規約返金
図面名matsutomo.dev
更新2026.09.15
縮尺S = 1 : 1
図番MDV-001
製作・著作© matsutomo.dev