OmniAICreator/Qiita-1.07M huggingface dataset:
【TypeScript】型の変更が伴うデータの整形と整形後の型の定義を同時に行う

#### 対象読者
TypeScriptで型定義疲れしている皆様。
型の変更が伴うデータの整形と整形後の型の定義を同時に行いたい皆様。

#### はじめに
TypeScriptを使用していて、軽微な型の違いがあるものに対して都度調整と新たな型の命名をしていることに疲れてしまいました。（コードのメンテナンス性も下がる）
その時に実践した方法をメモします。

#### 結論
classを積極的に使おう。

#### 内容

型の変更が伴うデータの整形と整形後の型の定義を同時に行っていきます。

例 : openAPIから型を生成したケース

openAPIから型を生成し、下のようなArticleの配列が返却されることがわかっているとします。

```
Article {
  id: string;
  title: string;
  imageUrl: string;
  mainText: string;
  publishedAt: Date;
}
```

しかし、フロント側では`publishedAt`は文字列として整形して表示したいので、表示側では

```
FormattedArticle {
  id: string;
  title: string;
  imageUrl: string;
  mainText: string;
  publishedAt: string;
}
```
として使っていきたいです。

このようなケースで、`Data`としてclassの方を定義

```
import { Article } from '@/openAPIから生成/article';

export class Data {
  readonly data: Article;

  constructor(data: Article) {
    this.data = data;
  }

  get article() {
    return {
      id: this.data.id,
      title: this.data.title,
      imageUrl: this.data.imageUrl,
      articleUrl: this.data.articleUrl,
      mainText: this.data.mainText,
      publishedAt: 【stringに整形してreturn】,
    };
  }
}
```

ここが本番↓

```
export type Article = typeof Data.prototype.article;
```
Data classのprototypeの中にgetterが返却するものの型（publishedAtはstringになっている）が取り出せます。

あとは適宜APIから返却されたデータに対してDataインスタンス化するマップ処理をするなどしてください。

これをすることで型の変更が伴う値の整形と型の生成が同時に行えました。
おめでとう！！！
Javascript+PHP+MySQLで面接室の予約システムを作ってみた

## 記事の概要
エンジニア未経験からの挑戦ということで企業様へアピールするためのポートフォリオを作成してみました。
作成手順と機能、工夫したところ、課題点を書き出してみようと思います。

### プロフィール
20代後半　男性
ITは全くの未経験(前職は営業)
就労移行支援にて０からプログラミングを学ぶ。
**ポートフォリオ作成は期間2ヵ月～2か月半**（思ったより苦戦しました…）

## 目的
* JavascriptとPHPを使いつつDBとの連携も行えるよう経験を積む
* 今の自分のレベル感を企業に判断してもらう
* 素のJs、PHPでどこまで書けるかチャレンジ

# スペック
**言語**
    Javascript (Vanilla Js)
    PHP 8.0.19
    
**DBMS**
    MySQL  Ver 8.0.29

**開発環境**
    Windows 11 Pro
    IIS　(Version 10.0.22621.2860)


## 完成画面
![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683991/51f94671-d6fa-9db1-610f-f30c7fe9491c.gif)

******************************


### こだわったところ
**「yyyy年mm月」と「ようこそ◯◯さん」**
![スクリーンショット 2024-06-19 091347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683991/99fbf2d6-aa59-77bb-76bf-285571d24b55.png)

カレンダー自体をPHPベースで作ってしまったため、「前月」「翌月」の位置、年月日の取得と「ようこそ◯◯さん」の取得が上手く行かず苦戦しました。
最初は面談室A,B,C毎にページを分けてやろうかと思ったのですが、最近のサイトなら1ページにほとんどまとめちゃうだろうな。という考えから当初の設計から根本的に変えました。

この時点で見切り発車も良いところ…これから作るサイトはとにかく綿密に設計を練ることを肝に銘じておきます。

<br>

**予約したい日付をクリックするとフォームが出現する**
![スクリーンショット 2024-06-19 091410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683991/cb65c4eb-c005-d94f-313a-1ae10f2a54f5.png)

日付をクリックしたら別ページに飛ばして、そこから予約させる方が無難で分かりやすいと思うのですが、敢えて1ページで収めるためページ遷移させず隠してたフォームを出すようにやってみました。
ここで大人しくiframe使っとけばこの後更に苦戦することは無かったかもしれない…。

欲を言えばフォームが出現してもスクロールせずに全体を視認出来る画面サイズにしておくべきでした。反省。

あと、既に予約されている時間帯には間違えて予約してしまわないようラジオボタンがクリック出来ないようにしておきました。これもこだわりポイント。
ただ、予約したアラートが出た時、即時反映で✕マークに出来ればいいんですが、どうにも難しく、やり方を模索中です。
それ以外は個人的に良い感じに作れたかなと思っています。

<br>

**モーダルに予約日時と部屋を反映させる**
![スクリーンショット 2024-06-19 091439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683991/9226657e-6fb3-6198-5f6b-ca72848cbd66.png)


これが一番時間掛かったかも。
Javascriptで面談室A,B,Cを取ってきて、クリックされた日付と曜日も取得、予約時間も見やすいように取得。
これだけならよかったのですが、ここからfetchでPHPに送っていくので、とにかく型を合わせるのが大変でした。

10:00~10:50などと書いてしまったため、「~」を省いたり、スタート時間と終わり時間を文字列から時間に変換したり、日付をDateオブジェクトに変換したりと、何度かやりながらこんがらがってしまいました。Javascriptは変数名しっかり分けないと混乱しちゃいますね。

## 振り返ってみて
今回は兎に角にも最初の設計から大きく変更してしまったため、時間も掛かり、後から後から仕様を継ぎ足していくという凄く効率の悪い進め方だったので、どこまで見通して設計出来るかというところが足りてないなと感じました。
経験の差が大きいと思うので、とにかく自分でサイトを作っていくに限ると思います。

あと苦労したのが**データの受け渡し**です。
未だに「理解出来てるか？」と言われるとまだまだなので勉強していくしかないですね。
結局様々な型のデータをDBからPHP、PHPからJs（逆も然り）と受け渡していけば分かってくると思うので、もう一度、型のおさらいと受け渡しをやってみようと思います。

これからの課題としては、自分がいつ予約したか分かるような**マイページを作ったり**、向こう一週間の予約状況が分かるページを作ったりしてUIを向上させることが出来そうです。

今回は素のJSとPHPで作ったため、次からはフレームワークも活用して拡張性の高いサイトを作っていきたいと思います。

## Github
Githubにも公開したのでよろしければ…

https://github.com/amedamasan/reservesystem.git
[ThoughtSpot]複数の並び替え（ソート）を設定する

## はじめに
ThoughtSpot利用歴2年目くらい。
そろそろ3年目になるかもしれない。
BIツールの使い方だけ分かってもダメなんだなと感じはじめている非エンジニアです。

## 並び替えを複数設定する
タイトルまんまです。
例えばこんな感じで、分類ごと・都道府県ごとのデータがあったとします。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1658354/3f31b5e9-1d33-f4d8-73e3-f11b093e1bcb.png)

このままだと在庫分類1、在庫分類2、都道府県、全部並びがバラバラなので、見やすい順番に並び替えたいと思います。

通常の並び替えは、項目名を直接クリック、もしくはオンマウスで表示される詳細ボタン（・・・）→ソート→昇順／降順　から並び替えができます。
これで在庫分類1を並び替えるとこうなります。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1658354/a52662c7-76d3-fe41-c64b-4c9868abf95f.png)

この状態で、更に在庫分類2も番号順に並び替えたい。
このとき、上記の方法で在庫分類2をクリックするとどうなるか……その結果は押して知るべし。
とどのつまり、在庫分類2だけにソートがかかって、在庫分類1のソートが消えてしまいます。
ではどうやるか。

答えは簡単で、在庫分類1でソート設定したまま、**Shiftキーを押しながら** 在庫分類2をクリックすると、追加でソートの設定ができます。
同じように都道府県も**Shiftキーを押しながら** ソートをかけると、こうなります。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1658354/b78574e1-d427-f9a2-20d4-ad7534ab6cde.png)
綺麗にソートできましたね！

では検索バーではどうなっているかというと、こうなっています。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1658354/1ce68b40-f291-6bb3-befe-6c07c2c609a1.png)
**並び替えをしたい順番に、並び替えのキーワードで指定** している感じです。

さて、ここで都道府県の順番が北から順番に並んでいることに気付いたでしょうか。
このようにデフォルトの昇順・降順ではなくカスタムソートの設定も可能です。
[カスタムソートについてはこちらの記事](https://qiita.com/shiisaa/items/b7e70fa8434ceaefe3fa "[ThoughtSpot]カスタムソート機能を使ってみた")からどうぞ。

## おわりに
ThoughtSpotを使う人を「スポッター」と呼ぶそうです。
なんか額に雷マーク付いていそうですね。
そうは思はないかい？ _ス_ ポッター。
Perplexity Proを使ってみた

# はじめに

ソフトバンクユーザー(ワイモバイル、LINEMOも対象)なら、生成AI検索「Perplexity Pro」が1年無料になるとのことで早速申請して使ってみます。

・2024/06/19 9:00より申請可能
・Perplexityは複数の大規模言語モデル（GPT-4o、Claude-3、Llama3など）を選択できる。

以下のページより申請可能です。

https://www.softbank.jp/mobile/service/perplexity-ai/

# Home画面

最初に表示される画面です。ChatGPTを使用したことがあれば特に違和感はないですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/a87d7500-5bc9-94f7-1e35-cdc7fc73f2a5.png)

Perplexity AIについて聞いてみる。回答の根拠となるソースが表示されるところが良いですね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/63da63f8-55e0-515f-fde2-a8dffafaa99d.png)


# 設定画面

左下の歯車アイコンから設定画面に移動できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/256864fe-b795-0db7-cc41-7832222caa43.png)

選択可能なAIモデル
・デフォルト
・Sonar Large 32K
・GPT-4o
・GPT-4 Turbo
・Claude 3 Sonnet
・Claude 3 Opus

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/13793e9d-227a-2946-a555-ea7117382e93.png)

画像生成モデル
・Playground v2.5
・DALL-E 3
・Stable Diffusion XL

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/d130d4ca-330c-6d69-36eb-5a67ee3475eb.png)

データの扱いに関して気になる方はOFFにしておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/90bcc2c8-9e60-0363-9d0b-4193b3db8c6f.png)


# 画像を生成してみる

一度チャットを始めないと画像生成できない？ようです。
適当に何か検索した後、右側に「画像を生成する」が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343142/3592afd5-1d31-0d51-90c2-44f2dd0da7b5.png)

Q:画像を生成するにはどうすればよいですか?

https://www.perplexity.ai/hub/faq/images-media
Custom pipelines: AWS Amplify Gen 2

Custom pipeline について。

この文章を書くにあたっての要件は、以下の通り。
- Backend API を ECS に deploy する。
- Container Image の build を含めて pipeline をまとめたい。
    - これは必須ではない。build してある image を使う道もある。

## Custom pipelines
- Amplify CI 以外に、GitHub Acitons や Amazon CodeCatalyst での pipeline 実装が紹介されている。Official Docs では。 [^1]
- Amplify CI は Gen 1 から CI 内での Docker Commnad は実行できない。6月19日時点。[^2]
- サービスロールに必要な管理ポリシーを添付する。 `arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess`
- Frontend Application の pipeline と連携する場合は、Webhook で起動させる。
- 
```TypeScript: backend.ts
// ECS
// README at: https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_ecs-readme.html
taskDefinition.addContainer("fargate-app", {
  image: ecs.ContainerImage.fromAsset("./"),
  portMappings: [
    {
      containerPort: 80, // コンテナ内部のポート
      protocol: ecs.Protocol.TCP,
    },
  ],
});
```

```yaml: buildspec.yml
version: 0.2

phases:
  build:
    commands:
      - echo Build started on `date`
      - echo set up the build-spec when using CodeBuild...
      - export CI=1
      - npm ci
      - npx ampx pipeline-deploy --branch $BRANCH_NAME --app-id $AMPLIFY_APP_ID --debug
```

## Tips
- `--debug` option を付与すると、より詳細な log が出る。

## Conclusion
「環境にこだわれ」

https://x.com/rakuencardman/status/1802987364433953250

これに同意する。

なぜなら、人を変えることは難しい。

自分を変えるのは自分との向き合い方次第。

組織は人の集まり。そうなると、環境にこだわるしかない。

組織を変える努力は、取り組んだほどの得られるものは少ないと思う。

今いる場所が自分が成長できる場所なのか常に考える。

そのために、毎月振り返りをスケジュール化した。


[^1]: https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/custom-pipelines/
[^2]: https://github.com/aws-amplify/amplify-hosting/issues/2550
【図解】エンディアンとは

本記事では、**エンディアン**について解説します。エンディアンはネットワーク通信やバイナリデータを処理するときに重要な概念です。

まず、エンディアンを理解する上で必要となる**メモリ**と**バイト**について説明します。

# メモリ
**メモリ**は、実行中のプログラムやデータを**一時的に格納**する部品です。


メモリは読み書き可能な**メモリセル**で構成されています。それぞれのメモリセルは、電圧の高低で 0 または 1 （1 ビットの情報）を記憶します。

1 バイト（ = 8 ビット）ずつに**アドレス**（番地）と呼ばれる番号がついています。1 つのアドレスごとに **2<sup>8</sup>（= 256）通り**の情報を表現できます。



![メモリ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/fc0eecea-abdf-3069-75e1-e691bcca97c6.png)


CPU はこのアドレスを指定して、メモリに格納された命令やデータを読み出したり、データを書き込んだりします。

# バイト
メモリの説明のなかでも紹介しましたが、**バイト**は情報量を表す単位です。

1 バイト（= 8 ビット）のメモリやストレージは、256 （ = 2<sup>8</sup>）通りの異なる値（`01000001` や `00110000`など）を表現できます。


1 バイトでは表現できる情報が限られているため、数値や画像、音声などのより大きなデータを扱うには、2 バイト以上のメモリやストレージが必要になります。

`010010011001011011010010` のような 2 バイト以上のデータの**上 8 桁**（`01001001`）は**最上位バイト**、**下 8 桁**（`11010010`）は**最下位バイト**と呼びます。

2 バイト以上のデータを、メモリやデータ転送で扱う際に**エンディアン**という概念が重要になります。

# エンディアンとは
エンディアンとは、データの格納順序や取り出し方を決めるルールです。バイトオーダーとも呼ばれます。**2 バイト以上のデータ**をメモリ上に格納したり、ネットワークを通じて送信したりする際に重要になります。



エンディアンには主に 2 つの方式があります。

**ビッグエンディアン**と**リトルエンディアン**です。

メモリ上で 2 バイト以上のデータは、ビッグエンディアンでは、**最上位バイト**から順に**最小のメモリアドレス**に格納されます。対照的に、リトルエンディアンでは、**最下位バイト**から順に格納されます。

32 ビットの数値 `01001001100101100000001011010010`（10 進数で `123456789`）は最上位バイトが `01001001` で、最下位バイトが `11010010` です。

![エンディアン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/8adea806-6302-be56-31f2-5b291c9158fc.png)

どちらのエンディアンを使っているかによって、同じデータでもメモリに格納される順番が異なります。


ビッグエンディアンで格納されたデータをリトルエンディアンとして解釈するなど、誤ったエンディアンで解釈すると全く異なる値になってしまい、データ処理で重大なエラーを引き起こす可能性があります。

例えば、32 ビットの数値 `01001001100101100000001011010010`（10 進数で `123456789`）をビッグエンディアンとしてメモリに格納した後、（格納した順序と逆順に）リトルエンディアンとして解釈すると、`11010010000000101001011001001001`（10 進数で `3523384905`）となってします。

エンディアンは、特にメモリ、ネットワーク通信、ファイルフォーマットにおいて重要な影響を及ぼします。

- **CPU のエンディアン**
CPU の設計によってエンディアンが決定されます。x86 や ARM[^1] などの多くのパソコン用 CPU はリトルエンディアンです。

- **ファイルフォーマット**
PNG や WAV などのファイルフォーマットは、それぞれの仕様に従ったエンディアンを使用しています。PNG はビッグエンディアン、WAV はリトルエンディアンです。
ファイルを読み書きする際には、そのフォーマットに従ったエンディアンでデータを処理する必要があります。

- **ネットワークプロトコル**
多くのネットワークプロトコルのヘッダーはビッグエンディアンを使用しています。そのため、リトルエンディアンの CPU では変換が必要になることがあります。


# おわりに
バイナリデータを扱う際には、エンディアンに注意することが必要です。エンディアンの違いによって、同じデータが異なる順序で格納され、誤った解釈が行われるとデータの整合性が失われる可能性があります。


[^1]: ARM はデフォルトではリトルエンディアンを使用しますが、ビッグエンディアンとリトルエンディアンの両方をサポートするバイエンディアンです。設定でエンディアンを切り替えることができます。
a

```
import pandas as pd
import jaconv
import re

# ファイルパスを指定
file_path_A = 'path_to_A.csv'
file_path_B = 'path_to_B.xlsx'
output_path_C = 'path_to_C.csv'

# ファイルの読み込み
df_A = pd.read_csv(file_path_A)
df_B = pd.read_excel(file_path_B, sheet_name=0, header=1)

# 正規化関数
def normalize(value):
    if pd.isna(value):
        return ''
    value = str(value)
    value = re.sub(r'\s+', '', value)
    value = value.upper()
    value = jaconv.h2z(value, ascii=True, digit=True)
    return value

# Bの3列目を正規化して4列目に追加
df_B['normalized_col_3'] = df_B.iloc[:, 2].apply(normalize)

# 出力用のリスト
output_data = []

# Aの各行に対して処理を行う
for index, row in df_A.iterrows():
    a_col4_normalized = normalize(row.iloc[3])
    
    if a_col4_normalized.endswith('Ｇ'):
        a_col4_normalized = a_col4_normalized[:-1]
    
    match_rows = df_B[(df_B['normalized_col_3'] == a_col4_normalized) & (df_B.iloc[:, 1] == row.iloc[1])]
    
    if not match_rows.empty:
        for _, match_row in match_rows.iterrows():
            output_data.append([a_col4_normalized, match_row.iloc[2]])

    if not str(row.iloc[5]).startswith('４'):
        a_col3_normalized = normalize(row.iloc[2])
        
        if a_col3_normalized.endswith('Ｇ'):
            a_col3_normalized = a_col3_normalized[:-1]
        
        match_rows = df_B[(df_B['normalized_col_3'] == a_col3_normalized) & (df_B.iloc[:, 1] == row.iloc[1])]
        
        if not match_rows.empty:
            for _, match_row in match_rows.iterrows():
                output_data.append([a_col3_normalized, match_row.iloc[2]])

# データフレームを作成してCSVに出力
df_output = pd.DataFrame(output_data, columns=['Normalized_A_col', 'Matched_B_col3'])
df_output.to_csv(output_path_C, index=False)

print("処理が完了しました。")
```
PowerShellを活用してZIPファイルを一括解凍する


開発者やシステム管理者の日常業務において、複数のZIPファイルを効率的に解凍し、整理する必要がしばしばあります。PowerShellのスクリプトを使用することで、このような作業を自動化し、手作業による時間の浪費やエラーを削減することが可能です。今回は、特定のディレクトリ内のすべてのZIPファイルを自動で解凍し、それぞれのアーカイブ内容を同名の新しいフォルダに展開するスクリプトについて解説します。

#### スクリプトの説明
以下のスクリプトは、カレントディレクトリ内の全てのZIPファイルを対象に実行されます。

```powershell
Get-ChildItem *.zip | ForEach-Object { $destPath = Join-Path $.DirectoryName $.BaseName; New-Item -ItemType Directory -Force -Path $destPath; Expand-Archive -Path $_.FullName -DestinationPath $destPath -Force }
```

##### 1. `Get-ChildItem *.zip`
このコマンドは、カレントディレクトリから`.zip`拡張子を持つファイルをすべて取得します。`Get-ChildItem` は、ファイルやディレクトリの検索に使用されるコマンドです。

##### 2. `ForEach-Object`
取得したZIPファイルそれぞれに対して、後続のコマンドブロックを実行します。`$_` は、現在処理中のオブジェクト（ここではZIPファイル）を指します。

##### 3. `Join-Path $_.DirectoryName $_.Base


Name`
ZIPファイルが存在するディレクトリと、ファイル名（拡張子を除く）を結合して、新しいディレクトリのパスを生成します。これが解凍先のフォルダパスになります。

##### 4. `New-Item -ItemType Directory -Force -Path $destPath`
解凍先のディレクトリを作成します。`-Force` オプションは、指定したパスにディレクトリが既に存在してもエラーを出さずに処理を進めるために使用します。

##### 5. `Expand-Archive -Path $_.FullName -DestinationPath $destPath -Force`
`Expand-Archive` コマンドを用いて、ZIPファイルを解凍します。`-Path $_.FullName` でZIPファイルのフルパスを指定し、`-DestinationPath $destPath` で解凍先を指定します。こちらも `-Force` オプションにより、解凍先のパスにファイルが存在しても上書きします。
UnityでOSC通信を行う

# UnityでOscCoreを使用してOSC通信を行う
UnityでOSC通信を行うには、OscCoreというライブラリを使用します。
今回はインストールから送受信までを紹介します。

## 前提条件
1. UnityHub・Visualstudioはインストール済み
2. Unity 2022.3.21f1

## OscCoreのインストール
まず、OscCoreライブラリをプロジェクトに追加します。
OscCoreはGitHubで公開されており、以下の手順でインストールできます。
1. OscCoreの[GitHub](https://github.com/stella3d/OscCore/releases)にアクセスします
2. パッケージをダウンロードする
3. UnityProjectにインストール

## メッセージを送信する

```OscSender.cs
using OscCore;
using UnityEngine;

using UnityEngine;
using OscCore;

public class OSCSender : MonoBehaviour
{
    private OscClient client;
    public string address = "/example";
    public string ipaddress = "127.0.0.1"; //localhost
    public int portNum = 9000;

    void Start()
    {
        client = new OscClient(ipaddress, portNum);
    }

    void Update()
    {
        // スペースキーでメッセージを送信
        if (Input.GetKeyDown(KeyCode.Space))
        {
            client.Send(address, 1); // とりあえずintを送信してみる
        }
    }
}

```

上記のスクリプトをGameobjectにアタッチし、
スペースキーを押すと指定したアドレスにOSCメッセージが送信されます。

# 受信を確認する
こちらのアプリを使用することで、
ローカル内でOSCの受信をチェックすることができます。

https://hexler.net/protokol

スペースを押すたびにこんな感じで表示されました。

![スクリーンショット 2024-06-19 120910.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524352/6e21b7ef-2bab-1754-a5c2-5f10d748f0ba.png)

## メッセージを送信する
先ほど送信したメッセージを今度はUnity内で受信してみます。

```OSCReciever.cs
using OscCore;
using UnityEngine;

public class OscReceiver : MonoBehaviour
{
    [SerializeField] private int port = 9000;
    private const string OscAddress = "/example";
    private OscServer server;

    private void Awake()
    {
        server = new OscServer(port);
        server.TryAddMethod(OscAddress, ReadValues);
    }

    private void OnDestroy()
    {
        server.Dispose();
    }

    private void ReadValues(OscMessageValues values)
    {
        Debug.Log(values.ReadIntElement(0));
    }
}

```
OSCRecieverをGameObjectにアタッチし、
スペースキーを押してOSCSenderからメッセージを送信してみる。

![スクリーンショット 2024-06-19 123509.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524352/7d42b191-e587-50bd-a1e7-d77b6a9c5adb.png)

## まとめ
比較的簡単にOSCの送受信が可能でした。
TwinklyというOSCを受信することで制御できる電飾があり、それを使用する機会がありましたので、機会があればUnityとTwinklyの連携について書いていこうと思います。

## Twinklyについて ※おまけ
https://twinkly.com/ja-jp

普通の電飾と異なるところとして、
専用のスマートフォンアプリを使ってキャリブレーションが行えるというところがあります。
OSC通信も行えるので空間全体の演出を行う際に有用な気がしています。
Thunder Bird 改行設定

# 概要
Thunder Bird のメール編集で
改行したときの無駄スペースが嫌です。
デフォルト設定されてる段落幅（\<p>）を何とかしたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23248/6ffd8b51-fd7d-58f9-ccf5-c2c053164361.png)


# 解決手段
- `設定` → `編集` → `HTMLスタイル`
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23248/0849500f-7081-706d-ba73-640e9df134b6.png">

- `既定で本文テキストの代わりに段落書式を使用する` のチェックボックスを **オフ** にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23248/ed2abc8e-c9cc-c526-f838-49e8d56be55c.png)

# 結果
普通の改行が入るようになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23248/d9e408d1-fa23-04d5-b398-f2e8fe2eefc1.png)

# 参考
https://aprico-media.com/posts/3887
pyzbarでlibiconv.dllが見つからないエラー

### エラー内容
Pythonにpyzbarをインストールして、実行したがDLLが見つからないとエラーが出る。

```
FileNotFoundError: Could not find module 'libiconv.dll' (or one of its dependencies). Try using the full path with constructor syntax.

FileNotFoundError: Could not find module 'C:\...\lib\site-packages\pyzbar\libzbar-64.dll' (or one of its dependencies). Try using the full path with constructor syntax.
```

### 解決策

Microsoft公式から、Viaual C++ 2013 再配布パッケージをダウンロードして、インストールする。

https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170#visual-studio-2013-vc-120--no-longer-supported

64bit版なら、ファイル名「vcredist_x64.exe」。

### 原因

見つからないとエラーが出ているlibiconv.dllとlibzbar-64.dllは両方ともpyzbarをインストールしたときに、pyzbarフォルダーに既にインストールされている（site-packages/pyzbar以下にある）。

また、Viaual C++ 2013 再配布パッケージには、libiconv.dllもlibzbar-64.dllも同梱されていない。
※パッケージをインストールする前にも、libiconv.dllとlibzbar-64.dllは、windowsフォルダ以下に配置されていない（検索しても無い）。

ただし、libiconv.dllもlibzbar-64.dllも再配布パッケージに入っているライブラリ（msvcp140.dll、vcruntime140.dll）がないと動かない。

つまり、当初ファイルが見つかりませんと出ていたエラーは、「libiconv.dllやlibzbar-64.dll（を動かすファイル）が見つかりません」と言っていることを実質的に示しており、混乱をまねくこととなった。
LambdaのトリガーにS3を設定した際に発生したエラーと対処法

# 背景
新規で作成したLambda関数のトリガーにS3バケットを指定しようとしたところ下記のエラーが発生。エラー対処の備忘録も兼ねて本記事を作成しました。


# 発生したエラー

下記のエラーが発生。

```
trigger の作成中にエラー が発生しました: Configuration is ambiguously defined. Cannot have overlapping suffixes in two rules if the prefixes are overlapping for the same event type.
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/7dee6883-8440-984a-508c-80181fe88eae.png)

# 原因
既存のLambda関数のトリガーに同じS3バケットを同様の条件でトリガーとしているものがあったため。



# 結論
EventBridge か Step Functionsを使用する。
どちらでも良さそうですが、今回は下記のように新規で作成するLambdaをEventBridge経由で呼び出すことで上記エラーを回避できました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/5527e266-af69-180f-0804-54d0d8b5542b.png)



# 参考

https://dev.classmethod.jp/articles/lambda-trigger-eventbridge-s3/


https://qiita.com/perlverity/items/fcc95e71a2d67063cfd0
【ChatGPT＋DALL-E3】【Dream Machine】動画の逆再生の方法です。


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

　今回は、Dream Machineで生成した動画の逆再生です。まぁ、ほかの動画もできるとは思いますが、未確認です。

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

　LumaAIのDream Machineの
　　コンテストに登録しました😀

　遺跡（ダンジョン）を
　　探索するエルフ女性という
　　　感じのものです。

　みなさんも
　　いい作品があれば
　　　アップしてください。
[Luma AIさんポスト](https://x.com/LumaLabsAI/status/1802681173682032983?t=X5U8yrlZk_cpj7htVjiuwA&s=03)
***
　さて、
　　今回は、
　　　動画の逆再生です。

　なぜ、逆再生するのか？

　実は、Dream Machineと言えども
　　最初の画像から
　　　少しずつ崩れていきます。

　アニメ調だったものが
　　いつのまにかリアルになったり、
　　　ものがなくなったり出てきたり。

　エルフが人間に
　　なっちゃったり😅

　まぁ、それはそれとして、
　　最後をビシッと決めたいとき、
　　　最初の画像に戻っていって
　　　　くれれば、決まる！

　そこで逆再生です。

　本来ならば、
　　動画編集ツールを
　　　使うところですが、
　　　　そこまで手間を掛けたくない。

　ならば
　　ChatGPTに
　　　お願いしよう、となるわけです。

　今回は
　　下記のポストを
　　　参考にしています。

　[studio vecoさんポスト](https://x.com/studio_veco/status/1801494705173315624?t=NRvMvQO0WB5FTFilcUTPRQ&s=19)
　「逆再生も #GPT4o でいけるやん！」
　　というポストでして、
　　　GPT-4oで行なえるものでした。

　ただ、私の場合は
　　いくらやっても
　　　エラーになってしまい
　　　　うまく行きませんでした。

　そこで
　　GPT-4oが
　　　教えてくれたライブラリを
　　　　指定してやることに。

　無事に逆再生が
　　できました😊
***
　では、手順をどうぞ。

　まずは、動画が必要です。
　　用意してください😊

　次に、
　　セッションが
　　　GPT-4oであることを確認。

　GPT-4oに
　　動画をアップロード。

　次のPromptを入力。
```Text:動画の逆再生Prompt
ffmpegを使って、逆再生で保存して
```

　送信してください。

　これで
　　Code Interpreterの処理が
　　　はじまります。

　やがて、
　　ダウンロードリンクが
　　　表示されるので、
　　　　タップしてダウンロードです。

　確認してみてくださいね。

　しかし、
　　まさかChatGPTで
　　　動画編集まで
　　　　できるとは思いませんでした👍

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

　今回は、ここまで。
Unity6PreviewでWebGL書き出しを試してみた（進捗報告）

https://qiita.com/sagaraKUN/items/ef9ba477edf14c585a05?utm_campaign=post_article&utm_medium=twitter&utm_source=twitter_share

で検証を始めてから１か月
腰据えてやり始めた後にWebGLだからできない
みたいになるのが嫌で仕事探しもそこそこに
WebGL将来性ありそうだなとずっとUnityでよくある実装の検証を続けてました。

以下は前回の追加で可能だったよくある実装と感想です

### Dotween系
UniTask連携も問題なく動きました

### UniRX+UniTask
NavMeshAgent管理で使ってますがUniTask問題なく動いてました

### AssetBundle+Addressableでの外部Asset読み込み
アプリと同じように動きますしブラウザだとメモリそんなに多くないので
なるべくAssetBundleの方が調整出来て良さそう

### NavMeshAgent一式
ルート制御は調整しないとさすがに無理でした

### OcculusionCulling
staticな状態で使うことになるからデザイン+アートと応相談って感じ

### TextMeshProでの埋め込みフォント利用
普通にいけます

### HerokuでProxy立てて外部API叩き
OpenWeatherで東京の天気を取得して表示を変えています

### Heroku+puppetterでのWebサイトスクレイピング
スクレイピング禁止のところ多くてXはダメでした。
Wikipediaは許可されてるって話なのでURLはWikipedia使って
サーバーでキャプチャ撮影したものを看板オブジェクトに貼ってます。
でもダメとは言われつつ収集自体は可能なので（著作権的な問題が多め）
内向けのリアルタイム売り上げviewerとか
競合の出してる数字集めるとかならUnityでも使えそう。

### 進捗こんな感じです
（スマホブラウザのテストなのでスマホで見てね）

https://sagarakun.github.io/APITest/

https://x.com/sagaraKUN/status/1803255642066649127

あとはキャッシュ領域にPlayerPrefsが入っちゃうのは気になりますが
こんな記事見つけたので対応できそう

https://tech.mirrativ.stream/entry/2023/08/14/105252

クオリティなどの問題もきっと限定的にするとか
スマホがホカホカになるのに目をつぶれば普通にいけるんでしょうね。

これが浸透したら
ほんとにアプリで出す意味って
Assetを非通信状態で利用できるくらいしか意味無くなるかも。

残りはマルチプレイヤーの検証とShaderの変なとこ探しをSHaderGraphで検証
デバイス側の検証。でもGPSもカメラも取れるっぽいんですよね。

しかしWebGL系の仕事全然ないな...
応募しても落ちてるし

普通のUnity仕事でもするかぁ
[AWS #8]セキュリティグループ

## はじめに
こんにちは
今回はセキュリティ分野の **「セキュリティグループ」** についてご紹介いたします。

## セキュリティグループ
セキュリティグループとは**VPC**(Virtual Private Cloud)上で、<font color=red>**通信制御をするファイアウォール**</font>のことです。（↓イメージ図）
![AWS08_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/fc276a1f-2713-04f9-d134-f501de836a5f.png)
:rolling_eyes:ファイアウォール？（…炎の壁？）
:upside_down:**「防火壁」** ですね。とあるものを守ります。
### ファイアウォール
**ファイアウォール（Firewall）** とは、企業などの社内ネットワークにインターネットを通して外部から侵入してくる不正アクセスや、社内ネットワークから、**外部への許可されていない通信に対しての「防火壁」** です。
![AWS08_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/b2d6f7db-02ed-8fa8-3d92-96ad1eceeb41.png)
:rolling_eyes:外部からの不正アクセスや社内ネットワークから**外部への許可されていない通信が無いかどうか判断**して、**管理者へ通知**するんですね。
:upside_down:より高いセキュリティを保てるよう々な付加機能を持っているものが多く、**様々なネットワークに柔軟に対応できる**ようになっているそうですよ。
### フィルタリングの方法
フィルタリングは**通過させるかどうか判断する方法**です。以下の3種類があります。

**・パケットフィルタリング型**
→ヘッダーを解析して、通過させるかどうかを判断します

**・サーキットゲートウェイ型**
→プロキシサーバ経由で接続を行い、パケットフィルタリング型システムの方法に加えて、ポート制御機能を持ちます。コネクションごとに認証を行います。

**・アプリケーションゲートウェイ型**
→プロキシサーバ経由で接続を行います。サーキットゲートウェイ型システムよりも詳細なアプリケーションプロトコルごとに認証を行います。

## 従来のオンプレミス環境
従来のオンプレミス環境では、インターネットと企業内LANの間にファイアウォールを設置していました。

:rolling_eyes:セキュリティの要件を厳しくするなら、サーバーやデータベースなどの**前にも**ファイアウォールを設置すれば良さそうですね。
:upside_down:有効な考えだけど**設置コストがかかる**から、現実的では無かったんだね。でもAWSでは、**「セキュリティグループ」という名前の仮想ファイアウォール**を使用することができます。

## セキュリティグループの詳細
セキュリティグループは、従来のオンプレミス環境では出来なかったことがあります。
それは **「インスタンスごとにファイアウォール設定を導入すること」** が可能になりました。
![AWS08_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/14e6e53d-1c08-ff20-0e2e-dbc237c57a8d.png)
セキュリティグループでは、通信の許可ルールを設定することができます。
しかし、**拒否ルールを設定することはできません。**

:::note warn
**許可したい通信のみ**をセキュリティグループに設定しましょう
:::
### デフォルト設定
VPCを作成すると、「default」という名前のセキュリティグループが自動的に一つ作成されます。デフォルトの設定は以下の通りです。

・**インバウンド：全て<font color=blue>拒否</font>します**（正しい、同じセキュリティグループが適用されたインスタンスからのみ許可されます）

・**アウトバウンド：全て<font color=red>許可</font>します**

またセキュリティグループは**ステートフル**（状態を保持する）なので、**インバウンドルールを設定すれば通信が可能**になります。
![AWS08_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/a4ad5ca4-5a33-ed7f-bdf1-a9444e458d08.png)
## まとめ

:::note info
AWSではセキュリティグループという**仮想ファイアウォールを使用**することができる
:::
:::note info
セキュリティグループでは、**インスタンスごとにファイアウォール設定を導入**することができる
:::
:::note info
一つのセキュリティグループを**複数のインスタンスに適用**することができる
:::
:::note info
セキュリティグループは、**ステートフル**である
:::


## おわりに
AWSのセキュリティグループは、「Amazon EC2」などのリソースに対して適用される仮想ファイアウォールの機能であることが理解できました。AWSの環境を安全に運用するためのセキュリティの基本だということを押さえていきます。（結構難しい…:expressionless:）

最後までお読みいただきありがとうございました！

>日頃より活用している参考書です。
>> **「参考書」**
[AWS認定クラウドプラクティショナー改定第3版](https://x.gd/19i6N)
>
> **「AWS公式サイト」**
[AWS セキュリティグループ](https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/vpc-security-groups.html)
>
>**「参考元」**
>[セキュリティグループとは？](https://aws.taf-jp.com/blog/57620)
>
>**「参考元」**
>[セキュリティグループってどんなグループ？](https://x.gd/vTbzW)
>
>**「参考元」**
>[Amazon VPCのセキュリティ基本](https://www.stylez.co.jp/aws_columns/aws_security/amazonvpc_security_basics/#AWS)
>
> **「Youtube」**
[【CLF-C02：AWSクラウドプラクティショナー】第12回 セキュリティグループ (セキュリティとコンプライアンス分野)](https://x.gd/iOcYl)
GitLensでPRを辿る方法


## 背景

PRに情報がまとまっていることが多いので、commitから大元のPRをサッと辿りたいと思いました。
色々と方法はあると思いますが、自分的にはこれが早いので備忘録として残します。
（たまに辿り方を忘れる）

## GitLensのセットアップ

使い方や設定については以下の記事などを参考にしてください。
本記事では解説しません。

https://future-architect.github.io/articles/20240415a/

## GitLensでPRを辿る

設定できたらこのようにカーソルがある行に「{コミットした人},{いつコミットしたか}・{タイトル}」が表示されます。

![スクリーンショット 2024-06-19 11.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259490/2748247e-c645-2d7d-d5e4-8363eee7f642.png)

この文字にカーソルを当てると以下のような表示が出てきますので、
赤枠で囲っている地球のアイコンを押下してください。

![スクリーンショット 2024-06-19 11.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259490/cd8e2d27-9dda-1a18-3999-704e1048c53d.png)

そうするとページが開き、コミットの画面に飛べます。
あとは赤枠で囲っている箇所を押下すればそのcommitが含まれているPRへ飛べます。

![スクリーンショット 2024-06-19 11.18.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259490/fc1a9d9a-94a7-55d6-d6f6-1502b0d3ae78.png)

以上です！
日本版DBSにおける犯歴情報の流れ

本日(2024年6月19日)付で、[学校設置者等及び民間教育保育等事業者による児童対象性暴力等の防止等のための措置に関する法律](https://www.sangiin.go.jp/japanese/joho1/kousei/gian/213/meisai/m213080213061.htm)が成立した。「[特定免許状失効者管理システム](https://qiita.com/KoichiYasuoka/items/cec8ed640da87ce0deeb)」や「[保育士特定登録取消者管理システム](https://qiita.com/KoichiYasuoka/items/9c546cc37c1b51efa646)」とは異なる「日本版DBS」として、[こども関連業務従事者の性犯罪歴等確認の仕組みに関する有識者会議](https://www.cfa.go.jp/councils/kodomokanren-jujisha)が立案したシステムである。

![2023-08-01japanDBS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/48a18792-6e68-8358-f6d7-9c8f67bca2a1.png)

このシステムまわりにおける「犯歴情報」の流れを、ざっとGraphvizで可視化してみよう。Google Colaboratoryだと、こんな感じ。

```
g="""digraph{
  node[shape=box,fontname=Helvetica]
  学校設置者等->こども家庭庁[label="犯罪事実確認書交付申請　　",penwidth=2]
  申請従事者->こども家庭庁[label="本人特定情報\l犯罪事実訂正請求　　\l",penwidth=2]
  こども家庭庁->法務大臣[label="本人特定情報　　",penwidth=2]
  戸籍情報連携システム[shape=cylinder]
  戸籍情報連携システム->法務大臣[label="本人特定情報　　",penwidth=2]
  法務大臣->地方検察庁[label="本人特定情報　　",style=dotted]
  地方検察庁->法務大臣[label="犯歴情報　　",style=dotted]
  法務大臣->こども家庭庁[label="犯歴情報　　",penwidth=2]
  こども家庭庁->申請従事者[label="犯罪事実確認書の写し　　",penwidth=2]
  こども家庭庁->学校設置者等[label="犯罪事実確認書　　",penwidth=2]
  地方裁判所->地方検察庁[label="刑事訴訟記録　　",penwidth=2]
}
digraph{
  rankdir=LR
  node[shape=record,penwidth=0,margin=0.05]
  x[label="<1>|<2>"]
  y[label="<1>法律に基づく個人情報の提供|<2>省令に基づく個人情報の提供"]
  x:1:e->y:1:w[penwidth=2]
  x:2:e->y:2:w
}"""
import graphviz
graphviz.Source(g)
```

私(安岡孝一)の手元では、以下の図が出力された。

![japanDBS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/77cca7b5-1e42-2610-c303-cababff454cf.png)

戸籍情報連携システムとの連動に関しては、[マイナンバー法](https://elaws.e-gov.go.jp/document?lawid=425AC0000000027)第九条第三項の「情報提供用個人識別符号」まわりを、もう少し直す必要がある。一方で、法務大臣と地方検察庁の間の「犯歴情報」の流れは、かなり深刻だ。省令を作れば何とかなるか、とも思ったのだが、[刑法](https://elaws.e-gov.go.jp/document?lawid=140AC0000000045)第三十四の二「刑の消滅」(2025年6月1日施行予定)との齟齬がどうにもならない。

> **第三十四条の二**　拘禁刑以上の刑の執行を終わり又はその執行の免除を得た者が罰金以上の刑に処せられないで十年を経過したときは、刑の言渡しは、効力を失う。罰金以下の刑の執行を終わり又はその執行の免除を得た者が罰金以上の刑に処せられないで五年を経過したときも、同様とする。

「日本版DBS」が20年前の「特定性犯罪」に関する「犯歴情報」を必要とするのなら、それは、刑法の改正を(少なくとも「特定性犯罪」における「刑の消滅」を延長する形で)おこなうしかない、というのが私個人の判断だ。まあ、このあたりは、こども家庭庁も法務省も気づいているようなので、今後の立法措置でのお手並み拝見である。
mindの研究 その81

# 概要
mindが、謎なので調べてみた。
練習問題やってみた。

# 練習問題
クリップボードをクリアせよ。

# サンプルコード

```


メインとは
　結果は　変数
　0をつみ
　"user32"と　"OpenClipboard"で　ＡＰＩ呼出し１　結果に　入れ
　エラー？
　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　結果を　数値表示し　改行する


　"user32"と　"EmptyClipboard"で　ＡＰＩ呼出し０　結果に　入れ
　エラー？
　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　結果を　数値表示し　改行する


　"user32"と　"CloseClipboard"で　ＡＰＩ呼出し０　結果に　入れ
　エラー？
　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　結果を　数値表示し　改行する



```

以上。
vbsの作法 その81

# 概要
vbsの作法、調べてみた。
練習問題やってみた。

# 練習問題
クリップボードからテキストを取得せよ。

# サンプルコード

```

Set ws = CreateObject("WScript.Shell")
str = ws.Exec("powershell.exe -command 'Get-Clipboard'").StdOut.ReadAll
msgbox str


```

以上。
cscの作法 その507

# 概要
cscの作法、調べてみた。
githubでc#見つけたのでやってみた。

# 参考にしたページ

https://gist.github.com/orange-in-space/564c7f839da641fa1c084a78ec29dc98


# サンプルコード

```
using System;
using System.Runtime.InteropServices;

namespace ConsoleClipboard
{
	class Program {
		private const uint CF_UNICODETEXT = 13;
		[DllImport("user32.dll")]
		static extern bool OpenClipboard(IntPtr hWndNewOwner);
		[DllImport("user32.dll")]
		static extern bool EmptyClipboard();
		[DllImport("user32.dll")]
		static extern IntPtr SetClipboardData(uint uFormat, IntPtr hMem);
		[DllImport("user32.dll")]
		static extern bool CloseClipboard();
		static void Main(string[] args) {
			string text = "てすと！＞＜";
			SimpleClipboardSetText(text);
		}
		private static void SimpleClipboardSetText(string text) {
			string nullTerminatedStr = text + "\0";
			byte[] str = System.Text.Encoding.Unicode.GetBytes(nullTerminatedStr);
			IntPtr hglobal = Marshal.AllocHGlobal(str.Length);
			Marshal.Copy(str, 0, hglobal, str.Length);
			OpenClipboard(IntPtr.Zero);
			EmptyClipboard();
			SetClipboardData(CF_UNICODETEXT, hglobal);
			CloseClipboard();
			Marshal.FreeHGlobal(hglobal);
		}
	}
}

```

以上。
僕なりの Vite 備忘録

# Viteって何？

Viteはビルドツール

Node.jsが必要



# Install



## インストールコマンド

`npm create vite@latest`：最新のViteで指定したフレームワークのプロジェクトを作成

`npm create vue@latest`：最新のViteで最新のVueプロジェクトを作成

いずれも `@3`、`@2`でバージョン指定可能

## jsパッケージのインストール

Vueを利用するためのjsパッケージをインストールする必要がある

`npm install`で`package.json`の記載に合わせて`mode_modules/`が作成される



# 設定

`Vite.config.js`が設定ファイル

設定ファイルで、オプションを色々つけれる

有名なとこだと、`@`で`src/`を指すようにできたりしたり、ビルドする際のルートディレクトリの設定を変えられたりする



# 開発



## ローカルの開発サーバーを起動

```bash
$ npm run dev
```



## ビルドとプレビュー

```bash
$ npm run build
$ npm run preview
```



## サーバーのポートを変更

`package.json`に`"dev": "vite --port 8080",`こんな感じの設定をする



## サブディレクトリにデプロイ

`vite.config.js`で`base: '/foo/',`のような設定をすると、`http://127.0.0.1/foo/`のように運用できる



## ビルド先ディレクトリを変更

`vite.config.js`で`build: { outDir: 'foo' }`のように設定すると、`dist`ディレクトリでなく`foo`になる
僕なりの Volta 備忘録

> [Volta公式](https://volta.sh/)
>
> [Node.jsバージョン管理ツール『Volta』を使ってみる](https://qiita.com/nakashun1129/items/47c09ccbbba73c4ef8c4)
>
> [Node.jsのバージョン管理はVoltaに決定](https://zenn.dev/aiueda/articles/7dcecaa05d4f24)



# 長所

- 迅速にバージョンの切り替えができる
- プロジェクト毎のバージョン指定ができる
- クロスプラットフォーム（macOS, Linux, Windows等）
- Voltaの設定は `package.json`に独自フィールドで追記される
- npmやyarnのバージョン管理もできる

# インストール

```bash
$ curl https://get.volta.sh | bash
```

> windowsの場合はインストーラーがあるらしいけど、↑で問題なくできたし、個人的には楽な気がする？



## Node.jsをインストール

```bash
$ volta install node
$ volta install node@00.00.0
$ volta install node@00
$ volta install node@latest
```



## パッケージマネージャーをインストール

```bash
$ volta install yarn
$ volta install npm
$ volta install @vue/cli
$ volta install vue
$ volta install json-server
```



## インストール済みのNode.jsやパッケージマネージャーを確認

```bash
$ volta list all
$ volta list node
```



# 基本

## ディレクトリ毎にNode.jsのバージョンを固定する

```bash
$ npm init
$ volta pin node@18.16.0
```

※ `npm init`しないと `package.json`が作成されずバージョン管理できないから注意



## グローバルに使用するnode.jsのバージョンを指定する

```bash
$ volta default node@00.00.0
$ volta insatall node@00.00.0
```
僕なりの vue-router 備忘録





# 基本



## コンポーネントとビューの違い

ビューは画面を構成するコンポーネント。URL によってページの切り替えをして表示非表示するコンポーネント

コンポーネントはページの中で使われる部品とかを指す。



## 記述方法

```vue
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

<router-view></router-view>
 
<!-- Vue の読み込み -->
<script src="//unpkg.com/vue@3"></script>
<!-- Vue Router の読み込み -->
<script src="//unpkg.com/vue-router@4"></script>
 
<script>
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), // historyオプションを指定（ここでは hashhistory を使用）
  routes, // routes オプションを指定（routes: routes の短縮表記）
})

const app = Vue.createApp({})
app.use(router)
app.mount('#app')
</script>
```



## ディレクトリ構成

```bash
my-router-project //プロジェクトのディレクトリ
├── index.html  //表示用フィル
├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue  // メインコンポーネント（Root Component） レンダリングの起点
│   ├── assets
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components  // ページで利用するコンポーネントのディレクトリ
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons
│   ├── main.js  //エントリポイント（ルーターの有効化）
│   ├── router
│   │   └── index.js  //ルーティングの定義とルーターの生成
│   └── views  //ページを構成するコンポーネント（Route Components）のディレクトリ
│       ├── AboutView.vue  // About ページのコンポーネント
│       └── HomeView.vue  // Home ページのコンポーネント
└── vite.config.js  //Vite の設定ファイル
```



## props を落とす

```js
// /src/routes/index.js

{
    path: '/user/:uid',
        name: 'user',
            component: () => import('../views/UserSingleView.vue'),
                props: true  //props オプションを追加
},
```

```vue
<script setup>
const props = defineProps(['id']);
fetchPost(props.id)
</script>
 
<template>
    <PostComments :post-id="id" />
</template>
```



# コンポーネントの動的インポート

```js
component: () => import('../views/AboutView.vue')
```

普通にインポートするパターンと比べて初回アクセス時のダウンロードサイズが減少するから適宜使う。



# プロパティの監視

同じコンポーネントで params で動的にプロパティを変更する場合は、結局監視しないといけない。

```js
// watchを使って監視
watch(
    route,
    (to) => {
        userId = parseInt(to.params.uid);
        fetchUser(targetUrl + userId);
    }
)

// CompositionAPI の場合は onBeforeRouteUpdate というナビゲーションガードを利用できる
import { useRoute, onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate( async (to) => {
  userId =  parseInt(to.params.uid);
  fetchUser(targetUrl + userId);
});
```



# not found の設定

```js
// /src/routes/index.js

{
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: () => import("../views/NotFoundView.vue"),
  },
```
AWSでリダイレクトする３つの方法

# AWSでリダイレクトをする3つの方法

## 1. ALBのリスナールール

- ALBのリスナールールで特定のパスを移動させたい向き先に行かせることができる
  - ex.) メンテナンス画面への遷移など
- ただALBのリスナールールはクエリパラメータを見てそれを遷移先にも付与するなどファンクショナルな遷移ができないのでその場合は別の方法が必要

## 2. CloudFront Function
- CloudFrontでファンクショナルな遷移ができるようにする機能
  - jsで記載ができテストなども可能
- 注意点として実行時間の制限がある
- Lambda Edgeよりも安い

## 3. Lambda Edge
- Edge Serverで実行できるLambda
- CloudFrontよりも高い代わりに実行時間の制限がない


ref: [【AWS】CloudFront Functions,Lambda@Edgeについて](https://qiita.com/itkz1016/items/4aafbb0309226bc3bdf0)
闘魂Elixir ーー AtCoder Beginner Contest 337(B)をElixirで楽しむ

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>

<b><font color="red">$\huge{闘魂とは己に打ち克つこと。}$</font></b>
<b><font color="red">$\huge{そして闘いを通じて己の魂を磨いていく}$</font></b>
<b><font color="red">$\huge{ことだと思います}$</font></b>


# はじめに

[AtCoder Beginner Contest 337](https://atcoder.jp/contests/abc337)を[Elixir](https://elixir-lang.org/)で解いてみます。

[AtCoder](https://atcoder.jp/)を解くのが趣味で、休憩時間に解いているという若い人がいて、それってすごい意識の高い休憩時間の過ごし方だと思って、私も真似してみることにしました。


# [AtCoderをElixirでやってみる](https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01)

入力の読み取り方や解答の作り方は、別の記事にまとめています。


https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01

ご参照くださいませ。

[Elixir](https://elixir-lang.org/)で[AtCoder](https://atcoder.jp/)を楽しむためには、エントリポイントを`Main.main/0`にする必要があります。つまり`Main`モジュールを作って、その中に`main/0`関数を定義するわけです。

# [B - Extended ABC](https://atcoder.jp/contests/abc337/tasks/abc337_b)

問題はリンク先をご参照くださいませ。
私の解答を貼っておきます。


<details><summary>私の解答</summary>

_問題文を読んでいることを前提にひとこと解説をしておきます。_

1文字ずつみていけばいいので今回は再帰を使って解きました。私は再帰プログラミングを苦手としておりましたが、[Elixir](https://elixir-lang.org/)だと不思議と再帰を書けます。

問題の意味を勘違いしていて、**WA(Wrong Answer)** を数度出しました。何を勘違いしていたかというと必ず`A`、`B`、`C`が含まれていると思ったことです。`A`だけや`B`だけ、`C`だけ、`AC`や`BC`は条件に当てはまるというふうにプログラミングする必要があります。

「[AtCoder のテストケース](https://atcoder.jp/posts/20)」は公開されています。リンク先からさらにDropboxへ飛んでテストケースをダウンロードできるので、それをみて自分の勘違いに気づけました。


```elixir
defmodule Main do
  def main do
    s = IO.read(:line) |> String.trim()
    
    solve(s)
    |> IO.puts()
  end
  
  def solve(s) do
    charlist = s |> String.to_charlist()
    
    do_solve(charlist, {?A, ?B, ?C})
  end
  
  def do_solve([], _), do: "Yes"
  def do_solve([?A | tail], {?A, ?B, ?C}), do: do_solve(tail, {?A, ?B, ?C})
  def do_solve([?B | tail], {?A, ?B, ?C}), do: do_solve(tail, {?B, ?C})
  def do_solve([?C | tail], {?A, ?B, ?C}), do: do_solve(tail, {?C})
  def do_solve([?B | tail], {?B, ?C}), do: do_solve(tail, {?B, ?C})
  def do_solve([?C | tail], {?B, ?C}), do: do_solve(tail, {?C})
  def do_solve([_ | _tail], {?B, ?C}), do: "No"
  def do_solve([?C | tail], {?C}), do: do_solve(tail, {?C})
  def do_solve([_ | _tail], {?C}), do: "No"
end


```




</details>




---

# さいごに

[AtCoder Beginner Contest 337](https://atcoder.jp/contests/abc337)を[Elixir](https://elixir-lang.org/)で解くことを楽しみました。

あなたのお好きなプログラミング言語でお楽しみください。

---


**闘魂**とは、  **「己に打ち克つこと。そして闘いを通じて己の魂を磨いていくことである」** との猪木さんの言葉をそのまま胸に刻み込んでいます。
知っているだけで終わらせることなく、実行する、断行する、一歩を踏み出すことを自らの行動で示していきたいとおもいます。
**アントニオ猪木さんのメッセージから元氣をもらったものとして、それを次代に語り継ぎ、自分自身が「闘魂」を体現するものでありたいとおもいます。**

---

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>
<b><font color="red">$\huge{１、２、３ ぁっダァー！}$</font></b>
OkHttpで通信速度を概算するIntercepterを実装してみる

OkHttpで簡易的にでも回線速度を測ることができないかなと作ってみました。

https://gist.github.com/satohu20xx/f19f77e4241b74452156f9ee4ba414b1

ざっくりしたコードですが通信時間と通信量が取得できるのでこれを使ってbpsを計算することが出来ます。僕の環境では1分ほどの通信で平均値を求めればそれなりの精度で通信速度を測ることが出来ました。

注意点としては通信時間はあくまでサーバからのレスポンス時間なので、サーバの処理時間も含まれてしまいます。なので、サーバで複雑な処理をするAPIの時間も含めてしまうと、実際の回線速度よりも遅く出てしまうことになります。
これを避けるために、画像のダウンロードなどサーバの処理時間がほとんど必要なく、ある程度の容量を通信するものに対してIntercepterを入れてあげるとよいのでしょう。
AHC034のシンプルかつそこそこ高性能な解法

AHC034でフローなし、焼きなましなし、高速化不要(python ok)の比較的シンプルな貪欲解法で本番42位相当のスコア(7.9G)まで行けたので、解法をメモしておきます。アルゴ緑くらいの人なら十分理解できると思います。アルゴ緑、焼きなまし等のヒューリスティック専門知識は知らない、あるいはpython派なので焼きなましでは回数稼げない、という人でも40位くらいの高順位は十分狙えますよ、という話です。

問題文は[こちら](https://atcoder.jp/contests/ahc034/tasks/ahc034_a "AHC034")

大筋としては、まず全マスをなめて中央の縦の一直線に全部集めます。その後その中央の直線を一往復します。

全マスなめのルートはこんな感じです：

![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602324/13d93450-7bbf-b52d-01ee-e44004544d18.png)

20x20全部描くのはめんどいので、はしょって描いています。最初と最後がちょっとイレギュラーな形ですが、それ以外は基本単純に全マスなめるだけです。'o'のところ以外は前半フェーズで全て高さゼロにしていきます。'o'のマスは、x:0..18, y:10 としています。

seed=0のGIFはこんな感じ：

![vis.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602324/7155c96a-23c8-de62-8bbc-bbba90ff6f72.gif)

最初、まず(0,0)->(1,0)に移動します。この後(0,0)->(0,1)->..->(0,9)と移動してその全てをゼロにしていくので、そのために必要な最小限の積荷になるよう、(1,0)で積むor降ろしておきます。具体的には、acc[0..9] = 「(0,0),(0,1),..,(0,9)の値の累積和」 としたとき、max(0,-min(acc))を積荷量とすればよいです。

この後(0,0)..(0,9)と移動します。各マスでは、高さが正ならそれを全部積む、負ならそのぶん降ろす、とします。つまり、高さゼロにします。負の時に降ろすぶんが足りなくならないよう、(1,0)で(必要なら)積み増ししてあります。

(0,0)..(0,9)をゼロにした後、(0,10)へ行きます。ここが最初の「調整ポイント」になります。次に (0,11)->(0,12)->..->(0,18)->(0,19)->(1,19)->(1,18)->..(1,11) と移動してその全てをゼロにしたい。そのため先ほどと同様、この経路の累積和を見て、必要最小限の積荷量にするよう(0,10)で積むor降ろします。

次に、また(1,10)で調整した後、(1,9)->(1,8)->..(1,0)->(2,0)->..->(2,9)を同様に処理します。最初に(1,0)でも調整の積み降ろしをしていますが、(1,0)はこの時にゼロになります。

以下同様に下辺まで行きます。最後が変な形なのは、終点を調整ポイントのライン上にするためです。

ここまでがフェーズ1。中央の調整ポイントの縦ライン以外は全て高さゼロになっています。ダンプは(18,10)にいます。フェーズ2ではこの縦ラインを一往復して全て高さゼロにします。

各マスから土を「どれだけ上(下)へ運び出すか、どれだけ上(下)から運び込むか」を決めます。上から(x=0から)考えていきます。h[0][10]>0 だとしましょう。x=0より下(x>0)のどこかのマスで、h[x'][10]<0 なマスへ土を運ぶ必要がありますが、そのようなx'の中でいちばん上(x小)なマスがいいはずです。同様に h[0][10]<0 なら、h[x'][10]>0 でいちばん上のマスから持ってくるのがいいはずです。

これを x=0,x=1,..x=17 と順にやっていくことによって、各マスから土を「どれだけ上(下)へ運び出すか、どれだけ上(下)から運び込むか」が決まります。これは言い換えると「上(下)に行く時、各マスでどれだけ積むか／降ろすか」、です。上に行く時はこれに従って積み降ろしします。下に行く時も同じようにやってもよいですが、下に行く時はとにかく全てゼロにすればいいのでそうします。

一往復で必ず全部埋められるのか？は気になるところですが、証明というほどではありませんが直感的に言うと、土を動かすのは必ず上方向(x=0方面)か下方向(x=19方面)のどちらかです。最初の上行きの時に埋められるものは全て埋めているので、残りの土は下行きのはず、つまり後半の下行きの時に残り全て動かせるはず、と言えます。…と考えてて「本当に大丈夫か？」と少し心配になってきましたが、まあシード1000個やって全てうまくいってるのでたぶん大丈夫でしょう。

説明は以上です。コードは[こちら](https://atcoder.jp/contests/ahc034/submissions/54701693)です。pythonで(余分なチェックやコメントやら全部入れて)206行。実行時間82msです。動作がわかるようにデバッグメッセージをstderrに出すようになってますが、これがうるさいという方は頭の"DBG = True"をFalseに変えると出さなくなります。
Azure Virtual Network を利用して Power Platform からセキュアに Azure OpenAI の GPT-4o を利用する


# はじめに

先日、以下のような記事を書きました。GPT-4o が出てきたことで、Power Apps で作成する独自のアプリで出来ることの幅が広がりました。こういった新しいモデルが出てきた際、いち早くそちらを利用する独自のアプリやフローを作成することができるのは、Power Platform の強みと考えます。

https://qiita.com/Takashi_Masumori/items/f6461c2dea1d1a7e4cde

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/564c57ec-ba01-60d5-4a74-4fc39f3c88d7.png)

もちろん、AI Builder の AI プロンプトについても、GTP-4 が使えるようになるなど、日々進化をしており、こちらを使うことで解決できるシナリオも沢山あるという認識ですが、例えば、上記アプリのように、最新のモデルを利用することで実現できることもあるため、引き続き、Power Platform × Azure OpenAI を直接連携させるニーズはあると考えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/aef36ff0-d542-6671-f4fe-132f0adac5f0.png)

この際、やはり考慮する点は、セキュリティです。当初上記アプリは、以下のような構成で作成しておりました。もちろん、API キーを厳重に管理すれば、こちらの構成でも行けるとは思いますが、ネットワーク観点のセキュリティを強化したいというニーズもあると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c798054d-533b-dc65-fefc-18109bd5e904.png)

そのためのアプローチとして、Azure Virtual Network を利用するアプローチがあります。最初試した際は上手くいかなかったのですが、今回上手くいったため、改めて紹介します。

https://qiita.com/Takashi_Masumori/items/906391e1ad8c0b465868#azure-openai-%E6%BA%96%E5%82%99%E4%BD%9C%E6%A5%AD

:::note warn
以前紹介した以下の方法はサポートされなくなりました。
:::

https://qiita.com/Takashi_Masumori/items/a2c716c8529aca9993ef

# Azure Virtual Network を利用して Azure OpenAI の GPT-4o を利用する

まず、今回は、最終的に以下のような構成となりました。基本的な構築方法は以前の記事と同じなので、そちらの記事を参考にしていただけたらと思いますが、Power Platform 側の環境はマネージド環境である必要がある点について、注意が必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f41651c0-1f50-67fa-8143-e3b38e4cbc61.png)

Azure OpenAI のリソースと、API のキーを格納している Key Vault のリソースは、Virtual Network からの通信のみ許可しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0e365401-50f7-d294-3d35-9da5c76f117c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/93a91a29-fe8c-9dae-c129-26990d75f47d.png)

そのため、以前作成していた HTTP コネクタを利用するフローは失敗するようになりました。
※今回作成したマネージド環境の場合も失敗します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/557e5e17-6f27-b32a-c4dd-f1f1e5e59368.png)

代わりに作成したフローは以下のような感じです。現状、HTTP コネクタはサポートされておらず、カスタムコネクタはサポートされているため、カスタムコネクタを作成し、同じ処理を実行するように変えました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/88080d0b-a20a-0c56-b0df-71e3851d9a33.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b572e639-4f5a-3951-f14c-c3b556e4de84.png)

https://learn.microsoft.com/ja-jp/power-platform/admin/vnet-support-overview#licensing-requirements

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/cdffd9cc-a019-6784-9ad1-ff7cda5e0ae1.png)

期待した通りに動作しました。

# まとめ

今回は、Azure Virtual Network を利用して、Power Platform からセキュアに Azure OpenAI の GPT-4o を利用する方法を紹介しました。

特に、画像の処理において、Power Platform から Azure OpenAI の GPT-4o を利用したいというニーズがあると思います。その際に、通信をセキュアにする方法として、こちらの方法が参考になれば幸いです。
IBM i のパフォーマンスデータ取得手順

[昨日のパフォーマンスデータ分析方法](https://qiita.com/gomAnomalocaris/items/7e12109f7050fea35840)の続きです。

## IBM i のパフォーマンスデータはまず、収集サービスで分析する

***収集サービスでシステム全体（CPU,メモリ,ディスク）の処理概要や個々のジョブ、ユーザーID毎の処理状況などを把握することが出来ます。
収集サービスでは1つ1つのSQLのアクセスプランや処理内容・処理時間明細は取れないので、それが必要な場合はSQLパフォーマンスモニター（DBモニター）を別途しかけて収集します。***

上記以外にもいくつかIBM i のパフォーマンスデータを取得できますが、まずは上記2つ使えれば大半は大丈夫だと思います。この2つ以外のデータが必要になるのは通常はIBMサポートからデータ収集依頼があった場合が大半だと思います。

## 収集サービスとは？

※IBM i OS標準の（通常、追加導入などは不要）データ収集機能です。
以前のバージョンではユーザー起動で開始が必須でしたが、***IBM i 7.x では収集サービスがQSYSWRKサブシステム開始時に自動的に投入されるようになっています。
具体的には、QSYSWRKサブシステム記述の自動開始ジョブ項目に収集サービスの開始が指定されています。
下記のジョブ QYPSSTRCOL が該当します。***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/a8bbf25a-8fef-f393-3ec7-4d2725b901b3.png)

収集サービスのデータはNavigator for i のCPU/MEM/DISKの稼働率監視グラフ表示でも利用されています。

## 収集サービスの開始手順・終了手順

***収集サービスを手動で開始したい場合は、STRPFRCOLコマンドで開始するか、Navigator for i の収集サービスメニューから開始できます。終了する場合は、ENDPFRCOLコマンドか、Navigator for i から実行できます。***

***ちなみにデフォルトの収集間隔は15分になっていると思います。私が分析する際は15分だと瞬間ピークが平準化されてしまい見えないことがあるため、5分間隔の取得に変更してSTRPFRCOLを実行するのがおススメです。***

***収集サービスの自動開始を止めたい場合、上記の自動開始ジョブ項目を下記のコマンドで除去することも可能です。
```
RMVAJE SBSD(QSYSWRK) JOB(QYPSSTRCOL)
```
上記コマンドののちにシステムをRe-IPL後（正確にはQSYSWRKサブシステムの再始動後）、変更が適用されます。

## 収集サービスのデータ分析手順

全体像は下記です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/ed50f885-484f-e2a8-3866-0a5665e9e793.png)

***収集サービスのデータは*MGTCOLというオブジェクトにかためて生成されてます。*MGTCOLそのままだと分析がむつかしい（できない）ので、CRTPFRDTAコマンドでCPU,メモリ,ディスク、ユーザーデータなどメトリックスごとのDb2 テーブル(QAPMxxx というテーブル)に展開します。***

***QAPMXXXのテーブルはかつてはPRTxxxコマンドで連続帳票に印刷して分析していましたっけ（遠・・・）
今は前回ご紹介のようなNavigator for i で分析するのが一般的です。***

## 収集サービスのデータ収集が動いているか？の確認

収集サービスの設定情報などはIBM i サービスの QSYS2.COLLECTION_SERVICES_INFO で取得できます。同時に収集サービスが動作しているか、どのオブジェクト*MGTCOLにデータが収集されているか等も確認できます。

[次の記事](https://qiita.com/gomAnomalocaris/items/872c1c1f09ae98031225)でご紹介したいと思います。


## IBM i パフォーマンス分析のまとめ参考リンク

[愛弟子さんによるこちらのまとめ](https://qiita.com/koga39chan/items/adcf9ed19c3552814be2)もどうぞ♪（こちらの方が分かりやすいかも？(^^;）
GitHub毎日草生やし運動

# きっかけ

以下の記事を読んで自身もやってみたくなりGitHub毎日草生やし運動を開始しました。

https://zenn.dev/keisuke90/articles/7585bcd4dcedfc

開始してから1ヶ月ほど経過したので自身のルールなどを含め記事として残していきます。

## 現状について

![github001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567112/540515f2-be4d-23b7-a1e6-2ee10d00f708.png)

会社のOrgnizationのcontoributionsも表示するようにしているため
毎日で継続しているように見えますが、Orgnizationから外れてしまうと
実績は見えなくなってしまうはずでその場合だと実績が少なく見えてしまいます。。


## 本内容を進める上でのルール

実績をつけるのが目的ではなく、自身や企業の成長につなげることが
目的としてあるのでルールを以下のように定めました。

1. READMEだけの更新は実績としない
内容のない単なるREADMEの更新だけは行わない。
2. インフラコードの検証や改善
TerraformやCDK &CDKTF（TypeScript）を使用したインフラストラクチャの定義の改善
3. Docker環境の構築や改善
Dockerfileの最適化や、新しいコンテナの設定、既存のコンテナの改善
4. ドキュメントの充実
インフラストラクチャのドキュメントを充実させ、他の開発者や運用者が理解しやすい記載法など


## 今後の展望

開始から1ヶ月が経過しましたが、毎日の継続は思った以上に大変でした。

1年継続した場合に間違いなく自分や会社が成長しているはずなので、
振り返り時にはちゃんと成長を感じられるように上記ルールの元、継続していきたいと思います。
Casper FFGの論文の王朝に関係する部分をちょっとだけ読んでみる


今回の元の論文は↓こちら

http://arxiv.org/pdf/1710.09437

## 今回の内容

Casper FFGについてちょっとだけ勉強します。
中でも特にSection 3のEnabling Dynamic Validator Setsの最初の段落２つくらいを読んでみます。

## そもそもCasperってなぁに？

Proof of Stakeに基づくファイナリティシステムで、部分的なコンセンサスメカニズムです。

## なんのための王朝か

ヴァリデーターの集合は変わらなければなりません。新しいヴァリデーターは参加できなきゃですし、既存のヴァリデーターは抜けられなきゃです。このためにブロックの***王朝***を定義しています。

## 王朝の定義

ブロック$b$の王朝とはジェネシスブロックから$b$の直前のブロックまでのチェーンで、ファイナライズされたチェックポイントの数です。

## ヴァリデーターになるとき

ヴァリデーターになりたい者のdepositメッセージが王朝$d$でブロックに含まれた場合、そのヴァリデーター$\nu$は王朝$d+2$の最初のブロックからヴァリデーターの集合に参加します。

（論文ではこの$d+2$を$\mathrm{DS}\left(\nu\right)$と呼びます）

## ヴァリデーターの集合を抜ける時

ヴァリデーター$\nu$のwithdrawメッセージが王朝$d$のブロックに含まれた時、ヴァリデーターになる時と同様に、王朝$d+2$の最初のブロックでヴァリデーターの集合を抜けます。

（論文ではこの$d+2$を$\mathrm{DE}\left(\nu\right)$と呼びます）

## ヴァリデーターの集合には参加し直せない

一度ヴァリデーターの集合を抜けたらそのヴァリデーターの公開鍵が永遠に禁止されます。
これは、１つのIDに対して複数の王朝があることを取り扱う必要をなくすためです。

## 感想

せっかくQiitaがお祭り状態なので毎日ちょっとだけ何か読んでアウトプットに記事を書くのもいいかもしれないと思いました。（毎日続けるとは言っていない）
Windows11でローカルアカウントにはどうやってログインする？2つの方法について徹底解説！

「情シスのじかん」は、情報システム部門のプロフェッショナルを対象としたメディアです。実務に役立つノウハウや革新的なアイデアを提供し、学びとネットワーキングの場を提供することを目指しています。最新の技術動向やベストプラクティス、成功事例を通じて、情シス担当者のスキルアップをサポートします。

ここで、Qiitaの読者の皆様向けに、「情シスのじかん」で公開された記事をピックアップ＆サマリ紹介します！Qiitaは技術者向けの情報共有プラットフォームとして、より実践的で具体的な技術情報を提供する場です。情シスのじかんは、特に情報システム部門に特化した内容を中心にしていますが、両者の強みを活かして、プロフェッショナルの皆様に有益な情報をお届けします。

### Windows11でローカルアカウントにはどうやってログインする？2つの方法について徹底解説！
![fbcac6be3da1880f2005d8c4b0ceaab5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816554/e64e62c4-bec0-a63a-7709-1c32af05b301.jpeg)

### ☑️ Windows11にローカルアカウントでログインする方法とは？

#### ① 初期設定でローカルアカウントを作成する
#### ② ローカルアカウントを追加する" "初期設定でローカルアカウント作成方法
以上の2つの方法があります！

#### ① 初期設定でローカルアカウントを作成する場合
1.「国または地域はこれでよろしいですか？」の画面で、キーボードの［Shift］と［F10］キーを同時に押し、コマンドプロンプトを開く
2. コマンドプロンプトに「oobe¥BypassNRO.cmd」と入力し、キーボードの［Enter］キーを押す
3. 再起動される
4. 初期設定を画面の指示に従って進める
5.「ネットワークに接続しましょう」と表示されたら、「インターネットに接続していません」をクリックする
6.「制限された設定で続行」をクリックする
7. ユーザー名を入力し、「次へ」をクリックする
8. パスワードを入力し、「次へ」をクリックする
9. セキュリティの質問を3つ設定し、「次へ」をクリックする" "すでにMicrosoftアカウントでログインしている場合にロール

#### ② アカウントを追加する方法の場合
1.「スタート」をクリックする
2.「設定」をクリックする
3.「アカウント」をクリックする
4.「他のユーザー」をクリックする
5.「アカウントを追加」をクリックする
6.「このユーザーはどのようにサインインしますか？」と表示されるので、「このユーザーのサインイン情報がありません」をクリックする
7.「Microsoftアカウントを持たないユーザーを追加する」をクリックする
8. ユーザー名とパスワードを設定し、「次へ」をクリックする
9. セキュリティの質問を3つ設定し、「次へ」をクリックする

Windows11のローカルアカウントとは、Microsoftアカウントとは違い
パソコン毎にユーザー名とパスワードを登録し、サインインする為のアカウントとなります。

https://josys.wingarc.com/josys-keyword-windows11localaccount

### 情報システム部門を刺激するメディア「情シスのじかん」とは？
![情シスのじかんbyWingArc1st (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816554/89afaa7e-b941-a10a-c813-8485daca4502.png)

初めまして、『情シスのじかん』です。
遂に、日本中の情シス部門のあなたを刺激するメディアが発足しました！🚨
さぁ、テクノロジーを飼い慣らし、仕事や生活の質を向上させ、一緒に未来を切り拓きましょう。皆様の生活リズムに合わせた情報発信で、常に寄り添い、共に未来を切り拓くためのメディアです。

ぜひ、情報システム部門の皆様の活動の取材をさせてください。

https://josys.wingarc.com/about