OmniAICreator/Qiita-1.07M huggingface dataset:
ShadCnでボタン押したら遷移させたい

shadCnのButtonコンポーネントを使ったときに遷移ってどうすればいいのかわからなかったりしませんか？

今回はその解決方法を紹介したいと思います。

# Linkコンポーネントを埋め込む

結論から言うとLinkコンポーネントを埋め込み、下のようにasChildをつけるとできます。

```typescript
<Button className={style.button} asChild>
  <Link href={`/signin`}>
    <GoogleLogo width="18px" />
    <p>サインイン</p>
  </Link>
</Button>
```

asChildをつけることでスタイルを崩さずに、Linkコンポーネントによる遷移機能や使うことができます。

ちなみにこの解決方法はドキュメントに執筆されています。

https://ui.shadcn.com/docs/components/button

ドキュメントには下のように記述されており、asChildをつけるとコンポーネントをネストできると書いてありますね。

>Alternatively, you can set the asChild parameter and nest the link component.


ドキュメントを読むと解決できることが書かれていることが多いです。

英語で読むのは難しいですが、困ったらドキュメントを読む癖をつけていくことをお勧めします。
>という当の本人も読むの苦手です

という感じでドキュメント読むと解決することが多いです。
ぜひ参考にしてください。
AWS DEA合格体験記

## **はじめに**

先日「[2025 Japan AWS All Certifications Engineersのクライテリア](https://aws.amazon.com/jp/blogs/psa/2025-japan-aws-all-certifications-engineers-criteria/)」がJapanAPNブログから発表されました。
私は前年2024年選出いただいており、2025年の追加で取得しなければならない資格も比較的少ないので今年もチャレンジしてみたいと思います。

## **現状の資格保有状況(AWS)** 

| 試験名 | 取得日 | 合格スコア | 受験スコア | 備考 |
|:-:|:-:|:-:|:-:|:-:|
| AWS Certified Cloud Practitioner  | 2023/04/15 | 700  | 810  |   |
| AWS Certified Solutions Architect - Associate  | 2023/05/28  | 720  | 777 |   |
| AWS Certified SysOps Administrator - Associate  | 2023/07/01  | 720  | 726  |   |
| AWS Certified Developer - Associate  | 2023/07/30  | 720  | 770  |   |
| AWS Certified Solutions Architect - Professional  | 2023/10/21  | 750  | 805  |   |
| AWS Certified DevOps Engineer - Professional  | 2023/12/17  | 750  | 823  |   |
| AWS Certified Security - Specialty  | 2024/01/13  | 750  | 817  |   |
| AWS Certified Database - Specialty  | 2024/01/20  | 750  | 830  | 廃止  |
| AWS Certified SAP on AWS - Specialty  | 2024/01/27  | 750  | 932  | 廃止  |
| AWS Certified Data Analytics - Specialty  | 2024/02/10  | 750  | 826  | 廃止  |
| AWS Certified Machine Learning - Specialty  | 2024/02/22  | 750  | 813  |   |
| AWS Certified Advanced Networking - Specialty  | 2024/03/16  | 750 | 869  |   |

2025AllCerts選出のために追加でとらなければならないのは以下の3つ。

- AWS Certified Data Engineer - Associate
- AWS Certified AI Practitioner
- AWS Certified Machine Learning Engineer - Associate

期限は来年3月までなので、あまり余裕のないスケジュールです...
とりあえず、ネットに情報が比較的多く転がっている「DEA」から攻略スタートすることにしました。

## **AWS Certified Data Engineer - Associate(DEA)とは**

>AWS Certified Data Engineer - Associate は、コアデータ関連の AWS サービスに関するスキルと知識や、データの取り込みと変換、プログラミングの概念を適用しながらのデータパイプラインのオーケストレート、データモデルの設計、データライフサイクルの管理、データ品質の確保といった能力を検証します。

## **勉強方法**
1. [AWS Certified Data Engineer - Associate (DEA-C01) 試験ガイド](https://d1.awsstatic.com/ja_JP/training-and-certification/docs-data-engineer-associate/AWS-Certified-Data-Engineer-Associate_Exam-Guide.pdf)を読む


2. 試験ガイドに記載されたサービスに関して[BlackBelt](https://aws.amazon.com/jp/events/aws-event-resource/archive/?cards.sort-by=item.additionalFields.SortDate&cards.sort-order=desc&awsf.tech-category=*all)を読む

3. [UdemyのWeb模擬問題集](https://www.udemy.com/course/aws-data-engineer-associate-dea/?utm_source=adwords&utm_medium=udemyads&utm_campaign=Search_DSA_GammaCatchall_NonP_la.JA_cc.JP&campaigntype=Search&portfolio=Japan&language=JA&product=Course&test=&audience=DSA&topic=&priority=Gamma&utm_content=deal4584&utm_term=_._ag_167497670358_._ad_711539479846_._kw__._de_c_._dm__._pl__._ti_dsa-1456167871416_._li_1009303_._pd__._&matchtype=&gad_source=1&gclid=Cj0KCQiA0MG5BhD1ARIsAEcZtwQXpb2iDj18S_lLnnEZJPQJVLTYdx53SiF8ZcaUDfNOsAxBvQQoMmYaAvowEALw_wcB&couponCode=ST20MT111124A)を3週周回する

- 余談にはなりますが、資格取得することに対して一番有効なのが問題集の周回だと個人的には思っています


## **受験結果**
![スクリーンショット 2024-11-11 125023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904291/1edb0c92-e8dd-7591-e73a-283aeb63a108.png)

無事合格できました！

## **受験感想**
※受験内容には言及できないので、あくまでも雑多な感想です
他のAWS資格を受験したのが半年以上前になるので、あくまでも体感ですが他のアソシエイト資格の内容より解きやすかった気がしています。既に廃止されてしまいましたが、DAS資格を既に持っていたことも、攻略のしやすさにつながったとおもいます。

## **おわりに**
2025年3月までに残り2つの取得を目指してコツコツ頑張っていこうと思います！
過去に伸びた記事まとめ(プロフィールpin止め用)

[Qiita以外の活動はこちら](https://ryosukedtomita.github.io/MyActivity/)

## アドベントカレンダー１人で完走に成功(2024)

https://qiita.com/advent-calendar/2024/sigma_security

---

以下は[AWS Lambdaのバッチ処理](https://github.com/RyosukeDTomita/qiita_auto_update)でいいね数とストック数を更新しています。

---

## 生成AI活用

https://qiita.com/sigma_devsecops/items/51d945d58fd6a3ea5167

views: 173399,いいね数: 337,ストック数: 297

https://qiita.com/sigma_devsecops/items/cd420bd54cbbe1c40cc0

views: 96460,いいね数: 220,ストック数: 145

https://qiita.com/sigma_devsecops/items/623eefcb95edc26a965a

views: 13606,いいね数: 31,ストック数: 26

https://qiita.com/sigma_devsecops/items/94b94e3e994d60ec4c1d

views: 82884,いいね数: 55,ストック数: 31

https://qiita.com/sigma_devsecops/items/a49b7df6e772256759ee

views: 8894,いいね数: 16,ストック数: 16

---

## コンテナ

https://qiita.com/sigma_devsecops/items/990f7d3c231e810a86f1

views: 13326,いいね数: 29,ストック数: 15

https://qiita.com/sigma_devsecops/items/79db1640d1a1cd82343d

views: 2653,いいね数: 6,ストック数: 8

https://qiita.com/sigma_devsecops/items/9e9e703f418d73dfa4c2

views: 3401,いいね数: 10,ストック数: 8

---

## CI/CD

https://qiita.com/sigma_devsecops/items/af7ea7f1b29a3d23117b

views: 6697,いいね数: 21,ストック数: 18

https://qiita.com/sigma_devsecops/items/3e2fb50770def1c3a098

views: 29798,いいね数: 51,ストック数: 40

---

## プログラミング言語系

https://qiita.com/sigma_devsecops/items/c6c2e9d9c9c6059d7549

views: 13844,いいね数: 34,ストック数: 52

---

## セキュリティ

https://qiita.com/sigma_devsecops/items/b0954b64f15842fc0a56

views: 4012,いいね数: 6,ストック数: 8

---

## その他ツール

https://qiita.com/sigma_devsecops/items/906c01de696af10fd73e

views: 17731,いいね数: 49,ストック数: 36


## ポエム

https://qiita.com/sigma_devsecops/items/9cd46139e43e12211637

views: 2419,いいね数: 8,ストック数: 6

https://qiita.com/sigma_devsecops/items/aeed45cf4d255a0957ea

views: 61881,いいね数: 50,ストック数: 25

https://qiita.com/sigma_devsecops/items/21df81831787668ba839

views: 1039,いいね数: 5,ストック数: 5
オブジェクトから最大/最小のプロパティ名を取得する

# 最大/最小のプロパティを取得する

```js:【採用】プロパティを取得する (reduce)
const status = {
  h: 183,
  a: 182,
  b: 116,
  c: 90,
  d: 105,
  s: 169,
};

const [maxPropName, maxPropValue] = 
  Object.entries(status).reduce((max, x) => max[1] < x[1] ? x : max, [, -Infinity]);

const [minPropName, minPropValue] = 
  Object.entries(status).reduce((min, x) => min[1] > x[1] ? x : min, [, Infinity]);
```
1. [Object.entries()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) で配列に変換して
1. [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) で最大/最小の要素を選んで
1. [分割代入](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) でプロパティ名, プロパティ値 を拾います

```js:【ボツ】プロパティを取得する (sort & push/shift)
const [maxPropName, maxPropValue] = 
  Object.entries(status).sort(([, a], [, b]) => a - b).pop();

const [minPropName, minPropValue] = 
  Object.entries(status).sort(([, a], [, b]) => a - b).shift();
```

もとはコード量が少ないsortを使おうと考えていましたが、無駄に計算量が増えてしまうのでボツにしました。

# 最大/最小のプロパティ値を取得する

```js:プロパティ値を取得する (maxでサクッと)
const maxPropValue = Math.max(...Object.values(status));
const minPropValue = Math.min(...Object.values(status));
```

プロパティ値だけなら、最大/最小の取得はmax/minで一発ですね。

```js:プロパティ値を取得する (reduceで安全に)
const maxPropValue = Object.values(status).reduce((max, a) => Math.max(max, a), -Infinity);
const minPropValue = Object.values(status).reduce((min, a) => Math.min(min, a), Infinity);
```

[プロパティの数(=配列の長さ)を気にせず安全に計算するなら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max#%E9%85%8D%E5%88%97%E3%81%AE%E6%9C%80%E5%A4%A7%E5%80%A4%E3%81%AE%E5%8F%96%E5%BE%97)reduceを使いましょう。
【Git】図を使って簡単解説！リモートリポジトリの移行方法

# はじめに
数ある記事の中で本記事まで足を運んでいただき本当にありがとうございます。

この記事では、リモートリポジトリを新しいリポジトリに移行する手順をご紹介します。
併せてコミット履歴・タグ・ブランチの全てを移行します。

今回検証を行ったのは、**Bitbucket→GitHub**の移行になります。

※GitHubへの移行ではGitHubのインポート機能を使う方法もございますが、本記事ではgitコマンドを使用する方法をご紹介いたします。


# 全体像のイメージ


```mermaid
sequenceDiagram
    新リポジトリ-->>新リポジトリ: 1. GitHub上にリポジトリ作成
    ローカルPC-->>ローカルPC: 2-1. クローン用のディレクトリを作成<br/>＆ディレクトリに移動 
    現リポジトリ->>ローカルPC: 2-2. ミラーリポジトリとしてクローン<br/>$ git clone --mirror [現リポジトリURL] ./
    ローカルPC->>新リポジトリ: 3. 現リポジトリのGit情報をPush<br/>$ git push --mirror [新リポジトリURL]
    ローカルPC-->>ローカルPC: 4. リモートURLを新リポジトリへ変更
```

# 手順
## 1. 新しいリモートリポジトリを作成
GitHub上に新リポジトリ（空のリポジトリ）を作成します。

## 2. リポジトリをローカルにミラーでクローンする
作業ディレクトリ（ミラーリポジトリ）を作成します。
そしてディレクトリ内に移動します。

:::note
**ミラーリポジトリとは**
「ワーキングディレクトリが存在しない」リポジトリのこと。
実際のソースコードがなく、更新履歴・ブランチ・タグなどといったGitの情報のみを保持しているリポジトリのことです。
:::

```
mkdir [ミラーリポジトリ名]
cd [ミラーリポジトリ名]
```
gitの情報をmirrorオプションを使用してクローンします。

:::note
**mirrorオプションとは**
リポジトリのすべてのリファレンス（更新履歴・ブランチ・タグ等）をそのまま保持し、完全なコピーを作成します。
:::
```
git clone --mirror 現リポジトリURL ./
```
    
## 3. 新リポジトリにPush
gitの情報をmirrorオプションを使用して新リポジトリ（空のリポジトリ）に反映します。
```
git push --mirror 新リポジトリURL
```

## 4.リモートURLを新リポジトリに変更する
ローカルの作業リポジトリのリモートリポジトリのURLを確認します。
```
git remote -v
```
追跡ブランチ先とpush先を新リポジトリへ変更します。
```
git remote set-url --push origin 新リポジトリURL (push先だけ変更できる)
git remote set-url origin 新リポジトリURL（追跡ブランチ先とpush先の両方変更可能）
```

## 最後に
リモートリポジトリの移行・複製を検討されている方の参考になると幸いです。

## 参考URL
https://qiita.com/msht0511/items/467a0cbffb4fed60f885

https://www.yaz.co.jp/tec-blog/development-environment-tools/1239

https://www.exmedia.jp/blog/git-clone%E6%99%82%E3%81%AEmirror%E3%81%A8bare%E3%81%AE%E9%81%95%E3%81%84/
React 波括弧が認識されない

`Array.map`関数を使ってイテレータからコンポーネントを生成しようとした時の備忘録。

## コード
```tsx: App.tsx
export default function App() {
    return (
        <Box>
            {
                keys.map( key => (
                    <Button>{ key }</Button>
                ));
            }
        </Box>
    )
}
```

## エラー
`Unexpected token 'Box'. Expected JSX identifier`
（このエラー、`<Box>`自体ではなくその子要素の文法が間違っている時に出てきて分かりづらい）

## 解決
**不必要な`;`を外す**
```tsx: App.tsx
// --snip--
<Box>
    {
        keys.map( key => (
            <Button>{ key }</Button>
        )) // ここにあったコンマを外す
    }
</Box>
```
社内で使える居酒屋共有アプリを作ったンゴ 【Map'ngo🍺】

## 前提
弊社には、「美味しかったお店」「行きたいお店」があったら、情報を共有する口コミ素敵Slackチャンネルがあります。
コミュニケーション円滑化も含め、こういうゆるいチャンネルって仕事の癒し場になるので本当に大切だと日々思っています。
それに知り合いの口コミに勝るものってないですよね。

今までのこのチャンネルは、お店のURL（食べログ/ホットペッパー/Retty/ぐるなび）を共有すると情報がスプレッドシートに保管される、+ わいわいする というものでした。

[![Image from Gyazo](https://i.gyazo.com/bcc0557a02e82d378a772434344b109b.png)](https://gyazo.com/bcc0557a02e82d378a772434344b109b)
(URLを貼るとアーニャ(GAS)がスプレッドシートにお店情報を保存するます)

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

下記の流れです。
[![Image from Gyazo](https://i.gyazo.com/00f31933880694c86656b873f74b1679.png)](https://gyazo.com/00f31933880694c86656b873f74b1679)

ただしこのスプレッドシートだとどこにお店があるかが一目で分かりづらく、せっかく貯めた情報をうまく活用できずに改善の声が上がっていました。

## 何を作ったの？
そこで作ったものが、投稿されたお店情報をマップ上で一覧できるアプリ「Map'ngo🍺」です。
デモ動画をどうぞ。

![90d501dc2fd57cdaa08bb3a89336f708.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1544720/f83240d8-c5b3-ae30-06cb-0279a47922ad.gif)

https://i.gyazo.com/90d501dc2fd57cdaa08bb3a89336f708.mp4


[![Image from Gyazo](https://i.gyazo.com/6b3b682449bc3c7f3e5a96821eda96bc.jpg)](https://gyazo.com/6b3b682449bc3c7f3e5a96821eda96bc)

情報が整理されて場所が一目でわかるようになりました📍
元のSlackメッセージへのリンク、Googleマップへのリンクも用意しているので、詳細が見やすくなりました！🎉

Map'ngo🍺 はUIを スプレッドシート → アプリ とガラッと変更することで、**蓄積されていた口コミ情報を活かすことに焦点を当てた**アプリです😎（適当）

## どうやって作ったの？
簡易的な構成図はこちらです。

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

元からあったGASとスプシを活かすようなシングルページアプリケーション構成としています。
フロント資材はAWSのS3に置いてCloudFrontをかませる一般的なアレです。
Route53でドメインを紐付けてSSL化しています。ちゃんとお金を払ってます💰

APIがGAS、DBがスプレッドシートという構成になっていますが、なるべく開発コストとランニングコストを抑えようとした結果です。
今後の機能改善次第では Lambda と DynamoDB に置き換えたいという野望があります。

そのほか下記のようなAPIを内部で使っています。
マップ表示： Google Maps JavaScript API

https://developers.google.com/maps/documentation/javascript/reference?hl=ja

住所から緯度経度への変換：国土地理院のAPI

https://qiita.com/JunJun100/items/235f92100c8cc294b67b

## やっぱり開発は楽しい

先日学生たちのハッカソンを近くで見た影響を受け、一人ハッカソンと称して夜通しでガガっと作りました。

https://note.com/layered_recruit/n/nbc3ae35a907d

かかった時間（おおよそ）
技術調査：1h
フロントアプリの作成：4h
GASの改修：3h
デプロイ：4h

初めて触る技術もありつつ、それらを組み合わせて頭の中にあるアイディアをどんどん形に落とし込んでいくというのは、エンジニアをやってる中での一番楽しい瞬間ですね。
最低限の機能を開発しただけなので、口コミのフィルタリング機能だったりバックエンドの刷新だったり育てていきたいな。

https://x.com/moritaro_maru/status/1855248122894836103

ちなみにアプリ名の「Map'ngo🍺」は、ただンゴを付けただけでしたが、相棒（ChatGPT）は「'ngo」に **「行く」** のダブルミーニングも見出してくれて大絶賛でした笑

[![Image from Gyazo](https://i.gyazo.com/c00843bf33bf20ebe1b87fef440d4277.png)](https://gyazo.com/c00843bf33bf20ebe1b87fef440d4277)
今後のMarkdown AIについて

シンプルで簡単にWebサイトを制作できるツールとして登場したMarkdown AIですが、その今後について、今回は詳しく書いていきたいと思います。

![napkin-selection (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/a044c7a2-f2d9-8d09-f61a-acefbc933653.png)


## 現在のMarkdown AIの使用感
結論から言うと制作している我々もまだまだ改善するべきところが多々ある思っております。
Markdwon記法だけではユーザーが望むWebサイトを作る事が難しく、Webサイト制作ツールとしてみた際には、テンプレートが少なく直感的に操作できない事やプレビューを押下した後に編集ページに戻るとページ上部に戻ってしまい修正箇所が分かりづらくなる所など、改良の余地が多くあります。
ただ、サイト制作ツールの側面だけでなく、AIを簡単にカスタマイズ/実装できる点や面倒なサーバー設定が要らないところなどMarkdown AIだからこそ出来ることも多々ありますので、是非、Markdown AIのさらなる成長をご期待ください。

## 今後のアップデート予定
上記のユーザーのご意見から他のことに至るまで改善すべく、『Markdown AI』は今後も続々とアップデートを行なっていきます。

### 1. 画像生成AIの追加
テキスト生成に優れたAIを前回のアップデートで追加されましたが、次回は画像生成AIを実装し、プラットフォーム内で画像の生成が完結できるようになります。
これにより、外部ツールを使用することなく、キーワードを入力するだけでWebサイトにぴったりのオリジナル画像を生成できるようになります。

### 2. 拡張Markdownの実装
現在のMarkdown AIでは、装飾が施された見栄えが良いWebサイトを作るには、HTML/CSSなどのマークアップ言語が必要になっています。
ですが、今後のアップデートで拡張Markdown機能が実装され、より高クオリティのサイト制作ができるようになります。
この拡張Markdown機能は、Markodwnでの記入をユーザーがカスタマイズできるようになり、サイトの装飾はもちろん、記入の仕方も簡略化できます。

### 3. 子供でも使えるWeb制作ツール
Markdown AIは、初心者や子供にも簡単に使えるWeb制作ツールとして、より使いやすい設計を目指しています。直感的に操作できるUIにすることで、若い世代やプログラミング経験がない人々にもWeb制作の楽しさを体験してもらうことができます。

![napkin-selection (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/98a738cf-d61e-93f0-7fbd-cdea7b0f52d5.png)


## 現在の課題と今後の改善
現状では、Markdown AIで高度なカスタマイズやAIの実装を行うには、HTML/CSSやJavaScriptの知識が求められ、全てのユーザーが容易に活用できるわけではありません。今後のアップデートでは、AIとサイト制作の互換性をさらに強化し、誰でも簡単にサイト制作とAIを活用できるツールを目指して日々精進しています。

また、Qittaで**10月25日~11月25日**の期間に【**Markdown AIに関する記事を投稿すると豪華商品が貰えるキャンペーン**】を実施しています。

https://qiita.com/official-events/6914e7e898953881ef94

是非Markdown AIを使ってみて、ご意見やご感想をお聞かせください。
皆様のフィードバックを基に、より良いサービスへと改良を重ねていきたいと考えています。
あなたの声が、今後の機能拡張や改善に反映される重要な一歩です。お待ちしております！
【ChatGPT＋DALL-E3】で作成した正方形画像を縦長や横長にできるツールを紹介。


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

　今回は、DALL-E3で作成した正方形画像を縦長や横長にできるツールを紹介します。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)

***
　まずは、ニュース？

　GoogleのImageFXは
　　これまでアスペクト比は正方形しか
　　　生成できませんでした。

　2024/10/30ごろ
　　アップデートがあり
　　　アスペクト比の変更が
　　　　可能になりました。

　選択可能なアスペクト比は
　　1:1 、 9:16、16:9、 3:4、 4:3 。

　正方形、縦長、横長、
　　スマホ縦長、スマホ横長
　　　になります。

　操作方法は
　　入力枠の下にある
　　　“入力”、“編集履歴”、“設定”の
　　　　“設定”で行ないます。

　設定では、以下の項目があります。
　　シードNo.
　　モデル
　　アスペクト比

　シードNo.の横の南京錠を
　　外せば、多様な生成が可能。

　モデルは
　　Imagen 3に固定

　アスペクト比は
　　上記のとおりです。

　Image FXはこちらから。
　　[Image FX](aitestkitchen.withgoogle.com/ja/tools/image…)
***
　さて、本題です。

　今回は、
　　DALL-E3で作成した正方形画像を
　　　縦長や横長にできるツールを
　　　　ご紹介します。

　なお、このツールは
　　HuggingFaceにあるものなので
　　　いつ消えてもおかしくありません。
　　　　ご注意を。

　DALL-E3では
　　正方形、縦長、横長の画像を
　　　生成できます。

　しかし、
　　実際には縦長で生成すると
　　　かなりの確率で
　　　　横長画像を90度回転させた
　　　　　画像になります。

　なんとかしようと
　　頑張りましたが、
　　　いまいちでした。

　そこで
　　外部ツールに頼ろうと
　　　思い、今回のツールを
　　　　見つけました。

　このツールを使うと
　　こんな感じで生成されます。

　元画像
![1731293323458.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/90069bc6-4006-c4ca-89cc-81030bdfa35e.jpeg)

　新たに生成された画像
![1731293377606.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/1ed838cb-d45c-28ca-7418-2031123a1373.jpeg)
***
　本ツールは、
　　Sylvain Filoniという方が
　　　アップされました。
　　　　[Diffusers Image Outpaint](https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint)

　使い方は、簡単。
　　ただし、スマホの方は
　　　ブラウザの設定を
　　　　PC版サイトにチェックして
　　　　　アクセスしてください。
　❶画像をアップロード
　❷Generateボタンの下にある
　　　Expected Ratioで
　　　　拡張アスペクト比を選択
　❸そのとなりの
　　　Alignmentで
　　　　元画像を生成画像の
　　　　　どこに配置するかを選択
　❹Generateボタンをタップ

　こんな画面になります。
![Screenshot_20241111-113644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/6968f517-8d0b-ef76-ce35-962c6b61f177.png)

　生成された画像が
　　半分になっていますが
　　　触ってみると元画像との違いが
　　　　わかるようになっています。
　　　　　左右に動かしてみて。

　画像をダウンロードするには
　　右下の画像を拡大ボタンをタップ、
　　　全画面表示すると
　　　　上部にダウンロードボタンが
　　　　　出てきます。

　また、
　　縦長や横長画像を
　　　正方形画像にもできます。

　試してみて
　　ください。

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

　今回は、ここまで。
Tableau初心者の方への生成AI活用のススメ

## はじめに
Tableauは、データの可視化にとても便利なツールですが、初めて触れる方にとっては設定や操作方法が難しいと感じる場面が多いかもしれません。特に、操作方法がわからないときに周囲の人に聞くのも気が引けて、作業が進まず困ることがありますよね。そんな時、生成AIであるChatGPTを活用することで、独力で解決の糸口を見つけられるかもしれません。

この記事では、Tableau初心者の方がChatGPTを活用するためのヒントや注意点をお伝えします。実際に役立つ場面や注意すべきポイントについても詳しくご紹介しますので、気軽に試してみてください。

## ChatGPTの活用方法
まず、ChatGPTの利便性についてですが、Tableauに関する質問を意外と正確に回答してくれる点が挙げられます。たとえば、以下のような疑問をChatGPTに質問してみましょう。
ちなみにデータのカラム名を予め指定しておくと、計算フィールドの式をそれに基づいて書いてくれるためコピペもできるので便利です。

- **「Tableauでデータを結合する方法を教えて」**
- **「ダッシュボードのレイアウトを整えるにはどうしたら良いか」**
- **「特定のフィールドでフィルタリングをかける手順を知りたい」**

上記のような質問をすると、設定手順やポイントについて簡潔に教えてくれることが多いです。また、複雑な設定やカスタマイズについても、基本的なアイデアや方向性を提案してくれるため、Tableauの操作がわからなくて行き詰まったときに頼りになる存在です。

## ChatGPTを活用する際の注意点

ただし、Tableauの質問でChatGPTを使う際には、以下のような注意点が必要です。

### 注意点1: デスクトップ版かブラウザ版かを明確に伝える
ChatGPTは、Tableau Desktop（デスクトップ版）の操作を前提にした回答をすることが多いです。そのため、Tableauのオンラインバージョンやブラウザ版（Tableau Online、Tableau Publicなど）を使用している場合、操作方法や手順が少し異なることがあります。質問する際には、「デスクトップ版」や「ブラウザ版」などの使用環境を前提として伝えると、より的確な回答を得られるでしょう。

#### 例
- **NG**: 「Tableauでフィルタリングの設定を教えて」
- **OK**: 「Tableau Desktopでフィルタリングを設定する方法を教えて」
- **OK**: 「Tableau Public（ブラウザ版）でフィルタリングを設定する方法を教えて」

### 注意点2: LOD計算における限界
Tableauの特徴的な機能のひとつであるLOD（Level of Detail）計算ですが、これをChatGPTに質問すると簡単なものは問題なく教えてくれる一方で、複雑な計算になるとうまく回答できない場合があります。特に、複数のフィールドやカスタム集計を組み合わせた複雑なLOD計算式を作成したい場合には、注意が必要です。

#### 例
- **簡単なLOD計算の質問例**: 「Tableauで特定のフィールドの平均値を計算する方法を教えて」
- **複雑なLOD計算の質問例**: 「特定のフィルタ条件に基づいて、複数のフィールドを組み合わせたLOD計算式を作りたい」
  
複雑な質問についてはChatGPTが混乱してしまう可能性があるので、その場合は公式ドキュメントや専門書を参照したほうが良いかもしれません。

### 注意点3: 情報漏洩に注意する
最後に、絶対に注意しなければならないのが**情報漏洩**のリスクです。無料版のChatGPTでは、社内のデータや情報を入力すると、そのデータが外部に漏れる可能性があります。そのため、機密情報や個人情報、社内専用のデータなどを含む質問は避けるようにしてください。社内ポリシーに違反する可能性もありますので、くれぐれも注意が必要です。

## ChatGPTが慰めてくれる「副次効果」
少しユニークな副次効果として、人づてに聞いた話ですが、ChatGPTは失敗しても「よく頑張ったね」といったメッセージで慰めてくれることがあります。データ分析は孤独な作業になることが多いので、こうした些細な励ましが案外と心に響くこともあるかもしれません。困ったときや一人で作業に行き詰まったときには、AIからの励ましを受けるのも一つの手かもしれません。

## 今後の展望: Tableauの生成AIサポート
Tableauの製品開発ロードマップには、生成AIを活用した設定支援機能が導入される予定です。この機能が搭載されれば、より精度の高いサポートが可能になると期待されています。ただし、新機能を待っているだけでは実践力がつきません。まずは無料で使えるChatGPTを試し、生成AIに慣れておくと良いでしょう。AIのサポートが入ることで、自分の知識やスキルも向上していくはずです。

## まとめ
Tableau初心者の方にとって、ChatGPTは使い方や設定で困ったときに頼りになるツールです。ただし、使用環境の確認や情報漏洩に注意しつつ、適切に活用してください。将来的にはTableau自体にAIサポートが搭載される予定ですが、まずはChatGPTを使って実践的に慣れることが重要です。

データ分析の楽しさを感じつつ、AIのサポートを活用していきましょう！
deno run の run が不要になった

[Deno v1.46](https://deno.com/blog/v1.46) から deno run コマンドの run 部分が省略可能になりました。以下のように hello world を実行できます。

```js:hello.js
console.log("hello");
```

```shellsession
$ deno hello.js
hello
```

Happy Hacking!
はじめてのDDD part4 ~アーキテクチャについて~

# はじめに
前回のpart3では「コンテキストマップ」について紹介しました。
さて、part4ではアーキテクチャについて学びましょう。一つの記事でまとめて紹介すると読むのに疲れますし、理解もあやふやになってしまうおそれがあると思ったので記事をいくつかに分けることにしました。
全体を通して、様々な種類のアーキテクチャについて紹介するのでそれぞれを確実に理解していきましょう！

# 紹介するアーキテクチャの種類
part4全体で紹介するのは、以下のアーキテクチャです。
<ol>
<li>レイヤ化アーキテクチャ
<li>ヘキサゴナルアーキテクチャ
<li>サービス指向アーキテクチャ（SOA）
<li>RESTfulシステム
<li>コマンドクエリ責務分離（CQRS）
<li>イベント駆動アーキテクチャ（パイプ＆フィルタ、長期サーガ、イベントソージング）
</ol>
アーキテクチャ全体の内容を紹介したあと、1.の「レイヤ化アーキテクチャ」を紹介するまでを今回の記事（part4）にします。2.からはpart4.1のように、１つずつ紹介していこうと思います。


## DDDにおけるアーキテクチャ
まず前提として、DDDは特定の技術に依存していないため、自由にアーキテクチャを選択することができます。

:::note warn
レガシーシステム（古臭いシステム）が既にあったり、特定のプラットフォームやフレームワークを基盤として開発したりする場合はアーキテクチャを自由に選択できないこともしばしばあります。
:::

ではどのように選ぶのかというと、「機能要求（ユースケース、ユーザーストーリー、ドメインモデルのシナリオなど）」と「品質要求（性能、エラー制御、リアルタイム性など）」です。アーキテクチャの選択はプロジェクト進行に関わる重要な要素となりうるので、慎重に選ぶようにしましょう。


## DDDシステムにおけるアーキテクチャの変遷
大きな変化だけを取り上げると、**レイヤ化アーキテクチャ**→**DIPに基づいたレイヤ化アーキテクチャ**→**ヘキサゴナルアーキテクチャ**となったことです。それぞれについては後で詳しく説明します。
では、今回のもう一つのテーマである「レイヤ化アーキテクチャ」について学びましょう！

# レイヤ化アーキテクチャとは
名前の通り、いくつかの層（レイヤ）に分割してシステムを構築するパターンのことです。ここで注意点として紹介されているのが、単にライブラリや名前空間を分割するのに加えて、各レイヤの依存関係を明確にして、適切な責務に沿って実装するという点です。
つまりは、「**レイヤごとにファイルを分けるだけではなく、それぞれが互いにどんな関係にあるのかをはっきりさせて、それぞれの役割ごとにしっかり分けて実装しよう**」ということです。

### レイヤ化アーキテクチャでのDDD
では、DDDとレイヤ化アーキテクチャを組み合わせた場合の各レイヤの特徴を見ていきましょう。
<dl>
<dt>UI（ユーザーインターフェース）層
<dd>ドメイン層のモデルを使うことも可能ですが、描画（画面表示）での使用のみにしておくようにしましょう。

:::note info
ドメイン層とUI層をきれいに分割することで、UI層の影響でドメインモデル（設計に関わるモデル）が変わってしまうのを防ぎます。一体化していると、ドメインモデルがUI層に引きずられるなどの理由で変わってしまうことが実際に起こりえてしまいます。
:::
また、可能であれば、ドメインがビュー（UI層）の影響を受けることを防ぐために「プレゼンテーションモデル」という別のデータ構造を作ります。<br>
<dt>アプリケーション層
<dd>UI層から使用されます。ここには「アプリケーションサービス」が存在します。アプリケーションサービスは「ドメインサービス」と異なり、ドメインロジックを持ちません。あくまで操作やリクエストに応じて、適切なオブジェクトを呼び出すなどの業務を担当します。<br>
これにより、独自のビジネスロジックを持たず、軽量でシンプルなものになっています。
<dt>ドメイン層
<dd>ユースケースやユーザーストーリー（そのシステムの内容がわかるもの）を実装します。ドメインモデルが提供され、「ファクトリ」か「集約」のコンストラクタにてインスタンスを生成します。

:::note info
ファクトリ：ユビキタス言語を用いて集約をシンプルに生成する
集約：関連するものをひとつにまとめる単位
:::

ドメイン層には「ドメインサービス（業務ロジックの中でも特に、エンティティや集約の中だけではうまく処理できないもの）」が含まれ、ステートレスな（独立した）操作として、ドメインの操作を行います。また、イベント駆動の場合「ドメインイベント」を発行します。
<dt>インフラストラクチャ層
<dd>　「リポジトリ」を使用してデータが長期間利用できるよう保存するのを可能にします。
</li>

# おわりに
今回はアーキテクチャ全体の内容を紹介し、1.の「レイヤ化アーキテクチャ」を紹介しました。前述したように、次回のpart4.1では「ヘキサゴナルアーキテクチャ」についてわかりやすく解説していきます。また、「DDDシステムにおけるアーキテクチャの変遷」のセクションでもあったように、ヘキサゴナルアーキテクチャの前段階であるDIPについても解説しようと思います。
では、最後までお読みいただきありがとうございました次回もよろしくお願いします。

### 参考
[「実践ドメイン駆動設計」から学ぶDDDの実装入門/青木 淳夫](https://www.amazon.co.jp/%E3%80%8C%E5%AE%9F%E8%B7%B5%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%E3%80%8D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6DDD%E3%81%AE%E5%AE%9F%E8%A3%85%E5%85%A5%E9%96%80-CodeZine-Digital-First-%E9%9D%92%E6%9C%A8/dp/4798161500/ref=tmm_hrd_swatch_0?_encoding=UTF8&sr=8-1)

[実践DDD本 第4章「アーキテクチャ」 ～レイヤからヘキサゴナルへ～
](https://codezine.jp/article/detail/9922)
はじめてのDDD part3 ~コンテキストマップとは？~

# はじめに
前回のpart2.1で「境界づけられたコンテキスト」について重点的に解説しました。
というのも、今回の記事で紹介する「コンテキストマップ」は、その名の通り境界づけられたコンテキストと深く関わるものだからです。今回の内容は分割した領域同士の関係についてです。

# 「コンテキストマップ」とは？
では、解説に入ります。「コンテキストマップ」とは、**境界づけられたコンテキスト間の関係を俯瞰する地図のようなもので、システムの全体像や相互関係の把握に利用することができます。**
具体的に考えてみましょう。私が参考にした書籍には以下のような図で説明されていました。
![スクリーンショット 2024-10-18 162355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817741/e5ea3e9d-cdd7-a800-72d1-6c73e53251ab.png)
ここでは一つ一つの役割については省略します。線の両端にある「U」や「D]はそれぞれ上流（Upstream）、下流（Downstream）を意味します。これは**依存関係**を表しており、Ｕは「影響を与える側」、Ｄは「影響を受ける側」を表します。
つまり、Ｕでモデルの変更があった場合はＤもその被害を受けるといういことです。
このマップを作ることにより、ＤＤＤの開発チームはもとのシステムとの連携方法や他チームとのコミュニケーションの必要性を把握できるようになります。

:::note info
コンテキストマップはアーキテクチャ（構造）図としての側面よりもコミュニケーション関係を示す図としての側面の方が大きい。
:::

# 「組織的パターン」と「統合パターン」
コンテキストマップを書く際には、次の２種類の分類があります。まず、簡単に説明すると下のようになります。
<dl>
<dt>組織的パターン
<dd>チームの関係を示す。
<dt>統合パターン
<dd>データとプログラムの連携方法を示す。
</dl>
では、それぞれについて深掘りしていきましょう。

### 組織的パターン
以下の４つがあります。
<dl>
<dt>パートナーシップ
<dd>２つのチームにおいて協力的な関係が成り立つ場合。<br>
計画から連携試験まで共に進めていく。
<dt>別々の道
<dd>統合しない。（両者の関係なし。）
<dt>順応者
<dd>上流側が下流側の要望を聞かなくてもよい状態。<br>
例：APIに変更があったとき、アプリケーションチームはそれに対応するしかない。
<dt>顧客、供給者
<dd>「順応者」と逆のようなもの。上流チームは下流チームの要望も考慮して作業する。
</dl>

### 統合パターン
以下の５つがあります。
<dl>
<dt>共有カーネル
<dd>複数ドメインにおいて共有が必要な部分に、共通で使用するドメインモデルを構築してソースコードレベルで共有すること。<br>
変更があったときに他チームの承認が必要になるので極力少なくする。
<dt>巨大な泥団子
<dd>とても大規模なもともとあったシステムのこと。<br>チームと連携させるときは自分たちの「境界づけられたコンテキスト」がのみこまれないよう注意する。
<dt>公開ホストサービス（Open Host Service）
<dd>「境界づけられたコンテキスト」の内容にアクセスできる公開サービス。<br>
これを利用するクライアントは複数いても問題ない。
<dt>公表された言語（Published Language）
<dd>２つの境界づけられたコンテキスト内のモデルを変換する共通の言語（JSONやXML）。<br>
「公開ホストサービス」と組み合わせて使われることが多い。
<dt>腐敗防止層（Anti-Corruption Layer）
<dd>先ほどの「順応者」の関係のときに使われる。<br>
下流側のチームは上流側の機能を自コンテキストのドメインモデルとして変換する必要があるため用いられる。データの送受信（２ケース）分のモデル変換を双方向に行う。
</dl>

# おわりに
今回はコンテキストマップについて解説しました。前述したように、これはコミュニケーション図であり、チームで開発を行うのにとても重要なものであることが理解できたと思います。
では、今回はここで終わりとします。最後まで読んでくださり、ありがとうございました。

### 参考
[「実践ドメイン駆動設計」から学ぶDDDの実装入門/青木 淳夫](https://www.amazon.co.jp/%E3%80%8C%E5%AE%9F%E8%B7%B5%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%E3%80%8D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6DDD%E3%81%AE%E5%AE%9F%E8%A3%85%E5%85%A5%E9%96%80-CodeZine-Digital-First-%E9%9D%92%E6%9C%A8/dp/4798161500/ref=tmm_hrd_swatch_0?_encoding=UTF8&sr=8-1)
はじめてのDDD part2.1 ~「境界づけられたコンテキスト」について~

# はじめに
前回のpart2で「境界づけられたコンテキスト」について紹介しました。
私はこの用語の意味を、`システムを「チームやシステムごとに独立して意味を持つ領域に分割」することで、複雑さを管理しやすくする考え方`と説明しました。この説明には概ね満足していますが、`領域に分割`という部分がうまくかみ砕けていないと思ったので今回このような記事を書くことにしました。
前回のコラムだと思って読んでいただけるとありがたいです。

# 解説
まずは公式の説明を読んでみましょう。
>bounded context
A description of a boundary (typically a subsystem, or the work of a particular team) within which a particular model is defined and applicable.
（和訳）
境界コンテキスト
特定のモデルが定義され、適用される境界（通常はサブシステム、または特定のチームの作業）の記述。
引用元：[DDD Reference](https://www.domainlanguage.com/ddd/reference/)

やはりいまいちよく分からないですね、、、
では、具体例を用いて考えてみることにしましょう。
今回はUber Eatsのような食事配達システムを想定します。このサービスに関わるのは以下のような人がいるでしょう。
<dl>
<dt>1,開発部門
<dd>プログラミングなどの開発を行う。
<dt>2,経理部門
<dd>金額面での管理を行う。
<dt>3,配達部門
<dd>料理を届ける。
</dl>
ここで、「料理」という言葉について取り上げます。
経理の人はこれを聞いて、「値段、原価率」などについて意識するでしょう。
一方、配達員はこれを聞いて、「配達先、配達日時」などについて意識するでしょう。

ではここで、「料理」という言葉にこれら全ての概念（モデル）を持たせるとどうなるでしょうか？
エンジニアの立場になってみましょう。DDDではこの定義をコードに反映させなければなりません。さらに、ここに料理部門などが入ってもっと複雑になるとぐちゃぐちゃになってしまうのが想像できるでしょうか。

そこで大きなシステムを`領域に分割する`のです。この場合では、経理と配達の部門（領域）でそれぞれのモデルにしようということです。よって、「経理コンテキスト」と「配達コンテキスト」に分けてみよう、となるわけです。

# おわりに
「境界づけられたコンテキスト」について理解を深められたでしょうか？具体例から気づいた方もいると思いますが、DDDは大規模システムの開発に有効な手段です。今回の学びを活かしてこれからも頑張りましょう！
では、最後まで読んでくださりありがとうございました。

### 参考
[「実践ドメイン駆動設計」から学ぶDDDの実装入門/青木 淳夫](https://www.amazon.co.jp/%E3%80%8C%E5%AE%9F%E8%B7%B5%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%E3%80%8D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6DDD%E3%81%AE%E5%AE%9F%E8%A3%85%E5%85%A5%E9%96%80-CodeZine-Digital-First-%E9%9D%92%E6%9C%A8/dp/4798161500/ref=tmm_hrd_swatch_0?_encoding=UTF8&sr=8-1)

[境界づけられたコンテキスト 概念編 - ドメイン駆動設](https://little-hands.hatenablog.com/entry/2017/11/28/bouded-context-concept)
はじめてのDDD part2 ~DDDが扱う領域とは？~

# はじめに
前回は「そもそもDDDとは？」というテーマを学習しました。
さて、今回は「DDDが扱う領域」について学習しましょう。システム開発においては、取り組むべき問題領域を分析して、課題を整理し、技術的取り組みを用いて解決します。特に概念の理解が難しい「ドメイン」や「境界づけられたコンテキスト」などについて整理しました。

# 全体像
まず、主要概念の全体像を紹介します。下の図を見てください。
```
広義のドメイン（チーム全体が取り組む事業全体）
├問題領域（課題の分析化と明確化）
|　├コアドメイン
|　└サブドメイン
|　　├支援サブドメイン
|　　└汎用サブドメイン
└開発領域（課題の解決）
 　└境界付けられたコンテキスト
```
では、それぞれの用語の意味について解説していきます。
 # ドメインとは？
 ドメインという言葉を一言で説明すると、<strong>「対象とする事業が扱う世界」</strong>を表します。その世界には独自のルールや文化が存在します。チームの全員がその世界について深く理解することがよい開発には不可欠ですが、すべて理解するのはしんどいので上のように分割して考えます。
 ### 「コアドメイン」と「サブドメイン」
 両者の違いは以下の通りです。
 <dl>
  <dt>コアドメイン</dt>
  <dd><strong>事業で最も重要で不可欠な部分。</strong><br>
  優秀な人材を動員し、積極的に成長させる。
  </dd>
  <dt>サブドメイン</dt>
  <dd><strong>補助的な部分。</strong><br>
  もちろん不要というわけではない。
  </dd>
</dl>

:::note warn
コアドメインの部分に強みがない場合は、そもそもDDDで開発を行うべきか再検討する必要がある。
:::
:::note info
チーム全員が同じコア（サブ）ドメインを定義する必要はない。
当事者の得意分野に応じて両者は入れ替わる。
:::
### 「支援サブドメイン」と「汎用サブドメイン」
上の図からもわかるように、サブドメインは二つに分かれています。先ほどと同じように両者の違いを説明します。
 <dl>
  <dt>支援サブドメイン</dt>
  <dd>コアドメインほど重要ではないが特別なもの。<br>
  例：コアドメインの支援を行う独自機能
  </dd>
  <dt>汎用サブドメイン</dt>
  <dd>業務的に特別というわけではないが必要なもの。<br>
  例：認証機能
  </dd>
</dl>

# 「境界づけられたコンテキスト」とは？
続いて、「境界づけられたコンテキスト」について解説します。
私が参考にした書籍には、「境界づけられたコンテキスト」とは<strong>戦略的、業務的ドメインの課題を解決する部分</strong>を表すとありました。
しかし、私は<strong>システムを「チームやシステムごとに独立して意味を持つ領域に分割」することで、複雑さを管理しやすくする考え方</strong>と説明する方が適切であると思います。

:::note info
DDDにおける「コンテキスト」とは、いわば「企業や組織の文化」のような意味を持ちます。
:::

part1で説明したように、DDDでは「ユビキタス言語」を用いて実装します。そこで、ユビキタス言語の意味が変わる境界で「境界づけられたコンテキスト」を用いよう！ということです。そんなことをして何がいいのかというと、<strong>異なる概念が混ざらないため、比較的シンプルなものが作れる</strong>ということです。
# おわりに
今回は「ドメイン」や「境界づけられたコンテキスト」などについて解説しました。新しい考え方に混乱する方も（私を含め）いると思いますが、自分なりに落とし込んで理解できるよう頑張りましょう！
また次回もよろしくお願いします。

### 参考
[「実践ドメイン駆動設計」から学ぶDDDの実装入門/青木 淳夫](https://www.amazon.co.jp/%E3%80%8C%E5%AE%9F%E8%B7%B5%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%E3%80%8D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6DDD%E3%81%AE%E5%AE%9F%E8%A3%85%E5%85%A5%E9%96%80-CodeZine-Digital-First-%E9%9D%92%E6%9C%A8/dp/4798161500/ref=tmm_hrd_swatch_0?_encoding=UTF8&sr=8-1)
はじめてのDDD part1 ~そもそもDDDとは？~

# はじめに
この記事では約20パートにわたってDDD（ドメイン駆動設計）についてなるべくかみ砕いて解説します。一部説明を割愛したりして、なるべく読みやすい記事を書くことを意識しました。しかし、すべてのパートを読み終えたときには、他人に説明できるくらいになることを目標としています。また、「とりあえずなんとなくでいいから知っておきたい！」という方も気になったところだけでもいいので読んでいただけると幸いです。<br>
なお、今回この記事を書くのにあたり以下の書籍を参考にしました。（Amazonのリンクにとびます。）

[「実践ドメイン駆動設計」から学ぶDDDの実装入門/青木 淳夫](https://www.amazon.co.jp/%E3%80%8C%E5%AE%9F%E8%B7%B5%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%E3%80%8D%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6DDD%E3%81%AE%E5%AE%9F%E8%A3%85%E5%85%A5%E9%96%80-CodeZine-Digital-First-%E9%9D%92%E6%9C%A8/dp/4798161500/ref=tmm_hrd_swatch_0?_encoding=UTF8&sr=8-1)
また、私独自の解釈をもとに解説することになるので、厳密な定義とは異なる言い回しを用いることも所々見られると思いますがご了承ください。🙇
では、解説に移ります！

# DDDの概要
まずはじめにDDDそもそもの概要について解説します。<br>
DDDとはドメイン駆動設計（Domain-Driven Design）のことです。2003年に海外の方が考えた<strong>高品質なソフトウェアを作成するための新たな開発手法</strong>です。
その内容を簡単に説明すると、<h3>「顧客と開発者が共通の言語である『ユビキタス言語』で交流して、一体感のあるチームを作ろう！」</h3>というものです。<br>

:::note warn
顧客について
サービスの利用者（ユーザー）とは限らず、他の開発部門のことを指すこともあります。つまり、そのシステムや業務領域に応じた広い意味をもつということである。
:::

では、どうしてわざわざ新たな手法を提案したのでしょうか？それには明確なメリットがあるからです。

:::note info
「ユビキタス言語」とは
ユビキタス（ubiquitous：偏在する）とあるように、業務や開発に関わるすべての人が、見聞きして同じ意図を連想できる一意の言葉。
これにより、コミュニケーションを滞りなく進められたり、悩むことなくコードを書けたりするようになる。
:::

# DDDを導入するメリット
メリットには以下の３つが挙げられます。
<ol>
<li>プログラマとドメインエキスパートが<strong>「共通言語」を用いて視点を合わせる</strong>ことにより、１つのチームとして、まるで利用者が開発するようにソフトウェアを構築できる。
<li>ドメインエキスパートですら理解が浅い業務領域を深く検討することにより、<strong>業務知識をチームで洗練、共有し、理想像を検討できる。</strong>
<li>「共通言語」をそのままプログラムとして実装する。「設計＝コード」と表現できるように、<strong>開発時の翻訳コストが不要になる。</strong>さらに、<strong>実装前に課題に気づくことができる。</strong>
</ol>

:::note info
ドメインエキスパートとは
担当業務やシステムについて一番詳しい人。職種や肩書は関係ないため、必ずしも業務担当者であるとは限らない。
また、複数人の場合もある。
:::

# 補足説明
DDDは従来の「トランザクションスクリプト」ではなく、「ドメインモデル」を用いることで開発の複雑さに対処します。そのため、プログラムの記述方法が変わります。２者間の違いを簡単に説明します。
<dl>
  <dt>トランザクションスクリプト</dt>
  <dd>要求された処理をその手順で記述する。<br>
    処理単体を記述するのは簡単だが、同じようなものが増えすぎると変更のときに大変。  
  </dd>
  <dt>ドメインモデル</dt>
  <dd>処理をモデルとして表して、あるところで一元管理する。<br>
  はじめて記述するときは面倒だが、変化に対応しやすい。
  </dd>
</dl>

:::note info
ドメインモデル自体の定義
「モデル」とは、抽象化により不要な詳細を省くことを表す。
地名や建物名がすべて書いてある地図よりも目立つ建物のみが書いてある地図の方がナビに適しているというようなイメージ。
「ドメインモデル」はその名の通り、<strong>複雑な業務のドメインから必要なものだけを適切に抽出する方法</strong>である。
:::
また、DDDは「アジャイル開発」を前提としています。アジャイル開発と対照的なものとして「ウォーターフォール開発」があります。両者を説明するにあたり、「リテールガイド編集部」さんの画像を借りさせていただきます。

![8e38154d3edd994008766b38aa694b07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817741/d3fee854-7f66-796f-1433-e115c5fc633b.png)
設計、実装、テスト、リリースを何回も行うか、一回限りで済ませてしまうかの違いです。
先ほどのトランザクションスクリプトとドメインモデルと同様に、もちろんどちらにもメリット・デメリットがあるので一概にどちらが良いというわけではありません。

# おわりに
今回は``はじめてのDDD part1``ということで、概要や周辺情報について紹介しました。次回もまたよろしくお願いします！
初心者エンジニアがC#でToDoアプリを作ってみる

※随時更新中です。

## 自己紹介
駆け出しエンジニア。
前社はハズレSESでエンジニアとしての経験が積めずに今は2社目。
エンジニアとして経験を積めるようにアピールする材料として学習記録の記事を書いていきます。

## 概要
C＃を使ってToDoアプリを作る。
簡単でもいいので実務想定で作っていく。
ChatGPTに頼りまくる。

## 流れ
1. 環境構築
1. プロジェクトの作成
1. 要件定義
1. 設計
1. 構築
1. テスト
1. Gitの使用
1. Dockerの使用
1. デプロイと改善

### 環境構築
1. .NET SDK のインストール
1. VScodeのインストール
1. Gitのインストール
1. Dockerのインストール

### プロジェクトのファイル構成
`dotnet new webapi -n ToDoApp`
WEB APIプロジェクトの作成

`cd ToDoApp`
プロジェクトに移動する

プロジェクト構成↓
ToDoApp/
├── Controllers/
│   └── ToDoController.cs   # APIエンドポイント
├── Models/
│   └── ToDoItem.cs         # ToDoアイテムのデータ構造
├── Repositories/
│   └── IToDoRepository.cs  # リポジトリインターフェース
│   └── ToDoRepository.cs   # データ操作のロジック
├── Services/
│   └── ToDoService.cs      # ビジネスロジック
├── Dockerfile              # Dockerの設定ファイル
├── docker-compose.yml      # Docker Compose設定
├── Program.cs              # アプリケーションのエントリーポイント
└── Startup.cs              # アプリケーション設定

## 要件定義
機能一覧:
	1.	ToDoアイテムの追加: ユーザーが新しいタスクを追加できる。
	2.	ToDoアイテムの一覧表示: すべてのタスクを表示できる。
	3.	ToDoアイテムの編集: タスクの内容や完了状態を更新できる。
	4.	ToDoアイテムの削除: 不要なタスクを削除できる。
	5.	状態の更新: タスクが完了済みか未完了かを設定できる。

基本的な仕様:
	•	データの保持方法: 初期はインメモリ（後でデータベースに変更）
	•	APIエンドポイント:
	•	POST /api/todo（新規追加）
	•	GET /api/todo（一覧表示）
	•	PUT /api/todo/{id}（更新）
	•	DELETE /api/todo/{id}（削除）

## 設計
### モデルの設計
・ToDoItem.csをModelsフォルダに作成し、ToDoアイテムの構造を定義します。
 ```
 public class ToDoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsComplete { get; set; }
}
```

### リポジトリパターンの設計
・IToDoRepository.cs: リポジトリのインターフェースを作成し、CRUDメソッドのインターフェースを定義します。
・ToDoRepository.cs: リポジトリ実装クラスを作成し、メモリ内でのデータ管理を行います。
### サービスの設計
・ToDoService.cs: ビジネスロジック（タスク管理）をサービスクラスに分離します。
### コントローラの設計
・ToDoController.cs: Controllersフォルダに作成し、APIエンドポイントとリクエスト処理を定義します。
GPUが載っているPCでASPEEDから出力したい

## はじめに
環境によりますが、GPU 搭載の ASPEED のオンボードを持つマザーで、NVIDIA ドライバーを入れたときに表示されない場合があります。大体は xorg.conf を単に削除するぐらいで良いのですが、、、

## インストール後の調整
通常通りに OS をインストールし、NVIDIA ドライバまで当たっている状態とします。

- Wayland を無効にします
- xorg.conf が生成されていることを確認します
- 下記のように書き換えます ※BusID は環境により異なります
```
Section "Device"
    Identifier     "Device0"
    Driver         "ast"
    VendorName     "ASPEED"
    BusID          "PCI:195:0:0"
EndSection
```
- Screen に下記のように Display サブセクションを追記します ※Modes は環境により異なります
```
Section "Screen"
    Identifier     "Screen0"
    Device         "Device0"
    Monitor        "Monitor0"
    DefaultDepth    24
    SubSection     "Display"
        Viewport   0 0
        Depth       24
        Modes      "1920x1080"
    EndSubSection
EndSection
```
- 再起動します

## 参考にしたサイト
https://www.hpe.com/jp/ja/servers/linux/technical/xorg-fake-dual.html
【UE5】VRMアバターがSceneCaptureComponentCubeに映らない問題

かなりニッチな内容ですが、どなたかの役に立てれば光栄です。
# 解決方法
解決方法自体はシンプルだったため、先に載せておきます。
- 読み込んだマテリアルインスタンスの01_Extentionから`bUseFOVScale`を**False**にする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/ba6d68ff-714f-1b73-881a-0f77d0b7562d.png" width="70%">

それぞれのマテリアルの内部まで深く確認できていないため、上記の変更で何か別の問題が発生するかもしれません。
もし確認できたら追記したいと思います。

# 概要
タイトルの映らないという様子は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/303539b1-45de-1e1f-e145-90b561461a4d.png)
こちらは`SceneCaptureComponentCube`で取得した全天球画像ですが、アバターの頭頂部と足の部分だけが消えてしまっています。
足の影は残っているため、元のアバターを改変したというわけではないことが分かると思います。

# 再現
## 準備
### VRM4U
[公式セットアップ](https://ruyo.github.io/VRM4U/01_quick-start/)に沿って導入してください。

### VRMモデル
今回はVRoid Hubから[AvatarSample_D](https://hub.vroid.com/characters/675572020956181239/models/4479743608263344465)をお借りします
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/658fc6b1-866e-05f9-9f30-9bffd6f20ee6.png" width="65%">

### SceneCaptureComponentCubeの設定
https://qiita.com/mechamogera/items/f0e22ecf80e8f36fd5fe

基本的に記事に沿って行けば問題ないはずです。

https://qiita.com/t_reiya/items/e4f09f7cb8569b1c20fb

`SceneCaptureComponentCube`に立方体の線が入る場合は二つ目の記事を参考にポストプロセスの設定を変更してください。

## 問題の確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/3d896cf8-24ca-4e14-5509-298c5a0542c5.png)
上記のポストプロセス周りの設定を戻すと、どうやらCubeの上面と底面の部分で表示されなくなっていることがわかります。

また、VRMのインポート時に`MToon Lit`を選択した場合は正常に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/104868ab-aa93-ae76-4403-d4955f307599.png)
（左：MToon Unlit　右：MToon Lit）

SceneCaptureComponentCubeで`FinalColor`ではなく`SceneColor`にしても該当の問題は発生しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/aed4d8b3-0c67-743a-8970-afa82ac93064.png)

ここまでで`MToon Unlit`で使用しているマテリアルに問題がありそう、ということが分かりました。

## 問題の解決
以下の手順で修正できるはずです。
1. `MToon Unlit`でインポートしたVRMアバターのマテリアルインスタンスを開く
    - ここではインポート時に生成される元のマテリアルインスタンスを修正します
1. 該当マテリアルのパラメータのうち、01_Extention内にある`bUseFOVScale`を有効にし、**False** に設定する
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/55b60a0c-48cd-7f06-f236-48e165aa6d06.png" width="70%">
1. VRMアバターの持つすべてのマテリアルに上記を適用する
    - Cubeの上面と底面に入る可能性のあるマテリアルだけに適用しても良いかもしれないです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807732/f2df9515-de81-87ac-fc25-889579ebb109.png)

一通り設定すると、上記の画像のように正常に表示されるようになるはずです。

最終的な解決方法としては、該当のマテリアルインスタンスのパラメータを手当たり次第試して見つけました。
そのため、`bUseFOVScale`が具体的にどう影響しているか、という部分は調査しておらず解説もできません。すみません。

# さいごに
前回の記事を含め、元々は可愛いVRMアバターを周囲に配置した360°画像を作りたい！というモチベーションから始めたのですが、思っていたよりも細かい躓きポイントが多かったです。
これで無事綺麗な360°画像を生成できるようになったはずです。
pyファイルexe化を1クリックで出来るようにする（環境が汚れないver）

https://qiita.com/mtoneru/items/8827791a0e52ec8e6813
の続編です。
↑の方法ですと、ローカルのPython環境が汚れてしまうので、virtualenvを使用します。

まず、virtualenvは必要なので準備します。
```
pip install virtualenv
```

そして、exe化したい.pyファイルがあるディレクトリで、こちらのバッチファイルを実行するだけ。
```bat:make-exe-file.bat
cd /d %~dp0
virtualenv venv
call venv\Scripts\activate
pip install -r requirements.txt
pip install pyinstaller
for %%f in (*.py) do (
    pyinstaller --clean --onefile ^
		"%%f"
)
rd /s /q build
```
以上です。
Isaac ROSの環境構築

# はじめに
以前から気になっていたIsaac ROSを研究で使えるかもしれないと感じたので触ってみます．

最近買ったこの書籍に紹介されていたのがきっかけで使ってみたくなりました．

https://gihyo.jp/book/2024/978-4-297-14395-4

ステレオカメラを用いたVisual SLAMがROS 2向けに用意されているらしく，将来的に触れたいと考えています．

今回は環境構築です．

# Isaac ROSってなに？

https://www.macnica.co.jp/business/semiconductor/manufacturers/nvidia/products/143970/

一言で言えば，NVIDIAが公開しているGPUが使えるROS 2開発パッケージです．
IsaacというのはNVIDIAがロボット開発に向けて提供しているプラットフォームの総称です.

ロボットの開発ではROSが使用されることが多いですが，ROSはCPUで動作することを前提に作られています．そのため，強力な計算資源であるGPUを使用したロボット開発用パッケージをNVIDIAが公式に公開しています．

それがIsaac ROSになります．
# 環境構築
### GPU周りのセットアップ
ROS 2 HumbleがUbuntu 22.04で動作する環境がある前提になります．また，NVIDIAドライバやCUDA，Dockerの導入も同様です．
公式ドキュメント通りにやっていきます．

https://nvidia-isaac-ros.github.io/getting_started/index.html

最初の関門はシステム要件です．もちろんNVIDIA製のGPUが必要です．
ただ，何でも良いわけではなく，そこそこのスペックが要求されていました．

私はGeforce RTX 3060を使用しました．（研究室で使っていたGPUが対応していないので，自宅のPCから引き抜いてきた）
CUDAは12.4です．

:::note warn
追記（2025/2/5）
Isaac ROSのバージョンがアップデートされ、要求されるCUDAのバージョンが12.6以上となりました。
それまで動いていたDocker環境が動かなくなってしまったため、ローカルのCUDAやドライバを入れ直しバージョンを対応させたり、リポジトリを消去し再ビルドなどの作業を行いました。
ほぼ最新バージョンと呼べるCUDAとそれを利用できるNvidiaドライバをアップデート毎に追いかけていく必要があることに注意してください。
:::

### 開発者環境のセットアップ

https://nvidia-isaac-ros.github.io/getting_started/dev_env_setup.html

とにかくDocker上で開発することを勧めてくるので，大人しく従いました．
NVIDIA Container Toolkitを導入します．

https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html#installing-with-apt

私はAptでインストールしました．Dockerの設定も一通りやりました．

"Developer Environment Setup"のページに戻り，Git LFSのインストール，ROS 2ワークスペースを作成をします．

これにて環境構築は終了です．これから作成したワークスペースへパッケージを入れて検証していきます．
通知・アラートメッセージには、それを発報しているプログラムのURLも書くんだ

良いアラートメッセージにはこんな情報を盛り込めというのに、よく言われるのは

- **この異常事態による影響範囲、誰がどう困っていると思われるか**
- **このメッセージを読んだ人が取るべき行動、考えるべきこと**

なんていうのがあります。これは、発報時の対応のためですね。

それらと並んでもうひとつ、平時のメンテナンスのためにもう一つ盛り込んでおくと絶対に幸せになれる情報があります。

- **このアラートを出しているプログラムはどこの誰か**

このアラートはもう止めたい、条件を変えたい、通知先を変えたいなんていうときに、枯れたシステムだともう何年も誰も触っていないのでどこから飛んできていてどうやったら設定変更できるのかわからないなんということが往々にして起こりがち、それで設定変更のために調査で半日溶かしたりとかがありえます。

設定画面URLやコードリポジトリURLがメッセージ中に含めておけば、そうした半日がワンクリックに短縮できることになるのです。
【はじめまして Vue.js】ref( ) は何者？

## はじめに
Reactは大体理解してきたし実装もある程度できるけど、Vue.jsは全然知らないわからない人間が書いています📝
Vue.jsを習得する必要が出てきたので、本当に基礎の基礎から一歩ずつ勉強し始めました。
プログラミングの勉強を始めてから、8ヶ月くらいの卵です🥚
　
## 今日はref( )について
**💡ref( )とは？**

公式ドキュメントでは、以下のように説明されています。

:::note info
内部値を受け取り、リアクティブでミュータブルな ref オブジェクトを返します。
またそれは、内部値を示した単一プロパティである .value を持っています。
:::

わかるような、わからないような.....だった私は、コードを用いた具体例でこの文章の意味を理解しました。

```vuejs:App.vue
<script>

const count = 0

const number = 0

function increment() {
    number += 1
}

</script>


<template>

<h1>{{ count }}</h1>
<button @click="count++">button for count</button>

<h1>{{ number }}</h1>
<button @click="increment">button for number</button>

</template>
```
上記のコードをなんとなく見た時に、`<button>`で定義されたボタンをクリックすると、`count`や`number`が1ずつ増えるんだろうな〜と考えますが、実際にはこのコードではそのような動きは実現できません🙅‍♂️

ここで **ref( )** が登場します💡
先述のコードを修正して、`<button>`をクリックすると`count`や`number`が1ずつ増えるようにします。

```vuejs:App.vue
<script>
import { ref } from 'vue' // refをimport

const count = ref(0) //ref()を使用

const number = ref(0) // ref()を使用

function increment() {
    number.value += 1
}

</script>


<template>

<h1>{{ count }}</h1>
<button @click="count.value++">button for count</button>

<h1>{{ number }}</h1>
<button @click="increment">button for number</button>

</template>
```
➡️ 前者のコードとの違いは2つ。
- 変数定義のところで `ref()`を使用している
- 変数の値を取り出す部分で `.value` が追加されている

`ref( )`を使用すると、`refオブジェクト`が返ってきます。
その`refオブジェクト`は`value`というプロパティを持っていて、その`value`プロパティの値に`( )`の中に指定した値を保持します。
先ほどのコードであれば以下の通り、`count.value`も`number.value`も`0`になりますし、その値を使用した計算も可能です。また、文字列や配列、オブジェクトなどのデータも適用可能です。

```vuejs:App.vue
<script>
import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0
console.log(count.value + 5) // 5

const number = ref(0)
console.log(number.value) // 0
console.log(number.value + 10 * 2) // 20

// 文字列の場合
const name = ref('meme')
console.log(name.value) // 'meme'

// オブジェクトの場合
const myFam1 = ref({
    husband: 'muck',
    daughter: 'peco',
    son: 'bee',
})
console.log(myFam1.value.husband) // 'muck'

// オブジェクトのプロパティの値がref()の場合
const myFam2 = {
    husband: ref('muck'),
    daughter: ref('peco'),
    son: ref('bee'),
}
console.log(myFam2.daughter.value) // 'peco'

// 配列の場合
const myHobbies = ref([
    'walking', 'driving', 'cooking', 
])
console.log(myHobbies.value[0]) // 'walking'

// 配列の要素がref()の場合
const myFavoriteFoods = [ref('ice cream'), ref('hamburger'), ref('chocolate')]
console.log(myFavoriteFoods[0].value) // 'ice cream'

</script>
```

ここまで具体例を交えなが見てきたうえで、冒頭の公式ドキュメントの文章をもう一度見てみますと、

:::note info
内部値を受け取り、リアクティブでミュータブルな ref オブジェクトを返します。
またそれは、内部値を示した単一プロパティである .value を持っています。
:::

以下のような解釈ができます。
- **内部値を受け取り**
    - ➡️ `ref( )` の `( )` の中に入れた値を受け取る
- **リアクティブで**
    - ➡️ データが何かの操作に反応して変化できる（クリックや計算など）
- **ミュータブルな**
    - ➡️ `.value`で取得できる値には別の値を再代入可能
- **ref( )オブジェクト**
    - ➡️ `ref( )`を使用すると返ってくるオブジェクトのことで、プロパティに`value`を持っている
- **単一プロパティである`.value`**
    - ➡️ `.value`の値 === 最初に引数で受け取った値

----
ここまで噛み砕かなくても、直感的に使えたらまずはそれでいいのかな？とも思いましたが、すぐ開発しないといけないとかの迫られた状況じゃないのでじっくりひとつの記事にしました（のんびり）。

またコツコツと学習を進めていこうと思います。
何か説明不足や間違い、誤解を招きそうな表現などがありましたらご指摘をいただけますと幸いです。
About a new Boost.Assert flag "BOOST_ASSERT_HANDLER_IS_NORETURN" (available from Boost 1.88)

```cpp:assertion_failed.cc
#include <stdexcept>

namespace boost
{
    void assertion_failed(char const * expr, char const * function, char const * file, long line){
        (void)function;
        (void)file;
        (void)line;
        throw std::runtime_error(expr);
    }
    void assertion_failed_msg(char const * expr, char const * msg, char const * function, char const * file, long line){
        (void)msg;
        (void)function;
        (void)file;
        (void)line;
        throw std::runtime_error(expr);
    }
}
```

```cpp:prog.cc
#define BOOST_ENABLE_ASSERT_HANDLER
//#define BOOST_ASSERT_HANDLER_IS_NORETURN

#include <boost/config.hpp> // BOOST_NORETURN
namespace boost
{
#if defined(BOOST_ASSERT_HANDLER_IS_NORETURN)
    BOOST_NORETURN
#endif
    void assertion_failed(char const * expr, char const * function, char const * file, long line); // user-defined
#if defined(BOOST_ASSERT_HANDLER_IS_NORETURN)
    BOOST_NORETURN
#endif
    void assertion_failed_msg(char const * expr, char const * msg, char const * function, char const * file, long line); // user-defined
}

#include <boost/array.hpp>
#include <cstdio>

int main(int argc, char **argv){
    (void)argv;
    boost::array<int, 3> a;
    if(argc==1)printf("%d\n", a[3]);
}
```

With `-Wall`, this program[^1] raises Warray-bounds because:

1. BOOST_ENABLE_ASSERT_HANDLER is defined
1. assertion_failed is defined in different .cc and the compiler cannot notice this function throws
1. array.hpp impl is `return BOOST_ASSERT_MSG( i < N, "out of range" ), elems[i];`
1. assertion_failed declaration is not BOOST_NORETURN and short-circuit does not work

https://wandbox.org/permlink/hXQ8jU3MS0X2Zae2

This can be a problem when -Werror is set.

Hence I introduced a new flag `BOOST_ASSERT_HANDLER_IS_NORETURN` ( https://github.com/boostorg/assert/pull/40 ) to make sure the short-circuit work.

You can confirm https://wandbox.org/permlink/iOhTvSL4wutMEROa does not raise Warray-bounds any longer.

[^1]: I understand this is extreme example, but can be reproduced by `boost::heap::fibonacci_heap<int> hp; hp.push(1); hp.pop();` as well, which is normal example. https://wandbox.org/permlink/1UtnWOMXIVSL3I62
ログインシェルはbashのまま、zshに自動切り替え（ルート権限がないけどzshを新たに導入したい！）



zshをダウンロードしmakeします。
```bash
cd $HOME/local
wget https://sourceforge.net/projects/zsh/files/zsh/5.9/zsh-5.9.tar.xz/download -O zsh-5.9.tar.xz
tar xvf zsh-5.9.tar.xz
cd zsh-5.9
./configure --prefix=$HOME/local --enable-multibyte --enable-locale --with-tcsetpgrp
make
make install
```

`.bash_profile`に次のように書き込みます。
```bash
# =============================
# シェルと確認と変更
# =============================
# 現在のシェル名を取得
current_shell=$(basename "$SHELL")

if [[ "$current_shell" == bash ]]; then
    if [ -x "$(command -v $HOME/local/bin/zsh)" ]; then
    	exec $HOME/local/bin/zsh
        # .zshrcは自動的にsourceされる
    else
    	source $HOME/.bashrc
    fi

elif [[ "$current_shell" == zsh ]]; then
    : # pass
else
	echo "Error! -- Undefined shell: $current_shell"
fi

```
Teratermで作ったLinuxの認証鍵ファイルでの接続方法

## はじめに
今回はEC2（RHEL）で作成したユーザーがパスワードログインできなかったので認証鍵ファイルを作成して接続した過程をせっかくなので記事にしようと思います。

## 手順
1.Teratermで認証鍵を作成
2.接続先のアクセス権限の設定
3.作成した鍵の登録

## 1.Teratermで認証鍵を作成
①クライアントのTeratermを開き、上の方にある設定から「SSH鍵生成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818555/4ae37db3-992d-305f-619d-0b57bea02f4e.png)

②鍵の種類、ビット数選択後、生成をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818555/c734c974-d0fa-916a-f408-b87fba922f4f.png)

③パスフレーズを入力し各鍵を保存
※このパスフレーズは認証鍵を使ったログインの際に入力する必要があるものです。
忘れないようにどこかへメモして保存しておきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818555/d16858d8-7532-1651-22b8-91198c1bdf10.png)

## 2.接続先のアクセス権限の設定

④接続先に接続後、以下のコマンドを打鍵してください。
```java:コマンド
install -m 0700 -d ~/.ssh //SSH関連のファイルを格納するディレクトリ

touch ~/.ssh/authorized_keys //authorized_keys というファイルを作成

chmod 600 ~/.ssh/authorized_keys //authorized_keysファイルのアクセス権限
```
⑤先ほど保存した公開鍵をメモか何かで開き中身をコピー or ドラック＆ペースト

⑥（⑤の前者の場合）vi ~/.ssh/authorized_keysで編集もーどにして、鍵内容をペースト

 (⑤の後者の場合）cat id_ras.pub>> ~/.ssh/authorized_keys

## おわり
これで接続先へできるようになっています。
接続の際は、先ほど保存した秘密鍵の保存先パスを選択するのと、鍵作成の際に決めたパスフレーズを入力します。
UnrealEngineのMergeStaticMeshActors利用でComplex Collisionが消える

StaicMeshEditorSubsystemのMergeStaticMeshActorsでマージしたStaticMeshAcotrのStaticMeshのComplex Collisionが存在していなかったので調査対応してみた内容を記録しておきます。

# 環境

UE5.3

# MergeStaticMeshActorsを使うとComplex Collisionが消える

Dataprepを使って3Dデータを取り込む際に、StaicMeshEditorSubsystemのMergeStaticMeshActorsを使ってアクタをマージしています。
しかし、マージされたアクタのStaticMeshにおいてComplex Collisionが存在しないようになっています。
（Editor上でStaticMeshを確認してShowでComplex Collisionを確認しても何もなく衝突も発生しない）

# 原因

MergeStaticMeshActorsOptionsのMeshMergingSettingsのLOD Selection TypeでCalculate Content LOD levelを選択していたのが原因みたいです。
Use all LOD levelsにするとComplex Collisionが存在していました。

ただ、Calculate Content LOD levelを選択していないとMeshMergingSettingsのMerge Materialsのオプションがチェックしてあってもマテリアルが統合されません。

MeshMergingSettingsのMerge Physics Dataが関係あるかと思ったんですがSimpleCollisionにしか関係しなさそうです（チェックするとSimpleCollisionが生成される）。

ここら辺詳しい仕様が書かれたドキュメントや情報をみつけられておらずコードも読みこめていないので何でそうなるといったような部分は全然把握できていません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/36acb0d1-8192-f1d9-d3c0-693fb4e3d2a9.png)

# 対応

対処療法ですが、MergeStaticMeshActorsでLOD Selection Typeオプションを変えて表示用のモデル(LOD Selection Type:Calculate Content LOD level、Merge Materials:true)とコリジョン用のモデル(LOD Selection Type:Use all LOD levels)２つを用意してコリジョン用のモデルをHidden in Gameに設定することで非表示にして対応しました。
マージされたStaticMeshをfbxでエクスポートして新たなアセットとしてインポートするとComplexCollisionはあったので手動ならそういう対応もできるみたいです。

もっといい方法があったら知りたいです。
(2024) インターネット制限されているWindowsにPython環境 & openpyxl をインストールする方法

## 目的

セキュリティー原因で外部ネットへのつながりを制限しているWindowsにPythonを実行する環境を作った時のメモです。

前提としては、ダウンロードしたファイルは持ち込みが可能ですが、直接外部ネットワークに繋がるのは制限されているネットワーク環境です。


## 環境

実施時点：2024年11月11日
OS: Windows 10 
Python: 3.13 (最新)
Openpyxl: 3.1.5 
(Openpyxlの依存関係)jdcal: 1.4.1 
(Openpyxlの依存関係)ex_xmlfile: 2.0.0 

## 手順

### 1. Python
まずは最新のPythonを下記のURLからダウンロードし、ローカルに持ち込みインストールします。

URL: https://www.python.org/ 

インストールする時ですが、具体的な画面は忘れましたが、インストール後Pathを登録するかなどのオプションがあるので、そちらにチェックをし、Pathは登録する必要があります。そうすることで、CMDモードでどこからでもPaythonを実行することができます。

インストールされているか確認する方法は、新しくCMDモードを開き、下記のコマンドを実施することです。Pythonバージョン情報が戻ってきたらインストールされたことになります。

```
cmd> py --version
Python 3.13.0
```

### 2. Openpyxl と依存関係のライブラリ

openpyxlを実行するには、二つの依存関係ライブラリもインストールする必要があるので、それぞれダウンロードし、ローカルに持ち込みます。

openpyxl: https://pypi.org/project/openpyxl/
jdcal: https://pypi.org/project/jdcal/
ex_xmlfile: https://pypi.org/project/et-xmlfile/

インストールする時は上記のダウンロードファイルを保存したローカルパスで実施する必要があります。

そして実行する時には 「--no-index」　をつける必要があります。

```
cmd> pip install ex_xmlfile-2.0.0-py3-none-any.whl --no-index 
<略> 

cmd> pip install jdcal-1.4.1-py2.py3-none-any.whl --no-index 
<略> 

cmd> pip install openpyxl-3.1.5-py2.py3-none-any.whl --no-index 
<略> 

```

上記のインストールが完了できましたら、下記のコマンドを実行してopenpyxlがインストールされているか確認できます。

```
cmd> pip show openpyxl 
Name: openpyxl 
Version: 3.1.5 
<略> 
```

### 3. openpyxlが有効かコードで確認する

無事インストールが完了できたら、今度は簡単なPythonプログラムを作り、確認することができます。

```Python
import openpyxl 

print(openpyxl.__version__)
```

上記のコードを実行して、バージョン情報が表示できたら完成です。

```
cmd> py test.py
3.1.5
```