五島移住エンジニアの日々

2024年夏、五島に移住します！移住に関する情報や、エンジニアとしてのアウトプットなど中心に書いていきます！

ラーメン二郎野猿街道店2

日記 ラーメン グルメ

2024/02/14

今年の夏には東京を離れるので、今のうちに行けるところに行っておこうと思っていました。
そこで候補にでてきたのが、大学時代に通っていた「ラーメン二郎野猿街道店2」。

ラーメン二郎 八王子野猿街道店 2
ラーメン二郎 八王子野猿街道店 2
〒192-0355 東京都八王子市堀之内2-13-16
042-675-6806
地図や店舗情報を見る
Powered by ぐるなび
r.gnavi.co.jp

有名な話ですが、二郎は店によって味が違います。
思い出補正も込みで野猿街道店2は二郎の中では一番うまい店だと思っているのですが、なかなか行きづらいところにあるので大学卒業してから10年近く行けていませんでした。
平日に行けるアドバンテージを活かして10年ぶりに行ってきました！！

京王線

京王線で新宿から40～50分くらい。
ピューロランドのある京王多摩センターから1駅の京王堀之内駅から徒歩10分くらいのところにあります。

行列！

平日だというのに20人くらいの列が！！
ただ、店内は広く回転率も高いので並んだ時間的にはおそらく20分弱です。
並ぶ前に食券を先に買うタイプです

小ラーメン ニンニク

大学時代は野菜マシだったのですが、もうはしゃげる歳ではないので控えめに😅
「ニンニクは？」「お好みは？」など店によってトッピングの聞き方は異なりますが、ここでは出来上がり時に「小（ラーメン）の方」と聞かれます

久々に食べた感想ですが…

やはり個人的には二郎の中で一番美味いと思いました！

まず麺のもちもちワシワシ具合が段違いです。
比喩ではなく顎が疲れます🙄
そのくらいのもちもち麺なので、見た目より更に量が多く感じます。
他のところで食べるより完食までの道のりが長かった…

そして豚！
意識しているのかしていないのかは不明ですが、とろとろの部分と肉々しい部分の2種類が入っていてどちらも美味い。

スープもデフォルトで味濃いめで、二郎らしいパンチはありますが、乳化が効いていてまろやかです😋
野菜も程よくシャキシャキ感が残っていて美味しいです。

まさに二郎の完成形ですね！




余韻に浸りつつ、パンパンの腹を休めながら思い出の大学周辺を散策して帰ってきました。
もうしばらく行くことはできないかも知れないですが、また数年焦らしたときの野猿二郎はさぞかし美味いんだろうなぁと未来に思いを馳せて。

ごちそうさまでした！

【CSS】::beforeなどの疑似要素について

プログラミング-CSS プログラミング

疑似要素

CSSで要素の特定の部分や位置にスタイルを適用するための仮想的な要素。
実際のHTML文書内には存在しないため、疑似という名がついている。
CSSを使用してページ内の特定要素に共通なコンテンツやスタイルを挿入するために利用される。

なお、インラインスタイル属性（<p style="hoge fuga"）には疑似要素を指定できない。

例）

  • ::before: 要素の最初の子要素としてコンテンツを挿入する。
  • ::after: 要素の最後の子要素としてコンテンツを挿入する。
  • ::first-line: 要素の最初の行にスタイルを適用する。
  • ::first-letter: 要素の最初の文字にスタイルを適用する。

::beforeについて

例として、::beforeについて解説する。 CSSの::beforeは、疑似要素（pseudo-element）の1つで、指定した要素の最初の子要素としてコンテンツを挿入するために使用される。
テキストやアイコンなどの追加のコンテンツを挿入するために利用される。

例えば、以下のように::beforeを使用して、段落要素（<p>）の前にアイコンを挿入することができる。

p::before {
  content: "\2022";  /* Unicodeで黒い丸（●）のコードポイント */
  margin-right: 8px;  /* アイコンとテキストの間にスペースを追加 */
}

::beforeにはcontentプロパティが必要で、これは表示するコンテンツを指定する。
他にもスタイルや配置に関するプロパティも使用できる。

当ブログのメッセージ系エリアにも使用している。

"メッセージエリア"

この例では以下のようなCSSを当てている。

msgboxCheck {
    display: block;
    background: #e3f7df;
    padding: 16px;
    border-radius: 8px;
    margin: 6px 0 12px 0;
    
    &::before {
        content: "\f058";
        color: #55c500;
        font-weight: 900;
        margin-right: 8px;
        font-size: 18px;
        font-family: "Font Awesome 6 Free";
    }
}

疑似クラス

疑似要素と混同しがちな概念に擬似クラスがある。
擬似クラス（Pseudo-classes）は、要素の状態や位置に基づいてスタイルを適用するために使用されるCSSの概念のこと。
こちらはコロン（:）が一つで、:hoverなどが代表的。

例）

  • :hover: マウスが要素の上にホバーされているときにスタイルを適用する。
  • :active: 要素がアクティブ（クリックされている）ときにスタイルを適用する。
  • :visited: リンクが既に訪れたことがある場合にスタイルを適用する。
  • :focus: 要素がフォーカスを受けているときにスタイルを適用する。主にフォーム要素に使用される。
  • :nth-child(): 要素が親要素内で何番目の子要素であるかに基づいてスタイルを適用する。
  • :nth-of-type(): 要素が親要素内で同じ種類の要素として何番目であるかに基づいてスタイルを適用する。
  • :not(): ()内で指定したセレクタと一致しない要素にスタイルを適用する。

【Tips】CSS確認用ページ

Tips Tips-はてなブログ

カスタムCSS確認用です。
自分用ですが、.md記法向けのデータを最後に置くのでもしよければご利用ください。

h1

h2

h3

h4

h5
h6

基本装飾

太字
取り消し
イタリック

リスト

  • list1
    • list2
      • list3

番号付きリスト

  1. number1
    1. number2
      1. number3

テーブル

column1 column2
cell1 cell2
cell3 cell4

コード

import 'hoge';
console.log('hello world!');

寿限無 寿限無 五却のすりきれ
海砂利水魚の 水行末 雲来末 風来末
食う寝る処に住む処 藪ら柑子の藪柑子
パイポパイポ パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の 長助

インラインコード

console.log('hello world!');

引用

学びて時に之を習ふ。亦説(よろこ)ばしからずや。 朋有り、遠方より来たる。亦楽しからずや。 人知らずして慍(うら)みず、亦君子ならずや。

メッセージボックス

カスタム（font-awesomeを使用）

check
確認 warn
警告 alert
警報 info
情報

はてなデフォルト

message-box
error-box

このページの元データ

コードのところにあるバックスラッシュ（\）は削除してください。

[:contents]

# h1
## h2
### h3
#### h4
##### h5
###### h6

# 基本装飾
**太字**  
~~取り消し~~  
_イタリック_

# リスト
- list1
  - list2
    - list3

# 番号付きリスト
1. number1
   2. number2
      3. number3

# テーブル
|column1|column2|
|---|---|
|cell1|cell2|
|cell3|cell4|

# コード
\```javascript
import 'hoge';
console.log('hello world!');
\```

\```text
寿限無 寿限無 五却のすりきれ
海砂利水魚の 水行末 雲来末 風来末
食う寝る処に住む処 藪ら柑子の藪柑子
パイポパイポ パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の 長助
\```

# インラインコード
`console.log('hello world!');`

# 引用
> 学びて時に之を習ふ。亦説(よろこ)ばしからずや。
朋有り、遠方より来たる。亦楽しからずや。
人知らずして慍(うら)みず、亦君子ならずや。

# メッセージボックス
## カスタム（font-awesomeを使用）
<msgboxCheck>check<br>確認</msgboxCheck>
<msgboxWarn>warn<br>警告</msgboxWarn>
<msgboxAlert>alert<br>警報</msgboxAlert>
<msgboxInfo>info<br>情報</msgboxInfo>

## はてなデフォルト
<div class="message-box">message-box</div>
<div class="error-box">error-box</div>

AWSクラウドプラクティショナー 第6章 ストレージサービス

AWS AWS-クラウドプラクティショナー

クラウドプラクティショナー勉強録シリーズ。

toyamadori.hatenablog.com

一般技術キーワード

レプリケート

複製のこと。
レプリカ（replica）を作るからレプリケーション（replication）。
バックアップとの違いは「すぐに使えるものとして保存するか否か」。

IOPS

Input/Output Operations Per Second.
一秒間あたりの入出力操作数のこと。

プロビジョンド

プロビジョニング＝予測し準備しておくことなので、プロビジョン○○と言ったら「予約された〇〇」といった意味合いになる。
プロビジョンドIOPS SSDは「一秒間のI/Oが決まっているSSD」という意味。

イレブンナイン

システムやサービスの可用性を表す際に使われる表現で、99.999999999%の信頼性や可用性を持つことを表している。
具体的には、一年間において約5分間のダウンタイムしか許容しないことを示している。 小数点以下の細かい数字はあまり意味がないためか、ファイブナインズとも言うらしい。
イナズマイレブンとは何ら関係がない。

クライアントサイド暗号化

データをクライアント側で暗号化してからサーバーに送信するセキュリティの手法。
通常、データがクライアントからサーバーに転送される際に、サーバー側で暗号化されるのが一般的だが、 クライアントサイド暗号化では、クライアント（データの所有者または送信者）がデータを事前に暗号化し、サーバーは暗号化されたデータをそのまま保存または処理する。
セキュリティは向上するが、鍵管理のリスクが生じる。

DR

Disaster Recoveryの略。
災害復旧の意味。

256ビットAdvanced Encryption Standard

AES-256のこと。
暗号化アルゴリズムの一種で、暗号と複合に同じ鍵を使う「対象鍵暗号アルゴリズム」。

CNAME

Canonical Name（=正規名）のことで、DNSにおいて使用されるレコードの一つ。
ドメインの別名（エイリアス）を指定するために使用される。

例）

www.example.com.    IN    CNAME    webserver.example.net.

EBS

ここでも出てきた、EC2で使用するブロックストレージサービス。

  • 必要なときに増やし、不要になれば削除が可能
  • AZ内で自動的にレプリケートされる
  • ボリュームタイプ（プロビジョンドIOPS, スループット最適化など）を使い始めたあとでも変更できる
  • 容量も使い始めたあとでも変更できる
  • スナップショットをS3に保存できる
  • 暗号化もできる
    • 暗号化した場合EC2からのアクセスは自動的に暗号化されるため追加の設定などは必要ない
  • データは永続的なのでインスタンスを停止してもデータは保持されている

インスタンスストア

EBSの対の存在として、EC2インスタンスのローカルストレージをインスタンスストアと表現する。
インスタンスが起動している間だけデータが保持される。

S3

言わずと知れたストレージサービス。 Amazon Simple Storage Service。

  • 容量は無制限
  • 同一リージョン内の複数AZにまたがって自動的に冗長化
  • デフォルトではブロックパブリックアクセスによりインターネットからの直接アクセスをブロックしている
  • EC2などからS3へのアクセス件を設定するにはIAMロールを使用して権限を割り当てる
  • 耐久性は99.99999999%（=イレブンナイン）
  • 可用性は99.99%

アクセス権限

対象 アクセス権
バケット自体
オブジェクト

現在はアクセスコントロールリストは非推奨とされている。
複雑であることや、他の手段（IAMロール、ポリシー）の方がより柔軟で制御できることなどが理由。

バケットポリシー

JSONで管理する許可設定。

料金

の3つの要素がある。

ストレージ料金

1ヶ月の平均保存料で算出される。
リージョンやストレージクラスによっても料金が変わる。

ストレージクラス

ストレージクラス 特徴
標準 デフォルトのストレージクラス。
静的Webコンテンツの配信に利用
低頻度アクセス
標準IA / 1ゾーンIA		 アクセス頻度が少ないオブジェクトの格納に使用。
デフォルトに比べてリクエストやデータの取り出しに料金が追加される。
1ゾーンIAはその名の通りAZを1つに絞るので、コストは下がるが可用性も下がる。
IA = Infrequent Access（低頻度アクセス）
Amazon Glacier 単独のサービスとしても利用できるアーカイブサービス。
リアルタイムなアクセスは不要だが規約によって保存年数が定められているアーカイブデータなどに利用。
「グレイシア」と読むがIPAは「グラシア」と表現している模様
氷河という意味。
Intelligent-Tiering アクセス頻度を自動的に解析しコスト効率化を図る。
モニタリング料金は発生するが、アクセス頻度が不明なケースでは有効。
インテリジェントティアリングと読む。

ライフサイクルポリシー

最初はIntelligent-Treiring → 1ヶ月後に低頻度アクセス
などのポリシーを設定でき、自動でストレージクラスを変更しコストを削減できる。

リクエスト料金

アップロード/ダウンロードのリクエスト料金。
リージョンによって異なる。

データ転送料金

リージョンの外にデータを転送した場合に発生する。
ただし、インターネットからS3へのデータ受信には課金されない。
また、リージョン外であってもCloudFrondへの転送は課金対象外。

その他のストレージサービス

EFS

Elastic File Systemの略。
S3はストレージサービスなのでリソース単位でHTTP経由のアクセスをするが、EFSはファイルシステムなのでEC2にマウントして読み書きがダイレクトにできる。
NFS（Network File System）というプロトコルで使用される。
また、EBSと違い複数のEC2にまたがっての利用もできる。

Storage Gateway

オンプレのデータセンターやアプリケーションから、S3やGlacierなどのストレージを利用できるサービス。

Snowball

過去記事参照。

勘違いし易い点

練習問題で引っかかった点がいくつかあったのでメモ。

  • EBSは同一AZ内の複数サーバーでレプリケート、S3は同一リージョン内の複数AZで冗長化
  • S3の可用性は99.99%、耐久性は99.999999999%
  • お客様のキー = クライアントが自分で持っているキーのこと
    サーバー側で暗号化するのではなくクライアントが自分のキーを使って暗号化するという意味合い

所感

練習問題が他のと比べて引っ掛けが多い気がする…
よく復習しよう。

AWSクラウドプラクティショナー 第5章 コンピューティングサービス

AWS AWS-クラウドプラクティショナー

クラウドプラクティショナー勉強録シリーズ。
予定が重なって更新が遅れてしまいましたが、ボリューミーだったので何日かに分けて勉強してました。 toyamadori.hatenablog.com

一般技術キーワード

SUSE

Linuxのディストリビューションの一つ。
読み方はスーゼ。
ドイツの企業であるSUSE LLC（またはSUSE Linux GmbH）が開発。

SPOF

Single Point Of Failureの略。
日本語で単一障害点。

SSLターミネーション

SSLの通信を終了するプロセスのこと。
対義語はSSLパススルー。 クライアントがHTTPSのURLにアクセスしたあと

SSLターミネーション：サーバーでSSL/TLS通信が解読され、以降の通信は非暗号化
SSLパススルー：　　　サーバーでは解読が行われず、以降の通信は暗号化されたまま

という違いがある。

yum

Yellowdog Updater, Modifiedの略。
yarnはjsのパッケージ管理ツールだが、yumはCentOS, RHELなどのRed Hat系で使用されるパッケージ管理ツール。
Debian系で言うところのaptに当たる。

サイジング

アプリケーションが必要とするのに必要なリソースを見積もること。

Amazon EC2

Elastic Compute Cloudの略で「柔軟なリソースの拡張・縮小が可能なクラウド上のコンピュータ」という意味。

AMI

Amazon Machine Imageの略で、EC2インスタンスを作成するためのテンプレート。
OSやアプリ、設定情報などが含まれている。
アカウント間で共有できるが、リージョンをまたいで共有はできない。
リージョンをまたぐ場合はコピーする必要がある。（逆に言うとコピーはできる）

柔軟性

簡単にインスタンスを増減できるので、必要なインスタンス数の予測を行う必要がない。

コスト

稼働時間

OSやリージョンなどにもよるが、インスタンスの起動時間が課金対象になる。

データ転送

異なるリージョンやAZに転送した際、インターネットに転送した際のOUT向きの通信に課金される。
逆にインターネットからEC2のIN向きの転送は課金対象外。

ストレージ

正確にはEBS（Elastic Block Store）の料金。
1GBあたりの価格が設定されている。

Amazon EBS

Amazon EBS（Elastic Block Store）は、Amazon Web Services（AWS）が提供するブロックレベルのストレージサービスであり、EC2インスタンスにアタッチして使用する。

インスタンスタイプ

例）t2.microと表記されたインスタンスタイプは、各部が以下のような意味を表す。

部 意味
t ファミリー
2 世代
micro サイズ

性能や料金が異なるので、これらの組み合わせから最適なものを選ぶ。
なお、インスタンスタイプはあとからでも変更できることもクラウドの強み。

ファミリー

ファミリー ユースケース
t 汎用、検証（Test？）
m 汎用（Medium）
c コンピューティング
x, r メモリ最適化
p, f, g 高速コンピューティング
h, i, d ストレージ最適化

世代

機能追加などでバージョンが上がると数字が上がる。

サイズ

性能レベルを指す。

EC2へのトラフィックの制御

セキュリティグループによって制御できる。
インバウンドトラフィック側の設定を変更し、例えば80ポート（HTTP）は許可するが22ポート（SSH）を許可しない、などといった設定にできる。

料金オプション

オプション名 課金形態 ユースケース
オンデマンドインスタンス 秒単位
定価		 運用開始時などインスタンスタイプの変更が必要な場合
リザーブドインスタンス 1年など選択した期間に対して一括
長期間や全額前払ができればコストを押さえられる
コンバーティブルという期間中に属性を変更できるものもあるが、割引率が低くなる		 一定の期間稼働し続けることが決まっている場合
スポットインスタンス 変動（競り落とし方式）
ユーザーは希望する価格を指定し、その価格以下で利用可能なリソースがある場合にインスタンスがプロビジョニングされる		 CI/CDやバッチ処理など、一時的に発生する処理や処理が中断しても影響が少ない場合
オンデマンドインスタンスよりもコストを押さえたい場合
Dedicated Hosts（専用ホスト） ホスト（物理的なサーバー）に対しての従量課金 特定要件やライセンス、セキュリティポリシーなどにより物理的な隔離をしたい場合
CPUやメモリなどの物理的なスペックを正確に把握したり、パフォーマンスを予測したい場合
ハードウェア専有インスタンス インスタンス単位 Delecated Hostsと違いインスタンス単位で専有するため、複数インスタンスを立てる必要がない場合はこちらの方がコスト面で有利
Saving Plans 一定の金額を事前に支払い、その金額に対する割引率を得るモデル オンデマンドよりもコストを削減したいが、リザーブドのように細かい制御ができない場合
自動的に最適化してくれる
オンデマンドキャパシティ予約 一定期間の予約に対しての料金 オンデマンドはAZの容量不足でまれに起動できないことがあるので、予約する仕組み
実際にオンデマンドインスタンスを利用する際に、通常よりも割引が受けられる（※予約分を払っているのでお得というわけではない）

VPC

Virtual Private Cloudの略。
仮想的なプライベートネットワークで、AWS上に独自のネットワーク環境を構築できる。

セッションマネージャー

AWS Systems Manager
AWS Systems Manager内のコンポーネントの一つで、リモートでEC2インスタンスに対してセキュアなシェルアクセスを提供する。
セキュリティグループでポートの許可をしたり秘密鍵のローカル管理が不要になる。

セッションマネージャーを利用するには前提条件がいくつかある。

  1. SSM AgentがインスタンスのOS上にインストールされている
    • 代表的なAMIにはプリインストールされている
  2. EC2インスタンスがSystem Managerで管理できるようにIAMロールを引き受けている
    • SSMManagedInstanceCoreというAWS管理ポリシーをアタッチしたIAMロールが必要
      • 2023年2月のアプデ以降はデフォルトのホスト管理設定機能が追加され、権限が不要になった
  3. EC2インスタンスからのリクエスト送信がSystems Managerのエンドポイントに到達できる
    • リージョンごとにSystems Managerのエンドポイントが設定されているので、そこに到達できるようにNATゲートウェイやVPCエンドポイントなどを利用して接続できるようにする。

NATゲートウェイ

プライベートサブネット内のEC2インスタンスなどのリソースがアウトバウンドトラフィックを送信する際に、プライベートIPアドレスから公共IPアドレスへの変換を行う。

VPCエンドポイント

VPC内のプライベートなリソースに対してAWSサービスへのプライベートな接続を提供する仕組み。

ELB

Elastic Load Balancingの略。
障害発生時や負荷分散目的で置かれるリソース。
様々な目的やタイプが存在する。

ロードバランサータイプ

ネットワークトラフィックを複数のサーバーやリソースに均等に分散し、負荷を分散する目的。

Application Load Balancer

HTTPまたはHTTPSの負荷分散をする用途。
ルーティング、SSL証明書の設定、リダイレクト、インスタンスに対してセッションを維持する機能など。
主にWebアプリに使用。

Network Load Balancer

HTTP/HTTPS以外のTCP、またはUDPプロトコルの負荷分散をする用途。
静的なIPアドレスを使用できる。
ゲームサーバーやバックエンドサーバーへのアクセス時など、外部の依存関係がある場合に使用。

ヘルスチェック

インスタンスのヘルスチェックを行い、正常なインスタンスのみにリクエストを送るように動作する。
タイムアウトや接続試行回数のしきい値などは設定可能。

インターネット向け/内部向け

IPアドレスをパブリックに割り当てるか、プライベートに割り当てるかを選択することができる。
内部にもELBを挟むことで可用性を更に高める事ができる。

SPOFになりえないか

ELB自体が複数ノードで動いているので、ELBを複数立てる必要は無い。

クロスゾーン負荷分散

AZを超えて負荷分散する機能。
ALBでは常に有効で、NLBでは選択式。

Auto Scaling

その名の通り、自動で垂直・水平スケーリングを行うサービス。
無料で利用できる。

起動テンプレート（何を）

EC2インスタンスを起動するために行ったような設定をする。

Auto Scalingグループ（どこで）

最小数・最大数、AZなどを設定する。

Auto Scalingポリシー（いつ）

動的スケーリングポリシー

ターゲットポリシー

最も簡単。
平均使用率などのメトリクスに応じてAWSが自動的に最小数・最大数の中でEC2インスタンスの数を調整する。

シンプルポリシー

CloudWatchのアラームに基づいてスケーリングする。

ステップポリシー

複数の段階でインスタンスの追加・削除を設定できる。

ステートレス

EC2インスタンスに情報や状態を持たせない設計。
Auto Scalingではステートレスな設計にする必要がある。

ブートストラップ

新しいEC2インスタンスが自動的に起動される際に、そのリソースが適切に構成され、正常に動作するようにするための初期化プロセスのこと。

ユーザーデータ

EC2インスタンスを起動する際に、インスタンスにカスタムスクリプトや構成情報を提供するためのテキストデータ。
特定のディレクトリに配置してある最新のアプリケーションをデプロイするなどの用途で使用する。

メタデータ

インスタンスが実行されている環境に関する情報や、Auto Scalingの構成に関する情報を含んでいるデータ。 パブリックIPアドレスやインスタンスIDなど、EC2インスタンスが起動していないと生成されない情報を取得できるため、ユーザーデータのスクリプト内からも呼び出せる。

AWS CodeCommit

AWSに統合されたプライベートなGitリポジトリ。

AWS Lambda

スケーリング

リクエストに応じて水平スケーリングをしてくれる。
Auto Scalingする必要は無い。

課金形態

以下の要素に課金される。

  • 実行時間（ミリ秒単位）
  • メモリサイズ
  • 実行回数
  • データ転送

その他のコンピューティングサービス

ECS

コンテナ管理。

Lightsail

簡易クラウドサービスプラットフォーム。
WordPressなどのプリセットも用意されており、小規模なプロジェクトに向いている。

Batch

バッチ処理実行環境。

【Tips】はてなブログに動画を埋め込む

Tips Tips-はてなブログ

toyamadori.hatenablog.com

こちらの記事で初めて試したのですが少し引っかかったのでメモ。

2024/02/10現在のGoogleドライブを使った手順です。

Googleドライブ上での操作

  1. Googleドライブに動画をUpload
  2. ︙ボタン → 共有 → 共有を押下
  3. 一般的なアクセス → 制限付きからリンクを知っている全員にする
  4. ⚙ボタンを押下し、以下2つのチェックボックス（☑）のチェックが外れた状態（画像の状態）にする
  5. ←を押下して3の画面に戻り、完了を押下
  6. 動画をダブルクリックで開く
  7. 右上の︙ボタン → 新しいウィンドウで開くを押下
  8. 新しいウィンドウ上で右上の︙ボタン → アイテムを埋め込むを押下
  9. 表示されるコードをコピーする

はてなブログ上での操作

普通に貼り付けるだけでも良いですが、このひと手間加えないと縦横比が崩れます！！

ブログの編集エディタ上にコピーしたコードを貼り付け、以下のように書き換える

<div style="position: relative; aspect-ratio: 16 / 9; max-width: 600px">
  <iframe src="https://drive.google.com/file/********" width="100%" height="100%" allow="autoplay"></iframe>
</div>
  1. <div ...></div>（↑の1行目と3行目をコピペ）で<iframe ...>...</iframe>囲む
  2. iframeの部分はwidthとheightを100%に書き換える

動画の縦横比は16 / 9の部分。縦長の場合は9 / 16、4:3の場合は4 / 3といった具合に書き換える

以上です！お役に立てば幸いです🙇

【雑談】タメ口を使う園田海未を発見！

アニメ アニメ-ラブライブ！ 雑談

普段は誰に対しても敬語な園田。
幼馴染の穂乃果やことりに対してはもちろん、後輩にも基本敬語です。
誰に対しても敬う心を忘れないという彼女の内面の美しさが現れていますね！！！

練習中の描写で「穂乃果、疲れてきた？」などと言うことはありますが、 これはあくまで拍の早いダンス練習中なので語尾を省略するのが自然。
なので特になんとも感じていませんでした。

そんな園田ですが、明確に会話の中でタメ口を使っていると思わしき箇所があったのです！！！

#6 「センターは誰だ」18:22 あたり

普段だったら「まぁ…歌は作れなくはないですけど」と言いそうなところ、「作れなくないけど」と言っています。

どういう歌詞にしようかなどの考えが頭にありタメ口になってしまったのでしょうか…？

うん、敬語じゃない園田もいいですね😊








…それだけです（笑）

もうラブライブ！は何回も見ているのですが、久々に見直していたら初めて気づいたところがあったのでメモ🙄