Top
Rd
LS
TS

Website Options 配布ページ

Website Options とは？

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 に準拠したままで、ユーザーがサイト外へのリンクを 新しいウィンドウで開けるように設定します。 クッキーで設定を記憶させ、ページを移動しても状態を維持します。 デフォルトで有効にするかどうかの設定も行えます。

ページ内自己リンクの排除
ページ内にある、そのページ自身へのリンクを無効化します。 http://foo/bar/xxx.html で http://foo/bar/xxx.html#fragment を無効化したりする事はありません。 その逆はあります。
全てのフォームでの送信とリセットで確認を取る

誤った操作でフォーム情報を送信したりリセットしてしまう事を防ぎます。特定の form 要素の class 属性に WO-noConfirm という名前を付加する事で、例外的に確認を取らないフォームを設定する事もできます。

WinIE に abbr 要素を正しく認識させる

WinIE でも abbr 要素の title 属性を ツールチップで表示させるなど、正常な認識ができるようにします。 acronym 要素に置換するわけではありません。要素名はそのままです。

引用元へのリンクを自動生成する

blockquote 要素に cite 属性がある場合、それを元にしてリンクを自動生成します。

この時生成される div 要素には blockquotesource というクラス名が付けられます。従って、必要ならば CSS で表示を制御する為に活用することができます。

ステータスバーにページ情報を表示する
[ページのURL] - ページのタイトル という形式でページ情報を表示させます。
フレーム使用時に警告する
ページがフレーム内だった時に警告します。 外部サイトに iframe 要素などで取り込まれる事を予防します。

全ての機能が独立しているので、全ての機能を使う事はもちろん、 ページ内自己リンクの排除機能だけを使ったりする事も出来ます。

使用方法

次のような手順で、簡単に設置する事が出来ます。

  1. スクリプトをダウンロード
  2. 自分のサイトにアップロード
  3. HTML の HEAD 要素の末尾でスクリプトにリンクする。下記は一例です。 
    <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 処理命令を正しく処理できない事以外は正常動作する事を、それぞれ意味します。

Mozilla Firefox
  • 1.5.0.1 : 完全動作
  • 1.0 : 完全動作
  • 0.8 : 完全動作
Microsoft Internet Explorer (Windows)
  • 6.0 SP1 : 良好動作
  • 5.5 SP2 : 良好動作
  • 5.01 SP2 : 何も動作しない
Opera (XHTML 上での動作において問題有り)
  • 8.52 : 良好動作
  • 8.01 : 良好動作
  • 7.53 : 良好動作
  • 7.23 : 良好動作
  • 7.03 : リンク先ウィンドウの制御が出来ない。それ以外は良好動作
  • 6.06 : 何も動作しない
Netscape
  • 7.1 : 完全動作
  • 6.01 : 設定が保存されない。それ以外は良好動作
  • 4.8 : 何も動作しない

ダウンロード

右クリックやマウス長押しのメニューで保存してください。コピペすると文字コードが変わってしまう場合があります。

以下は古い名前で配布していたもので、obsolete です。特別な事情がある場合にのみ使用してください。

スクリプトの出力する HTML

スタイルシート切り替え機能を使った時に表示される部分の構造は下記と同じです。 

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 ライセンスで配布します。

TIPS

多くのウェブサイトでは、このような補助機能はないので、ユーザさんはこの機能を探そうとしません。よく目立つ所にフォームを配置しましょう。

ToDo

現在 ToDo は何もありません。

更新履歴

3.4.1
  • 外部リンクを新しいウィンドウで開く機能を初期状態で有効にするかどうか設定可能にした
3.4.0
  • 全面的に書き直し
  • 引用元リンク生成機能を追加
  • フォームのリセット/送信の制御について、他のスクリプトと競合が起きないようにした
  • コントロール要素の生成順を正確に制御するようにした
  • 同じページに、同じリンク先を持つ複数のリンクがある場合に、外部リンク制御機能が正しく動作しないバグを修正
3.3.5
  • 3.3.4 のスタイル切り替え機能がバグっていたので緊急修正
3.3.4
  • Preferred Style Generator から Website Options に改名
  • 改名に伴なって様々な ID と class 名の指定を変更
  • リンク先の target 指定をイベントハンドラで行うようにした
  • Opera に対するオプション設定を追加
  • 出力 HTML 構造を少々変更
  • コメントを追記
v3.3.3
  • 例外的に確認を取らないフォームを設定できるようにした
v3.3.2
  • 初の安定版
  • ソースコードの（主に宗教的な部分の）メンテナンスをした
v3.3.1
  • 要素の中に追加するか、要素の外に追加するか選択できるようにした
  • abbr 要素 WinIE 対応機能を使った際に、そのクラス名が CSS に反映されない問題を修正
  • dl 要素に追加する時、dd ではなく dt 要素を補完してしまっていたのを修正
  • クッキー処理を微調整
v3.3.0
  • WinIE でも abbr 要素をなんとかする機能を加えた
  • クッキー有効期限をブラウザ終了までに設定すると Firefox/1.0 ではその場でクッキーが削除される不具合を修正
  • クッキー処理の独立性を高めるなど、その他微細な修正を数箇所
v3.2.5+
  • 文字コードを EUC-JP から UTF-8 に変更した
  • WinIE6 でのスクリプトエラー発生を修正 (2005-01-04) [Feedback]
  • xml-stylesheet 処理命令に対応 (2005-01-18)
v3.2.5
  • 外部リンクとみなすドメインを指定できるようにした
  • MacIE5 に対応したかもしれない
  • その他、微細な修正を数箇所
  • WinIE6 でのスクリプトエラー発生を修正 (2005-01-04) [Feedback]
v3.2.4
  • application/xhtml+xml で送信される XHTML に対応
  • CSS 切り替えのラベルの初期設定を Theme に変更
  • document.createRange の存在を確めずに使用していたのを修正
  • クラス名を付加
v3.2.3
  • 優先/代替スタイル一切適用無し状態に名前を付けられるようにした
  • HTML 構造を少し見直した [Feedback]
v3.2.2
  • MacIE 対策 [Feedback]
  • 要素追加時に追加対象先をチェックするようにした [Feedback]
  • v3.2.1 での object 要素を使った取り込みへの対処がおかしかったのを修正
v3.2.1
  • WinIE では object 要素を使った取り込みに警告できない事に対処 [Feedback]
v3.2.0
  • ルート要素の取得方法を修正した [Feedback]
  • 同一の title 属性を持つ複数の link を考慮するようにした [Feedback]
  • フォーム要素の挿入位置を前後で選べるようにした
  • フォーム要素の挿入対象を ID で指定できるようにした
v3.1.5
  • 公開開始