わいずふぁくとりいのショールーム

　このブログでは、「わいずふぁくとりいのファクトリー」での成果を元に、ブログやウェブで、できるだけ簡単に音楽を公開できる方法を、まとめていこうと思います。
　「わいずふぁくとりいのファクトリー」が雑然としてきたので、こちらに、できるだけ分かりやすく整理していこうかと思っていますが、どこまで出来るでしょうか・・。
　ブログやウエブで音楽を公開しようとされる方の、少しでも手助けになればと思います。

(2006.10.21)
　「http://ysfactory.up.seesaa.net/script/yf-wmp-wnd.js」を、バージョン２に更新しました。

(2006.10.14)
　「ポップアップ連続再生(WMP)バージョン２」を作成しました。

(2006.10.08)
　使い方を、バージョン２に対応しました。

(2006.05.02)
　再生、ダウンロード用の画像（ポップアップ連続再生(WMP)見本�B参照）が、「ダインロード」になっていたのを修正しました。

過去の履歴

　このカテゴリーでは、文字やボタンなどを押すと、別ウインドウ（小窓)が開き、曲が再生される方法を紹介します。
　再生を予約し連続再生をさせたり、リピートさせることも出来ます。
　小窓にはWindows Media Playerが貼り付いていますが、その他に再生を予約した曲の一覧が表示され、順序を自由に入れ換えたりすることが出来ます。

　将来的にはCookieを使い、曲リストを保存したり、Windows Media Player用の再生ファイルを作成できる機能を追加したいと思っています。
　また、他のプレイヤーや、より多くの環境に対応できればと思っています。

　この方法で公開された曲を聞くには、Windows Media Player 7以降がインストールされたWindowsで、Microsoft Internet Explorerを使って見ていることが原則となります。
　他に若干の、それに準じた環境でも聞くことができますが、その環境が用意できない方のために、より汎用的な方法も併用します。

<ysfactory Windows Media Player window>
概要
(Last Midified 2006/01/21)

　クッキーへの保存機能を追加して、バージョン２にバージョンアップします。

　小窓の実態は、
http://ysfactory.up.seesaa.net/script/yf-wmp-wnd.js
ですが、これはある日突然更新する予定です。
　このファイルを直接リンクして、すなわち、
<script type="text/javascript" src="http://ysfactory.up.seesaa.net/script/yf-wmp-wnd.js">
</script>
のような記述で使われている方は、何も変えなくても、ある日突然バージョンアップします。
（（※2006/10/21 21:15 頃バージョンアップしました））
　ご自分のサーバスペースなどにコピーして使われている方は、適時コピーしてください。

　また、旧バージョンと、今回のバージョンをつぎのファイル名でも保存（公開）しておきます。
（バージョン１）
http://ysfactory.up.seesaa.net/script/yf-wmp-wnd-v1.js
（バージョン２）
http://ysfactory.up.seesaa.net/script/yf-wmp-wnd-v2.js

※ひとつのウインドウに、違うバージョンを使った記事（ページ）が混在して表示されると、ブラウザはバージョンの違いを区別できなくなります。
　意図とは、違ったバージョンを呼び出してしまうことがあります。
※また、先にどちらかのバージョンの小窓が開いていると、違うバージョンを意図していても、先に開いている方の窓を操作してしまうこになります。

<ysfactory Windows Media Player window>
バージョン２
(Last Midified 2006/10/14)

　Seesaaのファイルマネージャーが新しくなって、ＵＲＬのコピー＆ペーストができにくくなった。
　・・が、新しいSeesaaファイルマネージャーでも、つぎの方法でファイルのＵＲＬがコピー＆ペーストできる。

�@Seesaaファイルマネージャーで、一覧表になっている中から、目的のファイル名（タイトル欄）をクリックし、詳細画面を出す。


�A「元ファイル」というところに、ファイルのＵＲＬが表示されるので、右クリックする。


�B表示されるメニューから「ショートカットのコピー」を選ぶ。
　※ブラウザによっては、「リンクのアドレスをコピー」や、「リンクＵＲＬをコピー」などの場合もある。

�CこれでＵＲＬがコピーされているので、目的の場所で、ペーストする。

※ツールメニューからたどるファイルマネージャでも、記事編集から表示させるファイルマネージャでも同様に行なえる。

　このカテゴリーで紹介している、ポップアップ連続再生ができるブログや、ウェブページを簡単に作成するための、支援ツールを紹介します。
　下記の手順に従って、出来上がったタグを、ご自分のウエブや、ウエブページにコピー&ペーストすると、簡単に作成することが出来ます。

�@ブログ記事の最初、またはウェブページ（html）のヘッダ部分に下記をコピー＆ペー ストしてください。
　スクリプトファイル「yf-wmp-wnd.js」を、ご自分のサーバスペースにコピーされて使われる方は、この色の部分を、ご自分の URLに置き換えてください。
<script type="text/javascript" src="http://ysfactory.up.seesaa.net/script/yf-wmp-wnd.js">
</script>

�A曲名／演奏者などを、下記に書きます。曲リストや、現在の演奏曲の欄に表示されます。
例： 『Parade!』 / TAM Music Factory


�B公開するmp3ファイルのURLを、下記に書きます。Seesaaの方は、ファイルマネージャからコピー＆ペーストすると、簡単です。
例： http://ysfactory.up.seesaa.net/songs/song0001.mp3


�C操作させるのに何をクリックさせるか？、ダウンロード可能にするか？、を選びます。
文字（見本�@）ボ タン（見本�A）画 像（見本�B）
ダウンロード可能にする

�D［※「�C」で画像を選ばなかった場合 は、この項目は必要ありません］
　次のそれぞれの操作に、対応する画像ファイルのURLを、下記に書きます。Seesaaの方は、ファイルマネージャからコピー＆ペーストすると、簡単で す。
＜再生＞
例： http://ysfactory.up.seesaa.net/image/play-button.gif

＜予約＞
例： http://ysfactory.up.seesaa.net/image/entry-button.gif

＜代替または、ダウンロード＞
例： http://ysfactory.up.seesaa.net/image/alternate-play.gif

＜開く＞
例： http://ysfactory.up.seesaa.net/image/popup-button.gif


�Eこのボタンを押します。�A〜�Dを書き換えた場合は、もう一度押してください。


�F下記に出来たタグを、ご自分のブログ記事や、ウェブページにコピー＆ペーストします。


�G［※ダウンロード可能にする場合は、 この操作は要りません］
　メモ帳などのテキストエディタで、mp3ファイルの、拡張子をm3uに変えた名前のファイ ルを、ご自分のパソコンに作ります。
　mp3ファイルが「song0001.mp3」 なら、「song0001.m3u」です。
　ファイルの内容には、「�B」にコピー&ペーストしたものと同じものを、もう一度コピー&ペーストします。
　ここで示している例にならうと、「http://ysfactory.up.seesaa.net/songs/song0001.mp3」 という内容の「song0001.m3u」という名前のファイ ルを作ります。
　そしてそれを、mp3ファイルと同じディレクトリーにアップロードします。

�Hこの下に見本が表示されます。

---

＜ここに見本が表示されます＞

---

<ysfactory Windows Media Player window>
支援ツール
(Last Midified 2006/01/26)

　［今すぐ再生］［再生を予約］を押すと、小窓（ウインドウ）が開き、曲の再生できます。
　予約した曲は、連続再生や、リピートさせることが出来ます。
　上手く動作しない場合は、連続再生は出来ませんが、［再生（左のふたつが使えない場合）］を試してください。

『Parade!』
  ［今すぐ再生］  ［再生を予約］  ［再生（左のふたつが使えない場合）］

『Fair Wind』
  ［今すぐ再生］  ［再生を予約］  ［再生（左のふたつが使えない場合）］

『雪と氷とお花とボクと』
  ［今すぐ再生］  ［再生を予約］  ［再生（ダウンロードできます）］

  ［ひとまずウインドウを開く］

  ＜使い方＞・＜動作環境＞

<ysfactory Windows Media Player window>
（文字クリック）見本�@
(Last Midified 2006/01/28)

■見本�@の、記事の全存稿は下記のようになっています。
　黄色い部分は、 この機能を使うために必要なタグの類です。
　赤紫の部分は、 個々の事情によって置き換えが必要、または置き換えが可能な部分です。
　その他の白い部分は通常文字です。好きな内容に置き換え可能です。

●改行に関する注意
　「改行は<br/>タグに変換する」に」設定されていることを、前提にしています。
　タグの中側（「<」と「>」ではさまれている部分）で改行しても、記事の表示には影響しません。
　それ以外で改行した場合は、その通りに表示されます。

　最初（２行目）は、改行を入れずに内容を書き始めています。
　ここにに改行を入れると、記事のタイトルと、記事の内容との間に、隙間が空きすぎてしまいます。

●［ひとまずウインドウを開く］が必要ない場合
　支援ツールを使用すると、１曲ごとに［ひとまずウインドウを開く］が生成されてしまいますが、見本�@のように、複数曲をひとつの記事にまとめると、不要 になるかも知れません。
　そのような場合は、
&nbsp;&nbsp;<a href="javascript:yf_wmp_popup()">［ひとまずウインドウを開く］</a>
を削除すると無くせます。


<ysfactory Windows Media Player window>
（文字クリック）見本�@の解説
(Last Midified 2006/01/30)

　見本�@では文字をクリックしましたが、ここではボタンをクリックします。
　連続再生、リピートさせることも出来ます。

『散歩道』

    

  

  

   ＜使い方＞・＜動作環境＞

<ysfactory Windows Media Player window>
（ボタンクリック／追記にプラグインプレイヤー）見本�A
(Last Midified 2006/01/26)

＞＞上手く動作しない場合

■見本�Aの、記事の原稿は下記のようになっています。
　黄色い部分は、 この機能を使うためのタグ類です。
　赤紫の部分は、 個々の事情によって変えないといけない、または変えて良い部分です。
　その他の白い部分は、記事の内容として表示されます。

●改行に関する注意
　「改行は<br/>タグに変換する」に」設定されていることを、前提にしています。
　タグの中側（「<」と「>」ではさまれている部分）で改行しても、記事の表示には影響しません。
　それ以外で改行した場合は、その通りに表示されます。

　最初（２行目）は、改行を入れずに内容を書き始めています。
　ここにに改行を入れると、記事のタイトルと、記事の内容との間に、隙間が空きすぎてしまいます。

　最後には２個の改行が入っています。
　これによって、追記の見出しである「＞＞上手く動作しない場合」との間に、隙間が空いています。

●「再生（上のふたつが使えない場合）」が必要ない場合
&nbsp;&nbsp;<input
 type="button" value="再生（上のふたつが使え ない場合）"
 onclick='location.href="http://ysfactory.up.seesaa.net/songs/song0004.m3u";'
/>

の部分を削除してください。

●「ひとまずウインドウを開く」が必要ない場合
&nbsp;&nbsp;<input
 type="button" value="ひとまずウインドウを開 く"
 onclick="javascript:yf_wmp_popup()" />

の部分を削除してください。

■記事の追記部分は次のように書かれています。


<ysfactory Windows Media Player window>
（ボタンクリック／追記にプラグインプレイヤー）見本�Aの解説
(Last Midified 2006/02/07)

　見本�Bでは画像をクリックします。
　連続再生、リピートさせることも出来ます。

『早春の木漏れ日』
      

『過ぎ去りし日々』
      

『moonless night』
      

  

  ＜使い方＞・＜動作環境＞

<ysfactory Windows Media Player window>
（画像をクリック）見本�B
(Last Midified 2006/02/01)