浮子屋商店もよろしく。

伺か関連ツール/さくらスクリプト解析JavaScript のバックアップ(No.4)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - 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)

何をするもの？
どんな感じ？
どこで試せる？
配布物
現在の仕様は？
組み込み方
関連するもの

何をするもの？

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

どんな感じ？

実際にはこんな感じ。

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

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

	やほー。こんな感じだよー。
	あんまりはしゃがない。

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

どこで試せる？

テスト用のフォームを置いておきました。

配布物

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

現在の仕様は？

対応タグ

タグ	動作
\_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>と置換されます。*1
\s[-1]	surfacenone.pngを表示します。
\w1～\w9,\t,\e,\c,\_q,\nの後の[],\_w[]	無視します。
スクリプト中の改行コード	無視します。但し、タグの中の改行コードはそのまま出力されます。
上記以外のタグ	そのまま表示されます。

置換条件

現在のスクリプトは以下の仕様にしています。スクリプトを変えればまあこの辺は適当に。

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

ブラウザ制限事項

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

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

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

組み込み方

１．画像を置くディレクトリを決める

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

２．画像を準備する

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

３．javascriptを準備する

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を使いたいページに組み込む

使いたいページの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();">

５．ページの中でさくらスクリプトを書く

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

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

上記条件に当てはまるタグの書き方としては、例えば以下のようになります。

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