雛形倶楽部情報データベース
 ホームひな形情報データベース検索フォーム ログイン管理者認証
Internet Explorer 10環境でのひな形における注意事項
登録者:TAXI
更新日時:
登録日時:2012/08/20(Mon) 00:00:00
カウント数:
分類)PC一般
OS)Windows
メーラー)Windows
ブラウザ)IE(InternetExplorer)
重要度)★★★
難易度)★★★★
検索キー1)IE 10
検索キー2)Windows 8
検索キー3)
コメント
この情報は書きかけです。今後、文面の加筆・修正・削除が行われる場合があります。

補足:Internet Explorer 11は、useragent文字列の返す値が変わり、MSIEのような文字列判定がうまくいきません。

Windows 8 Pro正規版にて確認作業中(32bit/64bit)
Windows 7 Pro(64bit)及びHome Premium(32bit)にても確認作業中

現状すべてを把握できてはありません。Internet Exokorer 10でも環境(Windows 7かWindows 8かなど)によっては違いが生じるようです。特にフィルター関係においては不具合がいくつか見つかっております。
一例としては透過フィルタ---Alpha---でopacityを100から0にして行くような場合などが挙げられます。

=================================================================================

2013/06/16 追加

IE10においては、BODYエレメントには無効なフィルタが確認されます。
ビジュアルフィルタのAlpha()、DirectXフィルタのprogid:DXImageTransform.Microsoft.Alpha()は効果があります。トランジションフィルタも全て効果があります。
Alpha()フィルタでもFinishopacityなど一部のプロパティが有効になりません。

それ以外のフィルタはBODYでは効果が表れません。特にGradient()フィルタはよく使われると思いますが、BODYには働きません。解決策としては、親要素としてDIVエレメントでBODY直下に配置して、DIVエレメントにフィルタを適用させます。DIVやSPANでは絶対配置かサイズ指定がないとフィルタが働かないことに注意してください。

64bit版Windows 7/8、Internet Explorer 10環境の方へ
インターネットオプションの詳細タブにある「拡張保護モードを有効にする」はチェックしないでください。
これは64bitでIEが動作することになりますので、ひな形が動かなくなるかもしれません。

=================================================================================


以下は「インターネットゾーンのセキュリティ設定や詳細設定をひな形表示に適した設定に既に変更済み」であり、「メールソフトのセキュリティオプションをひな形表示に適した設定に変更済み」であることを前提にしております。これらの設定が済んでいない場合は設定方法を参考に先に変更してください。
【参考ページ】
http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=189

http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=174
こちらはIE8を前提に説明しておりますが、IE9/IE10でもほぼ同様の設定が必要になります。

参考:以下は筆者のIE10におけるインターネットゾーンのセキュリティ設定です。
これが最善という訳ではありません。
特に赤い部分はひな形表示にとって必要と思われる部分です。参考程度にしてください。


上記の中で「外部メディアプレーヤーを使用しないWEBページのビデオやオーディオを再生する」は、HTML5のauidoやvideoタグでの再生には関係ありません。
これを有効にすると、HTML+TIMEのメディア要素(audioやvideoなど)で再生でき、imgタグのdynsrcでメディア再生が可能になります。
いわゆるメディアにリンクされている場合に、IE上で再生する過去のIEとの互換性を保つためのものらしいです。
<img dynsrc="http://www.pp-express.info/wma/jingle_bells_miku.mp3">のように・・・

=============== 追加 ===============

Windows 8においてはSmart Screenフィルター機能がOSレベルで働きます。
コントロールパネルにある「アクションセンター」を開き、[Windows SmartScreen 設定の変更] から設定できるようになっています。


IE10のインターネットオプションにあるセキュリティから各ゾーンにおけるレベルのカスタマイズでも設定できます(IE10使用時のSmart Screenの有効/無効化)。

参考画像

この画面から[OK]をクリックしてしまうとダウンロードや実行ができない。
「詳細情報」をクリックしてからどうするか選択します。


====================================



【1】Internet Explorer(以下IE) 6互換のHTMLひな形をIE10で表示させる。
IE10ではQuirksモードが以前とは変わりました。IE6互換モードはIE5 Quirksモードにしなければ正常に表示できません。
そこで必要なのは<meta http-equiv="X-UA-Compatible" content="IE=6">を<head>直下または</title>直下に入れることです。
これにより閲覧者がIE5 Quirksモードに変更する面倒をかけることなく、自動的にIE5 QuirksモードでHTMLひな形を見ることができます。
IE9ではQuirksモードが従来のIE5/IE6互換モードとして動作します。
IE9ではQuirksモードでHTML5+CSS3が動作しないのに対し、IE10でのQuirksモードはIE10でサポートされている機能が動作してしまいます(HTML5+CSS3+SVGなど)。そのためVMLはSVGに置き換えらているためVMLを表示できませんし、フィルタ関係もHTML5で実装されておる関係上動作しません。
IE10でIE5/IE6互換のレンダリングを行うにはIE5 Quirksモードにする必要があるのです。

重要!!フレームページを使用している場合、モードはフレーム表示用のframeページに左右されます。
上記IE5 Quirksモードで動作させるには、フレームページに記述する必要があります。
フレームページに表示される個々のモードを別々にすることはできません。

現在IE10を考慮したひな形サイトはあまりありません。
そのため上記対策を行っておらず、IE10ではQuirksモードでしか閲覧できない場合が多いのが現状です。
閲覧者がIE10の場合は、そのサイトを互換表示対象にすれば解消します。
そのWebサイトのドメイン・ネームが互換表示対象になります。
コマンドバーやメニューバーを表示させておく必要があります。
※表示されていない場合はhttp://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=204を参照してください。

ページによっては互換表示ボタンがアドレスバーの更新ボタン左に表示されますので、それをクリックしても互換表示設定にそのサイトが登録されます(ツールメニューの互換表示をクリックした場合と同じです)。





同一ドメイン名内で互換表示したい場合とそうでない場合を切り分ける方法はありません。
そういった場合は随時互換表示を切り換えるしかありません。
ページごとの対策が急がれますね。角いう僕もまだ未対策ですが・・・。

QuirksモードではVMLやビジュアルフィルタ/トランジションフィルタは動作しません。
IE5 Quirksモードならば動作します。
※いずれにしてもmstime.dllを導入しない限り、HTML+TIMEはIE9同様に動作しません。
mstime.dllの導入方法は以下を参考に
Internet Explorer 9 Internet Explorer 10で、HTML+TIMEを使用可能にする方法
http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=209

IE9ではQuirksモードでIE5/IE6互換モードになります。
上記<meta http-equiv="X-UA-Compatible" content="IE=6">が入っていても入っていなくてもDOCUTYPEによりQuirksモードになり、フィルタやVMLも表示できます。
IE10のために<meta http-equiv="X-UA-Compatible" content="IE=6">は入れておいた方が良いでしょう。
IE9とIE10のQuirksモードは同じではありません!!
※メールでは、通常IE5 Quirksモードでレンダリングされます(Quirksモードではありません)。【2】の対策を行っていればメール上でもIE10標準モードで表示されます。

ビジュアルフィルタ/トランジションフィルタ/DirectXフィルタをIE10で表示させるには---
「インターネットオプション」-「セキュリティ」タブから各ゾーンでの「レベルのカスタマイズ」ボタンを押し、「レガシーフィルターをレンダリングする」を必ず【有効】に設定してください。



また、ローカル上のHTMLファイルは、インターネットゾーンで動作しませんので、表示がおかしくなる場合があります。ローカルファイルでは、何故かセキュリティが厳しく、ActiveXコントロールの一部がブロックされるため。
ローカル上のHTMLファイルをインターネットゾーンで動作させるには、<!-- saved from url=(0020)http://www.pp-express.jp/ -->を<html>タグの上の行に挿入します。<!docutype 〜〜>行の次の行。
URLは存在しないもので構いません。
※メールのセキュリティオプションでは、「インターネットゾーン(安全性が低くなりますが、機能は向上します)」に変更しているはずですので、メール上では常にインターネットゾーンでの動作になります。

===== TIPS =====

テキストエディタの機能によっては、簡単に上記<!-- saved from url=(0020)http://www.pp-express.jp/ -->や<meta http-equiv="X-UA-Compatible" content="IE=6">を挿入できることがあります。
例えば、サクラエディタにはマクロの記録とマクロの登録機能があり、上記挿入をマクロ化しておけば、ワンクリックで挿入可能になります。

また、IME日本語変換の単語登録で、<!-- saved from url=(0020)http://www.pp-express.jp/ -->を読み:せーぶ で登録、<meta http-equiv="X-UA-Compatible" content="IE=6">を読み:めた で登録しておくと便利です。

================


【2】IE10標準モードで動作するHTML5+CSS3ひな形をメールで使用するには

IE10で新たに採用された技術を使ったメールひな形を作る際、メールのプレビュー画面でIE10標準モードで動作させる必要が出てきます。通常<!docutype html>があれば、IE10はIE10標準モードで動作してくれます。

ところが、メールでは<!docutype html>が書き換えられてしまうので、これだけでは標準モードで動作しません。
<meta http-equiv="X-UA-Compatible" content="IE=10">を<head>直下または</title>直下に挿入します。
※メール上ではこれが無い場合、IE5 Quirksモードで表示されてしまうため、IE10標準モードで表示させる場合に必要ということです。メール上でQuirksモードにする方法はわかっていません。
注意!Internet Explorer9では・・・メール上でIE9標準モードになっていてもaudioエレメントが機能しません。というか音楽が鳴りません。


IE9上では勿論ちゃんと演奏されるのだが・・・。


一方、IE10の場合はメール画面でも演奏されるのだ

微妙にIE9とはサイズや色が違いますね。サイズ指定していないので、デフォルトのサイズが違うということでしょうか?

このHTMLソースは以下のHTMLです。
HTML5audio1.htm

IE8以前ではaudioタグを認識せず、objectタグによるWMPによって演奏されます。


【Coffee Break】
もしドメイン(ここではayanaotakashun.com)を互換表示サイトとして登録している場合、上記HTML5を使用しているページをIE10で見るとどうなるでしょう。
大丈夫、上記ページはそれでもIE10標準モードになります。
<!doctype html>と<meta http-equiv="X-UA-Compatible" content="IE=10; IE=9">が記述されているからです。



もし、動作モードをスクリプトで調べたい場合は以下のようにします(一例)。
<div id="iemode" style="position:absolute; z-index:10000; top:10px; left:10px;width:200px; height:20px; color:red">IEモード</div>
<script>
iemode.innerHTML="ドキュメントモード:IE "+document.documentMode
</script>

概略:document.documentModeはIEのドキュメントモードを読み取るプロパティです。
IE10で返す値は以下の通り。
5・・・IE5 Quirks(IE8/IE9ではQuirksモード・・・IE5 Quirksモードというものが無いため)
7・・・IE7標準
8・・・IE8標準
9・・・IE9標準(IE8では8が返される--IE8標準、IE9では9が返される--IE9標準)
10・・・IE10標準(IE8では8が返される--IE8標準、IE9では9が返される--IE9標準)

【3】Windows 8のMetro IE10はデスクトップIE10と動作が異なります。
例えばbgsoundはMetro IEでは再生されません。
デスクトップIE10を利用するようにしましょう。そもそもMetro IE10にはお気に入り機能がありませんので使い辛いです。ひな形によってはMetro IE10での利点も無いわけではありませんが。

【4】Windows Live メールをインストールし、既定のプログラムで設定をしても「ページをメールで」や「このページを電子メールで送信」機能がグレーアウトされ、機能しない場合があります。
こちらを参照してください。
http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=202

【5】ポップアップひな形はIE8までの方法だけではうまく利用できない可能性があります。
baseタグを削除するスクリプトを使用することで対処できそうです。

一例)
<script>
function stopError(){return true;}
window.onerror=stopError;
bs0 = document.all.tags("BASE");
for(i=0;i<bs0.length;i++){
bs0(i).outerHTML=""
}
</script>
のようにします。

【6】
[Q] Windows 8 においてもWindows Live メール 2009は使用可能?
[A] 使用可能のようです。

http://g.live.com/1rewlive3/ja/wlsetup-all.exe (直リンク)
Windows XP用とありますが、実際にはVistaや7で提供されていたものと同じで、Vista/7/8でも利用可能です。

×http://www.microsoft.com/ja-jp/download/details.aspx?id=3945はVistaやWindows 7/8環境で2011になるので注意してください。

尚、そのまま2009を使用続けるというような場合、Windows Updateなどで2011にならないように自動更新はしないほうが良いです。

Windows Updateで、Windows Live Essentials 2011が、インストールされないようにする方法
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=6408-9300

http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=3408-4217
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?rid=261&PID=0408-6051

※Windows Liveメール2009と2011とではどちらが良いか?
どちらが良いかという選択は難しいです。どちらも一長一短があるからです。

【7】
[Q] Windows メール(Vistaに搭載のもの)はWindows 8でも利用可能にできる?
[A] 強引な方法であるものの、できないわけではありません。
但し、ひな形によっては「挙動が変だな??」という場合が確認されます。

http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=201

【8】
[Q] IE10(IE9も)でもHTML+TIMEを作動させることはできますか?
[A] はい、MSTIME.DLLをインストールすれば、利用できます。
以下を参照してください。
Internet Explorer 9 Internet Explorer 10で、HTML+TIMEを使用可能にする方法

【9】
[Q] DXTMETA2.DLLは利用できる?
[A] はい、インストールすれば利用可能のようです。
※IE9/IE10/IE11どちらも同じです。
IE8では上部に情報バーが出ると思いますが、やはり情報バーをクリックして「すべてのWEBサイトに対して実行」を22回行ってください。

http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=67
を表示させます。
DXTMETA2.DLLをインストールしてから、ページを更新します。


許可されなかったものについては×になっているので、以下のように許可を与える必要があります。


しかし鬱陶しい警告が出ます。

ここで【許可】ボタン右にある下三角マークをクリックし、「すべてのサイトに対して許可」をクリックします。


それでも繰り返し繰り返しこの警告が出てくると思いますが、出てこなくなるまで同じ操作を繰り返します。この警告が出なくなったら(二十二回許可する必要がある)すべてのサイトに対してのこのフィルタアドオンの使用許可は完了しています。
※IE10の場合のみayanaotakashun.comを互換表示設定しておく必要あり。


もし「すべてのサイトに対し許可」ではなく、「許可」ボタンを押してしまった場合は以下のようにして、「すべてのサイトに対し許可」を行います。

「ツール」-「アドオンの管理」を開く。そしてMetaCreations Corporationの項目を見つける。
MetaCreationsフィルタアドオンは22種類ある。



アドオンの以下の一つをクリック選択。詳細情報をクリック。



「詳細情報」画面で【すべてのサイトに対して許可】をクリック。そして閉じる。



これを全22種類に対して行う。

以後警告は出なくなる。


====================================

【10】ひとつのエレメントにGradientフィルタとトランジションフィルタの二つをセットしてトランジションさせてもトランジションしない場合がある。
発生条件ははっきりしない。visibilityがvisible→hiddenへの変化で発生を確認していますが、絶対ではないようです。IE8では発生しません。

一例)
http://ayanaotakashun.com/cgi-bin/database/file/gradientwipe.htm

対策はapply()を二つ記述する。
divimg.filters[0].apply()
divimg.filters[0].apply()
divimg.style.visibility="hidden"
divimg.filters[0].play(5)

対策済みの例)
http://ayanaotakashun.com/cgi-bin/database/file/gradientwipe2.htm

====================================
====================================
====================================
====================================
====================================
====================================


URLhttp://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=200
タグ<A href="http://ayanaotakashun.com/cgi-bin/database/database.cgi?cmd=dp&num=200" target="_blank">Internet Explorer 10環境でのひな形における注意事項</A>
管理パスワード

 - AmigoDatabase