人気ブログランキング | 話題のタグを見る
AX
【iPhone】Safariに検索機能を作ってみた
iPhoneのSafariには検索機能がない。
ここで検索と言っているのはページ内の単語検索のこと。ページ内検索っていうのかな?
WindowsだったらCtrl+F、MacだったらCommand+Fで検索できるのですが、
iPhoneだとそのような機能がなく 検索できません。

非常に不便に感じたのでそれっぽく作ってみた。
いわゆるブックマークレットで検索機能を実現しました。
ついでにページの一番下に飛ぶためのボタンも用意。

せっかく作ったので公開。誰かの役に立てばと思います。
ブックマークレットの登録方法は

1. 適当なページのブックマークをとる。
Safariの画面の下部に「+」のアイコンがあるのでそちらをタッチ。
「ブックマークを追加」の項目があるのでそれをクリックすればOKです。

2. 先ほど作ったブックマークをブックマークレットに修正する。
Safariの画面の下部に本のアイコンがあるのでそちらをタッチ。
ブックマークの一覧が表示されるので、そこから先ほど登録したブックマークが
ある箇所に移動。画面左下の「編集」ボタンをタッチし、登録したブックマークの
行を選択。すると、ホームページ名とかURLとか記載された画面になります。
その画面のURLの項目(http://などが記載されている項目)を以下の内容で
上書きします。

※ ExciteブログではJavascriptを投稿できないので、「javascript:」の記述ができません。
以下の内容の頭の「javascrip t」を「javascript」に直してご利用ください。


javascrip t:void(function () {var d = document;var me = d.getElementById("manodeldio.iPhoneSearch");if (me) { me.focus();return true;}var _fCE = function(e){return d.createElement(e);};var _fCT = function(t){return d.createTextNode(t);};var _fAC = function(p,c){p.appendChild(c);};var _fSA = function(o,k,v){o.setAttribute(k,v);};var textSearch = function(_node,key) {if (!key) return;var _r=new Array();if (_node == null) return _r;var nx = _node;var node = _node.parentNode;while (nx) {if (nx.nodeName == "#text") {var b=nx.textContent.toUpperCase();key = key.toUpperCase();var idx = b.indexOf(key);if (idx != -1) {var array = b.split(key);if (1 < array.length) {var next = nx.nextSibling;var i=0;do {var hl = d.createElement("STRONG");node.insertBefore(d.createTextNode(array[i]),nx);node.insertBefore(hl,nx);_r.push(hl);hl.setAttribute("name","_jsn_");hl.appendChild(d.createTextNode(nx.textContent.substring(idx,idx+key.length)));with (hl.style) {color="#000";background="highlight";fontWeight="bold";width="auto";}} while(++i < array.length-1);node.insertBefore(d.createTextNode(array[i]),nx);node.removeChild(nx);nx=next;continue;}}}var r2 = textSearch(nx.firstChild,key);while (r2.length != 0) {_r.push(r2.pop());}nx = nx.nextSibling;}return _r;};var getHeight=function(elm) {var valueT = 0;do {valueT += elm.offsetTop || 0;elm = elm.offsetParent;} while (elm);return valueT;};var SPD = Math.floor(1000 / 30);var easeInOut = function (minValue,maxValue,totalSteps,actualStep,powr) { var delta = maxValue - minValue; var stepp = minValue+(Math.pow(((1 / totalSteps) * actualStep), powr) * delta);return Math.ceil(stepp) };var animeScrollY=function(y,m) {var actStep = 0;var end = y;var steps = 30;var start = window.scrollY;if (window.tid) window.clearInterval(window.tid);window.tid = window.setInterval(function() { var h = easeInOut(start,end,steps,actStep,0.3);if (Math.abs(h-start) > Math.abs(m)) {scrollTo(0,h);}actStep++;if (actStep > steps) window.clearInterval(window.tid);} ,SPD);};var animeObjectY=function(o,y,m) {var actStep = 0;var end = y + m;var steps = 30;var start = parseInt(o.style.top.replace("px",""));if (o.tid) window.clearInterval(o.tid);o.tid = window.setInterval(function() { o.style.top = easeInOut(start,end,steps,actStep,0.3) + "px";actStep++;if (actStep > steps) window.clearInterval(o.tid);} ,SPD);};var searchKey = "";var re = RegExp(/[?&]q=([^+;&]*)/);if (d.referrer && re.test(d.referrer)) {searchKey = decodeURI(RegExp.$1);}var base = _fCE("DIV");var find = _fCE("INPUT");var close = _fCE("BUTTON");var prev = _fCE("BUTTON");var next = _fCE("BUTTON");var result = _fCE("SPAN");var down = _fCE("SPAN");_fAC(d.body,base);_fAC(base,find);_fAC(base,close);_fAC(base,down);_fAC(base,_fCE("BR"));_fAC(base,result);_fAC(base,prev);_fAC(base,next);_fAC(close,_fCT("完了"));_fAC(down,_fCT("%EE%88%B3"));_fAC(prev,_fCT("前"));_fAC(next,_fCT("次"));_fSA(base,"id","manodeldio.iPhoneSearch");_fSA(find,"type","text");_fSA(find,"placeholder","page search");_fSA(find,"value",searchKey);var idx=0;var hits=new Array();find.addEventListener("blur",function(){while (hits.length != 0) {var hit = hits.pop();hit.parentNode.replaceChild(d.createTextNode(hit.innerHTML),hit);}idx = 0;textSearch(d.body,this.value);var elms = d.getElementsByName("_jsn_");for (var i=0,n=elms.length;i


使い方はなんとなくわかると思います。


関連記事
2010/12/18追加
碧霧日記的Blog : 【iPhone】Safariでページ内容の検索
by manodeldio | 2010-11-07 12:12 | 携帯電話


<< 【病気】目がぁー、目ガァー(ム... 【iPhone】FlickFa... >>