Adobe Edge Animate入門 番外編1 ストアアプリに移植する

火曜日 , 6, 8月 2013 Leave a comment

 Adobe Edgeで作成したHTMLをWindowsストアアプリで動かすことができるのか? という疑問が浮かんだので、ストアアプリに移植してみました。

 結果は、思いのほかあっさりと動いてしまってビックリしました。

 

 

 

Adobeさんのショウケースの作品を移植してみる

 

 Adobe EdgeのサンプルがAdobeさんのページにありますので、今回はその中から「Floral Match Maker 」を移植してみます。

 HTML5で遊ぶ絵合わせゲームです。

 

001

 

 

 ショウケースのページからDownload Floral Match Maker sample filesをクリックしてファイルをDLします。

 

 あとはストアアプリのソリューションエクスプローラーに.anファイル以外を設置。

 

002

 

 あとは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がほぼそのままで動作します。

 (画面幅やフォントなど微調整は必要ですが)

 

003

デザインは調整しないといけないが、ゲームはブラウザそのままに動作

 

 

 んー、ストアアプリをHTML+JSで作るのはありかもしれない!!

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です