[javascript + firebase]のサンプルコードを見つけ難かったのでメモるシリーズ

Firebase Cloud Storage とは

Google Firebase のクラウドにあるストレージです。ユーザーの画像などを保存してWEBサイトから参照できます。どのフォルダをRead, Writeするのか、認証済みユーザーだけWriteできるようにするとか、アクセス権を簡単に設定できます。そのうえ、どれだけのファイル数、ファイル容量を保存しているのか、アクセス回数とか運用もできちゃいます。

このサンプルは

パソコン内の画像ファイルをストレージにアップロードします。次にクラウドストレージ内にある複数の画像ファイルをダウンロードして表示します。

1. パソコン内の画像ファイルを選択して、その画像をCanvasにセットする

hoge.html

<div class="card shadow-sm m-4">
  <div class="card bg-success text-white">
    <h2 class="card-header">アバター画像をアップロード</h2>
  </div>
  <div class="card-body">
    <input type="file" id="selectImageID" accept="image/*" style="padding: 4px;">
    <canvas id="canvas-area"></canvas>
    <div id="OriginalFileUpload"></div>
  </div>
</div>
<div id="imageSelected" style="visibility:hidden;display:block;background-color:#c0c0c0;"></div>

hogehoge.js

// 画像ファイルを読み込む, [selectImageID]ボタンでファイルを選ぶこと[change]ができるようにイベントリスナーを有効にする。
function selectImage() {
  var formFileUp = document.getElementById('selectImageID');
  formFileUp.addEventListener('change', function (e) {
    e.preventDefault();  // ページ遷移をキャンセル
    var fileObj = e.target.files; // ←ここで画像ファイルを取得する

    // （検査）WEBブラウザが File API に対応しているか確認
    if(window.File && window.FileReader && window.FileList && window.Blob) {
      //console.log('大丈夫、File API対応のブラウザだよ');
    } else {
      file.style.display = 'none';
      result.innerHTML = 'ファイルを選択できるWEBブラウザを利用ください（このブラウザはFile API非対応）';
      return;
    }
    if(!fileObj[0].type.match('image.*')) { alert('有効な画像ではありません'); return; }
    if(fileObj[0].size > 1000000) { alert('1MB未満のファイルのみアップロード可能です'); return; }
    var reader = new FileReader();
    // ファイルを読込実行
    reader.readAsDataURL(fileObj[0]);

    // ファイルを読み終わったら↓を実行する
    reader.onload = function() { 
      var img = document.createElement('img');
      img.src = reader.result;
      img.onload = function() {
        document.getElementById('imageSelected').appendChild(img);
      }

      var canvas = document.getElementById('canvas-area');
      var context = canvas.getContext('2d'); // 描画を有効にする
      canvas.width = 80;
      canvas.height = 80;
      canvas.style.backgroundColor = "rgba(255,255,255,0)";
      var imgResize = new Image();
      imgResize.src = img.src;
      //画像をオブジェクトに取り込んだら、画像を80x80にリサイズして表示する;
      imgResize.onload = function() {
        context.drawImage(imgResize,0,0,imgResize.width,imgResize.height,0,0,80,80*imgResize.height/imgResize.width);
        var strHTML = '<p><input class="btn btn-success" id="btnAvaUp" type="button" value="この画像をアップロードする" onClick="AvaterUpload()"></p>'
          + '<div id="GoTop"></div>';
        document.getElementById('OriginalFileUpload').insertAdjacentHTML('afterbegin', strHTML);
      }
    }
  });
}

2. ファイルをアップロードする

これはCanvasにセットした画像ファイルをストレージに保存（アップロード）するサンプル。

hogehoge.js

// アバター画像をFireStoreへアップロードする（2021/May）
function AvaterUpload() {
  var storageRef = firebase.storage().ref();            // アップロード先のストレージ
  var canvas = document.getElementById('canvas-area');  // アップロードする画像が保存されたキャンバス
  canvas.toBlob(function(blob) {
    var newImg = new Image();
    newImg.src = URL.createObjectURL(blob);
    var userID = document.forms['MemberUpdate'].elements['userid'].value;

    var uploadTask = storageRef.child('userid/' + userID + '.png').put(blob); // アップロード実行
    uploadTask.on(
      'state_changed',
      (snapshot) => {
        //console.log("snapshot = " + snapshot);
      }, (error) => {
        //console.log("ERROR:" + error.message);
      }, () => {
        uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
          console.log('File uploaded = ' + downloadURL);
          document.forms['MemberUpdate'].elements['imageURL'].value = downloadURL; // アップロードした画像URLをセット
      });
      }
    );
  }, 'image/png');
}

3. ファイルをダウンロードする

これはストレージから複数の画像ファイルを読み込む（ダウンロード）するサンプル。

hoge.html

<body>
  <!-- 読み込んだ画像を挿入する宛先のタグ -->
  <div id="avaRadio"></div>
</body>

hogehoge.js

// ボタン［アバター画像を選ぶ］※一覧を表示して選択する 
function avaterView() {
  document.getElementById('avatarListPath').textContent = "";

  var strHTML = '<table border="0"><tbody><tr><td>';
  strHTML = strHTML + '<div id="img"></div><div id="avaRadio"></div>';
  strHTML = strHTML + '</td></tr></tbody></table>';
  document.getElementById('avatarListPath').insertAdjacentHTML('beforeend', strHTML);

  var storageRef = firebase.storage().ref();
  var listRef = storageRef.child('avaters');

  listRef.listAll().then(function(res){
    res.items.forEach(function(folderRef){
      var avaterImage = storageRef.child(folderRef.fullPath);
      var additionalImage = document.createElement('img');
      avaterImage.getDownloadURL().then(function(url){
        additionalImage.src = url; // アバター画像へのURLパス
        var strAva = '<label>'
          + '<input type="radio" name="imageURL" value="' + additionalImage.src + '" checked="checked">'
          + '<img src="' + additionalImage.src + '" checked="checked">'
          + '</label>';
        document.getElementById('avaRadio').insertAdjacentHTML('beforeend', strAva);
      });
    });
  });
}

戻る

図解で、Google Firebaseが大好き！な理由