ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた(既知の不具合の幾つかに対応)
ちょっとしたきっかけ(後述)があって、今更ながら、なおゆきさんのココログ最強検索(自分のココログを全文検索するブログパーツ)を jQuery を使って移植(リメイク)してみました。
■ ココログ用全文検索をココログに設置
お好みで設置用HTML欄(テキストエリア内)のオプションを変更してから登録することもできます。
2019年03月のココログリニューアルに伴い、ブログパーツとしての登録ができなくなってしまいました。
お手数ですが、こちらの記事などを参考に、マイリストを作成して上記の設置用HTMLを貼り付けた後、サイドバーに設置してお使い下さい。
■ お試し用ブックマークレット
検索ボックスがついていないココログ(ブログ)でも、検索できるようにするブックマークレットです。
■ 対応した(つもりの)オリジナル(2015/09/01現在)の既知の不具合と改善点
- テンプレートによっては検索結果が表示されない/サイドバーに表示されてしまう(オリジナルテーマで、一列構成や二列・右サイドバー構成の場合等)。
- 本文中にSCRIPT要素やSTYLE要素、コメント(<!-- ~ -->)などがある場合、それらの中の文字列もひっかかってしまう。
- まれにうまく記事の内容が取得できないことがある(リッチテンプレートで、フッタに permalink が設定されていない場合等)。
- TEXTAREA内の要素もハイライト対象となってしまうため、内容が書き換えられてしまう。
- オリジナルテーマにて、記事中にIMG要素がある場合、バックナンバー読み込み中に画像も無駄に取得されてしまう。
- 特定の文字(半角数字一文字等)で検索するとエラーが発生する。
- 検索ボックスが下の方に設置されているブログだと、二回目以降の検索が面倒(またその場所までスクロールする必要がある)→検索結果上部にも検索ボックスを設けることで対応。
■ 経緯
つい先日、このブログ中に貼り付けてあるツイッターのツイートが、なぜか突然表示されなくなってしまいました。
サイドバー等に設置してあるスクリプトを外すと表示されるようになったため、ひとつずつ試していくと、どうやら使用していた prototype.js が干渉しているらしいことがわかりました。
prototype.js のリンク先をなおゆきさんのブログ上のものに変更することで問題は解消できたのですが、せっかくだし(?)、前から気になっていた不具合解消のため& JavaScript(jQuery)の勉強のためにも、いちから作り直してみるか、と思い立ったのでした。
■ ココログプロ(上級者向けテンプレート)用
というわけで、ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript: 暴想を jQuery を使用して移植したものはこちら。
【設置用スクリプト】
<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:""} ] }
« BIGLOBE光ネクスト(大阪)の通信速度問題 - プロバイダ選びは難しい…… | トップページ | 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用) »
「ウェブログ・ココログ関連」カテゴリの記事
- 久しぶりの投稿がココログへの苦言というのもなんなのですが……(2019.03.20)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
- ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた(既知の不具合の幾つかに対応)(2015.09.01)
- 現在に生きるということ。(2013.01.05)
「おもいつき」カテゴリの記事
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
「覚書」カテゴリの記事
- 鍛高譚 ~ カレイにまつわる物語(2018.05.25)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
コメント
« BIGLOBE光ネクスト(大阪)の通信速度問題 - プロバイダ選びは難しい…… | トップページ | 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用) »
風柳さん、昨日は「ココログカレンダーPlus」でも
大変お世話になりまして
どうもありがとうございました。
また、新しく「ココログ用全文検索」もお教え下さいまして
重ね重ね、どうもありがとうございます。
先ほど、導入させていただきました。
見事に、検索できますね!
元々ついていたものでは、全く検索できなかったり
ごく一部しか検索できなかったりでしたので
違いに驚いています。
今回も、簡単に導入できました!
どうもありがとうございました。
投稿: 渡辺はるみ | 2015/10/11 21:51
初心者です。「ココログ用全文検索」の設置方法を教えて下さい。
「メモ」で上記の「設置用HTML」を貼り付けてみたのですが、検索は出来るのですが、検索窓が小さくて、うまく行きません。
貴サイトのように、表示させるためには、どう設置したら良いか、ご面倒でも教えて頂けると幸いです。
投稿: エムズの片割れ | 2020/10/28 22:17
うーん、
> 検索は出来るのですが、検索窓が小さくて
の状態が、具体的にどうなっているかがわからないので答えにくいです。
いちど、ブログ上に設置したまま状態のまま(設置用HTMLを貼り付けたマイリストを設置したまま)にして見せていただけないでしょうか。
http://furyu.cocolog-nifty.com/blog/
の右上にも設置してあるので、参考にして下さい。
こちらは、
・マイリスト「検索」をメモタイプで作成
・「項目を追加」で追加した項目の「備考」欄に「設置用HTML」を貼り付けて[項目の追加]
したものです(特にHTMLの内容やCSSはいじっておりません)。
投稿: 風柳 > エムズの片割れ さん | 2020/10/29 12:54
お世話になります。
下記blogの左下に設置してあります。検索は出来ます。
https://emuzu-2.cocolog-nifty.com/blog/
実は、ずっと「最強検索」を使っていたのですが、http⇒https に変えてから動かなくなり、代わりを探していました。
上の参照サイトも http なので、ここが変化点??
まったくの素人なので、スミマセン・・・
投稿: エムズの片割れ | 2020/10/29 21:51
そちらのことだったのですね。
調べてみると、表示されているのは当方の「ココログ用全文検索」ではなくて、Google 検索フォームのようです。
※参照: https://cdn-ak.f.st-hatena.com/images/fotolife/f/furyu-tei/20201029/20201029230318_original.png
サイドバーに設置するマイリストを間違えていないか、今一度ご確認ください。
※その際には、記事中の設置用HTMLを貼り付け直して下さい(スクリプトのURLを変更してあります)。
なお、現状(Google検索)のままでも、デザイン>カスタムCSSの編集にて、
.module-typelist .typelist-note .gsc-control-cse {
background-color: transparent !important;
border: none !important;
padding-left: 0;
}
.module-typelist .typelist-note .gsc-control-cse form.gsc-search-box table tr {
display: block !important;
}
.module-typelist .typelist-note .gsc-control-cse form.gsc-search-box table tr td.gsc-input {
display: block !important;
width: 100%;
padding: 0 0 4px 0;
}
のようなCSSを貼り付けておけば、フォームの表示は改善されるとは思います。
投稿: 風柳 > エムズの片割れ さん | 2020/10/29 23:33
>サイドバーに設置するマイリストを間違えていないか、今一度ご確認ください。
全面解決です。
ご指摘により見直した所、「備考」に貼り付けるべき所、間違って「説明」の欄に貼り付けていました!!
色々とご指導ありがとうございました。
使えなくなっていた「最強検索」が、より改善されて、また使えるようになって、大満足です。
ありがとうございました。
投稿: エムズの片割れ | 2020/10/30 10:45
> ご指摘により見直した所、「備考」に貼り付けるべき所、間違って「説明」の欄に貼り付けていました!!
ありがちです(笑)。間違えてしまいますよねぇ、あれは……。
ともあれ、無事設置と動作が出来るようになったようで、よかったです。
投稿: 風柳 > エムズの片割れ さん | 2020/10/30 12:29
風流さま
はじめましてこんにちは。
『ココログ用全文検索』使わせて頂くことにしました。
『ココログ最強検索』が使えなくなって残念に思っていたので大変有り難いです。
それでですね、
検索窓を短くすることは可能でしょうか。
もし、方法がある様でしたらお教え願えませんでしょうか。
(お時間がない様でしたら、無視して頂いて構いません)
本当に助かります。こんな便利なモンを有り難うございます。
投稿: 山本龍造 | 2025/01/13 15:50