すべてのカテゴリ

Vue を使って Firebase ストレージのファイルを表示する前回は Firebase のストレージの特定のフォルダに保存されているファイルの一覧を Vue を利用して表示する方法を紹介しました。この記事では、表示されたファイルの中から選択されたファイルの中身を表示する方法を紹介します。Firebase ストレージのファイルにアクセスするにはFirebase ストレージの機能の一部として、保存されているファイルのリンク（URL）を取得する機能がサポートされています。リンク（URL）がわかると、Javascript の基本機能「fetch()」を使えばファイルの中身を取得することができます。したがって、Firebase ストレージに保存されているファイルの中身を表示するには、以下の手順が必要になります。1. ファイルを選択する2. 選択したファイルのリンク（URL）を取得3. 取得したリンク（URL）を使ってファイルの中身を取得4. 取得したファイルの中身を表示の四つのステップです。ファイルを選択するには？いろいろなやり方がありますが、クリックされた場合の処理を行う関数に、「file」を渡してしまうのが簡単な方法です。前回の「src/views/HomeView.vue」に記述の追加を行います。<template>  <div>    <h1>HTML view</h1>    <div class="file-list">      <ul v-for="file in list.files" :key="f