カスタムジェスチャ Javascriptの例

タブ関係

入力した文字列をgoogleで検索する

/**
 * @name ググる
 */
const q = prompt();
if (q) {
  SimpleGesture.open('https://www.google.com/search?q=' + encodeURIComponent(q));
}

URLを確認してから現在のタブで開く

/**
 * @name リンクのURLを確認
 */
let target = SimpleGesture.target;
for (target) {
  if (target.href) {
    if (confirm('このURLを開きますか?\n' + target.href)) {
      location.href = target.href;
    }
    break;
  }
  target = target.parentNode;
}

一般

貼り付けて移動

/**
 * @name Paste and Go
 */
navigator.clipboard.readText().then(text => {
  if (text.startsWith("http://") || text.startsWith("https://")) {
    SimpleGesture.open(text);
  } else {
    SimpleGesture.open('https://www.google.com/search?q=' + encodeURIComponent(text));
  }
});

最初の入力欄にフォーカスする

/** @name 最初の入力欄にフォーカスする */
for (let e of document.getElementsByTagName('INPUT')) {
  if (!e.getAttribute('type') || e.getAttribute('type').match(/text|search/)) {
    e.focus();
    e.select();
    break;
  }
}

画面全体を下げる

HTML最上部にマージンを追加しタップしやすくします。 追加されたマージンをタップすると元に戻ります。

/** @name 画面を下げる */
if (window._SGMT_) {
  _SGMT_.apply();
} else {
  window._SGMT_ = {
    HEIGHT: '60vh',
    COLOR: '#d7d7db',
    apply: () => {
      document.documentElement.classList.add('SGMT');
      scrollTo({top:0, behavior:'smooth'});
    },
    reset: e => {
      if (e.target.tagName!='HTML') return;
      document.documentElement.classList.remove('SGMT');
    },
  };
  const s = document.createElement('style');
  s.textContent = `
    html::before {
      background:${_SGMT_.COLOR};
      height:0vh;
      display:block;
      transition:height .5s;
      content:"";
    }
    html.SGMT::before {
      height:${_SGMT_.HEIGHT};
    }
    .SGMT .SGMT-FIXED {
      top:${_SGMT_.HEIGHT};
    }
  `;
  s.type = 'text/css';
  document.head.appendChild(s);
  let f = document.elementFromPoint(0, 0);
  while (f) {
    if (f.tagName === 'BODY' || f.tagName === 'HTML') break;
    if (getComputedStyle(f).getPropertyValue('position') === 'fixed') {
      f.classList.add('SGMT-FIXED');
      break;
    }
    f = f.parentNode;
  }
  addEventListener('click', _SGMT_.reset);
  setTimeout(_SGMT_.apply, 10);
}

メディア関係

ビデオ再生時の全画面表示を解除する

/** @name 全画面表示を解除 */
document.mozFullScreenElement && document.mozCancelFullScreen();

ページ全体を全画面表示にする方法はないのかもしれない… あと将来的にmozFullScreenElementとかはmozが取れて fullscreenElementとexitFullscreenになります。(sは小文字になるらしい)

ビデオを戻す/進める

5秒戻す

/** @name ビデオを5秒戻す */
let video = SimpleGesture.target;
if (!video || video.tagName != 'VIDEO') {
  video = document.getElementsByTagName('VIDEO')[0];
}
if (video) {
  video.currentTime = video.currentTime - 5;
}

5秒進める

/** @name ビデオを5秒進める */
let video = SimpleGesture.target;
if (!video || video.tagName != 'VIDEO') {
  video = document.getElementsByTagName('VIDEO')[0];
}
if (video) {
  video.currentTime = video.currentTime + 5;
}

Youtubeだけで動かしたいときは↓を最初の行に入れてください。

if (!location.href.startsWith('https://m.youtube.com/')) { SimpleGesture.exit(); }