CodeIgniterでファイルアップロード付きフォームを作る方法!初心者向け完全解説
生徒
「先生、Webサイトでお問い合わせを受け付けるときに、写真や画像も一緒に送ってもらいたいんです。CodeIgniterというフレームワークを使っているのですが、どうすればいいですか?」
先生
「それは『ファイルアップロード機能』ですね。CodeIgniterには、安全かつ簡単にファイルをサーバーに保存するための仕組みが備わっていますよ。」
生徒
「プログラミング未経験の僕でも、画像を選択して送信するボタンを作れるようになりますか?」
先生
「もちろんです!まずは基本のフォーム作成から、ファイルを受け取る処理まで、一つずつ丁寧に解説していきますね。」
1. ファイルアップロード付きフォームの基本概念
PHPのフレームワークであるCodeIgniter(コードイグナイター)を使って、ユーザーが自分のパソコンやスマホから画像などのファイルを選択し、サーバーへ送信する機能を解説します。まず、Webサイトの裏側では「フォーム」という仕組みが動いています。お問い合わせフォームやアンケートなどで名前を入力する場所のことですね。ここに「ファイルを選択するボタン」を追加することで、画像やPDFを送信できるようになります。
プログラミングにおいて、ファイルを取り扱うのは少し慎重になる必要があります。なぜなら、悪意のあるプログラムを送り込まれる危険があるからです。しかし、CodeIgniterには「Validation(バリデーション)」という、入力されたデータが正しいかどうかを確認する機能が強力に備わっているため、初心者でも安心して開発を進めることができます。まずは、パソコン上の「箱」からサーバーという「別の箱」へファイルを移動させるイメージを持ちましょう。
2. HTMLでアップロード用の入力画面を作ろう
まずは、ユーザーがファイルを選択するための見た目、つまりHTMLを作成します。ここで最も重要なポイントは、formタグにenctype="multipart/form-data"という魔法の言葉を書くことです。これがないと、どれだけ画像を選んでもファイルの情報がサーバーに届きません。これは「テキストだけでなく、大きなファイルデータも送るよ!」という合図になります。
以下のコードは、画像ファイルを選択して「送信」ボタンを押すためのシンプルなHTML構成です。CodeIgniterでは「ビュー(View)」と呼ばれる場所にこのコードを記述します。
<form action="/upload/do_upload" method="post" enctype="multipart/form-data">
<div class="mb-3">
<label for="userfile" class="form-label">画像を選んでください:</label>
<input type="file" name="userfile" id="userfile" class="form-control">
</div>
<button type="submit" class="btn btn-primary">アップロード開始</button>
</form>
ここで出てくるinput type="file"が、あの有名な「ファイルを選択」ボタンを表示させる命令です。name="userfile"という名前は、後でサーバー側でファイルを受け取るときに使う重要な名前(ラベル)になるので覚えておきましょう。
3. コントローラーでの受け取り処理
次に、送られてきたファイルを処理する「コントローラー」を作成します。コントローラーとは、Webサイトの「司令塔」のような存在です。ユーザーがボタンを押したとき、次に何をすべきかを決定します。CodeIgniter 4では、$this->request->getFile()という命令を使うことで、送られてきたファイルを簡単に捕まえることができます。
「ファイルは無事に届いたか?」「エラーは起きていないか?」といったチェックを行い、問題がなければサーバー内の特定のフォルダに保存します。このとき、ファイルに新しい名前をつけて保存することで、同じ名前のファイルが上書きされるのを防ぐことができます。
namespace App\Controllers;
use CodeIgniter\Controller;
class Upload extends Controller {
public function do_upload() {
// 'userfile' という名前で送られたファイルを取得
$img = $this->request->getFile('userfile');
// ファイルが正しくアップロードされたかチェック
if (! $img->hasMoved()) {
// 保存先のフォルダ(writable/uploads/)に移動
$img->move(WRITEPATH . 'uploads');
echo 'ファイルの保存に成功しました!';
} else {
echo 'エラーが発生しました。';
}
}
}
ここで使われているWRITEPATHというのは、CodeIgniterがあらかじめ決めている「書き込み可能なフォルダへの道筋」のことです。初心者の方は「決まった場所に保存するための呪文」だと思って大丈夫です。
4. バリデーションで安全性を高める
ただファイルを保存するだけでは不十分です。例えば、画像を送ってほしいのに巨大な動画ファイルが送られてきたり、ウイルスが含まれる可能性のある実行ファイルが送られてきたりすると困りますよね。そこで使うのが「Validation(バリデーション)」、日本語で言うと「入力値チェック」です。
「ファイルサイズは2MBまで」「種類はJPGかPNGだけ」といったルールを決めます。これにより、サイトの安全性を守り、サーバーの容量が一杯になるのを防ぐことができます。CodeIgniterでは、これらの条件を一行で簡単に書くことができるようになっています。プログラミング未経験の方でも、単語の意味さえわかれば設定は簡単です。
// バリデーションルールの設定例
$rules = [
'userfile' => [
'label' => 'アップロードファイル',
'rules' => 'uploaded[userfile]|max_size[userfile,2048]|ext_in[userfile,png,jpg,jpeg]|is_image[userfile]',
],
];
if (! $this->validate($rules)) {
// ルールに合わない場合の処理
echo 'エラー:画像ファイル(PNG/JPG)を2MB以下で選択してください。';
}
上記のコードにあるmax_size[userfile,2048]は、2048キロバイト(つまり2MB)までの大きさを許可するという意味です。ext_inは拡張子(ファイルの種類)を限定する命令です。
5. アップロードされたファイルを表示する方法
ファイルをサーバーに保存できたら、次はそのファイルが正しくアップロードされたか確認したくなりますよね。保存された画像を表示するには、ブラウザからアクセスできる場所にファイルを置くか、CodeIgniterの機能を使ってファイルを読み出す必要があります。
一般的には、publicフォルダの中に保存用のディレクトリを作る方法が初心者には分かりやすいでしょう。保存したファイル名をデータベースに記録しておけば、後から「あのときアップロードした画像を表示して」と命令することも可能になります。ここでは、保存したファイルの名前を取得して画面に出力する例を見てみましょう。
// 保存された後のファイル情報を取得する
if ($img->isValid() && ! $img->hasMoved()) {
$newName = $img->getRandomName(); // 重複しない名前を自動生成
$img->move('./uploads/', $newName); // 公開フォルダへ移動
echo "保存完了!ファイル名は: " . $newName . " です。";
}
getRandomName()を使うと、例えば「myphoto.jpg」という名前で送られてきても「16482930.jpg」のようなランダムな名前に変えてくれます。これで、同じ名前の画像が送られてきても古い画像が消えてしまう心配がなくなります。これはWebサービスを作る上で非常に大切なテクニックです。
6. よくあるエラーと解決策(トラブルシューティング)
プログラミングをしていると、必ずと言っていいほど「動かない!」という壁にぶつかります。特にファイルアップロードでは、PHP自体の設定(php.ini)が原因であることが多いです。例えば、PHPの標準設定では小さなファイルしか送れないようになっていることがあります。
もし「ファイルが大きすぎます」というエラーが出た場合は、自分のプログラムだけでなく、サーバーの設定も見直す必要があります。また、保存先のフォルダに「書き込み権限(パーミッション)」があるかどうかも重要です。フォルダが「鍵がかかっていて中身を入れられない状態」だと、プログラムは失敗してしまいます。エラーメッセージをよく読み、一つずつ解決していくのが上達への近道です。
まずは小さな画像一枚から試してみましょう。成功したときの喜びは、プログラミングの大きな醍醐味です。CodeIgniterの便利な機能を使いこなして、素敵なWebアプリケーションを作ってみてくださいね。