ramkaの朝ごはんはピーナッツパン

超個人的備忘録です。基本自分のためなので、内容の不備、読みづらさ、つまらなさはご了承ください。

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でどこかのページにジャンプする

Railsではa hrefは使わないのかな
ヘルパーを使うのが一般的なのかな

忘れない為にもlink_toでどこかのページにジャンプルする方法をメモる

<%= link_to 'Add', 'hoge/add', class: "btn btn-mini btn-danger" %>

今ルートパス「/」にいる前提で、相対パスで指定している

クラスにbootstrapを指定

詳しくは以下を参照

http://railsdoc.com/references/link_to

モデルを検索する

データベース
は検索ができないと意味がありません

検索はデータベースの醍醐味という感じでしょうか

はい

偉大なる先人のページです

たとえば、nameというカラムがあるモデルがあって、
そのモデルで作った(マイグレーション)データベースからnameカラムにhogeという値が入っているレコードを欲しい場合は

@user = User.where(name: 'hoge')

こうすると、userにnameカラムがhogeなコレクション(配列みたいなやつ)が代入されます

それをeachメソッドで表示するなどできる

便利だなデータベース

一つの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を指定してあげると震え出します

面白いですね