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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - 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:emily4:\t\u\s[10]\h\s[5]やほー。\w9こんな感じだよー。 \w9\w9\u\s[11]あんまりはしゃがない。\e</SPAN>

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

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

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

どこで試せる？

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

現在の仕様は？

対応タグ

\_s,\\,\n,\0,\h,\1,\u,\s[],\p[] これらのタグはその通り解釈されます。 \g[ghostname] 2005/05/21 追加。スクリプトの途中でゴーストを変えます。スコープ及びサーフィスは初期化されます。 \URL[url] 2005/05/21追加。<A HREF="url">url</A>と置換されます。 \URL[url][text] 2005/05/21追加。<A HREF="url">text</A>と置換されます。 \URL[url][text][option] 2005/05/21追加。<A HREF="url" option>text</A>と置換されます。 （安全のためデフォルトでは機能しないようにしてあります） \s[-1] 2005/05/28追加。surfacenone.pngを表示する形になります。

無視するタグ

\w1～\w9,\t,\e,\c,\_q,\nの後の[],\_w[] 上記以外のタグはそのまま表示されます。また、タグの中以外の改行コードも無視されます。(2005/05/29)

置換条件

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

タグのクラスが sakurascript　であること タグの中身が sakurascript　ではじまること ブラウザ制限事項 JavaScriptで実装している以上ブラウザを選ぶのは仕方ないですね。 掲示板とかへの組み込みの容易さとのバーターです。

JavaScriptがONであること DHTMLに対応していること 現在のところIEでしか動作確認とれてません　IE、Opera、Safari、FireFoxで動作したみたいです（FireFoxだと一部不具合が報告されています）

現在の配布物は？

ここに置いておくので取っていってください。組み込み方は、以下を参考に。　

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

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

でも画像作るの大変でしょ？

SVGからスプライトをばらばらに切り出して保存するプログラムを作りました。

■SVGOroshi(ver0.93)

2005/06/06 枠無しで保存しようとすると落ちるバグを修正。 2005/05/13 とりあえず作成。 2005/05/16 ドラッグ＆ドロップに対応。 2005/05/25 「SVGすりおろし器」に改名。 2005/05/25 48x48でも保存できるようにした。SVGのエラーを見つけるためのトレースウィンドウ実装。 2005/05/25 枠をつけることを可能にした。 　　　　　　　　枠のファイルはアルファ付き32bppのPNG、或いはそれ以外の形式のPNGです。 　　　　　　　　アルファ付き以外の場合は、RGB(0,255,0）が透明色となります。 2006/05/20 アーカイブに必要なDLLが含まれてないことに気づきましたorz