ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた（既知の不具合の幾つかに対応）

ちょっとしたきっかけ（後述）があって、今更ながら、なおゆきさんのココログ最強検索（自分のココログを全文検索するブログパーツ）を jQuery を使って移植（リメイク）してみました。

既知の不具合のいくつかにも対応してある……つもりですが、ほぼ全面改修となっているため、別の不具合が混入している可能性も高いです(汗)。

■ ココログ用全文検索をココログに設置

作者名
提供元
パーツ名
パーツID

設置用HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://furyutei.work/script/jq-highlight.js"></script> <script src="https://furyutei.work/script/jq-cocolog_ajax_search.js"></script> <script> window.cocolog_ajax_search_options = { color : '#ffcc33' // ハイライトの色 , truncation_length : 80 // 検索結果でキーワード前後に抜き出すテキストの長さ , entry_per_page : 20 // 検索結果の1ページ辺りの記事数 , max_concurrent_load : 3 // バックナンバー並列読み込み数（パフォーマンスに影響） , display_search_form : true // true時、検索結果上部に検索フォーム表示 , look_ahead : true // true時、裏でバックナンバーを先読み（パフォーマンスに影響） , search_box_id : 'search_box' // 検索フォームのキーワード用INPUT要素の id , search_credit_id : 'search_credit' // 検索フォームのクレジット用SPAN要素の id }; </script> <form onsubmit="cocologAjaxSearch( jQuery('#'+cocolog_ajax_search_options.search_box_id).val() ); return false"> <input type="search" id="search_box" name="search_box" value="" results="5" autosave="tangerine" placeholder="検索語を入力" /> <input type="submit" value="検索" /> <span id="search_credit" style="font-size: xx-small; margin-left: 4px;"></span> </form>

お好みで設置用HTML欄(テキストエリア内)のオプションを変更してから登録することもできます。

「Request-URI Too Large」というエラーが出る場合は、[ココログに設置]ボタンを押す前に、あらかじめご自分のココログのアカウントでログインした状態で、再度お試しください。

2019年03月のココログリニューアルに伴い、ブログパーツとしての登録ができなくなってしまいました。
お手数ですが、こちらの記事などを参考に、マイリストを作成して上記の設置用HTMLを貼り付けた後、サイドバーに設置してお使い下さい。

■ お試し用ブックマークレット

検索ボックスがついていないココログ（ブログ）でも、検索できるようにするブックマークレットです。

「ココログ用検索」の検索ボックスを任意のココログに

「ココログ用検索」の検索ボックスを任意のココログに - Hatena::Let

オリジナルのココログ最強検索用ブックマークレットもあります。

ご自分のココログで上記のブックマークレットを試してみて、うまく動かないようであれば、残念ながら対応していないということになります（コメントでご報告いただければ、可能な範囲で調査いたします）。

■ 対応した（つもりの）オリジナル（2015/09/01現在）の既知の不具合と改善点

• テンプレートによっては検索結果が表示されない／サイドバーに表示されてしまう（オリジナルテーマで、一列構成や二列・右サイドバー構成の場合等）。
• 本文中にSCRIPT要素やSTYLE要素、コメント(<!-- ～ -->)などがある場合、それらの中の文字列もひっかかってしまう。
• まれにうまく記事の内容が取得できないことがある（リッチテンプレートで、フッタに permalink が設定されていない場合等）。
• TEXTAREA内の要素もハイライト対象となってしまうため、内容が書き換えられてしまう。
• オリジナルテーマにて、記事中にIMG要素がある場合、バックナンバー読み込み中に画像も無駄に取得されてしまう。
• 特定の文字（半角数字一文字等）で検索するとエラーが発生する。
• 検索ボックスが下の方に設置されているブログだと、二回目以降の検索が面倒（またその場所までスクロールする必要がある）→検索結果上部にも検索ボックスを設けることで対応。

■ 経緯

つい先日、このブログ中に貼り付けてあるツイッターのツイートが、なぜか突然表示されなくなってしまいました。

サイドバー等に設置してあるスクリプトを外すと表示されるようになったため、ひとつずつ試していくと、どうやら使用していた prototype.js が干渉しているらしいことがわかりました。

prototype.js のリンク先をなおゆきさんのブログ上のものに変更することで問題は解消できたのですが、せっかくだし(？)、前から気になっていた不具合解消のため＆ JavaScript（jQuery）の勉強のためにも、いちから作り直してみるか、と思い立ったのでした。

で、よく考えて見れば、自分が使っているのはココログプロ等用を自分でカスタマイズしたものであり、こちらも改修が必要、というオチが、ですね……。

■ ココログプロ（上級者向けテンプレート）用

というわけで、ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript: 暴想を jQuery を使用して移植したものはこちら。

blog_ajax_json_search.jsにパッチ：コメントも含めて検索 : 風柳亭相当の拡張も実施ずみ。

【設置用スクリプト】

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://furyu.tea-nifty.com/script/jq-highlight.js"></script>
<script src="https://furyu.tea-nifty.com/script/jq-blog_ajax_js_search.js"></script>
<script>
window.blog_ajax_js_search_options = {
    color : '#ffcc33' // ハイライトの色
,   truncation_length : 80 // 検索結果でキーワード前後に抜き出すテキストの長さ
,   entry_per_page : 20 // 検索結果の1ページ辺りの記事数
,   display_search_form : true // true時、検索結果上部に検索フォーム表示
,   look_ahead : true // true時、裏でバックナンバーを先読み（パフォーマンスに影響）
,   search_box_id : 'search_box' // 検索フォームのキーワード用INPUT要素の id
,   search_credit_id : 'search_credit' // 検索フォームのクレジット用SPAN要素の id
};
</script>
<form onsubmit="blogAjaxJsSearch( jQuery('#'+blog_ajax_js_search_options.search_box_id).val() ); return false">
    <input type="search" id="search_box" name="search_box" value="" results="5" autosave="tangerine" placeholder="検索語を入力" />
    <input type="submit" value="検索" />
    <span id="search_credit" style="font-size: xx-small; margin-left: 4px;"></span>
</form>

【テンプレート(インデックステンプレート)】

• テンプレート名： Archive Search Data
• 出力ファイル： search_data.txt
• テンプレートの内容

  <?xml version="1.0" encoding="utf8"?>
  {
  data:[
  <MTEntries all="1">{
  title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
  ,link:"<$MTEntryLink$>"
  ,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>[<$MTEntryKeywords remove_html="1" encode_js="1"$>]<MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
  },</MTEntries>
  {title:"",link:"",body:""}
  ]
  }