aikawa

カスタムな辞書が欲しい

mdファイル等の資料に、その文脈に沿った用語解説が欲しい、と思う事が割とあり、ClaudeとかのLLMに解説させて、用語登録するアプリをClaudeが作りました。
https://github.com/lancard-aikawa/GlossPop

Windows版はビルドした版があるので、そちらを。
https://github.com/lancard-aikawa/GlossPop/releases/latest
起動はglosspopw.exeとwの付いた方で。

他OSではClaudeにREADME.md等に従って実行出来るようにしてと頼めば、ある程度動くと思います。

登録してみる

登録のやり方は、ファイルを開いて、登録したい単語をドラッグで選択して、辞書に登録を押すだけです。






AIで下書きを押せば、Claudeコマンドが動いて、それっぽい内容をテキストから作ってくれます。
※何か思考が足りないとか、正確さは要らないからもっと早くと思う時は、設定でClaudeのモデルや思考の深さをいじってみてください。

登録後は、リンク線が表示され、フォーカスするとポップアップ表示されます。



辞書の種類


辞書は、全体とフォルダごとの2か所に保存出来るので、それのみにしか使わない辞書は保存先を「このフォルダだけ」にすると良いです。
またカテゴリを分けると、同じ名前を別カテゴリに登録出来ます。
このファイル専用辞書にすると言った場合、フォルダごとにファイルを分けて、フォルダの辞書に登録するのが良いと思います。

特徴

テキストをClaudeへ渡せるので、ファイル内容を参考にしつつ書いてくれる事です。
またファイルから一括で、人物や専門用語っぽいものを抜き出したりも出来ます。



epubやpdfにも対応しているので、普通に読めるファイルなら小説の人物一覧とかも作れます(保護されてるとかは恐らく無理)。

辞書の個性


更に、辞書作成にペルソナ的な指示も可能なので、吾輩は猫であるに対して、吾輩(猫)のような語り口で、と書けばそれっぽく辞書登録します。このテキストの主人公の文体で、とかでも多分。
※この辺はLLMの性能や癖に依存してしまいますが。

こんな感じで書いて文体を保存を押して、辞書登録させると。






各フォルダの辞書ごとに画像を設定可能なので、「このテキストの主人公のような語り口で」等と指定すれば、そのキャラクターが話しているように見せる事も、多分可能です。



aikawa

Flutterとかの長いログ

TL;DR


長大なログを何とかコンパクトに読みたいよね。
え、全体を隈なく読むのが楽しい?そう・・・。



本題


Flutterのログって起動中ずっと流れっぱなしになってて、分割も出来ないしクリアするしかないんですよね。
お前にはページの概念はないのか、とか思いませんか。
(お前と言うか、Flutter以外も含んだ複数形ですが)

そんな所を何とかしたいなと、コンセプトとして作りました。
https://github.com/lancard-aikawa/FlutterBoard

1. ログを見る

何通りかやり方があって、以下の3通りです。

  • FlutterBoard内でコマンドを実行する
  • ログファイルをアップロードする
  • VM Serviceに接続する

VM Serviceに接続する方法が、リアルタイムで見る方法では安定です。
Flutterのdeveloper.logなんかは出力先が特殊で、通常のプロンプトで取得出来ないため、これを取得するにはVSCodeのコンソールで見るか、対応したターミナルでないと駄目なのでこれを経由させる必要があったんですね。

早速VSCodeで起動させます。


Launching lib\main.dart on Chrome in debug mode...
Debug service listening on ws://127.0.0.1:63552/D8xstpiYxOg=/ws
A Dart VM Service on Chrome is available at: http://127.0.0.1:63552/D8xstpiYxOg=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=ws://127.0.0.1:63552/D8xstpiYxOg=/ws
Connecting to VM Service at ws://127.0.0.1:63552/D8xstpiYxOg=/ws
Connected to the VM Service.
Starting application from main method in: org-dartlang-app:/web_entrypoint.dart.

VSCodeだと起動時にこんな感じでログが出ますので、VM Service atのws:以降をコピーします。

これは毎回値が異なるようなので、都度見る必要があります。

FlutterBoardでフォルダを開いて、プロセス/ログをクリック。

左下のVM Servフォームにペーストして、右にあるAttachを押すと、こんな感じで出力されます。

ちょうどログ構造としては冗長な表示形式です。

ログ表示右上のグループ化にチェックを入れ、入力フォームに┌─を入れると、こんな感じに┌─の有る行をスプリッターにして折り畳まれます。

あるいは、あるフレーズを入れてそこを分岐点として折りたたみたいと言うのも結構あります。
サンプルexample/フォルダのFlutterプロジェクトでは、クリックごとに分割させる事も可能です。
[FB:SCREEN]を今度は入力してエンターを押してみると、今度はその行をヘッダーとして表示し、その間は折り畳まれます。

単純な出力なので一行しか入っていませんが、これがルータでページ遷移ごとに特定フレーズ+ページ名をログ出力して、特定フレーズで分けるとなれば、ページ単位で見たい要望とマッチします。

ログファイルを折り畳んで見る

ストリームでなくても、ログファイルを見る事も出来ます。

例えばsshで接続したターミナルログを、特定コマンドやフレーズごとに分割表示する事も可能です。

右下のログを開くボタンを押すと、ファイルを選べるので、アップロードして表示します。

後はやり方は同じです。

コマンド結果を見る

コマンドを入力してから見る事も出来ますが、多少不安定でお勧め度は下がります。

以前言った、developer.logなんかはこの方法では表示を取得出来ない等の制約も有ります。

コマンドを入力する時は、VM Serviceへの接続を切って、他のコマンドも出来れば終了させてから行います。

プロセス/ログ下にあるフォームにコマンドを入れ、ラベルに適当に名前を付けて実行を押すと、結果が表示されます。

一応、プロセスが終了していない判定なら、Ctrl+C等や文字を送信する事も出来ます。

何だかんだ言いつつ

ログが長いとグループ化にパワーを使うので、nodejsはやっぱ駄目かなぁとか思ったり。

2. パッケージの更新状態を見たい

もう1つの目玉みたいな機能です。

いきなりアップデートよりも、まずは状態を一覧で見たい事が。
そんな時に依存チェックを押して、直下のpackage.jsonまたはpubspec.yamlを見る事が出来ます。
早速結果。

pubspecもpackageも綺麗に出せました。マイナー、メジャー両方が表示出来ます。

変わり種としては、CDNを利用しているhtml内の表記にも対応しています。こちらは流石に手で修正する必要がありますが。

セキュリティ

ついでに、セキュリティボタンでは、npm auditやOSV.DEVを使った脆弱性チェックなんかも可能です。

依存ツリー

Flutterやnpmの依存ツリーを見る事が出来ます。

Flutterの場合、依存パッケージのバージョンがパッケージごとに異なるというのを避けるために、バージョン競合だけを抜き出して表示確認したりとか。

なお、npmの場合は異なってもそれぞれ依存バージョンを個別に管理するので、問題ないようです。

(またそれがカオスな状況を作り出してるとも)

他は

他はお勧めするほどのものではないですが・・・。

ツールは、コマンドを組み立てて、コマンド入力欄に渡す事が。あとデバイスの取得とかも出来ます。

ドキュメントは、README.mdなどのmdファイルを表示出来ます。

環境変数は、各環境用(本番、テスト、開発等)の.envファイルを適用させる用です。

ポート監視は、起動ポートを追加監視させて、既に起動している他のプロセスがあればkillを試みたり出来ます。
プロセス名とコマンド引数が表示されるので、これで違うのが分かりやすくなっています。



Android設定、Androidリリース

Android設定は、applicationIdやkey.properties, bundle.gradle.ktsの表示と変数機能です。

Androidリリースは、リリースまでの説明を書いたmarkdownをチェック方式で進めて行けるものです。
アップロード前に大まかなチェックポイントをチェックしてくれたり。

Playwrightに対応しWeb経由でスナップショットを取得したり。

大体Flutterで編集でなく、それ以外で困る部分を網羅し(ようとし)たプロジェクトになっています。

まぁでもコンセプト段階ではあるんですが、良さそうなものを適当に放り込んだら膨らむだけ膨らんで収集が付かなくなって来たので、一応動くけど怪しい所はかなりあるなぁと言う段階になり、一旦ここで不完全なまま停止する形になりました。

1だけ単体で作った方が良かったんじゃ・・・?
と言う言葉で終了したいと思います。

aikawa

ローカルWebサーバを管理するローカルWebサーバが欲しい

何かトートロジーでタイトルが始まりましたが、プログラム作ってるとよくある奴です。
そして管理するWebサーバを管理するWebサーバを・・・。

前回は、Claude History Viewerを作りましたが、他にもローカルで動くプログラムを結構作ったりします。
ただ、毎回探して起動するのが面倒なんですよね。
ちょっと起動してないと、場所や名前を忘れたりするし。
そんなわけで、Windows起動時に立ち上がって管理出来るランチャーを作りました。
Claudeが。
https://github.com/lancard-aikawa/LocalLauncher

Windows専用設計なので、それ以外で動かすには調整が必要だと思います(特にランチャーの自動起動)。

登録方法

README.mdに従ってインストールしたら、さっそく前回作ったClaudeHistoryViewerを登録してみます。
右上の追加ボタンを押すと、登録ウィンドウが表示されます。
細かい説明はREGISTRATION.mdを読んで下さい。

※登録するコマンドは、フォアグラウンド実行する形式を推奨します。
ラッパー的にバックグラウンドに回して終了するタイプ等は、開始や終了を取得出来ない事があります。

ランタイム

ランタイムはraw以外では、コマンドへのpythonやbun runの記載を省略できます。
rawを選んで、コマンドにpython ./claude_chat_viewer.py 等としても構いません。

カスタム停止コマンド

Ctrl+C等で終わらず、別コマンドでプロセスを停止する場合は、ここに記載します。

(start.batやstop.batなどに分かれている場合)

また、起動と終了が異なる場合、DETACHEDモードをチェックして下さい。

作業ディレクトリ

エクスプローラ等からパスを取得して貼り付けます。

検出ボタンは、firebase.json等からポート番号を取得して自動で入力してくれます。

また、ここからの相対パスでコマンドを指定する事が出来ます。

起動方式

ブラウザ内起動で問題が起きる場合、ターミナルで起動を選択すると、ターミナルが立ち上がり実行されるようになります。
閉じると起動したものが終了してしまうので、うまく行かない時だけ、使うのが良いかも知れません。

起動してみる

保存したら、左のリストに表示されるので、起動ボタンを押します。
成功すると、停止ボタンを押せるようになり、ブラウザが立ち上がるタイプは自動的に表示します。
そうでない場合、ポート(:57080)をクリックすると、httpのlocalhost:portにアクセスします。

📁アイコンはエクスプローラでそのフォルダを表示します。
>_アイコンは、そのフォルダでターミナルを立ち上げます。
デバッグや起動後に色々したい場合に使えます。

右側にコンソールが表示されます。







これでClaudeHistoryViewerが立ち上がり、表示されました。

ランチャーを自動起動する

README.mdに書いてありますが、Windows起動時にランチャーを起動出来るようにするには、

bun run src/index.ts setup-autostart

で、大体起動後3分くらいで起動していました。

設定ファイルの保存場所とか

右上の設定ボタンを押すと、
・再読み込みは、設定ファイルがロード出来ない時などに押して強制読み込みします。
・設定フォルダを開くは、ファイルを保存してるフォルダを開けます。
・エクスポート、インポートはファイルを出力、入力出来ます。

ついでにログとかも保存されてるので、確認出来ます。

ブラウザ起動しないプロジェクトも

ポートは未入力でも良いので、Flutterのプロジェクトフォルダを登録して、flutter run -d chromeとかを登録しても良いです。

開発の蛇足

幾つか作った後、これを作るにあたり起動と各システムを1つに統合した、グループウェア的なのも考えたんですが。
疎から密結合になって行くし、重複する機能が必要だったとしても、単位ごとにプロジェクト化するのが手軽で、開発がまだ楽で、ポイントのみ接続するだけにした方が、今風な気もしますので。

それにClaudeのトークン無駄に使うし・・・。

haraguchi

Claude Codeのスキルを自作してPRレビュー確認を楽にした話

発端

開発メンバーがClaude CodeでPRのCodeRabbitレビューを確認しようとした時の話です。コメント数が多いPRだと、ghコマンドで取得したJSONが大きすぎてツール出力がファイルに退避され、そのファイルを読もうとするとまた大きすぎてさらに別ファイルに退避され……と連鎖して、動作が不安定になるという問題が起きていました。

結局Claudeから「ブラウザでGitHubのPRページを開き、具体的な指摘内容をコピペしてもらうのが一番確実です」と返されたそうです。

そこでClaude Codeのスキルで何とかできないかと思い、作ってみました。

Claude Codeのスキルとは

/review-pr 123のようにスラッシュコマンドで呼び出せるカスタムワークフローです。Markdownで手順を書いておくと、Claudeがその通りに動いてくれます。

作ったもの

PRレビューコメントの取得→正規化→表示を3つのシェルスクリプトに分けました。

scripts/
├── fetch_pr_comments.sh # GitHub APIから3系統のコメントを取得
├── normalize_pr_comments.sh # 重複排除・重要度分類 → triaged.json
└── render_pr_summary.sh # サマリ/全文/重要度別の表示

ポイントはClaudeに巨大なJSONを直接扱わせないことです。シェルスクリプト側でjqを使ってデータを整理し、Claudeには整理済みの結果だけを渡します。

重要度の自動分類

CodeRabbitのコメントには絵文字で重要度が付いています(🔴Critical、🟠Major、🟡Minor)。これをjqで読み取って自動分類し、まずサマリで全体像を見てから、Criticalだけ詳細表示……と段階的に確認できるようにしました。

コメントが多くても「まずCriticalの3件だけ見る」ということができます。

使ってみて

/review-pr 5と打つと、こんな感じでサマリが出ます。

サマリ表示後にClaudeが「Minorの詳細も確認しますか?」と聞いてくれるので、そこからCritical+Majorだけ詳細表示したり、全件の内容を確認したりと、段階的に掘り下げることもできます。

まだ十数件程度のコメントがあるPRでしか試せていないので、もっとコメント数が多いPRでも問題なく使えるかはこれから検証していくところです。

ただ、元々の問題は「APIレスポンスの巨大JSONがそのままClaudeのツール出力に流れてしまう」ことでした。シェルスクリプト側でファイルに保存・整理してからClaude側に渡すこのアプローチなら、コメント数が増えても耐えられるのではと期待しています。

Claude Codeのスキルは割と簡単に作れるので、今後も開発フローの中で自動化できそうなものを見つけたら、スキル化を試していきたいと思います。

aikawa

Claude CLIの会話履歴をチャット風に表示するプログラム

タイトルオンリーでも良いのですが、作りましたので少し書いておきます。

リポジトリはこちらになります。
https://github.com/lancard-aikawa/ClaudeHistoryViewer

画面はこんな感じで、左にフォルダ・セッションの一覧が表示され、セッションをクリックすると右にチャット風に表示されます。

※起動の仕方が分からなくても、Claudeに頼めば何とかしてくれるので楽で良いですね。

制限など

・Claudeが思考中に入力した内容は、履歴に保存されないため、表示されません。
(これは履歴に残さない方針なのか、残せない時が有るのか分かりませんが)
・compact等でファイルが分かれたり、そもそも前段が失われたりするかも知れません。履歴に残らないものがあるので、全てを再現は無理です。

・ユーザルートの~/.claude/フォルダを読み込んでいるだけなので、会話履歴フォルダを変更出来るようであれば、履歴一覧は表示出来なくなります。
・あと、GUIベースの会話は、サーバに保存されてるのか表示出来ませんでした、残念。

・Windowsでしか確認してないので、他OSでは調整必要かも。

設定 settings.json

settings.json.sample を settings.jsonにコピーして使います。
設定の分類は主に3つ。
・起動時のポートと、起動時にブラウザを立ち上げるか。
・折り返し表示の行数や文字数。
・何を表示するか、しないかを設定します。

ポートはデフォルトで余り被らないようなポートにしています。

折り返しについては特に言う事は無いので、表示するしないの項目について。

show_thinkingはClaudeのthinkingプロセスを表示します。

折り畳まれているのでクリックで展開出来ます。

show_tool_chipsはClaudeのコマンドやファイル読み込み等を表示します。

単純なやり取りを見たいなら、これらはfalseに設定するのが良いと思います。

会話のピン留め(スター)

ここは後で見返せるようにしておきたい、と言う箇所がある時に使えます。
チャット部分にフォーカスすると右下にアイコンが出るので、その中のスターを押します。

付くとこんな感じ。

ついでに右横のメモアイコンで何の会話だったかヒントを残しておけます。

ヘッダー部分のスターを押すと一覧で表示されます。

スターはセッションとメッセージ両方使えますので、セッション(一連の会話)ごとスターを付けたい場合は、チャット上部のアイコンから出来ます。

ちなみにプロジェクト(フォルダ)にも右クリックでスターを付けられますが、こっちはスターを表示するだけで、それ以外何も変わりません。

全文検索(力押し)

会話ファイルに対してフルスキャンをするだけなので、ファイル数が多かったりアクセスが遅かったりすると、非常に時間が掛かりますが、一応可能です。

あと設定のmax_search_resultはここで検索する最大数です。

共有したい

結果でなく過程を共有したいとか、会話がよく出来ているので、こ、これだよ我々が求めていたのはとか、他人に見せたい場合にHTMLまたはMarkdownとして出力出来ます。
※共有する時はどこかにアップロードが必要です。
まあ、大体はClaudeとの会話なんて誰にも見せたくないかも知れませんが・・・。

会話一覧上部の右💾を押すと、ダウンロード出来ます。Markdownを出力したい場合、HTMLでなくMarkdownに切り替えます。

HTMLはこんな感じで出力されます。

Markdownの方は、HTMLに比べかなり一本調子になるので、AIに読ませたり、mdしか表示出来ない環境での用途として使えるでしょうか。

要らないプロジェクトフォルダを表示しない

プロジェクト的に失敗したなと思うものや、不要になったフォルダはリストにあってもノイズになるので非表示にしておけます。

プロジェクトを右クリックで非表示にするを選びます。

再度戻したい場合は、非表示を表示を押し、右クリックで再表示を選びます。

他・・・?

他にも細かい機能はありますが、大体やりたい内容は説明出来たので、後は省略します。

aikawa

ClaudeのInteractive Visualsを使ってみた

Claudeでインタラクティブな画像を使えるようになったというので、使ってみました。






お任せ


まずは、お任せで作って貰い複利計算と、元素の周期表が出ました。

スライドさせると、金額が変わります。







元素周期表はタップで説明が出ます。

Caを選ぶとこんな感じ。

何か緩めの奴

本当に緩い感じのものでした。

太陽系を描画出来るか

オールトの雲までを描画して貰いました。

アステロイドベルトが無かったので、どの辺かを質問しました。

クリックすると、説明が出ます。

この例のように、色々と足りないもの、書かれないものも有ると思われます。
情報的に過不足なく、は難しそうですね。

銀河系は

ちょっと追加してみました。

何を書いたかも、情報の中にインジェクションされたり。

プログラマ向けは

これはコードを張り付けるとレビューしたり、パフォーマンス改善を提案してくれたりするようなものですが、APIを呼び出すのがNGらしく動きませんでした。

指摘すると、コードをそのまま貼り付ける形に。

今度は動きました。

笑が付いた。

他に何に使われるか

以下は、これまで見た例以外での使われ方について質問した時の内容です。

この会話で紹介した用途(学習・図解・ゆるいクイズ・コードレビューなど)以外だと、公式ブログで挙げられていた例や想定用途はこんな感じです。





ビジネス・データ分析系

  • 売上・収益のグラフをリアルタイムで更新して表示
  • 2人の候補者の履歴書を並べて比較
  • 企業データをダッシュボード形式で可視化

学習・教育系

  • 紙飛行機の折り方を図解でステップ表示
  • 歴史的な出来事のインタラクティブなタイムライン
  • 構造物の重量分布を矢印と図で説明

日常・エンタメ系

  • 天気を尋ねると天気ウィジェットが表示される
  • レシピを聞くと材料・手順が整形されたカードで出る
  • (記事の例だと)ティモシー・シャラメの炎上史をアウトレージメーター付きタイムラインで表示笑

ツール・作業支援系

  • Figma・Canva・Slackと連携してその場で操作
  • データを渡すとその場でグラフ化して毎日更新

要するに「テキストより図やインタラクションで伝えたほうが早いもの全般」が対象で、会話の流れに応じて自動的に出てきたり、「図にして」と頼めば何でも対応するという感じです。

どのClaudeで使えるか

Claudeのブラウザ版とモバイルアプリ版で使えるようですが、モバイルアプリでは一部動かなかったりするようです。

murave

データベースコンテナでのバックアップの話(Docker)

先週、NISA(一般社団法人長崎県情報産業協会)の『Pythonと Docker ではじめる Web アプリ開発&運用入門』という研修に参加しました。

その中でコンテナ上のデータベースの論理バックアップの話があり、ホストPCにdumpツールを入れて普通にバックアップすればOKという流れだったのですが、自分はこの考え方で面倒な状況に陥ったことがありましたので

「稼働中のデータベースコンテナと同じイメージ上のdumpツールを別コンテナ起動してバックアップした方がバージョンミスマッチを回避できるので良いと思います」

というフィードバックをしました。

講師の方には伝わっていたと思いますが、痛い目の話、実際の例、あとちょっとしたハマりどころについて書いておこうと思います。

痛い目にあった話

今回の研修はMariadbでしたし、出力がSQLスクリプトのdumpをする場合はそもそもあまり問題ないと思います。
自分の場合はPostgreSQLを使うことが多く、pg_dumpのバージョンミスマッチでdumpできなくなるということを複数回経験しています。

今回のようにホストPCにツールを入れる場合ですが、コンテナとホストPCのOSが同じとは限らない(というか違うことが多い)わけで運用していくうちにコンテナで稼働しているデータベースのバージョンとホストPCのツールのバージョンを合わせるのが面倒な状況になることが結構あります。

他の例としては、昔、開発環境として Laradock (https://laradock.io/) を使っていたのですが、Laradock ではデータベースコンテナと作業用のコンテナが別になっています。作業用のコンテナにデータベースのクライアントツールを導入して扱うという形になるのですが、コンテナ間のバージョンを合わせるのが面倒で早々に破綻しました。

PostgreSQLでの実施例

そんなわけで、データベースコンテナ(のイメージ)には対応したバージョンのクライアントツールが入っているんだからそれを使うのがいいんじゃない?というわけです。

自分の場合、コンテナまわりの操作は docker compose、データベースはPostgreSQLのことが多いので、その組み合わせでの例とさせていただきます。

データベースコンテナのサービス名が postgres 、データベースがsampledb、データベースユーザーがsampleuser、パスワードがsamplepassとします。

docker compose exec -T postgres bash -c "PGPASSWORD=samplepass pg_dump -Fc --no-acl --no-owner -h postgres -U sampleuser sampledb" > sampledb.dump
PGPASSWORDをコマンドラインで書いちゃってるのはあまり良くないですね。

リストアも同じようにできると思いますが、自分はエラーメッセージなど確認したいので一旦コンテナにdumpファイルをコピーしてコンテナ上で実施しています。

# ホストPC上
$ docker compose cp sampledb.dump postgres:/tmp/
$ docker compose exec postgres bash

# コンテナ上
root@440414c73f7a:/# pg_restore -U sampleuser -d sampledb /tmp/sampledb.dump
root@440414c73f7a:/# rm /tmp/sampledb.dump
素のdockerとcomposeのexecの違いでハマる前述の exec でオプションに -T (–no-TTYでもOK)を指定しているのに注目してください。これは疑似 TTY 割り当てを無効化するものです。
TTY有効だとpg_dumpからバイナリで出力されたファイルが破損します。

ややこしいのがdocker compose execだとTTY有効がデフォルト、docker execだとTTY無効がデフォルトだということです。

同じ目にあった人がいたので解決は早かったですが、気づかんて。

Why is pg_restore segfaulting in Docker?
https://stackoverflow.com/questions/63934856/why-is-pg-restore-segfaulting-in-docker

リストア時にセグメンテーションフォールトを喰らって気づくという悲劇もありえます。リストアのテスト大事ですね。

aikawa

VirtualBoxのUbuntuにFlutter開発環境を構築

FlutterをWindowsで使っていて、プロジェクトにshellコマンドとか絡んで来ると、結構上手く行かない事が。
CygwinとかWSLを使っても、駄目な時は本当に駄目というか、それ専用で動かす労力が必要と考えると(修正しても後で動かなくなる可能性が・・・)。

そんなわけで、shellがそのまま動かせるLinux+Flutter開発環境が欲しくなったので、ちょっとUbuntu上に作ってみます。

Ubuntuインストール・・・は飛ばして、Flutterから

VirtualBoxにUbuntuのインストールとVirtualBox Guest Additionのインストールは、特に苦労する事は無いので省略。

LinuxへのFlutterインストールは下記を参考に。
https://docs.flutter.dev/get-started/install/linux/android





1. 次のパッケージをインストール

sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

2. AndroidStudio用に以下をインストール

sudo apt-get install libc6:amd64 libstdc++6:amd64 lib32z1 libbz2-1.0:amd64

Android Studio

https://developer.android.com/studio/install?hl=ja#64bit-libs
こちらで64bit版は追加パッケージが必要となっていますが、殆どが見つからない状況なので、自分のは64bit版じゃないのかと思ったけどやはり64bit版だったので、無いものは無視しました。


UbuntuのFirefoxで以下にアクセスして、Linux版のAndroid Studioをダウンロード。
https://developer.android.com/studio?hl=ja





後はHomeのopt/以下に展開して起動。

tar xzf android-studio-*-linux.tar.gz
mkdir ~/opt
mv android-studio ~/opt/
cd
./opt/android-studio/bin/studio

起動後は、画面に従い設定を進めて行きますが、特に変更はなくデフォルトのままで良かったです。

以下のようにプロジェクトを選択する画面まで行ったら完了。

Visual Studio CodeとFlutter

同じようにUbuntuのFirefoxで https://code.visualstudio.com/download からdebインストーラをダウンロード。
クリックするとインストール画面になるので、Installを選択すればインストールされます。

起動後に、extensionでFlutterやDartの拡張機能を入れておきます。



Flutter本体はVisual Studio Code内からインストール出来るので、それを使います。
Ctrl+Shift+Pで上部に入力フォームが出るので、flutterと打つとプロジェクトを開始前にインストールが始まります。
展開先のフォルダ指定を聞かれるので、/home/vboxuser/opt 辺りを展開先に選び、右上ボタンを押します。
インストールは結構時間が掛かります。

終了後、flutter doctorを実施して、一応動くか確認。後でOKでない部分を潰して行きます。

~/opt/flutter/bin/flutter doctor

ついでに環境変数PATHにflutterを追加します(.profile辺りに)。

export PATH="$HOME/opt/flutter/bin:$PATH"

Android SDK Manager

ブラウザでダウンロード先を探す必要はなく、Android Studioからインストールします。
右上の…が縦になっているのをクリックして、下にあるSDK Managerを開きます。







SDK Toolsタブへ移動して、Android SDK Command-line ToolsとAndroid SDK Platform-Toolsを(チェックされてなければ)チェックしたら右下のApplyが押せるようになるので、Applyを押すとインストールが始まります。

~/Android/Sdk/cmdline-tools/latest/bin/sdkmanager が出来ているのを確認したら、環境変数ANDROID_HOMEを追加します。

export ANDROID_HOME=/home/vboxuser/Android/Sdk/

Google Chrome

FirefoxでChromeで検索してダウンロードしたら、インストールします。それだけ。

flutter doctorの不足分

まずはライセンスに合意します。

flutter doctor --android-licenses

次に、flutter doctorで不足となっているパッケージを入れます。今回はこんな感じでした。

sudo apt install clang cmake ninja-build pkg-config libgtk-3-dev

実はJDKも必要

これで一応Flutterは動くんですが、AndroidをビルドするためにはJDKをインストールする必要が有ります。それにFlutterの古いプロジェクトやライブラリを使っていると、JDKの古いバージョンでないとビルド出来ないとかがあるので、17と21を入れておきました。

sudo apt install openjdk-21-jdk
sudo apt install openjdk-17-jdk

環境変数JAVA_HOMEを追加します。17の場合は次のような感じ。

echo export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64/

最終的な環境変数

最終的な環境変数を追加した~/.profileファイルは以下のようになると思います。

export PATH="$HOME/opt/flutter/bin:$PATH"
export ANDROID_HOME=/home/vboxuser/Android/Sdk/
export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64/

Android端末をFlutterでデバッグに使うために

最初はAndroid Studioのエミュレータを動かそうとしたんですが、動いたものの途中でVMがエラーを吐いてしまったので、使えないと断念しました。

一応そのためにやった事として。
VM内でエミュレータを動かすには、VMがネステッドVT-x/AMD-Vを有効化している必要が有りますが、デフォルトだとチェックが出来ない状態でした。
自分の場合は、コア分離のメモリ整合性のオフ、リアルタイムスキャンのオフでチェックが出来るようになり、起動後のVMがミドリガメ状態にならなくなりました(右から3番目のアイコン、キーボード・マウスの次のVが、緑でなく青になっている)。

デバッグ用Android端末は実機で

じゃあもう実際の端末を使うしかなくなっちゃったよ、という事で、VMからUSBを認識する手順です。
Android端末は、USBでホストのWindowsに接続しておきます。
VM停止状態で、仮想マシンを選択>右クリックで設定を開き、USBタブへ移動。
USB3.0を選択して、USBデバイスフィルター右のアイコンで、上から二番目の+が付いてる奴をクリックすると、選択肢が出て来るので、Android端末の名前が出ているのをクリックすると、一覧に追加されます。

この状態で起動して、ゲストOSウィンドウ右下のUSBアイコンを右クリックして、対象のデバイスをクリックすると、チェックが付きます。

VSCodeでFlutterプロジェクトを開き右下のDeviceをクリックすると、一覧に端末が出るので選択します。これでデバッグにAndroid端末を使えるようになりました。

ただ、USBを認識出来ない、チェック時にUSBデバイスへの接続に失敗してしまう時も有るので、そんな時はWi-Fiで繋げます(その前にAndroid再起動するとかは試しますが)。

Android端末をWifi接続

・Android Studioを開き、Flutterプロジェクトを開きます。
・右アイコンのAndroid君がいる奴を選択し、Device Managerを開きます。
・WiFiアイコンを選択するとQRコードが出ます。
・Android端末で開発者向けオプションのワイヤレスデバッグをタップ(有効な状態で)すると、QRコードによるデバイスのペア設定が出るので、出ているQRコードを読み取ります。

その後失敗したとか出ましたが、何か追加されていたので、VSCodeでも選べるようになっていました。
こっちの接続は(wireless)と付いてます。

あとはサンプルプロジェクト等で、デバッグを開始して端末にアプリが表示されればOKです。

suganuma

MCPサーバ開発を試してみた

MCPサーバをPython SDKを使って、作ってみました。

プロジェクトの作成

まずテンプレートからプロジェクト作成します。

uvx create-mcp-server
プロジェクト名等を聞かれるので、適当に入力します。プロジェクト作成後、指示に従って以下のコマンドを実行します。

cd <プロジェクト名>
uv sync --dev --all-extras

テンプレートプロジェクトの考察

作成されたファイル「src/test_notes/server.py」を見てみると、以下のデコレータを持つ関数があります。

  • @server.list_resources()
  • @server.read_resource()
  • @server.list_prompts()
  • @server.get_prompt()
  • @server.list_tools()
  • @server.call_tool()

resource、prompt、toolの一覧を配列で返すのと、項目の実行結果を返す関数のようです。

このMCPサーバをClaudeデスクトップとCline、Claudeコードの3つのMCPホストで使ってみました。
ClaudeデスクトップとClineはJSONファイルによって設定します。Claudeコードは、以下のような感じで設定します。

claude mcp add-json test-notes '{"command":"uv","args":["--directory","/path/to/test-notes","run","test-notes"]}'
MCPホスト起動時にMCPサーバはバックグラウンドプロセスとして起動します。なおMCPホスト終了時にMCPサーバのプロセスは終了しません。その後にMCPホストを起動すると、二重にMCPサーバのプロセスが起動しています。
MCPサーバ起動時にtool等の一覧取得してるようです。

このMCPサーバはプロパティに名前と内容を持つノートを追加する機能です。
toolは、3つのMCPホストで利用できましたが、resourceとpromptは、Claudeデスクトップでしか利用できませんでした。ドキュメントを見てみると、ClineはpromptがNGでresourceはOK、ClaudeコードはpromptがOKでresourceはNGと書いてあるので、多分やり方が分からなかっただけだと思います。

なお、ドキュメントのクイックスタートでは、上記の実装方法とはちょっと違っていて、デコレータを作るクラスがServerではなく、FastMCPになっています。
FastMCPを使うと、Pythonの型ヒントとdocstringを使用してツール定義を自動生成するので、一覧を返す関数を作る必要がなくなります。関数のコメントから一覧を生成し返してくれます。
ただ、実際にFastMCPを使ってMCPサーバを作ってみましたが、ClaudeデスクトップとClaudeコードでは正常動作しましたが、ClineではMCPサーバ接続時にListToolsRequestが失敗し、うまくいきませんでした。ただ調べてみるとissueに上がっているので、そのうちClineでもできるようになると思います。

SSH接続するMCPサーバを作ってみる

Clineを使って作っていきます。LLMはclaude-sonnet-3.7です。

src/ssh_connect/server.pyはMCPサーバのサンプルコードです。
これを参考に、MCPでSSH接続できるコードを作って。
ホスト名等の設定は、MCP設定のenvで設定するようにして。
これだけで、ほぼ完成しました。
以下のtoolを作成してくれました。

  • connect
  • disconnect
  • execute
  • upload
  • download
  • list_files

paramikoを使ってSSHしています。頼んでもないのにsftpでファイルアップロード・ダウンロード・ファイル一覧のツールも作ってくれました。

ただ実際にClineで実行してみると、ClineはこのMCPの使い方が分からず、使えませんでした。
以下のプロンプトで修正依頼しました。

Clineで実行したら、以下のように使い方が分からないと言われた。

The user wants to establish an SSH connection. Based on the environment details, I can see that we're in a directory that appears to be an SSH connection tool for MCP (Model Context Protocol). The directory structure shows files like server.py in the src/ssh_connect/ directory and an example file ssh_example.py in the examples/ directory.
I should first understand what this SSH connection tool does and how to use it. Let me examine some of the key files to understand how to proceed.
First, let's look at the README.md file to get an overview of the project

毎回、README.mdを見ることなく、使えるようにしたい。
その結果、ツール一覧を返す関数を修正し、各ツールにdescriptionを追加してくれました。
追加した各ツールのdescriptionは、VSCのClineのMCP Serversに表示されていました。


これでClineはMCPサーバ起動してListToolsRequestすれば、このMCPサーバの使い方がわかるようになりました。
以下、実行結果です。

User:SSH接続して。設定は環境変数から取得して。
Assistant: Successfully connected to the SSH server at 192.168.1.35 on port 22 with username lanuser. The connection is now established and ready for use.
Is there anything specific you'd like me to do with this SSH connection? For example, I can:

Execute commands on the remote system
List files in a directory
Upload or download files
Take notes about what we find

User:実行してるプロセス一覧を表示して。
Assistant:現在のシステムで実行されているプロセスの一覧を表示しました。主なプロセスは以下のようになっています:

システム関連プロセス:

/sbin/init(PID 1)- システムの最初のプロセス
systemd-journald、systemd-udevd、systemd-resolved などのシステムサービス
カーネルスレッド([kthreadd]、[kworker]など)


ネットワーク関連:

NetworkManager(PID 369)
wpa_supplicant(PID 429)- 無線ネットワーク
sshd(PID 1425)- SSHサーバー


グラフィック関連:

Xorg(PID 1829)
gdm3(PID 1279)- GNOMEディスプレイマネージャ
gnome-shell(PID 2715)


ハードウェア関連:

nvargus-daemon(PID 1235)
nvfancontrol(PID 1038)- ファン制御
bluetoothd(PID 1034)- Bluetooth管理


コンテナ関連:

dockerd(PID 1617)
containerd(PID 1261)


ユーザーセッション:

現在のSSHセッション(PID 3458、3502)
bash(PID 3352)

システムは複数のユーザー(root、gdm、lanuser など)でプロセスを実行しており、GNOME環境が稼働していることが分かります。また、Docker関連のプロセスも実行されているため、コンテナ技術が使用可能な状態です。
作成したコードはこれです。
なぜかテストコード、インストールのシェルやHTMLのガイドまで作ってくれました。

MCPクライアントを作ってみる

これもClineで作ります。

@https://modelcontextprotocol.io/quickstart/client
上記を参考にpythonでMCPサーバに接続できるチャットボットを作って。
クライアントだけでなく、テスト用のMCPサーバを作成してくれましたが、
テスト用のMCPサーバが正常動作しなかったので、以下のプロンプトで修正をお願いしました。

@https://modelcontextprotocol.io/quickstart/server
のMCPサーバの作り方を見ると、test_server.pyとだいぶ違うようです。
FastMCPを使って作り直して。
テスト用のMCPサーバで動作確認後、先程作ったSSH接続のMCPサーバで確認します。

uv run client.py - --directory ~src/samples/test-mcp-server/ssh-connect run ssh-connect --env SSH_HOST=192.168.1.35 --env SSH_PORT=22 --env SSH_USERNAME=lanuser --env SSH_PASSWORD=****
結果、ほぼうまくいきましたが、時々何故か以下のようなエラーが出ます。

'ToolUseBlock' object has no attribute 'text'
機会があれば、MCPクライアントをSlackで作ってみたいと思います。

aikawa

Gemini Canvasを使ってみる

Geminiに、簡単な指示でコードやドキュメントを自動生成してくれるCanvasが出来たので、アプリっぽいのを作ってみました。
最終成果物はこちら。https://g.co/gemini/share/7ab5bd6ba55f

4択クイズを作る

プロンプトの下にあるCanvasにチェックをして、コードを書くように指示します。

作ったコードは実行するだけでなく、公開も可能です。

https://gemini.google.com/share/3214d0d3bd92

ジャンルを増やそうとして詰まる

次のように、世界史と日本史のジャンルを増やすよう指示しますが、動作しなくなりました。

何度か修正を指示しても駄目。
色々と見ていった結果、クイズデータのサイズが大きすぎて、コードが途中で切られていました。

現状は、コードサイズの制限が厳しく、ちょっと複雑な事や、データ量の多いものを作ろうとすると容量不足で駄目になるので、とても使えない感じです。

コードを直接編集もしてみたんですが、どうもコードサイズ自体に制限が有り、プレビューもひどい事に。

それでも修正を指示していくと、もうクイズと関係ないコードに。

それでも動かしたい

コードサイズに問題があるなら、もう一度ペーストして、これに対してminifyを掛けたらどうかと思いつきました。

これでどうにか動きましたが、より大きいサイズになればまた同じ問題に直面する事になります。実用的かと言われると、まだまだ全然、と言った感じです。

https://g.co/gemini/share/7ab5bd6ba55f


他にもアンドゥが思ったように動かないとか、履歴として残らない部分が有り、途中動いてたのが消えて動かないのだけが残った、なんて事も。
クイズの内容に間違いとかも有り得るので、実際は検証とかも必要になって来ると思いますので、そう考えると今の所は運が良ければ動く、程度に考えた方が良さそうです。