2011.01.11
Webの長文を横スクロールに：memo
昔のPostを発掘中。
「見づらいのなら横スクロールさせればイイじゃない」とばかりに、Webの長文を横スクロールさせて表示出来るJavaScriptライブラリをつくってくださった方が。
もう、このサイトを見て一発で分かるように、右から左にページを捲るような感覚で長文を読むことが出来ます。
横書きの本の読感に近いです。かなりスムーズに捲ることが出来ます。
■bookreader.jsの文章量も割と多いですが、小説を読んでみると、より、通常の表示方法よりも読みやすい感覚があります。
■青空文庫ゲートウェイ 走れメロス
著作権の切れた名作をWebで読める青空文庫ですが、通常の表示はこれ。
■太宰治 走れメロス
かなり読感は違います。
というわけで、ちょっと面白いかなぁ、と思って、試しにうちでも設置してみました。
設置はとても簡単で、以下のようにすると出来ます。
１．bookreader.jsから、ライブラリをダウンロードします。
ダウンロードしたアーカイブファイル（所謂圧縮ファイルの事です）を解凍するとフォルダと、ファイルが出てきますが、必要なのは、『library』のフォルダ一式です。
２．『library』のフォルダ一式を、Webサイトにアップロード
ライブラリをＷｅｂサイトにアップロードします。
とりあえず、ここでは、Ｗｅｂサイトのルート（うちのサイトで言うなら、http://www.cerisier.jp/でアクセスしたときに表示される、トップページのファイルがあるサーバー上のディレクトリ）とします。
３．ライブラリの読み込み処理を追記します
ライブラリを使いたいページのＨＴＭＬの<head>～</head>の間に、以下の呼び出し文を書き加えます。
<script type=”text/javascript” src=”library/prototype/prototype.js”></script>
<script type=”text/javascript” src=”library/scriptaculous/effects.js”></script>
<script type=”text/javascript” src=”library/cookiemanager/cookiemanager.js”></script>
<script type=”text/javascript” src=”library/bookreader/bookreader.js?theme=default”></script>
WordPressの場合は、テーマのheader.php等の該当の場所に以下のように書くのがいいかもしれません。
<script type=”text/javascript” src=”<?php bloginfo(‘home’); ?>library/prototype/prototype.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘home’); ?>library/scriptaculous/effects.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘home’); ?>library/cookiemanager/cookiemanager.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘home’); ?>library/bookreader/bookreader.js?theme=default”></script>
テーマがオリジナルなら、テーマに纏めてしまうほうが、楽かも知れませんがそれは割愛。
４．横スクロールさせるパートを<div>でくくります。
あとは、横スクロールさせたい場所を、
<div id=”bookreader”>
(文章とか)
</div>
でくくります。既に、idが指定されている場合などは、
<div id=”sample bookreader”>
(文章とか)
</div>
のように、半角スペースを当てて追加すれば大丈夫です。
（但し、古いブラウザだとちゃんと読み込んでくれないことがあるかも知れません）
５．３と４をアップロード。
あとは、組み込んだファイルをアップロードすればOK。
Trackback URL
Trackback
Comment
Comment feed
Comment
ZenBack