初めてのWebサービスを3日でつくってみた（Node.jsで）
Node.jsを触って勉強してたらWebサイトができました。
Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。
9/14追記）スマホ対応をやりました！
普段はiOSアプリを書いています
普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。
普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。
つくったもの
結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました
結婚式の余興動画がまとまっていて、だら見できるサイトです。最近友人の結婚式が多くて、余興の動画をウォッチすることが多かったのでまとまってて欲しいと思ってつくりました。
機能的にはYoutubeにあがっている余興動画を自動でとってきて登録してくれます。使った技術は以下のような感じ。
開発3日間を振り返る
始める前のスペック
- Node.jsは使ったことない
- RESTfulとかは何となく分かってる
- 言語はほぼObjective-Cしか書いたことないレベル
- Railsで何かつくろうとして2回くらい挫折
Ruby on Rails か Node.js のどっちかで作ろうと思って、周りに詳しい人の多い（詰まったら聞きやすい） Node.js を選びました。
＜1日目＞
やったこと
まずはnode.jsの全体像を把握すべく、緑の本を読みました。これを読むとnodeの実行方法やよく使うモジュール、expressとかmongoがなんとなく分かりました。
ペアプロでの入門は最高
なんとなく分かったとこで、node.jsに詳しい友人と夜ご飯食べながらペアプロ。環境設定とかAPIの設計とか、最近のトレンドをあわせて教えてくれてめちゃめちゃ助かりました。GETでmongoに入ってるデータを一覧取得して、POSTで新規登録する、みたいな部分の実装まで付き合ってもらいました。
CSSが楽しい
家帰ってから興奮の赴くままにCSSを書いて、見た目を良い感じに整えました。CSS久しぶりに書いたけどめちゃめちゃ楽しかったです。アプリはアイコンの重要度が高いけど、Webはレイアウトの比重が大きいのでレイアウト好きな自分には嬉しい。
途中CSSが迷ったときはこの本で復習しました。ポイントが押さえられていてこれ一冊でサイトが1つ作れる便利ブックです。
ここで1日目は終了。朝4時くらいに寝ました。
＜2日目＞
やったこと
Twitterウィジェット
動画だけで寂しかったので、Twitterウィジェットを配置しました。初めてだったのですがTwitterのサイトがよく出来ていて迷わず置けました。
「結婚式の余興」で検索した結果のタイムラインがサイトの右側に並んでいます。
ページング処理の実装
また、ページングの処理や動画の追加フォームなど、javascriptをいじって細かい部分を作りました。javascriptもほとんど書いたことはなかったのですが、詰まったら本を読み返すスタイルで前進しました。使った本はこれです。
サイ本ほど重くなく、かつ一通り網羅していて助かる感じの本です。
カスタムフォントの適用
フォントくらいは凝ろうと思って、カスタムフォントを使いました。手描き風の可愛いフォントを探してkilojiにしました。
Herokuにデプロイして公開
最後にHerokuにデプロイします。Node.jsをHerokuにデプロイするのは以下のページの手順を参考に進め、最後にHerokuにMongoHQを追加して完了。
「結婚式の余興.jp」がインターネット上に公開されたここまでで2日。
＜3日目＞
やったこと
手動運用はいけてないので、動画を集めてくる部分を自動化しました。Youtubeから取得→結婚式の余興.jpに追加 が走るAPIを作り、それを定期的にたたくバッヂを書きました。
定期的な実行は Heroku Scheduler で行い、bin 以下のパスを指定するだけでスンナリ動きました。参考ページは以下。
最後に、公開ドメインであるwedding.mashroom.inをあてて完成です。
感想
- アプリみたいにビルドで時間がかからなくて良い
- 書いたコードがなくサクサク反映されるので楽しい
- CSSはアイコン作ったりのスキルがなくても通用するので楽しい
- 勉強してから作るより、作りたいものドリブンで勉強するのが性に合ってると思った
環境設定とか最初のところでつまずくことが多いので、そこをサポートしてもらえて最高に入門しやすかったです。改めて友人くんありがとう！
小話：カスタムドメインの設定
独自ドメイン、お名前.comで設定したら反映されなくて3日くらいロスしました。ここのサイトを参考にして Dozens.jp を使うようにしたら2時間くらいで反映されたけど何が原因だったんだろう…。
次やること
次はサーバーサイド+iOSアプリを作ってみたいと思い、探してみたら良い感じの本を発見しました。読んで試してみようと思います。
9/14追記）スマホ対応をやりました！
