MENU

ブログに写真を自動でアップする仕組みが完成した日

今日は、自分のブログに 「写真を自動でアップロードする仕組み」 を作りました。

これまでも、文字や吹き出しは自動で投稿できるようになっていたのですが、写真だけは毎回手作業でアップロードしていました。それが今日、ついに 「写真もまるごと自動」 になりました。

うさ美

覚さん、ついに画像まで自動になっちゃいましたね!

タカシナ カク

うん、これでブログを書くスピードが、また一段と早くなったよ。

未来の自分が読み返した時に「あ、ここでまた一歩進んだんだな」と分かるように、今日やったことを順番に書いておきます。

目次

今日のゴール:写真をマークダウンに書くだけで自動アップロード

ブログに写真を入れる時、これまではこんな手間がありました。

  • WordPress(ブログの管理画面)を開く
  • 「メディアを追加」ボタンを押す
  • 写真を選んでアップロード
  • 記事の中に写真を貼り付ける
  • アイキャッチ画像(記事の一番上の写真)も別に設定する

写真1枚で 3〜5分 はかかります。10枚あれば30分です。

これを 「マークダウンファイルに写真の名前を書くだけで、全部自動」 にしたい、というのが今日のゴールでした。

トラ吉

覚さん、それ夢みたいな仕組みじゃないですか?本当にできるんですか?

タカシナ カク

私も最初は半信半疑だったよ。でも、AIたちと相談しながら一歩ずつ進めたら、ちゃんとできたんだ。

まずジェミニ(Gemini)に相談した

最初に、ジェミニ(AIの一つ)に 「画像の自動アップロードってどうやって作る?」 と相談しました。

ジェミニは、こんな仕組みを提案してくれました。

  • アイキャッチ画像は EYECATCH: ファイル名.jpg と1行で書く
  • 記事中の写真は普通のマークダウン記法 ![説明](ファイル名.jpg) で書く
  • 画像ファイルは、マークダウンファイルと同じ場所に置く

これをそのままクロードコード(実際に作業してくれるAI)に投げる前に、もう一度クロード(私が相談しているAI)にチェックしてもらいました。

うさ美

覚さん、最近 **「ジェミニで案を作る → クロードでチェック → クロードコードで実行」** という流れがすっかり身についてますね。

タカシナ カク

そう、これが私の「AIの組織」の使い方なんだ。それぞれ得意なことが違うから、役割分担してるんだよ。

クロードでチェックしたら、改善点が見つかった

ジェミニの案をクロードに見せたら、いくつか 「ここを直した方がいい」 と教えてくれました。

主に直した点はこんな感じです。

  • 段階を分けて進める: 「ルール追加」「アイキャッチ機能」「本文画像機能」を一気にやらず、1つずつ確認しながら進める
  • エラーが出たら止まる仕組みを入れる: ファイルが見つからない時は、強引に投稿せずに止まるようにする
  • 日本語ファイル名の扱いを決める: 写真の名前に日本語が入っていると、URLが文字化けする可能性があるので、エラーで止める方針にする

サロンで例えると、 「お客様の髪が傷んでいたら、無理にカラーせず、トリートメントだけにする」 という感じです。問題があったら、勇気を持って止まる。これがプロの仕事だと思いました。

クロードコードで実装スタート

修正した指示文を、クロードコードに渡しました。

クロードコードは、こんな段取りで進めてくれました。

  • ステップ1:ルールブック(CLAUDE.mdというファイル)に画像のルールを追記
  • ステップ2:投稿スクリプト(post_draft.pyというファイル)を改良
  • ステップ3:テスト用の画像とマークダウンファイルを作成
  • ステップ4:実際にWordPressへ投稿してテスト
トラ吉

覚さん、それ全部AIがやってくれるんですか?

タカシナ カク

私がやったのは「指示文をコピペして送る」だけだよ。実際の作業は全部クロードコードがやってくれた。

大事なポイント:「上書き」と「部分編集」の違い

途中で、クロードコードが 「ファイルを上書きします」 と言ってきました。

「上書き」というのは、 ファイルの中身を全部書き直す という意味です。これ、ちょっと怖いんです。なぜなら、既にちゃんと動いている部分まで書き直されると、 間違って壊してしまうリスク があるからです。

そこで、 「上書きじゃなくて、部分編集(edit)で1か所ずつ進めて」 とお願いしました。

うさ美

これは大事な判断でしたね!

タカシナ カク

うん、ちょっと不安を感じた時は、立ち止まって聞き直すのが正解だね。

結果、 6回に分けて少しずつコードを書き換える ことになりました。1か所ごとに「これでいい?」と確認できるので、安心して進められました。

いよいよ動作テスト

すべての改良が終わったので、テスト用のマークダウンファイルで動作確認しました。

テスト用のファイルには、こんなものを全部入れました。

  • アイキャッチ画像(記事の一番上の写真)
  • 本文中の画像(普通の写真)
  • 吹き出し(うさ美・トラ吉・タカシナの3キャラ)
  • 見出しや太字、リスト

そして実際にWordPressに投稿してみると……

うさ美

覚さん、表示確認してきました!

タカシナ カク

どうだった?

うさ美

**本文の画像、吹き出し、見出し、太字、リスト、全部きちんと表示されてました!** ただ、アイキャッチ画像だけ見えなかったんです。

「失敗かな?」と思ったら、実は成功していた

アイキャッチ画像だけ、編集画面で表示されていない状態でした。

最初は 「あれ、失敗しちゃった?」 と思いました。でもクロードコードに調査してもらうと、 意外な結論 が出ました。

データベース(ブログの中身を保存している場所)を直接確認すると、 画像はちゃんと設定されていた のです。

ではなぜ編集画面では見えなかったのか。原因は 「テスト用に作った画像が、青一色のシンプルすぎる画像だったため、WordPressがサムネイル(小さな表示用画像)を作れなかった」 ということでした。

トラ吉

覚さん、それじゃあ本物の写真を使えば、ちゃんと表示されるんですね?

タカシナ カク

そういうことだね。機能としては完璧に動いていたんだ。

今日の大事な学び

今日、改めて気づいたことがあります。

それは、 「見た目だけで判断しないこと」 です。

「画像が表示されていない=失敗」と決めつけそうになった時、データベースを確認したら、実は 「機能は完璧に動いていた」 ことが分かりました。

これは美容室の経営でも同じです。 「お客様の表情だけ」で判断するのではなく、「リピート率」や「客単価」というデータで実態を確認する 。表面と中身は、別物のことがあります。

うさ美

覚さんって、AIとのやり取りからも経営の学びを見つけちゃうんですね。

タカシナ カク

9年やってきた美容室経営の感覚が、こういう所で活きるんだよ。

今日完成した仕組み

今日完成した仕組みを使うと、こんなことができるようになりました。

  • マークダウンファイルに 写真の名前を書くだけ で、自動でWordPressにアップロード
  • アイキャッチ画像も、本文中の写真も、 両方とも自動
  • 吹き出し、見出し、太字、リストもすべて自動
  • 日本語ファイル名の写真があったら、強引に投稿せず止まる安全設計

つまり、ブログを書く時にやることは、 「マークダウンを書く」「コマンドを1つ実行する」 だけになりました。

これまで1記事に 30分〜1時間 かかっていたのが、今は 10分以下 で投稿できる感覚です。

これからやりたいこと

これからやりたいことも、メモしておきます。

  • 本物の写真(Canvaで作ったアイキャッチや、サロンで撮った写真)でテストする
  • 美容室経営の記事を、トラ吉と一緒に書いてみる
  • ブログを見て役に立ったというお声をいただけるようにまずは日記を書き続ける

純資産1億円、毎月100万円の自動収入の仕組み化。今日作った仕組みは、その目標にまっすぐ繋がっています。

ブログを書く時間が 3〜6倍 短縮されるということは、その時間で 別のお客様を相手にできる ということ。これが資産化の第一歩です。

トラ吉

覚さん、私もこういう仕組みづくり、見習いたいです。

タカシナ カク

最初から完璧を目指さなくていいんだ。私も今日、1日で全部できたわけじゃない。 **何度も失敗して、AIたちに助けてもらいながら、一歩ずつ進めた結果なんだよ。**

結論:AIは「経営者の右腕」になる

クロードコードは、便利なツールというだけではなく、 「自分の働き方を映す鏡」 であり、 「自分の組織を作るパートナー」 だと感じています。

美容室を9年経営してきて、私の頭の中には 「お客様への向き合い方」「失敗から学んだ判断基準」 がたくさんあります。これらが今、 AIの分身 に少しずつ引き継がれています。

最初はターミナル(黒い画面)を開くのも怖かった私が、今では 3つのAIを役割分担で使いこなして、画像の自動アップロードまで作れる ようになりました。

3ヶ月後、半年後、私はどこまで進んでいるんだろう。今からワクワクしています。

未来の自分がこの記事を読んで、 「あの頃、頑張ってよかったな」 と笑ってくれますように。今日も大きく一歩、前に進めました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次