読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Railsにgulpを統合させる

gulp assets

f:id:nipe880324:20151218024113p:plain:w420

Railsでgulpを使ってアセットファイルの管理できる環境を構築します。
gulpはアセットを管理するツールで、js、css、imagesなどのアセットファイルをビルドして、それをRailsから参照する流れです。
また、gemにバンドルされているアセットファイルもあるので、Sprockets(Railsのアセット管理のgem)は有効にしておきます。有効にしておきますが極力使いません。

gulpでsass/scssのコンパイル、ES6のコンパイル(babel, webpack)、gulpの便利プラグイン(変更監視、画面リロード、通知)、ミニファイ、ダイジェスト付与をできるようにします。
そして、gulpで作成されたcssやjsのアセットファイルをRailsからロードできるようにします。

参考にソースファイルをGitHubに上げたあります。
https://github.com/nipe0324/rails_with_gulp

続きを読む

RailsでReact.jsをサーバーレンダリングする

Javascript React.js

f:id:nipe880324:20151122001321p:plain:w420

react-railsというReact.jsをRailsに簡単に統合できるgemを使い、React.jsをサーバーレンダリングする方法を説明します。
サーバーレンダリングすることで、初期値をHTMLの初期レンダー時に渡せるようになるので、ロード中による画面のばたつきや、ロード中といった表示をなくせます。

RailsでReactを使ってメッセージボックスアプリを作成 - Rails Webookをベースに説明しています。

また、この記事のソースコード
https://github.com/nipe0324/rails_samples/tree/master/react_server_rendering_test
です。

続きを読む

RailsでReactを使ってメッセージボックスアプリを作成

Javascript React.js

f:id:nipe880324:20151122001321p:plain:w420

react-railsというReact.jsをRailsに簡単に統合できるgemを使い、React.jsについて説明します。

次のような画面をReact.jsで実装し、Reactとサーバ(Rails)間でメッセージ一覧の取得や作成をできるようにします。
ソースコードはこちらです。 https://github.com/nipe0324/rails_samples/tree/master/react_test

f:id:nipe880324:20151122000620p:plain:w420

続きを読む

RailsでElasticsearch: サジェスト (Suggest) 機能でオートコンプリート

elasticsearch 検索

f:id:nipe880324:20151027234933p:plain:w420

今回は、「Elasticsearchのサジェスト(Suggest)機能でオートコンプリートを実装」します。

RailsでElasticsearchを使って検索機能を実装してきました。


サジェスト機能では、サジェスター(Suggester)を利用し、入力したテキストから似たような単語を返す機能です。
Elasticsearch 1.7 では、サジェスト機能の一部はまだ「開発中」のようです。

参考までに、ソースコードはこちらです。elasticsearch_test - GitHub

続きを読む

RailsでElasticsearch: ハイライト(Highlight)

elasticsearch 検索

f:id:nipe880324:20151017170217p:plain:w420

RailsでElasticsearchを使って検索機能を実装してきました。
今回は、「Elasticsearchのハイライト機能」について簡単に説明します。

参考までに、ソースコードはこちらです。elasticsearch_test - GitHub

続きを読む

RailsでElasticsearch: アグリゲーション(ファセット)と Post Filter

elasticsearch 検索

f:id:nipe880324:20151017170217p:plain:w420

RailsでElasticsearchを使って検索機能を実装してきました。
今回は、「アグリゲーション(ファセット)と Post Filter」について説明します。

「アグリゲーション」は、SQLでいうGROUP BYのようなもので、最小値、最大値、平均値などを求めたり、カテゴリ毎の数を数えたりなどドキュメントを集約させるものです。Elasticsearchでは、従来あった集約機能の「ファセット」では複雑な集約を処理できなかったので、新しくアグリゲーションを作ったぽいです。

具体的には、下記画像の左側のサイドバーで検索結果を絞り込めるようにします。
f:id:nipe880324:20151021235800p:plain:w420

続きを読む