OmniAICreator/Qiita-1.07M huggingface dataset:
Googleプロジェクト管理：リスクマネジメント

# はじめに

わたしが [Google プロジェクト管理:プロフェッショナル認定証で得られた素晴らしい体験][google]を、要点をまとめ小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ ***"Google プロジェクト管理:プロフェッショナル認定証"*** を受講してみてください。

[google]: https://qiita.com/mapami/items/317ae776a2268fd54c8f

https://jp.coursera.org/professional-certificates/google-project-management

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/7c79c997-e4e4-7d71-3686-e01b7badaa3c.png" width="800">

# リスクと課題

### リスク

リスクとは、発生する可能性があり、プロジェクトに影響を与える可能性がある事象のことです。

***<font color="MediumVioletRed">『絶対に起こる出来事ではないが、起こる可能性があるので、そのリスクを特定し、計画するのがプロジェクトマネージャーとしての責任である』</font>*** 

### 課題

課題とは、タスクを完了する能力に影響を与える可能性のある既知の、または現実の問題である。

### リスクと課題の違い

リスクとは、起こりうる可能性のある事象のことで、その事象が実際に起こった場合、そのリスクは課題になります。つまり、

- **リスク**
    - 大きな「もしも」の出来事
- **課題**
    - 現在プロジェクトに影響を及ぼしている事柄

# リスクマネジメントとは

リスクと課題がプロジェクトに脅威を与えることは明らかである。それらのリスクをどのように管理するかは、リスクマネジメントと呼ばれる。

***<font color="MediumVioletRed">『リスクマネジメントとは、プロジェクトに影響を与える可能性のある潜在的なリスクや課題を特定し、評価するプロセス』</font>***

- 一度だけ行うのではなく、潜在的なリスクに対処するために、定期的に行う必要があります。
- プロジェクトに何が起こり得るかを理解することで、計画プロセスの重要な部分を占めます。
- そのリスクについて誰に相談する必要があるかもわかります。
- その潜在的なリスクをどのように軽減できるかを判断するのにも役立ちます。
- 何か問題が発生したときに、すぐに実行できる計画を準備することができます。先を見越して計画を立てることの一部は、潜在的なリスクとその解決策を特定することです。そうすることで、プロジェクトが成功する可能性が高まります。

# リスクマネジメントを怠ると

リスクマネジメントを怠ると、プロジェクトにいくつかの大きな影響を与えることがあります。

プロジェクトの目標、タイムライン、成功基準を満たせないというリスクが発生する可能性があります。
- たとえば、調査報告書を出版することが目標なのに、担当のリサーチアナリストがプロジェクトの途中で辞めてしまった場合、バックアッププランを用意しておかなければ、期限に間に合わない可能性が高くなります。



リスクは、予測困難なさまざまな形でプロジェクトに影響を与える可能性があります。リスクマネジメントのプロセスは、予期せぬ出来事の影響を軽減し、プロジェクトに利益をもたらす活動にリソースを集中させるために役立ちます。

# リスクマネジメントのライフサイクル

リスクマネジメントは、プロジェクトのライフサイクルを通じて継続的に行われます。

通常、5つのステップのうち、いくつかのバリエーションが含まれます。

1. ***<font color="MediumBlue">リスクを特定する</font>***
    - チームと一緒に潜在的なプロジェクトリスクを特定し、定義します。結局のところ、リスクが何であるかを知らなければ、リスクを管理することはできないのです。
2. ***<font color="MediumBlue">リスクを分析する</font>***
    - リスクを特定した後、そのリスクの可能性とプロジェクトへの潜在的な影響を判断します。発生する可能性が高い重大なリスクは、最大の脅威となります。
3. ***<font color="MediumBlue">リスクを評価する</font>***
    - リスク分析の結果をもとに、どのリスクに優先順位をつけるかを決定します。
4. ***<font color="MediumBlue">リスクを処理する</font>***
    - 各リスクをどのように扱い、管理するかについて計画を立てます。小さなリスクは無視することもできるが、重大なリスクには詳細な軽減計画が必要です。
5. ***<font color="MediumBlue">リスクを監視し、コントロールする</font>***
    - リスクを監視、追跡し、必要があれば緩和するチームメンバーを割り当てます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/df497e4d-f542-a25d-3b7a-ac7ea5d2d8ed.png" width="550">

# リスクを特定する機会を作る

***<font color="MediumVioletRed">『機会を捉えるための計画も立てておくべき』</font>***

ブレーンストーミングやプロジェクトの歴史や過去の経験などを利用することで、潜在的な機会を特定し、それが発生した場合にどのように活用するかを概説することができます。

プロジェクトマネージャーとして、リスクマネジメント計画を作成する際には、常に潜在的な機会に注意を払う必要があります。プロジェクト中に起こりうる機会を特定し、それを活用するためのリスクマネジメント戦略の詳細については、[この記事](https://www.pmi.org/learning/library/effective-strategies-exploiting-opportunities-7947)をご覧ください。
【個人開発】会話AIを「ずんだもん風」に話せるように作ってみる

みなさんは「ずんだもん」というキャラクターをご存知でしょうか。ずんだもんはSSS合同会社が運営する東北地方応援キャラクターとして誕生したものでした。しかし音声合成ソフトVOICEVOXに導入されたことをきっかけにYoutubeなどの動画サイトでもよく見かけるようになり、それらにおける汎用キャラとしての役割の方が目立っています。

![名称未設定のデザインのコピー-4-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/9a2e859d-0a90-b730-9d66-f3b897e7cde9.jpeg)

> VOICEVOX公式サイトより　「呼び方」のページも参考になります


ずんだもんの特徴は何といっても「ボクはずんだもんなのだ」「元気なのだ」というような「〜なのだ」口調です。どんな内容でも話し方で共通の個性が出せることも普及した一つの要因だと言えるでしょう。また、これは文章においても同じです。

そこで今回はこの「〜なのだ」口調を導入した会話AIを作っていきたいと思います。


# 作り方なのだ

## 使うもの

[以前の記事](https://qiita.com/KokumaruGarasu/items/e209a0e3aacdde6adbf9)でも紹介した会話AI作成アプリ「Eveki」を使っていきます。これはiOS用のアプリです。


https://qiita.com/KokumaruGarasu/items/e209a0e3aacdde6adbf9

[![名称未設定のデザインのコピー-3-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/9dd3ae89-9ddd-78fe-5a78-13a9044db594.jpeg)](https://textcheckai.page.link/jofZ)



重複になるので詳しくは省略しますが、アプリの構築にはPythonとSwiftを使用し、iOSにおいてはSwiftUIを中心に採用しています。上の記事を執筆した後、改良を行い「〜なのだ」口調と一人称、二人称の変更に対応しました。なおAIの作成や保存にはログインが必要です。



## 実際の手順

下のプラスボタンをタップすると作成フォームが表示されるので設定をそれぞれ入力してみてください。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/96766296-6d86-1d56-015a-fee4e8e656d4.jpeg)

最初は名前と画像を決定し、各種設定に移ります。肩書きの部分は自由です。基本は「ずんだの妖精」ですが、個人的なイメージに合わせて「会社員」や「RTA走者」などでも大丈夫です。好きなこともそれに合わせて変えてみましょう。その他の設定は思いつかなければ空欄でも問題ありません。
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/ff6543be-b2ec-45b5-6c3f-f6823aa21f8d.jpeg)

ずんだもんの一人称は、公式によると「ボク」だということです。ただし「ずんだもんは〇〇なのだ！」という台詞が聞きたい場合は一人称を「ずんだもん」にする方がおすすめです。二人称は公式では「オマエ」「みんな」となっていますが、個人的にどちらも馴染みがなかったので「キミ」にしておきました。いいそうなセリフも登録しておくことができます。

上の情報は全て会話に反映されます。そのまま出力されるか、内容が少し変わって表れるかはランダムです。ただしモデルの性質上会話の初期段階ではそのまま出力される方が確率は高くなります。

最後に説明文を決めましょう。簡単な文章でもバージョン違いを作成するときに便利です。他の人に見えるようにするかどうかの検索設定も可能です。実験的なずんだもんを非公開するなどの使い方もできます。

# 完成品なのだ

## ずんだAI
一応サンプルとして「ずんだAI」を作成してみました。こんな感じの会話ができます。
![名称未設定のデザインのコピー-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/9c957f63-0ca6-6076-508b-51ecda71a783.jpeg)

しっかりと「〜なのだ」口調が反映されました。ゲーム好きの設定も生かされていますね。このAIは公開しておいたので参考にしてみてください。

## 会話の書き出し
会話画面右上の共有ボタンから会話を書き出すことができます。


>キミ:「自己紹介して」
ずんだAI:「ボクはずんだAIなのだ。ずんだずんだAIなのだ」
キミ:「こんにちは」
ずんだAI:「そうなのだ!」
キミ:「今日の予定は?」
ずんだAI:「さぁ、なんぞありやしないのだ」
キミ:「休みの日は何してるの」
ずんだAI:「毎日1人ゲームをするためだけに生きており、何もないのでオフ会」
キミ:「何人ぐらい来たの?」
ずんだAI:「10人ちょい」
キミ:「人気者じゃん」
ずんだAI:「さぁ、そんなに嬉しくはないのだ」
キミ:「何で?」
ずんだAI:「これこれこういう理由でなのだ。主催者としてはとてもありがたく思うのだ!」
キミ:「なるほど?」
ずんだAI:「実際は大したことないのだ。」
キミ:「謙虚だね」

そのままツイートしたりすることもできますし、小説執筆の際に会話文として使うことも可能です。

# さいごに

Evekiはキャラクター性に特化した会話AIなので工夫と発想次第で色々なAIを作ることができます。今回は紹介できなかった話し方もぜひ使ってみてください。もし質問や要望、不具合の報告などありましたら以下のフォームをお使いください。

- [お問い合わせフォーム](https://docs.google.com/forms/d/e/1FAIpQLScWUV4e2wWTTuOWsKPOaQjLscI2sK_j2-YOK-7iEdYSOAC0Yg/viewform?usp=sf_link)

AIとの会話を楽しんでくださいね！
委任したままノードのドメインを変更できるか実験

# 概要

ノードのドメインを変更しても委任が継続されるかの実験です。

**※ この手順を参考に本番で実施するときは自己責任でお願いします。**

変更前 : stg.harvesting-sweet-potatoes.club
変更後 : hoge.harvesting-sweet-potatoes.club

## 概要図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/bfd4a4dc-ada8-e923-6fce-f911047ebafe.png)

## 作業前のウォレット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/d7c9f6e2-90ed-820c-6a9a-12d6d530ca9c.png)

# 手順

## DNS設定

stg.harvesting-sweet-potatoes.clubに設定しているノードのIPアドレスをhoge.harvesting-sweet-potatoes.clubに設定する。
stg.harvesting-sweet-potatoes.clubの設定は削除(←危険を伴う作業)

## preset.yml設定

hostをstg.harvesting-sweet-potatoes.clubからhoge.harvesting-sweet-potatoes.clubに変更してupgradeする

## https-portal設定

DOMAINSをstg.harvesting-sweet-potatoes.clubからhoge.harvesting-sweet-potatoes.clubに変更して起動する

## 設定直後の状況確認

2023/1/18 10:40
不通の状況になる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/a8baa2e2-6a34-7053-4f2e-7ef89620c358.png)

ユニバーサル版はFAILEDになった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/931a6193-bf90-5c8c-ac5e-377e243d5ccb.png)


unlockedAccountでは委任されていることが確認できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/59f883f7-9ee9-da7c-ff31-60f30aac066c.png)

## 復旧していることを確認

2023/01/19 10:05
ウォレット上の表示が新しいドメインで正常に委任されている状況に戻る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/9537400c-cf2a-c726-0083-3a749e1bfec9.png)

## 所感など

設定を正しく変更すればドメインの変更は可能。ウォレット上の表示が失敗している状態でも
ハーベストは発生していたのでちゃんと委任できているかの確認はunlockedAccountで見れば問題無さそう。
2,3日はウォレット上で委任失敗の表示が続く可能性があるので不安な場合はXEMBookで新しいドメインで登録して緑になっていることを確認すると良さそう。

※ この「委任ノード設定」に新しいドメインを入れて緑になっていれば問題ないハズ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/7bd1f071-4d2d-8ebb-74e3-237b86cb93ec.png)

## 追記 : 本番ノードのドメインを変更しました(2023/01/20 11:38)

harvesting-sweet-potatoes.comのドメイン変更を行いました。
私のノードに委任いただいている方はXEMBookの委任ノード設定を「symbol.harvesting-sweet-potatoes.club」に変更して緑色になれば問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20474/4e3b749c-5250-1abf-7f71-fd6a8db0d9cb.png)
《GAS》特定キーを含むファイル名の複数ファイルをメールに添付して送付

## 概要
Google Apps Script、略してGAS。ガス、ギャスなど呼び方は一定してないようですが、私は「ガス」と言っています。JavaScriptでコーディングし、グーグルのサーバで実行されます。スプレッドシート、フォームなどのメニューから選択したり、ドライブから直接作成することもできます。最近は私が勤める会社のような中小企業でもVBAだけじゃなくGASも使うようになってきました。（GASもVBAもうちの会社で使ってるのは私だけですが…）
仕事で作ったGASのなかから、指定フォルダ内で今日の日付をキーとしてファイル名を検索し、該当する複数のファイルを一括してメールに添付して送付するコードを紹介します。キーの部分を変えるといろいろ応用ができるんじゃないかと思います。私はスプレッドシートに組みこんでトリガーで自動実行していますが、他にもいろいろな使い方が可能かと思います。


## コード
```
function attachment_mail(){

// 添付ファイルの保存先のグーグルドライブのフォルダを指定
let folder = DriveApp.getFolderById("フォルダID");

// ★添付ファイルを抽出するキーとなる日付の作成
// ★今日の日付を《年.月.日》の形式で指定してます
// ★この部分を変えればいろんなファイル名の添付に対応できます
// ※余談：日付の「月」の部分MMは時間の「分」mmとかぶるため仕様で大文字表記となっています
let today = new Date();
let date = Utilities.formatDate(today, "JST", "yyyy.MM.dd");

// フォルダ内のファイル名を調べて今日の日付"yyyy.MM.dd"が入っていたら配列list_aに格納
let list_s = folder.getFiles();
let list_a = [];

  // 指定フォルダ内のすべてのファイルに対して繰り返し処理
  while(list_s.hasNext()){
    let file_a = list_s.next();
      // 抽出キー《年.月.日》を正規表現でファイル名に含まれるか調べる
      // キーが含まれていたらそのファイル名をリストに追加していく
      // ※特定の拡張子のみなどの条件があればここでIF文を追加します
      if(file_a.getName().match(new RegExp(date,"g"))){
        list_a.push(file_a);
      }else{}    
  }

// メール送付処理
let mail = メールアドレス;
let subject = "件名";
let body = "本文";

// オプションのattachmentsで作成したファイル名リストの配列を指定する
let options = { attachments: list_a };

// メール送付を実行
MailApp.sendEmail(mail,subject,body,options);
}
Subversionリモートリポジトリ取得、最新取得、ファイル追加

Windows11にて

https://sliksvn.com/download/
をインストール

コマンドプロンプトで
```
svn checkout --username ＜ユーザ名＞ ＜リポジトリのURL＞
```

最新(更新分)を取得するには取得先(チェックアウト先)のフォルダにて
```
svn update
```

リポジトリに追加したいファイルが有れば対象フォルダに当該ファイルを配置してからそのフォルダにて
```
svn add ＜ファイル名＞
svn commit -m "＜コミットメッセージ＞"
```
streamlitを起動し続ける方法

streamlitを使ってアプリをAWS上で公開していましたが、気づいたらrunが途切れてることがあり、アプリ公開し続けられないんじゃない？と壁にぶち当たりました。
※次の日には途切れちゃう

色々調べた結果、Linuxコマンドでできることがわかりましたので、アウトプットします。

## 解決策
コマンドをバックグラウンドで実行し続ける [nohup コマンド &] というコマンドを使えば解決しました。

```
nohup streamlit run ファイル名 &
```

そしてバックグラウンドで実行してるかを確認するコマンドが↓
```
tail -f nohup.out
```
nohup.out というファイルに実行結果が記載されていきます。

停止するには「kill [ID]」コマンドを使えば、停止することができます。

## 原因追求
長い処理を実行している時にterminalを閉じたり、端末をとじてしまうと実行中のプロセスにはHUPシグナル（SIGHUP：制御している端末の終了を伝えるシグナル）が送られます。

その上、streamlitは起動するとターミナルが操作できなくなってしまいますので、起動する場合はnohupを使ったほうが自由に操作できます。
[SceneConfiguration] Info.plist contained no UIScene configuration dictionary (looking for configuration named "(no name)")というエラー？がでる

# はじめに
めちゃくちゃ久しぶりにSwiftUIでコーディング始めたのですが、全部忘れまくってて焦った上に、シミュレータで実行したら謎のエラーが出たので、調べて解決したので、備忘録として....


# 更新履歴
2023.1.19 初回投稿

# 環境
- XCode Ver.14.2 
- MacOS Monterey 12.5.1

# 参考にしたサイト
- https://developer.apple.com/forums/thread/721912

# やりたいこと
『[SceneConfiguration] Info.plist contained no UIScene configuration dictionary (looking for configuration named "(no name)")』というエラー？が出たので出ないようにしたい

# 手順
プロジェクトを作るときのInterfaceに「SwiftUI」にすると、info.plistが生成されないのが原因のようである....。「Storyboard」の場合は生成されます。
なので、info.plist作って、「Scene Configuration」を追加すればOKのようです。
1. XCode左ペインのプロジェクトトップをクリックして、設定画面?を開きます。
![スクリーンショット 2023-01-19 10.06.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/4188ddc7-bf80-0bf6-9cea-768629823972.png)

1. infoタブを選択
![スクリーンショット 2023-01-19 10.06.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/08ace204-2b92-1b65-4b6e-a2304d44f38c.png)


1. 「Application Scene Manifest」を探して、右Chevron(>)をクリック+をクリックして、「Scene Configuration」を追加
![スクリーンショット 2023-01-19 10.07.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/1e2674e4-6dc4-e005-47de-347faefe08e8.png)


1. これでOKです。

以上
ActiveDirectoryでユーザーのログイン履歴を確認

# やり方（監査の構成）

ログイン履歴を確認できるように監査の構成を事前にしておく必要がある。

Windowsマーク右クリック ⇒ ファイル名を指定して実行

```gpedit.msc``` でグループポリシーエディターを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c8f5a05d-a104-c1f7-7550-69a88189e4c8.png)

下記のように『Kerberos認証サービスの監査』を『成功および失敗』で設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/3ff7038a-a251-00b3-8f9c-c4765cee19cd.png)

# やり方（Windowsログの確認）

Windowsマーク右クリック ⇒ イベントビューアー

下記のようにすればログイン成功した履歴を確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/cf31039c-a571-806a-0777-3307b5f203ee.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/abffa539-8ac6-4d2b-efdd-a1c526b9a7a7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/a183d310-1316-da2e-0994-bfa876e3b251.png)

# 蛇足

詳細な検索かけたい時はイベントビューアー右側の下記を使うと便利。
（いったんcsvやxmlでファイル出力してファイル内を検索）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/41003e7b-c8ed-5ea0-ddff-1e7c6d8b8f17.png)

# 参考サイトさん

https://blogs.manageengine.jp/how_to_audit_logon_1/
vba マクロを抜いてファイルを保存したい

<h2>結論</h2>

```vba:change_ext_and_save
Sheets.copy
ActiveWorkbook.SaveAs Filename:="C:\hoge.xlsx"
```

<h2>どういった時に必要か</h2>
マクロで色々帳票作ったはいいけれどその帳票をメールで送信するとき

マクロは除外してxlsxとして送りたい。
送った後もまだ処理はある。というような場合。

<h2>どう失敗したか</h2>
FileCopyとかFSO CopyFileメソッドとか超遠回り。

SaveAsで FileFormat:=xlWorkbookDefault　とかやって
「いやxlsxの方はいらないから閉じてと。」とやってしまいマクロ全消えとかパターン中のパターン。

最後のほうには
Workbooks.Add
で空のブック用意して一個一個シートコピーでやろうとかしてた。
あとはSheets(Array("sh1","sh2","sh3","sh4","sh5","sh6",・・・・・,"sh36")).copy
とかもいらない。

結果は冒頭の2行で済みます。
ちょっとコードがキレイだったので共有です。
Cloud9 vs VScode Online




## Cloud9とは何か？

*AWS Cloud9 には、**事前認証された AWS コマンドラインインターフェイスと一緒に開発環境をホストしている**、マネージド Amazon EC2 インスタンスに対する sudo 権限を含むターミナルが付属しています。これにより、すばやくコマンドを実行して AWS のサービスに直接アクセスすることが簡単になります。*

要は:Cloud9とは**EC2に対して、vscodeのようなエンジニアにとって快適なインターフェースを追加したもの**

<img src="https://d1.awsstatic.com/product-marketing/Tulip/Terminal%20New.67b39d8fa735fcd10b997e2767a4302d3e388263.png">

from https://aws.amazon.com/jp/cloud9/


## 料金:無料

AWS Cloud9自体には費用はかかりませんが、これに合わせて利用するサービスには料金がかかってくるため注意が必要です。

from https://www.yume-tec.co.jp/column/awsengineer/4595#9Lambda


*AWS Cloud9 には追加料金はかかりません。AWS Cloud9 開発環境に Amazon EC2 インスタンスを使用する場合は、コードの実行と保存に使用された コンピューティング とストレージのリソース分 (例: EC2 インスタンス、 EBS ボリューム) のみのお支払いとなります。また、AWS Cloud9 開発環境を、SSH 経由で、追加料金なしで、既存の Linux サーバー (オンプレミスサーバーなど) に接続できます。*

from https://aws.amazon.com/jp/cloud9/pricing/






# Vscodeに勝る点

## リアルタイムでのメンバー間の連携

共同作業中にチームメンバーは互いのタイピングをリアルタイムで確認でき、IDE 内から即座にチャットを開始できます。

**ペアプログラミングに適した IDE**

<img src="https://d1.awsstatic.com/product-marketing/Tulip/C9-Collab-Image%403x.e03a65d9488633c154358430540ab363dd1e8f45.png">


## lambdaをサポートしてくれる

*Cloud9 では、**AWS Lambda** 関数をローカルでテストおよびデバッグするための環境を利用できます。これにより、コードを直接反復処理して時間を節約し、コードの品質を向上させることができます。*

<img src="https://d1.awsstatic.com/product-marketing/Tulip/AWS_Cloud9_Asset03_R3P.f4760f91e9108120992d31a8ab0014022595a43e.png">


## terraformのレジストリ登録済み

次の名前でterraformレジストリに登録されていた。
Iacの恩恵を受けることができる。

レジストリ名:Resource: aws_cloud9_environment_ec2

サンプルコード

```tf
resource "aws_cloud9_environment_ec2" "example" {
  instance_type = "t2.micro"
}

data "aws_instance" "cloud9_instance" {
  filter {
    name = "tag:aws:cloud9:environment"
    values = [
    aws_cloud9_environment_ec2.example.id]
  }
}

resource "aws_eip" "cloud9_eip" {
  instance = data.aws_instance.cloud9_instance.id
  vpc      = true
}

output "cloud9_public_ip" {
  value = aws_eip.cloud9_eip.public_ip
}
```

from https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/cloud9_environment_ec2


*一方、AzureのVscode Onlineをサポートするレジストリは存在しなかった。*


# Vscodeに劣る点

## AWSへのログインが必要

```
これはCloud9とう特性上仕方ない作業です。AWSのログインってなぜかメールアドレスとパスワードの画面遷移があって、しかも毎回ロボットか疑われるので地味に面倒ですよね...。
VS CodeなどからSSHで接続すれば公開鍵認証なのでパスワードを打つ必要はなくなります。
```

要するに:**awsのログインはかなり面倒**

from https://note.com/mtkn1/n/nbc33e765558b#9de1ebf9-a67e-4993-91a0-1d40e52c399b

## syntaxハイライト

```
Cloud9は内蔵エディターを搭載しておりWebアプリとしては高性能ですが、ネイティブなエディターには劣ります。VS Codeに乗り換えるとPythonのシンタックスハイライトやコード補完、型推定などが大幅に強化されます。
コーディングはVS Codeを使ってCloud9にコピペする使い方もありますが、手動でファイル操作するよりもVS Codeまたはコンソール上で操作したほうがファイル管理が煩雑になりません。
```

現在は改善されている可能性があるが、シンタックスハイライトはVscodeに軍配が上がる。

from https://note.com/mtkn1/n/nbc33e765558b#9de1ebf9-a67e-4993-91a0-1d40e52c399b
WSL で Windows のシンボリック リンクを作る

## 環境

* Windows 11 22H2
* WSL version 1.0.3.0
* Kernel: 5.15.79.1-microsoft-standard-WSL2


## 素朴にやるとうまくいかない

以下のように WSL で NTFS 上にシンボリック リンクを作成すると、Windows のシンボリック リンクではなく WSL の UNIX シンボリック リンクが作成されます。Windows から読み取ろうとしてもエラーになってしまいます。

```
$ mkdir /mnt/c/work
$ cd /mnt/c/work
$ echo foo > foo.txt
$ ln -s foo.txt symlink
$ ls -l
total 0
-rwxrwxrwx 1 hanohrs hanohrs 4 Jan 19 06:45 foo.txt
lrwxrwxrwx 1 hanohrs hanohrs 7 Jan 19 06:45 symlink -> foo.txt
$ cmd.exe /c dir
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は EE18-AEC5 です

 C:\work のディレクトリ

2023/01/19  06:45    <DIR>          .
2023/01/19  06:45                 4 foo.txt
2023/01/19  06:45    <JUNCTION>     symlink [...]
               2 個のファイル                   4 バイト
               1 個のディレクトリ  130,285,998,080 バイトの空き領域
```

WSL の UNIX シンボリック リンクはジャンクションではありませんが、dir コマンドは JUNCTION と表示します。どうやら dir コマンドは未対応のリパース ポイントを見ると JUNCTION と表示するようです。

https://github.com/microsoft/WSL/issues/353#issuecomment-219017940


## 解決方法

通常、NTFS のシンボリックリンクを作成するには管理者権限で操作する必要があります。WSL を管理者として実行すると、同様のコマンドでも Windows のシンボリック リンクが作成され、dir コマンドで SYMLINK と表示されます。

```
$ cd /mnt/c/work
$ ln -s foo.txt elevated
$ cmd.exe /c dir
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は EE18-AEC5 です

 C:\work のディレクトリ

2023/01/19  07:00    <DIR>          .
2023/01/19  07:00    <SYMLINK>      elevated [foo.txt]
2023/01/19  06:45                 4 foo.txt
2023/01/19  06:45    <JUNCTION>     symlink [...]
               3 個のファイル                   4 バイト
               1 個のディレクトリ  130,268,467,200 バイトの空き領域
```


## 挙動

GitHub の WSL プロジェクトに開発者が寄せたコメントによると、以下が全て成立する場合に Windows のシンボリック リンクが作成されるそうです。

* ターゲットが Windows から到達可能 (つまりリンクが相対で、マウント ポイントを跨がない)
* ターゲットが存在する (したがってファイルなのかディレクトリーなのか判定できる)
* ユーザーに symlink を作成するのに十分な特権がある (現状、開発者モードが有効でなければ特権昇格が必要)

成立しなかった場合、WSL の UNIX シンボリック リンクが作成されます。

https://github.com/microsoft/WSL/issues/353#issuecomment-340913146


## 別の解決方法

未確認ですが、管理者として実行する以外にも、以下の方法で解決可能と思われます。

* 開発者モードを有効にする
* [Polsedit](http://www.southsoftware.com/) でユーザーに Create symbolic links 権限を割り当てる
* editrights コマンドを導入して、ユーザーに SeCreateSymbolicLinkPrivilege を割り当てる
* Home エディション以外の場合、`gpedit.msc` や `secpol.msc` でシンボリック リンクの作成にユーザーを追加する


## 参考

https://github.com/git-for-windows/git/wiki/Symbolic-Links

https://qiita.com/ucho/items/c5ea0beb8acf2f1e4772

https://web.archive.org/web/20170420043709/https://qiita.com/ucho/items/c5ea0beb8acf2f1e4772#comment-250af72ab706bd611549

https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10/

https://learn.microsoft.com/en-us/openspecs/windows_protocols/ms-fscc/c8e77b37-3909-4fe6-a4ea-2b9d423b1ee4
【CSS】displayプロパティに2つ値が入るってマジ！？ どゆこと！？

## はじめに
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/989c45f0-26b0-1098-47b6-d4d7a4103c76.png)

みなさんは、CSSのdisplayプロパティを知っていますか？
CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？

最近では、`display: flex;` や `display: grid;` が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。

そんな中で、[CSS Display Module Level 3](https://www.w3.org/TR/css-display-3/)で、displayプロパティに2つの値を入れることができるようになることがわかりました。 *※ まだ、`Firefox 70以上`・`Safari 15以上`でのみ再現できます。(2022年１月20日)*

そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。

## 背景
まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。

最近displayプロパティに、`display: flex;` や `display: grid;` が追加されたことで、
displayプロパティは、指定した要素がブロック要素かインライン要素かを変更するだけでなく、
指定した要素の子要素の表示動作を変更するプロパティへとアップデートされました。


![Flex Boxの場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/691d1039-27a4-9610-91bc-bc9f3f4bfbc8.png)
例えば、Flex Boxの場合では、親要素に `display: flex;` を指定することで、
親要素は、ブロック要素としての振る舞いをしながら、
子要素がFlexItemとなり、子要素同士が並列して並ぶように表示動作を変更させています。
　

![Grid Layoutの場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7673fb55-ef0b-40c3-b936-33afc9b191d0.png)
同様にGrid Layoutの場合では、親要素に `display: grid;` を指定することで、
親要素は、ブロック要素としての振る舞いをしながら、
子要素がGridItem となり、子要素がGrid上に並ぶよう、表示動作を変更させています。

:::note
このように、`display: flex;` や `display: grid;` が追加されたことで、
**外部**（親要素の振る舞い）と **内部**（小要素の表示動作変更）の2つの値を指定することができるようになりました。
:::

## ２値の構文

### ２値の構文の書き方
<!-- tableで対応表 -->
２値の構文は、この外部（親要素の振る舞い）と内部（小要素の表示動作変更）を分けて指定する書き方になります。

`display: flex;` の場合は、外部をブロック要素、内部をフレックスとして扱われるため↓このように指定することもできます。

```css
/* display: 外部 内部; の順に指定する*/
.sample {
  display: block flex;
}
```

他の単一の値を２値の構文で書くと↓このようになります。

単一の値|２値の構文
----|----
`display:　block;`|`display:　block flow;`
`display:　flow-root;`|`display:　block flow-root;`
`display:　inline;`|`display:　inline flow;`
`display:　inline-block;`|`display:　inline flow-root;`
`display:　flex;`|`display:　block flex;`
`display:　inline-flex;`|`display:　inline flex;`
`display:　grid;`|`display:　block grid;`
`display:　inline-grid;`|`display:　inline grid;`

また、外部・内部それぞれで使える値は、
**外部**：`block`・`inline`
**内部**：`外部以外の値`
になります。

### ブラウザーの互換性
![スクリーンショット 2023-01-19 3.56.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8458d055-0845-500d-e794-7cf4171be32a.png)

2023年1月20日現在は、`Firefox 70以上`・`Safari 15以上`で対応しています。
気になった方は、対応ブラウザでご確認お願いします。

## まとめ
この記事では、displayプロパティに2つの値を入れられることについて解説しました。

２値の構文は、どれも、単一の値で指定することができるので、現在のところあまり使うメリットは多くなさそうかなと感じました。

強いていうなら、 displayプロパティの指定が明瞭になること くらいでしょうか？
ドキュメントには、`clearfix` のハック話がありましたが、`float`でレイアウトを組むことはしていないので...

[CSS Display Module Level 4](https://drafts.csswg.org/css-display/)でさらにdisplayがアップデートされるので、そこで２値の構文の重要性が出ることを期待しましょう。

２値の構文について詳しくは↓こちらをごらんください。

https://developer.mozilla.org/ja/docs/Web/CSS/display/two-value_syntax_of_display

---

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

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

https://twitter.com/degudegu2510
UnityのGetcomponentで親や子のコンポーネントを取得する方法

Unityでゲームを作る時、オブジェクトの数が多いときや
自動生成されるゲームオブジェクトだと、コードからコンポーネントを取得したい時が多いですよね？

 

今回はそんなコードから親や子オブジェクトからコンポーネントを
取得したい時の対処方法について紹介していきます！


# UnityのGetComponentの効果

GetComponentはゲームオブジェクトに
アタッチされているコンポーネントを
取得できるコードになっています。

 

例えば下記オブジェクトのTransFormコンポーネントを取得したい場合は

1. スクリプト作成
1. Squareオブジェクトに作成したスクリプトをアタッチ
1. コード記述

上記で可能になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541829/1de04480-c4b3-b15c-2c61-20916ba65415.png)

<details><summary>サンプルコード</summary>

```c#:Test.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test : MonoBehaviour
{
    private Transform square;

    void Start()
    {
        square = GetComponent<Transform>();
    }

}
```
</details>


## 親オブジェクトから子オブジェクトのコンポーネントを取得するには


この機能を使えば親のオブジェクトからも
コンポーネントを取得することが可能になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541829/4d968f20-7b94-0326-0081-95832fd1b5b7.png)

例えばSquare_ChildrenオブジェクトのTransFormコンポーネントを
Squareから取得したい場合は

1. スクリプト作成
1. Square_Childrenオブジェクトに作成したスクリプトをアタッチ
1. コード記述

上記で可能になっています。

<details><summary>サンプルコード</summary>

```c#:Test.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test : MonoBehaviour
{
    private Transform square;

    void Start()
    {
        square = GetComponentInChildren<Transform>();
    }
}
```
</details>


## 子オブジェクトから親オブジェクトのコンポーネントを取得するには
さらには子オブジェクトから親オブジェクトのコンポーネントを
取得することも可能になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541829/94ee24fe-a6eb-27c9-a3bb-dbb18dbc019c.png)

例えばSquareオブジェクトのTransFormコンポーネントを
Square_Childrenから取得したい場合は

 

1. スクリプト作成
1. Squareオブジェクトに作成したスクリプトをアタッチ
1. コード記述

<details><summary>サンプルコード</summary>

```c#:Test.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Square_Children : MonoBehaviour
{

    private Transform square;

    void Start()
    {
        square = GetComponentInParent<Transform>();//一番上の親についているコンポーネントを取得する
    }
}
```
</details>


## YouTubeチャンネル

ゲーム雑学や、具体的なゲーム開発方法まで紹介しているチャンネルを運営しています！

https://www.youtube.com/channel/UCVMfSecoP77yIh1a1O-7Wjg
Django Ninjaを使ってみた Vol.1(初期設定編)

![ninja_syuriken_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1046008/a098d1a8-a4ba-28a9-95c7-ca317edcdb76.png)


Django-ninjaがいいという話を聞いたので、ちょっと使ってみた際の備忘録です。
https://zenn.dev/chanmoro/articles/b980d8fa681362

環境
MacOS Ventura
Python 3.10.7
Poetry 1.3.2


グローバルのPythonにインストール
```python:terminal
# pipの場合
pip install django-ninja

# poetryの場合
poetry add django-ninja
```

プロジェクトを作成したいディレクトリで実行
```python:terminal
django-admin startproject {アプリ名}  # 今回はDjangoNinjaTempleteとする
```

認証機能を作るためdjango-ninja-jwtをインストール
```python:terminal
# pipの場合
pip install django-ninja-jwt django-ninja-extra six

# poetryの場合
poetry add django-ninja-jwt django-ninja-extra six
```
PoetryをPython3.10で使う場合はこちらを参考に
https://zenn.dev/hiroga/articles/poetry-env-cannot-use-python3_10


DJANGO_NINJA_TEMPLETEフォルダ(settings.pyがあるディレクトリ)でapi.pyを作成し、以下を貼り付け
```python:DJANGO_NINJA_TEMPLETE/api.py
from ninja_jwt.controller import NinjaJWTDefaultController
from ninja_extra import NinjaExtraAPI

api = NinjaExtraAPI()
api.register_controllers(NinjaJWTDefaultController)
```

```python:DJANGO_NINJA_TEMPLETE/urls.py
from django.contrib import admin
from django.urls import path, include

from .api import api

urlpatterns = [
    path('api/admin/', admin.site.urls),
    path("api/", api.urls),
]
```

```python:DJANGO_NINJA_TEMPLETE/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ninja_extra', # 追加
]
```

サーバーを立ち上げて、http://127.0.0.1:8000/api/docs にアクセス
```python:terminal
python manage.py runserver
```

Fast APIでよく出てくるdocsにアクセスできたら成功
![スクリーンショット 2023-01-19 9.03.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1046008/3c044cf4-1fab-766d-4755-d5b89998d171.png)


こういったサービス運営やってるので、気になる方はぜひ
https://data-lab.project-g.co.jp?utm_source=Qiita&utm_medium=qiita&utm_campaign=qiita_20230119

続きはこちら (2023/03/13追記)
https://qiita.com/ps0317ix/items/ff10e0eddfc24e5db96c

参考文献：
https://django-ninja.rest-framework.com/
https://eadwincode.github.io/django-ninja-jwt/
【初心者向け】Azure Cloud ShellでのPostgreSQLサーバー接続と基本的なコマンド

# はじめに
最近、Azure Cloud ShellでPostgreSQLに接続して検証作業をすることがあり、その際に接続できなくて躓いたので備忘録としてPostgreSQLの接続の仕方と検証時に使用した基本的なコマンドについて記事にします。
かなり初歩的な内容となっていますので、初心者向けです。

# 前提条件
Azure環境上に既にPostgreSQLが構築されていることを前提としています。

# Azure Cloud ShellでPostgreSQLに接続してみる

1. Azure portal上でアイコンを選択して、Azure Cloud Shellを開く。
![cloudshell.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3065056/4441ea92-fbfe-4a28-88e1-50d2dada47c1.png)
Azure Cloud Shellが立ち上がるととこんな画面になります。↓
![起動後.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3065056/20fff769-d922-f22f-f61c-a0708d07c97e.png)
**※初めてCloud Shellを使用する際にはストレージアカウントの作成が必要になります。初回だけ必須の作業になりますので、作成しておきましょう。**


1. 接続文字列のpsqlをもとにコマンドを作成し、PostgreSQLに接続します。
psqlのサーバー名やサーバー管理者名などは**プロパティ**で確認できますので、先にメモしておくと楽ですね。
![接続文字列.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3065056/eb93aa6c-dd94-b0a1-ec28-7b81ba60a9a2.png)
コマンド実行すると画像のようにDB名が表示されます。
今回はpsqlでDB名postgresを指定したので、無事接続できたことが分かります。↓
![接続成功.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3065056/43e2940b-97ad-d75e-bae9-ae1db012f5aa.png)


**※ちなみに・・・
ファイアウォール規則が設定できていないと下の画像のように弾かれます。
対処法として「entry for host」の後ろのIPアドレスをファイアウォール規則に追加すると接続できます。**
![接続失敗.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3065056/3fa8c708-ac2e-8c42-7335-fd2dbe4f0d22.png)



  

# 基本的なコマンド
## 一覧表示
` ¥l ` 
…データベース一覧の表示

` ¥d `
…テーブル、ビュー、シーケンス一覧の表示

` ¥dg `
…ロール一覧の表示

` ¥dn `
…スキーマ一覧の表示

` ¥dp ` or ` ¥z `
…テーブル、ビュー、シーケンスのアクセス一覧表示

## データ取得
` SELECT * FROM table_name `
…指定したテーブル名のテーブル内の全てのカラム(*)からデータを取得。

` SELECT column1 FROM table_name `
…指定したテーブル名のテーブル内のcolumn1からデータを取得。

## 権限付与
` GRANT 権限 ON 対象 TO ロール名`
…指定したロール名に対して権限を付与。
※対象にはテーブル、データベース、スキーマなどが入りますが、付与する権限によって指定できる対象も変わります。

**基本的な権限**としては以下の通りです。
` SELECT `　テーブルやビューのデータ取得権限※**UPDATE、DELETEしたい場合にも必要。**
` UPDATE `　テーブルのデータ更新権限
` DELETE `　テーブルのデータ削除権限
` CREATE `　スキーマやオブジェクト(テーブルやビュー)の作成権限
` USAGE `　 対象をスキーマにした場合、オブジェクトのアクセス権限、それ以外の場合は対象によって対応する権限

## 権限削除
` REVOKE 権限 ON 対象 FROM ロール名`
…指定したロール名から権限を削除。
権限の種類はGRANTと同様。

# おわりに
今までDBに触れてこなかった(そもそもCLIの作業自体慣れていない)ので、Azure Cloud Shellに接続するだけで一苦労でした…同じようにAzureを触り始めたばかりで勉強中の方の参考になれば幸いです。
Create React Appでソースマップの生成を抑制する。

[Create React App](https://create-react-app.dev/) を使用して React アプリケーションを作成すると、ビルド時にウェブブラウザでのデバックに役立つソースマップが作成されます。

ソースマップは、CSS と JavaScript でそれぞれ作成されます。リストにあるパス中の `xxxxxxxx` はハッシュ値です。

* `build\static\css\main.xxxxxxxx.css.map`
* `build\static\js\main.xxxxxxxx.js.map`

ソースマップとは、何かは次の記事を参照してください。

https://developer.chrome.com/blog/sourcemaps/

プロダクション環境にソースマップがデプロイされると、ウェブブラウザの開発者ツールで開発時のコメントまで含めてソースコードが丸見えになります。クライアント側でソースコードが見られる、改変されることを前提にコーディングすることは、当たり前として、精神衛生上、あまりよろしくないという議論があります。

https://fintan.jp/page/1596/

Create React App で構成した React アプリケーションでは、プロダクションビルド時にデフォルトでソースマップを作成し、build フォルダ配下に配置します。このビルドセットをそのままプロダクション環境へデプロイするとソースマップが公開されます。

ソースマップをビルドセットから取り除いてプロダクション環境へデプロイしてもよいのですが、開発時は `npm start` で開発中のソースコードで確認できるし、プロダクションビルド時に生成しないようにしています。

プロダクションビルド時にソースマップを生成するかどうかは、Create React App の詳細設定で変更できます。

次の公式ドキュメントにある `GENERATE_SOURCEMAP` という設定です。

https://create-react-app.dev/docs/advanced-configuration

公式ドキュメントにある通り `GENERATE_SOURCEMAP` 設定は、プロダクションビルドでしか使用されないため、`.env.production` ファイルに設定を含めると使い回しやすいです。Create React App のプロジェクトに含まれる `.env` は、そもそも公開されて困る設定は含まれていない（ように構成している）ので、私はソースコード管理にも含めています。秘匿するべき情報や更新頻度が高い情報が含まれている場合なら、別途パラメーター管理されていると思うので、そこが設定を含むべき場所かと考えます。

Create React App の `.env` やその優先順位については、次の公式ドキュメントの記事を参照してください。

https://create-react-app.dev/docs/adding-custom-environment-variables/

具体的には、`.env.production` ファイル中に次の設定を追記します。`.env.production` ファイルがない場合は、Create React App は自動で作成しないため、自分で作成してください。

```toml:.env.production
GENERATE_SOURCEMAP=false
```

フロントエンド開発の基本は、ソースコードを読まれても、ソースコードを改変されても安全な作りにする、ですので、保険的対策として必要な方は実施してみてください。
WordPressで特定の固定ページをスラッグかIDを元に複製する方法

例えば、「会社概要」の固定ページがあったとして、新しく作るページにも「会社概要」と同じ内容を表示したい場合の方法です。

こうすることで、1つの固定ページを編集すれば、複製した固定ページにも反映されます。

```php
<?php
  get_header();

  // $page = get_page_by_path('sample/sample');  // スラッグ指定（階層指定も可能）
  $page = get_post('〇〇'); // id指定
  $page_content = $page -> post_content;  // 本文を取得
  // ショートコードを使っている場合は置換
  $page_content = str_replace('[tempurl]', esc_url(get_template_directory_uri()), $page_content);
  echo $page_content;
  
  get_footer();
?>
```
Next.js + TypeScript datalist内のoptionには閉じタグが必要

この記事のエラーは以下の環境で発生しました。
```
"dependencies": {
  "@types/node": "18.11.9",
  "@types/react": "18.0.25",
  "@types/react-dom": "18.0.8",
  "eslint": "8.27.0",
  "eslint-config-next": "13.0.3",
  "next": "13.0.3",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "typescript": "4.8.4"
},
```


以下のコードを記述すると、datalistタグの所にエラーメッセージが表示されました。
`JSX element 'datalist' has no corresponding closing tag.ts(17008)`

```typescript:range.tsx
import React from 'react'
export default function Range() {
  return (
    <>
      <input
        type="range"
        list="range-list"
        />
      <datalist id="range-list">
        <option value="10">
        <option value="20">
      </datalist>
    </>
  )
}
```

datalistには閉じタグを付けているのにどうしてだろうと悩んだのですが、optionタグに閉じタグを付けると解決しました。
```typescript:range.tsx
import React from 'react'
export default function Range() {
  return (
    <>
      <input
        type="range"
        list="range-list"
        />
      <datalist id="range-list">
        <option value="10"/>
        <option value="20"/>
      </datalist>
    </>
  )
}
```

JSXにまだ慣れていないです。公式のdatalistのページからコピペしたのにエラーが出たので、
解決に時間がかかりました。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist
【TypeScript】Object is possibly 'null'

# エラー内容
例えば、
```typescript
name: `${message.member.displayName}`
```
のように、オブジェクトのメンバを呼び出そうとすると
![スクリーンショット 2023-01-17 135744.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665102/4b66b5ea-b902-7919-fa72-71d6c8f209bb.png)
とエラーが返ってくる。

# 解決策
## 1. "!"を付ける
```typescript
name: `${message.member!.displayName}`
```
とすれば、エラーは出なくなる。"!"は変数が必ず``non-null``の時につける演算子で、その変数が``null``である可能性を考慮しなくなる。この例だと``message.member``が絶対に``non-null``でなければならない。
ESlintを使っている場合、以下のような警告文が出る。
![スクリーンショット 2023-01-17 140607.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665102/8ab1dc44-1771-a7e6-56be-1ffab19d00a3.png)
## 2. "?"を付ける(おススメ)
```typescript
name: `${message.member?.displayName}`
```
"?"演算子は、変数が``null``(または``undefined``)の時に、エラーを出す代わりに``undefined``を返すというもの。こちらの方が安心かも。
wslでnerves その13

# 概要
wsl(wsl2じゃない)でnervesやってみる。
qemu(x86_64エミュレータ、ラズパイじゃない)でやってみた。
nervesイメージを新しくすると、sshがエラーを吐く問題。

# エラーの詳細。

```
$ ssh -p 10022 localhost
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the ED25519 key sent by the remote host is
SHA256:baHlnfph+xyw1tK5zrTYAQv5rlNf4h0qtYD1U1BZ1F0.
Please contact your system administrator.
Add correct host key in /home/user/.ssh/known_hosts to get rid of this message.
Offending ED25519 key in /home/user/.ssh/known_hosts:1
  remove with:
  ssh-keygen -f "/home/user/.ssh/known_hosts" -R "[localhost]:10022"
ED25519 host key for [localhost]:10022 has changed and you have requested strict checking.
Host key verification failed.

```

# 対処

```
$ ssh-keygen -f "/home/user/.ssh/known_hosts" -R "[localhost]:10022"

```


以上。
WSL2 の Ubuntu または何かしらのストレージ使用量を減らすメモ

## 紹介する方法で効果を期待できる状況

- Ubuntu または何かしらで `df` などして観測されるストレージの使用量と、Windows側の「インストールされているアプリ」の"Ubuntu"あるいは何かしらが実際に使用しているストレージ容量が大きく異なる場合
  - 例: Ubuntu で `df` するとストレージは 45GB 程度しか使用していないらしいが、Windowsのアプリ一覧の Ubuntu では 160GB 使用している場合 ⇨ 最大で 160GB - 45GB = 115GB 程度を減らせるかもしれません

### 効果を向上できるかもしれない何か

- Ubuntu または何かしらで:
  - `du -sh /home | sort -hr` するなどして使用量の大きな folder や file から不要なものがあれば `rm` などして削除しておく
  - `apt autoremove` `apt autoclean` などして不要なシステムパッケージ等を削除しておく

## 手順

```powershell
# 1. 対象が Running しているか確認
PS> wsl --list --verbose
  NAME                   STATE           VERSION
* Ubuntu                 Running         2
```

```powershell
# 2. 対象が Running していたら止める
PS> wsl --terminate Ubuntu
```

```powershell
# 3. diskpart を起動
PS> diskpart
```

```powershell
# 4. 対象の .vmdk を選択
# Store から WSL2 へ導入した Ubuntu なら⇩AppData/Local/... に入るので
# Explorer.exe の GUI で辿ってアドレスバーをコピーして貼り付ける、または根性で手打ちするなどする
DISKPART> select vdisk file="C:\Users\{user}\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_{random}\LocalState\ext4.vhdx"

DiskPart により、仮想ディスク ファイルが選択されました。
```

```powershell
# 5. 選択した.vmdkをcompact
DISKPART> compact vdisk

  100% 完了しました

DiskPart により、仮想ディスク ファイルは正常に圧縮されました。
```

```powershell
# 6. diskpart を終了
DISKPART> exit
```

### 削減効果の確認方法

- .vmdk ファイルの使用量を直接確認する
- Windows側の「インストールされているアプリ」の"Ubuntu"の使用量を確認する

## 参考

- https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/diskpart
- https://superuser.com/questions/1648560/locating-wsl-2-files-on-a-seperate-windows-installation
- https://ubuntu.com/tutorials/install-ubuntu-on-wsl2-on-windows-11-with-gui-support#1-overview
【Kindleハイライト管理ツール！】無料で使える便利サービスのご紹介

## はじめに
皆さんは、Amazonの電子書籍Kindleを使っていますか？
Kindleで特に便利なところが、気に入った文章にマークをつけておける「ハイライト機能」ですよね。

今回は、そんなハイライトを管理できる便利サービス**HighlightPicker**を紹介します！
※旧サービス名：KindleAutoMailer

https://kindle-auto-mailer.com/

## Kindleでよくある不満

ハイライト機能を使うと、自分が気に入った文章をマークして後から復習できるので、とても便利なサービスですよね。

しかし・・・
こんな不満はないではないでしょうか？

### 不満１：アプリ上では、本を開かないとハイライトが確認できない
Kindleアプリを使うと、その本のハイライトを確認できるようになっています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311150/0ce28415-1bc2-deb9-52c2-4e2fe551aefd.png" width=30%>


「この本に引いたハイライトはこれ。」という確認はできるのですが、、
<font color="red">「あの文章って、"どの本に"書いてあるんだっけ・・・？」</font>
って時に、１つずつ本を開かないと見つけることができない。

これがとても大きな不満でした。


### 不満２：「Kindleメモとハイライト」ページでも、本の横断検索はできない
Kindleには、ハイライトを確認するためにもう１つ便利なサービスがあります。

それが、「Kindleメモとハイライト」ページです。
:link: https://read.amazon.co.jp/kp/notebook

このサイトにAmazonアカウントでログインすると、今まで読んだKindle本の表紙が一覧で表示されます。

そして表紙をクリックすると、「その本のハイライト」が表示されるんです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311150/92d80335-83e7-f03d-c062-2bb36ab0b610.png)

このサイトを使えば、アプリを開かなくてもハイライトの復習ができます。

ですが・・・
「本をクリックして、その本のハイライトが表示される」システムには変わりないんです。

そのため、「あの文章って、どの本に書いてあるんだっけ・・・。」って時には対応できないんです。

かゆいところに手が届かん！！

## Kindleハイライトに対してやりたいこと
個人的に、以下のことができれば満足でした。
- 複数の本を横断的に、ハイライトをサクサク確認できる
- ハイライトの「キーワード検索」ができる
- （できれば、）復習したハイライト「復習済み」のチェックができる

ここまで述べたように、これらの希望を満たす機能は公式サービスにはありません。

・・・そこで、ツールを自作いたしました！

## Kindleハイライト管理ツール：HighlightPicker
それが、冒頭で紹介した、「HighlightPicker」です。

https://kindle-auto-mailer.com/

ログイン画面の下の方から、「デモページ」にアクセスできるようになっています。

まずは、デモを使って気軽に試してみてください！

## どんなことができるサービスなのか？
このサービスを使うと、先ほど記載した「Kindleでやりたいこと」を実現できるようになっています。

【主な機能】
- 「Kindleメモとハイライト」のデータを、このサービスに登録できる
- その登録した情報が、表形式でサクサク復習できる
- キーワードを使った横断検索ができたり、ハイライトに「復習中チェック」をつけてリマインドメールが送れたりする


個人的に特に気に入っているのが、「キーワードの横断検索」です!
<br>

たとえば、「イノベーションって書いてあるハイライトは、どんなものがあるんだっけ・・・？」って気になったとき、
このサービスを使えば、**一発で検索**ができます。

![05_全ハイライト語句検索.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311150/e6573a64-3af8-bff7-c097-4642896f907d.gif)

最近は、この機能を使う機会がとても多く、大活躍しています！！

## 最後に
Kindleハイライトを管理するツールを紹介してきました。

「Kindleで本を読んだことがある」という方は、”使わないと損！”と言えるサービスだと思います。

少しでも気になった方は、ぜひ気軽に試してみてください！

https://kindle-auto-mailer.com/

サービスについて質問やご意見があれば、お気軽にコメント欄などでお伝えください。

## 技術的な説明
- Kindleハイライトデータを連携時、値を体系的にデータベースに登録することで、一覧表示やスライドショー表示を実現しています。
- 本の画像はimgデータをDBに保存するのではなく、imgのURLを保存しています。画面を開くたびにその画像をAmazonから呼び出す形式にしています。
- なお、その画像のURLはAmazonAPIを利用しています。ハイライト連携時に、タイトル情報からAmazonAPIを呼び出し本の画像URLを取得。そのURLをDBに保存する形式です。
- そのため、「既にAmazonで販売が終了している本」は、APIから画像の取得が失敗することが稀にあります。この点が欠点ですが、現状は良い解決策が分かっておりません。（どなたか詳しい方、教えていただけると嬉しいです！）


<hr>

※また、エンジニアの方向けの詳しい記事は下記にあります。
　こちらもよければ参考にしてください！

https://qiita.com/ffzzyy/items/f29fb50ae85f75032f04
未経験からエンジニアになる：OSの違いの影響を知ろう！

未経験からエンジニアになりたい人は、プログラミングから始める人が多いと思いますが、
エンジニアの仕事は、プログラミングだけではありません。そして、プログラミングだけでは、エンジニアになれません。同時にプログラミングが苦手でも、システム構成や開発の流れを理解するとエンジニアに近づきます！
今回はOS（オペーレーターシステム）の違いの影響について調べてみましょう！
全開のOSのちがいの記事はこちらです。
https://qiita.com/k1morikawa@github/items/b7a1d671f6fd9e389422

![インスタスライド_202301032.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/17160650-f3e6-8256-6341-037549c8ee2f.gif)


# OSの種類
Windows/Mac/Linux等ありますが、OSの種類により色々とあります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/688e54cb-1227-05e4-52f3-63ed774dd02a.png)

# 文字コードが違う

・Shift_JIS
　Windowsで使われている文字コード

・UTF-8
　最もメジャーな文字コード、mac等

・EUC-JP
　Linux、Unix等で利用されてきた文字コード

# 文字コードって何？
　文字コードは日本語等のアルファベット以外の文字に対応するもの

日本語を表現するために色々と文字コードの違いにより文字化けが発生します

# 文字コードはいつ見る？
テキストファイル（プログラムソース）やCSVファイル等は注意が必要
Excelでも保存時に選択できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/f72ba576-7fc7-c4c3-cc57-0de511f6cd3f.png)

# 改行も違う
改行コードは二つの種類がある「キャリッジリターン 」(CR)と「ラインフィード」 (LF) 

Linuxでは「LF」
Macが「CR」
Windowsは「CR+LF」

プログラムでも ¥r¥nで表現

# まとめ

ー　OSにより文字コードが違う
ー　日本語等の文字を扱うために必要
ー　Shift_JIS,UTF-8,EUC-JP等がある
ー　OSにより改行コードも違う

# 最後に
未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
【Python】文字列の数字をint()で数値に変換する時、引数に空文字やNoneが入ってきた場合エラーを回避する方法

# 背景
可変で流れてくる文字列の数値をint()で数値に変換して変数に格納するという処理をコーディングしていた。
この文字列の部分が稀に空文字で流れてくることもあり、その場合int()でエラーが発生してしまうことがわかったのでエラーの回避方法があるか調査してみた。

## この記事を読むとできるようになること
int()で引数に空文字やNoneが渡された場合、エラーを回避してデフォルト値を返却できるようになる。

## まずは調べてみた
ググった結果、知りたかったことが書いてるサイトを発見！！
こちらの記事を参考に、実際に試してみる。

https://gammasoft.jp/support/python-error-str-convert-to-int/#:~:text=0%5D))%0A40-,%E7%A9%BA%E6%96%87%E5%AD%97%E3%82%84None,-%E7%A9%BA%E6%96%87%E5%AD%97%E3%82%84None

## 記事を元に試してみる

### int()に空文字やNoneを渡して実行してみる
```terminal
>>> print(int('1'))
1

>>> print(int(''))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: invalid literal for int() with base 10: ''

>>> print(int(None))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: int() argument must be a string, a bytes-like object or a number, not 'NoneType'
```
普通にやったら、文字列の数字は変換できるけど空文字やNoneが来るとエラーになる。


### int()にorとデフォルト値を設定して実行してみる
```console
>>> print(int('1' or 0))
1
>>> print(int('' or 0))
0
>>> print(int(None or 0))
0
```
orとその後にデフォルト値として返却したい整数を指定することで
空文字やNoneが引数に渡されてもエラーになることなく指定したデフォルト値が変えるようになった！

ちなみにorの左辺右辺の値を空文字にしてみるとエラーになる。
```console
>>> print(int('' or ''))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: invalid literal for int() with base 10: ''
```

どうやらこんな動きをしてそう。
1. orの左辺の値をチェックしてTrueならその値をint()で変換、Falseなら右辺の値を確認する。
2. 左辺がFalse判定されたら右辺も同じように確認して、Trueなら右辺の値をint()で変換、Falseならエラーを返却。


## まとめ
int()で文字列の数字を数値へ変換する時に、引数に空文字やNoneが入ってくるような処理を
書いてた場合、orを活用してエラーを回避できる仕組みを考えて対処する。
paizaラーニング「さまざまな長さの配列の和 Python3編」

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__various_row_sum

この問題、結構考えたのですが、解りませんでした。

#### 解答例
```Python:Python3
n = int(input())

for _ in range(n):
    k_a = [int(i) for i in input().split()]
    k = k_a[0]
    a = k_a[1:]
    s = 0
    for i in range(k):
        s += a[i]
    print(s)
```
アダプティブカードで選択肢を動的に変更する

# 概要
1. SharePointのリストからデータを取ってくる
1. 取得したデータをアダプティブカードに選択肢として埋め込めむ

**PowerAutomate** × **アダプティブカード**を絡めて、
上記を実装しようとした際にハマったので、備忘録として残します。

# SharePointリストのデータ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130969/10f2b866-ab54-3766-fe33-eafd6130c08a.png)
組織情報なので、部署名が変わったすることがある。
その際にアダプティブカードを直接変更したりうするのは手間。
→このSharePointから最新の情報を毎回取得する。
※有効のフラグを作成してますが、今回の記事では取得するデータの制御については扱いません。

# ハマった箇所
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130969/e4dc50aa-05e1-26d0-b111-4da7b71ea369.png)
上記のように「\」が所々に挿入されてしまって、うまくアダプティブカードに埋め込めない。

# コーディング

## 1. SharePointリストからデータを取得
SharePointリストから「複数項目の取得」でデータを取得

## 2. 変数定義
- 「変数を初期化する」で変数を定義
- 種類は「アレイ」を選択

## 3. 配列変数に追加（選択肢を作成）
ループを回して、上記で定義した配列変数に追加していく
- title：表示名に該当するものを選択
- value：後で更新やIDを引っ張れるようにIDにしておくと後で楽
- 注意：「concat関数」で結合しようとすると、上手くいかないので（下記のように）直接変数内で定義する
```
{
  "title": "@{items('Apply_to_each')?['Title']}",
  "value": "@{items('Apply_to_each')?['ID']}"
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130969/92ba9a1c-0843-069f-76a0-d62817df1571.png)

## アダプティブカードへ挿入
今回、動的選択肢にさせたい「Input.ChoiceSet」の「choices」の値として挿入
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130969/9961509f-0a57-56a3-9337-ffc82a52cf48.png)

## 最後に投稿して確認
問題なければ、かきのように選択可能になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130969/8c4566a6-38d5-0c72-4c9c-0ba48ae63c2c.png)
【dart】ElevatedButton.styleFrom()でボタン背景色を白にするには


# backgroundにwhiteを指定するだけだと白背景にならない


```dart
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.black,
    backgroundColor: Colors.white,
  ),
  child: const Text('whiteButton'),
)
```

上のコードをビルドすると下のような感じになる。若干ピンク？

![スクリーンショット 2023-01-19 1.49.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262342/a00f59ce-6cd7-9bb5-b7cd-fdb10eeca20c.png)

# 純白にしたい

## styleFromの仮引数

```dart
static ButtonStyle styleFrom({
    Color? foregroundColor,
    Color? backgroundColor,
    Color? disabledForegroundColor,
    Color? disabledBackgroundColor,
    Color? shadowColor,
    Color? surfaceTintColor,
    double? elevation,
    TextStyle? textStyle,
    EdgeInsetsGeometry? padding,
    Size? minimumSize,
    Size? fixedSize,
    Size? maximumSize,
    BorderSide? side,
    OutlinedBorder? shape,
    MouseCursor? enabledMouseCursor,
    MouseCursor? disabledMouseCursor,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? tapTargetSize,
    Duration? animationDuration,
    bool? enableFeedback,
    AlignmentGeometry? alignment,
    InteractiveInkFeatureFactory? splashFactory,
    @Deprecated(
      'Use backgroundColor instead. '
      'This feature was deprecated after v3.1.0.'
    )
    Color? primary,
    @Deprecated(
      'Use foregroundColor instead. '
      'This feature was deprecated after v3.1.0.'
    )
    Color? onPrimary,
    @Deprecated(
      'Use disabledForegroundColor and disabledBackgroundColor instead. '
      'This feature was deprecated after v3.1.0.'
    )
    Color? onSurface,
  })
```

## surfaceTintColorが怪しそうな名前をしているので白にしてみる

```dart
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.black,
    backgroundColor: Colors.white,
    surfaceTintColor: Colors.white,
  ),
  child: const Text('whiteButton'),
)
```

するとこうなった。

![スクリーンショット 2023-01-19 1.55.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262342/4cc89c41-2d60-cc6a-eb4f-e59bc6e955ba.png)

真っ白！めでたし。
こんなに純白が似合うのはナミさんか米くらいだ。


# 教訓

**AndroidStudioのFindUsage便利。**


深夜で眠くて雑な記事ですみません。
MacでHeroku runしたときに「Error: connect ETIMEDOUT」が出たときの対処

## 現象
Heroku CLIで```heroku run```しようとすると、```Error: connect ETIMEDOUT```と出て詰まる。

〔ターミナル〕
```
$ heroku run hoge
Running hoge (略)  
Error: connect ETIMEDOUT <IP Address>:5000
```

## 発生条件

* macOS v12 Monterey以上

## 原因と対処法
https://qiita.com/Moo_Moo_Farm/items/7b68ca43cb7370cfcfc8

* 上記のように、`heroku run:detached`を使うと良いと検索でヒットする。
    * しかしコンソール出力を受け取れないため、コマンドラインアプリケーションを実行するのに困ってしまう。

* 上記の記事に注目
    >```「heroku run」```の仕組みは，クライアントの5000番ポートでHerokuに接続することにより，クライアント側のコンソールに対してコマンドの入出力を実行可能にするものである。

* 公式にも書いてある

https://devcenter.heroku.com/ja/articles/one-off-dynos

> ```heroku run```​ コマンドにより、Heroku への接続がポート 5000 で開きます。

* 一方、

https://www.keisuke69.net/entry/2021/10/29/012608

>Montereyの新機能の一つにAirPlayのレシーバーになれるというものがある。

>これが5000番ポートを使ってListenするようになったのだ。

* つまり、MacOSが5000番ポートを予約しているので```heroku run```とバッティングしてしまうというわけ。

* **AirPlay Receiverを使わない場合、オフにすれば```heroku run```が正しく動作すると思われる。** 

以上
cloud_sql_proxy が Docker で bind: invalid argument を吐くときの対処法

## 現象

GCP の Cloud SQL に接続する際の選択肢の一つとして多用される Cloud SQL Auth Proxy は、公式の Docker イメージが配布されておりどんな環境でも簡単に実行することができます。


https://cloud.google.com/sql/docs/mysql/connect-auth-proxy


```docker-compose.yml
version: '3'

services:
    cloud-sql-proxy:
        image: gcr.io/cloudsql-docker/gce-proxy:latest
        volumes:
          - ./cloudsql:/cloudsql
        restart: always
        command: "/cloud_sql_proxy -instances=project-id:region-name:instance-name -dir=/cloudsql"
```

ただ、同じ docker-compose を走らせているはずでも、一部の環境でのみ以下のようなエラーが発生することがあります。

```
listen unix /cloudsql/project-id:region-name:instance-name/.s.PGSQL.5432: bind: invalid argument
```

## 原因

`bind: invalid argument` エラーは、UNIXドメインソケットのパスが「長すぎる」場合に起こります。
一般に、UNIXソケットのパス文字列の長さは`104chars`までと決まっているようです。

https://github.com/GoogleCloudPlatform/cloud-sql-proxy/issues/747

https://unix.stackexchange.com/questions/367008/why-is-socket-path-length-limited-to-a-hundred-chars/367012#367012

ここで気をつけなければならないのは、「ホスト側のUNIXドメインソケットのフルパスもこの制約を受ける」ということです。

つまり、

```
/cloudsql/project-id:region-name:instance-name/.s.PGSQL.5432
```

仮にこのパスの長さが`104chars`を超えていなくても、

```
/Users/taro-yamada/Documents/dev/my-awesome-company/my-awesome-project/cloudsql/project-id:region-name:instance-name/.s.PGSQL.5432
```

ルートからの絶対パス、長くないですか？これを短くすればエラーは解決します。

## 解決

この問題を解決する方法は主に二つ（思いつく限り）です。

### ① プロジェクトの階層を浅くして、ディレクトリ名を短く

力技ですがw、デバッグ時はこれで無理やり動作検証しました。

### ② ソケット名をカスタマイズ

後から気づいたのですが、`./cloud_sql_proxy -help` に以下のような記述がありました。

```
To set a custom socket name, you can specify it as part of the instance
string.  The following example opens a unix socket in the directory
specified by -dir, which will be proxied to connect to the instance
'my-instance' in project 'my-project':
    -instances=my-project:my-region:my-instance=unix:custom-socket-name
```

というわけで、インスタンス名の後ろに `=unix:hogefuga` を付加してあげれば、長いソケット名を使わずに済むようですね。

うーんなんかどっちも対処療法的な気がしますが、UNIXソケットをプロジェクトフォルダ内に収めておきたいのであれば、対処法はこれくらいでしょうか。

初出時に半日ほど溶かしてしまったので、備忘録としてメモしておきます。
SQLiteデータベースからSupabaseに切り替え中に起きた出来事(エラー)

業務でprismaいじるため、
https://reffect.co.jp/node-js/prisma-basic#SupabasePostgreSQL
に沿っていじっていた時の出来事である。

・.env
・schema.prisma
に必要事項を記載し、

npx prisma migrate dev --name init
叩いた時である。


```
Error: db error: ERROR: canceling statement due to statement timeout
   0: migration_core::state::DevDiagnostic
             at migration-engine/core/src/state.rs:264
```
と言ったエラーが出た。

調べた結果。
何らかのサーバ側のタイムアウト処理で止められた。。。。？と思ったが、テーブル一つしか作ってないし、レコードも多くないしなーと思って調査続行。

https://github.com/prisma/prisma/issues/16853
の外人さんたちの会話をのぞいていたら解決方法発見。

```
#.envファイル
SHADOW_DATABASE_URL="DATABASE_URLのリンクと同じ"//追加
```

```
#schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")//追加
}
```

上記2ファイルに記載後再度　
npx prisma migrate dev --name initしてみると

```
Applying migration `20230118152406_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20230118152406_init/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (4.8.1 | library) to ./node_modules/@prisma/client in 46ms
```
できた。

なぜ解決したかよくわかっていません。優しいかた教えていただけると幸いです。