カテゴリー
業務日報

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で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>
カテゴリー
ホームページ製作

簡単にカルーセルが設置できるbxSliderの使い方

サイトにスライドショーを簡単に設置できるjQueryのカルーセルはないか、探してみました。
そして、見つけたのが、bxSlider。

【参考にしたサイト】
bxSliderの本家サイト、ダウンロードしてくるのに必要。
https://bxslider.com/

jQuery.min.jsの最新版が必要なので、下記サイトで確かめる。
https://developers.google.com/speed/libraries#jquery

bxSliderの使い方が書いてあるサイト。
https://edge.sincar.jp/web/jquery%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%abbxslider/

但し、bxSliderを使うと画像がずれることが分かった。
右にずれるのを修正するには、


.bx-wrapper .bx-viewport {
    left: 0px;
}

だけでよかった。