文系卒QAエンジニアのラズパイ挑戦記


この記事は[Hacobu Advent Calendar 2024](https://qiita.com/advent-calendar/2024/hacobu)の11日目の記事です。
# 1.はじめに

株式会社Hacobu QAエンジニアのいとうです。
今年チャレンジしたラズパイ工作について書いていきます。業務で触っているわけではないですが、とあることがきっかけでラズパイに興味を持ち、ラズパイ工作にチャレンジしてみました！

自分のバックグラウンドは以下。
- QAエンジニア歴としては3年弱
    - 開発エンジニアの経験はなし
    - 研修でJavaを少し触ったことがあるくらい
- それ以前は事務系の仕事
- 大学は文系学部

ということで、これまで電子工作は全くの未経験という状態からのスタートです！

# 2.ラズパイを触ってみようと思ったきっかけ
そぞらさんのこのツイートがきっかけでした。

https://x.com/sozoraemon/status/1756632118669754508

水族館好きで大水槽とか何時間でも見ていられる人間な私は「こんな素敵なもの自作できるの〜！？」と思い、それ以降はそぞらさんのツイートやブログを読み漁り、ラズパイへの関心が日増しに大きくなりました。
手順のブログを読んでみると、「これ意外と自分でも作れるんじゃない？」という気持ちになっていき気づいたらラズパイを手にしていました。




# 3.用意したもの
さて、初心者の電子工作にあたっては1から道具を集めていきました

- [TRASKIT Raspberry Pi 4 Model B Starter Kit](https://amazon.co.jp/dp/B08F83TRY9?ref=ppx_yo2ov_dt_b_fed_asin_title)
    - 初心者には大変ありがたいスターターキット
- [5インチ円形タッチスクリーンディスプレイ（1080 x 1080, HDMI接続）](https://www.switch-science.com/products/9029)
    - ビビリの初心者としては記事と全く同じものを揃えたかったのですが、4インチが品切れだったので大きめの5インチを買いました
- [USB HUB](https://www.biccamera.com/bc/item/4980519/?source=googleps&utm_content=001100087010&utm_source=ssc&utm_medium=cpc&utm_campaign=UC_SK_5_pasokon_other&gad_source=1&gclid=CjwKCAiAjKu6BhAMEiwAx4UsAijDz0515CUg8LhEVrY6QtzE9Zum56CM9dsJAvgzWwQEGX_SF0lC8hoC30wQAvD_BwE)
    - なくても作れるとは思いますが、コードがごちゃごちゃするので
- [Raspberry Pi はじめてガイド［Raspberry Pi 4完全対応］](https://gihyo.jp/book/2021/978-4-297-11958-4)
- プラスドライバー
    - 0番、1番くらいのサイズのもの
- 有線マウス
    - 所持しているBluetoothマウスが上手いこと接続できなかったので有線を仕入れました


# 4.ラズパイのセットアップ
初めて触る未知のOS、ラズベリーパイとの対面です。
セットアップはこちらを参照して行いました。
初心者でもわかりやすかったのでほとんどつまずくことなくセットアップできました。

https://sozorablog.com/raspberrypi_initial_setting

### 手順はざっくりこんな感じ
本当に先述のブログに書いてある通りにやったら簡単に終わったので概要と躓いたポイントのみです。
1. RaspberryPiOSのダウンロード
1. ラズパイ本体の準備
1. ラズパイの起動
1. ラズパイの初期設定 

#### 初心者躓きポイント
<details><summary>microSDのリーダーの入れ方合ってるのかわからない</summary>

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/5b36599a-7b31-47b5-b0c8-7d7053cb745c.jpeg">

- リーダーのロゴを上にして上向きに入れる
- 奥まで刺す
    - 押し込んで取れなくなりそうな不安がありましたが取れます、安心してください
</details>
<details><summary>コードどこにどれ刺せばいいのかわからない</summary>
セットアップ時にはこの三箇所でOK！

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/fc6f6c78-75f7-043a-3448-2eba51dbc6da.png">

①ACアダプター
    ラズパイスターターキットにはON・OFF切り替えのできるACアダプターがついているのでそれを使うとよい。準備できるまではOFF状態でつないで置く。ON・OFF切り替えなしのACアダプターを利用する場合は最後に接続するべし（ラズパイにはスイッチがないので電源接続した時点で起動してしまう）
②HDMIケーブル
    モニターと接続する。
    ラズパイをセットアップする際、モニター接続して行う
③マウス・キーボード
    私はHUBを使いました。

    

</details>

# 5.ラズパイと円形ディスプレイを繋いでいく（物理）
4箇所ネジで止めていきます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/4c505a82-435f-0389-49fc-fbdeeb42c852.jpeg">


# 6.円形ディスプレイに映していく
### 手順
1. ラズパイと円形ディスプレイを繋ぐ
     <details><summary>ここでも発生するどこに繋ぐのか問題</summary>
     <img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/c34c0974-8349-10c4-2f1b-3f030bb43ec4.png">
     
     別アングルでもう一枚
     <img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/b482c6e6-112c-f9c9-179d-e5dede8708c6.png">

     ①ACアダプタ（ラズパイへの給電）
     ②HDMI（外部モニターとラズパイの接続）
     ③マウス・キーボード
     ④ラズパイから外部モニターへの給電（？）
         正式な円形モニターの給電ポートは別の部分にあり（①の下）定かではないのですが、ラズパイからの電源Outputがわからなかった＋これを接続していると動くので接続しています
         </details> 

1. ラズパイセットアップ時に接続していた作業用モニターから外部モニターに移行
    以下のコマンド入力
    ```
    git clone https://github.com/waveshare/Waveshare-DSI-LCD
    cd Waveshare-DSI-LCD
    cd 6.1.21
    cd 64
    sudo bash ./WS_xinchDSI_MAIN.sh 40C I2C0
    sudo reboot
    ```
    再起動されるとこうなる
    <img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/587d1515-4272-b736-eb46-1456448cdcfe.png">
    画像で分かる通り、ツールバーなどが枠外にはみ出すのでショートカット駆使して設定をやり遂げましょう。
1. MagicMirror2のダウンロード
    1. `Ctrl + Alt + T`でターミナル起動
    1. 順にコマンド実行
    ```
    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
    git clone https://github.com/MichMich/MagicMirror
    cd MagicMirror/
    npm run install-mm
    cp config/config.js.sample config/config.js
    npm run start
    ```
    無事開始された！
    <img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/d9f60c6a-7494-60d3-1200-c27e945ef3d1.png">
    <img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/19fe05de-df9d-990c-fbef-5514911e6bf2.jpeg">
    恐ろしく画面が汚い


# 7.動画を再生する
ここからはMagicMirror2の設定を自分好みに完了させていきます
1. MM-EmbedYoutubeをインストールする
    a. Youtube動画の再生のために必要になります
    以下のコマンド実行
    ```
    cd ~/MagicMirror/modules
    git clone https://github.com/nitpum/MMM-EmbedYoutube.git
    cd MMM-EmbedYoutube
    npm install
    ```
1. configファイルの設定
    a. MagicMirrorをインストールするとMagicMirrorディレクトリ配下にconfig/config.jsファイルが作成される
    b. ↑を編集していく
     <img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/76f63964-75c0-6801-4789-7ac6f6dcc3f3.jpeg
">
     
     - 不要な部分をコメントアウト 
     - moduleで今回表示したいclockとMMM-EmbedYoutubeを設定
         - video_idはYouTubeリンクの`v=XXX`の部分を参照します

```
        modules: [{
        	module: "clock",
        	position: "top_center",
        	config: {
        		showDate: false,
        		displaySeconds: true,
        	},
        }, {
        	module: 'MMM-EmbedYoutube', // Path to youtube module from modules folder Exmaple: MagicMirror/modules/custom/MMM-EmbedYoutube/ so it's custom/MMM-EmbedYoutube
        	position: 'top_left', // This can be any of the regions.
        	config: {
        		// See 'Configuration options' in README.md for more information.
        		video_id: 'X6C2hpunZ8c',
        		loop: true,
        		autoplay: true,
        	},
        }, ]
 ```
※画像時点では伊丹空港のライブ配信を参照していましたが、ライブ配信終了してしまったので上のconfigでは[鳥羽水族館ラッコ水槽ライブカメラ](https://www.youtube.com/watch?v=X6C2hpunZ8c)を参照しています。


# 8. `cd MagicMirror/ && npm run start`で起動するとついに！！

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/00f2814a-5f9d-2012-5b75-daaa98c4bcb5.jpeg">

ラッコが泳いでいる！！

ちなみに、より水族館を感じる動画を探して[Tropical Reef Camera powered by EXPLORE.org](https://www.youtube.com/live/DHUnz4dyb54?si=tL1r4BP4bl0-xA85)の配信に辿り着きました。
[Tropical Reef Camera powered by EXPLORE.org](https://www.youtube.com/live/DHUnz4dyb54?si=tL1r4BP4bl0-xA85)（左）と箱根園水族館の円形窓（右）を比べてみても遜色なし！！（箱根園の方は少し暗く撮ってしまった私の写真の腕の問題が出ていますが…）
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/9c1c255b-c8c5-c6b7-0c68-2ebe402ce27d.jpeg">　　　<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/9dbf701a-33de-6ef3-d1c6-79df2997e74f.jpeg">


# 9. 終わりに
ハードとソフトの両面で初めてのことが多かったので戸惑うことが多いながらも楽しく作れました。そぞらさんのブログがわかりやすかったので、コマンド実行などは指示通りにやっていくだけでほぼできました。(ありがとうございます！！)
今回作ったものであれば初心者でもそんなに時間もかからずに作れたので、年末年始の連休にぜひ作ってみてはいかがでしょうか。

ちなみに私は今回作っているうちに童心に帰り、ロボットが作りたくなったので次はこちらを作ってみようと目論んでいます。

<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727841/4ea5f8b4-cd11-c252-2f6f-7b1f8bce46b0.jpeg">

すでに手に入れた次のターゲット（クリスマス仕様で家の仲間たちと）





# 10.参考にした記事・書籍
https://sozorablog.com/raspberrypi_initial_setting/

https://sozorablog.com/magicmirror/

- [Raspberry Pi はじめてガイド［Raspberry Pi 4完全対応］](https://gihyo.jp/book/2021/978-4-297-11958-4)