Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16

DroidKaigi 2025で発表したものです。https://2025.droidkaigi.jp/timetable/946512/

Android 16でPaintに追加されるVERTICAL_TEXT_FLAGにより、ついに標準で縦書きテキストの描画が可能になります。
本セッションではその新機能とJetpack Composeを組み合わせた簡単な縦書きテキストエディタの実装方法を具体的なコードを交えて紹介します。

Androidで縦書きを簡単に使うにはWebViewが必要でした。一方iOSでは以前より縦書きのテキスト描画がサポートされていたため、縦書きのできるテキストエディタアプリの数はAndroidとiOSで天と地ほどの差がある現状です。
日本語文化の重要なピースである縦書きをAndroidにも普及させるべく、本セッションにより誰もが「Androidで縦書きエディタを作れる」ようになることを目指します。

本セッションではAndroid 16の縦書きのテキスト描画APIのことだけではなく、Jetpack Composeで独自のテキストエディタを作る方法も説明します。
またJetpack Composeにはテキストの表示からIMEによるテキスト入力を分離して抽象的に扱うことのできる先進的な設計が存在しており、その先進性についてAndroid従来のView含めた他のプラットフォームの事情と比較して解説します。

#発表のアウトライン
## 縦書きテキスト
・PaintへのVERTICAL_TEXT_FLAGの追加
・縦書きテキストの描画
## Jetpack Composeのテキスト入力とテキスト描画
・PlatformTextInputModifierNode とは
・AndroidのInputConnectionとの関係について
・androidx.compose.text.input からの変遷
## Jetpack Composeと他プラットフォームのテキスト入力周りのAPI設計
・iOS, macOS, Windowsとの比較
## 具体的な縦書きエディタの実装コード

Transcript

1. Android 16 × Jetpack Composeで縦書き テキストエディタを作ろう rokuroku / DroidKaigi 2025 Jellyfish － 2025.09.12 / 11:20 ~ 12:00 (40min)
2. 自己紹介 • rokuroku / @496_ on X • 趣味プロダクト ◦ TATEditor - 縦書きエディタ ▪ Android / iOS / macOS / Windows ▪ https://tateditor.app
3. Android 16 × Jetpack Composeで縦書きテキ ストエディタを作ろう
4. なんで縦書き？ • 日本語の縦書きと横書き • 小説、漫画、新聞、短歌、国 語
5. コンピュータと縦書きの歴史 • 基本的に横書き • Android, Web, Windows, macOS, iOS
6. Androidと縦書き（2019年） • DroidKaigi 2019 ◦ ゼロから実装する縦書きTextViewとそ の周辺技術 https://2019.droidkaigi.jp/timetable/67094/ ◦ 当時のAndroidは縦書きが困難
7. Androidと縦書き（2021年） API Level 31からCanvasでフォン トのグリフIDを直接指定して文字を 描画できるようになった canvas.nativeCanvas.drawGlyphs(intArrayOf (1424, 65154), 0, floatArrayOf(100f, 100f, 100f + paint.textSize, 100f), 0, 2, result.getFont(0), paint) https://developer.android.com/reference/android/graphics/Canvas#drawGlyphs(int%5B%5D,%20int,%20flo at%5B%5D,%20int,%20int,%20android.graphics.fonts.Font,%20android.graphics.Paint)
8. Webと縦書き • writing-mode: vertical-rl; • Internet Explorer 5.5 (2000年) の writing-mode: tb-rl; が始まり • AndroidアプリでもWebViewを使えば縦 書きのテキスト表示は可能
9. • 一太郎が1993年、Wordは1995年から 縦書きができる • 縦書きで描画するAPIは2000年から。縦 書きテキストエディタも複数ある http://www.aya.or.jp/~guyveriv/ichitaro/taro05.htm https://stackoverflow.com/questions/2250437/how-to-draw-vertical-text-in-windows-gui Windowsと縦書き
10. macOSと縦書き • macOSのNSTextViewは2011年から標 準で縦書きができ、標準アプリのテキスト エディットでも縦書きができる • Apple純正のPagesも2019年に縦書き対 応がされた https://developer.apple.com/documentation/appkit/nstextview/setlayoutorientation(_:)
11. iOSと縦書き • macOS同様、2019年にPagesが縦書き 対応された • 2013年 (iOS 7) から文字描画で縦書き が可能で、縦書きテキストエディタのアプ リも多数リリースされている https://developer.apple.com/documentation/foundation/nsattributedstring/key/verticalglyphform
12. スマホと縦書き • スマホで文章を縦書きのまま編集したい 需要は存在する • 日本の縦書き文化的にAndroidアプリに も色々なアプリの選択肢が欲しい
13. Android 16と縦書き • Canvasに新しいオプションが登場🎉 ◦ VERTICAL_TEXT_FLAG • WebViewを使う以外の簡単な縦書きの 表示方法が確立した
14. 本セッション • 提供するもの ◦ 2025年の縦書きエディタの作り方 • 目指す世界 ◦ 縦書きテキストエディタがGoogle Play にいくつも並ぶ
15. 縦書きのテキストを描画したい
16. 縦書きCanvas @Composable fun VerticalCanvasSample( modifier: Modifier = Modifier.fillMaxSize(), text: String, ) { Canvas(modifier = modifier) { val verticalPaint = TextPaint().apply { textSize = 40.sp.toPx() flags = flags or VERTICAL_TEXT_FLAG } drawIntoCanvas { canvas -> canvas.nativeCanvas.drawText(text, 0, text.length, 100f, 100f, verticalPaint) } } }
17. VERTICAL_TEXT_FLAG API Level 36！！ https://developer.android.com/reference/android/graphics/Paint#VERTICAL_TEXT_FLAG
18. 縦書きとフォント 描画の原点（ベースライン）に注意 https://freetype.org/freetype2/docs/tutorial/step2.html
19. 縦書きとフォント 描画の原点（ベースライン）に注意 https://freetype.org/freetype2/docs/tutorial/step2.html
20. ベースラインと調整 drawIntoCanvas { canvas -> canvas.nativeCanvas.drawText(text, 0, text.length, 100f, 100f, verticalPaint) canvas.nativeCanvas.drawText(text, 0, text.length, 100f, 100f, paint) canvas.drawRect(0f, 0f, 100f, 100f, Paint()) canvas.drawLine(Offset(100f, 100f), Offset(9999f, 100f), Paint()) canvas.drawLine(Offset(100f, 100f), Offset(100f, 9999f), Paint()) }
21. カラー絵文字 カラー絵文字の描画位置 がおおよそ1文字分 Paint.FontMetrics.ascent だけ上にズレている
22. カラー絵文字 TextRunShaperのPositionedGlyphs等で Fontを見て調整できます （Android絵文字ポリシーもあるので表示し ないわけにはいかない） https://support.google.com/googleplay/android-developer/answer/11190644?hl=ja https://developer.android.com/reference/android/graphics/text/PositionedGlyphs#getFont(int)
23. 実機の注意点 端末によって縦書き用グリフがないフォント がインストールされている 念のためGoogleFontを使うとより安心
24. ダウンロード可能フォント val HinaMinFont = GoogleFont(name = "Hina Mincho") val HinaMinFontFamily = FontFamily( Font(googleFont = HinaMinFont, fontProvider = provider), ) val basePaint = TextPaint().apply { val typeface = createFontFamilyResolver(context).resolve(HinaMinFontFamily) if (typeface is Typeface) { this.typeface = typeface } } https://developer.android.com/develop/ui/compose/text/fonts?hl=ja#use-downloadable-fonts https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/package-summary#createFontFamilyResolver(android.co ntent.Context)
25. テキストの描画の話はここまで と、思っていたら……
26. 2025/8/27に新ライブラリ登場🎉 androidx.text:text-vertical:1.0.0-alpha01 A new vertical text library to support vertical text layout mainly for Japanese, by leveraging the new VERTICAL_TEXT_FLAG flag added in Android 16. https://developer.android.com/jetpack/androidx/releases/text https://developer.android.com/reference/kotlin/androidx/text/vertical/VerticalTextLayout VerticalTextLayout
27. VerticalTextLayoutの使用例 val paint = TextPaint().apply { textSize = 36.sp.toPx() } val text = "とある科学の超電磁砲 " val layout = VerticalTextLayout.Builder( text, 0, text.length, paint, 9999f ).build() layout.draw( canvas.nativeCanvas, canvas.nativeCanvas.width.toFloat(), 0f )
28. ルビ、 ルビとは: ふりがなのこと val text = SpannableStringBuilder() .append("とある科学の ") .append("超電磁砲", RubySpan.Builder( "レールガン " ).build(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) .toSpannable() https://developer.android.com/reference/kotlin/androidx/text/vertical/RubySpan.Builder
29. 傍点とは: 1文字1文字に 強調点を打つこと val text = SpannableStringBuilder() .append("とある科学の ") .append("超電磁砲", EmphasisSpan(STYLE_SESAME), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) .toSpannable() https://developer.android.com/reference/kotlin/androidx/text/vertical/EmphasisSpan ルビ、傍点、
30. 縦中横とは: 文章の一部を横 並びで表示 val text = SpannableStringBuilder() .append("今日、") .append("2025", TextOrientationSpan.TextCombineUpright(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) .append("年") .append("9", TextOrientationSpan.TextCombineUpright(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) .append("月") .append("12", TextOrientationSpan.TextCombineUpright(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) .append("日。") .toSpannable() https://developer.android.com/reference/kotlin/androidx/text/vertical/TextOrientationSpan.TextCombineUpright ルビ・傍点・縦中横
31. TextOrientation デフォルトは縦書き中の英 数字とかをいい感じに横倒 しにしてくれる
32. TextOrientation CSSのtext-orientationに相当 MIXED, UPRIGHT, SIDEWAYS https://developer.android.com/reference/android/icu/lang/UProperty#VERTICAL_ORIENTATION https://drafts.csswg.org/css-writing-modes/#text-orientation https://www.unicode.org/reports/tr50/ なかったらandroid.icu.langを使って1文字ず つ回転させるかどうか判定が必要
33. VerticalTextLayoutと横書き TextOrientation.SIDEWAYS + 90度回転
34. テキスト描画系の見地から ここまで高級なテキスト描画がプラット フォームで提供される例は他になく、画期 的。日本語テキスト環境の普及に一役買っ て欲しい。
35. Composeで縦書きビューア nativeCanvasが出てくるけどCanvas + VerticalTextLayoutでComposeからサッと 縦書きができます
36. テキストエディタってどう作るのか
37. Composeで縦書きエディタ ビューアは作れるが、エディタは……？ onKeyEvent……？
38. テキストエディタとは エディタ
39. テキストエディタとは エディタ
40. テキストエディタとは エディタ
41. InputConnection キーボードからアプリへの通信を担う テキスト取得、挿入、削除、選択や、未確定 文字列の更新など
42. InputConnection InputConnection エディタ
43. InputMethodManager アプリからキーボードへの通信 を担う レイアウト変更の通知、選択範 囲変更の通知、テキスト変更 の通知
44. InputMethodManager InputMethodManager エディタ InputConnection
45. 文字入力はプラットフォームに依存する View.onCreateInputConnection (EditorInfo) InputMethodManager.updateSelection (View, int, int, int, int) https://developer.android.com/reference/android/view/View#onCreateInputConnection(android.view.inputmethod.EditorInfo) https://developer.android.com/reference/android/view/inputmethod/InputMethodManager#updateSelection(android.view.View,%20int,%20int,%20i nt,%20int) Android Viewに依存する
46. ところで今はComposeの時代です
47. ComposeでIMEと通信する 大きく以下の3つのやり方が存在する • TextInputService (1.0~1.7) ◦ deprecated • PlatformTextInputModifierNode (1.6~) • PlatformTextInputInterceptor (1.7~)
48. Compose 1.0 (2021年) カスタムテキストエディタを実装するには TextInputServiceを使えば良かった deprecatedだがカスタムエディタのエッセン スが詰まっているので紹介します！ https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/TextInputService
49. アプリ側は以下でEditCommandの処理と TextInputSessionへの通知を実装する open fun startInput( value: TextFieldValue, imeOptions: ImeOptions, onEditCommand: (List<EditCommand>) -> Unit, onImeActionPerformed: (ImeAction) -> Unit, ): TextInputSession TextInputService
50. EditCommand Known direct subclasses BackspaceCommand, CommitTextCommand, DeleteAllCommand, DeleteSurroundingTextCommand, DeleteSurroundingTextInCodePointsCommand, FinishComposingTextCommand, MoveCursorCommand, SetComposingRegionCommand, SetComposingTextCommand, SetSelectionCommand https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/EditCommand
51. CommitTextCommand 確定した文字列を挿入するコマンド https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/CommitTextCommand
52. SetComposiongTextCommand 未確定も文字列を挿入するコマンド https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/SetComposingTextCommand
53. ComposingText 未確定文字列
54. SetSelectionCommand 選択範囲を変更するコマンド https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/SetSelectionCommand
55. EditCommand EditCommand エディタ
56. TextInputSession アプリ起因の変更を伝える仕組み • updateState(oldValue: TextFieldValue?, newValue: TextFieldValue) • updateTextLayoutResult(...) https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/TextInputSession
57. TextInputSession TextInputSession エディタ EditCommand
58. TextInputSession fun updateTextLayoutResult( textFieldValue: TextFieldValue, offsetMapping: OffsetMapping, textLayoutResult: TextLayoutResult, textFieldToRootTransform: (Matrix) -> Unit, innerTextFieldBounds: Rect, decorationBoxBounds: Rect, ) https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/TextInputSession#updateTextLayoutResult(androidx.co mpose.ui.text.input.TextFieldValue,androidx.compose.ui.text.input.OffsetMapping,androidx.compose.ui.text.TextLayoutResult,kotlin.Fu nction1,androidx.compose.ui.geometry.Rect,androidx.compose.ui.geometry.Rect)
59. EditCommand / TextInputSession EditCommand エディタ TextInputSession
60. This class is deprecated (1.7) Modifier.Nodeの登場 (1.3) と普及 BasicTextField2の登場 (1.6) と進化
61. Compose 1.6 (2024年) PlatformTextInputModifierNodeが登場 Modifier.Nodeなので再コンポーズで再生 成されない
62. 関数はestablishTextInputSessionだけがあり、そ の中でInputConnectionを作る関数を渡します PlatformTextInputMethodRequest.createInputC onnection(EditorInfo) https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/PlatformTextInputModifierNode#(androidx.compose.ui.platform.PlatformTextInput ModifierNode).establishTextInputSession(kotlin.coroutines.SuspendFunction1) https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/PlatformTextInputMethodRequest#createInputConnection(android.view.inputmeth od.EditorInfo) PlatformTextInputModifierNode
63. InputConnection InputConnection 再び エディタ
64. BasicTextFieldとTextInputService わざわざTextInputServiceが担っていた役 割の多くはBasicTextFieldの進化が吸収し た inputTransformation (1.7~) outputTransformation (1.7~)
65. 1.7のBasicTextField TextFieldStateが正式導入されましたね🎉 undoStateという実験的APIも入っていて、エ ディタを作るならとても便利 https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/input/TextFieldState#undoState()
66. TextFieldState BasicTextField外からテキストを編集しても 問題が起きにくい設計になっている
67. PlatformTextInputInterceptor 1.7で@ExperimentalComposeUiApiとして 導入された これを使えばInputConnectionを乗っ取るこ ともできる
68. PlatformTextInputInterceptor キーボードからアプリへの通信のみ PlatformTextInput Interceptor エディタ
69. PlatformTextInputInterceptor アプリからキーボードへの通信にはない ここのInterceptは まだ存在しない PlatformTextInput Interceptor エディタ
70. BasicTextFieldの限界 BasicTextFieldは縦書きのような特殊なテ キスト描画は対応できないが、ここに PlatformInputMethodInterceptor的なのが あれば全てが解決されそう
71. 縦書きテキストエディタの作り方 まとめ
72. 縦書きエディタの作り方 1/2 エディタ部分の実装方法は大きく3つある。 1. PlatformTextInputModifierNode.establishTextInput 2. deprecatedのTextInputService.startInput 3. 不可視のBasicTextFieldとTextFieldStateで同期 最後の3.はInputMethodManagerのInterceptorが存在 しないので変換候補ウインドウの表示位置が懸念
73. 縦書きエディタの作り方 1/2 ここのやり取りをどう行うかの選択 エディタ
74. ビューア部分の実装はCanvas + VERTICAL_TEXT_FLAGがおすすめ ※文字のレイアウトが取得できないのでVerticalTextLayoutはま だエディタには使えないが今後の正式版やアップデートが楽しみ 縦書きエディタの作り方 2/2
75. サンプルコード 紹介した3つの縦書きエディタの簡易実装を 含むサンプルアプリを公開してます https://github.com/cc4966/droidkaigi2025-vertical-text-editor
76. ここが厳しい 1%未満（AppCompatCanvas欲しい）
77. まとめ • Android 16でCanvasに縦書きが登場 • BasicTextFieldの進化と今後への期待 • PlatformTextInputModifierNodeでフル 機能のInputConnectionが利用可能に
78. おわりに サンプルアプリを参考に縦書きエディタをぜ ひ作ってください！