トップページ(Flaskを使ってYoutubeやXのような自作のwebアプリを作ってみよう)

はじめに
解説
最後に
参考

はじめに

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アプリを作るうえで必須だと思います。