JavaScript の質問用スレッド vol.125

■ このスレッドは過去ログ倉庫に格納されています
2022/08/07(日) 15:57:40.26ID:TS5TGpUB0
!extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950>>2の「次スレの立て方」を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
  (ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
  具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
  わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
  ※必ず「問題の事象が再現されること」を確認してください。
   必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

■前スレ
JavaScript の質問用スレッド vol.124
https://mevius.5ch.net/test/read.cgi/tech/1636525464/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured
2022/10/20(木) 05:56:13.16ID:BavO7XJlH
uBlockで要素取得した時の名前が###contentsです
これをTampermonkeyのJSで要素getするにはどうしたらいいでしょうか?
getElementById、getElementsByTagName、getElementsByClassName、querySelectorAll等ではだめでした
2022/10/20(木) 12:03:03.14ID:qg4xQu9m0
>>107
条件の中にあえて代入を入れるケースは無くはない。

if (result = func()) ...

みたいな感じとか。
これは比較してるんじゃなくこういうこと。

result = func();
if (result) ...

比較と組み合わせて

if ((result = func()) == 100) ...

みたいな書き方もある。
メリットは単に短く書けるということもあるし、別の言語も含めれば

while ((line = fgets(fp)) != EOF) ...

みたいな、代入と比較が一緒じゃないと書き方的に面倒になる部分に使う。
2022/10/20(木) 12:59:50.47ID:QXtRAkax0
>>108
getElementById('contents') or querySelector('#contents')
2022/10/20(木) 13:20:03.60ID:C0rWwrYjH
>>110
なるほど、#つけたらいけました
ありがとうございました
2022/10/20(木) 15:12:09.85ID:MJUQgOR60
>>106
0だけがfalsyなわけではないはず
https://262.ecma-international.org/13.0/#sec-toboolean

>>109
代入と組み合わせることですっきり書ける場合があるよな
whileは割と使ってる
2022/10/20(木) 21:55:34.73ID:1vPPjI2Y0
whileって原始的かつ結構直感的だから使いやすいよね
114デフォルトの名無しさん (ワッチョイ 3d10-w3aL [180.12.82.129])
垢版 |
2022/10/23(日) 10:06:21.98ID:6Nh0kUN40
<style id="test">
@media screen and (min-width:751px){
#aaa{
width:700px;

}
}

@media screen and (max-width:750px){
#aaa{
width:100%;
}
}
</style>

<スクリプト>
let sheet = document.getElementById("test").sheet;
let st = sheet.cssRules[0].selectorText;
alert(st);
</スクリプト>

このようなmedia screen付きのcssのselectorTextを取得したいんだけど
このようにやってもundefinedになってしまいます。どうすれば取得できますか?
media screenがなければちゃんとselectorTextは#aaaと取得できるんだけど
2022/10/23(日) 11:43:18.26ID:hW6qdPXA0
console.dirでsheetの中身を覗いて探せば見つかるかと
2022/10/23(日) 16:29:44.52ID:l4Ll+vUb0
iPhone6などの古い環境のSafariで、ES6以降の各ES(ES2022等)のどこまでサポートしているか、というのはどのように確認すればよいでしょうか?
iOSは12で、UAではSafari Webkit 604.1 となっています。
ESも毎年更新されてPCや現行スマホなら問題なく表示できますが、サポートの終わった古い端末でも表示させるにはどの機能がNGかを確認したいのですが・・・
iOSバージョンやブラウザバージョンを指定して、それがどこまでサポートしているかが分かるサイトや、実際の端末を使ってどの機能がNGかテストするとか、PC上でデバッグ可能(エラー表示)なエミュレータなどあれば教えていただきたいです。
2022/10/23(日) 16:34:31.24ID:sfEqSuvv0
MacBookを買いましょう
2022/10/23(日) 16:44:23.51ID:YzYXhWAT0
Can I use のサイトとか、npm のbrowserslist とか?
2022/10/23(日) 16:55:32.04ID:l4Ll+vUb0
>>118
ありがとうございます。
Can I useのサイトで各ESxxxを検索して概ねサポートされる範囲が分かりました。
Safari 12だとES2020の一部からサポートされない機能があるので、そこら辺が境界ぽいことが分かりました。
120デフォルトの名無しさん (ワッチョイ 3d10-Vrxx [180.12.82.129])
垢版 |
2022/10/23(日) 17:46:05.51ID:6Nh0kUN40
>>115
cssRules[0].cssRules[0].seletctorTextとすることでできました
ありがとうございます
2022/10/24(月) 22:47:10.94ID:VafCOtMO0
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、
JavaScriptの難易度は12ぐらいあると思います。
このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。
初級者1のための物ですので、わかってやっている人に好きにやってください。

このコーディングガイドは絶対に従わなければならないものではありません。
私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。

禁止編
JavaScriptには安易に使用してはいけない機能があります。
下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。
2022/10/24(月) 23:16:49.94ID:Sn3QmQ+W0
>>121
中途半端に@raccyの記事をコピペした意図は何?
https://qiita.com/raccy/items/bf590d3c10c3f1a2846b
2022/10/25(火) 01:00:55.86ID:IMqCQD810
ラッシーこそだよ。欄版は。
2022/10/25(火) 01:02:07.20ID:IMqCQD810
マンタリーな、シェシェ。
ぐーむ菜素図。i-ku
2022/10/25(火) 01:02:49.43ID:IMqCQD810
天ら万重も近し。
2022/10/25(火) 02:28:40.06ID:iqiTxlhy0
>>123-125
日本語でOK
2022/10/25(火) 14:16:06.20ID:S5n6e8jb0
ファイルを読み込んでArrayBufferから配列へbyteデータにしたいです。
<input type="file" id="file">
<script>
let fileInput = document.getElementById('file');
fileInput.onchange = () => {
var fileReader = new FileReader();
fileReader.onload = function(e) {
var ary = new Uint8Array(fileReader.result);
}
};
これでaryに数値が代入されているんですが
選んだファイルが約100,000kb程のサイズなんですが
処理後のaryのサイズが約1600,000kbとなってしまいます。
なぜ大きくなってしまうのでしょうか?
同じサイズになるようにするにはどこを訂正するといいですか?
2022/10/25(火) 15:28:48.49ID:S5n6e8jb0
すいません勘違いだったようです。
2022/10/25(火) 17:11:46.89ID:jIOTtTPX0
初心者です、関数を配列オブジェクトに入れて
findでオブジェクトを取得して、そのオブジェクトの中の関数を呼び出すといったことがしたいです
初心者むけのネット記事なんかを見て組んだのですが、エラーが出てしましいます。
今のソースはこんな状態なんですが、間違っているところはありますでしょうか?

struct = [
 {hoge:huga, func:functionA},
 {hoge:hage, func:functionB}
]

callfunction(check){

 var gets = struct.find((v) => v.hoge === check);
 gets.run()←ここでAとBを使い分けて呼びたい
};

functionA = {}

functioA.run = function(){
~動かしたい処理A~
}

functionB = {}

functioB.run = function(){
~動かしたい処理B~
}
2022/10/25(火) 17:13:23.18ID:jIOTtTPX0
すみません少し修正です

struct = [
 {hoge:huga, func:functionA},
 {hoge:hage, func:functionB}
]

callfunction(check){

 var gets = struct.find((v) => v.hoge === check).func;
 gets.run()←ここでAとBを使い分けて呼びたい
};

functionA = {}

functionA.run = function(){
~動かしたい処理A~
}

functionB = {}

functionB.run = function(){
~動かしたい処理B~
}
2022/10/25(火) 17:47:25.32ID:dHKYynBEd
あまり複雑なことはせずに↓みたいなのではダメだろうか
https://jsfiddle.net/6x7yusjL/

これではダメで、どうしても>>130のエラーを解消したいなら出ているエラーの内容ぐらいは書くようにしよう
132デフォルトの名無しさん (ワッチョイ 2bdb-72Rk [217.178.96.73])
垢版 |
2022/10/25(火) 17:58:30.53ID:IMqCQD810
>>121
14位.JavaScript

難易度:★★☆☆☆

今回ご紹介するプログラミング言語の中で最も難易度が低いのがJavaScriptです。

初学者がプログラミングの学習を始めるのに適した言語の一つ。
Webサイトなどで動きのある見た目を実現する為に利用されます。

JavaScriptから派生したフレームワークも数多く、
そちらのフレームワークを学習する場合には難易度が高くなります。
ただ、JavaScriptをそのまま利用して学習を進めるであれば、
他の言語と比べて開発環境の構築が不要であることや関連書籍が数多くでていることから、
難易度は低い言語といえるでしょう。
2022/10/25(火) 18:17:09.25ID:jFHnOV8wa
>>131
ありがとうございます。
まず進捗させないとけないんでそのやり方でやってみて、後々何がエラーの原因なのかは自決できるように調べてみます。
2022/10/25(火) 23:20:22.24ID:RDzJGkEc0
JavaScript(JS)は、Ruby の数倍難しい

初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、2017

例えば上の本は、サイの表紙のサイ本と呼ばれるけど、
これだけ勉強しても、文法しか学べない

改訂2版 Ruby逆引きハンドブック、2018

一方、サイ本と比べて、上の本は、多くの主要モジュールの使い方まで説明している。
大体のコーディングパターンまで学べる。
つまり中級者向けなのは、文法のページが少ないから

JSだと、ES3, ES5, ES6 の20年に及ぶ、膨大な文法の変遷を追っていかなければならない。
ES2015(ES6)から、ようやくクラスも出来て、Rubyっぽくなってきた

ちょっとした比較でも、あいまい比較演算子== は使ってはならない。
厳密比較演算子=== だけを使うとか、初心者がはまる罠が多い

学ぶ順序としては、Ruby → JS を勧める
2022/10/25(火) 23:31:33.41ID:RDzJGkEc0
>>131
では、callback 関数が呼ばれる前に、どちらの処理が呼ばれるか、既に分かっている状態でしょ。
直接引数に、呼ばれる処理を入れている

callfunction('huga');
callfunction('hage');

一方、>>130
では、callback関数が呼ばれる前には、どちらの処理が呼ばれるか、まだ分からない状態。
callback関数の中で初めて、どちらの処理が呼ばれるかが決まる
2022/10/26(水) 00:55:25.26ID:WkGW4dkw0
コンソールからは実行出来るのに、
拡張機能からだと無視されるのは何?
2022/10/26(水) 19:58:11.00ID:radnZEOF0
>>132
14位
やっぱ簡単なんだな。
2022/10/28(金) 14:20:33.37ID:dQ+2i/bt0
乱数の生成について質問です。
日付をシードとした乱数を生成したいのですがどうも偏ります。
シードの採用の仕方にルールなどがあるのでしょうか?
xorshiftのものを2個試しましたが
2ことも偏っていました。

https://jsfiddle.net/4dz70wxp/3/
2022/10/28(金) 17:22:23.79ID:mktFZgumd
ちょっとだけ違う初期値に対して乱数がほしいという用途は想定外だろう
欲しいものはMurmurHash3みたいなハッシュ関数ではないか?
2022/10/28(金) 18:09:17.06ID:HM5QgWcQd
一発目のnext()の値を捨てれば良さそうな気も
https://jsfiddle.net/ny0cpm5v/
2022/10/28(金) 18:36:54.83ID:HM5QgWcQd
もう少しいじってみたけどどうやらシードの桁数不足が問題なのかな
new Xorshift32(seed * 1000000)
とかにするだけで最初の値にもだいぶ幅が出る

いやいや偏りってそういうことじゃなくてって話ならごめんだけど
2022/10/28(金) 19:03:49.78ID:dQ+2i/bt0
>>139
不勉強でよくわかってないですが
やりたいのは後で再現できる単純にランダムな遅延時間がほしいだけです。
>>140
delayMaxを100にしてみましたら3回目ぐらいから取れそうと感じました。
シードが小さすぎるということは
一般的には
シードを与えるなら
乱数関数が受けられるシードの最大数/関数で生成されるシードの最大数をかけて
でシードの範囲を広げたほうがいいということなのでしょうか。
それとも単純に今回はシードが小さすぎて特殊事例であまり気にする必要はないと言う感じでしょうか。

お二人ともありがとうございます。
2022/10/28(金) 20:24:11.90ID:HM5QgWcQd
next()が与えられた値にビット演算をあれこれやって次の値を出してるから
シードが2桁整数ではほとんどのビットがゼロなために
最初の演算結果が狭い範囲に収まってしまってるんでないかと
2022/10/28(金) 21:20:56.67ID:dQ+2i/bt0
>>143
ありがとうございます
https://jsfiddle.net/4dz70wxp/5/
42億あるうちの下一桁をいじるだけではだめみたいですね。
一日かわればseedも大きく変わるようにして
念の為、3回目あたりをとってみます。
ありがとうございました。
2022/10/28(金) 22:43:22.03ID:HM5QgWcQd
https://jsfiddle.net/f9h4zu1x/
少し間違ってた
桁数が少ないのが問題じゃなくて、ビットの可変幅が狭いのが問題
だから桁数増やしてもシードの増分が1なら結局同じ
日付を上の桁に持っていけば1回目も改善する
2022/11/02(水) 15:24:18.98ID:8PfyXsoj0
ブラウザ上での音声認識と録音について質問です。

現在、マイクから音声認識を行い、簡単な対話を行うWebアプリを作成しようとしています。
Web Speech APIのSpeechRecognitionを使用して音声認識には成功しましたが、これに加えて録音も同時に行いたいです。
SpeechRecognitionは喋っている内容を取っているので、そこから音声ファイルを作成できないかとやったのですが、目的の資料を見つけることができませんでした。

そのため、SpeechRecognitionと並行してmediaDevices.getUserMediaを使い録音する形で実装しました。
PCでは成功したのですが、スマホ(Android、iOS共に)だとmediaDevices.getUserMediaでストリームを使用とした時点で音声がすべてそちらに取られてしまい、音声認識が出来なくなってしまいました。

今度は録音した音声データをGCPのSpeech-to-Textの音声認識に回すかたちで実装してみましたが、即座に認識結果が得られず、対話のテンポが悪くなるため、微妙な感じになってしまいました。

音声認識と録音を両立する良い方法はないでしょうか?
2022/11/02(水) 15:30:07.55ID:yKYFejXH0
他人が書いたJavaScriptのコードは読みにくいですよね?
2022/11/02(水) 15:34:06.32ID:Wk8IFz/p0
>>147
自分が書いたコードすら後から見るとよく分からないなんてことはザラ
2022/11/02(水) 15:53:32.48ID:3LaOl4E/0
function double(number){
const result=number*2;
return result;
};

const a=double(10);
console.log(a);

でコンソールに20と表示されますが、return resultの所のイメージがつかめません

function double(number){
const result=number*2;
};

console.log(result);

もっと簡単にこれでは20と表示されないんでしょうか?
2022/11/02(水) 16:00:00.37ID:3LaOl4E/0
すみません
わかりました
double(number)に戻り値number*2を返してるんですね
だからdouble(10)で20になると
2022/11/02(水) 18:16:59.98ID:O63UpHJfr
>>148
そいつにかまってはいけない
2022/11/02(水) 21:50:32.06ID:3LaOl4E/0
JavaScriptのパズルをやってたんですけど、このコードだけで意味がわかりますか?
https://i.imgur.com/A4xj7Qh.jpg

最初の定義とか色々省かれていませんか?
初心者だからはっきりわからないのですが…
2022/11/02(水) 22:07:02.98ID:zmf8vxSNM
これぐらいなら簡単
変数名と関数名がちゃんと付けられてるからそこから読んでいけば普通に読める
2022/11/02(水) 22:12:42.94ID:3LaOl4E/0
>>153
変数のlistとかどこにも定義されて無いんですけど…
console.log(list)とか突然書かれても、初心者にはわかりにくい
どこから出てきたのかと…
2022/11/02(水) 22:46:00.31ID:f9FvTICb0
>>152
任意の数値リストを突っ込むと最大値出してくれるっていうコードだろこれ
2022/11/02(水) 23:13:35.51ID:J736PzjWM
問題の方にあるのかも知らんし
ここで聞かれても分かんね
2022/11/02(水) 23:36:43.64ID:3LaOl4E/0
問題はこんな感じです
https://i.imgur.com/lImN0zM.jpg
(画像の下の方が切れてますが、>>152の画像と同じものが入っているだけです)

あまり親切じゃないから初心者には向いて無いのかな?
2022/11/02(水) 23:40:18.85ID:t/iark2f0
全部負の数値だと使えない
2022/11/03(木) 11:43:01.93ID:39/cO+p70
このコードは十分初心者向けに書かれていると思うけどねぇ
ただmax=0にしているから、基本は0より大きな数の配列の中から最大値を調べる処理という事に
2022/11/03(木) 12:47:18.10ID:EP9jPLDR0
>>159
この学習アプリやってた

Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい
https://forest.watch.impress.co.jp/docs/serial/progedu/1404361.html
2022/11/03(木) 15:53:23.61ID:78vcP9/m0
次のステップなどで対応するならいいけどね
max の初期値を配列の先頭から取れば済むだけだが
2022/11/03(木) 20:27:36.79ID:EP9jPLDR0
ようやくわかりました
2つめの関数の中で前に定義した1つめの関数を実行してるんですね
関数は定義&実行で1ペアと考えないといけない
次に進みます
2022/11/04(金) 08:09:59.45ID:RzANRCFJ0
#を付ける プライベートクラスフィールドが分かりにくい。
解説しているサイトも少ない。
2022/11/07(月) 15:24:45.79ID:zC6hz6+Y0
Adobe Illustratorのスクリプトを書くのにHTMLの知識いりますか?
JavaScriptの入門書を読んでたんですけど、前半のJavaScriptの文法の所まで読み終わりました
後半はHTMLとJavaScriptの組み込み方みたいになってるんだけど、ここ読む必要あるのかな?
もちろん知ってた方がためになるんだろうけど、次のAdobe JavaScriptの本へ行こうか迷っています…
2022/11/07(月) 15:29:11.27ID:zC6hz6+Y0
DTP(印刷)でillustratorを使ってるのでWebは扱っていません
2022/11/07(月) 15:34:00.02ID:FsgEaHF8r
AdobeのjavascriptというかESバージョンめちゃくちゃ古くて記述するの苦労したが最近はどうなんだ
2022/11/07(月) 15:35:27.96ID:zC6hz6+Y0
自己レスですが必要無いそうです
ES2015以降も必要無いそうです
constとかletが使えないので全部varになってる
2022/11/07(月) 16:15:41.06ID:5T/PrU7d0
>>164
CEPでも使わない限りはHTMLの知識は不要。
2022/11/07(月) 16:33:24.89ID:zC6hz6+Y0
>>168
ありがとうございます。
2022/11/11(金) 22:39:38.06ID:6PYY3JKr0
pg9 = win1.pnl.add('group')
pg9.orientation = "row"
CAN = pg9.add("button",[0,0,100,30],"cancel")
OK = pg9.add("button",[0,0,100,30],"OK")
CAN.onClick = function(){win1.close()}
OK.onClick = function(){
win1.close()
dofn()
}
win1.show()
}

// テキストを元のサイズに戻すための計算
var txtresize=100/bai*100;

// テキストフレームだけを選択する
activeDocument.selection = null; // 全ての選択を解除する
var txtObj = activeDocument.textFrames;
for (var i=0; i<txtObj.length; i++){ // テキストフレーム数だけ繰り返す
try {
txtObj[i].selected = true; // 選択する
}catch(e){}
}

//選択したテキストを"sel"とする
var sel = app.activeDocument.selection;

//選択したテキストの数で繰り返す
for (i=0; i<sel.length; i++)
{
//選択したテキストの幅と高さを元の大きさに戻す
sel[i].resize(txtresize,txtresize);
}

// オブジェクトの選択を解除する
for (var i=0; i<sel.length; i++){
try{
sel[i].selected = false;
}catch(e){}
}

プログラムの最初の方は省略したのですが、
CAN.onClick = function(){win1.close()}の所で、キャンセルがクリックされた時にそれ以降のプログラムが実行されないようにしたいのですが、どう書き換えればいいでしょうか? return;ではそれ以降が実行されてしまいます
2022/11/11(金) 22:42:38.98ID:6PYY3JKr0
CAN.onClick = function(){win1.close();exit();}
みたいなことをやりたいのですが、exit()はAdobeScriptにはありません…
2022/11/12(土) 05:24:15.41ID:/in1tyv80
>>170-171
質問の意味がわからない

CAN.onClick = function(){win1.close()}

で処理は終了している
2022/11/12(土) 13:17:11.95ID:xCg5uX6U0
コールバック関数について、伺いたいのですが。
コールバック関数は、引数に渡される関数という理解でいますが。

これは関数であって、オブジェクトメソッドを渡すこともできますでしょうか。
例えば、
object.addEventlistener()
などの、メソッドも渡すことができますでしょうか?
2022/11/13(日) 08:09:24.18ID:YDVUHmoCr
object.addEventlistener なら関数だから渡せるけど
object.addEventlistener() は渡せないな
2022/11/13(日) 09:42:00.89ID:wFqjoTWK0
>>173
object.addEventlistenerで渡せるが、実行時のthis値が変わるので、期待通りに動作しない
bindを使うか、「コールバック関数を渡す関数」にthis値束縛機能があればそれを使う必要がある
2022/11/13(日) 15:10:49.67ID:xoKJX++V0
ありがとうございます。
Object.AddEventlistenerでも、コールバック関数になりうるということですね。
ただし、期待していることはできない。

関数(ユーザー定義)をコールバック関数にすることはイメージつくのですが。
オブジェクトメソッドをコールバック関数にするイメージがつきません。
何か、例文があれば教えていただけますでしょうか?
177176 (ワッチョイ 3697-FFna [121.94.16.107])
垢版 |
2022/11/13(日) 15:14:57.91ID:xoKJX++V0
あ。addEventlistener以外で構いません。
2022/11/13(日) 15:38:14.40ID:wFqjoTWK0
>>176-177
this値の変え方まで書いているのに、なぜにイメージ?
コールバック関数を使ったコードを書いて試せばすぐにわかる問題
2022/11/13(日) 15:46:58.08ID:wFqjoTWK0
Function.prototype.bind
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
2022/11/13(日) 17:36:35.00ID:BIywqmt20
AdobeScriptなのですが、
https://i.imgur.com/Ycwp6Nj.jpg
上の画像の「四角のパスの四隅をハサミツールで切って、塗りを線にする」まではスクリプトで出来るのですが、「短辺を特定する」ということはスクリプトで出来るのでしょうか?
一般的なJavaScriptの話でもいいのですが、出来るとか無理そうとか…
2022/11/13(日) 19:38:06.31ID:0s117XaL0
質問です、どなたか教えて下さい、どうか宜しくお願いいたします

インターネットラジオ JCBA FMはな再生ページ
https://www.jcbasimul.com/fmhana

上記サイトを開くとCookie利用承諾の画面が出てきます。この利用承諾画面は

document.getElementsByClassName("cookieBanner__btn")[0].click()

とすることで自動的にOKボタンを押して閉じることができました。引き続き再生ボタンを押したいので

document.getElementsByClassName("MuiSvgIcon-root")[0].click()

としましたが、残念ながら自動的に再生ボタンを押すことができません。自動クリック自体が禁止
されているような雰囲気です。たぶんサイト側でクリック禁止にしているのだろうと思いますが
これを利用承諾画面と同じようにJacaScriptで自動クリックするする方法はないでしょうか?
182デフォルトの名無しさん (ワッチョイ d501-8IZr [60.111.190.247])
垢版 |
2022/11/13(日) 20:25:40.17ID:cqK0B72A0
ユーザー操作が起点じゃない場合は音声再生をブロックする、という制限がブラウザ側でかかってることがある
その場合はブラウザの設定で解除できるかもしれない
2022/11/13(日) 20:33:38.64ID:8b+kwr5c0
>>181
iframeの中かつshadowDOMの中なので一発で要素を取得できない
document.querySelector(".radioPlayer__iframe").contentDocument.querySelector("#player_ui").shadowRoot.querySelector("button").click();

jcba-playerカスタムエレメントはplay()メソッドが実装されてるようなので
document.querySelector(".radioPlayer__iframe").contentDocument.querySelector("#player_ui").play();
でもいける
2022/11/13(日) 20:47:17.41ID:Kw8DgDNz0
こうじゃないか
document.getElementById("player_ui").shadowRoot.querySelectorAll("button")[0].click()
または
document.getElementById("player_ui").play();
2022/11/13(日) 22:43:20.67ID:0s117XaL0
>>183
すばらしい!有り難うございます!そのどちらの方法でも再生ボタンがクリックできました!
何を勉強したらあなたのような達人になれるのでしょうか?本当に有り難うございました!

>>184
お答えくださり有り難うございます。ただ、残念ながらその方法はどちらもNGでした。
"player_ui" を "#player_ui" に変えても駄目なので、すみませんが>>183を使わせてもらいます。
2022/11/14(月) 15:59:19.18ID:dW/V591r0
if( ){ };の( )の中に「関数txtfn()が一度も実行されていなかったら」という条件を書きたいんですけど、どう書けばいいんでしょうか?
無理でしょうか?
2022/11/14(月) 16:42:32.41ID:dW/V591r0
すみません、これがコードです。

SEL = activeDocument.selection
LAY = activeDocument.activeLayer

for(s=0; s<SEL.length; s++) SELfn(SEL[s])

function SELfn(sx){
if(sx.typename != 'PathItem') return
if(sx.filled == false) return
c1 = sx.fillColor
if(c1 != "[GrayColor]"){
    val = c1
        txtfn();
}
}

function txtfn(){
alert(val+"です");
}
alert("グレースケールです");


本当は、関数txtfn()が一度も実行されなかった場合に最後に「グレースケールです」と表示したいのですが、
このコードのままだと毎回最後に「グレースケールです」と表示されてしまいます。
「グレースケールです」は1度だけの表示したいのです(表示する回数が多すぎることになるので)
2022/11/14(月) 17:23:26.59ID:Ofrc3j5I0
単にループ前にフラグをfalseにでもしておいて、一度でも実行すればtrueにすれば判断出来るのでは?
2022/11/14(月) 17:46:10.99ID:dW/V591r0
>>188
SEL = activeDocument.selection
LAY = activeDocument.activeLayer

var yk=0;

for(s=0; s<SEL.length; s++) SELfn(SEL[s])

function SELfn(sx){
if(sx.typename != 'PathItem') return
if(sx.filled == false) return
c1 = sx.fillColor

if(c1 != "[GrayColor]"){
val = c1
txtfn();
}
}

function txtfn(){
alert(val+"です");
yk=1;
}
if(yk!=1){
alert("グレースケールです");
}

これで出来ました。
ありがとうございます。
2022/11/14(月) 18:12:47.71ID:zxQDBIse0
すまん、敢えてここで聞かせて
Windows しか持っておらず、JavaScript の Safari での動作確認のため極力安い MacBook かなにかを買いたい。
中古でもなんでもいいんだけど、今時の Safari が動くやつって何を選べばいい?
Mac も iOS も Safari の系譜もよく分からず途方に暮れてる。
いわゆるブラウザのデベロッパーツールで動作確認したいので、多分 iPhone とかじゃだめなんだよね?
アドバイスおねがい
2022/11/14(月) 18:37:09.30ID:srKPlYrDd
safariのバージョンってiOSと連動だって話だったと思うから最新のiOSサポートしてる機種ならええんでないの?
Mac系のスレで理由話して最新のiOSが動く安いやつどれ?って聞くのが確実だろう
192デフォルトの名無しさん (ワッチョイ a94e-Uv+W [210.138.216.243])
垢版 |
2022/11/14(月) 20:44:37.96ID:pZNm0HpP0
動作確認のために実機買うなんて景気のいい話だなぁ羨ましい
俺ならBrowserStackとかLambdaTest使っちゃうけどね
2022/11/14(月) 21:12:34.76ID:SgEq73X20
iPhone持ってる人に実機テストしてもらっちゃうな
2022/11/14(月) 22:33:47.26ID:llxM2eVb0
>>192
景気なんてよくねーよだからケチりたいんだろ。
でも何そのおもしろそうなキーワードは。調べてくる

>>193
これまで作ったのをたまたま iPhone で見たら動いてないのがあってね。
元々 Safari とか眼中には無かったけどそんなに特殊なことやってるとも思ってなかったんで、動かないとか思ってなかった。
あんまり気分悪いんでちょっと調べておこうかと。

>>191
やっぱ最新OS じゃないとダメかということでそこを軸に探すと、フリマで 2万台くらいらしいってことは分かった。
あと iPad の Safari でもデベロッパーツールを動かせるらしいことが分かったので、そっちの線もありそう。
つか MacOS と iOS って違うのね…

なにはともあれ、取っ掛かりは掴んだ気がする。
ありがとう
195デフォルトの名無しさん (ワッチョイ 3697-FFna [121.94.16.107])
垢版 |
2022/11/14(月) 23:54:57.52ID:h4ns2H1B0
イベントオブジェクトを使わず、thisを使って、
そのイベントの発生元の要素を取得することは可能でしょうか?
2022/11/15(火) 06:06:01.39ID:zBqzsCj00
>>195
無理
2022/11/15(火) 08:04:13.30ID:mRl02hRT0
すみません、先日JavaScriptによるクリックについて質問した者です
情けないのですが、今度は別サイトの再生ボタンがどうしても押せず困っています

インターネットラジオFM++ FMはなび再生ページ
https://fmplapla.com/fmhanabi

ソース見るとiframeもshadowDOMも使っていないように見えるのに、再生ボタンを押せません

document.getElementsByClassName("player_start_button")[0].click()
document.getElementsByClassName("start_stop_button_button")[0].click()

上記2つとも駄目でした。どうすればJavaScriptで再生ボタンをクリックできるでしょうか?
どなたかもう一度だけ教えてください、宜しくお願いいたします
2022/11/15(火) 09:45:28.64ID:ott+UO1u0
該当する要素がない

start_btns = document.getElementsByClassName("player_start_button")
console.log( start_btns.length ) //=> 0

start_stop_btns = document.getElementsByClassName("start_stop_button_button")
console.log( start_stop_btns.length ) //=> 0
2022/11/15(火) 11:01:59.02ID:9SlnRoJw0
>>197
ブラウザの DevTools でイベントリスナーの click を見ると見つかる
2022/11/15(火) 11:16:18.44ID:9SlnRoJw0
>>199
chromeだと当該要素の「検証」をすると出てくる
2022/11/15(火) 19:29:43.82ID:T0qQfj8P0
>>197
対象のclassをよく見てみよう
2022/11/15(火) 20:10:55.73ID:mRl02hRT0
>>201
document.querySelectorAll("button")[0].click()で行けました
有り難うございました
2022/11/16(水) 00:23:35.29ID:q+7X+iJ00
こういう程の良い距離感のアドバイスを遅れる人間になりたいですな
2022/11/16(水) 01:03:52.10ID:yZvimkXe0
>>170ですが、やっぱりキャンセルボタンを押すと
CAN.onClick = function(){win1.close()}の所で終わらなくて、最後の行まで実行されるんですがどうすれば中断出来るんでしょうか?
キャンセルしてもテキストの大きさが変わって終わります
2022/11/16(水) 01:15:16.40ID:6ujCOi6jM
そもそもキャンセルボタン押す前にテキストサイズ変わってんじゃねえの
2022/11/16(水) 01:28:38.23ID:yZvimkXe0
>>205
「画像とテキストが一緒になってる図で、画像だけ拡大縮小してテキストサイズはそのままにする」というスクリプトなんですけど、キャンセルすると図の大きさはそのままでテキストだけ拡大縮小してしまうんですよ
これでは困るのでキャンセルの箇所でコードから抜け出したい
2022/11/16(水) 03:25:10.60ID:pSETlPcG0
CAN.onClick = function(){win1.close(); return; }
ではなく、

CAN.onClick = function(){win1.close()}
return;

上は、その無名関数から抜け出すだけで、
下は、全体の処理から抜け出す
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。

ニューススポーツなんでも実況