読者です 読者をやめる 読者になる 読者になる

anti scroll

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

Responsivook ver1.2.2をリリース

nehan.js responsivook

Responsivook ver1.2.2をリリースしました。

Responsivookはnehan.jsを使って、縦書き横書きのページ送り、段組み、レスポンシブレイアウトなどを実現するjavascriptライブラリです。

動作デモ

主な変更点

  • Windowsの場合、fontFamilymonospaceを指定しないと、縦書きのベースラインがずれてしまっていた問題が修正されました。
  • クライアントがボットのときは、変換せずに平文のまま返すようにしました(SEO対策)。

関連記事

nehan.jsのfunctional styleでタグの内容に動的な制限をつける

nehan.js 縦書き文庫

縦書き文庫では比較的自由にHTMLタグを使用できるのですが、たまにエディターの文字サイズ変更ボタンをテキスト全体に反映させてしまう人がいます。

例えばこういう感じです。

<span class='larger'>
(作品全体のテキスト)
</span>

これの何が困るのかというと、ユーザーが「表示設定」で変更できるはずのフォントサイズが、内側のspanに邪魔されて変更できなくなくなってしまうことです。

縦書き文庫では、ユーザーの表示環境やパソコンの解像度はそれぞれ異なることを踏まえ、それぞれの環境にあわせてビューアーのサイズや文字サイズが変わるようになっています。

その上で、各種サイズは各自が自分好みに設定できるようにしているので、その特徴を破壊するようなマークアップは、あまり望ましくありません。

よって注意事項でも、そういうマークアップを禁止行為であると明記しているのですが、こういう規則って読む人が少ないので、あんまり周知されていないというのが実情です。

というわけで、少し強引なのですがnehan.jsfunctional styleを使って、良くない装飾タグの使い方には、動的な警告を出すようにしてみました。

例えば、部分的なテキストの装飾に使われるspanタグなら、contentを以下のように設定します。

Nehan.setStyle("span", {
  content:function(ctx){
    var limit = 100; // 制限字数
    var cont = ctx.getMarkup().getContent();
    return (cont.length > limit)? "error:too long!!" : cont;
  }
});  

やってることは、spanタグの中身が制限字数を超えていたら、内容をエラーメッセージに置き換える、というだけのことです。

色々なタグにまとめて長さ制限を付けたいときは、こんな感じでしょうか。

// 動的にcontent制限するstyle valueを作成する関数
var content_with_limit = function(limit){
  return function(ctx){
     var cont = ctx.getMarkup().getContent();
     return (cont.length > limit)? "error:too long!!" : cont;
  };
};

// 長さ制限を付けるタグ一覧
var LIMIT_LENGTH = {
  b:100,
  em:30,
  span:50,
  strong:100
};

Object.keys(LIMIT_LENGTH).forEach(function(tag_name){
  var limit = LIMIT_LENGTH[tag_name];
  
  Nehan.setStyles(tag_name, {
    content:content_with_limit(limit)
  });
});

もちろん細切れにspanタグを区切られたら効き目は無いわけですが…問題となるマークアップをする人たちは、特定スタイルのspanで全文を囲ったりするケースがほとんどです。

そうすると、プレビューでエラーメッセージが出るはずなので、その時点で「あ、駄目なんだ」ってなるような気がしています。

縦書き文庫の組版スピードを計測するページを公開しました

縦書き文庫 nehan.js

縦書き文庫の組版スピードを計測するページを公開しました。

縦書き文庫 - 組版スピードテスト

ハイスコアも計測されますので、ご自身のブラウザのスピードを試してみたい方は使ってみてください。

ちなみに以下は自分の環境(Mac)で計測した結果で、Safariが圧倒的に速いという結果でした。

f:id:convertical:20170210133706p:plain

青空文庫の色々な作品をシリーズにまとめました

縦書き文庫

縦書き文庫の青空文庫作品は、作者別には検索できますが、シリーズごとには揃っていない状態でした。

そこで完結済みのものをいくつか選んでまとめてみました。

それぞれ人気のある作品なのですが、自分のお勧めは「夜明け前」です。

激動の幕末期を、武士の視点からではなく農民の視点から書いた作品です。

幕末の小説というと、とかく斬った斬られたという話しが多くなりがちなのですが、その背後で暮らしていた市井の人々の生活感はどういうものだったのか?

そういうことを知りたい人にはオススメの作品です。

Nehan Readerをスマホにも対応させました

nehan.js

NehanReaderをスマホにも対応させました。

chrome.google.com

しかし!

残念ながら(2017年2月現在)、AndroidiOSも共にChrome拡張はサポートされていないとのこと(リリース後に知りました…)。

スマホ版のChrome拡張機能に対応していない理由は、おそらくバッテリーだと思います。

Chromeの拡張には「バックグラウンドページ」を持って常駐するタイプのものが多くあります。

おそらくこれがバッテリーを食うので、対応していないのだと理解しています。

しかしNehan Readerの場合は「ブラウザーアクション」といって、ボタンをクリックするなどのユーザー操作がなければ起動しないタイプの拡張機能です(Chromeのタスクマネージャーでも表示されない)。

だから「動いてほしいなあ」というのが本音ですが、Chrome56から導入された機能が、拡張機能をモバイル版にも対応させるための布石であることを願うばかりです。

ランキング区分に「図書館」を追加

縦書き文庫

ランキングページの区分に「図書館」という項目を新設しました。

f:id:convertical:20170126144732p:plain

図書館」=「青空文庫」 + 「翻訳作品」

です。

著作権に問題のない公的な作品のランキングをまとめて確認できます。

Time-based renderer task throttling

プログラミング

Chrome ver56から導入されるようですが、ざっと読んだ感じだと、こういう動作らしいです。

  • バックグラウンドタブの処理に時間枠を設ける。
  • バックグラウンドタブの処理時間が時間枠を超えると、値が負になって(いったん)眠る。
  • ただし眠りっぱなしというわけではなく、1秒ごとに0.1secずつ復活する。

これによって、モバイル用ブラウザのバッテリー節約につながるとのこと。

Time-based renderer task throttling

一方、バックグラウンドでアレコレ(データを同期するとか、ストリームを読むとか)してるサイトは、軒並み影響されるだろうという意見もあります。

Chrome 56 Will Aggressively Throttle Background Tabs

ちなみに縦書き文庫に関しては、あんまり影響はなさそうです。

どうせ別タブで開かれたら再描画回数が抑えられるので、requestAnimationFrameがゆっくりとしか周りません。結果としてnehan.jsの組版も、ゆっくりとしか進まなくなります。

というわけで、この背景処理が仮にthrottlingで抑えられたところで、タブがアクティブじゃなきゃ、どのみち大したスピードは出ないわけで…これまでと同じですね。

数年前まではどのブラウザでも「おっきな作品を別タブで開いておいて、組版が終わるまで別サイトを眺めてる」なんて使い方ができたわけですが…

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

nehan.js

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

Nehan Reader - Chrome ウェブストア

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