OmniAICreator/Qiita-1.07M huggingface dataset:
解いてみた。「Cランク：宝くじ」

# 問題
[「Cランク：宝くじ」](https://paiza.jp/works/mondai/c_rank_skillcheck_archive/lottery)

# コード
Javaで解いてみました。

``` Java
import java.util.*;

public class Main {
    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);
        int nB = sc.nextInt();  // 当選番号
        int nN = sc.nextInt();  // 宝くじ枚数
        
        // 前後賞
        int nBefore = nB - 1;
        int nAfter = nB + 1;

        // 2等
        int nSecond = nB % 10000;
        
        // 3等
        int nThird = nB % 1000;
        
        for (int i = 0; i < nN; i++) {
            int nA = sc.nextInt();  // 宝くじ番号
            if (nA == nB) {
                System.out.println("first");
            } else if ((nA == nBefore) || (nA == nAfter)) {
                System.out.println("adjacent");
            } else if (nA % 10000 == nSecond) {
                System.out.println("second");
            } else if (nA % 1000 == nThird) {
                System.out.println("third");
            } else {
                System.out.println("blank");
            }
        }
    }
}
```

# 解説
## 標準入力からの数値の読み取り
Scanner インスタンスを作り、nextInt()メソッドで数値を取得しています。

## 当選番号の比較
### 1等
当選番号と宝くじ番号を比較します。
### 前後賞
当選番号±1 と宝くじ番号を比較します。
### 2等
当選番号と宝くじ番号を、それぞれ10000で割った余り（つまり、下4桁のみ）を比較します。
### 3等
当選番号と宝くじ番号を、それぞれ1000で割った余り（つまり、下3桁のみ）を比較します。
Cloud9の代替サイトをまとめてみた

Cloud9の新規利用が停止される...
一部界隈が騒然としましたね。
Cloud9はオンラインの開発・実行環境のため、自身のPCのスペックに左右されないこと、様々な言語が実行できる、安価等様々な魅力がありました。
特に、プログラミングスクールやワンデイのイベント等では扱いやすかっただけに代替サービスどうしよう...となってます。
あきらめてローカル環境も手ですが、内容によってはPCのスペックが要求されるため、厳しいのも事実ですよね。
そこで、Cloud9の代替サービスを列挙してみました！

# Google Cloud Shell
こちらはGoogleが提供している開発環境です。
Shell...と聞いてコンソールを思い浮かべる方もいると思います。
実はコンソールからVS Codeのようなエディタをひらくことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/dd931927-7423-9dea-499e-412ef43c130e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/da480549-b9fa-64a2-7abb-6cc21b213642.png)

こちらは、以下の利点があります
- 永続的に５GBの永続ストレージが付与される
- Googleアカウントを持っていれば利用できる
- オンライン開発環境で実行までできる
- VS Codeのように様々な拡張機能を追加できる

詳細はこちら

https://www.cloudskillsboost.google/focuses/19108?locale=ja&parent=catalog

# AWS SageMaker Studio
こちらはAWSが提供する開発環境です。
こちらは統合開発環境に機械学習が構築できるようなものです。
下記の画像からCodeEditerを選択することでエディターを開くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/f108cfca-0cb0-e2f1-246e-520f829a6cbe.png)

エディターはこちらもVS Codeに近い形のもので親しみありますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/690b8dd3-1390-731c-8407-adca0594bc05.png)

AWSですので、Cloud9の代替先として選びたいくなりますが以下、注意点です。

- Clolud9とは違い、無料枠は無い
- 料金は時間課金制
- ***インスタンスが起動している限り課金され続ける***

詳しくはこちらから

https://aws.amazon.com/jp/sagemaker/

# Gitpod
Githubのアカウントを持っていると割とさっくりと環境作成できるオンライン開発環境です。
こちらもVS Codeそっくりの画面ですので、VS Codeがどれだけ重宝されたデザインなのか伝わってきますね。
こちらは月50時間まで無料で使えるのもかなり大きなメリットですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/eb8ee257-9076-87d3-012a-4dd3abbccbfe.png)

詳しくはこちらから

https://www.gitpod.io/

# まとめ
Cloud9の代替ということで多くのWEB IDEがあります。
ただ、Cloud9が管理のしやすさ等々もあり、完全代替になりそうなサービスはなさそうですね...
Androidアプリ(Expo)でFCM V1を使ったプッシュ通知が送れない

# 前提
- Expoを使ったAndroidアプリ
- FCM(Firebase Cloud Messaging)のv1 APIを利用してプッシュ通知を送ろうとしている
- Expo:51
- expo-notifications:0.28.15


# 問題
- [公式の手順](https://docs.expo.dev/push-notifications/fcm-credentials/)通りにGoogle Service Account KeyをExpoのダッシュボードに登録しても、[Push notifications tool](https://expo.dev/notifications)からForce FCM V1を選択して通知をテストした時に端末に届かない
- ただしForce FCM Legacyを選択した場合は通知が届く

# 解決方法
Google Service Account KeyをExpoのダッシュボードに登録する際、ファイル名を`google-service-account-key.json`にする。

FirebaseのコンソールからGenerate New Private Keyしてダウンロードした時のファイル名は`your-project-name-firebase-adminsdk-f2att-b56532b987.json`のようなファイル名になっている。
公式の手順には「ファイル名を変更せよ」とは書かれていないが、ダウンロードした時のファイル名のままExpoダッシュボードに登録すると正常に動作しない。

# 終わりに
Xでも個人開発について発信しています
→https://twitter.com/ObataGenta

超イケてるデジタルカードサービス、Tagffyのほうに色々なリンクをまとめてます。
https://tagffy.com/GentaObata/
Java Gold 例題 MessageFormat, ResourceBundle

以下のプロパティファイルがあります。
`MyResources_en_US.properties`
```
message = Hello {0}. My name is {1}. I want to drink {2}. Can you tell me where I can buy it? thank you {3}.
```
次のコードの`insert code`にどのコードを入れると、
次の出力結果が表示される選択肢はどれでしょうか。
```java
import java.text.MessageFormat;
import java.util.Locale;
import java.util.ResourceBundle;

public class MessageFormatTest {
	public static void main(String[] args) {

		Object[] paramsUS = {
				"Jhon",
				"Kate",
				"water",
				"see you again"
		};
		
		ResourceBundle bundleUS =
          ResourceBundle.getBundle("MyResources", Locale.US);
		String messageUS = /* insert code */;
		System.out.println(messageUS);
	}
}
```
出力
```
Hello Jhon. My name is Kate. I want to drink water. Can you tell me where I can buy it? thank you see you again.
```



1.  MessageFormat.format(bundleUS, paramsUS)
1.  MessageFormat.format(bundleUS.get("message"), paramsUS)
1.   MessageFormat.format(bundleUS.getString("message"), paramsUS)
1.  MessageFormat.format(paramsUS, bundleUS.getString("message")
1.  MessageFormat.format(paramsUS, bundleUS)
1.  MessageFormat.format(paramsUS, bundle.get("message")
1.  該当なし

↓

↓

↓

↓

↓

↓

↓

↓

↓

↓

↓

↓

↓

↓

↓

3: MessageFormat.format(bundleUS.getString("message"), paramsUS)

```java
ResourceBundle bundleUS = ResourceBundle.getBundle("localizeAndFormat.format.MyResources", Locale.US);
```

`ResourceBundle.getBundle` は、指定されたロケールに対応するプロパティファイル `MyResources_en_US.properties`を読み込みます。

```java
String messageUS = MessageFormat.format(bundleUS.getString("message"), paramsUS)
```

`MessageFormat.format(String, Object[])` は、テンプレートに渡されたパラメータを埋め込み、完成したメッセージ文字列を生成します。

`bundleUS.getString("message")` は、プロパティファイルから `message` の値を取得します。この値は、パラメータを含むメッセージテンプレートです。

https://qiita.com/T-ngtj/private/df254aacd05be698199a
android stuido 2024の最初のstepで困ったこと備忘メモ

# android stuido 2024の最初のstepで困ったこと備忘メモ
## 日本語化パッチ
以下記事通りにインストール
https://qiita.com/kosh1/items/e8d9a312299aff3261ca

どのバージョンを入れたらいいのか？
自分の場合、android studioのバージョンが241.180だったため
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230884/d27b1252-61c8-ec31-2474-0270f76b8629.png)
パッチは241シリーズで一番新しそうな241.271を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230884/4c93bcd0-28fb-fd2d-0aba-26c474d15ec0.png)

## 物理デバイスの接続

手順：
1　スマホ　設定＞デバイス情報＞ビルド番号を7回タップ　して開発者オプション有効
2　スマホ　設定＞システム＞開発者オプションからUSBデバッグを有効
3　充電専用でないUSBケーブルでPCとスマホを接続
充電専用でなければスマホにUSB接続の許可/拒否が出るので、全部許可する
4　android stuioのデバイスマネージャーから対象が見えれば成功

どうやらandroid studio 2024ではAVDマネージャーがなくなっている模様
画面右側のデバイスマネージャーから選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230884/91670dfc-705c-499b-eec7-4239dfdeab3e.png)
Reactでmp3音声ファイルの再生法

mp3ファイルを再生しようとしましたが、TypeScriptでエラーが出ました。TSはデフォルトでmp3ファイルの拡張子を認識しないみたいです。[こちらの記事](https://github.com/joshwcomeau/use-sound/issues/66)のようなissuesも出ているみたいです。

## 対策

プロジェクトのルートディレクトリに`audio.d.ts` ファイルを作成してカスタム型定義ファイルを作成します。

```tsx
declare module '*.mp3';
```

## 参考記事

https://zenn.dev/x_point_1/articles/6458f11df942d7

https://github.com/joshwcomeau/use-sound/issues/66
DBMSのバッファに関して

# 背景
SQLをフレームワークでもデータ確認にも使うが、DBMSがどのような仕組みになっているかわからなかったため調査。
今回は、バッファ部分に関して。

# 目的
DB側のバッファ側の処理に関して少しイメージできるようになる。

# キーワード
・バッファマネージャ
・データキャッシュ、ログバッファ
・トレードオフ

# 本文

## バッファ（キャッシュ）とは？
パフォーマンス向上のために、データを保持しておくメモリのこと。

## バッファマネージャ
上記を管理する役割

## DBMS上の二つのバッファ
1. データキャッシュ
    ディスクにあるデータの一部を保持し、検索時に高速化する。
    mysqlでいう innodb_buffer_pool_size
2. ログバッファ
    更新時に一時的にデータを蓄え非同期にする
    mysqlでいう　innodb_log_buffer_size

## トレードオフ
1. データキャッシュとログバッファのトレードオフ
    メモリを割り当てるときに、検索性を重視するか、更新の速さを重視するかで割当量を考える必要がある。
2. ログバッファにおけるトレードオフ
    DBへの同期処理をするほど、データの整合性は高まるが、DBにその分アクセスするためパフォーマンスは悪くなる。

# 学び
データキャッシュ、ログバッファという二つのメモリ領域があること。
DBへのアクセスのたびにパフォーマンスは悪くなる。それを改善しようとした取り組みが上記であること。
解いてみた。「Dランク：N倍の文字列」

# 問題
[「Dランク：N倍の文字列」](https://paiza.jp/works/mondai/d_rank_skillcheck_archive/square)

# コード
Javaで解いてみました。

``` Java
import java.util.*;

public class Main {
    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);
        int nN = sc.nextInt();

        for (int i = 0; i < nN; i++) {
            System.out.print("*");
        }

        System.out.println("");
    }
}

```

# 解説
## 標準入力からの数値の読み取り
Scanner インスタンスを作り、nextInt()メソッドで数値を取得しています。

## 文字（'\*'）の表示
ループを nN 回まわして、print() メソッドで '\*' を表示しています。
（※ println() メソッドを使うと、改行が入るので不適。）

最後に改行するため、println() メソッドを呼んでいます。
Solaris11.4に上げた際のトラブル備忘録

仕事で起きたトラブルを解決した際の備忘録として記録を残す。
他に同じような事象が起きた際の解決策になれば幸いです。

現象：Solaris11.4に上げた際にユーザーログインができなくなった。
原因：iptablesの設定がSolaris 11.4から変わったため。

解説：
Solaris11.3にて、iptablesでSSH接続のアクセス制御を行っていた。
SRUを使用してSolaris 11.4に上げたところSSH認証の設定ファイルが変わった。

Solaris 11.3
/etc/sysconfig/iptables
↓
Solaris 11.4
/etc/ssh/sshd_config

参考
Oracle Solaris 11 セキュリティーガイドライン
→https://docs.oracle.com/cd/E26924_01/html/E25817/index.html


このsshd_configを読み込み、iptablesを読み込まなくなった。
ぶっちゃけ、メジャーバージョンアップでもないのにこういう設定が変わるのはどうかしていると思ふ。

余談：
sshd_configファイルに直接記述をしても動くことには動きます。
しかし
/etc/ssh/sshd_config.d
の配下にFilename.conf(Filenameはお好きに)を配置して読み込ませる方法を推奨するとの事です。
※直接sshd_configに書き込んでいたらsshd_config.newというファイルが生成されていました。直接編集するのは避けた方がよさそうです。

参考
RHEL9系/Amazon Linux 2023のsshdの設定について
→https://www.netassist.ne.jp/techblog/28212/
疲れやすい2年目プログラマーがプログラマー脳を読んでみた

## 背景
プログラマー2年目ですが、日常の業務後はぐったり疲れることもまだまだ多い。。
もうちょっと効率よく、プログラムを読む、書くができないものかと思ってたところ、
表題の本を見つけたので、アウトプット。

## 目的
プログラムを読む、書く、が今より楽になること

## キーワード
長期記憶、短期記憶、ワーキングメモリ
チャンク、

## 本文

### コードを理解するために必要な3つの領域
1. 長期記憶
    元々覚えているもの。言語ごとの書き方やif,for、などの事前知識
2. 短期記憶
    ソースを見てから把握する変数など一時的に蓄えておく情報
    短期記憶した内容が不足すると、情報不足となり、ソースコードが読み込めなくなる。
    ソースコードがあちこちに散らばっていて、読みにいく処理によって前の情報を忘れてしまう、といった感じ。
3. ワーキングメモリ
    短期記憶に近いが、計算処理など処理的な内容
    ソースコードを追っかけるときにトレースをするが、同時にたくさんの数値を処理しなければならない。
    ワーキングメモリがオーバーしてしまうと、トレースした内容を忘れてしまい、コードが理解できなくなる。

### 3つの領域を認識するためのワーク
#### 実践するワークと自分の傾向
ソースコードを読んでいる時に、上記3つのどれに当てはまる記憶を使っているか認識する。

自分の傾向
- 基本的に長期記憶とワーキングメモリで読んでいた。
- 何を意味しているかわからないものは短期記憶に留めるのが苦手で飛ばしがち。。
    - RES$="" など、RESの意味もわからず、なぜ初期化しているのかもわからない時など。
- 何しているかわからない行が2つ続くと、完全に処理が終えなくなった。

得た学び
- いかに意味理解を先にしておくかが重要であると感じた。
- 時間制限があったりテストのような形式だと短期記憶を有効に活用してコードを読めた。だらだら読まず、静かな場所で集中して言語化しながらソースを理解した方が良さそう。

### 短期記憶を有効に使うために意識するチャンクという概念
#### チャンクとは
情報を認識する単位のこと。
「iore da;k fa」という情報なら、i,o,r,...と一つずつ認識しなければならないが、
「cat loves cake」なら、cat,loves,cakeと一単語ずつ認識すれば元の文章を記憶できる。
人間の短期記憶的にはせいぜい数個しか覚えられないため、前者は覚えるのが厳しいが、後者は覚えやすい。

### コードへの活かし方
- ビーコンを使用したコードを記載する練習をする
ああ、これ処理ね、とパッとわかるような変数名を用いる。
自分がコードの機能を理解する上でパッと手掛かりになるようなものを、次回以降自分がコードを書く時に記載するようにする。
- コメントを書く
コードの概要をコメントに書くことで全体像を示し、コードをまとまりごと理解するための手助けをする。
- デザインパターンを用いる
パターン化したコードを用いることで長期記憶を上手に活用する。
 
## 学び
- 私自身、長期記憶とワーキングメモリに頼ってコードを読んでいることがわかった。
- なんとなくでも意味が解釈できるとコードを書けるが、意味自体解釈できないものはコードが書けない。
- 今まで慣れ親しんだものは長期記憶を活用できるため、非常に有用。

## 今後取り入れる内容
- 短期記憶は数個しか保持できない点を考慮し、全体的にざっと見て処理の流れを見たり、全体像を掴んでから読むということを意識する点。
- 短期記憶がどうしても必要になる場面ではメモをする。変数の位置、内容をメモしながら読むことで、短期記憶に頼らずに読むことができる。印刷、もしくはコードを手書きして、そこにメモ書きしながら読むと良さそう。

## 次回のアクション
上記を試すだけでお腹いっぱいになりそう。。。
実際のソースコードで実践あるのみ。
ビルドに関わる開発用語とビルドの流れ

## はじめに
知ってはいたけど言語化したことなかったので後学にもなるため書いてみました。
ビルドで使用する開発用語→ビルドとは→ビルドの流れ→ビルドと他作業の違いで書いています。

エンジニアになりたい方、初心者にも分かりやすいように心掛けているので分かりにくい事あったら教えてください。

## ビルドに関わる開発用語

### IDE（Integrated Development Environment）

IDEは（Integrated Development Environment）の略称で、日本では統合開発環境やIDEと言われています。

IDEはソフトウェア開発を行う上で必要なツールやソフトウェアを一つにまとめ、統一されたUI画面から操作が行えるようにしたソフトウェアパッケージの事です。

IDEは一般的に、コードエディタ・コンパイラ・リンカ・デバッグツール・テストツール・バージョン管理ツールなどから構成されており、メジャーなものとしては、Microsoftの「Visual Studio Code」やAppleの「Xcode」、オープンソースの「Eclipse」などがあります。

### ソースコードとは

ソースコードは**そのプログラムに「どんな動作をさせたいか」という処理の内容を書いたテキストファイルのことです。** 現場でよく聞く詳細設計はソースコードを日本語で書き下ろしたものです、建物で言うと基礎部分（土台）なので、ここが正しく書かれていないと全てが上手くいきません。

### コンパイルとは

コンパイルは **人間が書いたソースコードを機械語（バイナリコード）に翻訳する作業になります。**
ソースコードを機械語に翻訳することによってPCにソースコードの内容を実行してくれるようになります。

### リンク
リンクは、**コンパイルのプロセスで生成された翻訳された2つ以上のテキストファイル（オブジェクトファイル）を結合して、複数の指示が内包された実行可能なプログラム（バイナリファイル）を作成する工程のことです。** コンパイルされたテキストファイルの結合の他にライブラリの統合などを担います。

### ビルドとは

ビルドは、 **コンパイルからプログラム生成までの流れを一連のプロセス（工程）にしたもの（プログラム自動生成）をビルドといいます。**

## ビルドの流れ

簡単に書くと、**AとBのソースコード作成→ビルド（コンパイル＋リンク）→A+Bプログラム完成**となります。

詳細に書くとこんな感じです。

**1.作成したプログラムのソースコードに問題がないかをチェックした上で、コンパイルされる。**

**2.指定したコンパイル後の別ファイルと1のファイルをリンクさせ、実行可能なプログラムを生成する。**

以上です。基本はそこまで複雑ではありませんが、ざっくり説明したので使用ツールや現場の手順によってはビルドはより複雑になると思います。

## ビルドと他作業の違い説明
### ビルドとコンパイルの違い
ビルドはコンパイルと似ていますが、コンパイルも包含している、ソフトウェア開発における一連のプロセス（工程）であり、そのプロセスは自動化されているケースが多く見られます。

### ビルドとデプロイの違い
ソースコードからビルドを経てプログラムが生成されますが、このプログラムを実行可能な環境（サーバー環境など）に配置をして、実行できるようにする事を「デプロイ」といいます。例えると映画を作るのがビルドで、その映画を関係者のみの試写会で映す事をデプロイといいます。

### 終わりに
いかがでしたでしょうか、皆様の参考になれば幸いです。
最後まで見て頂きありがとうございました。
VRoid→Blender→Mixamo→UE5でキャラを動かす

## 参考文献
1.Vroid→blender→Mixamo→PlayCanvasでオリジナル3Dキャラを操作できるようにする！
  https://qiita.com/shujimuna1102/items/72ccf4224c66d74bdea4
2.【Blender】VRMファイルを扱う
https://styly.cc/ja/tips/blender-modeling-vrm/
3.[Unity] VroidアバターにMixamoアニメーションを適用する
https://zenn.dev/omini/articles/b8218b83b18b41
## VroidからBlenderへ
1.VRoidでキャラを作成する
今回はUE5で動かしたい「美咲マナ」を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/325dfb9b-1e81-2cdb-4401-5a6727648158.png)

2.キャラをエクスポート
下画像の赤枠で囲んだ部分をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/5b9810e2-952f-da43-1043-528db57e2677.png)

「VRMエクスポート」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/073414e0-52a6-e7a9-2c0f-669529fb5abd.png)

違和感のない範囲で「ポリゴン」「マテリアル」「ボーン」の削減を行う
削減後、「エクスポート」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/96403551-d055-2323-44ff-8ef5828a07ad.png)

VRMエクスポート設定が出たらフォーマットは「VRM0.0」にし、「タイトル」「作者」を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/f9027c9b-7a42-6ce7-086a-03c8d2906ded.png)


その後、「エクスポート」をクリックし、任意の場所に保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/810d4c89-b105-a8ca-2439-d71683a82abf.png)

## Blenderへキャラを導入
1.Blenderは使い慣れている2.9.3を利用
https://www.blender.org/download/releases/2-93/

２.BlenderへVRMを読み込むアドオンを入れる
https://vrm-addon-for-blender.info/en/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/482afa48-e07a-f5cb-41be-74a73e4b5401.png)



3.Blenderにアドオンをインストール
「Blender2.9.3」を起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/82ba3cb0-6e66-33c6-0e9e-0222d9fdeffd.png)

「全般」を選択し、初期からある立方体を「Deleteキー」で削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/d3949d9e-2deb-582e-9a49-c1a623f9a66c.png)

左上の「編集」から「プリファレンス」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/17f0d42b-e778-ba7a-aae0-acb8b281bb77.png)

「アドオン」、「インストール」で先ほど用意したアドオンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/d129b6a2-be4b-97f2-806b-a94606d9d1a0.png)
※）２回目のインストールである為、「(1)」がついてしまっているが気にしなくてよい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/cf943451-bc40-1717-f63c-98c3b5b7181d.png)

下画像の画面に移ったらチェックボックスにチェックを入れ、アドオンを有効化する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/ba73779e-69ec-3723-e6aa-acad391d180f.png)

４．BlenderへVRoidモデルをインポート
BlenderのLayout画面に戻り「ファイル」「インポート」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858651/c6ecbd81-bf40-43e9-ff49-689b0768a2f4.png)

Blenderへの導入完了

## 次回
今回はVRoidのモデルをBlenderに導入する所までやりました。
次回はBlenderからMixamoにインポートしアニメーションを付け、UE5で動かしてみたいと思います！
[Security of Mail Service] メールサービスのセキュリティ

# 一覧
|略称|名称|詳細|
|:--|:--|:--|
|SPF|Sender Policy Framework|電子メールを受信するサーバが、**電子メールの送信元のドメイン情報と電子メールを送信したサーバのIPアドレス**から、送信元ドメインの詐称がないことを確認する|
|DKIM|DomainKeys Identified Mail|電子メールを受信するサーバが、**電子メールのデジタル署名**から、送信元ドメインの詐称がないことを確認する|


# 参考リンク
- [令和5秋44_DKIM](https://www.ap-siken.com/kakomon/05_aki/q44.html)
- [令和4秋44_SPF](https://www.ap-siken.com/kakomon/27_haru/q44.html)
- [令和2秋44_SPF](https://www.ap-siken.com/kakomon/02_aki/q44.html)
- [令和元秋1_午後_SPF](https://www.ap-siken.com/kakomon/01_aki/pm01.html)
RailsとReactのDocker環境を作ってみる

## Rails環境を作る

### Dockerfile
リポジトリのトップにbackendディレクトリを作成。
backendディレクトリにDockerfileを作成。
```Dockerfile:Dockerfile
FROM ruby:3.1

WORKDIR /app
```
dockerをビルド。
```shell:
docker build .
```
docker経由でrailsアプリケーションを作成。
Dockerfileがコンフリクト起こすけど、上書きはしない。
{imageId}はビルドしたイメージのID。
```shell
docker run -it -v $(pwd):/app {imageId} bash -c "cd .. && gem install rails && rails new app -d postgresql --api"
```
Dockerfileを書き換える。
```Dockerfile:Dockerfile
FROM ruby:3.1

WORKDIR /app

COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock

RUN bundle install
```

### docker-compose.yaml
リポジトリのトップにdocker-compose.yamlを作成。
```docker-compose.yaml
version: "3"
services:
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"

```


## React環境を作る
### Dockerfile
リポジトリのトップにDockerfileを作成。
```Dockerfile:Dockerfile
FROM node:18.12.1-alpine

WORKDIR /app
```

dockerをビルド。
```shell:
docker build .
```

docker経由でreactアプリケーションを作成。
{imageId}はビルドしたイメージのID。
```shell
docker run -it -v $(pwd)/frontend:/app {imageId} ash -c "cd .. && npx -y create-react-app app"
```
リポジトリのトップのDockerfileをfrontendディレクトリに移動。

### docker-compose.yaml
docker-compose.yamlを修正。
```docker-compose.yaml
version: "3"
services:
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
    command: ash -c "npm start"
    ports:
      - "3001:3000"
    depends_on:
      - backend
```

## DBコンテナを作る
### docker-compose.yaml
docker-compose.yamlを修正。
```docker-compose.yaml
version: "3"
services:
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
    command: ash -c "npm start"
    ports:
      - "3001:3000"
    depends_on:
      - backend

  db:
    image: postgres
    volumes:
      - dbdata:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres

volumes:
  dbdata:

```
【ChatGPT＋Code Interpreter】で文字列の文字が回転するアニメGIFを作成します。


　どうも、カーブミラーです。

　今回は、文字列の文字が回転するアニメGIFを作成します。

:::note info
本記事は、ChatGPT（有料版）
で行なっております。画像は
あります。　あしからず。
:::

　ニュースはないので、
　　さっそく本題です。

　文字列の文字が
　　回転するアニメGIFを作成します。

　出来上がりがこちら。
![rotating_text (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/8c2748c1-a25e-32ba-d966-14e78995aaf0.gif)

　Promptがこちらです。
```Text:
# CodeInterpreterで文字列処理

### 初期設定
1. 画像のサイズ: `width = 512`, `height = 512`
2. 背景色: `bg_color = (255, 255, 255)` （白）
3. テキスト: `text = "I am a ChatGPT."`
4. テキストの色: `text_color = (0, 0, 0)` （黒）
5. フォントサイズ: `font_size = 48`
6. フォントパス: `font_path = "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf"`
7. フレーム数: `frames = 60` （1秒あたり30フレーム）

### 注意事項
コード不要。
確実に実行せよ。

### 処理内容
1. 白い正方形画像を作成する。
2. 画像中央にテキストを描画する。
3. [中央で、文章の一文字一文字が回転する5秒の]アニメーションGIFを作成する。
    - 各フレームにおけるテキストの位置を計算して配置する (`x`, `y`)
4. GIFを保存する (`gif_path`).
```

　ごらんのように
　　文字が回転するのは
　　　あんまり使い道がありそうに
　　　　ないですよね😅

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
HTTPについて

「体系的に学ぶ安全なWebアプリケーションの作り方」を読んだので、知識の定着のためにメモ。

## HTTP
データをやり取りするためのプロトコルの一つ。

ブラウザでwebサイトにアクセスすると、以下のことが起こっている。
1. ブラウザはサーバーへHTTPリクエストを送る
1. サーバーはブラウザへHTTPレスポンスを送る

### リクエストメッセージ
ブラウザからサーバーに送られる要求のこと。（○○ください。）
その1行目をリクエストラインと呼び、以下のような構成となっている。
`メソッド URL プロトコルバージョン`

### レスポンスメッセージ
サーバーからブラウザに送られる返信のこと。（○○どうぞ）
- ステータスライン：通信がうまくいったかなどの情報
- ヘッダ：返信の内容の種類（htmlとかただのテキストかなど）
- ボディ：内容

で構成されている

#### レスポンスヘッダ
レスポンスのデータがどのようなものかを指定する部分。
- Content-Length：ボディのバイト数を示す
- Content-Type：MIMEタイプを指定する（text/htmlとかtext/plainとか）

などがある。

#### パーセントエンコーディング
URL上で特別な意味を持つ記号や日本語をURLに記述する場合、用いられる。
文字をバイト単位で「%○○」（○○は16進数）で表す。

#### Referer
リンク元のURLを示すヘッダ。
リクエストメッセージのヘッダに付与される場合がある。
想定している遷移をしている事がわかる。

### HTTPはステートレス
ステートレスとは、あるHTTP通信をするのにリクエストとして渡す情報以外の情報を必要としない。
前提条件とか文脈とかがない。

すべての通信が独立しているイメージ。
解いてみた。「Dランク：Eメールアドレス」

# 問題
[「Dランク：Eメールアドレス」](https://paiza.jp/works/mondai/d_rank_skillcheck_archive/email_address)

# コード
Javaで解いてみました。

``` Java
import java.util.*;

public class Main {
    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);
        String sS = sc.next();
        String sT = sc.next();
        
        String sEmail = sS + "@" + sT;
        System.out.println(sEmail);
    }
}

```

# 解説
## 標準入力からの文字列の読み取り
Scanner インスタンスを作り、next()メソッドで文字列を取得しています。

## 文字列の足し算
標準入力から取得した文字列 sS と "@" と sT を足し合わせて、表示しています。
Qiita-GitHub更新

本記事は，qiita記事公開後，githubで管理するための更新方法のメモです．
[qiitaとgithubの接続はこちらの記事を参照ください](https://qiita.com/Qiita/items/32c79014509987541130)

qiita記事公開
↓
以下のコードでローカルに記事を同期する
```sh
$ npx qiita pull
```
↓
以下のコードでgithubへ同期する
```sh
$ git add .
$ git commit -m "Initial commit"
$ git push origin main
```
【Python】Fletでログ出力エリアを作る

### はじめに
もともとコンソールでログを出力していた部分をGUIでもログエリアを作って出力できるようにしたい…と思っていたところ、つまづいたところと対処法をメモしておきます。

### テキストフィールドで実装してみる
FletはTextFieldというコントロールがあり、これで単一行の入力エリアから複数行のエリアまで自由に作ることができます。

https://flet.dev/docs/controls/textfield

ただ調べてみると、こちらにログを出力するように作った場合、自動で最下部にスクロールするというオプションなどは存在しませんでした。

### リストビューで実装してみる
ListViewはその名の通りリストを表示するために使われます。こちらはauto_scrollというオプションがついており、Trueにしておくと更新があった場合は自動で最下部にスクロールされます。

https://flet.dev/docs/controls/listview

~~~python
#ログ出力用のリストビューを作成
log = ft.ListView(expand=1, spacing=10, padding=20, auto_scroll=True)
~~~
上記のようにリストビューのコントロールを作成したら、
~~~python
log.controls.append(ft.Text("ここにログを入れます"))
~~~
このような形でappendしてやると、リストに追加した上で自動スクロールされます。

### ログを非同期で出力する
ログ部分については非同期で処理し、他の操作をできる必要があります。
こちらについてもドキュメントで説明があり、こちらを参考に作ると問題ありませんでした。

https://flet.dev/docs/getting-started/async-apps/
wslでmanim その6

# 概要
wslでmanimやってみた。
manim見つけたので、やってみた。

# 参考にしたページ

https://qiita.com/Sugimoto_Yuuki/items/6ca0b358420d0e54edb2


# サンプルコード

```
from manim import *
from collections import deque

class TableBFS(Scene):
	def construct(self):
		m, n = map(int, input().split())
		g = [list(map(int, input().split())) for _ in range(n)]
		table = MathTable([[str(cell) for cell in row] for row in g], include_outer_lines = True).scale(0.8)
		self.play(Create(table))
		self.wait(1)
		cnt_text = Text("Count: 0").next_to(table, UP)
		self.play(Write(cnt_text))
		dij = [(1, 0), (-1, 0), (0, 1), (0, -1)]
		visited = set()
		cnt = 0
		for i in range(n):
			for j in range(m):
				if g[i][j] == 0:
					self.play(table.get_cell((i + 1, j + 1)).animate.set_fill(GRAY, opacity = 0.5))
					continue
				if (i, j) in visited:
					continue
				que = deque([(i, j)])
				visited.add((i, j))
				while que:
					pi, pj = que.popleft()
					self.play(table.get_cell((pi + 1, pj + 1)).animate.set_fill(RED, opacity = 0.5))
					self.wait(0.1)
					for di, dj in dij:
						if 0 <= (ni := pi + di) < n and 0 <= (nj := pj + dj) < m:
							if g[ni][nj] == 0 or (ni, nj) in visited:
								continue
							que.append((ni, nj))
							visited.add((ni, nj))
				cnt += 1
				new_cnt_text = Text(f"Count: {cnt}").next_to(table, UP)
				self.play(ReplacementTransform(cnt_text, new_cnt_text))
				cnt_text = new_cnt_text






```

# 成果物

![TableBFS_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1a2ce8f7-f19d-5a02-ddab-45f1fce59073.gif)


以上。
DVAに合格したので、学習法/試験対策についてまとめてみた（2024年8月）

# 概要
2024年8月9日に`AWS DVA`を受験し、合格することができました。
余裕を持った点数で合格できたため、学習法について簡単にまとめました。

参考までですが、対策に使用した学習時間は`140H`です。

![Screenshot_20240809-191822_1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842674/6e9c1354-375f-3f61-f588-05302fffdca3.png)

# スケジュール
## 試験対策教材の読み込み
7月3日〜7月28日（`80H`）

[徹底攻略AWS認定デベロッパー - アソシエイト教科書＆問題集](https://www.amazon.co.jp/dp/4295018406?psc=1&ref=ppx_yo2ov_dt_b_product_details)の読み込み

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842674/537299ac-0948-73cc-b5db-62cf73f08fe0.png)

### 所感
- 試験で出題される問題よりも、細かい粒度でまとめており、初見での理解が難しい
- 単に試験に合格したい という人は読まなくても良いと感じるが、読むと各種サービス理解がかなり深まる
- 章末尾の問題集は実際の試験よりもかなり難しかったので、実施しなくても良いと感じる（後述の問題集の利用をおすすめします。） 

結論、**問題集着手前のAWS概要理解**を目的として利用することがおすすめです。

## 問題集をひたすら解く
7/29日〜8月8日(`60H`)

以下のサイクルでひたすらに問題集を解いていました。
1. 問題集を解く
1. 間違えた問題を復習

問題集のツールとして以下を利用しました。

https://www.udemy.com/course/aws-certified-developer-associate-practice-tests-dva-c01

https://www.udemy.com/course/dva-c02aws-2024/

https://cloud-license.com/

結論`CloudLicense`が最も良かったです。
理由は以下の通りです。
- `Practice Exams | AWS Certified Developer Associate 2024` 
    - 翻訳の必要がある
    - Deeplの有料プランを使用して翻訳してみたものの、精度の高い翻訳にはならなかった
- `【DVA-C02対応】AWS認定 デベロッパー アソシエイト 模擬問題集＋詳解 【2024年版最新】`
    - 日本語で問題が出題されているが、翻訳が微妙な箇所が多く理解に時間がかかった
    - ボーナスセットは難易度が高く、試験問題とはかけ離れている気がする
- `CloudLicense`
    - 翻訳が正確
    - 解説に画像が用いられており、イメージしやすい
    - 学習履歴を活用することで、間違えた問題の復習ができ、効率的に対策できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842674/9c254c08-66f6-50bc-8d0c-030c476d83c3.png)

<br>

`CloudLicense`のデメリットも挙げておきます。

- 他の講座に比べて高い（4080円/90日）
- 解説が直接コピーできない（開発者ツールを使えばコピー可）

出題される問題としては、3つの講座同じような問題が多かったです。
そのため、メリデメを比較してどれか1つの講座を購入すれば良いかと思います。

# まとめ
簡単ですが、以上です。
DVAはSAAよりも実務ベースで役立つことが多かったので、取得して良かったと感じます。
SOAも時間が合えば、取得してみようと思います。

皆さんの試験対策の役に立てたら嬉しいです！
JDLA Deep Learning for GENERAL 2024 #4 取得報告：市場価値を高めるオープンバッジの魅力

![JDLA_certificate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82835/9cb300b6-9c1d-1a5e-4ebc-18b9e18683dd.png)



日本ディープラーニング協会（JDLA）から「JDLA Deep Learning for GENERAL 2024 #4」の認定を受け、オープンバッジを授与されました。この記事では、この資格を取得するまでの道のりや、オープンバッジが市場価値を高める理由についてご紹介します。

## JDLA Deep Learning for GENERAL 2024 #4とは？

JDLAが提供する「Deep Learning for GENERAL」資格は、AIやディープラーニングの基礎知識を有することを証明するための資格です。これにより、AI技術の応用や開発において必要な基本的な理解があることを第三者に示すことができます。特に、2024年度版の#4は最新の知見を反映しており、AI業界での認知度も高まっています。

## 資格取得のために取り組んだこと

資格取得に向けた準備は決して簡単なものではありませんでした。以下のリソースを活用し、効率的に学習を進めました。

- **教材選定**: JDLA公式の推奨教材に加え、オンラインの無料リソースやYouTubeのチュートリアルを活用しました。
- **過去問の活用**: 過去問を繰り返し解くことで、出題傾向を把握し、弱点を補強しました。
- **実践経験の積み重ね**: 実際のプロジェクトで学んだ知識を応用し、実践的なスキルを身につけることを意識しました。

これらの努力の結果、無事に資格を取得し、オープンバッジを手にすることができました。

## オープバッジの持つ力

オープンバッジは、取得したスキルや知識をデジタル上で証明するもので、LinkedInやポートフォリオサイトで共有できます。これにより、自分のスキルを明確にアピールできるだけでなく、信頼性のある第三者機関からの認定を受けた証としての価値があります。

### 市場価値の向上

特に、AI業界ではスキルセットの明確化が重要です。オープンバッジを取得することで、以下のようなメリットが得られます。

- **信頼性の向上**: 採用担当者やクライアントに対して、自分が持つスキルの確かな証明となる。
- **キャリアの拡大**: 新しいプロジェクトや職務に挑戦する際に、有利に働く。
- **ネットワーキング**: 同じ資格を持つ人々とつながりやすくなり、情報交換や協力が促進される。

## 実務への応用

資格を取得して終わりではなく、今後はこの知識を活かして、iOSエンジニアとしての開発効率化に取り組んでいきます。具体的には、以下のようなアプローチを考えています。

- **AIを活用したコードレビュー**: ディープラーニング技術を利用して、コードの品質評価や潜在的なバグの検出を補助することで、より効率的かつ効果的なコードレビューを実現する。
- **予測モデルを用いたユーザー行動分析**: アプリ内でのユーザーの行動を予測し、それに基づいたパーソナライズドな機能提供やUIの改善を行う。
- **開発プロセスの最適化**: データ駆動型の意思決定を支援するAIツールを活用し、プロジェクト管理やリソース配分の最適化を図る。

## 次なるステップ

オープンバッジを取得したことは、私にとって大きな一歩ですが、これはあくまで通過点です。今後もさらなるスキルアップを目指し、次のステップとして他の資格取得や実務での応用を目標に掲げています。

## まとめ

JDLA Deep Learning for GENERAL 2024 #4の取得と、それに伴うオープンバッジの授与は、私のキャリアにとって非常に有益なものとなりました。市場価値を高めるために、デジタル証明書としてのオープンバッジを活用し、今後のキャリア形成に役立てていきたいと思います。

もし、AIやディープラーニングに興味がある方がいれば、ぜひこの資格の取得を目指してみてください。きっと、あなたの市場価値も向上するはずです。
wslでmanim その5

# 概要
wslでmanimやってみた。
manim見つけたので、やってみた。

# 参考にしたページ


https://qiita.com/phlogis/items/8c1399ceb346eb50b30b

# サンプルコード

```
from manim import *

class RiemanIntegral(Scene):
	def construct(self):
		axes = Axes(x_range = [-0.5, 5], x_length = 8, y_range = [-0.5, 10], y_length = 7).add_coordinates()
		axes_labels = axes.get_axis_labels(MathTex("t").scale(1), MathTex("v").scale(1))
		graph = axes.plot(lambda x: 0.4 * (x - 1) * (x - 3) * (x - 4) + 6, x_range = [-0.5, 5], color = YELLOW)
		graph_label = axes.get_graph_label(graph = graph, label = MathTex("v(t)"))
		self.add(axes, graph, axes_labels, graph_label)
		dx_list = [4, 1, 0.5, 0.3, 0.1, 0.05, 0.01]
		rectangles = VGroup(*[axes.get_riemann_rectangles(graph = graph, x_range = [0, 4], dx = dx, stroke_width = 0.1, stroke_color = WHITE, ) for dx in dx_list])
		first_area = rectangles[0]
		for k in range(1, len(dx_list)):
			new_area = rectangles[k]
			self.play(Transform(first_area, new_area), run_time = 2)
			self.wait(0.5)
		self.wait()

```

# 成果物

![RiemanIntegral_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/2f496d1e-0120-3d6d-7c0c-418f2fd8e813.gif)

以上。
wslでmanim その4

# 概要
wslでmanimやってみた。
manim見つけたので、やってみた。

# 参考にしたページ

https://qiita.com/ymgc3/items/0b6179638a7166025c2f

# サンプルコード

```
from manim import *

class OpeningManim(Scene):
	def construct(self):
		title = Tex(r"This is some \LaTeX")
		basel = MathTex(r"\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}")
		VGroup(title, basel).arrange(DOWN)
		self.play(Write(title), FadeIn(basel, shift = DOWN),)
		self.wait()
		transform_title = Tex("That was a transform")
		transform_title.to_corner(UP + LEFT)
		self.play(Transform(title, transform_title), LaggedStart(*(FadeOut(obj, shift = DOWN) for obj in basel)),)
		self.wait()
		grid = NumberPlane()
		grid_title = Tex("This is a grid", font_size = 72)
		grid_title.move_to(transform_title)
		self.add(grid, grid_title)
		self.play(FadeOut(title), FadeIn(grid_title, shift = UP), Create(grid, run_time = 3, lag_ratio = 0.1),)
		self.wait()
		grid_transform_title = Tex(r"That was a non-linear function \\ applied to the grid",)
		grid_transform_title.move_to(grid_title, UL)
		grid.prepare_for_nonlinear_transform()
		self.play(grid.animate.apply_function(lambda p: p + np.array([np.sin(p[1]), np.sin(p[0]), 0,],),), run_time = 3,)
		self.wait()
		self.play(Transform(grid_title, grid_transform_title))
		self.wait()



```

# 成果物

![OpeningManim_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ebdd1499-a369-8d44-a1e3-2554db592d16.gif)



以上。
Hydration mismatch回避にuseEffectを使うな

タイトルの通りです。

## Hydration mismatch

ReactなどでSSRを伴う開発をしていれば一度は遭遇したことがあるのではないでしょうか。
SSRでレンダリングされたHTMLと、それを読み込んだクライアントが同様にレンダリングしたHTML(相当)に差異が生じた際、console上に記録されるエラーです。

例えば、以下のようなケースです。

```jsx
export function App() {
    const now = new Date().toLocaleString();
    return <p>now: {now}</p>
}
```

少し露骨ではありますが、サーバーでレンダリングされる瞬間と、クライアントでハイドレーションされる瞬間は多くの場合で一致しないので `now` の値が違うぞ、となるわけです。

## 回避にuseEffectを使う

SSR時は仮の値を表示しておいて、useEffectでマウント時に値を設定することで差異の発生を防ぐことができます。

```jsx
import { useEffect, useState } from 'react';
export function App() {
    const [now, setNow] = useState('SSR!'); // SSR/Hydration用の仮の値(?)
    useEffect(() => {
        setNow(new Date().toLocaleString());
    }, []);
    return <p>now: {now}</p>
}
```

このようにすることで、SSR時とハイドレーション時は `'SSR!'` を使い、マウントされたら実際の時間を表示することができます。
時間の概念は関数コンポーネントとしてEffectではあるので、それほど問題がないように見えます。

### useEffectを使う問題点

ボタンを押してから表示されるコンポーネントなど、SSRしないケースを考えると無駄があることに気づきます。SSRしない場合、ハイドレーション差異を気にしなくていいので最初から `new Date().toLocaleString()` が表示されてもいいはずです。
しかしuseEffectを使ってしまうと、その必要がなくても最初のレンダリングで `'SSR!'` が使用されることになります。これはちらつきの原因にもなります。

## 回避にuseSyncExternalStoreを使う

useSyncExternalStoreはReact 18で追加されたHookです。useSyncExternalStoreはuseEffectに比べインターフェースが難解ですが、唯一無二とも言える強力な機能を持っています。

詳細は[公式ドキュメント](https://ja.react.dev/reference/react/useSyncExternalStore)に任せ、先の問題の回避策を確認します。

```jsx
import { useSyncExternalStore } from 'react';
export function App() {
    const now = useSyncExternalStore(
        () => () => {},
        () => new Date().toLocaleString(),
        () => 'SSR!', // SSR/Hydration用の仮の値
    );
    return <p>now: {now}</p>
}
```

特徴は第三引数で、ここで渡した関数はSSR時とハイドレーション時にのみ利用されます。これは他のHookにはないような機能です。
SSR時、ハイドレーション時以外は第二引数の関数が利用されます。

useEffectで問題に挙げたような、「ボタンを押してから表示されるコンポーネント」では第三引数に渡した関数は呼ばれることなく、第二引数の関数の返り値が最初から利用（表示）されることになるわけです。

:::note warn
後方互換性のためのReact 17向け [use-sync-external-store](https://www.npmjs.com/package/use-sync-external-store) というパッケージが存在しますが、このパッケージのuseSyncExternalStoreは第三引数をサポートしていないので、今回の話は関係ありません。
:::

### useSyncExternalStoreの注意点

コンポーネントがレンダリングされる際に、第二引数の関数が実行されます。このときの返り値が前回の値と異なる場合、再度レンダリングを試みます。
つまり、第二引数の返り値が毎回変化するとレンダリングの無限ループに陥ります。

先の例では、 `new Date().toLocaleString()` を使用しているため、レンダリング毎に値が変わる可能性は低いですが、例えば `new Date().toISOString()` を使用した場合はミリ秒まで結果に含まれるので高い確率でレンダリング毎に値が変わり得ます。同様に `new Date()` を使用するとプリミティブ値ではないため値が変化したものとして扱われます。

このように毎回変化しうる値を返り値として利用したい場合は、使用する際に値を適切にキャッシュする必要があります。

useRefでキャッシュする例:

```jsx
import { useRef, useSyncExternalStore } from 'react';
export function App() {
    const nowRef = useRef();
    const now = useSyncExternalStore(
        () => () => {},
        () => {
            if (nowRef.current === undefined) nowRef.current = new Date();
            return nowRef.current;
        },
        () => new Date(0), // SSR/Hydration用の仮の値
    );
    return <p>now: {now.toISOString()}</p>
}
```

## おわりに

`useSyncExternalStore` は比較的新しいHookですが、非常に強力で唯一無二とも言える機能(SSR/Hydration用の処理)を持っています。実装された当初は「ライブラリ作者向け」というような注釈がありましたが、現在ではそのような記載はなくなりより一般的なHookとして名を連ねています。

Hydration mismatch以外でもさまざまな用途で利用できるので[公式ドキュメント](https://ja.react.dev/reference/react/useSyncExternalStore)を確認してください。
Python set型で重複排除！データ処理の効率が飛躍的にアップする方法

## はじめに 

こんにちは！今回は、Pythonのset型を使ってデータ処理の効率を劇的に向上させる方法について解説します。大量のデータを扱う際に重複を排除することは非常に重要ですが、set型を使えば簡単かつ高速に実現できるんです。

## set型とは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/b8ce0d0f-74ea-1141-4fad-b2b7a57320a9.png)

set型は、Pythonの組み込みデータ型の1つで、重複のない要素の集合を表現します。数学の集合と同じ概念ですね。以下のような特徴があります：

- 重複する要素は自動的に排除される
- 順序は保持されない
- ミュータブル（変更可能）

## set型の基本的な使い方

```python
# set型の作成
fruits = {"apple", "banana", "orange", "apple"}
print(fruits)  # 出力: {'orange', 'banana', 'apple'}

# リストからset型への変換
numbers = [1, 2, 2, 3, 4, 4, 5]
unique_numbers = set(numbers)
print(unique_numbers)  # 出力: {1, 2, 3, 4, 5}
```

## set型を使った重複排除の威力

では、実際にset型を使って重複排除を行い、その効率を確認してみましょう。

```python
import time

# 大量の重複を含むリストを作成
data = list(range(1000000)) * 10

# リストを使った重複排除
start_time = time.time()
unique_list = list(dict.fromkeys(data))
list_time = time.time() - start_time

# set型を使った重複排除
start_time = time.time()
unique_set = list(set(data))
set_time = time.time() - start_time

print(f"リストを使った処理時間: {list_time:.5f}秒")
print(f"set型を使った処理時間: {set_time:.5f}秒")
print(f"set型の方が{list_time/set_time:.2f}倍高速")
```

このコードを実行すると、set型を使った方が圧倒的に高速であることがわかります。データ量が多ければ多いほど、その差は顕著になります。

## set型の活用シーン

1. データクレンジング
2. ユニークな値の抽出
3. 重複排除を伴う集計処理
4. 複数のデータセットの共通要素や差分の抽出

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/2687226d-2959-1c9f-e68e-3e23e4f5d17f.png)

## 公式ドキュメントからの重要な情報

1. セットの作成と変換
   Python公式ドキュメントによると、セットは波括弧`{}`またはset()関数を使って作成できます。また、他のイテラブル（リストやタプルなど）からセットへの変換も可能です。

   ```python
   # 波括弧を使用
   set1 = {1, 2, 3}
   
   # set()関数を使用
   set2 = set([1, 2, 3])
   
   # 文字列からセットを作成
   set3 = set('hello')  # {'h', 'e', 'l', 'o'}
   ```

   [公式ドキュメント: セット型](https://docs.python.org/ja/3/library/stdtypes.html#set-types-set-frozenset)

2. セットの演算
   セットは数学の集合演算をサポートしています。和集合、積集合、差集合などの操作が可能です。

   ```python
   a = {1, 2, 3, 4}
   b = {3, 4, 5, 6}
   
   print(a | b)  # 和集合: {1, 2, 3, 4, 5, 6}
   print(a & b)  # 積集合: {3, 4}
   print(a - b)  # 差集合: {1, 2}
   ```

   [公式ドキュメント: セットの演算](https://docs.python.org/ja/3/library/stdtypes.html#set)

3. セットのパフォーマンス
   Pythonの公式ドキュメントによると、セットはハッシュテーブルを使用して実装されているため、メンバーシップテスト、要素の追加、要素の削除などの操作が平均的にO(1)の時間複雑度で実行されます。これは、リストなどの他のデータ構造と比較して非常に効率的です。

   [公式ドキュメント: セットオブジェクト](https://docs.python.org/ja/3/library/stdtypes.html#set-objects)

## まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/3f207046-9c84-fab0-b80b-2cbcab24a1dd.png)

set型を活用することで、重複排除やユニークな値の抽出が非常に簡単かつ高速に行えます。大規模なデータ処理や、効率化が求められるシーンで、ぜひset型を使ってみてください。データ処理の効率が飛躍的に向上すること間違いなしです！

皆さんも、ぜひ自分のプロジェクトでset型を活用してみてください。効率的なコーディングライフを！
Entity Framework Coreを学ぶ　その2

# 目標
以下の記事の内容を理解する。

https://learn.microsoft.com/ja-jp/ef/core/get-started/overview/install

https://learn.microsoft.com/ja-jp/ef/core/get-started/overview/first-app?tabs=netcore-cli

https://learn.microsoft.com/ja-jp/ef/core/what-is-new/nuget-packages

https://learn.microsoft.com/ja-jp/ef/core/get-started/winforms

## 補助
**SDK**

https://aws.amazon.com/jp/what-is/sdk/

**NuGet**

https://learn.microsoft.com/ja-jp/nuget/what-is-nuget
Python リストのスライス記法マスター術：負のステップ数で逆順操作も簡単

## はじめに

こんにちは！今回は、Pythonのリストスライス記法について、特に負のステップ数を使った逆順操作に焦点を当てて解説します。この記事を読むことで、リストの操作がより柔軟かつ効率的になること間違いなしです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/63475380-c26e-d4ec-bc61-875ec5e4742c.png)


## 目次
1. スライス記法の基本
2. 負のステップ数の使い方
3. 実践的な例
4. 公式ドキュメントと追加リソース
5. まとめ

## 1. スライス記法の基本

まずは、スライス記法の基本を復習しましょう。

```python
my_list[start:end:step]
```

- `start`: スライスの開始インデックス（省略可）
- `end`: スライスの終了インデックス（省略可）
- `step`: ステップ数（省略可、デフォルトは1）

例えば：

```python
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
print(numbers[2:7])  # 出力: [2, 3, 4, 5, 6]
print(numbers[::2])  # 出力: [0, 2, 4, 6, 8]
```

## 2. 負のステップ数の使い方

負のステップ数を使うと、リストを逆順に操作できます。

```python
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
print(numbers[::-1])  # 出力: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
print(numbers[7:2:-1])  # 出力: [7, 6, 5, 4, 3]
```

負のステップ数を使う際の注意点：
- `start`は`end`よりも大きい値にする
- `end`は含まれない

## 3. 実践的な例

### 3.1 文字列の反転

文字列もシーケンスなので、同じ方法で反転できます。

```python
text = "Python"
reversed_text = text[::-1]
print(reversed_text)  # 出力: "nohtyP"
```

### 3.2 リストの特定部分を逆順にする

```python
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
reversed_part = numbers[7:2:-1]
print(reversed_part)  # 出力: [7, 6, 5, 4, 3]
```

### 3.3 奇数インデックスの要素を逆順に取得

```python
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
odd_reversed = numbers[-2::-2]
print(odd_reversed)  # 出力: [8, 6, 4, 2, 0]
```

## 4. 公式ドキュメントと追加リソース

Pythonのリストスライスについて、さらに詳しく学びたい方は、以下の公式ドキュメントをご参照ください：

1. Python公式ドキュメント - シーケンス型 - 共通のシーケンス演算:
   https://docs.python.org/ja/3/library/stdtypes.html#common-sequence-operations

   ここでは、リストを含むすべてのシーケンス型に共通の操作について詳しく説明されています。

2. Python公式ドキュメント - データ構造 - リストについてもっと:
   https://docs.python.org/ja/3/tutorial/datastructures.html#more-on-lists

   リストの操作や、リストを使ったプログラミングテクニックについて、より詳細な情報が提供されています。

3. Python公式ドキュメント - 組み込み型 - スライスオブジェクト:
   https://docs.python.org/ja/3/library/functions.html#slice

   `slice()` 関数を使用した高度なスライス操作について学ぶことができます。

これらの公式ドキュメントを参照することで、Pythonのリスト操作についてより深い理解が得られるでしょう。

## 5. まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/17af49b9-4b13-3be9-30d4-71e63b1f4090.png)

負のステップ数を使ったスライス記法は、リストや文字列を逆順に操作する強力なツールです。以下のポイントを覚えておきましょう：

1. `[::-1]`で全体を逆順にできる
2. 負のステップ数を使う場合、`start`は`end`より大きくする
3. 文字列にも同じ方法が使える
4. 特定の範囲や間隔で逆順操作が可能

これらのテクニックを使いこなせば、よりエレガントで効率的なコードが書けるようになります。ぜひ実際に試してみてください！

また、公式ドキュメントを参照することで、より深い理解と高度な使用方法を学ぶことができます。Pythonの公式ドキュメントは常に最新の情報を提供しているので、定期的に確認することをお勧めします。

Happy Coding!
【Laravel × Stripe】サブスクリプション処理を実装する手順２~CheckOutで決済ページの表示~

【Laravel  × Stripe】サブスクリプション処理を実装する手順1の続きです。

https://qiita.com/takahiro-2020/items/056c927c5b85aca27f9c

https://qiita.com/takahiro-2020/items/b3473a2fb4f78c425ab9

https://qiita.com/takahiro-2020/items/3df331abc855537c246d

https://qiita.com/takahiro-2020/items/cf3be9352e1a1525a83c



## CheckOutで決済ページの表示
CheckOutを表示して、決済フォームを表示します。
UIは自動で作成されるので、とても便利です。

![スクリーンショット 2024-08-11 8.13.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248327/1b12a06f-2acf-113f-2748-193e4bbde0e7.png)




## Checkoutを開く
`ルーティング(前回のおさらい)`
```php
# サブスク申請ページ(チェックアウトに進む前のページ)
Route::get('stripe/subscription',
[StripSubscriptionController::class, 'index'])
->name('stripe.subscription');

# チェックアウトページ
Route::get('stripe/subscription/checkout',
[StripSubscriptionController::class, 'checkout'])
->name('stripe.subscription.checkout');

# 支払い完了
Route::get('stripe/subscription/comp',
[StripSubscriptionController::class, 'comp'])
->name('stripe.subscription.comp');
```



`コントローラー：StripSubscriptionController.php`
```php
/* ~ */
    /**
     * checkout
     *
     * @return \Illuminate\Http\Response
    */
    public function checkout()
    {
        # シークレットキーの読み込み
        Stripe::setApiKey( config('stripe.secret_key') );


        # 顧客情報
        $user = Auth::user();
        $customer = $user->createOrGetStripeCustomer();


        # 商品情報
        $price_id = config('stripe.price_id');


        $checkout_session = Session::create([

            'customer' => $customer->id, //顧客ID
            'customer_update'=>['address'=> 'auto'],
            'payment_method_types' => [ 'card',],//決済方法

            'line_items' => [[
                'price' => $price_id,//商品情報
                'quantity' => 1,
            ]],

            'payment_method_options' => [
                'card' => [ //3Dセキュア
                    'request_three_d_secure' => 'any' ,
                ],
            ],

            'mode' => 'subscription',
            'success_url' => route('stripe.subscription.comp'),//成功リダイレクトパス
            'cancel_url'  => route('stripe.subscription'),//失敗リダイレクトパス
        ]);


        return redirect()->to($checkout_session->url);
    }


```



## 解説

##### 顧客IDの取得
userモデルの'stripe_id'より、Stripe上に保存された顧客情報を取得します。
顧客情報がない（新規顧客）場合、顧客情報を新規生成し、userテーブルにstripe_idの値が更新されます。
```php
$user = Auth::user();
$customer = $user->createOrGetStripeCustomer();
```




## テスト用のカード番号を利用して、決済テストをする
テストモード中では、以下のカード番号で決済のテストをすることができます。

https://docs.stripe.com/testing?locale=ja-JP


長くなったので、次回はCheckOutによる決済処理について記述していきます。

https://qiita.com/takahiro-2020/items/3df331abc855537c246d
wslでmanim その3

# 概要
wslでmanimやってみた。
manim見つけたので、やってみた。

# 参考にしたページ

https://qiita.com/phlogis/items/67d354779943721bf4ad


# サンプルコード

```
from manim import *
import numpy as np

class RightAngleExample(Scene):
	def construct(self):
		vertex_1 = np.array([-1, -1, 0])
		vertex_2 = np.array([-3, -1, 0])
		vertex_3 = np.array([-1, 1, 0])
		line1 = Line(vertex_1, vertex_2)
		line2 = Line(vertex_1, vertex_3)
		line3 = Line(vertex_2, vertex_3)
		RightTriangle = Polygon(vertex_1, vertex_2, vertex_3, color = RED, fill_opacity = 0.5)
		vertex_hex_1 = np.array([0, -1, 0])
		vertex_hex_2 = np.array([2, -1, 0])
		vertex_hex_3 = np.array([2, 0, 0])
		vertex_hex_4 = np.array([1, 0, 0])
		vertex_hex_5 = np.array([1, 1, 0])
		vertex_hex_6 = np.array([0, 1, 0])
		line_hex_1 = Line(vertex_hex_1, vertex_hex_2)
		line_hex_2 = Line(vertex_hex_2, vertex_hex_3)
		line_hex_3 = Line(vertex_hex_3, vertex_hex_4)
		line_hex_4 = Line(vertex_hex_4, vertex_hex_5)
		line_hex_5 = Line(vertex_hex_5, vertex_hex_6)
		line_hex_6 = Line(vertex_hex_6, vertex_hex_1)
		hexagon = Polygon(vertex_hex_1, vertex_hex_2, vertex_hex_3, vertex_hex_4, vertex_hex_5, vertex_hex_6, color = BLUE, fill_opacity = 0.5)
		start_pos = np.array([3, 0, 0])
		middle_pos_1 = np.array([2, 0, 0])
		middle_pos_2 = np.array([1, 0, 0])
		end_pos = np.array([0, 0, 0])
		RightTriangle.move_to(start_pos).set_fill(RED, opacity = 0.5)
		self.add(hexagon)
		self.play(RightTriangle.animate.move_to(middle_pos_1), rate_func = linear, run_time = 1) 
		self.wait()
		self.play(RightTriangle.animate.move_to(middle_pos_2), rate_func = linear, run_time = 1)
		self.wait()
		self.play(RightTriangle.animate.move_to(end_pos), rate_func = linear, run_time = 1)
		self.wait()



```

# 成果物

![RightAngleExample_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/2d7d27e2-1ba0-ae39-6880-3d4d529412f0.gif)


以上。
mpg123をバックグランドで実行

tmux上で動かす方法もありますが、以下でできるようです。

```
/usr/local/bin/mpg123 --no-control --quiet http://kathy.torontocast.com:3330/stream &
```

メタタグを残しておきたい場合は、

```
/usr/local/bin/mpg123 --no-control --utf8 http://kathy.torontocast.com:3330/stream > /tmp/sakura.log 2>&1 &
```

FreeBSDでメタタグを表示するのは

```
tail -f /tmp/sakura.log
```

で最新のものが表示できます。

バックグランドで実行するとターミナルを閉じても再生が止まりません。
wslでmanim その2

# 概要
wslでmanimやってみた。
manim見つけたので、やってみた。

# 参考にしたページ

https://qiita.com/ymgc3/items/0b6179638a7166025c2f

# サンプルコード

```
from manim import *

class SquareToCircle(Scene):
	def construct(self):
		circle = Circle()
		square = Square()
		square.flip(RIGHT)
		square.rotate(-3 * TAU / 8)
		circle.set_fill(PINK, opacity = 0.5)
		self.play(Create(square))
		self.play(Transform(square, circle))
		self.play(FadeOut(square))


```

# 成果物

![SquareToCircle_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/04bb80d3-6dc5-790a-ba37-66ae1d466042.gif)


以上。
VB.net 基本的な文法（判定編1）If文

前回の記事では、変数や定数の宣言方法を記載しました。
https://qiita.com/HiHiroyoshi/items/e306955c364db95f8f3e

#今回の記事では、判定文（If文やSelect文）について述べます。

では、早速　変数が10の場合に何かしらの処理を行うプログラムを記載します。

```
Dim hoge As Integer = 10

Dim checkflag As Boolean = False

'判定文
If hoge = 10 Then
    'True　の時の命令
    checkFlag = True
End If

```

こういった形で、記載を行います。
もっと、スマートな書き方があると思われる方もいるはずですが、
初心者向けという点でご容赦ください。

注意点としては、checkFlagは、If文の前で宣言していることです。
 **スコープ** という考えがあり、If文内で変数を宣言した場合、
If文内でしか使えない為です。

仮にcheckFlagをIf文内で宣言してIf文の下で利用しようとしても、
エラーが発生します。

```

Dim hoge As Integer = 10

'判定文
   If hoge = 10 Then
'True　の時の命令
     Dim checkFlag As Boolean
     checkFlag = True
   End If

'ここでエラーが発生
  checkFlag = False

```

仮に入力チェックを行う際は、全体のエラーフラグ（errorFlag）を判定文の前に置き、その都度If文を用いて、個々のエラー判定の際に、errorFlagにFalseを入れてあげるような書き方が挙げられます。

では、このIf文をさらに改造していきましょう。
例えば、Trueでないときにも処理を行う場合、

```

Dim hoge As Integer = 10
Dim checkFlag As Boolean
'判定文
If hoge = 10 Then
    'True　の時の命令
    
    checkFlag = True
    
Else '一致しない False場合

    checkFlag = False
    
End If
```

といった、Else（それ以外）の場合の処理を行います。
では、If-Else文をさらに発展させましょう。

```
Dim hoge As Integer = 15

'Stringは文字列を表します。
Dim message As String

'判定文
If hoge < 10 Then
    '10未満の時の命令
    message = "値が10未満です。"
ElseIf hoge >= 10 And hoge <= 20 Then

    message = "値が10以上20以下です。"

Else 'その他

    message = "値が20より大きい場合"

End If


```
といった形になります。hogeの値を変更してみて、
全てのmessageの分岐を確認してみましょう。

では、 **実務におけるIf文の使いかた** を一つ挙げましょう。

```
Dim stringNumber As String = "15"

Dim hoge As Integer

Dim message As String

If Integer.TryParse(stringNumber, hoge) Then

    '判定文
    If hoge < 10 Then
        '10未満の時の命令
        message = "10未満です。"
    ElseIf hoge >= 10 And hoge <= 20 Then

        message = "10以上20以下です。"

    Else 'その他

        message = "20より大きい場合"

    End If

Else
    message = "整数に変換できません。"

End If


```

新たに2点の変更がありますね。
Integer.TryParseとIf文の中にIf文が入っています。

1つ目のInteger.TryParseは、ある文字列(stringNumber)を数字(hoge)に置き換える。置き換えた際の結果がTrue（置き換えできた）かFalse(置きかえできない)かを判定するものです。

なので、文字列を整数に変換できなかった場合、
message = "整数に変換ができません"
が実行されます。

整数に変更できた場合は、さらにネスト（入れ子）にしたIf文が実行されていく形となります。

業務でプログラミングする上、気をつけてほしいのは、 **ネストの行いすぎ** です。

If文の中にIf文、さらにIf文を書いていくとプログラム自体が読みにくくなるため、If文内でのIf文の多用は避けるべきだと考えています。

# まとめ
If文やIf文のネスト、実務での利用の一例を挙げました。
次回は、vb.netでのSelect文を取り上げる予定です。
ProjectileMovementでHitEventをとる方法

 # Projectile Movement Componentや、自身につけたCapcule CollisionでHitEventをとる方法

SimulationのAddForceでSkeletalMeshを直接飛ばしてもいいけど、
ProjectileMovementだと色々簡単なので、覚書として挙げておきます。

## Projectile Movement CompoenntとSkeletalMeshとの衝突で、詳細を得る（Hit時のBone名等）手段
### 1.物理アセット側のSimulation Generation Hit Eventを有効化します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/6b9474d3-6094-f90d-eb4a-03ce42916d50.png)

### 2.コリジョンが有効で、ボーンに割当たっていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/7d7429c3-b1e0-8c84-50cb-ffc5c61b479d.png)

### 3.SkeltalMeshのSimulation Gernerations Hit Eventsにチェックを入れて、PhysicsBodyでブロックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/23ba4a15-f3ce-99c2-bb42-05930bcdd5a7.png)

### 4.Hit
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/4b375057-0386-84d8-921a-b90dedbb3316.png)


## 別途追加したCapsule Collisionでヒット詳細を得る方法
・ProjectileMovementを付けたActorのケース
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/3248c601-25ec-2417-ddb0-ea5b21a71c37.png)

・SkeletalMesh（人型）につけたCapsuleCollisionが同じ種類の別のActorとHitしたことをとるためのBlueprintと設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/8928113a-1565-52dd-d92f-4650f7834c07.png)


### その時のPlayerMeshのコリジョン設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/2119a08b-7218-6172-dd38-4ea4b8b9a0f6.png)

## Overlapからの詳細取得
###ProjectileMovementにつけたActorのケース
・Actor側のCapsuleCollision設定
GenerateOverlap Eventsを追加
CollisionEnabledをEnabledに、PhysicBodyはOverlapに指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/936fbe63-b86b-3b1a-340a-92ecc73d6c67.png)
・SkeletalMesh側のMeshの設定
GenerateOverlap Eventsを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/8de93c32-aeb4-df84-bc27-3d40959f2a87.png)

・詳細取得のためにBegin OverlapからLineTrace
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181347/1da8d96b-14de-cea7-a7de-06efce2088bf.png)