質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

908閲覧

Javascriptで作成したGoogleMapAPIのデータをRubyonRailsのhtml.erbに読み込む方法

ni7035

総合スコア11

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/06/27 02:08

編集2022/01/12 10:55

前提・実現したいこと

Javascript(toppages.js)で作成したGoogleMApAPI(JSON.parse?)のデータをRubyonRailsのview/toppages/index.html.erbの<div id="map"></div>に読み込みたいです。
toppages.jsではなく、toppages.coffeeでも実行できますか?

発生している問題・エラーメッセージ

・toppages.coffeeにJavascriptのコードを書いて実行したエラーがでます。 エラーメッセージ:ExecJS::RuntimeError in Toppages#index Showing /home/ec2-user/environment/maps/app/views/layouts/application.html.erb SyntaxError: [stdin]:5:1: reserved word 'function' <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

試したこと

app/assets/javascripts/toppages.coffeeではなく、app/assets/javascripts/toopages.jsを作成し、googleMapAPIを表示するプログラミングを書いた。
gem 'execjs', '~> 2.7'、gem 'therubyracer'、gem "jquery-rails"を追加。
ちなみにapplication.jsには、
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
このように書かれています。

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

AWSのcloud9を使用しています。
ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/27 02:11

>RubyonRailsに表示する方法 表示するのはあくまでHTMLなので表現調整されたほうが良いと思います。
ni7035

2019/06/27 02:18

表現調整とは、どういうことなのでしょうか? html.erbに<script type="text/javascript"></script>直接書くということですか?
m.ts10806

2019/06/27 02:21

いいえ違います。 タイトル「GoogleMapAPIのデータをRubyonRailsに表示する方法」とありますが、RubyonRailsはあくまでフレームワークであって表示するのは結局HTML、クライアントサイドの仕事なので「タイトルの文言を調整してください」という意味です。 概念が違うものを一緒にしてしまっては話が通じなくなります。
ni7035

2019/06/27 02:22

わかりました。修正の依頼ありがとうございます。
m.ts10806

2019/06/27 02:23

「読み込む」というところですが、結局のところどういう結果を想定されていますか? 挿入先はHTMLになるのでJavaScript側でIDを指定して挿入するだけのように思います(つまりRubyは直接関係がない)
ni7035

2019/06/27 02:43

JavaScriptの情報をtoppages.index.erbに読み込んでマップを表示したいです。 普通にhtml.indexとmain.jsだと読み込めます。ただRubyonRailsのtoppages.index.erbに読み込むことができません。
m.ts10806

2019/06/27 02:53

では、そのtoppages.index.erbのコードもご提示いただいたほうが良さそうに思います。
ni7035

2019/06/27 03:03

間違えました。toppages.html.erbです。更新しました。
ni7035

2019/06/27 03:04

間違えました。index.html.erbです。
guest

回答1

0

Rubyが分かるわけではないのですが、エラー内容と提示いただいた情報から推測できる内容で回答します。

普通にhtml.indexとmain.jsだと読み込めます。

(たぶんindex.htmlとしたいのでしょうか)
ということは静的な状態ではできるということはRubyの書き方の問題っぽいですね。SyntaxErrorということは構文エラーですし。

「reserved word」は「予約語」なので、Rubyの予約語であるfunctionを何かの定義とかで使ってしまった、、ということではないでしょうか。
toopages.jsが正しく読み込めているかもご確認ください(ブラウザ開発ツールのコンソールを確認すれば分かると思います)

投稿2019/06/27 03:33

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問