横スクロールをお手軽に実現

hayakawa 曰く、

ASCII.jpの記事によると、縦スクロールではなく横スクロールなページを簡単に作成可能なJavaScriptライブラリである、「bookreader.js」なるものが公開されているようです。

このような動きをするものとしてはFlashを使用したものがあるかと思いますが、なかなか簡単に作るとは言い難いと思います。その点このライブラリを使用すると、既存のWebサイトにも簡単に導入可能なようです。 HTMLヘッダ部分にJavaScript読み込み処理を記述し、本文全体をDIVタグで加工だけでOKという手軽さのため、既存のWebサイトに対しても大幅な変更なく導入可能となっているようです。現時点では「ライセンスを検討中（APL2が有力）」といった状態なためフリーソフトウェア／オープンソースソフトウェアとは違いますが、使用自体は無料で可能なようです。

あまり長いと表示されるまで時間がかかったり、非力なマシンではフリーズしてしまったかのように見えてしまうようですが、ちょっと長めのテキスト（マニュアルやオリジナルのポエムなど）を扱っているサイトで使ってみるのもおもしろいかもしれません。

あとは

[Anonymous Coward]

袋綴じができれば（違

結構見やすい

[tondeke (29053)]

公開先の『テキストを予め複数の「ページ」に分けておき』という説明が気になったのですが（そうなるとHTMLの概念と反しますよね？）、特に１ページごとに分割しなくともきちんと続けて表示されるようです。

レイアウト的には、思った以上に読みやすく感じます。使いどころを探したくなるような面白い仕掛けだと思いました。

見やすいが・・・

[Anonymous Coward]

致命的な欠点が一つ。
テキストを選択できない。これ、なんてコピペ禁止？

自分は読んでいる箇所をドラッグして反転させながら読むので、こういうやり方をされると自分の読んでいる箇所を見失いがち。

これを何とかしてもらえると、ほどほど良いのですが。

#テキストレイアウト幅を狭くすれば同じぐらい読みやすいのではないかと思ったのは秘密。

Re:見やすいが・・・

[genzin (23225)]

IE7@Vistaでは問題なく選択できますね。環境依存では？

先頭ページのバウンド

[Anonymous Coward]

先頭または最後のページでさらに存在しないページの方へ移動しようとすると、
iPod touch みたいなバウンド動作が入っています。
これはこれで楽しいんですが、先頭では移動する方向が逆のような気がしてなりません…。

正誤表

[hasbay (7390)]

×事態
○自体

Re:

[hylom (27448)]

すいません、修正しました。

Re:

[Anonymous Coward]

別ストーリーでもオフトピバンバン付いてるけど、梨の礫の編集者よりはずっとありがたいので
これからも続けてください、カルマ減っちゃうけど

編集日記とかの方が良いかな？

wikipediaで使いたい

[yukichi (12361)]

h2あたりで強制改行するようにすれば、そこそこ読みやすくなるかも。画像があった場合の処理とか、どうなるかわかんないけど。

ただ、フォントが大きいと、横幅が足りなくて、文字が欠ける...。作者さんに伝えた方がいいのですかね。

面白いけども

[Anonymous Coward]

縦スクロールでも表示効果で視線移動が発生しないようにすればいい話だよね

Re:面白いけども

[Anonymous Coward]

でも、というか
縦スクロールでは発生しなかった視線移動が、横スクロールでは発生してるんですが……

縦スクロールの場合には
・行内の文章を追う横移動
・次の行へと移る縦移動
の2つがありますが、スクロールによって次行は「目が見ている位置」に来るので
縦移動は発生しませんし、また行内の文章も特に大きくは視線を移さなくても読めます
人間の目は横に並んでいるので、横方向の視野は広いですもの

一方この横スクロールの場合には
・行内の文章を追う横移動
・次の行へと移る縦移動
のうち、行内の文章は一目で読めますが
次行へは視線を移動させなければなりません
また、ページが移るたびに行の位置がトップからボトムへと移動するため
視線を大きくジグザグに移動させなければなりません

……もしかして、普段から視線を移動している人の方が多いのでしょうか？
私の場合は、私が見ている(物理的な)モニタの位置はほぼ一定ですが
モニタの上から下まで舐めるように読み、一画面分スクロールさせてまた上から下まで読む
という(本と同じ)読み方をしている人にとっては、同じような動きをするので読みやすいのかもしれません

ついでに縦書きにも対応してほしい

[Anonymous Coward]

巻物のように読めると小説なんかも読みやすくなると思うけどなあ。

Re:

[Anonymous Coward]

縦書きは、CSSで対応済みだから特に設定不要じゃないですかね。

…縦書きのサイトってまず見ないですけど。
フォントデザイン(文字間とセンター位置)の問題で、大抵は読みやすいものでも無いです。
例 [dinf.ne.jp]

小説とか、読みやすそうなのは同意。
ページ切り替えで画面遷移しちゃうより、ストレス無く閲覧できそうです。

ただ、ページビューが稼げないので、広告収入得るには不向きですね。
ニュースサイトなどに普及して欲しい方式なんですけど、望み薄ですかね。

Re:

[Anonymous Coward]

すみません。「例」のサイトなんですけど普通に横書きで表示されてしまうのですが。

Firefox2で表示関係のアドオンはなし。
JavaScriptは許可にしたのですが(cssだから関係ないとは思いますが)。

ついでにテスト。
・Firefoxで純正エンジンだと横書き表示
・IE6だとS-JIS扱いで真っ白に。文字エンコーディングをEUCに指定しなおすと縦書き表示OK。
・FirefoxでIEエンジンにすると真っ白。文字エンコーディングをEUCにしても変わらず真っ白。
・Operaも横書き
IE専用cssなんでしょうか？

Re:ついでに縦書きにも対応してほしい

[Anonymous Coward]

writing-mode:tb-rl [htmq.com]つかってるみたいなんで、"Internet Explorerの独自拡張"ですね

Re:ついでに縦書きにも対応してほしい

[deleted user (29334)]

http://d.hatena.ne.jp/momdo/20071118/p1 [hatena.ne.jp]
CSS3に取り入れられる予定ではあります。
しかし、ようやく最近リリースされたブラウザでCSS2（not 2.1）が揃いつつある状況なので、
首を長くして待つしかありません。

＃せっかく実装されはじめたtext-shadowとかはどうなってしまうの？

--
=-=-= The Inelegance（無粋な人） =-=-=

Re:ついでに縦書きにも対応してほしい

[emk (30939)]

ようやく最近リリースされたブラウザでCSS2（not 2.1）が揃いつつある状況なので、

サポートが進んているのはCSS 2.1 (not 2)です。CSS 2.1ではCSS 2からいくつか非互換変更 [w3.org]がありましたが、最近のブラウザが実装しようとしているのは変更後の仕様のほうです(というか現実のブラウザの動作に合わせて仕様が変更されたのですが)。

＃せっかく実装されはじめたtext-shadowとかはどうなってしまうの？

writing-modeと同様、CSS 3 [w3.org]の先行実装ということで何も問題ありません。

8年以上も放置されていた [mozilla.org]text-shadowの実装が急速に進んだのは、明らかにAcid3のおかげですね。

Re:

[Anonymous Coward]

scroll:【名】巻物｛まきもの｝

ん？

Re:

[Anonymous Coward]

海外の巻物は横書き縦スクロールですな

イメージとしては羊皮紙に書いた伝令とか

必要性が理解できない

[Anonymous Coward]

こういう既存のインターフェースを無闇に否定して、「俺様が考えたインターフェースは見易いだろう」的な価値観の押し売りをするのはやめてもらいたい。
この横スクロールも、自分には特に読み易いとは思えなかったうえに、マウスホイールでのスクロールが使えなくなってたりとか、ある意味嫌がらせに近い。

# でも、JavaScriptを切れば(概ね)普通のページになるのは良いつくりだと思った。

Re:なぜムキになって否定するが理解できない

[Anonymous Coward]

こういう新しいインタフェースを無闇に否定して、「既存のインタフェースの方が見やすいだろう」的な価値観の押し売りをするのはやめてもらいたい。

こういうのを有効に使える表現が何かあるだろうとか、想像力が働かないんでしょうかね？

Re:

[Anonymous Coward]

>こういうのを有効に使える表現が何かあるだろうとか、想像力が働かないんでしょうかね？

先に示すのが筋だろう

Re:

[Anonymous Coward]

絵本的表現。
特に見開きページ

Re:

[Anonymous Coward]

全然筋じゃありませんが。
無暗に噛みつく姿勢を批判されてるだけですよ、あなた。

Re:

[Anonymous Coward]

新しいものが出てくると古いものが否定された気になって攻撃的になる人って、結構いますね。
＃必ずその新しいものも有用というわけではないですが。
まだ具体的なビジョンを持って否定するならともかく、「ダメじゃない証拠を示さないならダメだ！」って、自分がしている否定の根拠までも人任せでは……

Re:

[Anonymous Coward]

否定している人は「マウスホイールでのスクロールが使えなく」と具体的な根拠のひとつを挙げていますので、単に「ダメじゃない証拠を示さないならダメ」ってだけではなさそうです。

ちなみに僕は現状では肯定も否定もできないのですが、ホイールなし2ボタンマウスがほとんど見られなくなった現状のように、横スクロール対応ホイールを搭載したマウスが今度普及したら面白い展開になりそうな気もしますね。

Re:

[Anonymous Coward]

> こういうのを有効に使える表現が何かあるだろうとか、

それを本末転倒と考えるヒトの気持ちには共感できる。

まぁ、余計な心配しなくても、
奇を衒った表現は非常に限定された場所でしか使われないけど、

Re:

[Anonymous Coward]

だってそもそも新しくも何ともない [usability.gr.jp]し。下手の考え休むに似たり。

Re:必要性が理解できない

[syn (673)]

情報を横方向に並べる＋ページ切り替えってのは、昔からわりと普通にあるインタフェースじゃないかなぁ。
HTML+JavaScriptで実装しましたよってところが新しいだけで。

Re:

[Anonymous Coward]

>HTML+JavaScriptで実装しましたよってところが新しいだけで。

動きでいえば、コンテンツをスライド表示するjavascript「glider.js」 [skuare.net]とか、まんまかと。
そもそも、スライド的動きとかのエフェクトってのは比較的容易なもので、
最近のjsフレームワークで実現されているそれを使えば苦労なく実装できる。
基本的に、画像でおこなってる事 [coliss.com]をブロック要素に対応させればいい。
１ページのコンテンツを分割表示するアイデアとなると、これ [kanzaki.com]や

Re:

[Anonymous Coward]

少なくとも#1365135の人はこのタレコミを読んで「使いにくい新技術が登場した」と思った訳ですから、「知らない人にそれを知らせる」という価値はあったんじゃないですか。

Re:

[Anonymous Coward]

価値観の押し売りとか嫌がらせって、利用を強制でもされたんでしょうか？

見なければいいだけじゃないの？

Re:

[Anonymous Coward]

別に"既存のインターフェースを無闇に否定して"るわけじゃなくないですか？自由に選択できるツールが増えただけで。
アレゲに冗長性は大事ですよ。
ほら、このコメントも↑

Re:

[Anonymous Coward]

ギークたるもの役に立とうが立つまいがとりあえず実装してみるものじゃないですか＾＾
そのうち淘汰されて落ち着くところに落ち着くものですし。
Win95が登場したときにも誰もがトレイアイコンに手を出したおかげで一時はひどいことになったものです。

Javascriptでゲーム作る人には

[Anonymous Coward]

ラスタースクロールとか・・・

#言ってみたかっただけなのでAC