どんな要素でも全画面表示に出来る
Fullscreen APIというものがありま
して、主に動画で使われている事が
多いですが、今回はブログコンテン
ツのリーダビリティに貢献させる
目的で使って見ます。
動画コンテンツに主に使われている印象のAPIなので目にする機会が多くはありませんが、動画だけでなく、どんな要素にも使えますので、ブログやドキュメントなどのテキストコンテンツに使ってみたらリーダビリティの高い状態にユーザー側でスイッチできるので素敵かな、と思った次第です。
さっさとサンプル見せろ、という方は下にスクロールしてください。
Fullscreen API
W3Cでの仕様はまだEditors’ Draft状態ですけど、最近ちょくちょく使っているところを見かけるようになりました。
HTML5と同時に動きが若干活発化してる印象でしたので、少し触ってみました。このAPIの詳細はWWW WATCHさんで詳しく書かれていますのでご参照下さい。
ベーシックな使い方はWWW WATCHさんで書かれていますので、ここではjQueryを使った方法を書いていきます。
jQueryで使う
敢えてjQueryでAPIを使うメリットは感じませんが、人気のライブラリなので選択肢の一つとして。
jQuery-FullScreenというプラグインが公開されていますのでこれを使ってみます。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type='text/javascript' src='jquery.fullscreen.js'></script>
あとはセレクタを指定するだけ。
$('#fsButton').click(function(e){
$('.entry').fullScreen();
e.preventDefault();
});クリックイベントとして指定した要素を丸ごとフルスクリーン化させる。
$('全画面表示させたい箇所').fullScreen();↑こんな感じ。
動作サンプル
というわけで、ようやく動作サンプル。この記事をサンプル化してあります。
Chrome 15、Firefox 10とかでご覧下さい。
記事部分はclass=”entry”で、この部分だけ全画面表示されているのが確認出来たかと思います。
尚、プラグイン側でaddClass(‘fullScreen’)というclass名追加処理がされていますので、フルスクリーンモード時のレイアウトは
.entry.fullScreen{
width: 690px;
margin: 0 auto;
background:#fff;
font: 17px serif;
padding: 45px 45px 10px;
}こんな感じでスタイリングします。:fullscreenという擬似クラスでフルスクリーン時のスタイルに適応させられるそうななんですが、今回は試していません。
フルスクリーン化した部分
この部分だけをフルスクリーン表示出来るようにしました。レイアウトを維持しつつ、無駄を排除した・・・つもり。
このように場所を限定して全画面表示できますので、ユーザー側で余計な情報を排除したコンテンツを選択してもらえたりも出来ますね。
背景を変える
jquery.fullscreen.jsを開いて34行目あたりで背景色を指定しています。
var options = $.extend({
'background' : '#111',
'callback' : function(){}
}, props);ここを変更すれば画像化も可能です。
var options = $.extend({
'background' : 'url(BG.jpg)',
'callback' : function(){}
}, props);実装↓
ただ、なんの工夫も無く画像にすると、ユーザーが混乱しそうです。
こうしたリーダビリティ向上も一つの手じゃないかなー。ブログはよく、読みやすい、読みにくいなどの声を目にします。このブログも読みにくい類に入るんじゃないでしょうかね。
確かにブログは読んでもらうためのものではありますが、運営側には運営側の事情があって、わざと読みにくくしてるわけでは無いことが大半なんですが、ユーザーにとっては関係が無いとも思いますので、こうして選択肢を増やしてあげるのもお互いの幸せのためなのかな、とか思ったりもしました。実際どうなのかはわかりませんがｗ
以上、Fullscreen APIのレビューでした。
via:Tutorialzine