Google Maps Javascript APIの導入（Rails6）

googleマップAPIの導入について記録します。

・rails: 6.0.3.4

・webpacker、slim使用

流れとしては

1. APIキー取得

2. 取得したAPIキーをcredentialsに記載

3. HTML, javascript, css実装

のステップで行います。

1. APIキー取得

まずはGoogle Cloud PlatformからAPIキーを取得します。

この部分は省略します。（以下の記事がわかりやすかったです。）

Google Maps API を使ってみた - Qiita

2. 取得したAPIキーをcredentialsに記載

取得したAPIキーはcredentials.yml.encに以下の構成で記載。

credentials.yml.enc

api_key:
  maps_javascript_api: '取得したAPIキー'

取り出すときはRails.application.credentials.api_key[:maps_javascript_api]

3. HTML, javascript, css実装

後は公式通りにビューを実装していきますが、slimでの記法やwebpackに不慣れだったので何点か苦労しました。

developers.google.com

app/view/index.html.slim

- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ Rails.application.credentials.api_key[:maps_javascript_api] }&callback=initMap".html_safe
script{ async src = google_api }

div#map

callback処理でjsでinitMap関数を呼び出し、div id='map'の部分にgoogleマップが埋め込まれます。

app/javascript/google_maps.js

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 35.6581, lng: 139.7017 },
    zoom: 14,
  });
}
window.initMap = initMap;

center:でマップの中心座標、zoom:で縮尺のデフォルト表示の設定ができます。

また、window.initMap = initMap;の部分は下記を参考に追加しました。

javascript - Google Maps APIでWebpackを使用するには？

この記述がないとinitMap is not a functionのエラーによりマップが表示されませんでした。

webpackを使っている場合はグローバル変数領域に宣言する必要があるようです。

参考：（この質問の回答がわかりやすかった）

JavaScript - webpack環境で関数をコンソールで実行したところエラーが返る｜teratail

app/javascript/stylesheets/application.scss

#map {
  height: 400px;
  width: 600px;
}

マップの表示サイズを設定します。

height: 100%など、%で指定するとマップが表示されないのでpxでの指定が必要です。

app/javascript/packs/application.js

require("google_maps.js")

最後にapplication.jsでrequireすればマップが表示されると思います。

RSpecでActionMailerのテスト

RSpecのSystemSpec内でメール送信のテストを行う際のメモ。

mailers/article_mailer.rb

class ArticleMailer < ApplicationMailer
  def report
    mail(to: 'admin@example.com', subject: 'HOGE')
  end
end

送信メールを上のように定義。

テスト環境でもArticleMailer.report.deliverでメール送信できるので

letに入れて書くと、

mailer_spec.rb

require 'rails_helper'

RSpec.describe "Mailer", type: :system do
  let(:mail) { ArticleMailer.report_summary.deliver }
  let(:check_sent_mail) {
    expect(mail.present?).to be_truthy, 'メールが送信されていません'
    expect(mail.to).to eq(['admin@example.com']), 'メールの送信先が正しくありません'
    expect(mail.subject).to eq('HOGE'), 'メールのタイトルが正しくありません'
  }

  describe 'メールの送信' do
    context 'メールを送信した場合' do
      it 'タイトル、メールアドレスが正しく送信される' do
        check_sent_mail
      end
    end
  end
end

check_sent_mail内でlet(:mail)も呼ばれるので、

メール送信＋検証ができる。

mail.toで送信先

mail.subjectでタイトル

mail.fromで送信元

mail.bodyで本文を参照。

開発環境ではgem letter_opener_webを使用して/letter_opener内で確認してたので

SystemSpec内でもvisit '/letter_opner'で飛ぼうとして飛べなくて

ハマってたのでメモ。