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

anti scroll

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

わかち書き用の設定

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

Responsivookの多段組テーマを使うと、はてなブログをこんな感じでレスポンシブな縦書きにできます。

日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたって自由のもたらす恵沢けいたくを確保し、政府の行為によって再び戦争の惨禍さんかが起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。

日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであって、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めている国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免れ、平和のうちに生存する権利をすることを確認する。

使い方

次のようにして使います。

Step1

はてなブログの管理画面から「デザイン編集」→「カスタマイズ」→「フッタ」と進み、以下のコードを貼り付けます。

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.2/css/nehan.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.0/responsivook.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.2/dist/nehan.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.0/responsivook.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event){
  Responsivook.start(".nehan-vert-dangumi", {
    theme:"dangumi",
    flow:"tb-rl"
  });
});
</script>

Step2

あとはブログの投稿時に、縦書きブログにしたい部分を以下のように囲むだけ。

<div class="nehan-vert-dangumi">
この記事を縦書きにしたい!
</div>

マークアップ

ルビや圏点ほか、さまざまな書式に対応しています。

詳しくはnehan.js demoを参照して下さい。

カスタマイズ

文字サイズ、表示の高さ、フォントを変えるには、上の貼り付けソースの中で、Responsivook.start...の部分を次のように書き換えます。

Responsivook.start(".nehan-vert-dangumi", {
  theme:"dangumi",
  flow:"tb-rl",
  fontSize:16, // 文字サイズ
  fontFamily:"Meiryo", // フォント  
  height:400,  // 表示の高さ
  // その他のスタイル
  styles:{
     body:{
        // 行末揃えを有効にする(ちょっと重くなる)
        textAlign:"justify" 
     }
   }
});

背景色を変えたい場合は、CSSで変更します。

/* 背景色を白にする */
.responsivook-nehan-wrap{
  background-color:#FFFFFF;
}
/* 変換前のテキストを見せない */
.nehan-vert-dangumi{
  visibility:hidden;
}

はてなブログCSSは「デザイン編集」→「カスタマイズ」→「デザインCSS」から編集できます。

古いバージョンの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で書かれたアプリケーションは動かないので、ご注意ください…

Responsivookで段組をサポートしました

nehan.js

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 ocaml

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で見開き表示をサポートしました

nehan.js

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.js

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

chrome.google.com

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

f:id:convertical:20160401175928p:plain

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

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

nehan.js programming css

pseudo-class

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

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

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

pseudo-element

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

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

「〜の」だから、左側のセレクタとは 別の element(上の例では::first-letterというelement)にマッチします。

まとめ

どちらも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!