夏のプロジェクト制作(初日)：Flaskでwebサーバを起動し、入力フォームを作った話
はじめに
夏のプロジェクトを開始してばかりですが何か書こうと思います。
今週の目標は**「Python(Flask)でWebサーバーを起動し、ユーザーが文字を入力できるフォーム画面を作ること」**。
この初日での学びと、ぶつかった壁について記録していきます。
1. 最初の関門「Hello, World!」
まずは、Flaskを使ってWebサーバーを起動し、ブラウザに「Hello, World!」と表示させることから始めました。
app.pyに簡単なコードを書き、ターミナルで flask run を実行しました。
ブラウザに文字が表示された時は、自分の書いたコードがWebの世界と繋がった気がして、大きな感動がありました。
# app.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'
こんな感じです
やはりdef returnはもっと使っていこうと思いました（まだ慣れてない💦）
2. GitHubへのプッシュと認証について
この「Hello, World!」の成功を、自分の資産として記録するためにGitHubへpushしようとしたところ、早速エラーに遭遇してしまいました。
fatal: Authentication failed for 'https://github.com/...'
かなり焦りましたが、settingからトークンを発行して無事にpushすることができました。
3. HTMLで入力フォームを作成
次に、ユーザーがプロンプトを入力するための画面を作りました。
プロジェクト内にtemplatesフォルダを作り、その中にindex.htmlを作成。HTMLの基本である<form>や<textarea>タグを学び、入力フォームを設計しました。
html初学者だったので、基本の骨格を頭に入れることにかなり時間がかかりました。
<form action="/submit" method="post">
<p>実験したい文章を入力してください:</p>
<textarea name="user_prompt" rows="10" cols="70" placeholder="ここに文章を入力..."></textarea>
<br>
<button type="submit">送信</button>
</form>
覚えること多すぎてパンクしそう…
4. PythonとHTMLを繋いだ
最後に、先ほど作ったHTMLフォームとPythonをくっつけて動作確認をしました。
自分の手でこういったものが作れるんだという感動がすごい…
文全体が左に寄ってるのはスタイルを入れてないからなのかな？
まとめと次のステップ
今日は、Webサーバーの起動からHTMLの作成、そしてGitHubでの認証まで、Web開発の基本的なサイクルを一周することができました。
次のステップは、このフォームから送信されたデータを、実際にPython側で受け取る機能の実装です。
少しずつ勉強しながら頑張っていきたいです！
Discussion