MEANで増田を使ったWEBサービス作りはじめたけど、アウトでした。 墓標も兼ねて感想など書き留めときます。
動機
- 増田が見づらいのでさくさく見れるサービスを作りたかった。
- Node.jsでなんか作ってみたかった。
どんなの？
さくさく見れてインクリメンタルサーチしたりブックマーク数で絞り込めるやつ作りたかった。 現状こんなの。トラックバック記事もまとめて掲示板のように表示している。
転載について
「嫁のはてブ」のようなサービスやその他増田をまとめたものも見たことがあったので、なんとなく作り始めちゃいましたが、完全にアウトでした。今思うと、当たり前すぎる話しだった。
動作概要
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
- 作者: Michael S. Mikowski,Josh C. Powell,佐藤直生,木下哲也
- 出版社/メーカー: オライリージャパン
- 発売日: 2014/05/24
- メディア: 大型本
- この商品を含むブログ (1件) を見る
こっちも参考になった。
http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf個人的にはNode.jsもmongoDBも気に入った。
- 小規模のものをさくっと作るのにはAngularJSいいと思ってる。2.0控えてるのが不安だけど。
- 実験レベルでは動いてるけど、実際に運用開始したら問題頻発しそう。特にパフォーマンス回り。さっぱり分からん。実際に運用してノウハウ貯めるしかないかも。
- 設計思想からダメダメなとこが多々ありそうだが、今後実際に何か運用してみてノウハウを貯めたい。
- テンプレートエンジン使うなら
jadeやejsよりectが早いらしい。jadeは記述楽だけどなれるまでキツイ。jadeの場合ng-model-options="{updateOn: 'default blur', debounce: {'default': 500, 'blur': 0}}"みたいなのをどうやって書けばいいかわからん。
- 次なに作ろう・・。
