MeroBar Changer（暫定版）

先日のエントリーで書いたように、メロメロパークの新パーツの「メロバー」がリリースされました。
Webブラウザの最下部にメロのバーが表示されるものです。

複数のメロを飼っている方のために、このメロバーを切り替えて表示できるJavaScriptを作ってみました。
動作のサンプルはこちらのページにあります。
その使い方を紹介します。

ただ、とりあえず動くというレベルで、Mero Changerのような設定画面はなく、手作業でコードを書き換える必要があります。

1.メロバーを表示できる状態にする

まず、メロバーのコードをご自分のブログに貼り付けて、メロバーを表示できる状態にしておいてください。

2.JavaScriptのコピー

以下のページに接続して、表示されるJavaScriptのコードをすべてコピーし、メモ帳等に貼り付けます。

MeroBar Changerのコード

3.JavaScriptの書き換え

2.のJavaScriptのうち、以下の3箇所（コードのページで赤字になっている箇所）を書き換えます。

・メロのキーを指定する
まず、「var user_keys = Array('1つ目のメロのキー', '2つ目のメロのキー', '3つ目のメロのキー');」の行で、「1つ目のメロのキー」などの箇所を、ご自分のメロの「キー」に変えます。

「キー」とは、メロを識別するための32文字のコードです。
メロやメロバーをブログに表示する際に、そのコードをブログに貼り付けますが、そのコードの中の「key=○○○○」の「○○○○」部分（32文字の英数字の並び）がメロのキーです。

例えば、メロを2種類飼っていて、それぞれのキーが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」と「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」とすると、この行を以下のように書き換えます。

var user_keys = Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2');

なお、上の例はメロが2種類の時ですが、それ以上の場合も、個々のメロのキーを「'」で囲み、キーの間を「,」で区切ります。

・最初に表示するメロを指定する
「var first_mero = 0;」の最後にある「0」で、最初に表示するメロを指定します。
｢0」で変えない場合、「var user_keys = Array(・・・);」で指定した中の1番目のメロが表示されます。
また、「var first_mero = 1;」とすると、「var user_keys = Array(・・・);」で指定した中の2番目のメロが表示されます。
同様に、「var first_mero = 2;」だと3番目、「var first_mero = 3;」だと4番目・・・というように表示されます。
さらに、「var first_mero = -1;」にすると、ページに接続するたびに、ランダムにメロが選ばれます。

・メロバーの表示状態を指定する
「var first_show = 1;」の行を「var first_show = 0;」に変えると、メロバーが折りたたまれた状態で表示されます。

4.JavaScriptを貼り付ける

ご自分のブログに、3.で作ったJavaScriptのコードを貼り付けます。
メロバーのコードの後に貼り付けてください。

5.メロバー切り替えリンクを貼り付ける

4.のJavaScriptの後に、メロバーを切り替えるためのリンクを貼り付けます。
以下のようなタグを入れます。

<p>
<span style="color : blue; text-decoration : underline; cursor : pointer;" onclick="changeMeroBar(0)">1つ目のメロの名前</span><br />
<span style="color : blue; text-decoration : underline; cursor : pointer;" onclick="changeMeroBar(1)">2つ目のメロの名前</span><br />
<span style="color : blue; text-decoration : underline; cursor : pointer;" onclick="changeMeroBar(2)">3つ目のメロの名前</span><br />
</p>

メロの数がさらに多い場合は、<span・・・>～</span>の行を増やします。
そして、「onclick="changeMeroBar(○")」の「○」で、切り替え先のメロの番号を指定します。

お知らせ