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

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アプリの開発なんかに使われることが多いです。

プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする

   侍エンジニア塾       
侍エンジニアの無料体験レッスンを予約する -->