undefined

bokuweb.me

AngularJSのお勉強に電子書籍タイトルのインクリメンタルサーチサンプルを作ってみた

AngularJSの勉強に、電子書籍のタイトルをインクリメンタルサーチするサンプルを作ってみました。APIはhon.jpのものを使用しています。各社横断して電子書籍をさくさく検索できるものがほしいと思っていて(すでにあることはあるけど精度が不満)hon.jpのAPIを使用すればいけそうだ!ってことで試しています。

f:id:bokuweb:20150319190311g:plain

こんなんです。最後にもありますが、精度が微妙。このサンプルはタイトルが出てくるだけなので何のやくにも立ちません。

ソース

こんな風にしたってとことか

hon.jp出力データのJSONP変換

hon.jpのAPIが提供するフォーマットはXMLのみなのでクロスドメイン通信のために無理やりJSONPフォーマットに変換しました。手順としてはhon.jpのXML->RSS変換xslファイルを使用しRSSに変換後、GoogleFeedAPIでJSONPに変換してます。今回のようにちょっと試す程度ならこれで十分かと。

入力フォームの変化検出

ng-changeで入力フォーム変化を検出しました。ただ、これだけだと1字入力したら消去するたびにリクエストが飛んじゃうのでng-model-optiondebounceを設定し変化検出までに遅延を設けています。現状200msです。

リポジトリ

github.com

所感

  • 他のブログの情報からするとhon.jpは多くのリクエストに耐えられそうにない
  • 検索精度もいまいち("javascript"で検索すると"浣腸してください"という謎タイトルが引っかかるなど)
  • それなりの精度をもった検索サイトを作ろうと思ったらデータベースを自前で持つ必要があるかも
  • JSONPでインクリメンタルサーチが楽しかった