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

by kosakin

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介と縦を書話きすと機リ会ッをチもテらキえスてト嬉エしデいィタのこカンファレンス初登壇！得意領域：リッチテキストエディタ興味出身所属：開発・音楽・ご飯：札幌：サイボウズ株式会社２６卒 @kosakin8710 スライドのリンク色エんデなィ初タ耳の学情を報届はけ世たのい中に少ないので、好きなブロック：コールアウト・リンクカードコサキン 2

Slide 3

Slide 3 text

自己紹介〜リッチテキストエディタ(RTE) 〜 • インターン・内定者バイトを経て、チーム配属後も RTE の刷新に参加 • Zenn の WYSIWYG な RTE を非公式で開発スライドのリンク • RTE に関する記事を継続的に執筆 • RTE ライブラリの Tiptap や Chromium（Blink）に小さくコントリビュート • 最近は Web で WYSIWYG な縦書きエディタを試行中 • ルビや傍点が使える WYSIWYG エディタ「縦筆 Web」を公開。ブログとして執筆・公開できる • 現在は、汎用的に使える WYSIWYG 縦書きエディタの基盤を開発中 3

Slide 4

Slide 4 text

今回の発表で伝えたいこと • Web の編集技術の仕組み • 横書きのや RTE に対して、エディタという抽象的な枠組みから理解をする • その上で縦書きと横書き編集の技術的な違い、現状のブラウザで出来ることの整理 • <textarea> と縦書き RTE の両方の観点から見ていく • 開発者が Web サービスに縦書きエディタを組み込みたい場合、実用目線でどの程度可能なのか？ 4

Slide 5

Slide 5 text

目次 01 １章：Web の編集技術 p06 02 ２章：縦書きエディタの現状と特有の難しさ p35 03 ３章：Web で実用的な縦書きエディタを利用 p53 できる世界にするには 5

Slide 6

Slide 6 text

１章：Web の編集技術縦書きの話をする前に Web エディタの仕組みと状況を 6

Slide 7

Slide 7 text

身の回りの Web で編集する機能 ©️ Cybozu, Inc. 7

Slide 8

Slide 8 text

Web のエディタは大まかに3種類ある用途プレーンテキストエディタコードエディタ WYSIWYG エディタ (RTE) 解説通常の装飾がないテキストだけを扱えるハイライトなどの高度な装飾をつけられるデータはプレーンテキストを扱う見出しや画像、テーブルなどを見たまま編集できるデータは HTML やツリー構造 ※ WYSIWYG … What You See Is What You Get （みたまま編集ができる） 8

Slide 9

Slide 9 text

プレーンテキストエディタ • テキストデータを扱う • 高度なハイライトができない ©️ Cybozu, Inc. 9

Slide 10

Slide 10 text

Zenn (CodeMirror) コードエディタ VSCode (Monaco) • テキストデータを扱う • テキストを元に装飾が可能 ©️ Cybozu, Inc. 10

Slide 11

Slide 11 text

Slack (Quill) Closure Library WYSIWYG エディタ • テキスト・装飾・構造などをデータにもつ ©️ Cybozu, Inc. • ユーザーが任意の場所にテキスト装飾・ノード追加が可能 11

Slide 12

Slide 12 text

note (ProseMirror) Notion(独自) WYSIWYG エディタ ©️ Cybozu, Inc. 12

Slide 13

Slide 13 text

エディタは何をしているのかエディタは身近にあると分かったが、実装するには何が必要なのか？縦書きとの差分を知るため、まず横書きを知る ©️ Cybozu, Inc. 13

Slide 14

Slide 14 text

用語）キャレットと選択範囲キャレット ── 点滅する入力位置。カーソルとも呼ぶ選択範囲 ── 始点と終点を持つ範囲 14

Slide 15

Slide 15 text

エディタは何をしているのか • より抽象的に編集とは、簡単に言えば状態を変えること • エディタでは、何らかの入力が編集操作に変換され、状態が変わり画面に反映される • 「入力 ⇨ 画面に反映」のサイクルがある 15

Slide 16

Slide 16 text

エディタの４つの構成要素 • 状態 ── 内容と選択範囲を持つ • 構成要素を理解するときの起点となる部分 • 編集操作 ── 状態を変える。挿入・置換・削除・移動・選択 • 入力の解釈 ── イベントを編集操作に変換する • 状態の反映 ── 状態を画面に反映する。選択とキャレットの位置も含む 16

Slide 17

Slide 17 text

エディタの４つの構成要素 • 状態 ── 内容と選択範囲を持つ • 構成要素を理解するときの起点となる部分 • 編集操作 ── 状態を変える。挿入・置換・削除・移動・選択 • 入力の解釈 ── イベントを編集操作に変換する • 状態の反映 ── 状態を画面に反映する。選択とキャレットの位置も含む 17

Slide 18

Slide 18 text

エディタの４つの構成要素 • 状態 ── 内容と選択範囲を持つ • 構成要素を理解するときの起点となる部分 • 編集操作 ── 状態を変える。挿入・置換・削除・移動・選択 • 入力の解釈 ── イベントを編集操作に変換する • 状態の反映 ── 状態を画面に反映する。選択とキャレットの位置も含む 18

Slide 19

Slide 19 text

Web のエディタは3つの層の上で動く • 編集フローとは別に、Web エディタを誰が実現しているのか？の３つの層を知っておくと便利 • 下の図は3つの層の入力と表示の経路 • と RTE はブラウザと JS のどこかに配置される 19

Slide 20

Slide 20 text

ブラウザでの具体的な実装を見る４つの構成要素と３つの層を元に考える ©️ Cybozu, Inc. 20

Slide 21

Slide 21 text

具体から見る：の状態は2つ • 文字列 ── value • 選択位置 ── selectionStart と selectionEnd 21

Slide 22

Slide 22 text

具体から見る：の編集操作 • 文字列と選択位置の状態を、別の何かに置き換えるイメージ現在位置に A を挿入という編集操作 22

Slide 23

Slide 23 text

で見る4つの構成要素 <textarea> を置くだけで文字が打てるが、その裏でブラウザがこの4つを動かしている 23

Slide 24

Slide 24 text

例）Aキーを押してみる 24

Slide 25

Slide 25 text

例）↓キーを押してみる • OS ── ↓キーが押されたことをイベントにする • ブラウザ ── 移動と解釈し、移動先を求め選択位置を更新し、キャレットを描き直す • 折り返しの行があった場合は、レイアウトベースで次の選択位置を決定している • 文字列だけでは正しい場所を計算できない 25

Slide 26

Slide 26 text

RTE の仕組みは？ ©️ Cybozu, Inc. 26

Slide 27

Slide 27 text

Web の RTE は contenteditable で作られている • HTML には contenteditable というグローバルな属性がある • 例えば、

と付けると、その中の DOM が編集可能になる • ブラウザが DOM を直接書き換える • これにより、DOM を編集してリッチな見た目のエディタを構築することが可能になるリッチな見た目の例 27

Slide 28

Slide 28 text

contenteditableで見る4つの構成要素状態が DOM とその選択範囲になった。選択範囲は DOM なので単純に数値で表せない。 28

Slide 29

Slide 29 text

編集操作の例：Enterを押してみる • textarea なら \n を1文字挿入するだけだが、contenteditable の Enter はブロックを2つに分割する • そして状態によって Enter の意味が複雑に変わってくる 29

Slide 30

Slide 30 text

この状態で Enter を押すとどうなる？ • 新しい

が増える？ • テキストノードと

が同じ親に並ぶ •

が2つになる？ • Enter で割れるのは
か、外の
か • 箇条書きから抜けて
になる？ • 「あい」はどの段落に属するのか。 30

Slide 31

Slide 31 text

全部ブラウザが対応？ありがとう。。。 ©️ Cybozu, Inc. 31

Slide 32

Slide 32 text

しかし、最近はcontenteditableに任せない • 最近は RTE をサービスに導入するときは、大体ライブラリを採用する。 • 主要な RTE ライブラリ（ProseMirror, Lexical ...）はどれも contenteditable を描画先としてしか使わない • ① HTML は編集用の文書モデルではない • 汎用の div が何段でも入れ子になり、段落なのか行なのかも決まっていない • 「リスト項目の中に見出しは置けない」のような制約も書けない • ② 編集操作の仕様がない • Enter が作る要素はブラウザごとに違うし、それが求めるものではない可能性が高い。 • ③ 編集操作を差し替えるAPIがない • 止めたら中身は全部自分で書くしかない部分的に任せる手段がない 32

Slide 33

Slide 33 text

現代の RTE は4つ全部をJSで制御する理想としては、仮想 DOM のように JS 側で状態を管理して反映していく矢印キーやキャレットの描画など、一部ブラウザに任せる箇所もある 33

Slide 34

Slide 34 text

IME が話をややこしくする縦書きでも IME が少し絡むので解説 ©️ Cybozu, Inc. 34

Slide 35

Slide 35 text

ブラウザと IME の関係性日本語入力では候補のために IME ウィンドウを出す 35

Slide 36

Slide 36 text

（余談）IMEは RTE の一方通行フローの設計を崩す IME 入力中に DOM を更新すると中断されるため、設計を変える必要がある 36

Slide 37

Slide 37 text

第１章まとめ： Web の編集技術 • 編集は4つの構成要素 • 入力の解釈 → 編集操作 → 状態 → 状態の反映 • textarea はブラウザ / RTE は JS が実装を持っている縦書きにしたときに、どの要素が壊れるのか？ 37

Slide 38

Slide 38 text

２章：縦書きエディタの現状と特有の難しさ縦書きと横書き編集の技術的な違い現状のブラウザで出来ることの整理 38

Slide 39

Slide 39 text

縦書きとは • 書字方向が縦方向になったもの • 日本語では右から左の方向に書く（伝統的なモンゴル語では、左から右の縦書き） • CSS では writing-mode: vertical-rl で、表示側は10年ぐらい前から対応している • 現代でも小説 / 脚本 / 新聞 / 教育場面など、多くの場所で縦書きが現役 39

Slide 40

Slide 40 text

エピソード：世界的に縦書きってどう思われてるの？ • ProseMirror の作者に、新しいライブラリの Wordgard で縦書きエディタを対応しないか聞いてみた • 現代のデジタルテキストでは日本語って用途限られているよね？という認識だった • 今でも縦書きがバリバリ現役だということが、知られていないみたい 40

Slide 41

Slide 41 text

縦書きエディタとは • 縦書きのまま編集できるテキストエディタ • 最終成果物である縦書きを、そのまま編集したいという需要 o 文章のリズムや視線移動が異なったり、そもそも対応していない機能などもある o ルビや傍点、縦中横とセットで使われることが多い 41

Slide 42

Slide 42 text

縦書きエディタの現状 • ネイティブアプリでは先人の方々が沢山の実用的な縦書きエディタが公開されている • 一太郎、Word、InDesign、縦式、 TATEditor ... • 最近は小説や脚本エディタのブームなのか、自作をしている人を結構観測する • 実は、Web でも既に試みは多数あり、美しい縦書きエディタが公開されてる • しかし、縦書きでルビや縦中横の WYSIWYG、そのまま組版して PDF / Word / EPUB 出力ができる有名なサービスはなさ引用：https://note.com/ryuon_novel/n/n4b908d9d6c45 そう 42

Slide 43

Slide 43 text

Web で縦書きエディタを実装するには？一旦技術の話 ©️ Cybozu, Inc. 43

Slide 44

Slide 44 text

まずはで縦書きを考える ©️ Cybozu, Inc. 44

Slide 45

Slide 45 text

横書きから縦書き、実はほとんどの構成要素に変化がない修正は以下の３つが代表例（縦書きの表示が実装済み想定） ① キャレットの形と座標 / ② 矢印キーの移動先 / ③ IME の変換窓の位置と方向 45

Slide 46

Slide 46 text

① 縦書きキャレットの描画 • 選択位置からキャレットの矩形の表示位置を求める • 縦書きだと、横長のキャレットになる 46

Slide 47

Slide 47 text

② 縦書き方向の矢印キー対応 • 矢印キーを「文字が積まれる方向」「ブロックが積まれる方向」に割り当てている。 • 例）横書きだと、右矢印を文字が積まれる正の方向にしている • その割り当てを writing-mode で変える 47

Slide 48

Slide 48 text

③ IME の縦書き対応 • ブラウザの IME クライアントが矩形と縦書きフラグを IME に渡す縦書きの IME ウィンドウブロック進行方向に表示される 48

Slide 49

Slide 49 text

縦書きの PC ブラウザ対応状況 49

Slide 50

Slide 50 text

RTE では任せた範囲で自前実装かが決まる • と同様に変えるべき箇所は少ない ※ 矢印キーはノード選択など、ライブラリがハードコードしている処理は修正する必要あり ※ Wordgard は最近公開された ProseMirror の反省を生かしたライブラリ 50

Slide 51

Slide 51 text

も RTE も縦書きにするだけで動く • writing-mode: vertical-rl を当てるだけで、入力も選択もキャレット移動も、基本は動く 51

Slide 52

Slide 52 text

縦書きエディタ特有の WYSIWYG な機能は？ • 縦書きでよく使われる機能は、ルビ / 傍点 / 縦中横 / 正立とか • 行頭・行末禁則 / 追い込み / ぶら下がり / 追い出し / 約物の詰め / 字下げ ... 52

Slide 53

Slide 53 text

代表的なものを紹介 ©️ Cybozu, Inc. 53

Slide 54

Slide 54 text

ルビや縦中横は特に特殊な要素。アトム型なら作れる • ルビはふりがなやインラインブロック的な扱いで複雑 • アトム型は、親文字とふりがなを1つの塊として状態に持つ • 中にキャレットは入らない。塊を選んで別UIで入力する 54

Slide 55

Slide 55 text

ふりがなを直接編集することは、超絶難しい • 親文字やふりがなにキャレットを入れて打ち直すのは、レイアウトが特殊なため困難 • ブラウザ対応もほぼしていない。バグだらけのイメージ • 行の中にサブの行が入るのは他の言語にはなく、編集で対応されていない • インラインボックス的な扱いで、境界に内側と外側があるのもバグの原因。。 55

Slide 56

Slide 56 text

２章まとめ：縦書き関連で、「できることと / できないこと」の整理 Chromium / Firefox では実は既に動く。WYSIWYG も同様 56

Slide 57

Slide 57 text

３章：Web で実用的な縦書きエディタを利用できる世界にするには基本的な編集は既に動いている 57

Slide 58

Slide 58 text

縦書きエディタの「実用的」ってなんだろう？ • 既に縦書きのとか使えるよね？Web で縦書きエディタが使える世界は来てるのでは？ • 実用的は「機能性」と「使い心地」の両方を満たす。 • 機能性：課題に対して、なんらかの手段で実現することが可能か？ • 使い心地：いわゆる UX 。ストレスフリーに課題を解決できるか？用途縦書きメモ（基本）欲しい機能・<textarea> 縦書きブログ・ルビ・傍点・縦中横・禁則処理小説 (Web) ・画像やリストなど、一般的な要素出版・PDF / EPUB / Word の出力・ページ分割 / 高度な禁則処理 58

Slide 59

Slide 59 text

ぶっちゃけ、リッチな文章もで十分？横スクロールの縦書き <textarea> で十分な人は現段階で実用的 • マークダウンでルビのリッチな表現も可能。プレビューで確認するタイプ • ツールバーとかで、記法の入力とかもできる • PDF / EPUB / Word 出力もやろうと思えばできる • 横書きで縦書きプレビューすればいいという話もある 59

Slide 60

Slide 60 text

実用性に WYSIWYG を求める場合は？ • 普段使いするレベルに WYSIWYG を求める場合を考える • 何で WYSIWYG ⇨ 成果物のまま編集したい • 推敲と編集が同時にできる • 見たまま編集楽しい！ • マークダウンだと見づらい！ 60

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

ブログ・Web 小説縦書きエディタ • Web 小説や縦書きブログをそのまま書ける縦筆 Webを開発した • 見出し・画像・リスト・ルビ・縦中横などを扱える、一般的な WYSIWYG エディタ • ルビや縦中横はアトム対応で、モーダルから編集する自分なりのAIへの向き合い方 63

Slide 64

Slide 64 text

ブログ・Web 小説縦書きエディタの実用性良い点 • WYSIWYG 最高！！美しいフォントの縦書きで、リンクや縦中横とかそのまま使えるの良き • ルビはモーダル入力でも意外と困らない。編集は少し面倒。苦しい点 • Chromium は禁則処理のぶら下げができないので、「〇。」が先頭に来るのが気になる。 • ルビや傍点をつけると行間が変わらないようにするために、行間を大きくする必要がある • 行間が左右に均等につくので苦しい • Safari やモバイル対応が、ブラウザ対応状況で苦しい。 64

Slide 65

Slide 65 text

小説用の縦書きエディタ • PDF 出力できる小説エディタを作った • いなにわうどんさんが直近で公開した、組版ライブラリの minitype を活用 • RTE が出力する構造化データを、組版用の構造に変換すれば PDF 出力可能 • ページ分割も気合いで１列実装した 65

Slide 66

Slide 66 text

小説用の縦書きエディタの実用性良い点 • ライブラリのおかげで PDF 出力はできそう。Word と EPUB も恐らくできるかな。。？苦しい点 • 小説を執筆するのであれば、編集画面と組版の出力を一致させたいところ。。。 • 苦しい観点は Web ブログと似ている。 • ぶら下げや行間、どうにかしたいなぁ。。。 • ページ分割も一列は可能ではあるが、２列は苦しい。。。技術的にできるのか。。？ • 一列でも、スクロールや矢印キー周りの挙動はしっかり考える必要がある 66

Slide 67

Slide 67 text

割と Web でも WYSIWYG 縦書き編集ができる！ • ブラウザ対応がいい感じになってきたことで、Web でも WYSIWYG な縦書き編集が現実的に • 組版ライブラリで PDF 出力とかも対応できそう • ただ、縦書きエディタで細かい挙動は気になる点が多い。。使い心地を考えると微妙。 • クロスブラウザ対応は相変わらず苦しい。 67

Slide 68

Slide 68 text

Slide 69

Slide 69 text

もう一つの観点：開発者が「組み込める」さっきの話は、RTE 詳しい人が縦書きエディタを開発した場合。専門外の開発者が縦書きエディタをサービスに組み込める必要がある現状 • は、悩みも特になく利用できそう（クロスブラウザ対応ぐらい。。？） • RTE 文脈は情報が少なく、ちゃんとしたものを開発するにはハードルが高い • 特に RTE は組み合わせ爆発がすぐに起きるので、設計が適当だとバグだらけになる • 単純に実装が難しい機能もある • 周辺の PDF / Word / EPUB 出力周りも情報少なそう 69

Slide 70

Slide 70 text

RTE で一般開発者が作れるのはどこまでか 70

Slide 71

Slide 71 text

実用的な縦書き WYSIWYG エディタが利用できる世界にするには？２種類の対応が必要そう • RTE の概念・知識・ノウハウの普及 • Web 標準やブラウザの実装、難易度が高いユースケースの対応 71

Slide 72

Slide 72 text

自分は RTE の概念・設計を広める / 縦書きで UX が高い基盤を作る自分ができそうなのは下の２つ • 設計やノウハウを広める • RTE のチュートリアル・設計・ノウハウなどを記事や本などにまとめて出す • この登壇もその一つ • 縦書きエディタの基盤をつくる • 縦書きエディタ基盤ライブラリを実用に足る形にする • JS で解決できない部分はブラウザへのパッチと仕様に関わっていきたい 72

Slide 73

Slide 73 text

おわりに 73

Slide 74

Slide 74 text

なぜ Web で縦書きエディタを開発するのか？ • いや〜簡単そうで難しい。結論が出ていない • ネイティブで沢山あるから、Web でできる必要ないじゃん！ • Web アプリの存在が反論になる？Word とかもネイティブから Web でも可能になった • ブラウザの上に構築されているのが嬉しい？インストールいらない・URLで共有・高速なアップデート • Web 小説とかの文化もある。ここで縦書きエディタが組み込める選択肢があっても良くないか • 横書きで書いたものをプレビューすればいいのでは？ • 純粋に縦書きは縦書きで書いた方がいい。空行や目線の追い方など異なる部分が多い 74

Slide 75

Slide 75 text

なぜ自分が縦書きエディタを開発しているのか？ • 自分は RTE 芸人。Web での縦書きエディタは、取り組んでいる人も少なそうなので、技術的にもおもろそう、第一人者になれるかも！みたいなノリだった • 小説を書くから縦書きエディタほしいみたいな需要からではない。。。 • 自分が RTE 芸人だからこそ、やるべきことは縦書きエディタを求める人々が開発できる知識の提供・基盤の開発であると思う • 実際の使われ方は小説や脚本を執筆・出版する人に任せ、その声を聞いて基盤や実現方法の考察に関与していきたい • そもそも、RTE 自体の概念・設計の話が世の中に少ないので、その普及からやりたい • RTE を開発するときに、チーム内の共通言語を持つのが難しい 75

Slide 76

Slide 76 text

なぜ RTE の専門性を高めているのか？ • これは自分のキャリア・興味の話になる • 特定分野の専門性を高める方が自分には向いていそう • RTE はツリーの編集という難易度が高くやりがいがある。Web 標準やブラウザ実装などに関わるきっかけにも • マークダウン / プレビューより WYSIWYG 派閥。書いてて楽しいね • AI 時代で専門性が意味なくなるのでは。。？と思ったけど、AI は今のところ増幅器であるので、本当にその分野に詳しければ価値はありそう。むしろ仕事が捗る感じがある • エディタ自体がなくなるのも、流石に当分先じゃないかな。全部 AI や音声入力は無理がありそう。 • むしろ WYSIWYG + AI はもっと探求したいね 76

Slide 77

Slide 77 text

まとめ • Web の縦書きエディタは動くところまで来ている • より実用的で普及するためには、知識の普及と基盤が要る • 自分は RTE の概念や設計、ノウハウを世の中に広めつつ、縦書きの基盤も開発してみる皆さん、ぜひ運営しているサービスに縦書きエディタの導入を検討してください！ブログとかも縦書きにできるよ！ 77

Slide 78

Slide 78 text

色んな話をしましたが。。。小説や脚本を書く人の意見を知りたい！ • 僕は小説を書かないので、小説執筆に求められる縦書きエディタがわからない。。 • 縦書きではなく、RTE の人間という自覚。。。 • どんな縦書きエディタを求めるかの声を聞きたいです！！ • 懇親会とか X とか！Web RTE には自信があります！ぜひ聞かせてください！ • RTE の話もしたい！！ • 皆さんの RTE 楽しい・苦しい事情聞きたい！ 78