Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
81
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

mikan.js : 機械学習なしで、日本語の単語の改行を処理するライブラリを書いた

今朝方、はてなのホットエントリにBudou - 機械学習を用いた日本語改行問題へのソリューションという記事が上がっていました。
ざっくりとした説明をすると、「タイトル中の単語が途中で改行されるせいで読み見辛いのを、機械学習を使ってキーワードごとに分割することでなんとかした」という感じの内容です。

Budouというソリューション

オリジナルのBudouは、GoogleクラウドAPIを用いて単語を分けるわけですが、これ毎回APIを叩かないといけないですし、叩き過ぎるとお金もかかってきます。
また、このライブラリはPythonで書かれていますので、RubyやPHP、Node.jsでは単純に導入という形で使うことはできません。GoogleクラウドAPIの設定も必要です。
分かち書きすることで改行をどうにかするというのは、とても良いアイディアですし、導入するだけで見た目も良く見えますので、上記の理由で導入を諦めてしまうのは惜しいです。惜しいですよね?

そこで mikan.js ですよ

ようは分かち書きをして、単語とその次のワードをくっつけてあげればいいんです。
というわけで正規表現を用いた分かち書きによるバックエンド・フロントエンド両方で動くjsのライブラリを書きました。

trkbt10/mikan.js: 機械学習を用いていない日本語改行問題へのソリューション

インストール

$ npm install --save mikanjs

使い方

nodeで用いる場合

const mikan = require('mikanjs');
console.log(mikan('常に最新、最高のモバイル。Androidを開発した同じチームから。'));

/*
<span style="display:inline-block" role="presentation">常に</span>
<span style="display:inline-block" role="presentation">最新、</span>
<span style="display:inline-block" role="presentation">最高の</span>
<span style="display:inline-block" role="presentation">モバイル。</span>
<span style="display:inline-block" role="presentation">Androidを</span>
<span style="display:inline-block" role="presentation">開発した</span>
<span style="display:inline-block" role="presentation">同じ</span>
<span style="display:inline-block" role="presentation">チームから。</span>
*/

Webで用いる場合

<div id="sample"></div>
<script src="mikan.js"></script>
<script>
  var sampleElement = document.getElementById('sample');
  sampleElement.innerHTML = Mikan('常に最新、最高のモバイル。Androidを開発した同じチームから。');
</script>

jQuery

$('.hoge').html(Mikan('よりパーソナルに。よりパワフルに。 より楽しく。'));

React

<div dangerouslySetInnerHTML={{__html : Mikan('常に最新最高のモバイルAndroidを開発した同じチームから。')}} />

オプション

第二引数に、 { className : 'mikan', style : 'display:inline-block' }という感じの形式で渡してあげることで、クラス名やスタイルシートを指定することができます。

const text = Mikan('私は好きにした。君たちも好きにしろ。', { className : 'wbr', style : '' });

console.log(text);
/*
<span role="presentation" class="wbr">私は</span>
<span role="presentation" class="wbr">好きにした。</span>
<span role="presentation" class="wbr">君たちも</span>
<span role="presentation" class="wbr">好きにしろ。</span>
*/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
81
Help us understand the problem. What are the problem?