//tips
美容室に行ってみて話したこと。
・コロナにより、郊外の完全１組予約制の地場密着型美容室の需要増。
→安全配慮の観点から利用客増
・昭和の音楽が若者で流行っているよう
→YouTubeやtiktokなどのSNSやTV番組での紹介が背景
・星のカービィのbgmが海外でバズっている
→mouthful modeのことかも。これはおもしろネタにしやすそう。音楽を著作権フリーにして拡散により、話題性を上げたなどの話ではなかった。
//smart contract
Edit.jsのsetauthHistory(localStorage.getItem('authhistory’))をuseeffectの外に出して動作確認。
ただ外に出すだけにはエラーになってしまう。中に置いたままでauthhistoryを影響させないようにすれば良いか。
Authhistoryの取得を待たずにuseeffectを完結させられるので一度きりの実行に設定。
問題なく機能した。
Edit.jsでのnft画像選択後のsubmitで画像表示までさせたかったのでupdate完了後にreload処理を入れた。
uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
router.reload()
})
setavatarlinkにoncybarのアドレスを入れたところエラーが発生。
Uncaught (in promise) FirebaseError: Invalid document reference. Document references must have an even number of segments, but mydata has 1.
handleOnNFTLinkの中身を確認。
async function handleOnNFTLink(e) {
e.preventDefault();
console.log('nftlinkget')
console.log(nftlinkget)
if(nftlinkget===null){
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
nftlink:nftlink
}).then(()=>{
setnftLink('')
}).then(()=>{router.reload()})
}else{
const updateRef = doc(firebaseApp,'mydata',nftdocidget);
console.log(nftdocidget+'nftdocidget')
updateDoc(updateRef, {
nftlink: nftlink
}).then(()=>{
setnftLink('')
})
.then(()=>{router.reload()})
}
}
確認していくと if(nftlinkget===null){が原因ではないかと思い至る。
条件を追加if(nftlinkget===null||nftlinkget==""){。
https://oncyber.io/nakilab
こちらでしっかり追加したものが確認できた。
このリンクがどこにつくものか分かりづらかったので Set Avatar clickable Linkとし、avatarをクリックするものと示唆を入れた。
カードのコンテンツ追加削除をedit.jsで確認。問題なく動作した。[id].jsページへの反映も確認済み。
Mediumが突如取得できなくなった問題はどうするか。リンクを増やし、mediumへの遷移を減らすか検討。
debankの<div>の一部を<Box>に変更。
<Box textAlign="center">
DebankID削除
<Popup ref={popup} trigger={
// <button> Click to open popup </button>
<Button
type="submit"
varient="contained"
>
Delete
</Button>
}
position="right center">
<div>本当にDebankIDを削除しても問題ないですか?</div>
<Button
type="submit"
varient="contained"
onClick={handleOnDebankdelete}
>
YES
</Button>
<Button
type="submit"
varient="contained"
//onClick={() => console.log(popup.current)}
onClick={() => popup.current.close()}
>
NO
</Button>
</Popup>
</Box>
ポップアップを出ることも確認。
YouTube素材の追加ボタンが既存のものの上にしかなかったので下に追加。
コンテンツの表示順序について確認する。
現在は下記のようにitemの取得順での表示となっており、itemの順序はデータベース内部に自動生成されたアルファベット順となるのでこちらの意図した順番に並び替えるのは難しい。
{ninja.map((item,index) => (
<div key={index} >
{item.youtubeId&&(
<div>
並びの順番にこだわれるように配慮するかは要検討。
Youtubeのコメント欄は内容物がなければ表示させないように加工する。
{item.ycomment && (
<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
このように各々のitemごとに表示させるか分岐させた。
また、updateの日付でninja.map((item,index) をダイレクトに並び替え出力できないかも調べる。
色々調べてみたが過去にsortを使った下記のような形式にやはりせざるを得なさそう。
let ninjav = ninja.sort(function(a, b) {
return (a.cardorder < b.cardorder) ? -1 : 1; //オブジェクトの昇順ソート
//return (a.cardorder > b.cardorder) ? -1 : 1; //オブジェクトの降順ソート
});
//console.log(ninjav);
タイムスタンプで調整するのは難しいそうなので新たな数値をpile.cardorder = data.cardorder ?data.cardorder:nullのように設定してあげる必要がある。
一旦は保留。
IDページの加工に移る。ここでは登録者の一覧をカード形式でimageと一緒に表示させたい。
http://localhost:3000/ID
ここはIDフォルダ内のindex.jsの内容が表示されていた。
ALL playersのベースは下記のカードの表示で考えればよい。今回は全てのドキュメントをデータベースから取得していくため新たな格納先の配列は作る必要がある。
{ninja.map((item,index) => (
<>
{item.title &&
<Grid item xs={12} md={6} lg={4} key={index}>
<NoteCard note={item}
/>
</Grid>
}
</>
))}
Queryで絞る必要がないので、
async function handleOnArrayfollow(e) {
e.preventDefault();
const colRef= await collection(firebaseApp, "mydata")
await getDocs(q)
.then((snapshot)=>{
の流れで取得していこうと考えたがnftimageの画像自体はstorageに格納されていた。
Storageの構成はuseridフォルダ内のimage.jpgで各々のユーザーのimageを格納することにしているので、ninja[0].userid部分を最大ユーザー数をmaxに設定したforeachでカード内ループさせればうまく欲しい形式で表示されそう。
const firestorage = getStorage();
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
)
getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
データベースにアクセスさせるのでコンポーネントではなくIDのindexの方に直接組み込む。
useeffectでmaxidを取得したら実行させる。
let urllist = []
if(Maxid!=''){
const firestorage = getStorage();
for (let i = 1; i < Maxid+1; i++) {
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+i+"/image.jpg"
)
if(getDownloadURL(gsReference)){
urllist.push(getDownloadURL(gsReference))
}
}
console.log(urllist)
}
もしimageデータを登録する前の人の場合の処理はどうするか。考える。事前に全ての人に特定のimageを作っておいてもいい。
Uncaught (in promise) FirebaseError: Firebase Storage: Object '4/image.jpg' does not exist. (storage/object-not-found)
他には途中にsuccessしたかどうかを確認する技を挟めるか確認する。
ref.downloadUrl
}.addOnCompleteListener { task ->
if (task.isSuccessful) {
https://stackoverflow.com/questions/59378477/kotlin-firebasestorage-getdownloadurl-error
