十字架ラビアンローズ

Webサイトに様々なサポート機能を実装出来るスクリプト「Website Options」の使い方を、動作サンプルと併せて詳細に解説します。

  1. トップページ
  2. Webサイト構築
  3. JavaScript
  4. Webサイトに様々なサポート機能を実装出来るスクリプト「Website Options」

Webサイトに様々なサポート機能を実装出来るスクリプト「Website Options」

2014.9.29.Mon. 14:31

「プルダウンから任意のCSSに切り替え」「外部リンクを自動的に新規ウィンドウ及び新規タブで開く」等、様々なサポート機能を実装する事が出来るスクリプトを紹介します。

  • 配布元サイト - http://readalittle.net/
    ※本記事投稿時現在の最新バージョンは3.4.1です。

「Website Options」の導入ステップ

<head></head>内にて、「weboptxxx.js」を外部ファイルとして読み込みます。
(xxx … バージョンの数値)


<script type="text/javascript" src="weboptxxx.js"></script>

本スクリプトでは、以下に挙げる実装可能な機能のうち、任意の採用したい機能のみを選択し実装する事が出来ます。
実装にあたっての設定やマークアップ等のしかたは、機能ごとにそれぞれ異なります。

「Website Options」のオプション設定

プルダウンから任意のCSSに切り替え

項目設定箇所はJSファイル内の103〜140行目になります。
詳細はサイト閲覧者が任意のCSSに自由に切り替えられるようにする方法も併せて参照して下さい。

※近年のブラウザのバージョンアップ展開が早い事もあり、一部の先進ブラウザでは機能しないようです。

enable : boolean, trueにすると、閲覧者が任意のCSSに切り替える事の出来るプルダウンが表示されるようになります。
falseにした場合は、以下の項目は設定しても特に意味を成しません。
affectOpera : boolean, XHTML+Operaという組み合わせでもCSS切り替え機能を使用する場合はtrue、使用しない場合はfalseとします。
上記組み合わせで不具合が生じる為に補助的に設けられた項目であり、XHTMLでマークアップしていない場合はtrue/falseどちらでも構いません。
targetElementID : "xxx", 閲覧者が任意のCSSに切り替える事の出来るプルダウンを、ページ内のどの位置に表示させるのか、その任意のIDを指定します。
空にすると、次のtargetElementNameで指定した内容が適用されるようになります。
targetElementName : "xxx", 閲覧者が任意のCSSに切り替える事の出来るプルダウンを、ページ内のどの位置に表示させるのか、その任意のHTMLタグ名を指定します。
<>は不要です。
targetElementIDでIDを指定している場合には、この項目を設定しても特に意味を成しません。
targetElementIndex : n, targetElementNameで指定したHTMLタグ名について、ページ内に登場するうちの何番目の要素の位置にプルダウンを表示させるのか、その順番の数値(1〜)を指定します。
targetElementIDでIDを指定している場合には、この項目を設定しても特に意味を成しません。
text : "xxx", プルダウンの直前に表示させるラベルの文言を設定します。
全角文字も使用可能です。
isBefore : boolean, targetElementID及びtargetElementNameにて指定した要素の開始タグの箇所に表示させたい場合はtrue、終了タグの箇所に表示させたい場合はfalseとします。
isOut : boolean, targetElementID及びtargetElementNameにて指定した要素の外側に表示させたい場合はtrue、内側に表示させたい場合はfalseとします。
targetElementNameにてbodyと設定している場合は文法上、必ずfalseとして下さい。
expdays : n, 閲覧者が設定した内容を保持する日数を設定します。
0とするとブラウザを終了するまで有効となります。
enableNoStyle : boolean, trueにすると、優先CSS・代替CSSを一切適用させないスタイルが、選択肢に追加されるようになります。
falseにすると追加されません。
noStyleName : "xxx" enableNoStyletrueとした場合の、スタイルのタイトルを設定します。
全角文字も使用可能です。
falseにした場合は、設定しても特に意味を成しません。

enable : trueとすると、以下のようなソースが動的に出力されるようになります。


<div id="WOSSS">
<label for="WOSSSBOX">[text]</label>
<select id="WOSSSBOX">
<option class="enable">優先CSSのタイトル</option>
<option class="disable">代替CSSのタイトル</option>
<option class="disable">[noStyleName]</option>
</select>
</div>
  • targetElementIDにて指定したIDが<ul>もしくは<dl>に振られている場合には、上記ソースの外側に<li id="WOSSS_PARENT">〜</li>もしくは<dd id="WOSSS_PARENT">〜</dd>というソースが補填されます。
  • 閲覧者がプルダウンから任意のCSSに切り替えると、その時適用されているCSSを示す<option>のクラス名が動的にenableになり、それ以外の<option>のクラス名が動的にdisableになります。
外部リンクを自動的に新規ウィンドウ及び新規タブで開く

項目設定箇所はJSファイル内の66〜101行目になります。

enable : boolean, trueにすると、外部サイトへのリンクをクリックした際に、リンク先が自動的に新規ウィンドウ及び新規タブで開くようになります。
<a>target="_blank"が指定されている時と同様の挙動になります。
falseにした場合は、以下の項目は設定しても特に意味を成しません。
applyByDefault : boolean, trueにすると初期状態で機能がON、falseにすると初期状態で機能がOFFになります。
ユーザビリティを考えて、falseにしておくのが賢明でしょう。
internalURL : "xxx", http://から始まるパスを指定する事で、このパスから始まるリンク先は内部コンテンツとして認識され、機能がONであってもリンク先が新規ウィンドウ・新規タブで開かなくなります。
空でも構いません。
複数のサーバーを併用して1つのサイトを構築している場合等にどうぞ。
targetElementID : "xxx", 閲覧者が機能のON/OFFを設定する事が出来るチェックボックスを、ページ内のどの位置に表示させるのか、その任意のIDを指定します。
空にすると、次のtargetElementNameで指定した内容が適用されるようになります。
targetElementName : "xxx", 閲覧者が機能のON/OFFを設定する事が出来るチェックボックスを、ページ内のどの位置に表示させるのか、その任意のHTMLタグ名を指定します。
<>は不要です。
targetElementIDでIDを指定している場合には、この項目を設定しても特に意味を成しません。
targetElementIndex : n, targetElementNameで指定したHTMLタグ名について、ページ内に登場するうちの何番目の要素の位置にチェックボックスを表示させるのか、その順番の数値(1〜)を指定します。
targetElementIDでIDを指定している場合には、この項目を設定しても特に意味を成しません。
text : "xxx", チェックボックスの直後に表示させるラベルの文言を設定します。
全角文字も使用可能です。
isBefore : boolean, targetElementID及びtargetElementNameにて指定した要素の開始タグの箇所に表示させたい場合はtrue、終了タグの箇所に表示させたい場合はfalseとします。
isOut : boolean, targetElementID及びtargetElementNameにて指定した要素の外側に表示させたい場合はtrue、内側に表示させたい場合はfalseとします。
targetElementNameにてbodyと設定している場合は文法上、必ずfalseとして下さい。
expdays : n 閲覧者が設定した内容を保持する日数を設定します。
0とするとブラウザを終了するまで有効となります。

enable : trueとすると、以下のようなソースが動的に出力されるようになります。


<div id="WOSWITCH" class="enable">
<label>
<input type="checkbox" value="on" id="WOSWITCHBOX">
[text]
</label>
</div>
  • targetElementIDにて指定したIDが<ul>もしくは<dl>に振られている場合には、上記ソースの外側に<li id="WOSWITCH_PARENT">〜</li>もしくは<dd id="WOSWITCH_PARENT">〜</dd>というソースが補填されます。
  • <div id="WOSWITCH">に付加されるクラス名は、機能がONの際には動的にenableになり、OFFの際には動的にdisableになります。
今いるページ自身へのリンクの無効化

項目設定箇所はJSファイル内の60〜64行目になります。

enable : boolean, trueにすると、今いるページそのものへのリンクの<a>要素からhref属性が動的に削除され、リンクが無効化されます。
同一ページのページ内ジャンプに関してはこの限りではありません。
activeClassName : "xxx" 上記項目がtrueの際、該当するリンクに自動的に付加される任意のクラス名を設定します。
falseの際には、設定しても特に意味を成しません。
フォームの送信時・リセット時に確認を取る

項目設定箇所はJSファイル内の49〜50行目になります。

enable : boolean trueにすると、フォームでの送信時・リセット時に、「OK ?」というアラートを表示するようになります。
OK ?」の部分の文言は、JSファイル内の169行目にて変更する事も出来ます。
Internet Explorer6に<abbr>要素を認識させる

項目設定箇所はJSファイル内の31〜32行目になります。

useFixAbbr : boolean, trueにすると、IE6でも<abbr>を認識出来、title属性の内容がツールチップで表示されるようになります。
しかしIE7以降では<abbr>を認識出来、またIE6はもはや完全に廃れてきている為、現代となっては特に意味はないでしょう。
引用元のリンクを自動生成する

項目設定箇所はJSファイル内の34〜35行目になります。

useBlockquoteCitation : boolean trueにすると、<blockquote>cite属性から、引用元のリンクが自動的に生成されるようになります。

useBlockquoteCitation : trueとすると、</blockquote>の直前に、以下のようなソースが動的に出力されるようになります。
→ Source」の部分の文言は、JSファイル内の1296行目にて変更する事も出来ます。


<div class="blockquotesource"><a href="cite属性で指定したURL">→ Source</a></div>
ステータスバーにページ情報を表示する

項目設定箇所はJSファイル内の37〜38行目になります。

enable : boolean trueにすると、[URL] - タイトルというフォーマットで、ステータスバーにページ情報が表示されるようになります。
しかしステータスバーの表示がデフォルトでOFFになっているブラウザも少なくなく、またステータスバーにページ制作者からの私的なメッセージが表示されて本来表示される筈の情報が表示されなくなってしまう事を嫌う閲覧者も多い為、この機能についてはfalseとしておいた方が賢明でしょう。
外部サイトからフレーム及びインラインフレーム内に取り込まれた時に警告を表示する

項目設定箇所はJSファイル内の40〜47行目になります。

※近年のブラウザのバージョンアップ展開が早い事もあってか、管理人の確認環境では、いずれのブラウザでも動作しませんでした。

enable : boolean, trueにすると、ページがフレームやインラインフレームの中に取り込まれた際に、警告が表示されるようになります。
これにより、外部サイトから、あたかもそのサイトのコンテンツであるかのように表示されてしまう問題を予防します。
しかし、スクリプト利用者のサイト自体がそもそもフレーム・インラインフレームを採用している場合は、自分のサイト内で警告が表示されるようになってしまいますので、その場合はfalseにする必要があります。
address : "xxx" サイトのルートディレクトリを、http://で始まる形式で指定します。
空でも構いません。
クッキーが有効なドメイン及びパスの指定

項目設定箇所はJSファイル内の52〜58行目になります。
HTMLファイルとJSファイルとを別々のサーバーに置いている等の特殊な事情がない限り、項目は空(デフォルトから設定変更せず)で構いません。

プルダウンやチェックボックスの表示位置

任意のCSSに切り替える事の出来るプルダウンや、機能のON/OFFを設定する事が出来るチェックボックスは、設定内容に応じて以下のような箇所に表示されます。
(例としてtargetElementID : "",targetElementName : "div",targetElementIndex : 4と設定した場合)

isBefore : true,
isOut : true,

<body>
<div>
<div>テストテストテスト</div>
<div>
<!-- here --><div>ダミーダミーダミー</div>
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>
isBefore : true,
isOut : false,

<body>
<div>
<div>テストテストテスト</div>
<div>
<div><!-- here -->ダミーダミーダミー</div>
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>
isBefore : false,
isOut : true,

<body>
<div>
<div>テストテストテスト</div>
<div>
<div>ダミーダミーダミー</div><!-- here -->
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>
isBefore : false,
isOut : false,

<body>
<div>
<div>テストテストテスト</div>
<div>
<div>ダミーダミーダミー<!-- here --></div>
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>

「Website Options」の動作サンプル

動作サンプル

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ