いらすとやヘビーユーザのために Irasutoyer というアプリをつくった

この記事はいらすとや Advent Calendar 2015 の6日目の記事です．

いらすとやとは？

いらすとやとは，フリーのかわいいイラスト素材を提供しているサイトです．実用的で種類が豊富，たまにシュールなのもあり，利用条件のゆるさから至る所で使われています．この間は近所のヨドバシでも使われてました．

http://www.irasutoya.com/

検索性の問題

いらすとやでは10000点以上のイラストが公開されています．その多さゆえ，ほしいイラストを探すのは少し大変です．unite.vim のようにさっとインタラクティブに絞込み検索できれば良いなぁと思っていました．

いらすとやヘビーユーザのためのデスクトップアプリ Irasutoyer

というわけで，今回はいらすとやをもっと便利に利用するためのアプリ Irasutoyer（イラストヤー）をつくってみました．

https://github.com/rhysd/Irasutoyer

$ npm install -g electron-prebuilt irasutoyer
$ irasutoyer # start app

現在は npm パッケージとしてのみ公開しているため，下記のようにしてインストールします．もしパッケージングして欲しいという方がいましたら，対応しますのでご連絡ください．

screenshot

インクリメンタル検索用のテキストエリアがアプリの一番上にあり，その下にイラスト一覧のリストがあるだけの非常にシンプルなアプリです．

検索窓に入れたものがインクリメンタルに検索され，絞り込むことが出来ます．スペース（全角可）で区切ることで複数の検索ワードを指定できます．ほしい画像が見つかったら，そのアイテムをクリックすると本家のいらすとページがブラウザで開きます．また，テキストエリアで Enter を押すと一番上のアイテムをクリックしたのと同じ動作をします．

画像のダウンロードまですべて自動化してしまうといらすとやさんの広告利益的に問題がありそうだったので，一旦本家のページを経由するようにしました．また，アイテムの右側の「…」ボタンをクリックすることで markdown 形式のリンクをクリップボードへ保存するなどの便利アクションが取れるようになっています．

いらすとやのイラストは日々更新されますが，Irasutoyer はローカルに保存したキャッシュを使っているため動的にそれを反映することはできません．キャッシュを更新するためにはアプリ右上の更新ボタンを押して再度スクレイピングする必要があります．スクレイピングはいらすとやに負荷をかけないようにかなりゆっくりやるので時間がかかります．アプリ初期時は2015/12/5時点でのキャッシュが bundle されています．

unite.vim の source をつくることも考えましたが，画像メインなので画像が簡単に表示できない Vim 上でやるのは得策ではないとなってやめました．

実装について

Electron で作成しました．OS X と Linux（Ubuntu）では動作確認済みで，Windows でも動いているようです．

機能自体は非常に簡素ですが，テキストの入力に対してリストを動的に絞り込んだりもとに戻したりする動的な処理が必要な SPA です．今回は React を使ってレンダリングし，Redux を使って状態管理をしました．また，UI は React 向けコンポーネントライブラリの material-ui を，言語は TypeScript で書きました．

いらすとやのイラストは10000点以上あるため，そのままリスト全体を表示すると重すぎて表示できません．かといってページングしてしまうとクリック数が多くなって不便です．リストの全体をレンダリングするのではなく，見えている領域のアイテムだけを描画してスクロールを自前でハンドリングする必要があります．そこで，今回は infinite list 系の React コンポーネントである react-infinite を使いました．

実装行は大体1200行ぐらいです．