「BudouX」を使ってテキストの折り返しを自動化しよう！

こんにちは、ほそかわです。

GoogleのGithubリポジトリに日本語テキストの自動改行マークアップ支援ライブラリ「BudouX」が公開されました。

日本語は言語的な特徴として明確な文字区切りが存在しないため、一般的なブラウザはテキストの折り返しを最適化できていません。
BudouXはそんな問題に対し機械学習によって日本語の文章に自然な改行位置を自動挿入してくれます。

オフィシャルのサンプルとして、WEBページでの利用が前提となるHTMLのwbrタグ自動挿入するデモが用意されており、WEBページのUX向上自動化の可能性を感じます。

具体的にどんなことができるのか試してみましょう。

魅力

BudouXはPythonとJavaScriptのモジュールとして提供されています。今回はJavaScript版を利用します。

こちらの手順を参考にしますBudouXをインストールします。

npm install budoux

コマンドが提供されているので実行しています。

npx budoux 今日は天気です。

今日は
天気です。

改行で分割されて出力されました。

-Hオプションをつけるとwbrタグを含む形で出力することもできます。

npx budoux 今日は天気です。 -H

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

WEBページに埋め込んで利用する際には、より使いやすいWebComponentが提供されています。

CDNからライブラリを読み込み、

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

budoux-jaタグで囲うとプリセットの学習モデルを使ったbudouxの自動wdrタグが挿入が実行されます。

before

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

after

今日は<wbr />とても<wbr />天気です。

これを使って青空文庫から引用した夏目漱石「吾輩は猫である」序文を自動改行してみます。

吾輩は<wbr />猫である。<wbr />名前は<wbr />まだ<wbr />無い。どこで<wbr />生れたかとんと<wbr />見当が<wbr />つかぬ。

吾輩は猫である冒頭文
折り返しが変わりましたね。

このようにBudouXを利用するとテキストの折り返し設定を自動化することができます。
テキストの折り返し方法について新たな引き出しが増やすことが出来ました。

というわけで、UX改善に興味のあるエンジニアもぜひ一緒に働きませんか？興味がある方はどしどしご応募ください！

こちらよりご応募ください！