Mechanical Moon

はてなブログの編集モード、いちいちはてな記法にするのめんどくさいしデフォルトの編集方法くらい保存もしくは保持くらいしといてくれへんかな!!!!!!

カウンターのカウント表示画面だけど、結構いろいろFigmaでいじりなおしたりしてみた結果、普通にシンプルなかんじでいこうとおもった。情報量多くしてもね...って思ったので。
[f:id:ten0313:20200108064422p:plain
Twitterで「やっての数だけ自慢話します」をしている画像(リプライツリーで延々と自慢話してるスクショ)を載せようとして実際のTwitterをDevToolとかでいじってたり苦労してたんだけど、いざ撮ったスクショをFigmaの画面上で確認すると結構微妙なかんじだったので。

あとデザイン系の同人誌即売会みたいなとこに月末行くことになった。今まで読んできたデザイン系の本って「これさえ抑えとけば」みたいなやつが多かったので今回みたいなつまずきを抑えるためにもいろいろ見ときたい

ツイッターへのシェアボタン作った。
f:id:ten0313:20200108160513p:plain
GitHub - nygardk/react-share: Social media share buttons and share counts for React
ここからシェア用のコンポーネントツイッターのアイコンをもらって、マテリアルUIのボタンを内包してる。

OGP設定もなんか今回は上手くいった(前回同じ方法でやろうとしてもなんかできなかった)
react-helmetですんなり。
React アプリのリンクをサクッと Twitter で魅せる - Qiita

まあまだこの方法だとogp画像を動的に変えたりできないのでいろいろする必要があるかも

f:id:ten0313:20200109130731p:plain
TwitterのSummaryLargeImageの設定するのにちょっとてまどってた。
Twitterカードの設定は正しいのに画像が表示されない原因 | あぱーブログ

WebページのURLのドメイン名と、画像のURLのドメイン名が異なる場合は、Twitterカードに画像を表示しない

だそう。

あと、実際にTwitterカードで見たかんじなんかおもったより質素なかんじなのを修正したい

ワイルド ハンガー

開発

今日そんなにやらなかった。f:id:ten0313:20200108000041p:plain
ハンバーガーメニューから遷移するためのやつつくった。

Reduxってstateをおなじ場所で一括管理するから便利!(要約)なんだけど、従来のピュアなreactでのstateと違って、コンポーネントが初期化されたときに内部のstateも一緒に初期化されるってこともないのでいちいちフォームの中の値とかもリセットしたりいろいろせなあかんのがちょっとダルかった。こことかはピュアな方のstateとか活用したほうがいいのかも。

今回の開発で、試みとしコンポーネントをContainerとPresentationalに分けて開発を進めてるんだけど
ComponentとContainerについて - Qiita
今のところそこまで恩恵は感じないかも。
一つのコンポーネントでふたつつくらなあかんのがめんどくさいし、ボタンの状態とかViewに関する状態を管理してるstateとかはReduxで担うのがめちゃくちゃ冗長なかんじがしてもうPresentationalコンポーネントでもうやっちゃってる。

まあでも確かにViewに関するコードしか記述されないファイルって意識してあとから読めるってだけでも可読性上がってるって思えるんかな。実際多少はわかりやすいっちゃあわかりやすいって思える場面も確かにあるので

グエ~~~~~今日の東京行きだるすぎんご~~~~~~~~新幹線なので一気に深夜バスだと持ちにくいキャリーケースとか一緒にもっていこ~

Pencil Adventure

f:id:ten0313:20200106001425p:plain
canvasでこういう画面を作りたいんだけど、

 context.fillStyle = "#0ff"; //まるい部分の色を指定
 context.scale(1,.5); //楕円にするために縦横比を指定
 context.arc(150, 150, 100, 0, 2*Math.PI, false); //丸を描画
 context.fill();  //中身を塗りつぶす
 context.scale(1,1); //縦横比を戻した

これだと
f:id:ten0313:20200106002806p:plain
こうなる。
ちなみになかに描画する文字を更新しても文字は描画されない上に波紋みたいなバグはどんどん酷くなっていく。
レンダリングされる度にcanvasの描画メソッドが作用してるって予測した。

なのでこうした。

 context.save();
 context.fillStyle = "#fff";
 context.scale(1,.5);
 context.arc(150, 150, 100, 0, 2*Math.PI, false);
 context.fill(); 
 context.scale(1,1); 
 context.restore();

save()とrestore()とかいうメソッドがあるのを知ったので書いた。ぶっちゃけ勘で書いたのでどう作用しているのか説明できない。良くなさそう。天性の才能でコードを書いた。
f:id:ten0313:20200106010028p:plain
丸い部分の色も直して文字も描画、更新できている。

f:id:ten0313:20200106013737p:plain
まあいいかんじかも。さっきエミュレーターでの確認中に画面サイズが変わったときの不具合を見付けたからそこも直したほうがいいかも。

f:id:ten0313:20200106045709p:plain
下の文言も追加した

##ボタンの管理
Submitボタンの状態管理

case UPDATE_NAME_INPUT:
    if(action.value && state.mission) {
      return {
        ...state,
        name: action.value,
        buttonDisabled: true
      }
    } else {
      return {
        ...state,
        name: action.value,
        buttonDisabled: false
      }
    }

inputフォームをコントロールしてるReducerでボタンの状態を管理するようにした。正しいのかは知らん。フォームの中身が存在すればボタンの状態を持っているbuttonDisabledというStateが動くようになってる

f:id:ten0313:20200106134943p:plain
フォームの内容が無いときはボタンもDisabled
f:id:ten0313:20200106134938p:plain
全部埋めたらEnable化させてる

f:id:ten0313:20200107001511j:plain
御座候食った(なにげに今SKKでフルの「ござそうろう」で一発変換できたのすごい)
太郎焼きとか今川焼きとかいろいろ名前がでておもろい

ぴちぴp

今日は特になにもって感じ

今日もなんかな。

##■ 海苔
##🐟 さかな
## 艸 カイワレ大根
手巻き寿司食べた。

は? Tabキー押したら勝手に投稿されるんやけど!?!?!?は???

##開発
今日はTwitter投稿時のOGP画像にも使うためのCanvasをいじってた。
canvasややこしい
f:id:ten0313:20200105220750p:plain
今はこんなかんじ。Reduxのストアとの連携もさせた

もちまき行った

なんか成人式めっちゃ楽しみやneんけどwwww

#開発

やっと本番のコードに触りはじめた。いいかんじかも。やっぱり書きだしてみればそこまでRedux自体はキツくなかった。入ってみたお化け屋敷が案外おどろかしてこなかった的なかんじなや。

もちろん複雑な処理をまださせてないのもあるかも。stateをいじくるときってReducerのなかでやっぱりやるとき? もうコンポーネント内で今のstateと比較していじくってから代入とかは邪道なのかな。空気てきにダメそう。

そういえば2020のJSライブラリの傾向の考察と予測的な記事をよんだ。
note.com
Reduxが段々みんなから敬遠されてきそうになってるってのはめっちゃありがたいし共感する。
わかる。てか状態管理らへんの「解」って一生でない問題な気もするけど、それでもHooksのに頼っていこうなって世間の流れには身をまかせてよさげかも。Hooksも真剣に触りたいなあ

f:id:ten0313:20200104231519j:plain
近所の神社の餅撒きに行った。
f:id:ten0313:20200104231506j:plain
餅撒きの前の行事で鬼達が踊りながら頭を槌とか鉞とかで叩いてくる。魔を祓うとかなんとか。

redux一瞬詰まったので

Error: Reducer "test" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.

っていうエラー文、よくわかんなくて詰まってた。
エラー「Reducer returned undefined during initialization」(React/Redux)
これ見て解決。
Reducerでdefaultの場合の設定をしてなかったのがあかんかったみたい。普通にstateをreturnで解決。

Could not find "store" in the context of "Connect(App)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(App) in connect options

にも詰まった。直訳すれば「Connenctされてるけど、AppコンポーネントにstoreがみつからなかったからProviderでラップしてstoreを教えてくれ」みたいなかんじなんだけど、おかしい。確かにAppコンポーネントをProviderでラップしてるしstoreも明示してる。
reactjs - ルートがプロバイダーでラップされている場合でも、「ストア」が見つかりませんでした - 初心者向けチュートリアル
これで解決。render内のをそのままProviderでラップしても読みこまれないっぽい。だからこそPresentationalコンポーネントとContainerコンポーネントを分けていくのがいいんやろうなって認識した。

そういえば色々Reduxわかってきた。いいかんじ。やっぱ俺やればできるわwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

あとこれも詰まった。イベントが起こるたびに状態の真偽値を切り替えたかった。
ReactでsetStateするなら

this.setState({ switch: !this.state.switch })

で済むかんじ。

そんでこれをReducerでやろうとしてこう書いたら

case SWITCH_STATE:
      return !state.switch

エラー。というより一度だけ真偽値を切り替えてあとは動かない。

どうやら「Reducerは常に不変性を保たなければならない」ってやつができてないみたい。ただの切り替えもだめなのか......
ということで書きなおした。

 case SWITCH_STATE:
      return {switch: !state.switch }

これでイケた。stateが複数ある場合はもちろん「不変性を保つ」必要があるので気つけなくちゃいけない。それ用のライブラリとか使えばいいのかな(immutableJSとか)
reactjs - How can I toggle property in reducer? - Stack Overflow
これ見て解決した。

f:id:ten0313:20200103220040j:plain
異人館行った。三が日やからか知らんけど、ラインの館以外入れなかったっぽい。
時間が6時過ぎくらいやったからかな?
f:id:ten0313:20200103220025j:plain
生田通りにある小籠包食べた。ここは美味しいので度々行く。ここのハイボールがなぞにエタノール臭くてあんま好きくなかった。

なんもわからん

pornderの動作を一部ごっそり変えた。

ぶっちゃけていうとpornderでは以前から明らかな不具合があった。

pornderでのルーティングはreact-router-dom - npmをつかっていた。開発環境ででも、ブラウザのエミュレーターを通してでもそれで上手くいっていた。

**のはずなんだけど

なんかわからんけどherokuにプッシュしてスマホから見た場合のみ一部ページが表示されないバグが起こってた。詳しくいうと「おすすめしているカテゴリを表示するページ」。

今はまだカテゴリを見れるだけなんだけど、将来的にはオススメされるカテゴリの設定とかをここでしたいつもりなので修正しないといけない。

 

**いろいろ試したんだけど

よくわからないって結論。でもまあ修正はしないといけないので、URLでのルーティングはおいといてとりあえずポップアップでの表示とさせた。

https://twitter.com/ntenten_Q/status/1210160136846622720?s=20

 

これがなんか下書きにはいってたから投稿