すなぶろぐ

月: 2020年6月

  • ::beforeとは

    ::beforeとは

    Webサイト制作の勉強をしている時に、参考にしているWebサイトに「::before」という要素があった。見たことはあったけど、ちゃんとその機能について調べたことなかったから、気になって調べることにした。

    before要素とは

    表面的に言うと「cssの擬似要素」らしい。全然意味分からんから、もう少し深掘りしてみよう。

    擬似要素とは

    まず擬似要素ってなんやねん、って話。「MDN web docs」によると、擬似要素は

    CSSの擬似要素はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

    https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

    と書いてある。文字の説明だと全然分からんから、実例を見て理解することにする。例えばこちら。

    <p class="hello">こんにちは</p>
</style>.hello::first-letter {color: red;}</style>

    こんにちは

    上記の様にpタグで囲った「こんにちは」という文字列を、擬似要素でfirst-letterのcolorをredにすると、「こ」のみが赤色に変化する。

    次はこれ。

    <div>
  Hello, world!<br>
  This is Suna.
</div>
div::first-line {font-weight: bold;}
    Hello, world!
    This is Suna.

    こうやって書くと、divタグ中の最初の文章「Hello, world!」だけfont-weightがboldになる。

    要はHTML上では存在しない要素をcssで擬似的に作ることができるって感じかな。

    before要素で何ができるの？

    上記の例の様に、beforeを用いてできることを列挙してみる。

    <p class="line">私は2文目です。</p>
.line::before { content: "私が1文目だ。"; }

    私は2文目です。

    本来コード上では「私は2行目です。」という文字列しか存在しないけど、ブラウザ上では「私が1行目だ。」という文字列がpタグの「私が2行目です。」の前に表示される。

    また、beforeとコンビのafterをセットで使って以下の様な表記もできる。

    <p>初めまして。</p>
p::before { content: "「"; }
p::after { content: "」"; }

    初めまして。

    上記の様にcssを書くと、ブラウザ上では『「初めまして。」』と表示される。

    また「サルワカ」に書いてあったのだが、FontAwesomeのアイコンを上手い具合に表示できるみたい！テンションが上がって、日本語が下手過ぎるので、これも例を見せて紹介しようと思う。

    <p>これはブックマークです。</p>
p::before {
  font-family: "Font Awesome 5 Free";
  content: "\f02e";
}

    cssでfont-familyに「Font Awesome 5 free」、contentにFontAwesomeのunicodeを書くと以下の様にFont Awesomeのアイコンが文章の前に表示されます。

    これはブックマークです。

    この様にbeforeを上手に使えば、HTML自体を操作しなくても表現したい要素をcssで追加的に記述することができる。

    【結論】

    beforeを有効に用いることができると表現の幅が広がるねっ！よく調べてみると擬似クラスってものもあるらしい。今度はそれについても調べてみようかな。

  • English Expressions #1

    English Expressions #1

    This is my studying diary. I write some new English expressions I learned during my study. Let’s go!!!

    Jacked

    well muscled, iron-bound, pumped.

    It means someone is super muscled. Imagine people like Arnold Schwarzenegger. He is a jacked person.

    at the end of the day

    something that you say before you give the most important fact of a situation.

    I’ve started studying English these days, but at the end of the day, I think I’ll forget everything.

    fair enough

    used to admit that something is reasonable or acceptable.

    I’ll eat the meat, and you eat the rice. Is it fair enough?

    when it comes to

    used to identify the specific topic that is being talked about.

    When it comes to Sushi, I LOVE tuna.

  • プロテインの効果的な飲み方

    プロテインの効果的な飲み方

    最近の自粛期間で何か新しいことができないかって調べてて、筋トレを始めることにした。せっかく筋トレを始めたし、プロテインも一緒に飲もうって思って買ったんだけど、どうやったら1番効果が出るかを調べてみた。

    プロテインの役割

    そもそもプロテインが何をする物なのか、イマイチちゃんと知らなかった。「筋トレの後に飲むといい」くらいのことしか知らなかったから調べてみることにした。

    プロテインは英語で「タンパク質」っていう意味。名前の通り、タンパク質を供給してくれる。

    一般には体重のグラム分のタンパク質を1日に摂取するのが目安らしい。その目安量を摂取し切れない人や、筋トレをしていて多めにタンパク質を摂りたい人が食事以外にタンパク質(やそれ以外の栄養素)を摂取するためにある。

    プロテインの種類

    プロテインに種類があるって知ってた？原料や製法で以下の3種類がある。

    • ホエイプロテイン
    • カゼインプロテイン
    • ソイプロテイン

    ホエイプロテイン

    有名なプロテインの商品のせいで、プロテインと聞くとこの「ホエイプロテイン」を思い浮かべる人も多いと思う。これは原料が牛乳の、動物性のプロテイン。水に溶けやすくて、体内への吸収が速い。

    カゼインプロテイン

    これも牛乳が原料の動物性のプロテイン。水に溶けにくいから体内への吸収時間が遅いのが特徴。

    ソイプロテイン

    このプロテインは原料が大豆の植物性のプロテインである。動物性のプロテインと比べて、糖質・脂質が少なくて植物性タンパク質が多い。このソイプロテインも水に溶けにくいから体内への吸収速度は遅い。

    種類分類原料吸収
    ホエイプロテイン動物性牛乳速い
    カゼインプロテイン動物性牛乳遅い
    ソイプロテイン植物性大豆遅い
    プロテインの種類

    無駄にしないための飲み方

    せっかく買ったプロテインを無駄にしないための飲み方を調べてみた。ポイントはそれぞれの吸収速度を基準に飲むといいと思う。

    筋トレの直後に

    当たり前過ぎるけど、筋トレの直後は飲むといいよね。筋肉が疲弊して修復に栄養素を必要としてるから、この時は体内にすぐに摂取できる吸収速度が速いホエイプロテインを摂取すると1番効果があるよね。

    間食に

    吸収が遅く、腹持ちがいいからカゼインやソイプロテインを摂取するのがオススメ。

    就寝前に

    寝ている間に分泌される成長ホルモンにタンパク質を供給するために、就寝前に摂ったり、その他にも食事で足らない成分を補うために、食事と一緒に摂取するのもあり。就寝前については、ゆっくり吸収させるために吸収速度が遅いプロテインを飲むのがオススメ。

    【結論】

    英語で「タンパク質」っていう意味ってことは、逆の世界線だったら世界中で「Tanpakusitsu」って商品名が名付けられたってことだよね。そう考えるとおもろいね。

  • 「SQSに渡して非同期にする」とはどういう意味なのか？

    「SQSに渡して非同期にする」とはどういう意味なのか？

    最近仕事である処理を作成した。その機能がある程度まとまってきたとき、上司に「その処理はまるまるSQSに渡して非同期処理させてほしい」と言われて、その場で「はい！」と答えたが、全部の単語の意味が分からなかったため調べることにした。

    SQSとは

    Amazon Web Service(以下、AWS)の中の1つのサービス。Amazon Simple Queue Serviceを略して「Amazon SQS」や単に「SQS」と呼ぶ。
    AWSのドキュメントを参照すると、

    Amazon Simple Queue Serviceは、分散されたソフトウェアシステムとコンポーネントを統合および分離することができる、安全で耐久性があり、利用可能なホストされたキューを提供します。(更に続く、、、)

    https://docs.aws.amazon.com/ja_jp/AWSSimpleQueueService/latest/SQSDeveloperGuide/welcome.html

    と書いてある。いや、全然分からんわ。もう少し深掘りすることにしよう。

    AWSってなによ

    そもそも論すぎるが名前だけたくさん聞いて、イマイチその詳細が掴めていないAWS。それの概要について調べてみた。

    AWSは、Amazonが提供しているWebサービス。Amazonの自社サイト「Amazon.com」の運営で得たノウハウを活用して、それを外部にも商品としてサービスを展開した。具体的には、サーバやデータベースをネット上で貸し出している。

    AWSの様な、サービスをネット上で貸し出す方法を「クラウドコンピューティング」という。一方で自社内にサーバなどの設備を用意するのを「オンプレミス」という。

    多くの場合は、オンプレミスではサーバやソフトウェアなどの情報システムを企業が管理する施設内に管理して、運用することがあたり前だった(寧ろそれ以外がない)。その機材を買うお金や設置する費用、施設の物理的な制限など、あらゆるリソースを割かないといけないのがオンプレミスである。

    その一方で、最近台頭してきたクラウドコンピューティングはネット上でサーバなどの情報システムを貸し出すため、導入した企業が実際に設置するためのリソースを割かなくて良くなった(実際は物理的な設置場所は世界各地に存在するが、それはAmazonが管理するため、借りる企業が管理する必要がない)。

    これらのメリットから、人材・土地・資金などが豊富ではないような小さい企業を中心にAWSが世界の色んな人に使われだしている。そのサービスの中の1つがAmazon SQSってわけ。

    Queue(キュー)とは

    SQSの中にQueue(キュー)という単語が含まれている。queueとはどういう意味なのか。

    weblio英和辞典によると、

    (順番を待つ人や乗り物の)列

    と書いてある。ざっくり言うと「列、待つ」みたいなニュアンスが大事らしい。

    Queue自体は、物事が並ぶ順番を指すことが多い様だ(文脈で変わることがあると何かに書いてあった)。

    例えば、真夏に自動販売機に行列ができていたとする。現在並んでいる順番は「A, B, C, D」である。この時にXが自販機で飲み物を買おうとした場合、いきなり自販機で飲み物を買うのではなくて、一旦列の最後尾に並ばないといけない。この様な仕組みを「キュー」と呼ぶ。システム関係で言うと、データをキューで順番に並ばせて、処理が行われるのを待たせるということだ。

    キューから要素が出ることを「エンキュー(enqueue)」、要素が追加されることを「デキュー(dequeue)」という(調べたらキューで用いる単語らしい。スタックの時はpushとpopっていうらしい)。

    列の先頭から順々に処理されることを「FIFO(First In First Out)」という。日本語で書くと「先入先出」と表現する。キューは「FIFO」を用いている。列があった時、列の先頭から順に処理され、後から来たデータは列の最後の格納されるということです。上記の自販機の列や(追い越しがない)トンネルから出てくる順番が該当する。

    逆に列の末尾から順々に処理されることを「LIFO(Last In First Out)」、日本語では「後入先出」と表現する。キューとは対義語の「スタック」がこの処理をする。列があった時に、後から来た要素を列の末尾に追加しても、その末尾から処理するということだ。FIFOよりケースは少ないが、例えば取り込んで山積みになった洗濯物を上から畳んだらLIFOである。食事で使った食器を上から洗っていったらそれもLIFOになる。

    実践的にキューを理解

    ここで実用例として、パソコンからデータを紙に印刷したい時を想像する。その時にする処理として、

    • コピーしたいデータをコピー機に送信する
    • コピー機がコピーする
    • (完成)

    至極当たり前だが、上記の3つが流れである。まだキューは発生しない。問題となるのが、コピーしたい人が複数存在する時だ。A、BとCの3人がほぼ同時に同じコピー機にコピーしたいデータを送信したとする。タイミングの差でデータがB→A→Cの順番でコピー機に届いたとする。しかし、実際にコピー機が届いたデータを紙にするのにはある程度の時間がかかる。この時にそれらのデータをキューとして並ばせて、順々にコピーすると言う作業が必要になる。ここで「キュー」が登場する。もちろんこの時のキューは「B、A、C」である。

    最初に届いたBをまずコピーする。そのコピーが終了するまで、AとCはキューに入って待つことになる。もちろん順番は「A、C」である。Bが終了したら、次はAの処理が始まる。Cはまだキューの残って順番を待っている。Aが処理中の時に、例えばDが新しく来たとする。「Dをコピーする」とパソコンから信号を受けたコピー機は、Dが来た途端にAのコピーを中断してDをコピーし始めるわけではない。キューを利用し、DをCの次に並ばせて自分の番が来るのを待つ。これで送信した順番に(正確には受信された順番だが)コピーが処理されることになった。

    普段エンジニアとしてプログラムをいじっていると、配列(?)を先頭から取り出し、追加する要素を配列の末尾に追加する作業を高速で処理するのには高度な技術力を要することが想像つく。

    非同期とは

    通信や処理には2つの種類がある。「同期通信」と「非同期通信」の2種類である。

    同期通信とは、相手に要求を出したときにその返答を待つ通信のこと。一方で非同期通信とは、相手に出した要求の返答を待たない通信。

    加えると同期通信は相手の応答を待つが、文字通り「待つ」ので、この間は他の処理ができなくなる。その「待つ」動作をしないで他の通信もするのが非同期になる。

    同期通信の場合は要求の送信タイミングと応答の受信タイミングが一緒だから、データ量が少なくて済む(らしい)。一方で非同期通信は、そのタイミングが異なるから、応答を受け取れるようにするために通信データに「スタートビット」と「ストップビット」というデータを付加して送受信する。非同期通信はこういう冗長なデータが含まれるからデータ量が多くなってしまうというデメリットも存在する。

    通信を待ってもいい処理の場合は同期通信にして、スピード感が必要な通信の場合は非同期通信にするといいね。

    「SQSに渡して非同期通信にする」の意味は？

    さっきのコピー機の例をまた考えよう。処理の順番は「B, A, C」だった。キュー的にBが最初にコピーを開始されるが、その間AとCはコピーがされるのを待つことになる。これらの通信が同期通信だとすると、AとCのパソコンはコピーが完了するまで通信ができず、ずっと待ってる状態になってしまう(多分最初のBも同じと思われる)。だから、これらを非同期にすることでコピーが終わるのを待たなくても、自分のパソコンは普通に作動するような仕組みを実現したいのが狙いだと思う。

    【結論】

    SQSがあると非同期にできるから、即時性が求められる通信にはもってこいだねっ！

  • SSH公開鍵ってなに？

    SSH公開鍵ってなに？

    仕事でsourcetreeを使っているときターミナルから直接pushしようとしたら、SSH公開鍵がどうのこうの、、、ってでてきた。前から言葉は良く目にするけど、中身をちゃんと調べたことなかったから良い機会だと思って調べることにした。

    そもそもSSHとは

    SSHは「Secure Shell」の略。概要を先に説明すると、ネットワークに接続された機器を遠隔で操作して管理するための手段・プロトコルらしい。

    暗号化

    SSHは他のネットワークを操作するための方法、プロトコル。最大の特徴は、このプロトコル(=SSH)は通信の時のデータが「暗号化」されるという点である。セキュリティの観点で言うSSHの対義語に「telnet」というプロトコルがある。こちらはデータが暗号化されないという点で、SSHの登場で最近はあまり使われなくなっている。調べているのを見た感じ、FTPも同様のプロトコル(=telnet?)を使ってるっぽい。このFTPもtelnetも通信内容を暗号化せずに「平文」でやりとりするから安全ではない。

    認証方法

    SSHには「認証方法」がある。なんかSSH周りでこの「認証」という文字はよく見かけるから最初はSSH特有の何かだと思っていたけど、多分どのプロトコル(やそれ以外)にも「認証」自体はあって(telnetにもそれ用のがあると思う)、SSHが色んな場所で用いられているのと認証がちょい複雑だから、よく「SSH認証」みたいなキーワードを目にするんだと思う。

    認証の代表的なものには以下の2つがある。

    • パスワード認証
    • 公開鍵認証

    パスワード認証

    まずは理解が簡単なパスワード認証について見ていくことにする。パスワード認証の仕組みとしては、サーバー側でアカウントに対してパスワードを設定して、遠隔のパソコンからログインするときにそのアカウントとパスワードを入力するとそのサーバーにログインできる(多分)。つまりこの認証方法が簡単と言われる理由は、一旦サーバーのアカウントを作成すれば、あとはパスワードがあればどこからでもログインできる点にある。アクセス自体は簡単だけど、逆にパスワードがバレたら誰でもログインできてしまうから、危険性が低いとは言えない。

    まあ超ざっくりとしか調べてないから、なんかミスってる気もしないでもないけど、とりまこれでいいや。

    公開鍵認証

    今度は「公開鍵認証」について見ていくことにする。前述のパスワード認証に比べて設定の手間は多いが、その分安全性は高い。仕組みは以下である。

    自分側(クライアント)のパソコンでターミナルを操作して、キーペアというものを作成する。このキーペアの中身は鍵で以下の2種類が生成される。

    • 公開鍵
    • 秘密鍵

    この2つの鍵はデータを暗号にしたり、その暗号を解除する機能がある。2つは大きな意味でセットで連動するが、詳細を見てみるともう少し複雑な仕組みが働いている。

    自分のパソコンでキーペアを生成したら、この内の「公開鍵」を接続したいサーバーに渡す。これで事前の準備は完了。ユーザーがこれ以上の操作をする必要はない(はず)。

    流れとしては、クライアントが特定のサーバーに接続したいと要求を出した時、サーバーはあるデータをクライアントに送信する。その時にはサーバーは、元々クライアント側から貰っていた公開鍵の暗号化する機能を使って、データを暗号化する。自分が生成した公開鍵によって暗号化されたデータを、クライアントで受信したあとは、自分の秘密鍵の解読する機能を使って暗号化したデータを再びサーバーに返す。サーバーはクライアントから受信したあとは自分の秘密鍵の解読する機能を使って、暗号化されたデータを解読する。解読したデータを再びサーバーに返す。サーバーはクライアントから受診したデータと自分が元々送信したデータを比較して、中身が等しかったら、そのクライアントからの応答に応じる、という流れ。

    【結論】

    なんとなく流していたSSH認証っていうワードをある程度理解できたから良かった。公開鍵は暗号化するだけの鍵で、秘密鍵は解読するだけの鍵。