Lottieアニメーションのインポート

Note: Sign in to the developer console to build or publish your skill.

Lottieアニメーションのインポート

オーサリングツールにLottie形式のアニメーションをインポートして、Alexa Presentation Language（APL）ドキュメントの作成に使用できます。Lottieは、Adobe After Effectsから書き出すことができるJSONアニメーション形式です。

Lottieアニメーションをインポートする

オーサリングツールで、Lottie形式のJSONファイルをAlexa Vector Graphics（AVG）形式に変換できます。変換後のベクターグラフィックアニメーションをドキュメントで使用できます。

インポートするアニメーションを準備する

オーサリングツールは、Adobe After EffectsでBodymovinプラグイン（バージョン5.7.5）を使用して作成されたLottieファイルをサポートしています。

一部のAfter Effects機能はサポートしていません。サポートされていない機能がアニメーションに使われていないことを確認してください。詳細については、サポートされている機能を参照してください。

アニメーションをLottie形式で書き出す方法の詳細については、How to Get Started Using Bodymovin and Lottie in After Effectsを参照してください。

アニメーションをインポートする

Lottieアニメーションをインポートする

開発者コンソールで、ドキュメントを作成するスキルを開きます。
左側のナビゲーションから、マルチモーダル応答をクリックします。
オーサリングツールで作成をクリックします。
アップロードをクリックします。
視覚応答をアップロードダイアログボックスにLottieファイルをドラッグするか、参照をクリックしてインポートするファイルを選択します。
アップロードをクリックします。
プロンプトが出たら、変換をクリックします。
- 変換がエラーなく完了すると、変換されたアニメーションを表示する新しいAPLドキュメントが開きます。
- 変換でエラーが発生した場合、サポートされていない機能のリストが表示されます。リストを確認し、続行をクリックします。このようなエラーを防ぐには、Lottieやオーサリングツールでサポートされていない機能がAfter Effectsアニメーションで使われていないことを確認します。サポートされている機能については、こちらを参照してください。

オーサリングツールでLottieファイルをインポートして作成された新しいAPLドキュメント

アニメーションを確認してドキュメントを編集する

オーサリングツールでドキュメントが変換されると、アニメーションを含む新しいドキュメントが表示されます。新しいドキュメントには次の要素が含まれます。

myGraphicという名前のAlexa Vector Graphic（AVG）。myGraphicのAVG定義は、ドキュメントのgraphicsプロパティ内のオブジェクトで表されます。AVGには、グラフィックの描画とアニメーション化に使用されるLottieアニメーションからのデータがすべて含まれています。AVG形式の詳細については、Alexa Vector Graphics形式を参照してください。
myGraphic AVGを表示する、mainTemplate内のVectorGraphic。これによりアニメーションが表示されます。

たとえば、このAPLドキュメントは次のようになります。簡潔に表現するため、AVGの詳細は省略しています。

{
  "type": "APL",
  "version": "2024.3",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "VectorGraphic",
      "source": "myGraphic",
      "width": "100%",
      "height": "100%",
      "scale": "best-fit",
      "align": "center",
      "frame": "${(elapsedTime*0.06)%360}"
    }
  },
  "graphics": {
    "myGraphic": {
      "type": "AVG",
      "version": "1.1",
      "width": 1280,
      "height": 800,
      "description": "Animate-Item",
      "items": [],
      "parameters": [
        {
          "name": "frame",
          "value": 0
        }
      ],
      "resources": []
    }
  }
}

Lottieファイルから変換されたアニメーションを確認します。大幅に変更する場合は、After Effectsで編集してからLottieファイルとして再度書き出し、ファイルをAPLに変換する手順を繰り返します。Lottieファイルをアップロードすると、毎回新しいAPLドキュメントが作成されます。Lottieファイルを既存のAPLドキュメントにインポートすることはできません。

アニメーションをデザインに組み込む

アニメーションの変換が終了したら、ドキュメントを編集してアニメーションをデザイン全体に組み込みます。たとえば、mainTemplateにContainerを追加し、VectorGraphicをほかのコンポーネントと共にContainerに移動します。

AVGの名前は、myGraphicから別の意味のある名前に変更することをお勧めします。JSONコードビューを使用して、次の2か所の名前を変更します。

graphicsプロパティに割り当てられたグラフィックの名前
VectorGraphicコンポーネントのsourceプロパティ

オーサリングツールでのドキュメントの編集の詳細については、APLドキュメントを作成および編集するを参照してください。

Lottieアニメーションを使用したドキュメントの例

以下は、AlexaBackground、AlexaHeader、Text、VectorGraphicの各コンポーネントを表示するAPLドキュメントの例です。VectorGraphicコンポーネントは、Lottieアニメーションから作成されたグラフィックを参照します。この例では、グラフィックの名前がmyGraphicからtowerOfBlocksAnimationに変更されています。

Lottieアニメーションを外部パッケージに移動する

Lottieアニメーション用のJSONコードは大きくなることがあります。視覚応答のサイズを小さく保つには、アニメーションのコードを別の外部パッケージに移動し、importプロパティを使用してそのパッケージをAPLドキュメントにインポートします。

外部パッケージを作成してホストする方法の詳細については、APLパッケージでレイアウト、グラフィックスなどのリソースをホストするを参照してください。

注：オーサリングツールは、APLドキュメントを検証し、エラーを含む可能性のあるコードを示します。120KBを超えるファイルでは、この検証は機能しません。

サポートされている機能

オーサリングツールは、Adobe After EffectsでBodymovinプラグイン（バージョン5.7.5）を使用して作成されたLottieファイルをサポートしています。

一部のAfter Effects機能は、Lottie形式ではサポートされません。Lottieでサポートされない機能は、オーサリングツールやAPLでもサポートされません。LottieでサポートされるAfter Effectsの機能については、LottieのドキュメントのSupported Featuresを参照してください。

以下の表に、オーサリングツールでAVGに変換できるAfter Effectsの機能をまとめます。

After Effectsの機能	変換サポートの有無
シェイプ
楕円	◯
長方形	◯
角丸長方形	制限付きサポート。角丸のアドオンレイヤーはサポートされません。
多角形	◯
グループ	◯
リピーター	×
パスのトリミング（個別に）	制限付きサポート。APLとLottieのフレームレートの違いにより、変換結果に誤差が生じる場合があります。
パスのトリミング（同時に）	制限付きサポート。APLとLottieのフレームレートの違いにより、変換結果に誤差が生じる場合があります。
塗り
カラー	◯
不透明度	◯
塗りの規則	×
円形グラデーション	◯
線形グラデーション	◯
線
カラー	◯
不透明度	◯
線幅	◯
線端	◯
線の結合	◯
角の比率	×
破線	◯ 破線はパスのトリミングと競合する可能性があることに注意してください。
グラデーション	制限付きサポート。線形グラデーションのみがサポートされます。
トランスフォーム
位置	◯
位置（x,y）	◯
スケール	◯
回転	◯
アンカーポイント	◯
不透明度	◯
親とリンク	◯
自動方向	×
歪曲	×
補間法	×
リニア補間	◯
ベジェ補間	◯
停止補間	×
空間補間法ベジェ	◯
時間ロービング	×
マスク
マスクパス	◯
マスク不透明度	◯
追加	×
型抜き	×
交差	×
明るく	×
暗く	×
差	×
マスクの拡張	×
マスクの境界のぼかし	×
マット
アルファマット	◯
アルファ反転マット	×
ルミナンスキーマット	×
ルミナンスキー反転マット	×
パスの結合
結合	×
追加	×
型抜き	×
交差	×
中マド	×
レイヤーエフェクト
塗り	×
線	×
色抜き	×
トライトーン	×
レベル（個々の制御）	×
テキスト
字形	×
フォント	×
トランスフォーム	×
塗り	×
線	×
字送り	×
アンカーポイントのグループ化	×
パス	×
文字単位の3D化	×
範囲セレクター（単位）	×
範囲セレクター（基準）	×
範囲セレクター（量）	×
範囲セレクター（シェイプ）	×
範囲セレクター（イーズ高く）	×
範囲セレクター（イーズ低く）	×
範囲セレクター（順位をランダム化）	×
エクスプレッションセレクター	×
その他
エクスプレッション	×
画像	◯
プリコンポーズ	◯
時間伸縮	×
タイムリマップ	×
マーカー	×

Lottieコンバーターのソースコードを入手する

Lottieコンバーターのソースコードはオープンソースであり、カスタムのAPLオーサリングツールに統合したい場合に利用できます。GitHubリポジトリはhttps://github.com/alexa/apl-translator-lottieにあります。

トラブルシューティング

注： lottiefilesで提供されているファイルなど、オープンソースのLottieファイルを使用できます。ただし、オープンソースアニメーションの多くは非常に複雑で、APLのLottieコンバーターでは変換できなかったり、エラーが発生したりする可能性があります。オープンソースファイルを使用する場合は、できるだけシンプルなものを選んでください。

問題：変換が終了したが問題があるというメッセージが表示される

現象

オーサリングツールに「変換が終了しましたが問題があります」というメッセージが表示されます。メッセージにはサポートされていないAfter Effectsの機能の一覧が表示されています。

解決方法

この問題は、オーサリングツールでファイルをインポートできたものの、サポートされていない機能が原因で想定どおりの結果ではない可能性があることを示しています。

メッセージに記載されたサポートされていない機能の一覧をメモします。続行をクリックし、サポートされていない機能が含まれない状態のアニメーションを確認します。想定した結果と異なる場合、Adobe After Effectsに戻ってそれらの機能を削除してから、アニメーションをもう一度Lottieファイルに書き出してインポートしてみてください。

サポートされている機能については、こちらを参照してください。

問題： Lottieファイルの変換中にエラーが発生した

現象

オーサリングツールに「Lottieファイルの変換中にエラーが発生しました」というメッセージが表示されます。メッセージにはサポートされていないAfter Effectsの機能の一覧が表示されています。

解決方法

このエラーは、サポートされていない機能があるために、オーサリングツールがファイルをまったくインポートできなかったことを示しています。

メッセージに記載されたサポートされていない機能の一覧をメモします。キャンセルをクリックして変換を終了するか、最初からやり直すをクリックして別のファイルをインポートします。

問題：ファイルタイプがサポートされていない

現象

オーサリングツールに「ファイルタイプがサポートされていません。APLまたはLottieのjsonファイルを選択してください」というメッセージが表示されます。

解決方法

このエラーは、オーサリングツールがファイルをLottieファイルと認識しなかったことを示しています。キャンセルをクリックし、Adobe After Effectsを使用してアニメーションを作成してから、Bodymovinプラグインを使用して書き出します。

ほかの方法で作成されたLottieファイルは、APLでは機能しない場合があります。

問題：変換が正常に終了したのにプレビューペインに空白画面が表示される

現象

オーサリングツールには、変換が正常に終了したことを示すメッセージが表示されます。にもかかわらず、オーサリングツールのプレビューペインは空白の黒いViewportになり、アニメーションが表示されません。ツールの左側のペインには、想定どおりのAVGおよびVectorGraphicのコードが表示されています。

解決方法

この状況は、インポートしたアニメーションに黒い色のテキストや画像が含まれている場合に発生する可能性があります。アニメーションは正常にインポートされますが、Viewportのデフォルトの背景色が黒いために目に見えません。

黒いアニメーションが表示されるように、ドキュメントの背景色を変更するか、lightテーマに変更してください。

以下は、背景色やテーマを変更する方法の例です。簡潔に示すため、インポートしたAVG（myGraphic）の詳細は省略しています。

Viewportのテーマを変更する

ドキュメントの最上位にドキュメントレベルのthemeプロパティを追加し、lightに設定します。

{
  "type": "APL",
  "theme": "light",
  "version": "2024.3",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "VectorGraphic",
      "source": "myGraphic",
      "width": "100%",
      "height": "100%",
      "scale": "best-fit",
      "align": "center",
      "frame": "${(elapsedTime*0.06)%1198}"
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

ドキュメントの背景を別の色に変更する

ドキュメントレベルのbackgroundプロパティを追加し、別の色またはグラデーションに設定します。

{
  "type": "APL",
  "version": "2024.3",
  "background": "yellow",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "VectorGraphic",
      "source": "myGraphic",
      "width": "100%",
      "height": "100%",
      "scale": "best-fit",
      "align": "center",
      "frame": "${(elapsedTime*0.06)%1198}"
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

AlexaBackgroundレスポンシブ対応コンポーネントを使用する

alexa-layoutsパッケージのAlexaBackgroundコンポーネントを使用すると、背景をよりきめ細かく制御できます。背景には、色、グラデーション、画像、ビデオ、デフォルトのAlexa背景のいずれかを使用できます。mainTemplateは1つのコンポーネントしか表示しないため、Containerを追加し、そのContainerのitems配列にAlexaBackgroundコンポーネントとVectorGraphicコンポーネントを移動する必要があります。

AlexaBackgroundコンポーネントにアクセスするには、最新バージョンのalexa-layoutsをimport配列に追加します。

次の例は、alexa-layoutsパッケージをインポートし、Container内にAlexaBackgroundとVectorGraphicを配置する方法を示しています。この例では、デフォルトのAlexa背景が使用されます。

{
  "type": "APL",
  "version": "2024.3",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "Container",
      "width": "100%",
      "height": "100%",
      "items": [
        {
          "type": "AlexaBackground"
        },
        {
          "type": "VectorGraphic",
          "source": "myGraphic",
          "width": "100%",
          "height": "100%",
          "scale": "best-fit",
          "align": "center",
          "frame": "${(elapsedTime*0.06)%1198}"
        }
      ]
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

APLで背景を使用する方法の詳細については、コンテンツを背景、境界線、ヘッダーと組み合わせるを参照してください。

その他のリソース：

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 12 月 02 日

Lottieアニメーションのインポート

Lottieアニメーションをインポートする

インポートするアニメーションを準備する

アニメーションをインポートする

アニメーションを確認してドキュメントを編集する

アニメーションをデザインに組み込む

Lottieアニメーションを使用したドキュメントの例

Lottieアニメーションを外部パッケージに移動する

サポートされている機能

Lottieコンバーターのソースコードを入手する

トラブルシューティング

問題： 変換が終了したが問題があるというメッセージが表示される

現象

解決方法

問題： Lottieファイルの変換中にエラーが発生した

現象

解決方法

問題： ファイルタイプがサポートされていない

現象

解決方法

問題： 変換が正常に終了したのにプレビューペインに空白画面が表示される

現象

解決方法

関連トピック

問題：変換が終了したが問題があるというメッセージが表示される

問題：ファイルタイプがサポートされていない

問題：変換が正常に終了したのにプレビューペインに空白画面が表示される