2006年12月29日
BlogPet更新ボタンを簡単に設置しましょう。
06/12/28のBlogPetのリニューアルで、楽しくて便利な機能が追加されましたね。それにあわせて、便利な機能のうち、「お気に入りの登録」ができないため、右サイドのBlogPetの更新ボタンをJavaScript化しました。そして、簡単に貼付けできるようにしました。
変更に至った詳しい経緯については、追記に書かせていただきました。興味のある方はそちらもご覧ください。m(_ _)m
06/12/30 16：00追記
この記事の更新ボタンはあくまで記事全体を更新することなく、BlogPetだけを更新するためのものです。この更新ボタンでBlogPetの背景の表示を切り替えするには、CGIによるランダム表示が設定されていることが前提となっています。ランダム背景表示の設定方法はコチラ↓
CGIを使ってBlogPetの背景をランダムに変更する！（isweb編）
この更新ボタンの変更は、のんびり前進じたばた生活のまゆびさんの記事緊急 BlogPet更新ボタンJavaScriptバージョン リニューアルにより変更!!を参考にさせていただきました。まゆびさんいつも本当にありがとーございまっす♪ m(_ _)m
- 更新ボタン用の画像を用意してください。1キロバイトの素材屋さんから、
をダウンロードさせていただきました。この素材はGIF形式です
そして、画像を自分のブログにアップロードして、画像URL、幅(width)、高さ(height)を控えておきます。なお、widthとheightは、パソコンに保存している画像にマウスカーソルをあてると『大きさ ☆×△』と表示されます。☆がwidthで△がheightですよ。 - 下のソースコードのこの色の部分を変更して、BlogPetを設置したい場所に貼り付ければOKです。変更点は以下の５点です。
- 画像URL
- 画像の幅
- 画像の高さ
- ←これは見本です。ご自分でここの文章を変更してください。
- 自分のペットのID
自分のペットのIDは、『オーナープロフィール』ボタンをクリックして表示されるページのURLのidのことです。http://www.blogpet.net/profile.php?id=自分のペットのIDまた、BlogPetをセンタリングさせたい人はこの色の部分(最初と最後の２箇所あります。)も含めて貼り付けてくださいね♪なお、このコードは、申し訳ありませんが、1つのブログに1つしか設置できないようになっています。無料会員用
<div style="text-align:center;margin-left:auto; margin-right:auto; width:130px;"><table summary="クリックするとBlogPetが更新されます。"><tr><td style="vertical-align:middle;"><a href="javascript:select_pet(0);"><img src="画像URL" alt="クリック" width="画像の幅" height="画像の高さ" style="border-style:none;" /></a></td><td style="vertical-align:middle;"><span style="font-size:10px;">←これは見本です。ご自分でここの文章を変更してください。</span></td></tr></table>
<table summary="BlogPetのスクリプトです。" cellspacing="0" cellpadding="0" style="width:130px; height:320px; border-style:none;"><tr><td id="blogpet"><script type="text/javascript">
<!--
// blogpet
var idarray = new Array("自分のペットのID");
var interval = 0;
var id, num, oldnum, timer_id;
oldnum = -1;
random_pet();
if (interval > 0) {
timer_id = setInterval('random_pet()', interval);
}
function random_pet()
{
do {
num = Math.floor(Math.random() * idarray.length);
} while (num == oldnum)
oldnum = num;
show_pet();
}
function select_pet(pet_no)
{
num = pet_no;
if (interval > 0) {
clearInterval(timer_id);
timer_id = setInterval('random_pet()', interval);
}
show_pet();
}
function show_pet()
{
var today=new Date();
var tseconds=today.getSeconds();
var id = idarray[num];
pethtml = "<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='320' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usan.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /><embed src='http://www.blogpet.net/usan.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='320' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /></object>\n";
pethtml += "<img src='http://www.blogpet.net/add_log.php?username="+id+"&url="+document.URL+"&referrer="+document.referrer+"'>";
document.getElementById('blogpet').innerHTML = pethtml;
}
--></script></td></tr></table></div>POC用
<div style="text-align:center;margin-left:auto; margin-right:auto; width:130px;"><table summary="クリックするとBlogPetが更新されます。"><tr><td style="vertical-align:middle;"><a href="javascript:select_pet(0);"><img src="画像URL" alt="クリック" width="画像の幅" height="画像の高さ" style="border-style:none;" /></a></td><td style="vertical-align:middle;"><span style="font-size:10px;">←これは見本です。ご自分でここの文章を変更してください。</span></td></tr></table>
<table summary="BlogPetのスクリプトです。" cellspacing="0" cellpadding="0" style="width:130px; height:220px; border-style:none;"><tr><td id="blogpet"><script type="text/javascript">
<!--
// blogpet
var idarray = new Array("自分のペットのID");
var interval = 0;
var id, num, oldnum, timer_id;
oldnum = -1;
random_pet();
if (interval > 0) {
timer_id = setInterval('random_pet()', interval);
}
function random_pet()
{
do {
num = Math.floor(Math.random() * idarray.length);
} while (num == oldnum)
oldnum = num;
show_pet();
}
function select_pet(pet_no)
{
num = pet_no;
if (interval > 0) {
clearInterval(timer_id);
timer_id = setInterval('random_pet()', interval);
}
show_pet();
}
function show_pet()
{
var today=new Date();
var tseconds=today.getSeconds();
var id = idarray[num];
pethtml = "<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='220' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usap.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /><embed src='http://www.blogpet.net/usap.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='220' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /></object>\n";
pethtml += "<img src='http://www.blogpet.net/add_log.php?username="+id+"&url="+document.URL+"&referrer="+document.referrer+"'>";
document.getElementById('blogpet').innerHTML = pethtml;
}
--></script></td></tr></table></div>
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、自己責任で行ってください。このコードによって起こったいかなる損害に対してもyozoには責任は無いものとさせていただきます。
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
BlogPet背景変更ボタンの作成と留守番背景の設置にありますように、更新ボタンは、iframeタグを使用して、別のホームページ上に設置したBlogPetを、ここのブログに表示させていたのですが、この仕様だと、06/12/28のBlogPetのリニューアルによって、不具合が発生することがわかりました。リニューアルによって、追加された機能の一つに、「お気に入りの登録・閲覧」というボタンがあります。閲覧するには全く問題ないのですが、「お気に入りの登録」をすると、表示されているここのブログの記事でなく、iframeの呼び込み先が登録されてしまうという問題が起こるようになりました。このままだと、BlogPetがせっかく用意してくれた便利な機能がムダになりますし、何よりもそのことを知らずに「お気に入りの登録」をしてくださった方に迷惑をかけてしまうことになりかねませんので、iframeタグ仕様の更新ボタンをJavaScript仕様に変更することにさせていただきました。
なお、ここのBlogPetのJavaScriptは外部ファイル化しておりますが、この記事では、外部ファイル化はしておりません。外部ファイルでの更新ボタン設置をご希望の方は、のんびり前進じたばた生活のまゆびさんの記事緊急 BlogPet更新ボタンJavaScriptバージョン リニューアルにより変更!!を参考にしてください。
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New 2006年ありがとう | Top | BlogPet「うさも」の背景紹介 お正月＆冬背景 Old≫
トラックバックURL
トラックバック
≫ 緊急 BlogPet更新ボタンJavaScriptバージョン リニューアルにより変更!! from のんびり前進じたばた生活
本日BlogPetが大きくリニューアルしましたね♪面白い機能もついて楽しそうなのですが、(詳しくは「BlogPetがより使いやすくリニューアルしました」をご覧ください。)先日「BlogPet更新ボタン JavaScriptバージョン(留 [Read More]
トラックバック
≫ 背景更新ボタンの設置 from yolipの学舎
06/12/29 23：00追記 06/12/28のBlogPetのリニューアルによって追加された機能の一部が、iframeタグを使った更新ボタンを使用した場合に不具合を起こすことがわかりました。そのため、新しく更新ボタンの設定し直ししてあります。ここのBlogPetには、サーバースペースにJav [Read More]
コメント
もぅどうしたら良いかと 昨夜から((ﾟﾟддﾟﾟ ))ｱﾜﾜﾜ!! ((ﾟﾟддﾟﾟ ))ｱﾜﾜﾜ!!
まゆびさんの所でコピペさせて頂いたはいぃけど、ＩＤいれ忘れて
真っ黒になってアップロードしたファイル削除したり、留守番背景がズレて
半べそになったり･･･付っきりでしたヽ(´Д` ;;)ﾉ おぼっさまとの同居も諦めて･･･同居とお着替えの組み合わせが見つからないんです(T∀T)ｳﾙｳﾙ
なので急遽 うららが書くブログを紹介できるようにと調整を急いでみたり･･･
（おぼっさまが留守番してまっす）
さすがｙｏｚｏさん、冷静に対処なさっているのですね(ﾟ▽ﾟ*)♪
なにかあったら掲示板に縋りまっす♪宜しくお願いしまっすm(_ _"m)
Posted by ウッキ at 2006.12.29 22:30 | edit
コメント
とてもわかりやすい記事ですね。ととろはまるっとまゆびさまの更新ボタンを使わせていただいてるので、該当エントリをそのままコピペさせてもらいました。
それにしても無料会員さん、CMが大きくなってフレームから外れたので、はみだし背景が楽しめるようになりましたね！
なんといってもととろはこれが今回一番うれしいかも。これで背景作家様はPOCバージョンで作成されるんじゃないでしょうか？
Posted by ととろ at 2006.12.29 22:55 | edit
コメント
トラバいただいていたのに来るのが遅くなってしまって
申し訳ありません。ペコリ(o_ _)ｏ))
とっても分かりやすい記事ですね♪
うちの記事は外部ファイルなのでこちらの方が初心者の方には
設置しやすいなぁと思います。さすがです♪(o^-')b グッ!
素敵な記事をありがとうございました。
Posted by まゆび at 2006.12.30 15:09 | edit
コメント
＞もぅどうしたら良いかと 昨夜から((ﾟﾟддﾟﾟ ))ｱﾜﾜﾜ!! ((ﾟﾟддﾟﾟ ))ｱﾜﾜﾜ!!
そうだったのですか♪BlogPetのチェンジャーを使っているみなさんは、表示されなくなりますもんね。大変だったのですね。この記事では、複数のBlogPetの切替はできませんが、『KOROPPYの本棚』様の記事でとっても簡単に切替ボタンが作成できるソースが公開されていましたよ。お時間あるときにでも、覗いてみてくださいね。(^○^)
http://koroppy.cocolog-nifty.com/blog/2006/12/post_b643.html
＞さすがｙｏｚｏさん、冷静に対処なさっているのですね(ﾟ▽ﾟ*)♪
いえいえ♪06/12/28のリニューアル以来、パニックですよ。iframeの調節をし直したものの、お気に入り登録ができなくなりましたからね。それからは、JavaScripｔを色々と試しましたよ。(＞▽＜;; ｱｾｱｾ でも、こっしょり、ひみつの日記にハマるyozoでっすヾ(￣o￣;)ｵｲｵｲ
Posted by ウッキさんへ at 2006.12.30 15:31 | edit
コメント
＞流石yozoさまです。とてもわかりやすい記事ですね。
わぁ♪そう仰っていただけると、とってもうれしいでっす。m(_ _)m
＞ととろはまるっとまゆびさまの更新ボタンを使わせていただいてる
XHTML準拠を推奨していますから、yozoも外部ファイル参照タイプにしてます。それでも、折角、CGIのランダム表示はできているのに、更新ボタンを設置できない方もいらっしゃるようなので、とりあえず、コピペタイプのJavaScriptのコードにしてみました。v(*'-^*)ｂぶいっ♪
＞無料会員さん、CMが大きくなってフレームから外れたので、
＞はみだし背景が楽しめるようになりましたね！
えっ？フレームから外れたのですか？おお！それは知らなかったでっす。ヽ(^◇^*)/ ﾜｰｲ
それでも大きくなったCMの方についつい目がいってしまうような気が・・・でも、それ以外は、メニューは全部楽しませていただいていますから、ＯＫとしてまっす。特に「ひみつの日記」がお気に入りのyozoでっす。もちろん、他所のBlogPetの日記もこっしょり・・・
ｳｹｹ~ψ(◇´*)ψ(｀∇´)ψ(ψﾟρﾟ)ψｳｹｹ
Posted by ととろさんへ at 2006.12.30 15:47 | edit
コメント
＞トラバいただいていたのに来るのが遅くなってしまって申し訳ありません。ペコリ(o_ _)ｏ))
いえいえ♪年の瀬の忙しい時期ですからね。お互い様でっす。それよりも、yozoの方こそ、まゆびさんのJSコードのおかげで、サクッと更新ボタンをリニューアルできましたよ。m(_ _)m
＞うちの記事は外部ファイルなのでこちらの方が初心者の方には
＞設置しやすいなぁと思います。さすがです♪(o^-')b グッ!
どうしてもXHTML準拠を考えると、外部ファイル化が妥当ですよね。ただ、折角ランダム背景表示はできているのに、ファイルのアップロード先の無い人は更新ボタンは設置できませんからね。今回のリニューアルでiframeが使えないのなら、ブログに直接書き込むJSコードもありかなって思って、敢えて簡単版を紹介したのですよ。(*^-^)
追伸：トラバ返してくださって、ありがとーございまっす♪m(_ _)m
Posted by まゆびさんへ at 2006.12.30 16:46 | edit
コメント
追伸：勝手ながらトラバ入れさせていただきました。m(_ _)m
Posted by yolip at 2006.12.31 00:58 | edit
コメント
おぉぉ・・・新しいボタンの説明ですね。
こういったわかりやすい記事がyozoさんのところには沢山集積されているので
昨日もかじりつくように読みふけってはCGIと戦っておりましたよ（笑
スパム対策のほうもあわせてやっていたので
どこかミスが出たんだと思います(´；ω；`)ｳｩ･･･
っと・・・余談ですねww
これからも沢山参考にさせていただくことがあると思いますので
今後ともお世話になりますです(´･ω･)(´-ω-)(´_ _)ﾍﾟｺﾘ
来年もyozoさんにとっていい年でありますように！
Posted by モンビッケ at 2006.12.31 02:11 | edit
コメント
yolipさんも外部JSファイルにされたのですね。仰るとおり、折角のサーバーサイドでの設置で閲覧PCの負荷を減らす対策だったのですが、「お気に入りの登録」がでサーバーのHTMLを登録されてしまうことになってしまうとは・・・まさしく想定外でしたね。(ﾉ_-;)ハア…
yozoもyolipさんと同様にまゆびさんと同じように、外部JSファイルでの設定にしています。外部JSファイルはサーバースペースをお持ちでない方には、無理な場合が多いので、手軽にブログのフリースペースにコピペできるようにしてみましたよ♪(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
追伸：トラバありがとーございまっす♪yozoのほうからも
お返しトラバ入れさせていただきました。m(_ _)m
Posted by yolipさんへ at 2006.12.31 10:28 | edit
コメント
＞おぉぉ・・・新しいボタンの説明ですね。
CGIのランダム表示はできているのに、更新ボタンを設置されていない方も手軽に設置できるようになると思います。あくまで、CGIの設定がメインですからね。それとモンビッケさんはじめ、背景作家のみなさんの素敵な背景あってのことでっす。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞昨日もかじりつくように読みふけってはCGIと戦っておりましたよ（笑
わぁ♪やっぱり格闘されていましたか♪CLEVERだけなら、たぶん投稿テストはＯＫなんですよね。IPスパムフィルターのテストもＯＫなら、まさしくささいな見落しかと・・・はっきり断定はできませんが・・・(^-^;
yozoもよくミスをしますが、エラーが出たら、あれこれと思いつくことをやってもデバッグできないとき、思い切って一からやり直しをするようにしています。エラーの原因はバグが解消されてからしか、判明しないことが多いからです。気分を替えて、はじめから、一つずつ、テストして進めるのが結局最短ルートとなることが多いようですよ。モンビッケさんに今更、こんなことは釈迦に説法なんですけど。(;^_^A ｱｾｱｾ･･･
＞来年もyozoさんにとっていい年でありますように！
ありがとーございまっす♪モンビッケさんもくれぐれも無理だけはせぬようにしてくださいね。オーロラ見られるといいですね。新年、気持ちよく再会できることを、楽しみにしておきまっす。
本年は大変お世話になりました。ありがとーございまっす♪m(_ _)m
モンビッケさんにとりまして、新年が幸多き年となりますように。
Posted by モンビッケさんへ at 2006.12.31 10:41 | edit