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

JavascriptとJQueryの比較

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

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

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

div idに自動連番をつける

div idに自動連番をつけるときに参考になったサイト。

http://yoseik.sakura.ne.jp/unknown/2014/06/15/%EF%BD%8Aquerycss-%E9%80%A3%E7%95%AA%E3%82%92%E8%87%AA%E5%8B%95%E7%9A%84%E3%81%AB%E4%BB%98%E4%B8%8E%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

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

Javascriptの配列操作

Javascriptの配列操作について下記リンク先が参考になりました。

https://www.wakuwakubank.com/posts/280-javascript-array-helper/

https://www.e-loop.jp/knowledges/30/

JSONデータを扱うのには、下記がリンク先が参考になりました。

カテゴリー
業務日報

2020.1.14-1.17の週報

2020.1.14
午前
男のWi-Fiの更新作業。

午後
パソコン環境構築作業。
J3チーム一覧の修正作業。

男のWi-Fiは、Glocal G4が入荷され販売再開。
パソコン環境構築作業は、Sublime Textをインストールしたものの、VS CODEが圧倒的人気なのでインストールし、メインはそれに変更する。それに伴いLive Sass Compilerの拡張機能も入れて、SASSを使えるようにする。
J3チーム一覧の修正作業は、今日から作業に入るもSASSをどう変換するか分からず。

2020.1.15
午前
男のWi-Fiの送付作業。

午後
パソコン環境構築作業。
J3チーム一覧の修正作業。

男のWi-Fiは、Glocal G4が早速、売れて良かった。
パソコン環境構築作業は、node.jsを入れてwebpackが動くようにした。
J3チーム一覧の修正作業は、sassよりjavascriptでの修正が先の構想。

【参考サイト】
https://qiita.com/kerupani129/items/72c1a8d5ab6dffa70abf

2020.1.16
午前
男のWi-Fiの送付作業。
J3チーム一覧の修正作業。

午後
男のWi-Fiの送付作業。
J3チーム一覧の修正作業。

男のWi-Fiの送付作業は、販売が一つ、レンタルが一つ。
J3チーム一覧の修正作業は、jsonファイルが読み込めず。

2020.1.17
午前
J3チーム一覧の修正作業。

午後
J3チーム一覧の修正作業。

J3チーム一覧の修正作業は、jsonファイルが読み込み出来た。問題だったのは、Jqueryを正しく読み込めてなかったことと、ローカルではAjaxでのファイル読み込みができなくなっていたこと。簡易ウェブサーバを立てると読み込みが出来た。

jqueryのCDN読み込み先
【参考サイト】
https://developers.google.com/speed/libraries

簡易ウェブサーバ、Servedについてとダウンロード先。
【参考サイト】
https://book.studio947.net/article/2337/

http://enjalot.github.io/served/

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

ヤフーJavaScriptマップAPIで現在地を表示する

ヤフーJavaScriptマップAPIで現在地を表示する。

やりたかったこと。

  • ヤフーマップの表示。
  • ヤフーマップの中で現在地の表示。

ヤフーマップを表示するJavaScript、ヤフーマップAPIの情報、Y.Map、Y.Marker、Y.LatLngの使用法について。
https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

navigator.geolocationでGeolocation APIが可能かどうかの判定など、このサイトに一通り書いてある
https://syncer.jp/how-to-use-geolocation-api

navigator.geolocation.watchPositionで位置情報の取得。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/watchPosition

現在地の取得と使い方。coords.latitude、coords.longitudeについて。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API

現在地ボタンgeoFindMe()がクリックされて、地図が範囲内だったら表示される。

<script>
	var ymap = new Y.Map("yahoomap");

	function geoFindMe() {

		//現在地変数
		var marker_now = null;

		//現在地用人間マーカー(好きな画像を仕込んでおく)
		var icon = new Y.Icon('human.png');

		//エラー表示
		var erroroutput = document.getElementById("errorout");
		erroroutput.innerHTML = "";

		//Geolocation APIが利用できるかを判定
		if (navigator.geolocation) {

			//現在の位置情報を定期的に取得
			navigator.geolocation.watchPosition(

				//位置情報の取得に成功した場合の処理
				function(pos) {

					//現在地用マーカーがnullでないなら削除
					if( marker_now !== null ){

						//ymapはnew Y.Map("yahoomap");で宣言された変数
						ymap.removeFeature(marker_now);

						erroroutput.innerHTML = "";
					}

					//現在地用マーカーの場所決めからポップアップ
					//Y.Markerはマーカー表示。Y.LatLngは現在地
					marker_now = new Y.Marker(new Y.LatLng(pos.coords.latitude, pos.coords.longitude), {icon: icon});

					//現在地が表示される
					ymap.addFeature(marker_now);

					marker_now.bindInfoWindow('現在地');
				}, 

				//位置情報の取得に失敗した場合の処理
				function() {
					erroroutput.innerHTML = "位置情報を取得できませんでした";
				}, 

				//位置取得の動作オプションを設定 
				{ 
					enableHighAccuracy: false,
					timeout : 10000,
					maximumAge : 0
				}
			);
		} else {
			erroroutput.innerHTML = "Geolocation APIに対応してません";
		}
	}
</script>