OmniAICreator/Qiita-1.07M huggingface dataset:
[Flutter]Androidでデバッグ実行しても、エラー発生もなしでインストール状態が続く


## 概要

- Androidでデバッグ実行しても、エラー発生もなしでインストール状態が続く

## 環境
- Mac OS Big Sur 11.6


## 原因

- 裏でアプリのキャッシュデータみたいなのが残っている可能性がある



## 対策

- adb uninstall ${packageName}

で Successと表示されればデバッグ実行できるようになる



## 参考

- https://stackoverflow.com/questions/51809421/flutter-is-not-able-to-install-the-apk-into-the-real-device-suddenly
【JS】2つの配列それぞれの値どうしをindexOfで検索したいけど方法がわからない【作業ログ】

# この記事について

本記事は、なにかの問題を解決するためのものではありません。

# やりたいこと

Chromeの開発者ツールから、入力欄（`input[type="text"]`）の値の一部を変更したい

## 具体的に

- 日付部分を20210201から20210301に変更したい
- ただし、日付の前に特定の番号（引数で指定する）がついている場合は変更しない

# 実行環境

- OS: Windows10
- ブラウザ: Google Chrome（94.0.4606.81）

# 実際に書いたコード

Consoleで実行するJavaScriptはこう書いた。（実際は意図通りに動いてないので、以下は正しくないのですが…）

- 配列で取れる入力欄要素を、`forEach`でループさせる
    - 関数の引数に指定した文字列の配列に対してループを回す
        - 入力欄の値の中に引数の値が含まれているかチェックする
            - 含まれている場合：何もしない。次のループに移る
            - 含まれていない場合：入力欄の値に置換をかける

```js:2つの配列をそれぞれ走査・値を比較、それに応じてAかBの処理をおこないたい.js
const lastMonth = '0201';
const thisMonth = '0301';
((...files) => {
    $$('input[type="text"]').forEach((el) => {
        for(let i = 0; files.length > i; i++) {
            if(((el.value).indexOf(files[i]) != -1)) {
                // 引数に指定した文字列が含まれていたら何もしない
                return;
            } else {
                el.value = (el.value).replace(lastMonth, thisMonth);
            }
        }
    })
})('131', '221');
```

以下のHTMLに対して上記のJavaScriptを実行する

```html:index.html
<table>
    <caption>テストテーブル</caption>
    <thead>
        <tr>
            <th>項目名</th>
            <th>入力欄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>テスト</td>
            <td><input type='text' value='入力テスト'></td>
        </tr>
        <tr>
            <td>名前</td>
            <td><input type='text' value='2021/111_20210101.pdf'></td>
        </tr>
        <tr>
            <td>身長</td>
            <td><input type='text' value='2021/121_20210101.pdf'></td>
        </tr>
        <tr>
            <td>年齢</td>
            <td><input type='text' value='2021/131_20210201.pdf'></td>
        </tr>
        <tr>
            <td>好きなもの</td>
            <td><input type='text' value='2021/211_20210201.pdf'></td>
        </tr>
        <tr>
            <td>よく行くカフェ</td>
            <td><input type='text' value='2021/221_20210201.pdf'></td>
        </tr>
    </tbody>
</table>
```

# 実際の結果

![HTMLに対してJavaScriptのコードを実行した結果のスクリーンショット。結果は下記リストの通りである。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/0a5dacba-0752-1626-76f6-e59ca67b75ea.png)


- 引数で指定した1つ目の文字が含まれる値のみ、置換されていない
- 2つ目に指定した文字が含まれる値は置換されている

## 想定していた結果

引数で指定した文字が含まれる入力欄は、すべて置換対象に入らない

# 想定通りにいかない原因

まず、今回出てくる配列2つを以下の名前に置き換える
- 入力欄の配列：A
- 引数で指定した文字の配列：B

先述のコードでは、チェックの部分が下記の挙動になる

- A配列の値それぞれにB配列の値をそれぞれ書いた通りの順番でチェックする
    - 引数に311と331と指定すれば、1番目に311、2番目に331とのチェックがおこなわれる

A配列の値に含まれる文字がB配列にあっても、順番次第で置換が発生する。結果としてうまくいかない

# うまくいくようにしたが関数を使うやり方に変えたい

どうしても想定通りに動くようにしたくて、ifとelse ifをたくさん使うコードを書いた

```js:チェックしたい文字の数だけelseifを増やす方法.js
const inp = $$('input[type="text"]');
const targets = ['131', '221'];
inp.map((el) => {
    const val = el.value;
    if(val.indexOf(targets[0]) != -1) {
        return;
    } else if(val.indexOf(targets[1]) != -1) {
        return;
    }
    el.value = val.replace('0201', '0301');
});
```

これだと想定通りにはなるが、`targets`に値を増やせば増やすほど`else if`も増やさないといけない。定例業務に使う書き捨てのコードだからこそもっとシンプルにしたい…。

# 行き詰まった

まとめです。

「2つの配列をそれぞれ走査して、値を比較、それに応じてAかBの処理をおこなう」というコードを書きたいのですが、うまくいきませんでした。実装方法を思いつく未来が見えないので、ひとまずあがいた記録を残す意図でここに書きました。悔しい。。
【Rails】map関数で行うリファクタリング

## 状況
UserテーブルとPostテーブルが1対1のアソシエーションの場合。
アクティブなUserの投稿した記事のidを配列形式で取得する

```ruby
post_ids = User.where(status:"active").post.pluck(:id)
```
こんな感じで1行で取得したいが、User.where(status:"active")は配列なのでpostを一意に識別できずエラーになる

## 冗長なコード
```ruby
users = User.where(status:"active")

post_ids = []
users.each do |user|
  post_ids.push(user.post)
end
```
あまりスタイリッシュじゃない、、。

## map関数でリファクタリング

```ruby
post_ids = User.where(status:"active").map { |u| u.post.id }
```
ワンラインで記載できていい感じ。

### コメントを元に追記

下記でも取得できる。

```ruby
User.where(status: 'active').joins(:posts).pluck('posts.id')
```

## Another worksでは一緒に働ける仲間を探しています

https://www.wantedly.com/projects/729427

https://www.wantedly.com/projects/617507

https://www.wantedly.com/projects/683778

https://www.wantedly.com/projects/691559
Python で iterator を使うときに考える初期化のタイミング

Python のクラスで `__iter__` や `__next__` を定義すると、そのインスタンスは for 文などで利用できます。

for 文で使うインスタンスを作るクラスを作ってみます。next を呼び出した回数をカウントしながら、1ずつ増やした数値を返し、規定の回数に到達したら `StopIteration` を出してループを終了させるようにします。

```python:forで使うクラス
class Iterator:

    def __init__(self):
        print("init")
        self.chunk = 3
        self.number = 0

    def __iter__(self):
        print("iter")
        self.count = 0
        return self

    def __next__(self):
        if self.count >= 3:
            raise StopIteration()

        self.count += 1
        self.number += 1
        return self.number
```

インスタンスは、複数回にわたって for 文に渡すことができます。

`__init__` が呼ばれるときはインスタンスを定義した最初のみで、 `__iter__` は for 文に使う度に呼ばれます。出力を見ると、 `print("init")` が最初に、 `__iter__` が first, second, third の出力の前にそれぞれ出現しているのがわかります。

```python:forを3回用いる
iterator = Iterator()

for i in iterator:
    print("first:", i)

for i in iterator:
    print("second:", i)

for i in iterator:
    print("third:", i)
```

```sh:出力
init
iter
first: 1
first: 2
first: 3
iter
second: 4
second: 5
second: 6
iter
third: 7
third: 8
third: 9
```

ここで、クラス内の `self.count` は `__iter__` が呼ばれているため3回リセットされていますが、 `self.number` は `__init__` で初期化しているだけのため、前回のループの値から引き続いて数値が増えていっています。

毎回の for で、 1,2,3 を出力したい場合、今回のように単純なクラスを用いる場合は、毎回インスタンスを作るのでも良いかもしれません。

```python:毎回インスタンスを作る
for i in Iterator():
    print("first:", i)

for i in Iterator():
    print("second:", i)

for i in Iterator():
    print("third:", i)
```

ただし、インスタンスの中でファイルの入出力をしたり、複雑な計算の結果を保存したりしている場合、そのインスタンスの使い回しをしたい場合もあるでしょう。

その場合は、 `__iter__` に毎回の初期化処理をしっかり記述することが必要です。

具体例として、 gensim の `Word2Vec` に文章を渡すとき、容量が多いためファイルを読みながら形態素解析をして、文章を一つずつ書き出していくときに使えます。このとき、イテレーターのインスタンスを引数に与えるわけですが、 `Word2Vec` は学習時に複数回ループを回すため、 `__init__` に全ての初期化処理を記述してしまうと、2回目以降の学習データが全部空になってしまいます。


Python の記事を調べていると、多くのコードで `def __iter__(self):` の中身が `return self` だけになっているため、筆者もあまり意識していませんでした。場合によっては致命的な不具合に繋がりかねないため、注意が必要です。
Optunaの内部ではなにが起きているか 全体概要編2

# はじめに
[前回](https://qiita.com/takassh/items/561b3f35f22eb88986cf)はOptunaの実装というよりもかなり触りの全体像のみを紹介しました。
前回[ベイズ最適化とは](https://qiita.com/takassh/items/561b3f35f22eb88986cf)という項でいきなりベイズ最適化という言葉を取り上げましたが、ここをもう少し詳しく説明します。

optunaの基本的な部分についてそのまま動かすことができる[コード](https://github.com/takassh/simple-tpe)もあります。それも触ってみてください。optunaとの比較もでき、完全に一致していることが確認できると思います。
なおバージョンは[v2.9.1](https://github.com/optuna/optuna/tree/release-v2.9.1)を参考にしています。

# 参考
[James Bergstra et al. Algorithms for Hyper-Parameter Optimization. NIPS’11, Pages 2546–2554.](https://papers.nips.cc/paper/2011/file/86e8f7ab32cfd12577bc2619bc635690-Paper.pdf)

# SMBO
これはSequential Model-Based Global Optimizationの略で上の論文では以下のfigure1で示されているものです。

![スクリーンショット 2021-10-10 12.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372622/7f020ba6-b12e-5408-cdff-b2d3e1e7a196.png)

論文によると、**計算コストの高い関数$f(x)$があるような状況**でよく利用されます。そこで、この$f(x)$を**計算しやすい代理の関数で近似する**というのがポイントになっています。
これを前回は**代理関数**と読んでいました。この代理関数(もしくは少し変形したもの)を数値的に逐次最適化し、数値解を得るというのがこのアルゴリズムの目的になっています。

**SMBOの大まかな流れ**
1. 代理関数(もしくは少し変形したもの)を最大化する値$x^∗$が次のイテレーションで$f$に提案され、計算される
2. その$f(𝑥^*)$を用いて代理関数を更新する
3. 1と2を$T$回繰り返し続ける


SMBOアルゴリズムは$x^∗$をどうやって算出するかと、観測済みのデータからどうやって$f$をモデル化するかで手法が変わってくるといえます。

図でもまとめておきます。

**変数定義**
- 計算コストの高い関数 $f$
- 総試行回数 $𝑇$
- 獲得関数を最大化する値 $x^∗$
- $x^∗$と$𝑓(x^∗)$の観測履歴 $ℋ$
- $ℋ$をモデル化 $𝑀_t$
- $x^∗$を算出するための関数(獲得関数、効用関数などと呼ばれます) $𝑆(x,𝑀_t)$

![SMBO.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372622/48b98c7f-8aba-1c1e-6d08-a2e90c4fe813.png)

データが得られるたびに$𝑀_t$の分布を少しずつ更新していくので、**ベイズ最適化**などと呼ばれたりします。ただ、実際はSMBOと呼んだ方が正しいかもしれません。

# GP-EIとTPE
前回に全体像、今回にSMBOを紹介したことでようやくGP-EIとTPE自体の概要の話ができるようになりました。

わかりやすさのため図を示します。
![GP-EI_TPE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372622/7c334cf9-8ab7-3c62-6599-2f59e9c86fe4.png)

SMBOの図と違っているところは、$S$の部分が期待値最大化となっていることです。GP-EIもTPEも期待値最大化を採用しており、違うのは$𝑀_t$を更新する部分のみとなります。

## 期待値最大化(Expected Improvement)とは
論文にあるように期待値は以下の式で示されます。$y^*$はlossの閾値で、閾値のlossより小さくなる期待値の計算をしています。
![スクリーンショット 2021-10-10 12.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372622/0ca0d6fb-8c2e-f957-87ca-5785d08ae6ca.png)
この期待値が最も大きくなる$x$が次のイテレーションで試される$x^∗$となります。

実は期待値最大化の他には、Probability ImprovementやLower Confidence Bounds などがありますが、一番直感的なのがEIなのでこれが採用されています。
これを選ぶ部分については今後のfuture workと論文には書いてあります。

# 最後に
長い文章を書くのが苦手なので、今回も短いですがここで終わりにします。
SMBOアルゴリズムというものがTPEの背景にあるということがわかってもらえればいいと思います。
次はGP-EIとTPEについてもう少し掘り下げる予定です。
package-lock.json の lockfileVersion が変更されてしまう場合の対処法

## 解決策
チーム内でnpmのメジャーバージョンを合わせる。

## 発生した問題

### npmをアップデート
npmで作業中に以下のようなアップデートガイドが表示されたため、npmをv6からv7にアップデートしました。（Node.jsはv14）

```
Update available 6.14.15 → 7.24.2
Run npm i -g npm to update
```

### lockfileVersion 1 → 2
すると、その後に `npm i` を実行した際、以下のような警告が表示されました。

```
npm WARN old lockfile:
The package-lock.json file was created with an old version of npm,
so supplemental metadata must be fetched from the registry.
```

通常より時間がかかり、installは成功しますが、 `package-lock.json` の `lockfileVersion` が 1 → 2 に変わり、ファイル全体に大きな修正が入っていました。

### lockfileVersion 2 → 1
例えばこの `package-lock.json` をpushして、他のチームメンバー（npm v6使用）が `npm i` を実行した場合、以下のような警告が表示されます。

```
npm WARN read-shrinkwrap:
This version of npm is compatible with lockfileVersion@1,
but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
```

この場合もinstallは成功しますが、 `lockfileVersion` が 2 → 1 に戻り、ファイル全体に再び大きな修正が入ります。

## 原因

[npm Docs](https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json#lockfileversion) によると、npm v7からは、生成される `package-lock.json` のフォーマットが大きく変更されていて、 `lockfileVersion: 2` が指定されるようです。

## 解決策: チーム内でnpmバージョンを合わせる

npmは、Node.jsと一緒にインストールされ、デフォルトのバージョンは `Node v14 → npm v6`、 `Node v15 → npm v7` のように、ある程度決まっているようです。

https://nodejs.org/ja/download/releases/

ですが、今回のように各個人がnpmをアップデートした際に、 `package-lock.json` の中身が変わってしまうという場合があるため、チーム開発では、npmのバージョンについても、メジャーバージョンだけは合わせておいた方が良いようです。

`npm i -g npm@バージョン` などで指定バージョンをインストールできます。

（バージョン情報は [npm/cliのGitHub](https://github.com/npm/cli/releases) 等を参照）
[SwiftUI]チェックボックスを自作する

## 投稿の経緯
現在参画中のプロジェクトがチェックボックスを必要とする仕様であり、自作したのでコードを紹介します。

## 環境
Swift 5.5
Xcode 13.0

## コードの紹介
```.swift
struct CheckBox: View {
    @State private var isChecked = false // チェックした/していないで変化させる
    var tapAction: () -> Void // CheckBoxを呼んだ時のアクション
    
    var body: some View {
        Button(action: {
            toggle()
            tapAction()
        }) {
            if isChecked {
                Image(systemName: "checkmark.square.fill")
                    .foregroundColor(.red)
            } else {
                Image(systemName: "square")
                    .foregroundColor(.black)
            }
        }
        .buttonStyle(BorderlessButtonStyle()) // Formで利用する場合に必要
    }
    
    func toggle() {
        isChecked.toggle()
        UIImpactFeedbackGenerator(style: .medium) // タップでiPhoneがブルっとなる（UX向上）
            .impactOccurred()
    }
}
```

特に難しい内容ではないと思います。参考にしてください！
cmake+googletest(gtest+gmock)を使えるようにするまで

## ドキュメント

- googletestのcmakeのQuickstart [Quickstart: Building with CMake](https://google.github.io/googletest/quickstart-cmake.html)
- cmakeのFetchContent [FetchContent](https://cmake.org/cmake/help/latest/module/FetchContent.html)

## サンプル

- 詳細はコメントに記載
- パッと見で「gtest_INCLUDE_DIR」とかが定義されていると便利なのだが定義されていない。googletest側のcmakeファイルをimportすればできるかもしれない。

```cmake
cmake_minimum_required(VERSION 3.14)
project(cmake_gtest_sample)

# GoogleTestはC++11で動かす必要がある
set(CMAKE_CXX_STANDARD 11)

# cmakeのFetchContent機能をinclude
include(FetchContent)
FetchContent_Declare(
  googletest
  URL https://github.com/google/googletest/archive/609281088cfefc76f9d0ce82e1ff6c30cc3591e5.zip
)
# 上記で ./build/_deps 以下にgoogletestのソースとバイナリが入る。便利。
set(gtest_force_shared_crt ON CACHE BOOL "" FORCE)
FetchContent_MakeAvailable(googletest)
FetchContent_GetProperties(googletest)

# テスト有効化
enable_testing()
find_package(Threads REQUIRED)
find_package(GTest REQUIRED)

# ここが苦労した。ログは以下のように出る。
#-- gtest_SOURCE_DIR = <projectのディレクトリ>/build/_deps/googletest-src/googletest
#-- gmock_SOURCE_DIR = <projectのディレクトリ>/build/_deps/googletest-src/googlemock
message(STATUS "gtest_SOURCE_DIR = ${gtest_SOURCE_DIR}")
message(STATUS "gmock_SOURCE_DIR = ${gmock_SOURCE_DIR}")

# C++ソースから `#include <gmock/gmock.h>` の形でincludeするために cmakeのinclude_directoriesを指定
set(GTEST_INCLUDE_DIR ${gtest_SOURCE_DIR}/include)
set(GMOCK_INCLUDE_DIR ${gmock_SOURCE_DIR}/include)
include_directories(${GTEST_INCLUDE_DIR} ${GMOCK_INCLUDE_DIR})

# 後は普通のcmakeプロジェクトと同様にテストのソースを追加していけばいいです
add_executable(
  hello_test
  hello_test.cc
)
target_link_libraries(
  hello_test
  gtest_main
)

gtest_discover_tests(hello_test)
```

自分はよく以下のようなシェルを作り、実行とテストをやってます

```shell
#!/bin/bash

rm -rf ./build
cmake -H. -Bbuild -G "Ninja"
cmake --build build
cd build && ctest && cd ..
```
【Python】pandas-datareaderで取得した株価データをデータベースにキャッシュして高速化

Pythonを用いて株価を取得した後、同じデータを使って繰り返し分析するときに再度株価を取得するようにしてしまうと時間がかかってしまい、非効率です。

そこで、取得した株価データをデータベースにキャッシュ（cache）して、それを使いまわすことで作業を効率化してみます。

- 実行環境：
Windows10

※元記事は[こちら](https://optrip.xyz/?p=4318)

# 株価の取得

株価の取得にはpandas-datareaderを使います。

- pandas-datareaderのインストール

```
pip install pandas_datareader
```

※pandas-datareaderの使い方に関しては[Pythonのpandas datareaderをインストールして株価データを取得する方法【日本株・米国株】](https://optrip.xyz/?p=2240)をご覧ください。

# 株価を取得してキャッシュする

株価をキャッシュするには、requests_cacheというモジュールを使います。

```
pip install requests_cache
```

## キャッシュための下準備

以下は、キャッシュのための準備です。

```python
from datetime import timedelta 
from requests_cache import CachedSession

expire_after = timedelta(days=3) # 3日間キャッシュする
session = CachedSession(cache_name='cache', backend='sqlite', 
                        expire_after=expire_after) 
session.headers = {
    'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0',
    'Accept': 'application/json;charset=utf-8'}
```

expire_afterは、キャッする期間です。

sessionのbackend=’sqlite’が、SQLite（データベース）にキャッシュすることを意味します。

## 株価の取得

```python
import datetime
import pandas_datareader.data as web

start = datetime.date(2018,1,1)
end = datetime.date(2021,1,1)

# 株価チャートの取得
origin = web.DataReader('AAPL', 'yahoo', start, end, session=session)['Adj Close']
```

株価チャートの取得での`session`オプションがポイントです（キャッシュしない場合は、これを削除すればよいです）。

**これを実行すると、cache.sqliteというファイルが実行ディレクトリに作成され、AAPLの株価チャートのデータはキャッシュされます。**

次の実行からは同じデータはキャッシュから呼び出されるので、APIから取得する時間はかかりません。

このような一つの銘柄だけではキャッシュしたありがたみが感じられませんが、たくさんのデータを取得したときにはキャッシュは作業効率化に有用です。

本記事のより詳しい説明および応用は以下の記事をご覧ください。

https://optrip.xyz/?p=4318
M5Stack Core 2で始めるAzure IoT Hub入門（その４）

前回
[https://qiita.com/hatsune_/items/20e983d25835dd145a1b]

第４回の今回は、M5Stack Core 2で収集した「気圧」「気温」「湿度」をAzure側もおくるために、まずはAzure側で準備することを紹介します。

# Azure IoT Hub について
M5Stack Core 2などのIoTデバイスからのデータ収集を行うとき、次のような仕組みが必要です。

1. 通信をセキュリティで保護
+ スケーリング
+ 正常性を監視
+ 可用性

具体的な実現方法については、今回は触れませんが、これらの仕組みを考慮しながらクラウド上に独自の収集ロジック用サービスを構築するには、高度な知識が必要になってきます。
オンプレミスなシステムであれば独自の通信路の維持管理なども含めてかなりの規模の開発や運用管理が必要となったでしょう。
しかし、これらの仕組みが含まれたAzure IoT Hubを使うことで、ゼロから設計および構築をしなくても一気に用意することができます。また、運用自体の負荷も利用しているAzure全体の運用の中に組み込むことで、運用負荷が著しく増加するということもありません。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatsune_a/20210906/20210906025551.png)

## IoT Hubの使用プロトコルについて
Azure IoT Hubは、MQTT (Message Queueing Telemetry Transport)、Http、AMQP (Advanced Message Queuing Protocol)など様々なプロトコルに対応しています。
今回のサンプルでは、「小さい」「大量」のデータを「低遅延」で「双方向」に通信できるMQTTを使います。

# Azure IoT Hubを準備するには
Azure IoT Hubを使用するためには、まずは、Azure IoT Hub自体を作成して、そこに接続するデバイスを定義していきます。

## Azure IoT Hubを作成する
Azure IoT Hubの作成は、Azure管理ポータルでリソースを作成するだけで簡単にできます。
Azure管理ポータルにサインインしたら、[リソースの作成]で「IoT Hub」を検索し、[作成]をクリックしてリソースを追加します。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatsune_a/20210906/20210906025953.png)

## プランで無料を選択する
Azure IoT Hubの料金プラン (課金額) は、作成時や作成後に指定できます。無料プランは、IoT Hubでは「F1:Freeレベル」という表記になります。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatsune_a/20210906/20210906030835.png)
スケーリングが1だったり、「Defender for IoT」も有効にできなかったりといくつかの制限はありますが、無料プランでも基本的な機能は備えていますので、動作確認や数台を接続して試験するような場合に便利です。

## Azure IoT Hubにデバイスを定義する
IoT Hubが作成できたら、その中に「IoTデバイス」を定義します。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatsune_a/20210906/20210906202759.png)

[IoTデバイスの追加]をクリックして、「デバイスID」「認証の種類」を選んで、[自動生成キー]にチェックを入れて追加をすれば、IoTデバイスからIoT Hubに接続するための接続文字列が生成されます。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatsune_a/20210906/20210906203055.png)

# 次回は
Azure側の準備が整ったので、次回は、M5Stack Core 5からAzure IoT Hubに「気圧」「気温」「湿度」を送信するためのプログラム（スケッチ）を紹介します。

# さらに詳しくAzure IoT Hubを学ぶには
Azure IoT Hubを学ぶ一番の近道は実際に使ってみることです。１日8000メッセージ（IoTデバイス１台だけ接続するならデータ送信間隔は約12秒）という上限はありますが、IoT Hubには無料プランもあるので課金を気にせず試せます。
また、もっと系統的に学びたいということであれば、Microsoft Learnもお勧めします。
[Learn: Azure IoT Hub の概要](https://docs.microsoft.com/ja-jp/learn/modules/introduction-to-iot-hub/?WT.mc_id=IoT-MVP-4015614)
[Learn: IoT デバイスをクラウドに安全に接続する](https://docs.microsoft.com/ja-jp/learn/paths/securely-connect-iot-devices/?WT.mc_id=IoT-MVP-4015614)
[Learn: Azure IoT Hub を使用してデバイスをリモートで監視および制御する](https://docs.microsoft.com/ja-jp/learn/modules/remotely-monitor-devices-with-azure-iot-hub/?WT.mc_id=IoT-MVP-4015614)

# 資格を取得する
[Learn: 試験 AZ-220: Microsoft Azure IoT Developer](https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-220?WT.mc_id=IoT-MVP-4015614)
[Learn: Microsoft Certified: Azure IoT Developer Specialty](https://docs.microsoft.com/ja-jp/learn/certifications/azure-iot-developer-specialty/?WT.mc_id=IoT-MVP-4015614)
npm install && npm run devのエラー発生

##npm install && npm run devのエラーが発生

```
//下記エラー
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-09-26T13_18_53_799Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-09-26T13_18_53_836Z-debug.log
```

##原因 

package.json内のバージョンが原因でnode.jsのライブラリをインストールしようとするとエラーが発生した模様

##解決策

```package.json
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.6.0",
"cross-env": "^7.0",
"jquery": "^3.6",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1", // "10.1.1"に変更。
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
}
```

laravel-mixのバージョンが5系だったので、6系だと下記の書き方が少々違っていた模様。

```[webpack.mix.js]
mix.js('resources/js/app.js', 'public/js')
.vue() //コメントアウトする。もしくは消す。
.sass('resources/sass/app.scss', 'public/css');
```

下記コマンドで再度インストールする。

```
//nodeモジュールを削除
rm -rf node_modules

//package-lock.jsonファイルを削除
rm package-lock.json

//npmのキャッシュをクリア
npm cache clear --force

//再インストール
npm install

//再度、動作確認
npm run dev
```

以上
[mysql]Cannot add or update a child row: a foreign key constraint fails ~ の解決例

## 何をしたら出た？
ローカルでeditアクションを編集したので、動作確認のためにdevelop環境のrequestのpayload（edit後の値として送るデータ）をgoogleのデベロッパーツールで取得して、postmanを使ってlocal環境で同じものをpaylodにして送ったところ出現

## 原因は？
develop環境とlocal環境のDB内のレコードに差分があり、本来外部キー制約で存在している前提としていた子テーブルのレコードがなくなっていた。

## 解決方法
子テーブルのレコードをlocalにも追加してから、再度postmanを使ってlocal環境で同じものをpaylodにして送ることでエラーを解決できた。
S3にアップした画像が表示されない

#はじめに#
[こちら](https://qiita.com/kt103/items/535dd1808083e61989c6)の記事でなんとかS3への画像アップロードを実装したものの、なぜか表示がされない・・・というエラーにぶつかりましたのでメモを残していきます。

#エラー内容#
　S3へのアップは問題なくできており、表示ができないというパターンです。
S3のバケットから保存されたファイルの詳細をみていきます。
オブジェクトURLをクリックするとこんな表示がされました。
![スクリーンショット 2021-10-10 12.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558223/82506075-417f-f6b6-e573-b47033f107b5.png)
調べてみると、どうやら画像へのアクセス許可がされていないようです。解消するためにはバケットポリシーを編集していく必要があります。

#バケットポリシーの編集#
　バケット名をクリックして、アクセス許可のタブをクリックするとこんな画面が出てきます。
![スクリーンショット 2021-10-10 12.33.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558223/34fce08a-60d3-aaf3-4dbe-e814ccbcf147.png)
編集を押すと編集画面へ遷移します。
記入の仕方は[こちら](https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html)の公式ページから確認することができます。
今回の場合は匿名ユーザーに読み取り専用権限を付与することでなんとかなりそうです。
このように書いていきます。

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::バケット名/*”
        }
    ]
}
```
この時、自分で作ったバケット名をResourceに入れるようにしてください。


#終わりに#
無事に表示することができました！
【AtCoder】ABC207のA,B,C問題を解く

# PythonでABC207のA,B,C問題を解く

ABC222のA,B,C問題をPython3で解答しています。
簡単な解説はコードの中に記載しています。

SNSでの発信も少しずつ始めました。フォローしていただけたらフォロー返してます。。！
[Twitter](https://twitter.com/Edu_ner)

[A - Four Digits](https://atcoder.jp/contests/abc222/tasks/abc222_a)
##
```python:python
# 文字列として受け取り、足りない桁文を足す。
n = input()
length = len(n)
if length == 4:
    print(n)
elif length == 3:
    print('0'+n)
elif length == 2:
    print('00' + n)
elif length == 1:
    print('000'+n)
```
<br>


[B - Failing Grade](https://atcoder.jp/contests/abc222/tasks/abc222_b)
##
```python:python
# P 点未満の学生をカウントしていく
n, p = map(int, input().split())
l_a = list(map(int, input().split()))
ans = 0
for i in range(n):
    if l_a[i] < p:
        ans+= 1
print(ans)
```
<br>


[C - Swiss-System Tournament](https://atcoder.jp/contests/abc222/tasks/abc222_c)
## 
```python:python

# 入力
n, m = map(int, input().split())
jan = []
for i in range(2*n):
    x = input()
    jan.append(x)
d = []
for i in range(1, 2*n+1):
    tmp = [i, 0]
    d.append(tmp)

# 各ラウンド
for i in range(m):
    # i ラウンド目の各試合の組み合わせは、i−1 ラウンド目終了時点の順位が 2k−1 位の人と 2k 位の人で試合をする
    for j in range(1, 2 * n + 1, 2):
        # i ラウンド目までの勝数が多い方が上位
        if jan[d[j][0]-1][i] == 'G' and jan[d[j-1][0]-1][i] == 'C' or jan[d[j][0]-1][i] == 'C' and jan[d[j-1][0]-1][i] == 'P' or jan[d[j][0]-1][i] == 'P' and jan[d[j-1][0]-1][i] == 'G':
            d[j][1]+= 1
        elif jan[d[j][0]-1][i] == 'G' and jan[d[j-1][0]-1][i] == 'P' or jan[d[j][0]-1][i] == 'C' and jan[d[j-1][0]-1][i] == 'G' or jan[d[j][0]-1][i] == 'P' and jan[d[j-1][0]-1][i] == 'C':
            d[j-1][1]+=1
        # i ラウンド目までの勝数が同じときは、番号が小さい方が上位
        d = sorted(d, reverse=False, key=lambda x: x[0])
        # i ラウンド目までの勝数が同じときは、番号が小さい方が上位
        d = sorted(d, reverse=True, key=lambda x: x[1])

# i ラウンド目までの勝数が同じときは、番号が小さい方が上位
d= sorted(d, reverse=False, key=lambda x: x[0])
# i ラウンド目までの勝数が同じときは、番号が小さい方が上位
d= sorted(d, reverse=True, key=lambda x: x[1])

for i in range(2*n):
    print(d[i][0])
```

プログラミング絶賛学習中です。
プログラミング学習中の皆様、よろしくお願いいたします。。！
[Twitter](https://twitter.com/Edu_ner)
docker commit しても volume でマウントしたディレクトリはイメージ化されない

# 事象

タイトル通り。

```dockerfile:Dockerfile
VOLUME /foo/bar
```

もしくは

```yaml:docker-compose.yml
  volumes:
    - /foo/bar
```

といった記述がある場合、

```bash
docker commit <ID> <Tag>
```

で起動中コンテナをイメージ化しても、マウントされているディレクトリはイメージに含まれない。

> コンテナ内でマウントされているボリュームに含まれるデータは、コミット作業に含まれません。
https://docs.docker.jp/engine/reference/commandline/commit.html

# 対策

ファイルを書き換えて VOLUME させないようにするほかなさそう。
Dockerfile 記載の VOLUME を docker-compose.yml 側で無効化するのはできない模様?
https://ja.stackoverflow.com/questions/40033/docker-compose%E3%81%A7dockerfile%E3%81%AEvolume%E8%A8%AD%E5%AE%9A%E3%82%92%E8%A7%A3%E9%99%A4%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B
【Redmine】コメントをTextile記法で見やすく書きたい

## はじめに

業務でRedmineをよく使うので、
コメントを見やすく書くためにTestile記法でよく使うものをまとめてみました。

[デモサイト](https://my.redmine.jp/demo/)から気軽に試せるのでぜひ。


## こんなふうにかけます
たとえばこんなふうに書くと、

```
{{toc}}

h4. コメント例①

* リンク
"Redmine.JP":http://redmine.jp/

---

h4. コメント例②

* 太字 / 下線 / 取消線
*太字にしたい文字*
+下線を引きたい文字+
-取消線を引きたい文字-

* 箇条書き
** 箇条書きインデント

# 番号つきリスト
## 番号つきリストインデント

---

h4. コメント例③

* テーブル
|セルの内容|セルの内容|

* 整形済みテキスト
<pre>
hello world
</pre>

* 整形済みテキスト+コードハイライト
<pre><code class="javascript">
console.log('hello world')
</code></pre>


* テキストの折り畳み

{{collapse(折り畳んでいるときの文字,開いているときの文字)
hello world
}}

* 画像
!{width: 200px}redmine.jpg!
```
こうなります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/add524f1-17b0-bb0b-4c30-3eaf0b36d7a8.png" width="1000">


## 書き方一覧
### 見出し

```
h1. 見出し1
h2. 見出し2
h3. 見出し3
h4. 見出し4
h5. 見出し5
h6. 見出し6
```
<br>

### リンク


```
"表示したい文字":リンク先URL
```
<br>

### 段落

```
p>. 右寄せ
p=. センタリング
```
<br>

### 目次
（h4.以上の見出しを自動的に目次にします）

```
{{toc}}
```
<br>

### 太字

```
*太字にしたい文字*
```
<br>

### 下線

```
+下線を引きたい文字+
```
<br>

### 取消線

```
-取消線を引きたい文字-
```
<br>

### 箇条書き

```
* 箇条書き
** 箇条書きインデント
```
<br>

### 番号付きリスト

```
# 番号
## 番号インデント
```
<br>

### 水平線

```
---
```
<br>

### テーブル

```
|セルの内容|セルの内容|
```
<br>

### 整形済みテキスト

```
<pre>
記載したい内容
</pre>
```
<br>

### 整形済みテキスト+コードハイライト

```
<pre><code class="コードハイライトしたい言語">
記載したい内容
</code></pre>
```
<br>

### テキストの折り畳み
    
```
{{collapse(折り畳んでいる時に表示したい文字,開いた時に表示したい文字)
折り畳みを開いた時に表示したい内容
}}
```
<br>

### 画像の貼り付け（{width: xxxpx}をつけると大きさ指定できます）
    
```
!sample.JPG!
    
・大きさ指定
!{width: 1000px}sample.JPG!
    
・画像右寄せ
!>sample.JPG!
```

## 参考資料

- [Redmine.jp](https://redmine.jp/overview/)
- [textile記法](https://redmine.jp/tech_note/textile/)
- [Redmineのtextile記法の備忘録](https://qiita.com/hiwasaki/items/5b2922d7dc46f7a55827)
Laravel+Amazon S3　画像をアップする方法

#はじめに#
　Laravelでアプリを作ったのでHerokuで公開してホッとしたのも束の間、どうやらHerokuでは画像の保存ができないらしい・・・。
ということで今回はS3へ画像を保存する方法を取りたいと思います！
初心者の備忘録ですので、理解不足はご容赦ください。

#AWSアカウントの作成#
　[公式](https://aws.amazon.com/jp/register-flow/)を参考にアカウントを作成しましょう。その際、access keyとsecret access keyが発行されるのでメモっておきましょう。
忘れた場合は[こちら](https://docs.aws.amazon.com/ja_jp/powershell/latest/userguide/pstools-appendix-sign-up.html)を参考にしてみてください。

#S3のバケットを作る#
　[こちら](https://qiita.com/miriwo/items/41e488b79fb58fa7c952)を参考にバケットを作成してください。ここに画像ファイルが保存されていきます。
　その際に、ブロックパブリックアクセスをオフにしてください。

![スクリーンショット 2021-10-10 11.53.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558223/0d72487a-485b-2427-f431-9acaad0df944.png)
これでAWSの設定は完了です！

#パッケージのインストール#
　最初にAWS SDK for PHPをインストールします。

```
$ composer require aws/aws-sdk-php
```

次に、flysystem-aws-s3-v3をインストールしていきます。

```
$ composer require league/flysystem-aws-s3-v3
```

laravel8の場合は

```
$ composer require league/flysystem-aws-s3-v3:^1.0
```

このようにすることでインストールできます。
この辺りがうまくいかない場合はcomposer.jsonやcomposer.lockをゴニョゴニョする必要があるみたいです。エラーメッセージをよく読んで戦っていきましょう。

#Laravelの設定#
　次に.envファイルを編集していきます。
このように書きます。

```.env
AWS_ACCESS_KEY_ID=最初に生成されたアクセスキー
AWS_SECRET_ACCESS_KEY=最初に生成されたシークレットアクセスキー
AWS_DEFAULT_REGION=バケットのリージョン
AWS_BUCKET=バケット名
AWS_USE_PATH_STYLE_ENDPOINT=false
```

これで設定は完了です。

#コントローラーとビューの作成#
次に、コントローラーに画像をアップする処理、ビューに画像を表示する処理を書いていきます。

```controller.php
public function store(Request $request)
    {
        $item = new Item();

        if(empty($errors)){
            $img = $request->file('img');
            $path = Storage::disk('s3')->putFile('/test', $img,'public');
            $item->img = $path;
            $item->save();
        }
        return redirect()->route('home');
    }
```

データベースにはS3に保存された画像のパスが保存されます。

表示はこんな感じです。

```php:index.blade.php
{{ Storage::disk('s3')->url("$item->img") }}
```
PHP -正規表現に関する関数-

# PHP 正規表現に関する関数
主な正規表現

|意味|正規表現|記述例|記述例の意味|
| --- | ------- | ------- | ---------- |
|文字列の冒頭|^| ^line| 冒頭にある「line:」|
|文字列の終端|$|。$|終端にある「。」|
| 改行文字を除く任意の1文字| .| ...|任意の3文字。例えば「abc」,「xyz」などにマッチ|
|いずれか|[]|[abc]|「a」,「b」,「c」のいずれか1文字|
|文字の範囲|-|[a-zA-Z0-9]|a ~ z ,A ~ Z, 0 ~ 9のいずれか1文字|
|以外|[^]|[^0-9]|0 ~ 9以外の1文字|
|指定回数の繰り返し|{n}|[0-9]{3}|0 ~ 9の連続する3文字|
|指定回数の繰り返し範囲|{n,m}|[a-zA-Z]{1,3}|アルファベットの1~3回の繰り返し。「ab」や「ABC」などがマッチする|
|1回以上の繰り返し|+|[a-zA-Z]+|アルファベットの1回以上の繰り返し。「a」や「abcde」などがマッチする|
|0回以上の繰り返し|*|abc*de|cがないか、または1つ以上ある。「abde」,「abcde」,「abccde」などがマッチする|
|0または1回の繰り返し|?|abc?de|cがないか、または1つある。「abde」,「abcde」にマッチする|
|いずれか| &#124;|abc &#124; xyz |abcまたはxyzのいずれかにマッチする| 



## preg_match
指定した文字列の中に、正規表現で指定したパターンが存在するか調べる時にはpreg_match関数。
preg_match関数は指定した文字列の中に正規表現で指定したパターンがあれば、戻り値として1を返し、なかったら0を返します。
なので、下記のコードのようにif文の条件式でうまく使うことが可能です。

```php
<?php
// preg_match関数の使用例
$code = '123-4567';
// 郵便番号の形式が正しいかチェック
if(preg_match('/^[0-9]{3}\-[0-9]{4}/u', $code)){
    echo '正しい郵便番号です。';
}else{
    echo '間違った形式の郵便番号です。';
}
```

## preg_replace
正規表現でマッチした文字列を置換したいときは、preg_replace関数を使います。
丸括弧()で囲まれた部分が順に${1},${2},${3}の参照番号に代入されます。

```php

<?php
// 生年月日をハイフン区切りから〇〇〇〇年〇〇月〇〇日の形に置換する
$date = '2021-10-09';
$date = preg_replace('/([0-9]{4})\-([0-9]{2})\-([0-9]{2})/u', '${1}年${2}月${3}日', $date);
echo $date; // 結果：2021年10月09日と出力

```

## preg_split
正規表現で区切り文字を指定して文字列を分割するには、preg_split関数を使います。

```php
<?php
// 文字列を一つずつ分解する
$chars = preg_split('//u', 'Hello World', -1, PREG_SPLIT_NO_EMPTY);
print_r($chars);

// 文字列を改行で分解する
$message = <<< TEXT
preg_split関数の
実例を紹介しています。
参考にしてみて。
TEXT;
$lines = preg_split('/(\r\n|\r|\n)/',$message);
print_r($message);
```

## preg_quote
正規表現として意味を持つ記号類を、バックスラッシュ記号(\)で一括してエスケープしたい時に使うのがpreg_quote関数です。
正規表現の特殊文字は、次のものです。 . \ + * ? [ ^ ] $ ( ) { } = ! < > | : - #
第2引数にはエスケープ対象の文字を追加したい時に指定します。PCRE正規表現を使う場合には一般的に「/」を指定します。
バージョン7.2.0より第2引数のnullableが可能になり、7.3.0より#文字がクオートされるようになりました

|バージョン | 説明 |
|---|---|
|7.3.0| # 文字がクォートされるようになりました。|
|7.2.0| delimiter(第2引数) は、nullable になりました。|

```php
<?php
$keywords = '$40 for a g3/400#';
$keywords = preg_quote($keywords, '/');
echo $keywords;  //  \$40 for a g3\/400\# を返します
```
Pythonで初めてwebスクレイピングしてみる

#この記事で行うこと
じゃらんの口コミをスクレイピングで取得し、ローカルのエクセルにcsv形式で出力・保存。
スクレイピング対象のURLは下記になります。
https://www.jalan.net/yad330474/kuchikomi/?screenId=UWW3001&yadNo=330474&smlCd=012102&distCd=01

#環境
Python3.9
windows10

#jupyter notebookのセットアップ
#①jupyterをインストール

```
pip install jupyter
```

#②requestsをインストール

```
pip install requests
```

#③pandasをインストール

```
pip install pandas
```

#④beautiful soup4をインストール

```
pip install bs
```

#⑤jupyter notebook起動

```
python -m notebook
```

#⑥プルダウンからPython3を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/a757e95b-1352-1392-f484-ef19ac0588f8.png)

#⑦コードを記述&実行
コードを記述し、Alt + Enterまたは実行ボタンで実行するとjupyter上で出力及びローカルにエクセルが出来ています。
今回出力形式が日本語のため、文字化け解消にutf_8_sigを記述しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/95a80807-9351-8f88-2f46-49e9803e8c38.png)

```
import requests
from bs4 import BeautifulSoup

r = requests.get("https://www.jalan.net/yad330474/kuchikomi/?screenId=UWW3001&yadNo=330474&smlCd=012102&distCd=01")
c = r.content

soup = BeautifulSoup(c, "html.parser")

all=soup.find_all("p",{"class":"jlnpc-kuchikomiCassette__postBody"})

l=[]
for item in all:
    d={}
    d["クチコミ"]=item.text
    l.append(d)

import pandas
df=pandas.DataFrame(l)
df.to_csv("じゃらん.csv", encoding='utf_8_sig')
df
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/8de1c632-9a15-29ed-4c02-6f343f551b97.png)
[超入門]Touchdesignerの「UnrealEngine Plug-in Samples」 解説してみたよ～ CHOP応用編

#CHOP応用編
[前回CHOP](https://qiita.com/miwa_maroon/items/3c9d7016626eb8389475)の基礎編ということで、
CHOPをどういうふうにUE4の値に変換して、それを取得してくるか
みたいなことをやりました。
応用編では、主に3つ

- ライティングの制御
- ばねシュミレーション
- GPGPUてきなパーティクル

を説明しています。
ということで、こちらご覧ください！
<iframe width="560" height="315" src="https://www.youtube.com/embed/1YZ2BdOuqoA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#ライティングの制御
ここは、[前回のCHOP基礎編](https://qiita.com/miwa_maroon/items/3c9d7016626eb8389475)を見ていれば、そんな難しいことはありませんが
変更している点があります。
CHOPを扱ううえで、Channelを指定する必要があるという話をして
そこで使うのが**Get Channel**という関数でした。
数字の**Index**でChannel指定しましたね、1番目なら0、2番目なら1みたいな

ここで別の取得方法として
###Get Channel By Name
![getchannelbyname.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/abe652cf-51a1-2c2e-08a3-e3a826dbe02e.jpeg)

Indexで指定していたところを**Channel名**で指定することができます
それだけといえばそれだけ（笑）

で、Get Channel By NameでRGBをそれぞれ抜出、
ライトのRGBに突っ込んでるわけです。 <- Set Light Color
![set_light_color.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/07fd2219-b4c2-2780-5197-5866cc572466.jpeg)

#ばねシュミレーション
さて、次はおもろいですよ～
**ばねの動きつけたいんだよな～**って思うときありますよね

UE4だけで、それをやるとき関数書く必要があったり、なにかといろいろやらないといけないことがあります。

皆さんもご存じの通り、TouchdesignerのCHOPには、**物理系のシュミレーション**を簡単に実装できるようになっています

その中の一つに
###Spring CHOP
があります

こいつが**ばねシュミレーションを助けてくれるCHOP**です。

ただしパラメータがたくさんあるので、こちらをUE4でもいじれるようにしてあげよう
ということで、Custom parameterとして、外だしはしておきましょう
![spring_chop_ue4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/831fb128-f71a-6c92-4394-d8bad4ff8a86.jpeg)

[動画](https://www.youtube.com/watch?v=1YZ2BdOuqoA)で見るとわかる通り、
ブアンブアンする動きを作ることできて、なかなかおもしろいですね

ちなみに、ばね係数=k というのを中学ぐらいで勉強したのがここでも活用できてるな～と思い
勉強は大事だと改めて実感しますね～

#GPGPUてきなパーティクル
![ue4_plugin_samples_01setup_thumnbnail_chop_advance-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/6ea9ab66-c974-6256-0826-c7932dae747f.jpeg)

サムネイルに使ったこのParticleは、
TOPのそれぞれのピクセルの色情報をもとに位置を決めています

いわゆる**GPGPUパーティクル**ってやつですが、

**TouchEngine Componentでやるときには、TOPの値をそのままぶちこむことはできません**
(NiagaraっていうParticle system使えばできないことはない、けど複雑になるので今回は飛ばします)

**一旦CHOPに変換して送ってあげる**ことになります。
そこからはget Channelでxyz抜き出して、For Eachループで回してひとつひとつの値に対応させていく感じですね

ちなみに、このParticleはTouchdesignerのパレットにある
**Point Generator**を使っています。
![point_generater.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/4f8b594f-56d8-a735-3fb8-619b2ef8e4b5.jpeg)

#最後の砦「DAT」
あとは、DATだけになりました。
DATもちょいちょい使うんで、見るだけでも価値あると思うし、
いままで**リアルタイムに値の反映**はしてこなかったけど、
それができるようになっちゃいます。

サンプルからは脱線することにはなるけど、
個人的に見せたほうが絶対いいなと思ったので
やります！！

というわけこの記事が少しでも役に立ったなーと思ったら、LGTMやYoutubeに高評価押してもらえると
モチベーション維持になりますのでうれしいです。
承認欲求満たされます（笑）

ということで、次回！
【Nuxt.js】ディレクトリ構成について

#はじめに
こんにちは。
こちらの記事では、Nuxt.jsのディレクトリ構成ついてアウトプットしていきます！
誤っている点がございましたらコメントいただけると幸いです。

##ディレクトリ構成とは
ページの役割ごとにフォルダ分けをして、そのフォルダの構造のこと。
Nuxt.jsで``の構成は以下のようになります。


>プロジェクト名/
　├ assets/
　├ components/
　├ layouts/
　│ ├ default.vue
　│ └ error.vue
　├ middleware/
　├ pages/
　│ └ index.vue
　├ plugins/
　├ static/
　└ store/
>

###assetsディレクトリ
コンパイルされていないSassやJavaScript、画像などを配置。

###componentsディレクトリ
複数回使用するヘッダーやフッター、ボタンなどの部品をコンポーネント化して配置できるディレクトリ。

###layoutsディレクトリ
`default.vue`には、componentsディレクトリに登録したヘッダーやフッターなどのレイアウトを呼び出すことができ、ページごとのコンテンツはpagesディレクトリに配置。
`error.vue`には、エラーが起きた時に表示されるレイアウトを配置。

###middlewareディレクトリ
ページを表示する前に必要な処理があれば記述することができる。

###pagesディレクトリ
トップページの`index.vue`や他のページのファイルを配置する。Nuxt.jsでは、このディレクトリ内のすべてのrouterを自動で作成する。

###pluginsディレクトリ
JavaScriptのプラグインを配置する。

###staticディレクトリ
ファビコンや静的ファイルを配置しておく。

###storeディレクトリ
Vuexストアのファイルを配置しておく。



#おわりに
ここまでNuxt.jsのディレクトリ構成についてまとめました。
まだまだ理解が浅い箇所もあるので、使いながら実務で使えるように知識を深めていきたいと思います！
以上、最後まで読んでいただきありがとうございました！
VScodeでpythonの実行pathをInterpreter Pathと一致させる

VScode使用時、PythonのInterPreterPathとPythonPathを一致させるにはどうしたらいいのかと思い色々調べたのでそれのメモです。

Anaconda等を使用していて複数の仮想環境を使う人に向けて参考になればと思います。

##すぐに解決したい人向け

``` ${config:python.defaultInterpreterPath} ```をPython Pathの設定に書き込みましょう。おわり。

##Variablesを使おう

拡張機能>Python>拡張機能の設定 
で設定画面まで移動したら、まずはInterPreterPathを探します。
検索ボックスに
```@ext:ms-python.python Default Interpreter Path```
と入れれば出てきます。

今回はAnaconda3を使用しているとして、次のように設定します。MyNameとMyEnvsはそれぞれあなたのユーザー名と仮想環境名が入ります。
```C:\Users\MyName\anaconda3\envs\MyEnvs\python.exe```

で、問題なのがPython Pathです。同じく検索ボックスから
```@ext:ms-python.python Python Path```
で探せば出てきます（下の方にあります）。
そのままパスを入力しても良いのですが、それだと環境を変えてInterPreterPathを変更した時に逐一Python Pathを設定から変える必要があります。InterPreterPathはコマンドパレットなり左下をクリックなりでサッと変更できるのに面倒くさいですね。

ということでVariablesを使います。要は設定で使える特殊な変数群のことです。
VSCodeの公式サイトにリファレンスがあります。

https://code.visualstudio.com/docs/editor/variables-reference

ここでざっと見てみると、

>Configuration variables
You can reference VS Code settings ("configurations") through \${config:Name} syntax (for example, \${config:editor.fontSize}).

これが使えますね。InterPreterPathの設定をそのまま引っ張ることができればよいわけですから、次のようにPython Pathに記述してあげればOKです。

``` ${config:python.defaultInterpreterPath} ```

これで無事InterPreterPathを変更した時に一緒にPython Pathも変更されるようになりました。おしまい。
Jetpack4.6でax200ngw カードを使う。


https://github.com/yoffy/jetson-nano-kernel.git
をクローンし、
install-iwlwifi.shを実行する。

ac9260,ax200ngwで動作を確認

Jetson nano上でax200ngw
AGX Xavier上でac9260->不安定
の動作を確認。

wifiインターフェースが利用可能になるまで、1分かかるのは
ファームのリロードを
jetson NanoでAX200を使う
https://blankalilio.blogspot.com/2020/11/jetson-nanoax200.html
の
fallback-timeout.service
を利用
対照学習とは （Contrastive Learning）

# 対照学習とは

対照学習（Contrastive Learning）は、自己教師あり学習の一つ（機械学習の手法の一つ）で、ラベル付けを行うことなく、データ同士を比較する仕組み用いて、膨大なデータをそのまま学習できる自己教師あり学習の一つです。
**似たデータは近くに、異なるデータは遠くになるように特徴量を学習します。**

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195675/934b3adb-1331-3d5b-c9ea-74ea42c3ef37.png)


コンピュータービジョン、自然言語処理（NLP）領域で活用が期待されています。代表的な手法に、SimCLR、PCL、BYOLなどがあります。

※詳細な学習方法は論文の5 Trainingをご参考ください。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195675/68ba5baf-5461-e980-e063-89715519ed38.png)


画像引用元：https://arxiv.org/pdf/2011.00362.pdf

# AI Academy Bootcamp

[６ヶ月35,000円にてチャットで質問し放題の環境で、機械学習やデータ分析が学べるサービス](https://aiacademy.jp/bootcamp)を提供しております。
数十名在籍しているデータサイエンティストや機械学習エンジニアに質問し放題の環境でデータ分析、統計、機械学習、SQL等が学べます。AI人材に必要なスキルを効率よく体系的に身に付けたい方は是非ご検討ください！
![bootcamp_ad_72ppi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195675/f261ccc8-42db-a292-2511-6a742d1987f7.png)
https://aiacademy.jp/bootcamp



# 自己教師あり学習とは


ここで突然出てきた自己教師あり学習(Self-supervised Learning)の解説も合わせて行います。

自己教師あり学習とは、Self-supervised Learningの頭文字をとったSSLと略されることもあり、ラベル無しデータを用いた教師なし学習の一種です。

自己教師あり学習は、データ自身から独自のラベルを機械的に作り、学ばせるようなタスクです。そのため、我々はラベルを用意する必要がありません。
ディープラーニングを含む機械学習は教師あり学習、教師なし学習、強化学習の3つに大別されることが一般的ですが、現実社会の問題を解決するにあたって、ラベル付きのデータを大量に用意するのは、骨が折れます。

そこで、ディープラーニングの研究開発が進むにつれ、ラベルが無いデータを用いたディープラーニングの手法が模索されてきています。

自己教師あり学習では、このラベル付けを機械的に行えることから、注目を浴びています。（分類としては教師無し学習の1種になります。）

# 対照学習論文
対照学習並びに自己教師あり学習に関して説明しましたが、下記から対照学習の論文にアクセスすることが出来ますので、是非チェックしてみてください。

https://arxiv.org/abs/2011.00362

# 最後に

最後までお読み頂きありがとうございます。
月額980円で、Pythonを中心に機械学習、データサイエンス、WEB開発、SQL、スクレイピング、Julia、R、Gitなどが学べる「[AI Academy](https://aiacademy.jp/texts/)」を運営しております。無料登録で100近いコンテンツも見れますので、これから機械学習の勉強をしたい方是非ご活用頂けると幸いです！

# AI Academy Bootcamp

[６ヶ月35,000円にてチャットで質問し放題の環境で、機械学習やデータ分析が学べるサービス](https://aiacademy.jp/bootcamp)を提供しております。
数十名在籍しているデータサイエンティストや機械学習エンジニアに質問し放題の環境でデータ分析、統計、機械学習、SQL等が学べます。AI人材に必要なスキルを効率よく体系的に身に付けたい方は是非ご検討ください！
![bootcamp_ad_72ppi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195675/f261ccc8-42db-a292-2511-6a742d1987f7.png)
https://aiacademy.jp/bootcamp
Pythonでランダム文字列を生成する

## 結論
こうするとできます。コメントアウトに出力を書いてます。

```python
import random
s = ''.join(random.choices('PA', k=4))
print(s)
# PPAP
```

## 解説

`random.choices('PA', k=4)` で `P`,`A` からランダムにどちらかを4回選んでリストに入れたものを作ります

```python
import random
print(random.choices('PA', k=4))
# ['P', 'P', 'A', 'P']
```

`''.join` で文字列のリスト `['P', 'P', 'A', 'P']` を空文字で連結します

```python
print(''.join(['P', 'P', 'A', 'P']))
# PPAP
```

以上

## ちなみに

 `string.*` が便利です。`'PA'` の代わりに使うと良いかもしれません。

```python
import string
print(string.ascii_lowercase) # abcdefghijklmnopqrstuvwxyz
print(string.ascii_uppercase) # ABCDEFGHIJKLMNOPQRSTUVWXYZ
print(string.ascii_letters)   # abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
print(string.digits)          # 0123456789
```

`random.choices` は添字アクセス可能なオブジェクト（例: str, list）からランダムにk回選んでリストにしたものを返します
添字アクセス可能かどうかは以下のように判定できます

```python
print(hasattr('PA', "__getitem__")) # True
print(hasattr(1, "__getitem__")) # False
```

`__getitem__` は直接実行することもできます

```python
print('PA'.__getitem__(0)) # => P
print('PA'.__getitem__(1)) # => A
print('PA'.__getitem__(2))
# Traceback (most recent call last):
#   File "<stdin>", line 1, in <module>
# IndexError: string index out of range

n = 1
print(n.__getitem__(0))
# Traceback (most recent call last):
#   File "<stdin>", line 1, in <module>
# AttributeError: 'int' object has no attribute '__getitem__'
print(n[0])
# Traceback (most recent call last):
#   File "<stdin>", line 1, in <module>
# TypeError: 'int' object is not subscriptable
```

joinを使えば文字列のリストを改行で繋げることもできます。競プロでよく使ってます。

```python
print('\n'.join(['P', 'P', 'A', 'P']))
# P
# P
# A
# P
```

## 参考
* https://qiita.com/gyu-don/items/bde192b129a7b1b8c532
go: cannot find main module, but found｜GolangのテストをGitHub Actionsで回した時のエラー

#　状況
ある書籍のサンプルコードを動かしていたところ遭遇したエラーです。
Golangは触ったこともない状態で進めていたのでモジュールやGoPathなども
理解できていない状態でした。

# エラーメッセージ
GitHub ActionsでGolangのテストファイルを実行した時に出たエラーです。

```error.go

go: cannot find main module, but found .git/config in /__w/app-name/app-name
	to create a module there, run:
	go mod init
Error: Process completed with exit code 1.

```

# 原因
go.modファイルがないことでした。
詳しい原因知っている方いましたらコメントいただけたら嬉しいです。

# 解決方法
以下のコマンドでgo.modファイルをプロジェクトディレクトリのルートに生成しpushしたらエラーが消えました。

```go.sh

$ go mod init github.com/example/go-app-name

```
【勉強記録】多重ループ (paizaランク D 相当)

## 目次
- 問題文
- 書いたコード
- 解答例
- 学んだこと
- 振り返り

## 問題文 
[詳細はコチラ](https://paiza.jp/works/mondai/c_rank_level_up_problems/c_rank_for_step4)

###問題文の要約
ある与えられたアルファベットが単語内に含まれるか。含まれたらYES、含まれなければNOを表示せよ。
アルファベットと単語は複数与えられることもある。その場合は総当たりで確認する。

>入力例2
2
c
d
2
cat
dog

>出力例2
YES
NO
NO
YES

## 書いたコード（その１）
結論から言うと、突破できませんでした。
下記のコードは誤りです。

``` main.py
lang_count = input()
lang = []

for i in lang_count:
    lang.append(input())

count = int(input())

for i in range(len(lang)):
    for j in range(count):
        ans = input()
        if lang[i] in ans:
            print("YES")
        else:
            print("NO")
```

肝心の後半に行く前に前半で既に間違っていました。。
lang_countはstr型の文字列が入ってるので、アルファベット複数になった瞬間アウトです。
また、後半部分、最初のforループで`range(len(lang))`とまどろっこしいことをしているのですが、
これも単純に`lang`に変えて上げれば良さそうです。

## 書いたコード（その２）

``` main.py
lang_count = int(input()) # lang_count = 2
lang = []

for i in range(lang_count):
    lang.append(input()) # lang = ['c', 'd']

count = int(input()) # count = 2
for i in lang:
    for j in range(count):
        ans = input()
        if i in ans:
            print("YES")
        else:
            print("NO")
```

気持ち見た目がスッキリしました。
が、inputの回数が合いません。langが1の場合しか正確に返せません。
やっぱり、inputを別にしよう、となると解答例そのままでした。


## 解答例(コメントアウト部分は追記。)

``` main.py
m = int(input())
c = [""] * m # m = 4, c = ['', '', '', '']

# 有無を確認すべきアルファベットのリスト
for i in range(m):
    c[i] = input()

n = int(input())
S = [""] * n

# 調べる単語リスト
for i in range(n):
    S[i] = input()

for i in range(m):
    for j in range(n):
        if c[i] in S[j]:
            print("YES")
        else:
            print("NO")
```

リストを作るときの`c[i] = input()`、リストから引っ張るときの`if c[i] in S[j]:`は
後から見直すときに何が渡っているのかわかりやすくていいなと思いました。
何回か見ていると思うのですが中々自分で使えていないので意識していこうと思います。

## 学んだこと
1. 無理やり一つの塊に処理を詰め込まないこと

## 一言
ワクチン接種後の調子も戻ってきたので、勉強し直したいと思います。
Failure/Error: config.include FactoryBot::Syntax::Methodsが出た時の対処方法

今回は記述場所を間違えるという非常に初歩的なミスが原因でしたが、他の方の記事を見ても、どこかしらで記述ミスしていることが多いという印象を受けました。

同じようなエラーで詰まっている方の参考になれば幸いです。

# やりたいこと
rspecによるテストの実行。
`Failure/Error: config.include FactoryBot::Syntax::Methods`と`NameError:uninitialized constant FactoryBot`の解決。



# やったこと
ターミナルで`bundle exec rspec`を実行すると、下記のエラーが発生した。

# エラー内容

```ruby:ターミナル
An error occurred while loading rails_helper.
Failure/Error: config.include FactoryBot::Syntax::Methods

NameError:
  uninitialized constant FactoryBot
# ./spec/spec_helper.rb:19:in `block in <top (required)>'
# ./spec/spec_helper.rb:18:in `<top (required)>'
# ./spec/rails_helper.rb:4:in `require'
# ./spec/rails_helper.rb:4:in `<top (required)>'
```

# エラーの原因
初歩的すぎるが、`config.include FactoryBot::Syntax::Methods`を記述する場所を間違っていた。

具体的には下記が原因で間違えました。

rspecをインストールすると、`spec_helper.rb`と`rails_helper.rb`が作成される。

`config.include FactoryBot::Syntax::Methods`は`rails_helper.rb`ファイルの`RSpec.configure do |config|`の下部に追記する。

`RSpec.configure do |config|`という記述が`spec_helper.rb`と`rails_helper.rb`の両方に存在することに気づかず、`spec_helper.rb`の方に追記してしまった。

# 解決策
`rails_helper.rb`の`RSpec.configure do |config|`下に追記する。

```ruby:rails_helper.rb
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods
 (中略)
end
```

# 学んだこと
今回のミスはただ記述する場所を間違えたという初歩的すぎるものだが、たったこれだけでエラー解決に時間を取られてしまうため、どこのファイルに記述するか・スペルミスはないかなど`ケアレスミスに注意して開発を進める`。

# 参考
- [Rails + RSpec で FactoryBot（旧 FactoryGirl）を使う](https://yurafuca.hatenablog.com/entry/2018/06/28/190842)
- [【RSpec】NameError: uninitialized constant FactoryBotというエラーが出た話](https://qiita.com/aoi1019m/items/5e5701ba05629e2367a8)
- [factory_bot_rails](https://github.com/thoughtbot/factory_bot_rails)
cloudwatchの詳細モニタリングと拡張モニタリングの違い

## 勉強前イメージ

違いってなんだっけ・・・？
くっつけるとわからん

## 調査

### 詳細モニタリング とは

EC2のモニタリングタイプで、データ取得間隔を1分で取れるもの
詳細は [こちら](https://qiita.com/miyuki_samitani/items/b40dd5bcf9bb6628d4e4) を御覧ください

EC2の以下の設定変更で詳細モニタリングを有効化できます。

![1詳細モニタリングを有効化 _ EC2 Management Console - Google Chr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/c3d624b1-38f5-9023-b314-2984bae2408e.png)


### 拡張モニタリング とは

RDSのモニタリングのタイプで、RDSを動かしているOSのCPUやメモリ・ディスクIOなどのメトリクスを取ることができます。
詳細は [こちら](https://qiita.com/miyuki_samitani/items/51f4e42ff2f20e4e9091) を御覧ください

RDSのDBの設定変更で以下のように拡張モニタリングを有効化することができます。

![1RDS Management Console - Google Chrome 2021-10-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/dfa8bd7f-4bc0-c0c9-d019-9d7819d574ad.png)


### まとめ

要するに以下のモニタリングのタイプの変更ということになります。

- 詳細モニタリング → EC2
- 拡張モニタリング → RDS

## 勉強後イメージ

EC2とRDSで違うってことか・・・
前、個々でやったはずなのにくっつけるとごっちゃになるよね

## 参考

- [[AWS SAA対策] CloudWatchの詳細モニタリングと、拡張モニタリング](https://infraya.work/exam/awssaa_summary_cloudwatch/)
- [【CloudWatch】RDSのストレージ使用率を監視してみる](https://blog.serverworks.co.jp/2021/09/10/103104)
『WordMove』について

#『WordMove』とは？
Rubyで作られたコマンドツール
WordPressのローカル環境とサーバーをつないでデータの送受信をしてくれるので、ローカル環境で変更を加えたファイルを毎回FTP経由でアップロードする必要がなくなる
#『WordMove』で出来ること・メリット
####サーバーへのファイルやフォルダのデプロイが簡単にできる
変更を加えたファイルやフォルダをサーバーにデプロイする時は「wordmove push --all」コマンドを入力するだけで、すべてのファイルやフォルダをデプロイすることが出来る。
####プッシュ機能とプル機能
ローカル環境⇆サーバー　どちらでもデータのやりとりが可能
→ローカル環境で加えた新しい変更をサーバーにデプロイ（プッシュ）
→更新された新しい変更（データベースなど）をサーバーからローカル環境にダウンロード（プル）
####プッシュまたはプルのみを指定することも可能
プッシュする対象（データベース、プラグイン、テーマ、アップロードされたメディアファイルのみ、等）を指定することが出来る
####高速
WordPressファイルのプッシュやプルの作業をFTPの約5～10倍という速さで行うことが出来る。
#『WordMove』の使い方
###①Wordmoveのインストール
`gem install wordmove`コマンドを入力
※事前にRubyのインストールが必要
###②『Movefile』の作成
WordPressのルートディレクトリに移動
→`wordmove init`コマンドを入力
→作成した『Movefile』をテキストエディタで開き、設定を編集する
###③ローカル環境からサーバーにプッシュする
`wordmove push --all`コマンドを入力
###④サーバーからローカル環境にプルする
`wordmove pull --all`コマンドを入力
###プッシュするファイルグループを指定するオプション
-t=テーマ
-u=アップロード
p=プラグイン
d=データベース