akios+ext

タロットリーディングのアプリを作成（したのはGemini）

Tags: #作業ログ #Gemini #Python #Streamlit #タロットカード #文系テック的

自分専用のタロットリーディングアプリがほしい

以前、ゲーム作家の米光一成氏の講座に参加したとき、タロットカードのウェブアプリケーションをつくってくれたエンジニアの人がいた。そのときの講座内容は、米光先生作のカード（大アルカナのみ22枚）を手本に、受講生それぞれが自分なりのテーマでタロットカードをつくるというもの。そこで各自が作成したカードも、画像つきでひけるようにしてくれたのだ。講座が終わってからもけっこう使っていたのだが、リンク切れになってしまった。

自分用に、シンプルなタロットリーディングのウェブアプリケーションがほしい。ただカードを1枚開いて、キーワードを表示してくれるだけでいい。すきな枚数、重複なしでカードが尽きるまで並べたい。

こういう動きのあるウェブアプリケーションもGeminiに聞きながらつくれるかもしれない。尋ねてみると「ボタンを押したらなにか動作が起こるしくみ」を構築するには、このサイトをつくるために使ったHugoとは違い、動的なものをつくるためのプログラミング言語を選ばなくてはいけないようだ。方法はいくつもあるみたいだけど、動的なしくみを動かせて、つくった後でファイルの中身を見て勉強するのもしやすそうなPythonでつくることにした。

動きの設計

つくりかたはよくわからないが、手順や動きを言葉で説明するのは得意だ。というわけで、動作の要件を伝えた。

準備

大アルカナ小アルカナあわせて78枚のタロットカードの画像（裏は柄、表がそれぞれの絵のカード／重複なし／カードそれぞれに意味のテキストデータが付随している）を用意する。

実際の動き

  1. 画面上に「大アルカナ小アルカナあわせて78枚」もしくは「大アルカナのみ22枚」のカードの山（デッキという）が現れる。いずれかを画面上でクリックして選ぶ。次の画面へ。
  2. 画面上に「シャッフル」ボタンが現れる。ボタンをクリックすると、画面上で象徴的な画面（動かなくてよい。心理的にシャッフルしたと納得できるような画像）が表示される。その画像をクリックして次に進む。
  3. 画面上に「カードを引く」ボタンが現れる。ボタンをクリックすると、選んだデッキからカードが1枚表示され（ランダム）、カードの下に、カードに紐づいた意味が表示される。そのさらに下に「もう一枚カードを引く」ボタンと「終わる」ボタンが表示される。
  4. 同じ画面上で「もう一枚カードを引く」ボタンをクリックすると、1枚目に出たカードの下にもう1枚カードが表示され（ランダム／重複なし）、カードの下に、カードに紐づいた意味が表示される。そのさらに下に「もう一枚カードを引く」ボタンと「終わる」ボタンが表示される。
  5. 「終わる」を押すまで、選んだデッキ内のカードの枚数（78枚、もしくは22枚）が尽きるまで、カードがランダム／重複なしで表示される。

追加の条件

「実際の動き」のうち「開いたカードはそのままに、残りのデッキから別のカードを開く」という部分はGeminiによると「履歴管理」という操作になるようだ。カード全体からどれを抜いたかを記憶して、残りから選ぶ、ということだね。そういう言い方をするのか。

どうやって、なにでつくる？

Geminiによると、ウェブアプリケーションをつくるとき、通常は「裏側の処理（Pythonなど）」と「画面の見た目（HTML/CSS/JavaScriptなど）」を別々につくる必要があるとのこと（なるほど、動かすためのルールの部分をPythonでつくるのかな？）。

切り分けると、次のようになるらしい。

でもこれを一からつくるのは初心者にはハードルが高い。それはそうだね。そこで、「Streamlit」という「Pythonライブラリ」を採用した（のだってさ、Geminiがね）。

……なるほ、ど？

あれ？　Streamlitは「Pythonでウェブアプリケーションを構築できるフレームワーク」という説明をどこかで見たのだけど、ライブラリとフレームワークってどう違うんだろう。

ライブラリ：特定の便利な機能が詰まった、使い回せる部品の詰め合わせ（道具箱）。ゼロからプログラムを書くと大変な処理（「ランダムにカードを選ぶ」「画面にボタンを表示する」など）を、ほかのプログラマがすでに作成してパッケージ化してくれている。

フレームワーク：アプリケーションの土台や骨組み、開発全体のルール（テンプレート、設計図）。

Streamlitは「ライブラリ」に分類されてはいるが、画面全体の動きを制御してくれるので、「フレームワークに近い性質を持ったライブラリ」といえるらしい。

Streamlitを使うことで「画面の見た目」から「裏側の判定処理」まで、すべてPythonだけで一括で記述できる。Pythonのコードを上から下へ実行するだけで裏側で勝手にウェブ画面を構築する「レール」を用意してくれているので、作成者がウェブのしくみ（HTMLやサーバーの通信など）を意識せずにアプリケーションを完成させることができる。

うん。なんとなくわかった（としよう）。

PythonとStreamlitをインストール

Mac miniにPythonは入っていたから、Streamlitをインストールした。途中で「メールアドレスいれてよ」っていってくるけど無視していい（ターミナルで勧誘するのやめてよ）。

Geminiの作業は早い。ためしに3枚くらいのカードでささっと動作を確認し、おかしな挙動を修正して（するのはGemini）、「大アルカナだけ」「小アルカナも追加」と段階的にカードを増やしてテスト。うーん、すごい。なんて簡単にできるんだ。部品をつくってくれた人ありがとう。

最後にカード裏面画像と全カード表面の画像を用意して、番号をつけ直してimagesフォルダにまとめる。ダークモード・ライトモードをきりかえると文字が消えてしまうところがあったり、表示された画像が枠とずれていたりセンタリングにならなかったり、小さな問題を修正してもらい、完成！

どこからでも使えるよう、サーバーにデータを置く

自分のMac miniというローカル環境で動きは確認できたけれど、まだほかのPCやiPhoneでは動かない。どこからでも動かせるようにしたいなら、動的なしくみを動かせるサーバーにデータを置かないといけないようだ。ふむ。「サーバーにデータを置く（公開する）」ことをデプロイ（Deploy：展開する）というのだな。

サイトを公開するときに使った「Cloudflare Pages」は基本的には静的なデータしか扱えないみたいなので、今回は「Streamlit Community Cloud」にアカウントをつくった。

そして、GitHub（このサイトを公開するためにも使っている）のリポジトリに、タロットリーディングアプリケーションのデータをプッシュ。これをStreamlit Community Cloudと連携し、アプリをデプロイした。

サーバーに公開したとはいえ、リポジトリ自体は非公開だからアプリ自体も非公開。サインインした自分だけが使えるものになった。

ほしいものはつくることができた、けれど

おお！ 恐るべきはやさでできあがった。動きも軽くていい感じだ。「カードを1枚ひきたい」「余計な解釈はなしで、絵とキーワードだけほしい」「追加ですきなだけカードをひきたい（この次どうなる？とかこれに対処するには？とか自分で決める）」という、要望に応えてくれる。

正直に言えば「自分でつくった」という感じはあんまりない。Pythonライブラリは便利だが、これに頼っているだけでは、自分ではよくわかっていないままかもしれない。動くことはわかったから、書類の中身を見て勉強することにしたい。

ただ、そもそも「どういう動きをさせるか」、その条件なんかもあらかじめきちんと意図して組み立てができていないと、こんなにスムーズには完成しないみたい。

そもそも、普通はこういったアプリケーションの開発は、しくみを考える人と、製品として動くものをつくる人と、外観をきれいにする人は別なのかもしれない（よく知らないのだが）。零細企業のかなしさで、なんでも自分でやろうとしてしまうけれど。

とりあえず、次は自分のオリジナルタロットのアプリケーションをつくってみようと思う。