OmniAICreator/Qiita-1.07M huggingface dataset:
【AWS備忘録】ローカルからプライベートサブネットに配置しているRDSへ接続

## 目指す環境
ローカルからプライベートサブネットに配置しているRDSへ接続する
![clip-20230728173958.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/8823930c-6838-12ef-2e45-f1a24afc271f.png)


 

## 事前に用意するもの
プライベートサブネットに立てたRDS
RDSと同じAZのパブリックサブネット

 

　



 

# 設定手順
## ターゲットグループの作成
EC2＞Target groups＞Create target groupから、ターゲットグループを作成する。
【設定値】
**Choose a target type：IPアドレスを選択
Target group name：任意
Protocol ,Port：使用するDBにあったものを入力(例:PostgreSQLならTCP:5432)
IP address type：IPv4
VPC：RDSと同じVPC
その他は基本デフォルト**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/4cec96ed-5ea8-bebc-9afd-469ab6c89ae2.png)



 

設定値を入力し終わったら「Next」をクリックする。

 

 

## ターゲットの登録
接続したいRDSのエンドポイントから「nslookup」コマンドなどを用いてIPアドレスを割り出し、「IPv4 address」に入力、「Ports」が正しいことを確認し「Include as pending below」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/609b321b-6a45-55f8-8f52-01262fb28afe.png)




 

　　
review targetsに登録されたことを確認し、「Create target group」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/0889f851-9af8-7775-e412-256102f5e297.png)


作成後、作成したターゲットグループを選択＞Attributes＞Preserve client IP addressesをONにする。
（NLBを経由することでNLBのプライベート IP アドレスがクライアントIPとなり、想定外のIPからもアクセスできてしまう。想定したIPのみ許可する場合はクライアントのIPアドレスを保持する設定にしなくてはいけない）
![clip-20230728174630.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/6b8f508e-0509-2177-3baf-fbe36e59c9aa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/1421da77-6eb9-b195-9703-1034dfedee98.png)



 

## NLBの作成と設定
EC2＞Load balancers＞Create load balancerから、ロードバランサーの作成に進む。
Network　Load Balancerを選択する。

![clip-20230728174757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/637b7d12-c252-d9cc-bfbd-283048eab94d.png)


設定値を入力し、「Create load balancer」をクリックする。
**Load balancer name：任意のNLB名
Scheme：インターネットを経由するのでInternet-facing
IP address type：IPv4
VPC：RDSと同じVPC
Mappings：RDSと同じAZ
Subnet：用意していたパブリックサブネット
Listner
Protocol,Port：使用するDBに合ったもの
Default action：作成したTarget group（ターゲットにRDSがある）**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/14596faa-df6b-bcbb-e0aa-d33a52ab60dd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/f7a2183e-5fad-2a09-345e-365c8e6fea0b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/ee87daa5-7a78-9e3d-1c3c-6e46fecf63de.png)



# 結果
ローカルからNLB経由でRDSに接続することができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574230/b76558bf-99d5-e747-06f9-7fec5892283d.png)
Reactでframer-motionを使って簡単なテキストアニメーションをしてみた

# テキストアニメーションを実装してみたい！
ローディング画面や説明文で、おしゃれにテキストアニメーションが施されていることがありますよね！

同じようにおしゃれなテキストアニメーションをサッと作れるといいですね。

# 作るもの！
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3330686/9ca2574f-7e2e-59b7-9178-5c6d2d3de122.gif)


# アニメーションを作るには
もちろんCSSで適用することもできますが、せっかくならReactのライブラリを使ってみようと思います。

Reactでアニメーションを作る際には、framer-motionとreact-springが有名なようです。

今回は framer-motionを使ってテキストアニメーションを作っていきたいと思います。

https://www.framer.com/motion/

# 作り方
1. framer-motionをインストールする
2. テキストアニメーション用のコンポーネントを作ります！
3. framer-motionを用いて、テキストアニメーションを作る

## ①framer-motionをインストールする
```
npm install framer-motion
```

## ②テキストアニメーション用のコンポーネントを作ります！
簡単な雛形を作っておきましょう！

## ③framer-motionを用いて、テキストアニメーションを作る

まずはアニメーションを作る前に、仕組みから考えていきます。

アニメーションさせたい文章を一文字ごとに分割する。
マップ関数で１つずつ取り出して、後の文字の方ほどより遅れるようにする。

テキストアニメーションはこのような仕組みだと思います。
では実際に作っていきましょう！

**アニメーションさせたい文字を定義して、分割する**

```react
//テキストアニメーションさせたい文字
const words = "Hello World!"
//分割する
const word = words.split("")
```

**アニメーション部分を作る**
```react
const textanimate = word.map((word, index) => {
        return (
            <motion.div
                initial={{ opacity: 0}}
                animate={{ opacity: 1}}
                transition={{ duration: 0.5, delay: index * 0.05 }} key={index}>{word}
            </motion.div>
        )
    })
```

これはマップ関数で文字ごとにアニメーションされるようにします。

opacityの値が最初からアニメーション時で0〜１になることでふわっと出てくるアニメーションを実装できます。

また、delayの値に引数であるindexを足すことによって、後ろの文字ほど遅れて出てくるようなアニメーションを実装することができるのです！

↓全体のコードはこちら
```react
import { motion } from 'framer-motion'
import React from 'react'


export default function First() {
    const words = "Hello World!"
    const word = words.split("")

    const textanimate = word.map((word, index) => {
        return (
            <motion.div
                initial={{ opacity: 0}}
                animate={{ opacity: 1}}
                transition={{ duration: 0.5, delay: index * 0.05 }} key={index}>{word}
            </motion.div>
        )
    })

  return (
    <div className='flex justify-center'>
        {textanimate}
    </div>
  )
}
```

# まとめ
このように、framer-motionを用いて簡単にテキストアニメーションを作ることができました！

今回はふわっと一文字ずつ同様に出てくるテキストアニメーションでしたが、一文字ずつ異なるアニメーションを指定したりすることで、より高度なテキストアニメーションを作ることもできそうですね。
Linuxサーバー負荷調査方法まとめ

# はじめに
Linuxサーバでは今までディスク容量の確認くらいしか体験したことがなかったので、自分用に調査手法をまとめてみました。

# 用語
- ロードアベレージ
    - 単位時間あたりに待たされたタスク数。ロードアベレージが高い=平均して待たされたタスク数が多い、つまり負荷が高い。
    - ロードアベレージが1以下であれば軽く、1〜3くらいだとやや重く、それ以上だとこれらがボトルネックの可能性が高い。

- TCPコネクション 【TCP connection】 TCPセッション
    - TCPで一対の機器が通信を開始する際に確立する論理的なデータ伝送路
    - ポートは番号65535個しかないので、数万個のTCPコネクションが貼られている場合は分散のような対応をとる必要がある

# ボトルネックの種類
- CPU使用率
- ディスクI/O
- メモリ使用量
- TCPコネクション
- 外的要因


# 切り分け方法
![スクリーンショット 2023-10-10 155249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3161388/048b0587-5550-7af4-9dba-d351bfc45e76.png)


# 確認手順

1. ロードアベレージが高くないかを確認する。（uptime, w, top等）
2. 負荷原因がCPUまたはI/Oのどちらにあるか調査する。（sar, vmstat, iostat等）
3. 特定のプロセスの負荷やメモリ使用率が大きいかどうかを調査する。（ps）

# コマンド
### ディスク・メモリの使用状況を調査
```
# ディスク使用状況
$ df -h
# メモリ使用状況
$ free
```

### ロードアベレージが高くないかを確認
```
# ロードアベレージを確認
$ uptime
$ w

# ロードアベレージ/タスク状況/メモリー使用/スワップなどを確認。
$ top
```

### 負荷の原因がCPUまたはI/Oのどちらにあるか調査
```
# CPUやI/O負荷、スワップ、その他色々確認。
$ sar

# 仮想メモリの状況を確認
$ vmstat

# ディスクI/Oの状況を確認
$ iostat

# TCPコネクションを確認
$ netstat -an | wc -l
```

### 特定のプロセスの負荷やメモリ使用率が大きいかどうかを調査
```
$ ps aux
```

# おまけ
linuxに手軽にCPU負荷をかける方法を記載しておきます！

1.yesコマンド
```
$ yes > /dev/null
　⇒処理を停止させる場合は「Ctrl + C」
　⇒1個だとあまり負荷はないので、ターミナルを複数立ち上げでyesコマンド連打もあり(&で繋ぐ)
```

2.opensslコマンドを使う
```
$ openssl speed -multi `grep processor /proc/cpuinfo|wc -l`
```

3.無限にgzipさせる
```
$ gzip -9 < /dev/urandom ＞ /dev/null
　⇒/dev/urandom：ランダムな文字列(乱数)を返す擬似デバイスファイル
　⇒/dev/nulll：ブラックホールのようなイメージ。
　　　　　　　 ：出力先として指定すると何も起こらないし、入力元として指定しても何も入ってこないファイル
```


# 参考
https://easyramble.com/linux-command-to-check-status.html
https://nishinatoshiharu.com/bottleneck-profiling/
https://qiita.com/hiro-d/items/c3f724cb3d377e21cd91
https://i-think-it.net/linux-cpu-stress-how-to/
https://qiita.com/k0kubun/items/8ab1dfa7c0359d8e618d
http://www.sakito.com/2012/06/linux.html
Flutter: Failed to launch iOS Simulator: Error: Emulator didn't connect within 60 seconds

## 概要

FlutterでiOSシミュレータを立ち上げようとした時、下記のメッセージが表示されてシミュレータが立ち上がらなくなりました。(Android シミュレータは起動していた。)

```
Failed to launch iOS Simulator: Error: Emulator didn't connect within 60 seconds
```

MacのDockにiOSシミュレータのアイコンは表示されますが、`Unable to boot the Simulator.` と表示されます。

![ScreenShot 2023-10-10 15.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/acf64657-555d-4a4d-c160-bd9e3029e98a.png)

## 環境

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.12, on macOS 13.3 22E252 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.83.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!
```

## 原因

XCodeのキャッシュが溜まっていたことが原因でした。
エラーが発生した時は20GB近く溜まっていました。どの程度溜まると起動しなくなるのかは不明。

## 対策

Macの システム設定 > 一般 > ストレージ > デベロッパ > `i` マーク

- Xcode キャッシュ
- プロジェクトビルドデータとインデックス

キャッシュを削除する。
iOSシミュレータを立ち上げ直すと特にエラーなく立ち上がりました。

## さいごに

キャッシュを消した分、ビルドにめっちゃ時間がかかります。
このエラーが出たから、XCodeのキャッシュが原因とは限らないですが可能性はあるのでお試しください。
キャッシュ容量の制限あるならもう少し分かりやすいエラーメッセージを出して欲しい。

とりあえず解決してめでたしめでたし。
AWS Cloud Practitioner 学習記録２（２／２）

:::note info
AWS Skill Builder における下記コンテンツの学習記録（ポイントとメモ）です
AWS Cloud Practitioner Essentials (Japanese) (日本語実写版)
:::

# モジュール２：クラウドでのコンピューティング
AWS Cloud Practitioner 学習記録２（１／２）からの続き

### Elastic Load Balancing (ELB)
コーヒーショップに入ってきたお客さん（リクエスト）を、入ってきた人数（トラフィック量）と店舗スタッフ（EC2 インスタンス）の状況に応じて捌いてくれるロードバランサーのサービス

Auto Scaling と組み合わせると、EC2 インスタンスが追加されたときは、それを通知された ELB は増えたインスタンスにもトラフィックを分散しはじめる
EC2 インスタンスが削除されるときは、ELB は新しいリクエストを割り振らないようにしつつ、処理中のリクエストは中断することなく終了することができるようにしてくれる

お客さん（トラフィック） ─ ELB1 ─ 注文レイヤ（EC2） ─ ELB2 ─ 製造レイヤ（EC2）　といったように ELB を介して各レイヤを結ぶことができる。ELB はリージョン単位で稼働し、リージョン内のどのレイヤのインスタンスも、１つの URL を知っていればリクエストを送ることができる
そのため各レイヤはお互いのレイヤの状況（EC2 インスタンスの増減）を直接知らなくて済むようになる（**疎結合なアーキテクチャの実現**）

### メッセージングとキューイング
##### 事前知識：モノリシックアプリケーションとマイクロサービス
一般的にアプリケーションは複数のコンポーネントで構成され、コンポーネントは相互に通信して、リクエストの受信、データの送信、アプリケーションの実行を繰り返す
ここで、各コンポーネントが密結合の状態にあるとき、**モノリシックアプリケーション**と呼ばれるアーキテクチャになっているとされ、いずれかのコンポーネントで障害が発生すると、全体に障害の影響が及ぶことになる
いっぽうで、**マイクロサービス**のアプローチをとったアーキテクチャでは、各コンポーネントは疎結合の状態にあり、１つのコンポーネントで障害が起きても、そのほかのコンポーネントは引き続き機能できるようになっている
この**マイクロサービス**のアーキテクチャは AWS においてもベストプラクティスとされ、この状態の実現をサポートするのが **Amazon SNS** と **Amazon SQS** である

##### Amazon Simple Notification Service (Amazon SNS)
パブリッシュ／サブスクライブ (pub/sub)[^1] のメッセージング機能を実現するサービス
定義したトピックを使用して、サブスクライバーにメッセージを発行。Amazon SNS でサブスクライバーとなるのはウェブサーバ、メールアドレスあるいは AWS Lambda 関数など
送信側のコンポーネント（サービス）は、非同期で他のコンポーネント（サービス）にメッセージをブロードキャストできる

##### Amazon Simple Queue Service (Amazon SQS)
キューイング機能を実現するサービス
コンポーネントの間でメッセージを送信、保存、受信できるようにする
お互いのコンポーネントの状態に依存せず、メッセージを送信／受信できる

### その他のコンピューティングサービス
##### サーバレスコンピューティング
Amazon EC2 ではサーバをプロビジョニングしてから、アプリケーション（コード）をデプロイし、実行中のインスタンスも管理する必要があった
いっぽう、サーバレスコンピューティングは、**実行するコードのみを考慮すればよい**、という考え方
＃もちろん、本当にサーバが無いわけではない。気にしなくてよい、と理解
AWS においてこれを提供するのが **AWS Lambda** （ラムダと読む）である

##### AWS Lambda の仕組み
1. コードを Lambda にアップロードする
2. イベントソースからトリガーするよう設定する
Lambda のイベントソースは他のサービス、アプリケーションや HTTP エンドポイントなど
3. トリガーされたらコードが実行される
4. 実行時に使用したコンピューティング時間で課金される

##### コンテナ化されたアプリケーションの実行
コンテナとは、アプリケーションのコードや依存関係などを１つのオブジェクトにパッケージングしたもの
コンテナの利便性はざっくりいえば、上記の依存関係まで含めたオブジェクトにすることで、どの環境で実行しても同じように動作することを期待するもの

##### Amazon Elastic Container Service (Amazon ECS)
AWS でコンテナ化されたアプリケーションを実行・スケールできるサービス
Docker コンテナをサポートしている

##### Amazon Elastic Kubernetes Service (Amazon EKS)
AWS で Kubernetes を実行する際に使用できるサービス

**Docker はコンテナを実現・管理をするもの
Kubernetes(K8s) はコンテナ群の運用・管理をするもの**

##### AWS Fargate
AWS でのコンテナ用のサーバレスコンピューティングエンジンで、ECS と EKS の両方と連携して動作できる
以下のような組み合わせでコンテナとインスタンスを管理できる
+ ECS + EC2 ：ECS でコンテナを管理、EC2 インスタンスは自分で管理
+ ECS + Fargate　：ECS でコンテナを管理、インスタンスは Fargate におまかせ
+ EKS + EC2 ：EKS でコンテナ群を管理、EC2 インスタンスは自分で管理
+ EKS + Fargate　：EKS でコンテナ群を管理、インスタンスは Fargate におまかせ

サーバレスコンピューティングの考え方に戻ると、
Lambda は実行するコードを考慮すればよく、
Fargate は実行するコンテナ（コード＋依存関係を含む）を考慮すればよい
どちらも実行するサーバ（インスタンス）はクラウドに任せる
（任せるのでそれぞれのサービスごとに一定の制約はある）

#
モジュール２の学習は以上です


[^1]:publish：出版／subscribe：購読　送る側がpublisher、受け取る側がsubscriber
Power Platform でセキュリティグループを使用できる場面について

こんにちは。日本マイクロソフトの向井です。
今回はPower Platform でセキュリティグループを使用できる場面についてまとめたいと思います。


:::note warn
セキュリティグループと似た単語としてセキュリティロールがありますが、これらは全く別のものです。
セキュリティロールについての説明は以下の記事が参考になります。
[Power Platformのセキュリティロールについて](https://qiita.com/skuramoto/items/fe305aac24273c7cccbf)
:::


# セキュリティグループとは
セキュリティグループは、Power Platform 固有のものではなく、Microsoft のテナント内で共通で使用できるグループの一種で、リソースへのアクセス許可に使用されます。
そのため、作成や管理はMicrosoft 365 管理センターで行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/c2f00329-2e00-93c6-f4e5-48b38eb9dbec.png)

その他のグループとの比較は以下をご確認ください。
[Microsoft 365 のグループの種類を比較する](https://learn.microsoft.com/ja-jp/microsoft-365/admin/create-groups/compare-groups?view=o365-worldwide)

# Power Platform 内でセキュリティグループを使用する場面
Power Platform でセキュリティグループを使用するのは主に以下の場面です。
①環境への設定
②アプリ等の共有に使用
③チームへの紐づけ

## ①環境への設定
Power Platform の各環境にはそれぞれ１つのセキュリティグループを設定できます。
環境にセキュリティグループを設定すると、そのセキュリティグループ外のユーザーの環境へのアクセスを制限します。

セキュリティグループ外のユーザーを環境に追加しようとすると、以下のように追加ができません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8007bb31-575c-6ed0-c6d8-743b29756f90.png)

環境にセキュリティグループを設定しない場合は、すべてのユーザーを環境に追加することができます。

セキュリティーグループ外のユーザーが直リンク等で環境にアクセスしようとすると、以下のように表示されアクセスできません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/3a38845e-1483-51e2-575d-97a5a1f766c6.png)


環境に設定されているセキュリティグループはPower Platform 管理センターから確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/46ddf66f-e8fd-da87-c8f4-a83b1bd778b9.png)


## ②アプリ等の共有に使用
キャンバスアプリ、フロー、コネクタ、接続の共有にセキュリティグループを使用することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/0ef05c90-10c5-9ada-aee8-91a1b058d64b.png)

:::note warn
環境に設定したセキュリティグループ以外のセキュリティグループも共有の候補として選択できますが、実際は環境に設定したセキュリティグループ外のユーザーはアプリを使用することはできません。
アプリを実行しようとすると以下のメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/47233cc8-863e-e0e4-b451-806cdf153a62.png)
:::

## ③チームへの紐づけ
Power Platform にはチームという概念があります。
チームは大きく分けて、所有者チーム、アクセスチーム、Azure AD グループチームがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/e651e484-560b-1d23-c4d3-4532f8674987.png)
（引用：[Dataverse グループチームの活用方法＆注意点](https://jpdynamicscrm.github.io/blog/powerplatform/About-group-team-in-Dataverse/)）

このうち、Azure AD グループチームは、セキュリティグループまたはOffice グループと連携させることができます。

:::note warn
Azure AD は Azure Entra Identity に名称が変更されました。
これらは同じものを指します。
:::

各チームの差異やチームの作成方法は[表の引用元の記事](https://jpdynamicscrm.github.io/blog/powerplatform/About-group-team-in-Dataverse/)に書かれていますので、こちらでは割愛し、要点だけをまとめておきたいと思います。

:::note 
・Power Platform にはチームという概念があり、Azure AD グループチームはセキュリティグループに連動できる
・作成したAzure AD グループチームにセキュリティーロールを紐づけることで、グループチーム内のユーザーにそのセキュリティーロールを継承させることができる
:::

## 留意事項　親子関係（入れ子）のセキュリティグループについて
環境にセキュリティグループを設定する際は、子のセキュリティグループ内のメンバーは環境には追加されません。
それに対して、グループチームにセキュリティグループを紐づける方法では、子のセキュリティグループのメンバーもグループチームに追加されます。

# まとめ
セキュリティグループは、①環境への設定、②アプリ等の共有、③チームへの紐づけに使用することができます。
チームへの紐づけに利用すると、部署単位などのメンバーにセキュリティロールを一括で割り当て、管理することができ非常に便利です。組織のガバナンス管理にお役立てください。
【pykakasi】pykakasiをpyinstallerでexe化しても使えるようにする

# pykakasi...exe化するとエラーがでる
pythonの状態で動かしているとpykakasiが動くのにexe化するとファイルが見つからない的なエラーが発生して動かなくなる。exe化した状態でも動かせるようにできたので、備忘録として残しておく。

# 原因
エラーが発生する原因はpykakasiが*.dbファイルを読み込んでいるが、そのパスに__name__が使われていることである。下にパスを取得する部分のプログラムを示す。
```python3:
class Configurations:

    data_path = pkg_resources.resource_filename(__name__, "data")
    jisyo_hepburn_hira = "hepburnhira3.db"
    jisyo_passport_hira = "passporthira3.db"
    jisyo_kunrei_hira = "kunreihira3.db"
    jisyo_itaiji = "itaijidict4.db"
    jisyo_kanwa = "kanwadict4.db"
    jisyo_hepburn = "hepburndict3.db"
    jisyo_passport = "passportdict3.db"
    jisyo_kunrei = "kunreidict3.db"
    jisyo_halfkana = "halfkana3.db"

    def dictpath(self, dbfile: str):
        return os.path.join(self.data_path, dbfile)
```
よって、exe化したときに__name__の値が変わるため、*.dbファイルにアクセスできなくなることがエラーが発生している原因である。

# 解決策

pyinstallerではexe化ファイルにリソースファイルとしてファイルを含めることができる。今回は、この*.dbを適切な場所に配置することで解決を目指す。
まずはじめに、pykakasiの*.dbの場所を確認する。自分の場合は仮想環境にpipでinstallしていたので、以下のパスにあった。
```
.venv\Lib\site-packages\pykakasi\data\*.db
```
次に、pyinstallerのspecファイルを編集していく。
```
a = Analysis(
    ...
    datas=[(".venv/Lib/site-packages/pykakasi/data/*.db","pykakasi/data")],
    ...
)
```
エラーのパスを見た感じ、上のように*.dbを,```pykakasi/data```に保存するように指定すればよさそうである。あとは、
```
pyinstaller [pyファイル名].spec
```
を実行すれば、exe実行時に*.dbファイルを適切な場所に展開してくれる。

# 結論
exe化してもpykakasiは動かせる！！
【AWS】Auroraクラスターでリカバリが発生したぽよ

## はじめに
タイトルそのまま。リカバリが発生したのでイベント読んで調査した結果のめもです。

## 事象
```
Recovery of the DB instance has started. Recovery time will vary with the amount of data to be recovered.
DB instance restarted
Recovery of the DB instance is complete.
```

## 解説
1行目のイベント出力はAWS基盤側障害で何かしら発生した時に出力されるメッセージ。
なのでリカバリが発生した原因はAWS基盤側の障害によるもの。
ちなみに具体的な原因はAWSの内部情報なので不明！

だそうです。

## おわりに
イベントでフェイルオーバーじゃなくてリカバリってあんま発生しない気がする。
AWS側の原因ならしゃーなしだけど、Writerインスタンスだったら冷や汗出てたなーその辺がマネージドの弱点ですかね！

簡単ですが以上です:metal:
macのchromeでカメラを呼び出すとカメラ画面が黄色になる


chromeのカメラにSnap Cameraが入ってしまい、カメラの設定から削除できない問題があった。

![スクリーンショット 2023-10-10 14.43.33 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64334/95f6fd57-7122-b338-93fe-1d66cba33c01.png)

Finderの「移動」、「フォルダーへ移動」で下記を入れる。

/Library/CoreMediaIO/Plug-Ins/DAL

上のパスで.pluginという仮想カメラのプラグインが残っているので、それを消して、ブラウザを再起動したら直る。
多段パイプの終了ステータス実装

## 終了ステータスとは？

スクリプトが終了したときに、スクリプトを実行したツールに返される値。

```c
// 終了ステータス "0"
int main(){
	return (0);
}
```

```c
// 終了ステータス "1"
int main(){
	return (1);
}
```

基本的な終了ステータスの種類は以下の通りです。[1]

| 終了ステータス | 意味 |
| --- | --- |
| 0 | 正常終了 |
| 1 | 一般的なエラー |
| 2 | シェルビルトインの誤用 |
| 126 | 呼び出されたコマンドが実行できない |
| 127 | コマンドが見つからない "command not found" |
| 128 | 無効な終了引数 |
| 128+n | シグナル終了ステータス |
| 130 | Control-Cでスクリプトを終了 |
| 255 | 終了ステータスが範囲外 （範囲は0 ~ 255） |

## 終了ステータスの確認方法

shellの特殊変数 $? に終了ステータスが入っています。

echoコマンドで確認することができます。

```shell
echo $?
```

先ほどのコードをコンパイルして終了ステータスを確認してみます。

```shell
bash-3.2$ cat test.c
int main(){
  return (1);
}
bash-3.2$ gcc test.c
bash-3.2$ ./a.out
bash-3.2$ echo $?
1
```

しっかりと1が終了ステータスに格納されているのがわかります。

## パイプがあるときの終了ステータス

パイプがある際に終了ステータスは
コマンドの実行速度などには関係なく、
パイプを繋いだ**最後のコマンド**（一番右のコマンド）の終了ステータスになります。

以下の場合は、右のコマンドの終了ステータスが表示されるので1が返ってきます。

```bash
bash-3.2$ exit 0 | exit 1
bash-3.2$ echo $?
1
```

シグナルでコマンドが終了してもこの原則は変わりません。

```bash
# Control-Cでスクリプトを終了 -> 終了ステータス130
bash-3.2$ cat
^C
bash-3.2$ echo $?
130

# echo abc が正常終了しているから0が返ってきます。
bash-3.2$ cat | echo abc
abc
^C
bash-3.2$ echo $?
0
```

また、多段パイプでも同じことが言えます。

```bash
bash-3.2$ exit 0 | exit 21 | exit 42
bash-3.2$ echo $?
42
```

## 実装

以下では、C言語で多段パイプを**大枠**を実装しています。
使用関数は、以下のものを使用することにより実現できます。
```bash
pipe, fork, dup, dup2, wait, open, close
```

概要程度になりますが、以下のように実装することができます。
以下の実装では、forkした際に得られるプロセスIDをpid[index]に格納し、
最後にwhile文を通ったそのコマンドこそがlast_pidになるはずです。
そして、そのlast_pidをwaitすることにより、exit_statusを得られます。

```c
#include <libc.h>
int	main(void)
{
	int cmd_num = 2; // number of command
	int index = 0;
	int exit_number = 0;
	int pid[cmd_num];
	int last_pid;

	while (index < cmd_num)
	{
        pipe(pid);
		pid[index] = fork();
		last_pid = pid[index];
		if (pid[index] == 0) // child proccess
		{
            // 子プロセス用のシグナルにする (signal, sigaction)
			// connect pipe (dup2, close)
			// connect redirect (dup2)
			// do command (execve)
            // put the exit_number
			exit(exit_number);
		}
		index++;
	}
	
	index = 0;
	int exit_status;
	int status;
	while (index < cmd_num) // wait in parent proccess
	{
		if (wait(&status) == last_pid)
			exit_status = WEXITSTATUS(status);
		index++;
	}
	return (exit_status);
}

```

### 追伸

私がbashの簡易実装を行なったレポジトリです。（たぶん似たコードがあるはずですw）↓
よければスターをつけていただければ幸いです。。。

https://github.com/Mori062/minishell

引用 
[1]：https://tldp.org/LDP/abs/html/exitcodes.html
Varnish in 東京

![Screenshot 2023-10-10 at 13.24.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3573305/92189995-1b90-77c7-0cfe-20a21fd90003.png)


Varnish CacheからVarnish Enterpriseへ、CDN構築のノウハウ解説

Varnishは世界のさまざまのCDNサービスを支えるキャッシュソフトウェアです。今回のイベントは、合同会社レッドボックスCEO、小川勝久さんをゲストにお招きしてVarnish Cacheを活用したCDN構築の経験についてお送りします。また、弊社よりはトラフィックルーティングや永続キャッシュ装置などのVarnish Enterpriseの機能紹介と、そのパーフォマンスについて解説いたします。

以下のトークを予定しています。

Varnish CacheによるCDNの構築
Varnish Enterpriseの機能でCDNの高機能・高速化
Varnish EnterpriseによるCDNの電力効率の最適化
この機会をお見逃しなく。

ゲスト

小川勝久（katsuhisa ogawa）　合同会社レッドボックスCEO

大手ホスティング会社・世界126ヶ国に展開するグローバルエージェンシーにて大規模インフラストラクチャー設計・管理に携わり、クラウドスタートアップの役員を経て、純国産CDNカンパニー「レッドボックス」を設立。 CDNサービス関連の各種登壇・執筆活動も実施

スケジュール

18:00-18:45 開場

18:45-19:00 挨拶

19:00-19:30 Varnish CacheによるCDNの構築 - 小川勝久（合同会社レッドボックス）

19:30-19:50 Varnish Enterpriseの機能でCDNの高機能・高速化 - Sirn (Varnish Software, Senior Software Developer)

19:50-20:10 Varnish Performance Benchmarks / Efficiency - Frank Miller (Varnish Software, CTO) ※英語のトークになります

20:10-21:30 交流&🍺

WebキャッシュやAPI高速化に興味ある方、ぜひご気軽にご参加ください。
https://info.varnish-software.com/ja-jp/tokyo-event-october-2023
aws terraform importブロック使ってみた(簡易メモ)

# はじめに
importブロック便利だなと思いつつ、
まだ試せていなかったので、簡単に手順をまとめました。

# 手順

1.既存リソースの準備(S3)
```
$ aws s3 mb s3://tf-import-example
````
2.terraformコード化
```
resource "aws_s3_bucket" "example" {
  bucket = "tf-import-example" # 1.と同じバケット名
}
```
3.importブロックの追加
```
import {
  id = "tf-import-example" # リソース識別子
  to = aws_s3_bucket.example # import先
}
```
4.terraform実行
```
$ terraform init
$ terraform plan
$ terraform apply
```

# その他
- import を実行したあとの import ブロックは削除してOK
    - 残しておいてもいいが無意味

# 参考
https://zenn.dev/kou_pg_0131/articles/tf-import-block
https://dev.classmethod.jp/articles/terraform-v1-5-0-import-and-check-sample/
boxにgitリポジトリを作って運用する

boxにgitリポジトリ...我がプロジェクトではgithubとか契約してくれないし、ファイルサーバはboxしか用意されない。それしかない。絶望だ!

boxでコミット履歴を管理するのは厳しい。
調べるとDropbox上にgitを使ったり、boxでgitを使ったりしている記事はあるけれど、チームで実運用しているだろうか?
boxではローカルキャッシュが常に最新ではないため、gitのpullするとエラーが出たりする。
1人だけでbox上のgitを使っているならば問題ないが、他人と共有するなら頻繁にエラーが出ることになる。

box driveのローカルキャッシュを一律最新更新するコマンドは無い模様。
仕方ないのでWin10/11にあるcertutil コマンドでファイルのハッシュを計算することで強制的にbox上のGITリポジトリのローカルキャッシュを最新化した。
当然全ファイル最新化するので多少時間がかかるし、ネットワークから全量取り寄せするので転送量も増加することに注意が必要。

```
#どこかからかもらってきたスクリプトを改造
for %%I in (
     ##ここがbox driveのローカルキャッシュの場所
     "%USERPROFILE%\Box\GIT\HOE.git"
) do pushd %%I & call :sum & popd
exit /b

:sum
    echo.
    echo ******************** %CD% *************************
    echo.
    for /R %%I in (
        *

    ) do for /F "skip=1 tokens=*" %%J in (
        'certutil -hashfile "%%I" ^| findstr /v [C]ertUtil'
    ) do echo %%J %%I
    exit /b


```
ComposeでAndroid TV （事前調査）

# はじめに

ComposeでAndroid TVアプリを作ってみたいなと思ったので、事前に調査したことをまとめました
ちなみにComposeは初心者です

# 事前調査

## 公式
https://developer.android.com/training/tv?hl=ja

現在の最終更新日が 2020-05-25 UTCであり、TV用Composeの情報はここにはないです
AndroidManifest.xmlの設定だけ一読しておけば良さそうです

## codelab

https://developer.android.com/codelabs/compose-for-tv-introduction?hl=ja#0

タイトルがドンピシャで、かつ、新しい（2023/09 更新）
学べるもの
- 一覧画面　作成
- 詳細画面　作成
- 画面遷移

学べないもの
- Focus制御
- ナビゲーション
- 動画再生

## その他

https://android-developers.googleblog.com/2023/05/building-pixel-perfect-living-room-experiences-compose-for-tv.html

公式blog、TV用Composeの記事
すごく簡単に実装できそうなコードがかいてあるのだが、以下２つは意外とそうでもなく、ハマった
- Focus制御
- Side navigation with navigation drawerの実装

https://github.com/android/tv-samples

github、公式のAndroid TV向けサンプルコード集
JetStreamCompose配下が新しいcomposeでの実装になっており、現状、1番参考になる
codelabで学べなかったものが学べる
- Focus制御
- ナビゲーション（上部のみ）
- 動画再生

## 実行環境

### Virtual
TVのエミュレータがある
HD, Full HD, 4kが選べる

### Physical
基本的には普通のAndroidと同じで実機でUSBデバッグをONにする
PCと端末を同じネットワークに接続して、以下コマンドで端末に接続、installしてデバッグする
```shell
> adb connect {IP} 
```

## Fire TV

どちらかというとFire TVの方が普及していそうなので、あわせて調べました
公式は各ページごとに更新日が記載されており、結構メンテされているみたいなので、都度確認を推奨

https://developer.amazon.com/ja/docs/fire-tv/getting-started-developing-apps-and-games.html

- Android TVとの開発目線差異で気になったもの
  - OS 
下記に対して、対応する必要があるとのこと
minSdk 22 に対応しないといけないのが少し気になった

        Fire OS 5： Android 5.1ベース（Lollipop、APIレベル22）
        Fire OS 6： Android 7.1ベース（Nougat、APIレベル25）
        Fire OS 7： Android 9ベース（Pie、APIレベル28）
  - 実行環境
    エミュレータはないため、実機のみ
    接続方法はAndroid TVと全く同じ
    （OS5とOS7で確認）
  - 音声検索　
    Googleアシスタントではなく、Alexaを使うので、別途実装が必要
  - 課金
    当然ですが、課金対応するならAmazonアプリストアの実装をしないといけない
  - Firebase
    Firebase SDKでGoogle Play開発者サービスに依存しているものが使えない

# つづく？
続いたら、サンプルアプリを実装していきます
三角形の４心を表示するアプリを作成

## 三角形の４心を表示するウェブアプリケーション

ClojureScriptを使用して、三角形の４心を表示するウェブアプリケーションを作成しました。三角形の頂点をドラッグすることで、三角形の形状を変形できます。それに応じて４心の位置も変わります。アプリは以下のリンクより利用可能です。

[https://pigmet.github.io/triangle/](https://pigmet.github.io/triangle/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328817/5c402e23-2f93-2a12-65dc-d152dfabb42f.png)

## 三角形の４心とは

三角形の４心の定義を以下に述べます。

<dl>
<dt>外心(circumcenter)</dt>
<dd>
外接円の中心です。三角形の３つの頂点から等しい距離にあります。
</dd>
<dt>内心(incenter)</dt>
<dd>
内接円の中心です。三角形の３つの辺から等しい距離にあります。
</dd>
<dt>垂心(orthocenter)</dt>
<dd>
三角形の各頂点から対辺に引いた垂線が交わる点です。
<dt>重心(centroid)</dt>
<dd>
三角形の各頂点から対辺の中点に引いた直線が交わる点です。
</dl>

## 実装について

与えられた三角形の頂点の座標から、各心の座標や、内接円、外接円の半径を求める処理が必要になります。このような数学的計算には、JavaScriptのライブラリーである[mathjs](https://mathjs.org/)を使っています。また、図形の描写には[react-konva](https://konvajs.org/docs/react/Intro.html)を使いました。

ClojureScriptでは、上記のようなJavaScriptライブラリーをスムーズに呼び出すことができます。

## 最後に

このようなアプリを通して幾何学に親しんでもらえれば、うれしい限りです。今後も、数学関連のアプリの制作に挑戦したいと思います。
Identifier name '**65文字以上**' is too long エラーが出た時の対処法

# エラーメッセージ

```
 SQLSTATE[42000]: Syntax error or access violation: 1059 Identifier name '**65文字以上**' is too long (SQL: alter table `*` add constraint
   `**65文字以上**` foreign key (`*`) references `*` (`id`) on delete set null)
```

# 問題のコード


```.php
//マイグレーションファイル内のコード
$table->foreign('*')->references('id')->on('*')->onDelete('set null');
```

# 原因
マイグレーションファイル内で65文字以上のnameを設定すると、`長すぎる！`と警告が出る。
特に外部キーだと長くなりがち。

# 対処法
外部キーの第二引数に個別のnameを付けることができるのでそれを利用する。

```.php
$table->foreign('*', 'ここにnameを書く')->references('id')->on('*')->onDelete('set null');
```

# 参考

https://readouble.com/laravel/9.x/ja/migrations.html
VscodeのJava設定

### 要件
Vscodeのインストールあとに、関数定義のジャンプができない場合、どうすればよいか
### メモ
JDKがインストールされないかまたバージョン不正かの原因です。

#### JDK Ver17
  https://developer.salesforce.com/tools/vscode/en/vscode-desktop/java-setup#zulu
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/6e825b10-5c3c-1e3e-255b-b33d02e5cc29.png)
エクセルでセル背景色が勝手に付くのを防止

# セル背景色が勝手に付く条件

同じ書式が **3行以上** 設定されている場合に…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/2d67d469-fda7-e1c8-e630-0da5fb6ad4cd.png)

4行目のセルに入力すると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/e68a01c1-9d1a-20dd-2897-bcbd69dbd2ea.png)

上の行のセル背景色が付いてしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/820c44b3-0512-8cca-04d3-c24f513bccc4.png)

# 防止方法

『ファイル』。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/8698c262-9d7d-fe87-48c9-d3838e44b029.png)

左下の『その他』『オプション』
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/467144de-0217-48ae-67c0-29b94fba4920.png)

『詳細設定』の『データ範囲の形式および数式を拡張する』をオフに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/fc9520e8-43f3-bb7f-cb67-f1f9160316f4.png)

# 参考サイトさん

https://316-jp.com/excel-expanding-format

# バージョン

Microsoft Windows [Version 10.0.19045.3448]
Microsoft Excel for Microsoft 365 MSO (バージョン 2309 ビルド 16.0.16827.20130) 32 ビット
Streamlitのパフォーマンス問題に対処するフレームワークStreamsyncについて

# [streamsync](https://www.streamsync.cloud/)

[streamlit](https://streamlit.io/)と[plotly dash](https://dash.plotly.com/)の良いとこ取りのPython Webフレームワーク

streamlitでの難点である何かのページイベントが走るたびに、スクリプトの先頭から実行されて Running… という通信とレンダリング待ちはない。
streamsyncではイベントハンドラーによってDOMの一部のみ再レンダリングされます。
(Streamlitの内部でスクリプトがどのように実行されるか詳細は[こちら](https://qiita.com/yasudakn/items/089aaf4488fc6a8396ae)を参照ください。)

* コンポーネント（Vueのように画面で使うイベントに紐づくボタンなどのコンポーネントがPythonで用意されている。)
    * [サポートされているコンポーネント](https://www.streamsync.cloud/component-list.html)はまだ少ない。
    * Webフロントエンド用のリッチなグリッド[AG-Grid](https://github.com/PablocFonseca/streamlit-aggrid) はまだないが [AG-Gridサポートの要望](https://github.com/streamsync-cloud/streamsync/issues/149)が既にあり、時期に解決されて公開される可能性が高そう）

* イベントハンドラー（plotly dashのようにイベントに紐づく関数を定義出来て、フロントエンドでイベントが走ると、バックエンドに引数などデータが転送され、そのハンドラー関数だけ実行される。終わるとフロントエンドにデータが返され、対応するコンポーネントが再レンダリングされる。）
```
def display_message(state, value):
    print(“The button has been clicked”)

ss.button(“Click me”, handlers={“click”: display_message})
```

* ステート（@付きのバインド変数が利用できて、イベントで状態が変更されるとフロントエンドの値が変わる。状態駆動型のリアクティブなユーザー インターフェイスを使用して、ユーザー インターフェイスはロジックから切り離されています。バックエンドを変更することなく、テキストコンポーネントの見出しを置き換えたり、必要な数のコンポーネントに表示したりできます。）
```
def choose_coffee(state, value):
    state[“drink”] = “Coffee”

def choose_tea(state, value):
    state[“drink”] = “Tea”

ss.init_state({“drink”: “None selected”})
ss.heading(“@drink”)
ss.button(“Coffee”, handlers={“click”: choose_coffee})
ss.button(“Tea”, handlers={“click”: choose_tea})
```

* 条件付きレンダリング（ユーザーの選択によって、特定のコンポーネントを表示・非表示出来る。）
```
with ss.when(lambda state: state[“coffee_count”] > 3):
    ss.text(“You’ve had too many coffees.”)
    ss.text(“Yes, 3 is the limit.”)
```

### パフォーマンス測定
クリックしてDOM操作するのに、streamsyncの方が73倍速い
![df5124b9-b9de-4378-93e2-aa153aa7e565.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636318/5a6b5ac8-5104-c9f5-2b87-cb21023b582d.jpeg)


### ビジュアルユーザーインターフェースエディタ
デスクトップアプリを作るときのように、画面の細かいコンポーネントをビジュアルエディタで調整出来る。
![f74bc89c-ae17-49b5-b660-f2f54cb3db57.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636318/1f87cdda-a164-57f8-ab86-ce5203458ce8.gif)

### アーキテクチャ
Python、TypeScript、Vue、および FastAPI を使用して構築されています。

![e81433d3-f311-4f37-a68e-4f40785b520b.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636318/6c418f59-c5ec-9191-9c18-f54bf1250258.jpeg)

1. イベントが発生すると、WebSocket を使用してブラウザから Web サーバーにイベントが送信されます。

2. WebSocketの呼び出しに応じて、Web サーバー (FastAPI) はasyncioを介して非同期で AppRunnerに処理を渡します。

3. AppRunner は、multiprocessing.Pipeを介してアプリのコードの実行を担当する分離プロセスである AppProcess にディスパッチします。（マルチプロセスのプロセス間通信で変数を引き継ぎ・引数を渡してイベントハンドラーを実行する。）

4. AppProcess は、関連するセッションのアプリケーション状態を使用して、適切なイベント ハンドラーを見つけてスレッド プールで実行します。


参考リンク

https://medium.com/@ramiromedina/like-streamlit-but-fast-enabling-low-latency-data-apps-948b95b098a2 

https://medium.com/@ramiromedina/streamsync-like-streamlit-but-faster-and-with-a-visual-ui-editor-9f98ad17adf
子供が作文の宿題に使うために、音声認識と音声合成を試してみました

#### 手書きで何度も書き直すのは大変だ！ ####
子供の学校では、作文の宿題が頻繁に出されますが、内容を考えながら何度も手書きし直すのは大変です。そのため、息子は机にうつ伏せたり、ため息をついたりしながら、いつまでたっても宿題を終わらせようとしない様子でした。

その問題を解決するために、パソコンを使って文章を入力し、完成したものを清書して提出することを提案しました。しかし、息子はキーボード入力が難しいし、正しい綴りを確認できないと納得してくれませんでした。

#### 話した内容を書き起こしたり、文章を読ませて綴りを確認したりできそうだな ####
そこで、無料で利用可能なウェブ音声 API（Web Speech API）を試してみることにしました。音声認識機能を使えば、息子は自分のアイデアや考えを話すだけで、テキストに変換してもらえます。さらに、音声合成機能を活用すれば、音声で文章を読ませて正確なスペルを確認することも可能です。

この方法を使えば、宿題の文章作成がより楽になり、学習体験の向上が期待できそうです。さらに、妻からの「たまには子供の勉強の面倒を見てよ」という苦情も軽減できそうです。

#### ChatGPTに頼んで完成したのがこちら ####
Qiitaで調べたところ、それほど複雑な実装ではなさそうだったので、ChatGPTに機能の実装をお願いしました。多少の手修正を施すことで、そこそこ使える状態になりました。ブラウザからの利用が便利なため、お手軽にWEBページを作成できるJIMDOに公開しました。

Transcript Editor
https://papakiite.jimdofree.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761560/c524a8d5-2bdd-f13b-63a4-3c4343060640.png)

#### でも、やっぱりこれで良いのかなと思ってしまう ####
息子が使ってみた感想は便利だということで、大変満足した様子でした。最終的には、完成した文章を見ながら、手書きで清書したものを提出することになります。

子供の学校ではコンピュータ学習の時間もあるので、作文の宿題はパソコンで作成して、プリンターで印刷して提出したほうがコンピュータの練習になって一石二鳥ではないかと思うのですが、先生はOKにしてくれません。

筆記の練習は、練習帳で何度も書かせる宿題があるので、そちらで十分だと思います。作文に関しては、文章の内容を頭で考えることに集中したほうが効果的だと思います。なんか教育システムが不合理だなと感じてしまいました。
Jimdoのブログ記事一覧をトップページに表示させたい

## 概要

ジンドゥークリエイターで、ブログ記事一覧を表示させる方法について書きます。

ジンドゥーで、トップページに最近のブログ記事を載せたい場合、もっとも簡単な方法は、「RSSフィード」を使う方法です。

在ル在リさんという方の、「[Jimdoのトップページにブログの新着記事を表示させる](https://note.com/aruari/n/n92e23d1e3a51)」というnote記事が詳しいです。

とはいえ、この記事にもあるとおり、ジンドゥーオリジナルのデザインは見づらいです。
CSSで頑張るにしても、HTMLを編集できないので限界があります。

そこで、HTMLも編集できるようなスクリプトを書きました。

2023年10月時点では機能します。
（今後、Jimdoの仕様変更があれば機能しなくなるかもしれません。）

```HTML
<div id="my_blog_list">
    <template id="my_blog_list_template" data-mybloglist-count="5">
        <div>
            <span class="my_blog_list_date">Y年 M月 D日</span>
            <a href="#" class="my_blog_list_link">
                <span class="my_blog_list_title">タイトル</span>
            </a>
        </div>
    </template>
</div>
<script>
/* <![CDATA[ */
{
'use strict';
    fetch( new URL('/rss/blog', location.origin) )
    .then(res => res.text())
    .then(xml => {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xml, 'text/xml');
        const items = [...xmlDoc.querySelectorAll('item')];
        const template = document.getElementById('my_blog_list_template');
        const count = template.dataset.mybloglistCount | 0;
        const fragment = items.filter((_, i) => (i <= count)).reduce((frag, item) => {
            const clone = template.content.cloneNode(true);
            const dataDate = new Date(item.querySelector('pubDate')?.textContent);
            const formatDate = clone.querySelector('.my_blog_list_date').textContent;
            const dispDate = formatDate.replace(/[YMD]/g, match => (match === 'Y') ? dataDate.getFullYear()
                : (match === 'M') ? (dataDate.getMonth() + 1).toString().padStart(2, '0')
                : (match === 'D') ? dataDate.getDate().toString().padStart(2, '0')
                : match );
            clone.querySelector('.my_blog_list_date').textContent = dispDate;
            clone.querySelector('.my_blog_list_title').textContent = item.querySelector('title')?.textContent;
            const linkUrl = new URL(item.querySelector('link')?.textContent);
            clone.querySelector('.my_blog_list_link').href = linkUrl.pathname;
            frag.appendChild(clone);
            return frag;
        }, document.createDocumentFragment());
        document.getElementById('my_blog_list').appendChild(fragment);
    }).catch(err => {
        console.error(err);
    })
}
/*]]>*/
</script>
```

## 内容

スクリプトの内容を簡単にまとめます。

- HTMLは、ちらつきが出ないように、templateタグで囲んでおきます。
- `/rss/blog` に、記事のxmlファイルがあるので、fetch APIでアクセスして、パーサで読み込みます。
- 新しい記事をdata-mybloglist-countの数だけを繰り返します。
- 日付、タイトル、リンク先は、それぞれquerySelectorで読み取ります。
- 日付のYMDを、年月日に置き換えます。
- fragmentにまとめて、最後に追加します。

descriptionは、再度パーサを使うと読み込みできると思います。

## 使い方

使い方は簡単です。

- Jimdoのトップページで、「コンテンツを追加」を押します。
- 「その他のコンテンツ&アドオン」を押します。
- 「ウィジェット/HTML」を押します。
- 入力画面に、上記のスクリプトをコピペします。

無事、表示されたら、HTML部分を編集してください。

## 注意点

- 編集画面では表示されません。
- 古いブラウザだと動かないかもしれません。
- ブラウザのJavaScriptが機能している必要があります。
- ジンドゥーのblog機能を有効する必要があります。
- 冒頭に書いたとおり、ジンドゥーの仕様変更があれば、機能しなくなるかもしれません。
Geopandas インストール

```
conda create -n geo_env python=3.9
```

```
conda activate geo_env
```
以降は仮想環境に入りっぱなし
```
conda install -c conda-forge geopandas
```

```
pip install jupyter environment_kernels
```

```
conda install notebook ipykernel
```

```
ipython kernel install --user --name=geo_env --display-name=geo_env
```
AWS Cloud Practitioner 学習記録２（１／２）

:::note info
AWS Skill Builder における下記コンテンツの学習記録（ポイントとメモ）です
AWS Cloud Practitioner Essentials (Japanese) (日本語実写版)
:::

# モジュール２：クラウドでのコンピューティング

### 概要
ここで出てくる用語
+ Amazon Elastic Conpute Cloud (Amazon EC2)
+ Amazon EC2 Auto Scaling
※以下は学習記録２（２／２）で登場
+ Elastic Load Balancing (Amazon ELB)
+ Amazon Simple Notification Service (Amazon SNS)
+ Amazon Simple Queue Service (Amazon SQS)

### Amazon Elastic Conpute Cloud (Amazon EC2)
Amazonが管理する物理ホストマシン上で動作する仮想マシンを提供するサービス。インスタンスは数分で作成できる
希望するインスタンスをリクエストするだけで起動し、実行中のインスタンスのみに支払いが発生する。停止または終了後は課金されない
OSはWindowsまたはLinuxを選択できる
リソースのサイズも変更可能、メモリやCPUを追加または削除できる（スケールアップ／スケールダウン）
必要な分だけインスタンス自体も増減できる（スケールアウト／スケールイン）

### インスタンスタイプ
+ 汎用
    + コンピューティング/メモリ/ネットワークの各リソース間でバランスが取れた汎用インスタンス
    + 特化した目的がないならとりあえずこれを選ぶ
+ コンピューティング最適化
    + 高パフォーマンスのコンピューティングを必要とするインスタンス
    + 計算負荷の高い処理や、多数のトランザクション処理を行うバッチ処理が必要な場合に選ぶ
+ メモリ最適化
    + メモリ内で大規模なデータセットを処理するインスタンス
    + 高パフォーマンスのデータベース（インメモリデータベースなど）や、大量の非構造化データをリアルタイム処理したい場合に選ぶ
+ 高速コンピューティング
    + ハードウェアアクセラレータを使用するインスタンス
    + 浮動小数点演算やグラフィック処理、ストリーミングなど、通常のCPUよりも特化したコンピューティングが必要な場合に選ぶ
+ ストレージ最適化
    + ローカルストレージで高いIOPSを発揮するインスタンス
    + 分散ファイルシステムやデータウェアハウス、OLTPなどシステム入出力にパフォーマンスを求める場合に選ぶ

### EC2の料金
+ オンデマンドインスタンス
    + 短期・不定期、中断できないワークロード向け、お値段それなり
    + 前払い／最低利用期間なし、自分で停止するまで実行される
    + 利用期間が１年未満のアプリケーション開発・テスト環境や、使用パターンが予測不能な場合にオススメ
+ リザーブドインスタンス（RI）
    + 使用量がおおよそわかっているワークロード向け、けっこう安い
    + １年または３年の期間で、前払いを 一括／一部／なし から選べる。なお契約分を超えて利用するとオンデマンド料金になる
    + 標準リザーブドインスタンス：以下の仕様と、AWSリージョンがわかっている場合に適している。AZは指定もできる
        + インスタンスファミリーとサイズ（m5.xlargeなど）
        + プラットフォーム（OS）
        + テナンシー（デフォルトまたは専有[^1]）
    + コンバーティブルリザーブドインスタンス：インスタンスを異なるAZまたはタイプで実行する必要がある場合に適している。利用期間中にインスタンスファミリーやサイズ、プラットフォームを交換できる。
+ EC2 Instance Savings Plans
    + インスタンスファミリーとリージョンに対して、1年または3年の期間、1時間当たりの支出をコミットすることで利用料を削減できるプラン（最大72%の割引）
    + ~~上記の説明だとよく分からなかった~~あらかじめ1年または3年にわたって1時間あたりの支払量を決めておくと、そこまでの使用量は大幅に割引されるお得なプラン。超過分はオンデマンド料金。また、RIとは異なり、途中でインスタンスのタイプやサイズ、OSなどを変更しても割引が継続して効く
+ スポットインスタンス
    + 開始／終了時間が変動する、もしくは中断に耐えられるワークロードに適したプラン。とても安い
    + スポットリクエストを行うと、AWS側のインスタンス容量に余裕があるときに実行されるが、他のインスタンス需要増加や容量不足などでスポット料金でコンピューティングできなくなるとAWS側から中断される
+ 専用ホスト
    + Amazon EC2インスタンス容量を備えた、専用の物理サーバ。おねだん高い
    + ソケット、コア、VM単位のサーバ構成をサポート、BYOL(Bring-Your-Own-License)[^2]に対応できる

### EC2のスケーリング
スケーラビリティを実現するプロセスの自動化
##### Amazon EC2 Auto Scaling
アプリケーションの需要変化に応じたインスタンスの追加と削除を自動的に実施できるサービス
+ 動的スケーリング：変化する需要に対応する
+ 予測スケーリング：需要の予測に基づいて、インスタンス数をスケジュールする

上記のほか手動でのスケーリング、スケジュールに基づくスケーリングがある

##### Auto Scaling グループ
グループのスケーリングポリシーによって、以下の容量でスケールを増減させることができる
+ 希望する容量：グループに必要なインスタンス数。通常はこの数を維持しようとする
+ 最小容量：スケーリングで最小となるインスタンス数。（デフォルトでは希望する容量）
+ 最大容量：スケーリングで最大となるインスタンス数。

#
ここまで講座の内容は30分程度ですが、長いので分割します

[^1]:Dedicated Instance. 単一のユーザ専用ホスト上で動作する専有インスタンス。セキュリティ要件などで、他ユーザとインスタンスの同居を許容できない場合などに利用する。専用ホストとは別の概念

[^2]:ソフトウェアによっては、CPUのソケット数・コア数に応じたライセンスが存在するものがある（Windows ServerとかOracleとか）。オンプレミスからワークロードをクラウドに移行するが、利用していたライセンスはそのまま利用したい、といったケースで利用する
html学習の始め方

このページは社内で全くhtmlに触れたことがない人向けに作成しております。
あえて浅い知識のみに絞り、伝えておりますので深くhtmlについて知りたい方はご了承ください。


## htmlとは何か
htmlというのはざっくりというとwebサイトを作成するときに使うものであり、webサイトの**骨組み**を作るものだと思ってください。
シンプルなwebサイトならば非常に簡単に作成することが出来るので、下記の方法で一度webページを作成してみましょう。

### 必要なもの

* メモ帳
* webブラウザ(chrome)

基本的にはこの2つだけでwebサイトを作ることが可能です。
まずは簡単なwebサイトを作成してみましょう。

<br><br>

## 簡単なwebサイトの作成

簡単なwebサイトを作りますが、今後の学習のために拡張性を持たせた状態で作成をしていきます。
大まかな手順は下記の通りに進んでいきます。

<br><br>

|Step.1|拡張子の表示|
|:-------|----------|
|Step.2|フォルダーの作成|
|Step.3|メインページ作成|

<br><br>

この章ではあくまでもページの作成までがメインとなりますので、難しいことは何もありません。
書かれた通りに進んでみましょう。



#### Step.1 拡張子の表示

まずはどこでも良いのでフォルダを開いてください。
※``windows+e``でフォルダは開きます

出てきたフォルダの上部にある[表示]をタッチし、**ファイル名拡張子**と書かれたチェック項目をチェック状態にしてください。

これで[拡張子]というものが表示されるようになります。



#### Step.2 フォルダーの作成

デスクトップでもどこでも良いので右クリックを押し[新規作成]→[フォルダー]を選択しましょう。
これでフォルダーが作成されます。
今回は学習用として使用しますので、フォルダーの名前を

<br><br>

```
learn
```

<br><br>

に変更してみましょう。

フォルダの作成が完了したら、作成した**learn**フォルダーの中に入ってください。




#### Step.3 メインページ作成

**learn**フォルダーに入ったら、フォルダーの中で右クリックをし[新規作成]→[テキスト ドキュメント]と選択しましょう。
作成されたファイルの名前を下記のように変更してください。

<br><br>


```
index.txt
```

<br><br>

作成が完了したら、index.txtを開きメモ帳で下記のように記載してみてください。

<br><br>

```html:index.txt
<h1>こんにちは</h1>
webページとして表示されています。
```
※単純にページを表示したいので今はh1等の意味を知らなくて問題ありません。

<br><br>

ここまで作成が完了したら、一度メモ帳を閉じて**learn**フォルダーに戻り表示されている**index.txt**のファイル名を下記のように変更してください。

<br><br>

```
index.html
```
※ファイルを選択状態で```F2```を押すと簡単にファイル名を変更出来ます

<br><br>

ファイルの拡張子[.(ドット)以降]を変更したらアイコンが変わりましたか？
ブラウザのアイコンに変更されていたら準備完了です。

そのアイコンをダブルクリックして開いてみましょう。


![localhost_63343_006_test_%E5%AD%A6%E7%BF%92%E7%94%A8_learn_index.html__ijt=l754j96kj26ukskpd3m0ucjr8m&_ij_reload=RELOAD_ON_SAVE (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92026/eaef6e7f-e0ff-eeb1-c69d-e8e1852eb32c.png)

このような画面が表示されましたか？
単純に文字がそのまま出力されるだけではなく、```<h1>こんにちは</h1>```と書かれた部分が大きく表示されhtmlとして変換されてるのがわかると思います。

このようにhtmlは非常に簡単に書くことができます。
しかし実際の現場ではhtml単体のみで使われることは少なく、実際には下記のようなたくさんの言語との組み合わせで使用されます。


- CSS: 見た目や動きの変更
- javascript: 多岐に渡る動作やギミックの追加

他にも沢山の他言語の中でwebページを作成するときにhtmlが使用されます。
何かしらのwebページを作成したいと考えた時には大まかにでもhtmlを理解していくことが必要になるでしょう。

<br><br>



## 次の学習について

今回は大まかなhtmlとはということについて説明をしました。
次は実際にhtmlファイルを作っていく時にあると便利なエディタの説明をしていきます。
Footerの作成ではfixedやabsoluteはNGな理由(画面下の固定は実務では使わない)

# この記事の背景
今現場でフロントエンドの開発に初めて参画しています。
その時に```Footerの修正```のタスクを任されました。

その時に先輩から指摘されたことを書きます。

# この記事の対象
・未経験エンジニア
・フロントエンド開発の経験がないエンジニア

# Footerなんだから画面の下に固定されるもんじゃないの？
僕もあまりフロントエンドの開発の知識がなかったせいで最初はFooterは画面の下に固定されるもの
だと思っていました。そのくらい無知でした。実際のWebサービスではあり得ないことです。

# なぜ画面の下に固定しないのか？
Qiitaを例に出してみます。
通常の画面だとFooterは見えないです。

![スクリーンショット 2023-10-10 11.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/f75e8ead-e94b-aca7-7ed0-7d435f32af88.png)

下にスクロールすると見えるようになります。
![スクリーンショット 2023-10-10 11.40.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/a932c32a-d67a-7198-3cce-b58c87ba6628.png)

もし上の画像の黒い部分がスクロールしている間ずっと見えていたらなんか見栄え悪いし、
```ユーザー体験が減ってしまいます```。
***スクロールをしていって1番下に行けばFooterが見えるのが普通***です。

***ユーザーから見てどうかを感げて実装していくのが大切***です。
# 実際のコードを例にしてみた

```footer.jsx
#省略
const Footer: React.FC = () => {
  return (
    <AppBar
  className="flex justify-center text-center text-xs bg-red text-white  absolute inset-x-0 bottom-0 h-10" // 必要なスタイルに変更する
  #省略
>
   @React学習
</AppBar>
  );
};

export default Footer;
```
これだと画面の下にフッターが固定されます。***classNameの中を変更する***必要があります。

# 終わりに
初歩的なことですが、ユーザー目線で実装していく必要があるのでこの記事にまとめました。
特にフロントエンドはユーザーの目に映るので注意が必要です。
Polars: 各グループの最初の行を削除する

# Polars: 各グループの最初の行を削除する

https://stackoverflow.com/questions/77214290/

```python
df = pl.from_repr(
    """
    shape: (8, 2)
    ┌─────┬───────┐
    │ id  ┆ value │
    │ --- ┆ ---   │
    │ i64 ┆ i64   │
    ╞═════╪═══════╡
    │ 1   ┆ 5     │
    │ 2   ┆ 6     │
    │ 2   ┆ 1     │
    │ 2   ┆ 2     │
    │ 2   ┆ 3     │
    │ 3   ┆ 30    │
    │ 3   ┆ 10    │
    │ 3   ┆ 20    │
    └─────┴───────┘
    """
)
```

`id`列が同じ行が複数ある場合、その各`id`について1行目を削除したい。

```python
result_output = pl.from_repr(
    """
    ┌─────┬───────┐
    │ id  ┆ value │
    │ --- ┆ ---   │
    │ i64 ┆ i64   │
    ╞═════╪═══════╡
    │ 1   ┆ 5     │
    │ 2   ┆ 1     │
    │ 2   ┆ 2     │
    │ 2   ┆ 3     │
    │ 3   ┆ 10    │
    │ 3   ┆ 20    │
    └─────┴───────┘
    """
)
```

---

この問題は以下のように分解できる。

1. `id`列で定義されるグループのうち、最初に出現する行を削除する。
2. ただし、グループの行数がもともと1行のみを持つ場合は、その行を残す。

行フィルタリング操作なので、[`df.filter()`](https://pola-rs.github.io/polars/py-polars/html/reference/dataframe/api/polars.DataFrame.filter.html#polars-dataframe-filter)を使うことが考えられる。上の問題は、以下のような`Expr`を作ると解釈できる。

1. `id`列で定義されるグループのうち、最初に出現する行が`False`となり、それ以外が`True`。
2. 1が`False`のもののうち、グループ長が1の`id`は`True`。

```text
┌─────┬───────┬───────┬────────┬───────┐
│ id  ┆ value ┆ cond1 ┆ cond2  ┆ cond  │
│ --- ┆ ---   ┆ ---   ┆ ---    ┆ ---   │
│ i64 ┆ i64   ┆ bool  ┆ bool   ┆ bool  │
╞═════╪═══════╪═══════╪════════╪═══════╡
│ 1   ┆ 5     ┆ false > true  -> true  │
│ 2   ┆ 6     ┆ false > false -> false │
│ 2   ┆ 1     ┆ true  ---------> true  │
│ 2   ┆ 2     ┆ true  ---------> true  │
│ 2   ┆ 3     ┆ true  ---------> true  │
│ 3   ┆ 30    ┆ false > false -> false │
│ 3   ┆ 10    ┆ true  ---------> true  │
│ 3   ┆ 20    ┆ true  ---------> true  │
└─────┴───────┴───────┴────────┴───────┘
```

1つ目についていえば、[`Expr.is_first_distinct()`]((https://pola-rs.github.io/polars/py-polars/html/reference/expressions/api/polars.Expr.is_first_distinct.html#polars-expr-is-first-distinct))で「各グループのうち最初に出現する行」を特定することができる。否定なので`True`/`False`を反転する[`.not_()`](https://pola-rs.github.io/polars/py-polars/html/reference/expressions/api/polars.Expr.not_.html#polars-expr-not)を付加する。

2つ目については、行数を求める[`pl.count()`](https://pola-rs.github.io/polars/py-polars/html/reference/expressions/api/polars.count.html#polars.count)を、グループごとに適用した結果が`1`の行を判定する。すなわち`pl.count().over("id") == 1`で求めることができる。

「1が`False`のもののうち」というのはOR条件のことである。

---

したがって、以下が最終的な解答となる。

```python
out = df.filter(
    pl.col("id").is_first_distinct().not_()
    | (pl.count().over("id") == 1)
)

print(out)
# shape: (6, 2)
# ┌─────┬───────┐
# │ id  ┆ value │
# │ --- ┆ ---   │
# │ i64 ┆ i64   │
# ╞═════╪═══════╡
# │ 1   ┆ 5     │
# │ 2   ┆ 1     │
# │ 2   ┆ 2     │
# │ 2   ┆ 3     │
# │ 3   ┆ 10    │
# │ 3   ┆ 20    │
# └─────┴───────┘
```
[個人メモ]dotnetコマンドを利用して既に存在するNetFramework4.8のcsファイルからプロジェクトファイルを生成してビルドをする方法

# [個人メモ]dotnetコマンドを利用して既に存在するNetFramework4.8のcsファイルからプロジェクトファイルを生成してビルドをする方法
## 新しいプロジェクトファイルを作成する
フォームアプリでnetframe4.8の場合
```winbatch
dotnet new winforms --target-framework-override net48 -n "プロジェクト名"
```
以下のcsprojファイルが生成される
```xml
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net48-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

</Project>
```
次の部分があるとビルド時にエラーが発生するので削除しておく
```xml
<Nullable>enable</Nullable>
```
```xml
<ImplicitUsings>enable</ImplicitUsings>
```
## ファイル
csprojファイルだけ残し、自動生成されたProgram.csやobjフォルダ等は全部削除しておく

削除が終わったらcsprojと同じフォルダに作成済みのソースコードファイルを置く
dllファイルについては置いた後に次のコマンドを実行してcsprojを編集する必要がある。
```winbatch
dotnet add package "参照名(System.Net.Http等。拡張子不要)"
```
## 実行またはビルド
ここまでの作業が終了すれば
```winbatch
dotnet run
```
コマンドを実行すればアプリがビルドされ実行される
MURATA CMWX1ZZABZ  の内部配線（DIO関連）

# 概要
MURATA　CMWX1ZZABZ（STM32L072(STM32L082)とSX1276内蔵パッケージ）
Semtech の 最新版ソースを見ると、

https://github.com/Lora-net/LoRaMac-node

これまでとことなり、DIO0 〜 DIO5 までの全てのピンが利用されている。

これで明らかになったのは、STM32L082 と SX1276 間のPINアサイン。

https://github.com/Lora-net/LoRaMac-node/blob/master/src/boards/B-L072Z-LRWAN1/board-config.h

SX1276の初期設定で DIOピンの機能を変えられるが、
別の用途に使ってはいけない（使わないほうが良い）ピンが、より明確になった。

CMWX1ZZABZは、内部情報は公開されていないので、これはとても参考になった。

# 以上
Gitのインストール

Windows11(64ビット版)にGitをインストールした手順を記録します（2023年10月）。

## Gitのインストール
Gitのダウンロードページ[「git - Downloads」](https://git-scm.com/downloads)にアクセスし、「Download for Windows」をクリックする。

<img width="700" alt="git (1).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/b245c1b7-6618-6896-6b51-c527f42ff471.jpeg">

ページ内のStandalone Installerの下の「64-bit Git for Windows Setup.」をクリックし、ダウンロードする。

<img width="700" alt="git(2).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/e4ffed1f-ad5e-8a60-51bc-606c57786dcb.jpeg">

## Gitのインストール
ダウンロードされたファイルをクリックすると、インストーラーが起動する。次の画面はデフォルトのまま「Next」ボタンをクリックして進む。

<img width="400" alt="git(3).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/f79e575c-f554-d26e-482c-43ea59b93c84.jpeg">
<img width="400" alt="git(4).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/37668e5b-185f-47c8-2b4b-e0b319fce634.jpeg">
<img width="400" alt="git(5).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/b88414c7-68c1-93ff-af8d-805daea3eb97.jpeg">

次の画面（Gitを操作するときのエディターの選択）は使用するエディターをリストから選択し、「Next」をクリックする。

<img width="400" alt="git(6)-1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/61191b58-9bc3-ffc0-d8a2-b5e1eba81f5f.jpeg">

以降の画面はデフォルトのまま「Next」をクリックして進む。
<img width="400" alt="git(7).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/96cf2c93-d3a5-0587-cddc-5476c3dc6b7e.jpeg">

<img width="400" alt="git(8).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/b7bc77c5-de74-4f44-50a8-1c1454a63ea5.jpeg">
<img width="400" alt="git(9).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/b4c07309-284b-c953-939e-fb4cd02eea9f.jpeg">
<img width="400" alt="git(10).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/1b5ac003-c97e-6684-cd8b-16ce0c23041e.jpeg">

<img width="400" alt="git(11).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/9bea776f-9eaa-d5cf-ed04-5e1db3894d2f.jpeg">
<img width="400" alt="git(12).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/b540b944-1658-8512-5b8a-e9b1871fef7f.jpeg">
<img width="400" alt="git(13).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/14a6c0ce-45c6-3dbf-6659-a84a5c330e48.jpeg">
<img width="400" alt="git(14).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/214100e8-9254-96b4-7e2c-40ee16c8679e.jpeg">
<img width="400" alt="git(15).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/f38f3c51-34de-41ff-e249-c09a77ac87c1.jpeg">

次の画像は最後の設定画面でデフォルト（未選択）のまま、「Install」をクリックする。

<img width="400" alt="git(16).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/b4b573a0-de55-4fa3-d8b5-4248e83f0f2d.jpeg">

インストールが完了すると、次の画面が表示される。「View Release Notes」のチェックを外し、「Finish」ボタンをクリックして画面を閉じる。

<img width="400" alt="git(17).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570127/eff56b24-c4d9-ffdd-3092-b88fb409a70d.jpeg">
【JS】日付の比較 （端末のタイムゾーンに関わらず常にJSTで！）



「現在日付の2日後より前かどうか調べる関数」を作成します。

要件：
・OSのタイムゾーンに関わらずJSTで計算されるようにしたい！

⇒UTCの時刻を取得して+9することで、どこの国の時間で実行しても常にJSTで計算されるようになります。


```js
//現在日付の2日後より前かどうか調べる関数
const isDateWithinTwoDays = (date) => {
    //現在日付の取得
    var now = new Date() 
    
    // 現在日付から2日後
    const twoDaysLater = new Date(
        now.getUTCFullYear(),
        now.getUTCMonth(),
        now.getUTCDate() + 2,
        now.getUTCHours() + 9
    )
    
    const inputDate = new Date(date)
    
    const numTwoDaysLater =
        twoDaysLater.getFullYear() * 10000 + twoDaysLater.getMonth() * 100 + twoDaysLater.getDate()
        
    const numInputDate = inputDate.getFullYear() * 10000 + inputDate.getMonth() * 100 + inputDate.getDate()
    
    if (numInputDate < numTwoDaysLater) {
        return true
    } else {
        return false
    }
}
```

上記のようにすることで、例えば、`2023年12月31日`と`2024年1月1日`の比較が
`20231231`と`20240101`のような数値に置き換えられて比較されます。