Topics

あけましておめでとうございます。
HTMLコーディング、CMSの開発は本年も株式会社オッシーでよろしくお願いいたします。

さて、面白いというか、珍しいCMSを作ってみたのでちょっと軽く紹介したいと思います。
「軽く」というのは例によってお客さまに納品したシステムなので、全貌を明らかにすることができないのです。
チラ見せご容赦ください。

開発の背景

お客様のサーバーには動的なシステムは組み込めないことがあらかじめわかっていました。

リニューアル前は全てのコンテンツはいかなるシステムとも関連せずに、静的に作成されていて、テーマやレイアウト、デザインもかなり温度差があり、CMS的なアプローチでコンテンツを管理すること自体がある意味絶望的なサイトでした。

リニューアルを機にこのシステムの開発を考えたのですが、リニューアル時にかなりコンテンツが整理され、いくつかのテンプレートを切り替えることによってCMS的なアプローチをすることも有効であると考えられるようになりました。

そこで、開発用のサーバーに何らかのシステムを導入し、そこで作成したコンテンツをスタティックにパブリッシュして納品するタイプのCMSを考えました。

挫折と仕切り直し

ところがリニューアルに向けてコンテンツが整理され、今までFlashで作られていたものや、派手な演出だったものがある一定のレイアウトにまとめられはしたのですが、それでもCMSで扱うにはバリエーションが多すぎました。

そして、個別のコンテンツの表現もばらつきが多く、レスポンシブデザインに対応したために、各ページごとにHTMLやスタイルはかなりの書き分けが必要であることが判明。
クリエイティブとしてもテンプレートではカバーできないものが多く、結局コンテンツ部分は「手で作らないとダメなんじゃない？」という状況が明らかになりました。

初期納品分は手で作っちまえ、CMSはちょっと練り直しだ

初期納品分に関しては結局手で作ることにしました。二百数十ページでした。

そこで時間を稼いでおいてCMS側の設計と開発を腰を据えてやろうと考えたからなんです。
その間にCMS側の仕様を練り直しです。

まず、コンテンツ部分を「手で作る」ということはこの仕組みがCMSとしてどういう意味があるのか？ということなのですが、このCMSで重要な部分はコンテンツ全体のルールとなっている部分を自動化し、ヒューマンエラーを可能な限り減らすということと、コンテンツの一覧表示や、関連ページの紐付けなど、こういった機能をいくつかのデータファイルを使用してJavascriptでフロントエンドに呼び出しているのですが、このデータファイル（JSON形式）をいちいち手で作成したり、エクセルで作ったりすることがかなり面倒（コンテンツが増えてくると事実上手作業ではかなりの時間がかかる）で、エラーを誘発する部分になり、少なくともここが自動化できないと運用的に厳しいというところからのアプローチです。

なので、CMSの機能を「ページを作るために必要な情報を登録してコンテンツを作成するためのテンプレートを作成する機能」と「必要なファイルを自動的に生成して、納品用のファイル一式を作成する機能」という2つの機能に分けて考えました。

どこの制作会社にオーダーしても間違いなくページが上がってくるテンプレート

一連のコンテンツで必ず必要な情報があります。それは次のようなものです。

• そのページのコンテンツNo
• そのページのタイトル（OGP共通）
• そのページの説明文
• そのページのカテゴリー
• そのページのサブカテゴリー
• そのページのサムネイル
• そのページのMetaキーワード（OGP共通）
• そのページのMetaディスクリプション（OGP共通）
• そのページのOGイメージ
• そのページに関連づける他のページID（いわゆるオススメみたいなもの）

これらはすべてのコンテンツにとって必須のものです。

テンプレートを作成するに当たり、CMSからこれらの情報を全て登録するようにしました。
ここで、必要な情報が不完全な場合や画像サイズが異なる場合などはCMSが警告を出しますので、必要な情報が全て含まれたHTMLテンプレートと一連のファイルを生成することができます。
登録が完了すると必要な情報は納品時のディレクトリ名（カテゴリーとコンテンツNoから決定される）に全て必要なファイル（必要な情報が埋め込まれたHTMLと画像、CSSなど）が格納された圧縮ファイルとしてサーバー内に生成され、ダウンロードが可能になります。

で、このテンプレートを使ってそのページのコンテンツを作れば、登録時の情報が間違っていない限り問題は起きず、製作者はこのテンプレートを利用してコンテンツ部分だけを仕上げればいいんです。そこでタイトルやメタタグやOGP、関連コンテンツへの紐付けなどを製作者が気にすることはまったくありません。

ページができたら開発用サーバーにアップロード

ページができたら開発用のサーバーにアップロードします。

ページ単体の表示確認や校正が可能な状態になります。ここで、納品前のチェックを行います。
ちゃんとチェックして、必要な修正、調整を加えます。
この部分はCMSとは直接的には関係なく、一般的というかスタティックなウェブページの制作と何ら変わりはないわけです。

涼しい顔して納品しよう！

そのページのチェック修正が完了して単体として納品できる状態になったらCMSを使用して納品ファイルを作成します。
納品ファイルにはそのページに関連するデータだけでなく、表示制御、動作制御用のデータファイル等も含まれます。

CMSのメニューから「納品ファイルジェネレーター」を選択すると、過去に納品したファイルの履歴も見ることができ、納品後に発生する調整や修正などにも対応しやすい配慮があったりします。
新たに作成されたり、修正されたページに関して納品ファイルジェネレータはまずその一連のファイルをスキャンします。
製作者が作成したファイルにデッドリンクがあったり、誤ってメタタグが削除されていたりした場合等は警告を行います。二重チェックですね。

ファイルに問題がない場合はサーバー内をクロールして、実際に関連付けた他のページの実在確認などを行い、データファイルを生成します。
更に納品に必要なすべてのファイルをリトリーブしてサーバーの環境と同じディレクトリ構成でファイルを生成、圧縮を行います。

この段階で開発用サーバーのデータファイルが更新されるので、一覧表示や関連ページへのリンクをチェックして問題がない場合（二重チェックをしているのでめったに問題があることはないはずなんです）はファイルをダウンロードします。

ダウンロードしたファイルをクライアントに送ればあとはクライアントのウェブ担がステージング、本番機へのアップを行い、無事納品等いうことになります。

概念図

制約条件とアイデアと

特に大手企業の場合、サーバーに新たなシステムを構築することができなかったり、制限されていることが多くあります。
または、システムを導入するためにかなりのステップやセキュリティチェックなどがあるため、新規のCMS導入を考えると手続き的な時間がかなりかかってしまい、そういった条件がはっきりしてこない限り開発はおろか仕様設計にすら着手できないこともあります。

今回の場合は開発用サーバーは、エンドクライアントではなく制作会社側で押さえているため、ある程度自由が利いたので、こういったシステムの実現ができました。

今回のCMSの設計における問題点はマークアップやタイトル、メタタグ、OGPなどをレギュレーション通りに行う必要があること、シリーズ化されたコンテンツである一方で、個別のページにはそこそこのクリエイティブが求められていることでした。
そこで、「自動化」という方向性は「楽に作る」「情報発信のスピードを上げる」といった方向ではなく、「必要な情報が正確に入っていること」「ヘッダ、フッタ等を除く個別ページのコンテンツデザインはある程度自由であること」、「間違いない納品ファイルをお客さまにお届けすること」といったところをシステム化する方にありました。

これを実現するために手作業で作成されるページ製作の前に「テンプレートジェネレーター」を配置し、後ろに「納品ファイルジェネレーター」を配置するといったCMSのアイデアが出てきました。

システム自体はものすごくハイエンドな処理をしているわけでもなく、一般的な機能の組み合わせにすぎません。
ですが、フロントエンドの制作を行っているものと、バックエンドのエンジニアリングを担当するもののアイデアの集積で、制約条件の中で取り得る現時点で最良のものが作れたのかなと思います。

チラ見せにしては、長いエントリーになりましたが、ここには書ききれない機能もいろいろついているんです。
全貌をお見せするわけにはいきませんが、詳しくはお問い合わせください。