# PythonとFlaskでWebアプリケーション作った ## やったこと - Qiita APIを使ってQiita記事を取得 - Flaskで簡単なwebアプリケーションの作成 - herokuで作った物をデプロイ ## 雑記 - 昨日夜更かしした　眠い - ピザ旨かった ## ディレクトリ構成 ``` qiitaget ├── app.py ├── Procfile ├── requirements.txt └── templates └── index.html ``` スペルミスに注意！ 割とやりがち ## app.py ```python from flask import Flask, render_template, request, redirect, url_for import requests from urllib.parse import urlencode app = Flask(__name__) host = "https://qiita.com" path = "/api/v2/items" app = Flask(__name__) @app.route('/') def index(): query = request.args.get("query") #全記事を入れるリストを作成 articlelist = [] parameters = { 'per_page': 20, 'query': query } r = requests.get(host + path + "?" + urlencode(parameters)) r.raise_for_status() items = r.json() hoge = "検索結果: " + (query if query else "") return render_template('index.html',articlelist=items,hoge=hoge) if __name__ == "__main__": app.run(debug=True) ``` https://qiita.com/api/v2/docs を参考にしながら頑張る ## Procfile ``` web: gunicorn -b 0.0.0.0:$PORT app:app ``` ここでかなり詰まってしまった、、、。 いろんなサイトにあるやつをやったが駄目だったけど、これで行けた。 gunicornでport番号を指定しなければいけなかったぽい。 最後のapp:appの最初のappはapp.pyのapp 0.0.0.0にバインドすると外部に公開される。217.0.0.1だとlocalhost。 ## requirments.txt ``` flask gevent gunicorn requests ``` 使用しているライブラリを書くらしい。 ## index.html ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!--解消度をディスプレイサイズに合わせる--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <title>Qiita記事まとめ</title> </head> <body> <h1 class="text-center bg-warning" >Qiita記事をスクレイピング</h1> <h2 class="text-center">{{hoge}} </h2> <form> <div class="text-center"> <input name="query" > <input type="submit" value="検索"> </div> </form> <div class="container"> <div class="row"> <div class="col-md-12"> {% for qiita in articlelist %} <div class="card mt-5"> <div class="card-header"> <h5 class="card-title">{{ qiita["title"] }}</h5> </div> <div class="card-body text-center"> <p>{{ qiita['body'][0:100] + '...'}}</p> </div> <div class="card-body text-center"> <a href="{{ qiita['url']}}" class="btn btn-info">Look Article</a> </div> </div> {% endfor %} </div> </div> </div> </body> </html> ``` bootstrapに頑張ってもらった。 https://qiita.com/ynakayama/items/2cc0b1d3cf1a2da612e4　参考 ##