概要
最近はこんな記事もあるようなので、日経有料記事の類似記事を無料で読むことができるChrome拡張アプリをつくった。形態素解析して、名詞を区切ってGoogleで類似記事を検索している。
使い方は、有料記事のページヘゆき、全文表示
の隣に出現した無料で読む
ボタンを押すだけである。インストールなど、詳細はGithubに書いた。
構成
たいしたコードは書いていないが、ES6+Webpackでモジュール化的なことだけはしている。
WebpackをES6で書くために、以下の様なファイルを準備
require('babel/register');
module.exports = exports = [
require('./config/webpack'),
];
以下の様な感じで普通にconfigを書く。eslintだけいれている。
import config from './index';
const globals = config.get('globals');
const paths = config.get('utils_paths');
const webpackConfig = {
entry: paths.src('entry'),
output: {
path: paths.project(config.get('dir_dist')),
filename: 'main.js'
},
plugins: [],
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: paths.project(config.get('dir_src')),
},
],
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
],
},
eslint: {
configFile: paths.project('.eslintrc'),
failOnError: globals.__PROD__,
emitWarning: globals.__DEV__,
},
};
export default webpackConfig;
例えば、選択されたテキストを形態素解析→返ってきたxmlをobjectに→名詞のみを集めて返す
、ということをしている部分では、以下のようにメソッドを作っている。
import request from 'superagent';
import {parseString} from 'xml2js';
import Promise from 'bluebird';
import config from '../config/secret';
// 形態素解析
function yahooMaApi(text) {
return new Promise(function (resolve, reject) {
request
.get('http://jlp.yahooapis.jp/MAService/V1/parse')
.query({
appid: config.get('appid'),
results: 'ma',
sentence: text,
})
.end(function(err, res) {
if (err) return reject(err);
return resolve(res);
});
});
}
// xmlをobjectにし、名詞のみを集めて返す
function xml2query(xml) {
return new Promise(function (resolve, reject) {
parseString(xml, function (err, res) {
if (err) return reject(err);
let query = '';
const wordList = res.ResultSet.ma_result[0].word_list[0].word;
wordList.map((item) => {
if (item.pos[0] === '名詞') {
query += item.surface[0] + '+';
}
});
return resolve(query);
});
});
}
// 最終的な結果(eg.`名詞1+名詞2+名詞3+`)を返す
export function getQuery(text = null) {
return yahooMaApi(text)
.then((xml) => {
return xml2query(xml.text);
})
.then((query) => {
return query;
});
}
これを以下のように呼び出した。
import {getQuery} from './query';
getQuery(text)
.then((query) => {
$('#nhLink').attr({'href': 'https://www.google.co.jp/#q=' + query + '&tbm=nws'});
});
他ソースはGithubにおいてある。
まとめ
今回のコードだけではなんとも言えないが、小規模から中規模まで?なら、ES6+Webpackだけあれば十分なのでは、と思った。小さいアプリでも薄いフレームワークをいれるにこしたことはないが、モジュールを頑張れば、つくれないこともない。
変に学習コストもないし、いれるデメリットがないので、今後のプロジェクトでは、ES6+WebpackがJavaScript最小構成のデフォルトとなる気がしている。