静的webサイト作成の強い味方「Middleman」【後編】

静的webサイト作成の強い味方「Middleman」【後編】

2016.03.29
middleman_02
ノウハウ

間がだいぶ空いてしまってごめんなさい!
お久しぶりです。chiiです。

今回はMiddleman紹介記事の最終章、実践編をお送りします。
3記事目にしてやっとサイト制作に入りますよ!大変ながらくお待たせしました!

「お久しぶり過ぎてMiddlemanなんて忘れちゃった!」
「なんか設定してたけど…なんだったっけ?」
という方はこちらをご覧くださいませ。

では、気合をいれていきましょー!

サイトを作ってみる

とあるイベントのポータルサイトを想定して、実際にサイトを一つ作ってみましょう。最初からMiddlemanをフルに活用した書き方をしてもいいのですが、今回はわかりやすいようステップを踏んで徐々に便利な形に変更していきたいと思います。

下準備

せっかくなのでライブリロードでリアルタイムに表示を確認しながら作業を進めていきましょう。前編で触れたコマンドを実行してサーバーを起動してください。

$ bundle exec middleman server

またサンプルコードを書き写すだけで動くようにするため、scssを用意しておきました。こちらのscssの名前を style.css.scss に変更し、assets/style 直下に配置してください。

/* import */
@import url(http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import "compass";


/* variable definition */
$white: #fff;
$gray: #eee;
$darkGray: #272727;
$black: #000;
$red: #fe4444;
$yellow: #ffc82f;

$fs14px: 1rem;
$fs21px: 1.5rem;
$fs28px: 2rem;

$default-border-radius: 5px;


/* mixin */
@mixin backgroundStyle {
    width: 100%;
    margin-bottom: 20px;
    background-color: $white;
    @include border-radius;
}

@mixin expandClickableArea {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
}


/* base */
* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

html { background-color: $gray; }

body { font-family: 'Noto Sans Japanese', sans-serif; }

.wrap {
    position: relative;
    width: 100%;
    min-height: 100%;
}

h1, h2 { font-weight: bold; }

a {
    text-decoration: none;
    cursor: pointer;
    &:hover { color: $red; }
}

.site-menu {
    &__list {
        position: relative;
        height: 30px;
        line-height: 30px;
        margin: 7px 0;

        &__item {
            float: left;
            height: 100%;
            border-left: $gray solid 1px;
            &:first-child { border: none; }

            a {
                display: block;
                width: 100%;
                height: 100%;
                padding: 0 10px;
                cursor: pointer;
                &:hover { color: $red; }
            }
        }
    }
}


/* common */
.site-header {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: $darkGray;
    color: $white;

    &__container{
        position: relative;
        margin: 0 auto;
        width: 1024px;
        a { color: $white; }
        &__site-title { float: left; }
        &__site-menu {
            float: left;
            margin-left: 40px;
        }
    }
}

.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding-bottom: 40px;
    text-align: center;

    &__site-menu {
        display: block;
        a { color: $black; }
        ul { display: inline-block; }
    }
}

main {
    overflow: hidden;
    width: 1024px;
    margin: 0 auto;
    padding-bottom: 160px;
}

.contents { width: 100%; }

.main-contents {
    float: left;
    width: 804px;
    margin-right: 20px;
}

.side-contents {
    @include backgroundStyle;
    float: right;
    width: 200px;
}

.tweet-button {
    width: 100%;
    margin-bottom: 20px;

    iframe {
        display: block;
        margin: 20px auto;
    }
}


/* toppage */
.kv {
    width: 100%;
    height: 480px;
    margin: 30px 0;
    background: $yellow image_url("middleman.png") no-repeat center;
}

.recommended {
    &__headline { font-size: $fs28px; }
    &__article {
        @include backgroundStyle;
        display: table;
        overflow: hidden;
        height: 187px;

        &__clickable-area {
            @include expandClickableArea;
            display: table;
            color: $black;
            &:hover { @include opacity(0.8); }
        }

        &__img {
            display: block;
            width: 150px;
            vertical-align: middle;
        }

        &__information {
            display: table-cell;
            width: 100%;
            padding-left: 10px;
            vertical-align: middle;

            &__title {
                @include ellipsis(no-wrap);
                width: 614px;
                font-size: $fs21px;
            }
            &__description { font-size: $fs14px; }
        }
    }
}

.pickup {
    width: 100%;
    &__headline { font-size: $fs28px; }

    ul {
        position: relative;
        overflow: hidden;
        width: 100%;

        li {
            float: left;
            width: 261px;
            margin-right: 10px;
            &:nth-child(3n) { margin-right: 0; }
            &:nth-child(3n-1) { width: 262px; }
            &:nth-child(3n+1) { clear: both; }
        }
    }

    &__article {
        @include backgroundStyle;
        overflow: hidden;
        height: 280px;

        &__clickable-area {
            @include expandClickableArea;
            color: $black;
            &:hover { @include opacity(0.8); }
        }

        &__img {
            display: block;
            width: 150px;
            margin: 0 auto;
        }

        &__information {
            &__title {
                @include ellipsis(no-wrap);
                width: 221px;
                margin: 10px 0 5px;
                font-size: $fs21px;
            }
            &__description { font-size: $fs14px; }
        }
    }
}


/* about */
.event-summary {
    @include backgroundStyle;
    overflow: hidden;
    width: 100%;
    margin: 30px 0;
    padding: 20px;
    h2 {
        margin-bottom: 5px;
        font-size: $fs21px;
    }
    &__headline {
        margin-bottom: 10px;
        font-size: $fs28px;
    }
}

.about-event {
    display: table;
    width: 100%;
    height: 350px;
    border-bottom: rgba(0,0,0,0.1) solid 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    &__information {
        display: table-cell;
        width: 100%;
        vertical-align: top;
    }
    &__img {
        display: block;
        width: 330px;
        margin-right: 20px;
    }
}

.event-data, .access {
    float: left;
    width: 50%;
    margin: 20px 0;

    &__information {
        width: 100%;
        &__item {
            float: left;
            width: 15%;
            font-weight: bold;
        }
        &__description {
            float: left;
            width: 85%;
        }
    }
}

 

トップページのマークアップを確認する

元となるトップページを用意しておきました。今回はこのページをもとにサイトを構築していきましょう。
イベントのポータルサイトのトップページなので、見てほしい記事へのリンクを並べてみました。話題となっていることを知ってもらうために、twitterのウィジェットをサブカラムにおいています。ヘッダーとフッターにはサイトのメニューが置いてあります。

<!doctype html>
<html>
    <head>
        <title>イベントポータルサイト</title>
        <link href="/assets/style/style-5d8674db.css" rel="stylesheet">
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </head>
    <body>
        <div class="wrap">
            <header class="site-header">
                <div class="site-header__container">
                    <h1><a href="/" class="site-header__container__site-title">イベントポータルサイト</a></h1>
                    <nav class="site-header__container__site-menu site-menu">
                        <ul class="sute-menu__list">
                            <li class="site-menu__list__item"><a href="/">TOP</a></li>
                            <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <main>
                <div class="kv"></div>
                <div class="main-contents">
                    <section class="recommended">
                        <h1 class="recommended__headline">おすすめ</h1>
                        <article class="recommended__article">
                            <a href="#" class="recommended__article__clickable-area">
                                <img src="assets/img/middleman-50d9de35.png" alt="おすすめ記事のサムネイル" class="recommended__article__img">
                                <div class="recommended__article__information">
                                    <h1 class="recommended__article__information__title">おすすめ記事のタイトル</h1>
                                    <p class="recommended__article__information__description">説明文が入ります。</p>
                                </div>
                            </a>
                        </article>
                    </section>
                    <section class="pickup">
                        <h1 class="pickup__headline">ピックアップ</h1>
                        <ul>
                            <li>
                                <article class="pickup__article">
                                    <a href="#" class="pickup__article__clickable-area">
                                        <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                                        <div class="pickup__article__imformation">
                                            <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                            <p lass="pickup__article__information__description">説明文が入ります。</p>
                                        </div>
                                    </a>
                                </article>
                            </li>
                            <li>
                                <article class="pickup__article">
                                    <a href="#" class="pickup__article__clickable-area">
                                        <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                                        <div class="pickup__article__imformation">
                                            <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                            <p lass="pickup__article__information__description">説明文が入ります。</p>
                                        </div>
                                    </a>
                                </article>
                            </li>
                            <li>
                                <article class="pickup__article">
                                    <a href="#" class="pickup__article__clickable-area">
                                        <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                                        <div class="pickup__article__imformation">
                                            <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                            <p lass="pickup__article__information__description">説明文が入ります。</p>
                                        </div>
                                    </a>
                                </article>
                            </li>
                        </ul>
                    </section>
                </div>
                <aside class="side-contents">
                    <div class="tweet-button">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.chokaigi.jp/" data-text="ニコニコ超会議2016 2016/4/29(金・祝)30(土) 幕張メッセで開催!" data-hashtags="chokaigi"><span>つぶやく</span></a>
                    </div>
                    <div class="twitter-widget">
                        <a class="twitter-timeline" href="https://twitter.com/hashtag/chokaigi" data-widget-id="701734104883027968">#chokaigi のツイート</a>
                    </div>
                </aside>
            </main>
            <footer class="site-footer">
                <nav class="site-footer__site-menu site-menu">
                    <ul class="site-menu__list">
                        <li class="site-menu__list__item"><a href="/">TOP</a></li>
                        <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
                    </ul>
                </nav>
                <small>©&ensp;DWANGO&ensp;Co.,&ensp;Ltd.</small>
            </footer>
        </div>
    </body>
</html>

表示を確認する

上記のコードを layouts/layout.erb にコピペして保存したら、ライブリロードで表示を確認してみましょう。
ブラウザからhttp://localhost:4567/にアクセスしてみてください。

サンプルサイト

このような画面が表示されたと思います。これでベースはできたので、どんどん部品化していきましょう。

 

レイアウトとテンプレートに分けてみる

前項で layouts/layout.erb にコピペしたHTMLを「一つのページを構成する要素」のところで確認した「レイアウト」と「テンプレート」に分けてファイルを作っていきましょう。テンプレートとなる部分を index.html.erb に切り分けていきます。テンプレートとして切り分けた部分をレイアウトの中で読み込むことをお忘れなく。

レイアウト

<html>
    <head>
        <title>イベントポータルサイト</title>
        <link href="/assets/style/style.css" rel="stylesheet">
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </head>
    <body>
        <div class="wrap">
            <%= yield %>
        </div>
    </body>
</html>

テンプレート

<header class="site-header">
    <div class="site-header__container">
        <h1><a href="/" class="site-header__container__site-title">イベントポータルサイト</a></h1>
        <nav class="site-header__container__site-menu site-menu">
            <ul class="sute-menu__list">
                <li class="site-menu__list__item"><a href="/">TOP</a></li>
                <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
            </ul>
        </nav>
    </div>
</header>
<main>
    <div class="kv"></div>
    <div class="main-contents">
        <section class="recommended">
            <h1 class="recommended__headline">おすすめ</h1>
            <article class="recommended__article">
                <a href="#" class="recommended__article__clickable-area">
                    <img src="assets/img/middleman-50d9de35.png" alt="おすすめ記事のサムネイル" class="recommended__article__img">
                    <div class="recommended__article__information">
                        <h1 class="recommended__article__information__title">おすすめ記事のタイトル</h1>
                        <p class="recommended__article__information__description">説明文が入ります。</p>
                    </div>
                </a>
            </article>
        </section>
        <section class="pickup">
            <h1 class="pickup__headline">ピックアップ</h1>
            <ul>
                <li>
                    <article class="pickup__article">
                        <a href="#" class="pickup__article__clickable-area">
                            <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                            <div class="pickup__article__imformation">
                                <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                <p lass="pickup__article__information__description">説明文が入ります。</p>
                            </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="pickup__article">
                        <a href="#" class="pickup__article__clickable-area">
                            <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                            <div class="pickup__article__imformation">
                                <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                <p lass="pickup__article__information__description">説明文が入ります。</p>
                            </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="pickup__article">
                        <a href="#" class="pickup__article__clickable-area">
                            <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                            <div class="pickup__article__imformation">
                                <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                <p lass="pickup__article__information__description">説明文が入ります。</p>
                            </div>
                        </a>
                    </article>
                </li>
            </ul>
        </section>
    </div>
    <aside class="side-contents">
        <div class="tweet-button">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.chokaigi.jp/" data-text="ニコニコ超会議2016 2016/4/29(金・祝)30(土) 幕張メッセで開催!" data-hashtags="chokaigi"><span>つぶやく</span></a>
        </div>
        <div class="twitter-widget">
            <a class="twitter-timeline" href="https://twitter.com/hashtag/chokaigi" data-widget-id="701734104883027968">#chokaigi のツイート</a>
        </div>
    </aside>
</main>
<footer class="site-footer">
    <nav class="site-footer__site-menu site-menu">
        <ul class="site-menu__list">
            <li class="site-menu__list__item"><a href="/">TOP</a></li>
            <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
        </ul>
    </nav>
    <small>©&ensp;DWANGO&ensp;Co.,&ensp;Ltd.</small>
</footer>

この状態で一度両方のファイルを保存し、前項と同じように表示を確認してみましょう。
ブラウザのリロードがはしっても先ほどと同じように表示されていますよね。これで、「ページの一部をパーツ化」して「元となるページに読み込み」、「ひとつのページとして問題なく吐き出すこと」ができました。

 

「すべてのページで使いそうなもの」と「そうでないもの」に分けてみる

前項でレイアウトとテンプレートに分割し、プロジェクトにのせるところまでができました。今度は「すべてのページで使いそうなもの」と「そうでないもの」で分けて、部品化してみましょう。

すべてのページで使いそうなもの
  • ヘッダー
  • フッター
そうでないもの
  • ヘッダー・フッター以外のもの全て

洗い出しが完了したらパーシャルに切り出していきます。ヘッダー・フッターはそれぞれ _header.html.erb と _footer.html.erb という名前でファイルを作り、ドキュメントルートにおいてください。

ヘッダー

<header class="site-header">
    <div class="site-header__container">
        <h1><a href="/" class="site-header__container__site-title">イベントポータルサイト</a></h1>
        <nav class="site-header__container__site-menu site-menu">
            <ul class="sute-menu__list">
                <li class="site-menu__list__item"><a href="/">TOP</a></li>
                <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
            </ul>
        </nav>
    </div>
</header>

フッター

<footer class="site-footer">
    <nav class="site-footer__site-menu site-menu">
        <ul class="site-menu__list">
            <li class="site-menu__list__item"><a href="/">TOP</a></li>
            <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
        </ul>
    </nav>
    <small>©&ensp;DWANGO&ensp;Co.,&ensp;Ltd.</small>
</footer>

パーシャルができたらテンプレートから該当の部分を削除して例のごとくパーシャルを読み込むのですが、ここで一つ注意が必要です。ヘッダーやフッターは「すべてのページ」で使うために部品化しました。そのため読み込む場所は「すべてのページに反映できるところ」にしたいのですが、単純に削除したところ(テンプレートの上部と下部)に読みこんでしまうとトップページにしか反映されず望んだ挙動はしてくれません。
では、どこに読みこめばよいのでしょう?答えは「レイアウト」です。

レイアウト

<html>
    <head>
        <title>イベントポータルサイト</title>
        <link href="/assets/style/style.css" rel="stylesheet">
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </head>
    <body>
        <div class="wrap">
            <%= partial "header" %>
            <%= yield %>
            <%= partial "footer" %>
        </div>
    </body>
</html>

ページの構造のところで簡単に触れましたが、レイアウトは「ページの枠」であり、テンプレートが「ページのコンテンツ」です。このように分けることで「レイアウト(ページの大きな構造)さえも一つの部品として扱えるようになり、複数のページで共有することができる」ようになります。すると、複数のページの大きな構成や共通パーツはレイアウトによって保ちつつ、ページ特有のコンテンツ部分はテンプレート内部で表現することができ、より効率的に開発が行えるようになるのです。
そのため、ヘッダーやフッターのような複数のページで必要な部品は、そのページに限定されてしまうテンプレートではなく複数ページにわたって反映できるレイアウトで読み込む方が効率がよいのです。

ちょっと説明が多くなってしまいましたね。作業に戻りましょう。レイアウトへの読み込みが完了したら再度保存し、ブラウザを見てみてください。リロードがはしっても問題なく表示されているようでしたら、ここまで問題なしです。

 

「他の場所でも使えそうなもの」と「ここでしか使われないもの」に分けてみる

次はまだテンプレートに残っている部分で、他のページでも使えそうなものをパーシャルにしてみましょう。

他のページでも使えそうなもの
  • サイドカラム
このページ特有そうなもの
  • それ以外の部分

 

もうやり方はわかってきましたよね?パーシャルに切り出して該当部分の削除し、読み込むところまでを一気にやっちゃいましょう。

サイドカラム

<aside class="side-contents">
    <div class="tweet-button">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.chokaigi.jp/" data-text="ニコニコ超会議2016 2016/4/29(金・祝)30(土) 幕張メッセで開催!" data-hashtags="chokaigi"><span>つぶやく</span></a>
    </div>
    <div class="twitter-widget">
        <a class="twitter-timeline" href="https://twitter.com/hashtag/chokaigi" data-widget-id="701734104883027968">#chokaigi のツイート</a>
    </div>
</aside>

テンプレート

<main>
    <div class="kv"></div>
    <div class="main-contents">
        <section class="recommended">
            <h1 class="recommended__headline">おすすめ</h1>
            <article class="recommended__article">
                <a href="#" class="recommended__article__clickable-area">
                    <img src="assets/img/middleman-50d9de35.png" alt="おすすめ記事のサムネイル" class="recommended__article__img">
                    <div class="recommended__article__information">
                        <h1 class="recommended__article__information__title">おすすめ記事のタイトル</h1>
                        <p class="recommended__article__information__description">説明文が入ります。</p>
                    </div>
                </a>
            </article>
        </section>
        <section class="pickup">
            <h1 class="pickup__headline">ピックアップ</h1>
            <ul>
                <li>
                    <article class="pickup__article">
                        <a href="#" class="pickup__article__clickable-area">
                            <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                            <div class="pickup__article__imformation">
                                <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                <p lass="pickup__article__information__description">説明文が入ります。</p>
                            </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="pickup__article">
                        <a href="#" class="pickup__article__clickable-area">
                            <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                            <div class="pickup__article__imformation">
                                <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                <p lass="pickup__article__information__description">説明文が入ります。</p>
                            </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="pickup__article">
                        <a href="#" class="pickup__article__clickable-area">
                            <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                            <div class="pickup__article__imformation">
                                <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                <p lass="pickup__article__information__description">説明文が入ります。</p>
                            </div>
                        </a>
                    </article>
                </li>
            </ul>
        </section>
    </div>
    <%= partial "side-contents" %>
</main>

ブラウザを確認して特に問題がなかったら、これでトップページが完成しました。

他のページも作ってみる

同じ要領で他のページも作ってみましょう。過程は割愛して、完成したコードを下に置いておきます。適宜ファイルを設置して確認してみてください。先ほど作ったレイアウトが同様に使われていたり、サイドカラムが読み込まれているところが確認できると思います。

<main>
    <div class="contents">
        <section class="event-summary">
            <h1 class="event-summary__headline">イベント概要</h1>
            <section class="about-event">
                <div class="about-event__information">
                    <h2 class="about-event__information__headline">このイベントとは?</h2>
                    <p class="about-event__information__description">説明が入ります。</p>
                </div>
                <img src="../assets/img/middleman.png" alt="イベントイメージ" class="about-event__img">
            </section>
            <section class="event-data">
                <h2 class="event-data__headline">開催概要</h2>
                <dl class="event-data__information">
                    <dt class="event-data__information__item">名称:</dt>
                    <dd class="event-data__information__description">とあるイベント</dd>
                    <dt class="event-data__information__item">会期:</dt>
                    <dd class="event-data__information__description">  2016年4月29日(金・祝)〜2016年4月30日(土)</dd>
                    <dt class="event-data__information__item">会場:</dt>
                    <dd class="event-data__information__description">  幕張メッセ国際展示場1〜11ホール、イベントホール</dd>
                </dl>
            </section>
            <section class="access">
                <h2 class="access__headline">アクセス</h2>
                <dl class="access__information">
                    <dt class="access__information__item">会場:</dt>
                    <dd class="access__information__description">幕張メッセ国際展示場1〜11ホール</dd>
                    <dt class="access__information__item">最寄り駅:</dt>
                    <dd class="access__information__description">JR京葉線海浜幕張駅</dd>
                </dl>
            </section>
        </section>
    </div>
</main>

これで複数のページで共通要素を持つサイトが動くところまで作ることができました。

ビルドしてみる

あとは今まで作ってきたプロジェクトをビルドして静的ファイルとして吐き出しましょう。前編でご紹介したコマンドを実行してください。

$ bundle exec middleman build

処理が完了すると、トップディレクトリ下(sourceディレクトリと同階層)にbuildディレクトリが下記のような構造で出来上がっていると思います。

built下のディレクトリレイアウト

試しにindex.htmlを見てみましょう。

<!doctype html>
<html>
    <head>
        <title>イベントポータルサイト</title>
        <link href="/assets/style/style-5d8674db.css" rel="stylesheet">
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </head>
    <body>
        <div class="wrap">
            <header class="site-header">
                <div class="site-header__container">
                    <h1><a href="/" class="site-header__container__site-title">イベントポータルサイト</a></h1>
                    <nav class="site-header__container__site-menu site-menu">
                        <ul class="sute-menu__list">
                            <li class="site-menu__list__item"><a href="/">TOP</a></li>
                            <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <main>
                <div class="kv"></div>
                <div class="main-contents">
                    <section class="recommended">
                        <h1 class="recommended__headline">おすすめ</h1>
                        <article class="recommended__article">
                            <a href="#" class="recommended__article__clickable-area">
                                <img src="assets/img/middleman-50d9de35.png" alt="おすすめ記事のサムネイル" class="recommended__article__img">
                                <div class="recommended__article__information">
                                    <h1 class="recommended__article__information__title">おすすめ記事のタイトル</h1>
                                    <p class="recommended__article__information__description">説明文が入ります。</p>
                                </div>
                            </a>
                        </article>
                    </section>
                    <section class="pickup">
                        <h1 class="pickup__headline">ピックアップ</h1>
                        <ul>
                            <li>
                                <article class="pickup__article">
                                    <a href="#" class="pickup__article__clickable-area">
                                        <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                                        <div class="pickup__article__imformation">
                                            <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                            <p lass="pickup__article__information__description">説明文が入ります。</p>
                                        </div>
                                    </a>
                                </article>
                            </li>
                            <li>
                                <article class="pickup__article">
                                    <a href="#" class="pickup__article__clickable-area">
                                        <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                                        <div class="pickup__article__imformation">
                                            <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                            <p lass="pickup__article__information__description">説明文が入ります。</p>
                                        </div>
                                    </a>
                                </article>
                            </li>
                            <li>
                                <article class="pickup__article">
                                    <a href="#" class="pickup__article__clickable-area">
                                        <img src="assets/img/middleman-50d9de35.png" alt="ピックアップ記事のサムネイル" class="pickup__article__img">
                                        <div class="pickup__article__imformation">
                                            <h1 class="pickup__article__information__title">ピックアップ記事のタイトル</h1>
                                            <p lass="pickup__article__information__description">説明文が入ります。</p>
                                        </div>
                                    </a>
                                </article>
                            </li>
                        </ul>
                    </section>
                </div>
                <aside class="side-contents">
                    <div class="tweet-button">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.chokaigi.jp/" data-text="ニコニコ超会議2016 2016/4/29(金・祝)30(土) 幕張メッセで開催!" data-hashtags="chokaigi"><span>つぶやく</span></a>
                    </div>
                    <div class="twitter-widget">
                        <a class="twitter-timeline" href="https://twitter.com/hashtag/chokaigi" data-widget-id="701734104883027968">#chokaigi のツイート</a>
                    </div>
                </aside>
            </main>
            <footer class="site-footer">
                <nav class="site-footer__site-menu site-menu">
                    <ul class="site-menu__list">
                        <li class="site-menu__list__item"><a href="/">TOP</a></li>
                        <li class="site-menu__list__item"><a href="/about/">ABOUT</a></li>
                    </ul>
                </nav>
                <small>©&ensp;DWANGO&ensp;Co.,&ensp;Ltd.</small>
            </footer>
        </div>
    </body>
</html>

様々なファイルに切り出したコードがちゃんと一つにまとまっていますね。リンクもしっかり相対パスになっています。
ここにあるファイル群を何処かのサーバーにそのままおいておけば、サイトの公開が完了です。
ローカルで開いてみてもパスが通っていないので注意ですよ!お疲れ様でした!

 

まとめ

三回にわたってご紹介してきたMiddleman、いかがでしたでしょうか?
記事の構成上泣く泣く削った説明もあり、かなり乱暴にまとめてしまっているところもありますが…ざっくりとでもイメージを掴んでいただけていたら幸いです。

最後に、ここまで読んでいただきまして本当にありがとうございました!
またいつか記事を書くときまで。

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

chii

chii

Designer

元エンジニアのデザイナー。観葉植物が好きで、家がジャングルになってきました。

ドワンゴデザイナー メンバー募集 ! !