タグ入力支援エディタ設置説明書

CGI配布元 : Web Liberty
スクリプト元 : Mugi's Homepage、nicky! / カスタマイズ : Narusawa
WDP用カスタマイズ＆配布 : KURAGEYA

2009.8.7　説明書更新

ダウンロードしていただきありがとうございます。
日記CGI「nicky!」用の「タグ入力支援エディタ」と「ネタバレボタン」を
Web Liberty配布の「Web Diary Professional」へ設置するためのセットです。

この Readme_wl_tag.html は、設置用説明書です。
当サイトにアップしてある最新版にものっていないことで疑問があれば、サポート掲示板などに書き込んでください。
随時追加していきます。

初めに　（重要事項！）

著作権

作成者
- Script written by Mugi - http://mugi.cc/
- 2nd Edition by Raelian - http://painter.mypets.ws/~raelian/tag/enclose.html
- 3rd Customize by Narusawa (2005/08/16) - http://caelum.skr.jp/
- 4th Customize by くらげ - KURAGEYA　←　配布版作成
  作成の際、RightBowerのkiriji様の配布版も参考にさせてもらいました。

配布版について
- 作成者様たちのご好意により、この元スクリプトは他のCGIなどに使用したり配布したりすることが認められています。
  （要：Mugiさんのスクリプト内クレジット表示）
- この配布版に関する質問は、KURAGEYA へお願いします。
  スクリプト作成元、及び CGI配布元は、この配布版へは関与されておりません。
  上記の方々へに関するお問い合わせはなさらないようお願いいたします。

無断再配布・転載は禁止 です。
- 5th Customize後に配布したい場合は、事前または事後に連絡をお願いします。
- 使用素材はすべてくらげが作ったものです。
  要望があればサイトで配布するかも。

免責事項

セットをダウンロード及び使用したことによってトラブルや損害が発生しても、
当サイトはその責任は一切負わないものとします。

カスタマイズ

ソースの書き換えなど、カスタマイズは基本的に自己責任で自由です。
同梱画像の差し替えもOKです。

▲

タグエディタ設置方法

一部のスキンファイルが上書きされます。
はじめに、header.htmlとadmin_form.htmlのバックアップを取っておくと安心です。

同梱内容

Readme_wl_tag.html　　・・・　WDP用タグエディタの説明書

header.html　　・・・　ヘッダー
admin_form.html　　・・・　管理者用投稿画面html

sien フォルダ
　　｜
　　├―　tag.css　　・・・　タグエディタ用スタイルシート
　　├―　tag1.js　　・・・　header.htmlに挿入するタグエディタ用スクリプト
　　├―　tag2.js　　・・・　admin_form.htmlに挿入するタグエディタ用スクリプト
　　｜
　　├―　netabare.css　　・・・　ネタバレボタン用スタイルシート
　　├―　netabare1.js　　・・・　header.htmlに挿入するネタバレボタン用スクリプト
　　├―　netabare2.js　　・・・　admin_form.htmlに挿入するネタバレボタン用スクリプト
　　｜
　　└―　画像ファイル

variation フォルダ　　・・・　差し替え用ファイル　※　差し替えについての詳細

※　文字ボタンタグエディタには画像ファイルは同梱されていません。

デフォルトスキンを使用している場合

header.html 、 admin_form.html 、 sien フォルダを、サーバーの skinフォルダ内にアップロード・上書きします。

別のスキン or 改造して使用している場合

スキン作成者によって記述が追加されている可能性があるので、上書きせず、現在使用しているファイルを書き換えてください。
現在使用している header.html の <head> ～ </head> 内に、以下の記述を追加します。
<link rel="stylesheet" href="${INFO_URL}skin/sien/tag.css" type="text/css" media="all" />
<link rel="stylesheet" href="${INFO_URL}skin/sien/netabare.css" type="text/css" media="all" />
<script type="text/javascript" src="${INFO_URL}skin/sien/tag1.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/sien/netabare1.js"></script>
※　admin_form.htmlまで改造しているスキンの場合
現在使用している admin_form.html の >${FORM_TEXT}</textarea></dd> に
配布版の admin_form.html の以下の記述をコピー＆ペーストします。
id="Message" onfocus="get_pos(Message);" onmouseup="get_pos(Message);" onkeyup="get_pos(Message);">${FORM_TEXT}</textarea></dd>

　～
書き換えたファイルと sien フォルダを、サーバーの skinフォルダ内にアップロード・上書きします。

▲

ファイルの差し替え

黒背景用や画像ボタンなど、いくつかバリエーションがあります。
variation フォルダに同梱しています。
バリエーション
- png画像ボタン
  - デフォルト　　・・・　文字入り画像
  - 2-e フォルダ　　・・・　文字なし画像
- gif画像ボタン
  - デフォルト　　・・・　文字入り画像
  - 2-white-e フォルダ　　・・・　文字なし画像
  - 3-black-moji フォルダ　　・・・　黒背景用文字入り画像、tag.css、netabare.css
  - 4-black-e フォルダ　　・・・　黒背景用文字なし画像、tag.css、netabare.css
- 文字ボタン
  - デフォルト　　・・・　画像なし
  - 2-black フォルダ　　・・・　tag.css、netabare.css
差し替えたい場合は、該当画像で、 sien フォルダ内の画像ファイルに上書きしてください。
黒背景用は、tag.css、netabare.cssも上書きします。

▲

元スクリプトとの違い

WDP用にファイル挿入のタグ入力支援を追加しました。
xhtmlに合わせて徹底的にくらげ好みでカスタマイズしています。
- プログラム自体の記述を修正
- 入力支援で出せる記述もxhtmlに沿っているもののみに変更
  非推奨要素や属性は削除
  意味を考えて記述できるよう、あまり使わないタグも追加
- HTML Validatorでエラーが出ない記事が書けるはず
よく使いそうなclass指定をtag.cssに追加、それを指定するようにしました。
（B、U、Sなどの非推奨要素の代わりに毎回style指定すると、記述が無駄に長くなってしまう）
タグ手打ちになれている方向けになってしまいました。
RightBowerのkiriji様の配布版を参考に追加・修正したところ
- 画像を使ったボタンのバージョンを作ること。
- ネタバレボタンを組み込むこと。

▲

画像ボタンタグエディタ

1行目 - ブロック要素（h4,h5,p,p-c,p-r,ul,ol,dl,table,blockquote,pre,変換）
2行目 - インライン要素（br,em,strong,ins,del,abbr,acronym,code,a,img）、ファイル挿入用タグ
3行目 - いろいろなクラス指定（大きさ、文字色、背景、その他）
4行目 - ネタバレボタン

▲

文字ボタンタグエディタ

1行目 - ブロック要素（h4,h5,p,p-c,p-r,ul,ol,dl,table,blockquote,pre,変換）
2行目 - インライン要素（br,em,strong,ins,del,abbr,acronym,code,a,img）
3行目 - いろいろなクラス指定（大きさ、文字色、背景、その他）
4行目 - ファイル挿入用タグ
5行目 - ネタバレボタン

▲

挿入されるコードについて

■が選択テキストとなります。
特に選択していない場合、カーソル位置にコードが挿入されます。

ブロック要素

h4: <h4>■</h4>
h5: <h5>■</h5>
p: <p>■</p>
p-c: <p class="blockc">■</p>
※　p要素の中央揃えになります（blockc は tag.css で中央揃えを指定）
p-r: <p class="blockr">■</p>
※　p要素の右揃えになります（blockr は tag.css で右揃えを指定）
ul: <ul><li>■</li><li></li><li></li></ul>
ol: <ol><li>■</li><li></li><li></li></ol>
dl: <dl><dt>■</dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>
table: <table><tr><td>■</td><td></td></tr><tr><td></td><td></td></tr></table>
blockquote: <blockquote>■</blockquote>
pre: <pre>■</pre>
変換: 選択テキスト内の< >を<>に変換します

インライン要素

br: ■<br />
em: <em>■</em>
strong: <strong>■</strong>
ins: <ins>■</ins>
del: <del>■</del>
abbr: <abbr title="略語の元">■</abbr>
acronym: <acronym title="頭字語の元">■</acronym>
※　頭字語とは「SOHO(ソーホー)」のようにひとつの単語として発音される語のこと。
※　一文字ずつ素直に読める略語「HTML(エイチティーエムエル)」は abbr を使用する。
code: <code>■</code>
a: <a href="" title="">■</a>
img: ■<img src="" width="" height="" alt="">

ファイル挿入用タグ

標準: $FILE1(■)
中央配置: $FILE1_c()
左配置: $FILE1_l(■)
右配置: $FILE1_r(■)
解除: ■<br class="c" />
パス: ■$FILE1_path
原寸表示: $FILE1_full(■)

$FILE1() の数字は1 ～ 5まで、アップロードしたファイルに合わせて変更する。
$FILE1() の () の中には画像の代替テキストを入れる。

ブロック要素

p: <p class="サイズ+色+背景+文字形式">■</p>
span: <span class="サイズ+色+背景+文字形式">■</span>
class: class="サイズ+色+背景+文字形式"■

サイズ
小(fssmall) / 中(fsmedium) / 大(fslarge) / 特大(fsxlarge) / 最大(fsxxlarge)
色
赤(fc1) / 橙(fc2) / 黄(fc3) / 葉(fc4) / 緑(fc5) / 空(fc6) / 青(fc7) / 紫(fc8) / 隠(fc0)
※　「隠」の文字色はページの背景に合わせて、tag.cssを変更してください
※　通常: #ffffff / 黒背景用: #000000
背景
赤(backc1) / 橙(backc2) / 黄(backc3) / 葉(backc4) / 緑(backc5) / 空(backc6) / 青(backc7) / 紫(backc8) / 灰(backc9)
文字形式
太字(bold) / 斜体(italic) / 下線(tdul) / 打消線(tdlt) / 間隔広(lesp5)

ネタバレボタン機能

リンク: <p class="nbtnb"><a href="#" onclick="sfield_view('x○○');return false;">ネタバレ</a></p><div id="x○○" class="sfield"></div>
長文用リンク(閉): <p class="nbtnb"><a href="#" onclick="sfield_view('x○○');return false;">ネタバレ</a></p><div id="x○○" class="sfield"> <p class="nbtna"><a href="#" onclick="sfield_view('x○○');return false;">閉じる</a></p></div>
ボタン: <p class="nbtnb"><input class="nbtn" type="button" name="nothing" value="ネタバレ" onclick="sfield_view('x○○');return false;" /></p><div id="x○○" class="sfield"></div>
ボタン(閉): <p class="nbtnb"><input class="nbtn" type="button" name="nothing" value="ネタバレ" id="x○○o" onclick="sfield_btn_vcng('x○○','閉じる','ネタバレ');return false;" /></p><div id="x○○" class="sfield"></div>
長文用ボタン(閉): <p class="nbtnb"><input class="nbtn" type="button" name="x○○o" value="ネタバレ" id="x○○o" onclick="sfield_btn_vcng('x○○','閉じる','ネタバレ');return false;" /></p><div id="x○○" class="sfield"> <p class="nbtna"><input class="nbtnc" type="button" name="nothing" value="閉じる" onclick="sfield_btn_vcng('x○○','閉じる','ネタバレ');window.open('#x○○o','_self');return false;" /></p></div>

▲

挿入タグを追加

基本形式

挿入するものに " (半角ダブルクオーテーション)が含まれている場合、
" に置き換える必要があります。

挿入位置は、タグの切れ目であればさほど問題ないかと思います。
他のボタンと並べるなら、  の前あたりが適切でしょうか。

文字ボタンで追加

画像ボタンで追加

説明

画像ファイルへのパス: 画像ボタンにする場合のみ必要。
ボタンにするための画像。
デフォルトのフォルダ構成で、sien フォルダに入っている「○○.gif」という画像を使う場合、
${INFO_URL}skin/sien/○○.gifというパスになる。
ボタンの名前: なんでもよい
ボタンテキスト: 文字ボタンにする場合のみ必要。
文字ボタンに表示されるテキスト。短く分かりやすいものがよい。
代替テキスト: 画像ボタンにする場合のみ必要。
ボタンにした画像が表示されないときの代替テキスト
タイトル: マウスを乗せたときにツールチップで表示される。
必要ない人は title="タイトル" ごと削除してもよい。
挿入したい前半: テキストを選択した状態で挿入したとき、選択テキストの前に挿入される部分。
後半: テキストを選択した状態で挿入したとき、選択テキストの後ろに挿入される部分。
imgタグなど挟む必要がないものは、前半と後半のどちらかだけでもよい。

▲

挿入タグ追加例

例１：ハートの画像を挿入するボタン

挿入する画像タグは、 <img src="画像パス" width="横幅" height="高さ" alt="ハート"> とします。

文字ボタンで追加

<input type="button" name="heart" value="ハート" title="ハート画像を挿入" onclick="enclose('','<img src="画像パス" width="横幅" height="高さ" alt="ハート">');return false;" />

画像ボタンで追加

<input type="image" src="${INFO_URL}skin/sien/heart.png" name="heart" alt="ハート" title="ハート画像を挿入" onclick="enclose('','<img src="画像パス" width="横幅" height="高さ" alt="ハート">');return false;" />

例２：文字を太字にするタグを挿入するボタン

挿入する画像タグは、前半に <span class="bold"> 、後半に </span> とします。
boldクラスは、tag.cssですでに指定されています。

文字ボタンで追加

<input type="button" name="spanb" value="span(bold)" title="span(太字)" onclick="enclose('<span class="bold">','</span>');return false;" />

画像ボタンで追加

<input type="image" src="${INFO_URL}skin/sien/spanbold.png" name="spanb" alt="span(太字)" title="span(太字)" onclick="enclose('<span class="bold">','</span>');return false;" />

▲

ネタバレ機能を削除

ネタバレ機能を使わない人は、削除すると少しすっきりします。

admin_form.html の
　～　 と、そのすぐ後にある
<script type="text/javascript" src="${INFO_URL}skin/sien/netabare2.js"></script> を
削除します。
header.html の
<link rel="stylesheet" href="${INFO_URL}skin/sien/netabare.css" type="text/css" media="all" /> と
<script type="text/javascript" src="${INFO_URL}skin/sien/netabare1.js"></script> を
削除します。
sien フォルダの netabare.css、netabare1.js、netabare2.jsを削除します。

▲

ネタバレボタンとネタバレ領域のデザイン

ネタバレ領域の文字色

netabare1.js の1行目に色指定があります。
document.write('<style type="text/css">.sfield {display:none;color:#666666;}</style>');

その他ネタバレデザイン

netabare.css で指定されています。
.sfield　　・・・　ネタバレ領域
.nbtn　　・・・　ネタバレボタン
.nbtnc　　・・・　ネタバレ領域の末尾につく閉じるボタン
.netabare input　　・・・　タグエディタのネタバレボタン挿入ボタン
.nbtnb　　・・・　ネタバレボタン、リンクを囲むp要素
.nbtna　　・・・　ネタバレ領域の末尾につく閉じるボタン、リンクを囲むp要素
ネタバレリンクや閉じるリンクを他のリンクと違うデザインにしたいときは
.nbtnb a { } .nbtna a { } というふうに指定を追加してください。

スクリプトOFFの場合

ネタバレ領域がオープンになっていますが、背景と文字色が同じ#eeeeeeになります。
netabare.css で、ネタバレ領域（sfieldクラス）の背景色を変更した場合は、
文字色の color: #eeeeee; も背景と同じ色に変更してください。

▲

ネタバレリンクを変更

挿入後に変更

ネタバレ入力支援で「リンク」または「長文用リンク(閉)」でタグを挿入した後、
ネタバレ、閉じるの文字を探します。
「続きを読む」や「×閉じる×」などの他の文字列か画像タグに変更ができます。
他の部分を間違って削除しないよう気をつけてください。

挿入されるタグを変更

netabare2.js を開いて、ネタバレ</a> を検索で探すと2箇所見つかります。
ネタバレの部分を書き換えます。
- 画像に変更する場合
  <img src="./skin/sien/netabare.gif" width="○○" height="○○" alt="ネタバレ" /></a>
  デフォルトのフォルダ構成で、sien フォルダに、netabare.gif という画像を入れた場合、上記のパスになります。
  相対パスでも絶対パスでもどちらでもいいです。
閉じるリンクも変更したいときは、閉じる</a> を検索で探し、同じ要領で変更してください。

▲

他のWeb Liberty製CGIに利用 - Web Gallery Pro、Web Cart Proの場合

header.html の <head> ～ </head> 内に、以下の記述を追加します。
<link rel="stylesheet" href="${INFO_URL}skin/sien/tag.css" type="text/css" media="all" />
<link rel="stylesheet" href="${INFO_URL}skin/sien/netabare.css" type="text/css" media="all" />
<script type="text/javascript" src="${INFO_URL}skin/sien/tag1.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/sien/netabare1.js"></script>
admin_form.html の >${FORM_TEXT}</textarea></dd> に
配布版の admin_form.html の以下の部分をコピー＆ペーストします。
id="Message" onfocus="get_pos(Message);" onmouseup="get_pos(Message);" onkeyup="get_pos(Message);">${FORM_TEXT}</textarea></dd>

　～
～　 は、必要ないため、削除します。
書き換えたファイルと sien フォルダを、サーバーの skinフォルダ内にアップロード・上書きします。

▲

他のWeb Liberty製CGIに利用 - Web Galleryの場合

プレビュー機能とスクリプトがぶつかってしまうので、プレビュー機能を削除する必要があります。
（うまく双方を利用する方法をご存知でしたらどなたか教えてください）

common.js の以下の記述を削除します。
リアルタイムプレビュー

**********************************************************************/

function showPreview(form, screen) {
var text = form.text.value;
if (form.break_checkbox.checked) {
text = '<p>' + text.replace(new RegExp('\n', 'g'), '<br />') + '</p>';
}
screen.innerHTML = text;

return;
}

//リアルタイムプレビュー
if (node_regist_form.text && document.getElementById('preview_text')) {
node_regist_form.text.onkeyup = function() {
if (!editFlag) {
editFlag = true;
}
return showPreview(node_regist_form, document.getElementById('preview_text'));
};
node_regist_form.text.onfocus = function() {
return showPreview(node_regist_form, document.getElementById('preview_text'));
};

node_regist_form.preview.onclick = function() {
if (node_regist_form.preview_checkbox.checked) {
document.getElementById('preview_screen').style.display = 'block';
} else {
document.getElementById('preview_screen').style.display = 'none';
}
return showPreview(node_regist_form, document.getElementById('preview_text'));
};
if (!node_regist_form.preview_checkbox.checked) {
document.getElementById('preview_screen').style.display = 'none';
}
}
admin_form.html の以下の記述を削除します。
<li><input type="checkbox" name="preview" id="preview_checkbox" value="1" /> <label for="preview_checkbox">プレビューを表示する</label></li>

<div id="preview_screen">
<h2>本文プレビュー</h2>
<div id="preview_text"><p>ここにプレビューが表示されます。</p></div>
</div>

admin_header.html と view.html の <head> ～ </head> 内に、以下の記述を追加します。
<link rel="stylesheet" href="./skin/sien/tag.css" type="text/css" media="all" />
<link rel="stylesheet" href="./skin/sien/netabare.css" type="text/css" media="all" />
<script type="text/javascript" src="./skin/sien/tag1.js"></script>
<script type="text/javascript" src="./skin/sien/netabare1.js"></script>

admin_form.html の >${FORM_TEXT}</textarea></dd> に
配布版（文字ボタンタイプ）の admin_form.html の以下の部分をコピー＆ペーストします。
id="Message" onfocus="get_pos(Message);" onmouseup="get_pos(Message);" onkeyup="get_pos(Message);">${FORM_TEXT}</textarea></dd>

　～
その直後に以下の記述を追記します。
<script type="text/javascript" src="./skin/sien/tag2.js"></script>
<script type="text/javascript" src="./skin/sien/netabare2.js"></script>
</dd>
h3タグ用のボタンを追加します。
<input type="button" name="h3" value="h3" title="h3(見出し)" onclick="enclose('<h3>','</h3>\n');return false;" />
<input type="button" name="h4" value="h4" title="h4(見出し)" onclick="enclose('<h4>','</h4>\n');return false;" />
～　 は、必要ないため、削除します。

書き換えたファイルと sien フォルダを、サーバーの skinフォルダ内にアップロード・上書きします。

▲

更新履歴

2008.11.3: タグ入力支援エディタ設置セット配布開始。
（png画像ボタン / gif画像ボタン / 文字ボタンの３種類）
2008.11.16: 微修正（余分なスペースを削除）

▲

タグ入力支援エディタ設置説明書

目次

ここだけは必ず読んでください

配布版について

タグエディタ機能

ネタバレ機能

その他の利用方法

初めに （重要事項！）

著作権

免責事項

カスタマイズ

タグエディタ設置方法

同梱内容

デフォルトスキンを使用している場合

別のスキン or 改造して使用している場合

ファイルの差し替え

元スクリプトとの違い

画像ボタンタグエディタ

文字ボタンタグエディタ

挿入されるコードについて

ブロック要素

インライン要素

ファイル挿入用タグ

ブロック要素

ネタバレボタン機能

挿入タグを追加

基本形式

文字ボタンで追加

画像ボタンで追加

説明

挿入タグ追加例

例１：ハートの画像を挿入するボタン

文字ボタンで追加

画像ボタンで追加

例２：文字を太字にするタグを挿入するボタン

文字ボタンで追加

画像ボタンで追加

ネタバレ機能を削除

ネタバレボタンとネタバレ領域のデザイン

ネタバレ領域の文字色

その他ネタバレデザイン

スクリプトOFFの場合

ネタバレリンクを変更

挿入後に変更

挿入されるタグを変更

他のWeb Liberty製CGIに利用 - Web Gallery Pro、Web Cart Proの場合

他のWeb Liberty製CGIに利用 - Web Galleryの場合

更新履歴

初めに　（重要事項！）