Mac用LLMクライアントアプリをTauriで作ってみた

MCP(Model Context Protocol) に対応したクライアントを試していたのですが、
あまり種類が無いので自作。ちなみにMCP対応はこれからの予定。。。

🔧 どんなアプリ?

現時点では、
LLMとメッセージをやりとりできる最低限のチャット機能 だけを実装しています。
リクエスト先には Ollama を使用しており、ローカル環境で動作するようになっています。

アプリの方向性は未定ですが、MCPは使えるようにしたいなと思ってます。

🧩 技術構成

このアプリは Tauri をベースに構築しています。
Tauriを使うのは初めてでしたが、 フロントをReactで作れるのが面白かったです。

パート 技術スタック
フロントエンド React + TypeScript
UIライブラリ MUI (Material UI)
バックエンド Rust

tauri.app

🎨 アイコンとか今後の改善点

今のところ、アプリアイコンはTauriのデフォルトのまま です。
そのうちちゃんとしたものを作りたいと思っています。

UIや機能もまだまだ最低限なので、
これから少しずつ拡張していく予定です。

💻 ソースコード

GitHubに公開しています👇
興味ある方はぜひ見てみてください。

👉 https://github.com/stonedev-app/llm-client-test

🚀 まとめ

MacでもMCPを試せる環境が欲しい」という動機で作り始めたアプリですが、
TauriとChatGPTのおかげで、あっという間にそれなりの形になりました。

ローカルLLMやMCPを活かしたクライアントアプリの可能性は広いと思うので、
少しずつ育てていきたいなと思っています。

STM32CubeIDEでDAPLinkを使ったデバッグ手順

STM32CubeIDEを用いてDAPLinkを使ったマイコンデバッグの手順

1. 前提条件

以下条件で検証

2. 目標

本手順を終えることで、以下が可能になります。

3. 設定手順

3.1 OpenOCD 起動コマンドの作成

  1. メニューから Run → External Tools → External Tools Configurations を開く
  2. 左メニューの Program を右クリック → New Configuration
  3. Name に任意の名前を入力
  4. Main タブ
    • Location: OpenOCD のフルパス /Applications/STM32CubeIDE.app/Contents/Eclipse/plugins/com.st.stm32cube.ide.mcu.externaltools.openocd.macos64_2.4.200.202505051030/tools/bin/openocd
    • Working Directory: OpenOCD の scripts フォルダのフルパス /Applications/STM32CubeIDE.app/Contents/Eclipse/plugins/com.st.stm32cube.ide.mcu.debug.openocd_2.3.100.202501240831/resources/openocd/st_scripts
    • Arguments:
      -f interface/cmsis-dap.cfg -f target/stm32g0x.cfg
      • target/stm32g0x.cfg は使用マイコンに合わせて変更
      • .elf は Debug ビルド前提
  5. Apply → Close

3.2 GDB デバッグコマンドの作成

  1. メニューから Run → Debug Configurations を開く
  2. 左メニューの GDB Hardware Debugging を右クリック → New Configuration
  3. Name に任意の名前を入力
  4. Debugger タブ
    • GDB Command: ${gnu_tools_for_stm32_compiler_path}/arm-none-eabi-gdb
    • Remote Target → Debug server: OpenOCD (via socket)
  5. Startup タブ
    • Reset and Delay (seconds) → チェックを入れ、0 を入力
    • Set break point at → チェックをいれ、mainを入力
    • Resume → チェック
  6. Common タブ
    • Save as → Shared file
    • 入力欄に /(プロジェクトフォルダ名)
    • プロジェクト配下に .launch ファイルが生成される
  7. Apply → Close

3.3 Launch Group の作成

  1. メニューから Run → Debug Configurations を開く
  2. 左メニューの Launch Group を右クリック → New Configuration
  3. Name に任意の名前を入力
  4. Launches タブ
    • Add → Program → OpenOCD 起動コマンドを追加
      • Launch mode: Run
      • Post launch action: None
      • Adopt launch if already running: チェック
    • Add → GDB Hardware DebuggingGDB デバッグコマンドを追加
      • Launch mode: Debug
      • Post launch action: None
      • Adopt launch if already running: チェック
    • 順番に注意: 上から OpenOCD → GDB の順
  5. Common タブ
    • Save as → Shared file
    • 入力欄に /(プロジェクトフォルダ名)
    • プロジェクト配下に .launch ファイルが生成される
  6. Apply → Close

4. デバッグの実行手順

  1. DAPLink を PC に接続
  2. DAPLink とマイコンに接続
  3. Run → Debug Configurations を開く
  4. 左メニューから作成した Launch Group を選択
  5. Debug ボタン を押下
  6. デバッグが開始される

ESP32をFT232Hでデバッグ

経緯

ESP32をデバッグする方法について調べてみたが、最近の記事があまりなかった。 現時点で手に入れやすいFT232Hを使用して、公式ドキュメントを見ながらデバッグを行い、その手順をまとめた。
途中うまくいかない事があっても、比較的解決しやすいと思われる、ESP-IDFのコマンドライン開発環境でデバッグ(GDBを使用したデバッグ)を実施。
間に色々いると、そもそも設定ファイルの場所がよく分からなかったりするので。。。

ESP32のデバッグについて

PC上でのデバッグと異なり、ステップ実行などをしたい場合は、デバッグ用に別途機器が必要。
全体像としては、以下のようになります。

デバッグ概要

環境

ESPr® Developer 32 — スイッチサイエンス

2,3年前にスイッチサイエンスで購入した、ESPr® Developer 32を使用。Amazonや、秋月電子で売っている開発ボードでも動くと思います。 持っているけど、試していない。

FT232H

デバッグ用の機器は、FT232Hを使用。 入手しやすかった「Adafruit FT232H搭載 変換基板 - USB to GPIO+SPI+I2C」を購入。
macでは、ドライバのインストールは不要のようです。 過去の環境構築時にインストールしていたドライバは念の為削除。

Adafruit FT232H搭載 変換基板 - USB to GPIO+SPI+I2C — スイッチサイエンス

配線

ESP32とFT232Hは、JTAGと呼ばれる規格で信号をやりとりするので、その規格に沿った配線を行います。
なんだかんだで、ピンヘッダが半田付けできて、ブレッドボードにさすことができるFT232Hは使いやすいですね。 コネクタになっているものは結局のところ、何番ピンと何番ピンを結線しているのかが分かりにくい。。。

docs.espressif.com

ブレッドボード
回路図

※ESP32をUSB接続する場合は、電源線の結線は不要です。

ESP-IDF環境でのデバッグ

1. ESP-IDFの環境構築をする
docs.espressif.com

私は、export.shを何度も実行するのが面倒だったので、ドキュメント通りにエイリアスの設定をしておきました。

alias get_idf='. $HOME/esp/esp-idf/export.sh'

2. 適当なプロジェクトを作成

docs.espressif.com

blinkのプロジェクトをコピーする方が、LEDが点滅してデバッグできているのが体感しやすいかも。 以降の操作は、プロジェクトのフォルダに移動した前提です。

3. ESP-IDFのパスなどを設定

get_idf

4. ビルドしたモジュールをESP32にアップロードする

openocd -f board/esp32-wrover-kit-3.3v.cfg -c "program_esp build/blink.bin 0x10000 verify exit"

「blink.bin」がモジュール名です。

5. OpenOCDを実行する

openocd -f board/esp32-wrover-kit-3.3v.cfg

「esp32-wrover-kit-3.3v.cfg」の中身をチラッと見ましたが、FT232Hの場合もこの設定で合っているようです。

※起動したOpenOCDは、デバッグが終わるまでそのままにしておく

6. 「gdbinit」ファイルを作成する
このファイルには、GDB実行時の設定が書かれていて、実行時に打つコマンドの量を削減できるようです。

「gdbinit」

target remote :3333
set remote hardware-watchpoint-limit 2
mon reset halt
maintenance flush register-cache
thb app_main
c

7. GDBを起動する
※OpenOCD実行中のターミナルとは別のターミナルを起動すること

get_idf
xtensa-esp32-elf-gdb -x gdbinit build/blink.elf

docs.espressif.com

8. GDBデバッグする
GDB 起動後、Enter押下でデバッグ開始されるので、「n」等入力して、 ステップ実行など実施します。 GDBのいい感じの使い方については詳しくない。。。

(gdb) n
[esp32.cpu0] Target halted, PC=0x400D53F2, debug_reason=00000001
Set GDB target to 'esp32.cpu0'
[esp32.cpu1] Target halted, PC=0x400845E2, debug_reason=00000000
101             s_led_state = !s_led_state;

www.tohoho-web.com

その他

ターミナルで全て実施するのもしんどい(主にテキストの編集)ので、VSCodeでプロジェクトのフォルダを開いて実施しました。
その際、ソースファイルを開いた際に赤線が出るのが気になったので、ESP-IDFのヘッダファイルパスだけ?通しました。

<.vscode/c_cpp_properties.json>

{
    "configurations": [
        {
            "name": "ESP-IDF",
            "cStandard": "c11",
            "cppStandard": "c++17",
            "browse": {
                "path": [
                    "${workspaceFolder}/**",
                    "/Users/〇〇〇〇/esp/esp-idf/components/**"
                ],
                "limitSymbolsToIncludedHeaders": true
            }
        }
    ],
    "version": 4
}

※「〇〇〇〇」はユーザー名

まとめ

やっぱりデバッグできるのはいいですね。一つ残念なのは、FT232HはUARTによるログ出力までは対応していないようなので、デバッグしながらそちらのログも出力したい場合は、ESP32もPCとUSBで接続する必要がある事です。

自作キーボード作ってみた(その1)

経緯

MacBookを使うようになってから、
平べったいキーボードを何の疑問もなく使っていました。
よく考えると使いにくいよね、というところから開始。

キーボード選択

ノートパソコン+キーボードで机の上にそんなに面積ないので、コンパクトなもの。
それから、左右分割の使い心地にすごく興味があったので、分割タイプ。
色々見たのですが、分割タイプ(市販品はない?)は、基本的に自作になり、
いきなり高価なものを買って、作れませんでしたでは困るので、比較的安価なものを選択。

HelixPico キーボードキットshop.yushakobo.jp

この時点では気が付いていなかったのですが、
安価=基板のみの状態で、購入者側がダイオードや、キースイッチのはんだ付けを頑張る必要ありです。
キーボードのキーの数だけ。つまり、50キーなら、50箇所です。
内容を見て、もう少しお高いものでも良かったかも。
高いなと思っても、キースイッチを嵌め込んで、
ProMicroをはんだ付けすればOKのようなキットもありました。

キーボード本体以外に必要な部品について

キーボード本体以外に購入する必要のある部品について

  • キースイッチ
    サイトの説明を見ながらお好みで良いかと思います。赤が無難?
    ちなみに、Pinkは基板にカチッとはまるので、はんだ付けが楽でした。
    はめ込んで裏返した際に、キースイッチが落ちてこないので、
    マスキングテープでのキースイッチの固定が不要。
    おそらく、Red Proも同じではないかと思います(こちらは試していない)。

Kailhロープロファイルスイッチshop.yushakobo.jp

  • キーキャップ
    少しお値段が高いですが、刻印ありのものを妥協せずに選ぶのが良いかと。
    初めてのキーレイアウトで、刻印なしはきついです。
    これがおすすめ。
    一番お金をかけるべきは、キーキャップではないかと思っています。。。

MBK Legend‡ Glow R2 blackshop.yushakobo.jp

  • 3.5mmステレオミニプラグオーディオケーブル
    お好みで。
    あまり期待はしていなかったのですが、
    遊舎工房さんで購入したものが、ケーブルが柔らかくて取り回しが良かったです。
    値段も安いし、これで良いのではないかと思います。

TRRSケーブルL字 0.15mshop.yushakobo.jp

  • マイクロBのUSBケーブル
    マグネット付きのものがおすすめです。
    ProMicroのUSBもげ対策も、もちろんあるのですが、
    キーボードのファームウェアを弄り出すと、
    左右分割キーボードの場合は、両方のキーボードにUSBを接続する必要が出てきます。
    抜き差しすることが多くなるので、マグネット付きの方が楽で良いです。

https://www.amazon.co.jp/gp/product/B096XXLPCB/ref=ppx_yo_dt_b_asin_title_o02_s01?ie=UTF8&th=1

  • その他 USBハブ
    ノートパソコンのUSBに、すでに色々繋げていると、
    キーボード接続すると電力不足の場合があるので。。。
    充電機能とハブの機能が両方ついたものを購入しました。
    USB PD対応って言うのですね。

次回

思っていたよりもボリュームがありそうなので、
何回かに分けて書こうと思います。
次は、あると便利な道具や作っていく上でのポイントについて。
LEDについて書くのを忘れましたが、難易度高い&手間がかかるので、
あまりお勧めはしないです。光るのかっこいいんですけどね。

Raspberry Pi PicoでLovyanGFXを使う

経緯

LovyanGFXというArduinoで使える汎用的な画面表示ライブラリがあるらしい。
さらに調べていると、picoにも対応、SSD1306(SPI)にも使える。
ということで試してみました。
日本語の表示をさくっと行いたいのです。
ライブラリを使わないと、フォントファイルを読み込んで、描画になってくる。

開発環境

最近お気に入りのPlatfromIOをVSCodeで使っています。
platformio.org

プラットフォームは、Raspberry Pi RP2040(earlephilhower版)です。

配線&コード

以下に上げています。
github.com

最初、全然うまくいかず、諦めかけていたのですが、
公式サイトを熟読。 github.com

こちらのブログを参考にさせていただきました。 qiita.com

ディスプレイの設定用ヘッダファイルを作るのは大体合っていたのですが、
spi_host、spi_modeの設定、配線辺りが間違っていた?
動いてしまえばこっちのものなので、この辺は追々理解していけば良いかと思っています。

まとめ

picoで動けば、pico wでも動くはずなので、
インターネット経由で情報取得して、表示させたりしたいと思っています。

Adafruit QT Py RP2040 MicroPythonによる開発

経緯

Adafruit製RP2040開発ボードのMicroPythonによる開発手順を調査。
公式サイトではCircuitPythonによる開発が詳細に解説されている。
MicroPythonによる開発にも対応していることが明記されているが、詳細が不明。

Adafruit製RP2040開発ボード

「Adafruit QT Py RP2040」を対象とする。

必要なもの

  • 「Adafruit QT Py RP2040」uf2ファイル
    Adafruitではなく、micropython.orgからダウンロード。
    micropython.org

MicroPython開発環境構築

1. uf2ファイル書き込み
「BOOTSEL」ボタンを押した状態で「Adafruit QT Py RP2040」をPCに接続。
「RPI-RP2」がディスクドライブに追加されます。
uf2ファイルを「RPI-RP2」の直下にコピー。
※CircuitPythonによる開発と同じ手順です。

2. IDE
IDERaspberry Pi Picoと同様に、「Thonny」を使用可能。 thonny.org

3. 内蔵RGB NeoPixel LEDを使用してLチカ
定番のLチカ。
「Adafruit QT Py RP2040」の内蔵LEDは、NeoPixel LED。
Raspberry Pi PicoでLチカを行うのとは、要領が異なる。
NeoPixelのライブラリ追加は不要。以下サンプルソース

import machine
from neopixel import NeoPixel
from time import sleep

# NEOPIXEL_POWER このピンをONにするとNEOPIXELが使用可能になる
LED_POWER = 11
# NEOPIXEL
LED_PIN = 12

def main():

    # NEOPIXEL_POWER ON
    ledPower = machine.Pin(LED_POWER, machine.Pin.OUT)
    ledPower.on()

    # 1ピクセル用の NeoPixel ドライバーをGPIO12で作成
    led = machine.Pin(LED_PIN)
    np = NeoPixel(led, 1)

    while True:

        # 第1ピクセルを白に設定 RGB
        np[0] = (10, 10, 10) 
        # ピクセルにデータ書込み
        np.write()
        # 1秒間、一時停止する
        sleep(1)

        # 第1ピクセルを消灯 RGB
        np[0] = (0, 0, 0) 
        # ピクセルにデータ書込み
        np.write()
        # 1秒間、一時停止する
        sleep(1)

if __name__ == "__main__":
    main()

まとめ

Adafruit製RP2040開発ボードもRaspberry Pi Picoと同様に、MicroPythonによる開発が可能。
また、NeoPixelをMicroPythonでライブラリの追加なしに操作可能。

ESPr® Developer 32の開発環境構築

開発環境

必要なもの

  • ESPr® Developer 32
    スイッチサイエンスのESP-WROOM-32搭載開発ボード
  • ピンヘッダ 20P x 2
  • 幅が広いブレッドボード
    ESPr® Developer 32 は幅が広い。
    普通のブレッドボードだと幅が足りず、両側から配線を引き出せない。
  • セラミックコンデンサ 0.1μF x 2
    スケッチのアップロードが自動でできなかったため追加
  • その他
    はんだごて、はんだ、ジャンパ線、USBケーブルは適宜用意

経緯

Arduino互換機?は、動かないとかトラブルがあったら嫌だなということで、
とりあえず純正品を使っていました。
ArduinoiPhoneでやり取りしたいということになってくると、
BluetoothWiFiが必要になってくるが、Arduinoには搭載されていない。
ESP32は、BluetoothWiFi搭載されていて、
割とメジャーな感じだったので、導入に踏み切りました。

開発環境構築手順

1. ピンヘッダをはんだづけ
合計40ヶ所、頑張ってはんだづけしましょう。
今回は、ピンヘッダ未実装の開発ボードを使用しましたが、
ピンヘッダ実装済のを購入すれば、はんだづけは不要です。

2. USB-シリアル変換IC(FT231XS)ドライバ
Espressifの開発ボードとは、シリアル変換ICの種類が違うので注意。
ESPr® Developer 32で必要なのは、以下のドライバです。
USB-シリアル変換IC(FT231XS)ドライバダウンロード先
ごちゃごちゃしていて分かりにくいのですが、
VCP DriversのMac OS X10.15 and macOS 11用をダウンロードして、インストールします。

USB-シリアル変換IC FT231XSドライバダウンロード
USB-シリアル変換IC FT231XSドライバダウンロード

3. 追加のボードマネージャのURLを追加
Arduino IDE(1.8.13を使用)はインストール済とします。
Arduino->Preferencesと選択して、以下のURLを追加します。
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

4. ボードマネージャでesp32をインストール
ツール->ボード->ボードマネージャーで、esp32を検索して、
esp32(バージョン2.0.1)をインストール。
ボードは、ESP32 Arduino->ESP32 Dev Moduleを選択。

5. シリアルポートで、「cu.usbserial-D309D3VH」を選択
ESPr® Developer 32とMacをUSBで接続後、
ツール->シリアルポートで、「cu.usbserial-D309D3VH」を選択します。

6. スケッチをマイコンボードに書き込み
後は適当なスケッチを用意して、マイコンボードに書き込むだけです。
ESP-WROOM-32のセットアップについてから引用

void setup() {
  Serial.begin(115200);
}

void loop() {
  Serial.println("Hello World.");
  delay(10000); 
}

7.スケッチの書き込みに失敗する場合
Connecting......と表示されている時に、FLASHと書かれている方のボタンを押しっぱなしにしてください。 とりあえずはこれで書き込みできるはずです。

8.Arduinoと同様に自動で書き込みをする場合
スケッチを書き込む際、ESP32を書き込みモードで起動する必要があります。
自動でモードが切り替わる仕組みは、搭載されているのですが、
環境によっては、EN端子がHighになるタイミングが早すぎるようです。
ESPr® Developer 32 回路図
回路図を見ると、ENとGNDの間に0.01μFのコンデンサ(C6)が入れられていますが、これではまだ足りないようです。
いろいろ試してみた結果、0.1μFのコンデンサ2つ追加で落ち着きました。

コンデンサ追加回路図
コンデンサ追加回路図

9. 考察
当初の懸念通り、ドライバのインストールや自動書き込みで手こずったので、BluetoothWiFiが不要な人は、純正のArduinoの方が無難です。