OmniAICreator/Qiita-1.07M huggingface dataset:
より正確に対角線、三角要素を作る

## 経緯

前コーディング作業よくした時に、固定値あまり入れたくなくて、よく計算処理を入れてました。
cssだけだったらcalcとかをよく使ったり、cssだけじゃ難しいと感じた場合はjsで計算し値を設置したりしました。
理由は自分の中で固定値にしちゃうと「今のコンテンツ量や横幅の時だけデザインデータとぴったしに合わせられたが、
これからサイトを運営していく上でコンテンツ増えたり、画面幅が変えたりする時には崩れたりする」ことが可能性としてあるからです。
## 対角線の使い道
- 以下のような斜めるラインがはいてるデザイン：
![Group 27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/d74b2f98-1781-e86b-20d4-73fd09f868e1.jpeg)
- 表を組み込みする時の空欄
 ![img6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/b6189df7-15b3-f6a6-000b-23866ca18527.jpeg)
などなど...

## 対角線作る時の問題
対角線っぽいデザインを再現するときに、よく以下の問題が起きる気がします。

### ちょうど「横縦」が決まってる「正方形」だったら：
- 正方形なので、対角線の角度が４５度
- 縦横が決まってるので、対角線が切れないように幅よりすごくデカい数値を入れて、親に```overflow: hidden;```をかければバレない

#### イメージとしてはこんな感じ：
![Group 16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/ba3481a5-57d3-5ad6-0742-fb63fb9cf560.jpeg)
#### 対角線を回転させるとき用の部分のコード：
```
  left: 0;
  bottom: 0;
  transform-origin: bottom left;
  transform: rotate(45deg);
```
#### 実際やってみるとこんな感じ：

https://codesandbox.io/embed/dazzling-rain-i0gm5o?fontsize=14&hidenavigation=1&theme=light

### 「横縦」が可変の「長方形」だったら：
- 長方形なので、対角線の角度を知るのが必要
- 縦横が決まってないので、先ほどの「切れないように幅よりすごくデカい数値を入れて、親に```overflow: hidden;```をかければバレない」というのがいずれ効かなくなるので、対角線の長さを知るのが必要

#### イメージとしてはこんな感じ：
縦横は幅によって、赤い対角線の長さが変わりつつ、対角線と長方形の下の線を挟んでる角も変わっていく形になっている感じになるので、対角線の長と挟まれた角の度数を知る必要がある。
![Group 19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/59eaaa22-ebc0-6c6c-590b-3e628ed51cc2.jpeg)

#### 対角線の長さを求める
![Group 20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/42cabd61-c45f-42a4-dff6-5dbf5cd5b790.jpeg)
中学校の時の学んだ知識を使い、c * c = a * a + b * b なので、cの長さは平方根を計算するsqrtを使って値を取得する。
Mathオブジェクトの```Math.sqrt```メソッドは指定した値の平方根を計算する、書式は次の通りとなる。

>Math.sqrt(数値)
引数に指定した数値の平方根を計算し結果を返します。引数が数値ではなかった場合は数値に変換してから平方根を計算します。対象の数値が負の値の場合は NaN を返します。

なので対角線の長さは
```Math.sqrt(長方形の横幅*長方形の横幅+長方形の縦幅*長方形の縦幅)```
となる。
#### 対角線の角度を求める
同じ中学校の時の学んだ知識を使い、
![alltrigonometry1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/98789c33-56b7-4a16-cbcb-8e63fd6753d4.gif)
tanA = a / bなので、与えられた数値のアークタンジェントを計算する、atanを使って値を習得する。

>Math.atan() メソッドはラジアンの数値を返します。
atan() は Math の静的メソッドであるため、生成した Math オブジェクトのメソッドとしてではなく、常に Math.atan() として使用するようにしてください (Math はコンストラクターではありません)。

atanから得た値の単位はラジアンでtransfromに使えるように度単位に換算しないといけないので、Math.PIから円周率を得て計算する。

なので対角線の角度は：
```atan(A)*180/Math.PI```
#### 実際やってみるとこんな感じ：
- いくら幅変えても崩れない
- 画像ではないので、線に対して色々な処理が自由になる
    - アニメーションつけることができる
    - 色、透明度などの調整
    - 幅を調整し、三角や帯などができる
    - 本数を増やし、loopさせたら面白そうなアニメーションができる

https://codesandbox.io/embed/diagonal-7kyc9n?fontsize=14&hidenavigation=1&theme=dark&view=editor

https://codesandbox.io/embed/diagonal-7kyc9n?fontsize=14&hidenavigation=1&theme=dark
## 最後に
同じ原理で作れば三角形のものや斜めてるものが色々再現できると思います。線の位置をずらしたり、幅を増やしたり、線の本数を増やしてloopさせてアニメーションを作ってたり、etc...、また何か思い出したら書いていきます。
Nuxt3 への Vant4 導入

## はじめに

前回、 [Nuxt3 の環境構築 についての記事](https://qiita.com/kurararara/items/ebe561016e4b486b7673) を書きましたが、今回は UI フレームワーク `Vant` の導入をまとめました。

Vant の公式サイトはこちらです。

https://vant-ui.github.io/vant/#/en-US



> Vant バージョン： 4.0.10



## 前提条件

上述した前回記事の方法でできあがったプロジェクトの状態からスタートする記事になっています。 `Nuxt3` の環境がない場合は前回記事から作成してお試しください。



## Vant の導入

### インストール

`Vant` を導入していきます。

```shell
npm i -D vant
```

### 初期設定

インストールしたら、初期設定をしていきます。
`nuxt.config.ts` を次のように変更します。

```diff_typescript:nuxt.config.ts
- export default defineNuxtConfig({})
+ export default defineNuxtConfig({
+   experimental: {
+     externalVue: true,
+   },
+ })
```



## Vant の利用

### プラグインファイルの作成

プロジェクト直下に `plugins` フォルダを作成し、 `vant.js` ファイルを作成します。そのファイルに利用したいコンポーネントをインポートし、利用可能にする設定を行います。

```javascript:plugins/vant.js
import { defineNuxtPlugin } from '#app'
import { Row, Col, Button } from 'vant'

import 'vant/lib/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp
    .use(Row)
    .use(Col)
    .use(Button)
})
```

サンプルとして、 `Row` 、 `Col` 、 `Button` コンポーネントを利用するコードを記載しました。
利用できるコンポーネントは `Vant` の公式サイトに載っているので、使いたいものを記載するようにしましょう。

`Nuxt2` でグローバルにプラグインを読み込むためには `nuxt.config.ts` への設定が必要でしたが、 `Nuxt3` では `plugins` フォルダにあるものを自動で読み込んでくれるようです。
（これは便利！！）



### Vant コンポーネントの利用

ここまでの設定で `Vant` の利用ができるようになりました。
`app.vue` に次のように記載して動作確認をしてみましょう。

```diff_vue:app.vue
<template>
  <div>
-   <NuxtWelcome />
+   <van-button plain type="primary">Plain</van-button>
  </div>
</template>
```

![image-20230217151305958.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135956/2c5f0780-9a60-28d3-9233-eb2c037de02f.png)
このように表示されれば `Vant` が利用可能になっています。



## まとめ

`Nuxt3` への `Vant` 導入方法を記載しました。

`Nuxt2` では、 UI フレームワークを CLI で選択すればある程度設定済みの状態でインストールされていました。もし使いたいものがあれば `Nuxt2` の方が簡単に利用できていたということです。

この辺りはカスタマイズの自由度をとるか、こだわりなくスムーズなスタートを切るか、といった違いになるので、一概にどちらが良いとは言えませんが、 `Nuxt` 初学者には `Nuxt3` は少しとっつきにくいのかなと感じます。
plunkerでdeck.gl その8

# 概要
plunkerでdeck.glやってみた。
tile3dLayer、使ってみた。

# 参考にしたページ
https://qiita.com/Kanahiro/items/4ae702c575176501a157


# サンプルコード

```

const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const tile3dLayer = new deck.Tile3DLayer({
    id: 'tile3dlayer',
    pointSize: 1,
    data: 'https://s3-ap-northeast-1.amazonaws.com/3dimension.jp/13000_tokyo-egm96/13101_chiyoda-ku_notexture/tileset.json', 
      // PLATEAU千代田区
    loader: Tiles3DLoader,
    onTilesetLoad: (tileset) => {
      const { cartographicCenter } = tileset;
      const [longitude, latitude] = cartographicCenter;
      console.log(longitude, latitude);
    },
});
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 139.75,
    latitude: 35.69,
    zoom: 13,
    minZoom: 2,
    maxZoom: 16,
    pitch: 40,
    bearing: 0,
  },
  controller: true,
  layers: [tileLayer, tile3dLayer, ]
});




```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/909f1425-be8a-1c00-0c01-598faef5f1cd.png)


# 成果物

https://embed.plnkr.co/plunk/ZCdVLYH87yMwS9eY


以上。
Capistrano自動デプロイ時のブランチが見つからないエラー

# エラー内容
Capistranoを使用して自動デプロイコマンド
`bundle exec cap production deploy`
を実行したところ、以下のようなエラーが発生。
```ruby:エラーメッセージ
git archive master
fatal: not a valid object name: master
```
１行目ではGitのmasterブランチ
２行目では「master」という名前のオブジェクトが無効とのこと。

# 解決まで
おそらく、「master」というブランチが無効（もしくは存在しない）ために
エラーが発生していると想定。

また、現在のGithubにおける大元のブランチが「main」となっているため、
ブランチ名を「master」にするか、Capistranoが検索するブランチを「main」に
変更すれば解消できるのでは、と考え調べたところ、

```ruby:config/deploy.rb
set :brach, "main" #末尾に記載
```
上記のように追記することで、Capistranoで検索するブランチを「main」に
変更することができたため、エラー解消。
plunkerでdeck.gl その7

# 概要
plunkerでdeck.glやってみた。
geojsonLayer、使ってみた。

# サンプルコード

```

const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const ICON_MAPPING = {
  marker: {
    x: 0, 
    y: 0, 
    width: 128, 
    height: 128, 
    mask: true
  }
};
const geojson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [139.692101, 35.689634]
    },
    "properties": {
      "name": "東京都庁"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [139.6941689, 35.6902021]
    },
    "properties": {
      "name": "京王プラザホテル"
    }
  }]
};
const geojsonLayer = new deck.GeoJsonLayer({
  id: 'geojson_layer',
  data: geojson.features,
  pickable: true,
  pointType: 'icon',
  iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
  iconMapping: ICON_MAPPING,
  getIcon: () => 'marker',
  getIconSize: () => 5,
  iconSizeScale: 8,
  onClick: info => {
    console.log(info);
  },
  onHover: info => {
    if (!map) 
      return;
    map.setOptions({ 
      draggableCursor: info.object ? 'pointer' : 'grab' 
    });
    console.log(info);
  },
});
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 139.6,
    latitude: 35.8,
    zoom: 8,
    minZoom: 2,
    maxZoom: 10,
    pitch: 30,
    bearing: 10,
  },
  controller: true,
  layers: [tileLayer, geojsonLayer, ]
});




```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/daf8bae6-c019-7483-6afc-fd5dd39f9bb5.png)

# 成果物

https://embed.plnkr.co/plunk/nJ76t42bTE6yx8pX


以上。
フィクションなどから拾う情報処理用語 その30 情報漏洩 (アルセーヌ・ルパン)

パリの高校生イジドール・ボートルレはボートルレの友人のところに居候し、果敢にもアルセーヌ・ルパンに戦いを挑んだが、常に裏をかかれていた。その理由をなんとルパン自身が明かしてしまった。

ここから「奇岩城」モーリス・ルブラン著、平岡敦訳、ハヤカワ・ミステリ文庫より

ルパンはボートルレの前に立った。「でもこんな話をしたら、きっときみは泣き出すだろうな。どうやってわたしがきみの動向をつかんだのか、わかるかい？マシバンがきみに書いた手紙や、今朝ヴェリーヌの城で待ち合わせたことを、どうやって察知したのか？実は友達が漏らしたのさ。きみは友達の家に泊めてもらい……あのお調子者に何でも打ち明けている。するとやつは、さっそく恋人に話してしまう……そこからルパンへ筒抜けってわけだ……変なことを言ったかな？どぎまぎしてるじゃないか……おや、目が潤んでいるね……友情が裏切られたのが、そんなに悲しいのかい……本当にかわいいね、きみは……思わず抱きしめたくなるよ……いつも驚いたような目をしているのが、胸に迫るんだ……ガイヨンでわたしを訪ねてきた晩のことは、忘れられないな……もちろんあの公証人は、わたしだったのさ……だから、さあ笑って……さっきも言っただろ。きみには笑顔がないんだ。そうきみには……何ていうか……《磊落さ》が欠けている。《豪放磊落》がわが信条なんだがね」

ここまで「奇岩城」モーリス・ルブラン著、平岡敦訳、ハヤカワ・ミステリ文庫より

つまり情報が漏洩していたのである。

イジドール・ボートルレ → ボートルレの友人 → ボートルレの友人の恋人 → アルセーヌ・ルパン(の部下?)

となっており、ボートルレの友人がセキュリティーホールだったのであった。

これに懲りたボートルレはボートルレの友人のところから出て行ったのであった。
ハイブリッドアプリでの運用保守のススメ

# はじめに
Angularとionicというフレームワークを使用して
ハイブリッドアプリの運用保守に携わってます。
その際に工数を大幅に削減できた例があったのでこちらでご紹介させていただきます。



:::note
Angular とは？
:::
![Angular.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1293311/34136071-e6e1-eb7c-1d52-46e5da8c58ba.png)
　　Googleが開発しているJavaScriptフレームワーク。
　　WEBアプリケーションの開発のために使用。
　　MVC・双方向データバインディングといった特徴がある。

:::note
ionic とは？
:::
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1293311/e1d4bf3d-4735-9e6e-0162-eab57163439d.png" width="50%">

　　Ionic FrameworkはオープンソースのUIツールキットで、
　　HTML、CSS、JavaScriptなどの<font color="blue">**ウェブ技術を使って**</font>、 高性能で高品質な
　　モバイルアプリやデスクトップアプリを作ることが可能。



# 環境
```
　Angular           : 7
　ionic             : 4.9
　Cordova CLI       : 10.0.0
　Cordova Platforms : android 7.1.4 / iOS :4.5.5
　Node.js           : 10.14.0
```
※(ionic:4.9 その当時のバージョン。現在はサポート切れのため、アップデートしている)

# 結論
ハイブリッドのフレームワークを使用し、iOSのアプリのみを運用保守していたが、Android版のアプリも出して欲しいとの要望があった。

その際、ソースコードもほとんどそのままでよく、過去に作成したテストケースを流用してテストを実施。
ほとんどバグも発生せず、リリースができ、品質も問題なかった。



# 概要
## 1 アプリ実装の流れ
・ソースはバックログというサービスでGit管理している
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1293311/b05b9d5a-3fb0-ff5d-e9cc-a49660c53f10.png" width="80%">

## ２ ファイル階層
```
app
assets
environments -- environment.prod.ts
             -- environment.ts      
```
environment.prod.ts　>> 本番ビルド時に参照する設定ファイル
environment.ts　　　 >> 開発ビルド時に参照する設定ファイル

## 3 ビルドコマンド
#### 本番向け
```
ios
ionic cordova build ios --prod --release -- --buildFlag="-UseModernBuildSystem=0" --verbose

android
ionic cordova build android --prod --release --verbose
```
本番向けのビルドコマンドを実施すると、難読化が自動的にかかるので、
アプリを解析されにくくできる。
#### 開発向け
```
ios
ionic cordova run ios

android
ionic cordova run android
```
開発ビルド時は難読化はかからず、デバッグモードになるので
ローカル環境でリアルタイムで処理を確認しつつ、
ブレイクポイントで処理をとめつつ開発を進めることが可能。

## 4 iOSとAndroidアプリについて
１プロジェクトでiOSとAndroidアプリ両方を作成する際、ネイティブ言語を採用する場合

iOSアプリ　 >> objective-c、またはSwift
Androidアプリ　 >> Java、C# または　Kotlin　　と

アプリごとに使用する言語が違っていて、両方理解するには学習コストがかかったり、保守のリソース不足が起こるかと思われる。ハイブリッドアプリを採用することで、ウェブ技術を使って１ソースで２つのアプリをリリースすることが可能なので、工数の削減に役立っている


# おわりに
近年流行している 　【Vue.js】 や 【React】、【Flutter】 など単一のコードからiOSアプリとAndroidアプリ、さらにWeb、デスクトップアプリケーションまで作成できるフレームワークが溢れている。プロジェクト開始時に先の運用保守のしやすさを見越した上で適切にフレームワークを選んでいきたい。

# 参考資料	
##### Angular
https://angular.jp/

https://qiita.com/NS19960207/items/961ddfa32bd1faa43b80
##### ionic
https://ionicframework.com/docs/ja/
最近流行りのChatGPTにテストケースを作らせてみた

<h1>最近流行りのChatGPTにテストケースを作らせてみた</h1>
<p>
こんにちは。<br>
最近、ChatGPTって流行ってますよね。<br>
ログインフォームのソースコードが描けたり、人間と変わらないように会話ができたり、私が大学を出るころには英語なんて勉強しなくてもAIで何とかなる時代が来る。<br>
そんな夢物語が、まさか本当に予想通り現実化するとは思いもよりませんでした。<br>
さて、今日はそんなChatGPTを利用してテスト仕様書を作っていきたいと思います。
</p>

<h1>要件</h1>
<p>
早速、ChatGPTにはテスト仕様書を作る様に依頼しました。<br>
今回、細かい要件を決めるのは面倒だったので、ざっくばらんにログイン機能とし、以下の要件を伝えました。<br>
・Webアプリケーションのログイン画面である<br>
・ログインIDとパスワードを入力するテキストボックスがある<br>
・ログインボタンを押下すると、マイページに遷移する<br>
</p>

<h1>成果物</h1>
<p>話には滅茶苦茶優秀なAIだと聞いていたので、実用に耐えうるレベルのテスト仕様書が出来上がるだろうと思っていました。<br>
<strong>ここまで考慮して作ってくるとは...</strong><br>
<br>
という事で成果物がこちら<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479597/ae4c3a5d-d5ee-2abc-0eee-b61e4a9be0d1.png)
大文字と小文字を区別するかどうか気にしてくれている...!?<br>
ここに謎の知性を感じました...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479597/2d7fd8a0-68f8-9145-1e03-cee8aa625ac0.png)
まぁ、ここは普通ですね。<br>
人工知能に人間と同レベルの尺度で評価を行っている自分に驚いてしまいますが、まぁいいでしょう...<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479597/5cdc16f2-f1eb-4edf-15b1-d91e9f2a511d.png)
これで最後です。<br>
Webシステム特有の『外部からの攻撃』というところまで気にして作れている...<br>

<h1>使ってみて思ったこと</h1>
使ってみて、滅茶苦茶優秀だなと。<br>
まずはそう思いましたね。<br>
このレベルの簡易な設計まで落とし込めれば業務に流用して代わりに仕事をこなしてもらえる。<br>
そんな気がしました。<br>
是非皆さんも、新しいことを始めるとき、側だけでも作るのに使ってみてください。<br>
【PHP】x-server から Gmail含め、メールを送信する。


#### 前提条件
送信先：soushin@gmail.com（記載用）
送信元（自分）：test_01@xs810378.xsrv.jp（エックスサーバーメール）


#### ソースコード
mail.php
```PHP mail.php

<?php

require(dirname(__FILE__) . '/functions.php');

// メール送信　可変
$MAILTO = "soushin@gmail.com"; // 宛先のメールアドレス

// メール本文
$content = "本文：てすと本文：てすと本文：てすと本文：てすと";

// 送信者
//==========  Gmail用　エンコーディング対策
$senderName = base64_encode(Send_Mail_GOGO::SENDER_NAME);
$senderName = "=?UTF-8?B?{$senderName}?=";

// ヘッダー情報　=== test_01@xs810378.xsrv.jp エックスサーバーメール
$mailHeaders = <<< EOF
From: {$senderName} <test_01@xs810378.xsrv.jp>
Reply-To: test_01@xs810378.xsrv.jp
Return-Path: test_01@xs810378.xsrv.jp
X-Mailer: X-Mailer
MIME-Version: 1.0
Content-Type: text/plain;charset=UTF-8
Content-Transfer-Encoding: 8bit
EOF;


// mb_language("ja");
mb_internal_encoding("UTF-8");

// メール送信処理
$result = mb_send_mail($MAILTO, Send_Mail_GOGO::SUBJECT, $content, $mailHeaders);

// メール送信処理結果出力
if ($result) {
    echo "送信成功";
} else {
    echo "送信失敗";
}

```
・functions.php
```php functions.php
//=== メール送信用
class Send_Mail_GOGO
{
    //=== メール件名
    const SUBJECT = "件名：（お問い合わせありがとうございます）";
    //=== メール送信者名
    const SENDER_NAME = "株式会社 xxxぺけぺけ";
}
```

#### 送信結果
![スクリーンショット (655).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478380/ecdcd0fc-b680-5ce1-87f8-2b0a521e8967.png)
主キー、外部キー

# キー（key)
何の鍵かというと、```ある特定のデータを引き出すための鍵```です。
特にリレーショナルデータベースでは、```あるレコード（1行とは限らない）を特定するための列の組み合わせ```という意味で使います。

* 主キー
* 外部キー

# 気づき
キーとは列の組み合わせのことなのか。
今はしっくりこないがこれからだ。

# 主キー（プライマリキー(primary key)）
その値を指定すれば、```必ず1行のレコードを特定できるような列の組み合わせ```のこと。
テーブルにおいて```必ず存在```しなければならず、かつ```一つしか存在しません```。

1行に特定することを```一意に識別する```という。
一意はuniqueの訳語です。

主キーがあるので```テーブルには重複行は存在できない```。

## 候補キー（candidate key)
```主キーとして利用可能なキー```が複数存在した場合、それら「候補」となるキーのことを言います。

## スーパーキー（super key)
主キーに、```非キー列を付加した場合のキーの組み合わせ```


# 気づき
このキーの値を指定すれば、一つだけ特定できるような列の組み合わせなのか。

# 外部キー（foreign key)
```2つのテーブルの間の列同士で設定するもの```

## 制約
社員テーブルと部署テーブルがある。
社員テーブルと部署テーブルで外部キー（部署id)を設定している。
部署idで一つだけ特定して値を取得できる。

外部キーの役割は部署テーブルに存在しないような部署データが間違って、「社員」テーブルに存在しないように防止することです。
いわば、社員テーブルに対して一種の```制約```を課すことになる。
この制約を```参照整合性制約```と呼びます。

## 外部キーは親子関係と同じ
部署テーブルに存在しない値が社員テーブルに存在できない。

## もし親のテーブルである部署テーブルの値を削除/更新すると
SQL文でエラーを起こすか、削除/更新しておくかを選択が可能になる。
親がいないデータを合わせて削除/更新する動作を```カスケード```と呼びます。

### カスケードのような厄介な問題を考えないようにテーブルを操作する
子のテーブルを先に削除なり変更して、```後から親テーブルを更新していれば、こうした問題は起きない```。

# 気づき
外部キーは制約なのか。
親子関係があるんだな。
テーブルが多くなると、こういった削除、変更でエラーが起きたり先に削除・更新されたりするのか。
気をつけないといけないな。

# キーとなる列のデータ型
何らかのコードやIDといった表記体系をきっちり定まったデータを、```固定長文字列のデータ型に格納して使います```。

# 気づき
idには固定長文字列を使うのか。

# 出典
https://www.shoeisha.co.jp/book/detail/9784798124704
laravel API FeatureテストでPOSTリクエスト投げてもボディーが渡らない

# 概要

- laravelで作成したAPIにFeatureテストを記載した。テストコードからリクエストボディーこみでリクエストを投げてもAPI側で値が受け取れずちょっと困ったので簡単にまとめる。

# 情報

- laravelのバージョンは6
- テスト対象エンドポイントはPostManなどからのリクエストは正常に受け取り、ボディーの値も問題なく取れる。

# 問題発生までの経緯

- 下記のようなテストコードを書いた。

    ```Foo.php
    public function test_insertできるか確認()
    {
        $requestBody = [
            "id" => 1,
        ];
    
        $requestHeader = ['Content-Type' => 'application/json'];
        $response = $this->post('/api/hoge/fuga', $requestBody, $requestHeader);
        
        $response->assertStatus(200);
    }
    ```

# 問題発生

- 上記関数を含むクラスを指定し、テストを実行した。
- ボディーの情報がnullである旨のエラーが返る。

# 問題解決までの経緯

- テストコードのリクエスト送る部分が間違えていた。。（laravel8の書き方をしていた模様。。）
- 下記だと問題ない。

    ```Foo.php
    public function test_insertできるか確認()
    {
        $requestBody = [
            "id" => 1,
        ];
    
        $requestHeader = ['Content-Type' => 'application/json'];
        $response = $this->postJson('/api/sync/estates', $requestBody, $requestHeader);
        
        $response->assertStatus(200);
    }
    ```
Ruby if, else問題

# if, else問題

条件分岐を利用して、プログラムを作成していきます。
内容は下記の通りです。
ECサイトのポイント付与サービスを考えます。
購入金額が999円以下の場合、3%のポイント
購入金額が1000円以上の場合、5%のポイント
このように付与されるポイントを出力するメソッドを作りましょう。

ただし誕生日の場合はポイントが5倍になります。
誕生日の場合はtrue, 誕生日でない場合はfalseで表します。
また、小数点以下をすべてのポイント計算が終わったあとに切り捨てましょう。


```ruby:模範解答
def calculate_points(amount, is_birthday)
  if amount <= 999
    point = amount * 0.03
  else
    point = amount * 0.05
  end
  if is_birthday
    point = point * 5
  end
  puts "ポイントは#{point.floor}点です"
end

# 呼び出し例
calculate_points(500, false)
calculate_points(2000, false)
calculate_points(3000, true)
```


ターミナルには以下のように出力されます。

```ruby:ターミナル
ポイントは15点です
ポイントは100点です
ポイントは750点です
```


## 解説
ポイント
- 購入金額によってポイント付与の割合が異なること
- 誕生月は購入金額とは別でif文を使ってコードを書くこと

また、付与するポイントの計算結果については、小数点以下は切り捨てするという条件が提示されているため、.floorメソッドを使って切り捨てます。
Cの基本８　〜ソースファイル・分割コンパイル〜 備忘録

### はじめに
私は初心者である。この備忘録を参考にされようとしている他の初心者の方は、ここに書かれていることを鵜呑みになさらぬようお願いしたい。何か間違いを見つけた方はコメント欄でご報告頂きたい。

*このまとめは理解がしきれてない段階で書いたから分かりづらいかも。後の「分割コンパイルを使いこなしたい」も参考に。*
___

### コンパイルとリンク (分割コンパイル)

これまではソースファイルを一つ作り、それをコンパイルして実行可能ファイルを作成してきた。この実行可能ファイルの作成には、ソースファイルから機械語のオブジェクトファイルを生成する過程（コンパイル）と生成されたオブジェクトファイルとライブラリにあるオブジェクトファイルを結合して実行可能ファイルを作る過程（リンク）がある。

今までのような一つのソースファイルから実行可能ファイルを作成するやり方とは別に**分割コンパイル**というものがある。
複数のソースファイルをコンパイルし、できたオブジェクトファイルを結合して一つの実行可能ファイルを作るやり方だ。

*フィボナッチ数列のプログラムを2つのソースファイルに分けて作成した例が以下*
```main.c
#include <stdio.h>
#include "fibsub.c"    

int fib(int);

int main(void){
    for(int i = 1; i < 10; i++)
    printf("fib(%d) = %d\n", i, fib(i));
    // return 0;
}
```
```fibsub.c
int fib(int);

int fib(int n) {
    if(n==1 || n==2)
        return 1;
    else
        return fib(n-2) + fib(n-1);
    
}
```
`main.c`の中で`int fib(int);`も関数宣言している。変数だけではなく関数も他ファイルにある場合でも宣言するべきなのだろう。

*下記は入力された金額から税込価格を表示するプログラムだ*
```main.c
#include "tax.c"

extern double rate;

int tax(int);

int main(void){
    int price, pay;

    rate = 8.0;
    printf("price? ");
    scanf("%d", &price);
    pay = price + tax(price);
    printf("You pay %d\n", pay);
    return 0;
}
```
```tax.c
double rate;

int tax(int);

int tax(int price){
    return price*rate / 100.0;
}
```
`main.c`にある`extern double rate;`や`int tax(int);`は無くても動いたが、エラーをなくすためには書くべきだ。

書籍にある記述をメモっとく
* **定義**はソースプログラム全体の中のどこか一箇所で行う
* **宣言**はそれを使うコードがあるソースファイルの、使っている場所より上に置く

関数や外部変数の宣言は、余分にあっても害はほとんどないらしい。だから宣言漏れの防止のために、全ての宣言を全てのファイルに入れることもあるそうだ。

___

>今回の内容は富永和人氏の[新しいC言語の教科書](https://www.amazon.co.jp/%E6%96%B0%E3%81%97%E3%81%84C%E8%A8%80%E8%AA%9E%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E5%86%A8%E6%B0%B8%E5%92%8C%E4%BA%BA-ebook/dp/B07P1TC98P)を参考に書き留めてます。
QuasarFrameworkのメモ

つまづいたところをメモしておきます。

## インストール
### node.js 入ってる？
```powershell
node -v
npm -v
```
### yarn入れといたら
```powershell
npm install -g yarn
```
### つづりにはAが2つ quAsAr
```powershell
yarn add quasar
```

## 編集
### index.vue にデータやメソッドを書いていく (src/pages/index.vue)
```vue.js
export default defineComponent({
  name: 'IndexPage',
  components: { ExampleComponent },
  data: () => ({
    // text: 'abc',
  }),
  methods: {
    // abc: () => {},
  },
  mounted() {
     // document.addEventListener
     // window.addEventListener
  },
  beforeUnmount() {
     // document.removeEventListener
     // window.removeEventListener
  },
  setup() {
   return { todos, meta };
  }
}
```
### Eventはinterfaceでカスタムイベント型を定義して使う
```vue.js
interface KeyEvent extends Event {
  keyCode: number;
  key: string;
}
export default defineComponent({
  ...
  methods: {
    getKey(event: KeyEvent) {
```
### 型付きの変数はexport default の上で定義してdataで使う
```vue.js
const keyList: { [index: string]: any } = {};
const downKeys: string[] = [];
export default defineComponent({
  ...
  data: () => ({
    keyList: keyList,
    downKeys: downKeys,
```
## electron 作業
### electronモードの追加
```powershell
yarn quasar mode add electron
```

### electron メインファイルに設定追加 (src-electron/electron-main.js)
```node.js
  mainWindow = new BrowserWindow({
    ...
    webPreferences: {
      contextIsolation: true,
      // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
      sandbox: false,  // <--- これを追加
    },
  });
```
### electron で myAPI メソッドを事前ロード (src-electron/electron-preload.js)
```node.js
import { contextBridge } from 'electron';
contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {
    const fs = require('fs');
    const path =
      'C:/Prog/-----.txt';
    const data = fs.readFileSync(path, { encoding: 'utf8', flag: 'r' });
    return data;
  },
});
```
### indexPage.vueでmyAPIメソッドを呼び出す(src/pages/indexPage.vue)
```node.js
  setup() {
    const fileData = myAPI.doAThing().split('\r\n');
```
paizaラーニング レベルアップ問題集 新・Bランクレベルアップメニュー JavaScript 【マップの扱い 2】マップの書き換え・縦横

【マップの扱い 2】マップの書き換え・縦横 (paizaランク B 相当)

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__get_upsidedown

# 解答例
隣接を`for (let i = -1; i <= 1; i += 2)`を用いて表現した。
```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W 
const [H, W] = lines[0].split(" ").map(Number);
//盤面の i 行目の文字をまとめた文字列 S
const S = lines.slice(1, H + 1).map(line => line.split(""));

//与えられた座標のマスと上下左右で隣接するマスの最大 5 マスに処理

//文字を書き換えるマスの y , x 座標
const [y, x] = lines[H + 1].split(" ").map(Number);
if (S[y][x] === ".") {
  S[y][x] = "#";
} else {
  S[y][x] = ".";
}
//上下隣接
for (let i = -1; i <= 1; i += 2) {
    if (0 <= y + i && y + i < H) { //マップ内  
      if (S[y + i][x] === ".") {
        S[y + i][x] = "#";
      } else {
        S[y + i][x] = ".";
      }
    }  
}
//左右隣接
for (let j = -1; j <= 1; j += 2) {
  if (0 <= x + j && x + j < W) { //マップ内
    if (S[y][x + j] === ".") {
      S[y][x + j] = "#";
    } else {
      S[y][x + j] = ".";
    }
  }  
}
console.log(S.map(row => row.join("")).join(("\n")));
```
rails follow_redirectについて

#目次 
①follow_redirectの意味.  
②follow_redirectのイメージ.
③例文でfollow_redirectの挙動を確認.  



#follow_redirectの意味.  
一言で言うと⇨
「コントローラの中で記載されているリダイレクト先に従って」という意味。

#follow_redirectのイメージ.  
![スクリーンショット 2023-02-17 13.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602256/cf4ba1bf-6847-5f02-2a0d-4c9db2cb780d.png)



#例文でfollow_redirectの挙動を確認
例　Usersコントローラの中に↓のようなアクションがあるとする.コントローラ内でしようとしていることは「ユーザー登録です」
ユーザー登録成功⇨@userにリダイレクト.  
失敗⇨new.html.erbにリダイレクトするというコードです。

```
  def create 
    @user = User.create(user_params)
    if @user.save 
      flash[:success] = "登録おめでとう"
      redirect_to @user
    else
      render "new"
    end
  end 
```

ちゃんとユーザー登録が成功するかを確認するテストを書いてみる。
```
test "valid information" do
  get signup_path
  assert_difference 'User.count' do
  post users_path , params: {user: {name: "umedamasanori", email: "user@yahoo.co.jp",password: "hogehoge", password_confirmation: "hogehoge"}}
end

  follow_redirect!
  assert_template "users/show"
end
end
```
↑での
follow_redirect!の役割は
「usersコントローラの中で記載されているリダイレクト先（redirect_to @user）にリダイレクトしてねということを明確にし、テスト環境の中で間違ったhtmlにリダイレクトするのを防ぐ」
間違ったhtmlにリダイレクトするのを防ぐとは？
⇨アクションの中にリダイレクト先が記載されていない場合デフォルトのhtmlが表示される
例
```
def index 

end
⇨index.html.erbが表示される
```
しかしアクション内に別ページにリダイレクトするように指定した場合はデフォルトではなく指定されたhtmlが表示される
```
def index 
redirect_to "new"
end 
⇨ デフォルトのindex.html.erbではなくnew.html.erbが表示される
```
テストでfollow_redirect!を記載することによりデフォルトのhtmlではなく指定されたhtmlにリダイレクトするようにしている。要は間違ってデフォルトを表示しないようにしている。
その証拠に テストのfollow_redirect!をコメントにしてテストを走らせるとエラーになり
おそらく意味はデフォルトのhtmlを表示しようとしたがデフォルトのhtmlがなかったため<[]>空白になっていると思います。このことからfollow_redirect!がある事によってリダイレクト先を指定している。
```

Failure:
UsersSignupTest#test_valid_information [/home/ubuntu/environment/twitter/test/integration/users_signup_test.rb:23]:
expecting <"users/show"> but rendering with <[]>
```[f:id:masanakaniki:20230217132548p:plain]
MB-920受験記

# はじめに
12月に[MB-910 Dynamicd365 Fundamentals(CRM)](https://learn.microsoft.com/ja-jp/certifications/exams/mb-910)を受験しました。
[MB-910受験記](https://qiita.com/snow_sch/items/1facdb2c644b8b3214c3)

その際、FundamentalsでDynamicd365がどういったことが出来るのかはなんとなく学べること、難易度が高くないことが分かったので、Fundamentalsのもう1つの資格の[MB-920 Dynamicd365 Fundamentals(ERP)](https://learn.microsoft.com/ja-jp/certifications/exams/mb-920)を受験しました。

定期的に開催されているVirtual Training Dayで無料バウチャーをゲットできます。

# Dynamicd365 Fundamentals(ERP)って何？
ERPとはEnterprise Resources Planning の略で、企業資源計画を管理・支援するサービスをさします。
ヒト・モノ・カネといわれるものです。
Dynamicd365のERP関係のサービスの基礎知識を問われるのがMB-920です。

## Dynamicd365 Fundamentals(ERP)の対象サービス
大まかには以下
### Dynamics 365 Finance
財務管理系のサービスです。
会計や財務の知識がないと、Learnを進めるのも難しく、また、このサービスに関する問題が多かった印象です。

### Dynamics 365 Supply Chain Management 
在庫管理や販売にまつわるものを管理するサービスです。
このサービスに関する問題も多かったです。

### Dynamics 365 Commerce
バックオフィス、店舗、コールセンターあたりをサポートするサービスです。
店舗での販売等を管理するような機能が多い印象です。

### Dynamics 365 Human Resources
人材管理を行うサービスです。
要員の調達（採用）や、育成、給与、休暇の管理など、人事部の方向けの機能が多い印象です。

### Dynamics 365 Project Operations
製品のプロジェクトライフサイクル管理機能と、プロジェクト計画・実行を管理するサービスです。
CRMのほうにも出てきたサービスでした。

### Dynamics 365 Customer Insights
CRMのほうで出てきたサービスで、チラッとでてきました。
顧客のインサイトを分析します。

# 受験した感想
720点くらいで合格しました。
会計・財務の知識が全くないので、「売掛金とは」「買掛金とは」のところがそもそも全くわからず、Learnのそのあたりの話を読むのに時間がかかりました。
銀行や税の話、原価計算、在庫のFIFO / LIFOなどなど．．．
逆に会計・財務の知識があれば、D365自体に詳しくなくても受かりそうな印象でした。

PowerBIの知識が多少役に足りましたが、CRMに比べてPower Platformの知識もあまり活用できませんでした。
今後のビジネススキルとして会計まわりの知識は持っておいて損はないので、D365関係なくそのへんを勉強しなければならない、と実感しています。

# 余談：次に受験しようと思っている資格
予定は現状ありませんが、
会計知識を身に着けたら以下の資格あたりを狙おうかと思います。
[MB-300: Microsoft Dynamics 365: Core Finance and Operations](https://learn.microsoft.com/ja-jp/certifications/exams/mb-300)
[MB-310: Microsoft Dynamics 365 Finance 業務コンサルタント](https://learn.microsoft.com/ja-jp/certifications/exams/mb-310)

もしくはPower Platformがかなり活用できそうな雰囲気のこの資格。
[MB-260: Microsoft Customer Data Platform Specialist](https://learn.microsoft.com/ja-jp/certifications/exams/mb-260)
Databricksのデモを簡単に体験できるdbdemos

お恥ずかしながら存在を知りませんでした。

https://www.dbdemos.ai/

Databricksのデモで使用するようなノートブックを簡単に入手することができます。

使い方は簡単です。Databricksノートブックで以下を実行してライブラリをインストールします。

```
%pip install dbdemos
```

デモの一覧を表示します。

```py:Python
import dbdemos
dbdemos.list_demos()
```
![Screenshot 2023-02-17 at 13.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/18823f77-ede0-2cca-d2ca-9cb133d64940.png)


デモをインストールするには以下のようにデモを指定します。こちらはDelta Lakeのデモです。

```py:Python
dbdemos.install('delta-lake')
```

![Screenshot 2023-02-17 at 13.11.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/1da8b384-9478-6b02-190e-303a9e6ed0ae.png)


上のコマンドを実行しているノートブックのパスにノートブックなどが追加されます。
![Screenshot 2023-02-17 at 13.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/184e59e2-eef2-716a-152b-b147b5e3e11c.png)

追加されたノートブックを用いることでデモを体験することができます。これ以外にもCustomer360やMLOps、Unity Catalogのデモなどが取り揃えられています。
![Screenshot 2023-02-17 at 13.12.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/87f16552-8e56-ccde-ba1b-d707114873a4.png)


### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
paizaラーニング レベルアップ問題集 新・Bランクレベルアップメニュー JavaScript 【マップの扱い 1】マップの書き換え・1 マス

【マップの扱い 1】マップの書き換え・1 マス (paizaランク C 相当)

https://paiza.jp/works/mondai/b_rank_new_level_up_problems/b_rank_new_level_up_problems__get_one

# 解答例
slice,map,joinを使いました。
```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");
//盤面の行数を表す整数 H , 盤面の列数を表す整数 W 
const [H, W] = lines[0].split(" ").map(Number);
//盤面の i 行目の文字をまとめた文字列 S
const S = lines.slice(1, H + 1).map(line => line.split(""));

//文字を書き換えるマスの y , x 座標
const [y, x] = lines[H + 1].split(" ").map(Number);

if (S[y][x] === ".") {
  S[y][x] = "#";
} else {
  S[y][x] = ".";
}

console.log(S.map(row => row.join("")).join(("\n")));
```
HRANDFIELDを使うとき“ERR value is not an integer or out of range”が出る

こんにちは、tdzzの初投稿です。

## エラーの例
```bash
127.0.0.1:3031[10]> hrandfield text withvalues
(error) ERR value is not an integer or out of range
```

## 解決策
redisの公式サイトを参照すると...
`HRANDFIELD key [count [WITHVALUES]]`
構文はこう使うべき。

つまり、withvaluesオプションを使うには、countを指定しなければなりません。

```bash
127.0.0.1:3031[10]> hrandfield text 1 withvalues
1) "19485"
2) "some text"
```
こうしたら、ちゃんと動いてますね。

[ ]とは、オプショナルの意味ですね。[ ]の入れ子構造で、内の子を利用するには、外の子が必要です。countを指定しないと、"withvalues"がcountの値と認識されました。countの値に整数が必要なので、エラーが発生しました。

## 追記
ちなみに、HRANDFIELDはredis 6.2に新しく導入されたコマンドです。私の場合、aptリポジトリ内のredis-serverバージョンが古い（6.0）。公式サイトでインストール方法を調べましょう。
PHP：連想配列へキーと値を追加する記法には注意

# 連想配列へキーと値を追加


$arr = array('a' => 1, 'b' => 2, 999 => 3);

#キーと値の追加
記法に注意。配列変数にキーを書いて、その値を右辺から代入する。
微妙に覚えにくい。

$arr['c'] = 3;

var_export($arr);
array (
  'a' => 1,
  'b' => 2,
  999 => 3,
  'c' => 3,
)
新卒エンジニアが【Pythonエンジニア認定基礎試験】の模試を受けてみたら、、、③

今日は一旦、Pythonチュートリアルを読んで知識の補充を行いたいと思います。
いいねでの応援お待ちしております:boy:


今回は模試をお休みして、Pythonチュートリアルを読んで気づいたところを以下にまとめていきます。
参考までにどうぞ！

【引数の受け渡し】
・スクリプト名が標準入力を意味する "-" の場合、sys.argv[0]も "-" になる。
・"-c コマンド" の形式で実行した場合、sys.argv[0]は "-c" になる。
・"-m モジュール名" の形式で実行した場合、sys.argv[0]は指定したモジュールの完全な名前になる。
・ -*- coding: utf-8 -*-で別の文字コード

【計算】
対話モードでは、最後に表示された結果は変数 _ に代入される
```test.py
tax = 12.5 / 100
price = 100
price * tax #12.5

price + _ #112.5
```

【range関数】
range() が返すオブジェクトは、いろいろな点でリストであるかのように振る舞いますが、本当はリストではありません。
これは、イテレートした時に望んだ数列の連続した要素を返すオブジェクトです。
しかし実際にリストを作るわけではないので、スペースの節約になります。
このようなオブジェクトをイテラブルという
このイテラブルを標的とするforなどの関数をイテレータという

【位置専用引数とキーワード専用引数】
位置専用引数は"/"の前にある引数
キーワード専用引数は*の後の引数

```test2.py
def add(num1, /, num2, *, num3):
    return num1 + num2 + num3
```

num1:位置引数
num2:位置orキーワードどちらでも
num3:キーワード引数

【タプル形式の引数】
可変個数の引数（*arg）は引数リストの最後に置くこと

【ドキュメンテーション文字列（docstiting）】
・一行目は大文字でピリオド終わり
・2行目は空行

【関数アノテーション】
・関数の __annotations__ 属性にディクショナリとして格納される。

【PEP8】
・インデントは4スペース
・79文字以下で折り返す
・メソッドの第一引数は常にself

【リストオブジェクト】
・list.extend(L):リストLの全要素を末尾に追加

【リストをスタックとして使う】
・スタックは後入れ先出し (last-in, first-out)。
・スタックに積むにはappend(x)を使う。
・スタックからの取得はpop()を使う。
・リスト末尾の操作なので高速。

【リストをキューとして使う】
・キューは先入れ先出し (first-in, first-out)。
・キューに入れるにはinsert(0, x)を使う。
・キューからの取得はpop()を使う。
・リスト先頭の操作なので低速。→ collections.dequeを使う

【ループのテクニック】
・ディクショナリのitems() メソッドを使うと、(キー, 値)のタプル一覧(反復可能体)を取得できる。
演算子の優先順位は 数値演算子 > 比較演算子 > not > and > or

【他の型との比較】
･文字列同士の比較はASCII比較(A＞B)
･1文字目から1文字毎に比較される(違いが出た時点で結果になる)
･比較する値はUnicodeのコードポイントの値が使われる
･アルファベットは大文字のほうが小文字よりもコードポイントが小さい
･ひらがなのほうがカタカナよりもコードポイントが小さい
マグネットスイッチ型式　三菱と富士電機

## 三菱電機
リニューアルして一回り小さくなった。特に理由なければこっち。

#### MS-Tシリーズ
| 型番 | 定格容量 | 定格電流 | 幅 | サーマル | 備考 |
| ---- | ---- | ---- | ---- | ---- |---- |
| 10 | 2.2 | 10 | 36 | TH-T18 0.12～9 | 1a |
| 12 | 2.2 | 12 | 44| ^ 0.12～11 | 1a1b  |
| 20 | 3.7 | 20 | 44 | ^ 0.12～15 | 1a1b |
| 25 | 3.7 | 25 | 63 | TH-T25 0.24～22 | 2a2b |
| 32 | 5.5 | 32 | 43 | 付かない | 補助接点、サーマル無。容量のわりに小さい。ここまでDC24V 2.2WコイルなのでPLC直起動可 |
| 35 | 7.5 | 35 | 75 | TH-T50 29 | 2a2b　ここから下はAC200でリレー使う。TH-T50と25は同サイズ |
| 50 | 11 | 50 | 75 | ^ 29～42 | 2a2b |
| 65 | 15 | 65 | 88 | TH-T65 | |
| 80 | 18.5 | 80 | 88 | ^ | ここまでDINレール取付 |
| 100 | 22 | 93 | 100 | ^ |  |

#### MSOD-2×T12SQ-SA DC24V
- MSO:開閉器(サーマル付き)　S:接触器　MS:箱入り開閉器(スイッチボックスオプションもある)
- D：直流操作　末尾にDC__Vを記入。無記号はAC__Vを記入
- 2×：可逆インターロック付き
- T12：定格電流
- SQ：スプリングクランプ(T12とT20のみ)
- -SA：サージ吸収　あんまりいらない。

インチングを含む場合は容量一つ上げたほうが良い。
https://dl.mitsubishielectric.co.jp/dl/fa/document/catalog/lvsw/l02031/L(NA)02031-Q_21D.pdf

## 富士電機
古くからある工場のお客さんは富士電機指定が多い感じ。

#### SCシリーズ
| 型番 | 定格容量 | 定格電流 | 幅 | 備考 |
| ---- | ---- | ---- | ---- | ---- |
| 03 | 2.2 | 10 | 43 | |
| 0 | 2.2 | 13 | 43 | 03と同寸法。|
| 4-1 | 3.7 | 19 | 53 | 4-0と同寸法。ここまで補助接点は1aか1bを選ぶ |
| N1 | 5.5 | 26 | 74 | ここから補助接点が2a2b。 |
| N2 | 7.5 | 35 | 74 |  |
| N2S | 11 | 50 | 88 |  |
| N3 | 15 | 65 | 88 | ここまでDINレール取付 |
| N4 | 18.5 | 80 | 88 | ねじピッチ70mm-75mm |
| N5A | 22 | 93 | 88 |  |
| N6 | 22 | 93 | 100 |  |

#### SW-4-1RM/G 5.5kw DC24V 1a 
- SW:電磁開閉器(サーマルリレー)付き SC:なし
- 4-1:　容量型番
- RM:可逆
- /G:直流コイル
- 5.5kw:サーマルリレー容量
- DC24V:コイル電圧
- 1a:補助接点。N1以降は2a2b固定。

容量ごとに型式が設定されているが、製品サイズは2型式で1段階ずつ上がる。
例えばN1(5.5kw用)とN2(7.5kw用)は同一サイズ、N2S(11kw用)とN3(15kw用)は同一サイズ。
予備で持つべきは容量の大きいほう。
skaffoldで--port-forwardしてもポートフォワードされない

# はじめに

skaffoldでサービスを作成したところアクセスができずに困ったので簡単にまとめます

# 問題

以下のコマンドを実行しました

```
$ skaffold dev -f hoge.yaml -n test --port-forward
```

ここでポートフォワーディングしたサーバーに`curl`でアクセスしました

```
$ curl localhost:10500
```

しかし接続ができませんでした

# 原因

これは`skaffold`が`2系`だったことが原因でした

2系はバグがあるようでフォワーディングされないようです
1系の最新を入れたところうまく行きました

```
$ curl -Lo skaffold https://storage.googleapis.com/skaffold/releases/v1.39.5/skaffold-linux-amd64 && chmod +x skaffold && sudo mv skaffold /usr/local/bin
$ skaffold version
v.1.39.5
```

`skaffold dev`をしたときのログでポートフォワーディングされているかわかるようです

`v2の場合`

```
STATUS: deployed
REVISION: 1
TEST SUITE: None
Waiting for deployments to stabilize...
Deployments stabilized in 16.907278ms
No artifacts found to watch
Press Ctrl+C to exit
Watching for changes...
```

`v1の場合`はポートフォワーディングのログが出ている

```
STATUS: deployed
REVISION: 1
TEST SUITE: None
Waiting for deployments to stabilize...
 - test:deployment/test is ready.
Deployments stabilized in 2.116 seconds
Port forwarding service/test-svc in namespace test, remote port 10500 -> http://127.0.0.1:10500
Press Ctrl+C to exit
Watching for changes...
```

# おわりに

社内に溜まっている知見がほんとすごいなと思いました

# 参考

https://github.com/GoogleContainerTools/skaffold/releases
npmの真実

### npmについて
Node.jsのパッケージ管理ソフトウェアのようなもの。

### npmって何の略?
皆さんのなかには

「npm」って 「Node Package Manager」じゃないの？
と思っている方もいるかも知れません。

しかし、それは違います。

公式によると、npmの前身が「pm」というbashのユーティリティであり、更にそのpmは「pkgmakeinst」の略であるそうです。

略として見なすならば
「node pm」
もしくは
「new pm」

が正しいようです。

https://npm.im/npm
に乗ってました。

Google翻訳で日本語にした結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920761/673ecb5e-fdce-debe-1201-31dffcba483d.png)
英語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920761/39bc0710-00e6-b432-78eb-d34e08d1e1cf.png)

そうとは思いませんでした…。ついNode Package Managerだとばかり…。

申し訳ありませんでしたnpm様！

そうそう、忘れていましたが
「npm」の正しい表記は
小文字アルファベットで
```
npm
```
が正しいようです。

### その他

#### 必須知識

```bash
npm install undici
npm i undici
```
上記は全く同じインストールになります。

```bash
npm remove undici
```
これでパッケージの削除ができます。

```bash
npm publish
```
パッケージを公開します。

```bash
npm install npm@latest
```
npmを更新します。

### まとめ
npm → 「new pm」もしくは「node pm」である

以上!
Wordpressの表のCSSが反映されない時の対処法

# 経緯
現在、Wordpressで情報発信をしています。

ある時、サイトの見た目を整えるのに、表のデザインを綺麗にしたいと考えました。
色々調べた結果、標準の表だけでは限界があるため、CSSに追記をしました。

CSSはよく分からなかったので、とりあえずネットに転がっているものをコピペ。

デザインとしては、タイトル（左側の列）に背景色が付き、内容（右の列）は白背景になるCSSです。

しかし、全く反映されません。

# 解決策
## 原因：htmlが対応していなかった

CSSだけでなく、htmlもど素人だった私は、CSSしかいじっていませんでした。

結論、htmlが私が表示させたいと思っていたコードになっていなかったのが原因でした。

## 対策：htmlを書き換える
UIから表を作成すると、タイトル部分は特に指定されず、全て”内容のセル”として作成されます。
これの必要なセル部分を、”タイトルセル”として指定してあげる（書き換えてあげる）必要があります。

⇨ htmlの"td"が内容セルなのですが、これをタイトルの"th"に書き換えてあげます。
　後ろの/tdも忘れずに！

## 具体的な手順
### 表の作成
まずは、表を作成します。
普通に、テーブルブロックを追加します。
クラシックエディターの中にテーブルを作成するでも問題ありません。

### htmlとして編集する
テーブルのブロックを選択して、点々のところをクリックすると
「htmlとして編集する」のボタンが出てくるのでクリック。
※エディター全体を、ビジュアルエディタからコードエディタに変更して修正してもOK

![スクリーンショット 2023-02-17 11.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3161011/c80f865f-6fd8-3349-1f6c-59671e465d19.png)

そうすると、htmlでの表記に変わります。
![スクリーンショット 2023-02-17 11.26.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3161011/62687085-597c-2f0b-1a60-3bce4ad19cf0.png)

よく見ると、タイトルにしたい箇所もtdで囲まれているので、これをthに変えます。
/thも忘れずに修正。

これで完了です。

htmlに慣れてない人は、ビジュアル編集のボタンを押すと、いつものビジュアルエディターに戻ります。

![スクリーンショット 2023-02-17 11.31.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3161011/72088891-27e8-a11f-3386-ed19b4dacdb0.png)

編集のページでは、CSSで書いたビジュアルにはなりません。
しかし、プレビューモードで見てみると、ちゃんと反映されてます！
![スクリーンショット 2023-02-17 11.32.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3161011/c0671b99-55d6-97b8-9bef-2db02e4b1bc4.png)

無事、解決してよかったです。

【参考】実際のサイト：
https://career-saku.com/about-hays/
plunkerでdeck.gl その6

# 概要
plunkerでdeck.glやってみた。
iconLayer、使ってみた。

# サンプルコード

```


const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const data = [
  {p: [141.3521727, 43.0620842], v: 1952356}, // sapporo
  {p: [140.8677736, 38.2686018], v: 1082159}, // sendai
  {p: [139.5196066, 35.4937089], v: 3724844}, // yokohama
  {p: [136.9043778, 35.1814347], v: 2295638}, // nagoya
  {p: [135.7696242, 35.0118413], v: 1475183}, // kyouto
  {p: [135.5023064, 34.6936616], v: 2691185}, // oosaka
  {p: [135.1959010, 34.6894819], v: 1537272}, // koube
  {p: [132.4556497, 34.3849809], v: 1194034}, // hiroshima
  {p: [130.4017854, 33.5902214], v: 1538681}, // fukuoka
];
const scatterplotLayer = new deck.ScatterplotLayer({
  data,
  opacity: 0.5,
  getPosition: ({p}) => p,
  getRadius: ({v}) => Math.sqrt(v) * 12,
  getFillColor: ({v}) => [Math.sqrt(v) / 10, 20, 60],
});
const ICON_ATLAS = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png'
const ICON_MAPPING = {
  marker: {
    x: 0, 
    y: 0, 
    anchorY: 128, 
    width: 128, 
    height: 128, 
    mask: true
  }
}
const iconLayer = new deck.IconLayer({
  id: 'icon-layer',
  pickable: true,
  sizeScale: 10,
  data,
  iconAtlas: ICON_ATLAS,
  iconMapping: ICON_MAPPING,
  getIcon: d => 'marker',
  getPosition: ({p}) => p,
  getSize: d => 5,
  getColor: d => [...Array(3)].map(() => Math.floor(Math.random() * 256), ),
  onClick: d => {
    state.hovar = d
  },
})
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 137,
    latitude: 37,
    zoom: 5,
    minZoom: 2,
    maxZoom: 8,
    pitch: 30,
    bearing: 10,
  },
  controller: true,
  layers: [tileLayer, iconLayer, ]
});




```

# 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7b63b751-1f92-55f0-b579-f91c96905a38.png)


# 成果物

https://embed.plnkr.co/plunk/8eUgT1auPU3a1kYk


以上。
plunkerでdeck.gl その5

# 概要
plunkerでdeck.glやってみた。
ScatterplotLayer、使ってみた。

# サンプルコード

```

const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const data = [
  {p: [141.3521727, 43.0620842], v: 1952356}, // sapporo
  {p: [140.8677736, 38.2686018], v: 1082159}, // sendai
  {p: [139.5196066, 35.4937089], v: 3724844}, // yokohama
  {p: [136.9043778, 35.1814347], v: 2295638}, // nagoya
  {p: [135.7696242, 35.0118413], v: 1475183}, // kyouto
  {p: [135.5023064, 34.6936616], v: 2691185}, // oosaka
  {p: [135.1959010, 34.6894819], v: 1537272}, // koube
  {p: [132.4556497, 34.3849809], v: 1194034}, // hiroshima
  {p: [130.4017854, 33.5902214], v: 1538681}, // fukuoka
];
const scatterplotLayer = new deck.ScatterplotLayer({
  data,
  opacity: 0.5,
  getPosition: ({p}) => p,
  getRadius: ({v}) => Math.sqrt(v) * 12,
  getFillColor: ({v}) => [Math.sqrt(v) / 10, 20, 60],
});
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 137,
    latitude: 37,
    zoom: 5,
    minZoom: 2,
    maxZoom: 8,
    pitch: 30,
    bearing: 10,
  },
  controller: true,
  layers: [tileLayer, scatterplotLayer, ]
});



```

# 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/63154a03-c09b-58a5-6995-d59298f7b75e.png)


# 成果物

https://embed.plnkr.co/plunk/OehsWa9AjW3ASY4n


以上。
NumberFormat class

getCurrencyInstanceはlocaleにより表示内容が違う
getInstance,getIntegerInstanceはlocaleに影響を受けない
```java
public class Outer {
    public static void main(String args[]) {        
        Locale.setDefault(Locale.JAPAN);
        method();
        Locale.setDefault(Locale.US);
        method();
    }
    static void method() {
        System.out.println("-------------------");
        double num = 10000.99;
        NumberFormat nf1 = NumberFormat.getInstance();
        NumberFormat nf2 = NumberFormat.getIntegerInstance();
        NumberFormat nf3 = NumberFormat.getPercentInstance();
        NumberFormat nf4 = NumberFormat.getCurrencyInstance(Locale.US);
        NumberFormat nf5 = NumberFormat.getCurrencyInstance(Locale.JAPAN);
        NumberFormat nf6 = NumberFormat.getCurrencyInstance();
        System.out.println(nf1.format(num));
        System.out.println(nf2.format(num));
        System.out.println(nf3.format(num));
        System.out.println(nf4.format(num));
        System.out.println(nf5.format(num));        
        System.out.println(nf6.format(num));        
    }
}
```
```
-------------------
10,000.99
10,001
1,000,099%
$10,000.99
￥10,001
￥10,001
-------------------
10,000.99
10,001
1,000,099%
$10,000.99
￥10,001
$10,000.99
```
[next js 2023版] next/imageコンポーネントでwidthとheightを指定せず画像をフレキシブルに表示する方法 (100%)

## 記事を書こうと思った背景

他の方のqiitaの記事※ではnext/imageで調べると、{objectFit}や{layout}等の非推奨プロパティを使用している例が多いのでnext.jsの最新版として書きたいと思います。

(※ 2023年2月を起点に1年以内で検索した記事)
(非推奨プロパティでも同じ動作をします)


## 実際のコード
```tsx:image.tsx
import Image from "next/image";

 {/* ...省略 */}

<div style={{ position: "relative", height: "300px" }}>
  <Image
    alt="株式会社viviONでは二次元コンテンツを愛するエンジニアを絶賛募集中です！"
    src="https://vivion.jp/recruit/"
    fill
    style={{ objectFit: "cover" }}
  />
</div>
```

### コード解説
fillを指定するとデフォルトでスタイルがposition: absoluteになるので、親の要素はrelativeを指定しましょう。
objectFitにcoverを指定することでグニャッとした比率にならず、見切れてる部分は表示しないようよしなにやってくれます。

### 非推奨の背景

あくまで推測ですが、非推奨になった理由としてstyleで指定できるものをわざわざプロパティにするのは冗長だと判断したのではないでしょうか。
ドキュメントのSee also:の遷移先もmozillaのCSSドキュメントでした。

### Docのスクリーンショット

![next_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170923/a2731301-d2c9-0af7-e745-71b42cc82b78.png)



## 採用PR

gRPCやマイクロサービス化・二次元コンテンツに興味がある、もしくはチャレンジしてみたいという方は是非一緒に働きましょう！

https://hrmos.co/pages/vivion/jobs/0000226

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307359/2000f749-3e82-7a47-b1c4-4444e237f79c.png" width=45%>
【未検証】PHP：declare(strict_types=1)をプロジェクト全体に適用する

# declare(strict_types=1)をプロジェクト全体に適用する

https://wonwon-eater.com/php_strict_types/

strict_types=1　を一箇所に記述して完了させたかった。
静的解析ツールとVScodeを使うことで半自動化する方法が紹介されている。

1.PHP-CS-Fixerをインストールする
2.PHP-CS-Fixer設定
3.VSCode設定
(リンクだけです) 「逆函数 (inverse function) 」を調べました。

? https://www.deepl.com/ja/translator#ja/en/今まで忘れていました。
? https://www.deepl.com/ja/translator#ja/en/ノーマークでした。
(2023/02/17)

# wikipedia
函数と呼ばれる種類の写像の逆写像は、逆函数 (inverse function) と呼ばれる。

https://ja.wikipedia.org/wiki/%E9%80%86%E5%86%99%E5%83%8F

https://en.wikipedia.org/wiki/Inverse_function

https://ja.wikipedia.org/wiki/%E9%80%86%E9%96%A2%E6%95%B0%E6%B3%95#:~:text=%E9%80%86%E9%96%A2%E6%95%B0%E6%B3%95%EF%BC%88%E3%81%8E%E3%82%83%E3%81%8F%E3%81%8B%E3%82%93,%E5%A4%89%E6%95%B0%E3%82%92%E7%94%9F%E6%88%90%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%82

https://en.wikipedia.org/wiki/Inverse_transform_sampling

# Mathematicaで
(2023/07/28追加)
```
以下の「#」 と「&」 は何でしょうか

In
y1 = (2 x + 5)/(x + 2)
InverseFunction[y1]
y2 = InverseFunction[(2 # + 5)/( # + 2) &]
Plot[{y1, (5 - 2 x)/(-2 + x)}, {x, -4, 4}]

Out 
(5 + 2 x)/(2 + x)
InverseFunction[(5 + 2 x)/(2 + x)]
(5 - 2 #1)/(-2 + #1) &
```


![.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/0aaecb26-fcce-66f7-3fef-2b30dbddc077.png)

https://reference.wolfram.com/language/ref/InverseFunction.html.ja?source=footer

# wolframで

https://reference.wolfram.com/language/guide/InverseFunctions.html.ja?source=footer

InverseFunction — 記号逆関数

https://reference.wolfram.com/language/ref/InverseFunction.html

例　y=x^2の逆関数の計算のため、InverseFunctionを使いました。

https://www.wolframalpha.com/input?i=InverseFunction%28x2%29&lang=ja

# sympyで
????? (2023/05/17)
??? solveはだめで、solveset にしなさい。????
https://docs.sympy.org/latest/modules/solvers/solveset.html

```python
from sympy import *
x, y = symbols('x y')
def myFinv(f):
    return (solve(Eq(y, f), x)[0]).subs({y:x}).expand()
f=sqrt(x) + 1
print("#",f,"--->",myFinv(f))
f=sin(x)
print("#",f,"--->",myFinv(f))
f=cos(x)
print("#",f,"--->",myFinv(f))
f=tan(x)
print("#",f,"--->",myFinv(f))
# sqrt(x) + 1 ---> x**2 - 2*x + 1
# sin(x) ---> pi - asin(x)
# cos(x) ---> -acos(x) + 2*pi
# cos(x) ---> -acos(x) + 2*pi
```

# 大学入試問題

逆関数　＜　M.E.T.A.様の内部検索

https://cse.google.com/cse?cx=a8908fbc24340ebc5&q=%E9%80%86%E9%96%A2%E6%95%B0&oq=%E9%80%86%E9%96%A2%E6%95%B0&gs_l=partner-web.3..0i512l10.5320.5320.0.6325.1.1.0.0.0.0.176.176.0j1.1.0.csems%2Cnrl%3D10...0....1.34.partner-web..0.1.176.wETnnuxZ_Ks

逆関数　＜　kamelink様のタグ

https://kamelink.com/blog/tag/%E9%80%86%E9%96%A2%E6%95%B0/

T氏様

https://www.google.com/search?q=site%3A%2F%2Fmathmathmass.exblog.jp+%E9%80%86%E9%96%A2%E6%95%B0&rlz=1CAUHAM_enJP1038JP1038&oq=site%3A%2F%2Fmathmathmass.exblog.jp+%E9%80%86%E9%96%A2%E6%95%B0&aqs=chrome.0.69i59j69i58.898j0j7&sourceid=chrome&ie=UTF-8


# 参考

https://www.google.com/search?q=%E9%80%86%E9%96%A2%E6%95%B0%E3%81%AE%E7%A9%8D%E5%88%86&rlz=1CAUHAM_enJP1038JP1038&sxsrf=AJOqlzVHhFOKlsZYA2LQoyqj60bZxnwwLQ%3A1676599065287&ei=Gd_uY4iSEc2l2roPx9yJkAg&ved=0ahUKEwjIgt6dupv9AhXNklYBHUduAoIQ4dUDCA8&uact=5&oq=%E9%80%86%E9%96%A2%E6%95%B0%E3%81%AE%E7%A9%8D%E5%88%86&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIJCAAQBBCABBAlMgkIABAEEIAEECUyCQgAEAQQgAQQJTIICAAQCBAHEB46CggAEEcQ1gQQsAM6BAgjECc6BwgAEIAEEBc6BggAEAQQHjoICAAQBBAeEBdKBAhBGABQ4QlYoitgwzVoAXABeACAAX-IAbcJkgEEMS4xMJgBAKABAcgBCsABAQ&sclient=gws-wiz-serp
Windows 10 + Docker環境でスリープから復帰するとCPUを100%食いつぶされる

# 概要
Windows 10 (21H2) + Docker Desktop (v20.10.22)の環境下において、Dockerが稼働した状態でSleepに入り、その後復旧するとCPU使用率100%となってしまう。

タスクマネージャで確認するとVmmemが食いつぶしている。

# 原因
不明。

2023/04/11追記
もしかしたらWSLにデストリビュージョンをインストールしていなかったからか？
Ubuntuを入れたところ、本現象が発生しなくなった。
ただし、スリープから帰ってきたときにDockerが死んでいるので再起動が必要。

# 対策
スリープ後にDocker DesktopとWSLを一度シャットダウンすれば通常状態に戻る。

WSLのシャットダウン
~~~
wsl --shutdown
~~~

Dokcer DesktopはタスクトレイのアイコンからQUIT　→　再起動

# 助けて
根本的に解決できる方法ないですかね…
コマンド 'Dev Containers: Open Folder in Container...'でエラー (Illegal argument: base)が発生しました

# 事象 : Dockerコンテナが起動しない
- 環境
    - Windows 10 Pro 22H2
    - Visual Studio Code v1.75.1
    - Dev Containers v0.275.1

Visual Studio Codeがバージョンアップされた日にいつも通りVisual Studio Codeで「Dev Containers: Open Folder in Container...」いつも使っているコンテナを起動しようとしたらエラーになって、コンテナが起動しない。
リビルドしても、PC再起動しても起動しない・・・困った。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/b3712e61-419b-4a89-4eae-e39579ceb536.png)

## 原因 : 拡張機能Dev Containersのv0.275.Xに不具合があるらしい

> The bug seems to be in v0.275.X of the Dev Containers extension.
> [Command &#39;Dev Containers: Reopen in Container&#39; Resulted in an error (Illegal argument: base) · Issue #1711 · microsoft/vscode-dev-containers](https://github.com/microsoft/vscode-dev-containers/issues/1711)

### 対応 : 拡張機能Dev Containersのバージョンを変える 
Dev Containersのバージョン0.275系がよろしくないようなので違うバージョンを使うことにした。

1. Visual Studio Codeのサイドメニュー > 拡張機能マーク > [Dev Containers]を選択
1. [プレリリースバージョンへの切り替え]でバージョンをv0.279.0(2023-02-17時点)へバージョンアップ
    1. バージョンダウンは[歯車マーク]>[Install Another Version...]でできる
    1.  [Command &#39;Dev Containers: Reopen in Container&#39; Resulted in an error (Illegal argument: base) · Issue #1711 · microsoft/vscode-dev-containers](https://github.com/microsoft/vscode-dev-containers/issues/1711)に画像付きで親切に説明がある
1. 再びコンテナ起動でちゃんと起動した
1. 一応コンテナをリビルドしておく


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/c9d6aaa4-53e3-98f7-7ead-44db3899a256.png)
CUDA/nvidia driver/OSバージョンをone-liner確認


```bash:CUDAバージョンを確認．nvidia-smiのオプションをもっと調べると，もうすこしまともな方法がありそう
$ nvidia-smi -q -u | grep "CUDA Version" | cut -d":" -f2 | tr -d "[:blank:]"
12.0
```

```bash:CUDAバージョンを確認．nvccがあるならもこちら．
nvcc -V | grep "Cuda compilation tools" | cut -d" " -f6 | cut -c2-
12.0.140
```

```bash:nvidiaドライバのバージョン確認．
$ nvidia-smi -i 0 --query-gpu=driver_version --format=csv,noheader
525.85.12
```

```bash:Ubuntu OSのバージョン確認．メジャーバージョンだけ確認．
$ lsb_release -r -s
20.04
```

```bash:Ubuntu OSのバージョン確認．マイナーバージョンまで確認．
$ lsb_release -d -s | cut -d" " -f2
20.04.5
```

```bash:linux kernelバージョンの確認．
$ uname -r | sed 's/-generic//'
5.15.0-60
```