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に送るようにしてます。
New Relic
iPhoneアプリがあります！それだけ！ｗ
あとはNew RelicからpingをHerokuに対して送ることで、Herokuのアプリケーションがスリープすることを防止できます(Herokuのアプリはアクセスがないとスリープする)。
Herokuに関しては以下のページをかなり参考にさせて頂いております。ありがとうございます！
妻のパン屋のWebサイトのソースコードと、サイトで活用したRails/Heroku関連の技術的なトピック - give IT a try
GitHubとの連携
GitHubと連携して、GitHubでcommitされると自動でHerokuにもデプロイできるようになってます。さらにCIサービスと連携しているので、最近のWEBサービス企業がやってる「GitHub上でプルリクエスト⇛マージ⇛テスト⇛リリース」みたいなリリース作業自動化が簡単に実現できます。
画面はこんな感じ。
サイトについて
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
作ったWEBサイト
で、結局どんなん作ったかというと、こんな感じのサイトを作りました！
ryonon
人のWEBサイト作ることで学べたこと
誰かに見てもらうものを作ることで出てくる「ここはもっとこうしなきゃ！」と「もっとこんなふうにできない？」という要望に答えることで、何というか一歩スキルアップ出来た気がします。自分で一人でローカル環境でちょくちょく弄ったりするだけだと、どうしても「ここはこんなもんでいいか」という箇所出てきちゃいますしね。
分からんことはググれば大体出てくる！けどそれでいいのかなとも思った
上で色んな方のページを参考にした通り、分からんことは調べれば大体分かるんだけどそれでいいのかなとも感じました。特にrails回りは進化のスピードが早いこともあって、記事の内容が現在のバージョンでは使えないということも。日本語で書かれたノウハウ記事は本当に参考になるわけですが、公式のドキュメントやソースをちゃんと確認しなきゃと感じました。また他人の記事を参考にするだけでなく、自分で元の英語ドキュメントを理解して使えるようなりたいなとも思いました。
gem使えば便利な機能がすぐに使える！でもそれで(ry
deviseやpaperclipで提供される機能を自分で一から実装したらきっと相当時間かかるわけなんで(というか俺実装できるのだろうか)、本当にすごい！そして簡単にWEBアプリがデプロイできちゃうHerokuばんざい！でもこれに乗っかるだけで良いのかなとも思いました。
「ドワンゴはケンカしたら弱い会社」川上会長がデータセンターを作りたい理由 Developers Summit 2015 基調講演 - 週アスPLUS
「努力しなくても新しい半導体工場で生産すれば勝手に性能が向上した。優れた回路設計によって性能をチューニングするより、新しい工場でさっさと作ったほうがいい。これってどっかの業界の未来じゃないかと」
gemにしてもherokuにしてもすっごく便利なんだけど、中身ちゃんと分かった上で使えるようになりたいなと。そんでできればgemとかライブラリとか作ったりもしたいですね。
Ruby初心者だけどRuby Association Certified Ruby Programmer Silverを取得した！
Rubyを始めて2ヶ月くらいですが、Ruby Association Certified Ruby Programmer Silverを取得しました！ので受験記録を書きます。
他の方のブログの受験日記では、「ちょっと勉強すれば取れた」的なことが結構書いてあったので、舐めてほぼ無勉強で受けたら普通に一回落ちました。きちんと勉強して2回目はバッチリ受かったので、これから受けようと思っている方の参考になれば幸いです。
ちなみに再受験無料キャンペーン中だったので、2回目は無料で受けられました！
Rubyアソシエーション: Ruby技術者認定試験再受験無料キャンペーン
私とRuby
Rubyの経験は2ヶ月程度。といっても本職はSIerのなんちゃってインフラSE(しかも仮想化)なので、仕事でバリバリ使ったわけではなく、仕事の合間にRuby on RailsのWEBアプリ(リソースの集計やらなんやら内部で使う簡単なもの)を作ってみたり、家で本を読んだりした程度。プログラミング初心者というわけではなく、以下の言語は使ったことがあります。
1回目の受験
転職に向けて自分のスキルを客観的に示せるものが欲しいなー思い、「年末年始に勉強して、仕事始めの週末に受けるぞー！」と年末に申し込みました。ただ体調崩したり全然別のこと(友人のWEBサイト作り)とかやってしまって全然勉強できなかったのですがね。。。で、直前にキャンセルしようと思ったら、もう期限切れ…という状況で勉強を始めたのは試験を始めたのは2日前からでした。
勉強に使ったのは以下のサイトです。
とりあえず練習問題を2週して、大体解けるようになったので「いけるんじゃないか・・・？」と思ってしまいました。
ミニツク - Rubyのe-ラーニング研修システム
結果は・・・惨敗。ミニツクの問題が悪いわけではありません。。。問題が出来るようになったのはただ単に答えを覚えてしまっていただけでした。そして単純に知識のなさを痛感。Railsをちょっと触っただけでは知らないメソッド、文法がいっぱい出てきました。
二回目の受験に向けて
Rubyの基本をお勉強
そもそもRailsの勉強はしたけど、Rubyは真面目に勉強してない状態だったので、改めて1からRubyを勉強することにしました。
まず読んだのは、色んなブログで見かけますが以下の本。
- 作者: 高橋征義,後藤裕蔵,まつもとゆきひろ
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2013/06/04
- メディア: 単行本
- この商品を含むブログ (29件) を見る
自分が買った本の帯には「本書は初心者の気持ちを裏切らない出来になっています -Rubyの父 まつもとゆきひろ」と書いてあるのですが、本当にその通りだと思います。Rubyではこうやって書く／書ける、Rubyはこういう作りになっている、ということが綺麗に体系立てて書いてあるので、さーっと流して読んでもかなり勉強になります。試験で問われたことも結構出てくるので、本当にこの本を済から済まで勉強すれば(読むだけでなく実際に動かして覚えるとこまですればですが)、試験対策はいらないかもなと思いました。
試験対策
本で勉強
とはいえ再受験の期間が1月までだったので、とりあえず以下の本を買いました。レビューでも書かれますけど、対象のRubyバージョンがかなり古い(本は1.8.7系、試験は2014年10月より2.1)ので、挙動で？？ってところがあったら調べてみた方がよいです(あと結構誤植が…)。「1.8.7まではこうだけど1.9以降はこうなるよー」って注意書きは一応あります。
Ruby公式資格教科書 Ruby技術者認定試験 Silver/Gold対応 (EXPERT EXPASS)
- 作者: 増井雄一郎,小川伸一郎,(株)日立ソリューションズ藁谷修一,川尻剛,牧俊男,Rubyアソシエーション,CTCテクノロジー(株)監修
- 出版社/メーカー: 技術評論社
- 発売日: 2012/02/22
- メディア: 単行本（ソフトカバー）
- 購入: 5人 クリック: 204回
- この商品を含むブログ (10件) を見る
公式リファレンスを読んで勉強
あとは出勤時間なんかにスマホからRubyのリファレンスマニュアル読んでました。
オブジェクト指向スクリプト言語 Ruby リファレンスマニュアル
他の方の合格記にもリファレンスマニュアルを読んだーとよく書いてあったので真似しました。丸暗記できればそれがいいと思いますが、自分は無理なので以下を意識して読みました。
実際に動かしてみる
基本暗記の試験なのでアルゴリズムを問われたり実際に書けとかは無いわけですが、実際に自分で動かしてみると身につくし理解も深まります。自分のMacにも実行環境はあったのですが、ここ変えたらどうなるんだろ？っていうのが直ぐ試せるという意味だとWEB上の実行環境って都合がよいです。paiza ioというサイトで自分は色々試してました。
ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO
PowerShell(PowerCLI)でフェールオーバーホストになっているESXiを判定する。
普段の仕事ではサーバ仮想化関連のSEをやってるのでその話を。色々平行して作っているのですが、まだお見せ出来る状態じゃなくて悔しい！1月中にはなにか公開できるかなと思います。
※以下、会社でやったことを思い出しながら書いてるので、動かなかったらスミマセン・・・
VMwareではHA(High Availability)という、ESXiと呼ばれる仮想化ホスト(物理サーバ)の障害によりその上にいる仮想マシンが停止した場合に、他のホストに仮想マシンを自動で移動させて再起動させるという機能があります。
このHAには大きくわけると以下の様な設定があります。
- 特定のESXiサーバをHA専用機(フェールオーバーホスト)として用意し、通常時は仮想マシンを起動させない。
- クラスター(ESXiサーバ群)全体で、X台のESXiサーバが停止してもリソースが確保できるようにする。
実際どうなのかはわかりませんが、1にしているパターンが多いのではないでしょうか？
PowerCLIについて
PowerCLIとはVMwareが提供する、PowerShellで動くESXiサーバの管理ツールです。vCenterサーバに接続して使えば、以下のようにしてVMの一覧や、データストアの一覧が取得できます。VMwareの管理で問題になりがちなスナップショットの一覧も取得出来て便利です。以下のように使えます。
gistf9d0e36afcabd17131ad
フェールオーバーホストになっているESXiホストを判定する
前置きが長くなりましたが、タイトルの件について。フェールオーバーホストを指定してシステムを運用していると、例えばフェールオーバーホストのリソースは除いてリソース総容量は計算しときたいとか、まあ色々あると思います。PowerCLIのコマンドでフェールオーバーホストを一発取得する方法はないのですが、フェールオーバーホストの情報は実はGet-Clusterで取得できるclusterオブジェクトのなか、ExtensionDataに定義されています。
「ExtensionData.Configuration.DasConfig.AdmissionControlPolicy.FailoverHosts 」
FailoverHostsの中に、その名前の通りフェールオーバーホストに指定されているESXiサーバのID(ホスト名ではありません！)が配列で格納されているので、このIDを使えばフェールオーバーホストを特定できます。以下、サンプルです。
gist66289adf0bbf85f3529d
参考
ExtensionDataの中に情報があるなんてことは、正直全然自分じゃ見つけられませんでした。以下のページで見つけました。公式のドキュメントにも書いてなかった気がするけど、下の人はどうやって見つけたんだろう？
A function to lookup Host System friendly name by MoRef using PowerCLI | Shogan.tech
今年の抱負的な何か
いつか更新しようと思ってたら一ヶ月たってしまった。。。
今更感ありますが、今年の豊富を書いとこうと思います。
毎週ブログを更新する！
8月から書き始めたはいいけど月一になってしまいましたね。自分がやったことを定期的にまとめると、記憶の整理にもなるし理解があやふやなところの発見にも繋がるのでちゃんと書いてこうと思います。去年はインフラの運用がメインの仕事だったりして中々かけることがなかったりしたのですが、上司に半ば無理やり取り行って運用改善のためのRailsアプリ作り始めたりしたので今年はもう少しかけることが増えるかな。twitterではちょっと書きましたがd3.jsをラップして使うjsライブラリを仕事で使ったので、紹介したいと思います。
履歴書にかける仕事をする
転職活動してて思ったのですが、自分って「これ自分がやりました！」と胸張って言える仕事があんまりないんですよね。プロジェクトの中で細かい改善とか、ツール導入とかは結構あるんですけど。上に書いたこととも被りますが、いまやってる運用改善のためのRailsアプリを１つまとめたいな。
何か１つWEBサービス作る！
去年はnode.jsを使ったRedmine用のクライアントアプリを公開したりして、そこそこ見てもらえたりしました。
Redmineクライアントのバグを色々と直しました。 - suzan2号の戯れ
が、やっぱりWEBサービス作ってみた！というのやっぱり凄く羨ましい。得られるレスポンスも違うし。友人とも色々やりたいねーという話はしてるので、今年中に何か作って公開したいなと思います。
Redmineクライアントのバグを色々と直しました。
会社のPCにDLしてみたはいいものの、色々とバグが多かったので…
あと地味にトラッカーをちゃんとプロジェクト毎のもの持ってくるようにしました。
自作RedmineクライアントのWindows版の配布を始めました
自作Redmineクライアント(RedNodeKit)のWindows版の配布を始めました。
Release add updating tickets function · suzan2go/RedNodeKit · GitHub
Window版はRedNodeKit-0.2-Win.zipです。
使い方はDLしたZIPファイルを解答して、中のRedNodeKit.exeをダブルクリック。
SettingタブでredmineサーバのURLとAPIキーを入力すれば使えます。
READMEにはWindows8.1をサポートと書きましたが、
自宅に8.1しかなくて試していないだけで多分Windows7やWindows8でも動きます。
このRedmineクライアントについての機能や使い方の詳細は以下の記事でご確認ください。
Redmineのデスクトップクライアント的なものをnode-webkitで作った - suzan2号の戯れ
Redmineのデスクトップクライアント的なものをnode-webkitで作った② - suzan2号の戯れ
自分で名づけておいて何だけどRedNodeKitと呼ぶのが段々と恥ずかしくなってきた感ある
中身がゴチャゴチャだったりチケット一覧表示がダサかったり色々と直したいけど、
そろそろ別のもの（WEBサービスとかスマホアプリとか）に挑戦したくなってきた。
そういえば前の転職記事に書き忘れたんだけど、面接の時に聞いた話だとWEB系企業ではAndroidエンジニアが足りてないらしいです。だからというわけじゃないけど、本棚の肥やしとなりつつあるAndroid本があったりするので、次はAndroidアプリに挑戦してみようかなー。
Redmineのデスクトップクライアント的なものをnode-webkitで作った②
前回の記事はこちら
Redmineのデスクトップクライアント的なものをnode-webkitで作った - suzan2号の戯れ
なんか凄い時間が立ってしまいましたが、チケットを表示・修正する機能をつけました。
suzan2go/RedNodeKit · GitHub
My Ticketsのタブから、現在自分に割り当てられているチケットの表示・更新ができます。
スマホアプリのように下にフックすることで更新もできます。
これにはhook.jsを使わせてもらいました。
本当にすごーく簡単にhookでの更新ができるようになりました。
jordansinger/Hook.js · GitHub
チケット一覧の画面でチケットをクリックすると、詳細な情報を表示できます。
更新履歴も出してますが、ステータスやメンバーの変更はidで表示されちゃいます。今後なんとかします。
以下、編集画面です。メンバーの変更とか、期日の変更とかステータスの変更など簡単な変更をここにすることを想定してます。注記に変更時のコメントを書く感じです。
更新したところ
前回の記事のあと今まで自分しか見てなかったんじゃね？？というこのブログに200人以上が来てくれたりして、よっしゃー頑張るぞ！！となってたんだけど、仕事のピークも重なってしまい1ヶ月弱立ってしまいました。この３連休と先週末頑張ってやっと使って貰えそうなもんができました。
- できるようになったこと
- 自分が担当者のチケットをtwitterアプリ風(今は更新するとこだけだけど…)に表示する。
- チケットを編集する
- まだ出来ないこと
- 自分が担当者のチケットが作成されたら通知する(でもコレは結構しんどい)。
- 更新履歴の内容をちゃんと表示する（現在はメンバー変更も1とか2とかidで表示されてしまう）
ハマった点
- ajaxのPUTメソッドが、成功してるはずなのにerror処理に入ってしまう。
- バグではないみたいですが以下と同じ状況みたい？結局HTTPのステータスコードで処理を分けるようにしました。http://bugs.jquery.com/ticket/13350
あとはどこにはまったというより、自分のアプリ設計的なスキルの無さからくるものなんですが、ここもう少しうまく書けないかなぁーと色々と書きなおして結局スパゲチーに書いていたら時間がかなりかかっちゃいました。
rest.jsにチケットの取得・登録のrestをまとめてるんですが、いちいちajaxを毎回書いたりするし、restでデータ登録するとこはまとめてても、結局個別にhtmlのscript要素に似たようなコード沢山書いてしまったり。一回一からリファクタリングしたいと思ってます。javascriptのデザインパターン的なものを勉強したい。
