* U K I Y A H O N P O *
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura,
che la diritta via era smarrita.
リロード   新規 下位ページ作成 編集 凍結 差分 添付 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
浮子屋商店もよろしく。

Source of 伺か関連ツール/さくらスクリプト解析JavaScript

Top > 伺か関連ツール > さくらスクリプト解析JavaScript
#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:を含め)1行で記述してください。};|
|上記以外のタグ|そのまま表示されます。|

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

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

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

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

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

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


* 組み込み方 [#wb5156e3]

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

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

** 2.画像を準備する [#ob70b6c2]

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

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

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

- <HEAD>~</HEAD>タグの中に、以下の3行を記載してください。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();"> 

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

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

-タグのクラスを sakurascript とする 
-タグの中身の先頭を sakurascript:ghostname: とする(ghostname は2.で決めた名前です) 

上記条件に当てはまるタグの書き方としては、例えば以下のようになります。~
&color(Red){実際にはなるべく1行で書いてください。改行する場合は\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