Firebase Resize Images拡張機能をインストールし、Nuxt.jsでリサイズした画像を出し分けて表示する方法を紹介します。
Firebase Resize Imagesのインストール・構成
Firebaseのコンソールから「Extensions」を選択します。拡張機能一覧から「Resize Images」のインストールを押下します。
有効なAPIを確認して次へを押下します。
アクセス権を確認して次へを押下します。
次にResize Imagesの構成を行います。
- Cloud Functions location : Resize Images拡張機能をどこにデプロイするか選択します。インストール後は再構成できないので注意しましょう。
- Cloud Storage bucket for images : アップロードするCloud Storageバケットを入力します。デフォルトはFirebaseコンソール時のプロジェクトになります。
- Size of resized images : リサイズする画像のサイズを選択します。カンマ区切りで複数選択可能です。
- Deletion of original file : アップロードするオリジナル画像を削除するかどう選択します。
- Cloud Storage path for resized images : リサイズ画像を格納するディレクトリ名を入力します。
- Cache-Control header for resized images : Cache-Controlにリサイズ画像を上書きするかどうか入力します。上書きまたは追加しない場合は、このフィールドを空のままにします。参考：Cache-Control – HTTP
入力が完了したら「拡張機能をインストール」を押下します。
インストール完了まで少し時間がかかるので、しばし待っていましょう。
画像をアップロードし、リサイズ画像が生成されているか確認
実際に画像をアップロードして、リサイズ画像が生成されるか確認します。画像アップロードが完了すると、アップロード画像のディレクトリにresized_imagesフォルダが生成されています。
中を確認すると、構成時に指定したリサイズ画像が生成されていることが確認できます。
Nuxt.jsでリサイズ画像の表示出し分け
Resize Imagesで生成したリサイズ画像をオリジナル画像から状況に応じて出し分けるように実装していきます。オリジナル画像はDBに保存した前提です。
リサイズ画像の読み込み処理フィルターをグローバル化にすることでどこでも呼び出し可能な状態にします。
・plugins/resize.js
1 2 3 4 5 6 | import Vue from 'vue' // img:画像URL name:画像ファイル名 heightSize:指定の縦サイズ widthSize:指定の横サイズ Vue.filter('resize', function (img, name, heightSize, widthSize) { return img.replace(new RegExp(name + '.png' + '(.*?)', 'g'), 'resized_images%2F' + name + '_' + heightSize + 'x' + widthSize + '.png') }) |
リサイズ画像が存在しない場合も考え、存在しない場合はオリジナル画像を出すように実装します。
PromiseベースのImage().onloadで指定リサイズ画像URLが有効かを判定し、有効であればリサイズ画像を表示、無効であればオリジナル画像を表示するようにしています。
・components/icon.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <template> <div :style="'background-image: url('+ iconImage +')'"/> </template> <script> export default { name: 'Icon', props: { src: { type: String, required: true }, resizedSrc: { type: String, default: '', required: false } }, data () { return { iconImage: '' } }, mounted () { // 有効の場合はリサイズ画像、無効の場合はオリジナル画像 setTimeout(() => { this.loadImage(this.resizedSrc).then((res) => { this.iconImage = res.src }).catch((e) => { this.iconImage = this.src }) }) }, methods: { // リサイズ画像URLが有効かどうか判定 loadImage (src) { return new Promise((resolve, reject) => { const img = new Image() img.onload = () => resolve(img) img.onerror = e => reject(e) img.src = src }) } } } </script> |
こんな感じで呼び出せば、リサイズ画像の出し分けが可能となります。
1 2 3 4 | <Icon :src="src" :resized-src="src | resize('profile', 150, 150)" /> |
以上、Firebase Resize Images拡張機能のインストール方法とNuxt.jsでリサイズした画像を出し分けて表示する方法でした。