Raspberry Pi 5 に Ubuntu 24.04 LTS を入れて SSH するまで

ついに日本でも、 Raspberry Pi 5 の技適対応モデルが発売された。

Raspberry Pi にインストールする OS と言えば、まずは Raspberry Pi OS (旧 Raspbian) だが、同じ Debian ベースの Ubuntu も Raspberry Pi 向けの公式イメージを出している。

但し、 Raspberry Pi 5 に対応しているのは、 Ubuntu 23.10 (コードネーム: mantic) 以降のみとなる。

現在リリース済みの 23.10 は「非LTS」バージョンとなり、サポートが 9ヶ月 (2024年6月まで) と短い。
常用するなら、サポートが 5年 (ESM なら 10年) と長い LTS バージョンが望ましいが、残念ながら 22.04 LTS Raspberry Pi 5 に非対応だ。

LTS バージョンの次回リリースは 24.04 LTS (コードネーム: noble / 2024年4月リリース予定) で、現在絶賛開発中だ。

そんな開発中の 24.04 LTS も、デイリースナップショットが手に入る。
そいつを使ってディスプレイやキーボードが無い状態で、インストールから SSH 接続までやってみよう。

Raspberry Pi 5 をターゲットに書いているが、 Raspberry Pi 3, 4, Raspberry Pi Zero 2 W でも同じ手順でできるはずだ。

なお、この記事は 24.04 LTS がリリースされたら、それに併せて内容に書き換えていくつもり。

TL;DR

準備するもの

  • Raspberry Pi 5
    • Raspberry Pi 3, 4 でも同じ手順でいけるはず
  • 4GB 以上の micorSD カード
    • IOPS が高い、「アプリケーションパフォーマンスクラス」が A2 のものが良いだろう。値段や速度を考えると、実用上は 64GB 以上になるだろうか。
    • 私は、ARCANITE 64GB microSDXCカード 【A2】、UHS-I U3、V30、4K、C10 値段の割にパフォーマンスが良かったため、これを使った。
    • 後述するが、最終的には NVMe SSD にした方が断然良い
  • microSD を書き込める PC (Win, Linux, mac)
  • インターネットに繋がる Wi-Fi または イーサネットケーブル

以下もあると便利だが、今回の手順では無くても問題ない。

  • micro-HDMI で繋がるディスプレイ 又は 変換コネクタ
  • RasPi に繋げる USB キーボード

イメージファイルの取得

続きを読む

JavaScript で TOTP を計算する

TOTP: Time-Based One-Time Password Algorithm とは、二要素認証でよく見る Google Authenticator 等で QRコード を読み込ませたりして、一定時間毎に替わる 6桁 くらいの数字を入力するアレだ。

RFC 6238 に詳しい仕様が書かれている。
コイツを TOTP をブラウザ上で生成したい。

幸い近年の Web API には、バイナリ操作やクリプトまわりの機能が出揃っているので、わりかし簡単に実装できそうだ。
…とまぁ、そんな愚生が思いつくような話など既に、偉大なる先人たちによる多くのサンプルが残されている。

せっかく自分で実装するなら、最新の ES 仕様や Web API を活用して簡潔に、それでいて汎用的な仕様で書いてみよう。

実装

続きを読む

D&DしたQRコード画像をブラウザ上でデコードする

ブラウザ上にドラッグ&ドロップ (D&D) されたQRコードの画像を、読み込んでデコードするUIを作りたい。

Pure JavaScript で動作する、QR コードデコーダー(パーサー) cozmo/jsQR が有名なので、これを使ってみよう。

jsQR は、 png や jpg といった画像コンテナの解凍機能も、 HTML や DOM, Web 周りに特化した機能も一切無いため、読み込ませた画像は何らかの方法で Uint8ClampedArray な RAW 画像に変換して渡す必要がある。

ちょっと遠回りにはなるが、

  1. D&D されたファイルの File API を読み取る
  2. FileReader API を使って、ファイルを DataURI として読み込ませ、 img タグに表示させる
  3. OffscreenCanvasOffscreenCanvasRenderingContext2D を経由して ImageData を作成する
  4. jsQR に処理を投げる

といった処理になるだろうか。

早速実装してみよう。

実装

続きを読む