カテゴリー
ホームページ製作

Jリーグチーム一覧の更新方法

Jリーグチーム一覧サイトの更新方法の備忘録。

  • 202011productファイル内の更新するhtmlにid,col,team_countを変更する。
  • 202011productファイル→distファイル内のteam.jsonにチーム情報を書き込む。
  • 202011productファイル→srcファイル内のstyle.scssにチームのカラー情報を書き込む。その際、pictbearのカラーパレットをダブルクリックし、色の設定のカスタマイズから白色選ぶ。
  • ターミナルより202011productファイルを選び、npx webpackでビルドする。その際、多少待つ。
  • distファイル内のhtml,team.json,main.jsをアップロードする。

忘れてるからこれを見て思い出すこと。

カテゴリー
開発環境 ホームページ製作

docker基本操作

先に削除

コンテナ確認
docker ps -a

コンテナ削除
docker rm コンテナID

後に削除

イメージ確認
docker images

イメージ削除
docker rmi イメージID

カテゴリー
ホームページ製作

正規表現による置換

実際の元のソース。

  var marker05 = new Y.Marker(new Y.LatLng(35.70, 139.76));
  ymap.addFeature(marker05);
  marker05.bindInfoWindow('<a href="#store5">ああああ</a>');

実際の置換後のソース。

var marker05 = new mapboxgl.Popup().setHTML('<a href="#store5">ああああ</a>')
new mapboxgl.Marker({ "color": "#b40219" }).setLngLat([139.76, 35.70])
.setPopup(marker05).addTo(map);

正規表現の置換前

  var (.*) = new Y.Marker\(new Y\.LatLng\((.*), (.*)\)\);
  ymap.addFeature\((.*)\);
  (.*)\.bindInfoWindow\((.*)\);

正規表現による置換後

var \1 = new mapboxgl.Popup().setHTML(\6)
new mapboxgl.Marker({ "color": "#b40219" }).setLngLat([\3, \2])
.setPopup(\1).addTo(map);

()括弧でくくると、それが\マークによる置換ができる。最初の()が\1となる。二番目の()が\2となる。

カテゴリー
ホームページ製作

Mapboxのマーカーに色を付ける

Mapboxのマーカーというか旗に色を付けるやり方。

初期値というかデフォルト。

var marker = new mapboxgl.Marker()
  .setLngLat([139.70, 35.65])
  .addTo(map);

マーカーに色を付ける。

var marker03 = new mapboxgl.Marker({ "color": "#b40219" }).setLngLat([139.70, 35.65])
.addTo(map);

マーカーの表示については、下記リンク先が参考になりました。

【参考リンク】
https://docs.mapbox.com/jp/yolp-to-mapbox/javascript/#%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%AE%E8%A1%A8%E7%A4%BA

カテゴリー
ホームページ製作

JavascriptとJQueryの比較

JavascriptとJQueryの比較について、下記リンク先が参考になりました。

https://qiita.com/shshimamo/items/ba3a57a81d9780030969