2006年04月20日

playtaggerの表示/非表示を指定

関連エントリ:
埋め込む:del.icio.us/playtagger(2006/04/18)
del.icio.usの“playtagger”を自前サーバで使う(メモ)(2006/04/19)

del.icio.usからパクッて自前で使っている“playtagger”を本当にちょっとだけいじって、機能を改造した。

このプレイヤというかJavascriptのもともとの機能を簡単にいうと、以下のようになる。

1.表示しているHTML上にあるリンクタグ<a>をすべてチェックし
2.属性hrefで指定されたリンク先のURLの最後が“.mp3”で終わっている場合
3.そのファイルを再生するためのプレイヤを<a>の前に追加する

例えばStarfroschのように同一ページ上にMP3へのリンクがいくつもある場合は、いちいちプレイヤを表示するタグを書かなくてもJavascriptが一括で表示してくれるので便利だ。

だが逆に言うと、サイト管理者はプレイヤの表示/非表示を指定することができないのだ。サイトによっては、「ページ上にMP3へのリンクが複数あるけど、playtaggerの表示/非表示を指定したい」という場合もあるだろう。

そこでplaytaggerのJavascriptを改造してみた。といっても、すぐに完成した。すげー簡単。


改造方法

(1) Javascriptの改造

8行目:
if(o.href.match(/\.mp3$/i)) {

これを以下のようにする(太字部分を書き加える)。

if(o.href.match(/\.mp3$/i) && o.id != 'noPlayTagger') {

以上。


(2) HTMLへの表記

※playtaggerを表示させたい場合は、今までと同じようにMP3ファイルへのリンクを書く。

例:<a href="http://s2tf2.up.seesaa.net/image/130bpm64kbps.mp3">TEST 1</a>
  表示はこうなる→TEST 1

※playtaggerを表示させたくない場合はリンクタグの中にid="noPlayTagger"と書く。

例:<a href="http://s2tf2.up.seesaa.net/image/130bpm64kbps.mp3" id="noPlayTagger">TEST 2</a>
  表示はこうなる→TEST 2 (ボタンが表示されない)


【解説】

Javascriptを書き換えた8行目はもともと「<a>タグで指定されたリンク先URLの最後が“.mp3”でなければ以下を実行せよ」という命令だった。上に書いた1〜3の流れでいえば、2番に当てはまる。

この次に3番の命令に行くまえに、追加した && o.id != 'noPlayTagger'が効いてくる。これは2番と3番の間に「2.5.2番の条件を満たして、さらに<a>タグ内でidが“noPlayTagger”でなければ3に進む」という命令を書き加えたってことになる。

というわけで、<a>タグの中にid="noPlayTaggerがあればプレイヤを表示しないし、それ以外であれば表示するようになった。


【応用】

<a>タグにid="playTagger"と書き入れた時だけプレイヤを表示する。

Javascript8行目:
if(o.href.match(/\.mp3$/i) && o.id == 'playTagger') {

HTMLへの記述と表示:
<a href="http://s2tf2.up.seesaa.net/image/130bpm64kbps.mp3">TEST 1</a>
  →プレイヤは表示されない
<a href="http://s2tf2.up.seesaa.net/image/130bpm64kbps.mp3" id="playTagger">TEST 2</a>
  →プレイヤが表示される

※idとなる“noPlayTagger”も“playTagger”も自分の使いやすいキーワードに変えてもらってOK。ただし、CSSなどですでに使われていないかどうかは注意。また「ハイフン(-)、アンダーバー(_)、コロン(.)、ピリオド(.)を含む半角英数文字列で、最初の1文字は半角英文字で始まる必要があります」とのこと。→IDの割り当てとほほのWWW入門


【注意】
※以上の内容はこのブログの筆者が動作確認を行っています(Windows XP SP2 + IE6 及び Mozilla Firefox1.5.0.2)。ただし書かれた内容を実際に試す際は、必ず自己責任でお願いします。内容を基にトラブルや損害が発生した場合、当方では一切の責任を負いません。
※ご意見・ご希望など歓迎。コメント欄に書き込んでください。


以上、よいこのplaytagger講座でした。


posted by 犬TV at 17:44 | Comment(0) | TrackBack(0) | WEB - TECH
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。