OmniAICreator/Qiita-1.07M huggingface dataset:
【3分で読める】Reactで子コンポーネントの値を親コンポーネントで取得(親へ渡す)方法

## やりたいこと

atomic designなどでコンポーネントを設計をしているとmolecules(子)が保持しているstateをorganisms(親)から参照したい場合などがあるはずです。
そんな時にどのように子コンポーネントのstateを親コンポーネントから参照するかを今回は説明します。


## 親から子のstateを取得する流れ

1. 親コンポーネントで子の`state`を保持、更新するための`useState`を定義する。
1. 1で定義した`set○○`を使って`state`を更新する関数を作成する。
1. 2で作成した関数を子に`props`として渡す。
1. 子コンポーネントで親から受け取った関数を`button`タグなどで実行する。


## コード

### 親コンポーネント
```React:ParentComponent.jsx
import { useState } from 'react'
import ChildComponent from '../atoms/ChildComponent'

const ParentComponent: React.FC = () => {
  // 1.親コンポーネントで子のstateを保持、更新するためのuseStateを定義する。
  const [parentState, setParentState] = useState('initial parent state')

  // 2.1で定義したsetParentStateを使ってparentStateを更新する関数を作成する。
  const setState = (childState) => {
    setParentState(childState)
  }

  return (
    // 3.2で作成した関数を子にpropsとして渡す
    <>  
      <ChildComponent parentFunction={setState} />
      <button onClick={() => console.log(parentState)}>Show Parent State</button>
    </>
  )
}
export default ParentComponent
```

### 子コンポーネント

```React:ChildComponent.jsx
import { useState } from 'react'

const ChildComponent: React.FC = ({ parentFunction }) => {
  const [childState, setChildState] = useState('initial child State')

  // 4.子コンポーネントで親から受け取った関数をbuttonタグなどで実行する。
  return <button onClick={() => parentFunction(childState)}>Set Parent State</button>
}
export default ChildComponent
```


## 補足
上記のコードの挙動を確認すると初回レンダリングされた状態で`Show Parent State`ボタンをクリックするとコンソールに`initial parent state`と表示されますが、`Set Parent State`ボタンをクリック後、再度`Show Parent State`ボタンをクリックするとコンソールに子から渡された`initial child State`が表示されるはずです。


今回は子の値を親から参照することを目的とした記事のため、子の`setChildState`関数は使わずに初期値の`initial child State`を親に渡すだけでしたが、もちろん動的に子の`state`は変わると思うので開発中のプロジェクトでは子の`set○○`を使用して動的に値を変更してみてください。
Apple M2でstable-diffusion-webuiを使う

## 動作確認環境
- MacBook Pro 13インチ、M2 2022
- macOS Ventura 13.4

## 環境構築
1. [Homebrew](https://brew.sh/)からHomebrewをインストールします。
   ```shell
   $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   ```

2. brewがインストールできたら、次のコマンドを実行します。
   ```shell
   $ brew install cmake protobuf rust python@3.10 git wget
   ```

3. [stable-diffusion-webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui)からリポジトリをクローンします。

4. [このリンク](https://civitai.com/models/11866?modelVersionId=108289)からPruned Model fp16 (1.99 GB)の学習モデルをダウンロードします。

5. クローンした`stable-diffusion-webui/models/Stable-diffusion` ディレクトリにダウンロードした学習モデルの`meinapastel_v6Pastel.safetensors`を配置します。

6. [このリンク](https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/1890)の問題解決のために、`stable-diffusion-webui/webui-user.sh` ファイルをテキストエディットなどで開き、`COMMANDLINE_ARGS`に引数を設定します。
   ```diff_shell
   - export COMMANDLINE_ARGS=""
   + export COMMANDLINE_ARGS="--skip-torch-cuda-test --no-half"
   ```

7. [このリンク](https://huggingface.co/hakurei/waifu-diffusion-v1-4/blob/main/vae/kl-f8-anime2.ckpt)からVAE用のファイルをダウンロードし、`stable-diffusion-webui/models/VAE`に配置します。

8. ターミナルでクローンした`stable-diffusion-webui` ディレクトリに移動します。

9. `./webui.sh` を実行して、`stable-diffusion-webui` を起動します。ブラウザで画面が表示されます。

## stable-diffusion-webuiの設定
### 日本語化
1. Extensionsタブをクリックします。
2. Availableタブをクリックします。
3. localizationのチェックを外します。
4. Load From: ボタンをクリックします。
5. 表示された一覧からja_JP Localizationを探し、Installをクリックします。
6. Settingsタブをクリックします。
7. User interfaceメニューをクリックします。
8. Localizationの右側の更新をクリックします。
9. プルダウンメニューからja_JPを選択します。
10. Apply settingsをクリックします。
11. Reload UIをクリックして日本語化されます。

### おすすめの拡張機能をインストール
#### Image browser
1. 拡張機能タブをクリックします。
2. 拡張機能リストをクリックします。
3. 読込をクリックします。
4. 一覧からImage browserを探し、Installをクリックします。
5. 設定タブをクリックします。
6. UIの再読み込みをクリックして反映させます。

#### Booru tag autocompletion
Image browserと同じ手順で導入します。

## 使ってみる
1. txt2imgタブをクリックします。
2. プロンプトへ任意の単語を入力します。
3. 生成をクリックすると、下記のように画像が生成されます。

![スクリーンショット 2023-09-03 17.23.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/f0ca9ade-09f8-cd3b-fb00-d9fd947bfd85.png)

## 参考文献
- https://nomolk.hatenablog.com/entry/2023/09/02/134147
- https://studiomasakaki.fanbox.cc/posts/5667198
- https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Installation-on-Apple-Silicon
[備忘録] Azure Video IndexerのインデックスをPythonで取得

# 概要
Pythonで[Azure Video Indexer](https://azure.microsoft.com/ja-jp/products/video-indexer)に**動画ファイルをアップロードする方法**と、**動画の「インデックス」を取得する方法**を紹介しています。私の備忘録用なため，少し読みづらいかと思いますが、最後までご覧いただけますと嬉しいです。

# GitHub
ソースコードを公開しています。このレポジトリの内容に沿って解説しています。

https://github.com/yusuke-1105/AzureVideoIndexer-Python

# 解説

:::note
[Azure Video Indexer 公式ドキュメント](https://learn.microsoft.com/ja-jp/azure/azure-video-indexer/scenes-shots-keyframes)
:::

:::note warn
Azure Video Indexerは従量課金制です。詳しくは[こちら](https://azure.microsoft.com/ja-jp/pricing/details/video-indexer/)
:::

1\. Azure PortalでAzure Video Indexerをセットアップします。

2\. 以下の画像の赤枠部分に表示されているAccount IDとAccess Tokenを取得します。
￼![image_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579608/126cb286-0e4f-d986-8e17-b6b6d03c8977.png)
![image_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579608/5cb03020-d916-d676-d667-0f1a356ce0ea.png)
3\. この[リンク](https://api-portal.videoindexer.ai/api-details#api=Operations&operation=Upload-Video)にアクセスし、サインイン後、「Try it ▶︎」ボタンをクリックします。クリックにより出現したパネル下部の Ocp-Apim-Subscription-Key を取得します。
![image_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579608/e151c1d4-32ee-0fb4-7e1b-f0ec410d4a8e.png)
4\. `azure-info-sample.yaml`を複製し、`azure-info.yaml`に名前変更します。

5\. `azure-info.yaml`のaccountId、accessTokenそれぞれに2.で取得したAccount ID、Access Tokenを設定します。また、3.で取得したOcp-Apim-Subscription-KeyをsubscriptionKeyに記述します。

6\. 動画ファイルを onedrive にアップロードし、ウェブブラウザで onedrive にアクセスします。画面上部の「・・・」をクリックし、「埋め込み」を選択します。

![embedding.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579608/ee2a9f64-e93f-3628-0a1d-af8cf6754119.png)

:::note
Azure Video Indexerはmp4, mov, …の動画形式に対応してます。
詳しくは[こちら](https://learn.microsoft.com/ja-jp/previous-versions/media-services/previous/media-services-media-encoder-standard-formats#input-containerfile-formats)
:::

7\. 画面右に埋め込み用コードが出現するので、赤枠で囲まれている部分の埋め込み用リンクを取得します。このリンクの"embed.aspx"という文字列を"download.aspx"に置き換えます。
￼
![image_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579608/6a0bbaa0-ae00-7889-ea10-d195b63c41a8.png)

8\. `azure-info.yaml`のvideoUrlに取得したonedriveのリンクを、videoNameにお好みの動画ファイル名(拡張子は不要)を記述します。

9\. `upload-video.py`を実行します。Azure への動画アップロードとインデックス作成完了後、`get-index.py`を実行して動画のインデックスを取得します。動画のインデックス完了の有無は、[Azure AI Video Indexer Portal](https://www.videoindexer.ai/?utm_source=viextension)で確認できます。
脳内メーカーから腸内メーカーへ

腸は第2の脳（要出典）と言われて久しいですが、この度「腸内診断メーカー」をリリースいたしました。XXメーカーと言えば当然「脳内メーカー」を思い浮かべる人がほとんどだと思いますが、「脳内」ではなく「腸内」です。

https://mkrrr.com/chonai

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10505/a068c3b0-7a4a-8bee-2585-404779bebe65.png)

みなさんお気づきかと思いますが、これはいわゆる二番手戦略です。二番手戦略といえば、2000年代初頭のマイクロソフトとアップルのやり取りが記憶に新しいかと思います。当時マイクロソフトと比較して圧倒的にシェアの小さかったアップルが、アップルとマイクロソフトは対等に比較するのが当然なんだよ、という態度でたくさんCMを打つことで認知度を上げました。

https://youtu.be/0eEG5LVXdKo?si=7uXs3kxGEC8W95Rz

これを現代に置き換えると、[脳内メーカー](https://maker.usoko.net/nounai/)さんがPC、[腸内診断メーカー](https://mkrrr.com/chonai)がMacということになります（ほんとすみません）。

脳内さんからすれば自分がマイクロソフトのような大企業的な立ち位置になるとはたぶんまったく想像していなかったと思いますが、長い年月XX診断業界No1の座に君臨し続けた上の結果であり、これは起こるべくして起こった結末だと言えます。

しかし今や時代は腸内です。Think different. 腸内 is クール、と言われる時代に我々はすでに生きているのです。

（以上が1年くらい前からqiitaの下書きに眠っていたテキストです。ほっておいたらTwitterもXになってしまいました）

## 腸内メーカーを支える技術

### [Nuxt](https://v2.nuxt.com/)
- Nuxt2です。

### [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
- 画像生成 

### [Firebase](https://firebase.google.com/)
- realtime database: 診断パターンを保持
- Authentication: X(Twitter)のログイン状態管理
- Storage: OG画像保持

### [Google Analytics API](https://developers.google.com/analytics/devguides/reporting/core/v4)
- GASでgoogle analytics API (v4) を叩いてスプレッドシートに保持。
- フロントからスプシデータ取得してランキングデータ作成

### [vercel](https://vercel.com)
- デプロイ先 

## メーカー作成機能
X(Twitter)アカウントでログインすると自分の腸内メーカーを作ることができます。機能作ってはみたものの、果たして使う人がいるのだろうかと思っています。ただ自分では診断パターン思い浮かばないので誰かよろしくお願いします。

## 感想
- canvas APIを使ってなにか作ってみたいと思い立って作りました（たしか）。
- NuxtというかVueのコードを見返すと、最近書いているsvelteのように関数が乱立？しておらず迷いなく書けている印象を受けました。
- つまらないものでも形にできるフロントエンドはやっぱ楽しいなと思いました。

https://mkrrr.com/chonai
OpenSiv3D で Windows のポップアップメニューを表示したい

## 概要

OpenSiv3D で、Windows のポップアップメニュー（コンテキストメニュー／ショートカットメニュー）を表示し、クリックされた項目を取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35599/6ba50a71-ad67-e0e1-d158-bde6a97d409e.png)

## 開発環境

- Windows 11
- Visual Studio 2022
- OpenSiv3D 0.6.11

## どうやるか

OpenSiv3D には Windows のメニューを扱う機能がないので、Win32API を使います。

メニューを表示する基本的な流れは次のとおりです：

- [LoadMenu](https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-loadmenuw) 関数で、リソースからメニューをロードする
- [GetSubMenu](https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-getsubmenu) 関数でサブメニューを取得する
- [TrackPopupMenu](https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-trackpopupmenu) 関数でメニューを表示する

ただし、OpenSiv3D アプリは次のようにスレッドが分かれています：

- THREAD #0: ウィンドウプロシージャが実行されるスレッド
- THREAD #1: Main 関数が実行されるスレッド（メインスレッド）

（参照：https://github.com/Siv3D/OpenSiv3D/blob/main/Siv3D/src/Siv3D-Platform/WindowsDesktop/Siv3D/Siv3DMain.cpp ）

そのためか、メインスレッドからの TrackPopupMenu の実行は失敗してしまいます。

なので、メニューのロード～表示までの一連の流れをウィンドウプロシージャのスレッドで行うことにします。具体的な流れは、次のようになります：

1. [SetWindowLongPtr](https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-setwindowlongptrw) 関数で、ウィンドウプロシージャを自前のものに変更する
    - 参考: https://qiita.com/tyanmahou/items/88b793e255f1e04f85d3 
2. メニューを表示したいときは、あらかじめ決めておいたメッセージ（WM_USER + 適当な数値 など）をウィンドウに送る。ウィンドウプロシージャはそのメッセージを受けてメニューのロード～表示を行う
3. メニューがクリックされると、ウィンドウプロシージャに WM_COMMAND メッセージが送られる。ウィンドウプロシージャは [PostThreadMessage](https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-postthreadmessagew) 関数でその内容をメインスレッドに送る
4. メインスレッドでは 3. で送られたメッセージを [GetMessage](https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-getmessagew) 関数で取得する

## ソースコード

https://github.com/voidproc/siv_popupmenu

## メニューの編集方法

Visual Studio のリソースビューからメニューリソースを編集する際、OpenSiv3D のプロジェクトにはじめから入っている Resource.rc に対してメニューを追加すると、もともとの内容がぐちゃぐちゃになってしまうので（何かやりかたが悪い？）、メニュー用に Resource2.rc などとして別ファイルを追加して、これを編集するのが良いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35599/c433e079-52c1-b300-0897-941f06f043e2.png)
【自作サイト紹介】Tailwind CSS入門ついでに自作アプリをまとめてみた


# Introduction

群雄割拠の CSS フレームワーク界隈、ML エンジニアの私にはついていけておりませんが、`Tailwind CSS`が簡単に扱えそうだったので試してみました。

https://tailwindcss.com/

ちょうどペンギンの教師データ作成中でペンギン画像が溜まったことも重なり、折角なのでペンギンに溢れたポートフォリオまとめサイトを作りました。
本記事はこのサイト紹介記事です。

**本記事が少しでも読者様の学びに繋がれば幸いです！**
**「いいね」をしていただけると今後の励みになるので、是非お願いします！**

## 環境

Ubuntu22.04

## Tailwind CSS の使用感

数日しか触っていないので恐縮ですが、ざっくり使用感をまとめます。[^1]
[^1]: Web 開発はほぼ経験ない私なのであくまで参考程度に。実務で CSS 実装する際は Google 先生と二人三脚しています。

※アプリを先に見たい方向けに折り畳んでおきます。

<details><summary><b>=======================<br>&nbsp;&nbsp;&nbsp;Tailwind CSSの感想<br>&nbsp;========================</b></summary><div>

**メリット**

- レスポンシブ対応が簡単。
- 実装時間の短縮。
- 使い回しやすい。
- 公式サイトが見やすい。

**デメリット**

- 保守性/可読性が悪い。
- ビルドが必要。

フロントエンドやデザイナーに特化した方は違和感満載かも知れませんが、正確さより利便性を重視する場合には良い選択になると思いました。

個人的にはレスポンシブ対応だけでも採用したくなります。[^2]
[^2]: 個人開発ならですが。

https://tailwindcss.com/docs/responsive-design

デメリットはソースコードが汚くなる点ですね。
私が慣れていないのも原因に思いますが、HTML に書き込むのでコードは長くなりますし、可読性もマウスホバーしないと分かり辛く、保守が大変そうです。

とはいえ今後 CSS を扱う際は`Tailwind CSS`を採用すると思います。
初見でもバニラ CSS や他フレームワークと比べて圧倒的に早く実装できて好感触でした。

</div></details>

## アプリ紹介

いつも GitHub Pages にデプロイしていますが、netlify にデプロイしています。[^3]
[^3]: 思ったより使用感良く、GitHub 連携もできるのでおすすめです。

https://kagami-portfolio.netlify.app/

<details><summary><b>=======================<br>&nbsp;&nbsp;&nbsp;Summary<br>&nbsp;========================</b></summary><div>

**実装**

- HTML
- Tailwind CSS

**概要**

- ポートフォリオ一覧
- 実装スキル一覧(一部抜粋)
- SNS 等へのリンク
- 問い合わせフォーム（formrun 使用）[^3]
  [^3]: 実装時間短縮で使用しました。ペンギン分類 CNN を優先したかったのです...

**（一応の）こだわりポイント**

- レスポンシブ対応
- シンプルデザイン
- ペンギン愛[^4]
  [^4]: 実装中は背景もすべてペンギンでしたが、苦手な人は閲覧注意レベルだったため控えました...

</div></details>

※工数は 1.5 日程度です。[^5]
[^5]: ポートフォリオは工事中です。良い感じのアプリを作れたら随時更新します。
日本の賃金分析アプリを更新しました!

GitHub は[こちら](https://github.com/kagami-tsukimura/kagami.com)

あくまで`Tailwind Css`がメインなのでサイトは簡素です。
`React`と相性が良さそうなので次回は本格的な実装をしていきたいですね。

### 最後に

最後まで閲覧頂きありがとうございました。

`Tailwind CSS`にフォーカスした開発を行うことで、今までは面倒なものという認識だった CSS の面白さを知るきっかけになりました。
実装イメージが何となく掴めたので、忘れない内に`React`等でも試しておきたいです。

設計思想はともかく、強みのあるフレームワークのためこれを機に是非試してみてください！
基本は公式ドキュメントとエディタを同時に開いて、調べながら実装するとスムーズでした。
今回の実装で困った箇所はすべて公式で解決できています。

---

なお最近はペンギン分類の CNN を作っており、教師データを漁ってペンギンを愛でて時間が消し飛んでいきます。

良ければ覗きに来てください。
Star いただけると泣いて喜びます。

https://github.com/kagami-tsukimura/pengiuin-image-classification

本記事がお役に立てば幸いです！

### 参考 URL

https://tailwindcss.com/

https://app.netlify.com/

https://kagami-portfolio.netlify.app/

本記事で紹介したサイトは下記講座をベースに作成しました。

https://www.udemy.com/course/tailwindcss-for-beginner/
Github / git – 複数のリバートコミットを作ってPRを作成する方法のメモ

# 例

mainブランチの中で2個のコミットを選んでRevertしたい場合

## gitでの操作

```
git switch main
git checkout -b <てきとうなブランチ名>

git revert (1個目のコミットハッシュ) (マージコミットではなく元のコミット)
git revert (2個目のコミットハッシュ) (マージコミットではなく元のコミット)

git push
```



## Githubでの操作

`main < <てきとうなブランチ名>` のPRを作成



# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
wp-envで環境を作成する

# デプロイ先の環境と同じ環境を用意する
## 用意するもの
- docker desktop
- wp-env (この記事では8.7.0を使用)

### 下準備
globalにwp-envをインストール
```
npm -g i @wordpress/env
```
themeのルートに移動
```
cd themepath
```

### wp-envを書いていく
そのまま `wp-env start` を使っても使えるけど、環境を指定したい

今回は以下の環境を作ります。
- wordpress 5.7.9
- php 7.3

theme dir のルートに`.wp-env.json`を作成する
```.wp-env.json
{
  "core": "WordPress/WordPress#5.7.9",
  "phpVersion": "7.3",
  "themes": ["."],
  "plugins": [
    "https://downloads.wordpress.org/plugin/advanced-custom-fields.6.1.7.zip",
    "https://downloads.wordpress.org/plugin/query-monitor.3.10.1.zip"
  ],
  "config": {
    "FS_METHOD": "direct"
  },
  "mappings": {
    "php.ini": "./php.ini"
  }
}
```

### 詳細
- "core" はwordpress githubのbranch名を指定するらしい
- "phpVersion" はdocker hub のwordpress imageを取って来る際に使うのでdocker hubをみて指定したいversionがあるか確認した方が良い
- "themes" このthemeを使う
- "plugins" あらかじめインストールするpluginをリストで指定する。ACFとquery-monitorをしていしてる
- "config" あとでpluginを入れたくなった時にこの記述があるとそのままインストールできる。無いとFTPサーバーを指定しないといけない
- "mappings" dokcer containerのphp.iniを自分で書いたものに置き換える

デフォルトのupload limitが2MBなので64MBに変更
```php.ini
upload_max_filesize = 64M
post_max_size = 64M
```

忘れないようにメモ
【VRChat Udon#】NukoTweenを使ってU#で簡単に文字送りアニメーションを作れたので共有したい

こんにちは、VRにクソハマり中のきくはなです。

つい先日、UdonSharpの勉強がてら新しくVRChatワールドを制作していました。

そこで、RPGやノベルゲームでよく見るようなテキストの表示をしてみたいと思った矢先、NukoTweenというU#用の開発パッケージが使えると知りました。
とても便利な開発ツールだと感じたので、備忘録もかねて紹介記事を書くことにします。

# そもそも：Tweenとは何か

私は今回のワールド制作までTweenアニメーション系アセットに触れたことが無かったので、勉強もかねて調べてみることにしました。

> トゥイーン（tween）とは、between（中間）に由来する言葉で、2つのイラストが変化しながら繋がるアニメーションのことを「トゥイーンアニメーション」といいます。
引用元：http://juen-cs.dl.juen.ac.jp/html/flash/04/01/explanation.html

一般的にはこういった意味合いがあるようです。
Unityにおいては、物体の移動や回転、Audioやマテリアルの変更など様々な対象の変化を、ある時点から別の時点までのアニメーションとして実現できる仕組みのようです。

[iTween](https://assetstore.unity.com/packages/tools/animation/itween-84?locale=ja-JP) や [DOTween](https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676) というアセットが主流のようですね。

# NukoTweenとは

https://github.com/nukora/NukoTween

> NukoTweenはUdonで実装されたTweenアニメーションエンジンです。
VRChatで使用する事を目的としています。

NukoTweenはnukoraさんが開発したUdon用のTweenアニメーション系アセットです。
さっそく使ってみましょう。

# 文字送りアニメーションを作る

インストールをして、[README](https://github.com/nukora/NukoTween#readme) のサンプルコード"TweenCube"を実行したところから始めます。
まずは、TweenCube.csをテキスト表示機能を持つスクリプトに変更します。

```C#:TweenCube.cs
using UdonSharp;
using UnityEngine;
using UnityEngine.UI; //追加
using VRC.SDKBase;
using VRC.Udon;

public class TweenCube : UdonSharpBehaviour
{
    public NukoTween.NukoTweenEngine tween;
    public Text target;

    public override void Interact()
    {
        tween.TextTo(target, "これはテストです", 1.0f, 0.0f, 0);
        //インタラクト後、すぐにテキスト表示
        tween.TextTo(target, "2個目のコメントです", 1.0f, 5.0f, 0);
        //インタラクトの5秒後にテキスト表示
    }
}
```
Textを扱うため、`using UnityEngine.UI;`を追加しましょう。
テキストの文字送りアニメーションは`tween.TextTo()`で可能です。
第一引数はTextオブジェクト、第二引数は表示する文字列です。
第三引数は一文字ずつ表示するスピードに関わります。大きければゆっくり表示され、0にすると一瞬で表示されます。
第四引数はテキストを表示するタイミングです。
第五引数はイージング関数です。特にこだわりが無ければEaseLinear (線形変化) の`0`で良いでしょう。
GameObject->UI->Textから生成したTextオブジェクトをComponentに適用するのを忘れずに。

## 実行してみる
変更したスクリプトを実行すると次のような動作になります。
![Qiita001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659212/37236016-aeae-6395-24f4-1d90c45406df.gif)
上手く動作できたか確認してみましょう！

# あとがき
今回は文字送りアニメーションの実装としてNukoTweenを使いましたが、他にも様々な機能があります。
これらの機能を上手く使って、より独創的なワールドの制作を続けていきたいと感じました！
Python: import文は一度しか実行されない

# <font color="red">**はじめに**</font>
モンテカルロ・シミュレーションなど，ループを使って値を変化させながら計算処理を行うプログラムを書きたいときがあります．
その際，私は```import```の役割を勘違いをしており，悩まされた事があったので記録しておきます．

## importとは？
```import```はモジュール，ライブラリなど外部のファイルを読み込むときに使用します．
具体的に何をしているかは詳しく理解していないのですが，どうやら```import```は読み込む際にファイルの中身を実行しているみたいです．
この記事を参照してみてください．
[10分で分かるPythonのimport](https://qiita.com/kz23szk/items/5614fc3f05f0f7cf61ef)

## importの勘違い
私が勘違いしていた事は，```import ファイル名```が処理される度に，ファイルの中身が毎回実行されていると思っていた点です．
実際は最初に処理される```import ファイル名```のみファイルの中身が実行され，初回以降の```import ファイル名```はファイルを読み込むだけのようです．

これを勘違いしていると，どういうときに困るのか紹介します．

### 間違った具体例
ランダムな値を生成するファイルを5回実行するプログラムを作成したいと思います．


まずランダムな値を生成するファイル，```test_call.py```を用意します．
```python:test_call.py
import random
a = random.random() #ランダムな値を生成
```
そして上記のファイルを読み込んで5回実行するファイル```test.py```を用意します．
```test.py```と```test_call.py```は同じディレクトリに作成します．
```python:test.py
for i in range(5):          #5回繰り返す
    print(str(i+1)+"回目:")  #何回目のループか表示
    import test_call        #test_call.pyを読み込む
    print(test_call.a)      #生成された値aを出力する(確認用)
```

ファイル構成はこんな感じです．
```:ファイル構成
test_folder
├─ test.py
├─ test_call.py
```


```test.py```を実行すると結果はこうなりました．
```:間違った具体例　実行結果
1回目:
0.01207048120170262
2回目:
0.01207048120170262
3回目:
0.01207048120170262
4回目:
0.01207048120170262
5回目:
0.01207048120170262
```
5回```test_call.py```を読み込んでも値```a```は1回目から変化せずに，初回に生成した値```0.01207048120170262```が維持されています．
これは1回目のループでしか```test_call.py```が実行されてない証拠です．

#  <font color="red">**ではどうすればよかったのか？**</font>
5回ランダムな値を生成する結果を得るには，解決策は主に3つ考えられます．
- 動的インポート(Dynamic Import)を使う．
```importlib```という便利な標準ライブラリがあり，```importlib.reload()```で何度も実行出来る．
```importlib.reload()```はモジュールをリロードするコマンドで，ファイルを再読み込みが出来るため，一度読み込んだ後に変更があった場合，変更を反映させることが出来る．


- ```subprocess```モジュールを使って．外部ファイルを実行する．
この記事を参照してみてください．
[【subprocess】Pythonのコードの中で別のPythonプログラムを実行したいとき](https://qiita.com/melka-blue/items/03cc2d7c68b7cfdbd110)

- 外部ファイルに関数としてプログラムを定義して，呼び出す．
```test_call.py```で```def 任意の関数名()```を使って，ランダムな値を生成して出力するプログラムを定義する．
```test.py```で```任意の関数名()```を入力すれば出力出来る．

###  <font color="red">**正しい具体例**</font>
先程の```test.py```を次のように書き換えて実行してみます．
ここでは```importlib```を使用してみます．
```python:test.py
import importlib, test_call
for i in range(5):              #5回繰り返す
    print(str(i+1)+"回目:")      #何回目のループか表示
    importlib.reload(test_call) #test_call.pyを読み込む
    print(test_call.a)          #生成された値aを出力する(確認用)
```
結果はこうなりました．
```:正しい具体例　実行結果
1回目:
0.12550873557544917
2回目:
0.7754000872698203
3回目:
0.8982510719027913
4回目:
0.931713339185291
5回目:
0.9614093168596568
```
毎回違う値が出力されているので，しっかり```test_call.py```が実行されている事が分かります．
OSS-DB SilverにほぼPing-tだけで受かった話

OSS-DB Silverに合格したので、合格までの道のりを記録していく。

結果： 72/100 点
セクションごとの正解率
一般知識：100%
運用管理：61%
開発/SQL：75%

受験はテストセンターで実施、今は自宅でも受けられるようだがカメラ機能をオンにした状態で
受ける必要があるらしく、変に緊張しそうなのでテストセンターを選択。

試験開始までに色々と手続きや写真撮影などが必要なので余裕を持って会場に着く必要があった。

## 筆者受験時の状況

・IT業界1年目社員（中途、WEBマーケター的な仕事）
・私立大学卒（食品系）
・ほぼ文系
・SQLは木田さんのBigQueryの本↓を一通りやったことがある程度（業務では使っていない）
https://www.amazon.co.jp/%E9%9B%86%E4%B8%AD%E6%BC%94%E7%BF%92-SQL%E5%85%A5%E9%96%80-Google-BigQuery%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%83%87%E3%83%BC%E3%82%BF%E5%88%86%E6%9E%90-%E3%81%A7%E3%81%8D%E3%82%8BDigital/dp/429501074X

## 受験理由

なんとなくSQLの資格が欲しいと思ったため。
今後業務でBigQueryを使用する機会が出てくる可能性があるため、
クエリの書き方など復習をしていたが、ついでに資格を取ってしまえば色々なところに
書けるし良いかな、程度に考えていた。

## どのぐらいの期間勉強したか

およそ1ヶ月

## 勉強方法

具体的な勉強方法としては、基本的にping-t一択である。
有料教材ではあるものの、内容が充実していて、お気に入り機能や
問題ごとの正誤履歴機能があるため、復習がとてもしやすい内容となっている。
大体500問ぐらいある教材にはなるが、こちらを完璧にしておけば8割は取れると思う。

（筆者は残念ながらかなり早い段階でとりあえず受けてみようの精神で挑戦したため、
受かりはしたものの8割以上の点数は取れなかった。）


ping-tの使い方としては、私はまず一通りの問題を解いてみようと思い、
一旦500問全てを解くように取り組んだ。流石に量が多いので、1日20-50問程度を
確実にこなしていくように取り組んだ。

一通り解き終わったら、次は各分野ごとに集中して取り組んだ。
約10個ほどの分野に分かれており、それぞれを8割程度理解できるぐらいになるまで、
ひたすら繰り返し取り組んだ。

この時、間違った選択肢を正しく直すように解く、ということを意識した。
どうしても同じ問題を何度も繰り返していると答えだけを覚えてしまい、
これがなぜ正解なのかはわからない、ということを避けるためである。

また、例えば5つの選択肢がある問題で、正解だけを覚えてしまうと
1つの内容しか覚えられないが、間違った選択肢に意識を集中すると4つ分の内容を
覚えることができるため、時間はかかるが結果的にこちらの方が他の問題への
応用も効いてくると思う。

このようにして500問をそれぞれ2-5回以上解いて、ある程度知識が身についてきたら
あとはひたすら模試を受けた。

ping-t内には、模試機能があり、500問の中からランダムで50問を選んで
出題してくれる機能となっている。

これを1日、1-2回行い、間違った問題を復習、というのをひたすら繰り返し、
間違った問題で特に不安な箇所はお気に入りに入れて、あとでまとめて復習、
という感じで、ひたすら数をこなしていった。

まとめると
まずは一通り解く
→各分野ごとに取り組んでいく
→それぞれの分野ごとの内容が固まったら模試
→ひたすら模試をやって、間違った問題復習の繰り返し
という感じである。

## 実際受けてみて

実際に受けてみて、8割程度がping-tの内容と同じ感じだなと思った。
残り2割は聞いたことあるようなないような、というイメージの問題で、
この辺りは捨てるか、という印象を持った。

勉強している時からもそうだが、BigQueryを一通りやったことがあったため、
クエリの実行結果や関数に関する問題は難なく解答することができたと思う。

もう少しping-t内の正答率が低い問題やお気に入りに入れた不安な問題を復習して
固めておけば、8割以上取れたかもな、と思った。


今後OSS受験予定の方の参考になれば幸いです。
Androidでhttp通信に失敗した話

# はじめに
Android Studio を使って天気予報アプリを作るときに、API から情報を得るため http 通信を行う必要があります。
そのときにかなり苦戦したのでメモとして残しておこうと思います。
初心者のため、間違いがあれば教えてくださると嬉しいです。

# http通信の開始
## http通信の許可
インターネットに接続するために、インターネットへの接続を許可する必要があります。
また、Android 9 以降ではhttp通信が許可されていないのでマニフェストファイルに明示的に記述する必要があります。

```xml:AndroidManifest.xml
 <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:usesCleartextTraffic="true"
```

## 通信失敗
その後、Android Studio でエミュレータを起動し、実行してみると http 通信を行うことができずクラッシュし、アプリが停止してしまう事態が発生しました。
エミュレータ上の画面ではWiFiに繋がっているようなのですが、どうもうまくいきません。

色々なことを試行錯誤した挙句、以下の記事の内容が原因であるとわかりました。

[[Flutter]Androidエミュレーターが突然インターネット接続できなくなった場合の対処法](https://minpro.net/android-emulator-wifi-connected-with-no-internet)

もしかすると設定していたAPIレベルが低くて自動でAndroidWifiがつながらない現象が起きたのかもしれません。

記事の内容通り、

1. エミュレータのスマホの設定画面から「ネットワークとインターネット」を選択する
1.  「AndroidWifi」を選択後、「詳細設定」を開く。
1.  「IPアドレス」と「ゲートウェイ」を記録しておく。
1.  「IP設定」を「静的」にし、先ほど記録したIPアドレスとゲートウェイを入力する。
1.  「DNS1」が「8.8.8.8」、「DNS2」が「8.8.4.4」であることを確認して、再度アプリを起動する。

この手順を踏んだあとにアプリで http 通信を行えば、アプリがクラッシュせずにすみました。

# 最後に

もし Android Studio で開発していて http 通信が行えず悩んでいる人がいましたら、Wifiがきちんとつながっているか確認してみてください。
筆者はWiFiがきちんとつながっていなかったので、通信がうまく行えず時間を浪費してしまいました。
少しでも皆さんの助けになれば嬉しいです。

# 参考文献

- [１時間ごとの天気予報アプリ(Kotlin, OpenWeatherMap)](https://qiita.com/Myuya/items/6fa0df848238b9581f79)
- [[Flutter]Androidエミュレーターが突然インターネット接続できなくなった場合の対処法](https://minpro.net/android-emulator-wifi-connected-with-no-internet)
Lispからラムダ計算へ　ー発見の旅ー

# 懐古
Lispをはじめて学んだ頃のことでした。lambdaという記述がでてきます。これは何？　これはギリシャ文字のλのことであり、どうやらラムダ計算という分野が存在するらしいことを知りました。よくはわからないけれども、どうやらλはLispにおいて重要な概念らしいことはわかりました。計算論の本を買い込んでこのラムダ計算について独学を始めたのはLispを学んでしばらく経過してからでした。Easy-ISLispを実装していた頃のこと、正しく動作していることを確認すること、ラムダ計算を深く理解することを目標としてLisp上にラムダ計算のインタプリタを作ることとしたのでした。
![bandicam 2023-09-02 15-35-00-386.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33927/9ed2f3fe-cc83-4477-391a-341553aa7e81.jpeg)



# 定義とLisp上での表現
（１）変数x0,x1,・・・はλ式である。
（２）Mがλ式でxが変数のとき、(λx.M)はλ式である。
（３）MとNがλ式のとき (MN)はλ式である。

インタプリタを簡単にするために変数はアルファベット1文字とすることとしました。x,y,zはそれぞれ変数ということにしました。x1という表現はインタプリタ上は変数とはしないこととしました。

λはインタプリタ上では^をもって表現することとしました。したがって　(λx.x)はインタプリタ上では(^x.x)と表記します。

M,Nといった大文字はそれ自体がλ式であるとインタプリタ上でも解釈することとしました。


# 省略記法
λ式は引数を一つだけしかとれません。つまりλx.(λy.(λz.M))という表現となります。しかし、これはカッコが多くなり見にくいです。λxyz.Mという省略記法が許されています。インタプリタにおいても同様に ^xyz.Mという表記が許容されています。

ABCDは((((AB)C)D)の省略記法です。インタプリタにおいても同様にABCDという表記法が使えます。


# 適用
(MN)というのはラムダ式Mにラムダ式Nを関数適用すると言います。Lispのapplyが実際に計算してその値を渡すのに対してラムダ計算においては置換するのみです。この置換をひたすら繰り返し関数適用していくのがラムダ計算です。


# 実行例
読者のみなさんはそろろそうんざりしてきたかもしれません。実際にインタプリタを動かして確認してみましょう。ラムダインタプリタはEasy-ISLispのexampleフォルダに収録されています。

```
> (load "./example/lambda.lsp")
T
> (repl)
Lambda calculus interpreter 
To quit enter 'end'
L> ^x.x
^x.x
^x.x

```

ラムダインタプリタは途中経過を表示するようにしてありいます。^x.xはこれ以上簡約化できないのでそのまま^x.xが表示されます 。

もうすこし複雑なことをやらせてみましょう。

```
L> (^x.x)(^y.y)
(^x.x)(^y.y)
^y.y
^y.y
L>  

```
引数xには(^y.y)が渡されますから結果は^y,yとなります。


# コンビネーター
上記の例は単純でした。興味深いものを試してみましょう。

```
I = ^x.x
K = ^x.^y.x
S = ^x.^y.^z.xz(yz)
Y = ^y.(^x.y(xx))(^x.y(xx))

L> Iy
(^x.x)y
y
L> 
```

大文字のIには^x.xに紐付けられています。Iyは(^x.x)yと同じ意味です。ところで次を試すと面白いこと結果が得られます。

```
L> SKK
(^x.^y.^z.xz(yz))(^x.^y.x)(^x.^y.x)
(^x.^y.^z.xz(yz))(^x.^y.x)
^y.^z.(^x.^y.x)z(yz)
^z.(^x.^y.x)z(yz)
(^x.^y.x)z(yz)
(^x.^y.x)z
^y.z
^z.z
L> 

```

単純な式に置き換えられました。^z.zは^x.xと同じ意味であり、Iですね。つまりSKK=Iということになります。不思議ですね。これらの大文字であらわされるものをコンビネーターと言っています。



# 不動点演算子 
Yという名前の付いたコンビネータが残ってました。これはとても不思議です。次をご覧ください。

```
L> YM
(^y.(^x.y(xx))(^x.y(xx)))M
(^x.M(xx))(^x.M(xx))
M((^x.M(xx))(^x.M(xx)))
M((^x.M(xx))(^x.M(xx)))
L> 

```

置き換え後もYと同じような結果が出てきました。よく見るとこれはM(YM)と同じですね。つまりYM=M(YM)です。このYはcurryの不動点演算子と呼ばれます。

curryはプログラミング言語Haskellのもととなった Haskell Curryさんの名前です。実業家かつLisperのポールグレアム氏が自分の会社の名前をY-combinatorとしたのはこのYに由来するそうですよ。

![bandicam 2023-09-02 18-18-48-897.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33927/670d896f-494f-7d5e-441d-ceda40c0df1f.jpeg)


# Lispとラムダ計算の違い
マッカーシー博士はラムダ計算の理論をベースにしてLispを考案しました。でも、Lispはラムダ計算と同じというわけではありません。ラムダ計算は置き換えにより計算を進めました。しかし、Lispはみなさんご存知のようにその都度、値を計算してその値を次の関数の入力として引き継ぎます。Haskellはラムダ計算の仕組みに近いです。遅延評価です。値が必要とされるまで計算されることはありません。


# 詳しいことは専門書で
大雑把にラムダ計算のことをインタプリタの動作を通じてご紹介しました。もっと詳しいことは専門書をお読みください。ラムダ計算のことを深く知るとさらにLispが好きになることでしょう。

上記のラムダインタプリタはEasy-ISLispのexampleフォルダに収録してあります。BSDライセンスです。ご自由にお使いください。

Easy-ISLisp https://github.com/sasagawa888/eisl
Xcodeでスペルミスを見つける方法

普段Androidの開発をしています。
SwiftUIを勉強中なので、Xcodeを使用しているのですが、スペスミスを発見しました。

そういえばAndroidStudioはスペルミスを教えてくれる機能があるので、Xcodeでも同じような機能があるのか調べてみました。


Edit → Format → Spelling and Grammar → Check Spelling While Typing をクリックします。

![スクリーンショット 2023-09-03 15.56.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/10ab03e8-aa68-581c-2849-73031018b8a3.png)

こちらの設定をするとスペルミスを見つけてくれます。
AWS Lambda(python)でLINEへ通知する (EC2スポットインスタンス自動化2) 

# 背景(再掲)
個人向けに最低費用で運用するため、Ec2をスポットインスタンスで使用しているが、時々スポットリクエストが中断される。その都度、再度スポットリクエストで立ち上げなおしているが、この処理を自動化したい。

# 大まかな流れ(再掲)
スポットインスタンスの中断はイベント通知されるので、それをトリガとして、立ち上げ処理を行う。

全体の流れは第1回参照。本記事はスポットリクエストの中断イベントから対象の情報を取得する部分が対象。

# 記事の全体
1. [AWS BackupでEC2のAMIが作成されるので、その最新のAMI IDをイベントから取得してParameterStoreに登録する。](https://qiita.com/silv224/items/0c1d157d34cd8ffb651b)
1. [AWS Lambda(python)でLINEへ通知する。](https://qiita.com/silv224/items/37453c8e7401f3a77d5f)**←今回の内容**
1. [AWS Lambda(python)でEC2スポットリクエストを実行する。](https://qiita.com/silv224/items/e089df858dc518a99713)
1. [AWS Lambda(Python,boto3)でElasticIPを付け替える。](https://qiita.com/silv224/items/5e5d4b07a92aa10d1bee)
1. [Step FunctionでLambdaでスポットリクエストを実行し、ElasticIPを付け替える。](https://qiita.com/silv224/items/1d8f425eca0f31db7236)

# 通知用Lambda

スポットリクエストを実行した結果をLINEで受けとりたいので、通知用のLambdaを用意しておきます。
eventデータとして、LINEに通知する内容を受けることを前提にしています。
解説は色々な記事があるので割愛します。
(TOKENなどはLambdaの環境変数に設定し、コードへ記載しない形としています。)

```(想定イベント).json
[
    {
        "type" : "text",
        "text" : "test event"
    },
    {
        "type" : "sticker", 
        "packageId" : 6370, 
        "stickerId" : 11088017
    }
]
```

```(通知用Lambda関数).py
import os
import json
import requests

line_notify_api = os.environ.get('LINE_NOTIFY_API')
line_notify_token = os.environ.get('LINE_NOTIFY_TOKEN')
user_id = os.environ.get('USER_ID')

def lambda_handler(event, context):
    print('event:' + json.dumps(event))
    return notifyToLine(event['messages'])

def notifyToLine(messages):
    data = {
        'to' : user_id,
        'messages' : messages 
    }
    headers = { 'Content-Type' : 'application/json',
                'Authorization' : 'Bearer ' + line_notify_token}
    r = requests.post(line_notify_api, headers=headers, data=json.dumps(data).encode())

    return str(r.status_code) + r.text
```
MySQL(MariaDB)をcronで自動バックアップする

mysqldumpでMySQL(MariaDB)のバックアップを定期的に行えるようにします。

## 注意
:::note warn
MariaDB 10.3.38で実行しています。
バージョンによってはこの記事の通りに動作しないかもしれません。
`$mysql --version`や`select version()`でバージョンを確認しておきましょう。
```bash
$ mysql --version
mysql  Ver 15.1 Distrib 10.3.38-MariaDB
```
:::

***

* `/var/mysql_backup`に日付の書かれたsqlファイルを保存します
* 10.3ではシェルスクリプトに直接認証情報を書けないのでconfファイルに記入しています

## cron追加
crontabやらconf.dやらで追加してください。
毎日4時にrootで`/var/mysql_backup/mysql-backup.sh`を実行し、その結果を`/var/mysql_backup/mysql-dump`に出力しています。
```
0 4 * * * root /var/mysql_backup/mysql-backup.sh > /var/mysql_backup/mysql-dump
```

## バックアップ用シェルスクリプト (mysql-backup.sh)

```sh
Date=`date +%Y%m%d`
backupDir="/var/mysql_backup"

mysqldump --defaults-extra-file=/var/mysql_backup/mysqldump_backup.conf -F -q --single-transaction --add-drop-database --all-databases > ${backupDir}/${Date}.sql

find ${backupDir} -mtime +7 -exec rm -f {} \;
```

## 認証情報 (mysqldump_backup.conf)

```conf
[mysqldump]
user=backupuser
password=P@$$w0rd
```

***

実行して、`/var/mysql_backup`内にmysqldumpのファイルが生成されていたら成功です。


## 参考元
以下の記事を参考に作成しています。

https://blog.yukemuringo.com/?p=799

https://otonan-syusyoku.work/archives/1250
【Git】もしGitでGPGによる署名を使用したくなく、SSHのみでコミットやプッシュ等を行いたい場合

## やりたいこと
もしGitでGPGによる署名を使用したくなく、SSHのみでコミットやプッシュ等を行いたい場合は、以下の手順でGPGの署名を無効にすることができます。

## 手順
### 1.コンピューター上のすべてのリポジトリに対してGPG署名を無効にする
```zsh
git config --global commit.gpgsign false
```

### 2.単一リポジトリの Git GPG 署名を無効にする
```zsh
git config commit.gpgsign false
```

GPG 署名を再度有効にしたい場合は、上記falseをtrueに置き換えてください。
Tableau グラフのヘッダーや軸を上に移動させる

## はじめに
WindowsかMacかデスクトップかノートか、Vizを見る環境によって画面サイズが異なります。
グラフには適切なサイズで固定することが多い為、行ディメンションが多かったりでVizが縦に長いと、
環境によってはスクロールしないとヘッダーや軸が見切れてしまう事があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/3a4030f9-62a3-3da7-ba7c-5777c5be0973.png)
↑ちなみに僕はMacBookPro１３インチでTableau Cloudを見る時に発生します。
本来Vizのスクロールの外にヘッダーがいるので問題ないのですが、Vizではなく、ページ自体にスクロールが発生してしまっている。
（**しかも編集中は画面内にちゃんと収まるので厄介**）

ので、グラフの上に持ってくる方法の備忘。

パターンによって方法が異なります。
①グラフが垂直の場合
②グラフが水平の場合

### ①グラフが垂直の場合
Tableau desktopを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/75af6ee6-3779-4781-75cd-4745399c7df8.png)
デフォルトの状態だと↑の状態なので、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/ab71d36e-67f2-c076-ed16-66eab854fc13.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/3414c243-33fb-3b71-572b-b04e9d513556.png)
「分析>表のレイアウト>詳細>垂直軸がある場合は、ビュー下部にシェルフ右端のディメンションを表示する垂直軸」の**チェックを外します**。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/1494d30e-007d-1bc1-e625-d17454683633.png)
すると、ヘッダーを上に持ってこれます。



### ②グラフが水平の場合
こちらはTableau desktopなしでもできます。（スクショはdesktopですが；）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/0921329b-920a-7bc8-a3a5-94c13d4373e3.png)
↑デフォはグラフ下部に表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/d433f45c-bb9e-464c-ecf8-716a1c268545.png)
メジャーを複製して二重軸にすることで二つ目の軸が上部に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/679bc69e-11db-cca5-3d54-4e5f484f5627.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/a06b4c21-251b-1256-6c3d-4fb590851f99.png)
表示がうるさいから上だけでいいよ！という場合は、下部の軸を「軸の編集」でタイトルと目盛りを消してしまいましょう。

注意点としては、
・複製した故に同一の軸扱いなので、ヘッダーの表示のチェックをオフにしてしまうと上下ともに消滅してしまいます。
・ヘッダーの幅は上下同期しているので、やや下部に余白が残ってしまいます。
・ラベルを表示したい場合はラベル分軸がズレてしまうので、「軸の同期」をしておきましょう。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986320/5750531d-cd0c-b4b1-0b52-43527b7e2298.png)
すると、このようにグラフの上部にだけ軸を表示できました。

以上です！
トークン複数ユーザ宛の一括配布バッチ機能を実装してみる

今回は、トークン配布のためのバッチ機能を実装してみました。
アドレスと送信するトークン数が記載された一覧を用意し、バッチ処理のなかで一覧を参照し連続的にトークンを送信するというものです。

## 動作確認環境
今回も、Genesys netwrok testnetを使用します。
Genesys netwrok testnetの環境はこちら。参考として執筆時点の情報を記載します。

| 区分 | 内容 | 補足事項 |
|:--|:--|:--|
| Fauset URL |  https://faucet.genesys.network/ | テスト用のトークンはこちらから入手できます |
|  RPC URL |  https://testnet-rpc.genesys.network/ | リクエストのエンドポイントです | 
|  API URL |  https://testnet-gchainexplorer.genesys.network/api | APIのエンドポイントです | 
|  Block Explorer |  https://testnet-gchainexplorer.genesys.network | ブロック状態が確認できます | 
|  Network ID |  0xa5c8(42440) |  | 
|  Decimals |  18 |  | 

## 用意するもの
* 配布に使用するトークンSolidityソースコード（デプロイ時にトークンを発行します）
* バッチ処理をするSolidityソースコード
* スマートコントラクトにバッチ処理をリクエストするJavaScriptソースコード

## ソースコード
今回実装してみたソースコードはこちらに置いていますので、参照くださいませ。

https://github.com/qiita-mobileapps/batch-token-transfer-app-example

## セットアップと実行手順
### 1\. トークンコントラクトのデプロイ
配布用のトークンコントラクトをデプロイします。
```shell
$ cd contracts/tokenContact
$ cp .env.example .env
```

.env ファイル内の各ディレクティブの値を変更します。
```
PARAM_ENDPOINT=<<RPC URLを設定してください。>>
PARAM_ENDPOINT_CHAINID=<<エンドポイントチェーンIDを設定してください。>>
PARAM_DEPLOY_PRIVATE_KEY=<<デプロイするアカウントの秘密キーを入力してください。>>
```
デプロイ先のチェーンのトークンを取得するには、特にテストネットにデプロイする場合に、Faucet からトークンを取得できます。

```
$ npm install
$ npm run deploy
Token code Address: 0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
実行後、Token code Addressをメモします。

### 2\. バッチコントラクトのデプロイ
バッチ処理を行うコントラクトをデプロイします。
```shell
$ cd contracts/batchContact
$ cp .env.example .env
```
.env ファイル内の各ディレクティブの値を変更します。
```
PARAM_ENDPOINT=<<RPC URLを設定してください。>>
PARAM_ENDPOINT_CHAINID=<<エンドポイントチェーンIDを設定してください。>>
PARAM_DEPLOY_PRIVATE_KEY=<<デプロイするアカウントの秘密キーを入力してください。>>
PARAM_DEPLOY_TOKEN_ADDRESS=<<トークンコントラクトのアドレスを入力してください。>>
```
次にコマンドを実行します。
```shell
$ npm install
$ npm run deploy
Batch code Address: 0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```
実行後、Batch code Addressをメモします。

### 3\. トークン転送設定
```shell
cd <Navigate to the root directory of the cloned folder>
cp .env.example .env
```
.env ファイル内の各ディレクティブの値を変更します。
```
PRIVATE_KEY=<<ウォレットアカウント用の秘密キーを指定してください。>>
CONTRACT=<<バッチコードコントラクトのデプロイアドレスを指定してください。>>
RPC_NODE=<HTTPS://*****形式でRPCノードのURLを指定してください。>
BATCH_SIZE=<<1回のリクエストで送信するアドレス数を指定します。>>
GAS_PRICE=<<ガス価格の数を指定してください。>>
GAS=<<ガスの数を指定してください。>>
```

## 一括転送の実行方法
addressList.csvにアドレスと送金額をリストします。
```shell
$ vi src/addressList.csv
```
addressList.csv の内容は次のとおりです。
```
0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,2
0xYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY,3
0xZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ,5
```
addressList.csv を保存し、編集を終了します。

一括配信する合計トークン数をBatch code Addressに転送したら、実行してみましょう。
```shell
$ node src/token-transfer.js
From Token forwarding 0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Estimated Gas: 174184
Current Gas Price: 5000000000
Token forwarding started
------------------------
Allocation + transfer was successful. 174184 gas used. Spent: 870920000000000 wei
Token forwarding done.
```

「Token forwarding done.」と表示されたら転送は完了です。BlockExplorer で受信者のアドレスを確認できます。

## さいごに
みんなでトークンを所持させたい場合などに利用できるかと思います。
参考までに見ていただければ幸いです。
Ubuntu22.04.03LTSでCUDA11.8がインストールできない

:::note warn
2023/10/7に再度試したところ、正常にインストールできるようになっていた。修正されたらしい。
:::

LLM用の環境が壊れたのでOSから再インストールしようと思い作業したらハマったのでメモ。

〇症状
2023/09/03にUbuntu22.04.03LTSでCUDA11.8をインストールしようとするとインストールプロセスに中に以下のメッセージが出てプロセスが完了しない。
```error meassage
Errors were encountered while processing:
nvidia-dkms-520
cuda-drivers-520
cuda-drivers
nvidia-driver-520
cuda-runtime-11-8
cuda-11-8
cuda-demo-suite-11-8
cuda
E: Sub-process /usr/bin/dpkg returned an error code (1)
```

上を見ていくとDKMSの処理でこけているらしい。
細かいバージョンは違うが症状を見ると大体こちらの事象と同じ。
https://forums.developer.nvidia.com/t/cant-install-cuda-11-8-on-ubuntu-22-04-lts/263227

〇解決策
CUDAのバグか、直近Ubuntuの更新でカーネルバージョンが6系に上げられたことが原因のようだったが、必ずしもCUDA11.8である必要はなかったので12.2をインストールした。（pytorchの公式サポートがearly版でも12.1までだったので少し躊躇われたがとりあえず動いたので良しとする）

〇その他試した方法
・カーネルバージョンを5.13まで戻す
　⇒失敗。インストールはできたが6系を削除する際に逆に6.2系で上げられそうになる。
・古いバージョンのUbuntuを入れる
　⇒セキュリティの懸念があるので断念。
<cicd> Next.js13 を Cloudflare pages に GitHub Actions から Deploy する

最近はとりあえず Cloudflare Pages へデプロイすることが多くなってきました。

Cloudflare Pages は素晴らしいサービスで remote repository への push を自動で検知してデプロイしてくれますよね。
ただ、テストを挟みたい時があるかと思います。

そこで今回は GitHub Actions で一通り テストが実行されてから deploy するような workflow を書いてみました。

# 環境
- Next.js 13 (app router)
- cloudflare pages(edge)
- node 18
- pnpm 8

# 流れ
Next.js 13 のプロジェクトを作っている。


1. Cloudflare と GitHub を紐づける
2. GitHub Actions から叩くための Cloudlfare access token を発行する
3. Workflow を作成
 
# 1. Cloudflare と GitHub を紐づける
### Cloudflare 用の package を入れておく。
`pnpm install --save-dev @cloudflare/next-on-pages`

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/

### runtime を node から edge 変更
```tsx:layout.tsx
export const runtime = 'edge';
...
```

### Cloudflare と紐づける
ダッシュボードからアカウントに入る。
Pages を GitHub と紐づけておく。
deployの設定がありますが、デフォルトでok
```
ビルド コマンド: npx @cloudflare/next-on-pages@1
ビルド出力ディレクトリ: .vercel/output/static
ルート ディレクトリ: /
```

https://dash.cloudflare.com/

#### 自動デプロイされてしまうので設定を無効にする
![スクリーンショット 2023-09-03 15.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787586/4d1d3e08-0ca3-8b29-27bb-bdde051ff2f8.png)

# 2. GitHub Actions から叩くための Cloudlfare access token を発行する
こちらのリンクから token を発行します。

https://dash.cloudflare.com/profile/api-tokens

### カスタムトークンを選択

![スクリーンショット 2023-09-03 15.06.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787586/bd4d44ec-1860-40b6-f14b-2fb44c626e49.png)

### permissions を account / cloudflare pages / edit で作成
他は特に指定しなくて ok。
token が表示されるのでコピーしておく。

参考

https://zenn.dev/nwtgck/articles/1fdee0e84e5808

# 3. Workflow を作成 
### 完成系。

https://gist.github.com/wwwyo/3032bfab049b70a0a47bde9a4d21118a

:::note
- 自分は `pnpm` を使っているので pnpm 用の設定を加えています。
- \<project name> は任意の project 名を入れる
:::

大枠は build と deploy の部分を押さえておけば後は自由。
```yml
- name: Build
        run: npx @cloudflare/next-on-pages@1
- name: Publish to Cloudflare Pages
        id: cloudflare_pages_deploy
        uses: cloudflare/pages-action@1
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          projectName: <project name>
          directory: .vercel/output/static
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
```

### api token を設定
2. GitHub Actions から叩くための Cloudlfare access token を発行するでコピーしたものを `secrets.CLOUDFLARE_API_TOKEN` に設定

### account id を設定
https://dash.cloudflare.com/ ここから project があるアカウントを選択してください。

その際の url のドメイン以下の文字列が account id となります。
`https://dash.cloudflare.com/xxxxxxxxxxxxxx`

この xxxx...を`secrets.CLOUDFLARE_ACCOUNT_ID` に設定。

# 完成

こんな感じで push した時に workflow が動きます。
また、1で cloudflare と紐づけているので、bot から PR に通知もきます。

![スクリーンショット 2023-09-03 15.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787586/bd8d704c-98f9-1c9e-c4a1-7cc0811dbbbf.png)


余談ですが、今回は一つの workflow に lint と test と depoy を入れていますが、分けた方が良いかもしれないです。ベストプラクティスがわからないので詳しい方教えてください。
2023年09月何故かベストアンサーをつけてくれない質問

[2023年9月の質問の中から整理します](https://qiita.com/Keiji_otsubo/items/4a2527cafe3fe7d3ba8c)

+ [Chatter Groups challenge](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007GJLTz)
+ [This error occurred when the flow tried to update records: INSUFFICIENT_ACCESS_OR_READONLY](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007HKktx)
+ [Opportunity Field History not seen in fields.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007HLfDa)
+ [Profiles screen](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007IdZIL)
+ [Guidance Tiers in Pricing guidance doesnt have discounts generated](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000A9CM7)

+ [quick start: explore the dreamhouse sample data](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007Ig6Sq)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/3abb90b9-0440-a95f-110d-6d31839d6911.png)

:::note
I think this button is creating a record with an Apex class.
If you can modify the Apex class, please check the code

Otherwise, use the new playground
:::
【学習】Linuxコマンド　Day2

# はじめに



# 今回学んだこと
* 基本のコマンド(pwd,ls,cd)
* コマンドラインの基本操作

### pwdコマンド
→カレントディレクトリ(現在作業中のディレクトリ)を確認するためのコマンド
```
$ pwd
```
Enterキーを押して実行すると作業中のディレクトリが表示される
```
/home/imagata
```
今回ここで表示されているパスは何なのかというと、imagataというユーザのホームディレクトリのパスとなる。
ユーザーごとに自由に編集できるディレクトリとなる。
マシン内の重要なファイルを誤って操作しないためにもユーザが作成したファイルはここに配置する。

### lsコマンド
→ディレクトリの中身を表示するためのコマンド
```
$ ls
```
オプションと引数を指定することが可能なため試してみよう
引数にルートディレクトリを指定する
```
$ ls /
```
実行すると...
```
bin dev home  lib64 mnt proc run srv tmp var
boot etc lib media opt root sbin sys usr
```
といった具合に、ルートディレクトリの中身を確認することができる
次に詳細情報を表示する-iオプションを入力してみよう
上記同様引数でルートディレクトリを指定するので
```
$ ls -l　/
```
このように入力し、実行。
```
total 20
lrwxrwxrwx    1 root root    7 Aug 15 14:29 bin -> usr/bin
dr-xr-xr-x    5 root root 4096 Aug 15 14:34 boot
(以下略)
```
オプションを付けたことにより、デフォルトのlsコマンドから振舞いが変わって、詳細情報を一覧表示している。
### cdコマンド
→カレントディレクトリを変更するコマンド
/home/imagata(ホームディレクトリ)からルートディレクトリに移動してみよう
```
$ cd /
```
実行後,pwdでカレントディレクトリを確認
```
$ pwd
/
```
変更することができました。
便利な機能として引数へハイフンを指定する方法があります。
これを実行することで一つ前のカレントディレクトリに戻すことができます。
そのため上記の例を実行した上で実行すると...
```
$ cd -
```
実行後
```
home/imagata
```
と戻ることができました。


## コマンドラインの基本操作
#### カーソルの移動
シンプルに矢印キーを使ってもよいが、Ctrlキーを使う方法もある
|操作              | 移動先             | 
|:-----------------|:------------------|
| Ctrl + f         |            1文字右 |   
| Ctrl + b         |            1文字左|      
| Ctrl + e         |              右端 |     
| Ctrl + a         |               左端|      


なぜCtrlキーを使った方法を覚えるべきか、という点については、矢印キーはキーボードの離れた位置に存在するため、効率を考えるとCtrlキーを使った方法に慣れたほうが速いということだ。練習しましょう。(自分に言い聞かせてる)
#### 文字を削除する方法
|操作              | 削除対象             | 
|:-----------------|:-------------------------------|
| Ctrl + h         |            カーソル位置の左の文字|   
| Ctrl + d         |            カーソル位置の文字|      
| Ctrl + w         |            カーソル位置から単語の先頭まで|     
| Ctrl + u         |               カーソル位置から左端まで|      
| Ctrl + k         |              カーソル位置から右端まで|     
| Ctrl + y         |               削除した文字列を貼り付け|   

普段のPC操作におけるbackspaceとdeleteキーの代わりとなるCtrlキーでの操作もおそらく手のポジションの都合上覚えておいたほうが良いものと考える。
そのほか、単語ごとの削除などまとめて削除できる機能も時間をカットするためには慣れておいたほうがよいと思った。
#### 入力補完
Tabキーを利用すると途中まで入力してくれたコマンドやパスを補ってくれる
例としてhistoryコマンド(コマンド履歴を確認するコマンド,後述する)に対して行ってみる。
```
$ his
```
スペルを途中まで入力した状態でTabキーを押すと
```
$ history
```
このように補完できる。パスの補完も同様。
#### コマンド履歴を確認
historyコマンドを実行することでコマンドの履歴(過去に実行したコマンド)を確認できる。
実行後(例)
```
1 pwd
2 ls
3 ls /
4 cd/
5 cd -
6 history
```
引数に数値を指定することで直近の数値の個数だけコマンドを表示する
```
$ history 3
```
この場合は
```
4 cd -
5 history
6 history 3
```
このように確認できる。
これらの履歴から再利用する場合は「!」マークに履歴に表示された対象のコマンドの番号を付けて入力する
```
$ !4
```
こちらはcd -を実行することとなる
## おつかれさまでした
Linuxについての学習は始まったばかりですが、最初のうちから一つ一つの動作に対して時間を削減したり効率を意識することで作業もそうですが、学習スピードを向上させることができると思っています。
記憶に定着させることも重要ですが、体で覚えることを重視したいと考えます。
特に今回学習したコマンドは頻回に使うことでしょうし、頭で思い浮かべるよりも先に手が動くといったところまで練習したいと思います。
Databricksのテーブルで頻繁に実行されるクエリーの特定

意外と知られていない機能かもしれないと思いました。

https://docs.databricks.com/ja/data/table-insights.html

Unity Catalogのデータエクスプローラからアクセスできます。

テーブルにアクセスして、**洞察**タブをクリックします。
![Screenshot 2023-09-03 at 15.15.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/e841c6ea-f072-845f-836e-b25b3b52f599.png)

当該テーブルに頻繁にアクセスしているユーザー、ノートブック、ダッシュボード、そして実行されているクエリーを一覧することができます。
![Screenshot 2023-09-03 at 15.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/97d33c63-f4d3-1534-3e3c-9a66ed824dff.png)

このような情報から以下のような質問に回答することができます。

- このテーブルは信頼できるのか？
- このテーブルはどのように活用すればいいのか？
- このテーブルにはどのようなクエリーを実行すればいいのか？
- このテーブルに関する質問は誰にすればいいのか？

また、joinされているテーブルも特定できるので、どのようにしてテーブルのデータを補強すればいいのかのヒントにもなります。
![Screenshot 2023-09-03 at 15.16.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/e537206e-5871-49db-502f-bc784787bff7.png)

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

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


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
【Laravel】既存テーブルにカラムを追加する && 既に存在するレコードの新規カラムに値を挿入する

# はじめに
既に運用しているテーブルにカラムを追加したいときありますよね。
ただ、既に存在するレコードの新規カラムに値が何も入っていない状態になってしまうことは防ぎたい。
マイグレート実行時に指定した値を、新規カラムに挿入できないだろうか。

今回は、Laravelのマイグレーション機能を利用し、既存テーブルにカラムを追加し、
さらに既に存在するレコードの新規カラムに値を挿入する方法についてまとめました。

※おことわり※
基本的に学習内容のアウトプットです。
初学者であるため、間違い等あればご指摘いただけますと嬉しいです。

# この記事の目的
以下内容についてアウトプット
- マイグレート実行時に特定のカラムに値を挿入する
- 外部キー制約を持つカラムの場合の対応方法

# この記事の内容
1. NOT NULL制約を持つカラムを追加したい時
2. 外部キー制約を持つカラムを追加したい時


# 1. NOT NULL制約を持つカラムを追加したい時
**前提：**
- 既存テーブル `items` に、NOT NULL制約を持つカラム `is_sold_out` を追加したい
  - 完売かどうか判定するカラム
  - 0：在庫有り（デフォルト値）
  - 1：完売済み  
- 追加した新規カラムに特定の値 `デフォルト値` を代入したい

**方法：**
- マイグレーションファイルを用意する

```shell
// 構文
php artisan make:migration 任意のマイグレーション名 --table=テーブル名

// 例
php artisan make:migration add_items_table_1column  --table=items
```

- マイグレーションファイルを編集する

```php
// 省略

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        // ① カラムを追加
        Schema::table('items', function (Blueprint $table) {
            $table->number('is_sold_out')->after('name'); // nameカラムの後ろに追加
        });

        // ② is_sold_outに値を登録
        Item::all()->each(function (Item $item) {
            $item->is_sold_out = 0; // デフォルト値をセット
            $ticket->save();　
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('items', function (Blueprint $table) {
            $table->dropColumn('is_sold_out');
        });
    }
};
```

- マイグレートを実行する
```shell
php artisan migrate
```

:::note
カラムを作成後、 `items` テーブルのすべてのレコードを取得し、`is_sold_out` に値をセットし保存します。
:::


# 2. 外部キー制約を持つカラムを追加したい時

**前提：**
- 既存テーブル `items` に、外部キー制約を持つカラム `creator_id` を追加したい
  - 商品登録者を表すカラム
  - `users` テーブルの `id` を外部キーとして登録する
- 追加した新規カラムに特定の値 `ユーザーID` を代入したい

**方法：**
- マイグレーションファイルを用意する

```shell
// 構文
php artisan make:migration 任意のマイグレーション名 --table=テーブル名

// 例
php artisan make:migration add_items_table_1column  --table=items
```

- マイグレーションファイルを編集する

```php
// 省略

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        // ① カラムを追加
        Schema::table('items', function (Blueprint $table) {
            $table->unsignedBigInteger('creator_id')->after('name');
        });

        // ② creator_idに値を登録
        Item::all()->each(function (Item $item) {
            $item->creator_id = 1;
            $item->save();
        });

        // ③ creator_idに外部キー制約を付与
        Schema::table('items', function (Blueprint $table) {
            $table->foreign('creator_id')->references('id')->on('users');
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::table('items', function (Blueprint $table) {
            $table->dropColumn('creator_id');
        });
    }
};
```

- マイグレートを実行する
```shell
php artisan migrate
```

:::note
カラムを作成後、 `items` テーブルのすべてのレコードを取得し、`creator_id` に値をセットし保存します。
**値の登録後、外部キー制約を付与** することがポイントです。

カラム作成時に外部キー制約を付けてしまうと、カラムに0やnullなどの値が入ってしまい、
特定の値を登録しようとした時に、 **外部キー制約違反** のエラーが出てしまいます。

:::
Lambda関数をローカル実行時に発生した「Error: Running AWS SAM projects locally requires Docker. Have you got it installed and running?」を解決する方法

ローカル環境からAWS Lambda関数を動作テストしようとして際、エラーが発生したのでその解決策を紹介します。

# 環境
- mac(intel)
- vscode
- docker
- aws-sam-cli

# 状況
```
$ sam local invoke -e イベントファイル名　実行したい関数のID
Error: Running AWS SAM projects locally requires Docker. Have you got it installed and running?
```

# エラー内容
AWS SAMローカル実行機能を使用するにはDockerが必要で、インストールされていないか、実行されていないというエラー

# 解決方法
## 1.Dockerインストール
そもそもDockerがインストールしてない場合は、公式サイトからダウンロードしてインストールしてください。

## 2.Docker起動
Dockerアプリケーションを起動状態にしてください。

## 3.シンボリックリンクを利用
私はこれで解決しました。
```
sudo ln -s "$HOME/.docker/run/docker.sock" /var/run/docker.sock
```

# まとめ　
エラー内容記載のDockerインストールや起動で解決できなかったのでハマりましたので、
同じ現象が起きた人の役立てればと思います。
cscの作法 その438

# 概要
cscの作法、調べてみた。
DomainUpDown使ってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/96778dbf-f27d-b246-6d36-ad034cd9133d.png)

# サンプルコード

```
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
 
namespace App
{
	public partial class Form1: Form {
		DomainUpDown domainUpDown1;
		public Form1() {
			Text = "DomainUpDown";
			ClientSize = new Size(400, 100);
			Button btn0 = new Button();
			btn0.Location = new Point(50, 20);
			btn0.Text = "test";
			btn0.Click += btn0_Click;
			domainUpDown1 = new DomainUpDown();
			domainUpDown1.Location = new Point(150, 20);
			domainUpDown1.Size = new Size(100, 50);
			domainUpDown1.Items.Add("apple");
			domainUpDown1.Items.Add("orange");
			string[] data = {"melon", "banana"};
			domainUpDown1.Items.AddRange(data);
			//List list = new List();
			//list.Add("itigo");
			//list.Add("suika");
			//domainUpDown1.Items.AddRange(list);
			domainUpDown1.SelectedIndex = 0;
			Controls.AddRange(new Control[] {
				btn0,
				domainUpDown1
			});
		}
		private void btn0_Click(object sender, EventArgs e) {
			MessageBox.Show(domainUpDown1.Text);
		}
		[STAThread]
		public static void Main() {
			Application.Run(new Form1());
		}
	}
}




```

以上。