ProgressEventの使い方が分からない件

DOM JavaScript

あるけど使い方わからない＞＜

WebKit系

for(i in ProgressEvent.prototype){
	document.write(i, ',');
}

initProgressEvent,MOUSEOUT,preventDefault,FOCUS,CHANGE,initEvent,MOUSEMOVE,AT_TARGET,stopPropagation,SELECT,BLUR,KEYUP,MOUSEDOWN,MOUSEDRAG,BUBBLING_PHASE,MOUSEUP,CAPTURING_PHASE,MOUSEOVER,CLICK,DBLCLICK,KEYDOWN,KEYPRESS,DRAGDROP,

上記のこれは、ttp://www.w3.org/TR/2007/WD-progress-events-20070419/これかな(?-?)

IE8

IE8のonprogress。たぶん、WebKit系のそれとは違うかと...。
ttp://msdn.microsoft.com/en-us/library/cc197058(VS.85).aspx

で、どないしたらえぇ？

つまみぐいIE8(CSS編)@リクリ

Re:Creator's Chat 1st

リクリことRe:Creator’s Kansaiのイベント「Re:Creator's Chat 1st」でしゃべってきました。内容は技術系のカンファレンスの言葉を借りるならLTで「つまぐいIE8(CSS編)」というタイトルお話させていただきました。
デザイナーさんなどが多いなので技術系のネタは自重してCSSのネタを選んだけど技術のネタでも良かったかなと思いました。機会があれば「つまみぐいIE8(JavaScript)」とかいうネタでも(笑) 消化不良起こしそう(^^)

LTの内容

主に以下の話の2本立てでした。トークスクリプト考えていないわ、お酒を飲んでいて何しゃべったか忘れましたが概要としては以下のようなものでした。

IE8で採用されるレンダリングモードについて

IE8で採用される数々のレンダリングモードについて。IE8β1→IE8β2でも変更があったけど、僕は若干傍観気味です。そのレンダリングモードが存在することについての説明。

利用できるCSSについて

IE8で採用されるCSSについての説明。CSS2.1に準拠で。CSS3を一部採用。今まで部分採用だったCSS2.1のプロパティーも完全サポートされるというお話。

資料公開

資料も公開させていただきます。

window.toStaticHTML()

JavaScript

IE8からwindow.toStaticHTML()メソッドが追加されました。引数に与えられたHTMLの断片からscriptタグや、onclick属性などのDynamic HTMLの要素を削除するためのメソッドです。
XDomainRequestのレスポンスに、意図しないscriptタグなどが入ってきたときにまずいことにならないようにそれを削除する用途で利用できます。

toStaticHTMLの利用方法

HTMLStr = "Hello<script>alert('foo');</"+"script> World!!";

alert(window.toStaticHTML(HTMLStr)); // Hello World!!
alert(toStaticHTML(HTMLStr)); // Hello World!!

toStaticHTMLの実行結果

例:その１
<span onclick="alert('Hello World!!')">Hello World!!</span>

<span>Hello World!!</span>
例:その２
<script type="text/javascript">
var foo = "foo";
alert(foo);
</script>

scriptタグは問答無用で削除。






    
例:その３

    
<style type="text/css">
.foo{ color: red; background-color: expression(true ? "#3366ff" : "#000000"); }
.bar{ color: blue; background-color: yellow; }
</style>

<style>
.foo
{color:red;}
.bar
{color:blue;background-color:yellow;}
</style>

type="text/css"は削除されていいのか...。スタイルシート expressionが削除されている点に注目。








    
検証コード

    
<html>
<head></head>
<body>

<script type="text/javascript">

HTMLStr =
   '<span onclick="alert('Hello World!!')">Hello World!!</span>';

SCRIPTStr =
   '<script type="text/javascript">' +
   'var foo = "foo";' +
   'alert(foo);' +
   '</'+ 'script>';

STYLEStr =
   '<style type="text/css">' +
   '.foo{ color: red; background-color: expression(true ? "#3366ff" : "#000000"); }' +
   '.bar{ color: blue; background-color: yellow; }' +
   '</style>';

alert(window.toStaticHTML(HTMLStr));
alert(window.toStaticHTML(SCRIPTStr));
alert(window.toStaticHTML(STYLEStr));
alert(window.toStaticHTML(HTMLStr + SCRIPTStr + STYLEStr));
</script>

</body>
</html>






    
参考文献

    



    
    
  



    
  

  




      
      
    
      
        

  

    

  
    

    
      
    
      

  

  IE8で採用されたconstructorプロパティ



  
  

  

    
    JavaScript
    
  



  

  




    


    

  
    


    
constructorが実装されている件

    
alert('constructor' in window); // true
alert(window.constructor); // [object Window]

div = document.createElement('div');
alert('constructor' in div); // true
alert(div.constructor); // [object HTMLDivElement]
alert('prototype' in div.constructor); // true

alert(div.constructor.prototype.constructor); // [object Element]






    
ということは

    
俺俺メソッドをHTCを利用しなくてもDOMに付与できるということ。HTMLElement Prototypingができるようになったてことでいいかな...。




    
HTMLDivElement.prototype

    
<html>
<head>
    <script type="text/javascript">
    HTMLDivElement = document.createElement('div').constructor;
    HTMLDivElement.prototype.showInnerHTML =
        function(){ alert(this.innerHTML); };

    window.onload = function()
    {
        var hoge = document.getElementById('hoge');
        hoge.showInnerHTML(); // Hello World!!
    };
    </script>
</head>
<body>
    <div id="hoge">Hello World!!</div>
</body>
</html>






    
HTMLElement.prototype

    
<html>
<head>
    <script type="text/javascript">
    HTMLDivElement = document.createElement('div').constructor;

    // HTMLDivElementをまた遡るとElementオブジェクトが取得可能
    HTMLElement = HTMLDivElement.prototype.constructor;
    HTMLElement.prototype.showInnerHTML =
        function(){ alert(this.innerHTML); };


    window.onload = function()
    {
        var foo = document.getElementById('foo');
        foo.showInnerHTML(); // SPAN::Hello World!!

        var bar = document.getElementById('bar');
        bar.showInnerHTML(); // PRE::Hello World!!
    };
    </script>
</head>
<body>
    <span id="foo">SPAN::Hello World!!</span>
    <pre  id="bar">PRE:Hello World!!</pre>
</body>
</html>

便利になった気がする。








    
参考文献

    



    
    
  



    
  

  




      
      
    
      
        

  

    

  
    

    
      
    
      

  

  IE8でもEventオブジェクトのとり方は一緒



  
  

  

    
    JavaScript
    
  



  

  




    


    

  
    


    
Eventオブジェクトのとり方

    
とりあえず現行通りに、window.eventオブジェクトでいけるらしい。ここは、IE路線を貫くのね…。






    
検証コード

    
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
        document.onkeydown = function(e)
        {
             alert(e); // undefined
             alert(window.event); // [object Event]
        };
    </script>
</head>
<body>
</body>
</html>




    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  Re:Creator's Chat#1やります



  
  


  

  




    


    

  
    
珍しくイベント告知のエントリーです。2008/09/27 19:00に大阪は新大阪(新大阪シーステージ)でRe:Creator'sというWEBクリエーターさんの集まり主催のイベントがあります。

イベントの内容としては、5〜10分程度のショートプレゼン大会でWEBに関するネタを披露するというもの。参加者が非技術者さんが多いので技術とは違った視点での興味深い話が聞けるかも知れません。




    
Re:Creator's

    
Re:Creator'sは、関西方面で活躍する主にWEB関係の人たちの集まりです。プランナーさんだったり、コーダーさんだったり、デザイナーさんが多めです。

分業相手のデザイナーさんやプランナーさんと話をしてみたい！と思う方は是非イベントに参加ください。mixiコミュニティのページはこの辺です⇒Re:Creator's Party Kansai | mixiコミュニティ








    
イベント情報

    

to-Rの中の人とか。SOY CMSの中の人とかしゃべります。一覧に私の名前があるのはきっと何かのバグ。






    
イベント要旨

    
    

        
このイベントは、はじめてリクリのイベントに参加する、という人も大歓迎です。お気軽にご参加ください。

このATNDから上手く参加表明ができない場合は、mixiイベントトピックよりご表明ください。 
従来の話し手・聞き手がはっきりと分かれているような講義セミナー型のイベントとは異なり、参加するみんなが話し手となり、アウトプットできるイベントです。
Pecha Kucha Night

http://www.pecha-kucha.org/

東京で生まれたこのイベントにインスパイアされました。
さまざまな業種・ジャンルの方々の小話も良いですが、

まずは初回、「関西のWebクリエイター・業界の活性化」ということで生まれたコミュニティですから「Web関連」のネタでペチャクチャしてくれたらと思います。
マークアップ、プログラミング、IA、プロジェクトマネジメント、Flash、グラフィックデザイン・・・なんでもOK。

わかりにくいネタでも、ひとりでも反応する人がいればそれでOKです。
なのでこの機会に何かアウトプットしてみませんか。 


        http://atnd.org/events/36
    




    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  localStorageとsessionStorage



  
  

  

    
    JavaScript
    
  



  

  




    


    

  
    
IE8からどうやらlocalStorageとsessionStorageに対応する模様。これらStorage系のオブジェクトは、WHATWGのWeb Application1.0仕様のClient Side Storageを実装したものだということを祈ります。ドキュメントは、この辺で(HTML Standard)、簡単に言うと、ブラウザー側にデータを保存するための技術。ちなみにFirefox2以上でglobalStorage/sessionStorageもClient Side Storageのそれが実装されています。




    
実験

    


    
ttp://localhost/foo.html

    
<html>
<head></head>
<body>
<script type="text/javascript">
localStorage.hoge = "Hello World!!";
</script>
<a href="http://localhost/bar.html">To bar.html</a>
</body>
</html>






    
ttp://localhost/bar.html

    
<html>
<head></head>
<body>
<script type="text/javascript">
alert(localStorage.hoge); // Hello World!!
</script>
</body>
</html>

とまぁ。別のページでlocalStorageオブジェクトの内容が参照できる。便利＞＜！








    
localStorageオブジェクトには文字列しか放りこめない

    
localStorage.foo = {foo:'foo'};
alert(localStorage.foo); // [object Object]
alert(typeof localStorage.foo); // string
localStorage.bar = 1;
alert(typeof localStorage.bar); // string






    
localStorageオブジェクトの中身

    
for(i in localStorage){ document.write(i, ', '); };による書き出しです。5.10.1.2 The Storage interfaceセクションには存在しないremainingSpaceがあるけど、interfaceに定義されているプロパティやオブジェクトは一通りそろっているみたい。


length, remainingSpace,
alert('key' in localStorage); // true
alert('getItem' in localStorage); // true
alert('setItem' in localStorage); // true
alert('removeItem' in localStorage); // true
alert('clear' in localStorage); // true






    
remainingSpaceに迫る

    
localStorage.clear();
alert(localStorage.remainingSpace); // 5000000
localStorage.hoge = "Hello World!!";
alert(localStorage.remainingSpace); // 4999983

名前からわかるけどremaining(=残りの)Space(=領域)。つまり、あとどれくらいlocalStorageに保存してあげられるかを確認できる。






    
localStorageとsessionStorageの違い

    
仕様をよく読んでないので挙動から推測すると、localStorageはブラウザを閉じてもデータが残っていて、sessionStorageはブラウザを閉じるとデータが消える模様です。






    
注意事項①

    
ローカル環境ではできないので、サーバ経由(ローカルホスト可能)で検証お願いします。でないと、localStorage/sessionStorageともにundefinedになります。






    
注意事項②

    
9/25加筆。IEβ1だと、localStorage/sessionStorageは実装されていなく、Firefoxと同じglobalStorage/sessionStorageが実装されているのでIE8β1で出来ない＞＜という場合はβ2を試して下さい。(出典は、マイクロソフトの公開していたPDFですけど、URL紛失のために参考程度まで)






    
参考