NILTO

ドキュメント

コンテンツを作成する

更新日:2025-06-02

本チュートリアルでは、ウェブサイトでブログ記事を公開することを前提とし、アカウントの登録からコンテンツ作成までをおこないます。

アカウント登録

Googleアカウント、もしくはメールアドレスで認証してアカウントを作成します。
アカウント登録画面から登録してください。

パスワードの条件は以下になります。

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

メールアドレスによる確認手続き

入力が完了し登録へ進むと「確認メールが送信されました」と画面が切り替わります。
アカウント登録時に入力したメールアドレス宛にメール (noreply@nilto.com)からメールが届きますので、記載されているURLをクリックすると認証が完了します。

メールが届かない場合は、迷惑フォルダやプロモーションのフォルダに分けられている場合がありますので、ご確認ください。
また、メールアドレスが間違っていた場合は再度登録からお願いいたします。

組織の作成

組織の概念はこちらをご参照ください。

アカウントを作成し、再度「https://cms.nilto.com/」にアクセスすると組織とスペースを作成するダイアログが表示されます。
組織名・スペース名・コンテンツのメイン言語を設定したら右下の[作成]を押して完了します。
組織・スペース名は後から変更が可能です

ここでのコンテンツ言語とはコンテンツの内で表示される言語を指します。

スペースへ移動

組織の作成が完了すると組織内のスペースへ切り替わります。
赤枠内の部分に「スペース名」が表示されます。

モデルの作成

コンテンツのひな形となるモデルを作成します。

サイドバーから「モデル」を選択して、モデルのページに移動します。

次にヘッダーの右上にある[+モデル作成]を選択します。
もしくはサイドバーの「モデル」の右に表示される[+]ですぐにモデルを作成することができます。

モデル名とLUIDに好きな値を入力し、[作成]をクリックします。
LUID設定が可能な条件は下記になります。
ただし先頭に使える文字は英小文字と数字のみです。

  • 英小文字
  • 数字
  • アンダースコア

モデルLUIDとは、APIでこのモデルを指定するための識別子のことです。モデルのLUIDはスペース内でユニークである必要があります。

※チュートリアルでは、以下を入力しています。

  • モデル名:ブログ記事
  • モデルLUID:blog

次にフィールドを追加します。
ブログ記事に表示したい内容「タイトル」「記事本文」を追加します。
右のパネルから「1行テキスト」をドラッグして、中央にドロップ。

各種フィールドについてはフィールドを参照してください。

ドロップした後にフィールドをクリックすると、右に詳細ペインが表示されますので、フィールド名に「タイトル」、LUIDに「title」と入力し、パネルを閉じます。

同じように「フレキシブルテキスト」を追加し、詳細ペインよりフィールド名に「記事本文」、LUIDに「article」と入力し、パネルを閉じます。

右上の[保存]を押してモデルを保存します。

モデル一覧ページに戻ると、先ほど作成したモデルが表示されます。

NILTOでは1行テキストやフレキシブルテキスト以外にも様々なフィールドを用意しています。
実運用の際にはこれらを組み合わせて複雑なモデルを作成することができます。

コンテンツの作成

サイドバーから「コンテンツ」を選択してコンテンツ一覧ページに移動します。
次に[+コンテンツ作成]をクリックして、さきほど作成したモデルのコンテンツを作成します。
もしくはサイドバーの「コンテンツ」の右に表示される[+]ボタンで、すぐに新規作成することができます。

コンテンツを編集する画面が開きます。
「モデルの作成」 で追加したタイトルのフィールドに好きな文字列を入力します。

※チュートリアルでは、「1件目のブログ記事」と入力しています。

記事本文は、フィールド内の先頭段落左側の「標準」を選択し、ツールバーから「見出し2」を選択し、見出しを入力します。

他の段落にもテキストを入力します。
入力が完了したら、右上の「公開」ボタンより公開します。

公開後はステータスが「公開中」に変わり、コンテンツへの入力が出来なくなります。
再度編集したい場合は、右上の「下書きを追加」を押して下書きを編集し、上書き公開をすることで公開記事に反映させることができます。

同じ要領でコンテンツを複数件作成します。

APIレスポンスの確認

APIでリクエストしたときにどのようなデータが来るのかを確認します。
コンテンツ詳細右上の「・・・」を選択し、「APIレスポンス確認」を選択します。

「APIレスポンス確認」ダイアログより、「実行」を選択すると下のレスポンスエリアにレスポンス内容が表示されます。

APIキーの確認

上記で作成したコンテンツをAPI経由で取得する準備をします。

サイドバーの「スペース設定」からAPIキーのページへ移動します。
ドラフト権限付き(下書き+公開)のAPIキーを確認して控えておきます。

APIキーの詳細画面で行えることは以下の通りです。

  • APIキー名の編集
  • トークンの確認/コピー
  • 権限の付与/削除(コンテンツ・メディア)
  • APIキーの削除

APIアクセス

最後に、API経由でコンテンツを取得します。
以下のコマンドをターミナルで実行します。X-NILTO-API-KEY:に続く部分は、先ほど控えたAPIキーで置き換えてください。

curl -H 'X-NILTO-API-KEY:0000000000000000000000'
https://cms-api.nilto.com/v1/contents/

以下のようなレスポンスが確認できれば成功です

{
'_id': 770139705,
'_model': 'blog',
'_status': 'published',
'_title': '1件目のブログ記事',
'_created_at': '2025-05-30T01:49:12.126Z',
'_updated_at': '2025-05-30T02:20:19.567Z',
'_published_at': '2025-05-30T01:53:29.654Z',
'title': '1件目のブログ記事',
'article': '<div><h2>自己紹介</h2><p>はじめまして、これからブログ記事を書いていきます。</p><p>よろしくお願いします。</p></div>'
}

Webサイトを作成する

コンテンツの作成と、Webサイトとの連携用APIキーの取得ができました。
次に、NILTOのAPIデータを利用し、フロントエンドを構築していきます。

以下は、各フロントエンドフレームワークを利用したウェブサイト構築のチュートリアル記事です。
NILTOの利用の仕方としてご参考ください。

ナレッジ

2025-06-02T08:53:11Z

AstroとNILTOを使用したブログサイトの作成

Astroフレームワークを使用してブログ形式の新しいWebサイトプロジェクトを開始し、NILTO APIと連携させる手順を紹介します。

問題は解決しましたか?

回答が見つからない場合は、お問合せのサポート窓口からお気軽にお問いあわせください。

お問い合わせ