質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1716閲覧

Adobe Animate で書き出した Canvas の配置方法について

casanova

総合スコア17

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/02/13 07:24

Adobe Animate を使用し、「HTML5 Canvas ドキュメント」形式でパブリッシュしました。
書き出されたHTMLファイルを開くと、Canvasが、ウィンドウサイズを基準に拡大・縮小する動作を確認できました。

これをwindowに対してではなく、外側の要素の幅にフィットするようなレスポンシブにしたいのですが、できませんでした。
<img> タグの max-width:100%; のような挙動を希望しております。

書き出されたHTMLファイルの抜粋は以下の通りです。

<body onload="init();" style="margin:0px;"> <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:710px; height:437px"> <canvas id="canvas" width="710" height="437" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas> <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:710px; height:437px; position: absolute; left: 0px; top: 0px; display: none;"> </div> </div> <div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:437px; width: 710px; text-align: center;'> <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=canvas/images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div> </body>

これに下記のようにラッパー要素を加えても、その幅(下記例では500px)には収まりません。

<body onload="init();" style="margin:0px;"> <div style="width:500px;"> <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:710px; height:437px"> <canvas id="canvas" width="710" height="437" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas> <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:710px; height:437px; position: absolute; left: 0px; top: 0px; display: none;"> </div> </div> <div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:437px; width: 710px; text-align: center;'> <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=canvas/images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div> </div> </body>

これをラッパーの<div>にフィットさせるにはどうしたら良いでしょうか?
どうかお力を拝借できれば幸いです。

パブリッシュ設定「JavaScript/HTML」の主な設定は下記の通りです。
・レスポンシブにする 幅を基準
・表示領域いっぱいに拡大・縮小 チェックなし

Mac OS Catalina
Adobe Animete 20.0.1

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
時間の都合で別の方法で実装しました。

今回の質問の内容もそうですが、ひとつのhtmlファイルにAnimateで書き出したCanvasを複数配置しようとすると、少々コードを修正しなければならなかったり標準で書き出されるコードは不便でした。

今回の問題とは関係ありませんが、複数ファイルを特定のサイズおよびレスポンシブで配置する場合は、同一ドメイン上に置いたファイルを<iframe>で読み込む方法が最も手軽でした。

投稿2020/02/14 09:48

casanova

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問