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(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');
//alert(param + ":" + text);
if ($.browser.msie) {
window.clipboardData.setData('text', text);
return null;
} else {
return text;
}
}
highlighter.originalCodeにコピー元のコードが入っているのを探すのに苦労しましたが、特に問題なくできました。
これで、IE以外のブラウザでも、ソースのコピーができるようになりました！
Bloggerには、「続きを読む」がないんですね・・・
不便なので追加してみました。
サーバ側で制御して、クライアントにデータを送らないっていうのが理想だけど
それは無理っぽかったので、クライアントで「記事を途中から隠す」っていう感じにすることにしました。
jQueryで実装してみました。
まずは、記事ごとにidを振っておいて識別できるようにします。
<div class='post-body entry-content' expr:id='"tonosamart_read_more_" + data:post.id'>
そのあとは、ちょっと長いですが
<b:if cond='data:blog.pageType == "item"'>
<b:else/>
<script type='text/javascript'>
$(document).ready(function() {
$(".entry-content").each(function(){
if ($(this).height() >= 550) {
$(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>");
$(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>");
$(this).after("<div class='tonosamart-read-more-bg' id='tonosamart-read-more-bg" + this.id + "'/>");
$("#tonosamart-read-more-link-off" + this.id).css("display", "none");
$(this).css("overflow", "hidden");
$(this).height(500);
}
});
});
function tonosamart_readMore(id, height, isDisplay) {
if (isDisplay) {
$("#tonosamart-read-more-link-on" + id).css("display", "none");
$("#tonosamart-read-more-link-off" + id).css("display", "inline");
$("#tonosamart-read-more-bg" + id).css("display", "none");
if (jQuery.browser.safari) {
$("#" + id).height(height);
} else {
$("#" + id).animate({height:height}, 400);
}
} else {
$("#tonosamart-read-more-link-on" + id).css("display", "inline");
$("#tonosamart-read-more-link-off" + id).css("display", "none");
$("#tonosamart-read-more-bg" + id).css("display", "block");
var targetOffset = $('a[@name=' + id.substring('tonosamart_read_more_'.length, id.length) + ']').offset().top;
if (jQuery.browser.safari) {
$('html,body').animate({scrollTop:targetOffset}, 1,"swing" , function(){$("#" + id).height(500)});;
} else {
$('html,body').animate({scrollTop:targetOffset}, 1,"swing" , function(){$("#" + id).animate({height:"500"}, 400, "swing", function(){$(this).height(500)})});
}
}
};
</script>
</b:if>
こんな感じで、「続きを読む」機能を追加してみました。
記事の高さが550px以上の場合は、高さを500pxにして記事の後半を隠しています。
そのときに、透過pngを重ねて、記事がフェードアウトするみたいにしてみました。
簡単にできた割には、わりと素敵にできたと思います。
いちいち、記事の前半と後半を分けて書かなくてもいいので、記事を書く方としても楽ですね。
－－－
2010/02/11追記
2010/02/11に、Haloscanのサービスが停止になりました。
本記事についても過去のものとなります。
－－－
Bloggerには、Trackbackの機能がありません。
というわけで、記事の最後にTrackback用のURLとかをつけてみました。
※事前に、Haloscanの設定が終わっていることが条件です。
<div class='post-footer-line post-footer-line-3'>
<script src='http://www.haloscan.com/load/flashcast' type='text/javascript'/>
<span class='post-comment-link'>
<a class='comment-link' expr:href='"http://www.haloscan.com/tb/flashcast/" + data:post.id + "/"' expr:onclick='"javascript:HaloScanTB(" + "\"" + data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCountTB('<data:post.id/>');</script>
</a>
</span>
<div class='tonosamart-trackback'>
<input expr:value='"http://haloscan.com/tb/flashcast/" + data:post.id + "/"' onfocus='javascript:this.select();' readonly='readonly' type='text'/>
</div>
<p class='tonosamart-trackback-comment'>※この記事へのトラックバック用 URL</p>
</div>
</div>
こんな感じで、実装できました。
URLの表示をinputタグにすることで、コピペしやすくしています。
みなさん、ぜひTrackbackをお願いしますね！
－－－
2010/02/11追記
2010/02/11に、Haloscanのサービスが停止になりました。
本記事についても過去のものとなります。
－－－
Bloggerには、Trackbackの機能がありません。
ですが、Haloscanという海外のコメントを管理するサービスを使用することで実装可能です。設定方法は、クリボウさんのBlogが非常に参考になります（私も参考にさせていただきました）。Trackbackの機能がないということは、他のブログにTrackback Pingを送る機能もありません。が、これもHaloscanよりTrackback Pingを送ることができます。
ここでは、Haloscanを利用して他のブログにTrackback Pingを送る方法を、備忘録として記載します。
※ HaloscanへのSignUp、BloggerへのTrackback機能の実装がされていることを前提にしています。
1.Haloscanにログインします。
Haloscanの管理コンソールより、「Username」、「Password」を入力し「Sign In」ボタンをクリックします。
2.Manage Trackbackタブをクリックします。
ログイン後、中タブコントロールから「Manage Trackback」（赤枠）を選択します。
3.Send a Trackback Pingタブをクリックします。
「Manage Trackback Ping」画面が表示されます。小タブコントロールから「Send a Trackback Ping」（赤枠）を選択します。
4.Trackbackする内容を入力します。
入力画面が表示されますのでTrackback Pingを送る内容を入力し、画面下部の「Send Pings」ボタンをクリックします。
画面上部に「Successfully sent ping」（赤枠）メッセージが表示されれば完了です。
5.Trackbackがカウントされていることを確認します。
今回は自分のブログにTrackback Pingを送ったので、Bloggerに戻って「Trackback」がカウントアップされていること（赤線部）を確認します。
「Trackback(1)」リンクをクリックすると、Haloscanサービスの画面がポップアップ表示されます。4.で入力した内容が表示されればTrackback Ping送信成功です。
以上が、HaloscanからTrackback Pingを送る手順になります。
