minari515 commented 8 months ago

どうする？これ

普通に全員分の動画×卒業生10人てなるとデータ量は膨大になるから，www2に全部おいていいものか…という思いはある

www3はnginxだから別途調べる必要がある部分もありつつ，storageだとその辺は気にしなくていいかなっていうメリットを感じているところ storageでいくなら明日（29日月曜）にでもその辺をやっちゃいたいかなと

tagahei commented 8 months ago

WorkChatで話したけど一応残しとく

www2

メリット
- もう出来とる簡単
デメリット
- 容量不安

www3

メリット
- www2みたいに容量そんなに意識しなくていい
テメリット
- 将来的に容量がこわい
- えんじんえっくす？

Storage

メリット
- 周りの学生への配慮の容量は意識しなくていい
デメリット
- 処理めんどい？一応アルバムメーカーではやっとる
- 10年後も動くかな

minari515 commented 8 months ago

storageでいこう！！！！！！

minari515 commented 8 months ago

なんだよこのえらー

minari515 commented 8 months ago

import関係がなんかうまく行かなかったりもする <script type="module" src="./Reader.js"></script> このタイプ指定を行ってインポートで怒られなくなったら次は上に貼ったエラーが出たよ

minari515 commented 8 months ago

現状共有するぞ

これがindex.htmlの発火部分

ここでReader.jsでインポートしてる

``` import { firebase } from "./firebase/app"; const firebaseConfig = { apiKey: "×", authDomain: "×", projectId: "×", storageBucket: "×", messagingSenderId: "×", appId: "×", measurementId: "×" }; firebase.initializeApp(firebaseConfig); const storage = firebase.storage(); ```

この二つで動くと思うんだけど全然ダメなのでたすけてほしいのである

tagahei commented 8 months ago

サンプル　なんでタイプスクリプトなんじゃろ

https://github.com/firebase/quickstart-js/tree/master/storage

とりあえず，そもそものfirabaseのinportができてない？

minari515 commented 8 months ago

この機能はなに

minari515 commented 8 months ago

普通にこめんとかこれ

tagahei commented 8 months ago

やったこと Firebase を JavaScript プロジェクトに追加するの中のステップ2のESM を使用していて、ブラウザモジュールを使用する場合を参考にした

htmlでやってたことをコメントアウト

    <!-- Firebase JavaScript SDKの追加 -->
    <!-- <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-storage.js"></script> -->

下記のようにimport

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
import { getStorage } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-storage.js";

tagahei commented 8 months ago

ブラウザモジュールは手軽な方法ですが、本番環境ではモジュールバンドルを使用することをおすすめします。

ってかいてあるんよなぁ．．．でも正解が分からんなぁ...

npm install firebaseで入れたfirebaseを参照するのが正解だけど，そうじゃなくて，Web上に用意してあるfirebaseを参照しとるってことだと思うんやけど．．．どうやってnodeのモジュール入れるんかわからん

minari515 commented 8 months ago

結構真面目なはなし、フレームワークを使わないバニラJSがひさびさすぎてインポートとかが全然わかってない感じなの辛い

minari515 commented 8 months ago

こうへいがやったやつをデプロイして実行したら結局CORSエラーが出た．一応乗り越えられたから何をしたのかメモメモ

実行したのは以下

1．gsutil のインストール

windowsでのpowershellで以下のコマンドを実行

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:Temp\GoogleCloudSDKInstaller.exe")

& $env:Temp\GoogleCloudSDKInstaller.exe

この後，わんちゃんログインが発生するかもなのでそれもやる

2．CORS.jsonをプロジェクトのディレクトリ直下に作成

今回は認証のために全部通した

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

3．CORS.jsonを配置したディレクトリで以下のコマンドを実行自身のstorageのURLを取得してきて，そこのアクセスにおけるCORSを認証する感じかなと

gsutil cors get gs://************.appspot.com

sabomate / AR-video_viewer

Storageから動画取得して再生 #5

storageでいこう！！！！！！