【PyQt5 GUI実践】気象データ可視化アプリを作ろう！(2) 地図表示とPython-JavaScript連携の魔法 🗺️

「PyQt5アプリの中に、Webページみたいなリッチなコンテンツを表示したい！」
「アプリ内の地図をクリックしたら、その場所の緯度経度をPythonで取得するにはどうすればいい？」
「デスクトップアプリとWeb技術（JavaScript）を連携させるって、なんだかカッコいい！」

こんにちは！ PyQt5探検隊、隊長のPythonistaです！ 前回の第1回では、PyQt5を使ってアプリケーションのウィンドウを作成し、レイアウトマネージャでウィジェットの「骨格」を組み上げましたね。これで、本格的なデスクトップアプリ開発の土台ができました。

シリーズ第2回となる今回は、このアプリの最も面白くて核心的な部分に挑戦します！ それは、アプリ内にインタラクティブな地図を表示し、ユーザーがクリックした地点の座標（緯度・経度）をPython側で受け取るという機能です。これを実現するために、

  • PyQt5アプリ内でWebコンテンツを表示するQWebEngineView
  • そのWebコンテンツ（JavaScript）とPythonのコードを繋ぐ魔法の架け橋QWebChannel

といった、少し高度ですが非常に強力なテクニックを学んでいきます。この回をマスターすれば、あなたのGUIアプリケーションの表現力とインタラクティビティは飛躍的に向上しますよ！

1. 準備：前回からのコードと必要なライブラリ

今回は、第1回で作成したGUIの骨格コードをベースに機能を追加していきます。また、地図をクリックして取得した座標から地名を取得するために、geopyというライブラリも使いますので、インストールしておきましょう。

pip install PyQt5 PyQtWebEngine geopy

そして、以下のライブラリをインポートしておきます。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton, QDateEdit, QStatusBar
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtCore import QObject, pyqtSlot, QDate, QUrl
from geopy.geocoders import Nominatim
from geopy.extra.rate_limiter import RateLimiter

2. ステップ1：アプリにWebブラウザを埋め込む (`QWebEngineView`)

PyQt5には、QWebEngineViewという、ChromiumベースのWebブラウザエンジンをそのまま埋め込めるウィジェットがあります。これを使うと、アプリ内でWebページを表示したり、HTMLやJavaScriptを実行したりできます。

今回は、このQWebEngineViewに、**Leaflet.js**というオープンソースのJavaScriptライブラリを使ったインタラクティブな地図を表示します。そのためのHTMLコンテンツをPythonの文字列として作成し、setHtml()メソッドで読み込ませます。

3. ステップ2：PythonとJavaScriptを繋ぐ魔法の架け橋 (`QWebChannel`)

今回のプロジェクトで最も重要なのが、このPythonとJavaScriptの連携です。「地図（JavaScript）でクリックされた座標」を、「GUIアプリ（Python）の変数」に渡すにはどうすればよいでしょうか？

その答えがQWebChannelです。これは、PythonのオブジェクトをJavaScript側から呼び出せるようにするための通信チャネルを作成する仕組みです。

手順は以下の通りです。

  1. Python側： JavaScriptから呼び出されるための特別な「受付係」クラス (QObjectを継承) と、その中の関数 (@pyqtSlotデコレータを付ける) を用意する。
  2. 連携設定： QWebChannelに、その「受付係」オブジェクトを登録する。
  3. JavaScript側： 専用のライブラリ (qwebchannel.js) を読み込み、登録されたPythonのオブジェクトを呼び出す。

この仕組みを、これから作成するコードの中で見ていきましょう。

4. 実装：コードの全体像と解説

第1回のコードに、地図の表示とPython-JavaScript連携の機能を追加した、第2回時点での完成版コードです。

# (冒頭のimport文は省略)

# --- グローバル設定 ---
geolocator = Nominatim(user_agent="weather_app_for_blog")
reverse = RateLimiter(geolocator.reverse, min_delay_seconds=1)

# --- 地図(JavaScript)とPythonを連携させるためのクラス ---
class MapApi(QObject):
    def __init__(self, app_instance):
        super().__init__()
        self.app = app_instance

    # @pyqtSlotデコレータで、このメソッドをJavaScript側から呼び出せるようにする
    @pyqtSlot(float, float)
    def receive_coords(self, lat, lng):
        # JavaScriptから受け取った座標を、メインアプリのメソッドに渡す
        self.app.update_location(lat, lng)

# --- GUIメインウィンドウ ---
class WeatherApp(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("気象データ可視化ツール")
        self.setGeometry(100, 100, 1000, 800)

        self.lat = 35.6812  # 初期値: 東京駅
        self.lon = 139.7671
        self.location_name = "東京都千代田区"

        self.initUI() # UIの初期化

    def initUI(self):
        central_widget = QWidget()
        self.setCentralWidget(central_widget)
        main_layout = QHBoxLayout(central_widget)

        # --- 左側：コントロールパネル (第1回で作成) ---
        controls_layout = QVBoxLayout()
        self.location_label = QLabel(f"選択地点: {self.location_name}\n(Lat: {self.lat:.4f}, Lon: {self.lon:.4f})")
        controls_layout.addWidget(self.location_label)
        # ... (日付選択やボタンの作成は第1回と同じ) ...
        self.start_date_edit = QDateEdit(calendarPopup=True)
        self.end_date_edit = QDateEdit(calendarPopup=True)
        self.fetch_button = QPushButton("データ取得 & グラフ表示")
        controls_layout.addWidget(QLabel("開始日:")); controls_layout.addWidget(self.start_date_edit)
        controls_layout.addWidget(QLabel("終了日:")); controls_layout.addWidget(self.end_date_edit)
        controls_layout.addWidget(self.fetch_button)
        controls_layout.addStretch()
        main_layout.addLayout(controls_layout, 1)

        # --- 右側：地図 ---
        self.map_view = QWebEngineView()
        main_layout.addWidget(self.map_view, 3)
        
        # --- 地図とPythonの連携設定 ---
        self.map_api = MapApi(self)
        self.channel = QWebChannel()
        self.channel.registerObject("py_api", self.map_api) # 'py_api'という名前でPythonオブジェクトを登録
        self.map_view.page().setWebChannel(self.channel)
        
        self.load_map()

        self.setStatusBar(QStatusBar(self))
        self.statusBar().showMessage("地図をクリックして地点を選択してください。")

    def load_map(self):
        # Leaflet.jsを使ったインタラクティブな地図のHTMLを生成
        html_content = f"""
        <!DOCTYPE html>
        <html>
        <head>
            <!-- (中略: Leafletとqwebchannel.jsの読み込み) -->
            <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var map = L.map('map').setView([{self.lat}, {self.lon}], 10);
                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png').addTo(map);
                var marker = L.marker([{self.lat}, {self.lon}]).addTo(map);

                // Pythonとの連携チャネルを初期化
                new QWebChannel(qt.webChannelTransport, function (channel) {{
                    window.py_api = channel.objects.py_api;
                }});

                // 地図がクリックされたときのイベント
                map.on('click', function(e) {{
                    var lat = e.latlng.lat;
                    var lng = e.latlng.lng;
                    marker.setLatLng([lat, lng]);
                    // Python側のメソッドを呼び出す！
                    if (window.py_api) {{
                        py_api.receive_coords(lat, lng);
                    }}
                }});
            </script>
        </body>
        </html>
        """
        self.map_view.setHtml(html_content, QUrl("qrc:/"))

    def update_location(self, lat, lon):
        # JavaScriptからの呼び出しを受けて、地点情報を更新するメソッド
        self.lat = lat
        self.lon = lon
        self.statusBar().showMessage("地名を取得中...")
        QApplication.processEvents() # UIの更新を即座に反映
        
        try:
            location = reverse(f"{lat}, {lon}", language='ja')
            address = location.raw.get('address', {})
            prefecture = address.get('state', '')
            city = address.get('city', address.get('town', address.get('village', '')))
            self.location_name = f"{prefecture}{city}"
            self.statusBar().showMessage("地点を選択しました。", 5000)
        except Exception:
            self.location_name = "地名不明"
            self.statusBar().showMessage("地名取得エラー", 5000)
        
        self.location_label.setText(f"選択地点: {self.location_name}\n(Lat: {self.lat:.4f}, Lon: {self.lon:.4f})")

# (if __name__ == '__main__': ... の実行部分は同じ)

このコードのポイント解説:

  • MapApiクラス: JavaScriptからの呼び出しを受け付けるための専用クラスです。@pyqtSlot(float, float)というデコレータを付けたreceive_coordsメソッドが、JavaScriptからの「窓口」となります。
  • QWebChannelの設定: メインウィンドウの__init__内で、MapApiのインスタンスを"py_api"という名前でチャネルに登録しています。これにより、JavaScript側でwindow.py_apiとしてアクセスできるようになります。
  • HTML/JavaScript内の連携コード:
    • <script src="qrc:///qtwebchannel/qwebchannel.js"></script>: PyQtに組み込まれている、連携に必須のJavaScriptライブラリを読み込んでいます。
    • new QWebChannel(...): JavaScript側で連携チャネルを初期化しています。
    • py_api.receive_coords(lat, lng): 地図がクリックされた際に、登録したPython側のreceive_coordsメソッドを、クリックされた緯度(lat)と経度(lng)を引数として呼び出しています。
  • update_locationメソッド: JavaScriptから呼び出された後、メインウィンドウの緯度・経度を更新し、geopyを使って地名を取得（逆ジオコーディング）、そして画面のラベル表示を更新しています。

まとめと次回予告

今回は、PyQt5シリーズの第2回として、アプリケーションにインタラクティブなWebコンテンツ（地図）を埋め込み、さらにJavaScriptとPythonを連携させるという、非常に高度で強力なテクニックを学びました。

  • QWebEngineViewを使って、PyQt5アプリ内にWebコンテンツを表示する方法。
  • QWebChannelと@pyqtSlotを使い、JavaScriptからPythonのメソッドを呼び出す「魔法の架け橋」の作り方。
  • geopyライブラリを使った、座標から地名への逆ジオコーディング。

これで、私たちのアプリケーションは、ユーザーが地図上で直感的に場所を選択できる、リッチな入力インターフェースを手に入れました。アプリケーションの骨格と入力部分が完成し、いよいよ全ての部品が揃いました。

次回、シリーズ第3回にして最終回！ いよいよ、今回実装したGUIの操作と、以前作成したデータ取得・分析・可視化のロジック（頭脳）を完全に統合します。「データ取得 & グラフ表示」ボタンに命を吹き込み、この気象データ可視化アプリケーションを完成させましょう！お楽しみに！

その他の投稿はこちら

コメント

コメントを投稿

このブログの人気の投稿

タイトルまとめ

環境構築 これで迷わない！WindowsでPython環境構築する一番やさしい方法 #0 【Python初心者向け】venvでスッキリ環境構築！プロジェクトごとの独立性を保つ秘訣 #1 超入門〜入門 【Python超入門】プログラミングで計算してみよう！四則演算と便利な算術演算子を徹底解説 #2 【Python超入門】プログラミングの第一歩！「変数」とは？使い方と命名ルールを優しく解説 #3 【Python入門】プログラムの流れを自由自在に！if文を使った条件分岐を徹底マスター #4 【Python入門】繰り返し処理をマスター！for文・while文の基本と使い分けを徹底解説 #5 【Python入門】コードを整理整頓！関数の作り方と使い方をマスターしよう (def, 引数, 戻り値) #6 【Python入門】オブジェクト指向の扉を開こう！クラスの基本と作り方・使い方 (class, __init__, メソッド) #7 【Python入門】クラッシュしないプログラムへ！エラーハンドリング(try-except-else-finally-raise)完全ガイド #8 中級へ向けて > OOP(オブジェクト指向プログラミング) 【Python中級への道】OOPの真髄！クラスの「継承」でコードを再利用・拡張しよう (親クラス・子クラス・super) #8 【Python中級編】OOPの魔法！ポリモーフィズム（多態性）で柔軟なコードを書こう #9 【Python中級編】OOPの守護神！カプセル化で安全なクラスを作ろう (データ隠蔽・プロパティ) #10 標準ライブラリ紹介 【Python標準ライブラリ入門 第1回】日付と時刻を自由自在に！datetimeモジュール徹底活用術 【Python標準ライブラリ入門 第2回】偶然をプログラムに！randomモジュールで乱数を使いこなそう 【Python標準ライブラリ入門 第3回】データ交換の標準！jsonモジュールでJSONを自由自在に扱おう 【Python標準ライブラリ入門 第4回】ファイル・ディレクトリ操作の達人になろう！osモジュール徹底ガイド 【Python標準ライブラリ入門 第5回】表データ処理の相棒！csvモジュールでCSVファイルを自在に操ろう 📊 【Python標準ライブラリ入門 第6回】ファイル操作を極...
続きを読む

これで迷わない！WindowsでPython環境構築する一番やさしい方法 #0

イメージ
はじめに：Python学習、最初の一歩を応援します！ 「Pythonを勉強してみたいけど、何から始めたらいいの？」 「プログラミングって難しそう…環境構築でつまずきたくないな…」 こんにちは！ この記事は、そんなプログラミング初心者さん、特にWindowsユーザーのあなたが、スムーズにPython学習をスタートできるよう、 Pythonの環境構築手順 をどこよりも分かりやすく解説することを目指しています。 私自身もそうでしたが、プログラミング学習の最初のハードルが、この「環境構築」だったりします。でも大丈夫！この記事の手順通りに進めれば、きっとあなたのパソコンでPythonが動くようになります。 一緒にPythonの世界への第一歩を踏み出しましょう！ そもそもPythonって何？ (軽くでOK) Pythonは、読みやすく、書きやすい、そしてとっても人気のあるプログラミング言語です。Webサイト制作、データ分析、AI開発など、本当に色々なことができます。初心者にも比較的学びやすい言語と言われているんですよ。 さっそくPythonをインストールしよう！ (Windows編) それでは、WindowsのパソコンにPythonをインストールしていきましょう。 1. Python公式サイトへアクセス！ まずは、Pythonの「公式」ダウンロードページにアクセスします。 検索エンジンで「Python ダウンロード」と検索するか、こちらのアドレスに直接アクセスしてください。 https://www.python.org/downloads/ 2. 最新版のPythonをダウンロード ダウンロードページを開くと、「Download Python X.X.X」（X.X.Xはバージョン番号）という大きなボタンがあるはずです。基本的には、この最新版をダウンロードすればOKです。 ポイント： もし学習する教材などでPythonのバージョンが指定されている場合は、少し下にスクロールすると過去のバージョンもダウンロードできます。でも、特に理由がなければ最新版を選びましょう。 3. ダウンロードしたインストーラーを実行！ ダウンロードが完了したら、ダウンロードフォルダにある .exe ファイル（例： python-3.12.3-amd64.exe のような名前です）をダブルクリックし...
続きを読む

【Python標準ライブラリ完結！】11の冒険をありがとう！君のPython力が飛躍する「次の一歩」とは？ 🚀

こんにちは！ Python標準ライブラリ探検隊、隊長のPythonistaです！ 長い間お付き合いいただき、本当にありがとうございました。ついにこの「Python標準ライブラリ入門シリーズ」も、今回の第12回で最終回を迎えることになりました。 第1回の datetime モジュール から始まり、 前回の合わせ技プロジェクト まで、私たちはPythonが標準で提供している強力で便利な「道具箱」の中身を、一緒に探検してきました。このシリーズを通して、Pythonの標準ライブラリがいかに多機能で、日々のプログラミング作業を助けてくれるかを少しでも感じていただけていたら嬉しいです。 この記事では、これまでの冒険の軌跡を振り返りつつ、皆さんがこのシリーズで得た知識を土台として、さらにPythonプログラミングの世界を広げていくための「次なる冒険」へのヒントをお届けしたいと思います。最後まで、どうぞお付き合いください！ 1. これまでの冒険を振り返る：標準ライブラリ探検ダイジェスト 🗺️ まずは、私たちが一緒に探検してきたPython標準ライブラリの仲間たちを、その主な役割と共に振り返ってみましょう。各モジュールの名前は、過去の記事へのリンクになっています（リンク先は適宜設定してくださいね）。 datetime : 日付と時刻の達人に！プログラムに時間という概念をもたらしました。 random : プログラムに偶然性の魔法を！ゲームからデータ生成まで幅広く活躍。 json : データ交換のスタンダード！異なるシステム間で情報をやり取りする共通言語。 os : OSと対話し、ファイルシステムを操る！プログラムがコンピュータ環境と連携する基盤。 csv : 表形式データを手軽に扱う！Excelなどとのデータ連携もスムーズに。 glob & shutil : ファイル検索と高度なファイル操作の強力コンビ！面倒なファイル管理を自動化。 logging : print デバッグからの卒業！本格的なログ管理でプログラムの信頼性アップ。 re : テキスト処理のスーパーパワー、正規表現！複雑な文字列操作も思いのまま。 collections : データ構造...
続きを読む