ページ

2013-08-29

ボリュームのあるサイト閲覧はセクション間移動できる「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」ページにアクセスします。
  1. 「Greasemonkey」をインストール
  2. Firefoxアドオン「Greasemonkey」ページにアクセスしたら、画面右サイドにある「インストール」ボタンをクリック。


  3. インストールの「許可」ボタンをクリック
  4. 「…インストールできない設定になっています。」メッセージが表示されたら、「許可」ボタンをクリックします。


  5. 「今すぐインストール」ボタンをクリック
  6. 「ソフトウェアのインストール」ダイアログが表示されます。作者を信頼して「今すぐインストール」ボタンをクリックしましょう。


  7. 「今すぐ再起動」ボタンをクリック
  8. 「…再起動後にインストールされます。」メッセージが表示されたら、「今すぐ再起動」ボタンをクリックしてFirefoxを再起動します。


  9. 「Greasemonkey」のアイコン表示
  10. Firefoxを再起動すると、アドオン・バーに「Greasemonkey」アイコンが表示されます。



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


「Greasemonkey」は、それだけでは何もしてくれないので、ユーザスクリプト形式のGreasemonkey上で動くJavaScriptを登録する必要があります。今回は、サイト閲覧の際にセクション間移動するためのスクリプト「Heading Navigation」を登録します。
  1. 「Greasemonkey user script 」をクリック
  2. まずは「Heading Navigation」スクリプトのあるサイト「Juicy Studio: Heading Navigation Greasemonkey User Script」のページにアクセスします。画面右側の「Summary」下の文章の中にある「Greasemonkey user script 」をクリックします。


  3. 「インストール」ボタンをクリック
  4. 「Greasemonkey」へのインストール確認ダイアログが表示されます。スクリプトの「インストール」ボタンをクリックします。


  5. 「OK」ボタンをクリック
  6. インストール完了メッセージが表示されたら「OK」ボタンをクリックして「Greasemonkey」へのインストール終了です。


  7. 「Heading Navigation」の登録を確認
  8. アドオン・バーにある「Greasemonkey」アイコンをクリックしてみましょう。「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)

    移動先の見出しは赤枠で囲まれて表示されます。



  • 割当キーの変更
    1. アドオンマネージャー・ページで「設定」をクリック
    2. アドオンバーの「Greasemonkey」アイコン右の▼印をクリック、あるいはFirefoxのメニューバーから[ツール]→[Greasemonkey]で表示されるメニュー[ユーザスクリプトの管理]をクリックします。アドオンマネージャー・ページが表示されます。ユーザスクリプトの一覧が表示されます。一覧の中から「」を探し、「設定」ボタンをクリックします。


    3. 「このユーザスクリプトを編集」ボタンをクリック
    4. 「Greasemonkeyユーザスクリプト設定」の画面が表示されます。画面下の「このユーザスクリプトを編集」ボタンをクリックします。


    5. JavaScriptのコードを変更
    6. 以下のようなJavaScriptのコードが表示されます。最初にコメント行(行が[//]で始まっている)が続いて23行目に「var strNav = 'H';」のコードがあります。この中のクォーテーションで囲まれている「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]/));
      }
      ちなみに「ユーザスクリプト設定」の画面にある「ユーザスクリプトを実行するページ」「…実行しないページ」のテキスト枠にURLを指定すれば、見出し移動をするページ、しないページを任意に決めることができます。
※Greasemonkeyは対応スクリプトも多く便利なのですが、スクリプトをインストールする際には十分注意する必要があります。悪意のあるものも中にはあるので、インストールしたいスクリプトを見つけたら必ずサイトで検索してみるといいようです。サイト検索で問題がなさそうなら目安として大丈夫そうですね。


関連記事


News Source Site

0 件のコメント:

コメントを投稿