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

詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

Introducing Pusheen Explorer

AngularJS Pusheen

Japanese follows English.(日本人は英語をたどる。*

Pusheen! Meet the world's cutest cat at pusheen.com, who is also famous by her stickers available in facebook messenger. If you have not seen her, take a look at her cute animated gifs, and you will soon like her. There are so many pictures of Pusheen, however, that you are easily in lost while searching for a picture you know you have seen before.

Pusheen Explorer helps! If you remember the text fragment drawn in the picture you are searching for, type it in the search box and Pusheen Explore immediately finds it for you. If it does not work for you (probably because of text recognition not going well), I am sorry, but every visiting Pusheen Explorer] will show you a number of randomly selected Pusheen pictures. Among these you may happen to find it.

Visit now: Pusheen Explorer

facebook メッセンジャーのスタンプになってることでも有名な(ぼくはこれを使うためだけにメッセンジャーを使ってるのですが)プシーンの画像を検索できるサイト Pusheen Explorer を作りました。さまざまなバリエーションがあるため、コードレビューのコメントに貼って雰囲気をやわらげるのにも役立ちそうですね。

実装

TumblrAPI で取得してきたエントリの一覧から tesseract-ocr で画像の OCR をおこなって(英語アルファベットだけなので精度はわりと高い)、あとは AngularJS で表示しているだけです(なのでブログが更新されたら JSON を生成しなおす必要がある)。

Masonry での画像のタイル表示がちょっと難しかったけれど、DOM 反映のタイミングで処理をおこなうことができなそうなので、$timeout で無理矢理やってます。angular-masonry というのもあるらしいが今回は簡単のため見送り。

protractor でのテストも試してみたけれど、簡単で面白かった。テストの実行は make test となんか旧弊なかんじですが。

https://github.com/motemen/pusheen-explorer

I Am Pusheen the Cat

I Am Pusheen the Cat