ターミナル

タロットカード辞典を追加する 今日はタロットリーディングのアプリを手直し。 カードを選んで画像とキーワードを表示できる辞典機能をつけたい。 たとえばテーブルにカードタイトルを表示して、どれかの文字を押すと画像とキーワードがポップアップで出るとか。 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でリブートしたら完成。 今日はここまで。

ローカルで確認しながらつくったウェブサイトを、GitHubのリポジトリとCloudflare Pagesを接続して公開までできた。 途中でGeminiが言ってる画面にならなくて接続先をまちがってたりしたけども、なんとかできたー！ 最後に、hugo.tomlの中のURLを修正したら、個別のページもちゃんと開けるように。 おお、達成感。 今はウェブ上にいろいろプラットホームが整えられて、アカウントをつくれば簡単に写真も文章も載せられる。でも、いちいち「トップページに画像をつけると見られやすいですよ！」「人気のタグをつけると検索で見つけられやすいですよ！」とか言ってきて、もういいのやめてよ、ってなってしまう。うんざり。 それに、誰かがゼロからつくったものに乗っかるだけなのも、なんだか嫌だなと思うようになっていた。 ……まあ、とはいえGeminiに聞きながらだし、静的サイトジェネレーターとかGitHubとかをつかっているのでまったくゼロからではないが。 こんなシステムをつくった人たちはすごいよね。アイデアもすごいし、実現したのもすごい。だからせめて、わたしも手を動かして、「どこが合ってる／間違ってる」「簡単そうに見えてそんなことない」といったことを体感したいと思ったのだ。 体感て大事だよね。体感するからこその達成感。 それから、Gemini（生成AI）の出力した内容をを「いちいちチェックする」ということもちゃんとやろうと思った。 おしゃべりの文字面だけだとそれらしい感じで納得させられてしまうけれど、実作業がともなうと、途端に「あなたの言ったとおりにならないよ？」ってことがいっぱいあると気がつく。もちろん自分が入力間違えたり違うファイルに書きこんでたりする場合もあるが、AIが間違っていることもけっこうある。スクリーンショットを見せたりエラーメッセージを示したりして「あなたが想定したようになってない。実際はこうなってるよ？」とつっこんだら、Geminiが「ああ、わたしの勘違いでした！」とか言ってくる。相談しながら進めていく感じ。 「AIにやらせておけばいい」「人間より間違いが少ない」なんてことは言えないんだな、と“わかる”。 どうしても書きたいことがあるわけではないが、誰にも邪魔されずに書ける場所をつくることができたかな。 っていうのを真夜中に書いて更新したつもりだけど、反映されない！　なんでだ。と思ったらもしかして、日付か？　えっ、真夜中はまだ前日のカウントなの？ 明日に続く。 時間の設定ってどうなってるんだっけ？ トップページが寂しいからなにか増やしたい。 iPhoneから更新するの、どうやる？ 一日に2つ以上の記事はつくれないの？ 個別記事の中に別の記事のリンクを貼るにはどうする？

昨日、思い立ってテキストだけの、すごくシンプルなウェブサイトをつくってみた。 VScodeを使いこなせるようになりたいから、Markdownでテキストを書いて、それをアップロードするシンプルなものにしたい。 GitHubとかターミナルとかコマンドプロンプトとか勉強したいから、適宜、使ってみたい。 最初は、読んだ人の反応とかコメントとかもらうのはつけなくていい。 それでGeminiに聞いたら、HugoとAstroという静的サイトジェネレーター（SSG）を勧められた。 どっちも高速でさくさく動くけど（Hugoは作業速度が早い、Astroは端末での表示速度が早い）、Hugoは最初からブログむきの機能がいろいろはいってるのが特徴みたい。 なるほど、じゃあそれでやってみよ。 というわけで、紆余曲折ありながらもいちおう完成！　Hugoはすでにいろいろなテーマ（画面構成・デザインのパッケージ）がつくられているから、最初はそれを使ってセッティングすればよいとのこと。 とはいえ、選んだテーマが古かったりして（リンク先がないとか）うまく反映されなかったけど、【hugo-bearblog】というテーマでなんとか作成。それから順次整理していった。 サイトのタイトルを変更するにはどうしたら？ 新しい記事を作るのはどうする？ 各記事にタイトルを表示したいけど、どこに何を書けば？ 最初に作成したMac miniだけじゃなく、MacBook Airでも作業するためにGitHubに保存したい。どうやる？ MacBook Airにはどうやってデータを持ってくる？ 記事にタグをつけたい、各記事にもタグを表示したい。どうするの？ Hugoの基本は、 記事作成はcontent > postフォルダ内にmd書類を置くことでできる。 publicフォルダは、Hugoを起動したときに自動的にできるもの。中身を触っても意味はない（失敗タグとかが残るから気になったら削除しちゃってOK）。 themesフォルダの中身は触らない！　ページの見た目を変更したいときはlayoutフォルダの中で行う。 予期せぬエラーが多々あったけれども、ひととおり完成。 ■ フォルダ一式をgitに保存したりgitから持ってきたりする 以下の手順（で、ターミナルで作業）。 ターミナルで使う場所を確定　cd 使う場所（フォルダ名） add　git add . commit　git commit -m "保存段階に名前つける" push　git push origin main pull　git pull origin main clone　git clone https://github.com/ユーザー名/サイト名.git クローンは、サイトのフォルダ一式を丸ごと新規にDLすること。まだPC上にフォルダ一式がないときだけじゃなく、なんか作業がうまくいかなくなったときとか問題を切り分けたいときには有効。作業中の書類は残しておいて、うまくいったところまで戻して試してみるとかできる。 この `git push origin main`とかのインラインコードの表現を変えたいんだけど（文字を小さくしたくない、背景色をつけたい）、何をやってもうまくいかず。なかなか全部思い通りにならないな……。 カスタムはここまでにして、プッシュして終わりにする。 そして次はCloudflare Pagesを設定しようかな。 MacBook Airにプルしてみたら、やっぱりmd書類の中を更新しても反映されない問題が。で、昨夜クローンしたフォルダの中を見てみたら、themes > hugo-bearblogの中がからっぽだった。 ……これ、昼に同じことやったよ？　Geminiよ、たぶん、昨夜うまくいかなかったのもここだよきっと。 ...

このブログの最初から、さかのぼった日付で作業中（だから実際にはこれも6/21に作成したもの）。 ふむふむ。ターミナルから新規記事作成の指示をしなくても、content > post の内に直接mdファイルを作ったっていいんだよね？ そしたらターミナルでデスクトップ上のquickstartフォルダ（ウェブサイトデータ一式があるところ）に移動してhugo server -DでHugoを起動する、と。 そしたらローカルで表示するためのURLが出るから、それをChromeに貼って表示する。 うむ。とりあえず、そういうことで合ってるみたい。

このブログの最初から、さらにさかのぼった日付で作業中（だから実際にはこれも6/21に作成したもの）。 ひととおり、Mac miniでつくったウェブサイトのデータをGitHubのリポジトリにプッシュして保存。 それを、自分のMacBook AirにDL（プル）した。 ターミナルを立ち上げてcdでフォルダ移動して、すでにおなじみのhugo server -Dを入力した。……けれど、そもそもMacBook AirにはまだHugoが入ってなかった。 Hugoを入れるために、まずMacPortsを入れる。そしてHugoをインストール。 よし、MacBook Airでも、準備ができたね。