GitHubからプラグインをダウンロード後、パスの書き方が分からない。

Question

前提・実現したいこと

画像の様に、世界中の国名及び国旗をセレクトボックスから選択できるプラグイン
がありましたので、これをローカル環境で使えるようにしたいです。

リンクから該当のプラグインをダウンロードしました。
READMEに沿って以下のコードを書いたのですが、ビューでプラグインが読み込まれません。

エラーメッセージは出ずinputタグがそのまま表示されておりますので、単純にプラグインが読み込まれていないのだと思います。

該当のソースコード

application.html.erb

    <link rel="stylesheet" href="build/css/countrySelect.css">

user_edit.html.erb

        <input type="text" id="country">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="build/js/countrySelect.min.js"></script>
        <script>
          $("#country").countrySelect();
        </script>

<link href="build/css/...">の様に、URLではなくパスを記載するのが今回初めてなのですが、プラグインの保存先が間違っているのかパスの書き方がまずいのか、よく分かりません。
どなたかご助言を頂けますと有難いです。

試したこと

プラグインの保存先をアプリの直下にして、パスも以下の様にしてみましたが、結果は同じでした。
href="C:\Hoge\アプリ名\build\css\countrySelect.css"

補足情報（FW/ツールのバージョンなど）

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3

Comments

[m.ts10806]

どこに対象のファイルを置いたのでしょう。
下記はWebサーバで実行するという観点からNGです。
>C:\Hoge\アプリ名\build\
「サーバー内のパス」ではなく「URLとしてみたドキュメントルートからのパス」を書く必要があります。

[punchan36]

有難うございます。
プラグインをダウンロードしましたのは以下の2カ所でして、そちらに対象のファイルがあります。

C:\Users\ユーザー名\Dropbox\app\アプリ名\public\country-select-js-master\build
C:\Users\ユーザー名\Dropbox\app\アプリ名\country-select-js-master\build

また以下のディレクトリで編集したファイルを普段http://localhost:3000/で表示しております。
C:\Users\ユーザー名\Dropbox\app\アプリ名\app

以下の様にpublicフォルダ内を指定しても結果は同じでした。
<link rel="stylesheet" href="/public/country-select-js-master/build/css/countrySelect.css">

「ドキュメントルートからのパス」と言う部分が出来ていないのでしょうか…？

Answer 1

URL生成はなるべく機能を使った方が良いです。
cssならstylesheet_link_tag
jsならjavascript_include_tag
(/から始めることで~/public/からのパスになるはず)
build/のように始めると相対パスになりますが、フレームワークを利用している場合は正しく参照できなくなることがありますので（コンテキストパス問題とか、階層が深くなると違う）、絶対パスで指定する必要がありますしね。
フレームワークの機能を駆使されたほうが間違いは起きにくいです。

が、あちこちにファイルが散らばるよりは、アセットパイプラインに乗せたほうが楽かもしれません。

調べたらCDNもあるようですので、コードを変更することがないのでしたらjQueryと同じくCDN利用しても良いと思います。

Comments

[punchan36]

有難うございます！以下の様に記述し直す事で無事解決致しました。
<link rel="stylesheet" href="build/css/countrySelect.css">
↓
<link rel="stylesheet" href="/public/country-select-js-master/build/css/countrySelect.css">
↓
<link rel="stylesheet" href="/country-select-js-master/build/css/countrySelect.css">

1. パスを参照する場合は、該当のファイルをpublicフォルダ下に保存する。
2. パスを記述する際は、~/public/以降のパスを「/」から記述する。

恐らく基本的な事だと思いますが、以上の2点が今回つまずいていた原因でした。
リンクも有難うございました！参考にさせて頂きます。

[m.ts10806]

いや、機能を使ってくださいと

[punchan36]

失礼致しました。以下の2行でした。
<%= stylesheet_link_tag "/country-select-js-master/build/css/countrySelect.css" %>
<%= javascript_include_tag "/country-select-js-master/build/js/countrySelect.min.js" %>

[m.ts10806]

低評価された方、理由を。
解決済みとなった回答を低評価するのはよほどの理由があるはずです。
このケースでコメントがないのは単なる迷惑行為です。
運営から「
teratailでは嫌がらせ目的の低評価など、他ユーザー様への迷惑行為を禁止しております。
サイトの利用規約に違反する行為が見られた場合、必要に応じて操作の取り消しやアカウントの停止を行っております。

該当の行為をしていると思しきユーザ様へは個別に注意喚起をしておりますが、
改善が見られない場合は上記の措置をとる予定でございます。」

とあります。
いつまでも同じような行為を続けることが自身の首を絞める（技術者としても最低の行為である）
ことになるのは明白です。