【全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行を書きます。

app.py

import streamlit as st

st.title("私の初めてのアプリ")
st.write("PythonだけでWebサイトが作れました！")

実行する

ターミナルで以下のコマンドを実行します。

streamlit run app.py

自動的にブラウザが立ち上がり、アプリが表示されます。
（メールアドレスの入力を求められたら、何も入力せずにEnterを押してください）

成功！
タイトルと文字が表示されましたか？
ターミナルで Ctrl + C を押すと、アプリを停止できます。

4. 【応用】インタラクティブな機能を追加

文字が出るだけでは面白くないので。　「ユーザーが操作できる機能」　を追加しましょう。
今回は　「おみくじアプリ」　を作ってみます。

app.py の中身を全部消して、以下のように書き換えてください。

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 など）を入れてください。

コードの最後に以下を追加します。

app.py

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 と入力してから実行してみてください。
streamlit run してもブラウザが開かない
- 対処: 表示されたURL（ http://localhost:8501 ）をコピーして、自分でブラウザに貼り付けてください。