OmniAICreator/Qiita-1.07M huggingface dataset:
【2023年7月度】月次活動報告レポート

## 運営の透明化について

NFTプロジェクトには、大きな利益を生んでいる（経営的に成功している）プロジェクトもあれば、個人で細々と継続しているプロジェクトもあります。私が運営する「ドーナツ部長」のプロジェクトは、今は後者よりのプロジェクトと言えるでしょう。

売り上げや二次流通量がオンチェーンで一般公開されているので、プロジェクトの取引状況は、実は誰でも知ることができます。しかし、「ドーナツ部長」を通してNFTとブロックチェーンの技術を広めたいと考える私にとって、「オンチェーンの情報を見てね」と言うだけでは、少し不誠実なように感じてしまうのです（これは、あくまで私自身のプロジェクトについての考えです）。

そこで、毎月の活動報告を本サイトで行うことに決めました。企業で言うところの「IR」のようなものとお考えください。「ドーナツ部長」に関する活動、そして本サイト「ぬるぺでぃあ」に関する活動と成果を公開していきます。

### なぜ、活動報告を行うのか？
皆さんへ活動報告を開示する目的は、大きく2つあります。

➀毎月の活動や成果を皆さんへ報告することで、活動がよりアクティブなものになると考えています。「しつもん箱」や「Discord」内での感想や意見を取り入れることで、活動を双方向なものへとシフトしていくことが、長期的な目標です。また自分にプレッシャーをかけることも、ウラの目的として存在しています。

➁レポートは、運営とホルダーとを繋ぐアイテム（信頼を表すもの）として機能すると考えています。レポートには分析などを織り交ぜ、独自の解釈と考察を入れるようにする予定です。レポートのコア（考察や分析部分）はいずれ、限定公開へと切り替えられ、部長ホルダー様だけに全容が公開される日がやってきます。

### 2023.7月度 活動内容

2023年7月度の活動報告は下記となります。

#### ドーナツ部長PJの活動

- 作品制作：2点（シューティングゲーム用の部長／空心菜部長）
- 新作としてのリリース：0点
- Twitterスペース：0回
- StandFMでの配信：6回（#37～#42）
- 「レシートのNFT」の使い道：+2個

#### サイト「ぬるぺでぃあ」の成績（過去1か月分）

![det-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/cc4c1edf-d3b1-73bc-0ecc-ffe15543b82a.png)


レポートの詳細は、下記URLでも公開しています。
https://lookerstudio.google.com/reporting/cf54dd70-e940-4294-aa3d-0979a36ad59d

- 記事投稿数：31本
- 新設カテゴリ「ブログ／PV分析」
- 匿名投書システム「しつもん箱」を新設

#### プロトタイプ／プロダクト
2つのプロダクトを制作。有料コンテンツとして販売開始した（note／Baseでの決済）。

- Googleアナリティクスの自動レポートのテンプレート

https://miuradonuts.com/2023/07/20/ga-002/

- ゲームソフト風パッケージの展開図

https://miuradonuts.com/2023/07/25/note-008-2/



### 2023.7月度 収支について
#### コレクションの売り上げ
- 「Wearable DONUTS」成約0件
- 「2071年のドーナツ部長」成約1件：0.01ETH
- 「Ordinals作品」成約1件：0.003BTC

#### グッズの売り上げ
なし

#### プロダクト／サービスでのマネタイズ
なし

### 次月の活動計画
#### ドーナツ部長PJの次月計画

- ドーナツ部長のLINEスタンプ第二弾リリース（原画をNFTとして販売）
- ドーナツ部長の新作をリリース
- ドーナツ部長の新PJ（ジェネラティブ）のホワイトペーパーの公開

#### サイト「ぬるぺでぃあ」の次月企画

- 「Ver.1.2-Brush UP」施策に従って、サイトの構成やデザインを変更する
- トークンゲートを使った限定公開記事の試作

#### プロトタイプ／プロダクト

- TwitterBlueでアイコンが固定される問題をNFTを使って解決できないか？（試作品を制作）
- 部長のシューティングゲームのデータ販売

### NEWS
#### トピックス

- Ordinals での作品制作依頼あり
- ドーナツ部長のグッズに関する契約を締結（詳細は、時期が来たら公開します）
- ドーナツ部長がクレーンゲームのNFT景品として登場する計画が進行中

#### 良かったこと／手ごたえ
##### ドーナツ部長について
- 2071年のドーナツ部長を1点お迎え頂いたこと。また、ドーナツ部長ではないが、Ordinalsの作品でも成約が1件発生した。日々の継続的な情報発信と、スタエフなどの地道な活動の成果だと考える。

##### ぬるぺでぃあについて
- 本業との絡み、そしてドーナツ部長のPJでの動きもあるので、いつまで続くか断定はできないが、毎日記事投稿が継続中（この記事で37日連続投稿） 。

- サイトのTOPページの見出しやカテゴリーを変更。「何を提供するカテゴリー」なのか、分かりやすい名称を採用した（例：NFTの使い方、NFTを深く知る etc）。

##### その他
- Tweetによる発信数が、6月度から微増（190件→217件）し、「空心菜」部長からのLINEスタンプ公募Tweetが、高いインプレッションを記録した（imp：14,323／69いいね／39リプライ）。この結果から、双方向のコミュニケーションの強さを改めて感じた。こうした企画は、月に1回など、定期的に行ってもよいのでは？と考える。

#### 反省点／新たに生じた課題
- ドーナツ部長コレクションの新作リリースについて。7月度は新作リリースゼロに終わった。サイトのリニューアルとプロダクトの開発を優先したが、作品制作も並行して
行うべきだった。

- ドーナツ部長の新PJの全容に大きな変更を加えようと考えている。市況／楽しみ方の変化と、目指す場所が明確になったことで、以前の計画では、実現できないことがある。販売を後ろ倒しにしてでも、変更を加えたいと考えている。

- ドーナツ部長の新PJ（ジェネラティブ）に関する進捗報告を行うこと。販売に向けて認知度を上げていくことが必要であり、もちろん「当初計画からの変更」についても発信するべき。

- コンバージョンUPを目的として、ウェブサイト「ぬるぺでぃあ」の見やすさと記事へのたどり着きやすさを、向上させたい（アイキャッチのカラーリングを統一化／TOPページの導線の見直し）。


この記事は、著者が運営するメディア「ぬるぺでぃあ」でも読むことができます（記事は[コチラ](https://miuradonuts.com/2023/07/31/ir-2023-07/)）
![](https://miuradonuts.com/wp-content/uploads/2023/06/ヘッダーエリア画像作成.png)
Javaしか知らない10年目プログラマが転職を機にPHPを学び始めた話 #2

前回はこちら

https://qiita.com/naoto24kawa/items/c5b8134c74e8abffef83

# 本記事について

## 対象読者

* これからPHPを学ぼうとしている方
* ある程度プログラミング経験がある方
* 転職による環境の変化に不安を抱いている方

## 本記事作成の経緯

アルバイトから数えて10年ほどJavaとSpringbootで受託開発を行っていましたが、
初めての転職を機にPHPとLaravelを使った自社サービス開発の環境へ飛び込んで得た、
知見と感想を共有させてください。

# PHP入門

数値リテラルは他言語と同様なので省きます

## 型変換について

Javaユーザーからすると、`string`から`int`への変換にクセがあると感じました

### 文字列から数値

まず、キャストの方法は主に2つ

```php
/* 一般的なキャストを利用する */
echo (int) "10";
// -> 10

/* 変換の関数を利用する */
echo intval("20");
// -> 20
```

#### 数字以外を含んでいる

文字列に数字以外を含んでいても変換可能

```php
/* 数値が文字列の先頭に含まれる場合 */
echo (int) "10acb";
// -> 10

/* 数値が文字列の先頭に含まれる場合 */
echo intval("20xyz");
// -> 20

/* 数値が文字列の先頭では無い場合 */
echo (int) "abc10";
// -> 0

/* 数値が文字列の先頭では無い場合 */
echo intval("xyz20");
// -> 0
```

#### 演算時に自動変換

`int`にも`float`にも変換可能

```php
/* intの場合 */
echo "10" + "20";
// -> 30

/* floatの場合 */
echo "10" + "1.1";
// -> 11.1
```

以下、できないケースもある（っぽい）

```php
/* これはエラーになる */
echo "10abc" + 20;
// -> PHP Warning:  A non-numeric value encountered

/* これはエラーにならない */
echo intval("10abc") + 20;
// -> 30
```

## 変数について

型や宣言、演算子はほぼ同様

### 型について

以下に、スカラー型のみ紹介

```text
integer : 整数。intでも可。
float   : 浮動小数。double同義らしい。
double  : 浮動小数。float同義らしい。
string  : 文字列。
boolean : 真偽値。boolでも可
```

### 定数について

ちょい手間な書き方

```php
define('PRICE', 1000);

echo PRICE;
// -> 1000
```

### 配列について

配列と連想配列があるが、根本的にはすべて連想配列（JavaでいうMapみたいな感じ）

```php
$array1 = [1, 2, 3];

print_r($array1);
// ->
// Array
// (
//     [0] => 1
//     [1] => 2
//     [2] => 3
// )
// インデックスをキーとした連想配列が作成される
```
```php
$array2 = [
    'a' => 'apple',
    'b' => 'banana',
    'c' => 'coconut'
];

print_r($array2);
// ->
// Array
// (
//     [a] => apple
//     [b] => banana
//     [c] => coconut
// )
```

### 演算子について

Javaユーザーが知らなかった演算子

```php
$a = '10';
$b = 20;

// 代入
$a .= $b
// -> 1020
// 文字列の加算
```
```php
$a = '10';
$b = 20;

// 比較
$a == 10
// -> true

$a === 10
// -> false
// 型まで比較する

$a <> $b
// -> true
// $a != $bと同義

$a <=> $b
// -> -1
// 宇宙船演算子っていうらしい
// a, bが逆の場合は1, もし,等しい場合は0
```
```php
$a = '10';
$b = 20;

// その他
echo $a ?? $b
// -> 10
// Null合体演算子っていうらしい
// 左辺がNullの場合に右辺が代入される
```

他にも配列操作も演算子でできるのだが省略

## 条件分岐、繰り返し、等

ほぼ一緒
foreachが書けるってくらい

```php
$array = ['a', 'b', 'c'];

for(array as str) {
  echo str;
  // -> a
  // -> b
  // -> c
}
```

# 最後に

一旦、ここまで

細かい違いっていっぱいあるよねって感じ
さらっと書きたいんですがちょこちょこ引っかかるのでストレスかかります。。

本記事でひっかかりポイント回避の参考になると幸いです。

最後に
上記の理解の誤り、実装の誤り等あればご指摘いただけると幸いです

次は「関数」がテーマになると思いますのでお楽しみに

以上
curlでTLSのバージョンを指定してHTTPリクエストする方法

# はじめに

`--tlsv1.x`オプションだけではTLSのバージョンを指定しての通信ができず、
地味にハマったので備忘録として残します。

# 方法について

`--tlsv1.x`だけでなく`--tls-max 1.x`の指定が必要です。

TLS1.0でリクエストしたい場合は以下の様に実行してください。
```bash:例
curl --tlsv1.0 --tls-max 1.0　 <URL>
```

:::note warn
警告
サーバー側が指定したTLSバージョンに対応（暗号スイートの設定等）していることを確認してください。
:::

# 最後に
誰かのお役に立てれば幸いです。
【ChatGPT無】コードブロックいらないよぉ

:::note info
本記事は、ChatGPT（無料版）で
行なっております。GPT4での確認
はできておりません。あしからず。
:::

　どうも、カーブミラーです。
　　連日、とても暑いですね。
　　　救急車や消防車のサイレンが
　　　　ひっきりなしで
　　　　　鳴っています。

　みなさんも、
　　熱中症にご注意を。
　　　水分や塩分ばかりでなく、
　　　　ミネラルも出ていきます。
　　　　　補給しましょうね。

　下記は私の発言ですが
　　参照してみてください。
　　　お互いに、気を付けましょう。

[【ChatGPT無】に尋ねた、熱中症。](https://qiita.com/kabumira/items/3f9a274ecd97764484a0)

[夜間熱中症という言葉を知っていますか？](https://qiita.com/kabumira/items/53882dc9ba37f6502432)

[スマホ熱中症にご注意を。Bingも含む。](https://qiita.com/kabumira/items/8df2074dbe5280612236)
***

　今回は、
　　いらないのに出てくるw
　　　コードブロックのお話です。

　コードブロック、
　　プログラムを書く人は、
　　　ChatGPTさんが
　　　　プログラムを吐き出す
　　　　　コピーできる枠を
　　　　　　ご存知でしょう。
　　　　　　　あれです。

　テーブルなんかを
　　出させると、
　　　たまに、というか
　　　　頻繁に、入れられます。

　やめて、と言っても、ダメです。
　　「理解しました」と言いながら、
　　　シレッと出してきます（涙）

　どうやら、
　　ChatGPTさん、
　　　コードブロックを
　　　　意識的に使っている
　　　　　つもりはないようです。

　出力内容を
　　コピーして、
　　　確認すると
　　　　「```」で囲われています。

　これを指摘しても
　　ChatGPTさんは、
　　　コードブロックしてきます。
　　　　（ブロックか！）

　喧々諤々やっていると、
　　ヒントらしきことを
　　　ChatGPTさんが、
　　　　言っています。

　それを指示プロンプトに
　　組み込んでみると、
　　　コードブロックが
　　　　外れました。

　しかし、
　　確実とは言えないらしく、
　　　NewChatして
　　　　新たなセッションに
　　　　　指示プロンプトを
　　　　　　入れると、大丈夫ですが
　　　　セッションを続けると、
　　　　　解除されるのか、
　　　　　　またコードブロックに
　　　　　　　囲まれます。
　　
　以下にサンプルとして、
　　指示プロンプトを
　　　提示しますね。
```Text:コードブロックなしよPrompt
名前    | 年齢 | 職業       
-------|-----|------------
山田太郎 | 25  | エンジニア 
田中花子 | 30  | 教師       
鈴木一郎 | 28  | 医師       

以上のテーブルはテキストです。
コードブロックを使わずに表示してください。
あなたが表示できることは確認しています。
コードブロック内に入れないでください。
```
　ヒントは、「テキスト」です。

　その下の三行は、
　　コードブロックするな、と
　　　しつこく言っていますw

　まぁ、場合によって、
　　意図的にコードブロックを
　　　使い分けたいですよね。

　もう少し、
　　頑張ります、ペコ。
***
　2023/08/04に
　　妥協編をアップしました。

[【ChatGPT無】コードブロックいらないよぉ（妥協編）](https://qiita.com/kabumira/items/4d0dd469c5ec99d29d4e)
DJI Mavic 2 Pro を自作Androidアプリで自動操縦させる(2)~サンプルプログラムの実行（準備編）~

今回はMobile SDK(Android版)のサンプルプログラムを動かすための準備をします。

[前回の記事](https://qiita.com/shiiiinnooooo/items/21689dff1ffcf1b91104)では、AndroidStudioでDJI Mobile SDKを使用できるようにしました。

# 手順
1. DJI Developerの登録
1. App Keyの取得

# DJI Developerの登録
まずはじめに、DJI製品を使用する際に必要となるDJIアカウントを作成する必要があります。
[DJIの公式サイト](https://www.dji.com/jp)からアカウントを作成します。

登録の際には[このサイト](https://sekido-rc.com/blog/technical/210329_002/)を参考にさせていただきました。

[DJIの公式サイト](https://developer.dji.com/)から、登録を行います。
まずはじめに、サイトの右上から「Register」を押してください。
![スクリーンショット 2023-07-28 16.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606166/342b85da-fda4-1f3a-47cd-8c50ed9c5c23.png)

すると、下のような画面に遷移します。
ここに必要な情報を入力してください。
![スクリーンショット 2023-07-28 16.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606166/8203b47e-f779-954f-45e9-c7deea4de3fc.png)

その後、登録したメールアドレスに認証メールが届くので、認証してください。
これで、登録完了です。

# App Keyの取得
DJI Developer登録ができたので、Appsの登録を行います。

新しくアプリを開発する際に、DJI DeveloperのUser CenterにAppsを登録する必要があります。
また、その際に発行されるApp Keyが必要になります。
先ほどの[DJIの公式サイト](https://developer.dji.com/)から、今度はログインを行なってください。
ログイン後、以下のような画面になります。
（画像には5つボックスのようなものがありますが、これは表示されていなくて問題ありません。）
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606166/93b0099c-6efb-9ad3-4be6-b7356255262e.png)

画面右上にあるCREATE APPというボタン（青いボタン）を押すと、Appsの登録ができ、App Keyを取得できます。
以下のようにアプリ情報を登録していきます。
（注意：Package Nameは、「com.dji."APP Name(最初は小文字)"」のようにしないといけません！画像参照）
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606166/36026329-1e5e-ee96-f510-712acc7e5d9b.png)

CREATEボタンをクリックし、しばらくすると認証メールが届くので、認証を行なってください。
認証を行うと、User Center（ログイン後に表示された画面）に登録したアプリが表示されます。（2つ前の画像にあった5つのボックスのような感じで）
登録したアプリを選択すると、App Keyが取得できます。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606166/04a306cb-2279-60c1-cf08-09aba8c2622d.png)

この、Package NameとAppKeyはアプリ開発時に使用します！
（サンプルプログラムを動かす際も同様です。）

これで、サンプルプログラムを実行する準備は出来ました。
[次回](https://qiita.com/shiiiinnooooo/items/494a4efb3e45bfc95013)は、実際にサンプルプログラムを実行していきます！
【SQL】COUNT関数における(*)と(カラム名)の使い分け

SQLについて、基礎的な部分から復習しています。
アウトプットのため、こちらに備忘録として残していきます。
初学者の方に向けた内容です。

# COUNT関数とは
- 数をカウントする、SQLで使える関数


# 今回扱うテーブル

```MySQL
members
+------+--------------+--------------+
| id   | name         | gender       |
+------+--------------+--------------+
|    1 | カズキ         | male         |
|    2 | ユウスケ       | male         |
|    3 | キョウコ        | female       |
|    4 | テツヤ         | male         |
|    5 | アキ           | female       |
|    6 | トモ           | NULL         |
+------+--------------+--------------+
```
- maleが3
- femaleが2
- 無記名（NULL）が1
となっていいます。


# COUNT(*)の場合

```sql
select count(*)
from members
where gender = 'female';
```

```sql
count = 3
```

- COUNTで(*)と指定した場合、NULL値も合わせてカウントされる。
- よって、実行結果は3となる。

# COUNT(カラム名)の場合

```sql
select count(gender)
from members
where gender = 'female';
```

```sql
count = 2
```

- COUNTで(gender)を指定した場合、NULL値がカウントされない。
- よって、実行結果は2となる。




# まとめ

> COUNT(*) はNULLも含めてレコード数をカウントする
> COUNT(カラム名) はNULLを除外してレコード数をカウントする

引用：<a href="https://it-biz.online/it-skills/sql-count/">【SQL】COUNT関数を１分でわかりやすく解説<a>



# 参考サイト

https://it-biz.online/it-skills/sql-count/


https://www.sejuku.net/blog/72910
CSS widthとheightを同じにする 正方形のブロックを作る

<h1>widthとheighを同じにする</h1>
<p>widthとheightを揃えたい要素にpadding-topでwidthと同じ%を指定する</p>
<pre>HTML<br>
    &lt;div class="parent"&gt; <br>
      
        </div>
</pre>

<pre>CSS<br>
 　　　　　　parent {<br>
        width: 40%;<br>
        padding-top: 40%";<br>
    }

</pre>



文字を入れる場合


```HTML
<div class="parent">
    <p class="child">
    テキストテキスト 
    </p>
</div>
```

```CSS
.parent {
    background-color: #000;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.parent::before {
  display: block;
  content: '';
  padding-top: 100%;
}
.child {
  color: #fff;
}
```
DatabricksのVolumesを活用してクイックに分析

先日リリースされたVolumesを活用すると、任意のフォーマットのファイルをお手軽に分析できるようになります。

https://qiita.com/taka_yayoi/items/453026daacf71ba5662f

# ボリュームとは

簡単に言えば、Unity Catalogにマウントされるファイルシステムのようなものです。

https://qiita.com/taka_yayoi/items/f72b27df9d630235750c

> ボリュームは、クラウドオブジェクトストレージロケーションのストレージの論理的ボリュームを表現するUnity Catalogのオブジェクトです。ボリュームは、ファイルのアクセス、格納、制御、整理する能力を提供します。テーブルは表形式のデータセットに対するガバナンスを提供しますが、ボリュームは非テーブルケー式のデータセットに対するガバナンスを追加します。構造化、半構造化、非構造化データを含むすべてのフォーマットのファイルの格納、アクセスを行うためにボリュームを活用することができます。

# ボリュームへのファイルのアップロード

以下で公開されているCSVをダウンロードします。

https://www.mhlw.go.jp/stf/covid-19/open-data.html

あえてここではExcelで保存します。
![Screenshot 2023-07-31 at 10.58.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/4e1a3660-376a-6754-21aa-05680c2402da.png)

Databricksのデータエクスプローラにアクセスし、必要に応じてスキーマを作成し、その配下にボリュームを作成します。
![Screenshot 2023-07-31 at 11.00.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/148b2bd2-b72d-0728-ab42-63fb1c24b26e.png)
![Screenshot 2023-07-31 at 11.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/501f86f8-4836-0107-11bb-bdabbb1b0df5.png)
![Screenshot 2023-07-31 at 11.00.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/963a5365-2bd6-7c32-cbbf-57bac00fc6fe.png)

**このボリュームにアップロード**をクリックします。
![Screenshot 2023-07-31 at 11.02.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/36ec6622-3dd9-6636-2af8-3c9b1222efe0.png)

先ほどのExcelファイルをドラッグ&ドロップします。
![Screenshot 2023-07-31 at 11.03.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/b2d47628-801c-e5e1-3ccb-535e317064ff.png)

**アップロード**をクリックします。Excelがアップロードされました。
![Screenshot 2023-07-31 at 11.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/6b2f45d0-ebed-3bcc-f4ba-e20fbc54e25a.png)

# ボリュームのファイルへのアクセス

ボリュームのファイルには`/Volumes/takaakiyayoi_catalog/exterenal_data/external_files`のパスでアクセスできるようになります。

```py
display(dbutils.fs.ls("/Volumes/takaakiyayoi_catalog/exterenal_data/external_files"))
```
![Screenshot 2023-07-31 at 11.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/17956920-5ace-747a-3a72-149c8cbb8a2f.png)

pandasを使ってロードしてみます。

https://note.nkmk.me/python-pandas-read-excel/

最初に必要なライブラリをインストールします。

```py
%pip install openpyxl xlrd
dbutils.library.restartPython()
```

ボリュームのパスを指定してロードします。

```py
import pandas as pd

pdf = pd.read_excel("/Volumes/takaakiyayoi_catalog/exterenal_data/external_files/newly_confirmed_cases_daily.xlsx")
display(pdf)
```

読み込めました！
![Screenshot 2023-07-31 at 11.20.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/a60b2476-d020-932c-ee16-0ec75ee87f10.png)

ボリュームによって、ファイルシステムの複雑性が抽象化されるので、お手軽にファイルを活用した分析ができるようになると思います。ぜひご活用ください！

### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
Formaのアクション設定のマッピング（データマッパー）が確認したい

IM-BloomMakerが出てきてFromaを使う機会が減って（願望）いますが、過去に作成された画面等の保守・解析にまだまだFromaを触ることが多いと思われるので、自分のメモ代わりに投稿。


Formaのアクション設定のデータマッパー設定画面
この画面
![detamapping01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375174/21e3803a-0a7a-2444-b1fe-b2c0b15f6dc0.png)
でもマッピングのところが見切れて確認できないです。。。。
なので広げようとしても
![detamapping02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375174/ff1b4835-811c-610c-fa27-574bd2ffe44d.png)
うわああ━━━━━((((( ‘ ω ’ )))))━━━━━ぁぁぁ!!。

となり、表示域は変わらないようです。変数を確認したいのにこれでは使いにくいです。
なので、直接HTMLソースからマッピングの情報を取得しようと考えました

``` Javascript:サンプル
$('.expressionsDivInner > .expTable > tbody').children('tr').each(function(idx, el) {
    let SEPARATOR = ' >>> ';
    let lStr = $(el).find('.expTableDivLeft').text();
    let rStr = $(el).find('.expTableDivRight').text();
    console.log(lStr + SEPARATOR + rStr);
})

```

Formaのデータマッパー設定開いた状態で開発者ツールのconsoleとかで上記スクリプトを実行すると
![output.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375174/2a20a572-578b-10b3-5e1e-ada1ad32e1f2.png)
こんな感じで表示されます。

レスポンスの確認も同様に確認できますが、リクエストの情報も取れてしまうので
![output02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375174/7f023e7e-c624-b2d3-378a-20d7746f6162.png)
リクエストの情報とレスポンスの情報が取得されてしまいますが、まあよしとします。
定義したはずのコードが「ない」というエラー

# はじめに
以下のようにViewControllerにTableViewCellを紐づけて、実装するコードをちゃんと定義したのになぜか定義されていないという状況のエラーが発生しました。
![スクリーンショット 2023-07-29 16.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485517/d0a8e6b2-941a-96af-4fa5-2cc43c059ac3.png)
```func setup```
こちらはTableViewCellでは以下のように定義しています。
![スクリーンショット 2023-07-31 10.48.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485517/6ffd5ce1-dfd0-4b8f-5b7d-b7dbf839cf8f.png)

# 原因
関数の中に関数を入れるという状態にあったため、setupは行方不明になってしまった。
（初心者にはわからなかったのですが、とんでもない状況のようです）
![スクリーンショット 2023-07-31 10.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485517/630b585c-0af6-092c-3a1f-319ffd903f4b.png)

# 解決策
正しい位置に修正したらエラーが解消されました。
基本的なことなのかもしれないのですが、初心者ではあるあるなようなミスな気がします。参考になれば幸いです。
![スクリーンショット 2023-07-31 10.54.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485517/88a54768-82fa-4e4b-4837-122dacc1366a.png)
【読書メモ】ゆっくり読む『リファクタリング』~リファクタリングの法則~

## はじめに

最近『[リファクタリング　既存のコードを安全に改善する](https://www.amazon.co.jp/%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0-%E7%AC%AC2%E7%89%88-%E6%97%A2%E5%AD%98%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B-OBJECT-TECHNOLOGY/dp/4274224546)』(Martin Fowler (著))をちょっとずつ読み始めました。
まだ読み切れていませんが、読んでいて「うまいこと言うわ～」と思った法則についてメモしておこうと思います。

## 二つの帽子

リファクタリングをやりたくなる時というのは(本来リファクタリングは常にやるべきなのですが)、**機能追加しようとしたら元のコードがいまいちで機能追加が難しい！** というときなのではないかな、と思います。  
実際、書籍の中でも『いつリファクタリングをすべきか』という項目で、『準備のためのリファクタリング』として、いの一番に挙げられています。  
こういった場合、機能追加をするためには『機能追加』と『元のコードのリファクタリング』の、二つのことをやる必要がありますが、**これら二つは同時にやってはなりません。**
  
機能追加をしようとしていて、「おや？　このコードはちょっと直さないと機能追加がやりづらいな」と気づいたら、**『機能追加の帽子をリファクタリングの帽子にかぶり直して』** リファクタリングを行います。この時はコードのリファクタリングに専念し、機能追加は行いません。  
コードを修正して、機能追加がしやすい状態になったら、今度は **『リファクタリングの帽子を機能追加の帽子にかぶり直して』** 、改めて機能の追加を行います。  
その後、もしも機能追加したコードに再び改善点が見つかったら、また帽子をかぶり直してリファクタリングをするのです。

リファクタリングと機能追加を区別することで、機能追加がしやすい状態にリファクタリングされたコードに効率よく機能を追加できますし、万が一バグを埋め込んだ時にリファクタリングで埋め込んだのか、機能追加で埋め込んだのかを切り分けやすくなります。

個人的に、この法則を知って以降、機能追加でリファクタが必要になったときには意識するようにしています。
ただ、うっかりリファクタ・機能追加までやり切ってからデバッグをしたせいで、リファクタと機能追加のどちらでバグを埋め込んだかわからなくなってしまったこともあるんですが……(ちゃんと逐一デバッグしましょう)。

## 三度目の法則

わたし「コード書くぞ！」
```c#
//...

foreach(var item in items)
{
    var a = item.MethodA();
    a.MethodXX();
    // ...
}
```
(しばらくコーディングする・・・)

```c#
//...

foreach(var item in items)
{
    var a = item.MethodA();
    a.MethodXX();

    a.MethodB();
    // ...
}
```
わたし「あれ、この処理さっきも書いたかも？」
わたし「でも、似て非なる処理で共通化できないかもしれないし……」

(引き続きしばらくコーディングする・・・)

```c#
//...

foreach(var item in items)
{
    var a = item.MethodA();
    a.MethodXX();

    if(a == YYY)
    {
        a.MethodC();
    }
    // ...
}
```
わたし「あれ、また似たような処理かも？」
わたし「三回も同じことするのはさすがに変だね。リファクタしよう！」

三度めの法則とは、**『二度目に以前と似たようなことをしていると気付いたら、重複を意識しつつも作業を続行していいが、三度目に似たようなことをしていると気付いたらリファクタリングをする』** という法則です。

## デザインスタミナ仮説

ソフトウェア内部の設計を入念に行うことで、ソフトウェア開発のための**スタミナ**をつけていくことができるので、その後の開発をより長い期間、よりスピーディに行えるという仮説です。

まずい設計のまま爆速実装すると、一見素早く開発できるように見えます。
しかし、ぐちゃぐちゃのコードは理解に時間がかかりますし、バグも埋め込みやすいです。最初は速く開発できていても、徐々に開発スピードが遅くなっていきます。
きちんと設計しながら、そして適宜設計をより良くリファクタリングしながら開発を進めていくことで、既存のコードは機能追加に立ちはだかる壁ではなく、新機能追加のしやすいプラットフォームになるのです。

## さいごに

当たり前といえば当たり前ですが、大事なことだと思います。改めて意識するきっかけになりました。
『リファクタリング』、個人的にはページ数のわりに読みやすいというか、開発経験が少しあれば「なるほど！」「あるある！」と思える内容だと思います。
Vue3のリアクティブな変数は同じ値の代入を変更として検知しない

vue3のリアクティブな変数に
同じ値を代入したときに変更が検知されるのか気になったので確認してみた
(メモリを見ているのか、値を見ているのか)

## 前提

> "リアクティブ"はデータの変更が自動的に反映・伝播する特性を指します。特にVue.jsのようなフロントエンドフレームワークでは、ユーザーインタラクションやAPIのデータ変更に応じてUIをリアルタイムに更新します。Vue 3では、このリアクティブ性を制御するためにrefとreactiveという2つの関数が提供されています。

## 結果

* 同じ値が代入された場合は変更が検知されなかった。
* 変更検知された場合は、ページのリロードが走り、vueの`onUpdated `が走るのだが、同じ値を代入した場合はそれが走らなかった。


```vue
<script setup lang="ts">
import { ref, onUpdated } from 'vue'

const onBeforeMountHock = () => {}
defineExpose({ onBeforeMountHock })
const test = ref('半袖')
const han = () => {
  test.value = '半袖'
}
const naga = () => {
  test.value = '長袖'
}

onUpdated(() => {
  console.log('へんこう')
})
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <div>{{ test }}</div>
    <button @click="han">変更されないボタン</button>
    <button @click="naga">変更されるボタン</button>
  </header>

  <RouterView />
</template>

```
ABC_312解説

# ABC_312解説
## この記事は何
この記事は自らの復習用としてatcoder beginner contestを開設したものになります。一旦はC問題まで解説していますが、後程D問題以降も解説していければと思います。
## 問題の解説
[問題のリンクはこちら](https://atcoder.jp/contests/abc312/tasks)
### A問題
[A問題の公式解説のリンクはこちら](https://atcoder.jp/contests/abc312/tasks/abc312_a/editorial)
A問題はいつも通り言われたことを愚直に表現すればACが出るはず！！自分のコードはこちら。
```python:abc_312_a.py
S = input()
condition = ['ACE','BDF','CEG','DFA','EGB','FAC','GBD']
ans = 'Yes' if S in condition else 'No'
print(ans)
```
### B問題
[B問題の公式解説リンクはこちら](https://atcoder.jp/contests/abc312/tasks/abc312_b/editorial)
B問題もいつも通り愚直に実装すれば解けるはず！しかし今回の問題には？を比較する実装方法が難しいように思えました。浮かんだ案としては、Sの対象部分を抜き出す際に?を埋め込むもの、ｊ比較条件として. or #にするものなどありましたが、実際は?は比較しなければいいというのが最適解なのではないかと思います。公式もその解き方でしたし。
```python:abc_312_b.py
N, M = map(int, input().split())
S = []
for _ in range(N):
    S.append(input())

tak_code = []
#なぜかマークダウンでタクコードがうまくきさいできなかったので空としています。(多分エスケープの問題)
n, m = len(tak_code), len(tak_code[0])


for X in range(N-n+1):
    for Y in range(M-m+1):
        ans = True
        for dx in range(n):
            for dy in range(m):
                ans &= S[X+dx][Y+dy] == tak_code[dx][dy] if tak_code[dx][dy] != '?' else True
        if ans:
            print(X+1,Y+1)
```
### C問題
[C問題の公式解説リンクはこちら](https://atcoder.jp/contests/abc312/tasks/abc312_c/editorial)
後程更新します！
```python:abc_312_c.py

```
Databricksにおけるユーザーの最終ログイン日時を取得する

ユーザーの棚卸しをしたい場合に有益な情報が「ユーザーが最後にログインしたのはいつか」というものです。

これまでも監査ログで取得自体は可能だったのですが、いかんせん設定が大変。しかし、今回システムテーブルがサポートされたことで簡単にクエリーすることができるようになりました。

# システムテーブルの設定

こちらを参考に監査ログのシステムテーブルを有効化して下さい。

https://qiita.com/taka_yayoi/items/abaa48828cefe4f41e62

# クエリーの作成

Databricks SQLにアクセスして、以下のクエリーを実行します。

```sql:SQL
SELECT
  user_identity.email, -- JSONからメールアドレスを抽出
  MAX(event_time) AS last_login -- 最終ログイン日時
FROM
  system.access.audit
WHERE
  (
    action_name = "login" -- ワークスペースログイン
    OR action_name = "tokenLogin" -- パーソナルアクセストークンによるログイン
    OR action_name = "aadBrowserLogin" -- Azure ADトークンによるログイン
  )
GROUP BY
  user_identity
ORDER BY
  last_login DESC
```

![Screenshot 2023-07-31 at 9.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/c28575ec-e515-e745-43a5-1c2ebe619977.png)

監査ログのスキーマや分析のサンプルはこちらにありますので、色々な観点で分析に活用してください！

https://docs.databricks.com/administration-guide/account-settings/audit-logs.html

https://docs.databricks.com/administration-guide/system-tables/audit-logs.html

### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
React Aria について調べてみた

# はじめに

react-testing-library を使ってテストを書いていると、そもそもテスト対象の Accessibility に問題があり、`getByRole()` でテスト対象を取得できないということに遭遇することがよくあります。そんなことから、Webアクセスビリティについて真面目に学びたいと思い、[Webアプリケーションアクセシビリティ──今日から始める現場からの改善](https://amzn.asia/d/6Vcyw7a)を読んでいます。その中で紹介されていた [React Aria](https://react-spectrum.adobe.com/react-aria/) について、簡単に説明します。

# React Aria とはなにか?

Adobe のデザインシステムである [Spectrum](https://spectrum.adobe.com/) を構成するライブラリの一つ。UIコンポーネントのアクセシビリティを実現するうえで必要となる共通処理をHookとして提供するもの。aria属性だけでなく、キーボードナビゲーションやモバイルデバイスでの操作制御なども組み込まれている。

https://react-spectrum.adobe.com/react-aria/index.html

# なにができるのか？

React Aria を使うと何ができるのかを理解するには、[useButton](https://react-spectrum.adobe.com/react-aria/useButton.html) のドキュメントからリンクされている、次の記事を読むとよい。

https://react-spectrum.adobe.com/blog/building-a-button-part-1.html


以下、要約。

- ボタンの実装は簡単に見えて、しかしマルチデバイスについて考えると考慮しなければならないことがたくさんある
- タッチデバイスにおいて、ブラウザはタッチ操作を可能な限りマウス操作としてエミュレートするよう努めるが、それでも完全な再現はできない。例えば、ボタンをタップして、そのままスライドしてから話すと、`:active` と `:hover`スタイルが残ってしまうなど。
- [Pointer Event](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) を使うことで、ポインターデバイスのイベントを抽象化できるが、ブラウザによって若干動きが異なる場合がある。
- ボタン押下中に電話を受けた時など、タッチ操作がキャンセルされる場合がある。
- iOS において、ボタンを押下 -> スライドして選択開始すると、ボタンのラベルが選択されない。
- キーを押下し続けると onKeyDown イベントがリピートされるが、これが不都合になるケースもある。例えば、ボタンを押下するとメニューが表示され、先頭のメニューにフォーカスが移るようなケース。

React Aria はこのような問題を解決することを目的としている。

# useButton の動きを観察してみる

useButton は`onClicked` などに替わって `onPressXXX` 系のイベントをハンドルして制御することになる。次のようなサンプルコードを書いて、動きを観察してみる。

```tsx
const Button = (props: Parameters<typeof useButton>[0]) => {
  const ref = useRef<HTMLButtonElement>(null);
  const { buttonProps, isPressed } = useButton(
    {
      onPress: console.log,
      onPressStart: console.log,
      onPressEnd: console.log,
      onPressUp: console.log,
      ...props,
    },
    ref
  );
  return (
    <button {...buttonProps} ref={ref}>
      {isPressed ? "Pressed" : "Not pressed"}
    </button>
  );
};
```

Chrome で操作してみた結果がこちら。

![use-button-desktop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333203/de2a8246-36a0-2c9b-f623-ff6bbab8472f.gif)

マウスでボタンを押下したまま動かしています。マウスがボタン上から外れると `isPressed=false` になり、再度ボタン上にHoverすると `isPressed=true` になっているのがわかる。

これと同様の操作をタッチデバイスで行ったのがこちら。

![use-button-touch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333203/a486054f-d3ea-7ef4-ce26-f9d529781e4f.gif)


ボタン上からポインターが一度外れると、再度Hoverしても `isPressed=false` のままになり、上下スライドで画面がスクロールする。

また、ボタン押下中は `user-select: none` が付与され、テキスト選択を無効化してくれている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333203/1f88c3a0-d26f-851c-e017-b07899079017.png)

# 最後に

アクセシビリティを勉強していると、考えるべきことが非常に多く、また実現するための唯一の正解があるわけでもなく、多大な知識と労力が必要になると感じています。そんな中で、React Aria はアクセシビリティ改善の大きな助けとなりそうです。(ただ、MITではなくApache2ライセンスなので注意)

今回は時間がなかったので、本当にさわり部分だけの紹介になってしまいましたが、状態管理ライブラリである [React Stately](https://react-spectrum.adobe.com/react-stately/getting-started.html) も合わせて、今後理解を深めていきたいと思います。

以上。
若手エンジニアにとっての人と会うことの重要性とキャリア形成への影響

近年、テクノロジーの進歩により、人々はますますデジタルな世界に没頭しています。新型コロナウイルスのパンデミックも、人々の接触機会を制限することとなりました。しかし、若手エンジニアにとって、人との対面や人間関係の築き方は、未来のキャリア形成において極めて重要です。

# 人会わないとコンパクトな人間に？
先日、若手エンジニアとのミーティングを経験しました。その場での印象は非常にコンパクトでまとまっていたものの、詳しく話を聞くと、彼らのビジョンやキャリアについてはまだ明確には考えていないようでした。これは、彼らがまだ多くの経験を積んでおらず、他のエンジニアや業界の専門家との交流の機会が限られていることが原因かもしれません。

# 沢山のエンジニアとか沢山の人交流すべき
若いうちから、さまざまなエンジニアや専門家と出会い、多様なキャリアやビジョンを感じることは、自身の成長にとって不可欠です。ただし、これは単に他のエンジニアとつながることだけではありません。さまざまな背景や専門性を持つ人々との交流を通じて、新たな視点やアイデアを発見し、自身のスキルやキャリアに反映させることが重要です。他のエンジニアや業界の専門家との対話は、技術的なスキルだけでなく、コミュニケーションやリーダーシップのスキルの向上にも役立ちます。

また、他のエンジニアや専門家との交流は、キャリア形成において重要な指針となります。彼らの経験や成功、失敗談を聞くことで、自身のビジョンや目標を明確化し、進むべき方向性を見出すことができます。これにより、自身のキャリアパスを計画し、長期的な目標に向かって着実に進んでいくことが可能となります。さらに、人とのつながりを通じて、新しい仕事の機会やプロジェクトに参加することもあります。人間関係のネットワーキングは、将来の成果や成功につながる重要な要素です。

# タイパやコスパは忘れよう
しかしながら、現代の社会では、タイマネジメントやコスト効率の観点から、無駄な人との接触を避ける傾向があります。特に新型コロナウイルスの影響により、リモートワークやオンラインミーティングが一般的となり、対面での人間関係の形成が制限されています。しかし、無駄だと思われる出会いや関係性には、将来的な成長や学びの機会が潜んでいることも多いのです。

人との出会いや人間関係は、単なる時間とコストの問題ではありません。その瞬間にピンとこない出会いや経験も、後に振り返ってみると、自身の成長や人生の価値観構築において重要なエッセンスとなることがあります。新たな視点やアイデア、他者の経験や成功例からの学びは、自身のキャリア形成やビジョン構築に不可欠なものです。

# 出会いの場は沢山ある
したがって、若手エンジニアにとっては、タイマネジメントやコスト効率を重視する一方で、積極的に他のエンジニアや業界の専門家との対話や交流を求める姿勢が求められます。これは、セミナーやカンファレンスへの参加、技術コミュニティへの積極的な関与、専門分野での研究やプロジェクトへの参加など、さまざまな形で実現できます。さらに、オンラインネットワーキングツールやソーシャルメディアの活用も、人とのつながりを広げるための手段として有効です。

若手エンジニアにとって、他のエンジニアや専門家との交流は、個人の成長やキャリア形成において不可欠な要素です。人間関係の構築を通じて得られる新たな知識、経験、そしてネットワークは、将来の成功への道を切り拓くための貴重な資産となるでしょう。

# まとめ
若手エンジニアにとって、人との対面や人間関係の構築はキャリア形成に不可欠であり、新たな視点や学びの機会を提供します。タイマネジメントやコスト効率を重視する中でも、他のエンジニアや専門家との交流を積極的に求める姿勢が重要です。無駄に思える出会いや関係性も、後に振り返れば成長や価値観構築に貢献することがあります。人間関係の築き方を大切にし、自身の成長とキャリアの発展に活かしていきましょう。

# 最後に
エンジニアの皆さん、エンジニア未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
【JavaScript】西暦を和暦に変換する10のパターン



先日、西暦を和暦に変換することがあり、調べると様々なオプションがあったので、10パターンまとめてみました。

# 変換10パターン

```javascript
const date = new Date('2023/08/01 15:00:03')

// R5/8/1
const japaneseDate = date.toLocaleDateString('ja-JP-u-ca-japanese')

// 令和5/8/1
const japaneseDate2 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  era: 'long'
})

// 令和5年8月1日
const japaneseDate3 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  dateStyle: 'long'
})

// 令和5年8月1日火曜日
const japaneseDate4 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  dateStyle: 'full'
})

// 令和5年
const japaneseDate5 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  year: 'numeric',
})

// R05/08
const japaneseDate6 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  year: '2-digit',
  month: '2-digit'
})

// R5/8/1 午後03:00:03
const japaneseDate7 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  hourCycle: 'h12',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
})

// R5/8/1 午後3:00:03
const japaneseDate8 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  hourCycle: 'h12',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
})

// R05/08/01(火) 15時
const japaneseDate9 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  year: '2-digit',
  month: '2-digit',
  day: '2-digit',
  weekday: 'short',
  hour: '2-digit',
})

// 令和5年08月01日火曜日 15:00:03
const japaneseDate10 = date.toLocaleDateString('ja-JP-u-ca-japanese', {
  era: 'long',
  year: '2-digit',
  month: '2-digit',
  day: '2-digit',
  weekday: 'long',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
})
```

# まとめ

わざわざ「2019年4月だから平成、2019年5月だから令和」みたいな処理を書かなくて済むので、うまく活用したいですね。


# 参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

https://javascript.programmer-reference.com/js-date-wareki/

# 最後に
### GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site?qiita=f8db30ca2bbae3cc5d0f
Raspberry Pi Pico Wでmoddable-avatarを動かしてみた。

# はじめに

スタックチャン2才のお誕生日会へ参加して刺激を受けたのでRaspberry Pi Pico Wでも動かそうと思い、まずはお顔を表示するところから始めました。

https://stack-chan.connpass.com/event/288907/

# moddable-avatar

ほぼこちらの手順通りでした。

https://stc1988.hatenablog.jp/entry/2021/11/20/212608

## moddable SDKの開発環境を構築する

macOSの方はxs-devツールを使用するのが楽です。

https://qiita.com/kitazaki/items/f90ab52161af751f8d50

## TypeScriptでコンパイルできる環境を構築する

```bash
sudo npm install -g typescript
```

## moddable-avatarをgit cloneする

```bash
git clone https://github.com/meganetaaan/moddable-avatar
```

## 必要なライブラリをインストールする

```bash
cd moddable-avatar
npm install
```

## manifest.jsonを編集する

※ 2023年7月31日 PRがマージされ不要になりました。

```json:manifest.json
{
  "build": {},
  "include": ["$(MODDABLE)/examples/manifest_base.json","$(MODDABLE)/examples/manifest_piu.json","$(MODDABLE)/examples/manifest_typings.json"],
  "resources": {
    "*": ["./assets/images/*"],
    "*-alpha": ["./assets/fonts/*"]
  },
  "modules": {
    "*": ["./src/main", "./src/avatar", "./src/marquee-label", "./src/balloon", "./src/emoticon"]
  },
  "preload": ["avatar", "marquee-label", "balloon", "emoticon"],
  "creation": {
    "static": 131072,
    "stack": 512
  }
}
```

## Raspberry Pi Pico Wへインストールする

```bash
mcconfig -d -m -p pico/pico_display_2
```

![F2QZrgeawAAaUkM.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/9b1328d8-822f-e579-c854-e1e7d0c63668.jpeg)


シミュレータでも動作します。

```bash
mcconfig -d -m -p mac
```

![スクリーンショット 2023-07-31 9.09.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/088f0cda-7e10-e24a-b6ea-f98b1cf87bcc.png)
HTMLを詳しく

HTMLについて勉強したのでアウトプットもかねて説明させていただきます。
## HTMLとは
HTMLとはwebページの構造とコンテンツを定義するためのマークアップ言語です。

#### 1 HTMLの基本構造
HTML文書は通常以下のような基本構造を持ちます：
```
<!DOCTYPE html> <!-- 文書のタイプを定義 -->
<html>
<head>
    <meta charset="UTF-8"> <!-- 文書の文字エンコーディングを指定 -->
    <title>ページのタイトル</title> <!-- ページのタイトルを指定 -->
</head>
<body>
    <!-- ここにページのコンテンツを記述 -->
</body>
</html>
```
#### 2 様々なタグ
HTMLには様々なタグがあります。
```
<p>これは段落です。</p>
```
```
<img src="画像のURL" alt="代替テキスト">
```

## セマンティックなHTMLとは
セマンティックHTMLとはHTMLのマークアップを文章の構造や意味に基づいて,適切な意味を持つタグを使って作成するアプローチのこと

セマンティックHTMLでは、タグ自体がコンテンツの意味を反映するように選択します。これにより、webページの構造が明確になり、検索エンジンやアクセビリティの向上にもつながります。

セマンティックHTMLの代表的なタグ
<header>:ページのヘッダー部分を表すタグ
<nav>:ナビゲーションメニューを表すタグ
<main>:ページのメインコンテンツを表すタグ
<article>:独立した記事やコンテンツを表すタグ
<sectionc>:セクションを示すタグ
<aside>:サイドバーや補足情報を表すタグ
<footer>:ページのフッターを表すタグ


## フォームとバリデーション

### フォーム
HTMLのフォームではwebページからユーザーがテキスト入力、ラジオボタン、チェックボックスなどを使ってデータを送信する仕組みがあります。
action:データを送信するURLを指定
method:フォームデータを送信するHTTPを指定します。
```
<form action="/submit" method="post">
  <!-- フォームのコントロール要素がここに入ります -->
</form>
```

### バリデーション
フォームバリデーションはフォームに入力されたデータが正しい値がどうかチェックします。ユーザーが入力値をチェックすることで不適切なデータをサーバーに送信することを防ぎ、データの信頼性を保ちます。
type="url":入力されたデータがurl形式かどうかチェックする
type="tel":入力されたデータが電話番号形式かどうかチェックする
pattern:正規表現を使って入力されるデータが特定のパターンかどうかチェックする
min,max:数値や日付に対して最小値や最大値を指定する
minlength,maxlenght:テキストのフィールドに対して最小文字数や最大文字数を指定する

```
<form>
  <label for="phone">電話番号：</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required>
  <input type="submit" value="送信">
</form>
```
```
<form>
  <label for="age">年齢：</label>
  <input type="number" id="age" name="age" min="18" max="100" required>
  <input type="submit" value="送信">
</form>
```

#### バリデーションはHTML、JS、サーバーサイドどこでした方がいいのか？
セキュリティの観点から見るとHTML,JS,サーバーサイド全てでした方が信用性が保たれる。

クライアントサイドのバリデーションはユーザー体験を向上させることができますが、セキュリティ上の理由で信頼性が低いため、必ずサーバーサイドのバリデーションと併用することが重要です。

さらにサーバーサイドのバリデーションはクライアント側よりも厳しくバリデーション処理をすることが推奨されています。

### HTMLの豆知識
##### 外部JavaScriptファイルを読み込む順番が早くなる方法
defer属性を持つscript要素を使用すると、JavaScriptファイルの読み込みがHTML文書のパース（解析）と同時に行われますが、実行はHTML文書のパースが完了してから行われます。つまり、defer属性がある場合、JavaScriptの実行はHTML文書の読み込みが完了した後に行われるため、ページの表示をブロックすることがありません。これにより、ユーザーエクスペリエンスが向上し、ページの読み込みが高速化されることが期待できます。
```
    <!-- defer属性を持つscript要素 -->
    <script src="my-script.js" defer></script>
```

##### しかしページが外部ファイルが多すぎると
defer属性を持つscript要素は、多くのウェブブラウザでサポートされており、パフォーマンス向上のために利用されることがあります。ただし、注意点として、defer属性を持つscript要素は、複数のファイルがある場合にも読み込まれる順序が保証されないため、依存関係に注意する必要があります。

HTMLの説明は以上です。ありがとうございました。
【Unity】ズームShader

## 概要
表示したTextureを拡大して表示できるShaderです。

![Zoom.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112894/312fdb44-0e9a-f65d-30e8-aeb75cef172b.gif)


## 実装
```
Shader "Custom/Zoom"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Zoom ("Zoom", Range(0.5, 1)) = 0
    }
    SubShader
    {
        Tags {
            "RenderType"="Transparent"
            "Queue"="Transparent"
            "LightMode"="ForwardBase"
            "RenderPipeline"="UniversalPipeline"
        }
        LOD 100

        Pass
        {
            Name "ForwardLit"
            Tags { "LightMode"="UniversalForward" }

            Lighting Off
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha

            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

            struct Attributes
            {
                float4 positionOS : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct Varyings
            {
                float2 uv : TEXCOORD0;
                float4 positionHCS : SV_POSITION;
            };

            sampler2D _MainTex;
            half _Zoom;

            CBUFFER_START(UnityPerMaterial)
            float4 _MainTex_ST;
            CBUFFER_END

            Varyings vert (Attributes v)
            {
                Varyings o;
                o.positionHCS = TransformObjectToHClip(v.positionOS.xyz);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            half4 frag (Varyings i) : SV_Target
            {
                float u = ceil(i.uv.x) * 0.5;
                float v = ceil(i.uv.y) * 0.5;

                float uLerp = lerp(u, i.uv.x, _Zoom);
                float vLerp = lerp(v, i.uv.y, _Zoom);
                half4 col = tex2D(_MainTex, float2(uLerp, vLerp));
                return col;
            }
            ENDHLSL
        }
    }
}
```

## あとがき
ゲーム内でズームする際は大体カメラ側を動かしそうなのであんまり使い道はないのかも
Delta Live Tablesのシルバー・ゴールドテーブルのみを参照するデータベースの作成

Databricksの用語ばかりのタイトルですが。

# Delta Live Tablesとは

SQLやPythonを用いて宣言型で(1段目のテーブルの定義はこうである、2段目のテーブルの定義はこうである)データパイプラインを構築できるソリューションです。

https://www.databricks.com/jp/product/delta-live-tables

# シルバーテーブル、ゴールドテーブルとは

Databricksで提唱しているメダリオンアーキテクチャにおけるテーブルの呼び名です。

https://www.databricks.com/jp/glossary/medallion-architecture

生データを格納するテーブルをブロンズ、クレンジングしたデータを格納するのがシルバー、BIやMLで使用する集計データをゴールドとするのが一般的です。

注意点として、メダリオンアーキテクチャは

- データ品質に言及する有用なカテゴリー分けの仕組みであって、
- データの格納場所を強制する厳密なシステムではない

ということです。何を言っているかと言いますと、「ブロンズ・シルバー・ゴールドテーブルを格納する仕組み」を提供している訳ではなく、ユーザー側での整理学として用いるものです。

ただ、日常業務においては「ゴールドやシルバーは参照するけど、ブロンズは見ないし、むしろエンドユーザーには混乱を招くから隠したい」というニーズもあります。

しかしながら、DLTの仕様ではテーブルを永続化するターゲットスキーマ(データベース)は一つしか指定できないので、ブロンズ・シルバー・ゴールドが全て表示されてしまいます。
![Screenshot 2023-07-31 at 7.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/cd645d1a-2856-405b-46bd-6a5d9248ed48.png)


# 対応策

別のスキーマ(データベース)を作成して、DLTのシルバー・ブロンズテーブルを参照するビューを作成します。

データエクスプローラでスキーマ`silver`を作成します。なお、`gold`を作成する際も同様です。
![Screenshot 2023-07-31 at 7.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/794fe802-4d27-7c91-db93-9d91ae5749b9.png)

SQLウェアハウスを起動して、以下のクエリーを実行します。

```sql
CREATE VIEW takaakiyayoi_catalog.silver.complete_silver_vw AS
SELECT
  *
FROM
  takaakiyayoi_catalog.dlt.complete_silver;
```

ここでは、カタログ`takaakiyayoi_catalog`配下のスキーマ`dlt`に作成されたシルバーテーブル`complete_silver`を参照するビューを`takaakiyayoi_catalog.silver`に作成しています。

これで、スキーマを整理することができます。
![Screenshot 2023-07-31 at 7.53.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/c97c3ca9-e924-6973-c8f6-ec931dd4fd5a.png)

### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
デバッグ中ウォッチに出てきた、　式エバリュエーターでの内部エラーです。　とか、　ローカルの値を取得する際に内部エラーが発生しました。　の対処法について

# どうすればいいのか
マイドキュメント　にある　Visual Studio　のフォルダを消してください。

:::note info
もう一度エラーを見たい場合は、フォルダを元に戻しましょう。
:::


# 経緯
* フォームのインスタンスをウォッチしようとした所、表示したコンテキストメニューに**盛大にブレた左クリック**をしてしまう（**どこを押したのか分からないレベル**）
* 自動変数欄からフォームの項目が消え、ローカル欄では内部エラーとなる。
* プロジェクトを作り直したり再インストールしたりするも直らず。
* とりあえず、エラー文言でググるが解決策が見つからず。
* しかし、公式で以下のページを発見。

https://learn.microsoft.com/ja-jp/cpp/error-messages/tool-errors/expression-evaluator-errors-cxx0000-through-cxx0072?view=msvc-170

* エラー番号などは分からなかったので、翻訳前の原文で改めてググる。
* すると自分と似たような症状を質問してるページを発見。

https://developercommunity.visualstudio.com/t/internal-error-in-the-expression-evaluator-9/1160126

>deleting folder "Documents > Visual Studio 2019"

* 年数は違いますが、ダメ元で試したところ、エラー解消を確認。
* めでたしめでたし。
Arduino UNOと秋月ST7789V2(ATM0130B3(SPI))にアイテムを表示する(drawBitmap)K-15560


Arduino UNOと秋月ST7789V2(ATM0130B3(SPI))にアイテムを表示する(drawBitmap)K-15560

x Adafruit ST7735 を　インストール
x Adafruit GFX Library を　インストール



https://qiita.com/caa45040/items/f2a5dcd8e8b6b4ace141




目的
カラー液晶のテスト



![o_cop633.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/1b924061-f89a-6eb9-bbf5-f48a42356196.jpeg)




接続

3.3V-3.3V(VDD(1))
5V-5V(VDDIO(2))
GND-GND(3)

13 sck- SCK(4)
12
11 mosi-MOSI(5)
10 cs-CS(6)
9 res-RES(8)
8 dc-D_C(7)

リセットとコマンドデータ切り替えが逆なので注意　何の事?


プログラム


```c++



//spi_st7789_BITMAP_TEST1_UNO_uno_1


//ヘッダーファイル
#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7789.h> // Hardware-specific library for ST7789
#include <SPI.h>


//定義
#define TFT_CS        10
#define TFT_RST        9 // Or set to -1 and connect to Arduino RESET pin
#define TFT_DC         8
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);


// ビットマップデータ
uint8_t databytes[8] = 

{

0b01100110,
0b10101111,
0b10111111,
0b11011111,

0b01111110,
0b01111110,
0b00111100,
0b00011000

};


//初期化
void setup() {

  //240x240の液晶を使用する。
  tft.init(240, 240);           // Init ST7789 240x240

}//setup


//メインループ
void loop() {

  // 画面表示をクリア
  tft.fillScreen(ST77XX_BLACK);


  //ビットマップの表示
  tft.drawBitmap(0, 0, databytes, 8, 8,  ST77XX_RED);


  delay(1000); //1秒待つ

}//loop




```
private-isuをVagrantで動かすメモ

# はじめに
ISUCONの練習サービスprivate-isuをVagrantで動かすときに少し詰まったのでその時のメモです。

# 環境
- Ubuntu-22.04
- Vagrant 2.2.19
- Ansible core 2.14.6
- VirtualBox 6.1

# 環境構築
### Vagrantのインストール
```bash
$ sudo apt install vagrant
```

### ansibleのインストール
[AnsibleのDocumentation](https://docs.ansible.com/ansible/latest/installation_guide/installation_distros.html#installing-ansible-on-ubuntu)を参考にします。以下，2023/7/30時点でのコマンドです。

```bash
$ sudo apt update
$ sudo apt install software-properties-common
$ sudo add-apt-repository --yes --update ppa:ansible/ansible
$ sudo apt install ansible
```

### VirtualBoxのインストール
公式サイトから最新版の7.0をインストールしたらvagrant upする際にエラーを吐かれたので，aptで6.1をインストールします。
```bash
$ sudo apt install virtualbox-6.1
```

### Vagrantfileの修正
vagrant upで起動するとバージョン依存関係のエラーが出たので，Vagrantfileの4行目の"ubuntu/focal64"を"bento/ubuntu-22.04"に変更しました。

```bash:Vagrantfile
Vagrant.configure("2") do |config|
  # config.vm.box = "ubuntu/focal64"
  config.vm.box = "bento/ubuntu-22.04"
  config.vm.box_check_update = false
  ...
```

# 起動
Vagrant upで起動します。結構待たされます。
```
$ vagrant up
```

vscodeのremote explorerでsshするために，以下のコマンドでssh configを出力します。
```
$ vagrant ssh-config
```

出力は以下のようになると思うので，これを~/.ssh/configに貼り付けます。
```config:config
Host app
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile hogehoge/private-isu/.vagrant/machines/app/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  PubkeyAcceptedKeyTypes +ssh-rsa
  HostKeyAlgorithms +ssh-rsa

Host bench
  HostName 127.0.0.1
  User vagrant
  Port 2200
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile hogehoge/private-isu/.vagrant/machines/bench/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  PubkeyAcceptedKeyTypes +ssh-rsa
  HostKeyAlgorithms +ssh-rsa
```

### ユーザーの変更
vagrantユーザーのままではvscodeで変更したコードを保存できないので，isuconユーザーでsshできるように変更します。

まずは，そのままvagrantユーザーでsshして，~/.ssh/authorized_keysをコピーします。

```bash
$ cat ~/.ssh/authorized_keys
ssh-rsa hogehogehogehoge......
....
↑これをコピーする
```

次に，isuconユーザーに切り替えてauthorized_keysを追加します。

```
$ sudo su isucon
$ vim ~/.ssh/authorized_keys
↑さっきコピーしたやつを追加して保存する
```

最後に，sshを切断して~/.ssh/configのUserをisuconに書き換えます。

```config:config
Host app
  HostName 127.0.0.1
  User isucon
  ...

Host bench
  HostName 127.0.0.1
  User isucon
  ...
```

これで，vagrant upしてからsshして，コードの修正までを行えるようになったと思います。

# おわりに
ISUCON頑張りたい，，
2023/7/31主にITとかセキュリティの記事

90万サイトが影響、WordPress人気のフォームプラグインに重大な脆弱性(7/29)
https://news.mynavi.jp/techplus/article/20230729-2737379/

京セラの複合機とプリンタに脆弱性、確認とアップデートを(7/29)
https://news.mynavi.jp/techplus/article/20230729-2736906/

GoogleやBingの広告悪用してマルウェアに感染させる攻撃に注意(7/29)
https://news.mynavi.jp/techplus/article/20230729-2737309/

名古屋港のシステム停止、VPNの脆弱性を突かれたか(7/29)
https://www.zaikei.co.jp/article/20230729/731633.html

知識の欠如が招くアイデンティティの侵害、RSAのID IQ報告書で明らかに(7/28)
https://www.jiji.com/jc/article?k=20230727728720&g=bw

委託先のミスで人間ドック受診者301名の情報が閲覧可能に、公立学校共済組合(7/28)
https://cybersecurity-jp.com/news/85867

仕事でよく聞く「AWS」って何のこと？覚えておきたいサービスの内容と利用するメリット(7/29)
https://dime.jp/genre/1620500/

医療データ利活用のルールはどう変わるか：規制改革の議論から(7/29)
https://agora-web.jp/archives/230727100833.html

パソコン乗っ取りの手口とは･･･身代金要求型ウイルス「ランサムウェア」を学ぶ講習会　警察が被害の実態を再現(7/29)
https://newsdig.tbs.co.jp/articles/cbc/631358?display=1

自動車保険会社にもユーザーにもメリット絶大!? いまのドラレコに足りていないものとは？(7/28)
https://kurukura.jp/article/20097-20230728-60/

警視庁「サイバーセキュリティ訓練」がメタバース上で実施可能に！来年稼働(7/28)
https://vrinside.jp/news/post-220336/

Appleを競争法違反と認めた判決を支持するよう、Epicが最高裁に要請(7/29)
https://iphone-mania.jp/news-546872/

75歳男性、1650万円詐欺被害　「携帯がハッキングされ被害が」うその電話何度も　千葉・柏署(7/29)
https://news.yahoo.co.jp/articles/9510b0da494bf48e4b1a31bdd75c69109e4b4a18?source=rss

他人口座に不正アクセスし別の口座に送金で逮捕の男性　不起訴処分　東京地検(7/28)
https://news.tv-asahi.co.jp/news_society/articles/000309360.html
ショートカットからの入力の記事を作成してみるテスト

記事作成テスト
・役割を分けて記述したこと
※規模が小さいから分ける必要がない事も書く


```python:test.pyw
import pyautogui
from time import sleep
import controll_test

# 最初にsleepを入れる事でアクティブウィンドウの変更ができるようになる。
pyautogui.hotkey("alt", "tab")
sleep(0.5)

# ここに入力させたい文字を列挙していく
pyautogui.write('文字列を任意に送信できるよ')
pyautogui.press('tab')
pyautogui.write(controll_test.getSetValue1())
pyautogui.press('tab')
pyautogui.write(controll_test.getSetValue2())
pyautogui.press('enter')
```
```python:controll.py
import sys
import stateChange
import dataRead
import errorMes

counter = 0
getState = stateChange.store_state()
if getState == '':
    stateChange.save_state(counter)
else:
    counter = int(getState)

if dataRead.lengthCheck(counter):
    errorMes.popUpError()
    sys.exit()
setValue1 = dataRead.get_data1(counter)
setValue2 = dataRead.get_data2(counter)
counter += 1
stateChange.save_state(counter)

print(counter)
print(setValue1)
print(setValue2)

# コントローラにしようと思ったけれど、入力する処理の子にしてみよう。
def getSetValue1():
    return setValue1
def getSetValue2():
    return setValue2
```
```python:data_read.py
# ファイルの読み込みは特に何もインポートしなくていい
with open("reserve.dat", "r", encoding="utf-8") as f:
    list = f.readlines()
    print(list)

new_list = []

for i,v in enumerate(list):
    word = v.split()
    new_list.append(word[0])

print(new_list)

def get_data1(counter):
    setIndex = counter * 2
    return new_list[setIndex]

def get_data2(counter):
    setIndex = counter * 2
    return new_list[setIndex + 1]

def lengthCheck(counter):
    checkIndex = counter * 2 + 1
    if len(new_list) < checkIndex:
        return True
    else:
        return False
```
```python:state_change.py

# ファイルを読み取る関数を定義します
def read_first_line(file_path):
    with open(file_path, 'r') as file:
        first_line = file.readline().strip()  # 1行目を読み取り、改行文字を除去します
    return first_line

def replace_first_line(file_path, new_content):
    with open(file_path, 'r+') as file:
        lines = file.readlines()  # ファイルの内容を全て行ごとにリストとして読み取る
        if lines:  # ファイルが空でない場合のみ処理を行う
            lines[0] = str(new_content) + '\n'  # 新しい内容を1行目に挿入し、改行文字を追加する
            file.seek(0)  # ファイルの先頭に移動
            file.writelines(lines)  # リストの内容をファイルに書き込む
            file.truncate()  # ファイルの残りの部分を削除する
        else:
            file.writelines(str(new_content) + '\n')
# この方法だと、存在しない行に追加はできないね。
file_name = 'state.dat'

get_value = read_first_line(file_name)
# print(get_value)
# replace_first_line(file_name, "")

def save_state(count):
    replace_first_line(file_name, count)

def store_state():
    return read_first_line(file_name)
```
```python:error_mes.py
import subprocess 

def popUpError():
    subprocess.Popen(['start','test.vbs'], shell=True)
```
```vbs:errorPopUp.vbs
msgBox("末端まで到達しています")
```
```dat:reserve.dat
000000
000002
001003
001005
```
```dat:state.dat
0
```
ACMで「保留中の検証」から変わらない、からのACMの理解


## はじめに　

Amazon Certificate Manager（ACM）でSSL証明書を発行しようとしたところ、ステータスが「保留中の検証」からずっと変化がなく困りました。　　
調べたところ、CNAMEレコードの登録が必要であることが判明し、実施したところ無事に解決しました。　　
その期にACMが証明書を発行するまでの流れについて調べてみましたので、そこで理解したことについても書きたいと思います。

前提：証明書を発行するドメインはAWSで取得しました。DNSサーバーはRoute53を使用します。


## 「保留中の検証」の解決　　

まず調べたところDNSによる検証の場合、証明書IDをクリックした先の画面で表示されるCNAME名とCNAME値を、Route53に登録する必要があることがわかりました。Route53で手動で値を入力し登録したところ、無事にステータスが「発行済み」に変わりました。　　
その後に気づいたのですが、ACMのコンソールにある「Route53でレコードを作成」をクリックすれば、CNAME名とCNAME値を自動で入力してくれます。気付きませんでした…。　　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3340708/b3697127-ee38-9284-fc4a-fa2f9423cf31.png)


## CNAMEレコードを作成した意味　　

AWSのドキュメントに次のような記載があります。[^1]

>DNS プロバイダーは、ドメインを定義するレコードを含むデータベースを維持します。DNS 検証を選択すると、このデータベースに追加する必要がある 1 つ以上の CNAME レコードが ACM から提供されます。これらのレコードには、ドメインを制御する証拠となる一意のキーと値のペアが含まれています。

>各レコードは、ユーザーのドメインおよびアカウントに固有のものとして作成され、名前と値が含まれます。この値は、証明書を自動更新するために ACM が使用する AWS ドメインを指すエイリアスです。

その他に調べたことも含め、次のように理解しました。　　

ACMは証明書を発行する際に、ドメインの定義状況をDNSプロバイダーに確認しにいきます。もしACMから提供されたCNAMEレコードが登録されていた場合、証明書の申請者がレコードを登録したのだと判断できます。申請者のドメインに対する権限が証明されましたので、ACMは証明書を発行します。

もっと厳密な理解ができるように学んでいきたいと思います…！！



[^1]: https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/dns-validation.html