JavaScript版のSwipe Engine、swipejsを使う

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

当初はiOS版のエンジンとしてリリースされiPhone, iPad, AppleTV上でのみの対応でした。
swipeはモバイル端末に最適化されたJSON形式の宣言型のマークアップ言語を採用しているため、他環境への移植も簡単に可能です。
現在はiOSに加え、javascript版、android版が公開されています。

swipejsは, ブラウザなどで動くようにSwipe EngineをJavaScriptに移植したコンテンツを閲覧するためのビューアーです。js版、html版swipeとも呼ばれています。

swipejsはgithub上で公開されていて、誰でも利用、開発することができます。
https://github.com/isamu/swipejs

 
## 使い方

swipejsを使ってSwipe Engineを体験してみましょう。
まずはswipe fileを作りましょう。swipe fileの記述方法はこちらにあります。
https://github.com/swipe-org/swipe/blob/master/SPECIFICATION.md

今回は、サンプルのファイルを用意したのでこちらを使います。
http://www.swipejs.net/sample1/sample1.swipe
Swipe Fileの記述も、今後紹介していきます。

swipejs本体や必要なjsのライブラリはswipejs.netで配布しています。
こちらを使ってhtmlを記述します。

用意したswipeのサンプルファイル、sample1.swipeを読み込んで表示させます。
このサンプルではsample1.swipeをjQueryのgetJSONで読み込むので、クロスドメインの問題が発生します。ローカルで動かすときもサーバを起動して検証するか、Access-Control-Allow-Originを設定しているサーバにsample1.swipeをおいて使ってください。swipe fileを動かすためのhtmlはこちらです。


```sample.html
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
  <script src="https://js.swipe.net/lib/jQueryRotate.js"></script>
  <script src="https://js.swipe.net/lib/mediaelement/mediaelement-and-player.min.js"></script>
  <script src="https://js.swipe.net/lib/snap.svg.js"></script>
  <link rel="stylesheet" href="https://js.swipe.net/swipe.css" />
  <link rel="stylesheet" href="https://js.swipe.net/lib/mediaelement/mediaelementplayer.css" />

  <script src='https://js.swipe.net/js/swipe.js'></script>

  <script>
    $(document).ready(function () {
            var file = "./sample1.swipe";
            $.getJSON(file, function(json) {
                SwipeUtil.initSwipe(json, "#swipe", "#swipe_back");
                var swipe_book = SwipeUtil.getSwipeBook();
                $("#arrowleft").on("click", function() { swipe_book.back(); });
                $("#arrowright").on("click", function() { swipe_book.next(); });

            });
    });


  </script>

  <style type="text/css">
    <!--                                                                                                                                                                                                  
        #arrowleft {                                                                                                                                                                                      
        top: 50%;                                                                                                                                                                                         
        position: absolute;                                                                                                                                                                               
        left: 20px;                                                                                                                                                                                       
        }                                                                                                                                                                                                 
        #arrowright {                                                                                                                                                                                     
        top: 50%;                                                                                                                                                                                         
        position: absolute;                                                                                                                                                                               
        right: 20px;                                                                                                                                                                                      
        }                                                                                                                                                                                                 
      -->

  </style>

  <title>Swipe</title>
  </head>
  <body>
    <div id="swipe_back">
      <img src="https://js.swipe.net/images/ArrowLeft.png" id="arrowleft">
      <div id="swipe">
      </div>
      <img src="https://js.swipe.net/images/ArrowRight.png" id="arrowright">
    </div>
  </body>

</html>
```

これを実際に動かすとこのように表示されます。２コマのマンガが動いたら成功です。左右に配置されているボタンでコマを前後移動できます。
http://www.swipejs.net/sample1/sample1.html


実際にswipejsを使っている部分はこちらです。これだけで簡単にswipe fileを表示させることができます。

```
            $.getJSON(file, function(json) {
```
jsonファイルの読み込み。

```
                SwipeUtil.initSwipe(json, "#swipe", "#swipe_back");
```
jsonを渡して初期化。swipeを表示させる部分と背景のidを指定する。

```
                var swipe_book = SwipeUtil.getSwipeBook();
```
swipeの動作をコントロールするためのインスタンスを取得。

```
                $("#arrowleft").on("click", function() { swipe_book.back(); });
                $("#arrowright").on("click", function() { swipe_book.next(); });
```
矢印の画像をクリックしたときにコマを遷移するように指定。

サンプルのhtmlファイルのfile部分を変更すれば別のファイルを読み込むことが可能です。自分でサンプルを作ったり、次に紹介するサンプルをダウンロードしてswipeを体験してください。


## サンプルの入手方法

swipeのサンプルはgithubで公開されています。
https://github.com/swipe-org/swipe-sample
ここのelementsフォルダにサンプルのswipe fileがあります。
ダウンロードして利用してください。

また、このサンプルはswipejs版で公開されています。
https://swipe-org.github.io/swipe-sample/
直接swipeのサンプルの動作を体験することができます。

iOS版のswipe engineにもsampleが一緒に配布されています。
https://github.com/swipe-org/swipe/tree/master/sample
こちらもswipejsで動作可能ですので、体験してみてください。

iOS版のswipeエンジンはapp storeから入手可能です。
https://itunes.apple.com/jp/app/swipe-engine/id1051119890
これを使って、iOS版とswipejsとの動作を比較することも可能です。

また、swipeのコンテンツを作成するためのiOS版のオーサリングツールもあります。
https://itunes.apple.com/us/app/swipe-studio/id1148461767
これを使えばswipeファイルを書くことなくswipeコンテンツを作成することが可能です。

すべて無料なのでぜひ一度試してください。

#続きはこちら

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

２回目「swipejsで画像のスライドショーを作成する」はこちら
http://qiita.com/isamua/items/5021c750b6e8383c82a6

３回目「swipejsのスライドショーでページめくりを変えて遊ぶ」はこちら
http://qiita.com/isamua/items/37cb69a1bd2eaa549d3f

４回目「swipejsで画像を動かして、次世代マンガを作る。」はこちら
http://qiita.com/isamua/items/291080fff9118ddfd628