OmniAICreator/Qiita-1.07M huggingface dataset:
【翻訳】Quick UI Design Tips — 5

### シングルカラムフォーム
シングルカラムフォームは、すっきりとしたシンプルなデザインで、理解しやすく、操作しやすいのが特徴です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/c55b52e2-289c-a7e8-d36e-41904f32b1b9.png)

### (*)の代わりに(Optional)を使用する
アスタリスク（*）の代わりに（Optional）を使用することで、フォームのフィールドが必須ではないことをユーザーに伝える、より明確でわかりやすい方法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/0ebd0764-e7cf-ff4d-a6d7-dd22db5efca9.png)

### ポジティブなエラーメッセージを使用する
UIデザインにポジティブなエラーメッセージを使用することは、ユーザーエクスペリエンスを向上させ、よりユーザーフレンドリーなアプリケーションやウェブサイトを作成するための有効な方法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/a10c4a39-167b-0d20-9fa3-b72b2464cef6.png)

### レタースペーシングをむやみに使用しない
UIデザインにおいて、文字間隔は可読性と視覚的な魅力を向上させるために効果的に使用することができますが、不必要に使用せず、判断して使用する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/a3ffc724-fd31-1559-43b3-518315bbe2e2.png)

### 荒唐無稽な背景の使用は避ける
荒唐無稽な背景は、サイトやアプリケーションの全体的なブランディングやデザインとの一貫性がない場合があります。そのため、デザインがバラバラで、プロらしくない印象を与えてしまうことがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/7bf988ce-d217-7d1e-7384-d38d0655ef01.png)

### ホワイトスペースの使用
ホワイトスペースは、ユーザーインターフェースの全体的なデザインにバランスと調和をもたらすために使用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/f3eaa186-ce0e-6cc5-e773-9739a8835bfb.png)

### プレースホルダーで入力形式を強調表示する
カードは、重要度や複雑さが異なるさまざまな選択肢や項目を提示したいときに便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/cc07e548-6de4-14e8-2fcc-89b65c7d0677.png)

### 正しいボタンを強調する
正しいボタンは、画面上の他の要素と視覚的に区別できるように、識別しやすくする必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/7fe0f2a1-b7e6-22a0-a2dd-e5867f3e24db.png)

### 画像を目立たせる
情報を効果的に伝え、ユーザーの目を引くためには、いくつかの画像を目立たせることが重要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/6bff410f-c807-bccc-6e5b-d40e81831059.png)

### ネウモルフィズムは使えない
neumorphismは使用不可能であり、実際のアプリケーションでは機能しない！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/5076730d-4dc8-81df-8fe2-4b0f5f61b5f5.png)

## 《参考記事》 Quick UI Design Tips — 5
https://medium.com/@locaahmet/quick-ui-design-tips-5-90e9ee4a3a94
【Google Cloud】資格取得レポート: Professional Data Engineer Exam

# 資格取得レポート: Professional Data Engineer Exam
2023年4月、Professional Data Engineer Exam の遠隔監視オンライン試験を受験し取得いたしました。
Professional Cloud Architect に続き、Google Cloud関連資格3つ目の受験となりました。
資格の勉強方法についてまとめます。
オンライン試験の準備/当日の流れなどについては Associate Cloud Engineer 受験時と同様でしたので、前回のレポートをご参照いただければ幸いです。

https://qiita.com/ha_shio/items/2527930017e6538de16e

以下のような方へ、少しでも参考になれば幸いです。
・Professional Data Engineer の取得を考えている方

【__注意__】
本記事は2023/04の情報をもとに、資格の勉強方法などを記載しています。
これらの情報は更新されている可能性がございますので、実際に受験する際は、必ず公式ページなどから最新の情報をご確認ください。

## 経緯
目標として、Google Cloudのプロフェッショナル認定資格を全て取得したいと考えております。
強化期間として、先月から4ヶ月間毎月、下記4のGoogle Cloudのプロフェッショナル認定資格を取得したいと考えております。

- 4月: Professional Data Engineer
- 5月: Professional Cloud Developer
- 6月: Professional Cloud Security Engineer 
- 7月: Professional Cloud Network Engineer (予定)

https://cloud.google.com/certification/data-engineer?hl=ja

https://cloud.google.com/certification/cloud-developer?hl=ja

https://cloud.google.com/certification/cloud-security-engineer?hl=ja

https://cloud.google.com/certification/cloud-network-engineer?hl=ja

## ※ はまったこと
本筋から内容はそれますが、Google Cloudの資格受験で少しはまったことを共有いたします。

https://webassessor.com/googlecloudjp

資格受験のために登録ボタンから遷移できる上記のフォームにて、選択可能な資格は以下の7点となっています。
- Google Cloud Certified - Cloud Digital Leader (Japanese)
- Google Cloud Certified - Professional Cloud Security Engineer (Japanese)
- Google Cloud Certified - Associate Cloud Engineer (Japanese)
- Google Cloud Certified - Professional Cloud Architect (Japanese)
- Google Cloud Certified - Professional Cloud Developer (Japanese)
- Google Cloud Certified - Professional Google Workspace Administrator (Japanese)
- Google Cloud Certified - Professional Data Engineer (Japanese)

Google Cloudの認定試験は全11件であり、例えば Cloud DevOps Engineer や Cloud Network Engineer を選択することはできませんでした。
日本語の試験がなく英語のみであるため表示されていないのだと思います。
該当アカウントのプロファイルを確認すると[地域: Google Cloud Japan]となっており、こちらを変更することはできませんでした。
上記の2試験について私が受験を検討していることもあり、変更方法や受験方法について調査して別の記事でまとめます。


## 学習方法について
Professional Data Engineer Exam の資格受験にあたり、学習したことを記載いたします。
また、今回の試験に対してのフィードバックも記載します。1回の受験(50問)での感覚なので、流し読みいただければ幸いです。
### 行ったこと
- 基本的な知識の振り返り
- 模擬試験の実施
    - Google Cloud公式　
    - Udemy 模擬試験問題集(150問) - 【最短攻略】Google Cloud 認定 Professional Data Engineer 模擬問題集

https://www.udemy.com/course/google-cloud-professional-data-engineer-s/

- 公式ドキュメントの閲覧
- Google Cloudでの実際の操作

#### 学習効果が高かったと感じたこと
- 模擬試験の繰り返し実施
今回の試験では、【最短攻略】問題集は実際の出題と酷似していることはありませんでした。
それでも、公式の模擬問題と合わせて見たことがある(すぐに答えが分かる)問題は半数程度はありました。
Udemyの問題集では日本語の解説も充実しているので、それらを利用して全体的な理解が必要だと感じました。
なお、本試験ではケーススタディはなく事前把握の必要はありませんでした。

## おわりに
2つ目のプロフェッショナル資格を取得することができました。
来週には Professional Cloud Developer、来月以降も他のプロフェッショナル資格の受験も予定しております。
その際は改めてレポートできればと考えております。よろしくお願いいたします。
中央寄せについて

今回は中央寄せをするということについて書いていこうと思います！！

レイアウトをしていていつも迷うのが
**margin: 0 auto**を使うか**text-align: center;** を使うか、、、、
分からなくなってしまうので今回はここについて
自分なりに見返したらすぐわかるように書いていきたいと思います。

## margin: 0 auto;を使うとき
＜div＞などのブロック要素を中央にしたい時に使う！


```index.html
<div class="container">
    <h1>HELLO WORLD</h1>
    <p>さっそくプログラミングをやってみよう！</p>
</div>
```

```stylesheet.css
.container {
    width: 1170px
    padding: 0 15px
    margin: 0 auto;
}
```

こんな感じでブロック要素を中央にするときに使用します。
注意するのは必ず**width** を指定してあげるのを忘れないことです！！


## text-align: center;を使うとき
これはテキストや＜a＞＜img＞などのインライン要素が中央になる！

```index.html
<div class="world">
    <a href="#">world</a>
</div>
```

```stylesheet.css
.world {
    text-align: center;
}
```

これでdiv要素の中でaタグが中央寄せになりました。
ここで注意するのは**親要素にあてること**です！！

## まとめ

#### margin: 0 auto;
- ブロック要素が中央寄せになる
- 要素全体にあてる
- 要素の幅を指定してあげる

#### text-aligin: center;
- インライン要素が中央寄せになる
- 親要素にあてる



こんな感じでこれからは使い分けができるようになることを祈って🙏

今回はここまで！
ありがとうございました。
トランザクション分離レベル（自分用まとめ）

# トランザクション分離レベルについて  

## トランザクションとは  

### ①トランザクション
データの分割不可能な処理の単位を指す言葉です。  

### ②トランザクション処理
金融機関のコンピュータシステムにおける入出金処理のような一連の操作を全体として一つの処理として管理することを「トランザクション処理」といいます。  

「トランザクション処理」(複数の処理をまとめた一連の操作)は「すべて成功」か「すべて失敗」で終了する必要があります。  
例：口座から口座へ資金を移動する際に、出金と入金を個別に処理すると「片方の口座から出金後、もう一方の口座への入金がエラーで失敗」した時、出金した分の資金が消失してしまいます。  

上記の様な事象を回避するため、トランザクション処理ではすべての処理が完了するまで結果を確定させません。  
途中のどこかで失敗したらそれ以前の処理もすべて取り消すという処理を行います。  
上記の例では、入金が失敗したら出金処理の取り消し操作を行い、処理が始まる前の状態に戻して終了とする処理が行われます。  

### ③ACID特性  
DBのデータを操作する際にデータに不整合が起きないようにするための特性を指します。  

1⃣原子性(Atomicity)  
トランザクションが「すべて実行された状態」か、「全く実行されていない状態」かしかとらない性質のことを指します。  

2⃣一貫性(Consistency)
実行後も整合性が取れる性質のことを指し、DBのトランザクションにおいては、DBのルールはどんなトランザクションが起こっても破られません。  

3⃣独立性(Isolation)
複数の同時に実行されたトランザクションは、お互いに干渉しない性質を持ちます。

4⃣永続性(Durability)　　
トランザクションがコミットされたら、いかなる障害が発生してもコミットされた状態であることを保証する性質のことを指します。

## トランザクション分離レベルとは  

### トランザクション分離レベル
複数のトランザクションが同時に実行される場合に、それらのトランザクションの間でどの程度の隔離性を保つかを制御するための概念を指します。  
  
### トランザクション分離レベルの段階  
分離レベルは大きく4つに分けられており、高い順から  
1⃣ SERIALIZABLE（直列化可能）
2⃣ REPEATABLE READ（繰り返し読み取り）
3⃣ READ COMMITED（確定読み取り）
4⃣ READ UNCOMMITED（未確定読み取り）  
となります。  

1⃣ SERIALIZABLE（直列化可能）  
最も独立性（安全性）が高い分離レベルです。  
トランザクションを順番に実行（直列化）するのと同じように、他のトランザクションのデータ更新の影響をまったく受けません。
また、アクセスが競合すると「先客」のトランザクションの終了を待たなければならないためパフォーマンスは最も低くなります。  

2⃣ REPEATABLE READ（繰り返し読み取り）  
2番目に独立性が高い分離レベルです。
他のトランザクションによるデータ更新の影響を受けず、トランザクション実行中は何度繰り返し対象データを読み取っても同じ値が返ってきます。しかし、他のトランザクションによるレコードの追加・削除の影響は受けるため、「ファントムリード」と呼ばれる現象が生じることがあります。  
※ファントムリードとは、データベースシステムのトランザクション処理において、あるトランザクションが読み出しを複数回行うと、その間に他のトランザクションが追加したデータが増えてしまうこと。

3⃣ READ COMMITED（確定読み取り）  
3番目に独立性が高い分離レベルです。
トランザクション実行中に他のトランザクションがコミットした変更の影響を受けます。
ファントムリードに加え「ノンリピータブルリード」現象が生じることがあります。  
※ノンリピータブルリードとは、データベースシステムのトランザクション処理において、あるトランザクションが同じレコードを何度も繰り返し読み出す場合に途中で他のトランザクションが内容を更新してしまうこと。  

4⃣ READ UNCOMMITED（未確定読み取り）  
最も独立性が低い分離レベルです。
トランザクション実行中に他のトランザクションが引き起こすあらゆる更新・変更の影響を受けてしまいます。
ファントムリード、ノンリピータブルリードに加え、処理途上や不完全な状態のデータを読み込んでしまう「ダーティリード」現象が生じる可能性があります。処理を妨げるロックなどは最小限に抑えられるため最も高速に動作します。  
※ダーティリードとは、データベースシステムのトランザクション処理において、あるトランザクションが処理の最中にストレージに書き込んだ未確定なデータを、他のトランザクションが読み込んで使用してしまうこと。
LaravelのControllerからArtisanコマンドを引数付きで呼び出す

ControllerからArtisanコマンドを引数付きで呼び出そうとして、方法が見つかったのでメモ。

# 引数が一つの場合
### コマンド
```PHP:Console/Commands/TestArg.php
<?php

declare(strict_types=1);

namespace App\Console\Commands;

use Illuminate\Console\Command;


class TestArg extends Command
{
    protected $signature
    = 'test:receivearg {your_name}';

    protected $description
    = '引数を1つだけ受け取る';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        $your_name = $this->argument('your_name');

        logger($your_name);

        echo 'your name is ' . $your_name;

        return Command::SUCCESS;
    }
}

```

### テスト

```PHP:Terminal
php artisan test:receivearg "kartis"
// 出力結果:your name is kartis
```

### Controllerから呼び出すとこうなる。

```PHP:app/Http/Controllers/TestController.php
<?php
use Illuminate\Support\Facades\Artisan;

class TestController extends Controller
{
    public function test()
    {
        Artisan::call('test:receivearg "kartis"');
    }
}
```

では、この引数が配列だった場合はどうなるか

# 引数が配列の場合
### コマンド

```PHP:Console/Commands/TestArgArr.php
<?php

declare(strict_types=1);

namespace App\Console\Commands;

use Illuminate\Console\Command;

class TestArgArr extends Command
{
    use StockTrait;

    protected $signature = 'test:receiveargArr {arr}';

    protected $description = '引数を配列で受け取る';

    public function handle()
    {
        $array = $this->argument('arr');

        logger($array);

        return Command::SUCCESS;
    }
}
```

### コントローラ側
```PHP:app/Http/Controllers/TestController.php
<?php
use Illuminate\Support\Facades\Artisan;

class TestController extends Controller
{
    public function test()
    {
        $arr = ['kartis',
                'izumi',
                'sigu'];

         Artisan::call('test:receiveargArr', [
             'arr' => $arr
         ]);
    }
}
```

## 参考
https://pisuke-code.com/laravel-command-array-argument/
PostgreSQLのインストール

# 1.Postgresqlのインストール
以下の記事を参考にさせていただききました。
[【MacOSX】Postgresql 14.4のインストール](https://mrradiology.hatenablog.jp/entry/2022/08/01/162405)

# 2.PATHの確認
##### １．postgreSQLの実行場所を探すため以下コマンドをターミナルで実行
```
$ locate psql | grep /bin
```
すると、
```
WARNING: The locate database (/var/db/locate.database) does not exist.
To create the database, run the following command:

  sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.locate.plist

Please be aware that the database can take some time to generate; once
the database has been created, this message will no longer appear.
```
このようなメッセージが表示されます。
要約するとデーターベースを作成してくださいとのメッセージ。
エラーメッセージに書いてある以下コマンドをターミナルで実行
```
sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.locate.plist
```
これでデータベースが作成されるので処理が終わったら、先程のコマンド実行
```
$ locate psql | grep /bin       
/Library/PostgreSQL/15/bin/psql
/Library/PostgreSQL/15/debug_symbols/bin/psql.dSYM
/Library/PostgreSQL/15/debug_symbols/bin/psql.dSYM/Contents
/Library/PostgreSQL/15/debug_symbols/bin/psql.dSYM/Contents/Info.plist
/Library/PostgreSQL/15/debug_symbols/bin/psql.dSYM/Contents/Resources
/Library/PostgreSQL/15/debug_symbols/bin/psql.dSYM/Contents/Resources/DWARF
/Library/PostgreSQL/15/debug_symbols/bin/psql.dSYM/Contents/Resources/DWARF/psql
```
これでPATHが確認できました。

# 3.vimでPATHを通す
`vim ~/.zshrc`コマンドでエデイターを起動
iで編集モードにして以下を追記
```
export PATH=$PATH:"/Library/PostgreSQL/15/bin"
```
最後に`psql --version`コマンドでバージョンを確認して以下のように表示されたら完了です
```
$ psql --version                
psql (PostgreSQL) 15.3
```














参考資料など
[【MacOSX】Postgresql 14.4のインストール](https://mrradiology.hatenablog.jp/entry/2022/08/01/162405)
[Mac psqlコマンドのPATHを通す](https://awesomecatsis.com/mac-psql-path/)
[MacにpostgreSQLをインストールしてpsqlコマンドを使用する方法](https://qiita.com/covalt_ta/items/52e0b4f0b27da0edfff7)
[rails6でデータベースを変更した話](https://qiita.com/vinaka/items/fbdb17bebe75d40de995)
ログインの仕組み

　こんにちは。ディマージシェアの技術担当です。インターネットで提供されているサービスの多くはログイン認証を経て利用できます。普段当たり前のように利用しているログインの仕組みは意外と単純です。今回はwebシステムの多くで採用されているログインの仕組みを簡単に解説したいと思います。

# ログインの仕組みはホテルのチェックインに似ている
　例えば、ホテルに宿泊する際、フロントで予約した旨を伝えて身分証明書を見せればルームキーを受け取ることができます。ルームキーを持っていればホテル内の各種サービスを利用できます。予約した本人かどうかをチェックするのはチェックインのときだけで、「ルームキーの所持」はチェックインした証拠として一定期間機能します。
　webシステムのログインも同様です。ログイン画面でIDとパスワードを入力します。この行為が本人であることを確認する手続きに該当します。IDとパスワードを正しく入力することができると、webシステムから秘密の合言葉を受け取れます。合言葉を覚えている（持っている）間はログイン後の機能を使える、という仕組みになっています。
　ここで、合言葉なんて普段意識したことないよ！という人がほとんどだと思います。ログインに成功した際にwebシステムから受け取れる合言葉はたとえばこんな文字列です。

```
eyJpdiI6IlwvT21QWmRvWEF1RStKRk5ERUpweEdBPT0iLCJ2YWx1ZSI6InJKVTNOeGlKcmVFQUFkMXNNMUhCNkw3cXUxUFd5TkRLaWJOXC91WktjWkJOS0dRS1JUTTRmc2VGaWdGK25RZStsIiwibWFjIjoiZDY2ZjYyYjlmNTZiODdlNzAzOTE5OWJkZjcyYjViMjYxMTE1YTdmODkyMjJjY2Y3Mzc3N2ZlYTNhODVkNDc0MyJ9
```

　覚えておくには長すぎます。これをブラウザが代わりに覚えてくれているのです。ブラウザには、私が覚えている合言葉はこれです！と毎回webサーバに情報を送信しています。webサーバは、合言葉が正しければログインしているとみなします。この仕組みを技術的にはログインセッションと呼んでいます。
　サービスの利用を終えるときは、ホテルならばチェックアウトして鍵を返却します。webサービスではログアウトです。ログアウトすると、サーバ上で合言葉が無効と判断されるようになります。ほかにも、ブラウザで「キャッシュクリア」のような操作をすると、ブラウザが覚えている合言葉が消えてしまいます。すると、ログイン状態が解除され、再度ログインして新しい合言葉を受け取るまで、ログイン後の機能は使えなくなります。

# 安全性は？
　webシステムのログインがどのように行われているかを簡単に解説しました。おそらく、想像していたものより単純だと感じた人が多いのではないでしょうか。セキュリティ的に大丈夫なの？と感じた人もいると思います。その感覚はおおむね正しく、実際にトラブルになってしまったことが過去に何度もあります。

# 盗難に遭う可能性
　先ほど、ホテルのチェックインの仕組みで例えました。例えば、ルームキーを誰かに盗られてしまった、となるとマズいわけです。第三者がチェックイン（本人確認）せずに各種サービスを利用できてしまいます。
　webサービスでも同様の事件が起こったことがあります。webサービスから受け取った合言葉を悪意のある第三者に知られてしまったことにより、ログイン後の機能を悪用されてしまった事件が過去に起きています。このように合言葉を強奪する手法は、**セッションハイジャック**と呼ばれる名前が付いています。
　セッションハイジャックのリスクを低減する手段として、例えば合言葉を何度も変える方法が採用されることがあります。人気のあるweb開発フレームワークを使用すると、大抵はこの方式のログインセッション管理が用意されています。

# 合言葉を推測されてしまう可能性
　webサービス上でログインしているかどうかをチェックしているのは合言葉です。ただの文字列なのです。ホテルならば物理的な鍵なので偽造は難しいですが、ただの文字列では偽造されてしまうかもしれません。例えば、webサービスから受け取った合言葉が

```
id=123
```

のような極めて単純な文字列だったらどうでしょう。id=124としたら違う誰かになりすましができてしまうかもしれません。
　このような実装がきっかけでトラブルが発生してしまう可能性も少なくありません。プログラミングを覚えて3日で作ったログイン機能などは実装が脆弱な可能性があります。
　このような実装をしないためには、使用者の多いwebフレームワークを使うのがおすすめです。たいていのwebフレームワークにはログインの仕組みがデフォルトで備わっており、セキュリティ面はかなり洗練されています。少しカスタマイズするだけで実用に耐えうるログインの仕組みを提供できます。

# ブラウザを信じてよいか
　先に書いた通り、webシステムのログイン認証は、webサーバから受け取る秘密の合言葉をブラウザに覚えておいてもらうことで成立しています。つまり、ブラウザに悪意のある仕掛けがしてあるとセキュリティは破綻してしまうのです。普段当たり前のように利用しているブラウザソフトウェアには悪意のある仕掛けが無いと信じて利用していることになります。
　ここでも過去に事件がありました。具体的なソフトウェア名は伏せますが、あるアプリにはアプリ本来の動作とは別に、簡易的なブラウジング機能を実装してありました。このブラウジング機能によくない仕掛けがあることが発覚したのです。通常、適当なアプリからブラウジング機能を動かす場合は、別途ブラウザを起動する動作で実装されます。シェアの大きなブラウザは安全であることがある程度担保されているからです。
　このように、ブラウザを使ってwebアプリを使うには、ブラウザを信じるという前提が必要になります。製造元がわからないブラウザ（のような動作をするソフトウェア）を利用するときは十分に注意するようにしましょう。

# まとめ
　普段なんとなく利用しているwebサービスのログインの仕組みは実はシンプルです。計算機が誕生する前から行われていたであろうホテルのチェックインと大差ありません。一時的に使える鍵を受け取るという物理的な手続きが計算機上で模倣されているだけです。更に、鍵（合言葉）をブラウザに預けなければいけません。
　利用者はどのブラウザを信じるかを決めた上で十分に気を付けて利用することを心がけ、技術者は安全性に十分配慮した実装を心がけるようにしましょう。
ダイソーのワイヤレスイヤホン（BTTWSL2）が片方しか聞こえない場合の対処

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160489/0563d6e7-ae61-cf8d-a55b-852aa2f83efc.png)
https://jp.daisonet.com/products/4562380815613
完全ワイヤレスイヤホン2
接続・ペアリング名：BTTWSL2


# 症状
設定画面のBluetooth接続設定で、「BTTWSL2」が2つ表示されている場合、Bluetoothイヤホン同士のペアリングができていないと思われる。（正常ならBTTWSL2は1つしか表示されない）

しかしスマホとBluetooth間のペアリングはできているので、この状態だとLだけもしくはRだけ聞こえる、という症状がでる。


# 対処方法
https://www.youtube.com/shorts/SsvKpfe4NUM
この動画と同じ。

1. 接続画面でBTTWSL2との接続をすべて削除。
1. イヤホンを充電器からはずし耳に装着
1. イヤホンの側面ボタンを3回連続で押し込む（カチ・カチ・カチっとな）
1. するとイヤホンからなんか台詞がきこえる
1. 接続画面でBTTWSL2と新しく接続する。（このときBTTWSL2が1つしか表示されていなければ成功）
開発時によく使うGitコマンド集

## はじめに

- 開発作業時によく使うGitコマンドを毎回調べるのが面倒なので、まとめました。
- VSCodeで操作することを想定しています。
- 随時内容追加することがあります。

## コミット前（作業時）
### ブランチを削除（マージ済み）
```ssh
git branch -d <ブランチ名>
```

コミット済またはマージされていない場合、エラーが出力される。

### ブランチを削除（未マージ）
```ssh
git branch -D <ブランチ名>
```

### ブランチの名前を変更
```ssh
git branch -m <現在のブランチ名> <新しいブランチ名>
```

## コミット後

### 直前のコミットをリセット

```ssh
git reset --soft HEAD^
```

直前のコミットからリセット対象が１つずつ増えるごとに`^`(ハット)も増えていく。
```ssh
# HEAD〜4つ前のコミットまで
# ex. HEAD^^^^
```

以下参考記事が詳しい。

https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe


### コミットメッセージを変更
```ssh
git commit --amend -m <コミットメッセージ>
```
or
```ssh
git commit --amend 
```

プッシュしてしまった後でのコミットメッセージの書き換え方法はあるが、強制プッシュする必要があるので注意。
以下参考記事。

https://qiita.com/kaiou_fight/items/32c1798415338537ec49

### リバート(コミットの取消)

```ssh
git revert <commit識別番号>
```

なお、commit識別番号は`git log --oneline`で確認できる。
オプションを付加することで、commit識別番号(一部)とコミットメッセージだけが表示されるので見やすい。

### 複数のコミットを1つにまとめたい

```ssh
# ex) HEADとHEADから数えて2つ前のコミットが対象
git rebase -i HEAD^^
```

## プッシュ後
### 自分の作業ブランチに他の作業者の内容を取り込みたい

```ssh
# ex) developブランチの内容を自分の作業ブランチに取り込む
git checkout develop
git pull
git checkout <作業ブランチ名>
git merge origin develop
```

## マージ後

### コンフリクトしたのでマージを取りやめたい

```ssh
git merge --abort
```

他にも状況によって、取り消す方法が複数あるが、以下参考記事が詳しい。

https://qiita.com/chihiro/items/5dd671aa6f1c332986a7

## レビュー時

### リモートブランチをローカルに持ってくる

```ssh
git fetch
git branch -r
git checkout -b <新ブランチ名> <リモートブランチ名>
```

`git branch -a`でローカルに持っていきたいリモートブランチを確認する。
`remote/origin/...`が表示されるが`origin/...`の部分をリモートブランチ名に指定すること。

ちなみに`git checkout <リモートブランチ名>`でもリモートブランチを見ることができるが、違うブランチにチェックアウトすると、ブランチが表示されなくなるので注意。

## Tips

### コンフリクトを解消する
- エディタ側で解決する

https://backlog.com/ja/git-tutorial/pull-request/10/

- Github側で解決する
    - リモートブランチ側の変更のみなので、まだローカルで作業したい場合は、ローカルブランチ側で`git pull`しておくこと。

https://note.com/koushikagawa/n/n6005b5003dd2

### エイリアスを設定する
- `git config`でエイリアスを設定するとコマンド叩くのが楽になる。
- `~/.zshrc`でコマンド自体をエイリアス化すると尚良し。

#### 設定前
```
git branch
```

#### 設定後
```
br
```

以下参考記事が詳しい。

https://tech-broccoli.life/articles/engineer/recommend-git-aliases/

## 参考記事
- [typoしてpushしてしまったコミットコメントを修正してpushしなおす方法](https://qiita.com/ykawakami/items/71b462057a8d714d7382)
- [開発用ブランチにMasterブランチの最新コードを取り込む](https://bake0937.hatenablog.com/entry/2017/11/07/081616)
- [複数のコミットを1つにまとめる方法](https://dev.classmethod.jp/articles/git-commit-matomeru/)
- [【Git】リモートブランチをチェックアウトしたいときは「git fetch origin <ブランチ名>」と「git checkout <ブランチ名>」を実行すれば良い](https://dev.classmethod.jp/articles/how-to-checkout-remote-branch/)
- [Gitでもう一度マージする](https://zenn.dev/yoichi/articles/git-merge-again)
- [【git】マージしたけどやっぱりやめたい時のやり方4種類](https://qiita.com/chihiro/items/5dd671aa6f1c332986a7)
エンジニアが理解するべき「UI」 vs「UX」の違い



ソフトウェアエンジニアリングの世界では、"UI"と"UX"という二つの頭文字が頻繁に出てきます。
エンジニアであればこれらの違いを知っておくことが必要です。

この記事ではそれぞれの概念を初心者にも理解しやすいように説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/9ed40100-8151-c126-7803-5ee1cc15273d.png)


## 1. UIとは？

UIとは「ユーザーインターフェース（User Interface）」の略です。これはユーザーがシステムやソフトウェアと直接やりとりする場所、つまり「顔」を指します。

例えば、ウェブサイトのボタンのデザイン、フォントの種類と大きさ、色の使用方法などが含まれます。

簡単に言うと、UIは「見た目」を担当します。それはシステムとユーザーがどのように「見える」かに注目し、それがどのようにレイアウトされているか、どのように見えるか、どのように感じるかを決定します。

## 2. UXとは？

一方、UXとは「ユーザーエクスペリエンス（User Experience）」の略です。
これはユーザーが製品やサービスを通じて得られる経験全体を指します。
ユーザーが製品をどのように感じ、どのように使いこなすかに焦点を当てています。

例えば、ウェブサイトを利用するときに、ユーザーが情報を探しやすいか、問い合わせフォームが簡単に見つけられるかなど、その「経験」全体がUXに含まれます。

## 3. UIとUXの関係

UIとUXは相互に関連していますが、それぞれが異なる目的を持っています。UIは製品の「見た目」を、UXはユーザーの「経験」を設計する役割を持っています。しかし、両者は密接に連携して、ユーザーが製品やサービスをどのように使用するかを最適化する必要があります。

## 4. UIとUXを「レストラン」で例えると

### UI

UI（ユーザーインターフェース）はレストランの内装やメニューのデザイン、テーブルの配置、さらには食事がどのように盛り付けられているかを考えるとわかりやすいでしょう。
これら全ては、レストランがどのように見えるか、どのように感じるかを決定します。これがUIの役割です。

### UX

一方で、UX（ユーザーエクスペリエンス）は、レストランでの全体的な体験を指します。
ウェイターの対応はどうか、料理は美味しいか、注文から料理が出てくるまでの待ち時間は適切か、またその料理の価格は適正か。これら全てがユーザーエクスペリエンス、つまりUXとなります。

## 5. UIとUXを「車」で例えると

### UI

UIは車のデザイン、ダッシュボードのレイアウト、シートの素材や色、ハンドルの形状などです。これらは車を運転する際の直接的なインターフェースを形成します。

### UX

UXは車を運転する全体の経験をカバーします。運転のしやすさ、乗り心地の良さ、燃費の良さ、安全性、さらにはナビゲーションシステムの使いやすさなど、全てがUXに関連します。


## 5. まとめ

UIとUXはエンジニアがデジタル製品を設計、開発する際に考慮しなければならない重要な要素です。

UIは「見た目」を、UXはユーザーの「経験」を担当しています。一方で、これら二つは相互に影響を与えるため、バランス良く設計することが必要です。

エンジニアとして、これらの違いを理解し、それぞれの重要性を理解しておくことはサービスの成功にとって重要な要素となります！
背景画像について

今日はprogeteをやって出てきたCSSについての備忘録として記事を書いていこうと思います。

## 背景画像を指定する
CSSで背景画像を設定するには　　
**background-image**を使用する。

```stylesheet.css
div {
    background-image: url(top.png);
}
```
これで背景画像の挿入はできました。

## 背景画像の大きさを指定する
**background-image**で指定された背景画像は表示範囲を埋め尽くすまで繰り返し表示される性質があります。

そこで、、、
**background-size: cover;**
を指定してあげると1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小してくれます。

```stylesheet.css
div {
    heigth: 200px
    background-image: url(top.png);
    background-size: cover;
}
```

これで画像の配置は完了しました。


今回はここまで！
ありがとうございました。
LaravelでTailwind CSSをインストールして使う方法を調べてみた*確認問題つき

## 概要
この記事では、LaravelプロジェクトにTailwind CSSをインストールし、使う方法について解説します。Tailwind CSSは、高度なフロントエンドデザインを実現するための効果的なCSSフレームワークです。
私は実際のプロジェクトでは使用したことがないのですが、予備知識として調べたものを、ここに記録として残すことにいたします。

:::note info
さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！
:::
https://mondai-diy.com/play_question/251/WKYLsplt3qB6CEWvb7anlOjAaPSjkIo7HJRzGvHL

## 前提条件
- Laravelプロジェクトがセットアップ済みであること
- Node.jsとnpmがインストールされていること


## ステップ1: Tailwind CSSのインストール
まず、Laravelプロジェクトのルートディレクトリに移動し、以下のコマンドを実行してTailwind CSSをインストールします。

```shell
npm install tailwindcss
```


## ステップ2: Laravel Mixの設定
Laravel Mixを使用してTailwind CSSをビルドするために、webpack.mix.jsファイルを編集します。以下のコードを追加してください。

```javascript:webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        tailwindcss('./tailwind.config.js'),
    ]);
```


## ステップ3: Tailwind CSSの設定ファイル作成
次に、Tailwind CSSの設定ファイルを作成します。ルートディレクトリにtailwind.config.jsファイルを作成し、以下の内容をコピーします。

```shell:tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

##  ステップ4: CSSのビルド
最後に、CSSをビルドするために以下のコマンドを実行します。

```shell
npm run dev
```
これにより、resources/css/app.cssファイルがpublic/cssディレクトリにコンパイルされます。


##  使い方
Tailwind CSSは、ビューのHTML要素にクラスを追加することでスタイルを適用します。例えば、以下のようにボタンにクラスを追加してスタイルを適用できます。

```html
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  ボタン
</button>
```
クラスの詳細な情報やスタイルのカスタマイズ方法については、公式ドキュメントを参照してください。
[Tailwind CSS公式ドキュメント](https://tailwindcss.com/docs/installation "Tailwind CSS公式ドキュメント")


## まとめ
Tailwind CSSのインストールからLaravel Mixの設定、設定ファイルの作成、そしてCSSのビルドまでの手順を順番に説明し、使い方についても少し触れました。

Tailwind CSSを使えば、HTML要素に適用するクラスを追加することで、簡単にスタイルを適用することができます。

LaravelとTailwind CSSの組み合わせは、効率的なフロントエンド開発を可能にし、美しいデザインを実現するための強力なツールです。ぜひこの組み合わせを活用し、魅力的なWebアプリケーションを開発してください。

## さいごに
:::note info
簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！
:::
https://mondai-diy.com/play_question/251/WKYLsplt3qB6CEWvb7anlOjAaPSjkIo7HJRzGvHL
未経験エンジニア志望のエラー日記

初めて、記事を書きます。
今、未経験からエンジニアを目指しているものです。

「エラーの発生は成長のチャンス」ということを信じて、未来の自分がまた見た時に思い出せるよう、またみなさまに少しでもプラスになるような記事を書いていきたいと思っております。

拙い文章や内容ですが、お読みいただければとても嬉しいです！
よろしくお願いいたします。


## **Rails入門【ブログ機能の作成（new,form_with）】**


期待表示結果
![スクリーンショット 2023-05-24 17.40.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3354671/c3541b99-3588-c4e5-f425-ee6839f9869d.png)




を実行しようとしたら


Routingエラー発生
![スクリーンショット 2023-05-24 17.38.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3354671/3f6d066b-18b5-f147-0785-7f6d522a1062.png)





理由

config/routes.rb

```ruby
Rails.application.routes.draw do
  get '/blogs', to: 'blogs#index'
  get '/stocks', to: 'stocks#index'
  
end
```

に

```ruby
get '/blogs/new', to: 'blogs#new'
```

がないことが判明！

まず、config/routes.rbに来るはず？

なので、

```ruby
Rails.application.routes.draw do
  get '/blogs', to: 'blogs#index'
  get '/stocks', to: 'stocks#index'
  get '/blogs/new', to: 'blogs#new'.  #追記
end
```

したら、ターミナルで「rails s」コマンドでサーバーを立ち上げて、



成功！






![スクリーンショット 2023-05-24 17.54.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3354671/3f2f493b-3a67-896c-ab88-82f9770f7712.png)


次回：左上の797.9ms ✖️4はどうやったら消えるのか🤔（まだわかってない）
Web技術の理解に必要不可欠な用語をまとめてみた

## はじめに
今回はWeb技術を構成する用語の中で特に重要な用語を自分なりの言葉でまとめさせていただきました。
かなり短くまとめておりますので、お暇なときにでも読んでいただけると嬉しいです。

## プロトコル
* プロトコルはネットワークで通信を行うためのにあらかじめ決めておく手順や約束事、規約などを意味する
* お互いに同じプロトコルを利用することによって、データのやり取りを可能にしている。様々な種類のパソコンやスマートフォン、サーバーなどがお互いに接続を行うことができるのは、TCP/IPという共通のプロトコルを利用しているからである

## リクエスト
* リクエストは、クライアント（ブラウザ）がサーバー（Webサーバー）に対して行う要求や操作のことを指す
* クライアントは、特定のアクションを実行するためにサーバーに対してリクエストを送信する。リクエストには、要求するアクションの種類や目的に応じた情報が含まれる
* リクエストは主に「**メソッド（HTTPメソッド）**」「**ヘッダー**」「**ボディ**」の３つの要素で構成されています
  * メソッド（HTTPメソッド）
    * リクエストの目的やアクションのタイプを示す
    * 代表的なHTTPメソッドには、GET（データの取得）、POST（データの送信）、PUT（データの更新）、DELETE（データの削除）などがある
  * ヘッダー
    * リクエストに関する追加のメタ情報が含まれる。例えば、クライアントの情報や要求されるデータの形式などが含まれる場合がある
  * ボディ
    * 一部のリクエストは、データをボディに含めて送信する必要がある。例えば、フォームデータやJSON形式のデータなどがボディに含まれることがある

## レスポンス
* レスポンスは、サーバー（Webサーバー）からクライアント（ブラウザ）に返されるデータのことを指す
* サーバーは、クライアントから送られたリクエストを受け取り、適切な処理を行った後、レスポンスを生成して返す
* レスポンスは主に「**ステータスコード**」「**ヘッダー**」「**ボディ**」の３つの要素で構成されている
  * ステータスコード
    * サーバーの処理結果を示す3桁の数字。
    * 代表的なステータスコードには、200（成功）、404（ページが見つからない）、500（内部サーバーエラー）などがある
    * ステータスコードによって、リクエストの処理結果が成功したかどうかや、発生したエラーの種類を示すことができる
  * ヘッダー
    * レスポンスに関する追加のメタ情報が含まれる
    * レスポンスのデータ形式や文字エンコーディング、サーバーの情報なども含まれる
  * ボディ
    * レスポンスの主要なデータが含まれる
    * ボディは、クライアントが要求したアクションに応じて異なる形式で構成されることがある
    * HTML文書、JSONデータ、画像ファイルなどがレスポンスのボディとして含まれることがある

## ポート番号
* ポート番号は、ネットワークにおいて機器同士が通信を行うためにあらかじめ決めている使用する識別番号
* 0から65535までの数字で、範囲によって用途が決められている

|  ポート番号の範囲  |  名称  |  使用者  |
| ---- | ---- | ---- |
|  0~1023  |  ウェルノウンポート  |  特定のサービスで予約  |
|  1024~49151  |  登録済みポート  |  メーカー独自のサービスで使用  |
|  49152~65535  |  動的／プライベートポート  |  クライアント側で自由に使用  |
* ポート番号は、通信のためにクライアントとサーバーの間で約束された方法
  * クライアントは特定のポート番号を指定してサーバーに接続し、サーバーは対応するポート番号を使用してクライアントとの通信を待機する
  * ポート番号を指定することにより、正しいアプリケーションやサービスとの通信を確立し、データの送受信が可能になる

**代表的なウェルノウンポートの例**

|  ポート番号  |  プロトコル  |  用途  |
| ---- | ---- | ---- |
|  22  |  SSH  |  セキュアな通信  |
|  23  |  Telnet  |  リモート操作  |
|  53  |  DNS  |  名前解決  |
|  80  |  HTTP  |  	Webサーバとの通信  |

## ステートレス
* ステートレスとは、システムや通信プロトコルが状態（ステート）を保持せず、各リクエストやレスポンスが独立して処理されることを指す
* HTTPプロトコルはステートレス
  * そのため、リクエストとレスポンスのそれぞれのやり取りが１回ごとに完結しており、複数の処理を関連される仕組みがない
* メリットは以前のセッション状態を保持・反映しないという構造ゆえに各機器の負荷が少なくなる点
* デメリットは状態を保存できないこと


## ステートフル
* ステートフルは、ステートレスとは逆で「状態（ステート）を保持する」ことができ、次の処理に反映させることができる仕組み
* オンラインショップのショッピングカート機能はステートフルなシステムの典型例
  * オンラインショップでは、商品名を検索したり、商品を注文するのに利用するが、その際に商品を一つ一つ決済するのは不便なため、オンラインショップではショッピングカート機能を保持し、他の商品とまとめて注文できる仕組みが一般的
  * ショッピングカートの例のように、ユーザーが操作した情報を保存しておいて、後でその情報をそのまま活用できる状態にしておくのがステートフルなシステム
* メリットは以前の操作を保持・反映できる点
* デメリットはデータを保持する必要があるため、多くの人が使用するようなシステムでは各機器の負荷が高くなる点

## Cookie
* Cookieは、クライアント側に状態を保持する仕組み
* HTTPプロトコルはステートレスな通信のため、クライアントとサーバーの一連のやり取りの中で状態を保持し、管理する仕組みがない
  * ショッピングサイトなどではCookieと呼ばれる仕組みを利用して、状態を保持し管理している

### Cookieの仕組み
1. クライアントとサーバーの最初のやり取りの後に、サーバー側がクライアント側にCookieとして保存してもらいたい情報を送る
2. 2回目のサーバーへの接続の際に保存しておいたCookieを送信することで、サーバーは接続してきた相手を識別できるという仕組み

## まとめ
今回はWeb技術を理解する上で避けては通れない重要な用語を解説させていただきました。
どの用語もなんとなく理解はしているもののいざまとめようと思うと意外と難しかったので、自分の頭を整理する上でもかなり勉強になりました。
こちらの記事が読んでくださった方のWeb技術への理解の助けとなれば幸いです。
デプロイってなに

## デプロイ:Deploy
:::note
ソフトウェアやアプリケーションを実際の環境で実行可能な形式に変換し、それを展開・配置すること
:::
→開発されたソフトウェアやアプリケーションを本番環境や目的の実行環境に配置し、動作させるプロセス

## デプロイのプロセス

- ビルド: ソースコードをコンパイルし、実行可能な形式に変換
この段階では、依存関係の解決やリソースのパッケージングが行われる

- 構成の設定: ソフトウェアやアプリケーションの動作に必要な設定や環境変数などを構成
☆データベースの接続情報や外部サービスの設定などが含まれる場合がある

- テスト: デプロイ前に、機能やパフォーマンスのテストを実施
デプロイ後に問題が発生する可能性を最小限に抑えれる

- デプロイ: 実行可能なファイルやアーカイブを本番環境や実行環境に配置
サーバーへのファイルのアップロード、コンテナイメージのデプロイ、クラウド上のリソースのセットアップなどが含まれる

- 検証と運用: デプロイ後、動作の検証やモニタリングを行い、必要に応じて問題のトラブルシューティングや修正をする
セキュリティの管理や定期的なメンテナンスなども運用の一環として重要

##### デプロイは、ソフトウェアやアプリケーションの変更やアップデートを反映させるために重要なプロセス
DevOps Centerd： 権限セットの問題


+ [DevOps Center ファイルの結合](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007T5qHVSAZ)

1. 権限セットに変更を加えていますが、DevOps センターが権限セットの完全な削除を検出しています。理由はわかりません。これを回避するには、削除を続行し、クローンを使用してシステムを更新します。

2. クローンされた権限セットには、異なるラベルと API 名が付いています。

3. 作業項目を準備し、変更リクエストを確認するとき。 Git では、2 つのファイルではなく 1 つのファイルのデプロイメントが表示されます。


これは難しい問題です。 GitHub は、内容が同じである一連のファイルの削除と追加を認識すると、これを自動的にファイルの移動とみなします (そのため、2 つのファイルではなく 1 つのファイルが変更されたとみなされるのです)。これは一貫性がなく、残念ながら DevOps Center の制御能力の範囲外です。さらに、特定のファイルの削除と追加が検出された場合、DevOps センターはそれらを具体的に認識できる必要があるため、ファイルをそのようにマークします。これにより、一方 (GH) がファイルを移動または名前変更したと主張するのに、DevOps センターが古いファイルを削除して新しい (クローン) ファイルを作成したと主張するなど、2 つのシステム間に矛盾が生じる可能性があります。このため、Git でのファイルの移動や名前変更は常に頭の痛い作業です。実際に変更されている内容で混乱が生じやすくなるため、これらの操作を伴う作業はすべて単独で行うようにするのが最善です。そうは言っても、PermissionSet は、パーミッション セットを取得するときに関連するメタデータを使用して変更を取得する必要がある、基礎となるメタデータ API の問題により、同じ依存関係作成の問題に遭遇することがあります。たとえば、一部の Account.Field を読み取り専用に変更し、それに一致するように PermissionSet PS1 を更新します。 PermissionSet がソース形式で正確に表現されるようにするには、アカウントとフィールド自体を手動でコミットに追加する必要があります。 

+ [DevOps Center は CHANGE を REMOVE として検出します](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007T5iCx)

単一フィールドへの編集アクセスを更新した権限セットがあります。理由が何であれ、DevOps Center はこれを権限セットの削除ではなく変更として検出するため、デプロイできません。

別の組織でも同様のことが起こっているのを見たことがあります。これを修正できた唯一の方法は、基本的に権限セットを複製し、新しい名前を使用することでした。 (または、権限セットを削除してから再度追加することもできます) しかし、それはあまりにも大胆すぎるように思えます。


これについては他の回答で多少触れました。 ただし、PermissionSet には、依存関係とメタデータへの変更の検出方法に関して、いくつかの型破りな動作があります。簡単に言えば、これは、DevOps Center が存在する前に行われた意図的な設計選択の結果として、意図せずに生じた結果であるということです。基本的に、権限オブジェクト (プロファイルと権限セット) が組織から取得されると、多くの場合「最適化」されます。関心のあるオブジェクトに関する関連情報のみを取得します。したがって、システム権限を変更すると、すべての権限スタイルのオブジェクトに常に関連するため、これが検出されます。カスタム オブジェクトを作成して権限セットに追加すると、これもデフォルトで検出されるはずです。その後、権限セットに影響を与えるカスタム オブジェクトに変更を加えると、これが「最適化」される場合があります。変更をプルすると、実際にパーミッションも変更された場合にのみ、カスタム オブジェクトが変更されたものとして表示されます。プロファイルが街にある唯一のゲームで、PermissionSet が存在しなかったときは、プロファイルが非常に大きく、メタデータ API を使用してこのようにすべてのプロファイルを取得するのはコストが高かったため、これは合理的でした。 PermissionSet は、プロファイルの変更に対してすべての依存関係を取得する必要性を回避するために導入され、より重点を置くようになりました。ただし問題の根本は依然として残っており、メタデータ API レベルでの対処が依然として必要です。
6月開催のカンファレンス6選

## Interop Tokyo Conference 2023
開催日時：2023/06/14(水)～2023/06/16(金)
開催場所：[幕張メッセ](https://www.interop.jp/2023/access/)

Interopが掲げる「次の30年の社会」は、すべての産業、すべての国、すべてのモノ、すべてのヒトが、つながる(Connected)社会であり、「オンライン」が前提の社会です。
皆様には、この機会を最大限に活用していただき、最先端のオンラインファーストなデジタルエコノミーへの覚醒と進化を牽引する最新の技術・ビジネスの動向と現状を把握し、ますます加速するインターネット遺伝子による社会・産業革命を生き抜くために必要な、知見を獲得する機会としてご利用ください。

https://f2ff.jp/conf/2023/06

---
## PHPカンファレンス福岡2023
開催日時：2023/06/24(土) 14:00～18:00
開催場所：[福岡ファッションビル](http://www.ffb.jp/access/)

4年ぶりにPHPカンファレンス福岡が遂に帰ってきます！
福岡をはじめ九州地方のIT業界を盛り上げたい、九州のPHPerと全国のPHPerが交流できる場を提供したい、もっと福岡のPHPに力を入れている会社を知って欲しい、そんな想いで2023年、PHPカンファレンス福岡を開催します！

コロナウイルスの影響で永らく開催出来ていませんでしたが、だからこそ今回多くの方々に参加していただき、PHPカンファレンス福岡を成功させたいと思っています。

PHPカンファレンス福岡への参加を通じて、互いに刺激を受け合い、新たなアイデアや参加者の繋がりが生まれることを期待しています。

一緒に楽しみ、学び、そして繋がるPHPカンファレンス福岡を盛り上げましょう！

https://phpcon.fukuoka.jp/2023/

---
## Go Conference 2023 Online
開催日時：2023/06/02 10:00～20:00
開催場所：オンライン

Go Conference は年に1回行われるプログラミング言語 Go に関するカンファレンスです。

カンファレンスは YouTube で配信されますが、参加者は reBako というバーチャル空間で集まって配信を楽しむことができます。ぜひみなさんで集まってカンファレンスの臨場感を楽しみましょう！

reBako では YouTube 配信だけではなく、スポンサー様や Go コミュニティのブースがたくさん企画されます。お楽しみに！！

https://gocon.connpass.com/event/248757/

---

## JJUG CCC 2023 Spring
開催日時：2023/06/04(日) 09:30 ～ 19:00
開催場所：野村コンファレンスプラザ新宿

JJUG CCCは、例年2回、春と秋に開催する日本最大のJavaコミュニティイベントです。
Java関連の技術や事例に関する良質なセッションが行われ、また異なる分野で活躍するJava技術者が一堂に会する場ともなっています。
ぜひ皆さまお誘いあわせの上でご参加ください！

https://eventregist.com/e/luIcqEmpqPI2

---
## DOORSカンファレンス2023
開催日時：2023/06/05(月)～2023/06/16(金) 09:30 ～ 19:00
開催場所：オンライン

データ活用の重要性は、周知の事実になりました。

けれど、DXに終わりはありません。
自己変革をつづけてこそ、変化の時代を駆け抜けられる。
「データ活用の自走化」いわゆる内製化への取り組みが、
いま、はじまっています。

意思を持ってデータを活用していく人の育成
組織としてデータを活用できるしくみづくり。

DXを真の意味で「根付かせる」ための方法を、
今回の DOORS では探索していきます。

調べても出てこない、
ここでしか聞けない現場の最新ナレッジを、
ぜひ DOORS で。

https://www.brainpad.co.jp/doors/conference23/

---
## Open Source Conference 2023 Hokkaido
開催日時：
* 講演：2023年6月17日(土) 10:00～18:00
* 展示：2023年6月24日(土) 10:00～16:00
開催場所：
* 講演：オンライン
* 展示：[札幌市産業振興センター](https://www.sapporosansin.jp/) 2F ルームA

オープンソースの祭典、Open Source Conference 2023が北海道で開催されます。
北海道では4年ぶりとなるオフラインの展示があります。

https://event.ospn.jp/osc2023-online-do/

https://event.ospn.jp/osc2023-do/
ChatGPTの入力欄に入力しても何も表示されないときの対処法

# 概要

ChatGPTの入力欄に文字を打っても、開業やコピペで枠が拡張してるのはわかるけど **何も表示されない**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/7ebda35d-09dd-637a-5a85-3b60a623fd6f.png)


文字は打ててるみたいだけど、何も変化なし。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/93087e44-b782-78e2-ac2b-2e51e73cc561.png)


送信してみると動いていることはわかる。


# 解決策

設定画面からテーマを **Light** から **Dark** に変える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/753f8b31-3549-c132-2cd2-1feface124c3.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/1da265fe-217b-03dc-9192-426c438efdce.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/ae241be2-8427-b56f-f44f-73b50cbf4418.png)


# あとがき

他人事だなぁ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/be0bb23e-ae78-5943-95f4-022c2fd75661.png)
注文(Order)関係


# 削除

+ [How to delete the orders?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000Pez4p)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/8eab3a78-3b34-85fa-598f-0c7712f74198.png)

https://help.salesforce.com/s/articleView?id=sf.order_edit.htm&type=5
Salesforceアンケートの回答についてのまとめ


# 回答はそのままでは関連リストには表示されないみたいです

+ [質問:Survey Responses not showing in the related list](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000QLfCG)

:::note
Survey response records must be associated to contact, leads or person accounts by creating a junction SurveySubject record.

It's not possible to create Survey Subject records via the user interface. SurveySubject records need to be created either programmatically via Apex or inserted via the API using a client tool such as Data Loader to associate survey response records to leads, contacts, or person accounts and add them to the record's Survey Invitations and Responses related list.

For sample code see Example Implementation to Associate SurveySubjects with SurveyInvitation and SurveyResponse. 

https://help.salesforce.com/s/articleView?id=000393436&type=1

SurveyInvitation レコードは、アンケート招待メールの送信元のレコードに自動的に関連付けられますが、取引先責任者、リード、または個人取引先に関連付けられる SurveyResponse レコードには、そのような自動化は存在しません。

SurveyResponse レコードを取引先責任者、リード、または個人取引先に関連付けるには、連結 SurveySubject レコードを作成する必要があります。

ユーザインターフェースから SurveySubject レコードを作成することはできません。SurveyResponse レコードをリード、取引先責任者、または個人取引先に関連付けて、レコードの [アンケートの招待と回答] 関連リストに追加するには、SurveySubject レコードを Apex プログラムで作成するか、データローダなどのクライアントツールと API を使用して挿入する必要があります。
:::

# アンケートの翻訳

+ [質問:Surveys - supported languages - not standard](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000QLfZoSAL)

 + [アンケートの翻訳
](https://help.salesforce.com/s/articleView?id=sf.task_translate_surveys.htm&type=5)
Laravelでのテストについてまとめてみた②（応用編）　*確認問題つき

## はじめに
前回の記事では、Laravelでのテストの基本的な概念とPHPUnitを使用したテストの書き方について紹介しました。今回は、さらに応用的なテストテクニックとベストプラクティスについて探っていきます。これらのテクニックを活用することで、より効果的なテストの実施と品質保証が可能になります。

:::note info
さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！
:::

https://mondai-diy.com/play_question/250/k1z2K4tRQXEj82ASCQM9YYGFoHY2OjPHz3RgQWfW


## テストデータの準備(UserFactory)
テストは、現実的なデータや状況を想定して実行することが重要です。そのためには、テストデータの準備が欠かせません。Laravelでは、ファクトリやシーダーを使ってテストデータを簡単に生成することができます。これにより、実際の環境に近いデータを使用してテストを行うことができます。ここではUserモデルの　ファクトリ``　Userファクトリ `` を例に説明していきます。


```php:UserFactory.php
// ユーザーファクトリの例
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;

class UserFactory extends Factory
{
    protected $model = User::class;

    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'email' => $this->faker->unique()->safeEmail,
            'password' => bcrypt('password'),
            // その他の属性
        ];
    }
}

// テストの中でファクトリを使用してユーザーを作成する例
public function testExample()
{
    $user = User::factory()->create();

    // テストコード
}
```


## モックとスタブ
テストでは、アプリケーションの一部の依存関係をモックやスタブに置き換えることで、テストの速度や信頼性を向上させることができます。モックやスタブを使用することで、外部のリソースやAPI呼び出し、データベース操作などをシミュレートすることができます。

```php:
// モックの例
public function testExample()
{
    $mock = Mockery::mock(SomeClass::class);
    $mock->shouldReceive('methodName')->once()->andReturn('mocked result');

    // モックを注入してテストするコード
}

// スタブの例
public function testExample()
{
    $stub = Stub::make(SomeClass::class, ['methodName' => 'stubbed result']);

    // スタブを注入してテストするコード
}
```



## テストの自動化と継続的インテグレーション
テストの自動化と継続的インテグレーション（CI）の導入は、品質保証のために非常に重要です。Laravelでは、以下のツールやサービスを使用してテストの自動化とCIの設定を行うことができます。

#### Laravel Dusk
Laravel Duskは、ブラウザベースのテストを自動化するためのツールです。ブラウザ上でのユーザーの操作や画面遷移をシミュレートし、統合テストを行うことができます。Duskを使用することで、JavaScriptのテストやUIの確認なども自動化することができます。

#### Laravel Forge
Laravel Forgeは、Laravelアプリケーションのデプロイやサーバー管理を簡単に行うためのサービスです。Forgeを使用することで、継続的インテグレーション（CI）ツールとの連携やデプロイパイプラインの設定が容易になります。

#### GitHub Actions
GitHub Actionsは、GitHub上での継続的インテグレーションとデプロイメントを行うためのツールです。LaravelプロジェクトをGitHubにホスティングしている場合、GitHub Actionsを使用してテストの自動化やデプロイパイプラインを構築することができます。


#### 
これらのツールやサービスを組み合わせることで、テストの自動化と継続的インテグレーションを実現することができます。コードの変更があった場合に自動的にテストを実行し、品質の維持と早期バグの発見を促進することができます。



## まとめ
Laravelでのテストについての応用テクニックと継続的インテグレーションの導入方法について紹介しました。テストデータの準備やモック、スタブの活用、さらにテストの自動化とCIの導入について学びました。

これらのテクニックを適用することで、より効果的なテストを実施し、アプリケーションの品質を向上させることができます。また、継続的な品質保証と素早いバグ修正を実現するために、テストの自動化とCIの導入を検討してみてください。


## さいごに
:::note info
簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！
:::
https://mondai-diy.com/play_question/250/k1z2K4tRQXEj82ASCQM9YYGFoHY2OjPHz3RgQWfW
Laravelでのテストについてまとめてみた①（ユニットテストと統合テスト）　*確認問題つき

## はじめに
開発中のプロジェクトでテストをすることは、品質保証とバグの早期発見において重要な役割を果たします。本記事では、Laravelフレームワークにおけるテストの基本的な概念と、PHPUnitを使用したテストの書き方についてまとめてみました。

:::note info
さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！
:::
https://mondai-diy.com/play_question/249/YD5vGOy6fraT3S2d4aObOB7cnaU0Ez7YUuUFOdD5


## Laravelでのテストの基本
Laravelでは、テストを書くためのアサーションや便利なテストヘルパーが豊富に提供されています。以下に、Laravelでのテストの基本的なパターンをいくつか紹介します。

## ユニットテスト
ユニットテストでは、アプリケーションの個々のコンポーネント（モデルやサービスなど）を単体でテストします。このようなテストは、コードの一部を独立してテストするため、バグの発見や修正が容易になります。

```php:ExampleTest.php
use PHPUnit\Framework\TestCase;

class ExampleTest extends TestCase
{
    public function testExample()
    {
        $result = // テストするコード

        $this->assertEquals(期待する結果, $result);
    }
}
```


## 統合テスト
統合テストでは、アプリケーションの複数のコンポーネントが連携して動作するかをテストします。`` データベース ``や`` HTTPリクエスト ``など、実際の環境に近い条件でテストを実行することができます。

```php:ExampleTest.php
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class ExampleTest extends TestCase
{
    use RefreshDatabase;

    public function testExample()
    {
        // テストデータの作成やリクエストの送信など

        $response = $this->get('/example');

        $response->assertStatus(200);
    }
}
```

## まとめ
Laravelにおけるテストは、アプリケーションの品質保証やバグの早期発見に不可欠な要素です。本記事では、Laravelフレームワークでのテストについて基本的な概念と具体的なテストの書き方を紹介しました。

テストは開発中のプロジェクトにおいて、安定性と信頼性を確保するために必要不可欠です。Laravelの豊富なテスト機能を活用することで、アプリケーションの各部分を網羅的にテストし、予期しないバグやエラーを早期に発見することができます。

## さいごに
:::note info
簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！
:::
https://mondai-diy.com/play_question/249/YD5vGOy6fraT3S2d4aObOB7cnaU0Ez7YUuUFOdD5
Microsoft認定資格の受験の流れとそれぞれの受験場所のメリット・デメリット

# 目次
[1.はじめに](#1-はじめに)
[2.受験の流れ](#2-受験の流れ)
[3.メリットとデメリット](#3-メリットとデメリット)
[4.結論](#4-結論)

# 1. はじめに
Microsoft認定資格を受験する際に悩む要素の１つとして受験場所があると思います。
現在では、テストセンターか自宅のどちらかを選択することが出来ます。
私は入念に調べるタイプなので、どちらで受験するか迷いました。
そのため、今回はそれぞれの受験場所における受験の流れと受験場所によるメリット・デメリットを書いていこうと思います。
結論から申し上げますと私はテストセンターで受験しました。自宅での受験の流れは調べたことを記事にまとめますので、情報が誤っていたら申し訳ございません。

# 2. 受験の流れ
## テストセンターの場合
テストセンターで受験する際の流れは解説動画がありますので、リンクを貼り付けておきます。
[テストセンターの受験の流れ](https://www.pearsonvue.co.jp/Test-takers/security.aspx)
1. 受付を行い、同意書にサインをする。
(本人確認書類が必要になります。。免許書やパスポートを持参してください)
2. 写真撮影。こちらはスコアレポートに載せるための写真となります。
3. ロッカーに本人確認書類以外の持参物を全て預ける。(時計も預けます。)
4. 簡単なチェック(ポケットが空かどうかのチェック)を受けて、席へ案内される。
5. 試験を開始する。
6. 試験が終了すると、受付に行き、スコアレポートを受け取る。受け取りのサインをして終了。

このような流れになります。基本的に受付の人が全て案内してくれるため、試験会場に行けばあとは指示の通りに従えば問題ありません。

## 自宅の場合
自宅で受験する際の流れはこちらのサイトを参考にしました。
[AZ-900を自宅受験した話と注意点](https://nikunimame.com/az-900_exam_flow/)
1. 前日までにシステムテストを実行する。(使うパソコンが試験の要件を満たすかチェックするテストです)
2. 受験用アプリ(onVUE)を立ち上げる。
3. 顔写真、本人確認書類、自身の部屋の写真(部屋の角から計4枚)を撮影します。
4. 試験を開始する。
5. 試験が終了すると、結果を確認し、アプリを終了する。

こちらも試験官がチャットで案内してくれるため、指示の通りに進めてください。

# 3. メリットとデメリット
## テストセンターのメリット・デメリット
### メリット
* 試験を受験する環境を全て用意してくれる
－当然ですが、環境はこちらで準備する必要がなく、座席に座れば後は試験を受けるだけになります。
* 試験中にトラブルが発生しても受付の人を呼べばよい
－トラブルは特にありませんでしたが、私が受けた会場はスタッフを呼ぶボタンが座席にあったので、
　困ったことがあったら、スタッフを呼べば解決できます。
* 緊張感を持てる
－いつもと違う環境で受けるので、試験会場に行くまでの時間や到着してからの手続きなどを
　行ううちに、徐々に緊張感が出てきます。

### デメリット
* 会場まで行く手間がかかる
－試験会場が近ければさほどデメリットではありませんが、遠くにあると億劫になりそうですね。
* 本人確認書類を忘れる可能性がある
－本人確認書類を忘れたら試験を受けることが出来ません。一度家に帰っても間に合えば
　問題ありませんが、そうでなければ0次試験不合格になり、その時点で試験終了です。
* 希望の日時に試験が出来るとは限らない
－基本的に空いている時間から選択することになりますので、必ずしも自分が受けたい時間に
　受けれるとは限りません。私は試験前日に予約しましたが、枠は朝10時からしかありませんでした。
　（試験受験も会社の業務に含まれるため、問題はありませんでしたが）

## 自宅のメリット・デメリット
### メリット
* 移動時間がない
－自宅で受けるので当然ですが、会場まで徒歩0秒です。
　雪が降ろうが、雷が落ちようが何も問題はありません。
* 忘れ物をしない
－本人確認書類は自宅に何かしらあるはずなので、すぐに手元に用意できます。
* 使い慣れた道具を使用できる
－試験環境は自分で用意するため、パソコンやマウスなどは普段が自分が使用しているものを使えます。
　操作が分からないといったトラブルは少なそうです。

### デメリット
* 試験環境を自分で用意する必要がある
－これが最大のデメリットであると思いました。ざっと調べただけでもこれくらいあります。
　1.受験中はマイク、カメラオンのため、マイク、カメラがないデスクトップPCの場合、
　　購入する必要あり。
　2.試験中は一切部屋に人を入れないこと。家族がいる方は事前に、部屋に入らないことと
　　静かにしておくことを説明する必要があります。しかし、小さいお子さんが無意識に入ってくる
　　可能性もありますので、鍵がない部屋は特に注意が必要です。
　3.デスク周りは試験に必要なもののみにする。基本的に机には試験に必要なものだけになります。
　　キーボード、マウス、パソコン、マイク、カメラあたりでしょうか。
　4.部屋から文字を消す必要がある。段ボールは見えないところに持っていく、
　　本棚は目隠しするようにといった指示もあるようです。
* トラブル対処もすべて自分でする必要がある
－試験中に受験アプリにトラブルが起きた場合も、人はいないので自分で解決する必要があります。
* 自分の部屋を見られる
－試験中はカメラオンのため、相手から自分の部屋を見られます。赤の他人に自分の部屋を見られても
　構わない方はデメリットにはなりませんが。

# 4. 結論
それぞれの受験の流れとメリット・デメリットも述べたので最後にどちらで受けたほうがよいか
を述べて終わろうと思います。
__結論、なるべくテストセンターで受けたほうがよいと思いました。__
理由としては
* 試験環境の用意がめんどくさい
－私の場合、1と2はすぐにクリアできますが、3と4について準備する必要があり、億劫になりました。
* トラブルが発生しやすい
－自身のPCを使用するため、テストセンターの場合よりトラブルも発生しやすくなります。
　また、解決するのも自力になるため、最悪、試験環境の不備で不合格なんてこともありえます。

一方で自宅受験を選択した方が良い方もいると思います。主には以下の通りです。
* 受験会場まで遠い方
－田舎に住んでいる方は試験会場も少なく片道1,2時間なんてこともありえます。
　この時間が苦にならない方なら問題ないですが、大半の人は苦になると思います。
* 受験時期が冬で、雪がよく降る地域にお住いの方
－北海道・東北・北陸地域や山の方にお住まいの方は冬は雪が多く、交通機関に悩まされる可能性が
　高くなります。バスや電車が遅れたせいで受験会場に遅れ、0次試験不合格もあり得ます。
　そのため、雪に悩まされる可能性のある方は自宅受験をお勧めします。

あくまでもこれは個人の意見となります。置かれている状況は人それぞれになるため、ご自身の状況と照らし合わせてどちらで受験するかは考えていただくようお願い致します。
StorybookをGithub.ioにサブディレクトリを切って公開してMSWを導入したメモ

## 概要
[前回](https://qiita.com/hibohiboo/items/3537b832ff4e408aa6fd)はStorybookを公開した。
今回、MSWを使ってAPIの戻り値をモックしたものをStorybookで見せるストーリーを記述。
公開時にmockServiceWorker.jsが404になってしまう問題があったので対処した。

[追加したストーリー： my/profile をモック化](https://hibohiboo.github.io/RinneCircle/storybook-static/index.html?path=/story/components-layouts-basiclayout-header--logged-in)


[この時点のソース](https://github.com/hibohiboo/RinneCircle/blob/d74ad5b17e3f0dabd87ef94c700e1ec22a519d8b/packages/ui_components/.storybook/preview.ts)


## 環境
- @storybook/react: 7.0.17
- msw: 1.2.1


## ソースコード
githubにアップしたときのみ、MSWのオプションに`serviceWorker`のURLを設定してあげるのがポイント。([参考](https://github.com/mswjs/msw-storybook-addon/issues/77))

```diff:.storybook/preview.ts
import type { Preview } from "@storybook/react";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import { initialize, mswDecorator } from "msw-storybook-addon";
import { handleGetMyProfile } from "../src/services/client/MyProfile/__mock__/msw";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    viewport: {
      viewports: INITIAL_VIEWPORTS,
    },
    msw: { handlers: [handleGetMyProfile()] },
  },
};

export default preview;
export const decorators = [mswDecorator];
- const options = {};
+ const options =
+   location.hostname !== "hibohiboo.github.io"
+     ? {}
+     : {
+         serviceWorker: {
+           url: "/RinneCircle/storybook-static/mockServiceWorker.js",
+        },
+       };
initialize(options);
```
AndroidStudioをPleiadesで日本語化しようとしたら起動できなくなった（地獄みた）

結論修正方法（日本語化解除）

## studio.vmoptionsファイルを探す

    find / -name "studio.vmoptions" 2>/dev/null

## studio.vmoptionsを消す

これでandroid Studioが立ち上がるようになります

### 多分こんな感じでログが出る

    /System/Volumes/Data/Users/UserName/Library/Application Support/Google/AndroidStudio2022.2/studio.vmoptions

    /System/Volumes/Data/Applications/Android Studio.app/Contents/bin/studio.vmoptions

    /System/Volumes/Data/Volumes/Android Studio - Flamingo | 2022.2.1 Patch 2/Android Studio.app/Contents/bin/studio.vmoptions

    /Applications/Android Studio.app/Contents/bin/studio.vmoptions
    /Volumes/Android Studio - Flamingo | 2022.2.1 Patch 2/Android Studio.app/Contents/bin/studio.vmoptions

## こいつを削除

    /System/Volumes/Data/Users/UserName/Library/Application Support/Google/AndroidStudio2022.2/studio.vmoptions

うまくいけばそれだけで起動できると思います

## 問題発生

    /System/Volumes/Data/Users/UserName/Library/Application Support

ここまでは見つかるもこの下が見つからねえ、、、、、、

どこに行ったんだ？と思いつつひたすら探す

1時間後発見Finder更新しないで開きっぱだったからなのかなんなのかわからんのですが、なぜかパスは見つかるのに表示できねえという地獄のような時間を送りました

やっとの思いで見つかったものの記事の内容を色々試してもだめ

ChatGPTも頼りない

全然解決できず怒り狂ってもうええわクソが！！！！！と、思いつつ削除したら無事立ち上がりました

ここ最近で一番ヒヤヒヤした時間となりました

おしまい

日本語化なんてもうやめようって心の底から思った一日となりました
あたらしいプレイグランドを作る場合の回答例



+ ["Daily Dose of Salesforce CRM" Challenge completed but still receiving error message.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000QL46ESAT)

:::note
Please follow the below steps to create a new playground:

1. Login Trailhead
2. Click on your Profile Image from the Top-Right Corner on Trailhead Page
3. Select 'Hands-on Orgs' or go to https://trailhead.salesforce.com/users/profiles/orgs

Click Create Playground button to create a new playground and then click Launch button to open the org.
:::

公式のページを回答しているのに、嫌がらせの見本のような例だな

+ [How can I create a brand-new playground ?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000QLfEC)


+ [Module direction clarification needed](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007KFvA5)

1). I found that opening the "launch" can be done if you drag your cursor over the kebab menu.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/9a6df01f-8f41-2a9f-e406-49738d73934e.png)

2). Click on Create Playground.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/49c5104b-de78-c56e-3540-6967743ea1d1.png)
デイトラ「Web制作コース」　受講内容をアウトプット 25日目

学んだことをアウトプットしています。完全に自己満足ですので悪しからず。
以下の点を確実にアウトプット

1）受講内容
　　デイトラ「Web制作コース中級編」　ChatGPTのプログラミングへの活用方法
2）本日の学習内容
　　●ChatGPTを使ったプログラミング勉強方法
　　　・辞書として使用する
　　　　⇒一度学習したことを調べなおすのに有効。やりたいことをコードで覚える必要がない。
　　　　　そのプログラムでできることを自然言語で覚えておけば、あとはChatGPTに聞けば問題ない。
　　　　　命令文（プロンプト）はできる限り単純明瞭にすることがコツ。
　　　　　以下の情報があると良い
　　　　　・技術の種類（言語は？）
　　　　　・自分の知りたい具体的な技術（ex.flexbox,DOM,Array）
　　　　　・自分が何をしたいのか（ex.2列にしたい、bottomを取得したい、配列の合計値を求めたい）
　　　　　プロンプトにはこだわらなくてOK。間違った回答がきたら指摘すればOK。
　　　・タイポのチェックに使う
　　　　⇒プログラム学習のうちタイポ確認は学習の本質ではないので、それをChatGPTにやってもらう。
　　　　　おすすめのプロンプトは以下。
　　　　　　以下は【プログラミング言語】です。タイポや文法に誤りがないかチェックしてください。
　　　　　　【コード】
　　　　　※当てずっぽう（全部貼り付け）は非効率。ｴﾗｰが出ている場所や、変更した箇所など自分で
　　　　　　あたりをつけて貼り付けるのが原則
　　　・エラーメッセージの理解に使う
　　　　　⇒エラーメッセージに答えが書いてあるので有効に活用
　　　　　　おすすめプロンプトは以下
　　　　　　　以下は【プログラミング言語】のコードとそれを実行したときのエラーメッセージです。どういう意味か説明してください。
　　　　　　　【エラーメッセージ】
　　　・コードの解説に使う
　　　　　⇒コードを読んだけれど理解できないときに有効
　　　　　　※AIを利用しすぎるのはNG
　　　　　　おすすめのプロンプトは以下。
　　　　　　　以下は【プログラミング言語】です。コードの解説をしてください。
　　　　　　　　【コード】
　　　・記事の解説に使う
　　　　　⇒自分で調べものした際に一定の知識前提の解説記事などの解説に有効
　　　　　　疑問に思ったものをそのまま聞けばよいが、個別具体的なケースには
　　　　　　対応が苦手なので注意
画像を綺麗にできる　Stable DiffusionによるSuper Resolution

# Diffusionモデルによる画像強化

画像を綺麗に拡大できます。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/34f57a8f-d619-b8b8-9584-4a603bf68670.png width=400> <img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/7239b581-ead1-2f06-cf4b-7de2803805bd.png width=400>

# インストール

```shell
pip install diffusers transformers accelerate scipy safetensors
```

# 実行

```python
import requests
from PIL import Image
from io import BytesIO
from diffusers import StableDiffusionUpscalePipeline
import torch

# load model and scheduler
model_id = "stabilityai/stable-diffusion-x4-upscaler"
pipeline = StableDiffusionUpscalePipeline.from_pretrained(model_id, torch_dtype=torch.float16)
pipeline = pipeline.to("cuda")

low_res_img = Image.open("cat.png").convert("RGB")

prompt = "photo realistic,(RAW photo, best quality), (realistic, photo-realistic:1.7), best quality ,masterpiece, an extremely delicate and beautiful, extremely detailed ,cat"

upscaled_image = pipeline(prompt=prompt, image=low_res_img).images[0]
upscaled_image.save("upsampled_cat.png")
```

🐣
****
フリーランスエンジニアです。
AIについて色々記事を書いていますのでよかったらプロフィールを見てみてください。

もし以下のようなご要望をお持ちでしたらお気軽にご相談ください。
AIサービスを開発したい、ビジネスにAIを組み込んで効率化したい、AIを使ったスマホアプリを開発したい、
ARを使ったアプリケーションを作りたい、スマホアプリを作りたいけどどこに相談したらいいかわからない…

いずれも中間コストを省いたリーズナブルな価格でお請けできます。

お仕事のご相談はこちらまで
rockyshikoku@gmail.com

機械学習やAR技術を使ったアプリケーションを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)