【今日から始めるラズパイ その 3】Raspberry Pi VNC で GUI 操作

# はじめに

これまで LAN 内からラズパイに SSH 接続する方法として[IP アドレスを固定するやり方]()、[Avahi を使用するやり方]()について書いてきました。SSH 接続というのは基本的に CLI（Command Line Interface）操作が前提となっています。
しかし、慣れていない人はどうしても GUI（視覚的な操作）などのグラフィカルな操作ができたらいいのにと思う人もいるでしょう。（自分もそうでした。）
リモート接続としてコマンドラインを使用した SSH 接続を紹介してきましたが、今回の記事では視覚的な操作を可能にする <font color=Magenta>**VNC を利用してリモート接続する方法**</font> について書いていきたいと思います。

# 目次

- VNC（Virtual Network Computing）
- 環境
- VNC のセットアップ
  - VNC をインストール
  - VNC を有効化
  - VNC サーバを起動
  - VNC サーバへ接続
- VNC サーバの自動起動設定
- 最後に

# VNC（Virtual Network Computing）

- <font color=Orange>**VNC とは**</font>

リモートデスクトップの一種で、ネットワーク上の離れたコンピュータを画面を見ながら遠隔操作するものです。つまり、モニタなどを直接接続しなくても、自分の使用する PC 上にラズパイの画面を表示して利用することができます。
オリジナルの VNC がオープンソースとして公開されているため、現在では様々な VNC の派生ソフトがあります。

- <font color=Orange>**VNC サーバ**</font>

その名の通り、VNC を提供するサーバです。VNC サーバはソフトウェアとして動作します。このソフトウェアはサーバソフトと、クライアント（もしくはビューア）ソフトの 2 つに分かれており、ラズパイ上でサーバソフトを起動しておき、遠隔操作する側はクライアントソフトを起動させて接続しにいきます。

# 環境

今回は、以下の環境を想定して書いています。

- 接続元 PC：Mac
  - OS：macOS Catalina ver. 10.15.6
- 接続先 PC：Raspberry Pi 3 model B
  - OS：Raspbian GNU/Linux version: 8 jessie（Debian）
- 構成
  - 今回は LAN 内でのリモート接続を想定して設定をするので PC、ラズパイ共に同じルータに接続してください。（同じ構成にしたい場合、[こちらの記事](https://qiita.com/ren1007/items/3a37c7dde42e1acbbd4e)を参考に）<br>
    <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/de364bde-91c9-86f9-9957-484f88787187.png">

# VNC のセットアップ

### VNC をインストール

```
### tightvncserverのインストール
$ sudo apt-get update && sudo apt-get upgrade
$ sudo apt-get install tightvncserver
```

### VNC を有効化

- GUI の場合<br>
  <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/f6772477-5498-6cdd-b256-7d3d6533a6d0.png"><br>
  <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/d6483550-97d2-148a-db7c-176888f060ef.png">
- CLI の場合

  - `$ sudo raspi-config`
    - 『Interfacing Options Configure connections to peripherals』を選択
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/b8e08926-1cca-1b92-15f4-2b6c2e3dcdd3.png">
    - 『VNC Enable/Disable graphical remote access to your Pi using RealVNC』を選択<br>
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/717f81e5-3184-077a-5568-465388cfb7dd.png">
    - 『<はい>』を選択<br>
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/4f360719-dd4f-f065-4fef-419cabb64d5c.png">

- 設定を反映
  - `$ sudo reboot`

### VNC サーバを起動

- サーバ起動コマンドを実行
  - `$ tightvncserver`
  - ※ **初回起動時に VNC ログインパスワードを設定します**
- 接続ポートの生存を確認
  &emsp;&emsp;VNC は[ウェルノウンポート](https://ja.wikipedia.org/wiki/TCP%E3%82%84UDP%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%9D%E3%83%BC%E3%83%88%E7%95%AA%E5%8F%B7%E3%81%AE%E4%B8%80%E8%A6%A7) 5901 番を使用します。
  - `netstat`コマンドで 5901 番の状態を確認する - `$ netstat -nlt`<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/67748452-0725-be8b-7734-50a682898670.png"><br>
    5901 番ポートが`LISTEN`となってれば問題なく接続することができます。

### VNC サーバへ接続

- Finder から "サーバへ移動" を選択（ コマンド(⌘)+K ）
- ラズパイの接続 IP（`vnc://[ラズパイのIPアドレス]:5901`）を入力する
- 上で設定した VNC ログインパスワードを求められる<br>
  <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/449ee71d-d281-1b51-4e85-db1fdef065b9.png">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/ddcfd39b-e8e5-81ed-f24f-643fbd2c16b9.png">
- <font color=Red>注意：VNC を通して Chromium などの検索エンジンを使用する場合、YouTube を見たり、omxplayer を使用して動画を再生することはできないらしい。（第一スペック的にもきつい）</font>
  - もちろん、ラズパイにモニタを繋いでダイレクトに利用する場合は問題なく見れます。
  - 動画は普通に自分の PC で見ましょう。

# VNC サーバの自動起動設定

ラズパイ起動時に VNC サーバも同時に立ち上げたい場合、以下の設定をしておきます。
また、今回使用している Raspberry Pi 3 model B のデフォルトの解像度は低すぎて、Mac からリモート接続すると画質が一気に悪くなります。なので、ついでに解像度の設定も一緒に記述しておきます。
僕は PC のモニタとして`1920x1080 (フルHD)`を使用しているので、設定もこれに合わせます。設定は自分の環境に合わせて変更してください。

- VNC サーバを自動起動させるには`vncboot`というスクリプトを書きます
  - `$ sudo nano /etc/init.d/vncboot`

```sh:vncboot
#! /bin/sh

### BEGIN INIT INFO
# Provides: vncboot
# Required-Start: $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start VNC Server at boot time
# Description: Start VNC Server at boot time.
### END INIT INFO

# /etc/init.d/vncboot

USER=pi
HOME=/home/pi

export USER HOME

case "$1" in
    start)
        echo "Starting VNC Server"
        #Insert your favoured settings for a VNC session
        su $USER -c '/usr/bin/vncserver :1 -geometry 1920x1080 -depth 24'
        ;;

    stop)
        echo "Stopping VNC Server"
        su $USER -c '/usr/bin/vncserver -kill :1'
        ;;

    *)
        echo "Usage: /etc/init.d/vncboot {start|stop}"
        exit 1
        ;;
esac

exit 0
```

- 作成したスクリプトに実行権限を付与して自動起動の登録をします
  - `$ sudo chmod 755 /etc/init.d/vncboot`
  - `$ sudo update-rc.d vncboot defaults`
- 再起動して、VNC サーバが自動起動することを確認
  - `$ sudo reboot`
- プロセスと`LISTEN`ポートの確認
  - `$ ps -ef | grep tightvnc | grep -v grep`
    - 以下を応答すれば問題なくプロセスが立ち上がっている

```
pi         857     1  0 04:18 ?        00:00:05 Xtightvnc :1 -desktop X -auth /home/pi/.Xauthority -geometry 1920x1080 -depth 24 -rfbwait 120000 -rfbauth /home/pi/.vnc/passwd -rfbport 5901 -fp /usr/share/fonts/X11/misc/,/usr/share/fonts/X11/Type1/,/usr/share/fonts/X11/75dpi/,/usr/share/fonts/X11/100dpi/ -co /etc/X11/rgb
```

- `$ netstat -nlt`<br>
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705806/67748452-0725-be8b-7734-50a682898670.png"><br>
  5901 番ポートが`LISTEN`となってれば問題なく接続することができます。

# 最後に

今回は、VNC を利用する方法として tightVNC というソフトウェアをインストールして実行し、VNC クライアント（ホスト PC）から接続して GUI 利用する方法を紹介しました。
もちろん Mac だけでなく、Windows からも VNC を利用できます。その際は RealVNC, VNCViewer というものを使用する方法などがあります。詳しくは以下の URL を参考にしてみてください。

[Windows から Raspberry Pi 3 Model B+にリモート接続する](https://qiita.com/NagaokaKenichi/items/edab135b4118a47c821c)
[RaspberryPi の VNC 設定を SSH で完結させる。](https://qiita.com/Shun_Harutaro/items/3cbae3b4f06dc48df00d)

それでは 💪