制作する

プロジェクトフォルダを用意する

novelsphere.js コンテンツを制作する際には、コンテンツ1つにつき1つのフォルダを用意することになります。今後、このフォルダをプロジェクトフォルダと呼ぶことにします。

プロジェクトフォルダの雛形（テンプレート）は、SDK に同梱されています（「template」フォルダ）。全ての novelsphere.js コンテンツは、この雛形を加工していく形で制作することができます。

プロジェクトフォルダの内部構造は、以下の通りとなっています。

Config.json		その novelsphere.js コンテンツの初期状態など記述するファイル（詳細は「Config.json を編集する」を参照）
data フォルダ		その novelsphere.js コンテンツの素材を格納するフォルダ
	bgimage フォルダ	背景として使う画像ファイルを格納するフォルダ
	bgm フォルダ	BGM として使うサウンドファイルを格納するフォルダ
	fgimage フォルダ	特にノベルゲームコンテンツの制作において、前景（立ち絵）として使う画像ファイルを格納するフォルダ
	font フォルダ	フォントファイルを格納するフォルダ
	image フォルダ	一般的な画像ファイルを格納するフォルダ
	others フォルダ	特に分類することができないファイルを格納するフォルダ
	rule フォルダ	トランジションで使用するルール画像の画像ファイルを格納するフォルダ
	scenario フォルダ	シナリオファイルを格納するフォルダ
	sound フォルダ	効果音ほか、一般的なサウンドファイルを格納するフォルダ
	video フォルダ	動画ファイルを格納するフォルダ
plugin フォルダ		その novelsphere.js で使用するプラグインを格納するフォルダ

プロジェクトフォルダ内にあるファイルは全て novelsphere.js コンテンツから利用することができますが、コンテンツの素材は全て data フォルダに格納することとし、さらに data フォルダ内は上記のような構造とすることを推奨します。

プロジェクトフォルダ内には、同じファイル名のファイルを2つ以上置くことができません。たとえば image フォルダ内に「test.png」というファイルを置き、なおかつ bgimage フォルダ内にも「test.png」というファイルを置いた場合、ビルド時にエラーが発生します。

Config.json を編集する

「Config.json」には、その novelsphere.js コンテンツのタイトルや画面サイズ、起動直後の状態（初期状態）などを記述します。

特にタイトルや画面サイズは重要ですので、これから制作するコンテンツの情報を正確に記述してください。

「Config.json」の書式については、「Config.json リファレンス」を参照してください。

制作する

テンプレートでは、「scenario」フォルダの中に「first.ks」というファイルがあります。

これが、このコンテンツを再生すると最初に実行される NS KAG スクリプトです。

制作は、このファイルに NS KAG スクリプトを記述していく形で進行します。スクリプトを複数ファイルに分けることも可能ですが、[jump]タグなどで明示的にコンテンツの再生を別のファイルへ移行させない限り、ファイルの末尾に達するとコンテンツの再生は停止します。

スクリプトファイルは、.ks という拡張子を持っていなければなりません。

また ver.2 では、スクリプトファイルは UTF-8 で記述することが必須となりました。

なお、NS KAG スクリプトの記述法に関しては、「NS KAG マニュアル」を参照してください。

また、必要に応じて、画像やサウンドなどのファイルを準備し、プロジェクトフォルダ内に格納することで、コンテンツ内からそれらのファイルを利用することができます。

動かしてみる

制作した novelsphere.js コンテンツを実際に動作させるには、Builder を使用します。

Builder は、プロジェクトフォルダをまとめて、実際に動作する形で出力する（ビルドする）ためのアプリケーションであり、SDK に同梱されています。制作の際には、「プロジェクトフォルダの中身をいじる」→「Builder でビルドする」→「ビルドされた結果を開いて実際に動かしてみる」のステップを何度も繰り返すことになります。

ビルドされた novelsphere.js コンテンツは、1つのフォルダにまとめられています。今後、このフォルダをコンテンツフォルダと呼ぶことにします。

コンテンツフォルダは以下のような構造となっています。

index.html		この HTML ファイルを開けば、その novelsphere.js コンテンツが再生されます
script.js		その novelsphere.js コンテンツのスクリプトや、Config.json 情報などが格納されたファイルです
	engine フォルダ	novelsphere.js そのものが入っているフォルダです
	font フォルダ	その novelsphere.js コンテンツで使用するフォントファイルが入っているフォルダです
	image フォルダ	その novelsphere.js コンテンツで使用する画像ファイルが入っているフォルダです
	sound フォルダ	その novelsphere.js コンテンツで使用するサウンドファイルが入っているフォルダです
	video フォルダ	その novelsphere.js コンテンツで使用する動画ファイルが入っているフォルダです

出力されたファイルの中にある「index.html」を開けば、その novelsphere.js コンテンツが再生されます。

なお、コンテンツフォルダの内容を直接編集することは推奨されません。コンテンツの内容に手を加えたいときは、プロジェクトフォルダの内容を編集した上で、再度ビルドを行ってください。

Builder の詳しい使い方については、「Builder リファレンス」を参照してください。

デバッグする

コンテンツが思った通りの動作をしないときには、ブラウザを用いてデバッグする必要があります。

デバッグの際には以下の点に留意してください。

キャッシュを無効化する

同じコンテンツを何度も再生し直す場合、ブラウザのキャッシュが障害となることがあります。

そのため、novelsphere.js コンテンツをデバッグする際には、ブラウザのキャッシュを使わずにコンテンツを再生することが必要となります。

各ブラウザで、キャッシュを使わずにコンテンツを再生する方法は以下のとおりです（2013年8月14日現在）。

Google Chrome	Ctrl キー + Shift キー + J キー（Mac の場合は⌘(Command キー) + ⌥(Option キー) + J キー）を押して現れるコンソール画面右下の歯車アイコンをクリックし、「Setting」項目の「General」項目内にある「Disable Cache」にチェックマークを入れる。 コンソール画面は、デバッグ中、常に表示したままにしておく。
Mozilla Firefox	コンテンツを再読込する際に、Ctrl キー + Shift キー + R キー（Mac の場合は⌘(Command キー) + ⇧(Shift キー) + R キー）を使って再読込を行う。
Safari	コンテンツを再読込する際に、⌘(Command キー) + ⇧(Shift キー) + R キーを使って再読込を行う。
Internet Explorer	F12 キーを押して現れる F12 開発者ツールの「キャッシュ」メニューをクリックし、「常にサーバーから更新する」を選択する。 F12 開発者ツールは、デバッグ中、常に表示したままにしておく。
携帯端末については、機種やブラウザのバージョンによってキャッシュを無効化する方法が異なります。

JavaScript コンソールを確認する

デバッグプラグインを使うことで、novelsphere.js コンテンツは JavaScript コンソールに随時ログを出力するようになります。このログを読むことで「どのタグがうまく動いていないのか」「どんなエラーメッセージが出力されているか」を知ることができます。

デバッグプラグインの使い方については「プラグインリファレンス」を参照してください。