Rails入門3:スマートフォン向けの画面にしよう vol.2

Rails入門3: Railsサービスを機能アップしてみよう

#04:スマートフォン向けの画面にしよう vol.2

動画実技

次のチャプターへ

この動画を見るにはpaiza会員登録のうえ
有料会員登録が必要です

無料会員登録して始める

★ 実技1

実技課題「Googleマップの横幅の調整」

右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作ってあり、Googleマップが導入されています。

エディタを使って、app/views/cats/show.html.erbを修正して、ウィンドウの幅に合わせて、Googleマップの横幅が変わるようにください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

このチャプターでは、引き続き、Railsアプリをスマートフォン向けの画面に変えたいと思います。今度は、詳細ページと登録ページのレイアウトを整理しましょう。

地図を画面に収める

app/views/shops/show.html.erb

<%= content_tag(:iframe,
    'map',
    src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&amp;q=' + @shop.address,
    width: '100%',
    height: 320,
    frameborder: 0) %>

詳細ページにボタンを設置

app/views/shops/show.html.erb

<%= link_to 'Delete', @shop,
                    method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' %>
<%= link_to 'Edit', edit_shop_path(@shop), class: 'btn btn-primary' %>
<%= link_to 'Back', shops_path, class: 'btn btn-default' %>

登録ページに戻るボタンを追加

app/views/shops/＿form.html.erb

<div class='actions'>
  <div class='form-group'>
    <div class='col-sm-offset-2 col-sm-10'>
      <%= f.submit 'Submit', class: 'btn btn-success' %>
      <%= link_to 'Back', :back, class: 'btn btn-default' %>
    </div>
  </div>
</div>

新規と更新ページのボタンを削除

app/views/shops/edit.html.erb

<h1>Editing Shop</h1>

<%= render 'form', shop: @shop %>

<!-- <%= link_to 'Show', @shop %> | -->
<!-- <%= link_to 'Back', shops_path %> -->

app/views/shops/new.html.erb

<h1>New Shop</h1>

<%= render 'form', shop: @shop %>

<!-- <%= link_to 'Back', shops_path %> -->

参考になるWebページ

- Linuxコマンド集 - ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20060224/230573/

- Ruby on Railsサービス開発逆引き辞典
http://code.materializer.co/index.html

- Railsドキュメント
http://railsdoc.com/

有料プランで現役エンジニアに相談可能！

プログラミング学習 > Ruby > Webアプリ開発入門 Rails編 > Rails入門3: Railsサービスを機能アップしてみよう > スマートフォン向けの画面にしよう vol.2