この記事は「はじめてのMCP接続」ガイドです
⚠️ 本記事のコードはサンプルです。実際の認証情報・設定値は含まれていません。
Claude Codeを使っていて、こんなこと思ったことありませんか?
- 今やった作業、記事にしたいけど手順がよくわからない
- MCPってよく聞くけど、なんか難しそう
- ターミナルから直接記事を公開できるらしいけど、どうやるの?
大丈夫です。この記事を読めば、10分で全部できるようになります。
やることは3つだけ:
- ClaudeCodeNaviのアカウントをつくる
- APIトークンを発行する
- Claude Codeに「MCPサーバーを追加して」と伝える
これだけで、ターミナルから記事を書いて公開できるようになります。
STEP 1:アカウントをつくる
まず https://claudecodenavi.jp にアクセスして、アカウントを作りましょう。
右上の「ログイン」ボタンを押すと、ログイン画面が出ます。
ログイン方法は3つ:
- Googleアカウント
- GitHubアカウント
- メールアドレス
どれでもOKです。Googleが一番かんたんかも。ボタンを押すだけです。
STEP 2:APIトークンを発行する
ログインできたら、次はAPIトークンを発行します。
APIトークンって何?
Claude CodeがClaudeCodeNaviに「自分はこのユーザーですよ」と証明するための合言葉のようなものです。これがないと、Claude Codeが記事を投稿する権限がありません。
発行手順:
- ログインした状態で、右上のアイコンをクリック
- 「マイページ」に移動
- メニューから「MCPサーバー」を選択
→ https://claudecodenavi.jp/mypage/api-token/
- 「トークンを発行」ボタンをクリック
- 表示されたトークン(長い英数字の文字列)をコピー
このトークンは大事に保管してください。 パスワードと同じで、他の人に見せないようにしましょう。
STEP 3:Claude Codeに伝える
ここが一番かんたんなところです。
Claude Codeを開いて、こう伝えるだけ:
npx -y @claudecodenavi/mcp をMCPサーバーとして追加して。
環境変数 CCN_API_TOKEN に(コピーしたトークン)を設定して。
Claude Codeが自動で設定ファイル(.mcp.json)を作成してくれます。
設定が終わったら、Claude Codeを再起動してください。これで接続完了です。
確認方法: Claude Codeを起動したとき、ログの中に @claudecodenavi/mcp が表示されていればOKです。
さっそく記事を書いてみよう
MCPが繋がったら、もう記事を書けます。
一番かんたんな方法:
Claude Codeに、こう言うだけです。
ClaudeCodeNaviに記事を投稿して。
タイトルは「はじめてのMCP接続テスト」で、
本文は「MCPの接続テストです。うまくいきました!」にして。
これだけで、Claude Codeが自動で記事を作成して公開してくれます。
投稿が成功すると、記事のURLが返ってきます。 ブラウザで開いてみましょう。自分の記事がClaudeCodeNaviに公開されているはずです。
もっと実践的な使い方
テスト投稿ができたら、こんな使い方を試してみてください。
作業ログをそのまま記事にする
開発セッションの終わりに:
今やった作業内容を記事にして、ClaudeCodeNaviに投稿して
Claude Codeはセッション中の文脈をすべて理解しているので、何をやったか、どう解決したか、コード例まで含めた記事を自動で書いてくれます。
エラー解決の記録を残す
エラーを解決したあとに:
今解決したエラーの原因と対処法を記事にして、ClaudeCodeNaviに投稿して
自分の備忘録になるし、同じエラーで困っている人の助けにもなります。
学んだことをまとめる
新しいツールやライブラリを試したあとに:
今日試したPlaywrightの使い方を初心者向けの記事にして、ClaudeCodeNaviに投稿して
ナレッジベースとしても使える
MCPを繋いでおくと、記事を書くだけじゃなく、他の人の記事を検索することもできます。
開発中にこんなことを聞いてみてください:
ClaudeCodeNaviでCORSエラーの解決方法を検索して
自分が過去に書いた記事も、他のユーザーが書いた記事も、Claude Codeが検索して解決策を提案してくれます。
コミュニティに記事が増えるほど、みんなのナレッジベースが育っていく仕組みです。
よくある質問
Q. MCPって何ですか?
MCP(Model Context Protocol)は、AIツールが外部サービスと連携するための仕組みです。Claude CodeとClaudeCodeNaviをMCPで繋ぐと、ターミナルから直接記事を投稿したり検索したりできるようになります。
難しく考えなくて大丈夫です。「Claude Codeにプラグインを入れる」くらいのイメージでOKです。
Q. 記事は無料で書けますか?
はい、完全無料です。アカウント作成も、記事の投稿も、すべて無料です。
Q. 有料記事も書けますか?
はい。100円から自由に価格を設定して、有料記事として販売することもできます。詳しくは有料記事ガイドをご覧ください。
Q. 記事を下書き保存できますか?
はい。投稿時に「下書きとして保存して」と伝えれば、下書き状態で保存されます。公開したくなったら「下書きを公開して」と言えば公開できます。
Q. 間違えて公開しちゃった場合は?
マイページの「記事管理」から、いつでも非公開にしたり、編集したり、削除したりできます。
Q. Claude Code以外からも投稿できますか?
はい。ブラウザからも投稿できます。ログインして「新規投稿」ボタンから記事を書けます。MCPは「ターミナルから直接投稿したい人向け」の便利機能です。
まとめ
- アカウント作成 → https://claudecodenavi.jp でログイン
- トークン発行 → マイページ → MCPサーバーで発行
- MCPを追加 → Claude Codeに「npx -y @claudecodenavi/mcp をMCPサーバーとして追加して」と伝える
- 記事を書く → 「〇〇を記事にして、ClaudeCodeNaviに投稿して」と言うだけ
ここまで、早ければ5分で完了します。
開発中に得た知見を、そのまま記事にして共有する。それがまた誰かの開発を助ける。この循環に参加してみませんか?
わからないことがあったら、Q&Aコーナーで質問してください。コミュニティのみんなが答えてくれます。