+ JavaScript の質問用スレッド vol.124 +

2021/11/10(水) 15:24:24.80

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

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

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2022/01/05(水) 10:08:51.69

>>206
どう致しまして。

2022/01/06(木) 12:37:03.20

質問１　element.addeventlistnerとdocument.addeventlistnerの違いは？
質問２　
function(elm){
elm.addeventlistner(
"click",
function(e){alert("クリック");}
);
}
のような関数がある場合document.addeventlistnerの場合はelementがないので個別に関数作らないとだめなのか？

2022/01/06(木) 12:51:53.90

外側・親に、イベントを付けて、親で、子のイベントをキャッチできる。
jQuery で書いた

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

// 外側・親に、イベントを付けて、親で、子のイベントをキャッチする

$( '#btn-wrap' ).on( 'click', function ( event ) {
console.log( $( event.target ).prop( 'value' ) )
} );

この板よりも、web制作管理板の方へ書き込んでください！
そちらの方が、本スレです

2022/01/06(木) 13:04:40.48

>>208
1. 対象要素が違うだけ。バブリングによって「あらゆる要素」のイベントをトラップしたい場合は後者を使うといい（一般的には普通は比較的近いコンテナ要素でトラップするもんだが...）
2. その関数なら共通でOK

>>209
本当に誘導したいなら、せめてリンクを貼りましょう

2022/01/06(木) 14:19:29.65

このスレで質問しても何の問題もありません
荒らしやアフィリエイト宣伝業者に騙されて誘導されないようにしてください

2022/01/06(木) 15:06:56.73

>>208
回答1
event.currentTargetが異なる

回答2
e.targetを確認すれば良い

2022/01/06(木) 15:09:56.94

>>209
Web制作板でも次スレが立たず、旧スレを再利用してる状態
本スレなど存在していない

本気で本スレに誘導したいなら、最新スレを探して次スレを立てて保守すべき
それぐらいの情熱がある人はもういないと思ってたが、あなたがそうしたいのなら止めはしない

**209** (ﾜｯﾁｮｲ 0f2c-4nvB [153.136.94.40]) · 2022/01/06(木) 16:09:40.84

この板のスレは元々、web制作管理板が荒らされた時に、緊急避難用に立てられたもの。
本スレは、向こうの方

この板は荒らしが多い

荒らしは短文で、必ず2回書き込む。
複数回書き込むことで、多くの人が書いているように見せる

それと、テンプレをしょっちゅう、自分が有利なように書き換える

Python のスレのテンプレとか、ひどい。
NGワードは何々とか、しょっちゅう書き換えている

まあ、ソースコードを書かない香具師は、
プログラマーじゃないから、相手にしない方がよい

2022/01/06(木) 21:02:16.03

window.onload = function(){
}
このfunctionって何の意味があるんですかね？

2022/01/06(木) 21:09:14.63

中の変数とかを外から見えなくしてるんじゃない？

2022/01/06(木) 21:28:50.56

>>215
変数 = function() { ... }
で関数式(無名関数)っていう形で定義できる

関数式についての説明はこの辺を参照
https://ja.javascript.info/function-expressions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

で、window.onload = function() { ... }
っていう風に実装すると、少し特殊な動きになって
HTMLを完全に読み込んだタイミングで、関数の中身を実行するっていう動きになる
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

(他言語だとあんまり見ない書き方だから混乱するかもしれんけど）

2022/01/06(木) 21:52:51.91

https://www.youtube.com/channel/UC9UsyidyKO-s6K8sgWKmE2w

2022/01/07(金) 07:23:20.82

>>217
変数に関数を入れられるんですよね。
処理を直には入れられないから、関数で包むとイメージなんでしょうかね。

2022/01/07(金) 13:51:45.20

<div class="content">

<h2>header2</h2>

<h2>header2-2</h2>

<h2>header2-3</h2>

<h2>header2-4</h2>

</div>

<script>

let content = document.getElementsByClassName("content");

let all_element = content.querySelectorAll("h2");

console.log(all_element);

</script>

gebcnで取得したターゲットにqueryselectorは使えないんでしょうか？
idで取得したものなら可能なんですけども。

2022/01/07(金) 14:27:21.79

>>220
contentはgetElementsでHTMLCollectionをとってるので
content[0]とかにすればでるんじゃない？

2022/01/07(金) 18:28:49.81

>>221
返り値が違うんですね。
要素だけを取ってくるもんだと思っていました。

ありがとうございます。

2022/01/07(金) 18:31:00.59

エレメントしかいらないのならid使ったほうが良いみたいですね

2022/01/07(金) 18:36:46.10

document.querySelectorAll(".content > h2");
でよくね？

2022/01/07(金) 20:54:20.38

こういった場合クラスを使うんでしょうか？
cssではidは出来るだけ使わないということになっているらしいですが

2022/01/07(金) 21:09:58.61

できるだけ使わないというか詳細度に関わる
1ページ一回というユニークルールもcss使い回しに不向き

2022/01/08(土) 05:37:14.84

classnameでやってみますです

2022/01/08(土) 05:41:40.78

>>224
そうやって書けるんすね
html collectionの構造がよくわからんくて

2022/01/08(土) 05:48:14.75

>>224
いや、これだめでしたね
nodelistは帰ってきますけど、h2はとれてないです

2022/01/08(土) 05:55:36.78

全てconstでOK

2022/01/08(土) 07:52:36.25

Android10 F-51A
Chrome 93.0.4577.62

ブラウザ上での画像についての質問です。
画像自体は恐らく読み込めているようなのですが、全く映らないか、映っても一瞬で消えてしまいます。
エラーメッセージは出ません。
ファイルマネージャーというアプリから起動すると、正常に動作します。

考えられる原因、解決案は、例えば何があるでしょうか。
絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。

2022/01/08(土) 09:00:28.06

>>229
最初の一個だけでいいなら
let all_element = document.querySelector(".content h2")

2022/01/08(土) 09:52:41.58

>>231
情報が少なすぎて詰めきれません。もう少し詳細な情報を提供できませんか？
（まず、JavaScriptはどのように使用していますか？）

2022/01/08(土) 10:15:27.19

>>233
スマホアプリの「QuickEdit」というテキストエディタで制作しています。

そういう意味じゃなかったらごめんなさい。

$Game_Image_Data = [];
$Game_Image_Data[0] = new Image(); $Game_Image_Data[0].src = "image/player.png";

これで「$Game_Image_Data[0].src」をアラートで出力すると、こうなります。

https://i.imgur.com/FzEkdyk.jpg

2022/01/08(土) 14:43:01.70

>>232
どうも。今回はindex使うことにしてみます。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:15:55.99

可能な限り絞り込み？　ました。

検証にご協力していただける方は、「imageフォルダに適当な「player.png」の画像を挿入して、実行してみてください。

ここまである程度余計な要素を取り除いたので、流石にこれならいけるんじゃないか？　と思ったのですが、自分の環境ではやはり駄目でした。

よろしくお願いいたします。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:19:01.00

<! html>
<html>
<head>
<meta ="utf-8"/>
<title>No_Name_Game</title>
</head>
<body>
<div id="Original_Game_Windows">
<canvas id="Game_Main_Window" width="640" height="480" style="background-color:#000000;"></canvas>
</div>
<style>
body { margin: 0; padding: 0; }
#Original_Game_Windows {
width: 640px;
height: 480px;
position: relative;
}
</style>
</body>

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:22:09.26

ごめんなさい、貼り付けるの無理でした。

2022/01/08(土) 17:26:57.57

>>236
サーバーに画像アップロードしないとだめですよ？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:42:45.65

https://www.axfc.net/u/4048256

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:44:17.60

斧を使わせて貰いました。
よろしくお願いします。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:44:45.13

>>239
もちろん承知しています。
それで試しても駄目でした。

2022/01/08(土) 18:53:38.87

>>242
>>234のalertに表示されてるアドレスNot Foundだけど？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 19:05:34.21

>>243
この文章って、そういう意味なのですか？
てっきり、アクセスは出来てるという意味だと勘違いしていました。
勉強不足で申し訳ありません。

ただ、今回は確実に、ちゃんと画像もフォルダ内にアップロードしたのですが、上手く行きませんでした。

https://i.imgur.com/7tRCd4P.jpg
https://i.imgur.com/AM1zYbJ.jpg
https://i.imgur.com/Egje64L.jpg

2022/01/08(土) 19:12:51.05

>>244
頭のpが大文字じゃないですか…

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 19:26:33.45

>>245
ありがとうございました。

私が馬鹿すぎました。
ネタでやってたんじゃないです。ガチです。お騒がせしました。本当にありがとうございました。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 19:30:48.95

>>245
報告までに。
一応確認したところ、無事成功しました。
ありがとうございました。

2022/01/08(土) 20:24:29.61

ドンマイ

2022/01/08(土) 20:40:02.49

わりとやらかすミスだからしゃーない

2022/01/09(日) 01:12:15.51

>>229
const elems = document.querySelectorAll(".content > h2");
console.log( elems, elems[ 0 ] )

これで、4つのh2が、ちゃんと取れている

NodeList(4) [h2, h2, h2, h2]
NodeList <h2>header2</h2>

この板よりも、web制作管理板の方で聞いた方がよい。
向こうのスレが、本スレだから

2022/01/09(日) 01:27:51.26

そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。
基本的に、ソースコードを書かない香具師は荒らし

「Ruby, Rails, クソチョン」などを、NGワード登録推奨とか、
自分が有利なように、いつもテンプレを改変する

荒らしがスレ主として、居座っているので、
まともな人がスレ立てして、テンプレも元に戻した方がよい

荒らしは必ず、短文で2回以上書き込む。
必ず、複数人がいるように見せかける

2022/01/09(日) 02:26:51.89

>>251
統合失調症ですか？

2022/01/09(日) 10:47:02.34

>>250
「本スレはない」といっても伝わってなかったんだな >>213
Web制作板のスレは長らく次スレが立ってない
複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ
利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない
繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している
Web制作板のスレを追いかけてきたなら知ってるはずなんだがな

2022/01/09(日) 10:50:05.66

>>250
本気で誘導したいならリンクを貼りましょう

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 11:32:48.03

昨日はお世話になりました。
二日連続になって申し訳ないのですが、質問させていただきます。

localStorageに保存しておける文字数って、あんまり多くないのでしょうか？

2000×400字ほどで、エラーが出てしまいます。
2000×300字だと問題なかったので、やり方じゃなく文字数の関係なのかと思ったのですが、どうなんでしょうか。

ちなみに、配列、オブジェクト型データです。

2022/01/09(日) 11:40:12.10

>>255
文字数というより、localStorageのデータ保存量の上限は基本5MBで
ブラウザや個人設定によって変わってくる
http://www.htmq.com/webstorage/

2022/01/09(日) 11:47:21.66

>>255
エラーとは？そこを詳しく説明して

2022/01/09(日) 11:51:03.02

変数や関数名の迷わない命名ルールってありますか？
変数は名詞、関数は動詞とは聞きますね。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 11:56:07.27

>>257
DOMEException { stack ～ってエラーです。

https://i.imgur.com/jlBZoNO.jpg

2022/01/09(日) 12:09:04.30

>>259
exceeded the quota(割当超過)で確定
サイズ減らすかindexedDB使うか

2022/01/09(日) 12:10:23.57

>>258
言語仕様としては、使用可能文字があるのみで命名規則に縛りはない
ビルトイン関数/プロパティの慣習的にクラスはUpperCamelCase、関数はlowerCamelCaseなので、守るとビルトインのコードと統一性が出来て良いだろう

後は採用しているコーディング規約を守れば良い
例えば、Google JavaScript Style Guide
https://google.github.io/styleguide/jsguide.html#naming
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html#va

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 12:16:18.69

>>260
回答ありがとうございます。
サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。

2022/01/09(日) 12:39:38.59

>>261
回答どうも。
規則というか命名ルールみたいなものが知りたいなと。

迷ってる時間が無駄になっているので。

2022/01/09(日) 12:45:08.85

すいません、アホな質問かもしれません。
マウスの右ボタンクリックで独自のサブメニューを表示したいと思います。
この場合は JavaScriput が必須で、CSSでは出来ないという理解で良いでしょうか。

2022/01/09(日) 14:49:13.23

仕事関係なのと、JavaScript は全くの初心者なんで聞き辛いのですが、
【環境】 Raspberry Pi OS Ver10.11
【期待する結果】文字列の後ろに 1バイトの値を付加したい。
シリアルで受信したメッセージから特定の値を抜き出して別のユニットにシリアルで送信
します。見様見真似とネットで調べながら、

set_Message: function (message) {
const _STX = '\x02'; // STX
const _ETX = '\x03'; // ETX
// 送信フレーム生成
var frame = _STX + message + _ETX;
// BCC 生成
var idx = 0;
var bcc = frame.charCodeAt(idx++);
do {
bcc ^= frame.charCodeAt(idx++);
} while (frame.charAt(idx) != '');
var buff = new ArrayBuffer(5);
var BCC = new DataView(buff);
BCC.setUint8(0, Number(bcc));
// 送信実行
var command = "echo -n " + frame + " > " + TTY_USB;
execsyncs(command);
command = "echo -n " + BCC.getUint8(0) + ',' + (bcc - 0) + ',' + Number(bcc) + ',' + parseInt(bcc, 10) + " > " + TTY_USB;
execsyncs(command);
return;
}

関数を作成、ブロックチェックコード BCC を計算させました。BCC を最後に付加したいのですが、
どれも値が 2バイトの文字列になってしまいます。"JavaScript" + "文字列を数値に変換" とかの
キーワードで検索しながら試行錯誤していますが、単純な数値にするヒントを頂ければ幸いです。
組み込みプログラマーなので、C と、C++ が少しわかります。

2022/01/09(日) 15:08:40.66

>>263
ruleは日本語で規則
あなたのいう命名ルールと俺のいう命名規則は同じ

2022/01/09(日) 15:18:07.99

名前なんて違反しなきゃ好きにつけりゃいい
俺は長くなっても意味がわかる命名派
vとかiとか一文字の変数や定数を好む宗教も強い

2022/01/09(日) 15:28:05.42

>>264
menu要素は非推奨になったし、JavaAcriptしかないのでは
少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う

コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある
ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する
独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ
独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが

2022/01/09(日) 15:29:28.78

>>268の誤字修正

×　JavaAcriptしかないのでは
○　JavaScriptしかないのでは

2022/01/09(日) 15:42:44.57

適当につけます(´・ω・`)

2022/01/09(日) 16:11:22.92

>>268
ありがとうございます！
Javascriptを使う必要がある件、了解です。

以前に .net で作ったWindowsアプリをWebアプリに移植しています。
Table上の特定のセルを右クリックしたら独自メニューが表示される仕様になります。
それ以外の場所ではブラウザ標準のコンテキストメニューが表示出来るようにしたいと思っています。

やり初めて間もないのですが、覚えることが多すぎて恐ろしい世界ですね。Webアプリとは。
Javascriptでやるにしても、JQueryかVueかReactか、どれでやるべきか・・・
バックエンドは Djangoですが、自分ひとりでやらないといけないのでかなりの修行になりそうです。
あと、AWSのデプロイとか Dockerとか・・・・初めてのことばかりで・・・

2022/01/09(日) 16:51:11.22

>>271
デスクトップアプリとWebアプリの一番の違いは実行環境が複数存在していることだろうな
クライアント環境を指定出来る社内向けWebアプリならブラウザを制限できるが、Webアプリを公開するなら、クロスブラウザが必須
デスクトップOSだけでもChrome,Fx,Edgeの対応が必要となる
(Operaもあるが、シェアが小さい)
モバイルOS版のブラウザも含めると更に大変になる
実装状況はcaniuseやMDNの互換表を見ると、ある程度は分かる
https://caniuse.com/

JavaScript標準の書き方を覚えてから、ライブラリ、フレームワークに手を付けるのが良いと思う
jQueryから入った人はDOMの知識が浅くて見当違いの質問をする事が多い
Vue,Reactは完全に別世界だが、DOMやECMAScriptの文法を理解してないと辛い
JavaScriptの基礎はおさえておいて損はない

最も、バックエンドが未着手なら、バックエンドの習得が先かと
JavaScriptもまとめて学習すると、おそらく混乱する

table要素の特定セルのコンテキストメニューの独自化なら大丈夫だと思う
Google スプレッドシートのWebアプリを想起した

2022/01/09(日) 17:29:38.29

>>272
アドバイスありがとうございます。
ほんとうに助かります！

幸い社内関係者が使用するだけの業務用アプリなのでブラウザを限定して開発することが出来ます。
JavaScriptの基本をおさえるほうが良い件、了解です。
入門本を買ってきて勉強してみます。

バックエンド（Django）はなんとか目処が立ちそうです。
いやぁ、本当にWebアプリの世界はすごい（難しくて複雑）と思いました。
おまけに技術の変化が激しそうだし・・・
がんばります！

2022/01/09(日) 18:35:56.14

>>273
クライアント環境を制限できるなら、デファクトスタンダードのGoogle Chromeがお勧め
次点でレンダリングエンジンが同じMS Edge

ブラウザシェアはIE1強時代と比べて、大分変わったな…
https://gs.statcounter.com/browser-market-share/desktop/japan/2021

確かに技術の進化はあるが、Web技術は後方互換性重視の設計思想なので、非推奨機能を使わなければ、大半の機能で半永続性が保証されている
HTML3.2は現代のブラウザでも動作するし、ECMAScript3は現役だ
つまり、古いバージョンから新しいバージョンに更新し続ける必要はない
ただし、これはWeb標準機能に限定した理屈でブラウザの独自拡張機能は別
その昔、IEのActiveX機能を使用した社内向けWebアプリはIEが終焉を迎えるとともに、他ブラウザへ移行するために改修を余儀なくされた
現在は昔と比べてブラウザの独自拡張機能が少ないが、ないわけでもない
Web標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い

2022/01/09(日) 19:24:13.83

>>265
Uint8Arrayとかそういう話じゃなくて？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 19:56:40.79

昨日から何度も失礼します。

ご提示いただいたindexedDBについて調べて、最初、コピペせずに
自分で打ち込んだら、何度修正してもトランザクションでエラーが出たので、
次に某所のコードをコピペしたら、このようなエラーが出てしまいました。

制作環境がスマホでは、トランザクションというか、indexedDBを扱うのは無理なのでしょうか。
スマホの制作環境わかる方少ないかと思いますが、アドバイスいただけたら幸いです。

https://i.imgur.com/DWMPWQ7.jpg

2022/01/09(日) 20:16:29.50

>>276
某所なんてぼかされても何も分からん
スマホだから使えないなんて話は聞いたことがない

https://caniuse.com/indexeddb

2022/01/09(日) 20:32:49.24

indexeddbは直で扱うのはしんどいからライブラリ使うといい
localstorageの代わりとして使う程度ならlocalforageがおすすめ

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 20:34:03.26

確かに質問するのにそこぼかしたら駄目ですよね。すみません。

「VB.NET-TIPS などプログラミングについて」というブログの、「JavaScript IndexedDB の使い方２（データ追加）」

というところです。

http://vbnettips.blog.shinobi.jp/javascript/javascript%20indexeddb%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%EF%BC%92

**265** (ﾜｯﾁｮｲ 8b02-2G4o [121.82.250.131]) · 2022/01/09(日) 20:35:41.88

>>275
BCC[0] = bcc;
BCC[1] = Number(bcc);
BCC[2] = parseInt(bcc);

command = "echo -n " + BCC[0] + BCC[1] + BCC[2] + " > " + TTY_USB;
execsyncs(command);

としてみましたが、どれも 2文字の文字列で出力されてしまいます。コマンドを作る際の連結で文字列にされている感じでしょうか？

昼過ぎに質問を書き込んでから、const _BCC[ '\x00', ～ '\xFF' ] の 256バイトの配列を作成、_BCC[bcc] として目的の値が出力出来る所まで辿り着いたのですが、処理としてはチョット恥ずかしい感じがします。

**265** (ﾜｯﾁｮｲ 8b02-2G4o [121.82.250.131]) · 2022/01/09(日) 20:38:48.27

>>280
消しすぎてました。試したのは、

var BCC = new Uint8Array(bcc);
BCC[0] = bcc;
BCC[1] = Number(bcc);
BCC[2] = parseInt(bcc);

です。

2022/01/09(日) 20:56:22.61

>>280
変数commandはString型なので、そこに含まれる値は全てStrong型に変換される

String(10) === "10"

1バイトの文字が必要なら、ASCIIコードの範囲で1文字になるよう調整する必要がある

2022/01/09(日) 21:05:54.69

>>265
String.fromCharCode(bcc) ではだめなの？（UTF-16だけど）

2022/01/09(日) 21:57:44.39

>>282
>>283
有難うございます。
String.fromCharCode(bcc) で目的が達成出来ました。
これで巨大な変換テーブルを人目に晒さずに済みました。
精進いたします。

2022/01/09(日) 22:58:01.81

>>271
スレ立てるまでもない質問はここで 158匹目
https://mevius.5ch.net/test/read.cgi/tech/1635193843/538

ここに、YouTube で有名な、雑食系エンジニア・KENTA のサロンの、
Ruby on Rails 初心者用コースの内容を書いておいた

基本的に、Rails以外のフレームワークは、シェアが少ないのでおすすめしない。
学習環境も揃わないので、無理

Railsでは、Railsチュートリアル・Railsガイド・
黒田努の3冊の本・パーフェクト Ruby on Rails・Ruby on Rails 6 エンジニア養成読本とか、
Rubyでは、改訂2版パーフェクトRuby・改訂2版 Ruby逆引きハンドブックなどの教科書が揃っている

これほど、良い教科書が揃っているフレームワークはない！

Laravel のシェアは少しあるけど、KENTAがPHP は一生やる必要がないと言ったので、
PHP自体がオワコンになってしまったw

日本のウェブ開発の将来は、ほぼKENTAが決めている。
Scala を滅ぼしたのも、KENTA

2022/01/09(日) 23:10:39.20

>>285
自演するな

2022/01/10(月) 00:49:36.06

<table style="width:3000px;background:#ff00ff">
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>

<div style="position:fixed;top:50px;left:200px">x=<span id="x">0</span></div>

setInterval(

function(){
document.getElementById("x").innerHTML = window.pageXOffset;
}
,100
);

ＰＣだと左右スクロールさせたときちゃんとwindow.pageXOffsetが表示されるけど
スマホだと右スクロールの場合は0のまんまで左スクロールの場合だけ表示されます。
スマホでもスクロール値ちゃんと取得できるようなやり方はありますか？

2022/01/10(月) 01:03:26.84

>>287
scrollイベントでなく、setIntervalを使う理由が何かある？
scrollしてない時にも常に監視したらバッテリの持ちが悪くなりそうだが

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/10(月) 05:44:27.44

>>277
>>278
ありがとうございました。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/10(月) 07:56:10.03

>>277
おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。
トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。

しかし、

https://ideone.com/IKQkII

このコードの59行目くらいで、自分のスマホだとエラーが起きるところまではわかったのですが、解決案がわかりません。
アドバイスいただけたら幸いです。

https://i.imgur.com/DWMPWQ7.jpg

2022/01/10(月) 09:10:37.59

>>290
idb作るときにkey指定したりした？
結構癖のあるDBよ。
https://qiita.com/butakoma/items/2c1c956b63fcf956a137

localForageとかPouchDB使った方が良いのでは？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/10(月) 09:57:44.78

>>291
このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。
なので多分ミスはないんじゃないかと思うんですが……。

昨日も薦められましたが、localForageと言うのも少し調べてみます。

それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、
イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。

2022/01/10(月) 10:26:53.27

>>292
そういう事であればPouchDB一択。
サーバと同期してマスタ撒いたりできる。
サーバはIBM CloudantってDBaaSがあるよ。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/10(月) 10:56:29.90

>>293
ありがとうございます。
こちらも調べてみます。

2022/01/10(月) 12:30:07.69

>>288
１：ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから
２：setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから
３：addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど
setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.196.141]) · 2022/01/11(火) 10:20:14.57

連日すみません。

new Objectしたデータ（以下〇〇〇〇とします）をindexedDBで格納しようとしたのですが、
〇〇〇〇[0].nameで実行するとちゃんと格納されたようで
名前を表示してくれるのですが、〇〇〇〇[0]や〇〇〇〇で実行すると、エラーが出てしまいます。

名前などは表示されるのだから、forで無理矢理全部やろうとしたら、indexedDBでは前のデータに上書きされるようで、上手く出来ませんでした。

この〇〇〇〇を格納出来うる解決案などありましたら、教えていただけると幸いです。

連日すみません。

https://i.imgur.com/5TVe5FC.jpg
https://i.imgur.com/b6Ymtuc.jpg

2022/01/11(火) 13:20:29.56

>>287
次のコードを先頭（<head>部）に追加する。
<meta name="viewport" content="user-scalable=no" />

>>296
>>1
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.231.111]) · 2022/01/11(火) 13:48:48.89

>>297 　さんはじめ、皆様失礼しました。
コピペ部分除いて、自分が好きなように書き殴ったコードなので、
出来るだけ見せたくなく、あのような半端な質問になってしまいました。申し訳ありません。

現在進行形でサンプルコードを作成していたのですが、打開案が見つかりそうな気がしたので、もう少し自力で頑張ってみます。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.232.179]) · 2022/01/11(火) 17:48:23.29

>>296 についてですが、どうやら、データの一つ一つに割り当てた画像の部分を削除すると、上手く機能するようなのですが、
IndexedDBでは、文字列などのオブジェクトと画像は、同時に格納出来ないのでしょうか。

出来ないのであれば、相当な量の手直しが必要になり非常に困ります。
制作開始時期にほんの少し調べて、localstorageで出来るんだな、と高をくくってセーブを後回しにしてしまい、後悔ばかりです。

2022/01/11(火) 22:47:10.94

Ruby on Rails では、画像の保存に、libvips かImageMagick も使う。
それで画像を変換したり、サイズなどをチェックする

チェックしないと、サイズが少なくても、
1px × 10,000px みたいな極端な形状を送られて、
サーバーを攻撃してきて落とされる

だから、縦横もチェックしないといけない

Railsみたいなフレームワークを使っていない人は、
ウェブサービスを作るのは無理だと思う

フレームワーク側で自動的にチェックされる機能を、
すべて自分で作らないといけないから

2022/01/11(火) 22:54:59.18

>>299
質問する時は
①やりたい事を明確に書く
②そのために今試している/実装している内容、ソースコードなど
③発生しているエラー等について
の順で書くと良い

ぶっちゃけ何をやろうとしてるのかが全く分からん
画像をIndexedDBに保存したいなら、一回blobに変換しないといかんぞ
https://blog.katsubemakito.net/html5/indexeddb2

2022/01/11(火) 22:59:30.93

>>299
IndexedDBでblob保存できるんだから画像が入らない理由はない
そしてHTMLImageElementを丸ごと保管するのは明らかにおかしいし
そこに画像は無いと思うんだが

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.232.43]) · 2022/01/12(水) 05:59:28.46

https://4.gigafile.nu/0119-b5bf917d41c34039ed485d68891d082e0

ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。

紹介されたサイトなど巡って、考えてみようと思います。

2022/01/12(水) 09:14:18.07

>>303
>ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
なんかまた妙な事をやろうとしてるな

普通はimgフォルダを作って、そこに歩行グラフィックとかを格納する
実装部分はキャラクターの状態に合わせてグラフィックを呼び出す、みたいな感じにするぞ

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.229.102]) · 2022/01/12(水) 09:55:20.12

>>304
何となくですが、普通どうするのかわかったような気がします。

アドバイスありがとうございます。

2022/01/12(水) 12:17:05.53

単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい
何が目的でそれを使うのかよく考えないと訳わからんコードになる