【Firebase】firebaseでアカウントを作ってチャットするだけのアプリ(1)

研究
OLYMPUS PEN E-PL9 (c)Maya
この記事は約10分で読めます。

この記事は1年前の記事です。当時の情報、理解に基づいておりますのでご留意ください

はじめに

firebaseシリーズに一区切りをつけます。

拙稿のリンク

【Firebase】firebase authでいまいち理解できていなかった認証周りを再確認する(2)
はじめに拙稿の続き。問題はこの後。ログイン済のアカウントが自身の個人情報をアップデートする場合にアカウントの再認証が求められるのだそうです。この辺を対応します。なお利用するソースコードはこちら。対応...
【Firebase】firebase authでいまいち理解できていなかった認証周りを再確認する(1)
はじめに以前かじったfirebaseで、authでのパスワード再設定周りですごく難儀したのでした。復習してみます参考リンク(Expo.ioで試してますけどfirebase hostingに配置するhtmlか...
mayarin/firebase-sample
Contribute to mayarin/firebase-sample development by creating an account on GitHub.

この後の実装予定と、それを満たす為に使うサービス

  • 自身のプロフィールの画像を追加 → Cloud Storage(この記事で紹介します)
  • リアルタイムチャット → Cloud Firestore(次の記事にまたがります)

実装を行います

まずCloud Storageを準備します。

ロケーションを設定。

次にアップロードする実装を入れます。

こんな感じにしました。

ここで一旦公式を参照し、Storageへアップロードさせる実装を入れます。

Upload files with Cloud Storage on Web  |  Firebase

あぁそうでした。利用するjs群に以下を追加します。

<script src="/__/firebase/7.22.0/firebase-storage.js"></script>

以下の実装にて画像が反映されるのを確認しました。
なおCSSなどはgitにて確認ください。

// プロフィール更新
document.querySelector("#update_form").addEventListener("submit", function(event) {
  if(confirm('プロフィールを更新します。よろしいですか?')){
    document.querySelector('#update_form button').setAttribute('disabled', true);
    document.querySelector('#update_form button').innerText = '反映中...';

    var user = firebase.auth().currentUser;
    var photoURLElement = getElemID('update_picture').files;

    // 先に画像がアップロードされているかを判別
    if(photoURLElement.length > 0){
      // 画像がある場合は画像をアップロードしてから user.updateProfile を発火させる
      console.log(photoURLElement.length);
      for(var i=0;i<photoURLElement.length;i++){
        var file = photoURLElement[i];
          var userName = user.uid+'_'+file.name;
          console.log(userName);
          var storageRef = firebase.storage().ref(userName);
          var uploadTask = storageRef.put(file);
          uploadTask.on('state_changed', function(snapshot){
            // Observe state change events such as progress, pause, and resume
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            var progress = Math.ceil((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
            document.querySelector('#update_form button').innerText = '反映中...'+progress+'%';

            switch (snapshot.state) {
              case firebase.storage.TaskState.PAUSED: // or 'paused'
                console.log('Upload is paused');
                break;
              case firebase.storage.TaskState.RUNNING: // or 'running'
                console.log('Upload is running');
                break;
            }
          }, function(error) {
            // Handle unsuccessful uploads
            alert('画像のアップロードに失敗しました。お手数ですが少々時間を置いてから試してください。');
          }, function() {
            // Handle successful uploads on complete
            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
            uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
              console.log('File available at', downloadURL);
              updateProfile(downloadURL);
            });
          });
      }
    } else {
      // 画像がない場合は間髪入れずに user.updateProfile を発火させる
      updateProfile(user.photoURL);
    }
  }
  event.preventDefault();
}, false);

function updateProfile(photoURL){
  var user = firebase.auth().currentUser;
  var displayName = getElementValue('update_displayName');

  user.updateProfile({
    displayName : getElementValue('update_displayName'),
    photoURL : photoURL
  }).then(function() {
    alert('プロフィールを更新しました。');
    location.reload();
  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });

  document.querySelector('#update_form button').removeAttribute('disabled');
  document.querySelector('#update_form button').innerText = '反映';
}
            <form id='update_form'>
              <h2>プロフィール更新</h2>
              <div class="form-group">
                <label for='update_displayName'>ニックネーム</label>
                <input type="text" class="form-control col-4" id='update_displayName' placeholder='ニックネーム...'/>
              </div>
              <div class="form-group">
                <label>プロフィール画像</label>
              </div>
              <div class="form-group">
                <label for='update_picture'><span class='btn btn-primary'>画像を選択...</span>
                  <input type="file" class="form-control col-4 d-none" id='update_picture' placeholder='プロフィール画像...' onchange='previewImage(this)' />
                  <p>
                    Preview:<br>
                    <img id="preview" src="./unnamed.png" class='profile_picture'>
                  </p>
                </label>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type='submit'>反映</button>
              </div>
            </form>

ここまでの実装を確認したところでfirestoreを作ります。

なおfirestore側からUI整えて完成させてから投稿しようと思ったんですが、時間が空きSEO的によろしくないので投稿を分けます…!

To Be Continued …!

参考サイト

https://blog.ver001.com/javascript_preview_canvas/
脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az
class関連のjQueryのメソッドです。以前も一部使いましたが、今回すべてネイティブに書き換えます。詳しくは脱jQueryその1を参照してください。今回の書き換えはIE10以上が対象となります。IE9は利用率も現在は低いためフォローしません。もしIE9もフォローしたいという場合は以下で調べてみて
CSSで長方形の画像を丸く切り抜く方法 - Qiita
Webサービスを作っていると 画像を丸く切り抜きたい時がある。 正方形の画像であれば"Border-radius:50%"で簡単に 丸く出来るのだが長方形の画像で上記のCSSを適用すると楕円形の 画像になってしまう。。。 正方形で...
画像を丸く円形にくり抜いて表示するCSS - スタイルシートTipsふぁくとりー
スタイルシート(CSS)を使って、四角い画像を丸く表示させる書き方を紹介。わざわざ画像を直接加工しなくても、CSSを使うだけで丸く(円形に)表示できます。画像を丸くカットするだけでなく、画像の周囲に丸い枠線を加えて縁取りして表示することもできます。角丸にする際に使うborder-radiusプロパティをベースに書けば簡...
how to upload files to firebase cloud storage using javascript
Firebase Storage is a cloud-based storage that can be used to store files. It is free to use up to 5GB, So exceeding this limit will require an upgrade.

コメント

タイトルとURLをコピーしました