- Web 2.0 Integration


QrONE TextArea

QrONE TextArea は、<TextArea> タグと置き換え可能な Wiki 文法処理機能を搭載したリッチ Web 部品です。


| HOME | Components | ColorPicker | Pulldown | Spinner | TextArea |

| Wiki 文法 | patch for MovableType |


実際の表示をプレビュー画面で確認できる他、高機能な 「Wiki 文法」 の解析機能を組み込まれているのが最も大きな特徴で、「Wiki 文法使用」 チェックボックスを入れることで Ajax によるサーバーサイド解析で非常に柔軟且つ、安全な HTML 生成を保証します。また「Wiki 文法使用」オフで使えば標準の <TextArea> となんら変わりないので問題なくどこにでも設置していただけます。


ダウンロード

QrONE ColorPicker は QrONE Components の一つです。実行コードのダウンロードはそちらからどうぞ

導入方法

現在の <TextArea> タグと置き換える形で設置します。

<link rel="stylesheet" type="text/css" href="qrx/qrtextarea.css">
<link rel="stylesheet" type="text/css" href="qrx/wiki.css">
<SCRIPT lang="JavaScript" src="qrx/qrxml.js"></SCRIPT>
<SCRIPT lang="JavaScript" src="qrx/qrxpcom.js"></SCRIPT>
<SCRIPT lang="JavaScript" src="qrx/qrctextarea.js"></SCRIPT>

を、<head> ～ </head> 内に記述し

<body onload="QrTextArea.init();">

のように、<body> タグに初期化メソッドを実行する属性を挿入し

<script lang="javascript"><!--
test = new QrTextArea("600px","400px"); // width, height
test.render();
test.readTextArea("target"); // <textarea> id
--></script>
<textarea style="display:none" name="comment" id="target">

</textarea>

を、入力ボックスが必要な位置に挿入してください。タグの後半部分の不可視の <TextArea> の内容を操作するように作られていますので、現在使っている <TextArea> タグに display:none を指定し上に id を指定したスクリプトを直前埋め込めば大丈夫です。

注意

QrONE は、現状 www.qrone.org に多大な負荷をかけるシステムになっています。
このサーバーは個人で運営されているものである為、ある日突然サービスを停止することも十分にあり得、サーバーが停止するとこのソフトは完全に動作しなくなってしまいます。

機能と仕様

タグ解析による”安全”な HTML の生成

タグは全てパーサー側で解析され、サーバー側で許されたタグ属性のみが実際のタグとして展開されます。また不要なタグや、足りないタグを発見し自動的に補なうようになっています。
  • 不要な終了タグ
  • タグの閉じ忘れ
  • JavaScript リンクの禁止（オプション）
この高精度のタグ解析機能により、"<"や ">" といった文字もエスケープの必要がなくなっています。それらの特殊文字は、許可された完全なタグでない限りタグとしては処理されません。

FULL Ajax

Wiki 文法の解決処理は、全て Ajax を利用しサーバーサイドで行われます。通常は www.qrone.org 上のプログラムを遠隔実行して行うので、QrONE TextArea の導入にはたった一つの小さな php プログラムを実行可能にするだけでよく。後は入力ボックスが必要なところに HTML タグを挿入するだけです。複雑な処理をサーバー側で行うので高速且つ、極めて小型の部品として設計することができました。

注意事項 - php スクリプトの動き

QrONE TextArea は、Wiki 文法の解析に www.qrone.org を利用しています。その為、www.qrone.org サーバーがダウンしてしまった場合には Wiki 文法の解決の機能が動作しなくなり、Ajax Error という文字が表示されるようになっています。

Ajax に詳しい人ならすぐに感づいたかと思いますが、通常の方法で www.qrone.org に対して他のドメイン上のファイルからアクセスしようとした場合、警告が出るハズですが QrONE TextArea は出ません。それは、"qrx/qr-redirector.php" に一度アクセスをしてこの小さな PHP スクリプトが更に www.qrone.org へのアクセスをしているからです。

"qrx/qr-redirector.php" は、www.qrone.org への転送以外を受け付けないため通常は安全ですが、このように外部のサーバーに頼った動作をしているということは知っておくといいでしょう。

美しい出力コード

QrONE は出力される HTML の美しさにもこだわっています。タグの要所に改行を挿入し、HTML の見やすさを向上しており、手書き水準の美しい HTML 出力が可能です。

出力コードの最後にはコメントとして、入力文の ZIP+Base64 圧縮コードを追加することが出来るようになっています。これは削除しても表示に当然変化は出ませんが、これによって出力 HTML コードから元の入力文に復帰することが出来るようになっています。

CSS 親和性

QrONE の出力コードはシンプルで美しい HTML です。これは、CSS による再デザイン性の高さを示しています。これを書き換えることで、簡単にデザインを大幅に変える事が可能です。


qrx/wiki.css

にある CSS ファイルが標準で参照しているスタイルシートです。
Copyright © 2006 Qronon. All rights reserved.