クマリデパート7thワンマンライブ「あのクマとあの場所で」に行ってきた!
※ブログ書こう書こうと思って遅くなってしまいましたこと、ここにお詫びします。
6/12(土)にクマリデパートのライブに行ってきましたー!
クマリデパート初入店です!
さおてゃん推しの友人に誘われて。
アイドルのライブなんて行ったことなかったし、
コロナ禍でこの1年ほとんど楽しみもなかったので、行ってみるかーと。
でも僕クマリデパートのことほとんど知らなかったんですよね。
さおてゃんがいるってことくらいしか(友人から名前だけよく聞いていたw)
なのでライブ参加後の特典会(メンバーとお話しできる)でさおてゃんに会って
「〇〇の、ともだちです」
とだけ伝えようと思ってました!
そんな僕のライブ参戦ブログです。
結論から言うと感動しました。
前準備
ライブを楽しむにはある程度曲を覚えておかないとね!
と思っていたのですが、なかなか捗らず。
新曲の『限界無限大ケン%』のPV1回見たのと、
友人が送ってくれていたyoutubeのさおてゃん生誕祭の動画をちょこっと見たのみとなってしまいました。
覚えた曲は『さおてゃんだよ』のみ。
「ま、まぁいいさ。一流のアーティストなら曲なんて知らなくても楽しませてくれるだろう?」
と何様だよ状態でライブ当日を迎えることにしましたw
デパート開店待ち(ライブ当日)
特典会参加にはフェイスシールドが必要とのことで近所の100均に仕入れに行きました。
友人の分も無事GET!これで準備万端!
あとは渋谷に向かうのみ!
というところで一足先に物販会場にいた友人からショッキングな連絡が。
「特典会参加チケット、売り切れです。。。」
嘘だろ。。。耳を疑ったよね。
これで目的の9割は失われました。
俺は何のために渋谷へ向かうのか。さおてゃん。。(さおてゃんしか知らないのでさおてゃん推しになっている)
デパート入店(ライブ会場へ)
なんだかんだで渋谷に到着して入店!
ここでひとつミッションがありました。
入店時にメンバーのアクリルキーホルダーがランダムで 1 つもらえるのですが、
誘ってくれた友人のためになんとしても『さおてゃん』をゲットしたい!
頼む!受付のおねえさん!頼む!
ゆう、ちゃん、、?(裏に書いてあった)
すまない。。友よ。。。
自分の力でゲットしてくれ。。。
ライブ開始前
そんなこんなで席へ。
1Fの後ろのほうでした。
唯一覚えた曲『さおてゃんだよ』が流れている。
きっとこれはライブではやらないんだろうな。
そんなこと考えてたらいよいよライブスタート!
ライブ
※特に印象的だった部分をピックアップします。
1曲目『限界無限大ケン%』
おお!いきなり新曲で来るとは!!もう知ってる曲がなくなってしまったw
とか思いながら主にさおてゃんを目で追いつつ聴き始めました。
「なんだろう。youtubeで聴いた時より良い曲な気がするな。やっぱりライブはいいな。」
その後もキャッチーというかノリの良い曲が多く終始楽しめました。
24時間〜♪って曲も可愛くて良かった。
ライブっていいな。クマリデパートっていいな。
新曲『Furniture Girl』
初披露だったらしい。そして僕の中で衝撃的な事件が!
衣装チェンジで今までメンバー毎のカラフルな衣装から急に白黒のモノトーンに!
白3人。黒3人で誰が誰だか。。。
「さおてゃんどこ?見分けつかん。。。」
でもこれが良かった。メンバー全員を見る良い機会になりました。
黒衣装で一人セクシーな子がいるな!網タイツっぽいの履いてるし!好き!
むむ、よく見たら白黒の衣装の子が2人いるぞ!?
そしてこの2人、歌が上手い!上手いぞ!
ありがとうFurniture Girl。ありがとうFunnyなDays。
「君とFurniture集めていく」の歌詞が印象的でした。
好きな人に言われたいと思った。Furnitureってなんだか知らないけど。。。
グリーンモンスターと階段
どの曲だか忘れたけど、メンバーが横一列に並んだ時、
ミントグリーンモンスターこと七瀬マナちゃんが一人階段を下り始めた。
お!歌上手いしソロパートか!と思ったが歌う気配はない。
「お、これは振り付け間違えたかな?」と思ったとき、
スッと3段目の途中で下ろした足を戻す彼女がいた。
好きになるのにこれ以上の理由はいらなかった。
戻した足が彼女の真面目さを表していた。
ペンライト
色が6色に変わるのすごいと思ったw
ペンライト買っておけばよかったな。メンバー歌う度に色変えるの楽しそう!
でももし自分の娘がアイドルになったりしたらずっと娘の色のまま応援したりするのかな。
スタッフさんやメンバーの親御さんたちに挨拶回りしたりするのかな。
なんて妄想したりもした。
ラストアンコール
どの曲も良かったけど、合間の映像もとても良かったです。メンバーの生い立ちムービーとか。
MCも良かったし、とにかく良かった。
ライブが終わる頃にはクマリデパート好き!ってなっていた。
最後に再び『限界無限大ケン%』
新曲だし推してくるなーと思ったけど、1曲目で聴いた時よりさらに良く感じた。
「なんだろう。神曲なのかな。すごくいいな。無限大サイコー!!」
ライブ終わるな!無限に続け!
閉店後
帰り際の物販で残りの特典会チケットを売り出していた。
タイミング的に買えそうだったが、帰ることにした。
この感動をさおてゃん一人に伝えるでいいのか?
そもそもさおてゃんでいいのか?
他のメンバーには伝えなくていいのか?楓フウカちゃんには?七瀬マナちゃんには?
こんな気持ちではいけないな。失礼だなと思った。
ライブ前の僕はもうそこにはいなかった。
ライブを終えて
『限界無限大ケン%』のPV鬼リピの日々です!
そして思ったこと。優雨ナコかわいいなぁ。
「ゆうちゃん??」なんて言っていた自分を殴りたい!
ちなみに本日『限界無限大ケン% / Furniture Girl』 発売日だそうです!
メンバー全員特徴があって可愛くて、
クマリデパート、いいグループです。
全員好き。これが箱推しってやつか。
元気をもらいました!
またライブ行きたいなぁ!
クマリデパート、2021年のMy最高になりそうです。
おしまい。
【はじめての番外編】SPAとAlpine.jsとfigmaとBulmaとsvgとロゴと利用規約と私。
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます!
— aoma23 (@aoma23) 2021年1月22日
当日だけでなく○ヶ月記念日や777日記念日といったキリ番にも対応しています!
現在事前登録受付中です!よろしくお願いします!#KINENBI#拡散希望 https://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである! 番外編!
番外編の内容
本編
figmaのprototypeの+ボタンなんで表示されないんだろーと思ったらやっと原因がわかった。
— aoma23 (@aoma23) 2021年1月22日
画面コンポーネントの中に含まれてなくて単独で存在してたからでした。
部品の一部として左のメニューからドラッグ&ドロップで入れてあげたら無事出てきましたー。 pic.twitter.com/3G6A7fAlYy
PWAにしたい。bento-starter使ってみようかな。
— aoma23 (@aoma23) 2021年1月25日
cssフレームワークも使いたいし悩む。 https://t.co/XmbscM4CrL
使ってみちゃうぞ!
— aoma23 (@aoma23) 2021年1月25日
Bulma: Free, open source, and modern CSS framework based on Flexbox https://t.co/dmwBQlLrxf #bulmaio @jgthmsより
やっぱりbootstrapにしようかなw
— aoma23 (@aoma23) 2021年1月25日
アイコンはgoogle material icons!
— aoma23 (@aoma23) 2021年1月25日
figmaで画像書き出すときは画像右クリックしてコピー&ペーストしてsvgでコピーがオススメ!
— aoma23 (@aoma23) 2021年1月25日
と師匠から聞いた。
(画像はsvgを取り込む必要ある。pngとかjpgだと画像を読み込むsvgが出力されるので意味ない)
alpine.jsでspaするときにブラウザバックどうしよう。URLどうしようってなって読んでる。
— aoma23 (@aoma23) 2021年1月25日
Alpine.jsのx-dataとURLをlocation / HistoryAPIと$ watchと同期しますhttps://t.co/bOMN2LwRTn
これでいけるかと思ったけどsetPage内のhttps://t.co/WLap71Pv7aがhttps://t.co/WLap71Pv7aではないらしく、ページ切り替わってくれない。。。 pic.twitter.com/oijl6DiEob
— aoma23 (@aoma23) 2021年1月25日
window.hash = '#' + value;
— aoma23 (@aoma23) 2021年1月25日
では
window.addEventListener('hashchange', this.setPage, false);
は発火しない!!さっき発火したと思ってたけど勘違いだった><
window.location = '#' + value;
なら発火する!マジかよ!
いや間違えた!
— aoma23 (@aoma23) 2021年1月25日
window.hash なんてないわw
そりゃ発火しないぜ!!!!!!!
location.hash = value;
だった!発火した!疲れてる!!
addEventListenerに引数を渡したい!!
— aoma23 (@aoma23) 2021年1月25日
ということで読んでる。https://t.co/RSc1m75LmY
きた!!
— aoma23 (@aoma23) 2021年1月25日
引数渡すようにしたけどこれではダメで。
新しいthisになるので、関係ないとこ書き換えてる的な話なのかな?よくわかってないけど。。。。
つづく→ pic.twitter.com/GP4oqyP0E9
一度thisをselfに入れてそれを渡すようにしてhttps://t.co/xfWbAxLUOAを変更したらwatchも効いて画面遷移もいけたー!!最高!!天才!! pic.twitter.com/BpafTgd1r0
— aoma23 (@aoma23) 2021年1月25日
<button>って初期値type=submitだったんや。。
— aoma23 (@aoma23) 2021年1月26日
知らんかった。。。
svg画像をsubmitにしたいときはlabelタグで囲むといける!と。なるほどねー。
— aoma23 (@aoma23) 2021年1月26日
<label>
<input type="submit" style="display: none;">
<svg 〜〜〜 />
</svg>
</label>https://t.co/GoLAWVS0WI
— aoma23 (@aoma23) 2021年1月27日
— aoma23 (@aoma23) 2021年1月27日
webpackはオンリーワン
— aoma23 (@aoma23) 2021年1月27日
ほにゃららローダーがいっぱいある
— aoma23 (@aoma23) 2021年1月27日
bulmaでHTMLをいい感じに表示したいときは<div class="content">で囲め!!!
— aoma23 (@aoma23) 2021年1月27日
利用規約とプライバシーポリシーの雛形。ありがたい。https://t.co/8KIX88sccu
— aoma23 (@aoma23) 2021年1月27日
個人開発では当社のところを運営者にするとよさそう。
— aoma23 (@aoma23) 2021年1月27日
いやー、テンプレよりも今いけてるサービスから作ったほうがわかりいい気がする。
— aoma23 (@aoma23) 2021年1月27日
しっかりやると時間かかるよね。やっぱり。。
— aoma23 (@aoma23) 2021年1月27日
そしてエンジニア的にまったく楽しくない作業です。
— aoma23 (@aoma23) 2021年1月27日
とりあえず形ができたからよしとするか。
— aoma23 (@aoma23) 2021年1月27日
alpine.js、x-showだとfalseでも一瞬表示されてしまう問題あるな。。一瞬だけど。。
— aoma23 (@aoma23) 2021年1月27日
細かいことばかりこだわりすぎて進捗悪いこと多い。。
— aoma23 (@aoma23) 2021年1月27日
しかしこのこだわりこそが職人魂!!!!!
vecteezyってすごい!svgでサンプルからさくっと作れるぞ!
— aoma23 (@aoma23) 2021年1月29日
これロゴ作成にいいのでは!https://t.co/WI3mI4Wiwl
ロゴ良い感じのできた!これでいいや。
— aoma23 (@aoma23) 2021年1月29日
あとフォントどうしようどうすればいいんだ問題ありますよね。
svg画像よくわかってなくて、strokeで良い感じになるように画像作ってたら、サイズ縮小でつぶれてしまった。。。
— aoma23 (@aoma23) 2021年2月1日
ということで勉強中。https://t.co/N7fxWNfUfM
リンク認証でログインできなくなった原因わかった気がする。x-ifでエレメント消してるからログインUIが表示されてなくて動かない的なやつと見た。
— aoma23 (@aoma23) 2021年2月2日
原因わかりました。ui.startの前に問答無用でui.reset();してたからでした。画面切り替えのたびにconsoleエラー履いてたので入れてたのが原因でした。
— aoma23 (@aoma23) 2021年2月2日
ui.reset();
ui.start('#login', uiConfig);
いまは表示方法かえたのでui.reset();なくても問題ないっぽい。削除しよう。
なにはともあれ良かった!
これはすごそうだ!https://t.co/qazmptyyAF
— aoma23 (@aoma23) 2021年2月12日
To Be Continued...
【はじめてのFirebase】第7話: Google domainsで独自ドメインゲットだぜ!
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます!
— aoma23 (@aoma23) 2021年1月22日
当日だけでなく○ヶ月記念日や777日記念日といったキリ番にも対応しています!
現在事前登録受付中です!よろしくお願いします!#KINENBI#拡散希望 https://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである!第7話!
第7話の内容
- 独自ドメインを買ったよ
- メールアドレスにも使用するようにしたよ
本編
はじめてのドメイン購入しよう!
— aoma23 (@aoma23) 2021年1月28日
ドメインって何がいいんだろ??
— aoma23 (@aoma23) 2021年1月28日
おすすめとかあるのかな。。。
google domainsなんてのもあるぞ!??
— aoma23 (@aoma23) 2021年1月28日
お名前ドットコムとどっちがいいんだ???
googleさん安心できるっス!
— aoma23 (@aoma23) 2021年1月28日
ついていくっス!https://t.co/GUUABaWmFd
ふむふむ。ドメインの自動更新が可能。https://t.co/quuknWJRU5
— aoma23 (@aoma23) 2021年1月28日
ふむふむ。個人の連絡先を非公開にすることが可能と。https://t.co/HtAnRvaWgR
— aoma23 (@aoma23) 2021年1月28日
ありがとうございます!
— aoma23 (@aoma23) 2021年1月28日
ググったらメールうざいからお名前からGoogleに移行した記事が大量に出てきましたw
読んでいる。https://t.co/Y8zsqVN3MQ
— aoma23 (@aoma23) 2021年1月28日
読んでる。appは相性いいのかー。https://t.co/nBnnmPpZFw
— aoma23 (@aoma23) 2021年1月28日
ドメイン、ゲットだぜ!!!
— aoma23 (@aoma23) 2021年1月28日
firebaseUIのここを独自ドメインにしたいんだけどよくわからない!!
— aoma23 (@aoma23) 2021年1月28日
firebase.initializeApp(firebaseConfig);でauthDomainを指定すればいけそうなんだけど、その場合は
<script defer src="/__/firebase/init.js"></script>
を削除しないとダメなのかな。。。。 pic.twitter.com/M7Tu1KyRCz
日本の記事あんまり見つからないな。。。
— aoma23 (@aoma23) 2021年1月28日
これだなきっと。https://t.co/Y0O4H1IXa0
authDomain指定してみた。遷移先は独自ドメイン使った形になった気がするけどエラーになったぞ。
— aoma23 (@aoma23) 2021年1月28日
client_idとyour_project_numberってどれだよ!??? pic.twitter.com/dHKZgsKgtB
これ見た感じ、こいつの設定か!?https://t.co/v66CYcyorS pic.twitter.com/YxExgZBPxu
— aoma23 (@aoma23) 2021年1月28日
これでどや!! pic.twitter.com/sCfhCwClhg
— aoma23 (@aoma23) 2021年1月28日
キターーーー!!!
— aoma23 (@aoma23) 2021年1月28日
沢北ーーーー!!!だぴょん pic.twitter.com/YzIhIO1jdA
ほええ!
— aoma23 (@aoma23) 2021年1月28日
Googleグループって個人でも無料で使えるんだ!?https://t.co/zH6cUIXhiB
Googleグループからメールが送れる設定してるけどエラーになって困ってる。。。https://t.co/0YnQMWlh75
— aoma23 (@aoma23) 2021年1月29日
まさにこれ!読んでみるよ!https://t.co/odNa6T2v55 pic.twitter.com/hkAtvOGUCc
— aoma23 (@aoma23) 2021年1月29日
できなくなったのかよ。。まじかよ。。
— aoma23 (@aoma23) 2021年1月29日
ドメイン買ったからそれでメールの設定すればいいかなと思ったけどWorkspaceの契約しなきゃいけないっぽい。。
— aoma23 (@aoma23) 2021年1月29日
月額600円はいや!
受信だけなら無料の転送設定でいけそう。
— aoma23 (@aoma23) 2021年1月29日
でも送信がしたいんだよ!https://t.co/nl19w4vlmZ
すごく希望のある記事見つけた!https://t.co/ncS3KyIrFe
— aoma23 (@aoma23) 2021年1月29日
アプリパスワードを有効にするには2段階認証を有効にする必要があるらしい。
— aoma23 (@aoma23) 2021年1月29日
できたーーー!!!!
— aoma23 (@aoma23) 2021年1月29日
ありがたやありがたや!https://t.co/ncS3KyIrFe
googleグループは不要になったので削除しました。
— aoma23 (@aoma23) 2021年1月29日
メールリンクサインアップのドメインが古いままだったのでfirebaseのコンソール確認してDNS登録などしている。
— aoma23 (@aoma23) 2021年2月1日
To Be Continued...
【はじめてのFirebase】第6話:届けGmail! ~ ベッサム神との出会い ~
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます!
— aoma23 (@aoma23) 2021年1月22日
当日だけでなく○ヶ月記念日や777日記念日といったキリ番にも対応しています!
現在事前登録受付中です!よろしくお願いします!#KINENBI#拡散希望 https://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである!第6話!
第6話の内容
- 本番では送信できていなかったメールを送れるようになる(NodeMailerとGmailの設定見直し)
- エミュレーターのテストデータ保持
- firebaseUIのメールリンク認証追加
- firebaseUIの日本語化
まえがき
GmailとNodemailerを使ってみるか。https://t.co/4T9OWyQCfK
— aoma23 (@aoma23) 2021年1月19日
gmailの設定変更して
— aoma23 (@aoma23) 2021年1月19日
安全性の低いアプリの許可: 有効
にしてあげる必要があった!https://t.co/EaAqMnEaCE
メール送信できたー!
— aoma23 (@aoma23) 2021年1月19日
よし。デプロイも完了!
— aoma23 (@aoma23) 2021年1月20日
あとは明日実行されてればOKだ。
本編
おいおいメール送られてないじゃん。。。
— aoma23 (@aoma23) 2021年1月21日
Error: Invalid login: 534-5.7.14
— aoma23 (@aoma23) 2021年1月21日
このエラーですね。gmailにログインできない。
onRequestにしてもダメ。定期実行が問題ではなく、本番環境でのみ発生する。
— aoma23 (@aoma23) 2021年1月21日
まさにこのstackoverflowと同じ。https://t.co/eMoefg2uGA
ベッサムさんは安全性を低くしなくても解決できるといってる。良さそう。
— aoma23 (@aoma23) 2021年1月21日
そもそも低にしててもエラーになってるしな。https://t.co/eKUnNfuVSx
結構ハマってる人いるんだな。ローカルではうまく行くけど本番はダメ。https://t.co/LVe2VSMNvv
— aoma23 (@aoma23) 2021年1月21日
よし!俺はベッサムさんについていくぜ!!
— aoma23 (@aoma23) 2021年1月21日
OK!順調に進めてるぞ。 pic.twitter.com/8wVRDQSnXB
— aoma23 (@aoma23) 2021年1月21日
もうベッサムさんに言われるがままにやってる。何をしてるかはわかってない。 pic.twitter.com/ApetLt8ccQ
— aoma23 (@aoma23) 2021年1月21日
ベッサムさんを信じて無効に戻した。
— aoma23 (@aoma23) 2021年1月21日
もはやベッサム神である。 pic.twitter.com/LyNSBnan2g
エミュレーターでメール飛ぶこと確認できたー!
— aoma23 (@aoma23) 2021年1月21日
ベッサムコードのポイントとしては、AccessTokenは定義不要だったこと(リフレッシュトークンあるので)と user: 'mail@gmail.com',は自分のアドレスに書き換える必要ある。 pic.twitter.com/TXDyqcQFHb
パスワードの定義は不要になったので削除!
— aoma23 (@aoma23) 2021年1月21日
firebase functions:config:unset gmail.password
ベッサム神のおかげで本番でもメール送信できたーーー!!!😂😂😂
— aoma23 (@aoma23) 2021年1月21日
ありがとうベッサム神!
(もしものときのために手順をキャプチャしとく) pic.twitter.com/IWSbLIddkq
@SahliBessam Thanks for your blog.
— aoma23 (@aoma23) 2021年1月21日
You are great!https://t.co/eKUnNfuVSx
うれしさのあまりベッサム神をフォロー&DMしてしまった。
— aoma23 (@aoma23) 2021年1月21日
firebaseのエミュレーター、毎度データ消えちゃうのやだな。何か方法あるのかな。。
— aoma23 (@aoma23) 2021年1月21日
Thank you for your support!
— aoma23 (@aoma23) 2021年1月21日
ありがとうございます!!!
なるほどエクスポートとインポートすればいいのか!
firebase emulators:start --import=./dir --export-on-exit
— aoma23 (@aoma23) 2021年1月21日
でエミュレーター起動すれば終了時にテストデータ保存されて、実行時にインポートしてくれると。素晴らしい!
今日は助けられてばかり。ありがたやありがたや。
メールリンク認証も追加しちゃうぞ
— aoma23 (@aoma23) 2021年1月21日
メールリンク認証終わった。終わってしまった。。
— aoma23 (@aoma23) 2021年1月21日
下記追加しただけでいけた。firebaseUIすごすぎる。
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
signInMethod: https://t.co/1Tde42X0wG_LINK_SIGN_IN_METHOD
}
firebaseUIのサインインウィンドウを日本語化したいなー。
— aoma23 (@aoma23) 2021年1月21日
[https://twitter.com/aoma23/status/1352163973903183874:embed#日本語対応できたー!{LANGUAGE_CODE}をjaにするだけ!かんたん。
ログインメールのアプリ名が「project〜」になっちゃってる。
— aoma23 (@aoma23) 2021年1月21日
これどこで設定するんだ? pic.twitter.com/MluPxzXzxQ
firebaseの設定のとこに公開名ってあったー!
— aoma23 (@aoma23) 2021年1月21日
これを変えればよさげ。 pic.twitter.com/xZky2mxbZP
1ユーザーが登録できるfirestoreのドキュメント数を上限3件までとかにセキュリティルールで制御したかったんだけど、思いのほか面倒だったので諦めて寝ます!
— aoma23 (@aoma23) 2021年1月21日
おつかれさまでした!https://t.co/PC1tT2VfbP
To Be Continued...
【はじめてのFirebase】第5話:セキュリティルールマスターに俺はなる!
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます!
— aoma23 (@aoma23) 2021年1月22日
当日だけでなく○ヶ月記念日や777日記念日といったキリ番にも対応しています!
現在事前登録受付中です!よろしくお願いします!#KINENBI#拡散希望 https://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである!第5話!
第5話の内容
- firestoreのセキュリティルールを設定できるようになる
本編
セキュリティルールやっていくぞ!
— aoma23 (@aoma23) 2021年1月20日
やばいんでね。 pic.twitter.com/oHow0D3egc
最強。
— aoma23 (@aoma23) 2021年1月20日
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
}
}
service https://t.co/pttdGoSdI2 {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if false;
}
}
}
— aoma23 (@aoma23) 2021年1月20日
> アクセス権を付与するルールが 1 つでも一致すれば、リクエストは許可されます。アクセス権を付与するルールが 1 つも一致しない場合、リクエストは拒否されます。
— aoma23 (@aoma23) 2021年1月20日
なるほど、つまりルールを書かなければ最強ってことでいいのかな?https://t.co/Ty5qjwFMLu
よし!これで自分のものしか作れないし、自分のものしか参照編集削除できない。完璧だ。
— aoma23 (@aoma23) 2021年1月20日
match /documents/{document=**} {
allow read, update, delete: if request.auth.uid == https://t.co/UkZsKc01N6.uid;
allow create: if request.auth.uid == https://t.co/A7XL7Hxvgz.uid;
}
フィールドの型チェックするのに参考になりそう。https://t.co/JTdjbVkSEa
— aoma23 (@aoma23) 2021年1月20日
セキュリティルールで存在すべきすべてのフィールドがあるかチェックするのどうすればいいか調べてる。。
— aoma23 (@aoma23) 2021年1月20日
すごいわかりやすいサイトあった。ありがたい。https://t.co/QxeIlWjYcU
— aoma23 (@aoma23) 2021年1月20日
なるほど。フィールドが意図したもののみかはList.hasAll(list)とList.hasOnly(list)の両方を使う必要があると。
— aoma23 (@aoma23) 2021年1月20日
hasAllで指定したフィールドが全て存在するか確認し、hasOnlyで指定したフィールドのみが存在することを確認する。
updateのフィールドのバリデーションでハマった。update時に渡してないフィールドでもドキュメントに存在していればある扱いになるので、変更がないことをチェックすることは必須らしい。
— aoma23 (@aoma23) 2021年1月20日
> request.resource 変数にはドキュメントの将来の状態が含まれます。
のあたり。https://t.co/luBIVOOIgR
補足。作成時にaa,bb,ccのフィールドがあったとして、create時のフィールドのセキュリティルールは下記のようになる。
— aoma23 (@aoma23) 2021年1月20日
data.keys().hasAll(['aa', 'bb', 'cc']) && data.keys().hasOnly(['aa', 'bb', 'cc']);
このときupdate時はccしか更新しなかった(jsでccしか渡さなかった)としても、→つづく
ccだけのチェックではエラーとなる。
— aoma23 (@aoma23) 2021年1月20日
data.keys().hasAll(['cc']) && data.keys().hasOnly(['cc']);
これはfirebase側でaa,bbを補完するからで、create時と同様に
data.keys().hasAll(['aa', 'bb', 'cc']) && data.keys().hasOnly(['aa', 'bb', 'cc']);
でチェックしてあげる必要がある。
※なお、ここで出てくるdataはhttps://t.co/A7XL7Hxvgzのこと。
— aoma23 (@aoma23) 2021年1月20日
かなり堅牢になった。
— aoma23 (@aoma23) 2021年1月20日
テストコードもかけるっぽいので明日チャレンジしてみようかな。。
To Be Continued...
【はじめてのFirebase】第4話:cloud functionsとエミュレーターと私
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます!
— aoma23 (@aoma23) 2021年1月12日
当日だけでなく100日後とか777日後とかキリ番にも通知します!
現在事前登録受付中です!拡散お願いします!#KINENBIhttps://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである!第4話!
第4話の内容
- cloud functions実装できるようになる
- cloud functionsからメール送信
- firebaseのローカルエミュレーターを使えるようになる
本編
さて、cloud schedulerで良さそうなんだけど、これってどうやって使うんです??
— aoma23 (@aoma23) 2021年1月15日
Blazeプランにしてみた。
— aoma23 (@aoma23) 2021年1月15日
予算アラートなるものがあり、3段階で通知してくれるっぽい。便利だが予算オーバーしたタイミングでサーバーも請求もストップしてくれる設定ほしい。。高額請求こわい。
— aoma23 (@aoma23) 2021年1月15日
いんすとーるちう
— aoma23 (@aoma23) 2021年1月15日
firestoreのエミュレータ実行しようとしたらjdkがないぞと言われたのでインストールしてみる。https://t.co/XdmDLCQaKw
— aoma23 (@aoma23) 2021年1月15日
firestoreのエミュレータやっと動いた。というかcloudfunctionsも。
— aoma23 (@aoma23) 2021年1月15日
addMessage?text=uppercaseme
のとこスラッシュないとエラーになって動かなかった。
addMessage/?text=uppercaseme
とんだトラップだぜ。https://t.co/KfDFmnT9ql
さらに
— aoma23 (@aoma23) 2021年1月15日
functions.logger.log('Uppercasing', context.params.documentId, original);
がlogがないぜってエラーになってたので消した。
そして登録できたー。 pic.twitter.com/QeekhXxcLb
なんだろう。hostingからは本番のfirestore見に行っちゃう。。ローカルのエミュレータ見て欲しいのに。。
— aoma23 (@aoma23) 2021年1月15日
db.useEmulator("localhost", 8080);
— aoma23 (@aoma23) 2021年1月15日
って書いてあるのに、
db.useEmulator is not a function
ってエラーになるのなぜなんだぜ?https://t.co/wh5StLBgX3
firebaseのバージョン確認コマンドは
— aoma23 (@aoma23) 2021年1月15日
firebase -v
でも
firebase -version
でもなく、
firebase --version
バージョンは9.2.0だった。
— aoma23 (@aoma23) 2021年1月15日
これ見た感じ9.4.1ならいけるのか!?https://t.co/Wr3i14higi
[https://twitter.com/aoma23/status/1350072503163502593:embed#ローカルのバージョン関係なかった。よくよく見たらCDNで指定してるバージョンが古かった。。7.… https://t.co/7cY3RIjjDw]
なるほど。firebaseuiは諦めよう。 https://t.co/63kElS4HUV
— aoma23 (@aoma23) 2021年1月15日
なるほど。cloud functionsではリージョン指定をソースに書くのか。
— aoma23 (@aoma23) 2021年1月18日
.region("asia-northeast1")https://t.co/Fqv07Ry0zI
firebase emulators:start
— aoma23 (@aoma23) 2021年1月18日
いいね!ローカルエミュレーター簡単!
dayjsをnpm install。
— aoma23 (@aoma23) 2021年1月18日
cloud functionsで使うにはfunctionsフォルダ配下で
npm install dayjs
すればよさそう。
firestoreエミュレータたちあがらなくなったのでこれ見てるhttps://t.co/V7YyJnknaK
— aoma23 (@aoma23) 2021年1月18日
8080と9000のポートkillしたら立ち上がったー!よかった。
— aoma23 (@aoma23) 2021年1月18日
console.log('テストです');
— aoma23 (@aoma23) 2021年1月18日
でログ仕込んで、
http://localhost:5001/maday-eeeee/asia-northeast1/notifyDays
でcloud functions実行して、
http://localhost:4000/logs
でログ確認してる。
firestoreのtimestampで日(DD)や月日(MMDD)が一致するデータを取得したかったけど、範囲指定くらいしかないっぽい。。。
— aoma23 (@aoma23) 2021年1月18日
どうするか。。
全部取得して判定するのも微妙だし、日や月日だけのフィールドを設けるにするか。微妙だけど。
この前書いた設計書がげきくそ役に立ってる!
— aoma23 (@aoma23) 2021年1月18日
foreach内でawaitしたら並行して動いてしまうのね。。
— aoma23 (@aoma23) 2021年1月18日
まさにこのQiitaの通りにハマった。
さてどうしようかな。。処理的にはpromise.allが良いのだけど、開発中は順番わかってたほうが実装しやすいのよね。。https://t.co/Q0PUHMEx4T
cloud functionsからメール飛ばしたい。
— aoma23 (@aoma23) 2021年1月19日
send grid使ってみるか。
sendgrid申し込んだけどすぐには使えないのか。。
— aoma23 (@aoma23) 2021年1月19日
一応参考になりそうな記事をペタ。https://t.co/rHKQtn1pPO
こっちのがよさそう?https://t.co/p82TZ7BasI
— aoma23 (@aoma23) 2021年1月19日
GmailとNodemailerを使ってみるか。https://t.co/4T9OWyQCfK
— aoma23 (@aoma23) 2021年1月19日
こっちでも。https://t.co/Gv0FIDJn8n
— aoma23 (@aoma23) 2021年1月19日
実行しました!
— aoma23 (@aoma23) 2021年1月19日
// functionsディレクトリへ移動
cd functions
// Nodemailerインストール
npm install --save nodemailer
const gmailEmail = functions.config().gmail.email;
— aoma23 (@aoma23) 2021年1月19日
const gmailPassword = functions.config().gmail.password;
で環境変数取得するために下記コマンド実行したよ!
firebase functions:config:set https://t.co/T1iI1pFvJp="hoge@gmail.com" gmail.password="fugafuga"
エミュレータで環境変数取得したいときはfunctionsディレクトリ配下で下記を実行する必要があったよ!
— aoma23 (@aoma23) 2021年1月19日
firebase functions:config:get > .runtimeconfig.json
gmailの設定変更して
— aoma23 (@aoma23) 2021年1月19日
安全性の低いアプリの許可: 有効
にしてあげる必要があった!https://t.co/EaAqMnEaCE
メール送信できたー!
— aoma23 (@aoma23) 2021年1月19日
ユーザーのメアド一覧取得したいけどAuthenticationから一括取得って100件までなのか。
— aoma23 (@aoma23) 2021年1月19日
これはユーザー情報をfirestoreで別途管理しとくのが良さそうなのかな。https://t.co/8rdC3LhE1E
アカウント作成時にcloud functionsでユーザー情報保存かなー。https://t.co/rVhFM7JEmH
— aoma23 (@aoma23) 2021年1月19日
functions.auth.user().onCreateのテストしたいけどfirebaseUI使っててエミュレーター側のauthenticationに書き込まれない。
— aoma23 (@aoma23) 2021年1月20日
そんなときはエミュレータの画面から直接addUserしちゃえばOK! pic.twitter.com/XEGweIeeXJ
だいたい実装できたぞ。
— aoma23 (@aoma23) 2021年1月20日
さて動作確認のためにonRequestで実行してたけど、やりたいのは1日1回の定期実行なのよね。
.https.onRequest
— aoma23 (@aoma23) 2021年1月20日
を
.pubsub.schedule('00 7 * * *').timeZone('Asia/Tokyo').onRun(async (context) => {
にしてあげれば良さそう。
contextって何が入ってるんだろうと思ったら調べてくれてる人いた!ありがたい!https://t.co/MkOSgi4eQo
よし。デプロイも完了!
— aoma23 (@aoma23) 2021年1月20日
あとは明日実行されてればOKだ。
To Be Continued...
【はじめてのFirebase】第3話:FireStoreに登録更新削除の巻
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます!
— aoma23 (@aoma23) 2021年1月12日
当日だけでなく100日後とか777日後とかキリ番にも通知します!
現在事前登録受付中です!拡散お願いします!#KINENBIhttps://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである!第3話!
第3話の内容
- Firestoreに登録、更新、削除できるようになる!
本編
twitterカードの設定うまくいったー。
— aoma23 (@aoma23) 2021年1月12日
card validatorでぽちーする必要あるのね。https://t.co/pZeHf1JFhe
あと再ツイートする必要はなく、表示されてなかったツイートもちゃんと表示されるようになる、と。
今日はfirestoreにデータ登録する。
— aoma23 (@aoma23) 2021年1月13日
やっぱり公式ページをみるのが一番!中華一番!https://t.co/lHMevQiLCS
あれ、わかんないな。。
— aoma23 (@aoma23) 2021年1月13日
dbってどっからでてきたんや。
こっちをみるべきだったか。
— aoma23 (@aoma23) 2021年1月13日
firestoreのチュートリアル。https://t.co/JQBbTfkwYF
firestoreないって怒られるなーと思ったら firebase-firestore.js を読み込んでないだけだった。。。
— aoma23 (@aoma23) 2021年1月13日
hosting使ってるからか、下記宣言は不要っぽい。
— aoma23 (@aoma23) 2021年1月13日
```
// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
apiKey: '### FIREBASE API KEY ###',
authDomain: '### FIREBASE AUTH DOMAIN ###',
projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});
```
firestoreに登録できたよー。
— aoma23 (@aoma23) 2021年1月13日
firestoreのupdateやってく!
— aoma23 (@aoma23) 2021年1月15日
updateできるようになりました!完璧です。
— aoma23 (@aoma23) 2021年1月15日
次デリートいきまーす
— aoma23 (@aoma23) 2021年1月15日
firestoreへの登録、更新、削除できたー。
— aoma23 (@aoma23) 2021年1月15日
To Be Continued...