pythonでwebアプリケーションを作りたいなぁ
今回はそんな人のためにFlaskでのシンプルなwebアプリケーションを作成してゆきます！
成果物
ただ単にTodoアプリなどを作るのでは面白くないため、「自分だけのデスクトップページ」を作成します！
何もデザインをしていないのでダサいですが、結構使えます笑
Flaskとは
Flaskは、Python言語でWebアプリケーションを開発するためのフレームワークの一つです。
フレームワークとは、開発を効率よく進めるためのひな形やツールの集まりを言い、Flaskはその中でも特に「軽量」であることが特徴です。
これは、必要最小限の機能のみを持ち、使いやすいことを意味しています。初心者がウェブ開発を学び始める際には、複雑な設定や多くの概念を一度に学ぶ必要がないため、手軽に始められる点がFlaskの魅力です。
基本的なウェブサーバーの機能から、データベースの操作、フォームの処理など、ウェブアプリを構築するために必要なコンポーネントを簡単に追加・拡張することができます。
ブラウザだけで環境構築！
WebアプリケーションフレームワークFlaskを使って開発を行う際には通常、開発を行いたいローカルのパソコン環境にFlask自体や関連するライブラリをインストールする必要があります。
しかし、実はwebブラウザだけでFlaskが開発できる方法があるのです！
それがGithub Codespaceというサービス。
GitHub Codespacesは、GitHub上で直接完全な開発環境を提供するクラウドサービスです。ブラウザ内でコードの編集、実行、デバッグが行え、コンテナ技術を基盤とした統合開発環境（IDE）です。
このサービスにより、開発者はどこからでも、すぐにコードにアクセスし、協力して作業をすることができます。
いざ作成！
Github Codespaceで新しいアプリを作成
まずはこちらのページからテンプレートを選択します。
今回の場合Flaskを選択してください！
Use this templateを押すと、自動で構築が始まります。
画面説明
構築が終わるとこんな風な画面が現れます。
左側がファイル構造、右側がターミナル（コマンドプロンプトみたいなもの）とエディターという風に分かれております。
flask --debug runとターミナルに打つと、開発に適したモードでプレビュー画面が表示されます。
早速ページを作成！
今度は静的なページを作成してみましょう！
エクスプローラーからapp.pyと書かれたファイルを開いて下さい。
デフォルトで以下のように書かれています。
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def hello_world():
return render_template("index.html", title="Hello")
このファイルでは、どのURLにアクセスするとどのページが表示されるのか、ということを制御します。
@app.route(“/”)からあとを削除して、次のコードを追加して下さい。
# アバウトページ
@app.route("/about")
def index():
return render_template("about.html")これでhttps://あなたのURL/aboutにアクセスした際、about.htmlというファイルが表示されるようになります。
次はabout.htmlを作成します。
エクスプローラーからtemplatesフォルダ内にabout.htmlを作成し、以下のコードを入力してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>このサイトについて</title>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
</head>
<body>
<h1>このサイトについて</h1>
<p>このサイトはテストサイトです。<br>これはアバウトページです。</p>
</body>
</html>こうすると
ちゃんと表示されます。
検索フォームを設置！
次はオリジナルのデスクトップページを作成するため、検索フォームを作りましょう。
トップページ（https://あなたのURL/）にアクセスされたページを作る為、app.pyに以下のコードを追記してください。
# トップページ
@app.route("/")
def index():
return render_template("index.html")そしたら、先ほどと同じ要領でtemplatesフォルダの配下にindex.htmlというファイルを作成します。（もともとあればそれを流用します。）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぼくのさいと</title>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
</head>
<body>
<h1>ぼくのさいと</h1>
<div class="form-wrapper">
<form action="/" method="post">
<div>
<input type="text" name="search_word" class="form-input">
</div>
<div>
<label><input type="radio" name="type" class="input-radio" value="0" checked>ぐーぐる じぇーぴー</label>
<label><input type="radio" name="type" class="input-radio" value="1">Google EN</label>
<label><input type="radio" name="type" class="input-radio" value="2">びんぐ</label>
</div>
<div>
<input type="submit" class="input-submit">
</div>
</form>
</div>
</body>
</html>既に他の言語をやっていた方ならわかりやすいかと思いますが、フォームを送信するとその内容がPOSTで送られます。
実行するとこのように表示されます。
シンプルですね笑
まずはこのままやっていきましょう。
フォームが送信されたら検索結果に飛ぶようにする
続いてフォームが送信されたらぐーぐる（日本版）、Google（英語版）、Bingのどれか選択したものの検索結果にジャンプするようにしましょう。
app.pyに次の先ほど書いた
# トップページ
@app.route("/")
def index():
return render_template("index.html")このコードを
# トップページ
@app.route("/",methods=["GET", "POST"])
def index():
if request.method == "GET":
return render_template("index.html")
elif request.method == "POST":
if request.form["type"] == "0":
return redirect('https://www.google.com/search?hl=ja&q='+urllib.parse.quote(request.form["search_word"]))
elif request.form["type"] == "1":
return redirect('https://www.google.com/search?hl=en&q='+urllib.parse.quote(request.form["search_word"]))
elif request.form["type"] == "2":
return redirect('https://www.bing.com/search?q='+urllib.parse.quote(request.form["search_word"]))
else:
return "Request Error."に変更し、またコード最上部に書かれている
from flask import Flask, render_templateを
from flask import *
import urllib.parseに変更してください。
全体のコードは以下になります。
from flask import *
import urllib.parse
app = Flask(__name__)
# トップページ
@app.route("/",methods=["GET", "POST"])
def index():
if request.method == "GET":
return render_template("index.html")
elif request.method == "POST":
if request.form["type"] == "0":
return redirect('https://www.google.com/search?hl=ja&q='+urllib.parse.quote(request.form["search_word"]))
elif request.form["type"] == "1":
return redirect('https://www.google.com/search?hl=en&q='+urllib.parse.quote(request.form["search_word"]))
elif request.form["type"] == "2":
return redirect('https://www.bing.com/search?q='+urllib.parse.quote(request.form["search_word"]))
else:
return "Request Error."
# アバウトページ
@app.route("/about")
def about():
return render_template("about.html")具体的に何をしているか書き出してみました。
from flask import *を使用してFlaskフレームワークから必要な全ての機能をインポートしています。これにより、ルーティング、リクエストハンドリング、レンダリングなどの各種機能が利用可能になります。import urllib.parseでは、URLを適切にエンコードするための標準ライブラリurllibのパーサーをインポートしています。app = Flask(__name__)でFlaskのインスタンスを作成し、アプリケーションを構築しています。@app.route("/",methods=["GET", "POST"])このデコレータは、トップページ（ルートURL）へのGETおよびPOSTリクエストを処理する関数を定義しています。- 関数
index()は、実際にリクエストを処理する関数です。いくつかの条件分岐により、GETリクエストかPOSTリクエストかを識別し、適切な動作を行います。- GETリクエストの場合は、検索ページのHTML（
index.html）をユーザーに表示します。 - POSTリクエストの場合は、ユーザーがフォームを介して送信したデータを処理します。送信された
typeの値に応じて、検索語をクエリパラメータに追加し、指定された検索エンジンのURLにリダイレクトします。typeが0の場合は、日本語のGoogle検索ページにリダイレクトします。typeが1の場合は、英語のGoogle検索ページにリダイレクトします。typeが2の場合は、Bingの検索結果ページにリダイレクトします。
request.form["search_word"]でフォームで入力された検索語を取得し、urllib.parse.quote関数でURLに安全な形式にエンコードしています。
- GETリクエストの場合は、検索ページのHTML（
- ユーザーが予期しない
typeの値を送信した場合は、”Request Error.” というメッセージを表示します。
デザイン作成
最後はシンプル（笑）なデザインを変更していきたいと思います。
エクスプローラーからstaticというフォルダにあるmain.cssを開いてください。
ここに任意のcssを入力します。
先ほどまで紹介したhtmlコードには、
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">というコードが入っていました。
これで、このstaticフォルダの中にあるmain.cssを読み込んでいるのです。
完成！
自分だけのデスクトップページが完成しました！
ぼくは初めてFlaskを触ったのですが、思ったよりわかりやすく、面白かったです。
初心者もとっつきやすいフレームワークですので、みなさまもぜひwebサイトを作成してみて下さい！
コメント