--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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. 更新ボタン用の画像を用意してください。1キロバイトの素材屋さんから、クリックをダウンロードさせていただきました。この素材はGIF形式です
    そして、画像を自分のブログにアップロードして、画像URL、幅(width)、高さ(height)を控えておきます。なお、widthとheightは、パソコンに保存している画像にマウスカーソルをあてると『大きさ ☆×△』と表示されます。☆がwidthで△がheightですよ。
  2. 下のソースコードのこの色の部分を変更して、BlogPetを設置したい場所に貼り付ければOKです。変更点は以下の5点です。
    1. 画像URL
    2. 画像の幅
    3. 画像の高さ
    4. ←これは見本です。ご自分でここの文章を変更してください。
    5. 自分のペットのID

    自分のペットのIDは、『オーナープロフィール』ボタンをクリックして表示されるページのURLのidのことです。
     http://www.blogpet.net/profile.php?id=自分のペットのID
     また、BlogPetをセンタリングさせたい人はこの色の部分(最初と最後の2箇所あります。)も含めて貼り付けてくださいね♪なお、このコードは、申し訳ありませんが、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>
    ";
    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>
    ";
    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が実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、自己責任で行ってください。このコードによって起こったいかなる損害に対してもyozoには責任は無いものとさせていただきます。
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

 BlogPet背景変更ボタンの作成と留守番背景の設置にありますように、更新ボタンは、iframeタグを使用して、別のホームページ上に設置したBlogPetを、ここのブログに表示させていたのですが、この仕様だと、06/12/28のBlogPetのリニューアルによって、不具合が発生することがわかりました。リニューアルによって、追加された機能の一つに、「お気に入りの登録・閲覧」というボタンがあります。閲覧するには全く問題ないのですが、「お気に入りの登録」をすると、表示されているここのブログの記事でなく、iframeの呼び込み先が登録されてしまうという問題が起こるようになりました。このままだと、BlogPetがせっかく用意してくれた便利な機能がムダになりますし、何よりもそのことを知らずに「お気に入りの登録」をしてくださった方に迷惑をかけてしまうことになりかねませんので、iframeタグ仕様の更新ボタンをJavaScript仕様に変更することにさせていただきました。

 なお、ここのBlogPetのJavaScriptは外部ファイル化しておりますが、この記事では、外部ファイル化はしておりません。外部ファイルでの更新ボタン設置をご希望の方は、のんびり前進じたばた生活まゆびさんの記事緊急 BlogPet更新ボタンJavaScriptバージョン リニューアルにより変更!!を参考にしてください。


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:ブログペット:ブログ

メイン

≪New 2006年ありがとう | Top | BlogPet「うさも」の背景紹介 お正月&冬背景 Old≫

トラックバックURL


コメント

yozoさん( ^-^)ノ(* ^-^)ノこんばんわぁ♪
もぅどうしたら良いかと 昨夜から((゚゚дд゚゚ ))アワワワ!! ((゚゚дд゚゚ ))アワワワ!!
まゆびさんの所でコピペさせて頂いたはいぃけど、IDいれ忘れて
真っ黒になってアップロードしたファイル削除したり、留守番背景がズレて
半べそになったり・・・付っきりでしたヽ(´Д` ;;)ノ おぼっさまとの同居も諦めて・・・同居とお着替えの組み合わせが見つからないんです(T∀T)ウルウル
なので急遽 うららが書くブログを紹介できるようにと調整を急いでみたり・・・
(おぼっさまが留守番してまっす)
さすがyozoさん、冷静に対処なさっているのですね(゚▽゚*)♪
なにかあったら掲示板に縋りまっす♪宜しくお願いしまっすm(_ _"m)

コメント

流石yozoさまです。
とてもわかりやすい記事ですね。ととろはまるっとまゆびさまの更新ボタンを使わせていただいてるので、該当エントリをそのままコピペさせてもらいました。
それにしても無料会員さん、CMが大きくなってフレームから外れたので、はみだし背景が楽しめるようになりましたね!
なんといってもととろはこれが今回一番うれしいかも。これで背景作家様はPOCバージョンで作成されるんじゃないでしょうか?

コメント

yozoさん、こんにちは♪ヾ(=^▽^=)ノ
トラバいただいていたのに来るのが遅くなってしまって
申し訳ありません。ペコリ(o_ _)o))
とっても分かりやすい記事ですね♪
うちの記事は外部ファイルなのでこちらの方が初心者の方には
設置しやすいなぁと思います。さすがです♪(o^-')b グッ!
素敵な記事をありがとうございました。

コメント

>ウッキさん、こんにちはー♪

>もぅどうしたら良いかと 昨夜から((゚゚дд゚゚ ))アワワワ!! ((゚゚дд゚゚ ))アワワワ!!
そうだったのですか♪BlogPetのチェンジャーを使っているみなさんは、表示されなくなりますもんね。大変だったのですね。この記事では、複数のBlogPetの切替はできませんが、『KOROPPYの本棚』様の記事でとっても簡単に切替ボタンが作成できるソースが公開されていましたよ。お時間あるときにでも、覗いてみてくださいね。(^○^)
http://koroppy.cocolog-nifty.com/blog/2006/12/post_b643.html

>さすがyozoさん、冷静に対処なさっているのですね(゚▽゚*)♪
いえいえ♪06/12/28のリニューアル以来、パニックですよ。iframeの調節をし直したものの、お気に入り登録ができなくなりましたからね。それからは、JavaScriptを色々と試しましたよ。(>▽<;; アセアセ でも、こっしょり、ひみつの日記にハマるyozoでっすヾ( ̄o ̄;)オイオイ

コメント

>ととろさん、こんにちはー♪

>流石yozoさまです。とてもわかりやすい記事ですね。
わぁ♪そう仰っていただけると、とってもうれしいでっす。m(_ _)m

>ととろはまるっとまゆびさまの更新ボタンを使わせていただいてる
XHTML準拠を推奨していますから、yozoも外部ファイル参照タイプにしてます。それでも、折角、CGIのランダム表示はできているのに、更新ボタンを設置できない方もいらっしゃるようなので、とりあえず、コピペタイプのJavaScriptのコードにしてみました。v(*'-^*)bぶいっ♪

>無料会員さん、CMが大きくなってフレームから外れたので、
>はみだし背景が楽しめるようになりましたね!
えっ?フレームから外れたのですか?おお!それは知らなかったでっす。ヽ(^◇^*)/ ワーイ
それでも大きくなったCMの方についつい目がいってしまうような気が・・・でも、それ以外は、メニューは全部楽しませていただいていますから、OKとしてまっす。特に「ひみつの日記」がお気に入りのyozoでっす。もちろん、他所のBlogPetの日記もこっしょり・・・
ウケケ~ψ(◇´*)ψ(`∇´)ψ(ψ゚ρ゚)ψウケケ

コメント

>まゆびさん、こんにちはー♪

>トラバいただいていたのに来るのが遅くなってしまって申し訳ありません。ペコリ(o_ _)o))
いえいえ♪年の瀬の忙しい時期ですからね。お互い様でっす。それよりも、yozoの方こそ、まゆびさんのJSコードのおかげで、サクッと更新ボタンをリニューアルできましたよ。m(_ _)m

>うちの記事は外部ファイルなのでこちらの方が初心者の方には
>設置しやすいなぁと思います。さすがです♪(o^-')b グッ!
どうしてもXHTML準拠を考えると、外部ファイル化が妥当ですよね。ただ、折角ランダム背景表示はできているのに、ファイルのアップロード先の無い人は更新ボタンは設置できませんからね。今回のリニューアルでiframeが使えないのなら、ブログに直接書き込むJSコードもありかなって思って、敢えて簡単版を紹介したのですよ。(*^-^)

追伸:トラバ返してくださって、ありがとーございまっす♪m(_ _)m

コメント

yozoさん、こんばんは。うちも、まゆびさんの記事を参考にして、外部JSファイル版に修正しました。「お気に入りの登録」ができなくなるとは想定外でしたね。それとこのコピペ版はとてもわかりやすいですね。CGIのランダム背景表示さえ完成していれば、文字通りのコピペでOKですもんね。さすがですね。(^○^)

追伸:勝手ながらトラバ入れさせていただきました。m(_ _)m

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
おぉぉ・・・新しいボタンの説明ですね。
こういったわかりやすい記事がyozoさんのところには沢山集積されているので
昨日もかじりつくように読みふけってはCGIと戦っておりましたよ(笑
スパム対策のほうもあわせてやっていたので
どこかミスが出たんだと思います(´;ω;`)ウゥ・・・
っと・・・余談ですねww

これからも沢山参考にさせていただくことがあると思いますので
今後ともお世話になりますです(´・ω・)(´-ω-)(´_ _)ペコリ
来年もyozoさんにとっていい年でありますように!

コメント

>yolipさん、おはよーございまっす♪

yolipさんも外部JSファイルにされたのですね。仰るとおり、折角のサーバーサイドでの設置で閲覧PCの負荷を減らす対策だったのですが、「お気に入りの登録」がでサーバーのHTMLを登録されてしまうことになってしまうとは・・・まさしく想定外でしたね。(ノ_-;)ハア…
yozoもyolipさんと同様にまゆびさんと同じように、外部JSファイルでの設定にしています。外部JSファイルはサーバースペースをお持ちでない方には、無理な場合が多いので、手軽にブログのフリースペースにコピペできるようにしてみましたよ♪(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

追伸:トラバありがとーございまっす♪yozoのほうからも
お返しトラバ入れさせていただきました。m(_ _)m

コメント

>モンビッケさん、おはよーございまっす♪

>おぉぉ・・・新しいボタンの説明ですね。
CGIのランダム表示はできているのに、更新ボタンを設置されていない方も手軽に設置できるようになると思います。あくまで、CGIの設定がメインですからね。それとモンビッケさんはじめ、背景作家のみなさんの素敵な背景あってのことでっす。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>昨日もかじりつくように読みふけってはCGIと戦っておりましたよ(笑
わぁ♪やっぱり格闘されていましたか♪CLEVERだけなら、たぶん投稿テストはOKなんですよね。IPスパムフィルターのテストもOKなら、まさしくささいな見落しかと・・・はっきり断定はできませんが・・・(^-^;
yozoもよくミスをしますが、エラーが出たら、あれこれと思いつくことをやってもデバッグできないとき、思い切って一からやり直しをするようにしています。エラーの原因はバグが解消されてからしか、判明しないことが多いからです。気分を替えて、はじめから、一つずつ、テストして進めるのが結局最短ルートとなることが多いようですよ。モンビッケさんに今更、こんなことは釈迦に説法なんですけど。(;^_^A アセアセ・・・

>来年もyozoさんにとっていい年でありますように!
ありがとーございまっす♪モンビッケさんもくれぐれも無理だけはせぬようにしてくださいね。オーロラ見られるといいですね。新年、気持ちよく再会できることを、楽しみにしておきまっす。
本年は大変お世話になりました。ありがとーございまっす♪m(_ _)m
モンビッケさんにとりまして、新年が幸多き年となりますように。

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。