Q&A
ご丁寧に回答いただきありがとうございました。
まさにおっしゃる通りで、自分が何をすればいいのか、何をしたいのか整理することが出来ました。
かなり浅い知識にはなりますが、SQLite、SQLAlchemy、CSSあたりは触れたことがあるのでまずはFLASK-WTFを見てみたいと思います。
ありがとうございました。
質問
Pythonを使って、入力した値をcsvで出力することができるWebアプリを作成したいと考えています。
イメージは野球のスコアリングの作業で、ページ上で複数のボタンを押す、あるいは文字列を入力する、その後決定を押すと入力した値がcsvの1行分に入力される、その作業を数100球繰り返すことによって、試合後には全体の1球情報がcsvファイルで確認できるようなものです（添付画像）。
これまでFlaskやDashなどのフレームワークを少し触ったことがありますが、なかなかイメージが付きませんでした。
大雑把な質問になりますが、何を用いればこのようなものを作成することが可能そうでしょうか？
詳しい方、ご教授の程よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
python3.9、VSCode
回答2件
0
案1:
Flaskを使ったことがあるのであれば、主要な処理はFlask(バックエンド)側でやって、画面はすべて受動的なFormだけで構成する
FlaskとHTMLでできます。
案2:
すべてクライアント側でやることにして、JavaScriptなどでやってしまう。
WebサーバとJavaScriptでできます。
何れにしても、入力だけならそれほど難しくないですが、後から修正できるようにとか考え出すと面倒になりそうですが、まあ、やりがいはありそうですね。
投稿2022/05/20 13:21
総合スコア12743
0
ベストアンサー
この質問はたぶん丸投げなのでヒントだけ記載します。
イメージできないのは、イメージができるほど考えていないからです。
本人が使うのかわからないですが、本人が使う前提で考えています。
使うのが本人じゃない場合は、使う人とよく話し合いましょう。
まず何がしたいのか言語化しましょう。
質問の画像だけから考えると以下の様な感じでしょうか？
・野球(の中継など)を見て、投球の履歴を作成したい。
実際には異なるかもしれませんが、野球はわからないので適当に読み替えて考えてください。
質問内容は「Pythonを使って、csv出力が出来る簡単なWeb入力ツールを作成したい」ですが、上とは異なります。
上を達成するにはWebアプリでも、スマホアプリであっても、コマンドラインツールであっても、野球中継を入力して自動的に内容を判断して入力してくれるような凄そうなアプリでも何でも良いはずですが、Webの勉強ついでみたいな感じなのかもしれませんので気にしないことにします。
やりたいことがわかったので、必要な機能を考えましょう。
必要な機能を考えるときに必要なのは、使っている場面を想定することです。
たぶん野球の動画(TVでもネット中継でもなんでもいいです)をリアルタイムに見ながらやることを想定します。
自分は画面の前にいて、画面には野球の映像が流れています。
画面を見ると、たぶん「ピッチャー、バッター、キャッチャー、審判」がいる気がします。
質問画像から、審判は関係なさそうなので除外します。
ピッチャーとバッターには当然名前があり、どうも名前を記録したいようですので、これを入力する入力欄が必要そうです。
キャッチャーは要らないのかな？
なんか、その時の出場メンバー(スタメンでしたっけ？とベンチでしたっけ？)を記録する機能も欲しくなったりしそうですね。
次に、イニング？が必要そうです。1回表とかそういうのでしょうか？
質問画像には表裏はないようです、片側の投球だけ記録するのでしょうか？
表裏が必要になるかもしれませんし、片側の投球を記録するなら、ついでに両方記録しようと考えるかもしれませんので、1回表/1回裏とかを記録できるようにしましょう。
ようやくピッチャーが玉を投げますが、投げたら画面内に「ストレート」とか出た気がします。
ついでに、井のような九つ区切りの枠にどこら辺りに投げられたか、スピードはいくつか、球種は何かが出た気がします。
投球の記録なのでこのくらいですかね。
言わずもがなですが、チーム名と試合日時あたりは記録できるようにしたいので、記録できるようにしましょう。
と言うわけで以下の入力ができ、記録する必要があるようです。
・試合日時
・場所
・チーム(A vs Bみたいな)
・チームのメンバー
・ピッチャー
・バッター
・イニングと表裏
・ピッチャー
・キャッチャー
・井みたいなのを表示して、どの辺に投げられたかを入力できる様にする
・球種と速度
「試合日時～チームのメンバー」までは試合開始時(入力開始時)に1回入力したらよさそうです。
他は投げる度に記録する必要がありそうです。
機能を考えたのでどうやって保存するか考えましょう
Webアプリは状態記録とかが苦手なので、とりあえずDBに入れる事にしましょう。
というわけでMariaDBかMySQLあたりを使用します。
なので、必要なデータを入力できる構造をE-R図などを書いて構築します。
DBに入れておけばいつでも履歴を見返せるので便利そうですね。
また、DBに入っているなら整形してCSV出力もできるので、当初の予定も達成できそうです。
次に、どうやってデータを入力するかを考えましょう。
Web画面を開いたら入力画面だと試合開始時間とかが入力できなさそうなので、「記録開始」のようなボタンを設けることにします。
このボタンを押すと、「試合時間」や「場所」「チーム名」「メンバー」を入力する画面に遷移するとよさそうです。
この事前情報を入力したあと、投球記録画面に移動します。
投球記録画面は井みたいなの(周りも囲まれている、9マスの四角)と、ピッチャー名、バッター名入力欄、イニング入力欄、球速入力欄、球種入力欄があり、入力後「登録」ボタンを押したら登録できれば良さそうです。
「登録」ボタンを押したら、画面がリフレッシュされて次の投球記録に移る感じでしょうか。
チーム名や場所(なんとか球場とか？)や、チームに所属している選手名などはさらに事前にわかるはずなので、事前登録でき、入力欄では選ぶだけというのも、入力する側からしたら楽になるかもしれません。
何を用いればできそうか？
- Python、Flask
Flaskの質問ですし。 - DB
あった方が便利で、Webアプリ作るならどのみち使うようになるので、なんらかのリレーショナルデータベースシステムも導入しましょう。 - E-R図作成ツール
DBの設計をするのにE-R図を書いた方が楽なので、A5:SQL Ml-2などを使うと便利そうです。
https://a5m2.mmatsubara.com/ - DB本体
MySQLかMariaDBかPostgreSQLあたりが無料で人気なので良いと思います。 Flask-SQLAlchemy
DBを使う場合、Flask側からの操作が簡単になるようになります。Flask-WTF
入力を多用しているので、Flask-WTFあたりを導入すると便利な気がします。- CSSの知識
たぶん画面の色とか変えますよね。
なのでCSS知識は仕入れておきましょう。
CSSフレームワークでもよいですが、先にCSSを学んでから手を出さないと意味がわからないと思います。
有名処はBootStrapです。
この辺見ると良いかも？https://www.tohoho-web.com/ex/css-framework.html - JavaScriptの知識
素敵なページを作るのには必須と言っても過言ではないです。
ピュアなJavaScriptを覚えてから、フロントエンドフレームワーク(React.jsやVue.js, Angular.jsなど)を学ぶと素敵なアプリを短時間で作れるようになるかもしれません。
最後に、ボタンを押したらCSV作成してDLするようにすれば欲しいものができると思います。
チーム一覧を事前登録や、メンバー登録はメンテナンスが面倒なのでない方が逆に便利かもしれません。
また、井みたいなのを表示してとかやり出すとその分時間がかかり、なかなかできあがらなくてつまらない可能性があります。
とりあえず、Flask, Flask-WTFだけ勉強してHTMLのフォームを作成し、入力値をFlask側で取得する方法を学んではいかがでしょうか？
それができたら、それを保存する方法(DBでもテキストでも何でも良いです)を作り、CSVに直接出力すれば目標は達成できるかもしれません。
投稿2022/05/20 14:07
総合スコア2401
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/21 11:16