* 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.
Reload   New Lower page making Edit Freeze Diff Upload Copy Rename   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
浮子屋商店もよろしく。

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

Top > 伺か関連ツール > さくらスクリプト解析JavaScript
Table of Contents

何をするもの？

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

どんな感じ？

実際にはこんな感じ。

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

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

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

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

どこで試せる？

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

配布物

  • filesakurareplacer.js 本体 2005.07.19 version 2.10
  • fileconfig.js 設定ファイル - これはサイトの設定に応じて変更してください
  • filetable.css 外観定義用のCSS - いじれば外観が変わります
  • fileSVGOroshi093.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:ghostname:を含め）１行で記述してください。
上記以外のタグそのまま表示されます。

置換条件

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

  • タグのクラスが 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 は２．で決めた名前です）

上記条件に当てはまるタグの書き方としては、例えば以下のようになります。
実際にはなるべく１行で書いてください。改行する場合は\s[]か\h,\uの直後がいいです。
特に、ghostname:の直後で改行すると正しく見えない場合があります。

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

関連するもの

駄でべWiki:fifth moon/PukiWiki用さくらスクリプトプラグイン
同様の動作をする、pukiwiki用のプラグイン
日々是平凡なり
ゴーストの更新履歴部分に使用、掲示板への組み込み
百花繚乱
TOPに使用
ダル系工房
ゴースト「リル」から行ける質問フォーム内で使用
Webゴースト
SakuraScriptを投稿できるCGI
*1 安全のためデフォルトでは機能しないようにしてあります
*2 利用者が識別できればどんな名前でも構いません。SSP等のゴーストのフォルダ名と一致している必要はありません。
Attach file: fileSVGOroshi093.zip 964 download [Information] filetable.css 973 download [Information] fileconfig.js 975 download [Information] filesakurareplacer.js 1053 download [Information]
このページの最終更新日: 2006/07/25 05:49:29 HAST (6707d)
このページのトラックバックURL: https://ukiya.sakura.ne.jp/index.php?tb_id=c4341ebed37a68fc7dcb27c91071d78e