【Raspberry Pi】VS CodeからGUIプログラムをリモートデバッグ

はじめに

Raspberry Piは、その手頃な価格と多機能性から、プログラミング学習や電子工作に最適なプラットフォームです。
この記事では、PC上のVS CodeでRaspberry Pi5のGUIプログラムをリモートデバッグする方法を紹介します。

Raspberry Pi OSのインストール方法などについての解説については、わかりやすい解説がネットにたくさんあるので、Googleで検索してみてください。

※ Raspberry Pi は Raspberry Pi財団の登録商標です。

Raspberry Pi5のプログラムをリモートデバッグ

Raspberry Pi5は処理能力が大幅に向上しましたが、VS Codeの動作は重く快適とは言えません。
そこで、PCで動くVS CodeからSSHでRaspberry Pi5に接続し、PCからRaspberry Pi5上のソースコードを編集、デバッグする方法を紹介します。Raspberry Pi5とVNCでも同時に接続することで、GUIプログラムもリモートでデバッグすることができます。

Raspberry Pi5を有線LAN接続すれば、VNC接続でもストレスは少なく快適な開発環境が構築できます。
では、やっていきましょう！

リンク

設定手順

次に示す手順で設定を行います。

Raspberry Pi5のSSHとVNCを有効化
VS CodeのSSH接続設定
VNCの設定
Raspberry Pi5の環境変数設定

Raspberry Pi5のSSHとVNCを有効化

PCのVS CodeからSSHでRaspberry Pi5に接続、PCからRaspberry Pi5に接続でVNCでするため、SSHとVNCを有効に設定します。
SSHの有効化は事前にRaspberry Pi ImagerでOSをインストール時に可能です。

SSHの設定は、スタートメニューから「設定」→「Raspberry Piの設定」→「インターフェース」タブでSSHとVNCを有効に設定します。
設定後、Raspberry Pi5を再起動します。

VS CodeのSSH接続設定

PCのVS CodeからRaspberry Pi5にSSH接続するために拡張機能の「Remote - SSH」をインストールします。
機能拡張の検索窓に"remote ssh"と入力すると、すぐに見つけられます。

「Remote - SSH」を設定します。
F1キーを押して、コマンドパレットに"remote"と入力します。
表示されたリストの"Remote-SSH: Open SSH Host"コマンドを選択します。

続いて、コマンドパレットに"[RPi5のユーザー名]@[RPi5のIPアドレス]"を入力し、Enterキーを押します。
パスワードの入力を求められるので、入力して、Enterキーを押します。
しばらくすると、接続が完了しウィンドウ下部のステータスバーに「SSH: [RPi5のIPアドレス]」が表示されます。
筆者のRaspberry Pi5のIPアドレスは"192.168.0.100"なので、下の図の表示になりました。

VNCの設定

VS CodeでデバッグでRaspberry Pi5の画面に表示されるGUIの画面をVNCのスクリーンに表示します。
筆者はVNCクライアントにRealVNC Viewerを使っています。

RealVNC Viewerの設定は次の手順のとおりです。
起動すると、下記のウィンドウが表示されます。
右側の赤枠の中で右クリック、もしくは「ファイル」メニューから「New connection...」を選択します。

"Properties"ウィンドウ(下図)が表示されるます。
「VNC Server」にはRaspberry Pi5のIPアドレスまたは、"raspberrypi.local" もしくは、Raspberry Pi Imagerでホスト名を設定した場合は、そのホスト名を入力。
「Name」にはRaspberry Pi5のユーザー名を入力します。
「OK」ボタンを押すと上図の赤枠の中にアイコンとして表示されます。
そのアイコンをダブルクリックすると、接続します。

Raspberry Pi5の環境変数設定

次に、VS Codeでデバッグする際に、コードが表示するウィンドウをRealVNC Viewerのスクリーンに表示させるための設定を行います。

Raspberry Pi5で".bashrc"ファイルを編集します。
RealVNC ViewerでRaspberry Pi5に接続し、LXTerminalアプリを起動します。
次のコマンドで".bashrc"ファイルを開きます。

sudo nano ~/.bashrc

最後の行に、
export DISPLAY=:0.0
と入力して、ファイルを保存→終了（ctrl + x）します。

この修正を、反映させるために下記コマンドを実行します。

source ~/.bashrc

以上で、必要準備は完了です。

デバッグ準備

Raspberry Pi5にデバッグ行う、ソースコードを準備します。

今回は次のPythonソースコードを使用しました。
この記事で紹介した、サンプルコードをです。

: 【Python・OpenCV】Cannyエッジ検出器による輪郭抽出(cv2.Canny)
はじめにエッジ検出はコンピュータビジョンの重要な処理の一つで、画像内の物体の輪郭を検出するのに役立ちます。OpenCVは、エッジ検出を行うための強力なツールを提供しています。この記事ではソーベルフ ...

import cv2
import matplotlib.pyplot as plt

# 画像の読み込み
image = cv2.imread("/home/[ユーザー名]/Documents/test/image.jpg", cv2.IMREAD_GRAYSCALE)

# ガウシアンフィルターを適用してノイズを削除
kernel_size = 5                                                         # カーネルサイズの設定
sigma = 0                                                               # sigmaの設定
blurred = cv2.GaussianBlur(image, (kernel_size, kernel_size), sigma)    # ガウシアンフィルターの適用

# Cannyエッジ検出を適用
canny = cv2.Canny(blurred, threshold1=30, threshold2=100)

# 画像とエッジ画像を表示
plt.rcParams["figure.figsize"] = [12,3.5]                               # ウィンドウサイズを設定
title = "cv2.Canny: codevace.com"
plt.figure(title)                                                       # ウィンドウタイトルを設定
plt.subplots_adjust(left=0.05, right=0.95, bottom=0.03, top=0.95)       # 余白を設定
plt.subplot(121)                                                        # 2行2列の1番目の領域にプロットを設定
plt.imshow(image, cmap='gray')                                          # 入力画像をグレースケールで表示
plt.title('Original Image')                                             # 画像タイトル設定
plt.axis("off")                                                         # 軸目盛、軸ラベルを消す
plt.subplot(122)                                                        # 2行2列の2番目の領域にプロットを設定
plt.imshow(canny, cmap='gray')                                          # X方向のエッジ検出結果画像をグレースケールで表示
plt.title('Canny')                                                      # 画像タイトル設定
plt.axis("off")                                                         # 軸目盛、軸ラベルを消す
plt.show()

このコードでは、ライブラリにOpenCVとmatplotlibを使用します。
pipを使って、これらのライブラリをインストールしようとすると下記のようなエラーメッセージが表示され、インストールできません。

$ pip install opencv-python
error: externally-managed-environment

× This environment is externally managed
╰─> To install Python packages system-wide, try apt install
    python3-xyz, where xyz is the package you are trying to
    install.
    
    If you wish to install a non-Debian-packaged Python package,
    create a virtual environment using python3 -m venv path/to/venv.
    Then use path/to/venv/bin/python and path/to/venv/bin/pip. Make
    sure you have python3-full installed.
    
    For more information visit http://rptl.io/venv

note: If you believe this is a mistake, please contact your Python installation or OS distribution provider. You can override this, at the risk of breaking your Python installation or OS, by passing --break-system-packages.
hint: See PEP 668 for the detailed specification.

このメッセージでは、下の３種類のインストール方法について紹介しています。

システム全体（グローバル）に対するインストール方法として、次のコマンド
sudo apt install python3-[パッケージ名]

例）sudo apt install python3-matplotlib

この方法でインストール可能なライブラリは全てではないので、注意が必要です。
venvで仮想環境を作成して、仮想環境内でインストール
オプションに"--break-system-packages"をつけてインストール
python3 -m pip install [パッケージ名] --break-system-packages

最後の行に、PEP 668に詳細が書かれているということで、内容を確認すると仮想環境内でインストールすべきとなっています。

ということで、仮想環境の方法を使うことにします。

venv仮想環境の作成とライブラリのインストール

次の手順で、仮想環境を作成します。
この操作は、VS Codeのターミナル、またはVNCで接続したRaspberry Pi5の画面からLXTerminalを使います。

１. ホームディレクトリ下のDocumentsフォルダ内に"test"という名前のディレクトリを作成して仮想環境を作成します。
venvのコマンドは python3 -m venv [仮想環境名] です。下の例では仮想環境名を"venv"としています。
次の順番でコマンドを実行します。

cd ~/Documents
mkdir test
cd test
python3 -m venv venv

２. 上で示したサンプルコードを"canny.py"というファイル名で"test"ディレクトリに保存します。
テスト用の画像は下記リンクからダウンロードして、同様に"test"ディレクトリに"image.jpg"というファイル名で保存します。
この画像は、Cannyエッジ検出器による輪郭抽出(cv2.Canny)で紹介しているテスト画像と同じです。

テスト用の画像

３. 仮想環境をアクティブ化します。
"test"ディレクトリにいる状態で、下記コマンドを実行。

source [仮想環境名]/bin/activate

実行すると、プロンプトの先頭に"(仮想環境名)"が表示されます。

(仮想環境名) [ユーザー名]@raspberrypi:~/Documents/test $

４. 続いて、仮想環境がアクティブの状態で、pythonのライブラリをインストールします。
OpenCVのインストール

python3 -m pip install opencv-python

matplotlibのインストール

python3 -m pip install matplotlib

リモートデバッグ

PCのVS Codeでデバッグを行います。
VS Codeのアクティビティバーのエクスプローラーアイコンを選択し、サイドバーからソースコードファイルの"canny.py"を選択します。

続いて、VS Codeのアクティビティバーのデバッグアイコンを選択し、サイドバーの「launch.jsonファイルを作成します」をクリックします。

コマンドパレットにリストが表示されるので、"Python Debugger"を選択します。
次にコマンドパレットに「デバッグ構成を選択する」のリストが表示されるので、"Python ファイル"を選択します。
自動的に、"launch.json"ファイルが作成されウィンドウに表示されます。
"launch.json"に

"stopOnEntry": true

という一行を追加します。
最終的に、"launch.json"ファイルは下の内容になります。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python デバッガー: 現在のファイル",
            "type": "debugpy",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "stopOnEntry": true // 追加
        }
    ]
}

"launch.json"を保存して、ファイルを閉じます。

VS CodeのPythonインタープリターが仮想環境のものになっていることを確認します。
ウィンドウ右下にPythonのバージョン番号の右側に「('[仮想環境名]')」が表示されていればOKです。
異なる表示の場合は、その表示をクリックすると、コマンドパレットに候補一覧が表示されるので、先ほど作成した仮想環境の記載があるものを選択してください。

これで、準備ができました。

「デバッグの開始」ボタン、またはF5キーを押してデバッグをスタートします。
デバッグが始まると１行目で一時停止するので、「続行」ボタンをクリック。

すると、VNCのスクリーンにサンプルコードの結果を表示するウィンドウが現れます。
無事にGUIプログラムのリモートデバッグができました。
VNCの表示のレスポンスも良好で、もっさりしていることは全くありません。十分実用に耐える環境だと思います。

おわりに

これでRaspberry Pi 5でVS Codeを使ったSSHリモートデバッグが可能になり、開発体験の大きな向上が期待できます。
Raspberry Pi特徴である、様々なHATを活用したプログラミングが、今まで以上に快適に行うことが可能になります。
Raspberry Piは入手したものの、持て余している方も多いと思いますが、この機会にもう一度手にとってみてはいかがでしょうか。

ご不明な点や質問があれば、気軽にお問い合わせください。
最後までご覧頂きありがとうございました。