3つの扉(Flaskを使ってYoutubeやXのような自作のwebアプリを作ってみよう)

2023.10.04

はじめに

python用の軽量webアプリケーションフレームワークであるFlaskを使ってYoutubeやX(旧Twitter)などwebアプリの基本的な動作原理を学び、実際に自分で作れるようになりましょう！私が制作したアプリを基に解説しています。

前回はトップページの解説をしました。訪れたユーザをpythonが情報受け取り、トップページを表示させます。そのときにFlaskのrender_templateという関数で行いました。htmlを表示させることもできます。今回はrender_templateに変数を入れてhtml以外にも文字を入力する方法を紹介します。また、そのとき、前回のhtmlにpythonを記入する方法を応用させて、<div>タグのclassを変えてcssを個別に反映させる方法を紹介したいと思います。

過去の記事

解説

概要図

まずは、pythonから。やりたいことをイメージ化しておきます。index.txtというメモ帳などで作成したテキストファイルをrender_templateをつかってホームページ上に表示させたいと思います。

python

コードです。

readindex = open('index.txt', 'r', encoding="utf-8")
@app.route('/front_room')
def front_room():
    readindexlist = readindex.readlines()
    indexlistname = []
    for num in range(len(readindexlist)):
        indexlistname.append('header-text' + str(num))
    return render_template('front_room.html', readindexlist=readindexlist, indexlistname=indexlistname)

まずはindex.txtを読みこみます。これは一般的なpythonコードになります。openという関数を使って読み込み、4行目のreadlines()というメソッドで一列ずつ文字列を取得します。その文字列をrender_templateの引数を通して、front_romm.htmlに表示させます。

しかし、この状態では、すべての行でcssが適応されてしまい、1行ずつ強調などの変更ができません。そこで、<div>のclassをそれぞれの行で変えるため、ナンバリングしていきたいと思います。そのために5行目にindexlistnameという空のリストを作成し、for文でindex.txtの行数をindexlistnameにheader-text+行数で格納します。このリストの中には[‘header-text0’, ‘header-text1’, ‘header-text2’, ・・・]が格納されており、これをclass名にしていきます。

html

上で作ったテキストとclassのリストを反映させるhtmlが下記コードになります。

{% extends "layout.html" %}

{% block content %}
  <div class="wall-front-room">
    <!-- <h1 class="front-room">Alone Spaceへようこそ</h1> -->
    <h2 class="front-test">お好きな部屋へどうぞ</h2>
    <div class="door0 flex">
      <div class="door1 front-door">
        <h2 class="door-text door1-text">初めての方<br>~当サイトの説明~</h2>
        <div class="door1-img"><a href="{{ url_for ('first_visitor' )}}"><img
              src="{{ url_for('static', filename='/images/header/door_close.png') }}" alt="door-close"></a></div>
      </div>
      <div class="door2 front-door">
        <h2 class="door-text door2-text">自分の部屋へ<br>(ログインが必要です)</h2>
        <div class="door2-img"><a href="{{ url_for ('room' )}}"><img
              src="{{ url_for('static', filename='/images/header/door_close.png') }}" alt="door-close"></a></div>
      </div>
      <div class="door3 front-door">
        <h2 class="door-text door3-text">共通掲示板</h2>
        <div class="door3"><a href="{{ url_for ('common_board' )}}"><img
              src="{{ url_for('static', filename='/images/header/door_close.png') }}" alt="door-close"></a></div>
      </div>
    </div>
  </div>

  <div class="information">
    <h2 class="information-text">～～～お知らせ～～～</h2>
    <div>
      <ul class="information-list">
        {% for indextext in readindexlist %}
        <li class="{{ indexlistname[loop.index0] }} information-text">{{ indextext }}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endblock%}

1行目のexpandsは前回使用した共通の部分を読みこませるキーワードです。

今回重要なコードは

<ul class="information-list">
　　{% for indextext in readindexlist %}
    　　<li class="{{ indexlistname[loop.index0] }} information-text">{{ indextext }}</li>
    {% endfor %}
 </ul>

の部分です。<ul>タグで箇条書きで表示させるようにさせます。そして、<li>タグで箇条書きの各項目を表示させます。


その内容を<li class=”{{ indexlistname[loop.index0] }} information-text”>{{ indextext }}</li>
で記入させています。

文章を表示させる部分

この内容をpythonでループさせ1行ずつ表示させます。html内でpythonを実行するには
{% for indextext in readindexlist %}
{% endfor %}
でループを発生させます。(ループに関してはこちら)
ループさせるリストはrender_templateで指定したreadindexlistになります。
そのリストから1つ抜き出しindextextという変数に格納します。
その格納した変数をhtmlの{{ indextext }}で表示させます。

個別のclassに分ける方法

表示させた文章を個別のclassに分けるために、class=”{{ indexlistname[loop.index0]　}}”で分けています。indexlistnameはrender_templateで指定したindexlistnameになります。indexlistnameはリストなので[ ]の中身を番号を指定することで中身を取り出すことができます。そこで、ループしている番号を参照したいので、loop.index0というキーワードでループしている番号をしています。今回は[‘header-text0’, ‘header-text1’, ‘header-text2’, ・・・]の中から0番目、1番目、2番目のように取り出します。そうすると、class名に各番号に対応した、文字が割り当てられます。これで各行でclassを変えることができます。あとは、cssで番号を指定して装飾を変えることができます。

これでhtmlの解説は終わりです。

今回はこれで以上です。

これまで解説したコードの全体像

from flask import Flask, render_template, redirect, url_for, session
from flask import request, Markup, flash
import os, time, locale
import secrets

locale.setlocale(locale.LC_ALL, 'en_US.UTF-8')

from utils import my_url_for
import alone_space_user as user
import alone_space_room_data as data
import alone_space_board_data as data2
import alone_space_registar_user as user_data

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

readindex = open('index.txt', 'r', encoding="utf-8")
@app.route('/front_room')
def front_room():
    readindexlist = readindex.readlines()
    indexlistname = []
    for num in range(len(readindexlist)):
        indexlistname.append('header-text' + str(num))
    return render_template('front_room.html', readindexlist=readindexlist, indexlistname=indexlistname)
{% 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%}
<!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>

最後に

今回はwebアプリのトップページを次のページを解説しました。今回のポイントは
・render_templateの変数を作成する方法
・render_templateで読みこんだ文章をhtmlに表示させる方法
・htmlで表示させた文章を個別のclassで指定する方法
です。

参考

外部リンク

pythonの基礎を復習したい方

python基礎を参考にしてください。

参考文献

私が参考にしたFlaskの本

Pythonではじめる Webサービス&スマホアプリの書きかた・作りかた | クジラ飛行机 |本 | 通販 | Amazon
Amazonでクジラ飛行机のPythonではじめる Webサービス&スマホアプリの書きかた・作りかた。アマゾンならポイント還元本が多数。クジラ飛行机作品ほか、お急ぎ便対象商品は当日お届けも可能。またPythonではじめる Webサービス&ス...
amzn.to

コメント

タイトルとURLをコピーしました