スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeウェブプログラミング > SwipeView:スマートフォンやタブレットでタッチコントロールを使ったモバイルギャラリー

SwipeView:スマートフォンやタブレットでタッチコントロールを使ったモバイルギャラリー

投稿日:2013年6月14日   レベル:-   ソフトウェア:DreamWeaver

このチュートリアルではSwipeViewの作成方法について紹介します。


Step1:はじめに

JavaScriptとギャラリーと言うと何を連想するでしょうか?
私が思い浮かべるのは過剰という単語です。
新しいプロジェクトが人を感動させるというのは簡単なことではありませんが、SwipeViewはそれをやってのけます。
SwipeViewはタッチコントロールをサポートしているので、タブレットやスマートフォンのようなモバイルデバイスに使用するのに最適です。
なぜなら、スワイプすることによってギャラリーを閲覧できるからです。
モバイルではないデバイスではマウスの動きでスワイプ動作を真似します。
このプロジェクトではクラシックなナビゲーションの概念まで取り入れています。


Step2:SwipeViewのギャラリーの例

SwipeViewのギャラリーの例





Step3:SwipeViewの説明

SwipeViewはjQuery や MooTools といった通常使用されるフレームワークには依存せず、スタンドアローンで機能するスクリプトです。
残念ながら、組み込みは少し一般的なやり方ではありません。
スクリプトを埋め込むだけでは不十分で、追加のJavaScriptを記述しなくてはなりません。
SwipeViewを機能させるにはこれが必要なのです。
コンテンツもJavaScriptで定義されます。

最後の点も少し変わっています。
ギャラリーの内容をHTMLで定義するのではなく、JavaScriptで定義するのです。
複雑な訳でも難しい訳でもありませんが、ただ通常用いられる方法ではないと言うことです。

ここではマウスオーバーした際に要素を指定する:hoverセレクタを使って、リンクを指定し、:afterセレクタで選択した要素の後にコンテンツを挿入します。
背景色には黒を80%の不透明度で設定し、RGBAのカラーコードをサポートしていないブラウザ用にはダークグレーの背景色を用意しました。

わずかに丸みがかった角はborder-radiusの特性を使用し、テキストの色は白にしました。
最後に、ツールチップボックスをリンクの左に合わせ、少しpaddingを加えました。


Step4:JavaScriptによって制御されるナビゲーションと写真のマークアップ

ギャラリーのHTML部分は明快です。
一つのコンテナがあって、JavaScriptによって内容が埋められます。
そして、ギャラリーのナビゲーションを可能にするリストがあります。

<div id="inhalt"></div>
<ul id="nav">
<li id="prev" onclick="gallery.prev()">-</li>
<li onclick="gallery.goToPage(0)"></li>
<li onclick="gallery.goToPage(1)"></li>
<li onclick="gallery.goToPage(2)"></li>
<li onclick="gallery.goToPage(3)"></li>
<li id="next" onclick="gallery.next()">+</li>

サイトのhead部分にSwipeViewのライブラリを埋め込むことに加えて、bodyセクションのHTML要素のすぐ後にJavaScriptスニペットを組み込む必要があります。
こうすることにより、タッチコントロールを可能にするtouchmoveというevent listenerが呼び出され、ギャラリーのオブジェクトが定義されます。

document.addEventListener("touchmove", function (e)
{ e.preventDefault(); }, false);
var gallery, el, i, page, dots = document.querySelectorAll('#nav li'),slides = [
{
img: "pic1.jpg",
width: 300,
height: 200,
desc: "description"
},
... ];
gallery = new SwipeView('#content', { numberOfPages: slides.length });

slidesという配列を使って、ギャラリーの全ての写真をリストアップします。
次に、HTMLを使って、コンテンツをアウトプットします。
createElement() という関数により、写真のプレゼンテーションに必要なHTML要素を作成します。
レイアウトはCSSによってコントロールします。

もしあなたが面倒臭がりなタイプであれば、SwipeViewのページにあるサンプルのソースコードをご確認ください。
HTMLを完成させれば、ギャラリーの準備はOKです。


Step5:最後に

SwipeViewは便利です。主な難点はあれこれと手動で定義をしないといけない点です。
個別のコーディングも避けられません。
一方で、そのためにSwipeViewはとてもフレキシブルです。
SwipeViewは、iPhonesはversion 4、iPadはversion 3.2、そして Android は2.3 以上で動作します。
もちろん、デスクトップのモダンブラウザもサポートされています。


引用:Web Design Library  著者:smashingmagazine.com 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング