「あ」って表示するだけのウェブサイトをサクッと作る

## 概要

- Python 入門サイトをひとつ終えた。
- 次は何をしようかな?
- インターネットで誰からでも閲覧できる、ウェブサイトを1個作ってみよう。
- 無料で!

そういうことになった。「ウェブサイトを作る」ってとこにフォーカスしたいので、サイトの内容については欲を出さず、「あ」って表示するだけにする。


## フォルダを作る

フォルダを作って project-a と名付ける。

### これは何をしているのか

今回ファイルとかを置くフォルダを作成。プロジェクト「あ」。


## コンソールでごちゃごちゃやる

project-a フォルダの中でコンソールを開いて、以下のようにごちゃごちゃやる。

```bash
# Python が入ってることの確認。
$ python -V
Python 3.6.8
# (2019-10-28 追記)確認というか、これはこの Python のバージョンを表示するコマンド。
# バージョンが表示できるのならインストールされているだろう、というコト。

# pipenv をごちゃごちゃやる。
$ pip install pipenv
$ pipenv install
$ pipenv shell
# (2019-10-28 追記)pip というプログラムに、 pipenv というパッケージのインストールをお願いしている。
# pipenv さんがしてくれるのは、現在のフォルダにだけ独立してパッケージをインストールすること。
```

### これは何をしているのか

project-a フォルダの中で Python の独立した仮想環境を作っている。


## 引き続きコンソールでごちゃごちゃやる

```bash
# 今回の件に必要なライブラリをインストール。
$ pipenv install flask gunicorn
# (2019-10-28 追記)上述したように、 pipenv さんがパッケージをインストールしてくれる。
# pipenv install のあとに半角スペース区切りで install したいパッケージを並べて書ける。
```

### これは何をしているのか

Python でウェブアプリライブラリ flask をインストール。 Heroku で動作させるために必要なライブラリ gunicorn をインストール。


## py ファイルを3つ作る

### ひとつめ

my_flask_script.py というファイル名で作る。このファイル名は何でも構わない。内容は以下をコピペしよう。

```python
# (2019-10-28 追記)
# これから作る main というフォルダの __init__.py ファイルの中から app という変数をインポートしている。
from main import app

app.run(debug=True)
```

### ふたつめ

これは、 main というフォルダを作ってその中に作る。ファイル名は \_\_init\_\_.py。内容は以下をコピペしよう。

```python
# (2019-10-28 追記)
# 一方こちらはフォルダではなく、さきほど install した flask というパッケージから Flask という変数をインポートしている。
from flask import Flask

app = Flask(__name__)

# (2019-10-28 追記)
# この main というフォルダの中にあとで作成する views.py をインポートしている。
import main.views
```

### みっつめ

これも、 main フォルダの中に作る。ファイル名は views.py。内容は以下をコピペしよう。

```python
import flask
from main import app

# (2019-10-28 追記)
# このあとこのスクリプトはウェブページとして https://your.website みたいな URL で公開されることになるのだけれど、
# そのとき https://your.website/ の URL がアクセスされたとき @app.routes('/') のついた関数の中身が実行される。
# おなじように @app.routes('/python') の関数を作れば https://your.website/python という URL が作成できる。
@app.route('/')
def top_page():
    # (2019-10-28 追記)return しているものの中身が、ウェブページに表示されることになる。
    return 'あ'
```

### これは何をしているのか

ウェブアプリライブラリ flask を利用して、ウェブページを表示するためのスクリプトを用意している。この状態で my_flask_script.py を実行すると、 http://localhost:5000 にアクセスすることができる。「あ」と表示されているはずだ。一度見たら Ctrl+c で実行を停止すること。

けれどこの状態では、自分のぱそこで閲覧できるだけだ。インターネットでは見れない。


## Heroku というサイトでアカウントを作る

- [Heroku | Login](https://id.heroku.com/login)

このページでアカウントを作る。

### これは何をしているのか

今回つくったウェブアプリは、 Heroku というサービスが提供してくれている無料のサーバにアップロードする。その Heroku を利用するためのアカウントをここでは作成している。


## いろいろとインストールする

1. [The Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
2. Git
    - Windows は [git for windows](https://gitforwindows.org/)。
    - Mac は [Git](https://git-scm.com/) でもいいし Homebrew で入れてもいいし。

### これは何をしているのか

先程、「無料のサーバにアップロードする」と言ったけれど、それを行うためのツールをインストールしている。


## またコンソールでごちゃごちゃやる

```bash
# (2019-10-28 追記)pipenv さんが install してくれたパッケージの詳細を、
# requirements.txt というファイルに記述する。
$ pipenv run pip freeze > requirements.txt

# (2019-10-28 追記)作った my_flask_script ファイルを実行してねヨロシク、
# っていう指示書 Procfile を作成。
$ echo web: gunicorn my_flask_script:app --log-file - > Procfile
```

### これは何をしているのか

つくったウェブアプリを Heroku のサーバで動かすためのファイルをふたつ作成している。


## まだまだコンソールでごちゃごちゃやる

```bash
$ git init
$ git add --all
$ git commit -m "「あ」って表示する。"
```

ここで、 Heroku でにおけるこのアプリの名前を適当に考えないといけない。 project-a にしたいところなんだけれど、 Heroku の中で一意の名前でないといけない。ここでは適当に `project-a12345` ということにしてみる。適宜書き換えてコマンドを実行すること。

```bash
# これを打ったあと、 Heroku サイトでの認証が挟まれるかもしれない。
$ heroku create project-a12345

$ git push heroku master
```

### これは何をしているのか

つくったウェブアプリを Heroku サーバへアップロードしています。


## 作業はこれでおしまい

もうインターネットで開けるようになっているはず。

```bash
# このコマンドでブラウザからつくったウェブアプリを開ける。
$ heroku open
```

このコマンドを打つと https://project-a12345.herokuapp.com/ が開き、インターネット空間に我々の**「あ」**が堂々と表示されているのがわかるでしょう。友達のケータイからも「あ」が見えるのがわかるはずです。


## このあと

たとえば先程つくった main/views.py ファイルの `return 'あ'` の部分を変更すれば、画面に表示されるものを変えることができます。もちろん変えただけだと Heroku にアップロードされていないので、以下コマンドを実行してアップロードします。

```bash
$ git add --all
$ git commit -m "「あ」を「い」に変えた。"
$ git push heroku master
```

もっと色々やりたいなら、こんな手順を踏めばよいかなと思います。

- `python flask [やりたいこと]` でググる。
- project-a を改造する。
- Heroku にアップしたくなったら、上述コマンドでまたアップロードする。