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

[表示 : 全て最新50 1-99 101- 201- 301- 401- 501- 601- 701- 801- 901- 1001- 2ch.scのread.cgiへ]
Update time : 02/24 16:40 / Filesize : 334 KB / Number-of Response : 1026
[このスレッドの書き込みを削除する]
[＋板最近立ったスレ＆熱いスレ一覧 : ＋板最近立ったスレ／記者別一覧] [類似スレッド一覧]


↑キャッシュ検索、類似スレ動作を修正しました、ご迷惑をお掛けしました

1 名前：デフォルトの名無しさん mailto:sage [2021/11/10(水) 15:24:24.80 ID:jxD2VXPG0.net]: JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は 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
231 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:37:14.84 ID:ly/XOtiZ0.net]: classnameでやってみますです
232 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:41:40.78 ID:ly/XOtiZ0.net]: >>224
そうやって書けるんすね
html collectionの構造がよくわからんくて
233 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:48:14.75 ID:ly/XOtiZ0.net]: >>224
いや、これだめでしたね
nodelistは帰ってきますけど、h2はとれてないです
234 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:55:36.78 ID:fLniY7PXM.net]: 全てconstでOK
235 名前：デフォルトの名無しさん [2022/01/08(土) 07:52:36.25 ID:GNp2CfCTd.net]: Android10 F-51A
Chrome 93.0.4577.62

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

考えられる原因、解決案は、例えば何があるでしょうか。
絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。
236 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 09:00:28.06 ID:5hFueUuG0.net]: >>229
最初の一個だけでいいなら
let all_element = document.querySelector(".content h2")
237 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 09:52:41.58 ID:UKENl29p0.net]: >>231
情報が少なすぎて詰めきれません。もう少し詳細な情報を提供できませんか？
（まず、JavaScriptはどのように使用していますか？）
238 名前：デフォルトの名無しさん [2022/01/08(土) 10:15:27.19 ID:GNp2CfCTd.net]: >>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
239 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 14:43:01.70 ID:ly/XOtiZ0.net]: >>232
どうも。今回はindex使うことにしてみます。
240 名前：231 [2022/01/08(土) 17:15:55.99 ID:GNp2CfCTd.net]: 可能な限り絞り込み？　ました。

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

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

よろしくお願いいたします。
241 名前：231 [2022/01/08(土) 17:19:01.00 ID:GNp2CfCTd.net]: <! 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>
242 名前：231 [2022/01/08(土) 17:22:09.26 ID:GNp2CfCTd.net]: ごめんなさい、貼り付けるの無理でした。
243 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 17:26:57.57 ID:c2V21ewI0.net]: >>236
サーバーに画像アップロードしないとだめですよ？
244 名前：231 [2022/01/08(土) 17:42:45.65 ID:GNp2CfCTd.net]: https://www.axfc.net/u/4048256
245 名前：231 [2022/01/08(土) 17:44:17.60 ID:GNp2CfCTd.net]: 斧を使わせて貰いました。
よろしくお願いします。
246 名前：231 [2022/01/08(土) 17:44:45.13 ID:GNp2CfCTd.net]: >>239
もちろん承知しています。
それで試しても駄目でした。
247 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 18:53:38.87 ID:c2V21ewI0.net]: >>242
>>234のalertに表示されてるアドレスNot Foundだけど？
248 名前：231 [2022/01/08(土) 19:05:34.21 ID:GNp2CfCTd.net]: >>243
この文章って、そういう意味なのですか？
てっきり、アクセスは出来てるという意味だと勘違いしていました。
勉強不足で申し訳ありません。

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

https://i.imgur.com/7tRCd4P.jpg
https://i.imgur.com/AM1zYbJ.jpg
https://i.imgur.com/Egje64L.jpg
249 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 19:12:51.05 ID:c2V21ewI0.net]: >>244
頭のpが大文字じゃないですか…
250 名前：231 [2022/01/08(土) 19:26:33.45 ID:GNp2CfCTd.net]: >>245
ありがとうございました。

私が馬鹿すぎました。
ネタでやってたんじゃないです。ガチです。お騒がせしました。本当にありがとうございました。
251 名前：231 [2022/01/08(土) 19:30:48.95 ID:GNp2CfCTd.net]: >>24
252 名前：5 報告までに。 一応確認したところ、無事成功しました。 ありがとうございました。 []: [ここ壊れてます]
253 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 20:24:29.61 ID:70jc3KgD0.net]: ドンマイ
254 名前：デフォルトの名無しさん mailto:sage [2022/01/08(土) 20:40:02.49 ID:6njacc4u0.net]: わりとやらかすミスだからしゃーない
255 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 01:12:15.51 ID:lzN+drLE0.net]: >>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制作管理板の方で聞いた方がよい。
向こうのスレが、本スレだから
256 名前：デフォルトの名無しさん [2022/01/09(日) 01:27:51.26 ID:wKoMs7Y50.net]: そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。
基本的に、ソースコードを書かない香具師は荒らし

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

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

荒らしは必ず、短文で2回以上書き込む。
必ず、複数人がいるように見せかける
257 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 02:26:51.89 ID:WLNeqQAW0.net]: >>251
統合失調症ですか？
258 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 10:47:02.34 ID:94EdrQaq0.net]: >>250
「本スレはない」といっても伝わってなかったんだな >>213
Web制作板のスレは長らく次スレが立ってない
複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ
利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない
繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している
Web制作板のスレを追いかけてきたなら知ってるはずなんだがな
259 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 10:50:05.66 ID:zqBk0tn4M.net]: >>250
本気で誘導したいならリンクを貼りましょう
260 名前：231 [2022/01/09(日) 11:32:48.03 ID:8qT6W49sd.net]: 昨日はお世話になりました。
二日連続になって申し訳ないのですが、質問させていただきます。

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

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

ちなみに、配列、オブジェクト型データです。
261 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 11:40:12.10 ID:81xkTGx10.net]: >>255
文字数というより、localStorageのデータ保存量の上限は基本5MBで
ブラウザや個人設定によって変わってくる
www.htmq.com/webstorage/
262 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 11:47:21.66 ID:Km6Rc4Yy0.net]: >>255
エラーとは？そこを詳しく説明して
263 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 11:51:03.02 ID:RPzdd9tK0.net]: 変数や関数名の迷わない命名ルールってありますか？
変数は名詞、関数は動詞とは聞きますね。
264 名前：231 [2022/01/09(日) 11:56:07.27 ID:8qT6W49sd.net]: >>257
DOMEException { stack ～ってエラーです。

https://i.imgur.com/jlBZoNO.jpg
265 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:09:04.30 ID:Km6Rc4Yy0.net]: >>259
exceeded the quota(割当超過)で確定
サイズ減らすかindexedDB使うか
266 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:10:23.57 ID:94EdrQaq0.net]: >>258
言語仕様としては、使用可能文字があるのみで命名規則に縛りはない
ビルトイン関数/プロパティの慣習的にクラスはUpperCamelCase、関数はlow
267 名前：erCamelCaseなので、守るとビルトインのコードと統一性が出来て良いだろう 後は採用しているコーディング規約を守れば良い 例えば、Google JavaScript Style Guide https://google.github.io/styleguide/jsguide.html#naming https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html#va []: [ここ壊れてます]
268 名前：231 [2022/01/09(日) 12:16:18.69 ID:8qT6W49sd.net]: >>260
回答ありがとうございます。
サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。
269 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:39:38.59 ID:RPzdd9tK0.net]: >>261
回答どうも。
規則というか命名ルールみたいなものが知りたいなと。

迷ってる時間が無駄になっているので。
270 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:45:08.85 ID:CpwtZL4w0.net]: すいません、アホな質問かもしれません。
マウスの右ボタンクリックで独自のサブメニューを表示したいと思います。
この場合は JavaScriput が必須で、CSSでは出来ないという理解で良いでしょうか。
271 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 14:49:13.23 ID:MpHyBZWL0.net]: 仕事関係なのと、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++ が少しわかります。
272 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:08:40.66 ID:94EdrQaq0.net]: >>263
ruleは日本語で規則
あなたのいう命名ルールと俺のいう命名規則は同じ
273 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:18:07.99 ID:WLNeqQAW0.net]: 名前なんて違反しなきゃ好きにつけりゃいい
俺は長くなっても意味がわかる命名派
vとかiとか一文字の変数や定数を好む宗教も強い
274 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:28:05.42 ID:94EdrQaq0.net]: >>264
menu要素は非推奨になったし、JavaAcriptしかないのでは
少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う

コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある
ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する
独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ
独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが
275 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:29:28.78 ID:94EdrQaq0.net]: >>268の誤字修正

×　JavaAcriptしかないのでは
○　JavaScriptしかないのでは
276 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:42:44.57 ID:RPzdd9tK0.net]: 適当につけます(´・ω・`)
277 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 16:11:22.92 ID:CpwtZL4w0.net]: >>268
ありがとうございます！
Javascriptを使う必要がある件、了解です。

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

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

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

バックエンド（Django）はなんとか目処が立ちそうです。
いやぁ、本当にWebアプリの世界はすごい（難しくて複雑）と思いました。
おまけに技術の変化が激しそうだし・・・
がんばります！
280 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 18:35:56.14 ID:94EdrQaq0.net]: >>273
クライアント環境を制限できるなら、デファクトスタンダードのGoogle Chromeがお勧め
次点でレンダリングエンジンが同じMS Edge

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

確かに技術の進化はあるが、Web技術は後方互換性重視の設計思想なので、非推奨機能を使わなければ、大半の機能で半永続性が保証されている
HTML3.2は現代のブラウザでも動作するし、ECMAScript3は現役だ
つまり、古いバージョンから新しいバージョンに更新し続ける必要はない
281 名前：ただし、これはWeb標準機能に限定した理屈でブラウザの独自拡張機能は別 その昔、IEのActiveX機能を使用した社内向けWebアプリはIEが終焉を迎えるとともに、他ブラウザへ移行するために改修を余儀なくされた 現在は昔と比べてブラウザの独自拡張機能が少ないが、ないわけでもない Web標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い []: [ここ壊れてます]
282 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 19:24:13.83 ID:oCAuhuCGM.net]: >>265
Uint8Arrayとかそういう話じゃなくて？
283 名前：231 [2022/01/09(日) 19:56:40.79 ID:8qT6W49sd.net]: 昨日から何度も失礼します。

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

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

https://i.imgur.com/DWMPWQ7.jpg
284 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 20:16:29.50 ID:Km6Rc4Yy0.net]: >>276
某所なんてぼかされても何も分からん
スマホだから使えないなんて話は聞いたことがない

https://caniuse.com/indexeddb
285 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 20:32:49.24 ID:d2WOXC3/M.net]: indexeddbは直で扱うのはしんどいからライブラリ使うといい
localstorageの代わりとして使う程度ならlocalforageがおすすめ
286 名前：231 [2022/01/09(日) 20:34:03.26 ID:8qT6W49sd.net]: 確かに質問するのにそこぼかしたら駄目ですよね。すみません。

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

というところです。

vbnettips.blog.shinobi.jp/javascript/javascript%20indexeddb%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%EF%BC%92
287 名前：265 mailto:sage [2022/01/09(日) 20:35:41.88 ID:MpHyBZWL0.net]: >>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] として目的の値が出力出来る所まで辿り着いたのですが、処理としてはチョット恥ずかしい感じがします。
288 名前：265 mailto:sage [2022/01/09(日) 20:38:48.27 ID:MpHyBZWL0.net]: >>280
消しすぎてました。試したのは、

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

です。
289 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 20:56:22.61 ID:94EdrQaq0.net]: >>280
変数commandはString型なので、そこに含まれる値は全てStrong型に変換される

String(10) === "10"

1バイトの文字が必要なら、ASCIIコードの範囲で1文字になるよう調整する必要がある
290 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 21:05:54.69 ID:wEbou60s0.net]: >>265
String.fromCharCode(bcc) ではだめなの？（UTF-16だけど）
291 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 21:57:44.39 ID:MpHyBZWL0.net]: >>282
>>283
有難うございます。
String.fromCharCode(bcc) で目的が達成出来ました。
これで巨大な変換テーブルを人目に晒さずに済みました。
精進いたします。
292 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 22:58:01.81 ID:lzN+drLE0.net]: >>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
293 名前：デフォルトの名無しさん mailto:sage [2022/01/09(日) 23:10:39.20 ID:WLNeqQAW0.net]: >>285
自演するな
294 名前：デフォルトの名無しさん mailto:sage [2022/01/10(月) 00:49:36.06 ID:iL7OUFIC0.net]: <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のまんまで左スクロールの場合だけ表示されます。
スマホでもスクロール値ちゃんと取得できるようなやり方はありますか？
295 名前：デフォルトの名無しさん mailto:sage [2022/01/10(月) 01:03:26.84 ID:RagYY3R10.net]: >>287
scrollイベントでなく、setIntervalを使う理由が何かある？
scrollしてない時にも常に監視したらバッテリの持ちが悪くなりそうだが
296 名前：231 [2022/01/10(月) 05:44:27.44 ID:GFg5qhLud.net]: >>277
>>278
ありがとうございました。
297 名前：231 [2022/01/10(月) 07:56:10.03 ID:GFg5qhLud.net]: >>277
おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。
トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。

しかし、

https://ideone.com/IKQkII

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

https://i.imgur.com/DWMPWQ7.jpg
298 名前：デフォルトの名無しさん mailto:sage [2022/01/10(月) 09:10:37.59 ID:kImY1hGC0.net]: >>290
idb作るときにkey指定したりした？
結構癖のあるDBよ。
https://qiita.com/butakoma/items/2c1c956b63fcf956a137

localForageとかPouchDB使った方が良いのでは？
299 名前：231 [2022/01/10(月) 09:57:44.78 ID:GFg5qhLud.net]: >>291
このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。
なので多分ミスはないんじゃないかと思うんですが……。

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

それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、
イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。
300 名前：デフォルトの名無しさん mailto:sage [2022/01/10(月) 10:26:53.27 ID:LkWl6bQKM.net]: >>292
そういう事であればPouchDB一択。
サーバと同期してマスタ撒いたりできる。
サーバはIBM CloudantってDBaaSがあるよ。
301 名前：231 [2022/01/10(月) 10:56:29.90 ID:GFg5qhLud.net]: >>293
ありがとうございます。
こちらも調べてみます。
302 名前：デフォルトの名無しさん [2022/01/10(月) 12:30:07.69 ID:iL7OUFIC0.net]: >>288
１：ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから
２：setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから
３：addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど
setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから
303 名前：231 [2022/01/11(火) 10:20:14.57 ID:xHId70tjd.net]: 連日すみません。

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

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

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

連日すみません。

https://i.imgur.com/5TVe5FC.jpg
https://i.imgur.com/b6Ymtuc.jpg
304 名前：デフォルトの名無しさん mailto:sage [2022/01/11(火) 13:20:29.56 ID:yML4DU0R0.net]: >>287
次のコードを先頭（<head>部）に追加する。
<meta name="viewport" content="user-scalable=no" />

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

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

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

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

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

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

フレームワーク側で自動的にチェックされる機能を、
すべて自分で作らないといけないから
308 名前：デフォルトの名無しさん mailto:sage [2022/01/11(火) 22:54:59.18 ID:1iYs2MCE0.net]: >>299
質問する時は
①やりたい事を明確に書く
②そのために今試している/実装している内容、ソースコードなど
③発生しているエラー等について
の順で書くと良い

ぶっちゃけ何をやろうとしてるのかが全く分からん
画像をIndexedDBに保存したいなら、一回blobに変換しないといかんぞ
https://blog.katsubemakito.net/html5/indexeddb2
309 名前：デフォルトの名無しさん mailto:sage [2022/01/11(火) 22:59:30.93 ID:JNUAUaQda.net]: >>299
IndexedDBでblob保存できるんだから画像が入らない理由はない
そしてHTMLImageElementを丸ごと保管するのは明らかにおかしいし
そこに画像は無いと思うんだが

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
310 名前：231 [2022/01/12(水) 05:59:28.46 ID:cpeqqxS8d.net]: https://4.gigafile.nu/0119-b5bf917d41c34039ed485d68891d082e0

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

紹介されたサイトなど巡って、考えてみようと思います。
311 名前：デフォルトの名無しさん mailto:sage [2022/01/12(水) 09:14:18.07 ID:60+8sbQA0.net]: >>303
>ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
なんかまた妙な事をやろうとしてるな

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

アドバイスありがとうございます。
313 名前：デフォルトの名無しさん mailto:sage [2022/01/12(水) 12:17:05.53 ID:/ZdmJSDda.net]: 単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい
何が目的でそれを使うのかよく考えないと訳わからんコードになる
314 名前：231 [2022/01/13(木) 08:13:45.35 ID:9NWqLsjEd.net]: 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 (localhost:2435/storage/emulated/0/index.html:95:34)↵ at XMLHttpRequest.<anonymous> (localhost:2435/storage/emulated/0/index.html:84:21)" }

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

https://52.gigafile.nu/0120-e68fc48424d65f0f7ae137f3f97cbbc0
315 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 10:49:49.47 ID:BdYH6d7w0.net]: >>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
　puyo.sega.jp/program_2020/
316 名前：231 [2022/01/13(木) 12:01:21.75 ID:2Kp13/God.net]: 動作環境は、Android10 F-51A
Chrome 93.0.4577.62

です。

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

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

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

スレの皆さんを不快にさせてしまい、申し訳ありませんでした。
317 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 12:34:36.45 ID:v0PpJSuUa.net]: やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない

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

こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。
他にやりようある、ありそうってのはわかるんですが、上手く行かないです。
319 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 15:18:53.58 ID:BdYH6d7w0.net]: >>309
こっちも口調が強くなってすまんな
>最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
今やりたい事は
①データをセーブする(localstorageまたIndexedDB）
②①で保存したデータを読み込んで、セーブした時の状態に戻す
っていう事でいいかな？
だとすると、なおさら画像をDB等に保存したい理由が分からない

もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
ロードした時に復元できない、って思ってる？
320 名前：231 [2022/01/13(木) 16:01:24.15 ID:Pj0bwTK9d.net]: >>312
いえ、こちらこそ、気を遣わせて申し訳ありません。

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

そのものズバリでした。
先ほど >>310 さんのレス見て、ん？　とは思ったのですが、
やっぱり画像ってセーブとかロードとかするものじゃないんですね。
321 名前：231 [2022/01/13(木) 16:03:06.44 ID:Pj0bwTK9d.net]: あと、今やりたいことはまさしくそれです。
322 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 16:13:19.06 ID:BdYH6d7w0.net]: >>313
よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな……

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

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

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

泥は4.1の化石でもPCよりずっと早いです
325 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 22:50:17.84 ID:QIlO/ODF0.net]: >>317
Chromeの開発ツールで通信速度・CPU性能を意図的に遅くすることができます。
「Chrome Network Throttling」「Chrome CPU throttling」辺りで情報が出ます。
326 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 23:29:03.91 ID:Ia/gMc7B0.net]: 画像データは、各マス目の画像の番�
327 名前：�ﾌ並びを保存する 例えば、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/ []: [ここ壊れてます]
328 名前：デフォルトの名無しさん mailto:sage [2022/01/14(金) 03:35:28.27 ID:2MXtaXlm0.net]: >>316
頑張れよー
次に来る時は質問の回答者になれる事を祈ってるわ
329 名前：231 [2022/01/15(土) 10:23:00.28 ID:S4wDIFSqd.net]: たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。

【環境】
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 (localhost:2435/storage/emulated/0/index.html:63:22)" }

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

【サンプルコード】
https://jsbin.com/zelonizugu/edit?js
330 名前：デフォルトの名無しさん mailto:sage [2022/01/15(土) 10:52:09.59 ID:nH/3h8nXa.net]: かたくなにライブラリを使おうとしない理由はなに？
それだけ教えて
331 名前：231 [2022/01/15(土) 10:57:45.01 ID:S4wDIFSqd.net]: >>322
気持ち悪いからです。

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

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef