Adobe Animater CC で作った HTML5 Canvas をワードプレスに貼り付けてiOSで見ると、タップの度に画面が暗くなる(テスト2)

広告

画面をタップすると暗くなる

説明のため、動画を撮影してみました

先日、Adobe Animate CCHTML5 Canvas でパブリッシュした HTML を、ifameタグを使ってワードプレスの投稿に貼り付ける実験をしてみました。

Animate CC で作った HTML5 Canvas をワードプレスに貼り付ける(ちょっとテスト)
HTML5 Canvas TEST 実験です Adobe Animate CC で HTML5 Canvas というブラウザで動くインタラクティブコンテンツを作るテストをしてみます。  【html5canvas-test.html...

私はスマホアプリの開発を Animate CC でやっているので「この方法で自分のブログにミニゲームがつけられたらいいなあ」と思ってのテストです。

画面をタップすると暗くなる

動画を見るとよく判ると思いますが、コンテンツ部分をタップするとそのコンテンツ・エリア全体が暗くなります。

パソコンのブラウザではならないのに、iOSのブラウザだと暗くなって鬱陶しいです。Safari でも Chrome でも同じように暗くなります。

Animate CC で生成される HTML5 のデータ

Animate CC でパブリッシュすると以下の通りファイルが生成されます。

  • HTMLファイル(.html)
  • Javascriptファイル(.js)
  • imagesフォルダ
  • soundsフォルダ

これらのファイルを、サーバーにフォルダ作ってアップロードしてHTMLファイルを開くとブラウザで作ったコンテンツが再生されます。

html5canvas-test
パパ
パパ

昔、flashとかDirectorのShockwaveとかだとswfファイルというのが生成されて、このファイルを<embet>タグを使ってページに貼り付けていました。

生成されたHTMLのソースを開いて見ると「呪文」が並んでいます。

<head><script>の中にスクリプトとかあるので、これをこのままワードプレスに投稿するのは大変そうです。

そこで、むかしのflashのようにタグひとつでページに貼り付けたい!ということでiframeタグで貼り付けてみたというわけです。

いい解決方法、ありませんか?

画面が暗くなる事以外は、それなりにちゃんと動いています。今回のテストでは内容がたいしたことないので気にならないと言えばそれまでですが、今後ゲームなんか作った場合、画面を操作している間暗くなられては鬱陶しくてたまりません。

まあ、Animate CC で生成されたHTMLをいじってゲームはそっちで遊んでね…ということにしてもいいんですが、ページの見栄えを作り込んだり他の要素を組み込んだりするにも、いろいろ勉強しないといけないし、ブログページで完結できたら嬉しいんですがねぇ…。

どなたか、いい解決方法をご存知の方がおりましたら是非、ご教授いただけると助かります。

パパ
パパ

よろしくおねがいします

【追記】この問題、とりあえず解決しました。以下のコードをメインタイムラインの最初に書き込むと暗くならないようになりました。

%d人のブロガーが「いいね」をつけました。