2008/10/27

Bloggerに「続きを読む」を追加してみたの続き
flashcast：フリーで働くITエンジニア集団のブログ: Bloggerに「続きを読む」を追加してみたの続きです。

「続きを読む」機能を先日つけたのですが、なんか変な現象が・・・

よく見ると、「copy to clip」の文字があり得ない場所に出ています。

どうも、
flashcast：フリーで働くITエンジニア集団のブログ: bloggerで使っているsyntaxhighlighterに、クリップボードにコピーするボタンを追加する
で追加したflashが消えていないみたい・・・

しょうがないので、「続きを読む」で隠した場合は、display:noneで、flashを消すことにしました。（本当は、隠している場所だけ消せばいいのですが、とりあえず全部消しちゃいました。）

うっかりしてました。
みつけてくれたもじゃもじゃに感謝です。
by とのさま 0 コメント ラベル: , ,

2008/10/23

bloggerで使っているsyntaxhighlighterに、クリップボードにコピーするボタンを追加する
flashcast：フリーで働くITエンジニア集団のブログ: flash+javascriptで、クリップボードにコピーする
の続きです。

こんな感じになりました。
view plainprint?
  1. $(document).ready(function() {  
  2.  if (!$.browser.msie) {  
  3.   var i = 0;  
  4.   $(".dp-highlighter").each(function(){  
  5.    this.id = "tonosamartdp" + i;  
  6.    $(this).children(".bar").children(".tools").children("a:contains('copy to clipboard')").replaceWith("<span id='" + this.id + "swf'/>");  
  7.   
  8.    var flashvars = {  
  9.     func:"copy2clip_getData",  
  10.     img:"http://tonosamart.com/flashcast/copy2clip/copy.swf",  
  11.     param:this.id  
  12.    };  
  13.    var params = {  
  14.     menu:"false",  
  15.     allowScriptAccess:"always"  
  16.    };  
  17.    var attributes = {  
  18.     id:this.id + "swf"  
  19.    };  
  20.    swfobject.embedSWF("http://tonosamart.com/flashcast/copy2clip/copy2clip.swf",  this.id + "swf", "93", "14", "9.0.0", "http://tonosamart.com/flashcast/swfobject/expressInstall.swf", flashvars, params, attributes);  
  21.   
  22.    ++i;  
  23.   });  
  24.  }  
  25. });  

ブラウザ判定をして、IE以外だった場合は、「copy to clipboard」の文字をflashに置き換えています。
また、そのときにidを付加して、javascriptの呼び出しに使っています。

こういう、ページ内の特定のタグに対する一括処理はjQueryだと簡単に出来て便利ですね。

flashから呼ばれるjavascriptはこんな感じです。
view plainprint?
  1. function copy2clip_getData(param) {  
  2.  var text;  
  3.  text = dp.sh.Utils.FixForBlogger(document.getElementById(param).highlighter.originalCode).replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');  
  4.  //alert(param + ":" + text);  
  5.  if ($.browser.msie) {  
  6.   window.clipboardData.setData('text', text);  
  7.   return null;  
  8.  } else {  
  9.   return text;  
  10.  }  
  11. }  

highlighter.originalCodeにコピー元のコードが入っているのを探すのに苦労しましたが、特に問題なくできました。

これで、IE以外のブラウザでも、ソースのコピーができるようになりました！
続きを読む
by とのさま 0 コメント ラベル: , , ,

2008/10/22

flash+javascriptで、クリップボードにコピーする

このblogでは、ソースの表示にsyntaxhighlighter - Google Codeというのを使っているのですが、右上に「copy to clipboard」と書いてあるのをご存知でしょうか？

このリンクを押すと、ソースの内容をクリップボードにコピーするのですが、今日firefox3で試したら、きかなくなっていました。

がーん

理由を調べたら、どうもflash 10の仕様変更のようです。
参考：akihiro kamijo: Flash Player 10 のクリップボードに関連する変更

そもそも、このリンクどういう仕組みかというと、javascriptを呼んでいて
・IEだったら、clipboardData.setDataでコピー
・その他のブラウザだったら、flashを実行してコピー
という動作をしています。

なんでこんな面倒なことをしているかというと、IE以外のブラウザでは、javascriptでクリップボードにコピーできないからなんです。

・その他のブラウザだったら、flashを実行してコピー
という部分が、今回のflash player の仕様変更で使えなくなってしまったというわけ。

今回のflash player の仕様変更は、flash側で発生したclickイベント内では実行できるようなので、リンクをflashにかえて、flash内からjavascriptを呼ぶように改造すればうまくいきそうです。

と、いうわけでまずは、そんなflashを作ってみました。
copy2clip

実際のsyntaxhighlighterへの埋め込みはまた今度
by とのさま 0 コメント ラベル: ,

2008/10/01

Bloggerに「続きを読む」を追加してみた
Bloggerには、「続きを読む」がないんですね・・・
不便なので追加してみました。

サーバ側で制御して、クライアントにデータを送らないっていうのが理想だけど
それは無理っぽかったので、クライアントで「記事を途中から隠す」っていう感じにすることにしました。

jQueryで実装してみました。

まずは、記事ごとにidを振っておいて識別できるようにします。
view plainprint?
  1. <div class='post-body entry-content' expr:id='&quot;tonosamart_read_more_&quot; + data:post.id'>  


そのあとは、ちょっと長いですが
view plainprint?
  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
  2. <b:else/>  
  3.  <script type='text/javascript'>  
  4.   $(document).ready(function() {  
  5.    $(".entry-content").each(function(){  
  6.     if ($(this).height() &gt;= 550) {  
  7.      $(this).after("<a class='tonosamart-read-more-link' href='javascript:tonosamart_readMore(\"" + this.id + "\", " + $(this).height() + ", true);' id='tonosamart-read-more-link-on" + this.id + "'>続きを読む</a>");  
  8.      $(this).after("<a class='tonosamart-read-more-link' href='javascript:tonosamart_readMore(\"" + this.id + "\", " + $(this).height() + ", false);' id='tonosamart-read-more-link-off" + this.id + "'>詳細を隠す</a>");  
  9.      $(this).after("<div class='tonosamart-read-more-bg' id='tonosamart-read-more-bg" + this.id + "'/>");  
  10.      $("#tonosamart-read-more-link-off" + this.id).css("display", "none");  
  11.      $(this).css("overflow", "hidden");  
  12.      $(this).height(500);  
  13.     }  
  14.    });  
  15.   });  
  16.   
  17.   function tonosamart_readMore(id, height, isDisplay) {  
  18.    if (isDisplay) {  
  19.     $("#tonosamart-read-more-link-on" + id).css("display", "none");  
  20.     $("#tonosamart-read-more-link-off" + id).css("display", "inline");  
  21.     $("#tonosamart-read-more-bg" + id).css("display", "none");  
  22.     if (jQuery.browser.safari) {  
  23.      $("#" + id).height(height);  
  24.     } else {  
  25.      $("#" + id).animate({height:height}, 400);  
  26.     }  
  27.    } else {  
  28.     $("#tonosamart-read-more-link-on" + id).css("display", "inline");  
  29.     $("#tonosamart-read-more-link-off" + id).css("display", "none");  
  30.     $("#tonosamart-read-more-bg" + id).css("display", "block");  
  31.     var targetOffset = $('a[@name=' + id.substring('tonosamart_read_more_'.length, id.length) + ']').offset().top;  
  32.     if (jQuery.browser.safari) {  
  33.      $('html,body').animate({scrollTop:targetOffset}, 1,"swing" , function(){$("#" + id).height(500)});;  
  34.     } else {  
  35.      $('html,body').animate({scrollTop:targetOffset}, 1,"swing" , function(){$("#" + id).animate({height:"500"}, 400, "swing", function(){$(this).height(500)})});  
  36.     }  
  37.    }  
  38.   };  
  39.  </script>  
  40. </b:if>  

こんな感じで、「続きを読む」機能を追加してみました。

記事の高さが550px以上の場合は、高さを500pxにして記事の後半を隠しています。
そのときに、透過pngを重ねて、記事がフェードアウトするみたいにしてみました。

簡単にできた割には、わりと素敵にできたと思います。

いちいち、記事の前半と後半を分けて書かなくてもいいので、記事を書く方としても楽ですね。
続きを読む
by とのさま 0 コメント ラベル: ,
登録: 投稿 (Atom)