★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
PCH再生支援スクリプト "PCH View script"
（C)ＳＩＮ (sin@vc-net.ne.jp)
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
■概要
CGIを用いずに、HTMLとJavaアプレットだけでしぃちゃんアプレットの
描画アニメデータ(PCHファイル/SPCHファイル)の再生を行なうための
JavaScriptです。お絵描きアニメをサイト上で公開するのに利用できます。
(PCHはPaintBBSのアニメデータ、SPCHはShiPainterのアニメデータです)
通常、PCHの再生にはキャンバスサイズを指定しなければいけないため、
CGIを用いるか、PCHファイルごとに個別のHTMLを用意しなければいけない
などの面倒な仕組みが必要でしたが、このJavaScriptを用いれば、
アニメ再生を呼び出すためのリンク内にサイズや速度を記述できます。
(実際の再生画面はそのパラメータからJavaScriptで自動生成されます)
記述は簡単で、呼び出し用のHTMLの中にわずか2行の以下のタグを入れるだけです。
(例)
アニメ再生
特殊な追加機能として、
・一発選択式の速度変更フォーム
・レイヤーのON/OFF表示フォーム(要PCHViewer.jar)
・画像をアニメ再生の隣に並べて表示
・PCHファイルのダウンロードボタン表示
なども用意しています。
注: selectによる速度変更機能等、外部フォームでのアプレット動作制御は
MacOS＋IE5およびiCabでは動作しません。(NN7でなら可)
MacIE＆iCabでも利用する必要がある場合は再生アプレットにPaintBBS.jarでなく
PCHViewer.jarを使いましょう。
(PCHViewer.jarではアプレット側に速度切替機能が内蔵されています)
レイヤー表示切替機能はアプレットにもボタンが無いのでどうにもなりませんが;;;
また、ダウンロードしたPCHファイルのローカル再生(自分のPC上での再生)も
容易に行えるおまけ機能も搭載しています。→参照:■設置方法３
(入力フォームから任意ファイル名などを指定して呼び出せます)
再生アプレットにはPCHViewer.jarまたはPaintBBS.jarが利用できます。
Javaアプレットはしぃちゃんのサイトからダウンロードしてください。
(Javaなお子様的HP http://www.gt.sakura.ne.jp/~ocosama/)
注: 一応、PCHViewer.jar v1.05のサブセットを同梱してありますので
サンプルのPCHファイルの再生は可能ですが、リソースファイルを
入れていないためSPCHファイルの再生はできません。
また、最新アプレットで作成されたデータの再生については保証できません。
設置時には最新の再生用アプレットを別途入手されることを推奨します。
●動作確認
Windows 2000 + IE 5.5
Windows 2000 + NN 7.02
Windows 2000 + Opera 7.03
Windows 98 + NN 4.7
Windows 98 + NN 6.2
Mac OS 9 + IE 5.1 (外部コントロールに制限あり)
Mac OS 9 + NN 7.0
Mac OS X + IE 5.2.2 (外部コントロールに制限あり)
Mac OS X + NN 7.02
Mac OS X + iCab 2.9.1 (外部コントロールに制限あり)
■設置方法１(基本)
通常の、リンクによる指定アニメデータの再生は以下のように設置を行ないます。
1.アニメデータを呼び出すHTMLの上の方(〜の間など)に
以下の１行を記述します。
2.HTML上のアニメデータの呼び出しリンクを以下の例のように記述します。
(例1: PCHファイル再生時)
アニメ再生
(例2: SPCHファイル再生時)
アニメ再生
'sample.pch'は再生したいアニメデータのファイル名。
最初の300は横幅、次の300は高さ、0は再生速度の指定となります。
SPCHファイル再生時にはさらにレイヤー数の指定が可能になります。
横幅、高さ、速度、レイヤー数は省略可能です。
(詳しくは後述の ■パラメータ詳細 を参照)
3.記述したHTMLと、pchview.js(本スクリプト)、PCHファイル、再生用Javaアプレット
を同じディレクトリに置きます。
(アプレットの設置位置を変える場合は後述の ■設定項目 を参照)
再生用JavaアプレットはPCHViewer.jar、またはPaintBBS.jarが利用できます。
(SPCHファイルの再生にはShiPainter対応版のPCHViewer.jarでなければいけません。
その際は必ずresディレクトリもアップロードしてください。)
これで設置は完了です。
HTMLを表示させてリンクをクリックすれば、アニメ再生のウインドウが出てきます。
■設置方法２(画像を並べて表示する)
アニメ再生時に、左隣に画像を並べて表示させることもできます。
完成画像や説明画像などを表示させるのに利用できます。
1.■設置方法１の1.と同じ。
2.HTML上のアニメデータの呼び出しリンクを以下の例のように記述します。
(例)
アニメ再生(画像付き)
'sample.jpg'が表示する画像ファイル名になります。
3.■設置方法１の3.に加えて、表示させる画像ファイルも同じディレクトリに
アップロードします。
■設置方法３(フォーム指定)
アニメデータを直接指定せず、入力フォームを使って任意のデータを呼び出す方法です。
再生リンクと併用することも可能です。
設置方法は再生リンクと基本的には同じで、2.のリンクの代わり(または併記)として
HTMLのお好きな場所(入力フォームを表示させたい場所)に以下の行を記述します。
---- ここから ----
---- ここまで ----
HTMLを表示してみて、
■filename■ [ ] [ アニメ再生 ]
width:[300 ] height:[300 ] layer:[3 ] speed:[1 ]
という感じの入力フォームが表示されれば設置は成功です。
なお、filenameの入力は拡張子の".pch"を省略可能です。
※Tips:入力フォームの形式
入力フォームは
・nameに"PCHFORM"が指定されていること
・呼び出し先は javascript:pchform() 関数
・入力パラメータは filename、width、height、layer、speed の5つ
という仕様になっていますので、これに準拠していれば自分で好きな入力フォームを
記述して設置することも可能です。
参考までに、デフォルトのフォームの内容は
このような内容になっています。
(サイズと速度の初期値はpchview.jsでの設定内容が反映されています)
デフォルトのフォームはpchview.jsのpchforminit()関数内で生成してるので、
これを直接書き換えれば複数のHTMLで設置してる場合でも変更が容易になります。
■パラメータ詳細
アニメ再生用のJavaScript関数pchview()のパラメータは以下のようになっています。
pchview('アニメファイル名', 横幅, 高さ, 速度, レイヤー数)
A) pchview('アニメファイル名', '画像ファイル名', 横幅, 高さ, 速度, レイヤー数)
B) pchview('アニメファイル名', 'ラベル文字列', 横幅, 高さ, 速度, レイヤー数)
パラメータ1: 描画アニメデータ(PCH/SPCH)のファイル名です。
拡張子は省略可能です。
省略時の拡張子は.pchになります。(sii_extで設定)
パラメータ2: キャンバスの横幅です。(※省略可)
省略時は300になります。(sii_widthで設定)
パラメータ3: キャンバスの高さです。(※省略可)
省略時は300になります。(sii_heightで設定)
パラメータ4: 再生速度です。(※省略可)
省略時は0になります。(sii_speedで設定)
参考までにBBS Noteのアニメ再生速度は
最速=-1/高速=0/中速=10/鈍足=100/スロー=1000
となっています。
パラメータ5: SPCHファイルのレイヤー数です。(※省略可)
レイヤー表示ON/OFFスイッチの表示数に関係します。
省略時は3になります。(sii_layerで設定)
PCHファイル再生時は2で固定となり指定は無視されます。
パラメータA: 横に並べて表示する画像ファイル名です。(※省略可)
このパラメータはアニメファイル名より後ろであればどの位置に
入れても構いません。
指定するとキャンバスの横幅分だけウインドウサイズが広がって
アニメ再生の左側に画像を並べて表示します。
パラメータB: 再生画面の上部に表示するラベル文字列です。(※省略可)
省略時は何も表示しません。(htmllabelで設定)
注意事項として
「数字から始まる文字列は指定しないこと」
「. を含む文字列は指定しないこと」
という制限があります。
画像ファイル名と同時に指定することも可能です。
各パラメータを省略した場合の表記は pchview('file') のようになります。
速度を指定しつつサイズを省略する場合は、サイズに0を指定してください。
pchview('file', 0, 0, 10) ←サイズはデフォルトで、速度のみ10を指定
■設定項目
このスクリプトではpchview.jsの設定項目を編集することで以下の設定が可能です。
・sii_viewer = 0/1/2/3;
0:PaintBBS.jarを使う
1:PCHViewer.jar(v1.03以降) を使う
2:PCHViewer.jar & MgLine.zip を使う
3:PCHViewer.jar & PaintBBS.jar を使う
再生アプレットの指定です。標準設定では1になっています。
PCHViewer.jarのv1.03以降とはShiPainter対応版のPCHViewerです。
SPCH形式のアニメデータはこのアプレットでしか再生できないので
注意してください。
PaintBBS.jarだけではレイヤーのON/OFFが使えないなど機能制限があります。
また、MacOS＋IE5およびiCabの組み合わせでは速度変更もできません。
PaintBBS.jarのv2.05以降で描かれたアニメはPCHViewer.jar v1.02以降でないと
再生できない場合があるので注意してください。
MgLine.zipの代わりにPaintBBS.jarを使うようにすればバージョンを合わせやすい
かもしれませんが、そのような組み合わせでは配布されてないので、2種類の
アーカイブから自分で組み合わせてアップロードする必要があります。
・sii_width = 横幅;
再生キャンバスの横幅の省略時の値です。
標準設定では300になっていますが、普段のお絵描きサイズが違う場合は
これを設定することでリンク側でいちいち指定する必要がなくなります。
・sii_height= 高さ;
再生キャンバスの高さの省略時の値です。
標準設定では300になっていますが、普段のお絵描きサイズが違う場合は
これを設定することでリンク側でいちいち指定する必要がなくなります。
・sii_speed = 速度;
再生スピードの省略時の値です。標準設定では0になっています。
・sii_layer = レイヤー数;
SPCHファイルのレイヤー数の省略時の値です。標準設定では3になっています。
・sii_ext = '拡張子';
アニメデータの拡張子省略時の拡張子名です。'.pch'または'.spch'を指定します。
(.pchはPaintBBS用アニメデータ、.spchはShiPainter用アニメデータです)
標準設定では'.pch'になっています。
・htmltitle = 'タイトル文字列';
再生ウインドウのタイトル文字列です。
標準設定では'PCHアニメ再生'になっています。
・htmlbody = 'BODYタグパラメータ文字列';
再生ウインドウのBODYタグのパラメータ設定です。
'bgcolor="#色"' で背景色、'background="画像ファイル名"'で背景画像など。
自サイトに設置する場合に、背景色などを合わせたいときに設定します。
標準では'bgcolor="#FFFFFF"'になっています。
・htmllabel = '表示文字列';
再生ウインドウの上部に表示するラベル文字列の省略時の内容です。
説明文などを表示したい場合に設定します。
標準では特に設定されていません。
・speedfunc = 0/1;
再生画面上に再生速度切替フォームを表示します。
0で非表示、1で表示。標準設定では1(表示)になっています。
PCHViewer.jarを使ってる場合は本体側でも速度指定が可能なので
その方がどのOS/ブラウザでも確実に動作しますが、こちらの方が
もう少し細かい指定が可能になっています。
・layerfunc = 0/1;
再生画面上にLayer表示切替フォームを表示します。
0で非表示、1で表示。標準設定では1(表示)になっています。
Layer0、1のチェックをそれぞれON/OFFすることで、レイヤーの表示/非表示を
切り替えることができます。
レイヤーの使い分けを見られるようにしたい場合や、レイヤー1が邪魔で
レイヤー0の画像が見られない場合などに使うと便利です。
・downfunc = 0/1;
再生画面上にPCHファイルへのダウンロードリンクを表示します。
0で非表示、1で表示。標準設定では0(非表示)になっています。
閲覧だけじゃなく、アニメデータの配布もしたい場合にどうぞ。
・speedform = 1;
入力フォームで呼び出す場合の速度値の入力方法を指定します。
0で直接数値を文字入力、1であらかじめ用意した速度値からselectになります。
・appdir = 'ディレクトリ名';
アプレットの設置ディレクトリです。
アプレットをHTMLと異なるディレクトリに設置するときに指定します。
末尾に必ず / をつけてください。('../'や'./applet/'など)
[EOF]
){kind=link}