【Python】Flask+SQLAlchemyで「ひとこと掲示板」を作る

この記事は約9分で読めます。

 

Flaskの基本的な使い方

 

Flaskの基本的な使い方は↓の記事にて解説しています。今回はこれらの要素を組み合わせて「ひとこと掲示板」を作っていきたいと思います。

 

 

<シリーズ記事一覧>

 

Flaskで一言掲示板を作ってみる

 

今回作るのは↓のような簡単な掲示板アプリケーションです。

 

 

f:id:oruka199665:20190521135931p:plain

 

 

Flaskを使って、インターネット掲示板を作るうえでまず必要なのは、書き込んだ内容を保存するデータベース、そして最近の投稿内容のデータをサーバー側からテンプレート側に渡すテンプレートエンジン(jinja2)になります。

 

 

<今回の開発環境>

  • Flask
  • Anaconda(Python3.6)
  • jinja2
  • SQLALCHEMY

 

flask-sqlalchemyはAnacondaにはデフォルトでインストールされていないので、↓のコマンドをターミナルで打ち込んでインストールしてみてください。

 

 

# flask-sqlalchemyのインストール
$pip install flask-sqlalchemy

 

 

という訳で、まずは完成したコードを乗せていきます。Webアプリなので、サーバー側のpyファイルとフロント側のhtmlファイルが、必要になり、ディレクトリなどはgitにまとめてアップロードしているので、そちらから確認していただけると幸いです。

 

Githubのレポジトリ→https://github.com/beginerSE/flask_thread_app

 

 

pyファイル

 

まずは、サーバーサイドのpyファイルがこちら

 

from flask import Flask, request, render_template
from datetime import datetime
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

SQLALCHEMY_TRACK_MODIFICATIONS = False
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

# SQLAlchemyでデータベースに接続する
db_uri = 'sqlite:///test.db'
app.config['SQLALCHEMY_DATABASE_URI'] = db_uri
db = SQLAlchemy(app)

# SQLAlchemyでデータベースに接続する
db_uri = 'sqlite:///test.db'
app.config['SQLALCHEMY_DATABASE_URI'] = db_uri
db = SQLAlchemy(app)

 

 

HTML側

 

<index.html>

こちらがトップ画面になります、これまでの投稿内容が確認できると共に入力フォームに名前と投稿内容を入力することで、コメントを追加できます。

 

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ひとこと掲示板</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
      <h1>掲示板へようこそ!</h1>
      <form action="/result" method="post">
          <input type="hidden" name="comment_box">
          <label for="comment_">投稿</label>
          <textarea name="comment_data" rows="6" cols="100"></textarea>
          <p></p>
          <label for="name">名前</label>
          <input type="text" name="name">
          <button type="submit">送信する</button>
          </form>
      <h2>投稿一覧</h2>
      {% block body %}
      <form method="post" action="">
         <table class="table">
              <thead class="thead-dark">
                  <tr>
                      <th>日付</th>
                      <th>名前</th>
                      <th>投稿内容</th>
                      </tr>
                  </thead>
              <tbody>
                  {% for th in lines %}
                  <tr>
                      <td>{{ th.pub_date }}</td>
                      <td>{{ th.name }}</td>
                      <td>{{ th.comment }}</td>
                      </tr>
                  {% endfor %}
                  </tbody>
              </table>
          </form>
      {% endblock %}
     <p></p>
</body> 
</html>

 

 

<result.html>

投稿が完了すると、この画面に移動します。戻るボタンをクリックすれば、最初の画面に戻ります。

 

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
    <title>書き込み完了</title>
</head>
<body>
    <h1>コメントを書き込みました</h1>
    <br>
    <form action="/" method="get">
        <button type="submit">戻る</button>
    </form>
</body>
</html>

 

 

終わり

 

ここではこれまでやってきたFlaskでWebアプリ―ケーションを作るにあたって必要な知識を組み合わせて簡単なアプリケーションを作りました。

 

Flaskはこんな感じで簡単なアプリケーションであればさっと作ることができますが、大規模化には向いておらずそういった場合はDjangoというPythonのWebフレームワークを使用することになります。

 

 

関連記事:【Python】Djangoを使ってウェブサイトを作成する その①

 

 

Pythonでのアプリ開発の案件数は日本ではまだ多くありませんが、YoutubeやインスタグラムはPythonで作られておりそのスペックは十分にあります。

 

PythonはAIの開発が得意という事もあって、FlaskはAIで計算した結果を表示させるwebアプリの開発なんかに使われることが多いです。

 

 

 

 

コメント

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