ベルトCLIスキルをインストール:
npx skills add belt-sh/cli
技術ブログの執筆
inference.sh CLI を使用して、開発者向けの技術ブログ記事を作成します。
クイックスタート
inference.sh CLI (
belt) が必要です。インストール手順
belt login
# トピックの深堀り調査
belt app run exa/search --input '{
"query": "building REST API Node.js best practices 2024 tutorial"
}'
# ヘッダー画像の生成
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;padding:60px;font-family:ui-monospace,monospace;color:white\"><div><p style=\"font-size:18px;color:#38bdf8;margin:0\">// engineering blog</p><h1 style=\"font-size:48px;margin:16px 0;font-weight:800;font-family:system-ui;line-height:1.2\">How We Reduced API Latency by 90% with Edge Caching</h1><p style=\"font-size:20px;opacity:0.6;font-family:system-ui\">A deep dive into our CDN architecture</p></div></div>"
}'
記事タイプ
1. チュートリアル / ハウツー
ステップバイステップの手順。読者はそれに従い、何かを構築できるようになることを目指します。
構成:
1. 何を構築するのか（スクリーンショット/デモ付き）
2. 前提条件
3. ステップ1: セットアップ
4. ステップ2: コア実装
5. ステップ3: ...
6. 完全なコード（GitHubリンク）
7. 次のステップ / 拡張
| ルール | 理由 |
|---|---|
| 最初に最終結果を示す | 読者は続ける価値があるか判断できる |
| 前提条件を明示的に列挙する | 間違った読者の時間を無駄にしない |
| すべてのコードブロックは実行可能であること | コピペ実行がテストになる |
| 「方法」だけでなく「理由」を説明する | 理由を説明するチュートリアルは共有される |
| エラーハンドリングを含める | 実際のコードにはエラーがある |
| 完全なコードリポジトリへのリンク | チュートリアル後の参照用 |
2. 深掘り / 解説
概念、技術、アーキテクチャ上の決定について深く解説します。
構成:
1. [概念]とは何か、なぜ重要か
2. 仕組み（簡略化したメンタルモデル）
3. 仕組み（詳細なメカニズム）
4. 実世界の例
5. トレードオフと使用すべきでない場合
6. 関連資料
3. ポストモーテム / インシデントレポート
何が問題だったのか、なぜか、どのように修正されたのかを説明します。
構成:
1. サマリー（何が起こったか、影響、期間）
2. イベントのタイムライン
3. 根本原因分析
4. 実施された修正
5. 再発防止策
6. 学んだ教訓
4. ベンチマーク / 比較
ツール、アプローチ、アーキテクチャのデータに基づく比較。
構成:
1. 比較対象とその理由
2. 方法論（結果が再現可能であること）
3. チャート/表による結果
4. 分析（数字の意味）
5. 推奨事項（注意点付き）
6. 生データ / 再現手順
5. アーキテクチャ / システム設計
システムがどのように構築され、なぜそのような決定がなされたのかを説明します。
構成:
1. 解決すべき問題
2. 制約と要件
3. 検討したオプション
4. 選択したアーキテクチャ（図付き）
5. 受け入れたトレードオフ
6. 結果と教訓
開発者向けライティングルール
文体とトーン
| すべきこと | すべきでないこと |
|---|---|
| 直接的である: 「コネクションプーリングを使用する」 | 「次の方法を検討してみてはいかがでしょうか...」 |
| トレードオフを認める: 「これにより複雑さが増す」 | 自分の解決策が完璧だと装う |
| チームの決定には「私たち」を使う | 「私が単独で設計した...」 |
| 具体的な数字: 「p99を800msから90msに削減」 | 「パフォーマンスが大幅に向上」 |
| 出典とベンチマークを引用する | 根拠のない主張をする |
| 代替案を認める | 自分の方法だけが唯一の方法だと装う |
開発者が嫌うもの
❌ 「今日のテクノロジーの急速に変化する世界において...」（中身のない言葉）
❌ 「ご存知の通り...」（もし皆知っているなら、なぜ書くのか？）
❌ 「Xを実行するだけでいい」（チュートリアルを読んでいるなら簡単ではない）
❌ 「...するのは簡単です」（読者の経験を軽視）
❌ 「明らかに...」（明らかなら書くな）
❌ 技術コンテンツにおけるマーケティング用語
❌ 3段落の前置きの後で核心を埋もれさせる
コード例
| ルール | 理由 |
|---|---|
| すべてのコードブロックは実行可能であること | 壊れた例は信頼を損なう |
| 完全で動作する例を示す | コンテキストのないスニペットは役に立たない |
| コードブロックに言語識別子を含める | シンタックスハイライト |
| コードの後に出力/結果を示す | 読者の理解を確認する |
| 現実的な変数名を使用する | fooではなくcalculateTotalRevenue |
| 例にエラーハンドリングを含める | 実際のコードはエラーを処理する |
| 依存関係のバージョンを固定する | 「React」ではなく「React 18.2で動作」 |
良いコードブロックの形式:
```python
# このコードが何をするか（1行）
def calculate_retry_delay(attempt: int, base_delay: float = 1.0) -> float:
"""ジッター付きの指数バックオフ。"""
delay = base_delay * (2 ** attempt)
jitter = random.uniform(0, delay * 0.1)
return delay + jitter
# 使用例
delay = calculate_retry_delay(attempt=3) # ~8.0-8.8 seconds
### 説明の深さ
| 読者のシグナル | 深さ |
|----------------|-------|
| 「Xを始めよう」 | すべてを説明し、事前知識を仮定しない |
| 「Xの高度なパターン」 | 基本は省略し、ニュアンスを深掘り |
| 「X vs Y」 | 両方に精通していることを前提とし、違いに焦点を当てる |
| 「私たちがXを構築した方法」 | 技術的な読者向け、基礎は省略可能 |
**想定される読者のレベルを冒頭で明示的に述べてください**:
「この記事では、Dockerと基本的なKubernetesの概念に精通していることを前提としています。 コンテナが初めての方は、[入門記事]から始めてください。」
## ブログ記事の構成
### 理想的な構成
```markdown
# タイトル（主要キーワードを含み、成果を述べる）
[ヒーロー画像または図]
**要約:** [2-3文の要約と重要なポイント]
## 問題 / なぜこれが重要なのか
[読者がなぜ気にするべきかを設定する — 具体的かつ一般的でない内容]
## 解決策 / 私たちがどのように行ったか
[核心 — コード、アーキテクチャ、説明]
### ステップ1: [最初のこと]
[説明 + コード + 出力]
### ステップ2: [次のこと]
[説明 + コード + 出力]
## 結果
[数字、ベンチマーク、成果 — 具体的に]
## トレードオフと制限事項
[欠点について正直に — 信頼を構築]
## 結論
[重要なポイント + 次にすべきこと]
## 関連資料
[3-5個の関連リンク]
タイプ別の単語数
| タイプ | 単語数 | 理由 |
|---|---|---|
| クイックヒント | 500-800 | 1つの概念、1つの例 |
| チュートリアル | 1,500-3,000 | ステップバイステップには詳細が必要 |
| 深掘り | 2,000-4,000 | 徹底的な探求 |
| アーキテクチャ記事 | 2,000-3,500 | 図が負荷を軽減 |
| ベンチマーク | 1,500-2,500 | データとチャートが大部分を占める |
図とビジュアル
図を使用するタイミング
| シナリオ | 図のタイプ |
|---|---|
| リクエストフロー | シーケンス図 |
| システムアーキテクチャ | ブロック図 |
| 決定ロジック | フローチャート |
| データモデル | ER図 |
| パフォーマンス比較 | 棒/折れ線グラフ |
| ビフォー/アフター | 比較表示 |
# アーキテクチャ図の生成
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:600px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:40px;font-family:system-ui;color:white\"><div style=\"display:flex;gap:40px;align-items:center\"><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">Client</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">React App</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #3b82f6;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">Edge</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">CDN Cache</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">API</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">Node.js</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">Database</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">PostgreSQL</p></div></div></div>"
}'
# ベンチマークチャートの生成
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"#0f172a\")\nax.set_facecolor(\"#0f172a\")\n\ntools = [\"Express\", \"Fastify\", \"Hono\", \"Elysia\"]\nrps = [15000, 45000, 62000, 78000]\ncolors = [\"#64748b\", \"#64748b\", \"#3b82f6\", \"#64748b\"]\n\nax.barh(tools, rps, color=colors, height=0.5)\nfor i, v in enumerate(rps):\n ax.text(v + 1000, i, f\"{v:,} req/s\", va=\"center\", color=\"white\", fontsize=14)\n\nax.set_xlabel(\"Requests per second\", color=\"white\", fontsize=14)\nax.set_title(\"HTTP Framework Benchmark (Hello World)\", color=\"white\", fontsize=18, fontweight=\"bold\")\nax.tick_params(colors=\"white\", labelsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.spines[\"bottom\"].set_color(\"#334155\")\nax.spines[\"left\"].set_color(\"#334155\")\nplt.tight_layout()\nplt.savefig(\"benchmark.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Saved\")"
}'
配信
開発者が読む場所
| プラットフォーム | 形式 | 投稿方法 |
|---|---|---|
| あなたのブログ | 全文 | 主 — あなたのコンテンツを所有する |
| Dev.to | クロスポスト（正規URLをあなたのものに） | Markdownインポート |
| Hashnode | クロスポスト（正規URL） | Markdownインポート |
| Hacker News | リンク送信 | プロジェクトはShow HN、ストーリーはTell HN |
| Reddit (r/programming, r/webdev など) | リンクまたは議論 | サブレディットのルールに従う |
| Twitter/X | スレッド要約 + リンク | twitter-thread-creationスキルを参照 |
| 改変版 + リンク | linkedin-contentスキルを参照 |
# Xにクロスポスト
belt app run x/post-create --input '{
"text": "New blog post: How We Reduced API Latency by 90%\n\nThe short version:\n→ Moved computation to edge\n→ Aggressive cache-control headers\n→ Eliminated N+1 queries\n\np99 went from 800ms to 90ms.\n\nFull deep dive with code: [link]"
}'
よくある間違い
| 間違い | 問題 | 修正 |
|---|---|---|
| 要約がない | 忙しい開発者は要点を得る前に離脱する | 上部に2-3文の要約 |
| 壊れたコード例 | すべての信頼を失う | 公開前にすべてのコードブロックをテスト |
| バージョン固定なし | 6ヶ月後にコードが動かなくなる | 「Node 20, React 18.2で動作」 |
| 「Xを実行するだけでいい」 | 軽蔑的、見下した印象 | 「simply」「just」「easily」を削除 |
| アーキテクチャに図がない | システムを説明する文章の羅列 | 1つの図 > 500語の説明 |
| マーケティングトーン | 開発者は即座にエンゲージメントを失う | 直接的、技術的、正直に |
| トレードオフセクションがない | 偏ったマーケティングに見える | 常に欠点について議論する |
| コンテンツの前に巨大な導入 | 読者は離脱する | 2-3段落で要点を述べる |
| 固定されていない依存関係 | 将来の読者にとってチュートリアルが動かない | バージョンを固定し、執筆日を記載 |
| 「関連資料」がない | 行き止まり、文脈がない | 理解を深めるための3-5のリンク |
関連スキル
npx skills add inference-sh/skills@seo-content-brief
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@og-image-design
すべてのアプリを表示: belt app list