OmniAICreator/Qiita-1.07M huggingface dataset:
2023/9/11主にITとかセキュリティの記事

シスコが緊急の脆弱性に関する情報公開、米国CISAも警告(9/9)
https://news.mynavi.jp/techplus/article/20230909-2767264/

【AWS】採用ランディングページを CloudFront+S3 で公開した話(9/8)
https://qiita.com/masaki_seyama_POHD_CCoE/items/90c20b1cf5e084f1e2bf

node-jsonwebtokenで学ぶJWTのalg=none攻撃(9/8)
https://qiita.com/ockeghem/items/cc0b8ab74f46834d055b

中国のSNS情報操作、米世論誘導狙い　Microsoft調査(9/9)
https://www.nikkei.com/article/DGXZQOGN08D640Y3A900C2000000/

名古屋港サイバー攻撃　被害届、愛知県警が受理(9/9)
https://www.yomiuri.co.jp/local/chubu/news/20230909-OYTNT50000/

「つながる車」個人情報保護の甘さを警告　米調査(9/9)
https://www.nikkei.com/article/DGXZQOGN08D660Y3A900C2000000/

中国、政府機関の職員にiPhoneなど海外携帯端末の業務使用を禁止に(9/9)
https://www.zaikei.co.jp/article/20230909/737088.html

ChatGPT、Bing、Bardに動作の鈍いノートPCの改善方法を聞いてみた結果(9/10)
https://gunosy.com/articles/ezIwE

原発処理水放出に抗議したアノニマスがサイバー攻撃、この動きをどう見るべきか(9/8)
https://active.nikkeibp.co.jp/atcl/act/19/00432/090400031/

「AI秘書」を職員一人ひとりに　県庁の業務効率化へ、探る活用策(9/9)
https://news.yahoo.co.jp/articles/b3ee297d412dbce8ac0abbf0a6afecea020005a8

「専守防衛」では、サイバー攻撃から国を守ることは不可能...日本が学ぶべき「積極的防御」の手本は？(9/9)
https://www.newsweekjapan.jp/kumar/2023/09/post-1.php

ECマーケターは、どのようにAIの準備を進めていけばいいのだろうか(9/9)
https://ecclab.empowershop.co.jp/archives/87888

「フィッシング詐欺」被害相次ぐ 大手銀行などが注意呼びかけ(9/9)
https://www3.nhk.or.jp/news/html/20230909/k10014190261000.html

主要業種総ざらい！取引先訪問時の課題発掘はこのように行おう【卸売業】(9/9)
https://zuuonline.com/archives/264206

だつりん先生、SNSから“発進”　県立高校でネットリテラシー講座(9/9)
https://news.yahoo.co.jp/articles/879d26ee96cf5f07e11b11c7f218999740e4edab
【ちょっと便利な小技_part 9】自作スニペット+α編

今回はSnippetを自作するときに知っていて損はない知識を紹介します。
簡単な内容となっているので是非試してみてください。
## 前提
この記事は下記の記事を既に見ている,
またはSnippetについての知識が既にある前提で話を進めます。

https://qiita.com/nakamura_slj/items/bbad445bb213545c82a9

## +αの知識
下記の自作したSnippetに記載されている、『$~』の役割について説明いたします。
```ruby:dart.json
"TextTmp": {
		"prefix": "texttmp",
		"body": [
			"Text(",
			"  \"$1\",",
			"  style: TextStyle(",
			"    color:$2,",
			"    fontSize: $3,",
			"    fontWeight: $4,",
			"  ),",
			")"
		],
		"description": "TextTmp"
	}
```

## 『$~』の役割について
実際に上記のSnippetを使用してみると下記のように表示されます。
見てわかるようにSnippetを使用したタイミングで初期のカーソル位置が『＄1』と入力していたところになっています。
他にも『＄2』,『＄3』と入力していたところには、縦の線が入っています。
『＄1』のところの入力が終わった後、タブキーを押すことによって『＄2』のところへカーソルが移動されます。
Snippet作成時に任意の入力が必要となる場所に『＄~』と入れることによって、楽に入力を行うことができます。
![スクリーンショット 2023-09-11 2.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524075/cc525abb-4814-11de-d5a0-88324d3191e4.png)
48公開鍵の正当性を証明する仕組み

### 公開鍵の正当性を証明するディジタル証明書
　ディジタル署名や公開鍵暗号方式を利用するときは事前に通信相手の公開鍵を入手するが、公開鍵の正当性が疑わしい。　
　現実社会では、印鑑を証明するのに区役所や市役所に印鑑登録などで、地方公共団体が正当性を証明してくれる。ディジタル署名や公開鍵暗号方式を利用する時、公開鍵の正当性を証明するために、信頼を持つ第三者機関である認証局（CA：Certificate　Authority）が照明してくれる。（ディジタル証明書・公開鍵証明書）を発行する。
### ディジタル証明書の発行手順
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/47ad5fd0-9b1a-d7c8-d5f6-704b0e956f8e.png)
①公開鍵の持ち主（申請者）は、第三者機関である認証局に本人確認用書類と公開鍵を提出して、公開鍵に対する証明書の発行を申請する。
②認証局は、提出された申請書類に基づき、公開鍵の持ち主の本人性を審査、問題なければ証明書を発行する。なお、証明書には、申請者の情報や公開鍵などと共に、認証局のディジタル署名が付加される。このディジタル署名は、証明書から作成されたメッセージダイジェストを認証局の秘密鍵で暗号化したものです。
Bは、Aの証明書の中の公開鍵がAの公開鍵である正当性を確認するのに、認証局の公開鍵で復号しメッセージダイジェストを取り出し、認証局が発行した証明書であるかを確認する。
次に、証明書からメッセージダイジェストを作成し、先に復号したメッセージダイジェストと比較し、改ざんされていないかを確認できる。
### セキュリティ技術を組み合わせたTLS
　TLS：HTTPやFTPなどのTCPを利用するアプリケーション層のプロトコルデータを暗号化して安全な通信を実現するもの。TLSは、ハイブリッド方式である。
　①クライアントからの接続要求に対し、Webサーバは、サーバ証明書（ディジタル証明書）をクライアントに送る。
　②クライアントは、サーバ証明書に含まれている認証局のディジタル署名を、認証局の公開鍵で復号してメッセージダイジェストを取り出し、サーバ証明書から作成したメッセージダイジェストと比較することで、サーバ証明書の正当性を検証する。
　③クライアントは、共通鍵生成用データを、サーバ証明書に添付されたWebサーバの公開鍵で暗号化してWebサーバに送ります。
　④これを受け取ったWebサーバは、自らの秘密鍵を用いて復号する。
　⑤クライアントとWebサーバは、同一の共通鍵生成用データをによって共通鍵を作成し、これ以降、この共通鍵による暗号化通信を行う。

練習問題
　公開鍵の正当性の証明や確認には、認証局CAの発行する証明書を利用。
　証明書には、認証局の秘密鍵で暗号化したディジタル署名が付加される。
　TLSを利用することで、ブラウザとWebサーバ間の通信の暗号化が実現できる。
MongoEngineの非構造化データ処理が遅い

## 初めに
機械学習の業務でMongoEngineを使用して非構造化データを取り扱う際の注意点です。誰かのお役に立てれば幸いです。

## MongoEngineが遅い
```python
class model(Document):
    # 1㎆以上のデータ
    big_data = BinaryField()
```
以下の二つの方法でアクセスしてみます。
```python
m1 = model.objects.first() # it takes 20 seconds by mongoEngine 
m2 = db.connection.get_connection().find_one() # it takes 0.9 seconds by pymongo
```

## 結論
MongoEngine は、ドキュメントデータを Python オブジェクトにマップするために使用されます。非常に大きな非構造化データを取り扱う場合、アンシリアライズにすごく時間かかるので、 MongoEngine は適切なツールではないため、pymongo を使用する方がいいです。

## 参考資料
https://stackoverflow.com/questions/35257305/mongoengine-is-very-slow-on-large-documents-compared-to-native-pymongo-usage
【Flutter】Map型まとめ

# Map型とは

以下、公式より引用。

> キーと値のペアのコレクション。関連付けられたキーを使用して値を取得します。

https://api.dart.dev/stable/2.15.1/dart-core/Map-class.html

<br>
KeyとValueの組み合わせを、1つのオブジェクト内で管理することができ、Keyを基準にしてValueの取り出し、書き込みを自由に行うことができます。

# Map型の宣言

他の変数の宣言と同様に、変数名の前にMap型を指定する必要があります。
Map型の場合、Keyの型とValueの型も一緒に宣言します。

```dart
final Map<String , dynamic> userData = {  //Map < Keyの型 , Valueの型 >
    "name" : "山田太郎",
    "age" : 24,
};
```

KeyとValueというワードを使用していますが、Map型の要素で`:(コロン)`の左にあたるところがKey、右側にあたるところがValueになります。

上記で宣言したMap型の変数は、<>の中で`,(カンマ)`区切りでStringとdynamicを渡しました。
これによって、KeyがString型、Valueがdynamic型のMap型変数が定義されます。


# Map型の呼び出し
実際に、上記で宣言したMap型の変数を呼び出してみましょう。
`変数名[Key]`の形で、Valueを呼び出すことができます。

```dart
final Map<String , dynamic> userData = {
    "name" : "山田太郎",
    "age" : 24,
};

print(userData["name"]); // 山田太郎
print(userData["age"]); // 24
```
# Map型のメソッド
List型などと同様に、Map型の変数に対してメソッドを繋げることで、変数の内容に変更を加えたり、データの確認などを行うことができます。

## .addAll()

定義されているMap型の変数に、{Key : Value} を渡すことで、要素を追加することができます。

```dart
final Map<String, dynamic> userData = {
  "name": "山田太郎",
  "age": 24,
};

print(userData); // {name: 山田太郎, age: 24}

userData.addAll({"from": "東京", "height": 181, "weight": 70});

print(userData); // {name: 山田太郎, age: 24, from: 東京, height: 181, weight: 70}
```

## .containsKey()

メソッドにわたしたKeyの存在確認を行い、結果のboolean型を返却してくれます。

```dart
final Map<String, dynamic> userData = {
  "name": "山田太郎",
  "age": 24,
  "from": "東京",
  "height": 181,
  "weight": 70,
};

print(userData.containsKey("name")); // true
print(userData.containsKey("namae")); // false
```

その他メソッドについては、以下公式をご参照ください。

https://api.dart.dev/stable/2.15.1/dart-core/Map-class.html#instance-properties
【java】jspで表示する日本語文字が文字化けしてしまうエラーの対処法

# ◆エラー内容
レスポンス用のjspで表示する日本語文字が文字化けした。
英語文字は問題なく表示される。

# ◆サーブレットのdoPost、doGetの内容
- doGetの内容
```java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doPost(request, response);
}
```

- ◆doPostの内容
```java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		
	String text = request.getParameter("textName");
	text += "hogehoge　world!";
	request.setAttribute("responseText", text);
	request.getRequestDispatcher("response.jsp").forward(request, response);
}
```

# ◆エラーの原因
リクエストとレスポンスの文字コード設定を行っていなかったため。

# ◆修正点
doPostメソッド内に以下の部分を追記してエラーは解消された。
```java
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
```
修正後のdoPostメソッドの全文は以下の通りです。
```java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
		
	String text = request.getParameter("textName");
	text += "hogehoge　world!";
	request.setAttribute("responseText", text);
	request.getRequestDispatcher("response.jsp").forward(request, response);
}
```
板取プログラムを作ってみた(100%Nim)

# 板取(Cutting Stock)とは
Nimで板取プログラムを作りました。ソースファイルはGithubに公開したので、興味あれば使ってみてください。Windowsで使う場合は"Release"から"itadori.exe"と"ini.json"をダウンロードして同じフォルダーに配置したら"itadori.exe"を実行することで使っていただけます。
（現在、Linux、Macをお使いの方はソースをダウンロードしてコンパイルして頂く形になります。開発環境がWindowsであり検証テストができないため、実行ファイルはGithubにアップロードしていません。）

https://github.com/yy20190404/CuttingStock.git

板取とは金属板やベニヤ板などの大きい板から長方形の部材を切り出す際に効率的に配置することを指します。英語では"Cutting Stock"というみたいです。数学的には「長方形詰め込み問題」にあたり、BL法（ボトムレフト法）でアルゴリズムを考えました。
大きい長方形からソートし、できるだけ下から左詰めで長方形を並べていきます。guillotine cut（ギロチンカット）と呼ばれる配置方法で長方形を並べるようプログラミングしました。ギロチンカットとはシャーや電動のこぎりで端から端まで一直線に切りとりを繰り返して各長方形を切り出す方法です。

# Nimでプログラミングしました
このプログラムはNimで作成しました。Pythonのような簡易なプログラム文法で静的型付け言語、コンパイル言語で実行時速度が速いという特徴があります。板取プログラムがループをガンガン回すのでインタプリンタ言語では実行速度に不安があったこと。初心者でも書きやすい言語であるNimを使うことにしました。

## 100%Nimで書けました
NimにはniguiというGUIフレームワークがあります。まだ開発途中でリリースされている機能が限定的なところがありますが、板取プログラムを書く上では十分でした。記述方法が簡単で使いやすかったです。
Nim及びniguiはマルチプラットフォームに対応しています。コンパイル時オプションでOSに対応した実行ファイルを作成できます。実行環境を構築してないため試験ができません。おいおい環境を整えてWindows以外の実行ファイルもリリースできたらと思います。

## 静的型付け言語は楽
私のような初心者には静的型付け言語は使いやすいです。違う変数に同じ名前を付けてしまっても、コンパイル時に型エラーが出てくれるのでデバグしやすいです。
~~~nim
var i: int
~~~
のように型定義しますが、初期値を設定する場合、Nimでは型推論してくれるため型定義をはぶくことができるうえ、コンパイル時は型の整合をチェックしてくれるので楽にプログラムできます。
~~~nim
var i = 0
~~~

# 板取プログラムの使い方
## リスト作成
並べたい長方形のリストを作ります。CSVファイルもしくはエクセルファイルで読み込むことができます。
~~~csv
NO., Width, Height, Qty, Name
------------------------------
1, 1000, 800, 1, plate01
...
~~~
上の順序でデータを作れば読み込み可能です。最低限必要なデータは「Width,　Height, Qty」でその他の項目は空白でも大丈夫です。上の形で並んでいないデータを入力した場合はエラーでクラッシュします。
1行目はヘッダー行として認識します。
ヘッダー行はリストを作る際の項目ですので日本語でも問題ありません。（プログラム中では読み飛ばしています）
2行目以降をデータとして使用します。

## "itadori.exe"の実行
"itadori.exe"を実行すると下図のようなウィンドウが立ち上がります。
![itadori01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639690/2d91da2e-50ed-8f1f-880d-d3d5349d6f84.jpeg)
①Load File, ②Save File, ③Image Folderを選択
④ベース板サイズの選定
⑤⑥各スペースの設定
を行い、⑬"Start Locating"ボタンをクリックします

⑦"Manual Input"ボタンで手動入力できます
⑧"Get Data"ボタンを押すことでデータ入力できます。入力されたデータは⑨のTextAreaに表示されますので、確認ができます。


## マニュアル入力
⑦"Manual Input"ボタンをクリックすると①が空欄になりマニュアル入力画面が現れます。
![itadori04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639690/7c2ecb3d-d191-8954-19ee-8af2eecc25b2.jpeg)
InputData　InputNameの各欄に入力し”Input”ボタンをクリックするとInputDaraViewerに入力されたデータが入ります。最後に"OK"ボタンを押すと"temp.csv"ファイルにデータを保存し、ダイアログを消します。

①を空欄のまま⑫"Start Location"ボタンをクリックするとtemp.csvを読み込み板取が計算されます。

マニュアル入力ダイアログでは、Width入力ボックスをクリック後数値（データ）入力し、Tabキーを押すことでHeight入力ボックスにフォーカスが移ります。
Width⇒Heihgt⇒Qty⇒Input Name⇒"Input"の順でTabキーでフォーカスが遷移します。
"Input"にフォーカスがある際にEnterキーを押すことで入力が反映されWidthにフォーカスが移ります。

## 自動計算
"Start Locating"ボタンを押すとBL法でリストの長方形を自動計算し並べて以下のファイルを出力します。自動計算は、大きい順BL法ギロチンカットで計算されます。
"located.csv" 並べられた長方形のリストを出力（出力ファイル名は自由に変更可能　フォルダーも自由に選べます。Unlocated.csvはlocated.csvと同じフォルダーに、temp.csvは入力ファイルと同じフォルダに作られます。）
"unlocated.csv" ベース板に入らないサイズの長方形はリストに並べられ出力されます。
"temp.csv" マニュアル入力した際の入力リストを仮リストとして出力、次にマニュアル入力すると書き換わります。

# 使ってみてください
板取プログラムはベニヤ板から長方形の部品を切り出したい時など、どのように並べれば歩留良く（効率的に）必要とする板を切り出せるかを検討できます。何枚ベニヤ板を買えばいいか、販売店で何回カットしてもらえばよいかを検討するのに役に立ちます。それなりに使えるものにはなったと思います。
よかったら使ってみてください。ご使用感・ご意見など伺えると嬉しいです。
Pythonのデコレータについて

Pythonのデコレータについて、自分なりの理解をメモとして残しておきます。

#### まずは関数の性質理解
()をつけなければオブジェクトのように利用することができ、変数に入れて利用できる。
```python
def function():
    print('This is function')

function
# 実行結果
# <何も起きない>

function()
# 実行結果
# This is function

print(function)
# 実行結果
# <function function at XXXXXXXXXXX>

print(function())
# 実行結果
# This is function
# None

func = function
func()
# 実行結果
# This is function
```

#### 関数の中での関数定義
関数の中で関数を定義し、利用することができる。
```Python
def outer_function():
    def inner_function():
        print('We can define function in function')
    inner_function()

outer_function()
# 実行結果
# We can define function in function
```

#### デコレータ (関数を引数として受け取り、関数を返り値として返す関数)

以下、参考にしたWebサイト

https://kosuke-space.com/python-decorator#:~:text=%E3%83%87%E3%82%B3%E3%83%AC%E3%83%BC%E3%82%BF%E3%81%AE%E6%AD%A3%E4%BD%93%E3%81%AF%E3%80%8C%E9%96%A2%E6%95%B0,%E3%81%A4%E3%81%BE%E3%82%8A%E3%80%81%E9%96%A2%E6%95%B0%E3%82%82%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7%E3%81%99%E3%80%82&text=%E9%96%A2%E6%95%B0%E3%81%AE%E5%BC%95%E6%95%B0%E3%82%84%E6%88%BB%E3%82%8A,%E3%81%9F%E3%82%8A%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82

デコレータは関数を引数として受け取り、関数を返り値として返す関数のことである。
以下の例の中でデコレータはouter_functionであり、function関数の前後にアスタリスクをprintする処理をデコレートし、inner_function関数として返す。

```python
def outer_function(func): # 関数を引数として受け取る。
    def inner_function():
        print('******************')
        func() # outer_function関数で引数として受け取った関数をinner_function関数内で利用できる。
        print('******************')
    return inner_function # 関数を返り値として返す。

def function():
    print('This is function')

f = outer_function(function) # outer_function関数にfunction関数を渡し、変数fにはinner_function関数が返り値として代入される。
f() # 返り値として代入されたinner_function関数が実行される。
# 実行結果
# ******************
# This is function
# ******************
```

引数のある関数をデコレートする時は以下のとおりになる。

```python
def outer_function(func):
    def inner_function(x):
        print('******************')
        func(x)
        print('******************')
    return inner_function

def function(x):
    print(x)

f = outer_function(function) # function関数の前後でアスタリスクをprintするinner_function関数がfに代入される。
f('HeroKey') # 返り値として代入されたinner_function関数にHeroKeyを引数として渡すことで、inner_function関数内のfunction関数にHeroKeyを引数として渡すことができる。
# 実行結果
# ******************
# HeroKey
# ******************
```

#### @を利用したデコレーション
@を使ってデコレーションすることで、記述を簡略化することができる。
```python
def outer_function(func):
    def inner_function(x):
        print('******************')
        func(x)
        print('******************')
    return inner_function

@outer_function
def function(x):
    print(x)
# イメージとしては以下のようなことが行われるイメージ。
# function = outer_function(function)
# function関数をouter_function関数でデコレートしている。

function('HeroKey')
# 実行結果
# ******************
# HeroKey
# ******************
```
Java JavaBeans

# JavaBeansとは
JavaBeansはJava言語で再利用可能な部品化されたプログラムを作成するための仕様・ルールのことである．
この仕様に則って開発されたJavaプログラムをBeanと呼ぶ．

Beanクラスはスコープ(リクエスト・セッション・アプリケーション)を通して，インスタンス情報の保存と受け渡しをすることができる．
（データを入れておく箱のような物をイメージ）

# JavaBeansの実装手順(ルール)
```java
package com.example.beans;

import java.io.Serializable;// (2)

public class PersonBean implements Serializable { // <= (1)&(2)
    // (3)
    public PersonBean() {
        // デフォルトコンストラクタ
    }

    // (4)
    private String name;
    private int age;

    // (5)
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

```
**1. クラスの作成**
JavaBeansクラスは一般的に「**〇〇Bean**」という形式で命名され，publicで宣言される．

**2. Serializableの実装**
Serializableインターフェースを実装し，オブジェクトの状態を永続化したり，ネットワーク経由で送信が行える．

**3. コンストラクタの定義**
パタメータを受け取るデフォルトコンストラクタを定義する．JavaBeansインスタンスを生成する際に呼ばれる．

**4. private指定したプロパティを定義**
データを保持するプライベートなフィールドを定義する．これらのフィールドは一般的にprivateで宣言される．

**５．private指定した各プロパティのSetter/Getterを定義**
各プロパティに対して，setter(設定メソッド)とgetter(取得メソッド)を定義する．

# JavaBeansの使い方
JavaBeansのルールで実装されたクラスはコントローラークラスで利用される．コントローラークラスの中で以下のように利用される．
以下がJavaBeansを利用した例である．
```java
public class Controller {
    public static void main(String[] args) {
        // (1)
        PersonBean person = new PersonBean();

        // (2)
        person.setName("John");
        person.setAge(30);

        // (3)
        String name = person.getName();
        int age = person.getAge();

        // データを表示
        System.out.println("Name: " + name);
        System.out.println("Age: " + age);
    }
}

```
**1　インスタンスを生成する**
JavaBeansのクラスからインスタンスを生成する．
**2　セッターを使ってデータを設定する**
JavaBeansのセッターメソッドを使用して，各プロパティにデータを設定する．これによりJavaBeansの状態が更新される．
**3　ゲッターを使ってデータを取得する**
JavaBeansのゲッターメソッドを使用して，プロパティの値を取得する．これにより，JavaBeansに格納されたデータにアクセスできる．
画像リサイズ機能

とあるアプリの個人開発で、Input要素クリックでfirestorageに画像アップとサムネイルを表示する機能を実装してみたのですが、2MB以上くらいの画像だと何度やっても全然アップロードできない、、
みたいなことがあったので（無料枠で使いたかったし）、アップロード時にリサイズしようと思いやってみました。


その時のリサイズの機能を調べて実装したのでいちおう記録に残してておこうかなと

使っていたのはReact,Next,TypeScript,Firebaseです

## 実装したコード
```resizeImage.ts
function resizeImage(file: File, maxWidth: number, maxHeight: number): Promise<string> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function(event: ProgressEvent<FileReader>) {
            if (!event.target?.result) {
                reject(new Error("ファイルの読み込みに失敗しました。"));
                return;
            }

            const img = new Image();
            img.src = event.target.result as string;

            img.onload = function() {
                let width = img.width;
                let height = img.height;

                if (width > maxWidth) {
                    height = height * (maxWidth / width);
                    width = maxWidth;
                }

                if (height > maxHeight) {
                    width = width * (maxHeight / height);
                    height = maxHeight;
                }

                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;

                const ctx = canvas.getContext("2d");
                if (!ctx) {
                    reject(new Error("キャンバスのコンテキストの取得に失敗しました。"));
                    return;
                }

                ctx.drawImage(img, 0, 0, width, height);
                resolve(canvas.toDataURL("image/jpeg"));
            }

            img.onerror = function() {
                reject(new Error("画像の読み込みに失敗しました。"));
            }
        }

        reader.onerror = function() {
            reject(new Error("ファイルの読み込みに失敗しました。"));
        }

        reader.readAsDataURL(file);
    });
}

export default resizeImage;

```

この関数は、与えられたFileオブジェクトをリサイズして、リサイズされた画像のData URLを返すPromiseを返します。このPromiseは、リサイズが成功した場合にはresolveされ、何らかのエラーが発生した場合にはrejectされます。


他の画像関連投稿: [選択画像の画像をプレビューとして表示](https://qiita.com/qiita969/items/b891f979aaf473aba706)
【Linux】コマンドを続けて実行する


## 複数のコマンドを連結して実行する方法
シェルスクリプトにおいて、`;` `&` `&&` `||` でコマンドを連結することで複数のコマンドを連続して実行することができます。

### `;` (セミコロン)
`;`は前のコマンドが終了すると次のコマンドが実行されます。

```
$ command1 ; command2
```
上記の場合には`command1`が終了すると`command2`が実行されます。

### `&` (アンパサンド)
`&` は前のコマンドの終了を待たず次のコマンドが実行されます。

```
$ command1 & command2
```

上記の場合には`command1`を実行しながら`command2`を実行します。

### `&&`
前のコマンドが終了ステータス0で正常終了した場合に次のコマンドを実行します。
異常終了した場合は`command2`は実行されません。

```
$ command1 && command2
```

上記の場合には`command1`が正常終了した場合に`command2`を実行します。
`command1`が異常終了した場合には`command2`は実行されません。

### `||`
前のコマンドが終了ステータス0以外で異常終了した場合に次のコマンドを実行します。
前のコマンドが正常終了した場合には次のコマンドは実行されません。
```
$ command1 || command2
```

上記の場合には`command1`が異常終了した場合に`command2`を実行します。
正常終了した場合は`command2`は実行されません。
選択画像の画像をプレビューとして表示

とあるアプリの個人開発で、Input要素クリックしユーザーが画像を選択すると、その画像をプレビューとして表示する機能の実装時に調べた内容です

:::note warn
このコードだと、readAsDataURLでユーザーが選択した画像ファイルを読み込み、その結果得られるデータURL（Base64エンコードされた画像データを含むURL）を使用し、プレビュー画像を直接HTMLソース上に埋め込む実装となります。
firestorageなどにその画像アップすしたい時は適さないので注意

:::

## 実装したコード
```typescript
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // ユーザーが選択したファイルを取得
    const file = e.target.files?.[0];
    
    // ファイルが選択されているか確認
    if (file) {
      // FileReaderというWebAPIを使って、ファイルを読み込む準備
      const reader = new FileReader();
    
      // ファイルが正しく読み込まれたときの処理を設定
      reader.onload = (event) => {
        // 読み込んだファイルの内容（この場合は画像のURL）を取得して、
        // setUploadedImageというステートを使って保存
        setUploadedImage(event.target?.result as string);
      };
    
      // 実際にファイルを読み込み。この場合は画像のURLとして読み込み
      reader.readAsDataURL(file);
    }
};
```
このコードでは、ユーザーが画像ファイルを選択すると、その画像のURLが取得され、setUploadedImageという関数を使って保存されます。
これを選択された画像をウェブページ上で表示する時に使用していました。



## それぞれのコードの説明
```typescript
// ユーザーが選択したファイルを「データURL」として読み込む
reader.readAsDataURL(file);
```
`FileReader`は、ユーザーが選択したファイルの内容を読み込むためのWeb APIです。
`readAsDataURL`は、FileReaderのメソッドの一つで、ファイルを「データURL」という形式で読み込むためのものです。
「データURL」とは、ファイルの内容を文字列として表現したもので、特に画像などのメディアファイルを直接ウェブページに埋め込むのに便利な形式です。
例えば、画像ファイルを`readAsDataURL`で読み込むと、その画像の内容が "data:image/png;base64,..." のような文字列として得られます。


```typescript
reader.onload = (event) => {
  // 読み込んだファイルの内容を取得
  const dataUrl = event.target?.result as string;
  // その内容（データURL）を使って何かの処理をする（この場合は、setUploadedImage関数で保存）
  setUploadedImage(dataUrl);
};
```

`reader.onload` は、ファイルが正しく読み込まれたときに実行される関数を設定するためのものです。
`.result`は、`FileReader`オブジェクトのプロパティの一つです。
FileReader がファイルの読み込みを完了したとき、この`.result`プロパティには読み込んだファイルの内容が格納されます。
この関数内では、event.target?.result を使って、読み込んだファイルの内容（この場合はデータURL）を取得します。
?. はオプショナルチェイニングというJavaScriptの機能で、event.target が存在しない場合にエラーを防ぐためのものです。
as string はTypeScriptの機能で、event.target?.result の値が文字列であることを明示しています。


要するに、このコードはユーザーが選択したファイルをデータURLとして読み込み、その結果を取得して
画像の表示処理を行うためのものです。

## 処理の順序
わかりやすいようすこし細かくみていきます

1. `const file = e.target.files?.[0];`

    * ユーザーが選択したファイルを取得します。e.target.files は選択されたファイルのリストを表し、[0] で最初のファイルを取得しています。

2. `if (file) { ... }`

    * ファイルが実際に選択されているかを確認します。選択されていれば、中の処理が実行されます。

3. `const reader = new FileReader();`

    * ファイルを読み込むための新しい FileReader オブジェクトを作成します。

4. `reader.onload = (event) => { ... };`

    * ファイルが正しく読み込まれたときに実行される関数を設定します。この関数はまだ実行されていません。ファイルが読み込まれたときに自動的に実行されるように設定されています。

5. `reader.readAsDataURL(file);`

    * ここで、実際にファイルを「データURL」として読み込みます。このメソッドを呼び出すと、ファイルの読み込みが開始され、読み込みが完了すると先ほど設定した onload の関数が実行されます。
REST APIについて理解する

# はじめに
　RESTについて学んだことをまとめました。

# APIとは
　APIとはApplication Programming Interfaceの略。
機能やデータを外部から呼び出して利用できるように定めた規約のこと。

# RESTとは
　REpresentational State Transferの略。
分散型システムにおける設計原則群(設計ルール)のこと。
RESTには下記６つの原則がある。

- クライアント/サーバー制約
- ステートレス
- キャッシュ制御
- 統一インターフェース
- 階層化システム
- コードオンデマンド　

# クライアント/サーバー制約
　クライアントとサーバーが依存することなくそれぞれが独立し、お互いに影響なく改良ができるような構造にすること。
画面とデータで関心事が分離されるため、どちらか一方が変更されても影響を受けにくくなる。
基本的には、クライアント側がトリガーとなり、サーバー側が受け身となる。

# ステートレス
　リクエストの情報のみからレスポンスを返す(状態を保持しない)こと。
前のやりとりの結果に影響を受けないので、障害発生時には対象のリクエストのみを確認すれば良いため、復旧が容易になるメリットがある。

# キャッシュ制御
　クライアント側のアプリケーションはレスポンスをキャッシュできる。
それにより、クライアントとサーバーの通信が排除され、ユーザー体験、リソース効率、拡張性の向上が見込める。

# 統一インターフェース
　情報の操作(取得、作成、更新、削除)は全てHTTPメソッド(GET、POST、PUT、DELETE)を利用すること。システムアーキテクチャ全体が簡素化され、わかりやすくなるメリットがある。

# 階層化システム
　複数のWEBサーバ、APサーバ、DBサーバで構成されるシステムのこと。システム内の機能やコンポーネントを階層的に組織化し、それぞれの階層が特定の役割を持つように設計されてるため、システムの保守や拡張がしやすくなるメリットがある。

# コードオンデマンド
　サーバ側にあるHTMLやJavaScriptなどのプログラムをクライアント側にダウンロードして利用できること。リリース済みのクライアントに対して機能追加ができることや、サーバーの負荷が下がるメリットがある。

# REST APIの実装例
　movieをリソースとしてCRUD操作のURI、HTTPメソッドを定義すると、下記のように実装されます。

| URI | HTTP method |
|:-:|:-:|
| http://api.example.com/movies  | GET  |
| http://api.example.com/movies/12345  | GET  |
| http://api.example.com/movies  | POST  |
| http://api.example.com/movies/12345  | PUT  |
| http://api.example.com/movies/12345  | DELETE  |

# 参考文献
[REST WebAPI サービス 設計](https://www.udemy.com/course/rest-webapi-development/)
[RESTful APIとは？概要や６つの原則についてご紹介](https://rainbow-engine.com/restful-api-six-principles/)
Java JSP

# JSPとは
JSPは<font color="Green">**J**ava**S**erver**P**ages</font>の略で，動的なWebページを生成するために使用されるものである．JSPはMVCモデルにおけるViewの役割をになっており，Javaコードを埋め込むことができる．

# JSPの利点
JSPファイルは，JSPコンテナによって対応するサーブレットクラスに変換される．
基本的にJSPはサーブレットとともに実装され，サーブレットの代わりにViewを実装することが役割となる．

**ServletでViewを実装するパターン**
```Java
public class HelloWorld extends HttpServlet {
   public void doGet(HttpServletRequest request,HttpServletResponse response)
    throws ServletException,IOException {
     response.setContentType("text/html;charset=Shift_JIS");
     PrintWriter out=response.getWriter();
     out.println("<html><head>");
     out.println("<title>Hello, World!!</title>");
     out.println("</head><body>");
     out.println("<p>Hello,World!!</p>");
     out.println("</body></html>");
   }
 }
```
ServletでもViewを実装することも可能で，JSPを利用しない場合は`out.println()`を利用してHTML文書を出力する．
この場合，Javaのコードの中にHTMLを書くことになり，printの量が多くなってしまう．

**JSPでViewを実装するパターン**
```jsp
<html>
    <head>
        <title>Hello, World!!</title>
    </head>
    <body>
        <% out.println("<p>Hello,World!!</p>"); %>
    </body>
</html>
```
一方，JSPはHTMLによく似た構造である．HTMLの中にJavaのコードを書くことができ，ビューを作成するのに適している．

このようにサーブレットがViewの実装が不向きという弱点をJSPで補うことができる．

# JSPの記述方法
基本的にはHTMLで，中に以下のような記述方法でJavaのコードを組み込む．
**1. スクリプトレット**
```jsp
<% 
    // ここにJavaコードを記述
    String message = "Hello, World!";
    out.println(message);
%>
```
`<% %>`でJavaコードを囲むことで，埋め込むことができる．
htmlを出力しても`<% %>`で囲んだ部分は表示されない．

**2. スクリプト式**
```jsp
<%= message %>
```
`<%= %>`で，変数や式を記述する．この変数や式の結果がHTMLに挿入される．
Javaのコードに「;」（セミコロン）は不要

**3. スクリプト宣言**
```jsp
<%! 
   private String greeting = "Hello, World!";
   public String getGreeting() {
       return greeting;
   }
%>
```
`<%! %>`で囲むことで，JSP内でクラス変数やメソッドの宣言を行うことができる．
宣言した変数はサーバーを再起動するまで保持される．

**4. pageディレクティブ**
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
```
pageディレクティブはJSPページ全体の設定を指定する．言語やエンコーディングなど．

**5. includeディレクティブ**
```jsp
<%@ include file="header.jsp" %>
```
includeディレクティブは他のJSPページやHTMLファイルを現在のJSPページに含めるために使用する．
JSPファイルの実行中に呼び出すことが可能で，含めるファイルは同じコンテキスト内にある必要がある．

**6. EL式**
```jsp
<p>
  Welcome, ${user.name}!
</p>
```
EL式を利用することで，Javaコードを書かずに変数の値を要素に入れることができる．

ここではJSPの基本的なタグを紹介したが，他にもさまざまな特殊なタグが用意されている．
MAUI Tips - 突然発生するResizetizeImagesのビルドエラー




# 概要
これまでXamarin.Formsで作っていたアプリを、一念発起して.NET MAUIで作り直す中で
調べたことの備忘録。


# 環境
Visual Studio for MAC
.NET MAUI
.NET 7

# 現象
画像ファイルの追加作業などの後にビルドしたら、急に以下のようなエラーが表示されてしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/4fe58527-14a4-4806-af40-6028ca8e8047.png)

ビルド出力を確認すると、以下のようなメッセージが表示されていました。
```
ターゲット ResizetizeImages:
        /usr/local/share/dotnet/packs/Microsoft.Maui.Resizetizer.Sdk/7.0.92/targets/Microsoft.Maui.Resizetizer.targets(525,9): error : One or more invalid file names were detected.  File names must be lowercase, start and end with a letter character, and contain only alphanumeric characters or underscores: 
    
```

エラーメッセージの内容を見る限り、ファイル名の命名規則に反したファイルがあるとのこと。
ターゲットがResizetizeImagesとなっており、Imagesフォルダのファイル名のようなんですが、
全て英小文字とアンダースコアで構成されるファイル名で、命名規則には反していませんでした・・・。

追加したファイルを削除しても、エラーが取り除かれず・・・。

# 原因
[.NET MAUIのGitHubのIssueページ](https://github.com/dotnet/maui/issues/14279)に、参考になる情報が掲載されてました。

Imagesフォルダでファイルの追加や削除などをしていると、
macOSが自動的に「.DS_Store」というファイルを生成するらしく、
それがビルドエラーを引き起こす原因となっているとのこと。

.DS_Storeがあるかは、ターミナルでカレントフォルダを該当フォルダにした後に、
以下のコマンドを実行すると確認できます。
```
>ls -a
```
.DS_Storeファイルが隠しファイルなので、Finder上で見えませんでした。
なので、このファイルのせいだとか、なかなか気づけないですよね・・・。



# 対処方法
ターミナルでカレントフォルダを該当フォルダにした後に、
以下のコマンドを実行すれば、.DS_Storeファイルを削除できます。
```
>rm .DS_Store
```

もう一つの方法として、プロジェクトファイルの中にある、Imagesフォルダ内のファイルを
全部取り込む記述に、例外ファイルを指定するやり方があるとのこと。
以下のように、Excludeオプションで.DS_Storeファイルを指定します。
``` xml
		<!-- Images -->
		<MauiImage Include="Resources\Images\*" Exclude="Resources\Images\.DS_Store"/>

```

.DS_Storeファイルの生成タイミングがわからないし、
いちいち削除するのも面倒なので、Excludeオプションを使う方が楽そうですね。
Qiita のアプリをインストールしてみた

ごきげんよう、百合宮桜です。
Edge で Qiita のアプリを見つけたので試してみました。
以下の作業はすべて Microsoft Edge で行っています。

# インストール方法
1. アドレスバーのアプリマーク＞インストールをクリックします。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/fbd38714-fcea-842e-2a3a-7ef46bcf9b5c.png)

2. アプリが自動で起動しますので、「このアプリを許可する」のチェックをご自身のお好みにして、「許可」をクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/3705d650-da21-ccfd-05fb-af1327647553.png)
    ※私はとりあえずデフォルトのままにしました。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/355e0f40-4575-9efb-6e41-a203ad9d9fba.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/5cc50992-a7a2-ca58-5232-a9482f5a43aa.png)
    タスクバーやスタートのピン留め一覧に Qiita アイコンが表示されました。

# アプリの設定
画面上部のメニュー＞アプリの設定から開けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/724691f1-2493-e225-cb2d-853815a717cc.png)
デバイス ログイン時の自動開始のオン/オフを切り替える時くらいしか使う時がなさそうですが💦


# 所感
ブラウザ版がそのままアプリになっています。
今のところ特に不便は感じていません。
検証記事を書く時に、ブラウザをタブを開きまくっていて、「あれ？記事の下書きは、どのタブ？」となることがよくあるので、別のウィンドウとして開いておいた方が安心かもと思いました。
Qiita アイコンは黄
WindowsPCがSSIDをしゃべっていた話

# PCから謎のSSIDが、、

スマホのwifi設定をいじっていたら、謎のSSIDが、、

名称が「direct-XX\<PCのホスト名\>-XXXX」。
雰囲気的に機器間の通信用に勝手に開いてるっぽい気はしますが、、意図してない動作があるのは気持ちが悪い。

# 先に結論

これでした。

https://www.vwnet.jp/windows/w10/2018060401/SubDisplayOverWiFi.htm

無効にしたら、該当SSIDが消えてくれました。
確かに検証でこの設定最近入れましたわ。。
中途半端な状態で検証終わらせるとよろしくないなと痛感した話でした。

# 経緯

結論は上記の通りなのですが、経緯をつらつらと。
ググってもドンピシャで答えに当たらなくて、ちょっと手間取ったので、ググった人がこの記事ひっかけやすいように、という意味も込めて。

## なんで見つけた？

スマホのwifi設定いじっていて、PCのホスト名が入っているSSIDを見つけたのがスタートです。

試しにPC側のWIFIインタフェースを落としたら消えたので、PCが発しているということで確定。

なのですが、その先が結構長かったです。。

## ふるまい

最近いじったPC設定にはBluetoothもあったので、試しにBluettoothをOFFにしてみたら、該当SSIDが消えました。

iphoneとMACをつなぐ際にwifiとbluetoothをセットでon/offさせられたような気もしたので、この2つはセットで動くんだっけか、、？と迷走。

感触的に機器間接続する際に裏で勝手に作るコネクションだろうなぁ、、と思い記憶をたどったら、ワイアレスディスプレイの設定試験をやったことを思い出し、offに戻したらbluetoothを有効にした状態でも該当のSSIDが出なくなりました。

## 備考

PCをつなぐ先のwifiの情報は山ほどあるのですが、「自分が発すするwifi」の情報が全然ヒットせず、苦労しました。。
そういうのを一覧で出すコマンドあるのかな、、

時間取れたら深堀してみようと思います。
ディジタル署名の仕組み

### 署名・捺印に相当する機能を持つディジタル署名
盗聴に対して、共通鍵暗号方式や公開鍵暗号方式を利用したデータの暗号化が有効。
改ざん、なりすましに対して、暗号技術を用いたディジタル署名が有効。
ディジタル署名　とは　ディジタハンコ、捺印的な機能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/70f35dd3-3b8c-594f-eb01-031f9e8ee520.png)
購入契約書のサイン、捺印のように、本人確認・改ざんの有無の確認ができ、送信者が送信したことを否認できない。
それを実現する方法として、メッセージダイジェストと公開鍵暗号方式を応用して実現される。
### 改ざんの確認にはメッセージダイジェスト
　”ダイジェスト”とは”概要”
　データ（メッセージ）をあるルール（ハッシュ関数）によって、一定の長さのデータに変換したものをメッセージダイジェスト（ハッシュ符号）という。
　メッセージダイジェストは、元のデータの長さが100文字であっても200文字であっても長さは同じ。また、元のデータが1文字でも異なれば、全く違ったメッセージダイジェストになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/9824f50d-1fbb-c0e9-d926-d329f377e2d5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/a71da273-9cae-9c9c-d7ad-dfae7bfcbd78.png)
### ディジタル署名の仕組み　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/1cebed99-caae-ef1c-445a-49564fb6cbce.png)
①送信者は、ハッシュ関数を使ってデータからメッセージダイジェストお作成する。
②送信者は、①で作成したメッセージダイジェストを送信者自身の秘密鍵で暗号化し、ディジタル署名を作成。
③送信者は、データと②で作成したディジタル署名を送信する。
④受信者は、送信者と同じハッシュ関数を使って、送られてきたデータからメッセージダイジェストを作成する。
⑤受信者は、送られてきたディジタル署名を送信者の公開鍵で復号して、メッセージダイジェストを取り出す。このとき復号出来れば、まさしく送信者が確認できる。復号できなければ、第三者が送信者に成りすましをわかる。
⑥受信者は、④で作成したメッセージダイジェストと⑤で取り出したメッセージダイジェストを比較する。一致すれば、送られてきたデータが改ざんされていないが確認できる。一致しなければ、第三者にデータが改ざんされたことが分かる。

練習問題
盗聴となりすましに対しては、ディジタル署名が有効。
データをハッシュ関数によって、、一定の長さのデータに変換したものを、メッセージダイジェストという。
ディジタル署名では、改ざんを検知するために、メッセージダイジェストを利用し、本人確認のため、公開鍵暗号方式における公開鍵と秘密鍵を逆に利用する。
【Flet】詳細折り畳み機能の作り方

fletで詳細折り畳み機能を作れたので共有しておきます。
ちなみに、詳細折り畳み機能というのは
<details><summary>これです</summary>
ここに詳細な情報を書きます
</details>


## コード
このクラスのインスタンスを作成して使うことを想定しています。
以下のサンプルコードをそのままコピペするとこんな感じになります。
<details><summary>項目名</summary>
　詳細情報
</details>
------------(Divider)


```py:sample.py
import flet as ft

class ItemTemplate(ft.UserControl):
    def __init__(self, item, detail_content):
        super().__init__()
        self.item = item # 項目名
        self.detail_content = detail_content # 詳細情報
        self.detail_visible = False # 詳細情報の可視フラグ

    def build(self):
        # トグルボタンの設定
        self.toggle_icon = ft.Icon(name=ft.icons.ARROW_RIGHT, rotate=0, animate_rotation=100)

        # Dividerと詳細情報を交互に入れ替えて表示する
        self.detail = ft.AnimatedSwitcher(
            content=ft.Divider(),
            transition=ft.AnimatedSwitcherTransition.FADE,
            duration=100,
            reverse_duration=100
        )

        # コントロールの作成
        item_template = ft.Container(
            content=ft.Column(
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                controls=[
                    ft.Container(
                        on_click=self.switch_toggle,
                        content=ft.Row(
                            controls=[
                                self.toggle_icon,
                                self.item,
                            ]
                        )
                    ),
                    self.detail
                ]
            )
        )

        return item_template

    # トグルボタンをクリックしたときの処理
    def switch_toggle(self, e):
        # 詳細が表示されていないとき
        if not self.detail_visible:
            # トグルアイコンを下向きに回転させる
            self.toggle_icon.rotate = 3.1415/2

            # Dividerの上に詳細情報を追加してcontentに設定する
            self.detail.content = ft.Column(controls=[ft.Container(content=self.detail_content, padding=ft.padding.only(left=30)), ft.Divider()], expand=True)
            
            # 表示の更新
            self.update()

        # 詳細が表示されている時
        else:
            # トグルボタンを右向きに回転させる
            self.toggle_icon.rotate = 0
            #詳細情報の代わりにDividerをcontentに設定する
            self.detail.content = ft.Divider()
            #表示の更新
            self.update()
        # 可視フラグの反転
        self.detail_visible = not self.detail_visible

def main(page: ft.Page):
    a = ItemTemplate(ft.Text("項目名"), ft.Text("詳細情報"))
    page.add(a)

ft.app(target=main)
```

## 参考にした公式リファレンス

https://flet.dev/docs/guides/python/animations#animated-content-switcher
ABC319回答メモ

0.はじめに
　企業名を冠していないコンテストでしたが
　C問題が難しく、ABしか解けませんでした・・・。
　最近Cすら解けない回が続きモチベーションが下がり気味です。


1.A - Legendary Players
　問題に提示されたプレイヤー名とレーティングの組み合わせを
　辞書に登録し、インプットのプレイヤー名をもとにレーティングを
　表示しました。

　https://atcoder.jp/contests/abc319/submissions/45353129

2.B - Measure
　問題文が難解というか、言っている意味がしっくり入ってこず
　悩みました。
　結局問題文に書かれているママを実装してみたところ
　例題にACできたので、そのまま提出してACでした。

　[実装]
　　1.リストY(1以上9以下のNの約数の昇順リスト)を用意
　　　1-1.１～９を変数ｉでループし、Nを割り切れる場合
　　　　　　その数字をリストＹに追加
　　2.回答用文字列Sに"1"をセット（i=0の時はSは必ず1になるため）
　　3.１～Nまで変数iでループする
　　　3-1.変数flgに0をセット
　　　3-2.リストYを先頭から変数ｘに代入してループ
　　　　3-2-1.iをN/xで割り切れる時
        3-2-1-1.Sにxを文字列にして追加
        3-2-1-2.flgに1をセット
        3-2-1-3.3-2のループを抜ける
　　　3-3.flgが0の時
　　　　3-3-1.Sに”-”を追加
　　4.Sを出力して終了

　https://atcoder.jp/contests/abc319/submissions/45365340

3.C - False Hope
　試験時間中には、提出すらできずに終了。
　試しにしっている総当たり関数を使ってみたところ
　時間オーバーとなり何とか計算できないかを
　考えているうちに終了。

　解説を見たら、総当たりでとけるとあり、
　総当たりの考え方としてC++のnext_permutationを使うとあった。
　pythonには内容でしたが、ググると以下の実装例が。
　参考にさせていただき、next_permutationでの
　総当たりをpythonで実装しつつ、解説のC++を
　pythonに書き直して提出したところ
　ACを頂けました。

　【参考サイト】
　https://strangerxxx.hateblo.jp/entry/20220201/1643705539

　https://atcoder.jp/contests/abc319/submissions/45425136


以上
挫折しかけたけど入茶できた中学生の話。

AtCoderを初めて一年で（半年のブランクはあったが）茶色になることができたので、自分がやったことを記事に残しておきます。

一応この記事の続き？です。挫折したとか大げさに書いてあるけど今思えばそんなことないです。ちょうど半年後に入茶できたので、有言実行できたかな？

https://qiita.com/harryp0tterK/items/3e3efb63bacff50d6301

## 茶色になるまでにやったこと
### 数学
まず、問題文や解説をしっかり読めるようになるように数学を勉強しました。問題の制約や解説の計算式がわからなかったので（シグマとかlogとか）、集合などの勉強はしっかりやりました。
数1Aと2Bの白チャートを一通りやったら、大体は理解できるようになりました。プログラミングと数学は切っても切れない関係ですね。
### 過去問を解く
いわゆる精進というやつですが、最初のうちはABCのA,Bを繰り返しやりました。大体Bまでを10分で解くのを目標に早解きも意識してました。A,Bがスムーズに解けても、C問題はやはり壁でした。今でも茶diffの簡単なものぐらいまでしか解けませんが、レートが200ぐらいのときが一番難しかったです。アルゴリズムを知らないので、入力を受け取るコードを書いてから手が進まないのです。ネットでいちいち検索するのでは身につかないと思ったので、E8さんの「競技プログラミングの鉄則（通称鉄則本）」を買ってアルゴリズムを覚えました。
### 自分が使えるアルゴリズム
今自分が使えるアルゴリズムは茶色コーダーとしては少ないんじゃないかなと思います。最近ABCの問題自体難しくなってきているので、Cが解けないこともけっこうあります。アルゴリズムといえるかも怪しいものもありますが...

__結構理解してるアルゴリズム__
* 全探索
* 累積和
* ソート

__簡単なものなら使えるアルゴリズム__
* 二分探索
* DP
* BFS
* DFS

他の茶色コーダーをみるとこれらを使いこなしてる方々はたくさんいるので、まだまだ勉強が足りないなと思います。CやDを解くためにはもっとアルゴリズムを使いこなせないといけないですね。

## 最後に
自分が何もわからないところから入茶までできたのは、やはり競プロが楽しいからだと思います。自分のような普通の中学生にとって、同年代のすごい人や年上の人と競争、交流できるというのはとてもいい経験になります。あとは、問題が解けた時の達成感はなかなか他では味わえないものですね。最近は前に比べて難しいという雰囲気がありますが、もっと競プロerが増えるといいなと思います。
raspberry piの省電力wifiの設定を切る

raspberry pi を使用しているとraspberry piとの通信ができなくなったので調査

機種:raspberry pi3 
OS:Linux raspberrypi 6.1.21-v8+

以下のような要因がありました。
- wifi省電力モードの影響
- 画面スリープ


------------------
- wifi省電力モードから

まずraspberry pi は通信が少しの間ないとwifiが省電力モードになる様子
下記コマンドを使用して省電力モードをoffにする
```
$ iwconfig wlan0 power off 
```

下記コマンドを実行して、設定値が変更されていることを確認
```
$ iw dev wlan0 get power_savef
```

次回起動時にも省電力モードをoffにするため/etc/rc.localに追加しておく
```
$ sudo vi /etc/rc.local
```
追加内容
```
$ iwconfig wlan0 power off
```

---------
- 画面スリープについて

下記コマンドを実行して、内容を追加する
```
sudo vi /etc/xdg/lxsession/LXDE/autostart
```
追加内容
```
#スクリーンセーバをオフ
@xset s off
#X serverをオフ
@xset s noblank
#DPMS(Display Power Management Signaling)をオフ
@xset -dpms 
```

下記コマンドを実行し、内容を追加する
```
$ vi /etc/lightdm/lightdm.conf 
```
下記内容を追加する
```
[SeatDefaults]
xserver-command=X -s 0 -dpms
```
以上にてraspberry piとの通信ができなくなる現象を解決した。
ルーティング（ネットワーク層）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/74c180d8-0bab-9f37-977f-dcea7e1f9280.png)
１：DHCP(Dynamic Host Configuration Protocol)
　IPアドレスを自動的にクライアントに配布する手順（プロトコル）です。あらかじめサーバに登録されているIPアドレスのうちの１つをクライアントに貸し出します。クライアントは、IPアドレスを使い終えると、サーバへ返却します。パソコンのIPアドレスはを自動的に取得するという設定は、DHCPを利用してIPアドレスを取得するかどうかの設定です。また、一般的家庭でインターネット接続に用いるルータ（ブロードバンドルータ）には、DHCPサーバ機能が付属していることが一般的です。

※試験への出題例：DHCPは「IPアドレスの設定を自動化するためのプロトコル」

２：アドレス変換技術
　プライベートIPアドレスとグローバルIPアドレスを相互に変換することで、グローバルIPアドレスを持たない内部ネットワークのPCからもインターネットが利用できるようになります。アドレス変換技術は下記のものがあります。

①NAT：プライベートIPアドレスとグローバルIPアドレスを１対１で変換する。

②NAPT(IPマスカレード)：プライベートIPアドレスとグローバルIPアドレスを１対多で変換する。１つのグローンバルIPアドレスを複数のPCで共用できる。

※NAPTでは「プライベートIPアドレスをグローバルIPアドレスへ変換する」
iPadのTabBar（UITabBar）にカスタムフォントを適用できない時の対処法

## 背景
SwiftUIでTabViewを実装したとき、フォントを変えたかったので[UITabBarAppearance](https://developer.apple.com/documentation/uikit/uitabbarappearance)を使っていた。
iPhoneでは上手く適用できていたが、iPadだとフォントが適用されていなくて困っていた。

```HogeView.swift
let appearance = UITabBarAppearance()
// フォント指定
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    NSAttributedString.Key.foregroundColor: UIColor.white,
    NSAttributedString.Key.font: UIFont(name: "適当なフォント", size: 12) as Any
]
```

## 原因
[UITabBarAppearance does not work on iOS15 iPad (title color)](https://stackoverflow.com/questions/69217563/uitabbarappearance-does-not-work-on-ios15-ipad-title-color)に書かれているように、iPadの場合はインライン（アイコンとテキストが隣り合う）表示であることでiPadの場合にフォントを適用できていないようだった。

→画像左のようにiPadはアイコンとテキストが隣り合う。iPhoneでも横画面時は画像左になるんすかね？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/d87b082f-92b6-eeab-e2ac-6b5d766b747a.png)
[human-interface-guidelines/tab-bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)

## 対処
インライン対応を入れる。
```HogeView.swift
let appearance = UITabBarAppearance()
// iPhoneフォント指定
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    NSAttributedString.Key.foregroundColor: UIColor.white,
    NSAttributedString.Key.font: UIFont(name: "適当なフォント", size: 12) as Any
]

// iPadフォント指定
appearance.inlineLayoutAppearance.normal.titleTextAttributes = [
    NSAttributedString.Key.foregroundColor: UIColor.white,
    NSAttributedString.Key.font: UIFont(name: "適当なフォント", size: 12) as Any
]
```

## 所感
[inlineLayoutAppearance](https://developer.apple.com/documentation/uikit/uitabbarappearance/3198049-inlinelayoutappearance)に

> The appearance attributes for items displayed with an inline style.

ってあるけどinline styleがどういうスタイルか良く分からんかったのがそもそもの敗因かなとか思った。
理解力ないのもあるけどinline styleについて画像とセットで書いてほしいとか思ったりもした。みんなこういうのどうやってググってんだろ。

あと[human-interface-guidelines/tab-bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)的にiPadはサイドバー使えっていうのはまぁハイ...そうすね。


## 参考
[TabView](https://developer.apple.com/documentation/swiftui/tabview)
[human-interface-guidelines/tab-bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)
[UITabBarAppearance](https://developer.apple.com/documentation/uikit/uitabbarappearance)
[UITabBarAppearance does not work on iOS15 iPad (title color)](https://stackoverflow.com/questions/69217563/uitabbarappearance-does-not-work-on-ios15-ipad-title-color)
[inlineLayoutAppearance](https://developer.apple.com/documentation/uikit/uitabbarappearance/3198049-inlinelayoutappearance)
[[iOS][SwiftUI] グローバルな外観設定](https://zenn.dev/spyc/scraps/72a102bab127bf)
【Android】特定のアプリによるバイブレーションを無効化する【adb】

adbコマンドを使えるようにした上で、
```shell
adb shell appops set <パッケージ名> VIBRATE ignore
```
で無効化できます。おそらく。
アプリのパッケージ名は [Aplin](https://play.google.com/store/apps/details?id=com.nagopy.android.aplin) あたりを使って調べましょう。

自分はLenovoのタブレットで顔認証失敗時に振動するのが嫌だったので、
```shell
adb shell appops set com.tbsmart.levision VIBRATE ignore
```
で無効化しました。
【初心者向け】ソースファイル名には注意が必要という話

まずはこちらのプログラムをみてください。
```python:pandas.py
import pandas
print(pandas.__version__)
```
これはPythonでpandasモジュールをインポートして、pandasのバージョンをコンソールに出力しています。普通であれば、コンソールに`2.1.0`（2023/9/10 時点）と出力されるはずですが、エラーがおきました。

```console:console
Traceback (most recent call last):
    File "/Users/hostname/test/pandas.py", line 1, in <module>
        import pandas
    File "/Users/hostname/test/pandas.py", line 3, in <module>
        print(pandas.__version__)
              ^^^^^^^^^^^^^^^^^^
AttributeError: partially initialized module 'pandas' has no attribute '__version__' (most likely due to a circular import)
```
ちなみに環境はこんな感じです。
* Mac OS Ventura 13.5.2
* 実行環境：pipenv（Python 3.11.3）

`pip list`にもpandasは入っています。
```
Package           Version
----------------- ------------
numpy             1.25.2
pandas            2.1.0
pip               23.2.1
...
```

# 原因
原因は、ソースファイル名をモジュール名と同じにしているということです。
`__file__`でインポート元を確認してみましょう。（これは通ります）
```python:pandas.py
import pandas
print(pandas.__file__)

# >> /Users/hostname/test/pandas.py
```
つまり、ソースファイルが自分自身をimportしていることになってしまうのです。ソースファイル名を変えると、
```python:pandas_test.py
import pandas
print(pandas.__version__)
print(pandas.__file__)

# >> 2.1.0
# >> /Users/hostname/test/.venv/lib/python3.11/site-packages/pandas/__init__.py
```
通りました。インポート元もちゃんと.venvの中になってますね。

これは、同じディレクトリ内に`pandas.py`と`test.py`があり、`test.py`で上記のプログラムを実行しても、同じエラーがおきます。

もしかしたら別の回避策があるかもしれないので、知ってる方はコメント頂けますと幸いです。
【M5Stack Core2】UIFlowでセンサーの値をSDカードに書き込む


## やったこと
M5Stack Core2 で、光センサーの値をSDカードに書き込む

## 動作確認済環境
- UIFlow V1.12.5

## 必要なもの

- [M5Stack用光センサユニット](https://www.switch-science.com/products/4051)
- [M5Stack Core2](https://www.switch-science.com/products/6530)

 
![IMG_9952.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/d4d78456-b3fd-ab5f-65a2-4c1865de73ba.jpeg)


ちなみに、M5Stack BASICでは、このセンサーをこのまま接続しただけでは使えません。

<br>

## 手順
ハードウェア　＞　SDCard
（なお、UIFlow V1.7.4 だと　「高度なブロック　＞　SDCard」）

[![Image from Gyazo](https://i.gyazo.com/46a5403280ba8a08916a04efc204fbc4.png)](https://gyazo.com/46a5403280ba8a08916a04efc204fbc4)





[![Image from Gyazo](https://i.gyazo.com/a0b2384e8021a164e6a01dfead95eae2.png)](https://gyazo.com/a0b2384e8021a164e6a01dfead95eae2)

※なぜか、LIGHTユニットのPORTは　Bではセンサーは反応せず、　Aにしたら反応した。（なんで？）

実行後、取り出して、PCでcsvファイルを開くと、ちゃんと書き込まれてた。

[![Image from Gyazo](https://i.gyazo.com/f9f2c3ed56efb8c37c3ec7a3e8fba995.png)](https://gyazo.com/f9f2c3ed56efb8c37c3ec7a3e8fba995)


以上です。
GitHub Actions のコンテナ内にSSH接続してデバッグする方法

Snippetとして残しておく。


`.github/workflows/ci.yaml`に以下のjobを追加する。

```yaml
name: CI
on: [push]
jobs:
  debug:
    strategy:
      matrix:
        os: [ubuntu-latest]
        ruby: ['3.1']
    runs-on: ${{ matrix.os }}
    steps:
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: ${{ matrix.ruby }}
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
      - uses: actions/checkout@v3
      - name: Setup tmate session
        uses: mxschmitt/action-tmate@v3

```

> If no user has connected within 10 minutes after the post-job step started, it will terminate the tmate session and quit gracefully.

とのこと。

# Ref. 

https://github.com/marketplace/actions/debugging-with-tmate
Vueで生成されるHTMLタグを任意に変更できるButtonコンポーネントをつくる

こんにちは。齋藤（[@wtoddev](https://x.com/wtoddev))です。
久しぶりのQiita投稿になります。（最近、あまり明文化されたアウトプットができていない気がする。気をつけなければ。）

今回は、Vue.js（Nuxt）な環境でデザインシステムやコンポーネントライブラリを実装する上で、レンダリングされて吐き出されるHTMLのタグを任意に変更できるような再利用性の高いButtonコンポーネントの作り方について記したいと思います。

## 実現したいこと
- UI的に原子的なButtonコンポーネントを作る
- そのコンポーネントを利用する場合に、最終的に吐き出されるHTMLのタグが任意に指定できるようにする（`aタグ`や`buttonタグ`などを選べるようにする）

### 実証環境
今回の実証環境は以下の通りになります。
```
├── @nuxt/devtools@0.8.2
├── @nuxt/image@1.0.0-rc.1
├── nuxt@3.7.0
└── sass@1.66.1
```

## 実装してみる
Vueの`component`要素と`is`属性を使用することで実現が可能です。

### `component`要素とは
`component`要素は、動的なコンポーネントを作成するための要素で、`is`属性によりHTML要素も生成することができる便利な代物です。
タブがあるUIなど、動的にコンポーネントを切り替えたい場合に有用のようです。

公式ドキュメントは[こちら](https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components)から

### 使ってみる

```vue:CoreButton.vue
<script setup lang="ts">
const props = defineProps ({
    asHtml: {
        type: [Object, String],
        default: 'button',
    }
})
</script>

<template>
    <component :is="props.asHtml">
        <slot />
    </component>
</template>
```
原子的なButtonコンポーネントであり、子コンポーネントとして使用される`CoreButton`では、`component`要素を使用し、`is`属性をpropsで渡せるように定義をしました。また、テキストを挿入するために`slot`を設けています。

### 親コンポーネントで使用する

```vue:index.vue (親コンポーネント)
<template>
    <div>
        <CoreButton as-html="a" href="/">これはリンクです</CoreButton>
    </div>
</template>
```

先程作成した`CoreButton`を親コンポーネントで使用してみます。
`as-html`には吐き出されてほしいHTMLタグであるを記入します。また、タグ内には表示したい文字列を挿入します。

以上のようにした場合、レンダリング後のHTMLは以下のようになります。

```html
<div>
    <a href="/">これはリンクです</a>
</div>
```

このように、propsたる`as-html`で渡した文字列がHTMLのタグとして生成されました。

以上で、実現したいことの実装が完了です。今回は色々と省いた原子的なButtonコンポーネントですが、これを応用することでより多様で再利用性の高いコンポーネントが作成できると思います。

## おまけ：`buttonタグ`でタイポグラフィが思い通りにならない場合
`button`タグを使用してマークアップをした場合に、適切に`font-size` `font-weight`を指定しているのにも関わらず、意図しないデザインになることがあります。

調査してみると`aタグ`で同じスタイリングをしているのにも関わらず、`buttonタグ`にするとおかしくなってしまうようです。

### なぜ起きる？

実は`buttonタグ`をはじめ、フォームで使用するようなHTMLタグでは一部ブラウザで`font-family`や`font-size`を継承しないようになっているのです。

`font-weight`についても、Google FontsなどのWebフォントを使用している場合に、`font-family`が継承されない影響で適切に指定ができない事象が発生するようです。

### 解決方法

解決方法は非常にシンプルで、リセットCSSなどで`buttonタグ`の`font-family`を親要素を継承するように`inherit`の値を与えてあげるだけで解消します。

`font-size`も場合によっては`100%`にすることで、問題が解消するかもしれません。


## さいごに
今回は生成されるHTMLタグを任意に変更できるようなコンポーネントをつくる方法と、`buttonタグ`のタイポグラフィに纏わる厄介な挙動への対処方法についてご紹介しました。少しでもどなたかの参考になれれば幸いです。

ご精読ありがとうございました。

### 参考文献
- コンポーネントの基礎 | Vue.js
    - https://ja.vuejs.org/guide/essentials/component-basics.html#dynamic-components
- ウェブフォームへのスタイル設定 - ウェブ開発を学ぶ | MDN
    - https://developer.mozilla.org/ja/docs/Learn/Forms/Styling_web_forms
【Android】リップルエフェクトを付与する方法

# はじめに
最近ペアプロのような形で弊社の社員とコミュニケーションを取りながら作業することが多いのですが、その際にリップルエフェクトの付与の仕方を質問としてもらいました。
今回はこのリップルエフェクトの付与の仕方を備忘録的にまとめておこうと思います。

# リップルエフェクト付与の仕方
付与の仕方は非常に簡単で、対象のUIに対して以下を設定してあげるだけです。

```
android:foreground="?android:attr/selectableItemBackground"
```

# さいごに
いよいよDroid会議が今週に控えていますねー
久しぶりに直接現地へ顔出すので、よければ声かけてください！
Windows の DATE 型 のとても思いがけない仕様

# これはなに？

Microsoft の DATE 型のドキュメントの内容が思いがけなさ過ぎて変な声がでるぐらいだったので、この驚きを可視化してシェアしようと思って書いた記事。

# その文書

下記リンクがその文書。

https://learn.microsoft.com/ja-jp/cpp/atl-mfc-shared/date-type?view=msvc-170

びっくりポイントは

> 日付は、1899 年 12 月 30 日の真夜中を 0 として始まる、整数の増分で表されます。 時間の値は、数値の**小数部分の絶対値**で表されます。

> 日付値の整数部分は符号付きとして扱われ、小数部分は**符号なしとして扱われる**

の部分。（強調引用者）

# 計算して可視化する

文書だとよくわからないので、実際に計算してみる。

```c++:c++_on_Windows
#include <iostream>
#include <ATLComTime.h>
int main()
{
    for (int i = -48; i <= 48; ++i) {
        auto d = COleDateTime(1899, 12, 30, 0, 0, 0) 
               + COleDateTimeSpan(0, i, 0, 0);
        std::cout << i << "," << d << "\n";
    }
    return 0;
}
```

i は、1899年 12月 30日 午前0時 からの経過時間。単位は時間。つまり i=-12 で 基準時刻の半日前、i=24 で一日後。横軸。
d は、`DATE` 型 の中に入っている `double` 型の値。縦軸。

グラフにすると、下図。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6854/37e43387-ad66-5140-9ea6-322e2f3c1d13.png)

日付が -2日 から -1日に 変わるときに以下のようになる。
下表は 日付が変わる瞬間の プラスマイナス 1万分の1 のふたつの時刻。

||整数部|小数部|`DATE` の値|
|:--|:--|:--|:--|
|変わる直前|-2|0.9999|-2.9999|
|変わった直後|-1|0.0001|-1.0001 

のようなことになる。小数部が繰り上がって整数部が増える、というところだけみるとまあそうかなと思うかもしれないけど、 `DATE` の値 の欄を見ると分かる通り、極めて思いがけない動きとなっている。

# 困るポイント

`DATE` 型だから実質 `double` だよね。と思って `double` として整列すると順序通りにならない。

時刻の差を見るために `double` だと思って引き算をするのもだめ。

# 対策

`DATE` 型の中身を「どうせ `double` だよね」と思って操作してはいけない。

# 感想

Windows アプリケーションを作る仕事もだいぶやったことがあるんだけど、全然気づかなかった。
百年前の時間を扱うことがないので発現しなかったんだと思う。

いにしえのミスによりこうなってしまって、それを前提としたソフトがたくさんあるので直せないまま 30年が過ぎた、とかだと思う。

ミスとしてはわりと酷いものだと思うけど、後方互換性にかける執着心みたいなものの凄みを感じる。
Android実機でGoogle Cardboard for Unityを実行すると表示がおかしくなる件

# 初めに
Qiitaの質問として書こうとしていたものが途中で自己解決しちゃったので、質問をそのまま記事にしました。
内容としては[この記事](https://qiita.com/taxi13245/items/dec1a7f6bf8ec925cbf5)の続きとして作っていたものです。

以下は質問内容です。

# 質問内容だったもの

>::: note info
>開発環境：
>Windows11 Home Edition(64bit)
>Unity 2021.3.4f1 Personal
>Unity Hub 3.5.0
>
>実行環境：
>Android 12 (ZTE Libero 5G III)
>
>使用したパッケージ：
>Google Cardboard XR Plugin for Unity 1.21.0
>UniVRM 0.110.0_3f7d
>MMD4Mecanim 2020/01/05 版(β)
>
>:::
>#### Unityを使用しAndroidスマートフォンのCardboardで、VRMモデルを踊らせたい。
>Unityを使用し、以下のことを行いました。
>
>①Google Cardboard XR Plugin for UnityのサンプルプロジェクトであるHelloCardboardのセットアップをし、動作確認を行う。（正常に動作しました。）
>
>②サンプルプロジェクトのHelloCardboard.sceneからCubeRoom,Point light,Treasure,GraphicsAPITextの4つのオブジェクトを削除する。
>
>③ステージを作り、適当なオブジェクトのコンポーネントにCardboard Startupというスクリプトを追加する。
>
>④UniVRMでvrmモデルをfbxに変換する。
>
>⑤MMD4MecanimでvmdモーションをHumanoid向けのアニメーションに変換する。
>
>⑥変換したモデルに変換したアニメーションをさせるよう設定する
>
>⑦スマートフォン向けにビルドする
>
>
>### 発生している問題・エラー
>↓実機で実行している様子の動画です。右上の「0.99GB」は別のアプリによるものなので気にしないでください。
>https://drive.google.com/file/d/14rszJE7W0BCoz14vHal2AN91SYGmIHqW/view?usp=sharing
>
>モデルが動くか、視点が移動すると動画のようにその軌跡がずっと表示されたままになります。
>また、スマホを動かしても視点が上を向かず、左右か下にしか視点を動かせなくなりました。
>
>Unityのエディター上で動作させた場合は正常に動作しました。
>
>
>
### ここまでが質問内容です。

# 解決した方法
・Graphics APIs を Vulkan 優先から OpenGLES3 優先に変更した。
Before：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/14f5f410-6551-3ad6-ece3-42cd19f6fd97.png)
After：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/60f52d61-5c07-b894-2c07-0984d1bbb854.png)
たったこれだけのことでした......
これからGoogle Cardboard for Unityで開発する人は気を付けましょう。