Web2.0的にHTMLソースを隠す方法を修正しているときに思ったんだけど、
単純に小説とかのコピーブロックならCanvas使う手もあるよね。ってことでデモ書いてみた。
Canvas novel – jsdo.it – share JavaScript, HTML5 and CSS
Canvasのテキスト関係は図形とかの描画に比べると貧弱貧弱ゥ！な感じだから自分で処理書かないと何も出来ないのだが、Flash化や画像化に比べると格段に楽チンだと思う。
DOMや接続をモニタリングする解析ツールには弱いものの、素の状態でコピペが出来ないというのは強い。
考えられるデメリットは…
- ガラケーで見れない
- IEが9からしか対応してない（ライブラリとかで対応させる手間がある）
- スクロールとかページングとかの処理を実装するのが面倒
jsdo.itにうｐしたデモのロジック解説
- 小説テキストをXHRで読み込む
- ページ分割フラグ（–\d–）でsplitして配列作成。[0]のタイトルは除く
- 現在のページ番号と同じインデックスにある配列の中身をループ処理。
１文字ずつくっつけてmeasureTextでwidthを計測し、設定の横幅を超えたら次の行に移る。
空行の場合は行番号を繰り上げる。 - 次の行に移る前に文字カウント（i）を-1する
- ページ移動用の矢印出力
ページ移動用の矢印は矢印をクリックしてるかどうかの判定が面倒だから、普通に画像とかで作った方が楽かも。
やろうと思えばiPhoneのi文庫みたいなUIも出来そうな感じ。
縦書きはmeasureTextでheightが取得できないからフォントサイズから算出するしかないのだが、
句読点がarcとかで描けるっていう利点があるかな。