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

anti scroll

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

縦書き横書きの自動リサイズに対応したページ送りのビューアー「responsivook」

縦書き横書きの自動リサイズに対応したページ送りのビューアーを公開しました。

github.com

ブログやホームページに簡単に埋め込むことができます(たぶん)。

デモ

デモページを用意しました。

Responsivook demo

上のページで、ウインドウをリサイズしてみて下さい。

ビューアーの表示領域が自動で伸縮するのがわかると思います。

スマホページなどでも使いやすいのではないかと。

インストール

必要なソースをheadなどにインクルードします。

nehan.js および nehan.css が必要なので、先にダウンロードしておいて下さい。

nehan.jsdistフォルダ、nehan.csscssフォルダに入ってます。

<!-- stylesheet -->
<link rel="stylesheet" href="/path/to/nehan.css">
<link rel="stylesheet" href="/path/to/responsivook.css">

<!-- scripts -->
<script src="/path/to/nehan.js"></script>
<script src="/path/to/responsivook.js"></script>

使ってみる

例えばページ内の<div class='post-content'> 〜 </div> を縦書きページ送りのビューアーにしたいなら、</body>の直前あたりで、次のように呼び出します。

<script>
  document.addEventListener("DOMContentLoaded", function(event){
    Responsivook.start(".post-content", {
      flow:"tb-rl" // 横書きなら"lr-tb", 左縦書きなら"tb-lr"
    });
  });
</script>

カスタマイズ

以下、色々とカスタマイズのサンプルを紹介します。

文字サイズやページの高さを変更

Responsivook.start(".post-content", {
  flow:"tb-rl", // 縦書き
  fontSize:16, // 文字サイズ
  height:400  // ページの高さ
});

ただし、スマホタブレットを含む色々なデバイスで読まれることを想定するなら、ページサイズや文字サイズは何も設定しない(自動で計算させる)ほうが良いと思います。

ボタンの色とかラベルとか

たぶんこれが最も使われるオプションじゃないかなと思います。

ボタン色に指定できるのは、sea, dark-blue, red, rouge, dark, orange, sunflower, concrete です。

色の値を指定するのではなくて、用意されたテーマ名の中から選択する形になります。

Responsivook.start(".post-content", {
  flow:"tb-rl",
  
  // 左右のボタン色の設定
  // 有効な値:'sea', 'dark-blue', 'red', 'rouge', 'dark', 'orange', 'sunflower', 'concrete'
  leftColor:"darkblue",
  rightColor:"red",

  // 左右のボタンのラベル
  leftLabel:"ひだり!",
  rightLabel:"ミギー"
});

文字色、文字サイズ、フォントファミリ、背景色

文字色、背景色などは別途スタイルシートを使って設定しても構いませんが、文字サイズやフォントファミリは、ページ組版の計算に直結する大事な値なので、スタイルシートで設定することはできません。

Responsivook.start(".post-content", {
  flow:"tb-rl",
  fontSize:16,
  fontFamily"Meiryo",
  color:"#666", // 文字色
  backgroundColor:"#ccc"
});

上級者向けのカスタマイズ

以下は少し上級者向けのカスタマイズです。

ページ内のスタイル

オプションのstylesを使うと、セレクタ(下の場合.post-content)に紐付いたビューアーのページ内スタイルを、nehan.js形式で記述できます。

nehan.js形式のスタイルについては、縦書き文庫のヘルプでユーザースタイルの項などが参考になると思います。

Responsivook.start(".post-content", {
  flow:"tb-rl",
  // ページ内スタイル
  styles:{
    "h1.foo":{
      fontSize:"2em",
      margin:{before:"1em", after:"1em"}
    },
    ".important":{
      fontWeight:"bold",
      color:"red"
    }
  }
});

全ビューアーに共通のページ内スタイルを設定する

Responsivook.setStylesを使うと、画面上に存在する全ビューアーに共通するページ内スタイルを設定できます。

一つ前のやつは、マッチしたセレクタ(上の場合だと.post-content)にだけ有効なスタイルになりますが、こちらで指定すると、別のセレクタで起動したビューアーでも有効になります。

全てのビューアーで共通のスタイルを使うなら、こちらを使ったほうが効率的でしょう。

ただし、この関数は、Responsivook.start前に呼ぶ必要があることに注意して下さい。

// 先にセットしておく
Responsivook.setStyles({
  ".paragraph":{
    fontSize:"0.9em",
    margin:{after:"1.5em"}
  }
});

Responsivook.start(".post-content", {
  flow:"tb-rl"
});

表示完了後のコールバックとか

スマホなどでは、HTMLのBUTTONタグに対する反応が、300msほど遅くなることはよく知られていることです。

これはタッチとプッシュを区別するための意図的な仕様なのですが、ビューアーに関する限り、触ったらすぐに次ページへと進みたいものです。

というわけで、これを素早くさせるためには、表示完了後に呼ばれるonCompleteをフックして、クリックイベントをタッチイベントにする処理を埋め込むと良いでしょう。

下の処理では、fastclick.jsを利用しています。

Responsivook.start(".post-content", {
  flow:"tb-rl",
  onComplete:function(){
    FastClick.attach(document.body);
  }
});

圏点・傍点用の自前タグを定義

傍点タグをspanで打つのが面倒な人は、自前のタグを登録してしまいましょう。

以下のようにしておくと、sesameとか、dotという傍点のタグを定義できます。

Responsivook.setStyles({
  dot:{
    display:"inline",
    textEmphasisStyle:"filled dot"
  },
  sesame:{
    display:"inline",
    textEmphasisStyle:"filled sesame"
  }
});

Responsivook.start(".post-content", {
  flow:"tb-rl"
});

こうしておけば

ここに<sesame>ゴマ点</sesame>、ここに<dot>ドット</dot>

マークアップできます。

総括

responsivook.jsは、僅か200行ちょっとの軽量なスクリプトです。

依存ライブラリもnehan.jsだけなので、スマホサイトでも扱いやすいのではないでしょうか。