DEEP KICK.com Blog

どのようにしてウェブサイトの記事や情報が管理され、どのように日常的にページやコンテンツの追加や編集が行われているのか、ウェブサイトの技術にそれほど詳しくない方にとっては興味深いことではないかと思います。普段見ているのは、完成品であり、それらがどのように作られているのかを目にする機会は、そういった仕事をされている方でない限り、なかなかないのではないでしょうか？

そこでここでは、私が運営しているウェブサイト、DEEP KICK.com Blogを例に、ページ制作の裏側、すなわちどのように記事が書かれて、ページがサイト上に反映されているのかについて、簡単ですが紹介したいと思います。クライアントのサイトの裏側はお見せできませんから、自分のサイトの裏側ですね、これがどうなっているのか、見ていきましょう。事前にひととおり完成品のほうを見ておくと、より理解しやすいかもしれません。
» DEEP KICK.com Blog

DEEP KICK.com Blog は、Movable Type（略してMT）というコンテンツ管理システム（略してCMS）を使ってページの管理やページの作成が行われています。もちろんHTMLコードをすべて手書きで作ることも実際には可能なのですが、いろいろと便利な事情がありまして、MTを使っています。

MTに限った話ではありませんが、CMSは、記事や記事が属するカテゴリーが増え、コンテンツの量が増えれば増えるほど、それを使わない場合と比較して、威力を発揮します。例えばサイトに「スマートフォン」に関する新たなカテゴリーを追加し、その入口となるリンクをすべてのページに追加するとします。もしそういった拡張性を考慮せずにサイトを作ると、すべてのページに手作業でリンクを追加する作業を行わなければなりません。一方でMTの場合、このような作業はカテゴリーの管理画面から行うことで、自動化されます。下はMTのカテゴリー管理画面です。

DEEP KICK.com Blog のカテゴリー一覧とカテゴリーに属するブログ記事の件数がテーブルに表示されているのが分かります。この画面から新たなカテゴリーを追加したり、場合によってはカテゴリーの中に別のカテゴリー（サブカテゴリーと言います）を作るといったこともします。

MTを使ったサイトの場合、各ページのことをブログ記事と言います。下はDEEP KICK.com Blog のブログ記事の管理画面です。

ブログ記事のタイトル、それが属しているカテゴリー、ブログ記事を作成したアカウント名、作成日などが一目瞭然です。新たに作成したブログ記事は、この管理画面に追加されます。

こういったMTの機能をウェブサイトに自由に反映させるために欠かせないのが、テンプレートと呼ばれるファイル群です。MTにはあらかじめひな形となるテンプレートが用意されていますが、各サイトごとに独自のデザインを適用したり、機能を追加したりするには、独自にテンプレートを作成しなければなりません。このテンプレートの作成こそが、サイト設計の根幹となります。DEEP KICK.com Blog の場合、MT独自のMTタグと呼ばれるものとPHPやJavaScriptを組み合わせてテンプレートを作成しています。
例えば DEEP KICK.com Blog の左側のナビゲーション部分に、「portfolio」つまり制作実績のページへジャンプするリンクがありますが、これらは「Spry」というJavaScriptによって折りたたんだり、開いたりすることができるようになっています。また右側のナビゲーション部分には、私のTwitter の最新のつぶやきが表示されるようにしています。このようにテンプレートを作成することで、サイトに個性を与え、さまざまな機能を提供することができます。

主にこれらの機能を駆使して、ページの作成や、ウェブサイト全体の管理が行われているわけですが、ここで新規にページを作成する方法を簡単に見ていきましょう。

まずブログ記事のタイトルを入力します。そしてブログ記事が属するカテゴリーを選択します。複数のカテゴリーを選択することもできますし、この画面から新たなカテゴリーを作成することもできます。そしてブログ記事の本文を入力していきます。

DEEP KICK.com Blog の場合、ブログ記事の本文にダイレクトにHTMLコードを入力しています。これは主に私が記事を執筆しているからですが、HTMLに抵抗がない方がある程度慣れてくれば、MTのワードプロセッサ機能を使うよりもシンプルできれいなコードで入力することができます。しかしながら、多くの場合記事を執筆する方がHTMLに明るいとは限りません。そういったケースでは、あらかじめブログ記事執筆時のローカルルールを決めておき、MTのワードプロセッサ機能や画像アップロード機能などを使って入力することができます。実際問題、ある程度HTMLの理解がある方が管理する方が、統一感のある美しいページが作る上では有利です。しかしDEEP KICK.com のクライアントは、中小規模の会社が多く、社内にHTMLに詳しい人材がいない場合がけっこうありますので、そのあたりについても導入時や導入後、サポートさせていただいております。

ある程度記事が執筆できたら、実際にアップする前に、下書き状態でプレビューを行い、ページの完成のイメージをつかむようにします。編集とプレビューを何度も繰り返し、ブログ記事を完成させていきます。これで問題なし、というブログ記事ができましたら、記事を保存し、再構築します。再構築というのは、ブログ記事のファイルを作成し、既存のページやカテゴリーに新たに追加されたブログ記事ページへのリンクを追加する一連の処理のことです。再構築することで、サイト全体に必要な処理を自動化して反映することができます。また再構築後も、修正があれば、簡単に修正を施すことができます。

以上、簡単にですが、DEEP KICK.com Blog を例に、MTの主要な機能とサイト構築について、そして実際のブログ記事追加の流れについて、解説してみました。
MTは、私のようなWebサイト制作のプロフェッショナルの仕事を手助けする面も大きいですが、何よりもWebに詳しい人材を社内に確保することが難しいが、日常的にコンテンツの追加や管理をスムーズに行いたいという企業にとって、非常に優れたツールです。CMSにはさまざまなタイプのものがあり、導入コストも千差万別ですが、MTはCMSの中でも歴史があり、コストを抑えた条件で運用することが可能です。私自身そういった理由で自分が管理しているウェブサイトでも使っています。
DEEP KICK.com では、更新が滞っていたサイトをMTで作り直すことで、コンテンツの更新が自社でできるようになるお手伝いをしています。ご興味のある方は、お気軽にご相談ください。