ニュースの一覧画面を作る。〜Liquidマークアップを使った動的な画面〜

2013/06/27 (木) サイト構築

TokyoFloorでは、ニュース、製品情報のような各所で再利用する情報はWebデータベースに登録・保存しておき、各画面ではそれらを取り出して整形・表示する仕組みにすることが一般的です。
 
今回は、その作成の流れを具体例(ニュース一覧画面)をつかって、大まかに解説していきます。
 
 
 
 

手順

step1. ニュース記事を保管しておくWebデータベースを作ります。

Webデータベースは、事務局用のブラウザ画面上で作成します。
テーブルとテーブル項目を作成します。
今回のニュースの例では、「ニューステーブル」を作り、その項目として「タイトル」「カテゴリー」「本文」の3項目を作りました。
さらに「カテゴリー」には[お知らせ]、[IR]、[製品情報]の3択にしました。
 
項目自体を新たに追加したり、カテゴリー項目のように内容を追加する(例えば、お知らせ、IR、製品情報の3種類に、イベントを加えて4種類にする)ことも、後でできます。 

step2. ニュース一覧画面の作成

Webデータベース[ニュース]から記事を取り出して整形・表示するようにLiquidマークアップを使って記述します。
 
これは当サイトのニュース一覧ページで使っている記述です。通常のHTMLタグに加え、中カッコを使った記述がところどころ見あたります。この中カッコを使った部分がLiquidマークアップです。
 
 

step3. Webフォームを使って、ニュース記事を登録していきます。

Webフォーム上で記事を書きます。
step1、step2はサイト構築時に行うので、普段はstep3の記事の登録だけを行います。
 
 

実際にブラウザからアクセスされた場合

その時点で公開準備が完了しているニュース記事を動的に取り出して画面が作成され、ブラウザに表示されます。

[サイト構築]の記事