読者です 読者をやめる 読者になる 読者になる

Think Big Act Local

iPhone開発を軸にブレブレの記事を書いていきます。

初めてのWebサービスを3日でつくってみた(Node.jsで)

Node.js Web

Node.jsを触って勉強してたらWebサイトができました。

Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。

9/14追記)スマホ対応をやりました!

普段はiOSアプリを書いています

普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。

普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。

つくったもの

f:id:himaratsu:20140820235840p:plain

結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました

結婚式の余興動画がまとまっていて、だら見できるサイトです。最近友人の結婚式が多くて、余興の動画をウォッチすることが多かったのでまとまってて欲しいと思ってつくりました。

機能的にはYoutubeにあがっている余興動画を自動でとってきて登録してくれます。使った技術は以下のような感じ。

開発3日間を振り返る

始める前のスペック

  • Node.jsは使ったことない
  • RESTfulとかは何となく分かってる
  • 言語はほぼObjective-Cしか書いたことないレベル
  • Railsで何かつくろうとして2回くらい挫折

Ruby on Rails か Node.js のどっちかで作ろうと思って、周りに詳しい人の多い(詰まったら聞きやすい) Node.js を選びました。

<1日目>

やったこと

  • 本を1冊やった(関係ありそうな部分だけ)
  • 環境設定から簡単なリクエストくらいまで同僚とペアプロでつくる
  • CSSをいじってレイアウトを調整する

まずはnode.jsの全体像を把握すべく、緑の本を読みました。これを読むとnodeの実行方法やよく使うモジュール、expressとかmongoがなんとなく分かりました。

ペアプロでの入門は最高

なんとなく分かったとこで、node.jsに詳しい友人と夜ご飯食べながらペアプロ。環境設定とかAPIの設計とか、最近のトレンドをあわせて教えてくれてめちゃめちゃ助かりました。GETでmongoに入ってるデータを一覧取得して、POSTで新規登録する、みたいな部分の実装まで付き合ってもらいました。

CSSが楽しい

家帰ってから興奮の赴くままにCSSを書いて、見た目を良い感じに整えました。CSS久しぶりに書いたけどめちゃめちゃ楽しかったです。アプリはアイコンの重要度が高いけど、Webはレイアウトの比重が大きいのでレイアウト好きな自分には嬉しい。

途中CSSが迷ったときはこの本で復習しました。ポイントが押さえられていてこれ一冊でサイトが1つ作れる便利ブックです。

HTML5 テクニックバイブル

HTML5 テクニックバイブル

ここで1日目は終了。朝4時くらいに寝ました。

<2日目>

やったこと

  • Twitterウィジェットの配置
  • ページング処理の実装
  • カスタムフォントの適用
  • Herokuへのデプロイ
Twitterウィジェット

動画だけで寂しかったので、Twitterウィジェットを配置しました。初めてだったのですがTwitterのサイトがよく出来ていて迷わず置けました。
「結婚式の余興」で検索した結果のタイムラインがサイトの右側に並んでいます。

ページング処理の実装

f:id:himaratsu:20140821002145p:plain

また、ページングの処理や動画の追加フォームなど、javascriptをいじって細かい部分を作りました。javascriptもほとんど書いたことはなかったのですが、詰まったら本を読み返すスタイルで前進しました。使った本はこれです。

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)

サイ本ほど重くなく、かつ一通り網羅していて助かる感じの本です。

カスタムフォントの適用

f:id:himaratsu:20140821001541p:plain

フォントくらいは凝ろうと思って、カスタムフォントを使いました。手描き風の可愛いフォントを探してkilojiにしました。

Herokuにデプロイして公開

最後にHerokuにデプロイします。Node.jsをHerokuにデプロイするのは以下のページの手順を参考に進め、最後にHerokuにMongoHQを追加して完了。

「結婚式の余興.jp」がインターネット上に公開されたここまでで2日。

<3日目>

やったこと

  • Youtube APIをたたいて動画を自動追加するAPIを作成
  • Heroku Schedulerを使って定期的に実行
  • カスタムドメインを適用

手動運用はいけてないので、動画を集めてくる部分を自動化しました。Youtubeから取得→結婚式の余興.jpに追加 が走るAPIを作り、それを定期的にたたくバッヂを書きました。

定期的な実行は Heroku Scheduler で行い、bin 以下のパスを指定するだけでスンナリ動きました。参考ページは以下。

最後に、公開ドメインであるwedding.mashroom.inをあてて完成です。

感想

  • アプリみたいにビルドで時間がかからなくて良い
  • 書いたコードがなくサクサク反映されるので楽しい
  • CSSはアイコン作ったりのスキルがなくても通用するので楽しい
  • 勉強してから作るより、作りたいものドリブンで勉強するのが性に合ってると思った

環境設定とか最初のところでつまずくことが多いので、そこをサポートしてもらえて最高に入門しやすかったです。改めて友人くんありがとう!

小話:カスタムドメインの設定

独自ドメイン、お名前.comで設定したら反映されなくて3日くらいロスしました。ここのサイトを参考にして Dozens.jp を使うようにしたら2時間くらいで反映されたけど何が原因だったんだろう…。

次やること

次はサーバーサイド+iOSアプリを作ってみたいと思い、探してみたら良い感じの本を発見しました。読んで試してみようと思います。

RailsとiPhoneではじめるアプリケーション開発

RailsとiPhoneではじめるアプリケーション開発

9/14追記)スマホ対応をやりました!