浮子屋商店もよろしく。
伺か関連ツール/さくらスクリプト解析JavaScript のバックアップの現在との差分(No.5)

バックアップ一覧
差分を表示
現在との差分 - Visual を表示
ソースを表示
バックアップを表示
伺か関連ツール/さくらスクリプト解析JavaScript へ行く。
- 1 (2006-05-21 (日) 11:24:58)
- 2 (2006-05-21 (日) 13:09:28)
- 3 (2006-05-25 (木) 16:04:09)
- 4 (2006-07-26 (水) 00:46:30)
- 5 (2008-04-05 (土) 04:29:43)
追加された行はこの色です。
削除された行はこの色です。
#contents
#contentsx

*何をするもの？ [#a8fde4bf]

ウィンドウ内のさくらスクリプトを解析して、SVGによるサーフィス画像とともに表示するJavaScriptです。


*どんな感じ？ [#te2784ec]
実際にはこんな感じ。

 <SPAN class="sakurascript">sakurascript:ghostname:\t\u\s[10]\h\s[5]
 やほー。\w9こんな感じだよー。
 \w9\w9\u\s[11]あんまりはしゃがない。\e
 </SPAN>

こんなタグがページ内にあると、

&sakurascript(emily4){\t\u\s[10]\h\s[5]やほー。\w9こんな感じだよー。\w9\w9\u\s[11]あんまりはしゃがない。\e};

こんな風に表示されます。

* どこで試せる？ [#h9f49167]

[[テスト用のフォーム>http://ukiya.sakura.ne.jp/other/ss2html.html]]を置いておきました。

* 配布物 [#za7017da]

- &attachref(./sakurareplacer.js); 本体 2005.07.19 version 2.10
- &attachref(./config.js); 設定ファイル - これはサイトの設定に応じて変更してください
- &attachref(./table.css); 外観定義用のCSS - いじれば外観が変わります
- &attachref(./SVGOroshi093.zip); SVGをばらばらにするためのツール 2006/05/20 version 0.93　【要.NET1.1】

*現在の仕様は？ [#j2409be3]

** 対応タグ [#zbfc281e]
|タグ|動作|h
|\_s,\\,\n,\0,\h,\1,\u,\s[],\p[]|これらのタグはその通り解釈されます。 |
|\g[ghostname]|スクリプトの途中でゴーストを変えます。スコープ及びサーフィスは初期化されます。 |
|\URL[url]|<A HREF="url">url</A>と置換されます。 |
|\URL[url][text]|<A HREF="url">text</A>と置換されます。 |
|\URL[url][text][option]|<A HREF="url" option>text</A>と置換されます。((安全のためデフォルトでは機能しないようにしてあります))|
|\s[-1]|surfacenone.pngを表示します。 |
|\w1～\w9,\t,\e,\c,\_q,\nの後の[],\_w[] |無視します。|
|スクリプト中の改行コード|無視します。但し、タグの中の改行コードはそのまま出力されます。&br;&color(Red){一部のブラウザでは、スクリプト中の改行コードが空白になるようです。なるべくスクリプトは（先頭のsakurascript:ghostname:を含め）１行で記述してください。};|
|上記以外のタグ|そのまま表示されます。|

** 置換条件 [#bbefe6a7]
現在のスクリプトは以下の仕様にしています。スクリプトを変えればまあこの辺は適当に。

-タグのクラスが sakurascript　であること 
-タグの中身が sakurascript　ではじまること 

** ブラウザ制限事項 [#x2d52b01]

JavaScriptで実装している以上ブラウザを選ぶのは仕方ないですね。~
掲示板とかへの組み込みの容易さとのバーターです。

-JavaScriptがONであること 
-DHTMLに対応していること 

IE、Opera、Safari、FireFoxで動作したみたいです。


* 組み込み方 [#wb5156e3]

** １．画像を置くディレクトリを決める [#a3e8b1d4]

画像を置く元となるディレクトリを決めてください。以下の例では、http://unene.jp/svg/　以下に置くことにします。

** ２．画像を準備する [#ob70b6c2]

-このページの下にある「SVGOroshi」などのツールを使って、１サーフィス１枚、surfacexxxx.png（xxxxは0000～9999までのサーフィス番号）という名前の画像を作成してください。 
-また、surfacenone.png という画像を作成してください。これは、\s[-1]　を使用した際に表示される画像です。（従って、空白のような画像を作ってください） 
-画像が準備できたら、http://unene.jp/svg/ghostname/ の位置に全ての画像を置いてください。ghostname はゴースト名になります((利用者が識別できればどんな名前でも構いません。SSP等のゴーストのフォルダ名と一致している必要はありません。))

** ３．javascriptを準備する [#i44a53e7]
-config.js と sakurareplacer.js と table.css を用意してください。
-config.js の先頭の imagebase を、１．で決めたURLにあわせて変更してください。今回の例では、
 var imagebase="http://unene.jp/svg/";
となります。
-準備ができたら、config.js と sakurareplacer.js と table.css をサーバの適当なディレクトリに置いてください。今回の例では、 http://unene.jp/script/ に置くことにします。

** ４．javascriptを使いたいページに組み込む [#ae6c84d2]
使いたいページのHTMLの中に、以下の変更を加えてください。

- <HEAD>～</HEAD>タグの中に、以下の３行を記載してください。URLは実際のURLにあわせてください。

 <LINK href="http:/unene.jp/script/table.css" rel="stylesheet" type="text/css">
 <SCRIPT src="http:/unene.jp/script/config.js" type="text/javascript"></SCRIPT>
 <SCRIPT src="http:/unene.jp/script/sakurareplacer.js" type="text/javascript"></SCRIPT> 

-<BODY>タグを、以下のように変更してください。

 <BODY onLoad="SakuraReplace();"> 

** ５．ページの中でさくらスクリプトを書く [#yad88020]

あとは、４．で組み込んだページの中で、以下の条件に当てはまる記載をすれば、その部分がSVG表示に置き換わります。

-タグのクラスを sakurascript とする 
-タグの中身の先頭を sakurascript:ghostname: とする（ghostname は２．で決めた名前です） 

上記条件に当てはまるタグの書き方としては、例えば以下のようになります。~
&color(Red){実際にはなるべく１行で書いてください。改行する場合は\s[]か\h,\uの直後がいいです。&br;特に、ghostname:の直後で改行すると正しく見えない場合があります。};
 <SPAN class="sakurascript">sakurascript:ghostname:\t\u\s[10]\h\s[5]
 やほー。\w9こんな感じだよー。\w9\w9\u\s[11]あんまりはしゃがない。\e
 </SPAN>

* 関連するもの [#ka974173]

:[[駄でべWiki:fifth moon/PukiWiki用さくらスクリプトプラグイン]]|同様の動作をする、pukiwiki用のプラグイン
:[[日々是平凡なり>http://aobanozomi.hp.infoseek.co.jp/]]|ゴーストの更新履歴部分に使用、掲示板への組み込み
:[[百花繚乱>http://ryouran.mallotus-villosus.net/]]|TOPに使用

:[[ダル系工房>http://kazune3.at.infoseek.co.jp/]]|ゴースト「リル」から行ける質問フォーム内で使用

:[[Webゴースト>http://lre.s165.xrea.com/uka/cgi-bin/ghostoropy/view.cgi]]|SakuraScriptを投稿できるCGI