OmniAICreator/Qiita-1.07M huggingface dataset:
アドラーの言葉で気軽に届ける「生きるためのヒント」

![スクリーンショット 2024-06-27 22.22.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772350/56bc6dd3-9e8a-7069-0162-620a95e5f433.png)


# アドラー心理学とは
アドラー心理学については、以前Node-REDを活用したLINE Botに関する記事でも触れたので、過去の投稿を参考にいただきたい。(読んでもらいたいので、あえて触れない)

https://qiita.com/chihirot134/items/5544d62d71fae2927e76

今回はいつでもアドラー心理学に基づいた言葉を受け取れるよう、ランダムに名言を表示できるアプリを作ってみた。

# 使用環境・アプリケーション
・CodePen
　[Random Quote Generator](https://codepen.io/DigitalBanana/pen/WxJrKb)をベースに作成

・jsQR（QRコード生成)
・gyazo.com（作成したQRコードを表示させるためのURLを生成)

# ボタンもデザイン可能
ボタンデザインは以下のサイトから取得。
HTMLとCSSソースコードを載せてくれているので、初心者にもオススメ！
[CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！](https://jajaaan.co.jp/css/button/)

# 完成版テンプレート(codepen)
[Random Quote Generator by Adlerian Psychology](https://codepen.io/Chihirot134/pen/KKLoZqE)

# 完成版
[Random Quote Generator by Adlerian Psychology](https://coruscating-frangipane-45f350.netlify.app)
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">アドラーの言葉をランダムに表示するwebアプリ。<a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%89%E3%83%A9%E3%83%BC%E5%BF%83%E7%90%86%E5%AD%A6?src=hash&amp;ref_src=twsrc%5Etfw">#アドラー心理学</a> <a href="https://twitter.com/hashtag/%E5%90%8D%E8%A8%80?src=hash&amp;ref_src=twsrc%5Etfw">#名言</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/AbQInsbFhi">pic.twitter.com/AbQInsbFhi</a></p>&mdash; chihirot134 (@chihirot_kate) <a href="https://twitter.com/chihirot_kate/status/1806319145522438325?ref_src=twsrc%5Etfw">June 27, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 使ってみた感想
アドラー心理学に基づいた名言を93個表示させているため、重複することなく楽しめた。
アドラー心理学の考え方を活かすことで、自分自身を大切にしながら人間関係を良好にしていくことができるようになるので、ぜひ気軽に取り入れていただきたい。

# もっと学びたい人向け
アドラー心理学と言えば、ベストセラーとなった『嫌われる勇気』(著者:岸見 一郎/古賀 史健)だが、他にもおすすめの本を厳選して紹介してくれている以下サイトをぜひ参考に。

[アドラー心理学おすすめ本ランキング15選！ぜひとも読みたい必須本を厳選](https://life-and-mind.com/adler-psychology-books-56686#3-1)
基本情報に合格した話

みなさん、初めまして。そして初投稿になります。
今回は基本情報技術者試験に合格した話をさせていただきます。
拙い文章になると思いますが、よろしくお願いいたします。

この記事を読んでいただくうえでの前提条件です。

## 前提条件
- 勉強時間は2ヶ月
- 2年制専門学校の現在２年生
- ITやプログラムは入学してから勉強を開始
- テキストは合計で4冊購入+過去問道場
- ITパスポートは取得済
- 経歴は大学文系→地方銀行 入行(1年たたずに退社)→専門学校入学

## 取得を目指した動機
- 今まで学んできたことを形として残したかった
- 就職先で基本情報技術者試験の合格が昇進の必須要件と聞き、早めに取得しておきたかった
- 暇だった

## やったこと
試験概要に関しては皆さんご存じだと思うので省きます。
A試験B試験でそれぞれ分けて話します。
### 科目A試験
これに関しては有名な「過去問道場」さんとFOM出版さんの「よくわかるマスター 令和5-6年度版
基本情報技術者試験 対策テキスト」を活用しました。
基本的には過去問道場で問題を解きつつ、隙間時間でテキストを読んでいました。
最終的には2000問くらい解き、テキストも10周くらいはしたと思います。

### 科目B試験
こちらは翔泳社さんの「情報処理教科書 出るとこだけ！基本情報技術者［科目B］第3版 」のみで対策しました。セキュリティの問題はA試験と重複する部分があり、プログラムの問題はこの本に書いてある「トレース」という方法で十分に対策することができました。

## 本番どうだったのか
A試験に関しては時間はあまりましたが、不明または自信をもって正答しているといえない問題が30問近くありました。
60問中の30問なんでこのままいくとやばいと思いつつ、過去の記憶をたどり未来に思いをはせ、祈るように見直しをしました。

B試験に関してはセキュリティを先に解き、プログラムをざっと目を通し、すぐに答えが出せそうな問題を先にやりました。ただ、ここでは圧倒的に時間が足りなくなり、3問くらい勘で答えました。

## 結果はっぴょおおおおおおう
祈る思いで試験終了ボタンを押しましたが、結果はなんと「合格」でした。←この記事のタイトルが合格した話なので、、、、、

A試験 600 B試験 740　で合格できましたがA試験が6割ぴったりで本当にギリギリでした。
テクノロジーの分野が弱いと事前にわかっていたのでもう少し対策しておくべきだと反省しました。
応用情報技術者試験を受験するときはテクノロジー、数学を徹底的にやりこみたいと思います。
「CPUの創りかた」の回路シミュレーション(8) --- p102 発振回路

ブラウザで動作してインストール不要の下記の
https://www.falstad.com/circuit/circuitjs.html
回路シミュレータで、「CPUの創りかた」で紹介されていた回路の動作を確認してみました。

今回は p102 の「発振回路」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549839/bc903b4b-b585-08ca-1b45-f7db3d93050f.png)

## 回路動作の確認
$\text A\sim\text D$ の電圧波形を下図に示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549839/8fbb2098-5441-8750-a175-785733e4cb61.png)

発振周波数は
$f\fallingdotseq\dfrac{1}{2.2~CR}=\dfrac{1}{2.2\times10~\mu\text F\times3.3~\text{k}\Omega}=13.8~\text{Hz}$

$\text A$ 点の電圧波形の振幅を見ると、$-2.5\sim+7.5~\text V$ となっており、$Vcc=5~\text V$ のときの $\text{CMOS}$ インバータの入力電圧範囲の $-0.5\sim5.5~\text V$ を超えています。この対策として、入力保護用に $100~\text k\Omega$ が挿入されています。この抵抗と、$\text{CMOS}$ ロジック $\text{IC}$ の入力に入っている保護用ダイオード ( $\text{D1}$ と $\text{D2}$ ) で構成される電圧クリッパーにより、$\text D$ 点の電圧波形は $-0.25\sim5.25~\text V$ の範囲に収まっています。

## シミュレータの簡単な使用法
- マウス・ホイールで回路図全体を拡大縮小できます。
- Altキー + ドラッグで回路図全体を移動できます。
- マウス・ポインタをオシロスコープのプロットに近づけるとカーソルが現れて、そこの値が表示されます。
- オシロスコープ領域の境界付近にマウス・ポインタを置いて現れる水色のラインをドラッグすると、回路図領域とオシロスコープ領域の境界を上下に移動できます。

## シミュレーションの実行方法
- シミュレーションを実行するには下記の回路ファイルをコピーして、シミュレータの File → Import From Text... で開くパネルに貼り付けてください。
```
$ 1 0.00009999999999999999 2.3728258192205156 50 5 50 5e-11
I 400 208 512 208 0 0.5 5
c 400 112 512 112 0 0.00001 -1.0483282920913752 0.001
r 400 112 400 208 0 3300
I 320 208 400 208 0 0.5 5
w 512 208 512 112 0
w 192 208 192 112 0
w 192 112 400 112 0
r 192 208 272 208 0 100000
207 400 208 400 256 4 B
207 192 208 192 256 4 A
207 512 208 512 256 4 C
d 320 208 320 176 2 default
d 320 240 320 208 2 default
R 320 176 320 144 0 0 40 5 0 0 0.5
g 320 240 320 256 0 0
x 289 195 308 198 4 14 D1
x 288 231 307 234 4 14 D2
w 272 208 320 208 0
207 272 208 272 256 4 D
o 9 4 0 x81216 5 0.1 0 2 2 0 9 3 0.025 0 A
o 18 4 0 x81216 5 0.1 0 2 2 0 18 3 0.025 0 D
o 8 4 0 x81216 5 0.1 0 2 2 0 8 3 0.025 0 B
o 10 4 0 x8121e 5 0.1 0 2 2 0 10 3 0.025 0 C
```
PostgreSQLでスキーマを指定をして、

# test.test09みたいにPostgreSQLしないようにする設定

PostgreSQLでスキーマを指定せずにテーブルをクエリするには、search_pathを設定する必要があります。これにより、特定のスキーマを優先的に検索することができます。

方法1: セッションごとに設定する
データベースセッション中にsearch_pathを設定するには、次のSQLコマンドを使用します：

postgreSQL
```
SET search_path TO test09;
```
C++で構造体の比較演算子に関するエラーの解決方法

## エラー内容

C++で整数をひとつ持つ構造体 `MyStruct` と比較演算子 `operator==` を定義しました．

```cpp
struct MyStruct{
    int val;

    MyStruct(int val) : val(val) {}

    bool operator == (const MyStruct& rhs) {
        return val == rhs.val;
    }
};

int main() {
    std::pair<MyStruct, MyStruct> a(10, 20), b(10, 20);

    // pairの比較
    std::cout << (a == b) << std::endl;

    return 0;
}
```

`std::pair<MyStruct, MyStruct>` の比較を行うと，以下のエラーが発生しました．

```
error: no match for ‘operator==’ (operand types are ‘const MyStruct’ and ‘const MyStruct’)
  641 |     { return __x.first == __y.first && __x.second == __y.second; }
```

## 解決方法

このエラーは，比較演算子が `const` 修飾されていないことが原因です．比較演算子を以下のように修正することでエラーを解決できます．

```cpp
bool operator == (const MyStruct& rhs) const {
    return val == rhs.val;
}
```

## エラー原因

`std::pair` の比較では，要素の比較時に `const` なオブジェクトを使うため，比較演算子に **`const` メソッド**が必要になります．**`const` メソッド**として定義することで，`const` なオブジェクト同士の比較が可能になります．

### `const` メソッドとは

`const` をメソッドに付けることで，その関数がオブジェクトの値を変更しないことを保証します．

特に，`const` オブジェクトから呼び出すことができます．`const` でないメソッドは `const` オブジェクトから呼び出すことができません．

これが今回の原因で，`std::pair` では `const` オブジェクトを用いているため，比較時に非 `const` メソッドの `operator==` を呼び出せなかったということです．

## `friend` 関数として定義

```cpp
friend bool operator == (const MyStruct& lhs, const MyStruct& rhs) {
    return lhs.val == rhs.val;
}
```

このように `friend` 関数として定義しても動作します．

### `friend` 関数とは

特定のクラスの非メンバ関数でありながら，そのクラスのプライベートメンバにアクセスできる関数です．

今回の例なら，グローバルに `operator==` をオーバーロードして，`MyStruct` を引数に取り，`MyStruct` のメンバにアクセスしています．

今回は `val` が `public` ですが，`val` が `private` であってもこの関数は動作します．

## 最後に

競技プログラミング用の `modint` 構造体で `pair` を用いた時にエラーが出ており，解決に時間がかかったので書きました．

間違いや補足等ありましたらご連絡ください．

## 参考
https://cpprefjp.github.io/reference/utility/pair.html
https://learn.microsoft.com/ja-jp/cpp/cpp/friend-cpp?view=msvc-170
https://wisdom.sakura.ne.jp/programming/cpp/cpp24.html
https://wisdom.sakura.ne.jp/programming/cpp/cpp28.html
Ruby on Rails ECサイト作成

## はじめに
Zennの記事を元にECサイトを作成してみました。
今回はオリジナルではありませんが今後ECサイトを作りたいので練習で制作しました。とても勉強になったのでECサイトを作ってみたい方はぜひチャックしてみてください。

https://zenn.dev/farstep/books/7f169cdc597ada

## 機能紹介
大きく2つに分けることができます。
・ECサイトの管理者側の機能
・ECサイトを利用する顧客側の機能

どちらもログインすることで閲覧できます。

Githubリポジトリ

https://github.com/Killua0615/ecommerce_practice

### 管理者側以下の内容が確認できます

#### 注文履歴
status は「Normal」「Withdrawn」「Banned」のどれかに変更することができる
![スクリーンショット 2024-06-27 10.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/7fe7644f-aa5e-bd2e-132f-bd347781f270.png)

##### 顧客詳細
過去の注した商品が確認できる
![スクリーンショット 2024-06-27 10.33.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/0988f109-9d47-5b0c-a542-3eb61a2db7a6.png)

#### 　一日の売り上げ・注文数
![スクリーンショット 2024-06-27 10.25.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/67330930-e3f3-f23f-f61b-cdc76dbec059.png)

####  顧客一覧
 ![スクリーンショット 2024-06-27 10.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/80833595-116c-018d-d7ea-79d5faf2d0ba.png)

####  商品一覧
Add New Productから新しい商品を追加できる
![スクリーンショット 2024-06-27 10.38.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/dfcc9ca5-332f-f5bb-964f-322adc839fec.png)

####  商品詳細
在庫の数や商品の編集も可能
![スクリーンショット 2024-06-27 10.39.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/b8adf699-ab7c-1728-26f3-d13fff393d59.png)

### 顧客側以下の内容が確認できます
#### トップページ
![スクリーンショット 2024-06-27 10.46.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/b15c8fe3-3234-2ad6-ddf3-01744986e3f2.png)

#### カート内
![スクリーンショット 2024-06-27 10.48.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/ce219327-1a81-29eb-c188-9311a1ac3d7e.png)

#### 決済ページ
stripeを利用しての決済
![スクリーンショット 2024-06-27 10.51.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/58d4103f-0e79-0a3b-b95a-d425e06a9645.png)

#### 注文履歴
 ![スクリーンショット 2024-06-27 10.53.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/38cd0dd3-ae3a-88a9-84ac-abda6efeba80.png)

 #### メール
 注文後メールが届く
 ![スクリーンショット 2024-06-27 10.55.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/5127a705-12d0-2015-c997-50dafd8ed30e.png)


## 技術構成
### 使用技術
| カテゴリ	 |     技術 | 
|:-----------|:-----------|
| フロントエンド     | HTML, Embedded Ruby (ERB), Tailwind CSS, JavaScript| 
| バックエンド     | Ruby 3.1.2, Rails 7.1.3   |       
| データベース   | PostgreSQL      |    
| 決済機能   | Stripe |    
| 環境構築  | Docker     |    
| データベース   | PostgreSQL      |    
|その他　| Redis|

### ER図
![スクリーンショット 2024-06-27 11.10.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733846/00ceb337-adeb-b52d-b966-fe76d05301e7.png)

## 思ったこと
実際のECサイト運営にも使えるくらいのレベルが高いプロダクトだと感じました。最初の8割までは以前に学習した内容も含まれていたので理解できましたが、後の2割は難しく感じました。
今回作ったウェブアプリを元にオリジナルのECサイトを作りたいと思います！
電車の降り過ごしを防止してくれる天の声

# 電車の降り過ごしを撲滅したい
みなさん電車に乗っていて「うっかり降り過ごしてしまった」なんて経験ありませんか？

私は結構あります…

:::note
・通勤中の満員電車で駅の看板、社内のモニターが見えず、気づいたら降りたい駅を過ぎていた。
・帰りの電車で読書に集中しすぎて最寄り駅を過ぎていた。
:::

目的地に近づくと知らせてくれる天の声のようなWebアプリが欲しい！

＜イメージ＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775986/1c6c0672-4d70-aaee-3f31-0e4d0d865ad6.png)



# 使用環境・ライブラリ
・CodePen
・Vue.js
・位置情報API(Geolocation)
・Netlify


# アイデア
①．スマートフォンやノートPC等のモバイル端末から位置情報を取得する。
②．予め自分が降りたい駅をアプリに登録しておき、１駅前になったらアナウンスが届くようにする。


# 実装①：位置情報の取得
手持ちのモバイル端末から位置情報を取得する。
位置情報API(Geolocation)を用いて現在位置の経度と緯度を取得することができる。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJYdxpP" data-pen-title="【PDS】スマホセンサを試してみる (位置情報編)" data-user="k-tanizawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/k-tanizawa/pen/OJYdxpP">
  【PDS】スマホセンサを試してみる (位置情報編)</a> by zawachin_2024 (<a href="https://codepen.io/k-tanizawa">@k-tanizawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 実装②：目的地まで距離を計算して、１駅前になったらアナウンスをさせる。
実装①で取得できるようにした現在地の緯度・経度と目的地の緯度・経度から距離を計算する。（地球を半径 6,371kmの球体だと思って計算する。）

目的地を有楽町駅として１駅前でアナウンスが届くようにする。
現在位置と目的地の距離を計算して以下のようなアナウンスを表示する。
・<font color="red">**今だ！降りるぞ！**</font>←１駅前になった時
・まだ大丈夫じゃ

１駅前の目安は有楽町線の全長（28.3km）と全駅数（24駅）から1.179km(≒28.3km / 24)と概算する。
また、始発から終点まで50分程度（１駅あたり２分強）なので、余裕をもって１分間隔でアナウンスを送るようにする。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdYXNGj" data-pen-title="最寄りの１駅前でアナウンスしてくれる天の声" data-user="k-tanizawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/k-tanizawa/pen/mdYXNGj">
  最寄りの１駅前でアナウンスしてくれる天の声</a> by zawachin_2024 (<a href="https://codepen.io/k-tanizawa">@k-tanizawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 実際に作ったWebアプリ
ぜひ使ってみてください！
https://marvelous-pika-3046ea.netlify.app/


# その他のアイデア
:::note warn
・目的地をもっと手軽に指定できるようにしたい。
・アナウンスを画面表示だけでなく、バイブレーションやメロディーで知らせる。
:::


まだ、実際に使えていないので、上記の追加機能を実装して、通勤中に使ってみたい。

今度はもっと実用場面に沿った機能を追求したアプリを作ってみたい。


# 参考資料
https://developer.mozilla.org/ja/docs/Web/API/Geolocation

https://qiita.com/kawanet/items/a2e111b17b8eb5ac859a

https://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E3%83%A1%E3%83%88%E3%83%AD%E6%9C%89%E6%A5%BD%E7%94%BA%E7%B7%9A
"無課金"でAWS Specialty Security合格する方法

# ステータス
- AWSを使い始めて1年半
- AWS保有資格
    - AWS Certified Cloud Practitioner（クラウドプラクティショナー）
    - AWS Certified Solutions Architect - Associate (ソリューションアーキテクト-アソシエイト)
    - AWS Certified SysOps Administrator – Associate（アドミニストレーター）
    - AWS Certified Developer - Associate（デベロッパー）
- Specialty資格には初挑戦です！

# AWS Certified Security – Specialty とは
[AWS公式](https://aws.amazon.com/jp/certification/certified-security-specialty/)
- AWS上のセキュリティに関する、セキュリティエンジニア向けの資格
- 受験料 400 USD
- 受験時間 170分
- 試験携帯 65問(選択式)

# なぜ無課金！？
結論、**会社の制度を使い倒せ！！！**
皆さんの会社内にも幅広い制度がありますが内容を知っていますか？
会社員だからこそ生かせるものがたくさんあると思います、ぜひ探してみてください。

# 無課金作戦内容
1. 資格取得支援制度がある
弊社では資格取得を推進するための資格取得支援制度(Skill Ownership制度)があります。
指定の資格に関して、合格できれば受験料が返ってきます！
今回のSCSは対象資格だったのでこちらを利用しました。
→**受験料が無料**
2. 書籍購入補助がある
半年に1万円まで、自己啓発のための書籍を購入できる制度があります。
この制度を利用してSCSの参考書を購入しました！
→**参考書が無料**
3. Udemy学び放題がある
Udemyとはオンラインで学べる学習プラットフォームです。
基本講座ごとにお金がかかりますが、学び放題だったので活用しました！
AWS関連の講座は日本語から英語のものまで豊富な印象です。
→**AWS SCSの基礎講座から、模擬試験まで無料**
4. AWS公式提供の模擬試験や試験提供サイトがある
AWS公式から試験向けにいくつか資料が提供されています。
試験に沿ったサンプル問題を確認できたり、模擬試験を受けられます！
他にもExamTopicといった一部無料で問題を解けるサイトの活用がおすすめです。
→**多数の問題が無料**

# 勉強方法
期間としては2週間に設定

初めの1週間
書籍購入制度で買った[要点整理から攻略する『AWS認定 セキュリティ-専門知識』](https://book.mynavi.jp/ec/products/detail/id=115809)を
毎日寝る前1章ずつ読んで試験の範囲を理解、基礎知識を固める
並行して通勤や出かける際の電車や隙間時間でUdemyを見る
[AWS認定Specialty – Security（SCS-C02）試験 対策トレーニングコース](https://www.udemy.com/course/aws-specialty-security-scs/?couponCode=ST18MT62524)

残りの1週間
・[AWS認定Specialty – Security（SCS-C02）試験 対策トレーニングコース](https://www.udemy.com/course/aws-specialty-security-scs/?couponCode=ST18MT62524)
・[【SCS-C02対応】AWS認定 セキュリティ 専門知識 模擬問題集＋詳解](https://www.udemy.com/course/scs-c02aws/?couponCode=ST18MT62524)
・[【SCS-C02】AWS Certified Security - Specialty | 模擬試験](https://www.udemy.com/course/scs-c02aws-certified-security-specialty/?couponCode=ST18MT62524)
・[Practice Exams | AWS Certified Security – Specialty](https://www.udemy.com/course/practice-exams-aws-certified-security-specialty/?couponCode=ST18MT62524)
・[ExamTopic無料問題](https://www.examtopics.com/)
・AWSサンプル問題
・AWS公式模擬試験
これらをひたすら解きまくる！
英語のUdemyコースはGoogle Chromeの翻訳を使うことで日本語の問題として扱えます。
だいたい60％を超えてきた段階で試験に臨みました。

# 問題傾向
範囲は狭いのでSAAよりは勉強しやすい印象です。
KMSやS3、IAMが多く見られたので詳しくやっておくとよいです。
暗号化の仕組みは普段の学習では触れないので要注意です！

# 最後に
AWSの試験をはじめ、試験料など高騰していると思います。
だからこそ、使えるものをできる限り活用して自身のスキルアップを目指しましょう！
私自身、今後も**無課金**で資格を量産していきたいと思っています！
wslでelixir その148

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
Livebookで、GPIOを操作したフリをせよ。

# 方針
- Agent使う。
- Kino.listen使う。

# setup
```
Mix.install([
  {:kino, "~> 0.10.0"}
])
```

# サンプルコード

```
defmodule Pin do
  use Agent

  def start_link() do
    Agent.start_link(fn ->
        %{"GPIO15": 0, "GPIO16": 0, "GPIO17": 0, "GPIO18": 0}
		end, name: __MODULE__)
	end

  def get() do
    Agent.get(__MODULE__, fn v ->
      "GPIO15 #{v["GPIO15"]}<br>GPIO16 #{v["GPIO16"]}<br>GPIO17 #{v["GPIO17"]}<br>GPIO18 #{v["GPIO18"]}<br>"
    end)
  end

  def toggle5() do
    Agent.update(__MODULE__, fn v ->
      if v["GPIO15"] == 1, do: Map.put(v, "GPIO15", 0) , else: Map.put(v, "GPIO15", 1) 
    end)
  end
  def toggle6() do
    Agent.update(__MODULE__, fn v ->
      if v["GPIO16"] == 1, do: Map.put(v, "GPIO16", 0) , else: Map.put(v, "GPIO16", 1)
    end)
  end
  def toggle7() do
    Agent.update(__MODULE__, fn v ->
      if v["GPIO17"] == 1, do: Map.put(v, "GPIO17", 0) , else: Map.put(v, "GPIO17", 1)
    end)
  end
  def toggle8() do
    Agent.update(__MODULE__, fn v ->
      if v["GPIO18"] == 1, do: Map.put(v, "GPIO18", 0) , else: Map.put(v, "GPIO18", 1)
    end)
  end

  def start(x) do
    Agent.update(__MODULE__, fn v ->
      Map.put(v, x, 1)
    end)
  end

  def stop(x) do
    Agent.update(__MODULE__, fn v ->
      Map.put(v, x, 0)
    end)
  end
end

Pin.start_link()

frame =
  Kino.Frame.new()
  |> Kino.render()

Kino.listen(1000, fn i ->
  content = Kino.Markdown.new(Pin.get())
  Kino.Frame.render(frame, content)
  i + 1
end)

Pin.start("GPIO15")
Process.sleep(3000)
Pin.start("GPIO16")
Process.sleep(3000)
Pin.toggle7()
Process.sleep(3000)
Pin.toggle7()

```

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/efdf3ff7-5362-51fb-f07a-8444d24bcd34.png)



以上。
MySQL データベース作成句 汎用(自分用メモ)

以下の変数にそれぞれ値を入れてから、
全文MySQL上で実行することで、
DBと、ユーザーアカウントを作成可能です。

```sql
-- Required to change each project
SET @db_name = "__my_db_name_here__";
SET @db_username = @db_name;
SET @db_password = "__my_db_password_here__";
-- Optional to change if need
SET @db_charset = "utf8mb4";
SET @db_collate = "utf8mb4_general_ci";

-- CREATE DATABASE
SET @sql = CONCAT('CREATE DATABASE IF NOT EXISTS `', @db_name, '` DEFAULT CHARACTER SET `', @db_charset, '` COLLATE `', @db_collate , '`;');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

-- CREATE USER (localhost)
SET @sql = CONCAT('CREATE USER IF NOT EXISTS ', @db_username, '@`localhost` IDENTIFIED BY \'', @db_password, '\';');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

-- CREATE USER (%)
SET @sql = CONCAT('CREATE USER IF NOT EXISTS ', @db_username, '@`%` IDENTIFIED BY \'', @db_password, '\';');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

-- GRANT (localhost)
SET @sql = CONCAT('GRANT ALL PRIVILEGES ON `', @db_name, '`.* TO ', @db_username, '@`localhost` WITH GRANT OPTION;');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;

-- GRANT (%)
SET @sql = CONCAT('GRANT ALL PRIVILEGES ON `', @db_name, '`.* TO ', @db_username, '@`%` WITH GRANT OPTION;');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
```

上記の文を実行すると、以下のようなSQL句が実行されます。
いつも以下の句でDBを作成していたのですが、
毎回同じ箇所を修正しているので、変数でまとめられそうだと思い作った次第

```sql
CREATE DATABASE IF NOT EXISTS `__my_db_name_here__` DEFAULT CHARACTER SET `utf8mb4` COLLATE `utf8mb4_general_ci`;

CREATE USER __my_db_name_here__@`localhost` IDENTIFIED BY '__my_db_password_here__';
CREATE USER __my_db_name_here__@`%` IDENTIFIED BY '__my_db_password_here__';
GRANT ALL PRIVILEGES ON `__my_db_name_here__`.* TO __my_db_name_here__@`localhost` WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON `__my_db_name_here__`.* TO __my_db_name_here__@`%` WITH GRANT OPTION;
```
インスタンスファミリーの6つのカテゴリーをまとめてみた

*汎用*

コンピューティングやメモリ、ストレージ等において最もバランスの取れたカテゴリ
インスタンスタイプ例:M7g、Mac、T3
ユースケース       :ウェブサイト、ウェブアプリケーション、開発環境

*コンピューティング最適化*

高パフォーマンスプロセッサの恩恵を受けるコンピューティングバウンドなアプリケーションに最適なカテゴリ
インスタンスタイプ例:C7g、C6i
ユースケース       :ハイパフォーマンスコンピューティング (HPC)、バッチ処理、広告配信、動画エンコーディング、ゲーム、科学的モデリング、分散分析、および CPU ベースの機械学習推論

*メモリ最適化*


メモリ内の大きいデータセットを処理するワークロードに対して高速なパフォーマンスを実現するように設計されたカテゴリ
インスタンスタイプ例:R7g、X2gd、u-3tb1、z1d
ユースケース       :オープンソースデータベースやリアルタイムビッグデータ分析


*高速コンピューティング*


ハードウェアアクセラレーターを使用して浮動小数点演算やグラフィック処理等を効率的な処理を行うことができるインスタンスのカテゴリ
インスタンスタイプ例:P5、Trn1、Inf2、G5g、F1、VT1
ユースケース       :機械学習やビデオ・画像の生成系 AI アプリケーション

*ストレージ最適化*


EBSだけではなくローカルストレージにも使用可能であり、大規模データセットに対する高いシーケンシャル読み取りおよび書き込みアクセスを必要とするワークロード用に設計されている
インスタンスタイプ例:I4g、Im4gn、Is4gen、D3、H1
ユースケース       :NoSQLデータベースやMapReduce、Hadoop分散型コンピューティング


*HPC(ハイパフォーマンスコンピューティング)最適化


HPCワークロードを実行する際に最も高いコストパフォーマンスを提供してくれるインスタンスのカテゴリ
インスタンスタイプ例:Hpc7g、Hpc7a
ユースケース       :大規模かつ複雑なシミュレーションや深層学習のワークロード


##参考文献
https://aws.amazon.com/jp/ec2/instance-types/
https://aws.amazon.com/jp/blogs/news/new-amazon-ec2-hpc6a-instance-optimized-for-high-performance-computing/
クライミングジムのインスタ投稿からセットスケジュールを抜き出してGoogleカレンダーに登録するまでの話

# はじめに
* ヒヨッコクライマー兼エンジニアが楽をするためのTipsです
さぁ登りに行こうと思ったらセット日で閉店早い/お休みですなんてことにならないためのライフハックにお使いください
* ここで紹介している範囲であれば無償で提供されているサービス内で実装が可能です

# 対象読者
* ボルダリングが好きな人 or Instagram投稿を何某かの理由で取得したい人
* ふんわりとしたWeb開発経験者

# 実装全体の流れ
実装の流れとしては
1. InstagramAPIでクライミングジムの投稿を取得する
2. 投稿の中身を精査してセットスケジュールを抜き出す
3. Googleカレンダーに登録

## 他人のアカウントから投稿を抜き出す方法
他人のアカウントを指定して投稿内容を取得する方法は今日(2024/06/26)時点ではInstagramが提供している**IGビジネスディスカバリー**を利用する方法のみ提供されています

https://developers.facebook.com/docs/instagram-api/reference/ig-user/business_discovery

IGビジネスディスカバリーAPIを利用するためには認証情報として以下の情報が必要です
* APIアクセストークン
* InstagramビジネスID

上記の認証情報を得るフローはdtn.jpさまの記事がとてもわかりやすいです

https://blog.dtn.jp/2022/02/02/instagram-graph-api-ver12

ここの記事を最後まで読み進めて作業するとAPIアクセストークンとビジネスIDが取得できますので、メモに保存しておきましょう
読み飛ばして該当の章だけ作業しようとしても取得できないので最初から順を追って設定して取得するようにしてください

# APIの呼び出し方

APIの呼び出し時に指定するのは

* APIアクセストークン
* InstagramビジネスID
* 読み込み対象のアカウントのID

です

API呼び出しはGETリクエストですので、ターミナルからcurlしてもよし、ブラウザのURLに指定してもよし、お好きな方法で呼び出してください

```sh:呼び出し例

curl -i -X GET \
 "https://graph.facebook.com/v20.0/{InstagramビジネスID}?fields=business_discovery.username({取得対象のInstagramID}){followers_count,media_count,media{id,caption}}&access_token={APIアクセストークン}"
 
```
呼び出し例ではフォロワー数、投稿数、投稿内容のうち投稿IDと本文を取得していますので
以下のような結果が得られます

```json:結果
  "business_discovery": {
    "followers_count": フォロワー数,
    "media_count": 投稿数,
    "media": {
      "data": [
        {
          "id": "投稿のID",
          "caption": "投稿の本文"
        },
        {
          "id": "投稿のID",
          "caption": "投稿の本文"
        },
        {
          "id": "投稿のID",
          "caption": "投稿の本文"
        }
      ],
      "paging": {
        "cursors": {
          "after": "xxxxx"
        }
      }
    },
    "id": "対象アカウントのID"
  }
  "id": "InstagramビジネスID"
}
```

# 最後に
あとはこの情報を加工するだけなので今日はここまで
次回はGASからAPIを呼び出して投稿内容をカレンダーに登録するコードを紹介します

お疲れ様でした
【Vue】状態管理を扱うなかでの個人的マインド

## はじめに
この記事は開発における個人的なマインドになります。
ベストプラクティスから逸脱した内容もあると思いますので、訂正や議論がある際にはコメントをよろしくお願いします。

## 状態管理とは
全ての Vue コンポーネントインスタンスは、すでに自身のリアクティブな状態（state）を "管理" している

**state（状態）**
アプリケーション駆動する信頼できる情報源（the source of truth）です

**view（ビュー）**　
state（状態） の宣言的な写像（declarative mapping）です

**actions（アクション）**　
view（ビュー） からのユーザー入力に反応して state を変更するための方法を提供します

### "単一方向のデータフロー"
vueにおいてこのシンプルな構成を守りながら開発を行うことでプロジェクトの品質を保つことができます。

![state-flow Vue.js.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822984/037eb3d0-cf33-3eaa-ad29-dfa0c0513997.png)

## 崩壊
親コンポーネントから子コンポーネントさらには孫コンポーネントとデータを受け渡していくバケツリレーを行なっていくと **state（状態）** が崩壊していくことがあります。
APIとの連携による非同期通信により子や孫にデータが正常に受け渡せないこともあります。

## 解決策
単一方向データフローの構成を変更する。
変更する中でシンプルな構成は保ち続ける必要があります。
シンプルさを保つため、プロジェクト全体でこの構成を守る必要があり、状態管理ソリューションの形を一元化する必要するがあります。

### 状態管理を補助するツールを採用
自前の状態管理ソリューションでは大規模になることで保守性を失う事があります。
その為状態管理ライブラリを用います。
Vue２ではVuexを用いていましたが現在新しい機能の実装はされおらずまた、 PiniaはVuexよりシンプルな為よほどの理由がない場合はPibiaを使うことをお勧めします

https://pinia.vuejs.org/

## 変更を加えた構成

![状態管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822984/a14fa953-ec80-dc18-1208-1fe1b3968e68.png)

* 構成はシンプルで「Actions・State」と「View」を分離
* 例外としてコンポーネント内で完結する状態フラグなどはViewで管理する
* Actions・Stateはグローバル管理される為、コンポーネント間でSateを受けわたす必要がなくなる

開発のマインドとしてVueファイル内でStateやActionを定義した場合冗長である可能性を常に考慮する
何が冗長かの判断がしやすくなる

※Piniaの構成の詳細は省略します

## 結論
Vueで開発するマインドは「シンプル」にする事です
開発をしてる時は常にシンプルに実装することを意識しましょう

## 一緒に働く仲間を募集しています！
株式会社コネクター・ジャパンでは一緒に働いてくれる仲間を募集しています！

事業拡大に伴い、エンジニアを大募集しています。
興味のある方は下記リンクから弊社のことをぜひ知っていただき応募してもらえると嬉しいです。
▼会社について
https://www.wantedly.com/companies/cnctor/about
▼代表メッセージ
https://cnctor.jp/10years-anniversary/
▼応募はこちら
https://www.wantedly.com/companies/cnctor/projects
Copilot Studio から ServiceNow の Knowledge Article を参照する

Copilot Studio からコネクタを利用して ServiceNow の Knowledge Article を参照する例をご紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/d110e9bd-344d-9491-8379-df10353f4259.png)

## ServiceNow 側の設定
Power Platform に ServiceNow の[コネクタ](https://learn.microsoft.com/ja-jp/connectors/service-now/)がありますが、今回使用するアクションは「サポート情報記事を取得」(Get Knowledge Articles)になります。
こちらを使うと、ServiceNow で KB 記事を検索する時と同じように、質問(クエリ)を投げると該当する記事を選出してくれます。

ただし、このアクションを使うには、[Knowledge API](https://docs.servicenow.com/ja-JP/bundle/utah-api-reference/page/integrate/inbound-rest/concept/knowledge-api.html) (sn_km_api) プラグインのインストールが必要になりますので、まずそちらを準備します。

ServiceNow にログインし、System Definition > Plugins ページに遷移します。sn_km_api を検索すると Knowledge API プラグインが表示されるので、Install します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/74689e67-9295-4480-74dc-55d85f731b92.png)

Install が終わりましたら API が利用できるようになりますので、System Web Services > Scripted Web Services > Scripted REST APIs ページでリクエスト方法を確認したり、テストしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/eecd8e17-5150-9f8e-3bd3-4081708cd664.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/441e7021-6fa7-dbdf-1543-02f296200830.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/93aa9500-8e5b-1b8d-05f1-b78221528b24.png)


## Copilot Studio 側の実装
Copilot Studio では、利用者の幅広い質問をキャッチできるよう、Unknown Intent をトリガーに、[コネクタアクション](https://learn.microsoft.com/ja-jp/microsoft-copilot-studio/advanced-connectors) + [生成型の回答](https://learn.microsoft.com/ja-jp/microsoft-copilot-studio/nlu-boost-conversations) という形でトピックを作成しました。スクショで恐縮ですが、こんな感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/46ba0369-bb95-89d7-4ae4-571177dba89b.png)

変数値に格納されている処理はこちらになります。
```
ForAll (Topic.articles, {Content: Concatenate(title," - ", fields.value), ContentLocation: Concatenate("https://<<ServiceNowインスタンス名>>/now/nav/ui/classic/params/target/kb_view.do%3Fsysparm_article%3D", number)})
```

コネクタアクションでは、デフォルトでは利用者(エンドユーザー)に紐づくサービスの資格情報を提供するように要求するような挙動になりますので、ServiceNow で直接見られない情報を Copilot Studio 越しからだったら見れちゃうみたいなことは起こりません。ご安心ください。

実際テストしてみると、最初に接続をつくるように促されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/f3ef9a00-d9d4-9749-3a1e-d019561dd8a6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/22bdaaae-1d17-466d-ccd2-84a063db53e5.png)

接続を作成して再度テストしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375815/698e5ba0-5980-ae45-928b-308ee0587410.png)

以上です。ご参考になれば幸いです。
【proj】地心直交座標系(X,Y,Z)と地理座標+楕円体高(lon,lat,height)の相互変換

`proj`というライブラリはprojctionという名前の通り、地図投影法の変換(`proj`コマンド)と空間参照系同士の変換(`cs2cs`コマンド)を実行するものである。  
空間参照系同士の変換の一部に地心直交座標系と地理座標+楕円体高に変換するコードがあるのでそれを利用する。

## 使い方

詳しい使い方はこちらにある

https://proj.org/en/latest/operations/conversions/cart.html

### (lon,lat,height)->(X,Y,Z)への変換

`cct +proj=cart`を使う

```bash
echo 140.0878550027 36.1037747783 65.8397 |
    cct -t 0 +proj=cart |
    awk '{print $1,$2,$3}'
# -3957314.6200 3310254.1370 3737540.0430
```

解説  
cctコマンドは3次元座標に加えて時刻がある４次元座標を扱うコマンドになる、`-t 0`オプションにより時間を0にして3列で入力が可能になる。それでも出力が4列(4列目は時刻0)となるのでawkで4列目を落とす。  

### (X,Y,Z)->(lon,lat,height)への変換

`cct -I +proj=cart`を使う

```bash
echo -3957314.6200 3310254.1370 3737540.0430 |
    cct -t 0 -I +proj=cart |
    awk '{print $1,$2,$3}'
# 140.0878550027 36.1037747783 65.8397
```

解説  
`-I`で逆変換を行う。それ以外は同じ。  

## おまけ

WebAPIを使う

https://vldb.gsi.go.jp/sokuchi/surveycalc/api_help.html

ここの緯度・経度と地心直交座標の相互換算のAPIを使う

※ただし大量リクエストはご法度。同一IPアドレスからのリクエストは、10秒間で10回。10行ぐらいのデータをいれてください。  

プログラム(xyz->lbh)の変換。フィルタコマンドとして作成した。

```python:xyz2lbh.py
#!/usr/bin/env python3
import sys

import requests

baseurl = 'http://vldb.gsi.go.jp/sokuchi/surveycalc/surveycalc/trans.pl'

for line in sys.stdin:
    x, y, z = line.split()
    params = {
        "outputType": "json",
        "cnv_type": 1,
        "geocentricX": float(x),
        "geocentricY": float(y),
        "geocentricZ": float(z)
    }
    r = requests.get(baseurl, params=params)
    outputJson = r.json()['OutputData']
    # これらはすべて文字列
    longitude = outputJson['longitude']
    latitude = outputJson['latitude']
    ellipsoidHeight = outputJson['ellipsoidHeight']
    print(f'{longitude} {latitude} {ellipsoidHeight}')
```

```bash
echo -3957314.620 3310254.137 3737540.043 | xyz2lbh.py
# 140.08785500  36.10377478  65.840
```
ChatGPTアプリが全Macユーザーに開放！アプリならではの機能で快適に

## Mac用 ChatGPT アプリがつかえるようになった

TeamプランでChatGPTを使用しているのですが、Mac用 ChatGPT アプリリリース当初はPro契約のユーザのみしか使うことができませんでした。

Teamプランアカウントでアプリにログインするとこんなメッセージが出ていました。

![スクリーンショット 2024-05-15 10.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741957/f4b66fc5-1622-241e-94d0-200a7705de12.png)

が、6/25に、Mac用 ChatGPT アプリが全ユーザで使えるようになったとのニュースを見て早速試してみました。


## ダウンロード

以下からアプリのダウンロードが可能です。

https://openai.com/chatgpt/mac/

## 設定

赤枠で囲った部分がアプリ版にしかない設定の部分です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741957/4ee02438-f126-2b6b-73d6-48c440e8245b.png)

* スペル修正はとりあえず On にしました
  追記: プログラミングに使うには不便なのでOffにしたほうが良いです
* キーボードショートカットは、デフォルトは `Option` + `Space` でAlfredと競合するので、 `Option` + `C` に変更してみました
  キーボードショートカットでは以下のような入力画面が表示されます
  ![スクリーンショット 2024-06-27 10.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741957/0b054325-fe5f-169e-0adf-75806d741b73.png)

* スピーチの主な言語は、デフォルトでは自動検出になっていますが、日本語を設定しておきました

## 入力

![スクリーンショット 2024-06-27 9.57.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741957/4d102ecb-e8fc-61ad-84a6-dbb81b655b40.png)

クリップアイコンはWebインタフェースと同様ファイルの添付などができるほか、アプリのスクリーンショットをダイレクトに取得できたりします

![スクリーンショット 2024-06-27 9.57.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741957/08da7f77-e92b-925a-47af-cdc84adc7520.png)

* マイクのアイコンをクリックすると音声入力モードとなり、音声でプロンプトに入力ができます
* ヘッドホンのアイコンをクリックすると、ChatGPTとのボイスチャットモードとなりChatGPTと対話することができます
  ちょっと日本語での発音はイマイチ感ありますが、問題ないレベルでした
  ![スクリーンショット 2024-06-27 10.02.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3741957/48155517-1849-fe6f-ef2f-6f838397f2ad.png)

## つかってみて

### メッセージ送信のキーボードショートカットが設定できない
リリースから4日ほど使っていますが、Web版で遭遇したようなネットワークエラーは遭遇してません。
ただ、Web版では `Command` + `Enter` でメッセージ送信できるのですがアプリでは対応していません。
そのへんが早く対応されると個人的に嬉しいです。

### MyGPTがアプリ上で編集できない
MyGPTを編集しようとするとWeb画面に飛ばされます
またMyGPTへの編集画面への遷移も煩雑

## まとめ

Mac用のChatGPTアプリが全ユーザーに提供されるようになったことにより、より多くのユーザーが手軽にChatGPTの機能を活用できるようになりました。
アプリならではの設定や機能が充実しており、特にキーボードショートカットや音声入力などの機能が便利です。
また、スクリーンショットの取得やファイル添付も簡単に行える点は、Webインタフェースを超える利便性を提供しています。

Windows用のアプリは秋に提供されるとのことです。
アプリならではの機能ももっと追加されるといいですね。
【JavaScript】ストレス社会から逃れグラデーションの変化をずっと見ていたいあなたにおくるランダム生成した背景色のグラデーションをスムースに切り替えるスクリプト

## なんでもグラデーションがかっこいい！

私はウェブページで大事なのは配色だと思っています。

特にランダムで指定した色の組み合わせが偶然作り出すかっこいい組み合わせのグラデーションが好きです。

だからグラデーションの背景色をスムースに切り替えるスクリプトを作りました。

## グラデーションをずっと見ていると落ち着く

気分がリラックスできて落ち着くことができる自然なグラデーション変化が楽しめるスクリプトはこちらです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dissolving Gradient Background</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        .gradient-background {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
        #gradient1 {
            z-index: 1;
        }
        #gradient2 {
            z-index: 2;
            opacity: 0;
        }
        @keyframes dissolve {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="gradient1" class="gradient-background"></div>
    <div id="gradient2" class="gradient-background"></div>

    <script>
        function getRandomColor() {
            return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
        }

        function createGradient() {
            const color1 = getRandomColor();
            const color2 = getRandomColor();
            const angle = Math.floor(Math.random() * 360);
            return `linear-gradient(${angle}deg, ${color1}, ${color2})`;
        }

        function updateGradient() {
            const gradient1 = document.getElementById('gradient1');
            const gradient2 = document.getElementById('gradient2');

            // 上層のグラデーションを設定
            gradient2.style.background = createGradient();

            // ディゾルブ効果をアニメーション
            gradient2.style.animation = 'dissolve 3s forwards';

            // アニメーション後、グラデーションを入れ替えてリセット
            setTimeout(() => {
                gradient1.style.background = gradient2.style.background;
                gradient2.style.opacity = 0;
                gradient2.style.animation = 'none';
            }, 3000);
        }

        // 初期グラデーション
        document.getElementById('gradient1').style.background = createGradient();
        document.getElementById('gradient2').style.background = createGradient();

        // 5秒ごとにグラデーションを更新
        setInterval(updateGradient, 5000);
    </script>
</body>
</html>

```
Wordpressでプラグイン(Yoast SEO)をインストールした直後エラーになる場合の対処方法

## 現象

Wordpress バージョン 6.5.5
Theme SANGO 3.x 

SEOプラグインがなかったので、評価が高いYoastSEOを使おうとしてプラグイン管理画面からYoastSEOをインストールし、活性化したら画面がアクセスできなくなりました。

サーバーはLolipopを使っていたので、Lolipop FTPで直接wp-config.phpファイルを開き
```php
define('WP_DEBUG', false);
```
の部分をfalseからtrueにしたところ、画面から下記のエラーを確認できました。

```Fatal error: Unknown: Cannot use output buffering in output buffering display handlers in Unknown on line 0```

## 原因分析

プラグインインストール以外は、ほかにないもやってなかったので、ほぼ原因がプラグインにあるとおもいました。

ただし、管理画面も開けないので、Web画面からはなにもできず、コードレベルで対応する方法しか思いつきませんでした。

## 対応方法

Lolipop FTPで日付を見て下記のフォルダを探しました（一番最新インストールしたプラグインなので、日付が最新だと判断）
``` /wp-content/plugins/wordpress-seo ``　
そして、そのフォルダ名を変えました。wordpress-seo -> error-wordpress-seo のように。

そうしたらサイトがアクセスできるようになりました。

## まとめ

プラグインをインストールした時点でエラーになり管理画面に入れなくなることはたまにあると思います。

その場合は慌てず、上記の同じ方法で、インストールしたプラグインのフォルダ名を変えることで、エラーを回避し、管理画面にアクセスすることができると思いますので、万が一そんな状況にぶつかったら参考にしていただけたらと思います。
【Figma Plugins】UI側とcode側でデータを受け渡す

## はじめに
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5ee21800-3783-aa15-58da-8ed7911b6640.png)
FigmaのPluginを開発する際、Figma PluginsのUI側とcode側でデータを受け渡したいと思ったことはありますか？
この記事では、Figma PluginsのUI側とcode側でデータを受け渡す方法を解説します。

## UI側 → code側にデータを渡す
### ⚪︎ UI側でデータを送る
UI側からデータを送るには、`postMessage（）` という関数を使います。

```ts
postMessage(pluginMessage: any, options?: UIPostMessageOptions): void
```

`postMessage（）`　の引数には、any型の`pluginMessage` と UIPostMessageOptions型の`options` を渡すことができます。

- `UIPostMessageOptions`型
    - `origin`：`OAuth` を実装するための高度なオプション
        - `origin` を指定すると、iframe 内のドキュメントの origin と一致する場合にのみ、メッセージが iframe に配信されます
    - `*`：デフォルト値
        - どのドキュメントにもメッセージを渡すことができる

```main.html
<script>
  /* 文字列 を送る */
  parent.postMessage({ pluginMessage: 'anything here' }, '*')

  /* 配列 を送る */
  parent.postMessage({pluginMessage: ['hoge', 'fuga']}, '*')

  /* データ を送る */
  parent.postMessage({pluginMessage: {
    type: 'hgoe',
    isShow: true,
    ...  
  }}, '*')
</script>
```

### ⚪︎ code側でデータを受け取る
UI側で送られたデータをcode側で受け取るには、`figma.ui.onmessage` 関数を使います。

```ts
onmessage: MessageEventHandler | undefined

type MessageEventHandler = {
  pluginMessage: any
  props: OnMessageProperties
}
```

`MessageEventHandler`は、引数に`pluginMessage` と `props`を渡すことができます。

+ `pluginMessage`：UI側から送られた`pluginMessage`を受け取る
+ `props`：`OAuth` を実装するための高度なオプション
    + メッセージを送信したドキュメントのオリジンを含むoriginプロパティが含まれる

```code.ts
interface onMessageProps {
  type: string
  isShow: boolean
}

figma.ui.onmessage = (props: onMessageProps) => {
  /* 処理 */
}
```


## code側 → UI側にデータを渡す
### ⚪︎ code側でデータを送る
code側からデータを送るには、`postMessage（）` という関数を使います。

引数で渡す値はany型なので、どんなデータでも送ることができます。

```code.ts
figma.ui.postMessage({
  type: 'hgoe',
  isShow: true,
  ...
})
```

### ⚪︎ UI側でデータを受け取る
code側で送られたデータをUI側で受け取るには、`onmessage`を使います。
postMessageで送られたデータを`event.data.pluginMessage` で受け取っています。

```main.html
<script>
  onmessage = (event) => {
    /* 処理 */
    console.log(event.data.pluginMessage.type) // コンソールに hoge が表示される
  }
</script>
```

## まとめ
この記事では、Figma PluginsのUI側とcode側でデータを受け渡す方法を解説しました。
ぜひこの記事を参考にUI側とcode側でデータを受け渡してみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510
GolangのORM「ent」でクエリビルダーを使い回したらハマった話

Golangに「ent」というORMがあります。
もともとはFacebookが開発したパッケージで型安全でありクエリ用の関数を自動生成してくれたりと大変使い勝手の良いORMです。

そんな「ent」ですが、クエリビルダーの仕様を誤解していて半日ほどハマってしまいました。

下記のようなコードがあったとします。

```go
query := client.Query()
if limit > 0{
    query.Limit(limit)
}

ids := []int{1,2,3,4,5}
for _, id := range ids {
    query.Where(user.IdIn(id)).All(ctx)
}
```

このコードではAll()メソッドの実行を契機にDBへクエリが投げられるのですが、実はWhere()で設定した条件はイテレーションを跨いで保持されます。
entパッケージで定義されているクエリビルダーは内部に検索条件を保持するスライスを持っている構造体で、All()などでクエリを実行しても検索条件をクリアしません。
なので変数として定義したクエリビルダーを使い回してしまうと検索条件がイテレーションを跨いで有効になってしまいます。

もし多数のデータを取得しないといけないけれど、事情があってクエリを分割して投げなければいけないときはイテレーションごとにクエリビルダーを定義してあげましょう。

```go
ids := []int{1,2,3,4,5}
for _, id := range ids {
    query := client.Query()
    if limit > 0{
        query.Limit(limit)
    }
    
    query.Where(user.IdIn(id)).All(ctx)
}
```
assert_raise(ActiveRecord::RecordNotFound)で沼った件

# きっかけ
`ActiveRecord::RecordNotFound`を発生させるテストケースがなぜか失敗し、沼ってしまいました。
原因がわからなくて気持ち悪かったので色々と調査してみました。

# やりたいテスト
以下のように、staffsテーブルから対象の`staff_id`を持つレコードを取得するアクションを考えます。
`find`メソッドを使用しているため、テーブルにレコードが存在しない場合は`ActiveRecord::RecordNotFound`が発生します。


```ruby
class ProfilesController

    # get profiles_show_path(:person_id)で実行されるアクション
    def show
        @staff = Staff.find(params[:person_id])
    end
    
end
```

この時、例外が発生していることをテストするケースを考えます。
`assert_raise`を使用して以下のように書いてみました。

```ruby
test '対象のstaffレコードが取得できない場合に例外が発生する' do
    assert_raise(ActiveRecord::RecordNotFound) do
        # staff_id = 100のレコードは存在しないため例外が発生する
        get profiles_show_path(100)
    end
end
```

期待通り`ActiveRecord::RecordNotFound`が発生した場合にこのテストはパスします。
ですが...


```ruby
# => Minitest::Assertion: ActiveRecord::RecordNotFound expected but nothing was raised.
```

**は？例外発生してないんだが...**



## 私の心の中
「`find`ってレコード取得できない時に例外発生すると思ってたんだけど違ったっけ」
→ あってます。新人の頃200回くらいググりましたよね。

「どこかに`rescue`処理書いたっけ、探してみよう」
→ 見つかりません。だって書いてないもん。

もうパニックです。



# 犯人
この挙動が理解できず、色々と調べていくうちに犯人がわかりました。

## test環境のconfigファイルを見てみる
`config/environments/test.rb`の中に以下のような記述があります。
```ruby
# Render exception templates for rescuable exceptions and raise for other exceptions.
  config.action_dispatch.show_exceptions = :rescuable
```

こいつの説明はRailsガイドにありました。

>config.action_dispatch.show_exceptions設定は、リクエストへの応答中に発生した例外をAction Packで処理する方法を制御します。

>:rescuable: config.action_dispatch.rescue_responsesで宣言されている例外についてはHTMLエラーページを表示する

>Rails 7.1以降で生成したアプリケーションのconfig/environments/test.rbには config.action_dispatch.show_exceptions = :rescuableが設定されます。

なんと、テスト環境では発生した`ActiveRecord::RecordNotFound`がレスキューされ、404ページをレンダーするように処理されていたのです...

## テストを書き直す
以上を踏まえて以下のようにテストを書き直しました。
```ruby
test '対象のstaffレコードが取得できない場合に例外が発生する' do
    get profiles_show_path(100)
    assert_response(404)
end
```

# 補足
`config.action_dispatch.show_exceptions = :rescuable`がデフォルト設定されるのはRails7.1以降です。`:rescuable`以外には`:all`と`:none`が選択肢としてあります。

それ以前のバージョンでは`true`と`false`が選択肢だったようです。
しかも`config.action_dispatch.show_exceptions = false`がデフォルト設定されているので普通に例外発生します。知らんかった...

# 最後に
この記事が私みたいに沼る人を救えるよう願います。

# 参考
- [Railsガイド](https://railsguides.jp/upgrading_ruby_on_rails.html#%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC%E3%83%86%E3%82%B9%E3%83%88%E3%80%81%E7%B5%90%E5%90%88%E3%83%86%E3%82%B9%E3%83%88%E3%80%81%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%83%86%E3%82%B9%E3%83%88%E3%81%AE%E4%BE%8B%E5%A4%96%E5%87%A6%E7%90%86%E6%96%B9%E6%B3%95%E3%81%8C%E6%96%B0%E3%81%97%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9F)
- [reddit: Rails 7.1 and using assert_raised in tests](https://www.reddit.com/r/rails/comments/16znwfn/rails_71_and_using_assert_raised_in_tests/)
久しぶりにclassic環境にしてみたら...

ページの左側が再帰的に開いていきます。４階層で止まりました。　何だろう？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/ead3042b-c7b4-5619-8a33-9f7278fe5a41.png)
【PostgreSQL】メタコマンド〜\o〜

## 初めに

Qiita Engineer Festa 2024に参加中。完走目指してます。
他のバックスラッシュコマンドについては以下から読んでください。

https://qiita.com/dai_chi/items/04f5339d54130f070671

## \oとは

> 以降の問い合わせの結果を、`*filename*`で指定されたファイルに保存するか、またはシェルコマンド`*command*`にパイプで渡すようにします。 引数がない場合、問い合わせの出力はリセットされて標準出力になります。
> 
> 
> 引数が`|`で始まっている場合、行の残りの部分はすべて実行する`*command*`であると解釈され、その中では変数の置換も逆引用符の展開も行われません。 行の残り部分は、単にあるがままにシェルに渡されます。
> 
> 「問い合わせの結果」には、全てのテーブル、コマンドの応答、データベースサーバからの注意メッセージだけでなく、データベースに問い合わせを行う（`\d`のような）各種バックスラッシュコマンドの出力が含まれます。ただし、エラーメッセージは含まれません。
> 

[\oについて](https://www.postgresql.jp/docs/15/app-psql.html#:~:text=%5Co%E3%81%BE%E3%81%9F%E3%81%AF%5Cout%20%5B%20filename%20%5D%0A%5Co%E3%81%BE%E3%81%9F%E3%81%AF%5Cout%20%5B%20%7Ccommand%20%5D)

## 試してみた

output.txtに出力してみる

```sql
\o /tmp/output.txt
SELECT * FROM uses;
\dt
\o
```

output.txtに実行結果が出力されている。
最後の\oでファイルへの出力を終了して標準出力になる。

パイプを利用することもできるが以下はできない。
Bobのレコードだけが出力できるかと思ったのですが。

```sql
\o | grep Bob > output.txt
select * from users;
```

## まとめ

ログを残すのに使うと漏れがなさそうですが、標準出力にでないので用途としては向いていない。

使い所はすぐに思いつかなかったです。

## 参考

https://qiita.com/SRsawaguchi/items/198c90ee6e402db9dfe7

https://atsuizo.hatenadiary.jp/entry/2020/01/22/100000
プロンプトに現在の時刻を表示させる

```
--プロンプトの先頭（左端）に「HH:MM:SS」形式で（コマンド実行直前の）時刻を表示する
PROMPT_COMMAND='echo -ne "\e[0K\r$(date +%H:%M:%S) "'


--おまけプロンプト設定
PS1='[\u@\h \W]\$ '

\u：現在のユーザー名
\h：ホスト名の最初の部分
\W：現在の作業ディレクトリのベース名
\$：通常のユーザーの場合は $、スーパーユーザーの場合は #
[と]：プロンプトの開始と終了を示す角括弧
最後に空白文字：プロンプトとコマンド入力の間にスペースを追加
```
VSCode上でcv2のautocompleteが中途半端な時はアプデを試してみよう

私用PCのVSCodeで`import cv2`するとautocompleteが効くのに仕事用PCではできない。以下のようになってしまうのだ。

VideoCapture()したかった時の様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719521/e12aa276-ccb4-e63d-d395-3ad74abd2737.png)

imshow()したかった時の様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719521/c9c1694c-fa0e-150e-7318-fd17b1623e16.png)

cvtColor()したかった時の様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719521/4d553092-08f9-9a8e-89ea-7cc394a30e19.png)

でもnumpyではちゃんとできてる。(つまりVSCodeはちゃんとインストールされているPythonのsite-packagesフォルダーを読んでいるのだ。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719521/ae4a3e7b-0ec6-0283-8d51-3155620b1674.png)

気持ち悪すぎる。こんなのやってられない。
どうしたものか。
```cmd
C:\>pip list

opencv-python    4.7.0.72
```
おや。ちょっと古いバージョンだな。(といっても4.7.0.72は2023年2月23日のリリースだからそんなに古くなくね？とも思うが。)
```cmd
C:\>pip install --upgrade opencv-python

Successfully installed opencv-python-4.10.0.84
```
2024年6月18日リリースの最新版がインスコできた。
VSCodeを再起動したらautocompleteが出るようになった。
で、これ再現性がある。`pip install opencv-python==4.7.0.72`とすればまたautocompleteがおかしくなる。
面倒なのでこれ以上深堀りはしないが。
Julia で Welcome to AtCoder を解いてみた

[Qiita Engineer Festa 2024（キータ・エンジニア・フェスタ 2024） - Qiita](https://qiita.com/official-campaigns/engineer-festa/2024)
において、約1ヶ月で38記事という大量の記事の投稿を要求されることがわかった。
そこで、あまりコストをかけずに記事数を稼ぐ方法を考えた結果、「Welcome to AtCoder を様々な言語で解く」ことを思いついた。
単に解くだけでなく、使用する言語仕様の解説を入れれば、記事として一応成立するだろう。

# Welcome to AtCoder

[PracticeA - Welcome to AtCoder](https://atcoder.jp/contests/abs/tasks/practice_1)

Welcome to AtCoder では、以下の形式で整数 $a$, $b$, $c$ および文字列 $s$ が入力として与えられる。

```text
a
b c
s
```

この入力をもとに、与えられた整数の和 $sum = a + b + c$ および文字列 $s$ を、以下の形式で出力することが求められる。

```text
sum s
```

# 今回用いる Julia の機能

## 変数への代入

[Variables · The Julia Language](https://docs.julialang.org/en/v1/manual/variables/)

```julia
変数名 = 値
```

と書くことで、変数に値を代入できる。

## 整数の演算

[Mathematical Operations and Elementary Functions · The Julia Language](https://docs.julialang.org/en/v1/manual/mathematical-operations/)

```julia
a + b
```

と書くことで、`a` と `b` の和を求めることができる。

```julia
a - b
```

と書くことで、`a` から `b` を引いた差を求めることができる。

```julia
a * b
```

と書くことで、`a` と `b` の積を求めることができる。

## 文字と文字列

[Strings · The Julia Language](https://docs.julialang.org/en/v1/manual/strings/)

`"hello"` のように `""` で囲むことで、文字列を表現できる。
文字列内に `$` に続けて変数名を書くことで、その変数の値を文字列に埋め込むことができる。

`文字列[開始位置:終了位置]` のように書くことで、「文字列」の「開始位置」から「終了位置」まで (両端を含む) の部分文字列を得ることが出来る。
位置は 1-origin で表す。
これらの開始位置や終了位置において、最初の文字の位置は `begin` で、最後の文字の位置は `end` で表現できる。

`'a'` のように `''` で囲むことで、文字を表現できる。
`'b' - 'a'` のような文字同士の減算を行うと、文字コードの差が整数で得られる。

`findfirst(文字, 文字列)` を用いると、「文字列」の中の最初の「文字」の位置を得ることができる。

```julia
for 文字を代入する変数 in 文字列
    # 処理内容
end
```

を用いると、文字列内の各文字について前から順に処理を行うことができる。

## 関数の定義

[Functions · The Julia Language](https://docs.julialang.org/en/v1/manual/functions/)

```julia
function 関数名(引数リスト)
    # 処理内容
end
```

のように書くことで、関数を定義できる。

関数の処理内容の中に

```julia
return 値
```

と書くことで、関数から「値」を返して戻ることができる。

## 入出力

[I/O and Network · The Julia Language](https://docs.julialang.org/en/v1/base/io-network/)

[`println(値)`](https://docs.julialang.org/en/v1/base/io-network/#Base.println) を用いると、標準出力 (など) に「値」を出力し、さらに改行を出力できる。

[`readline()`](https://docs.julialang.org/en/v1/base/io-network/#Base.readline) を用いると、標準入力 (など) から1行読み込み、結果を文字列として得ることができる。
結果の文字列は末尾の改行文字を含まない。(含めるオプションもある)

# 提出コード

```julia
function toint(st)
    res = 0
    for ch in st
        res = res * 10 + (ch - '0')
    end
    return res
end

astr = readline()
bcstr = readline()
s = readline()

spacepos = findfirst(' ', bcstr)
bstr = bcstr[begin:spacepos-1]
cstr = bcstr[spacepos+1:end]

sum = toint(astr) + toint(bstr) + toint(cstr)
println("$sum $s")
```

[提出 #54957587 - AtCoder Beginners Selection](https://atcoder.jp/contests/abs/submissions/54957587)
PowerAutomateDesktop開発のコツ

# はじめに
PowerAutomateDesktop(PAD)は独自のUIで日本語での情報も少ないです。
個人的に感じた効率よく開発を進めるコツをお伝えします。
# コメントではなくリージョンを使う
プログラミングを行う際はコメントを記述するかと思います。
PADにもコメントを記述することができます。
しかし、色が変わったり囲んだりはできないのでわかりづらいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809382/9c3d2779-c448-9fb5-a452-dece4a121718.png)

なので機能ごとにまとめる際はリージョンを使用しましょう。
折りたたむこともできますし、移動も簡単に行うことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809382/e0259c19-6795-23d7-cc9b-3c172e161df9.png)

:::note info
1行だけの説明にはコメント 
機能の説明にはリージョンを使いましょう
:::

# 実行遅延を1ミリにする
アクションとアクションの間に実行遅延がデフォルトで100ミリ秒入ります。
特にループ回数が多かったりアクションが多いと、その分実行時間が延びるので大幅に変わります。
画面右下にある実行遅延を1ミリ秒に設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809382/7538557c-3ca7-52f6-45d7-82c13c9504e3.png)

# 使わない変数を生成させない
PADでは変数の一覧と中身を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809382/6f04b699-6c62-2dec-ebfd-da3f307dcc71.png)

デフォルトでは変数を生成できるアクションは全て生成してしまいます。
特にメッセージの表示は使う頻度も多くなりがちなので、表示するだけの場合は変数の生成をオフにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3809382/355c5474-c6f8-290b-9fd0-dbf6872515d1.png)

:::note info
規模が大きくなると変数も増えるので、不要な変数は生成しないようにしましょう
:::