NicoScreen.jsのjQueryjQueryプラグインを使用して、好きな"music PV"に日本語歌詞をニコニコ動画のような流すアプリを作りました。
手順
1、 2つのscriptファイルをhtmlファイルに埋め込む。
<script type="text/javascript" src="../jquery.js"></script>-
<script type="text/javascript" src="../nicoscreen.js"></script>
2、 htmlファイルに「文字が流れる範囲の箱」と「動画」を設置する。
- 文字範囲
<div id="nicoscreen"> - 動画
<iframe id="iframe"〜
3、 <script></script>の中に、処理内容を書く
4、"comments":[ ]の中に、動画で流れるコメントを書く
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ニコ動画的な日本語翻訳スライド</title>
<!--CSS-->
<style>
body{
background-color: black;
}
#nicoscreen{
float: left;
width: 100%;
height: 900px;
border-color: black;
}
#iframe{
position: fixed;
top: 10px;
left:10px;
float:left;
width: 1000px;
height: 900px;
border-color: black;
}
</style>
<!--NicoScreen.js-->
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../nicoscreen.js"></script>
</head>
<!--ニコ文字、動画の設置-->
<body>
<div id="nicoscreen">
<iframe id="iframe" src="https://www.youtube.com/embed/jErJimwom94?list=RDjErJimwom94" frameborder="0" allowfullscreen></iframe>
<!--処理内容-->
<script>
var obj = {
"base":{
color:"white", //文字の色の指定
speed:"slow", //文字が流れるスピードを指定slow/fast/normal
interval:"fast",//文字が流れる間隔を指定slow/fast/normal
font_size:"50px", //フォントのサイズを指定。
loop:true //文字が最後まで流れた後に、繰り返すかどうかtrue/false
},
"comments":[
"7歳のとき、母親が言ったんだ",
"友だちを作らなきゃ、ひとりぼっちになっちゃうよって",
"世界はすごくすごく大きくて、それでも俺たちはもっとすごいんだって思ってた",
"競うように背伸びして、急いで大人になろうとしていた",
"11歳になるまでにハーブもきつい酒も覚えたよ",
"貧乏だった俺たちはどうにかして金を作ろうとしててさ",
"いつだって夢は忘れなかった 俺の親父がそうだったように",
"だから歌を作り、小説を書き始めたのさ",
"輝く何か それはいつだって退屈なものに思えた",
"心から愛しているものだけが俺のことを理解してくれるんだって",
"二十歳のとき、俺の書いた小説はさんざんな言われようさ",
"まだ太陽は昇らない 孤独だよ",
"俺は二十歳だった",
"とにかくゴールを目指すだけ 失敗なんて考えない",
"すごく小さな声だって、集まれば響き渡るんだ",
"俺には仲間がいるし、少なくともそいつらは味方なのさ",
"今は会えなくたって、いつか会えると思ってるよ",
"二十歳のとき、俺の書いた小説はさんざんな言われようさ",
"すべてを書いていたよ 俺が見ていたすべてを",
"俺は二十歳だった",
"もうすぐ30だけど、その頃には俺たちの歌が大ヒットさ",
"世界中を旅してまわるんだ 俺たちはまだフラフラしてるけど",
"もうすぐ30なんだ",
"人生についてまだ勉強中",
"彼女が子どもを産んでくれて",
"そいつらのために歌うんだ",
"そいつらに俺の人生を語るんだ",
"今でも仲間はいるけれど",
"まだ夢を追いかけてる奴もいるし",
"連絡を取らなくなった奴もいる",
"ああ、後悔してるよ",
"俺もすぐに60さ 今、親父が61",
"生きていることを噛みしめろ そうすれば人生はもっとよいものになる",
"前に一度、手紙を送ったら、すごく喜んでたよ",
"俺も子どもたちが会いに来てくれるようになっているかな 月に何回かね",
"俺もすぐに60さ 世間は冷たいなんて考えているのだろうか",
"それともたくさんの子どもたちに囲まれて、幸せになっているんだろうか",
"俺もすぐに60さ",
"俺もすぐに60さ 世間は冷たいなんて考えているのだろうか",
"それともたくさんの子どもたちに囲まれて、幸せになっているんだろうか",
"俺もすぐに60さ",
"7歳のとき、母親が言ったんだ",
"友だちを作らなきゃ、ひとりぼっちになっちゃうよって",
"俺は7歳だった",
"俺は7歳だった"
]
};
nicoscreen.set(obj);
nicoscreen.start();
</script>
</body>
</html>