質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

2回答

575閲覧

Wordpressでファイルアップロード可能な掲示板を非同期通信で作成したい

homepage-site

総合スコア26

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2023/11/06 17:14

アドバイス頂きたいこと

最大15MBのファイルアップロード機能を考えているのですが、ローカルストレージのデータ保存可能容量がブラウザにより4MB 以内になる可能性があるため、その他の方法を模索しております。
入力画面から確認画面に行く時にサーバーのセッションに保存する方法も可能ではないかと思ったのですが、何か良い方法はありますでしょうか?アドバイスよろしくお願い致します。

前提

ヤフー知恵袋と同じように非同期通信で画面を切り替えずに入力画面→確認画面→サーバーに送信→コメント、アップロードファイルを表示という形で作成したいと考えております。
JavaScriptで確認画面を出す場合、ローカルストレージなどに保存しないと入力内容が消えるため、アップロードファイルをどう対処すべきか悩んでおります。

参考サイト

https://zenn.dev/tm35/articles/584ece2d771a4b

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2023/11/07 00:30

アップロードしたファイルをローカルに保存しておきたい、ということでしょうか?
homepage-site

2023/11/07 10:31

回答ありがとうございます。 確認画面を出す場合一時ファイル等に保存しても、ユーザーがファイルを消してしまった場合に消えてしまう可能性があるため、一旦サーバー側にファイルとして保存する必要があるようです。 そこで対策の1つとしてローカルに保存する方法を考えております。
Lhankor_Mhy

2023/11/07 11:28

どういうケースを想定してるのか、ちょっとよくわからないですね。
homepage-site

2023/11/07 12:14

回答ありがとうございます。 入力画面→確認画面→サーバーに送信という流れで作成しているのですが、Javascriptで確認画面を表示させる必要があるため、一旦サーバー側にファイルとして保存する方法か、入力画面からの送信時にセッションを使う方法の2択しかないと考えております。 表示と非表示をJavascriptを使い切り替えるデザインで作成しており、その際にアップロードファイルは一時ファイル等に保存する必要があるとアドバイスを頂いたのですが、ユーザーがファイルを消してしまった場合に消えてしまう可能性があると別の方にアドバイスを追加で頂き、アップロードしたファイルをローカルに保存するという方法で結論を出しました。 ※掲示板の詳細について 入力画面の送信ボタンで確認画面を表示させて、入力画面は非表示に↔確認画面の戻るボタンで確認画面を非表示させて、入力画面を表示させる
Lhankor_Mhy

2023/11/07 12:39

なんとなくわかりました
tabuu

2023/11/07 23:34

同一ページ内で入力フォームと入力内容の表示をJavaScriptで切り替えるということでしたら、入力内容は消えないですよ。
homepage-site

2023/11/08 02:07

tabuuさんアドバイスありがとうございます、入力画面と確認画面をJavascriptで表示切り替えする場合、ローカルストレージなどに保存しないと入力内容は消えるというご指摘を頂いたのですが、認識としてはどちらが正しいのでしょうか?
Lhankor_Mhy

2023/11/08 03:02 編集

> 入力画面と確認画面をJavascriptで表示切り替えする場合、ローカルストレージなどに保存しないと入力内容は消えるというご指摘を頂いたのですが、認識としてはどちらが正しいのでしょうか? 横からすみません。 お試しになってはどうですか? サーバ側のコードは必要ないorモックで十分なのですから、クライアント側だけテストコードを書いて消えるかどうか確認すれば分かるのでは。 なんとなくですが、私たちteratailの回答者やそのアドバイスをくれた人たちと、十分な意思疎通ができていないように感じます。この状態で言われたことを試さないまま受け入れて実装の前提にするのは危ういような気がします。
homepage-site

2023/11/09 13:10

アドバイスありがとうございます、申し訳ありません…試してみて分からなかったら質問いたします。
guest

回答2

0

非同期でサーバにファイルを送信してバリデーションし、サーバ側の一時ファイルなどを使いたくないので、確認ダイアログを出してからもう一度クライアント側の同じファイルを送信したいということですね。

その間にユーザがクライアントにあるファイルを消したら再送信できないことをご心配されているとのことですが、それはそれでエラーメッセージをだせばいいと個人的には思いました。

さてご質問の件ですが、ページ移動しないのでしょうから、クライアント側でblobのまま持っておくのではダメですか?

投稿2023/11/07 12:44

編集2023/11/08 03:01
Lhankor_Mhy

総合スコア35740

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

homepage-site

2023/11/07 13:06

アドバイスありがとうございます、確認ダイアログを出したいのではなく、確認画面を用意して誤入力や誹謗中傷を防ぐ目的になります。 一時ファイルを使用した場合でもユーザがファイルを消した場合は使えない為、一旦サーバー側にファイルとして保存する必要があるようです。 blobのまま持っておくという発想はありませんでした、作成してみます。
Lhankor_Mhy

2023/11/07 13:42

なんか伝わってない感がありますね……
Lhankor_Mhy

2023/11/08 03:06

> 一時ファイルを使用した場合でもユーザがファイルを消した場合は使えない為、一旦サーバー側にファイルとして保存する必要がある ここでいう『一時ファイル』とはなんでしょう? 『一旦サーバー側にファイルとして保存』したファイルは、『一時ファイル』とは違うものなんでしょうか? 当方の回答が伝わっているのか不安になっております。わからないところやあいまいな点があれば、コメントでお知らせください。
homepage-site

2023/11/09 13:28

回答ありがとうございます、『一旦サーバー側にファイルとして保存』したものはセッションで入力内容を保持した場合のファイルになります。 『一時ファイル』は blob か IndexedDB でクライアント側で保持するファイルになります。 現在 Lhankor_Mhy さんからアドバイス頂いたように blob を使い作成しているので、分からないことが出てきた場合アドバイスお願い致します。
Lhankor_Mhy

2023/11/10 00:33

『blob か IndexedDB を使用した場合でもユーザがファイルを消した場合は使えない』というのは間違った認識だと思います。ご参考までに。
homepage-site

2023/11/10 15:32

アドバイスありがとうございます、了解いたしました。 Javascript で Blob を使ってコードを考えていきたいのですが、初めて使うためどの項目を実装したほうがよいか分からず迷っております… 関連記事に書いてある機能だけで問題ないでしょうか? ※Blobの項目について https://lab.syncer.jp/Web/JavaScript/Snippet/25/
Lhankor_Mhy

2023/11/11 00:46

そのページの関連記事の項にある5つの記事は、あまり関係のない事柄のように思いますが……
Lhankor_Mhy

2023/11/11 01:32

そのページで言いますと、var fileList = this.files ; だけで十分かと思います。これは File オブジェクト(Blob のサブクラス)のリストです。
Lhankor_Mhy

2023/11/11 13:20

それは全然違うやつですね。 直前の私のコメント読んでいただいてますか?
homepage-site

2023/11/11 17:03

回答ありがとうございます、申し訳ありません… var fileList = this.files ; だけで十分という意味がよくわからず別のワードで検索しておりました。 File オブジェクト(Blob のサブクラス)で検索してみたところ、下記のような参考サイトを見つけたのですが、Blob で値を保持したい場合どうすれば良いのでしょうか…? ※参考サイト https://hakuhin.jp/js/file.html
homepage-site

2023/11/11 17:15

Blob について検索してみたのですが、方法が見当たらずどうしてよいか分からなくなっております… 簡易的なサンプルコード又は参考サイトなど教えて頂けないでしょうか? ※現在のコード https://wandbox.org/permlink/2terZMTshVWBqEkm
Lhankor_Mhy

2023/11/12 13:54

拝見しました。 これ、ユーザーがファイルを削除したときに消えますか? ちゃんと試してないですが、消えないような気がしますが…… どのようにして試されましたか?
homepage-site

2023/11/12 15:57

回答ありがとうございます、説明不足で申し訳ありません… セッションに保持する場合はファイルは消えないようです。 Blob を使う方法が気になった為、別途どのようなコードになるのか考えておりました。
Lhankor_Mhy

2023/11/13 02:06 編集

その後、いろいろ試してみましたが、file オブジェクトのままだとユーザーがファイルを削除した際に壊れてしまうようでしたので、arrayBuffer として取り出しておくのがいいように思いました。 ご提示のコードですと、以下のような感じかと思います。 fileList = await Promise.all(formData.getAll('attach[]').map(file => file.arrayBuffer())); なお、セッションに保持する場合、というのはよくわかりませんでした。
homepage-site

2023/11/22 06:52

アドバイスありがとうございます、サーバー側の処理(最初の送信からデータベースやファイルに保存するまで)はセッションで行い、 クライアント側はサーバーからは何も受信せずにクライアント内でメモリ(変数)を使いまわす形で可能ではないかと教えて頂いたのですが、 Lhankor_Mhy さんがおっしゃられている方法はメモリ(変数)に一時的に記憶するということでしょうか?
Lhankor_Mhy

2023/11/22 08:11

すみませんが、おっしゃることがよくわからないです。 > サーバー側の処理(最初の送信からデータベースやファイルに保存するまで)はセッションで行い、 ということであれば、クライアント側で保存する目的は何なのでしょうか。 質問の補足依頼欄で『ユーザーがファイルを消してしまった場合に消えてしまう可能性があるため』とお答えいただいたのですが、この目的ですとサーバ側に登録が終わっているのですから、不要ですよね。 --- > Lhankor_Mhy さんがおっしゃられている方法はメモリ(変数)に一時的に記憶するということでしょうか? そのとおりです。ページを移動したり閉じたりするまではデータが保持されるはずです。
guest

0

バリデートを非同期でおくってエラーがなければ本番送信すればファイルは消えないですよね?

投稿2023/11/07 01:35

yambejp

総合スコア114389

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

homepage-site

2023/11/07 10:42

回答ありがとうございます。非同期通信でアップロードファイルを送信する場合下記の2つがあると考えているのですが、②の方法を選択すべきということでしょうか? 拡張子とMYME_typeをチェックして問題がなければ送信する形で非同期通信を使わずに還移する場合に作成しておりました。 別途お聞きしたいのですが ・IndexedDB を一時ファイルとして代用することは可能だと思われますでしょうか? 数十から数百MB を保存できるようで気になっております。 ①入力画面からの送信時にセッションを使う。 ②入力画面からの送信後に一時ファイルに保存する。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問