■■■■
■■■■
■■■

情動の書庫 -Emotional archive-

無料のオリジナル声劇台本置き場

1-1　任意の役のセリフの色を変える

声劇を行うにあたって、演じる役のセリフを見やすくするために色を変えます。

デモ

選択役名
タカシ
メグミ
役名セリフ
タカシ

メグミ、お前に聞いてほしいことがあるんだ
メグミ

え？　タカシ君、どうしたの？
タカシ

実は俺、お前の事、ス、ス……
メグミ

え、それってまさか、タカシ君！
タカシ

お前のこと……、ス、ス……。スパイダーマンに似てると思ってたんだ！
メグミ

ブチ殺すぞテメェ

1-2　JavaScriptで文字の色を変える

まずはシンプルに、セリフの色を変える関数を作ってみます。

サンプルコード

Javascriptの記述


function sample01(){
	var elements = document.getElementsByClassName("takashi");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "red";
	}
}

HTMLの記述


<input type="button" value="タカシのセリフの色を変える" onclick="sample01()">

<p class="takashi">タカシ：ご、ごめん。緊張してつい違うことを……</p>
<p class="megumi">メグミ：もう、やめてよね。変なこと言うの</p>
<p class="takashi">タカシ：いや、似てるのは間違いないんだけどね</p>
<p class="megumi">メグミ：間違いないのかよ！</p>

実行結果

タカシ：ご、ごめん。緊張してつい違うことを……

メグミ：もう、やめてよね。変なこと言うの

タカシ：いや、似てるのは間違いないんだけどね

メグミ：間違いないのかよ！

解説

１．<p class="takashi">

一つの役のセリフが入っている各要素に、固有のクラス名を付与します。クラス名は、同一の役のセリフに同一のクラス名であればどのような名前でも構いません。

２．var elements = document.getElementsByClassName("takashi");

変数elementsにgetElementsByClassNameを使って"takashi"のクラスを持つ全ての要素を取得します。

セリフは複数あることを前提とし、getElementsByidではなくgetElementsByClassNameを利用します。なお、getElementsByClassNameは配列を返すので、変数elementsは配列になっています。

３．for (var i=elements.length; i--; )

var i=elements.lengthで変数iに配列elementsの要素数を格納しています。これをもとに、forで配列の数だけ処理を繰り返します。

４．elements[i].style.color = "red";

一つ一つの要素に、style.colorで要素の色を指定します。背景色の場合は、style.backgroundColorで指定します。

５．<input type="button" value="タカシのセリフの色を変える" onclick="sample01()">

onclickでボタン押下時に指定した関数を実行させます。

1-3　セリフの色をもとに戻す

別の役に選択し直す場合を想定し、セリフの色をもとに戻す関数を組み込みます。

サンプルコード

Javascriptの記述


function sample02(){
	sample_reset();
	var elements = document.getElementsByClassName("takashi");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "red";
	}
}

function sample03(){
	sample_reset();
	var elements = document.getElementsByClassName("megumi");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "red";
	}
}

function sample_reset(){
	var elements = document.getElementsByClassName("role");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "#000";
	}
}

HTMLの記述


<input type="button" value="タカシのセリフの色を変える" onclick="sample02()">
<input type="button" value="メグミのセリフの色を変える" onclick="sample03()">

<p class="role takashi">タカシ：その……。ひと目見た時からお前のの顔が忘れられなくて……</p>
<p class="role megumi">メグミ：や、やだぁ、そんな……</p>
<p class="role takashi">タカシ：目も鼻も小さくて、平面な顔だなぁって</p>
<p class="role megumi">メグミ：テメェの顔の凹凸も削りとってやろうか？</p>

実行結果

タカシ：その……。ひと目見た時からお前の顔が忘れられなくて……

メグミ：や、やだぁ、そんな……

タカシ：目も鼻も小さくて、平面な顔だなぁって

メグミ：テメェの顔の凹凸も削りとってやろうか？

解説

１．<p class="role takashi">

全ての役の全てのセリフに、共通のクラス名を付与します。

２．var elements = document.getElementsByClassName("role");

"role"のクラスを持つ全ての要素を取得し、要素の色を指定します。

２．sample_reset();

役のセリフを変える関数の中に、全てのセリフの色を戻す関数を組み込みます。

1-4　ラジオボタンで選択した役の色を変える

役をラジオボタンで選択します。

サンプルコード

Javascriptの記述


function sample02(){
	sample_reset();
	var elements = document.getElementsByClassName("takashi");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "red";
	}
}

function sample03(){
	sample_reset();
	var elements = document.getElementsByClassName("megumi");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "red";
	}
}

function sample_reset(){
	var elements = document.getElementsByClassName("role");
	for (var i=elements.length; i--; ){
		elements[i].style.color = "#000";
	}
}

HTMLの記述


<form>
	<p><input type="radio" name="role" onclick="sample02()">タカシ</p>
	<p><input type="radio" name="role" onclick="sample03()">メグミ</p>
</form>

<p class="role takashi">タカシ：違うんだ。俺は、そんなお前が好きなんだ！</p>
<p class="role megumi">メグミ：もう、バカにされてるとしか思えないんだけど</p>
<p class="role takashi">タカシ：俺は、この胸のトキメキが抑えられねぇよ</p>
<p class="role megumi">メグミ：あたしは、この腹のイラダチが抑えられねぇよ</p>

実行結果

タカシ

メグミ

タカシ：違うんだ。俺は、そんなお前が好きなんだ！

メグミ：もう、バカにされてるとしか思えないんだけど

タカシ：俺は、この胸のトキメキが抑えられねぇよ

メグミ：あたしは、この腹のイラダチが抑えられねぇよ

解説

１．<input type="radio" name="role" onclick="sample02()">

ボタンとほぼ同じですが、nameを同じ名前にすることでラジオボタンが連動します。

1-5　テーブルに組み込む

役選択とセリフをテーブルに組み込みます。また、役が多くなると個別に関数を作るのが大変なので、関数に引数を渡して任意の役のセリフの色を変えます。

サンプルコード

Javascriptの記述


function sample_ChangeColor(RoleName){
	sample_ColorReset();
	var elements = document.getElementsByClassName(RoleName);
	for (var i=elements.length; i--; ){
		elements[i].style.backgroundColor = "#CCffff" ;
	}
}
	
function sample_ColorReset(){
	var elements = document.getElementsByClassName("role");
	for (var i=elements.length; i--; ){
		elements[i].style.backgroundColor = "#fff" ;
	}
}

CSSの記述


table{
	border: 1px #000000 solid;
	border-collapse: collapse;
	margin-top: 1em;
}

th{
	text-align: center; 
	vertical-align: middle;
	border: 1px #000000 solid;
	padding: 4px;
	background-color: #b0c4de;
}

td{
	text-align: left;
	vertical-align: middle;
	border: 1px #000000 solid;
	padding: 4px;
}

HTMLの記述


<table>
	<tr>
		<th>選択</th><th>役名</th>
	</tr>
	<tr class="role takashi">
		<td><input type="radio" name="role" onclick="sample_ChangeColor('takashi')"></td><td><p>タカシ</p></td>
	</tr>
	<tr class="role megumi">
		<td><input type="radio" name="role" onclick="sample_ChangeColor('megumi')"></td><td><p>メグミ</p></td>
	</tr>
	<tr class="role kengi">
		<td><input type="radio" name="role" onclick="sample_ChangeColor('kengi')"></td><td><p>ケンジ</p></td>
	</tr>
	<tr class="role kosuke">
		<td><input type="radio" name="role" onclick="sample_ChangeColor('kosuke')"></td><td><p>コウスケ</p></td>
	</tr>
	<tr class="role takuya">
		<td><input type="radio" name="role" onclick="sample_ChangeColor('takuya')"></td><td><p>タクヤ</p></td>
	</tr>
</table>
			
<table>
	<tr>
		<th>役名</th><th>セリフ</th>
	</tr>
	<tr class="role takashi">
		<td>タカシ</td><td><p>メグミ、俺と付き合ってくれ！</p></td>
	</tr>
	<tr class="role kengi">
		<td>ケンジ</td><td><p>待てよ！</p></td>
	</tr>
	<tr class="role megumi">
		<td>メグミ</td><td><p>ケンジ君！？</p></td>
	</tr>
	<tr class="role kengi">
		<td>ケンジ</td><td><p>俺も、メグミちゃんのまるで豚の様に突き出た腹が好きだったんだ！</p></td>
	</tr>
	<tr class="role megumi">
		<td>メグミ</td><td><p>ちょ、てめぇ</p></td>
	</tr>
	<tr class="role kosuke">
		<td>コウスケ</td><td><p>待ってくれ！　僕もメグミさんのそのゾウの様に太い足が好きなんだ！</p></td>
	</tr>
	<tr class="role megumi">
		<td>メグミ</td><td><p>コウスケ君！？　それどういうこと！？</p></td>
	</tr>
	<tr class="role takuya">
		<td>タクヤ</td><td><p>俺だってメグミのワキの匂いが好きだったんだよ！</p></td>
	</tr>
	<tr class="role megumi">
		<td>メグミ</td><td><p>タクヤ君も！？　てか臭くねーし！</p></td>
	</tr>
	<tr class="role takashi">
		<td>タカシ</td><td><p>くそう、メグミは俺のもんだ！</p></td>
	</tr>
	<tr class="role megumi">
		<td>メグミ</td><td><p>なんかモテてるけど……。全然うれしくない！</p></td>
	</tr>
</table>

実行結果

※同じページにサンプルを載せているので上のサンプルの結果が反映されています。お手数ですが煩わしい場合はリロードして下さい。

選択役名

タカシ

メグミ

ケンジ

コウスケ

タクヤ
役名セリフ
タカシ

メグミ、俺と付き合ってくれ！
ケンジ

待てよ！
メグミ

ケンジ君！？
ケンジ

俺も、メグミちゃんのまるで豚の様に突き出た腹が好きだったんだ！
メグミ

ちょ、てめぇ
コウスケ

待ってくれ！　僕もメグミさんのそのゾウの様に太い足が好きなんだ！
メグミ

コウスケ君！？　それどういうこと！？
タクヤ

俺だってメグミのワキの匂いが好きだったんだよ！
メグミ

タクヤ君も！？　てか臭くねーし！
タカシ

くそう、メグミは俺のもんだ！
メグミ

なんかモテてるけど……。全然うれしくない！

解説

１．function sample_ChangeColor(RoleName)

（）内のRoleNameが引数です。受け取った値を取得するクラス名にしています。

２．<input type="radio" name="role" onclick="sample_ChangeColor('takashi')">

ラジオボタンで対応する役のセリフのクラス名を渡します。引数に入れる文字列が""の中にあるので、'（シングルクォーテーション）で囲みます。

これによって、一つの関数で全ての役のセリフに対応させています。