Hatena::Groupmoz-addon

Ci.nsIZIGOROu

2008-09-29

saveHistory behavior

| 11:51 |  saveHistory behavior - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  saveHistory behavior - Ci.nsIZIGOROu

これは何か

ページごとに存在する persist data を取り扱う behavior のよう。但し、historyで戻る、あるいは進んだ場合にのみ発動するみたい。

サンプル

<!DOCTYPE html>
<html>
  <head>
    <title>saveHistory Test</title>
    <meta name="save" content="history" />
    <style type="text/css">
.historyData {
  behavior: url("#default#saveHistory");
} 
    </style>
  </head>
  <body>
    <div class="historyData"></div>
    <script type="text/javascript">
var data = null;
var historyData = document.getElementsByTagName("div")[0];
historyData.attachEvent("load", function(evt) {
  data = this.getAttribute("pdata");
});
historyData.attachEvent("save", function(evt) {
  this.setAttribute("pdata", ++data);
});
    </script>
  </body>
</html>

のようにして、data という変数alertしてみれば挙動が分かると思う。

ちなみにこの historyData とつけた変数への setAttribute, getAttribute は saveHistory behavior に対する onsave, onload イベントの時の参照先が persist data であって、そのイベントハンドラ内で実行した場合とそうでない場合で、得られるデータないしは保存先が異なる。

どういった場合に使えるか

ブラウザの戻る、進むボタン押した時を検出するとかに使える。

ただ、今自分がやりたい事に対しては全然使えないんだなぁ。

shogo4405shogo44052008/09/29 22:50HTCのDefaultBehaviorを利用すると色々なできますよね^^
DefaultBehaviorのまとめエントリーあると面白いかも。

ZIGOROuZIGOROu2008/10/01 16:16色々出来そうなのは確かなんですけどねー。
他のPersistent系は余り使い道無いかも。。。

MSDNのサンプルコードをIEで開く事が出来るんで、まぁそこ見れば十分だと思いますw

BeckyBecky2011/12/30 17:44Thanks for helping me to see tnhigs in a different light.

dhccgsydhccgsy2012/01/01 01:275DpWXA , [url=http://pzofmctcwmii.com/]pzofmctcwmii[/url], [link=http://gfqljepffslj.com/]gfqljepffslj[/link], http://dqivzaqoccgf.com/

lheqowriapdlheqowriapd2012/01/01 23:09rc4hzw <a href="http://bdxscblnypoa.com/">bdxscblnypoa</a>

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-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/

2007-10-11久しぶりにJavaScriptしてみる

Behaviorの豆知識 (1)

| 03:21 |  Behaviorの豆知識 (1) - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  Behaviorの豆知識 (1) - Ci.nsIZIGOROu

続編があるかどうかは知らないけど(1)とつけてみる。

htc内のGlobalオブジェクト

windowではありません。thisで参照出来ます。

またややこしい事にwindowも参照出来ますが、このオブジェクトは元のhtmlに対するwindowオブジェクトです。

thisのプロパティでenumerate出来るのは、

  1. defaults
  2. element
  3. document

です。

defaultsは多分public:defaults要素で何かデフォルトの値を要素に与えたときに参照出来る読み込み専用のオブジェクトらしい。

elementはbehaviorを当てた要素そのもの。

documentはこれまたややこしい事に、このHTCファイルのdocumentオブジェクトです。

alert(document.documentElement.outerHTML);

とかやれば分かると思うけど、public:component要素はHTMLのhead要素の子要素としてIEでは解釈されるようです。実際は、

<HTML>
  <HEAD>
    <PUBLIC:COMPONENT />
  </HEAD>
</HTML>

こんな構造になります。従ってbody要素だとかも記述しようと思えば出来ますし、きちんと実行自体はされるみたいです。

public:attach要素のfor属性

次のいずれかを文字列として入れる事が出来ます。

  1. element (省略時のデフォルト)
  2. window (元のHTML)
  3. document (元のHTML)

public:attache要素のonevent内での変数

for属性で指定した文字列であるelement, window, documentがそれぞれ変数として使えます。

さらにevent変数が使えるのですが、これはEventオブジェクトではなく文字列です。

event属性の値が入ってます。

普通のeventオブジェクトを扱いたい場合はwindow.eventで取得出来ます。*1



XML版HTCを書くための永久保存版テンプレートとbehaviorを使った時の実行順序、イベントなど

| 02:40 |  XML版HTCを書くための永久保存版テンプレートとbehaviorを使った時の実行順序、イベントなど - Ci.nsIZIGOROu を含むブックマーク はてなブックマーク -  XML版HTCを書くための永久保存版テンプレートとbehaviorを使った時の実行順序、イベントなど - Ci.nsIZIGOROu

タイトル長いw

ちまたでIE独自実装の話*2が盛り上がっていますが、独自実装の中でもやはり熱いネタと言えばDHTML Behaviorでしょう。

behaviorのサンプルはIE5時代の物なので、XMLなんだか良く分からないマークアップ形式なのですが、今回はこれをXMLとして正しい形でテンプレート化しました。是非お使い下さい。*3

HTCファイル

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<public:component xmlns="http://www.w3.org/1999/xhtml" xmlns:public="urn:HTMLComponent">
  <script type="text/javascript">
    alert("b");
  </script>
  <public:attach event="onload" onevent="alert('window onload');" for="window" />
  <public:attach event="onreadystatechange" onevent="alert('document onreadystatechange : ' + document.readyState);" for="document" />
  <public:attach event="onreadystatechange" onevent="alert('element onreadystatechange : ' + element.document.readyState);" for="element" />
  <public:attach event="oncontentready" onevent="alert('element oncontentready');" for="element" />
  <public:attach event="ondocumentready" onevent="alert('element ondocumentready'); alert(element.hasAttribute('id')); alert(element.hasAttribute('class'));" for="element" />
  <public:method name="hasAttribute" />
  <script type="text/javascript"><!--
    function hasAttribute(sName) {
      return element.outerHTML.match('<[^>]+>')[0].indexOf(" " + sName + "=") > -1;
    }
  --></script>
</public:component>

呼び出し側のHTML

こんな感じで。

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!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" lang="ja" xml:lang="ja">
  <head profile="http://purl.org/net/ns/metaprof">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>behavior template</title>
    <script type="text/javascript">alert("a");</script>
    <style type="text/css">
    body {
      behavior: url("./htc/sample.htc");
      background-color: #777777;
    }
    </style>
    <script type="text/javascript">alert("c");</script>
    <meta name="author" content="ZIGOROu" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
  </head>
  <body id="htcTest">
    <script type="text/javascript">alert("d");</script>
    <h1 class="h">Behavior Template</h1>
    <div class="section">
      <h2 class="h">Webアプリケーション</h2>
      <p>
        最近余り書く気力が無いです。
      </p>
      <div class="section">
        <h3 class="h">Perlについて</h3>
        <p>
          Perlに関しては次のような指摘があります。
        </p>
        <blockquote cite="http://profile.allabout.co.jp/pf/anagram/qa/detail/6863" title="今回のmixiのリニューアルについて - 寺田 あつし : Web制作・クリエイティブ [All About プロファイル]">
          <p>
            いずれにしても上場企業のする仕事とは思えません。<br />
            そもそもせっかくリニューアルといっているのに、いまだにphpではなくperlで動いているあたり。。。
          </p>
        </blockquote>
      </div>
    </div>
    <script type="text/javascript">alert("e");</script>
  </body>
</html>

呼び出しの順序とIEのイベント

実は幾つか仕込んであるalertの順序が非常に重要です。

HTML内部のalert
  • style要素の直前
  • style要素の直後
  • body開始タグの直後
  • body終了タグの直前
HTC内部のalert
  • public:component開始タグの直後
  • public:attachでwindowのonloadイベント
  • public:attachでdocumentのonreadystatechangeイベント
  • public:attachでelementのonreadystatechangeイベント
  • public:attachでelementのoncontentreadyイベント
  • public:attachでelementのondocumentreadyイベント
実行結果
  1. a (style要素の直前)
  2. c (style要素の直後)
  3. b (public:component開始タグの直後)
    1. ここで背景が灰色になる
  4. element onreadystatechange : loading (public:attachでelementのonreadystatechangeイベント)
  5. d (body開始タグの直後)
  6. e (body終了タグの直前)
    1. ここでテキストは全て表示される
  7. element oncontentready (public:attachでelementのoncontentreadyイベント)
  8. element ondocumentready (public:attachでelementのondocumentreadyイベント)
  9. document onreadystatechange : complete (public:attachでdocumentのonreadystatechangeイベント)
  10. window onload (public:attachでwindowのonloadイベント)

と言う結果になる。

実験結果のまとめ
  1. head要素内のstyle要素の評価はhead要素内の全てのscript要素の実行が終わった後
  2. behavior内のscript要素が実行されていく
  3. その要素のreadystatechangeイベントが発火、その要素の読み込みが開始(readyStateがloadingになる)
  4. その要素内のscript要素が上から順に実行される
  5. その要素のcontentreadyイベントが発火
  6. その要素のdocumentreadyイベントが発火
  7. documentのreadystatechangeイベントが発火、documentの読み込み終了(readyStateがcompleteになる)
  8. windowのloadイベントが発火

って感じ。Mozilla等のDOMContentLoadedとかとの違いは未調査です。*4

oncontentready, ondocumentready, onloadの違い

ここはMSDNを当たりましょう。

When the oncontentready notification fires, the content of the custom element has been successfully parsed and built. An HTC file should attach a function to this event if it is to set any properties that apply to the custom element or its contents. Also, oncontentready is the correct event to use to initialize a viewlink element behavior in script.

When the ondocumentready event fires, the document has been completely parsed and built. Initialization code should be placed here if the component needs to navigate the primary document structure. The ondocumentready event notifies the component that the entire page is loaded, and it fires immediately before the onload event fires in the primary document.

About Element Behavior - Component Initialization
凄いざっくり訳して*5みると、
oncontentreadyが発火したとき、カスタム要素の内容のパースとビルドが成功しています。 もしカスタム要素やその要素の内容に対してプロパティを設定する場合は、HTCファイルの中でこのイベントに関数をattachしなければなりません。 さらにoncontentreadyはviewlink要素のbehaviorをスクリプトの中から使う為の初期化が完了した事も意味します。 ondocumentreadyが発火したときは、documentのパースとビルドが成功したときです。 もしコンポーネント*6が元のdocumentオブジェクトの構造に対して操作を行う事が必要な場合は、その初期化コードはこのイベントに置かれるべきです。 ondocumentreadyイベントはコンポーネントに対してページのロードが完了した事を知らせて、その後すぐに元のdocumentオブジェクトのonloadイベントより前に、このイベントを発火します。
って感じかな。多分。 viewlinkはドキュメントを斜め読みなんでいまいちなんだか分かって無いです。 試せば分かる事だけど、全ての要素のoncontentreadyが完了したら、ondocumentreadyが発火するんだと思われます。従って、
  1. 最も速く特定の要素に対して何かイベントハンドラを追加したければoncontentreadyのタイミングで出来そう。
  2. onloadイベントに初期化コードを引っ掛けるのでは無くて、ondocumentreadyに引っ掛けるのが吉。
と言えそうです。 IE対策の為にbehaviorを使うのは結構面白そう。pngのアルファチャンネル対策だけじゃ勿体無いくらいbehaviorには面白い機能が満載なので、是非使ってみて下さい。 但しセキュリティには十分熟慮する必要があるでしょう。
おまけ*7
ちゃっかりここではbody要素に対してだけだけども、IEでは使えないhasAttribute()を実装してみた。w 全称セレクタを使ったbehaviorでnodeTypeがELEMENT_NODEなelementに対してだけattachすればIEでもhasAttribute()が使えるようになります。

仕様の出所*8

W3Cに草案が出ていて、 HTML Components にある。
これによれば、xmlnsはまぁいいんだけどhtml要素がroot要素になってる。 なのでテンプレ化するとしたらhtml要素をrootにもって来るべきかも。

*1:但しwindow.event.typeは"event"と返って来るw

*2:条件付きコンパイルを使った高速化のネタ。id:amachangスバラシス

*3:多分、ほとんどの人には意味が無いだろうけどw

*4:誰かきっとやってくれる!w

*5:適当ですので自己責任で

*6:HTCの事

*7:追記1: 2007-10-12T02:43:06+09:00

*8:追記2: 2007-10-17T13:41:32+09:00

latchetlatchet2007/12/13 12:32はじめまして。
ZIGOROuさんのXML版HTCを使用させていただきました。
ファイルの公開と解説エントリーが勉強になります。
ありがとうございました。
http://juce6ox.blogspot.com/2007/12/iedomload-cached-htc.html

ZIGOROuZIGOROu2007/12/18 14:30どうもです。こんなエントリ良く見つけましたねw
実際のエントリも拝見しました。
元ネタのDean Edwardはこのonload問題って割と最近まであーだこーだ言って、最終的に解決って言ってたような。。。
詳細は分かりませんがw

bemojmxrnobemojmxrno2013/08/10 05:41nbjxpnp{.beepo, <a href="http://www.tzzrunuevw.com/">kpzqmhmyhy</a> , [url=http://www.gddguscjdt.com/]rfegozcyej[/url], http://www.ehqystjvqz.com/ kpzqmhmyhy