OmniAICreator/Qiita-1.07M huggingface dataset:
Vue CLI で作った vue3 プロジェクトに storybook を入れてハマったことまとめ

:bow: おことわり :bow:
個人メモの意図が強いので、あまり詳細には記載しません。
「とりあえず解決方法だけ知りたい！」という方のみ参考にしていただければと思います。

# storybook が立ち上がらない
こんなエラー -> `TypeError: Cannot read properties of undefined (reading 'NormalModule')`

以下で init し直す
```bash
npx sb init --type vue3 --builder webpack5
```

# lang=scss が読み込めない
こんなエラー -> `You may need an additional loader to handle the result of these loaders.`

`.storybook/main.js` を以下のように変更

```js
// 変更①
const custom = require("../node_modules/@vue/cli-service/webpack.config.js");

module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  // 変更②
  webpackFinal: async (config) => {
    const mdxRules = config.module.rules.filter((rule) =>
      /\.mdx/.test(rule.test)
    );
    return {
      ...config,
      module: {
        ...config.module,
        rules: [...mdxRules, ...custom.module.rules],
      },
    };
  },
};

```

# .stories を ts で書くと tsc で怒られる
こんなエラー -> `Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?`

`@types/react` を消す

```json
{
  "scripts": {
    "pretest:type": "rimraf ./node_modules/@types/react",
    "test:type": "vue-tsc --noEmit",
  }
}
```

※ rimraf がなければインストールしてください

# build-storybook がエラーになる
こんなエラー -> `ENOENT: no such file or directory, open '/path/.storybook/preview.js-generated-config-entry.js'`

build script を以下のように変更

```json
{
  "scripts": {
    "build-storybook": "NODE_ENV=development build-storybook"
  }
}
```
Db2:Azureデータレイクへインジェストしたい

# 背景と状況
機械学習をはじめとして、パブリッククラウドを利用したデータ分析が人気です。しかし、データ分析をするにはまずデータを用意する必要があります。パブリッククラウドならデータ分析基盤にデータを取り込まないといけません。**取り込みのことをインジェスト**といいます。
パブリッククラウドの仮想マシンで稼働しているデータベース(IBM Db2)のデータをAzure Synapse Analytics（以下、Synapse）にインジェストして分析したいと思います。

# やりたいこと
IBM Db2のデータをAzure Data Lake Storage Gen2（以下、ADLS Gen2)にインジェストしたい。どんな分析にも対応できるように、いったんは安価なBlob Storageに保管しておきます。

# やり方
Synapseに用意されている統合ランタイムを使います。SynapseにはDb2へのリンクサービスがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698263/49705dbe-737d-ae20-a6fe-4adaf3662319.png)
データベース：IBM Db2 V11.5 Linux

# 困ったこと
Synapseの統合ランタイムからDb2用リンクサービスを設定してデータベースに接続しようとするとエラーになります。
```
HISMPCB0002 In BasePrimitiveConverter the SetCodePage method has been called with a invalid codepage: 941. 
No data is available for encoding 941. 
For information on defining a custom encoding, see the documentation for the Encoding.RegisterProvider method. 
Activity ID: f04b23ed-4809-44b4-be5f-96c9e58dcf32. 
```

調査の結果、**SynapseのDb2用リンクサービスはShift JISをサポートしていない**ことがわかりました。データベースの文字コードを変えるわけにもいきませんし、日本語特有の問題はつらいですね。

# Shift JIS対応
**セルフホステッド統合ランタイムを使ってODBC接続**することでShift JIS対応ができることがわかりました。統合ランタイムにはマネージドサービスタイプとサーバーにインストールするタイプの2種類あり、セルフホステッド統合ランタイムは後者になります。
| 統合ランタイムの種類 |提供形態| Db2リンクサービス | ODBCリンクサービス |
|:-:|:-:|:-:|:-:|
| Azure |マネージドサービス| Db2/Shift JIS → ×| 提供されない  |
| セルフホステッド | サーバーインストール |Db2/Shift JIS → ×| Db2/Shift JIS → 〇|

## セルフホステッド統合ランタイムの構築
サーバーにインストールする提供形態ですのでサーバーを準備する必要があります。OSはWindowsのみになります。設定手順は以下です。
1. Windows Serverの設定
1. セルフホステッド統合ランタイムのインストール
1. Db2クライアントのインストール
1. データベースへのカタログ、ODBC設定
1. Visual C++ 2010 再領布パッケージ (x64)
1. Adopt OpenJDK などの JRE プロバイダーの Java Runtime (JRE)

5と6はParquet形式で出力する場合に必要です。

構築手順の詳細は[公式サイト](https://docs.microsoft.com/ja-jp/azure/data-factory/create-self-hosted-integration-runtime?tabs=data-factory "Azure")をご覧ください。

# はまったこと１：権限不足
セルフホステッド統合ランタイムの診断画面から接続テストをすると権限不足で接続失敗しました。
```
SQL1092N このユーザーIDには要求されたコマンドまたは操作を実行する権限がないため、
要求されたコマンドまたは操作が失敗しました。ユーザーID:"DIAHOSTSERVICE"
```
**DIAHOSTSERVICE**はセルフホステッド統合ランタイムを動かしているWindowsサービスです。
問題を切り分けるため、以下のテストをしました。
- ODBC設定画面からのテスト接続 → OK
- PowerShellで作ったODBC接続スクリプト → OK
- セルフホステッド統合ランタイムの診断画面 → NG

セルフホステッド統合ランタイムが指定したユーザーではなく、DIAHOSTSERVICEを使ってエラーになるのかがしばらくわかりませんでした。

原因は以下です。

- **セルフホステッド統合ランタイムがDb2クライアントにアクセスする権限がなかった**

対応は以下です。

- Db2クライアントをいったんアンインストール
- インストールオプションでデフォルトの「オペレーティング・システム・セキュリティーを使用可能にする」についているチェックを外して再インストール

# はまったこと２：LOB列
CLOB列があるテーブルの抽出処理に失敗しました。

原因は以下です。

- **ODBCアプリケーションからLOB列へのアクセスは設定が必要**
LOBアクセスの詳細は[公式サイト](https://www.ibm.com/docs/ja/db2/11.5?topic=objects-odbc-applications "IBM")をご覧ください。

対応は以下です。

- セルフホステッド統合ランタイムのdb2cli.iniに**LongDataCompat=1**を設定
キーワードの詳細は[公式サイト](https://www.ibm.com/docs/ja/db2/11.5?topic=keywords-longdatacompat "IBM")をご覧ください。

# まとめ
Db2からAzureデータレイクへインジェストするテストで得られた知見は以下になります。

- SynapseのDb2リンクサービスはShift JISをサポートしていない。
- Shift JISの場合、セルフホステッド統合ランタイムのODBCリンクサービスを使用する。
- Db2クライアントはオペレーティング・セキュリティーを使用しない。
- db2cli.iniにLongDataCompat=1を設定する。

また、データベースはShift JISですが、インジェストしたCSVファイルを見るとUTF-8に変換されていました。
[JPX Tokyo Stock Exchange Prediction]オプションの経験則

こんにちは、tmrtjと申します。

私は現在株式会社音圧爆上げくんという会社に所属しており、プロKagglerとして活動しています。


私は現在プロKagglerとして、業務の一環で、現在Kaggleで行われているコンペの一つである[JPX Tokyo Stock Exchange Prediction](https://www.kaggle.com/competitions/jpx-tokyo-stock-exchange-prediction)に参加しています。

また、今回の記事は、Kaggle上にNotebookとして同じ内容の記事を英語で投稿しています。
リンクは[こちら](https://www.kaggle.com/competitions/jpx-tokyo-stock-exchange-prediction/discussion/321472)です。



# はじめに


JPX Tokyo Stock Exchange Predictionではオプションのデータが提供されています。



オプションとはデリバティブの一種で、ある期間に対象の資産を決められた価格で買う/売る権利です。
オプションを持つことは値動きに対する保険のような役割を果たします。


オプションの基本的な仕組みについては他にわかりやすい記事が多くあると思うのでそちらに譲ります。

今回は、オプションについて調べていたところ、市場に携わっている人たちの間では知られている経験則について学んだので、紹介したいと思います。

オプションについての理解がまだ浅いのでわかりにくいところもあるかと思いますがご容赦ください。



# マグネット効果

まず紹介するのはマグネット効果です

マグネット効果とは、オプションの大きな建玉がある行使価格に原資産の価格が引き付けられるというものです。

例えば、日経平均先物のコールオプションで、権利行使価格28000円に大きな建玉があるとします。

日経平均先物の価格が28000円付近まで上がったとします。

このときコールオプションを持っている投資家は利益を確定したいという心理が働きます。

その場合、投資家はどうするかというと、日経平均先物をショートし、コールオプションのデルタをヘッジします。

つまり、大きなコールオプションの建玉がある場合、そのコールオプションの権利行使価格を原資産（今の例で言えば日経平均先物）が上回ると、その原資産に対して売りが出やすい、ということです。

プットオプションの建玉が大きい場合はその逆の現象が起きやすいです。

すなわち、プットオプションの権利行使価格を下回ると、そのプットオプションの原資産に買いが出やすいということです。

このようなメカニズムで、原資産の価格が権利行使価格に引き付けられることが磁石のようであることからマグネット効果と呼ばれます。


<br>
<br>

# 分散リスクプレミアム


オプションの価格はブラックショールズモデルなどを用いてプライシングされます。
逆に、こうした計算式を用いて、オプションの実際の市場価格から原資産のボラティリティを求めることができます。
こうして算出されたボラティリティを、「インプライドボラティリティ（IV）」と呼びます。

こうして算出されるインプライドボラティリティは、オプションの権利行使の期日ごとに異なることが知られています。
そこで、こうした、異なるオプションを組み合わせて算出したものがVIXや日経VIと呼ばれるものです。（詳細な計算式は複雑なので割愛します。）

これらの指数は、オプション市場全体による、この先の原資産のボラティリティの予測値と解釈できます。
このようなオプション市場に織り込まれているインプライドボラティリティと実際の原資産市場のボラティリティから算出できるものを「分散リスクプレミアム」と呼びます。

この分散リスクプレミアムは、「オプション市場が、実際の原資産価格のボラティリティに対して、どの程度、この先の価格変動を予測しているか」と解釈できます。

そして、この分散リスクプレミアムは原資産価格のリターンについて予測力を持つことが様々な文献で指摘されています。
















# 最後に
株式会社音圧爆上げくんではプロKagglerを募集しています。
ご興味のある方はぜひ以下のリンクをご覧ください。
[Wantedlyリンク](https://www.wantedly.com/projects/748285)

今回の記事がコンペティションに取り組むにあたり、何らかの参考になれば幸いです。
NAS上のファイルがWindowsで開けるのに、Macでは開けないとき

### 現象
WindowsとMacでNAS上のファイルを共有しているとき、「NAS上のファイルがWindows環境で開けるのに、Mac環境では開けない」現象が発生する。


### 原因1
* ファイル名、パス名の文字コードが壊れている（Macがサポートしない文字コードが使用されている）。
* ZIPファイルをWindows側で解凍した場合、発生する。

### 対策1

ZIPファイルは、Mac側で解凍する。こうすることで、「Macがサポートする文字コード」で、ファイル名、パス名が設定される。

### 原因2

* Mac標準のunarchiverで解凍したとき、`Extended Attributes`がちゃんと設定されなかった。

### 対策2
方法は2つ

1. 解凍アプリ（The unarchiver等）で解凍する。
1. Macの「ファイルの複製」操作で、原本・複製ともちゃんと`Extended Attributes`が設定される。

### 所感
* 原因1については、Windowsが周りの迷惑考えずに、「俺仕様」で実装したせいかな。しらんけど。
* 原因2は、「解凍したファイルを不用意に開けないようにしておきました」というMacの過剰仕様のせいかな。しらんけど。


編集しましたよ
チームでコードレビューを導入していくために

# 概要

本記事はチーム開発においてレビューを導入するにあたり気をつけたりしていることを主に自分向けに整理している記事となります。
良さそうな情報や今後の経験含め随時追記していくことになると思います。

# レビューツール

最近はだいたいソースコード管理はGitHubを使用している会社、プロジェクト、チームが多いので、基本的にはGitHubでPull request(以下、PRと記載)にて行うことが多いかなと個人的には感じています。

# レビューするにあたって心掛けていること

## 単純に否定するのではなく、やんわり代替案を提示する

コードの書き方を否定するだけでは、レビューイからすると責められてる気がする可能性があるので、代替案を提示してやんわり修正を促すようにしています。

例）　XXXという関数名はYYYとする方が役割が分かりやすくて良いかも

## 修正の優先度を提示する

機能要件を満たしていないコードはもちろん修正必須ですが、パフォーマンスが多少悪いとか可読性が多少悪いなどは開発期限次第で修正内容をIssueとして残して一旦パスさせるとか判断させる材料を提示するようにしています。

例) XXXの部分はネストが多すぎて可読性が低いので、別関数に切り出すなど対応した方が良いかもですが、挙動は問題ないので一旦Issueに残して後で対応もありかも

# レビューコメントで使用する略語

## LGTM

`見た感じ大丈夫そう` という意味で、これはPull requestをApproveするときによく使っています。
`Looks Good To Me` の略ですね。

## FYI

`ご参考までに` という意味で、コメントする際にソースを提示する時などによく使っています。
`For Your Information` の略です。

## IMO

`私個人の意見としては` という意味で、自分ではこう記述するなぁと伝える時に使っています。
`In My Opinion` の略です。

## nits

`nitpick` (細かいことを指摘する) の短縮で `細かいことですが` という意味です。
些細な指摘をする時に使ってます。

## typo

これは `誤字` という意味で、自分は誤字・脱字を指摘する際によく使っています。

# まとめ

個人的にはレビュー文化は良いものと思っています。
ただその手法によっては、レビューアとレビューイの関係性が悪くなってしまったり、それを意識して指摘できなくなってしまうなどもあるので、お互いをリスペクトして快適なレビューを皆がしてくれると良いなぁ。
いちいちCypressダウンロードだるいからbatファイル作った

Cypressの勉強中に「これ使えば自動化、簡単かも！」と思い至ったのですが、練習しているとフォルダ削除して構築しなおすということがあるじゃないですか。
それが面倒だったので、batでCypressインストールとそのほかのプラグイン関係をインストール、初起動までの内容をbatファイルに任せるということにしました。
コメントアウトしているのもあるので自分で好きにカスタマイズして設定するjsonに必要な記載をしてくださいね。

```bat:Cypress-construction.bat
REM npmなどはインストール済みの状態であることが前提、何回もプロジェクトインストールなどを繰り返すのが面倒なので作成した
REM 2022/03/12 自動テスト用cypress環境構築用batファイルです、インストールしてブラウザを立ち上げるまで行います
REM 使い方 インストールしたいフォルダに、このbatをコピペして実行　実行確認後にフォルダ作成促される
@echo off
chcp 65001

set /P hantei="cypress kankyo kouchiku shimasu (Y/N):"
set /P dirname="作成するディレクト名を入力:"

IF "%hantei%" == "y" (
    mkdir %dirname%
    cd %dirname%
    npm init -y
    REM --save-dev このオプションは開発でしか使わないという明示
    npm install --save-dev cypress typescript
    Sleep 1000
    npx tsc --init --types cypress --lib dom,es6
    Sleep 1000
    echo {} > cypress.json
    Sleep 1000
    npm i resemblejs
    Sleep 1000
    npm i fs
    REM ドラッグアンドドロップ 設定必要
    npm install --save-dev @4tw/cypress-drag-drop
    REM メール送信 設定必要 mailhogかこちらか選ぶ
    REM npm install  --save-dev cypress-maildev
    REM mailhog用 設定必要
    npm install  --save-dev cypress-mailhog
    REM リクエスト(get,post)なのかをすべて記録してくれる
    npm install --save-dev cypress-autorecord
    REM fileupload関係 設定必要
    npm install --save-dev cypress-file-upload
    REM ダウンロード確認 設定必要
    npm install --save-dev cy-verify-downloads
    REM ローカルからjsonをロードできる
    npm install  --save-dev @cypress/env-or-json-file
    REM ローカルストレージ保存
    REM npm i cypress-localstorage-commands
    REM レイアウトが見れるらしい　使い方わからんからまだ試せてない
    REM npm install --save-dev cypress-layout-inspector
    REM DBテスト
    npm install --save-dev cypress-sql-server
    REM レポート系
    npm install --save-dev cypress-mochawesome-reporter
    REM excel操作
    npm install xlsx
    REM json 操作
    npm install jsonpath
    
    REM jsonなどの設定ファイルは各自必要な内容を設定してください
    
    
    REM 一度起動しないと必要ファイル作成されないので実行することにした
    npx cypress open
) ELSE IF "%hantei%"=="Y" (
    echo "%hantei%：ｙがいいなー"
) ELSE (
    echo "%hantei%：処理中止"
)

pause
```
クラスとインスタンス　PHP

## クラス
クラスとは設計図！
その設計図には、「変数」と「関数」が書いてある！
変数で設定を決めて、関数で何するかを決めている！

## インスタンス
クラスという設計図を元にして、実際に作っていくこと！
家を建てるイメージをすればOK！設計図を書いてから、それを元に家を建てていく！
インスタンスは複数作ってOK！設計図があれば家は複数建てられる！

### クラスとインスタンスの書き方
```php:書き方
<?php
// クラスの書き方
class クラス名 {
  $変数名1;
  $変数名2;

  function 関数名(){
    // 何をするかをここに書く
  }
}

// インスタンスの書き方
$インスタンス名 = new クラス名();
$インスタンス名->変数名 = 値;
$インスタンス名->関数名();
?>
```
- `$インスタンス名 = new クラス名();` でスタートするのは決まり！
- `$インスタンス名->変数名 = 値;` でクラスで設定した変数名の値を決めている！
※変数名に `$` は書かない！
`->` はアロー演算子！変数や関数にアクセスする時に使われる演算子！
- `$インスタンス名->関数名();` で関数を呼び出す！


### クラスとインスタンスの例
```php:例
<?php
// クラス
class hoge {
  $name;
  $team;

  function hogehoge(){
    echo $this->name . "は" . $this->team . "チームです。";
  }
}

// インスタンス
$tanaka = new hoge();
$tanaka->name = "田中";
$tanaka->team = red;
$tanaka->hogehoge();
?>

// 結果
田中はredチームです。
```
### 解説
- hogeクラスに `$name（人の名前）` と `$team（チームカラー）` を設定した。
- 「hogehoge」という関数を定義して、 `$nameは$temaチームです。` という処理を書いた。
- `$name` に「田中」、`$team` に「red」という値を入れた。
- 関数「hogehoge」を呼び出した。
※`$this` はクラス内の変数や関数にアクセスする時に使う！ `$this->変数名` のような形で書く！
ruby-build で openssl がインストールされちゃう話

## ruby-build で openssl がインストールされてしまうので調査した

自分でインストールした lib に強制可能か知りたかった

### 向き先を強制するなら RUBY_CONFIGURE_OPTS が良さそう

- ruby-build は定義に share ディレクトリを使ってそう

```shell
$ ls /usr/local/Cellar/ruby-build/20211109/share/ruby-build | head
1.8.5-p52
1.8.5-p113
1.8.5-p114
1.8.5-p115
1.8.5-p231
1.8.6
1.8.6-p36
1.8.6-p110
1.8.6-p111
1.8.6-p114
$ cat /usr/local/Cellar/ruby-build/20211109/share/ruby-build/3.0.2
install_package "openssl-1.1.1l" "https://www.openssl.org/source/openssl-1.1.1l.tar.gz#0b7a3e5e59c34827fe0c3a74b7ec8baef302b98fa80088d7f9153aa16fa76bd1" mac_openssl --if has_broken_mac_openssl
install_package "ruby-3.0.2" "https://cache.ruby-lang.org/pub/ruby/3.0/ruby-3.0.2.tar.gz#5085dee0ad9f06996a8acec7ebea4a8735e6fac22f22e2d98c3f2bc3bef7e6f1" ldflags_dirs enable_shared standard verify_openssl
```

- 上記のバージョンによる定義を `source` して使ってそう

```
$ grep -n '^source' /usr/local/Cellar/ruby-build/20211109/bin/ruby-build
1466:source "$DEFINITION_PATH"
```

```shell
$ grep -n -A2 '^install_package()' /usr/local/Cellar/ruby-build/20211109/bin/ruby-build
169:install_package() {
170-  install_package_using "tarball" 1 "$@"
171-}
$ grep -n -A27 '^install_package_using()' /usr/local/Cellar/ruby-build/20211109/bin/ruby-build
181:install_package_using() {
182-  local package_type="$1"
183-  local package_type_nargs="$2"
184-  local package_name="$3"
185-  shift 3
186-
187-  local fetch_args=( "$package_name" "${@:1:$package_type_nargs}" )
188-  local make_args=( "$package_name" )
189-  local arg last_arg
190-
191-  for arg in "${@:$(( $package_type_nargs + 1 ))}"; do
192-    if [ "$last_arg" = "--if" ]; then
193-      "$arg" || return 0
194-    elif [ "$arg" != "--if" ]; then
195-      make_args["${#make_args[@]}"]="$arg"
196-    fi
197-    last_arg="$arg"
198-  done
199-
200-  pushd "$BUILD_PATH" >&4
201-  "fetch_${package_type}" "${fetch_args[@]}"
202-  make_package "${make_args[@]}"
203-  popd >&4
204-
205-  { echo "Installed ${package_name} to ${PREFIX_PATH}"
206-    echo
207-  } >&2
208-}
```

`install_package()` が動作するかどうかは `--if` で制御されている

```shell
$ grep -n -A5 '^has_broken_mac_openssl()' /usr/local/Cellar/ruby-build/20211109/bin/ruby-build
1075:has_broken_mac_openssl() {
1076-  is_mac || return 1
1077-  local openssl_version="$(/usr/bin/openssl version 2>/dev/null || true)"
1078-  [[ $openssl_version = "OpenSSL 0.9.8"?* || $openssl_version = "LibreSSL"* ]] &&
1079-  [[ "$RUBY_CONFIGURE_OPTS" != *--with-openssl-dir=* ]]
1080-}
```

RUBY_CONFIGURE_OPTS の有無で決定できそう．

## Refs

- https://blog.manabusakai.com/2020/01/no-longer-depends-on-homebrew-openssl/
- https://scrapbox.io/ruby-jp/%E3%81%AA%E3%81%9C_rbenv(ruby-build)_%E3%81%AF_Homebrew_%E3%81%AE_OpenSSL_%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E3%81%AE%EF%BC%9F
ノーコードツール「Adalo」について調べてみた

# できること
- ドラッグアンドドロップでパーツをはめ込んでいく
- 「Webアプリ」「プログレッシブWebアプリ」「ネイティブアプリ」が作れる
- ストアで配信できる
- APIが使える
- Adaloで作ったデータベースにアクセスできるAPIを公開できる（有料）

https://lic.cdata.co.jp/jp/kb/tech/bingsearch-connect-adalo.rst

https://qiita.com/wakiwaki/items/5016404ce0c15a755188

# 費用
|Free  |Pro  |Business  |
|---|---|---|
|$0/月  |$50/月  |$200/月  |

無償プランだとネイティブアプリをリリースできない（PWAは使える）

# 作るアプリのタイプ
|Native Mobile App  |Desktop Web App  |
|---|---|
|ネイティブアプリを作る。PWAが生成される。単独のアプリとして動作する。PCのブラウザサイズにフィットしない。  |Webアプリを作る。PWAは生成されない。ブラウザ内で動作する。ページ毎にURL共有できる。PCのブラウザサイズにフィットする。  |

# Adaloの三要素（この組み合わせで作る）
|コンポーネント  | データベース  | アクション  |
|---|---|---|
|画面内の各パーツのこと。ドラッグアンドドロップで配置できる。  |アプリが保持するデータ群。各テーブルは「コレクション」と呼ばれる。  |ボタンを押したときの挙動、画面遷移を設定する。  |

- 遷移図が大きく右側に表示され、データやアクションを設定するツールが左側に小さくまとまっている
- 上部のメニューから簡単にアプリ動作をプレビューできる
- 自動保存

### 参考

https://plat.io/ja/posts/nocode_adalo
Parsec+EASY-GPU-PVなVMを作成する際の備忘録

ParsecとEASY-GPU-PVを組み合わせた「GPUの使えるVM」構築は、ネットメディアでも記事になり色々試す人も出てくるだろうと思われるが、なかなかにわかりにくいハマリポイントもあるので、備忘録を残しておく。
# 記事
## PCWatch
ISOのeditionについての問題は解決しないまま記事になっている。

https://pc.watch.impress.co.jp/docs/topic/feature/1397775.html
## Qiita
EASY-GPU-PVが行っていることを手動で実行したい場合参考になる。

https://qiita.com/botter99/items/c0022ed1906a74decc37
# EASY-GPU-PV
https://github.com/jamesstringerparsec/Easy-GPU-PV
# Parsec
EASY-GPU-PVを使う場合、VMには自動でインストールされるので、VMに接続するクライアント用。

https://parsec.app/
# 事前準備（EASY-GPU-PV私訳）
- Windows 10 20H1+ Pro/Enterprise/Education、もしくはWindows 11 Pro/Enterprise Educationのいずれか
    - 互換性が向上しているため、ホスト、VMともにWindows 11を推奨。
    - ホストとVMとで稼働させるOSバージョンは同じものにしておくこと。違うバージョンを使うと互換性の問題や、ブルースクリーン、その他の問題が発生する恐れがある(例: Win10 21H1 + Win10 21H1、Win11 21H2 + Win11 21H2、等)
- NVIDIA/AMDの内蔵ではないGPU、もしくはIntelの内蔵GPUを搭載したデスクトップPC
    - NVIDIA GPUを載せたノートPCは現時点で非サポートだが、Intel内蔵GPUを使うのであれば動作する。GPUは、NVIDIA NVENC、Intel Quicksync、AMD AMFといった、ハードウェアビデオエンコードの機能が必須。
    - 訳注) Ryzen5600Gの内蔵GPUでも動作した
- ベンダ提供の最新のGPUドライバ
    - Windows Update任せにしない事
- マイクロソフトからダウンロードできる最新のWindows 10/11のISOイメージ
    - Windows10(https://www.microsoft.com/en-gb/software-download/windows10ISO)
        - PCWatchの記事にもある通り、一般にはダウンロードできない
    - Windows11(https://www.microsoft.com/en-us/software-download/windows11)
    - メディア作成ツールを使ってはならない
- マザーボードUEFI/BOISで仮想化機能を有効にし、OS側ではHyper-Vの機能を全面的に有効にする
    - リブート必須。
- Powershellスクリプトが動作するように事前準備する
    - 典型的な方法として、管理者権限で立ち上げたPowershell上で、"Set-ExecutionPolicy unrestricted"を実行する。
# CopyFilesToVM.ps1の編集について
## ISOのedition情報
CopyFilesToVM.ps1ファイルに記述されているparamsのeditionは、使うisoによって値が違うので注意すること。
EASY-GPU-PVのページに書かれている情報では、Win10/11のISOで"6"を指定するとProになるとあるが、これはおそらく英語版での話。
筆者が確認したところ、Win11日本語isoでは"3"がProだったが、各々のEditionに対応する数字は、iso内のsources/install.wimファイル（7zip等で開ける）に含まれる[1].xmlファイルに書いてある。
## 複数GPUが存在する環境の注意点
一般的な問題かどうかは不明だが、GPUが複数存在している筆者の環境の場合、GPU名はAUTOではなく明示しないとスクリプトがデバイスドライバのインストールに失敗した。
- EASY-GPU-PVスクリプトはGPUドライバファイルをホストからVMにコピーするが、当該状況の場合、どうも見当違いのドライバをコピーしてしまうようだ
線形漸化式の値を行列を使って求める

**【例題】数列$t_n$が以下の漸化式で表されるとき$t_{10^{12}}$ mod $10^4$を求めよ**

```math 
\begin{align}
&t_0=0,\space t_1=t_2=1,\space  t_3=4 \\
&\large t_n = 2t_{n-1}+2t_{n-2}-2t_{n-3}+t_{n-4}
\end{align}
```
この問題は$n$の値が$10^{12}$と非常に大きいのとmod計算がキーとなります。

### 再帰プログラム
まずは安易に再帰プログラム。lru_cacheを付けても$10^3$で撃沈。

```python
from functools import lru_cache
@lru_cache(maxsize=None)
def t(n):
  if n < 4: return [0,1,1,4][n]
  return (2*t(n-1)+2*t(n-2)-2*t(n-3)+t(n-4)) % 10**4
print(t(10**2))
# 8344
```
### ループ実装

次にサイクルバッファでループ実装。 なんとか$10^8$までが精いっぱい。

```python 
T = [0,1,1,4]
for n in range(4,N+1):
  T[n%4] = (2*T[(n-1)%4]+2*T[(n-2)%4]-2*T[(n-3)%4]+T[(n-4)%4]) % 10**4
print(T[n%4])
# 688
```
### 行列で実装

漸化式は以下の行列の計算に変換できます。

```math 

\begin{pmatrix}
t_{n} \\t_{n-1} \\ t_{n-2} \\ t_{n-3}
\end{pmatrix} = 
\begin{pmatrix} 
2 & 2 & -2 & 1\\
1 & 0 & 0 & 0\\ 
0 & 1 & 0 & 0\\ 
0 & 0 & 1 & 0
\end{pmatrix} 
\begin{pmatrix}
t_{n-1} \\t_{n-2} \\ t_{n-3} \\ t_{n-4}
\end{pmatrix} 
```
プログラムで書きやすいように$t(n)$を横長の行列に変換します。
```math 
\begin{align}
&\begin{pmatrix}
t_{n} & t_{n-1} & t_{n-2} & t_{n-3}
\end{pmatrix} = \\
&\begin{pmatrix}
t_{n-1} & t_{n-2} & t_{n-3} & t_{n-4}
\end{pmatrix} \times 
\begin{pmatrix} 
2 & 1 & 0 & 0\\
2 & 0 & 1 & 0\\ 
-2 & 0 & 0 & 1\\ 
1 & 0 & 0 & 0
\end{pmatrix}
\end{align}
```

### 行列のべき乗
元の問題を解くためには以下の行列のべき乗を計算すれば良いことになります。
```math 
\begin{pmatrix} 
2 & 1 & 0 & 0\\
2 & 0 & 1 & 0\\ 
-2 & 0 & 0 & 1\\ 
1 & 0 & 0 & 0
\end{pmatrix} ^{10^{12}}\space mod \space 10^4\\
```
これは「[繰り返し二乗法で行列のべき乗の高速化](https://qiita.com/masa0599/items/856694aa5c60e9812846)」で作った**powmtx**を使うと高速に計算できるので、これを使ってプログラムにすると以下のようになり。1秒以内で答えがでました。

```python 
M= 10**4
N = 10**12
mtx = np.matrix([[2,2,-2,1],[1,0,0,0],[0,1,0,0],[0,0,1,0]], dtype='object').T
tv = np.matrix([4,1,1,0])
tv = tv*powmtx(mtx,N, M) % M
print(f"tn={tv[0,3]}")
# 6928
```
（開発環境：Google Colab）

この考え方はEuler Project: Problem 237を解くのに役に立ちます。
デジタルツールを使って仕事の課題を解決したい

便利なデジタルツールが、手軽に手に入るようになりました。
私は、小売業のネット販売の運営を仕事としておりますが、デジタルツールを使って解決できそうな仕事の課題と解決策を挙げ、身近なデジタルの有効活用方法を考えようと思います。

**1.	社内のお問い合わせ自動回答（実現性　50％）**

課題：システム使用方法、お客さまのお問い合わせなど対応方法が分からず、電話やメールで社内の人に問い合わせしたときに、確認を取った相手が取り込み中だと、対応が遅れてしまう。

改善：よくお問い合わせのあるものをLINEbotで入力すると答えが返ってくる。
技術的には可能だと思う。
実施には構想をつくり、ノウハウもつ各部署のメンバーから情報集約し、データベース化するかがポイントであり、この点が難しい。

**2.パソコン、スマートフォンがしゃべって教えてくれるアラーム機能（実現性　90％）**

課題：小売業の現場では、作業に忙殺され、打ち合わせの時間、冷蔵庫の温度チェックなどの固定されている業務開始時間を忘れてしまうことがある。

改善：時間が来たらパソコン、スマートフォンがしゃべって教えてくれると、忘れずに仕事ができる。実施には、TPOに応じてマナーモードのようなモードが必要。

**3.	気温を教えてくれる機能（実現性100％）**

課題：食品宅配では、保冷管理が欠かせないため、その日その日の気温把握が重要となる。
気温が簡単にわかる仕組みが欲しい。

改善：LINEbotの仕組みを使い、店別で今日の気温を返ってくる仕組みがあると現場では
スムーズに作業できる。

**4.報告資料の集計を簡単にする機能（実現性　50％）**

課題：毎日、毎週、月間と報告資料のために、数値集計、加工をするが、多く時間を要する。

改善：RPA、AIを使い、同じ作業はRPA、新しい項目を増やすときはAIにより、数値集計・加工作業実施。

**5.勤務計画の一元管理化（実現性5％）**

課題：勤務計画を作成するエクセル、入力する社内システム、自身のスケジュールのパソコンソフトに入力、3つのツールを確認するため、時間がかかり、時々勘違いなどのミスも発生。

改善：社内システムに統合、シフト作成、登録、共有を1本化することにより、管理する負荷を大幅に削減。

**【筆者の後記】**

今回の内容は、私の仕事の周りで起きている課題と改善案について記載しました。
中には、他の企業さまではすでにシステム化されているものも多々あるものとございます。
デジタルツールを使い、ひとつでも改善につなげたいと思います。

最後まで読んでいただきありがとうございました。
100日後くらいに個人開発するぞ！day003

# 今日はレイアウトを作ってみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/ea5b858e-a2fc-f59c-a884-4c88c7d45195.png)



```
 - HTMLの全体構造
    - HTMLファイルには決められた型を書いていく必要がある
        - <html>要素の中に<head>要素と<body>要素が必要です。
            - <head>要素にはページに関する情報を記述
            - <body>要素には実際に表示したい内容を記述
    - HTMLバージョンを指定する
        - HTMLのファイルではHTMLのバージョンを宣言する必要がある
        - 最新バージョンのHTMLを使うために宣言される<!DOCTYPE html>はDOCTYPE宣言と呼ばれる
 - <head>要素の特徴
    - <head>要素ではWebページの設定に関する情報を書く
    - <head>要素内に記述した内容はWebページには表示されない
    - <head>要素には必ず入れる3つの要素がある
        - ①文字コードの指定
        - ②ページタイトルの設定
        - ③CSSの読み込み
 - <head>要素の3つ
    - ①文字コードの指定
        - 定型文：<meta charset="文字コード">
        - 文字コードを指定することで文字化けを防ぐことができる
        - HTMLで推奨されてるコードは"UTF-8"
    - ②ページタイトルの設定
        - 定型分：<title>タイトル</title>
        - 指定されたタイトルはブラウザのタブ上に現れる
    - ③CSSの読み込み
        - 定型文：<link rel="stylesheet" href="CSSのファイル名">
        - CSSを反映するにはHTMLの方で読み込む必要がある
 - 全体のレイアウト
    - webページのレイアウトは3つの要素で構成されている
        - ヘッダー：ページの上部メニュー
        - メイン：ページの主なコンテンツ
        - フッター：ページ下部のメニュー
    - レイアウトは<div>要素で構成されている
        - ヘッダーの<div>要素
            - <div class="header">
            - </div>
        - メインの<div>要素
            - <div class="main">
            - </div>
        - フッターの<div>要素
            - <div class="footer">
            - </div>
- 豆知識
    - エディタの自動補完機能
        - タグ名を入力し「Tab」キーを押すと終了タグまで自動で記述してくれる
            - 例：「div」と打つ→「Tab」キー→「<div></div>」が記述される


```
統計的推定と検定をPythonで解く「母平均の検定（正規母集団で母分散未知の場合）」(2022.4.21)

# 概要
先日は、Pythonで「母分散の推定（母平均未知）の場合」を行いました。コード的には、stats.chi2.interval 関数を用い母分散の信頼区間を求めるだけです。その引数として「信頼度：alpha」「自由度：df」を必要としました。基本は$\chi^2$値について、
$P(0.831≤χ2≤12.833)=0.95$
が成り立つため（と言いながらこういう表現は見たことがありません）、母分散の信頼区間を求めるために上手い具合に式を変形して求められるのでした。

<b>前回の記事</b>
[統計的推定と検定をPythonで解く「母分散の推定（母平均未知）の場合」(2020.4.19)](https://qiita.com/tan0ry0shiny/items/4dbec818f9243d8afd99)

今回は、「母平均の検定（正規母集団で母分散未知の場合）」について解いていこうと思います。今回も「[とけたろうさんのチートシート](https://toketarou.com/cheatsheet/#toc16)」を使わせて頂きます。

# 問題
【問題】ある工場では，内容量20gの袋詰めされたお菓子を作っている。この工場で作られたこのお菓子を無作為に6個抽出し，開封して重さを測ったところ，標本平均と不偏分散は次のようになった。

$$\bar{X}=19.6,\ U^2=0.26$$

このお菓子の内容量は正規分布に従うものとし，その母平均を$\mu$とする。帰無仮説を$\mu＝20$，対立仮説を$\mu \neq 20$，有意水準を5％として，母平均を検定しなさい。

# 解説
対立仮説が「$\mu \neq 20$」のように不等号で表される場合には両側検定を使います。製品の重さなどのように，それより大きくても小さくてもいけない場合に使われます。有意水準5％で両側検定を行う場合，次の図の両端の色のついていない部分のように，右すその2.5％と左すその2.5％に分け，この領域に検定量の値が入れば帰無仮説を棄却することにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496939/71e46d23-6fa2-07e0-b266-a6738d4cd495.png)


そして，母分散が問題では与えられず，代わりに不偏分散を用いることになるので，上で説明したように，次の式で定まる$T$が検定量になります。

$$T=\frac{\bar{X}-\mu}{U}$$

いま，標本の大きさが6なので，$T$は帰無仮説のもとで自由度5の$t$分布に従います。

帰無仮説は「$\mu＝20$」なので，母平均が20gであるとして検定量を計算すると，次のようになります。

$t$分布表を調べると，自由度５の$t$分布の下側2.5％点は-2.57なので，この検定量の値は棄却域には入りません。したがって，帰無仮説は棄却できません。

$$P(2.57\geqq |T|)=0.05$$
これは「6個のお菓子の平均値」は確率的にいろんな値を取り、計算される $T$ もそれに応じていろいろな値をとり標準正規分布に従います。そして、もし帰無仮説が正しい場合は$−2.776\leqq T \leqq 2.776$ の範囲内に収まります。もし左右にある、合わせて5%の棄却域に入った場合には、帰無仮説は正しくない可能性がある（ので，帰無仮説を棄却する）、という事だと理解しておきます。では $T$ とは何かというと、次の式で求められます。これを用いて「母平均が20であるかどうかの検定」を行います。これは[「統計的推定と検定をPythonで解く「区間推定（正規母集団で母分散未知の場合）」](https://qiita.com/tan0ry0shiny/items/71cc816cd9f1793df07d)でも使用しています。
$$
\begin{align}
T &= \frac{\bar{X}-\mu}{SE}\\\\
SE &= \sqrt{\frac{U^2}{n}}=\sqrt{\frac{0.26}{6}}≒0.21
\end{align}
$$

帰無仮説は「$\mu＝20$」なので，母平均が20gであるとして検定量を計算すると，次のようになります。
$$T=\frac{19.6-20}{SE}≒-1.92$$
$t$分布表を調べると，自由度5のt分布の下側2.5％点は-2.57なので，この検定量の値は棄却域には入りません。したがって，帰無仮説は棄却できません。

ここで，注意してほしいのは，帰無仮説が棄却できなかったからと言って，帰無仮説が正しいことが立証されたわけではないということです。「棄却できなかった」というのは，「棄却できるだけの十分な結果は得られなかった」というだけです。

# 次の記事
[統計的仮説検定(2020.4.22)](https://qiita.com/tan0ry0shiny/items/6a67783d01ffae079302)
saveAsJSON.js

```javascript
function saveAsJSON(data, name=new Date().toLocaleString('sv').replace(' ','T').replaceAll(':','_')+'.json') {
  const a = document.createElement('a')
  a.download = name
  a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'}))
  a.click()
}
```
### JavaScriptのデータを保存する
Usage
```javascript
saveAsJSON(['pen', 'pineapple', 'apple', 'pen'])

// ファイル名を指定
saveAsJSON(['pen', 'pineapple', 'apple', 'pen'], 'hoge.json')
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/0df04f26-f17b-603e-2198-80315a20bd55.png)
コマンド Mac Windows

|  説明 |  Mac  | Win |
| ---- | ---- | ---- |
|  ファイルの一覧表示  |  ls  | dir |
|  ファイルやディレクトリの移動  |  mv  | move |
|  ディレクトリ名変更  |  mv  | move |
|  ディレクトリを作成  |  mkdir  | mkdir |
|  ファイル作成  |  touch  | copy nul<br>（上書き注意） |
|  ディレクトリ移動  |  cd  | cd |
|画面をクリア| clear |cls|
Python学習記録_プログラミングガチ初心者がKaggle参加を目指す日記

# 1.はじめに
この記事はプログラミングに触れたことすらないガチの初心者がPythonを使えるようになって
Kaggle参加できるようになることを目標に雑に学んだこと等をまとめていくものです。
筆者は業務でAccesee、SQLを使うくらいでプログラミングにはほとんど触れたことのないマジ者の初心者なので
あたたかい目で見守ってください。


# 2.きっかけ
先日異動が決まり、もともといた部署では施策の立案・実行などをやっていましたが
新しい部署が(名目上)「分析チーム」でした。
しかしこれが蓋を開けてみると~~データリテラシーが終わっていて~~
・施策に用いるデータをExcelで手動でポチポチやって作っている
・データの正確性？目検で見てるし大丈夫でしょ！
・あく…せす…？えすきゅー…える？
・機械学習を専門にしているチームとの協業の際に相手方が何を言っているのか分からずMTGがお通夜

と言った状況。
そしてある日のMTGにて
「分析チームって名前なのに今時機械学習も触ったことがないんですね^^(意訳)」
という火の玉ストレートを投げられて何も言えなかったので
python習得してやろうと思ったことがスタートです。
もともと興味があった分野でもあるので素人なりに調べてたこともあり、
良い機会なので学習を始めることにしました。



# 3.教材・引用など
・AI Academy

https://aiacademy.jp/

「Kaggleでデータ分析できるようになりたい」
というぴったりなコースが用意されていたため、基本的にはこちらを進めていきます。
こちらのコースのみで分からないことや補足情報などは別途まとめていこうと思います。

# 4．学習スケジュール
ここからは実際にAI Academyで学んだ内容をつらつらとまとめていきます。
あとで自分が見返したときにわかりやすいようにまとめていこうと思います。
以下は用意されたコースです(だいたい1000分≒17時間くらいでした)

### 1日目
* プログラミングとは 10m …
* 初めてのPython 15m …
* Python データ型 15m …
* Python 変数 10m …
* Python if文 10m …
* 関数 5m …

[Python学習記録_1日目.Pythonの基本構文について](https://qiita.com/kou6064/items/9aca538f0ebfefc29494)

### 2日目
* scikit-learnとは 10m …
* 人工知能とは 15m …
* Kaggleとは 10m …
* 機械学習の3つの種類 10m …
* 分類と回帰 10m …
* 機械学習の一連の流れ 5m …
* Python リスト型と辞書型 15m …
* Python 関数 15m …
* Python 例外処理 25m …
* Python 繰り返し処理（for文） 20m …

[Python学習記録_2日目.機械学習とは＆Pythonの基本的な処理や関数](https://qiita.com/kou6064/items/12fe196d3b49fe441d32)

### 3日目
* 標準入力と標準出力 10m …
* Python 関数 戻り値とは 15m …
* Python クラスとオブジェクト 25m …
* Python テキストファイルの読み書き 25m …
* Python モジュール・パッケージ 15m …

[Python学習記録_3日目.オブジェクト・モジュール・パッケージ](https://qiita.com/kou6064/items/0f9afcb2fd3eebb7b8d4)
 
### 4日目
* グリッドサーチ 15m …
* Jupyter Notebook入門 20m …
* Python 自作関数のモジュール化 15m …
* pipを用いたパッケージ管理 15m …
* NumPy入門 45m …

[Python学習記録_4日目.自作関数のモジュール化とNumpyについて](https://qiita.com/kou6064/items/4b7f7428f39b88104f15)
 
### 5日目
* 機械学習のための数学<速習> 60m …
* 評価指標(分類) 25m …
* Pandas入門 35m …

[Python学習記録_5日目.機械学習のための数学・Pandas入門](https://qiita.com/kou6064/items/88f4a9459a80c26e8660)
 
### 6日目
* 統計学入門（平均、分散、標準偏差） 15m …
* Matplotlib入門 35m …
* 決定木 25m …

[Python学習記録_6日目.統計学入門・matplotlib・決定木](https://qiita.com/kou6064/items/2a8a6a1752811a3fe2de)


### 7日目
* グリッドサーチでハイパーパラメータを最適化 25m …
* NumPy応用 30m …
* Seaborn入門 25m …

[Python学習記録_7日目.グリッドサーチ・Numpy応用・Seaborn](https://qiita.com/kou6064/items/36a78a1f5b2e3741b099)

### 8日目
* 関数 中級(zip,map,filter) 25m …
* Pandas応用 45m …
* 無名関数（ラムダ式） 15m …

[Python学習記録_8日目.関数(中級)・pandas応用・無名関数](https://qiita.com/kou6064/items/9bff5a6900507317b82b)

### 9日目
* CRISP-DM入門 20m …
* アンサンブル学習 15m …
* ホールドアウト法・交差検証 15m …
* 回帰分析 40m …
* 評価指標(回帰) 15m …
* ランダムフォレスト 30m …

[Python学習記録_9日目.回帰分析・評価指標・ランダムフォレスト](https://qiita.com/kou6064/items/6bb6f856de2aec1f2bca)

### 10日目～
実際にKaggleのチュートリアルに参加

[Python学習記録_10日目～.Kaggleのタイタニック生存予測モデル](https://qiita.com/kou6064/items/e9a168b69e9ec10bba08)

こんな形で日ごとに学習した内容をまとめてます。

# 5．最後に
以前も独学で学習を進めようとして心が折れたことがあるので
今回はしっかりスケジュール引いて進めようと思います。
そして自分ひとりだとサボりがちなので、
スケジュールと学習内容を記事という形で投稿することで
監視の目を作っていければと思います。

頑張れ自分
ALT+TABの一覧にタスクバーが表示される問題

taskbarXのせいっぽい
最新版にアップデートしたら治った。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160489/0f309120-3e62-3605-547c-a77f619049ca.png)


同じ症状の人
https://github.com/ChrisAnd1998/TaskbarX/issues/542
Bashでシンプルなファイル一覧のCSVを作る

```create-file-list.sh
#!/bin/bash

# 1行目
lines="path,size (byte),MIME type\n"

# 出力ファイル名
output_filename='./file-list.csv'

for file in $(find -type f | sort); do
  # このファイルと出力ファイルを除外
  if test $file = $0 -o $file = $output_filename; then
    continue
  fi

  # 1行目の内容に沿った要素の準備
  path=$file
  size=$(ls -lh $file | awk '{ print $5 }')
  mime_type=$(file --mime-type $file | awk '{ print $2 }')

  # 行を整形
  line="$path,$size,$mime_type\n"

  # 行を追加
  lines="$lines$line"
done

# ファイルを出力
echo -e $lines >$output_filename
```

適宜置き換える
Docker最低限の操作メモ (2022/11)


dockerを人に教えるときのメモ。試してるのはMac環境。

## やりたいこと

以下を調べてメモる。

* dockerの基本操作
* Dockerfileの利用法（最低限）
* docker-composeの利用法（最低限）

## Docker自体のインストール

Docker自体のダウンロードは[ここ](https://docs.docker.com/desktop/)から。有償になったけど個人利用とかなら基本今まで通り。

## Dockerの基本操作

### とりあえず実行

nginxを実行してみる。初期状態ではローカルにイメージはないため最新版がダウンロードされ実行される。

```bash
docker run --name www -d -p 8080:80 nginx
```

この状態で http://localhost:8080 をみればNginxの画面が見えるはず。

### コンテナへのログイン

```bash
docker exec -it www /bin/bash
```

>とりあえずexitで抜けときます。

### コンテナの実行状態確認

```bash
docker ps
```

>stopさせているコンテナを見る場合はdocker ps -a

### コンテナの停止

```bash
docker stop www
```

>startはdocker start www

### コンテナの削除

```bash
docker rm www
```

>停止状態じゃないと削除できない。

### イメージの確認

```bash
docker images
```

### イメージの削除

```bash
docker rmi nginx
```

## Dockerfileの利用

素の状態のイメージをそのまま使うことは実務ではまず無い。
用途に合わせてカスタムしたイメージをビルドして使うことになるが、そのときにまず利用するのがDockerfile。

### 準備

作業場と利用するファイルを生成しておく。作業場所はどこでもいい。

```bash
cd
mkdir docker-test
cd docker-test

touch Dockerfile default.conf index.html
```

### Dockerfile

Dockerfileを編集する。
nginxを利用し、かつ、設定ファイルとHTMLをローカルからコピーしたイメージを作る記述を行う。

```bash
FROM nginx
COPY ./default.conf /etc/nginx/conf.d/
COPY ./index.html /var/www/html/
```

>書き方の詳細は[ここ](https://docs.docker.com/engine/reference/builder/)を見る。

### default.conf

コピーするdefault.conf。

```bash
server {
    listen 80;
    charset UTF-8;

    location / {
        root /var/www/html;
        index index.html;
    }
}
```

### index.html

コピーするHTML。

```html
Hello!
```

### イメージをビルド

Dockerfileおよび利用するファイルが揃ったらビルドしてみる。

```bash
docker build -t my_nginx .
```

>-tはtag（名前）を付ける

### イメージの確認

イメージが生成されているか確認。

```bash
docker images
```

### 作成したイメージからコンテナの実行

生成したイメージをもとにコンテナを実行してみる。

```bash
docker run --name my_www -d -p 8080:80 my_nginx
```

無事起動したら http://localhost:8080 を見てみる。Hello!と表示されていればOK。

## docker-composeの利用

Dockerfileは1つのイメージ（コンテナ）に対する設定になるが、実務では複数のイメージを組み合わせて利用することが多い。その時利用するのがdocker-compose。

### 準備

とりあえず設定ファイルを作成。

```bash
touch docker-compose.yml
```

### docker-compose.yml

記述する。1つのサービスを定義するのもなんなので、nginxではあるが2つ設定を書いてみる。
カスタムのnginxを8080で起動させ、標準のnginxを8888で起動させてみる。

```yml
version: '3'
services:
  my_nginx:
    build: .
    container_name: my_www
    ports:
      - "8080:80"
  nginx:
    image: nginx
    container_name: www
    ports:
      - "8888:80"
```

>my_nginxはDockerfileを利用してビルド。nginxの方は既存imageから起動させています。

### 実行

実行はupで。-dをつけるとdockerのときと同様バックグラウンドで実行される。

```bash
docker-compose up -d
```

### 停止

停止の時はdownで。コンテナの削除までやってくれる。

```bash
docker-compose down
```
VSCodeの表示言語切替の方法

備忘録で表示言語切替のメモです
win10, vscode 1.66.2 使用してます
切替たい言語がない時は言語パックのインストールが必要になります

# 表示言語切替
1. [View] - [Command Palette] をクリック ※[表示] - [コマンドパレット]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/972d6a3e-83ea-5981-104a-b31c58735c4c.png)
1. テキストに `Display` 入力 - [Configure Display Language] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/64305104-36e1-7294-630a-c0511d387772.png)
1. 表示したい言語をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/92a8635b-7f67-af3c-3243-a3f21e1eaa37.png)
1. 再起動して上がってきたら切替完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/cf64f526-541c-92bc-2c7f-d34dfd5a082c.png)

# 言語パックインストール → 表示言語切替
1. [Extensions] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/1188b1b0-5d58-30cf-6611-86da01ccc234.png)
1. 検索テキストに `Language Pack` 入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/f10d69fd-cfa5-d100-510e-433f2c322c6f.png)
1. 表示したい言語をクリック - [install] をクリック（例では日本語）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/7afaae44-8a57-84ba-8a58-5215beda6509.png)
1. 右下の通知より再起動して上がってきたらインストール・切替完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/ce890614-d506-d486-ae72-a34e878bc35d.png)
Makeでコーディネートを考えてくれるLINEBotを作る

## コーディネートを考えるのも一苦労
突然ですが、**毎日コーディネートを考える**のって実は大変じゃないですか？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/77b98ab6-9a5b-248e-ebb0-826a039f2dc0.jpeg" width="50%">
私は衣料品販売のお仕事をしているので、私服以外にもコーディネートを考える機会が多くあります。
また、お客さまからコーディネートについてご相談いただくことも多く、相談内容として二番目に多いのが「これに合わせるなら何色？」です。
（ちなみに一番多いのは「どっちの色が合うと思う？」です。）

でも、正直そんなにパターンは考えられないし、私服とディスプレイで使う色味は全然違うし……。
オシャレは好きだけど、結構大変かも……。

**そうだ、LINEBotにコーディネートを考えてもらおう！**

ということで、
今回はコーディネートの中でも、**色の組み合わせ**に特化してLINEBotを作りました。
お洋服の写真を撮って送り、Botがそのお洋服の色に合わせる色を提案してくれたら完成とします。

## 作ったもの
https://twitter.com/kmsn_kmsn_kmsn/status/1518275046216638464

試しに私が持っているかわいいピンク色のパンツを撮ってみました。
いつもベーシックカラーばかり合わせていましたが、新しいコーディネートが組めそうです。

## 使ったもの
- [LINE Messaging API](https://developers.line.biz/ja/)
- [Make](https://www.make.com/en)
- [Google Cloud Vision API](https://cloud.google.com/vision/?hl=ja&utm_source=google&utm_medium=cpc&utm_campaign=japac-JP-all-ja-dr-bkws-all-all-trial-e-dr-1009882&utm_content=text-ad-none-none-DEV_c-CRE_285865410187-ADGP_Hybrid%20%7C%20BKWS%20-%20EXA%20%7C%20Txt%20~%20AI%20%26%20ML%20~%20Vision%20AI_Vision-General-en-KWID_43700070090529230-aud-1596662388894%3Akwd-203288730967&userloc_1009050-network_g&utm_term=KW_google%20cloud%20vision&gclid=CjwKCAjwu_mSBhAYEiwA5BBmf3PT_K1IBoey85L4oOWLS10l8JI0O2Ikah8w1hKYiB2aM26igIGGWhoCxZYQAvD_BwE&gclsrc=aw.ds)
- [The Color API](https://www.thecolorapi.com/)

## 構造
![スクリーンショット (46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/b5ebb871-c290-6eed-34eb-448a73058551.png)

（モジュールを作っては消しを繰り返しているため、些かお見苦しいものとなっておりますが、ご容赦ください。）

**1.** LINEで送信されたメッセージが文章か、写真かを判断します。

**2.** 写真であれば *Google Cloud Vision API* で写真のメインカラーを検出します。
![スクリーンショット (50).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/65602c1f-17ac-f009-4d8d-2072c198f71a.png)
![スクリーンショット (51).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/e34c814d-cb9e-0281-32a8-27e0abce6912.png)

　文章であれば、以下のようにメッセージを返信します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/c3319789-8348-6677-8ce6-805fea912918.jpeg" width="50%">

**3.** *The Color API* でメインカラーを含む配色を検出します。
![スクリーンショット (52).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2616138/514fcf38-5f41-03f0-b3e3-fc098ab1cdb4.png)

**4.** 検出した配色のWEBページのURLを返信します。今回はリンクをクリックするとanalogicのページが表示されるようにしました。

## あとがき
まだまだ改良の余地はありますが、一先ず**完成**です。
今回は配色にパターンがあったのでURLでの返信にしましたが、画像の方が一目で理解できていいかもしれませんね。
今後も試行錯誤していきたいと思います。

それでは、スマホ片手にちょっくら**ファッションリーダー**になってきます！

### 参考にしたもの
https://note.com/keitafukui/n/n6033d8c53cf1
ワンコイン/月で作るゲームブックプラットフォームの使用技術メモ

## 概要
パラグラフを自由に作成し、タグをゲームブックを作成できるシステム 「[カルタグラフ](https://d3snr6xc5uvnuy.cloudfront.net/cartagraph-gamebook/public/1)」 を作った。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/bb528bf8-62ce-8a28-35f9-6f7c5669f6e9.png)

作成したパラグラフの関係は、グラフ図で確認できる。1日1回更新。
[グラフ確認画面](https://d3snr6xc5uvnuy.cloudfront.net/cartagraph/gamebook-paragraph)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/2a2f3e57-1d52-a546-6a84-96f468e412ad.png)

使用している使用技術・サービスをまとめる。

**2022.11.11 追記** [HerokuをNeonに変更。](https://qiita.com/hibohiboo/items/68a3829e66e60b56ae5b)

**2024.11.06 追記** Route 53 を廃止
Freenom で取得したドメインの更新がなぜかできなかったため。

## システム構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/3e86d651-893d-f4e2-6abd-62ece1d797ac.png)

基本的にすべて無料枠を利用している。
利用料がかかっているのは以下。日本円で およそ 100円 / 月 。
DNSを無料のものにしていればもっと安く済むだろうが、CDKで管理したかったので。

用途|サービス|利用料 
--|--|--
DNS|Route 53| 0.5ドル / 月
ストレージ|S3|0.01ドル / 月

## フロントエンド
SPAとして作成。

### フレームワーク
フレームワークにはReactを使用。
最近、18にアップデートされたり、Redux Toolkitで状態管理がやりやすくなったと聞いて。

### ライブラリ
* [vis.js](https://visjs.github.io/vis-network/docs/network/index.html)
グラフ図に利用。 [D3](https://d3js.org/)は機能豊富すぎてとっつきずらく、vis.jsのほうが手軽に始められたため。

### デプロイ先
S3 + CloudFrontの構成。
CDKでデプロイが手軽にできるため。
また、API Gatewayを後ろにつけることにより、CORS設定を考えなくてよい。
利用者も少ないので、利用料も0。
もし課金が大きくなるなら、[cloudflare](https://pages.cloudflare.com/)を試そうと考えている。

## バックエンド
フロントエンドからのリクエストを処理するAPI。
RESTで作成している。

### デプロイ先
API Gateway + Lambda (Typescript)。



## データプラットフォーム
### ストレージ
HTML、グラフ用JSONの配置。ログの保存。

ログはAPIGateayからS3に直接データを流している。
グラフ図用のJSONは、1日1回EventBridge起動のLambdaが、DBから情報を取得して更新している。

### データベース
グラフ図用にパラグラフのリンクデータを管理。

LambdaからGraphQLを使ってHasura経由で ~~Heroku~~ Neon のPostgresを操作している。

### NoSQL
パラグラフの情報を管理。

フロントエンドから、FirebaseのFirestoreを操作している。
認証は匿名認証で、自分の作成したパラグラフのみ編集できるようにした。

## まとめ
ゲームブックシステム 「カルタグラフ」 で利用している技術をまとめた。
マイクロサービスのレイヤードアーキテクチャ風になっていると思う。

CI/CDがまだ出来ていないので作っていきたい。
テスト駆動で作ってみたいと思いつつ、つい、テストより動くものを作りたくなってしまう。。


[ソースコード](https://github.com/hibohiboo/kartagraph/blob/id/141/client/src/components/pages/Agreement.tsx)

## 参考


[vis.js](https://visjs.github.io/vis-network/docs/network/index.html)
[迷宮キングダムよりごんぎつね](https://www.pixiv.net/artworks/15706773)
【検証】a.phpでc.phpをrequireするだけでb.phpはc.phpをrequireなしで使えるの？

今回はPHPの仕様としてrequireを一回どこかで入れれば他のファイルはあえてrequireを使わなくてもいいのか疑問があったので調査してみました。
もう少し具体的に言うとa.phpでc.phpをrequireするだけでb.phpはc.phpをrequireなしで使えるの？という疑問を検証します。

# 実験準備
検証のためにa,b,cのファイルをWEBサーバ内の同じディレクトリに用意します。

```php:a.php
#c.phpを読み込んだ後インスタンス化
#そのあとb.phpを読み込んで返却してもらった文字列を表示する。
<html><h1>
<?php
require "c.php";
$c = new c;
echo require "b.php";?>
</h1></html>
```
```php:b.php
#a.phpから呼び出されたらc.phpに定義してあるcクラスをインスタンス化する。
#b.phpではc.phpをrequireせずとも問題なく実行できるか確認
#実行できれば成功を返却
<?php
$c = new c;
return "成功";
?>
```
```php:c.php
#インスタンス化されたいだけなので空のクラスで十分
<?php
class c{}
```

# 実験結果
役者は揃いました。
早速ブラウザでa.phpにアクセスしてみましょう。
\うまくいっていれば成功と表示されるはずです。/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/ba3455cc-2a36-7615-30fb-f55be70722f1.png)


# 結論
a.phpでc.phpをrequireするだけでb.phpはc.phpをrequireなしで使えます！
地味に気になったけど調べても出てこなかったのでやっとわかってすっきりしました！

※2022/4/23追記
コメントにてrequireにもスコープがあり必ずしも一度requireすればどこでも使えるというわけではないことをご指摘していただきました。
指摘内容について確認した記事を投稿したのでそちらも合わせてご確認ください。

https://qiita.com/4U5zo/items/7dcae74a340f124b6426

# おまけ
a.phpでc.phpのrequireを消してb.phpとc.phpはそのままで再度ブラウザでa.phpにアクセスすると・・・
```php:a.php
<html><h1><?php
//require "c.php";
//$c = new c;
echo require "b.php";
?></h1></html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2626978/ddbe729b-7d3d-e7cd-85cf-236328d4dd3e.png)

b.phpの2行目c.phpを使うタイミングで当然ですがエラーになっちゃいます。
```php:b.php
<?php
$c = new c;
return "成功";
?>
```
1日１企業紹介　TIS株式会社

１日１企業を紹介していく。

やる気がある限りは続ける。

TIS株式会社（TIS Inc.）

従業員
連結：21,817名　単体：5,838名
（2021年3月31日時点）

国内大手の独立系のSIer。
傘下にインテック、アグレックス、クオリカ

AI・ロボットを活用したビジネスを行う「AIサービス事業部」
なるものを2017年に新設しているものの主となるのは
何行っても「金融」

例として
クレジットカードシステムを構築し保守・運用している

加えてAI×金融の事業にも手を出している。

またほかにも
様々な健康情報の利活用により健康寿命延伸を促進するヘルスケアプラットフォーム事業もしている。

2020年ごろ
クラウド型地域医療情報連携サービス「ヘルスケアパスポート」を提供開始

2021年
TISと東和薬品がクラウド型地域医療情報連携サービス「ヘルスケアパスポート」の協業販売にむけたアライアンス契約を締結
【Pega】添付ファイルの追加と削除

## １．はじめに
本記事では、画面に添付ファイルの追加・削除の実装を紹介します。

## ２．添付ファイルを追加するボタンの実装
・ファイル添付を追加します。（アクション ⇒ ファイル添付）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/978730b8-12c6-a9fc-a38d-2ccfc9946754.png)
<img width=50% alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/a29803c1-ef34-d5a6-596c-5e33ef9b2608.png">
・セルプロパティのアクションを実装します。
　添付ファイルを追加した後に、ファイルが表示されるようにセクション（pyCaseRelatedContent）をリフレッシュします。
<img width=50% alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/8d32c0ce-f9d8-1836-cbe8-6897efd9cac7.png">

## ３．添付ファイルを削除するボタンの実装
・ボタンを追加します。（アクション ⇒ ボタン）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/b840b294-f4f9-1348-3677-fc065f1832fe.png)
<img width=50% alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/622e23be-40ab-1d60-430d-17b84885cfc0.png">
・セルプロパティのアクションを実装します。
　添付ファイルを削除するアクティビティ（DeleteAttachmentFile）を実装します。（その後に紹介します）
　添付ファイルを削除した後に、最新の情報を表示するようにセクション（pyCaseRelatedContent）をリフレッシュします。
<img width=50% alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/978aa8f9-6157-4e39-5f93-94278b761291.png">

## ４．添付ファイルを削除するアクティビティの実装
・参照するページを定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/443bf413-2256-c3b9-4334-48b7dfc28f8f.png)
・Step1：該当ケースの添付ファイルを取得し、ループします。
　Step1のステップページ：D_AttachmentList[LinkRefFrom:pyWorkPage.pzInsKey].pxResults

・Step1.1：OOTBのアクティビティを呼び出します。
　インプットパラメータSkipHarness、SkipCollatedAuditの値は下図のように実装します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/e1b5a05a-95a9-713b-cefa-47128ba6dad2.png)

## ５．実装結果確認
・添付ファイルを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/149498fc-4e7c-bebd-faad-766cc863e059.png)
<img width=50% alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/c45a07cb-75a4-2e51-2c26-e024267d7a1f.png">
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/fa9ae34c-85d3-b38d-f9ec-9820237248a5.png)
・添付ファイルを削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/32baabfb-efae-89b8-0651-4aa466cb7a38.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258181/bcd8b738-a482-1876-fc15-eb65cfe7aa27.png)

#### ・Pega環境
　Pega 8.6.1

#### ・キーワード
　Add or remove attachments in Pega

#### ・日本語 ⇔ 英語
　セルプロパティ ⇔ Cell Properties
　セクション ⇔ Section
　アクション ⇔ Action
　ステップページ ⇔ Step page
WSL2 Ubuntuでデータベース入れ間違ったので再インストールした話

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はWSL2 Ubuntuでデータベースを入れ間違った時の対処法についてまとめます。


## 実行環境
<dl>
  <dd>・Windows 11 Home(バージョン 21H2, OS ビルド 22000.613)</dd>
  <dd>・Ubuntu v18.04 ※WSL2環境下</dd>
</dl>

# 起きたこと
PostgreSQL13以降が必要だったのに10を入れてしまった。
まだデータを入れておらずバックアップもとる必要ないため、アンインストール＆再インストールを試みたいと思った。

そこで、

https://qiita.com/ho_soft/items/5136bc0dcee2ca110d8a

を参考に削除しようとしたものの

```
$ sudo apt remove --purge postgres
Unable to locate package postgres
```
となって削除できない...

## アンインストールする

https://askubuntu.com/questions/1020031/cant-remove-postgresql-in-ubuntu-16-04

によると、
```
$ sudo apt remove --purge postgres
```
の、postgresにあたるところは、

```
$ dpkg -l | grep postgres
```

の結果で得られるソフトウェアの名前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/4c53eb8f-1fc8-8977-5705-f7ed34204e81.png)

を入れるんだったそうな。

ゆえに、
```
$ sudo apt remove --purge postgresql
$ sudo apt remove --purge postgresql-10
$ sudo apt remove --purge postgresql-client-10
$ sudo apt remove --purge postgresql-client-common
...以下同様
```
を実行すると消えてくれました。
全部消し終わったら、
```
$ dpkg -l | grep postgres
```
で結果が返ってこないことを確認して完了！
とはいえ、アップデートで代用できなかったかな？



## 再インストール方法
PostgreSQL14をapt[^4]
で入れたいと思う。[^3]

https://wiki.postgresql.org/wiki/Apt

を参考に、再インストールを試みる。

curlは、ubuntuに固有の公開鍵をdockerからダウンロードし、キーリングと呼ばれるものをインストールします。
これは、dockerパッケージの検証に使用されるとのこと[(参考元)](https://stackoverflow.com/questions/70020722/what-is-the-meaning-of-sudo-apt-get-install-ca-certificates-curl-gnupg)[^2]
```
sudo apt install curl ca-certificates gnupg
curl https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor | sudo tee /etc/apt/trusted.gpg.d/apt.postgresql.org.gpg> / dev / null
```
現在のリポジトリを最新のものにする

```
sudo apt update
sudo apt upgrade
```
PostgreSQL14をインストール
```
sudo apt install postgresql-14
```

PostgreSQL14のバージョン確認と起動[^5]
```
psql --version
sudo service postgresql start
```

データベース内に移動し、対話型コンソール(psql)を起動
```
sudo su - postgres
psql
```
[データベースのロールを変更](https://www.postgresql.jp/docs/9.2/sql-alterrole.html)しpsqlを抜ける

```
postgres=# alter role postgres with password 'postgres';
postgres=# \q
exit
```
再インストール完了！


# ～Elixirの国のご案内～
※Elixirって何ぞや？と思ったらこちらもどぞ。未来がぎゅっと詰まった、Elixirは今年で生まれて10周年です:laughing::sparkles::sparkles:

https://qiita.com/piacerex/items/7bf8f9f4f5f576e597f5



[We Are The Alchemists, my friends!:bouquet:](https://qiita.com/torifukukaiou/items/6bcd5bbb80df9e594e9e "Awesome-san's Awesome article")[^1]
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。


まずは気軽に話しかけてみてください。


https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian




[^1]: @torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。
[^2]:不明点：なぜ突然Dockerが出てきた？
[^3]:PostgreSQL13にしなかったのはWSLの外のローカルが14を使用しているのでそれに合わせようと思ったため。
[^4]:aptとはlinux用パッケージマネージャのこと
[^5]:psqlを起動させてからでないとバージョン確認できないので注意
スマートウォッチ開発#4

回の投稿から約1週間ほどが経過した。スマートウォッチ開発の進捗を下記に示す。

前回までは、現在、詰まっている箇所は、「コードをどのようにして書くのかがわからない」ところで停止していた。
メンターから下記のようなヒントを得た。（プログラム動作の基本的なアーキテクトでもある）
・app:fitbit デバイス内のコントローラー
・companion:fitbitと連携されるデバイス（今回でいえばiphone）
・resource:fitbit UI

fitbit開発ガイドから(https://dev.fitbit.com/build/guides/)、以下を完了した。
	・メッセージを飛ばして、メッセージを表示させる機能の追加　ー１
	・ボタンを押せば、振動する機能の追加（上手く行かない場合のボタンを押して帰る）ー２
　　 ・fitbitで振動の動確　ー３
 　　・メッセージが送信されたときにfitbitが振動と、その動確　ー４

app

//１，４のコード
import * as messaging from "messaging";
import { vibration } from "haptics";
messaging.peerSocket.addEventListener("message", (evt) => {
  console.error(JSON.stringify(evt.data));
  vibration.start("ring");
});

//ボタン作成　２のコード
console.log("button started")
import { vibration } from "haptics";
import * as document from "document";
const myButton = document.getElementById("button-1");

myButton.addEventListener("click", (evt) => {
  console.log("CLICKED");
  vibration.start("ring");
})

import { vibration } from "haptics";
import * as document from "document";
const myButton = document.getElementById("button-2");

myButton.addEventListener("click", (evt) => {
  console.log("CLICKED");
  vibration.start("ring");
})

３.fitbitの動確は、こちらのリンクを参照した結果、fitbit側の開発者用ブリッジをonにすることが必要であった。（fitbitデバイスから操作する）
https://gihyo.jp/lifestyle/clip/01/awt/202008/06


残り、iphone側のUIを作成して、アプリ登録を行い、開発のMVPは終了とする。
・iphoneの方でボタンを設定してメッセージを送信する。（settingで記載する）


以上
lsusbコマンドからUSBの規格情報を確認

# 使っているUSBデバイスの規格を確認したいとき
使用している最中に確認したい、またはUSB3.xxに偽装したUSB2.0を見分けたいときに・・・
`lsusb`を実行して、デバイス一覧を表示。
```
lsusb
```
>Bus 002 Device 002: ID 090c:1000 Silicon Motion, Inc. - Taiwan (formerly Feiya Technology Corp.) Flash Drive
Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 001 Device 004: ID 046d:c52b Logitech, Inc. Unifying Receiver
Bus 001 Device 002: ID 1c4f:0051 SiGma Micro Usb Mouse
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
>
筆者の環境ではこうなった。
次に、検査したいUSBデバイスのデバイスID(xxxx:xxxx)をコピペして、
```
lsusb -d <device_id> -v | grep "bcdUSB"
```
を実行。
2.00と出れば、そのデバイスはUSB2.0だし、3.00や3.20と出れば、USB3.0やUSB3.2である。
【MySQL】SQL文のDELETE、奴はDML四天王の中でも最弱…

使わない知識はだんだんと薄れていきます。
MySQLについても結構昔に勉強したはずなのですが普段遣いのコマンドはともかくとしてド忘れてしてることが結構あります。

ということで学び直しをしていますが、あまりに基本的なことはあーはいはいという感じで眠くなってしまったりもするのでアウトプットして勉強した気になることとします！

### 前回のあらすじ
SQL文におけるUPDATE文の使い方を学びました

https://qiita.com/Terralien/items/18440693154fa4fa7e79


## DELETEとは
DELETE文はテーブル内のレコードを削除するSQL文です。

レコード追加を行うINSERT、更新を行うUPDATE、取得を行うSELECTとともにDML四天王と呼ばれています（嘘）

:::note
DMLとはData Manipulation Languageのことを指し、上記4つの事を言います。
この他に構造を定義するためのDDL、権限などを制御するDCLとともにSQL御三家と呼ばれています（嘘）
:::

### DELETE文の使い方
まず`DELETE FROM テーブル名;`のように指定するとテーブルの中身が全て削除されます。
しかしSQLを業務等で使うに当たりテーブルの中身を全部消すような使い方はほぼしないと思います。

テーブル内の削除する対象データを絞り込むには`WHERE`句を使用して削除するデータを限定します。

それでは、なんとなく山田さんの存在を消したくなりましたので消しましょう。

:::note
以下のSQL文は仮想環境[Envader](https://envader.plus)(ubuntu, MySQL(MariaDB))を使用しコマンド実行しています。
:::

```sql
DELETE FROM テーブル名 WHERE name="山田さん" ;
```
これで山田さんはデータベースのテーブル上から消えました。

つづいて売上トップ独走中の佐藤さんのデータを5件削除したいと思います。この場合はLIMIT句を使います。

```sql
DELETE FROM テーブル名 WHERE name="佐藤さん" LIMIT 5;
```

はい、佐藤さんお疲れ様でした～。


ところで、値の大小条件はORDER BYで指定することができます。

IDが5より小さいデータは残念ながら抹消しましょう。

```sql
DELETE FROM テーブル名 WHERE 5 > id ORDER BY id;
```

さらにid降順（DESC)に並び替えて上位5件を削除します。

```sql
DELETE FROM テーブル名 ORDER BY id DESC LIMIT 5;
```
:::note
デフォルトの並び順はASC（降順）です。
:::

下等なidどもをやっつけました。

以上で一通りのDELETE文の使い方の学習を終了とします。

SQL文参考：[【MySQL の基本】DELETE文の使い方について](https://envader.plus/course/2/scenario/1050)

### 注意点
一番最初に書いた通り、条件指定をしないとテーブルの中身は全て消えてしまいます。
`WHERE`などで対象を指定しましょう。


## 学んだこと
* DELETE文の使い方それぞれ
* 条件指定しないと全部消えるヤバいコマンドであること

これでSQL軍のDML四天王全てを討伐しました。やったぜ。

## 参考資料
https://envader.plus/course

https://products.sint.co.jp/topsic/blog/sql-delete