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はこちらです。
<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