LIFE GOES TO A PARTY: ボリュームのあるサイト閲覧はセクション間移動できる「Heading Navigation」スクリプトで快適！（Firefoxの話しですよ！）

ボリュームのあるWebサイトの閲覧はスクロールやらマウス操作での移動も一苦労しますよね。行きたい見出しへジャンプしたいんだけど、見出し要素間の移動が標準機能でできるブラウザはOperaのみです。わたしが標準で使っているFirefoxではその機能はありません。「Heading Navigation Greasemonkey User Script」はキーボード操作で見出し間の移動を可能にしてくれるスクリプトです。ただし、「Heading Navigation」を利用するには「Greasemonkey」という拡張機能をあらかじめFirefoxにインストールしておく必要があります。「Greasemonkey」はそれだけでは何もしてくれません。「Greasemonkey」のユーザスクリプトを登録して初めて機能します。今回の場合は「Heading Navigation」スクリプトを登録します。

Greasemonkey（グリースモンキー）とは…
Greasemonkey（グリースモンキー）とは、Mozilla FirefoxおよびSongbird用の拡張機能。後述のユーザスクリプト形式に従ったJavaScriptを組み合わせて、ウェブページ閲覧時に実行することができる。
出展：Greasemonkey - Wikipedia

Firefoxに拡張機能「Greasemonkey」をインストール

Firefoxを起動して、Firefoxアドオンの「Greasemonkey」ページにアクセスします。

「Greasemonkey」をインストール

Greasemonkey

インストールの「許可」ボタンをクリック

「今すぐインストール」ボタンをクリック

「今すぐ再起動」ボタンをクリック

「Greasemonkey」のアイコン表示

「Greasemonkey」ユーザスクリプトを登録

「Greasemonkey」は、それだけでは何もしてくれないので、ユーザスクリプト形式のGreasemonkey上で動くJavaScriptを登録する必要があります。今回は、サイト閲覧の際にセクション間移動するためのスクリプト「Heading Navigation」を登録します。

「Greasemonkey user script 」をクリック

Juicy Studio: Heading Navigation Greasemonkey User Script

「インストール」ボタンをクリック

「OK」ボタンをクリック

「Heading Navigation」の登録を確認

「Heading Navigation」の使用方法

移動したいサイトにフォーカスされた状態で「H」を押せばページを下方向に見出し（h1～h6：全てのヘッダーレベル）を移動します。「Shift＋H」を押すと逆に上に向かって見出しを移動します。

規定の割り当てキー操作

No.	割当キー	内容
1	H	次の見出し（全てのレベル）
2	Shift + H	前の見出し（全てのレベル）
3	1	次の見出し（レベル1）
4	Shift + 1	前の見出し（レベル1）
5	2	次の見出し（レベル2）
6	Shift + 2	前の見出し（レベル2）
7	3	次の見出し（レベル3）
8	Shift + 3	前の見出し（レベル3）
9	4	次の見出し（レベル4）
10	Shift + 4	前の見出し（レベル4）
11	5	次の見出し（レベル5）
12	Shift + 5	前の見出し（レベル5）
13	6	次の見出し（レベル6）
14	Shift + 6	前の見出し（レベル6）

割当キーの変更

アドオンマネージャー・ページで「設定」をクリック

「このユーザスクリプトを編集」ボタンをクリック

JavaScriptのコードを変更

var strNav = 'H';

// -----------------------------------------------------
// Title: Heading Navigation
// version: 0.1
// Date: 2006-04-19
// Author: Gez Lemon
// Copyright (c) 2006, Juicy Studio
// Requires Greasemonkey 0.6.4 or higher
// -----------------------------------------------------
//
// ==UserScript==
// @name Heading Navigation
// @namespace http://juicystudio.com/
// @description Allows documents to be navigated by headings
// @include *
// @exclude http://gmail.google.com/*
// @exclude http://mail.google.com/mail/*
// ==/UserScript==

// SETUP VARIABLES FOR THE SCRIPT
// ==============================

// Heading activation character
var strNav = 'H';

// =====================================
// END OF SETUP VARIABLES FOR THE SCRIPT

// Global to track the current element
var objCurrent;

var iNavKey;

setup();

function setup()
{
 var objNodes = document.getElementsByTagName('*');

 objCurrent = objNodes[0];

 // Add focus listener to all elements
 for (var iCounter=0; iCounter<objNodes.length; iCounter++)
 {
  if (objNodes[iCounter].nodeType == 1)
   objNodes[iCounter].addEventListener('focus', updateCurrent, false);

  // Illegal according to spec, but required to make headings focusable
  if (objNodes[iCounter].nodeName.match(/^h[1-6]$/i))
   objNodes[iCounter].setAttribute('tabindex', '-1');
 }

 // Start listening
 document.addEventListener('keyup', headingNavigation, false);
 iNavKey = strNav.toUpperCase().charCodeAt(0);

 var objHead = document.getElementsByTagName('head')[0];

 if (objHead)
 {
  var objCSS = document.createElement('style');

  objCSS.setAttribute('type', 'text/css');
  objCSS.appendChild(document.createTextNode('h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {outline: 1px solid #c00;}'));
  objHead.appendChild(objCSS);
 }
}

function updateCurrent(objEvent)
{
 objCurrent = objEvent.target;
}

function headingNavigation(objEvent)
{
 var iKey = objEvent.keyCode;
 var strKey = String.fromCharCode(iKey);

 if ((iKey != iNavKey && !isNumeric(strKey)) || typeable(objCurrent))
  return true;

 var iOuter, iCounter;
 var iStarted = 0;

 var objNodes = document.getElementsByTagName('*');

 // Make sure we cycle right through the collection, as the first stop
 // looks for the node that currently has focus
 for (iOuter=0; iOuter<2; iOuter++)
 {
  if (objEvent.shiftKey) // Cycle backwards
  {
   for (iCounter=objNodes.length-1; iCounter>=0; iCounter--)
   {
    iStarted = checkNode(objNodes[iCounter], strKey, iStarted);
    if (iStarted == 1)
     break;
   }
  }
  else // Cycle forwards
  {
   for (iCounter=0; iCounter<objNodes.length; iCounter++)
   {
    iStarted = checkNode(objNodes[iCounter], strKey, iStarted);
    if (iStarted == 1)
     break;
   }
  }
 }
}

function checkNode(objNode, strKey, iStarted)
{
 if (isNumeric(strKey))
 {
  // Look for specific heading
  if (iStarted == 2 && objNode.nodeName.toLowerCase() == 'h' + strKey)
  {
   objNode.focus();
   return 1;
  }
 }
 else
 {
  // Any heading
  if (iStarted == 2 && objNode.nodeName.match(/^h[1-6]$/i))
  {
   objNode.focus();
   return 1;
  }
 }

 if (objNode == objCurrent)
  return 2;

 return iStarted;
}

function typeable(objNode)
{
 if (objNode.nodeName.toLowerCase() == 'input' ||
  objNode.nodeName.toLowerCase() == 'select' ||
  objNode.nodeName.toLowerCase() == 'optgroup' ||
  objNode.nodeName.toLowerCase() == 'option' ||
  objNode.nodeName.toLowerCase() == 'textarea')
  return true;

 return false;
}

function isNumeric(strValue)
{
 return (strValue.match(/[1|2|3|4|5|6]/));
}

※Greasemonkeyは対応スクリプトも多く便利なのですが、スクリプトをインストールする際には十分注意する必要があります。悪意のあるものも中にはあるので、インストールしたいスクリプトを見つけたら必ずサイトで検索してみるといいようです。サイト検索で問題がなさそうなら目安として大丈夫そうですね。

LIFE GOES TO A PARTY

ページ

2013-08-29

ボリュームのあるサイト閲覧はセクション間移動できる「Heading Navigation」スクリプトで快適！（Firefoxの話しですよ！）

Firefoxに拡張機能「Greasemonkey」をインストール

「Greasemonkey」ユーザスクリプトを登録

「Heading Navigation」の使用方法

関連記事

News Source Site

0 件のコメント:

コメントを投稿