Code」を複数回にわたって紹介します。Codeの機能のひとつ「動的ページ」の作り方を解説。前回の記事ではデータベースを作成しましたが、今回はこのデータベースとテンプレートを連携させ、複数のコンテンツページを作ってみましょう。動的ページの作成URLを決める動的ページとデータベースを連携させる動的ページへの誘導リンク(リスト)を作成サンドボックスデータをライブデータと同期データベースのデータは、すぐにサイト上で使えるわけではありません。出来上がったデータベースの上部を見てみると「Sandbox」「Live」というふたつの項目があります。Sandboxは「サンドボックスデータ」といい、公開する前のテストデータのようなものです。サイト上で使えるデータとして反映させるには、「Live(ライブデータ)」にコピーしてあげる必要があります。以下の通り、まだライブデータは使えません。ライブデータにデータベースが反映させるには、画面右上の「公開」をクリックします。「Live」に切り替えると、何やらデータベースが反映されていますが、「サンドボックスのデータを同期してください」というダイアログが出ています。サイト上でデータベースが使えるようになりましたが、このままではまだデータベースの中身は同期されていないようです。データを同期させるためにはデータベースの上の「Sync」をクリックします。Live」を選び、「Sync」をクリック。一度「Live」に切り替えると、今度はデータベースの中身もきちんと同期されています!動的ページの作成URLを決めるいよいよ、データベースの情報を使って動的ページを作成します!まずは左サイドバーから「Database」という項目を探しましょう。動的ページのタイプを選択します。Page)を作成するかが選べます。動的ページのURLを作成することができます。デフォルトでは「/データベース名/データの名前/」となっていますが、この末尾の部分はデータベースの他の項目に変更することができます。Field」をクリックすると項目一覧が表示されます。今回は「データの名前(滝の名前)」のままにしましたが、現実的に運用することを考えたら同じ名前の滝が複数あったりするので、そういった場合はURLの末尾は「ID」などにしたほうがいいのかもしれませんね。URLは直接編集することもできますよ。Page」をクリック。動的ページとデータベースを連携させる動的ページが作成できると、以下のような編集画面になります。左サイドバーに動的ページの項目が生成されていますね。編集画面で動的ページのデザインを作っていきましょう。タイトルを配置します。画面左側のメニューアイコンの中から「追加」をクリックし、「テキスト」の中から好きなデザインのタイトルを選んで画面上にドラッグ&ドロッグ。タイトルを適当な場所に配置できたら、右上の「データに接続」アイコンをクリックします。すると、「テキストを接続」というダイアログが表示されます。Dataset」はデータベースをひとつしか作っていなければひとつしか選べませんので、そのままでOK。「テキストの接続先」をクリックすると、データベースの項目一覧が表示されます。連携が完了すると、アイコンの色が緑色に変わります!果たしてちゃんと表示されるでしょうか...!画面右上の「プレビュー」をクリックし、確認してみましょう。滝名が表示されていますね!これでデータベースとの連携ができました。簡単ですね!この調子で編集画面でデザインを作りつつ、画像やボタンなど他の要素にもデータベースと連携させていきましょう。できあがった動的ページがこちらです!文章や画像など、ひとつひとつの要素がデータベースからデータを読み込んで表示されています。別の動的ページを表示させるには画面右上のページャーをクリックします。画面右上の「公開」をクリックして動的ページを公開しましょう。作ったものをサイト上に反映させるにはいつでもこの作業が必要です。以上で動的ページが作成できました!公開されたページのURLは、ちゃんと先ほど設定した「/データベース名」/データの名前/」になっていますね。ここまで作った動的ページのサンプルはこちらです。動的ページはできましたが、この状態では動的ページへの誘導リンクがないため直接URLを入力しないと見ることができません。いうわけで、誘導リンクとなる「滝リスト」を作ってみます!画面左上の「ページ:サイト名」をクリックし、1番下の「ページを管理」を選択します。「サイトメニュー」に移動。ここで新しいページを作ったり、削除したり、または非表示にしたりなどのページの管理ができます。今回は新しいページを作るので、「ページを追加」を選択。他のテンプレートをコピーしたければ各メニューの右側のアイコン(...)をクリックし、「複製」でもOKです。ページに任意の名前をつけます。すると、新しいページが作成されました。先ほど付けた名前でリンクも生成されています。ここからまた先ほどのようにデザインを作っていきますよ。ページタイトルを変更。次に、リストの作成です。左側のアイコンから「追加」をクリックし、「リスト&グリッド」を選択します。これはコンテンツを繰り返し同じレイアウトで表示できるパーツで、色々なデザインが用意されています。パーツが決まったら画面上にドラッグ&ドロップ。今回はこちらのパーツを元にしてデザインを作ります!まずは動的ページと同じようにタイトルを変更し、滝の名前を表示させてみます。データベースのアイコンをクリックしましょう。「データセットを作成」をクリックし、連携させたいデータベースを選択。「テキストの接続先」に、表示させたい項目を選びます。連携できたらアイコンが緑色になります。さっきと同じですね!さて、画面右上の「プレビュー」をクリックして、表示を確認してみましょう。タイトルのところだけ滝の名前になっているのがわかりますね!この調子で動的ページの時と同じように、他の要素にもデータベースと連携させながらデザインを作っていきましょう!出来上がったリストがこちらです!元のデザインよりシンプルになりました。仕上げに画面右上の「公開」をクリックしたら、完成です。これで動的ページへの誘導リンクができました!出来上がった誘導リンクのサンプルは以下となります。Codeを使えばクリックの作業だけで出来てしまうので楽ちんですね。Color0件のコメントもし何かコメントをいただければ幸いです。ご指摘等も大歓迎です。