LoginSignup
3
3

More than 1 year has passed since last update.

こどもの自由研究にGCP AppEngineアプリ作成のススメ

Last updated at Posted at 2021-08-10

はじめに

小学校4年生の長男の自由研究でGoogle Cloud PlatformのAppEngineにアプリ(底辺と高さの値を入力すると三角形の面積を求めるアプリ)をデプロイすることに取り組んでみたという記事です。
なお、この取り組みはGoogle Cloud Platform GAEソフトウェア開発入門――Google Cloud Authorized Trainerによる実践解説 (Software Design plusシリーズ)の第6章までを参考(いや、参考というより大部分を写経)して作成しました。
アプリについては百聞は一見に如かず、https://itsk-project.an.r.appspot.com/
をご確認ください。

GCPがすごい

まず、GCPがすごいです。なぜならCloudShellを使うとサーバー上がローカルのテスト環境となり、
gcloud app deploy ./
このコマンドですぐにアプリがデプロイでき、web上でアプリが動くのですから。

やったこと

1日目

長男に取り組ませる前に、上記した参考図書を約1日かけて予習しておきます。そこでつまずきそうなところを確認し、その予習の成果として、こんなことができるよと先に目標、動機付けを長男に対して行いました。

2日目

ローカル環境のブラウザーにHello World!を表示させるプログラムmain.py(App Engineのpythonアプリはすべてmain.pyという名前にします)を作成しました。
Hello Worldアプリはpythonでブラウザーに表示したい文字列"Hello World!"を入力し、Flaskreturnコマンドで返すだけです。
入力ミスをするとエラーが返りますが、自ら写経した本と見比べてデバッグすることも学び、キーボード操作の習得にもつながります。
また英語の勉強にもなるという学習教材として非常に優れています。
文字列部分を子供に自由に書かせて、ブラウザーでそれが表示させるとそれだけで目が輝きました。
これだけでも十分に自由研究として成立していますが、子供の成長ぶりから、3日目にさらに上を目指しました。

3日目

三角形面積を求めるアプリの作成です。
本来なら、HTMLファイルをテンプレートとして作成し、cssでデザインするという方法で作成しますが、長男にはファイルが多岐に渡るのはその仕組みを理解するのは難しいと判断し、"Hello World!"の文字列部分をHTMLファイルの中身にしてreturnだけで返すことにしました(本来はreturn render_template('result.html',val1=val1などで変数をHTMLファイルに送り、HTMLでは{{}}で受ける)。HTML部分は先に親が作成しテストしておき、これを写経させることにしました。
最初は真っ白なバックに黒い文字列(三角形の面積)が書かれるアプリでしたが、フリー素材でアプリに沿った好きな画像を選ばせて、それをHTMLにて表示させるようにしました。
以下がmain.pyです。
htmlのstyle部分(本来ならcssファイルに書き込む部分)はhttps://qiita.com/NoxGit/items/59dfcb41b204008bea9f
を参考にしています。

main.py
from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def area_tri():
    #三角形の面積を求める入力フォーム
    return """
    <html><body style="text-align: center;background-image: url(/static/image/triangle.png);">
    <form action="/answer" methond="GET">
    <h1>三角形の面積を求めます</h1>
        <div id = "input">
            <h1>
            <dd>底辺は?<input type="number" name="btm" size="5" value=""></dd>
            <dd>高さは?<input type="number" name="hig" size="5" value=""></dd>
            <dd><input type="submit" value="面積算出"</dd></h1>
        </div>
    </form>
    </body></html>
    """

#/answerへアクセスがあったとき
@app.route('/answer', methods=['GET'])
def answer():
    btm = float(request.args.get('btm'))
    hig = float(request.args.get('hig'))
    area = btm * hig * 0.5
    return """
    <html>
    <body style="text-align: center;background-image: url(/static/image/answer.jpg);
                                    background-size: cover;
                                    min-height: 100vh;">    
    <h2 style="color: yellow; font-size: 24pt;
        text-shadow    : 2px  2px 1px black, -2px  2px 1px black, 
             2px -2px 1px black, -2px -2px 1px black, 
             2px  0px 1px black, 0px 2px 1px black,
             -2px  0px 1px black, 0px -2px 1px black;">
    <dd>底辺{0:7.2f}cm</dd>
    <dd>高さ{1:7.2f}cm</dd>
    <dd>公式:底辺*高さ÷2</dd>
    <dd>A.求める三角形の面積は{2:7.2f}cm2です</dd>
    </h2>
    """.format(btm,hig,area)

if __name__=='__main__':
    app.run(host='127.0.0.1', port=8080, debug=True)

オチ

高度な(?)自由研究になってしまったせいで、子供がこれを学校で披露するのが恥ずかしいということになり、結局写真立てを作成するという自由研究を発表することになりました。
まぁ、とりあえず小学校4年生にして、プログラミングの第一歩、スタートが切れたということで、後は子供の興味に任せることにします。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3