JavaScript で作られている、ページの使いやすさの向上を 目的とした機能を持つスクリプトです。 あらゆるページに適用できるように設計しており、HTML/4.01 (text/html) では勿論の事、XHTML/1.1 (application/xhtml+xml) でも動作します。 また、Mozilla Firefox/1.5.x での厳格な構文チェックを通しています。
以前は Preferred Style Generator という名前で配布していました。
簡単な設定を行うだけで、次のような機能を使う事ができます。
スタイルシートを簡単に切り替えられる機能をユーザーに提供します。 クッキーを使ってスタイルシートの設定をブラウザに記憶させ、 ページを移動しても表示スタイルを維持します。 XHTML に書かれた xml-stylesheet 処理命令でも ブラウザが認識できていれば切り替えられます。
以前、この機能だけしかないものも用意していましたが、 保守性が落ちた為やめました。 ファイルサイズに関しても、ブラウザのキャッシュが働く為、問題にならないでしょう。
Presto エンジンを使用するブラウザ (主に Opera 7.00 以降) では、XHTML での使用において注意が必要です。
HTML 4.01 Strict や XHTML 1.1 に準拠したままで、ユーザーがサイト外へのリンクを 新しいウィンドウで開けるように設定します。 クッキーで設定を記憶させ、ページを移動しても状態を維持します。 デフォルトで有効にするかどうかの設定も行えます。
誤った操作でフォーム情報を送信したりリセットしてしまう事を防ぎます。特定の form 要素の class 属性に WO-noConfirm という名前を付加する事で、例外的に確認を取らないフォームを設定する事もできます。
WinIE でも abbr 要素の title 属性を ツールチップで表示させるなど、正常な認識ができるようにします。 acronym 要素に置換するわけではありません。要素名はそのままです。
blockquote 要素に cite 属性がある場合、それを元にしてリンクを自動生成します。
この時生成される div 要素には blockquotesource というクラス名が付けられます。従って、必要ならば CSS で表示を制御する為に活用することができます。
全ての機能が独立しているので、全ての機能を使う事はもちろん、 ページ内自己リンクの排除機能だけを使ったりする事も出来ます。
次のような手順で、簡単に設置する事が出来ます。
<head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>ページタイトル</title> <link rel="stylesheet" title="Simple" href="style/simple.css" type="text/css"> <link rel="alternate stylesheet" title="Flat" href="style/flat.css" type="text/css"> <script type="text/javascript" src="webopt.js" charset="UTF-8"></script> </head>
上記のサンプルの charset ( EUC-JP と UTF-8 ) はそれぞれ適切に読み替えて下さい。
スクリプトの先頭の方に設定項目がありますので、動作を確認できたら 設定をいじって、好きなようにカスタマイズしてください。 細かい情報は詳しい説明を参照してください。
最新版におけるテスト動作状況です。想定動作ブラウザは Firefox/1.0 以上, WinIE/6.0 以上, Opera/7.53 以上です。まともなブラウザなら動くようにしていますが、これら以外は正常に動作しようがしまいが仕様です。
ここで、"完全動作"は全て正常動作する事を、"良好動作"は application/xhtml+xml で送信された XHTML において xml-stylesheet 処理命令を正しく処理できない事以外は正常動作する事を、それぞれ意味します。
右クリックやマウス長押しのメニューで保存してください。コピペすると文字コードが変わってしまう場合があります。
以下は古い名前で配布していたもので、obsolete です。特別な事情がある場合にのみ使用してください。
スタイルシート切り替え機能を使った時に表示される部分の構造は下記と同じです。
li/dd (id="WOSSS_PARENT") (UL/OL/DL のいずれかに追加しようとした場合にのみ補充)
|
+--div (id="WOSSS")
|
+--label（もし設定でテキストが空ならこの要素はなくなります）
|
+--select (id="WOSSSBOX")
|
+--option (class="enable"(有効時) / "disable"(無効時))
+--option (同上)
+--option...
div 要素の ID(WOSSS) を使ってスタイルシートで この部分の表示位置や中に含まれる個々の要素への細かいデザイン指定が行えます。
また、リンク先ウィンドウ切り替え機能を使った時に表示される部分の構造は下記と同じです。
li/dd (id="WOSWITCH_PARENT") (UL/OL/DL のいずれかに追加しようとした場合にのみ補充)
|
+--div (id="WOSWITCH", class="enable"(有効時) / "disable"(無効時))
|
+--label
|
+--checkbox (id="WOSWITCHBOX")
div 要素の ID(WOSWITCH) を使ってスタイルシートで この部分の表示位置や中に含まれる個々の要素への細かいデザイン指定が行えます。
設定ごとの出力サンプルも参照してください。
現在、確認されている問題です。
このスクリプトの作成にあたり、次のサイトのスクリプトを参考にさせていただきました。 この場を借りて感謝いたします。
この JavaScript は修正 BSD ライセンスで配布します。
多くのウェブサイトでは、このような補助機能はないので、ユーザさんはこの機能を探そうとしません。よく目立つ所にフォームを配置しましょう。
現在 ToDo は何もありません。
下記にバナーを置いておきます。必要に応じてお使いください。直リンクは非推奨です。
