こんにちは。フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、皆さんは「Webp」（うぇっぴー）という画像形式を聞いたことがあるでしょうか。

Webpとは、グーグルが作った軽量な画像形式のことで、

JPEGと比べると平均30％もファイルサイズが減る

と言われています！

ただ、このWebp、実は2010年にリリースましたが、私も含めてあまり採用している人は見かけませんでした。

なぜなら、

当時はGoogle Chromeだけしか表示できなかったから

です。

そうです。IEは当然として（ゴメンナサイ）、Firefox、Safariでもサポートされていなかったので、「軽いのはわかるけど、表示できないブラウザがあったら、使えないでしょ…💧」となっていました。

しかし、その後状況は一変します。

2019年にFirefoxでサポートされると、2020年にはSafariでも表示が可能になり、さらにその傍らでIEがほぼ消滅＆EdgeがChromiumベースになったことで、2020年12月現在ではなんと主要なブラウザはほぼ全てWebpをサポートしているようになりました。

📝 Webpのサポート状況の確認はこちら（Can I use）

そこで❗

今回は、Laravelからアップロードされた画像をWebpに変換し、Vueコンポーネントで表示するところまで実装してみたいと思います。（なお、表示できない古いブラウザにも対応できるようにします👍）

ぜひ開発の参考になりましたら嬉しいです😊✨
（最後に今回開発したソースコード一式をダウンロードできますよ👍）

「着るコタツ、最高に使えるアイテムでした😊✨」

開発環境： Laravel 8.x、Vue 3、axios 0.19

1 パッケージをインストールする
2 PHPでWebpの操作に必要な要件
3 アップロードするフォルダをつくる
4 ルートをつくる
5 コントローラーをつくる
6 ビューをつくる
- 6.1 ファイルを選択してアップロードする部分
- 6.2 保存した画像を表示する部分
7 テストしてみる
8 ダウンロードする
9 おわりに

パッケージをインストールする

まずはじめに、PHPで簡単に画像を操作できるパッケージ「Invervention」をインストールします。

以下のコマンドを実行してください。

coposer require intervention/image

※ 以前は「config/app.php」に登録をしていましたが、現在は不要になっています。
※ また、composer のバージョン２、早くなりましたね 🏃💨💨💨💨💨

PHPでWebpの操作に必要な要件

Webpの操作をするには、PHPのimagewebp()という関数が必要になりますが、これは以下の要件が必要になりますので注意してください。

GDの場合： PHP 5.5以上
ImageMagic の場合：「libwebp」がコンパイルされている必要があります

アップロードするフォルダをつくる

今回は、アップロードした画像をWebpに変換しますが、IEのようにWebpをサポートしていないブラウザのために、予備のJPEG画像も保存しておくようにします。（自動切り替えできるようにします）

そのため、フォルダは「public/images/upload_images」に加えて、さらに中に２つフォルダを用意します。

※ なお、これらのファルダには書き込み権限をつけるのをわすれないようにしてください。

では、準備ができたので実際のコードを書いていきましょう❗

ルートをつくる

はじめに、ルートを作ります。
以下のコードを追加してください。

routes/web.php

<?php

// 省略

use \App\Http\Controllers\ImageUploadController;

Route::get('image_upload', [ImageUploadController::class, 'create']);
Route::post('image_upload', [ImageUploadController::class, 'store']);

コントローラーをつくる

続いて、コントローラーをつくります。
以下のコマンドを実行してください。

php artisan make:controller ImageUploadController

すると、ファイルが作成されますので、中身を以下のように変更します。

app/Http/Controllers/ImageUploadController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Str;

class ImageUploadController extends Controller
{
    public function create() {

        return view('image_upload.create');

    }

    public function store(Request $request) {

        $request->validate([
            'image' => ['required', 'image']
        ]);

        $result = false;
        $image_urls = [];

        try {

            $image = \Image::make($request->image); // 👈 ここでアップロードされた画像からインスタンスを作ってます
            $filename = 'upload_'. date('YmdHis') .'_'. Str::random(5);
            $image_types = ['jpg', 'webp'];

            foreach ($image_types as $image_type) {

                $upload_path = 'images/upload_images/'. $image_type .'/'. $filename .'.'. $image_type;
                $image_path = public_path($upload_path);
                $image->save($image_path); // 👈 ここで画像を保存してます

                $image_urls[$image_type] = url($upload_path); // 👈 これは return ようのURLです

            }

            $result = true;

        } catch (\Exception $e) {}

        return [
            'result' => $result,
            'image_urls' => $image_urls
        ];

    }
}

この中では、まずcreate()が実際にブラウザからアクセスすることになるメソッドで、ここで画像ファイルを選択することになります。

そして、一番重要なのが、store()です。

この中では、まずバリデーション（ただし今回のは最低限ですので、お好みで変更してください）をしています。

そして、送信データに問題がないことが確認できたら、次に\Image::make()で画像パッケージInterventionのインスタンスを作っています。

あとは、ループを使って必要なjpgとwebp画像を各フォルダに保存しているだけです。

※ なお、画像のサイズ変更などその他の操作は以下のURLを参考にしてみてくだｓだい。

📝 完全網羅！Intervention Image（PHP）で画像を編集する全実例

ビューをつくる

では、最後にビューです。
なお、ビューは説明が複雑にならないように２つに分けてご紹介します。

ファイルを選択してアップロードする部分

まず画像をアップロードする部分をつくります。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="p-4">
    <label class="btn btn-primary">
        画像を選択してアップロード
        <input class="d-none" type="file" accept="image/jpeg,image/png" @change="onFileChange">
    </label>
</div>
<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>

    Vue.createApp({
        methods: {
            onFileChange(e) {

              const files = e.target.files;

              if(files.length > 0) {

                  const file = files[0];
                  const url = '{{ route('upload_image.store') }}';
                  let formData = new FormData();
                  formData.append('image', file);

                  axios.post(url, formData)
                    .then(response => {

                        if(response.data.result === true) {

                            // アップロードが成功

                        }

                    })
                    .catch(error => {

                        console.log(error); // エラーの場合

                    });

              }

            }
        }
    }).mount('#app');

</script>
</body>
</html>

この中でやっているのは、まず<input type="file">にchangeイベントをセットし、ファイルが選択されたら、onFileChange()が実行されるようにしています。

そして、onFileChange()の中では、axiosを使って実際に画像をアップロードしますが、送信データにnew FormData()を使っていることに注意してください。

というのも、通常のやり方ではファイルデータを送信できないからです。

保存した画像を表示する部分

アップロード部分が完了したら、次は表示部分です。

冒頭部分でも書きましたが、現在Webpはほぼ全ての主要なブラウザでサポートされているので、単純に<img src="******">としてもいいのですが、IEなども考慮したい場合もあるかと思いますので、今回は「Webpをサポートしてる／してない」で自動的に切り替える「Vueコンポーネント」を作って表示してみます。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="p-4">

    <!-- 画像入力 -->
    <label class="btn btn-primary">
        画像を選択してアップロード
        <input class="d-none" type="file" accept="image/jpeg,image/png" @change="onFileChange">
    </label>
    <br>

    <!-- ⑤ 画像を表示 -->
    <v-webp
        :src="imageUrls.webp"
        :original-src="imageUrls.jpg">
    </v-webp>

</div>
<script src="https://unpkg.com/vue@3.0.2/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>

    // ① コンポーネントをつくる
    const webpComponent = {
        props: ['src', 'original-src'],
        template: `
            <picture>
                <source :srcset="src" type="image/webp">
                <source :srcset="originalSrc" type="image/jpeg">
                <img :src="originalSrc">
            </picture>
        `
    };

    Vue.createApp({
        // ③ 変数を用意する
        data() {
            return {
                imageUrls: {
                    webp: '',
                    jpg: ''
                }
            }
        },
        methods: {
            onFileChange(e) {

              // 省略

              if(files.length > 0) {

                  // 省略

                  axios.post(url, formData)
                    .then(response => {

                        if(response.data.result === true) {

                            // アップロードが成功
                            this.imageUrls = response.data.image_urls; // ④ 返ってきた画像のURLをセット

                        }

                    })
                    .catch(error => {

                        console.log(error);

                    });

              }

            }
        }
    })
    .component('v-webp', webpComponent) // ② コンポーネントをセットする
    .mount('#app');

</script>
</body>
</html>