🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

832閲覧

Lorcaアプリでローカルに置いたBootstrap5を利用したい

kamuycikap

総合スコア135

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/02/24 09:53

編集2023/02/24 09:57

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を含めてみたりしたものの改善されず、何が原因なのかわからない状況。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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()))

冗長ですが、Lorcaとは別のHTTPサーバーを立てています。
Lorca実装からはそのHTTPサーバーからリソースを読み込みます。

投稿2023/02/26 04:07

nobonobo

総合スコア3367

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kamuycikap

2023/03/02 06:18

アドバイスありがとうございます。 ご紹介いただいたサンプルコードをgit cloneしてexampleを入手し、counterサンプルを動かしながら確認してみました。 結果、ローカルに配置したBootStrap5のcssを適用できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問