TV版が加わりました。日本気象協会iOS版やAndroid版のシンプルな使い勝手はそのままに、テレビ向けにインターフェイスを再考して、色合いやコントラストも調整しました。使い方や機能的なものは上記のプレスリリースを参照頂くことにして、ここでは今回の開発に際して新たな試みとして用いた手法を紹介したいと思います。出力されるデータはJSON形式で、「Lottie」というAirbnbが開発したアニメーションライブラリを利用してアニメーションを再生します。「Lottie」を使ってみたくて、実装を担当されているそらかぜさんに相談しました。ベースでハンドリングできるアニメーションデータなので、いろいろと可能性がありそうだと感じています。完成したバナーはこのようにシンプルなものです。してウェブサイトへの埋め込みでも使えますし、AndroidやiOS/MacOS、Windowsなどのプラットフォームへも幅広く利用できます。実際のデータの作成から組み込み用のデータ出力に関しては、以下の手順で制作しました。無事Renderが終わればこのような画面が表示されるので「Done」、先ほど指定したディレクトリにデータが出力されています。ちなみに、プラグインをインストールした直後は、とくに設定を調整していない限り、次のような画面が表示されます。スクリプトとエクスプレッション」で表示される画面内の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れるとOKです。Bodymovinのインストールから出力されたJSONデータのウェブサイトへの埋め込み位手順については、こちらの記事も非常に参考になりました。アニメーションライブラリ「Lottie」を使って、超軽量Webアニメーションを実装する方法もう少し複雑なサンプルとしては、先日のお知らせで掲載したこちらのアニメーション。Effectsで細かくパスをハンドリングしてアニメーション制御していたり、出力されたJSONに対してJavascriptでマウスホバーやクリックなどのイベント制御を追加しています。具体的には、アニメーションをループ再生、マウスホバーでアニメーションをゆっくり再生させて、マウスアウトで通常再生、マウスクリックではモーションの最初から再生するように仕込んでいます。触っただけでもこれだけのことが簡単にできてしまうので、各プラットフォームでもアイデア次第でいろいろと活用できそうです。興味が湧いたという方はぜひ試してみてください。TVが搭載されているという方は、ぜひこの機会にお試し頂ければと思います。TV版):https://play.google.com/store/apps/details?id=jp.co.sorakaze.androidtv.soraannaiどうぞよろしくお願いします。