ppBlog official

[ カテゴリー » 開発日誌 » JavaScript ]

エントリー 35 件中 1-5 件を ボックス表示 ⇔ リスト表示

FirefoxでのouterHTML

2010/8/25

　innerHTMLに比べると、outerHTMLを使う頻度はぐっと少ない。現状、IEと Safari, Chrome, Operaが対応していて、未対応はFirefoxだけ。使用頻度が低いメソッドに対して、Firefox向けに、長々しいスクリプトを書くのもどうかねぇ、と思ってググってみたところ、ナイスな投稿がありました。

sOuterHTML = new XMLSerializer().serializeToString(oElement);

　確かに、これは理にかなってますね。outerHTML自体は、値の取得だけでなくて、設定も出来るんだけど、そういう場面はまずないだろうから、このgetterだけで十分ですね。

<div id="Here">Hello, <strong>really strange</strong> World !</div>

対して、innerHTMLなら

Hello, <strong>really strange</strong> World !

が返されるし、outerHTMLなら、

<div id="Here">Hello, <strong>really strange</strong> World !</div>

が返される。実装例としては、

function getOuterHTML(e) {
 if(e.outerHTML){ // IE, Webkit, Opera
  return e.outerHTML;
 } else { // Firefox (, Webkit, Opera)
  return  new XMLSerializer().serializeToString(e);
 }
};

あるいは、短く

function getOuterHTML(e) {
  return e.outerHTML || new XMLSerializer().serializeToString(e);
};

とか。

outerHTML

Hello, really strange World !

　実際には、Firefoxだと xmlns="http://www.w3.org/1999/xhtml" という属性が付加されるので、気になるようなら適宜省けば良いでしょう。

JavaScript

— posted by martin at 01:25 am Comment [0] TrackBack [0]

ひとつの記事に複数の拡大画像がある場合

2010/8/23

カテゴリー » 開発日誌 » JavaScript

　簡易画像ギャラリーのテスト。タイトルのような場合、ひとつの画像をクリックして、拡大表示にした際に、ポップアップした画面の右端に矢印が表示される。それをクリックすると、同じ記事に含まれる次の画像を読み込む仕様。

　特に画像キャプションが付いている場合は、それも表示されるので、写真を主体に見せたい場合なんかには、好都合だと思います。

サンチャゴ・コンポステーラへの道　その１

サンチャゴ・コンポステーラへの道　その２

サンチャゴ・コンポステーラへの道　その３

サンチャゴ・コンポステーラへの道　その４

JavaScript

— posted by martin at 11:39 pm Comment [0] TrackBack [0]

表示オンオフ制御周りの改良

2010/8/13

カテゴリー » 開発日誌 » JavaScript

　ppBlogのoParts.jsにtweenアニメーションみたいな動きを取り入れてみました。まだ試作段階ですが、テーマ：Basicであれば、左側のサイドバーの展開や、ソーシャルブックアイコンで、ちょっとした動きをみることが出来ます。

　写真のポップアップにも。

モン・サン・ミシェル

JavaScript

— posted by martin at 11:31 pm Comment [0] TrackBack [0]

メソッドチェーンで遅延処理をしたい

2010/8/8

カテゴリー » 開発日誌 » JavaScript

　こんばんは、martinです。タイトル通りなんですが、要は以下のようなことを簡単に実装したい。

foo.await(2000).say("Hello, ").await(1500).say("world !");

　まぁfooという関数オブジェクトがあるとして、２秒後に「Hello, 」を出力して、そこで小休止、で1.5秒後に「world !」を出力すると。それをメソッドチェーンに拘ってやりたい。簡単な例を挙げてみます(うまく行かないサンプルです)。

var foo = function(){}; // 関数オブジェクトを作成

foo.prototype = { // プロトタイプを設定
 say : function(s){
  alert(s);
  return this;
 },
 await : function(ms){ // ここで遅延処理をゴニョゴニョしたい
  // var _this = this;
  // setTimeout(function(){
  // return _this; # まぁ、これはダメだけど、こんな感じでやれたらいい
  // }, ms);
   return this;
  }
}

var bar = new foo();
bar.await(2000).say("Hello"); // すぐに「Hello」が出力される

　メソッドチェーンを実装するとなると、return this;をかまして、用意した関数オブジェクト自身を返すようにする必要があります。上のawait関数内で、setTimeoutを用いて遅延処理をしようと思いましたが、どうもうまい方法が思いつかず、とあるサイトで質問してみました。すると、数分後(!)に返答があって、「それ、jQueryで出来るよっ！」と（そのコメントは今は消されたようなんですが)　まぁ確かにそうなんですが（なのであえて.delayという単語を選んだ）何かすごい技があって、それで解決！みたいなことを期待していたわけです（jQueryを使わずに）。

　２つ目に付いたコメントで、簡単に済ませる方法はなくて、何か別のキューシステム(待ち行列システム？)を用意する必要があるよ、と。やっぱりそうか。で、沢山ヒントを頂いたんで、自分なりに作ってみました。次のようなキューシステムを用意しました。

Queue = {
 entries : [], // 関数を登録する配列を用意
 inprocess : null,
 enqueue : function(entry){ // 関数を登録する
  Queue.entries.push(entry);
 },
 flush : function(){ // 配列に登録された関数群を一気に実行
  if(Queue.inprocess) return; // 「待ち中」なら実行しない
  while (Queue.entries.length){
   var entry = Queue.entries.shift(); // 配列の頭から取り出す（つまり登録順）
   if(entry.toString().indexOf('await:') !== -1){ // 「待ち」のマークを見つけたら
    var ms = Number(entry.split(':')[1]);
    Queue.inprocess = setTimeout(function(){
     Queue.inprocess = null;
     Queue.flush(); // 指定時間後に処理を再開
    }, ms);
    return;
   }
   entry(); // 取り出された関数を実行
  }
 }
}

　こいつを最初のサンプルに適用すると以下のような感じになります。

var foo = function(){};

foo.prototype = {
 say : function(s){
  Queue.enqueue(function(){ // 配列に関数を登録
   alert(s);
  });
  Queue.flush();
  return this;
 },
 await : function(ms){
  Queue.enqueue('await:' + ms); // 配列に「await:2000」みたいなマークを登録
  return this;
 }
}

　自分のスキルではこの程度ですキューシステムに頼らずに自己完結できる目から鱗な手法がないですかねぇ。

とりあえず動作サンプルを以下に。ボタンを押すと、

var bar = new foo();
 bar.await(1500).say('Hello, ').await(2000).say('world!');

ってのが実行されます。ここでは、ボタンを押して1.5秒後に「Hello, 」、更に２秒後に「world !」とボタンの右側に表示されます。

　何か、「こうしたらいいよ」とかのアドバイスあればよろしくお願いします。

JavaScript

— posted by martin at 08:29 am Comment [0] TrackBack [1]

IE8でのHTML5要素有効化あれこれ

2010/7/31

カテゴリー » 開発日誌 » JavaScript

　もう7月も終わりですね、martinです。相変わらず時の流れは速いもので。

　このサイトのブログの基本テーマ（スキン）「Basic」では、試験的にHTML5を導入しています。HTML5では新しい要素がいくつか追加

されていますが、IE9未満のブラウザでは、articleやheader, navなどのクールで新しい要素に対するスタイルシート指定が効かない、という事が昔から知られています。これに対するアプローチとして、 document.createElementを使うとスタイルシートでの指定が可能になるよ、というのがよく知られています。初出は Sjoerd Visscher

さんあたりでしょうかねぇ。

document.createElement(”article”); // 未知の要素articleに対してIEでもCSS指定が可能になる

　このdocument.createElementを使うテクニックは、いろんなところで見かけることができて、有名どころでは、Remy sharp氏のhtml5.js あたりですね。

　もっとも、このテクニックを使っただけでは、IEでHTML5化を効かせたページを印刷したときまでは反映されないので、これに対しては、IE Print Protector がよく知られていると思います（個人的には、印刷のサポートまではあまり興味がありませんが）。

　で、このcreateElementを使うテクニックは、ベタに書けば以下のような感じになります。

// ここでは簡潔化のため、以下の6個の新要素に絞ってます。
<!--[if lt IE 9]>
var html5_elements = ["header", "nav", "article", "section", "aside", "footer"]; 
for (var i = 0, len = html5_elements.length; i < len; i++){
 document.createElement(html5_elements[i]); // 各要素に適用
}
<![endif]-->

　どこで最初に見かけたのか失念しましたが、これを一行（ワンライナー）で簡潔に済ませたスクリプトを見たときはいたく感心しました。Dean Edwards氏のブログ

もこうなっています。

"header,nav,article,section,aside,footer".replace(/¥w+/g, function(a){document.createElement(a)});

　上のポイントは、replaceメソッドの引数に関数を指定できて、その関数内では、正規表現にマッチした要素を適宜適用していく点です。ループみたいなことを勝手にやってくれる点ですね。おそらくこれ以上短くは書けないのではないかと思うのですが、息抜きに自分なりにいくつか考えてみました。

"header,nav,article,section,aside,footer".split(',').sort(function(a){return document.createElement(a)*1});

　これも、似たような発想からですね。自動でなんかやってくれるという。

with("header,nav,article,section,aside,footer".split(',')))while(length)document.createElement(pop());

　ここではwith構文を使ってみました。これもなかなかシンプルです。同じくwithと、Enumeratorを使って、

with(new Enumerator("header,nav,article,section,aside,footer".split(',')))for(;!atEnd();moveNext())document.createElement(item());

　これは、ちょっと長いし、Enumerator Object

はマイナーですかね。

　短さ命で、グローバル変数の汚染なんて気にしないぜっ、という向きには以下のようなものもありかと思います。

s="header,nav,article,section,aside,footer".split(',');while(s[0])document.createElement(s.pop());

　for文関連では、

for(i in s="header,nav,article,section,aside,footer".split(','))document.createElement(s[i]);

とか

for(i=0;n="header,nav,article,section,aside,footer".split(',')[i++];document.createElement(n));

とかですかねぇ。

　ちなみに、配列を作るのに、文字列にsplit()をかませるというのは、よく見かける手法です。ここでの、6個ぐらいの要素数ではあまり差は出ませんが、要素数が増えてくると、逐一ダブルクォート（or シングルクォート）で括っていくやり方と大きく差が付いてきます。

var html5_elements = ["header", "nav", "article", "section", "aside", "footer"]; // これより
var html5_elements = "header,nav,article,section,aside,footer".split(','); // こっちが記述が短い

　正規表現から配列も出来ますね。

var html5_elements = "header,nav,article,section,aside,footer".match(/¥w+/g);

　以上、トリビアルなエントリーでした

HTML5 JavaScript

— posted by martin at 12:18 pm Comment [0] TrackBack [1]

エントリー 35 件中 1-5 件を ボックス表示 ⇔ リスト表示

12 3 4 5 6 7 次へ»

ALL:

Online:

ThemeSwitch

Created in 0.0251 sec.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
選択：` すべて ` なし`

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29

関連エントリー(解決編？)

[Update：2007/10/8 17:31:18]

関連エントリー： Google Adsenseの表示タイミングを制御する

Updated Entry: http://p2b.jp/200805-events-order

[ カテゴリー » 開発日誌 » JavaScript ]

FirefoxでのouterHTML

ひとつの記事に複数の拡大画像がある場合

表示オンオフ制御周りの改良

メソッドチェーンで遅延処理をしたい

IE8でのHTML5要素有効化あれこれ

Menu

Recently

Ranking

Tags

Comments

Category

Trackbacks

Archives

Others