OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】ふわっと画像を表示させる

前回より時間が少し空きましたが、
今回はJavaScriptでスクロールすると、
ふわっと画像が表示されるというアニメーションを作りました。

まず制作したもの↓






<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExpgEaB" data-user="ri-tama" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ri-tama/pen/ExpgEaB">
  Untitled</a> by ri-tama (<a href="https://codepen.io/ri-tama">@ri-tama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


※上手く表示ができないみたいで、CODEPENのリンクを踏んでいただけると、
　どのようになっているかわかります。原因究明します。(1/5追記)

今回のポイントですが
IntersectionObserverという監視の仕組みを使っております。

説明していきます。
・まず適当な文字と適当な画像を表示できるようHTMLに書いてください。

・画像をふわっと表示させるのが最終目標となりますので
　画像をJSで操作できるように、変数targetに中身を入れます。

```javascript
    const target = document.querySelector('img');

```

・監視する役目の人を一人作ります(=インスタンスを作る)
　ついでに仕事と、そのオプションをセットします。
　
```javascript
    const observer = new IntersectionObserver(callback,options);
    observer.observe('target');

```

・監視の人にtargetを監視せよ、という命令を作ります。
```javascript
    observer.observe('target');

```

・さきほど監視人に与えた仕事の中身を作っていきます(callbackという関数を作ります)

```javascript
function callback(entries){
  console.log('entries[0]'); //動きを確かめるためにここは書いてます。
  
  if(entries[0].isIntersecting){
     entries[0].target.classList.add('appear');
    } else {
     entries[0].target.classList.remove('appear');
    }
/*if文の中身は、entriesという引数の中のisIntersectingを監視し
  それがtrueなら、cssのappearをtargetのクラスに追加し、
  falseならappearを分離させます。*/
```
・完成品ではif文以下はこのように記述しています。(callback関数にobsという引数も追加してます)

```javascript
if(!entries[0].isIntersecting){
    return;
  } 
//!で論理否定しているので、falseならreturnで処理を止めるよう指示しています。
  entries[0].target.classList.add('appear');
//ここは上と変わらず。
  obs.unobserve(entries[0].target);
//obsという引数を与えて、1度処理が終わった後は監視を止めるようにしています。

```

JSの中身について説明しました。
あやふやな部分も少しある為、また学習しながら追記もしていきます。
ちなみに参考文献ですが



https://dotinstall.com/

ドットインストールさんの詳解JavaScript Intersection Observer API編
を学んだうえで、自分の解釈を取り入れつつ今回の記事を投稿しました。
備忘録として、アウトプットとして、誰かの参考になれば、と思い積極的に今後も書いていきます。

次はUI回りを作成できるようにしたいので、勉強していきます。
最後まで読んでいただきありがとうございました！
Spring BootでHello Worldをブラウザで表示するまでの流れ

## はじめに
今回は、Spring Bootで画面に「Hello World」を表示するまでの流れを書いていきます。
こちらは、VSCodeでSpring Bootプロジェクトを開始した後からの流れを書いていきます。
(今回はSpring Securityを依存関係に含んでいないのでログイン画面は表示されません)

プロジェクト開始までの流れはこちらの記事を参考にしてみて下さい。↓
https://qiita.com/hukuryo/items/0bb58861751db3c20d26

## HTMLテンプレートを作成
まず「Hello World」を表示するHTMLを簡単に書いていきます。
```:main/resources/templates/hello.html
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
```

## Controllerの作成
次に、Controllerクラスを作成し、先ほどのHTMLテムプレートの表示をします。
以下のようにコントローラーファイルを作成して、コンタロラークラスを書いていきます。
VSCodeの場合、コントローラークラスを定義すると、自動でパッケージやクラス名の定義などはしてくれます。

```:main/java/com/example/demo/controller/HelloController.java
// パッケージ名が自動で追加される↓
package com.example.demo.controller;

// クラス名が自動で追加される↓
public class HelloController {
    
}

```

コントローラクラスが定義できたら、中身を書いていきます。

```:main/java/com/example/demo/controller/HelloController.java

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
//コントローラークラスであることを定義
@Controller
public class HelloController {
　　 //今回はURLに/localhost:8080/hello/というリクエストが来たらhelloメソッドを動かしますと指示している
    @GetMapping("/hello")
    public String hello(){
        return "/hello";
    }
}
```
使われているアノテーションの説明は以下の通りです。コード内の説明も含めて読んでみて下さい。
アノテーションとは、Springで様々な機能を提供してくれるもので@〜と記述します。(このコードだと@Contorollerなど)

| アノテーション名 | 機能説明 |
|:--:|:---:|
|@Contorller|コンピュ-ターにコントローラークラスであることを認識させるためのもので、コンピューターに「このクラスはコントローラークラスです！」と教えてあげているイメージ|
|@GetMapping|ブラウザからgetリクエストが送られてきた時にこのコードを動かしますという定義をするためのアノテーション。|

## Hello Worldを表示
それでは、ブラウザでHello Worldが表示されるか確認してみましょう。
ブラウザのアドレスバーに以下のURLを入力して下さい。
http://localhost:8080/hello/
そうすると、、、
![スクリーンショット 2023-01-05 11.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/93a85c24-4fd1-a82a-9ced-c76b581c8db2.png)

このようにHello Worldが出力されました！
3大クラウドサーヴィスについて簡単に解説(学習まとめ)

今回は、(今更ですが、)巷で話題の「３大クラウドサーヴィス」について解説いたします。
非常に雑で、簡易な説明で申し訳ないのですが・・・(汗)。
時間の無い方や簡単に下調べを済ませたい方にどうぞ・・・(言い訳)。
それでは、よろしくお願いいたします～～。

①「AWS」。Amazonが提供している。Amazonが自社で構築したシステムを一般向けに開放したもの。
同社はECサイトの構築や運用などのノウハウがあるので、同社と業態の近い企業にとっては好都合？。
コンピューティング、ストレージ、ネットワーク、データベースなどの各機能を柔軟にチョイスできる。
ちなみに、３大クラウドサーヴィスの中では最も歴史が長く人気が高いので技術資料・ノウハウが豊富。

②「GCP」。Googleが提供している。Googleのカレンダーやスプレッドシートの機能を連携できる。
同社の強みであるページ検索や地図検索も利用できるのでスクレイピングなどで威力を発揮しそう。
ちなみに、クラウドサーヴィスとしては後発なので技術資料や活用ノウハウが少ないのが残念・難点。

③「Azure」。Microsoftが提供している。ExccelやWordなどの各Office製品との親和性が高い。
ユーザーが蓄積したデータからのナレッジマイニングをAI(＝エージェント)が支援してくれる。
ちなみに、日本の政府が自国のシステムをAzure上で稼働・運用しようとしているとか・・・。

WebアプリやWebシステムの構築に必要な基本的な機能については各社足並みをそろえているようです。
しかし、各社によってそれぞれの機能に付いている名前が当然違うので憶えるだけでも大変ですよね。

以上が解説となります。
また懲りずに記事を書いていきたいと思います。
また、今後ともよろしくお願いいたします～～。
Windowsでフォルダー名一覧取得など

# 特定フォルダー直下のフォルダー名一覧

```bat
dir /ad /b "C:\Users\d\Desktop"
```

```/a``` は属性絞り込みのオプション。
つまり、 ```/ad``` でフォルダーのみに絞り込んでいる。

```/b``` は名前のみ表示するオプション。
```/b``` を付けないとヘッダー、フッター、更新日時などの情報も表示されてしまう。
純粋にフォルダー名だけ取得したいので ```/b``` を付けている。


# 特定フォルダー直下のファイル名一覧

```bat
dir /a-d /b "C:\Users\d\Desktop"
```

```/a-d``` とすることで ```/ad``` の逆ができる。
（フォルダーを除外してファイル名のみ）


# 参考サイトさん

https://atmarkit.itmedia.co.jp/ait/articles/0412/04/news014.html

# バージョン

Windows 10 Pro 21H2 OSビルド 19045.2364
Azure Administrator(AZ-104)：Azure での ID とガバナンスの管理「Azure ADユーザアカウント」

Microsoft Learnを用いたMicrosoft Azure Administrator(AZ-104)の試験内容をまとめる投稿です。
この投稿ではMicrosoft Learnで学ぶ内容をできるだけ簡潔にまとめております。
Azureの勉強を一から始め、AZ-900取得後の資格としてAZ-104取得を目指している方の参考になれば幸いです。
※AZ-900の内容は本投稿では省略しております。再度復習したい方は下記をご参照ください。
[Azure Fundamentals(AZ-900)：試験合格に向けた学習内容のまとめ](https://qiita.com/fsd-jume/items/e4ec76959adb547ac5e8)

## 今回の学習内容
**◆「Azure ADユーザアカウント」**
◇対応するMicrosoft Learn ラーニングパス
[AZ-104:Azure での ID とガバナンスの管理](https://learn.microsoft.com/ja-jp/training/paths/az-104-manage-identities-governance/)
◇対応するモジュール
[ユーザー アカウントを作成する](https://learn.microsoft.com/ja-jp/training/modules/configure-user-group-accounts/2-create-user-accounts)

※前回の投稿は下記から確認できます。
[Azure Administrator(AZ-104)：Azure での ID とガバナンスの管理「Azure ADのセルフサービスパスワードリセット」](https://qiita.com/fsd-jume/items/e3b7e1cfd6878a59bc13)

## Azure ADユーザアカウント
### ユーザアカウント
・Azureリソースにアクセスしたいすべてのユーザにユーザアカウントが必要
・ユーザアカウントにはサインオンプロセス中の認証動作に必要な情報がすべて含まれている

### ユーザアカウントの種類
**◆クラウドID**
・ユーザアカウントの登録先：Azure ADのみ
・含まれるユーザ
　-管理者アカウントのユーザ
　-組織の一部として管理されているユーザ
　-外部のAzure ADで定義されているユーザ
・プライマリディレクトリから削除されると、そのユーザアカウントも削除

**◆ディレクトリ同期ID**
・ユーザアカウントの登録先：オンプレミスのAD
・Azure AD Connectを介してAzure ADと同期

**◆ゲストユーザ**
・ユーザアカウントの登録先：Azureの外部(他のクラウドアカウント、Microsoftアカウントなど)
・招待することで追加可能(B2Bコラボレーション)
・外部ベンダや請負業者がAzureリソースにアクセスしたい場合に使用

### ユーザアカウント選択の考慮事項
**◆ユーザが定義される場所について検討**
・ユーザアカウントが登録されている場所によって選択

**◆外部共同作成者のサポートを検討**
・外部から組織内のAzureリソースへアクセスする人がいる場合に、ゲストユーザアカウントを使用
・ゲストユーザアカウントが不要になった場合は、アカウントとアクセス特権を削除可能

**◆ユーザアカウントの組み合わせを検討**
・組織のビジネス要件に合わせて、ユーザアカウントをそれぞれ実装

## 次の学習内容
**◆Azure ADユーザアカウントの管理**

https://qiita.com/fsd-jume/items/b21376497d7047620093

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/6eda24728c9c03c36bc3
Hubspotで日時プロパティを作る方法

社内で「問合せの時間をプロパティ値に持ちたい」という要望があり、
時間データをプロパティに入れるためにした解決方法


# 背景: プロパティ作成画面からは時間のついたプロパティは作れない

[よくある質問（FAQ）| HubSpot APIドキュメント](https://developers.hubspot.jp/docs/api/faq)

> HubSpot上に作成したdate pickerプロパティーは常にdateプロパティーになるため、datetimeプロパティーの唯一の作成方法はAPIを使用することです。

つまり、管理画面上からは、日付までもったプロパティしか作成できず
日時まで保存したくばAPIを使ってください

とのこと

# 日時プロパティの作り方

## (1) プロパティ作成用の非公開アプリを作る
[非公開アプリ | HubSpot APIドキュメント](https://developers.hubspot.jp/docs/api/private-apps)
作成方法はこちらから↑

スコープは **crm.schemas.contacts.write**のみでOK

## (2) プロパティ作成のAPIを叩く
API Docから Create Propertyのエンドポイントを叩いていきます

[POST/crm/v3/properties/{objectType}　CRM API | Properties](https://developers.hubspot.com/docs/api/crm/properties)


Endpointsのタブに切り替えて、
Create a propertyの項目まで移動します

### Parametersの項目名を埋めていきます
今回は日時のプロパティを作りたいので
 - type: datetime
 - fieldType: date
とします
![スクリーンショット 2023-01-05 9.55.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108154/8d252753-5a3e-6ee5-7434-f05335b9496e.png)

### APIを実行する

![スクリーンショット 2023-01-05 10.25.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108154/7755a0ec-455f-4d9e-6d40-5cfb12322275.png)

入力してsend requestからAPIを実行できます

非公開アプリ側で200のステータスログがあれば成功しています
![スクリーンショット 2023-01-05 11.00.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108154/ba5b6f08-d9d6-9191-f5ac-024f2a59d9ab.png)


### プロパティが作成されていることを確認する
プロパティの管理ページからプロパティが作成されていることを確認できたらOKです
![スクリーンショット 2023-01-05 10.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108154/6e71b5bb-2714-b9f2-8db4-b8bec03886e8.png)


試しにAPI経由で値を入れたところちゃんと日時まで入ってました(ここのやり方はまた別途)
![スクリーンショット 2023-01-05 11.05.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108154/4df6cbbf-a635-e9ae-fc44-cc6c2144d76f.png)

# 最後に
弊社では、一緒に働いてくれるエンジニアを募集しています。
↓最新技術や自社開発に興味のある方はこちらから↓
[Wantedly - スタジオアンビルト株式会社](https://www.wantedly.com/companies/studiounbuilt)

こんなWebサービスを作っています。
・[マドリー](https://madree.jp/)
・[Studio Unbuilt](https://www.studiounbuilt.com/)
go言語 ent migrationメモ

golang + ent のmigrationメモ

```hoge.go
func (Hoge) Fields() []ent.Field {
	return []ent.Field{
        field.String("name").Optional().Annotations(entsql.Annotation{Size: 200}),
    }
}
```
- null可
.Optional()

- varcharのmax length
.Annotations(entsql.Annotation{Size: 200}),
【Docker✖️M1】no matching manifest for linux/arm64/v8 in the manifest list entriesを解決(arm/amd/rosetta)

# 概要
* M1チップとDockerの相性について方々で記事が書かれていますが、いざ自分で作業しながら調べていると理解が深まったので、残しておきます。（M1、Arm64、Rosettaあたり）

# 環境
* Mac
    * 機種ID：MacBookPro18,3
    * macOS：Monterey
    * チップ：Apple M1 Pro
    * メモリ：16GB
* Docker: version 20.10.21
* Docker Compose: v2.12.1

# エラー内容
* `docker compose up -d`コマンド実行時に以下エラーが表示された。
* 利用しようとしたコンテナイメージは、mysql:5.7。

```terminal
no matching manifest for linux/arm64/v8 in the manifest list entries
```

# 原因の追求
* 原因は、M1のCPUがmysqlイメージに対応していないことでした。
* 2020年後期より、それまでインテルのチップ（Intel Core i5とかのあれですね）を利用していたMacがARMアーキテクチャーを採用した独自のプロセッサー（「Appleシリコン」と呼ばれています）を搭載するようになりました。
* ARMはiPhoneなどに採用されており、CPUパフォーマンスが圧倒的に処理速度が速いと言われています。
* ただし、ARM64で動かないイメージもあります。その場合は`--platform linux/amd64`オプションによってIntelイメージをエミュレーション上で動かすことができる、と公式にも記載があります。mysqlイメージについては、多くの方が同様に対応しているようです。
    * 公式：[Install on Mac](https://docs.docker.com/desktop/install/mac-install/)
    * [M1 mac で MySQL コンテナを使う方法](https://toyo.hatenablog.jp/entry/2022/03/02/234159)
* メーカー、CPU、命令セットあたりの関係性、M1チップやRossettaについては、こちらのサイトがとてもわかりやすかったです。x86とかx86_64とかわかりづらい(笑)ですが、簡潔にまとまっています。
    * [CPU と命令セットってなに？](https://zenn.dev/suzuki_hoge/books/2021-07-m1-mac-4ede8ceb81e13aef10cf/viewer/1-cpu-and-is)

* 同じサイトですが、こちらの表が一番わかりやすい。（厳密にいうと色々あるとのことですが、これで十分だと思います！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/3fbcde80-80ba-7700-56df-e546ebaa6f8f.png)
　画像参照元：[Apple Silicon と M1 チップってなに？](https://zenn.dev/suzuki_hoge/books/2021-07-m1-mac-4ede8ceb81e13aef10cf/viewer/2-apple-silicon-and-m1-chip)

# 解決方法
* `docker-compose.yml`のservices>mysql（db)以下のようにplatformを指定することで、解決しました。


```yaml 
platform: linux/amd64
```

* 参考記事：[no matching manifest for linux/arm64/v8 in the manifest list entries](https://zenn.dev/marumarumeruru/articles/55173a98863d4e)

# 備忘録
* CPU周りのハードウェアのタイプを表示するunameコマンドは以下の通り。
    * `uname -m`
    * 自分の場合は、`arm64`と返ってきます
* [Docker Hub](https://hub.docker.com/_/mysql/tags)に行けばイメージのアーキテクチャ一覧を確認することができます。
    * 対象イメージを選択→Tagsタブクリック→OS/ARCHの項目から確認可能
    * 2023.1.5時点では、mysql:5.7は以下が表示されています。（バージョンによって異なる）
        * `linux/amd64`
* Rosettaについて（Intel用のバイナリ・ARM64用のバイナリの変換技術）
    * Rosetta：PowerPCからIntelアーキテクチャに移行したときに使われたもの（2004年）
    * Rosetta 2：IntelアーキテクチャからApple Siliconに移行したときに使われたもの（2020年）
PHPerが学ぶPython② クラス

うっすっす。豚野郎です。
今回は前章の続きです。

https://qiita.com/pig_buhi555/items/301f7c8eabd1a5fd121f

変数・配列がわかれば、次はクラスかな？と思い書いていきます。

<font color="Red">※ 注意：内容はPHPか何かの言語を書いたことがある方向けなので、
説明を割愛している箇所は多々ありますので、ご了承ください。</font>

**バージョン：3.9.1**


# 1. クラス
```class.py
class Sample:
    class_test = 'クラステスト'
    # 第一引数は必須。慣習的にself
    def test(self, test):
        print(test)

# Sampleクラスのclass_testを使用
test = Sample.class_test

# インスタンス化
sample = Sample()

# テストメソッド呼び出し
sample.test(test)
```
```
$ python class.py
クラステスト
```
# 2. コンストラクタ
```class.py
class Sample:
    # コンストラクタ
    def __init__(self, test):
        # selfはインスタンス自身
        self.test = test

# インスタンス化
sample = Sample('テスト')

print(sample.test)
```
```
$ python class.py
テスト
```

# 3. 継承
```class.py
# 親クラス
class Parent:
    def test(self):
        print('親クラス')

# 子クラス(親をクラス継承)
class Child(Parent):
    def test(self):
        print('子クラス')

    def call(self):
        super().test()

# インスタンス化
child = Child()

# testメソッドを呼び出しオーバーライドされていることを確認
child.test()

# 子クラスから親クラス呼び出し
child.call()
```
```
$ python class.py
子クラス
親クラス
```

# 感想
まだここまでは、他の言語と動きは変わらないのですんなり理解できました。
[Microsoft Teams]Power Appsアプリを「同僚と共有する」

Microsoft Teamsのチーム内でPower Appsアプリを作成すると、Power Platformの環境が作られます。これを「Dataverse For Teams 環境」と呼びます。ここにアプリやテーブルを作成した場合、アクセスできるのは当該チームのメンバーになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/2bca1954-d697-c39d-6653-37dcedfb100d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/81da79ea-7dd7-93ae-cc69-1f85bd8d96e9.png)

セキュリティの観点からはDataverse for Teamsのアクセス権はTeamsチームで管理すべきですが、アプリをチーム外のメンバーに共有したい場合、「同僚と共有する」という機能が利用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/7bde3888-f49e-7239-0d83-fae7c917b3bd.png)

以下のようなポップアップができます。

- セキュリティグループの入力または選択…セキュリティグループまたはDataverse for Teamsが展開されている Office 365 グループ（チーム）が選択できます。
- 同僚が使用できる…共有するアプリを選択できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/baf39ef3-39e4-dfcd-5a4e-ba331b005b2d.png)


共有された同僚（グループ）の人はアプリを追加することができるようになります。たとえば、チーム（Office 365 グループ）に共有した場合、そのチームでアプリが利用できるはずなので見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/7a937c77-5eb9-abee-2e9a-d30139e81fbd.png)

この状態で共有されたチームのタブにアプリを追加しても、「元のチームには所属していない」ユーザーがアクセスすると、Dataverse for Teams の中身にはアクセスできません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/c8e46e2c-6180-0994-a662-a03828acc6ac.png)

別途テーブルごとにアクセス権を設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/1ca19bac-27b5-f38b-50e2-cbc2ba1edfc0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/62f30ed7-a13a-f04a-1a7c-da1237f9ed22.png)

これでアクセスできるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/f4d19d9b-a24a-9fa5-5204-0c9bfb23d038.png)

# まとめ

Dataverse for Teams 環境のアプリは基本的にはチーム内のユーザーのみがアクセスできる。
「同僚と共有」することによって、ほかに使えるグループを*１つ*指定できる。
テーブルについては同僚アクセス権を別途設定することができる。
草莽Erlang ── 06. マップ

口で言うより行うことがErlang習得への近道と信じています。

https://qiita.com/mnishiguchi/items/9237780e849d80a85e11

## マップとは

キーと値の関連付けを持つ複合データ型です。どんな型のキーも使え、順序付けされません。 マップは`＃{}`構文で定義することができます。

```erlang
> M1 = #{name => "Inoki", id => 123, birthday => {1943, 02, 20}}.
#{birthday => {1943,2,20},id => 123,name => "Inoki"}

> maps:get(name, M1).
"Inoki"

> maps:update(name, "Antonio Inoki", M1).
#{birthday => {1943,2,20},id => 123,name => "Antonio Inoki"}

> map_size(M1).
3
```

https://www.erlang.org/doc/reference_manual/data_types.html#map

https://www.erlang.org/doc/reference_manual/expressions.html#map_expressions

変数をマップのキーにすることもできます。

```erlang
> Key = "hello".
"hello"

> #{Key => "world"}.
#{"hello" => "world"}
```

重複したキーが追加された場合は、前の値が置き換えられます。

```erlang
> #{foo => "bar", foo => "hello world"}.
#{foo => "hello world"}

```

マップの更新のための固有の構文があります。便宜上「更新」と言っていますが、実際には新しいマップが作成されます。

```erlang
> M2 = #{aisatsu => "Hello", message => "How are you?"}.
#{aisatsu => "Hello",message => "How are you?"}

> M2#{message => "Genki desu ka----!"}.
#{aisatsu => "Hello",message => "Genki desu ka----!"}
```

マップ操作のための関数は`maps`モジュールにあります。

https://www.erlang.org/doc/man/maps.html

## Elixirにも挑戦したい

闘魂ElixirシリーズとElixir Schoolがオススメです。

https://qiita.com/torifukukaiou/items/3b65e5c04fa8c55f526e

https://elixirschool.com/ja

https://qiita.com/piacerex/items/09876caa1e17169ec5e1
Applicative Functor 整理

#### Functor 
Functorは文脈がついた値を写すもの。写すだとピンとこなければ文脈を損なわずに中身の値を変えれるものと考えても良い。
Maybeという「値があるかもしれないしないかもしれない」文脈に、関数をつかって中身だけ変えるなんてことができる。これを写すと表現している。
```haskell
ghci> fmap (+3) (Just 3)
Just 6
ghci> fmap (+3) Nothing
Nothing
```
できること：通常の関数で、ファンクターの中の値を写す

#### Applicative Functor 
文脈がついた値を文脈がついた関数で写すもの。
値だけではなく関数にも文脈がついている場合に使える
Functorの中身が関数で、その関数を別のファンクターの中の値に適応させたいって時に使う。
```haskell
ghci> Just (+3) <*> Just 9 -- <*>はApplicativeの関数（後述)
Just 12
```
できること：ファンクターの中の関数で、別のファンクターの中の値を写す
Functorの強化版といわれる。やれることが多いFunctor。
<br>

#### 定義
```haskell
ghci> :i Applicative Functor 
type Applicative :: (* -> *) -> Constraint
class Functor f => Applicative f where
  pure :: a -> f a
  (<*>) :: f (a -> b) -> f a -> f b
```
上記定義のfは全て型コンストラクタ。
fはFunctorに属してなければならない = すべてのApplicativeはfmapが使える = ApplicativeであればFunctorである。
pureはaをApplicativeにする関数 - aをApplicativeの中に入れる - aにApplicativeの文脈をつける。など表現される。 Applicativeと言ってはいるが概念としてFunctorと思っておいて良い。
<br>
```haskell
Functor      fmap :: (a -> b) -> f a -> f b 
Applicative  (<*>) :: f (a -> b) -> f a -> f b 
```
この比較でもイメージできるかもだが、(<*>) は fmapの1個目の引数も Functorにしたもの。(a->b)関数に文脈がついているなんて表現する。
<br>

```haskell
ghci> Just 3 + Just 4 -- できない
```
こういう文脈付きの値の中身を計算する方法はFunctorとApplicativeでそれぞれ以下。
```haskell
ghci> fmap (+3) (Just 4)
Just 7
```
```haskell
ghci> pure (+) <*> Just 3 <*> Just 4
Just 7
```
pure f <*> x は fmap f x　と等価、この書き方はよく使う（らしい）ので中間演算子<$>が用意されている。
```haskell
ghci> (+) <$> Just 3 <*> Just 4
Just 7
```
[Rider/AndroidStudio]フォントの設定

# 概要
JetBrainsのIDE、RiderやAndroidStudio等のフォント設定についてのまとめです。
# 本文
### エディターのフォント
![スクリーンショット 2023-01-05 8.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/bc028c94-0083-22ac-c897-46d6f4e94771.png)
JetBrains Rider > Preferences
![スクリーンショット 2023-01-05 8.43.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/22bc20cc-4c44-28ef-6b5b-2896291cf02f.png)
Appearance&Behavior > Appearance
![スクリーンショット 2023-01-05 8.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/a30cf775-44bc-2e94-9614-ebb55fcd6ecc.png)


### コードのフォント
![スクリーンショット 2023-01-05 8.43.16 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/d3edab00-b7ae-3251-0ab8-74a7fe57a7bc.png)
JetBrains Rider > Preferences
![スクリーンショット 2023-01-05 8.43.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/d9129c7e-1054-800a-3816-37f4e4516c16.png)
Editor > Font
もしスクショ上部のように警告メッセージが表示されていたらフォントの設定を変更しても反映されないと思います。その時は警告メッセージのリンク先へ飛んでください。
![スクリーンショット 2023-01-05 8.44.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/64a14bea-9ac8-435e-3baa-ff028a45f828.png)
リンク先の画面上部Schemeに現在選択中のテーマが表示されています。FontやSizeを変更することでフォントを設定することができます。
(使いたいテーマを変更する時はAppearance&Behavior > Appearanceで設定してください)
![スクリーンショット 2023-01-05 8.44.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/85dfb31b-3e7c-9ffb-287d-cb98bb771f00.png)

:::note info
commandキーを押したままマウスのホイールを上下に回転させることでもフォントサイズを変更できます。
（この方法は一時的なものです。IDEを再起動すると元に戻ります。）
:::

### 個人的おすすめフォント（日本語・英語・記号が見やすい）
Verdana(コードのフォントには向かないですがエディタ側のフォントに良い感じです)
ネストしたObjectをflatにする

参考にした記事
- [JavaScriptでネストされたオブジェクトをフラットにする関数](https://note.com/digiholic_life/n/n583c9356c502)
- [Flatten JavaScript objects into a single-depth Object](https://www.geeksforgeeks.org/flatten-javascript-objects-into-a-single-depth-object/)

## 結果１（自作 冗長）
~~~

export const makeFlatObject = (
  preobj: Record<string, unknown>,
  parentProperty?: string
):Record<string, unknown>  => {
  const initialObject = {};

  const makeObject: Record<string, unknown> = Object.entries(preobj).reduce(
    (previousValue, currentValue, _index, _origin) => {
      const result =
        // 現在の値のvalueがobjectか？
        typeof currentValue[1] === "object"
          ? // objectの場合、その中身は空ではないか？
            Object.keys(currentValue[1] as Record<string, unknown>).length === 0
            ? // 空の場合はvalueに当たる部分が無いとkeyも消されてしまうのでvalueにundefinedを入れてkeyが消えないように保持する
              {
                ...previousValue,
                ...{
                  [`${
                    parentProperty !== undefined
                      ? parentProperty + "_" + currentValue[0]
                      : currentValue[0]
                  }`]: undefined,
                },
              }
            : {
                // からじゃ無い場合は中身のあるobjectなのでmakeFlatObjectに渡してネストした要素がフラットになるまで何回でも回す
                ...previousValue,
                ...makeFlatObject(
                  currentValue[1] as Record<string, unknown>,
                  currentValue[0]
                ),
              }
          : {
              // そもそもobjectじゃない場合、純粋な値のはずなので{key:value}という形になるように整えて前回の値（作成しているflatなobject）に追加する
              ...previousValue,
              ...{
                [`${
                  parentProperty !== undefined
                    ? parentProperty + "_" + currentValue[0]
                    : currentValue[0]
                }`]: currentValue[1],
              },
            };

      return result;
    },
    // initialObject 初期値 ここに引数を用意しなければreduceに渡された配列の０番目になる 一番最初のpreviousValueに入る値
    initialObject
  );

  return makeObject;
};

~~~

## 結果２（メンターから頂いた解答：掲載許可済み）
~~~
export const flattenObjWithGenerics = <T extends Record<string, unknown>>(
  obj: T,
  prefix = ''
): Record<string, unknown> => {
  return Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? prefix + '.' : '';
    if (typeof obj[k] === 'object' && obj[k] !== null) {
      Object.assign(
        acc,
        flattenObjWithGenerics(obj[k] as Record<string, unknown>, pre + k)
      );
    } else {
      Object.assign(acc, { [pre + k]: obj[k] });
    }

    return acc;
  }, {});
};
~~~

自分の場合Object.entriesを使用してkeyもvalueも取ってきていたがそもそもkeyだけでいい模様
コード量が多くなればなるだけ読み辛くなるのでもっとスマートに書けるようにならないとほんと・・・
プルダウンで変更の前、後又は両方のそれぞれを表示するhtml, css及びJavaScript

```html:contents.html
<head>
  <link rel="stylesheet" type="text/css" media="all" href="all.css">
  <script type="text/javascript" src="functions.js"></script>
</head>
<body>
  <div id="nav">
    <label for="before-after">新旧：</label>
    <select onclick="holdBeforeValue(this.value)" onchange="replaceClass(this.value)" id="before-after">
      <option value="before">旧</option>
      <option value="comparison" selected>比較</option>
      <option value="after">新</option>
    </select>
  </div>
  <div id="main">
    <p>柑橘類に分類される果物の例は、蜜柑や<del class="comparison">林檎</del><ins class="comparison">檸檬</ins>である。</p>
  </div>
</body>
```

```css:all.css
del.before{
  text-decoration: none;
}
del.comparison{
  color: red;
  text-decoration: line-through;
  text-decoration-color: red;
}
del.after{
  display: none;
}
ins.before{
  display: none;
}
ins.comparison{
  color: red;
  text-decoration: underline;
  text-decoration-color: red;
}
ins.after{
  text-decoration: none;
}
```

```JavaScript:functions.js
// プルダウンリスト変更前の値を保持するためのグローバル変数
var $glOldValue;

// onclick時にプルダウンリスト変更前の値をグローバル変数に格納
function holdBeforeValue($inputValue) {
  $glOldValue = $inputValue;
}

// onchange時にclassを置換
function replaceClass($newClass){
  // onclick時の取得した変更前の値をグローバル変数から取得
  var $oldClass = $glOldValue;

  //<DEL>タグ
  var $targetElements = document.getElementsByTagName("DEL");
  for( var $i = 0; $i < $targetElements.length; $i++ ) {
    // IEではreplaceが未実装なのでif文で実装
    // $targetElements[$i].classList.replace($glOldValue, $newClass);
      if ($targetElements[$i].classList.contains($oldClass)) {
        $targetElements[$i].className = $targetElements[$i].className.replace($oldClass, $newClass);
      }
  }

  //<INS>タグ
  var $targetElements = document.getElementsByTagName("INS");
  for( var $i = 0; $i < $targetElements.length; $i++ ) {
    // IEではreplaceが未実装なのでif文で実装
    // $targetElements[$i].classList.replace($glOldValue, $newClass);
      if ($targetElements[$i].classList.contains($oldClass)) {
        $targetElements[$i].className = $targetElements[$i].className.replace($oldClass, $newClass);
      }
  }
}
```
Elixirから覚えるJavaScript　〜filter関数〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はfilterを見てみたいと思います

お題
[1, 2, 3, 4, 5]の中から[3, 4, 5]を抽出

# Elixir

```elixir
x = [1, 2, 3, 4, 5]
y = Enum.filter(x, fn x -> x > 2 end)
IO.inspect(x)
IO.inspect(y)
```

```elixir:実行結果
[1, 2, 3, 4, 5]
[3, 4, 5]
```

# JavaScript

```javascript
x = [1, 2, 3, 4, 5]
y = x.filter((x) => x > 2)
console.log(x)
console.log(y)
```

```javascript:実行結果
[ 1, 2, 3, 4, 5 ]
[ 3, 4, 5 ]
```


無事に同じ結果になりました

https://qiita.com/t-yamanashi/items/263b53d889dc5f7ddf17
CloudTrailのログをAthenaで分析するための方法

## はじめに
S3バケットに保管されているCloudTrailのログをAthenaからクエリを実行して参照する方法を後述
![スクリーンショット 2023-01-05 11.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/18850e62-99a5-4c8f-833e-51bf1d4827a4.png)


## 実装方法
* 証跡からログを保管しているS3バケットを確認
![スクリーンショット 2023-01-04 22.48.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/a99e56b5-9e7c-2d65-94ed-6d6c88e486b9.png)

* イベント履歴から、「Athena テーブルを作成」をクリック
![スクリーンショット 2023-01-04 22.43.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/da8fb2f1-975a-75c2-ab89-8506551aa0d3.png)

* 「ストレージの場所」から対象のS3バケットを選択して、「テーブルを作成」をクリック
![スクリーンショット 2023-01-04 22.50.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/42b79f0d-841d-3ef3-05b2-f23e2b49105e.png)

* 正常にテーブルが作成されたことを確認
![スクリーンショット 2023-01-05 7.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/3724b4e6-a617-2220-6b34-fc41fc199a37.png)

* Athenaの画面に遷移して、対象テーブルの「テーブルをプレビュー」をクリック
![スクリーンショット 2023-01-05 7.58.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/525799de-4b65-5235-367a-30e938a9c503.png)

* クエリを実行して、CloudTrailのログが参照できることを確認
![スクリーンショット 2023-01-05 8.00.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263017/6d7166da-b379-350a-b05a-b77f4bd4f2d4.png)
Pythonでキーボードの割り込みを受け取る

# Pythonでキーボードの割り込みを受け取る

## はじめに
Pythonでキーボードの割り込みを受け取る方法をご紹介します。Pythonでキーボードを操作する方法について解説し、実際に実装例をご紹介します。

## msvcrtとは
msvcrtは、Windows環境で使用するマイクロソフト公式のCランタイムライブラリです。msvcrtを使用することで、PythonからC言語と同等の機能を使用することができます。

## msvcrt.kbhit()とは
msvcrt.kbhit()は、msvcrtモジュールの1つの関数です。この関数を使用することで、キーボードの入力があるかどうかを調べることができます。

## 実装例1
msvcrt.kbhit()を使用して永久ループ中にキー入力を受け取る処理を書いてみましょう。

```python
import msvcrt

while True:
    if msvcrt.kbhit() and msvcrt.getch() == b'q':
        break
    else:
        print("This loop will continue forever")
```

このようにmsvcrt.kbhit()を使用することで、キーボードの入力を受け取ることができます。

## input()との違い
input()を使用すると、ユーザーが文字を入力するまで待ち状態になりますが、msvcrt.kbhit()を使用すると、キーを押した瞬間に処理を行うことができます。

## keyboard.is_pressed()との違い
keyboard.is_pressed()は、keyboardモジュールの1つの関数です。この関数を使用すると、特定のキーが押されているかどうかを調べることができます。keyboard.is_pressed()もmsvcrt.kbhit()も、キー入力を受け取るのに使用できますが、keyboard.is_pressed()は特定のキーを受け取るためのみに使用することができます。

## 応用実装例1
keyboard.is_pressed()を使用して永久ループ中にキー入力を受け取る処理を書いてみましょう。
```python
import keyboard

while True:
    if keyboard.is_pressed('q'):
        break
    else:
        print("This loop will continue forever")
```

このようにkeyboard.is_pressed()を使用することで、特定のキーを受け取ることができます。

## 応用実装例2
msvcrt.kbhit()とinput()を使用して永久ループ中にキー入力を受け取る処理を書いてみましょう。
```python
import msvcrt

while True:
    if msvcrt.kbhit():
        key = input("Press q to quit or any other key to continue: ")
        if key == "q":
            break
    else:
        print("This loop will continue forever")
```
このようにmsvcrt.kbhit()とinput()を使用することで、特定のキーを受け取ることができます。

## まとめ
Pythonでキーボードの割り込みを受け取る方法をご紹介しました。msvcrt.kbhit()、keyboard.is_pressed()、input()を使用することで、キーボードの入力を受け取ることができます。また、これらを組み合わせることで、より複雑な処理を実装することも可能です。
配列の重複した要素を取り除く（JavaScript)

JavaScriptで配列の重複した要素を取り除くサンプルコードです

```JavaScript
const array1 = [10,10,40,20,20,30,50,40,70,60,90,70];
// 重複した値を取り除くSetオブジェクトを呼び出す
let array2 = new Set(array1);
// array2を配列に変換し、array3にする
array3 = Array.from(array2);
array3.forEach((data) => {
        document.write(`<p>${data}</p>`);
});

```

Setオブジェクトに引数としてarray1配列を指定し、Array.from関数で配列に変換します。
wslでelixir その14

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。


# 練習問題
shell serverを実装せよ。

# サンプルコード

```
defmodule Rserver do
  @moduledoc """
  Documentation for `Rserver`.
  """

  @doc """
  Hello world.

  ## Examples

      iex> Rserver.hello()
      :world

  """
  def hello do
    :world
  end
	require Logger
	use GenServer
	@port 5300
	def start do
		GenServer.start(__MODULE__, %{socket: nil})
	end
	def init(state) do
		{:ok, socket} = :gen_tcp.listen(@port, [:binary, active: true])
		send(self(), :accept)
		Logger.info "Listenn port: #{@port}"
		{:ok, %{state | socket: socket}}
	end
	def handle_info(:accept, %{socket: socket} = state) do
		{:ok, _} = :gen_tcp.accept(socket)
		Logger.info "Connected"
		{:noreply, state}
	end
	def handle_info({:tcp, socket, data}, state) do
		Logger.info "Received: #{String.length(data)}"
		Logger.info data
		Logger.info "Send"
		{result, 0} = System.shell(data)
		:ok = :gen_tcp.send(socket, result)
		:gen_tcp.close(socket)
		send(self(), :accept)
		{:noreply, state}
	end
	def handle_info({:tcp_closed, _}, state) do
		Logger.info "Close"
		{:stop, :normal, state}
	end
	def handle_info({:tcp_error, _}, state) do
		Logger.info "Error"
		{:stop, :normal, state}
	end
	def run() do
		cmd = IO.gets "> "
		{:ok, socket} = :gen_tcp.connect('localhost', 5300, [:binary, active: false])
		:ok = :gen_tcp.send(socket, cmd)
		{:ok, data} = :gen_tcp.recv(socket, 0)
		data
		|> IO.puts
		run()
	end
	def main(args \\ "") do
		Rserver.start
		run()
	end
end





```

# 実行結果

```
$ ./rserver

05:55:02.383 [info]  Listenn port: 5300
> pwd

05:55:07.750 [info]  Connected

05:55:07.762 [info]  Received: 4

05:55:07.763 [info]  pwd


05:55:07.764 [info]  Send
/home/user/elixir/rserver

> ls

05:55:28.181 [info]  Connected

05:55:28.185 [info]  Received: 3

05:55:28.186 [info]  ls


05:55:28.187 [info]  Send
README.md
_build
lib
mix.exs
rserver
test

> ls lib

05:55:40.719 [info]  Connected

05:55:40.720 [info]  Received: 7

05:55:40.722 [info]  ls lib


05:55:40.724 [info]  Send
rserver.ex

> ls test

05:55:57.531 [info]  Connected

05:55:57.532 [info]  Received: 8

05:55:57.533 [info]  ls test


05:55:57.534 [info]  Send
rserver_test.exs
test_helper.exs

```

以上。
未経験からエンジニアになりたい人へ：インターネットについて

未経験からエンジニアになりたい人は、プログラミングから始める人が多いと思いますが、
エンジニアの仕事は、プログラミングだけではありません。そして、プログラミングだけでは、エンジニアになれません。同時にプログラミングが苦手でも、システム構成や開発の流れを理解するとエンジニアに近づきます！
今回はインターネットについてです。
実は、インターネットの仕組みを知らない人もいるのではないでしょうか？
![インスタスライド_202301011.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/3731bcf6-ceb1-72f9-52b2-6e90cafcd7f2.gif)


# インターネットとは？
- 米軍ペンタゴンの構築したネットワークがはじまり
- 戦争時でも運用が可能なように強固なシステムとなっていた
- 学術機関などによる研究の対象となった後、ネットワークシステムそのものが解放され、誰でも利用できるインフラとして確立した


# インターネットの図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/cf486c70-6647-89c6-e8d9-44bff13427e7.png)

# IPアドレスで繋がっている
世界中のサーバーがIPアドレスとドメイン名いうユニークな数字、名前で管理されている。
そのため通信が出来ます。電話番号みたいなものです。

# まとめ
- インターネットは、世界中に張り巡らされたネットワーク
- IPアドレスとドメイン名で管理されている
- ユニークな数値、名前で管理されている
- 電話番号みたいなユニークなもので通信している

# 最後に
未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
【Swift】APIの真偽値が t や 1 や Trueなど混在しているJSONの対処法

# はじめに
長年利用しているAPIだと実装者が入れ替わり、APIの設計も少しずつ差分が生じてきますよね。
APIサイドに改善要望を出せば良いのかもしれないですが、AndroidやWebなど他のデバイスでも変更対応が入ってしまい、全デバイス横断の大掛かりな修正対応になってしまう可能性もありますよね。
私自身このような辛い経験を何度かしてきて、その時に役に立った方法を紹介します。

# 返り値が何型でもBoolに変換する

目標はこれらのような true/false以外の値でも、問題なくBool値としてAPIから取得し扱えるようにすることです。
```.json
{
    "isLiked": "t",
    "isFollowed": "true",
    "isBookmark": 1,
    "isPurchased": true
}
```



# 対応方法

PropertyWrapperを作成します。

```AnyToBool.swift
@propertyWrapper
struct AnyToBool: Decodable {
    var wrappedValue: Bool
    
    init(from decoder: Decoder) throws {
        let container = try decoder.singleValueContainer()
        if let boolValue = try? container.decode(Bool.self) {
            wrappedValue = boolValue
        } else if let intValue = try? container.decode(Int.self) {
            wrappedValue = intValue != 0
        } else if let stringValue = try? container.decode(String.self) {
            let trueSet: Set = ["t", "T", "true"]
            wrappedValue = trueSet.contains(stringValue)
        } else {
            wrappedValue = false
        }
    }
}
```

# 使い方

お気に入りしたかや購入したかのフラグを管理する情報をAPIから取得する。
Feature型には４つのBool変数を持っています。

```Feature.swift
struct Feature: Decodable {
    @AnyToBool var isLiked: Bool
    @AnyToBool var isFollowed: Bool
    @AnyToBool var isBookmark: Bool
    @AnyToBool var isPurchased: Bool
}
```

以下のJSONのように真偽値に関する情報が true/false以外の場合でも正しくBool型に変換して取得できることが確認できる。

```FeatureTest.swift
let jsonData = """
{
    "isLiked": "t",
    "isFollowed": "true",
    "isBookmark": 1,
    "isPurchased": true
}
""".data(using: .utf8)!
let decodedFeature = try! JSONDecoder().decode(Feature.self, from: jsonData)

print(decodedFeature.isLiked)     // true
print(decodedFeature.isFollowed)  // true
print(decodedFeature.isBookmark)  // true
print(decodedFeature.isPurchased) // true
```
AZ-900 と MS-900 合格まで (2023.01)

AWS の資格試験受験後なんやかやでご無沙汰にしてしまった資格試験を受験した。
[AWS Solutions Architect - Associate合格まで（2022.06） - Qiita](https://qiita.com/e99h2121/items/fd1ccece6c288d83df42)
[AWS学習事始め - 基礎資料読んだリスト～Cloud Practitioner合格まで（2022.02） - Qiita](https://qiita.com/e99h2121/items/bec62a16c1264baf6a5e)

2023.1.4 幸先よく AZ-900 と MS-900 を受けて合格したメモです。

## 感想
- 難易度的には体感 AWS のクラウドプラクティショナー同等。
- しかし何が難しいかと言われると AWS と Azure/MS Office 達の一連の名付けの違いだと感じた。
    - AWS の Snow 兄弟の名前のオシャレさと比べて ”[Data Box](https://azure.microsoft.com/ja-jp/products/databox/)” ってそのまま過ぎやしねえか。
    - セキュリティ グループとか管理グループとかも、なんというかそのままだよな。
- あと、正月明けの頭で自宅環境を整えたことが一番 (以下受験部屋)

![PXL_20230104_050345368.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/ce2269b1-25c4-0cc5-8502-bdd727f38ee1.jpeg)



## ロードマップ

とはいえ MS 系の受験は初めてなので概念理解。
[Microsoft の認定資格 | Microsoft Learn](https://learn.microsoft.com/ja-jp/certifications/)
[Microsoft Certified: Azure Fundamentals - Certifications | Microsoft Learn](https://learn.microsoft.com/ja-jp/certifications/azure-fundamentals/)
[Microsoft 365 Certified: Fundamentals - Certifications | Microsoft Learn](https://learn.microsoft.com/ja-jp/certifications/microsoft-365-fundamentals/)

読みだすと AZ-900 と MS-900 はオーバーラップしているところもあり、手間を考えたら一挙にとってしまって良しという理解。

クラウドのメリット的な基礎知識はあるつもりで、ひとまず以下を購入してテスト形式で脳に刻み込む。

[【2万人が受講】AZ-900 Microsoft Azure Fundamentals模擬試験問題集（7回分490問） | Udemy](https://www.udemy.com/course/az-900-microsoft-azure-fundamentals4176/)
[MS-900: Microsoft 365 Fundamentals 模擬問題集 | Udemy](https://www.udemy.com/course/ms-900-microsoft-365-fundamentals-z/learn/quiz/5453108#overview)

この Udemy の教材の良いところは以下のようなところだと思っている。
- スマホさえあれば 1 分 1 秒の細切れ時間すら暗記に使える。
- 先人の合格点やら経験談が書かれているので自分の理解度の目安にできる。

ということで、安定して 80-90% の正答ができるあたりまでこなしたら安心のようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/a67a0d28-efb0-a432-8cee-2079e0e22399.png)

おかげさまで 2 Badge を正月休みで取得しました～。

## 次ステップ

AZ-104、AZ-204 あたりを取るのが妥当そうなので、これをこの次のマイルストーンにしてみる。

[Azure関連の資格の情報（2022年1月初版）](https://zenn.dev/tomot/articles/5704dcb1cc4e8a)
[Azure関連資格、体系とか受ける順番とか。](https://zenn.dev/tomot/articles/c60883beaf3c5e)
[認定資格および試験を見る | Microsoft Learn](https://learn.microsoft.com/ja-jp/certifications/browse/?expanded=azure&products=azure)

[入社して3か月の新人がAZ-104に合格した話 | cloud.config Tech Blog](https://tech-blog.cloud-config.jp/2021-07-16-azure-az104-three-month-new-employee-passing-experience/)
[Azureの新試験AZ-104を旧試験AZ-103と比較してみた - Qiita](https://qiita.com/tagfa/items/36db90442e1c3b224aa6)
[Azureの新試験AZ-204を旧試験AZ-203と比較してみた - Qiita](https://qiita.com/tagfa/items/9d60b4c8d7bd3691e399)

以上です～
[python]  自然数N以下の素数をすべて求める



# はじめに
素数に関するアルゴリズム問題は定番なので、少し勉強した

# 問題
自然数N以下のすべての素数を求めよ


# Code
```python
from typing import List


def generate_primes(number: int) -> List[int]:

    # 素数
    primes = []

    # for文の作業を減らすために、cahceで繰り返しを減らす
    cache = {}

    for x in range(2, number + 1):
        is_prime = cache.get(x)
        if is_prime is False:
            continue

        # 素数である
        primes.append(x)
        cache[x] = True

        # x の倍数はすべて素数ではないので、cacheのFalseとして処理
        for y in range(x*2, number+1, x):
            cache[y] = False

    return primes


```

# 結果
```python
print(generate_primes(100))
# [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]
```


# 感想
二重for文でアルゴリズム問題を解けなかったことが多かったが、dicでcacheを利用することによって時間・作業の短縮ができることを初めて知った
Embeddingの可視化（tensorboard）

# やりたいこと
### 前提知識：Embedding（埋め込み表現）とは
ある対象をコンピュータ上で取り扱えるように、数値（ベクトル）に変換した結果のこと。対象をベクトル空間上に落とし込むため、「ベクトル空間に埋め込む」なんて言い方をする[^1]。
[^1]:適切な演算が定義してある数学的な「ベクトル空間」とは限りません。そのため数学的には正しくない用語の使い方ですが、お気持ち的にベクトルに埋め込むという意味で一般的に使われています。

例：自然言語処理で単語のEnbedding
- 「本」 = (1.8, 2.1, ..., -0.3)
- 「大学生」 = (1.2, -0.3, ..., 0.9) 
- 「テキーラ」 = (0.2, -0.5, ..., 3.2)
※ 埋め込み方法によってこの数値は異なる。

### 本題
- Enbedding作ったけど、可視化してそれっぽい埋め込みになっているかを確かめたい！

# 先に出力イメージ
tensorboardを使うと簡単にこんなのを作れる。
（3次元に投影するのでぐるぐる回せる）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2510180/d95574d2-ac33-bd33-add3-b0430d249807.png)


# やり方
### pythonの環境準備
次のものをインストール（私はどちらもcondaでインストールしました）
- torch（下のプログラムの書き換えは少し必要だけどtensorflowでもOK）
- tensorboard

### プログラム
```python
import numpy as np
from torch.utils.tensorboard import SummaryWriter

vectors = np.random.normal(0, 1, (30,128))      # 128次元のベクトルを正規分布で適当に30個生成（embeddingの代用）
labels = ['data_'+str(i) for i in range(30)]    # ベクトルの名前を'data_1'みたいな形で設定

writer = SummaryWriter()
writer.add_embedding(vectors, metadata=labels)
```

### 描画の実行方法
上のプログラムを実行すると、**runs**というディレクトリができる。
```tensorboard --logdir ./runs```を実行すると、**http\://localhost:xxxx/** のようなURLが出てくるので、ブラウザで開くと上の画像のような画面が出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2510180/ef3000d9-56b8-18f8-3c0d-afe06708872c.png)

※ ブラウザで開いてもうまく表示されない場合はリロードしてみるといいかも

# 終わりに
- 他にもlabelをいろいろ調整して画像を表示させたりできるらしいので、
- 埋め込み関連の研究やるなら早めに知っておいたほうがいいツールだったと思う（私は最近まで知らなかった。。。）
UTM　MacにUbuntu入れた後、共有ディレクトリの設定方法

# はじめに

M1 MacにUTMを使ってUbuntuを入れた後、そのままでは初期設定時に指定した共有ディレクトリにはつながっていないです。この記事は実行手順のメモです。

詳しくは公式ドキュメントを見てもらうのが良いと思います。
https://docs.getutm.app/guest-support/linux/#virtfs

## コマンド

以下を叩くだけで、設定したディレクトリに繋がります。

```sh
$ sudo mkdir [mount point]
$ sudo mount -t 9p -o trans=virtio share [mount point] -oversion=9p2000.L
```

これだけだと起動するたびに上記のコマンドを叩くことになるので、`/etc/fstab`に以下を追記します。すると起動時に自動的にマウントが実行されます。

```sh
share	[mount point]	9p	trans=virtio,version=9p2000.L,rw,_netdev,nofail	0	0
```
SwiftUI sheet表示、GeometryReader使用、VStackのみの状態と同じにする→sheetのサイズが知りたい

## 目的
> sheetのサイズが知りたい


単純にGeometryReaderを挿入すると、デザインが崩れる。
元のデザインを使用出来る方法、sheetのサイズをデザインに使用する方法を探る。

## sheet表示元
```swift
import SwiftUI

struct ContentView: View {

    @State var showPopup: Bool = false
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            Button(action: {
                self.showPopup.toggle()
            }, label: {
                Text("Popup")
            })
            .buttonStyle(.bordered)
        }
        .padding()
        .sheet(isPresented: self.$showPopup, content: {
            PopupView()
        })
    }
}
```

## VStackのみ
```swift
struct PopupView: View {
    var body: some View {
        VStack {
            Text("PopupView")
                .font(.largeTitle)
            Image(systemName: "star.fill")
                .font(.largeTitle)
                .symbolRenderingMode(.multicolor)
        }
    }
}
```
![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2023/01/popup.png)

![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2022/12/i_icon_12279_icon_122791_32.png)

## GeometryReader + VStack
```swift
struct PopupView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("PopupView")
                    .font(.largeTitle)
                Image(systemName: "star.fill")
                    .font(.largeTitle)
                    .symbolRenderingMode(.multicolor)
            }
        }
    }
}
```
![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2023/01/popup2.png)

![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2022/12/i_icon_12279_icon_122791_32.png)

## GeometryReader + VStack alignment指定
``` swift
struct PopupView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .center) {
                Text("PopupView")
                    .font(.largeTitle)
                Image(systemName: "star.fill")
                    .font(.largeTitle)
                    .symbolRenderingMode(.multicolor)
            }
        }
    }
}
```
![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2023/01/popup2.png)

![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2022/12/i_icon_12279_icon_122791_32.png)

## GeometryReader + VStack frame指定
```swift
struct PopupView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack() {
                Text("PopupView")
                    .font(.largeTitle)
                Image(systemName: "star.fill")
                    .font(.largeTitle)
                    .symbolRenderingMode(.multicolor)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
    }
}
```
![](https://kumonosu.cloudsquare.jp/wordpress/wp-content/uploads/2023/01/popup3.png)
Java メソッドについて

この記事はJavaにおいて自分の中で曖昧なもの、整理できていないものをまとめていく自分用の記事です。

<h4>・メソッド</h4>
    メソッドとは、なにかを動かす処理をするプログラムのこと。Javaにもともと備わっているメソッドとJavaにもともと備わっているメソッドを組み合わせたりして自分で作るメソッドの２種類ある。

<h5>・Javaにもともと備わっているメソッド</h5>


```Java:javaMethod.java
public class javaMethod {
 public static void main(String[] args) {
    String message = "hello";
    message.toUpperCase();
    }
}
```

上記のtoUpperCaseは文字列を大文字化するメソッドであり、Javaにもともと備わっているメソッドである。
私たちはこのようなJavaにもともと備わっているメソッドを組み合わせたりして大きなメソッドを作ってプログラムを作っていく。

<h5>・引数のないメソッド</h5>
    引数の無いメソッドとは、プログラムがなにか文字列や数値を受け取ることなく処理を行うプログラムのことである。そのプログラムだけで処理が完結する。

```Java:example.java
  void message() {
    System.out.println("this is program");
}
```

このように`message`というプログラムは呼び出すと"this is program"という文字列を出力するという処理をするプログラム、つまり`message`"はthis is program"を出力するメソッドである。

<h5>・引数のあるメソッド</h5>
    引数のあるメソッドとは、何か数値や文字列などを受け取り、その受け取った数値や文字列を基に処理をするプログラムのことである。そのプログラムだけでは処理ができず、どこかから引数を受け取らなければならない。（⇒このとき、引数がなかったり、エラーが起きてしまう引数が渡されてもプログラムを実行させたいときなどに例外処理を行う）

```Java:example.java
    public static void main(String[] args) {
      message("Qiita");
}

    static void message(String name) {
    //staticをつけないとエラーになる理由は=>通常メソッドはコンストラクタ化をするかstatic化するかのどちらかでないといけないため。
    System.out.println("こんにちは" + name + "さん");
}
```

【参考】
プロになるJava 著：きしだなおき　山本裕介　杉山貴章(敬称略)
https://gihyo.jp/book/2022/978-4-297-12685-8

GameCradle ゲームのゆりかご 『staticとは』
https://www.gamecradle.net/document/main/content/doki/session14/su-static.html

YouTubeチャンネル「黒本著者が教える やさしくない!? Java」
【やさしくない!? Java】質問対応：staticの話
https://youtu.be/J9AFfr--a14
【TypeScript】ReactのElementを配列形式でjoinのようなことをしたい

## 概要
JavaScriptでは`join`メソッドで、配列の値をseparatorで結合して結果を取得することができます。ただ、joinメソッドは[What is the join() method of an array in TypeScript?](https://www.educative.io/answers/what-is-the-join-method-of-an-array-in-typescript)の記事にある通り、文字列型で返す用の関数になります。
では、ReactのElement要素の配列をjoinのような形式で結合したい場合、どうすれば良いのかというのを今回メモ書きします。

## 対応方針
やりようは幾つかあると思いますが、[granmoe/ React Join Children](https://gist.github.com/granmoe/274c299b792b039deecfb619753ea32c?permalink_comment_id=4394872#gistcomment-4394872)の記事にある通り、reduceとsliceを使うやり方が、すっきり書けそうな感じはします。
`reduce`でseparatorの要素を追加していき、`slice(0, -1)`で最後に追加したseparator要素を削除する形になります。

## 実装サンプル
上記の記事で書かれていた実装ほぼそのままですが、サンプルをのせておきます。
```react
export const SampleComponent: FC<Props> = ({ sampleList }) => (
  <div>
    {sampleList
      .map((sample) => {
        return <div>{sample.value}</div>
      })
      .reduce<ReactNode[]>((prev, curr) => {
        return [...prev, curr, <div>separator</div>]
      }, [])
      .slice(0, -1)}
  </div>
)
```
2023/1/5主にITとかセキュリティの記事

ジェネシスブロック：最初にマイニングされたビットコインブロック──ビットコイン誕生から14年(1/4)
https://www.coindeskjapan.com/170164/

EVM（イーサリアム・バーチャル・マシン）の2023年は？【コラム】(1/4)
https://www.coindeskjapan.com/168332/

自衛隊、サイバー人材4000人に　「能動的防御」へ拡充
データで読む安保3文書(1/4)
https://www.nikkei.com/article/DGXZQOUA263WN0W2A221C2000000/

メールの返信をもらうためにとるべき5つの行動(1/3)
https://news.mynavi.jp/techplus/article/20230103-2552899/

VRを活用した未来感たっぷりの遠隔バーチャルデザインレビューとは？(1/4)
https://news.mynavi.jp/techplus/article/kinmirai-technology-kenbunroku-277/

年始は要注意！サーバーやHDDレコーダーの重度障害を復旧しまくるデータ復旧のプロによくある障害や業者の選び方について聞いてみた(1/4)
https://gigazine.net/news/20230104-digital-data-recovery/

2023年 IT業界 重要イベントカレンダー(1/4)
https://ascii.jp/elem/000/004/118/4118237/

今年のテック業界はどうなる？ 各社「2023年動向予測」まとめ(1/4)
https://ascii.jp/elem/000/004/119/4119345/

LinkedInはいかに脅威検知にかかる時間を大幅削減したか(1/4)
https://japan.zdnet.com/article/35197792/

2023年の技術トレンドを予測(1/4)
https://japan.zdnet.com/article/35197604/

ＦＲＢなど米規制当局、暗号資産関連リスクを銀行に警告－共同声明(1/4)
https://www.bloomberg.co.jp/news/articles/2023-01-03/RNXGQMDWX2PU01?srnd=cojp-v2

官民で国外でのサイバー演習に参加傾向　IPAのサイバーレスキュー隊が22年度上半期レポートを公開(1/4)
https://enterprisezine.jp/news/detail/17187

米軍の遺留品から2,632人分の個人情報と指紋・虹彩に関するデータを発見、eBayで入手(1/4)
https://scan.netsecurity.ne.jp/article/2023/01/04/48714.html
[kotlinメモ]文字列リストをできるだけ数値ソートライクに並び替えたい


## 概要

ご存知の方も多いかと思いますが、
以下のように、数値ソートと文字列ソートとでは、並び替えの規則が異なります。

```kotlin
fun main() {
    // 数値ソート
    listOf(100, 99, 11, 10, -1, -100, -10, 9, 3, 1)
        .sorted().also(::println)
    // [-100, -10, -1, 1, 3, 9, 10, 11, 99, 100]
        
    // 文字列ソート
    listOf("100", "99", "A2", "11", "A10", "10", "B1", "-1", "-100", "-10", "9", "3", "1")
        .sorted().also(::println)
    // [-1, -10, -100, 1, 10, 100, 11, 3, 9, 99, A10, A2, B1]
}
```

本投稿は、文字列のリストであっても、数値の集合に関しては数値ソートライクに並び替えたいな、というものです。

```kotlin
    // 数値ソート
    // [-100, -10, -1, 1, 3, 9, 10, 11, 99, 100]
        
    // 文字列ソート
    // [-1, -10, -100, 1, 10, 100, 11, 3, 9, 99, A10, A2, B1]

    // 今回やりたいソート
    // [-100, -10, -1, 1, 3, 9, 10, 11, 99, 100, A10, A2, B1]
```

割と無視できない問題点として、今回用意したコードはIntしか考慮していないために、例えば小数などに関しては従来通り文字列ソートされてしまいます。
簡易版としてご了承ください。

## 実装コード

```kotlin
/**
 * Int風ソートComparator
 *
 * 1. Int変換可能なもの間ではIntとして比較
 * 2. Int変換不可能なもの間ではStringとして比較
 * 3. Int変換可能なものと不可能なものではInt変換可能なものを優先
 *
 * 例: listOf("100", "99", "A2", "11", "A10", "10", "B1", "-1", "-100", "-10", "9", "3", "1").sortedWith(compareAsIntStyle{ it })
 * -> [-100, -10, -1, 1, 3, 9, 10, 11, 99, 100, A10, A2, B1]
 */
inline fun <T : Any?> compareAsIntStyle(crossinline selector: (T) -> String): Comparator<T> =
    Comparator { a, b ->
        val t1 = selector(a)
        val t2 = selector(b)
        val t1Int = t1.toIntOrNull()
        val t2Int = t2.toIntOrNull()
        when {
            t1Int != null && t2Int != null -> t1Int.compareTo(t2Int)
            t1Int == null && t2Int == null -> t1.compareTo(t2)
            t1Int != null -> -1
            else -> 1
        }
    }
```

## テストコード

```kotlin
fun main() {
    listOf("100", "99", "A2", "11", "A10", "10", "B1", "-1", "-100", "-10", "9", "3", "1")
        .sortedWith(compareAsIntStyle{ it }).also(::println)
    // [-100, -10, -1, 1, 3, 9, 10, 11, 99, 100, A10, A2, B1]

    listOf("100", "99", "A2", "11", "A10", "10", "B1", "-1", "-100", "-10", "9", "3", "1").map(::StringData)
        .sortedWith(compareAsIntStyle { it.value }).also(::println)
    // [StringData(value=-100), StringData(value=-10), StringData(value=-1), StringData(value=1), StringData(value=3), StringData(value=9), StringData(value=10), StringData(value=11), StringData(value=99), StringData(value=100), StringData(value=A10), StringData(value=A2), StringData(value=B1)]
}

/** テスト用Stringデータクラス */
private data class StringData(val value: String)
```

## 最後に

車輪の再発明感がものすごいですが、探した範囲ではいい感じのものを見つけることができませんでした。
絶対もっといいものがあると思いますが...

改良案/代替案等ありましたら、どうぞよろしくおねがいします。