Ruby on Rails開発のインターン (Day 28)

こんにちは、皆さん!

今日はマーカー変数を効率よく定義する方法を探して、もう少しスマートにテストを書いていけるようにする。あと、マップ上でマーカーをフィルターする方法とそのときに使うチェックボックスラジオボタンをCapybaraテストでどうやってコントロールするのかも勉強しないとな。


  • トピック:

グーグルマップ上でマーカーをフィルターする方法
Capybaraテストでセレクターを使ってHTML内のものをアクセスする

  • 疑問:


  • 問題:
  1. マップ上にマーカーがいくつあるのか数える方法を探す必要がある(解決)


  • 学習した内容:
  1. どこをどうやって変えることでマップ上でマーカーをフィルターすることができるか


  • 今後やってみたいこと:
  1. マップだけでなく、自分のプロジェクトでもフィルターを実行する
  2. グーグルマップ上でマーカーをフィルターする方法に関するブログを書く


  • リソース:
  1. Advanced Google Maps with JavaScript: Filtering and Displaying Information | appendTo


グーグルマップ上でマーカーをフィルターする方法

リソース:
Advanced Google Maps with JavaScript: Filtering and Displaying Information | appendTo

このサイトのおかげでマップ上でフィルターする方法をだいぶ楽に理解できた。
はじめに、まずはJavaScriptをユーザーの選択次第で実行してHTMLのチェックボックスラジオボタンの状態の変化に対応する必要がある。次に、フィルターされたシチュエーション次第でそれぞれのマーカーを表示するのか、それか非表示にするのか決める必要がある。

CodePenのこのサイトのコードを見ていくと、次のようなことが分かった。

サイト上のシステムはこうやって動いていた。

  1. 一つの配列にハッシュの形でそれぞれのシチュエーションをブーリアンで入れて、そのシチュエーションでフィルターしているかどうかを記録する。マーカーはぞれぞれ自身にシチュエーションごとにその条件を満たしているかどうかをブーリアンで決めている。もし、ユーザーがフィルターの選択肢のどれかをクリックしたら、配列内のその値の真偽がひっくり返るという感じ。
  2. クリックした後、配列内の値が変わり、マーカーを一つ一つ見ていき、そのマーカーが配列内の条件を満たしているかどうか見る。この場合は配列内のすべての真のシチュエーションに対して、そのマーカーがそのすべての真のシチュエーションにおいて真であるのなら表示する。
  3. setVisible(arg)関数を使ってマーカーが見えるかどうかを調整する。



こうやって、箇条書きで書きだすと長いコードもだいぶわかりやすくなってくる。でも、それぞれの動作をするのにさらに複雑に関数が絡み合っている印象を受けた。

これに関しては内容も深いわけなので、のちにブログを書きたいなと思っている。

Capybaraテストでセレクターを使ってHTML内のものをアクセスする

以前の投稿でも何回か言っているが、Capybaraテストは主に、ウェブサイト上に見えたものをテストするものだ。だから、マップ上にいくつマーカーがあるのかもこのテストを使って確認することができるはず。

少し探してみたら、下記のようにコードを書くのが簡単だと思った。

page.should have_css('h1', :count => 1)

この例はページ内に一つだけh1タグがあることを確認する。多くても、少なくてもダメで、必ず一個だけ。
もうお分かりだと思うが、カッコ内の一つ目がどんなHTML要素を探すかで、二つ目がどれだけあるかである。なので、"center"というクラスを持つ要素がちょうど二つあることを確認したいのなら、

page.should have_css('.center', :count => 2)

またCSSで要素を選択するように書くこともできる(というかそれが本質)

# <div><div class="center"></div></div>
page.should have_css('div div.center', :count => 1)

# <input type="submit"></input>
page.should have_css('input[type="submit"]', count => 1)

これのおかげでマーカーにたどり着くためのCSSセレクターを見つけることができた。この例はマーカーの写真を選択するというもの。
(後日、別のものに変更した。たまにセレクターが変わることがあるっぽいのでディベロッパーツールでしっかり確認しよう。)

page.should have_css('div.gmnoprint img[src="/assets/default-map-marker-0ec32d1d8c746e755dc1207a63f227cb519433ad4879170711c8d2bc66e1c997.png"]', :count => 1)

他の選び方も試したが、見えないものの重複があって、数が合わなかった。で、結果的にこれになった(笑)

まとめ

今日、朝に他の2人のディベロッパーとスタンドアップミーティング(短すぎて、座る必要がないほどの簡単なミーティング)があった。久しぶりのミーティングは何をするべきか、そして何をやったかを整理してくれて、やることリストがだいぶきれいになった。余談だが、リモートで働いていたディベロッパーがニューファンドランド(カナダのマジで東の端)の方まで旅を進めていたことも知った。ネットで画像を検索してみたが、壮大な自然の景色が広がるきれいな島だった。

それで、プログラミングに話を戻すと、グーグルマップ上でマーカーをフィルターする方法とマップ上のマーカーの数を確認する方法について学んだ。これのおかげで僕のマーカーのテストを一つ上のレベルまで押し上げてくれた。只今、なぜかわからないが、Railsのコンソールを開いて作ったマーカーがテストを始めると消えているので、そこら辺について、明日も頑張っていこうと思う。


ご精読ありがとうございました。では、また次回まで✌



Day 29はこちら↓↓
programming-shop.hatenablog.com


Day 27はこちら↓↓
programming-shop.hatenablog.com