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