進化するKuroEditor！新機能と実装の裏側 vol.3
KuroEditorの続報として、最新バージョンにおける新機能や特徴的な機能をピックアップ！その実装理由や背景にある哲学を読み物として詳しく解説します。Excelからのコピー＆ペーストで自動生成されるテーブル機能の強化や、レイアウトの幅を広げる角丸ボックス、視覚的なURLカード表示などなど、執筆者の「書きやすさ」と「表現力」を追求した進化の全貌をお届けします。
今や黒兎のオープンソース含めた製品の中核になっているWYSIWYGエディター「KuroEditor」は、フレームワークに依存しないバニラJavaScriptによる超高速動作と、直感的な操作性を追求し続けています。前回の「vol.2」では、基本的な文字装飾やメディア配置、そしてDropbox Paper風の表操作についてお伝えしました。しかし、KuroEditorの進化はそこで止まりません。今回は、その後に新しく追加された機能や、特徴的な機能についてピックアップし、それらをなぜ実装したのかという開発意図や背景を交えながら、読み物としてマニュアルには描けないストーリーをお届けします。執筆者が表現したい世界を、ストレスなく、そして極限までリッチに表現するための「KuroEditor vol.3」の全貌へと迫りましょう。
表操作の極限：Excel貼り付け対応と「日本人が愛するテーブル」の追求
KuroEditorの開発において、最も情熱が注がれたパーツの一つが「表（テーブル）」機能です。多くの海外製リッチテキストエディターを触ったことがある方なら共感していただけると思いますが、海外製のエディターはテーブルの扱いが非常に大雑把です。セル背景色の変更やセルの結合・分割といった、私たちがMicrosoft ExcelやGoogleスプレッドシートで当たり前のように行っている微細な調整ができない、あるいは実装されていても非常に扱いづらいケースがほとんどです。
日本人は、古くから情報を「囲み、整理する」ことを好む傾向があります。これは日本の住宅様式にも通じる精神性かもしれませんが、ウェブ上の記事においても、複雑なスペック比較や料金表、データの対比などを美しいテーブルで表現することは、可読性を高めるために極めて重要です。このニーズに応えるため、KuroEditorはテーブル機能を大幅に強化しました。
まず、最大の特徴は「ExcelやGoogleスプレッドシート、CSVデータからのコピー＆ペーストによる自動テーブル生成」です。表計算ソフト上でコピーした範囲をエディター上でそのまま貼り付ける（Paste）だけで、KuroEditorが裏側でタブ区切り（TSV）やカンマ区切り（CSV）のフォーマットを解析し、瞬時に美しいHTMLテーブルへと再構築します。これにより、執筆者はエディター上で1からセルを作成する手間から解放されます。使い慣れたExcelで表を作成したら貼り付けという楽ができます。
もちろんKuroEditor単体でも、外枠や中の罫線、あるいは「特定の1本だけ」の罫線の太さ（細線、普通、太線、点線など）や色を自由に変更できるようになりました。セルの結合（右と連結、下と連結）や分割、縦方向の文字揃え（上、中央、下）、セルの背景色設定なども、すべてマウス操作だけで直感的に行えます。この「日本人が求める細やかなテーブル表現」を完璧にサポートすることこそが、KuroEditorが海外製エディターと一線を画す最大の理由なのです。
「Enter」と「Shift+Enter」が分かつもの：エディタ内部の段落設計思想
KuroEditorの操作マニュアルに大きく記載されているのが、「改行と段落の違い」です。キーボード入力において、ただ次の行に移りたいときに「Enter」を押すか、「Shift + Enter」を押すかによって、エディター内部で発生するHTML構造は全く異なります。この違いを理解しておくことは、綺麗な記事レイアウトを維持するために欠かせません。
「Enter」を押した場合、エディターは新たな段落（<p>タグ）を生成します。これにより、前後の文章とは別の独立したブロック（かたまり）として扱われます。KuroEditorの強力なレイアウト機能（字下げ、配置の左右寄せ、見出し設定など）は、この段落単位で適用されるため、段落が分かれていれば特定の行だけを右寄せにする、といった操作が容易に可能です。一方で、「Shift + Enter」を押した場合は、同じ段落内のままで単純な改行（<br>タグ）が挿入されます。エディターからは「1つのかたまり」として認識されるため、字下げなどを行うと複数行が連動して動くことになります。
この挙動を実装した理由は、執筆中によくある「意図せず行間が開きすぎてしまう」というストレスを解消しつつ、意味のまとまりに応じた精緻な制御を可能にするためです。住所や詩のように、きゅっと詰めて並べたい数行は「Shift + Enter」を使い、意味の切り替わりには「Enter」で段落を分ける。この明確な思想設計が、KuroEditorの書きやすさの根底にあります。
特にこの機能が効いてくるのは、リスト表示です。Microsoft Word や Dropbox Paper など多くのツールでは、番号付きやマーク付きのリスト表示は当然できますが、複雑なリストを組もうとすると思うように数字が付かなく歯がゆかったり、リストの間に、ただの文字ブロックを入れたいのに出来ないなど、1つの方法を便利にするためにそのフォーマットから外れる使い方には著しく制限が入ります。KuroEditorではそのあたりを極力シンプルにしながら複雑なリスト表現が出来るようになっています。
レイアウトにメリハリを生む「角丸ボックス」と回り込みの美学
従来のブログ記事やニュース記事は、上から下へと単調にテキストと画像が交互に流れる「1カラムの縦スクロール構成」になりがちでした。もちろんスマートフォンの普及によって縦スクロールが基本となった現代ですが、PCなどの広い画面で見るときに、あまりにも単調なレイアウトは読者の飽きを引き起こします。そこで実装されたのが「角丸ボックス（kuro-roundbox）」機能です。
角丸ボックスは、エディターの下段メニューに配置された専用のアイコンからワンクリックで挿入することができます。ボックスの中には、通常のテキストだけでなく、画像や表など、エディター上のあらゆる要素を配置することができます。そして、カーソルがボックス内にある間だけ表示される設定メニューからは、ボックスの横幅（30%〜100%）や配置（左寄せ、中央、右寄せ）を自由にカスタマイズできます。
ここでの最大のこだわりは、左右に寄せたときの「文字の回り込み（Wrap）」の挙動です。例えば、ボックスの幅を45%に設定し、「右寄せ」に配置すると、後に続く段落テキストがボックスの左側に美しく回り込みます。これにより、雑誌のコラム欄や、本筋とは異なる注記・補足情報をすっきりと配置することができるようになります。また、回り込みを意図した場所で終わらせたい場合は、水平線（hr）を1行挿入するだけで、それ以降のコンテンツを自動的にボックスの下部へと送ることができます。縦に長い記事の中で視覚的なリズムを作り出すこの機能は、読者の読了率（スクロール深度）を大きく向上させる効果を持っています。
リンクの概念を変える「URLカード」と執筆リズムを守る「絵文字ショートコード」
インターネットの記事において、他サイトや過去記事へのリンクは不可欠な要素です。しかし、従来の「青文字に下線」のテキストリンクは、スマートではあるものの、読者がそれを「有益な参考情報」として認識しづらいという弱点がありました。特にアフィリエイトリンクや、自社サービスの紹介、関連性の高い重要記事への誘導など、読者に確実にクリックしてもらいたいリンクを配置する際、視覚的なアピールが不足していました。
そこでKuroEditorが導入したのが「URLカード（kuro-url-card）」表示です。リンクを作成する際、「カード表示（表題なし）」のチェックボックスをオンにするだけで、自動的に対象URLのメタデータ（ファビコン、タイトル、URL）を取得し、美しいカード形式のブログカードに変換します。これにより、読者はリンク先がどのようなページであるかを直感的に理解できるようになり、クリック率（CTR）が大幅に向上します。さらに、もし対象サイトがダウンしていたり、メタデータの取得に失敗した場合は、壊れた画像リンクを出すのではなく「黙って表示を調整する（カード全体はリンクとして機能させつつ、壊れたアセットを非表示にする）」という、安全性を重視した仕様にしています。これは、Dropbox Paper から大きなヒントを貰っています。しかし Paper のリンクは意図しない URL も勝手にカード化し、画面を大きく占有するうえ、存在しない切れている URL であってもあるようにキャッシュが効いてしまう問題があります。KuroEditor では、普通の青リンク、簡単なカード型（細い）、リッチなカード型（少し太めで画像など動的に素材を取得）の3つが選べるようになっています。
一方で、執筆時の「リズム」を守るための機能として「絵文字のショートコード入力」も新たに実装しました。絵文字は感情豊かな表現に便利ですが、ツールバーからいちいちパレットを開いて選ぶのは、キーボードからマウスへと手を持ち替える必要があり、タイピングのリズムを崩してしまいます。KuroEditorでは、:smile: や :fire:、 :+1: といったおなじみのショートコードをタイピングするだけで、入力が完了した瞬間に自動で対応する絵文字に置換されます。執筆の手を休めることなく、スムーズに豊かな表情を文章に加えられるこの小さな機能は、プロの執筆者ほどその快適さを実感していただけるはずです。
実用性を拡張する「チェックリスト（Todo）」と構造化データの「レシピカード」
KuroEditorは、単にブログ記事を投稿するためのエディターに留まりません。KuroCMSの兄弟プロジェクトである個人向けメモツール「KuroNote」などへの組み込みも想定しているため、パーソナルな用途でも使える実用的な機能を貪欲に取り入れています。その代表例が「チェックリスト（Todo）」です。
- メールの確認
- コーヒーを入れる
行の先頭で [] と入力してスペースを押すだけで、チェックボックス付きのリストが自動生成されます。チェックの状態はHTMLデータとしてそのまま記事と一緒に保存されるため、保存ボタンを押して再読み込みをしても状態が維持されます。なお、公開ページにおけるチェックボックスは「読者がその場で切り替える」ことはできません（読者ごとの状態をデータベースに保存する仕組みが必要になるため、見た目としてのチェック表示となります）が、執筆時のタスク管理や、記事内での手順確認リストの提示などにおいて、非常に高い効果を発揮します。
また、特定のビジネスモデルやサイト用途に特化した機能として「レシピカード（kuro-recipe）」を新たに搭載しました。これは、料理レシピブログなどの運営を強力に支援するための構造化ブロックです。カードを挿入すると、人数、下準備・調理時間、材料、手順を整理された美しいテーブル・リスト形式で1枚のカードとして表示します。レシピカードは、SEOの観点（Googleのレシピ構造化マークアップ）を意識して設計されており、検索エンジンに対しても正しいデータとして認識させることができます。さらに、「1記事の中に何枚もレシピがあると読者が混乱する」というユーザー視点から、1記事につき「最大1枚までしか置けない」という厳格な制約（すでに配置されている場合はツールバーのボタンが灰色になり、挿入できない理由を表示する）を設けています。こうした特化型カードの存在は、特定のニッチメディアにおけるコンテンツ価値を爆発的に高める要素となります。詳しくは KuroCMSのレシピ記事をごらんください。
エンジニア執筆者を支援するコードブロックの進化：ドラッグ移動と自動コピーボタン
まあ、これは多くの技術系の記事やチュートリアルを執筆する際には当たり前の機能だったのですが、ソースコードを綺麗に見せるための「コードブロック」は必須です。従来のKuroEditorにもコードブロックは存在しましたが、執筆中における「ブロック全体の並べ替え」や「コードのコピー」といった開発者ならではの操作性には改善の余地がありました。
そこで、コードブロックの左端に表示される「行番号エリアをドラッグすることによるブロック全体の上下移動」をサポートしました。長文の解説記事を書いている際、「このコードブロックを1つ上の段落の前に移動したい」というシチュエーションは頻繁に発生します。コードを切り取って貼り付け直す（Cut & Paste）と、インデントが崩れたり思わぬHTML構造の破壊につながるリスクがありますが、ドラッグ＆ドロップによる並べ替えであれば、安全かつ直感的にブロックの位置を入れ替えることができます。
また、公開ページにおいて読者が最も頻繁に行う「コードのコピー」を円滑にするため、コードブロックの右上に自動で「📋 コピーボタン」を付与するヘルパースクリプトも合わせて提供しています。エディター内部だけで完結させず、最終的な「読者の体験（UX）」までを一貫してデザインするKuroEditorならではの配慮が、こうした細部に宿っています。
まとめ：見たままが公開される「WYSIWYG」をブレる事なく
KuroEditorが目指すのは、単に「文字を綺麗に並べるためのエディター」ではありません。エディター上で構築した複雑なテーブルや角丸ボックス、回り込みのレイアウトが、「全く同じ見た目で公開ページにも反映される」という究極のWYSIWYG体験です。これをフレームワークを一切使わず、読み込み速度やパフォーマンスに一切妥協しないバニラJavaScriptで実現することは、技術的にも大きな挑戦です。結合点を極限まで減らした疎結合設計により、どのようなウェブシステムやCMSに対しても数行のコードで組み込めるKuroEditorは、これからも多くのクリエイターの執筆体験を支え、進化を続けて行いきたいと改善を進めてまいります。