2020-04-11

時刻を表す要素を強調表示するUserCSS (2)

技術

utgwkk.hateblo.jp

以前このような記事を書いて、時刻を表す要素を強調表示するUserCSSについて紹介した。

しばらく運用してたけど、フォントサイズが大きくなるのでいろいろなサイトのレイアウトが崩れまくるという問題があった。フォントサイズはそのままに、かつ目立たせられないか、ということでCSSアニメーションで書き直した。

やってることは以下の2つ。

時刻を表す文字列の色を白くする
時刻を表す文字列の背景色を、赤→緑→青→赤… と切り替える

これなら、既存のレイアウトを破壊することなく、時刻を効率的に目立たせることができる。どうぞご利用ください。

gyazo.com

time, .article-update, .hdLogoWrap .source, .publish-date {
    color: white !important;
    animation: partyTime 0.5s infinite;
}

@keyframes partyTime {
    0% {
        background-color: red;
    }
    33% {
        background-color: green;
    }
    66% {
        background-color: blue;
    }
    100% {
        background-color: red;
    }
}

CSSアニメーションは @keyframes を適当に指定したらいい感じに補間してくれて便利ですね。

2020-04-10

■

KIRIMIちゃん.に投票したよ☆
みんなも投票しよう！ https://t.co/RRejVMCEZW
— うたがわきき (@utgwkk) 2020年4月10日

twitter.com

2020-04-08

■

高校の頃は放課後に部活に行かずに暇を持て余しており、レンタルコミックで漫画を借りては読みまくっていた。レンタルコミックは金のない高校生にとってはいい娯楽だった。そのとき読みまくってた漫画の中に「日常」があった。

当時*1、高校に入ったぐらいだったと思うけど、「未来日記」とか「男子高校生の日常」とかも読みあさってた気がする。「わたモテ」も、連載当初から読んでたと思うんだけど、なんか読むのをやめてしまった。最近になって百合漫画ということでフィーチャーされてるなあ、と見ている。

ほかにも読んでた漫画はあったと思うけどなぜか「日常」に対する思い入れがあって、アニメも見た*2しグッズも買った。グッズは買ったというか正確にはもらったと言ったほうがいいか。

日常大工カフェマグカップ

発売日: 2012/06/14
メディア: おもちゃ＆ホビー

これかと思ったけどこれじゃなくて、英語のテストのキャラクターが描いてあるやつ。気に入ってて、大学に進学するまではずっと歯みがき用のコップとして使っていた。

春休みキャンペーンということで全話無料で読み放題になっているので読んでください。いま読んで分かったことは、水上麻衣さんが好きなのではないかということです。 8巻ぐらいからは追えてなかったぽくて、いきなり登場人物の未来の姿が出てきたり、どんどん勢いがついてきたりしていた。水上麻衣さんの良いカットも増えていってたように見える。

web-ace.jp

日常の第一話

発売日: 2018/11/30
メディア: Prime Video

*1:2012年ぐらい

*2:なぜかNHKで放送してたので見れた

2020-04-05

SlackのスラッシュコマンドをHerokuからCloud Functionsに持っていく

技術

/string_random で、与えられた正規表現にマッチする文字列をランダムに生成するSlackのスラッシュコマンドを作って、サークルのSlack workspaceで動かしている。

これまではHerokuで動かしていたのだけれど、Herokuだと寝ている時間が支配的で、たまに人間が来てはスラッシュコマンドを打ってもなかなか起きなくてタイムアウトすることがよくあった。いつもサーバーは起きてる必要ないし、スラッシュコマンド来たときだけ反応してくれればいいので、サーバーレスってやつにしたい。 Cloud Functionsがいいって聞いて、週末暇だしやるか、ということでやった。

以下はCloud Functions触ってみた感想。

Python3.7で、Flaskの枠組みに乗っかって書けるのは楽で良い
- jsonify(...) って書いたらよい
- 実装はあるのでほぼほぼ持ってくるだけ github.com
デバッグがなかなか大変
- デプロイして、スラッシュコマンド打ってみて、うまくいかないのでログを見て……というので往復しまくり
- app がないとか、 jsonify がないとかで足したり消したりしていた
- 9回デプロイしてついにうまく動いた gyazo.com
コンソールからぽちぽちして関数作れば完成、と思っていたけど、いざリクエスト投げたら403返ってきて首をかしげた
- allUsers っていうメンバーを関数に追加する必要があるらしい stackoverflow.com
- これドキュメントに書いてあるのかな