Data Driven Knowledgebase

「Claude Codeに頼んだらアプリが普通に動くものができた」という話を耳にして、自分でも試してみることにしました。

では何を作ろうかと悩んでいるところ、ふと「読点や句点で改行したら長文って読みやすくなるんだろうか？」という疑問が浮かびました。試せる環境を作るにはChrome拡張機能が手っ取り早い。というわけで、読点（、）や句点（。）のあとに自動で改行を入れるツールを題材にすることにしました。

文節や句読点での改行が読みやすさに影響するという研究はあるようですが、今回はそこまで深追いせず、まずは動くものを作って自分で試す、という方針で進めました。あわせて、Claude Codeにどこまで任せられるかも確認する機会にしました。

今回の拡張機能で確かめたいことは主に1点です。

読点・句点で改行を入れると、長文の読みやすさは変わるのか

「読みやすくなる」と断言できる根拠はまだ持っていません。あくまで仮説を手元で試すための環境づくりです。ページのデザインを大きく崩してしまうと比較が難しくなるため、「元のページはそのまま、テキストにだけ手を加える」という非破壊なアプローチを選びました。

実装の前に、まず以下のプロンプトで要件定義書を生成してもらいました。

Claude Codeに以下のようなChrome拡張機能を作ってほしい。

「開いているページの視認性を高めるために、長い文章を読点・句点で改行し、

文ごとに段落を分けて表示する拡張機能」

上記の仕様をもとに、要件定義書をMarkdown形式で作成してください。

生成されたのが以下の定義書です。

機能要件

テキスト改行処理

対象要素

拡張機能UI

設定機能

非機能要件

自分でゼロから書くとかなりの時間がかかる量です。Manifest V3対応やMutationObserverの指定など、Chrome拡張機能の実装知識が必要な部分まで含まれていました。

ファイル構成

要件定義に続いて、Claudeが提案したファイル構成がこちらです。

この構成をそのまま chrome.md（要件定義書）として保存し、「この要件定義をもとに実装してください」と指示した結果、各ファイルをすべて生成してくれました。アイコンはPNGバイナリを直接生成できないため、Pythonスクリプト（generate_icons.py）を出力して実行する形で対応しています。

生成されたファイルをChromeに読み込む手順を紹介します。

Step 1：拡張機能をChromeに読み込む

1. Chromeのアドレスバーに chrome://extensions と入力して開く


2. 右上の「デベロッパーモード」をオンにする


3. 「パッケージ化されていない拡張機能を読み込む」をクリック


4. 生成された readability-enhancer/ フォルダを選択する

Step 2：対象ページを開いてONにする

拡張機能はデフォルトで無効状態です。以下の手順で有効化します。

1. 長文テキストが掲載されているWebページを開く（ニュースサイトや技術ブログなど）


2. ツールバーのアイコンをクリックしてポップアップを開く


3. トグルスイッチをONに切り替える

Step 3：設定を変更してみる

ポップアップ内の設定項目で動作をカスタマイズできます。

設定は chrome.storage.sync に保存されるため、ブラウザを閉じても次回以降に引き継がれます。英語記事を読む機会が多い方は「英語テキストにも適用」をONにすると効果的です。

Step 4：元の表示に戻す

トグルをOFFにすると、改行が挿入される前の元のDOM状態に即座に復元されます。ページのHTMLソース自体には一切手を加えていないため、完全に元通りになります。

要件定義から実装まで、短いプロンプトだけで一通り進められました。「改行で視認性が上がるか」という疑問の答えはまだ出ていませんが、試す環境は作れたので、引き続き使いながら確かめていく予定です。なお、生成されたコードは中身を十分に理解できていないため、セキュリティ面での不安が残ります。同じ方法で試す場合は、その点を念頭に置いてください。