material-uiのSnackbar with Redux #58
今日やったこと
バイトでした。今日はバイト先での出来事というか得た知見を。
material-uiのSnackbar with Redux
（こんなピンポイントな記事が何かの役に立つかは謎ですが。。。）
ボタンを押すとテキストエリアの文字が何処かへ送信されるみたいなモノを作っていました。（NDAに誤って触れないように必要以上に注意を払いすぎた結果やたら抽象的な表現が多いですが気にしないでください）
保存が完了したらSnackbarで「保存しました」みたいに出したいと。
そういったものを作っていたのですが、Snackbarの仕様が厄介というか。openというpropにtrueを渡すと表示されて、autoHideDurationで指定したミリ秒後に消えます。ただ、openをtrueにしたままだとビューのレンダリングが走るたびにSnackbarが表示されるという挙動をしてしまうので、表示し終わったらopenをfalseにしてやる必要があります。(でも表示中にfalseにすると消えちゃう。)
ちゃんとドキュメント読めと言う話なのですが、SnackbarにはonRequestCloseというpropがあって関数を渡すと、autoHideDurationで指定したミリ秒後に消えるタイミング or 外の領域をクリックしてSnackbarが消えるタイミングで呼ばれます。(ちなみに引数にどの原因で消えるのかを取るのでなにか分岐させたいときはその値を使うといいですね。そんなことある？って感じはしますが。)
つまり、表示状態をstateに持っておいてonRequestCloseの中で、それを切り替えるactionをdispatchしてあげればOKですね。ここにたどり着くまで3時間位かかってしまった。
回りくどいけどちゃんとドキュメント読んでから実装は考えようね。という話でした。
雑談
フロントエンド、楽しくなってきたぞ…!?
AndroidのListView #56
今日やったこと
ListView
毎日技術日誌が始まって以来ずっとWeb系の技術ばかりやってたので「こいつWebにしか興味ないんか？」と思っている人も多いハズ。
部分的には正解だったりしますが、それ以外のことにも（特に最近は）興味ありますよ、ちゃんと。
というわけで今日はAndroid Studio使って云々してました。（講義の課題でやらなきゃならなくなったという部分もある）
昔ちょっとだけAndroidアプリやったことあったけどもはやなにも覚えていなかったので初心に帰ってListViewをちょこちょこ。
（おいこんなの中学生でもできるぞ…とか言わないでほしい。）
なんというか、Androidアプリ開発の勉強ってどこから手を付ければいいのかもよくわからないしウムム…。
雑談
とあるSlackで熱い技術討論が行われているところをずっと眺めてたんですが、この人達はなんで会話の流れと同じ速度でいろんなことを飲み込んでるのだろうと思ってしまった。
どうやったらああなれるのだろうか。場数を踏めば僕もそうなるのだろうか。
こうやって悩んでる時間に一行でも多くのコードを書けということなのだろうか。
つらいし、つらい。悔しい。
RailsにおけるCORSについて #54
今日やったこと
昨日の記事で作ってたAPIのフロント側を実装してたのですが…
CORSについて
「Railsにおける」なんて書いてはみましたがそもそもCORSなんてもんを知らなかった。
CORS(Cross-Origin Resource Sharing)とは、平たく言ってしまうと他のサイトからのリクエストを受け入れるよ〜ということらしい。
そもそも、そのままでは他のサイトからのリクエストを受けないというのを知らなかった。
詳しい話はこちらに。
RailsでのCORSの設定
で、じゃあRailsではどうするんだ？ってハナシになって、自分でレスポンスヘッダーいじるのか？と思ったのですがどうやらそんなことをしなくてもいいという。
今回はAPIモードを使って作ったので正にこれがしたい。
素晴らしい。
雑談
てなわけでフロント側作ったり、金曜恒例実習の進捗が完全にアウトだったりでした。1週間お疲れ様でした。
Rails5のAPIモードを使ってAPI作ってherokuで爆速デプロイをキメた話 #53
今日やったこと
Rails5のAPIモードを使った
Railsは初心者なので5から機能がどうこうと言われてもわかりませんが、APIモードが追加されたそうで。
rails new hoge --api とかしてやるとView関連のコードを除いて生成してくれる感じです。（たぶん）
あとは通常通りmodelとcontrollerを作ってやればオッケーという………素敵。
今回作ったのは
こちら。
一応解説しておくと、部室のドアに取り付けられたセンサーの開閉状況のログを取るAPIです。（弊サークルではSlackを使ってますが、Slackに毎回飛ばしたらうるさいし1万メッセージ制限あっという間に超えちゃうよね、ということでこういうものを作ることとなった）
そんな訳なのでモデルはLog一個、カラムもidとcreate_atがあればいいので何も書き足すことなくdb:migrate。
これだけだと本当にあっという間すぎる……（これだけのためにRailsである必要性がないという説もあるけど…。）
んでまぁ、どっかしらにデプロイしないとならないので…
Herokuデビューしました
ババーン！
Railsのアプリケーションをデプロイしてみて驚いたのですが、本当に簡単すぎる。
書くのも面倒なのでこのへんをお読みください。
一個つまづいたところがあるとすればproduction環境にpgを追加した後のbundle installかなと。
ローカルで開発時はSQLiteを使っていたのでPostgreが入っていない環境下では設定ファイルがないとかで怒られます。
コレっすね。記事内でもやってますがPostgreSQLを入れて実行したらうまくいったので良かったことにしておきます。
あとは記事の手順通りでデプロイ完了です!
素敵すぎる………。ちなみになにか更新したいときはコミットした上で再びgit push heroku masterすれば反映されます。良い。
CI使って自動デプロイしなよ、みたいに言われたので余裕があればそうしましょう。（originとherokuで2回プッシュするの地味に面倒だな、なんて思ってたので出来ると便利な気がする。）
雑談
いやぁ、何をくだらないことをしてるんでしょう？笑
でも、こうやって馬鹿なことを出来るのも技術があるおかげなんだな、なんて思います。
技術を学べば今よりももっとアホなことができるようになると思うと楽しい世界ですね😎
帰宅が遅くなっちゃったのでこの記事は帰りの電車の中ではてなブログアプリ使って書いてたのですが、iPhoneのキーボードでバッククオートってどうやって打つのかなと少し迷った。
答えはここ
シングルクオート長押しでした。6s以降の機種だと3DTouchが働いてカーソル移動になりがちなのでソフトに触ってね笑
redux-thunkとかいうの #52
今日やったこと
redux-thunk
今日も今日とてエンジニアアルバイターでした。来週忘れないようにココにメモを残す。
ReduxでAjax通信を行うときはActionで。という話は聞いたことがあったものの、実際に実装したのはお初だったのでいろいろとわけがわからず、うぅ…となった。
ReduxでAjaxを行うときはredux-thunkというmiddlewareを入れるのが定石らしい。（一応他にもいろいろあるみたいだけど公式推奨はredux-thunkみたいな話をQiitaかどっかで読んだ。）
redux-thunkを入れるとActionCreatorの戻り値として関数を渡せるようになる。関数は第一引数にdispatchを取るのでその中でAjax通信をして終わったら何かActionをdispatchしたりすると。（別しなければならないというわけではないけど、Ajax通信をするってことは何かしら画面に変更が合ったりするパターンが多いよね？という感じ）
Actionはこんな感じ。
export const getHoge = () => { return (dispatch) => { // ここでAjax通信など dispatch(actionCreator(...)) // Actionを発火させるならこう } }
備忘録なのでてきとうだけど。
Rails
ららら書けるかな君は書けるかなららら書けるかなRailsのモデル〜
— ううたろ (@uutarou10) July 5, 2017
Railsも書きましたが、相変わらずググりながら怪しい感じで書いてます。ちゃんと学ばねば。
雑談
やっとデータフローがわかってきたぞ…!
長い暗闇を抜けつつある感じがする（小並感）
業務中にTwitterするのは悪いなぁと思って。
でも、もうなにかあるごとにつぶやくのが手癖になってて気を抜くとTweetbotを起動しそうになるので、代わりに社内Slackにつぶやきまくってます。
