読者です 読者をやめる 読者になる 読者になる

茶豚のプログラマーBlog

プログラミング、猫、盆栽など。 日々の出来事や、覚えた技術を共有する。

jQuery 表示フィルタをつくってみる (JavaScript)

WEBぺージを作成する時、 JavaScriptjQueryを使うと結構簡単に表示フィルタが実装できます。 案外知らない人が多かったので、共有します。

表示フィルタ

ここで言う表示フィルタとは、 何らかの一覧リストがあって、検索窓にキーワードを入力すると 検索にマッチするリストだけが表示されるというもの。

重要なのは、3つ!

これらを駆使する事で、簡単にフィルタ実装ができる!!

実際に実装してみる。

HTMLはこんな感じでリストと、表示フィルタの入力欄があるものを想定。

<input type="button" onclick="reset();" value="リセットボタン"/>
<input id="filter" type="text" placeholder="表示フィルタ"/>

<ul>
    <li data-keyword="hoge">hoge</li>
    <li data-keyword="piyo">piyo</li>
    <li data-keyword="foo">foo</li>
</ul>

で、肝心のJavaScriptはこんな感じだ。

<script>
function filter(){
    var text = $('#filter').val();
    if ("" == text){
        $('li[data-keyword]').show();
        return;
    }

    $('li[data-keyword]').hide();
    $('li[data-keyword*=' + text + ']').show();
}

function reset(){
    $('#filter').val("");
    filter();
}

$(document).ready(function () {
    $('#filter').keyup(function () {
        filter();
        return (13 !== event.which);
    });

    filter();
});
</script>

入力ボックスのキーイベントに、filter関数を挟む。
空文字が入力されているときは、もちろん全件表示となるようにしている。
event.which は入力されたキーの番号で、13はエンターキーの事だ。
エンターキーが押されたときはfalseを返す事で、フィルター入力枠でsubmitを抑止する事ができる。

一番肝になるのが、属性セレクタで、data属性の文字列と部分一致した場合にマッチする。
(*=)という演算子で比較する。

[data-keyword*=hoge]

おわり

一覧表示はいろんなところにあるが、 既存の構造を変えなくても、data属性を加えるだけで、簡単に表示フィルタが実装できるぞ!!
これで、いろんなところにフィルタ追加して便利にしてみよう〜。

Gmail フィルターを活用しよう

Gmailのフィルタ機能ちゃんと使ってますか?

自分も今まで、全く設定していなかったのですが、 会社でGmailをメインで使うようになったのをきっかけに、 フィルタ機能便利やんと気付きました。

そもそも、Gmailにはフォルダという概念がなく、 代わりにラベルというのを使うそうです。 そして、そのラベルの振り分けなどはフィルタで自動設定が可能。 また自動で既読にしたり、削除したりも出来るようになります。

Gmailの検索窓

f:id:tyabuta:20170210015423j:plain

Gmailの検索窓には、単純にキーワードを入れるだけでなく、
to: form: subject: などの識別子が使えます。

書き方 説明
to:hoge@piyo.co.jp 特定のアドレスを宛先にしているメール
from:hoge@piyo.co.jp 特定のアドレスから来ているメール
subject:foo 件名に特定の文字列を含むメール

これらの条件は、AND または、ORで連結させる事ができる。

全ての条件を満たすメール

to:hoge@piyo.co.jp AND from:hoge@piyo.co.jp AND subject:foo

いずれかの条件を満たすメール

to:hoge@piyo.co.jp OR from:hoge@piyo.co.jp OR subject:foo

検索条件に対して、フィルタ設定を追加できます。

検索窓の右端にプルダウンのボタンがあるので、押すと検索オプションが開く。 f:id:tyabuta:20170210020609p:plain

さらにフィルタ作成へ f:id:tyabuta:20170210020617p:plain

フィルタ作成画面では、対象に対してのアクションが設定できる。 既読にするや、ラベルを付ける、削除するなど f:id:tyabuta:20170210021027p:plain

一致するスレッドにも適用するにチェックを入れる事で、 既に受信済みのメールに対しても同様の処理が反映されます。
フィルタを作成で適用される。

再設定したい時は

歯車マークの設定 > フィルタとブロック中のアドレス
から、再編集や削除する事ができる。

検索にはワイルドカード(*)や、パイプ(|)も使える。

検索窓に入力する文字列はワイルドカードや、パイプを使用して柔軟に記載する事が可能です。

e.g.)

from:@hatena.(com|ne.jp)

ただ、ワイルドカードに関しては、 色々試していると、なんで一致しないの?というものが多々ある。。。 一応調べてみると、キーワードの末尾にしか使用できないとか、 ヒットするパターンが多すぎる場合は、マッチングしないそうです。

プレビュー機能がほしい

あと、Outlookなどでおなじみの件名をクリックしただけで、 別ペインにプレビュー表示してくれる機能は初期状態ではないので、
歯車マークの設定 > Labs
Labsの中から、"プレビュー パネル"というのを有効にしておくと良いです。

所感

OR でつなげたり、パイプを使う事で柔軟に条件が作れるので、 振り分け設定を一行で済ませる事ができます。 個人的にはOutlookなどに比べて、使いやすいと感じました。

IntelliJ IDEAのタイポチェックについて

 タイポ(typo)とは、

印刷 の誤植(typographical error)を意味する俗語で、
IT業業界ではタイプミスや誤変換の事をタイポという。

 

IntelliJ IDEA では、こういったタイポを緑色の波線で教えてくれる。ワードとかにあるスペルチェックと同じものだ。
ファイルを開いた際にインスペクターが自動で動いてチェックが走る。


プロジェクト内の全ファイルを対象にタイポチェックを走らせる事も出来る。

Analyze > Run Inspection By Name... > Typo
Whole Project, *.java など拡張子を指定しておいた方が早いよ。

 

実行するとファイル毎に検出したタイポが表示される。
なかには、これタイポじゃないんだけどなぁ、というワードもあるだろう。
そういう時は "Save to to dictionaly" という所をクリックする事で、許容するワードに追加される。
以降はタイポとして検出される事はなくなる。

 

許容設定したワードは何処にいったの?

下記のAccepted Wordsに追記されている事が確認出来る。

ここから、"-"ボタンで削除する事も出来るし、"+"ボタンで新たに許容ワードを追加する事も可能。

Preference > Editor > Spelling > Accepted Words  

因みにAccepted Wordsに追加した文字列は下記のファイルに保存されているぞ。  

 .idea/dictionaries/YOUR_PC_NAME.xml

Dictionariesとは

Accepted Words  の隣に付いているDictionariesというタブ

こちらはdic(辞書)ファイルというのを指定して、既存のワードとして扱う事が出来る。

こちらも同様にこのファイルに記載のワードはタイポとして扱われなくなる。

 

*.dicファイル

文字列を改行区切りで保存して、拡張子を.dicにしたもの 

辞書をファイルを追加するには

Custom Dictionaries Folderの"+"ボタンを押して、
*.dicファイルが保存されているディレクトリを追加、

ディレクトリ内の*.dicファイルを認識してくれる。

 

辞書ファイルを作成しておけば、プロジェクト内で辞書ファイルを共有して

みんなで利用する事ができるぞ。 

余談

erncountって和製英語だったんですね。

本来はencounter


register を registと書いちゃうのと同じだ。
勿論タイポになるんだけど、既存のプロジェクトでは至る所で使われてるので、

さっさと修正するか、諦めるなら辞書登録しておくのが吉。

 

昔の記事が結構イケてた。

こんばんわ〜
うちの会社は、IT会社なんだけれども
経営理念や、ビジネスマンとして最低限把握しておいてほしい事を社員に教え込む為に定期的にテストがあります。


子会社も含めて同様に実施されるので共通テストと呼ばれています。


明日はそのテストがあるので、今期の売上とか、事業形態や目標数字なんかを見直しているところです。汗
夜になってから、一夜漬けしちゃうオラはダメな社員だよ〜笑

 

でもでも、ブログも更新したかったので、
こっちも頑張って書いてみます!!

 

今ははてなブログを使っているけれど、
前はbloggerを使ってました。
で、昔に書いた記事がなんと結構PVを稼いでくれている事に最近気づきました〜♪

 

"PHP 抽選"と検索するだけで、なんと自分の書いた記事が1番上に来ている事を発見!
やったぁ〜、なんて嬉しいんだ♪


検索上位にくるとこんなに感じになるのか〜

ふむふむ…

 

自分としては難しい事を書いたつもりはなかったが、
以外に需要があったのだろうか、なんでも書いてみないとわからないものだなぁ〜と感じました。

 

これからも、あまり気負わずに、自分のやった事や気づいた事をなるべく丁寧に記事にすることで、読みやすいブログに出来ればと思います。


すこし、ブログを書く事に喜びを感じました。

 

f:id:tyabuta:20170207020544j:image

ブログ書くのって難しい

 

いや〜ブログって書くのが難しい。


しかも、ほぼ毎日となると全然何を書いていいのかわからなくなる…


普段からちょっとでも頭をよぎったものを覚えておくか、メモしておいて
ある程度の文章量にして整える事が出来ればいいのかなぁ。
…ある程度の文章量にするのも、其れなりに大変だよ〜。涙


まぁ、あまりいい格好をせずに自分の思った事を素直に書き出していけば、それなりの文書量になるから、それで良しとしようかな。笑


しかし、そんなグダグタなブログは、はたして誰かに読んでもらえるのだろうか…
やっぱり有益な情報がないとなぁ〜


あぁ〜ブログって書くのが難しい。

 

f:id:tyabuta:20170206015430j:image

うちの愛猫ビビちゃんについて

うちの愛猫 ビビちゃん

今は4歳で、今年の7月で5歳になるよ。


生後まもなく、きっと親とはぐれちゃったのか…
2日間くらい家裏の、塀の下で泣き続けていたので保護することにしました。

 

当時は既にノミが付いていて、病気にもなっていた。

病院で診てもらったら寄生虫に侵されている事もわかった。

あぁ…なんと痛々しい。


昔の写真をみると凄く痩せてたんだけど、今じゃ綺麗なぽっちゃり猫ちゃん。

健康に育ってくれて良かった〜


とてもビビり屋さんなのでビビちゃんと名付けました。

 

幸せに生きて欲しい。

 

f:id:tyabuta:20170204225330j:image

盆栽を始めました!

わたくし、

とうとう盆栽を始めましたぞ!

 

盆栽の事はよく分かってなかったが、

ミニチュアとか、フィギュアみたいな感じで、あのスケールで如何に自然の大木感を表現するのかを楽しむようだ。

 

確かに見れば見るほど、本物の大樹にみえてきて、面白いものだと思う。

そんな中、ポロっと盆栽やってみようかなぁ〜、やってみたいなあとボヤいていたのを、奥さん覚えていたらしく、

去年の12月になんと盆栽をプレゼントして貰いました!!

しかも苗木を二本も(笑)

 

まさか木を貰うとは思ってもいなかったので、驚きつつ嬉しかった。

 

会社の人にその話をすると、
盆栽をくれる奥さんって素敵ですね!

という謎の褒め言葉をいただけた。

 

本当に盆栽は初心者なので、付属の入門書をひと通り読んだ。
冬は2日に一回の水やりと、夏になると毎日必要なようで、本当に手間が掛かりそうだ。
だが、逆にそのくらい手間が掛かるものだからこそ、習慣化して継続しやすいのかもしれない。

 

今は小指の太さもない、ほそ〜い苗木なので、まだまだ大木感はないが、何か生命力の強さみたいなものを感じる。

 

ちょいちょい、盆栽の記録を残して行けたらと思うております。