日本語形態素解析

新しい年を迎え，今年最初のテーマは日本語形態素解析です。プログラムは前にやったキーフレーズ抽出とほとんど同じなので，それをベースにして必要な修正を行っていくのが最も簡単でしょう。まず，index.htmlはそのまま使えるので何も変更はありません。page1.htmlもほとんど同じですが，タイトルを変えることとボタンのラベルとidを変更することくらいです。

page1.html

<ons-page id="page1">
    <ons-toolbar>
        <div class="center">日本語形態素解析</div>
    </ons-toolbar>
    <br>
    <div>
        <textarea class="textarea" id="sentence" style="width: 100%; height: 300px">
        </textarea>
    </div>
    <div>
        <ons-button modifier="large--cta" id="parse-button">解析</ons-button>
    </div>
</ons-page>

次に，page2.htmlですが，タイトルを修正し，形態素解析の結果を出力するdivタグにword-listというidを割り当て，divタグ内のons-itemタグは削除します。形態素解析の結果は1行に複数の項目（形態素，読み仮名，品詞，基本形）を表示するのでons-rowとons-colを組み合わせてグリッドレイアウトにするからです。

page2.html

<ons-page id="page2">
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">日本語形態素解析</div>
    </ons-toolbar>

    <div id="word-list">
    </div>
</ons-page>

最後は。app.jsです。これも基本的なプログラム構造はキーフレーズ抽出の時と同じです。

app.js

var gAPPID = '[APPID]';

$(document).on('pageinit', '#page1', function(){
    $('#sentence').val('基本的な症状は「痛み」です。 内膜症のある場所、大きさ、癒着の程度などによって症状はさまざまですが、主に生理痛や下腹部痛、腰痛、性交痛、排便痛、慢性骨盤痛などが現れます。 痛み以外では、不正出血が見られたり、経血量が多かったり、レバー状の塊が出ることもあります。');
});

$(document).on('click', '#parse-button', function(){
    var options = {
        sentence: $('#sentence').val()
    };
    myNavigator.pushPage('page2.html', options);
});

$(document).on('pageinit', '#page2', function(){
    var page = myNavigator.getCurrentPage();
    var sentence = page.options.sentence;
    
    var url = 'http://jlp.yahooapis.jp/MAService/V1/parse';
    $.ajax({
        url: url,
        type: 'POST',
        data: {
            appid: gAPPID,
            sentence: sentence,
            response: 'surface,reading,pos,baseform'
        }
    })
    .done(function(xml) {
        listWords(xml);
    })
    .fail(function(XMLHttpRequest, textStatus, errorThrown) {
        //alert("error:" + textStatus);
        var html = '';
        html += '<ons-row>' + 'XMLHttpRequest:' + XMLHttpRequest.status + '</ons-row>';
        html += '<ons-row>' + 'textStatus:' + textStatus + '</ons-row>';
        html += '<ons-row>' + 'errorThrown:' + errorThrown + '</ons-row>';
        $("#word-list").html(html);
        var content = $("#word-list").get(0);
        ons.compile(content);
    });
});

function listWords(xml) {
    var html = '';
    $(xml).find('word').each(function(){
        var surface = $(this).find('surface').text();
        var reading = $(this).find('reading').text();
        var pos = $(this).find('pos').text();
        var baseform = $(this).find('baseform').text();
        html += '<ons-row>';
        html += '<ons-col>' + surface + '</ons-col>';
        html += '<ons-col>' + reading + '</ons-col>';
        html += '<ons-col>' + pos + '</ons-col>';
        html += '<ons-col>' + baseform + '</ons-col>';
        html += '</ons-row>';
    });
    $("#word-list").html(html);
    var content = $("#word-list").get(0);
    ons.compile(content);
}

25行目のresponseには結果にどのような形態素情報を含めるかを設定します。注意すべきことはカンマで区切る際，間に空白を入れないようにすることです。空白を入れるとエラーになります。
今回，Ajaxのエラーハンドラでエラー詳細を画面に出力するようにしました。