OmniAICreator/Qiita-1.07M huggingface dataset:
ｃ言語超初心者が適当なコードでカウンターをつくる！

### こんにちは
いつもはjavascriptでコードを書いてる人が1日ｃ言語を勉強するどうなるのかやってみました
これは、カウンターっていうよりかはただの上キー長押しで数増えたりするだけのものです
そして結局コードはこんな感じ

```index.c
#include <stdio.h>
#include <windows.h>
int main(void) {
    int count = 0;
    printf("************************************************\n");
    printf("**キーボードでスペースキーを押したら終了します**\n"); 
    printf("****************上キーでcount→UP****************\n"); 
    printf("***************下キーでcount→DOWN***************\n");
    printf("************************************************\n");
    while(1) {
        if(GetAsyncKeyState(VK_UP) & 0x01 ) {
            count++;
            printf("%d",count);
            printf("\n");
        }else{
            if(GetAsyncKeyState(VK_DOWN) & 0x01 ) {
                count--;
                printf("%d",count);
                printf("\n");
            }else{
                if(GetAsyncKeyState(VK_SPACE) & 0x01 ) {
                    printf("終了します\n");
                    break;
                }
            }
        }
        Sleep(1);
    }
}
```

実行したらコメントが表示されて上キーと下キーで数をかえれるものです
なんかまだ学びたい気もするのでなにかあったらコメントお願いします
MySQL 指定したテーブルだけdumpを取得したい

## はじめに
やりたかったこと。バックアップとしてdumpファイルを取得したいけど、特定のテーブルのバックアップだけが欲しい。

特定のテーブルに変更を加える作業がある場合、事前にdumpをとっておくことはよくあると思います。もし、問題があったときにdumpで作業前の状態に戻したいけど、他のテーブルはユーザーが触ってデータが増えているかもしれないからテーブル全てを作業前に戻したくはない。
といった場面など。。


## 環境
・docker
・MySQL v.8.0.27

## 結論
データベース名の後にテーブル名をつけるだけです。
```
mysqldump --single-transaction -u {ユーザー名} -p {データベース名} {テーブル名} > {dumpファイル名}
```
流し込む時もそのままdumpファイルを指定して流すだけでOKです。

```
mysql -u {ユーザー名} -p {データベース名} < {取得したdumpファイル名}
```

## 検証
データベース名の後にテーブル名をつけるだけだけですが、一度も使ったことないことを実践で使うのは怖いので検証します。(※筆者はかなりビビリ)

### ⓪前準備

#### DB作成
dump_test_dbというデータベースを用意。
```
CREATE DATABASE dump_test_db;
```
#### テーブル作成
ageテーブルとnameテーブルを用意を行っておきます。
![スクリーンショット 2022-03-06 16.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/c8eaf9d4-59b7-c358-1b93-317fd0c8df12.png)

#### nameテーブル作成

```
CREATE TABLE names(
 id INT(11) AUTO_INCREMENT NOT NULL,
 name varchar(256) ,
 updated_at datetime,
 created_at datetime,
 PRIMARY KEY (id));
);
```
INSERT文でデータ作成。中身は適当です。
```
INSERT INTO 
 names(name, updated_at, created_at) 
values
 ("Y.K",now(),now()),
 ("T.A",now(),now()),
 ("U.K",now(),now());
```
![スクリーンショット 2022-03-06 16.20.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/6097e758-1bad-7471-39f0-29f4b32f7890.png)
無事、nameテーブルとデータが作成されました。
#### ageテーブル作成
```
CREATE TABLE ages(
 id INT(11) AUTO_INCREMENT NOT NULL,
 age INT(11) NOT NULL ,
 updated_at datetime,
 created_at datetime,
PRIMARY KEY (id));
);
```
INSERT文でデータ作成。中身は適当です。
```
INSERT INTO ages(age,updated_at,created_at) values(10, now(), now()),(20, now(), now()),(30, now(), now());
```

![スクリーンショット 2022-03-06 16.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/8bab24ce-1c7a-a664-632b-289367b98e5d.png)
無事、ageテーブルとデータが作成されました。


### ①dumpを取得
dumpは検証用に2つ取ります。
#### 1.全テーブルのデータの取得
```
mysqldump --single-transaction -u root -p dump_test_db > sql_dump_all;
```
#### 2.nameテーブルのみのデータの取得
```
mysqldump --single-transaction -u root -p dump_test_db names > sql_dump_name_only;
```

### ②.各テーブルのレコードのデータ変更

nameテーブルとageテーブルを変更します。
``` 
UPDATE names SET name = "changed" WHERE id = 1;
```
![スクリーンショット 2022-03-06 16.34.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/daca88ba-23fe-06f8-fc1c-e38b05dfb401.png)
nameテーブルのid:1が変わりました。
次にageテーブルを変更します。
```
UPDATE ages SET age = 2022 WHERE id = 1;
```
![スクリーンショット 2022-03-06 16.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/66dc5885-b370-8bf1-4db9-831b5fff61db.png)
ageテーブルのid:1が変わりました。

### ③dumpの流し込み
では、本題に入ります。テーブル指定をしたdumpファイルを使って、nameテーブルのデータだけを変更前の状態に戻します。
```
mysql -u root -p dump_test_db < sql_dump_name_only;
```
![スクリーンショット 2022-03-06 16.37.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/e83be8c2-23be-a8d0-cea6-87e5fcb243cc.png)


nameテーブルだけ変更前の状態に戻ってageテーブルは変更後のままですね！

### (全テーブルのデータを取得したdumpを流し込む)
念の為、全テーブルのデータを取得したdumpを流して元に戻ることも確認しておきます。
```
mysql -u root -p dump_test_db < sql_dump_all;
```

![スクリーンショット 2022-03-06 16.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/c2527e59-e159-a267-8ac1-8d54897b93d2.png)
当たり前ですが、nameテーブルとageテーブルのどちらも元の状態に戻っていますね！
Gitの基礎的な操作方法

# Gitの基礎的な使い方
Gitの基礎を自分なりにまとめて、ブランク明けでも操作を思い出せるようにしておきます。
※初学者のため実用的でない、間違った使い方をしている等あるかと思いますが是非ご指摘ください。

それでは一覧のコマンドを実際の作業の流れ通りに記述します。


## 既存リモートリポジトリを編集したい場合
### 1. リモートリポジトリからローカルリポジトリに持ってくる(clone)
まず、ローカルで作業するために、リモートリポジトリの内容を反映します。
```
git clone URL(SSH)
```

### 2. 作業のためにリポジトリを分岐させ移動(branch)
_新たな機能の追加などの作業を行う。_

```
git branch ブランチ名
git checkout ブランチ名

〜 省略した書き方 〜
git checkout -b ブランチ名


git-flowと呼ばれる基本的な構成
main　　　 ・----・------------・
     　　  | 　              /
develop ・--------・------・
     　　    | 　   /      /
feature/~ ・-- /      /
     　　    | 　       /
fix/~     ・-------/

ブランチを切る目的に合わせて、branch名をつける習慣があるらしいです
機能追加ブランチ：feature/~
バグ改善など、修正ブランチ : fix/~
```



### 3. 新規追加・変更したファイルの確認(status)
```
git status
```

### 4. インデックス(ステージングエリア)に変更ファイルの追加(add)
```
git add file1.txt 
複数記述も可能
git add file2.txt file3.txt file4.txt
一括追加
git add .
```

### 5. ローカルリポジトリに変更を反映(コミット内容を書きましょう)(commit)
```
git commit -m 'Commit内容'
```

### 6. リモートリポジトリにbranchを反映(push)
```
git push origin 操作したブランチ名
```
### 7. リモートリポジトリで操作したブランチをdevelopブランチにPull Request(GUI)
### 8. Conflictなどを解消したらmerge(GUI)
## コミット粒度とは
しばしば、適切なコミット粒度という言葉を見かけます。
一応現在の見解をまとめておきます。参考文献から
なんじゃそりゃと思いググると
- RPGでいうセーブ機能
- TODO単位でコミット

### コミット粒度が適切でないとどうなる？？
* 頻度が少なすぎる場合
　- 戻りたい開発段階に戻れない.
* 頻度が多すぎる場合
　- コミットログが肥大化
　- コミットメッセージを毎回考えないといけない

## ローカルリポジトリを作成して、リモートに反映させたい場合
### I. リポートに反映させたいディレクトリをgitリポジトリに(init)
まず、対象ディレクトリに新規リポジトリを作成します。
「. git」というリポジトリを構成するディレクトリが作成されます。
```
git init
```

### Ⅱ. ローカルリポジトリに指定したリモートリポジトリを追加
ローカルとリモートを接続するイメージです。
```
git remote add origin URL(SSH)
接続先のリモートリポジトリを確認
git remote -v
```
### 2~8を繰り返す

## おまけ
### 利用したことありませんが、forkについて
**fork** ：書き換え権限のないrepositoryを複製し権限のあるrepositoryを作成。
### 現在のローカルリポジトリのリモートリポジトリURLを確認
```
git remote -v
```
### もしなんらかの不具合で想定外のリポジトリをいじっていた場合
```
git remote set-url origin {想定しているURL(SSH)}
```





## 最後に
今回は初学者ながらも、Gitの一番基礎的な利用方法についてまとめてみました。
issueについても今後理解を深めることができたら続きを出そうと思います。




## 参考文献
- [【初心者向け】「コミットの粒度がわからない問題」の模範解答を考えてみた](https://qiita.com/jnchito/items/40e0c7d32fde352607be)
- [forkしてcloneしてbranch切ってpullしてcommitしてpushしてpull requestしてmergeしてもらおう](https://uraway.hatenablog.com/entry/2015/11/26/fork%E3%81%97%E3%81%A6clone%E3%81%97%E3%81%A6branch%E5%88%87%E3%81%A3%E3%81%A6pull%E3%81%97%E3%81%A6commit%E3%81%97%E3%81%A6push%E3%81%97%E3%81%A6pull_request%E3%81%97%E3%81%A6merge%E3%81%97%E3%81%A6)
SESSIONとCookieの違いとログイン処理

「SESSIONとCookieの違いってなんだろう？」をまとめてみたのと、一緒に利用されているログイン処理についての備忘録。

## SESSION とは
サーバー側で保有している、ユーザーと紐ずくデータをサーバー側に一時的に保存できる仕組みの事。

### SESSIONが使われる例
複数のページ間で情報を共有する必要がある「ログイン」「アンケートフォーム」などで利用される。

## Cookieとは
ブラウザ側で保有している、ユーザーが選択した情報やSESSION IDなどをブラウザ側に一時的に保存できる仕組みの事。

### Cookieが使われる例
ブラウザを閉じても一定期間ブラウザ側に保存されるので、ログイン機能と合わせて利用されたり、
オンラインショッピングのカートの中身情報などを保存する目的などで利用される。

## PHPのログイン処理
1. SESSIONを生成して、サーバー上で**SESSION ID**を発行する
2. SESSIONを生成したブラウザのCookieに**SESSION ID**を書き込む
3. **SESSION変数** を **SESSION ID**とリンクさせてサーバー上に保存する
4. ページ移動時はブラウザのCookieから**SESSION ID**を取り出して、SESSIONを生成したブラウザか判断する（SESSIONの復元）
5. SESSIONを生成したブラウザ（同じ**SESSION ID**を持つブラウザ）であれば、サーバー上に保存されている**SESSION変数**へのアクセスが可能になる
6. ログアウト時はサーバー上の**SESSION ID**、保存されている**SESSION変数**、ブラウザのCookieに保存されている**SESSION ID**を削除してSESSIONを終了する



### 参考サイト
[(PHP) SESSIONとCookieの違い【使い方・使い所なども解説】](https://hara-chan.com/it/programming/session-cookie-difference/)

### 参考文献
オフィス加減 著　「つくって覚えるPHP入門」　P.166 - 167
SQLserverでTableをコピーする方法

※こちら初心者記事です

SQLserverでTableをコピーする方法を紹介していきます！

・元となるテーブル名は【TableKizon】
・新規テーブル名は【TableCopy】

書き方は、
SELECT *INTO 【新規テーブル名】
FROM 【コピー元テーブル名】


`
SELECT *INTO TableCopy
FROM TableKizon
`
Vue-routerでSPAにした際のapache（.htaccess）設定の覚書

vue-routerを使ってSPAをリモートサーバにデプロイしてみたところ、
ローカルでは問題なかったページリロードで404が返り、「？？」となりました。

調べてみたところ、公式に設定方法が記載されていたので、
https://router.vuejs.org/guide/essentials/history-mode.html#html5-mode
設定しようとして、少しハマりましたので備忘録残します。

---

CentOS8環境上のapacheで、まず、`httpd.conf`の記述で少しハマりました。

```
<Directory /var/www/dir>
  AllowOverride All
</Directory>
```
をまず設定してやることが必要でした。`.htaccess`の適用のために。（その他のオプションは割愛）
また、`/var/www/dir`の部分は、公開ディレクトリルート設定なので、環境に合わせて変える必要があります。

まずここがハマりどころでした。

---

次に、肝心の`.htaccess`の内容は、公式にある以下のような記述でとりあえずOKでした。
これで直接ページにアクセスしても404にならなくなってよかった。

```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

あとはSPAと直接関係ないですが、ついでに、`.htpasswd`でパスワード保護などもかけてみました。
一緒に`.htaccess`で手軽に設定できたのでよかったよかった。
(httpdの再起動も忘れずに)

備忘録デシタ。
RustとPythonで使える日本語GPT2モデルを公開

Rust言語からでも使える日本語GPT2モデルをHuggingfaceのTransformersモデルハブに公開した。
Rinna社が日本語GPTモデルを公開してるが、Rustでは使えない。
それで、このモデルを青空文庫の夏目漱石集でファインチューニングしてRustやPythonで使えるようにした。
[このモデルです。jweb/japanese-soseki-gpt2-1b](https://huggingface.co/jweb/japanese-soseki-gpt2-1b)
このモデルカードにPythonとRustで使用できるソースコードがあります。
実際にRustでbuildして"夏目漱石は、"と入力して実行すると以下のようになりました。
~~~~
夏目漱石は、明治から大正にかけて活躍した日本の小説家です。彼は「吾輩は猫である」や「坊っちゃん」、「草枕」「三四郎」、あるいは「虞美人草」などの小説で知られていますが、「明暗」のような小説も書いていました。
~~~~
元のモデルの出来がいいせいか、かなりちゃんとした文章を自動生成します。
[詳しい説明はこのjweb.asiaのサイトで](https://jweb.asia/26-it/ai/75-rust-finetuned-gpt2.html)
[更にPythonの初心者も、Jupyter Notebookで手軽に試せます。](https://jweb.asia/26-it/ai/76-gpt2-notebook.html)
raspberryPIでopenCVをインストール

<H1>【追記】はじめに</H1>
こちらのopencvは画面録画で　<strong>「foucrr(*"mp4v")」ができません。</strong>

 <i>「forurcc(*"XVID")」はできます。</i>

mp4形式でどうしても録画したい方は完全版のopencv-contrib-pythonを使う必要があるので、
[こちら](https://qiita.com/naoppy/items/8a2178383859178e6d7e)の記事を参考にインストールしてください。依存関係はすべて入れたほうがいいです。
ちなみに、筆者はバージョン「4.5.1.48」でイケました。

<H1>前提条件　</H1>
このページにたどり着く前にopenCVのインストールにチャレンジしていますか？

`pi@raspberrypi:~ $ pip３ list` を実行した際に、
`opencv`を含む文字を見つけた方は、以下のコマンドから削除してください。

```delete.terminal
pi@raspberrypi:~ $ pip3 list
olefile           0.46
opencv-python     4.5.5.28    <-(1)opencvを含む文字列を下記コマンドに記入
opencv-contrib-python 4.5.1.48  <-(2)opencvを含む文字列を下記コマンドに記入
pantilthat        0.0.72
parso             0.8.1

(1)の場合。(2)の場合はopencvのあとに文字を追加してください。
pi@raspberrypi:~ $ pip uninstall opencv-python
```
:::note info
テキストエディタで「opencv」を検索することを推奨します。
:::

<h1>取得作業</h1>

```install.terminal
２行目は３行目のエラー回避
３行目はバージョンを指定しています。このバージョンだとなんかイケます。

pi@raspberrypi:~ $ pip install --upgrade pip
pi@raspberrypi:~ $ pip install numpy --upgrade 
pi@raspberrypi:~ $ pip install opencv-python==4.3.0.38
```

これでpython3を起動して、エラーを吐かなければ成功です。
```result.py
import cv2
print(cv2.__version__)
```

<h1>あとがき</h1>

GUIベースで操作していると、画面が突然暗くなり操作不能に陥るので、
**リモートCUI操作がおすすめです。**
macユーザーは下記のコマンド、winユーザーはTeraTermとか使用してください。
```mac.user
ssh pi@raspberrypi.local
```

欲張ってopencv-contrib-pythonのインストールをしようとすると、
`ImportError: libhdf5_serial.so.103: cannot open shared object file: No such file or directory`
にぶち当たり泣きを見ました。対策が記されているQiitaがありましたが、うまくできんかったです。

インストールできなくて丸３日くらい使いました。まじで疲れた。
なんかバージョンによってはコンパイルが必要とかでインストールが進まないことがあるそうです。

fourcc(*"mp4v")を使用するのにちゃんとコンパイルしてみたりしたけど98%でメモリ不足による強制終了にぶち当たり、うまくできませんでした。
メインマシンでコンパイルしてたくても、アーキテクチャなどの関係でうまくできませんでした。

最近はUnityにハマってるのでUnity,C#備忘録もそろそろ書きたいですね。



<h1>参考文献</h1>
追記部分URLはこちら

https://qiita.com/naoppy/items/8a2178383859178e6d7e

それ以外のURLは下記です。

https://qiita.com/wk_/items/8db529a6b24a955888db

https://qiita.com/morichu78/items/1575299e6676450c47ed
Next.jsを使ってみる！create next-app


### Next.jsとは？
Next.jsは、高速な`Webアプリケーション`を作成するためのビルディングブロックを提供する柔軟なReactフレームワークです。


最初にディレクトリーを作りましょう

```
mkdir next-test
cd next-test
```
Next.jsのプロジェクトを作成します。

```
npx create-next-app

yarn create next-app
```

途中でプロジェクトの名前を問われるのですが名前はなんでもいいです。そのまま名前を入れずにEnterを押すと`my-app`という名前で新しいディレクトリーが作られて、この中に各ファイルがダウンロードされます。

中身はこんな感じ
```
.
┝ node_modules
┝ pages
│　┝ api
│　┝ _app.js
│　└ index.js
┝ public
┝ styles
┝ .eslintrc.json
┝ .gitignore
┝ next.config.js
┝ package.json
└ README.md
```

中身の詳細はまた別で投稿します。

```
cd my-app
yarn dev
```

`yarn dev`を行うと、ターミナルで

```
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1169 ms (124 modules)
wait  - compiling...
event - compiled successfully in 17 ms (97 modules)
wait  - compiling...
event - compiled successfully in 8 ms (27 modules)
```
と表示されます。　　
http://localhost:3000
リンクにアクセスしましょう！

アクセスすると
![スクリーンショット 2022-03-04 15.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2542657/f6a481e6-7e46-949e-6791-f586f7b9b643.png)

と出てきます。


https://qiita.com/kubota20/items/67c102b422097851ef0e
Cloud Functionsをデプロイするgcloudコマンドを.batファイルにまとめて微調整&流用を自在に

# Github Action、Cloud Buildなど試したがが・・・
Cloud Buildは[バグ](https://github.com/GoogleCloudPlatform/docker-credential-gcr/issues/73)があるようで行き詰りました。
Guthub Actionsといっても**コミット前に**
- credential省略などちゃんGoogle Cloud環境上特有の設定周りについてもエラーがない状態を確認してからcommitしたい
- イベントトリガーで繋げるようなFunctionsはdeploy後に挙動を確認したい

など、つまり実際にDeployして最終確認してからレポジトリを汚したいこともあり、違うなと。

# .batファイルで可読性を保ちながら流用
gcloudなら実例が比較的多いし、Actionsと違ってcommit前に実際にデプロイしてみて確認するが容易。
ただし、いちいちPowerShellに記述していくのも面倒なので、バッチにしてついでにレポジトリにも混ぜて誰でもダブルクリックで利用できるようにしてみた。

```bat:deploy.bat
REM ファイルのカレントディレクトリに移動
cd /d %~dp0

REM 筆者の都合上インスタンスを1に絞っている
REM とあるバケットのdeleteをトリガーにしている

gcloud functions deploy FUNCTION_NAME ^
--region=asia-northeast1 ^
--entry-point MAIN_FUNC_NAME ^
--runtime python39 ^
--trigger-resource=BUCKET_NAME ^
--trigger-event google.storage.object.delete ^
--set-env-vars=ENV_KEY=ENV_VAL ^
--max-instances=1 ^
--min-instances=0 ^
--retry ^
--timeout=540 ^
--ignore-file=.gcloudignore
```
中央集権的な管理方法ではないが、個人レベルや、特に開発初期の段階では非常に便利なので、この方法に落ち着いて大満足。
# .gcloudignoreを忘れないように
Functions構成フォルダと同じディレクトリにbatファイルを置く場合は(そうじゃなくても__pycashe__/あるし)`.gcloudignore`を、そしてそこにバッチファイルを含めることを忘れないように。
```.gcloudignore
deploy.bat
__pycache__/
.gcloudignore
```

# あとがき
バッチファイルにしてみて、これが本来の用途だったということに気づいた。そうっすよね、みんな一々イチからこんなに細かくコマンド書きませんよね。別にCLIもバッチも初めてじゃないのになんで気づかなかったんだろう・・・。
「Cloud Functionsのソース更新面倒くせ〜」からCI/CDに行ってしまって迷走した。self-taughtな開発者の虚しい逡巡。
しかし、yamlなどが勉強できたのでよしとする。
Lightning Web コンポーネント（lwc）とは 〜プロパティ公開編〜

## lwcのプロパティ公開

lwcで複数コンポーネントを連携する際の、プロパティ公開について書きます。

## 変数の公開方法

1.子コンポーネントのJSで公開したい変数に```@api```デコレータをつける
例

```
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
    @api itemName;
}
```

<br>
<br>
2.親コンポーネントのHTMLで値をセットする

例

```
<template>
    <c-todo-item item-name="Milk"></c-todo-item>
    <c-todo-item item-name="Bread"></c-todo-item>
</template>
```

### 補足

- 命名
    - JSのプロパティ名はキャメルケース
    - HTMLのタグ属性名はケバブケース
- 実践的な使い方
    - 親コンポーネントのJSで定義した配列を、for:eachで回して子コンポーネントの公開プロパティに値をセットするのが一般的とのことです
- サンプルコード引用元
    - [Compose Components - Salesforce Lightning Component Library](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_compose)


## メソッドの公開方法

1.子コンポーネントのJSで公開したいメソッドに@apiデコレータをつける
例

```
　// getter
    @api
    get メソッド名() {
        const 返り値 = 代入値;
        return 返り値;
    }

    @api
    メソッド名() {
　　　       処理
    }
```

<br>
<br>
2.親コンポーネントのJSにハンドルメソッドを作る

例

```
    handle子コンポーネントのメソッド名() {
        this.template.querySelector(‘c-子コンポーネントのテンプレート名’).子コンポーネントのメソッド名();
    }
```

<br>
<br>
3.親コンポーネントのHTMLでハンドルメソッドを呼び出す

例

```
<button onclick={ハンドルメソッド名}>ボタン</button>
```

### 補足

- メソッドは引数を渡すこともできます

#### ```this.template```について

- ```this.template```とは
    - 各コンポーネントが所有する要素にアクセスできる

#### ```querySelector()```について
- ```querySelector()```とは
    - 引数にマッチするDOM Elementsの配列を返却するメソッド
    - 子コンポーネントにアクセスし、そのコンポーネント上のメソッドを呼び出すのに便利
- tips
    - 子コンポーネントを配列のループなどで回している場合は、class や data-* などの属性を追加して目的の要素にアクセスできる
    - querySelector()のようなクエリメソッドにidを渡してはいけない
        - HTML テンプレートがレンダリングされるとき、id 値はグローバルに一意な値に変換される可能性があり、JSで id セレクタを使用した場合、変換された id とズレることがあるため
- docs
    - [Element.querySelector() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)
    - [Element.querySelectorAll() - Web APIs | MDN](developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll)


## 参考文献

- [Lightning Web コンポーネントでのイベントの処理 単元 | Salesforce Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics/handle-events-in-lightning-web-components)
- [Lightning Web コンポーネントへのスタイルとデータの追加 単元 | Salesforce Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics/add-styles-and-data-to-a-lightning-web-component)
- [Introducing Lightning Web Components - Salesforce Lightning Component Library](https://developer.salesforce.com/docs/component-library/documentation/en/lwc)
メタプログラミングRuby オブジェクトモデル

この章では、オブジェクトモデルとメソッドについて基礎的、そして重要なことが多く述べられています。
それを今回はアウトプットを兼ねて紹介していこうとおもいます。

※この記事ではメソッドという言葉が出てきますが、原則としてインスタンスメソッドを指します。
クラスメソッドを指す時は、明示して記述します。

## オブジェクトの中身
### インスタンス変数
まずは以下のコードを見てください。
```
class Example
  def ex_method
    @ex = 1
  end
end

obj = Example.new
obj.class # => Example
```
ここで大事なのが、**インスタンス変数はオブジェクトに含まれているということです。**
実際に確かめてみましょう
```
obj.ex_method
obj.instance_variables #=> [:@ex]
```
### メソッド
オブジェクトはメソッドも持っています。そして同じクラスを持っているオブジェクトはメソッドも共通している。要は、メソッドは、オブジェクトではなく、クラスに存在しているんです。
これは、見ればわかりますよね。
```
class Example
  def ex_method
    @ex = 1
  end
end
```
この書き方からも分かる通り、メソッドはクラスに存在しています。

## クラスの中身
ここで大事なことを述べます。一番大事なのは、
**クラスはオブジェクトである**ということです。
クラスはオブジェクトである、といわれてもピンとこない方がいらっしゃるかもしれませんので、実際に確かめてみましょう。
ぼくらがよく知っているArrayクラス、Stringクラスを例に見てましょう
```
Array.class #=> Class
String.class #=> Class
```
つまり、StringクラスやArrayクラスは、Classクラスのオブジェクトであるということが言えます。
「メソッド」の部分でも述べたように、オブジェクトでのメソッドは、そのクラスのインスタンスメソッドです。
ということは、クラスのメソッドは、Classクラスのインスタンスメソッドです。
実際に確かめてみましょう。
```
Class.instance_methods(false) #=> [:new, :allocate, :superclass]
```
クラスを生成する際に使われるnewメソッドは実は、Classクラスのインスタンスメソッドだったんです。

## モジュール
では、Classクラスの親クラスは何なのでしょうか？
```
Class.superclass #=> Module
```
個人的にこの章で驚いたのが、Classクラスの親クラスはModuleだったことです。このことから、すべてのクラスはModuleであることが分かるんです。
そして、ClassやModuleは定数なんです。

## 定数について
定数は大文字で始まるものです。そのためModuleやClassは定数といえるんです。
定数の特徴は独自のルールに従っているんですね。以下の例を見てください
```
Module MyModule
  MyConstant = "外側にある定数"

  class Myclass
    MyConstant = "内側にある定数"
  end
end
```
ディレクトリ構造で示すとこのような形になります。
```
MyModule/MyConstant
MyModule/MyClass/MyConstant
```
同じ名前のMyConstantでも入っている値は違います。ディレクトリ構造に似ていますね。
このようにネストできる定数を1個に特定できます。その際にはコロン2個使います。
実際に書いてみましょう
```
module M
  Constant = "外側にある定数"

  class Example
    Constant = "内側にある定数"
  end
end
M::Constant #=> "外側にある定数"
M::Example::Constant #=> "内側にある定数"
```

## オブジェクトとクラスをまとめてみる
オブジェクトとは、インスタンス変数の集合体で、クラスとつながっているものです。
クラスとは、Classクラスのオブジェクト(インスタンス)であり、そこにインスタンスメソッドがあり、親クラスがあるものです。
そしてClassクラスはModuleクラスの子クラスです。

個人的な感想ですが、オブジェクトを言葉で説明しようとすると結構難しいとおもいます。
抽象的概念だし、rubyにおいてはあらゆるものがオブジェクトだからです。

以上です。何か間違いがございましたら、ご教示いただけますと幸いです。

【参考文献】

https://www.amazon.co.jp/%E3%83%A1%E3%82%BF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0Ruby-%E7%AC%AC2%E7%89%88-Paolo-Perrotta/dp/4873117437
帰ってきたdiscord.py

昨年の8月に、私は[Qiitaでの記事](https://qiita.com/apple502j/items/f9ec29cb40a20c9f4059)にて「とあるネコ型ロボットのお話の「最終回」と違って、これには次号がないようです。」と書きました。その後たくさんのフォークプロジェクトが生まれました。バージョン2.0はリリースされず、最新バージョンの1.7.3は2か月もしない間にAPIの廃止で壊れてしまう運命でした。しかし、discord.pyは帰ってきました。開発者のDanny氏がネコ型ロボットかという問題は置いといて、とりあえず本人がGistを用意しているようなので、一度でも、機械翻訳でもいいので、以下の文章を読むことをお勧めします。

https://gist.github.com/Rapptz/c4324f17a80c94776832430007ad40e6

後で翻訳したいのですが、それ以前に破壊的変更をドキュメントしないといけないので...
React.lazy()を使った条件分岐でコンポーネントを表示する方法

# やりたいこと
条件分岐でコンポーネントを表示させたい！
React.lazy()を使ってみる。React.lazyは動的にコンポーネントをimportすることができる。

下記の記事をためしてみた。

https://numb86-tech.hatenablog.com/entry/2020/01/05/175743

# React.lazyの基本
## Acomponent.jsxとBcomponent.jsxを用意
Acomponent.jsx

```react
import React from "react";

export default Acomponent = () => {
  console.log("Acomponent");
  return <h1>A</h1>;
};
```
Bcomponent.jsx

```react
import React from "react";

export default Bcomponent = () => {
  console.log("Bcomponent");
  return <h1>B</h1>;
};
```

## 普通にコンポーネントを使う場合
App.jsx

```react
import React from "react";
import Acomponent from "./Acomponent";
import Bcomponent from "./Bcomponent";

export default function App() {
  return (
    <div>
      <h1>import component usual</h1>
      <Acomponent />
      <Bcomponent />
    </div>
  );
}
```

## React.lazy()を使ったコンポーネントの使用
AcomponentとBcomponentが読み込みに時間がかかるとする。
React.lazy()を使うと、読み込み中はSuspenseのfallbackに指定した要素が表示され、読み込みが終わるとコンポーネントが表示される。このとき、AcomponentとBcomponentの両方が読み込み終わってから表示される。
React.lazy()の使う場合は、読み込むコンポーネントはdefault exportされたコンポーネントでないといけない。また、Suspenseで囲まれてないといけない。fallbackには文字列以外にもjsxがつかえる。


App.jsx

```react
import React, { Suspense } from "react";
export default function App() {
  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const AcompLazy = React.lazy(() =>
    sleep(1000).then(() => import("./Acomponent"))
  );
  const BcompLazy = React.lazy(() =>
    sleep(2000).then(() => import("./Bcomponent"))
  );

  return (
    <div>
      <h1>Test React.lazy()</h1>
      <Suspense fallback="loading...">
        <AcompLazy />
        <BcompLazy />
      </Suspense>
    </div>
  );
}
```

## 条件で表示させるコンポーネントを選択
isAやisBがtrueのときにコンポーネントを表示させるコード。
下記のようにコーディングするとtrue以外のコンポーネントは読み込まれない。

```react
import React, { Suspense, useState } from "react";

export default function App() {
  const [isA, setIsA] = useState(false);
  const [isB, setIsB] = useState(true);

  const ViewComp = React.lazy(() => {
    if (isA) return import("./Acomponent");
    if (isB) return import("./Bcomponent");
    return import("./Ccomponent");
  });

  const fallback = <h1 style={{ color: "red" }}>Loading ...</h1>;

  return (
    <div>
      <h1>Test React.lazy()</h1>
      <Suspense fallback={fallback}>
        <ViewComp />
      </Suspense>
    </div>
  );
}
```
Numbaと並列処理のあれこれ

## モチベ
Pythonの高速化の手法として、multiprocessing等のモジュールを利用した並列処理とnumbaを利用したJITコンパイルによる高速化がある。
2つの高速化は競合する場合があるので、備忘録としてここにまとめる。

### numbaと各並列処理手法の相性
|　 | nojit | jitfunction | jitclass | 
| --- | --- | --- | --- |
| MultiProcessing | O | △ | X※1 | 
| MultiThreading  | X※2 | O | X※3 | 

※1: マルチプロセスでjitclasオブジェクトを別プロセスに送ることができない。なぜなら、子プロセスに送るオブジェクトはpickleにして送るが、jitclassはpickleにできないため。子プロセスの中でjitclassのインスタンスを生成するなら問題ない。

※2: Python(Cpython)ではGlobal Interpreter Lock(GIL)によって、実行可能なスレッドが1つに制限される。そのため、マルチスレッドによる高速化は期待できない。ただ、IOバウンドなど特殊な条件では高速化できる場合もある(https://qiita.com/nyax/items/659b07cd755f2ced563f)

※3: 2022/3時点でjitclassではgilを解除をしてメソッドを実行することができない。しかし、オーバーロードでjit関数をメソッドとして入れるというゴリ押しならnogil=Trueの恩恵が得られるらしい。実装がわかりにくく、jit関数の中だけでしかオーバーロードが有効にならず使い勝手も悪い(https://numba.discourse.group/t/how-to-pass-jit-options-to-jitclasses/177/5)。
MVCの流れ

最初に
-

Rubyを開発言語に選んだのだから、開発の流れを頭に入れねばと思い、MVCモデルについて書きたいと思います。

MVCモデル
-
Railsでは、

ルーティング 
↓
コントローラー 
↓
モデル 
↓
ビュー

の順番に処理が行われます。
このようにモデル（model）とビュー(view)、コントローラー(controller)を使用して処理を行なうシステムを、それぞれの頭文字を取って「MVC」と呼ぶ。

「MVCとは？」と聞かれた時、これは言えるように
-
Modelは、データの管理や手続きを扱い、
Viewは、モデルやコントローラーからの指示を受けて利用者への表示・出力を行い、
Controllerは、利用者の操作・入力を受け付けて解釈し、ModelやViewに対応する処理を行うようメッセージを発する。
このように、モデル（model）とビュー(view)、コントローラー(controller)を使用して処理を行なうシステムを、それぞれの頭文字を取って「MVC」と言う。
MVCモデルを使うと、以下の利点がある。
役割に応じて各要素を分離することにより、各要素の内部設計や開発を分業しやすくなり、変更が他の要素に影響するのを避けやすくなる。例えば、内部的な機能や処理は変えずにユーザーインターフェースのデザインや操作方法のみを改良するといったことが行いやすくなる。


参考文献
-
https://e-words.jp/w/MVC.html#:~:text=MVC%E3%81%A8%E3%81%AF%E3%80%81%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE,%E3%81%A6%E5%87%A6%E7%90%86%E3%82%92%E9%80%B2%E3%82%81%E3%82%8B%E6%96%B9%E5%BC%8F%E3%80%82
Log Analyticsで独自に作成したWindowsイベントログを収集する方法

# やりたいこと
Log AnalyticsではWindows標準のイベントログについてはAzure Portalから設定することですぐに構成が可能です。標準のものではなく、WindowsのEvent Viewerで確認できる自前のイベントログを収集してみます。

# 手順
- Log Analyticsのエージェント構成から自前のログ名を収集対象として設定する
- 監視対象VMの上で自前のログを生成
- Azure Portal上でログが収集されていることを確認する
 
# Log Analytics側の設定
[エージェント構成]から"demo-log"という自前のログ名を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205918/c83c343a-3fdd-e775-fc13-a405e81d47c7.png)

# 監視対象VM上でログ生成

```powershell
#Powershellのサンプルコード

# ログの名前 これがLogAnalyticsで収集設定したログの名前
$LogName = "demo-log"

# イベントソース生成(スクリプトファイル名など)
$EventSource = "TestScript01"

# イベントソースが存在するか確認(管理者としてでPowershell実行必要)
if(-not [System.Diagnostics.EventLog]::SourceExists($EventSource)) {
    #　イベントソースが存在しないので登録
    New-EventLog -LogName $LogName -Source $EventSource
}

# ログの内容
$errormsg = "これはログ出力サンプルです。"

# イベントログへログの書き込み
Write-EventLog `
    -Message $errormsg `
    -LogName $LogName `
    -Source $EventSource `
    -EventID 1001 `
    -EntryType Error `
    -Category 2
```

WindowsVM上でログが生成されていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205918/8b19b727-d5cc-d192-157f-c77a9ffb1586.png)

# Log Analytics側でクエリをかけて確認する
WindowsVM上でログを生成してからLog Analytics側へ送られるまで少しのタイムラグがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205918/0000d488-68c7-5c2b-c1a2-643e6c22c360.png)


# 参考
https://ymstech.net/blog/monitored-with-log-analytics/
firestore で地理的な近傍を検索する

## TL;DR
 - firestore でサービスを開発しており、ある場所の地理的な近傍を検索したい。
 - 近傍検索において GeoHash は「十分に効率的に」処理できる手法である。
 - select の選択肢として使用する場合のカスタムフックを作成した。

## 前提
### クライアント
 - react-admin を使用する。
 - DataProvider として react-admin-firebase を使用する。

### データ
 - firestore を使用する。
 - レコードには、以下が入っていることとする
    |フィールド名|型|内容|
    |---|---|---|
    |geo|[number, number]|[緯度, 経度]|
    |geohash|string|GeoHash|

 - サンプル データ登録例
```typescript
import { collection, addDoc } from "firebase/firestore";
import * as geofire from "geofire-common";

const cities = [
  ['秋葉原',　35.698715, 139.774021],
  ['上野',　　35.714171, 139.775220],
];

for(const city of cities) {
  const [name, lat, lng] = city;
  await addDoc(collection(db, "cities"), {
    name,
    geohash: geofire.geohashForLocation([lat, lng]),
    geo: [lat, lng],
  });
}
```

## カスタムフック

```tsx
import * as geofire from "geofire-common";
import { useEffect, useState } from "react";
import firebase from "firebase/compat/app";
import { useDataProvider } from "react-admin";

type CollectionReference = firebase.firestore.CollectionReference;

export const useNearBy = (
  resource: string,
  center: [number, number],
  radius: number // Km
) => {
  const dp = useDataProvider();
  const [choices, setChoices] = useState<unknown[]>([]);

  useEffect(() => {
    if (!resource) return;
    if (!center) return;
    if (!radius) return;

    const bounds = geofire.geohashQueryBounds(center, radius * 1000);

    const params = bounds.map(([s, e]) => ({
      pagination: { page: 1, perPage: 1000 },
      sort: { field: "geohash", order: "asc" },
      filter: {
        collectionQuery: (cr: CollectionReference) =>
          cr.orderBy("geohash").startAt(s).endAt(e),
      },
    }));

    const jobs = params.map((p) => dp.getList(resource, p));

    Promise.all(jobs).then((all) => {
      const result = all
        .map(({ data }) => data)
        .flat()
        .filter(({ geo }) => geo)
        .map((record) => ({
          record,
          distance: geofire.distanceBetween(center, record.geo),
        }))
        .filter(({ distance }) => distance < radius)
        .sort((a, b) => a.distance - b.distance)
        .map(({ record }) => record);
      setChoices(result);
    });
  }, [dp, resource, center, radius]);

  return choices;
};
```

## 使い方

```tsx
const NearByInput = (props) => {
  const center = [35.6812362, 139.7649361]; // 東京駅
  const choices = useNearBy("cities", center, 10); // 10 Km 範囲
  return <AutocompleteInput {...props} choices={choices} optionText="name" />;
};
```

## おまけ
 - geofire-common ライブラリがとても有用。今回使用した関数は以下。
    |関数名|入力|出力|
    |---|---|---|
    |geohashForLocation|緯度経度|GeoHash|
    |geohashQueryBounds|中心(緯度経度)<br>半径(Km)|円を覆う適度な GeoHash (9 個以内)|
    |distanceBetween|地点A<br>地点B|二地点間の距離(Km)|

## 参考
 - https://firebase.google.com/docs/firestore/solutions/geoqueries?hl=ja
SSH接続でリポジトリをクローンする【GitHub】

# やりたいこと
GitHubでSSH接続をおこない、リポジトリをcloneする。

# 環境
- macOS Monterey 12.2.1

# SSHとは
- [GitHub Docs](https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/about-ssh)より引用
```
SSH プロトコルを利用すれば、リモートのサーバーやサービスに接続し、認証を受けられます。 SSH キーを使用すると、アクセスのたびにユーザ名と個人アクセストークンを入力することなく GitHub に接続できます。
```

# 手順
## 秘密鍵・公開鍵を作成する
ローカルのターミナルで以下を実行する。ご自身のGitHubアカウントのメールアドレスを入れてください。
```bash
ssh-keygen -t ed25519 -C "your_email@example.com"
```
`Enter a file in which to save the key`と表示されたら、鍵を保存するディレクトリを指定する。デフォルトでOK。
`Enter passphrase`と表示されたら、鍵のパスフレーズ（パスワード）を入力する。設定しなくてもOK。

## 秘密鍵をssh-agentに登録する
以下で、ssh-agentを起動する。
```bash
eval "$(ssh-agent -s)"
```
秘密鍵を登録する。「hoge」には、ご自身の秘密鍵のファイル名（.sshディレクトリの、拡張子「.pub」がないほう）を入れてください。
```bash
ssh-add -K ~/.ssh/hoge
```

## configファイルを作成する
鍵が生成された`./ssh`ディレクトリ内にconfigファイルを作成する。（ファイル名は「config」でOK）
configファイルに以下を記述する。
「hoge」には、ご自身の秘密鍵のファイル名（.sshディレクトリの、拡張子「.pub」がないほう）を入れてください。
```bash
Host github github.com
  HostName github.com
  IdentityFile ~/.ssh/hoge
  User git
```


## 公開鍵をGitHubに登録する
Setting > SSH and GPG keys > SSH keys > 「New SSH key」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320845/b4021d4b-a363-046f-fd66-eed2667bd8e2.png)
「Title」にはわかりやすい名前を、
「Key」には、コピペした公開鍵（.pubのほう）の内容を入れる。


## SSH接続する
```bash
ssh -T git@github.com
# もしくは
ssh -T github
```
上記を実行し
 `Hi {your user name}! You've successfully authenticated, but GitHub does not provide shell access.`
と返されたらOK。鍵が問題なく登録されていることが確認できました。

## リポジトリをcloneする
```bash
git clone git@github.com:hoge/fuga.git
```
クローンしましょう。

# 参考
- [SSHについて](https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/about-ssh)
- [新しい SSH キーを生成して ssh-agent に追加する](https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
- [GitHub アカウントへの新しい SSH キーの追加](https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)
- [ssh-agentを利用して、安全にSSH認証を行う](https://zenn.dev/naoki_mochizuki/articles/ce381be617cd312ffe7f)
sqlite3_初期設定

# Sqlite3

* sqlite3とはSQLを利用できる小型のデータベースエンジン。
    * スタンドアローン型で動作するソフトウェア。
    * １つのファイルでデータを管理する。

# 基本コマンド

* ファイル名を指定しない場合、インメモリ型となり起動するたびにデータ消えてしまう
    * 任意のファイル名を指定して起動すると良い(拡張子は`.sqlite3`)

```terminal
//起動
$ sqlite3 {任意のファイル名}.sqlite3

//終了
sqlite> .exit
```

## その他のコマンド

|コマンド|できること|
---|---
.table|テーブルの一覧表示
.schema|スキーマの確認
.show|設定情報の確認
.help|コマンドの一覧表示


```terminal:sample.sql
//　あらかじめ用意しておいたsql文を読み込むコマンド
sqlite> .read sample.sql
```


# 見やすくするには

* sqlite3の初期設定は見づらい
    * ホームディレクトリ配下に設定ファイルを作成するのがおすすめ
        * `column`幅を揃えて見やすくする
        * `headers on`見出しをつけて見やすくする


```
$ cd ~
$ touch .sqliterc
```

```terminal:.sqliterc
.mode column
.headers on
```
MySQLのパーティショニングの詰まったところ

MySQLのパーティショニングの詰まったところです。
同じエラーになった方は参考になるかもしれません。

## 一覧
- A UNIQUE INDEX must include all columns in the table's partitioning function
- Foreign keys are not yet supported in conjunction with partitioning
- A PRIMARY KEY must include all columns in the table's partitioning function

## サンプルテーブル作成
```sql:テーブル作成
SET FOREIGN_KEY_CHECKS=0;

CREATE TABLE categories (
  id INT UNSIGNED NOT NULL PRIMARY KEY auto_increment,
  name VARCHAR(255) NOT NULL UNIQUE
) character SET utf8mb4 collate utf8mb4_bin;

CREATE TABLE posts (
  id INT UNSIGNED NOT NULL PRIMARY KEY auto_increment,
  category_id INT UNSIGNED NOT NULL,
  content text,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT posts_ibfk_1 FOREIGN KEY (category_id) REFERENCES categories(id)
) character SET utf8mb4 collate utf8mb4_bin;

SET FOREIGN_KEY_CHECKS=1;
```

## パーテーション作成
```sql:categoriesテーブルのパーテーション作成
/* (A) */
ALTER TABLE categories
PARTITION BY RANGE COLUMNS(id) (
    PARTITION p10 VALUES LESS THAN (10),
    PARTITION p20 VALUES LESS THAN (20),
    PARTITION p30 VALUES LESS THAN (30)
);
```
```sql:postsテーブルのパーテーション作成
/* (B) */
ALTER TABLE posts
PARTITION BY RANGE COLUMNS(created_at) (
    PARTITION p202202 VALUES LESS THAN ('2022-03-01 00:00:00'),
    PARTITION p202203 VALUES LESS THAN ('2022-04-01 00:00:00'),
    PARTITION p202204 VALUES LESS THAN ('2022-05-01 00:00:00')
);
```

## A UNIQUE INDEX must include all columns in the table's partitioning function
パーティショニングするテーブルに一意キー（unique key）のあるカラムがある場合は、そのカラムをパーティショニングに使うカラムに含めないといけないらしい。
なるほど、データ更新するときにユニークか判断するため、折角パーティションで分けたテーブルを全て見に行かないと行けないし、当たり前か。
サンプルでは(A)のnameカラムに一意キーを設定しているため、このエラーが発生する。

```sql:一意キーを解除
DROP INDEX name ON categories;
```

## Foreign keys are not yet supported in conjunction with partitioning
外部キー（foregin key）制約がついているとパーティショニングは使えないらしい。
これは親テーブルでも、子テーブルでも適用される。
サンプルでは(A)でも(B)でもこのエラーが発生する。

```sql:外部キー制約を解除
ALTER TABLE posts DROP FOREIGN KEY posts_ibfk_1;
```

## A PRIMARY KEY must include all columns in the table's partitioning function
パーティショニングに使うカラムは、主キー（primary key）に含まれていないといけないらしい。
サンプルでは(B)の主キーはidのみだけど、パーティショニングにcreated_atを利用しているため、このエラーが発生する。

```sql:主キーにcreated_atを追加
ALTER TABLE posts DROP PRIMARY KEY, ADD PRIMARY KEY(id, created_at);
```

## 公式サイト
https://dev.mysql.com/doc/refman/5.6/ja/partitioning-limitations.html
Ruby、Ruby on Railsとは？〜基本に戻って考える〜

最初に
-
TECHCAMP転職スクールにて学習したRuby、Ruby on Railsについて解説します。

世の中にはPHP、Java、C言語等、色々なプログラミング言語があるのに、なぜRubyを学んだのか？、Ruby on Railsってそれじゃあ何者？、と疑問に思ったので、調べてみました。

目次
-
・　Ruby、Ruby on Railsとは？
・　なぜRubyがいいのか？　~Rubyのメリットデメリット~
・　なぜRailsがいいのか？


Ruby、Ruby on Railsとは？
-
Ruby：プログラミング言語

Ruby on Rails (Rails)：RubyでのWEB開発を効率良く行うためのフレームワーク

(＊フレームワーク：　
アプリケーションを開発するとき、その「土台」として機能させるソフトウェア。「土台」となるフレームワークに必要な機能を追加し、アプリケーションの開発を進める。）

なぜRubyがいいのか？　~Rubyのメリットデメリット~
-
[メリット]
①汎用性が高い
②記述がシンプル⇨開発工数が少⇨開発コスト削減
③学習がしやすい
④インタプリタ方式であること
⑤オブジェクト指向であること

→④インタプリタ型：書かれたプログラムを1行ずつ機械語に解釈しながら実行していく方式。機械がわかる言葉・記述に変換する必要がない。記述が簡単で、しかもプログラムを書いたその場で試せるので、エラーも見つけやすい。

→⑤オブジェクト指向：複数の関連性の深いプログラムを1つの大きなまとまり（＝オブジェクト）にして開発が可能な形式。⇨開発効率が良い


[デメリット]
①インタプリタ方式であるため、実行速度が遅い
②記述がしやすく自由度が高いため、個人によって記述に差が出る

なぜRailsがいいのか？
-
・設計ルールが決まっているため、ルールに則りシンプルに記述できる
・様々な開発補助ツールあり (便利なgem,フレームワーク)
・日本語の参考文献あり

⇨　スピーディーに開発できる

そのため、スピード感を求められるベンチャー企業や開発で用いられる！

まとめ
-
RubyやRailsを使う理由としては、

・記述が簡単で学習がしやすい言語である
・スピーディーにWEBアプリケーションを開発するのに適している

からであると感じました。
力とは何か。今わかっている種類も解説。

# 力とは
日本の中学校理科ではこのように定義される。
「力とは物体に働き、物体に力が働くとその物体が変形したり動き始めたり，運動の様子が変わったりすること」
変形、運動の様子が変わることになる。
過去の記事　https://qiita.com/L_count/items/e950b1be35e47e54ccd7　
で力とは「物体の位置やエネルギーを変える現象」と話したが、以下のように訂正する。
「物体の(運動を変化させ、)位置やエネルギーを変える現象」

# 力の種類
力は5種類ある。
1. 接触力
1. 万有引力（重力）
1. 電磁力
1. 強い力
1. 弱い力

先に説明しておくと、「強い力」と「弱い力」とはまだどういう力か解明できていないが、存在だけわかっている力になる。
原子内で起こる現象を説明するもので、普段身の回りににはない力なので、割愛する。

# 接触力
物と物が触れているときに発生する力。
あなたが今持っているスマートフォンと手の間に生まれる力、マウスと手の間に生まれる力になる。
物は触れていると必ず力が発生している。
筋肉で発生させている力がこれに当たる。
飛んでくるボールをキャッチしたときに「痛い」と感じるのも接触力になる。

# 万有引力(重力)
接触力以外はすべて物体と物体が触れていないのに発生する力になる。
万有引力とはすべての質量を持つ物同士が互いに引き合っている力になる。
私たちも今地球という大きな質量に引きずられて地面に立ったり座ったりしている。
＜弱---　力の大きさ　---強＞
軽い　　　質量　　　　重い
遠い　　　距離　　　　近い
↑このようにして力が決まっている。
互いに引き合っているので、電車で隣に座る人とも実は引き合っている。実は力が弱すぎるので、感じていない。
太陽という地球よりも大きな質量の星があっても引きずられないのは、距離が遠すぎるからだ。
重くて近い地球とだけ万有引力がかかっているように私たちは感じている。

# 電磁力
電気の性質があるもの同士だけにかかる力である。
電車の推進力などがある。
重力と大きく違う点はプラスとマイナスがある。
プラスとマイナスだと重力のように引き合うが、同じプラス、同じマイナスだと互いに押し合う。
＜弱---　力の大きさ　---強＞
弱い　　プラスの強さ　強い
遠い　　　距離　　　　近い
↑このようにして力が決まっている。
実際は電磁力として利用することは稀で、電磁力を元に生まれた電気エネルギーでiphoneなどが動いている。
『Linux で動かしながら学ぶ TCP/IPネットワーク入門』が良かった

<p align="center">
  <img width="520" alt="スクリーンショット 2020-01-02 0.21.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/a1170ff6-0b2a-0764-323e-bc8c2e7786d8.jpeg">
</p>

---

# これは何か
[もみじあめ](https://twitter.com/momijiame)さんという方が書いた『Linux で動かしながら学ぶ TCP/IPネットワーク入門』を読んだ感想を書いていく。

# 私について
- ソフトウェアエンジニア（web・モバイル・VRフロントエンド）3年程度
- ネットワーク初心者（『マスタリングTCP/IP―入門編―(第6版)』を読了した程度）

TCP/IPについて、全然手触り感がないと感じていたところ、こちらの書に出会った。

# 良いと感じた点
## 1. なんと言っても初めての「ping」

<img width="512" alt="スクリーンショット 2020-01-02 0.21.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/ad64ffd8-54a0-2328-0b0c-3bac40165aaf.png">


一番最初のコマンドであるが、「通信できた...！」という嬉しさ。
エンジニア始めたての頃、httpsの「200 OK」が初めて帰ってきた時の感覚に近い。

ここでは、以下の内容が書かれている

```
- 3回通信し、パケットロスなしで3回応答が帰ってきた
- rttの部分を見ると、平均7.5ミリ秒で通信している
```



<img width="512" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/4f201509-6188-665d-bf39-b3ce0c897812.png"　title="これをパケットキャプチャした様子がこちら">
（↑同じ通信内容をパケットキャプチャした様子）

『マスタリングTCP/IP』では感じられなかった「手触り感」を見事に解決してくれた。

# 2. ルーターの仕組みも理解できる
なぜ繋がるのか？を自分で「繋がりを作る」ことで理解できる。
以下の2枚の画像のように、簡単なネットワークから、複雑なネットワーク構成まで手動で作る体験ができた。
　　<img width="256" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/9a9e3ba3-b634-d1c5-300a-a83680a89602.png">　　<img width="256" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348026/d958e85f-ad89-af9a-e001-bf632aa3faaa.png">

また、普通に考えると、ネットワークを作るにはPCが複数台必要なのだが、
本書で紹介されている「Network Namespace」を利用すると、システムから切り離された（独立した）ネットワーク環境を、一つのPCに乱立させることができる。

# 3. コードがあることで理解が進みやすい
以下は、（正直に言って）実際に手元で動かしていないのだが、手元で動かすためのコードがあることで、非常に理解しやすいと感じた。

- イーサネット（データリンク層・物理層）
- UDP・TCP（トランスポート層）
- NAT（グローバルIPをプライベートで共有する）

# 参考
『Linux で動かしながら学ぶ TCP/IPネットワーク入門』もみじあめ(著) 
https://www.amazon.co.jp/dp/B08SH41SL6/
Keycloak ログアウト方法 メモ

* Keycloakでのログアウト方法について個人用にメモしておく。

### バックチャネル ログアウト

#### リクエスト

```http
POST /auth/realms/{YOUR_REALM_NAME}/protocol/openid-connect/logout HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
Content-Length: 759

client_id=python-client&client_secret=a07f9...8213d1&refresh_token=eyJhbGci...twOA
```

* パラメータ
  * `client_id`:クライアントID
  * `client_secret`:クライアントシークレット
  * `refresh_token`:リフレッシュトークン

#### レスポンス

```http
HTTP/1.1 204 No Content
```



### フロントチャネル ログアウト

#### リクエスト

```http
GET http://localhost:8080/auth/realms/{YOUR_REALM_NAME}/protocol/openid-connect/logout?id_token_hint=eyJhbGciOiJS...RE2AZmGgKJAj-HlHw&post_logout_redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fauth%2Flogout%2Fcomplete&state=e18689b0503aab42574427fb575645aca0065bb758aa8463acf4506fe8a61e81
```

* パラメータ
  * `id_token_hint`:IDトークン
  * `post_logout_redirect_uri`:ログアウト後リダイレクトURI。`Valid Redirect URIs`に設定した値。
  * `state`:CSRF対策文字列

#### レスポンス

* ログアウト後リダイレクトURIへのリダイレクトする。

```http
HTTP/1.1 307 Temporary Redirect
http://localhost:8000/auth/logout/complete?state=e18689b0503aab42574427fb575645aca0065bb758aa8463acf4506fe8a61e81
```

* パラメータ
  * `state`:リクエストで指定した`state`



### その他

バックチャネル/フロントチャネルともに、クライアントに`Backchannel Logout URL`を設定している場合は、KeycloakからURLへバックチャネルログアウトリクエストが行われる。

```http
POST /auth/backchannel_logout HTTP/1.1
Host: localhost:8000
Content-Type: application/x-www-form-urlencoded
Content-Length: 759

logout_token=eyJhbGciOiJSUzI1NiIs...zspo4weMQfU-1jL0DxSg
```

* `logout_token`ペイロード

  ```json
  {
      "aud": "python-client",
  	"events": {"http://schemas.openid.net/event/backchannel-logout": {}},
  	"iat": 1646546432,
  	"iss": "http://localhost:8080/auth/realms/{YOUR_REALM_NAME}",
  	"jti": "2f097820-f1d1-4453-9a7a-95e53838aa5e",
  	"sid": "41997f9c-1873-48ab-a308-52f35422cbb5",
  	"sub": "dc6f27d8-47c0-46ab-87d3-787dd61e64cd",
  	"typ": "Logout"
  }
  ```

  

## 参考情報

* [Securing Applications and Services Guide 2.1.17. Logout](https://www.keycloak.org/docs/latest/securing_apps/index.html#logout)
* [keycloak/LogoutEndpoint.java](https://github.com/keycloak/keycloak/blob/main/services/src/main/java/org/keycloak/protocol/oidc/endpoints/LogoutEndpoint.java)
LightsailにデプロイしたRailsアプリにDNSゾーンを使ってドメイン名でアクセスできるようにする

## やりたいこと

デプロイしてIPアドレスでは見られるようになったRailsアプリをドメイン名のURLでアクセスできるようにしたいです。

IPアドレスではページを表示できる。
![スクリーンショット 2022-03-06 15.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/34bb30fa-8703-8560-6d9d-a6682d7b5c14.png)

そのデプロイの模様はこちら↓

https://qiita.com/kakudaisuke/items/f38938552ee9456a23f6

## 実装！

### DNSゾーン作成

Amazon Lightsail→ネットワーキング→DNSゾーンの作成

ドメインを入力して`DNSゾーンの作成`

 ![スクリーンショット 2022-03-06 14.47.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/51fa4b52-6c65-5353-3e91-3f36b250a663.png)

### レコードの追加

こんな感じで本番環境やテスト環境のレコードを追加します。

![スクリーンショット 2022-03-06 14.49.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/401547da-3489-1b11-ef9d-517a6727fbd4.png)

### ネームサーバー

今回はお名前.comでドメイン取得したので、Lightsail下部に表示されているネームサーバーの４つのアドレスを転記する。
![スクリーンショット 2022-03-06 14.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/0bbc8e43-3597-b098-9c93-2fd0cdd85d21.png)

お名前の画面

![スクリーンショット 2022-03-06 14.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/03cfd62f-c9e4-8d56-f032-5ee4d98d47d9.png)

登録できるとこんな感じになる。

![スクリーンショット 2022-03-06 14.54.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/580952ee-ba2f-555b-be89-72dd3abc0f42.png)

これで、IPアドレスだけでなく、アプリのドメインURLでもアクセスできるようになりました。
![スクリーンショット 2022-03-06 15.05.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/23a7f1fd-e288-ecea-f772-46ff667d54d1.png)

次はhttps化！
複数のデータを分割してグラフ化（9つのグラフを3グラフ×3回で出力する）

膨大なデータを、確認の為に一括で全てグラフ化したいニーズがあると思うので作りました。
# 想定環境
Windows10のPythonで作業しています。
pandasとmatplotlibをインストールしておいてください。

# はじめに
能書きは省いてやりたい事はこうです。
Before：左上
After：データ3つ毎に分割したグラフ
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675031/c7ede83f-c33d-e764-705b-35f439050ea1.png)![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675031/5705c39f-a423-9b9e-aeac-1069b9c9ebd9.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675031/a993a14e-7feb-a9a1-6b6f-e968739eab06.png)![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675031/45835e50-6ab0-7a44-a54b-b5037ad8d1db.png)

ちなみにデータは適当にでっち上げたこんなやつです。
※自身のpandas操作練習の為に、1行目に無意味なデータ、3行目に空白行を設けてます。
![data.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675031/5ae79d0c-d70f-bed9-3231-1a5878c3b5d3.png)

# 要点
+ df.iloc[].plot() を使う
+ for で吐き出す

# 先にコード
```Python:graph.py
import pandas as pd
import matplotlib.pyplot as plt

#日本語の文字化け対策
plt.rcParams['font.family'] = "MS Gothic"

#pandasでデータを読み込む。不要な先頭行（0行目）を読み飛ばす為に header=1 を指定し、1行目から読み込み。
input_csv = pd.read_csv('./dummydata.csv', encoding='ANSI', header=1)

#Index(0)のデータを削除(CSVの3行目、今回は1行目から読んでいるのでIndex(0)を削除)
input_csv.drop(0, axis=0, inplace=True)

#データの先頭5行を確認表示
print(input_csv.head())

#Beforeのグラフ
input_csv.plot(subplots=True, figsize=(5, 5), title='Graph Title', xlabel='aaa')

#Afterのグラフ
for i in range(2, len(input_csv.columns), 3):
    input_csv.iloc[:,i:i+3].plot(subplots=True, figsize=(5, 5), title='Graph {}-{}'.format(str(i-1), str(i+1)), xlabel='aaa')
```

# 解説1
```Python:graph.py
print(input_csv.head())
```
データの先頭5行を確認表示。
この時点で下記のようにprintされます。
![aaaaaaaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675031/6136e060-356b-b76d-5444-59ebedcfee51.png)

# 解説2
```Python:graph.py
for i in range(2, len(input_csv.columns), 3):
    input_csv.iloc[:,i:i+3].plot(subplots=True, figsize=(5, 5), title='Graph {}-{}'.format(str(i-1), str(i+1)), xlabel='aaa')
```
1. **len(input_csv.columns)** でデータの列数を取得 → 今回は 9 となります。
2. for文で繰り返し処理
3. iloc[:,i:i+3] で**全ての行**の**i列～i+3列**までを抽出しplot

+ 項目名を指定して抜き出す→**loc[]**
+ 列番号を指定して抜き出す→**iloc[]**
+ figsizeはインチ単位で指定
です。

# おわりに
下記を参考にしました。
[Matplotlibで、たくさんの列データから必要な複数データを選択してを一つのグラフに一度に描画する賢い方法](https://ja.stackoverflow.com/questions/49063/matplotlib%e3%81%a7-%e3%81%9f%e3%81%8f%e3%81%95%e3%82%93%e3%81%ae%e5%88%97%e3%83%87%e3%83%bc%e3%82%bf%e3%81%8b%e3%82%89%e5%bf%85%e8%a6%81%e3%81%aa%e8%a4%87%e6%95%b0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e9%81%b8%e6%8a%9e%e3%81%97%e3%81%a6%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ae%e3%82%b0%e3%83%a9%e3%83%95%e3%81%ab%e4%b8%80%e5%ba%a6%e3%81%ab%e6%8f%8f%e7%94%bb%e3%81%99%e3%82%8b%e8%b3%a2%e3%81%84%e6%96%b9%e6%b3%95)
StreamlitでセッションIDを取得する方法

Streamlit(version=1.7.0)でセッションIDを取得した時の備忘録

下記コードを`streamlit run session_id_example.py`と実行して、セッションIDを取得できることを確認できた。
```python:session_id_example.py
from streamlit.script_run_context import get_script_run_ctx

ctx = get_script_run_ctx()
print(ctx.session_id)
```
セッションIDは`00e79560-4427-4c8e-9fef-473b52aca4f2`といった形式で出力された。

:::note warn
Streamlitはバージョンによって、セッションIDの取得方法が変更されていることがあるみたいなので、注意してください。
:::

(参考) 以前のバージョンのセッションID取得方法
```python
from streamlit.report_thread import get_report_ctx

ctx = get_report_ctx()
print(ctx.session_id)
```
笑顔じゃなくなったらGoogle Meetから強制退出させられるchrome拡張機能を作った

# これはなに

先日参加したハッカソンにて作成したchrome拡張について語る記事。
**ちなみに、chromeストアでの公開はしていません。**

# 何を作ったのか

笑顔の間はGoogle Meetへの接続が継続され、笑顔が消えると切断されるchrome拡張。

![ega_meet_extension_demo_resize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363036/ad2498a9-c1aa-d436-cb5e-9acb763b89bc.gif)

# 技術構成

![スクリーンショット 2022-02-28 19.01.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363036/2530565c-249b-8938-6fbf-56a88bbf0df6.png)

- chrome拡張
    - JavaScript
- 笑顔判定API
    - （Docker）
        - ローカル環境汚したくなかった&ローカルでしか動かせない状態
    - Flask
    - OpenCV

ちなみに、自分がchrome拡張を担当し、APIは友人にお任せ状態。

以下、アイコン取得元。
（各アイコン毎にライセンス定められている系アイコン素材サイト）

https://icon-icons.com/ja/

# 思い出

## どうやってchrome拡張で笑顔判定するか

chrome拡張単体というかjs単体で、顔検出して笑顔判定までできれば楽そうだし、[face-api.js](https://github.com/justadudewhohacks/face-api.js/)という良さげなものあった。
しかし、Node.js使う必要性があり、Node.jsで作ったモノをchrome拡張に変換した際に上手く動くのかパッと予想できなかったため、不採用。
（変換さえできればNode.jsモジュールは全てchrome拡張で使えるのだろうか…？）

そのため、笑顔判定用APIを別途自作し、chrome拡張からはそのAPIを叩く方針に決定。

## Google MeetのAPIが存在しない

笑顔判定すべき画像をいかに入手するか問題。
Google MeetにAPIが用意されていて通話中の動画を取得できれば楽だったが、そのようなものは見つけられず。

結局、ブラウザの画面をキャプチャし、キャプチャした内容を`<video>`タグに書き出し、動画を一時停止して`<canvas>`タグに画像を書き出す形を採用。

以下、参考にした記事。

https://stackoverflow.com/questions/55474186/how-to-take-a-screenshot-of-a-webpage-using-html5-without-rendering-it-on-a-can

https://stackoverflow.com/questions/23745988/get-an-image-from-the-video/44325898#44325898

## 笑顔判定の精度調整

笑顔判定API自体は友人が作ってくれたので、そのデバッグ要員として良さげに笑顔がされるまで笑顔と真顔を繰り返して数値調整。
エッジ検出して判定しているそうで、メガネなしで笑った方が精度良かった。

以下、参考にした記事。

https://qiita.com/fujino-fpu/items/99ce52950f4554fbc17d

## しれっとchrome拡張manifest.jsonのv3が登場していた

情報追いかけてなかった自分に非があるが、chrome拡張の公式Docs見たら2021年1月からManifest V3がChromeストアでも利用可能になったらしい。
しかし、日本語の良さげな参考記事はv2を用いた内容のものが多かったので、v2を採用。
公式Docs読む際もv2のものを閲覧するように注意した。

https://developer.chrome.com/docs/extensions/mv3/intro/

## chrome拡張での実装方法を検索しにくい

画面キャプチャの実装方法をググる際、「chrome拡張 画面キャプチャ」と検索すると画面キャプチャ用のchrome拡張が引っかかる。
そのため、chrome拡張はjsで書くことから、基本的にググる時は「js 画面キャプチャ」とするのが良さそう。

# さいごに

今回初めてchrome拡張作ったが、想像以上にお手軽かつ色々とできそうなので、今後はchromeストアでの公開目指して何か作りたい。
今回作ったものを公開するかどうかは検討中…
pythonでゲームパッドを使う

# pythonでpygameライブラリを使ってゲームパッドを使えるようにします

https://github.com/OkitaSystemDesign/Gamepad

Gamepad.py  
実行するとこんな感じ  
![2022-03-05 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2489321/2b5affe1-92d3-4076-cc8f-902218ca0da4.png)



## 環境
Windows10
python v3.9
pygame v2.1.2

## ゲームパッドの状態
pygameでのゲームパッドのイベントは次のように割り当たっています
![gamepad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2489321/14dee629-5f17-a03e-840b-2ae9bcd11ba1.png)

## プログラムの説明
#### ゲームパッドの初期化
```python
pygame.joystick.init()
joy = pygame.joystick.Joystick(0)
```


ゲームパッドの状態を入れるClassを作っておきます
```python
class JoyStatus:
    def __init__(self):
        self.axLx = 0
        self.axLy = 0
        self.axRx = 0
        self.axRy = 0
        self.hatL = 0
        self.hatR = 0
        self.hatU = 0
        self.hatD = 0
        self.btn = [0,0,0,0,0,0,0,0,0,0,0,0]

JStat = JoyStatus()
```
#### ゲームパッドの状態をJStatにセットします
##### スティックのアナログ値
```python
JStat.axLx = joy.get_axis(0)
JStat.axLy = joy.get_axis(1)
JStat.axRx = joy.get_axis(2)
JStat.axRy = joy.get_axis(3)
```
##### 十字キーの値
```python
if hat_input[0] < 0:
    JStat.hatL = 0;     JStat.hatR = 1
elif hat_input[0] > 0:
    JStat.hatL = 1;     JStat.hatR = 0
else:
    JStat.hatL = 1;     JStat.hatR = 1

if hat_input[1] < 0:
    JStat.hatD = 0;     JStat.hatU = 1
elif hat_input[1] > 0:
    JStat.hatD = 1;     JStat.hatU = 0
else:
    JStat.hatD = 1;     JStat.hatU = 1

```
##### ボタンの状態
```python
for i in range(12):
    if joy.get_button(i) == 1:
        JStat.btn[i] = 0
    else:
        JStat.btn[i] = 1
```
### ウィンドウの初期化
```python
pygame.init()
screen = pygame.display.set_mode((350, 250))
pygame.display.set_caption('JOYSTICK')
pygame.display.flip()
```
#### ウィンドウにお絵描き
円： pygame.draw.circle
矩形： pygame.draw.rect
Qiitaはじめました

# Qiita初投稿
## いまさらながらQiitaの世界に飛び込みました
大阪市内で地図技術関係のいろいろしている髙橋ともうします。
数学パズルも好きなのでそちらの投稿もしていければと考えています。

マークダウンに慣れるまでは普通に打ち込みますので、見づらいのはご容赦ください。

## Mathematicaで小町算

Mathematicaで小町算プログラムを書いてみました。
１～９の８個のギャップに、加減乗除と前後の数字をつなげるという５番目の演算子を考えて、５進数を５つの演算子に対応させて、５^8回、全探索させるというものです。以下に2020となる小町算を乗せます。

Do[
expr = StringJoin@Transpose[
{{"", "-", "+", "*", "/"}[[# + 1]] &/@
IntegerDigits[n, 5, 9], ToString /@ Range[9]}];
If[ToExpression[expr] == 2020, Print[expr]],
{n, 5^^00000000, 5^^44444444}]

これで
12/3+45678/9
という解が一種類見つかりました。ちなみに2021や2025(大阪万博の年)の解は二種類見つかりました。