More than 3 years have passed since last update.

インフラ屋がお題として「Webツール」を開発することになったが。。「Webツール」作成用の環境を考えるまで。

Last updated at 2020-06-27Posted at 2020-05-10

-- 目次はこちら。PythonでBINGOの「Webツール」をつくる
-- 記事作成：2019年12月,記事修正：2020年5月

とあるきっかけで「Webツール」を開発することになったインフラ屋です。
しかし、インフラ屋にとって開発するということを日頃行うことがない。というこでチャレンジしてみようかという気楽なノリで始めた訳です。
よって、日頃業務で開発に精を出されている方々には大変申し訳ない内容になると思いますのでご了承ください。
私のような開発初心者やなんかやってみたいという方の参考になればと思います。

お題「Webツール」

与えられたお題は「Webツール」を作ろう！でした。
第1の壁が「Webツール」というものです。「Webツール」そのものが分からないのですよ。曖昧な表現過ぎて。
そこで、素直に検索しました。
googleで「Webツールとは」と検索すると大体

Webサイトを作成するときに使用するツールの事。

--- HTMLエディタ・画像処理・オーサリングソフトなどなど
ブラウザからWebサイトにアクセスして提供されている便利なもの

--- 私が良く使うIPアドレスチェックやカレンダーが該当するのかと。
Webサイトをアクセスするのに使用するツール

--- スクレイピングやポッドなど

改めて考えると、昔からWeb＋CGIで作成されているものはほとんど「Webツール」ではないのか！と思うわけです。
1は大変あれば有意義ですが、既に存在しているツールを使わせて頂く事であり、私が自作できるような簡単なものでも無い為却下。
3は趣味などで収集したい情報があれば良かったのですが今のところ思い浮かばないので却下。
以上の選択肢から「2.ブラウザでWebサイトにアクセスして使える便利なのも」を考えることにしました。

そして、第2の壁「何を作るか」にぶち当たります。
・何かを作る気力＝＝何かに不満・不便を感じている。あったら便利？
（邪魔くさいことはしたくないなど。）
と私は思っているのですが、最近あんまりないそんな不満がないのですね、趣味もないのですが…。昭和の生まれの私にとっては令和の時代は便利になったのですよね。本当に不満があることは個人の手ではどうにもならないので諦めているのもありますし。

とはいえ、何も作らないわけにはいかないので「お題」が出るきっかけになっていた集まりでの説明文をそのまま利用することにしました。

ビンゴゲームのツールを作る

ビンゴゲームはパーティーなどでよく開催される、景品をばらまく手段の一つで運が良い人が豪華な賞品をゲットできるものです。私には運がないので参加賞が常です。

毎年、地元の祭りで自治会主催ビンゴゲーム大会があるのですが、ゲームの進行は素晴らしく「アナログ」でした。（それはそれで味が良いのです。結構グダグダになりますよ）
不満としては

抽選された数字が多いので再確認がしにくい。再確認に時間がかかる。
自治会役員さん（やや高齢の方）がビンゴカードの当たりを確認するのが大変。
自分のビンゴカードを確認する手間も大変。

ビンゴゲームとは

Wikiを検索すると色々と説明がありましたが日本でよく行われているビンゴゲームは以下の仕様と思います。
(https://ja.wikipedia.org/wiki/%E3%83%93%E3%83%B3%E3%82%B4)

数字を１～７５までランダムに重複せずに抽選していく。
参加者は専用ビンゴシート（安くで市販されている）を使用する。
専用シートは５×５のマス目があり、真ん中は「Free」として既に当たりになっている
抽選された数字が専用シートの数字にあれば当たりとする。
専用シート上の当たりが五個一列に並ぶと「ビンゴ」と言って商品を受け取る

余談ですが、最後の「ビンゴ」に至るまでがその日の運任せなので、最近とくに運が低迷してる私では「今日はどのくらい後のほうになるのか？」を楽しむゲームになっています。

ちなみに、こんなサイト(これもWebツールかな)を見つけました。
「ビンゴゲーム終了時間シュミレーター」
https://coffee-ryo.devel.jp/app_Bingo.html

ビンゴゲームの必要なもの

では、ビンゴゲームに「必要なもの＋あると便利なもの」をwebツールの部品として考えます。

####1. 抽選機
１～７５の数字をランダムに抽出する。重複しないため75回抽出すると終了。
これだけだとJavaScriptでも作成できそうです。
####2. 抽選結果表示
抽選機で抽出した数字を表示する。抽出順に表示する、グループ毎に一覧で表示するなど。
イベント・パーティーでは白板や模造紙に抽出した番号を手書きしていましたが、参加者にはあまり参考になっていない気がします。

####3. ビンゴカードと経過表示
パーティーだとビンゴカードは市販品を使用しますが、Webツールではランダムに作ることも可能と思います。
できれば、参加者の手元にあるビンゴカードを画像読み取りして登録できると便利かと思います。
（今回はそこまでたどり着けないと思いますので、参加者に入力してもらいましょう）
経過表示は、参加者が入力したビンゴカードを抽出結果を元に当たり表示し、リーチ・ビンゴ表示ができるぐらいの機能は欲しい。
####4. 参加者の状態表示
管理側として参加者が入力したカードを元に、現在のビンゴ手前の人や、抽選でビンゴになった人の名前を表示できれば便利と思います。
作りこめば色々表示できるでしょうが、今回はビンゴした人とリーチの人の数が分かればよいかと思います。

どのような環境で作る？

私の開発環境（物理面）の選択枝はあまりないので、検討が不要なものを列記すると

開発用PCは、Lenovo タブレット YOGA Tablet2 キーボード付
メモリー2GB、 DISK 32GB / Windows10(32bit) / ディスプレイ 10.1型W
言語はPtyhon3.7

日常のメール確認やweb閲覧、小さいエクセル程度は編集可能なもので動画も画質を犠牲にしてみることができます。当時にしては軽量・長時間バッテリーだったので重宝しております。

「Webツール」の環境

お題の「Webツール」を作るために選択した、「ブラウザでWebサイトにアクセスして使える便利なのも」なので、ブラウザは既にある(IEでもFirefoxでもその他なんでもよいと思います)。
　次に必要なものとしてWebサイト＝Webサーバを用意する必要があります。
Webサーバ＝Apacheなんてのはもう過去の話になるのでしょうか。ましてはちょっとしたWebツール作るのに、Linuxサーバ構築してApache入れて設定して、HTML書いて、CGI書いてなんてのは、それだけでやる気が減退してしまします。

今では Pythonで動く Webフレームワークなるものが作られていて代表的には以下のものがあるようです。
参考：2019年Pythonのおすすめフレームワーク完全版！各フレームワークを徹底比較！

Django
Bottle
Flask
Tornado
Plone

仕事も考えて学ぶなら優先順位は上からになるでしょう。
ただ、今回のお題の為に壮大な機能の学習を今からするべきか？いやいやついでだからやっておこうか？など考えたのですが、今回は開発環境(物理)が貧弱なので軽量なもの「Flask」を選択することにしました。

Flaskについて

早速、Google先生にお世話になりました。

などを参考にさせていただこうかと思います。

あと、書籍で
　Pythonエンジニア育成推進協会監修 Python 3スキルアップ教科書
を駆使し頑張ってみたいと思います。

Flaskを使うイメージを掴む

ApacheのWebサーバを知っていると、FlaskのWebサーバのイメージがしっくりこないことになった。

ApacheのWebサーバだと・・・

　Apacheがリクエストに対応し、必要なHTMLやCGIを読み・実行し結果をブラウザに戻す。
１つのリクエストが終了するとデータは消えるのでそのデータを保持する方法を別に検討する必要があった。（ステートレスで良かったけ？）

FlaskのWebサーバだと・・・

Ptyhonの実行アプリの中でWebからのリクエストを処理するように作成する。
リクエストのURLで処理内容を変えて合わせてHTML・CSSを引っ付けてブラウザへ帰す。
Ptyhonアプリは実行中だから処理中のデータもそのまま引き継げる感じか。

というわけで、次回は環境構築の予定。
-- windows10(32bit)にPython+Flask+αをインストールしたメモ

-- 目次はこちら。PythonでBINGOの「Webツール」をつくる

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

インフラ屋がお題として「Webツール」を開発することになったが。。 「Webツール」作成用の環境を考えるまで。