2018.12.25-12.28の週報

2018.12.25
午前
男のWi-Fiの返却作業。
金券ショップ網の更新。

午後
会計処理。
クラインガルテン情報局の改装作業。

男のWi-Fiは現在、貸出中が三つ。

2018.12.26
午前
クラインガルテン情報局の改装作業。

午後
クラインガルテン情報局の改装作業。

ワードプレスはBlankSlateを使う形で。
https://ja.wordpress.org/themes/blankslate/

ちびちび修正しているけど、いつになるか分からない。

2018.12.27
午前
男のWi-Fiの送付作業。
クラインガルテン情報局の改装作業。

午後
クラインガルテン情報局の改装作業。

男のWi-Fiは注文が三つ入り、現在貸出中が六つ。
ワードプレスを一から作るが果てしなく。

2018.12.28
午前
クラインガルテン情報局の改装作業。

午後
クラインガルテン情報局の改装作業。

WordPressの修正を地道に頑張るしかない。

カテゴリー
業務日報

2018.12.17-12.21の週報

2018.12.17
午前
金券ショップ網の修正。

午後
金券ショップ網の修正。

金券ショップ網の修正で、やっと広告のページができた。
2つのcsvファイルの差分を取り表示する。
https://adanmarketing.com/archives/1314

カテゴリー
業務日報

ヤフー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>
カテゴリー
業務日報

JavaScriptで2つのCSVファイルの差分をとり表示する

JavaScriptで2つのCSVファイルの差分をとり表示する方法。

JavaScriptでやりたかったこと。

  • 2つのcsvファイルを読み込み、配列にする。
  • 配列を比較し、一致した場合、片方の配列に片方の要素を入れる。
  • 一致した配列を、サイトにテーブルで表示する。
  • テーブルをソート、並べ替えができるようにする。

このページでやりたかったこととほぼ同じ。
CSVを照らし合わせながら、HTMLにデータを出力。
https://teratail.com/questions/115522

jQuery.csv.jsでcsvファイルを読み込めることが分かった。
あと、テーブルをソートするには、tablesorter.jsを入れた。

ファイルの読み込みに$.ajaxでもよかったが、$.getにした。
https://qiita.com/cnloni/items/5de03096a73c702b97ed

ただ、ファイル読み込み時に文字コードエラーがあったので、これらを参考。
https://masshiro.blog/jquery-excel-csv/
https://teramako.hatenadiary.org/entry/20080913/p1

読み込んだファイルを配列にするために、こちらを参考。
https://uxmilk.jp/11586

二つのファイルを個別の配列にしたら、配列を比較し、一致したら片方の配列に片方の要素を入れる。
https://www.softel.co.jp/blogs/tech/archives/5527

ここで、表示したい配列が完成した。

そして次に配列をテーブルで表示させる。
https://algorithm.joho.info/programming/javascript/table-array-2d-js/

テーブルにソートするのにヘッダーtheadが必要なので、これらを参考。
https://www.w3schools.com/jsref/met_table_createthead.asp
https://www.aspsnippets.com/Articles/Insert-Header-Cell-TH-element-in-HTML-Table-using-JavaScript.aspx

テーブルができたので、ソートできるtablesorter.jsを入れる。
https://beiznotes.org/install-tablesorter/

そして完成したのが、下記のページ。
https://kinkenshop.sakura.ne.jp/pr/pr.html


// 表の作成 data_dはthead用の配列データ、data_bはtbodyの配列データ、tableIdはtableのid
function makeTable(data_h, data_b, tableId){
    //theadを作成
    var t_head = document.getElementById(tableId).createTHead();
    //tbodyを作成
    var t_body = document.createElement("tbody");

    //theadにtrを作成
    var t_head_row = t_head.insertRow(-1);

    //tbody用の空配列
    var t_body_rows=[];

    //theadのtrにthを配列の数だけ作成
    for (var k = 0; k < data_h.length; k++) {
         //thを作成
         var headerCell = document.createElement("TH");
         //thにthead用の配列データを一つ挿入
         headerCell.innerHTML = data_h[k];
         //theadのtrにthとthead用の配列データを挿入。ヘッダーに自動で加えられる
         t_head_row.appendChild(headerCell);
    }

    //tbodyのtrにtdを2次元配列の数だけ作成
    for (i = 0; i < data_b.length; i++) {
         //tbody用の空配列にtrを追加
         t_body_rows.push(t_body.insertRow(-1));

         //tbodyのtrにtdを配列の数だけ追加
         for (j = 0; j < data_b[0].length; j++){
              //tbodyのtrにtdセルを挿入
              cell = t_body_rows[i].insertCell(-1);
              //tdセルにtbodyの配列データを挿入
              cell.appendChild(document.createTextNode(data_b[i][j]));
         }
    }

    // 指定したtable id要素にt_bodyを加える。
    document.getElementById(tableId).appendChild(t_body);
}

$(function(){
  //二つファイルを読み込み、テーブルを作る関数に渡す
  $.get({
    //list.csvを読み込む
    url: './list.csv',
    dataType: 'text',
    beforeSend: function(xhr) {
      xhr.overrideMimeType('text/plain;charset=utf-8');
    },
  }).done( function(list_data){ //ajaxの通信に成功した場合

    //一覧表のlist.csvを配列list_csvにする
    var list_csv = $.csv.toArrays(list_data);

    $.get({
      //google.csvを読み込む
      url: './google.csv',
      dataType: 'text',
      beforeSend : function(xhr) {
        xhr.overrideMimeType('text/plain;charset=utf-8');
      },
    }).done( function(google_data){ //ajaxの通信に成功した場合

      //google.csvを配列google_csvにする
      var google_csv = $.csv.toArrays(google_data);

      //配列google_csvの一致する行に配列list_csvを追加にする
      for ( i = 0; i < google_csv.length; i++ ){
        for ( j = 0; j < list_csv.length; j++ ){
          if ( google_csv[i][0] === list_csv[j][2] ){
            google_csv[i].unshift( list_csv[j][1] );
            google_csv[i].unshift( list_csv[j][0] );
          }
        }
      }

      //thead用配列
      var data_head = ["番号","都道府県","ページ名","表示回数","価格"];

      //テーブルを作る関数(thead用配列、tbody用配列、table id)
      makeTable(data_head, google_csv, "tableSET");

      //クリックでtablesorterによる並べ替え
      $("#tableSET").tablesorter();

    }).fail( function(){ //google.csvの読み込みに失敗した場合
      alert("error!");
    });
  }).fail( function(){ //list.csvの読み込みに失敗した場合
    alert("error!");
  });
});

htmlファイルにはこちらのコードを書く。


<table id="tableSET" class="tablesorter"></table>

2018.12.10-12.14の週報

2018.12.10
午前
男のWi-Fiへの質問に返信。
金券ショップ網の修正。

午後
男のWi-Fiへの質問に返信。
金券ショップ網の修正。

男のWi-Fiはこの時期から質問や予約が入る。昨日送付が一つで、現在貸出中が二つ。予約が一つ。
金券ショップ網の修正は、やっとjQueryのソースの意味が分かり少しずつ進む。

2018.12.11
午前
男のWi-Fiへの質問に返信。
金券ショップ網の更新と修正。

午後
金券ショップ網の修正。

金券ショップ網の修正は、jQueryでcsvファイルを2つ取り込み合体させ、テーブルで出力させることに成功したが、テーブルの並び替えできず。
実装まで、あと一歩なんだけど。

2018.12.12
午前
金券ショップ網のクライアントからの電話対応。
金券ショップ網の修正。

午後
金券ショップ網の修正。

金券ショップ網の修正は、一歩も進まず。配列からテーブルを作ろうとすると、thが作れず。実力不足。

2018.12.13
午前
金券ショップ網の修正。

午後
金券ショップ網の修正。

金券ショップ網の修正で、目途が立ち良かった。後は実装するだけなので、早く終わらせたい。

2018.12.14
午前
金券ショップ網の更新と修正。

午後
金券ショップ網の修正。

金券ショップ網の修正で、やっと広告価格のページができた。これで明朗会計な広告になるので、広告出稿してくれる金券ショップが増えるといいな。