ラズパイbookworm対応、vscodeのssh接続でPCからラズパイにファイルを転送する

最近ラズパイの話ばかりしているこのブログですが、本サイトの設立目的はSoqAlbumというファイル共有サービスを運営することだったりします。今回はこのSoqAlbumの宣伝も兼ねて、ラズパイにファイルを送信する方法について考えてみました。

SoqAlbumは置いておくとして、設定少なめで簡単にlinuxへファイルを送るならssh(sftp)あたりが妥当で、FileZillaとかWinSCPとかを解説するのが普通だと思いますが、そういう解説サイトはすでにいくらでもありますしね。あえてやるならもっとエッジの利いた企画をやるのがyagifulだろうということで、今回は

vscodeでPC(windows, mac, linux等)から
ラズパイにファイルを送る方法

を解説することに決定しました(笑)

vscodeはエディタだろうと思いのあなた。vscodeはsshを通してラズパイへはもちろん、他のsshをサポートするデバイスに接続可能なのです。接続してしまえばファイルの編集だけではなく、ファイルの送信やダウンロードも可能です。これに前回のブログで紹介した拡張機能vscode-diredを加えれば、送信したファイルのリネーム作業などもエディタ上で効率よくこなせます。エディタでファイル転送は実は相当なねらい目なのです(といいますか、私がemacsでよくやる手です)

そうはいっても、この設定、1分や2分で終わるものではないですよね。もっと手っ取り早くファイルを送りたい場合にお勧めのサービスが、本サイトで展開中のSoqAlbumです。

  • とりあえず、今すぐ2,3個のファイルをラズパイに送りたい。
  • vscodeの設定を読んでみたけど、難しくてやってられない。
  • ラズパイが別のwifiに置いてあって、私のPCと直接sshできない。

など、ファイル転送で困った時はvscodeではなくSoqAlbumを思い出してください(笑) スマホならQRコードで1分以内にラズパイに接続できますが、PCでも2分ほどで十分です。詳しい情報をページの最後にまとめました。

vscodeをwindowsにインストール

今回はwindowsのvscodeを、ラズパイに接続します。また、前提としてsshはwindowsにインストールされているものとしますそういうわけでまずはwindowsへのvscodeのインストールからスタートです。

vscodeはMSが開発しているだけあって、インストールは簡単です。Microsoft Storeを開いて、検索してすぐにインストールできます。

日本語化したい場合は拡張機能(左下積み木のようなアイコン)でjapanese等と入力して、Japanese Language Packをインストールしましょう。

vscodeをラズパイにssh接続する

ラズパイのsshを有効にする

sshで接続しますから、まずはPCとラズパイがsshで交信できなければなりません。ラズパイのsshを有効にします。

sudo raspi-config 
> 「Interface Options」 
> 「ssh」

でsshを有効にしましょう。

ラズパイのIPアドレスを調べる

ssh接続するには接続先のラズパイのIPアドレスが必要です。ラズパイにログインして、ターミナルでifconfigと入力。wlan0の欄の192.168.xxx.xxx のような番号がwifiの場合のIPアドレスになります。

もしくはデスクトップの上部パネルのwifiマークにマウスポインタをのせると、IPアドレスが表示されるようです。

sshが接続できるかどうか確認するには

ssh user@192.168.xxx..xxx

などしてパスワードをタイプ、ログインできることを確認してください。

vscodeのリモートウインドウを開く前準備

vscodeを接続する前に、少々下準備が必要です。

左下の歯車の下の「X」っぽいアイコン(何の絵だろう?)が「リモート ウインドウを開く」アイコンです。これをクリックした後に、sshを選択します。

するとssh関係の拡張機能が自動的にインストールされますので、しばらく待ちましょう。

次に「SSHホストを構成する」> 「…\.ssh\config」に進みます(表示がない場合は、「X」アイコンから手続きをやり直してください) これによりsshの設定ファイル(config)を編集します。先ほど調べたIPアドレスで接続先を指定して、セーブします。IPアドレスが192.168.1.23でユーザーがpiの場合の例を示します。

Host ssh-test
   HostName 192.168.1.23
   User pi

ssh-testの部分はラベルのようなもので、適当に決めて構いません。configでは接続先のport等も指定できるのですが、今回は割愛します。ちなみにこのconfigファイルはsshの設定ファイルで、vscode専用の設定ファイルというわけではありません。configの設定はsshを利用するwindowsアプリケーション全体に反映されます。

vscodeのリモートウインドウを開く

もう一度左下の「x」アイコン > ssh とすると、先ほどconfigで指定したホスト名が表示されるはずです。選択すると別ウインドウが立ち上がります。

Linux, Windows, macOSの選択場面が出ますから、ラズパイの場合linuxを選択してください。

パスワードを要求されますので、入力してください。

最初の接続では、ラズパイ側の~/.vscode-serverにvscodeとの交信に必要なプログラムを転送するようです。しばらく待ちましょう。

これで接続出来たかと思います。

なお、vscodeは利用中の様々な場面でウインドウのリロードがよく起こります。その都度パスワードの入力を要求されますので、ご注意ください(最初は気付かなくてフリーズしたのかと思いました)

sshの設定で接続先にこちらの公開鍵を登録すればパスワード無しでログインできたりもしますが、それはまた別の機会にお話しましょう。

vscodeでラズパイのファイルを編集する

一度接続してしまえば、そこから先はラズパイの世界です。vscodeに表示されるファイルはすべてラズパイで、保存先もラズパイです。ローカルでの作業と同じように、ラズパイのファイルを手軽に編集することができます。

とりあえずvscode-testディレクトリを開いて、hello.txtを編集してみました。

windowsからラズパイにリモート接続したvscodeでhello.txtを編集する
windowsからラズパイにリモート接続したvscodeでhello.txtを編集する

上部メニューから(あるいはctrl+@)ターミナルが開いてリモート側で作業ができます。vscodeとターミナルの組み合わせで大概の作業はこなせそうです。

vscodeでラズパイにファイルを転送する

さて、ここからようやく本日の本題、ファイル転送です。

ファイルをラズパイにアップロード

左上のエクスプローラボタンを押して、ファイルツリーを表示しましょう。

そして、ツリーの中のファイルを転送したい場所に、windowsのファイルマネージャからファイルをドラッグしましょう。

これでファイルが転送されます。

vscode経由でリモートのラズパイにファイルを送信。イメージファイルを送信するとvscodeにより自動的にオープンされる。
vscode経由でリモートのラズパイにファイル(forest.jpg)を送信。イメージファイルを送信するとvscodeにより自動的にオープンされる。

ラズパイからファイルをダウンロードする

ダウンロードは、vscodeのファイルツリーからダウンロードしたいファイルを右クリック。表示されるメニューから「ダウンロード」を選択すると、ダウンロードが始まります。

sshでリモート接続したvscodeからファイルをダウンロード
sshでリモート接続したvscodeからファイルをダウンロード

vscode-diredを使ってファイルをマネージメント

vscodeによるファイルの転送の解説はここまでですが、本ブログではさらにインパクトを狙ってvscode-diredを使ってみます。前回のポストで紹介したvscode-diredをインストールしてみましょう。vscode+ssh+diredでファイル管理がかなり簡単になります。

前回の記事はこちら

下のリンクからvsixファイルをダウンロードして、vscode-dired(改良版)をマニュアルでインストールしましょう(利用法など詳しくは前回の記事を参照)拡張機能はローカル用とリモート用で別々に管理されています。ローカルで既にインストールしていても、sshのウインドウ用に別途インストールが必要になります。

このvscode-diredを使えば、アップロードしたファイルをリネームするのも簡単ですね。アップロード先のディレクトリを新たに掘るのも簡単です。エディタでファイル転送というと「はて?」と思う方が大半だと思いますが、エディタ側のファイラー機能と組み合わせれば、なかなか強力なツールとなることが納得いただけたのではないでしょうか。

リモートのvscodeのファイルをdiredで編集。
リモートのvscodeのファイルをdiredで編集。hello.txtをcopy.txtにコピーした後、subdirを作成してみた。これだけの作業が20秒とかからず終わる。アップロードしたファイルのリネームなども簡単だ。

vscodeにも少しは慣れてきた、かな?

前回に引き続き、今回のこの記事もemacsではなくvscodeで原稿を書いてみました。今回は特にsshでリモート接続する話でしたので、記事通りwindows上のvscodeをラズパイに接続して作業しましたが、リモートであることを忘れるほどに、快調に作業が出来ました。

前回のブログでvscodeをインストールしたことを報告したばかりで、使い始めてまだ一週間ほどだと思いますが、こうして何かの目的で作業していると急速にツールに馴染んでくるものです。現在ではwrapの横幅調整と行間調整をして、auto saveを有効にしており、これで文章入力については自分の中で許容できる範囲に入ってきました。

何よりvscodeは設定変更をするのが楽でいいです。emacsにも一応GUI的に設定を変更するツールはついていたようですが、覚えるのが面倒で(笑)、設定ファイルでsetqやらdefvarするのが常でしたので、それに比べると相当に楽です。vscodeのjavascriptのほうがオブジェクトとプロパティーの関係がはっきりしているので、ああいう管理ツールは作りやすいのだろうなと感じました。

設定ゼロで今すぐファイルを転送したい人にはSoqAlbumがお勧め

今回解説しましたように、vscodeは一度設定できてしまえば大変便利に使えるのですが、果たしてうまく設定できましたでしょうか? もっと手っ取り早くファイルを送りたい方という方には、設定時間ゼロのSoqAlbumがおすすめです。

2,3個のファイルを送りたいだけなのに、vscodeやファイル共有を設定するのは大袈裟ですよね。SoqAlbumはブラウザでページを開くだけ。アカウントも必要ありません。準備ゼロから誰でも数分でファイルを転送し終えられます。

ラズパイはもちろん、win, mac, linux, ChromeOSとiPhone, androidのどのデバイスからもスタートできます。SoqAlbumの概要とQRコードを使ったスマホのリンク方法について、以前の記事をどうぞ。

QRコードを使わないPCへの接続をこちらで解説しました。

windowsの方はSoqAlbumをMicrosoft Storeからインストールできます。

SoqAlbum - Windows に無料でダウンロードしてインストールする | Microsoft Store
QRコードをスマホ(iPhone, Android)でスキャンするだけで、スマホとPCの間のファイル共有が実現します。面倒なアカウント作成や、スマホへのアプリのインストールは必要ありません。またスマホの種類に悩む必要もありません。QRコード...

コメント

タイトルとURLをコピーしました