CUBE4.2からFilePondを使うように変わっていたんですが、使い方がさっぱりわからなくてあれこれ勉強したことについて書こうと思います。今回は簡単なHTMLとJSだけで実装する基礎の基礎になります。FilePondとは以下、公式Docsより。uploading.(日本語訳)FilePondは、スムーズなドラッグ&ドロップによるファイルアップロードを実現するJavaScriptライブラリです。https://pqina.nl/filepond/docs/プラグインを導入するだけで、ドラッグ&ドロップによるファイル選択やファイルのプレビューが可能になります。実際に触ってみるそれでは早速ですが、ファイルアップロードフォームを表示するコードを書いていきます。完成すると、こんな画面になります。Browseと書かれたフィールドをクリックすると、Finderのウィンドウが表示されます。ファイルを選択すると、フィールド内にファイル名が書かれたボックスが出てきます。Browseにドラッグ&ドロップすることでもアップロード可能です。以下、上図と同じ画面を表示するサンプルコードです。</body></html>この例でアップロードできるファイルは1つまでです。上から順にコードを詳しく見ていきます。headタグ内のコードです。rel="stylesheet"/>metaタグとtitleタグは、何の変哲もない普通の設定です。お好みで書き換えてください。linkタグでは、FilepondのCSSが使えるようにしています。無くても動かないわけではありませんが、CSSが設定されていないと以下のようにメチャクチャなレイアウトになってしまうので、書いておくほうが無難だと思います。次にbodyダグ内を見ていきます。こちらは、formとscriptで分けて説明します。以下、formタグのコードです。type="submit">submit</button></form>inputタグのtype属性がfileなので、ファイルアップロードフォームを実装しています。submitのボタンを設置していますが、今回の例では送信先を実装しないのでボタンを押しても特に何も起こりません。続いて、scriptタグのコードです。});</script>ここが一番重要です。1つ目のscriptタグで、CDNを使ってFilepondをインストールしています。Network)とは、数多くのキャッシュサーバーなどで構成されたプラットフォームを用いることにより、Webサイト上のコンテンツを迅速にエンドユーザーに届けるための仕組みです。(参照:CDNとは?意味・定義)次に、2つ目のscriptタグの中で、ファイルアップロード時に行うJSでの処理を書いています。以下のコードで、type属性がfileのinputタグ要素を取得しています。document.querySelector('input[type="file"]');その次のコードでFilePond.createという関数が使われています。});この関数は、FilePondオブジェクトのインスタンスを作成するものです。先ほど取得したinputタグ要素が第一引数に渡されています。第二引数は、FilePondに設定したい項目をオプションで追加する際に利用します。今回の例では、storeAsFileがtrueに設定されています。storeAsFiletrueにしておくと、ファイルを隠し、入力要素を保存し、通常のフォームと一緒に投稿可能になる。FilePond.createの詳細な解説は公式ドキュメントを確認してみてください。https://pqina.nl/filepond/docs/api/exports/#createこのようにFilePondオブジェクトのインスタンスを作成することで、フォームがFilePond仕様になります。このコードをコメントアウトしてみると、以下のように普通のファイルアップロードフォームが表示されるようになります。これでコードの解説は以上です。設定項目を増やしてみるここからは、sample1.htmlのコードを改良したものをいくつか紹介していきます。複数のファイルをアップロードできるように改良してみましょう。コードはこんな感じになります。</body></html>ほとんど同じですが、1箇所だけ変更があります。2,});ここですね。FilePondのインスタンスを作るメソッドの、第二引数のオプションが2つほど増えています。allowMultiple複数ファイルの追加を有効または無効にする。trueなら有効、falseなら無効。maxFilesアップロード可能なファイルの最大数。nullの場合は無制限。詳細は以下の公式ドキュメントのページを参照してください。https://pqina.nl/filepond/docs/api/instance/properties/ちなみに、allowMultipleをfalseに変更すると、maxFilesにどんな数字が入っていようと複数アップロードは不可能になります。初期値はfalseなので、もしmaxFilesが2以上なのに複数アップロードが出来ない、といった場合はallowMultipleを設定し忘れていないか確認してください。プラグインで更に設定項目を増やしてみる続いて、プラグインを使った改良を行なってみましょう。以下の2つの機能を追加していきます。アップロードできるファイルタイプの制限アップロード後のファイル名の変更コードはこんな感じです。</body></html>まずはプラグイン追加のコードから見ていきます。Validationプラグインで、誤ったタイプのファイルをブロックする機能です。.pngしかアップロードできないフォームに.htmlのファイルをアップロードしようとしたら、そのファイルをブロックしてアップロードさせません。Renameプラグインで、アップロードされたファイルをFilePondに追加する前にファイル名の変更ができるようになります。sample1.htmlがアップロードされた時、プログラムでsample1_20231025.htmlのように任意の名前に変更することができます。インストールしたプラグインは、以下のコードでFilePondオブジェクトに登録されます。プラグインを登録FilePond.registerPlugin(FilePondPluginFileValidateType);FilePond.registerPlugin(FilePondPluginFileRename);次に、これらのプラグインを実際に使ってる部分を説明していきます。アップロード時のファイル名の変更を設定していきます。以下のコードでは、FilePondのsetOptionsメソッドでオプションの設定を行っています。Renameプラグインのインストールによって利用可能になるプロパティです。このプロパティの値として作成された関数では、引数fileに、アップロードされたファイル情報が渡されます。このfileのプロパティであるextensionは、ファイルの拡張子が格納されており、任意の文字列と繋げることで新しいファイル名を生成しています。これで、ファイルアップロード時に勝手にmy_new_nameという名前に変更してくれるようになりました。続いてアップロード可能なファイルタイプの制限を設定していきます。以下は、FilePondのインスタンスを生成している部分です。],});sample2.htmlのコードから、さらに1つほどオプションが増えています。acceptedFileTypes使用可能なファイルタイプの配列。MIMEタイプかワイルドカードを指定する。Validationプラグインによって追加できるようになる。詳細は以下の公式ドキュメントのページを参照してください。jpegだけを受け付けるように設定している、ということです。上記以外のファイルをアップロードしようとしても、失敗するはずです。最後にFilePond、初めてみた時は「なんじゃこいつ・・」って感じだったんですが、ちゃんと勉強したら意外と難しくなかったです。次回はphpも組み合わせたより実践的なサンプルコードを使って記事にまとめていこうと思います。(サンプルコードまだできてないですが・・)ろみぃ(konatsu)バックエンドエンジニアです。PHP、Ruby、AWSなどの記事を書きます。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussionろみぃ(konatsu)バックエンドエンジニアです。PHP、Ruby、AWSなどの記事を書きます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。