hogashi.*

日記から何から

今日の頑張り

 最近やっている小さな twitter クライアント web アプリで、 css を書きたいなと思い、 scss で書いてコンパイルしようとなったところで、 webpack を使っているのでついでに sass-loader というのでできるかなと思ったのだけど、 css ファイルへ書き出すような説明が全く見つけられず、 javascript のソースに全てを込める思想なことに気づいた。 node-sass で単にコンパイルするだけにして、 package.json に build:css とか足して、 npm-run-all で全部やるみたいなことにした。 webpack でなんでもかんでもやるのつらくて、なぜかというと loader 周りで何が起きているのかわからず、 webpack.config.js を書くのが苦しい。 react を使っていたらスタイルを javascript で扱いたくなるのだと思う。
 シンプルで軽い、 rate limit ギリギリで勝手に TL が読み込まれるクライアントを目指している。お手本は YoruFukurou とか SobaCha とか。 twitter api 、全般的に扱いづらくて大変で、 rubytwitter gem を fork して手を加えたりしている。

ありがとうございました2018

 お世話になりました、2019も何卒よろしくお願いいたします。
 少し気が早いですが、落ち着いて書けるのはこのくらいの時期でしょう。

 家はすっかり大掃除が襲来し、こたつってシェルタでご飯を食べこれを書いています。
 最近はようやく大学生なりに忙しく、というか長い期間のプレッシャがかかっているので精神的に大変なんですが、なんとかなりそうなのでなんとかします。

 ところで Deno ってやつが話題になっていたの全く知らなくて、こないだ概要を掴みました。面白そうなのでちょっとずつやってみたいです。 Deno に限らず、いろんなことに手を出していきたいと思います。抱負完了した。


https://content-jp.umgi.net/products/to/tojp-60185_oVl_extralarge.jpg?12052017115057

https://www.universal-music.co.jp/the-beatles/products/tojp-60185/

まとめコントリビューション2018

 whywaita Advent Calendar 2018 - Adventar の記事です。億が一おめでとうございます。

 id:whywaita さんに関する近況としては、だんだん慣れてきたのか、盛り上がりの "わいわい"とか、英単語 "why"とか、プロンプト [y/n] とかで id:whywaita さんを連想しなくなりました。たまに"~の舞"というのを見てつらいつらいダンスを思い出します。

 あといい感じなコンテストもおめでとうございます。きっと SELECT * を潰す以外にも沢山のことをしたのでしょう。
 一方では、 slack-aggregator (slack で複数ワークスペースをひとつにまとめて見るやつ) というのを作っていたり、多才な方だなと常々感じています。

 ところでこれ、少し使ってみようとしたのですが、 (Go に詳しくないので) インストールの仕方がわからなかったり、依存パッケージに変更*1があって go build がうまく行かなかったりしたので、 p-r を作りました。 id:whywaita さんが approve とか reject とか discuss とかしてくれることを祈っています。


 今年も何かとお世話になりました。来年は、ちゃんとしていれば双方大学に居ない気がするので、お会いする回数は減りそうですが、何かでお世話になりそうな気もするので、そのときはよろしくお願いします。

(追記 201812040032) P-R の一方はマージしてもらえました && 他方は僕がやらなきゃならないことがもう少しあると教えてもらったのでやります!

Dentoo.LT をどうぞ

 僕は id:hogashi です。これ masawada Advent Calendar 2018 - Adventar の記事です。 Dentoo.LT のお話をします。

 Dentoo.LT とは、電気通信大学のサークル MMA が主催する、 LT (ライトニングトーク)イベントです。調布にある*1電気通信大学で年数回開催していて、初回は 2012/10/14 なので、6周年ですね。カウントは #21 まで来ました。

 最初の主催が id:masawada さんで、そこから脈々と(?)引き継がれ、 id:hogashi は 4代目の主催をしています。よく大学の学生課にイベント開催の申請を出したり、司会をしたり*2して、歴代主催に頼りながらなんとか開催しています (いつもありがとうございます)。

 回を重ねるごとに、機材がパワーアップしていき、最近ではマイクの音量調整や YouTube Live への生放送配信の運用が安定してきました*3。逆に言うと、新しいことをあまりできていないということでもあり、人数規模もあんまり増えなくて難しいですね。やっていけるといいなと思っています。

 ともあれ、続けていられるのはありがたいことです。個人的には、 LT を聞くのが楽しいので、色々な人の LT を聞ける場がある、というのは幸せなことだと思っています。自分で発表するのは大変ですが、まとめるのは理解になるし、ウケると嬉しいし、 LT 駆動開発のような副次効果もあります。年数回そんな機会が訪れる環境が、なんとなく良いのです (そしてそろそろ次の引き継ぎ)。

 ここで宣伝ですが、 Dentoo.LT は、学内外誰でも参加・発表できます。お待ちしています。

 ちなみに公式サイト Dentoo.LT は、 id:masawada さんの手により、HTTPS化や PWA 対応などが済んでいて、 Lighthouse で 100点満点が出る、最高の Web サイトです。

*1:神田でも北千住でもありません

*2:それが特に主催の仕事というわけでもないですが

*3:"完璧"まではまだ道のりがありそう

 料理をそれなりにできるようにならないと困るので、なんとかしようと思うときがたまにあり、たまにやるのだけど、全くわからなくて、なんでこんなこと全人類できているのかと憤り続けて、美味しくない成果物を食べ続けることになっている。たまにしかやらないので上手くならないのは正しいけど、毎度なんでこんなに訳のわからないことをしているのかと怒りまくって、もうしばらくやりたくなくなるので、毎日やることはない。大体なぜ紀元2018年にもなってこんなに原始的な手順を踏んでいるのか、手順書も感覚的な表現しかない、人に依るのだからと言われたところでそれはそうだが、何がどう適するのかさえ何もわからない人はそもそも選択肢すら無いわけで、ここで何を入れたら美味しくなるのか不明なまま作り上げることはまずできない。食べるときに意識していないのもそうだと思う、思うけど作れないのでイメージも何もない。デッドロックが多すぎる。最初に基本を脳に叩き込めばわかってくると思うし、記憶力のある人は得意だろうと思う。僕はない。プログラミングでは、何もないところから知らない言語やフレームワークでデカいソフトウェアをつくれと言われてもまず無理で、どういう関数が用意されているのかとかもわからないから、小さなものとか、既にできている大きなプロダクトに少しずつ関わるとかすると、流れが読み取れたり、こういう関数があるのかとわかったり、だんだん覚えていける。料理も、小さいものからつくったり、手伝ったりすればわかるようになりそうだけど、プログラミングと違うのは、明確に書き記されないという点で、なんでそれをやるのかとか、それをやると何が嬉しいのかがまるでわからない。実際やっている人に聞いてもわからないと言われることがあるので希望はない。まあいずれ必要に駆られたらやると思う。ちなみに料理をやること自体は苦ではない。何甘ったれたことを言っているのかというお叱りは必要ありません、ただとにかく誰となく怒っているだけです。

今週の頑張り

 一から Webアプリを作ったことがなかったので、現在地の情報を勝手にエディンバラに付けてツイートする Webアプリを作って勉強した。 Ruby 使っているけど Ruby あんまりわからないので雑。

github.com

 まずツイートしたいと思って、簡素にできると聞いていた Sinatra を使って、 apps.twitter.com でキーを 4つとも取得してコードに直書きして、 Twitter gem で OAuth 完了状態にしておいてツイートしたりした。Twitter::REST::Client.newにキー4つを渡すのだけど、 Twitter gem の使い方はなんとなくインターネットを見てやっているので正しいのかわからないけどリクエストはできている、みたいな状態。
 Twitter のアプリのキーを 4つとも取得して置くのは本当は違って、アプリ固有のキー (2つ)でユーザ固有のキー(2つ)を取得する、みたいなことをするのが OAuth で、以下で直していくけど、とりあえずツイートしたかったのだった。

 現在地情報は、Twitter::REST::Tweets#update の引数に渡すオプションのハッシュに latlong で緯度経度を指定すればよいらしいのでやったけど、できなくて、色々やっていたら place という方に Twitter::Place を渡すとできた。
 渡す Twitter::Place は、 Twitter::REST::PlacesAndGeo#geo_search で取ろうとしたけど、なんか情報がたくさん要るらしくてわからなくて、 Twitter::REST::PlacesAndGeo#similar_places のほうに、緯度経度をlat, long、「Edinburgh」という地名を name で渡した。
 これでエディンバラの場所情報がついたツイートができた。

 テンプレートを書いて、formからPOSTでリクエストしたらtextareaの中身をツイートするようにした。paramsにフォームの内容が入っていて、textarea[name="text"]ならparams[:text]で取れて、それをツイートする。

 なんとなくツイートできるようになったので、 OAuth したくなったのだけど、 Twitter gem にあるTwitter::REST::OAuthは使い方がよくわからなかったのでインターネットを見たら、 OmniAuth というのがよいという話だった。 Sinatra 公式が例として上げているくらいなのですごそう。実際に使うのは omniauth-twitterFacebook とかもあるらしい。
 アプリのキー2つConsumer Key (API Key)Consumer Secret (API Secret)を使って、ユーザのキー2つAccess TokenAccess Token Secretを取って、ユーザごとにTwitter::REST::Client.newするみたいな感じになる。
 OmniAuth で理解に苦しんだところは、肝心の OAuth するところで /auth/twitter とかいうエンドポイントにリダイレクトするけど、そのエンドポイントは定義してないじゃん、というところで、実はコメント文をよく見ると書いてあって、/auth/twitterは OmniAuth が拾うので、投げるだけでよいらしい。
 リクエストは投げられるけど Sinatra が 403 エラーを出すのでインターネットを見たら、 apps.twitter.com のほうでアプリの callback URL をちゃんと指定しないとそうなるらしかったので、したら直った。これ難しくて、 403 とだけ出されても、特に解決方法がわからない。 callback URL は、この場合ドメイン/auth/twitter/callback とするようになっているけど、多分なんでもよくて、beforepass if request.path_info =~ /^\/auth\//のところで引っ掛けたいから/authで始めている、というだけだと思う。ドメイン/koorubakku というふうにして、pass if request.path_info =~ /^\/koorubakku/とか足せば良いんだと思う。
 あとそもそも pass if request.path_info =~ /^\/auth\// にうまく引っかかってない感じがあって、無限に認証しまくるループになったりした。いや引っかかってるのかもしれないけど pass が上手くいってないのか、 pass がそもそも何なのか知らないので、何もわからなくて、使うのやめて、素朴に if で条件分岐するようにした。しかも、そもそも勝手に認証してほしくないので、before も使わなくなる(後述)。
 あと認証済みかどうかを保存するのにsessionというハッシュに突っ込んでおくようにしたけど、なんか Rack のセッションらしくて、よくわかっていない。なんかうまいことセッションをやってくれるんだと思う。あんまりなんでもかんでも突っ込むと、容量オーバーして怒られるので、最小限にする必要があるけど、ツイートごとにユーザを認証したりするのは絶対おかしいので、Twitter::REST::Clientは入れておくようにした。合ってるのか全然わからない。

 これで大体動くようになってきて、テンプレートにログイン/ログアウトボタン足したりした。

 ここでツイートをするのに毎度ページ遷移(見た目は変わらないけど毎度読み込んでる)するのはもったいないなと思ったので、JavaScript でPOSTリクエストすればいいか、となり、それなら axios が良いですよ、と教えてもらったので使った。POST リクエストは上手くパラメータが取れなかったので、GET リクエストにしている。ちゃんと勉強すればできるんだと思うけどちょっと勉強したくらいでは解決できなかった。

 あとの問題は公開で、サーバのこともよくわかってないので、ここの勉強もいずれはしたいけど、今回は良いかと思ってしまったので、 Nginx のこと勉強したりせずに、 Heroku にデプロイすることにした。 Procfileweb: bundle exec ruby app.rbとかやればいいらしいのだけど、Thin というサーバが小さくて便利だよとインターネットに書いてあったので開発中にも使っていて、そのまま使おうかなという気持ちになったので、bundle exec thin -R config.ru -p $PORT start とか書いた。 $PORT は勝手にセットされるらしい。開発環境で何もしていしないと 5000 番になった。 Heroku なら Heroku 側が好きなように渡してくれるんだと思う。
 Heroku で yarn installとかyarn run buildとかしてもらいたくてインターネット見たら、Heroku の Settings で Buildpacks ってところに Node.js を足せばよいらしいと書いてあって、そうした。yarn run heroku-postbuild とかを実行してくれるので、package.jsonに書いておくとやってくれる。今回は webpack 使ったので、それをやってほしかったのだった。
 これでちゃんと HTTPS で配信されるし便利。

 こういう気持ちで webpack.config.js 書いてるのか~とか、エンドポイントってこういう感じに切ると便利なのか~とか、少しずつ学びがあってよかった。今回は特に CSS はやっていないし、 Ruby とサーバは分かってないのでそこは勉強が必要。