はじめに
python用の軽量webアプリケーションフレームワークであるFlaskを使ってYoutubeやX(旧Twitter)などwebアプリの基本的な動作原理を学び、実際に自分で作れるようになりましょう！私が制作したアプリを基に解説しています。
今回からwebページの作成に移っていきます。ユーザが最初に閲覧したときのトップページを作っていきたいと思います。
解説
pythonでの記述
概要でも説明したようにユーザはidex.htmlにアクセスしますが、pythonを通してアクセスさせます。pythonでは初めに表示させたいページをルート(/)と言います。よって、初めに来たユーザはルートを通してindex.htmlにアクセスできるようにさせます。
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')app = Flask(__name__)はFlaskをはじめるためのおまじないです。
@app.route(‘/’)はユーザが初めにアクセスしたときに表示させるためのコードです。今回はルート(/)にアクセスしたときにdef index():を実行することになります。
def index():は関数で詳しくこちらを確認してください。今回はインプットなく、アウトプットはrender_template(‘index.html’)になります。
この関数のアウトプット(render_template)がhtmlをユーザに送り、表示させます。
htmlでの記述
そして、トップページとして表示するindex.htmlは
{% extends "layout.html" %}
{% block content %}
<body>
<h1 class="homepage-name">Al<span>(l)</span>-one Space</h1>
<div class="wall">
<div class="header-text">
<p>趣味や好きなことに多忙な人向けの<br>
<span>To Do List</span><br>
ちょっぴり自由度の高いwebサイト<br>
そして<span>たまに</span>共有</p>
</div>
<div class="enter">
<h2 class="enter-text">3つの部屋へ(クリック↓)</h2>
<div class="door">
<a href="{{ url_for ('front_room' )}}">
<img src="{{ url_for('static', filename='images/header/door_close.png') }}" alt="door-close">
</a>
</div>
</div>
</div>
</div>
{% endblock%}になります。htmlの説明はこちら(工事中)を確認してください。
inde.htmlのFlaskでの特徴
一つ目
FLaskの特徴を二つ説明します。一目は以下のコードです。
{% extends "layout.html" %}
{% block content %}
~~~
{% endblock%}通常htmlを作るときは<head>タグを書きますが、index.htmlを見ると書かれていません。書かれていませんが、cssを読むことができています。これはexpandsタグのおかげで、複数のhtmlで共通の箇所を別のhtmlで書くことができます。
今回は、<head>が共通の部分でlayout.htmlに<head>を書いて、expandsでlayout.htmlに<body>などを挿入してページを表示しています。layout.htmlに挿入する箇所は{% block content %}と{% endblock %}で囲みます。
では、共通部分のlayout.htmlは以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alone Space</title>
<meta name="description" content="趣味や好きなことに多忙な人向けのTo Do List。ちょっぴり自由度の高いwebサイトそしてたまに共有">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,800;1,700&display=swap"
rel="stylesheet">
<!-- リセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/ress@4.0.0/dist/ress.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css') }}">
</head>
<body>
{% block content %}{% endblock%}
</body>
</html>htmlの説明はこちら(工事中)を確認してください。
先ほどのindex.htmlを挿入する箇所に{% block content %}{% endblock%}を記入します。
この機能を使えば毎回<head>を書かずともcssなどを反映させることができます。
これがFLaskの一つ目の特徴になります。
二つ目
二つ目の特徴は
<div class="door">
<a href="{{ url_for ('front_room' )}}">
<img src="{{ url_for('static', filename='images/header/door_close.png') }}" alt="door-close">
</a>
</div>の中の{{ }}の部分になります。
url_forはpython(Flask)で使わるキーワードなのですが、htmlの中に記述されています。違う言語にも関わらず機能しています。これはFlaskの特徴でhtmlの中でも{{ }}で囲まれた部分はpythonを使うことができます。
今回は{{ }}に囲まれたurl_forをhtmlの中で機能させています。url_forはページを変えたり、画像を表示するために使う機能になります。
<a href=”{{ url_for (‘front_room’)}}”>が<a>タグで別のページへのリンクになります。ユーザがこのリンクを押したときにapp.pyのfront_roomを表示させることができます。
<img src=”{{ url_for(‘static’, filename=’images/header/door_close.png’) }}” alt=”door-close”>は画像を表示させます。url_for以外はhtmlの基本的な処理を同じです。
htmlの中でも{{ }}で囲まれた箇所はpythonの記述ができ、使うことができます。
これがFLaskの二つ目の特徴です。
この二つの特徴はwebアプリを作るうえで必須だと思います。
最後に
今回はwebアプリのトップページを解説しました。今回のポイントは
・ユーザにアクセスする方法
・共通のhtmlを使いまわす方法
・html内でpythonを使う方法
です。
参考
外部リンク
pythonの基礎を復習したい方
python基礎を参考にしてください。
参考文献
私が参考にしたFlaskの本
コメント