GoogleMapを配置してみる
Railsで生成したViewにGoogleMapを設置してみる
まずは、先人の力を借りる
ありがとうございます
GoogleMapを配置するにはAPIキーとやらを取得して、
その取得したキーをView(ここでは.erbのやつね)ファイルに設定して初めて動くらしい
どんな種類のAPIキーが必要なの?って聞かれたらJavaScriptと設定した
とりあえずこのまま進める
そして、いつものようにViewファイルを生成したら以下のページを参考にタグを設定してみる
自分はそのままコピペしてしまった
APIKeyというところに、取得したキーを設定する
キーを ' や " で囲む必要がないので注意
<div id="map" style="width:620px; height:400px"></div> <script type="text/javascript"> function initMap() { var opts = { zoom: 15, center: new google.maps.LatLng(35.709984,139.810703) }; var map = new google.maps.Map(document.getElementById("map"), opts); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=( ここに取得したAPIキーが入る )&callback=initMap"> </script>
これでとりあえずはただの地図が表示されるはず
routes.rbを設定して試して見る
JavaScriptは/app/assets/javascripts下にJSファイルを作成し、そこに記述しても大丈夫みたい
link_toでどこかのページにジャンプする
パラメータの渡し方いろいろ
偉大なる先人に学ぶ毎日
メモということで記録
一つのViewに複数のボタンを配置する
慣れている人には当たり前のことだと思うが、
全然なんれていないので、備忘録として記録
ボタンを設置するには
<button_to
を設置するが、複数設置する場合にはnameオプションを指定して、
コントローラーで分岐させる(今のところはこんなやりかた
bootstrapを適用してい場合だとこんな感じ
<%= button_to 'Button1', {controller: 'User', action: 'add'}, {name: 'but1', class: "btn btn-default"} %> <%= button_to 'Button2', {controller: 'User', action: 'add'}, {name: 'but2', class: "btn btn-default"} %>
参考にさせていただいたページです
こうなると、ルートも通して置かないとエラーなるので注意
ビューにボタンが二つ表示されれば良しとする(とりあえず初心者なので
コントローラー側で、nameを見て分岐するようにする
if params[:but1] (ボタン1の処理をここに書こう) elsif params[:but2] (ボタン2の処理をここに書こう) else (その他の処理をここに書こう) end
で、とりあえず複数のボタンを配置しても処理を分岐できるようになる
本日も先輩の方々に感謝
ありがとうございます
DBからすべてのレコードを削除する
はい
DBに追加したレコードを一発で削除するメソッドです
その他にもいろいろなメソッドを紹介されていました
改めて先輩方に拍手を
クラスメソッドで用意されており、
User.delete_all
でレコードを全て削除できます
画像などをブルブル震わせる
マウスオーバーすると画像がブルブルガタガタ震えるようにします
以下のページを参考にプラグインをダウンロードする
/app/assets/javascripts
に保存する
実際に動かすJavaScriptを書く必要があるが、ビューファイルに書くとごちゃごちゃしちゃう
ということで、プラグインと同じパスに.jsファイルを作り、その中にコードを記載
/app/assets/javascripts/user.js
$(function() { $('.rumbleimg').jrumble({ x: 2, y: 2, rotation: 1 }); $('.rumbleimg').hover(function() { $(this).trigger('startRumble'); }, function() { $(this).trigger('stopRumble'); }); });
画像を表示したら、classにrumbleimageを指定してあげると震え出します
面白いですね