OmniAICreator/Qiita-1.07M huggingface dataset:
LPC812MAXでGPIOレジ直で遊ぶ


x なぜか間違っているのをUPした



目的
GPIOのテスト





```c++



//GPIO_P0_7_test_812_1

#include "mbed.h"


DigitalOut myled(P0_7);

//            654321009876543210
#define on1   0b0000000010000000
#define off1  0b0000000000000000

//メイン関数
int main()
{

    //無限ループ
    while(1) {

        LPC_GPIO_PORT->DIR0 = on1;

        wait_ms(1000);//1秒待つ

        LPC_GPIO_PORT->DIR0 = off1;

        wait_ms(1000);//1秒待つ

    }//while

}//main





```



![o_con833.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/95c67669-f5e3-5f87-41d7-4762df03ed23.jpeg)


-9-
Ubuntuをアップグレードしたら日本語入力できなくなった話

***Ubuntu20.04LTSからUbuntu22.04へアップグレードしたら日本語入力できなくなった:confounded:***
***よくよく見たら、画面右上のタスクバーにInputメソッド「ja▽」がなくなってるじゃないか！***

### 前置きはさて置き、この問題から復旧した方法を簡単に書きます！

# 復旧方法
１．Terminalから以下のコマンドを実行してMozcを再インストールする。
```bash:Mozc再インストール
$ sudo apt install ibus-mozc
$ ibus restart
```
２．GUIから「設定」→「キーボード」→「入力ソース」→「日本語（Mozc）」を追加

画面右上のタスクバーにInputメソッド「ja▽」が表示されて日本語入力が可能になった:bangbang:
良かった:blush::bangbang:

# 参考サイト
- [Ubuntu20.04で日本語入力(Mozc)を可能にする方法](https://novicengineering.com/ubuntu_mozc_install/)、https://novicengineering.com/ubuntu_mozc_install/ 、2022/09/04 アクセス時点
Vue開発環境

# Vue.jsの開発環境を構築する。

## Vueのインストールと設定方法

1
公式サイトへアクセスする。
以下の公式サイトへアクセスする。
https://jp.vuejs.org/index.html

2
「はじめる」をクリックする。
![スクリーンショット 2022-09-04 16.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/70602e15-3ffe-584c-9b26-bd81ba17100c.png)

3
「インストール」をクリックする。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/2d7b8aab-0a37-e6dc-191d-5a1eb23b77a1.png)

4
「開発バージョン」をクリックして、vue.jsをインストールする。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/80ae930f-0aac-90eb-49ad-2941b55cb6cd.png)

5
インストールしたvue.jsファイルをHTMLファイルと同じディレクトリに保存して、下記のように指定する。
```
<script src="vue.js"></script>
```
src=""の中はディレクトリに合わせて指定する。
例えば、testフォルダの中にファイルを置いた場合。
```
<script src="test/vue.js"></script>
```
Qiitaの記事を自動取得するWordPressプラグイン「Qiita2WP」を公開しました

自動的にQiitaの記事をWordPressの「投稿」に取り込む、WordPressプラグイン「Qiita2WP」を公開しました
WordPressで技術ブログを書きつつ、Qiitaも書いている方に使っていただけるのでは！と考えています。

## Qiita2WPとは

- QiitaユーザのためのWordPressプラグイン
- Qiita API v2 によって、Qiitaに投稿された記事情報をWordPressに自動保存
    - WordPressの「投稿」の特定カテゴリに保存
        - → **WordPressサイトの「記事一覧」に、"WordPressの記事"と"Qiitaの記事"が同時に陳列される**
    - Qiita記事のクロールは、`手動` `1時間` `半日` `1日` から選択
- Qiita記事のパーマリンクは、Qiitaの記事リンクに置き換えられる
    - → WordPressサイトの「記事一覧」で"Qiitaの記事"をクリックすると、Qiitaの記事ページにダイレクトに遷移する
    - つまり、Qiitaの記事をWordPressに複製しているわけではなく、遷移のリンクを置いているだけ

というシンプルなものです。

『Qiitaでもよく記事を書いていて、自分のWordPressブログでリアルタイムに紹介したい。』という方にうってつけではないでしょうか？（自分もその一人です。）

これだけではイメージが湧かない方は、デモサイトをつくったのでぜひ見てみてください。

https://qiita2wp.ksugahara.com/

## 導入方法

### アクセストークンの発行

Qiita API v2 を利用して、Qiitaの記事を取得するために、アクセストークンを発行します。
1. Qiita設定 > アプリケーション
1. 個人用アクセストークンの「新しくトークンを発行する」
1. 「アクセストークンの説明」に任意の名前、read_qiitaのみチェックを入れる。そして「発行する」
1. 表示されたトークンをコピーしておく

### プラグインのインストール

WordPressの公式プラグインリポジトリからダウンロードできます。

https://wordpress.org/plugins/import-qiita2wp/

お使いのWordPressサイトの管理画面から、`プラグイン` > `新規追加` > `「Import Qiita2WP」と検索` > `今すぐインストール` でインストールできます。

### プラグインの設定

Qiita2WPの設定ページは、左メニューの 設定 > Qiita2WP から開けます。

1. 個人用アクセストークンに先ほどコピーしたトークンを貼る
1. 自動更新間隔を選択
1. Qiita記事の保存先カテゴリを選択（デモサイトでは「Qiita」カテゴリを選んでいます）
1. 設定を保存 & 更新を実行

で完了です。
投稿一覧を開くと、掲載済みのQiita記事のタイトルを確認できると思います。

## 終わりに

以上、Qiitaの記事情報をWordPressに取り込むというシンプルな機能を持つ、Qiita2WPの紹介（宣伝）でした。
何か気づいたこと、要望、アドバイス等ありましたら、ぜひご連絡お願いします！
VisionFrameworkを使ったiOSアプリケーション開発

# はじめに
大学時代に卒業研究の一環として作っていたiOSアプリケーションの開発の続きをしたくなったが、ソースが残っていなかった。
そこで、学習や記録もかねて１から開発しその過程を投稿していこうと思う。

# アプリ概要
視覚障碍者の触図を使った学習支援アプリであり、iPhone の背面カメラに映された触図上の手を認識し、触図上のどの地点を触
っているのかを音声で案内する。
![スクリーンショット 2022-09-03 024237.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821619/67ec6ee9-7ad0-a47c-33ec-3ce3cd2a0fe8.png)
### 触図とは
手や指で触って分かるようにした図。線、点、多角形などの図の構成要素を凹凸にすることや、異なる種類の素材を使用することによって、触って認識できるようにしたもの。点字書籍の図版や建物内の案内図などに利用される。

# 必要機能
1. 背面カメラから得られた画像をリアルタイムで画面に表示する
1. 手の認識
1. 触図の位置認識
1. 触図の学習データの認識
1. 音声案内
1. 触図データ読み上げのフラグ

1については学習者に直接関係ないが、介助者が確認することができるのと、開発を行うにあたって動作を確認する必要があるため実装する。

# 開発環境
～ハードウェア～
・PC
MacBook Pro
macOS Monterey バージョン 12.01
・iPhone
iPhone 13pro 128GB
～ソフトウェア～
・Xcode
Xcode 13.4.1

# 次へ
次の記事では、カメラ画像を画面に表示させるところまでやろうと思う。
Gitの基本の「キ」 part1 git、GitHubとは？

# はじめに
エンジニアを志して皆さん勉強を始めていきますが、gitに関して知らない方、結構多い印象ですね。
わかってしまえば非常に便利なgitですが、概念が少し分かりづらいですよね。
いきなり触るとなった場合にも困る事がないよう、経験のない方向けにシリーズとしてまとめていこうと思います。

# gitってなんなの？

![git-lg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/6cffe1e2-1d7d-acb8-0b50-7551b206e3de.png)

一言で言うと、**バージョン管理ができるシステム**です。

例えば、OSアップデートなどは一度あげてしまうと基本的には戻すことはできないですよね。
もしこれが自身の作業に関してであればどうでしょうか。

一生懸命実装したコード、もしくは、たくさんの時間をかけて作成したデザイン、これが一つのミスで吹き飛ぶとしたら想像を絶するものがありますよね、、、。
そこでそんな事故を防ぐために使用するのが、gitというわけです。

gitは先ほど述べた通り、バージョン管理ができるシステムなので、バージョン(変更履歴)から作業を戻したり、進めたりすることが可能になります。
これにより、先ほどの作業が失われてしまうリスクを抑えることができるというのが、一つのメリットになります。

また、大きなメリットとしてもう一つ重要なものがあります。
それは、複数人での作業をスムーズに行うことができる、という点です。

まず、gitがない世界線での作業を想定すると分かりやすいですが、バージョン管理できないという事は、人数が多ければ多いほど差分保存による人為的リスクが跳ね上がる事になります。
これにより誰かの保存が自分の作業をまっさらにする可能性があるという事です、、、。

そんな事になるとミスした側も、ミスによる被害者も夜な夜な眠れぬ日々を過ごす事になってしまう、これを解決するシステムがgitというわけです。

gitは誰かと同じファイルの修正を反映すると差分に影響がある旨を通知する機能があります。
これにより、無意識のうちに誰かの差分を消失する事がないというわけです。

また、編集した履歴を複数人で共有する事ができるので、問題が発生した際に履歴を見て原因の特定する事も容易です。

こうした理由から、**gitはプログラマーだけではなく、デザイナーやライターなど業種問わず利用できる、現在では必要不可欠と言っても過言ではないシステム**、それがgitです。

# GitHubってなんなの？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/b209d470-991f-e58d-e555-b37f0cb770bf.png" width="320px">

gitのご説明をしましたが、現場やよく話に出てくるのって、GitHubですよね。
簡単に申し上げると、**gitの仕組みを利用してweb上で簡単に利用する事のできるサービス**です。

gitはコマンドラインツールの使用して操作していきますが、GitHubはWeb上でグラフィカルに扱う事ができるので、gitを使用するハードルが非常に低いです。
これによりエンジニアではない層でもGitHubを使用する事で、バージョン管理が容易になるという事です。

GitHubは無料で使用できるという点に関しても、ハードルが低いと言えますね。
また、GitHubにはgitにはない独自のシステムを備えています。

<dl>
  <dt>フォーク</dt>
  <dd>フォークの先端のようになっていく事からこの名称となっているようですが、誰かの差分からコピーを作成し、独自に変更が可能になる便利な機能です。</dd>
  <dt>プルリクエスト</dt>
  <dd>自身の変更を反映したい際に、見る側に対して差分をわかりやすく通知し、マージ対象の差分を簡単に評価が可能な機能です。
これにより、知らないうちに改変されることを避けることができ、また、周囲に自分の成果物に対して意見を仰ぐことが容易になります。</dd>
<dt>マージ</dt>
  <dd>自分の差分を瞬時に別の差分へ適用する事ができる機能です。
これにより、好きなタイミングでボタン一つで簡単に作業を統合する事ができるので、チーム開発において安全に、より簡単に差分管理が可能になります。</dd>
</dl>

以上がGitHubにおける重要な機能になります。
上記機能がある事で、GitHubは非常に人気のある重要なサービスであるわけです。

# さいごに
Gitに関しては、理解してしまえばこれ以上ないくらい便利なシステムですが、理解するには少し複雑ではありますね。
プログラマはもちろん、デザイナーなど非エンジニアでも利用必須なシステムだと感じているので、是非触ったことない方はチャレンジしてみてください。
git , githubを勉強し始めたときにメモっておいているコマンドリスト

私はWEBマーケティングコンサルティングを行っていますが、
開発用途ではなく、ビジネス用途でgithubを使っています。

チーム内ポータルとしても正直使いやすいんですよね。

ただ、開発といったらおこがましいかもしれないですが、textlintをこれから活用していくことになり
githubで辞書管理が必要だろうと考え、絶賛勉強中。

本当に今はいい時代。youtubeで見て学んだ必要不可欠なコマンドをメモっているので、なんとなくシェアしておこうと思います。

gitで add, commit ,push , switchの練習をするためにコマンドをまとめているmdファイルを作成し日々github上で更新して管理をする練習中。

前置きが長すぎたのでこのへんで。

# ブランチ
## ブランチの作成 + 作成したブランチへそのまま切り替え
```
git switch -c ブランチ名
```

## ブランチの切り替え
```
git switch ブランチ名
```

## ブランチの確認
```
git branch
```

# push
## main,masterブランチのとき
```
git push origin
```

## 開発ブランチのとき
```
git push origin 開発ブランチ名
```

# ログの確認
```
git log
```
終了方法は`q`

# 編集中のファイル確認
```
git status
```

# コミット
```
git commit -m "コミットメッセージ"
```
`-m`を忘れるな。

# gitに更新したファイルを追加
```
git add .
```
LPC812MAXでタイマーで遊ぶ



目的
タイマーのテスト

![o_con721.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/ad2bcf54-399c-4dc3-1ad1-e41135b12147.jpeg)



```c++



//Timer_test1_812_1

#include "mbed.h"

//         TX    RX
Serial pc(P0_4, P0_0); //812

//タイマーの設定
Timer t;

//メイン関数
int main()
{

    int sd;

    //タイマーの開始
    t.start();

    //無限ループ
    while(1) {


        sd = t.read_us();//測定開始

        //マイクロ秒の表示
        pc.printf("[%d]\r\n",sd);

        wait_ms(1000);//1秒待つ

    }//while


}//main





```


![o_con833.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/db6731d2-c847-969e-ff11-1cad489efbbe.jpeg)


-8-
Pixi.jsでドット絵のSpriteを綺麗に拡大する

# 修正前のコード(ぼやける)

```html:index.html
<html>

<head>
    <link rel="stylesheet" href="index.css" />

    <!-- jQueryの読み込み -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!--pixi.js読み込み-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.1/pixi.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="index.js"></script>
</body>

</html>
```

```js:index.js
window.addEventListener('load', () => {
    let app = new PIXI.Application({
        width: 256,
        height: 192,
        backgroundColor: 0xcccccc,
    });

    app.stage.x = app.screen.width / 2;
    app.stage.y = app.screen.height / 2;
    $('#app').append(app.view);

    let sprite1 = PIXI.Sprite.from('image.png');
    sprite1.anchor.set(0.5);
    sprite1.x = -32;
    app.stage.addChild(sprite1);

    let sprite2 = PIXI.Sprite.from('image.png');
    sprite2.anchor.set(0.5);
    sprite2.x = 32;
    sprite2.scale.set(3);
    app.stage.addChild(sprite2);
});
```

```css:index.css
#app canvas {
    width: 512px; /*/2倍に拡大/*/
}
```

image.png
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/9b86d3f7-2c11-29c2-626c-7064579101f8.png)

全て同一ディレクトリにあります。

実行するとこんな感じ
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/7de4eab9-edcd-eefd-a501-cf498abba01b.png)

画像をクリックして拡大するとわかりやすいですが3倍のスプライトも等倍のスプライトもぼやけています。
どうにかしましょう。

# 解決方法
+ Canvas要素を拡大した時のぼやけはCSSで調整する。

```css:index.css
#app canvas {
    width: 512px; /*/2倍に拡大/*/
    image-rendering: pixelated;
}
```

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/a85cb54c-8760-3752-166d-a9813b875563.png)

等倍のスプライトは綺麗に表示されています。

+ プログラムで拡大設定した時のぼやけはjsで調整する

```js:index.js
window.addEventListener('load', () => {
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
...
```

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/cfe384f0-94c6-7a6c-59d6-04cf85aa2891.png)

完璧です！

ちょっと回転させます。

```js:index.js
...
    let sprite1 = PIXI.Sprite.from('image.png');
    sprite1.anchor.set(0.5);
    sprite1.x = -32;
    sprite1.rotation = Math.PI / 3;
    app.stage.addChild(sprite1);

    let sprite2 = PIXI.Sprite.from('image.png');
    sprite2.anchor.set(0.5);
    sprite2.x = 32;
    sprite2.rotation = Math.PI / 3;
    sprite2.scale.set(3);
    app.stage.addChild(sprite2);
});
```

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/d879c70a-beae-a2d9-b566-b3256d68c841.png)

回転しても大丈夫。

# ちょっと高速化
PIXI.settings.ROUND_PIXELS = true;を追加します。
ピクセル補完とやらが停止して速くなるらしいです。
[公式の説明(英語)](https://pixijs.download/dev/docs/PIXI.settings.html)

```js:index.js
window.addEventListener('load', () => {
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    PIXI.settings.ROUND_PIXELS = true;
...
```
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/591d698f-f4a4-dd8a-2ffe-2f40a456644f.png)

さっきとは若干違います。

![6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707139/5039bc72-cea3-479c-047c-7029dc1e9441.gif)


以上！！
Cypress-image-snapshotによる画像比較テスト

##### cypressによる画像比較を実施するために以下をinstall
npm i @types/cypress-image-snapshot cypress-image-snapshot

##### 以下追加
```cypress/support/commands.ts
/// <reference types="cypress" />
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand({
  failureThreshold: 0.00,
  failureThresholdType: 'percent',
  customDiffConfig: { threshold: 0.0 },
  capture: 'viewport',
});
```

公式にはcypress/plugins/index.tsに追加との記載があったが、
cypress v10ではpluginsではなくcypress.config.tsに記載するとのこと。
※実際この方法でないとエラーが発生していた。

<font color="red">
The 'task' event has not been registered in the plugins file. You must register it before using cy.task()
</font>

```cypress.config.ts
import { defineConfig } from "cypress";
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on, config);
    },
  },
  component: {
    setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on, config);
    },
  },
});

```
あとはcypressのテストで以下を実行すればよい。
初回は比較元がないのでファイル作成し、成功する。
2回目からは前回ファイルとの比較を行い違いがあればエラーが発生する
```
cy.matchImageSnapshot();
```

試しにdom変更後にテスト再実行してみたところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653035/ac94f761-6368-9654-d980-883b124302a7.png)

比較画像を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653035/ecc31976-d820-972c-d65c-06170015d804.png)

さすがにリソース食うから頻繁にはできないが、
大事な部分で使えそう。
機械学習(ニューラルネットワーク)基本

# 機械学習とは

機械学習にはさまざまなモデルを使用します。
そのモデルの中の一つがニューラルネットワークです。

# ニューラルネットワークとは

そもそも、機械学習の目的の一つとして、明示的にプログラムをせずともデータを解析することによって予測を行うことができるというものがあります。つまり、機械にも人間のように自分自身で学習して欲しいというわけです。

というわけで、人間の脳の構造を参考に作られたモデルがニューラルネットワークです。
人間の脳は、ニューロン(ノード)とシナプス(エッジ)が、外部刺激(入力)を電気信号として伝達していきます。
この構造をモデル化したものがニューラルネットワークです。

### 具体的な仕組み
Step1
入力層にデータを入力する

Step2
各入力に対して重みwを掛け合わせたものを中間層へ送る。


:::note
重みとは、各入力が最終の出力に対してどの程度の関連を持っているのかを表す指標です。
重みwが大きいほど、その入力は出力との関連が強くなります。
:::

Step3
各中間層をさらに重み付けして出力層へと送り出す。

Step4
出力層の要素を足し合わせたものを活性化関数に通し、最終的な結果を出力.

## 活性化関数とは
闘値を境に出力が変わる関数。中間層や出力層の値を変換する際に用いる。
活性化関数を用いて変換を行うと様々な値の出力が行えるため、モデルの表現力を増すために用いられる。

https://ai-trend.jp/basic-study/neural-network/activation_function/

層を追加する際に、出力層の活性化関数が線形関数 (１本の直線) の場合は、意味がない。

### パーセプトロン
活性化関数としてステップ関数を用いたアルゴリズムをパーセプトロンという。
ステップ関数とは、出力層の値が0より大きいときは1を出力し、0以下のときは0を出力する関数のこと。
現在は使用されていない？❓


### 扱うデータの正規化
ニューラルネットワークのモデルを使用する際は、データを正規化　（０−１の間の値にする）をしておいた方が良い。

## モデルの構造
#### 入力層の生成
```
  x = layers.Dense(64, activation='relu')(inputs)
```
inputを入力とする入力層

#### 中間層の生成
```
 y = layers.Dense(256, activation='sigmoid')(x)
```
ノード数　: 256
活性化関数 : シグモイド関数

#### ドロップアウト
　一定割合のノードを不活性化させながら学習を行うことで過学習を防いで精度を上げるためにドロップアウトを行う。
```
  y = layers.Dropout(0.2)(y)
```
生成した中間層のうち、0.2（20%)を不活性化

#### 出力層の生成
```
bmi = layers.Dense(1, name='bmi')(z)
```
#### モデル化
```
model = keras.Model(inputs=inputs, outputs=[bmi, life_expectancy], name='Health')
```
inputを入力すると、outputs(bmi と　life_expectancy)を出力するモデル「Health」を作成

####損失関数？
```
model.compile(
      optimizer=tf.keras.optimizers.RMSprop(0.001),
      loss_weights=[1., 0.8],
      loss=['mse', 'huber'],
      metrics=['mae', 'mse'])

  return model
```


### ニューラルネットワークが得意なこと

ニューラルネットワークはデータの規則性を見つけて予測し、さらにその予測の誤差から新たな予測を行います。
つまり、　誤差逆伝播を用いて、誤差から逆算して学習するのです。

:::note
「分類」や「回帰」もデータから規則性を見つけることで予測を行いますが、表現の幅が少ない。
:::

## ニューラルネットワークの学習の流れまとめ

#### 訓練データ
入力データを入力層に入れる
↓
入力層の値に重みwをかけて中間層へ入れる
↓
中間層に来た値の和を活性化関数で変換して、出力層に送る
↓
出力層に来た値の和を活性化関数で変換して予測値を出す」　推論
↓
損失関数により、誤差の大きさを求める(全ての訓練データに対して求める)
↓
「ミニバッチ手法」で無作為に抽出した訓練データの損失関数を求める(全ての損失関数の和を計算すると時間がかかってしまうため)
↓
勾配降下法(DL)によって勾配を求める
勾配は、損失関数の値を最も減らす方向に示す
↓
重みパラメーターを勾配方向に微少量だけ更新
↓
繰り返す
↓
損失関数の変化が停滞したら終了

#### テストデータ
訓練によって導いたパラメーターを用いてテストデータから予測値を算出
↓
評価関数を用いてテストデータの精度を評価







# ディープラーニングとは
ニューラルネットワークのの中間層を横に伸ばしたもの（中間層をさらに層にして、何度も中間層を通過させることで、表現の幅が広がる)

#### メリット
表現が広がる

#### デメリット
ニューラルネットワークで用いるパラメーター推定の手法(準ニュートン法)が使えなくなる　
→勾配降下法を用いる。
　勾配降下法は準ニュートン法と比べて非常に効率の悪いアルゴリズム.
また、モデルが複雑になると、勾配降下法を使ってもなかなかちゃんとパラメタが推定できない。

# ニューラルネットワークに関する用語
### 全結合層
全結合層とは、重み付き入力とバイアスの総和です。
全結合層は、中間層や出力層の活性化関数を適用する前までの層。

# 参考記事
https://goworkship.com/magazine/machine-learning-neural-network/

https://logics-of-blue.com/time-series-analysis-by-nnet/

https://www.sbbit.jp/article/cont1/33345

https://zenn.dev/nekoallergy/articles/machinelearning-func

https://hogetech.info/machine_learning/deep_learning/dl_basic2

https://tutorials.chainer.org/ja/13_Basics_of_Neural_Networks.html
Rust でのGUIについての調査-eguiについて

## 書いた動機

* RustのGUI周りの話はあまり聞かない（見かけない）ので新奇性の高い記事になる可能性が高いのではないかと考えた。
* 色々なところで使われ始めているのは言うまでもないが、[WindowsOSの開発自体にもRustが採用されているらしい。](https://xtech.nikkei.com/atcl/nxt/column/18/00692/042700054/ "グーグルやMSが「Rust」言語でOS開発、背景に国家による諜報活動の影")今後WindowsでのGUIの実装にRustが使用される可能性が高いのではないかということで現状の確認をしたくなった。
* メモ的な面もあります


## RustのGUI周りについての調査

まずは「Rust GUI」でググる。

上から一つ目：egui
[eguiで作るRustのGUI（基本的な使い方と日本語表示）](https://zenn.dev/tris/articles/rust-egui-01)

## eguiの特徴
* ビルドが早い？
[eguiで作るRustのGUI（基本的な使い方と日本語表示）](https://zenn.dev/tris/articles/rust-egui-01 "eguiで作るRustのGUI（基本的な使い方と日本語表示）")からのリンク、同著者の記事[RustのeguiでGUI](https://zenn.dev/tris/scraps/866dcddae90f46)の中からの引用

>体感、icedの1/10くらいの時間でビルドが終わる感じ。

* 即時モード
(即時モードについては上記リンクに説明あり)

## eguiについての調査
qiita内で「egui」で調べてもほとんど情報がない。
[ここ](https://qiita.com/fluffysheepinx/items/8f2d66f05847735de8ad)くらい？
上記リンク内の
> 一回データを取得する処理をしたら、次のトリガーが引かれるまで、そのデータを保持しておきたいですよね？
> その保持するやり方がわからなかった。

とあるのでこのやり方について別記事切り出したいと思う。
once_cell でいけるのではないか？と考えている。

情報が本当にないのでまずは動かしてみる。
[公式](https://github.com/emilk/egui)を参照しながら

個人的な関心からtableをいじってみることにする。
まず一つ判明したのがテーブルのラベル名に日本語が入れられない（文字化けする）
これを解消する方法を探す必要がある。
あと、tableにほかのwiget類（チェックボックスやテキストなど）を入れることができるのかどうかを調べようと思う。
【Java】アノテーション

# 学習したアノテーション

### コントローラークラスで使うアノテーション

#### `@controller`
そのクラスがコントローラーであることをSpringに伝えるためのアノテーションです。

#### `@Responsebody`
ブラウザからのリクエストに対して、直接HTMLを返す（戻り値がそのまま返る）際に利用するアノテーションです。

#### `@GetMapping`
`＠Mapping`は、ブラウザで入力されたURLと、実行されるメソッドを紐づけるためのアノテーションです。
GETリクエストを処理します。

#### `＠PostMapping`
POSTリクエストを処理します。

#### `@ModelAttribute`
任意のデータをModel型のオブジェクト内に格納することができます。

#### `@PathVariable`
URLに含まれるパラメータを受け取るためのアノテーションです。

### リポジトリクラス・データアクセスクラスに使うアノテーション

#### `@Data`
対象クラスにgetter/setterでアクセスすることを可能とします。

---

#### `@AllArgsConstructor`
すべての変数を初期化するコンストラクタを生成するアノテーションです。

---
iOSDC Japan 2022 個人的特に気になるトーク


iOSDC開催日がついに来週になりましたね！
iOSも触る機会が増えてきた為iOSDCに初めて参加いたします。
今回はiOSDCオンラインチケットを購入したので、個人的に気になるトークを上げていこうと思います。

# 1つ目
[ウーニャ、しってる。みんなふんいきでSwiftUIをつかってる。 ](https://fortee.jp/iosdc-japan-2022/proposal/28a7ecff-a0f1-40c9-80a5-b8ed2fb0fd94)

こちらです。
個人的にSwiftUIで開発をおこなっているため、説明にある文をお借りすると、『何も考えずに書くとクソデカViewになります。』
まさにそうだと思います。
一人で勉強として触っている為、こう言ったお話を聞けるのは楽しみです！


# 2つ目
[SwiftUI Navigation のすべて](https://fortee.jp/iosdc-japan-2022/proposal/0b6f453a-68f0-4300-9ab2-cb1e3457eb53)

こちらです。
画面遷移はどのアプリにも必ずあると思います。
SwiftUIでの画面遷移の理解を深められそうです！


# 3つ目
[タクシーアプリ「GO」から学ぶ Google Maps SDK 活用術](https://fortee.jp/iosdc-japan-2022/proposal/cf0d2912-8f56-42e4-9800-b8eced98f48e)


こちらです。
タクシーアプリ「GO」は使ったことある人多いのでは無いでしょうか？
Google Maps SDKを使用しているそうで、実装上のハマりポイントや苦労して実現したところなどお話が聞けるということで、MAPを実装に関する有益な情報が聞けそうです！


# 4つ目
[Kotlin Multiplatform Mobile でiOSとAndroidの実装差異を無くす](https://fortee.jp/iosdc-japan-2022/proposal/f5526982-6ec8-4214-8236-c95d9523d529)


こちらです。
Kotlin Multiplatform Mobileは気になってます！
自分自身Androidエンジニアなので、kotlinが分かるため、iOSDCでこのお話が聞けるのは楽しみです。


以上です！
特に気になったトークを書き出してみました。
来週に開催なので、まだタイムテーブルで何を見るか決まって無い方、はそろそろ決めた方が良さそうです！
UnityプロジェクトにiOSのWidgetを載せる

環境
Unity 2020.3
Xcode 13.4および14 beta6

UnityからXcodeに書き出したプロジェクトにWidgetを載せる方法です。この先に進む前にUnityからSwiftを呼び出せるようにしておいてください。[Unity Swift 連携]などででてくるはずです。あと対象のプロジェクトがWidget無しでビルドに成功することを確認しておいてください。
Xcodeのメニュー、File > New > Target...からスクロールで下の方にあるWidget Extensionを選択、追加
ProjectがUnity-iPhoneになっているのを確認
![Product Name widgetnameのコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/a6688ff5-c842-e081-7a35-bc1a7c3cd509.jpeg)

左カラムのUnity-iPhoneを選択してTARGETSのwidgetを選択して対象iosのバージョンをUnity-iPhoneと揃える
以下の図のwidgetのArchitecturesをStandardArchitectureに変更
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/7efb6ed4-e238-7b95-d769-e91e1bddcc70.jpeg)
これでビルドしてみて正常にビルドされることを確認。
新規にwidgetフォルダ内にSwiftPlugin.mm SwiftPlugin.swiftとwidget.swiftの両方からアクセスできるAppDataStore.swiftを作る

元アプリからWidgetへの情報の送りかたは　C# > SwiftPlugin.mm(Objective-c) > SwiftPlugin.swift > NSUserDefault > AppDateStore.swiftからUserDefault読み出し、という感じ。最初CoreDataでやろうとしたけどどうしてもエラーが取れなかった。あと元アプリとWidgetは完全に別扱いなのでUserDefault使うときはAppGroup設定しないと同じとこに読み書きできません。

widget関連のファイルとSwiftPluginの右カラムで設定するTarget Menbershipの設定は非常に厳密なので必ず以下のように設定。一個でもかけ違うとハマるので注意。ここで３日ハマってます。
![fcwidget1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/ab6c6ad5-d1ef-1729-16a2-f692a61dae01.jpeg)
![fcwidget2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/c4f51d0c-1287-7f6e-4e94-4fcf0b43279c.jpeg)
![fcwidget3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/4fbc6510-dfc7-fc7a-18ac-1dd680fdcaac.jpeg)
![fcwidget4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/25a6ed37-7416-ad4e-5237-ade0c1cb505b.jpeg)
![fcwidget5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117011/4d6bb48e-7e6a-d2be-91af-932f249a5924.jpeg)
これでSwiftPlugin.mm -> Swiftplugin.swiftからAppDataStore.swiftの関数を呼び出すことができるようになる。AppDataStore.swiftを通してUnity-iPhone、UnityFramework、widgetExtentionがやりとりするイメージ（だと思う）。
フリーランスのエンジニアだが何故か組織論を学習しようとしている


- 闇が言った「学習しなければ死あるのみ」 。光が言った「学習することは本能だ」。
- ミーティングの時間をメモしそびれたまま週をまたいだ。週明けに日時を聞き直せば済む話なのだがなんとも落ち着かない。仕事のできない人間だと思われたくない欲望の火。
- フリーランスのくせに何故か組織論の本を読んでいる。
- 次から次へと読むべき本が現れる。キリがない。
- 価値のある書籍たちに10万円払っても惜しいとは思わない。ただしちゃんと読み切るのであれば。
- 新しい書籍を買おうかどうか悩む時。「今買わなければずっと買わないかもしれない」「買ってもすぐには読まないかもしれない」の間で揺れ動く。
- MacBookAirの充電アダプタとしてiPhone用の充電アダプタが使える。何故誰も教えてくれなかったんだろう。これで持ち歩く充電アダプタを1種類に減らせた。
- あらゆる物事に関してスイッチングコストをどの程度許容し、どの程度拒絶するか。この判断軸は常に持っておくべきだ。
- 言葉で言葉を説明するのは難しい。たまに自分に質問をする。例えば「エネルギーとリソースはどう違うの？」と。自分の質問に自分で答えられずに絶望する。そんな空想がたまに起こる。
- 組織の方向性を決める会議の場において、匿名でテーマを書き込んでそれに関して皆で議論するスタイルはどうだろう。誰が言ったとか言わないとかかで萎縮する問題を避けるためだ。
- 代名詞が多すぎる人とコミュニケーションは骨が折れそうだと思う。「これこれこういうことで、こうなったということをですね。で、ドン！と」みたいな。みんなもっと言語化の努力をすべきじゃないだろうか。
- 自分の場合、有益な本を買える確率は今のところ50%ぐらいだと思う。残り50%は途中で読むのをやめる。
- 頭で考えたことがそのまま文章化できたら良いのにと誰でもいちどは考えたことがあるんじゃないだろうか。だがそもそも書くのにコストをかけるということ自体に意味があるのだ。思考のスピードと文章を書くスピードが同じになってはまるで意味がない。
- ポモドーロテクニックを実践し続けている。だが本来の4ポモドーロ単位での長めの休憩は意識的にしていなかった。そろそろ取り入れてみても良いかもしれない。
- 本を1冊読んだら相当量の文章を読むことになる。それでようやく1アイディアが腑に落ちるかどうかといったところ。Twitterの140文字ではとても1アイディアを納得するには足りない。
- 世の中には学習すべきことが多すぎる。いやこれを言い換えてみよう。世の中には学習すべきことが多すぎるという前提を僕は持っている。
- 学習には知識・理解・習得という三段階があるように思う。学習すべき物事が多すぎて圧倒されそうだが、自分にとって知るだけで良いことも多いのではないか。知っておくだけで良いことが9割ほどかもしれない。
- 本を買うのは1日1冊までにしたいという誓いを立てたがどうにも守ることは出来なさそうだ。
- 分かりやすい本に気をつけろ。なぜなら現実は複雑だ。現実に対して分かりやすぎる説明がされていることは、どこかで騙されているということかもしれない。

# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
コピペで使えるnuxt+vuetifyのback to topボタン

```vuejs
<template>
  <v-fab-transition>
    <v-btn
      v-show="buttonActive"
      color="primary"
      fab
      dark
      small
      absolute
      right
      style="bottom: 20px; position: fixed"
      @click="$vuetify.goTo(0)"
    >
      <v-icon>mdi-chevron-up</v-icon>
    </v-btn>
  </v-fab-transition>
</template>
<script>
export default {
  data() {
    return {
      buttonActive: false,
      scroll: 0,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollWindow) // スクロールの位置を監視
  },
  methods: {
    scrollWindow() {
      const top = 200
      this.scroll = window.scrollY
      if (top <= this.scroll) {
        // 200px以上スクロールした場合のみボタンを表示
        this.buttonActive = true
      } else {
        this.buttonActive = false
      }
    },
  },
}
</script>
```

このファイルをcomponents/に保存して、使いたいところでコンポーネント名を書くだけでOK。
Vue Devtoolsの導入 (Vue.jsのデバッグツール)

# Vue Devtoolsの導入

1
Google Chromeのウェブストアで「vue dev tools」を検索
https://chrome.google.com/webstore/category/extensions?hl=ja
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/bea09fac-aec6-a5bf-a3f8-5dee3537565c.png)

2
「Chromeに追加」をクリック
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/ae31b716-e673-fce2-8b84-82b6bfd6f4d2.png)

3
「設定」をクリック
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/8b3dcb78-ef35-2ca4-f017-22a9dac7ea13.png)

4
「拡張機能」をクリック
![スクリーンショット 2022-09-04 17.58.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/5bf66a48-a04c-4817-cfe0-0ff1464f4607.png)

5
「詳細」をクリック
![スクリーンショット 2022-09-04 18.02.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/ede26e9e-4459-193c-ee1e-bd9ad7199307.png)

6
「ファイルのURLへのアクセスを許可する」
![スクリーンショット 2022-09-04 18.04.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/19d2d00a-6bea-03fe-37b9-add00108e4ae.png)

# Vue Devtoolsを使ってみる。

1
デベロッパーツールで「Vue」をクリック
![スクリーンショット 2022-09-04 19.25.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/fa081776-92de-a84a-3236-a0639b8b4104.png)

2
鉛筆マークで編集する。
![スクリーンショット 2022-09-04 19.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/75f3333d-c6f1-87a4-951d-015bc8392e59.png)

3
編集内容が反映されればOK！
![スクリーンショット 2022-09-04 19.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1030700/7404a8c7-0fe6-7dba-af44-38c9a01d5374.png)


## 参考
https://blog.codecamp.jp/vuejs-helloworld-display
web share api level2 ファイルor画像付きのシェア

```javascript
async share() {
      const imgPath = '/image/path.png'
      const blob = await (await fetch(imgPath)).blob()
      const file = new File([blob], 'image.png', { type: blob.type })
      navigator
        .share({ text: 'share...', url: null, files: [file] })
        .catch((error) => {
          console.error(error)
        })
    },
```

画像またはファイルを複数添付したい場合はfiles配列に追加すれば良い。
tcpdump で SNMP のパケットをキャプチャする

## やりたいこと

tcpdump で SNMP のパケットをキャプチャし、その中身を確認したい。

1. snmpget コマンドの通信
1. snmpwalk コマンドの通信

それぞれの中身を確認する。

## snmpget コマンドの通信を確認

### 発行するコマンド

マネージャ (192.0.2.58) 側で以下実行する。インターフェースは割り当てられた IPアドレスが所属するネットワークから判断して、適切なものを選択する。

```
tcpdump --direction inout --number -XX -vv -i eth0 port 161
```

クライアント (192.0.2.84) 側で以下実行する。

```
snmpget -v2c -c public 192.0.2.58 RFC1213-MIB::sysName.0
```

### 結果

1 で マネージャ (192.0.2.58) からクライアント (192.0.2.84) に GetRequest が送信された後、 2 で GetResponse が返っていることがわかる。

```
# tcpdump --direction inout --number -XX -vv -i eth0 port 161
tcpdump: listening on eth0, link-type EN10MB (Ethernet), capture size 262144 bytes
    1  15:49:17.177040 IP (tos 0x0, ttl 63, id 22680, offset 0, flags [DF], proto UDP (17), length 71)
    192.0.2.84.58061 > 192.0.2.58.snmp: [udp sum ok]  { SNMPv2c { GetRequest(28) R=833053958  system.sysName.0 } }

    2  15:49:17.178997 IP (tos 0x0, ttl 63, id 56472, offset 0, flags [DF], proto UDP (17), length 83)
    192.0.2.58.snmp > 192.0.2.84.58061: [bad udp cksum 0x9c0c -> 0x3157!]  { SNMPv2c { GetResponse(40) R=833053958  system.sysName.0="76e6e9432f5d" } }
^C
2 packets captured
3 packets received by filter
0 packets dropped by kernel
```
## snmpwalk コマンドの通信を確認

### 発行するコマンド

マネージャ (192.0.2.58) 側で以下実行する。インターフェースは割り当てられた IPアドレスが所属するネットワークから判断して、適切なものを選択する。

```
tcpdump --direction inout --number -XX -vv -i eth0 port 161
```

クライアント (192.0.2.84) 側で以下実行する。

```
snmpwalk -v2c -c public 192.0.2.58 RFC1213-MIB::sysName.0
```

### 結果

snmpwalk の場合は、 1 で GetNextRequest が送信され 2 で結果が返ってきた後に、 GetRequest を送信していることがわかる。

GetNextRequest で「結果がないよ」というレスポンスが返ってくるまでこれを繰り返すことによって、指定した OID 配下の値をすべて取得する。

```
# tcpdump --direction inout --number -XX -vv -i eth0 port 161
tcpdump: listening on eth0, link-type EN10MB (Ethernet), capture size 262144 bytes
    1  15:48:14.970815 IP (tos 0x0, ttl 63, id 22669, offset 0, flags [DF], proto UDP (17), length 71)
    192.0.2.84.58109 > 192.0.2.58.snmp: [udp sum ok]  { SNMPv2c { GetNextRequest(28) R=1950637118  system.sysName.0 } }

    2  15:48:14.972005 IP (tos 0x0, ttl 63, id 42196, offset 0, flags [DF], proto UDP (17), length 78)
    192.0.2.58.snmp > 192.0.2.84.58109: [bad udp cksum 0x9c07 -> 0xbeda!]  { SNMPv2c { GetResponse(35) R=1950637118  system.sysLocation.0="unknown" } }

    3  15:48:14.976897 IP (tos 0x0, ttl 63, id 22670, offset 0, flags [DF], proto UDP (17), length 71)
    192.0.2.84.58109 > 192.0.2.58.snmp: [udp sum ok]  { SNMPv2c { GetRequest(28) R=1950637119  system.sysName.0 } }

    4  15:48:14.976991 IP (tos 0x0, ttl 63, id 42198, offset 0, flags [DF], proto UDP (17), length 83)
    192.0.2.58.snmp > 192.0.2.84.58109: [bad udp cksum 0x9c0c -> 0x5aed!]  { SNMPv2c { GetResponse(40) R=1950637119  system.sysName.0="76e6e9432f5d" } }

^C
4 packets captured
4 packets received by filter
0 packets dropped by kernel
```
serverspec に環境変数を渡したい

## やりたいこと

serverspec に引数を受け渡して、項目を切り替えるということがしたかった。

環境変数を引き渡すことで同様のことを実施することにした。

## 実現方法

### 引数の引き渡し方

引き渡し方として二通りの方法がある。

spec ファイルの中で使う分には、どちらの手法でも変わりはないと思う。

1. bash の環境変数として渡す
1. rake の環境変数として渡す

#### bash の環境変数として渡す

```
static_ip='192.0.2.1' rake spec:<host_name>
```

#### rake の環境変数として渡す

[rake/command_line_usage.rdoc at master · ruby/rake · GitHub](https://github.com/ruby/rake/blob/881416e322d597e47e62935ef6a9dbaed934fbfc/doc/command_line_usage.rdoc)

```
rake static_ip='192.0.2.1' spec:<host_name>
```

### spec ファイル側の記述

`static_ip` 環境変数の有無によって、確認項目を切り替える。


```
context 'IPアドレス設定' do
  if ENV['static_ip']
	describe 'IP アドレスが指定のものになっていること' do
	  its(:ipv4_address) { should eq ENV['static_ip'] }
	end
  else
    describe 'インターフェースの IP アドレス設定が DHCP であること' do
      describe file('/etc/sysconfig/network-scripts/ifcfg-eth0') do
        its(:content) { should match /^BOOTPROTO=dhcp$/ }
      end
    end
  end
end
```
rpm パッケージにシンボリックリンクを含める

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.414 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Fri Sep 02 2022 02:04:25 GMT-0700 (PDT)
* Source doc: 2022-09-02 rpm パッケージにシンボリックリンクを含める方法
* Tables are currently converted to HTML tables.
----->



## やりたいこと

/usr/local/my_command_source/ にスクリプト群をインストール。

/usr/local/my_command_source/bin/run.sh へのシンボリックリンクを、 /usr/bin/ 以下に貼りたい。


## 環境

CentOS7


## 方法

単に、 %install マクロ内のコマンドにおいて、以下のようにシンボリックリンクを作成する。


```
%install
...
ln -sf /usr/local/%{name}/bin/run.sh %{buildroot}/usr/bin/%{name}
```


その後、このシンボリックリンクを %file マクロに含める。


```
%file
...
/usr/bin/%{name}
```



## NG パターン1

シンボリックリンクが指し示すリンク元について、 %{buildroot} を指示した場合 rpmbuild コマンドでエラーが出る。


```
%install
...
ln -sf %{buildroot}/usr/local/%{name}/bin/run.sh %{buildroot}/usr/bin/%{name}
```



## NG パターン2

%post, %preun マクロを利用して、インストール後にシンボリックリンクを作成、アンインストール前にシンボリックリンクを削除する方法。


```
%post
ln -f /usr/local/%{name}/bin/run.sh /usr/bin/%{name}

%preun
unlink /usr/bin/%{name}
```


単にインストール、アンインストールを行うにおいては動作するが、アップデートを行った際にエラーとなることが多々発生した。

unlink がまだされていない状態で ln コマンドが発行され、「すでにシンボリックリンクが存在する」という旨のエラーが表示されることが多々あった。

またそれによって、アップデート後なぜかシンボリックリンクが存在しなくなるということも起こった。

素直に %install マクロで処理したほうがよいと思われる。
【環境構築】Docker container内部にVS Codeで入って作業する方法

## 背景
- docker container内部に入ってコマンド操作をしたい時がある。
- `docker-compose exec [service name] /bin/sh`を使用して入るという方法は煩雑。
- docker container上でvs codeを起動しているような状態で作業したい。

## 目標
- docker container上でvs codeを起動しているような状態を実現する。

## どうやって実現するのか？
- vs codeの拡張機能「VS Code Remote Containers」を使用する。

## VS Code Remote Containersとは？
- ローカル側のvscodeをコンテナに接続できる拡張機能
- 画像の通り、コンテナ上でvscodeを起動しているような形で使用できる。

![vscode_remote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/9da245fc-9446-9eeb-3006-da4eaa411e58.png)
（画像引用：https://code.visualstudio.com/docs/remote/containers)

## 前提環境
- macOS 11.4 (20F71)
- arm64(M1)
- Docker Desktop
- Visual Studio Code
- VS Code拡張機能 VS Code Remote Containers

## 「VS Code Remote Containers」の有効化
- vs codeの拡張機能の「Remote - Containers」をインストールして有効化します。
![vscode_remote_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/4369fe2e-7c1f-8dcf-294f-044f007b14f0.png)

## 入りたいdocker containerを立ち上げておく
- 「Remote Containers」を使用するには接続先となるcontainerが必要です。
- 私の下記の過去記事を参考に、「alpine」のコンテナを立ち上げておいてください。
https://qiita.com/takuma-1234/items/7b009edd0c5297cfe9ab

## 「Remote Containers」を使用してコンテナ内部に入る
![vscode_remote_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/860bb75f-ea6a-b897-ae6c-cc882a5b6c27.png)
![vscode_remote_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/d9c0bcbd-572e-aab2-96d6-ae5432dc4127.png)
![vscode_remote_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/4adab1dc-434e-bed0-9c19-03ee37ec6db4.png)

## 小ネタ：コンテナのルートディレクトリでフォルダを開く方法
- 接続は上記の操作で完了なので、あとは焼くなり煮るなり好きに使うと良い。
- ただ、個人的に、コンテナ内部のルートディレクトリでフォルダを開いた状態にしたいことが多いのでそのやり方だけ紹介する。
![vscode_remote_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/c47cc863-d714-ce13-741e-069ca5d2467a.png)
![vscode_remote_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2651220/d45fb20c-d3a7-3ea9-f44f-1b19cc7c5956.png)

## 参考資料

https://code.visualstudio.com/docs/remote/containers

https://zenn.dev/leftletter/articles/0969dcef061ff8

## 個人ブログ

https://takuma-tech.com/2023/01/05/519/
Linux サーバが送信元として使うポート番号が知りたい

## 環境情報

* Rocky Linux 8

## 発生した問題

「ネットワークを制限した環境でアプリケーションを動作させるため、アプリケーションが利用する送信元ポートアドレスを知りたい」という依頼があった。

通信を受け付けるサーバが Listen するポートや、 curl などで利用する送信先ポートアドレス (80、443 など) はわかれど、送信元ポートアドレスを知る方法は全く分からなかったため調べた。

## 解決方法

アプリケーション側で特に送信元ポートアドレスについての管理などはしていなかったため、利用する送信元ポートアドレスについては OS 依存だということが分かった。

どうも、「送信元ポートアドレスとして利用されるポート」は、 Ephemeral port という用語が該当するらしい。この用語で検索をかけると色々と情報が出てきた。

* [Ephemeral port - Wikipedia](https://en.wikipedia.org/wiki/Ephemeral_port)
* [unix - How to view and edit the ephemeral port range on Linux? - Stack Overflow](https://stackoverflow.com/questions/28573390/how-to-view-and-edit-the-ephemeral-port-range-on-linux)

Ephemeral port の範囲は、 net.ipv4.ip_local_port_range というカーネルパラメータとして設定されている。現在の設定は、以下のように確認できる。

```
# sysctl net.ipv4.ip_local_port_range
net.ipv4.ip_local_port_range = 32768    60999
```

もしくは、 `/proc/sys/net/ipv4/ip_local_port_range` の内容を直接確認することでも同じ情報が得られる。

```
# cat /proc/sys/net/ipv4/ip_local_port_range
32768   60999
```

このシステムで使われる送信元ポートの範囲は、 32768 ~ 60999 である。

なおこれは、 Linux のカーネルとして広く使われている範囲らしい。
vagrant ssh が遅い

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.322 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Fri Sep 02 2022 00:54:41 GMT-0700 (PDT)
* Source doc: 2022-09-01 vagrant ssh が遅い
* This is a partial selection. Check to make sure intra-doc links work.
* Tables are currently converted to HTML tables.
----->



## 環境

* Windows10
* vagrant
* Virtualbox


## 発生した事象

`vagrant ssh` を実行すると、ログインまでに数秒かかる。

今まで気にならなかったが、利用頻度が上がったために気になるようになった。


## 解決方法

独自のコマンドを作成して対処した。


### vssh


```
$ cat ~/bin/vssh
#!/bin/bash
ssh_config_file=".vagrant/ssh.config"

if [ ! -e $ssh_config_file ]; then
  vagrant ssh-config > .vagrant/ssh.config
fi
ssh -F .vagrant/ssh.config default
```


Git Bash の MinGW では “/c/Users/&lt;user_name>/bin” のディレクトリにパスが通っているため、ここに設置する。


```
$ echo $PATH
/mingw64/bin:/usr/bin:/c/Users/<user_name>/bin: (...以下略)
```



```
$ ls ~/bin
vssh
```


これで、 Vagrantfile が設置されたディレクトリで vssh を実行すると、 plain の ssh コマンドが利用され迅速に SSH 接続できるようになった。

同様に、ファイル転送を行うための vsftp というコマンドも同様に作成した。


```
$ cat ~/bin/vsftp
#!/bin/bash
ssh_config_file=".vagrant/ssh.config"

if [ ! -e $ssh_config_file ]; then
  vagrant ssh-config > .vagrant/ssh.config
fi
sftp -F .vagrant/ssh.config default
```



## 詳細

[`vagrant ssh` is noticeably slower than plain `ssh` · Issue #4214 · hashicorp/vagrant (github.com)](https://github.com/hashicorp/vagrant/issues/4214#issuecomment-49551965) のコメントに記載がある通り、この遅延は SSH するために vagrant が行う前処理によるものであり、仕方ないらしい。

[`vagrant ssh` is slow, takes 3+ seconds to connect · Issue #2462 · hashicorp/vagrant (github.com)](https://github.com/hashicorp/vagrant/issues/2462) では vssh という、この前処理をバイパスしているコマンドが配布されていたが、Windows では利用できなかった。「vssh」というコマンドの名前はここから拝借している。
@dataProvider アノテーションが有効にならない

## 発生した事象

データプロバイダが動作せず、以下のような単純なテストコードの実行において「No test executed!」と表示される。


```
/**
* @dataProvider expected
*/
public function test2($int, $int2)
{
   var_dump($int);
   var_dump($int2);
   $this->assertTrue(true);
}

private function expected()
{
   return [
       [1,2],
       [1,2],
       [1,2]
   ];
}
```


以下の stackoverflow の事象と同じだが、記載の方法を試しても解消されない。

[php - PHPUnit @dataProvider simply doesn't work - Stack Overflow](https://stackoverflow.com/questions/10175414/phpunit-dataprovider-simply-doesnt-work)


## 原因

<span>@</span>dataProvider のメソッドのアクセスを private にしていたことが原因だった。

public に変更したところ解消された。


```
Testing started at 3:28 PM ...
PHPUnit 4.8.36 by Sebastian Bergmann and contributors.

int(1)
int(2)
int(1)
int(2)
int(1)
int(2)


Time: 1.37 seconds, Memory: 7.00MB

OK (3 tests, 3 assertions)
```
放物線と円 「22年 北海道教大 2」をsympyでやってみた。 

y=√3/2*x^2に接する円
オリジナルが2つあります。

https://kamelink.com/blog/2022/09/04/12-3-22hokkaidoukyoudai%e3%83%bb2/

https://mathmathmass.exblog.jp/32295795/

上と同じです。大学入試数学問題集成＞

https://mathexamtest.web.fc2.com/2022/202210002/2022100020100mj.html#top-0102

# 公式サイト
解答もあり（pdf）

https://www.hokkyodai.ac.jp/exam/department/past-exam/examination/nyushimondai28.html


# sympyで
以下は,kamelink様を参考にしています。
```python
from sympy import *
var('x y')
C1=sqrt(3)/2*x**2
Px,Py=1,sqrt(3)/2
l=(-1/diff(C1).subs({x:Px})*(x-Px)+Py).expand()
print("#(1)",l)
Cy=0
Cx=solve(Eq(l,Cy),x)[0]
R=sqrt((Cx-Px)**2+(Cy-Py)**2)
print("#(2)",Cx,Cy,R)
S1=Rational(1,2)*(Cx-Px)*Py
S2=acos((Cx-Px)/R)/(2*pi)*pi*R**2
print("#(3)",integrate(C1,(x,0,Px))+S1-S2)
#(1) -sqrt(3)*x/3 + 5*sqrt(3)/6
#(2) 5/2 0 sqrt(3)
#(3) -pi/4 + 13*sqrt(3)/24
```
macにてgatherでカメラの背景を隠す方法

最近社内で[gather](https://www.gather.town/)というアプリを使い始めました。
gather自体の説明はここでは省きますが、リモートワークでのコミュニケーションをより活発にしてくれるのでとても良いアプリです。

gatherでもカメラを使うことはできるのですが、バーチャル背景的なものは標準ではなく、多少のブラー機能が１つだけあるだけでした。
部屋を映したくないって人向けに、バーチャル背景の設定方法を紹介します。
（※macの方対象です。）

# SnapCameraを使うやり方
カメラにエフェクトや背景を設定できるツールで、これを起動しながらgatherのカメラに認識させればいけるかなと思い試してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615451/4eeabb6a-84c0-13a0-9b43-840e3694b7e8.png)
あれ？選択肢にSnap Cameraが出てこないぞ。
macの再起動を試してみましたがだめ。zoomだと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615451/988d30e2-e719-312b-0a5f-1dae4c1080bf.png)
こんな感じで選択肢が出てきているため、zoomでは認識されるがgatherだと認識されていなさそう。（もちろん選択すると想定通り表示されたました。）
アプリの認識をさせやすくするため、Snap Camera -> gatherの順番で起動してみましたがだめ。
他の方の記事を見ると、web版の方でうまくいってそう？
web版で試してみると無事認識されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615451/38e9f0c3-d9ce-c6d4-bef4-3cc5929f858f.png)
公式を調べてみると、特に明記されたのは見つけられなかったが、OBSの使用を推奨しているよう。
https://support.gather.town/help/virtual-background

# OBSを使うやり方
https://obsproject.com/ja/download
公式からOBSをダウンロード
起動すると権限をいろいろ求められるので、とりあえず全部追加（仮想カメラ使うだけなら多分カメラだけで良い）
そうすると

https://obsproject.com/ja/download
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615451/79d3a1da-3a41-2e3b-7fd9-767571f56b77.png)
ソースのところで映像キャプチャを追加。デバイスは内蔵カメラで良い。

いざ実践！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615451/8c7e78af-654a-4b1c-75f1-4558946a26b1.png)
どうやらmacアプリでは他のカメラデバイスは選択できないようです！

OBSは導入コスト高い割にできることは変わらないので、素直にSnapCameraの方が良いです。
（チュートリアルの動画もグリーンバックの背景をリアルで用意してたり、外部ライブラリで切り抜いてくれるなどがあるようですが、SnapCameraでいいじゃんってなりました。）

# 結論
2022年9月時点ではどうしても背景見せたくない人はweb版使いましょう。
（見落としがあるかもしれないので、何かあれば追記します。）
A→株式会社アンペア、E→株式会社エナジーといった入力文字から会社名を返す初歩的なPythonプログラム

会社の研修でPythonを使うことになったので簡単な操作のメモ。
今回はTkinterを用いた入力、ウィンドウ表示について。
(簡単すぎるメモだけど、何も言わないでください)

立花真由美→a001、立花理香→a002、みたいな感じで社員番号を返すものもこれから作る。

# 地域名に対応する挨拶を表示する
日本なら「こんにちは」、アメリカなら「Hello」と表示されるプログラム。
ハワイなら「aloha」とかも入れてみた。
(ハワイ、というか南国に行きたいから)

~~~aloha.py
from tkinter import *
from tkinter import ttk
from tkinter import messagebox

#関数
def get_text(ref_dict):
    text_input = text.get()
    print("地域:",text_input)
    print("挨拶:",ref_dict[text_input])
    messagebox.showinfo("確認", "地域:"+text_input+" 挨拶:"+ref_dict[text_input])
    

#挨拶(日本はこんにちは、アメリカはHello、ハワイはaloha)
hello_dict = {"日本":"こんにちは","ハワイ":"aloha", "アメリカ":"Hello", "中国":"ニーハオ"}

root = Tk()
root.title("世界の挨拶")

#オブジェクト
label = ttk.Label(root, text = "地域名を入れると挨拶を返します")
label.pack()

#テキストの入力
text = StringVar()
entry = ttk.Entry(root,textvariable=text)
entry.pack()

#OKを押すとテキストを取得
button = ttk.Button(root,text="OK",command=lambda:get_text(hello_dict))
button.pack()

#ウィンドウを表示し続ける
root.mainloop()
~~~

まだやっていないこと
・OKを押したらウインドウが閉じる
・辞書に入っていない単語を入れたときにエラーを返す

# 頭文字から会社名を出す
似たような取り組みで、頭文字から会社名を表示するようにした。
一応仕事なのでちゃんと「株式会社」も入れた。
株式会社アンペア、株式会社エナジー、クーロン株式会社みたいに科学関係の単語を使った架空の会社名にしてみた。

~~~company.py
from tkinter import *
from tkinter import ttk
from tkinter import messagebox

#関数定義
def get_text(ref_dict):
    text_input = text.get()
    print("頭文字:",text_input)
    print("会社名:",ref_dict[text_input])
    messagebox.showinfo("確認", "頭文字:"+text_input+" 会社名:"+ref_dict[text_input])
    

#会社名(株式会社エナジー、クーロン、アンペア)
company_dict = {"A":"株式会社アンペア","C":"クーロン株式会社", "E":"株式会社エナジー"}

root = Tk()
root.title("各企業の頭文字")

#オブジェクト
label = ttk.Label(root, text = "頭文字から企業名を表示します")
label.pack()

#テキストの入力
text = StringVar()
entry = ttk.Entry(root,textvariable=text)
entry.pack()

#OKを押すとテキストを取得
button = ttk.Button(root,text="OK",command=lambda:get_text(company_dict))
button.pack()

#ウィンドウを表示し続ける
root.mainloop()
~~~

tkinterはインストールせずとも使えるし、動作も軽いので便利ではある。
ただ、ウィンドウのサイズの指定方法がわからなかったり、デザインが簡素すぎるのでちょっととっつきにくい。

もう少し手軽にウィンドウを表示させるライブラリとかあるのかな。
要調査。
UbuntuでGithub CLIだけがwarning: templates not foundを吐く

ただ単にGithubのissueを解読しただけなので簡潔に

## 症状詳細

Ubuntu20.04にて

```bash
$ gh repo clone sample-github/sample-repository
Cloning into 'sample-repository'...
warning: templates not found /usr/share/git-core/templates
fatal: Unable to find remote helper for 'https'
exit status 128
```

しかし普通にgitを使ったcloneではうまく行く。

```bash
$ git clone https://github.com/sample-github/sample-repository.git
Cloning into 'sample-repository'...
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 7 (delta 0), reused 4 (delta 0), pack-reused 0
Unpacking objects: 100% (7/7), 975 bytes | 975.00 KiB/s, done.
```

どういうことなの……？

## 最終的解決内容

snapではなくLinuxbrewのパッケージに変更した。

```bash
sudo snap remove gh
brew install gh
```

Linuxbrewのインストールは以下を参照。

https://qiita.com/tetusan/items/f2ca37147aafe28f7884

https://brew.sh/

ログイン(`gh auth login`)の後、確認

```bash
$ gh repo clone sample-github/sample-repository
Cloning into 'sample-repository'...
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 7 (delta 0), reused 4 (delta 0), pack-reused 0
Unpacking objects: 100% (7/7), 975 bytes | 325.00 KiB/s, done.
```

### 原因

以下のissueにまるまる答えがあった。
つまるところ、snapパッケージに問題があったということ。

https://github.com/cli/cli/issues/3185

> Oh, then the problem is when gh runs as a snap. For that, you will have to contact the snap author and let them know of bugs that arise when using the snap.
> In our experience, trying to package CLI apps as snaps is more trouble than it's worth, and I would suggest installing them "normally" instead, usually via deb packages or Homebrew. You will notice that we never listed snaps as a viable installation method in our documentation.

(大幅な意訳↓)

> つまりsnapからインストールされたghが実行される場合が問題ということですね。これを解決するには、snapパッケージの作成者にバグを報告する必要があります。
> 経験上、CLIアプリケーションをsnapパッケージ化するには価値に見合わない労力が必要なので、snapからではなく「普通に」、すなわちHomebrewやdebパッケージからインストールすることをおすすめします。

これが今に至っても治っておらずさらに後述の通りglabでも同様のバグがある、ということはやはりsnap独自のシステムに問題があるのだろう。以下の記事でも指摘されている。

https://qiita.com/ynott/items/41f4a511ff5bc1881a9b#2-%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88cons

### debパッケージからインストールする場合

<details><summary>snapが使えるならたいていLinuxbrewも使えると思うのでHideにしておきます</summary>

[GithubのReleases](https://github.com/cli/cli/releases)から自分のコンピュータに見合うパッケージをダウンロード。

ダウンロードしたら、保存先で
```bash
sudo apt install ./gh_*
```
を叩けばインストール完了。

</details>

## おまけ：glabの場合

[glab](https://glab-cli.io)(GitLabのCLIツール)でも同様の症状がおきたので参考までに。

```bash
$ glab repo clone gitlab-tests/sample-project
Cloning into 'sample-project'...
warning: templates not found /usr/share/git-core/templates
fatal: Unable to find remote helper for 'https'
exit status 128
```

同様に

```bash
sudo snap remove glab
brew install glab
```
ログイン(`glab auth login`)後、確認

```bash
glab repo clone gitlab-tests/sample-project
Cloning into 'sample-project'...
remote: Enumerating objects: 12, done.
remote: Total 12 (delta 0), reused 0 (delta 0), pack-reused 12
Unpacking objects: 100% (12/12), 30.71 KiB | 6.14 MiB/s, done.
```

## まとめ

特にCLIアプリについては、可能な限りsnapからのインストールは避けよう。
データを管理するシステム

# データベースとは
ソフトウェアは、大量のデータを扱うときにデータベースを使用する。
データベースとは、**構造的に整理されているデータの集合体**。
# データベースとDBMS
データベースとはあくまで「データの集合体」であり、それ自体にデータを操作するようなシステムはない。実際に操作するのは**データベース管理システム(データベースマネジメントシステム「DBMS」)**。データベースに命令する際に使われる言語の一つが、**SQL**。SQLは標準化されているため、どのDBMSも概ね同じ書き方をする。
# DBMS(データベースマネジメントシステム)
DBMSには有償のものと無償のものがある。
有償のDBMS・・・Oracle Database,SQL Server
無償のDBMS・・・My SQL,PostgreSQL,MariaDB
それぞれのDBMSの機能で大きな違いはないものの、一部機能や速度、安全性、スケール化など得意とする機能に若干違いがある。
大規模なシステムの場合は、サポートを受けやすいことから、有償のDBMSを選ぶことが多く、小規模のシステムの場合はコストのメリットから無償のDBMSを選ぶことが多い。
# RDBと非RDB
データベースは大きく分けて、リレーショナル型のデータベース(RDB)と非リレーショナル型のデータベース(非RDB)がある。
## リレーショナル型
住所録や台帳のように表形式を取り、データの種類や細部まで設定するため、準備に時間がかかるが、その分高度な操作ができる。データに対する操作にはSQLを使用する。
## 非リレーショナル型
構想が単純であるため、素早く構築できる。複雑なことはできないが、アクセスが高速。代表的な仕組みにキーバリュー型やドキュメント型がある。SQLを使用しないため、「NoSQLデータベース」と呼ばれる。

AWSではRDB・非RDBのどちらもを提供している。
RDBのサービスは**Amazon RDS**。
非RDBのサービスは、**Amazon DynamoDB,Amazon ElastiCache**がある。
litでdata属性を動的につける

# 結論
```ts
<div data-hoge=${this.isHoge ? 'hoge' : 'piyo'}>data属性を持つ要素</div>
```

# 気をつけるポイント
- data属性をつける判定に使う変数をreactiveな変数にしておく
    - propertyやstateなどにしておけばOK
- ${}の中で三項演算子で書けばOK

# コード例
```ts
import { LitElement, css, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'


@customElement('data-attribute-example')
export class DataAttributeExample extends LitElement {

	@state()
	isHoge = true

	private changeHoge() {
		this.isHoge = !this.isHoge
	}

	render() {
		return html`
		<div class="hoge" data-hoge=${this.isHoge ? 'hoge' : 'piyo'}>data属性を持つ要素</div>
		<button @click=${this.changeHoge}>data属性の変更</button>
		`
	}

	static styles = css`
	.hoge {
		margin: 1em;
	}

	button {
		border-radius: 8px;
		border: 1px solid transparent;
		padding: 0.6em 1.2em;
		font-size: 1em;
		font-weight: 500;
		font-family: inherit;
		background-color: #f1f0f0;
		cursor: pointer;
		transition: border-color 0.25s;
	  }
	  button:hover {
		border-color: #646cff;
	  }
	  button:focus,
	  button:focus-visible {
		outline: 4px auto -webkit-focus-ring-color;
	  }
	  `
}
```

## クリック前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/ac7ff268-41e3-5329-5195-a6c12014595e.png)


## クリック後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529362/e6837d7c-74ae-a9f5-907c-4a2f9c49c4f4.png)
組織文化が決まる瞬間 (Who You Are)

>組織の誰もが「どうしてだ？」と思うことに対して、どう答えるかで文化が決まる。というのも、その答えはみんなの記憶に残るからだ。新人が入るたびにその説明が繰り返されることになるし、その説明は組織文化の中に織り込まれる。新人兵士は、「妾をとってはいけない理由をもう一度説明してもらえませんか？」と聞くはずだ。その答えは、「この軍隊では、約束が何よりも重要だから。妻との約束を守れないなら、私たちとの約束を守れるはずがない」というものだ（ただし、ルーベルチュールにも婚外子がいたので、事はややこしかった。完璧なリーダーなどいないので、仕方がない）。

ベン・ホロウィッツ. Who You Are（フーユーアー）君の真の言葉と行動こそが困難を生き抜くチームをつくる (Japanese Edition) (Kindle の位置No.653-656). Kindle 版. 

# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura