1分で始める：インストールと設定

このレッスンでできること

• OpenCodeにテーブルフォーマットプラグインをインストールする
• AIが生成したMarkdownテーブルを自動的に整列させる
• プラグインが正常に動作しているか確認する

現在の課題

AIが生成するMarkdownテーブルは、よくこんな感じです：

| 名称 | 描述 | 状态 |
|--- | --- | ---|
| 功能A | 这是一个很长的描述文本 | 已完成 |
| B | 短 | 进行中 |

列幅がバラバラで、見づらいです。手動で調整？時間がかかりすぎます。

いつ使うか

• AIにテーブルを生成させることが多い（比較、チェックリスト、設定説明など）
• OpenCodeでテーブルをきれいに表示したい
• 毎回手動で列幅を調整したくない

🎒 始める前の準備

前提条件

• OpenCodeがインストールされている（バージョン >= 1.0.137）
• .opencode/opencode.jsonc 設定ファイルの場所を知っている

実践しよう

ステップ1：設定ファイルを開く

なぜ：プラグインは設定ファイルで宣言され、OpenCode起動時に自動的に読み込まれます。

OpenCodeの設定ファイルを見つけます：

macOS/Linux

# 設定ファイルは通常プロジェクトのルートディレクトリにあります
ls -la .opencode/opencode.jsonc

# またはユーザーディレクトリ
ls -la ~/.config/opencode/opencode.jsonc

Windows

# 設定ファイルは通常プロジェクトのルートディレクトリにあります
Get-ChildItem .opencode\opencode.jsonc

# またはユーザーディレクトリ
Get-ChildItem "$env:APPDATA\opencode\opencode.jsonc"

お好みのエディタでこのファイルを開きます。

ステップ2：プラグイン設定を追加する

なぜ：OpenCodeにテーブルフォーマットプラグインを読み込むよう指示します。

設定ファイルに plugin フィールドを追加します：

{
  // ... その他の設定 ...
  "plugin": ["@franlol/[email protected]"]
}

すでに他のプラグインがある場合

すでに plugin 配列がある場合は、新しいプラグインを配列に追加します：

{
  "plugin": [
    "existing-plugin",
    "@franlol/[email protected]"  // ここに追加
  ]
}

期待される結果：設定ファイルが正常に保存され、構文エラーの警告が表示されないこと。

ステップ3：OpenCodeを再起動する

なぜ：プラグインはOpenCode起動時に読み込まれるため、設定変更後に再起動が必要です。

現在のOpenCodeセッションを閉じて、再起動します。

期待される結果：OpenCodeが正常に起動し、エラーが表示されないこと。

ステップ4：プラグインが有効になっているか確認する

なぜ：プラグインが正しく読み込まれ、動作していることを確認します。

AIにテーブルを生成させます。例えば、次のように入力します：

React、Vue、Angularの3つのフレームワークの特徴を比較するテーブルを作成してください

期待される結果：AIが生成したテーブルの列幅が整列され、次のようになります：

| フレームワーク | 特点                     | 学習曲線 |
|--- | --- | ---|
| React          | コンポーネント化、仮想DOM | 中程度   |
| Vue            | 漸進的、双方向バインディング | 低い     |
| Angular        | 全機能フレームワーク、TypeScript | 高い     |

チェックポイント ✅

上記の手順を完了したら、以下の点を確認してください：

チェック項目	期待される結果
設定ファイルの構文	エラーがない
OpenCodeの起動	正常に起動し、プラグイン読み込みエラーがない
AIが生成したテーブル	列幅が自動的に整列され、区切り行のフォーマットが統一されている

トラブルシューティング

テーブルがフォーマットされない？

1. 設定ファイルのパスを確認：OpenCodeが実際に読み込んでいる設定ファイルを変更しているか確認してください
2. プラグイン名を確認：@franlol/[email protected] である必要があります。@ 記号に注意してください
3. OpenCodeを再起動：設定変更後は必ず再起動してください

"invalid structure" コメントが表示される？

これはテーブル構造がMarkdownの規格に準拠していないことを示しています。一般的な原因：

• 区切り行（|---|---|）がない
• 各行の列数が一致していない

詳細は よくある質問 の章を参照してください。

このレッスンのまとめ

• プラグインは .opencode/opencode.jsonc の plugin フィールドで設定します
• バージョン番号 @0.0.3 で安定版を使用します
• 設定変更後はOpenCodeを再起動する必要があります
• プラグインはAIが生成するすべてのMarkdownテーブルを自動的にフォーマットします

次のレッスンの予告

次のレッスンでは 機能概要 を学びます。

学べること：

• プラグインの8つのコア機能
• 非表示モードでの幅計算の仕組み
• フォーマットできるテーブルとできないテーブル

---

付録：ソースコード参照

クリックしてソースコードの場所を表示

更新日時：2026-01-26

機能	ファイルパス	行番号
プラグインエントリ	index.ts	9-23
フック登録	index.ts	11-13
パッケージ設定	package.json	1-41

重要な定数：

• @franlol/[email protected]：npmパッケージ名とバージョン
• experimental.text.complete：プラグインが監視するフック名

依存要件：

• OpenCode >= 1.0.137
• @opencode-ai/plugin >= 0.13.7