前セクションで、ブラウザでホストページ(KNQuizの懸賞が表示されているページ)を開けてKNQuizの懸賞を使用してみました。このページでは、このホストページのソースコードを見てみます。ホストページ(index.html)をメモ帳のようなテキストエディタで開いてください。以下のようなHTMLコード見つかります。

<!doctype html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<title>KNQuiz</title>

<!--[ステップ１] KNQuizスクリプトをロードする-->
<script src="knquiz.js"></script>

</head>

<body>

<!--[ステップ２] KNQuiz懸賞の設定ファイルをロードする-->
<script src="myapp001/settings.js"></script>

</body>

</html>

上記のコード内でハイライトされている行が二行あります。この二行によって、KNQuizは懸賞をホストファイルに表示しています。次に一行づつ役割を説明します。

<!--[ステップ１] KNQuizスクリプトをロードする-->
<script src="knquiz.js"></script>

この <script> タグはKNQuizのスクリプト( knquiz.js )をロードします。このファイルにはカスタマイズするところはありませんので、ファイルをロードする以外にしなければいけない事はありません。

<!--[ステップ２] KNQuiz懸賞の設定ファイルをロードする-->
<script src="myapp001/settings.js"></script>

この <script> タグはKNQuizの設定ファイル( settings.js )をロードします。このファイル内に、懸賞で表示される文言や画像が指定されています。この設定ファイル(settings.js)を編集して懸賞をカスタマイズします。

KNQuizの懸賞は２つのスクリプトタグを使って動作します。最初のスクリプト( knquiz.js )はロードするだけです。カスタマイズの必要はありません。２番目のスクリプト( settings.js )は懸賞の設定を含んでいるので、懸賞をカスタマイズするために編集します。