suin.io

Webページで地味に面倒な「日本語改行問題」を解決する“mikan.js”を試した

suin2017年1月30日

ランディングページなどのWebページは、レスポンシブデザインでモバイルとラップトップに対応するのが当たり前になっている。CSSフレームワークを使えば、レイアウトのレスポンシブ対応が容易になるが、見出しのようなテキストをいい感じに改行する決定打が無いように思う。

<br>タグにメディアクエリーでdisplay:noneをつける方法1や、IEを除いたブラウザで使用可能な<wbr>タグを用いた手法2などあるが、mikan.jsはこれらとは違いJavaScriptで自動化する。

mikan.jsの説明には「機械学習を用いていない」とあるが、Google発の[budou]に対するものだ。budouはGoogleのCloud Natural Language APIを使わないといけないが、mikan.jsにはその必要がない。

ためしにBugHuntのランディングページにmikan.jsを一時的に当ててみた。

Before

After

見て分かる通り、単語の途中で改行されていたものが、単語区切での改行になる。ものすごく改善されたという感じではないが、モバイルの解像度も多種多様になっているので、従来の方法で時間をかけるよりも、mikan.jsを入れてサクッと自動化するのもありかと思った。

RELATED POSTS