〜お散歩英語 工作部屋〜

学習日記や英単語メモなどブログを英語学習に利用している人向けの、
javascriptを使った ランダム表示英単語カード ブログパーツ（HTMLソース）です。

自分のホームページやブログを一番よく見るのは、なんといっても自分自身。
というわけで、この英単語帳に覚えたい単語を入力して
ブログパーツとして表示させておけば、必然的に何度も目に入り、
英単語記憶・英語学習のプラスになるかと思います。
一応、英単語帳として作ったものですが、英語以外の言語や漢字、クイズなど
他のいろいろな用途に工夫して使って頂いて構いません。
このページの右サイドにあるのが実際の設置例です。
（現在のバージョンは 2.00 ）

設置は↓のスクリプトをブログのフリースペースにコピペして
ソース内の指定の場所に単語を入力するだけでＯＫ。
ただ、管理のしやすさから言うと、メモ帳か何かのエディタを使って
そこで 単語入力＆管理 をすることをおすすめします。

<!-- 【 My 英単語帳 】by お散歩英語 English Walk --> <script language="JavaScript" type="text/javascript"> <!-- var wcRN=0,wA,wB,B=0,All,Rand,Temp,wno=1,Button1,Button2,Cardname,FSize,FColor,Bgcolor,CHeight,CWidth,BorderStyle,CInvert,COrder; wA=new Array();wB=new Array();wA[wcRN]="";wB[wcRN]=""; // 単語入力エリア wcRN++; wA[wcRN]="memorize"; wB[wcRN]="覚える，暗記する"; // 表示順設定 CInvert="0"; // 1 にすると 問題と解答を反転。 COrder="0"; // 1 にすると 問題表示を並び順に。 // プログラム All=wA.length; if(COrder!=1){ for (var i=1;i<All;i++) { Rand= Math.floor(Math.random()*(All-1))+1; Temp = wA[i]; wA[i] = wA[Rand]; wA[Rand] = Temp; Temp = wB[i]; wB[i] = wB[Rand]; wB[Rand] = Temp; } } if(CInvert==1){ for(var i=1;i<All+1;i++){ Temp = wA[i]; wA[i] = wB[i]; wB[i] = Temp; } } function Cbutton(obj){ var b_label = obj.value; if (B==0) { B=1; } else { B=0; } if(B==1){ obj.value = Button2; document.dispform.disparea.value = wB[wno]; } if (B==0) { obj.value = Button1; if(wno==All-1){ wno=0; } document.dispform.disparea.value = wA[wno+1]; wno++; } } // 画面表示スタイル設定 Cardname='My 英単語帳'; // 表示タイトル Button1='答えを見る'; // 答えを表示するボタン文字 Button2='次の問題へ'; // 次の問題を表示するボタン文字 FSize='20px'; // 文字サイズ CHeight='80px'; // 高さ CWidth='180px'; // 幅 FColor='#fff'; // 文字色 Bgcolor='#292'; // 背景色 BorderStyle='border: 1px outset #fff; border-bottom: 10px solid #CC9900'; // ボーダー設定 // 表示プログラム document.write('<div align="center" style="width: 100%"><form name="dispform" style="margin: 10px 0px;">【 '+Cardname+' 】<br><textarea style="font-family: Verdana,Osaka,sans-serif; font-size: '+FSize+'; font-weight: normal; color: '+FColor+'; width: '+CWidth+'; height: '+CHeight+'; line-height: 1.1em; text-align: center; padding: 6px 3px 4px 5px; background-color: '+Bgcolor+'; '+BorderStyle+';" name="disparea" wrap="hard">'+wA[wno]+'<'+'/textarea><br><'+'/form>'); document.write('<form name="dispbutton" style="margin: 0px 0px;"><input name="nbutton" style="font-size:15px; margin: 0px;" type="button" value="'+Button1+'" onclick="Cbutton(this)" ondblclick="Cbutton(this)"><br>'); document.write('<'+'/form><'+'/div>'); // 画面表示スタイル・表示プログラムここまで // --> </script><noscript>【My 英単語帳】は Javascript が無効だと表示されません。<br></noscript> <div align="right" style="width: 80%; margin: 8px 0px;"><a href="http://park1.wakwak.com/~english/" style="font-size: 10px; text-decoration: none;">お散歩英語 English Walk</a><br></div> <!-- 【 My 英単語帳 】ここまで --> <!-- 補足説明（必要なければ以下まるごと削除してください。）--> <!-- 単語入力方法： 下の３行をコピペで、”単語入力エリア”に貼り付け、 ☆のところに表示したい文字を、★に答えの文字を入れてください。 wcRN++; wA[wcRN]="☆"; wB[wcRN]="★"; 表示タイトルなどを変更したいときは ”// 画面表示スタイル設定” 以下の各設定項目を好きなものに変えてください。（ ' 半角クオーテーションを入れたいときは \' で。＊下記注意参照） 色指定などはちょっとだけ（？）HTML知識が必要です。 使用上の注意： ・このスクリプトはＩＥ６で、動作確認しています。 　危険などはまったくないはずですが、 　スクリプトの使用は自己責任でお願いします。 ・文字列の途中で改行しないでください。 ・ひとつの画面内にこのプログラムを複数設置しないでください。 ・単語文字列の中に " （半角ダブルクオーテーション）が入っていると 　エラーで表示されなくなります。　" を表示したい場合は \" と、 　ダブルクオーテーションの前に \ （半角エンマーク？）をつけてください。 ・タイトルを変更される場合、文字列の中に ' （半角クオーテーション）が入っているとエラーになります。 　　' を表示したい場合は \' と、 　クオーテーションの前に \ （半角エンマーク？）をつけてください。 作成： お散歩英語 English Walk http://park1.wakwak.com/~english/ 詳しくは上記ホームページをご覧ください。バグ報告・質問などもこちらへ。 -->
テキストエリアで右クリック→すべて選択、右クリック→コピー。
もしくは、テキストエリアをクリックして [Ctrl]+[A] キー で全選択、[Ctrl]+[C] キーでコピー。
＊ 以前の英単語帳と入れ替える場合は、英単語も消してしまわないようご注意を。
単語データだけ他に移してから上書きしてください。

単語入力方法

単語登録はいたって簡単。
ソース内の”// 単語入力エリア”以下にある３行

wcRN++;
wA[wcRN]="☆";
wB[wcRN]="★";

の、☆のところに表示したい文字を、★に答えの文字を入れれば
ひとつ登録完了。あとはコピペでそれを繰り返すだけです。
（コピペの際は３行ひとまとめで扱ってください。）

入力例：

wcRN++;
wA[wcRN]="shrug off";
wB[wcRN]="〜を一笑に付す";
wcRN++;
wA[wcRN]="culprit";
wB[wcRN]="犯人，容疑者";
wcRN++;
wA[wcRN]="ordeal";
wB[wcRN]="試練";

使用上の注意

・入力文字列の中に " （半角ダブルクオーテーション）が入っていると
　エラーで表示されなくなります。　" を表示したい場合は ¥" と、
　クオーテーションの前に ¥（半角エンマーク）をつけてください。
・文字列の途中で改行しないでください。
・ひとつの画面内にこのプログラムを複数設置しないでください。
　以前のバージョンとも共存できません。
・自動改行が入る設定になっているブログ記事内などでは、
　自動改行しないように設定してお使いください。

このスクリプトはＩＥ６で、動作確認しています。
危険などはまったくないはずですが、使用は自己責任でお願いします。
スタイルのカスタマイズは自由です。（こちらも自己責任で）
使用条件等も特にありません。（再配布は禁止。）

スタイルを変えたいっ！

タイトル・文字・背景・境界線などは色々とカスタマイズ出来ます。
自分のブログに合うブログパーツとして、お好みに合わせて
”// 画面表示スタイル設定” 以下の各設定項目を変更してみてください。
（ ' 半角クオーテーションを入れたいときは ¥' で。）
一応、少しだけ（ボーダー設定はかなり）HTML知識が必要です。

「そんなこと出来るかっ！」「でも、見た目は変えたい」…という場合は
サンプルとして設定例を幾つかつくりましたので、
右サイド・設置例の下にあるサンプルの各ファイル内容を
コピペで ”// 画面表示スタイル設定”以下の

Cardname='My 英単語帳'; // 表示タイトル
Button1='答えを見る'; // 答えを表示するボタン文字
Button2='次の問題へ'; // 次の問題を表示するボタン文字

FSize='20px'; // 文字サイズ
CHeight='80px'; // 高さ
CWidth='180px'; // 幅

FColor='#fff'; // 文字色
Bgcolor='#292'; // 背景色
BorderStyle='border: 0px solid #fff; border-top: 8px double #f99; border-bottom: 8px double #f99'; // ボーダー設定

というところと差し替えれば簡単に変更できます。

前バージョンからの主な変更点
・ボタンを一つにまとめました。
・素早くボタンをクリックすると反応しなかったのを修正しました。
・問題と解答を簡単に入れ替えられるようにしました。
・ランダム表示と並び順表示を選べるようにしました。
・スタイル設定などをわかりやすく変更できるようにしました。…たぶん。
・その他、ちょこちょこと。