How to
use
mixwidget

tape
back
このページでは、“カセットテープ型”のFlash MP3 Playerである「mixwidget」の使い方を、
実際に管理人が使っている使用法を例に、簡単に説明しています。
mixwidget」を自分のウェブサイトやブログでも使ってみたい方は、ぜひ参考にして下さい。

必要なソフト/使っているソフト
最初に、管理人がウェブサイトを作成しているときに使っているソフトを紹介しておきます。
このページも、実際にサイト内でmixwidgetを使っているページも、基本的にはここで紹介しているソフトを使って作っています。

①テキストエディタ
さすがにWindows「メモ帳」を使っている人はいないとは思いますが、できないことはないです。
Word」は、HTML/XMLファイルの編集には向いていないと言われていますので、使わない方がいいでしょう。
有名なところでは「TeraPad」というのがありますが、この場合はテキストエディタなら何でも構いません。
TeraPad official site

②FTPソフト
作ったファイルをサーバーにアップロードするソフトです。
FFFTP」というフリーソフトが有名です。
FFFTP official site

③HTMLエディタ
ウェブサイトは、最低限テキストエディタとFTPソフトがあれば作れるのですが、デザインやレイアウトを工夫するためには、HTMLエディタがあると便利です。
フリーソフトの「AlphaEDIT」が使いやすくてお薦めです。
HTMLに慣れてくれば、テキストエディタだけで作れるようになります。
AlphaEDIT official site

④クリップボード拡張ソフト
クリップNOTE」というソフトが便利なのですが、これは特に必要なソフトではありません。
クリップNOTE official site


ダウンロード
オフィシャルサイトから、ファイルをダウンロードします。「download」をクリック。
mixwidget.org

※追記
オフィシャルサイトからダウンロードできなくなっているみたいです。
ダウンロード用に、簡易的なリンクを貼っておきます。   download

テープの画像ファイルは、こちらのサイトからダウンロードできます。http://www.tapedeck.org/index.php
必要であれば、「FlashPlayer」の最新版を入手しておきます。
flash
mixwidget-demo.zip」を展開(解凍)します。
必要なファイルは「mixwidget.swf」「config.xml」「playlist.xspf」の三つ。
一緒に収められているHTMLは、サンプルです。一応、全部覗いて見てください。
skins.zip」も展開します。
こちらは、カセットテープの画像ファイルがズラッと並んでいます。
以上で準備終了です。

MP3をアップロード
先に、この「mixwidget」で流したいMP3データの音源を、サーバーにアップロードしておきます。
FFFTPを使ってアップロード。
MP3データのURLは、あとでプレイリストを作るときに必要になります。

「playlist.xspf」ファイル
playlist.xspf」ファイルを開きます。
これは、mixwidgetで流すMP3のプレイリストの設定ファイルです。
xspfファイルは、テキストエディタで開きます。
ファイルを右クリック。
「プログラムで開く」⇒「メモ帳」か、「TeraPad」などの“自分の使っているテキストエディタ”を選択。
このときに、「プログラムの選択」をクリックして、「このファイルを開くときはいつも選択したプログラムを使う」と設定しておくこともできます。
必要な箇所を適宜書き換えていくことで、新しいファイルを作ります。
このファイルの<title><creator>は、実際にはどこにも表示されません。適当に書いて下さい。
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <title>××××</title>
  <creator>作者名</creator>

<trackList>

    <track>
     <location>http://....mp3</location>
      <title>曲のタイトル</title>
      <creator>アーティストの名前</creator>
      <album>曲が収録されているアルバム名</album>
      <duration>曲の長さ(msec)</duration>
   </track>

    <track>
      <location>http://....mp3</location>
      <title>曲のタイトル</title>
      <creator>アーティストの名前</creator>
      <album>曲が収録されているアルバム名</album>
      <duration>曲の長さ(msec)</duration>
   </track>

   <track>
      <location>http://....mp3</location>
      <title>曲のタイトル</title>
      <creator>アーティストの名前</creator>
      <album>曲が収録されているアルバム名</album>
      <duration>曲の長さ(msec)</duration>
    </track>

</trackList>
</playlist>
<location>は、先にアップロードしたMP3のURLです。
ここが一番大事です。
URLがひと文字でも間違っていると、mixwidgetは動きませんので、要注意。
<track>~</track>が、流す曲の、1曲分のデータです。
プレイリストですので、流したい曲の分を、すべて書き入れていきます。
10曲なら<track>~</track>を10回書く必要があります。
最後を必ず、</trackList></playlist>で締めるのを忘れないで下さい。
以上で「playlist.xspf」ファイルは終わり。

「config.xml」ファイル
config.xml」ファイルを開きます。これは、FlashPlayerの設定を決めるファイルです。
xmlファイルも、テキストエディタで開きます。
ファイルを右クリック。
「プログラムで開く」⇒「メモ帳」か、“自分の使っているテキストエディタ”を選択。
必要な箇所を適宜書き換えていくことで、新しいファイルを作ります。
赤色のところは、今回はいじりません。「skin」を使用しない場合の設定です。
<title><creator> は、自分の好きなように。
<?xml version="1.0" encoding="UTF-8"?>
<widget version="2.1" flashVersion="9.0.0">
  <title>××××</title>
<creator>作者名</creator>
  <skin imageEnabled="true">
    <shadow>0</shadow>
    <gloss>30</gloss>
    <outlines>20</outlines>
    <frameColor>CCCCCC</frameColor>
    <bodyColor>66CCFF</bodyColor>
    <gearboxColor>CCCCCC</gearboxColor>
    <gearColor>598B9F</gearColor>
    <threaderColor>CCCCCC</threaderColor>
    <text size="18" color="FFFFFF" bgAlpha="0" bgColor="FFFFFF" align="LEFT"></text>
    <trackText x= "26"y="21"width="260"></trackText>
    <artistText x= "28" y="38" width= "260"></artistText>   

  </skin>
</widget>
<trackText><artistText>は、それぞれ曲のタイトルと曲の作者名です。
この“x”と“y”の数字は、タイトルと作者名をどこの場所に表示させるかの設定です。ややこしいので、
最初はなにも変えず、このままにしておきます。
他の場所も、とりあえずこのままにしておきます。
以上で「config.xml」ファイルは終わり。

「skin」を決める
使うカセットテープの画像を決めます。
サンプルでは、オレンジ色のカセットの画像が入っています。とりあえずはこれで構いません。
skin.zip」の中には、大量のカセットテープの画像データが入っています。
この画像データファイルには、すべて(当然ですが)それぞれに名前が付いています。
これらの新しい画像を使う場合、データファイル名が「skin.jpg」になっていないと、mixwidgetとして表示されません。
新しい画像を使う場合、サンプルで収められている最初の「skin.jpg」を削除して、新しく使いたい画像
ファイルのデータファイル名を「skin.jpg」に書き換える必要があります。
この、データファイル名の書き換えを忘れないで下さい。
FFFTPの「名前を変えてアップロード」の機能を使うと、アップロードの直前に、ファイル名を「skin.jpg」に書き換えることが出来ます。慣れてきたら、こちらのやり方でもいいと思います。

アップロード
ファイルをいったん、サーバーにアップロードします。
mixwidget.swf」「playlist.xspf」「config.xml」「skin.jpg」の4つのファイルをアップロードします。
全部を同じディレクトリ(フォルダ)にアップロードして下さい。
この4個のファイルが、同じディレクトリに並んでいないと、mixwidgetは動きません。

HTMLファイル
mixwidgetは、FlashPlayerです。
FlashPlayerを実際に表示させることになる、HTMLファイルを作ります。
HTMLエディタで、自分の好きなファイルを作っても構いませんし、サンプルのHTMLファイルを書き換えて使っても構いません。
<embed width="430" height="330" type="application/x-shockwave-flash"
src="http://~/mixwidget.swf"wmode="transparent"></embed>
この部分が、実際にmixwidgetが表示される部分です。
http://~/mixwidget.swf」は、アップロードした「mixwidget.swf」のURLです。
先にアップロードしておいた「mixwidget.swf」のURLに書き換えて下さい。
自分でHTMLファイルを作る場合は、この<embed>~</embed>さえ正確に書き込んであれば、あとは自由に作って構いません。
作ったHTMLファイルを、FFFTPでアップロードします。
以上で完成です。
アップロードしたHTMLファイルのURLへ飛んでみて下さい。
バカでかいカセットテープが表示されているハズです。
一応“こんな感じ”ということで、実際に使ってるページを。
http://katsuontheweb.studio-web.net/loyaltyfor/groove.html
参考にして下さい。