ブログのおれ最適化パート2: アクセスキー

パート1は前回の「めくる感覚で行き来できるページナビゲーションをCSSで実装する」です。

アクセスキーなんか別段目新しいことなんかないですけども以下のキーで怠惰な気分になれます。絶賛実験中なのでタイミングと僕の気分で割り当ては変わります。

index.php

• h: ページトップへ移動
• j: ひとつ新しい記事を先頭に
• k: ひとつ古い記事を先頭に*1）
• u: j,kで送った現在の記事のパーマリンクへ遷移
• l: ページ一番下へ移動

*1 ) 最後までいくとautopagerize、但しページャー左の■をクリックして本にしておく必要あり

indexとsingleでjとkの動作が逆になってるけど、今のところはこれで

single.phpなど

• h: ページトップへ移動
• j: ひとつ古い記事のパーマリンクへ遷移
• k: ひとつ新しい記事のパーマリンクへ遷移
• u: コメント入力欄まで移動
• l: ページ一番下へ移動

現状のソースコード

$(window)
  // Firefoxだとalertが表示されたときにフォーカスがずれて
  // 以降ドキュメントを一度クリックしないとキーコントロールが効かないので
  // なんかダイアログなのをどこかで実装しないとだめっぽい
  .keyup(function(e) {
    var key = e.keyCode, b = $("body");
    switch( key ) {
      // h
      case 72:
        window.scroll(0, 0);
        break;
      // j
      case 74:
        if ( !b.hasClass("home") ) {
          if ( !$("#prev").length ) {
            //alert("今見ている記事が一番古い記事です");
            return false;
          }
          location.href = $("#prev a")[0].href;
        } else {
          if ( currentArticle === 0 ) {
            //alert("これ以上記事がありません");
            return false;
          }
          window.scroll(0, articles.eq(--currentArticle).offset().top - 40);
        }
        break;
      // k
      case 75:
        if ( !b.hasClass("home") ) {
          if ( !$("#next").length ) {
            //alert("今見ている記事が最新です");
            return false;
          }
          location.href = $("#next a")[0].href;
        } else {
          if ( !articles.eq(++currentArticle).length ) {
            //alert("続きを読み込み中・・・ずっとこれが表示されたらもう記事がないです");
            currentArticle--;
            return false;
          }
          if ( ( currentArticle + 1 ) === articles.length ) {
            loadingNextPage();
          }
          window.scroll(0, articles.eq(currentArticle).offset().top - 40);
        }
        break;
      // l
      case 76:
        window.scroll(0, $("html").attr("scrollHeight"));
        break;
      // u
      case 85:
        if ( !b.hasClass("home") ) {
          if ( !$("#respond").length ) {
            //alert("コメントは記事詳細で確認できます");
            return false;
          }
          window.scroll(0, $("#respond").offset().top - 50);
        } else {
          location.href = articles.eq(currentArticle).find("header").find("a:first").attr("href");
        }
        break;
      default:
        break;
    }
  });
$("input, textarea").keyup(function(e) {
  e.stopPropagation();
});