4 返信 最新の返信: Nov 12, 2014 6:32 AM by harmoniamundi RSS

    ブログに埋め込むにはどうすればいいのでしょうか?

    miyukiyyyy Community Member

      潤句堂本舗 FC2ブログでEdge Animateを使う方法

      Edge animateで作ったアニメーションをサイトに貼る方法 | Graphicwell

       

      上記のサイトを参考に

       

      プロジェクト名.html

      プロジェクト名_edge.js

      プロジェクト名_edgeActions.js

      edge.5.0.0.min.js

      imagesフォルダ内データ

       

      これらをリネームしました

      データ内もアップロードしたURLを元に書き換えました

      そして

      <head></head>内に

      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

      <!--Adobe Edge Runtime-->

          <meta http-equiv="X-UA-Compatible" content="IE=Edge">

          <script type="text/javascript" charset="utf-8" src="edge.5.0.0.min.jsをリネームしたURL"></script>

          <style>

              .edgeLoad-EDGE-10139461 { visibility:hidden; }

          </style>

      <script>

         AdobeEdge.loadComposition('プロジェクト名', 'EDGE-10139461', {

          scaleToFit: "none",

          centerStage: "none",

          minW: "0",

          maxW: "undefined",

          width: "960px",

          height: "300px"

      }, {dom: [ ]}, {dom: [ ]});

      </script>

      <!--Adobe Edge Runtime End-->

      を挿入してみました

      edge.5.0.0.min.jsをリネームしたURL、プロジェクト名は半角英数です

       

      そして<body></body>内の設置したい位置に

      <div id="Stage" class="EDGE-10139461"></div>

       

      と挿入しました

       

      しかしながら表示がされません

       

      ファイルアップロードした

      プロジェクト名.html

      はそれ自身は無理なく動いてます

       

      どうすればいいのかわからず

      どなたかお詳しい方にご教授して頂けたら幸いです

       

      乱文をご容赦くださいませ

        • 1. Re: ブログに埋め込むにはどうすればいいのでしょうか?
          harmoniamundi CommunityMVP

          例に挙がっているURLをみると、色々なパターンがあります。

          主さんがやりたいのは、この中の具体的にどのパターンですか???

           

          私はめんどくさいので、oamプロジェクトファイルで書き出して

          オブジェクトとして配置しちゃってます。

          きっとブログ側の制約でそうはいかないんですよね?

          • 2. Re: ブログに埋め込むにはどうすればいいのでしょうか?
            miyukiyyyy Community Member

            例にあげたものは

            二つの記事とも同じ方法を記載されています

             

            ブログの規制によりoamはデータが大きいので

            アップロードできませんでした

            • 3. Re: ブログに埋め込むにはどうすればいいのでしょうか?
              miyukiyyyy Community Member

              ちなみにweb用に書き出すると

              リネームしてもおかしくなってしまい

              動きませんでした

              • 4. Re: ブログに埋め込むにはどうすればいいのでしょうか?
                harmoniamundi CommunityMVP

                2つ目のリンクは既存のHTMLにコードをコピペして、パブリッシュしたスクリプトを埋め込むだけの方法なので、

                おそらく、質問主さん的に大事なのは1つ目のリンクで説明されている、ファイルのリネームやパス変更ということですね。

                フルパス指定なので、該当のサーバー上でないと確認できないのがつらいです。

                 

                CC2014.1ですが、サンプルアニメーションをパブリッシュし、同じ理屈でリネーム・パス変更、コード編集をして動作確認しました。

                たぶん、リネームやパス指定をしくじらなければ動くのだと思います。

                CC2014.1ではパブリッシュされるファイルが少なく、工数も減るのでオススメです。

                可能であれば、一度試してみてはいかがでしょうか。

                全ファイルの内容は無理なので、htmlだけ全文載せます。太字の部分がコピぺや編集した箇所です。

                -------------

                <!doctype html>

                <html>

                <head>

                <meta charset="UTF-8">

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                <title>無題ドキュメント</title>

                <link href="simple.css" rel="stylesheet" type="text/css">

                <!--Adobe Edge Runtime-->

                    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

                    <script type="text/javascript" charset="utf-8" src="http://***hogehoge***/edge500min.js"></script>

                    <style>

                        .edgeLoad-EDGE-455333329 { visibility:hidden; }

                    </style>

                <script>

                   AdobeEdge.loadComposition('animation_finished', 'EDGE-455333329', {

                    scaleToFit: "none",

                    centerStage: "none",

                    minW: "0",

                    maxW: "undefined",

                    width: "500",

                    height: "350"

                }, {"dom":{}}, {"dom":{}});

                </script>

                <!--Adobe Edge Runtime End-->

                </head>

                <body>

                ここはサイトコンテンツ上

                    <div id="Stage" class="EDGE-455333329">   

                        <div id="Stage_background" class="edgeLoad-EDGE-455333329"></div>

                        <div id="Stage_RoundRect" class="edgeLoad-EDGE-455333329">

                            <div id="Stage_Text" class="edgeLoad-EDGE-455333329">Hello World</div>

                        </div>

                    </div>

                ここはサイトコンテンツ下

                </body>

                </html>

                -------------

                 

                miyukiyyyy による書き込み:

                 

                ちなみにweb用に書き出すると

                リネームしてもおかしくなってしまい

                動きませんでした

                 

                この部分はどういうことでしょうか。パブリッシュ設定ではWeb用だと思うのですが。

                何をWeb用に書き出すとNGで、どう書き出したらOKなのか知りたいです。