【Streamlit】人気のStreamlit Components紹介：streamlit-lottieでアニメーションを組み込もう！

Streamlit
この記事は約7分で読めます。

こんにちは、JS2IIUです。
今回は、楽しいビジュアルのLottieFilesを取り扱います。固いデータ表示だけでなく、楽しいアニメーションも扱えるStreamlitの懐の深さを感じます。今回もよろしくお願いします。

はじめに

Streamlitは、Pythonで手軽にWebアプリケーションを作れる非常に人気のあるフレームワークです。データ可視化や機械学習モデルのデモアプリなど、幅広い場面で活用されています。

そんなStreamlitに「ちょっとした動きをつけて、見た目を華やかにしたい」と思ったことはありませんか？

今回は、軽量アニメーション「Lottie」をStreamlitアプリに簡単に組み込めるコンポーネント、streamlit-lottieをご紹介します。使い方はとてもシンプルで、誰でもすぐに使い始めることができます！

Lottieとは？

Lottie（ロッティ）は、JSON形式のベクターアニメーションファイルで、モバイルアプリやウェブサイトなどでよく使用されています。特徴は以下の通りです：

  • とても軽量
  • 拡大・縮小してもきれい
  • 高品質なアニメーションを簡単に埋め込める

無料でアニメーションを取得できるサイト「LottieFiles」には、数千種類のアニメーションが公開されています。

streamlit-lottieを使ってみよう！

ステップ1：必要なライブラリをインストール

まずは、Pythonに必要なライブラリをインストールします。

Bash
pip install streamlit-lottie

また、requestsライブラリを使って外部のJSONファイルを取得するため、必要に応じてこちらもインストールしておきましょう。

Bash
pip install requests

ステップ2：基本的なLottie表示コード

ここでは、LottieFilesから取得したアニメーションを表示するシンプルなコードを紹介します。

Python
import streamlit as st
from streamlit_lottie import st_lottie
import requests

# LottieアニメーションをURLから読み込む関数
def load_lottie_url(url):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

# Streamlitアプリのタイトル
st.title("🎉 Lottieアニメーションを表示してみよう！")

# アニメーションのURL（LottieFilesから取得）
lottie_url = "https://assets1.lottiefiles.com/packages/lf20_touohxv0.json"
lottie_json = load_lottie_url(lottie_url)

# アニメーションの表示
st_lottie(lottie_json, height=300, key="hello")

✅ 補足解説

  • load_lottie_url関数では、アニメーションJSONをURLから取得して辞書形式で返しています。
  • st_lottieは、streamlit-lottieで提供されている関数で、JSON形式のアニメーションデータを表示できます。
  • heightやkeyなどのパラメータで表示サイズや識別キーを調整できます。

より実践的な使い方：ボタンでアニメーションを切り替える

StreamlitはインタラクティブなUIが得意です。ここでは、ボタンをクリックしたときに成功アニメーションを表示する例を紹介します。

Python
import streamlit as st
from streamlit_lottie import st_lottie
import requests

def load_lottie_url(url):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

st.title("🎯 アクション後にLottieアニメーションを表示")

success_url = "https://assets7.lottiefiles.com/packages/lf20_jbrw3hcz.json"
success_animation = load_lottie_url(success_url)

if st.button("登録完了！"):
    st.success("登録が完了しました！")
    st_lottie(success_animation, height=200, key="success")

✅ ポイント

  • ボタンが押されると、st.success()でメッセージを表示し、その下にアニメーションを表示します。
  • このように、動きのあるUIでユーザー体験がぐっと向上します！

オプション設定：アニメーションをカスタマイズしよう

st_lottie()にはさまざまなオプションがあります。以下のように使います：

Python
st_lottie(
    lottie_json,
    speed=1.0,       # アニメーションの再生速度
    reverse=False,   # 逆再生するかどうか
    loop=True,       # ループ再生するか
    quality="high",  # 品質: low / medium / high
    height=300,      # 表示する高さ
    width=None,      # 幅（Noneで自動調整）
    key="custom"
)

細かい調整ができるので、アプリのデザインに合わせて使ってみましょう！

Lottie JSONファイルをローカルから読み込む方法

URLからだけでなく、ローカルに保存したLottieファイルを使うことも可能です。以下のように記述します。

Python
import json

def load_lottie_file(filepath):
    with open(filepath, "r") as f:
        return json.load(f)

lottie_local = load_lottie_file("my_animation.json")
st_lottie(lottie_local, height=300, key="local")

まとめ

streamlit-lottieを使えば、Streamlitアプリに簡単に高品質なアニメーションを追加できます。
ユーザーが「おっ！」と思うような演出を、わずか数行のコードで実現できるのが魅力です。

ぜひLottieアニメーションを活用して、あなたのアプリをもっと魅力的にしてみてください！

参考リンク

最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。

最後まで読んでいただきありがとうございます。

コメント

タイトルとURLをコピーしました