Auto AnimateImage
Index
概要
Auto AnimateImage は AnimateImage スクリプトを自動的にサイトに適用する WordPress プラグイン。AnimateImage は複数の画像をアニメーション GIF のように連続表示することができる。次のような img 要素を書くだけで自動的に画像がアニメーションされるようになる。
<img src="images/0.png" data-files="[0-9].png" />
アニメーション GIF は最も一般的なアニメーション形式だが 256 色までしかサポートされない。代替アニメーション形式に APNG, MNG (JNG), Motion JPEG, SVG Animation などがあるが、現時点では Web ブラウザーによって広くサポートされていない。このような理由から AnimateImage はアニメーション画像のための最も適切な方法といえる。
機能
Auto AnimateImage
- AnimateImage スクリプトを自動的にサイトに適用する
img要素を書くだけ。JavaScript もショートコードもギャラリーも不要。- 設定画面から共通オプションやアニメーションスタイルをカスタマイズできる
- 旧バージョンの WordPress 2.7 までの幅広い互換性
AnimateImage
- 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。
- Web ブラウザーがサポートする全ての画像形式に対応。GIF, PNG, JPEG, JPEG XR (HD Photo), BMP, TIFF, WebP and SVG など。これにより 256 色を超える透明なアニメーションも可能。
- 多数のアニメーションオプションがある。アニメーション間隔、繰り返し回数、巻き戻し、一時停止、空白画像など。
data-files属性を持つimg要素が自動的にアニメーションされる。JavaScript は記述不要。- JavaScript を記述するとアニメーションを制御できる。任意のタイミングで開始/停止/再開できる。
- jQuery などの JavaScript ライブラリは使用していない独立したスクリプト。ファイルサイズは 5.6 KB。
- Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera およびそれらの旧バージョンをサポート
使い方
data-files 属性を持つ img 要素を記述するだけで、自動的に画像がアニメーションされる。連番、ゼロ詰めされた連番、連続したアルファベット、そして任意のファイル名の複数の画像をアニメーション可能。
<img src="sequential/0.png" data-files="[0-99].png" /> <img src="zero-padded/00.png" data-files="[00-99].png" /> <img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" /> <img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" /> <img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" /> <img src="parent/child0/image.png" data-files="child[0-9]/file.png" />
AnimateImage は多数のアニメーションオプションに対応している。例えばアニメーション間隔、繰り返し回数、巻き戻し、一時停止、空白画像など。各オプションは以下のように data-* 属性で指定する。
<img src="" data-files=""
title="" alt="" id="" class="" style=""
data-delay="" data-cycleDelay=""
data-repeat="" data-rewind=""
data-pauseAtFirst="" data-pauseAtLast=""
data-showBlank="" data-blankClassName=""
data-blankPath="" data-stretchBlank="" />
詳しくはコード記述例を参照。
ダウンロード
- auto-animateimage.zip
-
- v0.6, 2012-09-23, 139 KB
- 無料ライセンス (個人かつ非営利、寄付歓迎)
- animate-image.min.js は最適化された圧縮コード
- auto-animateimage.zip
-
- v0.6, 2012-09-23, 146 KB
- 商用ライセンス (500 円)
- animate-image.js はコメント付きの非圧縮コード
- 有償サポート (技術的な質問やカスタマイズなど)
※ animate-image.min.js はコメントや改行、不必要な空白などの削除によりファイルサイズが縮小されている。またローカル変数や関数の引数の名前は短縮されている。一方で animate-image.js は読みやすいように整形されているほか、ドキュメンテーションコメントが JSDoc スタイルで記述されている。
対応ブラウザー
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
対応画像形式
- GIF (.gif), ほとんどのブラウザーでサポート, サンプル
- PNG (.png), ほとんどのブラウザーでサポート, 透過 PNG は IE7 以降でサポート, サンプル
- JPEG (.jpg, .jpeg, .jpe, .jif, .jfif, .jfi), ほとんどのブラウザーでサポート, サンプル
- JPEG XR (HD Photo, Windows Media Photo) (.hdp, .jxr, .wdp), IE9 以降でサポート, サンプル
- BMP (.bmp, .dib), Windows 環境のほとんどのブラウザーでサポート, サンプル
- TIFF (.tiff, .tif), IE9 以降および Safari でサポート, サンプル
- WebP (.webp), Google Chrome および Opera でサポート, サンプル
- SVG (.svg, .svgz), モダンブラウザーおよび IE9 以降でサポート, サンプル
- Web ブラウザーがサポートするすべての画像形式
Web browsers
リリース一覧
- Auto AnimateImage 0.6
- Auto AnimateImage 0.5
- Auto AnimateImage 0.4
- Auto AnimateImage 0.3
- Auto AnimateImage 0.2
- Auto AnimateImage 0.1 (AnimateImage v1.1.1 同梱の初回リリース)
インストール
自動インストール
- WordPress のダッシュボードにアクセスする
- [プラグイン] – [新規追加] を選択
- テキストフィールドに “AnimateImage” と入力して [プラグインの検索] をクリック
- 「Auto AnimateImage」の「今すぐインストール」をクリック
- 「プラグインを有効化」をクリック
data-files属性を持つimg要素を記述する
手動インストール
- auto-animateimage.zip をダウンロードする
- WordPress のダッシュボードにアクセスする
- [プラグイン] – [新規追加] – 「アップロード」タブを選択
- ダウンロードした ZIP ファイルをアップロードして [今すぐインストール] をクリック
- 「プラグインを有効化」をクリック
data-files属性を持つimg要素を記述する
手動インストール (FTP)
- auto-animateimage.zip をダウンロードして解凍する
- 生成されたプラグインフォルダーを
wp-content/plugins/ディレクトリーにアップロードする - WordPress の [プラグイン] メニューからプラグインを有効化する
data-files属性を持つimg要素を記述する
カスタマイズ
Auto AnimateImage 設定画面で利用可能なオプション一覧。以下のオプションを通して共通オプションやアニメーションスタイルをカスタマイズすることができる。
- 一般
- AnimateImage スクリプト (ヘッダー / フッター)
- 共通オプション
- アニメーション間隔
- アニメーションサイクル間の間隔
- 繰り返し回数
- アニメーション終了時に巻き戻す
- 最初の画像で一時停止
- 最後の画像で一時停止
- アニメーションサイクル間に空白画像を表示する
- 空白画像を最後の画像のサイズに引き延ばす
- JavaScript コード使用時に img 要素を出力する
- クラス名 (アニメーション画像)
- クラス名 (空白画像)
- ファイルパス (空白画像)
- スタイル (アニメーション画像 / 空白画像)
- 背景色
- マージン
- パディング
- 枠線 (幅 / スタイル / 色)
- 角の丸み
- 不透明度
- ドロップシャドウ効果
- 幅 / 高さ
- 最大幅 / 最大高さ
- 最小幅 / 最小高さ
FAQ
Auto AnimateImage が動作しない
まず data-files 属性が正しい書式文字列か確認する。次にエラーコンソールにメッセージが出力されていないかチェックする。
- Internet Explorer: ステータスバーの警告アイコンをダブルクリック, or [Tools] メニュー – [Developer Tools] をクリック, or [F12] キーを押す
- Mozilla Firefox: [Firefox/Tools] メニュー – [Web Developer] – [Error Console] をクリック, or [Ctrl+Shift+J] キーを押す
- Google Chrome: [Tools] メニュー – [JavaScript console] をクリック, or [Ctrl+Shift+J] キーを押す
- Opera: [Opera] メニュー – [Page] – [Developer Tools] – [Error Console] をクリック, or [Ctrl+Shift+O] キーを押す
- Safari (Mac): [Develop] メニュー – [Show Error Console] をクリック, or [Option-Command-C] キーを押す
- Safari (Windows): ページメニューボタン – [Developer] – [Show Error Console] をクリック, or [Ctrl+Alt+C] キーを押す
- 注：デベロッパーツールを有効にするため、Safari の詳細設定で [メニューバーに”開発”メニューを表示] をチェックしておく
問題が解決しない場合は、サポートフォーラムまたはコンタクトフォームからサイト URL をお送りください。
Auto AnimateImage 設定画面はどこ？
- WordPress のダッシュボードにアクセスする
- サイドバーの [設定] – [Auto AnimateImage] をクリック
プラグインをローカライズする
Poedit と “languages/animateimage.pot” ファイルを使用してローカライズ可能。詳細は Localization を参照。
JavaScript から AnimateImage を使用する
AnimateImage 名前空間オブジェクトから AnimateImage の機能にアクセス可能。
AnimateImage.options.delay = 1000;
AnimateImage.animate('images/[0-9].png');
var animator = new AnimateImage.Animator('images/[0-9].png');
animator.animate();
// animator.stopAnimate();
詳細は AnimateImage 公式サイトを参照。
スクリーンショット
コード記述例
記述例1: 連番のファイル名
<img src="sequential/0.png" data-files="[0-99].png" /> <img src="zero-padded/00.png" data-files="[00-99].png" /> <img src="zero-padded/000.png" data-files="[000-999].png" /> <img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" /> <img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" />
記述例2: 任意のファイル名
<img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" /> <img src="arbitrary/foo.png" data-files="[foo.png, bar.jpg, baz.gif]" /> <img src="prefix-foo_suffix.png" data-files="prefix-[foo, bar, baz]_suffix.png" />
記述例3: 書式文字列でディレクトリ名を指定
<img src="parent/child/file0.png" data-files="file[0-9].png" /> <img src="parent/child0/image.png" data-files="child[0-9]/file.png" /> <img src="parent0/child/image.png" data-files="parent[0-9]/child/file.png" />
※ data-files 属性は書式文字列を含むファイル名またはディレクトリまでの相対パスで指定する。
記述例4: title/alt 属性
<img src="images/0.png" data-files="[0-9].png" title="foo" /> <img src="images/0.png" data-files="[0-9].png" title="foo" alt="bar" /> <img src="images/0.png" data-files="[0-9].png" alt="bar" />
※ alt 属性が指定されない場合は title 属性と同じ値が指定される。
記述例5: id/class 属性
<img src="images/0.png" data-files="[0-9].png" id="foo" /> <img src="images/0.png" data-files="[0-9].png" class="bar" /> <img src="images/0.png" data-files="[0-9].png" class="" />
※ class 属性が指定されない場合は追加される。class 属性のデフォルト値は "animation"。
記述例6: delay/cycleDelay オプション
<img src="images/0.png" data-files="[0-9].png" data-delay="1000" /> <img src="images/0.png" data-files="[0-9].png" data-cycleDelay="2000" />
※ delay オプションのデフォルト値は 500 ms, cycleDelay オプションのデフォルト値は 0 ms
記述例7: repeat/rewind オプション
<img src="images/0.png" data-files="[0-9].png" data-repeat="1" /> <img src="images/0.png" data-files="[0-9].png" data-repeat="1" data-rewind="true" />
※ repeat オプションのデフォルト値は -1 (無制限に繰り返す), rewind オプションのデフォルト値は false
記述例8: pauseAtFirst/Last オプション
<img src="images/0.png" data-files="[0-9].png" data-pauseAtFirst="true" /> <img src="images/0.png" data-files="[0-9].png" data-pauseAtLast="true" />
※ pauseAtFirst オプションのデフォルト値は false, pauseAtLast オプションのデフォルト値は false
記述例9: showBlank/blankClassName/blankPath/stretchBlank オプション (空白画像)
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" /> <img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankClassName="foo" /> <img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="blank.png" /> <img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="logo.png" data-stretchBlank="false" />
※ showBlank オプションのデフォルト値は false, blankClassName オプションのデフォルト値は "blank", blankPath オプションのデフォルト値は data:image/gif;base64,..., stretchBlank オプションのデフォルト値は true
記述例10: 任意の属性
<img src="images/0.png" data-files="[0-9].png"
width="100" height="100" longdesc="long description" />
記述例11: 任意の CSS プロパティ
<img src="images/0.png" data-files="[0-9].png"
style="border: solid; border-top: dotted; border-bottom: dashed" />
デモ
連番のファイル名からなる 32 ビット色の透過 PNG アニメーション。
※ その他のデモは AnimateImage 公式サイトの「デモ」を参照。
サポートする
- モチベーションを保つため、プラグインページから評価スターや互換性情報 (Works/Broken) の報告をお願いします
- 質問がある人はサポートフォーラムをチェックするか新しい質問を投稿してください
- ほかの言語に翻訳できる人は Localization を参照ください。あるいは連絡いただければ丁寧に説明します。おかしな英語に気付いた人も連絡ください。
- プラグイン開発を支援するために寄付をしていただけるととても嬉しいです
- 何かフィードバックなどあればコンタクトページからお問い合わせください
いただいたコメントは大変参考になります。ここまで読んでいただきありがとうございました。
リンク
- AnimateImage スクリプト
- Auto AnimateImage プラグイン (WordPress.org)
“keyboard keys” by chromatix is licensed under Creative Commons License.