TOP絵変更 → 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41  クリックすると変更されます
HOME

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

YouTubeのjubeatまとめサイトのソース解説

YouTubeのjubeatまとめサイトのソース解説

Snow Thousand Night のプログラムの解説をしなかったことを
1,2年経って後悔している今、
今度こそエビデンス(?)を残そうと思い、ここに記述する。

今回作ったYouTubeのjubeatまとめサイトのソースを解説する。


概要は以下の通り

1.コンボボックスを選択すると任意のモノが表示される
2.個別のデータは別のJavaScriptファイルで管理する

とまぁ、かなり簡単なので1日あれば作成可能である。


今回用意したファイルは以下の4つ

1.youtube.html
2.youtube.js
3.youtube_data.js
4.youtube.css

1のyoutube.htmlにJavaScriptやらcssの宣言をしつつ、
『どこに何を表示させるか』の設定を行う。

2のyoutube.jsには、コンボボックス選択時の処理が書いてある。

3のyoutube_data.jsには、ファイル名の通り表示させるデータ郡が
ずらっと書いてある。ある意味データベース。

4はまぁあってもなくてもいいが、表示するサイトのレイアウト等を設定する


それではまず1のyoutube.htmlのほうから見ていこう。
まずはタグ<body>までのソース(いらないところは削ります)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<link rel="stylesheet" href="youtube.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>YouTube TalesG3作成 ユビートオリジナル譜面一覧</title>

<script type="text/javascript" language="JavaScript" src="youtube_data.js"></script>
<script type="text/javascript" language="JavaScript" src="youtube.js"></script>

</head>



まぁいつものhtmlに加えて、
スタイルシートの設定と、javascriptを使いますよーという宣言っぽいのが書いてある。
そしてタグ<title>の下に、『読み込むJavaScriptファイルを設定』している。
ここでは『youtube_data.js』と『youtube.js』を読み込もうとしている。
同じ階層にファイルを置く想定なので相対参照にしてある。

次はタグ<body>から最後まで。



<body onload="load_Title();load_Title2()">
<br>
<pre>
<h2>YouTube TalesG3作成 ユビートオリジナル譜面一覧</h2>
↓タイトルを選択すると説明とYouTube画面が表示されます。
<form name="frmYT">
全曲⇒<select name="selYT" size=1 onChange="youtube_select()">
</select>
オススメ曲⇒<select name="selYT2" size=1 onChange="youtube_select2()">
</select>

<span id="manual"></span>

<span id="other"></span>

<span id="youtube1"></span>

<span id="youtube2"></span>

<hr>

</body>
</html>




タグ<body>には、コンボボックスの内容を読み出す関数を呼び出している。
『load_Title()』と『load_Title2()』のこと。
ネーミングはもう超適当。
番号なしのほうは全曲読み出すほうの設定で、
2って書いてあるほうはオススメ曲を読み出すほう。


次に注目すべきはタグ<form>の中。
タグ<select>に『onChange="youtube_select()"』がある。
これはコンボボックスを変更すると『youtube_select()』が呼び出される仕組み。
簡略して言うと、データベース(youtube_data.jsのこと)から選んだものは
どれかを判定した後、その該当のデータを持ってくる。
オススメ曲は『youtube_select2()』となっている。


そして最後に出力箇所。
自分はタグ<span>を出力箇所に採用している。
『manual』『other』『youtube1』『youtube2』というidが設定されており、
それぞれ『動画の説明』『その他(現在は譜面へのリンク』
『YouTube動画(シャッター)』『YouTube動画(花)』を表示させるhtml文が
埋め込まれる。



次にプログラム内容。2のyoutube.jsファイルの中身を見ていこう。
まずはグローバル変数(?)から。



var YT_1 = "<br><object width=\"480\" height=\"390\"><param name=\"movie\" value=\"";
var YT_2 = "\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"";
var YT_3 = "\" type=\"application/x-shockwave-flash\" width=\"480\" height=\"390\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>";

var reco = new Array(0); // オススメ曲セレクト用



『YT_1~3』は、YouTubeの埋め込みコードのURLが書いてある。
可変するのはYouTubeの動画のhttpなので、その箇所以外は全部定数に持つ。
(定数と言っておきながらConstじゃない)

次に『reco』だが、これはオススメ曲用に用意したグローバル配列変数。
オススメ曲には「オススメの曲しかおきたくない」ため、
それぞれの動画の指標番号みたいなものをこいつに入れていくためのもの。
詳細は後ほど。


次に全曲のコンボボックス選択時の処理



// 全曲セレクト
function youtube_select() {
var index = title.length - frmYT.selYT.selectedIndex;

if (index != title.length) {
select_view(index);
}
}



ここからかなり大雑把になるが、
まず『title』という変数は『youtube_data.js』で定義してあるグローバル配列変数のこと。
その配列の要素数=曲の総数のため、こうなっている。
『frmYT.selYT.selectedIndex』というのは、youtube.htmlで指定した
タグ<select>の『name="selYT"』と連動してあり、そのコンボボックスの
何番目を選んだかを返してくれるという代物。

例を言うと、もし曲が40曲あった場合で、その中の5番目を選択した場合
title.length(40) - frmYT.selYT.selectedIndex(5) となり、
変数『index』には(35)という数値が入る。

え、(5)を入れればいいじゃん!? と思った貴方。半分正解。
でもこの答えは後ほど『youtube_data.js』の説明のときに解説。
ヒントは【新曲が出来たときはデータベースの一番上に挿入していきたい】
    【コンボボックスも一番上から最新のものを表示していきたい】


もし何も選択していなかった場合(空白を選択した場合)は
(frmYT.selYT.selectedIndexが0の場合と聞いてもよかったのだが)
表示処理『select_view(index)』は行わない。



次にオススメ曲のコンボボックス選択時の処理



// オススメセレクト
function youtube_select2() {
var index = reco.length - frmYT.selYT2.selectedIndex;

if (index != reco.length) {
select_view(reco[index]);
}
}



同じに見えるけど、全曲の場合は曲の総数から
選択したコンボボックスの指標を引いていたが、
オススメ曲の場合は『reco.length』から引いている。
理由は簡単。『reco.length』がオススメ曲の総数だから。



次に表示処理。これは全曲もオススメ曲も同じ処理を行う。



// YouTube画面表示処理
function select_view(index) {

document.getElementById("manual").innerHTML = message[index];
document.getElementById("other").innerHTML = other[index];

if (url1[index] != "") {
document.getElementById("youtube1").innerHTML = YT_1 + url1[index] + YT_2 + url1[index] + YT_3;
}

if (url2[index] != "") {
document.getElementById("youtube2").innerHTML = YT_1 + url2[index] + YT_2 + url2[index] + YT_3;
}
}



ここには『youtube_data.js』で定義したグローバル配列変数がわんさか出てくる。
『message[]』『other[]』『url1[]』『url2[]』を、加工したりしなかったりした状態で
【document.getElementById().innerHTML】に出力している。
【document.getElementById().innerHTML】っつーのは、
『youtube.html』のときに見た『<span id="~~~~"></span>』とかに
html文として出力するよー という代物。

【document.getElementById("manual").innerHTML = "だー"】と書けば、
『<span id="manual"></span>』に「だー」と、ソースとして出力される。

前回の例から加えて例を言うと、
title.length(40) - frmYT.selYT.selectedIndex(5) となり、
変数『index』に(35)という数値が入った後、
データベースで作っといたmessage[35]のデータを
『document.getElementById("manual").innerHTML』で出力する。

『url1[]』と『url2[]』は、書いてなかったら出力しないようになっている。




そして最後に、なぜか最初に処理するタグ<body>で呼び出す
コンボボックスのタイトル挿入処理
これ一番上に持ってきておいたほうがいいか?




// 全曲コンボボックスのタイトル挿入
function load_Title(){

for (i = title.length; i > 0; i--) {
frmYT.selYT.options[i] = new Option(title[title.length - i]);
}

}



はい、for文がややこしいことになっています。
iの初期値は曲の総数、それをデクリメントしていく。
曲が40曲ある場合、40~1まで。
そして『frmYT.selYT.options[i]』にnewでデータを追加していく。
『frmYT.selYT.options[40]』~『frmYT.selYT.options[1]』までということだ。
ちなみにこの『options』に(0)は存在しないため、
for文の条件が『i > 0』になっている。

そして何を追加するか。
それは『title[title.length - i]』を追加します。
最初、iは40なので『40 - 40 = 0』となる。
配列は0からスタートで、数値が低ければ低いほど
過去の曲を読み出すことになる。
なのでこの場合、最初に読み出されるのは「過去から順番に読み出す」

お分かりいただけただろうか。
コンボボックスの一番下(frmYT.selYT.options[40]) に
一番過去のデータ(title[40 - 40 = 0]) を出力する。

いや、分からない。
一番上から最新のを入れていけばいいじゃんと思う。

for (i = 1; i < title.length; i++) {
frmYT.selYT.options[i] = new Option(title[title.length - i]);
}

これでいいと思う。
まぁ気に入らないのなら変えてください。



そしてこれのオススメ曲Version。



// オススメコンボボックスのタイトル挿入
function load_Title2(){

var i = 0;

// オススメのもののみ指定


for (i = reco.length - 1;i >= 0 ; i--) {
frmYT.selYT2.options[reco.length - i] = new Option(title[reco[i]]);
}
}



ソース内のコメントにある通りです。
まずオススメ曲の指標を『reco』に入れていきます。
そして、これまた厄介なfor文。
iの初期値はreco.length(上の場合11)-1 = 10で、
終了条件は『i >= 0』、つまり-1とかになったら終了する。
で、コンボボックスの今度は11 - 10 = 1番目から、
データベースのタイトルのreco(10)番目、ようするに
最新の曲を持ってきて格納する。
あーややこしい。

これもさー

reco[i] = 38; i += 1;
reco[i] = 36; i += 1;
reco[i] = 34; i += 1;
reco[i] = 33; i += 1;
reco[i] = 30; i += 1;
reco[i] = 29; i += 1;
reco[i] = 22; i += 1;
reco[i] = 17; i += 1;
reco[i] = 10; i += 1;
reco[i] = 9; i += 1;
reco[i] = 3; i += 1;

って、順番を降順にした後

for (i = 1;i < reco.length ; i++) {
frmYT.selYT2.options[i] = new Option(title[reco[i]]);
}

ってすればいいんでねーの??
まぁ気に入らないのなら変えてください。(2回目)



とにかく全体的にまとめるとこうなる。

1.データベースは動画を作成した順番(降順)で並んでいて、
  n番~0番まで用意されている。
2.コンボボックスは0からではなく1から指定しなければならない
3.オススメ曲はめんどい

というところか。
まぁ一度ロジックが出来上がってしまえば後は簡単だと思われる。




以上が『youtube.js』の全貌。分かりにくい。


最後に『youtube_data.js』の説明。スタイルシートの説明は省きます。
まず変数設定



var no = new Array(0);
var title = new Array(0);
var message = new Array(0);
var url1 = new Array(0);
var url2 = new Array(0);
var other = new Array(0);
var score1 = "<br><a href=\"score/"
var score2 = "\" target=\"blank\">譜面</a>"

var i = 0;



一応作っておいた『no』というグローバル配列変数と、
『youtube.js』にも出てきた
『title』『message』『url1』『url2』『other』の
グローバル配列変数、
そして『other』に入れる譜面のURLリンク用に作った
『score1』と『score2』を設定。

ついでに『i』も設定。



次にデータベースもどきの設定がある。



i = 2;

no[i] = i;
title[i] = "【jubeat】テスト【オリジナル譜面】";
message[i] = "テストだってばよ";
url1[i] = "http://www.youtube.com/v/kT-5J6ktKNA?version=3&hl=ja_JP";
url2[i] = "http://www.youtube.com/v/40GNmstrIck?version=3&hl=ja_JP";
other[i] = score1 + "usa_SPiCa_EXT.txt" + score2;

i = 1;

no[i] = i;
title[i] = "【jubeat】てすーと【オリジナル譜面】";
message[i] = "くりーみーテスト";
url1[i] = "http://www.youtube.com/v/Y-F925CWv0w?version=3&hl=ja_JP";
url2[i] = "http://www.youtube.com/v/4hMEOUNRDL0?version=3&hl=ja_JP";
other[i] = score1 + "flan.txt" + score2;

i = 0;

no[i] = i;
title[i] = "【jubeat】上から来るぞ、気をつけろTest【オリジナル譜面】";
message[i] = "せっかくだからこの赤いテストを選ぶぜ";
url1[i] = "http://www.youtube.com/v/-trPZFz2Kqg?version=3&hl=ja_JP";
url2[i] = "http://www.youtube.com/v/C7cGrwB3bT0?version=3&hl=ja_JP";
other[i] = score1 + "WORLDS_END_UMBRELLA.txt" + score2;



まず、新曲が出来た場合、一番上にこのデータの塊を設定したいと思った。
(一番下までスクロールするのがめんどくさかったから)
なので、最新の曲は番号が一番多い数になって、
後々コンボボックスの指標から引いたりしなきゃいけなかったわけ。
ようするに最新の曲は、「コンボボックス上は一番上に表示される(1)」が、
データベースの番号上は「一番数値が高い(2)」ということになり、
引く処理が発生してしまったわけだ。
いや、インクリメントして番号振っていけばよかったのではと。
あ、でもインクリメントしたときは、オススメ曲はどうやって
選べばいいのか。可変したらどうすんだろう・・・。
やっぱデクリメントにしておこう。



以上かな。
これでおそらくfc2ブログがサービス終了とか
事前連絡もなしに終わることさえなければ、
バックアップにはなったと思われる。


そう、この記事の目的は解説ではなくバックアップなのである。


以上、寝言でした。

スポンサーサイト

テーマ : テイルズウィーバー
ジャンル : オンラインゲーム

コメントの投稿

非公開コメント

著作権

Copyrights (C) NEXON Corporation and NEXON Co., Ltd.
All Rights Reserved.
乱数試行機

乱数試行機

成功率 %
試行回数 回

成功    :0 回
失敗    :0 回
成功率結果 :0 %
試行回数結果:0 回
簡易MRシミュレータ

簡易MRシミュレータ
by †真・ブリニクルディメンションスレイヤー

S:64 
H:136 
F:17 
I:16 
M:14 
X:16 
A:11 
Q:10 
C:9 
アンチ無
MR費用:0
MR券込:0
回した回数:0

※ステがMAXになると
 黄色文字になります
 ステ自体違う場合はコメントくだs
※ラジオボタンを押下すると
 アンチマジックを使った状態に
なります

個人リンク
みんなの呟き

   



サイト説明
BloodyRosary は
テイルズウィーバーなブログです。
レコ…霧鯖で活動してるってばよ。
TwitterID:yoinagiTW

このブログはリンクフリーです。
+50000
しかしなぜか東方カウンター
自己紹介

宵凪(テチ) Lv:290
3次覚醒済


江戸川ドイル(アナイス) Lv290
2次覚醒済


竜崎シオン(イソ) Lv290
2次覚醒済


ラストセラフィ(ベンヤ) Lv290
2次覚醒済


シルフィアス(ナヤ) Lv:290
2次覚醒済


ジールラファル(マキシ) Lv:255
覚醒済


レスヴィリア(ミラ) Lv:255
覚醒済


聖王リヴァイア(シベ) Lv:255
覚醒済


セレス(クロエ) Lv265
覚醒済


月千夜(ジョシュ) Lv255
覚醒済


雪千夜(ランジエ) Lv255
覚醒済


超社長(イサック) Lv255
覚醒済


ナズナ(ボリ) Lv255
覚醒済


シルベイン(ピン) Lv:255
覚醒済


ディシディア(ルシ) Lv255
覚醒済


メルブレイズ(ロアミニ) Lv255
覚醒済


ルヴァリオ(ノクターン) Lv255
覚醒済


臼いネコ(テチ) Lv290


x音葉x(テチ) Lv199

他のキャラ
セリカ様(アナイス) Lv290
黒銀シア(ピン) Lv274
全キャラレコ…霧鯖で適当に活動中
今までの絵
右下に行くほど新
左上に行くほど古
リンクにマウスをあわせると
縮小画像表示

ちなみに読み込み遅いです。
最新コメント
カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
カテゴリ
リンク
テスト
クリックすると
シナリオ開始 
 
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。