「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>その他、開発の色々]] * 目次 [#c1064ebb] #contents *バージョン間の問題 [#wc4d32b4] 問題事例は殆どが、バージョン間の動作の違いに起因します。 -バージョン間の動作の違い、 -それに起因する問題 については、「[[IEバージョンアップ情報]]」を参照下さい。 *HTMLの確認 [#gc7effba] 使ってみよう! [F12] IE9 開発者ツール~ - HTMLとJavaScript のデバッグ編 - monoe's blog - Site Home - MSDN Blogs~ http://blogs.msdn.com/b/osamum/archive/2011/08/04/f12-ie9-html-javascript.aspx こちらで、 -HTML のデバッグ -JavaScript のデバッグ が可能です HTMLを確認するには、[F12]で[F12 開発者ツール]を起動し、~ メニューの[表示] → [ソース] → [元の形式]でHTMLが確認できます。 *HTTPデバッグ [#o9b0e736] ブラウザでの動作を分析する際には、HTTPデバッグが必須になるので、~ 以下を参考にして、HTTPのログを取得分析ください(キャッシュ関連の動作など)。 -[[HTTPデバッグ・プロキシ Fiddler>電文を確認する方法(パケット・キャプチャ)#w11d3ad2]] **キャッシュ(戻る) [#ped407e5] ***キャッシュの動作 [#rfaac65e] キャッシュの動作は以下に示すように複雑ですので、~ 必要に応じて都度HTTPデバッグ・プロキシを使用して~ HTTPデバッグするのが良いかと思います。~ -浏览器静态资源的版本控制新思路.~ 强制更新指定资源缓存.的探讨 - Franky - 博客园~ http://www.cnblogs.com/_franky/archive/2012/07/05/2577141.html~ >↓Google翻訳で翻訳 -静的リソースブラウザのバージョンについて~ の議論は、新しいアイデアを制御します。~ 指定されたリソースのキャッシュを強制的に更新する。~ http://translate.google.co.jp/translate?sl=zh-CN&tl=ja&js=n&prev=_t&hl=ja&ie=UTF-8&eotf=1&u=http%3A%2F%2Fwww.cnblogs.com%2F_franky%2Farchive%2F2012%2F07%2F05%2F2577141.html~ また、システムがキャッシュの動作に翻弄されてしまう場合は、~ システム的にはサーバサイドでなんとかすると良いかと思います。~ -クロス・ブラウザで、各ブラウザの使用をを理解して・・・ -パッチなどで動作が変わり得るクライアント・ブラウザの仕様に合わせて・・・ プログラムを作成するという発想が間違いかと思います。 ***戻る操作 [#a5059d5c] 設計思想の異なる、2つのインターネット・バンキングを参考にすると良いかと思います。 -三菱東京UFJ銀行~ 二重送信やバックサブミットを不正操作に倒す方式で、~ (開発者・技術者にとっては)解り易いのですが、 -みずほ銀行~ ブラウザの「戻る」ボタンで発生するリクエストも~ (恐らくフラグなどを使用して)理解して処理しているようです。~ #なので、ブラウザの「戻る」ボタンで、業務トップに戻るなどの動作をします。 後者の方がユーザフレンドリですが、当然ですがメリット・デメリットがあります。 *デザイン [#nedb9cf5] **DPIと単位 [#w2eaaa34] 長さ(length)の単位 - Web標準普及プロジェクト~ http://www.mozilla.gr.jp/standards/webtips0027.html~ >このように絶対単位はディスプレイで表示する場合、読み手が適切な設定を行っていないと~ 正しい物理長は計算できないため、絶対単位という名前から受けるイメージとは違い、~ 実際の表示は環境に大きく依存してしまいます。 ***DPI [#cfdefa15] 環境:ディスプレイの設定。 -dpi - Wikipedia~ http://ja.wikipedia.org/wiki/Dpi >dots per inchの略で、ドット密度の単位である。~ 1インチ(1平方インチではない)の幅の中にどれだけのドットを表現できるかを表す。~ なお、dpiで表したドット密度の数値を、単にdpiと呼ぶことがある。 設定方法については下記参照のこと。 -画面上のテキストを大きくまたは小さくする~ http://windows.microsoft.com/ja-JP/windows-vista/Make-the-text-on-your-screen-larger-or-smaller ++[コントロール パネル]をクリック ++[デスクトップのカスタマイズ]をクリック ++[個人設定]をクリック ++左側のウィンドウで、[フォント サイズ (DPI) の調整] Windows8では、解像度の高い環境では、~ 自動的に『すべての項目のサイズを変更する』の設定が~ 『中(125%)』などに変更されることがあるようです。~ これにより、下記にもある、 [[スクロールバーの幅>#hecd628b]] が変更され、問題となることがあります。 ***単位 [#j2cb72ca] WEB作成の豆知識 -単位について-~ http://www.web-mame.net/css_course/css_size.html -px :画面の1ピクセルの長さを表す単位 -em :文字の高さを 1em とした単位 -ex :小文字の「x」の高さを 1ex とした単位 -in :インチ -pt :ポイント(1/72 インチ) -pc :パイカ(12 ポイント) -cm :センチメートル -mm :ミリメートル -% :相対的なサイズ指定 **表示拡大率 [#g6f964c2] ***デフォルトの設定 [#x8225d99] -前回ブラウザ終了時の拡大率を使用し、表示します。 -ただし、以下の場合は指定の拡大率を使用します。 --明示的にページ側で拡大率を設定した場合 --ThirdPartyのadd-onにより各サイトの拡大率を設定した場合 ***拡大率の設定方法 [#v7281701] [インターネットオプション] - [詳細設定タブ]~ - [ユーザ補助] - [新しいウィンドウとタブの拡大レベルをリセット]~ をオンにするとすべてのページで100%で表示されるようになる。 ページから制御する方法としては、~ あまりお勧めできませんが、以下のような方法があります。 -zoom属性を利用した方法~ --IEのみの独自仕様であり、バージョンによっても挙動が異なる~ との報告がありますので、安易に利用することは推奨しません。 --Webページに拡大/縮小機能をつける(IE専用)~ http://www.h-fj.com/blog/archives/2005/04/21-115524.php -screen.deviceDPIによる方法 --ブラウザの表示倍率は変更せず、~ 表示内容の倍率を内部的に再計算する方法(IEのみ)。 --乱雑モックアップ|ブラウザの表示倍率を無理やり100%~ http://sakurachiro.com/_exercise/html_css/zoom1/index.html ***自動調整 [#m820aeb4] 拡大率はディスプレイの設定にも依存する。 >[コントロールパネル] - [ディスプレイ] - [画面上の文字を読みやすくします] 最近の解像度の高いディスプレイだと、文字が小さく読みずらいため、~ 見た目上の文字のサイズを大きくする設定となっている。 **スクロールバーの幅、ボーダ幅 [#y9dc8a0b] ブラウザによってスクロールバーの幅、ボーダ幅が異なる。~ ブラウザの表示領域幅 その2 - hedgehog’s blog~ http://d.hatena.ne.jp/iDrop/20070608/1181273594 >IEはWindows OSのテーマが「Windows XP」の場合と、「Windows Classic」の場合とで、スクロールバーのデザインが大きく異なり、それはスクロールバー幅やボーダー幅にも影響を及ぼしています。FirefoxとOperaについては、テーマの違いによるスクロールバーのデザインの変化は一見ありませんが、やはり各値に微妙な差異が生じています。 **横スクロールバー表示問題 [#l744bbf4] -ページの横幅が足りているのに横スクロールバーがでてしまいます。- Yahoo!知恵袋~ http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120799241 -スタイルシートを使ってブラウザの縦・横・両方の~ スクロールバーを消す(隠す)方法 - キーワードノート~ http://kw-note.com/website/hide-scroll-css/ --overflow:hidden --overflow:auto; で対応可能。 ただし、overflow-x、overflow-yはIEのみの独自拡張なので、~ IE以外のブラウザでは横スクロールバーが出てしまう。 以下のようなケースもあるようですので、基本的には、~ クロスブラウザでもサイズが足りるように余裕を持たすのが良いようです。 -ブラウザ幅を超えた部分を隠す手法としてbody { overflow-x:hidden; } は~ あまり使わない方がいい気がする件 - JeffreyFrancesco.org~ http://jeffreyfrancesco.org/weblog/2011050801 >例えば Mac のマルチタッチトラックパッドで2本指スクロールが有効な場合、うっかり斜め方向にスワイプしてしまったがために、スクロールした瞬間にコンテンツが消滅したように見えてしまう(実際にははみ出た部分が見えてしまうのですが、スクロールバーが無いのでずれたのかどうかよく分からない)という現象が Safari では時たま発生してしまいます(発生しない事もあるのでこれがまたよく分からない)その他の Firefox や Opera ではそこまで酷い事にはなりませんが、どちらにせよ斜め方向にスワイプしてしまった場合には横側方向にもズレてしまう事に変わりありませんです。 -IEでoverflowhiddenが効かない - GEKKO CREATORS~ http://gekko-inc.co.jp/gekko_creators/2011/10/css-tips1.php >IEは子要素に【position:relative;】を指定している場合、親要素の【overflow:hidden;】が効かなくようで、親ボックスにも【position:relative】いれるとIEでも正常に表示されるようです。 -???のブログ 消えない縦スクロール - livedoor Blog(ブログ)~ http://blog.livedoor.jp/papi1963/archives/442568.html >しかしこれをやると縦スクロールバーは”必ず”出なくなるが、そのために横スクロールバーが必要な状況になっても横スクロールバーもでなくなる。つまり、右端は明らかにちょんぎれた状態だが、スクロールバーがでないためスクロールさせてみることができない。そこで、overflow-y:autoとするとスクロールバーが不要のときは表示しないが、横方向がきつくなると、スクロールバーを表示しようとするが、「なぜか」縦スクロールバーを表示し、横スクロールバーも「なぜか」ウィンドウの下端ではなく1つ上がった中途半端な位置にでてくる。ちなみにoverflow-yなしのデフォルトでは常に縦スクロールバーがあり、横スクロールバーは必要な状況となるとウィンドウ下端のまっとうな位置にでてくる。 **ブラウザで表示されるフォント [#j388d6cc] ブラウザで表示されるフォントが異なるケースの対応について。 >CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係~ http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html -CSSなどで「正しく」「フォント名」を指定する。 --「書体の総称」ではブラウザ毎に解釈が変わる事がある。 --フォント名でも適切に指定しないと、環境によっては正しく解釈されない。 -環境依存もあるので注意する。 --第一候補のフォントが環境にインストールされていない場合 --同じフォント名でも、書体が違うケースがある。 ---Vistaの新MSフォントのうちの168文字は、改正後JIS X0213に基づいたデザインとなった。 ---WindowsXPに標準搭載されているMS明朝・MSゴシックのバージョンは2.3(V2.3) ---Vistaに標準搭載されるMS明朝・MSゴシックのバージョンは5.0(V5.0) **[[IE n 互換モード>IEバージョンアップ情報#t543fb26]] [#rad52554] [[こちら>IEバージョンアップ情報#t543fb26]]を参照。 *IEイベント [#h259c0b4] **F1抑止 [#r47e0d2e] onhelpイベントで抑止します。 <!-- onhelpイベントを無効にする。--> <script language="javascript" for="document" event="onhelp"> event.returnValue = false; </script> 秘文AE WebGuardのIEアドオンが有効の場合は、~ 上記イベント抑止が機能しないことがあるようです。 **「×」ボタン抑止 [#d8820e9e] 今の所、出来ないという結論~ ***技術的問題 [#f9592c1f] IEのクローズ処理をハンドリングする - 開発思考実験日記~ http://d.hatena.ne.jp/dotnetmemo/20070125/1169742909 -JavaScript(onbeforeunload)を使用した方法は抜けが多いため推奨はしない。 --更新ボタンを押してもCloseだと判断してしまう問題がある。 --event.clientXを使用して「x」ボタンを識別する方法もあるが、 ---ワイドディスプレイなどで、動作が変わる事がある。 ---JavaScriptのEvent.clientXプロパティの値が子画面の有無で変わる~ http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=46012&forum=7 ---event.clientXをもっと厳密に調べるアイデア(あまり推奨できる方法が無い)~ ● 「File->close」や「Alt-F4」には対応できないようだ。~ ● 「x」ボタンの付近でF5押しても誤った認識をしてしまう。 --色々なイベントで入ってきて、且つ区別ができない。 ---IEでのonBeforeUnload の挙動 Inside ASCADE~ http://inside.ascade.co.jp/node/58 ---beforeunload onbeforeunload event (Internet Explorer)~ http://msdn.microsoft.com/en-us/library/ie/ms536907.aspx -Win32、ActiveX系 --IWebBrowser2(ie_OnQuit)も --UI Automationも ---UI Automation のススメ~ '- JAPAN Platform SDK(Windows SDK) Support Team Blog - MSDN Blogs~ http://blogs.msdn.com/b/japan_platform_sdkwindows_sdk_support_team_blog/archive/2011/05/26/ui-automation.aspx --SetWindowsHookExも ---別のプロセスにコードを割り込ませる3つの方法 - インターネットコム~ http://japan.internet.com/developer/20050830/26.html ---Peeking into Password Edit '& Internet Explorer - Super Password Spy++~ http://www.codeguru.com/ieprogram/SPwdSpy.html >>イベント自体を止めることはできないので、~ フラグとJavaScriptと組み合わせるなどしないといけない。 --Win32、ActiveXの処理でActiveXをロードして処理する場合、~ ActiveXが何時ロード、アンロードされるかなどもポイントとなる。 --IE8からタブ毎のプロセスになっており、~ 高度なフィージビリティスタディが必要になる。 ***要件的問題 [#oe14c0b7] 要件自体に問題があるとも考えられる。 -そもそもWebのコンテンツがホストのブラウザを制御する~ と言う発想にリテラシ(セキュリティ)的な問題がある。 -従って、いざお金を出すと言う所で「要件がオカシイ」と気が付くため、~ IEのクローズ処理を制御する旧製品なども販売不振であった。 -また、その操作性(IEの×系抑止)が、基本的に実現できるものと、~ お客に思われてしまうのもあまり良くないのではないか?と思います。~ 例えば、onbeforeunloadで実現したものが全社的に適用された後、~ 抜けを直して欲しいなどの要求が増えてくると難しくなってきます。 ***ログオフ、Sessionクリア [#d7c39cf1] -JavaScript(onbeforeunload)中でSubmitするように実装しますが、上記と同様に困難。 -なお、onunloadではunload後になるので、サブミットされません(以下、HPを参照)。 --Javascript onunload form submit isn't submitting data - Stack Overflow~ http://stackoverflow.com/questions/2651419/javascript-onunload-form-submit-isnt-submitting-data -Sessionタイムアウトを短めに設定し、タイマーで定期的にリクエストを送り~ ユーザが画面を開いている間は、Sessionタイムアウトさせない方式も採れます。 --Open棟梁には、ユーザ操作中のSessionタイムアウトを防ぐため、~ Webサーバへ一定期間毎にPINGを行うHttpPing()メソッドが用意されています。 **画面サイズ拡大・縮小の制御 [#pe5f5f6a] Ctrl + 「+」(画面サイズ拡大)および~ Ctrl + 「-」(画面サイズ縮小)はJavaScriptで抑止できない。 -動作検証を行ってみたところ、~ onkeydown、onkeypressイベントが~ 発生するよりも先に拡大縮小が行われています。 -拡大縮小を抑止はできないようですが、WB.ExecWB(ActiveXコントロール)~ にて拡大縮小後に元に戻すことが可能であるかもしれません。 --[IE8]Ctrl+プラスの画面拡大を無効にしたい - マイクロソフト コミュニティ~ http://answers.microsoft.com/ja-jp/ie/forum/ie8-windows_7/ie8ctrl%E3%83%97%E3%83%A9%E3%82%B9%E3%81%AE/8e79b0af-228c-4152-aaaf-36fc0f57fbb1?msgId=d2581a32-d82d-416a-8312-60cc418c34a1 **Select Boxの切替前確認 [#af1d5a1b] ***実装方法 [#a53fdb55] 以下で実現可能の様です。 >JavaScript SELECT BOX の OnChange をキャンセルする - MyMemoWiki~ http://typea.info/tips/wiki.cgi?page=JavaScript+SELECT+BOX+%A4%CE+OnChange+%A4%F2%A5%AD%A5%E3%A5%F3%A5%BB%A5%EB%A4%B9%A4%EB -onbeforeactivateイベントで設定を記憶しておき、~ onbeforeactivate = "this.previouse_selected_value=this.value;"; -onchangeイベントで切替前確認を表示します。~ onchangeイベントでfalseを返すと、変更をクリアできます。 onchange="if(window.confirm(message)){}else{this.value=this.previouse_selected_value;return false;};" -なお、 --onbeforeactivateイベント --previouse_selected_valueプロパティ >はIE限定のようなので、他のブラウザでは、~ onload+onchangeイベントで変更前の値を記憶する必要があります。 ***ASP.NETのDropDownList [#yf84542e] AutoPostBack="True"設定時、onchangeにdoPostBackが仕掛けられます。~ これにより、onchangeイベントに以下のjavascriptが仕掛けられます。 onchange="javascript:setTimeout( '__doPostBack(\'ctl00$ddlMDropDownList1\',\'\')', 0)" これも、onchangeイベントでfalseを返すと、変更をクリアできます。 **サンプル [#tee74850] 全イベントの抑止サンプルは、Open棟梁付属のJavaScriptに同梱しています。~ https://github.com/OpenTouryoProject/OpenTouryo/blob/develop/root/programs/C%23/Samples/WebApp_sample/WebForms_Sample/WebForms_Sample/Scripts/touryo/ie_key_event.js *モーダルダイアログ全般 [#a1f7cb60] -showModalDialog~ http://msdn.microsoft.com/ja-jp/library/cc428178.aspx -今さらながらJavaScriptのwindow.showModalDialog~ について調べてみた。 - 大人になったら肺呼吸~ http://d.hatena.ne.jp/replication/20100117/1263694945 **モーダルダイアログのサポート状況 [#idc8c437] [[こちら>IEバージョンアップ情報#m2a42571]]を参照。 **モーダルダイアログでポストバック [#u971fe04] モーダルダイアログwindowでポストバックすると、別windowが表示される。 ***対応方法 [#l36a6f29] 下記の方法がある。 -<base>タグに_selfを指定する <head runat="server"> <base target="_self"></base> </head> >ただし、JavaScriptで --子画面側でフォーカス移動ができなくなった。 --子画面から親画面側のダイアログを動作できなくなった。 >などの問題が報告されている。 -FRAMESET、FRAMEの踏み台を経由する。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET rows="*" frameborder="0" border="0" framespacing="0"> <FRAME id="frameDialog" name="frameDialog" src="実際の子フォーム.aspx" noresize scrolling="no" frameborder=0> </FRAMESET> </HTML> >ちなみにOpen棟梁のモーダルダイアログ表示機能では、こちらの方法を採用している。~ 但しこの機能には1点問題があり、IE以外ではsrcに指定した画面から~ showModalDialogの引数(vArguments)が取得できず、動作しないことがある。 -window.open()でモーダル化 // 戻り値の子画面オブジェクトを取得 var subwin = window.open(page, null, param); // 子画面の表示状況を確認する関数 function chkSubWin() { if(subwin != null && subwin != "") { // 子画面が閉じたか否か var ret = subwin.closed; // 子画面が閉じてない場合は子画面にフォーカス if(ret == false) { subwin.focus(); } } } ***注意 [#ic5e41bc] -[[IE9から、上記方法ではダイアログサイズ指定が反映されなくなった>IEバージョンアップ情報#zb6941d0]]。~ このため、[[互換モード>IEバージョンアップ情報#t543fb26]]を使用してこの問題を凌いでいた。 -しかし、昨今、この[[互換モード>IEバージョンアップ情報#t543fb26]]が問題となるケースが増えてきた。~ このため、[[互換モード>IEバージョンアップ情報#t543fb26]]を使用しないようにする場合、FRAMESETをIFRAME化する必要がある。 -ただし、IFRAME内のコンテンツからshowModalDialogの戻り値が戻らなくなるので、~ cookie等を使用してIFRAME内のコンテンツから戻り値を戻すように処理を変更する必要がある。 ***参考情報 [#l4d16d34] -ASP.netでモーダルダイアログ画面で~ ポストバックした際に別画面が表示されるのをふせぐ~ http://megadeth.txt-nifty.com/blog/2007/12/aspnet_8d2f.html -showModalDialogの子画面で画面遷移 蒼い月~ http://www.aoituki.jp/top/2011/20110912.html -ASP.NET でモーダルダイアログボックス - アジャイルプログラマの日常~ http://d.hatena.ne.jp/fyts/20071107/asp -子画面でのpostbackで他の画面が開いてしまう - Insider.NET - @IT~ http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=20782&forum=7 -showModalDialogの遷移時に新規ウィンドウが開いてしまう問題 - @IT~ http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?forum=28&topic=22195 **親ウィンドウが触れてしまう。 [#u6942169] WWWブラウザのダイアログ(showModalDialog)は、OSレベルのダイアログではないので、~ 稀にブラウザのバグに起因し、親画面が触れる現象の報告がある(バグ情報が見つかり次第報告)。 -e.g.~ Spy++を使用して確認可能。 --メモ帳のバージョン情報 ---クラス名:#32770 (ダイアログ) ---クラス スタイル:CS_DBLCLKS --IEのダイアログ(showModalDialog) ---クラス名:Internet Explorer_TridentDlgFrame ---クラス スタイル:CS_DBLCLKS *描画の問題 [#nea3ff1f] **settimeout化 [#ve892bf5] javascript - IE9 Alert() now blocks range.select from displaying selected text - Stack Overflow~ http://stackoverflow.com/questions/13021294/ie9-alert-now-blocks-range-select-from-displaying-selected-text IEのバージョンが変更され、 -描画タイミング -JavaScriptの実行タイミング が変わって、問題となるケースがあるようです。 対応方法としては、settimeout化が挙げられますが、 -IE6側の動作を変えてしまう。 -IE9側も厳密には意図する動作に合わせられない。 ため、機械的にsettimeout化すれば良いという訳ではない様です。 *ActiveX [#t219f9f8] **[[Win7、IE9、VBCOMの問題>IEバージョンアップ情報#dfb0a105]] [#o94c5848] [[こちら>IEバージョンアップ情報#dfb0a105]]を参照。 *ダウンロード全般 [#d1bd5db8] PDF、CSV、Officeなど、詳しくは、~ こちら([[ダウンロードのいろいろ]])を参考にしてください。 *その他 [#s49c7cfa] **[[IE:タブのプロセス分割>IEバージョンアップ情報#b482549e]] [#k4711089] [[こちら>IEバージョンアップ情報#b482549e]]を参照。 **[[IE10で"__doPostBack" 実行エラー>IEバージョンアップ情報#ld442289]] [#z0d6a540] [[こちら>IEバージョンアップ情報#ld442289]]を参照。 ---- Tags: [[:その他、開発の色々]]