イラストレーター兼作曲家のサイト

Linux(Zorin OS)、XAMPP環境で動画ファイルをアップロードする機能を実装する際躓いた件

 
記事のアイキャッチ
本サイトにはプロモーションを含みます
この記事を書いている人 - WRITER -

 

どうも、しんさんわーくすです。

現在、WEBアプリを個人の活動として開発しています。

アプリの中に動画ファイルをサーバにアップロードするという機能があるのですが、
こちらの機能を実装する際に躓いてしまいました。

かなり初歩的なことが原因だったのですが、
意外と躓きやすいところだよなと思ったので備忘録的に
ブログに残しておきたいと思います。

制作しているアプリの詳細については、後日また改めてブログで紹介できればと思います。

WEBアプリの制作環境について

 

制作環境は人それぞれかと思いますので、
今回の私の事例が参考になる人もならない人もいるかと思います。

なのでまずは、前提となる私の環境について書いておきます。

OS Zorin OS(Linux)

ローカルで制作(XAMMPを導入)

Zorin OSでのXAMMPの導入方法ですが、
こちらの記事を参考にさせていただきました!

https://lifeanddigital.net/ubuntu-desktop/ubuntu-desktop-xampp/

記事はUbuntu向けの内容ですが、Zorin OSでもインストール、使用できています。

Zonrin OSでの制作とあまりないであろうケースですし、
そもそもLInux使っいてる方であれば私より全然詳しいと思いますので、
今回の記事が参考になるかは怪しいところですが(笑)

いちおうUbuntuのデスクトップで制作されている方にも、
参考程度にはなるかなというとこで書いていきます。

 

結論:PHPの設定ファイルでファイルのアップロード可能な最大サイズが制限されていたため

 

先に結論を書いてしまうとめちゃくちゃ初歩的なことでお恥ずかしいのですが、
ファイルのアップロード可能な最大サイズを超過した動画ファイルをアップロードしようとしていたため。

次からは、ことの経緯を記載していきますので、
今回の問題を解消した方法だけ知りたいという方は、

こちらからスキップしてお読みください。

 

経緯:なぜかアップロードできる動画ファイルとできない動画ファイルがある

 

制作しているWEBアプリには、ユーザーのみなさまに動画をアップロードしてもらい、
サーバー側で動画ファイルをエエ感じに弄くる
という工程があります。

この際にプログレスバーを表示させて、処理が完了したら

「アップロード成功しました!」

みたいなメッセージを表示させたいなということで、

プログレスバーやメッセージの表示部分に関しては、
Javascriptで

サーバー側のエエ感じの加工についてはPHPでプログラムを書いていました。

最初は、動画ファイルをZorin OSのPCになくて、持ってくるのが面倒だったので、
デスクトップに転がっていたJPEGファイルを使用してアップロード機能を作っていました。

JPEGでのテストがうまく行ったので、いよいよ重い腰を上げて動画ファイルを持ってきました。

動画ファイルは、40分くらいの再生時間のVALORANTのプレイ動画です。
(たまにVALORANTをやってます)

しかし、動画のアップロードができない!

焦った私は次のことを試しました。

別の動画をアップロード

 

私がフリーBGMとして公開している曲があるのですが、
こちらの試聴用動画(1分未満の短い動画)を試しにアップロードしてみました。
(WEB制作の記事を書いてしますが、メインはイラスト制作と作曲の活動をしています。)

【BGM素材】毎日がワンダーランド

そしたら、アップロードが成功してしまいます。

なんでやねぇんっ!!!

深夜の開発で疲れた頭で考え出した仮説が、

VALORANTの動画ファイルはサイズが大きいので、
アップロードまでに時間がかかり、
動画を処理するPHPでのアップロードファイルの存在を確認する処理が先に走ってしまっているため、
アップロード動画がない判定になり、Falseを返している。

というものです。

今冷静に振り返るとそんなことないよなぁ
って思えるのですが

焦っていたのもありこんな仮説を立ててしまいました。

これが、沼への入口です。

試したこと1:アップロードに時間がかかるなら何度も判定すればいいじゃない

 

それで最初に試したのが、動画のアップロードを確認できるまで、
判定の処理をループさせるという方法です。

これは、ご想像の通り無限ループになり失敗になってしまいました。

あれこれループ処理を試しているうちに小一時間経ってしまいます。

流石にアップロードに時間がかかっている説はないよなと冷静になった所で
あることを思いだしました。

そういえば、このブログ(WordPress)で音声ファイルを配布する際に、
ファイルサイズが多すぎてPHPの設定ファイルを弄ったことがあったな、と

試したこと2:PHPの設定ファイルを編集

ここからが解決編になります。

私の場合は、PHPの設定ファイル「php.ini」を編集することで解決しました。

まず、私の環境では「php.ini」は、

/opt/lamp/etc/php.ini

にありました。

そして、

post_max_sizeを確認

→40Mになってました(笑)

そりゃうまくいくわけないよね〜

ということで試しに5Gくらいに変更。

これで上手く行かなかったら、諦めて寝るわ。

 

変更後したところ、またもや失敗。

なんでやんね!

悔しいので調べたところ、

upload_max_filesize

も失敗の原因になりがちだそう。

ということで、こちらを変更したところ
無事アップロードに成功しました!

こちらの記事が大変参考になりしました!

https://qiita.com/jkr_2255/items/188200cafb869ca9c622

私の場合は、第三の壁で解決できました。

結局、ループ処理は必要なかったです。
そりゃそうか笑

まとめ

 

今回は、Zorin OS、XAMMPでのWEBアプリ開発中に
躓いた箇所と対処方法について書いてきました。

初歩的なところで大変お恥ずかしい限りですが、
笑い話と誰かの参考程度になればと思いブログにしました。

学びが多いのは、初心者の特権でもあるので、
また躓いた点や調べた内容で共有できそうなことが出てきたら、
ブログにかければと思います!

それでは、最後までお読みいただきありがとうございました!

この記事を書いている人 - WRITER -

Copyright© 深山は美山 , 2024 All Rights Reserved.