XMLで絵本を作る
HTMLはHyperText Markup Languageと言う名の意味の通り、本来プログラミングの知識が無くても思い通りのレイアウトを作るためのものでした。しかし、実際はスタイルシートの工夫を駆使しないと自分が頭で考えているようなデザインを再現するのは難しく、様々な環境に対応した生きている機能を持ったデザインを表現するのは、苦痛になるほど頭を使います。
HTMLとスタイルシートが得意なコーディング職人と役割分担して、一番面倒な部分が仕上がった状態のテンプレートを用意してもらい、文字の部分をコピペしたり、必要なパーツを組み合わせてホームページを仕上げていくのも難しいほど、最近のHTMLの見た目は暗号のように複雑化しています。
そこで、余計のものを全部省いたルールを、自分達で決めなおし、XMLでサイト設計できるようにしておけば、必要最低限のテキストだけで、自動的に複雑なサイトを構築してくれる仕組みを実現することもできます。
XMLの記述例
コンテンツの内容はXMLで書きます。
例えば、キャラクターの会話シーンを表現する場合、以下のような内容のXMLを用意して、PHPにてページを生成させることができます。
<?xml version="1.0" encoding="utf-8" ?>
<data>
<info city="nakanoku" cos="user" ttl="哲学堂公園" detail="中野区松が丘１丁目３４、西武新宿線新井薬師前駅付近" />
<flow>
<talk><![CDATA[ここは中野区にある<b>哲学堂公園</b>だよ。]]></talk>
<talk><![CDATA[<b>哲理門</b>をくぐったら精神修養のはじまり。]]></talk>
<talk><![CDATA[この門は<b>妖怪門</b>とも言われていてさ。]]></talk>
<talk><![CDATA[右に天狗像。]]></talk>
<talk><![CDATA[左に幽霊像が置かれてるんだ。]]></talk>
<talk><![CDATA[妖怪とか、幽霊とかってさ。]]></talk>
<talk><![CDATA[外国から来た人も怖がるのかな？]]></talk>
<talk><![CDATA[日本人しか襲わない妖怪とかいるよね？]]></talk>
<talk><![CDATA[外国にはドラキュラとか、狼男がおるやんか。]]></talk>
<talk><![CDATA[あれは作り話じゃん。]]></talk>
<talk><![CDATA[妖怪だって<b>迷信</b>やろ？]]></talk>
<talk><![CDATA[迷信はさ、戦国時代を舞台に、]]></talk>
<talk><![CDATA[江戸時代の人が創作したものが多いんだってさ。]]></talk>
<talk><![CDATA[江戸時代の人はそれを物語として楽しんでた。]]></talk>
<talk><![CDATA[迷信って作り話なん？]]></talk>
<talk><![CDATA[明治時代以降…、]]></talk>
<talk><![CDATA[なぜかそれが実話のように語り継がれて、]]></talk>
<talk><![CDATA[大正時代には迷信に縛られる人が増えてさ。]]></talk>
<talk><![CDATA[それが教育の妨げにもなってたんだって。]]></talk>
<talk><![CDATA[なんでも神様のせいにしてた？]]></talk>
<talk><![CDATA[でも、火のないところに煙は立たないって言うじゃん？]]></talk>
<talk><![CDATA[明治時代に…、]]></talk>
</flow>
</data>
わかりやすいテンプレートルールを決めておき、それに沿ってコンテンツを書きこみ。背景画像の指定、人物配置の設定、使う吹き出しの種類などを指定し、台詞を書き込みます。
このように面倒なものは全て省いた状態の記述ルールを決めておけば、シナリオ執筆者が内容に専念して再編集も追加も行う事ができます。
多国語対応も簡単
同じルールで全てを英語表記で書き込んだものを用意すれば、これをそのまま英語版として扱う事もできます。
<?xml version="1.0" encoding="utf-8" ?>
<data>
<flow>
<talk><![CDATA[This is a philosophy park.]]></talk>
<talk><![CDATA[This entrance called 'The gate of the ghost'.]]></talk>
<talk><![CDATA[There is the stone image of the ghost in that cage.]]></talk>
<talk><![CDATA[I am afraid of ghosts.]]></talk>
<talk><![CDATA[Is a foreign ghost different from a Japanese ghost?]]></talk>
<talk><![CDATA[Why do you think so?]]></talk>
<talk><![CDATA[The scary point of Japanese horror movie..]]></talk>
<talk><![CDATA[and foreign horror movie are different.]]></talk>
<talk><![CDATA[The Japanese people has a potential sense of fear.]]></talk>
<talk><![CDATA[Most of Japanese are afraid of a superstition.]]></talk>
<talk><![CDATA[We called it MEISHIN in Japanese.]]></talk>
<talk><![CDATA[Many superstition were created..]]></talk>
<talk><![CDATA[during the Edo period.]]></talk>
<talk><![CDATA[It was old entertainment more than 200 years.]]></talk>
<talk><![CDATA[But, The people thought it to be a true story.]]></talk>
<talk><![CDATA[They can not make the correct judgment.]]></talk>
<talk><![CDATA[That is disturbing knowledge.]]></talk>
<talk><![CDATA[His name is ENRYO INOUE.]]></talk>
<talk><![CDATA[100 years ago.]]></talk>
<talk><![CDATA[He tried to solve this problem.]]></talk>
<talk><![CDATA[This park was his school TETSUGAKUDO.]]></talk>
<talk><![CDATA[What did he do?]]></talk>
<talk><![CDATA[He solved ghosts scientifically.]]></talk>
</flow>
</data>以上のようなルールで別の言語のファイルを用意しておけば、多国語対応する事も、別々に更新する事も可能です。
同じデータを別の表現で活用
難しいレイアウト構築部分(PHPで制作)と、シナリオデータの部分(XML)を分けておく事で、シナリオデータには一切手を加えずに、基盤となるプログラムを変更するだけで、全体のコンテンツの改良を行ったり、全く違う表現方法や、違うプラットフォーム向けのコンテンツに変換して表示する事もできるようになります。
例えば、コンテンツの目次となるデータを以下のようなXMLで作っておけば、サイトマップ全体を把握することができます。
<?xml version="1.0" encoding="utf-8" ?>
<data>
<report num="124" city="okutama" update="20171209">
<ttl><![CDATA[奥多摩湖底の小河内村]]></ttl>
<text><![CDATA[かつて東京都の西に存在していた集落、小河内村。ダムの建設により奥多摩湖の湖底に沈んだ。]]></text>
</report>
<report num="123" city="okutama" update="20171208">
<ttl><![CDATA[日原鍾乳洞]]></ttl>
<text><![CDATA[自然が何万年もかけて作った、関東最大級の大きな鍾乳洞。ここはかつて山岳信仰のメッカだった。]]></text>
</report>
<report num="122" city="chiyodaku" update="20170326">
<ttl><![CDATA[地下鉄サリン事件]]></ttl>
<text><![CDATA[宗教団体オウム真理教が引き起こした東京都の同時多発テロ。世界で初めて神経ガスが使用されたテロである。]]></text>
</report>
<report num="121" city="hachioji" update="20170125">
<ttl><![CDATA[八王子城跡]]></ttl>
<text><![CDATA[豊臣秀吉の全国統一の前、関東を支配していた北条氏が誇る鉄壁の要塞、八王子城の悲劇。]]></text>
</report>
<report num="120" city="taitoku" update="20170124">
<ttl><![CDATA[谷中五重塔]]></ttl>
<text><![CDATA[明治時代の小説にもなった谷中霊園の五重塔。今は姿のない幻の存在となってしまった。]]></text>
</report>
</data>
このデータを読み取り、東京都の地図上に地点を打ち込んで表現する事もできます。
データそのものはデータベースなどを使わず、テキストエディタで開いて中身を確認する事ができます。そのため、ちょっとした文言修正や、表現の変更による差し替え。データの追加などは技術者の手がなくても、自分の手で書き換える事ができます。
そして、使っているPHPやXMLデータをそのまままるごとコピーしておけば、バックアップとして保存する事もできます。
機密性のある内容を扱ったり、検索の高速化など、データベースならではの特性を必要としないコンテンツであれば、こういう形のCMSで構築してみるのもひとつの選択肢としていかがでしょうか。