個人的趣味で現在CMS(コンテンツマネジメントシステム)をフルスクラッチ開発しているのですが、色々勉強になる事が多く、難易度は高いながらもコツコツと続けているところです。
CMSの代表的なものとして「ワードプレス」がありますが、これが如何にものすごい技術で成り立っているのかが分かります。普段何気なしに使っているものですが、とにかくフロントからサーバーサイドまで、かなりの知識がなければこんなものは作れないです。
html/cssはもちろん、php/MySQL、そして厄介なのがjavascriptですよねなんてったって。最低でもこれらの知識が必要です。
だだ、同じものは無理としても、仕組みを理解し、出来栄えとしては比較にならないほどのゴミであったとしても、CMSの自作は幅広い重要な知識が身につくと感じています。
もし興味があるならば、是非チャレンジしてみる事をお勧めします。
今私が作成しているCMSは、完成すれば後日ここのブログでまとめようかと思います。
だいぶ話がそれましたが、今回はCMSを自作することで気づいた「ＷＥＢサイトの動的ページと静的ページの違いについて」を簡単にまとまようかと思います。
もともと違いは分かっていたつもりでしたが、実際にその仕組みを作成する事で「なるほどね～」と、少し目からうろこな事があったので、その辺を是非皆さんに知ってもらいたいです。
目次
ＷＥＢサイトの動的ページと静的ページの違い
静的ページ
静的ページというのは、ページごとにファイルが存在する仕組みの事です。
例えば、小規模なお店のホームページなどは、基本的に更新をする事がありません。したがって、各ページを専用のHTMLファイルで作成し、それをサーバーに格納している事が多いです。
各ページには、ファイル名がそのままURLに反映されます。
必要な知識は、html/cssだけでも可能ですので、比較的容易に運用できるWEBサイトになりますね。
ざくっと、これが静的ページの特徴になります。
動的ページ
動的ページは、ブログなど、投稿記事、記事の更新が多いサイトで採用されています。
ブログでは、毎日静的なページで記事を投稿していると、とんでもないファイルの数になってしまいます。
しかも、全体的に記事の一部分を修正したい、となった場合、途方もない時間と労力を要する事になります。
こういった背景から、「1ページで管理出来るシステム」の動的ページが採用されています。
例えば、ブログでいえばテンプレートとなる投稿記事のフォームを１つ作成しておきます。
あとは、タイトル、サムネイル、本文、URLなどをCMSを使ってデータベースに保存しておけば、テンプレートがデータベースと紐づき、そこに投稿記事が反映されます。
なんといっても、データベースを利用する事によって「１つのファイル」（厳密に言えばパーツの集合体）で投稿ページを管理する事ができるので、もしページの一部に修正が必要になった場合でも、テンプレを修正するだけで全てのページが変更されるので、メンテナンスが断然楽になります。
ただし、運用にはHTML/CSSだけではなく、PHP/MySQLのサーバーサイドや、javascriptの知識も必要になります。少し高度な知識になるので、そこがネックではあるかもしれません。（※カスタマイズしたり、自作したりする場合）
動的ページは1ページしかないのにURLをどう識別しているのか？
指定先のリンクにページは存在しない
一見、簡単に思えるかもしれませんね。前途した通り、CMSで記事を投稿する際に「URL」もデータベースに保存しておけばいいだけの話ですから。
しかし、よく考えて下さい、静的ページのように、指定先のリンクにページはないのです。ならどうやって、動的ページは表示されるのでしょうか。
ここが、phpやMySQLを理解していないと説明できない部分になるかと思います。
なんとなく、「それはデータベースと紐づいているからだよ」と、ふわっとした説明しか出来ないのではないでしょうか。
合ってはいますが、厳密にいえばこうなります。
URLのパラメータをGET受信している
例えば、unko.com というブログサイトがあるとします。
unko.com/amazing の記事にアクセスしたい場合、静的ページではunko.com/amazingのページがあるので、もちろんそこにアクセスして、そのまま表示されます。
変わって、動的ページの場合も、unko.com/amazingで、記事が表示されます。
このページが存在しないのに記事が表示される仕組みを紐解くと、動的ページのURLは、実際には下記のようになっているのです。
unko.com?n=id5
この?以降の部分が「パーマリンク」と呼ばれるものであり、動的ページが表示される核の部分となります。
仕組みとしては、上のリンクの場合、まずunko.comにアクセスします。
そこのページで、URLにパラメータとして乗っかっている?n=id5を受け取ります。このように、URLの端に?が付いている値を「GETパラメータ」と呼びます。
続いて、GETした値でデータベースを参照します。テーブルに該当するレコードがあれば、そこから投稿ページのテンプレにタイトルや画像、本文を渡し、その表示を返します。
このようにして、１つのテンプレートであたかも複数のページが存在するかのような振る舞いを実現させているんですね。
ちなみに、ワードプレスではパーマリンクの部分を記事タイトルに変換する機能があるので、上記のように動的ページであっても、あたかも静的ページのリンクかのように、unko.com/amazing で表す事ができるんです。
ただ、しつこいようですが、本当はunko.com?n=id5 のような感じで、GETのパラメータがのっかっているのです。
まとめ
以上、ＷＥＢサイトの動的ページと静的ページの違いについて簡単にまとめましたが、意外と知らなかった人は多かったのではないでしょうか。（そう信じています。。）
まあ、何事もそうですが、本質を理解することが結構重要だったりすると思いますので、もし今、何かしらふわっとしか理解していない事柄があるなら、一度自分の手で自作（体験）してみると良いかもしれません。
調べて知識を得るのが一番手っ取りばやいですが、自ら体験する事も、理解が深まるので重要だと思います。
