プレゼント交換をしたい！

本記事は、クリスマスワンナイトハッカソンの記事です。(詳細は**はじめに**の項目にて)
# はじめに
クリスマスに徹夜してハッカソンをするという[頭のおかしい企画](https://connpass.com/event/158943/)に参加をしました。チーム名は**STATIC夜**です。[@sou_rum](https://twitter.com/sou_rum)と一緒に参加しました。作品のテーマは「クリスマスにちなんだもの」でした。
# 作品について
ごちうさ[^1]でやっていたプレゼント交換をやりたかったので、それができるWebアプリを作ろうと思いました。とはいえ、実際に発送をするとなると様々な課題が発生するため、プレゼント交換体験アプリとなりました。
実際には、前の人が置いていったプレゼントを、自分のプレゼントを置いていくかわりに回収していくことでプレゼント交換を行っています。また、送ったものと貰ったものの値段に差がありすぎると悲しくなるので、高度なアルゴリズム[^2]によってその悲しみを極力抑えています。

ソースコードは、[GitHub](https://github.com/sakurum/xmas_hackathon)の方にあります。[デプロイ先(バグだらけ)](https://calm-depths-07383.herokuapp.com/)はこちら。
##動いている様子
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/ScROPfiec5">pic.twitter.com/ScROPfiec5</a></p>&mdash; Hide (@h28i_Hide) <a href="https://twitter.com/h28i_Hide/status/1209571905163816960?ref_src=twsrc%5Etfw">December 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



# 開発環境
- バックエンド　：Flask
- フロントエンド：HTML+jinja2
- サーバ：Heroku

## バックエンド
@Hide1204担当

Flaskを用いて作成しました。詳細は割愛しますが、postされたデータを少し処理してhtmlで返しているだけのお手軽アプリです。例外処理は一切書いていないので、いともたやすくサーバが死にます。[^3]


``` python3:app.py
# coding: utf-8
from flask import *
import queue
import sys, os
import re
import urllib.request
from bs4 import BeautifulSoup

app = Flask(__name__)
q_1000 = queue.Queue()
q_5000 = queue.Queue()
q_10000 = queue.Queue()

def title(url):
    d = urllib.request.urlopen(url).read().decode('UTF-8')
    soup = BeautifulSoup(d, "html.parser")
    return soup.title.string

@app.route('/', methods=["GET", "POST"])
def index():
    return render_template('index.html')

@app.route('/present', methods=["GET", "POST"])
def present():
    if request.method == "POST":
        price = int(request.form["present_price"])
        presenting_URL = request.form["present_URL"]
        presented_URL = ""
        if price <=1000:
            q_1000.put(presenting_URL)
            presented_URL = q_1000.get()
        elif price <=5000:
            q_5000.put(presenting_URL)
            presented_URL = q_5000.get()
        else:
            q_10000.put(presenting_URL)
            presented_URL = q_10000.get()
        present_title = title(presented_URL)
        return render_template('present.html',present_URL = presented_URL,present_title = present_title)
    else:
        return redirect('/')

if __name__ == "__main__":
    q_1000.put("https://www.amazon.co.jp/%E6%A0%97%E5%8E%9F%E5%9C%92-%E3%83%91%E3%82%A6%E3%83%B3%E3%83%89%E3%82%B1%E3%83%BC%E3%82%AD%E3%83%95%E3%83%AB%E3%83%BC%E3%83%84%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9-200g/dp/B07FMTV5GF/ref=sr_1_13?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E3%82%B1%E3%83%BC%E3%82%AD&qid=1577206099&refinements=p_76%3A2227292051&rnid=2227291051&rps=1&sr=8-13")
    q_5000.put("https://www.amazon.co.jp/BANDAI-%E3%82%AD%E3%83%A3%E3%83%A9%E3%83%87%E3%82%B3%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9-%E3%82%B9%E3%82%BF%E3%83%BC%E2%98%86%E3%83%88%E3%82%A5%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%97%E3%83%AA%E3%82%AD%E3%83%A5%E3%82%A2/dp/B07ZCXYHRK/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E3%82%B1%E3%83%BC%E3%82%AD&qid=1577206168&refinements=p_76%3A2227292051&rnid=2227291051&rps=1&sr=8-4")
    q_10000.put("https://www.amazon.co.jp/%E6%A3%AE%E6%B0%B8%E8%A3%BD%E8%8F%93-%E6%A3%AE%E6%B0%B8%E3%82%A8%E3%83%B3%E3%82%BC%E3%83%AB-%E3%82%B7%E3%83%BC%E3%83%88%E3%82%B1%E3%83%BC%E3%82%AD-%E3%83%86%E3%82%A3%E3%83%A9%E3%83%9F%E3%82%B9-365g%C3%9712%E7%AE%B1/dp/B01LYO5X95/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E3%82%B1%E3%83%BC%E3%82%AD&qid=1577206219&refinements=p_76%3A2227292051&rnid=2227291051&rps=1&sr=8-4")

    port = int(os.environ.get("PORT", 5000))
    app.run(host='0.0.0.0', port=port)


```

## フロントエンド
@sou_rum担当

webなんにもわかんないマンだったので簡素なwebページをつくりました。
POSTするだけだったのでやさしかった。

web初心者で眠かったのでゆるして

```HTML:index.html
{% extends "layout.html" %}
{% block content %}
<h2>プレゼントを贈ろう</h2>

<form action="/present" method="POST">
    <div class="form_line">
        <div class="line_title">
            ねだん
        </div>
        <div class="form">
            <input type="number" id="present_price" name="present_price" size="6">
        </div>
    </div>

    <div class="form_line">
        <div class="line_title">
            URL
        </div>
        <div class="form">
            <input type="url" id="present_URL" name="present_URL" placeholder="https://www.amazon.co.jp/贈りたいプレゼント" size="40">
        </div>
    </div>

    <div class="submit">
        <input type="submit" class="btn-square-shadow" name="submit" value="このプレゼントを贈る">
    </div>

</form>

{% endblock %}

```

```HTML:present.html

{% extends "layout.html" %}
{% block content %}

<h2>プレゼントを贈ろう</h2>

<a href="{{present_URL}}">{{present_title}}</a>をうけとったよ

{% endblock %}

```
# おわりに
Herokuにデプロイしたら、何故か自分の送ったプレゼントがそのまま帰ってきました。queueに初めにputしている所が動いてないのが原因っぽいけど、理由は不明です。今後の課題として、改善をしていきたいと思っています[^4]
[^1]: 可愛い天使なシャロちゃんが登場する日本の漫画
[^2]: if elif elseの３択分岐
[^3]: 値段の入力に対して`5000兆`と入れると、数値に出来ないので死にます
[^4]: つまり改善はされない