Tasuke HubLearn · Solve · Grow
#ConoHa WING

AIチャットボット開発ならConoHa WING!Streamlit・Gradioアプリを低コスト運用する方法

ChatGPT・Claude連携のチャットボット、AIツールをConoHa WINGで開発・公開する完全ガイド。Streamlit、Gradio、LangChainを使った実践的な構築手順を解説します。

時計のアイコン27 November, 2025
TH

Tasuke Hub管理人

東証プライム市場上場企業エンジニア

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、 複数のプロジェクトでリードエンジニアを担当。 技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

AIツールを誰でも使える形で公開

「社内向けのAIチャットボットを作りたい」
「StreamlitでAIツールを開発したけど、どこにデプロイすれば...」
「低コ ストでAIアプリを公開したい」

AI技術が進化する中、自社専用のAIツール開発のニーズが急増しています。

本記事では、ConoHa WINGでAIチャットボット・ツールを構築する方法を実践的に解説します。

ベストマッチ

最短で課題解決する一冊

この記事の内容と高い親和性が確認できたベストマッチです。早めにチェックしておきましょう。

なぜAIツール開発にConoHa WINGなのか

理由1: Streamlit・Gradioが簡単にデプロイできる

主要AIフレームワークの完全対応:

フレームワーク 用途 ConoHa WING対応
Streamlit データアプリ・ダッシュボード ✅ 完全対応
Gradio ML/AIデモアプリ ✅ 完全対応
Flask カスタムWebアプリ ✅ 完全対応
FastAPI 高速API ✅ 完全対応

理由2: 圧倒的な低コスト

他社サービスとの比較:

Hugging Face Spaces (有料):
- 月額: $0.60/時間
- 24時間稼働: 約$432/月(約65,000円)

Streamlit Cloud (有料):
- 月額: $250〜(約37,500円)

ConoHa WING (スタンダード):
- 月額: 1,925円
- 24時間365日稼働

差額: 35,575円/月節約(年間427,000円!)

理由3: 社内ツールに最適なセキュリティ

IP制限・Basic認証が標準搭載:

.htaccessIP制限:
Order deny,allow
Deny from all
Allow from 203.0.113.0/24  # 会社のIPレンジ

Basic認証:
AuthType Basic
AuthName "AI Tools - Company Only"
AuthUserFile /path/to/.htpasswd
Require valid-user

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

実践1: StreamlitでAIチャットボット

シンプルなChatGPTチャット

import streamlit as st
from openai import OpenAI
import os

# ページ設定
st.set_page_config(
    page_title="AIチャットアシスタント",
    page_icon="🤖",
    layout="wide"
)

# OpenAIクライアント初期化
client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

# タイトル
st.title("🤖 AIチャットアシスタント")
st.caption("ChatGPT-4o搭載の社内向けチャットボット")

# セッション状態の初期化
if "messages" not in st.session_state:
    st.session_state.messages = []

# チャット履歴を表示
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# ユーザー入力
if prompt := st.chat_input("メッセージを入力してください"):
    # ユーザーメッセージを表示
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # AIの応答を生成
    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        full_response = ""
        
        # ストリーミング応答
        for response in client.chat.completions.create(
            model="gpt-4o-mini",
            messages=[
                {"role": m["role"], "content": m["content"]}
                for m in st.session_state.messages
            ],
            stream=True,
        ):
            if response.choices[0].delta.content:
                full_response += response.choices[0].delta.content
                message_placeholder.markdown(full_response + "▌")
        
        message_placeholder.markdown(full_response)
    
    # アシスタントの応答を保存
    st.session_state.messages.append({"role": "assistant", "content": full_response})

# サイドバー
with st.sidebar:
    st.header("設定")
    
    if st.button("会話履歴をクリア"):
        st.session_state.messages = []
        st.rerun()
    
    st.divider()
    
    st.caption("© 2025 Your Company")

デプロイ手順

# 1. SSH接続
ssh username@your-domain.com

# 2. ディレクトリ作成
mkdir ~/streamlit-chatbot
cd ~/streamlit-chatbot

# 3. 仮想環境作成
python3.11 -m venv venv
source venv/bin/activate

# 4. 依存関係インストール
pip install streamlit openai python-dotenv

# 5. 環境変数設定
cat << EOF > .env
OPENAI_API_KEY=sk-your-api-key-here
EOF

# 6. Streamlit起動設定
cat << EOF > run_streamlit.sh
#!/bin/bash
cd ~/streamlit-chatbot
source venv/bin/activate
streamlit run app.py --server.port=8501 --server.address=0.0.0.0
EOF

chmod +x run_streamlit.sh

# 7. systemdで常駐化
sudo nano /etc/systemd/system/streamlit-chatbot.service

# 8. サービス起動
sudo systemctl enable streamlit-chatbot
sudo systemctl start streamlit-chatbot

systemdサービスファイル:

[Unit]
Description=Streamlit Chatbot
After=network.target

[Service]
Type=simple
User=username
WorkingDirectory=/home/username/streamlit-chatbot
ExecStart=/home/username/streamlit-chatbot/run_streamlit.sh
Restart=always

[Install]
WantedBy=multi-user.target

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

実践2: GradioでAIデモアプリ

画像生成AIツール

import gradio as gr
from openai import OpenAI
import os

client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

def generate_image(prompt, size="1024x1024", quality="standard"):
    """DALL-E 3で画像生成"""
    try:
        response = client.images.generate(
            model="dall-e-3",
            prompt=prompt,
            size=size,
            quality=quality,
            n=1,
        )
        
        return response.data[0].url, "画像生成完了!"
    except Exception as e:
        return None, f"エラー: {str(e)}"

# Gradio UI
with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# 🎨 AI画像生成ツール")
    gr.Markdown("DALL-E 3を使った画像生成デモ")
    
    with gr.Row():
        with gr.Column():
            prompt_input = gr.Textbox(
                label="プロンプト",
                placeholder="生成したい画像の説明を入力してください",
                lines=3
            )
            
            with gr.Row():
                size_dropdown = gr.Dropdown(
                    choices=["1024x1024", "1792x1024", "1024x1792"],
                    value="1024x1024",
                    label="サイズ"
                )
                
                quality_radio = gr.Radio(
                    choices=["standard", "hd"],
                    value="standard",
                    label="品質"
                )
            
            submit_btn = gr.Button("画像生成", variant="primary")
        
        with gr.Column():
            output_image = gr.Image(label="生成された画像")
            output_message = gr.Textbox(label="ステータス")
    
    submit_btn.click(
        fn=generate_image,
        inputs=[prompt_input, size_dropdown, quality_radio],
        outputs=[output_image, output_message]
    )
    
    gr.Examples(
        examples=[
            ["未来都市の風景、サイバーパンク、夜景"],
            ["かわいい猫のイラスト、水彩画風"],
            ["富士山と桜、日本の伝統的な風景画"]
        ],
        inputs=prompt_input
    )

# 起動
if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False
    )

マルチタブAIツール

import gradio as gr
from openai import OpenAI
import os

client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

def chat(message, history):
    """チャット機能"""
    messages = []
    for h in history:
        messages.append({"role": "user", "content": h[0]})
        messages.append({"role": "assistant", "content": h[1]})
    messages.append({"role": "user", "content": message})
    
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=messages
    )
    
    return response.choices[0].message.content

def summarize(text):
    """要約機能"""
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": "あなたは要約の専門家です。"},
            {"role": "user", "content": f"以下のテキストを3行で要約してください:\n\n{text}"}
        ]
    )
    return response.choices[0].message.content

def translate(text, target_lang):
    """翻訳機能"""
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": f"あなたはプロの翻訳家です。テキストを{target_lang}に翻訳してください。"},
            {"role": "user", "content": text}
        ]
    )
    return response.choices[0].message.content

# UI構築
with gr.Blocks(title="AIツールスイート") as demo:
    gr.Markdown("# 🤖 AIツールスイート")
    
    with gr.Tabs():
        # チャットタブ
        with gr.Tab("💬 チャット"):
            chatbot = gr.Chatbot(height=400)
            msg = gr.Textbox(placeholder="メッセージを入力...")
            clear = gr.Button("クリア")
            
            msg.submit(chat, [msg, chatbot], [chatbot])
            clear.click(lambda: None, None, chatbot, queue=False)
        
        # 要約タブ
        with gr.Tab("📝 要約"):
            with gr.Row():
                input_text = gr.Textbox(
                    label="要約したいテキスト",
                    placeholder="長文を入力してください",
                    lines=10
                )
                output_summary = gr.Textbox(
                    label="要約結果",
                    lines=10
                )
            
            summarize_btn = gr.Button("要約する")
            summarize_btn.click(summarize, inputs=input_text, outputs=output_summary)
        
        # 翻訳タブ
        with gr.Tab("🌐 翻訳"):
            with gr.Row():
                with gr.Column():
                    trans_input = gr.Textbox(
                        label="翻訳元テキスト",
                        lines=8
                    )
                    target_lang = gr.Dropdown(
                        choices=["英語", "中国語", "韓国語", "フランス語", "スペイン語"],
                        value="英語",
                        label="翻訳先言語"
                    )
                    translate_btn = gr.Button("翻訳する")
                
                with gr.Column():
                    trans_output = gr.Textbox(
                        label="翻訳結果",
                        lines=10
                    )
            
            translate_btn.click(
                translate,
                inputs=[trans_input, target_lang],
                outputs=trans_output
            )

demo.launch(server_name="0.0.0.0", server_port=7860)

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

実践3: LangChain社内RAGシステム

社内文書検索AI

import streamlit as st
from langchain_openai import ChatOpenAI, OpenAIEmbeddings
from langchain_community.vectorstores import FAISS
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain.chains import RetrievalQA
from langchain_community.document_loaders import DirectoryLoader, TextLoader
import os

# Streamlit UI
st.title("📚 社内文書検索AI")
st.caption("社内の規定・マニュアルをAIが回答します")

# サイドバー - 文書インデックス作成
with st.sidebar:
    st.header("管理")
    
    if st.button("文書をインデックス化"):
        with st.spinner("インデックス作成中..."):
            # 文書読み込み
            loader = DirectoryLoader(
                './documents',
                glob="**/*.txt",
                loader_cls=TextLoader
            )
            documents = loader.load()
            
            # テキスト分割
            text_splitter = RecursiveCharacterTextSplitter(
                chunk_size=1000,
                chunk_overlap=200
            )
            texts = text_splitter.split_documents(documents)
            
            # ベクトルDB作成
            embeddings = OpenAIEmbeddings()
            vectorstore = FAISS.from_documents(texts, embeddings)
            vectorstore.save_local("./faiss_index")
            
            st.success(f"✅ {len(texts)}個のチャンクをインデックス化しました")

# メインエリア
if os.path.exists("./faiss_index"):
    # ベクトルDB読み込み
    embeddings = OpenAIEmbeddings()
    vectorstore = FAISS.load_local(
        "./faiss_index",
        embeddings,
        allow_dangerous_deserialization=True
    )
    
    # RAGチェーン構築
    llm = ChatOpenAI(model_name="gpt-4o-mini", temperature=0)
    qa_chain = RetrievalQA.from_chain_type(
        llm=llm,
        chain_type="stuff",
        retriever=vectorstore.as_retriever(search_kwargs={"k": 3})
    )
    
    # 質問入力
    question = st.text_input("質問を入力してください", placeholder="例: 有給休暇の取得方法は?")
    
    if st.button("検索", type="primary"):
        if question:
            with st.spinner("検索中..."):
                result = qa_chain.invoke({"query": question})
                
                st.subheader("回答")
                st.write(result['result'])
                
                # 参照元を表示
                st.subheader("参照文書")
                docs = vectorstore.similarity_search(question, k=3)
                for i, doc in enumerate(docs, 1):
                    with st.expander(f"参照 {i}: {doc.metadata.get('source', 'Unknown')}"):
                        st.text(doc.page_content)
        else:
            st.warning("質問を入力してください")
else:
    st.info("まず文書をインデックス化してください(サイドバー)")

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

本番運用のベストプラクティス

Nginx リバースプロキシ設定

# /etc/nginx/sites-available/ai-tools

upstream streamlit {
    server 127.0.0.1:8501;
}

upstream gradio {
    server 127.0.0.1:7860;
}

server {
    listen 80;
    server_name tools.yourdomain.com;
    
    # Streamlit
    location /chat {
        proxy_pass http://streamlit;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # Gradio
    location /image-gen {
        proxy_pass http://gradio;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

モニタリング設定

# logging_config.py
import logging
from datetime import datetime

def setup_logging():
    """ロギング設定"""
    log_format = '%(asctime)s - %(name)s - %(levelname)s - %(message)s'
    
    logging.basicConfig(
        level=logging.INFO,
        format=log_format,
        handlers=[
            logging.FileHandler(f'logs/app_{datetime.now():%Y%m%d}.log'),
            logging.StreamHandler()
        ]
    )
    
    return logging.getLogger(__name__)

# app.pyで使用
logger = setup_logging()
logger.info("AI Tool started")

コスト監視

import os
from openai import OpenAI

client = OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

def track_usage(response):
    """APIコスト追跡"""
    usage = response.usage
    
    cost_per_token = {
        'gpt-4o-mini': {
            'input': 0.00015 / 1000,  # $0.150 / 1M tokens
            'output': 0.00060 / 1000   # $0.600 / 1M tokens
        }
    }
    
    input_cost = usage.prompt_tokens * cost_per_token['gpt-4o-mini']['input']
    output_cost = usage.completion_tokens * cost_per_token['gpt-4o-mini']['output']
    total_cost = input_cost + output_cost
    
    # ログに記録
    logger.info(f"API Cost: ${total_cost:.6f} (Input: {usage.prompt_tokens}, Output: {usage.completion_tokens})")
    
    return total_cost

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

プラン選択ガイド

同時接続数別の推奨プラン

同時接続数 プラン 月額 用途
1-10人 ベーシック 891円 小規模チーム
10-50人 スタンダード 1,925円 中規模組織
50人以上 プレミアム 3,850円 大規模組織

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

まとめ: AIツール開発の最適環境

ConoHa WINGは AIチャットボット・ツール開発の理想的な環境 です:

🚀 簡単デプロイ

  • Streamlit・Gradioが即座に動く
  • Python 3.11完全対応
  • systemdで常駐化も簡単

💰 圧倒的低コスト

  • 月額891円から
  • 他社サービスの1/20のコスト
  • データ転送量無制限

🔒 セキュアな社内ツール

  • IP制限・Basic認証標準対応
  • SSL証明書無料
  • 24時間安定稼働

高速・安定

  • API応答時間150ms以下
  • 稼働率99.99%
  • 同時接続に強い

AI時代の社内ツール開発、ConoHa WINGで始めませんか?

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

この記事をシェア

続けて読みたい記事

編集部がピックアップした関連記事で学びを広げましょう。

#ConoHa WING

AIエージェント開発ならConoHa WING!LangGraph・AutoGPTで自律型AIを構築する完全ガイド

2025/11/27
#ConoHa WING

Web制作副業で月20万円!ConoHa WINGでクライアントサイトを効率管理する方法

2025/11/27
#ConoHa WING

ConoHa WING複数サイト運営術!月額891円で10サイト以上を効率管理するコスト最適化テクニック

2025/11/26
#ConoHa WING

オンライン講座で月30万円!ConoHa WINGで教育コンテンツ販売ビジネスを構築する方法

2025/11/27
#ConoHa WING

AIアプリ開発にConoHa WINGが最適な理由|ChatGPT API・機械学習モデルのホスティング完全ガイド

2025/11/26
#ConoHa WING

AI生成コンテンツでブログ運営!ConoHa WINGが最適な理由|ChatGPT・Gemini活用術

2025/11/26