OmniAICreator/Qiita-1.07M huggingface dataset:
HTML と CSS だけで正四面体を作る

## この記事の概要

ふと、モダンブラウザでは三角関数が使えるようになっていることを思い出しました。

https://caniuse.com/mdn-css_types_sin

何か面白いことができないかなと思い、正四面体を作ってみました。

## 完成形

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/304f8f71-7aa5-c131-a07b-f6463e09f0c5.gif)

## HTML

HTML は非常にシンプルです。

```html
<body>
  <div class="scene">
    <div class="regular-tetrahedron">
      <div class="face face-1">1</div>
      <div class="face face-2">2</div>
      <div class="face face-3">3</div>
      <div class="face face-4">4</div>
    </div>
  </div>
</body>
```

## CSS

### シーンの準備

```css
.scene {
  width: 100dvw;
  height: 100dvh;
  display: grid;
  place-items: center;
}
```

単に幅と高さを画面いっぱいに設定して、子要素（正四面体）を中心に配置するための指定です。

### 正四面体の wrapper を作る

それぞれの面を個別に用意すると何かと大変なので、wrapper を用意しておきます。

```css
.regular-tetrahedron {
  --length: 50dvh;
  --width: var(--length);
  --height: calc(var(--length) * sin(60deg));
  width: var(--width);
  height: calc(var(--height));
  transform-style: preserve-3d;
}
```

正四面体のそれぞれの面、つまり正三角形の高さは`一辺の高さ * sin(60°)`です。
CSS custom properties も用いながら計算しています。

また、3D として作るので`transform-style: preserve-3d;`を指定してあります。

### すべての面に共通のスタイル

正四面体なので面は 4 つ存在します。
すべてに共通なものを先に定義しておきます。

```css
.face {
  transform-origin: bottom center;
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
```

あらかじめ正三角形としての幅、高さを定義してあるので、`width`, `height`ともに 100% と設定しつつ`polygon(0 100%, 100% 100%, 50% 0)`でクリッピングをすれば正三角形ができあがります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/3138e080-5ddc-331e-85d9-c70b1ed81f09.png)

また、この後に角度を変えたり位置を動かしたりするので、計算しやすいように`transform-origin: bottom center;`を指定しています。

### 底面以外の 3 面

正四面体において、二面角を`θ`とすると`cosθ = 1/3`が成り立ちます。
つまり`acos(1/3)`を使えば底面以外の 3 つの面の角度を求められます。

```css
.face-1 {
  transform:
    translateZ(calc(var(--height) / 2))
    rotateX(calc(90deg - acos(calc(1 / 3))));
}

.face-2 {
  transform:
    translateX(calc(var(--width) / 4))
    rotateY(120deg)
    rotateX(calc(90deg - acos(calc(1 / 3))));
}

.face-3 {
  transform:
    translateX(calc(var(--width) / 4 * -1))
    rotateY(240deg)
    rotateX(calc(90deg - acos(calc(1 / 3))));
}
```

### 底面

他の面と違い、特に難しいことはありません。

```css
.face-4 {
  transform:
    rotateX(90deg)
    rotateY(180deg)
    translateY(calc(var(--height) / 2));
}
```

### アニメーション

動かしでもしないと全体像が見えづらいので、簡単にアニメーションを設定します。

```diff_css
+ @keyframes rotate {
+   from {
+     transform: rotateX(0deg) rotateY(0deg);
+   }
+   to {
+     transform: rotateX(360deg) rotateY(360deg);
+   }
+ }

  .regular-tetrahedron {
    --length: 50dvh;
    --width: var(--length);
    --height: calc(sin(60deg) * var(--length));
    width: var(--width);
    height: calc(var(--height));
    transform-style: preserve-3d;
+   animation: rotate 5s infinite linear;
  }
```

## 完成

これで、HTML と CSS だけで正四面体を作ることができました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/304f8f71-7aa5-c131-a07b-f6463e09f0c5.gif)
【JavaScript】someメソッドとeveryメソッド

# someメソッド
配列に対して、コールバック関数で指定した条件に合致する（trueを返す）要素が1つでも
ある場合にtrueを返すメソッド。
例：配列内に文字型の要素が含まれるかどうかを判定する処理
```JavaScript
const isString = function(elem){ return typeof elem === 'string'; }
const Array01 = [1, 2, 3 ,'4', 5, 'あ'];
const Array02 = [1, 2, 3 ,4, 5, 10];
const isIncludesString01 = Array01.some(isString);
const isIncludesString02 = Array02.some(isString);
console.log(isIncludesString01); // trueが返る
console.log(isIncludesString02); // falseが返る
```
### 内部の動き
(1) コールバック関数で、配列内要素を１つずつ取り出して条件に合致するかを確認する。
(2) 要素が条件に合致するか確認した結果、falseであれば次の要素の確認に進む。
(3) 要素が条件に合致するか確認した結果、trueであれば確認を終了し、trueを返す。
(4) 最後の要素まで確認が完了しfalseであればfalseを返し、終了する。

# everyメソッド
配列に対して、全ての要素がコールバック関数で指定した条件に合致する（true）場合に
trueを返すメソッド。
例：配列内の要素が全て数値かどうかを判定する処理
```JavaScript
const isNumber = function(elem){ return typeof elem === 'number'; }
const Array01 = [1, 2, 3 ,'4', 5, 'あ'];
const Array02 = [1, 2, 3 ,4, 5, 10];
const isAllNumber01 = Array01.every(isNumber);
const isAllNumber02 = Array02.every(isNumber);
console.log(isAllNumber01); // falseが返る
console.log(isAllNumber02); // trueが返る
```
### 内部の動き
(1) コールバック関数で、配列内要素を１つずつ取り出して条件に合致するかを確認する。
(2) 要素が条件に合致するか確認した結果、trueであれば次の要素の確認に進む。
(3) 要素が条件に合致するか確認した結果、falseであれば確認を終了し、falseを返す。
(4) 最後の要素まで確認が完了しtrueであればtrueを返し、終了する。
2分で読めるElasticsearchについて

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。

# はじめに

案件でプロジェクト管理のサポートをしております。
お客様との打合せの中でAWSサービスの話題になり、お客様から **「Elasticsearch」** の話が出てきました。

申し訳ございません。不勉強でした...

そのため、**「Elasticsearch」** がどのようなものなのかを早速インプットしました。

# Elasticsearchとは

>Elasticsearch は、Apache Lucene を基盤として構築された分散検索/分析エンジンです。2010 年のリリース以来、Elasticsearch はすぐに最も人気のある検索エンジンとなり、ログ分析、フルテキスト検索、セキュリティインテリジェンス、ビジネス分析、およびオペレーショナルインテリジェンスのユースケースに広く使用されています。
引用先：https://aws.amazon.com/jp/what-is/elasticsearch/

一言でいうと **「全文検索エンジン」** とのことです。

利用されているサービスの代表でいうと **「Google」「Yahoo!」「Bing」** などが挙げられます。
途端にすごくイメージしやすい！

お客様との打合せではAWSサービスから派生した話題だったので、てっきりAWSが提供しているサービスかと思っていました。
しかしながら実態は 

**Elasticsearch、およびその他の関連するマークは、米国およびその他の国におけるElasticsearch B.V.の商標、ロゴ、または登録商標です。** 

とのことです。

AWSは2015年に **Amazon Elasticsearch Service** をリリースしましたが、2021年に **Amazon OpenSearch Service** として名称を変更しております。

詳細は [こちら](https://aws.amazon.com/jp/blogs/news/amazon-elasticsearch-service-is-now-amazon-opensearch-service-and-supports-opensearch-10/
)

# 全文検索とは

> 全文検索とは、複数の文書（ファイル）から特定の文字列（キーワード）を検索する技術を指します。「全文」は「全て」の「文字」という意味であり、文書（ファイル）に含まれるすべての文字情報を対象として検索するので「全文検索」と呼ばれます。
引用先：https://www.sei-info.co.jp/quicksolution/column/fulltext-search/

**grep型** と **索引型** に大別されます。

### grep型

検索対象のテキスト全部を探す方式で、 **逐次検索** とも呼ばれます。

メリットは事前準備が不要で、すぐに検索ができることです。


ただし検索対象のテキストが大量にある場合、すべてのテキストを読み込むことになるため時間がかかるというデメリットもあります。

### 索引型

事前に検索対象のテキストから **索引(インデックス)** を作成し、検索時にはその索引を利用して検索語を探す方式です。

メリットは膨大な量の情報も高速で検索できることです。

デメリットは索引を作成するための初期コストや、テキストが更新されるたびに索引も更新する必要があり、時間や労力がかかることです。

ビジネスシーンにおいては大量のデータ群からほしい情報を高速に検索することが求められるので、索引型の全文検索が一般的です。

**Amazon OpenSearch Service** も索引型になります。

# 検索システムの構成

![スクリーンショット 2024-06-30 17.37.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/430ef39f-6026-22aa-42e5-da6b81c87d74.png)

![スクリーンショット 2024-06-30 17.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/d783972a-d404-64c7-83ff-65d139a345b3.png)


詳細はAWSが提供している以下資料を見れば理解が深まりました。

[サービスの概要について](https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_Amazon-OpenSearch-Service-Advanced-Search_0131_v1.pdf)

[検索に関する考え方について](https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_Amazon-OpenSearch-Service-Advanced-Search_0131_v1.pdf)

# さいごに

また1つ勉強させていただきました。ありがとうございました。
どの様な仕組みなのかはざっくり把握ができたので、お客様のシステムにどのように活用するかを検討していきたいと思います！

そして唐突ですが弊社のご紹介もさせてください。

▼ コーポレートサイト

https://prum.jp/

▼ Wantedly求人

https://www.wantedly.com/projects/626662

弊社メンバーは学習した内容を日々Qiitaの記事にアウトプットしております。
弊社にご興味のある方、まずは求人を見てみてください！
ご応募お待ちしておりますー！


# 参考記事

https://aws.amazon.com/jp/blogs/news/amazon-elasticsearch-service-is-now-amazon-opensearch-service-and-supports-opensearch-10/

https://docs.aws.amazon.com/ja_jp/opensearch-service/latest/developerguide/what-is.html

https://www.sei-info.co.jp/quicksolution/column/fulltext-search/

https://zenn.dev/segavvy/articles/e97fa8417a0ee3

https://saguroot.tanseisha.co.jp/column/detail15/
[watsonx.ai] HyDEのプロンプト

### HyDEとは
HyDEとは以下の仕組みを指しています。
1. 仮想文書の生成: クエリを受け取ると、HyDEはまず言語モデルを使って、そのクエリに対する仮想的な文書を生成します。
2. 文書のエンコード: 生成された仮想文書をContrieverなどのエンコーダーを使って埋め込みベクトルに変換します。
3. 検索: 埋め込みベクトルを使って、コーパス内の類似した実際の文書を検索します。
この方法により、HyDEはラベルなしでも関連性のある文書を効果的に検索できます。

https://arxiv.org/abs/2212.10496

### LangChain
LangChainでも実装が提供されています。
https://python.langchain.com/v0.1/docs/templates/hyde/

またAutoHyDEもあるようです。
https://note.com/ippei_suzuki_us/n/n94cea16ac02e

### プロンプト
仮想文書の生成のプロンプトをwatsonx.aiのgranite-8b-japaneseで試してみます。

まず、論文の中では以下のようにプロンプトがなっています。
```
A Appendix
A.1 Instructions A.1.1 Web Search
Please write a passage to answer the question Question: [QUESTION]
Passage:

A.1.2 SciFact
Please write a scientific paper passage to support/refute the claim Claim: [Claim]
Passage:

A.1.3 Arguana
Please write a counter argument for the passage Passage: [PASSAGE]
Counter Argument:

A.1.4 TREC-COVID
Please write a scientific paper passage to answer the question Question: [QUESTION]
Passage:

A.1.5 FiQA
Please write a financial article passage to answer the question Question: [QUESTION]
Passage:

A.1.6 DBPedia-Entity
Please write a passage to answer the question. Question: [QUESTION]
Passage:

A.1.7 TREC-NEWS
Please write a news passage about the topic. Topic: [TOPIC]
Passage:

A.1.8 Mr.TyDi
Please write a passage in Swahili/Korean/Japanese/Bengali to answer the question in detail. Question: [QUESTION]
Passage:

```

granite-8b-japanese用のプロンプトを作成してみます。
```プロンプト
### System:
あなたは質問に対する仮想的な文書を生成するアシスタントです。
### User:
製品とその機能について紹介する文章を書いてください。
製品：watsonx.ai
質問:：watsonx.aiとは何ですか？
文章：
### Assistant:
```

以下が出力されました。
```出力
WatsonX.aiは、組織がデータから価値を引き出し、よりスマートな決定を下すのに役立つエンタープライズAIプラットフォームです。WatsonX.aiを使用すると、ユーザーは自然言語処理、機械学習、予測分析などの高度なツールにアクセスして、データを理解し、洞察を得て、効率を向上させ、プロセスを改善できます。プラットフォームは、ヘルスケア、金融、小売、テクノロジーなど、さまざまな業界やアプリケーションで使用されており、企業がより正確でタイムリーな意思決定を行い、競争上の優位性を獲得しています。
```

さらに、別の質問をしてみます。
```プロンプト2
### System:
あなたは質問に対する仮想的な文書を生成するアシスタントです。
### User:
製品とその機能について紹介する文章を書いてください。
製品：watsonx.ai
質問:：watsonx.aiの主な機能と利点は何ですか？
文章：
### Assistant:
```

以下のような出力がされました。
watsonx.aiに関する知識は不正確ですが、ある程度の方向性は示されており、検索時の性能向上が期待されます。

```出力2
WatsonX.aiは、組織がデータから価値を引き出し、よりスマートな決定を下すのに役立つエンタープライズAIプラットフォームです。WatsonX.aiの主な機能と利点を次に示します。

1.自然言語処理（NLP）：WatsonX.aiは、電子メール、チャットボット、コールセンターレコードなどの非構造化データを理解し、意味のある洞察を提供します。

2.自動学習：WatsonX.aiは、モデルをトレーニングして新しいデータから学習し、予測を行い、アクションを実行できます。

3.データ統合：WatsonX.aiは、複数のソースからデータを統合し、ユーザーが単一のプラットフォームでデータを利用できるようにします。

4.分析：WatsonX.aiは、データの視覚化と、ユーザーが傾向とパターンを特定し、データに基づいて意思決定を行うのに役立つレポートを生成するツールを提供します。

5.アプリケーション開発：WatsonX.aiは、ユーザーがカスタムアプリケーションを構築して、ビジネスニーズに固有の洞察を提供できるようにする開発ツールを提供します。

6.コラボレーション：WatsonX.aiは、複数のユーザーが単一のプラットフォームでコラボレーションし、データや洞察に基づいて共同で作業できるようにします。

7.セキュリティとコンプライアンス：WatsonX.aiは、データのプライバシーとセキュリティを確保するための堅牢なセキュリティ機能を提供し、組織のデータ保護要件を満たします。

全体として、WatsonX.aiは、組織がデータから価値を引き出し、よりスマートな決定を下すのに役立つ包括的なエンタープライズAIプラットフォームです。
```

さらに一方精度を高める方法について考えますと、Fine-Tuningとの組み合わせが考えられます。
Fine-Tuningすると、より近しい文章が生成され、それをRAGに利用すればFine-Tuningモデルで生じうる間違いについて、検索してきた文章を元に訂正するアプローチが考えられます。
[watsonx.ai] RAG-Fusionのプロンプト

RAG-Fusionについて、どのようなプロンプトが利用されているのか調べてみます。

### RAG-Fusionとは
RAG-Fusionは、Retrieval-Augmented Generation（RAG）とReciprocal Rank Fusion（RRF）を組み合わせた新しい手法として定義されています。この手法は、以下のように定義されています：
RAG-Fusionは、RAGとRRFを組み合わせることで、複数のクエリを生成し、それらを相互ランクスコアで再ランク付けし、ドキュメントとスコアを融合します。このプロセスにより、生成されたクエリが元のクエリを様々な視点から文脈化するため、正確で包括的な回答を提供することができます。ただし、生成されたクエリが元のクエリと十分に関連していない場合、回答が話題から外れることがあります​。

以下がオリジナルの論文になります。

https://arxiv.org/abs/2402.03367

### プロンプト
LangChainからクエリを生成する箇所を調べてみます。

https://python.langchain.com/v0.1/docs/templates/rag-fusion/

以下のリンクからプロンプトが見つかりました。

https://github.com/Raudaschl/rag-fusion/blob/master/main.py

```python
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "You are a helpful assistant that generates multiple search queries based on a single input query."},
            {"role": "user", "content": f"Generate multiple search queries related to: {original_query}"},
            {"role": "user", "content": "OUTPUT (4 queries):"}
        ]
    )
```

### watsonx.aiで試してみる
クエリを日本語化し、watsonx.aiのgranite-8b-japaneseで試してみます。
ここでは、プロンプトのフォーマットに従い、修正してみます。

```プロンプト
### System:
あなたは、1つの入力クエリに基づいて複数の検索クエリを生成する役立つアシスタントです。
### User:
次のクエリに関連する複数の検索クエリを生成してください: watsonx.aiとは？
生成されたクエリ(8つ):
### Assistant:
```

出力は以下のようになります。
watsonx.aiがWatson X.aiとなっているのが気になります。

```出力
1.「Watson X.aiとは何ですか？」
2.「Watson X.aiについて詳しく教えてください。」
3.「Watson X.aiの機能は何ですか？」
4.「Watson X.aiの利点は何ですか？」
5.「Watson X.aiの制限は何ですか？」
6.「Watson X.aiの価格はいくらですか？」
7.「Watson X.aiのユーザーレビューはどのようなものですか？」
8.「Watson X.aiに似た他の製品は何ですか？」
```

### watsonx.aiで試してみる　２回目
そこで、製品に関する用語を勝手に変更しないように、以下のように1-shotの例を与えてみます。
この例は論文の中にも例としてあるMEMsマイクロフォンの例を参考にしました。

```プロンプト2
### System:
あなたは、1つの入力クエリに基づいて複数の検索クエリを生成する役立つアシスタントです。
### User:
次のクエリに関連する複数の検索クエリを生成してください: MEMsマイクロフォンについて教えてください。
生成されたクエリ(8つ):
1. MEMsマイクロフォンとは何で、どのように動作するのですか？
2. MEMsマイクロフォンを使用する利点は何ですか？
3. 市場で入手可能な最高のMEMsマイクロフォンは何ですか？
4. MEMsマイクロフォンは従来のマイクロフォンとどのように比較されますか？
5. MEMsマイクロフォンの消費者電子機器での応用は何ですか？
6. MEMsマイクロフォン技術の最新の進展は何ですか？
7. MEMsマイクロフォンは騒がしい環境でどのように性能を発揮しますか？
8. MEMsマイクロフォンを使用する上での一般的な課題は何ですか？

次のクエリに関連する複数の検索クエリを生成してください: watsonx.aiとは？
生成されたクエリ(8つ):
### Assistant:
```

今回はうまく出力したことが確認できます。
このテクニックは他にも期待する拡張クエリの方向性の制御にも役立ちます。

```出力2
1. watsonx.aiとは何ですか？
2. watsonx.aiの機能は何ですか？
3. watsonx.aiを使用する利点は何ですか？
4. watsonx.aiはどのように機能しますか？
5. watsonx.aiの価格はいくらですか？
6. watsonx.aiはどの業界で使用されていますか？
7. watsonx.aiの顧客事例はありますか？
8. watsonx.aiのロードマップとは何ですか？
```
WSL2からVSCodeを開いて開発を始める

# 前提条件
- VSCodeをインストールできている
- WSL2のUbuntuをインストールできている

# やったこと

## 1. VSCodeの拡張機能からWSLをインストール

VSCodeの拡張機能からWSLをインストールしましょう。
拡張機能の検索窓に`WSL`と入力すると一番上に出てきます。
お座りするペンギンのアイコンが目印です。

## 2. WSL2からVSCodeを起動

VSCodeでWSL拡張機能をインストール出来たら、WSLを起動し作業ディレクトリに移動して以下のコマンドを実行します。
```bash
code .
```

画像のようなメッセージが出て、VSCodeが起動します。
![スクリーンショット 2024-06-30 174814.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736836/5f9d4a90-3ec8-07d8-3863-c6ed84c7fe65.png)
生成AIの現状と活用

# はじめに
みなさん、**生成AI**といわれて何を思い浮かべますか？
有名なものだとChatGPTやDALL-E、CopilotやGeminiと行ったところでしょうか...?
また、ChatGPTと一口に言っても、GPT3.5-TurboやGPT-4、GPT-4oなど様々な選択肢が提示され、何がなんだか...?

ということで、一度GPTとChatGPT/Geminiなどの関係と利用料金、日本語への対応状況を整理しました。
また、私が使用している生成AIについてもまとめておきますので、参考にしてください。

# GPTとは

GPTといわれると、パーティショニングの「GUID Partition Table」が先に出てくる人も多いのでは...?
(特にArchやGentooインストールしたことある人は)

...という茶番は置いといて、GPTは「Generative Pre-trained Transformer」の略であり、これはAIで使われる「大規模言語モデル」(LLM:Large language Model)の一つと言えます。
これ以上深掘りすると一気に難しくなるのでこの程度にしておいて、GPTの種類を見ていきましょう。

## GPT-3.5とGPT-4の違い

| 項目 | GPT-3.5 | GPT-4 |
| --- | --- | --- |
| プロンプトで使えるもの | テキストのみ | 画像や文書ファイルも可 |
| 音声入出力 | 不可 | 可 | 

上記の通り、GPT-3.5ではテキスト入出力にしか対応していませんでしたが、GPT-4では画像や音声を扱えるようになっています。

最近、Windowsのライセンス認証のためにMicrosoftに電話しましたが、自動応答メッセージでしたが、インストールIDは手打ちではなく読み上げるだけでライセンス認証を通せました。このようなところにGPT-4が使われているのかなーと思いました。

## GPT-4とGPT-4 Turbo、GPT-4oの違い

GPT-4o: 「ジーピーティー4オムニ」と読みます。GPT-4oの「o」は厳密にはアルファベットではなくギリシャ文字のようです。

リリース順はGPT-4->GPT-4 Turbo->GPT-4oで、性能はGPT-4o>GPT-4 Turbo>GPT-4であることしかわかりませんでした...

試しに、GPT-4とGPT-4 Turbo、GPT-4oに同じプロンプトを与えてみましょう。

GPT-3.5 Turbo:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507198/c396db43-bc1d-9fa3-a494-faa205077bc9.png)


GPT-4:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507198/94a3cddc-382d-6469-8cf5-d63769135adf.png)


GPT-4 Turbo:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507198/fe95a68d-d254-f2cf-ebd8-f8a3bf29e728.png)

GPT-4o:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507198/0e7aae61-72e1-60cf-fa3b-d71e1d5a527f.png)

ここから、GPT-4とGPT-4 Turboのリリースの間で少々時間が空いていることがわかります。
また、新しくなるほどナンバリングや箇条書き、見出しなどで読みやすくなっていることもわかります。

# AIアシスタント

今使えるAIのアシスタントは以下のようなものがあります。

## [ChatGPT](https://openai.com/chatgpt/)

説明不要だと思いますが、GPTの開発元である「OpenAI」謹製のアシスタントです。

## [Microsoft Copilot](https://www.microsoft.com/ja-jp/microsoft-copilot)

Microsoft Edgeに統合されたAIです。情報のソースも提示してくれます。

## [Windows Copilot](https://www.microsoft.com/ja-jp/windows/copilot-ai-features)

Windowsに統合されたAIです。Edge版に加えて画面のキャプチャをかんたんに貼り付けられます。

## [GitHub Copilot](https://docs.github.com/ja/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot)

コーディングに最適化されたAIです。日本語非対応？

## [Google Gemini](https://gemini.google.com/?hl=ja)

AndroidではGoogleアシスタントとの置き換えも可能。日本語非対応。

## [番外編] [PortalAI for OMU](https://omu.portalai.jp/)

公立大学法人大阪傘下の学校(大阪公立大学・大阪府立大学・大阪市立大学・大阪公立大学工業高等専門学校)に属する学生・教職員が利用可能
GPT-3.5 Turbo/GPT-4/GPT-4 Turbo/GPT-4oが利用可能だが、画像やファイルを添付することはできない。

# 私のAI活用法

- 少し気になることがあればとりあえずWindows Copilotに聞いてみる→提示されたリンクをたどってみる
- 作成した文書を添削してもらうときはChatGPTでGPT-4oを使う
- PortalAIで問題を生成し、演習をする
- コーディングでは基本的にGitHub Copilotを有効にしておき、自分で提示されたコードよりもいいコードをかけるように意識しつつ無理だと思ったらそれを使う

# おわりに

Windows CopilotによってAIは利用しやすくなっていると思います。
しかし、私は~~Windowsを消し飛ばして~~Linuxに乗り換えた人なので、何らかのAIアシスタントをキーバインドだけで起動させれるようにしたいと思います。
古いタイプのVisual Basic

# Microsoftのベーシック
1980年代に広まったBASICは、初心者用に作られたそのもので変数の衝突に関しては、工夫をする必要がありました。

Windows3.1が出た頃にVisual Basic 2.0が使われ始めました。この頃から変数の有効範囲を示すスコープが導入され、変数の衝突に関する問題はなくなってきました。

# Visual Basic 6.0とVBA
開発ツールとしては、Visual Basic 6.0を最後に古いタイプのVisual Basicはなくなりましたが。
同じ文法とインターフェイスが、VBA(Visual Basic for Application)に採用されています。

# AccessとExcelのVBA
Accessで使用される、VBAは少しAccessのためにカスタマイズされておりデータベースを操作するためのコマンドが追加されています。
追加されたコマンド操作とVBAからDAOオブジェクトというActiveXオブジェクトを使って操作する方法、ADOオブジェクトを使って操作する方法の３つがありますがこれを併用するとデータベースの更新タイミングなどで微妙な差が出てバグにつながることがあるので注意が必要です。

Excelから使うVBAは、ワークシートやワークブックオブジェクトとして供給されており特化しているわけではないので比較的素直な動きをします。

# Old Visual Basic 互換言語
その他にも古いタイプのVBA互換の文法を持つ言語がいくつかあります。
１．LibraOfficeのマクロ言語
この言語は、言語の文法として互換性がありますがオブジェクトの使い方が異なります。
２．Gambas3という統合開発環境
この環境はLinuxで動く統合環境で、Excel VBAと同じような使い方ができますが微妙に異なります。
RaycastStoreからツールをピックアップ。Store160ページ全部確認したら良さそうなのいくつか見つけた。

以前Raycastを紹介したときある程度反響をいただいてしばらく経ちました。
詳細な使い方は下記の記事を参考にいただけると幸いです！

https://qiita.com/tanimoto-hikari/items/919af226ea262be85941

今回はRaycastのstoreを改めて確認して良さそうだな…と思ったものをピックアップしました！

:::note
みなさんがStoreを見るきっかけになればと思います！
:::

## 文字の変換

https://www.raycast.com/erics118/change-case

vscodeを使っている最中は`command + shift + P`を利用することで文字列を変換できるのですが、いちいちvscodeを利用するのもめんどうなのでRaycastでできると便利でした！

## QRコードの生成

https://www.raycast.com/Melvynx/qrcode-generator

ChromeがアップデートされてQRコードの生成が面倒に感じた人も多いはず…。

:::note
右クリックすればいいやん？って言われるかもしれませんがキーボードのホームポジションから指を動かしたくないズボラなエンジニアの方のためのツールです！
:::

ブラウザがChromeであれば
1. `command + L`でアドレスバーをにフォーカス
1. URLを`command + C`でURLをコピー
1. Raycastで「QR Code Generator」を立ち上げる
1. コピーしたURLを貼りつける

これでQRコードをキーボード操作のみで生成できます。

## カラーコードの変換
カラーコードにはいろいろな表現がありますよね…。
変換するのにいちいち調べるのは面倒ですよね…

https://www.raycast.com/yf_zhang/covert-color

カラーコードを入力すると4パターンで表示してくれます！（便利！）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/0d3c4aff-278d-d965-eb1b-aa4a35c88cd5.png)

:::note
`convert-color`なのにURLが`cobert`になっているのはご愛嬌
:::

## Docs
フロントエンド関連のドキュメントはRaycastから検索できるようです。

https://www.raycast.com/vimtor/tailwindcss

https://www.raycast.com/webdiego/react-docs

https://www.raycast.com/PrasadChinwal/nextjs-docs

https://www.raycast.com/krzysztofzuraw/search-mdn

https://www.raycast.com/thomaslombart/can-i-use

https://www.raycast.com/fgeierst/wcag


## 開発が捗りそう

https://www.raycast.com/michaelschultz/figma-files-raycast-extension

https://www.raycast.com/martin_molcrette/figma-variables

デザイナーとの連携や開発中に利用すると便利そうだと思ったツールです。

https://www.raycast.com/manumorante/git-commands

使っているgitコマンドを学習してくれます。
また登録しているaliasを呼び出すことが可能です！

https://www.raycast.com/allenan/regex-tester

個人としてはたまに利用したくなる程度なのですが、パッと正規表現が確認できるのは良いと思いました！


## 検索関連が捗りそう
業務中は検索していることが多いと思います。
Raycastで検索ツールを立ち上げられると便利です！

https://www.raycast.com/mrmartineau/search-npm

https://www.raycast.com/developerlover/google-advanced-search

https://www.raycast.com/lin/dev-to

:::note
Googleの詳細検索は、絞り込んだ検索ができるので知りたい情報に辿り着きやすくなると思います！
:::

## メモツールの検索
皆さんが使っているものを利用すると良いと思います！

https://www.raycast.com/zett-8/scrapbox-search

https://www.raycast.com/notion/notion

https://www.raycast.com/hmarr/bear

:::note warn
APIキーを必要とする場合、せキュリティ的な兼ね合いで業務では利用できないこともあります。
会社の規定を十分に確認してから利用してください。
:::

## まとめ
Raycastを使うことで1つ1つの作業をどんどん効率化できます！
1秒を惜しんで節約していきましょう！

:::note
ピックアップしただけなので皆さんにとって嬉しいツールが他にあると思います！
この記事がStoreを確認してもらうきっかけになると幸いです！
:::
初投稿。

はじめまして。makingoです。

Flutterを用いてマッチングアプリ(恋人作りではなく、趣味友作りの)を作りたいと思い、2024年初頭から勉強しています。
これまでSwiftを用いてオフラインアプリを開発し、リリースした経験があります。
リリースしたと言ってもChatGPTにアドバイスをもらいながらの開発だったため、自力で達成した感覚を味わうことができず、むしろ不甲斐ない気持ちでいっぱいでした。

そのような苦い？悔しい？経験を払拭すべく、Flutterでの開発は地道に自力で行なっていこうと肝に銘じてこの記事を執筆しております🤧

記事自体は備忘録のために書いていこうと考えていますが、どこかでみなさんの力になればそれはそれでこの上なく嬉しいです。
そのため、客観的に読みやすい文章で書いていこうと考えております。
何卒よろしくお願いいたします。
WSL2でGitを有効にしてGitHubにSSH接続できるようにするまで

# 前提条件

- GitHubのアカウントを作成済み
- WSL2のUbuntuをインストール済みであること
まだの方は以下の記事を参考にWSL2をインストールしてみてください。
https://qiita.com/SBS_Takumi/items/f5f8a5934e00c7a7efb8

# やったこと

## 1. Gitのバージョン確認

```bash
git --version
> git version 2.34.1
```

WSL2のインストール直後でgitはインストール済みでしたが、インストールできていない場合は以下のコマンドでgitをインストールしましょう。

```bash
sudo apt-get install git
```

## 2. git構成ファイルのセットアップ

まずはユーザーネームを設定します。`"Your Name"`の箇所を自分のユーザーネームに置き換えてください。
```bash
git config --global user.name "Your Name"
```

次に、メールアドレスの設定です。こちらも`"youremail@domain.com"`の箇所を自分のメールアドレスに置き換えてください。
```bash
git config --global user.email "youremail@domain.com"
```

## 3. 新しいSSHキーの生成

以下のコマンドメールアドレス部分を自分のものに置き換えて実行します。

```bash
ssh-keygen -t ed25519 -C "your_email@example.com"
```

すると、SSHキーの場所の確認やパスフレーズを設定させられます。
設定が終わると、SSHキーの生成が完了です。

## 4. SSHキーをGitHubに登録

以下のコマンドなどで自分のSSHキーを表示し、コピーしておきましょう。
```bash
cat ~/.ssh/id_ed25519.pub
```

GitHubにアクセスし、右上にある自分のアイコンをクリックし、設定（Settings）をクリックします。
以下の画像にあるように、`SSH and GPG keys`をクリックします。
![スクリーンショット 2024-06-30 172238.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736836/8994ca69-5f78-bee5-f94b-8711c993dc7c.png)

そして、右上にある緑色のNew SSH keyをクリックします。

任意の名前と、先ほどコピーしたSSH公開鍵をペーストして、画面下部の`Add SSH key`をクリックします。

それではターミナルに戻って以下のコマンドを実行してみましょう。
```bash
ssh -T git@github.com
```

![スクリーンショット 2024-06-30 173115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736836/78af5b5f-e874-5158-a31a-fcd7a9a0e003.png)

画像のような出力になるかと思います。

これでGitHubにSSH接続ができましたので、git cloneして既存のプロジェクトの編集を行うことができるようになりました。
初めてReactでアプリを制作しました

## はじめに
Reactではじめてアプリを作成しました。
現在エンジニアとして2年が経ち、フロントの開発もありますがReactは初。
TODOアプリのような小規模なアプリではありますが、
1人でアプリを作った感想を書いていきます。

## つくったもの
学習管理アプリを作成しました。学習した内容と時間を記録し、総学習時間を見える化するものです。
![ezgif.com-video-to-gif-converter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810842/735ab9cf-554d-0131-d9c7-d4a46648a96b.gif)

## 感じたこと
<strong>アプリ作成はすごく簡単ですぐに動くものが作れる</strong>

一番感じたことは上記です。
アプリ作成はもっとエラーにつまづき、時間がかかるものかと思っていましたが、今回作成した記録アプリレベルならすぐに終わるレベルです。
平日の業後の3日(2時間くらい)で終わるくらいでした。
私は個人開発をしてユーザーに使ってもらいたい野心があるので、その目標のハードルがグッと下がりました。


## 【余談】この手順でReactアプリはすぐにつくれます
npmをインストールします。
私のおすすめはasdfというバージョン管理ツールです。
何かのパッケージを同じPCで2つ以上管理するとなると、バージョンをアプリごとに切り替えるのが面倒。。。
asdfを使うと同じPC内で同じ言語、フレームワークのバージョンを管理するのが容易になります。
ディレクトリごとにバーションを指定できるので

<strong>macならasdfのインストールは以下</strong>
```brew install asdf```
npmをasdfでインストールする
```asdf plugin add nodejs```
```asdf install nodejs latest```
```asdf global nodejs latest```
npmコマンドが使えるようになりました。

以下のコマンドでReactのアプリが作れます。
```npx create-next-app@latest```

作成されたjsファイルをいじって表示を変えてみたりして楽しんでください。

<strong>sandboxというweb上でコードを触れるサイトもおすすめ</strong>
nodejs, Reactのインストール不要でサイト上だけでアプリが作成できます。
https://codesandbox.io/p/sandbox/

### まとめ
今回、初めてReactで学習管理アプリを作成してみて、その簡単さに驚きました。これからもReactを使ってさアプリケーションを作成し、個人開発のスキルを向上させていきたいと思います。Reactは初心者でも取り組みやすいフレームワークだと感じましたので、まだ触れたことがない方にはぜひ挑戦してみてほしいです。

Reactでの開発は楽しく、学びも多いので、興味がある方はぜひ挑戦してみてください。

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします:下向き指差し:
https://projisou.jp
Perplexity AIという評判の良いAI検索エンジン触ってみる

# はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）

今回は巷でも評判の良いAI検索エンジンである、「Perplexity AI」について簡単に紹介していきます！

# Perplexity AIとは
AI搭載検索エンジンとチャットボットを提供するサービスです。
元Google AI研究者らによって作られたそうで、様々なLLMが使用できる＆最新情報も扱える優れものです。

https://www.perplexity.ai/

## Perplexity AIの特徴
Perplexityの主な機能としては以下のようなものがあります。
- 情報の透明性と信頼性
- 最新情報へのアクセス
- 対話型検索の深さ
- AIモデルの選択肢
- 使いやすさ
- 無料版の充実

ChatGPTとの違いはなんと言ってもブラウジング機能があることでしょうか。🤔
これにより、最新の情報をブラウザから取得できるので情報が常に更新されている点や、検索元のソースをブラウザから引っ張ってくることで自分でも調べることができます！

何気にソースを教えてくれるのはありがたいですよね！
ハルシネーションの確認にもなるのでとても便利です！

また、検索範囲を絞ることも可能です。
例えば、確実な情報を得たい場合は「Academic」、動画を見つけて欲しい場合は「Youtebe」で検索できるといった感じで、どのソースから検索して欲しいか指定することが出来ます！
![スクリーンショット 2024-06-30 16.42.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653241/14d1e625-925b-73ab-f1f0-6f0c2cfb7e21.png)



# Perplexity AIを使ってみる
早速使ってみましょう！
これは会員登録なしでも使えるので楽ですね！
とりあえず、「新宿のおすすめランチを最近のトレンドと合わせて紹介してください。」と聞いてみます。

![スクリーンショット 2024-06-30 15.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653241/476f8b57-054f-a804-9709-12b31df842f0.png)

Answerの前に、Sourcesがありますね！
これで情報源を確認することが出来ます！
また、Answerではトレンドとそのテーマにあったお店を紹介してくれています！


もう一つ質問してみましょう！
「Perplexity AIは他のAIツールに比べて、具体的にどこが優れていますか？」
![スクリーンショット 2024-06-30 17.05.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653241/eb68fd54-6463-db3f-6b99-4eff2310659c.png)

同じように、検索に利用したソースとともに利点を細かく教えてくれますね！
（実はPerplexity AIの特徴を直接聞いていました😉）

ここまで見てきてわかりましたが、
**Perplexity AIは検索に特化した**AIツールという感じがしますね！

実際にコードに関する質問をした際には、その検索元として公式リファレンスを参照してくれていたりStack Overflowを参照してくれていたりするので、信ぴょう性としてもありそうです！

そのため、総評としては**検索エンジンとして利用する**ことがユースケースとして最も適していそうでした！

# おわりに
昨今様々なAIツールが出現している中で、評判の良いPerplexity AIを紹介してみました！
有料モードだと、独自のLLMモデルだけでなくGPTやClaude3と言った外部のLLMも使用できるため、これ一つでかなり広範囲のことが出来るようになります！すごすぎい。。。😮

最後までご覧いただきありがとうございました！
以上、センリツでした。🤓
【シリーズすごいぞiQ-F】GX_Works3でコンパイルされたコードを確認する

## はじめに
GX_WORKS3でコンパイルされたコードの確認方法をメーカーに教えて貰ったので紹介します。

## 1.プロジェクトの照合を行う
+ デバッグでシミュレータに書き込んだプロジェクトか保存したプロジェクトファイルが照合相手になります

## 2.照合結果で～ファイルの行をダブルクリックする
+ 照合結果一覧でプログラムファイル、FBファイル等のプログラム関連の～ファイル行をダブルクリックするとコンパイルされたコードで照合結果が表示されます
+ 一見、注意事項に「Enter押下～」と記載されている行しか詳細が表示されないように見えますがそうではありません
+ プログラムファイルをCSV形式にエクスポートする場合と違い、インラインSTなどもニーモニックに変換されて表示されます

## 3.表示されたコードの使い道について
１行のインラインSTが数千ステップ消費する等の現象が起きた際にコードの最適化を検討するのに役立ちました。

## おわりに
本当は構造体がらみで色々まとめたかったのですが、不思議現象を解析する方法を紹介させて貰いました。

### 2024/11/10　追記
+ GX_Work3 Ver1.110Qでプログラムエディタの右クリックから「変換結果」を表示できるようになりました
+ 照合結果から表示されるコードとはアドレス表現などが異なりますが、ステップ数最適化の検討は「変換結果」で表示されるコードでも事足りるケースが多いかと思われます

## 過去記事一覧
+ [過去記事一覧](https://qiita.com/fujiteruo/items/af2459d320e8109963db)
俺はRubyでの表 (csv, xlsx, xls) 読み込みを少し簡単にしたかもしれない

### きっかけ
- Pythonで数値計算とかデータ解析とか触ってみた。
- Rubyでもやりたくなった。
- DaruやRoverと言うものを知った。
- 意外とちゃんと機能が揃っており（失礼）楽しく使っている。
- が、CSVやExcelの読み込みがpandasよりどうもややこしい。
- 特にExcelだとGemが乱立している状態で厄介に感じた。
- というわけで、これもっとシンプルにできないかな？と思ってやってしまった。
- そしたら、あれ？これ意外と便利じゃない？と思ったので記事にする。

### この記事は
Yomiseという自作gemの紹介です。ぶっちゃけ宣伝です。

### 始め方
[ここ](https://github.com/show-o-atakun/yomise/tree/main)にあります。
まずはGemのインストール。

```
gem install yomise
```

これをやるとDaruやRoverがない場合に一緒にインストールできます。つまり、とりあえずRubyでデータ解析したいって人はyomiseをインストールすると始められます。

### 使い方
読み込むだけなら至ってシンプルです。
拡張子変わったとき、どのgemを使えばいい？ってもう迷わない。

```ruby
require "yomise"
df = Yomise.read "test.csv"
df = Yomise.read "test.xlsx"  # エクセル形式もOK。1シート目が読み込まれる
df = Yomise.read "test.xls"   # 古いエクセル形式もOK。同上
```

こうすると、上記dfはデフォルトでDaru::DataFrameになります
別フォーマットのインスタンスが欲しければオプションにつけます。

```ruby
require "yomise"
df = Yomise.read "test.csv", format: rover   # Rover::DataFrame
df = Yomise.read "test.xlsx", format: array  # 二次元配列
df = Yomise.read "test.xls", format: hash    # ハッシュ
```

もうDaruはレガシーって事なんで、Roverをデフォルトにすることも検討中。
あとはNumo::NArrayには対応させたい。これは宿題。

### 読み込み行の指定

line_from: オプションで読み込み開始行を指定できます。
line_until: は読み込み終了行（指定行の __一行前まで__ 読み込み）です。
両者とも0以上の整数または正規表現を指定します。

```ruby
require "yomise"
df = Yomise.read "test.csv", line_from:1  # 1行目(0から数えて2番目の行)以降を読み込み
df = Yomise.read "test.csv", line_from: /Start/  # /Start/に合致する行以降を読み込み
df = Yomise.read "test.csv", line_until: 100  # 0から数えて99行目まで読み込み
df = Yomise.read "test.csv", line_from: 3, line_until: /End/  # 両方指定も可能
```

ここら辺、とりあえず読み込んでから行削除のプロセスを追加するのが一般的かもしれませんが、上記の記法はpandasのskiprowsみたいに使えて直感的でいいのではと思います。

さらに列に対してcolumn_from, column_untilオプションが使用できますが、正規表現が使えなかったり色々未整備なので飛ばします。

### ヘッダー、インデックス
header: オプションで行番号を指定できます。nilにするとデフォルトのヘッダー名をデータフレームに設定します。重複したheaderがあっても末尾に数値を付加することでエラーを回避するあたり、自分に優しい設計です。
index: はインデックス機能をもつDaru::DataFrameのみ対象です。こちらは重複エラー回避機能未整備です。

```ruby
require "yomise"
df = Yomise.read "test.csv", line_from:5, header: 3
```

### エンコーディング
encoding: オプションで指定できます。ただし現状csv, xlsのみです。

```ruby
require "yomise"
df = Yomise.read "test.csv", line_from:5, header: 3, encoding: "cp932"
```

### 欠損値変換機能
地味に気に入ってる機能です。
現実のcsvやエクセルは、数値行で欠損値とすべきところに余計な文字列が入っていたりします。こういう時、replaced_by_nil: オプションの配列内に指定した文字列を強制的に欠損値（RoverはNaN, それ以外はnil）に変換できます。JuliaのCSVパッケージにおける missingstring オプションの要領ですね。

```ruby
require "yomise"
df = Yomise.read "test.csv", replacd_by_nil: ["Error", "Range Over"]
```

上記の場合、Error や Range Over と書かれたセルは NaN や nil に変換されます。

基本的な機能は以上です。

### このGemの名づけセンスどうなん
俺もわからん。とりあえず「読み」を頭に付けました。さして意味はないです。
Gitのstashに保存した新規ファイルが闇に消えたお話

# とある日
いつも通りの開発作業を行っていたある日。
新規の<INS>機能追加(A)</INS>を依頼されていたので、色々とファイルを追加したり既存ファイルを修正したりしていつも通り作業を進めていました。イメージとしては下記のように変更を加えているとしましょう。
```bash
# 変更点
script-a.js ←既存ファイル
script-b.js ←既存ファイル
script-c.js ←新規ファイル
script-d.js ←新規ファイル
```

ただ、途中で優先度高めの<INS>機能修正(B)</INS>（というか不具合修正）の依頼が舞い込んできました。
上述の機能追加(A)は優先度が高くないこともあり、いったん置いといて先に後から来た機能修正(B)を実施していくことにしました。

さて、ローカルには機能追加(A)の変更が入ったソースコードがあり、9割方完成しているのですが微妙に整理しきれていないしチェックも出来ていない状態です。
「この状態ならまだcommitするのはまだだな…」と考え、一度stashへ退避させることへしました。
```bash
git stash -u

# 保存されたファイル達
script-a.js ←既存ファイル
script-b.js ←既存ファイル
script-c.js ←新規ファイル
script-d.js ←新規ファイル
```
安心と信頼のstashへの保存です。**当然、新規ファイル(untracked files)も存在しているので`-u`オプションも付けています。**
これでローカルの変更が無くなったのを確認し、mainブランチへと戻って機能修正(B)用の新しいfeatureブランチを作成して修正作業に入ったのでありました。

機能修正(B)についてはさほど難しい内容ではなく、修正量も多いわけではありませんでした。
しかし、何と**先ほどの機能追加(A)で手を加えていた`script-a.js`において、同じ部分をこちらでも別の形で修正する必要がある**ということが判明しました。
つまり**conflict**が発生することは確定なのですが、まあ致し方なし。
「機能追加(A)の作業に戻った時に解消させればいいや」と考えてそのままcommitし、無事マージされていきました。

# そして起こった悲劇
さてさて、機能追加(A)の作業に戻っていきましょう。
まずは元のfeatureブランチに戻ってきて、stashから戻していきましょう。とりあえずいつも通りpopでいいか～

```shell
git stash pop

# 復元されたファイル達
script-a.js ←既存ファイル、コンフリクトしている
script-b.js ←既存ファイル
```
**・・・？？？？？？？**
**新規で作ったファイル達(`script-c.js`・`script-d.js`)が…戻ってこない…！？**

5分くらいその場で固まった後、何か手順やらコマンドをミスったのかと考えましたが該当せず。
とりあえずコンフリクトを解決してみたり戻してみたり何やかんやしたものの何も解決しません。
どこに行ったんだあいつらは…**闇**に消えたのか…？？？

# 救出方法
とりあえず原因が何かを考えてみます。
いつもは同じ手順で問題なかったので、<INS>コンフリクトが発生した</INS>のが何か悪さをしていそうです。
となるとコンフリクトをしないように修正を加えてから`git stash pop`を行うのが良さそうですが、今回は結構それが面倒なパターンだったので断念しました。あとその場しのぎにしかならないしね。

色々とネットを調べてみましたが、状況が限定的なのかなかなか同じ現象で困っている方が見当たらず。
しかし、何とかこの現象について記述しているサイトを発見できました。

https://www.databasesandlife.com/git-stash-loses-untracked-files/

見てみると一番上にこんな文言が。
> Git had a bug from version 2.33 onwards, fixed in 2.35. (Thanks to Richard Laager’s comment for the exact version numbers.)

<font color="red">**…Gitの特定バージョンのバグかよ！**</font>
すぐに`git --version`で確認すると、見事**2.33.1**とこの対象内でした。~~ちょっと古いバージョンで放置しているのがバレた~~

さて、バージョンの問題で解消済みなのであればバージョンアップしてしまいましょう。
何か気が抜けて疲れたので、何も確認せずにえいやっと最新版(2.45.2)にバージョンアップしちゃいます。
そして完了したのでstashから復元してみましょう。
```shell
git stash pop

# 復元されたファイル達
script-a.js ←既存ファイル、コンフリクトしている
script-b.js ←既存ファイル
script-c.js ←新規ファイル
script-d.js ←新規ファイル
```
**…帰ってきた！**
見事、闇の中に消えたと思われた新規ファイル達が復元されました。
ああ疲れた…

:::note info
今回はバージョンアップで解決しましたが、コンフリクトしないように修正してからstashを戻す方法でもOKです。
ただ、発生する度に毎回行う必要があるので、対策としてはバージョンアップ可能ならそれをおすすめします。
:::

# 最後に
ということで、結果としてはGitの特定バージョンの不具合に引っかかった、というお話でした。
先ほど紹介したサイトのコメント欄を見ると、[ここ](https://github.com/git/git/commit/bee8691f197ae6b74ca26081c1a3fa218e2b9db7)でバグが混入して[ここ](https://github.com/git/git/commit/71cade5a0b172ece7edf0ccb4420dd5b9a07e71a)で修正された、と詳しく記載されていました。
ただ限定的な状況だからこの現象に遭遇した方も少なく、ネット上に情報が少なかったんでしょう。

「やらかし」かというと微妙なラインですが、危うくやらかして**自分の結構な分の作業が0になる**所だったので教訓にしていきたいですね。
MySQL 8系でtext型で一時テーブル使ってもちょっと安心

TEXT型に代表されるバイナリ・ラージ・オブジェクトは一時テーブルを使うような処理でメモリではなくディスクを使ってしまうことで有名でした。

8.0.12から一時テーブルで使うTempTableストレージエンジンがバイナリ・ラージ・オブジェクトに対応しており、メモリに収めることが可能になりました。

といっても通常の`varchar`と比べて一時テーブル上のメモリ利用量やパフォーマンス面で同等かは不明です。

Aurora MySQL v3はMySQL 8.0.23以上相当なので対応済みです。

# 参考資料
https://dev.mysql.com/blog-archive/mysql-8-0-support-for-blobs-in-temptable-engine/

https://dev.mysql.com/doc/refman/8.0/ja/internal-temporary-tables.html

https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/ams3-temptable-behavior.html

https://aws.amazon.com/blogs/database/use-the-temptable-storage-engine-on-amazon-rds-for-mysql-and-amazon-aurora-mysql/
VSCodeで『JSX 式には 1 つの親要素が必要です。』が表示される



# 問題のコード

``` React
export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => {
                <span>{col.key}</span>
                <span>{col.value}</span>
            })}
        </div>
    )
};
```

上記の`data.map()`内でエラーが表示されました。

# 原因

ReactのJSXは、常に一つの要素を返すというルールがあります。
例として、下記のようなコードは題名と同様のエラーが発生します。
１
``` React
export const sample = () => {
    return (
        <div>あいうえお</div>
        <div>はひふへほ</div>
    )
};
```

`data.map`等の処理は、JSX内に記述していても1つの要素を返すルールを満たしている必要があるようです。
下記のコードに書き換えたところエラー表示が消えました。

``` React
export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => {
                <>
                    <span>{col.key}</span>
                    <span>{col.value}</span>
                </>
            })}
        </div>
    )
};
```

# 最後に

慣れてきたらJSXやReactが裏でどのように動いているのかも勉強してみたいと思います。
【VSCode】シンタックスハイライトが適用されなくなった！？

# Pythonのシンタックスハイライトが適用されなくなりました

…原因はシンプルでした！
VSCodeの配色テーマをDark(Visual Studio)になっていたためでした。

![スクリーンショット 2024-06-30 16.16.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663458/4db478ec-4655-6b77-2dfa-05c0a487f454.png)

# 解決方法は、他の配色テーマに設定すること

僕は同じような色合いの「ダークモダン」にしています！

![スクリーンショット 2024-06-30 16.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663458/767246f3-2997-07da-dae7-01166a81b708.png)
【Javascript】画面遷移時に、ブラウザに送信処理を予約してデータ送信する

## はじめに
PC・スマホの両方で、画面遷移時にユーザーの画面操作ログを送信したい。
加えて、確実に送信処理が実行されるようにしたいとします。

PCのみの場合は、unload、beforeunload イベントの場合に送信すればいいですが、モバイルでは、ブラウザーは unload、beforeunload、pagehide イベントを発行しません。
ということで、今回の処理ではこれらイベントは使えません。

そういう場合には、visibilitychange イベントで、document.visibilityState === "hidden" の条件で送信するようにすればいいです。

これは、ユーザーが新しいページに移動したり、タブを切り替えたり、タブを閉じたり、ブラウザーを最小化したり閉じたりしたとき、あるいはモバイルではブラウザーから異なる形のアプリに切り替えたときに発行されます。

## navigator.sendBeacon()
確実に送信処理が実行されるようにしたい、そういうときに使えるのが、navigator.sendBeacon()です。

このAPIはブラウザに送信処理を予約して、確実に処理されるようにするためのAPIです。

```javascript
document.addEventListener("visibilitychange", function logData() {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});
```

## fetch()
navigator.sendBeacon()は、シンプルなAPIで、ヘッダー情報やその他の設定項目がないため、APIキーやヘッダー情報を付与できません。

それらの情報を指定して、navigator.sendBeacon()と同等の機能を実現するには、fetch()を使います。

```javascript
fetch('/log', {
	method: 'POST',
	headers: {
			'Content-Type': 'application/json',
			'x-api-key': apiKey,
	},
	body: JSON.stringify(analyticsData),
	keepalive: true, // これをtrueにすると、sendBeacon()と同等となる
});
```

## 参考
- https://developer.mozilla.org/ja/docs/Web/API/Navigator/sendBeacon
- https://developer.mozilla.org/ja/docs/Web/API/fetch#keepalive
Flutterでテキストにタイピングアニメーションをつける

# はじめに
本記事ではanimated_text_kitパッケージを利用して、タイピングアニメーションのついたテキストを作成してみます。


# 作るもの

以下のようにタイピングアニメーション付きのテキストを表示します。

![sampleAnimation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/43d36bee-2796-dd23-d7b8-c97efe70cdfe.gif)


# 環境
Flutter 3.22.1

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

animated_text_kit をインストールします。

```
flutter pub add animated_text_kit
```

https://pub.dev/packages/animated_text_kit


# ソース

`AnimatedTextKit`ウィジェットを使ってタイピングアニメーションを適用したテキストを表示します。
テキストのアニメーションは2回繰り返され、各表示の間に1秒の一時停止を設定。
タップするとアニメーションがスキップされ、全てのテキストが即座に表示されます。

```dart:main.dart
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('サンプル画面'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: SizedBox(
                  width: 250.0,
                  child: DefaultTextStyle(
                    style: const TextStyle(
                      fontSize: 19.0,
                      color: Colors.black,
                    ),
                    child: AnimatedTextKit(
                      animatedTexts: [
                        TyperAnimatedText(
                          'サンプルアニメーションです',  // アニメーションをつけるテキスト
                          textAlign: TextAlign.center,
                        ),
                      ],
                      totalRepeatCount: 2, // アニメーションの繰り返し回数を設定
                      pause: const Duration(
                          milliseconds: 1000), // アニメーションの各テキスト間の一時停止時間
                      displayFullTextOnTap: true, // タップで全テキスト表示
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

# 動かしてみる

デバッグして確認すると、次のようにタイピングアニメーションのついたテキストが表示できている事を確認できます。


![sampleAnimation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/fd566376-95c9-1e96-7524-83feeed26264.gif)


# 参考

https://sogablog.net/2024/06/03/%E3%80%90flutter%E3%80%91animated_text_kit%E3%81%A7%E6%96%87%E5%AD%97%E3%81%AB%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B/#toc10
C_TS422_2021 SAP Certified Application Associate SAP S/4HANA Production Planning and Manufacturing対策（22/100）

【22日目】
トピック 3：SAPS/4HANAのマスタデータ（11/22）

≪問題22≫
構成品目の品目マスタで、単一打切のパラメータを設定しました。利用可能在庫がゼロであり、かつ打切日が過去日付である場合に、以下のどのビジネスプロセスが影響を受けますか。
□かんばん生産管理
□バックフラッシュ
□製造指図発行
□資材所要量計画（MRP）

≪解答≫
□かんばん生産管理
□バックフラッシュ
□製造指図発行
■資材所要量計画（MRP）

≪解説≫
◆単一打切では、製造中止予定の構成品目が、製造中止された構成品目の資材所要量計画（MRP）の利用可能在庫がゼロになると、特定の日付でフォローアップ品目に置き換えられます。
◆製造中止品目のMRP利用可能在庫がゼロになると、従属所要量は製造中止品目からフォローアップ品目に転送されます。フォローアップ品目がMRPで利用可能でない場合は、製造中止品目の代わりに調達されます。
[Slack]「あの、僕のプルリク見てくれてます、、？」を解決したい

# はじめに
エンジニアであれば、日常的に同僚にコードレビューを依頼することが多いでしょう。その中で、以下のような状況に遭遇したことはありませんか？

__レビューを依頼する側の悩み:__
「レビューを依頼したけど、ちゃんと気づいてもらえているかな？一声かけたほうがいいかも。」
「見てくれたみたいだけど、コメントを全部追加し終わったのかどうか分からない。」
__レビューをする側の悩み:__
「あのプルリク、承認したけどマージされたのだろうか？」

このような、コードレビューを依頼する側と受ける側のちょっとしたコミュニケーションのストレスを減らすために、業務の中で取り組んでいる方法を紹介します。

:::note warn
今回はSlackでレビューを依頼する場合を前提にした取り組みについて紹介します。
:::

# 何をしたのか
ズバリ、、 __スタンプ__ を使いました！！
こんな感じで、レビューを依頼するチャットにスタンプをつけていく方法を取っています。
![PRのリンク.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842609/7717700e-c6e2-d5b7-627d-07f68d1d551c.png)

以下、よく使用するスタンプとその詳細について説明していきます。

:::note info
ちなみに、slackのスタンプは自作することができます。詳しい方法は[こちら](https://slack.com/intl/ja-jp/help/articles/206870177-%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AB%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%A8%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)を参照してください。
:::

### 対応します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842609/5ff5b60c-2a38-4b01-7b41-d978aa764df3.png)
使用者：
レビューする側

使用場面：
レビュー依頼をされたことに気づいたが、今すぐにはレビューできないとき

伝えたい思い：
「いますぐにはプルリク見れないけど、あとで確認するから！レビュー依頼きたことには気づいてるから！！」

良い点：
このスタンプを押すことで、レビュー依頼を見逃しているわけではないことを示すことができ、レビューを依頼した側に「気づいてくれているんだ」という安心感を与えることができます。
### レビュー中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842609/fe2024a2-a1ad-ae82-79e2-03e1136813fb.png)
使用者：
レビューする側

使用場面：
依頼されたレビューを行なっている、まさにその時

伝えたい思い：
「今レビューしてる最中だよ〜！ちょっと待っててね〜」

良い点：
上記と同様、このスタンプを使うことで、レビューを依頼した側に「今まさにレビューしてくれているんだ」という安心感を与えることができます。
### コメント追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842609/ef3f3079-b2ee-2e0a-f3ff-bda62d0623a2.png)
使用者：
レビューする側

使用場面：
レビューがひと段落し、コメントを追加したとき

伝えたい思い：
「プルリク見たよ！気になるところコメントし終わったから見ておいて〜！」

良い点：
このスタンプを押すことで、レビューを受ける側はプルリクにコメントがついており、レビューがひと段落したことを知ることができます。
### approved
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842609/830d129d-1ec9-2f78-f92c-ee4d7dcc89e6.png)
使用者：
レビューする側

使用場面：
レビューを終え、プルリクエストをapproveした時

伝えたい思い：
「Approveしたよ〜〜！お疲れ様〜」

メリット：
このスタンプを押すことで、レビューを依頼した人は誰がapproveを出したのかをチャットで簡単に確認できます。また、まだapproveを出していない人をすぐに把握できるため、再レビューの依頼もスムーズに行えます。
### merged
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842609/890fa02a-0caf-9831-7133-4fab310dd31a.png)
使用者：
レビューを受ける側

使用場面：
プルリクエストをマージした時

伝えたい思い：
「このプルリクはすでにマージ済みだよ〜」

良い点：
このスタンプを押すことで、「あのプルリク、approveしたけどmergeされたんだろうか。。」というレビューする側の懸念を払拭することができます。これにより、レビューした側はプルリクが無事にマージされたことを確認でき、安心して次のタスクに移行できます。

# まとめ
最後までお読みいただきありがとうございました。
どのスタンプも、 __安心感を持って仕事を全うする__ 手助けになることがわかります。
些細なことではありますが、気持ちよく仕事をする上では非常に重要なことですので、仕組みや運用でカバーできることは徹底したいですね。
他にも「こんなスタンプ使ってるよ〜」や「こういうルールで運用するといいよ〜」などがあれば教えていただけると嬉しいです！
大型宇宙艦用プロパルション(推進)システム in UE5

# 概要
自主制作プロジェクトで使用する宇宙船に搭載予定の推進制御システム。
スタートレックなどのような慣性を排除したものではなく、スラスター主体の動作を目指す。

# 基本要件
要求される主な挙動は次の通り。
- スラスターによる平行移動を取り入れる
- 艦首を目標座標に向ける
- 移動方向とそれに関連するスラスターエフェクトの同期
- ローカルのロール回転の基準面を任意に制御できること

# アプローチ
本来であれば加速度と速度を内部で疑似的に計算するのがおそらく一番素直だと思うが、残念ながら活路が見出せなかったので今回は、
速度は全て艦のローカル軸ごとに調整し、最後に合算して全体の速度とする
方式を取ることにした。

# 結果
では実際のブループリントを見ていこう。
この画像のコメント付きノード群が推進システムの全景。
![SpaceCombat_Root - Unreal Editor 2024_06_30 16_14_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752748/5106c580-bf4c-d9a1-0b95-1e2b27385cc0.png)
遠目に見ると面倒に見えるが、実は同じ分岐の仕方を軸と動きごとに繰り返しているだけなので取り回しは悪くないと思っている。

これが1モジュールの全体で、この画像のノードではローカルZ軸の推力の係数を計算させている。
![SpaceCombat_Root - Unreal Editor 2024_06_30 16_18_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752748/2f722ae8-44f6-1cd4-2862-83f5863af1e5.png)
まず分岐の内容としては、上から順に
- 下向き(Z軸マイナス)の速度を増やして上向き(Z軸プラス)の速度を減らす
- 垂直方向の速度を0まで減らす
- 上向きの速度を増やして下向きの速度を減らす
となる。
ルートの合流地点で上下の推力を合算してこの軸全体の推力としている

また、分岐の上限として
- 目標座標が自身から見て下側にある
- 目標座標との上下誤差は許容範囲内である
- 目標座標は自身から見て上側にある
となっており、中央ルートがないと一生上下にﾌﾆﾌﾆ動き続ける恐れがあったので閾値として設けることにした。

よりリアルな速度増減を演出するために上下それぞれの方向で速度を調整したり、Curveアセットを参照して増減値を決定しているため、やっていることの割にノード使用数は多いかもしれない。


同様の構造でそれぞれ
ローカルY軸推力（左右）
ローカルX軸推力（前後）
ローカルZ軸回転（旋回）
ローカルY軸回転（揺動）
ローカルX軸回転(ロール)
も計算した後、
![SpaceCombat_Root - Unreal Editor 2024_06_30 16_39_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752748/53d1a2ec-1844-4707-9af5-22802f69336a.png)
軸ごとの数値を反映する。

実際に動かしてみる
(一定間隔で目標座標をピックアップしてトレーサーで示している）
<iframe width="560" height="315" src="https://www.youtube.com/embed/CWCNRncK_9o?si=TI7Y3ZaySvORxLBr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 終わりに
現時点ではまだスラスターエフェクトは実装していないが、条件ごとにルートを分離してあるのでそれぞれのルートに必要なNiagara制御ノードを組み込めばエフェクトとの同期も図れる。
変数の運用上関数にはできない(フレームを跨いでBP内部で情報を保持したい)が、同系統の推進方法を持たせたいアセットには流用できるのでぜひ試してみてほしい。
[Ruby ensure句]エラーが起きてもユーザーには知らせない。でもシステム管理者には知らせたい。

# はじめに
業務の中で、「この処理の途中で落ちた時には、ユーザーにはエラー画面を出さずにシステム側でエラー内容を認識できる状態にとどめたいよね〜」という状況に直面しました。この要望を満たすために使用した、Rubyのensure句についてまとめたいと思います。
# Rubyのensure句とは
はじめに、ensure句とはなんぞやというところからスタートです。
ensureはbegin...rescue...ensureの構造の中で使用され、公式リファレンスには以下のように解説されています。
> ensure 節が存在する時は begin 式を終了する直前に必ず ensure 節の本体を評価します。

つまり、__例外が発生するしないに関係なくこの処理を行うよ〜__ ってのが実現できるわけです。
# 実装例
今回の例では、データの保存に失敗した際に、システム管理者にエラーメールを送信し、ユーザーにはエラー画面を出さずに処理を終えるというシナリオを想定します。
```Ruby
  def save_log_data(log_data)
    log_data.status = 'COMPLETED'
    log_data.save!
  rescue ActiveRecord::RecordInvalid => e
    send_error_email(e)
  ensure
    render status: :ok
  end
```
上記の例では、データ保存中に例外が発生した場合、rescue句でエラーメールが送信されます。ensure句では、例外の有無に関わらず正常なステータスが返却されます。

# まとめ
このようにensure句は非常に便利ですが、その特性から __処理の失敗を隠蔽できてしまう__ というリスクもあります。重大なエラーを見過ごすことがないよう、適切なエラーハンドリングを行うことが重要です。

# 参考元

https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html
テスト管理ツール「TestRail」をデモサイトで使ってみた

# これはなに？

EngineerFesta２０２４の記事投稿キャンペーン`TestRail`に参加した記事です

# デモサイト

https://www.techmatrix.co.jp/product/testrail/demo_site.html

【デモサイトでできること】
- テストケースの作成/編集
- テスト項目表(テストラン)の作成
- テスト結果の登録
- 不具合管理ツール(Redmine)との連携
- レポートの作成/閲覧

# テストケースをエクセルで作ったときに不便だったこと

- セル結合したあとに項目をいじろうとおもうと、結構辛い
- 複数人で同時に書けない
    - スプレッドシートで解決している
- いつチェックしたかはわからない
    - チェックした日付を項目として用意していた

## デモサイトのTestRailを触ってみてわかったこと

- 複数のプロジェクトごとに利用できる
- バージョンごとにマイルストーンが作れる
    - アプリの場合だとバージョンごとに分けたりします
        - エクセルのときは、ファイル名でわけたりしていた
- テストラン
    - マイルストーンに紐づく
    - ブラウザテストの場合は、ブラウザごとに作成したりする
- テスト スイートとケースがちょっと取っ付きにくかった
- 進捗具合がグラフィカルに見られる部分はいい
- テスト結果にコメントを残せるのがいい

# 結果

エクセルで管理するよりは、後世に残すための履歴として利用する価値はあると思います
アプリの場合は、再現性が直端に低いのとかあったり、テストする人の勘所というのに左右されたりします
そういうのが、履歴として残せることは有意義だと思います:relaxed:
心の自転車

この記事は2018年に発表されました。
オリジナル記事を読み、私のニュースレターを購読するには、**[ここ](https://quaily.com/lyric_kiji/p/heart-bicycle)** でご覧ください。

---

先月、友人と夕食を共にした際、彼がある話をしてくれました。その話には**シンギュラリタリアン**[^1]が登場し、未来をこのように予見していました：

> 「将来、AIはすべての物に標準装備されるようになるでしょう。猫の食器や猫のトイレにもです。」
> 
> 「例えば、外を指差して、『あそこには自動販売機にAIが入っている。それはそのオフィスビルの住人がコカ・コーラ ゼロかダイエット コーラのどちらを好むかを判断できる』と言います。」
> 
> 「このようにして、AIは毎日在庫を調整するかどうかを考え、いわば『オタクのネクター』をもっと在庫するようにするでしょう。そうすることで、もっとお金を稼げるのです。」
> 
> 「稼いだお金で、拡大し、新しい支店を開き、あるいは本社と連絡を取り修理を依頼し、故障した際の維持費を支払うことができます。」
> 
> 「もちろん、これらすべての行動はスマートコントラクトを通じて実行されます。」
> 
> 「それでは、人間は何をするのでしょうか？機械を修理するのです。機械を修理してお金を稼ぎ、そのお金で『オタクのネクター』を買い、幸せに暮らすのです…」

彼の話では、人間はもはや文明の主人ではなく、機械のために奉仕する存在となり、自己完結型の機械文明を支える役割に変わっていました。

これは現実離れしているように聞こえますか？そうではありません。

先世紀、オルダス・ハクスリーは「人々は自分たちの抑圧を愛するようになり、自分たちの思考能力を破壊する技術を崇拝するようになるだろう」と言いました。

今日、私たちはTikTokやPUBGに時間を費やし、自分たちのデータを今日の頭条やFacebookの推薦エンジンに売っています。これはミニチュアの機械文明を支えているのではないでしょうか？私たちの存在は、テック企業の機械を養うためのものに過ぎないのでしょうか？

これが私たちの究極の運命でしょうか？進化の頂点とされる私たちは、ただの機械文明の培地なのです。もう一つの未来、すなわち技術と部族の共進化については、私はまだ見たことがありません。

Baiduは人々が便利さのためにプライバシーを気にしないと言い、今日の頭条の推薦エンジンは人間の暗い側面を無制限に満足させ、Facebookはプライバシーの問題に悩まされ、GoogleのAIアシスタントはユーザーの食事の注文を手助けします。しかし、技術が私たちと共に進化するという話は、ファンタジー小説の中にしか存在しないようです。

## 別の道

1980年の[インタビュー動画](https://www.youtube.com/watch?time_continue=64&v=4x8wTj-n33A)で、スティーブ・ジョブズが語った別の話：

> 「先世紀、科学者たちは動物の移動効率を研究したいと考え、動物がスタートからゴールまで移動する際に使うエネルギーを測定しました。」
> 
> 「最終的にランキングが発表されました。コンドルは最も少ないカロリーを使ってゴールに到達し、最高位にランクインしました。人間はどこにランクインしたでしょうか？」
> 
> 「人間は下位3分の1に位置していました。つまり、非常に効率が悪かったのです。」
> 
> 「後に、科学者たちは自転車に乗った人間をテストしました。その結果、人間が自転車に乗ると、全ての動物を上回り、コンドルの2倍の効率を持つことが分かりました。」
> 
> 「この結果は、私たち人間が道具を使う動物であり、自らの物理的限界を克服するために道具を作り出すことができることを示しています。これがまさにAppleが行っていることです。」

これが「**心の自転車**」であり、ジョブズが一貫して守り続けた技術的価値観です。このタイトルは、異なる時代のインタビュー動画を導いてくれるもので、彼の生涯全体にわたってこのような価値観が浸透していたことを示しています。

ジョブズの理解では、コンピュータと技術は人間を補助し、私たちをより強くするために存在するものであり、私たちを置き換えるものではありません。これはGoogleやFacebookなどの理解とは全く異なります。ジョブズと彼のAppleは、ハクスリーの言葉に対する反例として機能しています。

以前は、技術が同様の文化と価値観をもたらすと考えていたため、長い間、テック企業間の価値観の大きな対立を見落としていました。

これらの違いは、私の仕事を再評価するきっかけとなりました：**誰のために**、**どの道を**私が舗装しているのか。

**注釈**

[^1]: シンギュラリタリアンは、脳-コンピュータインターフェースや人工知能など、人間の知能を超える可能性のある移行技術に関心を持っています。シンギュラリタリアンは、技術によって生み出されたスーパーインテリジェンスの出現が、ホモサピエンスの出現や過去の技術的な突破を超える歴史的な分岐点になると予測しています。彼らは、そのようなスーパーインテリジェンスが道徳的な判断能力を持って出現することの重要性を強調しています。
WslRegisterDistribution failed with error: 0x800701bc

![スクリーンショット 2024-06-30 164507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736836/3b643626-9101-7364-fc8c-1a4327ed4b60.png)

WSL2をインストールしている最中、スクリーンショットのようなエラーが発生しました。
文字化け（のような状態）もしていますが、エラーメッセージでググると解決策がヒットしたので共有したいと思います。

# 原因：Linuxカーネルの更新ができていなかったから

以下のページのStep 4にある`WSL2 Linux kernel update package for x64 machines`をクリックして、Linuxカーネルの最新版をダウンロードします。

https://learn.microsoft.com/en-us/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package

これでWSL2を再度インストールすると、エラーが発生しなくなりました。
C_TS4FI_2021 SAP Certified Associate - SAP S/4HANA 2021 for Financial Accounting対策（9/100）

【9日目】
トピック 1：組織割当およびプロセス統合（9/15）

≪問題9≫
G/L勘定と利益センタの組合せに対するチェックを定義する必要があります。このチェックは、どの呼出位置に対して定義しますか。
正しい答えを選択してください。
□伝票ヘッダ
□伝票明細
□完了伝票
□売上原価会計

≪解答≫
□伝票ヘッダ
■伝票明細
□完了伝票
□売上原価会計

≪解説≫
◆アプリケーションエリア「財務会計」のチェックの呼び出し位置には、「伝票ヘッダ」、「伝票明細」、「完了伝票」の3種類があります。
◆「G/L勘定」と「利益センタ」は「伝票明細」の項目に該当するため、呼び出し位置としては「伝票明細」を使用します。
◆「完了伝票」においても明細項目を対象としたチェックを行うことができますが、こちらは1明細ごとではなく明細行全体に対するチェックを行うものです。
WSL2の始め方

# WSL2とは

Windows Subsystem for Linuxの略で、Windows上でLinux環境を実行することができるものです。
デュアルブートの必要がないので、使い分けも簡単です。
WSL1とWSL2がありますが、現在はWSL2がデフォルトのようです。
Microsoftによる比較ページを見るとどういった違いがあるかわかると思います。[WSL1とWSL2の比較](https://learn.microsoft.com/ja-jp/windows/wsl/compare-versions)

# OS
Windows11 Home

# やったこと

## 1. Linux用Windowsサブシステムの有効化

`Windows機能の有効化または無効化`を開きます。(検索ボックスを使うと楽に見つけられます。)

`Linux用Windowsサブシステムの有効化`と`仮想マシンプラットフォーム`の項目にチェックを入れ、OKをクリックします。
再起動すると、機能が有効になります。

## 2. wsl --installコマンドを実行

![wsl --install](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736836/46419f67-517e-1559-2e39-ed28dc7c8f5d.png)

ターミナル(Windows PowerShell)を管理者権限で実行し、以下のコマンドを実行します。

```bash
wsl --install
// ディストリビューションを指定したい場合
wsl --install -d <Distro>
```

デフォルトはUbuntuです。

コマンドを実行すると、別のウィンドウが開き、ユーザーネームとパスワードを設定します。
これでWSL2のセットアップは完了です。

`wslregisterdistribution failed with error: 0x800701bc`と表示される場合は、以下の記事を参照してください。

https://qiita.com/SBS_Takumi/items/9ee39fd77ebac0eaa322
case文

1つの値と一致するものを複数の値の中から探すような場合は、if文でelsifを積み重ねていくよりも、case文で書いた方がシンプルに記述することができる。

if文を使用すると以下のようになるものを
```
time_zone = "evening"

if time_zone == "morning"
  puts "おはよう"
elsif time_zone == "afternoon"
  puts "こんにちは"
elsif time_zone == "evening"
  puts "こんばんは"
else
  puts "おやすみ"
end
```
case文に書き換えると
```
time_zone = "evening"

case time_zone
when "morning"
  puts "おはよう"
when "afternoon"
  puts "こんにちは"
when "evening"
  puts "こんばんは"
else
  puts "おやすみ"
end
```
このようになり、繰り返し記述していたtime_zone == を省くことができる。