Milky Mudnnes
なんか一度いろいろ捨てることにした。
動的なOGP設定はもうなんか次の機会でいいや、正直残念だけど。
あたらしいのはこんな感じにした。動的に変えることができないので必然的にどんなページへのリンクにも対応できるものになった。
ここを捨てた分、他の機能に力入れたい
とりあえずLP的なのもFigmaで作った
ていうか今回長びきすぎじゃね？githubのいちばん最近のコミットが10日まえやねんけどそこまでの開発内容か？？？？？
みて!!!!!!!新着のやつのページにランダムに絵文字がでるようにした。可愛くてきにいってる
なんか疲れすぎてコンポーネント小分けにするの疲れてきた。4時間くらいぶっつづけでコード書くのさすがに疲れる
疲弊がやば
ちょっと飯食お
風呂も入った。なんか眠気がきてる
今回のやつ、ウケたらいいなあ
検索機能をつけた。firestoreのクエリ検索を使った簡単なやつ。けっこう眠い。コミットメッセージが「これけした」とか「つけた」とか適当になってきてる。
今日は夜SW観にいく。2回目だけど楽しみ
Sour Dynary
なんかreact-Hemetもよくわからないことになってきた。
そういえば成人式にいった。
絶対来ないだろうって思ってた友人がきてたり、その後に5人くらいでいったカラオケがおもしろかったりとても良かった。
みんな最寄りが一緒だったので歩いて帰ったんだけど、途中から家路に着くのに離脱していくときの「バイバイ」とかまたいつかねとか、慣れてない革靴で痛いのとかひとりだけになった足音とかいろいろエモかった。
まあ別れっていうのは幾多もあることだけど、出会いのときよりなんか心にのこることおおいよね。
react-helmetのエラーは
Cannot read property 'object' of undefined at Helmet.js
ってやつだったんだけど、helmetのバージョンを5にしたら直った。でもこれたしか、react-snapってreact-Helmetの4としか使えない気がするんだけどどうなんすかね...?
なんかもう手詰り感あったので、firebase functionに頼ることにした
Firebase で Cloud Functions を簡単にはじめよう - Qiita
Functions導入はここを見て
OGP周りはここをみてる
Firebase + SPA で SSR なしに OGP 対応 - Qiita
タイプスクリプトなんもわからん!!!!
今日の進捗なんもねえや
Smart Candy
な~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~んもわからん
なんかいきなりOGP設定がうまくいかんようになった
前もこういうことあったけど、いつのまにか動くようになったんだけど今回はどうもうまくいかへん
さっきまじで試しにindex.html(Reactのrootにするための要素が入ってるやつ)のmetaタグをいじったらTwitterのCardValidatorからの反応がかわってた。
*なので
そのindex.htmlにツイッターのmetaタグをいれてみたらビンゴで、CardValidatorにかけたらちゃんとcardの表示がされた。react-helmetが動いてないっぽい...?
コンポーネントを集約させてるApp.jsファイルにHelmetさせたら通った。なんじゃこれ
router先にあるとルーティング途中でTwitterのボットにmetaタグを読まれないからっぽい...?
んでビルドでもしくじってる react-snapがいらんことしてるみたい
Elemental loss
なんか6時間くらいねばってやっと進展がでた今。
まーーーじでcanvasで生成した画像をfirebaseのstorageに保存するだけでてまどってた
getelEmentByIdでとってきたのをそのままglobに変えてputすりゃいいとおもってたのにどうしてもできない。
というか、保存はできるんだけどstorage側で正しく保存されてない(まっくろになってる)
DOM要素のなかみがからっぽのまま読みこんでるのかなっておもったんだけどもそうでもない
やっとさっきputStringで画像をbase64でエンコードしたのを入れることができた。
それもまだ問題はあって。あくまでbase64でエンコードしたものをいれてるだけなのでそのままOGPには使えなくて、どっかでデコードしなきゃいけないっぽい。
は~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
なんかさいきんHHKBの調子がわるい。接続がわるいかんじあるのでウーン
貰いものなんだけど、初HHKBで気にいってるんだけどな。もし新しいの買うのなら、無線タイプがいいな
*解決!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
よっしゃ! できたよ
結論からいうと
HTMLCanvasElement.toBlob() - Web API | MDN
これでblobに変換するのが正解だった(base64とか挟まずにね)
これが生成されてFirebase Storageに保存された画像
TwitterでのOGP設定にも手間取ってた。
https://cards-dev.twitter.com/validatorTwitterカードの確認できるところ
URL先をキャッシュにいれてるのかしらんけど、短時間でなんかいも同じURLを確認しようとするとUnable to render Card previewとかいわれてわりと詰んだりしてた。
なんもしてないけどいつのまにかできてた
いいかんじかも
*いいかんじ
routingまわりと残った機能の実装とかをはじめた。いよいよ開発も佳境ってかんじがする
■
ほげほげ
console.log(hogehoge)
今日昼まで書いてたやつをまちがえて消しちゃったので今日は書きません! 以上 !
俺は飲まなくても酔える男だ!
Mechanical Moon
はてなブログの編集モード、いちいちはてな記法にするのめんどくさいしデフォルトの編集方法くらい保存もしくは保持くらいしといてくれへんかな!!!!!!
カウンターのカウント表示画面だけど、結構いろいろFigmaでいじりなおしたりしてみた結果、普通にシンプルなかんじでいこうとおもった。情報量多くしてもね...って思ったので。
[
Twitterで「やっての数だけ自慢話します」をしている画像(リプライツリーで延々と自慢話してるスクショ)を載せようとして実際のTwitterをDevToolとかでいじってたり苦労してたんだけど、いざ撮ったスクショをFigmaの画面上で確認すると結構微妙なかんじだったので。
あとデザイン系の同人誌即売会みたいなとこに月末行くことになった。今まで読んできたデザイン系の本って「これさえ抑えとけば」みたいなやつが多かったので今回みたいなつまずきを抑えるためにもいろいろ見ときたい
ツイッターへのシェアボタン作った。
GitHub - nygardk/react-share: Social media share buttons and share counts for React
ここからシェア用のコンポーネントとツイッターのアイコンをもらって、マテリアルUIのボタンを内包してる。
OGP設定もなんか今回は上手くいった(前回同じ方法でやろうとしてもなんかできなかった)
react-helmetですんなり。
React アプリのリンクをサクッと Twitter で魅せる - Qiita
まあまだこの方法だとogp画像を動的に変えたりできないのでいろいろする必要があるかも
TwitterのSummaryLargeImageの設定するのにちょっとてまどってた。
Twitterカードの設定は正しいのに画像が表示されない原因 | あぱーブログ
だそう。
あと、実際にTwitterカードで見たかんじなんかおもったより質素なかんじなのを修正したい
ワイルド ハンガー
開発
今日そんなにやらなかった。
ハンバーガーメニューから遷移するためのやつつくった。
Reduxってstateをおなじ場所で一括管理するから便利!(要約)なんだけど、従来のピュアなreactでのstateと違って、コンポーネントが初期化されたときに内部のstateも一緒に初期化されるってこともないのでいちいちフォームの中の値とかもリセットしたりいろいろせなあかんのがちょっとダルかった。こことかはピュアな方のstateとか活用したほうがいいのかも。
今回の開発で、試みとしコンポーネントをContainerとPresentationalに分けて開発を進めてるんだけど
ComponentとContainerについて - Qiita
今のところそこまで恩恵は感じないかも。
一つのコンポーネントでふたつつくらなあかんのがめんどくさいし、ボタンの状態とかViewに関する状態を管理してるstateとかはReduxで担うのがめちゃくちゃ冗長なかんじがしてもうPresentationalコンポーネントでもうやっちゃってる。
まあでも確かにViewに関するコードしか記述されないファイルって意識してあとから読めるってだけでも可読性上がってるって思えるんかな。実際多少はわかりやすいっちゃあわかりやすいって思える場面も確かにあるので
グエ~~~~~今日の東京行きだるすぎんご~~~~~~~~新幹線なので一気に深夜バスだと持ちにくいキャリーケースとか一緒にもっていこ~
