眠るシーラカンスと水底のプログラマー
Winodws Phone, Windows, EC-CUBEの情報を発信しますAdobe Edge Animate入門 番外編1 ストアアプリに移植する
火曜日 , 6, 8月 2013 WinRT(UWP), Adobe Edge, CC, JavaScript Leave a commentAdobe Edgeで作成したHTMLをWindowsストアアプリで動かすことができるのか？ という疑問が浮かんだので、ストアアプリに移植してみました。
結果は、思いのほかあっさりと動いてしまってビックリしました。
Adobeさんのショウケースの作品を移植してみる
Adobe EdgeのサンプルがAdobeさんのページにありますので、今回はその中から「Floral Match Maker 」を移植してみます。
HTML5で遊ぶ絵合わせゲームです。
ショウケースのページからDownload Floral Match Maker sample filesをクリックしてファイルをDLします。
あとはストアアプリのソリューションエクスプローラーに.anファイル以外を設置。
あとはindex.htmlをEdge Animateプロジェクトの「skyscraper.html」を参考に以下のように書き換えます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>EdgeAnimateSample</title>
<!-- WinJS 参照 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" charset="utf-8" src="skyscraper_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-38094116 { visibility:hidden; }
</style>
<!-- EdgeAnimateSample 参照 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-38094116">
</div>
</body>
</html>
ビルドするとストアアプリ版のFloral Match Makerがほぼそのままで動作します。
(画面幅やフォントなど微調整は必要ですが)
デザインは調整しないといけないが、ゲームはブラウザそのままに動作
んー、ストアアプリをHTML+JSで作るのはありかもしれない！！
Please give us your valuable comment