CSSアニメーションに入門するのでメモ

りゅうおうのおしごとの空銀子先生の誕生日を調べたら9月9日だったので、何かやりたいと思い、yui540さんが由比ヶ浜結衣の誕生日サイトを作ってたのを思い出した。

由比ヶ浜結衣生誕2018 - 非公式サイト

これを見て我も作りたい!と思ったので、CSSアニメーションにとりあえず入門するぞい。

とりあえずMDN読んどけばいいだろうということで、ここをヨミヨミしてメモをこれから書きます。

CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN

余談ですが、CSS アニメーションでググるとドキュメントより先にQiitaが出てSEO強っ!って思いました。

CSSアニメーション概要

CSSアニメーションは2種類の要素で構成されている

  1. アニメーションについて記述するスタイル
  2. アニメーションの始めとと終わりのCSSスタイルを示すキーフレーム

animationプロパティ

CSSアニメーションの流れを作成するには要素にanimationプロパティを設定する。 animationプロパティは外見を指定するのもではなく、アニメーションをどのようにすすめるかを設定するためのものです。

animationプロパティは値を複数指定して、アニメーションのシーケンスの詳細を指定しますが、それぞれにどのような意味があるのかを覚えるのが大変そうです。

なので、animation-nameanimation-durationなどのサブプロパティを見て、どのような流れを指定できるのかを知るのが良いと思います。

一つ一つの説明をこのブログで書くのは無駄なので公式ドキュメントをぱぱっと見てください。1分位で読めるかと

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Configuring_the_animation

キーフレーム

アニメーションの外見を定義しなければ、animationプロパティで指定してきたことを無駄です!なので学んでいきましょう

これは例を見ればどのようなものか分かると思います。 pタグが画面を横切るようなアニメーションです。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

これの応用で頑張ればいろいろなアニメーションが表現できるかと思います!

ポートフォリオサイトにアニメーションを組み込んで遊んでみたので良かったら見てください。 https://k-nasa.me/

非同期プログラミング on Rust のために知っときたいこと [メモ]

非同期プログラミング on Rust

このメモは「非同期? なんそれ?」っていう初心者がメモ用で書いたものです。 用語の誤用、誤った記述があると思います。ので、コメントで間違ってるところを教えていただけると嬉しいです。

Rustのstableにasync/awaitがもうすぐ入るようなので、非同期プログラミング,Futureについて勉強していこうと思います。 それのメモがこれです。

非同期プログラミング

非同期プログラミングとは?みたいなところから書いてきます。

非同期プログラミングは複数タスクを経公的に処理(実行)するための技法。

Webサーバーの例でいうと、1つのクライアントとの通信が終わるのを待たずに、他のクライアントの処理を開始する。これが非同期

Future

FutureトレイとはRustの非同期プログラミングの主役的存在です。 jsのPromiseみたいなイメージかな

以下のような定義になってます。

pub trait Future {
  type Output;
  fn poll(self: Pin<&mut Self>, cx: &mut Context) -> Poll<Self::Output>
}

pub enum Poll<T> {
  Ready(T),
  Pending
}

pub struct Context<'a> { /* fields omitted */ }

impl<'a> Context<'a>
    pub fn from_waker(waker: &'a Waker) -> Context<'a>;
    pub fn waker(&self) -> &'a Waker;
}

pub struct Waker { /* fields omitted */ }

impl Waker {
  pub fn wake(self);
  pub fn wake_by_ref(&self);
  pub fn will_wake(&self, other: &Waker) -> bool;
  pub unsafe fn from_raw(waker: RawWaker) -> Waker;
}

このような実行モデルは、ポーリングモデルと呼ばれています。

具体的には、pollメソッドはselfとコンテキストcxを受け取り、Poll<Self::Output>型を返します。

このPollっていうのはReadyPendingの2つの状態のどちらかを表すことができます。

Readyバリアントは計算完了を表し、計算結果の値を持ちます。

Pendingは呼んでのごとく、完了していないことを表します。

少し戻りますが、pollの引数が&mut selfではなくself: Pin<&mut self>になっています。 これは自己参照構造体を実現するためです。 詳しくはボクも分かってないのでここでは説明できません。雑に記事を貼っておきます。

https://qiita.com/ubnt_intrepid/items/df70da960b21b222d0ad

Poll実行タイミング

Futureの所有者はいつpollを呼び出すのか?という問題があるかと思います。

pollを呼び出してPendingが返ってきたとします。そのようなFutureに対しまたすぐにpollを呼び出すのではCPUを無駄に使用する可能性が高いですね。

なぜなら、Pendingが返ってきているので、計算が終了するまでには、もう少し時間がかかる可能性が高いので。

ここで登場するのが先程しれっと書いたWakerなのですが詳細な話は省こうと思います。

とりあえずWakerのwakeメソッドを呼び出すことでランタイムにタスクの再開通知ができます。

まとめ

一旦終わりです。 肝心のAsync/awaitには入ってないですが、基本的なところはこんな感じなので。

あとから、ジェネレーターやAsync/awaitの話を追記しようと思いますが、とりあえずリリースしようぜの精神でpostします。

Redis速習する

ISUCONやっていて、Redisを使いたくなったので今から「Redis完全に理解した」と 言えるレベルになります。

そのためのメモです。 前、別の記事に書いたことですが、インプットとアウトプットの黄金比は3 : 7らしいです。

なんでその日に学んだことはガンガンアウトプットしていきたいと思います。

続きを読む

Y!SUCONのAMIを作成しました

ISUCONに備えて、Yahoo社内ISUCONのY!SUCONを他大学の人とやろうという話になった。

各個人ごとにvagrantで競技用アプリケーション構築をするのも面倒かと思ったのでec2のAMIを作成しました。

以下のAMI IDで検索すると出てくると思います。

AMI ID
ベンチマーク ami-03a256e5ccce98822
アプリケーション ami-0086cade13566ce12

このとき東京リージョンになっていないとAMIが出てこないので注意を。

f:id:htilcs1115:20190716113216p:plain

ベンチマークの方は起動してそのまま動作するわけじゃないです。 sshで入ってsudo systemctl restart benchmarkerを実行してください。

本当は起動したらすぐ使える状態にするのが良いとは思いますが、めんどくさくってやってません、、、、

アプリケーションの方は大丈夫だと思います。

ベンチやアプリケーションの詳しい説明は公式リポジトリを見てください

GitHub - yahoojapan/yisucon: Yahoo! JAPAN の社内 ISUCON である Y!SUCON です。

では良きISUCONライフを!

ISUCON8の過去問やったので感想書くべし

ISUCONやったらwrite up 書けってじっちゃんが言ってたので書きます。

ISUCON8やってない人はナンノコッチャだと思うのでブラウザバック推奨です。

続きを読む

アウトプット大全を読んだので感想書く

おすすめされて「アウトプット大全」という本を読みました。

https://www.amazon.co.jp/gp/product/4801400558/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1

この本に、本を読んだら必ずや感想を書くべし!と書いてあったのでカキカキしていきます。

3行で

それぞれのアウトプット(話す、書く、行動する)を伝えやすく、実践しやすくする方法を詰め込んだ本。

具体的には、「え、うまく物事を話して伝えるのが難しい?こうすればええで」、「え?! ブログや日報を書くのがめっちゃ遅い? こうすればええで」のようなテクニックの詰め合わせの本です。

そもそもなぜアウトプットするのか?

この本ではアウトプットとは話す、書く、行動する。といったこのと指しています。

行動する。は今ボクがやっているように、本や映画などから学んだこと、良いなと思ったことを実際にやることです。

そもそもなんでアウトプットするの?という話ですが、ただインプットするだけじゃ記憶として定着しないからです。(当たり前ですが)

じゃあ、なんでアウトプットすると定着しやすいのか?という話になりますが、先程言った3つのアウトプットはいずれも運動神経と筋肉を使う動作です。 これらに関する記憶は運動性記憶と言って、覚えやすく忘れにくいらしいです。 深くは知りませんが。

ちなみに普通に本を読むだけ、暗記するだけは意味記憶を使って記憶しようとするので忘れやすく覚えにくいらしいです。

取り敢えず、忘れるのもったいないしアウトプットしようぜと言うことですね。

どんぐらいアウトプットするのん?

コロンビア大学の心理学者のナントカ・カントカさんがやった実験によると、inとoutの割合は3:7が良いとされています。

実験の詳細は省きますが、暗記テストをやるときに問題を覚える時間と練習する時間の割合をいろいろ変えてスコアを計ったときに3 : 7で行ったグループがスコアが高かったとのこと。

しかし、現代の大学生の平均的はin,out割合は7 : 3ほどらしいです。 理想と逆ですね。

プログラミングの学習が巷で流行ってるそうですが、input過多で手を動かせていない人がたくさんいるのではないでしょうか? (ギクっ!)

おもろ!って思ったところを書く

  • 書くことで脳の神経ネットワークが活性化する

へーって思いましたね(小並感)

  • 速く文章を書くには前準備が必要

そりゃそうだろって話ですが、文章の構成を考えるだけで、何気なく書き始めるよりも3〜4倍速く書き終わるらしいです。この数字には驚きました。

  • TODOリストは紙のがええで

著者いわくTODOリスト3原則というのがあります。

  • 紙に書く -> スマホは誘惑が多すぎる
  • 目に見えるところに置く -> 次の作業に取り掛かるときにスッと切り替えられるように(TODOリストを確認するという作業を極限まで減らす)
  • 豪快に消す -> オワタ!!!!!!という間隔を強めることでドーパミンがでてより頑張るぞい!となるらしい。

まとめ

そんなに、真新しい話はなく、あー知ってる知ってる。という内容が多かったので、そんなにおすすめはしないです。ただ知っていて実践しているかと言われれば、やっていないので、行動に移すいいきっかけにはなったのかな〜と思いました。

これからもこのブログに読んだ本の感想が上がっていくことでしょう!

本題

ここからが本題です!

VTuberの夢月ロアさんを最近押しています。ぜひ見てみてください

おわり〜!

ISUCONの最初の30分にやること[計測編]

今日はバ先の人と3人で ISHOCON1をやりました。

今回はチームではやらずに各個人で黙々とやりましたが、僕以外はisuconやるのも初めてという事でかなり苦戦していた様子でした。(僕も無事に死にましたが、、、)

ISUCONの最初の30分で秘伝のタレを入れたり、使い慣れた計測ツールを入れたりするのは定石となっていますが、初めてやる方はそこで詰まるというのもあるかと思いました。

計測してしまえばあとは取り除くだけ!という事で、最初の30分 ~ 1時間でやりたい計測ツール導入をドキュメント化しようと思います。 (推測するな。計測しろ!という名言は私の言葉です)

続きを読む