タロットカード辞典を追加する

今日はタロットリーディングのアプリを手直し。

カードを選んで画像とキーワードを表示できる辞典機能をつけたい。

たとえばテーブルにカードタイトルを表示して、どれかの文字を押すと画像とキーワードがポップアップで出るとか。
Geminiに聞いてみるとスマートフォンで見やすいようにするならドロップダウンリストのほうがよさそう。
これもStreamlitに入っている道具「カード一覧から選ぶ」st.selectboxを使ってできるようだ。ちなみにポップアップもst.popoverまたはst.dialogでできるみたい。

すごいな。みんな思いつきそうなことは、だいたい誰かがつくってくれている、便利機能。その中身がちゃんとわかるようになりたいんだけど、先は長いなあ。

でもまずは、使いたいものをつくるということで、タイトル画面下に、ドロップダウンリストからカードタイトルを選んで画像とキーワードを表示するようなプログラムを追加した（書いたのはGeminiだ。何度も言うけど）。

ローカル環境で動きを確かめるためには、ターミナルでstreamlit run app.pyを実行。これで、リンク先のファイル名とかがまちがってるといったことを確かめられる。

ファイル構造の整理

先日、このHugoでつくったサイト自体のファイル構造も整理をしたけれど、タロットリーディングアプリのほうも整えることにした。

  • __pycashe__フォルダはPythonが自動で生成するキャッシュ（一時的なコンパイル結果）なので、削除してもよい（また勝手にできる）。
  • .devcontainerとdevcontainer.jsonは、VSCodeとかで「誰でも同じ開発環境（Dockerコンテナ）を再現するための設定ファイル」とのこと。触らないでよい（自分で書き換えたりはしないもの）。ただ、削除してもアプリは問題なく動く（自分でつくったアプリ本体のコードとは独立している）ので、消しちゃってもいい。

この2つは、自分でなんとかしなくてよいもの。

__pycashe__フォルダはGitHubにプッシュするときには含めないのが一般的とのこと。そこで、アプリのフォルダ内に.gitignoreファイルをつくって、次からこれを含めないでプッシュして！という指示を書き込んだ。
でも、GutHubにはすでに__pycashe__も含めてアップロードしてしまっている。
まずは、ターミナルでgit rm -r --cached __pycache__を実行してGitHubのリポジトリから__pycashe__を削除。--cachedをつけることで、手元のパソコンにある実際の__pycache__フォルダは削除されず、Gitの管理対象からだけ外れるのだとのこと。
これでプッシュしなおしたらきれいになった。

そして、大事なのは以下の3つ。

  • app.py メインとなる処理や画面デザインを書いた書類。画面にボタンを作ったり、ランダムにカードを引いたり、画面の遷移をコントロールするアプリのメインプログラム。
  • cards_data_py カードの順番・名称・キーワードなどをまとめた書類。カードの名前、番号、意味などのデータが整然と並んでいるデータ専門のファイルです。app.pyから呼び出して使う。
  • images タロットカードの画像が入ってるフォルダ。

だから、アプリの処理や画面デザインを変えたいときは、app.pyを修正すればいい。
Streamlitの画面表示などは（st.〜とかって、これはStreamlitの道具をつかうよ、ってこと）Markdown記法がつかえるので、Hugoでこのテキストサイトをつくったのとけっこう同じとこもある。キャプションとかを複数行にしたいときは"""（トリプルクォート）をつかうとか。

そしてStreamlitでは、特別なデザイン指定ファイル（CSSなど）をつくっていなければ、「文字の大きさやフォントはStreamlitの標準デザイン（デフォルト）が適用される」のだって。おお、これも、Streamlitの標準てのがあるのか。

  • st.title("...") 一番大きなタイトルサイズ
  • st.header("...") 大見出しサイズ
  • st.subheader("...") 中見出しサイズ
  • st.write("...") / st.markdown("...") 通常の本文サイズ
  • st.caption("...") 補足説明用の小さめのサイズ

どこか一部を変えたいならapp.pyにst.markdownを書き込む。そういえば最初につくったときにその設定した気がする（してあった）。

もし全体を一括で変えるなら.streamlit/config.tomlファイルをつくって設定するとのこと。TOML形式もHugoでつかった。へえ。

……ちょっと、あまりやってると頭が痛くなるのでこのあたりにしておこう。GitHubにプッシュして、Streamlit Cloudでリブートしたら完成。
今日はここまで。