Hatena::Groupmoz-addon

Ci.nsIZIGOROu

2008-09-16

IE6,7 で使えるDOM Storageを作ってみた

| 18:26 |  IE6,7 で使えるDOM Storageを作ってみた - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  IE6,7 で使えるDOM Storageを作ってみた - Ci.nsIZIGOROu

と言う訳でIE6 or 7持ってる人は

を試してみてくだしあ

細かい事は今度書く。

ちなみにソース

追記

ちゃんと告知した。

RolandaRolanda2012/07/23 15:16Wow! Talk about a pstoing knocking my socks off!

rslzmzarnprslzmzarnp2012/07/24 12:14nDu9Ki , [url=http://ghhflqsjjiyj.com/]ghhflqsjjiyj[/url], [link=http://tweiplytpwjr.com/]tweiplytpwjr[/link], http://vmtvtossqitf.com/

pkottympkottym2012/07/25 23:06i4zizL <a href="http://jpetmcjtbwhr.com/">jpetmcjtbwhr</a>

ksspnqjpymksspnqjpym2012/07/26 23:324kDpNv , [url=http://jmeuoqcailjc.com/]jmeuoqcailjc[/url], [link=http://uxtezrlabtut.com/]uxtezrlabtut[/link], http://otypxzpzbhbl.com/

2008-02-08イケスカナイ

WebBrowser Controlには後からConnectObject()出来ない

| 03:41 |  WebBrowser Controlには後からConnectObject()出来ない - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  WebBrowser Controlには後からConnectObject()出来ない - Ci.nsIZIGOROu

IEってひょっとして生成前から仕込まないとダメなのかな?

var browser = WScript.CreateObject("InternetExplorer.Application");
WScript.ConnectObject(browser, "browser_");

これは接続出来ないって言われる。

WebBrowser Control, MSHTMLのイベント発火とJS側の状態

| 02:49 |  WebBrowser Control, MSHTMLのイベント発火とJS側の状態 - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  WebBrowser Control, MSHTMLのイベント発火とJS側の状態 - Ci.nsIZIGOROu

どの時点でIEのスクリプトに横槍出来るか試してみた。

はじめに

実験はIE7でやってます。IE6は捨ての方向で。

またWSHでやってます。ソース見れば分かると思うけど。

ソース


var browser = WScript.CreateObject("InternetExplorer.Application", "browser_");

var console = {
  log: function(msg) {
    WScript.StdErr.Write(msg + "\n");
  }
};

function browser_BeforeNavigate2(browser, url, flags, target, postdata, headers, cancel) {
  console.log("[event] BeforeNavigate2");
  console.log("ReadyState : " + browser.ReadyState);
  console.log("document -> " + typeof browser.Document);

  with({ window: browser.Document.parentWindow }) {
    console.log("window -> " + typeof window);
    console.log("eval -> " + typeof window.eval);
  }
}

function browser_DownloadBegin() {
  console.log("[event] DownloadBegin");
  console.log("ReadyState : " + browser.ReadyState);
  console.log("document -> " + typeof browser.Document);

  if (browser.ReadyState > 0 && typeof browser.Document == "object") {
    with({ window: browser.Document.parentWindow }) {
      console.log("window -> " + typeof window);
      console.log("eval -> " + typeof window.eval);
    }
  }
}

function browser_DownloadComplete() {
  console.log("[event] DownloadComplete");
  console.log("ReadyState : " + browser.ReadyState);
  console.log("document -> " + typeof browser.Document);

  with({ window: browser.Document.parentWindow }) {
    console.log("window -> " + typeof window);
    console.log("eval -> " + typeof window.eval);

    if (browser.ReadyState == 1 && typeof window == "object") {
      window.console = console;

      window.document.attachEvent("onreadystatechange", function(evt) {
        console.log("[event] onreadystatechange");
        console.log("ReadyState : " + browser.ReadyState);
        console.log("document -> " + typeof browser.Document);
        console.log("window -> " + typeof window);
        console.log("eval -> " + typeof window.eval);
      });

      window.attachEvent("onload", function(evt) {
        console.log("[event] onload");
        console.log("ReadyState : " + browser.ReadyState);
        console.log("document -> " + typeof browser.Document);
        console.log("window -> " + typeof window);
        console.log("eval -> " + typeof window.eval);
      });
    }
  }
}

function browser_WindowStateChanged(flags, validFlags) {
  console.log("[event] WindowStateChanged : " + flags);
  console.log("ReadyState : " + browser.ReadyState);
  console.log("document -> " + typeof browser.Document);
  
  if (browser.ReadyState > 0 && typeof browser.Document == "object") {
    with({ window: browser.Document.parentWindow }) {
      console.log("window -> " + typeof window);
      console.log("eval -> " + typeof window.eval);
    }
  }
}

function browser_NavigateComplete2(ie, url) {
  console.log("[event] NavigateComplete2");
  console.log("ReadyState : " + browser.ReadyState);
  console.log("document -> " + typeof browser.Document);

  with({ window: browser.Document.parentWindow }) {
    console.log("window -> " + typeof window);
    console.log("eval -> " + typeof window.eval);
  }
}

function browser_DocumentComplete(ie, url) {
  console.log("[event] DocumentComplete");
  console.log("ReadyState : " + browser.ReadyState);
  console.log("document -> " + typeof browser.Document);

  with({ window: browser.Document.parentWindow }) {
    console.log("window -> " + typeof window);
    console.log("eval -> " + typeof window.eval);
  }
}

function browser_OnQuit() {
  console.log("[event] OnQuit");
  browser = null;
}

browser.Visible = true;
browser.Navigate2("http://sample.art-code.org/ie.html");

while (true) {
  if (!browser) {
    break;
  }
  WScript.Sleep(1000);
}

console.log("End");

結果

実際の実行結果は貼り付けると縦長になるので、表組みにしてみた。

object event ReadyState Document window eval
WebBrowser DownloadBegin 1 unknown -- --
WebBrowser WindowStateChanged 1 unknown -- --
WebBrowser DownloadComplete 1 object object undefined
WebBrowser DownloadBegin 1 object object undefined
WebBrowser NavigateComplete2 1 object object undefined
WebBrowser WindowStateChanged 1 object object undefined
HTMLDocument onreadystatechange 3 object object undefined
WebBrowser DownloadComplate 3 object object object
HTMLDocument onreadystatechange 4 object object object
WebBrowser DocumentComplate 4 object object object
HTMLWindow onload 4 object object object

こんな感じの結果となる。見分けやすいように変更点があるところをボールドにしてみた。

IE7の場合は最も早くwindowオブジェクトが生成されるのが、

  • DownloadComplateイベントの発火時
  • ReadyStateが1の時

が成り立つ時のようだ。

それ以前はdocumentオブジェクト相当がunknownとなりアクセス出来ない。またevalは当分実行出来なくて、やはりDownloadCompleteイベントの発火時で、ReadyStateが3の時に実行出来る。これじゃ全然意味が無い。*1

まとめ

  • とりあえずInternetExplorer.Applicationをダイレクトで生成すればイベントに接続出来る
  • 肝はDownloadCompleteイベント
  • evalは当分使えない
  • Document, ReadyStateの値が状態をはかるのに参考となる

って所かな。

ちなみにこれが出来るとGreasemonkey的な枠組みを作ろうと思えば出来る*2し、予め任意のオブジェクトを用意しておくことも可能です。

但しvar宣言はeval相当*3が使えないとやれないので、d:id:amachangdocumentオブジェクトを差し替えるhackを予め仕込むとかは出来ない。

但し、DownloadComplete, ReadyState = 3のときに差し込めば、実際のDOMアクセス処理が走る前には適用出来ると思いますけど。

これは画面遷移が挟まったとしても有効です。

*1:但しsetTimeoutの時間指定を0とかにしたら実行出来るかもしれない

*2:但し、WSHの権限をもろに使えるようになるのでやることによっては相当危険

*3:setTimeout, execScriptも同等の事が出来るけど

2008-01-24大人になる

IEでWindows Common Control (3) - StatusBar

| 02:16 |  IEでWindows Common Control (3) - StatusBar - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  IEでWindows Common Control (3) - StatusBar - Ci.nsIZIGOROu

よーし、今日はこれを最後にするお。

f:id:ZIGOROu:20080125015439p:image

ソース

<!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" xmlns:hta="urn:HTMLApplication" xml:lang="ja" lang="ja">
  <head>
    <title>Status Bar</title>
    <style type="text/css">
      div#commonCtlContainer object#statusbar {
        display: block;
        margin: 0 auto;
        background-color: glay;
      }
    </style>
  </head>
  <body>
    <div id="commonCtlContainer">
      <object classid="clsid:8E3867A3-8586-11D1-B16A-00C0F0283628" id="statusBar" width="100%" height="20">
        <param name="ShowTips" value="true" />
        <param name="Style" value="0" />
      </object>
    </div>
    <script type="text/javascript">
      // <![CDATA[
for (var i = 0; i < 8; i++) {
  statusBar.Panels.Add(i + 1, "test" + (i + 1), "test" + (i + 1), i);

  with ({ panel: statusBar.Panels.Item(i + 1) }) {
    panel.Bevel = i % 3;
  }
}

statusBar.attachEvent('PanelClick', function(panel) { alert(panel.Text); });
      // ]]>
    </script>
  </body>
</html>

サンプル

メモ

IPanels, IPanelはnoncreatableなのでStatusBarからAddして作る

まぁ表題通りなんですけど、

[id(0x00000002), helpstring("Adds a Panel object to a Panels collection and returns a reference to the created Panel."), helpcontext(0x000335ff)]
IPanel* Add(
                [in, optional] VARIANT* Index, 
                [in, optional] VARIANT* Key, 
                [in, optional] VARIANT* Text, 
                [in, optional] VARIANT* Style, 
                [in, optional] VARIANT* Picture);

って定義なんだけど、Indexは1から始まり、Keyはuniqueじゃなきゃダメ。

Textに関しては後で書くけど、Styleに依存する。

Pictureは今の所どうやって指定するか分からんw

PanelのStyle, Bevel
[id(0x0000000a), propget, helpstring("Returns/sets the style of a StatusBar Panel object"), helpcontext(0x00033621)]
HRESULT Style([out, retval] PanelStyleConstants* psStyle);

[id(0x0000000a), propput, helpstring("Returns/sets the style of a StatusBar Panel object"), helpcontext(0x00033621)]
HRESULT Style([in] PanelStyleConstants psStyle);

[id(0x00000003), propget, helpstring("Returns/sets the bevel appearance of a Panel object, inset, raised, or none"), helpcontext(0x0003361a)]
HRESULT Bevel([out, retval] PanelBevelConstants* psBevel);

[id(0x00000003), propput, helpstring("Returns/sets the bevel appearance of a Panel object, inset, raised, or none"), helpcontext(0x0003361a)]
HRESULT Bevel([in] PanelBevelConstants psBevel);

と言う定義なので、それぞれ

  • PanelStyleConstants
  • PanelBevelConstants

を見るんですが、

typedef [uuid(8E3867A9-8586-11D1-B16A-00C0F0283628), helpstring("Panel Style constants"), helpcontext(0x0003360f)]
enum {
    sbrText = 0,
    sbrCaps = 1,
    sbrNum = 2,
    sbrIns = 3,
    sbrScrl = 4,
    sbrTime = 5,
    sbrDate = 6,
    sbrKana = 7
} PanelStyleConstants;

typedef [uuid(8E3867A8-8586-11D1-B16A-00C0F0283628), helpstring("Panel Bevel constants"), helpcontext(0x0003360b)]
enum {
    sbrNoBevel = 0,
    sbrInset = 1,
    sbrRaised = 2
} PanelBevelConstants;

って定義になってて、それぞれのバリエーションでサンプルは出力してるって感じ。

でStyle指定なんですが、表示見てもらえれば分かるかと思いますが、PanelStyleConstants.sbrText(=0)を指定した時じゃないとTextは表示されません。悪しからず。

StatusBarのイベント

試しにやってみて出来てびっくりした次第なのですが、attachEventで普通にattach出来ちゃったお、超驚きなんすけどw

イベントに関してはIStatusBarEventsで定義してあって、今回は、

[id(0x00000001), helpstring("Similar to the standard Click event, but the PanelClick event occurs when a user presses and then releases a mouse button over any of the StatusBar control's Panel objects."), helpcontext(0x000335f6)]
void PanelClick(Panel* Panel);

を使った。

ハンドラに対してPanelオブジェクトが渡るので、指定したPanelのTextプロパティalertしてます。

その他

Font, Pictureの指定方法が分からない。

  • IFontDisp
  • IPictureDisp

を調べれば分かるはず。

あとどうも内部的にShift_JIS決め打ちの悪寒。

感想

フォントさえ指定出来れば意外とHTAで使えそうな気がした。

がHTMLでいいんじゃね的な考えは常に付きまとうんだけどw


IEでWindows Common Control (2) - Slider

| 00:50 |  IEでWindows Common Control (2) - Slider - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  IEでWindows Common Control (2) - Slider - Ci.nsIZIGOROu

f:id:ZIGOROu:20080125004043p:image

ですな。

ソース

<!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" xmlns:hta="urn:HTMLApplication" xml:lang="ja" lang="ja">
  <head>
    <title>Slider</title>
    <style type="text/css">
      div#commonCtlContainer object#slider {
        display: block;
        margin: 0 auto;
        background-color: glay;
      }

      div#commonCtlContainer p {
        font-size: small;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="commonCtlContainer">
      <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="slider" width="400">
        <param name="Min" value="0" />
        <param name="Max" value="100" />
        <param name="Orientation" value="0" />
        <param name="Text" value="Slider" />
        <param id="tickStyle" name="TickStyle" value="0" />
        <param name="SelectRange" value="false" />
      </object>
      <p id="sliderValue">0</p>
    </div>
    <script type="text/javascript">
      // <![CDATA[
      (function() {
        var text = document.getElementById('sliderValue');

        slider.attachEvent('Change', function() { 
          text.innerHTML = slider.Value;
        });
      })();
      // ]]>
    </script>
  </body>
</html>

サンプル

メモ

TickStyleについて

これは目盛りをどう表示するかで、

typedef [uuid(F08DF950-8592-11D1-B16A-00C0F0283628), helpstring("TickStyle constants"), helpcontext(0x00033506)]
enum {
    sldBottomRight = 0,
    sldTopLeft = 1,
    sldBoth = 2,
    sldNoTicks = 3
} TickStyleConstants;

のいずれかの値です。

これって動的に変更出来るように試しに作ったんだけど、どうも変更できないみたい。

大きさについて

widthに関しては普通に変更出来るんだけど、heightは上限値がある模様。

heightは何も指定しない方が良さそう。

object.innerHTML

param要素がたくさん出てくるハズなんだけど、これやってみると面白いです。

設定してないparamも見える。恐らく初期値一覧が取れるって事ですね。

paramをまったく指定せずに、

var paramCol = object.getElementsByTagName('param');
var defaults = {};

for (var i = 0, l = paramCol.length; i < l; i++) {
  with({ param: paramCol.item(i) }) {
    defaults[param.name] = param.value;
  }
}

とかやると多分デフォルトの値一覧が取れるっぽぃ。

感想

今の所、Web用途はNGだと思うけどHTAならありだと思った。


IEでWindows Common Control (1) - ProgressBar

| 23:30 |  IEでWindows Common Control (1) - ProgressBar - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  IEでWindows Common Control (1) - ProgressBar - Ci.nsIZIGOROu

IEだとかHTAをユーザー限定でやるならえげつないActiveXコントロール使ったっていいじゃない(誰

と思って試しにプログレスバーをやってみた。

f:id:ZIGOROu:20080124231959p:image

こういうのね。

ソース

<!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" xmlns:hta="urn:HTMLApplication" xml:lang="ja" lang="ja">
  <head>
    <title>Progress Bar</title>
    <style type="text/css">
      div#commonCtlContainer object#prog {
        display: block;
        margin: auto;
        background-color: buttoncolor;
      }

      div#commonCtlContainer p {
        font-size: small;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="commonCtlContainer">
      <object classid="clsid:35053A22-8589-11D1-B16A-00C0F0283628" id="prog" height="20" width="400">
        <param name="Min" value="0" />
        <param name="Max" value="100" />
        <param name="Orientation" value="0" />
        <param name="Scrolling" value="1" />
      </object>
      <p id="progText">0%</p>
    </div>
    <script type="text/javascript">
      // <![CDATA[
      (function() {
        var iid;
        var text = document.getElementById("progText");
        iid = setInterval(function() { 
          if (prog.Value < prog.Max) {
            prog.Value++;
            text.innerHTML = prog.Value + "%";
          }
          else {
            clearInterval(iid);
            }
        }, 250);
      })();
      // ]]>
    </script>
  </body>
</html>

サンプル

感想

今の所、とりあえず動いたぜーって感じ。皆さん警告みたいの出ます?

追記1(2008-01-24T23:42:58+09:00)

typoさんより。

@zigorou: IE6じゃうごかんぽい? *

まじすか?w

Officeが入って無いと無いコントロールなのかなぁ。

参考リンクでもOfficeってもろに書いてあるしな。

動いたみたい!

追記2(2008-01-25T00:54:08+09:00)

d:id:nanto_viさんより

@zigorou セキュリティ警告もJavaScriptエラーも出ずに失敗。mscomctl.ocxは存在しないようです。at IE 6 SP2 *
C:\WINDOWS\system32\mscomctl.ocx

ってOCXがどうもOfficeにバンドルされてるっぽくて、これが無いと動かなさそうと言う感じかなぁ。

追記3

いわゆるVB6系のランタイム(Vectorとかで良く再配布されてる奴)にmscomctl.ocxが入ってるみたい。

辺りからダウンロード出来るかと。

参考(2008-01-24T23:42:58+09:00)

2008-01-19

(min|max)-(width|height)なHTC

| 04:14 |  (min|max)-(width|height)なHTC - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  (min|max)-(width|height)なHTC - Ci.nsIZIGOROu

もうみんな結構試してるから今更かもだけど、試しに暫定版を作った。

諸々問題あるけど、後で書く。

r

使い方は、

div#hoge {
  width: 80%;
  min-width: 400px;
  max-width: 600px;
  behavior: url(minmax.htc)
}

みたいな感じ。

今の所のTODO

  • ptとかmmとか色々単位系の変換ライブラリ必要。今の所pxしか考慮してない
  • IE7のときどうなるか試してない
  • JSでこのbehaviorが当たる要素を追加した時の挙動がおかしい
    • 一旦min/maxを忘れてレンダリングした後に、再度min/maxを当てるのが正しい?

MariliaMarilia2012/04/29 12:00That hits the target prefetcly. Thanks!

qmbtejhwotlqmbtejhwotl2012/04/29 18:23SRjl6q <a href="http://mnvwzqjkqyml.com/">mnvwzqjkqyml</a>

gcjijpgcjijp2012/05/02 14:48FsI1a5 , [url=http://vzmntdzdqjks.com/]vzmntdzdqjks[/url], [link=http://jnqyhzzjjthk.com/]jnqyhzzjjthk[/link], http://lugjtcycwtvi.com/