32
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

日経有料記事の類似記事を無料で読めるChrome拡張をES6+Webpackの最小構成でつくった

Last updated at Posted at 2015-10-26

概要

最近はこんな記事もあるようなので、日経有料記事の類似記事を無料で読むことができるChrome拡張アプリをつくった。形態素解析して、名詞を区切ってGoogleで類似記事を検索している。

使い方は、有料記事のページヘゆき、全文表示の隣に出現した無料で読むボタンを押すだけである。インストールなど、詳細はGithubに書いた。

スクリーンショット 2015-10-26 9.02.29.png

構成

たいしたコードは書いていないが、ES6+Webpackでモジュール化的なことだけはしている。

WebpackをES6で書くために、以下の様なファイルを準備

webpack.config.js
require('babel/register');

module.exports = exports = [
  require('./config/webpack'),
];

以下の様な感じで普通にconfigを書く。eslintだけいれている。

config/webpack.js
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に→名詞のみを集めて返す、ということをしている部分では、以下のようにメソッドを作っている。

query.js
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;
    });
}

これを以下のように呼び出した。

entry.js
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最小構成のデフォルトとなる気がしている。

32
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?