【Laravel】画像アップロード・ログ書き込み・表示・lightbox拡大＆ページネーションのアプリ作成方法

今回はフレームワークLaravelを使って、『画像ファイルをアップロード＆表示・アップされた画像リストのログを書き込む』という機能を作ってみようと思います。今のところ、何のアプリに実装するかは決まっていませんが、いろいろ使う機能だと思います。早速、作成方法を見ていきましょう。

今回のアプリの仕様

いきなりコードを書くというわけでなく、まずは仕様を考えましょう。以下の通り

• viewはimgUploadフォルダにindex.blade.php
• viewでフォームとアップ画像一覧表示
• 画像は一定個数以上でページネーション出力
• 画像保存先はstorage/app/public
• 画像はクリックするとlightboxで拡大
• 画像のリストはデータベースではなく、txtファイルに書く
• ＣＳＳやjsは{{ asset('css/〇〇.css') }}のように読み込む。

なお注意点として『削除ボタン未実装』『シンボリックリンク作成していない』『しかし保存先が/storage/app/public(公開ファイルは通常置かない)』『バリデーション時のメッセージ出力していない』『ファイル情報はデータベースに保存していない』という点があります。今回はテスト的に作ったもので、実際は案件に応じて、上記の項目も適切に設定する必要があるという点は押さえておいてください。

下準備～各種ディレクトリやファイルをコマンドで準備

画像リスト保存用のディレクトリ、テキストファイルを用意する

まず、仕様の『アップした画像のリストをデータベースではなく、任意の場所のtxtファイルに書き込んでいく』というやつです。mkdirコマンドを使って『logs』というディレクトリをstorage/app以下に作成。

アップした画像リストを保存するフォルダが作成されました。

次に、書き込み用の空テキストファイルを用意します。『image_list.txt』という名前で、type nulコマンドで作成しました。めんどくさい方は右クリックで新規ファイル作成してもいです。

空ファイルができました。

artisanコマンドで、アップロード機能のコントローラを作成する

以前作ろうとしたときに、index.blade.phpはつくって放置してたので、コントローラがありませんでした。以下のartisanコマンドで作成します。ファイル名は『ImageUploadController』としましょうか。

うまくいくと、こんな感じで『successfully』ってメッセージが出ます。

空コントローラができました。他のコントローラは以前別の機能を作成したときに使ったものです。

blade.phpから{{ asset('〇〇') }}で読み込むCSS，js

CSS・javascriptも準備します。アップロードページ用cssとlightbox用css。publicディレクトリに入っていて{{ asset('css/lightbox.css') }}のようにblade.phpから呼び出します。

あとは、lightboxのjsと、jQueryのプラグインなんでjQueryも用意しますか。{{ asset('jjs/lightbox.min.js') }}のように呼び出します。

Laravel画像アップロード・ログ書き込み・表示・lightbox拡大＆ページネーションのアプリ、コード例

ルーティング(web.phpでrequireした)

ルーティングのファイルはweb.phpですけど、実際には他のルーティングも書いてごちゃごちゃしてきてたので、別ファイルにしてweb.phpでrequireしています。名前空間インポートとか、『name('img.index');』のように、短い名称で呼び出せるように。昔はフルパスで書いていて長くなっていました(笑)

コントローラー（ImageUploadController.php）

『ルート/app/Http/Controllers』内にあるファイル。メソッドは『index』『store』『readImageList』の３つ。indexはビューを返すほか、ページネーション用のパラメータも渡します。

storeはアップした画像の保存用。ルーティングにあるようにpostメソッドで画像送ったときに実行。バリデーションは『required|file|mimes:jpg,jpeg,png|max:1024』ですが、メッセージは設定していません。storeAsメソッドだとstorageに入るので、他のところに入れたい場合はconfig/filesystems.phpでディスク追加が必要らしいです。

readImageListメソッドは『アップロード時にtxtファイルに書いた内容からリスト作って、フロントに渡す（画像一覧が表示される）』という機能。ビューではこれをforeachで回して画像表示していきます。データベースを使ってもラクかもしれません（涙）

ビュー(resources/views/imgUpload/index.blade.php)

『resources/views/imgUpload/index.blade.php』のファイルです。http://localhost/laravel/public/imgUploadで表示されます（こういう長いurlがイヤな場合はドキュメントルート変更設定をします）。管理人の場合は、ローカルど他にいろいろ組んでたアプリがあって、ドキュメントルート変更すると影響するので、そのままです。

内容的には『assetでcss/js読み込む』『送信先{{ route('img.store') }}のフォーム設置』『返ってきた画像リストをforeachで回す・lightbox用にdata-lightbox="gallery"をつける』『ページネーション』といった感じです。

表示・操作例

ではさっそく動作確認してみますか。 管理人xampp環境で設定されているhttp://localhost/laravel/public/imgUploadにアクセス。アップロード前はこんな感じでフォームだけ。

何枚かアップロードしたところです。フォームの下部分に、アップ済み画像が表示されていきます。

ページネーションも確認してみますか。 ２ページ目に移動。

lightboxの確認もします。 クリックしての拡大もok。

アップロードした画像はstoreAsでpublicを指定したところ『ルート/storage/app/public』以下に保存。

アップした画像のリストは『ルート/storage/app/logs』にテキストデータで。

画像リストの中身はこうなっていますが、データベースにしても使いやすかったかな、という印象です。

あとがき・まとめ

まとめると、こんなところでしょうか。できたはよいですが、『削除ボタン』『バリデーションメッセージ』『公開して見せる画像ならstorage外保存でもよいか』などといった課題もでてきましたので、今度なんか作る場合はこの点を改良していきたいところです。