ポケモンカードの検索ページを作ってみた(　´ω｀　)


インクリメンタルサーチ (incremental search) とは、
通常の検索したい用語を全て入力した上で検索を実行する形式ではなく、
ユーザーの入力処理を受けるたびにただちに検索リストに
結果が反映されるような検索方法である。

逐次検索、ライブサーチ、などともいう。

Google の検索フォームに文字を入力するとそれに応じた検索候補が
ドロップダウンリストに出てくる、これもインクリメンタルサーチの一例だろう。


ぐぐってみると JavaScript や PHP などでもこれを実装するライブラリがいくつか見つかるが、
面白そうなので趣味的に今回は自分でそれっぽく実装してみることにした。


ちょうど XY シリーズも終わり、サン・ムーンシリーズが始まるこの時期、
ポケモンカードのデータを使って逐次的な検索システムを作ってみたいと思う。


jQuery を使って入力用のフォームに対して

.on(’keyup’, function(){　検索処理　});

みたいなことを書けばすぐに実現できそうではあったので、

ポケモンカードデータベースの XML を用意して Ajax の XMLHttpRequest から DOM を
取得しておいて検索処理を行うようにしてみた。

結果・・・


・・・重いっっ！　尋常ではない重たさ、１ 文字打つたびにﾋﾞﾀｧｯと止まる！！＃


よくよく考えてみなくても途中で薄々感じてた通りの結果で実に予想通り(・´ω・｀)


ポケモンカードのデータベース用 XML のデータ量の多さ、
万単位の DOM 要素に対して 1 文字打つたびに検索してたらそりゃあ重い。


検索対象をカード名称のみに絞るとかすればそれなりに高速ではあったが、
ワザなどのテキストを検索できないと機能的に残念臭がするだろう。

そんなわけで雑ではあるが XML の内容を JavaScript の配列に変換してカラムごとに
インデックスを作成し、頑張って検索してもらうようにした。

変換したデータベース用 js ファイルのサイズが 2M を超えた。こりゃでかい(・´ω・｀)

検索処理も

if(presentInputText !== previousInputText)
{
　　clearTimeout(previousFunction);
　　previousFunction = setTimeout(function(){　検索処理　}, 800);
}

みたいな風に setTimeout() で入力の手が止まるのを待つような
感じにするとそこまでビタビタ止まる感じはしなくなったような気がする。

そんなわけでひとまず完成したポケモンカードのカードリスト検索ページが以下　↓
動作確認したの Chrome だけなので念のため Chrome 推奨。


http://pilkul.s602.xrea.com/pokeca/cardlist.html


・・・最初よりは結構軽くなったんだけど、やっぱ結構重たいな(　´∀｀　)しょうがないべ

プログラマやってる人ならもっとスマートなやり方色々あるんだろうな(´ω｀

カードリストのレンダリングにも時間かかるんだろうし
PC のスペックが不足気味な人はご利用は要注意や（ｒ


一応ワザの説明文とかもちゃんと検索対象になってるぞ。

「コイン」　とか　「マヒ」　とか　「ヤミラミ」　とか色々入力してみて(´∀｀

検索項目のフィルタもクリックする度にリストに適用されるぞ。


なんかバグとか改善点見つけたらコメントしてくれると助かるぜ(´∀｀

最近はよく JavaScript に触れているので、昨日は Node.js を試してみようといじっていた。

初版は 2009 年らしいので職業プログラマの人には
今更かよみたいに思われるんだろうか？よくわからん(　´∀｀　)
自分は IT 業界の人じゃないので今のトレンドとかイマイチわからんし特別気にもしていない。

サンプル実行までのインストール手順のメモを残しておくことにする。


１．環境
　　実験用に ViatualBox に Ubuntu 14.04 を立ち上げる。
　　設定はだいたいデフォルト値でいいと思うぞ。

２．nvm (Node.js version manager) を利用してインストールしてみる
　　・OpenSSL のライブラリがいるようなので入れる
　　　> sudo apt-get update
　　　> sudo apt-get install build-essential libssl-dev
　　・curl をインストールする (wGet でもいい)
　　　> sudo apt-get install curl
　　・GitHub から nvm をインストールする
　　　ブラウザで GitHub のページに行き、nvm と検索してみるとすぐ見つかると思う。
　　　creationix/nvm のページで curl か wGet を利用してインストールする方法が
　　　書かれているのでそのままコピペで実行してみる。
　　　> curl -o- ttps://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
　　　バージョンの部分は適宜変更。h つけてね(・ω・
　　・nvm を利用して現在の Node.js のバージョン一覧を取得してみる
　　　> nvm ls-remote
　　・表示されたもののうち、適当に新しいバージョンのを入れてみる
　　　> nvm install 5.4.1
　　・確認してみる
　　　> node -v

　　ここまでやって無事 Node.js のバージョンが表示されたら問題ないと思われる。

３．Hello World
　　典型的なサンプル。

　　　console.log(’Hello World !!’);

　　などとだけ書いて hello.js とかのファイル名でデスクトップあたりに保存する。
　　ターミナルで保存した場所に移動して実行してみる。
　　　> node hello.js

　　無事に標準出力に出てくれば成功(　´ω｀　)


次は Web ページ上からソケット通信ちゃんとできるか試してみよう。


～～


週末がっつり積もった雪もすっかり溶けてしまった。

もうちょっと降って欲しいなぁ(・´ω・｀)冬の趣がないぞ

災害レベルにまで降らんくてもいいぞ ε__ ､_｡,