jQuery Mobileのdata-filterがよさげ

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

別に運営しているサイトで『用語集』というコンテンツを、jQuery Mobileを使って作ったものの、検索機能を実装していませんでした。

でも最近、ul要素にtrueという値をしたdata-filter属性を入れると検索フィルターを簡単に実装できるとしり以下のように実装してみることに。

実行結果は以下。試しに”Java”などと入力してみてください
http://amyu.minibird.jp/filter.html

そういえば前にjQueryで作った検索フィルターの方法をこのブログに書きましたが(dtタグのテキストをインスタンス検索してみる(jQuery利用) | while(isプログラマ))、この度追記しました。
 何を追記したかというと、instanceイベントを使うことにより、右クリックで貼り付けを選んでもすぐに反映されるということを追記しました。
 ただ、今回紹介した検索フィルターでは右クリックで貼り付けを選んでもすぐに反映されないようです。

JavaScriptで自動キーワードリンク

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

前回、PHP版を書いたので今回はJavaScript版。

7行目で文字列の長い順にソート、11行目から16行目で正規表現オブジェクトを生成し、18行目から22行目で置換(とURIエンコード)してます。replaceの第二引数に関数が指定できると分かると、PHPより簡単にできました。

WordPressじゃうまく動かないようなので、実行結果は載せません(お願いだから、勝手にシングルクォテーションをダブルクォテーションにしないでくれ・・・)。

ところで、前回のPHP版も今回のJavascript版も、あくまでタグがないテキストのみ機能します。タグのあるテキストで今回紹介したアルゴリズムを使うと、タグ構造が壊れてしまう可能性があるので注意。

PHPで自動キーワードリンク

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

別に運営しているサイトで、用語集なんてコンテンツがあります。最近、自動キーワードリンク機能がほしくなって探したら正規表現で簡単にできそうなので、作ってみました。今回はそのメモ。

このエントリーでは『JavaとJavaScriptは名前は似てるけど、違うプログラミング言語だよ』という文章と『Java』『JavaScript』『プログラミング言語』の3つが入った配列を用意して、Wikipediaのページにリンクするということをやってみます。

ソースコード

簡単に解説をしておくと、5~10行目で、正規表現用の変数を作ってます。|がORの意味で、8行目で$listの中を一つずついれていってます。
 12行目で置換してます。$1はかっこ()内の正規表現結果をあらわしてます。実行結果は以下です。

実行結果

JavaJavaScriptは名前は似てるけど、違うプログラミング言語だよ

うーん。『JavaSceipt』の部分が『JavaScript』ではなく『Java』で認識しちゃってます。どうやら、同じ位置から始まった単語では、正規表現の|の区分けにおいてはじめのほうにある単語が優先されちゃうそうです。
 というわけで、$listを文字列の長い順に並べ替えてから$regを作ることにしましょう。ここではPHPのユーザー定義でソートできるusort関数を使うことにします。

ソースコード

5行目から8行目でソート用の関数を作って、usortの第二引数でその関数の名前を渡しています。

実行結果

JavaJavaScriptは名前は似てるけど、違うプログラミング言語だよ

うん。うまくいった。

ところで、これでうまくいってはいるんですが、URLエンコードをしたほうがもっといいような気がします(というより、自分が作ったサイトは、URLエンコードしないとIEでは、ちゃんと動いてくれなかった)。
 URLエンコードは、19行目の下に以下のコードを追加したら動くはずです。

これが一番自分でもよく分からなかったとこ。下記のページを参考にしました。
参照を使ったリンクをurlエンコードする方法 – PHPプロ!Q&A掲示板

というわけで実行結果

実行結果

JavaJavaScriptは名前は似てるけど、違うプログラミング言語だよ

dtタグのテキストをインスタンス検索してみる(jQuery利用)

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

別に運営しているサイトで利用しているため、またjQueryネタ。

HTML部分

JavaScript部分

りんご
赤い果物
みかん
黄色く果物
ぶどう
紫の果物

試しに検索ボックスの中に「り」や「ん」などを入力してみてください。この方式では、キーボードからの入力はともかく、コピペ(右クリックで貼り付けを選ぶ)したときに反応しないので、本来ならsetTimeoutメソッドを使って、500ミリ秒ごととかで自動実行するとかしたほうがいいかもしれない(onblur属性を入れてるのはそのための対策でもあるんですが)。

css(“display”, “block”)やcss(“display”, “none”)の部分はshow()やhide()メソッドでもいいはず(むしろそのほうがいいかも?)。


追記:2012年3月28日
最近、”oninput”という、テキストボックスに入力があった場合に発動するイベントがあることを知りました。IE8以下では使えないようですが、onkeyup,onblurと二つも使わずにできるうえに、右クリックで「貼り付け」とやっても動くようです

現在のページに相対パスでリンクしているaタグにclassを加える方法(jQuery利用)

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

ここのところ、別に運営しているサイトのリニューアルをしていたのですが、なんとかそっちのほうも再公開にまで至ったので、こちらのブログも再開します。

上記サイトをリニューアルしている間に、いろいろjQuery等をいじったので、その時に学んだことをメモ。

そういえば先日、かちびと.netというサイトで、今回の似たようなエントリーが投稿されていました。
 jQueryでグローバルメニュー内のリストから「現在のページ」のURLを持ったリストにclassを加える – かちびと.net
 ただこのやり方、やってみると絶対パスではうまくいくのですが、<a href=”hoge.html”>などの相対パスではうまくいかない様子。

というわけで、自分がやった方法は以下のような感じ。なお、CSSにTwitter BootStrapを使っています。

前半部分は下記ページのコードをそのまま使わせてもらっています。
ファイル名取得

ちなみに、自分が実際に使っているコードでは、『 || $(this).attr(“href”) == “./” + file_name』はわざわざ書いてません。リンク先がindex.htmlで、”./”とだけ記入する場合を除いてだいたいつけない派なので・・・(つけたほうがいいのだろうか? このあたりはよく分かってないです。置換したい場合に、下の階層を意味する”../”と競合しそうな気がして・・・。そういうことがあるのかは分かりませんが・・・)。

よくよく考えてみると、それなら、$('a[href="'+file_name+'"]').addClass('active'); とすればいいだけか。