文系テック的

シンプルな、文字だけの、自分用のサイトをつくってみる。 誰かとつながりたいわけじゃない。たくさんの人に見られたいわけでもない。評価とか別にいらない。誰かが見てくれてもいいけど、見られなくてもいい。何か言いたかったら言ってもらってもいいけど、別に無言でもかまわない。だって書きたいだけだから。 それくらいの気持ちで文字を書きたい。 海に、手紙を詰めた小壜を流すように。波間の、できるだけ遠くに向かって投げるように。

突然、ウェブサイトをつくってみたりタロットリーディングのウェブアプリケーションをつくってみたりしはじめたのは、以前からやってみたかったからではあるけれど、さやわか氏のウェブサイト「bunkei +ech」を見たからだ。だからちょっとマネした（こわいからリンクは張らない）。 自分がちゃんと理解しているかあまり自信がないが、「それを私もやりたい」というよりは、「そうか、既存のプラットフォームが気に入らないなら自分でつくればいいのか」と改めて思い至って。30年くらい前って、みんなそうしてたよね。私はもう何十年も前、大学に入ったとき、HTMLを使ってウェブサイトをつくりましょうという授業を受けた。大学のサイトにぶらさげる形で公開するやつ。gifの動く絵をつけちゃったりするやつ。グレー地に青字とかのものすごく可読性の低い色づかいにしてしまったりするやつ。遠くに住んでる同じ苗字（ちょっと珍しい）の人からメールが来たなあ。 そのときはウェブサイト（という……なに？部屋？箱？）をつくることにそんなに関心がなく、やがてはgooとかはてなとかfc2とかのブログサービスを使うようになった。匿名で小話を書いたり、自分用のメモだったりするものとして。 そこから、公開する必要のないものは自分だけが見るクローズドなメモアプリに移して、note1とかTwitter…じゃなくてXには変わらず匿名でなにか書いたりしていた。でもなんか、いちいちうるさいのがいや。アイコンをつけろとかタイトル画像を載せろとか、「そうするともっと読まれますよ！」「いいねがもらえますよ！」とか、ほっといてほしい。別にそれがほしくて書いてるんじゃないよ。なんもなくていいの。 おおきなお世話がすぎるので、ただ文字だけ残しておく場所をつくろうと思って、こうなっている。 まだ改良中だけど、しくみを見ながら動かすの、たのしいな。本業も、パソコンで手を動かしてつくることだけど、また違うおもしろさ。 根気がないのが私の弱点だけど、ここに書くことを習慣にしていきたい。 noteに、ポメラ使ってて万年筆とタロットカードがすきでデザインとかしてるという「私かな？」みたいなプロフィールの人がいて、たぶん年齢も住んでる地域も近そうな気がする……。だからといって交流するわけじゃないけども。 ↩︎

自分専用のタロットリーディングアプリがほしい 以前、ゲーム作家の米光一成氏の講座に参加したとき、タロットカードのウェブアプリケーションをつくってくれたエンジニアの人がいた。そのときの講座内容は、米光先生作のカード（大アルカナのみ22枚）を手本に、受講生それぞれが自分なりのテーマでタロットカードをつくるというもの。そこで各自が作成したカードも、画像つきでひけるようにしてくれたのだ。講座が終わってからもけっこう使っていたのだが、リンク切れになってしまった。 自分用に、シンプルなタロットリーディングのウェブアプリケーションがほしい。ただカードを1枚開いて、キーワードを表示してくれるだけでいい。すきな枚数、重複なしでカードが尽きるまで並べたい。 こういう動きのあるウェブアプリケーションもGeminiに聞きながらつくれるかもしれない。尋ねてみると「ボタンを押したらなにか動作が起こるしくみ」を構築するには、このサイトをつくるために使ったHugoとは違い、動的なものをつくるためのプログラミング言語を選ばなくてはいけないようだ。方法はいくつもあるみたいだけど、動的なしくみを動かせて、つくった後でファイルの中身を見て勉強するのもしやすそうなPythonでつくることにした。 動きの設計 つくりかたはよくわからないが、手順や動きを言葉で説明するのは得意だ。というわけで、動作の要件を伝えた。 準備 大アルカナ小アルカナあわせて78枚のタロットカードの画像（裏は柄、表がそれぞれの絵のカード／重複なし／カードそれぞれに意味のテキストデータが付随している）を用意する。 実際の動き 画面上に「大アルカナ小アルカナあわせて78枚」もしくは「大アルカナのみ22枚」のカードの山（デッキという）が現れる。いずれかを画面上でクリックして選ぶ。次の画面へ。 画面上に「シャッフル」ボタンが現れる。ボタンをクリックすると、画面上で象徴的な画面（動かなくてよい。心理的にシャッフルしたと納得できるような画像）が表示される。その画像をクリックして次に進む。 画面上に「カードを引く」ボタンが現れる。ボタンをクリックすると、選んだデッキからカードが1枚表示され（ランダム）、カードの下に、カードに紐づいた意味が表示される。そのさらに下に「もう一枚カードを引く」ボタンと「終わる」ボタンが表示される。 同じ画面上で「もう一枚カードを引く」ボタンをクリックすると、1枚目に出たカードの下にもう1枚カードが表示され（ランダム／重複なし）、カードの下に、カードに紐づいた意味が表示される。そのさらに下に「もう一枚カードを引く」ボタンと「終わる」ボタンが表示される。 「終わる」を押すまで、選んだデッキ内のカードの枚数（78枚、もしくは22枚）が尽きるまで、カードがランダム／重複なしで表示される。 追加の条件 正位置のみ採用、逆位置はなし。 代表的な意味（キーワード）のみ記載する（Geminiが拾ってくれた）。 カードの画像はウィキメディア・コモンズから、すでにパブリックドメインになっているパメラ・コールマン・スミスのライダー＝ウェイト版を使用する（これは結局、手動でDL）。 複数のPC、iPhoneから使えるようにしたい。 ダークモードでもライトモードでも見えるようにしたい。 「実際の動き」のうち「開いたカードはそのままに、残りのデッキから別のカードを開く」という部分はGeminiによると「履歴管理」という操作になるようだ。カード全体からどれを抜いたかを記憶して、残りから選ぶ、ということだね。そういう言い方をするのか。 どうやって、なにでつくる？ Geminiによると、ウェブアプリケーションをつくるとき、通常は「裏側の処理（Pythonなど）」と「画面の見た目（HTML/CSS/JavaScriptなど）」を別々につくる必要があるとのこと（なるほど、動かすためのルールの部分をPythonでつくるのかな？）。 切り分けると、次のようになるらしい。 Pythonがやること＝裏側の処理：「78枚のカードからランダムに1枚選ぶ」「過去に引いたカードを記憶しておく」といった、頭脳にあたる計算やルールの処理。 HTML/CSSがやること＝画面の見た目：「選ばれたカードの文字を画面の真ん中に、白い四角の枠線をつけて表示する」といった、目に見えるデザインの処理。 でもこれを一からつくるのは初心者にはハードルが高い。それはそうだね。そこで、「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ライブラリは便利だが、これに頼っているだけでは、自分ではよくわかっていないままかもしれない。動くことはわかったから、書類の中身を見て勉強することにしたい。 ただ、そもそも「どういう動きをさせるか」、その条件なんかもあらかじめきちんと意図して組み立てができていないと、こんなにスムーズには完成しないみたい。 そもそも、普通はこういったアプリケーションの開発は、しくみを考える人と、製品として動くものをつくる人と、外観をきれいにする人は別なのかもしれない（よく知らないのだが）。零細企業のかなしさで、なんでも自分でやろうとしてしまうけれど。 とりあえず、次は自分のオリジナルタロットのアプリケーションをつくってみようと思う。

考えていることの置き場所にするために、Hugoでこのブログを構築した。 この数年は、日々のメモをCosense（旧Scrapbox…こっちの名前のほうがわかりやすかった）の非公開プロジェクトでとっている。ブラウザでどのパソコンからもiPhoneからも書き込めるし、たくさんページがあっても重くない。記事同士でリンクを貼ったり（張ったり？）タグをつけたりしなくても、コトバで探せて検索しやすい。内容は主に、日録とか、占いやカードリーディングの結果とか、書いてる記事のメモとかだ。ブラウザで検索した内容を書き写したりURLを張ったりすることもある。Evernoteも使っていたけど、あれってあんまり開いて後から見たりしなかった。 でもCosenseにはフォルダという考え方がないから、ページがすごく増えてきて、ちょっとどうしようかなあという感じだった。 それで、Obsidianだ。Macbook AirとiPhoneにいれていたけれど、あんまりうまく使えてなかった。どっちかというと、クローズドで管理したい内容を書く（小話とか）ためにしか使っていなかった。Cosenseから、そして以前momonoteに書いたものや、もっと前のテキストデータとかを、だんだん整理していこうと思っている。 いろんな人の、ツールの使い方を見るのがおもしろい。まとまったものにしようという人が多いと思うけれど、わたしはただ、自分の書いたものを捨てられない貧乏性なだけだけど。