Railsの静的ページについて勉強したので、昔作成したForce.comサイトを参考にHerokuで動かすWebサイト開発について試してみました。
GitHub
作成中の動画
作成時の手順
ベースになる枠組み作成の手順は下記リンク先の手順どおりです。
Bootstrapは使わないのとデザインは別なのでHomeページの枠組みをつくるあたりまで一緒です。
Rails newコマンドでアプリの作成
$ cd rails_projects $ rails new sites --skip-test-unit $ cd sites
CSSの適用
custom.css.scssを作成して、CSSを記載する
$ subl app/assets/stylesheets/custom.css.scss
ヘッダーの作成
<header id="pageHead">
<div id="siteTitle">
<h1>T-Yoshikawa Apps</h1>
</div>
<p id="catchcopy">
HTMLとCSSの勉強のためにつくったForce.comサイトです。「HTMLとCSSのデザインの教科書」のサンプルを元につくってみました。
</p>
<nav class="globalNavi">
<ul>
<li>
<a href="#">ホーム</a>
</li>
<li>
<a href="#">つくったひと</a>
</li>
<li>
<a href="#">つくったもの</a>
</li>
<li>
<a href="#">おといあわせ</a>
</li>
</ul>
</nav>
</header>
フッターの作成
<footer id="pageFoot">
<p id="copyright">
<small>
Copyright© Force.com Developer All Rights Reserved.
</small>
</p>
</footer>
JavaScript Libraryの準備
『app/assets/javascrits』内にbxsliderを入れる
ホームページを作成
<div id="pageBody">
<section class="mainVisual">
<ul class="bxslider">
<li>
<div class="mainVisualText">
<h1>はじめてのSaasy</h1>
<p>Cloudforce2012ではじめてSaasyにあえました。<br/>写真も撮れてよかったです。</p>
</div>
<img src="<%= asset_path "photo/Saasy.jpg" %>" alt="" width="980" height="500" />
</li>
<li>
<div class="mainVisualText">
<h1>Cloudforce2012</h1>
<p>Cloudforce2012の会場の様子です。</p>
</div>
<img src="<%= asset_path "photo/MeetingPlace.jpg" %>" alt="" width="980" height="500" />
</li>
<li>
<div class="mainVisualText">
<h1>Developer Zone</h1>
<p>Developer Zoneでは開発者向けのお話が聞けました。</p>
</div>
<img src="<%= asset_path "photo/DevZone.jpg" %>" alt="" width="980" height="500" />
</li>
</ul>
</section>
<section class="portfolioIndex">
<article>
<a href="#">
<img src="<%= asset_path "photo/Saasy.jpg" %>" alt="Demo3" width="300" height="163" />
</a>
<div>
<h2>はじめてのSaasy</h2>
</div>
<p>
Cloudforce2012ではじめてSaasyにあえました。
<br/>
写真も撮れてよかったです。
</p>
</article>
<article>
<a href="#">
<img src="<%= asset_path "photo/MeetingPlace.jpg" %>" alt="Demo2" width="300" height="163" />
</a>
<h2>Cloudforce2012</h2>
<p>Cloudforce2012の会場の様子です。</p>
</article>
<article>
<a href="#">
<img src="<%= asset_path "photo/DevZone.jpg" %>" alt="Demo1" width="300" height="163" />
</a>
<h2>Developer Zone</h2>
<p>Developer Zoneでは開発者向けのお話が聞けました。</p>
</article>
</section>
<section class="news">
<div class="newsTitle">
<h1>おしらせ</h1>
</div>
<table>
<tr>
<th>
<time datetime="2014-01-01">2014年01月03日</time>
</th>
<td>
HTML/CSSデザインの教科書を読みながらつくったサンプルページを元にForce.comサイトをつくってみました。
</td>
</tr>
<tr>
<th>
<time datetime="2013-12-29">2013年12月29日</time>
</th>
<td>
HTML/CSSデザインの教科書を読みおわりました。
</td>
</tr>
<tr>
<th>
<time datetime="2013-12-19">2013年12月19日</time>
</th>
<td>
HTML/CSSデザインの教科書を読みはじめました。
</td>
</tr>
</table>
</section>
</div>
おといあわせページを作成
<div id="pageBody">
<div id="pageBodyMain">
<article class="articleDetail">
<div class="pageTitle">
<h1>おといあわせ</h1>
</div>
<p>サンプルを元につくったおといあわせページです。</p>
<div class="btnLink">
<a href="https://plus.google.com/u/0/+TaikiYoshikawa/posts" target="_blank">
おといあわせフォーム
</a>
</div>
<p>ブログとかTwitterのリンクです。</p>
<section>
<table>
<caption>
<h2 class="heading-typeB">Taiki Yoshikawa</h2>
</caption>
<tr>
<th>
ブログ
</th>
<td>
<a herf="http://tyoshikawa1106.hatenablog.com/" target="_blank">
http://tyoshikawa1106.hatenablog.com/
</a>
</td>
</tr>
<tr>
<th>
Twitter
</th>
<td>
<a href="https:twitter.com/tyoshikawa1106" target="_blank">
@tyoshikawa1106
</a>
</td>
</tr>
</table>
</section>
</article>
</div>
<div id="pageBodySub">
<%= render 'layouts/newsList' %>
</div>
</div>
サイドメニューを作成
<section class="newsList">
<div class="title">
<h2>おしらせ</h2>
</div>
<ul>
<li>
<time datetime="2014-01-01">2014年01月03日</time>
HTML/CSSデザインの教科書を読みながらつくったサンプルページを元にForce.comサイトをつくってみました。
</li>
<li>
<time datetime="2013-12-29">2013年12月29日</time>
HTML/CSSデザインの教科書を読みおわりました。
</li>
<li>
<time datetime="2013-12-19">2013年12月19日</time>
HTML/CSSデザインの教科書を読みはじめました。
</li>
</ul>
</section>
つくったひとページを作成
- about.html.erbを作成する
- routes.rbを編集
- static_pages_controller.rbを作成
<div id="pageBody">
<div id="pageBodyMain">
<article class="articleDetail">
<div class="pageTitle">
<h1>つくったひと</h1>
</div>
<div class="imageCenter">
<img src="<%= asset_path "photo/about.jpg" %>" alt="" width="120" height="120"/>
</div>
<p>Force.com Developer</p>
<p>
HTMLとCSSの勉強中です。
</p>
<p>
HTML/CSSデザインの教科書すごくわかりやすかったです。
</p>
<div class="referenceSite">
<h2>参考：HTML/CSSのデザインの教科書</h2>
<br/>
<a href="http://htmlcss.cat-speak.net/" target="_blank">
http://htmlcss.cat-speak.net/
</a>
</div>
</article>
</div>
<div id="pageBodySub">
<%= render 'layouts/newsList' %>
</div>
</div>
つくったものページを作成する
<div id="pageBody">
<div id="pageBodyMain">
<section>
<div class="pageTitle">
<h1>つくったもの</h1>
</div>
<article class="articleList">
<a src="#">
<div class="articleListText">
<h1>はじめてのSaasy</h1>
<p>
Cloudforce2012ではじめてSaasyにあえました。
<br/>
写真も撮れてよかったです。
</p>
</div>
<div class="articleListImage">
<img src="<%= asset_path "photo/Saasy.jpg" %>" alt="Demo3" width="300" height="163"/>
</div>
</a>
</article>
<article class="articleList">
<a href="#">
<div class="articleListText">
<h1>Cloudforce2012</h1>
<p>Cloudforce2012の会場の様子です。</p>
</div>
<div class="articleListImage">
<img src="<%= asset_path "photo/MeetingPlace.jpg" %>" alt="Demo2" width="300" height="163"/>
</div>
</a>
</article>
<article class="articleList">
<a href="#">
<div class="articleListText">
<h1>Developer Zone</h1>
<p>
Developer Zoneでは開発者向けのお話が聞けました。
</p>
</div>
<div class="articleListImage">
<img src="<%= asset_path "photo/DevZone.jpg" %>" alt="Demo1" width="300" height="163"/>
</div>
</a>
</article>
</section>
</div>
<div id="pageBodySub">
<%= render 'layouts/portfolioLink' %>
<%= render 'layouts/newsList' %>
</div>
</div>
つくったものメニューを作成する
<nav class="localNavi">
<div class="title">
<h2>つくったもの</h2>
</div>
<ul>
<li><a href="#">はじめてのSaasy</a></li>
<li><a href="#">Cloudforce2012</a></li>
<li><a href="#">Developer Zone</a></li>
</ul>
</nav>
CSSで画像を使用する
background-image: image-url("icon/ico_arrow.png");
つくったものページ1を作成する
<div id="pageBody">
<div id="pageBodyMain">
<article class="articleDetail">
<header class="articleDetailHead">
<div class="pageTitle">
<h1>Developer Zone</h1>
</div>
<figure>
<img src="<%= asset_path "photo/DevZone.jpg" %>" alt="" width="720" height="390"/>
</figure>
<div class="articleListText">
<h1>Developer Zone</h1>
<p>Developer Zoneでは開発者向けのお話が聞けました。</p>
</div>
</header>
<section class="articleDetailBody">
<section>
<div class="heading-typeB">
<h3>Developer Zoneの様子 1</h3>
</div>
<figure>
<img src="<%= asset_path "photo/DevZone1.jpg" %>" alt="" width="720" height="390" />
<figcaption>Developer Zoneの様子 1</figcaption>
</figure>
</section>
<section>
<div class="heading-typeB">
<h3>Developer Zoneの様子 2</h3>
</div>
<figure>
<img src="<%= asset_path "photo/DevZone2.jpg" %>" alt="" width="720" height="390" />
<figcaption>Developer Zoneの様子 2</figcaption>
</figure>
</section>
</section>
</article>
</div>
<div id="pageBodySub">
<%= render 'layouts/portfolioLink' %>
<%= render 'layouts/newsList' %>
</div>
</div>
つくったものページ2を作成する
<div id="pageBody">
<div id="pageBodyMain">
<article class="articleDetail">
<header class="articleDetailHead">
<div class="pageTitle">
<h1>Cloudforce2012</h1>
</div>
<figure>
<img src="<%= asset_path "photo/MeetingPlace.jpg" %>" alt="" width="720" height="390"/>
</figure>
<div class="articleListText">
<h1>Cloudforce2012</h1>
<p>
Cloudforce2012の会場の様子です。
</p>
</div>
</header>
<section class="articleDetailBody">
<section>
<div class="heading-typeB">
<h3>会場の様子 1</h3>
</div>
<figure>
<img src="<%= asset_path "photo/MeetingPlace1.jpg" %>" alt="" width="720" height="390" />
<figcaption>会場の様子 1</figcaption>
</figure>
<p>基調講演でマーク・ベニオフのお話が聞けました。</p>
</section>
<section>
<div class="heading-typeB">
<h3>会場の様子 2</h3>
</div>
<figure>
<img src="<%= asset_path "photo/MeetingPlace2.jpg" %>" alt="" width="720" height="390"/>
<figcaption>会場の様子 2</figcaption>
</figure>
<p>基調講演の会場はこんな感じでした。</p>
</section>
<section>
<div class="heading-typeB">
<h3>会場の様子 3</h3>
</div>
<figure>
<img src="<%= asset_path "photo/MeetingPlace3.jpg" %>" alt="" width="720" height="390"/>
<figcaption>会場の様子 3</figcaption>
</figure>
<p>基調講演以外でもいろいろなお話が聞けました。</p>
</section>
<section>
<div class="heading-typeB">
<h3>会場の様子 4</h3>
</div>
<figure>
<img src="<%= asset_path "photo/MeetingPlace4.jpg" %>" alt="" width="720" height="390"/>
<figcaption>会場の様子 4</figcaption>
</figure>
<p>SaasyとChattyがパフォーマンスしてました。</p>
</section>
<section>
<div class="heading-typeB">
<h3>会場の様子 5</h3>
</div>
<figure>
<img src="<%= asset_path "photo/MeetingPlace5.jpg" %>" alt="" width="720" height="390"/>
<figcaption>会場の様子 5</figcaption>
</figure>
<p>太鼓のパフォーマンスみれました。</p>
</section>
</section>
</article>
</div>
<div id="pageBodySub">
<%= render 'layouts/portfolioLink' %>
<%= render 'layouts/newsList' %>
</div>
</div>
つくったものページ3を作成する
<div id="pageBody">
<div id="pageBodyMain">
<article class="articleDetail">
<header class="articleDetailHead">
<div class="pageTitle">
<h1>はじめてのSaasy</h1>
</div>
<figure>
<img src="<%= asset_path "photo/Saasy.jpg" %>" alt="" width="720" height="390"/>
</figure>
<div class="articleListText">
<h1>はじめてのSaasy</h1>
<p>
Cloudforce2012ではじめてSaasyにあえました。
<br/>
写真も撮れてよかったです。
</p>
</div>
</header>
<section class="articleDetailBody">
<section>
<div class="heading-typeB">
<h3>Saasy</h3>
</div>
<figure>
<img src="<%= asset_path "photo/Saasy.jpg" %>" alt="" width="720" height="390"/>
<figcaption>Saasyです。前は赤色、後ろは青色になっています。</figcaption>
</figure>
</section>
<section>
<div class="heading-typeB">
<h3>Chatty</h3>
</div>
<figure>
<img src="<%= asset_path "photo/Chatty.jpg" %>" alt="" width="720" height="390"/>
<figcaption>Chattyです。残念ながら撮影に失敗しました。</figcaption>
</figure>
</section>
</section>
</article>
</div>
<div id="pageBodySub">
<%= render 'layouts/portfolioLink' %>
<%= render 'layouts/newsList' %>
</div>
</div>
リンク表示について
各ページができたので、リンク部分を作っていきます。
テキストリンク
<%= link_to "ホーム", root_path %>
画像リンクの例
<%= link_to image_tag('photo/Saasy.jpg', { :size => '300x163', :alt => 'Demo3'}), portfolio03_path %>
Git PushとHerokuデプロイ
リンク部分ができたらHerokuにデプロイしてみます。
$ git add . $ git commit -m "commit" $ git push $ git push heroku master $ heroku open
ひとまずこんな感じです。RspecをつかったテストとかCSSの調整とかエラーページの対応なども行う必要があると思うのですが、まだ勉強中のため今回はここまでになります。
