インクリメンタルサーチで探せるブックマークツールを HTML/CSS/jQuery でつくった
どんなブツ？
三行で:
- Markdown のリスト表記で一行一ブックマークを書く
- ビルドする
- インクリメンタルサーチで探せる html ファイルが生成されるので、これをブクマなりして使う
成果物:
動機
社内サイトはえてして IE しかサポートしておらず、愛用の Firefox で閲覧できない。
Firefox であれば優秀なブックマーク管理があるので何のツールも要らない。が、IE はブックマーク管理が貧弱すぎて、デフォのお気に入り機能を使ってるとストレスで死ぬ。
というわけで別途ブックマークツールを作ることにした。
使い方
(0)Python 3.x が必要なので無かったらインストールする。
インストール方法など詳細手順は割愛。
(1)linklist.md に Markdown でブックマークを書く。
ブックマークとは URL とタイトルとキーワードのこと。キーワードはインクリメンタルサーチで引っ掛けるために書くもので、特になければ空欄でいい。
(2)build.bat を実行する。
すると内部で builder.py が動いて、index.html が生成される
(3)IE で index.html を開く。
インクリメンタルサーチの働くリンク集が使えるはず。
実装のはなし
Q&A形式でまとめる。
Q: なぜ Python で完結させなかった？（HTML/CSS/Javascriptを使った？）
Ans: 必然的にそうなった
私は普段は Firefox を使っており、URL の関連付けも Firefox になっているため、プログラムランチャのようなツール形態だと IE で開けない。
この前提で考えると、IE から利用するとは？ → IE 上でハイパーリンクをクリックすることでブックマークを開く のが一番使いやすい → この場合、ブックマークツールとは HTML で表示したリンク集である＆そのリンク集をいかにして簡単にメンテできるようにするかが肝なのでは？、……という結論に至るのではないかと思う。
以下のような構想になった。
<なんか編集しやすいデータファイル> ← ブックマークのメンテはこっちをいじる ↓ ビルドする <リンク集.html> ← IE ではこれを開く
問題は「編集しやすいデータファイルとはなんぞや」って話だけど、私が普段から使い倒している Markdown でいいのでは？と考えた。
最終的には以下のようになった。
<linklist.md> ← ブックマークのメンテはこれをいじる ↓ builder.py でビルド <index.html> ← IE ではこれを開く
Q: どうやってインクリメンタルサーチを実現している？
Ans: jQuery を使って keyup イベント毎に :contains で判定して画面更新している
当該部分のコードはこんな感じ。
$('#searchbox').keyup(function(){ console.log($('#search_target_area li')); if (!$(this).val()) { var count = get_all_count(); } else { $('#search_target_area li').hide(); var count = $('#search_target_area .bookmark-entry:contains(' + this.value + ')').show().length; } $('strong').text(count); });
Q: どうやって Markdown から HTML に変換している？
Ans: Python で泥臭く書いている
こんな感じ。
- Markdown ファイルを行単位でパースして HTML タグに変換する
- それを、template.html として定義しているテンプレートに差し込む
- インクリメンタルサーチ部分の javascript コードはここに書いてる
- 差し込んだ後の内容を index.html として保存
おわりに
良かったこと:
