WindowsのDockerでFlutter for Web（開発環境構築）

https://qiita.com/toshibe/items/e05ebe152e579ad39a58

で、色々問題がでてくるけど、

Flutter

https://qiita.com/tiri/items/5ad8d173df2c3823a265

の記載の内容で対応できました。

動かし方

1. Dockerfileからイメージを作成する

docker-compose build

 2. イメージからコンテナを作成し、起動する

docker-compose up -d

 3. 起動したコンテナに入る

docker exec -it flutter bash

4. フラッターアプリを作成する

cd workspace
flutter create .

5. サーバーを立ち上げる

flutter run -d web-server --web-port=${WEB_SERVER_PORT} --web-hostname 0.0.0.0

さて、これでサンプルは動かせたんだけど、さて、コーディングはどうやるのかな？

docker exec -it flutter bash でシェルに入った後、

root@0c0fd167601e:/usr/local# ls
Android bin etc flutter games include lib man sbin share src workspace
root@0c0fd167601e:/usr/local# cd workspace/
root@0c0fd167601e:/usr/local/workspace# ls
README.md android ios linux pubspec.lock test windows
analysis_options.yaml build lib macos pubspec.yaml web workspace.iml
root@0c0fd167601e:/usr/local/workspace# cd test
root@0c0fd167601e:/usr/local/workspace/test# ls
widget_test.dart ← これがターゲットのソース(だと思う)

root@0c0fd167601e:/usr/local/workspace/test#more widget_test.dart

// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility in the flutter_test package. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:workspace/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(const MyApp());

    // Verify that our counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the '+' icon and trigger a frame.
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // Verify that our counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

という記載が見える。
とりあえず、ここを書き換えれば、最初のアプリが作れるのかな、とアタリを付けています。

上記間違いでした。

vscodeで直接dockerコンテナの中を編集できるので、(これについては、どこかで話ます)、ターゲットは、lib/main.dartでした。

で、ちょっと変えて動くかどうか調べてみました。

という変更をして、

flutter run -d web-server --web-port=${WEB_SERVER_PORT} --web-hostname 0.0.0.0

を実施してみました。

で、http://192.168.0.23:8888 (192.168.0.23: DockerコンテナのあるPC)で、ちゃんと変更されているようです。

とりあえず、これで、改造するポイント分かりました。

その後、このlib/main.dartを
https://zenn.dev/ryouhei_furugen/articles/583b1003ebcfc1の
(Flutterのサンプル カウンターアプリ)にさしかえさせて頂きました。

問題なく動きました。

https://docs.flutter.dev/get-started/test-drive

ざっくり、翻訳してみておく

1. How to create a new Flutter app from a sample template.
   サンプルテンプレートから新しいFlutterアプリを作成する方法。
2. How to run the new Flutter app.
   新しいFlutterアプリの実行方法。
3. How to use "hot reload" after you make changes to the app.
   アプリに変更を加えた後に「ホットリロード」を使用する方法。

These tasks depend on which integrated development environment (IDE) you use.
これらの作業は、どの統合開発環境（IDE）を使うかによって異なる。

• Option 1 explains how to code with Visual Studio Code and its Flutter extension.
  オプション1では、Visual Studio CodeとそのFlutter拡張機能を使ってコーディングする方法を説明する。
• Option 2 explains how to code with Android Studio or IntelliJ IDEA with its Flutter plugin.
  オプション2では、Android StudioまたはIntelliJ IDEAのFlutterプラグインを使ってコーディングする方法を説明する。Flutter supports IntelliJ IDEA Community, Educational, and Ultimate editions.
  FlutterはIntelliJ IDEA Community版、Educational版、Ultimate版をサポートしています。
• Option 3 explains how to code with an editor of your choice and use the terminal to compile and debug your code.
  オプション3では、好きなエディターを使ってコードを書き、ターミナルを使ってコンパイルとデバッグを行う方法を説明する。

Select your preferred IDE for Flutter apps.
Flutterアプリに適したIDEを選択する。

• Visual Studio Code 
• Android Studio and IntelliJ
• Terminal & editor

Create your sample Flutter app

#

1. Open the Command Palette.
   コマンドパレットを開く。Go to View > Command Palette or press + Shift + P.
   表示 > コマンドパレットに移動するか、+ Shift + Pを押します。
2. Type flutter
fluterとタイプする
3. Select the Flutter: New Project.
   Flutter: New Projectを選択する
4. When prompted for Which Flutter Project, select Application.
   どのFlutterプロジェクトかを聞かれたら、Applicationを選択する。
5. Create or select the parent directory for the new project folder.
   新しいプロジェクトフォルダの親ディレクトリを作成または選択します。
6. When prompted for a Project Name, enter test_drive.
   プロジェクト名の入力を求められたら、test_driveと入力する。
7. Press Enter.
   Enterを押す。
8. Wait for project creation to complete.
   プロジェクトの作成が完了するまで待つ。
9. Open the lib directory, then the main.dart.
   libディレクトリを開き、次にmain.dartを開く。To learn what each code block does, check out the comments in that Dart file.
   各コードブロックが何をするのかを知るには、そのDartファイルのコメントをチェックしてほしい。

The previous commands create a Flutter project directory called test_drive that contains a simple demo app that uses Material Components.
先ほどのコマンドでtest_driveというFlutterプロジェクトディレクトリが作成され、Material Componentsを使ったシンプルなデモアプリが含まれる。

Run your sample Flutter app
サンプルのFlutterアプリを実行する

#

Run your example application on your desktop platform, in the Chrome web browser, in an iOS simulator, or Android emulator.
デスクトップ・プラットフォーム、Chromeウェブ・ブラウザ、iOSシミュレータ、Androidエミュレータでサンプル・アプリケーションを実行してください。

1. Open the Command Palette.
   コマンドパレットを開く。Go to View > Command Palette or press + Shift + P.
2. Type flutter
fluterとタイプする
3. Select the Flutter: Select Device.
   Flutter: New Projectを選択するIf no devices are running, this command prompts you to enable a device.
   実行中のデバイスがない場合、このコマンドはデバイスを有効にするよう促します。
4. Select a target device from Select Device prompt.
   Select Deviceプロンプトからターゲットデバイスを選択します。
5. After you select a target, start the app. Go to Run > Start Debugging or press F5.
   ターゲットを選択したら、アプリを起動する。Run > Start Debuggingに進むか、F5を押す。
6. Wait for the app to launch.
   アプリが起動するのを待つ。You can watch the launch progress in the Debug Console view.
   起動の進行状況は、デバッグコンソールビューで確認できます。

After the app build completes, your device displays your app.
アプリのビルドが完了すると、デバイスにアプリが表示されます。

Try hot reload
ホットリロードを試す

#

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state.
Flutterは、ステートフルホットリロード（Stateful Hot Reload）、つまりアプリを再起動したりアプリの状態を失ったりすることなく、実行中のアプリのコードをリロードする機能によって、高速な開発サイクルを提供します。

You can change your app source code, run the hot reload command in VS Code, and see the change in your target device.
アプリのソースコードを変更し、VS Codeでホット・リロード・コマンドを実行すれば、ターゲット・デバイスで変更を確認できる。

1. Open lib/main.dart.
   lib/main.dartを開く。
2. Change the word pushed to clicked in the following string. It is on line 109 of the main.dart file as of this writing.
   以下の文字列のpushedをclickedに変更する。これを書いている時点では、main.dartファイルの109行目にある。

   Original	New
   'You have pushed the button this many times:' ,	'You have clicked the button this many times:' ,

3. Save your changes: invoke Save All, or click Hot Reload  .

Your app updates the string as you watch.
変更を保存する：すべて保存を実行するか、ホットリロードをクリックします。

https://suumo.jp/article/oyakudachi/oyaku/chintai/fr_room/tsuukinjikan_heikin/

https://toyokeizai.net/articles/-/140017?display=b

https://prtimes.jp/main/html/rd/p/000000286.000000624.html

カート、バスのコストを減らすテスト用に、tomioka_db_c_cost を作成

ebata@DESKTOP-P6KREM0 MINGW64 ~(こっちのシェルを使うこと。パイプを使うため)>createdb -U postgres -h 192.168.0.23 -p 15432 tomioka_db_c_cost
Password:

ebata@DESKTOP-P6KREM0 MINGW64 ~(こっちのシェルを使うこと。パイプを使うため)
$ pg_dump -U postgres -h 192.168.0.23 -p 15432 -Ft tomioka_db_c | pg_restore -U postgres -h 192.168.0.23 -p 15432 -d tomioka_db_c_cost

富岡地区のバス等の平均速度の算出

歩行に対するバスの歩行比 = 0.18

歩行に対するカートの歩行比 = 0.45

は、まだ未設定

バスは、平均速度17.9km/hくらい

カートは、平均速度7.2km/hくらい

高低差が富岡地区と程度の1.3kmをテスト歩行 / 24分
歩行は3.25km/hくらい

歩行に対するバスの歩行比 = 0.18

歩行に対するカートの歩行比 = 0.45

-----

-o_lon 139.6295688 -o_lat 35.3660511 -d_lon 139.6270944 -d_lat 35.3636816

IN → IN

-o_lon 35.37104902612216 -o_lat 139.62783634404897 -d_lon 35.36679082984578 -d_lat 139.61990743230746

-o_lon 35.36370323013283 -o_lat 139.62581182970706 -d_lon 35.367220880193656 -d_lat 39.61545727502963

IN → GW → OUT(杉田駅)

-o_lon 35.370129658663075 -o_lat 139.61807940648757 -d_lon 35.38234353115761 -d_lat 139.6169048139053

OUT(金沢文庫) →  GW → IN

-o_lon 35.34242787509463 -o_lat 139.62188682227753 -d_lon 35.36560662891383 -d_lat 139.6284518375501

GWを解さないケースは考えなくてもいいか？

参考用IN座標
35.36806794078537 139.62553044883524
35.368460473893506 139.61904786225577
35.37428653450456 139.62427422430005
35.36540598985192 139.62776680008463
35.369043463845195 139.61565072257753
35.36750734475584 139.62092894663886
35.37074115832766 139.6246677711019
35.36402430298291 139.6278705652247
35.364924425352065 139.61977652223922
35.36501131116549 139.62219084352495
35.36948676753484 139.62847423044224
35.36389080286156 139.62455038923105
35.37062388152758 139.62152611976026
35.369585262158225 139.6169533355986
35.36355717334552 139.62111006291772
35.36659904745299 139.62566195874086
35.37257710543914 139.62647362169034
35.3680835911364 139.6229746670008
35.36975330554079 139.6237745742663
35.361949806922695 139.6228796060347
35.369835300106416 139.61538425327674
35.375224252194165 139.62127037638513
35.3682225046029 139.6248646383888
35.36790771075679 139.61695177096536
35.372372595731235 139.6240863659352

現時点が、これがベースとなる座標 (2024/07/07)

(図面)F:\しゅらばしゅう\有吉先生データ\富岡エリア_座標.pptx
(コード) C:\Users\ebata\tomioka_school\src\trip_school\main.go

Polygon使う時の注意点(赤丸に注意: db.Query()で簡単にエラーにされる

// C:\Users\ebata\tomioka3B\src\others\main35.go
/*
	実験用の座標を作る
	修正後 (富岡西5丁目を削除し、富岡6丁目の下1/4を削除)
*/

package main

import (
	"database/sql"
	"fmt"
	"log"
	"regexp"
	"strconv"

	_ "github.com/lib/pq"
)

func main() {
	// 取り扱うDBによってノード番号が代わるので注意すること
	// 例えばtomioka_db_c とtomioka_dbは全く異なる
	db, err := sql.Open("postgres",
		"user=postgres password=password host=192.168.0.23 port=15432 dbname=tomioka_db sslmode=disable")
	if err != nil {
		log.Fatal("OpenError: ", err)
	}
	defer db.Close()

	// 修正後のターゲットの富岡地区 (富岡西5丁目を削除し、富岡6丁目の下1/4を削除)

	query := `
	SELECT st_asText(
		ST_GeneratePoints(
			ST_GeomFromText(
				'POLYGON((
					35.36394967 139.61846500,
					35.36216810 139.61890850,
					35.36170465505306 139.6220415552594,
					35.36163108058289 139.62334070015595,
					35.363117271878345 139.62314221968566,
					35.36335187635167 139.62481739887647,
					35.36310056060587 139.62485183402688,
					35.36376860001917 139.6288186562702,
					35.36420166714637 139.6297897196359,
					35.36754482323006 139.6296024603071,
					35.37126945661188 139.62886244945108,
					35.37375189636854 139.62615207124352,
					35.37464657021711 139.623189740366,
					35.37574882601201 139.6213765671167,
					35.37527643251494 139.6210117866997,
					35.37306314467156 139.6217413475337,
					35.37268696718477 139.62013202216457,
					35.37018828750506 139.61840497406456,
					35.370782160278 139.61705458898427,
					35.36947068533102 139.61641732865053,
					35.370596575495014 139.61476348635583,
					35.37078029225879 139.61403393574466,
					35.36864433631068 139.61438212951467,
					35.36653571408147 139.61453772192408,
					35.36394967 139.61846500
				))'
			),
		25)
	)
	`
	rows, err := db.Query(query) // この25が生成する乱数座標

	if err != nil {
		log.Fatal(err)
	}
	defer rows.Close()

	var msg string

	for rows.Next() {
		if err := rows.Scan(&msg); err != nil {
			fmt.Println(err)
		}

		// まずはMULTIPOINTをバラバラに分解する
		arr1 := regexp.MustCompile("[() ,]").Split(msg, -1) // '('か、')'か、' 'か、","で分割する → "[中身]" という構造でまぎらわしい

		// 2つの値を一度に取得する (最初の値" MULTIPOIN"をスキップする為に、i:=1から始める)
		for i := 1; i < len(arr1); i += 2 {
			// arr1[i]とarr1[i+1]は2つの値を表します
			if i+1 < len(arr1) {
				value1, _ := strconv.ParseFloat(arr1[i], 64)   // 乱数の緯度
				value2, _ := strconv.ParseFloat(arr1[i+1], 64) // 乱数の経度
				fmt.Println(value1, value2)
			}
		}
	}
}

特許明細書に添付する図面を書いています ―― 何やっているか、モロバレですね。

もちろん、自分の特許発明を殺す(特許法29条)ような図面は公開していません ―― 私、プロですから。

21歳を越えた次女は、我が家の自動車で運転を始めました。

My second daughter, over 21 years old, started driving our automobile.

そして、私は『ティーンエージャの3年間の無事故』を素直に信じません。

先日、次女を駅にピックアックしに行った時、『運転させて欲しい』と言われたので、運転席を譲りました.

The other day, when I went to pick up my second daughter at the station, she asked me to let her drive, so I gave up my driver's seat.

次女:「何、しれっと後部座席に座っているの。助手席に座って運転を指導してよ」

Second daughter: "What are you doing sitting in the back seat? Why don't you sit in the passenger seat and coach me on how to drive?

私:「いや、助手席って、死亡率が一番高いし・・・。私は、まだママと一緒に人生を生きていきたいんだ」

Me: "Well, passenger seats have the highest mortality rate... I still want to live my life with my wife."

と、抵抗したのですが、許して貰えませんでした。

I resisted, but she would not let me.

-----

人の運転は、基本的に怖いものです。

Driving people is fundamentally scary.

そして、初心者の運転は、ジェットコースターより怖い。

And driving for beginners is scarier than a roller coaster.

自分のステアリングとアクセルとブレーキのタイミングが全く違う。

The steering, gas pedal, and brake timing differ entirely from mine.

車幅の認識、道路の中央や路側帯からの距離感が違う。

The perception of vehicle width and distance from the center of the road or roadside strip is different.

急加速と急減速で、頭部にありえない"F"がかかる。

Sudden acceleration and deceleration cause an impossible "F" to be applied to the head.

後方確認後、ターゲットをロックオンしないままでバックの車庫入れが開始される。

After the rearward check, a backup garage entry is initiated without locking it onto the target.

総じて言えば、自分の車の位置を、空間的に把握する ―― 3Dビューがない。

You may know where your car is spatial; however, she has no 3D view.

-----

とは言え、初心者が、最初から「3Dビュー」を持っていたら、それはそれで怖いのです。

Nevertheless, if a beginner had a "3D view" from the beginning, that would be scary.

『自分は運転の才能がある』と過信している初心者の車は、『走る殺人兵器』です。

The car of a beginner who is overconfident that they are a talented driver is a "killer weapon.

『初心者"が"運転を怖がり』『初心者"の"運転が怖い』ことは、とても良いこと ―― それは分かっているのです。

'Beginners are afraid to drive' and 'We are afraid of Beginners driving' are excellent statements—I know that.

-----

以前、私の姉は、『初心者というのは、車を一台半壊させて、一人前』というようなことを言っていました。

My sister once told me, "A beginner becomes a driver after they have destroyed half a car.

私はそこまで腹を括ることはできませんが ―― それでも、娘が人身事故を起こすことを考えれば、助手席で怯えることくらい、どうってことはない、とは思っています。

I can't be that prepared, though; I don't think that being frightened in the passenger seat is anything compared to my daughter being involved in a personal injury accident.

NHKスペシャル 「語れなかったあの日 自治体職員たちの3.11」

NHK Special "The Day We Couldn't Talk About Local Government Officials on March 11"

の録画を、一日5分間見ています。

I watch the recordings for five minutes a day.

5分間以上、連続では見られません ―― 見ているのが、本当につらくて。

I can't watch it for more than 5 minutes straight -- it's tough to watch.

映画のように悲壮な音楽を流すこともなく、無意味な演出をすることもなく、インタビューアーが話を促すこともない。

No tragic music like in the movies, no pointless staging, and no interviewer prompting the interviewee to talk.

ただ淡々と語られる、被災者を支援する側に立たされた、自治体職員たちの体験が、胸を抉ります。

The experiences of local government officials, who were forced to stand on the side of the victims and support them, are heartbreakingly told in a simple, unaffected manner.

『そんなに辛いながら、見るのを止めればいい』とも思うのですが、なんだか、それは、いけないような気がしまして。

I also think, "If it's so painful, just stop looking at it," but that doesn't seem right.

-----

私、震災ボランティアに参加したのって、実質、この時だけです。

This was practically the only time I participated in earthquake disaster volunteer activities.

震災が発生する度に、ボランティアに参加しないことに、後ろめたさがないわけではありません。

Every time a disaster strikes, I am not without guilt for not volunteering.

ただ、将来、私が被災した時には、

However, in the future, when I am affected,

『どこかでがんばってくれている誰かの善意と努力を信じ、そして、私が助けてもらえなくても誰も恨まない』

"I believe in the goodwill and effort of someone working hard somewhere, and I don't begrudge anyone if I can't be helped."

と誓っていますので、

I swear to you. So I think

「それで、勘弁して下さい」

Forgive me for that."

と思っています。

-----

そういえば、私がお勧めしていたこの番組ですが、今ならネットで見れるようですよ。

By the way, this program I was recommending is now available online.

ちなみに、私は「NHKスペシャル 原発メルトダウン 危機の88時間」の方を、お勧めしたいです。

https://airuca.com/camera-rtsp/

Panasonic / i-Pro

WV-S2130

RTSPパス rtsp://

Src/MediaInput/stream_1
Src/MediaInput/stream_2
Src/MediaInput/stream_3
Src/MediaInput/h264/stream_1
MediaInput/h264
MediaInput/mpeg4
VideoInput/1/h264/1

なんか、ドンピシャな情報

からコピペさせて頂きました。

====== さらに引用 ここから =======

これでRTSPストリームのURLはわかりました。
次にこのURLで映像を見るとき、どうやってカメラに設定したユーザー名とパスワードを使って認証させるのか？という課題が生じます。
こちらは下記のようなURLを作れば問題ありません。
（例）H.264/H.265のストリーム1の映像を参照したい場合
rtsp://UserName:Password@IP_Address_of_camera/Src/MediaInput/stream_1

そして最後に、上のURLをffplayで再生するには下記のコマンドをffplayのあるディレクトリ内で実行します。

ffplay -i rtsp://UserName:Password@IP_Address_of_camera/Src/MediaInput/stream_1

再生はされるがよく途切れる、灰色になって表示されない部分がよく出て不安定といった場合は、RTSPでのデータ伝送にTCP接続を強制すると改善するかもしれません。
TCP接続を強制する場合のコマンドは下記のようになります。

ffplay -rtsp_transport tcp -i rtsp://UserName:Password@IP_Address_of_camera/Src/MediaInput/stream_1

このとき、ffplayのウィンドウサイズはカメラ側で設定した解像度に合わせられます。
ffplayでPanasonicのIPカメラの映像を再生する方法は以上です。

====== 引用、ここまで ======

ありがとうございました。

JVC

VH-H268R
VH-H268VPR

RTSPパス rtsp://

ONVIF/Streaming/channels/0
ONVIF/Streaming/channels/1
ONVIF/Streaming/channels/2
ONVIF/Streaming/channels/3