OmniAICreator/Qiita-1.07M huggingface dataset:
【update_attributesが使えない】NoMethodError in RegistrationsController#update【Rails】

## はじめに

Ruby on Railsにて、以下のエラーが発生しました。

```ruby
NoMethodError in RegistrationsController#update
undefined method `update_attributes' for #<User:0x000000011065da18>
```

## TL;DR

update_attributesではなくupdateを使用することで解決しました。

Rails6からupdate_attributesは非推奨になっているようです。

## 参考

[https://railsguides.jp/6_0_release_notes.html#active-record-非推奨化](https://railsguides.jp/6_0_release_notes.html#active-record-%E9%9D%9E%E6%8E%A8%E5%A5%A8%E5%8C%96)

https://github.com/rails/rails/blob/v6.0.2.1/activerecord/lib/active_record/persistence.rb#L625
はじめてのRevenueCat - (1) SDK稼働確認に必要なApp Store Connectでの対応

## はじめに

現在、[サブスクアプリハッカソン](https://prtimes.jp/main/html/rd/p/000000003.000139088.html) に出場しています。このハッカソンでは、期間中にRevenueCatによるサブスク収益管理を行なっているアプリをストアにリリースすることが要件になっています。

https://prtimes.jp/main/html/rd/p/000000003.000139088.html

今回初めてリリースするアプリにRevenueCat SDKを実装するので、まずはRevenueCat SDKの動作確認を検証用のテストアプリで行いたいと考えました。RevenueCatはストアとのAPIにより収益管理を行うソリューションですので、iOSの場合はAppStore Connectにアプリが登録されていることが前提条件となります。ただ、これは単にアプリ登録しているだけではダメで、ストアとのAPIが使えるように一定の条件を満たす必要があります。RevenueCat の実装よりも、この対応に結構時間を使ってしまいました。

この記事では、RevenueCat実装の前提として、App Store Connectで必要な設定と、取得しておくべき情報をまとめます。

## やりたかったこと

アプリを審査提出前にRevenueCatを実装し、Paywallでサブスクリプション課金のプランを表示ができることを確認したい。

RevenueCatのPaywallのテンプレート
![RevenueCat Paywall templates](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73759/b9eff5fe-c512-69f3-d6cb-550b067c4ad2.png)


## App Store Connectでの設定

以下のような状態になっていることが、App Store Connect APIでのデータ取得の前提となり、RevenueCat利用にあたっては必要であるようです。

### 1. アプリのアイコンがApp Store Connectに見えていること
![App Store Connect - Registered App](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73759/a0ef7e38-0660-869a-b9f1-8bcc05d93c88.png)
 
### 2. サブスクリプショングループが作られていること
![App Store Connect - Subscription Group](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73759/8d2e341d-96f0-7404-4ce3-555d18398cff.png)

### 3. 上記のサブスクリプショングループの中に、サブスクリプションが作られ、ステータスが「送信準備完了（Ready to Submit）」になっていること
![App Store Connect - Subscriptions](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73759/2f86068d-50eb-5225-19a2-675e5f593a5c.png)

審査提出前のアプリで稼働確認する場合は、ここが要注意！

「メタデータが不足（Missing Meta）」のステータスが解消されるまで、各種のメタデータの登録不備のエラーを地道に潰す必要がありますが、サブスクリプション内の税金カテゴリの情報を入れたり、スクリーンショットをアップロードしたり。

一通りデータを入力してもステータスが変わらずハマりました。ググると同じような事象に遭遇している人も複数いるようですが、具体的にどのメタデータが不足しているかのメッセージが出ないので辛い。
- 主に原因として上げられているのは、審査に関する情報のスクリーンショットの登録不備のようでした。サイズ変更をして登録し直したらうまくいく例もあるようです。
- 私の場合には、なぜかサブスクリプショングループの方の「ローカリゼーション」に情報を登録したらステータスが変わりました。


なお、すでに審査提出済みのアプリの場合にはこのステータスが「承認（Approved）」になるようですが、もちろんそのステータスでも問題ありません。


### 4. 有料アプリ契約(Paid Applications Agreement)に署名していること。

「ビジネス」タブ内で確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73759/c34be872-d36b-8894-8356-1556538d4316.png)

具体的には、有料アプリ契約ステータスが「ユーザー情報を保留中（Active(Pending User Info)）」となっていれば良いようです。


## App Store Connectから事前に取得しておく情報

RevenueCat側での設定には、以下の情報が必要になりますので、メモしておくことをオススメします。

- App Bundle ID　（バンドルID）
    - アプリ > アプリ情報 で確認
- App Store Connect App-Specific Shared Secret（アプリ用共有シークレット）
    - アプリ > アプリ情報 内で生成
- In-App Purchase Key
    - ユーザーとアクセス > 統合 > アプリ内課金で「SubscriptionKey_XXXX.p8」という証明書を発行
- App Store Connect API のキー
    - ユーザーとアクセス > 統合 > App Store Connect API
内で、Adminアクセスで「AuthKey_XXXX.p8」という証明書を発行
- Issuer ID
    - ユーザーとアクセス > 統合 > App Store Connect API で確認
- Vendor number（ベンダー番号)
    - レポート画面の左上で確認
    - わかりにくいがビジネス画面でも確認可（住所の隣に書いてある8桁の番号）

次の記事では、RevenueCat側での設定についてまとめたいと思います。

## 参考
- [RevenueCat Document - SDK QuickStart](https://www.revenuecat.com/docs/getting-started/quickstart)
- [RevenueCat Community - Why are offerings or products empty?](https://community.revenuecat.com/sdks-51/why-are-offerings-or-products-empty-124)
Steinberg Download Assistantで文字化けした際の力技で回避した話

# はじめに

Steinberg の半額セールだったのでお試しでCubase Elementsを購入したんですが、インストールするために導入したSteinberg Download Assistantが文字化けするんですよ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/053c42dd-1864-a1da-2bc1-6297ff3680f8.png)

ちなみに、別のPCでは文字化けしないんです。

再インストールや問い御合わせをして帰ってきたことなどを試しましたが・・・ダメでした。

# 力技解説

Steinberg Download AssistantはどうやらJavaで作られているようです。
C:\Program Files (x86)\Steinberg\Download Assistant\app に Steinberg Download Assistant.jar があります。

Javaといえば？
文字列リソースがファイルで存在するはず！
今回はもう、面倒なので、jarに含まれる日本語のリソースを改変します。

1. オリジナルのjarファイルをコピーして名前を変えて保存
1. アーカイブソフトでSteinberg Download Assistant.jarを開く
1. BOOT-INF/classesにMessageから始まるpropertiesファイルがあります。その中のMessages_ja.propertiesとMessages_pt.propertiesを開きます![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/5aefba63-efb5-07b2-1aa0-f099bc0d76f9.png)

1. Messages_pt.propertiesの内容をMessages_ja.propertiesに上書きして保存。アプリによってはそのままjarに保存されます。されない場合は、何とかしてjarファイル内のファイルを更新してください。
1. Steinberg Download Assistantを起動して文字化けしてなければ成功。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/9e2eff23-ea65-eb4d-1037-8163199a40af.png)

まぁ、要するに、英語のリソースファイルを使うだけなんです。
OSの言語設定を変えればいいんですが、Steinberg Download Assistantを起動するたびに変えるのは面倒。

Steinbergさん、すごく困るわけではないんですが、なんとかできないですかねー？
# 投稿：YouTube動画トリミングに最適なツールを発見

# 投稿：YouTube動画トリミングに最適なツールを発見


開発者の皆さん、こんにちは！👋
コーディングチュートリアルを作る際のYouTube動画トリミングに革命を起こすツールを見つけました。編集には常に苦労していましたが、[SliceTube](https://www.slicetube.io)というツールのおかげで、動画の質が格段に上がりました。
気に入っているポイント：

超直感的なインターフェース（プロスキル不要！）
フレーム単位の精密なYouTube動画トリミング
バッチ処理（大幅な時間節約）
YouTube直接アップロード

長すぎる導入部分や「あ、ここ修正します」といった瞬間のトリミングが簡単になりました。チュートリアルがずっと洗練されました。
YouTube動画トリミングに使っている素晴らしいツール、他にありますか？皆さんのコツを教えてください！
#開発チュートリアル #YouTube動画トリミング #コーディングのコツ
休み明けの「学校つらい」を乗り越える！帰宅が楽しみになるルーレットアプリ


## 夏休み明け、学校に行かない問題が勃発中。

早いもので9月。あっという間の夏休みが終わり、小学校の2学期がスタートしました。
親は毎日のお弁当づくりから解放されて、ホッと一息・・・と言いたいところですが、わが家の小学3年生の息子、学校への登校しぶりが始まりました😭


## 過去最多？！世の中の不登校問題
最近ニュースで見かけることも多くなってきた、不登校問題。
子どもの不登校児童生徒数は、なんと右肩あがりで増加しているようです。
[統計資料:
文部科学省における不登校児童生徒への支援施策](https://www.mext.go.jp/content/211006-mxt_jidou02-000018318-1.pdf)

https://www.mext.go.jp/a_menu/shotou/seitoshidou/1422178_00004.htm

わが家では、小学2年生の1学期から始まった登校しぶり。
学校に行ってしまえば普段どおりに過ごせているようですが、朝になると無気力になり、突発的に休んでしまうことが多々ありました。（親もつらいし悩む・・）
一方で、本人は行きたい気持ちがあり、ここ最近は親が学校に送迎すれば登校できることも多く、（わが家の息子の場合は）**学校に行こう！と思えるきっかけ**が必要なようです。

ご家庭やお子さんによって理由は様々だと思いますが、きっと同じような悩みを持つ方も多いはず。これはなんとかしなければ・・・🤔


## Webアプリ版ルーレットを作ってみた
子どもが夏休みの自由研究で、おみくじルーレットを作って楽しそうに遊んでいる姿を見て、思いついたものがこちら。
その名も、「**学校いけたよルーレット**」です。

https://66dee5cdaa07a934ed6f10c7--precious-selkie-3d89dc.netlify.app/

### ルーレットの遊び方
①子どもが学校から帰宅したらWebアプリを起動し、**1日1回ルーレット**にチャレンジ
②ルーレット画面でスタートボタンを押すと、ランダムでマスに停止
③止まったマスに応じて、特典をゲット！

https://x.com/Kokano23/status/1833163923916226682


ルーレットのマスの中身は、息子本人と一緒に考えました。
<details><summary>わが家のルーレット内容はこちら（折りたたみ）</summary><div>
1.おてつだいポイント＋1pt （家事のおてつだいをしたときにポイントUP）<br>
2.シール1枚 （ポケモンシール1枚を好きなところに貼ってOK）<br>
3.おてつだいポイント＋2pt<br>
4.おかず2品リクエスト（食べたいおかずをリクエストできる）<br>
5.おてつだいポイント＋1pt<br>
6.シール1枚<br>
7.おかず1品リクエスト<br>
8.Wチャンス<br>
</div></details>

中身は、コード（html）を書き換えるだけで、更新が可能です。
家庭内のルールに応じて、飽きがこないよう定期的に見直すとより楽しめそうです！

:::note info
**＜補足＞**
ルーレットの"Wチャンス"というマスは、息子本人が考えたアイデアです！
ここに止まると大当たりで、さらに"特別なルーレット"に挑戦できる仕様があると嬉しいのだそう。
※ただし、現在のところ"特別なルーレット（アプリ版）"は未実装です
:::

## プロトタイプの制作秘話

ここまでの制作時間は、**約2時間**です。
ルーレット機能は、[CodePen](https://codepen.io/)でサンプルを探し、ありものを活用させていただきました。参考にさせていただいたソースコードは以下のとおりです。（製作者の方、本当にありがとうございます！）

https://codepen.io/arcxor/pen/RwxPwvo


実際の作成手順は、以下のとおりです。

①CodePenでルーレットのサンプルを探す
②VisualStudioCodeで、ソースコードを自分なりにアレンジする
③生成AI（ChatGPT）を**とにかくフル活用**する
④[Netlify](https://www.netlify.com/)にデプロイする

非エンジニアのため、ソースコードの改良には苦戦しましたが・・・ChatGPTをフル活用しながら、なんとか短時間でのプロトタイプ制作を実現できました。

:::note info
（プロンプト例）
- **タイトルページ**をつけて、画面遷移するようにしたい！
- 小学生が**思わず押したくなるようなボタンデザインを提案**して！
- **非エンジニア**にもコードのどこを変えればよいかが分かるように！
:::
など、コードをアレンジするところは、ChatGPTにかなり助けてもらいました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/17b066c0-0256-514c-170f-5cdb3d41b1a6.png" width="600">



## おまけ：アプリ自動起動（ショートカットアプリ）

帰宅後、習慣化するまではアプリを開くのが面倒になりそうだったので、iOSの標準搭載アプリ（ショートカットアプリ）に頼ることにしました。
子どもがいつも使っているiPadのショートカットアプリで、以下（画像イメージ）のとおり設定し、帰宅時間に合わせて、自動的にアプリが起動するように設定しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/1ca07056-6709-8367-35b0-bc865d89baa3.png" width="600">


## アプリを活用してみたら・・・
実際にアプリを稼働させてから迎えた登校初日。
帰宅直後にさっそく「ルーレットできる？」と尋ねてきて、楽しみな様子でした。そして、ルーレットの結果は、まさかの「Wチャンス」！
特別なルーレット作ってないの？！と言われてしまい、焦る母・・・🤣
せっかくフィードバックを貰えたので、今後もさらなる改良＆バージョンアップしていきたいと思います！

:::note warn
このアプリを使用することで、不登校が必ず解消されることを保証するものではありませんので、ご了承ください。
:::
【CLF受験記】「1週間あれば合格できる！」を鵜吞みにするな！（猛省）

### この記事で伝えたいこと
- 「1週間で合格できる！」は本当だが非推奨！（AWS経験者は除く）
- 合格すること≠使えるようになること！
- 使えるようになるよう学習しよう！

### この記事で書かないこと
- AWS CLFについて
→検索したらゴロゴロ出てくるので改めて書くまでもないと判断

### 勉強期間と時間
期間：2024/08/28 ~ 2024/09/04（8日間）
時間：35時間（平日：3時間×6日、休日：8時間×2日）
※1週間以上やん！というツッコミは無視するものとする。

### 受験動機
建前
・自分って会社内でこれといった強みや特徴ないよな～。
・現状、社内ではAzure1強状態だけどAWSも触れたら面白いことできそうだな～。

本音
・AWS触れる人がいると社内でポジション確立できて査定良くなりそう！
・**合格した時のみ**会社が受験料を負担してくれるなら実質無料やん！
　→のちの苦労は、この時予想していなかった、、

### Qiitaを漁ってみた
**「1週間で合格しました！」
「20時間も勉強すれば余裕で合格できます！」**

これらの甘い言葉にまんまと引っかかる。
「おっ！これなら俺でもいけるやーん！（AWS未経験）」と1週間後に受験を決行。

今になって冷静に考えると、Qiitaに投稿するような方々は基本的に頭が良い。
→記憶力良かったり物事の本質捉えるの上手かったり。

「自分も同じようにできるだろう（鼻ホジ～）」のように、自己認知と現状の能力に歪みが生じた場合、埋める作業が大変になるので注意（n敗）

### 勉強方法
1. AWS公式にアクセスして、試験範囲の単語を一通り確認する
1. AWS Skill Builderで動画を見たり、クラウドクエストしたりする
1. UdemyでCLF予想問題集を2周する（2024年最新版を購入）

まずAWS公式が試験範囲を公開しているので、一通り眺めたのち、各単語やサービスの意味を調査。
ここで理解が浅かったり全然わからないものは、動画を見たり触ってみたりして学習。
上記で知識が散らかっているので、問題集を解きまくり、回答・解説を隅から隅まで確認。

### 上記勉強方法の良し悪し
#### -良かった点-
・CLFの範囲で知らないことがなくなった
・実際に触ってみることでサービスのイメージが付きやすく、単語がすんなり入ってきた
・「おっ！ここ進研ゼミでやったとこやーん！」の問題が多く、悩む箇所は2-3問だった

#### -悪かった点-
・うわ...私の学習方法時間かかりすぎ...！？
・知識を詰め込みすぎたため、既に記憶から抜けているものがちらほら

### 結論
1週間あれば合格できる！
**合格するだけではなく、実際に使えるようにならないと意味がない（あたりまえ体操）**
AWSに限らず、資格のための勉強にならないよう学び続けることが大切

### 最後に
「受けたいんだよな～」と少しでも頭によぎった方は、2週間後にテスト受験するよう申し込みましょう！
firebase Flutter 

# flutter firebase 
この記事はflutterでfirebaseを接続するときにいつも忘れてしまうので、メモ代わりに作成した記事です。
## 接続方法
以下cmdで実行
```
npm install -g firebase-tools
```
```
firebase login
```
loginのIDがでてくればOK.
```
flutter pub global activate flutterfire_cli
```
macはここでpathを指定？
```
flutterfire configure
```
事前に作成したdatabaseを選択
私はよくこの質問が聞かれるので、「Which Android application id (or package name) do you want to use for this configuration, e.g. 'com.example.app'?」


androidのappレベルのbuild.gradleのapplicationIDを変更または、選択する。
（ここがよくわかりません。１０文字以上入力できないようになっているので、いつも短い名前に変更します。）
dependenciesのinstall
```
flutter pub add firebase_core
flutter pub add cloud_firestore
```


```main.dart

```
Azureのログ収集環境を整理した

Azureでログを蓄積して、可視化するまでの方法で思い悩むことはありませんか？
いや、黙ってAzure Monitor使とけよと言う声も聞こえてきそうな気がしますが、以下のような場合はいろいろな組み合わせに悩まされると思います。

- オンプレの資産を持っている場合（主に育て上げたGrokが存在するなど）
- 別のクラウドで稼働中のシステムを移行したい
- ベンダーロックインを避けたい

本記事では、Azureでのログ収集環境について、私が思いつく範囲で以下のような構成を考えました。
ちなみに、Logstahはfluentdなどの任意のログ収集ツール、ElasticsearchやKibanaは他の可視化ツールで読み替えても構いません。


スマホでは読みづらいと思いますが、星取表も準備してみました

||ELK Stack|Cosmos + Grafana|Logstash + 公式Plugin|Azure標準構成|
|---|:---:|:---:|:---:|:---:|
|おすすめ度|:star: <br> 辛い|:star::star: <br> まだましそう|:star::star::star: <br> 結構いい|:star::star::star::star: <br> 安い、早い、楽|
|費用|:star::star: <br> VMコストが高い|:star: <br> Grafanaの課金がユーザ数依存|:star::star::star::star: <br> 悪くない|:star::star::star::star: <br> 最も安価|
|管理コスト|:star: <br> 全て自分で管理するので・・・|:star::star: <br> Logstashのみ|:star::star::star: <br> プラグインも公式なので安定|:star::star::star::star:<br> Azure Portalで集中管理できて楽|
|汎用性（非ベンダーロック）|:star::star::star::star: <br> オンプレでも何処でも動く|:star::star::star: <br> ほぼどこでも動く|:star::star: <br> 可視化部分がAzureに依存|:star: <br> Azureから出れなくなる|
|セットアップの手間|:star: <br> たいへん|:star::star: <br> ELKと比べて楽|:star::star::star: <br> 色々とデプロイが必要|:star::star::star::star: <br> ほぼ設定レス|

以下は書く実装の説明です。

- 【ELK Stack】Elasticsearch, Logstash, Kibanaを使う
    - 利点
        - ELK Stackに習熟しているなら自由度が高い
        - すべてのクラウドベンダで同じ構成を取れる
    - 欠点
        - 管理に手間を要する
        - 他に比べて総じて高コスト（管理、セットアップ、VM費用：￥3500/vCPU）
    - ユースケース：他の環境でELK Stackを使っている
- 【Cosmos + Grafana】Logstash + Azure Cosmos DB + Azure Managed Grafana を使う
    - 利点
        - ELK Stackフルで使うよりもLogstashのみを管理すればよく低コスト
    - 欠点
        - 全体的に中途半端、できれば避けたほうが良い
        - 公式プラグインで済ませようとするとCosmosDBをMongo DB互換で動かす必要があるなど制約がある
        - Grafanaがユーザ数毎課金のため注意が必要（￥800/User)
    - ユースケース：Grafanaを別の環境で管理している場合
- 【Logstash + 公式Plugin】Logstash + Log Analytics or Microsoft Sentinel を使う
    - 利点
        - まあまあ悪くない
        - 公式プラグインで済む構成なため安定性が高い
    - 欠点
        - 設定がやや面倒
        - 特にデプロイにいくつかの手順があり面倒（一度Logstashでサンプルファイルを生成して、それをAzureにアップロードしないといけない）
    - ユースケース：既に育て上げたGrokが存在するとき
- 【Azure標準構成】Azure Monitor Agent + Log Analytics or Microsoft Sentinel を使う
    - 利点
        - セットアップが簡単で最も低コスト
        - Logstash用にサーバの準備が不要
    - 欠点
        - がっつりベンダーロックイン
    - ユースケース：Azure環境のみを管理する場合

需要があればもっと細かい話を書きたいです。
v0でどんなゲームが作れるか試してみた

# V0とは
V0(ブイゼロ)とは、テキストからReactコードを生成してくれる生成システムです。
![V0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/77c61a8e-9d26-e400-5b52-97d99dfb7a52.png)

以下のライブラリを使用して、即座にコードとプレビューを提示してくれます
* [shadcn/ui](https://ui.shadcn.com/) 
* [Tailwind CSS](https://tailwindcss.com/)

# 無料プラン
無料プランだと、1か月に200クレジット付与されます。
UIの初期生成で30クレジット使用されると、公式には載っています。
ただ、実際に使用してコンポーネントを生成すると、15クレジット消費されます。
v0.dev/chatから生成するとクレジットが消費されてないですが、1日に送れる回数が制限されています。（2024/09/09時点）
実際にどういう基準でクレジットが消費されるかちゃんと把握できてないです...

# V0でゲーム作り
V0を使えば、ゲームもReactで生成できるとうわさを聞いたので、いろいろ試したいと思います

### 数当てゲーム
プレイヤーがコンピューターが生成した1～100の中の数字を当てるゲームです。
![v0_math.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/83d73274-4bad-f347-78b5-bdc547ea33aa.png)
1. ゲーム開始時に「ゲームを始める」ボタンを表示します。
2. プレイ中は、数字を入力するフォームと「推測する」ボタンを表示します。
3. プレイヤーが推測するたびに、正解との比較結果をメッセージとして表示します。
4. 正解した場合、おめでとうメッセージと試行回数を表示し、「もう一度プレイ」ボタンを表示します。


### 三目並べ (Tic-Tac-Toe)
次は、2人プレイ用のゲームです。順番ずつに並べて先に縦横斜めで3つ並べたほうの価値になります。
![v0_three.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/ae558079-1189-3f9e-69a3-f18814aabda5.png)
1. 3x3 のグリッドで三目並べのボードを表示します。
2. プレイヤーが交互に X と O を配置できます。
3. ゲームの状態（次のプレイヤー、勝者、または引き分け）を表示します。
4. 勝者を判定し、ゲームが終了したときに結果を表示します。
5. 「ゲームをリセット」ボタンで新しいゲームを開始できます。

### シューティングゲーム？
赤色の箱に、緑色の球を当てていくゲームになりますが、うまく球が発射されませんでした...
![v0_syu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/fc78f2ec-48a6-8a7f-bbfe-e3c5553d1a98.png)
1. プレイヤーは画面中央（カメラの位置）にいます。
2. 敵の宇宙船（赤い立方体）がランダムな位置に生成されます。
3. スペースキーを押すと、プレイヤーの位置から弾（黄色い立方体）が発射されます。
4. 弾が敵に当たると、敵が消滅し、スコアが増加します。
5. 画面左上にスコアが表示されます。
6. マウスでカメラ（プレイヤーの視点）を操作できます。

3Dゲームにまで対応しているのは驚きでした

# 最後に
無料枠の制限に達したのでここまでにします。
他にも面白そうなのがあったら、載せてみます！
2024-09-10 共有記事ログ

# 概要
現職の開発部のメンバーに共有した記事のログ

# セキュリティ系
## [GitHubのOrganizationの設定を1歩セキュアにした話](https://zenn.dev/loglass/articles/7fa26494c3415a)
簡単にできるGithubのセキュリティ向上のための設定方法の紹介記事です！
手軽にできそうなのでとりあえず設定していても良さそう


# その他
## [新人エンジニアのキャリアと3つの輪](https://tech.studyplus.co.jp/entry/2024/09/02/090000)
やりたい・やるべき・できるが重なるキャリアを目指すべきという記事です
特にやりたいが見つからない人は褒められたい・役に立ちたいなどの外的動機付けから始めてみるのも良さそうです
そして労力は必要ですが、やるべき事を自分のやりたい事に近づけることもできるという事も意識すると、仕事のストレスが多少は減るかもしれませんね

## [「いいね」を押すと世界が救われる（かもしれない）](https://qiita.com/kikuziro/items/1131f8cc98f3a6535be2)
もっと気軽にいいねをするとモチベーションが上がるかもしれないという記事です
大事なのはポジティブフィードバックをたくさんすることだと思っています！
いいねというのは手段の一つでしか無いと思いますが、最も手軽に行えることなので、積極的に行いましょう！


# To Intern
## [エラーに直面したときにすべき5つのステップ](https://qiita.com/Sicut_study/items/41e79f911f7881966e38)
問題解決能力についての記事です
エラーに遭遇した場合の調べ方や自分ルールの参考になるのではと思います！


# 共有するほどではないけど興味があったもので読んだもの
* [セキュリティ・キャンプ 2024 参加記](https://moz-security.hatenablog.com/entry/2024/08/31/121836)
* [実体験から学ぶ、安全なMigrationライブラリの選定と移行](https://tech.pepabo.com/2024/09/01/replace-to-online-migration/)
* [新卒が必読書「リーダブルコード」から学んだ、読みやすいコードを書くための基本ルール](https://creators.bengo4.com/entry/2024/09/02/073000)
* [エンジニア主導で爆速開発を実現する](https://tech-blog.tabelog.com/entry/2024/08/engineer-led-fast-development)
* [多様なメンバーが気持ちよく効果的に働けるチームにしていきたい](https://techblog.tebiki.co.jp/effective-teamwork-47fad7fa9aaa)
* [display:contents;って何？どんな時に使うと便利なの？](https://qiita.com/kana_zzzz/items/db2c9acca5a84c7848c2)
* [【未経験2週間】感謝で幸福度を上げる日記アプリをリリースしました【個人開発】](https://qiita.com/acu8/items/ac2c9ea02985e3442cf6)
* [DMMのGo言語5daysインターンが最高すぎた！](https://qiita.com/shio-42/items/c3eb4ca8934b8d08ba5e)
* [Python初心者がマスターしておきたい辞書の活用テクニック10選！](https://qiita.com/fujine/items/6c4c9dcdca10c6c09d52)
* [【保存版】3大思考法の徹底比較と実践方法](https://qiita.com/zunbero_zunbero/items/1c266ecf78ecc61b1725)
* [【個人開発】Qiitaで投稿を断念してしまった私が、3ヶ月越しに「初学者向けの技術記事アプリ」を作成しました！💐](https://qiita.com/s17w09/items/0abf0be66cdd973425cc)
* [【パワポ対応版】資料作成はAIにまかせよう！AWSでBedrockエージェント入門ハンズオン](https://qiita.com/minorun365/items/85cb57f19fe16a87acff)
* [メモ帳でコーディングしていた話](https://qiita.com/ochx/items/f2f4bcd8349cbe70d9b4)
* [JavaScript｜importの書き方が多いのでまとめてみた](https://qiita.com/ho_na/items/c56c6cac78e1927e7258)
* [ソースコード管理の進化：Excel管理からGitHubまで、エンジニアの戦いを振り返る！](https://qiita.com/kccs_hiroshi-tatsuwaki/items/22ab07d783ad0fdaf6bd)
* [アンチパターンで学ぶ「仕事の進め方」](https://qiita.com/TabataRin/items/4cd7bacb64f3138f99b7)
* [Python理事会が古参開発者を追い出して開発者コミュニティが騒動に](https://qiita.com/rana_kualu/items/0369ab4e1df50bc37d7e)
* [新卒が必読書「Team Geek」から学んだ、チームづくりのためのガイド](https://creators.bengo4.com/entry/2024/09/04/073000)
* [クイズで学ぶGoの並行処理：channelとgoroutineの陥りやすいミスとその対策](https://zenn.dev/hacobell_dev/articles/49371802bf72fe)
* [「情報セキュリティの敗北史」 を読んで](https://toranoana-lab.hatenablog.com/entry/2024/09/04/100000)
* [「AWSを始めた頃に陥りがちなポイントをまとめてみた」というタイトルで登壇しました](https://dev.classmethod.jp/articles/aws-beginner-fault/)
* [他者の行動の背景を正しく理解する難しさ](https://dev.classmethod.jp/articles/attribution-theory/)
【VSCode】名前付きファイルをホットキーで作成する

## はじめに
MacのVSCodeでは`cmd + n`で新規ファイル作成ができます。
しかし、デフォルトでは以下のように無名のファイルが作成されます。

![スクリーンショット 2022-04-20 0.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b9777aae-cf94-f13c-4638-cc8eeab0deee.png)


そこで、`cmd + n`で名前をつけて新規ファイル作成ができないか調べました。
結果、`keybindings.json`を編集することで設定が可能でしたので設定方法を以下に記載します。

## 設定方法

### `keybindings.json`を開く
`cmd + sft + p`でコマンドパレットを表示します。
`Preferences: Open Keyboard Shortcuts (JSON)`と入力し、`keybindings.json`を開きます。

![スクリーンショット 2022-04-20 1.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/f47f6f9e-7cba-2442-a769-5f6b9f956de1.png)


### `keybindings.json`に設定を書く
`keybindings.json`に以下のように記述します。

```keybindings.json
[
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
  },
  {
    "key": "ctrl+n",
    "command": "explorer.newFolder",
  }
]
```

すると`cmd + n`でエクスプローラーに新規ファイルが作成されるようになります。
また、`ctrl + n`を入力すると新規フォルダを作成できるように設定しました。
実際には以下のようになります。

`cmd + n`を入力
![スクリーンショット 2022-04-20 1.16.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b29769eb-d4f8-aa7a-1f2e-671780c6b634.png)


`ctrl + n`を入力
![スクリーンショット 2022-04-20 1.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/30ff3278-ecbf-776d-3b24-0f6bdb6e9d5f.png)



## `when`を追加で設定する
`keybindings.json`に`when`を記述することで、キーバインドを有効にするタイミングを設定できます。
以下のように記述するとフォーカスがエクスプローラーにあるときのみキーバインドが有効になります。

```keybindings.json
[
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
    "when": "explorerViewletFocus"
  },
  {
    "key": "ctrl+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletFocus"
  }
]
```
【AWS基礎】そもそもAWSとは？

## AWSとは？
AWS（Amazon Web Services）は、Amazonが提供するクラウドコンピューティングサービスで、サーバー、ストレージ、データベース、ネットワークなど、インターネット経由で必要なITリソースをオンデマンドで利用できるプラットフォーム。


## 必要なときに、必要なだけ、低価格でITリソースを使える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3871776/f726c547-3abc-c6d1-54b3-d037162b96d3.png)

・コスト削減
　オンプレと比べて、サーバーを用意する時間と費用が少ない。
 　初期費用は無料で、従量課金性のため、いらなくなったリソースは削除することで、料金は掛からなくなる。
 
・俊敏性
　数分で、いつでもサーバーを展開できるため、納期の短いPJでも商機を逃さない。

・弾力性
　必要なときに、サーバーの数やサイズを柔軟に変更できる。
 
・セキュリティ
　セキュリティはAWSにおける最優先事項となっており、セキュリティ機能の実装や厳格なコンプライアンス要件に対応し、さらに第三者機関による検証が行われている。
　AWSでは、クラウド自体のセキュリティはAWSが、クラウド上で設定したリソースのセキュリティはAWSのユーザーが担う責任共有モデルで、ユーザーの運用上の負担を軽減している。

・グローバル展開
　世界中にサービス拠点があるため、即時にグローバルな展開ができる。

・幅広い機能
　200を超えるAWSサービスが提供されており、最新技術を利用できる。


## グローバル展開×耐障害性
34のリージョン・108のAZがある。

### AZ(Availavility Zone)
冗⻑的な電⼒源、ネットワーク、接続機能を備えているデータセンター群。

### リージョン
複数のAZで構成された物理的なロケーション。
例)東京リージョン・大阪リージョン・オレゴンリージョン

複数のAZによって構成されているため、1つのAZで障害が起きた場合でも、同じリージョン内の他のAZでは稼働できれば、リージョンとして稼働を継続することができる。(=マルチAZ)
マルチリージョン構成として、災害などでリージョンごと障害が起きた場合でも、他リージョンで稼働させることもできる。
UniGetUIで環境構築 - 各種パッケージ管理ツールをまとめて運用

# 始めに
目的や開発環境に応じて様々なパッケージ管理ツールが存在する。
しかし、各々のパッケージ管理ツール毎にインストールやアップデートを適宜行う必要があるため煩雑になりがちである。
今回は、それらを包括的に管理できるツールを紹介するとともに、自分なりの使い方を残す。

## 前提
私が使用したPCは以下のバージョンだが、他のバージョンあるいはWIndows10(バージョン忘れた)でも問題なく使用できた。
~~~
Windows 11 Pro 23H2 (22631.4112)
~~~

# UniGetUI
私が使用しているものは**UniGetUI**と呼ばれるツール。
元々WinGetUIという名前だったが、Microsoft公式と勘違いされる可能性があることから現在の名前になった。
こちらのツールは、以下のパッケージマネージャを包括して管理できる。
- Windows系のWinGet, chocolatey, Scoop, PowerShell
- .NET系の.NET Tool
- Python系のPip
- Node.js系のNpm

リポジトリは以下のリンク。
https://github.com/marticliment/UnigetUI

https://www.marticliment.com/unigetui/

本記事は`UniGetUI 3.1.2-beta1`で実施した。

# 使用方法
インストール手順はREADMEを参照していただくこととして、インストール後の使用方法を簡単に説明する。

## パッケージ(モジュール)のインストール
UniGetUIを起動し、左部より"パッケージを探す"をクリック。
右上の検索欄で所望のパッケージ名を検索。

![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/5221b9fa-6ea8-5803-55a5-21e3a94bc89c.png)

ここでは**WireShark**をインストールしてみる。
対象のパッケージ横のチェックボックスにチェックを入れ、「選択したパッケージをインストール」をクリック。
![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/5285d6f6-8fe9-0c7a-b75c-9d669556a123.png)
UACで管理者権限を要求された場合は、それを許可する。
基本的にはインストーラを実行したときに何も設定を変えずに「次へ」を押して進んだ状態でインストールされる。
具体的なオプションに関しては、対象のパッケージを右クリック→「パッケージの詳細」から、以下の画面で設定できる。

![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/259a7a69-bea8-e87e-c5ee-3b14cdf6e84b.png)

## パッケージのアップデート
インストールしているパッケージの最新版を検出すると、通知エリアにアップデート可能の旨の通知が来る。

## インストールされているパッケージの確認
![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/46889268-42bf-bebb-fce5-226825343b6a.png)


## パッケージバンドルについて
PCを新調した時や別PCに同じアプリケーションをインストールしたい場合、バンドルという形でまとめておくことで簡単にインストールできる。

### バンドルの作成・エクスポート
パッケージを選択し、上部の「選択したものをバンドルに追加」をクリック。
![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/4bd2d2fa-f927-e671-a7b9-4d8bca8d3b72.png)
そうすると左部の「パッケージバンドル」に以下のように追加される。
「バンドルを保存」をクリックして任意の名前を付けて保存する。
ファイル形式はjson, yaml, xmlを選択できる。
![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/69502311-670e-496b-59ca-9befc925c480.png)

### バンドルのインポート
上記で作成したファイル(json,yaml,xml)を、新規PCに何らかの手段でコピーする。
新規PCでも[UniGetUIのインストール](#UniGetUI)が必要。
インストール後、「パッケージバンドル」を選択し、「バンドルを開く」より先ほど作成したファイルを選択する。

![zoomit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416798/f956b9bc-0106-d8e6-bdb9-e095cbc7adec.png)

バンドルに含まれるパッケージが表示されるので、チェックボックスにチェックを入れ、インストールする。

# 個人的な使い方
UniGetUIは、各種パッケージマネージャをまとめて管理できるのが利点だ。しかし、NET, npm, pipに関しては、プロジェクト毎にパッケージを管理したい場合に少々問題がある。
- NuGet, dotnet
- npm init
- venv, rye
等

基本的にはプロジェクト毎にパッケージ管理することが望ましいので、所謂グローバルにパッケージをインストールする際にのみUniGetUIを使用している。
Weztermのフルスクリーン状態で同一ショートカットを使用して表示、非表示を切り替える(Mac OS)


## 環境
macOS Sonoma 14.2.1
wezterm version 20240203-110809-5046fc22

## 背景
普段自分はMacでRaycastというランチャーツールを使っており、アプリケーションごとにHotkeyを割り当てアプリケーションの表示、非表示を切り替えています。

例: alt+wで該当アプリを表示、該当アプリの表示中にalt+wで非表示

Weztermというターミナルにこのホットキーを設定していました。
Wetermがウィンドウの状態ならこの機能が正常に動くのですが、フルスクリーン状態だと非表示化の部分が上手く動作しませんでした。(フルスクリーン状態だとランチャーツール側で制御ができなくなる?Windowsではこのような現象にはあってないのでmacOS特有の問題?)

## やりたいこと
Weztermがフルスクリーンの状態で同一ショートカットを使用して表示、非表示を切り替える。

## 方法

Hotkeyを使って表示するところのみ外部アプリに任せてWeztermの操作中はWezterm側で設定可能なアプリケーションを非表示にするアクションを使用します。
このようにすればフルスクリーン中でも同じキーを用いて表示、非表示の切り替えが行えます。

## 方法詳細

### 表示Hotkeyの設定

Weztermの表示にはkarabiner-Elementsを使用します。
Raycastより細かい条件でHotkeyの設定が行えます。

https://karabiner-elements.pqrs.org/

karabiner.jsonのrulesに以下を追記します。
```karabiner.json
          {
            "description": "Alt+W to launch wezterm, disabled when wezterm is active",
            "manipulators": [
              {
                "type": "basic",
                "from": {
                  "key_code": "w",
                  "modifiers": {
                    "mandatory": [
                      "option"
                    ],
                    "optional": [
                      "any"
                    ]
                  }
                },
                "to": [
                  {
                    "shell_command": "open -a wezterm"
                  }
                ],
                "conditions": [
                  {
                    "type": "frontmost_application_unless",
                    "bundle_identifiers": [
                      "^com\\.github\\.wez\\.wezterm$"
                    ]
                  }
                ]
              }
            ]
          }
```
condtionsの所でweztermが最前面に表示されている時以外という条件でキーの設定を行っています。Weztermが最前面に表示されていない時に`alt+w`を押すと起動する設定です。

### 非表示Hotkeyの設定
こちらはWeztermの設定で行います
Wezterm.luaに以下を追記します。
```wezterm.lua
local wezterm = require("wezterm")
local config = wezterm.config_builder()

config.keys = {
  { key = "w", mods = "ALT", action = wezterm.action.HideApplication },
}

return config
```

HideApplicationというアクションを使用すればWeztermを非表示にできるので`alt+w`にその設定をしています。

https://wezfurlong.org/wezterm/config/lua/keyassignment/HideApplication.html

## 終わりに
今まで非表示化の部分が動かない状態で使用していたので解決できてよかったです。そもそもWezterm側にHotkey機能があれば楽なのにと思ったり。
【応用情報技術者試験 #2】プロジェクトマネジメント

## 1.はじめに
　この記事は1か月の勉強で応用情報技術者試験に合格できるのかどうか記録するのと、
　記憶の定着でアウトプットという意味を込めて記録しているものになります。
  自分の見返すように作成したりするので少し見づらいかもしれません・・・

　私の経歴などは下記の記事を参照ください。
  　[【応用情報技術者試験】ほぼ勉強してない状態で約1か月で受かることはできるのか] 
   (https://qiita.com/NK_2/items/f33e1f3df5f1327570bf "Hello")

## 2.プロジェクトマネジメント

### ①プロジェクト統合マネジメント
　プロジェクト憲章や計画書の作成など、各作業を統合的に管理・調整することで、目的を達成するための活動。
  　変更管理や構成管理がここのフェーズにあたる。

　構成管理・・・プロジェクト内で作業者がどういった環境で作業するか等まとめたもの。
　変更管理・・・プロジェクトの仕様や成果物への変更要求を受け付けて、レビューし、承認して変更を行う。


### ②ステークホルダ
　ステークホルダ・・・利害関係者
　・利害関係者を明らかにする
　・プロジェクトと適度な距離になるように管理する

### ③スコープ
  * スコープ：プロジェクトが提供するプロダクト、サービス、所産の総体のこと。
  * 除外事項：スコープから除かれるもの。
  * 前提条件：プロジェクトの計画に当たっての前提。
  * 制約条件：プロジェクトの実行に影響を及ぼす影響要素。

　WBSの作成
　　プロジェクト・チームが実施する作業の全範囲を要素分解したもの。
　　最上位の要素はプロジェクト名、最下位の要素をワークパッケージ。
　　ワークパッケージは、プロジェクトタイムマネジメントで、アクティビティに分解される。

### ④資源

　必要な人的資源の洗い出し、調達管理

  教育技法
　　インバスケット：一定時間内に数多くの問題を処理させて、総合的な判断力を高める技法。
　　ケーススタディ：実際の事例の研究や、一般的な理論やモデルの応用などを通して、実践的な能力を高める技法。
　　OJT：実務の中で、上司や先輩から個別に指導を受けて、実体験から知識を得る技法。
　　ロールプレイング：参加者に特別の役割を演じさせて、役割に応じたスキルを高める技法。


### ⑤時間
　プロジェクトの計画をし、スケジュール通りにプロジェクトが進むようにマネジメントする。

　**クリティカルパス法**
　　全作業工程の中で最も所要日数のかかる作業群、クリティカルパスを用いて作業期間の見積もりをする方法。

　**アローダイアグラム**
　　作業と作業日数を矢印で、結合点を丸印で表す図。作業日数が0だが、作業間で依存関係のある作業を”ダミー作業”と言って、破線の矢印で表す。

　　**往路時間計算(フォワード・パス)分析**:作業の開始時点から終了時点に向かって所要日数を加算して最早結合点時刻(開始点からその結合点に最も早く到達できる日)を求める。
  
　　**復路時間計算(バックワード・パス)分析**:作業の終了時点から開始時点に向かって所要日数を減算して最遅結合点時刻(プロジェクト全体の遅れにつながらない範囲で最も遅くなっても良い日)を求める。

　　**余裕時間分析**:各結合点でプロジェクト全体の遅れにならない範囲でとどまれる時間（フロート）を算出する。最遅結合点時刻-最早結合点時刻で求められる。
フロートが0の結合点をつないだ経路がクリティカルパスになる。

　**プレジデンス・ダイアグラム**
　　アクティビティを四角形で表し、先行アクティビティと後続アクティビティを矢印で接続した図。

　　**往路時間計算(フォワード・パス)分析**:作業の開始時点から終了時点に向かって所要日数を加算して最早結合点時刻(開始点からその結合点に最も早く到達できる日)を求める。
  
　　**復路時間計算(バックワード・パス)分析**:作業の終了時点から開始時点に向かって所要日数を減算して最遅結合点時刻(プロジェクト全体の遅れにつながらない範囲で最も遅くなっても良い日)を求める。
  
　　**余裕時間分析**:各結合点でプロジェクト全体の遅れにならない範囲でとどまれる時間（フロート）を算出する。最遅結合点時刻-最早結合点時刻で求められる。


本日分、以上
住所をナビアプリへ入力したときにヒットするように正規化する（特に京都の通り名を削除する）

こんにちは、毎日100km京都をバイクで無双しているChiakiと申します。

京都の洛内と呼ばれる京都の中心部では、通り名と呼ばれる通りの名前をつけて住所を表記する場合があります。
例えば、**京都府京都市右京区西大路通御池下る西小路町111**なら**西大路通御池下る**が通り名です。しかしこの通り名がついていると、ナビアプリに入力した時、地点が特定できない（ヒットしない）ケースが多々あります。**京都府京都市右京区西小路町111**と入力すると検索できます。そのため通り名を削除して検索するのですが、住所の途中にあるのでなんとも選択しにくいこと……。そのため通り名を検出する正規表現を、考えました。京都の通り名を含む住所を含めて全国すべての住所にヒットする正規表現とも言えます。

多くのケースで検出できると信じていますが、もし検出できないケースを見つけたらコメントお待ちしております！直します。

# はよ正規表現をくれ
忙しい人のために。

正規表現のテストができ、ライブラリとしての機能もあるregex101.comにもアップロードしてあります。


>(?<pref>京都府)?\s*(?<city>京都市)\s*(?<ward>[上中下左右]京区|東山区)\s*(?:.+[東西上下]+[入がるルﾙ]+)\s*(?<address>.+)

テストケースです。すべて抽出できます。なお住所は全てダミーです。
```
京都府京都市上京区室町通一条上る小島町153-8
京都府京都市上京区今出川通室町西入ル紙屋川町725-3
京都府京都市上京区新町通丸太町下る春帯町468-6
京都府京都市中京区烏丸通御池下る饅頭屋町989-7
京都府京都市中京区三条通河原町東入ル中島町301-8
京都府京都市中京区御幸町通錦小路上ル船屋町602-9
京都府京都市中京区麸屋町通六角下る坂井町803-10
京都府京都市下京区四条通柳馬場西入ル立売西町204-11
京都府京都市下京区松原通西洞院東入ル本塩竈町505-12
京都府京都市下京区花屋町通松原上る柿本町906-13
京都府京都市左京区東大路通仁王門下る東門前町407-14
京都府京都市左京区北大路通下鴨本通西入ル下鴨前萩町108-15
京都府京都市左京区白川通今出川上る石橋町809-16
京都府京都市右京区西大路通御池下る西小路町611-17
京都府京都市上京区大宮通寺之内上る二丁目西入社横町288
京都府京都市上京区大宮通寺之内下る花開院町126
京都府京都市中京区寺町通三条上る天性寺前町535
京都府京都市下京区烏丸通七条下る東塩小路町590-2
京都府京都市中京区寺町通六角上る桜之町426番地
京都府京都市下京区四条通室町東入函谷鉾町78番地
京都府京都市上京区上ノ下立売通紙屋川東入堀川町527-26
京都府京都市東山区鞘町通正面下る上堀詰町265
京都府京都市下京区松原通西洞院東入藪下町2
京都府京都市下京区東中筋通花屋町下る柳町335-3
京都府京都市下京区東洞院通四条下る元悪王子町47-4
京都市下京区木屋町五条上がる下材木町 778
京都市中京区河原町通姉小路上ル下丸屋町999-1
```

正規表現の置換で後方参照を利用して通り名を削除するだけです。京都の通り名を含まない住所は正規表現にヒットしないので置換されずそのままになります。

```
$1$2$3$4
```
javaの場合はこうなります。私はMacrodroidで使用しているので上の記法でなく下の記法になります。言語によって後方参照の書き方は若干変わるみたいです。
```
${pref}${city}${ward}${address}
```
Github ActionsでUnitTest自動化

## はじめに
継続的インテグレーション（CI）は、コードの品質を維持し、効率的な開発を行うために欠かせないプロセスです。**GitHub Actions**を使用することで、簡単にCIを導入し、自動的にビルドやテストを実行することができます。

## 準備
1. Github Actionsでワークフローを実行したいプロジェクトがGithub上にアップロードします
2. `.github/workflows`というディレクトリを作成してください
3. 作成したディレクトリにYAMLファイルを作成し、ここにGithub Actionsの設定を記述します

## サンプル
サンプルとして、以下のコードを書いてみました。
今回はPR作成時にビルドとテストを実行するワークフローを書いてみました。
```Sample.yml
name: GitHub Actions Demo App

on:
  pull_request:
    branches:
      - main

jobs:
  unit-tests:
    name: Run Test On PR
    runs-on: macos-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Set up Xcode
      run: sudo xcode-select --switch /Applications/Xcode_15.3.app

    - name: Build
      run: xcodebuild -scheme ArticleSearcher -destination 'platform=iOS Simulator,name=iPhone 15,OS=17.4'

    - name: Run Tests
      run: xcodebuild -scheme ArticleSearcher -destination 'platform=iOS Simulator,name=iPhone 15,OS=17.4' test
```
### 解説
#### 1. on
```yml
on:
  pull_request:
    branches:
      - main
```
`on: pull_request` で、PRが作成されたときにワークフローをトリガーするように設定しています。また、`branches: - main` で、メインブランチに対するプルリクエストのみが対象となるようにしています。

#### 2. jobs
```yml
jobs:
  unit-tests:
    name: Run Test On PR
    runs-on: macos-latest
```
`on`でトリガーを設定したタイミングで、`jobs`に記載してあるワークフローが実行されます。`name`はこのjobに任意の名前つけることができます。また、今回は`runs-on: macos-latest`で最新のmacOSバージョンで実行されるように指定しています。

#### 3. steps
各ジョブにはいくつかのステップに分けて具体的な処理を定義することができます。

- ##### Checkout
```yml
- name: Checkout
  uses: actions/checkout@v4
```
このステップはGithub Actions標準のアクションで、ワークフロー内でリポジトリにアクセスできるようなります。
- ##### Xcodeのセットアップ
```yml
- name: Set up Xcode
  run: sudo xcode-select --switch /Applications/Xcode_15.3.app
```
Xcodeのバージョンを指定してセットアップします。このサンプルでは、Xcode 15.3を使用するよう設定しています。
- ##### ビルド
```yml
- name: Build
  run: xcodebuild -scheme ArticleSearcher -destination 'platform=iOS Simulator,name=iPhone 15,OS=17.4'
```
`xcodebuild` コマンドを使って、指定したシミュレータ環境（iPhone 15、iOS 17.4）でアプリをビルドします。
- テスト実行
```yml
- name: Run Tests
  run: xcodebuild -scheme ArticleSearcher -destination 'platform=iOS Simulator,name=iPhone 15,OS=17.4' test
```
こちらも `xcodebuild` コマンドを使い、ビルドしたアプリに対してユニットテストを実行します。

## まとめ
これにより、PR作成時に自動でビルドとテストが実行されるようになりました。
また、今回作成したサンプルコードを下に貼っておきます。
https://github.com/kai-Bomb/ArticleSearcher
Webアプリを作成する際の流れについてまとめてみた

# Webアプリ開発の流れ
アプリを開発しようとするも、ぐだぐだになり失敗
→個人開発における必要なことを簡単にまとめてみた。
## 企画
アプリ開発におけるゴールを明確にする。
- このアプリを作成することで、どのような問題を解決できるか
- 何のために、誰に向けてこのアプリを開発するのか（極論自分のためでも可）

競合アプリの比較
- 類似のサービスがないかを調べ、それぞれの特徴を知る。
 ユーザーがアプリを使うメリットを明確にできる。（クローンアプリとなることを防止、自作アプリの差別化）

※個人の学習用であれば、新しい技術の習得がゴールとなる。恐れず作ってみること!!

## 設計
目標を実現するために、必要な機能を洗い出す。
### 機能要件
サービス提供のために必ず必要な機能。
あれもこれもではなく、必ず使うものを最小単位で列挙する。
例）会員制のアプリを作る場合は、ユーザー登録と、ログイン、ログアウト機能が必要。

### 非機能要件
機能要件のように、なければ破綻するものではないが、こだわるほどアプリの使いやすさが向上し、ユーザーの満足度が上がる。
例）レスポンスまでの時間が早い、UIがわかりやすい（デザインが苦手であれば、他のWebサイトの構成を参考にしたり、Bootstrapなどを活用するとオシャレになっていいかも）

### 技術選定
機能を実現するために、どのようなツールがあれば作れるか
 - MVC機能の実装（LaravelやRuby on Railsなどのフレームワーク）
 -  Todo機能などのシンプルなSPAアプリを作りたい（Vue.js、Reactなど）
 - アプリに地図を載せたい（Googlemap API）
 - バージョン管理（Git）
 - 環境構築（Docker）  

### 画面遷移図を作成
どんな画面が表示され、そこで何ができて、どう遷移するのかを把握するために使用。
どのように画面が動いていくか、全体の流れが掴める。

※以下のサイトは画面遷移図、ER図、ワイヤーフレームなど、見た目に関わる部分を一通り作れていいかも

https://www.lucidchart.com/pages/ja

### ER図を作成
データ同士の関係性を明確にする。機能要件が明確になっていれば、作成しやすい。

### 開発
- タスクごとにブランチを作成
  - githubで使用できるIssuesの活用することで、タスクを明確にできる。
- 機能追加や改修
- テストの実施

## 大事なこと
とにかく完成させることを意識する
→工数を明確にし、ダラダラと開発することをしない。
自分の知っている技術を最大限活用することを心がける。
（知らない技術を途中で盛り込もうとすると、予想外に時間がかかり失敗の原因に・・・）

これから少しずつ小さなアプリを完成させ、いつかはオリジナルアプリを作れるようになりたい!!


## 参考サイト

https://qiita.com/takahirocook/items/3cfa6585e74effafe5da

https://jun-app.com/articles/private-develop-released

https://codezine.jp/article/detail/17888?p=1&anchor=0
こっそり教える！ 生成AI×社内データでこれができる！in 小売りの現場

小売の現場で
生成AIと社内データ連携で
できる事の事例
現場従業員が模索してみた！
自主的に！現場から！

# 1 社内電話帳との連携

スマホに○○に詳しい人は？○○の事は誰に聞けばいいの？ってきいたらすぐにざっくり答えてくれるよ

![{3225A614-9E71-4F11-B4A9-E6722E518DE8}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/2fa8c3e4-9f72-41d4-c8eb-844e501ab445.png)

![{14ECA251-6649-4166-852A-157EBC666F12}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/ed97288c-25cc-e003-2aa8-9f533488e2e6.png)




# 2 社内ツールのマニュアル

社内ツールのマニュアル100ページ 誰が読むんかい！
欲しい所だけまとめて 教えて！

![{44BABB76-F6B7-4912-ABEE-C3918ADD3FA6}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/36a4fc2f-83cf-913d-3257-ae4ba1a18c54.png)


![{90CBD404-4FD6-4B77-BFE2-E6AD7B653852}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/3490de44-709f-901a-b1a2-d3a90c14eab1.png)

# 3 需要予測
回帰分析って何？  って感じでも 社内のデータをデータ分析ができる

![{2556B971-FDE2-42D3-928F-76E167F22E9A}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/77f0dd2e-c6d3-6a60-695b-80792dd820bf.png)

![{EAF2903E-205B-4ECE-819B-619DEC4F2DEC}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/1df1dd37-3753-5d1a-8913-62ad98f4ea1c.png)

# 4 本部⇒現場 の情報伝達

本部の多くの部署からの情報伝達 受け手のお店に情報が集中してボトルネック。
こりゃヌケ漏れしますよね！

![{E7F3648E-595C-4684-9D35-729A213FDA19}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/66a9b427-ee03-575c-cb29-7fd3b7dacac0.png)

![{CDEAEE2C-5263-449B-B3D1-E732763535A6}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/74be574d-3d07-0ba4-fe42-56cfef4b8c51.png)

# 5 インストアラベル呼び出し君​



インストアラベル 店内作成の総菜やお弁当に貼られるアレ、アレルゲンなど貼り間違えるはご法度。間違えを起こさない様に！

商品台帳を声でささっと表示して欲しい

![{D162CE0F-7A74-4DC7-90BA-EDBF4DF544E9}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/c41ee02d-eef6-55eb-024e-712cf94e5d5d.png)

![{CBCCA8C5-73B5-4162-977D-A35522122017}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/74bb29dc-7dba-81f5-87a6-a97e6501d674.png)

# 6 コンシェルジュ石川の可能性は無限大!​​

あの商品何処？ に店内の商品陳列データベースから該当商品を即答！
あいまいな質問にも答えてくれるよん

![{E467FE21-ED95-4BEE-A5D9-FE57494443E8}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/efbed1b1-4cc2-a4bc-3f81-e8c89c1f215b.png)

![{DDCE6062-5917-4961-BCF9-993A715063CE}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/8c9df1fd-d771-22e3-974b-a7093a20ef7c.png)


# 7 取組から

①課題に対し、先ずは取り組んでみるという姿勢の大切さ​

➤やってみる前から『無理！』と思った瞬間に自らの成長の可能性を潰し、思考が止まる🧠​

​

②社内の課題に自分事としての意識​

➤誰かが何とかしてくれる、という考えからそれ自分達でどうにかできないかという思考に変化🧠​

​

③解決プロセスへの非線形的な行動力​

➤SNS、インターネット、社内社外、取引先からの情報収集しや発信 視野の拡大と情報は取りに行く集める！🧠​

​

④★部署、会社を超えた連携の大切さ​

➤ 異なる部署が集まりそれぞれの課題解決に向け協働、社内コミュニティとしてノウハウ共有🧠​

➤ 技術スキルを個人で持つ事よりも 共有する事 発信する事が重要 システムや教育などの連携や投資も超重要🧠​

​

⑤★目的や課題の再確認​

➤ 生成AIやデジタルツールは お題目や目的でなく 効率化や収益構造改革へのイノベーションの手段！🧠​

➤   皆が使うようになる  使えるようになる手段方法が重要

# 8 まとめ


DX(デジタルトランスフォーメーション)​はシステム部門だけの取り組みでは無く​組織全体で取り組む必要がある！​
自ら動く 学ぶ 知る 使う ができないと​生成AIも効果がない ​
生成AIなどの最先端のツールや​その世界の情報を取り​
社内従業員全体の​デジタルリテラシーの向上の必要性を​痛感しました
切れ痔エンジニアのAWS認定 SAP受験記録😁✌️

この度
 - AWS Certified Solutions Architect - Professional(以下SAPと記載)

に合格しましたので、勉強方法や受験体験等について記録します。
※守秘義務に抵触しないよう、出題された問題に関する内容は記載していません。

## 前提
既に以下認定資格を取得している状態で受験しました。
 - AWS Certified Cloud Practitioner(CLF)
 - AWS Certified Solutions Architect – Associate(SAA)
 - AWS Certified SysOps Administrator - Associate(SOA)
 - AWS Certified Developer - Associate(DVA)

## 受験動機
SAAの期限が切れそうだったので、SAAの上位資格であるSAPを取得して更新を図るために受験をしました。

## 受験回数
1回

## 得点
![スクリーンショット 2024-09-08 19.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715905/350b873a-074d-adb1-77ea-c911b9311ec2.png)


## 勉強方法
### 総勉強時間
30-40時間程
※ほぼ業務の休憩時間と通勤時間を活用しました。

### 使用した教材
 - CloudTech クラウドテック
   - ほとんどこの教材が合格に寄与したと思います。<br>1問1問解説にスライドが用意されているのですが、視覚的にインフラ構成を把握するのにすごく便利でした。
 - AWS認定資格試験テキスト＆問題集(SBクリエイティブ)
   - リファレンスとして購入しました。


### 勉強の進め方
最初からCloudTechの問題を解き進めていきました。

既にSAAを取得しており各サービスについて全く知らないということはない想定だったため、問題を通じて知識・理解を深める方法が効率的だと思ったためです。
結果的にこの方法は正しかったと思います。

CloudTechの問題300問を2周しました。
本当は3周する予定でしたが、問題におけるインフラ構成を把握したり不正解の選択が何故駄目なのかを深堀していたら2周を終えた時点で本番を迎えてしまいました。

しかし上述のような1問1問を掘り下げる学習によって当日は応用が利いたと考えています。

## 失敗談
試験途中でトイレに行かなくてよいよう、事前に水分補給をしませんでした。
しかしこのテストは180分なので途中少しきつかったです。

見直しやアンケートを含め30分くらい時間が余ったので、あまり深く考えずに水分補給してよかったように思いました。

## 感想
勉強を通じて以下のようなことを学ぶことができ、非常に有用だったと感じました。

 - コスト最適な構成
 - 高可用性・信頼性を実現する構成
 - 各サービスで実現できること・できないこと

一方
 - グローバル展開している大規模なインフラ構成
 - IOT(センサネットワーク)
 - 効率的なマルチアカウント管理

等個人的には実務へ直結しない内容も勉強する必要がありました。
コンサルないしSierの方にとってはそれらも有用だと思います。

上記を踏まえても勉強してよかったと思ったので、何かAWSに関する体系的なインプットをしたい方にはおすすめだと思います。

時間のある方は、ブラックベルトの活用や実際に対象サービスに触れるとよりスキルアップにつながると思います。
(SAPはコスト的に試しにくいサービスも多々ありますが、、)

僕はこれからやります。
【プログラミング初心者】0から始めるReact学習 #4 ~Web開発の基本編~

# 1-1.最低限のインプット
## 9月6日
**【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門**の
34~52まで完了。

遂に！！今日からReactの学習に入っていきました！
「よ～し。やっとReactの勉強が始まるぞ～...!!」そう意気込んで、10分後。

あれ、講義の通りコードを書いてるのに上手く表示されません。
「え、なんで？StackBlitzでやってるからCodeSandboxと違うのかな？」早々に躓きました。。
（講義自体はSandboxを使っているため、デフォルトのファイルの量が違い、余計に混乱しました笑）

こんな画面になる↓
![error1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/fb7d4db0-65b0-0fea-d290-c46180a45ebe.png)


エラー分を読んでも講義のコードと見比べてもどこがおかしいのか分かりません。
ChtGPTに聞いたり、講義を見返したりすること10数分...やっと見つけました。

App.jsxをimportする際に「.」が抜けていたんです。
こんな事に何十分も使うなんて。。（笑）

「.」を書いてみたところ、きちんと動きました。
![ok1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3877233/e032cc26-98a8-a3b2-b4f5-5df1fea6331b.png)

初歩的なミスですが、この段階で気付けて良かったです。
以降、気を付けよう。。

### まとめ
その後は何のエラーも発生することなく、進めることができました。
Reactの基本的な機能に関する講義が完了したので、明日からいよいよReactでTODOアプリの
開発をやっていきます！
JavaScriptで開発した際とどう変わるのか違いが楽しみです！！！
環境構築メモ - Laravel編

環境構築としてLaravelのセットアップについて記録しておく
今回はUbuntu上にLaravelをインストールする

[Ubuntuのインストールはこちら](https://qiita.com/aMASSO/items/c436339ad183a9dbb545)
[PHP・MySQLのインストールはこちら](https://qiita.com/aMASSO/items/08e1ee8b2245d0f524e4)

### 1.nodeのインストール
<font color="red">※sudo apt でインストールされるnodeは古い為、nvm（ノード バージョン マネージャー）でインストールする</font>

nvmインストール
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/6ec66be0-ec9c-779a-4ce2-60be0b0df2bb.png)

ターミナルを再起動してnodeをインストール：最新の安定版（lts）
```
nvm install --lts
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/f80de000-82af-d692-aa18-29cf47b1f243.png)

### 2.composerインストール
適当なディレクトリを作成し、インストーラをダウンロードする
```
sudo php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/ccfa832d-2c8e-9f46-ed29-afea7758e1a6.png)


usr/local/binへインストール
```
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

composer
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/0636a2ef-208a-7101-1375-a83cd2992833.png)


### 3.Laravelプロジェクトの作成

ディレクトリを作成し、プロジェクト作成
```
composer create-project laravel/laravel .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/af0f4ba6-3c4f-01c6-33bd-142a7b753e39.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/17d11231-fac9-346d-0454-abcb07c046f0.png)
<br>
テーブル作成
```
php artisan migrate
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/2cf97c50-8660-e48e-4437-c2ee5cc43c4b.png)
<br>
.envの DB関連の設定を変更
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Laravel
DB_USERNAME=root
DB_PASSWORD={設定したパスワード}
```
<br>

phpを起動してアクセス
```
php artisan serve
```
[http://localhost:8000/](http://localhost:8000/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879789/b99122a2-dcfb-5acb-eb23-a7c0ace31c69.png)
【MySQL】レストア時に「Access denied for user 'root'@'localhost'」となる場合

# 概要
Dockerコンテナで起動しているMysql8.0のDBをDBEAVERで開いて、レストアすると以下のエラーになりました。
一応解決できたので紹介します。

> /opt/homebrew/Cellar/mysql/8.1.0/bin/mysql -u root --host=localhost --port=3304 -v sampledb Task 'MySQL restore' started at Thu Sep 05 14:49:35 JST 2024 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

# 原因と対策
DBeaverでDBにはアクセスできるし、`root`ユーザーの権限を確認したが問題なし。
どうしてレストア時のみ失敗するのだろう？

まず同じコマンドをターミナルからやってみる。

```
/opt/homebrew/Cellar/mysql/8.1.0/bin/mysql -u root --host=localhost --port=3304 -v sampledb -p
```

同じように`Access denied`と出てきました。
普通にmysqlコマンドで入れば正常にログインできたので、おそらくレストア時に使っているローカルクライアントの`/opt/homebrew/Cellar/mysql/8.1.0/bin/mysql`を使っていることで影響が出ているらしいと推測。


調べていると、`localhost`ではなくて`127.0.0.1`に変更するとTCP/IPを明示的に使用できることがある、というのを見つけたので、`127.0.0.1`にして以下実行。

```
/opt/homebrew/Cellar/mysql/8.1.0/bin/mysql -u root --host=127.0.0.1 --port=3304 -v sampledb -p
```

するとmysqlにログインできました！

DBEAVERでも同様にDB設定で`localhost`から`127.0.0.1`としたら、レストアが正常に実行されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/f0f83aee-bb44-54d8-684f-2d4b485840a3.png)


しかし、`127.0.0.1`にすることで解決したのはなぜなのだろう...

`localhost`はUNIXドメインソケットを使用して接続し、`127.0.0.1`（ループバックアドレスとも呼ばれる）はTCP/IPを使用して接続する、という違いがあるよう。

ローカルのMySQLの設定ファイルは以下のようになっていました。`localhost`を指定した場合でも、実際には`127.0.0.1`にリダイレクトされるため、TCP/IP接続が使用される...はず？

```/opt/homebrew/etc/my.cnf
# Default Homebrew MySQL server config
[mysqld]
# Only allow connections from localhost
bind-address = 127.0.0.1
mysqlx-bind-address = 127.0.0.1
character-set-server = utf8mb4

[client]
default-character-set = utf8mb4
```

`socket=/tmp/mysql.sock`を追加してみましたが同じでした。
ソケットファイルあたりに原因があったのだろうか...？

真因がわかったら更新します。
Prismaでviewを操作できるようにする

# はじめに
Prismaでviewを操作しようと思ったのですが、意外に記事が少なかったので実装方法を共有します。

ちなみに公式ドキュメントを確認するとしっかりと記述がありますが、より分かりやすく説明することを心がけます。

[公式ドキュメント](https://www.prisma.io/docs/orm/prisma-schema/data-model/views)

# 初期設定
`schema.prisma`ファイルに`previewFeatures = ["views"]`を設定する

```diff_c:schema.prisma:
generator client {
  provider        = "prisma-client-js"
+ previewFeatures = ["views"]
}
```

# コマンドなどでviewを作成しましょう
:::note info
prismaから直接viewを追加することは2024年9月時点ではできないようです。
:::
viewを追加しましょう ※以下イメージです。
[mysqlでのview作成方法](https://qiita.com/tatsuya_1995/items/c06ba415a6f174e9ace9)
```sql
CREATE VIEW UserInfo (
  id, 
  email, 
  name, 
  bio
) AS (
  SELECT 
    sa.id, 
    i.email, 
    i.name, 
    sh.bio
  FROM 
    sales sa 
    LEFT JOIN items i ON sa.item_id = i.id 
    LEFT JOIN shops sh ON sa.shop_id = sh.id
);
```

# schema.prismaにviewを反映させる

以下のコマンドを実行します。
```shell
npx prisma db pull
```

すると`schema.prisma`にviewが反映します。
```sql
/// The underlying view does not contain a valid unique identifier and can therefore currently not be handled by Prisma Client.
view UserInfo {
  id    Int?
  email String?
  name  String?
  bio   String?

  @@ignore
}
```

# schema.prismaにviewの内容を編集する
上記のviewのブロックを有効化するには以下の条件を満たす必要があります。
* 主キーのオプションフラグ`?`を削除する
* 主キーに@uniqueを追加する
* `@@ignore`属性を削除する
* 上部に生成されたコメントを削除する

```diff_sql
- /// The underlying view does not contain a valid unique identifier and can therefore currently not be handled by Prisma Client.

view UserInfo {
-  id    Int?
+  id    Int  @unique
   email String?
   name  String?
   bio   String?

-  @@ignore
}
```

以上でviewテーブル操作できるようになっています。

:::note warn
ちなみにこの時点で`prisma/views`ディレクトリが自動生成され、sqlファイルが追加されています。
:::

Prismaのスキーマを更新した後は、必ず `prisma generate` を実行して、Prismaクライアントを再生成してください。
```
npx prisma generate
```

# 操作できるか確認してみましょう。
以下のようにするとuserInfoから全件データを取得できます。
```
const userinfo = await prisma.userInfo.findMany()
```

# 最後に

お疲れ様でした！！
[M5 Stick C Plus] IMUセンサデモ

# 概要

![20240909_112418.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2043769/eed7f06c-4458-0bee-4d7a-50e16cca13ad.jpeg)

M5 Stick C Plusを初めて触るので，Sample Programで遊んでみた．

ベースとしたSample Programはこちら

https://github.com/m5stack/M5StickC-Plus/tree/master/examples/Basics/IMU

# やりたいこと

- M5Stick内蔵のIMUセンサの値を取得したい
- M5StickにArduino経由でコードを書き込みたい

# 環境構築

:::note info
Arduinoは既に入っているものとします．
:::

## M5Stickの認識
https://qiita.com/LapisCactus/items/b69e0bec969207581927#%E3%83%9C%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A

上記記事を参考に File > Preferences > Settingsの"Additional boardsmanager URLs"に以下のURLを追加

```
https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json
```

:::note
この手順でArduinoにM5Stack社の製品を認識するようになる
:::

## ライブラリのインクルード

Sketch > Include Library > Managies Library からM5StickCPlusのライブラリを検索してinclude

:::note
関連ライブラリを同時に入れるかどうかを聞かれるが，気にせずOK
:::

# 実行結果

Sampleに以下のCodeを追加してSerial Plotterで結果を表示

```cpp
    Serial.print("gyroX:");
    Serial.println(gyroX);
    Serial.print("gyroY:");
    Serial.println(gyroY);
    Serial.print("gyroZ:");
    Serial.println(gyroZ);

    Serial.print("accX:");
    Serial.println(accX);
    Serial.print("accY:");
    Serial.println(accY);
    Serial.print("accZ:");
    Serial.println(accZ);

    Serial.print("pitch:");
    Serial.println(pitch);
    Serial.print("roll:");
    Serial.println(roll);
    Serial.print("yaw:");
    Serial.println(yaw);
```

:::note warn
```":"```がないと全部1つの出力として見られるので絶対つける
:::

https://qiita.com/totuto/items/1d47a1b462f3a3fddd88

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2043769/7ae6efc0-311c-a29a-c7bf-df901026a967.png)

![20240909_223948.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2043769/6195ca2b-4ef8-8ba1-25a1-ff2c0137e69f.jpeg)

どちらも出力確認できた！！

# 残課題と次のステップ

:::note alert
***残課題***
なぜか```gyroX```だけSerial Plotterに表示されない...
表示数に限度がある？
有識者の方教えてください m(_ _)m
:::

:::note 
***次のステップ***
- 0点リセットをボタンを押してできるようにする
- IMUデータを使ってUnityのブロックを動かす
:::
安価なWeb開発勉強環境の構築①

# Raspberry PI に Web開発の勉強用環境を構築
 **最安値の勉強環境**
  GCP では、クラウドサーバが１つ無料で使えるので、そちらを利用するのが、
  最安値の勉強環境かと…？　でも、クレジットカード登録や、クラウドの勉強が…
  （何を始めるにしても、勉強は必要ですが…）　
  そんな方には、Raspberry PI を１万円程度で購入して勉強する事をお勧めします。
  
 **事前準備と必要なスキル**
  Raspberry PI：3 か 4 の購入をお勧めします　（私は４を使ってます）
  　　・電源のUSBがBやCなので確認して準備しましょう
  　　・SDカードは32Gbyteが良さそうです　（8GでもOKです）
  OS：Linux（debian-bookworm）のsshからのコマンド操作
  　　・OS は、Raspbian なので微妙に違いますが、誤差（？）ですよね…

 **SD FORMAT**
  使用済みSDカードを利用する場合、FATでフォーマットする必要があります
  WindowsでフォーマットするのはＮＧです　（稀にRaspberryで使えなくなります…）
  https://www.sdcard.org/ja/downloads-2/formatter-2/<br>

 **Raspberry PI 用のOSをセットアップ**
  Raspberry PI の OS を取得しましょう
  https://www.raspberrypi.com/software/
  初期設定：sshを使います、自宅wifiの設定、パスワードを忘れずに
  OS の選択：Raspbian Lite 64 Bit を選択　（Fullより軽量です）<br>

 **起動後（手元のWindows＜PowerShell＞からコマンド実行…）**
  ssh pi@999.999.999.999　（IPアドレスは自宅のルータを確認しましょう）
  sudo apt-get update
  sudo apt-get upgrade
  sudo apt-get install apache2 apache2-dev　（Webコンテナ導入）
  sudo apt-get install libapache2-mod-wsgi-py3　（FlaskとApacheの接続に必要）
sudo mkdir /flask　（作業フォルダ作成）
sudo mkdir /flask/test1　（作業フォルダ作成）
cd /flask/test1　（カレント移動）
sudo python3 -m venv venv　（仮想構築）
sudo chmod 777 -R /flask　（権限を落とす）　※ 結構適宜実施するかも？
source /flask/test1/venv/bin/activate　（仮想へ切り替え）
pip3 install flask
deactivate　（仮想環境終了）

sudo vi /flask/test1/app.wsgi　（flaskのプログラムを用意）
```diff_python
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
  return "Hellow World"
if __name__ == '__main__':
  app.run()
application = app
``` 
sudo vi /etc/apache2/ports.conf　（ポートを増やす）
```diff_conf
+ Listen 8080
``` 
sudo vi /etc/apache2/sites-enabled/test1.conf　（サイトを建設）
```diff_conf
<VirtualHost *:8080>
        DocumentRoot /flask/test1
        WSGIDaemonProcess test1 user=www-data group=www-data threads=5
        WSGIScriptAlias / /flask/test1/app.wsgi
        <Directory /flask/test1>
                WSGIProcessGroup test1
                Require all granted
        </Directory>
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
WSGIPythonHome /flask/test1/venv
``` 
sudo reboot （最後に再起動してみましょう）
後は接続テストです「http://（RaspberryのIPアドレス）:8080」で、
「Hello World」と表示されれば、作業完了です。