webpack入門_開発サーバ

前回はbiuldしてhtmlファイルを出力できるようになりました。今回は開発用サーバを使って毎回ビルドしないでも修正内容を確認できるようにしたいと思います。

公式のドキュメントでは開発用にwebpackをwatchモードで起動したり、webpack-dev-server,webpack-dev-midlewareを使うとありますが、webpack-dev-serverがこの中では一番高機能なのでこれを試してみたいと思います。webpack-dev-serverの後継としてwebpack-serverが出ていますが、まだ情報も少なさそうなのでまずはwebpack-dev-serverに慣れていみたいと思います。

webpack入門_html-webpack-plugin

前回に引き続き、今回はbuildでhtmlを出力できるようにしたいと思います。使用するライブラリはhtml-webpack-pluginでbuildの時に必要になるものなので以下のコマンドを実行します。

npm install --save-dev html-webpack-plugin

それからwebpack.config.jsにhtml-webpack-plugin関連の内容を追加します。

webpack入門_asset management

前回に引き続き今回はassetファイルを扱いたいと思います。

cssファイルの読み込み

以下のコマンドでcssファイルを読み込めるようにします。

npm install --save-dev style-loader css-loader

以前は--save-devではなく--saveを利用しましたが、--save-devは開発時に必要になるテスト用ライブラリやlinter,ファイルのローダーなどで--saveはビルド後の生成物に含める必要があるライブラリを指定します。
それからwebpack.config.jsのrulesを修正し、以下のようにします。

webpack入門_Getting Started

このところのjavascriptは発展が著しくECMAscript6が出たりAngularやReact,vueといったフレームワークが登場しています。新規の開発であればこれらの導入を検討しても良さそうですがビルドツールなどの環境整備の情報がまとまっていなかったりしてその分敷居が高くなっているような気がします。
最近はVue.jsが人気のようですがクライアントツールであるvue-cliを使った開発環境の構築が容易であったりしてその分敷居が低くなっているのにも助けられているように思っています。
今回は代表的なビルドツールであるwebpackの公式ドキュメントを触りながら試してみたいと思います。

事前にnodeとnpmはインストールしておく必要があります。

Pyhonでアフィン変換をつかって2次元の画像を回転、平行移動させる

座標(x,y)のピクセルをアフィン変換で回転させる場合、変換後の座標(x', y')は以下の式で表すことができます。

それからx軸にx_t, y軸にy_t平行移動も加える場合、は以下の式になります。

これをPythonで実装する場合、変換対象の画像が2次元の配列で表せられるのであれば以下のようになります。

PythonでCannyエッジを検出してみる

画像から枠線を取り出す手法としてエッジ検出について、代表的な手法としてCannyエッジ検出が有ります。Cannyエッジ検出の方法は以下の資料で確認できます。
http://www.cse.iitd.ernet.in/~pkalra/col783/canny.pdf http://www.massey.ac.nz/~mjjohnso/notes/59731/presentations/img_proc.PDF
OpenCVを使うのであれば具体的な処理の内容を知らなくても大丈夫かもしれませんが、知っておいて損はないと思いますのでCannyエッジ検出の手法をおさらいしてみたいと思います。

Cannyエッジ検出

Cannyエッジ検出の流れは大きく以下のようになっています。
- ガウシアンフィルタで画像を平滑化
- ソーベルフィルタで勾配の大きさと方向を求める
- 勾配方向と大きさを元に細線化する
- 閾値化でエッジを検出する

Fessで集めた記事に対してPythonで実装したtf-idfを適用して特徴的な単語を取得する

事前作業

まずpythonにelasticsearchのクライアントをインストールします。

pip install elasticsearch

それからFessでWebサイトをクロールさせて記事を収集させます。

$ curl -XGET http://localhost:9201/_cat/indices/fess.20180701\*\?v
health status index         uuid                   pri rep docs.count docs.deleted store.size pri.store.size
green  open   fess.20180701 uclmK-llQcafFyuecoaaaA   5   0        116           21     14.7mb         14.7mb

現在116件の記事が集まっているので、これを使って記事の中から特徴的な単語を集めたいと思います。