[ Tags :: JavaScript ]

FirefoxでのouterHTML

category-icon

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

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" という属性が付加されるので、気になるようなら適宜省けば良いでしょう。

 

— posted by martin at 01:25 am   commentComment [0]  pingTrackBack [0]

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

category-icon

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

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

IMG_4128
サンチャゴ・コンポステーラへの道 その1
IMG_4095
サンチャゴ・コンポステーラへの道 その2
IMG_4156
サンチャゴ・コンポステーラへの道 その3
IMG_4078
サンチャゴ・コンポステーラへの道 その4

 

— posted by martin at 11:39 pm   commentComment [0]  pingTrackBack [0]

画像なしで吹き出しみたいなもの

category-icon

 この頃は、リッチなツールチップ(バルーンヘルプ)が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。

 自分なりに実装するとしたら、どのようなものが良いか考えてみました。

  1. シンプルであること
  2. 軽快であること
  3. 吹き出しっぽく見せたいな
  4. 角丸コーナーが良いな
  5. 出来ればドロップシャドウぐらいは付けたい

という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。

  1. シンプルであること → 画像ファイルを使わずにやれるか?
  2. 軽快であること → フェードなどのエフェクトはなしで
  3. 吹き出しっぽく見せたいな → あのニョロっとした尻尾みたいなのをどうやって作るか?
  4. 角丸コーナーが良いな → CSS3に対応していないIEはどうするか?
  5. 出来ればドロップシャドウぐらいは付けたい → 同上

 いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。

 角丸コーナーは、VMLのroundrectGを使って実現できます [参考記事: VMLやSVGを用いた角丸コーナーLink ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事: IEでCSS3のドロップシャドウを使いたいLink ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな(でも正統派)手法ですが、これに関して、レファレンスともいうべきサイトがありますLink 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました:)

 とりあえず、試験的なモデル(プロトタイプ)を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。
cutePop
なかなか良い感じでは。FirefoxですがIEでもほぼ同じ。
 

実際のデモのページはこちら。Link

 で、かなり手抜きですが、これを元にスクリプト実装したのが以下。

実際のデモのページはこちら。Link

 ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう

   


— posted by martin at 01:57 am   commentComment [2]  pingTrackBack [0]

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

category-icon

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

 写真のポップアップにも。
IMG_0285
モン・サン・ミシェル

 


— posted by martin at 11:31 pm   commentComment [13]  pingTrackBack [0]

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

category-icon

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

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

 まぁfooという関数オブジェクトがあるとして、2秒後に「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を用いて遅延処理をしようと思いましたが、どうもうまい方法が思いつかず、とあるサイトで質問してみましたLink 。すると、数分後(!)に返答があって、「それ、jQueryで出来るよっ!」と(--)(そのコメントは今は消されたようなんですが) まぁ確かにそうなんですが(なのであえて.delayという単語を選んだ)何かすごい技があって、それで解決!みたいなことを期待していたわけです(jQueryを使わずに)。

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

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, 」、更に2秒後に「world !」とボタンの右側に表示されます。
 何か、「こうしたらいいよ」とかのアドバイスあればよろしくお願いします。

 


— posted by martin at 08:29 am   commentComment [0]  pingTrackBack [1]

T: Y: ALL: Online:
Created in 0.0182 sec.
prev
2017.3
next
      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 30 31