OmniAICreator/Qiita-1.07M huggingface dataset:
Attention機構を図解しながらわかりやすく説明する

# はじめに
[ゼロつく2](https://amzn.to/3zMUT0C)で解説されているAttention機構について、私の理解を含めて解説したいと思います。
また、ゼロつく2以外にも情報収集し、いくつか参考になった情報を加えてAttentionについて理解が深まるように記事を書きたいと思います。

# Attentionとは
* 入力データの中から重要な部分に焦点を当てる仕組み
* 自然言語を中心に発展した深層学習の技術の1つで、機械翻訳や文章生成の性能向上に寄与

## Attentionの利点
* 長い依存関係の処理
    * 従来のRNNでは入力文章が長くなると、情報が保持しにくいという点がありましたが、重要な部分に焦点を当てることで効果的に処理できるようになりました
* 説明可能性の向上
    * どこに焦点を当てているかを可視化することでモデルがどのように予測しているかを理解することができます
* 並列処理性能の向上
    * TransformerのようなAttentionベースのモデルは並列処理に適しており、GPUを効率的に使用できます。従来のRNNでは、各ステップの処理が前のステップの結果に依存するため、処理が逐次的になってしまうという欠点がありました

# seq2seqを用いた機械翻訳でのAttention
## Seq2Seqとは
Seq2Seq(Sequence to Sequence)とは、入力シーケンスを別の出力シーケンスに変換するためのディープラーニングアーキテクチャです。自然言語処理では、機械翻訳などのタスクに適用されています。

Seq2Seqモデルはエンコーダーとデコーダの2つの部分から構成されています。

![スクリーンショット 2024-07-20 003215.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324032/311371be-40cb-3387-1157-297477a98a52.png)

日本語を英語に翻訳するタスクでは、Encoderが日本語をN個の固定長ベクトルに変換します。その後、DecoderがN個の固定長ベクトルを英語に変換します。
このようにSeq2Seqは入力シーケンスを別の出力シーケンスに変換しています。

# Seq2Seqに対するAttention機構
人間が"私は犬が好き"を英訳する際、"私"="I"、"犬"="dog"のように各単語に注目して翻訳を行っていると考えられます。Seq2Seqでも同じことができないかを考えます。

まず、入力される文章の各単語はEncoderで隠れ状態ベクトルに変換されます。

![スクリーンショット 2024-07-21 162418.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324032/087d1e53-add1-1bb6-5876-d9b24bcedf2b.png)

その後、Encoderのそれぞれの隠れ状態ベクトルとDecoderの隠れ状態ベクトルの内積を計算します。(内積の値が大きいということはベクトル同士の類似度が高いことを意味します)
![スクリーンショット 2024-07-21 162552.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324032/63dda968-06a2-2685-8cc3-512120ad33de.png)

内積の値(今回だと5つ)をSoftmax関数に入力し、値を0~1の範囲に収めるように正規化します。内積の値を正規化したものをAttention Weightとします。


エンコーダーのLSTMが出力する全ての隠れ状態ベクトルに対して、Attention Weightを用いて加重和を計算し、コンテキストベクトル得ます

![スクリーンショット 2024-07-21 171754.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324032/a6366561-3a60-c152-b8d6-2bd932e48064.png)


デコーダーのLSTMが出力する隠れ状態ベクトルとコンテキストベクトルを連結し、全結合層に入力することで次のトークンの確率分布を得ます。

![スクリーンショット 2024-07-21 172335.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324032/9b18978e-0907-b09e-727b-572fda122e33.png)

以上がseq2seqを用いた機械翻訳でのAttentionの仕組みになります。

# 最後に
AttentionはSelf-AttentionやMultihead attentionなど他にも機構があります。それらについても今後記事でまとめていきたいと思います。

記事の内容について何か間違いがあればお気軽にご指摘いただけますと幸いです。


# 参考文献
[ゼロから作るDeep Learning2 ―自然言語処理編](https://amzn.to/4cMVsGw)

https://qiita.com/halhorn/items/c91497522be27bde17ce

https://qiita.com/ps010/items/0bb2931b666fa602d0fc
【Slackワークフロー】とにかく続けやすい！やってよかった振り返り！

おはようございます！:sunny:
駆け出しエンジニアのさわまりんです。

今回は、私がやってよかったと感じている
Slackの振り返りワークフローについてご紹介します。

はじめに今回の『振り返りワークフロー』の良いところはこんな感じです！
1. 継続できる
2. 気軽に書ける
3. 達成感を得られる
4. 無駄な時間をなくせる

それでは詳しく見ていきましょう:runner:

# 週1回の振り返りが大切なワケ
以前、元マイクロソフトの越川慎司さんの
『トップ5%の社員に共通する3ルール』という講演を聞きました。
その際、挙げられていたルールのうちの1つが「週15分の内省」でした。

そこで語られていたのは、
**週に15分だけ内省することで、無駄な作業が13%もなくなる** という内容です。

時間に追われている現代人からすれば、
無駄な時間が減るのは、とても魅力的なことではないでしょうか。

# 週のたった15分に苦戦する...
いざその日から実践しようとしたのですが、継続が驚くほどできません:fearful:
日々のタスクに追われたり、退勤後はやる気がでなかったり、と後回しにしてきました...

そんなときにSlackのワークフローが簡単に作成できると知り
やってみたところ、簡単に継続できるようになりました！

# 振り返りワークフロー
## Slackの画面
![スクリーンショット 2024-07-22 104133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809594/fbc6f994-4f98-adb2-ecb0-90fc9cd07f23.png)
こちらがSlackの個人チャンネルに直接送られてくるメッセージです。

一連の流れを説明すると、
まずメンションされたメッセージがとんできます。
そのメッセージにはボタンがついているのでクリックすると、
振り返りフォームに解答することができます。

解答し終えると、その内容がSlackの個人チャンネルに送られます。

## スプレッドシートに集約
![スクリーンショット 2024-07-22 103549.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809594/92536a00-743a-a56c-e988-3f2aa7a5f652.png)
こちらのスプレッドシートのように、今までの振り返りをためておくことができます。
たまに見返すことで、
過去の自分がどんなことを成し遂げてきたのか、何を改善してきたのか、
自分の癖を見つけることができます。

## Slackのワークフロービルダー
![スクリーンショット 2024-07-22 104411.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809594/d3d976c6-53b6-6898-3e38-90a1b663414b.png)
振り返りワークフローはこのように作成します。
Slack内の作業で完結するので非常に簡単です。

## 振り返りフォームの内容
現状、私の振り返りフォームの内容はこんな感じです。
1. 今週、頑張れたこと、できたことは何ですか？
2. この作業、削減できそうかも！と感じたことがあれば書いてください（任意）
3. 来週やりたいこと、意気込みなど、なんでもいいので書いてみてください

自分が思うラフな文章で、なおかつ意味のある設問にしています。
それぞれこのような意図があります。
1. 1週間を前向きに終えることができる設問
2. 無駄な時間をなくす設問
3. 来週の行動を変える設問

# おわりに
振り返りが続いたことがない方に届けばうれしいです！

なによりも継続が大切だと思うので、
気負わずにさくさく書くことを意識するのがおすすめです:four_leaf_clover:

こんな設問も効果あるよ、などあれば気軽に教えていただきたいです！
ありがとうございました:relaxed:
完璧な画像: AVIF、PNG、JPG 変換に最適なツール

こんにちは、小さな技術探検家の皆さん！コンピューターの写真を魔法のようにさまざまなタイプに変えたいと思ったことはありませんか？なんと、できます！今日は、写真をあるタイプから別のタイプに変えることができる、とてもクールなオンライン ツールについてお話します。まるで写真に新しい衣装を着せるようなものです！
## AVIF とは何ですか? 街に新しく登場したクールな子です!
まず、AVIF についてお話しましょう。これは、サイズが小さくても見栄えがよい新しいタイプの画像です。ただし、より多くのコンピューターが理解できる他のタイプに変更する必要がある場合があります。そこで、当社の魔法のツールの出番です。
### AVIF から PNG へ: 誰もが見ることができる画像を作成する
時々、AVIF 画像を PNG に変更する必要があります。なぜでしょうか? PNG は画像の共通言語のようなもので、ほぼすべてのコンピューターが理解できるからです。https://avif2png.net/ で簡単にできます。AVIF 画像を挿入するだけで、新しい PNG が出てきます。
### AVIF から JPG: 小さいほうが良い場合
また、写真をもっと小さくしたい場合もあります。そんなときは AVIF を JPG に変換します。写真を小さなスペースに押し込むようなものですが、それでも見栄えは良いです。https://avif2jpg.net/ で試してみてください。とても簡単なので、テディベアでもできます。
## AVIF パーティーに参加してみませんか?
さて、PNG または JPG 画像があり、それを新しいクールな AVIF に変換したい場合はどうすればよいでしょうか? そのためのツールも用意されています。
### PNGからAVIFへ: 写真の容量を節約
コンピューター上で多くのスペースを占めている PNG 画像がある場合は、AVIF に変換することでサイズを縮小できます。https://png2avif.net/ にアクセスして、魔法のようなことが起こるのを見てください。
### JPGからAVIFへ: 古い写真に新たな命を吹き込む
JPG 画像がたくさんある場合は、それらを AVIF に変換することで、すべてを輝かしく新しくすることができます。https://jpg2avif.com/ にアクセスして、写真を変身させましょう。
## まとめ
皆さん、これでおわかりですね! 写真の種類を変更できる 4 つのすばらしいツールをご紹介します。写真で遊ぶのが大好きな子供でも、コンピューターで写真をよりうまく表示したい大人でも、これらのツールが役に立ちます。
覚えておいてください、それは1-2-3のように簡単です:
1. ツールを選ぶ
2. 写真をアップロードする
3. 変更した新しい画像をダウンロードする
さあ、外に出て写真を変えて楽しんでください! まるでコンピューターのファイル用の魔法の杖を持っているようです!
予防線を張るということ

「生きた教材」があったので展開します。（例によって詮索無用で願いますね。）
とあるところでメールサーバを構築し、サービスイン間近になってからFirewallが有効になっていないことが発覚しました。
設計上どうなっていますか、と聞いた処、FWの有効/無効についてなんらお客さんと議論はしておらず、いままで誰も関心がなかった様子です。
「内部NWに設置されているので無効でいい」
「アクセス元が限られているので無効でいい」
こういった考えは通りません。

せめてこちらから「FWどうしますか」のひと言はプロとして必要です。
なにか問題、事件が発生したときに最終的に悪者にされるのは施工した会社です。
技術者を名乗るなら、未決定の重要事項はこちらからどうするのか聞いておく必要があると思います。
「設計書に書いてなかったから有効にしてません」
では、ただの作業者ですね。

無効化するならするで、「それが原因で問題が発生したときには意思決定者が全責任を負う」という内容で（文言に工夫はあれども）形にのこる証拠をもらっておきましょう。
設計書にそれが明記されているならば、お客さんがそれを読んで施工前に承認しているのでそれでいいのですが、今回は設計すらしてなかったので論外です。

ただ、設計書のとおりであっても、
「これ、設計書通りではあるけどもホントに大丈夫かなぁ」
と思ったらすぐ上司に相談するなどアクションしてください。

「おかしいな、言われた通りやったんだけどこんなので良いのかな」と思って黙っていたら、あとからナニ言われるかわかりませんよ。
softetherのunitファイル作成スクリプト

備忘録。
たまに作るとなんだっけ？となるのでここに自作スクリプト書いておく。

```sh
#!/bin/bash

unitname=softether-vpn.service
unitfile=/etc/systemd/system/$unitname
tempfile=$(mktemp)
ifname=$(ip -o link show | grep ^2 | sed -e "s/://g" | awk '{ print $2 }')

cat << EOS >> $tempfile
[Unit]
Description=Softether VPN Server Service
After=network.target

[Service]
Type=forking
User=root
ExecStart=/usr/local/vpnserver/vpnserver start
ExecStop=/usr/local/vpnserver/vpnserver stop
Restart=on-abort
WorkingDirectory=/usr/local/vpnserver
ExecStartPre=/sbin/ip link set dev $ifname promisc on

[Install]
WantedBy=multi-user.target
EOS

cp -pvf "$tempfile" "$unitfile"
[ -f "$tempfile" ] && rm -f "$tempfile"

systemctl daemon-reload
systemctl enable $unitname
systemctl start $unitname
```
php8+phalcon5+nginx+windows10 環境構築メモ

初見のphalcon環境構築時に少々手こずったので備忘として残します。
まずphalconの情報が思いのほか少なかった（シェアがそこまでないからかも）
私自身の経験不足が原因と捉えていますが、似たようなエラーに苦戦中の方の救いになればと思います。
#### 本件に関係しそうな環境諸々は以下の通り
- php 8.1.8
- phalcon/devtools 5.0.x-dev
- nginx 1.27
- mysql 5.7
- windows10
- docker desktop 4.31.1
- git for windows 2.43.0
#### docker インストール
```
$ docker-compose -f .docker/docker-compose.yml up -d --build
$ docker exec -it xxxxx bash
$ composer install
```
※必要最低限のみ記載するので適宜変更してください。
#### phalconインストールで問題発生
Dockerfileは以下の通り（ChatGPTに聞けば出てくるような内容なので一部省略します）
```
FROM php:8.1.8-fpm
COPY php.ini /usr/local/etc/php/

RUN apt update -y \

～　省略　～

  && npm install 
  && pecl install phalcon \
  && pecl install psr
```
ビルド時に`pecl install phalcon` が以下の通信エラーになる。
```
$ failed to receive status: rpc error: code = Unavailable desc = error reading from server: EOF
```
#### phalconをgitからcloneする
手動インストールも試しましたが、以下で解決しました。
けっこう時間がかかるので気長に待ちました...ちょっと自信ないですがphalconコマンドは認識しました。
```
RUN apt-get update && apt-get install -y unzip 
RUN pecl install -s psr
RUN docker-php-ext-enable psr 
RUN pecl clear-cache 
RUN pecl channel-update pecl.php.net 
RUN git clone https://github.com/phalcon/cphalcon.git && cd cphalcon/build && ./install 
RUN docker-php-ext-enable phalcon 
```
`phalcon`コマンドで以下のエラーが出た場合（認識されていないらしい）
```
$ Fatal error: Uncaught Error: Class "Phalcon\Exception" not found in /composer/vendor/phalcon/devtools/src/Commands/CommandsException.php:20
```
`phalcon`をグローバルにインストールする（ちょっと無理やり感ありますが...）
```
$ composer global require phalcon/devtools
```
または以下のようにPATHを直でキックする
例）`phalcon`コマンドでmodelファイル作成する場合
```
$ /var/www/vendor/phalcon/devtools/phalcon model {テーブル名} --namespace=App\\Models
```
#### 関連情報
- https://qiita.com/joycho/items/efd94689f1d482fe61bd
- https://qiita.com/joycho/items/aec4b7a2719f41580b08
- https://qiita.com/fagai/items/81cd0c7ab1749cf24b33
ReadOnlyAccessではAmplifyサービス画面のWebコンソールが完全に表示できない



https://docs.aws.amazon.com/amplify/latest/APIReference/API_ListBackendEnvironments.html

`ListBackendEnvironments`などがないため


https://docs.aws.amazon.com/ja_jp/aws-managed-policy/latest/reference/ReadOnlyAccess.html
```
        "airflow:ListTagsForResource",
        "amplify:GetApp",
        "amplify:GetBranch",
        "amplify:GetDomainAssociation",
        "amplify:GetJob",
        "amplify:ListApps",
        "amplify:ListBranches",
        "amplify:ListDomainAssociations",
        "amplify:ListJobs",
        "aoss:BatchGetCollection",
```

その他細かいものも権限がありません
Amplify Gen 2ではListBackendEnvironmentsは不要な権限だそうですが

https://docs.aws.amazon.com/ja_jp/service-authorization/latest/reference/list_awsamplify.html
Salesforceのトリガーフローにおける行動オブジェクトのStartDateTimeとEndDateTimeの問題と回避策

## 前提条件

Salesforceのトリガーフローにて、行動オブジェクトの`StartDateTime（開始）`と`EndDateTime（終了）`をフローエントリ条件式で使用するとエラーが発生します。

**エラー例**

以下の条件式を使用した場合：

```
BEGINS({!$Record.WhatId}, "001") && isChanged({!$Record.StartDateTime}) || isNew()
```

エラーメッセージ：`項目StartDateTimeは存在しません。スペルを確認してください。`
`EndDateTime`を使用した場合も同様のエラーが発生します。

![スクリーンショット 2024-07-22 14.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718267/e64c4a6f-d9dc-f7ed-3bbf-374da1c3fde5.png)


## サポートの回答

サポートへの問い合わせ結果：

・既知の問題（Known Issue）として認識されています。
・Issue : [Event Fields StartDateTime and EndDateTime throw error in Flow entry criteria formula](https://issues.salesforce.com/issue/a028c00000iwQWsAAM/event-fields-startdatetime-and-enddatetime-throw-error-in-flow-entry-criteria-formula)
・現在のステータス：「Working as Expected」
・解決予定：現時点では未定

## 回避方法

StartDateTimeとEndDateTimeを条件としてフローの動作を制御する方法としては以下2つとなります。

・エントリ条件に数式を使用せず、項目ごとにフィルターを設定する
・対象の項目を含む数式を設定した「Boolean」型をの数式リソースを [決定] 要素に配置

## エントリ条件に数式を使用せず、項目ごとにフィルターを設定する

この方法でも回避自体は可能です。
**しかし、このエントリ条件では、レコードが作成された際にフローが動きません。**
数式以外のエントリ条件では、新規作成かどうかを判定することができないため、新規作成時と更新時両方でフローを動かす必要がある場合は、次の記載する方法で回避することになります。

![スクリーンショット 2024-07-22 14.17.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718267/b03096b0-a0f8-9031-76fc-eae2c530b888.png)


## 対象の項目を含む数式を設定した「Boolean」型の数式リソースを [決定] 要素に配置

エントリ条件に設定していた式を数式リソースに設定し、フローの決定要素で分岐させる方法です。

まずはじめに、エントリ条件に設定していた式を数式リソースに設定します。

![スクリーンショット 2024-07-22 14.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718267/f0bebf8e-c92f-f883-8122-5bc57a759a92.png)

次に、決定要素内でエントリ条件用の数式リソースを使用して条件分岐を行います。

![スクリーンショット 2024-07-22 14.50.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718267/6fef8d3f-1384-4287-811c-da9da5c38b8c.png)


そして、条件に当てはまる場合は必要な処理を追加、当てはまらない場合は終了とすれば、決定要素を使用してフローのエントリ条件のような設定を行うことができます。

![スクリーンショット 2024-07-22 14.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718267/be960f95-ed17-923f-b189-178eeac28eb8.png)


## まとめ

Issueも一応あがってはいますが、ステータスはWorking as Expectedとなっているため、解消される予定は確認ができないようです。
解消されるという微かな希望を胸に、現状はこの記事のような回避方法を取るしかありません。
特に、新規レコード作成時にもフローを動作させたい場合は、2番目の方法（Boolean型の数式リソースを使用）を推奨します。
【備忘録】react-dropzoneでドロップされたファイルをReact Hook Formで管理する

# はじめに
`react-dropzone` でドロップされたファイルを `React Hook Form` を使って他のinput要素と同じように一元管理する実装の **備忘録** です。

# 手順
1.**useForm** から **setValue** を取り出す。
2.**onDrop** の中で **setValue** に値を渡して、**RHF** で値を管理する。

# 実装例
・**実装例**では、**useForm**ではなく、**useFormContext** を使っていますが、**useForm**でも正常に動作します。
```tsx
export function ImageDragAndDropZone() {
  const [previewImage, setPreviewImage] = useState<string>();
  const { setValue } = useFormContext();

  const onDrop = (files: File[]) => {
    if (files.length !== 1) {
      toast.error("画像は一つしかアップロード出来ません。", {
        theme: "colored",
        autoClose: 2000,
      });
      return;
    }

    const droppedImage = files[0];

    // アップロードされた画像をstateで保持する
    const reader = new FileReader();

    reader.readAsDataURL(droppedImage);
    reader.onload = () => {
      setPreviewImage(reader.result as string);
    };

    // RHF側で一元管理する
    setValue("image", droppedImage);
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <>
      <ToastContainer />
      <div
        {...getRootProps()}
        className={
          isDragActive
            ? "border-2 border-dotted rounded-lg border-red-400 h-3/6"
            : "border-2 border-dotted rounded-lg border-gray-300 h-3/6"
        }
      >
        {previewImage && (
          <Image
            src={previewImage!}
            alt="プレビュー画像"
            width={9999}
            height={9999}
            className="h-full object-contain"
          />
        )}
        <input {...getInputProps()} />
        {!previewImage && (
          <p
            className={
              isDragActive
                ? "text-gray-600 flex justify-center items-center h-full text-center"
                : "text-gray-400 flex justify-center items-center h-full text-center"
            }
          >
            ここにアップロードしたい画像をドラッグ&ドロップしてください。
          </p>
        )}
      </div>
    </>
  );
}
```

# さいごに
学習させていただいた記事のリンクです。

https://zenn.dev/ita_mithra/articles/f2f604820e0ff9
すぐに使えるGoogle検索コマンド！

<h1>はじめに</h1>
Google検索は、私たちの日常生活で必要不可欠なものとなっています。<br>
しかしその反面、入手できる情報量が多すぎて、少しストレスな部分もありますよね。<br>
ここでは、検索をもっとスムーズにするための「Google検索コマンド」について紹介していきます！
<h1>Google検索コマンドとは</h1>
Google検索コマンドとは、検索内容に組み込んで、より具体的な情報を効率的に検索するためのキーワードです。<br>
Googleの検索コマンドといっても、たくさんのコマンドが存在します。今回は、日常生活で組み込みやすい、仕様がシンプルで分かりやすいコマンドを選出したので、紹介していきたいと思います！
<h1>Google検索コマンド</h1>
6つの検索コマンドを紹介していきます！
<br>
<table>
    <tr>
        <td><b>"  "</td>
        <td>ダブルクォーテーション(半角)で囲むとその<br>フレーズを完全一致で検索</td>
        <td>例）"猫" "気持ち"</td>
    </tr>
    <tr>
        <td><b>OR</td>
        <td>2つのキーワードのうち少なくとも1つを含む検索 </th>
        <td>例）Apple OR kiwi</td>
    </tr>
    <tr>
        <td><b>-</td>
        <td>半角マイナスで特定のキーワードを含まない検索</td>
        <td>例）地球 -温暖化<br></td>
    </tr>
    <tr>
        <td><b>site: </th>
        <td>特定のサイト内を検索します。</td>
        <td>例）site:qiita.com</td>
    </tr>
    <tr>
        <td><b>filetype:</td>
        <td>特定のファイルタイプを検索します。</th>
        <td>例）filetype:pdf</td>
    </tr>
    <tr>
        <td><b>after:</td>
        <td>指定した日から現在までにアップロードされた<br>
        webページを検索できます<br>
        西暦-月-日で必ず検索してください</td>
        <td>例）after:2022-01-01</td>
    </tr>
    <tr>
        <td><b>before:</td>
        <td>指定した日までにアップロードされたwebページ<br>
        を検索できます<br>
        西暦-月-日で必ず検索してください</td>
        <td>例）after:2022-01-01</td>
    </tr>
</table>
<br>
私が使用したこの6つの検索コマンドの中で、一番利用しやすいと思ったのは<br>
<b>""(ダブルクォーテーション)</b>の検索コマンドです。<br>
検索文とずれた内容が多くヒットしたり、一番欲しい単語が含まれていなかったり…<br>
しかし、""で囲むことにより、含んでほしい内容が含まれたものを素早くみつけることができるようになりました。<br>
これらの検索コマンドは単体で使用してももちろん便利ですが組み合わせて使用することで、より便利に使用することができます！<br>
私は「""」「 after:」「  before: 」の組み合わせや、そこに「site:」を追加した組み合わせをよく使用しました。
<h1>まとめ</h1>
たくさんの情報が飛び交う中で、自分の求めているものを探し出すのは困難です。また、検索することに、ストレスを感じることも少なくありません。<br>
「Google検索コマンド」でもっとストレスフリーなネットライフをお送りください！<br>
紹介しきれなかった検索コマンドがたくさんあるので、気になる方はぜひ調べてみてください！
「NURO光で自前ルーターを使用する」ことはできない罠

https://hibi-note.com/nuro%E5%85%89%E3%81%A7%E8%87%AA%E5%89%8D%E3%83%AB%E3%83%BC%E3%82%BF%E3%83%BC%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B/1723/

という記事で「NURO光で自前ルーターを使用する」とありますが、契約者はWLANの機能を開放できず「NURO光で自前ルーターを使用することができない」になっていますので備忘録として残しておきます

# まず結論
- NURO光で自前ルーターを使用することはできない
- NURO光で自前ルーターを使用してゲストWiFi(Guest)機能を使うことができる

# 経緯
- はじめてさっきNURO光を契約しました(おそい)
- せこせことネットワークの設定をしようとしていましたが、「Guest」Wifiの文字が見当たらない（よく見たらある）
    - ググると知恵袋がでてきて回答には(当時はそうだったんだろう)<= わいはなぜ知恵袋のソースを信じてしまったのか

### SGP200W には ゲストポート機能は無いようですね（おおうそ）

と書いてある

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14294007124


```
NURO光に加入し、ONUは「SGP200W」を使用しています。
最近、子供の友達が遊びに来た時に、Wi-Fi接続をしたがるので、ゲストポート機能を使用したいと思いますが、この機種にはその機能はありますか？

もし無い場合、ONU買い替えになりますか？

その場合、オススメがありましたら、教えていただきたいです。

ちなみに、今のパスワードを何人かの友達に教えてしまったようです。
なので、パスワードの変更もしたいのですが、やはり買い替えでしょうか？

全くの素人のため、何卒よろしくお願いいたします。
```

```
ベストアンサー
SGP200W には ゲストポート機能は無いようですね
```

↑ちゃんと設定できるところがありました

誰かがハマらないように執筆しました

# Guest WiFiを設定する

WLANの場所にあらたなSSIDを発行して設定できるところがあります

![Screenshot 2024-07-22 at 2.24.19 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/ca0aae52-7b32-d79d-e14f-2f3dc1e73423.png)


# まとめ

- NURO光で自前ルーターを使用することはできない
- NURO光で自前ルーターを使用してゲストWiFi(Guest)機能を使うことができる
- よく調べ、設定をよく見る
echoを使ったAPIキー認証のサンプル

# 概要
echoの使い方を勉強してみるがてら、APIキーによる認証を作ってみようと思い取り組んでみました。
APIキーによる認証の考え方がGCPのドキュメントにまとめられていたのでリンク置いときます。

https://cloud.google.com/endpoints/docs/openapi/when-why-api-key?hl=ja

# やってみた
リクエストヘッダに `X-API-KEY` としてAPIキーが付与されるものとして、curlで以下のようなリクエストを送る想定です。
```bash:ターミナル
curl -H 'X-API-KEY:testkey' localhost:8080/hello
```

## echoのミドルウェアを使ってみる
```go:main.go
package main

import (
	"net/http"

	"github.com/labstack/echo"
	"github.com/labstack/echo/middleware"
)

func main() {
	e := echo.New()
	// APIキーチェック
	e.Use(middleware.KeyAuthWithConfig(middleware.KeyAuthConfig{
		KeyLookup: "header:X-API-KEY",
		Validator: func(key string, c echo.Context) (bool, error) {
			return key == "testkey", nil
		},
	}))

	e.GET("/hello", hello)
	e.Logger.Fatal(e.Start(":8080"))
}

func hello(c echo.Context) error {
	return c.JSON(http.StatusOK, map[string]string{"message": "Hello World"})
}
```

- 参考ドキュメント

https://echo.labstack.com/docs/middleware/key-auth

`KeyLookup:` の部分に取得したいヘッダーのフィールド名を指定します。
ヘッダーだけでなく、クエリ、クッキー、フォームの値も取得できるみたいです。
指定しない場合はデフォルトで `header:Authorization` の値を取得しようとします。

`Validator:` の部分では、リクエストされたキーと実際のキーを比較します。
サンプルのため、APIキーをハードコーディングしてますが本来は適切に取得した上で比較します。

## 自作ミドルウェアを使ってみる
```go:main.go
package main

import (
	"net/http"

	"github.com/labstack/echo/v4"
)

func main() {
	e := echo.New()
	// APIキーチェック
	e.Use(checkAPIKeyMiddleware)

	e.GET("/hello", hello)
	e.Logger.Fatal(e.Start(":8080"))
}

func hello(c echo.Context) error {
	return c.JSON(http.StatusOK, map[string]string{"message": "Hello World"})
}

func checkAPIKeyMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
	return func(c echo.Context) error {
		reqKey := c.Request().Header.Get("X-API-KEY")
		if reqKey != "testkey" {
			return c.JSON(http.StatusUnauthorized, map[string]string{"message": http.StatusText(http.StatusUnauthorized)})
		}
		return next(c)
	}
}
```

シンプルに「ヘッダーの特定のフィールドを取得する」方法がわからなくて困ってたんですが、こんなわかりやすい形で取得できるんですね。
```go
reqKey := c.Request().Header.Get("X-API-KEY")
```

# あとがき
ミドルウェアを使って簡単に実装できました。
またミドルウェアを通すAPIと通さないAPIは echo の　`Group` 機能を使えば簡単に分けられそうです。
【備忘録】コンポーネントで分かれているinput要素への入力内容をReact Hook Formで一元管理する

# はじめに
コンポーネントで分かれているinput要素への入力内容を **React Hook Form** で
**一元管理する** 方法についての **備忘録** です。

# 手順
1.**親コンポーネント** で **useForm** を呼び出す。
2.**FormProvider** に **useFormの戻り値** を渡す。
3.**親コンポーネント** で定義したformの **onSubmit** に **定義したonSubmit** を渡す。
4.**子コンポーネント** で **useFormContext** を呼び出す。
5.**子コンポーネントのinput要素** に **register** を渡す。

# 親コンポーネントの実装例
```tsx
export function ProductCard({
  imageData,
  altStr,
  title,
  overViewDescription,
  deployUrl,
  overViewStrArray,
  mainTechStrArray,
  subTechStrArray,
  children,
}: ProductCardProps) {
  const [modalIsOpen, setIsOpen] = useState(false);
  const methods = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <motion.div
        className="w-56 h-56 border-2 rounded-2xl mx-auto"
        whileHover={{ scale: 1.2, transition: { duration: 0.2 } }}
        onClick={() => setIsOpen(true)}
      >
        <ImageComponent imageData={imageData} altStr={altStr} />
        <OverViewDescription
          title={title}
          overViewDescription={overViewDescription}
        />
      </motion.div>

      <Modal
        isOpen={modalIsOpen}
        onRequestClose={() => setIsOpen(false)}
        style={modalStyle}
      >
        <FormProvider {...methods}>
          <ImageDragAndDropZone />
          <form onSubmit={methods.handleSubmit(onSubmit)}>
            <div className="space-y-2">
              <InputDeployUrl />
              <InputProductName />
              <InputOverView />
              <InputMainTechnology />
              <InputProductLink />
            </div>
          </form>
        </FormProvider>
      </Modal>
    </div>
  );
}
```

# 子コンポーネントの実装例
```tsx
"use client";

import { useFormContext } from "react-hook-form";

export function InputDeployUrl() {
  const { register } = useFormContext();

  return (
    <div className="space-y-1 mt-3">
      <label htmlFor="deploy-url" className="font-bold text-xl">
        デプロイ先URL
      </label>
      <input
        type="url"
        id="deploy-url"
        placeholder="https://warabimochi1126.net/"
        className="rounded-md border px-3 py-2 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 w-full"
        {...register("deployUrl")}
      />
    </div>
  );
}
```
REST API初心者必見！ゼロから学べる実践入門

REST APIとは？
---
REST（Representational State Transfer）は、Webサービスを設計するためのアーキテクチャスタイルです。

`GET`：リソースの取得
`POST`：新しいリソースの作成
`PUT`：既存リソースの更新
`DELETE`：リソースの削除

REST APIの特長
---
`アドレス可能性（Addressability）`：すべてのリソースは一意のURIでアドレス可能です。
これにより、特定のリソースを簡単に参照および操作することができます。

`ステートレス性（Stateless）`：各リクエストは独立しており、サーバーはクライアントの状態を保持しません。
つまり、各リクエストは必要なすべての情報を含んでいる必要があります。

`接続性（Connectability）`：クライアントとサーバー間の相互作用が確立しやすく、HTTPの標準機能（キャッシュ、認証、ステータスコードなど）を活用できます。

`統一インターフェース（Uniform Interface）`：一貫性のあるインターフェースを提供し、リソース操作が統一的に行えます。
これにより、異なるサービス間での統合が容易になります。

エンドポイントの設計
---
REST APIのエンドポイントは、リソースを明確に表すURIで設計します。
例えば、ユーザーを操作するためのエンドポイントは以下のようになります

`GET /users`：すべてのユーザーを取得
`GET /users/{id}`：特定のユーザーを取得
`POST /users`：新しいユーザーを作成
`PUT /users/{id}`：特定のユーザーを更新
`DELETE /users/{id}`：特定のユーザーを削除

リクエストとレスポンス
---
REST APIでは、リクエストとレスポンスのフォーマットとしてJSONが一般的に使用されます。
``` .リクエスト
POST /users HTTP/1.1
Content-Type: application/json

{
    "name": "John Doe",
    "email": "john.doe@example.com"
}
```
``` .レスポンス
HTTP/1.1 201 Created
Content-Type: application/json

{
    "id": 1,
    "name": "John Doe",
    "email": "john.doe@example.com",
    "createdAt": "2024-07-21T12:34:56Z"
}
```
まとめ
---
REST APIは、HTTPを介してリソースを操作するためのシンプルで一貫性のあるインターフェースを提供するアーキテクチャスタイルです。
個人開発で導入するのにおすすめの監視ツール

## はじめに
個人開発プロジェクトにおいて、監視ツールの導入はサービスの信頼性とユーザーエクスペリエンスを向上させるためにも導入しておくに越したことはないかと思います。

適切な監視ツールを選ぶことで、システムの稼働状況をリアルタイムで把握し、問題が発生した際に迅速に対応することが可能になります。

本記事では、個人開発者にとって導入が簡単で、無料で利用できる監視ツールを3つ紹介し、その選び方や実際の使用感について紹介します。

## 個人開発で導入する監視ツールの選び方
個人開発で導入する監視ツールを選ぶ際のポイントは、まず簡単に導入できることがポイントかなと思います。

開発リソースを効率的に活用するため、設定が直感的で短時間で完了するツールが理想的です。

また、無料プランが利用可能なツールを選ぶことで、コストを抑えつつ必要な監視機能を確保できます。

具体的な監視ニーズに応じて、稼働状況やエラーをリアルタイムで監視できるツールや、ウェブサイトのパフォーマンスを監視できるツールを選ぶのもありだと思います。


## 個人開発で導入するのにおすすめの監視ツール3選
### 1. UptimeRobot

![スクリーンショット 2024-06-29 17.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242816/16ef5a77-e35f-df36-b61b-464797f4bba7.png)

### 特徴
ウェブサイトやサービスの稼働状況を監視し、ダウンタイムが発生するとアラートを送信します。

UptimeRobotは、HTTP(S)、Ping、ポート、キーワードのモニタリングをサポートしており、幅広い監視ニーズに対応しています。

### 利点
設定が非常に簡単で、初心者でも短時間で監視を開始できます。アラートはメール、SMS、Slackなどで受け取ることができ、即座に問題を把握できます。

さらに、ダッシュボードが直感的で見やすいため、監視結果を迅速に確認できます。

### 無料プラン
無料プランでは、50のモニタリング対象を5分間隔で監視可能です。

個人開発プロジェクトには十分な範囲で利用でき、基本的な監視機能をカバーしています。

公式サイト: 

https://uptimerobot.com/

### 2. Sentry

![スクリーンショット 2024-06-29 17.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242816/07e487c3-d78b-9175-ad42-db816f99eacc.png)

#### 特徴
アプリケーションのエラートラッキングとパフォーマンスモニタリングを提供します。

エラーの発生場所、頻度、影響範囲をリアルタイムで把握でき、パフォーマンスの問題を素早く特定します。

多くのプログラミング言語やフレームワークに対応しており、幅広い開発環境で利用可能です。

#### 利点
エラーをリアルタイムで検出し、詳細なスタックトレースとコンテキスト情報を提供するため、問題の原因を迅速に特定できます。

開発者フレンドリーなインターフェースを持ち、エラーの管理が簡単です。また、Sentryはパフォーマンスモニタリング機能も備えており、アプリケーションの応答時間やトランザクションの速度を詳細に分析できます。

#### 無料プラン
一定のエラー数まで無料で利用可能で、小規模なプロジェクトや個人開発に最適です。


公式サイト: 

https://sentry.io/welcome/

### 3. StatusCake

![スクリーンショット 2024-06-29 17.11.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242816/927e3727-a108-09e4-97f7-b2f3ed02af3f.png)

#### 特徴
ウェブサイトの稼働監視、SSL監視、ページ速度監視などを提供します。

監視対象はHTTP(S)やPing、TCPポートの他に、特定のキーワードの存在やレスポンスタイムもチェック可能です。

#### 利点
設定が非常に簡単で、数分で監視を開始できます。アラート機能が豊富で、メール、SMS、電話、Slackなど様々な方法で通知を受け取ることができます。

世界中のロケーションからの監視が可能で、ユーザーの実際の使用感を反映した監視が行えます。また、詳細なレポート機能があり、稼働状況やパフォーマンスの変化を分析しやすくなっています。

#### 無料プラン

基本的な監視機能を提供し、個人プロジェクトや小規模なサイトに十分対応できます。

無料プランでも主要な監視機能を利用でき、初期コストを抑えつつ監視を行うことができます。

公式サイト: 

https://www.statuscake.com/


 ## 実際にStatusCakeを導入してみた

今回、いくつかの監視ツールを触ってみて、StatusCakeが一番サクッと設定ができたのでこちらを導入しました。

複雑な設定や知識が不要で、数分で監視を開始できました。

ウェブサイトの稼働監視では世界中のサーバからのチェックが可能で、サービスのグローバルな可用性を確認できます。

メール、SMS、Slackなど多様な方法でアラートを受け取ることができ、問題発生時に迅速に対応できそうです。

また、無料プランの提供もあり、個人開発者にとってコストは重要な要素であり、StatusCakeは無料で基本的な監視機能を利用できるため、予算を気にすることなく導入できます。

無料プランでも10のモニタリング対象を5分間隔で監視できるため、一般的な個人開発のプロジェクトでは十分に対応できそうです。

通知を設定し、実際に監視対象のページが落ちると以下のようなメールが届きます。

![スクリーンショット 2024-06-30 1.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242816/5a8f4f0d-469e-b91e-6426-07a231f55ade.png)

## おわりに
今回紹介した3つの監視ツールは、いずれも設定が簡単で、個人開発者にとって扱いやすいものかと思います。

特にStatusCakeは、簡単なセットアップと多機能な監視オプションで優れたパフォーマンスを発揮します。

無料プランを利用することで、初期コストを抑えつつ、効果的な監視を行うことができますので、ぜひこれらのツールを活用してみてください！

## JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇

https://projisou.jp
InspNote - 1分間のアイデア記録

このような瞬間を経験したことがありますか?
- シャワー中に素晴らしいアイデアが浮かぶが、体を拭く頃には消えてしまう
- 運転中にインスピレーションが湧いても、安全に録音することができない
- 素晴らしいアイデアが浮かんだが、それを書き留めるために完全に目覚めたくない
うなずいているなら、InspNote はあなたにぴったりのツールです。
🎙️ **ワンクリック録画、インスタントキャプチャ**
録音ボタンをタップするだけで、アイデアを音声化できます。入力したり、ペンと紙を探したりする必要はありません。とても簡単です。
🤖 **AIアシスタント、スマート処理**
当社の AI は、録音を即座に処理し、重要なポイントを抽出し、選択に基づいてさまざまなコンテンツ形式を生成します。
- ✅ ToDoリスト: アイデアを実行可能なタスクに変換する
- 📝 ブログ投稿: 考えを本格的な記事にまとめる
- 🐦 ツイート: ソーシャルメディアで共有するための核となるアイデアを圧縮する
- 📧 メール: インスピレーションをプロフェッショナルなメールコンテンツに変える
🔒 **プライバシー第一**
私たちはあなたのアイデアの価値を理解しています。あなたの音声は保存されないので、あなたの考えは安全に保たれます。
🔄 **複数バージョンの生成**
それぞれのアイデアに対して、AI は複数のバージョンのコンテンツを生成できます。自分のスタイルに最も合ったものを選択するか、組み合わせて完璧な表現を作りましょう。
🎯 **キーポイント抽出**
AI はアイデアの中核となる概念を自動的に強調表示し、処理中に重要な詳細が失われないようにします。
💡 **InspNoteを選ぶ理由**
1. 時間を節約: アイデアを手動で整理する必要はありません。AIがお手伝いします。
2. 創造性を高める: すべてのアイデアが記録されることがわかれば、より自由に考えることができます
3. 効率性の向上: インスピレーションをすぐに実行可能な計画やコンテンツに変える
4. いつでもどこでも: いつでもどこでもアイデアを記録
5. プライバシー重視: あなたのアイデアはあなただけのもの
🚀 **今すぐ始めましょう**
今すぐ InspNote をお試しください。良いアイデアが忘れられたり埋もれたりしないようにしましょう。
https://inspnote.com?utm_source=qiita
CORSのAccess-Control-Allow-Originについて

JavascriptからAPIへ
```
fetch(mode:"cros" ...
```

で要求してもCROSで弾かれる。
全て正しく設定している「つもり」だった。

間違っていたのは、

```
Access-Control-Allow-Origin: http://localhost:4321/
```

正しいのは

```
Access-Control-Allow-Origin: http://localhost:4321
```
最後のスラッシュの有無。

気がつくのに一時間、悩んだ。
【応用情報技術者試験】同じ略語で異なる意味をもつ単語まとめ

# 概要
応用情報技術者試験に出題される英語の略語で、同じ略語で異なる意味をもつ単語をまとめました。
※勉強中のため、発見次第随時更新予定です。

# 目次
- [ATM](#atm)
- [GC](#gc)
- [IDE](#ide)
- [MBO](#mbo)

# ATM
- Automatic Teller Machine
「現金自動預け払い機」のこと。
銀行やコンビニにあるATMのこと。
<br>

- Asynchronous Transfer Mode
ネットワーク通信における通信方式のひとつ。
日本語では「非同期転送モード」と呼ばれる。
画像や音楽等どんな種類のデータも、一律に48バイトに分割されて5バイトのヘッダ情報が付与されて送られる。
分割されたデータは小さいので、送りやすい。
また、どんなデータも同じ大きさに分割されるので扱いやすいというメリットがある。

# GC
- Going Concern
ゴーイングコンサーンと読む。
「継続企業の前提」とも呼ばれる。
企業が将来も存続していて、事業を継続していく経営のことや、を指す。
参考：

https://www.youtube.com/watch?v=hCZ8fFnpnvY

<br>

- garbage collection 
ガベージコレクションと読む。
実行中のプログラムが使用していたメモリ領域のなかで、不要になった領域を自動で開放してくれる機能。
GCが最初に実装されたプログラム言語はLISP。
1959年ごろに、LISPの問題を解決するために[ジョン・マッカーシー](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%9E%E3%83%83%E3%82%AB%E3%83%BC%E3%82%B7%E3%83%BC)によって発明された。

# IDE
- Integrated Development Environment
統合開発環境のこと。ソフトウェアを開発するための、統合的なプログラミング環境をもつ。
<br>

- Integrated Drive Electronics
PCとハードディスクを接続するための、インターフェースの規格 (仕様) のひとつ。

# MBO
- Management by Objectives
組織のマネジメント手法のひとつ。
組織と各社員の目標を擦り合わせ、各社員に自らの業務の目標を設定、申告してもらう。その進捗や実行も各々が主体的に管理する手法。
会社の目標設定でよく使用される。
1954年に、マネジメントの父といわれる[ピーター・ドラッカー](https://ja.wikipedia.org/wiki/%E3%83%94%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%BB%E3%83%89%E3%83%A9%E3%83%83%E3%82%AB%E3%83%BC)が執筆した書籍 「The Practice of Management (現代の経営)」で初めて紹介された。
<br>

- Management BuyOut
M&Aの手法のひとつ。「経営陣による買収」と訳される。
会社の経営陣が株式や事業部門の一部を買い取ることで、経営権を得ること。

***
**[記載した応用情報技術者試験の記事まとめ](https://qiita.com/MetroOsamu/items/550001240d76e24f505f)**
SNS作ったニャ


![](https://yuis.xsrv.jp/images/ss/ShareX-240722T032428-GvJ2qTbm~chrome-Nyapp_-_Google_Chrome.png)

↑ 外観

とり急ぎのシェアですので、あしからず。

ユーザー作成すると、フォロー・投稿・コメント・プロフィール編集・チャットなどができます。

### 技術スタック

- Nginx, Mongo, Next.js v12, React.js, etc.

### 免責

ただいま完全無保証でのご提供になります。
アプリ内でも言及していますが、クローズドβテスト段階のため、現段階ではお友達等への拡散は控えていただけると助かります。

[https://nyapp.buzz/](https://nyapp.buzz/?qt)

### 課題

また、作り始めたはいいものの、どのようなSNSとするか考えかねている状況です。

全ての投稿に強制的に「にゃ。」が付いたら便利だと思ったのでこれ実装していこうかと考えているところなのですが、皆さまどう思われますかにゃ。

MastodonやBlueskyと迷ってたのですが、自由がありそうな独自開発にしましたにゃ。

AT Protocolはわからないけど、ActivityPubに対応するのは積極的に検討したいと思っていますにゃ。

FediverseなSNSの運営開発者さんいたらアドバイスなどくださると嬉しいですにゃ。
Slack APIや連携先から投稿するときのメンションはアプリとは記述が違うんだぜ

# 概要
外部からSlackへ投稿するときのメンションはアプリとは記述が違うんだぜ。
`＠channel`じゃなくて`<!channel>`みたいな書き方があるんだぜ。

公式ドキュメントに丁寧に記述があるようですが、若干の初見殺し感があるのと日本語で引っかかる情報があまりなかったので残しておきます。

https://api.slack.com/reference/surfaces/formatting#advanced



# まとめ
こう書くらしい。

| アプリ内の記述 | 外部から投稿するとき |
|:-:|:-:|
| <span>@</span>channel|\<!channel>|
| <span>@</span>here|\<!here>|
| <span>@</span>everyone|\<!everyone>|
| <span>@</span>`アカウント`|\<@`アカウントID`>|
| <span>@</span>`ユーザグループ`|\<!subteam^`ユーザグループID`>|

例えば`@channel`を使用したいときは`<!channel>`と投稿設定に書いておきます。
すると投稿する際に`<!channel>`が`@channel`へ変換されてメンションが機能します。

ほえ〜すっげ。

```diff_JavaScript
// GASでの例
// チャンネル #general に投稿する
slackApp.postMessage("#general", `
-    @channel
+    <!channel>
    お疲れさまです！
    投稿内容が云々〜`
);
```

こういうことか。



## アカウントやユーザグループIDについて
アカウントやユーザグループ、チャンネルには識別用のIDが振られています。
以下は公式の例に掲載されているものを持ってきています。大文字英と数字の部分がID。
> ユーザメンション：　　　　`<@U012AB3CD>`
ユーザグループメンション： `<!subteam^SAZ94GDB8>`
チャンネルリンク：　　　　`<#C123ABC456>`

チャンネルにもIDが振られており、リンクなども作成ができる様子。

UI上の理由からかIDの存在ってあまり目に晒されないようになっているので、
そんなんあるんかいって感じですね。



## 各種IDの取得方法
API payloadからでも取得できるらしいですがGUIから取得する方法を。

**ユーザ、ユーザグループID**
　各種詳細画面→「その他」→「〜IDをコピーする」でクリップボードにコピーされます。
　詳細画面へはメンバーディレクトリ画面からだと一覧性がありアクセスしやすいです。

**チャンネルID**
　チャンネル右クリ→「チャンネル詳細を表示する」で表示されるモーダルの下部に表示があります。



# 対象
Hubspot,Zapier,Google Apps Scriptあたりでは確認できています。
この記述はSlack APIの仕様であり、思うにツール間連携では基本的にSlack APIを使用しているはずなのでこの記述が必要になる気がしています。
一応書いておくと「全部の連携アプリでそうなの？」って聞かれると全て確認したわけではないので断言はできません。

とはいえ、ちょいちょいっと試せるのでメンションがうまくできない際には是非試してみてください。




# 参考にさせていただいた記事

おかげさまでメンションが機能しております。感謝です。

https://qiita.com/koya_kimura/items/efaa694718da1de5bdb0

https://qiita.com/ryo-yamaoka/items/7677ee4486cf395ce9bc

https://api.slack.com/reference/surfaces/formatting#advanced
WiX4 ビルド構成の種類に応じて、変数を設定

[WiX v4](https://wixtoolset.org/)で、ビルド構成の種類に応じて、変数を設定する。

#### *****.wixproj
```xml
<PropertyGroup>

    <Configurations>Debug;Release;Hoge</Configurations>
</PropertyGroup>
```
- Debug
- Release
- Hoge
の、ビルド構成です。

#### Common.wxi
```xml
<?xml version="1.0" encoding="utf-8"?>
<Include xmlns="http://wixtoolset.org/schemas/v4/wxs">
  <?if $(Configuration) = Hoge?>
  <?define ReadmeFilePath="..\Files\a.txt"?>
  <?else?>
  <?define ReadmeFilePath="..\Files\b.txt"?>
  <?endif?>
</Include>
```

Hogeでは、a.txt。それ以外では、b.txtを変数に設定

##### 参照
[Preprocessor](https://wixtoolset.org/docs/tools/preprocessor/)


#### Package.wxs

```xml
<?include Common.wxi?>
<Wix xmlns="http://wixtoolset.org/schemas/v4/wxs" xmlns:ui="http://wixtoolset.org/schemas/v4/wxs/ui">

    <Component Directory='INSTALLFOLDER' >
        <File Source="$(ReadmeFilePath)" />
    </Component>
```

### メモ
サンプルや解説があまり無いため、GitHubで、コードを検索して参考にしました。
ポートフォリオ的なもの

来年から情報系の大学院生になる（予定）で、人生をエンジニアリングに捧げる覚悟が固まりつつあるので自分のエンジニアとしての略歴を証明できるようなサイトを作っておこうと思う。知識のアップデートと共に更新するよてい。
信号処理入門書籍

# 信号処理入門書籍
個人メモです


[The Scientist and Engineer's Guide to Digital Signal Processing](https://www.dspguide.com/pdfbook.htm)

[Foundations of Signal Processing](https://fourierandwavelets.org/FSP_v1.1_2014.pdf)

[Free DSP Books on the Internet](https://www.dsprelated.com/showarticle/56.php)


[PHYSICAL AUDIO SIGNAL PROCESSING](https://ccrma.stanford.edu/~jos/pasp/pasp.html)

[Getting Started With Reverb Design, Part 2: The Best Papers](https://valhalladsp.com/2021/09/22/getting-started-with-reverb-design-part-2-the-foundations/)

(Speaker Cab Modelling Part II: Impulse Response Modelling, Theory and Practice)[https://z2dsp.com/2018/07/10/impulse-response-modelling/]
【マインクラフト（統合版）】Websocketサーバーを使って二段ジャンプを実装してみました

# はじめに

以下のように２回目のジャンプボタンで二段ジャンプが発動します。
![二段ジャンプ](https://socket-manager.github.io/document/minecraft-contents/img/double-jump/double_jump_min.gif "二段ジャンプ")

一度ジャンプして着地するかしないかのタイミングで以下のように画面右端にガイドが表示されます（赤枠の部分）。
そのタイミングでもう一度ジャンプボタンを押すと発動します。
<img src="https://socket-manager.github.io/document/minecraft-contents/img/double-jump/double_jump_guide.png" height="600px" width="728" />


# 動作環境

<dl>
    <dt>プラットフォーム</dt>
    <dd>Windows10</dd>
    <dt>マインクラフト（統合版）</dt>
    <dd>Windows Edition v1.21.2</dd>
    <dt>socket-manager</dt>
    <dd>v1.13.3</dd>
    <dt>言語</dt>
    <dd>PHP v8.2.4（v8.1.0以降）</dd>
</dl>


# 動作確認手順

socket-managerでWebsocketサーバーを起動後、マインクラフトからの接続が完了すれば二段ジャンプを含めた各種コンテンツが使えるようになります。

:::note info
socket-managerの導入方法やビヘイビアパックの所在については以下のページでご紹介していますのでご興味のある方はご覧ください。
:::

https://qiita.com/glasses_seven/items/433ac9d9fcbdb72c6d18/

:::note info
今回は特別なアイテムは使用していませんが通信量を減らすためfunctionコマンドを使用していますのでビヘイビアパックを適用しておく必要があります。
ビヘイビアパックの適用方法については以下のページでご紹介しています。
:::

https://qiita.com/glasses_seven/items/a7d276b44c9437e7b0a4/


# サーバーサイドの実装

今回はジャンプイベントが発生した時に送信される"PlayerTravelled"というサブスクライブイベントを使用しています。
"PlayerTransform"の上位版のようで`travelMethod`というパラメータ値をみてそのイベントがジャンプイベントなのかそれ以外なのかを判断できるようになっています。

サブスクライブイベントの処理内容については以下の記事をご覧ください。

https://socket-manager.github.io/document/extra-minecraft.html#send

注意しないといけないのが、この"PlayerTravelled"イベントはジャンプイベントが発生した時に１回だけ発行されるわけではありません。
最初にジャンプイベントが発生したタイミングから着地するまでの間はプレイヤーの移動距離に応じて複数回イベントが発生しています。

このような性質があるため二段ジャンプを連発し過ぎたり、ジャンプブースト（effectコマンドの設定値）を高く設定し過ぎたりするとラグが発生する事があるので注意が必要です。

実装内容の詳細は他のコンテンツも含めて以下のページでご紹介していますのでご興味のある方はご覧ください。

https://socket-manager.github.io/document/minecraft-contents/double-jump.html


# おわりに

今回はジャンプブーストの`effect`コマンドをパーティクルなしで実行していますが、画面右端のガイド表示は残ってしまいました。
しかし２回目のジャンプタイミングを合わせるのにコツがいるので、むしろ表示してくれて有り難い存在になってくれたということで結果オーライです。

たまにラグが発生した時に遅延してガイド表示されることがありますが、その時はボーナスタイムだと思って楽しんでくださいｗ
【マインクラフト（統合版）】Websocketサーバーを使って「はかいの矢」を作ってみました

# はじめに

以下のように矢を放った場所が爆発します。
![はかいの矢](https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/arrow_explode.gif "はかいの矢")

# 動作環境

<dl>
    <dt>プラットフォーム</dt>
    <dd>Windows10</dd>
    <dt>マインクラフト（統合版）</dt>
    <dd>Windows Edition v1.21.2</dd>
    <dt>socket-manager</dt>
    <dd>v1.13.3</dd>
    <dt>言語</dt>
    <dd>PHP v8.2.4（v8.1.0以降）</dd>
</dl>


# 「はかいの矢」を取得

socket-manager環境のビヘイビアパック／リソースパックなどのアドオンパックを適用しておけば、以下の方法でユニークアイテムとして「はかいの矢」が手に入ります。

### ショップで購入する場合

以下のショップで購入できます。

https://qiita.com/glasses_seven/items/e77bfb43baf55e35680b/

### コマンドで取得する場合

以下はワールドオーナーやシステム組み込み用としてコマンドで取得する方法です。
<img src="https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/command_arrow_explode.png" height="600px" width="728px" />

<img src="https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/get_arrow_explode.png" height="600px" width="728px" />

あとはsocket-managerでWebsocketサーバーを起動後、マインクラフトからの接続が完了すれば「はかいの矢」を含めた各種コンテンツが使えるようになります。

:::note info
socket-managerの導入方法やアドオンパックの所在については以下のページでご紹介していますのでご興味のある方はご覧ください。
:::

https://qiita.com/glasses_seven/items/433ac9d9fcbdb72c6d18/

:::note info
アドオンパックの適用方法については以下のページでご紹介しています。
:::

https://qiita.com/glasses_seven/items/a7d276b44c9437e7b0a4/


# 「いなずまの矢」との使い分け
以下のようにスロットを置き換える事で「いなずまの矢」との使い分けができます。

:::note info
サイトの容量制限の都合上ファイルを４つに分けて掲載しています。
:::

最初に「いなずまの矢」を左のスロット、「はかいの矢」を右のスロットに入れています。
![スロットアイテム確認](https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/arrow_slot_change1.gif "スロットアイテム確認")

この状態で矢を射ると「いなずまの矢」が放たれます。
![いなずまの矢を放つ](https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/arrow_slot_change2.gif "いなずまの矢を放つ")

次に「いなずまの矢」を「はかいの矢」の右のスロットへ移動します。
![スロット置き換え](https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/arrow_slot_change3.gif "スロット置き換え")

この状態で矢を射ると「はかいの矢」が放たれます。
![はかいの矢を放つ](https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/arrow_slot_change4.gif "はかいの矢を放つ")

スロット番号は以下のように左から順番に割り振られています。
アイテム使用時は若い数字の方が優先して使用されます。
<img src="https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/bottom_slot.png" height="600px" width="728px" />

:::note info
スロット番号についてはインベントリの詳細も含めて以下のページで詳しく説明されています。
:::

https://minecraft.fandom.com/ja/wiki/%E3%82%A4%E3%83%B3%E3%83%99%E3%83%B3%E3%83%88%E3%83%AA

:::note info
「いなずまの矢」については以下のページでご紹介しています。
:::

https://qiita.com/glasses_seven/items/a34873dfb559e49d5095/


# サーバーサイドの実装

今回も「いなずまの弓」を作った時と同様に`ItemUsed`のサブスクライブイベントを使用しています。
サブスクライブイベントの処理内容については以下の記事をご覧ください。

https://socket-manager.github.io/document/extra-minecraft.html#send

実装内容は「いなずまの矢」とほとんど同じです。
「いなずまの矢」の場合は最後にsummonコマンドで雷を呼び出していましたが、今回はエンドクリスタルを呼び出しているところが異なります。

実装内容の詳細は他のコンテンツも含めて以下のページでご紹介していますのでご興味のある方はご覧ください。

https://socket-manager.github.io/document/minecraft-contents/arrow-explode.html


# おわりに

先に作っていた「いなずまの弓」とコンボするとこんなイメージ。
![いなずまの弓とコンボ](https://socket-manager.github.io/document/minecraft-contents/img/arrow-explode/combo_explode.gif "いなずまの弓とコンボ")

あまり使い過ぎるとワールド地形が悲惨な事になるので注意しましょう。
WASABI CLOUD NASを試す（１）

[WASABI CLOUD NAS](https://wasabi.com/ja/products/cloud-object-storage/cloud-nas)を試してみます。
前半は使えるようになるまで、後半をポリシーについて書きます。
公式ドキュメントは[こちら](https://docs.wasabi.com/docs/wasabi-cloud-nas)

# 無償トライアルで使えるようにするまで
## アカウント作成
まずは上の[リンク](https://wasabi.com/ja/products/cloud-object-storage/cloud-nas)を開き、**無償トライアル**をクリック

※注意
https://wasabi.com/ トップページのSign Up（日本語だと"無償トライアル"）やTry Wasabi Free（日本語だと"無償トライアルはこちらから"）ではなく、上記URLからリンクを開く。
右上のロゴがWasabi Cloud NASですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/5c00e874-ca6f-908e-7a3a-508435905bd5.png)
（違うページからアカウント作成しようとするとロゴがwasabi hot cloud storageになっている。ここからでもできるかもしれないけど四苦八苦したあげく、最終的にできたかどうかはもう覚えていない）
<img width="320" alt="WasabiWOSBlackLetters" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/0ca279f7-17d7-a652-c4be-d65eca102f97.png">


（以降は迷うところはないのでスクショは省略）
フォームに必要事項を入力して**アカウントを作成する**をクリック

**Wasabiフリートライアルへのお申し込み、ありがとうございます。** というメールが届くので、メール内の**アカウントを作成する**をクリックすると30日無料トライアルが開始されます。

パスワードを作成してログイン。

**無料トライアルを試す**をクリック。

**Cloud NAS専用ソフトウェアをダウンロードしてください。** のリンクをクリックしてインストーラーをダウンロードします。
（これを書いている2024/7/22時点での最新版は2.3.0.19ですがここのリンクは2.3.0.17ですね。まだリンクが更新されていないようです。あとからアップデータできるので今は素直に2.3.0.17をダウンロードします。）

## インストールとセットアップ
ダウンロードしたインストーラーを実行します。
チェックボックスにチェックを入れて**Next**をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/1bb8055a-9231-32d1-9921-c52dd68cec3b.png)

全てにチェックが入っていることを確認して、**Install**をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/1479538a-12b2-d075-8ce4-f11ddffe5691.png)

**Finish**をクリック（スクショ略）

GUIが起動してくるので、無償トライアルのアカウント開設時のメールアドレス（ルートアカウトってやつ）と初回ログイン時に作成したパスワードを入力して**Submit**をクリックしてログイン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/c377aeea-77cb-43df-dc6a-e51ec5807991.png)

**Source Folder**を指定して、**Region**は日本人なのでとりあえずTokyoかOsakaを選択して、こだわりがなければ**Bucket Name**はそのまま、Configureをクリックして（再インストールを繰り返していたらうまくいかないことがあったので）無事に終わることを祈ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/c1760bf4-5b4d-857e-4c0d-e581e525594e.png)

無事におわったようなので**Finish**をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/b5511f22-f5b1-c141-7700-c1f90f390b23.png)

直後の状態。ステータスは**Running**ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/6a267472-7a35-ec15-a8cb-c04af91812a2.png)

**Check Update**をクリックすると2.3.0.19のインストーラーのダウンロードが始まります。
ブラウザのダウンロード履歴で該当ファイルを右クリックして、**リンクのアドレスをコピー**を選択すると[URL](https://s3.us-east-1.wasabisys.com/wcn/Wasabi%20Cloud%20NAS-2.3.0.19.exe)がわかりますね。
さすがWASABI、WASABI上に置かれています。
（思いつきでURLを編集して2.3.0.20はあるか開いてみたら、、、ありました！多分、サポートされませんが無償トライアルだし、ただ紹介してもつまらないからこれを入れてみました。）

ダウンロードしたインストーラーを実行して、初期インストールと同じように進めます。
違いはこの画面。まだ運用していないはずなので構わず**OK**をクリックして進めましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/07cebfad-3f5a-9586-adea-513ce25dfce8.png)

UIに違いはなく、バージョンアップしていますね。（本来は2.3.0.19になるべき、7/22現在）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839497/57384c86-a467-c07e-4d03-ec3514499335.png)

[後半](https://qiita.com/tsurun2/items/da1f12ee409ccb540ca7)に続く。
Excelマクロで仕事効率化（初心者向け）(4) | ChatGPTの利用


<img width=A%><img width=100% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/fe096a61-b3d9-9207-592d-f922d2c18b26.jpeg">

# はじめに

今回は、ExcelマクロでChatGPTのAPIを扱ってみたいと思います。

なぜ、私がExcelマクロの記事を書くようになったかは、以下の記事でご確認いただけると幸いです。

https://qiita.com/ogi_kimura/items/2bd4743c529082e76e96

また、前回の記事ではVBAを使って請求書をDPFファイルで一括出力するプログラムについて記述しました。興味がありましたら、ご確認いただけると幸いです。

https://qiita.com/ogi_kimura/items/099d7c04e3e3b2358e87

# この記事を書こうと思った理由
　特に大きな企業となると、会社員・サラリーマンは、一日のほとんどを「資料作成」や「社内調整」に時間を費やしているのではないでしょうか。かく言う私もそうでして、上司や役員に対して案件の必要性を理解してもらうためにパワーポイントで資料を作ったり、今度はその資料の意味が分からないと言われて、直接説明に行き、宿題をたくさんもらってまた時間がかかったり...一日の大半はクリエイティブとは言えない作業で満たされてしまいます。
　これを常態的に続けていると、10年後・20年後の私が習得した技術やノウハウは、現在の会社の中でしか通用しないものになってしまいます。もちろん、自身の市場価値も余り期待できませんし、仮に転職をしようと考えた時、条件交渉などで不利になるでしょう。このような社内でしか通用しない「資料作成」や「社内調整」などの作業を、「生成AI」に担わせることができると考えて、「ChatGPT」のAPI処理をVBAで実装しようと思い立ちました。
　日本の会社員が、少しでもクリエイティブな仕事をできるようになることを願います。

# 概要説明
　プログラミングの説明をする前に、先ずは今回のExcelマクロの概要説明をします。「標準モジュール」は3つあり、以下のようにしています。
 　今後の記事では、この概要に従い、プログラムの実装を行っていきたいと思います。

### 模式図
　Excelマクロは、OpenAIにAPIを投げて、その結果を表示させることをします。
 後述しますが、予めOpenAIにユーザ登録をして、APIを利用できるようにする必要があります。

![structure.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/71ecbd2d-7ed8-cc15-4f7d-efcc6530f23c.jpeg)


### 各標準モジュールについて
　標準モジュールそれぞれについて、役割を示します。
 「Json」については、後日の記事で説明します。

| 標準ﾓｼﾞｭｰﾙ | 役割 |
|:-|:-|
| GPT  |  Excelマクロからの指示(実行ボタン押下など)を受けて、APIをOpenAIに投げて、その結果をExcelに表示します。 |
| ChatGPTLib  | Jsonを作成するための補助を行います。ChatGPTでは、誰目線での回答をしてほしいのかを表す「assystant」と、自身の質問を記述する「user」をAPIに載せる必要があり、それをJson形式に記述するための手伝いをしています。この標準ﾓｼﾞｭｰﾙは、既に賢い人が作ったものでそのまま持ってきます。|
| JsonConverter  | 文字列をJson形式に変換したり、逆にJson形式を文字列に変換したりします。 この標準ﾓｼﾞｭｰﾙは、既に賢い人が作ったものでそのまま持ってきます。 |

# おわりに
　今回はExcelマクロでChatGPTのAPIを利用するための準備として、概要説明をしました。
 次回からは、「Jsonについて」「OpenAIのユーザ登録について」「Dictionaryについて」を説明していきたいと思います。
 次々回は、プログラミングに進めるかと思います。
SQL初心者必見！ゼロから学べる実践入門

はじめに
---
SQL（Structured Query Language）は、データベースとやり取りするための言語です。

``` .SELECT　データの取得
SELECT first_name, last_name
FROM users;
```

``` .WHERE　条件付きデータ取得
SELECT first_name, last_name
FROM users
WHERE user_id = 1;
```

``` .INSERT INTO　データの挿入
INSERT INTO users (first_name, last_name)
VALUES ('John', 'Doe');
```

``` .UPDATE　データの更新
UPDATE users
SET last_name = 'Smith'
WHERE user_id = 1;
```

``` .DELETE　データの削除
DELETE FROM users
WHERE user_id = 1;
```

``` .COUNT　行数をカウント
SELECT COUNT(*)
FROM users;
```

``` .INNER JOIN 2つのテーブルの共通部分を取得
SELECT users.first_name, orders.order_date
FROM users
INNER JOIN orders ON users.user_id = orders.user_id;
```

``` .サブクエリ
SELECT first_name, last_name
FROM users
WHERE user_id = (
    SELECT user_id
    FROM orders
    ORDER BY total_amount DESC
    LIMIT 1
);
```

``` .INDEX　インデックス
CREATE INDEX idx_user_id ON users(user_id);
```
インデックスは、データの検索速度を向上させるためのデータ構造です。主キーやよく検索されるカラムにインデックスを作成することで、クエリのパフォーマンスが向上します。

``` .トランザクション
BEGIN;

INSERT INTO orders (user_id, order_date) VALUES (1, CURRENT_DATE);
INSERT INTO payments (order_id, amount) VALUES (1, 100.00);

COMMIT;
```
トランザクションは、一連のデータベース操作をまとめて処理するための機能です。
トランザクションのACID特性（Atomicity, Consistency, Isolation, Durability）を理解し、データの整合性を保つようにします。

まとめ
---
SQL（Structured Query Language）は、リレーショナルデータベースのデータを管理・操作するための標準言語です。
主な機能には、データの取得（SELECT）、挿入（INSERT）、更新（UPDATE）、削除（DELETE）が含まれます。
エンディアン（Endianness）とは何か？

## はじめに

エンディアン（Endianness）とは、コンピュータシステムが複数バイトで構成されるデータをメモリにどのように配置するかを表す概念です。この概念は、特にネットワークプログラミングやデータフォーマットの理解において非常に重要です。

## エンディアンの種類

エンディアンには主に2種類あります。

### ビッグエンディアン（Big-endian）

ビッグエンディアンでは、最上位バイト（Most Significant Byte, MSB）が最初に来ます。つまり、バイト順序は左から右に向かって降順に配置されます。

- 例：32ビットの数値`0x12345678`をビッグエンディアンでメモリに配置すると、次のようになります：

```
アドレス:  0   1   2   3
内容:    12  34  56  78
```

### リトルエンディアン（Little-endian）

リトルエンディアンでは、最下位バイト（Least Significant Byte, LSB）が最初に来ます。つまり、バイト順序は左から右に向かって昇順に配置されます。

- 例：32ビットの数値`0x12345678`をリトルエンディアンでメモリに配置すると、次のようになります：

```
アドレス:  0   1   2   3
内容:    78  56  34  12
```

## エンディアンの重要性

エンディアンは、特に異なるシステム間でデータをやり取りする際に重要です。例えば、ネットワークプロトコル（TCP/IPなど）では、通常ビッグエンディアン（ネットワークバイトオーダー）を使用します。これは、異なるアーキテクチャのマシン間でデータをやり取りする際に一貫性を保つためです。

### エンディアン変換の必要性

ネットワークプログラミングでは、ホストバイトオーダー（システム固有のエンディアン）とネットワークバイトオーダー（ビッグエンディアン）の変換が必要です。

```python
import socket

# ホストバイトオーダーからネットワークバイトオーダーへ変換（32ビット整数の場合）
host_order = 0x12345678
network_order = socket.htonl(host_order)
print(hex(network_order))  # 出力: 0x78563412

# ネットワークバイトオーダーからホストバイトオーダーへ変換
converted_back = socket.ntohl(network_order)
print(hex(converted_back))  # 出力: 0x12345678
```

## Pythonでのエンディアン操作

Pythonでは、`struct`モジュールを使用してバイナリデータのエンディアンを操作することができます。
### ビッグエンディアンの例

```python
import struct

# 32ビットの整数 0x12345678 をビッグエンディアンでパック
big_endian_data = struct.pack('>I', 0x12345678)
print(big_endian_data)  # 出力: b'\x12\x34\x56\x78'

# アンパックして確認
unpacked_value = struct.unpack('>I', big_endian_data)[0]
print(hex(unpacked_value))  # 出力: 0x12345678
```

### リトルエンディアンの例

```python
import struct

# 32ビットの整数 0x12345678 をリトルエンディアンでパック
little_endian_data = struct.pack('<I', 0x12345678)
print(little_endian_data)  # 出力: b'\x78\x56\x34\x12'

# アンパックして確認
unpacked_value = struct.unpack('<I', little_endian_data)[0]
print(hex(unpacked_value))  # 出力: 0x12345678
```
Xcode16 Beta 3 を入れると Loading a plug-in failed というエラーが出る

## 解決策

Xcode 16 Beta 2 を先に入れると解決する

## 概要

BETAの Xcode 16（BETA3）をダウンロードし実行すると、`Loading a plug-in failed`というエラーが出る

Appleの不具合の様子
> Xcode will fail to launch for some users. Users who have not installed Xcode 16 beta or Xcode 16 beta 2 will see a “Loading a plug-in failed” alert. (131066390)
> Workaround: Use xcode-select -s $PATH to choose Xcode 16 beta 3. Then run xcodebuild -runFirstLaunch. Then Xcode will be able to launch.

https://developer.apple.com/documentation/xcode-release-notes/xcode-16-release-notes

DeepLで翻訳すると..

> 一部ユーザーで Xcode の起動に失敗する。Xcode 16 betaまたはXcode 16 beta 2をインストールしていないユーザーには、"Loading a plug-in failed "のアラートが表示されます。(131066390)
回避策 Xcode 16 beta 3 を選択するために xcode-select -s $PATH を使用してください。その後、xcodebuild -runFirstLaunch を実行してください。すると Xcode が起動できるようになります。

Xcode16 Beta 2を先に入れると解決しました :clap: 

## 参考

以下の記事を参考にさせていただきました。
- https://hiiro-game.seesaa.net/article/504035791.html

## あとがき

- iOS18からのアプリアイコンの変更（Dark, Tinted)を確かめようと思ったら引っかかりました。

良かったらいいねください！！