nabeo56BLOG

開発とかプログラムとか

Webアプリ養成読本の実践(3)

PHP Slim フレームワーク 本

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

2-4 Webアプリケーションを作ってみよう

CSSの適用

Bootstrapダウンロード
$ pwd
/home/vagrant
$ wget https://github.com/twbs/bootstrap/releases/download/v3.3.1/b
ootstrap-3.3.1-dist.zip
--2014-12-15 15:54:31--  https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip
Resolving github.com... 192.30.252.128
Connecting to github.com|192.30.252.128|:443... connected.
HTTP request sent, awaiting response... 302 Found
Location: https://s3.amazonaws.com/github-cloud/releases/2126244/558cd3fe-6a4b-11e4-9a0e-d0e8b6837eb8.zip?response-content-disposition=attachment%3B%20filename%3Dbootstrap-3.3.1-dist.zip&response-content-type=application/octet-stream&AWSAccessKeyId=AKIAISTNZFOVBIJMK3TQ&Expires=1418658827&Signature=EFlponIRg%2B7T6Hv7kKUpF755oZU%3D [following]
--2014-12-15 15:54:32--  https://s3.amazonaws.com/github-cloud/releases/2126244/558cd3fe-6a4b-11e4-9a0e-d0e8b6837eb8.zip?response-content-disposition=attachment%3B%20filename%3Dbootstrap-3.3.1-dist.zip&response-content-type=application/octet-stream&AWSAccessKeyId=AKIAISTNZFOVBIJMK3TQ&Expires=1418658827&Signature=EFlponIRg%2B7T6Hv7kKUpF755oZU%3D
Resolving s3.amazonaws.com... 54.231.244.4
Connecting to s3.amazonaws.com|54.231.244.4|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 230668 (225K) [application/octet-stream]
Saving to: “bootstrap-3.3.1-dist.zip”

100%[=====================================================>] 230,668      229K/s   in 1.0s

2014-12-15 15:54:34 (229 KB/s) - “bootstrap-3.3.1-dist.zip” saved [230668/230668]
$ unzip bootstrap-3.3.1-dist.zip
Archive:  bootstrap-3.3.1-dist.zip
   creating: dist/
   creating: dist/css/
  inflating: dist/css/bootstrap-theme.css
  inflating: dist/css/bootstrap-theme.css.map
  inflating: dist/css/bootstrap-theme.min.css
  inflating: dist/css/bootstrap.css
  inflating: dist/css/bootstrap.css.map
  inflating: dist/css/bootstrap.min.css
   creating: dist/fonts/
  inflating: dist/fonts/glyphicons-halflings-regular.eot
  inflating: dist/fonts/glyphicons-halflings-regular.svg
  inflating: dist/fonts/glyphicons-halflings-regular.ttf
  inflating: dist/fonts/glyphicons-halflings-regular.woff
   creating: dist/js/
  inflating: dist/js/bootstrap.js
  inflating: dist/js/bootstrap.min.js
  inflating: dist/js/npm.js
bootstrapの配置
$ cd /vagrant/work/app/htdocs
$ mkdir -p vendor/bootstrap/css
$ cp -p /home/vagrant/dist/css/bootstrap.min.css vendor/bootstrap/css/
site.css作成
$ pwd
/vagrant/work/app/htdocs
$ mkdir css
$ vim css/site.css
/* post cell */
.postcell{
  margin-top: 10px;
  background-color: #EEEEEE;
  padding: 15px;
  border-radius: 8px;
}
.postcell .body{
  word-wrap: break-word;
}
.postcell .info{
  font-size: 80%;
}
.postcell .info .date{
  font-size: 90%;
  font-style: italic;
}
.postcell .info .nickname{
  font-weight: bold;
}

/* post form */
.postform{
  margin-top: 10px;
  background-color: #CCCCD0;
  padding: 15px;
  border-radius: 8px;
}
.postform h3{
  margin-top: 0px;
}
テンプレート修正
$ pwd
/vagrant/work/app
$ vim templates/frame.twig
{% autoescape true %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Tinitter</title>
  <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/site.css">
</head>
<body>
<header class="navbar navbar-inverse bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">Tinitter</a>
    </div>
  </div>
</header>

<main id="content" role="main">
  <div class="container">
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        {% block content %}{% endblock %}
      </div>
      <div class="col-md-3"></div>
    </div>
  </div>
</main>

<footer>
  <div class="container">
    <hr>
    <p class="text-center">Powerd by PHP</p>
  </div>
</footer>
</body>
</html>
{% endautoescape %}