質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.11%

Javascript: JSでメディアクエリを設定する方法

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 596

nanase21

score 90

実現したいこと

スマホ、タブレット、pcのサイズごとに表示されるカレンダーの内容を変えたい。

試したこと

Qiitaの記事を参考に下記のコードでメディアクエリを設定してみたのですが、こうするとカレンダーが出力されなくなりました。
原因を色々考えてみたのですが、どうしたらよいのか分からなくて困っています。
Qiita参考記事
動くサンプル

const
  BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
  plan = Shedule.convert (BUSY);

var $win = $(window);

$win.on('load resize', function() {
  var windowWidth = window.innerWidth;

  if (windowWidth > 1024) {
    // PCの処理
  const shedule = new Shedule (new Date, 14, plan);
  } else if (windowWidth > 768) {
    // TABの処理
  const shedule = new Shedule (new Date, 10, plan);
  } else {
    // SPの処理
  const shedule = new Shedule (new Date, 7, plan);
  }
});
const table = shedule.table;
<div id="calendar"></div>
{
  const
    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thu.)', '(Fri.)', '(Sat.)'],
    doc = document,
    DEF_OPTION = { };

  const
    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
    B = (d, n) => d.setDate (d.getDate () + n),
    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 
    E = (e, d) => {
      let
        [a,,b] = A (e, 'label', 'br', 'label'),
        w = d.getDay () ;
      a.textContent = d.getDate ();
      b.textContent = day_jname[w];
      e.classList.add (day_name[w]);
    },
    F = d => {
      let m = d.getMonth (); 
      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
    },
    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':');

  //_____________


  class Shedule {

    constructor (date = new Date, range = 7, plan = [ ], option = DEF_OPTION) {
      this.current = H (date);//表の左端の日付、これを基準とする
      this.date    = H (date);
      this.range   = range;  //何日分を表示するか
      this.plan    = plan; //予定表が構成される
      this.table   = document.createElement ('table');
      this.option  = Object.assign ({ }, option);

      this.remake ();
    }


    add (day = this.range) {
      let d = H (this.current);
      d.setDate (d.getDate () + day);
      if (+this.date <= +d)
        this.current = d;
      return this;
    }


    setHoliday (...dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),

        b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      dayNo.forEach (n => {
        let current = new Date (start);

        current.setDate (7 - current.getDate () + n);

        for (; current < end; current.setDate (current.getDate () + 7)) {
          let idx = F (current);

          for (let c = b; c < e; c = new Date (+s + (+c))) {
            let key = I (c);
            if (! this.plan[key])
              this.plan[key] = [ ];
            this.plan[key][idx] = true;
          }
        }
      });

      return this;
    }



        setLunchTime (...dayNo) {
      let
        year   = this.current.getFullYear (),
        start  = new Date (year, 0, 1),
        end    = new Date (year, 12, 1),

        b = new Date (Date.UTC (1970,0,1, 12, 0)),//列のスタート時間
        e = new Date (Date.UTC (1970,0,1,13, 30)),//列の終了時間
        s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間

      dayNo.forEach (n => {
        let current = new Date (start);
        current.setDate (7 - current.getDate () + n);

        for (; current < end; current.setDate (current.getDate () + 7)) {
          let idx = F (current);

          for (let c = b; c < e; c = new Date (+s + (+c))) {
            let key = I (c);
            if (! this.plan[key])
              this.plan[key] = [ ];
            this.plan[key][idx] = true;
          }
        }
      });

      return this;
    }


    //Booking
    setBook (date, occupancyTime) {// 予約日時,占有時間(分)
      let
        current = new Date (date),
        dayNo = F (current),
        sTime = 30,//30間隔
        step = new Date (Date.UTC (1970,0,1, 0, sTime)),
        cnt = Math.floor (occupancyTime / sTime);

      for (let i = 0; i < cnt; i++) {
        let time = D (current);
        if (! this.plan[time])
          this.plan[time] = [ ];
        this.plan[time][dayNo] = true;
        current.setTime (+current +(+step));
      }
      return this;
    }

    remake () {
      this.prev_btn = this.next_btn = null;
      let t = this.table;
      [...t.childNodes].forEach (e => e.remove ());

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //__      
      let
        begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        end   = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
        o = F (this.current),
        rst = [ ];

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          a = new Array (this.rangi),
          b = I (d),
          c = this.plan[b] || [];

        for (let i = 0; i < this.range; i++)
          a[i] = c[o + i] ? '-' : '◎';

        rst.push ([b, ...a, b]);
      }

     let [tb] = A (t, 'tbody');
     rst.forEach (r => {
       let tr = tb.insertRow (-1);
       r.forEach (c => tr.insertCell (-1).textContent = c)
     });

     return this; 
    }


    handleEvent (event) {
      let t = event.target;
      if (t === this.prev_btn) this.add (-this.range).remake ();
      if (t === this.next_btn) this.add ( this.range).remake ();

      let cbfunc = this.option.handleEvent;
      if ('function' === typeof cbfunc)
        cbfunc.call (this, event);
    }


    static convert (ary) {
      let rst = { };
      ary.forEach (a => {
        let
          dt = new Date (a + ':00.000+09:00'),
          tm = D (dt),
          dn = F (dt);
        if (! rst[tm])
          rst[tm] = [];
        rst[tm][dn] = true;
      });
      return rst;
    }

  }
  this.Shedule = Shedule;
}

//_____________
function strDateJp (date) {
  let [y, m, d] = ['getFullYear', 'getMonth', 'getDate'].map (fc => date[fc]());
  return `${y}${m+1}${d}日`;
}


//___________________________

const
  BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
  plan = Shedule.convert (BUSY),
  shedule = new Shedule (new Date, 14, plan),
  table = shedule.table;

table.border = 1;
//月水金を休日      昼休みがあるのが日火木土
shedule.setHoliday (0, 6).setLunchTime (0, 1, 2, 3, 5, 4, 6)//..remake ();

 //予約入った時 例) 2月24日 9時30 2時間コースと予約が入った時
shedule.setBook (new Date (2019, 1, 19, 9, 30), 30).remake ();
shedule.setBook (new Date (2019, 1, 24, 9, 30), 120).remake ();

//shedule.remake (); //単独で表を更新
document
  .querySelector ('#calendar')
  .appendChild (table)
  .addEventListener ('click', shedule, false);

//クリック時の処理
document.getElementById ('acdn-target').value = strDateJp (shedule.current);

document.querySelector('#calendar').addEventListener('click', event => {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'td') {
    return true;
  }

  if (!(target.closest('tbody') && 1 <= target.cellIndex && target.cellIndex <= 7)) {
    return true;
  }

  const time = target.parentNode.cells[0].textContent;
  const table = target.closest('table');
  const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent.slice(0,-6);
  const ymrow = table.tHead.rows[0];
  const ym = (target.cellIndex <= ymrow.cells[1].colSpan ? ymrow.cells[1] : ymrow.cells[2]).textContent;
  document.getElementById('acdn-target').value = ym + date + '-' + time;

  //遷移に関する記述
  const value = ym + date + ' ' + time;
  var id = Array.from(document.getElementsByName('id'), x => x.value);
  //確認ページに飛ぶ
  window.location.href = `new.${id}`+`confirm?datetime=${value}`;

  //ここで予約時間を取得
  var str = document.getElementById( "booktime" ).value,
      edit_str = str.slice(0,-1);
  console.log(edit_str);


  return true;
}, false);

解決方法

function daysCount(key){

 if (window.matchMedia( "(min-width: 400px)" ).matches) {
 /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
     return 14;
 } else {
 /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
     return 7;
  }
 }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/03/23 11:29

    jQuery を読み込んでいるHTML上の場所と、その
    const
    BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
    のスクリプトを読み込んでいる場所を教えてください。

    キャンセル

回答 2

checkベストアンサー

+3

そもそもスコープの違う場所で定義したものだから。

--
そのコードだとリサイズするたびにオブジェクトを作ろうとしてない?
それも無駄!

const shedule = new Shedule (new Date, 7, plan);
一度定義したら、
shedule.range = 14;
shedule.remake ();
とすればいつでも表示幅の項目数を変更できるのだから

--
そしてお願いがある。
そのコードを質問あるたびに提示するのはやめてほしい。
その理由として、Sheduleなんて文言はなくて、Scheduleが正しい。
せめてその辺を察して修正してからにしてください。
それが出てくるたび、恥ずかしいかぎり。

--
葉先ばかり見てないで、もう少し木の幹だとか見つめなおすことをお勧めする。
もしくは諦めて、その費やすであろう時間をもっと有意義なことに使うほうが良いのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/24 10:01

    ご迷惑おかけして申し訳ございませんでした。
    @hai_haiさんにご教示頂いたアドバイスを参考に関数を作ってifでメディアクエリを判定し、returnで表示幅を変更したところ意図した形になりました。
    CSSについて追加で一点、お聞きしたいことがあるのですが、◎の箇所は背景色が水色、×の箇所は灰色としたい時どのようにしたらよいかアドバイスを頂けないでしょうか?
    何度も質問してしまい申し訳ございませんが、ご教示いただけると幸いです。

    キャンセル

  • 2019/03/24 18:07

    >意図した形になりました
    そういう成果物こそ、この質問を見て今後育つであろう後輩に見せておくべきだよ。最初は恥ずかしいかもしれないけれど、自分の残す足跡は誰かのためになる。

    キャンセル

  • 2019/04/08 23:06 編集

    @hai_haiさん

    お世話になっています。
    カレンダーについて、再度お聞きしたいことがあるのですがsetHoliday()が空の場合、以前ご教示頂いたクリック処理が反応しなくなるのですがどのようにしたらよいかご教示頂けないでしょうか?
    コード内を色々デバッグしてみるとsetHoliday()が空の時に、getDayplanに値が入ってない為にエラーが出ているようなのですがsetHoliday()が空の時のエラー回避方法がわからないです。
    ご迷惑をおかけしますがご教示いただけると幸いです。
    例)
    schedule.setHoliday().setLunchTime (0, 2, 4, 6); //とするとクリック処理がエラー発火しない

    https://teratail.com/questions/183448

    追記)
    クリック処理時に、setLunchTimeメソッドは空でもクリック処理が発火するのですがなぜsetHoildayメソッドの時は空だと、クリック処理が発火しなくなるのでしょうか?
    両メソッド内の処理は一緒の内容が行われているののですがなぜ実行結果が変わってしまうのでしょうか?

    キャンセル

  • 2019/04/09 21:40 編集

    ご迷惑おかけして申し訳ございません。コードをデフォルトに戻して再度記述したところ解決できました。

    追記)
    直っていませんでした。。。

    キャンセル

0

    remake () {
      let t = this.table;
      t.innerText = '';

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //__      
      let
        begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        end   = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の間隔調整時間
        o = F (this.current),
        [tb] = A (t, 'tbody');

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          b = I (d),
          c = this.plan[b] || [],
          tr = tb.insertRow (-1);

        tr.insertCell (-1).textContent = b;
        for (let i = 0; i < this.range; i++) {
          let td = tr.insertCell (-1);
          if (c[o + i]) {
            td.textContent = '-';
            td.classList.add ('invalid');
          }
          else {
            td.textContent = '◎';
            td.classList.add ('valid');
          }
        }
        tr.insertCell (-1).textContent = b;
      }

      return this; 
    }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる