概要

今回は前回作成したサーバーにWordPressを導入することとキーワード抽出の実装を行います。

利用しているサービス

Webサイト

WordPress

キーワード抽出

API
- gooAPI キーワード抽出API
フロントエンド
- Javascript
- HTML5
- CSS

WordPress導入

WordPressは簡単にサイト構築ができる無料サービスです。今回は簡単にフロントエンドや編集が行いたいと考えていたので導入しました(ただ、今後の拡張性を考えると普通に作ったほうが融通がききます(後述))。

基本的な流れ

前回作成したDBサーバーでWordPress用のDBを作成
- DB作成
- ユーザー作成
WordPressインストール
- 各種設定

詳細はこの記事を参考にしてください。

懸念点

拡張性が低い
- JSなどは埋め込めるが、少しめんどくさい
  - 埋め込み方も様々あるが、WordPressの仕様を理解しないといけない
- 他の言語が使用できるかわからない
- DBとの通信はデフォルトでWordPressがになっているが、拡張したい場合にどのようにすればいいか調べるのが大変
やはり、ブログなどのサイトであればかなり構築しやすいがバックエンドやフロントエンドも実装したいとなるとかなりめんどくさい

キーワード抽出

gooAPIを用いてキーワード抽出ができるWebサイトを作成しました。
個人的にキーワード抽出を一時期勉強していたということやキーワード抽出のWebサイトが少ないかなと感じ作成しました。

完成したWebサイトはこちら

基本的には以下の形式で機能を実装しています。

jQuery内のAjaxを用いてAPIにJSON形式でPOST形式で投げる
レスポンスからキーワードを抽出して表示

また、WordPress上でJSやHTML,CSSを管理編集することが大変なのでプラグインを使用しました。

プラグイン

今回使用したプラグインはWP Coderです。
これは、JS,HTML,CSSがタイトルごとに管理でき、挿入方法も簡単に行えるプラグインです。

API

今回はgooAPIのキーワード抽出を使用しました。
キーワード抽出のAPIはCOTOHA APIなどがありますが、gooAPIはアクセストークンの有効期限が基本的に無いのでいちいちアクセストークンの再発行をする必要がありません。

ソースコード

keyword_extraction.js

jQuery(document).ready(function( $ ){
  var inputTitle = $('#inputTitle');
  var inputText = $('#inputTextarea');
  var button = $('#button');
		
  var outputText = $('#outputTextarea');
	const uniqueID = "得られたアクセストークン";

	
	


  
	button.on('click', function(){
		// inputTitle,inputTextのどちらかが空だったらrequiredの注意書きが発生
		if(!inputTitle[0].reportValidity()){
			return false;
		}
		if(!inputText[0].reportValidity()){
			return false;
		}

		// 多重送信を防ぐためにボタンをdisable
		button.attr("disable",true);
		
		// JSONデータ作成
		// 例外処理の場合はどれか一つを欠損させるとbad error 400がでる
		var data = JSON.stringify({
			app_id: uniqueID,
			title: inputTitle.val(),
			body: inputText.val(),
		});

		
		// 通信実行
    $.ajax({
        type:"post",																		// method = "POST"
        url:"https://labs.goo.ne.jp/api/keyword",				// POST送信先のURL
        contentType: 'application/json',								// リクエストの Content-Type
        dataType: "json",           										// レスポンスをJSONとしてパースする
				data:data																				// JSONデータ本体
		}).done(function(response) {
			
			// outputText初期化
			outputText.val("");
			
			// responseはJSONなのでキーでアクセス
			var result_array = response.keywords;
			
			// 出力のindex_num
			var output_index_num = 1;
			
			// outputTextを書き換え
			Object.keys(result_array).forEach(function (key){
				
				// objectなのでJSON.stringifyでstringに
				var output_result_string = JSON.stringify(result_array[key]);


				// resultに出力
				outputText.val(outputText.val() + String(output_index_num)+ ":" + output_result_string +"\n");
				output_index_num++;
			});
			
			
		}).fail(function(xhr){

			// もしJSONのエラーを表示させたい時(objectからstringに直し済み)
// 			var error_result = JSON.stringify(xhr.responseJSON);
			
			outputText.val("error");
			
		}).always(function(xhr,msg){
			
			// ボタンを再び enableにする
			button.attr("disabled", false);
			
		});

	});
});

.html

<div style="text-align: center;">
	
	<div class="inputTitle">
		<label for="inputTitle">Title<br></label>
		<textarea id="inputTitle" rows="1" cols="80" placeholder="title (required)" required></textarea>
	</div>
	
	<div class="inputText">
		<label for="inputTextarea">Article<br></label>
		<textarea id="inputTextarea" rows="20" cols="120" placeholder="article (required)" required></textarea>
	</div>
	
	<div>
		<button id="button" type="button">keywords extraction</button>
	</div>
	
	<div class="outputResult">
		<label for="outputTextarea">Result<br></label>
		<textarea id="outputTextarea" rows="10" cols="80" placeholder="result" readonly></textarea>
	</div>
	
	<a href="http://www.goo.ne.jp/">
		<img src="//u.xgoo.jp/img/sgoo.png" alt="supported by goo" title="supported by goo" width="100">
	</a>
	
</div>

.css

.inputTitle{
	width: auto;
	height: auto; 
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px;
}

.inputTextarea{
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

#button{
	width: auto;
	height: 30px;
	margin-top: 25px
}

.outputResult{
	width: auto;
	height: auto;
	margin-top: 50px;
	margin-bottom: 150px;
	margin-left: auto;
	margin-right: auto;
}

完成品

終わりに

AWSを用いてサーバーを立てて、キーワード抽出のWebサイトを作成しました。個人的にはまだまだ、改修したい部分だらけですが、機能する作品を作れてとても感激です。

今後としては

WordPressを廃止
- DBサーバーとの通信をPythonで行う
- フロントエンドをReactやVueを使って書く
自作のテキスト解析APIを作成
- AWSを用いてAPIサーバーを運用できればさらに吉
機能追加
- URLを入れることでキーワード抽出
- キーワード抽出結果から似たような記事を推薦
- サイト利用者のキーワード抽出結果を用いて注目されているキーワードを表示

していきたいと考えています。
まだまだ、足りない情報が多いので随時追加していきたいと思います。
ここまでご覧いただきありがとうございました！

参考文献

AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得

AWSでWebサイトを作ってみた(3) フロントエンド・キーワード抽出編

目次

概要

利用しているサービス

Webサイト

キーワード抽出

WordPress導入

キーワード抽出

プラグイン

API

ソースコード

完成品

終わりに

参考文献