トップ > ブログ >

Nuxt3にLottieを導入しアニメーションを使う for YesNo診断

2024/3/22公開

Lottieとは

Airbnbが開発しているアニメーションライブラリです。
以下のようなアニメーションをWeb上で動かすことができます。

動画ファイルがjson形式（+画像ファイル）であるため、読み込みが軽く、javascript（やTypeScript）から容易に編集できるのが特徴です。

今回のアニメーションは以下のjsonファイルでできています。
animations/tanuki/data.json (GitHub)

Lottie + After Effects

以下の「AEで作ったアニメーションをLottieでお手軽にWebで使う」を参考にしました。
AEで作ったアニメーションをLottieでお手軽にWebで使う

After Effectsが使えない方も！

Adobe After Effectsが使えない方もLottieのファイルを取得したりなんだりでいろいろできます。
いっぱい情報がネットにあるので、興味があればぐぐってください。

Nuxt3とは

ウェブサイト構築用のフレームワークVue.jsのフレームワークNuxtの最新版です。
いっぱい情報がネットにあるので、興味があればぐぐってください。

Lottie + +Nuxt3

以下の「Nuxt.jsでLottieを使う」を参考にしました。
Nuxt.jsでLottieを使う

Nuxt3への実装は以下のようにしています。
Lottie.vue (GitHub)

補足：YesNo診断

今回のアニメーションは以前のブログで書いたYesNo診断用です。

今回はLottieのお試しとして作りましたが、少しずつユーザー動作に合わせて動きが変化するなど、改造していく予定です。

流派YesNo診断公開と Nuxt3.10.xへの更新

投稿日：2024/3/11

流派YesNo診断を公開しましたSW2.5のおすすめ流派が、質問に「YES」「NO」と答えるだけでわかる「流派YesNo診断」を公開しました以下からぜひ遊んでみてくだ... 見出し「流派YesNo診断を公開しました」「Nuxt3.10.xへのアップデート」「GitHub Actionsのファイル分割」「おまけ：もしくは今日公開した理由」公開日：3/11 JavaScript,TypeScript,Node.js,Nuxt3,Vue3,GitHub Actions,GitHub Pages

なぜ白いたぬきなの？

ソード・ワールド2.5サプリメント『泡沫世界モノクロマティカ』にあわせてということにしています！

SW2.5最新サプリ『泡沫世界モノクロマティカ』一読の感想と内容紹介！

更新日：2024/3/27

本当のところは、ホワイトデーに作成した画像の流用だからです……。

おまけ：OGP自動生成

当ブログではOGP自動生成をしています。
sharpというnpmパッケージを使用しています。

読みにくいコードですが、一応紹介しておきます。
……いつかリファクタリングします。
geneImage/index.ts (GitHub)

他のブログ記事もぜひ！！

他にもいろいろなブログを書いています！
ぜひいろいろと読んでいってください。

アビスブレイカー発売！ SW2.5最新サプリメントを感想を交えて紹介

投稿日：2024/11/21

アビスブレイカーが発売されましたSW2.5の最新サプリ『アビスブレイカー‐奈落と魔界‐』が発売されましたこの『アビスブレイカー‐奈落と魔界‐』は2つの新技能と奈... 見出し「アビスブレイカーが発売されました！」「2つの新技能について」「アビスゲイザー技能」「ダークハンター技能」「アビススキルと追加アビスカース表」「ワールド」「ランダム魔域ルール」「魔物データ」「魔法一覧」「まとめ」「おまけ：ソドワ同人誌について」公開日：11/21

タグ「技術系」の最新記事

流派YesNo診断公開と Nuxt3.10.xへの更新

投稿日：2024/3/11

AmazonPA-API 導入について自分用メモ

投稿日：2024/1/18

Amazonアソシエイトをやめています5月にAmazonアソシエイトを退会しましたそのためここの記述内容は古くなっています技術的知見として残しておりますAmazonPA-APIとはA... 見出し「Amazonアソシエイトをやめています。」「Amazon PA-APIとは」「導入の背景」「やったこと」公開日：1/18 JavaScript,TypeScript,Node.js,Nuxt3,Vue3,GitHub Actions,GitHub Pages

「#ソドワおみくじ」の技術的な話

投稿日：2024/1/16

「#ソドワおみくじ」とは当サイトで公開している、TRPG「SW2.5」の運勢を占うことができるツールですぜひ遊んでみてください技術的な話前提このサイトはNuxt... 見出し「「#ソドワおみくじ」とは？」「技術的な話」「まとめ」公開日：1/16 JavaScript,TypeScript,Node.js,Nuxt3,Vue3,GitHub Actions,GitHub Pages

1年前の記事

アニポケ＆サトシの思い出

投稿日：2023/3/24

本日3/24はサッカー日本代表の親善試合vsウルグアイ代表がありますカタールW杯が終わってから初となる代表活動に注目が集まります個人的な注目選手はと語り出すと長くなってしまうので本題へサト... 見出し「サトシのピカチュウのアニメが終わる日」「たぶん旅は続く」「最後に好きなシーンを」「最終話を見て」公開日：3/24

ラクシアに桜はあるのか

更新日：2024/3/24

桜の季節ですね「春と言えば桜」というくらい現代日本では馴染み深い桜桜を見るのを「お花見」と言うことからも、桜がいかに生活に馴染んでいるかの一端がわかりますそんな桜がラクシアにあるのか、考えてみたいと思... 見出し「桜の季節ですね」「前提」「桜という植物について」「希少な植物」「品種改良？」「まとめ」公開日：3/27

販売戦略に負けてゆうこやを買ってしまいました！

投稿日：2023/3/19

回し者ではありませんでもこの機会にゆうこやとかSW2.5とか、TRPGを始める人が増えたら嬉しいですゆうこや最高ですかねてよりBOOKWALKERという電子書籍サイトで電子書籍を買っていまして、SW2... 見出し「回し者ではありません」「ゆうこや最高です」「ゆうこや、めっちゃ好きかもしれない」「BOOK WALKERのセールが来た」公開日：3/19

最後までお読みいただきありがとうございました。
よければ他のブログやページもご覧ください。

Nuxt3にLottieを導入し アニメーションを使う for YesNo診断

目次