* 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. |
伺か関連ツール/さくらスクリプト解析JavaScript のバックアップの現在との差分(No.1)何をするもの?ウィンドウ内のさくらスクリプトを解析して、SVGによるサーフィス画像とともに表示するJavaScriptです。 どんな感じ?実際にはこんな感じ。 <SPAN class="sakurascript">sakurascript:emily4:\t\u\s[10]\h\s[5]やほー。\w9こんな感じだよー。 \w9\w9\u\s[11]あんまりはしゃがない。\e</SPAN> <SPAN class="sakurascript">sakurascript:ghostname:\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で実装している以上ブラウザを選ぶのは仕方ないですね。掲示板とかへの組み込みの容易さとのバーターです。 JavaScriptがONであること DHTMLに対応していること 現在のところIEでしか動作確認とれてません IE、Opera、Safari、FireFoxで動作したみたいです(FireFoxだと一部不具合が報告されています)
現在の配布物は?ここに置いておくので取っていってください。組み込み方は、以下を参考に。 IE、Opera、Safari、FireFoxで動作したみたいです。 1.画像を置くディレクトリを決める組み込み方1.画像を置くディレクトリを決める画像を置く元となるディレクトリを決めてください。以下の例では、http://unene.jp/svg/ 以下に置くことにします。 2.画像を準備する このページの下にある「SVGOroshi」などのツールを使って、1サーフィス1枚、surfacexxxx.png(xxxxは0000~9999までのサーフィス番号)という名前の画像を作成してください。 また、surfacenone.png という画像を作成してください。これは、\s[-1] を使用した際に表示される画像です。(従って、空白のような画像を作ってください) 画像が準備できたら、http://unene.jp/svg/ghostname/ の位置に全ての画像を置いてください。ghostname はゴースト名になります。 (利用者が識別できればどんな名前でも構いません。SSP等のゴーストのフォルダ名と一致している必要はありません。) 3.javascriptを準備する 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を使いたいページに組み込む2.画像を準備する
3.javascriptを準備する
4.javascriptを使いたいページに組み込む使いたいページのHTMLの中に、以下の変更を加えてください。
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.ページの中でさくらスクリプトを書く
<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 onLoad="SakuraReplace();">
5.ページの中でさくらスクリプトを書くあとは、4.で組み込んだページの中で、以下の条件に当てはまる記載をすれば、その部分がSVG表示に置き換わります。 タグのクラスを sakurascript とする タグの中身の先頭を sakurascript:ghostname: とする(ghostname は2.で決めた名前です) 上記条件に当てはまるタグの書き方としては、例えば以下のようになります。
上記条件に当てはまるタグの書き方としては、例えば以下のようになります。 実際にはなるべく1行で書いてください。改行する場合は\s[]か\h,\uの直後がいいです。 特に、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)
|