さんまがおいしい季節だねー(´・ω・`)

U can’t touch this ユーザーズマニュアル

Flash,ブログパーツ — タグ: , — さくら @ 2009/03/24 23:04

さくらです。こんばんわ♪

今日は U can’t touch this を改造してたの。
まずはこれ何ってことから説明するわね。

U can’t touch this

U can’t touch this は押したらいけないボタンを表示するブログパーツよ。
このブログパーツを貼ると、こんなボタンが表示されるの。

このボタンを押したら…
押すなって書いてるわ。
良く読むのね。
それでも押したかったら押すがいいわ!

って煽るだけもなんだからちゃんと説明するわね。
ボタンを押すと YouTube のビデオクリップがブラウザのサイズに合わせて表示されるの。
クリップが表示されてる間、ユーザは何もできないの。だから DON’T TOUCH THIS ね。
本当言うと、元のページにスクロールできる余裕があればそこは操作できるんだけど、その辺の緩い作りはどっちかって言うとわざとよ。
クリップが終わると元に戻るわ。じっくりクリップを見たユーザは時間を損するって仕組みね!

このパーツをブログに貼る方法は二種類あるわ。簡単なのと難しいやつね。
難しいって言っても HTML を知ってたら問題ないと思うわ。

簡単な貼り方

先に簡単な貼り方を教えるわね。
まずこの HTML をあなたのブログに貼るの。

<script type="text/javascript"
src="http://sakuratan.biz/donttouchthis/blogparts.js">
</script>

そしたらこんなボタンが表示されるはずよ。

押しちゃだめよ♪

簡単モードの場合、ビデオクリップは Black Eyed Peas Vs MC Hammer – U Can’t Touch My Humps に固定されるわ。
違うクリップを使いたかったら難しい貼り方にチャレンジしてちょうだい。

難しい貼り方

難しい貼り方って言う呼び方もあれだけど、要は JavaScript のコードを script タグで指定して、ボタンのイベントを自分で指定するやり方ね。
とりあえず例はこんな感じ。

<script type="text/javascript"
src="http://sakuratan.biz/donttouchthis/DontTouchThis.js">
</script>
<form onclick="return false">
<input type="image" onclick="dontTouchThis('RHd7jbSLiOw')"
src="http://sakuratan.biz/donttouchthis/blue.png"/>
</form>

このコードをブログに貼るとこんな感じで表示されるわ。

このボタンを押すとマイケル・ジャクソン×サザエさん「Isono Criminal」が表示されるわ。
このリミックスは 1:52 ぐらいからのシンクロ度がマジでパネェから、ぜひ一度聞いてみてね!

カスタマイズするときのポイントよ。

  1. onclick イベントハンドラの dontTouchThis(‘RHd7jbSLiOw’) がビデオクリップ番号よ。YouTube の URL の v= の部分ね。
  2. ボタン画像は適当に用意してもらったのを使ってもらって OK よ。blue.png と red.png を http://sakuratan.biz/donttouchthis/ に置いてあるから、自分で用意するのが面倒な人はこれを使ってね。
  3. HTML タグは適当に変えてもらって結構よ。form じゃなくて a タグにするとか好きにしてちょうだい。

禁止事項

このブログパーツの禁止事項よ。
ブログパーツに含まれる JavaScript、Flash、画像ファイルをどこか他のサーバにコピーして使用することは禁止するわ。

さくら的にはスクリプトはコピーしてもらっても構わないんだけど、コピー先が YouTube API の利用規約に従ってくれるか分かんないから、こうさせてもらってるの。画像はどっちみちだめね。
正直言うと、さくらも YouTube API の利用規約をちゃんと守れてるのかいまいちよく分かんないんだけど、だからと言ってあんたが破っていいって訳じゃないんだからね!
ちゃんと守りなさい!

さくら

P.S. 書くの忘れてたわ。
スクリプトのビデオID指定する方法だと、一部のクリップは使えないみたい。
最初 M.C. コミヤ 遣唐使です埋め込もうと思ったんだけど、うまくいかなかったわ。
さくらのバグのような気もするけど、まだ細かく調べてないの。ごめんなさい。

P.S. その2
コミヤが映らない理由を調べたわ。
YouTube のクリップには埋め込み無効になってるものがあるの。
ビデオクリップのページの貼り付け用 URL の部分がこんな感じになってるやつは埋め込み無効ね。

youtube 埋め込み無効


埋め込み無効のクリップのビデオIDが指定された場合、エラーダイアログを表示してすぐ終わるように直しといたわ。
とりあえずこれで完成ね。

P.S. その3
DontTouchThis.js を直接呼び出す場合のボタンの枠の指定を止めたわ。
最初手を抜いて画像じゃなくて HTML で枠付けてたんだけど、今は画像にあるから前の HTML だと枠が1ピクセル多くなるの。
ごめんなさい。
blogparts.js 使ってる人はこの影響は無いわ。
(2009/3/27)

2件のコメント »

  1. 初めて見たムービーでしたがマジで感動しましたw

    コメント by ロデム — 2009 年 3 月 25 日 @ 00:52
  2. 遣唐使 → 吉幾三×マイケルジャクソン → マイケル・ジャクソン×サザエさん って感じで見つけたの。
    エイ子に感謝ね♪

    コメント by さくら — 2009 年 3 月 25 日 @ 02:47

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity