「選択範囲を検索」のスワイプバージョンが出来ました。
もうiPad限定なんて言いません。
すべてのiOSデバイスで動きます。
どうも、@chiroru_27 です。
「検索範囲を検索」の派生版とでも言いましょうか
少し視点を変えたバージョンを作ってみました。
スワイプバージョンとは?
違い。
本家の「検索範囲を検索」では、仕様上一つの検索エンジンにしか対応出来ませんでした。
そして、iPad以外では使えないという大きな欠点も有りました。
今回のスワイプバージョンでは、スワイプによる検索エンジン切り替えを実現し
ジェスチャーで、4つの検索エンジンの中から選択範囲を検索できます。
タップでもジェスチャーとして認識出来るのですが、システムの動作に干渉しそうなのでオフにしてあります。
それも含めれば最大5つまで検索エンジンを登録できます。
特徴。
スワイプ
スワイプによって好きな検索エンジンに切り替えられます。
ジェスチャー判定は、文字列の選択なのか、スワイプなのか、はたまた選択解除なのかを
きちんと見極め動作するので、ユーザは余計なことを考えずに作業に集中できます。
調和
- システム側の動作に影響されることもすることもなく、仲良く動きます。
- 文字の選択
- スクロール
- 選択解除
- ブックマークバーを表示できないiPod touchでも動作
どのiOSデバイスでも同じように動きます。
コード
javascript: (function() { var query = '' , queryBefore = '' , queryAfter = '' , openURL = ''; var startX , startY , endX , endY; touchGesture(); var searchEngineList = [ { orientation : 'tap', siteName : 'Google', siteURL : 'http://www.google.com/search?q=', option : '', }, { orientation : 'top', siteName : 'Google', siteURL : 'http://www.google.com/search?q=', option : '', }, { orientation : 'right', siteName : 'Google Translate', siteURL : 'http://translate.google.com/?text=', option : '', }, { orientation : 'bottom', siteName : 'Amazon.co.jp', siteURL : 'http://www.amazon.co.jp/s?url=search-alias=aps&field-keywords=', option : '', }, { orientation : 'left', siteName : 'Youtube', siteURL : 'http://www.youtube.com/results?search_query=', option : '', } ]; function checkQuery() { if(queryBefore == queryAfter) return 0; else return -1; } function orientationConvert(SX,SY,EX,EY) { var orientation , X = EX-SX, Y = EY-SY; if(Math.abs(X) != Math.abs(Y)) { if(Math.abs(X) > Math.abs(Y)) orientation = EX>SX ? 'right' : 'left'; else if(Math.abs(Y) > Math.abs(X)) orientation = EY>SY ? 'top' : 'bottom'; } else orientation = 'tap'; return orientation; } function searchEngineSwitch(i) { var n; switch(i) { case 'tap': n = 0; break; case 'top': n = 1; break; case 'right': n = 2; break; case 'bottom': n = 3; break; case 'left': n = 4; break; } query = encodeURIComponent(window.getSelection()); openURL = searchEngineList[n].siteURL + query + searchEngineList[n].option; return n; } function touchHandler(e) { switch(e.type) { case 'touchstart': startX = endX = e.changedTouches[0].pageX; startY = endY = document.body.scrollTop; queryBefore = encodeURIComponent(window.getSelection()); break; case 'touchmove': endX = e.changedTouches[0].pageX; endY = document.body.scrollTop; queryAfter = encodeURIComponent(window.getSelection()); break; case 'touchend': if(!checkQuery() && window.getSelection() != '') { if(searchEngineSwitch(orientationConvert(startX,startY,endX,endY)) != 0) window.open(openURL , '_blank'); } break; case 'touchcancel': break; } } function touchGesture() { document.addEventListener('touchstart' , touchHandler , false); document.addEventListener('touchmove' , touchHandler , false); document.addEventListener('touchend' , touchHandler , false); } })()
コードが長いです。半端無く。
取り敢えず、動いたので公開しました(笑)
もう少しコンパクトにできれば、今度やっておきます。
iPod touchで使ってみましたが、割りと使えそうです。
searchEngineListのURLは
iPadの「選択範囲を検索」をほんの少し改良しました。 - #ChiroruLab
でいくつか紹介しています。
それでは、最後まで読んでくれてありがとうございました!
ではまたね。バイバイ♪
他のバージョン
iPadの「選択範囲を検索」をほんの少し改良しました。 - #ChiroruLab
iPadのSafariで選択範囲を検索する簡単な方法 - #ChiroruLab