LoginSignup
12

More than 5 years have passed since last update.

JavaScript版のSwipe Engine、swipejsを使う

Last updated at Posted at 2016-11-12

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>

これを実際に動かすとこのように表示されます。2コマのマンガが動いたら成功です。左右に配置されているボタンでコマを前後移動できます。
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コンテンツを作成することが可能です。

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

続きはこちら

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

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

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

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

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
12