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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。