OmniAICreator/Qiita-1.07M huggingface dataset:
pygame install時にエラー(Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-yovQQX/pygame/)

`python -m pip install pygame`実行時にエラー

```
$ python -m pip install pygame
Collecting pygame
  Cache entry deserialization failed, entry ignored
  Cache entry deserialization failed, entry ignored
  Downloading https://files.pythonhosted.org/packages/bc/0c/d164411381bada8feae57359aa9296defbed3035f4b55bef6a271cb0573c/pygame-2.0.0.tar.gz (5.5MB)
    100% |████████████████████████████████| 5.5MB 72kB/s 
    Complete output from command python setup.py egg_info:
    
    
    WARNING, No "Setup" File Exists, Running "buildconfig/config.py"
    Using UNIX configuration...
    
    sh: 1: sdl2-config: not found
    sh: 1: sdl2-config: not found
    sh: 1: sdl2-config: not found
    
    Hunting dependencies...
    
    ---
    For help with compilation see:
        https://www.pygame.org/wiki/CompileUbuntu
    To contribute to pygame development see:
        https://www.pygame.org/contribute.html
    ---
    
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/tmp/pip-build-yovQQX/pygame/setup.py", line 318, in <module>
        buildconfig.config.main(AUTO_CONFIG)
      File "buildconfig/config.py", line 221, in main
        deps = CFG.main(**kwds)
      File "buildconfig/config_unix.py", line 194, in main
        DependencyProg('SDL', 'SDL_CONFIG', 'sdl2-config', '2.0', ['sdl']),
      File "buildconfig/config_unix.py", line 39, in __init__
        self.ver = config[0].strip()
    IndexError: list index out of range
    
    ----------------------------------------
Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-build-yovQQX/pygame/

```

`python -m pip install pygame==1.9.6`にすると解決、なぜ、、

```
$ python -m pip install pygame==1.9.6
Collecting pygame==1.9.6
  Cache entry deserialization failed, entry ignored
  Downloading https://files.pythonhosted.org/packages/0f/9c/78626be04e193c0624842090fe5555b3805c050dfaa81c8094d6441db2be/pygame-1.9.6.tar.gz (3.2MB)
    100% |████████████████████████████████| 3.2MB 139kB/s 
Building wheels for collected packages: pygame
  Running setup.py bdist_wheel for pygame ... done
  Stored in directory: /home/jetson/.cache/pip/wheels/79/87/65/8b9b165b8f56109ce465665aa44c994f103d428b815ceedc8a
Successfully built pygame
Installing collected packages: pygame
Successfully installed pygame-1.9.6
```
コマンドラインからpygameバージョンを調べる

以下を実行するとよい

```shell
python -c "import pygame; print(pygame.version.vernum);"
python3 -c "import pygame; print(pygame.version.vernum);"
```

```shell
$ python -c "import pygame; print(pygame.version.vernum);"
pygame 1.9.4
Hello from the pygame community. https://www.pygame.org/contribute.html
(1, 9, 4)
$ python3 -c "import pygame; print(pygame.version.vernum);"
pygame 1.9.4
Hello from the pygame community. https://www.pygame.org/contribute.html
(1, 9, 4)
```
同期、非同期処理について

#同期処理と非同期処理の基本

####同期処理とは
あるタスクを順番に実行する方式で、そのタスクが実行されている間は他のタスクが中断される
####非同期処理とは
ある処理を実行する間に他の処理を実行できる


####DispatchQueueとは
GCD（Grand Central Dispatch）の一部
DispatchQueueないにタスクを詰めると非同期で実行してくれる

DispatchQueue自体には、
Serial、Concurrent、mainの３種類がある。


####DispatchQueue.main

OS側で作成済みなので呼び出すだけ。
1つだけ存在。
直列処理タイプ。
UI表示系タスクはここで行わないと動かない。

```viewController.swift
let mainQueue = DispatchQueue.main
```

####DispatchQueue.Global
OS側で作成済みなので呼び出すだけ。
5つ存在。（ただし、実質使えるのは4つ）
並列処理タイプ。
用途を指定して呼出し。

```viewController.swift
// UserInteractiveタイプ
let grobalQueue = DispatchQueue.global(qos: .userInteractive)
```


####sync

```viewController.swift
dispatchQueue.sync {
    print("同期")
}
```
####async
```viewController.swift
dispatchQueue.async {
    print("非同期")
}
```
TechCommit勉強会～データベース設計をやってみよう～

TechCommitの週末勉強会「データベース設計をやってみよう」に参加しました。

今日やる部分
論理設計
・必要なデータを洗い出す（エンティティの抽出）＝概念（スキーマ）設計
・RDBで扱える形にする（正規化＆ER図作成）

論理設計の順番
・エンティティを定義
　→データに必要な登場人物たち
　　→顧客、商品とか

・エンティティに対する詳細を定義
　→登場人物たちが持っている個性
　　→顧客なら、名前・性別・年齢とか

・正規化＆ER図作成

上記の内容を元に実践編の課題が出たのでざっくりとやってみました。

実践編
「プレゼント選びの参考になるようなサービスを作る」

★構想★
・過去にプレゼントした事のあるものは選んでほしくない
・予算は決めたい
・妻や娘にふさわしいものを提案してほし
・他の人がどんな人に何をプレゼントしたのかも参考にしたい
・コンシェルジュを選びたいので、コンシェルジュプロフィールや口コミがあるといい
・コンシェルジュに頼む場合
→一方的に提案してもらうプラン
→Zoomで会話しながら提案してもらうプラン

補足
コンシェルジュさんにプレゼント選びに参考にしたいのは、
〇性別
〇年齢
〇過去にプレゼントしたもの
〇他

上記の内容から、必要と思われるテーブルを洗い出してみた

登場する人と物
・プレゼントを買いたいユーザー
・プレゼントを受け取る人
・提案するコンシェルジュ
・プレゼント


・過去にプレゼントした事のあるものは選んでほしくない
　→プレゼントを受け取った人をユーザーと商品で紐づけて管理できるようにしたい

・予算は決めたい
　→プレゼントしたい商品に金額を持たせてあげる

・妻や娘にふさわしいものを提案してほし
　→レコメンド機能…年齢や性別を定義してそれに該当するようにしてあげればよさそう

・他の人がどんな人に何をプレゼントしたのかも参考にしたい
　→上の内容で作ったテーブルで管理できそう

・コンシェルジュを選びたいので、コンシェルジュプロフィールや口コミがあるといい
　→コンシェルジュテーブルで管理してあげればよさそう

・コンシェルジュに頼む場合
　→提供プランは後から変更する場合やコンシェルジュ個別に設定できるようにしたいので提供プランテーブルを作りたい

上記の内容から下記のテーブルを定義してみた

【ユーザーテーブル】

|  |　列名　|　PK　|　FK　|
|:---:|:---:|:----:|:---:|
|会員番号|customer_id| 〇|
|名前|name| |
|年齢|age| |
|性別|sex| |
|メールアドレス|mail| |
|パスワード|password| |
|お気に入りコンシェルジュ|concierge_id||〇|



【コンシェルジュテーブル】

|  |　列名　|　PK　|　FK　|
|:---:|:---:|:----:|:---:|
|コンシェルジュID|concierge_id| 〇|
|名前|name| |
|年齢|age| |
|性別|sex| |
|メールアドレス|mail| |
|会員番号|customer_id||〇|
|口コミ|review|||
|提供プラン|plan||〇|



【提供プランテーブル】

|  |　列名　|　PK　|　FK　|
|:---:|:---:|:----:|:---:|
|コンシェルジュID|concierge_id||〇|
|提供プラン|plan|||



【プレゼントしたい相手テーブル】

|  |　列名　|　PK　|　FK　|
|:---:|:---:|:----:|:---:|
|プレゼントしたい相手ID|present_id| 〇|
|名前|name| |
|年齢|age| |
|性別|sex| |
|会員番号|customer_id||〇|
|受け取った商品|goods||〇|
|受け取った日付|day|||


【プレゼントした商品テーブル】

|  |　列名　|　PK　|　FK　|
|:---:|:---:|:----:|:---:|
|プレゼントしたい相手ID|present_id|〇||
|受け取った商品|goods||〇|
|受け取った日付|day|||


【商品テーブル】


|  |　列名　|　PK　|　FK　|
|:---:|:---:|:----:|:---:|
|商品ID|goods|〇||
|商品名|goods_name|||
|値段|price|||
Vuetifyの初期画面を表示するまで

マテリアルデザインフレームワークvuetifyの
半日ぐらいかかったので未来の自分へメモ


# Windows版PyCharmでのセットアップ

- Node.jsインストール

[Windows 10へNode\.jsをインストールする \- Qiita](https://qiita.com/echolimitless/items/83f8658cf855de04b9ce)
そのままインストールする

- PyCharmのVue.jsプラグインのインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/c25b73c5-0214-0a09-4984-08bb04d93847.png)

- New Project
Locationのプロジェクト名を任意のものに変更して`Create`ボタン実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/9b658e5f-1343-9289-dc16-7332468ba930.png)

- Terminal

ターミナルウィンドウから`npm install --save-dev @vue/cli`実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/a68a0d7a-08e5-1fe2-e2da-dd380cf6388b.png)

ターミナルウィンドウから`.\node_modules\.bin\vue add vuetify`実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/eafd9e3a-5b98-ec29-1647-d4388a00cdbb.png)

`WARN  There are uncommitted changes in the current repository, it\'s recommended to commit or stash them first.`
 ? Still proceed? (y/N)y  ←yでEnter

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/7b92e3cc-d370-fec2-2e1b-fcf7262c467f.png)


Default (recommended)を選択してEnter

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/3ba1c44f-99b8-3a6b-eb2a-a407cb5dee92.png)

`Shift+F10`実行してブラウザでアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/56fb0781-e350-128b-0f3f-d82a1fad9721.png)


# Linux上でのセットアップ

```bash
$ npm init --yes
$ npm install --save-dev @vue/cli
$ ./node_modules/.bin/vue create --default .
 ? Generate project in current directory? (Y/n)Y ←YでEnter
$ ./node_modules/.bin/vue add vuetify
 WARN  There are uncommitted changes in the current repository, it\'s recommended to commit or stash them first.
 ? Still proceed? (y/N)y  ←yでEnter
 ? Default (recommended)  ←そのままEnter
$ cat vue.config.js
module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
    port: 8080,
    disableHostCheck: true,
  },
}
$ npm run serve

$ npm run build
```

Flaskとの結合は以下参照

[Vue\.js \+ FlaskでWebアプリケーション制作 \- herokuにデプロイするまで \- \- Qiita](https://qiita.com/Nonta0605/items/5d8fa9a8eda9b3b7bc33)


画面変更は以下参照

[Vuetifyに入門する \- Qiita](https://qiita.com/azukiazusa/items/16ebffd361af8fa58333)
メモ　git管理しているプロジェクトに別のリポジトリをgit cloneしたいとき

## リモートから新たに何かクローンしたい

既にgit initされているフォルダに別のモジュールをリモートからクローンしてくる場合を考える

```cmd
$ git clone https://github.com/usr/something
```

これでクローンされた。
statusを見てみる

```cmd
$ git status

Untracked files:
  (use "git add <file>..." to include in what will be committed)
    something/
```

git addすると警告が出る

```cmd
$ git add .
warning: adding embedded git repository: something
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint: 	git submodule add <url> something
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint: 	git rm --cached something
hint:
hint: See "git help submodule" for more information.
```
## 入っている様に見えるが、中身は空！

```cmd
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	new file:   something #この中身が空！
```

別リポジトリからクローンしてきた.gitを消して下記コマンドで解決

```cmd
$ rm -rf something/.git
$ git rm -f --cached something
$ git add .
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	new file:   something/.env.example
	new file:   something/.gitignore
	new file:   something/LICENSE
	new file:   something/Makefile
	new file:   something/README.md
	new file:   something/db/log/.gitignore
	new file:   something/db/my.cnf
	new file:   something/docker-compose.yml
	new file:   something/php/Dockerfile
	new file:   something/php/php.ini
	new file:   something/web/default.conf
```
［Android］ホーム・ランチャーアプリとして起動できるようにする

Android では Home ボタンを押したときに特定のアプリを表示するようになっています。これを一般的にホームアプリやランチャーアプリと言います。例えば Microsoft Launcher などですねこれらをホーム・ランチャーアプリと呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/cddc8f34-9a15-c62f-0abd-ac511c4c72a4.png)

ホーム・ランチャーアプリとして起動するには AndroidManifest.xml の Category にLAUNCHER とDEFAULT を追加します。

```xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.kaleidot725.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Sample">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.Sample.NoActionBar"> 
            <intent-filter>
                <!-- android.intent.action.MAIN をつけるとこの Activity がアプリのエントリポイントになる -->
                <action android:name="android.intent.action.MAIN" />
                <!-- android.intent.category.HOME をつけると起動時に最初に起動する画面として認識される -->
                <category android:name="android.intent.category.HOME" />
                <!-- android.intent.category.LAUNCHER をつけるとホームボタンから起動できる画面として認識される -->
                <category android:name="android.intent.category.LAUNCHER" />
                <!-- android.intent.category.DEFAULT をつけると暗黙的インテントから起動できる画面として認識される -->
                <category android:name="android.intent.category.DEFAULT" />
          </intent-filter>
        </activity>
    </application>
</manifest>
```

LAUNCHER だけを設定すればランチャーアプリになるのではと思ってしまいますが、次のように Home ボタンを押したときに暗黙的インテント経由で起動をしなければならないのでDEFAULTも AndroidManifest.xml に記載しなければならないみたいです。

![Nov-21-2020 21-45-49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79387/ab047602-8afe-4fdb-f697-8597a49a50f7.gif)
JavaScriptで2段階に連動するプルダウンの作成と要素の表示、非表示

備忘録として残しておきます

#HTML

``` choice.html
<select id="parent" onchange="date()" class="form">
  <option value="和食">和食</option>
  <option value="洋食">洋食</option>
  <option value="中華">中華</option>
  <option value="" disabled selected>選択してください</option>
</select>

<select id="children" class="form">
  <option value="" disabled selected>選択してください</option>
  <option value="味噌汁">味噌汁</option>
  <option value="肉じゃが">肉じゃが</option>
  <option value="天ぷら">天ぷら</option>

  <option value="グラタン">グラタン</option>
  <option value="オムライス">オムライス</option>
  <option value="ナポリタン">ナポリタン</option>

  <option value="麻婆豆腐">麻婆豆腐</option>
  <option value="餃子">餃子</option>
  <option value="春巻">春巻</option>
</select>
``` 

#CSS
```choice2.css
#children option:disabled{
  display:none;
}
#children option{
  display:block;
}
```
#JavaScript
```choice3.js
function date() {

//id="parent"の値を取得
var parentlement = document.getElementById( "parent" ) ;

//id="children"を取得
var childrenDate = document.getElementById("children") ;

   //disabledをtrueに
  for (var i = 0; i < childrenDate.length; i++){
       childrenDate.options[i].disabled = true;
  }
	// disabledに代入
     if( parentlement.value == "和食") {
	   childrenDate.options[1].disabled = false;//味噌汁
       childrenDate.options[2].disabled = false;//肉じゃが
       childrenDate.options[3].disabled = false;//天ぷら
     
    } else if( parentlement.value == "洋食") {
	   childrenDate.options[4].disabled = false;//グラタン
       childrenDate.options[5].disabled = false;//オムライス
       childrenDate.options[6].disabled = false;//ナポリタン
    
    } else if ( parentlement.value == "中華") {
	   childrenDate.options[7].disabled = false;//麻婆豆腐
       childrenDate.options[8].disabled = false;//餃子
       childrenDate.options[9].disabled = false;//春巻
    
	 } else if ( parentlement.value = "") {
	   childrenDate.disabled = true;
	}
}
```
和食を選択します。
![スクリーンショット (35).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221011/1cfe3197-a1b4-7d78-8948-5a19e55eeabe.png)
和食を選択すると「味噌汁」「肉じゃが」「天ぷら」以外にdisabledが付きます。



disabledが付いたoptionは非表示になります。

```choice2.css
#children option:disabled{
  display:none;
}
```
display:none;がなければこうなります。↓
![スクリーンショット (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221011/fffbe88a-1afb-35c4-3a56-14899f3cf4a7.png)


#まとめ
このやり方でも一応動きますが、これではメンテナンスがしにくいのでJavaScriptの改善が必要みたいです。


#参考リンク
https://developer.mozilla.org/ja/docs/Web/CSS/:disabled
【初心者でもわかる】セレクトボックスの選択で、リンク先を変更する方法

# どうも7noteです。セレクトボックスで選択された内容ごとにリンク先を変える方法

シンプルなスクリプトで対応が可能です。
検索ボタンを押したときに、リンクする方法と、セレクトの値を変更した瞬間にリンクする方法の2種類のサンプルソースです。


※jQueryを使用しています。jQueryってなんだという方は[こちら](https://qiita.com/7note/items/45bd8efbedd557667218)

## 「検索」ボタンありバージョン

```index.html
<select name="preflist">
  <option value="/hokkaido/">北海道</option>
  <option value="/okinawa/">沖縄</option>
</select>
<button class="btn">検索</button>
```

```script.js
$(".btn").on("click",function(){
  const selected = $("select[name=preflist]");
  window.location.href = selected.val();
});
```


## 検索ボタンなしバージョン（選択を切り換えたらすぐリンク）

```index.html
<select name="preflist">
  <option value="/hokkaido/">北海道</option>
  <option value="/okinawa/">沖縄</option>
</select>
```

```script.js
const selected = $("select[name=preflist]");
selected.on("change",function(){
  window.location.href = selected.val();
});
```

## 解説

**`window.location.href`でリンク先を指定することができます。**
タイミングはボタンありの場合はボタンを押した時、ボタンなしならセレクトの値が変更された時に発火するように作ります。
**とび先のリンクを各optionタグのvalueに入れておくことで、指定のリンク先へ飛ばすことができます。**

参考
https://awesome-linus.com/2019/05/09/select-option-href/

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
効果的なTypeScriptを読んで学んだ4つのこと

> こちらの記事は、[Kaylie Kwon](https://medium.com/@kayliealexa) 氏により2020年1月に公開された『 [4 Things I Learned from Reading Effective TypeScript](https://medium.com/javascript-in-plain-english/4-things-i-learned-from-reading-effective-typescript-59bc5e517f31) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。

# 効果的なTypeScriptを読んで学んだ4つのこと


![壁の前で本で彼女の顔を覆っている](https://miro.medium.com/max/700/0*mK87bpn18D_aq_vb)

>Photo by [Siora Photography](https://unsplash.com/@siora18?utm_source=medium&utm_medium=referral)on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

数日前、私は長時間のフライトでダン・ヴァンダーカム氏の効果的なTypeScript(以下TSとする)を読み終えました。（正確には8時間！）
その本は非常に実践的なアドバイスで簡潔に書かれています。本を読んでいただくことをお勧めしますが、ここに私のお気に入りのコツがいくつかあるのでご紹介します。

##1.エラーによるオブジェクトの変更を防ぐため、“ readonly “を使用すること

配列またはタプルがreadonlyとしてマークされている場合、ユーザーがそれらのオブジェクト内の項目を追加、削除、または更新しようとするとTSはエラーが発生。これは副作用を回避するための関数型プログラミングで特に役立つ。

![画像１](https://miro.medium.com/max/700/1*uBP1rRNGRyZzwh0__3QUmQ.png)

##2.型の再利用性については関数宣言よりも関数式を優先すること

同じ関数シグネチャを持つユーティリティを書き込むと少し繰り返しになる可能性がある。
以下に、入力タイプと出力タイプを毎回再度書き出す必要がある3つのカート関連関数を示す。

![画像２](https://miro.medium.com/max/700/1*A7LyNpTyJ3PKjPs4e041wA.png)
DRY原則を維持するにはシグネチャ全体を関数型に割り当て、関数式の使用に切り替えることができる。

![画像３](https://miro.medium.com/max/700/1*jx3aEgT56vVZHBLu-N3svA.png)

##3.より良い型安全性を得るためにどれよりもunknownを好むこと

anyを使用すれば便利なエスケープハッチになる可能性があるが、それを回避する正当な理由もある。どんな型安全性も保証するものではなく、コールチェーンの上位のコンシューマーからエラーを隠す。
型がunknownの場合にはTSは存在しないメソッドを呼び出す等のエラーを正しく表示する。

![画像４](https://miro.medium.com/max/700/1*AnTYq_BTRoDzn9c1_YLqNw.png)

開発者がコンパイラよりも型についての知識が豊富な場合は意図を明確にするためにダブルアサーションと共にunknownを使用することもできる。

![画像５](https://miro.medium.com/max/700/1*u65Tok4Qi3DP-n8mD13Seg.png)

##4.より良い開発経験のためにJSDocもしくはTSDocスタイルのコメントに傾倒すること

ほとんどの場合においてコメントに型情報を含めることは避けるべき。ただし、移行し、JSを使用してTSを有効にする場合、または関数に関する追加情報を提供したい場合にはJSDocもしくはTSDocが型チェックを行い、IDEと統合するための優れた方法だ。

![画像6](https://miro.medium.com/max/700/1*QDmAcMCzl6SzwdxnPdhOkg.png)

注意：VSCodeは適切にフォーマットされたコメントをツールチップに表示する。

![画像7](https://miro.medium.com/max/700/1*72D6BqFmG-ByOyPUNhcv1Q.png)

---

これでおしまい！
これらのコツを選択したのは既存のコードベースの改善にすぐに適用できるから。お役に立てば幸いです。

# 翻訳協力
Original Author:  **[Kaylie Kwon](https://medium.com/@kayliealexa)** 
Original Article: [4 Things I Learned from Reading Effective TypeScript](https://medium.com/javascript-in-plain-english/4-things-i-learned-from-reading-effective-typescript-59bc5e517f31)
Thank you for letting us share your knowledge! 

この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当: Rie Miyazaki
翻訳担当: Miho Abe 
監査担当: Rie Miyazaki
公開担当: Juri Kimoto 

# ご意見・ご感想をお待ちしております
今回の記事は、いかがだったでしょうか？
・こうしたら良かった、もっとこうして欲しい、こうした方が良いのではないか
・こういったところが良かった
などなど、率直なご意見を募集しております。
いただいたお声は、今後の記事の質向上に役立たせていただきますので、お気軽にコメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
みなさまのメッセージをお待ちしております。
FastAPIでformから複数画像をアップロードできない

# 概要
jsを使ってではなく、普通のhtmlの`<input type="file" ...>`タグからfastapiのバックエンドサーバーに複数画像をアップロードしようとした時にはまった備忘録です。

# 問題コード
```index.html
 <html>
        <head>
            <title>Face Swap App</title>
        </head>
        <body>
            <h1>Look ma! HTML!</h1>
            <form enctype="multipart/form-data" method="post" action="swap">
                <input type="file" id="source" name="file"></input>
                <input type="file" id="target" name="file"></input>
                <input type="submit" value="Face Swap">
            </form>
        </body>
    </html>
```
```main.py

@app.post("/swap", response_class=HTMLResponse)
async def create_swapped_image(files: List[UploadFile] = File(...)):
    print(files)
    return """
    <html>
        <head>
            <title>Face Swap App</title>
        </head>
        <body>
            <h1>Success!</h1>
        </body>
    </html>
    """
```

# 解決法
結論から言えば`input`タグのnameをfastapiのエンドポイントの関数の引数と同じにする必要があるようです！つまりindex.htmlのinputを

```index.html

<input type="file" id="source" name="files">
<input type="file" id="target" name="files">
```
に変えることで解決しました。
全部読んだわけではないですが、こんなこと公式docに書いていた記憶がないのでわかりづらいなあと思いました。書いていたらごめんなさい、、
PythonでPDFにされた表をCSVに戻したい


# 表のデータベースがそのまま欲しかったのに
PDFという形式は人にデータを渡すときや、報告書などに他の資料とまとめて配布するには便利な形式ですが、FIXされてしまっているのでデータの再利用性という意味ではやっかいなことが多々あります。私自身も報告書に何千行という表をA4フォーマットで落とし込んで提出したのはいいが、後日それを利用したいタイミングで元データがなく、PDFから取り出さなければならない事態になったためこちらを書きました。

## 作り方
下のコードを書いてください。また別途tabulaというJavaのライブラリをインストールしておく必要があります。Pyhonのモジュールはあくまでもそのラッパです。

``` Python
import tabula
import PyPDF2
import pandas as pd

FILE_PATH = "./test.pdf"

with open(FILE_PATH, mode='rb') as f:
    pages = PyPDF2.PdfFileReader(f).getNumPages()

for i in range(pages+1):
    tmp = tabula.read_pdf(FILE_PATH, pages = i, encoding = "utf-8_sig", spreadsheet=True)
    df = pd.concat([df, tmp], ignore_index=True)

df = tabula.read_pdf(FILE_PATH, lattice=True, pages = '1' )
   
df[0].to_csv("./test.csv", encoding="shift_jis")
```

## 使い方
上の.pyファイルを実行するだけです。
よいPDFライフを。
MySQLと MariaDBの比較

## RDBのMySQLとMariaDB
どちらも開発者は同じでMyは長女、Mariaは次女の名前だそう。


## MySQL
- MySQL自体の歴史が長く、現在はIT大手のOracle社が開発を担当しているので安心感がある。
- CMS(コンテンツ・マネジメント・システム)に積極的に採用されている。Wordpressなど。
- 「Youtube」や「Netflix」が使用している。

## MariaDB
- MySQLの派生でビッグデータの集計を得意としている。
- 冗長構成（情報システムなどの構成の一種で、設備や装置を複数用意し、一部が故障しても運用を継続できるようにしたもの。）を構築できる仕組みが提供されている。
- クラスタ構成（複数のサーバを連携させて利用者や他のサーバから、全体で1台のサーバであるかのように動作させる技術）データベース構築を行える。
- 負荷分散の仕組みが提供されている。
- 「SAMSUNG」や「NOKIA」が使用している。

## まとめ
MariaDBの方がMySQLよりも高スペックな上に多機能である。
大きなデータを扱う時にはMariaDBの方が高速に処理できる。


## 参考
https://www.winserver.ne.jp/column/about_mariadb/
https://style.potepan.com/articles/19653.html#MySQLMariaDB-2
プロゲートProgate　HTML＆CSS道場コース中級編終えました

<h2>学んだことまとめ</h2>
プロゲート　HTML＆CSS道場コース中級編２周目を終えました。
自力でやりました！
２回目は１回目の半分以下の時間で終えることができました。

<h3>つい見過ごしがちなこと</h3>
・要素を中央に寄せるにはmargin:autoを使う
・position absoluteには％が指定できる
・widthや中央揃えは親要素にきいてくる
・２つのクラスをCSS設定するときは、.top .btnのように「.」で続けて記す
・2つのタグをCSS設定するときは、footer imgのように半角スペースを空けて続けて記す
・:hoverの前に半角スペースはいらない
・画像アイコンと文字を重ねるときのクラス設定は同じにする
golangのos/execでMakefileのmakeコマンドを実行しようとすると2回目以降の実行がエラーになる


## 原因
わからん

## 対処方法
シェルでmakeコマンドを呼び出すようにする


### Go側
- フルパスじゃなくても大丈夫のはず

```golang

		cmd := exec.Command("/home/yuta/AWS/go/bin/exec.sh", domain.Name)
		cmd.Run()
```

### シェル側

- 事前にchmodで実行権限をつけてあげる

```exec.sh
#!/bin/sh

cd /home/yuta/AWS
make make-env-config ENV_FILE=.env DOMAIN_NAME=${1}
```
【まとめ】Qiita Markdown書き方

#はじめに
QiitaのMarkdown記法をまとめました。
自身の備忘録も兼ねて、基本的なものを中心にまとめています。


#目次
1.見出し
2.引用
3.コードの挿入
4.リンクの挿入
5.画像の挿入
6.文字の装飾
7.テーブル
8.水平線
9.リスト
10.マークダウンのエスケープ
補足.Markdownでページを見る

#1.見出し
文頭に#を付ければOK。
\#の数で見出しサイズを変更できる。
例
>#見出し(大)
>\#見出し(大)
>##見出し(中)
>\##見出し(中)
>###見出し(小)
>\###見出し(小)

#2.引用
\>を書くだけでOK。
ちなみに、ネスト構造も可能。
例
>一段
>\>一段
>>ネスト
>>\>>ネスト

#3.コードの挿入
コードを\`\`\`(バッククォート3つ)でくくればOK。
`は、Shift+@で入力できる。
※前後に空行を入れること。
例
>\`\`\`
>echo "Hello World!"
>\`\`\`
>と入力すると、
>
>```
>echo "Hello World!"
>```

また、シンタックスハイライトを入れることもできる。
対象言語は以下を参照。
[Qiitaでシンタックスハイライト可能な言語一覧](https://qiita.com/Qiita/items/e84f5aad7757afce82ba)

>\`\`\`bash
>echo "Hello World!"
>```
>と入力すると、
>
>```bash
>echo "Hello World!"
>```

ファイル名を入れるには、\`\`\`bash:ファイル名 とする。
>\`\`\`bash:Hello.bash
>echo "Hello World!"
>```
>と入力すると、
>
>```bash:Hello.bash
>echo "Hello World!"
>```

コードブロックの左上にファイル名が付いたことがわかる。

#4.リンクの挿入
\[リンクテキスト](リンク先URL)とすればOK。
例
>\[Google](https://www.google.com/?hl=ja)
>と入力すると、
>[Google](https://www.google.com/?hl=ja)

リンクにtitle属性をつける場合は、\[リンクテキスト](リンク先URL "title属性名")とすればOK。
例

>\[Google](https://www.google.com/?hl=ja "グーグル")
>と入力すると、
>[Google](https://www.google.com/?hl=ja "グーグル")



#5.画像の挿入
\!\[代替テキスト](画像URL)とすればOK。
例

>\!\[Qiita](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)
>と入力すると、
>
>![Qiita](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)
>

title属性を付ける場合は、リンクと同様に\!\[代替テキスト](画像URL "title属性名")とすればOK。
例

>\!\[Qiita](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "キータ")
>と入力すると、
>
>![Qiita](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "キータ")
>


#6.文字の装飾
・イタリック：対象部分を「_」または「*」で囲む
・太字：対象部分を「\_\_」または「**」で囲む
例

>イタリック
>\_Qiita\_
>
>_Qiita_
>
>太字
>\_\_Qiita\_\_
>
>__Qiita__


#7.テーブル
基本的に「|」を使って枠を組めばOK。
2行目に左揃え、中央揃え、右揃えを指定する。(コロンの位置に注意)
例

>\|左揃え\|中央揃え\|右揃え\|
>\|:---\|:---:\|---:\|
>\|align-left\|align-center\|align-right\|
>\|左揃えです\|中央揃えです\|右揃えです\|
>
>と入力すると、
>
>|左揃え|中央揃え|右揃え|
>|:---|:---:|---:|
>|align-left|align-center|align-right|
>|左揃えです|中央揃えです|右揃えです|


#8.水平線
「*」か「_」かを3つ以上並べて書けばOK。
例

>\*\*\*
>\＊\＊\＊
>\_\_\_
>\＿\＿\＿
>と入力すると、
>全て以下の水平線となる
>***

#9.リスト
・順序なしリスト：「*」か「+」か「-(ハイフン)」を文頭に付ければOK。
・順序付きリスト：文頭に「数字.」を付ければOK。
記号と文章の間に、半角スペースを入れることに注意。
例

>\* 順序なしリスト
>と入力すると、
>
>* 順序なしリスト
>
>\1. 順序付きリスト1
>\2. 順序付きリスト2
>と入力すると、
>
>1. 順序付きリスト1
>2. 順序付きリスト2


#10.マークダウンのエスケープ
エスケープしたいMarkdownの前に「\」を付ければOK。
例

>\\* 順序なしリスト
>と入力すると、
>\* 順序なしリスト
>
>のように、Markdownが無効になっている。
>記事の中で多用しています。


#補足.Markdownでページを見る
Qiitaの記事をMarkdownで読みたい、どうやって書いているのか気になるときは、
URLの最後に、「.md」を付ければOK。

記事右上のメニューから、「Markdownで本文を見る」を選択してもOK。


##参考
以下を参考に記載しました。
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF)
【CSS】グラデーションを使った感触を記録3（反復と合成）


[【CSS】グラデーションを使った感触を記録（基本と線形）](https://qiita.com/noenture/items/e487c6ebd73faee8cdbc)
[【CSS】グラデーションを使った感触を記録2（放射と扇形）](https://qiita.com/noenture/items/eb106a6b6aed3100f28d)
**【CSS】グラデーションを使った感触を記録3（反復と合成）**


#反復（repeating-）
`repeating-`を先頭に付けるとグラデーションを反復します。

|種類|関数|反復|
|:--:|:--:|:--:|
|線形|linear-gradient|repeating-linear-gradient|
|放射|radial-gradient|repeating-radial-gradient|
|扇形|conic-gradient|repeating-conic-gradient|

##色経由点の配置
これまでグラデーションの終点はボックスの端（100％）に設定されていました。
しかし、それでは反復させても（放射以外では）意味がないのでグラデーションのサイズ（終点）を自由に決めることができるようになります。

これにより、始点と終点の使い勝手が変わります。

###終点の設定
ボックスの端（100％）**以外**にしたい時は、最後に値を設定します。

```
repeat-linear-gradient(90deg,red,blue,green 50%);
repeat-linear-gradient(90deg,red,blue,green 100px);

repeat-radial-gradient(90deg,red,blue,green 40% 50%);
repeat-radial-gradient(90deg,red,blue,green 80px 100px);

repeat-conic-gradient(90deg,red,blue,green 50%);
repeat-conic-gradient(90deg,red,blue,green 45deg);
```

###始点の設定
始点色に色経由点を設定する時は、これまでと違い`0`を挿入します。

```
repeat-linear-gradient(90deg,red,blue,green 100px);
repeat-linear-gradient(90deg,red 0 30px,blue,green 100px);
```

以下のような書き方も見受けられます。

```
repeat-linear-gradient(90deg,red,red 30px,blue,green 100px);
```

###色経由点の％設定
グラデーション幅に対しての割合ではなく、ボックス端に対しての割合なので注意


##使用例
![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/3486a8f4-e906-a86d-b6e2-de4ca6823aab.png)

```css:
.box1 {
	background:
		repeating-linear-gradient(
			90deg,red,blue,green
		);
}
.box2 {
	background:
		repeating-linear-gradient(
			90deg,red,blue,green 50%
		);
}
.box3 {
	background:
		repeating-linear-gradient(
			90deg,red,blue,green 100px
		);
}
.box4 {
	background:
		repeating-linear-gradient(
			90deg,red 0 15%,blue,green 100px
		);
}
```


#合成
複数のグラデーションを重ね合わせることで、様々な表現が可能となります。
この場合、`transparent`や透過色`rgba()`を主に使用します。

重ね方は下記のように`,`でグラデーションを連結させることが出来ます。

```css
.box {
	background:
		repeating-linear-gradient(
			transparent 0 15px,red 15px 30px
		),
		repeating-radial-gradient(
			transparent 0 15px,blue 15px 30px
		),
		repeating-conic-gradient(
			transparent 0 15deg,green 15deg 30deg
		);
}
```
上記コードで画像のようになります

![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/791791e6-af97-3ada-5d5a-6cf544beebf2.png)

重ね順は、最初に書いたものが一番上となり、下へ追加していきます。

![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679638/75aa7e3c-7a6b-6d96-7939-f767b49527d9.png)

画像にしてみましたが伝わるかな。

ここでは詳しく触れませんが、最後に画像を追加することでエフェクトを加えたように見せる事もできるみたいです。


#終わりです
お付き合いありがとうございました。

#参考サイト

[CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
プログラミングを始めて2週間

①現状分析
＊再試験を3回受けたので、試験で間違えた章はメモをしてその場で復習する。
＊基礎の理解度はまだまだ不十分なので、度々わからなくなったら基礎に戻る癖をつける。
＊時間が経つと忘れることも多いので、必ずドリルも往復する。

②学習方法
＊問題集を買ってアウトプットの量を増やす。
＊3回以上はカリキュラムをやって、森（ペストリー）→林（菓子パン）→木（メロンパン）の順番で理解度を高める。
＊質問は自分の認識のしかたや自分で考えた結果を伝えた上で教えを乞う。

③モチベーション
＊常にIT業界で自分が働いているイメージをしながら学習し、理想から逆算する。
＊土日はZOOMを使わないので、気分転換にカフェなどで学習する。
＊チーム内でプログラミングとは関係ない少しプライベートな話をする。

④今後やること
＊発見したことをチームに共有する。
＊チーム内でも質問や相談をしてわかる人に聞く。
＊週に2日は休肝日を作る。

以上
AccessのVBAについて、ループ内でAs New使う時は注意ね！（別インスタンスにならないから）

#連想配列のクラス使って検証しますん
この記事の例は **Scripting.Dictionary** を使うので、VBEの参照設定で **Microsoft Scripting Runtime** にチェックを入れる必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/8f550d37-a6e9-d5e9-3b4a-8382e0fb999c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/06956dd2-4202-2e6c-5687-4780c855da46.png)


#クラスをインスタンスする時、As Newはお手軽
ほいじゃあ連想配列使いましょうってなった時に、変数の宣言とインスタンスは…

```vb:
Dim dic_ As Scripting.Dictionary
Set dic_ = New Scripting.Dictionary
```
…のように、まずは変数を用意して、その後にSetっていうのがよくあるパターン。

でも、下記のように宣言と格納をひとまとめにもできる。

```vb:
Dim dic_ As New Scripting.Dictionary
```
**As New** ちょっと便利。


#トラップ
さて、ループ内でAs Newを使うとどうなるか……。

```vb:
Dim i_ As Long
For i_ = 1 To 3
    
    Debug.Print i_ & "のループいくよ！"
    
    '連想配列をインスタンスして中身入れる
    Dim dic_ As New Scripting.Dictionary
    dic_.Add i_, i_ & "ですが何か？"
    
    '連想配列の中身を確認
    Dim dic_key_ As Variant
    For Each dic_key_ In dic_
        Debug.Print dic_key_ & "の中身は" & dic_.Item(dic_key_)
    Next
    
Next
```
さて、上記の結果は…

```
1のループいくよ！
1の中身は1ですが何か？
2のループいくよ！
1の中身は1ですが何か？
2の中身は2ですが何か？
3のループいくよ！
1の中身は1ですが何か？
2の中身は2ですが何か？
3の中身は3ですが何か？
```

うーん…なんかちょっと変だね…(´・ω・`)
**ループ内で別インスタンスしてる『つもり』なのに、前回のループ内容引き継いでしまってる**


As Newを繰り返しても別インスタンスにはならないんでごわす。
別インスタンスにしたい時は **Set** する必要があるん。

```vb:
Dim i_ As Long
For i_ = 1 To 3
    
    Debug.Print i_ & "のループいくよ！"
    
    '連想配列をインスタンスして中身入れる
    'As New ではなく、Setをしないと別インスタンスにならないから注意！
    Dim dic_ As Scripting.Dictionary
    Set dic_ = New Scripting.Dictionary
    
    dic_.Add i_, i_ & "ですが何か？"
    
    '連想配列の中身を確認
    Dim dic_key_ As Variant
    For Each dic_key_ In dic_
        Debug.Print dic_key_ & "の中身は" & dic_.Item(dic_key_)
    Next
    
Next
```

さて、上記の結果は…

```
1のループいくよ！
1の中身は1ですが何か？
2のループいくよ！
2の中身は2ですが何か？
3のループいくよ！
3の中身は3ですが何か？
```
As New の時と違うね。

**As Newすれば別インスタンスが格納される** という先入観で作ってしまうと間違いの元になりんす。


#蛇足
AccessやVBAにはトラップがいっぱい…(´・ω・\`)
いい意味で鍛えられるよ……ははは(´・ω・`)

#バージョン
Windows10 Pro バージョン20H2 OSビルド19042.630
Access for Microsoft 365 MSO（16.0.13328.20334）32ビット
GitHub で2つのアカウントのSSH鍵とレポジトリを使い分ける方法

GitHub で2つのアカウントを使い分けているエンジニアは多いことでしょう。例えば、組織用アカウントと個人用アカウントを持っているエンジニアは、それぞれのアカウントで異なるリポジトリーに対して作業しているはずです。

1つのアカウントで作業している時は、ユーザー名やSSH鍵の使い分けを意識することはありません。しかし、2つになると、コミットログに書き込まれるユーザー名やメールアドレスを使い分けたり、`git pull/push` 時に使うSSH鍵を使い分ける必要が出てきます。

以下に、自動で設定を使い分ける方法を記します。


やりたいこと
----


* それぞれの作業フォルダーでコミット時、対応するユーザー名とメールアドレスを使う
* `git pull/push` などリモート操作をする時、アカウントに対応するSSH鍵を自動で使い分ける
    * リポジトリAでは、ユーザーAのSSH鍵を使う
    * リポジトリBでは、ユーザーBのSSH鍵を使う

今回は以下のように、2つのアカウントを使い分ける想定で進めます。

| |仕事用|個人用|
|----|----|----|
|アカウント名|john|bob|
|リポジトリ|john/project-john.git|bob/project-bob.git|


設定方法
----

### アカウントに対応する公開鍵を作成する

まずはそれぞれのアカウントに対応するSSH鍵ペアが必要です。 `ssh-keygen` で作成してください。今回は鍵ファイルに `id_rsa_<アカウント名>` という名前を付けます。

```bash
cd ~/.ssh

ssh-keygen -t rsa -f id_rsa_john
(パスフレーズを入力、またはそのまま Enter 2回)

ssh-keygen -t rsa -f id_rsa_bob
(パスフレーズを入力、またはそのまま Enter 2回)
```

これで秘密鍵と公開鍵のペアが作成されます。


### 公開鍵を GitHub にセットする

ユーザーA,B それぞれのアカウントで GitHub にログインし、 *"Settings > SSH and GPG Keys"* 画面から、対応する公開鍵 (`id_rsa_<アカウント名>.pub`) を登録してください。

:bulb: 公開鍵の登録方法: [Adding a new SSH key to your GitHub account \- GitHub Docs](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account)


### ローカル git config を設定する

それぞれの作業フォルダーで使用するユーザー名とメールアドレスを設定します。これらはコミットメッセージに記録されます。

```bash
cd ~/project-john
git config --local user.name "John"
git config --local user.email "john@example.com"

cd ~/project-bob
git config --local user.name "Bob"
git config --local user.email "bob@example.com"
```

:bulb: フォルダー内の `.git/config` を直接編集しても OK です。


### ~/.ssh/config を設定

続いて、リポジトリ毎にSSH鍵を使い分けるようにするため、`~/.ssh/config` ファイルを編集しします。

以下のように `Host` 行と `IdentityFile` 行を書き分けてください。

```conf
# 会社用: SSH鍵 id_rsa_john を使う
Host github.com.john
    Hostname github.com
    User git
    IdentityFile ~/.ssh/id_rsa_john

# 個人用: SSH鍵 id_rsa_bob を使う
Host github.com.bob
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_bob
```


### リモート URL に、上で設定したホスト名を指定する

最後に再び git config を設定します。以下のように、リモートURLに `git@<ホスト>:<リポジトリURL>` を指定してください。

```bash
cd ~/project-john
git remote set-url origin git@github.com.john:john/project-john.git

cd ~/project-bob
git remote set-url origin git@github.com.bob:bob/project-bob.git
```

これで、 `~/.ssh/config` で設定した Host に対応するSSHキーが使われるようになります。


### 設定確認＆動作確認

```bash
cd ~/project-john
git pull
# => id_rsa_john が使われて pull 成功すれば OK

cd ~/project-bob
git pull
# => id_rsa_bob が使われて pull 成功すれば OK
```



参考
----

- [\.ssh/configファイルでSSH接続を管理する \- Qiita](https://qiita.com/0084ken/items/2e4e9ae44ec5e01328f1)
- [\[備忘\] 複数Githubアカウントでssh接続設定\(config\)を使い分ける手順 \- Qiita](https://qiita.com/yampy/items/24638156abd383e08758)
- [Git でユーザー名とメールアドレスを設定する方法（全体用とプロジェクト用） – ラボラジアン](https://laboradian.com/set-git-johnnd-email/)
vue-routerの戻るボタンを押してback()した時は処理を変えたい

# 目的
`<keep-alive />` やvuexを使った場合、ブラウザのメモリ上にデータが残る
これらの機能を使った一覧画面の場合、

* 過去データをそのまま表示するか？
* サーバーに再検索するか？

の判断が必要になるケースが稀にある。

例えば、戻るボタン、backで画面遷移したい場合は過去の検索結果のデータを表示し、
メニュー等、他からの画面遷移なら再検索させたい場合がこれにあたる

# 案
vuer-router経由で読み込むPage Componetに対して、
共通でextendsするcomponentとして下記を定義する

```js
export default {
  name: 'base-page',
  beforeRouteLeave(to, from, next) {
    if (this.backing) to.params.isBack = true
    this.backing = false
    next()
  },
  data() {
    return {
      backing: false,
    }
  },
  computed: {
    isBack() {
      return this.$route && this.$route.params.isBack
    },
  },
  methods: {
    backPage() {
      this.backing = true
      this.$router.back()
    },
  },
}
```

一覧ページなどの戻るボタンで戻るページでは下記のように処理分岐する

```vue
<script>
import BasePage from '../base-page.js'

export default {
  extends: BasePage,
  beforeRouteEnter: function () {
    if (this.isBack) {
      // 戻るボタン経由の場合
    } else {
      // それ以外の場合
    }
  },
}
</script>
```

戻るボタンでは、`backPage`メソッドを呼び出す。
もしくは、ブラウザのback eventを監視し、`backPage`メソッドと同様の処理を行わせる
Scala で AWS の SECRET_KEY とかじゃない Credential を使う方法

com.amazonaws.auth.DefaultAWSCredentialsProviderChain を使うと良いかなと。

```scala
import com.amazonaws.auth.{AWSCredentialsProvider, DefaultAWSCredentialsProviderChain}
import com.amazonaws.services.kinesis.clientlibrary.lib.worker.{InitialPositionInStream, KinesisClientLibConfiguration, Worker}

val awsCredentialsProvider: AWSCredentialsProvider = new DefaultAWSCredentialsProviderChain()
val kclConf = new KinesisClientLibConfiguration(appName, streamName, credentialsProvider, workerId)
```

```
scalaVersion := "2.11.12"

libraryDependencies ++= Seq(
  "com.amazonaws" % "amazon-kinesis-client" % "1.6.5"
)
```
エラーや実行完了をLINEで通知する【Python】

#はじめに
機械学習などをやっていると1つのプログラムの実行に数日かかるなんてことは珍しくありません．
プログラムの実行状況が気になり，数時間おきに端末を開く．
そんな日々を送っていませんか？
そんな人のために，今回はPythonプログラムのエラーや実行完了をLINEで通知する方法を紹介します．
LINEアカウントを持っている人なら10分程度でできるので是非！


#LINE Notifyの準備
通知を送るためにLINEが提供するLINE Notifyというサービスを使います．

まずは，ここからトークンを発行します．
https://notify-bot.line.me/my/

右上のログインボタンからLINEアカウントにログイン後，以下のような手順でトークンを発行&コピーします．

![手順１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/9715b8a5-27a1-30b9-7fde-39ddfc3aa553.png)

![手順２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/5c0b9c29-4016-6522-add6-a125b3e7608d.png)

トークン名は好きに設定してください．今回は「実行結果通知」としています．
![手順３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/2202de05-a4e1-fe95-9d2a-7e082a221a29.png)

ここで必ずコピーしてください．
![手順４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/8508ccd0-ae78-e982-95bb-0c4275faf353.png)

これでLINE Notifyの準備は完了です．

#LINE通知用のPythonプログラム
以下のプログラムをコピペし，トークンの部分を変更するだけでOKです．
（`pip install requests`が必要かも）

```python:line_notify.py
import requests

# LINEに通知する関数
def line_notify(message):
    line_notify_token = 'ここにトークンをペーストしてください'
    line_notify_api = 'https://notify-api.line.me/api/notify'
    payload = {'message': message}
    headers = {'Authorization': 'Bearer ' + line_notify_token} 
    requests.post(line_notify_api, data=payload, headers=headers)

if __name__ == '__main__':
    message = "Hello world!"
    line_notify(message)
```

`python line_notify.py`を実行すると，LINEに"Hello world!"とメッセージが届くはずです．

#エラーや実行完了を通知
あとは，例外処理などと組み合わせて通知するだけです．
試しに以下のプログラムを実行してみます．

```python:hoge.py
import requests

# LINEに通知する関数
def line_notify(message):
    line_notify_token = 'ここにトークンをペーストしてください'
    line_notify_api = 'https://notify-api.line.me/api/notify'
    payload = {'message': message}
    headers = {'Authorization': 'Bearer ' + line_notify_token} 
    requests.post(line_notify_api, data=payload, headers=headers)

# a/bを計算する関数
def foo(a, b):
    return a / b

if __name__ == '__main__':
    try:
        ans = foo(1, 0)
    except Exception as e:
        line_notify(e)
    else:
        line_notify("finished")
```
![実行結果1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/fbd625cf-2660-3376-b758-98e13f18fe77.jpeg)
foo(1, 0) を foo(1, 1) と変更して実行してみます．
![実行結果2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840171/01aca86e-37cd-69e9-a0ed-cdb54010de1b.jpeg)
正しく通知できていますね．

#参考

+ [たったの2ステップでLINEにメッセージを通知する方法【python】](https://sinyblog.com/python/line/)
+ [PythonでLINE Notifyへ通知を送る](https://qiita.com/akeome/items/e1e0fecf2e754436afc8)
vue.js vuetify使って検索窓

###１まずは、検索窓の入力をvalueにして、searchにいれる



```Searchi.vue
検索窓見た目

<template>
 <!-- 検索窓　親app.vue-->
  <v-text-field
    :value="$store.state.search" 　●追加
    @input="$store.commit('setSearch',$event)"　●追加

    @focus="searchClosed = false"
    @blur="searchClosed = true"
    class="expanding-search mt-1"
    :class="{ 'closed' : searchClosed && !$store.state.search}"
    placeholder="Search"
    prepend-inner-icon="mdi-magnify"
    filled
    dense
    clearable
  ></v-text-field>
</template>
```



```store.js
データが保管されるところ

export default new Vuex.Store({
  state: {
    search:null,　●追加

.....いろいろ...

 mutations: {
    setSearch(state,value){　●以下追加
      state.search = value
      console.log('value',value)
    },
```





イメージ
$eventは特殊らしい
ステートの値が、バリューとミューテーションでsetSearchに加工された
![プログラミング-22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898667/f182314f-fc19-8527-cd66-0c2d4307c6d3.jpeg)



###２，次は、検索窓に入力したものと、タスクを一致させて呼び出す


```store.js


export default new Vuex.Store({
  state: {
    search:null,
    tasks:[   ●入ってるデータ
      {id:1,
        title:'Wake up',
        done:false,
        dueDate:'2020-10-16'
      },
      {id:2,
        title:'get banana',
        done:false,
        dueDate:'2020-10-16'
      },
      {id:3,
        title:'eat banana',
        done:false,
        dueDate:null
      },
    ],
  getters:{ ●追加一致してるものを呼び出す
    tasksFiltered(state){　●作成
      if(!state.search){　●stateが入っているなら
        return state.tasks　●タスクのデータ全部返す
      }
      return state.tasks　●配列になってるタスクの中から
       .filter(task => ●一致するものをループで呼び出して
         task.title　●タスクタイトルの
         .toLowerCase()　●大文字小文字
         .includes(state.search.toLowerCase())　●検索窓に含んでるやつ
      )
    }
  }
```


```ListTask.vue
タスクの見た目
親のコンポーネントではループ処理をしているのでゲッターで一致してるやつを呼び出すようにする
    <task
        v-for="task in $store.getters.tasksFiltered" ●ゲッターを適応
        :key="task.id"
        :task="task"
    ></task>

```


![プログラミング-22 3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898667/218784c4-fded-6664-4ea7-95d3b9a1f6cd.jpeg)




これで、データの中身を検索窓から取り出せるようになった。
ムズい！！！
ので、図でまとめないとわからん！！
VisualStudioのプロパティシートについて　～備忘録～

OpenCVを始めたこの頃。外部ライブラリを取り込んでデバッグするには、パスやデバッグ用のビルドファイルをVisualStudioに教えてあげなきゃいけないことを知り、大いに驚いています！！（当たり前ダゾッ
さておき、書き留めていきましょうか。


###1. プロパティシートとは？
OpenCVをVisualStudioに組み込むにあたって、パスやデバッガの設定をするのは面倒です。しかも、プロジェクトを新しく作るたびにやらなきゃいけないんですよね。やることごとにプロジェクトを分けたい！　って考える私としては、死活問題でした。そこで、このプロパティを使いまわせる機能を探していたのですが……ありました！　プロパティシートというものを使えば、設定を使いまわせるようです！

凄く便利そうですよね？　ですがコイツ、大変クセがありました。今回は仕様の理解にかなりの時間を持っていかれたので、記録しておくことにします。これからプロパティシートを使う、という人は注意してくださいね。

###2. 使い方(要注意！)
プロパティシートの作成は簡単です。
1. VisualStudioで、[表示]→[その他のウィンドウ]→[プロパティマネージャー]と選択する
2. 出てきたウィンドウのプロジェクト部分を右クリック
3. 新しいプロジェクト プロパティシートの追加
4. 適当な名前と保存場所を選んで保存する

これだけです。特にむつかしいことはありません。
逆に、新しいプロジェクトにプロパティを反映させるときも、同じような手順になります。

5. VisualStudioで、[表示]→[その他のウィンドウ]→[プロパティマネージャー]と選択する
6. 出てきたウィンドウのプロジェクト部分を右クリック
7. 既存のプロパティシートの追加
8. 先ほど追加したプロティシートを選択する。

以上です。
###がっ！！！
実はこれでは設定は反映されていません！　理由は単純です。手順4で作ったプロパティシートは、__完全初期状態のプロパティシート__だからです！
いやいや、既存のプロジェクトから作ったのに、なぜ反映されとらんねん！ と突っ込みたくなりますが、調べても既存の設定をエクスポートする機能は出てきませんでした。

なので、手順4の後に、以下のことをしなければなりません。

4.1. プロパティマネージャーの隠しボックスを開いて、なんでもいいのでその下の隠しボックスを開く
4.2. 手順4で追加した名前のファイルが入っているので、それを右クリック(画像の右側の奴です)
4.3. プロパティの設定をし直す()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598536/7a93a2ed-d08f-b97e-fe3e-37ab1f5959b2.png)

これで初期状態のファイルが反映され、新しいプロジェクトでもプロパティが更新されます。
ただ、まだ注意点があります。それは、デバッグとリリースごとの設定ができないこと。
大きなライブラリは基本、デバッグ用とリリース用で違うビルドファイルが用意されていることが多いそうです(リリース用は無駄な機能を省いて、軽くて速いらしい)。この2つを分けて設定できないので、ここでけは新しいプロジェクトで設定し直さなきゃいけないみたいです。

……面倒ですが、まあ位置から設定しなおすよりかは100倍マシでしょうね。
以上になります。
AWS IoTでm5stackのデータをDynamoDBに保存


##目的
m5stack fireのmpu6886から加速度センサとジャイロセンサのデータをデータベースに保存する
##手順
###1.まずはAWS IoTを立ち上げる。
以下のサイトを参考にAWS IoTを立ち上げました。
https://thinkit.co.jp/article/17360
証明書はダウンロードしておく。
ポリシードキュメントは以下のように権限を変更すると上手く行った。

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "iot:Connect",
        "iot:Publish",
        "iot:Receive",
        "iot:Subscribe"
      ],
      "Resource": "*"
    }
  ]
}
```

###2.Arduino IDEでm5stackに書き込み。
今回はm5stack fireのmpu6886で加速度センサとジャイロセンサのデータを取得したいので、以下のコードを使用。
https://github.com/MypaceEngine/m5stick_mpu6886_awsiot

ArduinoのPubSubClientをインストールも必要です。
srcフォルダのMQTT_MAX_PACKET_SIZEを128を2048にした方が良いそうです。

```c:PubSubClient.h
#define MQTT_MAX_PACKET_SIZE 2048 //128
```

ソースの変更点としては、
・wifiのssid
・wifiのpass
・awsEndpoint(AWS IoTの設定より確認可能)
・pubTopic(任意の名前)
・subTopic(任意の名前)
・rootCA証明書(1でダウンロードしたものをテキストエディタで開く)
・AWS IoT証明書(1でダウンロードしたものをテキストエディタで開く)
・AWS IoT秘密鍵(1でダウンロードしたものをテキストエディタで開く)
・AWS モノの名前(任意の名前)

出来たら、m5stackに書き込んでください。

###3.テスト
以下のサイトを参考にAWS IoTとm５stackが接続されているかをテスト出来ます。
http://kyokucho1989.chillout.jp/2019/08/19/m5stack%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9Faws-iot%E3%81%AE%E7%B0%A1%E5%8D%98%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9/

私はこの時点で証明書のコピペの間違いと、ポリシードキュメントの権限(subscribeの権限)が足りておらず、悩みました。
上手くいかない方はこちらを参照されるといいかもしれません。
https://blog.maripo.org/2017/07/esp32-aws-iot-troubleshooting/

###4.DynamoDBと接続
以下のサイトを参考に接続
https://thinkit.co.jp/article/17384
今回このサイトと違いlambdaは使用していないので、少し手順は違いますが、そこまで難しくないはずです。

DynamoDBに加速度、ジャイロのデータが入っていれば成功です！

##最後に
このシステムを作りながら、AWSってすごいな〜と感心しました。
実際、ESP32の機能やデータベースの知識ほぼなくてもできちゃうので。(勉強します)
ここからArduino IDEのスケッチで計測データの加工や、サンプリング周波数を調整したり、データベースの構造を変えたり、頑張ります〜
二つの画像を融合する

#前提条件
RGB同士またはグレースケール同士の画像を利用すること。どちらかが異なるカラースケールの場合、融合ができないです。

#処理内容
読み込みされた二つの画像を一つの画像として融合され、表示されます。画像のサイズ調整がされるため、元々の2個の画像のサイズは異なっても問題ないです。

```imgmerge.py
import cv2

#read image 1
img1 = cv2.imread("cat1.jpg")
#read image 2
img2 = cv2.imread("cat2.jpg")

#set the size of two images to the same size. can't merge image of different size.
img1 = cv2.resize(img1,(306,148))
img2 = cv2.resize(img2,(306,148))

#set weight of image 1
alpha = 0.3
#set weight of image 2
beta = 0.7

#merge image
final_image = cv2.addWeighted(img1, alpha, img2, beta, 0.0)

#show result
cv2.imshow('Img',final_image)
#leave window open until it is closed
cv2.waitKey(0)
```
LaravelのSeeder実行時に「Class 'Database\Seeders\Datetime' not found」エラーが出たときの対処法


# 背景
LaravelでSeeder実行時に少々詰まったので共有します。

# 環境
Laravel Framework 8.15.0

# 現象
Seederファイルを用意した状態でSeederを実行するとエラーが発生する

```terminal
$ php artisan db:seed
Seeding: Database\Seeders\FutsalsTableSeeder

   Error 

  Class 'Database\Seeders\Datetime' not found

  at database/seeders/FutsalsTableSeeder.php:22
     18▕             [
     19▕             'name' => 'futsal 1',
     20▕             'place' => 'tokyo',
     21▕             'url' => 'xxx',
  ➜  22▕             'created_at' => new Datetime(),
     23▕             'updated_at' => new Datetime()
     24▕         ],
     25▕             [
     26▕             'name' => 'futsal 2',
```

# 原因
Datetimeに関して、use宣言をしていないため

# 解決策
```use DateTime```を追記すればOKです。

```php:HobeTablesSeeder.php
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
use DateTime; // ←これを追加

class FutsalsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
　　　// 省略
    }
}
```

参考
https://stackoverflow.com/questions/52074184/laravel-error-class-app-http-controllers-datetime-not-found
【Unity】Getcomponentがめんどくさいのでpublic staticで爆速でコードを書く。

#public staticに至った経緯
Unityでゲームを作っているときにほぼ必須のGetcomponent。
自分は**スクリプトの変数**を**違うスクリプト**から取得したいときによく使うのですが、毎回GetComponent<>()とかを使って、<>←これの中にはクラス名をいれて...などとしていては、とても面倒ですし他にやり方がないものか、と思っていたら、シングルトン[^1]であるならば、public staticで直接他のスクリプトから変数を取得できるやり方があるらしいです。
#書いてみた

```C#:SingletonScript.C#
public class Player : MonoBehaviour
{
  public static Player player;  //public staticして、クラスの名前を書いて、適当な変数(ここではplayerとする)を宣言
  public int playerHp = 100;
  void Start(){
    player = this;
  }
}
```
このスクリプトのplayerHpを他のスクリプト(ここでは敵スクリプト)から取得したい場合、

```C#:プレイヤーの体力変数が欲しい敵.C#
public class Enemy : MonoBehaviour
{
  void Start(){
    Player.player.playerHp--;//クラス名.変数名.変数で、Playerクラスの変数を取得できる。Playerで宣言したこと(int playerHp等)がplayerに入っているイメージ
  }
}
```
スクリプトの内容は、Startが呼び出されたときにplayerHpから1引くという処理になります。
この場合、<font color="blue">Player</font>の中身が入っている<font color="red">player</font>の中のplayerHpを取得したいので　.　←をつけています。
ただ、class Playerのスクリプトに**player = this;**という記述があります。
これは何なのかというと、<font color="red">player</font>という変数をインスタンス化しているようです。もともと<font color="blue">Player</font>というクラスで宣言したことは設計図のような状態なので、他のスクリプトがその設計図を取得したい場合はインスタンス化をする必要があり、thisという自分自身のインスタンスを表すものを<font color="red">player</font>に代入して、設計図からインスタンス化をさせているわけですね。
#注意点
public staticはとても便利ですが、似ているクラス名(enemy1 enemy2など)をpublic staticしてしまうと、いざ使ってみようと思った時に検索候補で訳がわからなくなってしまうので、クラス名は間違えにくい名前を付けましょう。
#終わり
拙い記事ですが読んでいただきありがとうございました。
[^1]: シングルトンとはクラスのインスタンスが一つだけになるように設計すること
VS codeで、Ubuntuからスクリプトファイルを開く方法

スクリプトファイルがあるディレクトリに行って、下記を実行せよ。
但し、「<file>」『←<ファイル（英語）>って書きたいのに、消えてしまう』は実行したいスクリプトファイルである。例えば、xx.py などのpythonスクリプトファイル。

```
cmd.exe /C code <file>
```

健闘を祈る。
Spring RestTemplate + KeyCloak + Json To Object Mapping

## 前提
KeycloakへSpring Rest Template を使ってどうこうする例。

# Postして、結果JSONをObjectに詰めたい。
## RestTemplate Bean定義
```java
    @Bean
    public RestTemplate restTemplate() {
        var restTemplate = new RestTemplate();
        HttpMessageConverter<?> formHttpMessageConverter = new FormHttpMessageConverter();

        restTemplate.getMessageConverters().add(formHttpMessageConverter);
        restTemplate.getMessageConverters().add(getMappingJackson2HttpMessageConverter());
        return restTemplate;
    }

    public MappingJackson2HttpMessageConverter getMappingJackson2HttpMessageConverter() {
        MappingJackson2HttpMessageConverter mappingJackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter();
        mappingJackson2HttpMessageConverter.setSupportedMediaTypes(Collections.singletonList(MediaType.APPLICATION_JSON));
        return mappingJackson2HttpMessageConverter;
    }
```
### FormHttpMessageConverter
`Content-Type`:`application/x-www-form-urlencoded`の対応。

### MappingJackson2HttpMessageConverter
`Content-Type`:`application/json`の対応。

## 受け取り用DTO
```TokenResponseDto.java

import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.*;

@ToString
@EqualsAndHashCode
@NoArgsConstructor
@AllArgsConstructor
public class TokenResponseDto {
    @Getter
    @JsonProperty("access_token")
    private String accessToken;
    @Getter
    @JsonProperty("expires_in")
    private Integer expiresIn;
    @Getter
    @JsonProperty("refresh_expires_in")
    private Integer refreshExpiresIn;
    @Getter
    @JsonProperty("refresh_token")
    private String refreshToken;
    @Getter
    @JsonProperty("token_type")
    private String tokenType;
    @Getter
    @JsonProperty("not-before-policy")
    private Integer notBeforePolicy;
    @Getter
    @JsonProperty("session_state")
    private String sessionState;
    @Getter
    @JsonProperty("scope")
    private String scope;
}
```
`@Value`をつけたかったが、Jacksonが動かなそうだったので、`@Getter`で。

## 呼び出し
```java
	URI uri = new DefaultUriBuilderFactory().builder()
		.scheme("http")
		.host("192.168.1.31")
		.port(8083)
		.path("auth/realms/Test/protocol/openid-connect/token")
		.build();
	MultiValueMap<String,String> request = new LinkedMultiValueMap<>(){{
		add("grant_type", "authorization_code");
		add("code", code);
		add("redirect_uri", "http://localhost:7000/login");
		add("client_id", "test");
	}};
	RequestEntity<MultiValueMap<String, String>> requestEntity = RequestEntity.post(uri)
		.contentType(MediaType.APPLICATION_FORM_URLENCODED)
		.accept(MediaType.APPLICATION_JSON)
		.body(request);
        ResponseEntity<TokenResponseDto> ret = restTemplate.postForEntity(uri, requestEntity, TokenResponseDto.class);

```
### ポイント
`FormHttpMessageConverter`は、`MultiValueMap`インタフェースベース。`Map`じゃだめ。