OmniAICreator/Qiita-1.07M huggingface dataset:
Winter 25　フロー関係



# $Recordのラベルが変わっています。

:::note
The flow UI may have changed in Winter 25.
Select Triggering Lead.
This is $Record

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/2c8b7f65-59a9-5ef6-a820-e4058b820d62.png)
:::

# フィールドの並び順が変わっています

+ [No More User ID with Winter 25?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ifpoi)

:::note
I think the field order has changed. Please scroll down a little further.
:::

# 未分類

+ [Winter 25 の「フロー実行へのユーザー アクセスを制限する」リリース アップデートの自動有効化に関するアクションが必要な電子メールを受け取りました。具体的には、影響を受ける可能性がある調査の 1 つのフロー定義 ID が示されています。しかし、ゲスト プロフィールにアンケートのフローへのアクセスを提供する方法がわかりません。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007Yvoqs)

:::note
最終的に Salesforce にチケットを発行したところ、アンケートが Flow 上に構築されているとしても、特に許可されない限りフローの実行を停止するリリース更新の影響を受けないはずであることを確認する、かなり妥当な回答が得られました (でもテストしてください! うーん、私は壊れたらそのままにしておいて、壊れたら直すとだけ考えてください）。
:::

+ [フロー アクセス権は、(プロファイルの場合と同様) フローからではなく、権限セットから設定します。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007XI86LSAT)

+ [リリース更新】フローを実行するためのユーザーアクセス権の制限について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ahkyg)

:::note
そのものずばりの回答ではありませんが、かなり近い過去質問を共有します。

https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Jg88ZSAR

具体的な質問のヘルプがあるかどうかわかりませんが、フローが実行されるコンテキスト、フロー権限（＆個別フローの実行制御）、レコードアクセス権、の組み合わせで実行可否が決まると思います。
:::


# 既知の問題

+ [フロー: GET 要素の場合、null の値をクエリすると、いくつのレコードが返されますか?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ermA4)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/19df4d57-8712-7577-0df9-40408a643e34.png)

[フローのレコード取得要素「IN」条件と空のコレクションは、FLOW_ELEMENT SOQL_ROWS LIMIT_USAGE を消費します。](https://issues.salesforce.com/issue/a028c00000mNU0TAAW/flow-get-records-element-in-condition-with-empty-collection-consumes-flow_element-soql_rows-limit_usage)
【データベース】MySQLとPostgreSQLのインデックスの再編成方法を知る

# はじめに
今回も「達人に学ぶ DB 設計徹底指南書 第 2 版」の 6 章の演習問題で調べた「インデックスの再編成方法」についてまとめました！
MySQL と PostgreSQL の２つだけ調べました。

## 何故、再編成が必要なのか？
B-tree は平衡木（balanced tree）と呼ばれ、どのリーフノード（実データのポインタを持つノード）もルートノードからの距離が同じになる。このため、どんなキー値でも同じ速度で結果を得られるという利点がある。
ただ、長期間の運用で、削除、更新、挿入処理など繰り返されることで、インデックスの構造が崩れ、非平衡木になってしまいバランスが悪くなり、検索時間にばらつきが生まれたり、パフォーマンスが低下していく。
これを解決するために定期的にインデックスの再編成を行う必要がある。

## インデックスの再編成

### MySQL のインデックスの再編成
**OPTIMIZE ステートメントを使用する**

```
OPTIMIZE TABLE <テーブル名>;
```

#### 処理内容
- InnoDB エンジンの場合、このコマンドはテーブルのデータを物理的にコピーし、元のテーブルを削除して新しい最適化されたテーブルに置き換える。
- B-tree インデックスも再構築され、断片化が解消される。
- 一時的にテーブル全体をロックするため、クエリや更新のパフォーマンスに影響を与える場合があるので、負荷の低い時間に実行するのが望ましい

#### 使用するタイミング

- テーブルに大量の削除や更新が行われた場合。
- クエリパフォーマンスが低下していると感じたとき。

### Postgresql のインデックスの再編成
**REINDEX INDEX コマンドを使用**

#### インデックスに対して実行
```
REINDEX INDEX <インデックス名>;
```

#### テーブルに対して実行
```
REINDEX TABLE <テーブル名>
```

#### データベースに対して実行
```
REINDEX DATABASE <データベース名>
```

#### REINDEX コマンドの動作
- 既存のインデックスを再作成し、断片化したインデックス構造を最適化する。
- テーブルやインデックスをロックするため、大規模なテーブルに対して使用する際は、負荷の低い時間帯に実行することが推奨される。

#### 使用するタイミング
- インデックスが大きく断片化している場合（VACUUM ANALYZE などで断片化を確認できる）。
- 大量のデータの削除や更新が行われた場合。
- クエリパフォーマンスが著しく低下した場合。

## まとめ
以上、MySQLとPostgreSQLのインデックスの再編成についてでした。
実際に実務、個人開発含め、再編成処理を自分が担当する機会はあまりないと思いますが、運用する中で、異変に気付いたり、手立ての1つとして知っておくことは大切だなと感じました。

### 参考書籍・サイト

https://www.shoeisha.co.jp/book/detail/9784798186627

https://dev.mysql.com/doc/refman/8.0/en/optimize-table.html

https://www.postgresql.jp/document/13/html/sql-reindex.html
logcat取得を自動化したい。

logcatでファイルを分けたいがログキャットをクリアし、ファイル名を入力し、ログキャットを止める処理がチョット面倒くさい。。。

なのでそれをなるべく楽にしたいのだが、やりたいことを簡単に書くと

```
REM ログキャットをクリア
adb logcat -c
REM File名を入力
set /p FleName="Input file name"
REM 入力されたファイル名でlog catを取得
adb logcat > %FleName% + ".txt"
```

こんな感じである。

## が

これだとlogcat 取得停止時にCtrl Cを押し、その後にコマンドプロンプトからバッチ処理を終了しますか？ Y/N でNを押さなくてはいけない。
ちなみにY or N 以外を押さないと押されるまでLOOPする。

なのでそこをスキップさせたいがbatには非同期処理が無いため、adb.exeをkillすればいいのではないかという結論にたどり着いた

 完成形
```
@echo off
adb devices

set /P grep="grepしたいWord:"
set extension=.txt
:loop
REM ユーザーにファイル名を入力させる
set /p filename="ログキャットのファイル名を入力してください:ファイル名(%extension%)"

REM ログキャットをクリアする
echo ログキャットをクリアします...
adb logcat -c

REM ログキャットの取得を開始（バックグラウンドで実行）
echo %filename%.txt にログキャットを保存します...
start /MIN "" cmd /c "adb logcat > %filename%.txt"

REM エンターキーを待機してログ取得を停止
choice /n /c y /m "ログの取得中、、Yキーで終了"
adb kill-server
findstr %word% %filename%.txt

goto loop
```  

これでキーを押すだけで次の入力処理になる

完全自動でやりたければ、ファイル名を時間にして出力すればいい
ServiceNowのJavaScriptエンジンをECMAScript 2021にする

ServiceNow標準のJavaScriptエンジンはES5ですが、TokyoからカスタムアプリケーションでECMAScript 2021（ES12）をサポートするようになったので実際に試してみます。

ServiceNow docsリンク : [プラットフォーム上の JavaScript エンジン](https://docs.servicenow.com/ja-JP/bundle/washingtondc-api-reference/page/script/JavaScript-engine-upgrade/concept/c_JS_engine_upgrade.html)


# カスタムアプリケーションの作成
まずはカスタムアプリケーションを作成します。
初期値で既にES12が選択されていましたが、JavaScript Modeを「ECMAScript 2021（ES12）」にして作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748053/bb672ddf-8f70-1512-00b4-47fad62aedf0.png)

# スクリプトインクルードの作成
スクリプト実行ができればどの機能でもいいのですが、とりあえず単独で使いやすいスクリプトインクルードを試してみます。
コードの内容もES5の時には実行できなかったものであれば何でもいいので変数にconstとletを使ったアロー関数を書いてみます。

```javascript
const ES12test = (name) => {
    let msg = "Hello " + (name ?? "world");
    gs.addInfoMessage(msg);
};
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748053/4f7daae1-bd89-8919-0724-7241950e8a36.png)

# コードの実行
[前回の記事](https://qiita.com/you0321/items/3fddf7c457751e2c1a01)でも紹介したXploreを使用して実行してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748053/b03c9e2d-292a-a2cd-2e7a-1fc26d39ab73.png)

問題なく動作しました。

# 他スコープでの使用
ここからが個人的に一番期待している部分なのですが、グローバルスコープやES5のカスタムアプリケーションから使用できるか試してみます。
動作してくれればES5では実現できない処理やES12で記述したほうが良い場合、ライブラリを移植する場合など、活用できる場面が出てきます。

結論を書くと他スコープから呼び出して実行することができました。
実際の画面のスクリーンショットはやんごとなき事情[^1]によりありませんがこれで様々な活用方法が期待できます。

# ServiceNowでサポートしているES12の機能
カスタムアプリケーションにてES12をサポートするようにはなりましたが、全ての機能をサポートしているわけではないようです。
詳細は以下のDocsに掲載されていますが本機能を使用してみようと思ったきっかけである正規表現のUnicodeプロパティがサポート対象外なのは残念でした。

ServiceNow docsリンク : [JavaScript エンジン機能のサポート](https://docs.servicenow.com/ja-JP/bundle/washingtondc-api-reference/page/script/JavaScript-engine-upgrade/reference/javascript-engine-feature-support.html)

# まとめ
+ TokyoバージョンからカスタムアプリケーションでES12をサポートするようになった
+ 作成したスクリプトなどは他スコープから呼び出してES12のスクリプトとして実行可能
+ 全てのES12の機能をサポートしているわけではない


[^1]:記事の投稿をさぼっている間に使用していたPDI環境が消えました。
権限セットライセンス

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめN～Z](https://qiita.com/Keiji_otsubo/items/92f92bb9f668ca9688be)





+ [【ヘルプ】権限セットライセンス](https://help.salesforce.com/s/articleView?id=sf.users_permissionset_licenses_overview.htm&type=5)

権限セットライセンスは、割り当て済みのユーザーライセンスに含まれていない追加機能にアクセスする権利をユーザーに付与します。ユーザーには、権限セットライセンスをいくつでも割り当てることができます。

権限セットライセンスと権限セットの目的は異なります。

+ 権限セットライセンスは、ユーザーライセンスの機能を拡張します。権限セットライセンスにより、ユーザーライセンスでサポートされる数よりも多くの権限をユーザーに割り当てることができます。
+ 権限セットにより、ユーザーのプロファイルを変更せずにユーザーの機能アクセス権が拡張されます。

つまり、ユーザーに割り当てられたライセンスによって、ユーザーが使用できる最大機能が定義されます。システム管理者は権限セットを使用して各ユーザーが持つ権限のサブセットを制御します。これにより、各ライセンスをさまざまなユーザーロールに合わせて調整できます。ユーザーが追加のライセンス機能にアクセスするには、権限セットライセンスと、機能権限が含まれる権限セットの両方がユーザーに割り当てられている必要があります。権限セットを介してユーザーに権限を割り当てても、ユーザーに必要なライセンスがない場合、割り当てエラーが発生します。

一部の権限セットライセンスには、管理プロセスを容易にする自動生成された標準権限セットが付属します。標準権限セットをユーザーに割り当てると、関連する権限セットライセンスがそのユーザーに自動的に割り当てられます。特定の権限セットライセンスについての詳細は、関連する機能ドキュメントを参照してください。

# 事例

+ [ユーザライセンスの「Salesforce Integration」を使用して、Dataloaderで出力をしています。カスタムオブジェクトは、出力できるのですが標準オブジェクトが出力できません。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ifoCV)

権限セットで取引先の権限をつけて「Salesforce Integration」ライセンスユーザを設定しようとしてもエラーが出ました。

:::note
「権限セットライセンスの割り当て」を設定することで出力できるようになりました。
:::

+ [【未解決】権限セットライセンスを必要とする権限を削除するまで、（ユーザー）からCRM User権限セットライセンスが削除できません。](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KftWG)
『実践Terraform』でterraform applyするとUnsupportedCertificateとエラーが出る

## はじめに

Terraform初学者です。

『[実践Terraform](https://www.amazon.co.jp/dp/4844378139)』という書籍で勉強しています。

書籍のコードをそのまま記述するとエラーとなってしまう箇所があったため、備忘録としてまとめます。

この記事におけるバージョンは次のとおりです。

- Terraform: 1.9.5
- terraform-provider-aws: 5.65.0

## 問題

`第8章 ロードバランサーとDNS`のサンプルコードが対象です。

HTTPSリスナーを定義する箇所で次のコードが定義されていました。

```terraform:lb.tf
resource "aws_lb_listener" "https" {
  load_balancer_arn = aws_lb.example.arn
  port = "443"
  protocol = "HTTPS"
  certificate_arn = aws_acm_certificate.example.arn
  ssl_policy = "ELBSecurityPolicy-2016-08"

  default_action {
    type = "fixed-response"

    fixed_response {
      content_type = "text/plain"
      message_body = "これは『HTTPS』です"
      status_code = "200"
    }
  }
}
```

書籍のとおりにコードを書き、第8章が終わったタイミングで`terraform apply`を実行すると次のエラーが出ました（一部の情報は差し替えています）

```bash
│ Error: creating ELBv2 Listener (arn:aws:elasticloadbalancing:ap-northeast-1:123456789012:loadbalancer/app/example/[load-balancer-id]): operation error Elastic Load Balancing v2: CreateListener, https response error StatusCode: 400, RequestID: [request-id], api error UnsupportedCertificate: The certificate 'arn:aws:acm:ap-northeast-1:123456789012:certificate/[example-certificate-id]' must have a fully-qualified domain name, a supported signature, and a supported key size.
│ 
│   with aws_lb_listener.https,
│   on lb.tf line 66, in resource "aws_lb_listener" "https":
│   66: resource "aws_lb_listener" "https" {
│ 
```

中身を見るかぎり、HTTPSリスナーの作成時に指定された証明書に問題があるようです。

しかし書籍の中では、証明書の検証を行う`aws_acm_certificate_validation`も定義しているため、なぜこのエラーが発生するのかわかりませんでした。

## 原因

結論として、次のようにHTTPSリスナーの定義へ`depends_on`を記載することで解決しました。

```terraform:lb.tf
resource "aws_lb_listener" "https" {
  load_balancer_arn = aws_lb.example.arn
  port = "443"
  protocol = "HTTPS"
  certificate_arn = aws_acm_certificate.example.arn
  ssl_policy = "ELBSecurityPolicy-2016-08"

  # この1行を追加
  depends_on = [aws_acm_certificate_validation.example]

  default_action {
    type = "fixed-response"

    fixed_response {
      content_type = "text/plain"
      message_body = "これは『HTTPS』です"
      status_code = "200"
    }
  }
}
```

元々の書き方だと`aws_acm_certificate_validation`の作成完了前、つまり検証が完了する前の証明書がALBに紐づけられてしまうため、エラーが発生していました。

`depends_on`を記述することで「`aws_acm_certificate_validation`の作成が完了してからHTTPSリスナーを作成する必要がある」という依存関係を明示することができます。

## おわりに

『[実践Terraform](https://www.amazon.co.jp/dp/4844378139)』はとてもわかりやすいため、初学者にもおすすめです。

ただし出版が2019年なので現在とは異なる点もあります。

今後もそういった箇所が見つかったら、公式ドキュメントと書籍を行ったり来たりしつつ、さらにTerraformの理解を深めていきたいと思います。

また、この記事に誤りがありましたらコメントにて教えていただけますと幸いです。

## 参考資料

https://dev.classmethod.jp/articles/dnsrecord-acm-alb-with-terraform/
【速報】ChatGPTがアップデート！OpenAI o1最新情報を初心者向けに解説



こんにちは、AIに興味をお持ちの初心者の皆さん！今回は、OpenAIが開発するChatGPTの最新情報について、わかりやすくお伝えします。

なお、詳細はOpen AI公式サイトをご確認ください。

https://openai.com/o1/

https://openai.com/index/introducing-openai-o1-preview/

## はじめに

人工知能（AI）の技術は日々進化しており、その中でも**ChatGPT**は多くの人々の注目を集めています。最近、「**OpenAI o1**」という新モデルが発表されたとの情報が広まっていますが、現時点では公式な詳細は明らかにされていません。本記事では、これまでのChatGPTの進化と最新の情報をもとに、初心者の方にも理解しやすいように解説します。

## ChatGPTとは？

**ChatGPT**は、OpenAIが開発した高度な言語モデルで、人間のような自然な会話や文章生成が可能です。質問に答えたり、文章を翻訳したり、コードを書いたりと、多岐にわたる用途で利用されています。

### 主な特徴

- **自然な対話能力**：まるで人間と話しているかのような応答。
- **多言語対応**：日本語を含む複数の言語でのコミュニケーションが可能。
- **幅広い知識ベース**：インターネット上の膨大な情報を学習。

## GPT-4までの進化

**GPT-4**は、2023年に公開されたChatGPTの最新モデルで、前モデルであるGPT-3.5に比べて大幅な性能向上が見られます。

### GPT-4の主な進化点

- **高度な推論能力**：複雑な問題解決や論理的思考が可能。
- **長文の処理**：最大25,000語のテキストを理解・生成。
- **マルチモーダル機能**：テキストだけでなく、画像の入力にも対応（限定的に公開）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3783554/cea5206d-a1ad-31ea-e416-f5fa894e427c.png)
引用：https://openai.com/index/learning-to-reason-with-llms/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3783554/ace447ab-8a0f-08e5-644c-05d8204763ec.png)
引用：https://openai.com/index/learning-to-reason-with-llms/

### GPT-4の活用事例

- **プログラミング支援**：コードの自動生成やバグの発見。
- **教育分野**：難解な概念の解説や学習計画の提案。
- **ビジネスシーン**：レポート作成やデータ分析の効率化。

## 安全性と倫理への取り組み

OpenAIは、AIの安全性と倫理性を重視しています。

### 不適切なコンテンツの抑制

- **有害情報のフィルタリング**：差別的、暴力的、または違法な内容の生成を防止。
- **ユーザーガイドラインの設定**：安全な使用方法の明確化。

### ユーザーフィードバックの活用

- **モデルの継続的改善**：ユーザーからのフィードバックをもとに性能向上。
- **透明性の確保**：モデルの限界やリスクについての情報公開。

## 「OpenAI o1」とは？

現時点で「**OpenAI o1**」に関する公式情報は公開されていません。しかし、AI技術の急速な発展を考えると、新たなモデルや機能が近い将来に登場する可能性があります。

### 予想される新機能

- **さらなる推論能力の向上**：より複雑なタスクへの対応。
- **マルチモーダル対応の拡大**：音声や動画など、様々なデータ形式への対応。
- **効率性とスピードの改善**：処理速度の向上とエネルギー消費の削減。

## 今後の展望

AIは私たちの生活を大きく変える可能性を持っています。教育、医療、ビジネスなど、さまざまな分野での活用が期待されます。

### 教育分野での活用

- **個別学習のサポート**：学生一人ひとりに合わせた学習プランの提供。
- **教師の支援**：教材作成や成績評価の効率化。

### 医療分野での活用

- **診断支援**：患者情報の分析と診断のサポート。
- **患者とのコミュニケーション**：医療情報のわかりやすい説明。

### ビジネス分野での活用

- **業務の自動化**：ルーチンワークの効率化。
- **データ分析**：大量のデータから有用な情報を抽出。

## ChatGPTを始めてみよう

初心者の方でも簡単にChatGPTを利用できます。

### 利用方法

1. **公式サイト**にアクセス。
2. **アカウント登録**を行う（メールアドレスとパスワードが必要）。
3. **チャット画面**から質問や指示を入力。

### 注意点

- **個人情報の取り扱い**：機密情報や個人情報の入力は避けましょう。
- **情報の検証**：生成された情報は参考として活用し、必要に応じて確認。

## まとめ

AI技術は驚くべき速さで進化しています。最新のChatGPTや今後登場するかもしれない「OpenAI o1」は、私たちの生活や仕事に新たな可能性をもたらすでしょう。初心者の方も、この機会にAIとの関わりを深めてみてはいかがでしょうか。

---

最後までお読みいただきありがとうございます！このブログが皆さんの理解の一助となれば幸いです。ご質問や感想があれば、ぜひコメント欄でお知らせください。フォローもお待ちしています！

---
Homebrewのコマンド基本一覧

1. **brew update**  
   Homebrew自体とそのレシピを最新の状態に更新します。

2. **brew upgrade**  
   インストールされているパッケージを最新バージョンにアップグレードします。

3. **brew install [パッケージ名]**  
   パッケージをインストールします。

4. **brew list**  
   インストールされているパッケージの一覧を表示します。

5. **brew list [パッケージ名]**  
   特定のパッケージがインストールされているか確認します。

6. **brew info [パッケージ名]**  
   パッケージの情報を表示します。インストールされているかどうかも確認できます。

7. **brew search [キーワード]**  
   パッケージを検索します。

8. **brew uninstall [パッケージ名]**  
   パッケージをアンインストールします。

9. **brew cleanup**  
   古いバージョンのパッケージを削除してディスクスペースを解放します。

10. **brew doctor**  
    Homebrewの環境を診断し、問題を報告します。

11. **brew tap [リポジトリ名]**  
    外部のリポジトリを追加します。
【Python】バブルソート

## 概要
バブルソートは、非常にシンプルで基本的なソートアルゴリズムの1つです。隣接する要素を比較して入れ替える操作を繰り返し、データをソートします。
計算量が O(n^2) と非効率なため、大規模なデータセットには適していませんが、アルゴリズムの学習や小規模データのソートには適しています。

この記事では、Pythonでのバブルソート実装方法について説明します。

## コード
以下がPythonでのバブルソートの実装例です。
```python
def bubble_sort(arr):
    n = len(arr)
    # ここでソートが行われる
    for i in range(n):
        # すでにソートされた部分は確認しないようにする
        for j in range(0, n - i - 1):
            # 隣接する要素を比較して入れ替える
            if arr[j] > arr[j + 1]:
                arr[j], arr[j + 1] = arr[j + 1], arr[j]
    return arr

# サンプルの使用例
if __name__ == "__main__":
    sample_data = [64, 34, 25, 12, 22, 11, 90]
    print("ソート前:", sample_data)
    sorted_data = bubble_sort(sample_data)
    print("ソート後:", sorted_data)
```

### 実行結果
```
ソート前: [64, 34, 25, 12, 22, 11, 90]
ソート後: [11, 12, 22, 25, 34, 64, 90]
```

### 詳細
bubble_sort関数は、リストarrを入力として受け取り、ソートされたリストを返します。
外側のforループは、配列の長さ分ソートの処理を繰り返します。
内側のforループでは、隣接する要素を比較し、順序が逆であればそれらを入れ替えます。これにより、最大の値が徐々にリストの最後に移動します。
各反復のたびに最後にソートされた部分は無視されます（n - i - 1 の部分）。

## 参考
https://www.udemy.com/course/python-algo/?couponCode=KEEPLEARNING
Go言語(Golang)の指標分析のライブラリ


1. **go-metrics**
   - **特徴**: 
     - メトリクスのカウンタ、ゲージ、ヒストグラムをサポート。
     - 統計情報を収集し、平均、中央値、パーセンタイルなどを計算可能。
   - **インポート方法**:
     ```go
     import "github.com/rcrowley/go-metrics"
     ```
   - **リンク**: [go-metrics GitHub](https://github.com/rcrowley/go-metrics)

2. **prometheus/client_golang**
   - **特徴**:
     - HTTPエンドポイントでメトリクスをエクスポート可能。
     - ヒストグラム、サマリー、カウンタなどをサポート。
   - **インポート方法**:
     ```go
     import "github.com/prometheus/client_golang/prometheus"
     import "github.com/prometheus/client_golang/prometheus/promhttp"
     ```
   - **リンク**: [prometheus/client_golang GitHub](https://github.com/prometheus/client_golang)

3. **expvar**
   - **特徴**:
     - Goの標準ライブラリ。
     - 変数をHTTPで公開し、簡単な監視を実現。
   - **インポート方法**:
     ```go
     import "expvar"
     ```
   - **リンク**: 標準ライブラリに含まれています。

4. **opencensus-go**
   - **特徴**:
     - 分散トレースとメトリクスを統合。
     - カスタムビューやタグ付けが可能。
   - **インポート方法**:
     ```go
     import "go.opencensus.io/stats"
     import "go.opencensus.io/stats/view"
     import "go.opencensus.io/tag"
     ```
   - **リンク**: [opencensus-go GitHub](https://github.com/census-instrumentation/opencensus-go)

5. **tealeg/xlsx**
   - **特徴**:
     - Excelファイルを操作するためのライブラリ。
     - 金融データの解析やレポート作成に利用可能。
   - **インポート方法**:
     ```go
     import "github.com/tealeg/xlsx"
     ```
   - **リンク**: [tealeg/xlsx GitHub](https://github.com/tealeg/xlsx)
(雑)(3.3V)MCP9700の簡易計算法をためす。



参考

![o_coq392.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4adc828c-4228-559f-ae39-5c1ca3cd5ebe.jpeg)


https://fukuno.jig.jp/2598


https://qiita.com/caa45040/items/1e3f8970fca75550b0f1

x 過去ログを見よ!!
x UNOを一時的に3.3Vで動かす(危険)(危険)(危険)PCに繋ぐとPCが破壊されます。(いろいろした)
x Arduino UNOを一時的に3.3Vにします。

x 販売コード 114300 型番 MCP9700A-E/TO
x 販売コード 130012 型番 MCP9700T-E/TT
x 販売コード 109692 型番 MCP9700-E/TO


目的
ichgojamなんかで使われている
符号付整数の計算方法を試す。
最大で20程度ズレる、論理値2800
1024 x 32 / 10 - 500 = 2776


結果

![o_coq393.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/2a394abb-33db-8b9d-af0c-bc2bb49fd9c8.jpeg)


![o_coq391.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/192e140a-ecea-2953-af7b-cda84d50da25.jpeg)


プログラム


```c++



//MCP9700_SMD_3V3_zatu_UNO1


//初期化
void setup() {
  //シリアルポートの初期化
  Serial.begin(9600);
}//setup


//メインループ
void loop() {

  int sensorValue; //センサーの読み取り値
  int Temperature; //温度

  //温度センサーから値を読み込む
  sensorValue = analogRead(A0); //UNO

  //センサーの値から温度に変換 0℃に合わす為に500mVを引く
  //sensorValue = 469; //debug 約1.5V  100.0℃
  //sensorValue = 242; //debug 約0.8V   27.9℃(論理値)
  //sensorValue =   0; //debug 約0.0V  -50.0℃
  Temperature = sensorValue * 32 / 10 - 500;

  //結果の表示
  // print out the value you Temperature:
  Serial.print(Temperature / 10);
  Serial.print('.');
  Serial.print(Temperature % 10);
  Serial.println();
  delay(1000);        // delay in between reads for stability

}//loop



```
wslでmanim その15

# 概要
wslでmanimやってみた。
練習問題やってみた。

# 練習問題
3dグラフを書け。

# 成果物

![test_ManimCE_v0.18.1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7a8c405d-0e50-c899-05f9-22727263226c.gif)


# サンプルコード

```
from manim import *

class test(ThreeDScene):
	def construct(self):
		axes_3d = ThreeDAxes(x_range = (-6, 6, 1), x_length = 12, y_range = (-5, 5, 1), y_length = 10, z_range = (-3, 3, 1), z_length = 6,)
		self.set_camera_orientation(phi = 70 * DEGREES, theta = 240 * DEGREES)
		surface = Surface(lambda u, v: np.array([np.cos(TAU * v), np.sin(TAU * v), 2 * (1 - u)]),).fade(0.5)
		paraboloid = Surface(lambda u, v: np.array([np.cos(v) * u, np.sin(v) * u, u ** 2]), v_range = (0, TAU),).fade(0.5)
		para_hyp = Surface(lambda u, v: np.array([u, v, u ** 2 - v ** 2]), u_range = (-2, 2), v_range = (-2, 2),).fade(0.5)
		cone = Surface(lambda u, v: np.array([u * np.cos(v), u * np.sin(v), u]), u_range = (-2, 2), v_range = (0, TAU),)
		sphere = Surface(lambda u, v: np.array([1.5 * np.cos(u) * np.cos(v), 1.5 * np.cos(u) * np.sin(v), 1.5 * np.sin(u)]), u_range = (-PI / 2, PI / 2), v_range = (0, TAU),)
		self.add(axes_3d, surface)
		self.play(Transform(surface, paraboloid))
		self.wait(0.5)
		self.play(Transform(surface, para_hyp))
		self.wait(0.5)
		self.play(Transform(surface, cone))
		self.wait(0.5)
		self.play(Transform(surface, sphere))
		self.wait(0.5)





```

以上。
【JavaScript】NaN === NaN が false になる理由を文学的に無理やりこじつける


## これは何？

NaN === NaN が false になる理由を文学的に無理やり考えたよ。という記事。

## ぼくがかんがえたさいきょうのりゆう

一言でいうと

「NaN」は「エラー」だから。

「NaN === NaN」があったとして
「左辺のエラー」と「右辺のエラー」が同じかどうかは分からない。

「左辺のエラー」は「`0/0`のNaN」で
「右辺のエラー」は「文字列を数値への変換に失敗した結果のNaN」かもしれない。

もちろん、同じNaNである可能性もある。

じゃあどうすんのって話だが

ここは、「疑わしきは罰せず」の信念で「false」ということにしたのではないだろうか？（適当）

### そもそも

NaNとNaNを比較するということ自体が変に感じる（個人の感想）。

「正常じゃないもの」と「正常じゃないもの」を比較することに意味があるのだろうか。

JavaScriptは、そんなものを比較しても意味がないよ。というメッセージを「false」という結果で我々に伝えているのではないだろうか？（適当）
2024年9月に人気の楽しくて役立つGitHubリポジトリTop10

今回は、2024年9月現在で注目を集めている面白くて有益なGitHubリポジトリをご紹介します。これらは私のリポジトリではありませんが（そうだったらいいのに！:eyes:）、最新のテクノロジートレンドを把握するのに役立つ素晴らしいプロジェクトばかりです。


これらのリポジトリとチャットしたい場合は、こちらのツールを使って対話することができます:https://devv.ai/search?threadId=dxj2kpxpwetc

1. resume.github.com
GitHubレジュメジェネレーター。あなたのGitHubアクティビティを基にして、自動的に履歴書を作成してくれます。
2. Follow
次世代の情報ブラウザ。新しい方法で情報を探索し、整理することができます。
3. Wealthfolio
個人向けポートフォリオトラッカー。資産管理を簡単かつ効率的に行えるツールです。
4. Langflow
ローコードAIアプリビルダー。AIアプリケーションの開発を視覚的に行えます。
5. Uptime Kuma
セルフホスト型の監視ツール。サーバーやウェブサイトの稼働状況を簡単に監視できます。
6. Open Interpreter
LLMを実行するための自然言語インターフェース。AIとのやり取りがより直感的になります。
7. Zod
TypeScript優先のスキーマ宣言と検証ライブラリ。型安全性を高めるのに役立ちます。
8. Uppy
Webブラウザ用のモジュラー式JSファイルアップローダー。ファイルのアップロードを簡単に実装できます。
9. Ollama
ローカルマシンでLLMを簡単に実行できるツール。AIモデルを手軽に試せます。
10. Gradio
機械学習モデルのUIビルダー。モデルのデモを簡単に作成できます。

いかがでしたか？これらのリポジトリは、現在のテクノロジーのトレンドを反映しています。特に、AI関連のツールやローコード開発、個人向けの金融ツールなどが注目を集めているようですね。
他にも面白いリポジトリがあれば、ぜひコメントで教えてください！技術の世界は日々進化しているので、新しい発見があるかもしれません。
それでは、Happy Coding!:clap:
Snowflake World Tour 2024 コミュニティ枠 LEGEND OF THE DATA HEROES ～データクリスタルの伝説～ リアルコンテンツ SQL輪投げの話

Snowflake World Tour、超楽しかったです。
今回は、SnowVillageのスタッフで参加させてもらったので、その話を書きます。

## SQL輪投げ
![sql_wanage_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12298/a0e4b4db-e2d0-85c4-b3c4-ecf1cf0b2106.png)
写真の右上に問題文があるので、【？】に入る単語に輪投げが入れば、アプリに入力する合言葉を渡します。


### 《SQL QUIZ  (easy) 》
```sql
SELECT 
column1,column2, SUM(column3)
FROM   hoge_table
【？】 BY ALL;

```
#### 答えの選択肢
<table>
  <tr>
    <td> WHERE </td> <td>HAVING</td><td> GROUP </td>
  </tr>
  <tr>
    <td> WHERE </td> <td> GROUP </td><td> HAVING </td> 
  </tr>
  <tr>
    <td> GROUP </td> <td>WHERE</td><td> HAVING </td> 
  </tr>
</table>

#### 正解
`GROUP`(どの的に当たってもOK)

GROUP BY ALL が超便利！Snowflakeらしい！ということで出したかった問題です。
全チーム答えはわかってもらえて、でも輪投げがうまくいかない・・というチームもあり、リアルコンテンツならでは感がありました。

### 《SQL QUIZ  (hard) 》
```sql
SELECT 
【？】('{"b":1,"a":2}');
```
#### 答えの選択肢
<table>
  <tr>
    <td> PARSE_XML </td> <td> PARSE_JSON </td><td> PARSE_IP </td>
  </tr>
  <tr>
    <td> TO_BINARY </td> <td> TRY_PARSE_JSON </td><td> CHECK_JSON </td> 
  </tr>
  <tr>
    <td> TRY_TO_BINARY </td> <td> TO_DECIMAL </td><td> TO_NUMBER </td> 
  </tr>
</table>

#### 正解
`PARSE_JSON`  `TRY_PARSE_JSON`  `CHECK_JSON`

hard と super hard は問題の準備だけしてたのですが、本番で使わなかったので、こちらで供養しておきます。
カッコ内がJSON形式の文字列なので、JSON関係の関数を選べば正解でした。この３つ以外はエラーになります。
PARSE_XX 系はいろいろあるのですが、`parse_url`だとエラーにならないので選択肢から外しました。いろいろと学びがあります。
```sql
select parse_url('{"b":1, "a":2}')
;
/* "{
  ""fragment"": null,
  ""host"": null,
  ""parameters"": null,
  ""path"": ""1, \""a\"":2}"",
  ""port"": null,
  ""query"": null,
  ""scheme"": ""{\""b\""""
}"
*/
```

### 《SQL QUIZ  (super hard) 》
```sql
SELECT
【？】
(52.516262, 13.377704, 8);
```
#### 答えの選択肢
<table>
  <tr>
    <td> H1_LATLNG_TO_CELL </td> <td> H2_LATLNG_TO_CELL </td><td> H3_LATLNG_TO_CELL </td>
  </tr>
  <tr>
    <td> H4_LATLNG_TO_CELL </td> <td> H5_LATLNG_TO_CELL </td><td> H6_LATLNG_TO_CELL </td>
  </tr>
  <tr>
    <td> H7_LATLNG_TO_CELL </td> <td> H8_LATLNG_TO_CELL </td><td> H9_LATLNG_TO_CELL </td>
  </tr>
</table>

#### 正解
`H3_LATLNG_TO_CELL`
地理空間関数の１つで、
`特定の緯度、経度、解像度の H3 セル ID の INTEGER 値を返します。`
とのこと。
H3対応になったよ！ということで作ってみましたが、H3って何？っていうのと、答えが１つしかないので輪投げとして難しい！ので、super hard です。
（詳しい説明は下記のリンクからよろしくです）
https://docs.snowflake.com/ja/sql-reference/functions/h3_latlng_to_cell
https://www.snowflake.com/ja/blog/getting-started-with-h3-hexagonal-grid/


みなさま、ご参加ありがとうございました。
またよろしくお願いします！
RSpecでsystem specを実行するとOpenSSL::SSL::SSLError:が出るときの対処方法

## 発生した問題
RSpecでsystem specを実行すると以下のようなエラーが出る。

```
OpenSSL::SSL::SSLError:
  SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate)
```

### 開発環境
- Rails 6.0.6.1
- Ruby 2.7.7
- rspec-rails 5.1.2
- webdrivers 5.3.1  
- selenium-webdriver 4.9.0  
- capybara 3.39.2  

### 前提
下記の記事によるとRuby,Railsのバージョンを上げて、selenium-webdriverの最新バージョンを使うのが正攻法のようです。
https://qiita.com/jnchito/items/f994dd3ac2cdc39bff8c

ですが今回は、受講している講座のバージョンに合わせたいため、バージョンを変えずに解決していきます。
  
## 解決のために行ったこと
### 原因の推測
RubyがSSLをうまく認識できていない。
Rubyで開発する場合によく出るエラーの一つみたい。

### やったこと
下記記事を参照し、`config/application.rb`に回避のためのコードを記載
[rspec実行時 OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate)](https://takuya178.hatenablog.com/entry/2021/09/25/084157)

```
if Rails.env.test?
  OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE
end
```

### 結果
`OpenSSL::SSL::SSLError:`が出なくなる

注意点として、本番環境でこれをやるとセキュリティリスクが高まるので絶対にやらないこと。
本来はちゃんとSSLを取得して適切なところに配置するのが良いみたいですが、今回はテストさえできればいいので簡単に回避できる方法を取りました。

ただ、SSL認証エラーは解消しましたが、Google Chromeが立ち上がらないという別のエラーが発生しました。。。
こちらの解消については長くなってしまうので別記事にまとめます。
CCIE受験しました　1回目


今月、CCIE Enterprise Infrastructureのラボ試験を受けました。
結果は100点満点中、10点くらいでした。
合格まで遠すぎるfailで先は長いですが、いつか振り返ったときに懐かしく笑えたらいいなと書き残します。
試験内容は秘密なので、受験前に知りたかったことを中心に記載しました。

##
#### 受付
集合時間の15分ほど前に到着してしまいましたが、ロビーにソファーがあり座って待つことができました。
時間少し前に他の受験者の方が受付をしている声が聞こえたので、そちらに向かうとプロクターさんに英語で「CCIE受験？」のようなことを訊かれ、IDチェックと「お弁当はいる？」「初めて？」など質問されました。ゆっくり話してくれてジェスチャーも交えてくれるので、なんとか理解できてホッとしました。

#### 試験前
会場に向かう途中でトイレの場所やドアの開け方など、丁寧すぎるくらい丁寧に説明してくれました。
到着後は会場内の別室で試験について注意事項の説明を受けます。
プロクターさんはユーモアのあるおしゃれ紳士でした！

#### 環境
テストセンターと似ています。
キーボードは一般的なUSキーボードです。
画面操作については説明がありますが、独自のweb試験はけっこう戸惑いました。

緊張で説明があまり頭に入ってきませんので、事前にこちらを見ておくことをお勧めします。
CCIE Lab Live Demo

https://www.youtube.com/live/nnCOvEqBJws?feature=shared


--9/14追記--
コマンドを入力するターミナルも独自の画面です。
TeraTerm等と使用できるショートカットが違ってくるので、ciscoが提供するpractice labで事前に確認しておくといいかもしれません。

#### 試験
難しかったです。

用意されている水のみ持ち込むことができ、トイレは自由に行くことができました。
冷房で少し寒いので、薄めの上着があるといいと思います。

#### お昼
受験者は私を含めて2人でした。
試験内容以外は自由に会話していいということで、勇気をだして声をかけてみると話しやすい良い方でした。よかった！
身近にCCIE勉強中の友達がいないので嬉しかったです。

気になるお弁当は、おいしい鮭弁当でした。

#### 終了
終了した人から退室します。
最後30分くらいはあきらめて暗記に専念していました。


##
#### 感想
受験直後に0点だと思ったくらいできなかったです。

まず形式が理解できず、答え方がわからない..
終始ふわふわしていました。
「1回目の受験は早めに」と先人たちがおっしゃっていますが、本当にその通りだと痛感しました。初受験まで1年半も費やしたので、試験後はしばらく虚しかったです。

ただ、漠然とした不安は減りました。
1度受験したことで、「あ、ここ試験にでてたから丁寧にやっとこう」とか「ここはあまり深く問われなかったな」とか考えながら勉強できるようになりました。

#### 次回までに
全体的にDesignの視点とQoSの知識が足りないと感じました。
CCIE Enterprise Infrastructure FoundationのラボとINEのFinal Practiceのラボを何回も繰り返したことが裏目にでたかなと思います。もちろん、かなり有用な演習ですが、問題を覚えてしまって英文を読む機会が減っていました。

なので、これまで通りラボは繰り返しながら、英文を読んで要点を理解する練習をかねてcisco pressを何冊か読もうと考えています。

#### やることリスト
・End-to-End QoS Network Design 読む

https://a.co/d/cdb2kyA

・Optimal Routing Design 読む

https://amzn.asia/d/c03CwiP

・CCIE Enterprise Infrastructure Foundation　ラボ+解説まで丁寧に読む

https://amzn.asia/d/83kOKK1

・CCO丁寧に読む




今は早くもう1回受けたいです。
メンヘラなWebを作りました

# メンヘラなWebってなに
メンヘラムーブで身を滅ぼしたことはありますか？僕は最近あります。
Webでメンヘラムーブできないかと思ってこんなの作ってみました。



![menhera.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195673/496dd6d9-9834-c1bb-9732-a33c08782f4f.gif)



タブがアクティブになるとmeta titleが「🥰」になり、非アクティブになると「🥺」に変わります。
すみませんこれだけです。（すぐ謝罪するのはメンヘラの特徴です。）

# 技術解説


```javascript
document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        document.title='🥺🥺🥺🥺🥺🥺🥺🥺';
    } else {
        document.title='🥰🥰🥰🥰🥰🥰🥰🥰';
    }
});

```

[Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) というAPIがあり、`visibilitychange`イベントでタブのアクティブ / 非アクティブを検知することができます。

# 何に使える？
例えば`requestAnimationFrame`は、端末のパフォーマンスを下げないためにタブが非アクティブになると止まります。
今回の例のようにユーザーの注意を引くために遊びとして使うのも面白そうですが、本来はパフォーマンス目的に使うといいのかもしれません。

普段使っているサービスで言うと、YouTubeはブラウザを非アクティブにした際には画質が下がります。
内部実装はわからないですが`visibilitychange`イベントを使っているのでしょう。
audioを止めることも実装によってはできると思いますが、バックグラウンド再生も考えて止めないでくれているのはありがたいですね。

# まとめ
何かに執着して身を滅ぼさないよう気をつけてください。
あとmetaのtitleに絵文字って使えるんですね。
macのこの画面でこんな感じで出ててかわいかった。

![スクリーンショット 2024-09-13 0.17.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195673/28af4b67-6897-d134-c65a-c0a887dfa2be.png)
デベロッパーツールって便利だなぁ…

お疲れ様です。

今週はずっと自己紹介ページの編集をしておりますが、「なんでここの空白は埋められないんだろう…」という壁にぶち当たり、様々な要素にmarginやpaddingを書き足したりしておりましたが変化なし…
こういう時はGPT先生だろうと思い、質問してみましたが解決できず…

「どうしようかなー」と思い、ネットで検索したりしていたところ、F12キーで開けるコンソールのことを思い出し、何となく開いて、デベロッパーツールなるものにたどり着きました。

![09111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/db304a1b-611d-e091-8efc-cdf8dca90699.png)

デベロッパーツールを開き、「要素」を選択、自分がこれまで書いたHTMLのコードが、ページ上のどこにあたっているかを見ていきましたら…

あ　り　ま　し　た:sob::sob::sob:

画像にある「職歴」というh2タグと、その下にtableタグで囲った経歴の間に謎の空白があって悩んでいましたが、どうやらこの**pタグ**が原因のようです。

このpは、td（テーブルデータ）タグの中に書いてあったものです。
「pタグを書かないと改行されない」と思っていたからでしょうね…
この記事を書きながら、改めでtdタグ内のpタグの有無について調べると、2007年の「教えて！goo」の質問で答えが出ておりました！！

**そもそもtableタグは表なので、段落（pタグ）は必要ない**

おっしゃる通り！！うわー！！もっとtdタグについて調べればよかったなー！！！

![0911.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/2ee80bb0-5450-ce89-fff4-bcd542484b9d.png)
経歴が映り込んでしまうので、マーカーで塗りつぶしておりますが、pタグをすべて消し、tableタグに margin:40px を指定し、ほどよい間隔をあけることができました…

1つ1つ調べながらでないと、自分の思う「こうしたい！」が実現できない状況にありますが、その都度発見だったり勉強になることがあるので、ちゃんと調べて解決するのはとても大事だと痛感しました:relaxed:
大学共通テストにおける情報1の受験勉強法（高校2年生・高校3年生向けガイド）

## はじめに
大学共通テストで重要な科目の一つである「情報1」は、現代の情報社会において必要な知識と技術を試す科目です。そのため、しっかりとした準備が求められます。本論文では、高校2年生および高校3年生が理解できるように、効果的な勉強法を紹介します。

## 勉強の基本方針
情報1の勉強において重要なのは、以下の3つのポイントです。
・基礎知識の習得: コンピュータの基本操作やプログラミングの基礎をしっかりと身につけること。
・実践力の強化: 問題を解くことで実践的なスキルを向上させること。
・時間管理: 効率的に時間を使い、計画的に勉強を進めること。

## 具体的な勉強法
### 基礎知識の習得
まずは教科書や参考書を使って、情報1の基礎知識をしっかりと理解しましょう。特に重要なのは以下の項目です。
・コンピュータの基本構造: ハードウェアとソフトウェアの違い、主要な部品とその役割。
・プログラミングの基本: 代表的なプログラミング言語（例えばPythonやJavaScript）の基本構文とロジック。
・情報セキュリティ: ウイルスやハッキングの防止方法、個人情報の保護。

### 実践力の強化
基礎知識を身につけたら、実際に問題を解いてみましょう。過去問や模擬試験を活用することで、実践的なスキルを磨くことができます。以下のステップで進めると効果的です。
・過去問の分析: 過去の問題を解き、出題傾向を把握します。どのような問題が頻出するのかを理解しましょう。
・模擬試験の活用: 模擬試験を受けることで、試験本番の雰囲気に慣れておきましょう。時間配分や解答の流れを練習します。
・復習の徹底: 間違えた問題は必ず復習し、なぜ間違えたのかを理解します。同じミスを繰り返さないようにしましょう。

### 時間管理の重要性
効率的に勉強を進めるためには、時間管理が欠かせません。以下の方法を取り入れてみてください。
・スケジュールの作成: 1日の勉強時間を計画し、どの時間帯に何を勉強するかを決めます。無理のない範囲で予定を立てましょう。
・休憩の取り方: 長時間の勉強は集中力が続かないため、適度な休憩を取り入れます。ポモドーロ・テクニック（25分勉強して5分休憩）などが効果的です。
・進捗の確認: 定期的に自分の進捗を確認し、必要に応じてスケジュールを見直します。目標に向かって確実に進んでいるかをチェックしましょう。

## まとめ
情報1の勉強は、基礎知識をしっかりと身につけ、実践力を高め、時間管理を徹底することがポイントです。これらを踏まえて、計画的に勉強を進めていけば、大学共通テストで高得点を取ることができるでしょう。頑張ってください！
AngularエンジニアがReact,Next.jsを学び始めた話

こんにちは、私は現在フロントエンドエンジニアとして開発に勤しんでいます！
普段の業務ではAngularを用いて画面開発をしているのですが、Reactを学び始めることになりました。
今回はその経緯や実際に学び始めてみて気づいたことを書き綴ろうと思います。

## 経緯
### Angularとの出会い
私が配属されたフロントエンド部門ではAngularが採用されていました。
これが私とAngularの出会いです。

Angularはフルスタックのフレームワークであるため、最初に学ばなければならないことはReactやVue.jsと比較すると多いです。
ただ、フロントエンドエンジニアとして活動する上で必要な技術を一通り自然に触ることが可能です。
そのため、包括的なスキルを身につけるには適していると考えています。

そういった意味では、初心者にもおすすめできる技術だと思います。
個人的には最初のフレームワークがAngularでとても満足しています。


### Reactとの出会い
3年経った頃、ふと転職を考えるようになり、転職活動を始めました。
そこで初めて、Angularを採用している企業の少なさを知りました[^1]。
特に私が志望していたWeb系企業やスタートアップではReactが主流となっていることに気づきました。

Angularは間違いなく魅力的なフレームワークです。
一方で、将来的なキャリアを考えた時、AngularよりReactの開発経験の方が市場価値が高まりつつあるのではないかと感じました。
そのため、転職活動と並行してReactの学習を始めました。

[^1]: React,Vue.jsと比較すると少ないという意味です。Angularは大規模プロジェクトに向いているという特性から、日系の多くの大企業に採用されている気がします。

## AngularとReact,Next.jsを学び始めて気づいたこと

### フックってすごい！
`useState()`みたいなやつです。
関数コンポーネントで状態管理を容易に実現できる機能です。
以下のコードは実際に`useState()`を使ってみたコードです。
```jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初期値0の状態を宣言
  const handleClick = () => setCount(c => c + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
```

実はAngularでもSignalを使うことで、似たような状態管理が簡単にできます。
（もしくは外部ライブラリのRxjsの`BehaviorSubject()`でも可能）
```ts
// counter.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <h1>Count: {{ count() }}</h1>
      <button (click)="increment()">Increase Count</button>
    </div>
  `,
})
export class CounterComponent {
  // Signalを定義
  count = signal(0);

  // ボタンを押した際にカウントを増加
  increment() {
    this.count.update(this.count() + 1);
  }
}
```

ただ私が所属していた組織では、大規模プロジェクトを扱っていたため、アップデートには非常に慎重でした。
そのため、私が転職活動を始める頃にようやくAngular Signalsが正式に導入されたバージョンにアップデートされました。
故に、私は業務上でAngular Signalsを利用した経験はありません。

少し調べてみると、Reactで`useState()`のような関数コンポーネント向けのフックが追加されたのは2019年とのことです。（クラスコンポーネント向けだともっと前？）
5年も前からこのような機能を使えるようにしていたのは、すごいな〜と思いました。

### フォルダベースルーティングってすごい！
個人的には全然知らない技術だったので、これを知った時はとてもびっくりしました。

Angularでは、基本的にはコード単位でルーティングを定義することになります。
部分的なコードですがこのような感じ。
```ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];
```

一方Next.jsではApp Routerを用いることで、パスとコンポーネントの対応関係が`/app`配下のフォルダー階層によって決まります。
すなわち、フォルダー構成そのものがルーティング設定になります。

## 学習量
Angularはフルスタックなフレームワークであるため、React+Next.jsと比較すると学ばなければならない知識が非常に多いです。
また、メジャーアップデートが半年に1回されるので、新しい知識もどんどん吸収していかなければなりません。
もっというとマイナーアップデートでも多くの有用な新機能が追加されるので、それも吸収していかなければなりません。

ただ学ぶべき量は多いですが、バックエンドとの連携やビジネスロジックの実装といった幅広い技術を一通りカバーできます。
多くのスキルを一度に習得できるのはAngularの利点なのではないかなと考えます。

## 最後に
Reactを学び始めて、同じフロントエンド向けのフレームワークでも、ここまで書き方やアプローチが異なるのかと改めて感じました。
AngularとReactの違いについては、まだ深い部分まで理解しているわけではありません。
これからも学び続け、いつかはその違いを詳しく語れるようになりたいと思っています。
マイクロサービスの課題と解決を整理する

「マイクロサービスってあれでしょ？なんか細かくするやつでしょ？」の
極浅知識はまずいと思ったので、マイクロサービスについて整理をしていこうと思う。

理解の領域にいるかわからないので、あくまで整理。

# 目次
[1.マイクロサービスの概要とメリデメ](#1-マイクロサービスの概要とメリデメ)
[2.開発の課題解決](#2-開発の課題解決)
[3.運用・監視の課題解決](#2-運用・監視の課題解決)
[4.結論（主観）](#3-結論（主観）)

# 1. マイクロサービスの概要とメリデメ
### 概要
1つのアプリケーションを、ビジネス機能に沿った複数の小さいサービスの疎に結合された集合体として構成するサービス指向アーキテクチャの1種（※Wiki）

・マネジメント・経営の視点でいうと組織構成の分担の可視化
・開発の視点でいうと機能の分担の可視化

### メリット
・アプリケーションという巨大なものがどのようにできているのか分かりやすくなる
・可視化できると開発もマネジメントもホワイトボックスになって管理しやすい

### デメリット
・一本筋（モノリス）がいくつも分割（マイクロサービス）していくから、
マイクロサービスならではの開発や運用方法など色々課題が出てくる
・PJ全体でマイクロサービスを理解していないとネックな場面が頻発しそう

# 2. 開発の課題解決
①通信
　課題：分割間の通信の遅延、かつ担保
　解決：APIゲートウェイを使う。
 　　　　後は同期・非同期を考えてツールの選定をする。（RESTやメッセージブローカー）
     
②設計・実装
　課題：マイクロサービスの実現方法。モノリスの回避
　解決：DDDの理解。必要であればその他アーキテクチャ（クリーンアーキテクチャ等）
 
③テスト
　課題：分割された大量機能の担保を取らないといけない
　解決：自動化が必須
　　　　単体だとMockitoやJUnit
　　　　結合移行だとSeleniumやDocker、CircleCIなどがいいらしい
    
④セキュリティ
　課題：分割された機能に一つでもホールがあると危険
　解決：セキュリティの統一化。APIゲートウェイでアクセスの入口を作ったり
　　　　WAFやShieldを活用していく。
    
# 3. 運用・監視の課題解決
①運用
　課題：分割された機能毎によるリリース頻度増加
　解決：CI/CDの理解
　　　　CI：実装→コミット→マージ→自動ビルド→自動テスト
　　　　CD：CI＋デプロイ→リリース
　　　　ツール：Jenkins（オンプレ）、Github Actions
　　　　　　　　クラウドの利用（AWSだとCodePipelineなど）

②監視
　課題：障害発生時の特定が難しくなる場合がある
　解決：ログ・メトリクス・トレーシングを活用する
 
# 3. さいごに
インフラエンジニアじゃないけどクラウド（AWSなど）を学ぶ利点はかなり大きいことがわかった。
不透明な部分はまだまだあるので、各種深堀りをしていく必要があると感じた。
毒の沼地のつくり方（アレフガルド in マインクラフト Part10）

# はじめに
　[前回の投稿](https://qiita.com/yamamorisoba/items/5cd64a9de29b5bb743a0)から、だいぶん間が空いてしまいました。ドムドーラとメルキドの間をつなぐ地域の地形データを測量していたのですが、思いのほか広大でまだマップ生成に至っていないという状況です。測量の休憩がてら、毒の沼地を疑似的に再現する方法を思いついたので、今回はそちらを紹介したいと思います。

 # 毒の沼地
 　ドラゴンクエストにおける毒の沼地は、一歩進むごとに小ダメージ（HP2相当）を受けるという地形です。マインクラフトでは、歩数に応じたダメージを計算することは難しいので、特定のブロックの上にいることを条件として時間経過でダメージを受ける形で毒の沼地を実装しようと思います。
　マインクラフトにおいて、上にいることでダメージを受けるブロックとしては、「マグマブロック」があります。ただ、赤く発光する外観が沼地っぽくないことと、スニークすることでダメージ回避ができるため、毒の沼地を実装するブロックとしては採用を見送ります。
　今回は外観的に毒の沼地に近い「泥」ブロックを採用し、泥ブロックの上にプレイヤーがいる時に定期的にダメージを受ける仕組みを実現したいと思います。

 # 条件判定
 　プレイヤーが毒の沼地の上にいるかどうかを確認する方法として、`testforblock`を使います。このコマンドは、指定した領域にあるブロックを判定するコマンドです。プレイヤーが毒の沼地=泥ブロックにいるかどうかは、プレイヤーの一つ下のブロックが泥ブロックかどうかをこのコマンドで判定することで確認できます。判定のためのコマンドは以下のようになります。
  ```
  /testforblock ~ ~-1 ~ mud
  ```
　このコマンドは、プレイヤーの一つ下のブロックが泥のときに真となります。

 # 判定の定期実行
 　前節で上げた判定コマンドを定期実行させるためには、リピートのコマンドブロックを使います。ただし、コマンドブロックに前節のコマンドをそのまま投入すると、~ ~-1 ~の相対位置判定がコマンドブロックの位置を基準に実行されてしまうため、プレイヤーの現在地を基準に判定されるよう、以下のようにコマンドを改修する必要があります。
  ```
  /execute as @p at @p run testforblock ~ ~-1 ~ mud
  ```

　executeコマンドで実行対象と実行位置を@p（コマンドブロック最寄りのプレイヤー）とすることで、プレイヤーの位置を基準に泥ブロックの上にいるかどうかを判定することができるようになります。

# ダメージ付与
　プレイヤーへのダメージ付与には、`effect`コマンドのinstant_damageを利用します。以下のコマンドを実行することで、プレイヤーにハート1.5個分のダメージを与えられます。
 ```
 /effect @p instant_damage 1 0
 ```
　前節で挙げたリピートのコマンドブロックに、チェーンのコマンドブロックをつなぎ、上記コマンドを設定することで、位置判定を繰り返すたびにプレイヤーにダメージを与えることができるようになります。

# お試し動画
　実際にコマンドブロックを実装してみた動画が以下となります。今回は、メルキドの南に広がる毒の沼地エリアにコマンドブロックを置き効果を発動させてみました。泥ブロックの上にいる時には定期的にダメージが発生し、別のブロックに退避した時にはダメージが発生しなくなっていることがわかると思います。

<iframe width="560" height="315" src="https://www.youtube.com/embed/XpBhbCQbB1g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# おわりに
　今回は、testforblockとeffectの組み合わせで、特定のブロックの上にいる時に、定期的にダメージが発生する仕組みを実装し、毒の沼地を再現しました。ロトのよろいの効果でこのダメージを無効化するには、ロトのよろいを装備しているかどうかの判定ロジックを用意し、今回の仕組みで使っているリピートのコマンドブロックへの動力供給を判定結果に応じてオンオフするような仕組みを作れば実現できそうです。
 　しばらくは、地道な測量が続くと思いますので、測量の合間に実装してみたいと思います。


# おまけ
これまでの投稿をまとめておきます。
 |No.|内容|
 |:--:|:--|
 |Part1|[マインクラフトでの地形生成](https://qiita.com/yamamorisoba/items/a8736bfe8acb802dd2ae)|
 |Part2|[町の再現①](https://qiita.com/yamamorisoba/items/5e059388ac9db6037fb2)|
 |Part3|[メルキド as Code](https://qiita.com/yamamorisoba/items/26905b328cff581102d0)|
 |Part4|[住民との会話システム](https://qiita.com/yamamorisoba/items/fdd1dfdc42510e64af5a)|
 |Part5|[海と森の生成](https://qiita.com/yamamorisoba/items/f27bc50be589953ce696)|
 |Part6|[森の生成方法の改良](https://qiita.com/yamamorisoba/items/2e6fb100b4ed73d77a27)|
 |Part7|[ドムドーラ地方の生成](https://qiita.com/yamamorisoba/items/1d059817551834c3d14f)|
 |Part8|[ドムドーラの町づくり](https://qiita.com/yamamorisoba/items/dc8f73cef64785c97471)|
 |Part9|[マイクラ版ロト装備の検討](https://qiita.com/yamamorisoba/items/5cd64a9de29b5bb743a0)|
DockerをAPIやSDKで操作できるようにする

# DockerをAPIやSDKで操作できるようにする

※Dockerのアップデートで設定がデフォルトに戻るため注意してください

https://takuya-1st.hatenablog.jp/entry/2021/05/31/142017



```
sudo vim /lib/systemd/system/docker.service
```

該当サービスの ExecStartに -H tcp://0.0.0.0:2375 を追記する。

```
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock -H tcp://0.0.0.0:2375
```

systemd をリロードして docker を再起動する

```
sudo systemctl daemon-reload
sudo systemctl restart docker
```

これでTCP経由で接続ができる。
入力履歴を残さず社内プロキシを乗り越える

# プロキシ認証するには

Ubuntuでは環境変数にユーザー名とパスワードを記述する必要がある。

以下を設定するとプロキシ経由で外に行けます。
```sh
export http_proxy="<ユーザー名>:<パスワード>@proxy.hoge.com:port/"
export https_proxy="<ユーザー名>:<パスワード>@proxy.hoge.com:port/"
```
しかし、この設定だとパスワードを平文で保存してしまうのであんまりよくない。（共有のターミナルの場合、`printenv`コマンドですぐにユーザー名とパスワードを見れてしまう）

下記のシェルスクリプトを使って以下のコマンドを入力すれば、

```sh
sudo -i
./xxx.sh <コマンド>
```
とすればプロンプト上でユーザー名とパスワードを入力するのでよりセキュア（なはず）。

```sh:xxx.sh
unset password
unset name
prompt="Enter name:"
while IFS= read -p "$prompt" -r -n 1 char
do
    if [[ $char == $'\0' ]]
    then
        break
    fi
    prompt=""
    name+="$char"
done
prompt="Enter Password:"
while IFS= read -p "$prompt" -r -s -n 1 char
do
    if [[ $char == $'\0' ]]
    then
        break
    fi
    prompt='*'
    password+="$char"
done

function urlencode() {
    # urlencode <string>
    local length="${#1}"
    for (( i = 0; i < length; i++ )); do
        local c="${1:i:1}"
        case $c in
            [a-zA-Z0-9.~_-]) printf "$c" ;;
            *) printf '%%%02X' "'$c"
        esac
    done
}

encoded_name=$(urlencode $name)
encoded_pw=$(urlencode $password)

http_proxypath="http://$encoded_name:$encoded_pw@proxy.hoge.com:port/"
https_proxypath="http://$encoded_name:$encoded_pw@proxy.hoge.com:port/"

export http_proxy=$http_proxypath
export https_proxy=$https_proxypath

exec "$@"

unset http_proxy
unset https_proxy
```
Elasticsearchがデータを取り込んでくれなくなったとき

# elasticsearchがデータを取り込んでくれなくなった


fluentdのelasticプラグインがエラーを吐いていた
詳細を見るにはfluentd側に以下を追加する必要があった
```
log_es_400_reason true
```

こんなエラーが出てた
```
Validation Failed: 1: this action would add [2] shards, but this cluster currently has [1000]/[1000] maximum normal shards open
```

どうやらelasticsearchのshardsがいっぱいになってたらしい
↓を参考にshardsの容量を変更

https://note.classact.co.jp/62ab05a5aaaf78236858f7a3#cluster.max_shards_per_node%20%E3%81%AE%E8%A8%AD%E5%AE%9A%E5%A4%89%E6%9B%B4

1000→10000にした
```
curl -X PUT -u user:password localhost:9200/_cluster/settings -H "Content-Type: application/json" -d '{ "persistent": { "cluster.max_shards_per_node": "10000" } }'
```
axiosでCSRF対策

# axiosでCSRF対策

色々やったがまた403出るようになったので備忘録

ヘッダにX-CSRFTOKENとCookieにcsrftokenを追加してあげると回避できた
axiosじゃない場合はわからん

```js:example
    deleteLog: function(id){
      const config = {
        responseType: "application/json",
      };
      const url = "hoge";
      axios.defaults.xsrfCookieName = 'csrftoken' //CSRF対策
      axios.defaults.xsrfHeaderName = "X-CSRFTOKEN" // CSRF対策
      const res = axios
        .post(url,
        {},
        config)
        .then((res) => {
          // 処理
        })
        .catch((e) => {
          console.error(e);
        });
    },
```
仮想マシンにWindows11を追加する方法

# 推奨手順

マシン作成時にTPMを追加する
ハードディスクは多めに設定しておいたほうがよさげ（Win11の推奨動作要件参照）

vSphere環境の場合、キープロバイダを作成しておくとTPMが選べるようになる。


## 初回セットアップ時

マイクロソフトアカウントを求められる。

1. ネットワークを切断する
1. `Shift`+`F10`でコマンドプロンプト起動
    ```
    oobe\BypassNRO.cmd
    ```
1. 再起動するのでそのままインストールを続行する


# 非推奨手順

以下はTPM設定しない場合の手順。

## インストール時

インストールメディアを起動して、`Shift`+`F10`でコマンドプロンプト起動
```
regedit
```
でレジストリエディタ起動

レジストリHKEY_LOCAL_MACHINE\SYSTEM\Setupに「LabConfig」キーを作成、「BypassTPMCheck」をDWORDで作成、値=1として登録する

これでTPMなしでインストールできる
【MySQL】dockerコンテナにレストア時「ERROR 1064 (42000) at line 1」エラーになった場合の解決方法

# 概要

Dockerで立ち上がっているmysqlコンテナのバックアップファイルを使ってレストアしようとしたら以下のエラーになりました。

```
$ docker exec -i mysql-container mysql -u root -p < backup.sql
```


>  [Warning] Using a password on the command line interface can be insecure. ERROR 1064 (42000) at line 1: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'mysqldump: [Warning] Using a password on the command line interface can be insec' at line 1

こちらの原因と解決方法を紹介します。

# 原因と解決方法
エラーは`backup.sql`ファイルに、`mysqldump`コマンドの出力に警告メッセージが含まれているため。具体的には、dumpファイルを取得する際にパスワードをコマンドラインに直打ちしていたため、そのメッセージが含まれているのです。


`backup.sql`ファイルからこのメッセージを削除することでエラーは出なくなります。

以下のコマンドにより削除できます。

```
sed -i '' '/^mysqldump:/d' backup.sql
```

ちなみに

```
sed -i '/^mysqldump:/d' backup.sql
```

と実施すると

```
sed: 1: "backup.sql": undefined label 'ackup.sql'
```

というエラーになりました。
`sed`コマンドには`-i`オプションを使用する際に拡張子を指定する必要があるためです。
上記では空の文字列（拡張子）を指定しています。

参考：

https://qiita.com/blackenedgold/items/3231c8adec40b350cf33

今回はローカル環境のdockerで触るだけだったので上記で対応しました。
dumpファイルを取得する際にコマンドラインでパスワードを打たないようにすれば、そもそもこのエラーは出なくなります。以下ご参考ください。

https://selay.hatenablog.com/entry/2016/12/22/231313
【React】onClick内の関数の書き方の違い

結論：**ほとんど違いはなし**

buttonタグ内にある`onClick`の書き方はどちらでも可

違いとしては

- `onClick={handleClick}`の書き方の場合
  - コンポーネントが再レンダリングされても関数は再生成されない
- `onClick={() => handleClick()}`の書き方の場合<br>
  - コンポーネントが再レンダリングされる度にアロー関数が再生成される

基本は前者の書き方で、引数を受け取りたい場合は後者の書き方がよい

```tsx
const handleClick = () => {
  console.log("clicked")
}

return (
  <div>
    <button>
      // 下記はどちらでも可
      onClick={handleClick}
      onClick={() => handleClick()}
    >
      hgoe
    </button>
  </div>
```

## 追記(2024/10/20)
`map`でループなどしている場合は、前者の書き方だとそこを通る度に関数が実行されてしまう
下記の場合、alertでidが1, 2, 3...とループで表示されてしまう
```tsx
const onClickDelete = (id) => {
  alert(id);
}

{todos.map((todo) => (
  <li key={todo.id}>
    <p>{todo.text}</p>
    <button onClick={onClickDelete(todo.id)}>削除</button>
  </li>
))}
```

そのため、アロー関数型で書く
```diff_tsx
- <button onClick={onClickDelete(todo.id)}>削除</button>
+ <button onClick={() => onClickDelete(todo.id)}>削除</button>
```

### 参考
- [【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 58. タスクの削除機能 | Udemy](https://www.udemy.com/course/modern_javascipt_react_beginner/learn/lecture/40838792#overview)
Q. UIをCanvasの子要素から外したら見えなくなった。位置を調整しても見えない　A. Canvasのなかに入れてください

## 不具合の内容

Canvas0とCanvas1がある。

Canvas0はSort Orderが0
Canvas1はSort Orderが1
である。

Canvas0のなかに入れていた要素をcanvas1のUIより上に表示したくなったので
Canvas0から外したら、見えなくなってしまった。
位置を調整しても見えない。

## 解決方法

UIはCanvasの外に配置すると見えなくなるので、
Canvas1の中の下の方に配置する。

## 詳細

見えなくなるだけで、スクリプトは実行される。
非アクティブ状態ではない。
ただし、操作はできず、視覚的なインタラクションは不能となる。

UIのGameObjectとそれ以外のGameObjectは
レンダリング方法（画面への描画方法）が異なる。

UIはCanvasの子になることで
はじめて描画される。

ちなみUIである必要十分条件はRect Transformを持つことである。
## 追加の疑問

Q. 
Canvasを分けるか
同じCanvasにいれるかどっちがいい？

A. 
独立した機能なら分ける、
関連した機能なら分けない。

別々に動的な表示・非表示をさせたいなら分ける、
同時にさせたいなら分けない。


Q. 
UIの「Panel」ってどう使うの？

A. 
UI版の空のGameObject。
(UI以外の)GameObjectをまとめる時の
空のGameObjectと同じノリで使えばいい。
Imageコンポーネントで背景をつけられたりと、
完全に空ではないけど。

ちなみにヒエラルキータブ内のものは
シーンを除いてすべてGameObject。

## 今日のだいじなポイント

UIはCanvas（＝Canvasコンポーネントを持つGameObject）
の子要素にすることではじめて描画される。

==
コメント歓迎です。
ご指摘をいただけるとうれしいです！
EC2内のファイルをローカルPCにコピーする方法

# はじめに
Amazon Linux2のEOLに伴ってLinux2023移行時にEC2上のファイルをローカルに保存する機会があったので備忘録に記事を書きます。

ファイルに転送にはLinuxの`scp`コマンドを使用します。

# scp（Secure Copy Protocol）コマンドとは
SSH（Secure Shell）を利用してファイルやディレクトリを安全にリモートホスト間でコピーするためのコマンド。
scpコマンドは、ファイルを1台のコンピュータから別のコンピュータに転送する際、通信を暗号化して安全性を高める役割を果たします。

# コマンドの基本構成
```
scp [オプション] コピー元パス 保存先パス
```

# EC2からローカルにファイルをコピーする
```
scp -i [sshキーへのパス] ec2-user@[サーバのホスト名またはIPアドレス]:[コピー元パス] [ローカルPCの保存先パス]
```

::: note
-iはSSHキーを指定して接続する。オプションです。
:::

# その他オプション
`-P`: SSHで使用するポート番号を指定する（デフォルトは22）。
```
scp -P 2222 /path/to/file username@remote_host:/path/to/directory/
```
`-r`: ディレクトリ全体を再帰的にコピーする。
```
scp -r /path/to/local/dir username@remote_host:/path/to/remote/dir
```
stackblitzで、Open Preview in New Tabを開いて、プレビューを別画面に表示できない

# はじめに
stackblitzで、Open Preview in New Tabを開いて、プレビューを別画面に表示できない

# 問題
stackblitzで開発
右のプレビューでは狭いので、Open Preview in New Tabを開いて、プレビューを別画面に表示したい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/512f32e9-36ad-f0ab-b1fb-c0ac66c0c883.png)

開くと何も表示されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/1c6268e8-47b7-fba3-c697-eac3344e7e08.png)

デブツールを見ても要素が明らかに異なる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/16c26dcd-5298-31e9-a61e-22a549deca12.png)

# 解決方法
chromeがポップアップをブロックしていたのが原因だった様子
URLの「ポップアップがブロックされました」の箇所をクリックし、ポップアップとリダイレクトを常に許可するにチェックを押下する
※自分の画面では、「ポップアップがブロックされました」がなかったように思われるが、もし同じ事象に遭遇したら、chromeの機能によるブロックの可能性があるのでチェックしてみてください

順番は前後するが、「Connect to Project」を押したのも、事象解決につながったかもしれない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/e7fc85cd-01ff-52c2-1672-41bf2231554d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/d253b943-c205-9da4-7f18-c1fac24182b1.png)

# おわりに
単純なことだが、なぜ別画面で開けないかわからないまま、
右側のプレビュー画面でがんばって開発を続けてしまった。
chrome側が悪さしていることも考慮するようにする。

# 参考
stackblitzのドキュメントもあった
https://developer.stackblitz.com/platform/webcontainers/browser-config
stackblitzでGoogle Chromeデベロッパーツールがおかしくなる

# はじめに
stackblitzでGoogle Chromeデベロッパーツールがおかしくなる

# 問題
stackblitzで開発している時に、Google Chromeデベロッパーツールがおかしくなる


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/940aace5-da89-a418-1c0b-e872c2c8dc85.png)

開発しているのはhtml,css,JavaScriptのみなのに、見知らぬタグがたくさん出てくる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/e07748c8-3765-a50c-da76-86c921d75f53.png)

調べたい箇所の該当要素がない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/d5788eb7-bcaf-3f6a-fcd0-1a16862084eb.png)

# 解決方法
Google Chromeデベロッパーツールの、要素選択ツール（Elements Picker）(左上の矢印)をシングルクリックして、該当要素をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/6c09376e-374c-7556-440c-c3a65019ba5f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/5eda243a-fc2b-30f1-9f2d-f2b9f4f9f0d6.png)

すると、デベロッパーツールで該当する箇所が開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/fa38af9a-95a4-62d5-c7f3-133ba18b8721.png)

原因は、開発している環境も含めてデベロッパーツールの要素に表示されてしまっているためのようだった

# おわりに
見覚えのない要素がたくさん表示されていて混乱したが、よく考えてみるとシンプルなことだった

# 参考
特になし
Llama-3-ELYZA-JP-8BをWSL2 docker で動かすメモ

たんなるメモ

```bash
$ docker pull ollama/ollama
$ mkdir work
$ cd work
$ wget https://huggingface.co/elyza/Llama-3-ELYZA-JP-8B-GGUF/resolve/main/Llama-3-ELYZA-JP-8B-q4_k_m.gguf
$ cat << EOF > Modelfile
FROM ./Llama-3-ELYZA-JP-8B-q4_k_m.gguf
TEMPLATE """{{ if .System }}
system


{{ .System }}
{{ end }}{{ if .Prompt }}
user


{{ .Prompt }}
{{ end }}
assistant


{{ .Response }}
"""
PARAMETER stop "
"
PARAMETER stop "
"
PARAMETER stop "
"
PARAMETER stop "<|reserved_special_token"
EOF
$ cd ../
$ docker run -d -v $(pwd)/ollama:/root/.ollama -v $(pwd)/work:/root/work -p 11434:11434 --name ollama ollama/ollama
$ docker exec -it ollama ollama create elyza:jp8b -f /root/work/Modelfile
$ docker exec -it ollama ollama run elyza:jp8b
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/d45c3b53-badb-8172-c167-fbd9f7d61403.png)

```bash
$ docker stop ollama && docker rm ollama
```
【プログラミング初心者】0から始めるReact学習 #7 ~Web開発の基本編~

# 1-3. 課題1
## 9月9日
[ロードマップ](https://qiita.com/Sicut_study/items/7d8c6f309dddda1a3961#1-1-%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88)にある「[はじめに](https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B)」のリンクに飛び、Viteをインストールしようと試みました。
コマンドプロンプトを開き、以下のコードを打ちこんでみます。
~~~
npm create vite@latest
~~~
すると、なんと警告が出ました（笑）
![error2_npm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/7dfcf6d5-8d48-5224-8d2c-9c6b8e44db96.png)

静かに焦りましたが、なぜ警告が出たのか考えていると
~~~ruby:互換性について
Vite は Node.js 18+ または 20+ のバージョンが必要です。
ただし、一部のテンプレートではそれ以上のバージョンの Node.js を必要としますので、
パッケージマネージャーが警告を出した場合はアップグレードしてください。
~~~
きちんと注意書きが記載されておりました。

なので、まずはnodeをインストールしていきます。
インストール方法は[こちら](https://musashino-blog.com/nodeinst/)のサイトを参考にしました。

nodeのインストールが完了後、VScodeを立ち上げて「ターミナル」を開きました。
（先ほどはコマンドプロンプトを開きましたが、過去に友人とReactを勉強しようとした際にVScodeからインストールしていた気がしたので、記憶を頼りに試してみました。）

ターミナルへ先ほどのコードを打ち込み、画面表示に従っていくと無事にViteプロジェクトを作成できました。

ここからは"vite-project"を探し出し、VScodeで開いて「Hello World」を表示させました。
![HelloWorld.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/bb4ed35b-613a-293c-cf3a-cc3cb17dda36.png)
正しくできているか分からない中やっていったので、
1時間ほどかかってしまいましたが何とか表示させるまで辿り着きました。

本日はもう24時も近いので
>□タイトル「学習記録一覧」を見ることができる

までで終わります。

### まとめ
明日からは、ようやくアプリの作成に入れます。
今日のように苦戦する気配がありますが挫けず頑張ります（笑）
おやすみなさい！