日本語のページをブラウザで見ているとおかしな位置で改行されることが多いのですが、単語と単語の間にスペースを入れる英語などと異なり、日本語では分かち書きがされていないのが原因。単語の途中で文章が折り返されてしまう原因になっています。BudouXは機械学習モデルを利用して容量を抑えつつ、サードパーティーのAPIやライブラリに依存せずに分かち書きを行ってくれるオープンソースライブラリなので、読みやすい改行が実現できます。

Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器

https://developers-jp.googleblog.com/2023/09/budoux-adobe.html

BudouXの使用イメージは下図の通り。従来は画面幅によっては「最先端」や「テクノロジー」などの単語の途中で改行が行われてしまう事がありましたが、BudouXを使用することで単語の前後で改行を入れる事ができ、読みやすさを改善可能です。



BudouXは数文字ずつ並べた表現であるNグラムを特徴量として使用し、そのNグラムに対してAdaBoostアルゴリズムを適用した機械学習モデルを利用しています。機械学習のモデルがそれぞれの文字ごとに「次の文字との間で切るべきか」を予測することで適切な改行を実行しているとのこと。

モデルの学習には京都大学情報学研究科とNTTコミュニケーション科学基礎研究所の共同研究ユニットによる解析済みブログコーパスを使用したとのことです。なお、学習についての詳細な手法はリポジトリ内のscripts/READMEにて解説されています。

また、実際にBudouXを活用している事例としてadobe.comの例が登場しています。Adobeは従来より区切り文字を手動で挿入することで適切な改行を実施していましたが、adobe.comの構築に利用するコンテンツ管理システム(CMS)をAdobe Experience ManagerからAEM Franklinに移行する際に日本語の改行処理の機能がなくなってしまったため、BudouXを導入したとのこと。

ただし、導入の際には3つの課題が残っていたと述べられています。

1：精度の問題

Adobeのサイトでよく使用されている言葉のうち、「お、ご、などの尊敬語」「デジタルエクスペリエンスプラットフォームなどの長いカタカナの複合名詞」などについてBudouXの標準モデルでは精度が低いという問題がありました。この問題についてはAdobe.comのデータで学習させることで適切な機械学習モデルを開発して解決したとのこと。

2：禁則処理の問題

行頭や行末に特定の文字が来ないように文字の並びを調整する処理のことを禁則処理といいます。普段はブラウザが自動で禁則処理を行ってくれますが、BudouXの使用時にはBudouXの区切り文字が優先されて行頭に疑問符が付いてしまうなどの問題が発生したとのこと。



Adobeはルールベースの禁則処理を追加することでこの問題を解決しました。

3：細かいカスタマイズの問題

場合によっては、BudouXの自動処理ではなく手動で特定の位置に区切りを入れたいことがあります。Adobeは「改行ルールを手動で追加する」「ページの一部にBudouXを適用しないようにする」「BudouXに渡すパラメーターを調整する」などの調整をページごとに設定できるようにすることで、多くの部分でBudouXの自動処理の恩恵を受けつつ、細かい部分も理想通りに改行させることが可能になったとのこと。

こうした改行処理の「あり」「なし」の違いを一見して分かる比較画像が掲載されていました。改行処理が無い場合、「ツール」「追加」「アクセス」などの単語の途中で改行が入ってしまいます。



BudouXを使用した改行処理を入れることで下記のように読みやすい表示にできるというわけ。



BudouXはUnicodeおよび国際化と地域化に関するライブラリである「International Components for Unicode(ICU)」の一部となっており、ウェブに限らずさまざまなプラットフォームで利用され始めているとのこと。そのほか、2023年内の登場が予定されているAndroid 14や、2023年10月31日リリース予定のChrome 119でBudouXが採用される見通しで、lang属性が「ja」に設定されている要素にCSSで「word-break: auto-phrase」 を設定するだけでBudouXの自動改行機能が利用可能になります。



なお、BudouXはJavaScript・Python・Javaのライブラリが用意されており、それぞれの使用例も記載されています。

◆JavaScript

パッケージ管理ツールのNPMを利用する場合、「npm i budoux」でBudouXをインストール可能です。インストール後は下記のコードで利用可能です。

import { loadDefaultJapaneseParser } from 'budoux' ;
const parser = loadDefaultJapaneseParser();
console.log(parser.parse('今日は天気です。')); // ['今日は', '天気です。']


NPMを利用せずES Moduleとして読み込む場合は下記のコードが利用できます。

<script type="module"> import {loadDefaultJapaneseParser} from
'https://unpkg.com/budoux/module/index.js';
const parser = loadDefaultJapaneseParser();
console.log(parser.parse('今日は天気です。')); // ['今日は', '天気です。']
</script>


さらにWeb Components版も用意されており、下記のコードでBudouXを読み込むことができます。

<script
src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>


その後、「budoux-ja」要素にテキストを設定すると、Shadow Rootに自動でテキスト折り返しを整えるためのマークアップが挿入されます。

<budoux-ja>今日は天気です。</budoux-ja>

<!-- Shadow Root -->

<span style="word-break: keep-all; overflow-wrap:
anywhere;">今日は<wbr>天気です。</span>


◆Python

Pythonではパッケージ管理システムのpipを使用し、「pip install budoux」というコマンドでBudouXをインストールできます。その後は下記のコードで利用可能です。

import budoux

parser = budoux.load_default_japanese_parser()

print(parser.parse('今日は天気です。')) # ['今日は', '天気です。']


◆Java

BudouXモジュールはMaven Central Repositoryにて「com.google.budoux」として公開されています。インストール後は下記のコードで利用可能です。

import com.google.budoux.Parser;

public class App {
public static void main(String[] args ){
Parser parser =
Parser.loadDefaultJapaneseParser();
System.out.println(parser.parse("今日は天気です。"));
// ["今日は", "天気です。"]
}
}


◆デモ

実際にBudouXの動作を確認できるよう、デモを用意してみました。

このテキストエリア内に文字を入力して下さい。下部にBudouXで区切りを設定した結果が表示されます。サイズを変更した際の結果が分かりやすいよう、横幅をいくつかに分けて表示してみました。

・横幅360px

このテキストエリア内に文字を入力して下さい。下部にBudouXで区切りを設定した結果が表示されます。サイズを変更した際の結果が分かりやすいよう、横幅をいくつかに分けて表示してみました。

・横幅540px

このテキストエリア内に文字を入力して下さい。下部にBudouXで区切りを設定した結果が表示されます。サイズを変更した際の結果が分かりやすいよう、横幅をいくつかに分けて表示してみました。

・横幅100％

このテキストエリア内に文字を入力して下さい。下部にBudouXで区切りを設定した結果が表示されます。サイズを変更した際の結果が分かりやすいよう、横幅をいくつかに分けて表示してみました。