読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:Herokuで動かすWebサイト開発について勉強しました

Railsの静的ページについて勉強したので、昔作成したForce.comサイトを参考にHerokuで動かすWebサイト開発について試してみました。

今回作ってみたHeroku上のWebサイト

f:id:tyoshikawa1106:20150807234855p:plain

https://tyoshikawa1106-rails-sites.herokuapp.com/

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&copy; 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の調整とかエラーページの対応なども行う必要があると思うのですが、まだ勉強中のため今回はここまでになります。