Spineアニメーションをプレビュー&HTMLに変換するWebアプリを作ってみた
タイトル通り、Spineアニメーションをプレビューできる & HTMLに変換してダウンロードできるWebアプリを作成しました。
最新のChrome、Edge、FireFox、Safariなら、どれでも動作すると思います。
※PCでの利用推奨です。
どんなWebアプリか
「Upload Files」ボタンを押下して、Spineエクスポートデータ3点セット（.png、.atlas、.json または .skel）をアップロードすると、Spineアニメーションのプレビューが表示されます。
「Download as HTML」ボタンを押下すると、htmlファイル一点がダウンロードされます。
ダウンロードされたhtml一枚の中に、Spine Web Playerのcss/js、および、アップロードしたSpineエクスポートデータ3点のデータURIがまとめられています。
なので、このhtmlをブラウザで表示するだけで、Spineアニメーションを確認できます。
- Spineエディタをインストールしていない人にアニメーションを確認してもらいたい時
- Webサーバーへアップロードして、多くの人に確認してもらいたい時
…等、アニメーションをパッと共有したい時に、便利かなと思います。
アップロードされたSpineエクスポートデータの変換→プレビュー生成→htmlファイルのダウンロード処理…等は、すべて利用者のブラウザ上で実行しています。
アップロードしたSpineエクスポートデータを他サーバーへ送信・保存などは一切していません。
そのため、利用者のPC・ブラウザの設定・環境に依存し、意図通りに動作しない場合があります。
うまく動作しない場合は、本家のSpine Web Playerの利用を推奨します。（布教）
Webアプリの中身はどうなっているか
アプリの中身はとてもシンプルです。
Spine Web Playerでアセットを埋め込むで紹介されている内容に+αしただけです。
- ユーザーがファイルをアップロードする。
- 1.でアップロードされたファイルの拡張子を見て .png .atlas .json .skel ならFileReaderのreadAsDataURLを使ってデータURIに変換する。
- FileReaderのloadイベント時（2.のデータURI変換が完了した時）に、データURIの文字列をグローバルステートに保持する。
- グローバルステートにあるデータURIの文字列を、SpinePlayerクラスに渡して、インスタンスを生成する。特にエラーがなければ画面上にプレビューが表示される。
- 「Download as HTML」ボタンを押下すると、Blobを利用して、Spine Web PlayerのCSS/JavaScript + グローバルステートのデータURIをひとまとめにしたhtmlを生成し、ダウンロードされる。
どうして作ったか
実は今回作成した「html形式でのエクスポート機能」は、Spineエディタ ver3.9で実装が予定されていました。
Spine 3.9では、上記のすべてをワンクリックで実行できる新しいエクスポートオプションが含まれる予定です。最終的な結果は .html ファイルになり、ディスクからどのウェブブラウザでも開くことができ、友人や同僚に送信して簡単にあなたの作品を見ることができます。私たちの3.9-betaにご期待ください！
「ver3.9で実装予定なら、ver4にはもう実装されているよな。」と思って、Spineエディタ ver4のエクスポート周りの設定を確認してみたのですが…、該当の機能が見当たりませんでした。
Spine Changelogを確認したところ、ver3.9自体がなかったので、「もしかしたら、htmlエクスポート機能は、ver3.9ごとお蔵入りになったのかな？」と考えました。
「機能がないなら、自分で作ればいいじゃない。」ということで、本アプリを作成した次第です。
…
（嘘です。本当はただ単純に自分が欲しかっただけです。）
余談
本記事を執筆中にSpineの開発ロードマップを確認したところ、「HTML export option」というのを見つけました。
「いつ頃に」・「どのバージョンで」は不明ですが、今後のSpineエディタに実装予定ではあるようです。
それまでの繋ぎとして、本アプリを使っていこうかなと思います。
Discussion