Lorcaを利用したアプリケーションでローカルに配置したCSSフレームワークBootstrapを利用したい

作成したLorcaアプリケーションでCSSが有効にならず、テキストだけが表示される症状に悩んでいます。
HTML単体をブラウザ表示するとCSSが有効になっているのですが、コンパイルしたLorcaアプリを起動すると有効になっていないのです。
原因と解決方法を試行錯誤しています。

環境

Go言語：go version go1.19.1 linux/amd64
OS　　：Ubuntu 22.04 LTS

前提

BootStrap5のCSSとJSをローカルにダウンロード
index.htmlに相対PathでBootstrapのcssファイルを指定
HTMLコードを書いてブラウザでOpenし、Bootstrapのcssが適用されている事を確認
go mod tidyにて、Lorcaのインストールを完了している
Goプロジェクトのコンパイルと実行にて、Lorcaアプリケーションの起動を確認済み

問題

$ go build .
にて作成したバイナリを実行すると、アプリケーションは起動するがBootstrapのcssが有効になっていない。
テキストだけがアプリ画面に表示されている。

ソフトウェアの構成

.
├── sample.go
├── go.mod
├── go.sum
└── www
　　　　├── css　　　　　　　　　　←　Bootstrap5のCSSファイル群ディレクトリ
　　　　├── index.html　　　　　　←　sample.goから開かれるHTMLファイル
　　　　├── jquery-3.6.3.min.js　　　←　JQuery
　　　　└── js　　　　　　　　　　　←　Bootstrap5で利用するjsファイル群ディレクトリ

該当のソースコード

html
1<!doctype html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- Bootstrap CSS -->
9    <!--
10        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
11        -->
12
13        <!-- CSS読み込み -->
14        <link rel="stylesheet" href="./css/bootstrap.css">
15        
16        <title>Hello, world!</title>
17  </head>
18  <body>
19    <h1>Hello Lorca!!</h1>
20
21    <!-- Optional JavaScript; choose one of the two! -->
22
23    <!-- Option 1: Bootstrap Bundle with Popper -->
24    <!--
25        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
26        -->
27
28        <!-- jQuery読み込み JSよりも先に -->
29        <script src="./jquery-3.4.1.min.js"></script>
30
31        <!-- popper.js js読み込み -->
32        <script src="./js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
33
34
35        <!-- Option 2: Separate Popper and Bootstrap JS -->
36        <!--
37            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
38            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
39            -->
40
41            <div class="alert alert-primary" role="alert">
42              A simple primary alert—check it out!
43            </div>
44            <div class="alert alert-secondary" role="alert">
45              A simple secondary alert—check it out!
46            </div>
47            <div class="alert alert-success" role="alert">
48              A simple success alert—check it out!
49            </div>
50            <div class="alert alert-danger" role="alert">
51              A simple danger alert—check it out!
52            </div>
53            <div class="alert alert-warning" role="alert">
54              A simple warning alert—check it out!
55            </div>
56            <div class="alert alert-info" role="alert">
57              A simple info alert—check it out!
58            </div>
59            <div class="alert alert-light" role="alert">
60              A simple light alert—check it out!
61            </div>
62            <div class="alert alert-dark" role="alert">
63              A simple dark alert—check it out!
64            </div>
65
66            <button type="button" class="btn btn-primary">Primary</button>
67            <button type="button" class="btn btn-secondary">Secondary</button>
68            <button type="button" class="btn btn-success">Success</button>
69            <button type="button" class="btn btn-danger">Danger</button>
70            <button type="button" class="btn btn-warning">Warning</button>
71            <button type="button" class="btn btn-info">Info</button>
72            <button type="button" class="btn btn-light">Light</button>
73            <button type="button" class="btn btn-dark">Dark</button>
74
75            <button type="button" class="btn btn-link">Link</button>
76  </body>
77</html>
78

go
1/* Bootstrap5を読み込ませてみる。*/
2/* HTMLファイルを読み込んで表示するサンプル */
3package main
4
5import (
6	"io"
7	"io/ioutil"
8	"log"
9	"net/url"
10	"os"
11
12	"github.com/zserge/lorca"
13)
14
15func main() {
16	ui, err := lorca.New("", "", 480, 320)
17	if err != nil {
18		log.Fatalln(err)
19	}
20	if err := load(ui, "./www/index.html"); err != nil {
21		log.Fatalln(err)
22	}
23	defer closer(ui)
24	<-ui.Done()
25}
26
27func load(ui lorca.UI, path string) error {
28	file, err := os.Open(path)
29	if err != nil {
30		return err
31	}
32	defer closer(file)
33
34	b, err := ioutil.ReadAll(file)
35	if err != nil {
36		return err
37	}
38
39	return ui.Load("data:text/html," + url.PathEscape(string(b)))
40}
41
42func closer(c io.Closer) {
43	if err := c.Close(); err != nil {
44		log.Fatalln(err)
45	}
46}

試したこと

<link rel="stylesheet" href="./css/bootstrap.css">

ではなく、

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

だとCSSが適用される。
と言うことは、relに記載されているPathの設定が問題なのかと想像し、wwwを含めてみたりしたものの改善されず、何が原因なのかわからない状況。

行動規範の内容に同意します

回答2件

lorcaのexampleを応用して実現

lorca本家のサンプル
頂いたアドバイスを参考に、上記のサンプルを応用して実現。

GitHubからコードを入手

shell
1$ git clone https://github.com/zserge/lorca.git

excampleのcounterディレクトリをコピー

counterディレクトリの中身を、任意のディレクトリにコピー
今回、studyディレクトリの中でサンプルを作る

shell
1$ cp -rf ./lorca/example/counter/* ./study

wwwの中身を変更

studyディレクトリにあるwwwの中身をBootstrap5とJQueryに置き換え

.study
├── sample.go
├── go.mod
└── www
　　　　├── css　　　　　　　　　　←　Bootstrap5のCSSファイル群ディレクトリ
　　　　├── index.html　　　　　　←　sample.goから開かれるHTMLファイル
　　　　├── jquery-3.6.3.min.js　　　←　JQuery
　　　　└── js　　　　　　　　　　　←　Bootstrap5で利用するjsファイル群ディレクトリ

index.htmlの配置

studyディレクトリのwwwディレクトリに、index.html作成
ローカルに配置したBootstrap5とJQueryのファイル群を相対パスで指定している。

html
1<!doctype html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- Bootstrap CSS -->
9        <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
10
11
12        <!-- CSS読み込み -->
13        <link rel="stylesheet" href="./css/bootstrap.css">
14        
15        <title>Hello, world!</title>
16  </head>
17  <body>
18    <h1>Hello Lorca!!</h1>
19
20    <!-- Optional JavaScript; choose one of the two! -->
21
22    <!-- Option 1: Bootstrap Bundle with Popper -->
23    <!--
24        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
25        -->
26
27        <!-- jQuery読み込み JSよりも先に -->
28        <script src="./jquery-3.4.1.min.js"></script>
29
30        <!-- popper.js js読み込み -->
31        <script src="./js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
32
33
34        <!-- Option 2: Separate Popper and Bootstrap JS -->
35        <!--
36            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
37            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
38            -->
39
40            <div class="alert alert-primary" role="alert">
41              A simple primary alert—check it out!
42            </div>
43            <div class="alert alert-secondary" role="alert">
44              A simple secondary alert—check it out!
45            </div>
46            <div class="alert alert-success" role="alert">
47              A simple success alert—check it out!
48            </div>
49            <div class="alert alert-danger" role="alert">
50              A simple danger alert—check it out!
51            </div>
52            <div class="alert alert-warning" role="alert">
53              A simple warning alert—check it out!
54            </div>
55            <div class="alert alert-info" role="alert">
56              A simple info alert—check it out!
57            </div>
58            <div class="alert alert-light" role="alert">
59              A simple light alert—check it out!
60            </div>
61            <div class="alert alert-dark" role="alert">
62              A simple dark alert—check it out!
63            </div>
64
65            <button type="button" class="btn btn-primary">Primary</button>
66            <button type="button" class="btn btn-secondary">Secondary</button>
67            <button type="button" class="btn btn-success">Success</button>
68            <button type="button" class="btn btn-danger">Danger</button>
69            <button type="button" class="btn btn-warning">Warning</button>
70            <button type="button" class="btn btn-info">Info</button>
71            <button type="button" class="btn btn-light">Light</button>
72            <button type="button" class="btn btn-dark">Dark</button>
73
74            <button type="button" class="btn btn-link">Link</button>
75  </body>
76</html>

sample.goの配置

studyディレクトリに、sample.goを作成。
とりあえず、cssがあたっているかどうかを検証したいので、コードの変更はしない。

go
1package main
2
3import (
4	"embed"
5	"fmt"
6	"log"
7	"net"
8	"net/http"
9	"os"
10	"os/signal"
11	"runtime"
12	"sync"
13
14	"github.com/zserge/lorca"
15)
16
17//go:embed www
18var fs embed.FS
19
20// Go types that are bound to the UI must be thread-safe, because each binding
21// is executed in its own goroutine. In this simple case we may use atomic
22// operations, but for more complex cases one should use proper synchronization.
23type counter struct {
24	sync.Mutex
25	count int
26}
27
28func (c *counter) Add(n int) {
29	c.Lock()
30	defer c.Unlock()
31	c.count = c.count + n
32}
33
34func (c *counter) Value() int {
35	c.Lock()
36	defer c.Unlock()
37	return c.count
38}
39
40func main() {
41	args := []string{}
42	if runtime.GOOS == "linux" {
43		args = append(args, "--class=Lorca")
44	}
45	ui, err := lorca.New("", "", 480, 320, args...)
46	if err != nil {
47		log.Fatal(err)
48	}
49	defer ui.Close()
50
51	// A simple way to know when UI is ready (uses body.onload event in JS)
52	ui.Bind("start", func() {
53		log.Println("UI is ready")
54	})
55
56	// Create and bind Go object to the UI
57	c := &counter{}
58	ui.Bind("counterAdd", c.Add)
59	ui.Bind("counterValue", c.Value)
60
61	// Load HTML.
62	// You may also use `data:text/html,<base64>` approach to load initial HTML,
63	// e.g: ui.Load("data:text/html," + url.PathEscape(html))
64
65	ln, err := net.Listen("tcp", "127.0.0.1:0")
66	if err != nil {
67		log.Fatal(err)
68	}
69	defer ln.Close()
70	go http.Serve(ln, http.FileServer(http.FS(fs)))
71	ui.Load(fmt.Sprintf("http://%s/www", ln.Addr()))
72
73	// You may use console.log to debug your JS code, it will be printed via
74	// log.Println(). Also exceptions are printed in a similar manner.
75	ui.Eval(`
76		console.log("Hello, world!");
77		console.log('Multiple values:', [1, false, {"x":5}]);
78	`)
79
80	// Wait until the interrupt signal arrives or browser window is closed
81	sigc := make(chan os.Signal)
82	signal.Notify(sigc, os.Interrupt)
83	select {
84	case <-sigc:
85	case <-ui.Done():
86	}
87
88	log.Println("exiting...")
89}

go.mod作成して実行

studyディレクトリをカレントディレクトリにして、コマンド実行

shell
1$ go mod init
2$ go mod tidy
3$ go run .

投稿2023/03/02 06:20

kamuycikap

総合スコア135

ベストアンサー

counterサンプルを参考にしてください。
https://github.com/zserge/lorca/tree/master/examples/counter

go:embedを使ってwwwフォルダをまるまる取り込んだコンパイルをするとよいでしょう。

サンプルの関連個所

go
1//go:embed www
2var fs embed.FS

go
1	ln, err := net.Listen("tcp", "127.0.0.1:0")
2	if err != nil {
3		log.Fatal(err)
4	}
5	defer ln.Close()
6	go http.Serve(ln, http.FileServer(http.FS(fs)))
7	ui.Load(fmt.Sprintf("http://%s/www", ln.Addr()))