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

JQueryなどで気になったサイト

JQuery、webpack5、npmで気になったサイト

【bootstrap5】
https://bootstrap-guide.com/layout/grid

【JavaScriptのswitch】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

【JavaScriptのthis】
https://www.webopixel.net/javascript/901.html

【JQueryのeachメソッド】
https://itsakura.com/jquery-each

【webpack5】
https://www.webdesignleaves.com/pr/css/sass_webpack.html

【node,npmでのバージョン確認】
https://dackdive.hateblo.jp/entry/2016/10/10/095800

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

Mapboxでお世話になったサイト

Mapboxでお世話になったサイト

https://qiita.com/niwasawa/items/7e88278489cd0780e843

https://docs.mapbox.com/jp/yolp-to-mapbox/javascript/

https://docs.mapbox.com/jp/help/tutorials/custom-markers-gl-js/#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC

https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker#getlnglat

https://stackoverflow.com/questions/50899452/mapbox-gl-js-change-the-color-from-the-default-marker

https://studio.mapbox.com/

https://web-designer.cman.jp/javascript_ref/others/gps/

https://day-journal.com/memo/mapboxgljs-014/

https://docs.mapbox.com/jp/mapbox-gl-js/example/locate-user/

https://www.systemexpress.co.jp/htmlcss/geolocation.html

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

Javascriptファイルを後で読ませる設定

http://toushin.konjiki.jp/

上記のサイトは、ページスピードインサイトの点数が極めて悪く、いろいろ調べてみるとアドセンスを後で読ませる設定にすると点数が上がることが分かった。

【参考サイト】
https://nesla.info/pagespeed-insight-adsense-tag

ただ、参考サイトではphpでスマホタブレット向けとパソコン向けの設定を分けていたので、javascriptで設定を分けてみた。

【参考サイト】
https://www.webdlab.com/labs/style/

	<!--アドセンスファイル最後に読み込み-->
	<script>
		if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
			// スマートフォン・タブレット向けの記述
			//<![CDATA[
			//lazy load ads
			var lazyloadads = false;
			window.addEventListener("scroll", function() {
				if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
						(function() {
								var ad = document.createElement('script');
								ad.type = 'text/javascript';
								ad.async = true;
								ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
								var sc = document.getElementsByTagName('script')[0];
								sc.parentNode.insertBefore(ad, sc);
						})();
						lazyloadads = true;
				}
			}, true)
				//]]>
		} else {
		</script>
		<script
			// PC向けの記述
			async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
		}
		</script>

ただ、パソコン向けとスマホタブレット向けで分けて動いたものの、ソースがとてもかっこ悪い。if文の中で、scriptを分けるとは。調べてみるとhtmlのbody要素で読み込ませる方法があることが分かった。

【参考サイト】
https://qiita.com/a01sa01to/items/fc6bf8bb5b1cb0db01cf

あと、createElementで作ったscriptタグのasyncプロパティは、デフォルトでfalseになっていることも分かった。

【参考サイト】
http://var.blog.jp/archives/54417101.html

パソコン向けアドセンスは、bodyの最後で読み込ませる設定。
スマホタブレット向けアドセンスは、アドセンスが表示されるところまでスクロールされたら読み込ませる設定にした。

実際のソース

	<!--アドセンスファイル最後に読み込み-->
	<script>
		if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
			// スマートフォン・タブレット向けの記述
			//<![CDATA[
			//lazy load ads
			var lazyloadads = false;
			window.addEventListener("scroll", function() {
				if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
						(function() {
								var ad = document.createElement('script');
								ad.type = 'text/javascript';
								ad.async = true;
								ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
								var sc = document.getElementsByTagName('script')[0];
								sc.parentNode.insertBefore(ad, sc);
						})();
						lazyloadads = true;
				}
			}, true)
			//]]>
		} else {
			// PC向けの記述
			var pcad = document.createElement('script');
			pcad.type = 'text/javascript';
			pcad.async = true;
			pcad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
			document.body.appendChild(pcad);
		}
	</script>

そして、ページスピードインサイトの点数は下記になった。

モバイル 23点から65点へ。
パソコン 67点から74点へ。

また一つ、勉強になりました。それとJavascriptの勉強をしないと。

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

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