#はじめに
小学校４年生の長男の自由研究でGoogle Cloud PlatformのAppEngineにアプリ（底辺と高さの値を入力すると三角形の面積を求めるアプリ）をデプロイすることに取り組んでみたという記事です。
なお、この取り組みは**Google Cloud Platform GAEソフトウェア開発入門――Google Cloud Authorized Trainerによる実践解説 (Software Design plusシリーズ)**の第６章までを参考（いや、参考というより大部分を写経）して作成しました。
アプリについては百聞は一見に如かず、https://itsk-project.an.r.appspot.com/
をご確認ください。
#GCPがすごい
まず、GCPがすごいです。なぜならCloudShellを使うとサーバー上がローカルのテスト環境となり、
gcloud app deploy ./
このコマンドですぐにアプリがデプロイでき、web上でアプリが動くのですから。
#やったこと
##１日目
長男に取り組ませる前に、上記した参考図書を約１日かけて予習しておきます。そこでつまずきそうなところを確認し、その予習の成果として、こんなことができるよと先に目標、動機付けを長男に対して行いました。
##２日目
ローカル環境のブラウザーにHello World!を表示させるプログラムmain.py（App Engineのpythonアプリはすべてmain.pyという名前にします）を作成しました。
Hello Worldアプリはpythonでブラウザーに表示したい文字列"Hello World!"を入力し、Flaskのreturnコマンドで返すだけです。
入力ミスをするとエラーが返りますが、自ら写経した本と見比べてデバッグすることも学び、キーボード操作の習得にもつながります。
また英語の勉強にもなるという学習教材として非常に優れています。
文字列部分を子供に自由に書かせて、ブラウザーでそれが表示させるとそれだけで目が輝きました。
これだけでも十分に自由研究として成立していますが、子供の成長ぶりから、３日目にさらに上を目指しました。
##３日目
三角形面積を求めるアプリの作成です。
本来なら、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
を参考にしています。
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)
#オチ
高度な（？）自由研究になってしまったせいで、子供がこれを学校で披露するのが恥ずかしいということになり、結局写真立てを作成するという自由研究を発表することになりました。
まぁ、とりあえず小学校４年生にして、プログラミングの第一歩、スタートが切れたということで、後は子供の興味に任せることにします。