Ruby on Rails チュートリアルを拡張してみた
新人研修の一環としてRailsチュートリアルの機能拡張を行ったのでまとめてみようと思います。
実際書いたコードとアプリケーションも貼っておきます。
Ruby on Rails Tutorial Sample App
環境は以下の通りです。
1. RSpecでテストを書く
Railsチュートリアルのテストはminitestで書かれていますが、実際のプロジェクトではRSpecが採用されることも多いということで、全てのテストをRSpecで書きました。また、E2Eテストを書きやすくするためCapybaraやTurnipを導入したりしました。
2. CIと連携する
CircleCIを入れてテストを自動実行するようにしました。また、CIを通らないとマージできないようにしました。
3. Hamlで書き換える
ERBは冗長なのでHamlに全て書き換えました。書き換えに際しては、erb2hamlというGemを使用すると楽でした。
4. Twitterログイン
Twitterアカウントでユーザー登録・ログインができるようにしました。Twitterでユーザー登録するときはメールアドレスとパスワードのバリデーションに引っかからないように気をつける必要がありました。
5. 検索機能
ユーザーとマイクロポストのあいまい検索を実装しました。SQLインジェクションに気をつけました。
6. REST API
ユーザーのREST APIを実装しました。JSON生成にはJbuilderを使用しました。
7. 通知機能
他のユーザーにフォローされた時に通知が来るようにしました。また、通知のオンオフの切り替えも可能にしました。
8. いいね機能
ユーザーの投稿にいいねできるようにしました。Ajaxで画面遷移せずにいいね数が1増え、ハートの色が変わるようにしました。
9. 返信機能
@username を付けて投稿すると自分とメンション先ユーザーのタイムラインにのみ投稿が表示されるようにしました。また、個別の投稿についても返信ボタンを設置し、その投稿についた他のユーザーの返信も見れるようにしました。
10. DM機能
TwitterのダイレクトメッセージのようなものをAction Cableを用いて実装しました。リアルタイムチャット機能自体は完成したのですが、自分が右側、相手が左側に配置されるようなレイアウトまで作り込めなかったのが心残りです。
その他細かいですが実装したものを列挙します。
- RuboCopでコーディング規約統一
- Brakemanでセキュリティチェック
- BulletでN+1を検知
- Code Climateでコードの品質担保
- Tachikomaでライブラリのバージョンアップ自動化
- RSSフィード
個別の実装方法が気になる方は、以下のクローズしたPRから探してもらうと見つかると思います。
Pull Requests · hisas/sample_app2 · GitHub
nginxでSSL（オレオレ自己証明）
自己証明書を使ったSSL対応サイトを作りました。
環境
・さくらVPS
・Debian 8.6
・nginx 1.6.2
まずはVirtualhostの設定をします。
# vi /etc/nginx/conf.d/default.conf
中身はこんな感じで。server_nameは自分で設定したドメイン名を入れてください。
server {
listen 80;
server_name www.hoge.com;
location / {
root /var/www/virtualhost;
index index.html index.htm;
}
}
server {
listen 80;
server_name hoge.com;
location / {
root /var/www/virtualhost;
index index.html index.htm;
}
}
設定ファイルが適切に記述できているかを確認します。下記がでればOK。どこかのをコピペして持ってくると半角スペースが全角になっていてエラーが出る時があるので注意。
# /etc/init.d/nginx configtest
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
上のrootで指定した場所（ここでは/var/www/virtualhost）にindex.htmlを置けば完了です。設定を反映させるためにnginxを再起動します。
# /etc/init.d/nginx stop
# /etc/init.d/nginx start
さて、本題のオレオレ証明書の作成です。といっても難しくはありません。
まずは、秘密鍵 (Private Key)：server.keyを作成
$ openssl genrsa 2048 > server.key
次に、証明書署名要求 (CSR)：server.csrを作成
$ openssl req -new -key server.key > server.csr
いろいろと聞かれるので答えます。Common Nameに自分のドメイン名を入れるのを注意しましょう。
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
そして、サーバ証明書(CRT)：server.crtを作成
$ openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt
自分がいるディレクトリにserver.key、server.csr、server.crtが作られているのを確認しましょう。
後はSSLの設定を追記すれば完了です。
# vi /etc/nginx/conf.d/ssl.conf
中身はこんな感じ。server.crtとserver.keyの場所をちゃんと指定してあげて下さい。
server {
listen 443 ssl;
server_name www.hoge.com;
ssl_certificate /etc/nginx/conf.d/server.crt;
ssl_certificate_key /etc/nginx/conf.d/server.key;
}
server {
listen 443 ssl;
server_name hoge.com;
ssl_certificate /etc/nginx/conf.d/server.crt;
ssl_certificate_key /etc/nginx/conf.d/server.key;
}
最後に、設定ファイルのチェックとnginxの再起動をします。
# /etc/init.d/nginx configtest
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
# /etc/init.d/nginx stop
# /etc/init.d/nginx start
以上で完了です。お疲れ様でした。
参考になったサイト
怖話の感想と改善案
怖い話がサウンドノベル風に読めるサイト「怖話」を使ってみた感想と改善案を書いていきます。
改善案（Chrome）
- バグ系
・フッターのSNSアイコンの表示不具合を修正する
・メッセージボードにて英語でコメントした時、「コメントは日本語で投稿してください。」をピンクで表示するなどもっと目立つように(iOSも同様)
・ランキングルールの例に出ている勝敗が間違っているので修正する
・怖い画像ページ(/wallpapers)にアクセスした時、上部ナビゲーションで「ショップ」も色が変わってしまっているので修正する(iOSも同様)
- 追加で欲しい機能
・ポッドキャストで一時停止→途中から再生をできるようにする
改善案（iOS）
・本文中の左上に出る表示不具合を修正する
・他の人の投稿のタグを修正できてしまうので自分の投稿のみ編集可にする
・検索結果が多いワードで検索した時待ち時間が長い（「怖話」で検索すると7秒ほど）ので「検索中です」みたいなのを表示する
・ホラー漫画をタップで読めるようにして欲しい（スクロールすると指が疲れるため）
感想
怖話アワードや怖話オブザイヤーといった仕組みは完全無料サイトの中で投稿する人のモチベーションになると思った。また、フォローやコメント、いいね（ストック）機能も付いているためプラットフォームとして使いやすいし、ユーザー間のコミュニケーションも盛んに行われているようだった。デフォルトで怖い画像がユーザーのアイコンとして登録されていることや、怖い画像、画面を揺らす機能、BGMなど「怖い」演出が凝っていて純粋に楽しめた。
aptを使ってみた
さくらのVPSでDebianをインストールしたのでaptコマンドを使ってみました。
こちらにコマンド一覧が詳しく説明されています。
練習としてvimをインストールしてみます。まずは検索。
$ apt-cache search ^vim$
vim - Vi IMproved - enhanced vi editor
vim-athena - Vi IMproved - enhanced vi editor - with Athena GUI
vim-gnome - Vi IMproved - enhanced vi editor - with GNOME2 GUI
vim-gtk - Vi IMproved - enhanced vi editor - with GTK2 GUI
vim-nox - Vi IMproved - enhanced vi editor - with scripting languages support
さっそくインストール。（root権限必要）
# apt-get install vim
Reading package lists... Done
Building dependency tree
Reading state information... Done
.
.
.
update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/ex (ex) in auto mode
できたか確認してみます。
$ vim --version
VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Mar 31 2015 23:36:03)
因みにソフトウェアの更新と削除はこんな感じです。（root権限必要）
# apt-get upgrade
# apt-get remove パッケージ名
黒い画面入門をやってみた
黒い画面入門をやってみました。
Webデザイナーの為の「本当は怖くない」”黒い画面”入門 Part.01 « FJORD, LLC
学んだこと
・黒い画面で使うことができるプログラムは/binフォルダで閲覧できる。
$ cd /bin
$ ls
[ csh echo ksh mkdir rcp stty wait4path bash date ed launchctl mv rm sync zsh cat dd expr link pax rmdir tcsh chmod df hostname ln ps sh test cp domainname kill ls pwd sleep unlink
・PATHという機能により、ディレクトリ名を省略してファイル名だけで実行できるようになる。
・ソフトの依存関係を手動で管理するのは面倒なので、Package Managerと呼ばれる種類のソフトが使われる。Homebrewなど。
・スクリプトを単体で実行するためにshebangという機能がある。shebangとは「実行するファイルの1行目の最初の二文字が#!の場合、その後に書いてあるコマンドに2行目以降の全てを渡す」という機能。
$ vi echo-hello
#!/bin/sh
echo hello
$ chmod u+x echo-hello
$ /Users/kamezawahisashi/echo-hello
hello
・面倒な手順などはスクリプトにして自動化すると仕事の効率化になる。
