XMLで絵本を作る

もくじ > Web開発ノート > 独自開発CMS+PHP

HTMLはHyperText Markup Languageと言う名の意味の通り、本来プログラミングの知識が無くても思い通りのレイアウトを作るためのものでした。しかし、実際はスタイルシートの工夫を駆使しないと自分が頭で考えているようなデザインを再現するのは難しく、様々な環境に対応した生きている機能を持ったデザインを表現するのは、苦痛になるほど頭を使います。

HTMLとスタイルシートが得意なコーディング職人と役割分担して、一番面倒な部分が仕上がった状態のテンプレートを用意してもらい、文字の部分をコピペしたり、必要なパーツを組み合わせてホームページを仕上げていくのも難しいほど、最近のHTMLの見た目は暗号のように複雑化しています。

そこで、余計のものを全部省いたルールを、自分達で決めなおし、XMLでサイト設計できるようにしておけば、必要最低限のテキストだけで、自動的に複雑なサイトを構築してくれる仕組みを実現することもできます。

ここでは東京ミステリーファイルを参考に、XMLPHPを組み合わせたテキストベース型の独自CMSの事例を紹介します。

東京ミステリーファイルの場合

このWebページは、中野区の哲学堂公園について紹介したコンテンツです。
https://kozukueichigo.com/report.php?mode=file&file=1&lang=jp

動画のタイムラインを追うように物語を読む事ができます。

使い方は、こちらからご覧ください。
https://kozukueichigo.com/story.php?scene=2&lang=jp

東京ミステリーファイルは120ヶ所以上の東京都内の史跡や特徴的な機関を紹介しています。
表示速度や、コンテンツとしての使いやすさ、閲覧する面白さなど、今お読みのこのWordPressのブログと比較してみてください。

英語版に切り替えることもできます。
https://kozukueichigo.com/report.php?mode=file&file=1&lang=en

このkozukueichigo.comの中には、この他にも、100話程度の物語が日本語と英語で用意されており、2ヵ国語合わせて、合計440以上のコンテンツを収録していて、現在も増え続けています。

ファイル総数としては、4000以上ありますが、その内容はプログラムファイルよりも、写真やイラストなどの画像が多く占めています。

このサイトを作る労力としては、基幹となるプログラム部分よりも、シナリオデータや画像を集めて、コンテンツとして並べていく内容執筆のほうに時間をかけています。

XMLの記述例

コンテンツの内容はXMLで書きます。
例えば、哲学堂公園については、以下のような内容のXMLを用意して、PHPにてページを生成させています。

<?xml version="1.0" encoding="utf-8" ?>
<data>
 <info city="nakanoku" cos="user" ttl="哲学堂公園" detail="中野区松が丘1丁目34、西武新宿線新井薬師前駅付近" />
 <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は以下のページの内容の一部を抜粋したものです。
https://kozukueichigo.com/report.php?mode=file&file=1&lang=jp

わかりやすいテンプレートルールを決めておき、それに沿ってコンテンツを書きこみ。背景画像の指定、人物配置の設定、使う吹き出しの種類などを指定し、台詞を書き込みます。

このように面倒なものは全て省いた状態の記述ルールを決めておけば、シナリオ執筆者が内容に専念して再編集も追加も行う事ができます。

多国語対応も簡単

同じルールで全てを英語表記で書き込んだものを用意すれば、これをそのまま英語版として扱う事もできます。

<?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>

以上のXMLで生成されたWebページは以下のURLで確認できます。
https://kozukueichigo.com/report.php?mode=file&file=1&lang=en

同じデータを別の表現で活用

難しいレイアウト構築部分(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>

このデータを読み取り、東京都の地図で表現したものが以下のページです。

日本語版のページ
https://kozukueichigo.com/report.php?lang=jp

英語版のページ
https://kozukueichigo.com/report.php?lang=en

同じこのデータを読み取り、トップページの更新一覧として表示したものが、以下のページです。

日本語版のページ
https://kozukueichigo.com/?lang=jp

英語版のページ
https://kozukueichigo.com/?lang=en

データそのものはデータベースなどを使わず、テキストエディタで開いて中身を確認する事ができます。そのため、ちょっとした文言修正や、表現の変更による差し替え。データの追加などは技術者の手がなくても、自分の手で書き換える事ができます。

そして、使っているPHPやXMLデータをそのまままるごとコピーしておけば、バックアップとして保存する事もできます。

機密性のある内容を扱ったり、検索の高速化など、データベースならではの特性を必要としないコンテンツであれば、こういう形のCMSで構築してみるのもひとつの選択肢としていかがでしょうか。

次はメールフォームの作り方について説明します。