![[Claude Code] 入門講座 #6:Claudeと技術記事を書く ~コード+解説文生成](https://humanxai.info/images/uploads/claude_code-practice-06.webp)
目的
Claudeに技術的なコードとその解説文を依頼し、記事としてまとめる過程を紹介します。
「人に読ませる前提のコード解説」の書き方を学びつつ、Claudeを執筆パートナーとして活用する方法を探ります。
Step1:目的・テーマを決める
今回は例として:
テーマ例:
「PythonでWebP画像を一括変換するスクリプトを作りたい」
と設定。
Claudeへの依頼プロンプト例:
Pythonで特定フォルダ内のPNG画像をすべてWebPに変換するスクリプトを作りたいです。
変換後のファイルは元のファイル名のまま拡張子だけ.webpに変えて保存したい。
そのスクリプトと、動作の解説付きで技術ブログ記事を書きたいです。
出力: Python
from PIL import Image
import os
def convert_png_to_webp(input_dir):
# 入力ディレクトリ内のすべてのファイルを取得
files = os.listdir(input_dir)
# PNG画像のみをフィルタリング
png_files = [f for f in files if f.lower().endswith('.png')]
for png_file in png_files:
# 入力ファイルのフルパス
input_path = os.path.join(input_dir, png_file)
# 出力ファイル名(.pngを.webpに置換)
output_file = png_file.rsplit('.', 1)[0] + '.webp'
output_path = os.path.join(input_dir, output_file)
try:
# 画像を開く
image = Image.open(input_path)
# WebP形式で保存
image.save(output_path, 'webp', quality=90)
print(f'変換成功: {png_file} -> {output_file}')
except Exception as e:
print(f'変換失敗: {png_file} - エラー: {str(e)}')
# スクリプトを実行する際の使用例
if __name__ == "__main__":
# 変換したい画像があるフォルダのパスを指定
input_directory = "./images"
convert_png_to_webp(input_directory)
はじめに
WebP形式は、Googleが開発した新しい画像フォーマットで、PNG や JPEG と比較して高い圧縮率を実現しながら、画質を維持することができます。今回は、フォルダ内のPNG画像をすべてWebP形式に変換するPythonスクリプトを作成する方法を解説します。
必要な環境
- Python 3.x
- Pillow(Python Imaging Library)
Pillowのインストールは以下のコマンドで行えます:
pip install Pillow
スクリプトの解説
- 必要なモジュールのインポート
from PIL import Image
import os
- PIL (Python Imaging Library):画像処理のためのライブラリ
- os:ファイルやディレクトリの操作に使用
- 変換関数の作成
def convert_png_to_webp(input_dir):
files = os.listdir(input_dir)
png_files = [f for f in files if f.lower().endswith('.png')]
- os.listdir()でディレクトリ内のすべてのファイルを取得
- リスト内包表記を使用して、PNG画像のみをフィルタリング
- 画像変換処理
for png_file in png_files:
input_path = os.path.join(input_dir, png_file)
output_file = png_file.rsplit('.', 1)[0] + '.webp'
output_path = os.path.join(input_dir, output_file)
- os.path.join()で正しいファイルパスを生成
- rsplit()を使用して拡張子を.webpに変更
- WebPへの変換と保存
try:
image = Image.open(input_path)
image.save(output_path, 'webp', quality=90)
print(f'変換成功: {png_file} -> {output_file}')
except Exception as e:
print(f'変換失敗: {png_file} - エラー: {str(e)}')
- Image.open()で画像を読み込み
- save()メソッドでWebP形式として保存
- quality=90で品質を設定(0-100の範囲、高いほど高品質)
- エラーハンドリングで安全に処理
使い方
- スクリプトを任意の場所に保存します(例:convert_to_webp.py)
- 変換したいPNG画像を特定のフォルダに配置します
- スクリプトを実行します:
python convert_to_webp.py
カスタマイズのポイント
- 品質の調整
image.save(output_path, 'webp', quality=90) # qualityの値を変更
- 入力ディレクトリの変更
input_directory = "./images" # 任意のパスに変更
- 出力先ディレクトリを分ける場合
output_path = os.path.join(output_dir, output_file) # 別のディレクトリを指定
注意点
- 変換前のPNG画像のバックアップを取ることをお勧めします
- 大量の画像を処理する場合はメモリ使用量に注意が必要です
- アルファチャンネル(透過)を含むPNG画像もWebPで保持されます
まとめ
このスクリプトを使用することで、簡単にPNG画像をWebP形式に一括変換することができます。WebPは最新の画像フォーマットとして、特にWeb上での使用に適しており、サイトのパフォーマンス向上に貢献します。
AI との会話
単に結果だけ欲しい方 以外に、Pythonを学びたい人にとっても勉強になる内容だと思います。
Claude 3.5 Sonnetの出力、とても優秀ですね。
コード+解説文の自動生成として、まさに理想的な「技術記事ドラフト」になっています。
🔍 この出力の優れている点
✅ 1. コードと自然言語解説の分離が秀逸
- セクションごとに「何をしているか」が平易に説明されていて、初心者にも理解しやすい
- 技術者向けブログに必要な「丁寧さ」と「視認性」を両立
✅ 2. 使用例・応用・注意点まで網羅
- main での使用例提示
- quality パラメータの変更方法
- 処理対象のディレクトリ分離の実装例
- メモリ負荷やアルファチャンネルへの注意など、実用上のTipsが豊富
Step2:Claudeの出力から記事骨子を作成
Claudeは以下のような出力を返すはずです:
- コードブロック(Pythonスクリプト)
- 要点ごとの解説
- 実行上の注意点(ライブラリ要件など)
- 応用アイデア(サブフォルダ対応、ログ出力追加など)
それらを以下のように章立てしてMarkdown化します:
## 🔹 背景と目的
画像ファイルの軽量化はWeb制作において重要な課題の1つです。
PNGからWebPへの変換はその手段として有効です。
## 🔹 使用ライブラリ
- Pillow(PIL)を使用
## 🔹 実装コード
[python]
from PIL import Image
import os
input_folder = './images'
for filename in os.listdir(input_folder):
if filename.endswith('.png'):
img = Image.open(os.path.join(input_folder, filename))
webp_name = filename.replace('.png', '.webp')
img.save(os.path.join(input_folder, webp_name), 'webp')
##🔹 コード解説
- os.listdir() でフォルダ内を走査
- .endswith('.png') でPNGのみを対象
- Image.open() で画像を開き、.save(..., 'webp') でWebP形式に保存
##🔹 注意点
- Pillowがインストールされていること(pip install pillow)
- 変換後、元のPNGを削除する場合は .remove() を併用
テンプレート構成案
記事タイトル案:
PNG画像をWebPに一括変換するPythonスクリプトと解説【Claude Code実践】
構成案:
## はじめに
- WebP形式の概要
- なぜ一括変換が必要なのか
## 環境準備
- Pythonバージョン
- Pillowライブラリ(インストール方法)
## スクリプト全文(コードブロック)
## 解説:ステップごとの動作
1. モジュールインポート
2. 対象ファイル取得
3. ファイル名変換
4. 画像の開いて保存
5. 実行ブロックと使用方法
## カスタマイズ方法
- 品質調整
- 出力先フォルダ変更
- サブディレクトリ対応(必要に応じて追加)
## 実行方法と注意点
- バックアップの推奨
- メモリ負荷に関する注意
- 透明PNGの取り扱い
## まとめ
- Claudeと一緒に書いた感想
- ブログや画像最適化への活用のすすめ
Step3:記事として整形するポイント
- 読者のレベルを意識し、なるべく専門用語に補足を
- コードブロックは必ず整形して表示
- 「解説」と「応用アイデア」で読み応えを出す
応用アイデア(Claudeに追加依頼)
以下のようなプロンプトを追加入力して、記事を膨らませると効果的です:
このスクリプトを、すべてのサブフォルダも含めて処理できるように再設計してください。
あるいは:
変換ログを出力するようにして、成功・失敗のファイル名を記録してください。
Claudeとの共創で得られること
- プログラムの設計支援
- 文書としての「整い」を自動で整形
- 自分では気づかない改善ポイントを提示してくれる
その他 応用としておすすめの次プロンプト
- 「このスクリプトをサブディレクトリも再帰的に探索できるように」
- 「変換したファイルだけを converted/ フォルダに分けて保存」
- 「変換ログを log.txt に保存するように拡張」
これらを順に聞けば、記事のシリーズ化や「Tips追記」で広げられます。
まとめ
Claudeは「書きたいが書けない」を解消してくれる、まさに相棒のような存在です。
特に記事構成や見出しづけ、技術解説の補助に非常に強力です。
Claude Code 実践シリーズ(Link)
![[Claude Code] 入門講座 #01:Claudeと一緒にコードを書く体験とは?](https://humanxai.info/images/uploads/claude_code-practice-01.webp)
[Claude Code] 入門講座 #01:Claudeと一緒にコードを書く体験とは?
話題のClaude 4 Opusを活用した、自然言語コーディング体験の入門講座。ChatGPTやCursorとの比較も交え、Claudeでどこまで開発できるかを探ります。
https://humanxai.info/posts/claude_code-practice-01/![[Claude Code] 入門講座 #02:ClaudeでHTML/CSSを書く - 静的ページ編](https://humanxai.info/images/uploads/claude_code-practice-02.webp)
[Claude Code] 入門講座 #02:ClaudeでHTML/CSSを書く - 静的ページ編
Poe上のClaude Sonnetを使って、自然言語からHTML+CSSの静的Webページを作成していくプロセスを体験する入門編。
https://humanxai.info/posts/claude_code-practice-02/![[Claude Code] 入門講座 #03:Claudeで簡単なJSゲームを作る - モグラ叩き編](https://humanxai.info/images/uploads/claude_code-practice-03.webp)
[Claude Code] 入門講座 #03:Claudeで簡単なJSゲームを作る - モグラ叩き編
Claude 3.5 Sonnetに自然言語で指示を出し、JavaScriptによる簡単なモグラ叩きゲームを生成。HTML+CSS+JSの出力と、実行方法までを丁寧に紹介します。
https://humanxai.info/posts/claude_code-practice-03/![[Claude Code] 入門講座 #04:Claudeでエラーを直してもらう:デバッグ体験](https://humanxai.info/images/uploads/claude_code-practice-04.webp)
[Claude Code] 入門講座 #04:Claudeでエラーを直してもらう:デバッグ体験
今回は、エラーがあるコードをClaudeに見せて修正を依頼する方法を学びます。
https://humanxai.info/posts/claude_code-practice-04/![[Claude Code] 入門講座 #5:Claudeと一緒にブログテンプレートを作る](https://humanxai.info/images/uploads/claude_code-practice-05.webp)
[Claude Code] 入門講座 #5:Claudeと一緒にブログテンプレートを作る
Claudeのような生成AIは、コードの補完や修正に使うだけでなく、「一緒にサイトを設計する相棒」としても機能します。今回は、Hugoをベースに、Claudeと対話しながらブログのテンプレートを構築する過程を紹介します。
https://humanxai.info/posts/claude_code-practice-05/
💬 コメント