0.5.x/test/activex.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/site.css">\r
  11         <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">\r
  12         <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">\r
  13         <!-- InstanceBeginEditable name="doctitle" -->\r
  14         <title>ActiveX | pettanR</title>\r
  15         <!-- InstanceEndEditable -->\r
  16         <!-- InstanceBeginEditable name="head" -->\r
  17         <!-- InstanceEndEditable -->\r
  18 </head>\r
  19 \r
  20 <body>\r
  21     <div id="general-content">\r
  22         <div id="outer-wrapper">\r
  23             \r
  24             <div id="header">\r
  25                 <div class="base-content-width" style="position:relative;">\r
  26                     <h1><a href="../index.html">pettanR</a></h1>\r
  27                 <!-- global navi -->\r
  28                     <div id="global-navi">\r
  29                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
  30                     </div>\r
  31                 </div>\r
  32             </div>\r
  33             \r
  34             <div id="inner-wrapper" class="base-content-width">\r
  35                                 <!-- InstanceBeginEditable name="main_content" -->\r
  36                                 <div id="main">\r
  37                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; ActiveX</div>\r
  38                                         <h2>ActiveX が有効か？ を js から調べる</h2>\r
  39                                         <p>このページは ie8 以下用の テストページです．</p>\r
  40                                         <p>\r
  41                                                 ActiveX が有効か？ 調べるために以下のような script を使用していましたが、<code>new ActiveXObject</code> の辺りで <strong>ie の設定によっては警告が出てしまうためよろしくないみたいです．</strong>(ie7 で遭遇)\r
  42                                         </p>\r
  43                                         <p>ActiveX が使えなくても他の手段でユーザーのサポートは行える（はずな）ので、警告を表示しない方法で ActiveX が有効か？ 取得したいところです．</p>\r
  44                                         <pre><code>\r
  45 &lt;!--[if lt IE 9]&gt;\r
  46  &lt;script type="text/javascript"&gt;\r
  47   (function(){\r
  48    var b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
  49        x = (function(){\r
  50         try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}\r
  51         return 'pettanr-ActiveX-' +( t ? 'enabled' : 'disabled');\r
  52        })();\r
  53    if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;\r
  54   })();                         \r
  55  &lt;/script&gt;\r
  56 &lt;![endif]--&gt;\r
  57                                         </code></pre>\r
  58                                         <p>css の書き方を見直して ie については ActiveX のチェックが済むまで画像を読み込まないようにした．これにより domReady 前のチェックは取りやめ、domReady 後に行うことで十分になった．併せて ie 専用となるコードを html から減らせた．</p>\r
  59                                         <p><del>ちなみに上記のコードは &lt;body&gt; の直下に書かれていて、domReady イベントすら待たずに、即座にActiveX の有無を調べて &lt;body&gt; にクラスをセットします．</del></p>\r
  60                                         <p><del>基本的に スクリプトは html の最後の方に書いて、domReady イベント後に動作するようにしているので、これは異例です．</del></p>\r
  61                                         <p><del>ActiveX が有効時・無効時で css 指定から読み込まれる画像が異なる場合に、不要な画像へのアクセスを避けるためにこのようなタイミングにしています．（でも実は未検証）</del></p>\r
  62                                         \r
  63                                         <h3>filter 指定による html 要素のサイズ変化を調べる</h3>\r
  64                                         <div id="box-container" style="height:200px;position:relative;">\r
  65                                                 <div id="red-box"  style="width:100px;height:60px;border:1px solid red; position:absolute;top:10px;left:150px;">1:red</div>\r
  66                                                 <div id="blue-box" style="width:100px;height:60px;border:1px solid blue;position:absolute;top:90px;left:250px;">2:blue</div>\r
  67                                         </div>\r
  68                                         <p>filter で影を追加した要素の offsetHeight が大きくなっている場合、ActiveX が有効になっている、といえる．</p>\r
  69                                         <pre><code>\r
  70 blue.style.filter = 'progid:DXImageTransform.Microsoft.Shadow()';\r
  71                                         </code></pre>\r
  72                                         \r
  73                                         <h3>以上を元にした ActiveX チェック用のスクリプト</h3>\r
  74                                         <p>上記の理由のため以下のコードは ぺったんクライアントでは現在、使われていない．以下のコードを元にしたものが pettanr.ua.ACTIVEX で使われていて ActiveX が有効か？ 判定を行っている．</p>\r
  75                                         <pre><code>\r
  76 &lt;!--[if lt IE 9]&gt;\r
  77   &lt;script type=&quot;text/javascript&quot;&gt;\r
  78     (function(){\r
  79       var b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
  80           c = b.className || '',\r
  81           x = document.createElement('div');\r
  82       b.appendChild(x);\r
  83       x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
  84       b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight &gt; 1 ? 'enabled' : 'disabled'].join( '');\r
  85       b.removeChild(x);\r
  86     })();\r
  87   &lt;/script&gt;\r
  88 &lt;![endif]--&gt;      \r
  89                                         </code></pre>\r
  90                                         \r
  91                                         <h3>付録</h3>\r
  92                                         <h4>ActiveX が切られている場合の影響</h4>\r
  93                                         <p>ActiveX が切られている場合、 filter 指定による css3 相当のデザインが使えなくなるほかに、ActiveX オブジェクトとして提供される Flash が使えなくなる．これにより pettanR にとって重要な機能、画像の反転や ie6 以下への pngfix が難しくなる．</p>\r
  94                                         <p>さらに、ie6 以下では ActiveX オブジェクトとして提供される XmlHttpRequest も使えなくなる．（ この場合サーバとの通信手段は、動的に生成したフォーム部品によるもの などに限られてくる ）</p>\r
  95                                         <p><del>Silverlight や VML がどうなるか？は不勉強．（おそらく VML は ActiveX と無関係、Silverlight も同様なら Silverlight の重要度が少し上がる）</del></p>\r
  96                                         <p>ActiveX が切られている場合、Silverlight や VML も使えなくなり かなり難しい状況になる．サーバーの画像変換機能の助けを借りてなんとか表示している状態になってしまう．</p>\r
  97                                         <p>VBscript に使える機能ないかな？？</p>\r
  98                                         <h4>【一応】js が有効だからといって ActiveX も有効とは限らない</h4>\r
  99                                         <p>ActiveX は js と同時に切られることが多いが、これは ie のデフォルトのセキュリティ設定のためで、ActiveX と js はそれぞれ独立して on / off ができる．</p>\r
 100                                         <p>そのため js が有効だからといって　ActiveX も有効とは限らない．</p>  \r
 101                                         <h3>追記 2012/03/24</h3>\r
 102                                         <p>ie6  でうまく動かなかったため修正．ie6～8  のデフォルト設定が localhost では ActiveX が切になっているようで気付いた．</p>\r
 103                                         <pre><code>\r
 104 x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
 105 ↓\r
 106 x.style.cssText = 'width:1px;height:1px;<ins>line-height:1px;</ins>filter:progid:DXImageTransform.Microsoft.Shadow()';\r
 107                                         </code></pre>\r
 108                                 </div>\r
 109                                 <!-- InstanceEndEditable -->\r
 110             </div>\r
 111         </div>\r
 112     </div>\r
 113     \r
 114     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 115 \r
 116         <div id="footer">\r
 117             <div id="footer-item-container" class="base-content-width clearfix">\r
 118                 <div class="footer-item-wrapper">\r
 119                     <div class="footer-item">\r
 120                         <h2>ぺったんR にようこそ</h2>\r
 121                         <ul>\r
 122                             <li>サンプル</li>\r
 123                             <li>ぺったんRの特徴</li>\r
 124                             <li>沿革</li>\r
 125                         </ul>\r
 126                         <h2>Test</h2>\r
 127                         <ul>\r
 128                             <li><a href="index.html">Test Index</a></li>\r
 129                         </ul>\r
 130                     </div>\r
 131                 </div>\r
 132                 <div class="footer-item-wrapper">\r
 133                     <div class="footer-item">\r
 134                         <h2>ドキュメント</h2>\r
 135                         <ul>\r
 136                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 137                             <li>絵師向けドキュメント</li>                                                     \r
 138                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 139                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 140                         </ul>\r
 141                     </div>\r
 142                 </div>\r
 143                 <div class="footer-item-wrapper">\r
 144                     <div class="footer-item">\r
 145                         <h2>プロトタイプ</h2>\r
 146                         <ul>\r
 147                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 148                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 149                         </ul>\r
 150                         <h2>Ajax contents</h2>\r
 151                         <ul>\r
 152                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 153                         </ul>\r
 154                     </div>\r
 155                 </div>\r
 156                 <div class="footer-item-wrapper" style="width:170px;">\r
 157                     <div class="footer-item" style="padding-right:0;">\r
 158                         <h2>ぺったんRチーム</h2>\r
 159                         <ul>\r
 160                             <li>わたしたちについて</li>\r
 161                             <li>ミッション</li>\r
 162                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 163                             <li>個人情報保護方針</li>\r
 164                             <li>作品の取り扱い</li>\r
 165                             <li>お問い合わせ</li>\r
 166                         </ul>\r
 167                     </div>\r
 168                 </div>\r
 169             </div>\r
 170             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 171         </div><!-- #EndLibraryItem -->\r
 172         </div>\r
 173         <script type="text/javascript">\r
 174                 var has_server_support = false;\r
 175         </script>\r
 176 <!-- InstanceBeginEditable name="script" -->\r
 177         <script type="text/javascript">\r
 178                 var container = document.getElementById( 'box-container'),\r
 179                         red = document.getElementById( 'red-box'),\r
 180                         blue = document.getElementById( 'blue-box'),\r
 181                         result = document.createElement( 'p');\r
 182                 blue.style.filter = 'progid:DXImageTransform.Microsoft.Shadow()';\r
 183                 result.innerHTML = [\r
 184                                 red.id, ':', red.offsetWidth, 'x', red.offsetHeight, '<br>',\r
 185                                 blue.id, ':', blue.offsetWidth, 'x', blue.offsetHeight\r
 186                         ].join( '');\r
 187                 container.appendChild( result);\r
 188         </script>\r
 189 <!-- InstanceEndEditable -->\r
 190 </body>\r
 191 <!-- InstanceEnd --></html>\r