『Ruby on Rails 5 アプリケーションプログラミング』を学習する10

序文
GitHub
進捗
コード実装部分
実行結果
感想
BGM

Ruby on Rails 5アプリケーションプログラミング

作者: 山田祥寛
出版社/メーカー: 技術評論社
発売日: 2017/04/14
メディア: 大型本
この商品を含むブログを見る

序文

「Ruby on Rails 5 アプリケーションプログラミング」学習10日目。
今日はもう１エントリ書きたいのでさらっと。

GitHub

github.com

進捗

第4章ビュー開発
- 4.4 外部リソース指定のためのビューヘルパー
  （学習時間：２時間）

コード実装部分

↓/config/routes.rb

# 省略

  get  'view/image_tag'

  get  'view/audio'
  get  'view/video'

  get  'view/path'
end

↓/app/views/view/image_tag.html.erb

<%# image_tagの使い方 %>

<%# シンプルな使い方 %>
<%# ファイル名のみの場合は/app/assets/imagesフォルダーが参照される %>
<%= image_tag 'yuki_sutekina15sai.jpg' %><br />
<%# <img src="/assets/yuki_sutekina15sai-2a7a2ac1bf0f5278a8cc2efbaf36d4936d5454c2000db30881a33e76fd111ecd.jpg" alt="Yuki sutekina15sai" /><br /> %>

<%# /で始まっているURLを指定した場合はpublicフォルダー配下を参照する %>
<%= image_tag '/icons/aoikajitsu_aokaji.jpg' %><br />
<%# <img src="/icons/aoikajitsu_aokaji.jpg" alt="Aoikajitsu aokaji" /><br /> %>

<%# 外部URLを参照する方法 %>
<%= image_tag 'http://kankeli.net/review100/images/cd/scarfandthesuspenders_invitation.jpg' %><br />
<%# <img src="http://kankeli.net/review100/images/cd/scarfandthesuspenders_invitation.jpg" alt="Scarfandthesuspenders invitation" /><br /> %>

<%# altやサイズを指定する例１ %>
<%= image_tag 'kentfunayama_boyslife.jpg', alt: 'Kent Funayama', size: '120x90' %><br />
<%# <img alt="Kent Funayama" src="/assets/kentfunayama_boyslife-9ff901be894fa08dcd9da465250ac560cbbe037e12bf13663793acffea42cd97.jpg" width="120" height="90" /><br /> %>

<%# altやサイズを指定する例２ %>
<%= image_tag 'dokkoisehouse_pilotisgrow.jpg', alt: 'DOKKOISE HOUSE', width: 120, height: 90 %><br />
<%# <img alt="DOKKOISE HOUSE" width="120" height="90" src="/assets/dokkoisehouse_pilotisgrow-73a8770253223972b0e9d21f69d9babd3ef120ba83e3b1349192780393ae7e03.jpg" /><br /> %>

↓/app/views/view/audio.html.erb

<%# audio_tagの使い方 %>

<%# デフォルトでassets/audiosを参照する（自分で作る） %>
<%# あとはimages同様 %>
<%# controls: コントロールパネルを表示 %>
<%= audio_tag 'croquette.mp3', autoplay: false, controls: true %>
<%# <audio controls="controls" src="/assets/croquette-c701ffca16253d6aafcf6ac6b49e593dfc5305f0fba46497a59427e8446533df.mp3"></audio> %>

↓/app/views/view/video.html.erb

<%# video_tagの使用例 %>

<%# デフォルトでassets/video
sを参照する（自分で作る） %>
<%# あとはimages同様 %>
<%# controls: コントロールパネルを表示 %>
<%# poster: サムネイル画像 %>
<%= video_tag 'waterfall.mp4', controls: true, autoplay: false,
  loop: true, size: '300x150', poster: 'dokkoisehouse_pilotisgrow.jpg' %>
<%# <video controls="controls" loop="loop" poster="/assets/dokkoisehouse_pilotisgrow-73a8770253223972b0e9d21f69d9babd3ef120ba83e3b1349192780393ae7e03.jpg" width="300" height="150" src="/assets/waterfall-cd42895e0c16f94f8c7456be79fa7f7f5307727f4fa125185cd4e93e97194869.mp4"></video> %>

↓/app/views/layouts/application.html.erb

  # 省略(↓は<head>内に書く)

    <%# auto_discovery_link_tagの使い方（よくわからん） %>
    <%= auto_discovery_link_tag(:rss,
    { controller: :cds, action: :index, id: :rails },
    title: 'カロリーメイトください'
    ) %>
    <%# <link rel="alternate" type="application/rss+xml" title="カロリーメイトください" href="http://localhost:3000/cds?charset=utf-8&amp;id=rails" /> %>

    <%# アイコン画像の指定方法 %>
    <%# /assets/images/配下を参照 %>
    <%# ファイル名を指定しない場合favicon.ico %>
    <%= favicon_link_tag %>
    <%# ファイル名を指定することもできる %>
    <%# 処理は上と同じ %>
    <%#= favicon_link_tag 'favicon.ico' %>
    <%# .ico以外のファイルを指定することもできる %>
    <%#= favicon_link_tag 'fav-icon.png', type: 'image/png' %>
  </head>

↓/app/views/view/path.html.erb

<%# xxxxx_path/xxxx_urlメソッドの使い方 %>

<%# asetts配下を参照して適切なURLを返してくれる %>
<%# assets以下のフォルダ構成は返り値に反映されないようだ %>
<%= image_path('dokkoisehouse_pilotisgrow') %><br />
<%# /assets/dokkoisehouse_pilotisgrow-73a8770253223972b0e9d21f69d9babd3ef120ba83e3b1349192780393ae7e03.jpg %>

<%# assets配下にファイルがなかった場合はpublic配下からのパスが返される %>
<%# …らしいがエラーになった。　仕様が変わった？ %>
<%#= image_path('gadoro_hanamizuki') %><br />

<%= javascript_path('application') %><br />
<%# /assets/application-1e00fa7ee3e2b3380f40119fc3db081e61edb35c03a8c96b741f71883e039c2a.js %>

<%# xxxx_urlメソッドはパスではなくURL形式で返す %>
<%= stylesheet_url('application') %>
<%# http://localhost:3000/assets/application-fa47f67932f8605e167f6c5bc47f3025890a16ff92745062ec106e4882be935c.css %>

実行結果

f:id:yjkym:20180402144632p:plain

感想

リンク以外のリソース読み込み関連のビューヘルパーの基本的な使い方について。
今、Railsアプリは全部Herokuで動かしてるんだけど、Herokuって画像は置けないんだよね？
AWSのS3を使うのが常道らしいんだけど、宗教上の理由でAmazon関連のサービス極力使いたくないんだよね…。
（別に正義感とかじゃなくて私利的な理由で）

普段は別のレンタルサーバーにあげて、直リンしてるんだけど、他にもやりかたあるみたいだからまた調べてみよう。
カロリーメイトください。

BGM

タイムカプセル / イズミカワソラ www.youtube.com