チャットサイト作りに貢献したgemたち一覧
以前railsでチャットサイトを作った時に役立った、主要なgemを紹介します。
サイトが出来たすぐに書く予定だったのですが、mine craftにハマってしまって遅くなってしまいましたw
twitter-bootswatch-rails
サイトデザインのために、このgemを入れました。このgemを入れるとbootstrapをベースにした記法で、様々なデザインのページが作れます。書き方はほとんどbootstrapと同じです。
デザインは以下のサイトで見れます。
Bootswatch: Free themes for Bootstrap
bullet
n+1問題対策のため、取り入れました。パーフェクトRuby on Railsに載っていたので導入しました。
そもそもn+1問題とはなにかと言うと、アクティブレコードとかを使った時にデータベースに無駄に大量にアクセスが行ってしまうことです。詳しい説明は、以下のサイトが分かりやすかったです。
» Railsライブラリ紹介: N+1問題を検出する「bullet」 TECHSCORE BLOG
n+1問題は"なんとか.each" とか使った時に出やすくて、コードに間違えがなくても普通にデータベース使って普通にrailsを書いていると起こってしまうと思います。
ちなみにbulletの初期設定をgithubに載っているコードそのままに書いたら動かなくて(英語読めない)、以下のように設定したら動いたので載せておきます。
config/environments/development.rb
config.after_initialize do Bullet.enable = true Bullet.alert = true Bullet.bullet_logger = true Bullet.console = true Bullet.rails_logger = true end
このgemを入れ、N+1問題が発生したページに行くと発生のお知らせと解決法がアラートで表示されます。N+1問題が発生した場合は、アクティブレコードのincludesを使うと回避出来ます。
ちなみにeachの中にeachが混じっているような複雑な場合は、以下のサイトを参考にしました。
【Ruby On Rails3】 複数のテーブルのincludesを書く! | approad
websocket-rails
リアルタイムで通信をするためのgemです。railsでリアルタイムな処理をするのにwebsocket-railsを使うのは主流らしくて、僕もこれを使いました。チャットで使うのにはもってこいでしたが、他にも様々な用法で使えそうです。
gon
これを使えばコントローラーで定義した変数をjsに渡すことが出来ます。上のwebsocket-railsはjsを多様するので、このgemは大変助かりました。
例えば、
gon.say = 'hello'
と、Controller側で定義すれば
alert(gon.say); //hello
といった感じで使えます。
omniauthとomniauth-twitter
"ツイターでログイン"ができるようにこのgemを導入しました。
meta_request
chromeの開発モードに、実行されたSQLとかが見れるタブが追加されます。
以下のサイトがわかりやすかったです。
Rails開発を補助するGoogle Chrome機能拡張·RailsPanel MOONGIFT
はてなランキングに全然上がってこなかったイーロンマスクの優良記事
iPadでNewsPicksを見ていたらトップページにこんな記事が。
世界に役立たないなら、会社の存在意義はない:日経ビジネスオンライン
すごい面白い。イーロンマスクが来日して話題になっていたとき記事を読んで若干ファンになりかけていたが、これを読んで完全にファンになってしまった。
NewsPicksではトップに上がっていたのに、はてなでは、あんまり注目されていなかったので載っけました。
以前の記事ではこんなのとか
かっこ良すぎて鼻血クッパーー!
んーやっぱり千葉産の鼻血は美味しいです。
チャットサイトが完成しました! [ 10日目 ]
だいたい10日前から作り始めたチャットサイトが今日完成しました。
Ruby on Rails製の初めてのサイトです。
それで、できたサイトはこれです。
Cat: https://cat-capeyes.herokuapp.com
名前はCatです。理由は名前がChatと似ていたからです。ええ、違います。適当では無いです。
機能としては、登録などいらず誰でもすぐ匿名で書き込めるようにしました。
ただしログインも出来て(今はtwitterからログインだけ)、ログインをおこなうと、自分で新しいチャットルームを作ることが出来ます。そしてコメントの横に付いてくる写真が、自分のTwitterのプロフィール画像になります。デフォルトでは、下のような写真を使用するようにしました。
そして、カテゴリーも作りました。チャットルームを作成するときに、カテゴリーを選びそれぞれのカテゴリーに分別されます。カテゴリー別のページも作り、カテゴリーから目的のチャットルームを見つけれるようにしました。
それと一番の目玉は複数のチャット画面を一気に観覧できることです。例えばカテゴリーがTVだったら、日テレ、TBS、フジとかのそれぞれのチャットルームを1画面内で表示出来ます。表示だけではなく、それぞれ書き込み可能です。
トップページには、最新のチャットルームが順番にダダっと並べてあります。
と、いう具合です。でも、チャットで検索をしてみても賑わっているところで、参加人数が500人くらいで、元々パイとしてはちっちゃいんじゃない?って思いましたが、時すでに遅し作り始めて7日ぐらい経ってましたので、勢いで作りきりました。
昨日に至っては、websocket-railsのjsの
dispatcher.subscribe(''+fid+'');
と書かなければ行けなかったところを
dispatcher.subscribe(fid);
と書いていて、一日近く潰れました。これが間違ってるって分かって、なおして動いた時は、舞い上がって自分の部屋で一人で舞を踊ってしまいました。ほんとに。たぶんあるある。
とりあえず、作っていくうちにすごい便利なgemとかを見つけたので次回はgemとかの紹介記事を書きたいと思います。
というわけで久々にチャットサイトどうですか?少し時代錯誤な感じもしますが、昔を懐かしむ感じで使って見てください。
チャットサイト作り5、6日目
昨日と今日で、データベース側を作り、それからそれらを表示させるページを作った。一応チャットサイトということで、カテゴリーを作りカテゴリー別に見られるようにしました。
'websocket-rails'っていうgemがあって、それを使うとリアルタイムでやりとりできるようになるのでそれを使ってたんですが、コードがJSに集中して、わやわやなって、なんか動かなくなって、結局railsのターボリンク機能を外しました。
ターボリンクを外すと、ページの読み込みの都度、JSもすべて読み込んでくれるので解決しました。
とりあえず明日からは、ウェブソケットのチャンネル機能を使い、個別のチャットページを作ろうと思います。
それにしても、Railsの生産性はすごいね。すごすぎて、YouTubeを見てしまいがちです。
チャットサイト作り4日目
今日はデータベース系をやりました。とりあえず、twitterでログインとログアウトをできるようにして、ユーザーのモデル、チャット個々のモデルとか作り、Rspecでテストしようとしたら、エラーが出てそれを解決して終わりました。今日はあんまり進まなかったような気がします。
最初、gemをインストールするときに
のようにしていたんですがそれがダメだったらしく
`require': cannot load such file -- rails_helper (LoadError)
って出ました。なのでgithubに載ってるように
ってバージョンを指定して、インストールして、
したらいい感じに出来ました。
ちなみに使用しているrspec-railsはどちらも3.1.0なのにバージョン指定するかしないかで結果が違うというのは、意外すぎました。俺のだけおかしかったのかな。原因は多分rspec2から3への移行をミスったからだと思います。
まあでもバージョン指定はしっかりしておいた方がいいっぽいですね〜
チャットサイト作り3日目
とりあえず、今日はwebsocket-railsっていうgemを使い、サーバーサイドの部分をやりました。非同期処理だからすごい大変だろうなと思ってたんですが、やっぱりgemのすげー所で、思ってた以上にトントン拍子ですすみました。
それと、英語のドキュメントだけじゃやっぱ大変だなーってことで、gemの使い方が載ってるブログも読んでます。
以下のブログを参考にやってます。
Railsで複数グループ対応のチャットアプリを作ってみた - 東京伊勢海老通信
websocket-railsでチャットもどき - IT土方のめもぶろ
今日の出来はこんなかんじ
http://cat-capeyes.herokuapp.com
見た目はあまり変わってませんが、ちゃんとメッセージが打てるようになったし、実際に違うブラウザ同士で同期できるようになったし、画像を佐々木希にしたしで結構変わりました。
ちゃんとちんこって打てば、佐々木希さんがちんこっていってくれます。
チャットサイト作り2日目
とりあえず見た目だけ、なんとかしてみた。
http://cat-capeyes.herokuapp.com
うん。いい感じだぜー。
明日からは、サーバー部分をやっていこうと思います。
チャットみたいなのを作るには、websocket-railsというのが主流らしくて、それを使おうと思います。
ドキュメントを見ながらやろうと思うのですが、なにせ英語が苦手なのですごく難航しそうです。google翻訳をフル活用しながら、やる予定です。
やる時間も決めておいたほうがいいと思うので、とりあえず2週間で完成させることを目標にします。2週間っていう数字は適当です。