行楽気分♪
仕事上悩んだポイントや今後も使えそうな機能などをまとめておく
今回の完成イメージ（Plunkerのプレビュー画面に飛びます） ※警告画面が表示されますが、問題なければ「Proceed」をクリックしてください。気になる方は「Back」で戻るかタブを閉じてください。 ざっくり経緯これまでGoogleMapsAPIを使用して、店舗一覧及び郵便番号・住所からの店舗検索機能を実装していた しかし、アクセス数が増えるとともにGoogleMapsAPIの使用料も増えてきた 想定外の出費となりつつあるので、同様の機能でお金がかからない仕組みを導入
ざっくり経緯引き継いだ案件で、複数店舗の地図表示に Leaflet.js を使用 各マーカーをクリックするとポップアップが表示 （各店舗の簡易情報＋各店舗詳細ページへのリンクが記載） 各マーカーがすべて表示されるように fitBounds を使用 何故か Mac Safari の環境だけ動作しないので依頼を受けた 状況確認for文で各マーカーを作成し、各マーカーごとに以下ポップアップの処理を付けていた L.marker でマーカーを作成 addTo で地図にマーカ
前回、フルページスクロールの準備として、全画面表示のページを作成。今回は、前回のHTMLの構成そのままに、クラスを付与するだけでフルページスクロールが実現できるような実装を施そうと思う。 要件フルページで遷移したい（fullPage.js の様な挙動をさせたい） スマホのスクロールでアドレスバーが隠れて画面の高さが変わってしまう問題を対応する 画面内に収まらないコンテンツはスクロールして全体を表示できるようにする （次のコンテンツが表示されるまでは自動的にスクロールさせ
要件フルページで遷移したい（fullPage.js の様な挙動をさせたい） スマホのスクロールでアドレスバーが隠れて画面の高さが変わってしまう問題を対応する 画面内に収まらないコンテンツはスクロールして全体を表示できるようにする （次のコンテンツが表示されるまでは自動的にスクロールさせない） フッターまできたら普通にスクロール PC表示では1画面2分割されているコンテンツが、スマホ時は2画面となり、各画面フルページスクロールで遷移する 一通りページのコーディングが終
