Nehan Reader更新。Windows環境にて行がガタついていた問題が修正されました

あらゆるウェブサイトを縦書き（や横書き）のページ送りにできるChrome拡張「Nehan Reader」を更新しました。

Nehan Reader - Chrome ウェブストア

前々から「Windows環境下にて行のガタ付きが発生している」との報告は上がっていたのですが、ようやく修正できたので、良かったら使ってください。

Windows版のChromeでフォントが見づらくなっている件について

この辺の議論を見る限りでは、Windows版のChromeはversion52からDirectWriteを採用したらしく、その影響でフォントがギザギザに表示されてしまっているようです。

本来はDirectWriteで綺麗になるはずなのですが、まだ色々と調整中なのかもしれませんね。

ちなみに、chrome://flagsあたりで、あれこれパラメーターを調整するとDirectWriteが無効化されて元に戻るらしいので、どうしても気になる方はやってみてください。

常時SSL化とHTTP/2に対応しました

なかなか大変でしたが、常時SSL化とHTTP/2の対応が完了しました。

以下はHTTP/2 Testの結果

ちなみに、HTTP/2 and SPDY indicator - Chrome Web Storeを入れた上でアクセスすると、青いイナズマがピカっと光って気持ちがいいです（笑）。

縦書き文庫でゲームブックを作る方法

ちょいネタですが、縦書き文庫ではアンカーリンクによる内部ジャンプが使えるので、ゲームブックのような仕組みを簡単に実現できます（動くサンプル）。

やり方はシンプルです。

テキストをチャプターに分けて、それぞれのチャプターに「チャプター番号」のアンカーを貼ります。

で、それぞれのチャプターには「ページ内リンク（href=#チャプター番号）」を使ってジャンプすればよいのです。

例えばこんな感じです。

<a name="1">１</a>
先頭ページのテキスト
<a href="#2">続きへジャンプ</a>
[page-break]
<a name="2">２</a>
次のページのテキスト
<a href="#1">先頭ページに戻る</a>

選択肢を作る

選択肢を作ることもできます。

<a name="1">１</a>
恋人がサンタクロース！
どうする!?

<a href="#2">受け入れる</a>
<a href="#4">無理。別れる</a>
[page-break]

<a name="2">２</a>
恋人がサンタクロース！
背の高いサンタクロース！
どうする!?

<a href="#3">すべてを受け入れる</a>
<a href="#4">無理。足を切り落とす</a>
[page-break]

<a name="3">３</a>
お幸せに！
<a href="#1">先頭に戻る</a>
[page-break]

<a name="4">４</a>
破局しました！
<a href="#1">先頭に戻る</a>

読んでいるチャプター以外のテキストはネタバレになってしまうので、チャプター番号ごとに改ページしています。

こういうのって、紙の本だと（たぶん紙がもったいないから）同一ページに別チャプターのテキストが並んでしまうのですが、電子媒体ではそんなことを気にする必要がないのが嬉しいところです。

あとチャプター番号も、紙媒体のゲームブックだと、隣接するテキストによるネタバレを防ぐため、ランダムなチャプター番号へ移動させますが、電子媒体では改ページし放題なので、その必要はありません。

実際にやってみると「あれ？ 意外と書きやすいかも？」って感じでした。

課題

ただし課題もいくつかあります。ざっと上げるとこんなところでしょうか。

• ページ送りボタンで移動できてしまう
• まだ組版が済んでいないページにはジャンプできない（待たされる）
• 選択肢によってページをジャンプする影響で、ページ送りによるポイントが付きにくい

いずれも致命的な欠点というほどでもない気がするのですが、最後の「ポイントが付きにくい」ってのは、ちょっとまずいかもしれませんね。

サーバーメンテナンスの告知

本日の17:00〜19:00ぐらいまで、サーバーのメンテナンスを行います。

ご不便をおかけしますが、よろしくお願い致します。

表示設定をリセットするボタンを追加

表示設定を初期化して、デフォルトの設定に戻すボタンを追加しました。

青空文庫の注釈（割注）に対応しました。

青空文庫の割注は、ほとんどが原文の漢字に関する情報で、一般の読者にとってはあんまり必要のない情報だったりします。

というわけで、普段は注釈の中身を本文から隠しておき、アイコンをクリックしたらポップアップする、というようにしました。

iのアイコンをクリックすると

のようにポップアップします。

自作で利用するには

こんな風にマークアップしてください。

飛び級しすぎたメガネ男子<span class="notes">メガネをかけた若い男性</span>とは、お前のことか？

その他にも縦書き文庫には補足（チップ）記法もありますので、そちらもよかったら使ってください。

Googleの検索結果でリダイレクトとトラッキングを無効化する

Googleの検索結果からリンクをコピーして貼り付けたら、めちゃくちゃ長いリダイレクト用のリンクになっていて「ふぁ？？」となることがあります。

なので、それをなんとかしてくれる拡張機能を探したのですが、しっくり来るのがなかったので自作することに。。。

拡張機能のソース

// manifest.json
{
  "name": "Disable google search tracking",
  "version": "0.1",
  "manifest_version": 2,
  "description": "Disable google search tracking",
  "permissions":[
    "tabs", "http://www.google.co.jp/*", "https://www.google.co.jp/*"
  ],
  "content_scripts": [
    {
      "matches": ["http://www.google.co.jp/*", "https://www.google.co.jp/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

// content.js
(function(){
  setTimeout(function(){
    document.querySelectorAll("h3.r>a").forEach(function(link){
      var a = document.createElement("a");
      a.href = link.href;
      a.innerHTML = link.innerHTML;
      link.innerHTML = "";
      link.appendChild(a);
    });
  }, 100);
})();

仕組み

リンクエレメントを直接どうこうしようとしても、Google側のjsで強引に書き換えられてしまうので、リンクエレメントの子に非Redirectなリンクを挿し込む方法を取りました。

こうすれば、リンクのクリックイベントは最深の子のみで発火するので、親リンクのRedirectとトラッキング用のイベントハンドラは無効化されます。

これで純粋なリンクのみがリストアップされたクリーンな検索結果になりました。