この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。MDNのWeb Animations APIと動きを減らす設定の資料を確認し、架空の荷物カードを操作する教材を制作しました。画面は通常記事と同じ引用囲み形式です。検証ステータス：📘 公式資料・GitHubソース確認済み／ブラウザ実機未確認
2026年10月31日時点で、Daily CodeのHTML・JavaScript・READMEを同じGitコミットで保存し読戻しました。ブラウザ描画、操作、GitHub Pages反映、WordPressの青い囲みの実表示、Node.js構文検査は未実施です。
アニメーションは「作って終わり」ではありません。再生、一時停止、途中から再開、速度変更まで制御できると、画面の動きをユーザー自身が選べるようになります。この記事では外部ライブラリを追加せず、ブラウザの標準機能だけを使って荷物カードを動かします。
今回できること
| 項目 | 内容 |
|---|---|
| 対象 | パソコン・スマートフォンの対応ブラウザ。実機差は未確認 |
| 技術 | Web Animations API（Element.animate()、Animation） |
| 費用・通信 | 有料API・外部CDN・ログイン不要。公開ページへの接続自体は通信を伴う |
| 入力 | 再生・一時停止・リセットのボタン、速度選択 |
| データ | ブラウザ内の架空の荷物カード。位置情報や認証情報は使用しない |
| 大切な条件 | OSの「動きを減らす」設定が有効なら静止表示 |
まず試す：荷物カードを動かそう
🔷 操作してみよう
📦 Web Animations APIのデモを開く（公開反映・ブラウザ動作未確認）
📘 完全なソースとREADME
デモ画面で「再生」を押します。荷物が左右へ往復するか観察します。
速度を「1倍」から「2倍」に変更し、動きの速さを比べます。
「一時停止」→「リセット」を押して、カードの位置と状態表示を見ます。
これはコードから導いた期待結果であり、ブラウザで実際に確認した結果ではありません。
| 操作 | 期待する変化 |
|---|---|
| 初回表示 | カードは左端で停止。状態は「準備完了」 |
| 再生 | カードが左右に往復し、状態欄が「再生中」 |
| 速度2倍 | 同じ範囲をより速く移動 |
| 一時停止 | その時点の位置で動きが止まる |
| リセット | 左端に戻り、停止する |
| 動きを減らす設定 | 静止表示になり再生操作は無効 |
🟦 ここを見る：動きだけではなく文字表示も確認
動画のように見えるアニメーションでも、現在の状態を文字で表示すると、見え方や端末の違いがあっても操作の意味を確かめられます。画面が静止した場合は、まず状態欄の案内を確認してください。
なぜJavaScriptからアニメーションを制御できるのか
通常のCSSアニメーションだけでも見た目を動かせます。ただし、途中で止める、再開する、速度を変えるなどの操作では、ブラウザが返すAnimationオブジェクトを持っておくと分かりやすくなります。
Element.animate()は要素にキーフレームを与え、すぐに再生を始めるとともに、そのアニメーションを制御するオブジェクトを返します。そこで教材では、作成直後にpause()して自動再生を防ぎ、利用者が「再生」を押したときだけplay()を呼びます。
play()は再生・再開、pause()は途中停止、cancel()は効果の取り消しです。updatePlaybackRate()は再生位置との整合を取りながら速度を変えるために使います。ただし、ブラウザ実装や端末性能によって見え方は異なります。
flowchart LR
A["再生ボタン"] --> B["Animation.play()"]
B --> C["カードが移動"]
D["速度選択"] --> E["updatePlaybackRate()"]
E --> C
F["一時停止"] --> G["Animation.pause()"]
G --> H["状態を文字表示"]
図はイベントとAPIの関係を説明する概念図です。ブラウザ内部の実装をそのまま示すものではありません。
コードの核心はここ
const animation = parcel.animate(
[{ transform: "translateX(0px)" },
{ transform: "translateX(200px)" }],
{ duration: 2600, iterations: Infinity, direction: "alternate" }
);
animation.pause(); // ボタンを押すまで再生しない
// 操作時に animation.play() / animation.updatePlaybackRate(2)
これは理解のための抜粋です。完全なコードでは、画面の横幅から移動距離を計算し、DOM要素の取得、イベント登録、例外的な環境への案内を行います。単独実行する場合はDaily CodeのHTMLとJavaScript本体を使ってください。
1か所変えてみる：移動にかかる時間
🧪 実験する前に予想する
JavaScriptのduration: 2600をduration: 1300に変更すると、同じ移動距離を約半分の時間で進むと予想できます。速度選択は1倍のままで比べます。比較後は2600へ戻してください。
ここで大事なのは「時間を半分にした」と「再生倍率を2倍にした」が、今回の単純な往復例では似た速さの結果を生むことです。ですが、前者はアニメーションそのものの設計時間、後者は再生中に変えられる倍率です。実務のUIでは、ユーザーが選ぶ速度と、制作者が設定する標準時間を分けて管理すると説明しやすくなります。
また、横幅が狭い画面で固定の200px移動を指定するとカードがはみ出す場合があります。完成版はレールの幅とカードの幅から移動距離を計算します。画面の大きさが変わると、古いアニメーションをcancel()して初期位置から作り直します。これが突然のリセットに見える可能性も、教材の仕様として説明しておきます。
動きを減らす設定を尊重する
⚠️ 動きが苦手な人のために
端末のprefers-reduced-motion: reduceが有効なときは動く演出を開始せず、文字案内を表示します。ユーザーが停止を希望している状態を勝手に解除しません。
アニメーションは、内容を理解するために不可欠とは限りません。動くカードが見えなくても「準備完了」「再生中」「停止中」といった状態が伝わる設計にします。点滅を連続させたり、利用者が停止できない演出を置いたりする必要はありません。今回のデモはページを開いた瞬間には再生されません。
自分のPCで動かす
ライブデモが表示されない場合は、上記の固定コミットのindex.htmlとapp.jsを同じフォルダへ保存し、まずHTMLをブラウザで開いてください。相対パス./app.jsが参照される構成です。
ローカルファイルで問題があれば、そのフォルダでローカルHTTPサーバーを起動できます。
python3 -m http.server 8000 --bind 127.0.0.1
WindowsでPython Launcherが使用できる場合はpy -3 -m http.server 8000 --bind 127.0.0.1でも構いません。ブラウザではhttp://127.0.0.1:8000/を開き、終了時はターミナルでCtrl+Cを押します。外部への公開設定や管理者権限は不要です。
うまく動かないとき
| 症状 | 最初に確かめること |
|---|---|
| 「読み込み中」のまま | app.jsの同じフォルダ配置とConsoleのエラー |
| 動きがない | OSの動き軽減設定と状態欄 |
| 「対応していません」と出る | ブラウザとElement.animate()の対応 |
| サイズ変更後に左へ戻る | 横幅を再計算するための意図的なリセット |
| 速度差が分からない | まず1倍と2倍を同じ開始位置で比較 |
一時停止は「動画ファイルが止まった」のではなく、ブラウザが管理するアニメーションの進行を止めた状態です。読み込み失敗、利用者設定による停止、コードの例外を同じ原因として扱わないでください。
仕事・学習でどう使う？
タスクカードが次の工程へ移るとき、処理の進行を視覚的に示したい場合などに応用できます。ただし、カードが動いたことはサーバー側の処理成功の証明ではありません。実際の業務ツールでは、結果APIの応答、失敗時の再試行、更新の取り消し、利用者へのテキスト通知を別々に設計します。
また、標準APIとGSAPなどの外部ライブラリは対立するものではありません。今回のような単一要素の基本的な再生制御は標準APIで学びやすく、複数要素の複雑な演出や制作環境の要件によってはライブラリが有用です。依存関係を減らしたい場合は標準APIから試す、という選び方もできます。
再生状態と速度を分けて比較する
再生速度を2倍にすると、同じ移動距離を短い時間で進むことが期待されます。ただしアニメーションはカードの位置だけでなく、現在の再生時刻と再生状態も持っています。一時停止後に再開する操作と、最初からやり直す操作は結果が違います。表示される状態を見ながら停止位置から続きを再生するか、初期位置に戻るかを見比べてください。
Web Animations APIで再生レートを0に設定したとき、見た目の動きが止まっても内部状態が必ずpausedになるわけではありません。停止ボタンでpause()を呼ぶ場合と区別すれば、ボタン表示と動きが一致しない原因を探しやすくなります。確認するときはplayStateとplaybackRateを別々に観察し、動きが見えないという理由だけで処理が終わったと判断しないようにします。
速度を途中で変えた際に再生位置が不自然に跳ぶなら、速度変更の方法を確認します。APIには再生位置の同期を考慮するupdatePlaybackRate()がありますが、非同期処理を含むため、変更直後に値を読むだけでは確認が不十分なことがあります。教材の実装がどの方法を使うかを確認し、現在の位置を保ちながら速度が変わるのか、再開時に新しい速度が有効になるのかを切り分けます。
ブラウザの描画が遅い環境では、同じ速度を設定してもカードが滑らかに見えないことがあります。この場合は再生速度の値を闇雲に上げず、開発者ツールにエラーが出ていないか、タブを切り替えたときに再生位置がどう変わるかを見ます。バックグラウンドの制約も影響するため、表示が遅いこととアニメーション時間の設定ミスは別の問題です。
画面の動きを減らす設定が有効な場合、カードが動かなくても単なる故障とは限りません。OSやブラウザの動作軽減設定を尊重した結果の可能性があります。最初に設定と状態文を読み、次にConsoleを確認します。業務の進捗表示に応用するなら、移動アニメーション以外に「準備中」「完了」などの文字でも状態を伝える設計が欠かせません。
公式情報・一次情報
資料確認日：2026年10月31日。 公式APIの仕様とソース構成を確認しましたが、作成した画面の実ブラウザ動作、GitHub Pages公開、WordPressの表示は未確認です。
GitHubサンプル
記事本文は操作と意味を理解するための抜粋、Daily Codeは実装を読むための正本です。未実施の検査を「成功」と記録しません。
