自動でいい感じに改行を行ってくれる「BudouX」をWraptasに導入してみた！
個人向けページをみる法人のお客様はこちらLINEで相談するWaiting Listに登録プロトアウトブログ一覧法人向けお問い合わせ制作物一覧をみるプロトアウトスタジオとは無料オンライン相談
個人向けページをみる法人のお客様はこちらLINEで相談するWaiting Listに登録プロトアウトブログ一覧法人向けお問い合わせ制作物一覧をみるプロトアウトスタジオとは無料オンライン相談

自動でいい感じに改行を行ってくれる「BudouX」をWraptasに導入してみた！

こんにちは！
プロトアウトスタジオ運営の須那です。
 
少し前の話題ですが、日本語の改行を自然で読みやすいように行ってくれる軽量な分かち書き器「BudouX」をGoogleが公開したとして話題になりました。
 
今回はそのBudouXをWraptasに組み込んで、Webサイトの改行を自動化してみましたので、メモ的にここに残しておきます。
 

そもそも普段はどうやっているの？

自分は全く知識がない状態でWebサイト制作を始めたので、改行問題でかなり苦労しました。
 
おそらくWebブラウザのサイズに対する改行対応方法は複数あると想いますが、
現状私は下記のようにメディアクエリを設定して、デスクトップとモバイルでの表示を使い分けています。
 
ただ、この方法だといちいちメディアクエリをCSSに書き込まないといけませんし、めんどくさいと思っていました。
 

BudouXを導入してみた

BudouXとは冒頭でも触れましたが、自動でディスプレイサイズに合わせて自然な改行が行える分かち書き器です！
 
BudouXはHTML + JSで実装できるので、導入してみました。
実装自体はかなり簡単で、まずは下記のコードを直接書き込みます。
 
 
 
これであとはnotionにHTMLで文章を書く際に、自動で改行処理を当てたい場所を <budoux-ja></budoux-ja> タグで囲むだけです。
 
 
そうすると下の図のようにディスプレイサイズに合わせて改行を自動で行ってくれます。
 
超簡単ですね！
とりあえず、これでいちいち改行位置を気にして、メディアクエリを対応させる必要がなくなりました。
すごいね、BudouX
 

普通にnotionに記載した文章には適応されない

当然ですがBudouXを適応させるには <budoux-ja></budoux-ja> タグで囲む必要があるので、HTMLで書いた文章にしか適応できません。
本来であれば、そのままnotionに記入した文章にも適応させたいところですがそこは仕方ないですね。
h1,h2,h3ぐらいまではHTMLで記載して、BudouXを適応させるぐらいがちょうど良さそうです。
 
一旦簡単なtipsとして書いてみました！
WraptasはHTML、CSS、JavaScriptをかけるのでいいですね。
今後もいろんな技術を試してみたいと思います。
 
Xでポスト
▲