Web で実用的な縦書きエディタは可能か？ ──現在地と普及に向けて

#fec_fukuoka

Transcript

1. Web で実用的な縦書きエディタは可能か？ ──現在地と普及に向けて 2026.09.12 #fec_fukuoka 1
2. 自己紹介 と縦 を書 話き すと 機リ 会ッ をチ もテ らキ えス てト 嬉エ しデ いィ タ の こ カ ン フ ァ レ ン ス 初 登 壇 ！ 得 意 領 域 ： リ ッ チ テ キ ス ト エ デ ィ タ 興 味 出 身 所 属 ： 開 発 ・ 音 楽 ・ ご 飯 ： 札 幌 ： サ イ ボ ウ ズ 株 式 会 社 ２ ６ 卒 @kosakin8710 ス ラ イ ド の リ ン ク 色エ んデ なィ 初タ 耳の 学情 を報 届は け世 たの い中 に 少 な い の で 、 好 き な ブ ロ ッ ク ： コ ー ル ア ウ ト ・ リ ン ク カ ー ド コ サ キ ン 2
3. 自己紹介 〜 リッチテキストエディタ(RTE) 〜 • インターン・内定者バイトを経て、チーム配属後も RTE の 刷新に参加 • Zenn の WYSIWYG な RTE を非公式で開発 スライドのリンク • RTE に関する記事を継続的に執筆 • RTE ライブラリの Tiptap や Chromium（Blink）に小さく コントリビュート • 最近は Web で WYSIWYG な縦書きエディタを試行中 • ルビや傍点が使える WYSIWYG エディタ「縦筆 Web」を公開。 ブログとして執筆・公開できる • 現在は、汎用的に使える WYSIWYG 縦書きエディタの基盤を 開発中 3
4. 今回の発表で伝えたいこと • Web の編集技術の仕組み • 横書きの <textarea> や RTE に対して、エディタという抽象的な枠組みから理解をする • その上で縦書きと横書き編集の技術的な違い、現状のブラウザで出来ることの整理 • <textarea> と縦書き RTE の両方の観点から見ていく • 開発者が Web サービスに縦書きエディタを組み込みたい場合、実用目線でどの程度可能なのか？ 4
5. 目次 01 １章：Web の編集技術 p06 02 ２章：縦書きエディタの現状と特有の難しさ p35 03 ３章：Web で実用的な縦書きエディタを利用 p53 できる世界にするには 5
6. １章：Web の編集技術 縦書きの話をする前に Web エディタの仕組みと状況を 6
7. 身の回りの Web で編集する機能 ©️ Cybozu, Inc. 7
8. Web のエディタは大まかに3種類ある 用途 プレーンテキストエディタ コードエディタ WYSIWYG エディタ (RTE) 解説 通常の装飾がないテキストだけを扱える ハイライトなどの高度な装飾をつけられる データはプレーンテキストを扱う 見出しや画像、テーブルなどを見たまま編集できる データは HTML やツリー構造 ※ WYSIWYG … What You See Is What You Get （みたまま編集ができる） 8
9. <input> <textarea> プレーンテキストエディタ • テキストデータを扱う • 高度なハイライトができない ©️ Cybozu, Inc. 9
10. Zenn (CodeMirror) コードエディタ VSCode (Monaco) • テキストデータを扱う • テキストを元に装飾が可能 ©️ Cybozu, Inc. 10
11. Slack (Quill) Closure Library WYSIWYG エディタ • テキスト・装飾・構造などをデータにもつ ©️ Cybozu, Inc. • ユーザーが任意の場所にテキスト装飾・ノード追加が可能 11
12. note (ProseMirror) Notion(独自) WYSIWYG エディタ ©️ Cybozu, Inc. 12
13. エディタは何をしているのか エディタは身近にあると分かったが、 実装するには何が必要なのか？ 縦書きとの差分を知るため、まず横書きを知る ©️ Cybozu, Inc. 13
14. 用語）キャレットと選択範囲 キャレット ── 点滅する入力位置。カーソルとも呼ぶ 選択範囲 ── 始点と終点を持つ範囲 14
15. エディタは何をしているのか • より抽象的に編集とは、簡単に言えば状態を変えること • エディタでは、何らかの入力が編集操作に変換され、状態が変わり画面に反映される • 「入力 ⇨ 画面に反映」のサイクルがある 15
16. エディタの４つの構成要素 • 状態 ── 内容と選択範囲を持つ • 構成要素を理解するときの起点となる部分 • 編集操作 ── 状態を変える。挿入・置換・削除・移動・選択 • 入力の解釈 ── イベントを編集操作に変換する • 状態の反映 ── 状態を画面に反映する。選択とキャレットの位置も含む 16
17. エディタの４つの構成要素 • 状態 ── 内容と選択範囲を持つ • 構成要素を理解するときの起点となる部分 • 編集操作 ── 状態を変える。挿入・置換・削除・移動・選択 • 入力の解釈 ── イベントを編集操作に変換する • 状態の反映 ── 状態を画面に反映する。選択とキャレットの位置も含む 17
18. エディタの４つの構成要素 • 状態 ── 内容と選択範囲を持つ • 構成要素を理解するときの起点となる部分 • 編集操作 ── 状態を変える。挿入・置換・削除・移動・選択 • 入力の解釈 ── イベントを編集操作に変換する • 状態の反映 ── 状態を画面に反映する。選択とキャレットの位置も含む 18
19. Web のエディタは3つの層の上で動く • 編集フローとは別に、Web エディタを誰が実現しているのか？の３つの層を知っておくと便利 • 下の図は3つの層の入力と表示の経路 • <textarea> と RTE はブラウザと JS のどこかに配置される 19
20. ブラウザでの具体的な実装を見る ４つの構成要素と３つの層を元に考える ©️ Cybozu, Inc. 20
21. 具体から見る：<textarea>の状態は2つ • 文字列 ── value • 選択位置 ── selectionStart と selectionEnd 21
22. 具体から見る： <textarea>の編集操作 • 文字列と選択位置の状態を、別の何かに置き換えるイメージ 現在位置に A を挿入という編集操作 22
23. <textarea> で見る4つの構成要素 <textarea> を置くだけで文字が打てるが、その裏でブラウザがこの4つを動かしている 23
24. 例）Aキーを押してみる 24
25. 例）↓キーを押してみる • OS ── ↓キーが押されたことをイベントにする • ブラウザ ── 移動と解釈し、移動先を求め選択位置を更新し、キャレットを描き直す • 折り返しの行があった場合は、レイアウトベースで次の選択位置を決定している • 文字列だけでは正しい場所を計算できない 25
26. RTE の仕組みは？ ©️ Cybozu, Inc. 26
27. Web の RTE は contenteditable で作られている • HTML には contenteditable というグローバルな 属性がある • 例えば、<div contenteditable="true"> と 付けると、その中の DOM が編集可能になる • ブラウザが DOM を直接書き換える • これにより、DOM を編集してリッチな見た目の エディタを構築することが可能になる リッチな見た目の例 27
28. contenteditableで見る4つの構成要素 状態が DOM とその選択範囲になった。選択範囲は DOM なので単純に数値で表せない。 28
29. 編集操作の例：Enterを押してみる • textarea なら \n を1文字挿入するだけだが、contenteditable の Enter はブロックを2つに分割する • そして状態によって Enter の意味が複雑に変わってくる 29
30. この状態で Enter を押すとどうなる？ • 新しい <li> が増える？ • テキストノードと <p> が同じ親に並ぶ • <ul> や <blockquote> が2つになる？ • Enter で割れるのは <p> か、外の <div> か • 箇条書きから抜けて <p> になる？ • 「あい」はどの段落に属するのか。 30
31. 全部ブラウザが対応？ありがとう。。。 ©️ Cybozu, Inc. 31
32. しかし、最近はcontenteditableに任せない • 最近は RTE をサービスに導入するときは、大体ライブラリを採用する。 • 主要な RTE ライブラリ（ProseMirror, Lexical ...）はどれも contenteditable を描画先としてしか使わない • ① HTML は編集用の文書モデルではない • 汎用の div が何段でも入れ子になり、段落なのか行なのかも決まっていない • 「リスト項目の中に見出しは置けない」のような制約も書けない • ② 編集操作の仕様がない • Enter が作る要素はブラウザごとに違うし、それが求めるものではない可能性が高い。 • ③ 編集操作を差し替えるAPIがない • 止めたら中身は全部自分で書くしかない 部分的に任せる手段がない 32
33. 現代の RTE は4つ全部をJSで制御する 理想としては、仮想 DOM のように JS 側で状態を管理して反映していく 矢印キーやキャレットの描画など、一部ブラウザに任せる箇所もある 33
34. IME が話をややこしくする 縦書きでも IME が少し絡むので解説 ©️ Cybozu, Inc. 34
35. ブラウザと IME の関係性 日本語入力では候補のために IME ウィンドウを出す 35
36. （余談）IMEは RTE の一方通行フローの設計を崩す IME 入力中に DOM を更新すると中断されるため、設計を変える必要がある 36
37. 第１章まとめ： Web の編集技術 • 編集は4つの構成要素 • 入力の解釈 → 編集操作 → 状態 → 状態の反映 • textarea は ブラウザ / RTE は JS が実装を持っている 縦書きにしたときに、どの要素が壊れるのか？ 37
38. ２章：縦書きエディタの現状と特有の難しさ 縦書きと横書き編集の技術的な違い 現状のブラウザで出来ることの整理 38
39. 縦書きとは • 書字方向が縦方向になったもの • 日本語では右から左の方向に書く（伝統的なモンゴル語では、左から右の縦書き） • CSS では writing-mode: vertical-rl で、表示側は10年ぐらい前から対応している • 現代でも 小説 / 脚本 / 新聞 / 教育場面 など、多くの場所で縦書きが現役 39
40. エピソード：世界的に縦書きってどう思われてるの？ • ProseMirror の作者に、新しいライブラリの Wordgard で縦書きエディタを対応しないか聞 いてみた • 現代のデジタルテキストでは日本語って用途限 られているよね？という認識だった • 今でも縦書きがバリバリ現役だということが、 知られていないみたい 40
41. 縦書きエディタとは • 縦書きのまま編集できるテキストエディタ • 最終成果物である縦書きを、そのまま編集したいという需要 o 文章のリズムや視線移動が異なったり、そもそも対応していない機能などもある o ルビや傍点、縦中横とセットで使われることが多い 41
42. 縦書きエディタの現状 • ネイティブアプリでは先人の方々が沢山の 実用的な縦書きエディタが公開されている • 一太郎、Word、InDesign、縦式、 TATEditor ... • 最近は小説や脚本エディタのブームなのか、 自作をしている人を結構観測する • 実は、Web でも既に試みは多数あり、 美しい縦書きエディタが公開されてる • しかし、縦書きでルビや縦中横の WYSIWYG、そのまま組版して PDF / Word / EPUB 出力ができる有名なサービスはなさ 引用：https://note.com/ryuon_novel/n/n4b908d9d6c45 そう 42
43. Web で縦書きエディタを実装するには？ 一旦技術の話 ©️ Cybozu, Inc. 43
44. まずは <textarea> で縦書きを考える ©️ Cybozu, Inc. 44
45. 横書きから縦書き、実はほとんどの構成要素に変化がない 修正は以下の３つが代表例（縦書きの表示が実装済み想定） ① キャレットの形と座標 / ② 矢印キーの移動先 / ③ IME の変換窓の位置と方向 45
46. ① 縦書きキャレットの描画 • 選択位置からキャレットの矩形の表示位置を求める • 縦書きだと、横長のキャレットになる 46
47. ② 縦書き方向の矢印キー対応 • 矢印キーを「文字が積まれる方向」「ブロックが積まれる方向」に割り当てている。 • 例）横書きだと、右矢印を文字が積まれる正の方向にしている • その割り当てを writing-mode で変える 47
48. ③ IME の縦書き対応 • ブラウザの IME クライアントが矩形と縦書きフラグを IME に渡す 縦書きの IME ウィンドウ ブロック進行方向に表示される 48
49. 縦書き <textarea> の PC ブラウザ対応状況 49
50. RTE では任せた範囲で自前実装かが決まる • <textarea> と同様に変えるべき箇所は少ない ※ 矢印キーはノード選択など、ライブラリがハードコードしている処理は修正する必要あり ※ Wordgard は最近公開された ProseMirror の反省を生かしたライブラリ 50
51. <textarea>も RTE も縦書きにするだけで動く • writing-mode: vertical-rl を当てるだけで、入力も選択もキャレット移動も、基本は動く 51
52. 縦書きエディタ特有の WYSIWYG な機能は？ • 縦書きでよく使われる機能は、ルビ / 傍点 / 縦中横 / 正立とか • 行頭・行末禁則 / 追い込み / ぶら下がり / 追い出し / 約物の詰め / 字下げ ... 52
53. 代表的なものを紹介 ©️ Cybozu, Inc. 53
54. ルビや縦中横は特に特殊な要素。アトム型なら作れる • ルビはふりがなやインラインブロック的な扱いで複雑 • アトム型は、親文字とふりがなを1つの塊として状態に持つ • 中にキャレットは入らない。塊を選んで別UIで入力する 54
55. ふりがなを直接編集することは、超絶難しい • 親文字やふりがなにキャレットを入れて打ち直すのは、レイアウトが特殊なため困難 • ブラウザ対応もほぼしていない。バグだらけのイメージ • 行の中にサブの行が入るのは他の言語にはなく、編集で対応されていない • インラインボックス的な扱いで、境界に内側と外側があるのもバグの原因。。 55
56. ２章まとめ：縦書き関連で、「できることと / できないこと」 の整理 Chromium / Firefox では実は既に動く。WYSIWYG も同様 56
57. ３章：Web で実用的な縦書きエディタを 利用できる世界にするには 基本的な編集は既に動いている 57
58. 縦書きエディタの「実用的」ってなんだろう？ • 既に縦書きの <textarea> とか使えるよね？Web で縦書きエディタが使える世界は来てるのでは？ • 実用的は「機能性」と「使い心地」の両方を満たす。 • 機能性：課題に対して、なんらかの手段で実現することが可能か？ • 使い心地：いわゆる UX 。ストレスフリーに課題を解決できるか？ 用途 縦書きメモ（基本） 欲しい機能 ・<textarea> 縦書きブログ ・ルビ・傍点・縦中横・禁則処理 小説 (Web) ・画像やリストなど、一般的な要素 出版 ・PDF / EPUB / Word の出力 ・ページ分割 / 高度な禁則処理 58
59. ぶっちゃけ、リッチな文章も <textarea> で十分？ 横スクロールの縦書き <textarea> で十分な人は 現段階で実用的 • マークダウンでルビのリッチな表現も可能。 プレビューで確認するタイプ • ツールバーとかで、記法の入力とかもできる • PDF / EPUB / Word 出力もやろうと思えばできる • 横書きで縦書きプレビューすればいいという話もある 59
60. 実用性に WYSIWYG を求める場合は？ • 普段使いするレベルに WYSIWYG を求める 場合を考える • 何で WYSIWYG ⇨ 成果物のまま編集したい • 推敲と編集が同時にできる • 見たまま編集楽しい！ • マークダウンだと見づらい！ 60
61. 実用的に縦書き WYSIWYG を求めると、 現段階で技術的に可能なのか？ ©️ Cybozu, Inc. 61
62. 試しに作ってみた 実用的な縦書きエディタを作る上で、 苦しいポイントを知りたい ©️ Cybozu, Inc. 62
63. ブログ・Web 小説縦書きエディタ • Web 小説や縦書きブログをそのまま書ける 縦筆 Webを開発した • 見出し・画像・リスト・ルビ・縦中横などを 扱える、一般的な WYSIWYG エディタ • ルビや縦中横はアトム対応で、モーダルから 編集する 自分なりのAIへの向き合い方 63
64. ブログ・Web 小説縦書きエディタの実用性 良い点 • WYSIWYG 最高！！美しいフォントの縦書きで、リンクや縦中横とかそのまま使えるの良き • ルビはモーダル入力でも意外と困らない。編集は少し面倒。 苦しい点 • Chromium は禁則処理のぶら下げができないので、「〇。」が先頭に来るのが気になる。 • ルビや傍点をつけると行間が変わらないようにするために、行間を大きくする必要がある • 行間が左右に均等につくので苦しい • Safari やモバイル対応が、ブラウザ対応状況で苦しい。 64
65. 小説用の縦書きエディタ • PDF 出力できる小説エディタを作った • いなにわうどんさんが直近で公開した、 組版ライブラリの minitype を活用 • RTE が出力する構造化データを、組版用の 構造に変換すれば PDF 出力可能 • ページ分割も気合いで１列実装した 65
66. 小説用の縦書きエディタの実用性 良い点 • ライブラリのおかげで PDF 出力はできそう。Word と EPUB も恐らくできるかな。。？ 苦しい点 • 小説を執筆するのであれば、編集画面と組版の出力を一致させたいところ。。。 • 苦しい観点は Web ブログと似ている。 • ぶら下げや行間、どうにかしたいなぁ。。。 • ページ分割も一列は可能ではあるが、２列は苦しい。。。技術的にできるのか。。？ • 一列でも、スクロールや矢印キー周りの挙動はしっかり考える必要がある 66
67. 割と Web でも WYSIWYG 縦書き編集ができる！ • ブラウザ対応がいい感じになってきたことで、Web でも WYSIWYG な縦書き編集が現実的に • 組版ライブラリで PDF 出力とかも対応できそう • ただ、縦書きエディタで細かい挙動は気になる点が多い。。使い心地を考えると微妙。 • クロスブラウザ対応は相変わらず苦しい。 67
68. 開発者目線の縦書きエディタ ©️ Cybozu, Inc. 68
69. もう一つの観点：開発者が「組み込める」 さっきの話は、RTE 詳しい人が縦書きエディタを開発した場合。 専門外の開発者が縦書きエディタをサービスに組み込める必要がある 現状 • <textarea> は、悩みも特になく利用できそう（クロスブラウザ対応ぐらい。。？） • RTE 文脈は情報が少なく、ちゃんとしたものを開発するにはハードルが高い • 特に RTE は組み合わせ爆発がすぐに起きるので、設計が適当だとバグだらけになる • 単純に実装が難しい機能もある • 周辺の PDF / Word / EPUB 出力周りも情報少なそう 69
70. RTE で一般開発者が作れるのはどこまでか 70
71. 実用的な縦書き WYSIWYG エディタが利用できる世界にするには？ ２種類の対応が必要そう • RTE の概念・知識・ノウハウの普及 • Web 標準やブラウザの実装、難易度が高いユースケースの対応 71
72. 自分は RTE の概念・設計を広める / 縦書きで UX が高い基盤を作る 自分ができそうなのは下の２つ • 設計やノウハウを広める • RTE のチュートリアル・設計・ノウハウなどを記事や本などにまとめて出す • この登壇もその一つ • 縦書きエディタの基盤をつくる • 縦書きエディタ基盤ライブラリを実用に足る形にする • JS で解決できない部分は ブラウザへのパッチと仕様に関わっていきたい 72
73. おわりに 73
74. なぜ Web で縦書きエディタを開発するのか？ • いや〜簡単そうで難しい。結論が出ていない • ネイティブで沢山あるから、Web でできる必要ないじゃん！ • Web アプリの存在が反論になる？Word とかもネイティブから Web でも可能になった • ブラウザの上に構築されているのが嬉しい？インストールいらない・URLで共有・高速なアップデート • Web 小説とかの文化もある。ここで縦書きエディタが組み込める選択肢があっても良くないか • 横書きで書いたものをプレビューすればいいのでは？ • 純粋に縦書きは縦書きで書いた方がいい。空行や目線の追い方など異なる部分が多い 74
75. なぜ自分が縦書きエディタを開発しているのか？ • 自分は RTE 芸人。Web での縦書きエディタは、取り組んでいる人も少なそうなので、技術的にもおも ろそう、第一人者になれるかも！みたいなノリだった • 小説を書くから縦書きエディタほしいみたいな需要からではない。。。 • 自分が RTE 芸人だからこそ、やるべきことは縦書きエディタを求める人々が開発できる知識の提供・基 盤の開発であると思う • 実際の使われ方は小説や脚本を執筆・出版する人に任せ、その声を聞いて基盤や実現方法の考察に関与していき たい • そもそも、RTE 自体の概念・設計の話が世の中に少ないので、その普及からやりたい • RTE を開発するときに、チーム内の共通言語を持つのが難しい 75
76. なぜ RTE の専門性を高めているのか？ • これは自分のキャリア・興味の話になる • 特定分野の専門性を高める方が自分には向いていそう • RTE はツリーの編集という難易度が高くやりがいがある。Web 標準やブラウザ実装などに関わるきっかけにも • マークダウン / プレビューより WYSIWYG 派閥。書いてて楽しいね • AI 時代で専門性が意味なくなるのでは。。？と思ったけど、AI は今のところ増幅器であるので、本当に その分野に詳しければ価値はありそう。むしろ仕事が捗る感じがある • エディタ自体がなくなるのも、流石に当分先じゃないかな。全部 AI や音声入力は無理がありそう。 • むしろ WYSIWYG + AI はもっと探求したいね 76
77. まとめ • Web の縦書きエディタは動くところまで来ている • より実用的で普及するためには、知識の普及と基盤が要る • 自分は RTE の概念や設計、ノウハウを世の中に広めつつ、縦書きの基盤も開発してみる 皆さん、ぜひ運営しているサービスに縦書きエディタの導入を検討してください！ ブログとかも縦書きにできるよ！ 77
78. 色んな話をしましたが。。。小説や脚本を書く人の意見を知りたい！ • 僕は小説を書かないので、小説執筆に求められる縦書きエディタがわからない。。 • 縦書きではなく、RTE の人間という自覚。。。 • どんな縦書きエディタを求めるかの声を聞きたいです！！ • 懇親会とか X とか！Web RTE には自信があります！ぜひ聞かせてください！ • RTE の話もしたい！！ • 皆さんの RTE 楽しい・苦しい事情聞きたい！ 78