HTML5エクスポーターで作成したアプリを自分のサイトで公開する方法

今回は『インディゲームクリエイター Clickteam Fusion 2.5(以下CF2.5)』の『HTML5エクスポーター』で作成したアプリケーションを自分のウェブサイトで公開する方法をご紹介します。
『HTML5エクスポーター』で作成したアプリケーションを公開するには、以下の2種類の方法があります。

1:自作ゲーム投稿サイト『Plicy(プリシー)』に投稿する。
2:ビルドして作成されたHTMLファイルのソースから、必要なコードを自分のHTMLファイルにコピーする。

1:自作ゲーム投稿サイト『Plicy(プリシー)』に投稿する。

自作ゲーム投稿サイト『Plicy(プリシー)』がCF2.5で作成したHTML5アプリケーションに対応しています。
こちらの解説に従ってビルドしたデータをアップロードするだけです。
自サイトのへ埋め込むためのタグも用意されており、一番手っ取り早い方法です。

2:ビルドして作成されたHTMLファイルのソースから、必要なコードを自分のHTMLファイルにコピーする。

外部の投稿サイトを利用せず、自らの取得しているサーバーへアップロードする場合です。
ビルドされたファイル一式をそのままアップロードして、そこへアクセスすれば実行はできるのですが、デフォルトで作成されるHTMLファイルは枠やClickteamのロゴ表示など外観が固定されています。
自分の作成したHTMLファイル内に表示するためには、ビルドされたHTMLファイルのソースから、必要な部分をコピーします。

      1:ビルドして作成されたフォルダ内の「index.html」をテキストエディタで開く

2:画像の赤枠で囲まれた部分のコードを自分のHTMLファイルの該当部分へコピーする(画像をクリックすると原寸表示します。)

■<head>~</head>セクションへコピーするコード
cf25_blog_kj_2015-01-11_html5_code_head2

■<meta>タグ部分はモバイルデバイス向けのページリサイズの設定が含まれています。
cf25_blog_kj_2015-01-11_html5_code_head1

■<body>~</body>セクションでコピーするコード
cf25_blog_kj_2015-01-11_html5_code_body

最低限これらのコードをコピーすれば動作します。
プロパティの設定または将来的なアップデートによって生成されるコードは微妙に変わる可能性がありますのでご注意ください。

アプリケーションプロパティの『ウィンドウサイズ全体に表示』にチェックしてビルドした場合、アプリケーションの画面は常にブラウザ全体に表示されて他のものが表示される余地がないため、<title>~</title>のページタイトルを変える以外はファイルをそのまま使用できます。
cf25_blog_kj_2015-01-11_html5_code_resize_display
また最上部の言語指定が<html lang=”en”>になっており、ブラウザによっては翻訳のダイアログが出る場合があるので、必要な場合は<html lang=”ja”>に変更してください。

もちろん、『resources』と『src』フォルダも必要ですので、HTMLファイルと同じ場所にアップロードしてください。

1 thought on “HTML5エクスポーターで作成したアプリを自分のサイトで公開する方法

コメントを残す

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

Time limit is exhausted. Please reload CAPTCHA.