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

undefined

bokuweb.me

MEANで増田を使ったWEBサービス作りはじめたけどアウトでした


MEANで増田を使ったWEBサービス作りはじめたけど、アウトでした。 墓標も兼ねて感想など書き留めときます。

動機

  • 増田が見づらいのでさくさく見れるサービスを作りたかった。
  • Node.jsでなんか作ってみたかった。

どんなの?

さくさく見れてインクリメンタルサーチしたりブックマーク数で絞り込めるやつ作りたかった。 現状こんなの。トラックバック記事もまとめて掲示板のように表示している。

f:id:bokuweb:20150623203725g:plain

転載について

「嫁のはてブ」のようなサービスやその他増田をまとめたものも見たことがあったので、なんとなく作り始めちゃいましたが、完全にアウトでした。今思うと、当たり前すぎる話しだった。

labo.hatenastaff.com

動作概要

node-cronで定期的に「はてな匿名ダイアリー」のRSSをfetchし、トラックバック情報を整理しつつmongoDBに放り込む。 サーバーサイドはindexとURLに応じたjsonを返すことに撤する作りとし、レンダリングはフロント(AngularJS)で行う。具体的には検索フォームへの入力やコンテンツ末までのスクロールを検出したらngResourceでjsonを取りにいって、結果をng-repeatで描画する。 検索フォームの値の変化はng-changeで検出し、コンテンツ末までのスクロールの検出はngInfiniteScrollを使用。あとはng-clickで要素を表示したり隠したり、jsonを取りに行ったりしている。テンプレートは原型をとどめてないけどHalcyon Days - An Exclusive Freebie for Codrops by Peter Finlan.を使っており、アニメーションも付属のanimate.cssを使ってる。

あとはブックマーク数の表示とブックマーク数での検索を実装する予定だった。

使ったものたち

・サーバーサイド
- xml2js 0.4.9 RSS解析に使用
- q 1.4.1 promiseを使いたいから
- mongodb 2.0.33 mongodbドライバ
- lodash 3.9.3 ユーティリティライブラリ
- cron 1.0.9 cron
- ect 0.5.9

・フロント
- angular 1.4.0
- angular-resource 1.4.0
- angular-sanitize 1.4.0 ng-bind-htmlを使いたいから
- ngSmoothScroll 1.7.1 名前の通り
- ngInfiniteScroll 1.0.0 コンテンツ末までのスクロールを検出
- jQuery 2.1.4 ngInfiniteScrollで必要

雑感

  • 以下の書籍が参考になった。

    シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

    シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

  • こっちも参考になった。
    http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf

  • 個人的にはNode.jsもmongoDBも気に入った。

  • 小規模のものをさくっと作るのにはAngularJSいいと思ってる。2.0控えてるのが不安だけど。
  • 実験レベルでは動いてるけど、実際に運用開始したら問題頻発しそう。特にパフォーマンス回り。さっぱり分からん。実際に運用してノウハウ貯めるしかないかも。
    • 設計思想からダメダメなとこが多々ありそうだが、今後実際に何か運用してみてノウハウを貯めたい。
  • テンプレートエンジン使うならjadeejsよりectが早いらしい。jadeは記述楽だけどなれるまでキツイ。
    • jadeの場合ng-model-options="{updateOn: 'default blur', debounce: {'default': 500, 'blur': 0}}"みたいなのをどうやって書けばいいかわからん。
  • 次なに作ろう・・。