Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@NaokiIshimura

Railsアプリで外部提供のJavaScriptファイルを利用する

More than 3 years have passed since last update.

はじめに

解説で利用したJavaScript

JavaScriptを読み込めているかをページの見た目で判断可能なので、解説にはHolder.jsを利用します。

Holder.jsとは

WEBサイト上にダミー画像を生成するJavaScriptです。

xxx.html.erb
<img data-src="holder.js/200x100" alt="image"/>

JavaScriptが正常に読み込まれてる場合は、ダミー画像が表示されます。

rails-vendor-js01.png

JavaScriptが正常に読み込まれてない場合は、ダミー画像が表示されなくなります。
(画像が読み込めない時の表示はブラウザによって異なります)

rails-vendor-js02.png

準備:JavaScriptファイルの配置

jsファイルをダウンロードして、vendor/assets/javascriptsに配置する。
holder.jsの場合はトップページからDL可能)

rails-vendor-js03.png

補足:
Holder.jsはgemも提供されてますが、gemが提供されてないJavaScriptを利用するケースも想定して
gemを利用しない手順で解説します。

複数のページで利用するJavascriptの場合

app/assets/javascripts/application.jsでrequireすることで自動的に展開されるassetsの対象に含めることができるようになります。

app/assets/javascripts/application.js
//= require holder

rails-vendor-js06.png

各ページでは明示的にインクルードしなくてもJavaScriptが利用することができるようになります。

app/views/xxx/xxx.html.erb
<img data-src="holder.js/200x100" alt="image"/>

rails-vendor-js01.png

特定のページで利用するJavascriptの場合

補足:こちらの投稿を参考にさせていただきました。
Railsでvendor/assets/javascripts以下にあるファイルを特定のページでのみ使用する - Qiita

特定のページで利用したい場合はconfig/initializers/assets.rbでプリコンパイルの対象に指定しておくことで、JavaScriptを明示的にインクルードさせることができるようになります。

config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( holder.js )
app/views/xxx/xxx.html.erb
<%= javascript_include_tag "holder" %>
<img data-src="holder.js/200x100" alt="image"/>

rails-vendor-js08.png

rails-vendor-js01.png

補足:AssetNotPrecompiled in xxx エラーの解決方法

問題点

インクルードするJavaScriptがプリコンパイルの対象に含まれてなかった場合、ページへアクセスすると、Sprockets::Rails::Helper::AssetNotPrecompiled in xxxエラーが表示されます。

app/views/xxx/xxx.html.erb
<%= javascript_include_tag "holder" %>
<img data-src="holder.js/200x100" alt="image"/>

rails-vendor-js07.png

解決方法

エラーメッセージに従ってconfig/initializers/assets.rbの追記とサーバ再起動を実施すれば、JavaScriptがインクルードされるようになります。

config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( holder.js )

rails-vendor-js01.png

補足:Holder.js利用時の注意点

問題点

imgタグでsrcの指定をsrcとしてもダミー画像は表示されますが、ブラウザによってはインスペクタ上で警告が出力される場合があります。

xxx.html.erb
<img src="holder.js/200x100" alt="image"/>

rails-vendor-js01.png

補足:Safarの警告メッセージ
Failed to load resource: the server responded with a status of 404 (Not Found)

rails-vendor-js04.png

解決方法

imgタグでsrcdata-srcと修正することで警告が表示されなくなります。

xxx.html.erb
<img data-src="holder.js/200x100" alt="image"/>

rails-vendor-js05.png

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
NaokiIshimura
Ruby on Rails Engineer.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?