ウェブページの荒ワザ

ターゲットでウェブページが変わった!

I'm sorry, but this web page lacks an English version.
Some day I could write in English.


ウェブページはターゲットを使うことで、静かに、しかし劇的に変化します。
ターゲットの属性の指定はフレームの間で必須のものですが、
ターゲットを複数のウィンドウの間に使うことで、予想外の効果が期待されます。
サブウィンドウの開く場所、位置、サイズが自由に設定できるうえ、
メインウィンドウからサブウィンドウを、
また逆にサブウィンドウからメインウィンドウをコントロールすることが可能です。
写真や文書を、同じサブウィンドウでファイルを入れ替えて表示できますから、
開くウィンドウが劇的に減少します。
ここに稿を新たに、私の実践しているウェブページの荒ワザをご覧にいれます。

ボタンから表示されるウィンドウは、それ以外をクリックすると消滅します。
右上に表示されるサンプルのウィンドウは放っておいて、
サイトを抜けるときに最後のウィンドウを閉じてください。


リモコンを選択する場合はここをクリック

  

     




 
フレームから始めよう

フレームを使うページでは、ファイルの開く場所をターゲットで指定します。説明不要のことでしょうが、同じサンプルを何度か使う都合上、参考までにもう一度確認してみて下さい。サンプルではページを最初に上下に二分割し、上のフレームを frame_ue、下のフレームを frame_shita としています。続いて下のフレーム frame_shita をさらに左右に二分割し、左を frame_hidari と、右を frame_migi と名づけました。


ターゲットのサンプル

右下のフレームに“target="○○”とあるのがリンクです。ソースの○○の部分をtargetの属性と言い、ターゲットの属性を指定してファイルを開くことを、私は勝手に「ターゲットを指定する」と言っています。



ここでは上のフレームを frame_ue、そこに開くファイルを frameUe.html、下のフレームを frame_shita、左下のフレームを frame_hidari、ファイルを frameHidari.html、右下のフレームを frame_migi、ファイルを frameMigi.htmlと名づけました。こうして作ったフレームセットのファイルと右下のファイルのソースは次のとおりです。


上下のフレームセットのファイル  下フレームのフレームセットのファイル  右下のファイルのソース


サンプルのそれぞれのフレームのウィンドウには、フレームの名前と初期のファイル名を赤い字で書き、ファイルの背景色を変えてあります。ターゲット名を右下のフレームに入れてリンクさせてあります。ターゲットは、a href="linkpage.html" target="frame_ue" の赤字部分のようにして指定します。



 
全てにターゲットを指定しよう

リンクを記述する html ファイルの body タグの直後に <base target="sample"> と入れておきます。head セクションには何も入れる必要がありません。sample は取りあえずつけたもので、分かりやすいものを自分でつけることができます。こうすることで、リンクから開くファイルは、全て "sample" というターゲットで開かれることにます。<base target="_blank"> とすると、リンクは全て新しいウィンドウで開かれるのと同じ原理です。

例えばアルバムなど写真のリンクばかりのサイトなら、新しいウィンドウは最初の写真だけで、次は何枚あろうとも同じウィンドウで次々とファイルが入れ替わります。ビジターに一々クローズさせるというウザッタい思いをさせずに済みます。文書が中心なら、ブラウザの「戻る」「進む」のボタンから、閲覧者は自分の意志で戻ってみたりできます。

全てではないが、一部にだけターゲットを指定する場合は、リンクの記述を <a href="○○.html" target="sample"> とします。ターゲットの指定のあるリンクのファイルだけが、そのターゲット(の属性で指定されたウィンドウ)に表示されます。



以上のようにしてファンクションを定義せずにリンクにターゲットを指定した場合は、サイズや位置、オプションは指定できません。しかしリンクから呼び出すファイルにリサイズを設定しておけば、上下・左右のサイズは指定することができます。下のサンプルでは、左端には target="sample" と入れてありますが、その他は普通のハイパーリンクになっていて、<base target="sample"> によって、同じターゲットのウィンドウに開きます。右から左と逆順に開くと、リサイズの様子が実感できます。その他のサンプルと異なったターゲット属性をもっていますから、見た後は閉じてください。<a href="close.html">ここから閉じる</a> というリンクで、タイマーで自ら閉じる設定にした close.html をロードして、外部、ここではメインウィンドウから閉じることができます。


リサイズ設定の例  レンガ蔵 - ターゲット有り  煙突 - ターゲット無し  ここから閉じる


この方法では、サイズの設定しかできません。ユーザーがブラウザにどのような設定をしているかで、開くウィンドウの表示部分が影響されます。写真以外のものは表示しないで、さらにきれいに見せる方法もあります。それはウィンドウの開く位置その他の、表示のオプションも指定することです。



 
オプションを設定しよう

ターゲットで新しく開くウィンドウには、色々なオプションの設定が可能です。個々のリンクごとに設定するには、下のボタンのように<input type="button" value=" 関数とファンクションについて " onClick=window.open("option/function.html","","width=580,height=500,top=40,left=50,resizable")> などという面倒な記述をしなければなりませんし、PageMill のソースモードで折角こう書いたものが、入力モードに戻したとたんに勝手に書き換えられてしまって、適切に機能しなくなります。だからと言ってエディタで保存しても、その結果表示されるウィンドウは、それぞれ別なものになって、閲覧者にウザッタい思いをさせることになりかねません。

このような問題を解決するために、このサイトではボタンからのファイルには、body タグに onBlur=window.close() と記述して、ウィンドウ外をクリックすると閉じるように設定し、閲覧者のストレスを少なくししようと試みています。しかし根本的な解決は、head セクションで関数(ファンクション)を定義して、そこでつけた名前をターゲットの属性に指定するという方法が有効です。



オプションを設定するには、表示させたいものに yes または 1 を入れ、表示しないものには no または 0 を入れます。現実には表示させたいものだけを記入すれば十分ですが、さらに表示させたいものだけを、ただ「,」で区切って並べるだけでも大丈夫です。そのほうが荒っぽくて、荒ワザと呼ぶに相応しいですよね?このサイトの indexc.html のオプションの設定がどうなっているかもご覧下さい。


オプションの設定  indexc.html でのオプションの設定


メインウィンドウに yokomado をターゲットの要素としてウィンドウを指定してさっきのレンガ蔵のリンクを記述する場合は、<a href="pictures/rengagura.jpg" target="yokomado" onClick="yokoWindow()">レンガ蔵の写真</a> とします。

私は画像をシンプルに表示したい、操作性を上げたい、html の記述を単純化したいという願望からこのテクにたどり着きました。2005年1月以降に公開した私のサイトでは、アルバムを中心としてこの手法で操作性を上げたと確信しています。文書ばかりのサイトでも、ここではボタンで開いていますが、普通のリンクから小さなファイルをサブウィンドウで表示することで、分かりやすいサイトになっていると自信を持っています。アルバムの中から『上野の国白井宿場』を、文書中心のものからは『快適ライフの英単語メニュー』をご覧ください。どちらも <base target="sample"> によって、同じターゲットのウィンドウに開きます。ところがそれぞれのサイトのメインウィンドウをこのサイトと同じ名前のウィンドウで開くため、リモコンからはこのウィンドウに表示されます。最初の画面だけで考えて、<a href="close.html">ここから閉じる</a> というリンクから、タイマーで自ら閉じる設定にした close.html をロードすることで、白井宿も英単語メニューも、外部から閉じることができることを確認してください。


上野の国白井宿  快適ライフの英単語メニュー  ここから閉じる  close.html のソース




 
メインウィンドウを最初からターゲットのウィンドウに入れよう

親窓とは言ってもターゲットのサンプルは、yokomado という名前でサブウィンドウとして開いたものです。どこかからリンクしたり検索エンジンから来たりして、あるサイトで最初に開いたページは、普通は何のターゲットも指定されていません。しかし最初に開くファイル index.html などを偽のフレームセットのファイルにし、メインコンテンツをフレームに入れることで、ターゲットを指定することが可能です。その結果、最初に開いたウィンドウからリモコンを呼び出して、そのリモコンから元のウィンドウをコントロールすることも可能になります。

Safari ユーザーは「ポップアップウィンドウを開かない」設定にして、『上野の国白井宿』をクリックして開いてみてください。ターゲットのサンプルから子窓を呼び出したのと同じことができます。『上野の国白井宿』のファイルのソースは次のとおりです。

  index.html のソース  indexc.html のソース  リモコン子窓のソース


ポップアップウィンドウを開かない設定にする理由は、ウザッタい広告にウンザリしていることもありましょうし、ウィンドウが勝手に開くのがストレスになる場合もありましょう。リモコンというサブウィンドウはポップアップウィンドウではありませんが、開くかどうかは閲覧者の自由意思に任されます。




『上野の国白井宿』と同じような設定の複数のアルバムで、それぞれのリモコンからリンクするように設定してあります。このリンクをクリックすると、別のアルバムが開いて、リモコンは閉じます。Safari ユーザーは新しく開いた別のアルバムでもリモコンを使いたければ、改めてリモコンを開けばいいということになります。ところがウィンドウズの IE ユーザーは、ポップアップウィンドウをブロックする限り、リンクすることも写真を開くこともできません。

ポップアップウィンドウがブロックされていない場合は、indexc.html の body タグの設定で、メインウィンドウがロードされると同時に、メインウィンドウがリモコンをロードします。ファンクションで remoPics() を定義して remote.html が指定の位置とサイズで開かれるように設定し、onLoad="remoPics()" で実行されます。現実にどうなるかは、ブロックを解除して『上野の国白井宿』を開いてみて下さい。

Safari については、偽のフレームセットのファイルを使ってのもう一つの方法があります。完全に閲覧者の自由裁量に委ねられるものですが、この方法では、ポップアップウィンドウをブロックしていても、同時に親窓と子窓の2つのファイルを開くことが可能です。

実際にそのようして親子のウィンドウを同時に開くようにした例に、『熱く語ろう日本語』があります。Safari で「ポップアップウィンドウを開かない」設定にして、開いてみて下さい。新しいウィンドウで表示しますから、ソースもご覧下さい。


index.html のソース  indexc.html のソース  リモコン子窓のソース


この『ウェブページの荒ワザ』は、同じような設定ですが、偽のフレームセットには入れてありません。最初に開く index.html にリモコンを使うかフレームか、それともどちらも使わないかの選択肢があります。リモコンを選択すると、まずリモコン子窓が開いて、子窓からメインウィンドウを開く設定になっています。最初の index.html は、リモコン選択と同時に閉じるよう設定してあります。しかしいずれを選んだにせよ、ポップアップウィンドウのブロックを解除しない限り、ウィンドウズユーザーはリモコンはおろかサンプルも開くことができません。



 

親子のウィンドウを連携させよう

親窓(この場合はフレームのサンプル)から子窓を呼び出してみます。やり方はフレームの場合と変わりませんが、それを可能にするためにはファンクションの定義が必要です。先ほど「関数とファンクションについて」のボタンで見たとおり、親窓の head セクションで Komado() を定義して、ターゲットを chiisai と名づけておきます。続いてリンクには、<a href="kodomo1.html" target="chiisai" onClick="Komado()"> と記述しておきます。サンプルの右下のファイルのソースの黒以外の色の部分がその設定です。こうすることで、新しく開くファイルは chiisai というターゲットのウィンドウに開かれたことになり、親窓からコントロールすることが可能になります。IE と Safari は正確に反応しますが、Netscape は、時おり target="_blank" と同じ結果を返すことがあります。


再びターゲットのサンプル  右下のファイルのソース


上のサンプルを親窓と考えて、子窓を順に開いてみてください。ここでは親窓を最初に yokomado というターゲットのウィンドウに開いてありますから、子窓のリンクから親窓のそれぞれのフレームばかりでなく、親窓そのものを別のファイルで入換えることも可能です。

内気な子窓には、bodyタグに onBlur="window.close()" と入れてありますから、陰にまわると勝手に閉じてしまいします。リンクをクリックすると一仕事しただけで閉じてしまいます。とは言え親窓を閉じることもできますから、内気というよりも自爆的ですね?ただしウィンドウズ版の IE では、リンクを押しても何もしないで閉じてしまいますが。

普通の子窓には、ウィンドウをどうこうという特別な設定は何もしてありません。親窓をコントロールすることも、親窓から子窓をコントロールすることも常に可能です。親子関係は対等だということでしょうか。小窓から親窓のそれぞれのフレームのファイルを入れ替えられるばかりか、親窓を別のファイルと入れ変えることも可能です。親窓を閉じるというのは、タイマーで閉じる設定をした close.html というファイルと入れ替えることで可能にしています。

これに対し出しゃばりな子窓の body タグには onBlur="window.focus();" と入れてあり、陰にまわすと前に出てくる設定です。そのため一度親元を離れると、親の言うことを聞きません。親を自在に操ることはできますが、親からは手出しが出来なくなります。フォーカスは IE と Netscape では有効ですが、Safari では親を長押しするとフォーカスが利かなくなります。リモコン子窓からの操作を主眼とするページに利用できるでしょうが、閲覧者のイライラの種にならないように注意する必要があります。私のやっている実例としては『麺打ちは現代の仙術・錬金術』があります。子窓自身を閉じるには普通にクローズしても良いわけですが、ここでは close.html をロードしています。

Netscape では、子窓から親窓を閉じることはできますが、残念なことに同時に両方を閉じることはできません。あるいは複数のターゲットをサポートしていないのかもしれませんが、子窓を入換えながら同時に親窓を入換えることはできますから、私の設定にミスがあるのかもしれないですね?落ち着いた時間の取れるときに対応を考えてみましょう。

以上のような設定はターゲットを指定することではじめて可能になります。言い換えると、ターゲットを指定しないで開いたウィンドウは対象にならないことになります。サイトで最初に開くウィンドウは、普通はターゲットの指定なしに開かれますから、子窓からの遠隔操作の対象になりません。


出しゃばりな子窓のソース  close.html のソース


子窓のソースの <P><center><a href="linkpage.html" target="frame_ue">上のフレーム</A></center></P> は、親窓の上のフレーム frame_ue をターゲットとして linkpage.html をロードするという設定です。フレームセットのファイルの外にありながら、あたかも同じウィンドウにあるかのようなタグです。

フレームの中のウィンドウ以外は、予め head セクションで定義した関数(私は勝手にファンクションと呼んでいます)の名前をターゲットのウィンドウに指定し、クリックでそのファンクションが機能するという設定にしています。小窓の <P><center><a href="linkpage.html" target="yokomado" onClick="yokoWindow()">上と下二つのフレーム</A></center></P> などがそれに当ります。





 
同時に複数のターゲットを指定

リンクでターゲットを指定し、同時にそれとは異なったファンクションを指定することで、指定したターゲットでファイルを入れ替えつつ、新しいウィンドウで別のファイルを開くことができます。ターゲットとして指定するもののほか、それとは別に head セクションでファンクションを定義する際に、予めURLを指定しておいたものを onClick="関数名()" として呼び出すわけです。試みにターゲットのサンプルと子窓を同時に開いてみましょう。

三たびターゲットのサンプル  複数のウィンドウを開くソース


普通にターゲットのサンプルだけを指定のターゲットのウィンドウに開くソースは、<a href="target/index.html" target="yokomado" onClick="yokoWindow()">ターゲットのサンプル</A> です。これに少し加えて、<a href="frame/index.html" target="yokomado" onClick="Komado();yokoWindow();">三たびターゲットのサンプル</A> と、予め head セクションでリモコン子窓のURLも含めて定義しておいた Komado() をも同時に開かせることができます。一つだけのときとは茶色部分が異なるだけです。yokoWindow() を並べておくことで、この方法でファイルを指定どおりのウィンドウに開くことができます。これを入れない場合は、同じターゲットが別のファイルで予め開かれている必要があります。また onClick="yokoWindow();window.close();" とすることで、リンクを記述しているウィンドウを閉じることもできます。

このサイトの上のフレームから「プチアイデア集」へジャンプするときは、リモコン子窓に close.html をロードすることで、リモコン子窓が閉じるように設定しています。上フレームのファイルの head セクションで function remoCon(){window.open("close.html","remoconmado",'width=220,
height=500,top=180,left=0');}
とファンクションを定義し、リンクに <a href="http://www.geocities.jp/erde8873/webpage/" target="_parent" onClick="remoCon();">アイデア集</A> と入れています。

同時に二つのファイルを開くことができることから、同時に複数のファイルを閉じることも可能です。ターゲットのサンプルのリモコン子窓には「親窓と子窓を閉じる」というのを入れてあります。ターゲットのウィンドウに close.html をロードし、リンクを置いてあるリモコンに onClick="window.close();" を設定してあるだけです。close.html を使うことで、ウィンドウの入れ替えに重宝していますが、Netscape では親窓が消えずに残ります。

またリモコン子窓から新しいファイルがリンクで開くときに、リモコン子窓自体も入れ替わるように設定すれば、複数のページで異なったリモコン子窓を使うことができます。試みにこのサイトのリモコンの「VIEW IN english」をクリックしてみてください。リモコンとメインページが同時に入れ替わるでしょう?戻るには「VIEW IN JAPANESE」をクリックします。『英単語メニュー』では、複数のリモコン子窓を入れ替えて使うことで、斬新でユニークなページに仕上がっていると自負しています。でも Netscape で走らせた場合、子窓からのコントロールができません。何故なんでしょう?全てに対応させることって、中々難しいものですね。





このサイトで私の公開するテクは、以上で尽きます。私の公開しているサイトで実際に使っているものばかりです。ご覧になって参考になるようでしたら、お使いください。どなたも自由に利用いただけます。多くのページが使いやすくなることが願いでもありますから。巧くいったよというお知らせをお待ちしています。




ここをクリックするとサブウィンドウが閉じられます



ちょこっと触れましたが、私の環境を記しておきます

製作に使った環境:マック OS X (10.3.9) 最初の版はクラシック環境で作りました
モニターした環境:マック OS X (10.3.9) および Windows XP
使用ソフト:PageMill 3.0, GoLive CS, Jedit X 1.11, Transmit 2.6.2
推奨ブラウザ:Internet Explorer v.5 以降, Safari
   (Netscape では上手くいかないことがあります!)
初回公開:2005年3月10日
全面改定:2006年4月4日
サイト制作者:黒猫(欧文では Chatnoir)、69歳、ネット歴 2001年4月から
eMail Address : chatnoir@platz.jp



主な姉妹サイト:

レンガ蔵と煙突のある風景  写真を主にした郷愁的なサイトです
快適ライフの食のメニュー  健康的で快適な食を提案します
快適ライフの英単語メニュー  英語、英単語の新しい学習法を提案します
熱く語ろう日本語  日本語の過去と現在を語り未来へ託します
ホームページのプチアイデア集  ホームページ作りのノウハウを公開します
ももカヌーデビューの巻き  8歳の孫娘ももがカヌーデビューしました
石垣島へ行くのだ!  家族4人の石垣島珍道中記です
芳賀散策  黒猫夫婦が終の住処と下芳賀地区の風物を紹介します
上野の国白井宿  三国街道の宿場町白井宿が静かに力強く息づいています
覚満淵写真集  「小尾瀬」と呼ばれる覚満淵を紹介します
小田代ガ原写真集  貴婦人だけが小田代ガ原の住人ではありません
千手ガ浜とクリン草  中禅寺湖の北岸に咲くクリン草の可憐な写真集です
ONCE IN A BLUE MOON  めったに見かけない、ちょっと不思議な光景を集めました
換気扇改造大作戦  築82年の台所に大型換気扇を取付ける作戦です
ゴミは宝だ  生ゴミや燃えるゴミをエネルギーに再生することを提案します