「選択範囲を検索」のスワイプバージョンが出来ました。

もう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