ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

Twitterのお気に入りをインクリメンタルサーチするサービスfavsearchを作った

はじめに

作った!バーン!

http://favsearch.chaspy.me

リポジトリ

github.com

今回もqsと同じく仲良し@kamontiaと作りました。

なぜ作ったのか

favってひとによって使い方違うと思う、ラフにハート送るために使ってるひともいれば、ブックマークがわりに(まぁ今ブックマークって機能あるっぽいけど)つかってる人もいると思う。で、あー過去のfavでなんかあったなーって思い出せないとか、検索したいなーっていうシーンが何度かあって、作った。

ただの検索じゃ面白くない、みんな大好きpecoよろしくインクリメンタルサーチしたいよね。

技術スタック

ってほど重厚なものはなくて、Twitter API使ってfav取得して絞るだけの薄いアプリです。

sinatraのappをherokuに載せています。webアプリ作るのにsinatraは最高便利。frontendはVue.jsを使ってみました。herokuのreview app機能でPRごとに環境できるの最高便利ですね。Quipperでもやっていることですね。

productionへのdeployだけCircleCIでやってるけど、これもherokuの方だけにしちゃっていいかもなーって思ってる。

herokuは最高便利。hobby web appでEC2なんていらんのだ。

運用まわり

これまたherokuのadd-onで無料枠で使えるものを使っています。

あとadd-onじゃなくて別でpingdomでSynthetic Monitoringをしています。1ドメインまでならfree planが実はある。

Free Website Monitoring | Pingdom

Metrics MonitoringがDatadog。 Heroku Buildpack

全部Quipperで使ってるものですね。

インクリメンタルサーチの実装

Vue.jsのデータバインディングを使った。フロントエンド(というかjavascript)さっぱりわからないマンなのにさらにフレームワークまで使って「Rails勉強してます」状態になってて非常にダメだなぁと思いつつ、まぁ一箇所だけだしシュっと使ってみるかぁってかんじでやった。非常に楽でしたね。

この本をめちゃくちゃサラっと読んだ。何事も語彙がわからんと理解がどうにもならんのでそういう意味で役に立った。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

具体的にはTwitter認証後、favoriteを取得してarrayに格納したあと、arrayに対して、入力formにいれたwordでfileterかけることで実現してます。

favsearch/favorite.erb at 4e70bdb999cd15139f402a28e39ff7ce20ff0eb7 · chaspy/favsearch · GitHub

制限事項

重大な制限がありまして!最新200件のfavしか取得できません!今後改善予定です!

今後

とりあえずMVP実装した!という段階で、まだまだ改良点はあると思います。(英語で大文字小文字区別しちゃってるところとか。)

使ってみて気軽に「こんな検索したいなー」「こんな表示できたらいいなー」っていうフィードバックもらえると嬉しいです。よろしくお願いします。