+ JavaScript & jQuery 質問用スレッド vol.8 +
レス数が950を超えています。1000を超えると書き込みができなくなります。
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/hp/1467906819/ $('.A, .B, .C').filter('.D, .E. .F') VSCode Amazing Plugin - Quokkajs rapid prototyping playground.
https://youtu.be/klLP8EeTKtc
VSCode の拡張機能の、Quokka.js は？
Node.js で実行したものを、リアルタイムで、端末とエディタ内の両方に表示する
let numbers = [ 1, 2, 3 ]
let doubled = numbers.map( n => n * 2 )
doubled
//=> [ 2, 4, 6 ]
でも、エディタ内の結果からは、コピペできない！
端末からコピペするしかない chromeのコンソールもおんなじことしてくれるのであまり感動しなかった… >>851
どうもありがとうございます
期待通りのものが作れました >>843
個人的なことならブラウザ拡張で済ますって方法もあるよ
どうせNodeも外部通信くらいにしか使ってないんじゃないの？ >>852
は、ブラウザではなく、Node.js で実行している
このQuokka.js の無料版は、既に存在するファイルから、実行できない。
新規ファイルでしか実行できない selectboxの各optionの文字色を変えるにはどうしたらいいでしょうか？
背景＝$('option').eq(n).css('backgroundColor', c);はできますが
文字＝$('option').eq(n).css('color', c);は変わりません
Opera、Chromeで確認してます（foxは共にできず）
addClass使えはなしでお願いします（これでもできませんが） 補足
cは#000000の形式で
文字色を変えるは動的にです >>857
iphoneドラムロールになるし、あれは背景を変えられない
ブラウザを絞ればもう少し対応策があるかもしれない
ただ、諦めたほうが良いとは思う >>859
iphoneや泥は捨てでいいです
動作せずは困りますが色なしは可です
PCのWinで機能すればいいです いや、捨てでいいですって切り分けることが不可能でしょ
もし白黒の電子ペーパー端末で見たり色弱者が見た場合のこととか考えてる？ >>857
selectとoptionにスタイルかけるのは無理だから諦めろ
どうしてもやりたいなら代替要素でselectっぽい物を描画するライブラリを使えばいい
このスレ的に言えばjQueryUIでも使えばいいんじゃないか？ >>864
これな〜
モバイルだと画面の下の方でそれクリックすると下にはみ出して操作性悪いんだよな
あまりオススメできない
モバイルのデフォルト機能に任せた方が、個人的には良いと思う まあモバイル捨てていいらしいからいいんでない？
なんならモバイルで見たら普通のselectで出しわけしてもいいし 色弱に配慮する必要あるか？
そんなん言ったら全盲の人にも配慮しろってなって際限無いじゃん 俺は一応配慮してるわ
Lighthouseで指摘されたとこパパっと直してハイ終わり！
属性付けるだけで、2,3時間で全部終わった
まぁこれぐらいならやっといて損はないかなと 色弱ってFirefoxのシェアと同じくらいには居るんだから無視できないでしょ Firefoxは基本Chromeサポートのついででサポートできるからするけど
そうじゃなかったらChrome以外切り捨ててるな俺だったら >>861
そのためにかつ健常者でも見やすくするために色を変えるのです
>>863
背景は通常にできるのにテキストはできず、別の仕組みなのですね
簡単にできると安易に考えてましたがあきらめます
ありがとう
ちなみに>>862は別人 >>861
ちなFirefoxは勝手に切り分けられます >>875
ややこしくなるから次質問する時はIDトリップ付けたほうがいいかも >>877
IDトリップ？検索してみます
忠告ありがとう >>857
ChromeでもFirefoxでも文字も背景も色変わるけどなぁ 見た目挙動を統一したいならCanvas使えばいいだけなのにね
PaintWorkletでも良いけど >>881
Canvasでフォームの値を送るにはどうしたら良い？
ちょっとここにサンプル書いてみてよ Canvasに要素っぽいものを表示して、クリックされた座標でイベントを発火させるだけだよ
難しくは無いけどかなりめんどくさい
ただ、表示は本当になんとでも出来る >>883
いえ、ですからここに書いてくださいと
それとフォームって知ってますか？ フォームって知ってますか？って
既存のフォームが嫌で自分勝手に空き放題したいんだから
勝手に好きなように自分がフォームだと思うものを作ればいいじゃない canvasベースのゲームとか流行ると思ったら全く流行らなかったでござる 質問と全然関係ないところで盛り上がるのすきだよなお前ら >>886
Canvas使う意味がないですよねって話をしてるんだが
普通に画像でいいやん >>887
html5ベースのゲームはほぼ100%canvasでしょ >>881
そんなめんどくさいことしてるの？
できてもクソ重くね？
あと見た目挙動を統一なんて誰か言ってたっけ？ >>890
> html5ベースのゲームはほぼ100%canvasでしょ
そういうのってフレームワーク使わないよね？
っていうか、それHTML5ベースと言って良いんか？
canvasタグ以外のタグ使ってないやろ？ >>889
お前大アホ?
セレクトボックスの話をしてるんだぞ? >>893
だからセレクトボックスをcanvasで作るとか無駄な努力でしょ
HTML使ってできるものをわざわざ独自で作るとかさ どんな環境でも同様の表示がしたい場合はHTMLでは困難だし
しようとすること自体がナンセンスと言ってるんだが伝わらなかったか HTML5は同様の表示ができるように
作られたものなんですが？ HTMLはテキストとセマンティクス（意味）を伝えるために作られた物で
表示に関しては・・・ね >>879
いわくできるみたいだが
どうせハッタリだろうが Chromeが出た瞬間くらいにとくにセレクトボックスの色つけも含めて
HTML/CSS/JSの挙動について大規模に実験した記憶があるけど
ブラウザによってこれは反映されるけど、こっちは反映されないとかバラバラだったな
確かFirefoxはかなり検討してた
だけどimodeブラウザ2.0、NetFrontだっけ？が一番正しいってこともままあったな
HTML5がムーブメント生まれる瞬間でとにかく足並みを揃えさせるが難しかった時代
divで1点1点打つCanvasのポリフィルとか作った記憶がある
それでたしか100ｘ100くらいの表示させるとガラケーで１フレーム数分とかかかってた
imodeのコンテンツ保護を無効にする手順とか、ブラウザをクラッシュさせるJSとか
沢山発掘して今思うと一番Webを楽しんでたときだな
__proto__廻りのバグやそれを元にした脆弱性とかも普通に俺でもホイホイ見つけられた時代 そのうち半分くらいは報告したが
今のように報奨金制度とか全く流行ってなかったので
特にお礼も言われずに終わってたのが今振り返ると悔しい >>899
Firefoxは背景色表示はできてたが
あるバージョンから突然できなくなってしまった と思ったらこのスレ見たのかまたできるようになってて草
コード何一つ変えてないのに お前の思考レベルが草だろ
Firefoxがいつ更新されたと思ってんだ
糞馬鹿か 47 名前：仕様書無しさん[] 投稿日：2018/12/05(水) 18:33:46.31
https://w3techs.com/technologies/overview/javascript_library/all
> w3techsによると2017年1月の時点で71.9%のサイトがJavaScriptのライブラリとして
> jQueryを使用していることが判明し、それ以降もシェアの増加が続いていたが、
> 2018年4月〜2018年10月の約半年間で変化が見られず、ようやく73.3%〜73.4%で
> 増加が停止したようである。
73.5%に増加してるな。まだ微増してるってことか？
48 名前：仕様書無しさん[] 投稿日：2018/12/06(木) 07:20:27.93
jquery最強じゃないかwww
react 厨さん息してますかー？
49 自分：仕様書無しさん[sage] 投稿日：2018/12/26(水) 21:45:04.58
https://w3techs.com/technologies/overview/javascript_library/all
> w3techsによると2017年1月の時点で71.9%のサイトがJavaScriptのライブラリとして
> jQueryを使用していることが判明し、それ以降もシェアの増加が続いていたが、
> 2018年4月〜2018年10月の約半年間で変化が見られず、ようやく73.3%〜73.4%で
> 増加が停止したようである。
> 73.5%に増加してるな。まだ微増してるってことか？
あぁ、もうだめだ。 73.6%にまた増加してる。微増し続けてた。 増えているのはアフィゴミどもとかが量産してるwordpressが増えているから
これを開発者がjQuery使ってるとか勘違いするバカが勝ち誇ってるだけ その可能性はあるよね。WordPress使ってるところが32.8%、何も使ってないのが45.1%だから
https://w3techs.com/technologies/history_overview/content_management/all/y
仮にWordPressを使ってるサイトをJavaScriptを使ってないとみなせば
jQueryのシェア 73.6% は 40.8% 相当と考えられるかもしれないよね！
それでもJavaScriptライブラリを使ってないサイト24.3%よりはるかに多いけどね！
そんなことよりReactのシェアが0.5%から0.2%に減ったのが問題なんじゃぁ >>907
wordpress以外にもjQuery使ってるかもわからんゴミサイトがたくさんあるからな
お前はゴミをかき集めて勝ち誇ってるゴミ信奉者
そんで>>904の分析頼む でもそれいったら、React使ってるゴミではないサイトは
手足の指の数程度だろ・・・ 分析も何も、このアンケートに記録した人は
普段どんなものを作ってるんですか？でしか無いと思うけど？
どうせウェブサイトではなくてウェブアプリ開発者用のアンケートで偏ってるんでしょ？
切り取ったデータでわからないけど、せめて誰を対象としたアンケートなのかいってくれないとね 世界的にはjQueryはバカ御用達ライブラリという認識
もはやバカか無能しか使わないんだよ そう思ってないとやってられないんだよ
冷静に考えるとメリット無いんだが
ほらみんなやってるしすごいって言ってるし 質問です
自作のページ【A】で、何かしらのイベント（例えば'#a'をクリック）が起こるたびに
バックグラウンドで開いた他者製のページ【B】で、何かしらのイベント（例えば'#bをクリック'）を起こしたいと思っています。
自分で考えつく方法としては例えば、Chrome拡張機能などで他者製のページ【B】に対し
「このページが開かれるたびに'#b'をクリック」
というユーザースクリプトを設定しておき
自作のページ【A】で'#a'をクリックするたびに【B】を開く⇢すぐ閉じる
くらいしか思いつきませんが
開いたり閉じたりしない、もう少しスマートな方法ってないでしょうか？ >>916 追記です
「このページを開いたとき」でなく
$(window).on('focus')
としておき、タブを切り替えるだけでいけますかね…？
しかしページを新たに開くのでなく、元々開いているタブにフォーカスを切り替えることなんてできるんでしょうか >>917
なんて言えばいいのかちょっと難しいですが
業務上ちょいちょいクリックしたいボタンがあって
（悪いことではないです その他者製のページというのも半ば身内製と言いますか…
自由に変更要望を出せるものではないんですが）
わざわざ画面を行き来してボタンを探す時間の節約…
という面もありますが、うっかり忘れを防止したいというのもあります
（2つのページをセットで作業してるものの、基本的にAのページばかり開いててBの作業をやり忘れることがよくあり
忘れてて後からになると業務に遅れが生じてしまうので…） 【Ruby】window_handles・・・複数のウインドウハンドルを取得する
http://www.seleniumqref.com/api/ruby/window_get/Ruby_window_handles.html
Selenium WebDriver の、
driver.switch_to.window(ウィンドウ・ハンドル) Ruby で、Selenium WebDriver なら、
driver.navigate.to url_0 # url_0 を開く
driver.execute_script( "window.open()" ) # 新しいタブを開く
driver.switch_to.window( driver.window_handles.last ) # 新しいタブへ移動する
driver.navigate.to url_1 # url_1 を開く
all_handles = driver.window_handles
driver.switch_to.window( all_handles[ 0 ] ) # url_0 へ移動する その用途でSeleniumを使うのは時間の無駄だって言っておく そしてseleniumはJava製。いろんな言語のドライバが出ているがrubyのドライバはメンテナンスが悪い。るび〜すと（笑）が飽きっぽく、「る、るびぃ〜でもできるしっ」と言いたいがためだけの実験作だからだｗ $ gem list selenium
selenium-webdriver (3.141.0)
Ruby のは、141 まで進んでいる！ >>917
web上の事務作業を楽にするって事だろう
>>916
基本的には難しい
もしjsで別タブを触れるとすると、サイト開いた瞬間に全タブの情報を抜き取るってアホみたいな事が可能になる
＞自作のページ【A】で'#a'をクリックするたびに【B】を開く⇢すぐ閉じる
＞くらいしか思いつきませんが
＞開いたり閉じたりしない、もう少しスマートな方法ってないでしょうか？
これが通るならコレでいいと思う
>>920はアホみたいな方法なので止めておいた方が良い そりゃ、JavaScript は、そのページ内・DOM を操作するものだろ
一方、Selenium Webdriver は、ブラウザを操作するもの。
そのブラウザで開いている、すべてのページを、人間がするように操作できる
役割が異なる まあchrome限定でいいならpupetteerで両方できるんですけどね 質問させてください。
これのaryC選択を、aryAとaryBの両方を参照するようにしたいのですがどうしたら良いでしょうか？よろしくお願い致します。
↓
var aryA=["動物","植物"];
var aryB=[];
aryB["動物"]=["哺乳類","両生類"];
aryB["植物"]=["種子植物","その他"];
var aryC=[];
aryC["哺乳類"]=["ヒト科","サル科","ネコ科"]
aryC["両生類"]=["カエル科","サンショウウオ科"]
aryC["種子植物"]=["被子植物","裸子植物"]
aryC["その他"]=["シダ植物","細菌類"]
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1222942487 var a=["X","Y"];
var b=[];
b[ a[0] ]=["A","B"];
b[ a[1] ]=["C","D"];
// b => [ X: [ 'A', 'B' ], Y: [ 'C', 'D' ] ]
var c=[];
c[ b["X"][0] ]=["0","1"];
c[ b["Y"][1] ]=["2","3"];
// c => [ A: [ '0', '1' ], D: [ '2', '3' ] ] >929
修正。これを
c[ b["X"][0] ]=["0","1"];
c[ b["Y"][1] ]=["2","3"];
これに変えても、同じ
c[ b[ a[0] ][0] ]=["0","1"];
c[ b[ a[1] ][1] ]=["2","3"]; Firefoxってwidth、height操作のアニメーションやslideDownの挙動がすごくもっさりしませんか？ とあるサイトに対して、Chrome用のユーザースクリプトを作っています。
そのサイトでは、内部で一気にまとめて処理すればいいところを
わざわざ人間が#a #b #c #dという4つのボタンを順番に押さなければなりません。
これを何らかの1動作（例えば右クリック）だけで済むようにしたいのですが
ただ単に
$('body').on('contextmenu', () => {
$('#a').click();
$('#b').click();
$('#c').click();
$('#d').click();
return false;
});
などとしただけでは、#aの処理が終わる前に#bがクリックされてしまいうまくいきません。
setIntervalを使う以外にどんな選択肢があるでしょうか？
$.when().done()とかだと「クリックをしたことによって起こったイベント」までは待ってくれないですかね？ 「起こったイベント」という言い方だとなんか変だったかもしれませんね（クリックそのものがイベントか） >>932
a,b,c,dの処理はどう定義されているのかを調べてから質問してくれ 完了した際にドム内容が変更されるなら
DOMSubtreeModified propertychange
で検知すればいいと思う $.when().done() などがネストする場合は、使えるなら、async/await などが良い
>#aの処理が終わる前に、#bがクリックされてしまいうまくいきません
単に、処理A・B を続けて書いているだけなのに、実行される順番が変わるのか？
そんな事があるのか？ ああ、ABCD の順番でクリックされるけど、
Aの処理に、時間が掛かっている間に、
BCDの処理の方が、先に終わってしまうという事か
それは、非同期処理の順番を指定するしかない 要素の中心を起点に拡大・縮小させながら対象をshow,hideさせることはできますか >>936
#a,b,c,dが非同期処理なら、あり得る >>938
要素による。inlineとかだと出来ないので、一時的にdisplayを変更したりwrapperを設定する必要がある
あと、文字のサイズも変わらないので何か変になると思う ・canvasを変更
・ページ遷移
この時、canvasで変更された内容をそのまま持ち越すということは可能でしょうか？
ajaxでcanvas意外を変更するか、画像で一旦どこかに保存するしかないでしょうか >>940
アニメーションはCSSでやったほうが良さそうですね
show→アニメーションはできたのですが、アニメーション→hideがうまくいかず… >>941
data uriにして持ち越すか
描画するデータを持ち越して再描画するかかな >>943
あーなるほど、別にdisplay:none;にすることに拘らなくてもいいですね
transform:scaleでギリギリまで縮小して最後にwidth、height0にするようなkeyflames書いてみます >>938
foreignObjectを使ってCanvasに描画してやるのがオススメ >>946
ふつうにtransform: scale()じゃだめなのか 遅くなりましたが>>932です
>>934
デベロッパーツールで調べてみるとどういうわけか、
#a〜#dを押すことによって実行される関数a()〜d()自体は単に<head>内にa.js〜d.jsを追加するというだけのものでした
a.js〜d.jsの中身はいずれもわずか20行ほどで、for内でreplaceを繰り返した結果を<textarea>に反映させるというものです
（何故こうなってるのかはちょっとわかりませんが… なにか意味あるんでしょうか）
使うのが今だけなら、いっそこれらの中身を全部コピペしてユーザースクリプトにまとめてもいいんでしょうけど
a.js〜d.jsの中身（replaceすべき文字列）が将来的にいつの間にか書き換わってることもあるでしょうからそれは避けたいなと…
>>935
DOMSubtreeModified propertychange！
そんな凄いものがあったんですね…！
これは今後色々捗りそうです
今回は<textarea>の中身がJSで勝手に書き換わるのはどうもonchangeでは検知できないようで困っていたのですが
先述のように<head>内に<script>を追加するのを検知すればいけるかもしれません
>>936-937
つまりこういうケースではasync/awaitのみの1択…という感じですかね
async/awaitなら全部待ってくれるんですね > つまりこういうケースではasync/awaitのみの1択…という感じですかね
ぜんぜん違う。というか関係ない
絶対に使わないというわけではないが、問題解決のための手段ではない
例えば、3人交代で仕事する時、相手に起きた出来事を引き継ぎするだろ？
async/awaitはその引き継ぎ作業に相当する。
引き継ぎは行うことだが仕事内容ではない > 今回は<textarea>の中身がJSで勝手に書き換わるのはどうもonchangeでは検知できないようで困っていたのですが
使えないんじゃね？ DOMツリーが変わるわけじゃないんだから >>949
では他にはどんな引き継ぎ方があるでしょうか？
（ユーザースクリプトからだと、関数a()を直接呼び出すことはできませんでした）
>>950
<head>への<script>の追加はDOMツリーの変更とは見なされず、DOMSubtreeModified propertychangeでは検知できない…ということでしょうか レス数が950を超えています。1000を超えると書き込みができなくなります。
