英語の長文がスラスラ読めるようになる「トレーニングアプリ」を作ってみた．．．

#  ■アップデート内容
2022/07/09
スラッシュリーディングページの動詞は青、形容詞は紫というように色分けするようにしました。

2022/07/05
・文章の単語を１つずつ調べて品詞を特定し、より正確な位置に/を設定するようにしました（ついでに使用単語の品詞一覧も表示）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/a7b5fcac-a576-b36c-dcee-a2e4433bba60.png)

2022/06/21
・TOPページを見やすくしました
・スラッシュリーディングページの追加
スラッシュで区切った文ごとに訳を表示します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/c0adfcfe-0f81-5937-3e21-676a33c67253.png)
#  ■まえがき
皆さんはスラッシュリーディングとサイトトランスレーションという言葉を聞いたことがありますか？
私はスラッシュリーディングは知っていたのですが、先日、サイトトランスレーションという長文読解の速読トレーニング法を知り、AWSやプログラムの勉強も兼ねてWEBアプリ化してみました。↓
[Slash Reading & Sight Translation](https://16sw92fztg.execute-api.ap-northeast-1.amazonaws.com/Prod/input/)

しかし、出来上がった画面を見るとデザイン力がなさすぎることに気づかされる。。。
(´;ω;｀)

##  用語説明
・サイトトランスレーション（Sight Translation）
　英文を「チャンク」と呼ばれる意味のかたまりごとに区切り、前から訳していくトレーニングの方法（[引用元](https://englishhub.jp/method-2/sight-translation#:~:text=%E3%82%B5%E3%82%A4%E3%83%88%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%AF,%E3%82%82%E7%9F%A5%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)）

・スラッシュリーディング（Slash Reading）
　意味のまとまりで文章を区切って読んでいく方法で、英文の内容や構造を把握しながら読む力、英語を前から順に理解する力が付きます。 スラッシュリーディングを使えば、返り読みしなくなるので英文を読むスピードが格段に上がります。（[引用元](https://www.bizmates.jp/blog/slash-reading/#:~:text=%E3%82%B9%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AF%E3%80%81%E6%84%8F%E5%91%B3,%E3%81%8C%E6%A0%BC%E6%AE%B5%E3%81%AB%E4%B8%8A%E3%81%8C%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)）

・SAM (Serverless Application Model) 
　サーバーレスアプリケーション構築用のオープンソースフレームワークです。（[引用元](https://aws.amazon.com/jp/serverless/sam/)）

#  ■作成したWebアプリ使用手順
①URLにアクセス
Slash Reading & Sight Translation
https://16sw92fztg.execute-api.ap-northeast-1.amazonaws.com/Prod/input/

②サイトトランスレーションしたい英文を用意(VOAやDMM DAILY NEWSがおすすめです)
https://www.voanews.com/
https://eikaiwa.dmm.com/app/daily-news

③テキストボックスに英文を貼り付けます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/56fa670d-b5dd-58e9-3960-d5e31d29df85.png)

④「Set slash in the textbox」を選択して実行ボタンをクリック
　テキストボックスの文章にスラッシュがセットされます。/は語句を表し、//は文の終端を意味します。
　構文解析がまだまだ改良が必要で、/の位置がおかしい場合がありますので、その場合は書き換えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/f4b48f2f-62a1-4344-7e0b-296815859a47.png)
⑤翻訳する言語を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/becbc314-335f-cd0e-49b6-29d16228bce9.png)
⑥「Display slash reading page」または「Display sight translation page」を選択して実行ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/622ea404-d02d-432e-6924-43c6a8f95a59.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/15fb53ae-b15a-f0b7-0c47-03ad6a41f3fa.png)
中国語、フランス語、イタリア語、スペイン語、韓国語などにも対応
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/08acba55-dc46-1bb5-b731-21097f3bd35f.png)

#  ■開発環境
Windows
　└VSCode
　└Virtualbox
　　└Centos7、Docker、AWS CLI、SAM CLI

セットアップ方法は省いていたり、雑だったりします。すいません。

##  AWS IAMユーザー作成

必要な管理ポリシー
AWSCloudFormationFullAccess
IAMFullAccess
AWSLambda_FullAccess
AmazonAPIGatewayAdministrator
AmazonS3FullAccess
AmazonEC2ContainerRegistryFullAccess

##  SAM CLIのセットアップ
VirtualBox側のAWS Config設定をしておく
AWS SAM CLIインストール
以下の手順に従う
https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-linux.html
要約すると↓の感じでしたが↑の手順に沿ってもらうのがいいかと思います。
```
cd /tmp/
wget https://github.com/aws/aws-sam-cli/releases/latest/download/aws-sam-cli-linux-x86_64.zip
unzip aws-sam-cli-linux-x86_64.zip -d sam-installation
sudo ./sam-installation/install
sam --version
```
##  SAM CLIコマンド説明
https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-reference.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/3014fb9b-bdc3-6d40-1d66-a92590b62bea.png)

#  ■開発作業手順
①sam init：サーバーレスWEBアプリ作成
②template.yamlやプログラムをコーディングする
③sam build：ローカル環境でビルド
④sam local start-api -p 3080：ローカル環境に仮想APIGATEWAYを構築し、Lambda関数を呼び出せるようにする
⑤ローカル環境でテスト
⑥sam deploy --guided：AWS環境にリソースを構築
⑦AWS本番環境でテスト

#  ■請求アラーム設定
個人で開発した場合は過剰請求されると大変ですので設定は必須だと思います。
こちらを参考にさせていただきました
https://cloud5.jp/billing-alert-setting/

#  ■その他

## 参考サイト
以下のサイトを参考にさせていただきました。
https://www.ritolab.com/entry/228
https://zenn.dev/kouichirou/articles/a70a9e514a757b
https://dev.classmethod.jp/articles/lambda-vscode-environment/
https://xp-cloud.jp/blog/2020/10/15/8936/
https://zenn.dev/faycute/articles/9024115c4241b8
https://qiita.com/y4u0t2a1r0/items/2d27eed7afd4e4ffbab5
https://qiita.com/charon/items/050942e54bbc5c9d44f1
https://qiita.com/wjtnk/items/851f47958ed8c97ea96c

## 参考文献
凄くよく考えられた本でした。オススメです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115627/3a25a73c-e602-5b39-a9d1-dcf979e4aa2b.png)

https://www.kirihara.co.jp/product/detail/205804/