anti scroll

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

トップ > nehan.js

Responsivook ver1.2.2をリリース

nehan.js responsivook

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

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

動作デモ

主な変更点

  • Windowsの場合に縦書きのベースラインがずれてしまっていた問題が修正されました。
  • ボットによるアクセスのときは組版せずに平文のまま表示するようにしました（SEO対策）。

関連記事

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

nehan.js 縦書き文庫

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

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

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

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

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

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

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

というわけで、少し強引なのですがnehan.jsのfunctional 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;
  }
});

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

// 動的に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タグを区切られたら効き目は無いわけですが…

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

縦書き文庫 nehan.js

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

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

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

ちなみに以下は自分の環境で計測した結果で、Safariが圧倒的に速かったです。

f:id:convertical:20170210133706p:plain

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

nehan.js

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

chrome.google.com

しかし！

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

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

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

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

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

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

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

nehan.js

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

Nehan Reader - Chrome ウェブストア

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

わかち書き用の設定

nehan.js

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を使っている人たちへ

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で段組をサポートしました

nehan.js responsivook

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

サンプルを見る

f:id:convertical:20160518213616p:plain

Responsivook version1.2.0のダウンロード

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

使い方

段組表示する場合はthemeにdangumiを指定します。

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

以下はサンプルです。

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