OmniAICreator/Qiita-1.07M huggingface dataset:
AtCoder Beginner Contest 297

# AtCoder Beginner Contest 297をpythonで解いてみた

# はじめに
今回はA,B,C,Dの4完で入茶しました！
時間あれば入茶の記事かきまふ。

# A問題 A - Double Click
https://atcoder.jp/contests/abc297/tasks/abc297_a
```python:a.py
def find_first_double_click(N, D, click_times):
    for i in range(N - 1):
        if click_times[i + 1] - click_times[i] <= D:
            return click_times[i + 1]
    return -1
 
N, D = map(int, input().split())
click_times = list(map(int, input().split()))
 
result = find_first_double_click(N, D, click_times)
 
print(result)
```
A問題で解説することないので飛ばします、、、

# B問題 B - chess960
https://atcoder.jp/contests/abc297/tasks/abc297_b
```python:b.py
def is_chess(s):
    b_positions = [i for i, c in enumerate(s) if c == 'B']
    if len(b_positions) != 2 or b_positions[0] % 2 == b_positions[1] % 2:
        return "No"
 
    k_position = s.index('K')
    r_positions = [i for i, c in enumerate(s) if c == 'R']
    if len(r_positions) != 2 or not (r_positions[0] < k_position < r_positions[1]):
        return "No"
 
    return "Yes"
 
S = input().strip()
 
result = is_chess(S)
 
print(result)
```
今見返すとこんなことしないでも愚直にやってよかったと反省してます、、。
これも解説することないので飛ばします、、
# C問題 C - PC on the Table
https://atcoder.jp/contests/abc297/tasks/abc297_c
```python:c.py
H,W = map(int,input().split())
mazes = [list(input()) for _ in range(H)]
for h in range(H):
    for w in range(W-1):
        if mazes[h][w] == "T" and mazes[h][w+1] == "T":
            mazes[h][w],mazes[h][w+1] = "P","C"
for maze in mazes:
    print("".join(maze))
```
問題文で操作回数を最大化と言ってますが、前から順にやれば大丈夫です。

# D問題 D - Count Subtractions
https://atcoder.jp/contests/abc297/tasks/abc297_d
```python:d.py
def solve(a, b):
    count = 0
    while b:
        count += a // b
        a, b = b, a % b
        # print(f"a = {a} b = {b}")
    return count - 1
 
A, B = map(int, input().split())
 
count = solve(A, B)
 
print(count)
```
この問題は愚直にやったらTLEになりました。。。。なので入力例1のA=3,B=8のとき
A=3,B=(8-3)=5
A=3,B=(5-3)=2
A=(3-2)=1,B=2
A=1,B=(2-1)=1
の4回とやるよりも
8=3*2+2なので
カウントに２を足す。そして
A=3,B=(8-3x2)=2とやるのかなって考えました。けどよくよく考えたら
A=3,B=(8%3)=2というふうにあまり(A%B(A>B))になると言うことがわかり、このやり方なら
間に合うのでは？と思い実装しました。やることは単純なので苦労することはなかったです。
見事ACでした。

# 最後に
D問題まで24分で解けたのでE問題も解きたかったのですが、手も足も出ず、、
G問題はサンプルのテストケースはACだったのですがWAが11個もでて萎えました、、
E問題も解けるように精進していきまふ。
Scala3でマクロを使ってスタブを自前実装してみる

# TL;DR

Scala3のマクロ周りの勉強を兼ねて、トレイトをスタブするようなマクロを作ってみました。
日記的な内容の記事です。

ソースコード:
https://github.com/cacapouh/macromock

# 作ったもの

マクロを使って、任意のトレイトのインスタンスを生成します。
ただし、実装のないメソッドは`throw new NotImplementedError()`で自動的に実装します。

例えば、以下のようなトレイト定義があった場合、

```scala
case class Hoge(id: Int)
trait HogeRepository {
  def findX(id: Int): Hoge

  def defaultImpl(id: Int) = 1
}
```

以下のようにマクロが展開されるようにしました。

```scala
// StubFactory.stub[HogeRepository]のマクロ展開結果
{
  class StubTargetImpl extends java.lang.Object with example.HogeRepository {
    def findX(id: scala.Int): example.Hoge = throw new scala.NotImplementedError("Not stubed")
  }

  (new StubTargetImpl(): example.HogeRepository)
}
```

単体テスト等では、以下のようにスタブ対象のトレイト`HogeRepository`をミックスインしたトレイト`DummyHogeRepository`を定義し、
`DummyHogeRepository`内でスタブしたいメソッドをオーバーライドすると、実用性がありそうです。

```scala
trait DummyHogeRepository extends HogeRepository {
  // ここでスタブしたいメソッドをオーバーライドしてやる
}
val stubed = StubFactory.stub[DummyHogeRepository]
```

# デモンストレーション

```scala
case class Hoge(id: Int)
trait HogeRepository {
  def findX(id: Int): Hoge
  def defaultImpl(id: Int) = 1
}

@main def test: Unit = {
  trait StubedHogeRepository extends HogeRepository {
    // ここでスタブしたいメソッドをオーバーライドする
  }

  val stubed = StubFactory.stub[StubedHogeRepository]
  println(stubed.defaultImpl(111)) // 1
  println(scala.util.Try(stubed.findX(1))) // Failure(scala.NotImplementedError: Not stubed)
}
```

# 感想など

APIドキュメント適当に読みながら雑に実装してみましたが、APIが結構便利で簡単にマクロが作れるという印象を受けました(小並感)

* 今回使った主なAPI
  * [SymbolMethods](https://www.scala-lang.org/api/3.1.3/scala/quoted/Quotes$reflectModule$SymbolMethods.html)
  * [Symbol#newClass](https://www.scala-lang.org/api/3.1.3/scala/quoted/Quotes$reflectModule$SymbolModule.html#newClass-f47)
  * [ClassDefModule#apply](https://www.scala-lang.org/api/3.1.3/scala/quoted/Quotes$reflectModule$ClassDefModule.html#)
  * [DefDefModule#apply](https://www.scala-lang.org/api/3.1.3/scala/quoted/Quotes$reflectModule$DefDefModule.html#)

...と、雑に作ったので、一応スタブとして動きはするものの、
現状では、`def hoge(x: Int)(y: Int)`みたいなカリー化されたメソッドや`def fuga: Int`のような引数なしのメソッドに
対応していなかったりとハリボテ感が満載な状況です。
ChatGPTの社内導入をChatGPTに手伝ってもらう②〜事前壁打ち編〜

前回の記事：

お疲れ様です。素晴らしい唐揚げです。

ChatGPT、そろそろ会社で使えるようになりましたでしょうか？誰も動かないようでしたらあなたが率先して動きましょう。そのための手伝いはChatGPTがやってくれます。無料でも。
というわけで、今回はその社内導入に向けて、提案準備を手伝ってもらいます。
また、「深津式プロンプト」と呼ばれる方法を試しに使ってみました。

Q:
>命令書:
あなたは会社の取締役です。
以下の制約条件と提案をもとに、提案を承諾するための質問を出力してください。
制約条件:
• 文字数は300文字程度。
•重要なキーワードを取り残さない。
•文章を簡潔に。
提案：
社内にChatGPTというAIサービスを導入したいです。 目的はChatGPTによる業務の効率化です。

A:
>出力文：
ChatGPTの導入に関して、以下の質問をお聞きしたいと思います。
ChatGPTの導入によって、どのような業務の効率化が見込まれますか？
ChatGPTはどの程度の学習期間を必要としますか？
ChatGPTの導入によって、どのような費用がかかりますか？また、ROIはどの程度見込めますか？
ChatGPTの導入による社内のセキュリティについて、どのような対策が必要ですか？
ChatGPTを導入することによる社員への影響やトレーニングの必要性について、どのような見解をお持ちですか？
以上の点について、お聞かせいただけますでしょうか。

なるほど。
いかにもそれっぽいですね。
では、これに答えるためにまたChatGPTに聞く……としたいところですが、
あくまでも相談ができる、正しい解答を求めてはいけない、というのがChatGPTの（とりあえずは）良い使い方かな、と思います。

公式情報が載っている部分の解答は後ほど追記したいと思います。

この記事でもって「ChatGPTの社内導入をChatGPTに手伝ってもらう」シリーズを終了します。
ChatGPT、今後どうなるかはわかりませんが、とにかく早く使い始めてみるに越したことはなさそうです。
まだ社内で使えない状態の方は、ためしに上長に、この記事で記載したような内容をもとにかけあってみませんか？
テレワークで私用端末でコソコソ使うのも効率悪いですし……
SpringBoot × Vue3 × Vite × TypeScript の環境を構築した

## 概要
バックエンドをSpringBoot、フロントエンドをVue3.js × VueCLI × JavaScriptで開発していました。
しかし、次の理由からビルドツールをVueCLIからViteに、言語をJavaScriptからTypeScriptに切り替えました。

### なぜViteに切り替えたのか
VueCLIのビルドスピードにストレスを感じ始めたからです。開発では膨大な回数ビルドするので、1回のビルドにかかる時間をできるだけ短くしたいと考えました。

### なぜTypeScriptに切り替えたのか
Javaをメインで触っていることもあって、JavaScriptみたいに型の制限が緩い言語よりも型をちゃんと宣言する言語を使いたいと考えました。



## 環境
### ツール
- SpringBoot
    - Eclipse
- Vue3.js
    - VSCode

### バージョン
- node
    - 18.15.00
- npm
    - 9.6.3


## インストール
まず、SpringBootのプロジェクトがあるディレクトリまで移動します。特に設定を変更していなければ、``workspace``ディレクトリの下にプロジェクトと同じ名前のディレクトリがあると思います。
プロジェクトのディレクトリまで移動したら、[ドキュメント](https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B)に従って次のコマンドを実行します。
```sh
npm create vite@latest frontend -- --template vue-ts
# npm create vite@latest [プロジェクト名] -- --template [テンプレート名]
```
実行が完了すると次のメッセージが出力されます。
```sh
Done. Now run:

  cd frontend
  npm install
  npm run dev
```
メッセージに書かれてある通りにコマンドを実行していくと、次のメッセージが出力されます。
```
> frontend@0.0.0 dev
> vite


  VITE v4.2.1  ready in 611 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
```
試しに http://localhost:5173/ に飛んでみると、Viteの画面が出てきました。これでインストールは完了です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664008/dc272567-f423-aac8-ebac-704c3d7a39ce.png" width=300>



## ビルド先の変更
[ドキュメント](https://ja.vitejs.dev/config/build-options.html)に従って、``vite.config.ts``を次のように編集します。
```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // これを追加
  build: {
    outDir: '../src/main/resources/static', // ビルド先
    emptyOutDir: true,
  },
});
```
``emptyOutDir``は無くても構いませんが、これを設定しないとビルドするたびに警告が出ます。
編集が終わったら実際にビルドしてみます。
```sh
npm run build
```
SpringBootの``src/main/resources/static/``にフォルダやファイルが生成されていたら成功です。

## 終わりに
やってみると意外と簡単にできました。
次はJavaScriptからTypeScriptに移行したときに、どのようにコードを書き替えたのかを記事にしようと思います。
【VSCode】Markdownlintの使用方法

## Markdownlintとは

Markdownlintを使用することでMarkdownの構文とスタイルをチェックできます。

## インストール

Markdownlintをインストールします。

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

## 基本的な使い方

### 指摘事項の確認

ルールに違反している箇所は以下の画像のように指摘されます。  
![image220824_113645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/58900894-458a-b375-da30-c8dd2a7b843f.png)

指摘されている箇所にカーソルを合わせることで指摘事項を確認できます。
![image220824_113807.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/a5683e71-bc0e-559b-2cab-4f27e1b4845e.png)


### クイックフィックス

画面に表示された青い電球マークをクリックすることでクイックフィックスを利用できます。
![スクリーンショット 2022-08-24 午前11.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/ecc44a77-b6a0-0942-92ca-0acc3ff7defd.png)


## ルールの設定

ルールの設定を自分で行うことができます。
設定には以下の方法があります。

- `.markdownlint.jsonc`または`.markdownlint.json`に記述
- `.markdownlint.yaml`または`.markdownlint.yml`に記述
- `.markdownlint.cjs`に記述
- `setting.json`に記述
  
`setting.json`に記述する場合には以下のようにします。  

まず`cmd + shif + p`でコマンドパレットを開きます。  
`Preferences: Open User Settings (JSON)`を実行し`setting.json`を開きます。  
`setting.json`に以下を追記します。  

```setting.json
  "markdownlint.config": {
    "MD033": false
  }
```
ルールの種類については以下のページをご参照ください。

https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md

## 保存時に修正する

`setting.json`に以下のように記述することでファイル保存時に指摘事項を修正できます。

```setting.json
  "[markdown]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    }
  }
```
【PWA】OneSignalを使ってPush通知を送る。

## はじめに
今回はPWAのアプリにPush通知を送ってみようと思います。
Push通知のサービスはFirebaseとOneSignalで迷いましたが、Firebaseは開封数が記録されないという謎現象に陥ったのでOneSignalを採用しました。
PWAのベースは前回の記事をご確認ください。
https://qiita.com/mojapico/items/bb27b9ff1dd5e93b1e23

### 前準備
OneSignalにアカウント登録を行い、OneSignalSDKWorker.jsをダウンロードします。（登録の仕方は別の方の記事を確認してください。）
それと、「Add Code to Site」部分のコードをコピーしておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/5926a6e5-9ada-af2f-5db0-5b45c0fbbe06.png)



### src
ファイル構成は↓です。
OneSignalSDKWorker.jsはOneSignalからダウンロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/5ec115b2-ae27-6e37-8568-038dd577319d.png)

先ほどコピーしておいたコードindex.htmlのheadに張り付けてください。
```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="manifest" href="manifest.json"/>
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" defer></script>
  <script>
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
      OneSignal.init({
        appId: "×××××",
        safari_web_id: "×××××",
        notifyButton: {
          enable: true,
        },
      });
    });

  </script>
  </head>
  <body>

    <p>タスク管理アプリ</p>
    <button onclick="test()">ボタンクリック</button>

    <script>

      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('./sw.js').then(function(registration) {
          }, function(err) {
          });
        });
      }
    </script>

    <script>
      function test(){
        OneSignal.getUserId().then(function(userId) {
          console.log("OneSignal User ID:", userId);   
          });
        }
    </script>

  </body>
</html>
```
こちらはそのままで大丈夫です。
```javascript:OneSignalSDKWorker.js
    importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');
```

### アプリ
起動後にデベロッパーツールで確認するとUserIDが取得できると思います。
UserIDを通知のAPIで指定してリクエストすると個人宛にPush通知が届きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/af9204b3-fefe-d2dc-e2b1-34b93b4328c8.png)

### 通知のAPI
今回はPostmanを使ってリクエストを実行しました。
リクエストメソッド：POST
◆Header
 Authorization:"Basic　×××××"　←OneSignalのRest API Keyです。
 accept:application/json
 Content-Type:application/json

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/331d7a3a-ea73-0d93-be1f-3b21a81bdab7.png)

◆body

include_player_idにはデベロッパーツールに表示されているUserIDを張り付けてください。
app_idはOneSignal App IDです。Rest API Keyと同様にOneSignalからそのままコピーしてください。
```json
{
  "include_player_ids": [
    "×××××"
  ],
  "contents": {
    "en": "こんにちは"

  },
  "name": "はじめまして",
  "app_id":"×××××"

}
```

↓送った結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/a8a15da9-8858-f5af-3df5-096a35febc56.png)


## おわりに
OneSignalだと管理ページからPush通知の開封率等を確認することができるので非常に便利だと思います。
他にもPush通知を受け取ったユーザーのOSも確認できたりと様々です。
個人的にFireBaseよりOneSignalのほうが使いやすい印象です。
ただし、OneSignalの管理ページやドキュメントは日本語に対応していないので、和訳サイトを使って解読する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/822c5ff8-abe7-fbe5-07bf-f420e2712c6b.png)
配列の長さ

某サイ本に書いてあった内容で、読んでいて面白かったので書き残します。

全ての配列はlngthプロパティを持っていて、lengthプロパティは配列中の一番大きなインデックスより1だけ大きな値になります。
```js
[].length // 0
['a', 'b', 'c'].length; //3 一番大きなインデックスは2。lengthは３。
```
配列が疎の場合、lengthプロパティの値は要素数よりも大きくなります。lengthプロパティについて言えることは、lngthプロパティは配列の全ての要素のインデックスよりに必ず大きくなります。配列が疎であるかどうかにかかわらず、lengthの値以上のインデックスの要素を持ちません。配列は2つの特殊な振る舞いをします。1つ目は配列の現在のlength以上のインデックスを指定して配列の要素に値を設定した場合、lengthプロパティはi+1に設定されること。2つ目は、lengthプロパティに現在の値より非負数の整数nを設定した場合、n以上のインデックスを持つ配列の要素は配列から削除されることです。
```js
a = [1, 2, 3, 4, 5];
a.length = 3;
a.length = 0; // a = [] と同じ
a.length = 5; // new Array(5) と同じ
```
配列のlengthプロパティを、現在値よりも大きな値に設定することもできます。

#### 勉強した本
 https://www.amazon.co.jp/JavaScript-%E7%AC%AC7%E7%89%88-David-Flanagan/dp/4873119707/ref=pd_vtp_h_pd_vtp_h_sccl_1/355-2445868-3340539?pd_rd_w=KHMrD&content-id=amzn1.sym.cbe5b1af-8663-4a63-8153-1f9ef8eb65e4&pf_rd_p=cbe5b1af-8663-4a63-8153-1f9ef8eb65e4&pf_rd_r=VF8AQD4RCJP82KSDGR3H&pd_rd_wg=XcFn3&pd_rd_r=2060a448-5d21-4cb0-aabd-307547298a54&pd_rd_i=4873119707&psc=1
Terraform基本的な説明

## 記事の目的
- Terraformについての学習備忘録用
- TerraformでAWS環境構築までのフローの振り返り用

## 記事の概要
- Terraformとは？
- Terraformを使用する前提条件
- Terraformインストール(tfenv)
- Terraform基本ファイル
- Terraform基本コマンド

[こちらでTerraformでAWS環境構築（VPCとサブネット）まで](https://qiita.com/pikimaru/items/4b4196aa906781d4acd9)についてもまとめているので、よければ見てみて下さい:raised_hands:

## Terraformとは？
>HashiCorpが開発しているインフラ構成をコードを使って管理するためのツールです。
HCLという記法でコードを記述し、インフラの状態を管理することができます。
Terraformは IaC(Infrastructure as Code) を実現するツールのこと
サーバーやネットワークといったインフラの構成をプログラムのコードで書いて、書いたコードを元にインフラを構築することができます。

わかりやすくいうとコードで構築するものを書いてあげるとコマンド叩くだけで、AWSなどの環境をすぐに構築できる便利なものになるかと思います。
また、コードで管理しているので前作った環境なんだっけ:thinking:？みたいにならずコードを見れば構築した内容を確認することができ、コマンドを叩けば同じものを構築できる素晴らしいものですかね！
つまり1回作成しちゃえば同じ環境をいくらでも短時間で作れちゃいますね

>![スクリーンショット 2023-04-27 22.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/df236cda-3a67-ec86-4a1f-4da1e8b2333e.png)
引用元[【Terraformとは？】Terraformによるインフラ管理のメリットを解説](https://rabiloo.com/ja/blog/infrastructure-terraform)

## Terraformを使用する前提条件
TerraformでAWS環境を構築するには最低でも以下の前提条件があります
- Terraform CLIをインストールしていること
- AWS CLIをインストールしていること
- AWS accountと関連する認証情報でリソースが作成できる状態にあること

## Terraform基本インストール
### `tfenv`をインストール
`tfenv`をインストールしてから`tfenv`を使用してTerraformをインストールすることでバージョンをすぐに切り替えられるので
まずは`tfenv`を下記コマンドでインストールします
```zsh
brew install tfenv
```
インストール可能なバージョン一覧を確認
```zsh
 tfenv list-remote
```
私の場合下記のように表示されました（どんどん更新されるので人によって異なります）
```
1.5.0-alpha20230405
1.4.6
1.4.5
1.4.4
1.4.3
省略〜〜〜〜〜〜〜〜〜
```
### Terraformをインストール
最新と一個前をインストール
```zsh
tfenv install 1.4.6
tfenv install 1.4.5
```
インストールされたバージョンのリスト確認
```zsh
tfenv list
```
今回は下記コマンドで最新の方を使用していきます
```
tfenv use 1.4.6
```

## Terraform基本ファイル
### `.tf`ファイル
AWSプロバイダー情報(IAM情報・リージョンなど)を記載する
### `.tfvars`ファイル
環境ごとに異なる値を記載する
### `.tfsatate`ファイル
Terraformで管理しているインフラソースをすべて記載されているJSONファイルで
AWSだとS3のバケット内で管理されている
JSON形式で記載されているが拡張子は`.tfsatate`になり`terraform.tfsatate`のような感じ

## Terraform基本コマンド
### `terraform init`
初めに必ず実行する必要があります。
ワークスペースの初期化やプラグインがダウンロードされる

### `terraform plan`
変更内容が表示されます。
コードを作成、変更した場合は、terraform planすることで実行内容に問題ないかを確認します。

### `terraform apply`
変更を実行します。ここで完了すると、実際にAWSにリソースが構築されます。
変更内容が表示されるので、問題なければyesを入力します。

### `terraform destroy`
リソースを破棄します。
破棄対象のリソースが表示されるので、問題なければyesを入力します。

### `terraform fmt`
インデントなどのスタイルをフォーマットするためのコマンドです。
インデントなどのずれを直してくれるので、実行しとくと良い

### `terraform validate`
構文をチェックするためのコマンドです。
`terraform apply`でもエラーは表示されるので、念の為実行する感覚で良さそう
入緑目前

こんにちは。hiroyuk1（hiro1729）←どっちでもいいか　です。ABC300に参加しました。結果は、4完2ペナで1548位でした。パフォーマンスは1199、レーティングは724→785となりました。

A問題(Diff:8)は、Pythonで解きました。for文を使って普通に解きました。B問題(Diff:353)は、Pythonで解きました。ちょっと実装が大変な問題でした。(487Byte) C問題(Diff:534)は、Pythonで解き、2ペナでした。1回目は、バツ印を先に作ってから合っているか確認しました。TLEになったので、2回目は、それをバツ印を作らずに確認しましたが、TLEになったので、3回目は合わなかったらすぐにbreakする方針で行きました。それでACになりました。D問題(Diff:908)は、得意な整数問題で、C++で解きました。電卓でaの上限を計算し、それからbとcを条件に合うように探しました。一発ACでした。E問題(Diff:1354)は、確率で考えましたが、解けませんでした。解説を読むと、DPでした。

今度は水Diffを出して入緑できるように頑張ります。
【React学習 #1】 Reactとは何か

# はじめに
この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

# 参考
[React公式サイト](https://ja.legacy.reactjs.org/)
[State of JavaScript 2022](https://2022.stateofjs.com/ja-JP/)

# Reactとは
Reactとは、Meta社（旧Facebook社）によって開発されたWebサイトのUI構築のためのJavaScriptライブラリ（≒フレームワーク）です。React.jsと呼ばれることもあります。
React以外の代表的なフロントエンドフレームワークとして、Vue.jsやAngularなどがあります。

[State of JavaScript 2022](https://2022.stateofjs.com/ja-JP/)によると、Reactの利用率は82%とフロントエンドフレームワークの中では一番使われています。

# 特徴
[React公式サイト](https://ja.legacy.reactjs.org/)より、Reactの特徴として以下の3つの点を挙げることができます。

* 宣言的なView
「どういう時にどういうView（見た目）になるかを定義し、コンポーネントの変更だけで描画する。」ということでしょうかね。
デバッグしやすくなるというところは、何故そうなるのかいまいちわかりませんでした。

* コンポーネントベース
これはわかりやすいですね。画面に表示される各部分をコンポーネントという単位で作成するということでしょう。
その上で、1つ目の特徴「宣言的なView」でコンポーネントを呼び出して使うといった感じでしょうか。

* 一度学習すれば、どこでも使える
「Reactを使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。」←ほぉ〜、そうなのかって感じですね。


パッと字面だけを見てもどういうことなのかわかりづらい雰囲気がありますね。
Reactのこれらの特徴は、これからコードを書いていきながら学習していこうと思います。

# Single Page Application
Reactのようなライブラリが利用される背景として、SPA(Single Page Application)が普及してきたことがあげられます。
上記の3つの特徴から、ReactはSPAを作るのに向いている技術と言えます。
# 【第一回】React勉強:Reactの開発環境を構築しました。

## 概要

エンジニアを始めたのにポートフォリオサイトが無いのはさみしいなと思ったので作ります。
どうせなら流行りのReactで動的webサイトを作ってみたいと思います。

- 持ってる知識
    - webサーバ関連のインフラ知識

- 基本的なことだけ知っている
    - html
    - css
    - javascript
    - node.js

- 何も知らない
    - React

こんな感じの人間がReactを使ってwebサイトを作ってみたいと思います。

## Reactってなに？
javascriptのフレームワークでサイトを作るのに便利くらいしかReactのことを知らなかったので調べました。

1. コンポーネントベース: Reactでは、UIを再利用可能なコンポーネントに分割して構築します。これにより、コードの可読性と保守性が向上し、開発速度も向上します。
2. 仮想DOM: Reactは、実際のDOMとは別に仮想DOM（Virtual DOM）というメモリ上の軽量なデータ構造を使用して、UIの変更を効率的に管理します。これにより、ページの再描画が最小限に抑えられ、パフォーマンスが向上します。
3. 単方向データフロー: Reactでは、データは親コンポーネントから子コンポーネントへと一方向に流れます。これにより、データの管理が容易になり、アプリケーションの複雑さが抑えられます。

んーよくわかりませんが、触っていってみましょう。

## 導入方法

1. Node.jsのインストール
- reactはNode.jsで動くということがわかりました。まずはnode.jsをインストールします。

Windows
[node.js公式ページ]https://nodejs.org

MacOS
```
brew install node@18.16.0
```

今回は18.16.0のnode.jsを使いました。


2. Reactのインストール
- Reactはnpmでインストールです。

```
npm install react react-dom
```

ここではreact本体とreact-domをインストールしてます。
インストールはこれで終わりです。簡単ですね。

## Reactアプリケーションの作成
- インストールしたReactで早速アプリケーションを作ってみましょう。

```
npx create-react-app "APP名"
```

これでカレントディレクトリにReactのアプリケーションができました。

## サンプルアプリを起動してみましょう

```
cd "APP名"
npm start
```

デフォルトブラウザにロゴがくるくる回転するwebページが出ればＯＫです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3218631/df38614c-472d-d431-46e0-f66624c479f1.png)
明日はフォルダの中身をみて、簡単にカスタマイズしてみようと思います。
Firebase HostingでReactがPage Not Foundになる

# はじめに

ReactをFirebaseに最近よくホストしていたのですが、いつもの手順で行ったときにつまづいてしまったので個人のメモとしてまとめていきます

# 問題

Reactのプロジェクトを以下のコマンドでFirebaseにデプロイしました

```bash
$ npm run build
$ firebase deploy --only hosting
```

`firebase init`をする際にpublicディレクトリは`dist`にしました (ここもミスしやすいポイント)

問題なくデプロイできていそうでしたが以下の画面が表示されました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/0ca2ab32-44cb-9edd-3d2d-060c25b9a5c0.png)

# 解決方法

これは`react-router-dom`が影響していました
このアプリでは`/`にアクセスした際にログインセッションがない場合`/login`に遷移するよう設定しています

FirebaseのURLにアクセスした際にも`test.web.app`にアクセスすると`test.web.app/login`に遷移しました

そこでreact-router-domが悪さをして404になっていました

`firebase.json`に以下を追加することでうまくいきました

```diff_json:firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+     {
+       "source": "**",
+       "destination": "/index.html"
+    }
+   ]
  }
}
```

# おわりに

この問題はおそらくネットにたくさん記事があるのですが、私が検索した際にすぐにQiitaがヒットしなかったので私なりのタイトルで記事をさくせいしてみました

# 参考

https://stackoverflow.com/questions/48826489/react-production-router-404-after-deep-refresh-firebase
Flutterで手書きをする方法(Signature)


# Signature のインストール
以下の文を実行するだけで必要なパッケージは揃います。
```terminal:shell
$ flutter pub add signature
```
これでインストールは完了です。

# 実装
最小構成で実装してみます。
`Signature`ウィジェットにはcontorollerというプロパティが必須です。
そのため
```dart
SignatureController controller = SignatureController();
```
でcontollerを作成して
```dart
Signature(contoroller: contoroller);
```
と渡してあげることで表示されるようになります。
あとはcontorollerで保存やredo, undo, clearなどのメソッドを呼ぶことでSignatureに機能を追加することができます。
```dart:main.dart
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  SignatureController controller = SignatureController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Signature(
      controller: controller,
    ));
  }
}

```
とりあえず、これだけでも画面には表示されます。

![Screenshot from 2023-04-29 22-52-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/3193e120-c87d-6860-95a8-9484b457eb5b.png)

こんな感じです。


## ペンの太さなどの変更

```diff_dart:main.dart
class MyApp extends StatelessWidget {
  MyApp({super.key});

  SignatureController controller = SignatureController(
+    penStrokeWidth: 10,
+    penColor: Colors.black,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Signature(
      controller: controller,
+      backgroundColor: Colors.white,
    ));
  }
}

```

![Screenshot from 2023-04-29 22-54-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729508/7f72bb7b-2463-55ba-7a53-9cef149c5bfd.png)

こんな感じです。

## その他のカスタマイズ

* 大きさ変更
```diff_dart
return MaterialApp(
    home: Signature(
+  width: 300,
+  height: 300,
  controller: controller,
  backgroundColor: Colors.white,
));
```
* 保存 クリア やり直し 先に戻る
```dart
controller.toImage(); //保存(他の保存形式もあります)
contoroller.clear(); // クリア
contoroller.undo(); //　やり直し
contoroller.redo(); // 先に戻る
```
これを呼ぶことで消したり保存したりできます。
これで一通り簡単な手書きを作成することはできると思います。

その他もっと機能がありますが、ここで紹介しきれないので公式ドキュメントを確認してください！
以上です。お疲れ様でした。
ふりかえりを記録できる「Ushiro」をモブプロで作った

![main.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c73b866b-01d6-f038-38ab-aafb6f31101a.jpeg)

# はじめに

今回は友人とGWの初日に1からモブプログラミングでアプリを開発したので内容についてまとめて行きたます。

今回作成したアプリケーションは以下になります

https://github.com/jinwatanabe/ushiro

# どんなアプリ？

今回はふりかえり(レトロスペクティブ)の記録をするためのアプリを作りました
私自身が日々ふりかえりをした記録をスプレッドシートにまとめています

![Fu4oirraUAAEomX.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/3ae11049-f3a7-1002-d4df-73144bb92dd9.jpeg)

これをアプリ化したいなと思い今回作成しました

### 1. ふりかえりログ登録

- 実施日
- ふりかえりに使用したボードのURL
- 情報収集に使った手法
- アイデア出しに使った手法
- ふりかえりのふりかえり(ふりふり)に使った手法
- メモ

を登録することができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/35623e46-ece8-ec08-0adf-0440c2c91e5b.png)

メモはメモアイコンをクリックするとモーダルで表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/238bc452-2b01-853c-958f-c6de7fb15da9.png)


### 2. ログの一覧表示

登録したログは一覧で確認ができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d6b0fbf8-936b-459d-2904-eec1a0080980.png)

### 3. 手法一覧

どの手法を何回行ったかを一覧で表示します
しかし、ここは今回1日のテックデイでは完成しませんでした

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/9dbc2c27-dbb5-0764-d3a6-5c8c2d804af5.png)


自分がふりかえりをしたあとにフィードバックをメモして、次回のふりかえりにつなげたり、やったことのない手法などを確認することができます

### 4. ログイン周り

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d6638850-66af-6401-8091-ce1f0f950a57.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c03727ba-1401-b2aa-b047-67365bc0f9dd.png)

登録するとメールが飛んだり、zodでバリデーションをしたり、アラートをSweetAlertで表示するなど時間がない中でも実装しました

最低限のログイン周りは用意しています

# 使用技術

- TypeScript
- React
- DaisyUI
- supabase
- Vitest
- Firebase

その他: zod, sweetAlert2...

いままでJestで書くことが多かったですが今回はVitestを入れてみました
ほとんど書き心地は変わらない印象でした

# 開発について

今回は1日でアプリを作り、お互いの知っている技術を教え合うコンセプトのもと友人と一緒に3人で9.5時間かけてコーディングをしました (うち休憩は1時間くらい)

すべてをモブプロ、TDDで行い、なるべくクリーンアーキテクチャでコーディングしていきました

私自身が今回の開発で初挑戦することになるのは「DaisyUI」と「supabase」だったのでそちらについてまとめます

### DaisyUI

https://daisyui.com/

TailwindのCSSコンポーネントで普段ChakraUIしか使わない私ですが久しぶりに新しいものを使いました

感想としてはChakuraUIではないような**タブ**などがあり、便利だなと思いました。
またclassNameに書いてCSSを適応できるのはやはり便利だなと思いました。
ChakraUIはとてもよいですが、インポートが大変です。

### supabase

https://supabase.com/

なんだかんだでFirebaseばかりやっていて使っていなかったので今回楽しみにしていました

主にログイン認証とDBで利用したのですが、ほとんどの機能が関数1つでかけてしまうし、ほしいと思う機能がすべて手軽に使えてしまったのでかなり気に入りました
これを味わってしまうとログイン機能をコーディングするの大変と思ってしまいそうです

React×supabse×firebase×ChakraUIなら爆速で開発できることがわかったので、これから個人開発更に捗りそうです

これが今回の開発での大きな収穫でした！

他のメンバーは実践的なTDDやクリーンアーキテクチャについて初めて触れたようですが、1日でかなり多くを吸収できていて、開発中にもメリットを感じていたようなので有意義な1日になったかと思います

# おわりに

今回9時間で実装をしましたが、教える時間などもしっかりとりながら理解することを大事にして最低限の機能まではできたのでリリースして終了しました

修正したいところや足りていないところなどはIssueに追加したのでもし気になる方は比較的簡単な技術でやっているので触ってみてください。プルリクお待ちしております

お互いが知っている技術を織り交ぜながら開発お題を作成して1日で開発するのは充実感があってとてもよかったです。また次も企画してやりたいです

# 参考

https://github.com/jinwatanabe/ushiro

https://daisyui.com/

https://supabase.com/
Snowflake 初期設定：①ACCOUNTADMIN編

[目次に戻る](https://qiita.com/taku_tachibana/items/408686a031b9624e981e)

### ■本記事の目的
Snowflakeのトライアルおよびご契約後の初期設定を行うため
管理者ロールの段階を理解するため

### ■初回ログイン
今回は、新しいWebコンソールSnowsightで実際にやってみます。
アクティベーションを完了すると、初期ユーザーでログインされます。
最初は必ず「ACCOUNTADMIN」から開始されます。
※画像はトライアルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2731433/7b632e1a-e74e-a136-2940-492934a3afcc.png)

### ■システムロール体系の理解
上に行くほど、権限が強いロールと覚えましょう。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2731433/2f86f223-2e3b-55db-61f0-71b62dba2301.png)

### ■システムロールの切替について
▽先に注意点
　ロールごとの役割に応じて、オブジェクトを作成することが必要になります。
　ACCOUNTADMINで、すべて作成すると他のロールへの管理委譲を後で行う必要が出てきます。
　ACCOUNTADMINでしか削除できなくなったりと非常に管理の手数が増えるので
　アカウントレベル以外のことは、下位のロールで作業するようにします。

初期ユーザーでは、Webコンソールのホームで、以下のロールを選択できるようになっています。
※ACCOUNTADMINは、デフォルトで下位のシステムロールを継承しているため
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2731433/86460036-e1b9-383e-acfe-fa2ab8e5dc85.png)

他のロールでの作業は別の記事で紹介いたします。


### ■アカウントレベルの設定：セッション切れの時の自動停止
Webコンソールが切れた時に、ウェアハウスが上がりっぱなしになっていることを
防ぐための設定です。TRUEにするとセッションが突然切れた際に自動で停止されます。
```
use role ACCOUNTADMIN ;
alter account set abort_detached_query = TRUE ;
```
※筆者の経験ですが、別のクラウドツールからSnowflakeにSQLを実行すると、この設定によって
5分後に実行が終了され処理が中断されてしまう事例がありました。適宜ご対応ください。

### ■アカウントレベルの設定：タイムゾーン設定
初期状態だと「America/Los_Angeles」になっています。
現地の時間に合わせたい場合は、タイムゾーンを設定しましょう。
```
use role ACCOUNTADMIN ;
alter account set timezone = 'Asia/Tokyo' ;
```


値のタイムゾーンデータベースの参考は以下になります。
適宜、現地の値に変えてください。
https://data.iana.org/time-zones/tzdb-2021a/zone1970.tab

### ■アカウントレベルの設定：タイムスタンプ
初期状態だと、ミリ秒までがタイムスタンプ関数などで付与されます。
もし、ミリ秒以下が不要などの要件があれば、設定を変えましょう。
```
use role ACCOUNTADMIN ;
alter account set timestamp_output_format = 'YYYY-MM-DD HH24:MI:SS' ;
alter account set timestamp_ltz_output_format = 'YYYY-MM-DD HH24:MI:SS' ;
alter account set timestamp_ntz_output_format = 'YYYY-MM-DD HH24:MI:SS' ;
alter account set timestamp_tz_output_format = 'YYYY-MM-DD HH24:MI:SS' ;
```

### ■あとがき
アカウントレベルで作成できるオブジェクトは
他に「ストレージ統合」や「リソースモニター」がありますが、
今回はまだデータベースもユーザーも作成していないので、
本記事はここまでにします。

### ■次の記事
[Snowflake 初期設定：②SECURITYTADMIN編 NETWORK POLICY](https://qiita.com/taku_tachibana/items/6de80c90bef72ce0a9fd)

[目次に戻る](https://qiita.com/taku_tachibana/items/408686a031b9624e981e)
【SwiftUI】ユーザーが設定している言語と地域を取得する

# はじめに
ユーザー端末の言語設定と地域設定を知る方法を紹介します。

# 完成
![simulator_screenshot_50ADA5DE-5C9F-4DF6-9687-C735BCF70AFD.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1d513f3e-48b0-5dd4-38eb-eb589d24ca50.png)


# 実装
```swift
import SwiftUI

struct ContentView: View {
    @Environment(\.locale) var locale
    var body: some View {
        VStack {
            Text("言語設定: \(locale.language.languageCode?.identifier ?? "")")
            Text("地域設定: \(locale.region?.identifier ?? "")")
        }
    }
}
```

# おわり
特定の地域限定の機能などを実装する際に使えそうです。
Chrome拡張機能のTalk Berryを入れてChatGPTで英会話勉強始めてみた

- Twitterでみて気になったTalkBerry試してみました。


https://www.lifehacker.jp/article/2304-now-you-can-talk-to-chatgpt-with-your-voice/

- インストールは簡単で、ChromeストアでTalkBerryをインストール

![スクリーンショット 2023-04-29 22.05.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081581/e4623f5c-5f43-478d-6cc8-e55c1c5c7e8c.png)

- ChatGPTにWebログインする

https://chat.openai.com/auth/login

- このような画面で、デフォルトは英語で、日本語も選べました。

![スクリーンショット 2023-04-29 22.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081581/4fa0d22f-0b4c-4dfe-17ce-770285404dd1.png)

- スペースでマイクから音声入力できて、Enterで送信できます。これはちょっと面倒です。


- この前見た英会話するためのプロンプトを入れてみます。

私の英会話の先生になってください。英語でこれから話しましょう。もしも私が英語で文法の間違いをおかしたら、日本語で指摘して正しい文法を学校の先生のように解説してください。

![スクリーンショット 2023-04-29 22.16.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081581/70693c1e-6438-a529-c71c-54777ba487a3.png)

- 日本語モードだと棒読みで、英語モードにするととても流暢になって面白いです。
- 間違えた英語を話してみましたが、料理の話が盛り上がりすぎたのか、文法の間違えを直して貰えませんでした。
- ![スクリーンショット 2023-04-29 22.23.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081581/cf2a8e91-d9a0-e475-69fc-14025b8e4c93.png)

- 話がすれ違っている気がしますが、前向きな回答で小さなことを気にした自分が恥ずかしくなりました。
- ![スクリーンショット 2023-04-29 22.29.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081581/2126fe15-c8a9-24c0-97b0-b9c132854f1c.png)
Error: Objects are not valid as a React child ... のエラーの対処法

next.jsで開発をしていたら以下のエラーが発現した

```
Error: Objects are not valid as a React child (found: object with keys {boundaryYear, data}). If you meant to render a collection of children, use an array instead.
```

## 原因
JSONを表示させる際にそのまま表示させようとしていたのが原因だった

##　対処法
```
const hoge = () => {
   return (
      <>
         {obj}
      </>
   )
}

export default hoge
```

を

```
const hoge = () => {
   return (
      <>
         {JSON.stringify(obj)}
      </>
   )
}

export default hoge
```

に変更する
Ruby on Rails 復習④

## はじめに
本日学んだ事をまとめます。

## Deviseを使った認証機能の実装方法とその他のTips

Railsアプリケーションで簡単に認証機能を実装するために、deviseというgemを使ってみましょう。この記事では、deviseのインストール手順から、ログイン後のリダイレクト先やアソシエーション、画像のデフォルト表示などの実装方法について説明します。

Deviseのインストール手順
Gemfileにgem 'devise'を追加
bundle install
rails g devise:install
rails g devise [モデル名]
必要に応じてマイグレーションファイルにt.string :nameを追加
rails db:migrate
rails g devise:views
controllerに追記

```ruby:ApplicationController.rb
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end
```

## 認証機能のカスタマイズ
app/controllers/application_controller.rb に追記したconfigure_permitted_parametersメソッドを使って、ユーザー登録時にユーザー名のデータ操作を許可します。
protected は呼び出された他のコントローラからも参照することができます。

## フォームのカスタマイズ
<%= f.text_field :name, autofocus: true %> は、HTMLフォーム内にテキストフィールドを作成し、そのフィールドに:nameというシンボルを割り当てます。
<%= f.password_field :password, autocomplete: "current-password" %> は、HTMLフォーム内にパスワードフィールドを作成し、そのフィールドに:passwordというシンボルを割り当てます。

## ログイン後の遷移先を設定する
```ruby:ApplicationController.rb
def after_sign_in_path_for(resource)
  # 遷移したいリンク
end

def after_sign_out_path_for(resource)
  # 遷移したいリンク
end
```

## アソシエーションについて
アソシエーションに関する詳細な説明は、[こちらの記事](https://qiita.com/kazukimatsumoto/items/14bdff681ec5ddac26d1#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E8%A8%AD%E8%A8%88%E3%81%A8%E3%81%AF%E5%B0%91%E3%81%97%E9%9B%A3%E3%81%97%E3%81%84%E8%A9%B1%E3%81%A7%E3%81%99)を参照してください。

## テーブル名を間違えて作成した場合の対処法
rails generate migration RenameOldTableNameToNewTableName
生成されたマイグレーションファイルを開き、changeメソッドを以下のように修正します。

```ruby:20230429,,,.rb
def change
  rename_table :old_table_name, :new_table_name
end
```
注意点: テーブル名は全て小文字のスネークケースで記述する

rails db:migrate

## ActiveStorageにデフォルト画像を格納する
画像のサイズ変更をRailsで行います。以下のコードで、no_image.jpgをデフォルト画像としてActiveStorageに格納し、格納した画像を表示します。

```ruby:Model.rb
class PostImage < ApplicationRecord
  # ...
  def get_image
    unless image.attached?
      file_path = Rails.root.join('app/assets/images/no_image.jpg')
      image.attach(io: File.open(file_path), filename: 'default-image.jpg', content_type: 'image/jpeg')
    end
    image
  end
end
```

## 日付データを文字列に変換する
strftime('%Y/%m/%d')メソッドを使うと、日付データを「年/月/日」形式の文字列に変換できます。

## プロフィール画像の設定
モデルに以下のコードを追加します。

```ruby:Model.rb
has_one_attached :profile_image

def get_profile_image(width, height)
  unless profile_image.attached?
    file_path = Rails.root.join('app/assets/images/sample-author1.jpg')
    profile_image.attach(io: File.open(file_path), filename: 'default-image.jpg', content_type: 'image/jpeg')
  end
  profile_image.variant(resize_to_limit: [width, height]).processed
end
```

has_one_attached :profile_imageで、profile_imageという名前でActiveStorageでプロフィール画像を保存できるように設定します。

これで、deviseを使ってRailsアプリケーションに認証機能を実装し、さまざまなカスタマイズを行う方法がわかりました。
Yubikey逆引きメモ

必要に迫られたYubikey関連の逆引きメモになります


## Azure ADのMicrosoftアカウントで端末にログインする方法

1. AzureADでセキュリティーキーを有効にする
1. YubikeyのPINを設定する
1. ローカルグループポリシーエディターを使用して「コンピューターの構成->管理用テンプレート->システム->ログオン->セキュリティーキーでのサインインを有効にする」を有効にする
vscodeのターミナルのアクセス権限がない



vscode のターミナルでこのようなエラーが出た

    Error: EPERM: operation not permitted, uv_cwd at process.wrappedCwd
Bing先生に聞いてみるとこのような結果が　...
>このエラーは、Node.jsのプロセスが現在の作業ディレクトリ（CWD）を取得しようとしたときに発生することがあります。これは、通常、CWDが削除されたか、アクセス権限が変更されたためです。CWDを確認して、存在するかどうか、またアクセス権限が適切かどうかを確認してください。

要するに
- 現在いる作業ディレクトリが削除された
- 現在いる作業ディレクトリの編集権限がない

らしい
調べてみたところ、作業ディレクトリの削除はあり得ない
よって、『作業ディレクトリの編集権限がない』と思われる

そもそもアクセス権限どうやって確認するんだ？
アクセス権限確認方法

    ls -l
アクセス権限付与方法

    chmod [options] mode file
今回の場合は

    chmod u+rwx .
>（chmod u+rwx . というコマンドは、現在の作業ディレクトリ（.）に対して、所有者（u）に読み取り（r）、書き込み（w）、実行（x）の権限を追加（+）することを意味します。
つまり、このコマンドを実行すると、現在の作業ディレクトリの所有者は、そのディレクトリ内のファイルやサブディレクトリを読み取り、書き込み、実行することができるようになります。）

これを実行しても編集権限を与えることができなかった

ここである可能性に気づいた
『ターミナルからvscodeを開いたからなのでは？』

そう思い立って、ターミナルで編集権限があるのか確認してみる

編集権限あり...

そこで一旦vscodeを終了し、vscodeからフォルダーを開いてみた
そしたら...
無事、
**『アクセス権限あり!!』**

このようになんとなく解決できたのだが、
なぜターミナルからvscodeを開いたときにアクセス権限が無いのだろう？
わかる人がいたら教えてください...
Juliaを使って大学の線形代数を解きたい(行列編)

概要
-
大学のゼミに入りJuliaを使うことになったので、**Juliaの基礎的な使い方を学ぼう!** といった日記です。
Juliaは全くの初心者なので、超基礎的なことからやっていきます。プログラミングを全くやったことがない人でもできると思います。（数学的な定義の話はあまりしません。）
現在使用しているJuliaは**v1.8.5**でエディタはVScodeを使用しています。

目次
-
- 基本的な演算の入力の仕方
- 行列の演算


基本的な演算の入力の仕方
-
というわけで早速Juliaを使っていきましょう。まずは基本的な演算子の入力方法です。

|演算名|演算子|
|:--|--:|
|足し算|　+　|
|引き算|　-　|
|掛け算|　*　|
|割り算|　/　|
|整数除算|　÷　|
|剰余| %　|
|べき乗| ^　|
|平方根|sqrt()|
|立方根|cbrt()|

<details><summary>例</summary>

```python
#足し算
1 + 3
4

#引き算
4 - 1
3

#掛け算
3 * 4
12

#割り算
9 / 3
3

#バックスラッシュを用いると
9 \ 3
0.3333333333333333
#のように3/9になる(誰得？)

#商のみ
5 ÷ 2
2

#余りのみ
5 % 2
1

#平方根
sqrt(4)
2.0
sqrt(16)
4.0
```
</details>
    

**行列の入力方法**

    x = [11 12; 21 22]
>実行結果
2×2 Matrix{int64}:
11 12
21 22


行列を定義するには **[]** を使用します。列は **;** を使って分割します。
しかし、単に横に書くだけだと行と列が見にくいので、

    x = [11 12
         21 22]
のように改行をして実際に行と列を分けて入力することをオススメします。（実行結果はもちろん変わりません。)


行列の演算
-
入力方法も分かったわけですし早速計算をしていきましょう！
まずは2×2の和と差

```math
\left[
\begin{matrix} 
1 & 2 \\ 
3 & 4 
\end{matrix}
\right]

+

\left[
\begin{matrix} 
5 & 6 \\ 
7 & 8 
\end{matrix}
\right]
```

    a = [1 2
         3 4]
    b = [5 6
         7 8]
    a+b
    a-b

>a+bの実行結果
2×2 Matrix{Int64}:
6　8
10 12

>a-bの実行結果
2×2 Matrix{Int64}:
 -4  -4
 -4  -4

次に3×2の行列の積
```math
\left[
\begin{matrix}
1 & 2 \\ 
3 & 4  \\
5 & 6
\end{matrix}
\right]

×

\left[
\begin{matrix}
-5 & -6 \\ 
7 & 8 
\end{matrix}
\right]
```
    a = [1 2
         3 4
         5 6]
    b = [-5 -6
          7  8]
    a*b

>実行結果
3×2 Matrix{Int64}:
  9  10
 13  14
 17  18

結構簡単ですね！
次回は転置・行列式・逆行列についてやっていきます！
◯'と"◯

備忘録として投稿。

・シングルクオーテーションとダブルクオーテーションの違いは、文字列内で変数やエスケープシーケンスを展開するかどうかにある。

・シングルクオーテーションで囲まれた文字列内では、変数の展開やエスケープシーケンスの解釈が行われず、そのままの文字列が表示される。
　一方、ダブルクオーテーションで囲まれた文字列内では、変数の展開やエスケープシーケンスの解釈が行われる。

例えば、以下のようなコードがあったとする。
~~~php
$name = "Alice";
echo 'Hello $name!'; // 'Hello $name!' が表示される
echo "Hello $name!"; // 'Hello Alice!' が表示される
~~~
このコードでは、シングルクオーテーションで囲まれた 'Hello \\$name!' の部分では変数の展開が行われず、\\$name という文字列として表示される。
一方、ダブルクオーテーションで囲まれた "Hello \\$name!" の部分では、変数 $name の値である Alice が展開され、Hello Alice! という文字列が表示される。

◎余談
・nl2br() 関数は、改行文字 \n を \<br> タグに変換する関数。
文字列中に改行文字がある場合、
ダブルクオーテーションで囲まれた文字列では改行文字が正しく変換されるが、
シングルクオーテーションで囲まれた文字列では変換されない。

したがって、シングルクオーテーションで囲まれた文字列内に改行文字が含まれる場合は、nl2br() 関数を使っても <br> タグに変換されない。
AWS Certificate Manager (ACM) にインポートした証明書をAWS CLIで取得できない時の解決方法

## 背景
- 環境構築後のテストの工程においてaws-cli使用してリソースの状態のエビデンスを取得している
- ACMへの変更を実施したため、いつも通りaws-cliコマンドでACMが管理している証明書の一覧を取得した
- しかし、その構築作業で追加されているはずの証明書がリストに出力されなかった
- コンソールで確認すると目的の証明書は表示されている
- 表示されない証明書は外部発行の証明書（ACMで発行されていない）
- インポートした証明書のパブリックキーはECDSA P 256
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293083/3d442b15-2d8d-8a47-30e3-1ae084539655.png)

## 解決方法
`--certificate-statuses`オプションで`keyType`を設定する
コマンド例はこちら。
```bash
$ aws list-certificates --certificate-statuses keyTypes=XXXXX
```

[AWS CLIのコマンドリファレンス](https://awscli.amazonaws.com/v2/documentation/api/2.0.33/reference/acm/list-certificates.html#:~:text=keyTypes%20%2D%3E%20(list),and%20RSA_4096%20certificates.)に以下のような記載がありました。
オプションを指定していないとデフォルトでは`RSA_2048`のみにフィルターされているとのこと。
```
keyTypes -> (list)
Specify one or more algorithms that can be used to generate key pairs.
Default filtering returns only RSA_2048 certificates. To return other certificate types, provide the desired type signatures in a comma-separated list. For example, "keyTypes": ["RSA_2048,RSA_4096"] returns both RSA_2048 and RSA_4096 certificates.
```


## まとめ
- 証明書のパブリックキーがRSA_2048でない場合は`--certificate-statuses`オプションで`keyType`を指定する
- まず公式ドキュメントを見る
    - `証明書 XXX CLI取得できない`というような検索ワードでググっていて時間を浪費しました・・・
    - 公式ドキュメントが重要だと再度認識させられた
[AWS Q&A 365][SES]AWSのよくある問題の毎日5選 #43

# 1. Amazon SESにおける専用IPアドレスとは何ですか？
回答：Amazon SESにおける専用IPアドレスとは、特定のAmazon SESアカウントに専用に割り当てられた一意のIPアドレスです。多量のメールを送信し、一貫した予測可能なメール配信性能が必要なビジネスに役立ちます。

# 2. Amazon SESで専用IPアドレスを使用する利点は何ですか？
回答：Amazon SESで専用IPアドレスを使用する利点は、メール配信性能のより厳密なコントロール、送信者評価の管理、および改善されたメールキャンペーンの性能です。専用IPアドレスを使用することで、ビジネスはスパムとしてブロックされたりマークされたりすることなく、多量のメールを送信できます。

# 3. Amazon SESで専用IPアドレスを取得する方法は何ですか？
回答：Amazon SESで専用IPアドレスを取得するには、AWS Management Consoleを介してリクエストを提出する必要があります。メール送信のプラクティスと送信する予定のメールの量についての情報を提供する必要があります。Amazon SESはリクエストを確認し、基準を満たす場合に専用IPアドレスを割り当てます。

# 4. Amazon SESで自分自身のIPアドレスを使用できますか？
回答：はい、自分自身のIPアドレスをAmazon SESで使用することができます。これは、自分自身が所有するか、サードパーティのプロバイダからリースしたIPアドレスを使用することを許可します。ただし、IPアドレスがAmazon SESの要件を満たすことを確認するために検証プロセスを実行する必要があります。

# 5. Amazon SESで専用IPアドレスを管理する方法は何ですか？
回答：Amazon SESで専用IPアドレスを管理するには、その評判とパフォーマンスを監視し、フィードバックループを構成し、バウンスおよびクレーム処理を設定することができます。また、専用IPアドレスを特定のメールキャンペーンに割り当てるか、他のメール配信サービスと併用することもできます。さらに、Amazon SESは専用IPアドレスのパフォーマンスを監視し分析するツールを提供しており、メールキャンペーンを最適化するのに役立ちます。
[AWS Q&A 365][SES]Daily Five Common Questions #43

# 1. What are Dedicated IP addresses in Amazon SES? 
Answer: Dedicated IP addresses in Amazon SES are unique IP addresses that are exclusively assigned to a particular Amazon SES account. They are useful for businesses that send a high volume of emails and require consistent and predictable email delivery performance. 

# 2. What are the benefits of using Dedicated IP addresses in Amazon SES? 
Answer: The benefits of using Dedicated IP addresses in Amazon SES include greater control over email deliverability, the ability to manage sender reputation, and improved email campaign performance. Dedicated IP addresses also allow businesses to send a high volume of emails without the risk of being blocked or marked as spam. 

# 3. How can I obtain a Dedicated IP address in Amazon SES? 
Answer: To obtain a Dedicated IP address in Amazon SES, you need to submit a request through the AWS Management Console. You will need to provide information about your email sending practices and the volume of emails you plan to send. Amazon SES will then review your request and assign a Dedicated IP address if it meets their criteria. 

# 4. Can I use my own IP address with Amazon SES? 
Answer: Yes, you can use your own IP address with Amazon SES by bringing your own IP (BYOIP) address. This allows you to use an IP address that you already own or have leased from a third-party provider. However, you will need to go through a verification process to ensure that your IP address meets Amazon SES's requirements. 

# 5. How can I manage my Dedicated IP addresses in Amazon SES? 
Answer: You can manage your Dedicated IP addresses in Amazon SES by monitoring their reputation and performance, configuring feedback loops, and setting up bounce and complaint handling. You can also assign your Dedicated IP addresses to specific email campaigns or use them in conjunction with other email delivery services. Additionally, Amazon SES provides tools for monitoring and analyzing your Dedicated IP address performance to help you optimize your email campaigns.
放置で乱数な木を育てるPGM(TheBonsai)

<h3>放置で乱数な木を育てるPGM(TheBonsai)</h3>
<p>
成長時間、木の色、葉の色を指定し、一分おきに木を育てるPGMを作りました.
乱数で木を作成するため、毎回違う木で成長します.

2023.5.23 木の成長に関する変数をフォームから変更できるようにしました
</p>

<hr>
参考画像URL: https://github.com/NanjoMiyako/TheBonsai.io/blob/main/sc2.png
<br>
githubのURL:https://github.com/NanjoMiyako/TheBonsai.io
<br>
サンプルページURL: https://nanjomiyako.github.io/TheBonsai.io/
<hr>
参考にしたサイト<br>
<a href="https://www.sejuku.net/blog/22432">【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) | 侍エンジニアブログ</a>
<br>
<a href="https://qiita.com/Hoshi_7/items/d04936883ff3eb1eed2d">2点間の距離と角度と座標の求め方 - Qiita</a><br>
<a href="https://developer.mozilla.org/ja/docs/Web/API/setTimeout">setTimeout() - Web API | MDN</a><br>
<a href="https://www.pazru.net/html5/Canvas/020.html">直線・多角形を描く-HTML5編</a><br>
<a href="https://qiita.com/es-row/items/4d654d4272564f8c5528">Javascript でツリー階層をデータで持たせる - Qiita</a><br>
<a href="https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">スタイルと色の適用 - Web API | MDN</a><br>
<a href="https://prog-8.com/docs/github-pages">自分で作ったWebページをインターネット上に公開しよう！ | プログラミングの入門なら基礎から学べるProgate[プロゲート]</a><br>

<br>

2023.5.23

<a href="https://shanabrian.com/web/javascript/form-reset.php">フォームの内容をリセット（初期値に戻す） | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website</a><br>
PlatformIOでWire.hエラーメモ


EspMQTTClientを使おうとしたところ、ビルド時にWire.hの読み込みエラーが表示されました。

```
compilation terminated.
*** [.pio/build/m5stack-atom/libe3e/M5Atom/utility/MPU6886.cpp.o] Error 1
In file included from .pio/libdeps/m5stack-atom/M5Atom/src/M5Atom.cpp:4:
.pio/libdeps/m5stack-atom/M5Atom/src/M5Atom.h:53:10: fatal error: Wire.h: No such file or directory
```

https://github.com/plapointe6/EspMQTTClient


> ![スクリーンショット 2023-04-29 16.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e9e7574d-37fc-0599-d1d6-e02c5b2cf8ab.png "スクリーンショット 2023-04-29 16.40.50.png")

## 公式のフォーラムで同じ話題が

https://community.platformio.org/t/wire-h-not-found-platformio-latest-version/2046


> ![スクリーンショット 2023-04-29 20.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/d51a5cf7-f0b5-3590-dd36-28c56093404b.png "スクリーンショット 2023-04-29 20.57.56.png")

`lib_deps = Wire`を指定すればOKとのことでした。

ということでplatromio.iniを以下のような感じで加筆

```platromio.ini
; PlatformIO Project Configuration File
;
;   Build options: build flags, source filter
;   Upload options: custom upload port, speed and extra flags
;   Library options: dependencies, extra library storages
;   Advanced options: extra scripting
;
; Please visit documentation for the other options and examples
; https://docs.platformio.org/page/projectconf.html

[env:m5stack-atom]
platform = espressif32
board = m5stack-atom
framework = arduino
lib_deps = 
	m5stack/M5Atom@^0.1.0
	fastled/FastLED@^3.5.0
	earlephilhower/ESP8266Audio@^1.9.7
	plapointe6/EspMQTTClient@^1.13.3
    Wire
monitor_speed = 115200
```

他のライブラリがバージョンなど入ってるなかで`Wire`だけ違和感ありますが、これで動きました。
Delta Live TablesのUnity Catalogサポートを試してみる

こちらのプレビュー中の機能を実際に試してみます。

https://qiita.com/taka_yayoi/items/b5acc61a5c82e0e92dbb

# カタログ、データベースの作成

Unity Catalogでカタログとデータベース(スキーマ)を作成しておきます。ここでは、

- カタログ: `takaakiyayoi_catalog`
- データベース: `dlt`

としています。

# Delta Live Tablesノートブックを作成

[チュートリアル](https://docs.databricks.com/delta-live-tables/tutorial-sql.html)にあるものをそのまま使います。ここまでは、これまでと同じです。

```sql:SQL
CREATE
OR REFRESH LIVE TABLE clickstream_raw COMMENT "The raw wikipedia clickstream dataset, ingested from /databricks-datasets." AS
SELECT
  *
FROM
  json.`/databricks-datasets/wikipedia-datasets/data-001/clickstream/raw-uncompressed-json/2015_2_clickstream.json`;
```

```sql:SQL
CREATE OR REFRESH LIVE TABLE clickstream_prepared(
  CONSTRAINT valid_current_page EXPECT (current_page_title IS NOT NULL),
  CONSTRAINT valid_count EXPECT (click_count > 0) ON VIOLATION FAIL UPDATE
)
COMMENT "Wikipedia clickstream data cleaned and prepared for analysis."
AS SELECT
  curr_title AS current_page_title,
  CAST(n AS INT) AS click_count,
  prev_title AS previous_page_title
FROM live.clickstream_raw;
```

```sql:SQL
CREATE OR REFRESH LIVE TABLE top_spark_referers
COMMENT "A table containing the top pages linking to the Apache Spark page."
AS SELECT
  previous_page_title as referrer,
  click_count
FROM live.clickstream_prepared
WHERE current_page_title = 'Apache_Spark'
ORDER BY click_count DESC
LIMIT 10;
```

# Delta Live Tablesパイプラインの作成

パイプライン定義の**ストレージオプション**でUnity Catalogが選べるようになっています。
![Screenshot 2023-04-29 at 20.30.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/c781827f-3548-a1a4-17d3-a7dfc4886281.png)

カタログとターゲットスキーマ(データベース)を指定します。
![Screenshot 2023-04-29 at 20.31.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/65555eef-f0b5-2881-e9c0-9fb16ad4cce2.png)

なお、チャンネルは自動で**プレビュー**になっています。
![Screenshot 2023-04-29 at 20.31.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/26f04426-e5ec-a6c2-92f3-6bfd46c71746.png)

# Delta Live Tablesパイプラインの実行

UIも若干変更されていますね。

![Screenshot 2023-04-29 at 20.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/04d3a730-3519-27ed-69e0-57060a20877f.png)

テーブルへのリンクも表示されるようになっています。
![Screenshot 2023-04-29 at 20.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/2de0b453-a054-076f-390c-8dd9c244bc2d.png)

リンクをクリックするとデータエクスプローラに移動します。なお、テーブルのサンプルデータを参照するには、SQLウェアハウスあるいはDBR12.2以降の共有クラスターが必要となりますので注意してください。
![Screenshot 2023-04-29 at 20.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/9c6bed87-5a0b-efd5-c406-a6e5ea72db73.png)

# リネージの参照

データエクスプローラのリネージにもDLTのリネージが表示されるようになっています。
![Screenshot 2023-04-29 at 20.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/546508e3-de8f-bcdb-d880-6bb6669f66e7.png)

### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
個人的アルゴリズムの勉強の部屋

アルゴリズムを書くトレーニングを何ヶ月かにやってるのですが
一人で黙々とやるのが続かないので記事にしてなんとかモチベーションを
保つという目的で書いていきます。


## 問題：配列の中の二つ数字の組み合わせの和で、指定した数字に一致した場合、True。一致しなかった場合、Falseになるような関数を作る。

### input
```python
from typing import List
>> array:List[int],dist:int
```

### output
もしarrayの中の二つの組み合わせを使用してdistになるものがあればTrue。それ以外False


### 一般的な解き方：for文で探索するやつ

```python
from typing import List
def findpair(arr:List[int], dist:int) -> bool:
    for i in range(len(arr)):
        for j in range(i+1 ,len(arr)):
            if arr[i] + arr[j] == dist:
                return True
    return False
```

### インテリジェントな解き方

```python
from typing import List

def findpair(arr:List[int], dist:int) -> bool:
    arr.sort()
    left = 0
    right = len(arr)-1
    while left < right:
        if arr[left] + arr[right] == dist:
            return True
        elif arr[left] + arr[right] > dist:
            return right -=1
        else:
            return left +=1
    return False
```

### ハッシュテーブルを使用した解き方
```python
from typing import List

def findpair(arr:List[int], dist: int) -> bool:
    hash = {}
    for num in arr:
        if hash[dist-num]:
            return True:
        else:
            hashed[num] = True
    return False
```