LoginSignup
4

More than 5 years have passed since last update.

swipejsで画像のスライドショーを作成する

Last updated at Posted at 2016-11-12

はじめに。

Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvector,などを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。

1回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7

JavaScript版のSwipe Engineのswipejsで画像のスライドショーを作ります。
swipejsの簡単な使い方は1回目「JavaScript版のSwipe Engine、swipejsを使う」を参照してください。

1ページに写真1枚を表示するスライドショー

画像を用意して表示するようにします。
今回は600x600の正方形の画像を5枚用意しました。
この画像を、それぞれ1ページに1枚表示させ、合計5ページのスライドショーが表示されるようにします

まずは、サンプルのswipeファイルはこちらです。

slideshow1.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を1つ持っています。このid "1"のelementにimgで表示する写真を指定していて、x,y, w,hで位置と大きさを指定しています。ここでは、x,yは0,つまり左上を基準に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で、それぞれ1ページづつ定義します。
1ページ目はphotoのテンプレートをそのまま表示させます。elementはidのみ指定します

    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
    },

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

1ページに写真4枚を表示するスライドショー

次に同じ写真を使って、今度は1ページに4枚の画像を配置します。
画像を8枚用意して、4枚の写真が表示されるページを2ページ作ります。まずは完成品。

slideshow2.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のページテンプレートを1つ作成。各elementに写真を配置します。画像は画面の縦横サイズの半分の300x300の大きさにします。w,hをそれぞれ300に指定とします。それぞれの位置を重ならないようにタイル状に、x,yを、0か300の位置に指定して4枚配置します。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" }
                ]
            }
        }
    },

ページです。1ページめは、photoのテンプレートをそのまま表示させます。

    "pages":[
        {
            "template":"photo",
            "elements":[
                {"id": "1" },
                {"id": "2" },
                {"id": "3" },
                {"id": "4" }
            ]
        },

2ページめは、photoのテンプレートの各画像を差し替えます。各elementのidを1ページと同様に指定して、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ファイルをダウンロードして、画像を差し替えればすぐに試すことができます。まずはサンプルをいじって遊んでみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4