anti scroll

ブラウザと小説の新しい関係を模索する

青空文庫の注釈(割注)に対応しました。

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

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

f:id:convertical:20161110130145p:plain

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

f:id:convertical:20161110125950p:plain

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

自作で利用するには

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

飛び級しすぎたメガネ男子<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とトラッキング用のイベントハンドラは無効化されます。

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

主要ゲーム機のタイトル数

なんか気になってしまったので、amazon.co.jpで確認した感じだとこうでした。

総タイトル数

ハード 総タイトル数
3ds 2584
vita 1641
ps4 1211
one 520

タイトル数は3dsダントツでトップでした。

あと、vitaのタイトルが意外と多いんだなあっていう印象でした。

年間あたりのタイトル数

ハード タイトル数
3ds 516
ps4 400
vita 328
one 270

リリーススピードも3dsがトップなのですね…

しかし、ps4は次世代機なのに、年間400タイトルも出てるのか!って思いました。

ちなみに北米では

ハード 総タイトル数
3ds 1556
ps4 969
one 900
vita 602

ちなみにamazon.com調べだとこんな感じでした。

北米ではps4もxbox oneもタイトル数にほとんど変わりがないのが印象的です。

あと日本のほうが3ds、ps4、vitaのタイトル数が多いです。

海外企業は日本でもほぼ同時にリリースしますが、日本企業は海外でのリリースが遅れるので、相対的に日本のソフト数が多くなってるんだと思います。

わかち書き用の設定

nehan.jsの多言語対応で、マラヤーラム語に対応したいというメールがあったので、わかち書き用の正規表現パターンを外部から設定できるようにしました。

// デフォルトの設定
Nehan.Config.rexWord = /^[\u0021-\u0025\u0027-\u003A\u003C-\u007E\u00C0-\u02A8\u2000-\u206F\uFB00-\uFB06]+/;

// マラヤーラム語(0x0D00-0x0D7F)を追加
Nehan.Config.rexWord = /^[\u0021-\u0025\u0027-\u003A\u003C-\u007E\u00C0-\u02A8\u2000-\u206F\uFB00-\uFB06\u0D00-\u0D7F]+/;

現在は開発版のソースのみですが、次のリリースに含める予定です。

古いバージョンのnehan.jsを使っている人たちへ

Google Codeというサービスの閉鎖に伴い、Google Code上に置かれていたソースに直リンする形のテンプレートやプログラムが動かなくなっているようです。

そこで、古いソースをまとめたrepositoryを作りました。

github.com

rawgitを使って、CDN化した各バージョンのURLは以下のとおりです。今後はこちらを使って下さい。

nehan.js version1

https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan.js

nehan.js version2

https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan2.js https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan2.css

nehan.js version3

https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan3.js https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan3.css

nehan.js version4

https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan4.min.js https://cdn.rawgit.com/tategakibunko/old-nehan/master/nehan4.css

nehan.js version4系列のjsだけ、minifiedされてますが、これは通常のソースをなくしてしまったからです…

追記

ちなみにnehan.jsのバージョンは1〜5まであるのですが、それぞれまったく互換性がありません。完全に別ものと考えて下さい。

よって「これを機に最新版を使ってみよう」と思って最新版のnehan.jsを読み込んでも、古いnehan.jsで書かれたアプリケーションは動かないので、ご注意ください…

あと、最新バージョン(version5系列)のnehan.jsを使うなら、Responsivookを使うと、お手軽に組み込むことができます。

(2019年追記) 現在はnehan.js5の後継としてnehanという名前(末尾の.jsが消えた)のエンジンを運用しています(バージョン的にはnehan version 6という扱いです)。

github.com

Responsivookで段組をサポートしました

Responsivookは、nehan.jsを使ってレスポンシブな縦書きページ送りを表示するjavascriptですが、version1.2.0から段組の表示もできるようになりました。

サンプルを見る

f:id:convertical:20160518213616p:plain

Responsivook version1.2.0のダウンロード

一つのページ上で縦書きと横書きのページ送り&段組が共存できて、すべて画面サイズに合わせて表示が更新されます。

使い方

段組表示する場合はthemedangumiを指定します。

ページ送りで表示する場合はthemebookを指定します。

以下はサンプルです。

document.addEventListener("DOMContentLoaded", function(event){
  // 縦書きページ送り
  Responsivook.start(".post-content.tb-rl.book", {
    theme:"book",
    flow:"tb-rl"
  });
  // 縦書き段組
  Responsivook.start(".post-content.tb-rl.dangumi", {
    theme:"dangumi",
    flow:"tb-rl"
  });
  // 横書きページ送り
  Responsivook.start(".post-content.lr-tb.book", {
    theme:"book",
    flow:"lr-tb"
  });
  // 横書き段組
  Responsivook.start(".post-content.lr-tb.dangumi", {
    theme:"dangumi",
    flow:"lr-tb"
  });
});

表示オプション

フォントやサイズなどといった表示オプションの詳細については、以下を参照して下さい。

https://github.com/tategakibunko/responsivook