Nehan Reader version2.1リリース。自動で変換するサイトを指定できるようになりました。

Nehan Reader(version 2.1)をリリースしました。

chrome.google.com

オプションページにて、

• 自動的にNehan Readerを起動するURL（パターン）
• URL（パターン）毎の変換対象に指定する部分

などが設定できるようになりました。

ちなみに「小説家になろう」とか「青空文庫」のような、既に使っている人が多そうな対象は、デフォルトで設定しておきました。

なので、version2.1をインストールして「青空文庫」や「小説家になろう」の「作品ページ」にアクセスすると、作品本文を抜き出して縦書きページ送りにしたビューアーが自動的に起動しちゃいます。

捗りますね！

自動的に起動するURLを設定する

Nehan Readerのボタン上で右クリックして「オプション」へ進みます。

automatic convert URLsの欄に、自動変換させるサイトのURLパターンを記述します。

内容はSaveUrlListというボタンを押すと保存されます。

URLパターンの記述の仕方

URLパターンの記述方法は２つあります。

一つは、ダイレクトにサイトのURL（の一部）を記述する方法。

もう一つは、サイトのURLパターンを正規表現で記述する方法（上級者向け）です。

以下はサンプルです（#で始まる行はコメント扱い）。

# URLをダイレクトに記述
headlines.yahoo.co.jp

# 正規表現で記述
r(www\.aozora\.gr\.jp/cards/\d+/files)

正規表現でパターンを指定する場合は、r(正規表現)の形式で記述しますが、メタ文字をエスケープする必要があることに注意して下さい。

変換する対象ノードを指定

サイトによっては、ページ全体ではなく、メインとなる記事のみを変換したいことがあります。

ヘッダーロゴの部分をスキップするのが面倒とか。

そういう場合は、オプションページのpath to convert targetの欄で、サイトごとの変換対象（へのjQueryPath）を設定することができます。

書式は

[URLパターン], [変換対象のjQueryPath]

の形式です。

[jQueryPath]の部分については、複数指定することもできます。

複数指定した場合は、最初に見つかったものが変換対象になります。

もし見つからなければ、ページ全体が変換されます。

以下はサンプルです。

# yahooニュースは、#mainを対象に変換する
news.yahoo.co.jp, #main

# URL部分は正規表現でもOK
r([a-z]\.yahoo\.co\.jp), #main

# www.example.comでは、まず.mainを探して、なければ.entryを探す
www.example.com, .main, .entry

記述したら、忘れずに「SavePathList」というボタンで保存して下さい。

最後に

自動変換するサイトを指定しておくと、いちいち変換ボタンを押さなくても勝手にビューアーが起動するので、ウェブ上の連載作品を読むのがとても楽になりました。

CSSとDOMの境界、あるいはリスト組版がテーブル組版の親戚である件について

http://tb.antiscroll.com/static/nehan-demo#list

このデモですけど、ブラウザの大きさを変えると、リフローすることに気付いた人はいるでしょうか。

こういうデモで、テーブル組版や回り込み処理を見せると「おお」となる人が多いんですけど、リスト組版を見せても「で？」という人が多いと思います。

しかし、一見すると単純に見えるリスト組版ですが、実はテーブルの組版とよく似た複雑な組版なのです。

並列組版

nehan.jsでは、list-style-position:outsideかつdisplay:list-itemな要素と、display:table-rowな要素は、どちらもParallelGenerator（並列組版）のサブクラスで実装されています。

並列組版とは、複数の組版要素を同時並行的に行う組版です。

特徴としては、複数の子要素が矛盾なく表示されるための「前計算」を必要とするケースが多い、というのがあります。

例えばテーブルなら、各セルのサイズをどう割り当てるのか、事前に何らかの計算が必要なのは、なんとなく想像がつくと思います。

でもリストはどうでしょうか？

「リストなんて、単にテキストの先頭にリストマークの添字を足すだけじゃないの？」と思う人もいるかもしれません。

この指摘は、list-style-position:insideなら、まあそのとおりなのです。

しかしlist-style-position:outsideのときは、様相が異なります。

まずはUL>LIが書かれたHTMLを、適当なブラウザで表示させみてください。

<ul style="list-style-position:outside">
  <li>日本国民は、正当に選挙された（以下略）</li>
</ul>

CSSとDOMの境界

さて、表示されたリストですが、各リスト・アイテムの「リストマーク」は、マウス等ではテキスト選択できません。

つまり、このリストマークは、ユーザーがDOM操作では触れない組版要素になっています。

これが「CSSとDOMの境界」です。

これだけじゃありません。

list-style-positon:outsideのときは、リストの要素が一行を溢れても、リストマークの横幅だけ常に内容がインデントされています。

つまり空白の一列が割り込んでいるわけです。

この空白も、liマークアップに対するmarginやpaddingで実現されているわけではないので、CSSとDOMの境界と言えます。

正確にリストを組版するためには、これらの境界要素に関するサイズ配分を事前に計算する必要があるわけです。

で、こういう性質を知っていると、例えばブラウザにとってどんなリストが意地悪なのかが、なんとなく予想できます。

意地悪な組版

例えばOL>LI*1000なマークアップで、それぞれのリストを1em, 2em, 3emの文字サイズで順に表示させてみましょう。

<style type="text/css">
ol{ list-style-position:outside; }
.hoge{ font-size:1em }
.hige{ font-size:2em }
.hage{ font-size:3em }
</style>

<ol>
  <li class="hoge">hoge</li>
  <li class="hige">hige</li>
  <li class="hage">hage</li>
  <!-- 以下1000行まで続く -->
</ol>

どうしてこれが意地悪なのかというと、このリストを正しく表示するためには、1000行の添字が使うであろう数字文字列の最大幅を事前に計算する必要があるからです。

じゃないと、適切なインデントを実現できませんよね。

しかしchrome/firefox/safariにこれを表示させると、いずれも桁数が大きくなったところで、以下のようにリストの添字部分が「画面の左側」に見切れてしまいます。

body{margin-left:3em}みたいな設定をしていたってダメです。左の限界を突破して表示が切れます。

もちろん普通に考えると、li要素にそれぞれ違う文字サイズを付与することなんて考えにくいことなので、実用上は問題ないのです。

ただ正確に扱おうとするなら、リスト要素もテーブル組版と同じく、先に必要領域を計算する必要のある重い組版に該当するわけです。

この1000行のリストが、現状のブラウザで瞬時に表示されるのは、単に各ブラウザが厳密な計算をサボっているだけで、組版処理そのものが単純だからではありません。

というわけで、リストの組版も（テーブル組版ほどではないですが）、なかなかに複雑な処理なのです、というお話しでした。

nehan.js version5.4.0のリリース

nehan.js 5.4.0をリリースしました。

github.com

このバージョンから新しく追加された機能や、5.3.x系から消えた機能などがいくつかあるので、ご注意下さい。

変更点

• Nehan.Documentが新たに定義されました。
• onPageコールバックがサポートされました。
• Nehan.setup, Nehan.createEngine, Nehan.PageStreamが廃止されました。

Nehan.Documentについて

Nehan.Documentは、paged media用のdocument環境を抽象化したクラスです。

こういう風に使います。

var doc = new Nehan.Document();
var target = document.querySelector("#target"); // 表示先

// 内容をセット
doc.setContent("<h1>hello, nehan.js!</h1>");

// ページサイズやスタイルをセット
doc.setStyle("body", {
  flow:"tb-rl", // or "lr-tb"
  width:600,
  height:400,
  fontSize:16
});

// 組版スタート
doc.render({
  // 各ページが完了する度に呼ばれる
  onPage:function(page, ctx){
    console.log("page:%o, pageNo:%d, percent:%d", page, page.pageNo, page.percent);
    page.element.style.marginBottom = "1em"; // ちょっと下にスペースを足しておく
    target.appendChild(page.element); // 組版結果を表示先に追加していく
  }
});

onPageコールバックについて

onPageコールバックを定義すると、ページ計算が都度DOMに変換しながらのパースになります。

なので、ページを遅延評価するonProgressコールバックを使う場合と比べると、全体のパーススピードは落ちるのですが、代わりにコードは簡略化されます。

これまでonProgress内でページオブジェクトを取得する場合、以下のようにする必要がありました。

doc.render({
  onProgress:function(tree, ctx){
    // この中でページが欲しい場合は、tree -> page する必要があった
    var page = ctx.getPage(tree.pageNo);
  }
});

onProgressに渡されるのはページではなく、ツリー（まだDOM化されていない中間オブジェクト）だからです。

しかし段組表示がしたい場合などは、即座にDOM変換された結果が欲しいわけですから、onPageが便利でしょう。

一方、ページ送りするビューアーを作る場合は、現在表示されていないページを変換する必要はないので、onProgressを使って遅延しておくと、全体のパーススピードが上がります。

Styleについて

作成した各Documentは、それぞれに独立したCSS環境を持ちます。

だからそれぞれを縦書きにしたり横書きにしたりできるのですが、全ドキュメントに共通のスタイルを定義したいときもあります。

そういう場合は、Nehan.seStyleを使ってください。

// 先にグローバルスタイルをセットしておく
Nehan.setStyle(".header", {
  margin:function(ctx){
    var em = ctx.style.getFontSize();
    var rem = ctx.style.getRootFont().size;
    return {
      before:Math.floor(2 * rem - 0.14285 * em),
      after:rem
    };
  }
});

// 縦書き組版環境
var vert_doc = new Nehan.Document()
  .setStyle("body", {flow:"tb-rl"})
  .setContent("<h1 class='header'>vert doc</h1>");

// 横書き組版環境
var hori_doc = new Nehan.Document()
  .setStyle("body", {flow:"lr-tb"})
  .setContent("<h1 class='header'>hori doc</h1>");

グローバルスタイルについては、各ドキュメントを作る「前に」セットしておく必要があることに注意してください。

nehan.jsでSemantic UIのようなヘッダースタイルを設定する

人気のCSSフレームワーク「Semantic-UI」ですが、ヘッダーの設定はこんな感じになっています。

.ui.header{
  margin: calc(2rem -  0.14285em) 0em 1rem;
}

各ヘッダー内での文字サイズ(em)と、bodyの文字サイズ(rem)を使って計算しています。

同じことをnehan.jsでやる場合は、こんな感じで設定します。

Nehan.setStyle(".ui.header", {
  margin:function(ctx){
    var em = ctx.style.getFontSize();
    var rem = ctx.style.getRootFont().size;
    return {
      before:Math.floor(2 * rem - 0.14285 * em),
      after:rem
    };
  }
});

Nehan Readerでも上記の設定でヘッダーをスタイリングしていますが、見出しの余白のバランスが良くなるだけで、けっこう全体の印象が変わるから不思議なものです。

「殿堂入り作品」を新設しました

本日より、ポイントが1000を超えた作品は、殿堂入り作品として表彰されるようになりました。

つまり殿堂入り作品は、月のポイント数にかかわらず、常に露出される形になります。

その代わり、月別ランキングからは除外されるようになりました。

ちなみに1000ポイントを条件にしたのは、ちょうどその辺りで一般投稿の殿堂入り作品の数が10になったからです。

問題点

現状、スマホのUIでは横幅が足りず、殿堂入り作品のタブが表示できていません。

なんとか画面に収めたいのですが、UIについては検討中です。

カルマ値に関する仕様を追加しました。

縦書き文庫では、作品を読めば読むほど「カルマ」という値が上昇するようになっていますが、このカルマに関する仕様を少し更新しました。

縦書き文庫ヘルプ - カルマについて

既存のルール（そのまま）

• カルマ100オーバーでプロフィールページから広告が消える
• カルマが高いと、ゲストユーザーによる読書であっても、作品に加算されるポイントの減少幅が小さくなる
• 作品がお気に入り登録されたとき、登録者のカルマの高さに応じて、作品の評判値が上がる

新しく追加されたルール

• お気に入り登録を利用できるのは、カルマ1以上のユーザーのみ
• コメントを投稿できるのは、カルマ10以上のユーザーのみ
• コメントにプラス評価を投稿できるのは、カルマ10以上のユーザーのみ
• コメントにマイナス評価を投稿できるのはは、カルマ100以上のユーザーのみ

ルール追加の経緯

今回の仕様追加のきっかけは、以下のブログでstack overflowの仕組みを知って「なるほど！」と思ったからです。

blog.jnito.com

縦書き文庫は今でこそログインユーザーしかコメントを許可していませんが、はるか昔は匿名でのコメントを許可していました。

たまに発言者が「anonymous」となっているコメントがありますが、その当時の名残です。

それが元でコメント欄やコメント評価が乱れ、それに凹んで退会するユーザーがチラホラ…という時期もあったのです。

しかしカルマ値で機能を解放するようにすれば、多少はコメントの質を良くする効果があるのではないかな、と思った次第です。

段落のリアルタイムプレビュー機能を追加しました

編集中の段落をリアルタイムでプレビューする機能を追加しました。

カーソルのある位置の段落だけがプレビューされるので、そこそこ高速です。

「字下げ」の誤変換は、キャプチャをとった後に気づきました。

しかし「それでも重い！」という方は、エディタの下部にある以下のチェックボックスで、有効と無効を切り替えることができます。

Firefoxでもversion41以降で縦書き字形が表示されるようになりました

昨日リリースされたFirefoxのversion41から縦書きの字形が出力できるようになりましたので、縦書き文庫とnehan.jsもこれに対応しました。

これまでFirefoxのときだけ、一部の文字を画像で代替表示する処理をしていたのですが、これからはそれらがちゃんとした縦書き字形で表示されます。

またFirefoxが対応したことにより、ほぼ全ての主要ブラウザ（の最新版）で、こうした文字画像が不要になりそうです。

サーバーの転送量も大幅に減るでしょうし、嬉しい限りです。

とはいえmobile safari(<= version 4)とか、IE10以下では未だに文字画像で表示するわけですが…今やこうしたブラウザからのアクセスは微々たるものです。

良い時代になりました。