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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1912閲覧

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

nanase21

総合スコア144

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/23 01:24

編集2019/03/24 00:51

実現したいこと

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

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

js

1const 2 BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'], 3 plan = Shedule.convert (BUSY); 4 5var $win = $(window); 6 7$win.on('load resize', function() { 8 var windowWidth = window.innerWidth; 9 10 if (windowWidth > 1024) { 11 // PCの処理 12  const shedule = new Shedule (new Date, 14, plan); 13 } else if (windowWidth > 768) { 14 // TABの処理 15  const shedule = new Shedule (new Date, 10, plan); 16 } else { 17 // SPの処理 18  const shedule = new Shedule (new Date, 7, plan); 19 } 20}); 21const table = shedule.table;

html

1<div id="calendar"></div>

js

1{ 2 const 3 day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], 4 day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thu.)', '(Fri.)', '(Sat.)'], 5 doc = document, 6 DEF_OPTION = { }; 7 8 const 9 A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))), 10 B = (d, n) => d.setDate (d.getDate () + n), 11 C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''), 12 D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 13 E = (e, d) => { 14 let 15 [a,,b] = A (e, 'label', 'br', 'label'), 16 w = d.getDay () ; 17 a.textContent = d.getDate (); 18 b.textContent = day_jname[w]; 19 e.classList.add (day_name[w]); 20 }, 21 F = d => { 22 let m = d.getMonth (); 23 return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 + 24 (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m); 25 }, 26 H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()), 27 I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':'); 28 29 //_____________ 30 31 32 class Shedule { 33 34 constructor (date = new Date, range = 7, plan = [ ], option = DEF_OPTION) { 35 this.current = H (date);//表の左端の日付、これを基準とする 36 this.date = H (date); 37 this.range = range; //何日分を表示するか 38 this.plan = plan; //予定表が構成される 39 this.table = document.createElement ('table'); 40 this.option = Object.assign ({ }, option); 41 42 this.remake (); 43 } 44 45 46 add (day = this.range) { 47 let d = H (this.current); 48 d.setDate (d.getDate () + day); 49 if (+this.date <= +d) 50 this.current = d; 51 return this; 52 } 53 54 55 setHoliday (...dayNo) { 56 let 57 year = this.current.getFullYear (), 58 start = new Date (year, 0, 1), 59 end = new Date (year, 12, 1), 60 61 b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間 62 e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間 63 s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間 64 65 dayNo.forEach (n => { 66 let current = new Date (start); 67 68 current.setDate (7 - current.getDate () + n); 69 70 for (; current < end; current.setDate (current.getDate () + 7)) { 71 let idx = F (current); 72 73 for (let c = b; c < e; c = new Date (+s + (+c))) { 74 let key = I (c); 75 if (! this.plan[key]) 76 this.plan[key] = [ ]; 77 this.plan[key][idx] = true; 78 } 79 } 80 }); 81 82 return this; 83 } 84 85 86 87 setLunchTime (...dayNo) { 88 let 89 year = this.current.getFullYear (), 90 start = new Date (year, 0, 1), 91 end = new Date (year, 12, 1), 92 93 b = new Date (Date.UTC (1970,0,1, 12, 0)),//列のスタート時間 94 e = new Date (Date.UTC (1970,0,1,13, 30)),//列の終了時間 95 s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間 96 97 dayNo.forEach (n => { 98 let current = new Date (start); 99 current.setDate (7 - current.getDate () + n); 100 101 for (; current < end; current.setDate (current.getDate () + 7)) { 102 let idx = F (current); 103 104 for (let c = b; c < e; c = new Date (+s + (+c))) { 105 let key = I (c); 106 if (! this.plan[key]) 107 this.plan[key] = [ ]; 108 this.plan[key][idx] = true; 109 } 110 } 111 }); 112 113 return this; 114 } 115 116 117 //Booking 118 setBook (date, occupancyTime) {// 予約日時,占有時間(分) 119 let 120 current = new Date (date), 121 dayNo = F (current), 122 sTime = 30,//30間隔 123 step = new Date (Date.UTC (1970,0,1, 0, sTime)), 124 cnt = Math.floor (occupancyTime / sTime); 125 126 for (let i = 0; i < cnt; i++) { 127 let time = D (current); 128 if (! this.plan[time]) 129 this.plan[time] = [ ]; 130 this.plan[time][dayNo] = true; 131 current.setTime (+current +(+step)); 132 } 133 return this; 134 } 135 136 remake () { 137 this.prev_btn = this.next_btn = null; 138 let t = this.table; 139 [...t.childNodes].forEach (e => e.remove ()); 140 141 let 142 h = t.createTHead (), 143 tr0 = h.insertRow (-1), 144 tr1 = h.insertRow (-1), 145 d = H (this.current), 146 s = tr0.insertCell (-1), 147 c = 1, 148 m = d.getMonth (); 149 150 for (let i = 0; i < this.range; i++, c++, B (d, 1)) { 151 let td = tr1.insertCell (-1); 152 if (m !== d.getMonth ()) { 153 s.colSpan = c - 1; 154 s = tr0.insertCell (-1); 155 m = d.getMonth (); 156 c = 1; 157 } 158 s.textContent = C (d); 159 E (td, d); 160 } 161 s.colSpan = c - 1; 162 163 let e = tr0.insertCell (0); 164 e.textContent = '前の一週間'; 165 e.classList.add ('button'); 166 e.rowSpan = 2; 167 this.prev_btn = e; 168 169 e = tr0.insertCell (-1); 170 e.textContent = '次の一週間'; 171 e.classList.add ('button'); 172 e.rowSpan = 2; 173 this.next_btn = e; 174 175 //__ 176 let 177 begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間 178 end = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間 179 step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間 180 o = F (this.current), 181 rst = [ ]; 182 183 for (let d = begin; d < end; d = new Date (+step + (+d))) { 184 let 185 a = new Array (this.rangi), 186 b = I (d), 187 c = this.plan[b] || []; 188 189 for (let i = 0; i < this.range; i++) 190 a[i] = c[o + i] ? '-' : '◎'; 191 192 rst.push ([b, ...a, b]); 193 } 194 195 let [tb] = A (t, 'tbody'); 196 rst.forEach (r => { 197 let tr = tb.insertRow (-1); 198 r.forEach (c => tr.insertCell (-1).textContent = c) 199 }); 200 201 return this; 202 } 203 204 205 handleEvent (event) { 206 let t = event.target; 207 if (t === this.prev_btn) this.add (-this.range).remake (); 208 if (t === this.next_btn) this.add ( this.range).remake (); 209 210 let cbfunc = this.option.handleEvent; 211 if ('function' === typeof cbfunc) 212 cbfunc.call (this, event); 213 } 214 215 216 static convert (ary) { 217 let rst = { }; 218 ary.forEach (a => { 219 let 220 dt = new Date (a + ':00.000+09:00'), 221 tm = D (dt), 222 dn = F (dt); 223 if (! rst[tm]) 224 rst[tm] = []; 225 rst[tm][dn] = true; 226 }); 227 return rst; 228 } 229 230 } 231 this.Shedule = Shedule; 232} 233 234//_____________ 235function strDateJp (date) { 236 let [y, m, d] = ['getFullYear', 'getMonth', 'getDate'].map (fc => date[fc]()); 237 return `${y}${m+1}${d}`; 238} 239 240 241//___________________________ 242 243const 244 BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'], 245 plan = Shedule.convert (BUSY), 246 shedule = new Shedule (new Date, 14, plan), 247 table = shedule.table; 248 249table.border = 1; 250//月水金を休日      昼休みがあるのが日火木土 251shedule.setHoliday (0, 6).setLunchTime (0, 1, 2, 3, 5, 4, 6)//..remake (); 252 253 //予約入った時 例) 2月24日 9時30 2時間コースと予約が入った時 254shedule.setBook (new Date (2019, 1, 19, 9, 30), 30).remake (); 255shedule.setBook (new Date (2019, 1, 24, 9, 30), 120).remake (); 256 257//shedule.remake (); //単独で表を更新 258document 259 .querySelector ('#calendar') 260 .appendChild (table) 261 .addEventListener ('click', shedule, false); 262 263//クリック時の処理 264document.getElementById ('acdn-target').value = strDateJp (shedule.current); 265 266document.querySelector('#calendar').addEventListener('click', event => { 267 const target = event.target; 268 if (target.nodeName.toLowerCase() !== 'td') { 269 return true; 270 } 271 272 if (!(target.closest('tbody') && 1 <= target.cellIndex && target.cellIndex <= 7)) { 273 return true; 274 } 275 276 const time = target.parentNode.cells[0].textContent; 277 const table = target.closest('table'); 278 const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent.slice(0,-6); 279 const ymrow = table.tHead.rows[0]; 280 const ym = (target.cellIndex <= ymrow.cells[1].colSpan ? ymrow.cells[1] : ymrow.cells[2]).textContent; 281 document.getElementById('acdn-target').value = ym + date + '-' + time; 282 283 //遷移に関する記述 284 const value = ym + date + ' ' + time; 285 var id = Array.from(document.getElementsByName('id'), x => x.value); 286 //確認ページに飛ぶ 287 window.location.href = `new.${id}`+`confirm?datetime=${value}`; 288 289 //ここで予約時間を取得 290 var str = document.getElementById( "booktime" ).value, 291 edit_str = str.slice(0,-1); 292 console.log(edit_str); 293 294 295 return true; 296}, false);

###解決方法

js

1function daysCount(key){ 2 3 if (window.matchMedia( "(min-width: 400px)" ).matches) { 4 /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */ 5 return 14; 6 } else { 7 /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */ 8 return 7; 9 } 10 }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/03/23 02:29

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

回答2

0

ベストアンサー

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

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

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

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

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

投稿2019/03/23 07:19

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nanase21

2019/03/24 01:01

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

退会済みユーザー

2019/03/24 09:07

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

2019/04/09 12:12 編集

@hai_haiさん お世話になっています。 カレンダーについて、再度お聞きしたいことがあるのですがsetHoliday()が空の場合、以前ご教示頂いたクリック処理が反応しなくなるのですがどのようにしたらよいかご教示頂けないでしょうか? コード内を色々デバッグしてみるとsetHoliday()が空の時に、getDayplanに値が入ってない為にエラーが出ているようなのですがsetHoliday()が空の時のエラー回避方法がわからないです。 ご迷惑をおかけしますがご教示いただけると幸いです。 例) schedule.setHoliday().setLunchTime (0, 2, 4, 6); //とするとクリック処理がエラー発火しない https://teratail.com/questions/183448 追記) クリック処理時に、setLunchTimeメソッドは空でもクリック処理が発火するのですがなぜsetHoildayメソッドの時は空だと、クリック処理が発火しなくなるのでしょうか? 両メソッド内の処理は一緒の内容が行われているののですがなぜ実行結果が変わってしまうのでしょうか?
nanase21

2019/04/09 13:01 編集

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

0

javascript

1 remake () { 2 let t = this.table; 3 t.innerText = ''; 4 5 let 6 h = t.createTHead (), 7 tr0 = h.insertRow (-1), 8 tr1 = h.insertRow (-1), 9 d = H (this.current), 10 s = tr0.insertCell (-1), 11 c = 1, 12 m = d.getMonth (); 13 14 for (let i = 0; i < this.range; i++, c++, B (d, 1)) { 15 let td = tr1.insertCell (-1); 16 if (m !== d.getMonth ()) { 17 s.colSpan = c - 1; 18 s = tr0.insertCell (-1); 19 m = d.getMonth (); 20 c = 1; 21 } 22 s.textContent = C (d); 23 E (td, d); 24 } 25 s.colSpan = c - 1; 26 27 let e = tr0.insertCell (0); 28 e.textContent = '前の一週間'; 29 e.classList.add ('button'); 30 e.rowSpan = 2; 31 this.prev_btn = e; 32 33 e = tr0.insertCell (-1); 34 e.textContent = '次の一週間'; 35 e.classList.add ('button'); 36 e.rowSpan = 2; 37 this.next_btn = e; 38 39 //__ 40 let 41 begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間 42 end = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間 43 step = new Date (Date.UTC (1970,0,1, 0,30)),//列の間隔調整時間 44 o = F (this.current), 45 [tb] = A (t, 'tbody'); 46 47 for (let d = begin; d < end; d = new Date (+step + (+d))) { 48 let 49 b = I (d), 50 c = this.plan[b] || [], 51 tr = tb.insertRow (-1); 52 53 tr.insertCell (-1).textContent = b; 54 for (let i = 0; i < this.range; i++) { 55 let td = tr.insertCell (-1); 56 if (c[o + i]) { 57 td.textContent = '-'; 58 td.classList.add ('invalid'); 59 } 60 else { 61 td.textContent = '◎'; 62 td.classList.add ('valid'); 63 } 64 } 65 tr.insertCell (-1).textContent = b; 66 } 67 68 return this; 69 } 70

投稿2019/03/24 09:03

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問