画像クリックにより同ブラウザ上の投稿検索をできるようにしたい

はじめに

最近プログラミングスクールを卒業したものです。初めてteratailにて質問させていただくので、至らないところがあると思いますが、アドバイスいただけると有り難いです。よろしくお願いします。

アプリの概要

Ruby on Railsで旅行投稿アプリを作成しています。
新規投稿時にメニューバーから都道府県の選択を必須にしており、投稿一覧ページの検索欄からメニューバー選択により都道府県ごとの投稿を検索できるようにしました。
また、検索欄には日本地図も設置しており、各都道府県をクリックすると同様に都道府県ごとの投稿を検索できるようにしました。日本地図は、Illustratorの画像とソースコードを使用しています。
検索欄の日本地図での投稿検索において、Illustratorで取得したコードの各都道府県のhrefには、メニューバー選択による都道府県ごとの投稿検索後のherokuのURLをコピペしている現状です。

解決したいこと

herokuのURLをコピペしていることが原因で、挙動が不便になってしまっている為、
検索欄の日本地図での投稿検索において、localhostではlocalhostの、herokuではherokuの投稿を検索できるようにするためにはhrefにどういったパスを置くべきか、また解決の為に他の方法があればアドバイスを頂きたいです。
検索欄の日本地図での投稿検索において、Illustratorで取得したコードの各都道府県のhrefには、メニューバー選択による都道府県ごとの投稿検索後のherokuのURLをコピペしている現状。これでは、localhostでの挙動確認の際に、herokuの検索結果に遷移してしまい不便である。また、hrefにlocalhostのURLを添付してもherokuでの挙動確認の際に、localhostの検索結果に遷移してしまい不便が生じる。

該当するソースコード

●controller


<code>
def index
 @search = Tweet.ransack(params[:q])
    @tweet = @search.result(distinct: true).order("created_at DESC")
end
</code>

●index.html.erb　メニューバー都道府県検索

<code>
<span class= 'search-btn'>検索</span>
<%= search_form_for @search do |f| %>
<div class='search-btn'>
<%=f.label :area_id_eq,'都道府県'%>
<%= f.collection_select :area_id_eq, Area.all,:id,:name, include_blank: '指定なし' %>
  </div>
</code>

●Area.rb

<code>
class Area < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: '北海道' },
    { id: 3, name: '青森県' },
    { id: 4, name: '岩手県' },
    { id: 5, name: '宮城県' },
    { id: 6, name: '秋田県' },
    { id: 7, name: '山形県' },
    { id: 8, name: '福島県' },
    { id: 9, name: '茨城県' },
    { id: 10, name: '栃木県' },
    { id: 11, name: '群馬県' },
    { id: 12, name: '埼玉県' },
    { id: 13, name: '千葉県' },
    { id: 14, name: '東京都' },
    { id: 15, name: '神奈川県' },
    { id: 16, name: '新潟県' },
    { id: 17, name: '富山県' },
    { id: 18, name: '石川県' },
    { id: 19, name: '福井県' },
    { id: 20, name: '山梨県' },
    { id: 21, name: '長野県' },
    { id: 22, name: '岐阜県' },
    { id: 23, name: '静岡県' },
    { id: 24, name: '愛知県' },
    { id: 25, name: '三重県' },
    { id: 26, name: '滋賀県' },
    { id: 27, name: '京都府' },
    { id: 28, name: '大阪府' },
    { id: 29, name: '兵庫県' },
    { id: 30, name: '奈良県' },
    { id: 31, name: '和歌山県' },
    { id: 32, name: '鳥取県' },
    { id: 33, name: '島根県' },
    { id: 34, name: '岡山県' },
    { id: 35, name: '広島県' },
    { id: 36, name: '山口県' },
    { id: 37, name: '徳島県' },
    { id: 38, name: '香川県' },
    { id: 39, name: '愛媛県' },
    { id: 40, name: '高知県' },
    { id: 41, name: '福岡県' },
    { id: 42, name: '佐賀県' },
    { id: 43, name: '長崎県' },
    { id: 44, name: '熊本県' },
    { id: 45, name: '大分県' },
    { id: 46, name: '宮崎県' },
    { id: 47, name: '鹿児島県' },
    { id: 48, name: '沖縄県' },
  ]
end
</code>

●_japanmap.html.erb 日本地図のソースコード

<html>
<head>
<title>map6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body back-groundcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="assets/map6.gif" width="1920" height="1080" alt="" usemap="#map6_Map">
<map name="map6_Map">
<area shape="poly" alt="" coords="419,860, 418,844, 418,822, 419,818, 423,817, 436,817, 449,818, 450,822, 450,859, 448,861, 423,861, 419,860" href="#shiga（現在ここは各都道府県の投稿検索後のherokuのURLを添付している）">
<area shape="poly" alt="" coords="257,853, 257,836, 258,833, 262,832, 284,832, 287,833, 288,836, 288,871, 287,874, 284,875, 261,875, 258,874, 257,871, 257,853" href="#hiroshima（現在ここは各都道府県の投稿検索後のherokuのURLを添付している）">
※以下残りの47都道府県分のコードが記載されている

</map>
</body>
</html>

試したこと

●日本地図ソースコードのhrefにトップページ（index.html.erb）のパスにArea.rbの都道府県指定して設置できたらと考えて置いてみたがわからなかった。
（例）href="/tweets/@tweet.Area_id[4]"　　　？
●日本地図ソースコードの_japanmap.html.erb をArea.rbのようにActiveHashで記述できたらransackで検索をかけられると考えるが、その記述の仕方も調べきれなかった。

no1knows

2020/10/30 10:50

> 初めてQiitaにて質問させていただくので

no1knows

2020/10/30 10:55

コードは<code>タグを利用して見やすくしてください。

gummy

2020/10/30 14:04

<code>タグを利用して修正してみました。コードを見やすくする為のアドバイスをして頂き有難うございます！

winterboum

2020/10/30 23:37

<code>正しく使ってないから、読みやすくなてない。画面確認して。 <pre>で囲まれてる。取って。それから、なにがわからないのか、が伝わってこない。titleとの関係もわからない。 URLコピペが問題なの？　なにが問題？

no1knows

2020/10/31 00:57

> 初めてQiitaにて質問させていただくのでここはQiitaでしたか？

gummy

2020/10/31 05:51

コメント頂き有難うございます！ teratailの記述の仕方の理解ができていませんでした。また、質問の「結果」から記述できていなかったのでわかりづらい表現になってしまっていました。アドバイス頂いた通り、修正してみましたので、確認いただけると幸いです。よろしくお願いします。

winterboum

2020/10/31 06:05

で、なにがわからないのか、が伝わってこない。titleとの関係もわからない。 URLコピペが問題なの？　なにが問題？

gummy

2020/10/31 06:24

上手く伝えられずすみません???? herokuのURLコピペが原因になります。 herokuのURLをコピペしているのでheroku上では問題がないものの、localhostで地図から検索するとherokuに遷移してしまい、テストが行えずに不便なのです。そのため、同ブラウザ上で検索結果を出す為の解決策のアドバイスを頂きたいです????‍♀️

winterboum

2020/10/31 07:17

コピペ元、コピペ先、を載せて。