「WordPressで学ぶPHP(4)通信編」を発売しました。
本書は、「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造編」「WordPressで学ぶPHP(3)関数編」の続編にあたり、Webブラウザとサーバー(PHP)との通信と、PHPから他のサーバーに通信することについて解説します。
Blog Parts Changer Light for メロ(Flashタブ対応版)
2005年12月3日 メロの世代交代等に対応させたMero Changerを公開しました。
2005年10月14日 「mayumayu's room お気楽Blog☆」で配布されている「ストラップ」の切り替えに対応したMero Changerをリリースしました。
2005年9月29日 スクリプト自動出力機能を搭載した「Mero Changer」をリリースしました。JavaScriptを手動で書き換える必要がなくなり、設置が簡単になりましたので、こちらをお使いください。
門松さんのBlog「雑・日記」で、Flashを利用したメロタブが配布されています。
そこで、「Blog Parts Changer Light for メロ」をFlashタブにも対応させました。
なお、先日公開した「アイテムリスト対応版」では、FirefoxやNetscapeなどでアイテムリストが表示されない不具合がありました。
それも合わせて修正しました。
導入の手順は以下の通りです。
1.サンプルコードのダウンロード
まず、以下のページに接続してください。
実際の動作例と、それに対応したサンプルコードが表示されます。
サンプルコードをすべてコピーして、メモ帳等に貼り付けてください。
2.メロのkeyの設定
手順1.のJavaScriptの中で、5行目の「var mero_id = new Array('・・・', '・・・', '・・・');」のそれぞれの「'・・・'」の部分を、ご自分のメロの「key」に書き換えてください。
keyは、元々のメロ貼り付けスクリプトを見れば分かります。
スクリプトの最後の方に「・・・?key=○○○"></script>」という部分がありますが、「○○○」の部分(32文字の英数字)をコピーします。
例えば、それぞれのメロのkeyが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」「c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3」の方の場合だと、以下のようにします。
var mero_id = new Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2', 'c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3');
また、メロを2種類だけ切り替える場合は、「, '3つ目のkey'」の部分を削除してください。
例えば、keyが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」の2つのメロを切り替え表示したい場合は、この行を以下のように書きます。
var mero_id = new Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2');
3.タブの差し替え(GIFやJPEGを使う場合)
メロのタブをGIFやJPEGの画像に変えたい場合は、コードの6行目と7行目を書き換えます。
・6行目「var mero_mouseout_img = new Array(・・・);」
・7行目「var mero_mouseover_img = new Array(・・・);」
6行目には、タブをマウスで指していないときの画像のURLを指定します。
また、7行目には、、タブをマウスで指しているときの画像のURLを指定します。
それぞれURLを入れるところが3つありますが、1つ目~3つ目のそれぞれのメロに対応しています。
4.タブの差し替え(Flashを使う場合)
メロのタブをFlashにしたい場合は、コードの9行目~13行目(以下参照)を書き換えます。
var mero_tab_html = new Array( '・・・', // 1つ目のFlash表示HTML '・・・', // 2つ目のFlash表示HTML '・・・' // 3つ目のFlash表示HTML );
門松さんのFlashを使う場合は、サンプルのコードの中にある「http://www.foo.com/bar/merotch3.swf」「http://www.foo.com/bar/mofutch2.swf」を、ご自分のFlashのアップロード先のURLに変えてください。
それ以外のFlashを使いたい場合は、各行の「・・・」の部分を、Flashを表示するためのHTMLに変えます。
その際、HTMLの途中に改行があるときは、改行をすべて削除してHTMLを1行につなげます。
また、HTMLの中に「'」の文字がある場合は、それを「\'」に変えます。
5.通常画像/Flashの設定
タブとして通常画像(GIFなど)/Flashのどちらを使うかを、コードの14行目で指定します。
・14行目「var mero_tab_ishtml = new Array(1, 1, 1);」
括弧の中に「1」が3つありますが、この設定ではタブとしてFlashが表示されます。
また、これらを「0」に変えると、タブとして通常画像が使われます。
メロごとに、通常画像とFlashを混在させることもできます。
例えば、「var mero_tab_ishtml = new Array(1, 0, 0);」にすると、1つ目のメロはタブがFlashになり、2つ目と3つ目は通常画像になります。
6.アイテムリストの設定
アイテムリストを表示する場合は、16行目~20行目を書き換えます。
var mero_itemlist = new Array( '・・・', // 1つ目のアイテムリストのコード '・・・', // 2つ目のアイテムリストのコード '・・・' // 3つ目のアイテムリストのコード );
「・・・」の部分に、アイテムリストを表示するためのコードを入れます。
コードの書き方は、門松さんのBlog「雑・日記」で解説されている通りです。
なお、アイテムリストを表示しない場合は、24行目の「var mero_use_itemlist = 1;」を「var mero_use_itemlist = 0;」に変えてください。
7.アイテムリストFlashのURLの設定
アイテムリストを表示する場合、そのFlashのURLも指定する必要があります。
25行目の「var mero_itemlistswf_url = 'http://www.foo.com/bar/itemList02.swf';」の文を書き換えて、URLを指定します。
「http:://~」の部分に、ご自分のFlashのアップロード先URLを入れます。
8.ランダム表示の設定
メロをランダムに表示させたい場合は、以下の2箇所を設定します。
・22行目「var mero_first_no = -1;」
ページを開いたときに、最初に表示するメロを指定します。
このまま変更しないと、ページを開くたびにメロがランダムに選ばれて表示されます。
ランダムではなく、常に1つ目のメロを表示する場合は、最後の「-1」を「0」に変えてください。
また、2つ目のメロなら「1」、3つ目のメロなら「2」に変えてください。
・23行目「var mero_interval = 30000;」
ページを開いている間にも、メロをランダムに切り替えて表示するかどうかを指定します。
このまま変更しないと、30秒ごとに切り替え表示します。
「30000」のところを変えると、切り替えの間隔が変わります(1000分の1秒単位です)。
例えば、1分(60秒)おきに切り替え表示するなら、ここを「60000」に変えます。
また、ここを「0」にすると、ページ表示中のランダム表示は行いません。
9.リンクの設定
コードの最後の方にある「<a href="#" onclick="show_mero_main(0); return false;">メロッチョ</a><br />」の行で、「メロッチョ」などの部分をご自分のメロの名前に変えてください。
10.コードの貼り付け
ご自分のBlogのテンプレートに、ここまでで設定したJavaScriptを貼り付けてください。
11.ランダム表示オン/オフ切り替えチェックボックスの貼り付け
ページ表示中にメロをランダム切り替え表示するようにすると、コメントの入力に支障が出ることがあります。
その場合は、ランダム表示のオン/オフを切り替えられるように、チェックボックスをつけておくことをお勧めします。
手順10.のコードの下のあたりに、以下のHTMLを追加してください。
<form name="bpcl_mero_random"> <p><input type="checkbox" checked name="random" onClick="if (document.bpcl_mero_random.random.checked) { mero_random_on(); } else { mero_random_off(); }" >ランダム表示</p> </form>
なお、Movable Typeなどのように、テンプレートを自由に編集できる場合は、チェックボックスを使わずに、コメント入力フォームのあるテンプレート(通常は個別アーカイブテンプレート)では、ランダム表示を無条件にオフにする方が良いでしょう。
対象のテンプレートを開き、手順6.のJavaScriptの後に、以下のJavaScriptを入れます。
<script language="javascript" type="text/javascript"> <!-- mero_random_off(); //--> </script>
12.クレジットバナーの貼り付け
「Blog Parts Changer Light for メロ」のクレジットバナーを作っていただきました。
ご自分のBlogに、クレジットバナーを貼り付けていただければ幸いです。
貼り付け方はこちらを参照してください。
13.注意事項
設置の際には以下の点にご注意ください。
・改行の自動変換をオフにする
レンタルBlogでは、「自由なHTMLを追加する」といった機能を使って設置することになります。
その際、「改行を自動的にbrタグに変換する」というような設定項目があったら、それはオフにしてください。
・Macをお使いの方
上記の2.の手順でJavaScriptをダウンロードする際には、Safariは使わないでください(文字化けが起こるため)。
FireFox等の他のWebブラウザをお使いください。