【最速コース】アカウント登録からサンプルサイト表示・MCP入稿まで

このページでやること
ステップ1. アカウントを登録する
ステップ2. 組織とスペースの作成
- はじめは運用サンプルを使おう
ステップ3. NILTOのコンテンツをサンプルサイトで表示する
ステップ4. NILTO MCPを使ってNILTOへ入稿する
さいごに

このページでは、NILTOをはじめて使う方向けに、最速でアカウント登録からスペース作成、サンプルサイトでの表示確認、さらにNILTO MCPの設定と入稿まで進めます。

このページでやること

NILTOの公式サイトからアカウントを登録する
組織とスペースの作成
サンプルサイトをダウンロードして起動する
サンプルサイトで記事が表示されることを確認する
NILTO MCPのための事前準備
Claude Desktopの設定
Gemini CLIの設定
Cursorの設定
NILTO MCPを使ってNILTOへ入稿する

ステップ1. アカウントを登録する

NILTO公式サイトを開き、ヘッダーもしくはファーストビューに表示されている[無料ではじめる]ボタンを選択します。

するとアカウント登録画面が表示されます。

アカウントの登録は、Googleアカウントをお持ちの場合はGoogleアカウントでの認証が可能です。

それ以外の場合は、メールアドレスで認証してアカウントを登録します。
パスワードで使用できる文字は以下になります。

半角英数
8文字以上
大文字、小文字、数字を含む

ステップ2. 組織とスペースの作成

ログイン後、以下のように組織とスペースの作成画面が表示されます。

はじめは運用サンプルを使おう

運用サンプルでシンプルブログを選択してください。

運用サンプルを選択すると、予め用意されたひな形である「スペーステンプレート」を使用することができます。

スペーステンプレートを選択して作成すると、以下のようにモデルとコンテンツが作成された状態でスタートすることができます。

ステップ3. NILTOのコンテンツをサンプルサイトで表示する

では作成したコンテンツを、あなたの環境でサンプルサイトを構築して表示させてみましょう。

Next.jsで作成した簡単なサンプルサイトを用意しておりますので、以下のリンクからダウンロードしてお試しください。

サンプルサイトダウンロード

APIキーを設定する

NILTOのサイドメニューから「スペース設定 > APIキー」を選択。

「ドラフト権限付き」を選択し、トークンをコピーしてください。

環境変数にAPIキーを貼り付け

ダウンロードしたファイルの中にある.env.exampleを.envにリネームしてください。

次にファイルを開き、以下のようにNILTO_API_KEYに、コピーしたAPIキーを入力し、保存してください。

NILTO_API_KEY=<APIキーを貼り付け>

Node.jsのインストール

公式サイトからNode.jsのLTS版をダウンロードし、インストーラーの指示に従いインストールを実行します。

Node.js — Download Node.js®
https://nodejs.org/en/download

必要なパッケージをインストールする

ターミナルを開き、以下のようなコマンドでサンプルサイトがあるフォルダに移動してください。

Windowsの場合：Powershellもしくはコマンドプロンプトを起動
Macの場合：ターミナルの起動

cd <ダウンロードフォルダまでのパス>/nilto-sample-site

移動できたら以下のコマンドで必要なパッケージをインストールします。

npm install

インストール後、以下のコマンドでサンプルサイトを起動します。

npm run dev

ブラウザでサンプルサイトを開く

ターミナルにhttp://localhost:3000などのURLが表示されるので、選択してブラウザで開いてください。

これでサンプルサイトが確認できました。

ステップ4. NILTO MCPを使ってNILTOへ入稿する

MCPアクセストークン取得

サイドバーから「スペース設定 > MCPアクセストークン」を選択し、[MCPサーバーを有効にする]ボタンをクリックします。

有効後、[コピー]ボタンをクリックすることでトークンをクリップボードにコピーできます。

NILTO MCPの設定

NILTO MCPを使用するために、お持ちのAIツールでの設定が必要となります。
以下の手順を参考に設定をしてください。

Claude Desktopの設定

公式サイトからClaude Desktopアプリをダウンロードして、アプリケーションを起動します。

Claudeをダウンロードする
https://claude.ai/download

メニューから設定を開き、「開発者」を選択してください。
ローカルMCPサーバー」にある[設定を編集]を選択してください。

設定の開き方
Windowsの場合：「ファイル > 設定」
Macの場合：「Claude > 設定」

Claude用のフォルダの中からclaude_desktop_config.jsonを開き、以下のコードをコピーして貼り付けてください。

<MCPアクセストークン>と書かれている箇所は、事前準備で取得したMCPアクセストークンに置き替え後、ファイルを保存をしてください。


{
  "mcpServers": {
    "nilto": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.nilto.com/mcp",
        "--header",
        "X-NILTO-MCP-ACCESS-TOKEN:<MCPアクセストークン>"
      ]
    }
  }
}

Claude Desktopを再起動後、再度メニューから「ファイル > 設定 > 開発者」を開き、以下のようにrunningと表示されていれば設定完了です。

Gemini CLIの設定

ターミナルを開き、以下のnpmコマンドでGemini CLIをインストールします。

npm install -g @google/gemini-cli

インストール後、以下のコマンドで、Gemini CLIを起動します。

gemini

Gemini CLI起動後は、アカウント認証必要なため、画面の指示に従ってGoogleアカウントの認証をしてください。

geminiの認証完了後、グローバルディレクトリ、もしくはプロジェクトのルートディレクトリに.gemini/settings.json ファイルを作成し、以下のコードをコピーして貼り付けてください。

<MCPアクセストークン>と書かれている箇所は、事前準備で取得したMCPアクセストークンに置き替え後、ファイルを保存をしてください。

{
  "mcpServers": {
    "nilto": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.nilto.com/mcp",
        "--header",
        "X-NILTO-MCP-ACCESS-TOKEN:<MCPアクセストークン>"
      ]
    }
  }
}

保存後、Gemini CLIを再起動し、以下のコマンドを入力します。

/mcp list

以下のようにniltoが有効化されていれば設定完了です。

Cursorの設定

公式サイトからCursorをダウンロードして、アプリケーションを起動します。

Cursor
https://cursor.com/ja

起動後、メニューから「ファイル > ユーザー設定 > Cursor Settings」を開き、「Tools & MCP」から[Add Custom MCP]を選択します。

mcp.jsonが開くので、以下のコードをコピーして貼り付けてください。

<MCPアクセストークン>と書かれている箇所は、事前準備で取得したMCPアクセストークンに置き替え後、ファイルを保存をしてください。

{
  "mcpServers": {
    "nilto": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.nilto.com/mcp",
        "--header",
        "X-NILTO-MCP-ACCESS-TOKEN:<MCPアクセストークン>"
      ]
    }
  }
}

保存後、再度「Cursor Settings」を開き、「Tools & MCP」を確認します。

以下のようにniltoが有効化されていれば設定完了です。