コーディング前に行うこと

HTMLファイルの記述
- ROCOCOライブラリのみ用いる場合
- ROCOCO Google Maps を用いる場合
JavaScriptファイルの取り込み
- ROCOCOライブラリのみ用いる場合
- ROCOCO Google Maps を用いる場合

HTMLファイルの記述

書式および文字コード

HTMLファイルは、文字コードをUTF-8で記述して下さい。 ROCOCOライブラリは全てUTF-8N(UTF-8,BOMなし)で記述していますので、ブラウザによっては文字コード間の齟齬が見抜けない可能性があります。

また、Google Maps API を利用する場合は、書式をXHTMLで記述して下さい。 Google Maps API が求めています。ROCOCOライブラリ自体はXHTMLである必要はありません。

ROCOCOライブラリのみ用いる場合

ROCOCOライブラリは次のファイルを取り込む必要があります。

http://www.finds.jp/rococo/b2/rococo.js
http://www.finds.jp/rococo/b2/rococo.css

具体的には次のように記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo.css" />
...
</head>
<body>
...
</body>
</html>

ROCOCO Google Maps を用いる場合

ROCOCO Google Maps を用いる場合には、ROCOCOライブラリおよびROCOCO Google Mapsを使用可能にする必要があるので、次のような外部ファイルが必要となります。

http://www.finds.jp/rococo/b2/rococo.js
http://www.finds.jp/rococo/b2/rococo.css
http://www.finds.jp/rococo/b2/rococo_rccgm.js
http://www.finds.jp/rococo/b2/rococo_rccgm.css

また、Google Maps API自体を利用する際には、次のことに注意して下さい。

Google Maps API を使用するためには、ライセンスキーを取得する必要があります。http://www.google.com/apis/maps/signup.htmlで取得することができます。
html要素でxmlns:v="urn:schemas-microsoft-com:vml"というXML名前空間宣言を行うことが推奨されています。

これらをまとめると、HTMLファイルは、次のような記述となります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo.css" />
<script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo_rccgm.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo_rccgm.css" />
<script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=(Google Maps API のライセンスキー)" type="text/javascript"></script>
...
</head>
<body>
...
</body>
</html>

JavaScriptファイルの取り込み

HTMLに、さらに開発者が作成するJavaScriptファイルを用意する必要があります。スクリプトを作成する際には、次のことをお勧めします。

スクリプトは外部ファイルにした方がいいでしょう。
スクリプトファイルはUTF-8で記述した方がベターでしょう。

ROCOCOライブラリのみを用いる場合

仮に sample.js をコンテンツ開発者が作成するスクリプトとした場合のHTML記述例を下に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo.css" />
<script type="text/javascript" src="sample.js"></script>
...
</head>
<body>
...
</body>
</html>

ROCOCO Google Mapsを用いる場合