見出し画像

ゼロ知識からPythonを学び、簡単な勉強アプリを作成してみた[Aidemyプレミアムコース]

yubee

1．自己紹介、受講に至った経緯

はじめまして。今までプログラミングとは全く無縁の仕事をしてきましたが、結婚をきっかけに退職。現在は転勤族となり、主婦をしています。
今まで英語を活かした仕事に従事していく中で、GoogleなどのAI翻訳にお世話になることも多く、AIの翻訳レベルの成長を肌で感じてきました。AIに恩恵を受けながらも英語に関する仕事が近い将来AIにとられてしまうと不安を感じ、プログラミングに興味を持ったことがきっかけです。それから色々調べていくうちにプログラミングスクールの受講を決意しました。
Aidemyに申し込む決め手となったのが、「専門実践教育訓練給付金」を受けることができる対象スクールだったことと、全くの未経験者に対して、問題内容、チューターさんもどこのスクールよりも一番易しそうという少し不純な理由でした。


2．概要

1.どんな人に読んで欲しいか
プログラミングに興味があるも、習得できるか不安がある人。
教育関係のアプリ開発に興味がある方。
2.この記事に書くこと、わかること
文系高卒、プログラミングの知識ゼロの人間がシンプルなコードでアプリを作成していく流れがわかります。


3．Aidemyでの学習の振り返り

私は期間6ヵ月で自然言語処理講座を受講しました。
3ヵ月がスタンダードのようでしたが、挫折することが一番の懸念要素だったので、じっくり勉強して着実に習得していくために、せめて時間に余裕を持たせることにしました。もし、期間中に受講講座が終われば期間内であれば他の講座も受けていいというのも魅力でした。
私の場合、退職⇒結婚⇒引っ越し/受講スタートといった流れでした。主婦だったので、社会で働くより時間の制限は少ないですが、引っ越し作業や結婚にともなう様々な行事などで勉強の時間がとれなく思い通りにいかない日も多々あったので、6ヵ月にして正解でした。

4．私の環境

Python3.8.10
Windows10
Visual Studio Code
GitHub
Heroku
Anaconda3

5．作成したもの

上記の受講を終え、自分ができるようになったことを記載します。
自然言語処理講座受講後、受講期間の余った時間約1ヵ月、アプリ開発に関するカリキュラムも学びました。
自然言語処理講座で学んだ以下を基にアプリを作成しました。

【Python入門編】
・if文、else文
【【新】ライブラリ「NumPy」基礎（数値計算】
・リスト化
・Numpy配列
・random関数

【目的】
オンラインで英語をゲーム感覚で楽しく復習できるアプリ開発

簡単に流れを説明すると、
①エクセルで正解の文章を用意し、それをCSVに変換し、Pythonで読み込んだのち、文章をリスト化
②if文：出題する問題の準備（主にNumpyモジュールの関数のみで作成しました）
・出題する文章をランダムに選択
・選択した文章を単語ごとに区別
・単語をランダムに並べ替え
・問題出題
③else文：回答入力からの結果表示
・入力した分を単語ごとに区別（問題に表示された番号も入力）
・一番初めに入力した数字を文章の番号と紐づけ
・正解文章と入力した文章があっているか確認
⇒正解 の場合、"Correct!"と表示
⇒不正解"の場合、"Try again!"と表示

アプリ画面

アプリ画面

1.　文章の並べ替え問題のもととなるデータを用意
今回エクセルに入力しました。各文章に番号がふられているのはpython内で使用していきます。

Excelデータ

2．コードを作成する上で使用するモジュール、パッケージをインポート
エクセルをcsvにして読み込み、エクセル内2列目のsentenceをリスト化します。

import os
from flask import Flask, request, redirect, render_template, flash
from numpy.lib.utils import safe_eval
import numpy as np
import pandas as pd

#Flaskのインスタンス作成
app = Flask(__name__)

#正解文章のエクセル(CSV)を読み込み、リスト化
sentence = pd.read_csv("./data.csv")
sentence = list(sentence["sentence"])

3．if文：問題出題
文章の単語を分割し、単語をランダムに並べ替え、render_template関数でhtmlを指定、並べ替えられた文章の表示先を指定
else文：回答入力⇒結果表示
各コードの詳細説明は#コメント内をご参考ください。

#GET(データ取得)、POST(データ送信)を実行できるよう設定
@app.route('/', methods=['GET','POST'])
def grammer():
　 #問題の出力の流れ（GET）
   if request.method == 'POST':
       value = request.form.get('enter',1)
       
       if value == "0":
           #エクセルデータを配列
           quiz_count = np.array(range(0, len(sentence)))
           #1つ文章をランダムに番号選択
           quiz_number = int(np.random.choice(quiz_count, 1))
           #選択された番号の文章を答えとする
           collect_answer = sentence[quiz_number]
           #答えの文章を要素（単語）ごとに区別
           quiz = collect_answer.split()
           #重複なしで単語全てをランダムに並べ替え
           quiz = np.random.choice(quiz, len(quiz), replace = False)
           #文字列を単語ごとに半角スペースを空けて連結
           quiz = str(quiz_number)+" "+" ".join(quiz)
           #指定のHTMLに表示するよう命令
           return render_template("index.html",quizes=quiz)
       
       #回答の投稿の流れ
       else:
        　 #回答フォーム(answer_input)を用意
           submit_answer = request.form['answer_input']
           #フォームに入力した回答を要素ごとに分割("3", "they", "are", "boys")
           submit_answer_list = submit_answer.split()
           #番号は最初の番号に設定("3")
           quiz_number = submit_answer_list[0]
           
           #答えは設定された番号の文章
           collect_answer = sentence[int(quiz_number)]
           #番号を除いた文章(=インデックス1以降)を半角スペースを空けて連結(they are boys)
           submit_answer = " ".join(submit_answer_list[1:])
   
           #提出された解答と回答があっているのかを条件分岐で判定する
           if submit_answer == collect_answer:
               answer = "Correct!"
           else:
               answer = "Try again!"

           #answer = submit_answer+"collect_answer"
           #指定のHTMLに表示するよう命令
           return render_template("index.html",answers=answer,answer_input2=submit_answer)

  
   return render_template("index.html",answer="")

4．公開設定
Herokuにデプロイするためのコードを入力します。
これをいれることで公開設定(アプリを実行)をすることになります。
※「Herokuとは」と調べるとわかりやすい記事がたくさんあるので、ここでは割愛させていただきます。

if __name__ == "__main__":
   port = int(os.environ.get('PORT', 8080))
   app.run(host ='0.0.0.0',port = port)

HTML

<!DOCTYPE html>
<html lang='ja'>
<head>
   <meta charset='UTF-8'>
   <meta name='viewport' content="device-width, initial-scale=1.0">
   <meta http-equiv='X-UA-Compatible' content="ie=edge">
   <title>Grammer Quiz App</title>
   <link rel='stylesheet' href="./static/stylesheet.css">
</head>
<body>
   <header>   
       <img class='header_img' src="https://aidemy.net/logo-white.8748c46e.svg" alt="Aidemy">
       <a class='header-logo' href="#">Grammer Quiz App</a>
   </header>

   <div class='main'>    
       <h2> こちらは英作文アプリです。</h2>
       <p>問題を表示する場合は出題ボタンを押してください。</p>
       <form method='POST' enctype="multipart/form-data">
           <button type="submit" value="0" name=enter>出題</button>
       </form>
       <div class='quizes'>{{quizes}}</div>
       
       <p>下記に回答を入力してください。<br>入力例：【0 I am a superstar】</p>
       <form method='POST' enctype="multipart/form-data" autocomplete="off">
           <input class='text' type='text' name="answer_input"　autocomplete="off">
           <input class='btn' value="送信" type="submit">
       </form>
       <p>
       {{answer_input}}
       {{answers}}
       </p>
       <FORM>
           <INPUT type="button" value="再度回答する" onClick="history.go(-1)">
       </FORM>
   </div>

   <footer>
       <img class='footer_img' src="https://aidemy.net/static/media/logo.eb4d1a66.svg" alt="Aidemy">
       <small>&copy; 2019 Aidemy, inc.</small>   
   </footer>
</body>
</html>

CSS

header {
   background-color: #76B55B;
   height: 60px;
   margin: -8px;
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
}

.header-logo {
   color: #fff;
   font-size: 25px;
   margin: 15px 25px;
}

.header_img {
   height: 25px;
   margin: 15px 25px;
}

.main {
   height: 600px;
}

h2 {
   color: #444444;
   margin: 90px 0px;
   text-align: center;
}

p {
   color: #444444;
   margin: 70px 0px 30px 0px;
   text-align: center;
}

.quizes {
   color: #444444;
   margin: 70px 0px 30px 0px;
   text-align: center;
}

form {
   text-align: center;
}

footer {
   background-color: #F7F7F7;
   height: 110px;
   margin: -8px;
   position: relative;
}

単語を並べ替えて入力し、回答をクリック
※問題に表示された番号も入力していただかないと不正解になってしまいますのでご留意ください。（番号で正解文章と回答文章を紐づけているため）

■ハズレの場合
"2 she not is China from"と入れてみます。

はずれ入力

画像4

”Try again!”（もう一度！）が表示されました。
再度回答するをクリックするともう一度同じ問題が表示されます。

■アタリの場合
”2 she is not from China"と入れてみます。

正解入力

画像6

"Correct!"(正解！)と表示されました。

現在、英検5級レベルの英文の問題を用意しています。
☟よろしければぜひお試しください☟

6．アプリ作成をしてみての考察

まだまだ浅い知識の中で、学んだことを最大限にアウトプットしてアプリの作成ができたのではないかと思います。使用している関数は最初の1か月で学んだif、else文を大枠にし、文章をピックアップ、単語ごとに分割、ランダムに並べ替えのシンプルな流れについては、ほぼNumpy基礎で学んだことを活かし、コードを作成しました。
現段階で改善したい点を挙げると、
・回答入力時、番号も入力しなくてはいけない。
（番号で紐づけしているため）
・入力時、文章の最初にも関わらず小文字にしなくてはいけない。
(正解文章で最初の文字も小文字にしているため)
です。改善方法は必ずあると思うので、今後もPythonの勉強を続け、上記の課題も改善できたらと思います。

7．まとめ

アプリとしてはだいぶ初歩的で、使いづらい部分もありますが、プログラミング知識ゼロから頭の中でイメージしていたものを形にできたので、私としては大満足です！
私のように知識がない状態からいざ、プログラミングの勉強しよう！と考えている方は何をどう勉強したらわからないまま結果、挫折してしまう可能性が高いと思います。初めはAidemyでレールに乗って勉強し、基礎知識の基盤を整えてからの方が効率よく今後も勉強ができるかと思います。私自身もこのアプリの改善を軸にこれからも勉強を続けていこうと思います！

いいなと思ったら応援しよう！