Rails + Heroku で知人のポートフォリオサイト作った話

技術

前のブログ書いてから2ヶ月くらい立っていた…
この2ヶ月なにしてたかというと、転職活動しつつ知人のWEBサイトをRailsで作ったりしてました。自分の備忘録も兼ねてまとめておきます。

何を作ったか

イラストレータをやっている知人のポートフォリオサイトを作らせてもらいました。
これまでも作った作品や関わった仕事をまとめたサイトを自分で作っていた方なんですが、一々HTMLを編集してファイル上げたりするのが面倒とのことで、ブログを編集するような間隔でサイトを更新できるよう、Rails + Herokuで一からCMS(であってるかな？)的なものを作ってみました。
ぶっちゃけ簡単にサイトを作れるサービスって普通にあるわけですが、一から作らせて貰ったのはもう完全に自分のスキルアップのためです・・・

私について

  • Rubyæ­´=Railsæ­´=半年くらい

普段はSIerで仮想化のインフラSEやっててます。会社で書くコードといえばVMwareを操作するPowerShellスクリプトくらいですが、去年の暮れにExcelで管理されてた機器リソースの情報をRailsでWEBアプリ化したりしました。
あとはJavaでの業務システム開発を1年くらい、学生時代はC++で統計解析のプログラム書いたりした経験有りですが、ひよっこです。

Railsについて

いやーJavaで業務システム作ってたときからすると、色んなことがすっごく簡単にできて触っててホント楽しいです。Railsについては深いことを語れるほどではないので、使ったgemについて紹介させていただきます。

ユーザー認証

有名ですね。サイト更新用の管理者の認証機能として使いました。

plataformatec/devise · GitHub

画像管理

これも有名ですね！画像を簡単にAWS S3に保存したりできるようになります。また色んなアップロード時に複数サイズの画像を作成できるので、ギャラリーページの作成とかでかなり重宝しました。

thoughtbot/paperclip · GitHub

今回はAWS S3をアップロード先に使用しました。以下のページをかなり参考にさせてもらいました！

[Ruby on Rails]paperclipでつくるS3への画像保存アプリ ｜ Developers.IO

現在、aws-sdk v2にはまだ対応していないようなので、注意が必要です。

AWS Version 2 support - uninitialized constant Paperclip::Storage::S3::AWS · Issue #1764 · thoughtbot/paperclip · GitHub

開発環境でのメール送信確認

開発環境でRailsからメール送ったりする場合の確認用に使いました。送信したメールをブラウザから確認できて便利です。

fgrehm/letter_opener_web · GitHub

以下を参考にさせて頂きました！ありがとうございます。

開発中にrailsから送信したメールを確認する - Qiita

Herokuで必要なgem

HerokuでRails使うにあたり、コレ入れとけ！っていうのが公式のドキュメントで出てます。この辺を入れとかないと動かないのあったりするので要チェックです。自分は下のページ読んでなくて数時間は無駄に格闘していました・・・

Getting Started with Rails 4.x on Heroku | Heroku Dev Center

Herokuについて

Herokuは友人から聞いたり、WEBサービス作ってみた系の記事でよく見かけてましたが、ホントすごいですね。git push heroku masterでWEBアプリが動かせちゃう手軽さも凄いですが、それ以上に無料で使える豊富なadd-onが凄いなと思いました。サイトでは以下を使ってますけど、全部無料です。当然色々と制限はあるわけですが、個人で使う分には十分だと思います。

  • データベース
  • データベースバックアップ
  • 性能監視
  • ログ監視
  • メール配信

全部は長くなるのでいくつかピックアップして・・・

Papertrail

Herokuでログを収集してくれるサービスです。何か起こったときのログ調査はもちろんですが、エラーが起こったときのログをメールやSlackに送信できたりします。自分はエラーが出たらSlackに送るようにしてます。
f:id:suzan2go:20150315234201p:plain
f:id:suzan2go:20150315234202p:plain

New Relic

iPhoneアプリがあります！それだけ！ｗ

New Relic

New Relic

  • New Relic, Inc.
  • Business
  • Free

あとはNew RelicからpingをHerokuに対して送ることで、Herokuのアプリケーションがスリープすることを防止できます(Herokuのアプリはアクセスがないとスリープする)。
Herokuに関しては以下のページをかなり参考にさせて頂いております。ありがとうございます！

妻のパン屋のWebサイトのソースコードと、サイトで活用したRails/Heroku関連の技術的なトピック - give IT a try

GitHubとの連携

GitHubと連携して、GitHubでcommitされると自動でHerokuにもデプロイできるようになってます。さらにCIサービスと連携しているので、最近のWEBサービス企業がやってる「GitHub上でプルリクエスト⇛マージ⇛テスト⇛リリース」みたいなリリース作業自動化が簡単に実現できます。

画面はこんな感じ。
f:id:suzan2go:20150315234323p:plain

サイトについて

Herokuのアプリは標準だと、「appname.herokuapp.com」というようなURLになります。これを独自のドメインに変える場合は、ドメイン管理サービスでCNAMEを使う必要があります。が、自分の使っているお名前.comなんかでもルートドメインでCNAMEを使うことができません。例えば以下のようなのは弾かれちゃいます。

appname.com ⇛ appname.herokuapp.com

こうじゃないとダメです。

www.appname.com ⇛ appname.herokuapp.com

CloudflareというCDNサービスを利用することで、Heroku上のアプリケーションでもルートドメインを使うことが出来るみたいです。自分の場合、ルートドメインを使えるようになっただけでなく、WEBサイトの表示も劇的に早くなりました。

Home | CloudFlare | The web performance & security company

以下を参考にさせて頂きました！

CloudFlare使ってHerokuでルートドメイン使おう - PILOG

UI・デザインについて

分かる人はひと目見ただけでわかると思いますが当然…

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

ギャラリーのページは以下のライブラリを使いました。レスポンシブ対応で素敵！

least.js 2 - Random and Responsive HiDPI jQuery Gallery based on HTML5 and CSS3

jsのライブラリを入れるとturbolinks関連でうまく動かないことが多々あるのですが、無効にするのは何か悔しくて色々調べました。以下のページがとっても参考になりました。ありがとうございます！

Ruby - Turbolinksをオフしないためにやった事 - Qiita

Rails4でturbolinksを謳歌するためのまとめ [俺の備忘録]

作ったWEBサイト

で、結局どんなん作ったかというと、こんな感じのサイトを作りました！

ryonon

人のWEBサイト作ることで学べたこと

誰かに見てもらうものを作ることで出てくる「ここはもっとこうしなきゃ！」と「もっとこんなふうにできない？」という要望に答えることで、何というか一歩スキルアップ出来た気がします。自分で一人でローカル環境でちょくちょく弄ったりするだけだと、どうしても「ここはこんなもんでいいか」という箇所出てきちゃいますしね。

分からんことはググれば大体出てくる！けどそれでいいのかなとも思った

上で色んな方のページを参考にした通り、分からんことは調べれば大体分かるんだけどそれでいいのかなとも感じました。特にrails回りは進化のスピードが早いこともあって、記事の内容が現在のバージョンでは使えないということも。日本語で書かれたノウハウ記事は本当に参考になるわけですが、公式のドキュメントやソースをちゃんと確認しなきゃと感じました。また他人の記事を参考にするだけでなく、自分で元の英語ドキュメントを理解して使えるようなりたいなとも思いました。

gem使えば便利な機能がすぐに使える！でもそれで(ry

deviseやpaperclipで提供される機能を自分で一から実装したらきっと相当時間かかるわけなんで(というか俺実装できるのだろうか)、本当にすごい！そして簡単にWEBアプリがデプロイできちゃうHerokuばんざい！でもこれに乗っかるだけで良いのかなとも思いました。


「ドワンゴはケンカしたら弱い会社」川上会長がデータセンターを作りたい理由 Developers Summit 2015 基調講演 - 週アスPLUS

「努力しなくても新しい半導体工場で生産すれば勝手に性能が向上した。優れた回路設計によって性能をチューニングするより、新しい工場でさっさと作ったほうがいい。これってどっかの業界の未来じゃないかと」

gemにしてもherokuにしてもすっごく便利なんだけど、中身ちゃんと分かった上で使えるようになりたいなと。そんでできればgemとかライブラリとか作ったりもしたいですね。

そんなこんなで

SIerからWEBサービスの企業に転職することになりました。その辺りはまた別の記事にまとめたいと思います。久しぶりにブログ書いたらすっごい時間かかった。。。