COTOHA APIを使ってゲンシジンに《走れメロス》を読んでもらう

# [ゲンシジン](https://qiita.com/Harusugi/items/f499e8707b36d0f570c4 "「オレ プログラム ウゴカス オマエ ゲンシジン ナル」へのリンクです")が《走れメロス》を読んでくれます
![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.amazonaws.com/0/361903/0bb689ce-4c15-c33e-5549-a878230966a5.gif)

[「ゲンシジン　ヨム　ダザイ」](https://dazai-cotoha.herokuapp.com/reading/index.html)で公開しているので遊びにきて下さい。

# ソースコード
### サーバ側
#### コード
<details><summary>ここをクリックするとコードが現れます。</summary><div>

```python:meros_api.py
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)))
```
</div></details>
簡単なAPIを実装しています。リクエストはPOSTだけに対応してます。

《リクエスト》

| キー名 |データ型|説明|
|:-:|:-:|:--|
|line_number|integer|《走れメロス》のline_numberセンテンス目の現代人語とゲンシジン語を要求|

《レスポンス》

|キー名|データ型|説明|
|:-:|:-:|:--|
|utsusemi|string|現代人語|
|genshijin|string|ゲンシジン語|
|text_length|integer|現代人語でカウントした文字数|
|next_line_number|integer|次は何センテンス目か。末尾までいった場合は0を返す|

#### ディレクトリ構成
<details><summary>ここをクリックするとディレクトリ構成が現れます。</summary><div>

```
.
├── meros_api.py
├── index.html
├── css
│   ├── bootstrap.min.css
├── js
│   ├── bootstrap.bundle.min.js
│   └── jquery-3.3.1.min.js
└── json
    └── Meros.json
```
</div></details>

Webフレームワークは[Bottle](https://bottlepy.org/docs/dev/ "Bottle公式ページへのリンクです")を使いました。`pip install bottle`とするか、`bottle.py`をダウンロードして同じディレクトリに置くかして下さい。

CSSとjsファイルは[Bootstrap](https://getbootstrap.com/docs/4.3/getting-started/download/ "Bootstrap公式ダウンロードページへのリンクです")と[jQuery](https://jquery.com/ "jQuery公式ページへのリンクです")からダウンロードします。

`Meros.json`は「[COTOHA APIを使ってゲンシジン語と現代人語の対訳JSONを作る](https://qiita.com/sgigagaeru/items/034a8f52990bf0444d5f "Qiita記事へのリンクです")」で作ってます。
[https://dazai-cotoha.herokuapp.com/reading/json/Meros.json](https://dazai-cotoha.herokuapp.com/reading/json/Meros.json "JSONファイルへのリンクです")からダウンロードもできます。

### クライアント側
<details><summary>ここをクリックするとコードが現れます。</summary><div>

```html:index.html
<!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>
```
</div></details>
定期的にajaxでサーバ側のAPIを叩いて、返ってきたゲンシジン語と現代人語を表示します。APIを叩く間隔は 文字数 x 200ms です。
骨組みは「[$(function(){ の意味が解らないところからjQuery入門](https://qiita.com/sgigagaeru/items/c1cfd0ecd673b5be4cff "Qiita記事へのリンクです")」で作ったものです。

# 参考
[オレ プログラム ウゴカス オマエ ゲンシジン ナル](https://qiita.com/Harusugi/items/f499e8707b36d0f570c4 "Qiita記事へのリンクです")