Rails Webook

Web業界で働いています。Railsを中心にプログラミングや事業開発のようなことを書いていきます。

限定Tシャツ欲しさにAlexaスキル作りました

f:id:nipe880324:20180614234936j:plain:w420

数ヶ月前にAmazon Echo Dotを買いました。
「うわ、すごい便利!」っというわけではないですが、スマホいじらずに朝の支度しながら今日の天気を聞けるのは楽だなーと思っている今日このごろです。

Alexaが日本で浸透するためかわからないのですが、Alexaスキルを開発した人に「Alexa Tシャツ」か「Amazon Echo Dot」というキャンペーンをやっています。

スキル開発者特典のキャンペーン情報

続きを読む

Railsにgulpを統合させる

f:id:nipe880324:20180819012001p: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をサーバーレンダリングする

f:id:nipe880324:20180819012117p: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を使ってメッセージボックスアプリを作成

f:id:nipe880324:20180819012117p:plain:w420

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

次のような画面をReact.jsで実装し、Reactとサーバ(Rails)間でメッセージ一覧の取得や作成をできるようにします。

続きを読む

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

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

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

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


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

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

続きを読む

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

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

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

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

続きを読む

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

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

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

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

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

続きを読む