✈️

Pythonでオーストラリア旅行先相談チャット開発!?

に公開

💬 【プログラミング初心者向け】Python Streamlitで作るオーストラリア観光相談チャットアプリ

チャットボットの基本から応用まで、楽しく学んでみませんか?今回は、Python で Streamlit を使って、オーストラリアの観光地を推奨するチャットアプリを作成します。辞書(dict)、if文、ループ(for文)、関数、自然言語処理など、プログラミングの基本要素を実際に使いながら、インタラクティブなチャットアプリの技術を身につけていきましょう。

チャットボット、自然言語処理、条件分岐、データ管理まで含む本格的なWebアプリを、ステップバイステップで学んでいきましょう。

🌟 この記事を読めば...

チャットボットとWebアプリの技術を学べます 🎯

この記事では、単なるチャットボットだけでなく、Webアプリの基本から応用まで徹底的に学べます。例えば:

  • Streamlitを使ったインタラクティブなWebアプリ作成
  • 辞書(dict)を使ったデータ管理
  • if文とループを使った条件分岐と繰り返し処理
  • セッション状態を使ったデータの保持
  • 自然言語処理によるテキスト分析

📺 Youtube配信もチェック!

記事が難しくても大丈夫!!プログラミングの様子をYoutube Live配信でも公開しています!

  • 実際のコーディングの様子が見られる
  • チャットで質問もできる
  • この記事の内容がより理解できる

チャンネルはこちら👇

ぜひチャンネル登録して、一緒にプログラミングを学びましょう!

💡 そもそもチャットボットって❓

**チャットボット(Chatbot)**は、ユーザーとの対話を通じて情報を提供したり、サービスを提供するプログラムです。

  • ユーザーの入力に応じて適切な応答を生成
  • 段階的な質問でユーザーのニーズを把握
  • 自然言語処理でユーザーの意図を理解
    🎯 今回の例:
  • オーストラリアの観光地を推奨するチャットボット
  • 興味、予算、滞在期間から最適な都市を提案
  • 自然言語処理でユーザーの興味を自動判定

📁 フォルダとファイルの作成

1. フォルダ構造

australia-tourism-chat-project/
├── chat.py
└── requirements.txt

2. 必要なライブラリをインストール

まず、requirements.txtファイルに以下を書きます:

streamlit>=1.28.0

これで、プロジェクトの準備が整いました!

⚡ オーストラリア観光相談チャットアプリを作ってみよう

さっそく、chat.py にコードを書いていきましょう!

1️⃣📱 アプリの基本設定とライブラリのインポート

まずは、アプリの基本設定と必要なライブラリのインポートから始めます。

# 必要なライブラリをインポート
import streamlit as st  # Webアプリ作成用

# ページ設定
st.set_page_config(
    page_title="オーストラリア観光相談チャット",  # ブラウザのタブに表示されるタイトル
    page_icon="✈️",          # ブラウザのタブに表示されるアイコン
    layout="wide",           # レイアウトをワイドに設定
)

# タイトルとヘッダー
st.title("✈️ オーストラリア観光相談チャット")

cursor のターミナルで以下のコマンドを実行して画面表示を確認しましょう!

python -m streamlit run chat.py

📝 ページ設定の詳細説明:

  1. ブラウザの表示設定

    • page_titleでブラウザのタブに表示されるタイトルを設定
    • page_iconでタブに表示されるアイコンを設定
  2. レイアウト設定

    • layout="wide"で画面幅を最大限活用
    • チャットアプリに適したレイアウトを実現

2️⃣🤖 自然言語処理による興味判定関数の実装

自然言語処理を使って、ユーザーの自由なテキスト入力から興味を自動判定する機能を実装します。

# ===== 自然言語処理による興味判定関数 =====
def analyze_interests(user_input):
    """
    ユーザーの入力テキストを分析して興味を判定する関数
    user_input: ユーザーが入力したテキスト
    returns: 判定された興味(自然、文化、アドベンチャー、リラックス)
    """
    
    # 各興味カテゴリのキーワードを定義
    interest_keywords = {
        "自然": ["自然", "山", "海", "森", "公園", "動物", "植物", "緑", "川", "湖", "ビーチ", "島", "トレッキング", "ハイキング"],
        "文化": ["文化", "美術館", "博物館", "歴史", "アート", "音楽", "演劇", "建築", "教会", "寺院", "遺跡", "伝統", "芸術"],
        "アドベンチャー": ["冒険", "アドベンチャー", "スキューバ", "ダイビング", "サーフィン", "クライミング", "ラフティング", "スカイダイビング", "バンジージャンプ", "アクティビティ", "刺激", "スリル"],
        "リラックス": ["リラックス", "癒し", "温泉", "スパ", "マッサージ", "ヨガ", "瞑想", "カフェ", "レストラン", "ショッピング", "のんびり", "ゆっくり", "休暇"]
    }
    
    # 各カテゴリのスコアを計算:辞書を作成して各興味のスコアを保存
    scores = {}  # スコアを保存する空の辞書を作成
    
    # 各興味カテゴリとそのキーワードについてループ処理
    for interest, keywords in interest_keywords.items():
        score = 0  # スコアの初期値を0に設定
        # 各キーワードについてループ処理
        for keyword in keywords:
            # テキスト内にキーワードが含まれているかチェック
            if keyword in user_input:
                score += 1  # キーワードが見つかったらスコアを1増やす
        scores[interest] = score  # 計算したスコアを辞書に保存
    
    # 最もスコアが高い興味を返す:辞書のvaluesの最大値をチェック
    if max(scores.values()) > 0:  # スコアが0より大きい興味が存在する場合
        return max(scores, key=scores.get)  # 最大スコアの興味を返す
    else:
        # キーワードが見つからない場合(すべてのスコアが0の場合)デフォルトで「リラックス」を返す
        return "リラックス"

📝 自然言語処理の詳細説明:

🔍 キーワードベースの分析:

  1. キーワードマッチング

    • 各興味カテゴリに複数のキーワードを定義
    • ユーザーの入力テキストに含まれるキーワードを検索
  2. スコアリングシステム

    • 各カテゴリのキーワード出現回数をカウント
    • 最も多くマッチしたカテゴリを選択

      🎯 自然言語処理の利点:
  • 柔軟性:ユーザーが自由な表現で入力可能
  • ユーザビリティ:自然な会話のような体験
  • 拡張性:新しいキーワードを簡単に追加可能

3️⃣🗺️ 辞書(dict)を使った都市情報の管理

オーストラリアの主要都市の情報を辞書形式で管理します。辞書は {キー: 値} の形式でデータを保存するデータ構造です。

# 辞書(dict)を使って都市情報を管理
# 辞書は {キー: 値} の形式でデータを保存
# 各都市の情報を辞書形式で管理:description(説明)、activities(アクティビティ)、budget(予算レベル)、duration(滞在期間)
city_data = {
    "シドニー": {
        "description": "オーストラリア最大の都市で、オペラハウスやハーバーブリッジが有名",
        "activities": ["ボンダイビーチ散策", "オペラハウス見学", "ハーバーブリッジクライム"],
        "budget": "high",  # 高予算
        "duration": "3-5日"
    },
    "メルボルン": {
        "description": "文化とアートの都で、カフェ文化とアートシーンが発達",
        "activities": ["グレートオーシャンロード", "アートギャラリー", "カフェ巡り"],
        "budget": "mid",   # 中予算
        "duration": "3-4日"
    },
    "ケアンズ": {
        "description": "熱帯の楽園で、グレートバリアリーフと熱帯雨林が楽しめる",
        "activities": ["グレートバリアリーフ", "スキューバダイビング", "ビーチリゾート"],
        "budget": "high",  # 高予算
        "duration": "4-7日"
    },
    "パース": {
        "description": "西オーストラリアの美しい都市で、自然と都市のバランスが良い",
        "activities": ["ロットネスト島", "ビーチ散策", "ワイナリー"],
        "budget": "mid",   # 中予算
        "duration": "3-5日"
    }
}

📝 辞書(dict)の詳細説明:

🔍 辞書の基本構造:

  1. キーと値のペア

    • "シドニー": { ... } のように、キー(都市名)と値(都市情報)のペアで構成
    • キーを使って値にアクセスできる
  2. ネストした辞書

    • 値としてさらに辞書を格納することで、複雑なデータ構造を表現
    • city_data["シドニー"]["description"] でシドニーの説明にアクセスできる
  3. リストとの組み合わせ

    • activities はリスト形式で複数のアクティビティを管理
    • join() メソッドでリストを文字列に変換可能

🎯 辞書の利点:

  • 高速アクセス:キーを使って瞬時にデータにアクセス
  • 構造化データ:関連する情報をグループ化して管理
  • 拡張性:新しい都市や情報を簡単に追加可能

4️⃣🤖 推奨都市決定関数の実装

if文とループ(for文)を使って推奨都市を決定する関数を実装します。

# ===== 推奨都市決定関数 =====
def get_recommendation(interests, budget, duration):
    """
    if文とループを使って推奨都市を決定する関数
    interests: 興味(自然、文化、アドベンチャー、リラックス)
    budget: 予算レベル(mid、high)
    duration: 滞在期間(3-4日、3-5日、4-7日)
    """
    #  ループ(for文)で辞書の要素を順番に処理
    for city, info in city_data.items():
        #  if文で条件分岐:興味、予算、期間の組み合わせで推奨都市を決定
        if interests == "自然" and budget == "mid" and duration == "3-5日":
            return "パース", city_data["パース"]  # 自然豊かなパースを推奨
        elif interests == "文化" and budget == "mid" and duration == "3-4日":
            return "メルボルン", city_data["メルボルン"]  # 文化の都メルボルンを推奨
        elif interests == "アドベンチャー" and budget == "high" and duration == "4-7日":
            return "ケアンズ", city_data["ケアンズ"]  # 冒険のケアンズを推奨
        elif interests == "リラックス" and budget == "high" and duration == "3-5日":
            return "シドニー", city_data["シドニー"]  # リラックスできるシドニーを推奨
        elif interests == "自然" and budget == "high":
            return "ケアンズ", city_data["ケアンズ"]  # 高予算ならケアンズの自然を推奨
        elif interests == "文化" and budget == "high":
            return "シドニー", city_data["シドニー"]  # 高予算ならシドニーの文化を推奨
        elif interests == "アドベンチャー" and budget == "mid":
            return "パース", city_data["パース"]  # 中予算ならパースの冒険を推奨
        elif interests == "リラックス" and budget == "mid":
            return "メルボルン", city_data["メルボルン"]  # 中予算ならメルボルンのリラックスを推奨
    
    # デフォルトの推奨:条件に合致しない場合はシドニーを推奨
    return "シドニー", city_data["シドニー"]

📝 関数と条件分岐の詳細説明:

🔍 関数の基本構造:

  1. 関数定義

    • def get_recommendation(interests, budget, duration): で関数を定義
    • 3つのパラメータを受け取っておすすめ都市を返す
  2. for文によるループ

    • for city, info in city_data.items(): で辞書の全要素を順番に処理
    • items() メソッドでキーと値の両方を取得
  3. if文による条件分岐

    • elif を使って複数の条件を順番にチェック
    • 最初に合致した条件の都市を推奨

🎯 条件分岐のロジック:

  • 完全一致優先:興味、予算、期間がすべて合致する場合を最優先
  • 部分一致:完全一致がない場合は、興味と予算の組み合わせで判断
  • デフォルト値:どの条件にも合致しない場合はシドニーを推奨

📝 ループ(for文)について

🔍 for文の詳細:

  1. 辞書のループ処理

    • city_data.items() で辞書のキーと値のペアを取得
    • city には都市名、info には都市情報が格納される
  2. ループの利点

    • すべての都市を自動的にチェック
    • 新しい都市を追加してもコードの変更が不要
  3. 早期リターン

    • 条件に合致した時点で即座に関数を終了
    • 処理効率を向上させる

5️⃣💾 セッション状態の初期化

Streamlitのセッション状態を使って、ページをリロードしてもデータが保持されるようにします。

# ===== セッション状態の初期化 =====
# セッション状態は辞書のような機能で、ページをリロードしてもデータが保持される
if "chat_history" not in st.session_state:
    st.session_state.chat_history = []  # チャット履歴を空のリストで初期化
if "interests" not in st.session_state:
    st.session_state.interests = ""     # 興味を空文字で初期化
if "budget" not in st.session_state:
    st.session_state.budget = ""        # 予算を空文字で初期化
if "duration" not in st.session_state:
    st.session_state.duration = ""      # 滞在期間を空文字で初期化

📝 セッション状態の詳細説明:

🔍 セッション状態とは:

  1. データの永続化

    • ページをリロードしてもデータが保持される
    • チャットアプリに必須の機能
  2. 辞書のような構造

    • st.session_state は辞書のように使える
    • キーと値のペアでデータを保存
  3. 初期化の重要性

    • 初回アクセス時にデータが存在しない場合のエラーを防止
    • not in 演算子で存在チェック

🎯 セッション状態の利点:

  • 状態管理:ユーザーの入力状態を保持
  • チャット履歴:過去の会話を記録
  • 段階的入力:複数の質問に順番に回答

6️⃣🎨 メインUIの実装(自然言語処理対応)

if文を使った段階的な質問システムを実装します。

# ===== メインUI =====
#  if文を使った段階的な質問:条件に応じて質問を順番に表示
chat_form = st.container()  # コンテナを作成してUI要素をグループ化

with chat_form:
    # 1. 興味の入力(自然言語処理)
    if not st.session_state.interests:  # 興味が未選択の場合
        st.subheader("1️⃣ 興味を教えてください")
        
        # 自然言語処理による興味入力:ユーザーが自由にテキストを入力
        interests_input = st.text_area(
            "どのような体験に興味がありますか?自由にお書きください。",
            placeholder="例:自然の中でゆっくり過ごしたい、刺激的な冒険をしたい、文化やアートを楽しみたいなど",
            help="自然、文化、アドベンチャー、リラックスなどのキーワードを含めて書くと、より適切な推奨ができます。",
            height=100
        )
        
        # 興味の例を表示
        st.info("💡 **興味の例:**自然、山や海、動物、植物、トレッキング、文化、美術館、博物館、歴史、アート、音楽、アドベンチャー、スキューバダイビング、サーフィン、クライミング、リラックス、温泉、カフェ、ショッピング、のんびり過ごすなど")
        
        if st.button("興味を送信", type="primary"):  # プライマリボタンで送信
            if interests_input.strip():  # 入力が空でない場合
                # 自然言語処理で興味を判定
                detected_interest = analyze_interests(interests_input)
                
                #  辞書に値を保存:セッション状態に興味を保存
                st.session_state.interests = detected_interest
                
                # チャット履歴に追加:ユーザーの入力として記録
                st.session_state.chat_history.append({
                    "role": "user",  # ユーザーの役割
                    "content": f"興味:{interests_input}"  # メッセージ内容
                })
                
                #  if文で条件分岐した応答:興味に応じて異なる応答を生成
                if detected_interest == "自然":
                    bot_response = f"自然に興味があるんですね!次に予算について教えてください。"
                elif detected_interest == "文化":
                    bot_response = f"文化に興味があるんですね!次に予算について教えてください。"
                elif detected_interest == "アドベンチャー":
                    bot_response = f"アドベンチャーに興味があるんですね!次に予算について教えてください。"
                else:  # リラックス
                    bot_response = f"リラックスに興味があるんですね!次に予算について教えてください。"
                
                # ボットの応答をチャット履歴に追加
                st.session_state.chat_history.append({
                    "role": "bot",  # ボットの役割
                    "content": bot_response  # 応答内容
                })
                st.rerun()  # ページを再実行
            else:
                # 入力が空の場合のエラー処理
                st.error("興味について何か書いてください。")

画面を確認してみましょう!

📝 自然言語処理対応UIの詳細説明:

🔍 自然言語入力の実装:

  1. テキストエリア

    • st.text_area() で自由なテキスト入力
    • placeholder で入力例を表示
    • height=100 で適切な入力スペースを確保
  2. 自然言語処理の統合

    • analyze_interests() 関数でテキストを分析
    • キーワードマッチングで興味を自動判定
    • 判定結果をユーザーにフィードバック
  3. エラーハンドリング

    • 空の入力に対するエラー処理
    • 適切なエラーメッセージの表示

7️⃣💰 予算入力の実装

数値入力とバリデーション機能を実装します。

    # 2. 予算の入力
    elif st.session_state.interests and not st.session_state.budget:  # 興味は選択済み、予算は未入力
        st.subheader("2️⃣ 予算を教えてください")
        
        # 数値入力限定(学習目的):number_inputで数値のみ入力可能
        budget_input = st.number_input(
            "予算を入力してください(万円)",
            min_value=10,    # 最小値:10万円
            max_value=200,   # 最大値:200万円
            value=50,        # デフォルト値:50万円
            step=10,         # ステップ:10万円単位
            help="10万円〜200万円の範囲で10万円単位で入力してください"
        )
        
        if st.button("予算を送信", type="primary"):
            # 数値の範囲チェック:入力値が有効範囲内かチェック
            if 10 <= budget_input <= 200:
                # 予算レベルを判定:数値から予算レベルを決定
                if budget_input <= 50:
                    budget_level = "mid"   # 50万円以下は中予算
                else:
                    budget_level = "high"  # 50万円超は高予算
                
                st.session_state.budget = budget_level  # セッション状態に予算レベルを保存
                
                # ユーザーの入力としてチャット履歴に追加
                st.session_state.chat_history.append({
                    "role": "user",
                    "content": f"予算は{budget_input}万円です"
                })
                
                # ボットの応答を生成
                bot_response = f"予算は{budget_input}万円ですね!次に滞在期間について教えてください。"
                
                # ボットの応答をチャット履歴に追加
                st.session_state.chat_history.append({
                    "role": "bot",
                    "content": bot_response
                })
                st.rerun()  # ページを再実行
            else:
                # エラー処理:範囲外の値が入力された場合
                st.error("予算は10万円〜200万円の範囲で入力してください")

📝 数値入力とバリデーションの詳細説明:

🔍 number_inputの機能:

  1. 入力制限

    • min_value=10, max_value=200 で入力範囲を制限
    • step=10 で10万円単位での入力を強制
  2. バリデーション

    • 入力値が有効範囲内かチェック
    • 範囲外の場合はエラーメッセージを表示
  3. 分類

    • 50万円以下を中予算、50万円超を高予算に分類
    • 数値から予算レベルへの変換

🎯 バリデーションの重要性:

  • データ品質:不正な値の入力を防止
  • ユーザー体験:分かりやすいエラーメッセージ
  • システム安定性:予期しない値によるエラーを防止

8️⃣📅 滞在期間選択の実装

期間選択と最終確認の実装を行います。

    # 3. 期間の選択
    elif st.session_state.interests and st.session_state.budget and not st.session_state.duration:  # 興味と予算は入力済み、期間は未選択
        st.subheader("3️⃣ 滞在期間を教えてください")
        
        # 期間を選択(selectbox):ドロップダウンから選択
        duration = st.selectbox(
            "滞在期間を選択してください",
            ["3-4日", "3-5日", "4-7日"],  # 選択肢のリスト
            help="滞在期間を選択してください"
        )
        
        if st.button("期間を送信", type="primary"):
            st.session_state.duration = duration  # セッション状態に期間を保存
            
            # ユーザーの入力としてチャット履歴に追加
            st.session_state.chat_history.append({
                "role": "user",
                "content": f"滞在期間は{duration}です"
            })
            
            # ボットの応答を生成
            bot_response = f"滞在期間は{duration}ですね!質問は以上です!最後に上部にある「推奨プランを生成」ボタンをクリックしてください!"
            
            # ボットの応答をチャット履歴に追加
            st.session_state.chat_history.append({
                "role": "bot",
                "content": bot_response
            })
            st.rerun()  # ページを再実行

📝 期間選択の詳細説明:

🔍 条件チェックの複雑化:

  1. 複数条件の組み合わせ
    • st.session_state.interests and st.session_state.budget and not st.session_state.duration という条件式で、以下の3つをすべて満たすかチェック:
      1. 興味の入力が完了している (interests が存在する)
      2. 予算の入力が完了している (budget が存在する)
      3. 期間がまだ選択されていない (duration が存在しない)
    • この条件式により、ユーザーが順番に入力を進められるように制御しています

9️⃣🎯 推奨プラン生成

推奨プラン生成ボタンと推奨プラン生成機能を実装します。

    st.markdown("---")  # 区切り線
    
    # colを使ってボタンとヘッダーを同じ行に配置:2つのカラムを作成
    col1, col2 = st.columns([1, 2])  # 1:2の比率でカラムを作成
    
    with col1:
        # 推奨プラン生成ボタン
        if st.button("推奨プランを生成", type="primary"):
            if st.session_state.interests and st.session_state.budget and st.session_state.duration:  # すべての入力が完了している場合
                #  関数を呼び出して推奨都市を取得:事前に定義したget_recommendation関数を使用
                recommended_city, city_info = get_recommendation(
                    st.session_state.interests, 
                    st.session_state.budget, 
                    st.session_state.duration
                )
                
                # チャット履歴に追加
                st.session_state.chat_history.append({
                    "role": "user",
                    "content": "推奨プランを教えてください"
                })
                
                #  辞書から値を取得:推奨都市の情報を組み合わせてメッセージを作成
                recommendation = f"あなたの好みに合わせて、{recommended_city}をおすすめします!{city_info['description']}{', '.join(city_info['activities'][:2])}などが楽しめます"
                
                # ボットの推奨をチャット履歴に追加
                st.session_state.chat_history.append({
                    "role": "bot",
                    "content": recommendation
                })
                
                st.rerun()  # ページを再実行
            else:
                # 入力が不完全な場合の警告
                st.warning("まず興味、予算、期間を入力してください")
    
    with col2:
        # チャット履歴のクリアボタン
        if st.button("🗑️ チャットをクリア", key="clear_chat"):  # keyでボタンを識別
            # セッション状態をすべてリセット
            st.session_state.chat_history = []  # チャット履歴をクリア
            st.session_state.interests = ""     # 興味をリセット
            st.session_state.budget = ""        # 予算をリセット
            st.session_state.duration = ""      # 期間をリセット
            st.rerun()  # ページを再実行

📝 推奨機能の詳細説明:

  1. 推奨都市の取得

    • get_recommendation() 関数を呼び出し
    • 興味、予算、滞在期間の3つのパラメータを渡す
    • 戻り値として推奨都市名と都市情報を取得
  2. パラメータの渡し方

    • st.session_state から各値を取得
    • 順番に興味、予算、滞在期間を指定
    • セッション状態の値を関数に渡す
  3. 戻り値の受け取り

    • タプルで返される2つの値を分けて受け取り
    • recommended_city に都市名を格納
    • city_info に都市の詳細情報を格納

🎯 推奨メッセージの生成:

  • メッセージの構成

    • 推奨都市名(recommended_city)を提示
    • 都市の説明(city_info['description'])を表示
    • おすすめのアクティビティ(city_info['activities'][:2])を2つ紹介
    • 予算(st.session_state.budget)と滞在期間(st.session_state.duration)を含めて
    • 全体を自然な文章としてつなぎ合わせる
  • メッセージ例
    「あなたの好みに合わせて、シドニーをおすすめします!オーストラリア最大の都市で、オペラハウスやハーバーブリッジが有名。ボンダイビーチ散策、オペラハウス見学などが楽しめます。」

🔟💬 チャット履歴の表示

HTMLとCSSを使ってチャット履歴を表示します。

# ===== チャット履歴の表示 =====
chat_container = st.container()  # チャット履歴用のコンテナを作成
with chat_container:
    if st.session_state.chat_history:  # チャット履歴が存在する場合
        #  ループ(for文)でチャット履歴を表示:各メッセージを順番に処理
        for message in st.session_state.chat_history:
            #  if文でユーザーとボットのメッセージを分けて表示
            if message["role"] == "user":  # ユーザーのメッセージの場合
                # HTMLとCSSを使ってユーザーメッセージを右寄せで表示
                st.markdown(f"""
                <div style="display: flex; justify-content: flex-end; margin: 10px 0;">
                    <div style="background-color: #007bff; color: white; padding: 10px; border-radius: 15px; max-width: 70%;">
                        <strong>❓ お客様:</strong> {message["content"]}
                    </div>
                </div>
                """, unsafe_allow_html=True)  # HTMLタグを有効にする
            else:  # ボットのメッセージの場合
                # HTMLとCSSを使ってボットメッセージを左寄せで表示
                st.markdown(f"""
                <div style="display: flex; justify-content: flex-start; margin: 10px 0;">
                    <div style="background-color: #f0f0f0; color: black; padding: 10px; border-radius: 15px; max-width: 70%;">
                        <strong>💬 オーストラリアガイド:</strong> {message["content"]}
                    </div>
                </div>
                """, unsafe_allow_html=True)  # HTMLタグを有効にする
    else:  # チャット履歴が空の場合
        # 初期メッセージを表示
        st.info("💬 チャットを開始してください。下のフォームで興味を選択して、質問に答えてみましょう!")

お待たせしました!
質問に答えて、旅先のおすすめがチャットで返ってくるか確認しましょう!!

📝 チャット履歴表示の詳細説明:

🔍 HTMLとCSSの活用:

  1. レイアウト制御

    • display: flex でフレックスボックスレイアウト
    • justify-content: flex-end/flex-start で右寄せ/左寄せ
  2. スタイリング

    • background-color で背景色を設定
    • border-radius で角丸を設定
    • max-width: 70% でメッセージの最大幅を制限
  3. 条件分岐

    • ユーザーメッセージは右寄せ、ボットメッセージは左寄せ
    • 役割に応じて異なるスタイルを適用

🎉 完成!

おめでとうございます!

今回出来上がった画面はこちらです 👇

実際に様々な興味、予算、期間の組み合わせで推奨プランを試してみましょう!!

🎯 まとめ:オーストラリア観光相談チャットアプリで学んだこと

今回作成したオーストラリア観光相談チャットアプリは、以下のような多くの重要な概念が含まれています:

  • 辞書(dict) - データの構造化と管理
  • if文 - 条件分岐によるロジック制御
  • ループ(for文) - 繰り返し処理とデータ処理
  • 関数 - 再利用可能なコードの作成
  • セッション状態 - データの永続化と状態管理
  • 自然言語処理 - テキスト分析とキーワード抽出

🚀 次のステップ

今回学んだチャットボット技術を応用して、以下のような機能を追加してみましょう:

  1. 自然言語処理 - より自然な会話の実現
  2. 機械学習統合 - ユーザーの好みを学習する機能
  3. データベース連携 - より多くの観光地情報の管理
  4. 画像表示 - 観光地の写真を表示する機能
  5. 地図連携 - Google Mapsとの連携で位置情報を表示

チャットボットは、このように少しずつ機能を追加していくことで、どんどん賢くなります!今回学んだ辞書、if文、ループ、関数は、プログラミングの基本中の基本なので、しっかりと理解しておきましょう!


🎓 プログラミング学習におすすめ

プログラミング未経験の方には CyTech(サイテック) がおすすめです!

CyTech は、未経験から IT エンジニアを目指す人向けのオンライン学習プラットフォームで、基礎から実務レベルのスキルを最短 10 ヶ月で習得できるカリキュラムを提供しています。
HTML/CSS/JavaScript/PHP/SQL/Git などのプログラミング言語に加え、デザイン、英語なども学べる総合的なプラットフォームです。
今後随時学習できるプログラミング言語増加予定!
エンジニア学習にお困りの方はまずは CyTech 無料カウンセリングでお悩み解消!

Discussion