もじゃもじゃです。

現在は新サイトに移転しております。
flashcast：フリーで働くエンジニア集団のブログ
最新の記事につきましては、移転先にてご確認ください。

なお、Bloggerに関する記事については、カスタマイズなどの記事があることからこちらにも残すことにしました。

よろしくお願いします。

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

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

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

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

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

うっかりしてました。
みつけてくれたもじゃもじゃに感謝です。

flashcast：フリーで働くITエンジニア集団のブログ: flash+javascriptで、クリップボードにコピーする
の続きです。

こんな感じになりました。

   $(document).ready(function() {
    if (!$.browser.msie) {
     var i = 0;
     $(".dp-highlighter").each(function(){
      this.id = "tonosamartdp" + i;
      $(this).children(".bar").children(".tools").children("a:contains('copy to clipboard')").replaceWith("<span id='" + this.id + "swf'/>");

      var flashvars = {
       func:"copy2clip_getData",
       img:"http://tonosamart.com/flashcast/copy2clip/copy.swf",
       param:this.id
      };
      var params = {
       menu:"false",
       allowScriptAccess:"always"
      };
      var attributes = {
       id:this.id + "swf"
      };
      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);

      ++i;
     });
    }
   });

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

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

flashから呼ばれるjavascriptはこんな感じです。

function copy2clip_getData(param) {
 var text;
 text = dp.sh.Utils.FixForBlogger(document.getElementById(param).highlighter.originalCode).replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
 //alert(param + ":" + text);
 if ($.browser.msie) {
  window.clipboardData.setData('text', text);
  return null;
 } else {
  return text;
 }
}

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

これで、IE以外のブラウザでも、ソースのコピーができるようになりました！

この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への埋め込みはまた今度