Yahooデベロッパーネットワークというサイトに
テキスト解析というのがあります。今日はその中から「
キーフレーズ抽出」というWebAPIを使ってアプリを作ってみます。この「キーフレーズ解析」というのは，「日本語文を解析し、特徴的な表現（キーフレーズ）を抽出」するということです。たとえば次の分からキーフレーズを抽出してみます。
基本的な症状は「痛み」です。 内膜症のある場所、大きさ、癒着の程度などによって症状はさまざまですが、主に生理痛や下腹部痛、腰痛、性交痛、排便痛、慢性骨盤痛などが現れます。 痛み以外では、不正出血が見られたり、経血量が多かったり、レバー状の塊が出ることもあります。
その結果，このWebAPIは，次のようなXML形式でキーフレーズを返してきます。
<?xml version="1.0" encoding="UTF-8"?>
<ResultSet xmlns="urn:yahoo:jp:jlp:KeyphraseService" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:yahoo:jp:jlp:KeyphraseService http://jlp.yahooapis.jp/KeyphraseService/V1/extract.xsd">
<Result>
<Keyphrase>慢性骨盤痛</Keyphrase>
<Score>100</Score>
</Result>
<Result>
<Keyphrase>下腹部痛</Keyphrase>
<Score>99</Score>
</Result>
<Result>
<Keyphrase>症状</Keyphrase>
<Score>98</Score>
</Result>
<Result>
<Keyphrase>生理痛</Keyphrase>
<Score>97</Score>
</Result>
<Result>
<Keyphrase>不正出血</Keyphrase>
<Score>95</Score>
</Result>
<Result>
<Keyphrase>内膜症</Keyphrase>
<Score>95</Score>
</Result>
<Result>
<Keyphrase>性交痛</Keyphrase>
<Score>93</Score>
</Result>
<Result>
<Keyphrase>排便痛</Keyphrase>
<Score>91</Score>
</Result>
<Result>
<Keyphrase>経血量</Keyphrase>
<Score>89</Score>
</Result>
<Result>
<Keyphrase>癒着</Keyphrase>
<Score>89</Score>
</Result>
<Result>
<Keyphrase>レバー状</Keyphrase>
<Score>88</Score>
</Result>
<Result>
<Keyphrase>腰痛</Keyphrase>
<Score>64</Score>
</Result>
<Result>
<Keyphrase>塊</Keyphrase>
<Score>50</Score>
</Result>
<Result>
<Keyphrase>程度</Keyphrase>
<Score>47</Score>
</Result>
<Result>
<Keyphrase>以外</Keyphrase>
<Score>43</Score>
</Result>
<Result>
<Keyphrase>場所</Keyphrase>
<Score>39</Score>
</Result>
</ResultSet>
作成するアプリのスクリーンショットは以下のようになります。
 |
| 初画面（id="page1"）文章を入力する画面 |
 |
| キーフレーズを抽出して一覧表示する画面（id="page2"） | | | |
では，アプリを作成しましょう。
そのためには，まず，このWebAPIを使うためにはアプリケーションIDを取得する必要があります。
ここから登録することができます。
メインとなるindex.htmlは次のようになります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
</body>
</html>
次に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="keyphrase-button">キーフレーズ抽出</ons-button>
</div>
</ons-page>
キーフレーズ一覧画面は次のようになります。
<ons-page id="page2">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">キーフレーズ</div>
</ons-toolbar>
<div style="text-align: center">
<ons-list id="keyphrase-list">
</ons-list>
</div>
</ons-page>
最後にapp.jsです。
var gAPPID = 'ここにAPPIDを書く';
$(document).on('pageinit', '#page1', function(){
$('#sentence').val('基本的な症状は「痛み」です。 内膜症のある場所、大きさ、癒着の程度などによって症状はさまざまですが、主に生理痛や下腹部痛、腰痛、性交痛、排便痛、慢性骨盤痛などが現れます。 痛み以外では、不正出血が見られたり、経血量が多かったり、レバー状の塊が出ることもあります。');
});
$(document).on('click', '#keyphrase-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/KeyphraseService/V1/extract';
$.ajax({
url: url,
type: 'POST',
data: {
appid: gAPPID,
sentence: sentence
}
}).done(function(xml) {
listKeyphrase(xml);
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
alert("error");
});
});
function listKeyphrase(xml) {
var html = '';
$(xml).find('Result').each(function(){
var Keyphrase = $(this).find('Keyphrase').text();
console.log(Keyphrase);
html += '<ons-list-item modifier="chevron" class="keyphrase">' + Keyphrase + '</ons-list-item>';
});
$("#keyphrase-list").html(html);
var content = $("#keyphrase-list").get(0);
ons.compile(content);
}
0 件のコメント:
コメントを投稿