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

本記事は、クリスマスワンナイトハッカソンの記事です。(詳細ははじめにの項目にて)

はじめに

クリスマスに徹夜してハッカソンをするという頭のおかしい企画に参加をしました。チーム名はSTATIC夜です。@sou_rumと一緒に参加しました。作品のテーマは「クリスマスにちなんだもの」でした。

作品について

ごちうさ¹でやっていたプレゼント交換をやりたかったので、それができるWebアプリを作ろうと思いました。とはいえ、実際に発送をするとなると様々な課題が発生するため、プレゼント交換体験アプリとなりました。
実際には、前の人が置いていったプレゼントを、自分のプレゼントを置いていくかわりに回収していくことでプレゼント交換を行っています。また、送ったものと貰ったものの値段に差がありすぎると悲しくなるので、高度なアルゴリズム²によってその悲しみを極力抑えています。

ソースコードは、GitHubの方にあります。デプロイ先(バグだらけ)はこちら。
##動いている様子

pic.twitter.com/ScROPfiec5

— Hide (@h28i_Hide) December 24, 2019

開発環境

• バックエンド　：Flask
• フロントエンド：HTML+jinja2
• サーバ：Heroku

バックエンド

@Hide1204担当

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

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初心者で眠かったのでゆるして

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 %}

present.html

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

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

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

{% endblock %}

おわりに

Herokuにデプロイしたら、何故か自分の送ったプレゼントがそのまま帰ってきました。queueに初めにputしている所が動いてないのが原因っぽいけど、理由は不明です。今後の課題として、改善をしていきたいと思っています⁴

1. 可愛い天使なシャロちゃんが登場する日本の漫画 ↩

2. if elif elseの３択分岐 ↩

3. 値段の入力に対して5000兆と入れると、数値に出来ないので死にます ↩

4. つまり改善はされない ↩