bookreaderっぽいインタフェースのサイト

以前の「横スライドで項目が入れ替わるナビ」
をちょっといじって、bookreaderもどきのインタフェースのサイトを作ってみました。
bookreader.jsは一切使っていません。

bookreaderもどきコンテンツを見る。

Firefoxで制作チェックしたので、
もしかすると他のブラウザではバグがあるかもしれません。

前回の記事でデータを公開しなかったのは、
あまりに簡素な出来だった（まあ、今回のもひどく簡素ですが）のと、
大学での研究に利用するかもしれなかったからです。

が、ちょっと色々あって研究の方向性を変更したので、
調べたJavascriptさんたちも小休止といったところでしょうか。
ちょっともったいなかったのでここで公開してみることにしました。

bookreaderみたいに、みよんみよんいく動きが出来るのが理想なんですがね…。
ちょっと時間と脳みそが足りないので、今回はこの程度で。

いろんなエフェクトが実装できるjRails

http://coliss.com/様のアーカイブから見つけてきた、jRails。

jRails
http://ennerchi.com/projects/jrails

またまた本家が英語で申し訳ないんですが、
それほど新しいモノではないと思うので、知っている方も多いと思います。

jRailsはjQueryと一緒に使うライブラリで、
Prototype/script.aculo.us にも Railsというライブラリがあるらしく、
その jQuery版といったところらしいです。
（らしいばっかですみません･･･。）

この本家サイトの真ん中にある動作サムネイルがすごくかわいいんですよ！

Javascriptに関しては全くのかけだしなので、
いろんなライブラリがあって勉強になりますね。

---

2010/7/11追記
jRailsの本家デモがなくなってたので、簡易版を作ってみました。

横スライドで項目が入れ替わるナビゲーション

以前、 bookreaderの記事を書いてからすっかりあのインターフェースに惹かれてしまい、
研究もそっちのけで再現しようとがんばっています。
ついこの前までJavascriptが大嫌いで、全くいじろうともしなかった私がここまでのめりこむとは…。
人生何があるか分かりませんね。

今日は、2007年9月号のWebCreators（MDN）の
「スタイルシート＆Javascriptで表現するデザインパーツ62」の特集の、
64ページ「横スライドで項目が入れ替わるナビゲーション」を作成。

WebDesigning（マイコミ）は、かなり前に発行された書籍に関してもサンプルデータが残っていて、
書籍さえあればダウンロードできるようになっているのですが、
WebCreatorsはもう既に海の藻屑と化していたので、
打ち込み＆間違いなおしにとっても時間がかかりました。

64ページの例では、項目のスクロールをリンクボタンでおこなっていたのですが、
bookreaderのようにキーボードでスクロールするようにしたくて
改変に改変を重ねてようやく完成しました。
作例はとてもお見せできるモノではないのでここにはあげませんが…

詳しくはbookreaderっぽいインタフェースのサイト記事へ。

本日とても役に立ったサイト
クロスブラウザでのJavaScriptキーボードイベントの扱い方

Javascript関連リンク

最近Javascriptに関する勉強を始めたので、
便利な＆勉強になるサイトのまとめ。

jQueryリファレンス

jQueryのプロパティリスト。自分でjQueryを書くときに。

jQueryの基礎（All about）

jQuery基礎の基礎。

Javascriptの有無でCSSを振り分けることができそう

本来は、Netscape4代でCSSを適用させない方法を説明した記事。
これを使えば、Javascript無効の環境とのCSSの振り分けを行えるため、
違和感なく表示できるのではないかという仮説

iGoogle風のインターフェースを実現

iGoogleのような、メニューを閉じたり開いたり、メニューをドラッグ＆ドロップしたりできるインターフェースを実現できる。

Vista風の？インターフェース（英語）

Vista風のデザインなのかはよく分からないのだけれど、
リンク先のサイトでは右のメニュー部分がドラッグ＆ドロップで動かせるようになっていて、
ページ移動する際に、移動先のメインコンテンツ部分がフェードインで表示されるようになっています。

MacのDock風インターフェース（英語）

MacのDock（MacOSの画面下にある、みよんみよん拡大縮小するメニューのこと）風のメニューをWeb上で実現。

上記のDock風メニューをCSSだけで実現

Javascriptのようななめらかさはないが、実現はしている。
デフォルトの状態の画像がかなり荒く見えるのが気になる。

jQueryでつくる様々な効果（英語）

英語サイトではあるが、チュートリアルまでついていてとても詳しく説明されている。
実現している効果の例としては、伸縮メニュー、アニメーション、アコーディオンメニュー、hoverでフェードインするふきだしなど。

jQueryでつくるスライドインメニュー

サイト上のボタンを押すと、ブラウザの左側からメニューがスライドインして表示されます。

jQueryでつくるクロスフェード

jQueryを使って、写真をスライドショーのようにフェードイン･フェードアウトで見せる方法。

---

6月28日追記

モーショントゥイーン風Javascriptライブラリ

Flashのモーショントゥイーン風の動きを実現できるようです。

シンプルにドラッグ＆ドロップ可能なメニュー

本家サイトは英語です。

Javascriptでタブ切り替え

---

その他

ToggleとslideToggleの比較、jQueryとMootoolsの比較

Ajaxサイト スタイルクルーズ/イメージソース

Flashサイト Fotologue/アマナ

bookreaderとLigntbox

今日の朝にBookreader という本のようなインターフェースを実現するをJavascriptを発見し、 さっそく実装してみました。

本当はコンテンツ制作のほうで役立てるために始めたのですが、
決められたタグしか読み込めないなどの制約があるために
(書籍を読むために作られたライブラリなのですから当然ですね)
Webサイト制作に利用するのは難しいと判断し、
写真を日記風？に閲覧できるコンテンツを作ってみました。

画像にリンクを貼ることができない、画像とテキストを同一ページに配置できない(これは私の努力不足かもしれませんが…)などの制約があり、
ようやくできたのがこれ。
強引にLightboxを組み込んでみました。

やらなければならない課題もそっちのけ……。 ちょっと反省。