ファイルを添付できるフォームのハマりどころ6選
このエントリーは a-blog cms Advent Calendar 2023 2日目の記事です。
昨日の笠谷さんの記事
『フォームのチェックボックスやラジオボタンの項目を編集可能にする』では、
クライアントさんからの要望が多い実装テクニックを初心者向けに丁寧に紹介されていたので、まだみてない方は一読してみてください。
そして引き続き、2日目もフォームについての話題にしてみました。
本記事では、Web制作の仕事をしているとたまーにあるフォームの要望
「メールにファイルを添付できるようにしたい！」
について、基本的な説明は公式ドキュメントに頼りつつ、
ここハマりそうだなというところだけピックアップして書いていきます。
公式ドキュメントについて
基本的な説明は下記公式ドキュメントを参照することをお勧めします。
フォームからのファイルの添付 | フォーム | ドキュメント | a-blog cms developer
公式ドキュメントは以下7つのことを押さえつつ、ソースコード例も載っているのでお勧めです。
添付ファイル付きフォームをまだ作成したことないという方は、 一読しておかないと必ず躓くので必読ドキュメントです。
- メールへの添付の有効化方法
- formタグの書き方
- アップロード許可ファイルの追加方法
- ファイルサイズ上限設定方法
- エラーメッセージの書き方 ←JSでのバリデーションはしていません
- inputの書き方 ←ここ躓きポイント！
- 使用できる変数名
（2023/12/2現在）
添付ファイルフォームのイメージを持って読み進めてください
ということで、ここからはフォームの実装をしたことある、または上記公式ドキュメントを読んでイメージがついている方向けに書いていきます。
しかし、この忙しい師走という月に出した記事で、気軽に他を参照してくださいとは言いにくいので、 とりあえずシンプルに実装した「添付ファイルフォーム」の下記サンプル画像を見て、イメージを膨らませながら読み進めてください。
添付ファイルフォーム
フォームでの添付ファイルについて、ハマりどころを6つピックアップしていきます。
カスタムフィールドメーカーのオプションにファイルサイズ指定がない件
上記の「添付ファイルフォーム」を実装すると想定した時、まずやることは、、、？
そう、カスタムフィールドメーカーでのコード生成ですね。
フォームなので、必須項目にしてみたり、ファイルの添付なので上限サイズのバリデートもしておきたいところです。
ファイルサイズの上限バリデート
しかし、カスタムフィールドメーカーのオプションには上限サイズのバリデートは載っておりません（2023/12/2現在）。
カスタムフィールドメーカーのオプション
じゃあできないのかなと思ってしまうかもしれませんが、
その前に参照したいのが下記2つのドキュメントです。
- フォームオプション | リファレンス | ドキュメント | a-blog cms developer
- フォームからのファイルの添付 | フォーム | ドキュメント | a-blog cms developer
この2つのドキュメントによると下記のように書くことでファイルサイズ上限のバリデーション設定が可能です。
<input type="hidden" name="変数名:v#filesize" value="500" /><!-- KBで指定 -->
※フォームオプションの記事はブックマークしておくと便利です。
確認画面の書き方どうしようかな
フォームからのファイルの添付 | フォーム | ドキュメント | a-blog cms developer の記事を読んだはいいけど、確認画面やメールテキストはどうやって書けばいいのかなと思うかもしれません。
そんな時はこのコードを参考にしてみてください。
確認画面：
<!-- BEGIN_IF [{変数名@path}/nem] -->
<a href="%{HTTP_ARCHIVES_DIR}{変数名@path}" target="_blank" aria-label="添付したファイルを確認ダウンロードする" style="display: none; text-decoration: underline;">{変数名@originalName}（サイズ：{変数名@fileSize}[convert_bytes('k', 2)]KB）</a>
<!-- END_IF -->
メールテキスト：
{変数名@originalName}（サイズ：{変数名@fileSize}[convert_bytes('k', 2)]KB）
心配性の方のために、確認画面でも自分が添付したファイルを再度ダウンロードできるようにリンクもつけてみました。
この時、target="_blank" をつけて、別タブで開くようにしておくとユーザーさんがみやすいです。
また、{変数名@fileSize}はそのまま書くとバイト単位で書かれて桁数が多くなりユーザーさんがびっくりしてしまうので、校正オプションを使って、KBくらいにするとだいたいの事例でちょうどいいくらいになると思います。
確認画面を飛ばす裏技は通用しない
フォームに慣れてくると、フォームのステップ数を増やしたり、確認画面を飛ばしたりなど、少し裏技的なことを試すようになると思います。
しかし、添付ファイルがある場合は、添付ファイルをシステム側で一時的保存/添付/削除の処理が入るので、確認画面は必須となります。
下記ボタンでの画面遷移は送信前に必ず入れる必要があります。 （2023/12/2現在）
<input type="submit" name="ACMS_POST_Form_Confirm" value="内容の確認へ" id="btnConfirm">
ファイル添付は管理者宛メールのみ
管理者宛メールにはファイルの添付をすることができますが、入力した人宛メールに添付をすることはできません。 そもそも添付した本人にファイル送信はしなくていいですね...。
確認と修正の画面を行き来きしてたらファイル名やファイルサイズが出てないことに気づいた
入力フォームに下記hidden要素があるか確認しましょう。
<input type="hidden" name="変数名@originalName" value="{変数名@originalName}" />
<input type="hidden" name="変数名@fileSize" value="{変数名@fileSize}" />
ファイル添付してフォームの確認ボタンを押すと画面が真っ黒または真っ白
DEBUG_MODEが0の場合は、1してエラーを確認します。
「mkdir(): Permission denied in ~~」のような500エラーが出ていた場合は、だいたいarchivesフォルダのパーミッションが強すぎることが原因です。
archives/temp/ に添付ファイルを一時保存するため、システム側でフォルダ内操作が発生するのですが、それができないよと言ってくれています。
フォルダは775くらいで良いでしょう。
使いやつさを目指して
a-blog cms で実装する際にハマりそうかなと思ったところを紹介してみましたが、
ここをクリアすると今度はスタイルや細かい動きの部分を凝りたくなってくるなと思いついてしまったので、
▽ input type=file は CSSで装飾しづらい。
input type=file は CSSでのスタイル調整可能範囲が狭いです。
そしてユーザーが操作する部分であるためアクセシビリティを担保しながらの装飾は、JSでのボタン対応か、あまり普段使わない擬似要素での対応などが求められます。
▽ JSバリデータを使用して必須バリデートをするには自前で書かないといけない（はず...）
デフォルトの組み込みJSだけのバリデーション機能はついていない（はず...）です。
.validator-result- のクラスをchangeイベントあたりでつけたり外したりすれば自前での用意も可能です。
▽ マウスカーソルは pointer に
マウスカーソルは pointer にしておくと視覚的にクリックできることがわかりやすくなります。
最後に
色々と書いてみましたが、近いうち公式ドキュメントの方がもっと詳しく書かれるようになるかもなぁと思いました。
ドキュメント更新しましたら、Xで「更新しました」が流れると思いますので、よければフォローお願いします。
明日の a-blog cms Advent Calendar 2023 3日目は、アップルップル一道さんです！
