はじめに。
Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvector,などを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。
１回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7
JavaScript版のSwipe Engineのswipejsで画像のスライドショーを作ります。
swipejsの簡単な使い方は１回目「JavaScript版のSwipe Engine、swipejsを使う」を参照してください。
１ページに写真１枚を表示するスライドショー
画像を用意して表示するようにします。
今回は600x600の正方形の画像を５枚用意しました。
この画像を、それぞれ１ページに１枚表示させ、合計５ページのスライドショーが表示されるようにします
まずは、サンプルのswipeファイルはこちらです。
{
"dimension":[600,600],
"templates": {
"pages": {
"photo": {
"elements":[
{ "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
]
}
}
},
"title":"photo gallery",
"pages":[
{
"template":"photo",
"elements":[ {"id":"1"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./2.jpg"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./3.jpg"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./4.jpg"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./5.jpg"} ]
}
],
"type":"net.swipe.swipe"
}
解説していきます。
まず、Swipeが表示される領域の大きさをしています。今回は画像に合わせて600x600としてます。
ブラウザ上で600x600の大きさで表示されるのではなくSwipeが表示される領域全体を600x600と仮定して、画像の大きさや位置を調整します。
"dimension":[600,600],
次に、テンプレートを指定します。テンプレートは表示させるページのテンプレートです。ここではphotoという名前のページのテンプレートを定義して、そのテンプレートはidが"1"のelementを１つ持っています。このid "1"のelementにimgで表示する写真を指定していて、x,y, w,hで位置と大きさを指定しています。ここでは、x,yは０，つまり左上を基準にw,h縦横600と表示領域いっぱいに写真を表示させています。
"templates": {
"pages": {
"photo": {
"elements":[
{ "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
]
}
}
},
タイトルです。
"title":"photo gallery",
次に実際に表示させるページを定義します。
pagesはobjectのarrayで、それぞれ１ページづつ定義します。
１ページ目はphotoのテンプレートをそのまま表示させます。elementはidのみ指定します
"pages":[
{
"template":"photo",
"elements":[ {"id":"1"} ]
},
１ページ目以降は、写真を差し替えるので、imgのみを追加で指定しています。
こうするとphotoのテンプレートのid"1"のelementのimg要素だけを差し替えて表示させられます。x,y,w,hの位置、大きさの要素はそのまま引き継がれます。
{
"template":"photo",
"elements":[{"id":"1", "img": "./2.jpg"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./3.jpg"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./4.jpg"} ]
},
{
"template":"photo",
"elements":[{"id":"1", "img": "./5.jpg"} ]
}
],
swipeファイルの形式指定。おまじない。他にもnet.swipe.listがある。
"type":"net.swipe.swipe"
作成したサンプルはこちらにあります。
http://www.swipejs.net/sample2/sample1.html
swipeファイルはこちら。
http://www.swipejs.net/sample2/slideshow1.swipe
１ページに写真４枚を表示するスライドショー
次に同じ写真を使って、今度は１ページに４枚の画像を配置します。
画像を８枚用意して、４枚の写真が表示されるページを２ページ作ります。まずは完成品。
{
"dimension":[600,600],
"title":"photo gallery",
"templates": {
"pages": {
"photo": {
"elements":[
{"h":300,"x":0,"img":"./1.jpg","w":300,"y":0, "id": "1" },
{"h":300,"x":0,"img":"./2.jpg","w":300,"y":300, "id": "2" },
{"h":300,"x":300,"img":"./3.jpg","w":300,"y":0, "id": "3" },
{"h":300,"x":300,"img":"./4.jpg","w":300,"y":300, "id": "4" }
]
}
}
},
"pages":[
{
"template":"photo",
"elements":[
{"id": "1" },
{"id": "2" },
{"id": "3" },
{"id": "4" }
]
},
{
"template":"photo",
"elements":[
{"img":"./4.jpg", "id": "1" },
{"img":"./3.jpg", "id": "2" },
{"img":"./2.jpg", "id": "3" },
{"img":"./1.jpg", "id": "4" }
]
}
],
"type":"net.swipe.swipe"
}
解説していきます。
まずはテンプレート。photoのページテンプレートを１つ作成。各elementに写真を配置します。画像は画面の縦横サイズの半分の300x300の大きさにします。w,hをそれぞれ300に指定とします。それぞれの位置を重ならないようにタイル状に、x,yを、0か300の位置に指定して４枚配置します。idはそれぞれ1,2,3,4とてimgで各画像を指定します。
"templates": {
"pages": {
"photo": {
"elements":[
{"h":300,"x":0,"img":"./1.jpg","w":300,"y":0, "id": "1" },
{"h":300,"x":0,"img":"./2.jpg","w":300,"y":300, "id": "2" },
{"h":300,"x":300,"img":"./3.jpg","w":300,"y":0, "id": "3" },
{"h":300,"x":300,"img":"./4.jpg","w":300,"y":300, "id": "4" }
]
}
}
},
ページです。１ページめは、photoのテンプレートをそのまま表示させます。
"pages":[
{
"template":"photo",
"elements":[
{"id": "1" },
{"id": "2" },
{"id": "3" },
{"id": "4" }
]
},
2ページめは、photoのテンプレートの各画像を差し替えます。各elementのidを１ページと同様に指定して、imgを変更します。
{
"template":"photo",
"elements":[
{"img":"./4.jpg", "id": "1" },
{"img":"./3.jpg", "id": "2" },
{"img":"./2.jpg", "id": "3" },
{"img":"./1.jpg", "id": "4" }
]
}
],
"type":"net.swipe.swipe"
}
完成したサンプルはこちらにあります。
http://www.swipejs.net/sample2/sample2.html
今回作成したswipeファイルはこちら。
http://www.swipejs.net/sample2/slideshow2.swipe
htmlとswipeファイルをダウンロードして、画像を差し替えればすぐに試すことができます。まずはサンプルをいじって遊んでみてください。