undefined

bokuweb.me

はてブとpocketから一括検索できるwebサービス『tanaoroshi』を作ってOpenshiftで公開しました

WEBサービス Node.js

最近Node.js + AngularJSでこそこそ作ってたWEBサービスを公開しましたので紹介します。

お詫び(7/4 7:25追記)

ちょくちょくクラッシュしているようです。申し訳ありません。 セッションをメモリで管理しているため、クラッシュした場合再ログインしていただく必要があります。ごめんなさい。

あとconnect.session() MemoryStoreはメモリリークがあるっぽいです。production環境での使用は非推奨っぽいですね。connect-mongo等を使用する必要がありそうです。順次対応いたしますのでよろしくお願いいたします。

作ったもの

http://tanaoroshi.bokuweb.me/

Tanaoroshi.

なんぞこれ？

「はてなブックマーク」と「pocket(旧read it later)」のデータから一括検索・閲覧するためのシンプルなWEBサービスです。

名前

「棚卸し」です。自分は保存した記事を見返すことが少ないので、記事をもう一度確認する機会ができればよいなと思い、この名前にしました。

使い方

「 Login with Hatena」「 Login with Pocket」のボタンよりログインしてください。両方でのログインは必須ではありません。片方でのみログインした場合、ログインしたサービスのデータのみ検索・閲覧できます。

ログイン後最新のデータが表示されます。検索して目的の記事を探してもいいですし、スクロールすることで記事がどんどん読み込まれますのでぼーっと眺めるのもいいかと思います。

動機

自分は後で読み返す可能性のある記事を「はてなブックマーク」「pocket」で保存していますが、保存ルールに一貫性がなく気まぐれで保存しているため、いざ読み返そうと思ったときにどちらに保存されているか分からず探しだすのに苦労することがちょくちょくあります。

なので両方のサービスから一括で検索し、さくさく読めるサービスを作りたいと思いました。

構成

構成は以下。PaaSはHerokuの料金体系が変わってしまったためOpenShiftを使用しました。MEANからMongoDBをぬいたNode.js + Express + AngularJSで構成しています。すべてCoffeeScriptで書きました。

  • OpenShift
  • Node.js
  • Express
  • AngularJS

技術的なところ

概要

OpenshiftでNode.jsアプリケーションとして動かしています。はてなとpocketの認証、データの取得にはnode-passportを使用しています。サーバー側では取得したデータを整形してjsonを吐きます。フロントではngResourceでjsonを受け取ってng-repeatで描画しています。

Openshift?

www.openshift.com

Herokuの影に隠れている感がありますが、いいサービスです。無料、広告なし、独自ドメイン対応、Git でデプロイできます。
こちらはサーバ機能を「ギア」という単位で提供しており、３ギアまで無料で使用することができます。自分の解釈が間違っていなかればですが、一番低スペックの環境であれば３アプリまで無料で運用できます。それ以上になると以下の料金表にしたがって料金を支払う必要があるようです。

f:id:bokuweb:20150704202900p:plain

セットアップはNode.jsの例ではありませんが以下が参考になりました。ちなみにOpenshiftならばwordpressの無料運用が可能なようです。

PaaS で動かす WordPress ＋ OpenShift 入門 | CYOKODOG

Node.jsアプリケーションも簡単に動作させることができますが、少し注意が必要です。ブログに書いときました。

blog.bokuweb.me

あと注意するのは以下くらいでしょうか。

  • nodeモジュールはpackage.jsonに書いておけば勝手に入れてくれます。(Herokuも一緒？)
  • アプリがクラッシュした場合は自動的に再起動がかかるっぽい？foreverが不要？

サーバーサイド

使用したモジュールは以下。

  • body-parser
  • cookie-parser
  • debug
  • express
  • morgan
  • serve-favicon
  • passport
  • passport-hatena
  • express-session
  • config
  • q
  • ect
  • lodash

基本的にはpassport以外はおまけなような気がしますが・・。テンプレートエンジンは最近はectを使用。あと、Qとlodash無しには何もできなくなりつつあります。

あと、はまったところといえば、passportの公式の情報が古かったり(expressからsession周りが分離されたようでexpress-sessionを入れる必要があったり、とか)、passport-pocketの使い勝手が悪く、ちょくちょく手をいれたとこ等でしょうか。

この書籍が参考になりました。

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

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

フロント

AngularJS 1.4.1使ってます。使用モジュールは以下。

  • jQuery
  • angular-resource
  • angular-sanitize
  • ngInfiniteScroll
  • angular-animate
  • ngSmoothScroll

ngInfiniteScrollでスクロールにより記事読み込みを実装しています。おかげ様で自分で書いたコードは50行程度でした。「AngularJS好きー」ってわけではないですが、自分のような素人がさくっと作るのにはいいと思います。

理解できてないけど、この辺で勉強しました。

qiita.com

デザインとか

ロゴは相変わらずこれで作っています。便利。

blog.bokuweb.me

テンプレートはこれをベースに使用。かっこいい。適当にカスタマイズ。

tympanus.net

ローディングアイコンはこれ。

tobiasahlin.com

なおサムネイルの取得はwordpressの非公式API(非公式だが使用は問題ない模様)を使っている。 表示スペースを圧迫するため、サムネイルの表示は迷ったけど、あったほうがサイトの記事の概要を掴みやすいかな？と思い導入。

今はcssでmasonaryレイアウトを実現可能ならしい。びっくり。

.masonary-row {
    -moz-column-count:3;
    -moz-column-gap: 2%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 2%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 2%;
    column-width: 30%;
    border-bottom:solid 1px #e5e5e5;
    margin : 0 0 60px;
}

.masonary-row > div {
    display: inline-block;
    width: 100%;
    float:none;
    word-wrap: break-word;    
}

こんな感じで実現してるんだけど1mmも理解できてない。

現状の問題点や今後やりたいことなど

  • 検索精度は各サービスのAPIの精度に依存しており、pocketの方がAND検索ができていない。
  • セッションをメモリで保持しており、アプリが落ちると再ログインが必要。
    • RedisとかmongoDBで保持する必要がある。
  • 需要があれば対応サービスを増やしたい。EvernoteやTumblr、Instapaperなど。
  • はてぶコメントの表示機能なども追加したい。

雑感・小言

  • cssわからぬ。いい加減scssだとかstylusだとか覚えないと。（違いすらわかってない。）未だにcssをちまちま弄っている。
    • しかしモチベーション保てない。
  • VPSでいろいろできるようになりたい。
  • パフォーマンス面の感覚が全く身についていない。
  • Elixir楽しそう。
  • 楽しく作れた。

さいごに

「はてなブックマーク」「pocket」を使用している方、是非一度触ってみてください。 ご意見、ご要望は@bokuwebまでお願い致します。