設置方法
アーカイブは下図の構成になっています。SliderPuzzle下のcommonディレクトリは基本的にはさわりません。puzzle1ディレクトリ(フォルダのこと)中にサンプルが入っていますので、そこのindex.htmlをダブルクリックして閲覧してみてください。
パズル用の画像ファイルは画像格納ディレクトリにまとめて置けますが、設定ファイルやスタイルシートは同一です。
ピースの枠線の有無等、基本的な項目は画像ごとに指定できるため、通常は画像ごとに設定ファイルやスタイルシートを変更したいケースはないと思います。しかしもしそれらを変えたパズルも置きたい場合は、puzzle1ディレクトリをコピーして同じ場所に配置してください(例:上図のpuzzle2)。次にpuzzle2/imageサブディレクトリ下にpuzzle2用の画像ファイルを格納します(もちろんpuzzle1/image下に置いたまま、puzzle2の設定ファイルでその場所を指定しても可)。そしてsetting.jsとstyle.cssをテキストエディタで開き、puzzle2固有の設定を行ないます。
自分のサイトに置くときは、SliderPuzzleディレクトリ以下をそのままアップロードすればOKです。
setting.js - パズルの設定
パズルの設定は setting.js の内容を書き換えることで行ないます。Windowsのメモ帳のようなテキストエディタで開いて編集してください。
- 【画像格納ディレクトリ】imageDir
- パズルの背景画像となる画像ファイル群を格納したディレクトリの名前です。絶対パス、またはindex.htmlからの相対パスで記載します。サンプルpuzzle1をコピーしたまま使う場合、変更する必要はありません。大文字小文字、全角半角は区別されます。
- 【画像ごとの設定】imageList
- パズルの背景画像は好きなだけ指定できます。以下は、画像ごとに設定する項目ですが、必須なのは画像のファイル名だけです。
- 【画像のファイル名】src
- 必須項目です。一辺が150px~1000pxの画像を指定してください。大文字小文字は区別されます。
- 【表示サイズ(幅)】viewWidth
- パズルの幅(px)です。画像を縮小または拡大して表示したい場合に、150~1000の間で指定します。画像の幅をそのまま使う場合は、この項目自体を削除するか、値をゼロにしてください。viewHeightがない、またはゼロの場合、当項目は画像の幅をそのまま使うと解釈されます。
- 【表示サイズ(高さ)】viewHeight
- パズルの高さ(px)です。画像を縮小または拡大して表示したい場合に、150~1000の間で指定します。画像の高さをそのまま使う場合は、この項目自体を削除するか、値を0にしてください。viewWidthがない、またはゼロの場合、当項目は画像の高さをそのまま使うと解釈されます。
- 【画像のタイトル】caption
- HTMLページの画像一覧(プルダウンリスト)用のタイトルまたは説明文です。指定しなければ連番が振られて表示されます。
- 【画像の列数】cols
- 横方向の画像分割数です。3~10の間で指定してください。範囲外だったり無指定の場合は適当に分割されます。3~10の間で指定しても、rowsが無指定または範囲外の場合は自動算出を試みるので、colsの指定も使われません。
- 【画像の行数】rows
- 縦方向の画像分割数です。3~10の間で指定してください。範囲外だったり無指定の場合は適当に分割されます。3~10の間で指定しても、colsが無指定または範囲外の場合は自動算出を試みるので、rowsの指定も使われません。
- 【枠線の表示】border
- ピースに枠線をつける場合はtrueを指定します。falseまたは無指定の場合は枠線がつきません。
- 【ピース番号の表示】showLabel
常にピース番号を表示する場合はtrueを指定します。trueの場合、正しい位置にないピースは画像が表示されません。
falseまたは無指定の場合はピース番号が表示されないため、難易度は高くなります。
- 【パズル完成時の挙動】afterFinish
-
- 【種別】kind
- 以下の5種類から選択します。
- 0: メッセージダイアログを表示
- 1: ページ内にテキストを表示
- 2: メッセージダイアログを表示後、指定したページにジャンプ
- 3: メッセージダイアログを表示後、次のパズルを表示(ランダム)
- 4: メッセージダイアログを表示後、次のパズルを表示(imageListで指定した順番通り)
- 【ダイアログ用メッセージ文言】dialogMessage
- 完成時の挙動を1以外にした場合に、メッセージダイアログに表示される文言を記載します。改行を入れたい場合は\n、タブを入れたい場合は\tと書きます。
- 【ページ用メッセージ文言】textMessage
- 完成時の挙動を1とした場合に、パズルページ内に表示される文言を記載します。HTML指定可。
- 【パズル完成時のジャンプ先】jumpURL
- 完成時の挙動を2とした場合に、ジャンプ先のURLを絶対パスまたは相対パスで指定します。
setting.js - 設定後の動作確認(Windowsの場合)
setting.js自体、JavaScriptファイルですので、プログラム的に正しい書き方をしている必要があります。
と言っても「プログラム的に正しい書き方」かどうかの確認は簡単。setting.jsをダブルクリックしてみて「何も起きなければOK」です。もしエラーダイアログが表示された場合は、その内容にそって修正する必要があります。
初期表示パズルを変える
パズル用HTMLファイルを開いたとき、通常はimageListの先頭にある画像が表示されます。もしimageList中の他の画像を初期表示したい場合は、パズル用HTMLファイル末尾にリクエストパラメータを付加し、画像のインデックス(ゼロから始まる連番)を指定します。
たとえば2番目に指定した画像を表示したい場合はURL末尾に ?start=1、3番目の画像の場合は ?start=2 を付加します。
http://example.jp/puzzle1/index.html?start=1