Home > Tags > ブログ構築
ブログ構築
javascriptで検索語句をハイライト表示
- 2008-05-29 (木)
Wordpressにおいて検索語句のハイライト表示は
プラグイン:Search Word Highlight for Multibyte
で可能らしいのですが、wp-cacheと相性が悪いのと、
phpで実現しているため直接ハイライトのタグがガシガシと書き込まれるのは少しいやですので、
私はjavascriptでの実装にすることにしました。
javascriptでの検索語句ハイライトの実装は、
JavaScriptで検索ワードをハイライトする - Open MagicVox.net
検索キーワードをハイライト表示化 | ふるぱ-しゃる
といった記事がとても参考になりますが、日本語対応が完全ではないようです。
ということで本家Scott Yangさんの
Search Engine Keyword Highlight with Javascript
のversion1.5を日本語に対応させました。(といっても後述の通り自分はほとんど何もしてませんが)
se_hilite_jp.js
2008.06.20 : 無限ループすることがあったので修正2008.08.28 : 検索エンジンリスト修正
js内に設定項目もありますが、基本的に設定しなくても動きます。
ハイライトのスタイルを変えたい場合はjsファイルのはじめの数行で設定してください。
文字コードはutf-8、改行コードはCRLFにしてありますので、windows付属メモ帳でも編集可能です。
■実装方法
1.アップロード
2.head内に
<script type="text/javascript" href="http://~~~/se_hilite_jp.js"></script>
■設定項目
●4-10行目ぐらい
ハイライトタグのclassに対するスタイルを設定。
●11-16行目ぐらい
/*ハイライトを指定id内に絞り込み。未設定の場合bodyタグ内*/
elementid:’container’,
/*ハイライト文字列の個数がこれ以上の値になったらいったん表示。*/
max_nodes:1000,
/*ハイライトタグのベース名。*/
style_name:’hilite’,
/*検索語句が複数のときそれぞれ別のスタイルにするか*/
style_name_suffix: true
●17-33行目ぐらい
検索エンジン等の設定。正規表現で、よくわかりませんがエスケープ文字は「\\」ぽいです。
例えばGoogle検索の場合、[".*google\\.","q"]ですが、
第一要素が検索エンジンを識別する正規表現
第二要素のqは、、、例えば、、、
「純白 Maria White 17」で検索すると
http://www.google.co.jp/search?hl=ja&q=%E7%B4%94%E7%99%BD+Maria+White+17
といったアドレスが表示されますが、赤部分が検索語句を表しています。q=のqを指定。
といった感じで新しい検索エンジンを設定できます。
■改点
●3種類のurlエンコード(UTF-8,EUC-JP,Shift_JIS)のデコードに対応。
ヌルコムアーカイブス・デジタル制作室さんのところで公開されているライブラリ、Escape Codec Libraryの一部をマージさせていただきました。
javascriptに実装されているurlデコード関数decodeURIComponentとかdecodeURIは、utf-8でエンコードされた文字列しか扱えないようです。日本語の検索エンジンは、utf-8の他に、EUC-JP、Shift_JISでurlエンコードを行っているものもあるので、その場合、標準実装されている関数ではデコードができません。そこで上記ライブラリを使用させていただきました。
●全角スペースでの語句の区切りに対応。
日本語検索では全角スペースで区切ることも多いので。
●検索エンジンの追加編集等。
日本語の主要検索エンジンはある程度網羅しているつもりです。
Google Yahoo! MSN Live Search Ask.jp goo ocn 百度 BIGLOBE @nifty JP.AOL.COM livedoor au one Excite Technorati
正規表現がちょっとだけわかれば、見よう見まねで追加できます。
わからなければコメント欄やメールフォーム等からお聞き下さい。
(スクリプトの内容はあまり理解してませんが><)
- [Cat:web]
- Comments: 4
- Trackbacks: 1
続・スパムコメント対策
- 2007-11-24 (土)
さて、ようやく冬が間近に迫ってきた感じがする今日この頃ですが、皆さんいかがお過ごしでしょうか。
私は、冬より夏のほうが好きなので、少々憂鬱な感じですが、何とか生きています。(別に、宇宙人や未来人や超能力者を求めているわけではありません。でも、かわいいのはできれば欲しいな。)
さて、ブログ運営者にとって憂鬱な感じがするものの一つとして、コメントスパムがあります。
今回はそれについてすこし。
コメントスパム対策とMT4標準Captchaのvalid化で書いたように、以前はCaptchaを導入していたのですが、
なぜか私の環境では、ページを開いていくらか時間が経過してコメント投稿すると、
エラーが出て投稿できないという問題が生じましたので
現在取り外しております。
そこで今は・・・
あんちもん2.LabさんのところのSbCodeプラグインを使わせていただいております。
このプラグインはかなり優れもので、隠しフィールドをコメントフォーム内に埋め込むことにより、
機械的に投稿されるコメントをほぼはじくことができます(現在当ブログで100%)。
機械的な投稿は直接mt-comments.cgiにデータを送りつけることが多いようですが、
このプラグインは、隠しフィールドの値を一緒に送らないとエラーを返すという仕組みになっているようです。
Captchaのように文字判別しづらい画像を見てコード入力する必要もなくユーザ・フレンドリーです。
当初はJavascriptによるコードの埋め込みにしていましたが、
jsが使用できない環境でもコメントできるように、
現在はダイナミックにページが生成されるコメント確認画面に
htmlコードを埋めこむ方式にしています。
まぁ確認画面を通してでないとコメントできないようにしていますのでコメントするのに一手間増えますが、
Captchaのことを考えればまだ楽かなと。
Captchaと同様に、機械スパマーは投稿さえできなくなるので、
不運にもスパム判定されてしまった正規のコメントを見つけ出しやすくなるというおまけつきです。
- [Cat:雑記]
- Comments: 0
- Trackbacks: 1
コメントスパム対策とMT4標準Captchaのvalid化
- 2007-09-05 (水)
さて、MT4に標準で実装されましたCaptchaを導入しました。
Captchaっていうのは、結論だけ説明すると、コンピュータか人間かを判別して、自動化されたコンピュータからの認証や投稿処理を行わせないようにするシステムのことです(たぶん)。
画像見て英文字等入力するあれです。コメント欄を見ていただければ「あーあれね!」と分かると思います。
(追記:現在はCaptchaでないスパム対策をしています。)
あとはみwikiさんに聞いてください。
Captchaを導入するまでに少し経緯がありまして、、、あっ、いつものごとく前書きが長くなりそうなので、
MT4Captchaのvalid化へのアンカー
さて、最近海外からのコメントスパムが激しくて、1日300件ぐらい送られてきています。少し前に、RBLサービス(IPブラックリスト)の「spamhaus.org」をスパム判定に使うのをやめました。spamhaus.orgは確かにスパム撃退にかなり強力な威力を発揮してくれるのですが、その強力さと、大雑把さゆえにスパムじゃないIPアドレスからのコメントも巻き添えにしてしまうようです。
参考リンク
>Web屋のネタ帳:spamhaus.orgをはじめとするIPアドレスベースのブラックリスト(RBL)を使ってはいけない
実際このブログでもこのサービスにより貴重なコメントを3回ほどスパムと判定されてしまっていました。
まぁでも他のブラックリストサービスは使用していまして、
bsb.spamlookup.net
RBL.JPのall.rbl.jp
上記2つのサーバを利用しております。
しかしspamhaus.orgを使用しなくなったためか、海外からのスパムコメントの多くがスパムと判定されなくなってしまいました。
そこで、数週間前から2バイト文字の入っていないコメントを弾くプラグイン「NotJapaneseLookup」を使用させていただいています。それにより現在海外からのコメントは100%カットされています。
ただ、2バイト文字云々は、英語圏からの正常なコメントも確実にスパムと判定してしまいます(まぁコメントある可能性はほぼ0%だと思うのですが)。それが少し精神的にいやですので、とりあえず、Captchaを導入して様子を見て、機能してくれるようなら前述の2バイトのプラグインを外そうかなと思ったわけです。
MT4のCaptchaのvalid化に話を移します。
まず、MTをバージョンアップした人はCaptchaを利用するために幾つか手順が必要です。
詳しくは・・・
あやの日常あるいは平穏な日々:【MT4.0】コメントスパム対策しましたをごらん下さい。とても分かりやすく書かれています。
結局のところ<$MTCaptchaFields$>タグを書いた部分に
<div class="label">
<label for="captcha_code">Captcha:</label>
</div>
<div class="field">
<input type="hidden" name="token" value="~" />
<img src="~" width="150" height="35" /><br />
<input name="captcha_code" id="captcha-code" value="" />
<p>画像の中に見える文字を入力してください。</p>
</div>
上記コードが挿入されるということです。ただ、少なくとも赤文字の部分が原因でxhtmlではvalidになりません。
・imgにはalt属性を付加する必要がある。
・labelのfor属性の値は他のタグのID属性として指定されているべき。(captcha-code→captcha_code)
あと、アクセシビリティのことを考えるとtabindexやaccesskeyも指定したほうがいいですね(まぁCaptcha自体がアレなのですが)。
以上を踏まえると例えばこんな感じに修正できるかもしれません↓
<div class="label">
<label for="captcha_code">Captcha:</label>
</div>
<div class="field">
<input type="hidden" name="token" value="~" />
<img src="~" width="150" height="35" alt="Captcha Image" /><br />
<input name="captcha_code" id="captcha_code" value="" tabindex="~" accesskey="~" />
<p>画像の中に見える文字を入力してください。</p>
</div>
さて、修正するライブラリファイルですが、2つあります。
MTインストールフォルダからの相対パスは
1./lib/MT/Util/Captcha.pm (54~64行目位)
2./php/lib/captcha_lib.php (39~48行目位)
上記ファイルをテキストエディタで開いて適当に修正。アップロード。(バックアップを取っておいた方が良いかもしれません。)
1はスタティックなページで表示する用。2はダイナミックパブリッシングのページで表示する用(だと思います)。
恐らくファイルの中を見れば分かりますが、修正する時の注意点としては、、、
・$がついているものは変数なので扱いに注意する。($captionとか)
・2のファイルではダブルクウォート”をバックスラッシュ\でエスケープする。(value=\”\”といった感じ)
う~ん、肝心な修正の仕方を極端に省略してしまいましたが、まぁ分からなければコメント欄でってことでお願いします。
でもこれすると、バージョンアップのとき大変ですよね・・・ということで忘れないように覚え書きでした。
それにしてもいつものごとく読みにくいから困る。
- [Cat:雑記]
- Comments: 0
- Trackbacks: 0
またもやIEの後方互換に・・・
- 2007-03-13 (火)
さて、以前(2年前くらい)にIEの後方互換と、標準モードの仕様の違いにより痛い目を見たのに、またもや・・・
言い訳ですが、IE7にバージョンアップした後、しばらくIE6以下で確認できなかったんです。(共存か上書きか選べるようにして欲しいですね。)
今回、IEの共存が可能だという情報をGo my wayさんの複数のIEを共存させる方法という記事で知りました。(感謝です。)それで、早速MultipleIEsというソフトをインストールして、久しぶりにIE6.0以下で本サイトとRSSCheckerの方をのぞくと、、、orz…..
サイドバーがなぜか両方とも落ちていました。
それで、原因を探っていたのですが、
小粋空間さんの記事で、XML宣言が記述されている場合には「後方互換モード」になり、そのため、cssのwidthとpaddingが同じブロック要素に指定された場合、解釈が違ってくるとの事でした。(標準モードはwidth+paddingがそのブロック要素の幅になる・後方互換はwidthにpadding込み)
とりあえず、サイドバーが落ちてたのは直しました。あっ、それとNN4.73で確認しましたが、閲覧は不可ですね。すみません、さすがにちょっと改善しようがありません(気力がないだけです)のであきらめます。(笑)
- [Cat:雑記]
- Comments: 0
- Trackbacks: 1
覚え書き
- 2007-02-11 (日)
とりあえず、ブログの調整がひとまず終わりました。
HTMLlintさんの所でのチェックも”一応”100点です。
<!—->のコメントアウト内に<>があるという未減点の警告がありますが、
現実的には全く問題ないと思いますのでmtのcgiいじって解決するのは止めておきます。
(バージョンアップも面倒くさくなりますし。)
それにしても、MTのカスタマイズにおいて、小粋空間さんの記事は非常に参考になりますね!感謝感謝です。
まだ問題は幾つかあります。
アーカイブでMT純正の?ダイナミックパブリッシングを利用しているため、
テンプレートタグを拡張するperlプラグインが使えません。
このブログも一つだけタグ拡張のプラグインを使用しているのですが、
やっぱり、アーカイブページではうまく作動していませんね。とりあえずまぁいっか。
自分でphpプラグインを作成する気力も能力もありませんし。
まぁ、限られた範囲内で工夫するのが楽しいんです。多分。
あと、アーカイブページがまだ完璧じゃないのと、
cssでサイドバータイトルのbackground画像にfixedを指定しているためか、
ieで何かスクロールがぎこちないです。firefoxとかoperaでは問題ないんですけどねぇ。
飽きたら、fixed解除するかも。
そもそもデザインセンスが皆無なのは言わずもがなですね><
あっ、風と樹と空とフリー素材さんのところの素材を利用させていただいております。ありがとうございます。柔らかいタッチの素材が多くて素敵な素材屋さんです。またお世話になるかもしれません。
あれrsscheckerについての覚え書きを書こうとしてたんだけどなんだか違う方向に。
そもそも、休眠中のブログをこんなに整えてどうしようというのでしょう私は。
まぁいいや。
-_-)zzz
- [Cat:雑記]
- Comments: 0
- Trackbacks: 0
Home > Tags > ブログ構築