Budou: 日本語のための自動折り返し制御ツール
2016年10月20日木曜日
Budou は、ウェブページ上で日本語で書かれた単語が途中で折り返されてしまうことを防ぐためのツールです。オープンソース プロジェクトとして、GitHub で公開しています。
ウェブページ上の日本語の文章は、行末に置かれると、単語の途中でも折り返されてしまうことがあります。皆さんも、以下のような文章を見たことがあるはずです。「新しい Android の世界へようこそ。」という見出しの「ようこそ」という単語が、「ようこ」と「そ」の間で折り返され、ひとまとまりの単語として認識しにくくなっています。このように、単語の途中で発生する折り返しは、文章の読みやすさを下げる一因です。
この問題は、日本語がラテン文字を使用する英語等の言語と違って、単語と単語の間に区切りを持たないことに起因しています。ラテン文字を使用する多くの言語では、単語と単語の間に空白による区切りがあり、単語の途中で折り返しが行われないようにブラウザのデフォルト環境で指定されているため問題は発生しませんが、日本語では、単語の途中でも関係なく折り返しが発生します。
従来も、与えられた日本語の文章に対して単語の区切りを指定し、単語の途中で折り返しを行わないように CSS で制御することでこの問題に対処できました。しかし、このような処理を行うには、単語の区切りが指定できる日本語に精通した作業者が必要でした。Google ではたくさんのウェブサイトを制作していますが、多くは英語をベースに多言語化を施し各国に提供しています。そのため、ウェブサイトを制作するエンジニアが、特定の言語を理解しなくても美しいタイポグラフィを提供できる方法が模索されてきました。
Budou は、この問題に対して自動化されたソリューションを提供するために開発されました。 Cloud Natural Language API を使って単語の境界判別と構文解析を行い、その出力結果をもとに文節を特定します。推定された文節ごとに display: inline-block を指定した SPAN タグで囲むことで、文章の折り返し可能な位置を指定します。Budou によって折り返し可能な位置が指定された文章を HTML に変換することで、デバイスの画面幅に関わらず、最適な位置で折り返された文章を自動で表示できるようになります。以下の図では、「常に最新、最高のモバイル。Android を開発した同じチームから。」という文章がさまざまなブロック幅で表示されたときの折り返しの変化を表しています。上のブロックが Budou 適用前、下のブロックが Budou 適用後です。Budou を適用することにより、ブロック幅に関わらず適切な位置で折り返しが行われることがわかります。
また Budou は、Python で記述されたシンプルなスクリプトなので、テンプレートエンジンのカスタムフィルタとして使うことも、Grunt や Gulp を始めとするビルド ツールのタスクとして使用することもできます。ひとつの文章を処理するたびに Cloud Natural Language API にリクエストを投げますが、バージョン 0.1.1 以降では、すでに処理した文章に対しては重複したリクエストを投げないキャッシュ機能も利用できるようになりました。また、静的コンテンツに対して使う場合には、Budou であらかじめ処理しておいた HTML を使えば、追加リクエストが発生しません。
Budou は、ウェブページのタイトルや見出しなどの比較的短い文章に適用されることを想定して開発しています。スクリーン リーダーの挙動によっては SPAN タグで囲まれた部分や WBR タグで区切られた部分を分割して読み上げることもあるため、長い文章に適用するときには注意が必要です。
2016 年 9 月現在、Cloud Natural Language API がサポートする言語は、英語、スペイン語、日本語です。現時点で Budou は、日本語のみをサポートしています。今後、Cloud Natural Language API のサポート言語の拡充に伴って、中国語やタイ語など、日本語以外の単語区切りを持たない言語にも対応できるようになるかもしれません。
みなさんのご意見・ご要望は大歓迎です。ぜひ GitHub を通してご連絡ください。
https://github.com/google/budou
Posted by Shuhei Iitsuka - Brand Studio
ウェブページ上の日本語の文章は、行末に置かれると、単語の途中でも折り返されてしまうことがあります。皆さんも、以下のような文章を見たことがあるはずです。「新しい Android の世界へようこそ。」という見出しの「ようこそ」という単語が、「ようこ」と「そ」の間で折り返され、ひとまとまりの単語として認識しにくくなっています。このように、単語の途中で発生する折り返しは、文章の読みやすさを下げる一因です。
[単語の途中で折り返しが発生している例]
この問題は、日本語がラテン文字を使用する英語等の言語と違って、単語と単語の間に区切りを持たないことに起因しています。ラテン文字を使用する多くの言語では、単語と単語の間に空白による区切りがあり、単語の途中で折り返しが行われないようにブラウザのデフォルト環境で指定されているため問題は発生しませんが、日本語では、単語の途中でも関係なく折り返しが発生します。
従来も、与えられた日本語の文章に対して単語の区切りを指定し、単語の途中で折り返しを行わないように CSS で制御することでこの問題に対処できました。しかし、このような処理を行うには、単語の区切りが指定できる日本語に精通した作業者が必要でした。Google ではたくさんのウェブサイトを制作していますが、多くは英語をベースに多言語化を施し各国に提供しています。そのため、ウェブサイトを制作するエンジニアが、特定の言語を理解しなくても美しいタイポグラフィを提供できる方法が模索されてきました。
Budou は、この問題に対して自動化されたソリューションを提供するために開発されました。 Cloud Natural Language API を使って単語の境界判別と構文解析を行い、その出力結果をもとに文節を特定します。推定された文節ごとに display: inline-block を指定した SPAN タグで囲むことで、文章の折り返し可能な位置を指定します。Budou によって折り返し可能な位置が指定された文章を HTML に変換することで、デバイスの画面幅に関わらず、最適な位置で折り返された文章を自動で表示できるようになります。以下の図では、「常に最新、最高のモバイル。Android を開発した同じチームから。」という文章がさまざまなブロック幅で表示されたときの折り返しの変化を表しています。上のブロックが Budou 適用前、下のブロックが Budou 適用後です。Budou を適用することにより、ブロック幅に関わらず適切な位置で折り返しが行われることがわかります。
[Budou 適用前と適用後の文章の折り返しの比較]
また Budou は、Python で記述されたシンプルなスクリプトなので、テンプレートエンジンのカスタムフィルタとして使うことも、Grunt や Gulp を始めとするビルド ツールのタスクとして使用することもできます。ひとつの文章を処理するたびに Cloud Natural Language API にリクエストを投げますが、バージョン 0.1.1 以降では、すでに処理した文章に対しては重複したリクエストを投げないキャッシュ機能も利用できるようになりました。また、静的コンテンツに対して使う場合には、Budou であらかじめ処理しておいた HTML を使えば、追加リクエストが発生しません。
Budou は、ウェブページのタイトルや見出しなどの比較的短い文章に適用されることを想定して開発しています。スクリーン リーダーの挙動によっては SPAN タグで囲まれた部分や WBR タグで区切られた部分を分割して読み上げることもあるため、長い文章に適用するときには注意が必要です。
2016 年 9 月現在、Cloud Natural Language API がサポートする言語は、英語、スペイン語、日本語です。現時点で Budou は、日本語のみをサポートしています。今後、Cloud Natural Language API のサポート言語の拡充に伴って、中国語やタイ語など、日本語以外の単語区切りを持たない言語にも対応できるようになるかもしれません。
みなさんのご意見・ご要望は大歓迎です。ぜひ GitHub を通してご連絡ください。
https://github.com/google/budou
Posted by Shuhei Iitsuka - Brand Studio
