MarkeZine(マーケジン)

記事種別

構造はHTML、装飾はCSS、動きが欲しければJavaScript 静的サイトの成り立ちを理解する

2013/04/11 08:00

 Webの仕組みがわかれば、サービス開発やマーケティング施策の企画力が上がる? Webサービスを多数開発した実績を持つゆーすけべーさんに、技術が苦手なマーケターにもわかりやすく解説してもらいます。

 こんにちは! ゆーすけべーです。「企画するなら知っておけ!マーケター向けのWeb技術のキホン」と題した連載の2回目を書かせていただきます。

 前回はサーバー・クライアントモデルを中心にWebページが表示される仕組みを解説しました。簡単に箇条書きでおさらいしますと、

  • マーケターや企画の人にもWeb技術の裏側を知ってもらいたい
  • 時代に左右されない知識を持つことが大事
  • サーバーとブラウザを含むクライアントのやり取りがWebのキホン
  • URLやHTTP、HTMLなどは約束ごと、ある程度知っておくとよい

 といったところでしょうか。さて、今回はWebページには特性によって2種類あるという点と、そのうちの「静的サイト」の成り立ちについて紹介していきます。

あなたの運営しているサイトはどっち? 静的サイトと動的サイトの違い

 最近あまり使わない言葉かもしれませんが……、そのサイトが静的か動的かは作り手側の開発者にとって重要な事柄です。Webページの制作案件をもらった時に、それがどちらの特性を持つかで使用する技術が変化するからです。

 では、静的サイトと動的サイトとはどのような違いがあるのでしょうか。簡単に言えば、その言葉通り、

 リクエストごとに、サーバーサイドの裏側で動的にページが生成される

 のが動的サイトであり、それ以外、つまりでき上がったWebページをそのまま、リクエストに応じてWebサーバーが配信するケースを静的サイトと言います。

 分かりやすい例として、Blogツールの「WordPress」と「MovableType」を挙げましょう。WordPressはPHPというプログラムが裏側で動いていて、リクエストごとにページを生成する仕組みになっています。ということは動的サイトになります。それに対して、MovableTypeは基本的に一度管理画面を操作して書き出されたHTMLを配信するため、静的サイトの性質を持っています(管理画面やページを出力する機能に関しては動的な側面を持っていると言えます)。

 WordPressはPHPを使っていると述べましたが、サーバーサイドのプログラムを必要とするのが動的サイトとも言えるでしょう。動的サイトを構成するためのサーバーサイドプログラミングについては次回以降詳しく解説しますが、HTMLをリクエスト単位で生成し、クライアントへ配信するためにサーバー側で処理を行うプログラムが走っていると、それは動的サイトと呼べます。

静的サイトと動的サイト

 動的サイトでは、静的サイトと比べてより複雑なことができるようになります。例えば、ユーザーからの投稿をデータベースに貯めておく、そして取り出すといったことは動的サイトではないと一般的にはできないことです(HTML5等の新しい規格を用いるとサーバーサイドを利用せずに可能になるケースもあります)。

ゆーすけべーさんが語る!11月19日「1年生ディレクターのためのWebサービス制作基礎講座」講座開催

Webの記事を読むのもいいけれど、リアルゆーすけべーさんに会って直接講義を受けませんか?

本講座では、実際のWebサービス制作における事例やエピソードを交えながら、ディレクターの役割と必要なスキル、そしてチームの共通言語となるWeb基礎技術について学びます。Webディレクターに成り立ての人やWebクリエイターとのやり取りがイマイチうまくいかない人にオススメです。

★☆講座「1年生ディレクターのためのWebサービス制作基礎講座」の詳細・お申し込みはこちら★☆

※この続きは、会員の方のみお読みいただけます(登録無料)。



  • このエントリーをはてなブックマークに追加
  • プッシュ通知を受け取る

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5