Google Maps API 本番環境でマップが表示されない件
事の発端
Ruby on Railsを用いてAgri helpという、農作業を助け合おうという趣旨のアプリケーションを制作しました。
概要は、ユーザー同士でチャットを利用して作業を依頼し、その内容をもとに実際に作業するというものですが、自分の近辺に住んでいるユーザーでないと意味がありません。
そこで、会員登録済みのユーザー住所（市区町村まで）がGoogleマップ上に反映され、自分の近くのユーザーを選択できるようにしました。
最低限の機能は搭載できたので本番環境にデプロイしたところエラーが発生。（泣）
コンソールでエラーメッセージを確認してみると、
とあり、リファラーが許可されていないという内容でした。
つまり、自分のGoogle Maps APIによりマップが反映される許可の範囲にこのページは入っていないという事です。
そこでGoogle Cloud PlatformでAPIの認証情報を確認しに行くと、凡ミスに気がつきました・・・。
ウェブサイトの制限がlocalhostのみになっています。ローカルで開発を進めていてそのままの状態でした。
deviseにおいて登録したい項目を追加する方法
deviseの導入
deviseはRailsのgemの一つで簡単にユーザー管理機能を実装できます。
まずGemfileに記述をします。
gem 'devise'
忘れずにbundle installしましょう！
次にdeviseの設定ファイルを生成します。
ターミナルにて以下のコマンド入力します。
rails g devise:install
次にuserモデルの作成を行いますがdeviseを利用する為に、通常のコマンドとは異なります。
ターミナルにて以下のコマンド入力します。
rails g devise user
これにより、マイグレーションファイルの生成やroutes.rbファイルにルーティングの記述が自動的に行われており、新規登録やログインのルーティンが設定されています。
routes.rb
Rails.application.routes.draw do devise_for :users #自動で追記 end
rails routesで設定されているルーティングを確認すると、
sessionやらregistrationやらとルーティングがしっかり設定されています！
では次に、生成されたマイグレーションファイルに追記を行います。
deviseではemailとpasswordについてあらかじめ設定されています。
今回はnameカラムを追加してみましょう。
マイグレーションファイル
.
.
t.string :email, null: false, default: ""
t.string :encrypted_password, null: false, default: ""
t.string :name #追記
.
.
忘れずにマイグレートしましょう。
最後に実際に新規登録画面を確認しましょう！
http://localhost:3000/users/sign_upにアクセスします！
このように最低限ではありますが、自動的にビューも整っています。
いい感じになっていると思いきや、追加したnameの欄がありません。
残念ながらマイグレーションファイルに追記しただけではdeviseの機能には反映されません。
追加の項目を反映させるには（ビュー画面編）
まずビューにnameの登録欄を作成しましょう！
実は、今までの過程でdeviseのビュー画面は生成さてていません。
ターミナル
rails g devise:views
これでapp/views/deviseの各ディレクトリ内にファイルが生成されます。
今回は新規登録画面を編集するので、registrations内のnewファイルに追記します。
<div class="field"> <%= f.label :name %><br /> <%= f.text_field :name, autofocus: true, autocomplete: "name" %> </div>
ビューにも反映されました！
しかしこのままではまだデータベースに登録はされません。
なぜならストロングパラメーターを設定していないからです。
追加の項目を反映させるには（ストロングパラメーター編）
deviseに追加の項目を設定した場合、app/controllers/application_controller.rbを編集します。
class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters devise_parameter_sanitizer.permit(:sign_up, keys: [:name]) end end
sign_upアクションのnameキーを許可するように記述しました。
これでデータベースにも反映されるようになりました！
因みに、今回は新規登録のみなのでsign_upアクションのみ許可しましたが、登録内容の編集を反映させたいときはaccount_updateアクションについても記述しないと変更内容が保存されないので注意です。
RailsへのBootstrapの導入
はじめに
Railsを使用したオリジナルアプリの作成の過程で（まだrails newしたばっか 笑）Bootstrapを導入したので、その方法を紹介します。プログラミング初心者で導入を考えている人は参考にしてみてください！
筆者自身もHTML/CSSから勉強を始めて約１ヶ月です。間違えている点がありましたらフィードバックをよろしくお願いいたします。
①Gemfileへの記述
まず以下2点をGemfileに追記します。
gem 'bootstrap', '~> 4.4.1' gem "jquery-rails"
その後ターミナルで忘れずにbundle installしましょう！
application.scssとapplication.jsファイルへの追記
次に、インストールしたBootstrapが機能するように既に存在してあるapplication.scssとapplication.jsファイルに追記を行います。なぜこの２つかと言うと、application.html.erbファイル内の記述を見るとわかります。以下はheadタグ内のとある２つの記述を抜粋したものです。
<%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'javascript' %>
application.html.erbファイルは全てのビューファイルが集約されるものであり（イメージ）、つまりビューファイルの王様みたいなやつがstylesheetはapplicationを、javascriptもapplicationの内容を読み込んで反映するぞと言っています。なので見出しの２ファイルにBootstrapが反映されるように記述する必要があるのです。
※本来上記のコードにはturbolinksに関する記述もありますが筆者は削除してあります。
では本題に戻ります。
まずはapplication.scssからです。
このファイルの拡張子が.cssの方は.scssにリネームをお願いします。理由は、今回インストールしたBootstrap4ではCSSでなくSassが採用されているためです。
app/assets/stylesheets/application.scss
@import "bootstrap";
次にapplication.jsです。
app/assets/javascripts/application.js
//= require jquery3 //= require popper //= require bootstrap-sprockets
以上でRailsへのBootstrap導入は完了です！
Bootstrapの利用方法
Bootstrap公式サイトで目的のコードを引用することで同じデザインの目標物を作成することができます。
例えばボタンであれば、
https://getbootstrap.com/docs/4.4/components/buttons/
これらのコードをコピーして、自分のHTMLファイルに ペーストします。
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
以下のように同じものを作成できました。実際はこの中から使用したいものを抜粋して利用しましょう！
あとはこのまま使うもいいし、またカスタマイズも可能です。
その方法はまた今度紹介します！
Railsにおけるコントローラーの削除方法
コントローラーの作成について
ターミナルにて、作業中のアプリケーションのディレクトリで以下のコマンドを実行します。今回は、tweetsコントローラーを作成するつもりがtweetssとsが１つ多くついてしまった例で話を進めます。
# コントローラーを作成
$ rails g controller tweetss結果以下のようにcreateと表示されていることから、コントローラーのファイル（app/controllers/tweetss_controller.rb）が生成できています。また、tweetssコントローラー用のviewファイルやヘルパーファイルなども一緒に生成されています。
（invokeは生成したファイルのRailsにおけるフレームワークの機能を表示しているだけです。）
create app/controllers/tweetss_controller.rb
invoke erb
create app/views/tweetss
invoke test_unit
create test/controllers/tweetss_controller_test.rb
invoke helper
create app/helpers/tweetss_helper.rb
invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/tweetss.coffee
invoke scss
create app/assets/stylesheets/tweetss.scssコントローラーの削除について
生成済みのコントローラーファイルを削除するには以下のコマンドを実行します。
# コントローラーの削除
$ rails d controller tweetss結果以下のようにremoveと表示されていることからコントローラーファイルが削除されていることが確認できます。
それだけではなく、同時に生成された関連ファイルも一緒に削除できます。
remove app/controllers/tweetss_controller.rb
invoke erb
remove app/views/tweetss
invoke test_unit
remove test/controllers/tweetss_controller_test.rb
invoke helper
remove app/helpers/tweetss_helper.rb
invoke test_unit
invoke assets
invoke coffee
remove app/assets/javascripts/tweetss.coffee
invoke scss
remove app/assets/stylesheets/tweetss.scssちなみに生成時に打ったコマンドの"rails g controller..."の"g"はgenerate（生成する）で、削除時の"d"はdestroy（破壊する）の略称です。
JavaScriptの変数宣言について
変数宣言とは
JavaScriptでは変数を定義する際に、変数宣言を行う必要があります。
簡単な例をあげます。
let name = 'tanaka'
nameという変数にtanakaを代入していますが、上記のように変数名の前にletが必要になります。
このように、「nameは変数だよ！」とletをつけて教える必要があり、これが変数宣言になります。
変数宣言の種類
上記では変数宣言にletを使用しましたが、他にvarとconstで変数宣言を行うことができます。varについてはES2015(ES6)バージョン以前の古い書き方なので、これからはletとconstを使用していくものとして２つの違いを説明していきます。
let
let name = 'tanaka'; console.log(name + 'さん、おはよう！');
コンソールで確認すると、以下のようになります。
次にnameの中身を'watanabe'に変えてみましょう。
let name = 'tanaka'; console.log(name + 'さん、おはよう！'); name = 'watanabe'; console.log(name + 'さん、おはよう！');
コンソールで確認すると、
このようにletで変数宣言をした場合は、変数の書き換えが可能です。
const
では、constで変数宣言をした場合です。同じように変数nameに代入していきます。
const name = 'tanaka'; console.log(name + 'さん、おはよう！');
コンソールで確認すると、
letの時と同様に表示がされています。では、変数を上書きしてみましょう。
const name = 'tanaka'; console.log(name + 'さん、おはよう！'); name = 'watanabe'; console.log(name + 'さん、おはよう！');
コンソールで確認すると、
エラーが起きてしまいました。
このようにconstでは変数の上書きができません。
ここが2つの違いになるので、状況により使い分けましょう。
基本的なHaml記法
Hamlとは
まずHamlという言葉自体を理解することで、この言語の役割が見えてくると思ったのでそこから説明します！
Hamlは、"HTML abstraction markup language" の略称です。"abstraction"の訳が"抽象的"とありますが、これはwikipediaによると・・・
抽象化（ちゅうしょうか、英: Abstraction、独: Abstraktion）とは、思考における手法のひとつで、対象から注目すべき要素を重点的に抜き出して他は捨て去る方法である[1]。反対に、ある要素を特に抜き出して、これを切り捨てる意味もあり、この用法については捨象（しゃしょう）という[1]。
ja.wikipedia.org
う〜ん、わかりますか？（笑）。個人的には "要素を重点的に抜き出し" という所に注目し、簡略化するということなのかなと考えました。"抽象化"の反対語が"具体化"なので、まあこんな感じの認識でいいんですかね。
ちなみに答えはHamlの公式サイトを見ると分かり、（最初からここを見ろよ！笑）
haml.info
Hamlを使用することで、「綺麗に」、「読みやすく」、「生産的に」ビューを作成することができる。
と訳すことができると思います。
つまり、HTMLより記述量が少なく済み、非常に綺麗に簡潔に作成することが可能ということです。
タグの表記
さて前置きが長くなってしまいましたが本題に入って、
まずはタグについてHaml記法とHTMLとを比較します。
%body %div これはタグ
このように%を使用します。もうひとつ、適切にインデントされていないとエラーを起こします。
これをHTMLで表記すると
<body> <div> これはタグ </div> </body>
classやidの指定
%div.content#red .でcontentというクラスを指定、#でredというidを指定
<div class = "content" id = "red"> .でcontentというクラスを指定、#でredというidを指定 </div>
divタグは省略できる
divタグは頻繁に用いるので以下のように省略して記述することが可能です。
%div.content#red 省略前
.content#red 省略後
.click()と.on("click")の違い
今回のテーマ
現在jQueryを学んでますがクリックイベントの取得について以下の２つの記述があり困惑したので、何がどう違うのか個人的に調査してまとめました。
.click()
$('#button').click(function() {
alert("ボタンが押されました");
});.click()はjQuery公式ドキュメントではこう説明されています。
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
クリックすることでイベントを発火することが出来るということでした。
また、こうとも書いてあります。
This method is a shortcut for .on( "click", handler )
.click()は.on("click")のショートカットだったんですね！
.on("click")
$('#button').on('click', function() {
alert("ボタンが押されました");
});.on("click")はjQuery公式ドキュメントではこう説明されています。
Attach an event handler function for one or more events to the selected elements.
.clickとの違いは、 one or more events のところでしょうか。訳すと、１つかそれ以上のエレメントにイベントを付属する、です。つまり複数のイベントを定義できるということになります。
例えば、.click()ではイベント発生後に新たなボタンが現れたとしたら、イベントを付与できないが、.on("click")ではそれが可能ということになります。
まとめ
.click()は.on("click")のショートカットでした。
しかしその後に複数のイベント起こしたいのであれば.on("click")でなければ出来ないので、複雑な機能を組むのであればこちらを使うべきでしょう。
