更新
例題で学ぶ JavaScriptプログラミング(応用編)
小山智史
基礎編ではすべてliteracy.htmlのWebページでプログラムを動作させました。この応用編で取り上げるプログラムはそれぞれ別のHTMLファイルにしてliteracy.htmlからリンクすることにしますので、準備してください。
literacy.html:
|
<![CDATA[<!DOCTYPE html>
<h2>JavaScriptプログラミング</h2>
<ul>
<li><a href=bmitable.html>BMI早見表</a>
<li><a href=sumotable.html>歴代の横綱(一覧表示)</a>
<li><a href=merge.html>定型文書の作成</a>
<li><a href=rmail.html>定型メールの受信処理</a>
<li><a href=wcount.html>教材分析(頻出単語)</a>
<li><a href=pcount.html>教材分析(パターン検索)</a>
<li><a href=rscore.html>教材分析(可読性)</a>
<li><a href=hyaku.html>百人一首</a>
<li><a href=textgen.html>テキスト生成</a>
<li><a href=ishi.html>石取りゲーム</a>
<li><a href=hanoi.html>ハノイの塔</a>
<li><a href=pair.html>記述式クイズ</a>
<li><a href=subst.html>穴埋め問題</a>
</ul>
]]> |
14. BMI早見表
基礎編で度々登場したBMIですが、ここではBMIの早見表を作ってみます。表示内容を書き換えることはないので、document.writeを使って表示します。
次のようにbmitable.htmlを作り、literacy.htmlからリンクをクリックして表示してください。
bmitable.html:
|
<![CDATA[<!DOCTYPE html><html>
<h2>BMI早見表</h2>
<script>
function bmicalc(h,w){
return Math.round(w*10000/(h*h)*10)/10
}
document.write("<table border><tr><th>cm/kg</th>")
for(var w=40; w<=70; w+=5) document.write("<th>"+w+"</th>")
document.write("</tr>")
for(var h=150; h<=185; h+=5){ // 身長(h)を変える
document.write("<tr><th>"+h+"</th>")
for(var w=40; w<=70; w+=5){ // 体重(w)を変える
document.write("<td>"+bmicalc(h,w)+"</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
]]> |
以下のような早見表が表示されます。
早見表を2cm/2kg刻みにし、値によって文字の表示色を変えると以下のようになります。
(練習) BMIの早見表のプログラムを参考に、各自、関心のある事柄ついて早見表を作りなさい。
15. 文書整形
15.1 データの一覧表示
sumo.js の内容を一覧表示してみます。
sumotable.html:
|
<![CDATA[<!DOCTYPE html>
<h2>歴代の横綱</h2>
<script src=sumo.js></script>
<table border style=border-collapse:collapse;>
<tr bgcolor=lightgray>
<th>名前</th>
<th>出身地</th>
<th>身長(cm)</th>
<th>体重(kg)</th>
</tr>
<script>
for(var i=0; i<sumo.length; i=i+1){
document.write("<tr>#)
document.write("<td>"+sumo[i][0]+"</td>") // 名前
document.write("<td>"+sumo[i][1]+"</td>") // 出身地
document.write("<td>"+sumo[i][2]+"</td>") // 身長
document.write("<td>"+sumo[i][3]+"</td>") // 体重
document.write("</tr>")
}
</script>
</table>
]]> |
次のように表示されます。
| 名前 | 出身地 | 身長(cm) | 体重(kg) |
|---|
| 栃錦 | 東京都 | 178 | 127 |
| 若乃花 | 青森県 | 177 | 105 |
| 朝潮 | 鹿児島県 | 188 | 145 |
| 柏戸 | 山形県 | 188 | 146 |
| 大鵬 | 北海道 | 187 | 144 |
| ... | | | |
| 照ノ富士 | モンゴル | 192 | 184 |
15.2 定形文書の作成
ワープロソフトの機能のひとつに「差し込み印刷」があります。定型文書の宛名の部分に住所録データから必要項目を当てはめるというような機能です。
merge.html:
|
<![CDATA[<!DOCTYPE html>
<h2>定型文書</h2>
<textarea rows=6 cols=40 id=TEMPLATE></textarea>
<button onclick=merge()>整形</button>
<textarea rows=6 cols=40 id=RESULT></textarea>
<script src=sumo.js></script>
<script>
function merge(){
var s=""
for(var i=0; i<sumo.length; i++){
var template=TEMPLATE.value
for(var j=0; j<sumo[i].length; j++){
template=template.replace("#"+(j+1), sumo[i][j])
}
s=s+template+"--\n"
}
RESULT.value=s
}
</script>
</table>
]]> |
ここでは、下記左のテキストエリアに「雛形」を用意します。ボタンを押すと、右のテキストエリアに結果が表示されます。
ボタンを押すと、左のテキストエリアの内容を template という変数にしまい、#1 ～ #4 をそれぞれ名前、出身地、身長、体重に置き換えて右のテキストエリアに表示されます。
(練習) 上記の定型文に、BMIの値も表示させるようにしなさい。
15.3 定型メールの受信処理
イベントの参加申し込みなど、最近はWebのフォーム入力で行うことがほとんどかもしれませんが、メールが使われる場合もあります。
rmail.html:
|
<![CDATA[<!DOCTYPE html>
<h2>定型メールの受信処理</h2>
<textarea rows=8 cols=30 id=RMAIL></textarea>
<button onclick=merge()>整形</button>
出身地<input id=SYUSSIN> 名前<input id=NAMAE> 身長<input id=SINCHO> 体重<input id=TAIJU>
<script>
function rmail(){
var lines=RMAIL.value.split("\n")
for(var i=0; i<lines.length; i++){
if(lines[i].match(/%%出身地%%:/)) SYUSSIN.value=lines[i].replace(/^.*%%出身地%%:/,"")
else if(lines[i].match(/%%名前%%:/)) NAMAE.value=lines[i].replace(/^.*%%名前%%:/,"")
else if(lines[i].match(/%%身長%%:/)) SINCHO.value=lines[i].replace(/^.*%%身長%%:/,"")
else if(lines[i].match(/%%体重%%:/)) TAIJU.value=lines[i].replace(/^.*%%体重%%:/,"")
}
}
</script>
]]> |
メールで以下のような案内があったとします。
|
<![CDATA[...参加を希望される方はこのメールに必要事項を記載して返信してください。
---ここから---
%%出身地%%:
%%氏名%%:
%%身長%%:
%%体重%%:
...
]]> |
これに対して届いた返信メールを以下のようにテキストエリアに貼り付けます。
ボタンを押すと「%%...%%:」を調べて、内容がそれぞれの箇所に表示されます。
実際には記載事項に不備がないかや、二重登録でないかなど、もっと詳細にチェックします。
16. 順序機械: 自動販売機
150円のジュース自動販売機のプログラムを作りましょう。お金は50円と100円が使えるものとします。自動販売機の内部状態としては、0円状態、50円状態、100円状態の3つが考えられます。出力はジュースまたはジュースとおつり(50円)です。この自動販売機の動作は下の図のように表すことができ、これを状態遷移図といいます。矢印は状態の遷移を表し、その矢印に付随して入力と出力を記載しています。このような機械を順序機械(または有限状態機械)といいます。
図 自動販売機の状態遷移図
状態遷移関数および出力関数は以下のような表で表すことができ、表中には「次の状態/出力」が記載されています。この表を状態遷移表といいます。
表 状態遷移表(表中は「次の状態/出力」)
| | 入力 |
| 0円 | 50円 | 100円 |
|---|
| 現在の状態 |
0円 | 0円/なし | 50円/なし | 100円/なし |
|---|
| 50円 |
50円/なし | 100円/なし | 0円/ジュース |
|---|
| 100円 |
100円/なし | 0円/ジュース | 0円/ジュース・おつり |
|---|
状態遷移表の状態遷移関数と出力関数を連想配列 S で記述し、以下のように順序機械のプログラムを書くことができます。
juice.html:
|
<![CDATA[<!DOCTYPE html>
<h2>自動販売機</h2>
入力: <button onclick=trans("50円")>50円</button>
<button onclick=trans("100円")>100円</button><br>
出力: <input id=OUT><br>
状態: <input size=4 id=STATE>
<script>
// 状態遷移表... 0円状態の時に50円入れると
var S={ // 次の状態はS["0円"]["50円"][0], 出力はS["0円"]["50円"][1]
"0円": {"50円":["50円","なし"], "100円":["100円","なし"]},
"50円": {"50円":["100円","なし"], "100円":["0円","ジュース"]},
"100円":{"50円":["0円","ジュース"], "100円":["0円","ジュース・おつり"]}
}
STATE.value="0円"; // 初期状態を表示
function trans(input){
OUT.value =S[STATE.value][input][1]; // 出力表示
STATE.value=s=S[STATE.value][input][0]; // 状態表示更新
setTimeout("OUT.value=''",1000); // 1秒後に出力表示を消す
}
</script>
]]> |
このプログラムは以下のように動作します。
プログラム中、S={...} の箇所は、状態遷移表を S[現在の状態][入力][次の状態,出力] のように表しています。例えば S["0円"]["50円"][0] は"0円"状態で"50円"の入力があった時の次の状態"50円"、S["0円"]["50円"][1] はその時の出力"なし"、...となっています。
表示を工夫すると以下のようになります。
17. 教材分析
17.1 頻出単語
英文テキストを調べ、大小文字の区別なしに、3回以上現れる単語を調べるプログラムです。入力されたテキストを tolower() で大文字を全部小文字に変換し、replace() でアルファベット以外の数字や記号を除きます。単語のカウントを行い、集計終了後に3回以上現れた単語を表示します。
wcount.html:
|
<![CDATA[<!DOCTYPE html>
<h2>教材分析(頻出単語)</h2>
英文入力:<br>
<textarea rows=6 cols=40 id=ETEXT>Paste English text here.</textarea><br>
<button onclick=wordfreq()>単語頻度の分析</button><br>
<textarea rows=8 cols=20 id=WCOUNT></textarea>
<script>
WCOUNT.value=""
function wordfreq(){
var count={} // 単語カウントの連想配列
var word=ETEXT.value.toLowerCase() // アルファベットは小文字に統一し
.replace(/[^a-z]+/g," ") // [a-z]以外の文字はスペースに置き換え
.replace(/^ */,"").replace(/ *$/,"") // 行頭と行末のスペースを削除し
.split(/ +/) // スペースを区切り文字として分割
for(var i=0; i<word.length; i++){ // 各単語について
if(!count[word[i]]) count[word[i]]=0 // 新しい単語はカウント0
count[word[i]]++ // 出現単語のカウントアップ
}
var s=""
for(var w in count) if(count[w]>=3) s+=(count[w]+" "+w+"\n") // 単語と出現数を表示
WCOUNT.value=s
}
</script>
]]> |
以下の入力欄に英文テキストを入力し、ボタンを押してみてください。(デフォルトの文章はこちらから引用しました)
17.2 パターン検索
以下は、入力した正規表現にマッチする単語を探して表示するプログラムです。
pcount.html:
|
<![CDATA[<!DOCTYPE html>
<h2>教材分析(パターン検索)</h2>
英文入力:<br>
<textarea rows=6 cols=40 id=ETEXT>Paste English text here.</textarea><br>
<button onclick=pattanal()>文字パターンの分析</button>
<input id=PATTERN><br>
<textarea rows=8 cols=20 id=PCOUNT></textarea>
<script>
PATTERN.value="^..t" // 初期パターン
PCOUNT.value=""
function pattanal(){
var count={};
var word=ETEXT.value.toLowerCase()
.replace(/[^a-z]+/g," ") // [a-z]以外の文字はスペースに置き換え
.replace(/^ */,"").replace(/ *$/,"") // 行頭と行末のスペースを削除し
.split(/ +/) // スペースを区切り文字として分割
for(var i=0; i<word.length; i++){ // 各単語について
if(word[i].match(PATTERN.value)){ // パターンがマッチすれば
if(!count[word[i]]) count[word[i]]=0 // 新しい単語はカウント0
count[word[i]]++ // 出現単語のカウントアップ
}
}
var s=""
for(var w in count) s+=(count[w]+" "+w+"\n") // 単語と出現数を表示
PCOUNT.value=s
}
</script>
]]> |
「 ^..t 」は「3文字目が t の単語を探しなさい」という意味です。「 e$ 」とすれば「最後が e で終わる単語」、「 ^t.*t$ 」とすれば「 t で始まって t で終わる単語」ということになります。
17.3 可読性(読みやすさ)
ARI Readability Score は次式で与えられます(L.L.Cherry, W.Vesterman:``Writing Tools - The STYLE and DICTION Programs'',UNIX Document, USD-32.)。
<![CDATA[
G = 4.71 lpw + 0.5 wps - 21.43
lpw:1単語の平均文字数
wps:1文の平均単語数
]]>
英語文書が与えられたとき、以下のプログラムは、段落や文章や単語の数、1段落の平均文数、1文の平均単語数、1単語の平均文字数、そしてARIスコアを計算し、表示します。
rscore.html:
|
<![CDATA[<!DOCTYPE html>
<h2>教材分析(可読性)</h2>
英文入力:<br>
<textarea rows=6 cols=40 id=ETEXT>Paste English text here.</textarea><br>
<button onclick=rscore()>ARI Readability Score</button><br>
<textarea rows=8 cols=20 id=RSCORE></textarea>
<script>
RSCORE.value=""
function round1(x){ return Math.round(x*10)/10 }
function rscore(){
var text=ETEXT3.value.replace(/\n$/,"").split("\n") // text[i]は段落(行)
var np=text.length // 段落数(行数)
var ns=0 // 文数
var nw=0 // 単語数
var nl=0 // 文字数
var s=""
for(var i=0; i<text.length; i++){ // 各段落(行)について
text[i]=text[i].replace(/[^A-Za-z.!?]+/g," ") // [A-Za-z.!?]以外はスペースに置き換え
.replace(/^ */,"") // 先頭のスペースを削除し
.replace(/[.!?]* *$/g,"") // 末尾の[.!?]]とスペースを削除し
.split(/[.!?] */) // [.!?]を区切り文字として分解するとtext[i][j]は文
ns+=text[i].length // 文数を加算
for(var j=0; j<text[i].length ; j++){ // 各文について
text[i][j]=text[i][j].split(/ +/) // 1個以上のスペースを区切り文字として分解したtext[i][j][k]は単語
nw+=text[i][j].length // 単語数を加算
for(var k=0; k<text[i][j].length; k++){
nl+=text[i][j][k].length // 文字数を加算
}
}
}
var spp=ns/np // 文数/段落
var wps=nw/ns // 単語数/文
var lpw=nl/nw // 文字数/単語
var G=4.71*lpw+0.5*wps-21.43
s+="No. paragraphs: "+np+"\n" // 段落数を表示
s+="No. sentences: "+ns+"\n" // 文数を表示
s+="No. words: "+nw+"\n" // 単語数を表示
s+="No. letters: "+nl+"\n" // 文字数を表示
s+="Avg. paragraph length: "+round1(spp)+" sentences\n" // 文数/段落 を表示
s+="Avg. sentence length: "+round1(wps)+" words\n" // 単語数/文 を表示
s+="Avg. word length: "+round1(lpw)+" letters\n" // 文字数/単語 を表示
s+="ARI score: "+round1(G)+"\n" // ARIスコアを表示
RSCORE.value=s
}
</script>
]]> |
以下の入力欄に英文テキストを入力し、ボタンを押してみてください。
英文入力:
|
分析結果:
|
(練習) 日本語文書を解析し、40文字以上「、」が現れない文、および80文字以上「。」が現れない文を抽出するプログラムを作りなさい。
(練習) 日本語の可読性の尺度として、次式が提案されている。例えば、小学3年レベルの文章ならばGが3、中学3年レベルの文章ならばGが9と評価される。(情報処理学会HI37-7, 1991)
G=-0.17h-0.28k-3.49e+27.62
h:ひらがなの相対頻度(%)
k:カタカナの相対頻度(%)
e:句点の相対頻度(%)
この式に基づき日本語文書を解析し、可読性を表示するプログラムを作りなさい。
17.4 百人一首
hyaku.js というファイルには「百人一首の上句、下句、作者」のデータが以下のように入っています。テキストエディタでこのファイルを開いて中を確認してください。
hyaku.js:
|
<![CDATA[var hyaku = [
["秋の田の...","わが衣手は...","天智天皇"],
["春すぎて...","衣ほすてふ...","持統天皇"],
...
]
]]> |
次のプログラムは、上句と下句と作者のそれぞれにキーワードを指定して、該当する句を表示するものです。例示では上句の先頭文字が「春夏秋冬」のいずれかで、作者に「天皇」を含む句を指示しています。
hyaku.html:
|
<![CDATA[<!DOCTYPE html>
<h2>百人一首</h2>
上句 <input id=KW0> 下句 <input id=KW1>
作者 <input id=KW2> <button onclick=search()>調べる</button><br>
<div id=HYAKU></div>
<script src=hyaku.js></script>
<script>
function search(){
var s=""
for(var i=0; i<hyaku.length; i++){
if(hyaku[i][0].match(KW0.value)
&&hyaku[i][1].match(KW1.value)
&&hyaku[i][2].match(KW2.value)){
s+=hyaku[i][0]+" "+hyaku[i][1]+" "+hyaku[i][2]+"<br>"
}
}
HYAKU.innerHTML=s
}
</script>
]]> |
ボタンを押してみてください。
(練習) 百人一首について、別の点に着目して調べなさい。
17.5 テキスト生成
prob27.js にはスペース(sp)を含むアルファベット27文字の出現確率が以下のように入っています(確率データは R.I.Damper, 1984)。テキストエディタでこのファイルを開いて中を確認してください。
prob27.js:
|
<![CDATA[var prob27 = [
["sp",.174],
["A",.067],
["B",.012],
...
];
]]> |
以下のプログラムはこの確率でランダムに100文字のテキストを生成するものです。
textgen.html:
|
<![CDATA[<button onclick=textgen()>テキスト生成</button>
<textarea id=GENTEXT rows=4 cols=40></textarea>
<script src=prob27.js></script>
<script>
function letter(){ // ランダムに1文字を返す
var r=Math.random() // rは0～1
var P=0
for(var i=0; i<prob27.length; i++){
P+=prob27[i][1] // Pは0→1
var c=prob27[i][0]
if(r<P) return (c=="sp"?" ":c)
}
}
function textgen(){
var s=""
for(var i=0; i<100; i++) s=s+letter() // 100文字生成
GENTEXT.value=s
}
</script>
]]> |
ボタンを押してみてください。英文らしくはありませんが...。
18. ゲームとパズル
ゲームとパズルのプログラムを取り上げます。どちらもコンピュータが問題を解いているように見えるかもしれませんが、解法はプログラムとして与えていることに注意してください。
18.1 石取りゲーム
10個の石があります。交互に1～3個の石を取り、最後に石を取ったら負けというゲームです(奥村晴彦「C言語による最新アルゴリズム事典(技術評論社)」)。
|
1～3個の石を取ることができます。最後に石を取った方が負けだよ。
|
このプログラムは次のようになっています。
ishi.html:
|
<![CDATA[<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>石取ゲーム</title>
</head>
<body>
<select id=ISHINUM>
<option value=1>1個</option>
<option value=2>2個</option>
<option value=3>3個</option>
</select><button onclick=user()>石を取る</button>
<script>
var n=10
var m=3
ISHI.innerHTML=rep("●",n);
function user(){
var x=ISHINUM.value
if(x>n) alert(x+"個は取れないよ!")
else{
ISHI.innerHTML=rep("●",n-=x)
setTimeout("computer()",1000)
}
}
function computer(){
if(n<=0){
alert("あなたの負け!!");
}else{
var x=(n-1)%(m+1) // ここがポイント
if(x==0) x=1 //
alert("コンピュータ: "+x+"個の石を取るよ")
ISHI.innerHTML=rep("●",n-=x)
if(n<=0){
alert("コンピュータの負け!!");
ISHI.innerHTML=rep("●",n=10)
}
}
}
function rep(s,n){ if(n==0){return ""}else{return s+rep(s,n-1)}}
</script>
]]> |
コンピュータの戦略は以下の箇所にあります。
<![CDATA[...
x=(n-1)%(m+1)
if(x==0) x=1
...
]]>
相手が1個取ったらコンピュータは3個...というように4個ずつ確実に減らすことができるので、4の倍数+1個残せれば勝ちが決まります。それがだめなら1個取ります。
(練習) 石の数(n)や、取ることができる最大個数(m)を変えてみなさい。そして、「あなた」が勝つことができるかどうか試みなさい。
18.2 ハノイの塔
3本の棒A,B,Cがあり、Aの棒にn枚(以下の例では4枚)の円盤が積み重ねられています。これらの円盤をBの棒に移すにはどのような手順で移動したらいいかという問題です。ただし、円盤は1度に1枚ずつ移動し、小さな円盤の上に大きな円盤を重ねることはできません。
図8 ハノイの塔
以下のプログラムは、どのように移動すればよいかを表示します。
hanoi.html:
|
<![CDATA[<!DOCTYPE html>
<h2>ハノイの塔</h2>
<script>
hanoi(4,"A","B","C")
function hanoi(n,from,to,buf){
if(n>0){
hanoi(n-1,from,buf,to) // fromにあるn-1枚の円盤をbufに移す
document.write(from+"→"+to+"<br>") // fromに残った1枚の円盤をtoに移す
hanoi(n-1,buf,to,from) // bufに待避したn-1枚の円盤をtoに移す
}
}
</script>
]]> |
プロクラムはとても短いもので、関数 hanoi() の中では、hanoi() を再帰的に呼び出しています。from の n-1 枚の円盤をとりあえず buf に移し、次に from に残った1枚の円盤を to に移し、buf に移した n-1 枚の円盤を to に戻します。このように「より簡単な問題に分解して問題を解決する方法」を分割統治といいます。
この例のように「自分の考え方が正しいかどうか」を実際にプログラムを作って検証するということはプログラミングの重要な利用法のひとつです。
円盤の表示を工夫したプログラム...
19. 対話型学習ソフト
19.1 記述式クイズ
下記は「対の関係」を記述式で問うプログラムです。データを変えれば、「日本語を示し、英単語を問う問題」、「英単語を示し、逆の意味の英単語を問う問題」、「漢字を示し、読みを問う問題」などとなります。
pair.html:
|
<![CDATA[<!DOCTYPE html>
<h2>記述式クイズ</h2>
<div id=Q></div>
<input id=A><button onclick=answer()>回答</button>
<button onclick=NR++;question()>次の問題</button>
<div id=KR></dir>
<script>
var QAdata=[ // 問題データ
["愛","love"],
["飛行機","airplane"],
["夢","dream"],
["猿","monkey"],
["休日","holiday"],
["学校","school"]
]
//shuffle(QAdata) // 出題順をシャフル
var NR=0 // 第1問から
function question(){
if(NR>=QAdata.length) alert("終了しました")
else{ // まだ問題が残っていれば
Q.innerHTML="問"+(NR+1)+": "+QAdata[NR][0]+" は何ですか?"
A.value="" // 回答欄を空欄に
KR.innerHTML="" // KR欄を空欄に
}
}
function answer(){
if(A.value==QAdata[NR][1]){
KR.innerHTML="〇 正解です"
}else{
KR.innerHTML="× 違います 正解: "+QAdata[NR][1]
}
}
</script>
]]> |
(練習) プログラムを変更し、全問終了後に正答数を表示するようにしなさい。
19.2 穴埋め問題
プログラムは以下のようになっています。
subst.html:
|
<![CDATA[<!DOCTYPE html>
<h2>穴埋め問題</h2>
<div id=Q></div>
<input id=A><button onclick=answer()>回答</button>
<button onclick=NR++;question()>次の問題</button>
<div id=KR></dir>
<script>
var QAdata=[ // 問題データ
["夢(1)みる","を"],
["猿(1)木(2)落ちる","も","から"],
["温(1)知(2)","故","新"],
["(1)+(2)=12 (1)-(2)=6",9,3],
["(1)なぜなくの(1)は(2)に～","からす","山"]
]
//shuffle(QAdata) // 出題順をシャフル
var NR=0 // 第1問から
function question(){
if(NR>=QAdata.length) alert("終了しました")
else{ // まだ問題が残っていれば
Q.innerHTML="問"+(NR+1)+": "+QAdata[NR][0]+" は何ですか?"
A.value="" // 回答欄を空欄に
KR.innerHTML="" // KR欄を空欄に
}
}
function answer(){
if(A.value==pair[NR][1]){
KR.innerHTML="〇 正解です"
}else{
KR.innerHTML="× 違います 正解:"+QAdata[NR][1]
}
}
</script>
]]> |
誤答時にヒントを出すなど、いくつかのパターンのクイズを作成できるJavaScriptプログラムがこちらにあります。
(練習) プログラムを変更し、データの構成を、「問題,解答1,解答2,...」のようにし、2つ以上の解答を許すようにしなさい。
koyama88@cameo.plala.or.jp
