Dockerのコンテナで起動したFlutter( Web)をDevtoolsで表示

あまプロではFlutterで開発する事があります。
Flutterのデバッグではまったのであメログ。

Flutterは"Everything is a widgets" の思想の通り、全てがウィジェットで構成されています。
何か画面を作る際はそのウィジェットを組み合わせて作るのですが、画面を作り込んで行くとどうしてもウィジェットの中にウィジェットの中にウィジェット…の様に階層が深くなってしまいます。
ブラウザのデベロッパーツールで階層を確認しようとしても、Flutterの出力するHTMLはcanvas要素なので階層が解りません。
そうすると、AIには簡単に理解できても人間にはなかなか理解把握ができません。
常にAIを当てにして教えてもらっても良いのですが、Flutterには階層を表示する用のツールDevtoolsが予め備わってますので、それを利用して把握します。

開発機（ホスト）直下に開発環境を構築する場合は良いのですが、一般的にはDockerやLXDなどのコンテナを使ってコンテナ内に開発環境を構築します。
こうすると、コンテナを切り替えるだけで開発環境を切り替える事ができるので便利です。
しかし、コンテナを経由するとホスト直下でできてた事ができなかったり、設定を工夫する必要が有ります。
今回は下記の様に、ホストのブラウザからコンテナ上のFlutter（のウェブページ）へ接続して、更にDevtoolsで階層を確認してみます。

ざっくり概念図

先ずコンテナの作成ですが今回はDockerを使ってUbuntuのコンテナを作ってみます。
Dockerのインストールや基本操作は各種サイトやAIなどをご確認下さい。
既にFlutterを構築しているコンテナをお持ちの場合は そちらを使っても問題ありません。

docker run -p 35059:35059 -p 80:80 -d --name con-name ubuntu:latest

 こちらはcon-nameという名前のコンテナを作成するコマンドです。
イメージはUbuntuの最新版を使って、コンテナの35059ポートをホストの35059ポートへ割り当て、コンテナの80ポートをホストの80ポートへ割り当てています。
35059ポートはDevtools用になります。80ポートはウェブページ用のポートです。
ポートは変更しても構いません。

次にコンテナ内に入って、Flutterをインスールして、Flutterプロジェクトを作成します。
インストール方法は公式サイトのドキュメントをご覧下さい。

次にsocatパッケージをインストールします。

apt install socat

socatはポートフォワード（データ転送）ツールです。 

socatをインストールしたら、 バックグラウンドで実行しておきます。

socat TCP-LISTEN:35059,fork,reuseaddr TCP:127.0.0.1:36000 &

こちらは35059ポートへのアクセスを36000ポートへ転送しています。
何故転送が要るのかは後程。
バックグラウンドでなくても、別のターミナルからコンテナに入って
socat TCP-LISTEN:35059,fork,reuseaddr TCP:127.0.0.1:36000
しても良いです。お好みで。

では次にFlutterをWeb実行します。

flutter run -d web-server --web-hostname=0.0.0.0 --web-port=80 --dds-port=36000

こちらはFlutterをウェブサーバで実行して、0.0.0.0で総てのIPからアクセス可能にして、80ポートでアクセス可能にして、DertDevelopmentServiceを36000ポートに指定しています。
このdds-portを指定しないと、毎回ランダムなポートが割り当てられますので必ず指定します。
ここがややこしい所で、web-serverはweb-hostname=0.0.0.0を指定すると総てのIPからアクセス可能つまりコンテナ外のホストからアクセス可能になるのですが、ddsにはdds-hostname=0.0.0.0に相当するオプションがなく、ホストからアクセスできません。
ddsにアクセスできるのはコンテナ内の127.0.0.1のみになります。
そこで先程のsocatでホストからのアクセスを35059ポートで受けて、ddsの36000ポートへ転送するという手間が要ります。これでコンテナ内の127.0.0.1からddsへアクセスした事になります…面倒臭い。

以上で準備ができました。ホストのブラウザでhttp://127.0.0.1/へアクセスします。 

flutter createしただけのウェブページ

作成したプロジェクトのウェブページが表示されます。
ウェブページにアクセスがあると、コンテナのターミナルにDevtools用のURLが表示されます。

文字化けしてるのは御愛嬌

そのURLへホストのブラウザでアクセスするんですが、ポートを36000から35059へ置換してからアクセスします。
http://127.0.0.1:36000/Yk9MV84zNz0=/devtools/inspector?uri=ws://127.0.0.1:36000/Yk9MV84zNz0=/ws
なら
http://127.0.0.1:35059/Yk9MV84zNz0=/devtools/inspector?uri=ws://127.0.0.1:35059/Yk9MV84zNz0=/ws
にします。

Failed to connect the Dart tooling Deamonのエラーが出てますけど、表示されます

するとDevtoolsが表示されます。
Flutter Inspectorで階層構造が表示されます。

並べてみました

めちゃ解り易い。

今回の環境は 

Windows11 25H2
firefox --version
Mozilla Firefox 148.0
docker --version
Docker version 29.2., build a5c7197
lsb_release -a
No LSB modules are available.
Distributor ID:    Ubuntu
Description:    Ubuntu 24.04.4 LTS
Release:    24.04
Codename:    noble
flutter --version
Flutter 3.41.5・channel stable・https://github.com/flutter/flutter.git
Framework・revision 2c9eb20739 (31 bours ago)・2026-03-17 6:14:01 -0700
Engine・hash c1db59d880ca73dd86cec08a6663f287522d9f39 (revision 052f31d115) (2 days ago)・2026-03-17 20:29:11
Tools・Dart 3.11.3・Devtools 2.54.2
dart --version
Dart SDK version: 3.11.3 (stable) (Tue Mar 17 01:06:16 2026 -0700 on "linux_x64"

でした。 

DockerでROS2のGazeboを起動する方法について

 あまプロではROSのGazeboを使う事が有ります。
インストールがややこしかったので、あメログ。

 Windows10上のDockerのコンテナにUbuntuを構築して、Ubuntu上でGazebo Simを起動してみます。

1. いきなり端折りますが、Docker Desktopをインストールして、WSLを有効にしておいて下さい。 
   インスートラをダウンロードして、インストールするだけなので、そない難しくないと考えます。 
   既にインストール済みの方は最新版のDockerDesktopとWSLにアップデートして下さい。
   WSLのアップデートは
   

   wsl --update

   
   で行えます。
2.  WindowsStoreでUbuntuをインストールする  Ubuntuインストール時にユーザとパスワードを求められるので、適当に決めて入力する。
   
   
   
   
   
3. スタートメニューにUbutu24.04 LTSが追加されるので、クリックしてターミナルのUbuntuを起動する。
   
   
   
   
   
4. Ubuntuターミナルで設定変更する

   sed "s/\"credsStore\": \"desktop.exe\"//g" ~/.docker/config.json

5. UbuntuターミナルでROSのコンテナを作成する
   

   docker run --name ros2 -d  --env="DISPLAY=:0"   --env="WAYLAND_DISPLAY=$WAYLAND_DISPLAY"   --env="XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR"   --env="QT_X11_NO_MITSHM=1"   --env="LIBGL_ALWAYS_SOFTWARE=1"   --volume="/tmp/.X11-unix:/tmp/.X11-unix:rw"   --volume="/mnt/wslg:/mnt/wslg:rw"  --device=/dev/dri:/dev/dri  ros:jazzy-perception

   
   　もしドライバ周りでエラーが発生する場合は--deviceを削除した下記でコンテナ作成して下さい。
   

   docker run --name ros2 -d  --env="DISPLAY=:0"   --env="WAYLAND_DISPLAY=$WAYLAND_DISPLAY"   --env="XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR"   --env="QT_X11_NO_MITSHM=1"   --env="LIBGL_ALWAYS_SOFTWARE=1"   --volume="/tmp/.X11-unix:/tmp/.X11-unix:rw"   --volume="/mnt/wslg:/mnt/wslg:rw"  ros:jazzy-perception 
   
   ros用コンテナが作成されます。

   
   
   
6. Dockerの設定⚙のResourcesのWSL integrationでUbuntu 24.04を有効にする
   
   
   
   
   
7.  Ubuntuターミナルでコンテナを起動する
   

   docker start ros2

8.  Ubuntuターミナルでコンテナに入る
   

   docker exec -it ros2 bash

9.  UbuntuターミナルでGazeboをインストールする
   

   sudo apt update && sudo apt install -y ros-jazzy-ros-gz

10. Ubuntuターミナルでros設定
    

    source /opt/ros/jazzy/setup.bash
    echo "source /opt/ros/jazzy/setup.bash" >> ~/.bashrc
    source ~/.bashrc

11. UbuntuターミナルでGazebo起動
    

    ros2 launch ros_gz_sim gz_sim.launch.py gz_args:='-r empty.sdf'

    
    そうすると、コンテナのGUIがホストのディスプレイに表示されて上記の様にWindowsのアプリの様に表示されます。
    あんまないやろうけど、コンテナのGUIをホストで表示したい場合にはこれでできます。

GeminiCLIでウェブサイトを作成する方法について

 あまプロでは授業でAIを使う事が有ります。
先日、無料プランでGeminiCLIの環境を構築してウェブサイトを作成したので、あメログ。

先ず、LXDでGeminiCLI用のコンテナを作成します。
ホスト（パソコン）に直接GeminiCLIをインストールしても良ぇけど、アンインストール時にあっちこっち削除して回るのが面倒なので、コンテナ内にインストールします。

LXDが未インストールの場合は

#インストール
sudo apt install lxd
#初期化
lxd init

を実行します。

GeminiCLIの利用には無料プランであってもGoogleアカウントが要りますので、作成しておいて下さい。
アカウントの作成方法は…Geminiに聞こう（最近は携帯番号が要るみたいです）。 

LXDでコンテナを作成します。

# イメージはお好みで何となくアルパインの最新版
lxc init images:alpine/edge container-name
#コンテナが作成されている事を確認
lxc list
#コンテナの5173ポートをホストの5173へ転送
sudo lxc config device add container-name http proxy listen=tcp:0.0.0.0:5173 connect=tcp:127.0.0.1:5173 bind=host
#転送設定確認
lxc config device show container-name
#コンテナ起動
lxc start container-name
#コンテナにログイン
lxc exec container-name ash
#アップデート
apk -U upgrade
#nodeとnvmをインストール
apk add nodejs nvm
#バージョン確認
node --version
npm --version
#GeminiCLIインストール
npm install -g @google/gemini-cli
#GeminiCLI起動
gemini
#初回起動時に認証を求められるので、1. Login with Googleを選択します
#選択するとめっちゃ長いURLが表示されますのでそれをコピーして、ホストのブラウザでアクセスします。
#（複数アカウントを持っている場合）どのアカウントを使います？許可します？と訊かれるので、許可します。
#ブラウザにちょっと長い認証コードが表示されるので、コピーしてコンテナのターミナルに貼り付けて、認証完了です
#完了するとこんな感じで表示されます。

表示は英語ですけど、日本語も通じます。
日本語でプロンプト（指示とか質問とか）を入力すると、作業や回答を返してくれます。
例えば

おしゃれなプログラミング教室のウェブサイトを作成して下さい。

と入力すると、カレントディレクトリにウェブサイトを生成してくれます。
生成作業中にセキュリティ上の確認が要る場合は、都度回答する必要があります（基本、日本語で訊いてきます）。
例えばウェブサイトを作成する際にBootstrapやReactやViteを使って良いか？等です。

取り敢えず、全部の確認に許可で答えると、２〜３分程で下記のファイル群が生成されました。 

.
├── index.html
├── src
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

サイトをビルドする為にnpmコマンドを実行する必要があるのですが、GeminiCLIはコマンドを実行できなかったので、GeminiCLIを終了します（これは設定で回避できるかも）。
GeminiCLIを終了するには、Ctrl+Dを２回押し（または/quit）です。
終了時にどれだけGeminiCLIを利用したかが表示されます。
無料プランには限りが有りますので、ご注意を。

GeminiCLIを終了後、手動で下記コマンドを実行します。
というか、GeminiCLIが「実行できなかったんで、自分で下記を実行して」と出力しています。

#必要なパッケージインストール
npm install
#ビルドしてウェブサーバ起動　外部からのアクセスを許可
npm run dev -- --host 0.0.0.0

では最後にホストのブラウザで確認します。 
http://localhost:5173/

ちゃんと生成されてますね。
レスポンシブデザイン（スマホ表示）も問題なさそうです。

以上、GeminiCLIでウェブサイトを作成する方法でした。

最後に使用したコンテナを削除して終了（継続して使用する場合は不要）です。

#コンテナ停止
lxc stop container-name
#コンテナ削除
lxc delete container-name

Ubuntuでモニタをミラーリング・キャスティングする方法について

あまプロではパソコンのOSにUbuntuを使っています。

UbuntuはオープンソースのOSで、誰でも自由に使う事ができます。

先日、さんとしょに設置されてますAladdinのプロジェクタにUbuntu22.04を接続する際に、けっこうハマりましたのであメログ。

先ず、プロジェクタに無線接続（ミラーリングとかキャスティングとか呼ばれてます）するにはMiracast方式を用います。
UbuntuではGNOMENetworkDisplaysというパッケージがありまして、こちらを使います。
只、こちらのパッケージは絶賛開発中でして、未だUbuntuの標準のリポジトリには取り込まれていません。
自力で数多有るパッケージの依存関係を解決して、ビルドして、インストールできない事もないんですが、結構難しいです…自信がある方は是非どうぞ。
なので、今回はFlatpakというUbuntu標準のパッケージには未だ取り入れられてへんけど、先進的なパッケージを使える仕組みを利用します。

０．プロジェクタとUbuntuを同じネットワーク（恐らくWi-Fi）に接続します。
１．先ずはUbuntu側の設定を行います。
　　Flatpakをインストールします。
　　手順は公式サイトに掲載されています。
　　ターミナルで
　　sudo apt install flatpak
　　sudo apt install gnome-software-plugin-flatpak
　　flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
　　flatpakとそのプラグインをインストールして、aptのリポジトリ一覧にflatpakリポジトリを追加します。
２．設定を反映する為に再起動します。
３．再起動後に、FlatpakでNetworkDisplaysをインストールします。
　　ターミナルで
　　flatpak install flathub org.gnome.NetworkDisplays
４．NetworkDisplaysを起動します。
　　ターミナルで
　　flatpak run org.gnome.NetworkDisplays


　　Network Displaysのアプリが起動します。
５．共有ボタンを押下します。

　　接続可能なデバイスが一覧表示されます。
　　Ubuntu側の設定は一旦これで終わりで、次にプロジェクタ側の設定に移ります。
６．プロジェクタでMiracastの接続を行います。ここではAladdinの例ですが、他のプロジェクタでも殆ど同じやと考えます。
　　Aladdinの場合は、ホームメニューでシステム環境設定を押下します。

７．その他の設定を押下します。

８．Miracastを押下します。

９．Aladdinが接続待機になります。

１０．数秒待つと、Ubuntu側の接続可能なビデオデバイスにAladdinが表示されます。

１１．Aladdinを押下します。

　　接続中になります。
１２．数秒待つとAladdin側に接続への招待が表示されますので、同意するを押下します。

１３．数秒待つと、接続され配信中になります。

１４．以上で映像はプロジェクタから出力される筈です。
　　　偶にエラーになる場合がありますので、何度か試してみて下さい。
　　　致命的なエラーの場合はターミナルにログが出力されますので、検索してみると何か解決方法が見付かるかもしれません。

１５．NetworkDisplaysの初期設定では音声の出力がパソコンになっているので、プロジェクタから出力する様に切り替えます。
　　システム設定のサウンドでNetwork-Displaysを選択します。

これで、Ubuntuの映像と音声がプロジェクタから出力される様になりました。
多分、他のディストリビューションでも応用できると考えますので是非ご活用を〜

Scratchで使用しているブロックの数を数える方法について

 あまプロではScratchでプログラミングを教えています。

ScratchはMITが開発したビジュアルプログラミング言語で、どなたでも無料で利用可能です。
１つの機能がブロックで表現されており、視覚的直感的にプログラミングを行う事ができ、あまプロでも重宝しています。

スクラッチはプログラムの単位を「作品」と呼んでいるのですが、ふと１つの作品内で幾らブロックを使用しているのかが気になりました。
Scratchでは簡単に調べる方法は提供されてへん様でしたので、あメログ。

先ず、スタートすると音が鳴るだけの簡単な作品を作ってみました。

ステージに２ブロック

続けて、ねこに３ブロック

この作品をメニューのファイル > コンピュータに保存する、で保存します。

すると、作品名.sb3というファイルがダウンロードできます。

 この*.sb3はzip圧縮されているので、unzipなどで解凍します。

すると、下記の様にproject*.json、*svg、*.wavが生成されます。

 *.svgがコスチュームで、*.wavが音になります。
ブロックについてはproject.jsonに記述されています。

エディタなどでproject.jsonを開いてみると、JSON形式で色々と載っています…。
これだと何の事か解りませんが、よくよく見てみると、opcodeというキーがブロックを表してそうです。

opcodeと仮定して、opcodeの数を数えてみましょう。

grepコマンドとwcコマンドで数える事ができます。

ステージ数１＋スプライト数１＋ステージのブロック数２＋ねこのブロック数３＝７
なので、合ってそうです。

以上、スクラッチでブロック数を数える方法でした。

美味しい珈琲屋さんを見付けたら☕

あまぷろの仕事ではないですが、個人的にプログラミング教室間の移動はチャリ🚲なので、色々な地元のお店に遭遇する機会があります。
そして、美味しい珈琲屋さんを見付けたら、必ず地図に載せる様にしています。
そんな珈琲と地図好きには堪らない記事になります。

地図のご紹介

地図といえば、皆さんOpenStreetMapをお使いの事と考えます。
大抵の商用の地図サービスは自由にスクリーンショットをウェブにアップロードできへんので、共有せぇへんよね？あれもこれも有名所を色々探してみたけど、どれもあかんと明記されています。
オープンストリートマップは©OpenStreetMap contributorsのクレジットさえ明記すれば、無料で無断でシェアし放題なんで、良く使わせてもろてます。
地図職人（マッパー）に感謝。
只この地図、美味しい珈琲屋さんが載ってへん場合が多いです。商用地図に載ってへん場合もあるけど、頻度が段違い。
何故ならOSMは地図職人達が地道に描いた地図データの集合体プロジェクトやからです。
なもんで、自由に見れるし、共有できるし、描けるし、変えれるし…ほんま自由なオープンデータの地図になります🗺

地図の描き方

ＯＫ👍地図の事は解った。
ほな、どないして描くねんと言いますと。
こちらからユーザ登録して、左上の編集ボタンをクリックするだけです。

スマホは画面が小さ過ぎるので無理です。タブレットは遣った事ないけど、多分できる筈。
上記編集ボタンをクリックすると、編集モードとなります。
では一例として、ここに美味しい珈琲屋さんが在ります。

地図に載ってないので、載せましょう。

現地に行ったのであれば、ついでに写真を撮りましょう。
（何でも良いのですが）私はいつもKartaViewという写真共有サービスを利用しています。
スマホアプリが在りますので、是非インストールしてご利用下さい。
撮った写真はこちらになります。

ちなみに美味しい珈琲はこちら☕

写真を撮ってアップロードして、暫く（２〜３分）待つと、OSMの編集画面から表示できる様になります。
初期設定ではKartaViewの写真は表示されませんので、サイドメニューの「写真の重ね合わせ」で「KartaView」にチェックを付けて下さい。

地図上に青いピンが表示されますので、クリックすると左下に先程アップした画像が表示されます。
写真を撮った場所やカメラの向きも判るので便利です。
次にポイント（ノード）をクリックします

追加したい地図上の場所をクリックします。
次にそのポイントが何を表すかを選択します。種類が多いので、喫茶店やカフェで検索すると良いです。

これだけでも構へんのですが、店名などの他の情報（タグ）があれば追記します。

詳しくはwikiをご参照下さい。
今回は14のタグを記入してみました。元ネタは許可を頂いたお店の名刺などになります。

残念ながら、現在のOSMのタグでは珈琲の抽出方法を表すタグがありません。サイフォン式なのか、ドリップ式なのか、フレンチプレス式なのか、インスタントなのか… が地図に載らないという意味です。
しかし、タグは提案する事ができ、議論の上、採用されれば堂々と載せる事ができます。かなり上級者向けになりまずか、興味がある方は挑戦してみて下さい。
brew=dripとかbrew=siphonとかbrew=frenchpressとか載せれる日が来るかもしれません。

 では、保存しましょう。右上の保存ボタンをクリックして

何か適当な文章を入力して下さい。

コメントは無しでも構いませんが、「伊丹のミネラルムールを追加」など解り易い文章にするのが一般的です。

最後にアップロードボタンをクリックすると、早ければ数分後に地図に反映されます。
せっかちな方はブラウザのスーパーリロード（ Ctrl + Shift + R）を行って下さい。

お目出度う御座います。これで新たな珈琲屋さんが地図に載りました。

色々な楽しみ方

如何でしたでしょうか？
この様にして地元の魅力的なお店を地図に載せて楽しむ事ができます。
他にも未開の地に道路や建物を追加したり

overpass turboで市内の喫茶店を検索してみたり。
（遣った事ないけど）位置ゲーで遊んでみたり。
ネットにアップしたり印刷して配ってみたり…などなど自由に楽しめますので、是非美味しい珈琲片手に楽しんでみて下さい。

 あまプロではIRISを用いたシステム開発を行う事が有ります。
IRISの開発ではまったんであメログ。

IRISのSQLで当日日付のYYMMDD形式の文字列を取得するにはCONVERT( )とNOW( )（またはCURRENT_TIMESTAMP）を使う

CONVERT( CHAR, NOW( ), 12)
231204

YYYYMMDD形式の場合は

CONVERT( CHAR, NOW( ), 112)
20231204

 

ちなににTO_CHAR( )で

TO_CHAR( NOW( ), 'YYYYMMDD')

でもできるが

TO_CHAR( NOW( ), 'YYMMDD')

はできへん…

なもんで、統一したいならCONVERT( )