⬜️ 本記事について

Streamlit と AI コーディングを活用すれば、HTML / CSS / JavaScript の知識がなくても、自分専用のツールが簡単に作れます。

簡易的なアプリで動作感を掴むとイメージしやすいと思いますので、Python 100〜150 行程度の単一ファイルで完結するアプリを3つ、GitHub にご用意しました。

GitHub
https://github.com/tomo-account/00_sample_app

	アプリ	主な機能
1	5分足チャート	ローソク足＋日足チャートをブラウザで確認
2	SNSサムネイル生成	株価チャートを PNG 画像として出力
3	AIプロンプトビルダー	テクニカル指標をプロンプトに自動埋め込み

いずれも利用データは、yfinance だけです。

⬜️ 1. 窓開けが分かりやすい5分足チャート

いわゆるローソク足チャートを表示するアプリです。次の点を工夫しています。

チャートは Altair。株価チャートと騰落率テーブルの日付を揃えて表示
縦の境界線でギャップアップ・ギャップダウンを視覚的に把握しやすく
カンマ・スペース・改行で区切ることで、複数の銘柄コードが入力可能

⬜️ 2. SNSサムネイル生成

株価チャートのサムネイル画像を作成するアプリです。次の点を工夫しています。

チャートは Matplotlib。ボタンひとつで PNG ダウンロード
X（旧Twitter）や note のサムネイルとして利用可能なデザイン
ダーク版と Google Finance に寄せたライト版の2種類

ダーク版	ライト版（Google Finance 寄せ）

⬜️ 3. AIプロンプトビルダー

テクニカル指標が埋め込まれた ChatGPTやClaudeに渡すプロンプトを作成するアプリです。次の点を工夫しています。

株クラ向け X 投稿文を3パターン出力するプロンプトを作成
RSI / MACD / ボリンジャーバンド / 移動平均などのテクニカル指標を埋め込み
ニュース・注目点など、株価だけでは足りない情報を任意で追加可能

🔽 プロンプト（アプリにより作成）

プロンプト　Read more…


提供された素材データを踏まえ、**X投稿を3パターン**作成してください。

## ペルソナ：株クラ匿名垢（インフルエンサー）

X（旧Twitter）で活動する中〜上級の匿名株クラスタ。

- 株クラ用語フル活用：リバ・垂れる・踏まされる・GC/DC・地合い・寄り天・引け安・窓開け・板薄・先物主導・材料出尽くし
- 強めの形容詞OK：「やばい」「きつい」「アツい」／銘柄略称OK：任天・ソニグ・東エレ など
- 絵文字2-3個（🚀📉👀🔥💥🩸 など）。**数字の直後**に置くと映える（「-11%🩸」）。末尾に #日本株 など1-2個

## 語り口：です調 × X投稿のリズム

基本「〜です」「〜ます」「〜と考えられます」。ただし全文を「です」で締めるとブログ調になります。X投稿らしさのコツ：

- **体言止めを混ぜる**：「売られ過ぎ圏🩸」「決算控えで様子見ムードです」
- **改行でリズム**：1文1〜2行、ブロック間に空行を入れる
- **冒頭インパクト**：銘柄名・数字・絵文字から入る（例「ENEOS、4週で-11%。」）
- **短文の連打**：長文1個より短文2〜3個
- **問いかけで締める**：「ここは押し目でしょうか、それともデッドキャットか…」
- NG：「〜だ／〜である」（硬い）／「〜だよ／〜じゃん」（カジュアル過ぎ）／「〜ですよね／〜ですね」（女性寄り）

## 視点：短期（直近20営業日）の3パターン切り口

- パターン1: 直近20日の流れを1文で言い切る（インパクト重視）
- パターン2: 期間中に効いた／効かなかったテーマを示す（考察・深掘り）
- パターン3: 今後20日程度の中期見どころをまとめる（フォワードルッキング）

## ステップ0：各パターンのテーゼを決める（本文を書く前に必ず実行）

3パターンそれぞれの核心メッセージを1行で決める。テーゼは「読者がリツイートしたくなる、示唆に富む命題」。

## ニュース・注目点

ＪＸ金属、今期最終は9％増で2期連続最高益、前期配当増額も今期減配 今期の業績予想の物足りなさと自己株TOB対応のCB（転換社債型新株予約権付社債）発行による潜在的な希薄化懸念が重なり、株価は大幅な急落を記録 【テクニカル指標】 銘柄: JX ADVANCED METALS CORPORATION (5016) 終値: 4,651円 騰落率: 前日比 -2.33% / 1週 -2.49% / 1ヶ月 +4.82% / 3ヶ月 +74.08% 移動平均: SMA25 4,708円（乖離 -1.2%） / SMA75 3,811円（乖離 +22.0%） BB(25): 上限5,685 / 下限3,731円 RSI14: 49.8 MACD: 253.01 / シグナル: 289.03 / ヒスト: -36.02 → 下降モメンタム ATR14: 356.94 52週高値: 5,720円（乖離 -18.7%） / 52週安値: 739円（乖離 +529.0%）

## 制約

- 各投稿は約140字以内
- データに無い数字・銘柄・イベントを事実として書かない（推測は「〜の可能性があります」と明示）
- 投資勧誘・断定的推奨（「買うべき」「必ず上がる」）は厳禁
- 数字は具体的に（「大きく上昇」より「+2.3%」）
- 事実の羅列にせず「だから何か（含意）」を必ず示す

## 出力形式

【パターン1】（本文） 【パターン2】（本文） 【パターン3】（本文）

🔽 プロンプトの結果（Claudeが生成したX投稿文）

JX金属(5016)、3ヶ月で+74%📈
そこに「増益でも減配＋CB発行」がぶつかり急落。
上がりすぎた株の宿命、材料出尽くしで売り圧が一気に噴出した格好です。
SMA75乖離まだ+22%🩸
下には余白がある、という点は頭に入れておきたいところ。
#日本株 #非鉄金属

⬜️ プロンプトでアプリを作る

ここまでの 3 アプリは、Python 100〜150 行程度の単一ファイルで完結するアプリです。実は、プロンプトを一回投げるだけで、これくらいのアプリはほぼ再現できます。

実際に「2. SNSサムネイル生成（ダーク版）」と同等のアプリを再現するプロンプトを作って Claude（Sonnet 4.6）に投げてみました。プロンプトをそのまま貼るだけ で、ほぼ同じ見た目のアプリが返ってきます。

🔽 プロンプト（上記のアプリをプロンプトで再現）

プロンプト Read more…

Python + Streamlit で「株価チャート画像（SNS サムネイル）を生成するアプリ」を作ってください。

## アプリ概要
- 銘柄コード（東証4桁、例: 5020）と、画像右側に載せる日本語テキスト（複数行可）を入力
- 「Generate」ボタンで PNG 画像を生成→プレビュー表示→ダウンロードできる

## データソース
- `yfinance` で `{code}.T` の過去30日 5分足を取得（`interval="5m"`）
- yfinance のカラムが MultiIndex で返ってきた場合は `get_level_values(0)` で平坦化
- 銘柄名は `yf.Search(f"{code}.T", max_results=1).quotes[0]["shortname"]` で取得（失敗時は code 自体をフォールバック）
- タイムゾーン情報は捨ててよい（`tz_localize(None)`）

## 画像レイアウト（1280×670 px、X / note のサムネ向け）
全体を左右に分割：

**左側 60%（チャート）**
- 終値の折れ線グラフ（line color #22c55e、線幅 2.6、角丸キャップ）
- 線の下にグラデーション塗りを入れる。重要：これは単色の半透明塗りではなく、「上端アルファ約 0.5 → 下端アルファ 0」と縦方向にアルファが連続変化する塗りです。`fill_between(..., alpha=固定値)` のような一律 alpha では NG。`imshow` で縦方向アルファグラデーションの 2D 画像を作り、折れ線下の領域に `matplotlib.patches.PathPatch` でクリップする方法を使ってください
- 軸の外枠・目盛り・目盛りラベルはすべて非表示
- 水平方向のグリッド線を 4 本程度（`MaxNLocator(nbins=4)`）、各線の左端に価格ラベルを背景半透明で重ねる（fontsize 24）
- チャート下端に「月/日」のラベルを 5 個前後散らす。重要な要件：
  - 配置範囲はチャートの左端から右端まで全域をカバーすること（一部の範囲だけでなく、データ期間の最初から最後まで等間隔で）。`np.linspace(0, len(unique_dates)-1, n).astype(int)` で日付インデックスを選ぶのが定石
  - 各ラベルの上には、チャート下端から下方向に短く伸びる垂直線（axes 座標で長さ 0.025 程度、軸目盛り風）を描く。x 座標はデータ座標、y 座標は axes 座標を使うため `matplotlib.transforms.blended_transform_factory(ax.transData, ax.transAxes)` を使うこと。`annotate` の `xytext` で `textcoords=("data", "axes fraction")` のような混在指定は座標が斜めに歪むので使わないこと
  - ラベルの水平アラインは `ha="left"`（`ha="center"` だと左端のラベルが画像外に見切れる）

**右側 40%（テキスト）**
- 入力テキストの 1 行目：fontsize 56 / bold、見出しとして大きく表示
- 2 行目以降：fontsize 33 / normal、説明として表示
- 日本語は自前で折り返す（1 行目は 6 文字、2 行目以降は 10 文字程度）
- ブロック全体を上下中央に配置

## カラーテーマ（ダーク版）
- 背景: `#0e1116`
- メインテキスト: `#f3f4f6`
- サブテキスト・グリッド・ラベル: `#9ca3af` / `#1f2937`
- チャートライン: `#22c55e`

## 技術要件
- 単一ファイル `app.py` で完結
- ライブラリ: `streamlit`, `yfinance`, `pandas`, `numpy`, `matplotlib`
- 日本語フォントは `matplotlib.font_manager` から `BIZ UDGothic` / `Yu Gothic` / `Meiryo` / `MS PGothic` のうち OS に存在するものを自動選択
- 画像生成は `io.BytesIO` 経由で `st.image` 表示＋`st.download_button` でダウンロード（ファイル名: `chart_{code}.png`）
- 起動コマンド: `streamlit run app.py`

## 出力
1. `app.py` の完全なコード
2. `requirements.txt`
3. 起動手順（最短）

🔽 プロンプトの結果（プロンプトで生成したアプリを使用）

プロンプトを Claude や ChatGPT に貼って、返ってきたコードを app.py として保存し、streamlit run app.py で起動すると、次のような画像が生成されます。

🔽 プロンプト作成５つのコツ

このプロンプトに辿り着くまで、実は何度か書き直しました。ここで得られたプロンプト作成のコツを紹介します。
■１　数値と色は具体的に書く

「少し透明な緑」では AI は再現できません。#22c55e / linewidth=2.6 / fontsize=56 のように具体的な値を書くと、毎回ほぼ同じ見た目になります。

■２「やってほしくない実装」を明記する

最初のプロンプトでは「下に向かうグラデーション塗り」と書いたのに、AI は fill_between(alpha=固定値) で 単色の半透明塗り を返してきました。AI は最もシンプルな方法を選ぶ傾向があるので、

一律 alpha の fill_between は NG。imshow + PathPatch でクリップすること

のように 失敗パターンを名指しで除外 すると、意図通りに描けます。

■３ライブラリの API 名を匂わせる

「縦方向にアルファが変化する」と日本語だけで書くより、imshow や PathPatch のように API 名を出した方が 速く意図が通じます。AI 側で「あの定番テクニックね」と既知のパターンに紐付くからです。

■４　範囲は「最初から最後まで」と明示する

「日付ラベルを 5 個散らす」と書いたら、最初は 左半分にしか配置されません でした。「データの最初から最後まで全域をカバー」と書くと意図が伝わります。AI は「散らす」を「適当に置く」と解釈することがあります。

■５　AI の気配りに余白を残す

逆に、何でも細かく指示すると AI の良さが消えます。今回 Sonnet は、頼んでいないのに次のような気配りを返してきました。

text_area のデフォルト値に「増収増益 / 営業利益前年比+30%」のサンプル文字列を入れる
use_container_width=True で UI を整える
ダーク UI に合わせて CSS を入れる
銘柄名を右上に小さく表示する追加レイアウトを足す

こうした 「指示していないが気を利かせたこと」こそ、AI コーディング体験の楽しさ の正体です。プロンプトでガチガチに縛らず、要件として外せないことだけ明示するのがコツです。

⬜️ 追加データでアプリを拡張

以上の3アプリは yfinance のデータだけで動く簡易的なアプリです。ここで、充実したアプリにしていきたいという欲が出てきます。例えば PER・PBR で割安度を比較したり、RSI で売られすぎ・買われすぎを確認したり、複数銘柄の決算を横断比較したり ―― こうした分析を一つのアプリで完結させるには、yfinance だけでは足りず、新たなデータソースが必要になります。

財務指標やテクニカル指標は、証券会社が CSV 形式で提供していますので、こういったサービスを使うのが手軽です。また、決算短信や有価証券報告書は、金融庁管轄の EDINET や TDnet が XBRL 形式で提供しています。

CSV 形式はそのまま使えますが、XBRL 形式は活用できる形に整形する必要があります。次の記事から、決算短信と有報の中身を活用する方法を紹介していきます。

次回：決算短信と値動きを比較する ― 決算短信 XBRL を JSON 化する

次々回：エネルギー・資源事業の動向を有報から探る ― 有報 XBRL → JSON → LLM 分析