40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

出社前に、Incsearch.jsというライブラリのソースを読んでいます

programming javascript

自分の本業であるキャリアカウンセリングで面談対応した求職者を、何らかの形でグルーピング化して管理するためのツールをどうにかして開発したいというのが長年の（っていってもここ1,2年の話だけど）テーマ。

どういうことか具体例を書くと例えば一口にプログラマーでJavaに長けているといっても

  • 業務系のシステム開発のJava開発者
  • （最近少ないけど）ネット系企業で自社サービス開発の経験に長けたJavaの開発者
  • 携帯アプリ開発でJava使ってきた開発者

というのではそれぞれのスキルセット＆仕事の指向性が異なるので、こういうのをしっかりとグルーピングして管理したい。

そのために、面談した人に対して、得意とする技術要素だけではなく、その人の方向性（エンタープライズな方向を目指しているとか、ネットサービスで一発あてようとか、小規模で1人で何でもやりたいとか）等、何らかのメタ情報を付けておいて、その情報をキーにして全文検索できる仕組みっていうのが、作りたいツールのイメージかなぁと最近思うようになってきたのですが、そんなことをかんがている中で、Incsearch.jsというライブラリを見つけました。

これは、初回画面表示時のみデータの読み込みを行って、それ以降は、クライアントサイドで対象データに対してインクリメンタルサーチが出来るライブラリで、prototype.js等がなくてもOKということで、かなり良い感じ。（あー書き忘れたけど、うちのシステム部にWebサーバ貸してって気軽にお願いできないから、ローカルで実行するアプリにせざるをえないのです）

サンプル見た限りでは基本的なことはOKだけど、どうしても足りない機能（画像情報を表示させる）があるのでそこを付け足さないといけなそうだから、最近はIncsearch.jsのソース読んでいます。

ちょっと話がそれるけど、最近ブログ更新率があがったのも、ほぼ毎日Macbook Air持ち歩いていて、出社前に気が向いたらソースを読んで、どうしても気分が乗らない場合には、ブログ下書き書いているから。

話戻して、Incsearch.jsは約600行ほどなので比較的読みやすいかなぁと思ったけど、自分のレベルだと所々理解が進まないところがあるので、そういう部分中心にメモ

447行目

IncSearch._copyProperties(IncSearch.ViewList.prototype, IncSearch.ViewBase.prototype);

ここで、ベースとなるIncSearch.ViewBase.prototypeを継承しているように見える。
理由としては21行目あたりで

/*-- Utils --------------------------------------------*/
IncSearch._copyProperties = function(dest, src) {
  for (var property in src) {
    dest[property] = src[property];
  }
  return dest;
};

という処理があるから。読み始めて、疑問だったのが、どこでデータの読み込みしているんだろうと思ったけど、それはhtml中に記述するJavaScriptのソースで

function startIncSearch() {
  new IncSearch.ViewList(
    'text',      // 入力が行われるエレメントのID
    'view_area', // 検索結果を表示するエレメントのID
    list,        // 検索対象のリスト
    {dispMax: 10, interval: 1000}); // オプション
}

とlistの箇所で指定していたんだった。なので、ViewListメソッドの構造を読み解いていけば、やりたいことが出来そうに思う

画面表示の部分は、例えばブックマーク検索の場合には

515行目

 IncSearch.ViewBookmark.prototype.createLineElement = function(index, patternList) {

以降が大切でこのメソッドのコメントにも「url, title,info,tags,others」とあるのでここに画像表示させる処理を付け加えれば良さそうな気がする。
2次元配列になっていると思われるものを順番に取り出して１つ１つの要素をDOM使って組み立てているようにおもうのだけど517行目で

var post = this.searchValues[index];

のsearchValuesというオブジェクトってどっかに宣言されていったっけと素朴な疑問が浮かんだ。

調べたら、ベースとなるViewBase.prototypeの65行目以降で

IncSearch.ViewBase.prototype = {
  initialize: function(input, viewArea, searchValues) {
    this.input = IncSearch._getElement(input);
    this.viewArea = IncSearch._getElement(viewArea);
    this.searchValues = searchValues;

となっていたのでこれがキモっぽいので、これまでの理解を踏まえてちょっと改造してみようかと思っています。

あと気になったのはキーボードイベントの処理（263行目から301行目）でこうやってキーボードショートカットの仕組みが出来るんだーと勉強になった