東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

デザイン事務所ダウンアンダー

営業
10:00-
19:00

WordPressにHTML5アニメーションを投稿する。

     技術ノート   ,  野村貞次

iOSだけでなくAndroidでのflashサポートも終了し、これまでリッチコンテンツとしてflashを多用してきたサイトは対応に追われていることと思います。

シンプルなアニメーションであれば、代替策の一つとしてHTML5アニメーションが利用できます。flashのflaファイルまたはswfファイルを変換するには以下のサイトを利用できます。

https://www.google.com/doubleclick/studio/swiffy/

アップロード可能なサイズが1MBまで、ActionScriptの制限等がありますが、単純なアニメーションであれば問題無いでしょう。画像はSVGとなりますが、Androidのブラウザも4.0以降はSVGに対応しています。

swiftyはHTMLファイルを出力しますが、このアニメーションをWordPressの記事として投稿すると問題が発生します。

出力されたHTMLファイルをエディタで開き、まず

  • <script type=”text/javascript” src=”https://www.gstatic.com/swiffy/v5.4/runtime.js”></script>

の行はheader.phpに組み込んでください。

以下

  • <script>
  • swiffyobject =
  • </div>
  • <script>
  • var stage = new swiffy.Stage(document.getElementById(‘swiffycontainer’),swiffyobject);
  • stage.start();
  • </script>

から

  • </head>
  • <body style=”margin: 0; overflow: hidden”>

の2行を削除して記事に「テキストモード」で貼り込みます。

 この投稿を表示すると、何も表示されません。これはWordPressがscriptタグをサニタイズ(自動除去)してしまうためです。

これを回避するためには、プラグイン「ps-disable-auto-formatting」を導入してください。

     技術ノート   ,  野村貞次

Message

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

 こちらの記事も読んで見ましょう

WordPressにHTML5アニメーションを投稿する。 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー,2014 All Rights Reserved.

ページ先頭へ