OmniAICreator/Qiita-1.07M huggingface dataset:
所信表明

# 概要
とりあえずWebサービスを作る
あと力が欲しい！すっごく欲しい！

# 現状
- 新卒2年目未経験エンジニア
- 自分がエンジニアとしてどの立ち位置にいるのかよくわかっていない
- この前ほぼ独学で開発の仕事をしたが、全く手応えがなかった
- 業務で古い技術（JavaやWPF）しか使わないため、今の職場が終わったら確実に詰む

**→他の会社でも（良い待遇で）やっていける力が欲しい！**

# 目標
- 短期（3ヶ月）
    ReactでWebアプリケーションを作る
- 中期（半年）
    業務でReactを使い始める
- 長期（1年）
    自作Webアプリで収益を出す
Go の 型が interface を満たすことを保証する

# 型を満たすことが保証されていない場合

例えば以下のような実装があるとします。

```main.go
package main

func main() {}
```

```tasks.go
package main

type Tasks interface {
	Create(task string)
	Get(id int)
	Update(id int, task string)
	Delete(id int)
}
```

ここで定義した `Tasks` interface を `Update(id int, task string)` メソッドを除いて満たすように実装します。

```tasks_impl.go
package main

type TasksImpl struct{}

func (t TasksImpl) Create(task string) {
	//TODO implement me
	panic("implement me")
}

func (t TasksImpl) Get(id int) {
	//TODO implement me
	panic("implement me")
}

func (t TasksImpl) Delete(id int) {
	//TODO implement me
	panic("implement me")
}
```

この状態でビルドしても特にエラーにはなりません。

# 型が interface を満たすことを保証するには

では、`Update(id int, task string)` メソッドの実装を強制するにはどうしたら良いでしょうか。

[How can I guarantee my type satisfies an interface?](https://go.dev/doc/faq#guarantee_satisfies_interface) を参考に `var _ Tasks = (*TasksImpl)(nil)` というコードを追加します。

```tasks_impl.go
package main

type TasksImpl struct{}

func (t TasksImpl) Create(task string) {
	//TODO implement me
	panic("implement me")
}

func (t TasksImpl) Get(id int) {
	//TODO implement me
	panic("implement me")
}

func (t TasksImpl) Delete(id int) {
	//TODO implement me
	panic("implement me")
}

var _ Tasks = (*TasksImpl)(nil)
```

この状態でビルドすると Update メソッドを実装できていないというエラーになり、`Tasks` interface を満たすことを強制できます。

```shell
go build
# go_study
./tasks_impl.go:20:15: cannot use (*TasksImpl)(nil) (value of type *TasksImpl) as Tasks value in variable declaration: *TasksImpl does not implement Tasks (missing method Update)
```
Dockerを使ってWeb Serverを立ち上げてみる

## はじめに
Dockerを最近学習していたので勉強がてら書いていきます。
かなり簡単に実施するので実際の現場で使うものとは違いますが、どんなことができるのか考え方について触れていきます。
## やりたいこと
Dockerコンテナで、pythonの`http.server`を使用して簡単なHTMLのページを表示する。
今回はコンテンツの内容ではなく、Dockerでウェブサーバーを構築する考え方や手順について記載していきます。
かなり初歩的な内容になりますのでご了承ください。

## ファイル構造
全体のファイル構造としては以下です。
```
.
├── docker-compose.yml
├── dockerfile
├── index.html
└── server.py
```
## server.py
```
import http.server
import socketserver

PORT = 8000

Handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print(f"Serving at port {PORT}")
    httpd.serve_forever()
```
`import http.server`
pythonの標準ライブラリの一つで、HTTPリクエストに対して同ディレクトリのHTMLファイルを返せるようになります。
`import socketserver`
 これもpythonの標準ライブラリの一つで、PORTで指定したポート番号で待機し、クライアントからリクエストが来た際にTCP通信が可能になります。
 今回ではDockerでコンテナを起動した際にこのファイルを実行させるようにしていきます。
## index.html
クライアントからのHTTPリクエストが来た際に表示されます。今回はおなじみのHello Worldにします。
```
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Web Server</title>
</head>

<body>
    <h1>Hello World</h1>
</body>

</html>
```
## Dockerfile
```
FROM python:3.9-slim

WORKDIR /app

CMD ["python" , "server.py"]
```
`FROM python:3.9-slim`
ここではベースイメージを指定しています。
この行で指定したベースイメージを元に、このあと、dck-compose.ymlでイメージの作成を行います。
`WORKDIR /app`
ここではコンテナを起動させた際の作業ディレクトリを指定します。
後でdocker-compose.ymlファイルで、ここで指定した作業ディレクトリ（app）に、カレントディレクトリを同期させます。
`CMD ["python" , "server.py"]`
コンテナ起動時に実行するコマンドを指定します。
上記では、`python server.py`が実行されます。

## docker-compose.yml
```
version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8000"
    volumes:
      - .:/app  
```

```
services:
  app:
```
ここでは複数のコンテナを起動させることができます。
今回は`app`という名前でコンテナを起動させます。
```
    build:
      context: .
      dockerfile: Dockerfile
```
イメージをビルドします。`context`でカレントディレクトリを指定し、`dockerfike`でファイル名を指定します。
カレントディレクトリにある、Dockerfileを使用してイメージをビルドします。

`    ports:
      - "8080:8000"`
ポートマッピングを行います。ローカルの8080ポートにアクセスすると、Dockerコンテナの8000ポートに通信が転送されます。
`    volumes:
      - .:/app  `
ここではローカルのカレントディレクトリを、Dockerの`app`ディレクトリにマウントします。
この`app`はDockerファイルの`WORKDIR /app`で指定したディレクトリです。

## 実践

`docker-compose up　-d`
上記コマンドでDockerコンテナをバックグラウンドで起動させます。

具体的には以下のような処理が行われます。

1. `build`で指定したDockefileを元にイメージをビルド
1. イメージからコンテナを作成
1. 作業ディレクトリ`/app`にローカルのカレントディレクトリがマウント（同期）される
1. `python server.py`を実行
1. 8000ポートでHTTPリクエストを受け付けるようになる

`http://localhost:8080`にアクセスすると、8080ポートは8000ポートに転送され、Dockerコンテナで実施したserver.pyによってリクエストが処理されます。
今回は`Hello World`が表示されればOKです。

最後に`docker-compose down`でコンテナを停止させます。

## 終わりに
Dockerは実務でもよく目にするのでしっかり理解していきたい。。
次回はDockerでよく使うコマンドも少しまとめようかと思います！
RUSTLANG豆知識

![Tatsuya-and-Miyuki-mahouka-koukou-no-rettousei-37631808-1280-720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918543/9db87889-025d-4b4b-3fd1-754d32e1c615.png)

# １．インプット（input) 

```rust
    let mut buf= String::new();
    io::stdin().read_line(&mut buf).unwrap();
    let mut num= buf.trim().parse::<usize>().unwrap();
```

## CHAT-GPTのおすすめ

```rust
    let std= stdin();
    let mut buff= std.lock().lines();
    let a_and_b: Vec<i32>= buff.next().unwrap().unwrap()
        .split_whitespace()
        .map(|f| f.parse().unwrap())
        .collect();
```

# 2. TypeCast

```rust

let a= 0_i32;
let b= a as u32;

let string_type= String::from("77");
let number=  string_type.parse::<i32>();
let number2: i32= string_type.parse();
```

# 3. test code

```shell
$ cargo new  --lib example
```

> cargo testでテストできます！
Remix ✕ Clouflare D1 ✕ Prisma マイグレーション用のnpm run コマンドを作ってみたが、、、

## 概要

Prismaのマイグレーションをlaravelのマイグレーションよろしく使いたかったのでpackage.jsonのscriptsにコマンドを定義していた。
構築当時はnpxを使っていたものの、npxは指定したパッケージの最新版を使ってコマンドを実行するはずである。すべてのローカル開発環境でなるべく各種バージョンを明示的に指定して共通化したい意図があった。そのためローカルにwranglerのパッケージをインストールしたのでコマンドを変更した。
変更後のコマンドで今まで開発に使っていたPCでは問題なく動作した。しかしテストで別のPCに環境構築して同様のコマンドを実行したところ`Unknown command: "wrangler"`のエラーが発生した。
先輩のアドバイスでなんとか解決できたので内容をまとめる。

## npxを使っていた頃のコマンド

ローカル開発環境の仕組みづくり段階では下記の様なコードだった。

```package.json
  "scripts": {
    "local-migrate": "npx wrangler d1 migrations apply DB名 --local",
    "local-migrate-fresh": "npx wrangler d1 execute DB名 --local --file ./seeds/drop_tables.sql"
  },
```

ただ、npxコマンドには実行優先順位があるらしい。（ローカル探索 → グローバル探索 → リモート探索）

https://qiita.com/miriwo/items/7e3a65c59c75898d562c

稀にパッケージのバージョン差異でエラーが出たり出なかったりする事がある。環境構築前に「グローバルにwranglerのパッケージが入っており、古いバージョンだった」場合等はnpxを使ってもグローバルパッケージが優先されるので人によってエラーが出たり出なかったりする。
突き詰めたらきりが無いかもしれないが「〇〇さんはエラーが出て、△△さんはエラーが出ない」見たいな状況は結構しんどい。

これはpackage.jsonを使ってwranglerをバージョン指定してローカルにインストールすることで全員が同じwranglerパッケージのバージョンを使う事ができる。この件だけに限れば人によってエラーが出たり出なかったりの状況は避けられる。

## ローカルのwranglerを見に行くようにコマンドを変更（修正ミス）

※この方法は完全に修正ミスです。自身の戒めとして残します。

「`$ npm install wrangler`も実行したし、今の"npx"になっている部分を"npm"に変えればええやろ」と思っていた。
なので下記のように修正をして動作確認をしてプルリクを出した。

```package.json
  "scripts": {
    "local-migrate": "npm wrangler d1 migrations apply DB名 --local",
    "local-migrate-fresh": "npm wrangler d1 execute DB名 --local --file ./seeds/drop_tables.sql"
  },
```

先輩に「package.jsonの他のscriptを呼び出したい場合にはnpmをつけるけど、外部パッケージのコマンドは不要だと思う」と指摘をいただく。
自分でも調べてみたところ確かに外部コマンドはnpmつけなくていいらしい。あれ・・？ではなぜ自分の環境は動くのだろうか・・？

・・・・実は前に`$ npm install -g wrangler`を実行しており、自身のPCのグローバルにはwranglerパッケージがすでに入っていたのだ。

裏を取るためにグローバルにwranglerが入っていないPCで`"local-migrate": "npm wrangler d1 migrations apply DB名 --local",`を実行してみると「Unknown command: "wrangler"」のエラーが出る。

## ローカルのwranglerを見に行くようにコマンドを変更（正しい修正）

下記のように「npx」も「npm」もつけない記載が正しい。

```package.json
  "scripts": {
    "local-migrate": "wrangler d1 migrations apply DB名 --local",
    "local-migrate-fresh": "wrangler d1 execute DB名 --local --file ./seeds/drop_tables.sql"
  },
```

確かにこの記載で`$ npm run local-migrate`を実行すると正常に動作する。
ただ疑問なのが前述のコマンドと同様のディレクトリで`$ npm wrangler d1 migrations apply DB名 --local`を実行すると「wrangler command not found」が発生する。これはどういうことなのか。

どうやらpakage.jsonのscriptsのコマンドは実行時にプロジェクトディレクトリのnode_modulesディレクトリ配下のパッケージを確認してコマンドを実行しているらしい。（node_modulesディレクトリ配下にパッケージがある = ローカルにパッケージがインストールされている）
なので

> `$ npm run local-migrate`を実行すると正常に動作する。
> 同様のディレクトリで`$ npm wrangler d1 migrations apply DB名 --local`を実行すると「wrangler command not found」が発生

こういう事が起きる。

ターミナルにて手動でwranglerコマンドを実行したいときは「npx」を使うで良いと思う。
前述したが、「npx」は実行優先順位がある。プロジェクトディレクトリでnpxを実行するならローカル探索時にヒットしたwranglerを使うはずなのでpakage.jsonのscriptsのコマンドとwranglerのバージョンも一致する。

## よく見たら。。。

記事を記載しているときにpackage.jsonをよくよく見たら、、、下記のように最初から用意されているscriptsの記載で直接wranglerコマンドを実行している部分があった。。。

```package.json
  "scripts": {
    "deploy": "npm run build && wrangler pages deploy",
    "preview": "npm run build && wrangler pages deploy --branch preview"
  },
```
AJAX に基づくログインページ02 ーHTMLを追加とメッセージプアップ

    HTML　ペイジー（Boostrapに基づく）
```html
<!DOCTYPE html>
<html lang="en">
<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">
	<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Login Test</title>
</head>
<body>
    <div class="container">
        <h3>Welcome</h3>
        <div class="alert" role="alert"></div>
        <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="user" class="col-sm-2 control-label">User</label>
              <div class="col-sm-10">
                <input type="text" class="user form-control" id = "user" >
              </div>
            </div>
            <div class="form-group">
              <label for="pwd" class="col-sm-2 control-label">Password</label>
              <div class="col-sm-10">
                <input type="text" class="pwd form-control" id="pwd">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-default login-btn">Login</button>
              </div>
            </div>
          </form>        
    </div>

    <p class="my_p_1"></p>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./js/login.js"></script>
</body>
</html>
```

Javascript(AJAXを使って)
```javascript
const loginBtn = document.querySelector('.login-btn')
const myAlert = document.querySelector('.alert')
function alert (msg,success){
    myAlert.classList.remove('d-none');
    myAlert.innerText = msg
    myAlert.classList.add('show')
    myAlert.classList.add(success? 'alert-success':'alert-danger')

    setTimeout(()=> {
        myAlert.classList.add('d-none');
        myAlert.innerText = ''
        myAlert.classList.remove('show')
        myAlert.classList.remove(success? 'alert-success':'alert-danger')    
    },1000)
    
}

loginBtn.addEventListener('click',function(){
    event.preventDefault();
    console.log("clicked")
    const username = document.querySelector('.user').value  
    const password = document.querySelector('.pwd').value  
    console.log(username)
    console.log(password)
    const p = document.querySelector('.my_p_1')  
    axios({
        url: 'http://hmajax.itheima.net/api/login',
        method:'POST',
        data:{
            username,
            password
        }
    }).then(result => {
        console.log(result.data.message)
        alert('Login Success!',1)
    }).catch(error=>{
        console.log(error.response.data.message)
        alert('Login Failed!',0)
    }) 
      
})
```
ビューのクエリ生成時についているアレ

# はじめに

https://qiita.com/masayasu_t/items/83dfe952f198668fd4a2

こちらの記事に引き続き、ビューで試してみます。

---
シンプルにビューを作ってみます。

```sql
CREATE VIEW [v_code]
AS
SELECT [id]
     , [name]
  FROM [m_code]
```
SSMSから作成したビューのクエリを生成します。
```sql
SET ANSI_NULLS ON
SET QUOTED_IDENTIFIER ON

CREATE VIEW [v_code]
AS
SELECT [id]
     , [name]
  FROM [m_code]
```

クエリについては変化はないですが、実行前に
* SET ANSI_NULLS ON
* SET QUOTED_IDENTIFIER ON

が追加されています。

# 「SET ANSI_NULLS ON」って何だろう:thinking_face:

https://learn.microsoft.com/ja-jp/sql/t-sql/statements/set-ansi-nulls-transact-sql?view=sql-server-ver16

>ANSI_NULLSが ON の場合、 WHERE column_name = NULL を使用する SELECT ステートメントは、 column_nameに NULL 値がある場合でも 0 行を返します。 WHERE column_name <> NULLを使用する SELECT ステートメントでは、column_nameに NULL 以外の値がある場合でも、0 行が返されます。
ANSI_NULLSが OFF の場合、Equals (=) および Not Equal To (<>) 比較演算子は ISO 標準に従いません。 WHERE column_name = NULLを使用する SELECT ステートメントは、column_nameに null 値を持つ行を返します。 WHERE column_name <> NULLを使用する SELECT ステートメントは、列に NULL 以外の値を持つ行を返します。 また、 WHERE column_name <> XYZ_value を使用する SELECT ステートメントは、 XYZ_value されておらず NULL ではないすべての行を返します。

一言でいうと「column_name = NULL」の挙動が変わります。
以下、上記サイトから抜粋です。
|ブール式|SET ANSI_NULLS ON|SET ANSI_NULLS OFF|
|:-:|:-:|:-:|
|NULL = NULL|UNKNOWN|TRUE|
|1 = NULL|UNKNOWN|FALSE|
|NULL <> NULL|UNKNOWN|FALSE|
|1 <> NULL|UNKNOWN|TRUE|
|NULL > NULL|UNKNOWN|UNKNOWN|
|1 > NULL|UNKNOWN|UNKNOWN|
|NULL IS NULL|TRUE|TRUE|
|1 IS NULL|FALSE|FALSE|
|NULL IS NOT NULL|FALSE|FALSE|
|1 IS NOT NULL|TRUE|TRUE|

SQL Serverでは「○○ = NULL」ではなく「○○ IS NULL」のように書くものと決めつけていましたが、この設定に因るようです。


# 「SET QUOTED_IDENTIFIER ON」って何だろう:thinking_face:

https://learn.microsoft.com/ja-jp/sql/t-sql/statements/set-quoted-identifier-transact-sql?view=sql-server-ver16

>SET QUOTED_IDENTIFIERがON (既定) の場合、識別子は二重引用符 ("") で区切ることができ、リテラルは単一引用符 ('') で区切る必要があります。 二重引用符で囲まれた文字列はすべて、オブジェクト識別子として解釈されます。 引用符で囲まれた識別子は、Transact-SQL の識別子の規則に従う必要はありません。 これはキーワードにすることができます。また、Transact-SQL 識別子では許可されない文字を含めることができます。 二重引用符 (") が識別子の一部である場合は、2 つの二重引用符 ("") で表すことができます。 SET QUOTED_IDENTIFIER は、データベース内のオブジェクト名に予約済みキーワードを使用する場合に ON する必要があります。
SET QUOTED_IDENTIFIERがOFFされている場合、識別子は引用符で囲むのはできないため、識別子のすべての Transact-SQL ルールに従う必要があります。 詳細については、「 Database 識別子」を参照してください。 リテラルは単一引用符と二重引用符のどちらで区切ることもできます。 リテラル文字列を二重引用符で区切る場合は、文字列の内部でアポストロフィなどの埋め込み単一引用符を使用できます。

つまり
QUOTED_IDENTIFIER ON
だと
```sql
SELECT "id"
     , "name"
  FROM "m_code"
```
という書き方が許されます。
SQL Serverでは「文字列は二重引用符ではなく単一引用符で括る」と決めつけていましたが、この設定に因るようです。

# おわりに
私の知っているSQL Serverの世界は
* SET ANSI_NULLS ON
* SET QUOTED_IDENTIFIER ON

の設定の下の世界でした。

当たり前に思っていたことが設定で変えることできると分かり驚きましたが、これらの設定をOFFにすることは無いだろうと思います。
DOMとは

# DOMとは
JavaScriptで記述されたプログラムからWebページにアクセスしてページを操作する方法を提供している。

# DOMツリーとは
HTMLドキュメントをツリー構造で表したもの。

# ノードとは
文章を構成する要素、属性、テキストといったオブジェクト
* 要素ノード
* 属性ノード
* テキストノード


## Windowオブジェクト
ブラウザを操作するための機能を集めたオブジェクトで、ブラウザオブジェクトの階層構造の最上位に位置
## Documentオブジェクト
Windowオブジェクト内に表示されたHTMLで表現されているコンテンツを保持しているオブジェクト

## Locationオブジェクト
現在表示されているページのロケーションに関する情報を提供
現在の表示URLアドレスに関する情報を取得できる。

## Historyオブジェクト
ブラウザの履歴の操作

## Navigatorオブジェクト
ブラウザ名やバージョンなどブラウザ固有の情報を提供

## Screenオブジェクト
ディスプレイに関する情報を提供
【Next.js】サーバーアクション使用時にミドルウェアでリダイレクトした際の failed to forward action response TypeError: fetch failed を回避する方法

## エラーが発生した状況

`middleware.ts`に以下のように記述し、リダイレクトするようにしていました。

```ts:middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export const config = {
  matcher: ['/((?!icons|logos|_next/static|favicon.ico|manifest.json).*)'],
}

export async function middleware(req: NextRequest) {
  const hasAuthCookie = req.cookies.has('auth_cookie')
  if (!hasAuthCookie) {
    const loginUrl = new URL('/login', req.url)
    return NextResponse.redirect(loginUrl)
  }

  // ...
}

```

サーバーアクションを使用した際にミドルウェアでリダイレクトすると以下のようなエラーが発生しました。


```text
failed to forward action response TypeError: fetch failed
    at node:internal/deps/undici/undici:13185:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async rC (/home/node/project/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:4216)
    at async rE (/home/node/project/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:8094)
    at async r7 (/home/node/project/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:18:1144)
    at async doRender (/home/node/project/node_modules/next/dist/server/base-server.js:1413:30)
    at async cacheEntry.responseCache.get.routeKind (/home/node/project/node_modules/next/dist/server/base-server.js:1574:28)
    at async NextNodeServer.renderToResponseWithComponentsImpl (/home/node/project/node_modules/next/dist/server/base-server.js:1482:28)
    at async NextNodeServer.renderPageComponent (/home/node/project/node_modules/next/dist/server/base-server.js:1908:24)
    at async NextNodeServer.renderToResponseImpl (/home/node/project/node_modules/next/dist/server/base-server.js:1946:32) {
  [cause]: Error
      at makeNetworkError (node:internal/deps/undici/undici:8968:35)
      at httpRedirectFetch (node:internal/deps/undici/undici:10515:32)
      at httpFetch (node:internal/deps/undici/undici:10475:28)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async node:internal/deps/undici/undici:10212:20
      at async mainFetch (node:internal/deps/undici/undici:10202:20)
}
```

## 回避方法

`middleware.ts`の`config`を以下のように変更してサーバーアクションの場合は実行されないようにすることでエラーを回避できます。

```diff_typescript:middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export const config = {
- matcher: ['/((?!icons|logos|_next/static|favicon.ico|manifest.json).*)'],
+ matcher: [
+    {
+     source: '/((?!icons|logos|_next/static|favicon.ico|manifest.json).*)',
+      missing: [
+        { type: 'header', key: 'next-action' },
+      ],
+    },
+  ],
}

export async function middleware(req: NextRequest) {
  const hasAuthCookie = req.cookies.has('auth_cookie')
  if (!hasAuthCookie) {
    const loginUrl = new URL('/login', req.url)
    return NextResponse.redirect(loginUrl)
  }

  // ...
}

```


## 参考

https://github.com/vercel/next.js/discussions/64993
arch linux ーhyprlandで遊べる！

こんにちは。今回紹介するものとは？

Waylandーhyprlandでございます！

もしもi3wm 環境を経験した方だったらTITLE　SYSTEMのようさを理解されてもらえるとの事で笑

https://wayland.freedesktop.org/

https://hyprland.org/


![screenshot_24102024_230318.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918543/3e278383-0789-58df-7d25-bba9d2e31e47.jpeg)


> https://wiki.hyprland.org/Getting-Started/Preconfigured-setups/
CNT+Bでブラウザ開けます！
CNT＋ENTERでTTY！

新しくパソコン上動くのが見たい方々！　何とぞ実験してください！
自分は大満足であります！
【月々のクラウド費用が激減！】絶対に押さえておきたいAWSコスト削減術5選

## はじめに
こんばんは、uiroleです！
今日はAWSユーザーなら、誰もが気にするであろうコスト削減術についてまとめてみました。

### 【記事の対象者】

この記事は、次のような方を対象としています。
- AWSを導入したばかりで、コスト最適化の方法がわからない初学者
- 毎月のAWS費用が高く、コスト削減を検討している人

### 【前提】

この記事では、以下の前提をもとに進めていきます。

- AWSの基本サービス（EC2、S3、RDS、Lambdaなど）の利用経験がある
- CloudWatchなどのAWSモニタリングツールをある程度理解している

### 【この記事を読んで解決すること】

- 無駄なリソースを削減し、効果的なAWSリソースの運用方法を知る
- コスト最適化に役立つ具体的な手法やAWSの機能について学べる
- 継続的にAWSコストを管理・削減するための戦略を理解する


## 1. インスタンスのサイズと種類を最適化する

AWSのEC2インスタンスは、用途や負荷に応じてさまざまなサイズと種類があります。コストを抑えるために、以下のポイントを意識してインスタンスを見直しましょう。

**【リザーブドインスタンスやSavings Plansの活用】**
長期間利用するインスタンスには、割引率が高いリザーブドインスタンスやSavings Plansを検討しましょう。これにより、オンデマンド価格よりも大幅なコスト削減が期待できます。
コンピューティングの種類に縛られない「Compute Savings Plans」は、さまざまなインスタンスで使用できる柔軟性があります。

**【スケーリング戦略】**
Auto Scalingを活用して、需要に応じたインスタンスの増減を自動化しましょう。ピーク時のみ大規模なリソースを使い、負荷が少ない時間帯にはインスタンスを縮小することでコストを最適化できます。

::: note info
インスタンスの最適化は、**コスト削減だけでなくパフォーマンスの向上にもつながります**。
リザーブドインスタンスやSavings Plansは長期的な計画が必要ですが、その分大幅なコスト削減を期待できるので、慎重に見極めましょう。
:::


## 2. ストレージの見直し：S3とEBSの管理

ストレージは、知らない間に増大することが多いコスト要素です。
以下の手法で、無駄なストレージコストを削減しましょう。

### 【未使用のEBSボリュームを削除】
使われていないEBSボリュームが残っている場合、ただちに削除するか、スナップショットを取り削減しましょう。CloudWatchでモニタリングして、自動化も可能です。

### 【S3ライフサイクルポリシーの設定】
S3のデータはアクセス頻度に応じて、標準からインテリジェントティアリングやGlacierなど、より安価なストレージクラスへ自動的に移動させるライフサイクルポリシーを設定できます。
これにより、アクセスが少ないデータを適切なコストで管理できます。

::: note info
ストレージコストは隠れた出費になりがちです。
定期的にストレージの使用状況を確認することで、余分なコストを避けられます。
:::

## 3. 無駄なリソースの停止と削除

AWSリソースは「使った分だけ課金」という従量課金制ですが、意識しないと不要なリソースが稼働し続け、無駄なコストを生み出すことがあります。これを防ぐためには、定期的なリソースの棚卸しが重要です。

### 【停止可能なEC2インスタンスの自動スケジュール】
業務時間外にはインスタンスを停止するようにスケジュールを組むことで、不要な時間帯のコストを削減できます。AWS Lambdaを使って自動的にスケジュールを実行することも可能です。

### 【使われていないリソースの削除】
負荷テストや開発環境で作成したリソースが放置されている場合、それらは即削除するようにしましょう。AWS Cost ExplorerやTrusted Advisorを活用して、不要なリソースを特定することができます。

::: note info
開発環境で一時的に利用したリソースがそのまま放置されているケースがよくあります。
AWS Cost ExplorerやTrusted Advisorの活用で、こうした「忘れられたリソース」を見つけ出すことが重要です。
:::


## 4. AWSのコスト最適化支援ツールを活用する

AWSには、コスト削減に役立つ多くのツールがあります。これらを積極的に活用して、コストの最適化を進めましょう。

### 【AWS Cost Explorer】
月々のコストを可視化し、どのリソースがコストを引き上げているかを簡単に把握できます。
定期的にチェックすることで、無駄を見逃さないようにしましょう。

### 【AWS Trusted Advisor】
リソースの最適化に役立つベストプラクティスを提案してくれるツールです。
パフォーマンス、セキュリティ、コスト削減に関する推奨事項を定期的に確認しましょう。

:::note info
Cost ExplorerやTrusted Advisorを定期的にチェックする習慣をつけることで、無駄な支出を早期に発見でき、コストの最適化が進みます。
また、これらのツールは設定次第で自動レポートを出力できるので、時間の節約にもつながります。
:::

## 5. サーバーレスアーキテクチャを導入する

サーバーレスアーキテクチャは、必要なときに必要なだけのリソースを利用するため、従量課金制の真価を発揮します。特に、短時間の処理や不規則なトラフィックに対して効果的です。

### 【AWS Lambdaの活用】
Lambdaはサーバーの管理を不要にし、コードを実行した時間のみ課金されるため、コストの効率性が非常に高いです。
定期的に発生する処理やバックエンドタスクをLambdaに移行することで、常に動いているサーバーのコストを削減できます。


::: note info
トラフィックが少ない場合には非常にコスト効率が良い反面、定常的な大量トラフィックには向いていない場合もあるので、適切なケースでの利用が重要です。
:::

## まとめ

AWSのコスト削減は、継続的な見直しと改善が必要です。
無駄な費用を抑えてクラウドリソースを効率的に運用しましょう。

## 最後に
この記事が少しでも役に立てば嬉しいです。
少しでもいいなと思っていただけたら、ぜひいいねボタンのクリックをお願いします！
Windows11のモバイルホットスポットでVPN経由の接続を許可する

# やりたいこと
- Windows PCのVPN接続先へ、手元のスマホからも接続したい（IPアドレスで接続制限されている試験環境Webサーバへのスマホからの接続など）
- 一時的な接続であり、スマホへのVPN設定はしない方向

# 実現方法
Windows 11のモバイルスポット経由で接続したスマホに対してVPN経由の接続を許可する。
（規定ではVPN経由の接続は行われない）

# 注意事項
外部に持ち出すようなノートPCでこの設定をした場合には、確認が終わったら必ず元の状態に戻すこと。

モバイルホットスポットが何らかの理由でONになったままで、そこへ外部デバイスから接続されると、そのデバイスからVPN経由での接続され放題になってしまう。

そんなに手間がかかる設定ではないので、必要なタイミングで設定を行い、終わったら元に戻すことを心掛けること。

# 設定手順

1. Windows 11のモバイルホットスポットをONにして、手元のスマホからそのWiFiスポットへと接続する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207038/f140d6eb-68a7-625f-5378-de58c4ec1311.png)


2. VPNの設定から「詳細オプション」ボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207038/63456b4c-0005-ac8e-f39f-87fe734fd678.png)


3. 「その他のVPNプロパティ」の「編集」ボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207038/11cc27c0-127f-6944-7de7-4be570a3ca79.png)


4. VPNのプロパティダイアログで「共有」タブを開き、「ネットワークのほかのユーザーに、このコンピューターのインターネット接続をとおしての接続を許可する(N)」にチェックを入れ、ホームネットワーク接続として「ローカルエリア接続* 10」を選択する（この接続が、先ほど設定したモバイルホットスポットの接続　※環境によって違うかもしれないので注意）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207038/fb5920d5-a979-fd20-8a63-b20ce0c5318d.png)

スマホから、IPアドレスで制限されたサーバへ接続できれば成功。

# 終わったら
上記「4.」で行った設定を元に戻すこと！
Linux権限の基本：Linuxファイル権限の基礎知識と実務でよく使うコマンド4選

## はじめに
Linuxの権限（パーミッション）は、ファイルやディレクトリに対するアクセス制御を管理するための非常に重要な仕組みです。

この権限により、システム上のセキュリティやアクセス管理を効率的に行うことができます。

本記事では、Linuxにおける権限の仕組みと、それに関連するコマンドについて詳しく解説します。

## 1. 権限の構成要素
Linuxのファイルやディレクトリには、主に以下の3つの基本的な権限が設定されています。

:::note
**・読み取り（r: read）**
ファイルの内容を表示でき、ディレクトリの場合は中身をリストできる権限です。

**・書き込み（w: write）**
ファイルを編集したり、ディレクトリ内のファイルやサブディレクトリを作成・削除できる権限です。

**・実行（x: execute）**
ファイルを実行できる権限です。プログラムやスクリプトなどを実行する場合に必要です。ディレクトリの場合、そのディレクトリに移動（``cd``）することができます。
:::

## 2. ユーザーの分類
Linuxでは、ファイルやディレクトリに対して、以下の3種類のユーザー分類が使われます。

::: note
**・所有者（user）**
ファイルやディレクトリを作成したユーザー（オーナー）のことです。このユーザーには最も多くの権限が付与されていることが多いです。

**・グループ（group）**
同じグループに所属しているユーザー全員を指します。同じプロジェクトやタスクに関連するユーザーがグループに所属していることが一般的です。

**・その他のユーザー（others）**
所有者やグループに該当しないすべてのユーザーのことです。
:::

## 3. パーミッションの表記
パーミッションは数値や文字列で表現され、``ls -l`` コマンドでファイルやディレクトリの詳細な権限を確認することができます。

例えば、次のような出力が表示されます。

```bash
-rwxr-xr--
```

最初の「-」はファイルの種類を示しており、``-`` は通常のファイル、``d`` はディレクトリを表します。

:::note
まず、（``rwx``）は所有者の権限で、読み取り、書き込み、実行が許可されていることを意味します。

次に、（``r-x``）はグループの権限で、読み取りと実行が許可され、書き込みはできません。

最後の3文字（``r--``）はその他のユーザーの権限で、読み取りのみが許可されています。
:::

権限は数値（オクタル）でも表現され、``chmod`` コマンドで設定を変更する際によく使用されます。それぞれの権限は以下のように数値で表されます。

```
読み取り（r）: 4
書き込み（w）: 2
実行（x）: 1
```

例えば、``rwxr-xr--`` は数値で ``754`` と表現されます。最初の ``7`` は所有者が「読み取り+書き込み+実行（4+2+1=7）」の権限を持つことを示します。

次の ``5`` はグループが「読み取り+実行（4+1=5）」、最後の ``4`` はその他のユーザーが「読み取り（4）」の権限を持つことを示します。

## 4. パーミッションの変更
ファイルやディレクトリのパーミッションは ``chmod`` コマンドを使って変更できます。

**数値で変更する例:**

```bash
chmod 755 ファイル名
```

ここで ``755`` は ``rwxr-xr-x`` のパーミッションを意味します。

**文字列で変更する例:**

```bash
chmod u+rwx,g+rx,o+r ファイル名
```

ここで、``u`` は所有者、``g`` はグループ、``o`` はその他のユーザーを指し、それぞれの権限を追加（``+``）、削除（``-``）、または設定（``=``）します。

## 5. よく使うコマンド一覧
以下に、Linuxの権限管理に関してよく使用されるコマンドを紹介します。

### ``ls -l``
ファイルやディレクトリのパーミッション、所有者、グループなどの詳細情報を表示します。

```bash
ls -l
```

### ``chmod``
ファイルやディレクトリのパーミッションを変更します。数値や文字列で設定が可能です。

```bash
chmod 755 ファイル名
```

### ``chown``
ファイルやディレクトリの所有者やグループを変更します。

```bash
chown 新しい所有者:新しいグループ ファイル名
```

### ``chgrp``
ファイルやディレクトリのグループのみを変更します。

```bash
chgrp 新しいグループ名 ファイル名
```

## まとめ
Linuxの権限（パーミッション）は、システムやファイルのセキュリティを保つための基盤となる仕組みです。

所有者、グループ、その他のユーザーごとにアクセス権限を細かく制御することで、システムの安全性を確保しつつ、必要なアクセスのみを許可することができます。

適切なコマンドを使って権限を管理することは、Linuxシステムの管理において非常に重要なスキルです。

## 参考文献

https://qiita.com/yunaimatsu/items/d9a388aa8874e154b925

https://qiita.com/shisama/items/5f4c4fa768642aad9e06
#SPAJAM での戦い方

# はじめに

みなさん、SPAJAMというスマホアプリハッカソンはご存知でしょうか？
詳しくは[SPAJAM](https://spajam.jp/)のサイトを見てもらうのが速いですが、スマホアプリのハッカソンです。
本選は温泉のある場所で行われます。
2024年で11年目になります。
私は2017年から参加して今年で8回目。
これだけ出てると、最多出場記録保持者なんじゃないか？(どうなんだろう？)

今年は第6予選に参加して優秀賞で、残念ながら本選には行けませんでした。

ちなみに、過去成績。
それなりに結果を残しています。
(チームメンバーのおかげですが)

|年||結果|チーム人数|
|--|--|--|--|
|2024|第６回予選|優秀賞|4人|
|2023|第５回予選|優秀賞|4人|
|2022|第５回予選|優秀賞|3人|
|2021|本選      |優秀賞|3人|
|2020|第１回予選|敗退|2人|
|2019|東海予選  |優秀賞|2人|
|2018|本選      |敗退|4人|
|2017|東海予選  |優秀賞|4人|

と、それなりに結果を残しているチームのメンバーなのでその視点からSPAJAMで予選で賞をもらえる戦い方を振り返ってtつのポイントを描いてみいます。
多分SPAJAMだけではなく、ハッカソンで抑えておくポイントになるかと思います。

# ポイント

# 1.アイデアに納得する
これ大事で、どんなものを作るのか、ちゃんと納得しましょう。
納得できないと疑問を持ったまま開発を行うことになり、気持ちよく開発ができません。
また、納得したアイデアは自信につながります。
結果はどうであれ、開発の時間が終わったときに「やり切った」と思える要素の一つだと思います。

# 2.根拠を示す
作りたいものを作れば楽しいですが、ハッカソンなので賞をもらいたいですよね？
作るものに説得力を持たせるのには「根拠を示す」必要があります。
ただ、ハッカソンの期間でものすごく説得力のあるものを用意するのが難しい場合もあります。
なので、以下の手段をとるとよいです。
- Xでアンケートを取る
- アイデアソンで喜怒哀楽を各チームで書いているので、それを分析する
- 解決する課題が明確なら、どこかの資料を参考にする

集めた根拠をプレゼン資料に反映します。
もちろんアプリにも！

# 3.プレゼン資料を作る専任者を用意する
私たちのチームのメンバーにはテクニカルライターが一人います。
他のチームだとデザイナーや企画をやっている方なんかが居たりします。
そういった人がスライドにパワーをかけてくれることで、開発に注力できます。
他のハッカソンもそうですが、発表ってかなりのウエイトを占めます。
その資料をしっかりと作ってくれるメンバーを用意することが大切です。

断言します、資料を作る専任者がいると開発が劇的に楽になる！！！！

# 4.メンバー構成に気を付ける
3.プレゼン資料を作る専任者を用意する と内容が少しかぶります。

理想的な構成は以下の構成かなと思います。
|人数|構成|
|--|--|
|2人|PG2人　または PG1人 デザイナー1人|
|3人|PG2人、デザイナー または プレゼン資料をまとめられる人 1人|
|4人|PG3人、デザイナー または プレゼン資料をまとめられる人 1人|
|5人|PG3人、デザイナー1人、プレゼン資料をまとめられる人 1人|

仕事などでプロジェクトを動かすときのように、得意分野で力を発揮できる人を用意するとよいです。

# 5.質疑応答時間を確保する
SPAJAMの場合、質疑応答を含め8分間の時間をプレゼンに充てることができます。
そのため、発表に時間をとってしまうと審査員からの質疑応答の時間が短くなります。
なので、LTのように発表は5分程度に抑えるとよいです。

# 6.デモのバックアップとして動画を用意する
実機デモの場合、トラブルが発生するとデモができなかったり時間を無駄に浪費したりします。
そのため、実機でのトラブルのバックアップとして動画を用意するとよいです。
今回の予選でもトラブって、実機でやることにこだわってしまったのが良くなかったかな・・・と反省
(動画、テロップとか入れて用意してたんだけどね・・・)

# 7.楽しむ
とにかく楽しむことが一番です。
終わったときに、チームメンバーと「楽しかったね」と言えるように楽しみましょう。
そのためには互いに意見を尊重し、助け合うことが大切です。
今回の予選もメンバーにすごく助けられました。

# 最後に
SPAJAM2024の予選に参加する前は年齢的に体力的に辛いので今年で最後にしようか、なんて話をしていました。
結果発表までは、本選に行くつもりでいたのでそんな気持ちでした・・・・
(アンケートにもこのチーム今年で最後とか書いてしまったけど、まぁ、気にしない)
が、本選に行けないことが決まって、来年ももう一度、このチームでチャレンジしたいかな・・・とちょっと思っています。
あと2回参加すれば自分の参加記録が10回になるのでそこも狙いたい気もしていますし、あえてのソロ参加も一度してみたいなぁと思います。

何より、温泉に入って、シリコンバレーに行きたい！

来年参加するなら、初心に帰ってガジェットを必ず使いたい！


----
ご意見、ご感想等あればコメントお願いします！
従妹からプロセスとスレッドが何かと尋ねられました

大学で情報系を学び始めた従妹が、プロセスとスレッドについて何か教えてほしいと尋ねてきました。

私は彼女にこう例えました。

レストランで食事をしていると想像してみてください。
このレストランには複数のシェフ（プロセス）がいて、それぞれ異なる料理を担当しています。
各シェフが料理を作るとき、野菜を切ったり、炒めたりといった複数のステップが必要で、これらのステップはシェフの手（スレッド）と見なすことができます。
各手は独立して一つの作業を行うことができます。

## プロセス（Process）
プロセスはシェフのようなもので、システムがリソースを割り当て、スケジュールするための独立した単位です。 各シェフは自分専用の作業スペース（コンロ、まな板、調理器具など）を持ち、これらは独立しており共有されません。これはプロセスが自分のメモリ空間を持つのに似ています。 シェフ同士は干渉せず、同時に作業できますが、一人のシェフが働いても他のシェフには影響を与えません。これはプロセスが互いに独立していることに似ています。

## スレッド（Thread）
スレッドはシェフの手のようなもので、プロセス内の実際の運用単位です。 シェフの手は同時に複数の動作を行うことができ、一方の手が味付けをしている間に、もう一方の手が炒めることができます。これはスレッドがプロセスのリソースを共有することに似ています。

## スレッドとプロセスの違い
独立性：
プロセスは互いに独立しており、異なるシェフが独立した作業環境を持つのに似ています。スレッドはプロセスのリソースを共有し、同じシェフの手が彼の作業と食材を共有するのに似ています。

リソース消費：
新しいシェフ（プロセス）を起動するには、より多くのリソース（食材や調理器具）が必要ですが、一つの手から二つの手（マルチスレッド）にするのはリソース消費が少ないです。

通信：
シェフ同士の通信は、無線機を使ったり、歩いて話したりする必要があり、少し面倒です。これはプロセス間の通信が複雑であることに似ています。しかし、同じシェフの二つの手が協力するのはより直接的で効率的であり、これはスレッド間の通信と協力がより簡単であることに似ています。
Salesforce Agentの初期設定をしよう

Salesforceのエージェント初期設定の方法を解説します


今回の内容は動画でも解説してます

<iframe width="560" height="315" src="https://www.youtube.com/embed/2Kq0j9WT-64?si=bnuwpKwooINyHFtz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

なお、エージェントの設定はこちらのTrailkheadから取得できる無料環境で試しました

https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-einstein-copilot/connect-your-flows-to-einstein-copilot?trail_id=build-ai-assistants-with-einstein-copilot


## 言語設定を変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/e53d4aa6-dcce-c831-cbc2-67c369b99eb6.png)


## Einstein設定

※参考ヘルプ

https://help.salesforce.com/s/articleView?id=sf.generative_ai_enable.htm&type=5


Einstein設定を有効化します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/c7728925-99d9-fb9c-f900-06406ccde7f8.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/cba2f36e-9822-f617-bdbf-00e9ad9a1f36.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f773ae7a-c70a-3972-4eb0-ac9ab130f9ea.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/cb74f030-22de-7a52-431f-77d47168b7e3.png)


Agent Nameの「Einstein Copilot」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/0eb9eaa8-90ae-0f38-cac1-cbd9ecd65025.png)


右上の「ビルダーを開く」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/dbb4f402-7637-9644-4d31-26152b833fbf.png)

右上の「有効化」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4a0e1dc9-1316-1408-7633-48517f3986c9.png)

「有効」のチェックがついていることを確認します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/a0a30b6c-a6df-9fda-a87c-a054f3d3cf25.png)



この有効が無いと
「問題が発生しました。更新して、もう一度お試しください。」というエラーが出てしまうのでご注意ください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/5c16cda7-4e1a-a888-c0cf-d5419eb74bc2.png)

これで完成です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/6b84f20a-bf7d-cf04-c8c1-9c987ba7fb9f.png)
【C#】Timerを使ってタイムアウト処理を書く

# Timerを使っていろいろやってみたんですが
## サンプルコード
マイクロソフトの公式サイトのサンプルコードを参考に作成しました。
※あくまでも使用例のイメージなのでコンパイルは通していません。コンパイルエラー出たらごめんなさい。
https://learn.microsoft.com/ja-jp/dotnet/api/system.timers.timer?view=net-8.0

## サンプルコード
```Timer2.cs
using System;
using System.Timers;
using System.Threading;
// Timer 自体は System.Threading にも存在するので明示しておく
using Timer = System.Timers.Timer;
public class Example
{
    private static Timer aTimer = null!;
    private static bool IsTimer = false;

    public static void Main()
    {
        SetTimer();

        aTimer.Enabled = true;         //タイマー開始
        IsTimer = true;
        while (IsTimer)
        {
            //最適化でwhile処理が省略されてしまうのを防ぐ
            //Sleepを使っているが、UIが固まることがないのでおすすめ
            Thread.Sleep(1);
        }

        //2000ms経過したらループを抜けて以下の処理をする
        IsTimer = false;
        aTimer.Enabled = false;

        Console.WriteLine("終了");
    }

    private static void SetTimer()
    {
        // Create a timer with a two second interval.
        //aTimer.Intervalで時間指定もできる
        aTimer = new Timer(2000);

        // Hook up the Elapsed event for the timer. 
        aTimer.Elapsed += OnTimedEvent;
        aTimer.AutoReset = false;      //タイマーを繰り返すか否か
        aTimer.Enabled = false;
    }

    //タイマーでセットした時間が経過したらこのイベントが呼ばれる
    private static void OnTimedEvent(object? source, ElapsedEventArgs e)
    {
        IsTimer = false;
        aTimer.Enabled = false;
    }
}
```

別スレッドの処理が終わるまで待ちたいときもこれが使える。
他のスレッドの処理内で、処理が終わったらIsTimerフラグをfalseにしてあげればよいかなと思う。
何かしらの原因で無限ループになってフリーズしないためにもタイマーでタイムアウト処理は各必要がある。
Power AutomateでTeamsのチームメンバーの役割を取得する

# 前提条件
**プレミアムコネクタの［HTTP］コネクタを使用します。Power Automate Premiumプラン等の有償ライセンスが必要です。** Microsoft365ライセンスの範囲内で、解決方法に関する公開情報や有用な事例の確認は現在至っていません。

# 手順1. Microsoft Entra管理センターで認証設定をする
まず、Microsoft Entra管理センターで以下項目を事前に設定します。

アプリケーションの登録をします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/750a062c-f525-c864-840e-da2893d23606.png)

証明書とシークレットでクライアントシークレットの作成をします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/f324fc56-ac4b-6d24-d529-8cfcb8b57c78.png)

APIのアクセス許可で「TeamMember.Read.All」「TeamMember.ReadWrite.All」に対して管理者の同意を付与します。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/4c78c157-ffcc-df69-4715-5520f8feef4b.png)


認証設定の詳細については、以下記事をご確認ください。

https://learn.microsoft.com/ja-jp/graph/auth/auth-concepts

# 手順2. HTTPアクションでアクセストークンを取得する
［HTTP］アクションで各項目を設定し、アクセストークンを取得します。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/4276d40e-43da-c91e-1597-269a87162c0e.png)



# 手順3. JSONの解析でアクセストークンを抽出する
［JSONの解析］アクションを使用して、HTTPの「Body」を解析し、アクセストークンを動的なコンテンツとして抽出します。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/c8e5cd93-636e-7808-60e6-8391b05b86d9.png)

今回はGraph APIでTeamsのチームメンバーの一覧表示を取得するので、URIを以下のように設定します。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640497/9bf21adc-ed03-f04e-fd3f-395b12383a7c.png)

https://learn.microsoft.com/ja-jp/graph/api/team-list-members?view=graph-rest-1.0&tabs=http
VSCodeの覚えておきたい便利ショートカットキー集

**今回はVSCodeの覚えておきたい便利ショートカットキーを記事にしたいと思います！**

# 1. 基本操作
ショートカットキー	操作内容
Ctrl + P (Mac: Cmd + P)	ファイル名で素早くファイルを開く
Ctrl + W (Mac: Cmd + W)	開いているファイルを閉じる
Ctrl + Shift + N (Mac: Cmd + Shift + N)	新しいウィンドウを開く
Ctrl + K, Ctrl + S (Mac: Cmd + K, Cmd + S)	キーバインド（ショートカット）一覧を開く

**これらの基本操作は、頻繁に使うため覚えておくと便利です。特に「Ctrl + P」でのファイル検索はプロジェクトが大きくなるほど重宝します。**

# 2. テキスト編集関連
ショートカットキー	操作内容
Ctrl + D (Mac: Cmd + D)	選択した単語を次々に選択
Ctrl + / (Mac: Cmd + /)	コメントアウト/コメント解除
Alt + ↑/↓ (Mac: Option + ↑/↓)	行を上下に移動
Shift + Alt + ↓/↑ (Mac: Shift + Option + ↓/↑)	行を複製して上下に移動
Ctrl + Shift + K (Mac: Cmd + Shift + K)	現在の行を削除

**「Ctrl + /」でのコメントアウトや、「Alt + ↑/↓」による行の移動は日常的に多用します。コードの整形や編集がスムーズになるので、最初に覚えておきましょう。**

# 3. コード補完・ナビゲーション
ショートカットキー	操作内容
Ctrl + Space (Mac: Cmd + Space)	コード補完を表示
F12 (Mac: Cmd + Click)	関数や変数の定義へ移動
Ctrl + B (Mac: Cmd + B)	サイドバーの表示/非表示
Ctrl + Shift + O (Mac: Cmd + Shift + O)	ファイル内のシンボルを検索
Ctrl + T (Mac: Cmd + T)	プロジェクト全体のシンボルを検索

「F12」で定義にジャンプしたり、「Ctrl + Space」でコード補完を呼び出すことで、コードの理解や編集が効率化します。特に長いコードのナビゲーションには欠かせないショートカットです。

# 4. マルチカーソル操作
ショートカットキー	操作内容
Ctrl + Alt + ↑/↓ (Mac: Cmd + Option + ↑/↓)	カーソルを上下に追加
Shift + Alt + クリック (Mac: Cmd + Option + クリック)	任意の位置にカーソルを追加
Ctrl + Shift + L (Mac: Cmd + Shift + L)	選択した単語をすべて選択
解説:
マルチカーソルを使えば、複数の箇所を同時に編集できるので、一括編集が必要な場面で役立ちます。

# 5. ターミナル操作
ショートカットキー	操作内容
Ctrl + Shift + ~ (Mac: Cmd + Shift + ~)	ターミナルを開く/閉じる
Ctrl + C	実行中の処理を停止
Ctrl + ↑/↓	コマンド履歴をスクロール

**ターミナルをVSCode内で開くことで、エディタとターミナルを切り替える手間が省けます。Ctrl + Shift + ~ は頻繁に使うので必ず覚えましょう。**

# 6. エディタの分割・ナビゲーション
ショートカットキー	操作内容
Ctrl + \ (Mac: Cmd + \)	エディタを分割
Ctrl + 1/2/3 (Mac: Cmd + 1/2/3)	指定のエディタにフォーカス
Ctrl + Tab	開いているファイル間を切り替え

エディタを左右に分割し、同時に複数のファイルを操作できるようにするのは、VSCodeの強力な機能の一つです。

# 7. デバッグ関連
ショートカットキー	操作内容
F5	デバッグの開始
Shift + F5	デバッグの停止
F9	ブレークポイントを設定/解除
F10	ステップオーバー（次の行に進む）
F11	ステップイン（関数内に入る）

デバッグのショートカットを覚えると、バグを素早く解決できるようになります。特に「F9」のブレークポイントの設定は便利です。

# 8. プロジェクト全体での検索・置換
ショートカットキー	操作内容
Ctrl + Shift + F (Mac: Cmd + Shift + F)	プロジェクト全体で検索
Ctrl + Shift + H (Mac: Cmd + Shift + H)	検索結果を置換

大規模プロジェクトでは、複数のファイルをまたいで検索・置換する機能が非常に便利です。

# 9. 覚えておくと便利な裏技
ショートカットキー	操作内容
F2	変数名・関数名のリネーム
Ctrl + Shift + P (Mac: Cmd + Shift + P)	コマンドパレットを開く

「F2」でリネームすることで、関連する全ての場所が自動的に更新されます。「Ctrl + Shift + P」でコマンドパレットを開けば、様々なコマンドにアクセスできるため、VSCodeのすべての機能に素早くアクセスできます。

# まとめ
上記のショートカットキーを覚えることで、VSCodeでの開発がスムーズになります。**最初はよく使うものから少しずつ慣れていくのがおすすめです。特に、ファイル検索（Ctrl + P） や ターミナル操作（Ctrl + Shift + ~） は、日常的に使うため優先的に覚えると良いでしょう。**

ショートカットを使いこなして、開発の効率をさらに高めましょう！ 🚀
**毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです。**
大規模MAUサービスのUXを向上させる魅力的なDAPツール

# 概要
- 皆さんはDAPというものをご存知だろうか？
- Degital Adaption Platformの略で、
    - Webサービスの使い方がわからない新規利用者に対してガイドを設置するといったことが簡単にできる魅力的なツールである
- 実務で、DAPツールを導入することになったので一度備忘録として情報を残しておきたいと思う
- 間違い等あればご指摘ください

# なぜDAPを使いたいのか
- 非エンジニアの操作性が高い
    - エディター画面で直感的なコンテンツ作成ができ、修正、デプロイも簡単
- 対象システムへ簡単に実装できる
    - JSのスニペットコードの埋め込みだけで完結
        - React, Vue, Angular用の埋め込みコードを用意しているツールもある
- スニペットを埋め込んで、外部サーバーからコンテンツを取得するので
    - DAPに障害が起きても、本体のシステムに影響が出ない
- サポートが充実
    - slackやteamsを通じて専属サポートがつく
- 多言語に対応している
    - ブラウザの言語設定や、システム側の言語設定の変更を検知して

# 自分が参加したプロジェクトの背景例
- ツアーにintro.jsを使っているが、以下のような課題があった
    - 特定の場面ごとにツアーを出し分けることができない
        - 言語別
        - サーバー別
        - 料金プラン別
    - デザイナーがツアーを考案しても、実装のためエンジニアと強い連携を行わなければならず、コミュニケーションコストがかかっている

# おすすめDAP３選
## WalkMe
世界最大手のDAPツール
ヨーロッパの大手Tech企業「SAP」に買収された

https://www.walkme.com/jp/?sfcmpid=701R500000CUXsTIAX&utm_campaign=top_japan_text_cross_cross_field-marketing_japan~paid-search~google-top-page&utm_source=google&utm_medium=paid-search&utm_content=homepage&term=&gad_source=1&gclid=Cj0KCQjwyL24BhCtARIsALo0fSBNWfoGZMwZ_dd6sdadelkTAYD2G-WlVMFhe49iduwp587N-kZUookaAkRCEALw_wcB

### 長所
- DAP業界で世界ナンバーワンを謳っているツール
- 非常に多機能
    - 全世界の言語に対応
    - 非エンジニア操作性が高い
        - 最終的に、コンテンツに対してCSS操作ができるので柔軟なデザインを作れる
    - 全ブラウザ対応
    - テスト環境対応
- 日本での営業時間帯でのサポートも充実


### 短所
- 多機能ゆえに、ガイドを表示させたいだけの場合はtoo muchになる
    - 業界でも強気な値段設定のため、不要な料金が発生しかねない

### 実装方法
- JavaScriptのスニペットを埋め込み

### 無料トライアル
- ないが、サポート担当との打ち合わせ次第ではエディターを貸し出してくれる
    - 公開されているサービスのURLを特定してエディターが立ち上がるので、テスト環境をローカルで準備する必要がない

## Techtouch
- WalkMeに次いで、国内をリードしているDAPツール
- ツアーを表示させたいだけとなると、費用感的に一番おすすめできるツール

https://techtouch.jp/

### 長所
- プランに関係なくCSのサポートがつく
- 使ってみた感じ、紹介したDAPの中で最も直感的で使いやすい
- ABテストに対応している
- テスト環境が用意されている
### 短所
- Safariに対応していない
    - 元々企業向けのサービスであり、safariの使用率が低かったため
    - 技術的に不可能ではないが、リソース的に現状難しい
    - 今後、対応される可能性がある
- デザイン変更が不自由
    - ダークモードやCSSに非対応
### 実装方法
- JavaScriptのスニペットを埋め込み
### 無料トライアル
- あり。基本は４週間程度だが、延長を申し込むこともできる

## Onboarding
- 国内の企業で、大手企業の利用実績が豊富なDAPツール
- Biz側の細かな要望を満たしている印象がある

https://onboarding.co.jp/

### 長所
- 利用者数の計測がステップ別で可能
    - 「ここのボタンをクリックしてからアコをクリックするまで〇〇人」等
### 短所
- デザイン変更が不自由
    - ダークモードやCSSに非対応
### 実装方法
- JavaScriptのスニペットを埋め込み
### 無料トライアル
- あり。基本２週間だが、延長を申し込むこともできる

# まとめ
- システムが大規模で複雑になってくると、プロダクトツアーをintrojs等で自作するのがしんどくなってくるので、費用感を見つつ積極的に検討していきたいと思った
[100%]生成AIの回答を「0」「1」にする

# はじめに

こんにちは、もちもちMAXです。
生成AIを使ってシステムを構築する際に、出力が固定されていないせいで苦しんだことありませんか？「０」か「１」かで回答して欲しいのに余計な文字が付け足されていたり、というのはよくある話だと思います。そこで、今回は出力を確実に「０」「１」にする方法を説明します。

といっても、今回の記事の内容は数ヶ月前くらいに思いついたことで、最近のOpenAIのアップデートでもう風化しています。。[構造化出力](https://platform.openai.com/docs/guides/structured-outputs/introduction)の精度が高いのでそれを使えばなんとかなるんですよね。
ただ、考え方など役に立つものがあればと思ったので書き残しておきます。

## やりたいこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/b3ffba2b-52b9-ac5a-7557-d5a754ab5e99.png)

やりたいことはこれです。質問文が歴史に関する質問であれば１（Yes）、そうでなければ０（No）を返すように生成AIを使います。ただ、構造化出力が発表される前は安定して2択を選択させるのが難しかったです。JSONモードを使ってもfunction callingを使ってもダメなことがあり、これのせいでシステムに組み込むのが難しくなっていました。

## 構成

生成AIの回答を「0」「1」で固定するための構成を示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/8f4534d2-1ec6-fd1b-37b0-b893bd14dd28.png)

構成の変更点は下記の2つです。
1. 生成AIのプロンプトを変更
1. BERTを追加

生成AIのプロンプトでは「歴史に関係しているかどうかで、ポジティブ or ネガティブなリアクションを取る」ように指示します。BERTはネガポジ判定をおこなうために利用しており、ネガポジ判定は入力文がポジティブな内容かネガティブな内容かによって0～1までの値を取ります。

1つ目の変更（プロンプト修正）によって、生成AIの出力はポジティブな文章かネガティブな文章かのどちらかになります。そして、2つ目の変更（BERT追加）によってネガポジ判定することで出力された文章を０～１の数値に変換することができます。あとはその数値に従って処理を変えるだけです。

この構成によって、生成AIを通りBERTから出力されるのは確実に**０～１の数値**になります。また、**生成AIの出力が変化しても文章のポジティブ、ネガティブが担保**されていれば最終的な出力は変わりません。

## さいごに

はじめに書いた通りですが、今となっては構造化出力でほぼ固定化できる上に、2択以上も選べるのでその方が良いです。あと、厳密には生成AIの回答が「０」「１」になるわけではないですね。。ただ、生成AI単体ではなくBERTのような自然言語処理モデルを組み合わせて使うのは、何か使えることがあるかも知れません。それに期待して本記事を書いた次第です。

それではまた！

ブログ↓
https://mochinochikimchi.com

アプリLP↓
https://mochinochikimchi.com/applications/mealmotion/index.html
30日でできる！OS自作入門を始めました#1

# 概要
本記事では「30日でできる！OS自作入門」を進めていくうちに気になった箇所、試していて躓いた箇所等をまとめる記事になります。
ちなみにわからないところはがんがんChat-GPT様に質問する気なので、間違っている点があればマサカリを投げていただけますととても喜びます。
書籍の詳細は省略いたしますので、気になられた方はぜひ書籍を購入してご自身でトライしてみてください！

https://book.mynavi.jp/ec/products/detail/id=22078

今回は、Chapter0の内容についてです。

# 書籍との出会い
書籍自体は学生時代の授業で購入しました。
ですが、授業では確か半分程度のところで終わっていた気がします。
どちらにせよ、内容自体をあまり覚えていないので「時間があるしやってみるか」という軽い気持ちで始めています。
このように感じたのは書籍が「表現が固くない日本語で統一されていたな～」というおぼろげな記憶があったからでしょう。
気軽に始めても問題ないような表現でまとめられている書籍のため、ぜひ皆さんも気になれば始めてみましょう。

# 学び
## IBM PC/AT互換機
まず、この言い方に聞きなじみがないです。いわゆるWindows PCのことらしい...
まずは何の略称なのかを調べてみました。「AT=Advanced Technology」という意味らしいです。
Advancedと言っているくらいなので、何かがよくなったのでしょう。
調べてみたところ(Chat-GPTさんに聞いたところ)、XT(=eXetend Technology)と呼ばれるものの改良版がこのATらしいです。
XT自体はIBM PCの改良版とのことですので、時系列的には以下のようなイメージなんだろうと理解しました。
1. IBM PC
2. IBM PC XT
3. IBM PC AT

ちなみにこのあたりの解説についてはかなり面白そうな記事を発見しました。
https://atmarkit.itmedia.co.jp/fsys/pcencyclopedia/003pc_history01/pc_hist02.html
書籍を進めることを優先したため、あまり読めていませんが暇な時間に読めるといいなと思っています。

## プログラミング言語と機械語の関係について
> ソースがどんなにかっこよくても、自分の期待する機械語になってくれないなら、うまく動かないので意味がない

という文章が書籍中にありました。
確かに、わたくしもソースコードがすっきり見えるかといった内容に気を取られることがコーディング中によくあります。機械語が後ろにいるという意識はなかったので、そのあたりを意識するのが大事だよな。と地に足をつけてくれたように感じました。
(余談ですが、研究室の教授が「昔はバイナリコードを眺めて「ここちげーじゃん！！」ってやってたんだよ」と話されていたのを思い出しました。すごい時代。)

# 苦戦したところ
この章は心構えを説明していたり、書籍の内容に関する俗にいう「これが嬉しい」をまとめられているだけでしたので、特に苦戦する箇所はありませんでした。

# まとめ
Chapter0はビジネス書で言う「はじめに」の部分でした。世の中では「書籍は気になる情報だけピックアップしていればいい」という書籍を辞書的な扱いとするアドバイスがちらほらありますが、この書籍のChapter0は読むべきだなと感じました。
何ができない、なんでこうしたがちらほら書かれています。心構えをもつのには文章量的にも最適なのではないでしょうか。
もっと言うと読んでいてワクワクするのでシンプルにおすすめです。

以上となります！次のChapter以降もマイペースにまとめていければいいかなと考えています。
少しでも良いなと感じられたらいいね等よろしくお願いいたします。

# ピックアップ単語
※書籍の中で「聞かれてもしっかり説明できないな」という単語を個人的にまとめたものです。性格的に「とりあえずわからないでいいから進めるか」というタイプなので、気が向いたタイミングでいずれ個別で記事にするかもしれません。この記事ではメモ+何がわからないといった備忘録程度のことのみ書きます。
- コンパイラ：ソース→機械語にするもの(詳細な説明ができない)
- ビルダー：パーツが用意されていて、組み合わせるだけで目的のものが出来上がるものという理解でいったんスルー
- Delphi:デルファイと読むらしい。恥ずかしながら初めましてでした...
- gcc:もちろん存在は認知していますが、何をしてくれるとかはよくわかっていないことに気づきました
- レジスタ：機械語を扱うときのプログラミング言語で言う変数にあたるものらしい
【備忘録】Cisco ASA でキャプチャしたパケットをWindows PC にTFTP する

今回は使った技術の備忘録です。簡単な作業でもずぶの素人がやると時間が溶けますね。
今度から溶かさないように残します。

## 背景
Cisco ASA (具体的にはFirepower)のトラブルシューティングで、パケットキャプチャはできたが、Windows に持ってくるのに苦労した。[Ciscoの公式ページ](https://www.cisco.com/c/ja_jp/support/docs/security/asa-5500-x-series-next-generation-firewalls/118097-configure-asa-00.html#toc-hId--1450804662)はこちら。
## 概要
1. パケットキャプチャするコマンドをASA で打つ
1. Windows PC ではtftpd64 を起動する
1. asa からコマンドでWindows PC に向けてtftp する

ポイントは、Windows PC はそのままではTFTP サーバ（ファイルを受ける側）として動作しないこと、ASA からTFTP の送信先の権限に気を付けることです。


## 1. パケットキャプチャのコマンド
何はともあれASA にTeraterm します。物理でもVPN でも。
そして下のコマンドを打てばパケットキャプチャが開始します。
今回は、X.X.X.X からY.Y.Y.Y への通信をキャプチャします。
CAPTURE_NAME, PROTOCOL はそれぞれ任意のそれを入れます。
```
> enable
# capture CAPTURE_NAME interface outside match PROTOCOL host X.X.X.X host Y.Y.Y.Y
```
先に言っておくと、止め方は次のコマンドです。
```
# no capture CAPTURE_NAME
```
パケットキャプチャを開始したら、問題の通信を試行し、気が済んだら停止します。
キャプチャは、/pcap というところに保存されるようです。
## 2. Windows PC で、TFTP を待ち受ける
TFTP の基本は
* ファイルをやり取りするプロトコル
* ファイルを受ける方がサーバ
* UDP 69

冒頭で述べた通り、Windows PC にTFTP サーバの機能はありません。そこで、tftpd64 というフリーソフトをインストールします。
合ってるか知らないが[ここから](https://pjo2.github.io/tftpd64/)ダウンロードしました。
こんな感じでウィザードが立ち上がりますが全部初期設定でインストールします（※）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617557/6cac2558-6882-3f9e-3409-a292f0214743.png)
このソフトを起動するなりWindows PC がTFTP サーバとして機能するようです。

※初期設定とは言ったが、destination folder を初期設定のままにしたら、前使った環境では権限の関係かで送れなかった。書き込み権限がきっと必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617557/6184b7df-e7e4-77d4-3df6-fffca28d20ad.png)
### ファイアウォール
UDP 69 を空けときます。お好きな方法で。

copilot の回答。パワーシェルのコマンドです。
>UDP 69番ポートを許可するファイアウォールルールを追加
>New-NetFirewallRule -DisplayName "Allow TFTP" -Direction Inbound -Protocol UDP -LocalPort 69 -Action Allow

空けなかったら空けなかったで起動時に要求されるかも。（されました）
## TFTP で送信
前準備として、tftpd64 を起動し、 __権限が適切に設定されたフォルダ__ を指定しておきます。
黄色でハイライトしたところから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617557/f7ef4cd8-9e43-f84a-79be-f4e7462db45a.png)

IP アドレスはVPN なら仮想インターフェイスのIP を選択。

ASA で打つべきコマンドはこうです。TFTP サーバのアドレスがZ.Z.Z.Z です。
```
# copy /pcap capture:CAPTURE_NAME tftp://Z.Z.Z.Z
```
そしたらCLI に!!! が並んで送信が進行します。
対象のフォルダにキャプチャしたファイルがあるはずです。

終わり
VSCode+Markdown Preview Enhanced: PuppeteerのPDF文字化け対策

解決まで結構手間取ったのでメモ。

Windows 10, VSCode 1.94.2, MPE 0.8.14。

Markdown Preview Enhancedのプレビュー画面から右クリック→Export→Chrome(Puppeteer)→PDFで出力したファイルが文字化け(豆腐化)するようになっていたが、

- https://qiita.com/kenichiuda/items/5c76748297f42106d797
- https://zenn.dev/koukiito/articles/1615331c8fcaa9

を参考にフォント設定をしたら治った。

1. VSCodeでCtrl-Shift-Pでコマンドパレットを出し、”Markdown Preview Enhanced: Customize CSS(Global)”を選択。
1. `(ホームディレクトリの)\.crossnote\style.less`が開くので、
1. 次を追加して保存。
    ```
    @media print {
      .markdown-preview.markdown-preview {
          font-family: "Meiryo";
      }
    }
    ```
    フォントはMS Gothicとかでも良い。
直近2週間の人工知能ニュース

# Hello World
こんにちは、まんとひひです。今週、来週は各所から大きな発表がありそうですね～。マイクロソフトが何やら大きな発表がありそうですし、楽しみです:)友人がslackで共有してくれた面白いAI界隈のトレンドをまとめました～

# Computer use(by Anthropic社・10月23日)
　対話型のAI(Cluade)がパソコンをリアルタイムでプロンプトに応じて操作してくれるものです。
 
https://www.youtube.com/watch?v=jqx18KgIzAE

以下のサイトが参考になります。

https://qiita.com/hedgehog051/items/eddcf26ad5d1dc8086d5

実行(Windows)は以下のコード

```c:Powershell
env:ANTHROPIC_API_KEY="your api"
docker run -e ANTHROPIC_API_KEY=$env:ANTHROPIC_API_KEY -v ${HOME}/.anthropic:/home/computeruse/.anthropic -p 5900:5900 -p 8501:8501 -p 6080:6080 -p 8080:8080 -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest
```

コマンド実行後、ローカルホストにアクセス
http://localhost:8080/


使用感としては、[OpenInterpreter](https://www.openinterpreter.com/)(対話型のOSS)に似ています。これからの進化に期待です。これからのPCは、デスクトップ上でAIが色々してくれるでしょうね。


# CoTracker3 (By Meta社・10月15日発表)
https://cotracker3.github.io/

:::note info
information
### CoTracker3
 複数の個体の姿勢推定、トラッキング(追跡)を可能にする人工知能です。
:::

![Videotogif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3743979/2c1e2928-f228-95e7-2478-ff8526e217ed.gif)

　上のgifは、こちらの[huggingface](https://huggingface.co/spaces/facebook/cotracker)で出力しました。アノテーション数は**たったの3枚のみ**です！3枚でこの精度は、すごいです。肌感覚では、DeepLabCutの20枚以上に匹敵する感じがします。出力も早く、15秒ぐらいです。
 

 

　オンラインモード(各フレームごとで追跡)とオフラインモード(ビデオ全体を一括解析)の両方が提供されています。ちなみに、トラッキング界隈で有名な[DeepLabCut](https://www.mackenziemathislab.org/deeplabcut)はオフラインモードです。DeepLabcutのアーキテクチャーは、みんな大好きTransformerじゃなくて、ReasNetが主で少し古い印象です。自分がDeepLabCut使っていたとき、リアルタイムで複数個体に対応するモジュールがDeepLaabCutには実装されていませんでした。しかも、リアルタイムで処理するDeepLabcut-liveは複数個体に対応していなくて、トラッキングも出来ませんでした。それが、このAIはリアルタイムで複数個体のトラッキングが出来るとこがすごいです。
 
　しかも、オンラインモードとオフラインモードの評価を見てみると、オンラインモードがオフラインと拮抗しています。開発者に聞いてみたところ、オンラインとオフラインの並列処理も出来るみたいです。障害物があっても、何とかなりそうですね！

　Cotarcker3の仕組みを見てみると、「cotracker3 の学習プロセスは合成データセットで事前学習→cotracker v3, tapir, cotracker(v2とか以前のモデル)などで実データに対して予測を行い疑似ラベルとする。→その疑似ラベルをアンサンブルしてco-tracker v3をトレーニングする。」って感じみたいですね。　
　Depth Anything(深度推定のAI)しかり合成データセットの活用はとってもホットな領域ですね。

 # Consistency models (by OpenAI社・10月23日発表)

 :::note info
information
  ### Consitecy modelsとは
　拡散モデルの代替として、ノイズからデータへの変換を一段階で実現できる「Consistency Models」を提案しています。従来の拡散モデルはノイズを段階的にデータへ変換するため、計算に時間がかかるという課題がありましたが、整合性モデルは一段階で高品質なサンプルを生成でき、計算量を抑えつつ、複数段階でサンプリングすることで品質を高めることも可能です。
:::
 OpenAI社の発表↓
 
 https://openai.com/index/simplifying-stabilizing-and-scaling-continuous-time-consistency-models/
 
論文↓

https://arxiv.org/abs/2410.11081

Consitency modelsに関連したツイート

https://x.com/mark_k/status/1849141701518004518?s=19


　このモデルは特定のタスク用に訓練されることなく、画像の修正や補完、カラー化、解像度の向上などの「ゼロショットデータ編集(モデルはそのタスクのために特別にデータを使って訓練されることなく、すでに持っている知識や能力を応用して実行することができる)」を実現できます。実験結果として、CIFAR-10やImageNet 64×64などの画像データセットで、整合性モデルは拡散モデルを蒸留する手法よりも高品質なサンプルをより少ないステップで生成でき、従来の一段階生成モデルを上回る性能を達成しています​。
 
 　Consitency modelsが発表されて1年半経ちました。そこから、OpenAIが目を付けて、さらなる高速かつ効率化に貢献しました。大規模言語モデルに、OpenAIがこの技術を応用するか分かりませんが、画像生成の域を超えての応用が期待できますね。