TeleportHQでデータベースを使ったウェブサイトを作成する方法

データベースを使ったウェブサイトの作成には、情報の整理、保存先の選択、ページへの接続、公開したサイトの動作確認という、主に4つの作業があります。TeleportHQでは、組み込みのホスト型データベースを利用するか、すでに管理している対応データベースに接続できます。

このガイドでは、両方の方法を解説し、データベースがブログやヘルプセンター、ECサイトをどのように支えるかを紹介します。また、検索可能なコースカタログの作成手順も説明します。同じ手順は、ディレクトリやリソースライブラリなど、構造化されたコンテンツを中心とするウェブサイトにも応用できます。

ウェブサイトのデータベースとは？どのように動作する？#

ウェブサイトのデータベースには、サイトで表示または管理する情報が保存されます。ブログの場合は投稿と関連コンテンツ、オンラインストアの場合は商品と注文情報が含まれます。研修サイトの場合は、コースや講師、今後開催されるセッションなどが保存されます。

データベースとウェブサイトの役割は異なります。データベースは情報を保存し、ウェブサイトはページを通じてその情報を表示するとともに、設定された操作をユーザーが行えるようにします。

コースカタログを例に考えてみましょう。データベースの1つのレコードに、写真コースの詳細が保存されています。一覧ページでは、他のコースと並べて、そのタイトル、画像、価格を表示します。ユーザーがコースを開くと、詳細ページで同じ保存情報を使って説明の全文が表示されます。

コースの情報が表示されている場所をすべて探して書き換えなくても、コースのレコードを更新できます。接続されたページは、それぞれの設定とキャッシュの動作に応じてデータを取得します。

知っておきたい用語#

このタイプのウェブサイトを構築するために、データベース管理者になる必要はありません。いくつかの用語を知っておくと、設定を理解しやすくなります。

データベース駆動型のウェブサイトは、保存されたレコードとページレイアウト、アプリケーションの動作を組み合わせます。その結果、ページを1つずつ個別に設計することなく、何百ものページを含むサイトを作成できます。

ブラウザーを通じてアクセスまたは管理するデータベースを「ウェブデータベース」と呼ぶこともあります。このガイドでは、ウェブサイトに情報を提供するデータベースに焦点を当てます。

ウェブサイトにデータベースが必要になるのはどんなときですか？#

繰り返し使うコンテンツを管理したり、増え続けるアイテムのコレクションを整理したり、購入などのアクティビティを保存したりする場合、データベースが役立ちます。

よくある理由は次のとおりです。

• 共通のレイアウトを使って記事を公開する。
• 訪問者が検索や絞り込みを行えるカタログを表示する。
• 各商品、コース、ディレクトリの掲載項目に個別のページを用意する。
• 複数の場所に表示される情報を一元管理する。
• 設定したウェブサイト上の操作を通じて作成されたレコードを保存する。

サービスページが数ページだけの小規模事業者のウェブサイトなら、データベースは必要ない場合があります。情報の変更頻度が低く、繰り返し使われる構造に沿っていないのであれば、ページを直接編集するだけで十分なこともあります。

また、コンテンツをデータベースに保存しても、サイトの表示方法が自動的に決まるわけではありません。保存したコンテンツから静的ページを生成するウェブサイトもあれば、ページのリクエスト時にデータを取得するウェブサイトもあります。構築方法は、情報に求められる最新性や、訪問者が行える必要のある操作に合わせて選びましょう。

TeleportHQで構築できるデータベースを活用したウェブサイトの例#

独自のテーブルを作成する前に、必要なサイトの種類を既存の機能で実現できないか確認しましょう。TeleportHQでは、公開や販売に対応したデータベース連携機能に加え、データからカスタムページを作成するツールも利用できます。

ブログ：デザインとは別に投稿を管理する#

ブログでは、各記事のコンテンツを表示用のレイアウトとは別に保存します。共通の投稿テンプレートでタイトル、著者、記事本文を表示し、ブログ一覧では記事をまとめて閲覧できるようにします。

、 TeleportHQのブログビルダーを使うと、ブログのコンテンツシステムを一覧ページや投稿ページに連携できます。それぞれの見た目をカスタマイズし、利用可能なブログツールや管理画面から投稿を管理できます。

チュートリアルを公開する企業の場合、既存のページを複製してコンテンツブロックを作り直さなくても、編集チームは新しい記事を追加できます。カテゴリーを使えば、読者は関連する情報を見つけやすくなります。また、記事のデザインを統一することで、読みやすさを保てます。

データベースによってコンテンツに構造が生まれます。それでも編集者は、各記事に何を含めるか、カテゴリーをどう運用するか、いつ公開可能と判断するかを決める必要があります。

ヘルプセンター：回答を検索可能なリソースとして整理する#

ヘルプセンターも同様の仕組みを使いますが、対象となる読者は異なります。サポート記事を開く人は、通常、特定の作業や問題を解決しようとしています。そのため、記事のレイアウトだけでなく、検索機能やカテゴリー別のナビゲーションも重要です。

TeleportHQに組み込まれたヘルプセンターでは、記事やカテゴリーのページを備えた、検索可能なサポートエリアを作成できます。さらに、幅広い ナレッジベース機能 を活用して、構造化されたドキュメントやサポートコンテンツを中心とするシステムを構築できます。

たとえば、ソフトウェア企業はガイドをアカウント設定、請求、製品の使い方に分類できます。手順を更新するときは、該当するコンテンツレコードを変更します。共通のレイアウトはそのままに、記事を一貫した形式で表示できます。

顧客がよく尋ねる質問をもとにカテゴリーを設定しましょう。「データをインポートする」というカテゴリー名は、インポートを担当する社内チーム名よりも、新しい顧客にとって役立ちます。データベースは選んだ分類を支えますが、その分類が読者にとって分かりやすいかどうかまでは判断できません。

eコマース：ストアフロントを商品データや注文データに連携する#

ECサイトでは、公開情報と業務記録の両方にデータベースを使用します。商品データは商品カタログや商品ページに反映されます。購入が発生すると、事業者が処理するために必要な注文情報が作成されます。

TeleportHQのECサイトビルダー では、ストアフロントのページ、チェックアウト、関連データを設定できます。ショッピング体験をカスタマイズし、注文の受付や処理に必要なサービスや業務ルールを構成できます。

データベースを接続するだけでは、ショップは機能しません。チェックアウトのロジック、決済の設定、注文処理も必要です。EC機能を利用すれば、商品リストだけで完成したストアとして扱うのではなく、こうした要件に対応するための基本構成を利用できます。

小売事業者にとって有用な確認方法は、購入の流れ全体を試すことです。買い物客が商品を開き、購入する商品を選び、チェックアウトを完了し、想定どおりの確認通知を受け取れるかを確認します。商品ページは、その一連のプロセスの一部にすぎません。

カスタムカタログとディレクトリ#

独自のコレクションを作成する場合は、レコードを自分で定義し、再利用可能なページデザインと関連付けられます。例として、仕入先ディレクトリ、不動産カタログ、ダウンロード可能な資料のライブラリなどがあります。

以下の手順では、構造を把握しやすいコースカタログを例に説明します。訪問者はコースを閲覧し、トピックで絞り込み、詳細ページを開きます。最初の段階では情報を表示するだけにとどめ、学生アカウント、有料登録、学習管理システムは追加しません。

対象範囲を明確にしておくと、より複雑なアプリケーションの動作を導入する前に、基本的なウェブサイトを完成させやすくなります。

ウェブサイトのデータベースの構築方法を選ぶ#

TeleportHQでは、データベースを構築する方法として、組み込みデータベースをプロビジョニングするか、対応する既存のデータベースに接続するかの2つが主にあります。情報がスプレッドシート、API、ヘッドレスCMSにある場合は、ほかの種類のデータソースも利用できます。

TeleportHQのデータベースツールは これらの選択肢をウェブサイト構築のワークフローに取り入れます。どれを選ぶかは、情報が現在どこに保存されているか、誰が管理しているか、完成したプロジェクトをどこでホストする予定かによって異なります。

新しいプロジェクトには組み込みオプションを使用する#

TeleportHQでは、エディターから設定できるホスティング型のPostgreSQLデータベースを提供しています。プロジェクトごとに専用のデータベースが用意され、テーブルの作成やレコードの管理ができます。

コースカタログを作成する場合、データサービスをまだ利用していなければ、手軽に始められる方法です。コース情報を、ページのデザインと同じプロジェクト内で整理できます。

既存のデータベースが正式な情報源である場合は、そのまま使い続ける#

組織がコース情報を別の場所で管理している場合は、手作業で管理するコピーを新たに作るのではなく、そのデータベースへの接続を検討してください。

TeleportHQは、PostgreSQL、MySQL、MongoDB、Supabaseなどのコネクターに対応しています。コネクターによって、設定要件や編集機能は異なります。選択した接続先が、プロジェクトで必要な操作に対応していることを確認してください。

データベースを接続しても、TeleportHQに移行されるわけではありません。引き続きプロバイダーがホスティングを行い、そのサービスの設定はチームが管理します。

ステップ1：コンテンツと訪問者の導線を決める#

まず、訪問者にどのような操作を完了してほしいかを書き出します。この例では、利用可能なコースを閲覧し、関連するトピックを探し、コースページを開いて、問い合わせリンクから連絡するという流れです。

この導線から、主なページタイプは2つ考えられます。

• コースカード、検索機能、カテゴリーによる絞り込み機能を備えたカタログページ。
• 詳細な説明と問い合わせへの導線を備えた、コース詳細ページ。

チームがコースを追加し、情報を更新できる方法も必要です。最初のバージョンでは、エディターのデータベースツールからレコードを管理できます。

フィールドには、一覧ページと詳細ページの両方で必要な情報を反映します。短い概要があればコースを比較しやすくなり、詳しい説明では、コースを開いた後に学べる内容を伝えられます。

シンプルなデータ構造を設計する#

最初のコーステーブルには、次のフィールドを使用できます。

これは構造の一例であり、プラットフォームの要件ではありません。社内研修用のコースカタログでは、価格や問い合わせの項目は不要な場合があります。一般公開のワークショップ一覧では、代わりに開催日や場所が必要になる場合があります。

適切なデータ型を使用してください。所要時間を数値として保存すれば、数値による並べ替えが可能です。「約10時間」のように自由記述のテキストで保存すると読みやすい場合はありますが、絞り込みや並べ替えの際に数値として扱うことはできません。

必須項目を決めましょう。コースにはタイトルと一意のページ識別子が必要です。画像が任意の場合は、画像がないときにページに何を表示するかを決めておきましょう。

情報を共有する必要がある場合は、関連付けを追加しましょう#

複数のコースを同じ講師が担当する場合は、講師テーブルにその人の詳細を一度だけ登録できます。各コースから、該当する講師のレコードを参照できます。

これにより、同じ経歴を複数のコースにコピーしたり、変更のたびにすべてのコピーを更新したりする必要がなくなります。TeleportHQのテーブル構造ツールは、内蔵データベースを含む対応データベースで外部キーをサポートしています。

最初のモデルは、理解しやすい規模に保ちましょう。明確な理由がある場合にのみ関連付けを追加します。すべての項目を別々のテーブルに分けると、初心者向けのプロジェクトの管理が難しくなります。

ステップ2：データベースを作成または接続する#

保存する情報が決まったら、プロジェクトにデータベースを追加しましょう。

TeleportHQの内蔵データベースを作成する#

1. エディターの左サイドバーで「データソース」を開きます。
2. プラスボタンをクリックして、データソースを追加します。
3. TeleportHQ データベースを選択し、識別しやすい名前を付けます。
4. ホスティングに関する注意事項とプランの制限を確認します。
5. 「TeleportHQ データベースをセットアップ」を選択します。

セットアップが完了すると、データベースがプロジェクトのデータソースに表示されます。データベースを開いてテーブルの追加を始めましょう。 組み込みデータベースの設定ガイド では、インターフェースとよくあるプロビジョニングの問題について説明しています。

プロジェクトに組み込みデータベースがすでにある場合は、その既存の接続を使用してください。別の機能を有効にした際に、以前作成されていることがあります。

代わりに外部データベースを接続する#

既存のデータソースを使用する場合は、「データソース」で該当するコネクタを選び、要求された接続情報を入力します。ホスト、データベース名、認証情報、またはプロバイダーから提供された接続文字列が必要になることがあります。

データベースはTeleportHQのサーバーからアクセスできる必要があります。プロバイダーとともに、必要な認証済みアクセスと安全な接続設定を構成してください。

スキーマを取得すると、TeleportHQが利用可能な構造を検出できます。ページに接続する前に、インポートされたテーブルまたはコレクションを確認してください。 外部データベース接続ガイド では、対応しているコネクタとそれぞれの要件について説明しています。

接続に成功したことはアクセスが確認されたことを示しますが、すべてのレコードが一般公開に適していることを意味するわけではありません。機密性の高い運用データは、訪問者に公開する情報と分けて管理してください。

ステップ3：テーブルを作成してデータを入力する#

データベースを用意したら、最初のステップで計画した構造を作成します。データベースパネルの「新しいテーブルを追加」カードから、手動での作成、AIによる生成、対応ファイルのインポートを選べます。

コースカタログ用にcoursesテーブルを作成し、カラムを追加して、必要なフィールド型を設定します。主キーを割り当て、slugフィールドを一意に設定して、各レコードに個別の公開用識別子を付与します。

AIを使って設定する場合は、テーブル、フィールド、リレーションシップについて説明してください。必須の値と、一意にするフィールドを明確に指定しましょう。本番データを追加する前に、生成結果を確認してください。AIによる生成にはトークンを使用し、最終的な判断はご自身で行う必要があります。

ヘルプセンターのガイドでは、どちらの方法も解説しています： データベーステーブルの作成.

すべてをインポートする前にサンプルレコードを追加する#

「View Data」からテーブルを開き、少数のコースを追加します。デザインをテストできるよう、サンプルに十分なバリエーションを持たせましょう：

• 短いコース名と、かなり長いコース名。
• 異なるカテゴリのコース。
• 任意の画像を設定していないコース。
• プロジェクトで価格を0円に設定できる場合は、無料コースとして表示できます。
• 長さの異なる説明文。

こうすることで、修正が簡単なうちにレイアウトや表示の問題を見つけやすくなります。サンプルデータのテキスト量がすべて同じだと、実際のコンテンツを追加するまでデザインが完成しているように見えることがあります。

訪問者の視点でレコードを確認しましょう。「写真撮影の基礎」というタイトルだけでは、情報がほとんど伝わりません。有用な概要では、どのような人向けのコースなのか、何を学べるのかを説明できます。

スプレッドシートからデータをインポートする#

情報がすでにファイルにある場合は、レコードをひとつずつ手入力する代わりにインポートできます。TeleportHQでは、CSVやExcelを含む形式からデータベースをインポートできます。その他の方法については、インポートツールのドキュメントをご覧ください。

まず、元ファイルを整理しましょう。わかりやすい列名を付け、数値の形式が統一されていることを確認し、重複するスラッグを削除します。「写真撮影」と「写真撮影コース」のような値が別々のフィルターにならないよう、カテゴリの値も統一してください。

ファイルからテーブルを作成する方法と、既存の組み込みデータベーステーブルにCSVをインポートする方法は、それぞれ別のワークフローです。後者では、キーを使って既存のレコードと照合し、一致した行を更新したり、新しい行を追加したりできます。対応形式と制限については、 データベースのインポート手順 をご覧ください。

インポート後、元データの行をいくつか選び、作成されたレコードと照合してください。特に日付、小数値、空欄に注意しましょう。インポートが完了しても、結果を確認する必要がなくなるわけではありません。

ステップ4：一覧ページをデザインしてデータに紐付ける#

カタログページは、どのコースを開くかを訪問者が判断できるようにしましょう。まずはページの見出し、カタログの簡単な説明、コースカードを表示するエリアを含むレイアウトを作成します。

次に、カードをデータベースに接続します。データバインディングを使うと、要素に表示する値の取得元を指定できます。見出しにはコース名を、画像には同じレコードに保存された画像のURLを表示できます。

カードを繰り返し表示するレイアウトには、TeleportHQの「Array Mapper」を利用できます。「Elements」の「List」グループから追加し、「Source」をコーステーブルにバインドして、その中にカードを1つデザインします。ソースから返された項目ごとに、そのデザインが繰り返し表示されます。

各カードを現在のコースにバインドする#

繰り返し表示するレイアウト内で、見出し、概要、画像を現在の項目のフィールドにバインドします。このコンテキストによって、各カードがどのコースを表すのかが決まります。

どのカードにも同じタイトルが表示される場合は、繰り返し項目ではなく、特定のデータベース行を誤って選択していないか確認してください。これは通常、テーブル自体ではなくバインディングの問題です。

ページにデータベースの内容を表示する方法を紹介する ガイド では、動的な値の選び方と要素への接続方法を説明しています。

比較しやすいカードにする#

詳細ページを開く前に、訪問者が必要とする情報を表示しましょう。このカタログでは、概要に加えて、テーマ、所要時間、価格などが考えられます。

詳しい説明は個々のコースページに掲載しましょう。各カードに複数の段落や競合する操作ボタンが含まれていると、リストが見づらくなります。

最も長いタイトルと最も小さい画面サイズでレイアウトを確認しましょう。重要なテキストが途切れる固定の高さは避け、スマートフォンでもコースへのリンクを選択しやすくしてください。カードのデザインに画像を使用する場合は、表示比率を統一すると、異なる画像を追加してもリストの読みやすさを保てます。

データが欠けている場合の対応も、あらかじめ決めておく必要があります。TeleportHQでは、該当するバインディングにフォールバック値を設定できますが、公開サイトではゼロやfalseもフォールバック対象として扱われる場合があります。価格がゼロの場合は注意しましょう。無料のコースに「価格を確認できません」と誤って表示される可能性があります。フォールバックに頼る前に、対象フィールドの動作を実際にテストしてください。

ステップ5：検索、絞り込み、ナビゲーションを追加する#

コースが少ないカタログなら、手動で閲覧できます。規模が大きくなるにつれて、訪問者がリストを絞り込める操作機能が必要になります。

探したいものが決まっている人には検索機能を、特定のトピックを探している人にはカテゴリ分けを用意しましょう。後から追加するかもしれない絞り込み機能をすべて盛り込むのではなく、実際に保有しているデータに合わせて操作機能を設計してください。

テキスト検索を有効にする#

対応しているデータバインド済みのArray MapperまたはTableでは、「検索を有効にする」をオンにします。リストに検索入力欄が追加されるので、ページのデザインに合わせてスタイルを調整できます。

ドキュメントによると、リスト検索では大文字と小文字を区別せずにテキストフィールドを検索できます。ただし、あらゆるデータ型を対象とした汎用検索エンジンではありません。数値、日付、真偽値のフィールドは、それぞれ異なる方法で処理されます。

プレビューと公開サイトの両方で検索を試しましょう。タイトル全体、タイトルの一部、説明文に含まれるフレーズを検索します。また、検索結果がないフレーズも試して、空の状態での表示を確認してください。

カテゴリで絞り込む#

フィルターは、表示対象となるレコードを指定します。たとえば、カテゴリーのフィルターでは、カテゴリーのフィールドが「写真」と一致するかどうかを判定できます。

訪問者がその値を変更できるようにするには、ドロップダウンやボタンで制御する状態に接続します。エディターで固定フィルターを設定すると、選択内容も固定されます。訪問者用のコントロールが自動的に作成されるわけではありません。

フィルターを解除したときの動作を決めましょう。特に、カテゴリーと検索語を組み合わせた後は、すべてのコースに戻る方法がすぐにわかることが重要です。TeleportHQのフィルタリングツールは、動的な値に対応しており、データベースのリストでは条件を組み合わせることもできます。 リストのフィルタリングガイド では、これらの設定とデータソースごとの違いを説明しています。

ページネーションと適切なデフォルトの並び順を追加する#

ページネーションを使うと、大きなコレクションを閲覧しやすい単位に分割できます。TeleportHQで対応しているリストでは、1ページあたりの項目数を設定し、ページ切り替えや追加読み込みなどのナビゲーション形式を選択できます。

読みやすさとパフォーマンスを考慮して、表示するカード数を決めましょう。カタログ全体を一度に表示するより、役立つカードを12件ずつ表示するほうが閲覧しやすいことがよくあります。

コンテンツに合った並び順を設定しましょう。参考資料のカタログならアルファベット順、開催予定のワークショップなら開催日順が適しています。複数の機能を組み合わせたときの動作も確認してください。検索結果が意図したフィルター適用後のコレクション内に絞られること、またフィルターの変更後にページネーションによって結果が空にならないことが重要です。

ステップ6：各コースの動的ページを作成する#

コース詳細ページでは、1つのデザインを使って、URLごとに異なるレコードを表示します。コースごとに個別のレイアウトを作成する必要はありません。

「Pages, Components & Tree View」でコースレイアウト用のページを作成します。メニューを開き、「Is Details Page」を有効にして、データソースとしてコースリストを選択します。各URLを識別できるように、スラッグなど、すべてのレコードに値が設定されている一意のフィールドを使用します。

ページのコンテンツを現在のコースに紐づけます。次に、カタログカードのリンクに各コースのURL値を渡して、詳細ページに接続します。 詳細ページの設定ガイド で、その設定方法を説明しています。

URLの例は /courses/beginner-photographyのようになります。別のコースでも、同じレイアウトを使いながら、独自のURLとコンテンツを設定できます。

相手が判断するために必要な情報を中心に設計する#

詳細ページでは、カタログカードだけでは分からない疑問に答えましょう。コースの場合、次のような質問が考えられます。

• このコースはどのような人に適していますか？
• 受講者は何を学べますか？
• 所要時間はどのくらいですか？
• 費用はいくらですか？（該当する場合）
• 問い合わせや申し込みはどのように行えばよいですか？

こうした質問は、レイアウトだけでなくコンテンツの構成を考える際の指針にもなります。すべてのコースで事前知識の情報が必要なら、説明文の中に無造作に書き込むのではなく、一貫した保存場所を設けましょう。

ページ上で複数のレコードをテストします。各レコードのURLを直接開き、ブラウザーを更新し、カタログからリンクをたどってください。どのルートでも正しいコースが表示され、問い合わせボタンから意図した遷移先に移動することを確認します。

後から有料登録を追加する場合は、独自の要件を持つ追加のワークフローとして扱ってください。料金を表示してコースページにリンクするだけでは、決済処理や受講登録は実装されません。

ステップ7：データベース連携ページをSEO向けに整える#

検索エンジンには、有用なコンテンツを含むアクセス可能なページが必要です。データベースを使えばコンテンツを一貫して管理できますが、URLを増やすだけで、検索ユーザーにとってウェブサイトの価値が高まるわけではありません。

各コースに明確なタイトルを付け、そのコースならではの内容を説明する説明文を用意します。すべてのページに同じ一般的な文章を載せ、コース名だけを差し替えるのは避けましょう。読者がコースごとの違いを理解できるようにします。

ページごとにタイトルと説明文を設定する#

TeleportHQの詳細ページ向けSEO設定では、メタタイトルと説明文を現在のレコードに紐付けられます。ページに表示するタイトルや概要とは異なる文言を検索メタデータに使いたい場合は、専用のSEOフィールドが便利です。

テンプレートだけでなく、複数のレコードで生成された値を確認してください。元のコンテンツが不足していると、個々のページが不完全になることがあります。

コンテンツを見つけやすくする#

カタログや関連するカテゴリーページから各コースにリンクします。内容が伝わるリンクテキストと読みやすいURLを使い、意味のある画像には適切な代替テキストを設定してください。

公開後、Google Search Console で代表的な公開 URL を確認します。インデックス登録したいコンテンツにアクセスできること、重要なページが誤って除外されていないことを確認してください。

訪問者にとって使いやすいサイト構成を維持しましょう。カテゴリーページは、トピックを閲覧しやすくするために作成し、その目的を説明するのに十分な関連コンテンツを掲載します。検索機能はナビゲーションを補完できますが、重要なレコードを見つける唯一の手段にしないでください。

ステップ 8：テスト、公開、更新内容の確認#

デザインをプレビューしてサイトを公開し、公開後のサイトで一連の操作を最後までテストします。訪問者が実際に利用する環境で、接続、検索、データの鮮度を確認してください。

公開前後の確認では、次の項目をチェックできます。

任意の値がない場合もテストしましょう。読み込み中、空のコレクション、エラーはそれぞれ異なる状況です。使用する要素が対応する状態に適したメッセージを設計し、訪問者が何が起きたのか、次に何ができるのかを理解できるようにしましょう。

公開が必要なタイミングを理解する#

レイアウトや設定の変更を反映するには、公開が必要です。公開サイトとエディターはデータを別々に取得するため、エディターを更新することと、変更したページを公開することは同じ操作ではありません。

データ連携されたページでは、ページを一つずつ手動で作り直さなくてもレコードを取得できます。キャッシュやデータソースの動作によって、更新された値が表示されるタイミングは異なります。エディターと公開サイトの内容が一致しない場合は、連携が壊れていると判断する前に、元のレコードを確認し、該当するデータソースを更新して、キャッシュ設定を調べましょう。

標準のブログやヘルプセンターでは、ページを少なくとも一度公開しておく必要があります。また、記事が表示されるには、適切な公開ステータスに設定されていなければなりません。コンテンツの公開とページデザインの公開は、関連しつつも異なる作業として扱いましょう。

データベースホスティング：ウェブサイトのデータの保存場所#

ウェブサイトホスティングは、訪問者がアクセスするサイトを稼働させます。データベースホスティングは、サイトの情報を保存・取得するサービスを稼働させます。プラットフォームによっては両方を提供しており、別々に管理することもできます。

TeleportHQの組み込みデータベースを利用すれば、別途データベースサーバーを用意する必要はありません。データベースはプロジェクト用にホストされ、TeleportHQでホストされているサイトで利用できます。

プロジェクトをエクスポートする予定がある場合、このホスティング環境の関係が重要になります。組み込みデータベースへの接続は、ダウンロードしたコードを別の場所でホストすると機能しません。外部環境にデプロイする場合は、構成を決める前にデータベース接続やその他のバックエンド要件を検討してください。

外部データベースに接続した場合、データベースは提供元に残ります。既存のデータ基盤を継続して利用できる一方で、提供元のアカウント、容量、接続設定を管理する必要があります。

公開前に制限を確認する#

組み込みデータベースの公表されている制限は、トライアル利用と有料利用で異なります。

テーブル、列、インデックスにも上限が適用されます。大規模なデータセットをインポートしたり、データベースに依存するサイトを公開したりする前に、現在の TeleportHQデータベースプランの上限 をご確認ください。

レコード数とストレージ容量の両方を見積もりましょう。短いテキストのレコードを含むディレクトリと、長い記事を含むナレッジベースは、レコード数が同程度でも必要なストレージ容量が異なる場合があります。外部データベースには、各プロバイダー独自のデータベース容量制限が適用されます。

データアクセスと継続的なメンテナンスを管理する#

カタログの初期バージョンには、公開情報のみを表示する場合があります。後から顧客情報や非公開コンテンツ、編集ツールを追加する場合は、その情報を利用する前にアクセス要件を確認してください。

各種類のレコードについて、閲覧、作成、編集、削除できるユーザーを決めます。コースを更新する管理者には、コースを閲覧する訪問者とは異なる権限が必要です。ユーザーが自分のコンテンツを管理する場合は、各ユーザーがアクセスできるレコードをアプリケーションで制御する必要があります。

TeleportHQでは、データベースの認証情報やAPIキーはプロジェクトのシークレットとして保存されます。専用の認証情報管理機能を使い、機密性の高い接続情報をページのテキストや公開コードに記載しないでください。

ボタンやセクションを非表示にするだけでは、データは保護されません。ログアウト中の訪問者が取得できる情報も含め、アプリケーション層とデータ層の両方でアクセスを確認してください。公開リストと非公開の運用情報を組み合わせるプロジェクトでは、特に重要です。

管理しやすい更新プロセスを確立する#

コンテンツの管理を担当する人またはチームを決めます。新しいレコードの確認方法と、古くなったレコードの修正または削除方法を取り決めてください。

研修カタログであれば、次のような簡単なプロセスが考えられます。

1. 合意した項目に沿って、コース情報を用意します。
2. 説明、価格、問い合わせ先を確認します。
3. レコードを追加し、一覧ページと詳細ページに正しく表示されることを確認します。
4. カタログを定期的に確認し、提供が終了したコースを見直します。

プロジェクトで組み込みの公開機能を使う場合は、その手順の一環としてコンテンツのステータス管理機能を利用してください。カスタムテーブルの場合は、必要な審査ワークフローを定義して実装します。ステータス列を追加しただけでは、一般公開が自動的に制限されるわけではありません。

テーブル構造を変更する前に、ページのバインディングで使用されているフィールドを確認してください。列の名前を変更したり削除したりすると、その列に依存するすべてのページに影響する可能性があります。一括更新の前に、レコードの照合方法と、インポート結果に問題があった場合のデータ復元方法を把握しておきましょう。

データベースを使ったウェブサイト構築でよくある間違い#

初期段階で起こる問題の多くは、データ構造とインターフェースの不一致が原因です。設定時に次の点を確認すると、時間を節約できます。

基本的な機能が動作するまでは、プロジェクトを拡張しないでください。壊れたデータ連携にレコードを追加しても、目に見える問題が増えるだけで、原因の解決にはなりません。

初回リリースで最も重要なのは、正確なコンテンツを使った一連の操作を完成させ、テストすることです。有料予約への対応や、講師が自分のレコードにアクセスできるようにするなど、明確なニーズに応じて機能を追加しましょう。

よくある質問#

コードを書かずにデータベースを使ったウェブサイトを作成できますか？#

はい。TeleportHQでは、データベースの設定、レコードの管理、データとページ要素の連携をビジュアルツールで行えます。ただし、構造を設計し、サイトの動作を設定する必要があります。高度なワークフローや特殊な連携には、追加の開発が必要になる場合があります。

既存のデータベースを利用できますか？#

対応している外部データベースに接続し、その情報をプロジェクトで利用できます。必要なコネクター、ネットワークアクセス、認証情報、操作内容を確認してください。データの読み込みに対応していても、すべてのデータソースで同じ編集機能や構造管理機能が使えるとは限りません。

オンラインデータベースの作成と、データベースを使ったウェブサイトの作成は同じですか？#

いいえ。オンラインデータベースは情報を保存・整理するものです。データベースを使ったウェブサイトには、訪問者向けのインターフェースと、その情報を利用するための機能が加わります。ウェブサイトを構築するには、ページを設計し、レコードを連携させ、利用者が行う操作をテストする必要があります。

データベースを追加するには、Web Appの枠が必要ですか？#

データソースを接続するだけであれば、TeleportHQでWebアプリのスロットは必要ありません。認証、ワークフロー、eコマース、組み込みのブログやヘルプセンターなどの機能を使うと、Webアプリの機能が有効になります。リストのキャッシュなど、一部のオプション機能でもこれらの機能が必要です。

データベースのコンテンツを利用するWebサイトをエクスポートできますか？#

TeleportHQのドキュメントによると、データに接続されたプロジェクトのコードエクスポートはNext.jsに限られます。コードのダウンロードはProプランとPremiumプランで利用でき、トライアル中は利用できません。組み込みのデータベース接続は引き続きTeleportHQのホスティングに依存するため、コードをエクスポートしても、ホストされたバックエンドがそのまま移行されるわけではありません。

ブログやオンラインストア用に独自のテーブルを作るべきですか？#

ニーズに合う場合は、まず組み込み機能を使いましょう。その種類のサイトに必要なページやサポート構造が用意されています。このガイドで紹介するコースカタログのように、異なるコンテンツモデルやアプリケーションには独自のテーブルが役立ちます。組み込みシステムで使われているテーブルを変更する前に、機能の要件を確認してください。

データベースを活用したWebサイトを作成しよう#

訪問者が必要とする情報を整理し、代表的なレコードを少数用意することから始めましょう。データベースを作成または接続し、一覧ページと詳細ページを作成したら、公開したサイトで一連の操作を確認します。

プロジェクトがブログ、ヘルプセンター、ストアの場合は、該当する組み込み機能を出発点にしてください。独自のカタログやディレクトリを作る場合は、コンテンツに合わせてテーブルを定義し、再利用可能なレイアウトに接続します。最初のレコードが正しく表示され、更新手順も機能することを確認できたら、ページをすべて作り直すことなくコレクションを拡張できます。