anti scroll

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

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

なんか気になってしまったので、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

jingoo v1.2.13 release

jingoo version 1.2.13 をリリースしました。

https://github.com/tategakibunko/jingoo/releases/tag/v1.2.13

前々から「UTF8モジュールのためにBatteriesは大きすぎる」という声が多かったので、それに応えてuutfというライブラリを採用したPull Requestを取り込みました。

https://github.com/dbuenzli/uutf

uutfはopamからじゃないとインストール出来ないのですが、事情があってopamを使えない人は、Makefileを付与したものを自分がforkしてるので、よかったら使って下さい。

https://github.com/tategakibunko/cmdliner

https://github.com/tategakibunko/uutf

ちなみにcmdlinerは、uutfの依存パッケージです。先にcmdlinerをインストールしてから、uutfをインストールして下さい。

どちらのパッケージも、srcディレクトリに入って、make; make installでいけますが、ポータビリティは考慮してないので、問題があるようならMakefileを編集して下さい。

NehanReaderで見開き表示をサポートしました

NehanReader(v2.4.3)より、設定から「見開きレイアウト」を選択できるようになりました。

Nehan Reader - Chrome ウェブストア

PCのディスプレイは横に長いので、横書きは見開きのほうが読みやすいかもしれません。

例えばWikipediaを見開きで表示すると、こんな風に。

f:id:convertical:20160403124812p:plain

青空文庫だとこんな感じ。

f:id:convertical:20160403124835p:plain

あんまり意味はありませんが、縦書きを見開きにすると、こんな感じ。

f:id:convertical:20160403124941p:plain

見開きレイアウトを有効にするには、上部のメニューバーにある「設定ボタン」を押して…

f:id:convertical:20160403125137p:plain

設定項目の中から「Two Page Spreads」を選択します。

f:id:convertical:20160403125229p:plain

ちなみにショートカットキーも用意されていて、

  • 1キーを押すとシングルページレイアウト
  • 2キーを押すと見開きレイアウト
  • vキーを押すと縦書き表示
  • hキーを押すと横書き表示

になります。

Nehan Reader 2.4.0をリリース

Nehan Reader2.4.0をリリースしました。

chrome.google.com

各種メニューをヘッダーにまとめることで、コンテンツ領域を広げました。

f:id:convertical:20160401175928p:plain

メニューは左から「表示設定」「目次」「しおり」「ヘルプ」です。

10秒でわかるpseudo-classとpseudo-elementの違い

pseudo-class

pseudo-classは、左側のセレクターに続けて「〜が」と読みます。

/* liが最初の子だった場合 */
li:first-child{
  margin-top:0;
}

「〜が」だから、左側がマッチする要素です(上の例ではli)。

pseudo-element

pseudo-elementは、左側のセレクターに続けて「〜の」と読みます。

/* liの先頭文字 */
li::first-letter{
  font-size:3em;
}

「〜の」だから、右側がマッチする要素です(上の例では::first-letter)。

まとめ

どちらもpseudoと付いていますが、全く性質の異なるものです。

しかし古い仕様ではコロンがどちらも1つで記述されていて(例えば:first-letterとか)、紛らわしいという問題がありました。

なので最新の仕様では

  • pseudo-classにつくコロンの数は1つ(:first-childとか:last-childとか)
  • pseudo-elementにつくコロンの数は2つ(::first-letterとか::beforeとか)

というのが、正式な文法となっています。

ただし古いCSSと互換性を保つために、大体のブラウザではコロン1つでも通るようになっています。

余談

ちなみにnehan.jsの場合、コロンの数は厳密に区別します。

つまり::first-letterとすべきところを:first-letterと書いてしまうと、単に「未定義のpseudo-class」と見なされてしまいます。

Nehan.setStyle(".foo:first-letter", {fontSize:"3em"}); // NG(未定義のpseudo-class)
Nehan.setStyle(".foo::first-letter", {fontSize:"3em"}); // OK!