ゲンシジンが《走れメロス》を読んでくれます
「ゲンシジン ヨム ダザイ」で公開しているので遊びにきて下さい。
ソースコード
サーバ側
コード
ここをクリックするとコードが現れます。
import os
from bottle import get, post, request, static_file, run
from json import dumps, loads
@get('/reading/<filepath:path>')
def reading(filepath):
return static_file(filepath, root=APP_ROOT)
@post('/get_text')
def get_text():
global lines
line_number = int(request.forms.get("line_number"))
if(len(lines) <= line_number):
line_number = 0
next_line_number = line_number + 1
if(len(lines) <= next_line_number):
next_line_number = 0
d = lines[line_number]
d['text_length'] = len(d['utsusemi'])
d['next_line_number'] = next_line_number
return dumps(d)
APP_ROOT = os.path.dirname(os.path.abspath( __file__)) + "/"
f = open(APP_ROOT + "json/Meros.json", "r")
lines = loads(f.read())
run(host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))
簡単なAPIを実装しています。リクエストはPOSTだけに対応してます。
《リクエスト》
| キー名 | データ型 | 説明 |
|---|---|---|
| line_number | integer | 《走れメロス》のline_numberセンテンス目の現代人語とゲンシジン語を要求 |
《レスポンス》
| キー名 | データ型 | 説明 |
|---|---|---|
| utsusemi | string | 現代人語 |
| genshijin | string | ゲンシジン語 |
| text_length | integer | 現代人語でカウントした文字数 |
| next_line_number | integer | 次は何センテンス目か。末尾までいった場合は0を返す |
ディレクトリ構成
ここをクリックするとディレクトリ構成が現れます。
.
├── meros_api.py
├── index.html
├── css
│ ├── bootstrap.min.css
├── js
│ ├── bootstrap.bundle.min.js
│ └── jquery-3.3.1.min.js
└── json
└── Meros.json
WebフレームワークはBottleを使いました。pip install bottleとするか、bottle.pyをダウンロードして同じディレクトリに置くかして下さい。
CSSとjsファイルはBootstrapとjQueryからダウンロードします。
Meros.jsonは「COTOHA APIを使ってゲンシジン語と現代人語の対訳JSONを作る」で作ってます。
https://dazai-cotoha.herokuapp.com/reading/json/Meros.jsonからダウンロードもできます。
クライアント側
ここをクリックするとコードが現れます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var url = 'https://dazai-cotoha.herokuapp.com/get_text';
var reading = false;
var line_number = 0;
var instruction_text = "";
var brand_text = "";
function getDot() {
$.ajax({
url: url,
dataType: 'JSON',
type: 'POST',
data: {
'line_number' : line_number
}
}).done(function(data){
if (reading) {
$("#genshijin").text(data.genshijin);
$("#utsusemi").text(data.utsusemi)
line_number = data.next_line_number;
if (line_number != 0) {
setTimeout(getDot, data.text_length * 200);
} else {
setTimeout(stopReading, data.text_length * 200);
}
}
});
}
function startReading() {
$("button").text("ロウドク ヤメ");
reading = true;
}
function resumeReading() {
$("button").text("ロウドク ハジメ");
reading = false;
}
function stopReading() {
resumeReading();
$("#genshijin").text(instruction_text);
$("#utsusemi").text("")
}
</script>
<script>
$(function(){
$("button").click(function(){
if (reading) {
resumeReading();
} else {
getDot();
startReading();
}
return false;
});
});
$(function(){
instruction_text = $("#genshijin").text();
});
</script>
<script src="js/bootstrap.bundle.min.js"></script>
<title>ゲンシジン ヨ ム ダザイ</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand" id="subtitle">ゲンシジン ヨ ム ダザイ</span>
<form class="form-inline">
<button class="btn btn-outline-dark my-2" type="submit">ロウドク ハジメ</button>
</form>
</nav>
<div class="row">
<div class="col mx-2 my-2" id="genshijin" style="font-size: 100%">ロウドク ハジメ オ シ テ クダサ イ</div>
</div>
<div class="row">
<div class="col mx-2" id="utsusemi" style="font-size: 70%"></div>
</div>
</div>
</body>
</html>
定期的にajaxでサーバ側のAPIを叩いて、返ってきたゲンシジン語と現代人語を表示します。APIを叩く間隔は 文字数 x 200ms です。
骨組みは「$(function(){ の意味が解らないところからjQuery入門」で作ったものです。