英会話学習 – 院長室

ネットにはいろんな英語教材がある。とりわけ英語、日本語相互に対応した表現の事例に目が行き、「ああ、こんなのが使えればかっこいいな」と飛びついてはみたものの、ものの数分も経たないうちに忘れてしまっている。

ということで気に入った箇所をコピーし,ひとつのファイルをクリックするだけで、練習用のページが立ち上がるようなものをcopilotさんと相談しながら作ってみた。

AAA_JSmaker.py

  
import os
import pyperclip
import webbrowser

def remove_blank_lines(input_text):
    # 空白行を除去したリストを返す
    return [line for line in input_text.splitlines() if line.strip() != '']

def swap_line_pairs(lines):
    # 奇数・偶数ペアで入れ替え（2,1,4,3,...）
    swapped = []
    for i in range(0, len(lines), 2):
        if i + 1 < len(lines):
            swapped.append(lines[i + 1])  # 偶数行
        swapped.append(lines[i])          # 奇数行
    return swapped

def label_lines(input_text):
    lines = input_text.strip().split('\n')
    labeled_lines = []

    for i, line in enumerate(lines):
        label = 'SN++;phrJ[SN]=' if i % 2 == 0 else 'phrE[SN]='
        labeled_lines.append(f'{label}"{line}";')
    return '\n'.join(labeled_lines)

# ファイル読み込み
original_text = pyperclip.paste()
order = ""
header = "var SN=0,phrE,phrJ,Temp,Rand,Qnow=1,disp_state=0,phrE=[],phrJ=[];\n"

script_dir = os.path.dirname(os.path.abspath(__file__)) + "\\"

# 空白行除去
clean_lines = remove_blank_lines(original_text)
clean_text = '\n'.join(clean_lines)


file=script_dir + 'check_EJ.js'
with open(file,'w',encoding="shift=jis") as f:
    f.write(header + label_lines(clean_text))

# 入れ替え処理
swapped_text = '\n'.join(swap_line_pairs(clean_lines))

file=script_dir + 'check_JE.js'
with open(file,'w',encoding="shift-jis") as f:
    f.write(header + label_lines(swapped_text))


# 表示したいHTMLファイルのパス
html_file = os.path.abspath(script_dir +"\\check_EJ.html")

# デフォルトのブラウザで開く
webbrowser.open(f"file://{html_file}")

check_EJ.html

  
<!DOCTYPE html>
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" href="moment.css">
<title></title>
</head>
<body>

<div id="layout">
<div style="text-align: left;">
<a href="check_JE.html">E -> J</a>
</div>

<script type="text/javascript" src="check_EJ.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="functions_conseq.js" charset="Shift_JIS"></script>

<div style="text-align: right;"><button onClick="originalNumber()">again</button></div>

</div>
</body></html>

check_JE.html

  
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <link rel="stylesheet" href="moment.css">
    <title></title>
  </head>
  <body>
    <div id="layout">
      <div style="text-align: left;">
        <a href="javascript:history.back()">J -> E</a>
      </div>
      <script type="text/javascript" src="check_JE.js" charset="Shift_JIS"></script>
      <script type="text/javascript" src="functions_conseq.js" charset="Shift_JIS"></script>
      <div style="text-align: right;">
        <button onClick="originalNumber()">again</button>
      </div>
    </div>
  </body>
</html>

functions_conseq.js

  

var esAll=SN;
document.write('<div id="disp_sample" style="font-size: 130%;  width: 80%; text-align: center; margin: 5px 0px; padding: 14px 6px; color: #333366; background-color:#ffffe0; border: 0px; border-top: 4px solid #FF9900;  border-bottom: 4px solid #FF9900; cursor:pointer;" onclick="next_sample()" OnSelectStart="return false;"></div>');

if(document.getElementById){
	document.getElementById("disp_sample").innerHTML = phrJ[Qnow];
}

function next_sample(){
	if(disp_state!=1){
		if(document.getElementById){
			disp_sample.style.fontSize='140%';
			document.getElementById("disp_sample").innerHTML = phrE[Qnow];
		}
		disp_state=1;
		Qnow++;
		if(Qnow > esAll) { 
			Qnow=1;
		}
	}else{
		if(document.getElementById){
			disp_sample.style.fontSize='130%';
			document.getElementById("disp_sample").innerHTML = phrJ[Qnow];
		}
		disp_state=0;
	}
}

function originalNumber() {
  Qnow=Qnow-1;
  if(Qnow<=0){Qnow=1}; 
  next_sample();
}

moment.css

  
@charset "Shift_JIS";

* {
    margin: 0;
    font-family: 'ヒラギノ明朝','Verdana', 'Arial','メイリオ', sans-serif;
}
a:link{
    text-decoration: none;
}

#layout{
  width: 50%;
  text-align:center;
  padding: 0;
  margin: 0;
  margin-left:auto;
  margin-right:auto;
  padding-top: 80px;
  padding-bottom: 10px;
  background-color: #fff;
  background-repeat: no-repeat;
  position: relative;
}

説明

AAA_JSmaker.py
check_EJ.html
check_JE.html
functions_conseq.js
moment.css

ファイルをすべてまとめて任意のフォルダに入れ、学習したい箇所をコピーし、AAA_JSmaker.py　ファイル(名前変更可)をクリックするだけ。

出てきた文章の部分をクリックすると次に進み、againクリックでひとつ前に戻る。J->E もしくは　E->J　クリックで英日、日英に変更。

ちなみにpython　ならびに　pyperclipモジュールがインストールされてないと動きません。
文章にダブルクォーテーション(")があると動きません。
うさんくさいと最初から無視する人は、クリックするファイルそのものがないので絶対に動きません。

なお前回、例文「裸の王様」を用意しておきました