X



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

■ このスレッドは過去ログ倉庫に格納されています
0001デフォルトの名無しさん (ワッチョイ 8a52-hQZx [61.87.108.223])
垢版 |
2021/11/10(水) 15:24:24.80ID:jxD2VXPG0
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
0234デフォルトの名無しさん (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 10:15:27.19ID:GNp2CfCTd
>>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
0236231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 17:15:55.99ID:GNp2CfCTd
可能な限り絞り込み? ました。

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

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

よろしくお願いいたします。
0237231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 17:19:01.00ID:GNp2CfCTd
<! 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>
0238231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 17:22:09.26ID:GNp2CfCTd
ごめんなさい、貼り付けるの無理でした。
0241231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 17:44:17.60ID:GNp2CfCTd
斧を使わせて貰いました。
よろしくお願いします。
0242231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 17:44:45.13ID:GNp2CfCTd
>>239
もちろん承知しています。
それで試しても駄目でした。
0244231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 19:05:34.21ID:GNp2CfCTd
>>243
この文章って、そういう意味なのですか?
てっきり、アクセスは出来てるという意味だと勘違いしていました。
勉強不足で申し訳ありません。

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


https://i.imgur.com/7tRCd4P.jpg
https://i.imgur.com/AM1zYbJ.jpg
https://i.imgur.com/Egje64L.jpg
0246231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 19:26:33.45ID:GNp2CfCTd
>>245
ありがとうございました。

私が馬鹿すぎました。
ネタでやってたんじゃないです。ガチです。お騒がせしました。本当にありがとうございました。
0247231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/08(土) 19:30:48.95ID:GNp2CfCTd
>>245
報告までに。
一応確認したところ、無事成功しました。
ありがとうございました。
0250デフォルトの名無しさん (ワッチョイ 0b2c-mvA8 [153.136.94.40])
垢版 |
2022/01/09(日) 01:12:15.51ID:lzN+drLE0
>>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制作管理板の方で聞いた方がよい。
向こうのスレが、本スレだから
0251デフォルトの名無しさん (ワッチョイ 6501-dXQO [126.29.248.173])
垢版 |
2022/01/09(日) 01:27:51.26ID:wKoMs7Y50
そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。
基本的に、ソースコードを書かない香具師は荒らし

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

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

荒らしは必ず、短文で2回以上書き込む。
必ず、複数人がいるように見せかける
0253デフォルトの名無しさん (ワッチョイ 8d01-0qby [114.48.120.226])
垢版 |
2022/01/09(日) 10:47:02.34ID:94EdrQaq0
>>250
「本スレはない」といっても伝わってなかったんだな >>213
Web制作板のスレは長らく次スレが立ってない
複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ
利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない
繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している
Web制作板のスレを追いかけてきたなら知ってるはずなんだがな
0255231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/09(日) 11:32:48.03ID:8qT6W49sd
昨日はお世話になりました。
二日連続になって申し訳ないのですが、質問させていただきます。

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

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

ちなみに、配列、オブジェクト型データです。
0261デフォルトの名無しさん (ワッチョイ 8d01-0qby [114.48.120.226])
垢版 |
2022/01/09(日) 12:10:23.57ID:94EdrQaq0
>>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
0262231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/09(日) 12:16:18.69ID:8qT6W49sd
>>260
回答ありがとうございます。
サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。
0265デフォルトの名無しさん (ワッチョイ 8b02-2G4o [121.82.250.131])
垢版 |
2022/01/09(日) 14:49:13.23ID:MpHyBZWL0
仕事関係なのと、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++ が少しわかります。
0268デフォルトの名無しさん (ワッチョイ 8d01-2syq [114.48.120.226])
垢版 |
2022/01/09(日) 15:28:05.42ID:94EdrQaq0
>>264
menu要素は非推奨になったし、JavaAcriptしかないのでは
少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う

コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある
ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する
独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ
独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが
0271デフォルトの名無しさん (ワッチョイ 2301-dXQO [219.23.92.148])
垢版 |
2022/01/09(日) 16:11:22.92ID:CpwtZL4w0
>>268
ありがとうございます!
Javascriptを使う必要がある件、了解です。

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

やり初めて間もないのですが、覚えることが多すぎて恐ろしい世界ですね。Webアプリとは。
Javascriptでやるにしても、JQueryかVueかReactか、どれでやるべきか・・・
バックエンドは Djangoですが、自分ひとりでやらないといけないので かなりの修行になりそうです。
あと、AWSのデプロイとか Dockerとか・・・・ 初めてのことばかりで・・・
0272デフォルトの名無しさん (ワッチョイ 8d01-2syq [114.48.120.226])
垢版 |
2022/01/09(日) 16:51:11.22ID:94EdrQaq0
>>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アプリを想起した
0273デフォルトの名無しさん (ワッチョイ 2301-dXQO [219.23.92.148])
垢版 |
2022/01/09(日) 17:29:38.29ID:CpwtZL4w0
>>272
アドバイス ありがとうございます。
ほんとうに助かります!

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

バックエンド(Django)はなんとか目処が立ちそうです。
いやぁ、本当にWebアプリの世界はすごい(難しくて 複雑)と思いました。
おまけに技術の変化が激しそうだし・・・
がんばります!
0274デフォルトの名無しさん (ワッチョイ 8d01-2syq [114.48.120.226])
垢版 |
2022/01/09(日) 18:35:56.14ID:94EdrQaq0
>>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標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い
0276231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/09(日) 19:56:40.79ID:8qT6W49sd
昨日から何度も失礼します。

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

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

https://i.imgur.com/DWMPWQ7.jpg
0280265 (ワッチョイ 8b02-2G4o [121.82.250.131])
垢版 |
2022/01/09(日) 20:35:41.88ID:MpHyBZWL0
>>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] として目的の値が出力出来る所まで辿り着いたのですが、処理としてはチョット恥ずかしい感じがします。
0285デフォルトの名無しさん (ワッチョイ 0b2c-EgL+ [153.136.94.40])
垢版 |
2022/01/09(日) 22:58:01.81ID:lzN+drLE0
>>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
0287デフォルトの名無しさん (ワッチョイ 0510-94m7 [180.12.82.129])
垢版 |
2022/01/10(月) 00:49:36.06ID:iL7OUFIC0
<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
);

PCだと左右スクロールさせたときちゃんとwindow.pageXOffsetが表示されるけど
スマホだと右スクロールの場合は0のまんまで左スクロールの場合だけ表示されます。
スマホでもスクロール値ちゃんと取得できるようなやり方はありますか?
0289231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/10(月) 05:44:27.44ID:GFg5qhLud
>>277
>>278
ありがとうございました。
0290231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/10(月) 07:56:10.03ID:GFg5qhLud
>>277
おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。
トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。

しかし、

https://ideone.com/IKQkII

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

https://i.imgur.com/DWMPWQ7.jpg
0292231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/10(月) 09:57:44.78ID:GFg5qhLud
>>291
このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。
なので多分ミスはないんじゃないかと思うんですが……。

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

それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、
イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。
0294231 (スプッッ Sd03-Ylb5 [1.79.82.91])
垢版 |
2022/01/10(月) 10:56:29.90ID:GFg5qhLud
>>293
ありがとうございます。
こちらも調べてみます。
0295デフォルトの名無しさん (ワッチョイ 0510-Q8Sl [180.12.82.129])
垢版 |
2022/01/10(月) 12:30:07.69ID:iL7OUFIC0
>>288
1:ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから
2:setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから
3:addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど
setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから
0296231 (スプッッ Sd03-Ylb5 [1.75.196.141])
垢版 |
2022/01/11(火) 10:20:14.57ID:xHId70tjd
連日すみません。

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

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

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

連日すみません。

https://i.imgur.com/5TVe5FC.jpg
https://i.imgur.com/b6Ymtuc.jpg
0297デフォルトの名無しさん (ワッチョイ 0332-Cwx9 [133.207.66.224])
垢版 |
2022/01/11(火) 13:20:29.56ID:yML4DU0R0
>>287
次のコードを先頭(<head>部)に追加する。
<meta name="viewport" content="user-scalable=no" />

>>296
>>1
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
  ※必ず「問題の事象が再現されること」を確認してください。
   必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
0298231 (スプッッ Sd03-Ylb5 [1.75.231.111])
垢版 |
2022/01/11(火) 13:48:48.89ID:dFSE8CT0d
>>297  さんはじめ、皆様失礼しました。
コピペ部分除いて、自分が好きなように書き殴ったコードなので、
出来るだけ見せたくなく、あのような半端な質問になってしまいました。申し訳ありません。

現在進行形でサンプルコードを作成していたのですが、打開案が見つかりそうな気がしたので、もう少し自力で頑張ってみます。
0299231 (スプッッ Sd03-Ylb5 [1.75.232.179])
垢版 |
2022/01/11(火) 17:48:23.29ID:deLc6mHgd
>>296 についてですが、どうやら、データの一つ一つに割り当てた画像の部分を削除すると、上手く機能するようなのですが、
IndexedDBでは、文字列などのオブジェクトと画像は、同時に格納出来ないのでしょうか。

出来ないのであれば、相当な量の手直しが必要になり非常に困ります。
制作開始時期にほんの少し調べて、localstorageで出来るんだな、と高をくくってセーブを後回しにしてしまい、後悔ばかりです。
0300デフォルトの名無しさん (ワッチョイ 0b2c-EgL+ [153.136.94.40])
垢版 |
2022/01/11(火) 22:47:10.94ID:TAtkceMX0
Ruby on Rails では、画像の保存に、libvips かImageMagick も使う。
それで画像を変換したり、サイズなどをチェックする

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

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

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

フレームワーク側で自動的にチェックされる機能を、
すべて自分で作らないといけないから
0301デフォルトの名無しさん (ワッチョイ c55f-Krhj [14.11.8.0 [上級国民]])
垢版 |
2022/01/11(火) 22:54:59.18ID:1iYs2MCE0
>>299
質問する時は
@やりたい事を明確に書く
Aそのために今試している/実装している内容、ソースコードなど
B発生しているエラー等について
の順で書くと良い

ぶっちゃけ何をやろうとしてるのかが全く分からん
画像をIndexedDBに保存したいなら、一回blobに変換しないといかんぞ
https://blog.katsubemakito.net/html5/indexeddb2
0303231 (スプッッ Sd03-Ylb5 [1.75.232.43])
垢版 |
2022/01/12(水) 05:59:28.46ID:cpeqqxS8d
https://4.gigafile.nu/0119-b5bf917d41c34039ed485d68891d082e0

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

紹介されたサイトなど巡って、考えてみようと思います。
0304デフォルトの名無しさん (ワッチョイ c55f-Krhj [14.11.8.0 [上級国民]])
垢版 |
2022/01/12(水) 09:14:18.07ID:60+8sbQA0
>>303
>ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
なんかまた妙な事をやろうとしてるな

普通はimgフォルダを作って、そこに歩行グラフィックとかを格納する
実装部分はキャラクターの状態に合わせてグラフィックを呼び出す、みたいな感じにするぞ
0305231 (スプッッ Sd03-Ylb5 [1.75.229.102])
垢版 |
2022/01/12(水) 09:55:20.12ID:moNKRHMad
>>304
何となくですが、普通どうするのかわかったような気がします。

アドバイスありがとうございます。
0307231 (スプッッ Sd03-Ylb5 [1.75.235.161])
垢版 |
2022/01/13(木) 08:13:45.35ID:9NWqLsjEd
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
0308デフォルトの名無しさん (ワッチョイ c55f-Krhj [14.11.8.0 [上級国民]])
垢版 |
2022/01/13(木) 10:49:49.47ID:BdYH6d7w0
>>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/
0309231 (スプッッ Sd03-Ylb5 [1.75.234.197])
垢版 |
2022/01/13(木) 12:01:21.75ID:2Kp13/God
動作環境は、Android10 F-51A
Chrome 93.0.4577.62

です。

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

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

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

スレの皆さんを不快にさせてしまい、申し訳ありませんでした。
0310デフォルトの名無しさん (アウアウウー Sa19-gByX [106.146.111.199])
垢版 |
2022/01/13(木) 12:34:36.45ID:v0PpJSuUa
やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない

保存する画像はユーザーがアップロードするの?それともcanvasに描いた内容を変換するの?
元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない
0311231 (スプッッ Sd03-Ylb5 [1.75.208.200])
垢版 |
2022/01/13(木) 15:14:42.78ID:EndGOLp+d
>>310
https://youtu.be/RKcFIg1yHOI

こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。
他にやりようある、ありそうってのはわかるんですが、上手く行かないです。
0312デフォルトの名無しさん (ワッチョイ c55f-Krhj [14.11.8.0 [上級国民]])
垢版 |
2022/01/13(木) 15:18:53.58ID:BdYH6d7w0
>>309
こっちも口調が強くなってすまんな
>最初の質問だった画像の表示と、各種データ(質問時、画像保存が別物とは知りませんでした)のセーブ&ロードさえ出来れば、
今やりたい事は
@データをセーブする(localstorageまたIndexedDB)
A@で保存したデータを読み込んで、セーブした時の状態に戻す
っていう事でいいかな?
だとすると、なおさら画像をDB等に保存したい理由が分からない

もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
ロードした時に復元できない、って思ってる?
0313231 (スプッッ Sd03-Ylb5 [1.75.208.229])
垢版 |
2022/01/13(木) 16:01:24.15ID:Pj0bwTK9d
>>312
いえ、こちらこそ、気を遣わせて申し訳ありません。

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

そのものズバリでした。
先ほど >>310 さんのレス見て、ん? とは思ったのですが、
やっぱり画像ってセーブとかロードとかするものじゃないんですね。
0314231 (スプッッ Sd03-Ylb5 [1.75.208.229])
垢版 |
2022/01/13(木) 16:03:06.44ID:Pj0bwTK9d
あと、今やりたいことはまさしくそれです。
0315デフォルトの名無しさん (ワッチョイ c55f-Krhj [14.11.8.0 [上級国民]])
垢版 |
2022/01/13(木) 16:13:19.06ID:BdYH6d7w0
>>313
よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな……

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

で、実行環境で出来るか分からんけど
直接サーバー上にファイルを書き出せるなら、localstorageやIndexedDBに拘らなくても
極端な話、テキストとかJSONとかで書き出して
ロードする時にはそのファイルからデータを読み込んで、復元させるっていう方法も取れる
0316231 (スプッッ Sd03-Ylb5 [1.75.208.229])
垢版 |
2022/01/13(木) 16:44:42.35ID:Pj0bwTK9d
皆様、ありがとうございました。

ここに来るのがこれで最後になるよう、頑張ってみようと思います。
0317デフォルトの名無しさん (ワッチョイ 23f0-4goK [61.45.110.150])
垢版 |
2022/01/13(木) 20:06:01.17ID:Dm2SSKhE0
WebSockサーバーと接続し、データを受信したら次のデータを要求する様な流れで、
泥のChromeと比べてPCのChromeとEdgeは物凄く遅く、泥と比べて1/5程度の速度なのですが
configで実行速度的な物を設定出来るのでしょうか

泥は4.1の化石でもPCよりずっと早いです
0319デフォルトの名無しさん (ワッチョイ 0b2c-EgL+ [153.136.94.40])
垢版 |
2022/01/13(木) 23:29:03.91ID:Ia/gMc7B0
画像データは、各マス目の画像の番号の並びを保存する

例えば、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/
0321231 (スプッッ Sd03-Ylb5 [1.75.230.170])
垢版 |
2022/01/15(土) 10:23:00.28ID:S4wDIFSqd
たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。

【環境】
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
0323231 (スプッッ Sd03-Ylb5 [1.75.230.170])
垢版 |
2022/01/15(土) 10:57:45.01ID:S4wDIFSqd
>>322
気持ち悪いからです。

いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。
0326231 (スプッッ Sd03-Ylb5 [1.75.198.160])
垢版 |
2022/01/15(土) 14:22:56.89ID:+L4WFDi5d
ライブラリ? とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。

お世話になりました。ありがとうございました。
0327デフォルトの名無しさん (ワッチョイ c55f-Krhj [14.11.8.0 [上級国民]])
垢版 |
2022/01/15(土) 14:23:41.37ID:gRCv6ifL0
>>321
Qitaの記事そのままコピーしてもそら動かんだろwwww
やりたいならMDNみたいなちゃんとしたチュートリアルからやれ
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB

あと何度も言うが、なるべく最小の形で実装して
細かく試しながらやれよ、動かないコードをツラツラ書いてもしょうがないだろ
0328デフォルトの名無しさん (ワッチョイ 0332-Cwx9 [133.207.66.224])
垢版 |
2022/01/15(土) 15:38:38.42ID:ZBFGEo1/0
>>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 参照)から、スレ的にはライブラリ使わないでいいと思うぞ
0329231 (スプッッ Sd03-Ylb5 [1.75.198.160])
垢版 |
2022/01/15(土) 15:58:17.33ID:+L4WFDi5d
>>327
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。

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

>>328
アドバイスありがとうございます。
とても助かりました。
0330デフォルトの名無しさん (ワッチョイ 8d5f-PF+u [14.11.8.0 [上級国民]])
垢版 |
2022/01/15(土) 23:03:48.55ID:gRCv6ifL0
>>329
こういうと元も子もないないけど、
初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか?
PC版開発⇒Android環境で動作するようにテスト&修正っていう方がやりやすいぞ
(MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった)
0331デフォルトの名無しさん (ワッチョイ 6b2c-yR06 [153.136.94.40])
垢版 |
2022/01/15(土) 23:42:23.10ID:iJzr35B10
>1 に書いてある、
>(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。

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

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

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

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

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

この辺の対策は、漏れらは散々やってきた
0333331 (ワッチョイ 6b2c-yR06 [153.136.94.40])
垢版 |
2022/01/16(日) 01:28:59.06ID:RG8YDX1E0
初心者は、Ruby, jQuery, Lodash みたいな簡単な言語・ライブラリなどを使うと、
時間を削減できて、その分を勉強に回せる

だから荒らしは、それを出来ないように制限してくる。
初心者が勉強して上達するのが嫌なんだろう。
自分が不利になるから

それで、あちこちのスレで、ずっとRuby, jQuery, Lodash 禁止のテンプレを作っている。
漏れらは散々、それらの荒らしと戦ってきた
■ このスレッドは過去ログ倉庫に格納されています

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