初音ミクみく

VOCALOIDに何気に関連しそうな情報をまったり収集していたアーカイブサイト!

初音ミクのWeb拍手、Javaスクリプトで便利に!

出た!初音ミクのWeb拍手!
で紹介したはちゅねミクのWeb拍手だが、Kindyさんというかたが改善点を助言。Flashをそのまま貼り付けた場合、IE7では一度枠をクリックしないとアクティブにならないのだが、Javaスクリプトの力を借りることで、いきなりアクティブにすることができるという(自分も知らなかったヨ)。それを、さっそく「はちゅねミクのWeb拍手」の作者が対応し、配布ファイルに同梱してくれた。それが次だ!

クリックしなくても、両方の枠にマウスカーソルを重ねてみれば違いは一目瞭然。

Flashそのまま貼り付け
一度枠をクリックしないとアクティブにならない






Javaスクリプト利用貼り付け(JavaスクリプトONの場合)
何もせずともアクティブになってる。

Javaスクリプト利用貼り付け(JavaスクリプトOFFの場合)


設置のやりかたは、基本的に「出た!初音ミクのWeb拍手!」と同じだが、もうひと手間増えるので、改めていちから解説してみよう。

1. Web拍手サービスサイトへ言ってアカウントをとる
「はちゅねミク」web拍手ボタンは、クリックした情報を「Web拍手」のサイトへ伝えるためのフロントエンドだ。なので、伝えた情報をちゃんと記録してもらうために、Web拍手サービスサイトのアカウントが必要だ。トップページの上に「web拍手の新規無料登録はこちらから」というリンクがあるので、ここをクリックして登録しよう。登録が終わると、ユーザーIDとパスワードを使って、
SimpleCGI
からログインできるようになる。ここで拍手された回数などが確認できる。

2. WEB CLAPに行き配布ファイルをダウンロードする
「「はちゅねミク」Web拍手ボタンダウンロード」をクリックすると、配布ファイルが拾える。解凍すると次のファイルが現れる。

 ・miku_clap.js (Javaスクリプトファイル)
 ・miku_clap.swf (Flashファイル)
 ・readme.txt (説明書)

3. JavaスクリプトのユーザーID部分を修正する
miku_clap.jsの中にある、id=********の部分を、先ほど取得したWeb拍手のIDに書き換える。たとえば、自分のとったIDは「mikumiku7」なので、「id=mikumiku7」と書き換えている(2か所)。

4.Javaスクリプトをアップロードする
書き換えたJavaスクリプトを、ブログのアップロード機能で転送(アップロード)し、そのURLを控えておく。

5.次の貼り付け用タグを一部修正してからブログに貼り付ける
次の「http://npass.net/misc/miku_clap.js」の部分を、4.で控えておいたURLに書き換えて、これをブログに貼り付ける。


以上でひとまず完了だ。

6.swfを自前のサーバーに置きたい場合
配布ファイルの中の、miku_clap.swfを自前でサーバーにアップロードして使うこともできる。それには、miku_clap.swfをブログのアップロード機能で転送し、そのURLを控えておく。そして、Javaスクリプトの中の「http://npass.net/misc/miku_clap.swf」の部分を、控えておいたURLと差し替える。これも2か所あるので両方直すこと。そしてJavaスクリプトをWebにアップロードする。

参考1:本ブログ用に書き換えたJavaスクリプト(miku_clap.js)


参考2:本ブログで使用している貼り付け用タグ


追記:Kindyさんから追加コメントいただきました。JavaスクリプトがOFFのWebブラウザなどでは何も表示されなくなるので、それを回避するには、前に用意したFlashムービー貼り付け用タグを、さらに<noscript> </noscript>で括って、これを貼り付けておくとよいそうな。これで、Javaスクリプトがオンなら<script> </script>のほうが、オフなら<noscript> </noscript>のほうが表示されるというしかけだ。

で、実際に試してみたところ(↑のWeb拍手に適応してみた)、IE7の[ツール][インターネットオプション]→[セキュリティー]タブ[レベルのカスタマイズ]ボタン→[スクリプト][アクティブスクリプト]を[無効にする]を選択しておくと、<noscript> </noscript>のほうが有効になることを確認。まあ、JavaスクリプトをOFFにしている人はあまりいないとは思うけど(わからんけど)、確かにこのほうが親切なことは間違いない。thx^^ twitterを見る [初音ミク-音楽] 2007/10/30(火) 00:13:53 | 使い方 | コメント:1

さらに一手間

えーとわざわざエントリまで立てられるとは思ってもみなかったので(笑

実はこの方式には一個だけ弱点がありまして、それは「Java-Scriptを使用できないブラウザ、もしくはJava-Scriptをオフにしている場合は映像そのものが表示されない」ということです。

一度Java-Scriptをオフにしてサイトをご覧頂ければ見えなくなっていると思います。

この症状を回避するにはソースがちょっと長くなるので更にめんどくさくなるのですが、「<script から </script>」の後ろに「 <no script>以前のソース</no script>」をさらに追記するという方法が有効です。

<script>の場合はJava-ScriptがONの場合に有効で<no script>の場合は同様にOFFの場合に有効になる自動選択式です。

えーと、ややこしい書き方で申し訳ないのですが、一応回避策を書いとかないと混乱する人がいるかもしれないので、追記しておきますです。では。
  1. 2007/10/30(火) 20:21:06 |
  2. URL |
  3. Kindy #pYrWfDco
  4. [ 編集]

コメントの投稿


管理者にだけ表示を許可する

おもわず拍手したくなるweb拍手ボタン第二弾「かぐぁみねリン」

焼です。web拍手ボタン第二弾として、「VOCALOID2 CV02 鏡音リン」...
  1. 2007/11/17(土) 17:33:28 |
  2. えぬぱすどっとねっと