最近Node.js + AngularJSで何か作ってみるシリーズです。 前回に続き作ってみたものを紹介します。
作ったもの
なんぞこれ？
2chまとめサイトを横断して検索できるWEBサービスです。 「masuda」を作っているときに2chまとめも検索できれば需要があるのかな？と思い作ってみました。
構成
構成は毎度ながら以下。これでopenshiftの無料枠(最大3アプリケーション)は使い切ってしましました。前回紹介した「masuda」は9割9分アクセスがリファラスパムという残念な結果ですので、何か次に作りたいものが思いついたら順次停止するかもしれません。
- OpenShift
- MongoDB
- Express
- AngularJS
- Node.js
技術的なところ
概要
OpenshiftでNode.jsアプリケーションとして動かしています。基本的には「masuda」と同じ処理でcronでフィードを見に行き、新着があればMongoDBに突っ込んでいます。
ただ、それだけでは前回からの発展がないので以下のことを試してみました。
mongooseを使ってみるkuromoji.jsで形態素解析してタグつけをしてみるlocalstorageを使ってお気に入り機能をつけてみる- レスポンシブデザインについて理解を深める
mongooseについて
MongoDB使い始めたときはmongodb使ってたんだけど、mongoose使うと便利、というのを聞いて試してみた。
使用に当たり以下の記事などを参考に。
kuromoji.jsについて
Java の形態素解析器 Kuromoji を JavaScript に移植したものらしいです。
yahooの日本語形態素解析APIなどもありましたが、こっちを使ってみました。
stop-the-world: ブラウザで自然言語処理 - JavaScriptの形態素解析器kuromoji.jsを作った
以下のkuromoji.jsのデモを見ればどういうものか分かります。
使い方
以下のように簡単に使えます。
npm i kuromoji
kuromoji = require "kuromoji" kuromoji.builder({ dicPath: "node_modules/kuromoji/dist/dict/" }).build (err, tokenizer) -> path = tokenizer.tokenize "すもももももももものうち" console.log path
今回は2文字以上の"名詞"、"固有名詞"をタグとして抽出しています。 現状ユーザ辞書がサポートされていないのが残念ですが、さくっと形態素解析できるのはいいですね。 アップデートに期待。
お気に入り機能について
お気に入りアイコンが押されたら、localStorageに記事IDを格納し、お気に入り一覧表示時にはDBに格納したidで問い合わせにいってる。 localStorageは以下のように使える。簡単
# 取得 getData = localStorage.getItem 'hoge' # 保存 localStorage.setItem 'hoge', setData
レスポンシブデザインについて
モチベーションが上がらずこいつが一番厄介。
@media (max-width: 768px)とかをつかって表示したり、隠したり、ごにょごにょしたら何とかなるかもしれない。ということが分かった。
今回は以下のテンプレートを試しながら、カスタマイズした。
すっかりBootstrapが手放せなくなった。
7/27 21:24追記
デザインのことはさっぱりなので的外れかもしれないが、以下のようなことを感じた。
- モバイル表示においては表示スペースは非常に限られた貴重な資源であるこを意識し、無駄を省くべき。（今も無駄多いけど） 思っている以上にモバイルの表示スペースって狭いので無駄を省いて情報量を多く、スクロール回数を少なくするよう意識した方がいいっぽい。なのでモバイルデザインを先にやって、PCに向けに装飾するようなイメージのほうが、上手くいくかもしれない。と感じた。 （これまで作ったものはその辺を全く考えておらず、でかいロゴがあったり最悪だと思う。）
感想
ようやく入門が完了したのかな？って印象。毎度ながら作ってるのが楽しい。 機械学習とかelesticsearchも次回以降使ってみたい。 ちなみにAndroidアプリはストア登録の翌日にはリジェクトされました。
さいごに
ご意見、ご要望は@bokuwebまでお願い致します。
