+ 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/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

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

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.235.161]) · 2022/01/13(木) 08:13:45.35

blobで調べたサイトで出てきた、完成されたコードに、画像を置いて実行したら、エラーが出てしまいました。

【エラーメッセージ】
Putting elephants in IndexedDB
DOMException { stack: "Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.↵ at putElephantInDb (http://localhost:2435/storage/emulated/0/index.html:95:34)↵ at XMLHttpRequest.<anonymous> (http://localhost:2435/storage/emulated/0/index.html:84:21)" }

どのへんでエラーが出たのかまではわかったのですが、何故エラーが出たのかわかりません。
コードはコピペです。
解決案等ありましたら、教えていただけると幸いです。

https://52.gigafile.nu/0120-e68fc48424d65f0f7ae137f3f97cbbc0

2022/01/13(木) 10:49:49.47

>>307
山ほど言いたい事があるが……
・コードが動かない、っていうなら実行環境も書け
　(JavaScriptはブラウザ単位で動作が異なる場合もあるし、必須）

・初心者ならまずは動くコードを元に改良なり修正なりしろ
　確認したら元ネタのコードは2012年だから、あなたの動作環境で動く補償が無い
　（軽く見ただけでもエディタがエラー吐くレベルの互換性不備が2箇所ぐらいある）
https://dev.mozilla.jp/2012/07/storing-images-and-files-in-indexeddb/

・初学者向けのチュートリアルやってこい
　とりあえず基本を勉強しろ、明らかに実装方針が迷走してる
　エラーを解決できても、この先にエラー地獄になるのが目に見えてる
　とりあえず専門書買うなり、Webで公開されるチュートリアルもあるからやってこい
　(ゲームが作りたいなら以下を見てみろ）
　https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
　http://puyo.sega.jp/program_2020/

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.234.197]) · 2022/01/13(木) 12:01:21.75

動作環境は、Android10 F-51A
Chrome 93.0.4577.62

です。

最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
後はどうにでもなると踏んでいたので、それらについてだけ、こちらで質問してしまいました。

テキストを表示したり、プレイヤーキャラクターを動かしたり、
まだ簡易版ですがワールドマップの自動生成させたり、
いわゆるNPCが動くプログラムなどは、既に組んでいます。

後はここだけなんです、問題は。

スレの皆さんを不快にさせてしまい、申し訳ありませんでした。

2022/01/13(木) 12:34:36.45

やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない

保存する画像はユーザーがアップロードするの？それともcanvasに描いた内容を変換するの？
元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.200]) · 2022/01/13(木) 15:14:42.78

>>310
https://youtu.be/RKcFIg1yHOI

こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。
他にやりようある、ありそうってのはわかるんですが、上手く行かないです。

2022/01/13(木) 15:18:53.58

>>309
こっちも口調が強くなってすまんな
>最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
今やりたい事は
①データをセーブする(localstorageまたIndexedDB）
②①で保存したデータを読み込んで、セーブした時の状態に戻す
っていう事でいいかな？
だとすると、なおさら画像をDB等に保存したい理由が分からない

もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
ロードした時に復元できない、って思ってる？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.229]) · 2022/01/13(木) 16:01:24.15

>>312
いえ、こちらこそ、気を遣わせて申し訳ありません。

＞もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
＞ロードした時に復元できない、って思ってる？

そのものズバリでした。
先ほど >>310 さんのレス見て、ん？　とは思ったのですが、
やっぱり画像ってセーブとかロードとかするものじゃないんですね。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.229]) · 2022/01/13(木) 16:03:06.44

あと、今やりたいことはまさしくそれです。

2022/01/13(木) 16:13:19.06

>>313
よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな……

例えばマップデータだったら、動画見てると配列で定義してるよね
逆に言えば、その配列情報さえあれば、同じマップを生成する事が出来るからそれだけ保存すれば良い
そうすれば画像データよりも格段に軽い状態で保存できる
プレイヤーの位置情報とかも、座標データを書き出せばそこから位置が復元できる

で、実行環境で出来るか分からんけど
直接サーバー上にファイルを書き出せるなら、localstorageやIndexedDBに拘らなくても
極端な話、テキストとかJSONとかで書き出して
ロードする時にはそのファイルからデータを読み込んで、復元させるっていう方法も取れる

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.229]) · 2022/01/13(木) 16:44:42.35

皆様、ありがとうございました。

ここに来るのがこれで最後になるよう、頑張ってみようと思います。

2022/01/13(木) 20:06:01.17

WebSockサーバーと接続し、データを受信したら次のデータを要求する様な流れで、
泥のChromeと比べてPCのChromeとEdgeは物凄く遅く、泥と比べて1/5程度の速度なのですが
configで実行速度的な物を設定出来るのでしょうか

泥は4.1の化石でもPCよりずっと早いです

2022/01/13(木) 22:50:17.84

>>317
Chromeの開発ツールで通信速度・CPU性能を意図的に遅くすることができます。
「Chrome Network Throttling」「Chrome CPU throttling」辺りで情報が出ます。

2022/01/13(木) 23:29:03.91

画像データは、各マス目の画像の番号の並びを保存する

例えば、1は道路・2は山・3は川とか、
さらに、1～3の画像を保存するか、保存せずにサーバーから送るか

1,2,1
1,3,1
1,3,3

JavaScript のゲームエンジンは、Pixi.js ベースのPhaser とか。
C# なら、Unity とか

このイタリア人はPhaserで、461 の記事を書いている
https://www.emanueleferonato.com/

2022/01/14(金) 03:35:28.27

>>316
頑張れよー
次に来る時は質問の回答者になれる事を祈ってるわ

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.230.170]) · 2022/01/15(土) 10:23:00.28

たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。

【環境】
Android10 F-51A
Chrome 93.0.4577.62

【エラーメッセージ】
DOMException { stack: "Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.↵ at IDBOpenDBRequest.openReq.onsuccess (http://localhost:2435/storage/emulated/0/index.html:63:22)" }

【期待する結果】
データベースかオブジェクトストアを増やしたいです
index？　を増やす？　のは試してみましたが、自分では上手く行きませんでした。

【サンプルコード】
https://jsbin.com/zelonizugu/edit?js

2022/01/15(土) 10:52:09.59

かたくなにライブラリを使おうとしない理由はなに？
それだけ教えて

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.230.170]) · 2022/01/15(土) 10:57:45.01

>>322
気持ち悪いからです。

いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。

2022/01/15(土) 11:44:06.71

せめてライブラリのコードを読んでマネしてみるとか

2022/01/15(土) 13:39:49.54

createObjectStoreだけしてcreateIndexしてない
画像データそのままぶっこむとかあほみたいなことする必要なくなった？んだし
データベースの基本が分かってないならlocalStorageに戻れば？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.198.160]) · 2022/01/15(土) 14:22:56.89

ライブラリ？　とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。

お世話になりました。ありがとうございました。

2022/01/15(土) 14:23:41.37

>>321
Qitaの記事そのままコピーしてもそら動かんだろwwww
やりたいならMDNみたいなちゃんとしたチュートリアルからやれ
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB

あと何度も言うが、なるべく最小の形で実装して
細かく試しながらやれよ、動かないコードをツラツラ書いてもしょうがないだろ

2022/01/15(土) 15:38:38.42

>>231
問題がぐちゃぐちゃに絡み合ってるなこれ。
a. indexedDB.open() が複数回呼ばれている（dbVersionの値もどうなるか怪しい）
b. storeName / data が途中で上書きされている（他の変数も軒並み上書きされてる）

a. により、onupgradeneeded とか db.createObjectStore の考え方がぐちゃぐちゃになる（DBのバージョン管理が全くできていない）
b. により、想定外の挙動になっている。（"itemStore"を2回作ろうとしている。プライマリキーが不正になってる）

次のように変更すれば、動くと思う。
indexedDB.open() が1つになるように書き換える。（dbVersionを意識して書く）
var を使用しないように書き換える。 const を積極的に使うようにする。（const が無理な場合のみ let を使用する）

正直、 localStorage 使う方がいいと思うぞ。localStorage で容量が足りないならば、保存するデータから考え直したほうがいい。

>>322
このスレ、ライブラリの質問禁止になってる（>>1 参照）から、スレ的にはライブラリ使わないでいいと思うぞ

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.198.160]) · 2022/01/15(土) 15:58:17.33

>>327
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。

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

>>328
アドバイスありがとうございます。
とても助かりました。

2022/01/15(土) 23:03:48.55

>>329
こういうと元も子もないないけど、
初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか？
PC版開発⇒Android環境で動作するようにテスト＆修正っていう方がやりやすいぞ
(MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった）

2022/01/15(土) 23:42:23.10

>1 に書いてある、
>(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。

たぶん、これは元々無かったのに、荒らしが勝手に入れた。
荒らしはテンプレを勝手に改変して、自分が有利な話題だけに絞る。
自分が嫌な話題をさせないように邪魔する

荒らしは必ず、2回以上書き込んで複数人いるように思わせる。
それで、議論を自分が有利な方向へ持っていく

Python のすべてのスレのテンプレも、荒らしが改変している。
>・当スレにRubyのソースコード類を書くことを禁ず
>・Ruby等、Pythonではないプログラミング言語での回答類・質問を書くのも禁止
>・「Ruby では」「Rubyでは」「Rails」正規表現→「^クソチョンw$」をNGワード登録推奨

テンプレ荒らし。
ずっと、荒らしがスレを立てて、テンプレを毎回改変してくる

それをそのまま使っちゃいけない。
必ず削除するか、別のスレを立て直す

この辺の対策は、漏れらは散々やってきた

2022/01/15(土) 23:53:50.82

そこでつまづいてるならライブラリ使った方がいいと思うぞ
一応コピペしたら使えるlocalforageのテストコード貼っとくから
あくまでテストコードだからPromise.allとか使ってないけど
https://pastebin.com/f5FtchSD