Large Display Size Middle Display Size Small Display Size
概要 キーワード 著者
IntegratedTags JavaScript class

HTML文書を短くするJavaScriptクラス


作成中のページが長くなりすぎるのを避けたいときに、重ねる方向へ(集積して)記述することを可能にするJavaScriptクラスです。(集積=Integrate)

たとえば、ある事柄について説明の文書を作成していて すでに文書が長くなっているときに、新たに初心者のための説明を加える必要が出ると、文書がさらに長くなってしまいます。

そういうときにこのIntegratedTags classを使えば文書の長さを抑えつつ、自由に説明を加えられます。

土地がないなら上方向へ家を増やそうという、高層住宅と同じ考え方です。

利用イメージとしては、このようなページになります。サンプル表示


改訂履歴
2016/3/19
"切り替え表示したい内容のタグ"について「タグの種類はDIVタグ以外でもよい」と書いていたが、実際は、(DIVタグやCODEタグでは問題ないが)Pタグで何も表示されない不具合があった。
コードを手直しして、Pタグでも正常に動作するようにした。

導入方法

面倒だとは思いますが、JavaScriptを挿入して、特殊な機能をページに埋め込む形です。

ただ、可能な限り、ページ作成者の日頃の作業のさまたげにならないような工夫をしてあります。つまり「シームレス」です。その単語の意味

手順1 スクリプト貼り付け

以下の「//--- ここから ---」「//--- ここまで ---」(すべて)を自分のHTMLのscriptタグ内にコピーします。



手順2 内容

切り替え表示したい内容を、DIVタグで囲みながら、BODYタグ内に次々と作成してください。

たとえばこのような感じです。※タグの種類はDIV以外でもよい。

日常作業とたぶん同じではないかと思います。

<div>切り替え表示したい内容1</div>
<div>切り替え表示したい内容2</div>
<div>切り替え表示したい内容3</div>

ブラウザで表示を試してください。

「切り替え表示したい内容1~3」が表示されます。

手順3 ラップ


これをさらに<div>タグで囲みます。idは必須ではありませんがここでは説明のために付けてください。

(idはこのあとで、このHTML要素を関数へ渡すときに使います)

<div id="test">
<div>切り替え表示したい内容1</div>
<div>切り替え表示したい内容2</div>
<div>切り替え表示したい内容3</div>
</div>

手順4 onload

スクリプトのonloadなどで以下を実行するようにします。

it = new IntegratedTags( document.getElementById( "test" ) );
it.integ();

この it はインスタンスです。自分の好きな変数名にできるものです。

ブラウザで表示を試してください。

すると、「切り替え表示したい内容1」だけが表示されます。

手順5 コントロール

外側のDIVの「外」にコントロールを自分で作成します。

使える関数

”次に進む” it.next()
”前に戻る” it.prev()
”特定” it.showAt( 2 )
..0から数えて2番目の要素を表示
”最初” it.top()
”最後” it.last()
”集積” it.integ()
”ばらす” it.rel()

たとえばこのようなかんじです。

<a href="javascript:it.top()">[最初]</a>
 <a href="javascript:it.prev()"><前</a>
 <a href="javascript:it.next()">次></a>
 <a href="javascript:it.last()">[最後]</a>
 <a href="javascript:it.rel()">[ばらす]</a>
 <a href="javascript:it.integ()">[集 積]</a>

<div id="test">
<div>切り替え表示したい内容1</div>
<div>切り替え表示したい内容2</div>
<div>切り替え表示したい内容3</div>
</div>

ブラウザで表示を試してください。

次> リンクをクリックすると「切り替え表示したい内容1」が内容2,内容3へと変わります。

その他のコントロールの動作も確認してください。

すべてのコントロールをこのように書かないといけないわけではありません。

ただ、少なくとも 次へ がないと次のものを表示できないということです。

導入手順は以上です。

その他

都合がいい

WYSWYGエディタで編集できる

ここで試しに、作成したHTMLファイルをWYSWYG(ウィジウィグ:見た通りに使えるという意味)のHTMLエディタで開くと(HTMLエディタはスクリプトを実行しないので)表示がばらけていて、それぞれを編集可能な状態です。

内容を適当に編集して、ブラウザで表示してみると、また集積されていて問題がないと思います。

都合よくシームレスに使えると思います。


特殊構造ではない


ただしDIVなどの構造を壊してしまうと集積できなくなります。

ここで、”神経を使わなくてはいけない” となると、どんなに良い機能でも使えないことになりますが、でも、ここで作るDIVの構造は、日常でよく見かけるシンプルな構造ですから、神経質になる必要はないと思います。


ばらせば印刷できる

あと、印刷時は集積状態だと、中身がすべて印刷されないことになりますが、印刷時に手動で it.rel() を実行してもらって、内容をばらしてから印刷するようにします。たとえばこういうリンクです。

<a href="javascript:it.rel()">印刷のためにばらし表示</a>

その他ルールなど

  • 切り替えるそれぞれの内容は、DIVでなくてもよい。
  • ただし、なんらかのタグでくくる必要がある。(タグなしテキストは不可)
  • 以下のように、タグの種類が混在してもよい。CODE, DIV, IMG を順に表示します。
<div id="test">
<code>切り替え表示したい内容1</code>
<div>切り替え表示したい内容2</div>
<img src="test.png">
</div>

外側に枠を作りたい

以下のようにすれば黒枠がつき その高さも一定になりますが、これだとばらしたときに表示が枠からあふれます。

<div id="test" style="border:solid 1px black; height:2em;">
<div>切り替え表示したい内容1</div>
<div>切り替え表示したい内容2</div>
<div>切り替え表示したい内容3</div>
</div>

対策としては

  • 上記の例で枠はつけるが、heightを指定しない。(ばらすと枠が伸びる形)
  • 外側のDIVにSTYLE設定せず、中身のそれぞれの内容に枠を付ける。(下記)
    (ばらすとそれぞれが枠付きでばらされる形)
<style> .flip {border:solid 1px black; height:2em;}</style>
<div id="test">
<div class="flip">切り替え表示したい内容1</div>
<div class="flip">切り替え表示したい内容2</div>
<div class="flip">切り替え表示したい内容3</div>
</div>

などが考えられます。好みや、ケースバイケースで使い分けるといいでしょう。

ページ制作 homepage6047


ページの上端へ (もくじ開く)