【Streamlit】ショートカットキー設定でUXを向上させる方法

JS2IIU

7か月前

こんにちは、JS2IIUです。
日々のデータサイエンスやWebアプリ開発の中で、操作効率を上げるためにショートカットキーの活用は非常に効果的です。特にStreamlitのような手軽にインタラクティブなWebアプリケーションを構築できるツールでは、カスタムショートカットキーによってユーザーエクスペリエンスを一段と向上させることが可能です。本記事では、Streamlitの基本概要から始めて、ショートカットキー設定の重要性、具体的なカスタムショートカットキーの実装方法、使いやすさを追求するためのベストプラクティスまでを丁寧に解説します。コードサンプルも交えながらステップバイステップで進めますので、初心者の方でも迷わず理解できる内容になっています。ぜひ最後までご覧ください。

Streamlitについての簡単な説明
Streamlitの基本概要
1. 主な機能と用途
2. 環境設定の基本
ショートカットキーの重要性
1. なぜショートカットキーが重要か
2. ユーザーエクスペリエンスへの影響
Streamlitアプリにおけるカスタムショートカットキーの設定手順
ユーザビリティ向上のためのベストプラクティス
1. ショートカットキー設定のヒント
実装例とコードサンプル
テストとフィードバックの重要性
まとめ
1. 参考サイト

Streamlitについての簡単な説明

StreamlitはPythonで簡単にインタラクティブなWebアプリを作るためのオープンソースフレームワークです。複雑なフロントエンドの知識がなくても、シンプルなPythonコードを書くことで、データの可視化や操作画面を作成できる点が大きな特徴です。

本記事の目的は、Streamlitを使ったアプリケーションにカスタムショートカットキーを実装し、操作性を向上させる方法を具体的に解説することにあります。

Streamlitの基本概要

主な機能と用途

簡単にWebアプリが作れる
ボタンやスライダー、テキストボックスなどのUIパーツを数行のコードで配置可能
リアルタイム更新
ユーザーの操作に応じて自動的に再実行されるため、動的なアプリが実装しやすい
多彩なデータ可視化
Matplotlib、Plotly、Altairなどのグラフライブラリと連携可能

環境設定の基本

Pythonがインストール済みであることを確認（推奨3.7以上）
Streamlitをインストール

Bash

   pip install streamlit

   pip install streamlit

アプリの起動

Bash

   streamlit run app.py

   streamlit run app.py

ショートカットキーの重要性

なぜショートカットキーが重要か

アプリ利用中に頻繁に行う操作をマウスクリックではなくキーボード操作で効率化できます。例えば、データのリフレッシュやフィルタの切り替え、形式の変更などをショートカットキーで行えれば作業時間を大きく短縮できます。

ユーザーエクスペリエンスへの影響

ショートカットキーがあることで、ユーザーはスムーズに操作ができ、「使いやすい」「ストレスフリー」といった印象を持ちやすくなります。結果として、アプリのリピート率増加やユーザー満足度向上につながります。

Streamlitアプリにおけるカスタムショートカットキーの設定手順

Streamlit単独ではまだショートカットキーの直接設定機能が実装されていませんが、JavaScriptを埋め込み、ブラウザ側でキー操作を拾ってStreamlitのセッション状態を更新する方法があります。

ステップ1：Streamlitアプリを作成

まず、app.pyを作成し、基本的なUIを用意します。

Python

import streamlit as st

st.title(‘カスタムショートカットキーのデモ’)

if ‘count’ not in st.session_state:
    st.session_state.count = 0

st.write(f”カウント: {st.session_state.count}”)

if st.button(‘カウントを増やす’):
    st.session_state.count += 1

import streamlit as st

st.title('カスタムショートカットキーのデモ')

if 'count' not in st.session_state:
    st.session_state.count = 0

st.write(f"カウント: {st.session_state.count}")

if st.button('カウントを増やす'):
    st.session_state.count += 1

ステップ2：JavaScriptでショートカットキー検出用コードを書く

Streamlitのcomponents.htmlを使い、ページ内にJSコードを挿入します。ここでは「Ctrl + Shift + I」でカウントアップする例を示します。

Python

from streamlit.components.v1 import html

js_code = “””
<script>
document.addEventListener(‘keydown’, f

unction(event) {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === ‘i’) {
        // Streamlitのカスタムイベントを発火
        window.dispatchEvent(new CustomEvent(“increment_count”));
        event.preventDefault();
    }
});
</script>
“””

html(js_code)

from streamlit.components.v1 import html

js_code = """
<script>
document.addEventListener('keydown', f

unction(event) {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'i') {
        // Streamlitのカスタムイベントを発火
        window.dispatchEvent(new CustomEvent("increment_count"));
        event.preventDefault();
    }
});
</script>
"""

html(js_code)

ステップ3：Python側でJavaScriptイベントを検知してカウントアップ

現在のStreamlitではJavaScriptからPython側に直接イベントを送る公式APIはありませんが、Streamlitのst.experimental_get_query_paramsやst.experimental_set_query_paramsを用いた工夫や、streamlit_javascriptなどのサードパーティコンポーネントで双方向通信を実現できます。

ここでは簡単に、streamlit_javascriptコンポーネントを使う方法を紹介します。

Bash

pip install streamlit-javascript

pip install streamlit-javascript

Python

from streamlit_javascript import st_javascript

# キー検出用のJSコードを渡して結果をPythonで取得
key_pressed = st_javascript(“””
document.addEventListener(‘keydown’, function(event) {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === ‘i’) {
        window.keyPressed = true;
    }
    return window.keyPressed || false;
});
“””)

if key_pressed:
    st.session_state.count += 1

from streamlit_javascript import st_javascript

# キー検出用のJSコードを渡して結果をPythonで取得
key_pressed = st_javascript("""
document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'i') {
        window.keyPressed = true;
    }
    return window.keyPressed || false;
});
""")

if key_pressed:
    st.session_state.count += 1

※このサンプルでは単純化のため、キー押下検出や状態管理の最適化は省略しています。

ユーザビリティ向上のためのベストプラクティス

ショートカットキー設定のヒント

競合を避ける
ブラウザやOSの既存ショートカットとぶつからないキーを選定しましょう。
操作頻度を考慮
よく使う機能に優先的にショートカットを割り当てることが重要です。
ユーザーに説明を
ショートカットキー一覧やヘルプをUIに組み込み、わかりやすく伝えましょう。
柔軟なカスタマイズ
ユーザー側でキー設定を変更できる機能を検討すると、さらに喜ばれます。

実装例とコードサンプル

以下にカスタムショートカットでカウントアップする最低限のStreamlitアプリ例を示します。

Python

import streamlit as st
from streamlit.components.v1 import html

st.title(‘ショートカットでカウントアップ’)

if ‘count’ not in st.session_state:
    st.session_state.count = 0

st.write(f”現在のカウント: {st.session_state.count}”)

if st.button(‘カウントを増やす’):
    st.session_state.count += 1

# JavaScriptでCtrl+Shift+Iを検知
js = “””
<script>
document.addEventListener(‘keydown’, function(event) {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === ‘i’) {
        const countEvent = new Event(‘customIncrement’);
        window.dispatchEvent(countEvent);
        event.preventDefault();
    }
});

</script>
“””

html(js)

# Streamlitでのイベントリスナー（疑似的実装）
# 現時点で直接連携できないため、pollingなどで工夫する必要がある

# 代替として、ページリロード前提でqueryパラメータを更新する方法などもある

import streamlit as st
from streamlit.components.v1 import html

st.title('ショートカットでカウントアップ')

if 'count' not in st.session_state:
    st.session_state.count = 0

st.write(f"現在のカウント: {st.session_state.count}")

if st.button('カウントを増やす'):
    st.session_state.count += 1

# JavaScriptでCtrl+Shift+Iを検知
js = """
<script>
document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'i') {
        const countEvent = new Event('customIncrement');
        window.dispatchEvent(countEvent);
        event.preventDefault();
    }
});

</script>
"""

html(js)

# Streamlitでのイベントリスナー（疑似的実装）
# 現時点で直接連携できないため、pollingなどで工夫する必要がある

# 代替として、ページリロード前提でqueryパラメータを更新する方法などもある

実用的には他のコンポーネントや拡張パッケージを使うのが良いでしょう。

テストとフィードバックの重要性

ショートカットキーは便利ですが、実装後に必ず動作をテストしましょう。異なるブラウザやOSでキーの競合がないか、ユーザーが誤操作しやすくないかを検証することが重要です。

また、ユーザーからのフィードバックを積極的に集め、どのショートカットが必要か、また使い勝手はどうかを把握して改善していくことがユーザビリティ向上の鍵となります。

まとめ

StreamlitはPython開発者にとって強力なWebアプリ開発ツールですが、ショートカットキーをカスタマイズすることで、より直感的で速い操作環境を提供できます。今回紹介したJavaScriptを埋め込む手法やサードパーティライブラリを活用し、ユーザー体験を高める工夫をぜひ実践してみてください。

参考サイト

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