記事内の検索機能


PCでWEBをみているときみなさん
ctrl + F
でよく単語を検索して該当のところまでいきますよね。

【ここからが質問】
アイフォン・andoroidで記事を開いて、
その探している単語のところまでユーザーが”パッ”といけるような
機能を実装したいです。

*サイト内検索フォームはNGです。
→あくまでも同一ページ内に”パッ”と限ります。
→内部リンクもNGで。私の設置する時間がかかるため。

【最後に】
ユーザーがもとめているところまで行ける機能の実装を目指しています。
環境はワードプレスです。
プラグインでなくても、
どんな言語でもOKです。

恐れ入りますが、
アドバイスいたけると幸いでございます。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2014/03/06 10:03:06
  • 終了:2014/03/07 11:49:17

ベストアンサー

id:watercooler No.1

井戸端さん回答回数289ベストアンサー獲得回数512014/03/06 12:16:53

ポイント50pt

アイデアベースでいいかしら?

jQueryプラグインtapas.jsでハイライトすればclass="highlight"が付くの。
jQuery プラグインtapas.jsを使って、ページ内文字検索

jQueryでclass="highlight"の位置を調べてスクロール。
ページ内を自在にスクロール | よく使うjQuery
パッにしたいならanimateをやめてscrollTopとscrollLeftを指定すればいいわ。

id:u_7cc

これは結構修正しないと使えなさそうです。
試しに「\w」でハイライト表示をしてみるとページが盛大に壊れます。

2014/03/06 15:59:16
id:akakak

tapas.jsなんてあるんですね!jquery coolですね~
ありがとうございます!

2014/03/07 11:48:57

その他の回答(1件)

id:watercooler No.1

井戸端さん回答回数289ベストアンサー獲得回数512014/03/06 12:16:53ここでベストアンサー

ポイント50pt

アイデアベースでいいかしら?

jQueryプラグインtapas.jsでハイライトすればclass="highlight"が付くの。
jQuery プラグインtapas.jsを使って、ページ内文字検索

jQueryでclass="highlight"の位置を調べてスクロール。
ページ内を自在にスクロール | よく使うjQuery
パッにしたいならanimateをやめてscrollTopとscrollLeftを指定すればいいわ。

id:u_7cc

これは結構修正しないと使えなさそうです。
試しに「\w」でハイライト表示をしてみるとページが盛大に壊れます。

2014/03/06 15:59:16
id:akakak

tapas.jsなんてあるんですね!jquery coolですね~
ありがとうございます!

2014/03/07 11:48:57
id:a-kuma3 No.2

a-kuma3回答回数4605ベストアンサー獲得回数19432014/03/06 12:54:06

ポイント50pt

面白そうなんで、javascript で組んでみました。

function moveToText(txt) {
    // 文字列を見つける
    var found = window.find(txt);

    // Range を取得
    var sel = getSelection();
    var rng = sel.getRangeAt(0);

    // 目印になる Node を作って Range の前に挿入
    var ele = document.createElement("span");
    rng.insertNode(ele);

    // 目印までスクロール
    ele.scrollIntoView();

    // 目印を削除
    ele.parentNode.removeChild(ele);

    // 選択状態を解除
    sel.collapse(document.body, 0);
}

はてなブログに、実際に動作するものを置いてあります。一応、Android の標準ブラウザでは動作しました。
http://a-kuma3.hatenablog.com/entry/2014/03/06/124657


window.find を使う利点は、ノードをまたがって検索してくれること。
先のはてなブログで「吾輩」を赤くしているのは意味があって、HTML は以下のようになってます。

<span style="color:red;">吾輩</span>

ここで、検索文字を「吾輩の主人」と検索してみてください。
単純に Node の中の文字列を拾うだけでは、こういうことができません。



最後に、参考にした MDN のページを乗せておきます。

id:u_7cc

実用するには少なくとも以下の対処が要ります。

  • 検索位置の調整(window.findの検索開始位置は最後のキャレットの位置から)
  • input, textareaの文字を除外する処理(選択範囲が外れなくなる)
  • 入力が空の時にキャンセルする処理
2014/03/06 15:50:52
id:akakak

詳しくありがとうございます!大変勉強になりました!

2014/03/07 11:47:52
id:akakak

質問者から

ak2014/03/07 19:03:22

みなさん大変ありがとうございました!
本当はみなさんにベストアンサーをつけたいのですが、
はやく解答をいただいた方にしました!

  • id:Lhankor_Mhy
    iPhoneのSafariには標準機能でそれがありますよね。
  • id:a-kuma3
    Android の標準ブラウザや、Chrome にも、その機能があります。
  • id:u_7cc
    基本的にjsからの文字検索は不可能だと考えた方が良いです。
    細かい話をすると長くなるので省略しますが、

    >|html|
    <p>1 <!-- aaaa --> 2</p>
    <p>1
    2</p>
    <||

    というような異なるソースは両方とも、「1 2」と表示されます。よってソースからではなくwindow.findを使うのが手っ取り早くなります。

    しかしwindow.findを使うにもいくつか注意点があります。http://q.hatena.ne.jp/1394067786#a1224809でコメントした以外にも、iframe内の文字が選択状態にある場合など。

    どうしてもと言うのならrangyとライブラリがありますが、ファイルが大きく、モバイルへの対応度も分かりかねます。
    http://rangy.googlecode.com/svn/trunk/demos/textrange.html

    よってページ内検索は上記コメントにもある様に、ブラウザ標準機能を使うのが良い選択です。
  • id:Lhankor_Mhy
     うっかり忘れてましたが、はてなが作った JavaScript モジュールの Ten.js がありましたね。
     
     たとえば、このページで、
    new Ten.Highlight('ブラウザ').show();
    ↑を実行すると、「ブラウザ」という文字がハイライトされるはずです。モバイルで使えるのか分かりませんが。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません