antd-initでReact,Reduxのboilerplate作成

ここ数年、Single Page ApplicationはSencha ExtJS、Sencha Architect を使用して構築していました。
ですが、ライセンス費用をかけずにオープンソースで構築できるようにしたいね、ということで、現在、React、Reduxに取り組み中です。
React、Reduxを始めるにあたり、簡単にboilerplateを作成してくれるantd-initが便利だったので、ここでご紹介したいと思います。
このboilerplateは、react, redux, redux-saga, react-router, webpack, babel, css-modules、LiveReload等、React、Reduxの開発に必要なライブラリがひと通り揃っています。
また、UIフレームワークはAnt Designを使用しています。

今回は、Ubuntu14.04に、antd-initのインストールと、boilerplateの作成を行ってみます。
node6系を使用できる環境であれば、antd-initのインストールから開始できます。
エディタはAtomを使用します。

Atomインストール

PPA経由でインストールします。

Ubuntuのアプリケーションから「Atom」を起動します。
初回の起動は少し時間がかかります。起動すればOKです。一旦閉じます。

nvmインストール 

nodeはバージョンによってアプリが動作しない場合もあるため、複数のバージョンを切り替えて使用したくなります。
そこで、複数のバージョンのnodeを切り替え可能な「nvm」を使用すると便利です。
nvmで、nodeのインストール、指定バージョンへのnodeの切り替えが可能となります。
以下でnvmをインストールします。

起動時に読込むよう、~/.bashrc 等に以下を追記します。


コマンドプロンプトを再起動し、バージョンを確認します。


■ nodeインストール
nvmをインストールしたら、nodeをインストールします。
以下でnodeのバージョンを確認し、どのバージョンをインストールするかを決定します。


ここでは、node6.2.2をインストールします。
インストールしたら、バージョンを確認します。


nvmインストールは、以下のページを参考にさせていただきました。
他のnodeバージョンへの切り替え方法等も記載されています。

「nvm で作る Node.js の環境構築(+ Hello world)」<http://arfyasu.hatenablog.com/entry/2016/01/26/212543>

■ antd-initインストール

現在は2系ですが、1系を使用したいため、バージョンを指定してantd-initをインストールします。

次に、boilerplateを作成します。


nodeモジュールがインストールされるため、少し時間がかかります。
作成されたら、boilerplateアプリを起動します。


webpack: bundle build is now finished.が表示されたら、http://localhost:8989/ にアクセスします。
以下の画面が表示されればOKです。

screenshot-from-2016-10-27-160710


■ boilerplateを編集

Todo App を編集してみます。
AtomでantdinitSampleディレクトリを開きます。

▼ タイトルを変更

src/layouts/MainLayout/MainLayout.jsx 9行目
「Todo App」 を「タスク管理」に変更し、ファイルを保存します。
webpackのビルドが実行され、livereloadがファイルの変更を検知し、ブラウザをリロードします。

そのため、ファイルを変更するだけで、ブラウザの表示が更新されます。

 リストのタイトルを追加

src/components/Todos/Todos.jsx 23行目に以下を追加します。

▼ タスクを追加

タスクは、ajaxで取得しています。boilerplateではMockで動作しています。
proxy.config.js 23行目に以下を追加します。

このファイルは変更検知対象外であるため、ブラウザをリロードして確認します。

▼ cssを追加

先程追加したリストタイトルに下線を引いてみます。
src/components/Todos/Todos.less 4行目に以下を追加します。

こちらもブラウザをリロードします。
(再ビルドは実行されますが、リロードされないため)

以下の画面に変更されました。
screenshot-from-2016-10-27-173327

このboilerplateを作成すれば、React、Reduxの開発環境を簡単に整えることができます。
redux-sagaやfetch、reducerもすぐに使用できるようになっているため、Todo Appを参考に、React,Reduxアプリを作成しやすくなります。

NearRealTimeSearchの紹介

あけましておめでとうございます。大谷です。本年もよろしくおねがいいたします。
新年最初のエントリーはNearRealTimeSearchの紹介です。(
PDF版はこちら

1. NearRealTimeSearchとは
Solrを利用した検索サイトを作成するとき、多くの場合は登録するデータはバッチによる定期的な更新を行うようにするのが一般的です。これは、Solrのインデックスへの書き込みがトランザクションに対応していないことやインデックス更新を行なっている間の検索性能の劣化などが要因となっています。
ただ、最近では定時更新ではなく、よりリアルタイムに検索インデックスにデータの追加更新を反映したいという要件が多くなってきています。この要件に対応するために提案、実装されたものがNearRealTimeSearch(ほぼリアルタイム検索)と呼ばれる機能です(以降ではNRTと略します。)。
Luceneには2.9ですでにNRTが実装されていましたが、Solrにて利用できる形にするためにSOLR-2193で提案されました。

2. NRTの仕組み
NRTはLuceneのNRTを利用した仕組みになります。LuceneのNRTはインデックスの書き込みを行うIndexWriterから、Index検索のためのオブジェクトIndexReaderを取得することができるようになる機能になります。すなわち、インデックスがファイルに書き込まれる前の(メモリ上にあるインデックス)状態で検索が可能になることになります。
Solrでは、この機能を利用するためにこれまでコミット(commit)と呼ばれていた機能を以下の2つコミットとして再定義しました。

  • Hard Commit
    これまでのコミットと同義。停電からのデータロスをなくすためにfsyncを呼び出し、ファイルにインデックスを出力する。
  • Soft Commit
    新たに追加されたコミットの種類。インデックスの変更をファイルに反映せず、メモリ上に反映する。
    Soft CommitがNRTを利用するためのコミットとなります。ディスクへの書き込みは保証されませんが、ほぼリアルタイムに検索結果に反映がされます。

3. 制約事項
現在、NRTが利用できるのはtrunkである4.x系のみとなります。3.x系以前では残念ながら利用できません。
前述ですが、ディスクへ書き込みも保証されません。VMがクラッシュしたり停電が発生した場合は直前のHard Commitが実行された時点までインデックスの状態が戻ることに注意が必要です。
また、Soft Commitの仕組み上、レプリケーションによる同期が利用できません。こちらもHard Commit時点ごとにしかレプリケーションが動作しません。Soft Commitによるほぼリアルタイム反映についてはデータ更新対象となっているSolrサーバでのみ恩恵をうけることが可能です。

4. 利用方法
2で説明しましたが、Commitの新しいタイプとしてSoft Commitが追加されています。まずは、XMLによるコミット時の指定は次の様になります。

softCommit=”true”オプションを指定するとSoft Commitの動作となります。
管理画面のPendingDocsを見ると、Soft Commit前に更新したデータ件数がコミットされていない状態がわかります。ただし、Soft Commitは実施されていますので、検索結果には表示されます。
次は設定によるAutoCommitについてです。Solrではsolrconfig.xmlの設定によりAutoCommitが設定可能です。設定は次の通りです。

これまで同様、maxDocsによる指定とmaxTimeによる指定が可能です。

  • maxDocs
    直前のSoft Commitが実施されてから登録されたデータ数が指定された数に達した場合にSoft Commitが実行される。
  • maxTime
    データが登録されてから指定されたミリ秒経過するとSoft Commitが実行される。
    Hard Commitの設定についてはこれまでと同様のタグにて指定可能です。Soft Commitを毎秒、Hard Commitを数分おきとすることで、定期的にファイルにインデックスを保存しつつ、ほぼリアルタイムに更新を反映させるといった設定が可能になります。

5. 今後の展開
前述しましたがNRTは、マスタスレーブ構成(レプリケーション)には対応していません。マスタスレーブ構成についてはSolrのMLで話が上がりましたが、現在のレプリケーションの機能との併用は望めないようです。代わりにSolrCloudと呼ばれる別の新しい分散インデックスの機能が紹介されています。SolrCloudとはクラウドでの検索サービスとしてSolrを運用管理するために現状のSolrの拡張する機能です。
NRTについてはまずは、マスタスレーブでない環境で利用してみるのはいかがでしょうか。

参考:
http://wiki.apache.org/solr/NearRealtimeSearch
http://wiki.apache.org/solr/UpdateXmlMessages#Optional_attributes_for_.22commit.22_and_.22optimize.22
http://wiki.apache.org/solr/SolrConfigXml?#Update_Handler_Section
http://www.lucidimagination.com/blog/2011/07/11/benchmarking-the-new-solr-%E2%80%98near-realtime%E2%80%99-improvements/
http://lucene.472066.n3.nabble.com/NRT-and-replication-tt3422940.html
http://wiki.apache.org/solr/NewSolrCloudDesign

タイムスタンプ付き大量データのリアルタイム可視化(1)

はじめまして。シーマークの中村です。
人生初ブログです。

私は最初のブログのテーマとして、大量データの蓄積と可視化について取り上げてみたいと思います。
私が開発案件でよく遭遇する要件の一つに、リクエスト回数や重要ビジネスロジックの実行回数等をリアルタイムに視覚化する、というものがあります。本番の利用状況をリアルタイムに監視することで、運用対策や経営判断を早急に行いたいというのがお客様の要望です。

この場合、要件のポイントは、
大量データを
リアルタイムに
グラフ化して
検索条件で絞り込みもしたい
というものになります。

データを蓄積して取り出すという点ではシンプルな要件ですが、
単調増加するデータをいかに蓄積するか、
しかも本番サービスへの性能に影響を与えずにデータを蓄積し、
大量に蓄積されたデータを検索してグラフ化する
しかも高速に!
となると、結構悩ましい課題となります。。。

そこで、「そんなときにはこれを!」と取り出せるソリューションを導き出すべく、オープンソースを中心に技術調査及び実現方法を検討していきたいと思います。

次回は、調査対象の要件をもう少し明確にしていきます。

はじめまして。シーマークの中村です。
人生初ブログです。 

私は最初のブログのテーマとして、大量データの蓄積と可視化について取り上げてみたいと思います。
私が開発案件でよく遭遇する要件の一つに、リクエスト回数や重要ビジネスロジックの実行回数等をリアルタイムに視覚化する、というものがあります。本番の利用状況をリアルタイムに監視することで、運用対策や経営判断を早急に行いたいというのがお客様の要望です。

この場合、要件のポイントは、
大量データを
リアルタイムに
グラフ化して
検索条件で絞り込みもしたい
というものになります。

データを蓄積して取り出すという点ではシンプルな要件ですが、
単調増加するデータをいかに蓄積するか、
しかも本番サービスへの性能に影響を与えずにデータを蓄積し、
大量に蓄積されたデータを検索してグラフ化する
しかも高速に!
となると、結構悩ましい課題となります。

そこで、そんなときにはこれを!と取り出せるソリューションを導き出すべく、オープンソースを中心に技術調査及び実現方法を検討していきたいと思います。

次回は、もう少し要件を明確にしていきます。