Decorating With Style!

私たちのアプリは機能的には完璧なんですが、見た目がショボいです。そこで外観を改良しましょう。一つの方法はキャスケーディング・スタイル・シートを使う事です。スタイル・シートはwebページの見た目を良くします。例えば、段落全てを緑色にしたい場合、レスポンスを変更する為に以下のスタイル宣言を追加します。

'(style ((type "text/css")) "p { color: green }")

html-responseにこのスタイル情報を直接埋め込んでも結構です。しかしながら、ソースファイルは既にかなりゴチャゴチャしてきています。そこでしばしば、アプリの論理表現を表示部分から切り離すことをします。HTMLレスポンス部分に.cssを直接埋め込む代わりに、分離した.cssファイルへとリンク指定を行うのです。

今までは、webアプリのコンテンツの全ては、レスポンス生成ハンドラによって生成されてきました。もちろん、全てが動的に生成される必要はありません:変更の必要がないファイル内の共通部分がある筈です。つまり、これら静的リソース(写真、文章、.cssファイルなど)をwebアプリとはまた別に提供すべきなんです。

そのために、これらのファイルを保存したパスを指定し、ウェブサーバーにディレクトリがどこにあるか教えます。static-files-path

static-files-path : (path-string? -> void)

はウェブサーバが静的リソースへのリクエストがあるURLを受け取った時、指定されたパスを覗く機能です。

Exercise.以下のコンテンツを含む"test-static.ss"と名づけられた簡単なwebアプリを書いてください。

  #lang web-server/insta
  (define (start request)
    '(html (head (title "Testing"))
           (link ((rel "stylesheet")
                  (href "/test-static.css")
                  (type "text/css")))
           (body (h1 "Testing")
                 (h2 "This is a header")
                 (p "This is " (span ((class "hot")) "hot") "."))))
  
  (static-files-path "htdocs")

"test-static.ss"ソースファイルが置いてあるディレクトリをルートとして、"htdocs"と名づけたサブディレクトリを作成してください。最後に、この.cssページを表示する為に、"htdocs/"内に以下の内容を持つ"test-static.css"と言う簡単な.cssファイルを作成してください。

body {
  margin-left: 10%;
  margin-right: 10%;
}
p { font-family: sans-serif }
h1 { color: green }
h2 { font-size: small }
span.hot { color: red }

この時点で、アプリを走らせてブラウザの出力を見てください。質素なWebページでしょうが、ほんのりと色が付いています。

---

Exercise.あなたの趣味に見合った外部スタイルシートを記述し、ブログアプリの表示を改善してみましょう。スタイルシートへのリンクを含むように全てのHTMLレスポンスハンドラを調整してみましょう。