いろいろいじって結構長い時間が無駄になったのでメモメモ。
リンクをクリックしたときに、ページ遷移せずに画面上に小窓が表示されるアレ(俗にLightbox風 というのでしょうか)。あれのHTMLコンテンツを表示できるバージョンとして、Fancyboxというものがあります。
一時情報は英語のみなので、日本語で解説を読みたい人は下を見るのが良いかも。
おんぷ村のニュースで、個別ページがある文章をこれで表示させようと思って昼間から色々いじっていたのですが、やめました。
やめた理由
というのもこれ、自分の扱い方の問題もあるかもしれませんが、スマートフォン上ですごく操作しづらい。
たぶん本来の使い方の通り、短い文章を表示したり、画像を表示するために使うのであればスマートフォンでも支障はないのでしょう。しかし、スクロールバーが出るような長めの文章を表示しようとすると結構操作がし辛くなってくる。
というのも、スマートフォンでは画面のスワイプでページをスクロールさせるわけですが、Fancyboxを表示中にFancybox以外の部分をスワイプしてしまうと、Fancyboxが画面上や下の方に隠れてしまい操作しづらくなるのです。
しかも、自分ではしっかりFancyboxの上をスワイプしたつもりでも、なかなかスワイプがあたらなくて操作しづらい(Android4.2のGalaxy Nexus上でいくつかページを試してみて確認。他の端末だと少しは感じが変わるのだろうか・・・？)。
と、いうわけで、今回は結局Fancyboxの利用を見送ることに。その前にAjaxをいろいろいじって独自で表示させようとした時間を含み、結構時間が無駄になってしまった。
PC版のみでのFancybox適用は・・・？
じゃあ、PCでサイトを見たときにのみFancyboxを使えば良かったのでは？
まあ、多分そうだと思います。PCでFancyboxを使ったサイトを見る限りでは全く問題なく使用できますし、ページの遷移がないぶん体感的には軽くなります。
ただ、スマートフォン画面とPC画面をスタイルシートの機能を使って切り替える、いわゆるレスポンシブWEBデザインを使用しているおんぷ村では、そういう細かい操作はできない*1。
そのため、おんぷ村ではそういうことは出来ないということになります。
結論
Fancyboxは、見た目ページの再読込を減らすので動作が軽く見えるところがあります。実際、ちゃんとした場所で使えばかなり効果的だと思います。
ただ、スマートフォンページでは使うべきでは無いな と。特に、縦にスクロールバーが出るようなものを表示させるべきではないな という結論になりました。
みなさんもサイトを作るときにはよく考えてから使いましょう と？
ちなみに、レスポンシブWEBデザインの無効化は・・・
ちなみに、レスポンシブWEBデザインをやめてスマートフォンとPCで別のページを表示するようには出来ないのか？と、考えてみたのですが、ここで重要な問題に気付く。
というのも、Windows8タブレットのスナップビューは、見た目横幅が狭いためスマートフォンビューが適切なのですが、スナップビューと非スナップビューの切り替えに再読込処理などが挟まらないためレスポンシブWEBデザイン以外での表示切り替えが出来ないのです。
しかも、Windows8.1からはスナップサイズが320px(詳細な値不明)固定からユーザーが任意に指定可能なようにに変更されたため、それぞれの画面サイズに最適な画面構成を提供するためには、レスポンシブWEBデザインしかない。
この辺は現状Windows8以前にデザインされたサイトが多いので軽視されがちではありますが、結構重要なことなんだろうなあと思います。少なくとも、Windows8でどんな状態でも見やすいサイトを作るなら、レスポンシブWEBデザインしかないんじゃないかなあ と。
他に良い方法があれば、知りたいものです。
*1:厳密にはページ表示時の横幅を見ればある程度の切り替えは出来そうですが、Windows8タブレットのスナップビューなどには対応出来ない(実はおんぷ村、Windows8のスナップビュー表示にも対応している)
