CodeIgniterで画像アップロードを完全攻略！初心者向けストレージ管理ガイド

CodeIgniterで画像アップロードを実装する方法

先生と生徒の会話形式で理解しよう

生徒

「自分のWebサイトに、ユーザーが写真を投稿できる機能を付けたいんです。CodeIgniterを使えば簡単にできますか？」

先生

「もちろんです！CodeIgniterには、ファイルをサーバーに保存するための便利な仕組みが最初から備わっていますよ。」

生徒

「プログラミングが初めてで、ファイルをどこに置けばいいのかも分からないのですが……。」

先生

「大丈夫です。まずは基本の仕組みから、一歩ずつ一緒に進めていきましょう！」

1. 画像アップロードとストレージ管理の基本を知ろう

Webサイトで「画像をアップロードする」とは、あなたのパソコンやスマホの中にある画像データを、インターネット上の「サーバー」という大きなコンピュータにコピーすることを指します。このコピーされた画像が保存される場所を「ストレージ」と呼びます。CodeIgniter（コードイグナイター）は、PHPというプログラミング言語で作られた「フレームワーク」で、この複雑なファイルのやり取りを非常にシンプルに記述できるように設計されています。

初心者の方向けに例えると、アップロードは「郵便局（プログラム）」を通じて「倉庫（ストレージ）」に「荷物（画像）」を届ける作業のようなものです。この章では、その荷物を受け取り、正しく整理整頓して保管する手順を詳しく解説していきます。

2. 画像を選ぶための「HTMLフォーム」を作ってみよう

まずは、ユーザーが自分のパソコンから画像ファイルを選択するための「入り口」を作る必要があります。これをHTMLの「フォーム」と呼びます。通常の文字入力と違い、ファイルを送る場合は、特別な設定が必要になります。具体的には、enctype="multipart/form-data"というおまじないを記述します。これがないと、ファイルの中身がサーバーに届きません。

以下のコードは、画像を選択して「アップロード」ボタンを押すためのもっとも基本的なHTMLの書き方です。これを「View（ビュー）」という、画面表示を担当するファイルに記述します。


<!-- 画像を送るための特別な設定が付いたフォーム -->
<form action="/upload/do_upload" method="post" enctype="multipart/form-data">
    <p>好きな画像を選んでね！</p>
    <input type="file" name="userfile" size="20">
    <br><br>
    <button type="submit" class="btn btn-primary">アップロード開始</button>
</form>

3. アップロードされたファイルを受け取る「コントローラー」の準備

次に、送られてきた画像を処理する「司令塔」の役割をする「コントローラー」を作ります。CodeIgniter 4では、$this->request->getFile()という命令を使うことで、送られてきたファイルを簡単に捕まえることができます。ここで大切なのは、ファイルが本当に届いているか、エラーが起きていないかを確認することです。これを「バリデーション（検証）」と呼びます。

たとえば、「画像以外のファイル（WordやExcelなど）が送られてこないか」「ファイルが重すぎてサーバーがパンクしないか」といったことをチェックします。初心者のうちは難しく感じるかもしれませんが、まずは「正しく届いたか確認する」という意識を持つだけで十分です。

4. ファイルをサーバーに保存する実践コード

それでは、実際に画像を受け取って「uploads」という名前のフォルダに保存するプログラムを書いてみましょう。このプログラムでは、ファイルにランダムな名前をつけて保存する手法をとります。なぜなら、同じ「image.jpg」という名前のファイルを別々の人がアップロードしたときに、上書きされて消えてしまうのを防ぐためです。これを「名前の競合回避」と言います。


public function do_upload()
{
    // 送られてきたファイルを取得する
    $img = $this->request->getFile('userfile');

    // ファイルが有効で、まだ移動されていないかチェック
    if ($img->isValid() && ! $img->hasMoved()) {
        // ランダムな名前を作って「uploads」フォルダに保存する
        $newName = $img->getRandomName();
        $img->move(WRITEPATH . 'uploads', $newName);

        echo "おめでとうございます！アップロード成功です。";
        echo "新しいファイル名は：" . $newName;
    } else {
        echo "残念ながらアップロードに失敗しました。";
    }
}

上記のコードで使われているWRITEPATHというのは、CodeIgniterが自動で決めてくれる「書き込み可能な場所」を指す特殊なキーワードです。このように、複雑なパス（住所）を覚えなくても書けるのがフレームワークの利点です。

5. ストレージ管理の重要性とフォルダの権限設定

画像を保存する場所を「ストレージ」と呼びますが、ここには注意点があります。それは「権限（パーミッション）」です。パソコンの設定と同じように、サーバー上のフォルダにも「誰が読み書きして良いか」というルールがあります。もしアップロードがうまくいかない場合は、この「書き込み許可」が出ていないことが多いです。

また、保存された画像は、そのままではWebブラウザから見ることができない場所に置かれることもあります。セキュリティのために「誰でも見られる場所」と「システムしか触れない場所」を分けるのが、プロのストレージ管理の第一歩です。CodeIgniterでは、一般的にpublicフォルダの下に画像用のフォルダを作ることで、外部から画像を表示できるようにします。

6. 画像のサイズ制限とファイル形式のチェック

何でもかんでも大きな画像をアップロードされてしまうと、サーバーの容量がすぐにかっぱいになってしまいます。そこで、プログラム側で制限をかけることが重要です。CodeIgniterでは、バリデーションルールを設定することで、「1MB以下のファイルだけ許可する」「jpgとpngだけ許可する」といったルールを簡単に追加できます。

以下は、バリデーション機能を使って、安全に画像を受け取るためのコード例です。これを使うことで、悪意のあるユーザーが危険なファイルを送りつけてくるのを防ぐ、セキュリティ対策にもなります。


$validationRule = [
    'userfile' => [
        'label' => '画像ファイル',
        'rules' => 'uploaded[userfile]'
            . '|is_image[userfile]'
            . '|mime_in[userfile,image/jpg,image/jpeg,image/gif,image/png]'
            . '|max_size[userfile,1024]', // 1024KB (1MB) まで
    ],
];

if (! $this->validate($validationRule)) {
    // ルールに合わない場合はエラーメッセージを出す
    echo "エラー：画像は1MB以下のjpg/png形式で選んでください。";
}

7. アップロードした画像を表示してみよう

保存した画像を表示するには、HTMLの<img>タグを使います。このとき、画像の「保存先パス（住所）」を正しく指定する必要があります。CodeIgniterではbase_url()という便利な命令を使って、自分のサイトのURLを自動で取得できます。これにより、サイトの引っ越しなどをしても画像が表示されなくなる心配がありません。

例えば、public/imagesという場所に保存した場合、以下のように表示させます。パソコンに詳しくない人でも、URLという「インターネット上の住所」を指定しているのだと考えれば分かりやすいはずです。


// 保存された画像の名前が $fileName に入っている場合
echo '<img src="' . base_url('images/' . $fileName) . '" alt="ユーザー画像">';

このように、保存する処理と表示する処理をセットで覚えることで、本格的なSNSのような機能を作ることができるようになります。画像が表示された時の感動は、プログラミング学習において大きなモチベーションになります。

8. データベースにファイル情報を記録する

画像をサーバーに保存するだけでは、誰がどの画像をアップロードしたのか管理できません。そこで、画像の「ファイル名」をデータベースという「台帳」に記録しておきます。こうすることで、後から「佐藤さんが昨日投稿した写真」を瞬時に取り出すことが可能になります。画像そのものをデータベースに入れるのではなく、「画像がどこにあるかという名前（パス）」だけを保存するのが一般的な手法です。

このデータ管理の仕組みを組み合わせることで、プロフィール写真の設定や、商品の画像登録など、さまざまなWebサービスが作れるようになります。CodeIgniterは、このデータベースとの連携も得意としています。

9. 失敗しないためのトラブルシューティング

初心者が画像アップロードで最初につまずくポイントはいくつかあります。まず「ファイルが大きすぎる」ことによるエラーです。これはPHP自体の設定（php.ini）で制限されている場合があります。次に「フォルダが存在しない」ことです。プログラムで指定した場所に、あらかじめフォルダを作成しておく必要があります。そして「スペルミス」です。特にHTMLのname="userfile"と、コントローラーのgetFile('userfile')の名前が一致しているか、指差し確認をするようにしましょう。

こうした小さな間違いを一つずつ解決していくことが、プログラミング上達の近道です。焦らずに、エラーメッセージが出たらそれを翻訳して読んでみましょう。そこには必ず解決のヒントが隠されています。

公的機関での指導実績【CodeIgniterモダン開発実践セミナー】

商用CodeIgniter 4 徹底実践講座：軽量MVCによる高速開発とシステムのモダナイゼーション

#商用設計 #APIアーキテクチャ #市場価値最大化

ハローワーク職業訓練講師の実績を持つプロが監修。商用PHP開発の「現場の作法」を完全伝授。

「極限のパフォーマンス」を実装する。CodeIgniter 4で軽量・高速な商用システムを構築。

本講座では、フレームワークのオーバーヘッドを最小限に抑えた「高レスポンスなWebアプリケーション設計」を学びます。シンプルながら強力なCodeIgniter 4を通じ、既存システムのPHP 8.x対応や、リソース効率を極めたAPI開発など、実務で重宝される最適化技術を習得します。