OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】textContetとinnerTextとinnerHTMLの違い

#プログラミング勉強日記
2021年2月1日
ネットで調べると対応するブラウザの違いとあったが、現在ではブラウザでの対応の差はなさそうだった。なので、textContet、innerTextとinnerHTMLの違いを簡単にまとめる。


#テキストの扱いの違い
　それぞれでテキストの扱いが違う。テキストを全て文字列として扱うのか、テキストにエスケープ文字やHTMLタグがあったときの機能が違う。

textContet：すべてを表示するための単純なテキストとして扱う
innerText：改行などのエスケープ文字があった場合にその機能を果たす
innerHTML：HTMLタグがある場合にタグとして機能する

##わかりやすいサンプルプログラム
　


```html
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>

<body>
  <div>ただの文字列</div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div> <br />
  <div>エスケープ文字を含める</div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div> <br />
  <div>HTMLタグを含める</div>
  <div class="box7"></div>
  <div class="box8"></div>
  <div class="box9"></div>
  
  <script>
	document.querySelector('.box1').textContent = "Hello World";
	document.querySelector('.box2').innerText = "Hello World";
	document.querySelector('.box3').innerHTML = "Hello World";
	document.querySelector('.box4').textContent = "Hello\nWorld";
	document.querySelector('.box5').innerText = "Hello\nWorld";
	document.querySelector('.box6').innerHTML = "Hello\nWorld";
	document.querySelector('.box7').textContent = "<b>Hello World</b>";
	document.querySelector('.box8').innerText = "<b>Hello World</b>";
	document.querySelector('.box9').innerHTML = "<b>Hello World</b>";
  </script>
</body>
</html>
```

実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/cefec785-e586-6317-4cbf-b4dc2fba058a.png)

#参考文献
[【JavaScript】 2020年版innerHTML/innerText/textContentの違い](https://affi-sapo-sv.com/note/js-innerhtml-innertext.php)
M5StackをVSCodeで開発する際にビルド対象を選ぶ方法

VSCodeというかPlatformIOの設定なんですが
M5Stackを始めてプロジェクトが何種類かたまってくると、ビルド→書込みの際に違うプロジェクトが
選択される事がありました。
違うプロジェクトのファイルを参考にしようと開いたときに、そちらのプロジェクトが選択され戻らなくなっていました。

#作業環境名を命名する
プロジェクトの設定ファイルplatformio.iniに作業環境名をつけることで、ビルド時に特定のプロジェクトをビルド→書込み
出来るようになります。

```C++:platformio.ini
[env:your_project]
platform = espressif32
board = m5stack-fire
```
[env:xxxx]のxxxxに自分のプロジェクト名等を付ければOK
デフォルトではボード名が入っていました。

この設定をしておくと、左側の__PROJECT TASKS__にenv:xxxxが表示されるので、ビルド対象を選択することが出来ます。
機械学習×投資の無料ツールまとめ ～Awesome Algorithmic Trading～

## モチベーション

私は主にアルゴリズム取引に興味を持ち、情報発信させていただいております。そこで、今まで発信した情報をまとめて共有させていただけたらと思い、この記事を作成しました。

今回は大雑把にまとめますが、今後ジャンル別に仕分けていきたいと思います。どれも基本的には投資の定量分析に関連する内容です。

## githubを半年間漁った結果

| レポジトリ名 | 内容 | URL
| --- | --- | --- |
|Eiten - Algorithmic Investing Strategies for Everyone| 投資戦略最適化| https://github.com/tradytics/eiten |
|Surpriver| アノマリー検知(米株と仮想通貨に対応) | https://github.com/tradytics/surpriver |
|Stock_Analysis_For_Quant| Excel, Power BI, MATLAB, Python, Rによる金融データ分析、テクニカル、ファンダメンタル、投資戦略の分析の紹介| https://github.com/LastAncientOne/Stock_Analysis_For_Quant |
|FX-1-Minute-Data| FXや株価指数の1分足ヒストリカルデータ | https://github.com/philipperemy/FX-1-Minute-Data |
|algorithmic-trading-python| アルゴリズム取引のpython教材 | https://github.com/nickmccullum/algorithmic-trading-python |
|quantstats| バックテストツール | https://github.com/ranaroussi/quantstats |
|mixture_model_trading_public| マーケットを複合モデルでフィッティングさせる | https://github.com/BlackArbsCEO/mixture_model_trading_public |
|jupyter-themes| notebookのテーマ(目に優しくなります) | https://github.com/dunovank/jupyter-themes |
|coinmarketcap| coinmarketcapからデータをスクレイピングする | https://github.com/barnumbirr/coinmarketcap |
|peregrine| 仮想通貨の三角裁定を検知するツール | https://github.com/wardbradt/peregrine |
|pairs-trading-with-ML| 機械学習をペアトレに応用した分析notebook | https://github.com/marketneutral/pairs-trading-with-ML |
|SGX-Full-OrderBook-Tick-Data-Trading-Strategy| HFT分析notebook(板情報レベルで分析) | https://github.com/rorysroes/SGX-Full-OrderBook-Tick-Data-Trading-Strategy |
|ml_cheatsheet| 機械学習備忘録用シート(4枚のPDF) | https://github.com/remicnrd/ml_cheatsheet |
|alphalens| Quantopian作成のバックテストツール | https://github.com/quantopian/alphalens |
|machine-learning-for-trading| 機械学習アルゴリズム取引notebook |https://github.com/stefan-jansen/machine-learning-for-trading |
|anomaly-detection-resources| アノマリー検知関連情報まとめ |https://github.com/yzhao062/anomaly-detection-resources |
|Crypto Arbitrage Framework| 仮想通貨のアービトラージのフレームワーク(多取引所対応) |https://github.com/hzjken/crypto-arbitrage-framework|
|quant-trading| テクニカル分析用コード(オプション戦略、クオンタメンタル分析、テクニカル指標、データソース) |https://github.com/je-suis-tm/quant-trading|
rails6 javascriptファイルの追加方法

app/assets/javascript/packs配下にjsファイルを作成する。

app/assets/javascript/packs/application.jsにjsファイルをコンパイルするように追記する。(test.jsという名前のファイルの場合下記のように書く)

```application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


// ここに追記
require ('packs/test')

```

読み込まれたか確認するためにjsファイルにコンソールに表示する内容を記述。

```test.js
console.log("Hello world"); // この行が読み込まれた時点で実行される

```

ブラウザのコンソールを確認し、表示されたらjsファイルが正常に読み込まれている！
使っているWindowsPCが何ビットOSか確認する

32ビットOSなのか64ビットOSなのか知りたいことが割とよくある。
エクスプローラーから[PC]を右クリックして、[システムの詳細設定]クリックして表示されている中からOS動いてる箇所探して････って地味に面倒。

コマンドプロンプトを起動して

＞systeminfo | find "システムの種類"

うん。
簡単。
Djangoのインストールともろもろ下準備

[Djangoの前に、仮想環境(venv)をつくるメモ](https://qiita.com/1995/items/04953d9cf2d2067f32b6)の続きです。
仮想環境ができたらDjangoをインストールしたり必要なフォルダを揃えたり、軽く下準備をします。
※[Djangogirlチュートリアル](https://tutorial.djangogirls.org/ja/django_installation/)内の手順だけを抽出したメモです。細かい説明やエラー対処はこちらへ↓
参照：https://tutorial.djangogirls.org/ja/django_installation/

##Djangoのインストール
仮想環境を実行した状態が前提。コンソールで行頭に`(dj_kasou)` のような括弧で囲まれた仮想環境のフォルダ名がついてればオッケー。

###①最新バージョンのpipをインストール
Djangoをインストールするためのpipが必要。

```
python -m pip install --upgrade pip
```

###②requirementsを作成
仮想環境フォルダと同じ階層(今回の場合でいうと`(dj_project)` の直下)に`requirements.txt`のファイルを作成して`requirements.txt`に以下のテキストを追加。

```
Django~=2.2.4
```



※ファイルの位置はこんなん
dj_project
├── dj_kasou
│   └── ...
└───requirements.txt



###③Djangoをインストール
以下を実行

```
pip install -r requirements.txt
```

下の文章っぽいのがでれば成功。

```
Successfully installed Django-2.2.4
```

<br>
以上です。これで下準備は大方整ったのでアプリの作成に突入〜
1年間TDDを実践したのでまとめ（なぜ TDDは楽しいか?)

#はじめに
ちょうど去年の今頃からバックエンド開発でTDDを始めました。
自分が今のプロジェクトにjoinした時は、1/3くらいテストが書かれているという状態だったと思います。導入から1年ほど経過して、メリットやデメリット、コツ、そしてなぜ僕がTDDにハマったかも分析しました。
詳細な方法論とか書いてないのでご注意を。

#学習方法
まず、TDDを実践するにあたり参考にしたのは、以下のリンクにあるKentBeckのTDD本と、日本でTDDといえば和田さんのライブコーディングです。

- [『テスト駆動開発』 KentBeck](https://www.amazon.co.jp/%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA-%EF%BC%AB%EF%BD%85%EF%BD%8E%EF%BD%94%EF%BC%A2%EF%BD%85%EF%BD%83%EF%BD%8B-ebook/dp/B077D2L69C/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=TDD&qid=1612164698&sr=8-1)
- [TDD Boot Camp 2020 Online #1 基調講演/ライブコーディング](https://www.youtube.com/watch?v=Q-FJ3XmFlT8&t=3s)

この二つを読んで、見ておけば大体問題ないと思います！
特に和田さんのライブコーディングは、疑問が生じたりするたびに見直しました。

#導入のコツ(個人)
- **最初にテストを書く**

とにかく、**実装する前ににテストを書いてみること**。これにつきます。
最初はすぐにテストをすっ飛ばしてコーディングを開始しちゃったりしますが、グッと堪えてテストを最初に書きましょう。
普段からテストを書き慣れていない方は一苦労かと思いますが、テスト技能の向上のためと思ってください。1~2週間続けていると、慣れてきてそんなに苦じゃ無くなってきます。

- **完璧主義にならない**

TDDでは最初からテストを完璧に書こうとする必要はありません。テストを完璧に書くのは本実装を完璧に書くのと同じくらい難しいです。まずは、1番簡単で基礎的なテスト（eg. stringの値が戻ってくること等)から書き始めましょう。

#導入のコツ(チーム)

- **まずは自分が始める**

チームにTDDを導入するのは個人でやるより、数倍難しいです。なぜなら、ほとんどのプログラマはテストを書くのが好きではないからです。まずやるべきは、自らがTDDを実践することです。実践してもない人の言うことほど信用ならないものはありません。

「あれ、なんかあいつ、最近テストちゃんと書いてるな...」と同僚に思わせておきましょう。
そして、自分の中で十分知見が貯まったなと思ったら、**ペアプロでもライブコーディング**でも良いので、実際に見てもらいましょう。そこで、どれほどTDDが素晴らしいものかを嬉々として語ると、周りのあなたを見る目が変わります。

- **テストを書かないとPRが通らないようにする**

どのような方法でも良いですが、仕組みを作ってしまいましょう。レビューでいちいち「テスト書いてください」と言い続けるとTDD原理主義者のレッテルを貼られてしまいます。
(本当はTDDでなくてもテストは書こう)

- **既存のコードにバグがあったときもテストコードを追加する**

既存のコードにバグが見つかった時は、すぐさま直すのではなく、まずは再現するテストコードを書きましょう。そうすると、なぜだか知りませんが、やっぱりテストって大事やなと周りが思ってくれます。

まあ、本当にTDDしてるのか後からテストを書いているのかは、実際のところ分かりませんが、こんな感じで進めると良いと思います（適当）

#メリット・デメリット
##メリット

- **安心感**

個人的には、TDDの1番のメリットはコーディング中に感じる**安心感**だと思っています。TDDでは、今自分が書いているコードがGreenなのかRedなのか常に把握することができます。これは、実装をしていて感じる不安を大きく取り除いてくれます。そして、もしGreenな状態に戻りたくなれば、いつでも戻ることができます。TDDを始めれば、きっとあなたも安らかな気持ちでコーディングできるでしょう。

- **仕様が明確になる**

テストが書けるとは、機械が理解できるレベルに仕様が明確であることを意味します。
特にきちんとした仕様書がなく、ざっくりとした指示のもとコードを書くことの多いスタートアップのチームほど役に立ちます。また、後から誰かがjoinする際にも仕様書として利用することもできます。

- **リファクタリングしやすい**

テストの１番のメリットといえばリファクタリングです。テストがあるだけでリファクタリング意欲が湧いてくるというものです。(そうですよね？）

- **楽しい！**

楽しいです。もしTDDが楽しくなければ、やらない方が良いでしょう。

その他にも書ききれませんが、テスト技能、設計技術の向上など様々なメリットがあります。

##デメリット

- **導入コスト**

やはり１番のデメリットは導入コストなんじゃないかと思います。最初はなかなか面倒ですし、工数もかかります。誰かが率先してやらないとなかなかチームに根付くのは難しいです。導入したからと言って目に見える成果があるかと言われると難しいかもしれません。(ビジネスサイドから見て）

- **テストにかかる工数**

テストを書くということは、それだけ工数もかかります（実はTDDの方が実質的に工数がかからないという研究はある）。また、メンテナンスや実行時間もかかります。

- **仕様が変わるとテストも変わる**

仕様がコロコロと変わる開発スタイルだと、その都度テストも変更する必要があり面倒です。

#TDDはなぜ楽しいか
最初の苦痛期間を除けば、TDDでの開発体験は非常に楽しいものです。（信じてくれないかもしれませんが）TDDはなぜ楽しい開発体験を提供できるでしょうか。
####スモールステップの原理
心理学では、あるタスクを行う際に、内容をできる限り小さく分割してから実行することを**スモールステップ**と呼んでいます。スモールステップは、タスクを小さく分割することで、その複雑さに向かい合う心理的ハードルを下げます。さらに小さいステップを多く達成することで、報酬系を刺激しモチベーションを向上させるため、結果的に作業効率が上がると言われています。

これらは、まさにTDDにおいて実践されます。
人はあまりに複雑なタスクがあると、手をつけるのが億劫になるものです。しかし、**TDDでまず最初に行うのは何も書いていないテストを通すことです！**（なんと、小さなステップでしょうか！）
その後、1番簡単な仕様をRedにして、またGreenにしてを繰り返します。その度、実装者は小さな目標を達成したという快感を得ることができます。これが、楽しくて仕方がありません。まさしくテストに駆動されてると感じることでしょう！

1ヶ月もTDDを実践すれば、あなたの脳はTDDなしでは実装できなくなっているでしょう！
それでは、楽しいTDDライフを！
SwiftでStoryboardを扱う

# まえがき
Xcode12.4のSwiftを使ったiOSアプリ開発にて、以前のXcodeと異なることが多かったので記載

# 新規プロジェクトを作成
- [File]->[New]->[Project]から新規プロジェクトを作成する
- Appを選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/f2d59b1c-9e38-d473-8b99-7f934160bbab.png" width=80%>

- Product Name: プロジェクト名（今回はprojectとしました）
- Team: Noneを選択
- Organization Identifier: アプリ申請時に必要な組織名（ドメインになるように[com.名前]にする）
- Interface: **Storyboardを選択**（デフォルトはSwiftUIになっており、変更しないとStoryboardが出てこない）
- Life Cycle: UIKit App Delegateを選択（デフォルト）
- Language: Swiftを選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/a43074ee-c79a-a2d3-8861-2ca34827a256.png" width=80%>

- プロジェクト作成完了
![ 2021-02-01 12.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/d08ca18f-4277-f4f1-b8d2-1cf002e472d6.png)

# Storyboardを設定
- Main.Storyboardを選択
- 左上の[project>]から対象端末のシュミレーターを選択
![ 2021-02-01 12.24.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/6039e15e-4535-c75a-25cb-4f3cc8f83a79.png)
- Storyboard上の左下からも対象端末のシュミレーターを選択（上記で設定した端末に合わせる）
![ 2021-02-01 15.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/2f6ac883-15de-db0b-28e3-771f56b206fb.png)

今回はここまで ! 
***
#### 関連記事
1.SwiftでStoryboardを扱う（本記事）
[2.StoryboardにUIパーツを設置する](https://qiita.com/kanae_/items/e4c74ab1de7ccc9125bb)
[3.画面遷移を行う](https://qiita.com/kanae_/items/a0637df2932ce63a1e67)
[4.画面上に画像を表示する方法](https://qiita.com/kanae_/items/9df6076a6ab94949439b)
[5.ImagePickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/b6c13f59924031403150)
[6.PHPickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/8afaa7925401bcfdaf27)
有線接続したRaspberry Pi 4＋Ubuntu 20.04.1 LTSのIPアドレスを調べる

Gravio 4をインストールするのにRaspberry Pi 4をUbuntu Server 20.04.1 LTSで初期化してたら、下記の公式サイトのやり方でIPアドレスが取得できなかった。

https://ubuntu.com/tutorials/how-to-install-ubuntu-on-your-raspberry-pi#4-boot-ubuntu-server

ARPテーブルで確認しろということみたいですが、そもそもfindstr/grepでフィルタする以前に、一覧になさそう。
で、ヘッドレスなのでそもそもコンソールでIPアドレスも確認できず、仕方なくHDMIアダプターとケーブル探してきてゴニョゴニョやってたのですが、以下のコマンドでIPアドレスが取得できた。

```
> ping ubuntu.lan

ubuntu.lan [192.168.86.72]に ping を送信しています 32 バイトのデータ:
192.168.86.72 からの応答: バイト数 =32 時間 <1ms TTL=64
```

PowerShellの`Resolve-DnsName`コマンドでも行けそう。

```
PS > Resolve-DnsName ubuntu.lan

Name                                           Type   TTL   Section    IPAddress
----                                           ----   ---   -------    ---------
ubuntu.lan                                     A      0     Answer     192.168.86.72
```

[前にJetson Nanoでは`.local`で引けてた](https://qiita.com/zrock/items/cef7e963367b4939e1a5)んですが、今回は無理でした。Avahi入れる前だからなのかな。

ARPテーブルが強制的に更新されるようにすればいいだけかもしれないですが、まぁ、簡単なのでこっちで引けるなら楽でいいですね。

これでIPアドレス使ってSSHで入って色々設定するんですが、そもそもその前に、

```
> ssh ubuntu@ubuntu.local
```

でSSHに入ればIPアドレスを知る必要もないですね。
prh: `combining different flags gimu and gmu` from prh.ymlの原因と解決法

VSCodeでprhを使用していたとき、このようなエラーが出ました。

```
prh: `combining different flags gimu and gmu` from prh.yml
```

ネットで検索すると、textlintの日本語用ルールを作っている[azu](https://twitter.com/azu_re)さんが似たエラーに遭遇していましたが、解決方法までは投稿していませんでした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">うー、また初めて見るエラーだ 「Error: Error while loading rule &#39;prh&#39;: combining different flags gim and gm」 &quot;Job #‌1791.3 - tex…&quot; <a href="https://t.co/zvGSYKnFvA">https://t.co/zvGSYKnFvA</a></p>&mdash; azu (@azu_re) <a href="https://twitter.com/azu_re/status/913203712142622721?ref_src=twsrc%5Etfw">September 28, 2017</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

色々試した結果、prh.ymlでフラグの異なる複数のパターンが指定されていることが原因だと分かりました。

例えば、以下のような場合にエラーが発生します。

```yml
- expected: Web
  patterns:
    - /web/i
    - ウェブ
    - ウエブ
```

``/web/i``には``i``フラグが指定されていますが、「ウェブ」や「ウエブ」には指定されていません。複数のパターンを指定する場合は、すべてに同じフラグを使用する必要があります。そのため、上の例は次のように書き換えると動作します。

```yml
- expected: Web
  pattern: /web/i

- expected: Web
  patterns:
    - ウェブ
    - ウエブ
```

また、この場合、1つ目のpatternを省略して短くできます。

```yml
- expected: Web

- expected: Web
  patterns:
    - ウェブ
    - ウエブ
```
特定のプロセスのメモリ・CPUを確認する方法

$properties=@(
@{Name="Process Name"; Expression = {$_.name}},
@{Name="CPU (%)"; Expression = {$_.PercentProcessorTime}}, 
@{Name="Memory (MB)"; Expression = {[Math]::Round(($_.workingSetPrivate / 1mb),2)}}
)
 
$name='SearchIndexer'
Get-WmiObject -class Win32_PerfFormattedData_PerfProc_Process -filter "Name='$name'" | 
Select-Object $properties |
Format-Table -AutoSize
他ブランチの特定コミットを取り込みたい

#他のブランチのコミットを取り込みたいときの手順(記録)




```ターミナル.

$git checkout hogebranch２

取り込みたいコミットがあるブランチに移動する

$git log --oneline

コミットログを確認

$git checkout hogebranch1

取り込みたいブランチに戻り

$git cherry-pick XXXXXXXXXXXXXXXXXXX

cherry-pickでコミットを取り込む
 

```
【学習アウトプット】Laravel(Rubyとの違い)

これまで数ヶ月間Rubyを学習したが、インターンでPHPを使うためlaravelの基礎を抑えつつ、気になったところを投稿。
Railsと記述やファイルの位置等は違うが、やることは同じ。初めて学習するのと、１つ言語を学習した段階で学習するのとでは難易度がぜんぜん違う。

##コード実行ツール
Rubyのコードを実行するツールは「rails console」だが、PHPの場合は「php artisan tinker」を使う。

##「each」メソッド
```php:Ruby
オブジェクト.each do |変数|
繰り返す処理
end
```
```php:PHP
@foreach (オブジェクト as 変数)
  繰り返す処理
@endforeach
```

## prefixメソッド
prefix機能を使うと、ルーティングの場合URLの一定の文字列を一括で指定できる。

```php:web.php
Route::post('/users/{id}/follow', 'UserFollowController@store')->name('user.follow');
Route::delete('/users/{id}/unfollow', 'UserFollowController@destroy')->name('user.unfollow');
Route::get('/users/{id}followings', 'UsersController@followings')->name('users.followings');
Route::get('/users/{id}followers', 'UsersController@followers')->name('users.followers');
```
↓ /users/{id}の部分が共通なので、prefixを使ってまとめる。

```php:web.php
Route::group(['prefix' => 'users/{id}'], function () {
  Route::post('follow', 'UserFollowController@store')->name('user.follow');
  Route::delete('unfollow', 'UserFollowController@destroy')->name('user.unfollow');
  Route::get('followings', 'UsersController@followings')->name('users.followings');
  Route::get('followers', 'UsersController@followers')->name('users.followers');
});
```
##pluck()メソッド
引数として与えられたテーブルの、カラムの値のみを抜き出す命令。

##参考
https://qiita.com/ntm718/items/95eee03f5294d0c351b0
https://qiita.com/jacksuzuki/items/eae943735bda747be09c
【Mac ショートカットキー】一覧メモ

Macで作業がはかどるショートカットキーのメモ。

##ブラウザ操作

|`キー`    |`機能`                  |
|----------|--------------------------|
|**command + R**  |**リロード**|
|**command + T**  |**新規ブラウザ作成**|
|**command + W**  |**ブラウザ削除**|
|**command + shift + T**  |**ブラウザ削除後復元**|


##上下左右に一文字ずつ移動する

|`キー`    |`機能`                  |
|----------|--------------------------|
|**Control + F**  |**カーソルを右へ**|
|**Control + B**  |**カーソルを左へ**|
|**Control + P**  |**カーソルを上へ**|
|**Control + N**  |**カーソルを下へ**|

##行の端に移動する

|`キー`    |`機能`                  |
|----------|--------------------------|
|**Control + A**  |**行先頭に移動**|
|**Control + E**  |**行後尾に移動**|
BOOO‐PostgreSQL　シーケンス



【シーケンス作成・確認・取得】
■新人にPostgreSQLのシーケンスを理解してもらう
https://qiita.com/5zm/items/da82cec73e097d2a97d0

■PostgreSQL 12.4文書
https://www.postgresql.jp/document/12/html/sql-createsequence.html

■シーケンス操作関数
https://www.postgresql.jp/document/12/html/functions-sequence.html

■シーケンス情報検索（51.46. pg_sequence、pg_class）
https://www.postgresql.jp/document/12/html/catalog-pg-sequence.html

■シーケンス再設定
https://www.postgresql.jp/document/12/html/sql-altersequence.html
ejs-html-loader が全く更新されないので自前で公開してみた

# ejs-html-loader いつまで放置されるの問題

Webpack上でejsをトランスパイルするのに必要な [ejs-html-loader](https://github.com/mcmath/ejs-html-loader) だが、この開発はかなり放置気味で webpack4への対応時にも対応が遅く、ユーザーはヤキモキさせられた。

現在、ejsは3.1.5が最新（2021/02/01現在）だが、[以前の記事](https://qiita.com/bananacoffee/items/4344aad57ede8a7208b8) の通り、ejs3.0.2 でのアップデートでの仕様変更に対応できておらず、ejs-html-loaderを利用するためには ejs3.0.1のまま利用するという方法を取るしかなく、修正したプルリクエストを送ったにも関わらず放置されており、2年以上放置されている状態だった。

# 自前で修正したものを公開してみた

そこで不本意ではあるが、forkして自前で修正を当てたものをを公開することにしたので、上記の対応で回避している方に使っていただければと思う。

bananacoffee/ejs-html-loader
https://github.com/bananacoffee/ejs-html-loader

## インストール・使い方

ejs-html-loaderを削除する

```shell
npm remove ejs-html-loader
```

gitHubから bananacoffee/ejs-html-loader をインストールし、ejsをアップデートする

```shell
npm install -D bananacoffee/ejs-html-loader ejs
```

使用方法は現行の ejs-html-loader と同じなので迷うことはないと思われる。

# 他の webpack系ejsコンパイラも使ってみたが・・・・

自分が未だにejs-html-loaderを使い続けているのは、**他のwebpack対応のejsコンパイラの性能が微妙**という悲しい事情がある。
特に焦点が当たるのが以下の2つ

- includeで`.ejs`以外の拡張子が使えない（例：[ejs-plain-loader](https://www.npmjs.com/package/ejs-plain-loader)）  
`.ejs`以外の拡張子を与えると何故か`.ejs`を付け足してしまう~~お節介~~お役立ち機能。  
せめてオプションで無効にできればいいのに。
- contextが使えない（例：[ejs-compiled-loader](https://www.npmjs.com/package/ejs-compiled-loader)）  
以下のようにloader指定時に変数を渡したいのにできない。  
例えばproduction環境かどうかで挙動を変えたり、コンパイル時のタイムスタンプを使ってキャシュ管理をしたりしたいのだ。

```js
{
	loader: 'ejs-html-loader',
	options: {
		context: {
			sitename: 'hogehoge',
			prod: argv.mode === 'production',
			timestamp: +new Date()
		},
	}
}
```

**この両方が使えるのが調べた限り ejs-html-loader しかなかった**、という消極的な理由である。
多分、同じ思いの人が世界に10人くらいはいると思う。
これで心置きなく最新のejsを使っていただければ幸いだ。

# あとがき

一応、`npm test` の結果は 100% OK と出ており自分のプロダクション環境でも問題なく使えているが、coffeescriptには全く詳しくないため、変な所があれば指摘してほしい。
【Vue 3 入門】双方向データバインディングの標準化

## はじめに

Vue 2 のリリースから Vue 3 の開発に至るまで、双方向データバインディングのより柔軟な利用を実現するため、様々な取り組みが行われてきました。本稿では Vue 3 のリリースに伴い `v-model` が **双方向データバインディングの標準化** に向けて、どのような破壊的変更がされたかについて解説します。

## ‎TL;DR

- **コンポーネント利用時の `prop` と `event` のデフォルト名の変更**
- **`.sync` 修飾子の廃止、代替構文の追加**
- **同一コンポーネントで複数の `v-model` の利用可**
- **カスタム修飾子の作成可**

## コンポーネント利用時の `prop` と `event` のデフォルト名の変更

`v-model` はユーザーの入力イベントにおいてデータを更新するための糖衣構文です。Vue 2 のコンポーネントで `v-model` を利用した場合、以下のような糖衣構文になります。詳しい内容は『[【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする](https://qiita.com/toshifumiimanishi/items/07c8e96eb6f8e50c5e27)』を参照ください。

```vue
<MyComponent
  :value="message"
  @input="message = $event"
/>
```

Vue 3 のリリースに伴い、コンポーネント利用時の `prop` と `event` のデフォルト名が変更になりました。こちらは HTML 属性の名前の衝突を避けるために変更されました。

- **`prop`**：value → **modelValue**
- **`event`**：input → **update:modelValue**

## `.sync` 修飾子の廃止、双方向データバインディングの標準化

`.sync` 修飾子は `v-model` と同様に `props` の値に対して双方向データバインディングを実現できます。主な違いは `.sync` 修飾子を利用すれば、同一コンポーネントに複数の双方向データバインディングを実現できることです。

```vue
<MyComponent
  :first-name.sync="firstName"
  :last-name.sync="lastName"
/>
```

しかし `.sync` 修飾子の存在は双方向データバインディングを実現する上で **混乱を招く要因** になります。ゆえに Vue 3 では `.sync` 修飾子を廃止し、`v-model` をより柔軟に利用できるよう、双方向データバインディングを標準化しました。そこで `v-model` には新機能の「 **`v-model` の引数**」と「**同一コンポーネントに対する `v-model` の複数可**」が追加されました。

### `v-model` の引数

`v-model` の引数は `.sync` 修飾子の廃止に伴い追加された `v-model` の新しい構文です。下図のように `v-model` に引数を渡せるようになり、`.sync` 修飾子と同等の機能を有します。ここで `v-model` というのは `v-model:model-value` の省略形であることが理解できます。ちなみに、本機能の追加によりコンポーネントの `model` オプションが不要になり Vue 3 で削除されました。

![](https://v3.vuejs.org/images/v-bind-instead-of-sync.png)

### 同一コンポーネントに対する `v-model` の複数可

Vue 3 では同一コンポーネントに複数の `v-model` を利用可能になりました。`.sync` 修飾子に代わる `v-model` の新機能です。

```vue
<UserName
  v-model:first-name="firstName"
  v-model:last-name="lastName"
/>
```

ちなみに上記のコード例の糖衣構文は以下のようになります。

```vue
<UserName
  :first-name="firstName"
  @update:firstName="firstName = $event"
  :last-name="lastName"
  @update:lastName="lastName = $event"
/>
```

## カスタム修飾子の作成可

Vue 3 は `v-model` に独自のカスタム修飾子を追加できるようになりました。実際に「先頭の文字を大文字にする」機能を有する `.capitalize` カスタム修飾子の実装例で説明します。

```vue
<MyComponent v-model.capitalize="myText" />
```

独自のカスタム修飾子があるコンポーネントは `props` 経由で `modelModifiers` にオブジェクト形式で含まれます。本例の `modelModifiers` には `{ capitalize: true }` が格納されています。デフォルトの場合 `modelModifiers` という名前になりますが、`v-model` に引数を渡す場合は `arg + Modifiers` という命名規則になります。

```vue
<template>
  <input type="text" @input="handleInput" />
</template>

<script>
export default {
  props: ['modelModifiers'],
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const handleInput = (event) => {
      let value = event.target.value
      if (props.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      emit('update:modelValue', value)
    }
    return {
      handleInput,
    }
  },
}
</script>
```

>:warning: **`setup` 関数の第 1 引数の `props` を分割代入しないように注意しましょう。`props` 経由のデータのリアクティブが失われます。**

## さいごに

ここまで双方向データバインディングの標準化に向けた `v-model` の新機能や、破壊的変更について取り上げました。本稿が読者の理解の一助になれば幸甚です。

## 参考文献
- [Vue.js 公式ドキュメント](https://v3.vuejs.org/)
- [Vue RFCs](https://github.com/vuejs/rfcs)
VSCodeのAwesome Emacs Keymap拡張でESCとCtrl+[がMetaキーとして使えるようになった

TL;DR
====
[Awesome Emacs Keymap](https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx)拡張を入れて

- `emacs-mcx.useMetaPrefixEscape` をONにする
- `emacs-mcx.useMetaPrefixCtrlLeftBracket` をONにする

Awesome Emacs keymap 拡張について
====

コーディングに使うエディタをEmacsからVisual Studio Codeに乗り換えてもうすぐ3年になります。乗り換えた後もどんどん機能が追加され、今の所自分にとって理想のエディタです。（特に[Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)拡張はとてもインパクトのあった機能で、これ以降で開発スタイルがガラリと変わりました）

しかし、長年Emacsを使って体に染み付いたキーバインドはいかんともしがたく、キーバインドをEmacs風にする拡張機能は手放せませんでした。

キーバインドをEmacs風にする拡張は多数あるのですが、色々試して微妙にかゆい所に手が届かない感じのものが多い中、[Awesome Emacs Keymap](https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx)拡張がほぼ理想的な動作で、違和感なく使えたのでこれを使用しています。

ESCキーをMetaキーとして使う設定
====
Awesome Emacs Keymapはほぼ理想的な動作だったのですが、使い始めた当時はEmacsにおけるMetaキーに対応するのはAltキーのみ（Windows環境）でした。
AltキーをMetaキーとして使う時はAltキーを押しながら該当のキーを押す事になるのですが、押しながらという性質上`M-<`のようなシフトキーを押す必要のあるキーのような例だと`Alt+Shift+,`と3キー同時押しとなり非常にタイプしにくいという問題があります。
Emacsの場合、Metaキーとして「ESCキーを押して離す」という動作が使えるため、上の例は「`ESC`を押した後`Shift+,`」というキーバインドが使え、だいぶタイプしやすくなります。
ESCをMetaキーとして使いたいという要望はやはり多かったようで、2020年3月に`useMetaPrefixEscape`という設定が追加されました。これをONにすると、ESCキーをMetaキーとして使えるようになります。

Ctrl+[をMetaキーとして使う設定
====
ESCキーをMetaキーとして使えるようになりましたが、まだ若干不満がありました。というのもEmacs（というかUNIX系の端末）はESCキーと同じキーコードを発行する`Ctrl+[`というキーバインドがあり、上述した`M-<`の例だと`Ctrl+[``Shift+,`とタイプすることができました。
`CTRL+[`は2キー同時押しになるからESCより押しにくいじゃないかという向きもあるかもしれませんが、ESCは若干左上に指を伸ばさないとならないのに対し、Ctrl+[はほぼホームポジションでタイプできるため、私はこれを多様していました。しかし実際にはCtrl+[がMetaキーになっていないため、癖で`Ctrl+[``Shift+,`と押してしまい単に「<」が挿入されるというような事態が頻発していました。
そんな中、久しぶりにAwesome Emacs Keymapの変更ログを眺めていたところ、2020年12月にこれを可能にする設定が追加されているのに気づきました。
`useMetaPrefixCtrlLeftBracket`をONにすると、Emacsと同じようにCtrl+[をMetaキーとして使用可能になります。これでとても幸せになれました。

まとめ
====
VScodeとAwesome Emacs keymapはいいぞ。今現在Emacsを使っている人には自信を持ってお勧めできます。
manimの作法 その38

#概要

manimの作法、調べてみた。
練習問題やってみた。

#練習問題

日本語を表示せよ。

#サンプルコード

```
from manimlib.imports import *

class test(Scene):
	def construct(self):
		text = Text('Hello world!', font = 'IPAGothic')
		self.play(Write(text))
		self.wait()
		self.clear()
		text = Text('こんにちは、世界。', font = 'IPAGothic')
		self.play(Write(text))



```

#生成した動画

https://www.youtube.com/watch?v=EyoIWmGEIk8

以上。
BOOO‐PostgreSQL　DB2（reorg、runstats）

BOOO‐PostgreSQL　DB2（reorg、runstats）⇒PostgreSQL(vacuum、Analyzer )

①vacuum、analyzeの実行
：VACUUM は、不要タプルが使用する領域を回収します。（table、index）

⇒vacuum (index_cleanup true, analyze, verbose) [table];
：index_cleanup　インデックスの不要領域の回収
：verbose　各テーブルについてバキューム処理の詳細な報告を出力します

②reindexでのインデックス再編成
⇒REINDEX TABLE CONCURRENTLY [table];
（reindex index concurrently インデックス名;）

：CONCURRENTLY
 REINDEXにCONCURRENTLYオプションをつけることでこの方式が行われます。 このオプションを使うと、PostgreSQLは再構築が必要な各インデックスに関してテーブルを2回走査しなければなりません。さらに、潜在的にそのインデックスを使用する可能性がある、実行中のすべてのトランザクションが終わるまで待機しなければなりません。

注意：
インデックス再構築によりCPUやメモリ、入出力に余分に負荷がかかりますので、他の操作が低速になる可能性があります。


【DB2】
■パフォーマンス維持のための運用 (REORG と RUNSTATS) 編
https://developer.ibm.com/jp/technologies/data-management/articles/j-d-db2bestpractice02/

【PostgreSQL】
■PostgreSQLのインデックス再編成
https://qiita.com/mkyz08/items/eb66419d43c56cce566e

■reindex
https://www.postgresql.jp/document/12/html/sql-reindex.html

■PostgreSQLの、テーブル・インデックスのメンテナンスについて
https://goodbyegangster.hatenablog.com/entry/2019/05/16/223803

■PostgreSQL Index
https://www.techscore.com/blog/2013/05/27/postgresql-index-only-scan-%E5%A5%AE%E9%97%98%E8%A8%98-%E3%81%9D%E3%81%AE1/
pythonでの画像読み込み -- skimageとcv2

作成日：20210201
言語：Python

Pythonでの画像読み込みについて、skimage.io.imread関数とcv2.imread関数を調べた。

※Pythonの画像処理ライブラリには他にPillow(PIL)もありますが、この記事では触れていません。

##1. 参考リンク

### 1-1. scikit-imageでの画像読み込み （skimage.io.imread）
scikit-image公式ドキュメント
https://scikit-image.org/docs/dev/api/skimage.html
（ページ中程のUtility Functionsに画像読み込み関数のまとめあり。）

### 1-2. OpenCVでの画像読み込み （cv2.imread）
note.nkmk.me Python -- OpenCVで画像ファイルの読み込み、保存（imread, imwrite）
https://note.nkmk.me/python-opencv-imread-imwrite/

##2. scikit-image

### 2-1. 概要
読み込みは`skimage.io.imread`

データ型の変換は、
`img_as_float`（0~1までの浮動小数点数）、
`img_as_uint`（0~65535の整数=16ビット型）、
`img_as_ubyte`（0~255の整数=8ビット型）。

### 2-2. 注意 （自分用メモ）
今までskimageの画像読み込み・データ変換関数をよく知らずに、0~1に正規化する際に`np.float64((io.imread(fname))/255` などという書き方をしていたが、今後は避ける。この書き方だと bit depth を確認して正規化しないといけない（8-bitなら255、16-bitなら65535で割る）。それよりも、最初から `img_as_float`を使った方が良い。


### 2-3. サンプルコード

```python:read_img_skimage.py

import numpy as np
import matplotlib.pyplot as plt
from skimage import io,img_as_float, img_as_uint, img_as_ubyte

#
# Import test images
#
fname = '../test.tif'

### 画像のデータ型そのまま
print('raw image')
img = io.imread(fname)

## 画像情報
print(img.shape) # 画像の大きさ
print(img) # 画像が数値配列として表示される
print(type(img)) # numpy.ndarray
print(img.dtype) # これでbit depth を取得できる （今回は uint8 型でした）

## plot
plt.figure()
plt.imshow(img, cmap='gray')
plt.show()

### 0-1の浮動小数点型にする
print('img_as_float')
img_float = img_as_float(io.imread(fname))

# 【注意】
# np.float64((io.imread(fname))/255 という書き方は今後は避ける。
# これだと bit depth を確認して正規化しないといけない。8-bitなら255、16-bitなら65535で正規化しないといけない。
# 最初から img_as_float を使った方が良い。

print(img_float)
## plot
plt.figure()
plt.imshow(img_float, cmap='gray')
plt.show()

### 16-bit型、8-bit型にする
print('img_as_uint')
img_16bit = img_as_uint(io.imread(fname))
# img_8bit = img_as_ubyte(io.imread(fname))
print(img_uint)
print(img_uint.dtype)
```

## 3. OpenCV

### 3-1. 概要
画像の読み込みは`cv2.imread`。

### 3-2. 注意 （自分用メモ）
openCVのcv2.imread関数はerrorを出さないので、読み込めなかった時のトラブルシューティングがちょっと面倒くさい（参考URL: https://note.nkmk.me/python-opencv-imread-imwrite/ )。


### 3-3. サンプルコード

```python:read_img_cv2.py
import numpy as np
import matplotlib.pyplot as plt
import cv2

#
# Import test images
#
img_file='../test.tif'

img = cv2.imread( img_file, 0 )
print(img)

print(img.shape) # 画像の大きさ
print(type(img)) # <class 'numpy.ndarray'>
print(img.dtype) # uint8

#  【注意】
# openCVのcv2.imread関数はerrorを出さないので、読み込めなかった時のトラブルシューティングがちょっと面倒くさい
# 参考URL: https://note.nkmk.me/python-opencv-imread-imwrite/

plt.figure()
plt.imshow(img, cmap='gray')
plt.show()
```

<br/>
<br/>
<br/>
__終わり__
M5PaperでSDからテキストを読込んで表示する方法

M5Paperって電子書籍リーダ的な使い方も想定されていると思うんですが
ファイル読み込み→表示のサンプルが無くてちょっと迷った。
アルファベットの表示は簡単なので、まとめました。
日本語テキスト表示はもう少し工夫が必要なので別記事にしたいと思います。
**(対応がunicodeなのでWindowsからtxtファイルを作ると文字化けすると思います）**

#SDカードの読込
SDカードの扱いは他のM5Stackと同じ（と思う）

```C++
SD.begin();
File f = SD.open("/test.txt", FILE_READ);
```

##テキストファイルの扱い
openしたファイルはread()で読み込むことが出来る。

```C++
/* 1バイト読込 */
f.(f.read());
```
readすると1バイト分がASCIIコードで読み取れる
改行はCR(0xd)が読み込まれる

##読込データの画面表示

```C++
canvas.drawChar( f.read() ,100, 100);
canvas.pushCanvas(0, 0, UPDATE_MODE_DU4);
```
こんな感じで表示できます。
[M5Stack] マルチスレッドで並列処理を行う

#1.はじめに
M5StackのMPUのESP32には、並列処理を行うために、マルチスレッドという仕組みが用意されています。
自分の勉強用のため、M5StackのExampleのコードを、その内容を噛み砕いて、整理していきます。

#2.プログラムの構造
##2.1. Arduinoのプログラムの基本構造
Arduinoのプログラムは、void setup()とvoid main()の二つの関数によるプログラム構造となっています。
まずvoid setup()で、初期化処理を行います。例えば、変数、定数の宣言、通信部分の設定などがこのvoid setup()関数によって行われます。
そして、実行したいメインのタスク内容は、void loop()の中に記述します。例えば、圧力センサーの値をモニターに表示するタスクを考えましょう。(1) 圧力センサーより測定データを取得する。(2)単位の変換などのデータ処理を行う。（3）LCDやSerialモニターへの出力する、(4)一定な時間間隔でこれらの処理を繰り返し実行します。などの一連の処理部分をこのvoid loop()に書いておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208980/faf09495-5dda-fbfb-5727-040b3933f12c.png)
##2.2. マルチスレッド処理のプログラムの構造
マルチスレッドのプログラムは、上記のArduinoの基本プログラムと構造が少し異なります。
まず、void setup()に、**xTaskCreatePinnedCore()**を用いて、並列処理を行いたいタスクを宣言します。タスク数は単数、複数のどちらでもOKですが、並列処理が目的なので、基本的に複数のタスクを宣言することになります。

そして、void loop()にはマルチスレッド用の内容を記述しません。(マルチタスクではないタスクは記述しても構いません。）その代わりに、void task0(), void task1()のような並列処理するタスクを関数として記述し、各々の関数の中にはwhile文を利用したループ構造とします。そのループの中に並列処理されるタスクの処理内容を記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208980/993cec1d-7a3f-8013-523f-fb26ffdf91fa.png)

#マルチスレッドを利用する関数
マルチスレッドは、**xTaskCreatePinnedToCore()**を利用し、引数のルールは下記のようになります。
ESP32の場合、Core数が2なので、引数Core IDは0か１になります。

```c++
xTaskCreatePinnedToCore(タスクの関数名, "タスク名", スタックメモリサイズ, NULL, タスク優先順位, タスクハンドリングポインタ, Core ID)
```

例えば、二つのタスクを2番目のコア(Core ID=1)にマルチスレッドで並列処理を行いたい場合は、下記のようなコードになります。

```c++
xTaskCreatePinnedToCore(task0, "Task_0", 4096, NULL, 1, NULL, 1)
xTaskCreatePinnedToCore(task1, "Task_1", 4096, NULL, 2, NULL, 1)
```

#プログラムコード

M5StackのExampleのMultithread例題のコードです。

```c++
// Copyright (c) 2020 aNoken

#include <M5Stack.h>

/* task0のループ関数 */
void task0(void* arg) {
  static int cnt = 0;
  //カウントアップしてシリアルとLCDに表示する
  while (1) {
    Serial.printf("task0 thread_cnt=%ld\n", cnt);
    M5.Lcd.printf("task0 thread_cnt=%ld\n", cnt);
    cnt++;
    vTaskDelay(1000);
  }
}

/* task1のループ関数 */
void task1(void* arg) {
  static int cnt = 0;
  //カウントアップしてシリアルとLCDに表示する
  while (1) {
    Serial.printf("task1 thread_cnt=%ld\n", cnt);
    M5.Lcd.printf("task1 thread_cnt=%ld\n", cnt);
    cnt++;
    vTaskDelay(1500);
  }
}

void setup() {
  M5.begin();                       //M5Stackを初期化
  M5.Power.begin();                 //M5Stackのバッテリ初期化
  M5.Lcd.clear(BLACK);
  M5.Lcd.setTextColor(YELLOW);
  M5.Lcd.setTextSize(3);
  M5.Lcd.setCursor(0, 0);

  //task0のループ関数を起動
  xTaskCreatePinnedToCore(task0, "Task0", 4096, NULL, 1, NULL, 1);
  
  //task1のループ関数を起動
  xTaskCreatePinnedToCore(task1, "Task1", 4096, NULL, 2, NULL, 1);
}

void loop() {  //Arduinoのメインのループ関数はここで実行
  static int cnt = 0;

  //カウントアップしてシリアルとLCDに表示する
  M5.Lcd.clear(BLACK);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.printf("Maintask thread_cnt=%ld\n", cnt);
  Serial.printf("Maintask thread_cnt=%ld\n", cnt);
  cnt++;
  vTaskDelay(1200);
}
```
#まとめ
M5Stack（ESP32）のマルチスレッドで並列処理を行う方法を整理しました。

#参考資料
1. https://anoken.jimdofree.com/
2. https://github.com/anoken/
3. https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/system/freertos.html
【AWS認定試験】DVA-C01取得しました

# はじめに
先日、DVA(AWS認定デベロッパーアソシエイト)に合格した為、やったことを残します。

# 勉強期間(受験時の状態)
AWS実務経験：7ヶ月

今までに取得した資格：CLF,SAA
(以下に詳細があります)
[新卒1年目が1.5ヶ月でAWS認定 クラウドプラクティショナーを取得するまで][link-1]
[【AWS認定試験】SAA-C02取得しました][link-2]

[link-1]:https://qiita.com/t_tsuchida/items/3d43385f7348f1702ca8
[link-2]:https://qiita.com/t_tsuchida/items/21f8c40244a53f3e37f9

# 試験対策
### Udemy
以下の問題集を主軸としてやりました。
[AWS 認定デベロッパー アソシエイト模擬試験問題集（5回分325問）][link-3]
[link-3]:https://www.udemy.com/course/aws-31955/
ネットの評判を見ると、「本試験より難易度が高い」という意見が多いのですが、その通りだと思います。
問題内容は本番の試験と同レベルなのですが、選択肢が難しく点数が取れなかったです。

受験時の受講回数と点数(%)は以下の通りになります。
模擬試験1：4周(30→53→73→70)
模擬試験2：2周(29→84)
模擬試験3：1周(38)
模擬試験4：1周(43)

方針として、
1周目解き終わったらすべての問題の回答を読み込む→わからない単語、サービスを調べる
2周目以降は間違えた問題の回答を読み込む
ということを意識して進めました。


### BalckBeltを読む
勉強していてわからないサービスが出てきた場合はBlackBeltを読みました。
私の場合はAPIGatewayのアクセス制御周りとIAMの認証回りが理解できなかったのでYoutubeでセミナーの動画を観ました。

[BlackBelt][link-4]
[link-4]:https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/
### よく出た(印象に残った)リソース
- Amazon APIGateway

- AWS x-ray
- AWS Elastic Beanstalk
- AWS IAM(認証回り)
- Amazon Cognito
    - IDプールとユーザプール等
- Amazon ElasticCache
- AWS CloudFormation
- Amazon DynamoDB
- AWS Lambda
    - 特にCloudFormationでテンプレート化してデプロイする方法
- Code系(CodeCommit,CodeBuild,CodeDeploy)

SAAと同様にサービスを使う上での制約の話(Lambdaのタイムアウト時間など)やDynamoDBのRCU, WCU等を問われる問題は出ませんでした。

# まとめ
SAAと比べると簡単だったかな？と思います。
出題されるサービスの範囲が比較的狭くて対策しやすい印象でした。
ただ、その分細かいところを問われる問題が出るので使ったことのないサービスに関してはBlackBeltなどの読み込みは必要だと思います。
Go: struct を map に変換

Go の struct を map に変換する方法です。

```go:struct_to_map.go
// ----------------------------------------------------------------
//
//	struct_to_map.go
//
//				  Jan/31/2021
//
// ----------------------------------------------------------------
package main

import (
	"fmt"
	"reflect"
)

type City struct {
	Id	string
	Name_city	string
	Population	int
	Date_mod	string
}

// ---------------------------------------------------------------
func main() {
	fmt.Println ("*** 開始 ***")

	aa := City{Id: "t0921", Name_city: "宇都宮", Population: 34126, Date_mod: "2018-3-2"}

	fmt.Println (aa)

	unit_aa := make (map[string]interface{})

	tt := reflect.TypeOf(aa)
	vv := reflect.ValueOf(aa)

	for it:=0; it < tt.NumField(); it++ {
		ff := tt.Field(it)
		key := ff.Name
		value := vv.FieldByName(key).Interface()

		fmt.Println(key, value)

		unit_aa[key] = value
		}
	
	fmt.Println (unit_aa)

	fmt.Println ("*** 終了 ***")
}

// ----------------------------------------------------------------
```

実行結果

```text
$ go run struct_to_map.go
*** 開始 ***
{t0921 宇都宮 34126 2018-3-2}
Id t0921
Name_city 宇都宮
Population 34126
Date_mod 2018-3-2
map[Date_mod:2018-3-2 Id:t0921 Name_city:宇都宮 Population:34126]
*** 終了 ***
```
【Rails】駆け出しエンジニア目線でN＋1問題を解説します

## N＋1問題とは
**N＋1問題とは、SQLが実行される際、クエリの回数が無駄に多くなってしまい、パフォーマンスを低下させてしまうことです。**

*※クエリとは、データベースからデータを抽出したり操作したりといった処理を行うための命令のことです。*


つまり、必要なデータ(N)を抽出するごとに、毎度1回多く(+1)SQLが発行されてしまい、処理に時間がかかってしまいます。

というよりは、**毎度必要なデータを抽出しにいく手間を無くす**と考えた方がわかりやすいかもしれません。
## なぜN＋1問題を回避すべきなのか？
前述のとおり、パフォーマンスを低下させるからです。
また、大量のSQLが発行されることでコンピューターにも負担がかかります。

データ量が少なければあまり問題になりませんが数万、数十万とデータを抽出するとなると、高負荷になりパフォーマンスの低下につながることは容易に想像できるはずです。

いつまでたっても表示・更新されないWebサービスは嫌ですよね。私も嫌ですし、そもそもユーザーが離脱します。
### 具体例
ここでは、UserモデルとPostモデルが一対多の関係であるとします。
下記のコードでは、投稿した人の名前を表示しようとしています。

```
posts = Post.all

posts.each do |post|
  p  post.users.name
end
```

一見問題なさそうですが、これこそがまさにN＋1問題が発生しているのです。
例えば投稿が100個あった場合、このコードだと101回SQLが発行していることになります。
ではこれを解決するにはどうすればよいのでしょうか？

## N＋1の解決策
解決策は一つではありませんが、もっとも簡単な方法としては`includes `メソッドを使用することです。

```
posts = Post.includes(:users).all

posts.each do |post|
  p  post.users.name
end
```

最初の一行目に`.includes(:users)`を追加しただけです。
こうすることで
N＋1問題は、とくに一対多の関係で発生しやすいです。
他のテーブルからデータを取得するときにはとくに気をつけましょう。
## まとめ

* N＋1問題とは、クエリの回数が無駄に多くなってしまい、パフォーマンスを低下させてしまうこと
* とくに一対多の関係で発生することが多い
* `includes `メソッドを使うことで解決できる

覚えてしまえばそんなに難しくないので、さくっと学習しておきましょう。

こちらの動画も参考になったのでおすすめです。
[【Ruby on Rails】必ず知っておきたい N+1 問題（SQL）N+1 problem on Ruby on Rails](https://youtu.be/6LxIpm5GKDA)

---

*参考文献*
 [Railsガイド~関連付けを一括読み込みする~](https://railsguides.jp/active_record_querying.html?version=6.0 "Railsガイド")
Motion Detection to Start and Stop Captures by GoPRO

GoPRO Lab released QR camera control
https://gopro.github.io/labs/control/
https://gopro.github.io/labs/control/motion/

If you try to use it, please pay attention the firmware.
Before update the GoPRO Lab's firmware, check your camera's firmware.

-Firmware for GoPRO MAX
https://community.gopro.com/･･･/Introducin･･･/ta-p/603173･･･

-How to update
https://gopro.com/en/us/support/hero8-black-product-update


I tried to Motion detection for Mapillary and drone use case.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1064877/f58bf07d-8b41-527c-7468-764bc9c6f3ef.png)

I upload the videos.

-Motion Detection test video(Default parameter)
Test video(1/2)
https://vimeo.com/506913135

Wait 30 second and restart driving.

Test video(1/2)
https://vimeo.com/506914589


But GoPRO MAX took videos while the car stopped at a convenience store.
15 short time videos were captured, I think GoPRO detect the motion by other vehicle's vibration or wind.
Need more parameter optimization for each vehicle.
[Tkinter] 動的なラベルを用いたフラッシュ暗記

#はじめに
フラッシュ暗記ができるプログラムを作りたい！
ということでpython3, Tkinterを用いてフラッシュ暗記プログラムを作成しました。

#ソースコード
```python
import tkinter as tk
from random import shuffle
import time
import threading

#ボタン関数
def button_pressed():
    #配列をシャッフル
    shuffle(label_list)
    #シャッフルされたリストの要素を3秒ごと表示
    for tmp in label_list:
        var.set(tmp)
        time.sleep(3)
    var.set("")
    
#別threadでボタン関数を動かす & ボタン削除
def m_thread():
    thread1 = threading.Thread(target= button_pressed)
    thread1.start()

    #startボタン削除
    button.destroy()

#テキストボックスとsubmitボタン
def txt_submit():
    #テキスト取得
    ans= txt.get()
    #クリア
    txt.delete(0,tk.END)

    answer(ans)

#答え合わせ
def answer(ans):

    if ans in label_list:
        label_list.remove(ans)
        var2.set("正解！ 残り　"+str(len(label_list)))
    else:
        var2.set("不正解! 残り"+ str(len(label_list)))
    
    #すべて正解時
    if len(label_list)==0:
        win.destroy()
        

#タイトル
win = tk.Tk()
win.title("Flash")

#ウィンドウサイズ
win.geometry("300x300")

#表示内容配列(ここに表示したいものを入れる)
label_list = ["ホゲホゲ","アゲアゲ","Tkinter","Python","Flash"]

#配列表示
var = tk.StringVar()
var.set("")
label =tk.Label(win,textvariable=var)
label.pack()

#開始ボタンを作成
button = tk.Button(text="スタートする",command=m_thread)
button.pack()

#答え入力テキストボックス
txt =tk.Entry(width = 30)
txt.pack()

#submitボタン
button2 = tk.Button(text="提出",command=txt_submit)
button2.pack()

#正誤表示
var2= tk.StringVar()
var2.set("")
label2= tk.Label(win,textvariable=var2) 
label2.pack()


win.mainloop()
```
#部分的に説明

```python
#別threadでボタン関数を動かす 
def m_thread():
    thread1 = threading.Thread(target= button_pressed)
    thread1.start()
```
ループで配列の中身を表示するbutton_pressed関数は別スレッドで処理しないと、ループの最後のみが現れ、動的にラベルが変更できません。よってthreadingを用いてbutton_pressed関数を別スレッドで処理しています。

```python
#テキストボックスとsubmitボタン
def txt_submit():
    #テキスト取得
    ans= txt.get()
    #クリア
    txt.delete(0,tk.END)
```

この関数ではテキストボックスの中身を.get()でメソッドで取得し、.delete(0,tk.END)でテキストボックスの0番目から最後までの入力内容を削除(クリア)するようにしています。

```python
#配列表示
var = tk.StringVar()
var.set("")
label =tk.Label(win,textvariable=var)
label.pack()
```
動的に表示したいラベルはすべてStringVarを用いています。

#最後に
わからない部分は参考資料が詳しく説明してあるのでそこを見てください。

#参考資料
以下の資料を参考にさせていただきました。
[1] https://www.delftstack.com/ja/howto/python-tkinter/how-to-change-the-tkinter-label-text/
[2] https://qiita.com/__init__/items/74b36eba31ccbc0364ed
[3] https://teratail.com/questions/286182
[4] https://qiita.com/shimajiri/items/3f23f34bd3a799a6702d
【メモ】パスワード付きzipファイルを解凍する方法

* 製造業出身のデータサイエンティストがお送りする記事
* 今回はパスワード付きzipファイルを解凍する方法をメモとして残しておきます。

##はじめに
お客様とデータをやり取りする際に、複数のcsvファイルを一つのzipファイルに纏めてパスワードを付けて受け渡しすることが多いかと思います。
その際にパスワード付きzipファイルを解凍する必要が発生しますので、その方法をメモとして残しておきます。

##パスワード付きzipファイルの解凍方法
今回使用するモジュールは`zipfile`です。pythonに標準で備わっているライブラリなので、改めてインストールをする必要はありません。

ファイル構成は下記のようになっていることを想定します。

```
.
└── data                  zipファイルを格納したフォルダ
    └── sampledata.zip　  パスワード付きのzipファイル
```

実際にzipファイルを解凍するコードは下記です。

```php
import zipfile

filename = "./data/sampledata.zip"
path = "./data/"
passwd = "password"
with zipfile.ZipFile(filename, "r") as zp:
    try:
        zp.extractall(path=path, pwd=passwd.encode("utf-8"))
    except RuntimeError as e:
        print(e)
```

パスワードがかかっていないzipファイルの場合は、単純にextractallメソッドのパスワードを空にすれば問題なく実行できます。

##さいごに
最後まで読んで頂き、ありがとうございました。
簡単ですが、パスワード付きzipファイルを扱うことが多かったので、メモとして残しておきました。

訂正要望がありましたら、ご連絡頂けますと幸いです。
Tree に対する STL 風イテレータ

[**wordring**](https://github.com/wordring/libwordring) 用に、木に対するイテレータを考察しました。

## 必要なメンバ関数

STL コンテナのイテレータは、前後へ移動できれば十分です。　しかし Tree のイテレータは、前後の移動だけでは不十分です。

以下の移動が可能であれば、Tree 内のノードを自由に移動することが出来ます。

- 最初の子
- 子の終端
- 親
- 次の同胞
- 前の同胞

STL 風に考えると、それぞれ以下の関数名になると思います。

- ```begin()```
- ```end()```
- ```parent()```
- ```operator++()```
- ```operator--()```

![stl_tree_concept.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90355/e9ef2543-b95b-fdbb-ab29-c64d50494112.png)

[**tree**](https://wordring.github.io/libwordring/api/html/classwordring_1_1tree.html#details) 、 [**tag_tree**](https://wordring.github.io/libwordring/api/html/classwordring_1_1tag__tree.html) 、 [**trie**](https://wordring.github.io/libwordring/api/html/classwordring_1_1basic__trie.html#details) 三種類の木を実装してみました。　

## 走査イテレータ・アダプタ

 Tree イテレータの基本は、これで十分だと思います。　しかし実用において、このイテレータを直接利用することはほとんどないでしょう。使ってみると、とにかく面倒くさいです。

実用的には、**走査用のイテレータ・アダプタ**を使うでしょう。

Wikipedia は、[4つの走査順](https://ja.wikipedia.org/wiki/%E6%9C%A8%E6%A7%8B%E9%80%A0_(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0)#%E8%B5%B0%E6%9F%BB%E6%B3%95)を紹介しています。 これらは、基本 Tree イテレータに対するアダプタとして実装できます。　

よく使われる走査順は、（ HTML や XML の書き順のような）行きがけ順でしょう。

※本稿で定義した5つの移動方向で全ての走査順を実装できるということは、5つの移動方向で十分であることを示すと思います。

[**tree_iterator**](https://wordring.github.io/libwordring/api/html/classwordring_1_1basic__tree__iterator.html#details) 、 [**level_order_tree_iterator**](https://wordring.github.io/libwordring/api/html/classwordring_1_1basic__tree__iterator.html#details) 二種類の走査イテレータ・アダプタを実装してみました。
【Ajax（非同期通信）の仕組み】

Ajaxの仕組み答えれますか？
僕は、非同期通信で〜〜....しか伝えれない。。。涙
誰にでも説明できるように、アウトプットします！！！
##Ajaxとは？
 - JacaScriptでサーバー側との通信を**非同期**で行い、動的ページを一部だけ変更する手法のこと

##非同期じゃない、**同期通信**って？
  - ①webクライアントから③webサーバーに②リクエストを送りHTMLを作成し、<br>③webサーバーから④レスポンスをwebクライアントに送ること！
![スクリーンショット 2021-02-01 11.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748934/eecfe704-8335-33b5-489c-c005f9d282aa.png)
- **同期通信の特徴**<br>1.ページ自体が再読み込みされる<br>2.ページの読み込みが終わるまで他の操作ができない<br>3.ページ全体を1から作成してレスポンスしている<br>4.リクエストとレスポンスの1往復が終わらないと、次のリクエストを送信できない


##Ajax(非同期通信)の流れ
 - 1.**JavaScript(XMLHttpRequest)**がページに必要な一部のデーターだけを、<br>ページの再読み込みなしでサーバーにリクエスト送る
 - 2.クライアントにレスポンスするファイルはHTMLファイルではなくて、**XML**ファイルを送信する
      - XML(Extensive Markup Language)<br> - データの意味に合わせてタグの名前を定義することができるので、複数処理の管理に最適 
 - 3.**DOM(Documnet Object Model)**を利用して、HTMLやXMLをプログラムで操作することができる
![スクリーンショット 2021-02-01 12.10.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748934/e59953a5-dcb7-eb84-0470-87b2182e572f.png)


 - **非同期通信の特徴**(同期処理の逆！)<br>1.ページ自体が再読み込みがない<br>2.レスポンス待ちは、全体の処理が止まらず、他の操作ができる<br>3.リクエストとレスポンスの1往復が終わらなくても、次のリクエストを送信できる<br>4.送信と受信のタイミングをずらした通信方式のこと


写真は参考にさせていただいた、記事から使用しています..勝手に拝借して申し訳ありません。
【参考記事】
http://pikawaka.com/word/ajax

では！
[Flask]HerokuでOSError: [Errno 98] Address already in useの回避方法

スーパープログラミング初心者です
あなたもHeokuで詰まったのですね
悩みを共有し、土日を失うことの恐怖から解放しましょう

<h1>HerokuでOSError: [Errno 98] Address already in useが出た
</h1>

<h2>原因・解決策
</h2>
他のプロセスが使用しているアドレスを使おうとしているらしいので、どうやらプロセスを切るのが正解の模様
普通に調べると

```
heroku ps:scale web=0 
heroku ps:scale web=1 
```

この停止してから接続しなおすだったり

```
heroku restart web.1 --app appname
```
でリスタートしたりでdynoを直す？みたいですがどれも出来ませんでした

結局、接続ってなんかポート系だよね？そこを強制的に変えられないのかなと思いpythonファイルを見直してみました。

```app.py
app.run("localhost")
```
を

```app.py
if __name__ == '__main__':
    app.run()
```
と変更して再度デプロイしたところうまくいきました。

なんでかはわかりません！！！！！教えてください！！！！！！！！
scratch変数クエスト★2 ジャンプをクールにつくろう

# この記事でできること
- 自分で考えてジャンプ機能をつくることができます。
- 擬似的な重力の表現ができます。

![a01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/13e4ffba-6ea2-977b-3f27-916e58b53498.gif)

# つくりかた

---

## クエスト①
- プレイヤーが落ちるように見えるスクリプトをつくりましょう。

### 仕様
- スタートしたときにプレイヤーは空中にいる(x座標とy座標を指定する)
- プレイヤーは、y座標に-10ずつ変える

### 動作確認
![a02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1be5ecc9-1bd1-93c4-8ad9-5404cde690e5.gif)

### 答え合わせ
![a04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d7afc079-8bb2-3fe8-b14c-904675d0bb65.png)

### クエスト②に向けて
- ただ、この状態だとy座標の下へ向かって、一定の速度で「移動」しているだけなので、「落ちている」と演出するには少し物足りなく感じられます。

---

## クエスト②
- 変数を使って、プレイヤーが落ちるように見えるスクリプトをつくりましょう。

### 仕様
- 「重力」という変数をつくる
- 変数「重力」の初期値は0
- 変数「重力」は-1ずつ減っていく
- プレイヤーは、y座標に変数「重力」ずつ変える

### 動作確認
![a03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4f71b75f-98c6-5308-6f61-76fae121ca57.gif)

### 答え合わせ

![a05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/5ae566f5-d16e-6a46-3aa3-9bc5c039eab1.png)

### なぜうごくのか
- 変数「重力」が-1ずつ変わることによって、変数「重力」は、-1 , -2 , -3 , -4 とマイナスの値が大きくなります。
- それによって、プレイヤーの「y座標が-1ずつ変わる」「-2ずつ変わる」「-3ずつ変わる」とマイナスの値が大きくなることによって、「下へ向かって速く動く」 = 「プレイヤーがあたかも落ちている」ように見えるわけです。

---

## クエスト③
- 地面に触れたら、プレイヤーは地面で止まるようにしましょう。

### 仕様
- 背景に地面を描く(単色)
- プレイヤーが落下中(y座標で下へ移動中)に、下記２点を実装する
    - 「もし地面の色に触れたら」「変数の重力を0にする」
    - 「もし地面の色に触れていなければ」「変数の重力を-1にする」

### 動作確認(正解)

![a08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/65cc4983-3aa0-aea8-b285-e8929216e899.gif)

### よくある間違いの動作

![a06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/df06fa58-87da-c40d-21dc-cad28daea9ea.gif)

### よくある間違いのスクリプト

![よくある間違い.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/177fae0e-42f7-f09d-375f-bf8204a4ce6c.png)

### なぜ間違えるのか
- 地面に触れたときに変数「重力」が0になっても、結局は「ずっと」の中で、変数「重力」が-1ずつ変わることになります。(「ずっと」の中をよく見てみよう)
- そのため、毒の沼のように沈んでしまうように見えるわけです。
- 逆に、「水」の表現、「沼」の表現として使うこともできます。
- ただし、今回は「地面」としての表現なので、上記スクリプトは間違いとしています。

### 答え合わせ

![a07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d91d47cb-57e5-9822-7d88-e9349e6a01f4.png)

### なぜうごくのか
- プレイヤーは「ずっと」「y座標が変数「重力」ずつ変える」状態です。
- そのため、「地面に触れているかどうか」を「もし〜でなければ」を使います。
- もし「地面の色に触れていたら、変数「重力」は0にします。
- でなければ、変数「重力」は-1ずつ変えます。
- 変数「重力」の変数を使い始めて、なぜプレイヤーが落ちているのかわからなくなったら、クエスト②をもう一度やってみましょう。

---

## クエスト④
- 地面にいるときに、プレイヤーをジャンプできるようにしましょう。

### 仕様
- プレイヤーが地面にいるときに、「スペースキーがおされたら」「変数「重力」を20」にする

### 動作確認

![a09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/c6e58494-9a81-5976-720a-dad98488f8fd.gif)

### 答え合わせ

![a10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/188c5484-68eb-f673-b85d-3a289a9b6e90.png)

### なぜうごくのか
- スペースキーがおされたときに、変数「重力」を20にしたことにより、プレイヤーは「y座標を20ずつ変える」ところから、y座標の移動を始めます。
- 「20」はプラスの値のため、プレイヤーのy座標は上へと移動していきます。これがジャンプの表現となるわけです。
- 変数「重力」は-1ずつ変えているため、プレイヤーのy座標は19 , 18 , 17 と、-1ずつ減っていきます。
- そのため、プレイヤーのy座標に設定している変数「重力」はいずれ0になり、そこがプレイヤーのジャンプの最高地点となります。
- 以降は、変数「重力」は-1ずつ減っていくため、プレイヤーのy座標は0, -1 , -2 , -3 と、-1ずつ減っていきます。
    - 変数「重力」が-1ずつ減ることによって、プレイヤーのy座標が下へ移動することについては、クエスト②を見直してみましょう。

---