React + Redux + Railsのサンプルを色々アップデートした

アップデートしたのはこれ。 react-railsredux を同時に使うためのサンプルです。 github.com

公開する時期が早かった(2015年の8月)せいか、謎にスターが100個以上ついてる。有難い。 (当時はReduxがまだ流行り始めたころで、Railsと組み合わせて使ってるようなサンプルが無かったから…と思う)

使っているgemは以下。

こんなサンプル作ったけど、仕事ではこの構成で運用してなくて、JS/CSSのビルドとして Sprockets は使わずに、 webpack を使う構成だったりします*1

browserify 自体の開発がもうあまり活発には行われていないっぽい(さらにrails 5.1 では webpack のサポートが入る*2… )のと、 個人的には react-rails よりも react_on_rails *3 の方が色々都合が良い( HMRがやりやすいとか、コンポーネントをグローバルに置かなくてよいとか、AuthenticityTokenをポストする方法がサポートされているとか )と思っているので、このサンプルの構成自体ちょっと微妙ではあります。

が、react_on_rails の方にはかなりしっかりした Redux を使ったサンプルコードがあるので*4react-rails でうまくやる方法はまだ一定需要があるかなと思い、色々アップデートしてみました。

Railsを4.2から5.0.0.1に上げた

ほぼ中身のアプリケーションがないということもあるけど、何も困らずに上げられました。特筆することも特に無いw

テストを追加した

こんなIssueを貰っていたので、テストを追加してみた。 github.com

E2Eのテスト

対象のコミット

普通にcapybaraとseleniumで。仕事でもハマったのですが、 firefoxの47以下でないとselenium-webdriverが動きません。。以下、 capybara の公式より引用です(2016年12月18日現在)。

Note: Firefox 48+ If you're using Firefox with selenium-webdriver and want full functionality stay on either Firefox 45.0esr or 47.0.1. If using selenium-webdriver 3.0+ this will require configuring your driver with the marionette: false option as shown below

本当は Poltergeist のようなヘッドレスブラウザの方が良さげですが、それそれでハマりそうだったので一旦仕事でも実績のある構成にしました。

JS単体のテスト

対象のコミット

正直、テストのライブラリだけでも色々あって何が良いとか全然わからないのですが、過去ちょっと触ったことがあって今も流行ってるっぽい enzyme で書きました。 github.com JSDOMを使ったテストのセットアップはほぼ以下を参考にしています。 github.com

正直、ESEのテストがあればJS単体のテストってそこまでいらない気もするのですが、どうなんですかね。オートコンプリートとか割と複雑なコンポーネントを自分で書いた場合には確かに欲しい気もしますけど…フルSPAとか書いたりするとコンポーネント毎のテストが欲しくなったりするのだろうか。


サンプルとしてはかなりシンプルなので(Redux公式のカウンターアプリそのまま)、もうちょっと色々肉付けしたい感ある。 仕事で使った時便利だったRedux Formとかそういったライブラリも混ぜて、もうちょいリアルなアプリケーションにしていこうかな。

【その「エンジニア採用」が不幸を生む】を読んだ

その「エンジニア採用」が不幸を呼ぶ という本を読みました。

何故読んだのか

ブログやtwitterで見かけたので。 Rubyエンジニアの採用戦略について話した - pblog

自分は会社で採用に関わる立場ではないのですが、今後のキャリアとかちょっと考えるきっかけになったりするかなと思い、買ってみました。 (結論からいうと、そういう観点ではそこまで参考になる部分はなかった)

感想

いくつか印象に残った点をメモ。

経営課題をエンジニア採用で解決しようとする落とし穴/エンジニアの募集要項が書けない人事

えーこんなひどい経営者/人事いるのか・・・という感想です。目的はないけど100人エンジニア採用しようとする、「よくわからんけどクラウドサービス作りたい」でよく分からんままエンジニア雇っちゃう経営者とか、エンジニア募集要項のよくわからないところを勝手に削っちゃう人事…とか。自分のいる環境って結構恵まれてるんだなと思いましたw

現職エンジニア、転職時の希望職種は「特にこだわらない」が50%

えーこれは本当にそうなのかーって思いました。少なくとも自分の観測範囲にはいなかったなぁ。 自分がSEやってたとき「SEやめてー」はよく思ったけど、すくなくともエンジニアではいたかったので。

エンジニアを2つのタイプ、4つのグループで分類する

自由な開発環境(タイプA)と、ガバナンス優先の開発環境(タイプB)という2つのタイプ、技術×志向×経験でレベル分けした1〜4までのグループの組み合わせ8つのセグメントにエンジニアを分類して採用を考えましょう、というお話でした。これ、最近よく聞くようになった SoR/SoE とかも絡んでくる話な気がします。

20代の開発経験がタイプAとタイプBのどちらかになるかに大きく影響するとあって、自分はどっちなんだろうと思いました。 タイプBの開発環境にいた期間は長いですが、それにフラストレーションがたまって転職したところはあるので、現在でいうとかなりタイプAだと思われる。でもタイプB的なところを最近評価されることが多い気もするので、どっちとも言えない。

優秀なエンジニアはSNSつながりで転職する

何となくそうだろうなとは思ってましたがやっぱりそうなんだなという感じ。でも、人材サービス会社経由で見つけるのが難しくなっているレベルだとは思わなかったです。自分もSIerから転職するときにはリクナビやら◯◯ナビ系にはいくつか登録しましたが、いま転職するとしたらきっと登録しないだろうな(自分が優秀かどうかはさておきw)。


久しぶりにブログ書いた。本を読む熱が上がってきてるので、また読んで書こう。 次はじょーかーさんのqiitaで読めって言われてた以下の本を読もう。

2015年の振り返り

2015年を振り返ります。去年のはじめにブログを毎週更新するとか書いた気がするが忘れる。

今年の個人的に重大な出来事

転職した

某メーカーのSEから、5月にWeb系のベンチャーへ転職しました。2015年の2月に内定をもらったのですが、当時は趣味で作ったWebサイト/nodewebkitアプリと仕事で社内向けの管理アプリを作った程度(しかも自分一人で作った簡単な奴)で、今思えばエンジニアとしては結構ウンコな感じでしたw

実際、色々Web系の会社に応募しても書類は通れど…という感じだったし、ぶっちゃけ自分自身本当にWebエンジニアとしてやっていけるのかどうか不安もかなりありました。せっかく二次面接まで進んだのに「やっていけますかね…?」的な質問を沢山してたら、「モチベーションに不安がある」という理由で落とされたこともあります。今の会社に入れたのもやる気とかガッツを見せたからだと思うので、スキルがなくてもやる気を見せるのは結構大事だと思います(実際、落とされた会社では、その後元営業からエンジニアになった人もいたようだし)。拾ってくれてありがとう今の会社。

入社後の話。大規模なRailsのソースを見るのは初めてだったので、とにかく最初は色んなソースコードを読んだり、他の人のPRレビューを見て、こういう書き方は駄目/良いというのをとにかく盗んでました。今思えばもっと他の人に聞けばよかったんですけどね。「え…こいつこんなことも知らんのかよ…」みたいに思われたらどうしようという恐怖があったような気がします。ただそのおかげでコードを読む力は大分身についた気がする。年代の近いエンジニアが多かったのにも助けられました。あと某フリーランスでスーパーなエンジニアの仕事を間近で見られたのは本当に良かったです。

仕事で自分で1からWebアプリケーションを作った

3ヶ月くらいは既存サービスの機能改修や機能追加をやっていたんですが、8月に1からWEBサイトを構築するプロジェクトに参加しました。マネージャー的な人が一人、手を動かす人は自分含め2人で納期1ヶ月とかだったんでまじかよ…と最初は思ってましたが、今思うと本当に良い経験を積ませてもらったなと思います。認証回りとか1からやらないと触る機会ほとんどないですし。Javascript回りで会社の中でも新しい挑戦ができたのはよかった。

qiita.com

reduxはこれ書いた8月当時にまだ1.0rcとかだったんで全然日本語の情報が無かったんですが、そのおかげでGitHubのIssueあさったりソース読んで理解するしかなかったのでJS力が結構上がった気がする。(時間的な制約もありぶっちゃけ使う機会はあまりなかったのですが…)

あと裏側で他のクラウドサービスとAPI連携する部分を、仕様と実装含めて全部自分でやれたのがとても良かった。今思うともっといい実装に出来たのですが、そういう思考に辿り着いたのも一回自分でやったおかげです。

子供が生まれた

12月の終わりに子供が生まれました。マジかわいい。天使。 でも時間の使い方を今までよりもっと考えなければいけないなと感じます。お家に来て4日目、大分よく寝てくれるようになりましたが、オムツ替え・おっぱい・ぐずるので抱っこ、で一日終わることもありそう…

OSSに貢献した

これも12月の終わりの話ですが、初めてOSSに貢献しました。趣味開発中にたまたま見つけたバグで、原因をさぐり他のライブラリでどんな風に修正してるか探して、英語でビクビクしながらPR。Railsのデフォルトconfig変更により、落ちるようになってしまったテストもついでに直しました。

github.com

英語でやりとりしなくて済むようにさっとマージしてもらえることを期待してたのですが、色々とツッコミが入り(しかも相手のツッコミが微妙に間違ってる)ビビりました。が、意外と何とかなるもんで英語で色々と説明して、修正して無事マージしてもらうことが出来ました。

マージしてもらったことも嬉しかったですが、そのバグで結構困ってる人がいたようで「Awesome!」「Thank you.」「Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! So many hours searching for this.」などと言ってもらえたのが嬉しかった。

意外となんとかなることがわかったので今年はもっとOSSにPRを出そうと思います。あとエッジなものを使うと色んなバグを踏めてPRチャンスが生まれることがわかったので、今後は少なくとも趣味開発ではエッジなものをガリガリ使っていきたい(エッチなものではない)。

まとめ

去年は転職とか色々なことがあって、密度が異様に濃い1年でした。RubyやJS力はかなりあがったので、次はインフラにも強くなりたいところ。

あとはOSSとかQiitaとかアウトプットを増やしていきたい。他社のエンジニアにもほんの少しは認知されるような存在になれたらいいな。

SIerからWeb系に転職して半年。転職前にやっといてよかったなぁと思ったこと

SIerから自社Webサービスをやってる会社に転職して半年たったのでまとめる。本当は試用期間が終わったころに書こうと思っていたのに、すっかり忘れてました。。。

SIerでは仮想化のインフラエンジニアっぽいことしてました。いまはRubyの会社でRails触ったりReact触ったりしています。
以下は、これをやっておくと転職のときに有利…とかいうものではなく、転職後になってやっておいてよかったなと思ったことですので注意。

やっておいてよかったなと思ったこと

Gitの使い方を覚えておく

Gitは普通に使いますし、Gitが全く使えないと開発に参加するところから大変です。
当然、仮想化のインフラエンジニアなんてやってたのでGitなんて全然仕事では触ってませんでしたが、趣味の自分一人の開発でも更新はGitHubでプルリクエストを送りセルフマージする感じにして慣れるようにしてました。

以下の本では、なんと実際のレポジトリにプルリクエストを送ることができますし、GitHubだけではなくGitの基本的な使い方を教えてくれるのでお勧めです!
http://www.amazon.co.jp/GitHub実践入門-~Pull-Requestによる開発の変革-PRESS-plus/dp/477416366Xwww.amazon.co.jp

ちなみに会社でGitHubを使ってアプリ開発をする場合は、レポジトリをforkではなくブランチを分けて開発をしています。
以下の記事の様な感じです。blog.qnyp.com

リーダブルコードを読んでおく

「他の人にも読みやすいコード」とはどんなコードなのか、何となくでしか分かっていなかったことを順序立てて説明してくれます。特に自分のようにコードレビューをする・される経験が殆どなかった人にはオススメです。www.amazon.co.jp

自分でWebサービス・プロダクトを作って公開してみる

これが一番ためになってます。一からWebサービス(自分の場合はWebサービスではありませんでしたが…)を作ると、インフラからアプリまで一通りのことが経験出来ます。そして何かを作ろうとすると、チュートリアルや初心者向けの解説では書いてなかったようなことを自分で調べたり、考えたりする必要が出てくるので、只々勉強するよりも遥かに身につきます。

何も作りたいものが思いつかない…という人は、自分のためのブログやサイトを作ってみたり、友達から案をもらったりするのも良いかもしれません。自分の場合は、知人のイラストレーターさんのサイトリニューアルをやらせてもらいました。
このときに学んだHerokuやAWSの知識は結構今でも役に立っています。suzan2go.hatenablog.com

Webサービスではないのですが、こんなのも作ってました。今見ると割と糞コードなのですが、このブログ書いた時にはそこそこ色んな人が見てくれて、スタートアップのCEO?とかそんな感じの人から使ってます!とtwitterで言われたのは嬉しかった。趣味で開発してるとモチベーションが中々続かないものですが、公開して何かリアクションがあるとメチャメチャやる気がでますのでオススメ。suzan2go.hatenablog.com
React + Electronで書き直そそうとしてるのですがストップ中…
suzan2go/redelectron · GitHub

やっておいてよかったなと思ったこと(Rubyの会社に行く人向け)

以下からはRuby(というかRails)で開発をしている会社に転職する人向けです。
(しつこいですが、これをやっておくと転職のときに有利…とかいうものではなく、転職後になってやっておいてよかったなと思ったことです)

Rails チュートリアルをやっておく

このチュートリアルのいいところは、単純にRailsだけではなくてGitの使い方とか、どんなふうにテストコードを書けばいいかなど、実際の開発でやるようなことを一通り流れにそって経験できることです。特にテストコードをどんなふうにかけばいいかって、経験がないとあまりピンとこないところだと思います。自分はこのチュートリアルで初めてテストコード書いて、テストをどんなふうに書くのか理解することができました。railstutorial.jp

Rubyの資格に挑戦しておく

資格なんてとっても…と思うかもしれませんが、単に文法だけではなくRubyがどんな仕様の言語になっているかを体系的に学ぶ良い機会になりました!単に文法的なところは都度調べるでも良いかと思いますが、そもそも知らないと「こんな書き方できるの!!」となるようなものがRubyにはたくさんありますし、色んなものがオブジェクトだったり、既存のクラスが拡張できたりする言語仕様は学んでおいて本当に良かったなと思ってます。suzan2go.hatenablog.com

やっときゃよかったなと思ったこと

以下は、自分がやっときゃよかったなと思ったことです。
こちらもRubyRailsを使う会社に行く人向けです。

Railsガイドを読んでおく

これをいきなり読んでも頭に入らないと思うので、Railsチュートリアルをやったあととか少し慣れてきた後がオススメです。railsguides.jp
Active Support コア拡張機能の章だけでも読んでおくと良いかも。tryとかpresent?とかよく使います。
Active Support コア拡張機能 | Rails ガイド

Style Guideを読んでおく

以下適当にググッて出てきたものを張りました。会社によってはスタイルガイドを公開してたりもするので、確認してみると良いと思います。github.com
github.com

まとめ

SIerにいて殆どExcelばっかいじっていた自分が、コードをバリバリ書くWeb系企業に転職したあとで、転職前にやっておいて/やっておけばよかったなと思ったことをまとめました。参考になれば幸いです。

特定のページを読み込んだときにアラートをだすchrome拡張を作った?

本番環境で間違えて開発環境でやるような操作をしてしまいそうになった/してしまったことはないでしょうか。ブラウザから何かの登録とか削除とか…

普段から注意することはもちろんですが、技術的に解決できるのではと思い特定のページにいったときにアラートを出すchrome拡張を作りました。と言えるのか分からんくらい簡単にできました。というかチュートリアルとかで全く同じことやってそうだ。。。github.com


対象のURLはmanifest.jsonで、対象のメッセージはscript.jsを変更すればOKです。

設定ができたら、chromeからmanifest.jsonを読み込みましょう。

デベロッパーモードにチェックをいれて・・・
f:id:suzan2go:20150517205629p:plain
パッケージ化されていない拡張機能を読み込む、を選択し、manifest.jsonが格納されたディレクトリを指定します。
f:id:suzan2go:20150517205906p:plain
するとmanifest.jsonで指定したページを読み込むと、アラートが表示されます。
f:id:suzan2go:20150517210836p:plain

manifest.jsonやscript.jsを更新した場合は、拡張機能のリロードが必要です。

気合いれて作ろうと思ったら、最初に調べたことで全部出来てしまった…
今回はmanifest.jsonやscript.jsを直接弄ってますが、chrome側でURLやアラートメッセージを設定できそうなので気が向いたら作ってみます。

chrome拡張何となく難しいイメージあったけど、結構お手軽に色々出来そうなので何か作ってみようかなーと思ったのでした。

IKEAで買った家具を2年で処分してしまった

転職前の有給休暇を利用して大体2年前に買ったIKEAの家具(ベッド、ワードローブ)を処分しました。
売ることも考えたけど、分解しなきゃいけないとか、そもそも値段つかないとかだったので、業者に頼んで持って行ってもらいました。

捨てたもの

買ったときのものが見つけられなかったので似たようなものを。値段はこれよりも安かったと思います。www.ikea.com
www.ikea.com

何で捨てたのか

色々ありますが、一番の理由は奥さんとの2人暮らし賃貸には少々サイズがデカ過ぎたことですかね。今後家族が増えた時のスペースが確保できないということで、今回処分しました。

2年で処分は本当にもったいないことしたなと思ってる。2年前住んでた家はクローゼットなかったので仕方なかった面もあるけど、当時新婚ということもあり少々舞い上がってたなーと反省してます。

IKEAの家具で後悔したこと。

家具自体は結構気に入っていたんですけどね。

お店でみるよりでかい

上にも書きましたがIKEAの家具はお店で見るとなんかちょうどいいサイズに思えますけど、実際に家で組み立てるとマジででかい。お店で見た時の1.5倍くらいに感じます。特にワードローブは背が高いので、部屋におくとかなり圧迫感ありました(処分したあと、この部屋こんなに広かったっけ??となった)。幅とか奥行きは当然買うときに気にしてましたが、高さはあんまり考えてなかったなーと反省。

重い

日本の同じサイズの家具の2倍は言い過ぎかもしれないですけど、本当に重いです。IKEAは基本自分で組み立てですが、運送業者さんが持ってきた板を設置する部屋に持っていくのだけでも本当に大変だったのを覚えてます。組み立て手順自体は簡単なものですけど、マジで重いので一人暮らしの女性とか非力な男性で大型の家具かっちゃうとホント大変ですよ!

引っ越しのとき大変

IKEAの家具は引越し業者に嫌な顔されますねw重すぎるのでそのまま持っていくことができず、分解して再組み立てすることになるので。引越し業者によって対応分かれますが、以下のパターンでした。

  1. IKEAの家具は拒否される。別途指定の家具業者に頼んで、分解・組み立てが必要(+5万とかだった)。
  2. 引っ越し中に破損しても責任はとれないことに同意できれば、分解して持って行ってもらえる。組み立てもやってくれる。

自分は安く済ませたかったので、引越し業者に分解・組み立てまで全て頼みました。組立自体はしっかりやってくれましたが、釘とか使ってる箇所があるので強度は触って分かる程度に弱くなります。地震とかで壊れて重い板が倒れてきたりしたら怖いなーというのも今回処分した理由の1つだったり。(引越し業者も分解が二回目のIKEA家具だとかなり柔くなったと言ってました)

買ってよかったなーと思ったこと

捨てといてなんですが・・・

お洒落(だと自分は思う…)

これはIKEAのお店で見るからなのかもしれないけど、やっぱりニトリよりはお洒落に感じます。これは人によると思いますけど。でも似たようなもの探すと普通にニトリとかにも置いてあったりはする。

使いやすい・カスタマイズできる

ワードローブが特にそうだったんですが、自分で中身を結構カスタマイズできるので、使いやすいです。中身を網棚にしたり、木の引き出しにしたり、棚板をガラスにしたりとか。捨てといてなんですが結構気に入ってました。
ベッドもヘッドボードを選んべます。ベッド下の収納と合わせてかなり重宝してました。

結論

  • 引っ越しと同時に買うのは止めよう。IKEAの家具(に関わらずかもしれないけど)は家に運ぶと思ったよりでかい。
  • 今後、数年以内に引っ越しするなら買うのやめよう。IKEAの家具は引っ越しするの大変だし、分解すると強度下がる。

IKEAで大きな家具買うなら家かマンション買った後がよいなと思いました。

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

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

何を作ったか

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

私について

普段は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アプリがあります!それだけ!w

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