Goで静的ファイルを読み込む方法
前回、フレームワークを使わずにGolangの機能のみで、簡易的なアプリケーションを作成しました。 今回は続きで、CSSやjsを適用したいので、CSSやJavaScriptなどの静的ファイルを読み込めるようにしたいと思います。
以下、ディレクトリ、ファイルを追加します。
$ mkdir static $ touch static/style.css $ touch static/main.js
htmlで、CSSとJavaScriptを読み込みます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--css読み込み--> <link rel="stylesheet" href="/static/style.css"> </head> <body> <h1>読んだ書籍</h1> <form action="/view/create" method="post"> <div><input type="text" name="value"></div> <div><input type="submit" value="追加"></div> </form> <div> {{ range .Books }} <p>{{.}}</p> {{ end }} </div> <!--js読み込み--> <script src="/static/main.js"></script> </body> </html>
CSSとjsファイルを追加します。CSSは、h1タグの文字をピンクにする。jsは、バックグランドカラーを白から徐々に青に変わるように記述しています。
h1 { color: deeppink; }
document.body.animate( { background: ["#FFFFFF", "#3399CC"], }, { fill: "forwards", duration: 3000 } );
作成した、CSSとjsを読み込めるように、サーバー側にもコードを追加していきます。
func main() { http.HandleFunc("/view", viewHandler) http.HandleFunc("/view/create", createHandler) // 追加 http.Handle("/static/", http.StripPrefix("/static", http.FileServer(http.Dir("./static/")))) fmt.Println("Server Start Up........") log.Fatal(http.ListenAndServe("localhost:8080", nil)) }
ここで大事なのが、test1/test2/static
、test1/static
という2つのリクエストどちらも対応させる必要があります。
http.StripPrefix
メソッドを使って対応させることが可能となります。
http.FileServer(http.Dir("path")
,pathにあるディレクトリをハンドラーとして返す。
http.StripPrefix("path", handler)
,pathより前を取り除いたpathをhandlerに渡す
http.Handle("path",handler)
,pathにリクエストが来たらhandlerを返す
http.StripPrefixメソッドで、あるpathから前を除外する。localhost:8080/test1/test2/static
、localhost:8080/test1/static
も同じリクエストとして扱ってくれます。
サーバーを起動します。
$ go run server.go Server Start Up........
Webサーバーが立ち上がったのでlocalhost:8080/view
にアクセスします。
しっかり、反映されていますね!(jsの徐々に色が変わる部分は、画像ではわからないですね‥、バックグラウンドが最初は白でした笑)