【全6回】知識ゼロからVPSでWebアプリ公開 #3 オリジナルアプリを開発しよう（前編）
はじめに
本連載は、超初心者が 「Dockerを使って自作Webアプリをサーバー公開する」 までのステップバイステップ講座です。
- 第1回：Dockerってなに？ ＆ Webサーバーを起動せよ
- 第2回：人気No.1 CMS「WordPress」を構築せよ
- 第3回：オリジナルアプリ開発① 〜コードを書く〜（今回）
- 第4回：オリジナルアプリ開発② 〜コンテナ化〜
- 第5回：【実演】VPSへのデプロイ（世界へ公開）
- 第6回：守りの技術：バックアップとセキュリティ
前回は「WordPress」という既製品を使いました。
今回からは、いよいよ自分だけのオリジナルアプリを作ります。「世界に一つだけのツール」を作る第一歩です！
1. 今回使う魔法の道具「Streamlit」
Webアプリを作るには、本来なら以下の知識が必要です。
- HTML: 骨組みを作る
- CSS: 色やデザインを整える
- JavaScript: 動きをつける
- Python: 裏側の処理を書く
...これを全部覚えるのは大変ですよね？
そこで今回は、Pythonだけ書けば、勝手にHTMLやCSSを作ってくれる「Streamlit（ストリームリット）」 というライブラリを使います。
データ分析やAI開発の現場でも大人気のツールです。
2. 開発環境の準備
まず、自分のPCでPythonが動くように準備をします。
ステップ1：Pythonの確認
ターミナル（Mac）またはPowerShell（Windows）を開いて、以下のコマンドを打ってください。
python --version
# または
python3 --version
Python 3.x.x と表示されればOKです！
※もしエラーが出る場合は、Python公式サイトからインストーラーをダウンロードして入れてください（インストール時に「Add Python to PATH」にチェックを入れるのを忘れずに！）。
ステップ2：作業用フォルダ作成
デスクトップに my-app というフォルダを作ります。
cd ~/Desktop
mkdir my-app
cd my-app
# Windowsの方は cd ~\Desktop\my-app
ステップ3：Streamlitのインストール
Pythonの便利機能（ライブラリ）を追加します。
pip install streamlit
# Macでエラーが出る場合は pip3 install streamlit
これで準備完了です！
3. 【演習】3行でWebアプリを作ろう
まずは「Hello World」を表示させてみましょう。
VS Codeなどのエディタを開き、my-app フォルダの中に app.py というファイルを作成してください。
コードを書く
app.py に以下の3行を書きます。
import streamlit as st
st.title("私の初めてのアプリ")
st.write("PythonだけでWebサイトが作れました！")
実行する
ターミナルで以下のコマンドを実行します。
streamlit run app.py
自動的にブラウザが立ち上がり、アプリが表示されます。
（メールアドレスの入力を求められたら、何も入力せずにEnterを押してください）
成功！
タイトルと文字が表示されましたか？
ターミナルでCtrl + Cを押すと、アプリを停止できます。
4. 【応用】インタラクティブな機能を追加
文字が出るだけでは面白くないので。 「ユーザーが操作できる機能」 を追加しましょう。
今回は 「おみくじアプリ」 を作ってみます。
app.py の中身を全部消して、以下のように書き換えてください。
import streamlit as st
import random # ランダムな数字を使うための道具
st.title("今日の運勢アプリ 🔮")
# テキスト入力欄を作る
name = st.text_input("あなたの名前を教えてください")
# ボタンを作る
if st.button("占う！"):
# ボタンが押された時の処理
if name:
omikuji_list = ["大吉", "中吉", "小吉", "末吉", "凶"]
result = random.choice(omikuji_list) # リストからランダムに1つ選ぶ
st.write(f"{name}さんの今日の運勢は...")
# 結果を大きく表示
st.header(result)
if result == "大吉":
st.balloons() # 風船を飛ばす演出！
else:
st.warning("名前を入力してください！")
保存して確認
ファイルを保存したら、ブラウザを見てください。右上に「Rerun」というボタンが出ているはずです。それを押すか、ブラウザを更新（F5）してください。
- 名前を入力する。
- 「占う！」ボタンを押す。
- 結果が出て、風船が飛びましたか？🎈
たったこれだけのコードで、入力フォーム、ボタン、条件分岐、アニメーションまで実装できました。これがStreamlitの威力です。
5. 画像を表示してみよう（余裕がある人向け）
アプリに画像を表示させてみましょう。
my-app フォルダの中に、好きな画像ファイル（cat.jpg など）を入れてください。
コードの最後に以下を追加します。
st.divider() # 区切り線
# チェックボックスにチェックが入ったら画像を表示
if st.checkbox("癒やされたいですか？"):
st.image("cat.jpg", caption="かわいい猫") # 画像ファイル名を指定
保存してリロードしてみてください。チェックボックスの動きも簡単に作れましたね！
6. 次回予告：このアプリを「箱詰め」しよう
今、このアプリはあなたのPCの中でしか動きません。
友達のPCで動かすには、友達にもPythonをインストールしてもらい、pip install してもらう必要があります。それは面倒ですよね。
次回は、第1回で学んだDockerを使います。
今日作ったこのアプリを 「コンテナ」 という箱に閉じ込めて、 「誰のPCでも（そしてサーバーでも）コマンド一発で動く状態」 に加工します。
- 第4回：オリジナルアプリ開発② 〜コンテナ化〜
いよいよ本格的な開発っぽくなってきます。お楽しみに！
よくあるトラブル
-
pipコマンドが見つからないと言われる- 原因: Pythonインストール時に「PATHを通す」設定を忘れている場合が多いです。
- 対処: Pythonをアンインストールし、再度インストーラーを起動して、最初の画面下にある "Add Python to PATH" にチェックを入れてからインストールしてください。
-
PowerShellで「スクリプトの実行が無効」と言われる
-
対処: セキュリティ設定が厳しい状態です。コマンドプロンプト（cmd.exe）を使うか、PowerShellで
Set-ExecutionPolicy RemoteSigned -Scope Processと入力してから実行してみてください。
-
対処: セキュリティ設定が厳しい状態です。コマンドプロンプト（cmd.exe）を使うか、PowerShellで
-
streamlit runしてもブラウザが開かない-
対処: 表示されたURL（
http://localhost:8501）をコピーして、自分でブラウザに貼り付けてください。
-
対処: 表示されたURL（