静的ページ/動的ページとは?

投稿者: | 2008年3月17日

よくwebサイトで「静的ページ」とか「動的ページ」という言葉が使われますが、これは何を意味するのでしょうか?

文字や静止画だけなら「静的」で、ムービーやらアニメーションが動いていたら「動的」・・・なのではありません。

静的ページの場合、例えば「example.com/page1.html」というURLのページを見ているとすれば、Webサーバ上にpage1.htmlというファイルがあって、それをブラウザで表示しています。「それが普通じゃないの?」と一般の方は思うかも知れません。

しかし、動的ページはそうではないのです。 例えば、掲示板を思い起こしてください。当然ながら、誰かが書き込むとページの内容が変わりますよね。ということは、サーバ上に前とは違うHTMLファイルが出来たのでしょうか?

違うんです。サーバー上のファイルはずっとそのまま、変わりません。実はこのファイルは単なるテンプレートであって、記事の内容はデータベースから呼び出して表示しているのです。逆に言うと、掲示板に書き込むということはデータベース(DB)に書き込んでいるのです。

これは掲示板やSNSだけではなく、部外者が書き込めない一見静的なサイトでも同じことです。サーバ上にあるのは幾つかのテンプレートファイルだけで、URLが”example.com/page1.html”となっていても実際にはpage1.htmlなんてファイルは存在しないのです。これは一種の偽装URLです^^; (詳しくは後述の、「動的ページとパラメータ」をご覧ください。)

このDBからコンテンツを引っ張ってきてWebページに表示する作業は、PHPのようなサーバ上のプログラムで行われます。上述のテンプレートの中身は静的な通常のHTMLコードと、動的にDBから取り出して表示するプログラム部分から成ります。このプログラム部分は全てWebサーバ上で動作し、クライアント(ネット閲覧者のPC)は出力結果(HTMLファイル)をもらっているだけで、静的ページを見るのと変わりません。

現在インターネット上にあるほとんどすべてのサイトは(FacebookもTwitterもYoutubeも)動的サイトです。ページ数(見かけ上)で言えば99.9・・%かな? 逆に静的ページは、コンテンツが少なくほとんど更新されない、中小企業や個人商店のお店紹介ページくらいでしょうか?(これとは別に、ブログサービスを使って最新情報を配信してるところが多い)。

因みに、2000年代初頭にブログが普及する前は、個人が「ホームページ」を持つという事は、自分でHTMLファイルを作ってWebサーバにアップロードする事を意味していました。これは素人には中々ハードルの高い作業です。自分でHTMLを書くのは難しそうなので、「ホームページビルダー」を買ったけどその使い方も難しかった・・・みたいな^^;

勿論、プログラムが必要な分、動的サイト(テンプレートを含むシステム)を作る方が難しいのですが、そういうことは我々Web制作業者しかしません。一般ユーザーはブログサービスやソーシャルメディアなど出来合いのシステムを使い、文字や画像をフォームから流し込むだけでOKです。こうした無料の動的ページサービスが普及したからこそ、世界中で何億人の人がネットに情報発信するようになったと言えるでしょう。

動的ページとパラメータ

動的ページといえば、 単に決まった内容をDBから抽出するだけでなく、URLに変数(抽出条件)を埋め込んで、表示する内容を操作することが可能なのです。

例えば、僕のサイト(バイクインプレ集)に下記のようなURLがあります。

http://www.mc-taichi.com/Bike/test/index.php?id=85

末尾に”?id=85″というコードが付いていますが、これは「”id”というパラメータが85である」という情報を、DB(を操作するシステム)に送っているのです。

このサイトでは、idとはバイクの車種毎の識別ナンバーで、85番のバイクのインプレを表示せよ、という意味になります。他の車種のリンクをクリックすると、また別のidが付いていて、それに該当する車種の情報を表示します。

この仕組みは非常に便利というか動的ページの肝で、ブログやニュースサイトの各記事や、ショッピングサイトの各商品ページなどほとんど全ての動的ページに使われます。

しかし、URLを見てもパタメータらしきものは付いていないページがあります。末尾がhtml拡張子で終わってたり、それもなくてアルファベットやスラッシュで終わってたり(実はこのブログもそう)。じゃあ、そういうのは静的ページなのかというと、そうではありません。

実はこうした静的っぽいURLの中に先ほどのパラメータが決まった法則で埋め込まれていて、Webサーバ上で”?”付きのものに変換する仕組みが備わっているのです。これがURLの偽装です^^;

動的ページとSEO

かつては、「動的ページはSEO上不利」なんて言われましたが、今はそんなこと無いというのが大方の見方です。

また、同じ動的ページでも、URLに”?”マークが付いていると不利、なんて書いてあるドキュメントを見かけますが、これも根拠が無いと考えてよいでしょう。(例えばはてなの記事参照)

WikipediaだってAmazonだって、思いっきりパラメータがくっ付いたURLですが、ちゃんとインデックスされていますしね。
検索ロボットが嫌がるのは、パラメータにどんな値が入りうるか判らない状態。 例えば、「item=100」と言う商品ページがあったとして、「じゃあitemが1から99までのページもあるはずだ」と言って一々調べていたらきりが無いという話しです。

だから、解決策は簡単で、存在するアイテムのURLへのリンクを全部張ってしまえば良いのです。 まあ、普通は何がしかのリンクを辿って行けば、全ての商品ページにたどり付くはず(そうしないと見てる人間が辿りつけない)ですが、リンク構造が複雑になりがちなのは事実です。そんな場合は、Googleだったらサイトマップを登録してくださいね、という事です。

静的ページ/動的ページとは?」への10件のフィードバック

  1. いくずく

    基礎技術講座がはじまりましたね。
    まあ、確かにWEB技術系でない普通の人だと、アニメーションが動いたら「動的」と思うのは無理ないかな。
    言葉にも問題あるかもしれないけど、専門用語は変なのも多いですね。

    返信
  2. 管理人タイチ

    あれ?基礎講座に興味があったんですか?いくずく殿にとっては他愛もない知識だと思いますが(^^

    実はこの用語の解説にはまだ続きがあります。URLの変数とかSEOの話ですね。

    ちなみに、専門用語で僕が最も変だと思うのは「正規表現」です。

    そうだ!いくずく殿も、豊富な知識を生かして、 用語解説を書き込んでもらえないでしょうか?

    返信
  3. いくずく

    この程度なら知ってますがね。しかしWEB系の最近の技術については僕はうといですよ。知らないものが多々ありそう。WEB関係で、僕が知ってるのは一般的なネットの技術になりますね。
    書き込むって、僕はポストできないし、コメで書き込むんですか?(^_^;)
    そうそう、「正規表現」はUNIX時代からよく使われてました。僕らは英語でレギュラーエクスプレッションと読んでましたけどね。
    この名前はちょっと学問的なものから来てるんですよ。もとは形式言語理論の話です。

    返信
  4. 管理人タイチ

    いくずく殿は何といってもネットワークスペシャリストなんで、そのあたりの用語について解説して欲しいですね。「TCP/IP」とか。

    勿論コメント欄に書き込むんじゃないですよ。ユーザー登録してもらえれば、投稿者権限を与えます。

    「正規表現」という表現は何かいきさつがあるんじゃないかと思っていました。ただ一般的にプログラム言語では、パタンマッチングの意味で使われるので、そのままそういえば良いのではないかと。「正規表現」というと、そのほかの文法は「非正規表現」なのかと(^^;

    返信
  5. いくずく

    最近大概のものはネットに説明ありますからねぇ。TCP/IPなんかだとちょっといろんなとこにありすぎな気がしますが。(^_^;)
    なんか新機軸の切り口がないと読者読んでくれなさそう。
    なんか面白そうなのあれば投稿してもよいですが、ユーザー登録ってどうするの?

    返信
  6. 管理人タイチ

    新機軸の切り口ねえ(^^;
    確かにネット上には用語解説は沢山ありますが、どれも言い回しが堅かったり、そっけなかったりしますよね。
    なので、ここでは一般の人の目線に立って「そうそう、ここが判らなかったんだよ」と思ってもらえるように、身近な事例を織り交ぜたキャッチーな記事にする、ってのはどうですか?(^^
    とりあえず、ユーザ登録は左の”Meta”メニューの下の「ユーザ登録」から進んでください。メルアドを入れると暫定パスワードが送信されます。

    返信
  7. ピンバック: keihoweb

  8. ピンバック: 文系の私がエンジニアになっていくお話(Ruby on Rails編 第2回) | IT系の文系・理系学生向け有給インターン・アルバイト募集なら「エンジニアインターン」

  9. 管理人タイチ 投稿作成者

    この記事は結構古いのですが、今でも意外とアクセスされてるようなので、一部内容を更新しました。

    返信
  10. ピンバック: 文系の私がエンジニアになっていくお話(Ruby on Rails編 第2回) | IT系就活のための新卒採用求人ならエンジニア就活

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です