Heroku、Flask、Python、にゃん子掲示板を「csvファイル」で作る



#（１）csvを使って掲示板を作成する
###＜ディレクトリ構成＞

```
test
├app.py
├articles.csv
├Procfile
├requirements.txt
└templates
  ├index.html
  ├layout.html
  └index_result.html
```
###①コンテンツの作成
仮想環境をディレクトリtestの直下に設定、起動。

```
python3 -m venv .
source bin/activate
```

必要なフレームワークとwebサーバーをインストール。

```
pip install flask
pip install gunicorn
```

articles.csvに、掲示板のデータをはじめに入れておく。

```.csv:articles.csv
たま,眠いにゃー
しろ,腹減ったにゃー
クロ,なんだか暖かいにゃー
たま,ぽえーぽえーぽえー
ぽんたん,トイレットペーパーがない
なおちん,チーン
```

app.pyを作成。

```.py:app.py
# -*- coding: utf-8 -*-
from flask import Flask,request,render_template
app = Flask(__name__)

@app.route('/')
def bbs():
    lines = []
    #with openしてcsvファイルを読み込む
    with open('articles.csv',encoding='utf-8') as f:
        lines = f.readlines() #readlinesはリスト形式でcsvの内容を返す
    #index.htmlに返す
    return render_template('index.html',lines=lines)

#postメソッドを受け取る
@app.route('/result',methods=['POST'])
def result():
    #requestでarticleとnameの値を取得する
    article = request.form['article']
    name = request.form['name']
    #csvファイルに上書きモードで書き込む
    with open('articles.csv','a',encoding='utf-8') as f:
        f.write(name + ',' + article + '\n')
    #index_result.htmlに返す
    return render_template('index_result.html',article=article,name=name)


if __name__ == '__main__':
    app.run(debug=False)
```

index.htmlを作成。

```.html:index.html
{% extends 'layout.html' %}
{% block content %}
    <h1> にゃん子掲示板</h1>
    <form action='/result' method='post'>
        <label for='name'>にゃん子の名前</label>
        <input type='text' name='name'>
        <p></p>
        <label for='article'>投稿</label>
        <input type='text' name='article'>

        <button type='subimit'>書き込む</button>
    </form>

    <p></p>
    <p></p>

    <table border=1>
        <tr><th>にゃん子の名前</th><th>投稿内容</th></tr>
        {% for line in lines: %}
        <!--columnという変数をセット（変数セットにはsetが必要）  -->
        <!--splitを利用して,で分類する。splitはリストを返す  -->
            {% set column = line.rstrip().split(',') %}
            <tr><td>{{column[0]}}</td><td>{{column[1]}}</td></tr>
        {% endfor %}
    </table>

{% endblock %}
```
htmlのテンプレートを作成。

```.html:layout.html
<!DOCTYPE html>
<html lang='ja'>
  <head>
      <meta charset='utf-8'>
      <title>Nyanko BBS</title>
      <style>body{padding:10px;}</style>
  </head>
  <body>
    {% block content %}
    {% endblock %}
  </body>
</html>
```
index.htmlで入力したフォームの内容をindex_result.htmlであらわす。

```.html:layout.html
{% extends 'layout.html' %}
{% block content %}
    <h1>　にゃ-んと掲示板に書き込みました</h1>
    <p>{{name}}{{article}}</p>

    <!--formで/に戻る -->
    <form action='/' method='get'>
      <button type='submit'>戻る</button>
    </form>

{% endblock %}
```
###②Herokuへデプロイ
Herokuへのデプロイ詳細は以下の記事に書いた通りなので、詳細説明を省く。
[Heroku、Flask、Python、Gitでアップロードする方法（その②）](https://qiita.com/nooonchi/items/a7ea7c7a12c56ab8e901)
Procfile、requirements.txtを作成、gitで操作して無事にデプロイできた。

<img width="389" alt="スクリーンショット 2020-03-10 23.16.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/a9b2db31-d7ee-073e-b00f-b471012950d0.png">
”いわし”、”魚が大好き”と投稿すると、
<img width="578" alt="スクリーンショット 2020-03-10 23.16.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/bd26e72c-3136-db53-35d5-28e16cb9183a.png">
書き込み成功！
戻ると、
<img width="404" alt="スクリーンショット 2020-03-10 23.16.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/82d2a17f-fcf2-9b1b-165b-7adc4c85aaa0.png">
ちゃんと掲示板に書き込みされてます。

#次回はsqlを使って掲示板を作りたい
Herokuでのcsv書き込みはしばらくすると（３０分）データが消えてしまうので、sqlなどのデータベースを使って掲示板を作りたい。