このサイトについて
このサイトはWindowsXP上の次のブラウザで表示確認をしています。
- Firefox ver.3.5.5
- Google chorome ver.3.0.195.33
- Opera ver.10.10
- Internet Explorer ver.8.0.6001.18702
他のブラウザで表示できるかどうかは分かりません。 xml+xsltで書いているので一般的なサイトより表示できるブラウザは少ないはずです。
画面サイズは1280×1024で確認しています。 それより小さい画面で見ると表示が崩れるかもしれません。 とくにFirefoxはxml+xsltで表示できるドキュメントの高さに限界があるようです。 ブラウザの幅を小さくすると改行が多くなり、ドキュメントの高さが増えて表示が崩れます。 ただ、私が普段使っているブラウザはFirefoxなので、画面サイズが十分ならFirefoxが一番崩れません。
一応IEで見れるようには作りましたが、CSSに詳しくない自分にとってIEは鬼門です。 試しに他のブラウザで見てもらえたらと思います。 IEで見る場合、文字サイズを大きくするとtableサイズがうまく調節されずに表示が欠けてしまいます。 文字サイズ中以下で見てください。 また、IEでは次の3つのケースでCSS適用のされかたが違うようです。
- ローカルのhtmlを表示
- サーバ上のhtmlを表示
- xml+xsltのドキュメントを表示
互換表示とかが絡んでいるのだと思います。 確認したバージョンのIEでは表示できていますが、将来どれかの表示方法に統一されたら表示が崩れるかもしれません。
このサイトの作り方
ゲームをプレイしながら、表になりそうなことは全て表計算ソフトでメモをしていきます。 ノウハウや法則などの文章はテキストファイルにメモします。 この攻略情報をまとめるのに使った表計算ソフトはフリーのOpenOffice Calcです。 攻略メモを取るだけなら表計算ソフトはGoogleドキュメントでも十分かもしれません。
ある程度書き起こすべき内容が見えてきたら、表計算ソフトのメモからxmlファイルを作ります。 こんな感じのコードでシートを読みました。 表計算ソフトのマクロで出力する方法もあるし、OpenOfficeAPI×javaで読んだりも出来るらしいんですが、今回はセルが読めれば良いだけなので自分が手っ取り早くできるこの方法にしました。 表データは「???_list.xml」の名前で出力します。
- 依頼.ods → quest_list.xml
- アイテム.ods → item_list.xml
- ペルソナ.ods → persona_list.xml
- ...
各項目のidはxmlファイルを作るときに振ります。
<!-- skill_list.xml -->
<skill_list>
<category name="回復">
<skill id="000">
<name>ディア</name>
...
</skill>
<skill id="001">
<name>ディアラマ</name>
...
</skill>
<skill id="002">
<name>ディアラハン</name>
...
</skill>
...
</category>
</skill_list>
テキストで書いたメモからはhtmlタグを使ったxmlファイルを起こします。 ファイル名は「???_doc.xml」にしました。
- コロマル.txt → dog_walking_doc.xml
- 対エリザベス合体メモ.txt → elizabeth_doc.xml
- ...
「???_doc.xml」の書き方は次のようにしました。
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="p3fes.xsl"?>
<doc title="ドキュメントのタイトル">
<p>
docタグの中身はhtml/bodyの中身を書くのと同様に記述。
ただしxslt変換後のドキュメントの頭にはdoc/@titleが
h1タグで囲まれて表示される。
</p>
<p>
表計算ソフトでまとめた内容にリンクしたいときは
独自タグを書く。<skill name="ディア"/>など。
独自タグはxsltでアンカーにする。
</p>
<p>
skill_list.xmlなど表計算ソフトでまとめたデータを
表示したい場所に独自タグを書き、xsltでtableにする。
</p>
<skill_list/>
</doc>
「???_doc.xml」の独自タグでは<skill name="突撃"/>などのように文字列でリンク先を書いてます。 htmlアンカーのリンク先idで使えるようにするため、これを「???_list.xml」を作るときに決めたidに書き換えます。 name→id書換えはjavaのコードを適当に作り、実行しました。
<skill name="電撃ガードキル"/>を使われたらすぐに <item name="デクンダジェム"/>で解除しましょう。 <item name="デクンダジェム"/>がない場合は <skill name="電撃ガードキル"/>が切れるまで <item name="メディカルパウダー"/>を使って耐えます。
書き換えると次の様になります。
<skill id="096"/>を使われたらすぐに <item id="430"/>で解除しましょう。 <item id="430"/>がない場合は <skill id="096"/>が切れるまで <item id="406"/>を使って耐えます。
「???_doc.xml」を書くときに最初からidを使うことも考えました。 そうすると誤字の修正などが楽になります。 しかし、次の問題点があって断念しました。
- <item id="430"/>とかの表示が大量に並んでいるとドレが何だかわからず修正が面倒。
- 表計算ソフトで行の挿入などがあると全部ずれる。アイテムなどの項目を最初に書いたときにidを振っていくのも考えたが、挿入でidが順番で無くなり気持ち悪い。
nameの中身に誤字があってもxslで「リンク先が無いよ」と表示できるので誤字の検出はできます。 それで今の書き方に落ち着きました。
肝心のxslファイルは次のようになっています。 (一部簡略化、抜粋です。)
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/...">
<xsl:template match="doc">
<html>
<head>
<title><xsl:value-of select="@title" /></title>
...
</head>
<body>
<h1><xsl:value-of select="@title"/></h1>
<xsl:apply-templates />
<!-- 必ず表示するフッタはxslに記述 -->
<p id="footer">
<a href="./p3fes.html">戻る</a>
...
</p>
</body>
</html>
</xsl:template>
<!-- htmlタグはそのまま出力 -->
<xsl:template match="@*|node()" name="copy_template">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
<!-- 独自タグでリンクを作る -->
<xsl:template match="skill">
<xsl:variable name="skill_id" select="@id" />
<!-- idから名前を引く -->
<xsl:variable name="skill_name"
select="document('skill_list.xml')/skill_list/category/skill[@id=$skill_id]/name" />
<xsl:choose>
<xsl:when test="$skill_name">
<!-- idでリンク先を指定 -->
<xsl:element name="a">
<xsl:attribute name="href">./skill_doc.xml#skill<xsl:value-of select="$skill_id" /></xsl:attribute>
<xsl:value-of select="$skill_name" />
</xsl:element>
</xsl:when>
<!-- cssでwarningクラスを強調して誤字を発見できるように -->
<xsl:otherwise><span class="warning">スキルid</span></xsl:otherwise>
</xsl:choose>
</xsl:template>
<!-- skill_list.xmlの内容をtableに -->
<xsl:template match="skill_list">
<table summary="スキル一覧">
<thead>
tableヘッダ...
</thead>
<tbody>
<xsl:for-each select="document('skill_list.xml')/skill_list/category/skill">
<tr>
<!-- skillタグで指定されるリンク先idをtdに -->
<xsl:element name="td">
<xsl:attribute name="id">skill<xsl:value-of select="@id"/></xsl:attribute>
<xsl:value-of select="name"/>
</xsl:element>
各項目...
</tr>
</xsl:for-each>
</tbody>
</table>
</xsl:template>
その他独自タグのテンプレート...
</xsl:stylesheet>
一部横長のコードですみません。 改行すると出力htmlにスペースが入るので1行で書いている箇所があります。
スキル一覧表のテンプレートでtdタグにリンク先idを書いています。 これはtdが縦長になったとき、中のテキストにidを書くとテキスト部分が一番上に表示されるようにスクロールするからです。 <td rowspan="10">のようになっていると行の真ん中あたりに飛んできてしまいます。 tdにidを書くと行全体が見えるように飛んできます。
見ての通りネームスペースは使っていません。 個人で作る攻略サイトの場合は必要ないかと思います。
課題など
細かいことにこだわって完成させずに放っておくのは良くないので、多少ぎこちなくても本編の攻略情報だけでも完成させるという目標でサイトを作りました。 そのため課題は結構残っています。 このサイトを作るのにそれなりに時間を割いたのでこれ以上の更新はしない予定です。 他の事をやるのに時間を使いたい。 しかし、また似たようなことをするときの参考のため課題を挙げておきます。 このサイトを参考に自分のサイトを作る人...はいないと思いますが、そういう奇特な人がいたら目を通してみてください。
・xmlの構造が適当すぎる
「とりあえずそれっぽいサイトを完成させよう」という目標で書きながら構造を決めていったのでアラが沢山残っています。 カレンダーのこの日だけしかないサブイベントは適当なタグで...みたいなのが多いです。 自分で決めた命名規則も守りきれていないのでxslファイルを書くとき戸惑いました。 タグ名の英単語が正しいか分からないのはどうしようもないかな? ゲーム用語の英訳があってるかどうかなんて調べる方法がわかりません。
・xslファイルがスパゲッティ
xml+xsltについて調べながら書いていったので初期の書き方と後半の書き方が微妙に違います。 ここまで大きくなると思っていなかったので1つのファイルに書いてしまったのも失敗でした。 最後の方は「ファイル分割する? いや、今さら分けるのも面倒くさい」とそのまま進めてしまいました。 最初から表ごと、機能ごとに分けて書くべきでした。
cssはブラウザによって分割すると読み込みが遅くなるケースもあるようです。 xslの場合はどうなのかは調べてませんが、最終的に1ファイルにまとめるにしても作業中は分割すべきでした。
・サイト内リンクで<a href="">タグは使わない方が良かった
スキルやペルソナなど一覧表にできそうな単語全部にリンクをいれるためxml+xsltを使いました。 次の3つを作っておけば勝手にリンクができるようにしたかったのです。
- 表計算ドキュメントから「???_list.xml」を作るコード
- xslで「???_list.xml」からtableを作るコード
- xslで<skill id="?"/>などの独自タグを元にリンクを張る10行程度のコード
その他のアンカータグは普通のhtmlで書きました。 しかし、書いている内容をチェックしてみるとリンクチェックはかなり面倒です。 スキルなどの独自タグはリンク先が無ければ強調表示されるように出来るのでリンクチェックは必要ありません。 サイト内リンクも独自タグでやればリンクチェックの手間を省けました。 どうせxml+xsltでやるなら、一手間かけてサイト内リンク用のタグを作るべきでした。
・縦長のtableが読みにくい
縦長のtableを下の方にスクロールするとtableの一番上にあるヘッダは見えなくなってしまいます。 Firefoxだとcssでヘッダを固定してtbodyだけスクロールさせられるのですが、表示確認に使った他のブラウザでは同じことはできません。 同じ問題で困っている人も多いようで、検索すると対処法はいくつか見つかりました。 しかしjavascriptが必要だったり列幅を固定値で指定したりという方法だったのでこのサイトで使うのは止めました。 今回は対処を見送りです。
もし対処をするならということで考えたのは次のやり方です。
- javascript、javaやflashでxmlを読んでtableを表示する汎用コードを作る。読みにくいままだが、javascriptやflashが嫌いな人用に普通のテーブルも残す。
- Googleドキュメントのスプレッドシートで表を作り、そのまま公開する。
- このサイトはFirefox専用です ... 無いな。
・～系へのリンク
このサイトでは「ハイグロウ」にリンクはあっても「グロウ系」にはリンクがありません。 同様に「片手剣」にリンクがあっても「アイテム」にはリンクがありません。 もうちょっと構造を考えてグループにリンクを張れるようにすべきでした。
・文章が下手
永遠の課題です。
