OmniAICreator/Qiita-1.07M huggingface dataset:
【単発】Next.jsでも動作するuseHashフック

## なんで？
最初はreact-useを使っていたが`window is not defined`と出るのがうざすぎて自作するに至った
もしかしたらもっといい方法があるかもしれないけど一応供養

## コード

```ts
import { useSyncExternalStore } from "react";

export default function useHash(): [string, (newHash: string) => void] {
  const hash = useSyncExternalStore(
    (callback) => {
      const listener = () => {
        callback();
      };
      window.addEventListener("hashchange", listener);
      return () => {
        window.removeEventListener("hashchange", listener);
      };
    },
    () => window.location.hash,
    () => ""
  );
  const setHash = (newHash: string) => {
    if (!window) return;
    window.location.hash = newHash;
  };
  return [hash, setHash];
}
```
ターミナルからtesseractコマンドでocrする


# 概要

先日、ocr（光学文字認識）したいなと思っていたところ、`tesseract`コマンドが使えることを耳にして使ってみたいと考えた。

https://pyimagesearch.com/2021/11/15/tesseract-page-segmentation-modes-psms-explained-how-to-improve-your-ocr-accuracy/


# 使ってみる

以下のような、`1234567890`が書かれたpng画像を入力して、期待通りの数値を出力できるかどうかチェックする。

![tesseract_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/197a7229-289b-b643-a7b5-3bb5229869fc.png)

コマンド

> 参考：https://pyimagesearch.com/2021/11/15/tesseract-page-segmentation-modes-psms-explained-how-to-improve-your-ocr-accuracy/

`tesseract_test.png: 上記の画像を現在のディレクトリに保管したもの`
```
$ tesseract tesseract_test.png output -l eng txt

Warning: Invalid resolution 54 dpi. Using 70 instead.
Estimating resolution as 681
```

`output.txt`に結果が出力されていた。結果は正しそうにみえる。

```
cat output.txt
1234567890
```

# python版もあるらしい

python版もあるらしい

https://qiita.com/ku_a_i/items/93fdbd75edacb34ec610

https://hituji-ws.com/code/python/tesseract-ocr/

基本的にはtesseractコマンドと同様に思われるが、こちらはアルゴリズムのMode選択が可能らしい。
OCRしたい文字のフォーマットによってはこちらの方が精度が高くなるのかもしれない。

オプション（python版のtesseractの場合）

> Mode 0: Orientation and script detection (OSD) only.
>このモードは、テキストの向き（回転など）やスクリプト（ラテン文字、キリル文字など）を検出するだけで、OCR自体は行いません。
>Mode 1: Automatic page segmentation with OSD.
>Tesseractは、ページ全体を自動的にブロックに分割し、向きやスクリプトを認識した上でOCRを実行します。
>Mode 2: Automatic page segmentation, but no OSD, or OCR. (not implemented)
>このモードはTesseractに存在しますが、実装されていません。
>Mode 3: Fully automatic page segmentation, but no OSD. (Default)
>ページ全体を自動的にブロックに分割しますが、向きやスクリプトの認識は行わず、OCRのみを実行します。これがデフォルトのモードです。
>Mode 4: Assume a single column of text of variable sizes.
>画像が単一の列で、異なるサイズのテキストが含まれていると仮定して処理します。
>Mode 5: Assume a single uniform block of vertically aligned text.
>画像が一つの均一なブロックで、垂直に整列したテキストが含まれていると仮定して処理します。列形式のテキストに適しています。
>Mode 6: Assume a single uniform block of text.
>画像全体が均一なフォーマットのテキストブロックであると仮定します。シンプルな文書に適しています。
>Mode 7: Treat the image as a single text line.
>画像が単一のテキスト行であると仮定して処理します。バナーや横長のテキストに適しています。
>Mode 8: Treat the image as a single word.
>画像が単一の単語のみを含むと仮定して処理します。個別の単語や短いフレーズを認識する場合に適しています。
>Mode 9: Treat the image as a single word in a circle.
>画像が円形に配置された単一の単語を含むと仮定して処理します（例: 円形ロゴやスタンプ）。
>Mode 10: Treat the image as a single character.
>画像が単一の文字のみを含むと仮定して処理します。単一の数字、文字、または記号を認識する場合に適しています。
>Mode 11: Sparse text. Find as much text as possible in no particular order.
>
>テキストが画像全体に散在している場合に、そのテキストをできるだけ多く見つけようとします。テキストがばらばらに配置されている画像に適しています。
>Mode 12: Sparse text with OSD.
>Mode 11と似ていますが、こちらはテキストの向きやスクリプトの認識も行います。
>Mode 13: Raw line. Treat the image as a single text line, bypassing hacks that are Tesseract-specific.
画像が生のテキスト行を含むと仮定して、Tesseractが通常行う調整や「ハック」を無視して処理します。


# 参考
https://qiita.com/ku_a_i/items/93fdbd75edacb34ec610

https://hituji-ws.com/code/python/tesseract-ocr/

https://qiita.com/seigot/items/7d424000c8d35e5146e4
MacのSafariの、古い独自開発の拡張機能が消えないときに試すコマンド

Safari側では拡張機能のチェックを外してから、

かつ、Xcodeで
Product > Clean Built Folder
で、ビルドしたもの一式を消してから、

### ①ファイルを丸ごと消す
```bash
rm -rf ~/Library/Safari/Extensions/YourExtensionName Extension.safariextz
```

### ②システムを再インデックス化する
```bash
/System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -f -R /Applications/Safari.app
```
フェッチについて

# SourceTreeで　failed to push some refs ~ と出た時の対処法

作業開始時にプルをして、プッシュするときにこのエラーが出た。

## やったこと
フェッチをしてから再度プルした。

## わかったこと
調べたらたくさん出てきたので書いておきます。

SourceTreeで　failed to push some refs〜のエラーが出る

### 原因①　リモートブランチに先に誰かの変更が入っている
→プルするとローカルにリモートの変更がマージされるのでプッシュできるようになる

運用ルールに沿って変更を反映するには以下の手順でやり直し

1. フェッチ->SoureTereeでローカルブランチとリモートブランチが枝分かれした状態が見えるようになる
2. ローカルブランチから作業用ブランチを作成
3. ローカルブランチをチェックアウト
4. ローカルブランチを枝分かれする前のコミットまで巻き戻す
5. プル->枝分かれが解消
6. 作業用ブランチをチェックアウト
7. 作業用ブランチをプッシュ->プルリクエスト

### 原因② 一度コミットした変更を上書きコミットで変更した
→そもそも一度プッシュしたコミットは変更してはいけない
→自分しかブランチを見ていなければ、こっそりリモートブランチを削除してプッシュし直しても平気

誰かに見られている場合は以下の手順でやり直し

1. SourceTreeで見るとローカルブランチとリモートブランチが枝分かれした状態になっている
2. ローカルブランチを枝分かれする前のコミットまでまで巻き戻す
3. プル->枝分かれが解消
4. 変更を追加コミット->プッシュ

## 最後に
何はともあれ私の場合はフェッチしてからプッシュしたらちゃんとリモートにプッシュされていました。
Vue3とFirestoreを使って、簡単なゲームを作成してみた

今度参加するハッカソンでVue3とFirestoreを使うことになったので、練習がてら簡単なゲームを作成してみました。
ゲームの内容は訪問者全員が同じ数字を操作するカウンターゲームです。プラスボタンを押すと数字がインクリメントされ、マイナスボタンを押すと数字がデクリメントされ、リセットボタンを押すと0に戻るようなもを、自分が操作すると他の人の画面にも反映され、同じように他の人が操作した内容がリアルタイムに反映される双方向通信ができるゲームです。
## 読んで欲しい人
* Vue3とFirestoreを知ってはいるが、使ったことがなくて興味がある人
* Vue3とFirestoreを知っていて、使ってみたい人
## 事前準備
* プロジェクトを作成して、`firebase init`
* Firestoreでcounterコレクションのnumberというnumberタイプのフィールドを持ったドキュメントを作成
* Vue3のセットアップ
* CounterGame.vueという名のコンポーネントを作成し、App.vueファイルで読み込む
## 作成手順
### まずはファイル内で使用する関数をインポートします。
```CounterGame.vue
<script setup>
import {
  getFirestore,
  getDocs,
  collection,
  onSnapshot,
  doc,
  setDoc
} from 'firebase/firestore'
import { getApp } from 'firebase/app'
import { onMounted, ref } from 'vue'
<script>
```

### Firestoreにある数字のコレクションを画面に表示させます。
```CounterGame.vue
<script setup>
const db = getFirestore(getApp())
const num = null

onMounted(() => {
  getDocs(collection(db, 'counter')).then((snapshot) => {
    snapshot.forEach((counterNumber) => {
      num.value = counterNumber.data().number
    })
  })
})
</script>

<template>
    <span>{{ num }}</span>
</template>
```

### プラスすると、Firestoreの数字のコレクションと表示している数字をインクリメントするようにします。
#### Firestoreの数字のコレクションをインクリメントします。
```CounterGame.vue
<script setup>
  const increment = async () => {
    await setDoc(doc(db, 'counter', 'counterNumber'), {
      number: ++num.value
  })
}
</sctipt>
<template>
  <button @click="increment">+</button>
</template>
```
#### プラスした時に、画面の値が即座に切り替わるようにします。
```diff_vue
<script setup>
- const num = null
+ const num = ref()
</script>
```

#### プラスした時に他のユーザにも数字がリアルタイムに反映されるようにします。
```CounterGame.vue
<script setup>
  // データの変更があった時に、numに再代入する
  onMounted(() => {
    onSnapshot(collection(db, 'counter'), (snapshot) => {
      console.log('snapshot', num.value)
      snapshot.forEach((counterNumber) => {
        num.value = counterNumber.data().number
      })
    })
  })
<script setup>
```

#### マイナスとリセットボタンも同じ要領で作成します。
```CounterGame.vue
<script setup>
  const decrement = async () => {
    await setDoc(doc(db, 'counter', 'counterNumber'), {
      number: --num.value
    })
  }

  const reset = async () => {
    await setDoc(doc(db, 'counter', 'counterNumber'), {
      number: 0
    })
  }
</script>

<template>
  <button @click="decrement">-</button>
  <button @click="reset">reset</button>
</template>
```

#### 出来上がり⭐️

## 最後に
実際に自分は作ってみて、Vue3とFirestoreを使うとこのコードの記述量で双方向通信、非同期処理が可能になるのに感動しました。まだまだVue3やFirestoreの知識が足りないので、頑張って勉強したいと思います。
AZ-104試験合格体験記　複数回受けたので反省とともに


# AZ-104試験合格体験記

今回は、Microsoft Azureの資格試験であるAZ-104に合格した体験をシェアします。正直に言って、私は一発で合格できなかったんですが、その分いろいろな経験ができたので、そのあたりを中心に書いていこうと思います。勉強法については、もっとスムーズに合格できた人たちの話が参考になると思うので、今回は試験に際して気を付けたことや複数回受けたからこそわかったことを中心にまとめます。

## 試験受験の経緯

全ての受験はテストセンターで行いました。

### なぜテストセンターで受けたのか？

- **利便性**：家から近く、移動がそこまで面倒ではなかった。
- **環境設定**：自宅での受験環境を整えるのが面倒だった。
- **安心感**：PCやネットワークのトラブルが少ない環境で受験したかった。

## 受験時に注意すべきこと

1. **残り時間のカウントに注意**  
   試験中に残り時間が秒単位で表示されるんですが、これが結構リズムが変で見ていると気が散ることがあります。なので、あまり気にせず問題に集中するのが吉です。

2. **PCの不調時の対策**  
   私は合計で２回PCの不調でスタッフを呼びました。特に選択肢がスクロールしても見えないという問題が発生しました。今までのテストセンターで受験する系の時に呼んだことがなかったのでちょっと躊躇ってしまったのですが、こういった場合、迷わずスタッフの方を呼んで相談するのが正解です。後ほど気がついたのですが、問題に対して「後で見返す」チェックをつけた際に起きやすいかもしれないです。「後で見返す」チェックを外せば正常に戻ったかもしれないのですが、当時はそこまで思い至りませんでした。。。

3. **暑さ・寒さ対策**  
   夏場に受験したため、クーラーが強めにかかっていて寒かったです。テストセンターまで歩いて行って暑くなっている時に半袖のまま試験室に入ると後悔することになります・・。試験は長丁場になるので、温度調節しやすい服装で行くことをお勧めします。

## 複数回受験の経験から学んだこと

### 同じ問題が出るのか？

複数回受験していると同じ問題が出てくることがありました。同じケーススタディの内容が出たこともありました。膨大な問題から重複しないように出題されると思っていたので、これにはちょっと驚きました。

### 意外な出題

**Azure Bastionの問題**  
  意外とAzure Bastionに関する問題が多かったです。初見の時は「Azure Bastion＝踏み台サーバー」くらいしか知らず、具体的な構築について問われて困惑しました。参考書にはあまり詳しく書かれていなかったので、最近注目されているのかもしれません。

### なんか無駄に複雑そうな問題の対処
ケーススタディでもないのにやたらリソースの設定とかの表がたくさん出ていたりで気が滅入ることもあるかと思います。問題文をよく読むとその仰々しい表の中で全く関係ない部分も出てきたりしますので、そういう時は関係ない部分のことは深く考えずにいきましょう。ケーススタディの前提条件的なところも出題範囲に関係ないことも書いてあったりしますしね。

## 問題演習の学習方法

問題演習を行う際には、ただ答えを覚えるだけではなく、理解を深めるための工夫をすることが重要です。特に以下の方法を取り入れると効果的です。

1. **GPTに質問する**  
   演習の時にはチャットGPTをフル活用しました。4oの回数制限がかかるレベルで質問しまくりました。問題を解く中でわからないことがあれば、チャットGPTに質問してみると良いです。なぜその答えが正しいのか、他の条件だと回答が変わるのかなど、どんどん深掘りしていくと面白いです。ただ、稀にハルシネーションも起こるので過信は禁物です。

2. **他の選択肢が誤っている理由を考える**  
   正解の選択肢だけでなく、他の選択肢がなぜ誤っているのかを分析することも大切です。「こっちの選択肢かと思ったけどどこが違うの？」という自分の勘違いを正す時もそうですし、自分が正解した問題だとしても他の選択肢に対してコメントできるくらいの力をつけたほうがいいからです。これにより、選択肢を絞り込むスキルが向上し、似たような問題に遭遇した際にも応用できるようになります。

## 反省
圧倒的に勉強時間が足りなかったです。毎回。試験はやっつけで受けるものではありません。。しっかり勉強して自信をもって臨むことがとても大事です。
試験本番でAzure Learnが閲覧できるのですが、みていいかどうかわからず参照しませんでした。みていいものらしいです。時間余ったので使っておけばよかったです・・・。

## まとめ

AZ-104の試験は、複数回受験することで理解が深まる部分も多かったです。同じ問題が出ることもありましたし、思わぬ分野で苦戦することもありました。これから受験を考えている方には、自分のペースで学習し、試験環境にも気を配って挑戦してほしいと思います。自信を持って受験に臨んでください！
Boxのフル活用法とは？～HULFT Squareのエコソリューション利用について～ 


## 目次
1. [はじめに](#はじめに)
2. [課題：BoxのAPIコール上限問題](#課題：BoxのAPIコール上限問題)
3. [解決策：エコソリューションの活用](#解決策：エコソリューションの活用)
4. [まとめ](#まとめ)

<a id="はじめに"></a>
## はじめに
最近では、多くの企業様がクラウドストレージであるBoxをご利用になっています。
2024年6月の時点で、約18,000社がBoxを導入されたとのことです。

Boxのメリットは主に下記になります。

- 保存容量に制限が無い
- 詳細なアクセス権限を設定できる
- 国際的なセキュリティー規格へ対応している
- スマートフォンやタブレット端末からも操作可能


業務のデジタル化（DX）を検討されている企業様からは、Boxを活用する以下のような相談が増えてきている印象を受けております。

- Boxのコラボレーション機能を活用して、取引先とファイルを共有する。
- 電子帳簿保存法（電帳法）の対応で、Boxにデジタルデータを連携・保管する。
- バックアップデータの退避先としてBoxを利用する
- ドキュメントをBox上で共有し、最新化した際に共有リンクを案内する。

Boxの利用方法は上記を一例として多岐にわたりますが、気になるのが連携方法です。

手動でブラウザから連携する方法もございますが、手間となりかねません。そのため、Box APIを活用して自動化を検討されるのが一般的です。なお、Boxには様々なプランがございますが、プランによってはAPIコール数の上限が設けられています。[Boxの料金プラン](https://www.box.com/ja-jp/pricing)をご確認ください。

<a id="課題：BoxのAPIコール上限問題"></a>
## 課題：BoxのAPIコール上限問題
取引先との連携や電帳法対応で扱うファイルの数を考えた場合、APIコール数を上回る可能性がございます。1回の連携処理で複数回のAPIコールが発生し、**APIコール数の上限を超過すると、別途課金が発生します**

<a id="解決策：エコソリューションの活用"></a>
## 解決策：エコソリューションの活用
Boxのエコソリューションとして認定されたツールには、APIコール数による課金が発生しません。（※特定の設定が必要です）。

その一例として、[HULFT Square](https://www.hulft.com/service/hulft-square)が挙げられます。HULFT Squareは、データ連携をノーコードで開発し、一気通貫で自動化できるサービスです。例えば、様々なシステム・SaaSからデータ・ファイルを取得し、データの加工変換を行い、Boxへアップロードしてコラボレーション設定をするなど、多岐にわたる機能を提供しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/3847edfd-80a8-2118-0ddd-2bfd7fe92534.png)


<a id="まとめ"></a>
## まとめ
Boxをフルに活用することで、業務DXを加速させる動きは多くの企業で取り組まれています。本記事では、APIコール数の上限など、Box利用時のポイントを紹介しました。Boxエコソリューションの検討も積極的にご検討いただくのも良いと思います。
【#2】Git入門 「git pushとは？？」

この記事は私が所属しているプロジェクト団体の初学者向けに書いた記事です。

# Hello!
今回の記事も前回の記事と同様にカジュアルに文章を認めました。

# はじめに
この記事ではチーム開発におけるもっとも使うコマンドについてご説明します。
図付きで書いたのでぜひ最後までお読みください！

今回は主にGitHubを一人で使うときや、複数人で使うときでも要となるコマンドをご紹介します。

- Gitの初期設定（必要な人のみ）
- GitからGitHubにファイルを送信する方法（`git push`)

の2点でお話します。

## 今回の記事を読む前の前提事項
- GitHubのアカウントは作成済み
- WindowsPCでGitの環境は整っている。MacやUbuntuの人は対象外（→まだ未インストールの方は[こちら](https://git-scm.com/)）
- 私の[Git入門の記事の#1](https://qiita.com/matttchan/items/06499fff935a264606f6)を読んでいる（GitとGitHubの違いが分かればOK）

# Gitの初期設定
まず初めにGitを初めて使う方なら`Git`の初期設定が必要になります。
Windowsの人はコマンドプロンプト、MacやUbuntuの人はターミナルを開きましょう。

いろいろな設定をする必要がありますが、個人情報を入力するのは以下の二点だけで問題ないです。
`ダブルクォーテーション`のところに自分の情報を入力
```:Gitの設定コマンド
$ git config --global user.name "あなたのGitHubのユーザー名"
$ git config --global user.email "GitHubに登録しているメアド"
```

次に、大学や会社でGitを使う場合に`プロキシ`というサーバーを経由して外部ネットワークにアクセスしている場合があると思います。
その場合に特別な設定をしないと`プロキシサーバー`を経由してGitHubにGitからアクセスすることはできません。
以下の設定は**必要な方のみ**行ってください。家で使う場合は基本的に`プロキシ`のことを考える必要はありません。
```:プロキシを設定
$ git config --global http.proxy wwwproxy.hogehoge.com:8080
```
```:プロキシを解除（おうちで使う場合）
$ git config --global --unset http.proxy
```
となるわけです。

:::note info
用語：プロキシ
通信を中継し、安全性や匿名性を高めるサーバー。
:::

# GitからGitHubにファイルを送信する方法（`git push`)
まず、初めにGitHubにファイルを送信する流れについて図で表してみました。

感覚的には世界旅行の段取りに近いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/710848/4374b5ac-105b-4cd7-1741-cb1e86e0ebd0.png)
それでは上の図に書かれているコマンドも一つ一つ解き明かしていきましょう！


GitHubにファイルを送信する基本的な流れは以下の通りです。
1. コンピュータに保存されているプロジェクトファイルの保存場所に`ターミナル`で移動
2. GitHubにアップロードしたいファイルを追加 (`git add`)
3. 準備したファイルがどのようなものなのか記載する(`git commit`)
4. GitHubに向かってアップロード(`git push`)

以下に**例**を挙げます。
```:GitHubにアップロードする前の準備
cd ~/Desktop/TestPy

git add main.py
git add sample.py
git add . # このコマンドは`TestPy`というフォルダーにあるすべてのファイルを`add`します。

git commit -m "メインプログラムでsample.pyを呼び出したプログラムです。"
```
次にアップロードするための **目的地**を設定します。
その場所はコマンドで行うのではなく、実際に `GitHub`で行う必要があります。
[GitHubのリポジトリの作り方](https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository)
こちらの記事を参考にして作成してください。⑩までやれば問題ありません。

そして、リポジトリを作ったら、そのGitHubのリポジトリサーバーに向けてデータを送信します。その目的地を設定します。
```:フォルダーの送信先
git remote add origin https://www.github.com/hogehoge/... .git
```
リンクは例です。URLのところは自信で作成したリポジトリのURLを貼り付けて下さい。ただし、アドレスの末尾は `.git`で終わります。

そして最後にその場所にめがけてファイルやフォルダーを発射します!

```
git push origin main
```
そして、ご自身が作られたGitHubのリポジトリのサイトを見てみると、、、
データがありますよね！

基本的に `main`ブランチにデータが送信されます。
ブランチ。。。？と思われたかもしれません。それは次の章で解き明かしていきましょう！
Next.js✖️Supabase✖️Prismaで画像を保存し、表示させる方法

初めまして！くるりんぱです。Next.jsとSupabase,Prismaを用いてWebアプリを作成している際につまづいた点があったのでQittaにまとめたいと思います。

具体的には自分のプロフィールを登録して、マイページで表示するという機能を実装している際に、画像の保存と表示の仕方に苦戦しました。


## 手順
### 1. Prismaを用いてSupabaseのDatabaseに画像のurlを保存するテーブルを作成する。

### Prismaのモデル

`model Dog {`
  `id Int @id @default(autoincrement())`
  `name String`
  `photoUrl String`
  `breed String`
  `userId String`
`}`

私は上記のようにして犬のプロフィール画像のurlを保存するDogというテーブルを作成しました。

※schema.prismaファイルにてモデルを定義した後、
`npx prisma migrate dev --name init`
というコマンドでmigrationをすると、supabase上にテーブルが作成されます。


### 2.画像をアップロードするためのフォームを作成する。
フォームの作成方法は色々ありますので、自分に合ったもので良いかと思います。
私は以下のように作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3862561/41694e16-be03-055c-3e70-36e8e98af6f9.png)


### 3.画像のアップロードの処理を書く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3862561/0a63b719-d507-4984-b061-4060542b2520.png)

この処理の流れを一つずつ説明します。

まず、`event.preventDefault()`でフォームのデフォルトの送信動作をキャンセルします。次に選択されたファイルが画像であるかチェックした後に、画像ファイルのパスをランダムに作成します。(UUIDを用いることで一意のパス名を作成することができます。)
そして、supabaseのstorageに画像をアップロードします。エラーの際にはアラートが表示されるように実装しています。


### 4.アップロードした画像のURLを取得し、テーブルに保存する

アップロードした画像のURLを取得する際にはバケットがprivateかpublicであるかで方法が異なります。今回、私はバケットをprivateで作成したのでその方法を以下に表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3862561/341a1fff-d546-e748-3711-735c9b08fe6a.png)

`createSignedUrl`を用いて、storageに保存されている画像のurlを取得します。そして、そのurlをdatabaseに保存する処理をpostDogで行うようになっています。


### 最後に
この3ステップで画像をsupabaseのstroageに保存し、保存した画像のurlをdatabaseに保存することができます。そのため、テーブルからurlを取得して、アイコンや画像としてページに表示することが容易にできるようになります。
Excel VBAからWordを操作してみた

参照サイト
https://vba.9ol.net/excel-excel-vba-error-462-howto-240225/



Excel VBAからWordドキュメントを新規作成して画像を挿入するプログラムを作成したときにはまったところを残します。

# Wordアプリケーションオブジェクトへの参照を取得する
```vb:
On Error Resume Next
Set WRD = GetObject(, "Word.Application")
If Err.Number <> 0 Then
    Set WRD = CreateObject("Word.Application")
End If
On Error GoTo 0
```

CreateObject単独だとエラーになる場合がある
```vb:エラーになるかもしれない
Set WRD = CreateObject("Word.Application")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106311/f35eefd5-6497-ae0f-ba52-db06bac92d81.png)
![スクリーンショット 2024-08-16 135304.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106311/8a3bb866-c984-4948-bceb-c5212a081cfc.png)

Wordがバックグラウンドで起動しているときにCreateObjectするとエラーになるみたいです

# Excel VBAではWord定数を参照できない
```vb:
DOC.Content.InsertAfter Text:="test"
'WRD.Selection.EndKey Unit:=wdLine, Extend:=wdMove
'WRD.Selection.InsertBreak Type:=wdLineBreak
WRD.Selection.EndKey Unit:=5, Extend:=0
WRD.Selection.InsertBreak Type:=6
```
wdLine=5
wdLineBreak=6


```vb:エラーになる
WRD.Selection.EndKey Unit:=wdLine, Extend:=wdMove
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106311/e3dbad92-e730-2c7d-b029-cbd3c88ef93c.png)
最初このエラーが表示されたとき、メソッドの指定が間違っているのかと思いはまってしまったのですが、
Excel VBAではWord VBAの定数が定義されていないことが原因でした。

インターネットで検索すると定数の値が調べられますので
下記のどちらかで対応する必要があります。
・グローバル定数として定義する
・定数を数値に置き換える

例えば下記のようなサイトで定数の値を調べられます。
https://learn.microsoft.com/ja-jp/office/vba/api/word.wdunits
研究概要紹介　～近似計算による省エネ化～

# はじめに
早速ですが以下の２枚の画像の違いが分かりますか？
![original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3187264/649c9b66-8da9-52f5-281c-3d7ff8a0482b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3187264/06c376e1-26c9-c119-a497-4d404c87d590.png)
ぱっと見違いが分からないですよね。
実は上から２枚目の画像の圧縮には近似計算という計算手法が使われています。

近似計算によって、画像のクオリティにほぼ違いが無いにもかかわらず
２枚目のほうが画像圧縮にかかる消費電力が小さくなっているんです。

# 改めまして
おはようございます。
大学院修士課程のchanjagaです。
今回は私が約１年半大学院で取り組んでいる近似計算の研究概要をお伝えしようと思います。この記事を読んで少しでも私の研究に興味を持ってもらえたら幸いです。

# 近似計算とは
近似計算とは、計算の精度 (computing accuracy) を犠牲にし、計算リソース（時間、消費電力、回路の実装面積など）を削減する手法です。
計算精度の劣化をある程度許容できるアプリケーションに近似計算を適用することによって、エネルギー効率や処理速度の向上が期待できます。

## 近似計算を適用できる主なアプリケーション

### 画像および音声処理:
人間の目には認識できないピクセル値の誤差を許容できる画像の処理や、ノイズが含まれる音声処理には近似計算が適用可能です。

### 機械学習:
学習アルゴリズムのトレーニングや推論においても、完全な計算精度は必要ありません。特定のモデルパラメータや特徴量を近似することで、計算コストを削減できます。これにより、モデルの学習速度が向上し、省電力化が可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3187264/908fa940-6a4e-5434-489d-2a98a203c318.png)


### IoTデバイス:
センサーデータの処理や通信においても、自然のノイズが含まれるため完全な計算精度は必要でなく、近似計算を適用することができます。これにより、バッテリー寿命を延ばし、処理効率を高めることが可能です。

### データ圧縮:
圧縮アルゴリズムで近似を利用することで、データサイズを大幅に削減し、帯域幅の効率的な使用や保存スペースの節約が期待できます。加えて、圧縮処理にかかる消費電力の削減にも寄与します。

### ゲーム開発:
リアルタイムのグラフィックスレンダリングや物理シミュレーションでも、完全な精度が必ずしも必要ないため、近似計算が処理速度を大幅に向上させます。

:::note info
ちなみに、最初に見せた画像はデータ圧縮に近似計算を適用した例です。
:::

# 私の研究
近似計算についてなんとなくのイメージを持ってもらったところで、私の研究内容を簡単に紹介していきます。私の研究内容はずばり

:::note info
心電図処理への近似計算適用による回路の消費電力削減
:::
です。具体的には、心電図の特徴検出に使用される Pan-Tompkins アルゴリズムにおいて、計算リソースの削減と電力効率の向上を図ることを目指しています。アルゴリズムの中で特にエネルギー消費が大きいのが「二乗 (squaring) 」ステップです。このステップを最適化するために、以下のアプローチを試みています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3187264/823e6207-d641-79bd-c169-b160edab8ad0.png)
↑Pan-Tompkinsアルゴリズム↑

## 近似計算の適用: Pan-Tompkins アルゴリズムの最適化
1. 二乗ステップの最適化
心電図信号の特徴を検出する際、Pan-Tompkins アルゴリズムの中で重要な役割を果たしているのが「二乗」ステップです。この処理は計算負荷が高く、特にバッテリー駆動の医療機器では消費電力の大きな要因となっています。私の研究では、この「二乗」ステップを改善するために、専用の近似二乗回路を導入しています。

2. 8種類の近似二乗回路の評価
二乗処理を行うための代替アプローチとして、8つの異なる近似二乗回路を提案し、その性能を評価しました。それぞれの回路が提供するパワー削減率や面積削減率を比較し、最適な回路設計を見つけることを目指しました。

3. 評価結果
最も優れた近似二乗回路を選定した結果、以下のような成果を得ることができました：

:::note info
消費電力の削減: 99.40%
回路面積の削減: 99.47%
特徴検出精度: 99.67%
:::
この結果からも分かるように、近似計算を用いることで、心電図処理のパフォーマンスを大幅に向上させることができました。特に、バッテリー駆動の医療機器においては、長時間の使用が可能となり、実用性が大いに向上しています。

# まとめ
今回は私の研究テーマである近似計算について、実際の研究内容を交えながら説明しました。今後もより多くのアプリケーションに対して近似計算の適用を広げていきたいと考えています。もし興味を持ってもらえたらぜひ質問してください！
(ベンチマーク)M5Stamp S3で素数を求める3...100まで(内蔵USBシリアル(注意あり))


x 理系フリマ831にあるよ

x うまく、書き込めない場合は、BTNボタンを押しながらUSBを挿す。


目的
素数を求めて時間を測って遊ぶ
2から開始しする
割るのは、2からn-1まで割る
ちゃんと割ってあまりを求める
z = x / y
a = x - ( z * y )

いろいろ
Arduino UNOより速い

結果

![o_coq318.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/ce411d4d-4c55-604f-02b0-b8ff84b5af0f.jpeg)


![o_coq319.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/0aa5ff01-1cb5-0a27-349c-1c1fccd1d021.jpeg)



```c++


//sosuu_S3_1

void setup() {

  Serial.begin(9600);

}//setup

void loop() {

  int s[100];
  for (int ii = 0; ii < 100; ii++) {
    s[ii] = 0;
  }//for

  unsigned long time;

  int a=1;//work

  int pp = 0;
  //s[pp++] = 1;//debug
  //s[pp++] = 2;//debug
  Serial.println("START>>");
  time = millis();

  for (int ii = 2; ii < (100 + 1); ii++) {

    //Serial.print('(');  //debug
    //Serial.print(ii);   //debug
    //Serial.print(')');  //debug
    //Serial.println();   //debug

    for (int jj = 2; jj < (ii); jj++) {

      //Serial.print('['); //debug
      //Serial.print(jj);  //debug
      //Serial.print(']'); //debug

      a = ii / jj;
      a = ii - (a * jj);
      if ( a == 0) {
        //Serial.print('*');//debug
        break;
      }//if

    }//for
    if (a != 0) {
      //Serial.print('@');
      s[pp++] = ii;
    }
    //Serial.println();//debug
  }//for

  time = millis() - time;
  Serial.print("millis=");
  Serial.println((int)time);

  int yy = 0;
  while (s[yy] != 0) {
    Serial.print(s[yy]);
    Serial.print(',');
    yy++;
  }//while
  Serial.println();

  Serial.println("<<END");
  delay(3000);
  //while (1) {} //debug
}//loop



```
hello Python、hello Qiita

## 本題
### 環境
Windows11 64bit

### python インストール
1. 公式サイトのトップページ最下部メニューでDownloadから該当のOSをクリック
1. Stable Releasesからbitが合うインストーラーを選択
1. インストーラがダウンロードし、実行
【注意】標準/カスタムの選択画面で必ず”Add python.exe to PATH”にチェックを入れること
1. インストールが終わったらcmdを起動し、以下コマンドでインストールしたpythonのバージョンが表示できればインストール成功
    ~~~
    # python --version
    Python 3.10.11
    ~~~
1. pythonを実行してみる
    ~~~
    # python
    >>> print("hello world")
    hello world
    >>> exit()
    # 
    ~~~
     
### トラブルシューティング
- pythonのバージョンが表示されない
    ~~~
    # python --version
    Python
    ~~~
    **Windowsのアプリ実行エイリアスにインストーラのpython.exeが登録されており、この設定をオフにすることで問題解消。**
    手動でインストーラ実行しており、エイリアスでのインストーラ実行をオフることに迷う必要なし。
　
- pythonコマンドが認識されない
    ~~~
    # python --version
    'python' は、内部コマンドまたは外部コマンド、
    操作可能なプログラムまたはバッチ ファイルとして認識されていません。
    ~~~
    Pathにpythonインストールフォルダ(python.exeが入ってるフォルダ)のパスを追加することで問題解消。
    **インストーラ実行時、Add python.exe to PATH にチェックを入れ忘れていた。pipコマンドで問題が出るリスクがあるため、Path手動追加よりもアンインストールして入れなおすことをお勧めする。**
Next.jsアプリのlayout.tsxに関連するType error

## やりたいこと

Next.jsで発生したビルドエラーを解消したい

## エラー内容

```bash
  ▲ Next.js 14.2.5

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

src/app/layout.tsx
Type error: Layout "src/app/layout.tsx" does not match the required types of a Next.js Layout.
  "CommanDescription" is not a valid Layout export field.
```

## 調査

日本語に翻訳すると以下の文となる

```bash
タイプ エラー: レイアウト「src/app/layout.tsx」は、Next.js レイアウトの必要なタイプと一致しません。
「CommanDescription」は有効なレイアウト エクスポート フィールドではありません。
```

## 原因

レイアウト内で使用する関数をレイアウトで定義しExportしていた

exportは他のファイルからインポートが前提のためレイアウト内で使用するとTypeErrorが発生する場合がある。これはexportをつけることでコンポーネントとしての要件を満たさなくなることがあるから。

## 解決策

“export const CommanDescription” からexportを取り除き"const CommanDescription"とする。
または"CommanDescripton"をlayoutではない別ファイルで定義しインポートする。

## 終わりに
知識が無さすぎてエラーの解決に時間がかかってしまった。レイアウトの役割から考えるとexportの使い方が間違ってるのはなんとなく納得した。そうすると解決策は定義していた関数を別ファイルにすることが適切なのだろう。
[React]Hooksの備忘録

# 投稿理由
React Hooksの復習して理解を深める為
随時更新していきます。

# useState
hooksの中で一番使われている
コンポーネントの値を保持したり、更新するために使う
使用例：　入力フォームなど
```
const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
```

# useEffect
コンポーネントの副作用を制御する為につかう
副作用とは、UI構築以外の処理のことをいいます。
使用例：外部APIからデータを取得する
```
useEffect(() => {
  // 副作用処理を記述
return () => {
  // クリーンアップ処理を記述
};
}, [副作用関数の実行タイミングを制御する依存配列]);
```

# useContext
複数のコンポーネント間で共通して利用したいデータを管理する
使用例：認証情報
```
const コンテキストから値を受け取る変数 = useContext(コンテキストオブジェクト);
```

# useRef
refオブジェクトを生成するときに使う
再レンダリングを防ぐ
使用例：ストップウォッチ
```
const 参照オブジェクト = useRef(初期値) 
```

# useMemo
関数が出力した値を保持する
使用例：パフォーマンス最適化の時のみ
```
const メモ化のための関数 = (props) => {
  const 結果を保存するための変数 = useMemo(() => メモ化の対象となる関数(props.name), [props.name])
 
  return &lt;div>結果を保存するための変数&lt;/div>
```

# useCallback
関数をメモ化するときに使う
使用例：子コンポーネントのpropsに関数を渡す時
```
useCallback(メモ化する対象の関数, [依存配列]);
```

# useReducer
複雑なstateを管理する為
使用例：複数の値のstateを更新するとき
```
const [state, reducerを実行する呼び出し関数] = useReducer(stateを更新する関数,初期値)
```

# 参考
https://qiita.com/seira/items/f063e262b1d57d7e78b4

https://ja.react.dev/reference/react/hooks

https://udemy.benesse.co.jp/development/react-hooks.html
インターン体験記(株式会社エイチーム)

# はじめに
2024年8月に行われた株式会社エイチームさんのインターン体験記をまとめます。当インターンには2週間、週3日の計6日参加し、ライフデザインチームのもとでフロントエンドの実装を行なっていきました。
# インターン概要
内容: 株式会社エイチームライフデザインに所属し、ライフエンディングの総合サイトである[Life.](https://www.lifedot.jp/)に関わるタスクを行う
場所: 愛知県 名古屋市 大名古屋ビルヂング31、32階 (名古屋駅の目の前)
期間: おおよそ一ヶ月 (長い人で2ヶ月、筆者は２週間)
時間: 10:00 ~ 19:00
使用言語・FW: TypeScript + React + Next
# 1日目
- 初期セットアップ・環境構築
- チームに自己紹介
- 目標・ロードマップ作成
- 実装作業

初日は午前中にインターンの初期準備を済ませ、午後から低・中・高にレベル分けされたISSUEに取り組むという流れでした。ISSUEの内容としてはライフエンディングの総合サイトである「Life.」の企業側が利用する霊園検索画面の改善を行っていくというものでした。初日はレベル「低」のものから取り組んでいき、フロントエンドでコードを書いたことがある人であれば初日のうちに大方終わる程度の難易度のものでした。
ランチタイムにはエイチームのためだけの食堂が同じフロアに備わっており(珍しいっ)、そこでチームの皆さんと談笑しながらご飯をいただきました。

# 2日目
- 実装作業
- 1on1面談(メンター)

2日目以降は基本Issueに黙々と取り組むという感じで、メンターの方や人事の方との1on1を時折入れていただきながらタスクに関する相談だけでなく、就活全体の相談に乗っていただくことができました。2日目のタスクとしては、初日の実装に対して頂いたレビューの反映とレベル「中」のタスクの実装でした。レベル「中」のタスクも実装自体のレベル感はすぐに方針がたつものがほとんどでしたが、型セーフな実装を行おうと思うと、コード全体を読み込まなければならなかったりと、プロジェクトの全体感を掴むのに少し時間を取られました。

# 3日目
- 実装作業
- - 1on1面談(マネージャー)

3日目からはレベル「高」のIssueに取り組みました。レベル「高」のIssueとしては利用しているパッケージのバージョンアップデートのような個人開発ではなかなか取り組まないタスクが課されました。一個あげると依存関係にある他のパッケージがエラーを吐き出す地獄絵図になることも。。特にメインで利用しているreact-adminのメジャーアップデートに苦戦し、このタスクは翌日に持ち越しました。

# 4日目
- 実装作業
- 1on1面談(人事)

3日目に苦戦したアプデ作業をなんとか終わらせ、その他の残りのタスクに取り組みました。Issue自体は20以上あり、大方が終われば提案系の作業に移れるので早めに片付けようと黙々作業でした。
また、人事の方とも面談させていただき、就活全般の相談や、働き方についてアドバイスをいただく貴重な機会になりました。エイチームさんではお願いすれば基本どんな方とも面談を組んでいただけるよう。

# 5日目
- 実装作業

5日目は最終日前日ということで実装タスクに集中できる最後の日だったので一日中実装タスクを行いました。残りのタスクを行いつつ、これまでのコードのマージ作業を行なっていきました。上述したようにIssueが並行して多く行われる関係でコンフリ祭りに。。コンフリ解決などの作業に意外と取られてしまいましたが、自分で実装方針の改善を行いたかった部分にも取り組め、大方の提供されたIssue作業を終わらせることができました。

# 6日目
- 実装作業
- 体験記(これ)記入
- 1on1面談(フロントエンド・スペシャリスト)
- クロージング作業

6日目は実装作業はそこまでできませんでしたがフロントエンドでスペシャリストの道に進まれている方との1on1を組んでいただき、貴重なお話を聞かせていただきました。その他、この体験記の記入や退社手続きを済ませ、無事２週間のインターンを走り切ることができました。

# 全体を通して
### 実装課題に関して
手のつけやすいレベルの課題から入って肩を慣らしつつ、パッケージのアプデのようななかなか個人では行わないタスクで仕事としてのエンジニアリングやフレームワーク自体への理解を深めることができたと思います。
### 人との交流に関して
社員の方とは主にランチの時間や組んでいただく1on1を通してたくさんお話しさせていただきました。同時期にインターンに来ていた学生さんとも(チームが違ったので一回だけですが)お話しさせていただき、幅広く交流することができました。
### 会社に関して
名古屋駅からも徒歩で５分ほどでアクセスも良く、オフィスも広く整備された環境で仕事ができました。ミーティング設備や食堂など周辺環境も整備されていて働きやすい環境だなと。会社の雰囲気も活気があり、働いている方々もとにかく優しい方々ばかりなのでいつでも相談できる環境で助かりました。

# 最後に
２週間のインターンを通して、エンジニアとしての働き方や、就活の進め方に関して多くの学びがある体験ができました。筆者のエンジニア・インターンとしては初めての企業さんでしたが、エイチームさんでインターンができてよかったなと思います。大阪にも拠点を持っている会社さんなので興味をお持ちの方は是非。
AtCoder Beginner Contest 037

## C - 総和

https://atcoder.jp/contests/abc037/tasks/abc037_c

### 解説

- 累積和の配列を作る
    - 0番目の要素は0になるようにする
- (k + i までの累積和) - (i までの累積和) 

### 実装例（C++）

```cpp
#include <iostream>
#include <vector>

using namespace std;

int main() {
    int n, k;
    cin >> n >> k;

    vector<long> a(n);

    for (int i = 0; i < n; i++) {
        cin >> a[i];
    }

    vector<long> sum(n+1);

    for (int i = 0; i < n; i++) {
        sum[i + 1] = sum[i] + a[i];
    }

    long total = 0;
    for (int i = 0; i < n - k + 1; i++) {
        total += sum[k + i] - sum[i];
    }

    cout << total <<endl;
}
```
Java Goldを3週間で取得した勉強法

## まえおき
Java Silver SE11の資格取得から2カ月経過後に勉強をスタートしました。
基本的なJavaの文法は理解してるくらいな状態でした。
（Silverは83%で合格でした。）

### 自己紹介
+ エンジニア歴 2年目
+ 受験時にはJavaの開発経験なし
+ フロントエンドの開発経験あり


## 学習時間と正答率
+ Java Silver：39時間、正答率：83%
+ Java Gold：72時間、正答率：79%


## Java Goldについて
Silverと比較して難易度はかなり上がります。
覚える量がSilverの倍くらいある印象でした。
ただ参考書などは充実しているので、勉強時間を確保できたら取得できる資格です。

コード読解の練習にもなるので、個人的には学習してよかったです。
Javaを使わなくても、資格の知名度や他の言語学習にも流用できる点を考えるとおすすめです！

### 要点
https://qiita.com/Anest_Doi/items/eebc8d19743330a612ed

とてもまとまっていたので、参考にさせていただきました！



## 勉強方法
+ メイン教材は**黒本**を使用する
+ 黒本の解説で理解できない点を**紫本**、**Udemy**、**youtube**で学習する

<dl>
  <dt>youtube</dt>
  <dd>黒本著者が教える　やさしくない!? Java</dd>
  <dt>udemy</dt>
  <dd>現役アーキテクトが教える『Java Advanced編』Java SEの高度な機能を習得／専門性を高め差別化を図る方へ</dd>
</dl>

以下がリンクです。
+ [黒本著者が教える　やさしくない!? Java](https://www.youtube.com/@java9521)
+ [現役アーキテクトが教える『Java Advanced編』Java SEの高度な機能を習得／専門性を高め差別化を図る方へ](https://www.udemy.com/course/learn-java-se-advanced/)

### 黒本
黒本は4周くらいしました。

+ 1週目は解説を見ながら解いていく。何となく理解する程度で留めておく。あまり時間を取られすぎないよう注意。

+ 2週目からは理解に重点を置いて、補助教材を活用して理解するまで学習を進める。3週目以降も同様。

+ 最後の総仕上げ問題で各セクションの理解度を確認する。

解説を見ずに各セクションを75～80%正解できたら合格可能だと思います。

ちなみに筆者は、黒本の正答率80%前後で受験して、試験は正答率79%（63%以上で合格）で資格取得できました。

### 紫本
紫本は黒本の学習で理解しづらかった点のみを学習しました。
紫本についている問題は解いていないです。

紫本には「試験直前チェックシート」が付いていて、それを試験前に見ていました。
チェックシートは要点がまとめられていて、試験前に見る教材としては最適でした。

### youtube
「黒本著者が教える　やさしくない!? Java」は黒本の著者の方が、Javaのメカニズムをとても分かりやすい言葉で解説してくれています。
黒本で理解しづらかったセクションの補助教材として利用しました。

動画も短くまとまっていて、すごく分かりやすかったので超おすすめです！

### udemy
Goldの試験範囲は網羅されていないですが、モジュールシステムやラムダ式、ストリームAPIなどを動画で学習できます。
こちらも同様に補助教材として利用しました。
ラムダ式とストリームAPIの解説はとても分かりやすかったです！

動画で学習を進めたい方は、購入を検討されてもよいかと思います。

## まとめ
Java Goldの学習方法を紹介しました。
最後まで読んでいただき、ありがとうございました！
【ChatGPT＋Code Interpreter】で複数ファイルをひとつのファイルにする。


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

　今回は、複数ファイルをひとつのZIPファイルにします。

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

　まずは、ニュース。

　動画生成AI「Runway Gen-3」の
　　Turboモデルが、
　　　全利用者に提供開始。

　Gen-3 Alpha Turbo Image to Videoは
　　オリジナルのGen-3 Alphaの
　　　半分の価格で、
　　　　7倍速く生成する。

[そねちさんポスト](https://x.com/AIsonesone/status/1824011314043433337?t=tConIXc_XJG7xkIZphHQ_A&s=03)

[そねちさんポスト](https://x.com/AIsonesone/status/1824071908322930751?t=GxASLE9yjltrBK1qrvArtw&s=03)
***
　さて、本題です。

　画像だけに留まりませんが
　　いくつものファイルを
　　　人に送る場合があります。

　場合によっては
　　複数の人に送ることも。

　そこで
　　複数ファイルを
　　　ひとつのファイルに
　　　　まとめてしまえば、
　　　　　送る手間もかなり減ります。

　Code Interpreterを使えば
　　ひとつのファイル、
　　　ZIPファイルにすることが
　　　　可能です。

　手順は
　❶GPT-4oであることを確認
　❷複数ファイルをアップロード
　❸下記Promptを入力
```Text:
CodeInterpreterで、これらのファイルをZIPにしてください。
```
　❹送信
　❺ダウンロード

　逆にZIPファイルを
　　解凍するには
　　　別のツールを使ってください。

　スマホで
　　ChatGPTに
　　　アップロードしたくても
　　　　ZIPファイルは見れないので😅

　PCならば
　　見れそうな気もしますが。
　　　確認できていません。

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

　今回は、ここまで。
CloudFrontのOACアクセス利用したS3アクセスをクロスアカウントでアクセスしてみた

# はじめに
データレイクとして別AWSアカウントに配置してるデータに、OACを使ってCloudFrontからアクセスする検証をしてみました。

# 準備
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/7259505f-d1da-a4d2-2dcf-490de9936580.png)


S3バケットを【パブリックアクセスをすべて ブロック】で作成して、閲覧確認用の画像をアップロードします。

# オリジンアクセスの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/7d0f0960-7f76-e4ef-8884-627642b36cc6.png)

【コントロール設定を作成】
から作成する。

# ディストリビューションの作成

:::note warn
「Origin domain」は別アカウントなので一覧に表示されないので注意
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/e8043fde-47a3-0ea8-0023-453306c2fa9f.png)

作成後に、適用するバケットポリシーの定義をコピペできました。（2024/08/16現在）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/c159f491-dbbd-1d47-f1ec-3f09c24ca2a8.png)

# コピペできたバケットポリシー（閲覧対象のS3バケットに適用する）
```json
{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::yonemoto-cloudfront-oac-test-2/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::AWSアカウントID:distribution/ディストリビューションID"
                    }
                }
            }
        ]
      }
```
# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/8082a9ed-2156-465d-caa8-3881b7f7252a.png)

# AWSの相談・お困りごとありましたら、、、

AWSの活用方法や、お困りごとの相談、随時、お仕事の受付しております。
AWSのLambda開発関連で、ライトな開発や、ちょっと、こんな事を自動化したい！等も、お気軽に問い合わせください。

https://www.cs-cloud-aid.com/
ubuntu×Laravel sail×Dockerで環境構築

# はじめに
こんにちは、ばななです。
laravel sailを使った開発環境構築で苦戦したので、手順を備忘録としてまとめます。

# 概要

- ubuntu環境にLaravelプロジェクトを作成する手順
- githubからクローンした時の操作手順

# 前提となる環境情報

windows11 home

WSL2

ubuntu 22.04.3LTS

PHP 8.2

laravel 10.x

# ubuntu環境にLaravelプロジェクトを作成

## 依存関係の導入

### PHPのインストール

```bash
sudo apt update
sudo apt install php-cli
```

### PHP拡張機能のインストール

```bash
sudo apt install php-xml php-curl php-mbstring php-dom
```

### Composerのグローバルインストール

```bash
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === trim(file_get_contents('https://composer.github.io/installer.sig'))) { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer
```

## Laravelプロジェクト

### Laravelプロジェクトを作成

```bash
composer create-project laravel/laravel your-project-name --prefer-dist "10.*"
```

### Laravel Sailのインストール

```bash
cd /path/to/your/project
composer require laravel/sail --dev
php artisan sail:install
```

### アプリケーションキーの生成

```bash
php artisan key:generate
```

### phpMyAdminの設定

```yaml
services:
  Laravel.test: ~~~
  mysql: ~~~
# ここから下を追加
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    links:
      - mysql:mysql
    ports:
      - 8888:80
    environment:
      MYSQL_USERNAME: '${DB_USERNAME}'
      MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
      PMA_HOST: mysql
    networks:
      - sail
```

### Dockerコンテナの起動

```bash
./vendor/bin/sail up
```

# GitHubからクローンする手順

## 準備

### リポジトリのクローン

```bash
# プロジェクトを配置するディレクトリに移動
cd /path/to/your/directory

# GitHubからプロジェクトをクローン
git clone https://github.com/username/repository.git

# クローンしたディレクトリに移動
cd repository
```

## 起動までの手順

### 依存関係のインストール

laravelプロジェクト作成手順と同じ

### envファイルの作成

```bash
cp .env.example .env
```

### アプリケーションキーの生成

```bash
php artisan key:generate
```

### Laravel Sailのインストールと設定

```bash
composer require laravel/sail --dev
php artisan sail:install
```

### Dockerコンテナの起動

```bash
./vendor/bin/sail up -d
```

# 参考にした記事

https://dev.classmethod.jp/articles/how-to-laravel-sail-install-and-mysql-phpmyadmin/

# 最後に
以上が環境構築とクローンした際の手順になります。
ご指摘やアドバイスなどございましたら是非お願いします。
[AWS #22] AWS Direct Connect

<!--
 <font color="c00000"></font> 赤
-->
## はじめに
こんにちは
今回はクラウドテクノロジー分野である **<font color="c00000">「AWS Direct Connect」</font>** について紹介したいと思います。

## AWS Direct Connect
:upside_down: Direct ConnectはAWSが提供する<font color="c00000">**専用接続サービス**</font>です。これを使用することで、AWSとデータセンターの間でプライベートなネットワーク接続を確立することができます。
![AWS22_01_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806875/3ca64729-741b-5008-7cae-41edae44067d.png)

インターネット回線でなく、専用の回線を使用するので<font color="c00000">**セキュリティ面の向上と通信の安定**</font>がメリットしてあげられますね。

## VPCピアリング接続
オンプレミスとの接続以外にも、複数のVPC同士を接続する<font color="c00000"> **「VPCピアリング接続」**</font>という機能もあります。VPCピアリング接続を使用すると、同じリージョン、同じアカウントだけではなく、別のリージョン、別のアカウントの複数のVPCとも接続ができます。

:upside_down: AWS環境内の通信なので一般的な<font color="c00000"> **「エクスプロイト」**</font>や <font color="c00000"> **「DDoS攻撃」**</font>などの**脅威**を減らすことがメリットしてあげられますね

## おわりに
今回のちょっとしたまとめになります。

:::note info
VPCピアリングは異なる<font color="c00000">**複数のVPC間での通信を可能にする**</font>サービス
:::
:::note info
Direct ConnectはAWSが提供する<font color="c00000"> **オンプレミスとAWSを専用線で接続**</font>するサービスである
:::

**Direct Connect**はユーザーの拠点とAWSとの間を専用回線で接続できるサービスを提供しており、これを使うことで安定した通信速度やセキュリティ強度の高い環境でネットワークサービスを利用できることが理解できました！

最後までお読みいただきありがとうございました！
>>日頃より活用している参考書です。
>> **「参考書」**
[AWS認定クラウドプラクティショナー改定第3版](https://x.gd/19i6N)
>
> **「AWS公式サイト」**
[AWS Direct Connect](https://aws.amazon.com/jp/directconnect/)
>
> **「参考元」**
[AWS Direct Connectとは？](https://atbex.attokyo.co.jp/blog/detail/9/)
>
> **「Youtube」**
[VPCピアリング・Direct Connect](https://www.youtube.com/watch?v=Oli7GnA2XsQ)
Azure Blob Storageで変更フィードを使用してみる

#### はじめに
AZ204の試験対策をしていると出てくる変更フィードですが、実務での経験があまりなかったので実験してみました。是非、気になる方は真似して実施してみて下さい。

## 変更フィードとは
BlobとBlobのメタデータへの削除や追加、更新といったトランザクションログを提供して、それをトリガーに他のアプリケーションでバッチの実行等を行うことを実現します。以下が利用のイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678759/9764a386-1140-66fb-3eb4-1101008c8f88.png)

## 利用にあたっての注意点
以下留意しておきましょう。
+ 利用可能なプランは「Standard 汎用v2、PremiumブロックBLOB、Blob Storage」でサポートされています
+ 階層型名前空間は無効にしておく必要があります

## 変更フィードを利用する
Azureでは主に以下のサービスで変更フィードをトリガーとして利用または監視できます。詳細は[こちらの記事](https://www.smikar.com/azure-blob-storage-change-feed/)を参照
+ Azure Logic Apps
+ Azure Functions
+ Azure Data Factory
+ Azure Storage Explorer

今回は上記のうち、検証の中で、Azure Storage Explorerを使用していきます。

### AzureLogicApps
前述の記事によると、Azure Logic Appsではこのコネクタで変更フィードの使用ができるみたいです。（また検証していきます。）
[MS Lern | コネクタのリファレンス＞Azure Blob Storage](https://learn.microsoft.com/ja-jp/connectors/azureblob/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678759/f92d798b-b233-dfd2-b4a5-a454f0a9648c.png)

### Azure Functions
Azure Blob Storage Triggerで変更フィードの使用ができるみたいです。（また検証していきます。）
[MS Lern|Azure Functions の Azure Blob Storage トリガー](https://learn.microsoft.com/ja-jp/azure/azure-functions/functions-bindings-storage-blob-trigger?tabs=python-v2%2Cisolated-process%2Cnodejs-v4%2Cextensionv5&pivots=programming-language-csharp)
## 検証
### 構成イメージ
今回の構成イメージはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678759/be1ff286-9235-2669-05c9-624580b9f4e3.png)

1. Azure PortalからAzure Blob Storageへファイルを格納
1. 変更フィードにてストレージの変更を提供
1. Azure Storage Explorerで変更フィードを確認

### 実装
#### ①StorageAccountの構成
1. StorageAccountを構築。
※今回はネットワーク設定は以下のように、パブリック通信を有効にして構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678759/2bc27256-be56-bc5d-4dbb-d3f76f2e787e.png)

1. StorageAccountの変更フィードを有効にする
データ管理>データ保護>追跡>BLOBの変更フィードを有効にする
変更フィードの保持期間も設定ができます。（今回は検証なので3日）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678759/65f9bd6c-bbcf-7e2f-f7bb-e0955711da4a.png)

#### ②AzureStorageExlorerで確認
1. AzureStorageExplorerをインストール（[MS公式|ダウンロードページ](https://azure.microsoft.com/ja-jp/products/storage/storage-explorer/)）
1. AzureStorageExplorerの設定([参考ブログ | Azure Storage Explorerを使ってみる](https://qiita.com/snomoto/items/66046fb0dee86c8cb53e))
1. いろいろとコンテナ内のファイルを作成したり削除したりと操作してから変更フィードのログを見てみます。
任意のavroファイルをプレビューモードで開くと、以下のように変更フィードが確認できました。
※ 「$blobchangefeed」内の「logディレクトリ」を進んでいくと同じものが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678759/a1a37c06-ea86-90af-baf0-4371884c9ae5.png)

#### 本記事の参考資料
[MSLern|Azure Blob Storage の変更フィードのサポート](https://learn.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-change-feed?tabs=azure-portal)
NeoPixel制御ボード　組み立てキット用マニュアル

- ## 商品概要
RP2040マイコンを使って、NeoPixelを制御して楽しもうというコンセプトの基板です。
組み立てから電子工作してみたい方向けの補助的な資料です。
表面実装部品を多用しており、はんだ付けレベルは中級になります。
抵抗、容量のフットパターンは手実装用に少し広めになっています。

- ## ハードウェアの主な仕様
　①制御マイコン:PR2040-ZERO（RaspberryPiPico系）
　②NeoPixel接続ピン　 GPI08（R1でショート）
　③プッシュスイッチ１：GPI07
　④プッシュスイッチ２：GPI06（2個搭載しているボードのみ）
　⑤音声入力：GP26

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/d2c2bfe2-5543-ebc8-bd6b-0624a4bbcc14.png)
※実際の基板は、白色です。

 - ## 部品実装
### NeoPixelの実装

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/99109a6a-0fff-e2fa-724c-42a813580fa3.png)

WS2812Bの実装方向ですが、よく見ると切り欠きがあります。
シルクで１ピンの位置を合わせて部品の配置を行います。

### 電源安定用コンデンサ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/04f38265-2438-1587-57d9-a1e7aa7f7833.png)

LEDの点滅安定用にバイパス用のコンデンサを実装します。
動作切り替わりで発生する電源の電圧降下を防ぐ効果があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/d8f8b285-8f16-6cc4-6b1a-521c51762947.png)

回路は１線信号の入力、出力、安定用コンデンサがワンセットになります。

### プッシュスイッチ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/345b926b-e485-8588-a34a-31ead1b8917a.png)


外部入力を行います。
プッシュスイッチ１は、GP07番に接続されていますのでプログラム上でHI/LOを読み取って
状態を変更することができるようになります。

回路構成は、100kΩでPull-Upしています。
ボタンを押さない場合、端子の状態はHIとなります。
ボタンを押すと、端子の状態はLOになります。

あと容量が対GNDに実装しています。
この部品の意味は、ボタンを押したとき接触などで端子の状態がばたばたするのを
防ぐ役割を担っています。（チャタリング除去回路）

時定数　τ（タウ）＝CR＝1uF×100k＝100msec未満はLOからHIの所要時間が必要なため不感になります。
反応を早くしたい場合は、抵抗値、または容量を下げることで反応が早くなります。
余談ですが、1CRでちゃんと計算すると63％に到達する時間ということになります。
マイコンの端子が3.3V÷2=1.65Vを超えたぐらいというざっくり感覚で超えたところという時間の設定です。

### 音声ジャック　入力回路

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/08b9d583-0722-7b8e-1a37-d1b69af6096d.png)

音声を入力する回路です。AD入力は、GP26ピンになります。

3.5mmステレオミニジャックは、秋月さんで売られているものを使用しています。
https://akizukidenshi.com/catalog/g/g109060/

音声信号を入力してFFT（高速フーリエ変換）を行うために0信号状態を、3.3V÷2＝1.65V基準にしています。
無信号の時、ADコンバータ出力は信号がない場合、ADCにはフルスケール（12bitなので2^12＝4096）の
半分の値が得られます。

ということで、信号成分は図解より、
1÷（2×π×C27×（R5とR6のパラレル接続））で設定しています。
ハイパスフィルタのカットオフ周波数は、この値以上は信号を通しますという意味なので
0.32Hz以上の信号を通す定数になっています。
ちなみに0.32Hzは1/√2なので0.7倍の信号ですので1倍の周波数は3Hz以上の設定になっています。

余談：（R5とR6のパラレル接続）は、AC信号としてみた場合、3.3VもGNDも接地（信号的に動かない）と
見えるためこのように計算しています。


あとADの入り口で信号が3.3Vを超える場合は、ツェナーダイオードで制限をかけると
運用が安心になりますが、今回の部品表には盛り込こめていません。（手が回りませんでした）

### 5V昇圧回路

電池電圧を5Vに昇圧する回路です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/97874e4b-2cf8-714a-e907-4e08215f2bb5.png)

価格抑えめな昇圧回路を使用しています。
R4は、昇圧回路をNeoPixelに5Vを供給できるようにします。
そのため抵抗値は0Ωとしています。

### 5VのインジゲーターLEDとバッテリ接続切り離すスイッチ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/9c1ac747-f708-8954-99a0-9bace1b4f8a7.png)

5V出力確認用のインジケータ表示としてLEDを点灯させています。
明るすぎる場合は、R3=10kオームなど抵抗値を大きくすることで明るさを抑えられます。

またスイッチは、OFF方向に入れると電池供給が切れるようになります。


### NeoPixel（WS2812B）の信号線

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782127/724bdb26-80c5-296b-4e3b-da6a101fe702.png)

NeoPixel制御信号線をGP08またはGP13を選択できます。
動かなかったときGPIO端子を切り替える用に用意しましたが、
基本的に動いていますので、GP08に抵抗（1kΩ）を実装していただければ
サンプルプログラムがコピー＆ペーストで動かすことができます。

これで必要な部品は、迷わずつけられると思います。
ぜひ楽しんでみてください。

電脳好奇心　うたたねこ
Nuxt 3 + Vuetify 3 環境構築【vuetify-nuxt-moduleは非推奨】

:::note alert
以下のやり方を実行すると下記エラーが発生するため、実行しないでください。代わりにマニュアルセットアップをしてください。
:::

```bash
Internal server error: Failed to resolve import "vuetify/iconsets/mdi" from "virtual:vuetify-icons-configuration". Does the file exist?
```

マニュアルセットアップ

https://vuetifyjs.com/en/getting-started/installation/#manual-setup

```shell
pnpx nuxi@latest init .
npx nuxi@latest module add vuetify-nuxt-module
pnpm run dev
```

```app.vue
<template>
  <v-app>
    <v-main>
      <v-btn color="primary">
        Vuetify
      </v-btn>
    </v-main>
  </v-app>
</template>
```


https://github.com/userquin/vuetify-nuxt-module?tab=readme-ov-file#-install

https://qiita.com/mml/items/5a0f32415440a4212d88

https://neetchanprogrammer.hatenablog.com/entry/2024/02/10/212242
結合レポート



[レポートのまとめのまとめ](https://qiita.com/Keiji_otsubo/items/9c883d1e4bf0df549a2a)

+ [結合レポートを作成し、集計レベルの数式列を作成しました。行単位では適切に計算が出来ております。しかし、レポートの合計の計算がずれてしまいます。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007cmX7h)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/7d0641f4-da0e-6d14-0fb9-2f84beef87bf.png)


:::note
こちら、数式の内部の条件が誤っているようでした。
:::

+ [結合レポートをはきだす形式について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007X71Fb)

:::note
方法: 結合レポートを参照しているときに、または [レポート] タブから直接、 | [エクスポート] | [エクスポート] をクリックしてレポートのダウンロードを開始します。

書式設定された結合レポートのエクスポート
https://help.salesforce.com/s/articleView?id=release-notes.rn_rd_reports_export_formatted_joined_report.htm&release=220&type=5
:::

# エクスポートした結果、レコードが足りない

+ [結合レポートをエクスポート時にレコードが欠損をする](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007eqvLd)

:::note
同じようなことが質問されていますが、解決してないようです。

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

こちらでは件数が多い、グループ化の問題でやはりエクスポートできないと質問がありますね。サポートに確認してみるのがいいかもしれません。

https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007AhmH8SAJ
:::
AWS-CLIでスイッチロールしたい

## 背景
AWSのアカウント構成

- ユーザ管理用のアカウント
- 開発環境
- 本番環境

のような構成になっており，それまでは各AWSアカウントごとにaws-cli用のアカウントを作ってaws-cli実行時に `--profile`で指定していましたが，AWS-CLIでもスイッチロールができることを知ったのでやり方を記載します。

---

## やり方

1. GUIでユーザ管理用のアカウント(スイッチロール元)にログイン
2. IAMユーザの認証情報を取得して`~/.aws/credentials`に記載します。ここでは`default`にしていますが，別の値でも問題ないです。
    > [!NOTE]
    > `default`にするとその認証情報が`--profile`で明示的に指定しない際に使われます。

    ```
    # ~/.aws/credentials
    [default]
    aws_access_key_id=xxxxxxxxxxxxxxxxxxxx
    aws_secret_access_key=xxxxxxxxxxxxxxxxxxxxxx
    ```
3. 必要ならばMFAの設定をします。(組織のポリシー等で強制されていることもある)
    MFA作成時に決めたMFA device nameを後に`~/.aws/config`に記載します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/5d90c8a7-9271-c854-280d-39b1bb3ad302.png)
4. スイッチロール用のconfigを記載します。

    ```
    # ~/.aws/config
    [profile super-admin-config] # 好きな名前をつける
    region = ap-northeast-1
    role_arn = arn:aws:iam::<スイッチロール後のAWSアカウントID>:role/<Role名>
    mfa_serial = arn:aws:iam::<MFAを登録したAWSアカウントID>:mfa/<MFAのdevice name>
    source_profile = default # ~/.aws/credentialsのプロファイル名を指定
    ```
5. 切り替わっているか確認します。

    ```shell
    aws sts get-caller-identity --profile super-admin-config
    {
    "UserId": "xxxxxxxxxxxxxxxxxx",
    "Account": "<スイッチロール後のAWSアカウントID",
    "Arn": "arn:aws:iam::<スイッチロール後のAWSアカウントID>:user/<ユーザ名>"
    }
    ```
---

## 感想

aws-cliでスイッチロールすることで
- 複数の認証情報の管理
- 複数のaws-cli用のアカウント管理
をする必要がなくなりつつ，cliで快適に作業できるようになりました。
Windows OS が起動しなくなった...コマンド プロンプト実行するか

何らかの要因で OS の起動不可が発生した時、諦めて OS を再インストールするのが一番いいかもしれませんが、コマンド プロンプトからなんとかできる場合もあったりします。

今回は、OS が起動しなくなった状況でコマンド プロンプトを実行するにはどのような方法があるかというお話です。コマンド プロンプト実行後のトラブルシューティングについては、また別の記事で投稿します。

## 環境
どの Windows OS バージョンでも同様の方法でコマンド プロンプトを実行できます。

## コマンド プロンプト実行方法
OS が正常に起動できない状況でコマンド プロンプトを実行するには、以下の方法が考えられます。
1. 回復環境 (Windows RE) を起動する
1. OS インストール メディアから起動する
1. Windows PE を起動する
1. 他の Windows 端末にディスクを接続する

### 方法1. 回復環境 (Windows RE) を起動する
Windows OS をインストールすると回復環境もあわせてインストールされます。OS が起動に失敗すると自動的に回復環境が起動します。ただ、必ず回復環境が起動してくる保証はありませんし、回復環境を意図的に削除している環境だともちろん回復環境は起動しません。

回復環境が起動したら、`トラブルシューティング → 詳細オプション → コマンド プロンプト` と選択するとコマンド プロンプトを実行できます。

![winre.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/776f0f09-a1af-43ce-4971-5cc9a0fa25da.png)
![troubleshooting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/6a65fdd4-e019-c94d-b4a6-ae3a516adf18.png)
![option.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/ba86cf7b-a8e1-79ba-1aa2-0f0d5cbf3eb1.png)

https://learn.microsoft.com/en-us/windows-hardware/manufacture/desktop/windows-recovery-environment--windows-re--technical-reference?view=windows-11

### 方法2. OS インストール メディアから起動する
Windows OS のインストール メディアを起動すると以下の画面が表示されます。そこで [Shift] + F10 キーを入力するとコマンド プロンプトを起動できます。
![installmedia.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/e260bdd3-ce9f-beb4-1f2f-db0426b47ea6.png)

[Shift] + F10 キーを入力するとコマンド プロンプトが実行されます。
![shiftf10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/d1d29997-cac9-6020-2aa8-49d53dae45bc.png)

### 方法3. Windows PE を起動する
Windows PE を起動すると自動的にコマンド プロンプトが実行されます。
![winpe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853334/913a9558-22f1-7069-2d47-1ba88e2ce431.png)

https://learn.microsoft.com/en-us/windows-hardware/manufacture/desktop/winpe-intro

Windows PE は、自分で作成する必要があり、以下の手順で Windows PE (WinPE) は作成可能です。

1. 作業用の Windows 10/11 環境にて Windows ADK をインストール
Windows ADK のダウンロードとインストール
https://learn.microsoft.com/ja-jp/windows-hardware/get-started/adk-install

2. 以下の Web サイトを参考に WinPE のブートメディアを作成
起動可能な Windows PE メディアの作成
https://learn.microsoft.com/ja-jp/windows-hardware/manufacture/desktop/winpe-create-usb-bootable-drive

### 方法4. 他の Windows 端末にディスクを接続する
正常起動している 他の Windows 端末に起動しなくなった端末のディスクを接続し、正常起動している Windows 端末でコマンド プロンプトを実行する方法です。接続方法は、USB でも内蔵ディスクとして接続してもなんでも OK です。

正常起動している端末でコマンド プロンプトを実行するだけなので、特に説明不要かと思います。

## さいごに
OS 起動不可に備えて、コマンド プロンプトを起動できる準備をしておきましょう！
pythonでgnuradio その15

# 概要
pythonでgnuradioやってみた。
練習問題やってみた。

# 練習問題
sin波を再生せよ。

# サンプルコード

```
from gnuradio import analog, audio, blocks, gr

class my_block(gr.top_block):
	def __init__(self):
		gr.top_block.__init__(self, "top0")
		self.samp_rate = samp_rate = 48000
		self.audio_sink_0 = audio.sink(samp_rate, '', True)
		self.wavfile_source_0 = blocks.wavfile_source("a1.wav", True)
		self.connect((self.wavfile_source_0, 0), (self.audio_sink_0, 0))

if __name__ == '__main__':
	try:
		my_block().run()
	except KeyboardInterrupt:
		pass




```

以上。
【VSCode】AsciiDocにPlantUMLを埋め込んでプレビュー表示

## VSCodeにAsciiDocを入れる
拡張機能を有効化するだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3765097/e7bc1e51-4a9b-7d4a-5b4b-3af573c7fbc9.png)


## PlantUMLを使えるようにする
以下参照。
[Visual Studio Code で UML を描こう！](https://qiita.com/couzie/items/9dedb834c5aff09ea7b2)

## Krokiを有効化する
VSCodeでAsciiDoc拡張機能のSettingを開き、Krokiを有効化する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3765097/ae289ee1-4c6b-94fd-f8ad-34aeb52fb226.png)

すると、AsciiDocファイルに埋め込んだPlantUMLをプレビュー画面に反映できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3765097/9a908732-7061-02b7-aa84-754527f4f18a.png)

グラフを別ファイルにしてincludeすることも可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3765097/d90c96ff-9cbd-07a1-fb93-715fe0cc24be.png)

```:graph2.pu
[plantuml]
----
@startuml
title シーケンス図
アリス -> ボブ: リクエスト2
ボブ --> アリス: レスポンス2
ボブ --> アリス: レスポンス3
@enduml
----
```