OmniAICreator/Qiita-1.07M huggingface dataset:
備忘録：新品のSSDがWindows上のディスクの管理に認識されていないことへの対処


※お試しは自己責任でお願いします。

#症状
自作PCにおいて、マザーボードのM.2の2番スロットに挿入した新品のSSDが利用できない問題が発生。
1番のスロットに挿入したSSDはWindowsがインストール済み。

デバイスマネージャにおいてディスクドライブには表示されているがプロパティでボリュームの情報が見つからない。
また、ディスクの管理にはディスク情報が表示されない。
Western Digital社のDashBoardツールにおいても、同じく表示されなかった。

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1644364/83f06c94-664e-d8d5-091b-423f4bf49364.png)

![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1644364/4bd5c556-9970-ae1b-5276-7be5777e5d8e.png)

#スペック
<dl>
  <dt>OS</dt>
  <dd>Windows 10 Home 20H2</dd>
  <dt>マザーボード</dt>
  <dd>ROG STRIX B500-F GAMING(WIFI)</dd>
  <dt>CPU</dt>
  <dd>AMD Ryzen 9 5900X 12-Core Processor 3.70 GHz</dd>
  <dt>SSD</dt>
  <dd>M.2_1:WESTERN DIGITAL WD_Black SN850 NVMe WDS100T1X0E-00AFY0</dd>
  <dd>M.2_2:WESTERN DIGITAL WD Blue SN550 NVMe WDS200T2B0C-00PXH0（認識されなかった方）</dd>
</dl>

#解決方法
BIOSのToolからASUS SSD Secure Erase機能を使用して、SSDをフォーマットするだけで解決した。
LBAは512Byteで問題なかった。
※当たり前ですが、SSDの中身はすべて消えてしまうので注意。

ディスクの管理において初期化を経て無事認識されるようになった。
![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1644364/0843c7dd-fee2-a2f1-fdb6-2b6f9d88dd73.png)

この方法は問題あるなーと感じた方は、是非コメントお願いします。
Kotlin Native: コンパイル時に xcrun がないと言われたら

IntelliJ IDEA で Kotlin Native をコンパイルしていたら、 次のようなエラーが出ました。

```
An error occurred during an xcrun execution. Make sure that Xcode and its command line tools are properly installed.
```

このエラーを解決した方法について記載しています。


## 環境

* macOS 11.5.2

Xcode は最新のものをインストールしている状態でした。


## 解決方法

次のコマンドを実行したら xcrun が使えるようになりました。

```
$ sudo xcode-select --switch /Applications/Xcode.app
```

`--switch` オプション については man に記載があります。 `--switch` の後のパスをアクティブな開発者ディレクトリとして設定します。

> Sets the active developer directory to the given path, for example /Applications/Xcode-beta.app. This command must be run with superuser permissions (see sudo(8)), and will affect all users on the system. To set the path without superuser permissions or only for the current shell session, use the DEVELOPER_DIR environment variable instead (see ENVIRONMENT).

例としてベータ版の Xcode をアクティブにする例が書かれています。

実行後、次のように xcrun が実行できるようになりました。

```
$ which xcrun
/usr/bin/xcrun

$ ls -l `which xcrun`
-rwxr-xr-x  1 root  wheel  137072 Jan  1  2020 /usr/bin/xcrun
```

## 参考

`sudo xcode-select --install` では解決しませんでした。
むしろエラーメッセージが出ました。

> xcode-select: error: command line tools are already installed, use "Software Update" to install updates

`--install` オプションは、 man では次のように書かれています。

> Opens a user interface dialog to request automatic installation of the command line developer tools.

コマンドラインの開発者ツールをインストールしてくれるそうです。
【Ruby】プログラミングスクールに入って３ヵ月間、引数が分からなかった。

#引数とは？

こんにちは。

プログラミングスクールに入ったはいいが、引数が全く分からないまま
3ヵ月くらいがすぎてしまってましたが、ようやく実態がつかめてきました(笑)

おそすぎだろ！って話になりますが、
引数でわけわからなくなる人多いのではないでしょうか？

※ ここだけの話プログラミングスクールではあまり引数のことは
　 カリキュラムに説明がなかったためそれが理由です。ガーン

よくわからない引数という物体を分かりやすく解説していきます！

##引数とはなんぞや？

引数というのは、簡単にいうとバケツや箱に入った中身と考えて下さい。

引数があることで、次の処理にバケツや箱の中身を引き渡して
その受け取った中身を基にメソッドの処理ができるようになります。

引数がわからない時は？？？という状態でしたが
理解できてくるとめっちゃ便利やん！と目からうろこ状態です。(笑)

それでは、どんなもんかみていきましょう！
Fizzbuzzという有名な

```php/hikisu.rb

def fizzbuzz(number)
 if number == 1
    'fuzzbuzz'
 end
end

puts fizzbuzz(1)

```

超簡単なこんなプログラムがあったとしましょう。
最初にfizzbuzz(1)の中にある1という文字が引数です。
()の中に数字がはいっていますよね。

これが次は

def fizzbuzz(number)

メソッドの名前に書いたnumberという箱の中に移ります。
ここで私が困惑したポイントになるのですが
fizzbuzz(number)というnumberの名前はなんでもOKなんです。

例えば、fizzbuzz(unko)こんな名前でもOK(笑)
しかし次の number == 1となっている numberはfizzbuzz(number)と一致させる必要があります。

そうしないと、どこから値を引っ張てくるのかrailsが判断できません。

def fizzbuzz(unko)
 if unko== 1
    'fuzzbuzz'
 end
end

fizzbuzz(unko)と条件分岐が始まるif unko == 1 のunkoが
一緒であればokです。

もっと詳しく説明をすると...。

puts fizzbuzz(1)は本引数といいます。
この本引数は中の引数(値)を次のメソッドに引き渡す式になり
メソッド名が仮引数と一致していれば中の引数はなんでもＯＫです。

したがって、def fizzbuzz(number)は仮引数といいます
仮引数は本引数から受け取った値をメソッド内にコピペして
渡していくイメージが分かりやすいと思います。

numberと書いてある仮引数の名前はぶっちゃけなんでもOK。
受け取るためのただの箱なのでふさわしい名前をつけてあげます。

ただし、仮引数でつけた名前はメソッドないで使用したいときは
仮引数の名前を同じ名前で使用する必要があります。
イメージとしては仮引数の名前をコピペしていって
メソッドの中で使用していく感じです。

##まとめ

いかがでしたでしょうか？
引数についてわかったでしょうか？

まだ、よくわからない！という方はもっと参考になる記事もあるので
よければそちらもみてくださいね！

・引数は次に値を渡すバケツの中身
・仮引数の名前はなんでもOK


参考：https://qiita.com/yossy_sa/items/536913fd58f90d6811f7

それでは、またお会いしましょう！
チャオ＾＾
node.jsとexpressで、クライアントに表示されるサーバーサイド情報を隠す

##はじめに
初めまして！
現在、node.jsとexpressを使ったWEBアプリ開発の学習を始めた初学者です。
これから、学習の中で学んだことを、記事にしていこうかな〜と思っています！


##結論
app.jsに、

```
app.disable("x-powered-by");
```
を追加する。

##詳細
詳しく見ていきます。以下、ソースコードです。

```javascript:app.js
const express = require('express');

const app = express();
app.set("view engine", "ejs");
app.disable("x-powered-by"); //これ！！！

app.get('/', (req, res) => {
  res.render('hello.ejs');
});

app.listen(3000);

```

```ejs:hello.ejs
<h1>Hello World</h1>

```

この１文を入れることで、ブラウザの検証ツールからサーバーサイドが何でできているかを隠すことができるようになります。

##なぜ隠す必要があるのか
悪意のあるユーザーが、該当ウェブアプリのサーバーサイド情報（例えばexpress）を手に入れてしまうと、その脆弱性をついて、攻撃を仕掛けることができてしまいます。

そのため、サーバーサイドが何でできているのかを隠して、ピンポイントで脆弱性をつけないようにする必要があります。
【CSS】z-indexの使い方 : 要素の重なり順を指定する

　今回は、要素の重なり順を指定するCSSプロパティz-indexについて、解説していきたいと思います。

#z-indexとは
　z-indexは要素の重なり順を指定するCSSのプロパティです。z-indexは以下のように記述します。

```
.selector {
  z-index: 10;
}
```
.selectorには、重なり順を変えたい要素を指定します。
原則としてz-indexは値が大きくなるほど上に表示されます。例えば、z-index: 10;の要素より、z-index:20;の要素のほうが上に表示されるということです。

#z-indexの使用シーン
　z-indexの使用シーンとしては、position: absoluteやposition: fixedなどで、要素を重ねた時などに重なり順を指定するのに利用したりすることが多いです。

##z-indexの使用例
　今回は例として３つの重なった要素を作って、その順を指定してみます。まず、z-indexを指定せずに要素を重ねるだけにしてみます。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="example">
      <p class="one">1番目</p>
      <p class="two">2番目</p>
      <p class="three">3番目</p>
    </div> 
  </body>
</html>
```

```style.css
#example {
  position: relative;
}

.one, .two, .three {
  position: absolute;
}

.one {
  left: 0;
  top: 0;
  background-color: #ff0000;
  border-color: #ff0000;
}

.two {
  left: 20px;
  top: 20px;
  background-color: #f0e68f;
  border-color: #f0e68f;
}

.three {
  left: 40px;
  top: 40px;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
```
![z-index.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646368/b0613cfa-5623-163d-f113-ee591096d336.jpeg)

上記を見て分かるように、通常要素というのは後から書かれたものが上に来るようになります。

この重なり順をz-indexで変えたときの挙動を見ていきましょう。1番目の要素には50、2番目には40、3番目には30と指定してみます。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="example">
      <p class="one">1番目</p>
      <p class="two">2番目</p>
      <p class="three">3番目</p>
    </div> 
  </body>
</html>
```

```style.css
#example {
  position: relative;
}

.one, .two, .three {
  position: absolute;
}

.one {
　z-index: 50;
  left: 0;
  top: 0;
  background-color: #ff0000;
  border-color: #ff0000;
}

.two {
  z-index: 40;
  left: 20px;
  top: 20px;
  background-color: #f0e68f;
  border-color: #f0e68f;
}

.three {
  z-index: 30;
  left: 40px;
  top: 40px;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
```

![z-index2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646368/7ea4e29c-e62d-a91f-d95e-bf90360b7a50.png)

z-indexの値が大きい要素ほど上に配置されました。このように下に隠れてしまっている要素を上に持ってくることができるのがz-indexになります。

#z-indexが効かない時の原因
##原因1.position: staticの要素には使用できない
　positionプロパティの初期値であるstaticではz-indexを指定することが出来ません。つまり、positionで何か指定していない限り、z-indexは使えません。「効かない！」というときはまず最初にここを確認してみましょう。

##原因2.指定値が正しくない
z-indexでは指定できる値に制限があります。
指定できる値は以下になります。

```
整数のみ：小数点はNG
初期値は０
最小値：-2147483647
最大値：2147483647
```
z-indexではマイナス値を指定することができますが、z-indexをしていない要素のz-index値は0であるため、マイナスを指定すると通常の要素より下に表示されることになります。
また、指定できる最大値、最小値がありますので、無意味に999999999…などと指定しても意味がないので注意しましょう。
複雑なウェブデザインをするときには要素の重なり順を指定することがよくありますので、positionと合わせておさえておきましょう。
ゼロから始めるデータベース操作SQL【学習まとめ】



#データベース学習を始めるきっかけ#
DBの概念や基本的な操作ができないと業務を実施することが出来ない内容の為、
SQL事前学習をすることで、スタートダッシュを切れる目的で学習を始めました！



#学習内容#
SQLの事前準備～基本的な操作で必要な3つの文「CREATE文、INSERT文、DELETE文、UPDATE文」の使い方を纏めます。

#事前準備#
#1.PostgreSQLのインストールと接続設定
1.インストーラーのダウンロード
PostgreSQLの[ダウンロードサイト](https://www.enterprisedb.com/products-services-training/pgdownload#windows)からインストーラをダウンロードします。
※使っているPCの環境に応じて適切なものをダウンロードしてください。
今回、Windowsのインストーラ(Win x86-64)

2.psql.exeの実行
ダウンロードが完了しpsql.exe実行すると、コマンドプロンプトでパスワードが求められたら、任意のパスワードを入力する。
入力後、「postgres=#」が表示されたらPostSQLへの接続が完了！
※接続時はパスワードを求められるので必ずmemoなどに残すこと。

![パスワード入力画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/8cd647ac-8d11-4ff1-5bee-8b9e865fd80d.png)
![パスワード入力後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/7f4ee841-54a4-5b31-4bad-b5030ad7bb70.png)


###
#2.CREATE文
まず初めに、例としてデータベースを作成するSQLを実行します。
コマンドプロンプト上で、「CREATE DATABASE XXXX;」を入力してDBを作成します。
※以下のルールとしてデータベース名は小文字のみ使用
・キーワードは大文字
・その他列名などは小文字

下記の様に、「CREATE DATABASE」が表示されたらDBの登録が成功！
[補足]:psql終了時は「\q」で「quit(やめる)」ことが可能。

![CREATE文.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/ac62aa9a-cbcf-9d25-4170-757c5ae561af.png)
【データベースの基本操作】
※DBやテーブルの作成/削除/変更は下記コマンドを使用
CREATE：DBやテーブルなどを作成
DROP:データベースやテーブルなどを削除
ALTER：データベースやテーブルなどの構成を変更

###
#3.INSERT文(データ登録)
始めに、作成したデータベースに接続します。
データベース名：shohinins
![db切替.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/874439/15143ac3-a114-caf7-3ee7-88ac4a6a4f54.png)
画面の表示の通り、「～接続しました」が表示されればOK。

下記のカラム名の商品リスト「商品ID～登録日」を登録していきます。
〇商品リスト

|商品ID|商品名|商品分類|販売価格|仕入単価|登録日| 
|:---:|:---:|:---:|:---:|:---:|:---:|
|0001|シャツ|衣服|1000|500|2021-01-01|


###
#4.DELETE文(データ削除)

###
#5.UPDATE文(データ更新)
Command Lineの基本コマンド

```
#ファイルの作成
  touch ファイル名

#ファイルの内容を確認する
  cat ファイル名

#ディレクトリ(フォルダ)を作成
  mkdir ディレクトリ名 

#ディレクトリの移動 
  cd ディレクトリ名

#一つ上のディレクトリに移動
  cd ..

#ホームディレクトリに移動
  cd

#ルートディレクトリからカレントディレクトリまでの階層を表示
  pwd

#ファイル、ディレクトリを表示
  ls

#ファイルの移動
  mv 移動元のファイル名 移動先のディレクトリ名

#ディレクトリの移動
  mv -r 移動元のディレクトリ名 移動先のディレクトリ名

#ファイル名の変更
  mv 変更元のファイル名 新しいファイル名

#ディレクトリ名の変更
  mv -r 変更元のディレクトリ名 新しいディレクトリ名

#ファイルのコピー
  cp コピー元のファイル名 新しいファイル名

#ディレクトリのコピー
  cp コピー元のディレクトリ名 新しいディレクトリ名

#ファイルの削除
  rm 削除するファイル名

#ディレクトリの削除
  rm -r 削除するディレクトリ名
```
＊補完機能・・・入力途中でTabキーを押すと残りのファイル名を補完してくれる
＊⬆️キーで過去に入力したコマンドを入力できる
【nvm】nvm use で exit status 5: になってしまった時の解決方法

## 概要

`nvm use *.*.*`

を実行した結果、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230436/f10ef6a1-1790-db92-18c3-0528ee322e99.png)

となってしまった場合の対策です。

## 原因

文字化け部分はどうやら

`Access is denied.`

のようです。

## 解決方法

管理者権限でターミナルを立ち上げる！

`nvm use *.*.*`

↓

`Now using node v*.*.*`
logstashで CouchDBに入ったデータのUNIX時間を@timestampに変換

#検証環境
プラットフォーム：macと、pi4上のubuntu server20.4
logstash: 7.15.1
couchdb: 2.1.1

#filter処理
unixをdocから取り出し、@timestampに、docの中のnameとtemperatureをルートに移動。

```
{ "doc":{ "unix":1609424856,"temperature":11.6 } }
{ "doc":{ "unix":1609431495,"temperature":19.1 } }
```
処理後

```
{ "@timestamp":"2021-11-06T03:19:10.787Z" , "temperature":11.6 }
{ "@timestamp":"2021-11-06T03:19:10.798Z" , "temperature":19.1 }
```
# パイプライン定義ファイル　unix.conf

```
input { 
      stdin {
           codec => "json"
      }
}
filter {
  date {
     match        => ['[doc][unix]','UNIX' ] # ms単位の場合は UNIX_MS
     remove_field => '[doc][unix]'
  }
  mutate {
    copy         => {'[doc][temperature]'=>'[temperature]'}
    remove_field => [ '[doc][temperature]' ]
    remove_field => [ '[doc]' ]
  }
}
output {
  file {
    path => "out.json"
  }
}
```
動作確認は

```
cat source.json | logstash -f unix.conf
```

# まとめ
mutateは上から下にシーケンス
logshash.ymlは空ファイル
@versionとhost名が追加出力される。
Oculus Quest2の開発者モードをONにできない時


### 起きてる事象
Onにしたいができない！！

### やってあったこと
組織登録はしてる
ユーザー登録もできてる

### 解決策
クレジットの登録
※クレジットを登録する場所は何箇所かにあるので、アプリを買ってても開発者側の方に登録が必要。


![スクリーンショット 2021-11-07 17.45.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64334/5adf7476-a658-f49e-8a61-c2edf67d9a44.png)



【2021/10/31追記】【開発者向け】プライベートのFacebookアカウントを使わずにOculus Quest2を開発用端末として使う方法
https://www.crossroad-tech.com/entry/oculus-quest2-testuser-account

Oculus Quest ：開発者モードへの入り方
https://kimono-oyaji.com/vr-goggles-oculus-quest-howto-01/
【Ruby】メソッド種類　備忘録

#目的
メソッドの種類 備忘録

#結論
4種類あった。
ブロック付きメソッド
インスタンスメソッド
クラスメソッド
関数的メソッド

```ruby:ブロック付きメソッド
5.times do |i|
	puts “#{I}回目の繰り返しです。”
end
=>0回目の繰り返しです。
    1回目の繰り返しです。
    2回目の繰り返しです。
    3回目の繰り返しです。
    4回目の繰り返しです。
```
＜説明＞
オブジェクト.メソッド名(引数, ・・・) do |変数1, 変数2, ・・・|
	ブロック内容
End
「do ～ end」の部分がブロック。



```ruby:インスタンスメソッド
P “10, 20, 30, 40” .split(“, “) =>[“10”, “20”, “30”, “40”]
P [1, 2, 3, 4].index(2)           =>1
P 1000.to_s                        =>”1000”
```
＜説明＞
オブジェクト(インスタンス)があったとき、そのオブジェクトをレシーバとするメソッドのことをインスタンスメソッドと言う。



```ruby:クラスメソッド
Array.new                  #新しい配列を作る
File.open(“some_file”) #新しいファイルオブジェクトを作る
Time.now                   #新しいTimeオブジェクトを作る
```
＜説明＞
レシーバがインスタンスでなくクラスの場合、そのメソッドはクラスメソッドと言う。



```ruby:関数的メソッド
＜コード＞
Print “”hello!”  #コンソールに文字列を出力する
sleep(10)       #指定された秒数の間、処理を休止する
```
＜説明＞
レシーバがないメソッドを、間接的メソッドと言う。
＊厳密にはない訳ではない。



#参考
たのしいRuby第５版
ASUS ROG Mobile XG 有線LAN未認識の件

# 書いておこうと思った経緯
ROG Flow X13をWindows11でセットアップ。
再起動するとROG Mobile XGの有線LANが未認識になってしまった。
NASと大量転送するので、Wifiではちょっとね。

## 状況
+ ネットワーク接続に設定で出てこない。
+ デバイスドライバに"!"は見当たらない。
+ Wifiはつながる。
+ WindowsUpdateしたが、検出せず。

# 修復した方法
ASUS Armory Crateの設定->アップデートセンターで更新実施
以下は更新後のバージョン(２０２１年１１月７日の操作)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554667/ef912823-5573-fe0d-c1ba-f0b9bf374342.png)

実施後、本体シャットダウン。ROG Mobile XGの電源プラグを抜き、２０秒後に再接続。

PC起動後で無事に有線LANを認識。
再起動してもOKなので、しばらく様子見です。
知ってればいいだけ案件でした。

---
mori@この件でPC再インストール、調査に５日も・・・。
CloudFrontでContent-Typeを強制的に書き換える

## 背景

とある静的なWebサイトを、S3+CloudFrontという王道構成で運営しています。

CyberDuckというとても便利なFTPソフトがあり、そこからS3にもファイルをアップロードしたのですが、なぜか、全部のファイルが ```Content-Type: binary/octet-stream``` になってしまいました。

![スクリーンショット 2021-11-07 17.33.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135431/69e23012-35c2-0e1f-c4dc-5c7cac9adabf.png)


一つ一つ変更したり、CLIで変換してもいいのですが、面倒なのでLambda@Edgeで変換します。
Origin Response で下記のLambdaFunctionを実行するように設定しました。

```js:index.js
'use strict'
exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response
    const headers = response.headers
    const request = event.Records[0].cf.request;

    if (request.uri.match(/.jpg$|.jpeg$/i)) {
        console.log("jpeg matched")
        headers['content-type'] = [{
            "key": "Content-Type",
            "value": "image/jpeg",
        }];
    }
    if (request.uri.match(/.htm$|.html$/i)) {
        console.log("html matched")
        headers['content-type'] = [{
            "key": "Content-Type",
            "value": "text/html",
        }];
    }
    if (request.uri.match(/.css$/i)) {
        console.log("css matched")
        headers['content-type'] = [{
            "key": "Content-Type",
            "value": "text/css",
        }];
    }
    if (request.uri.match(/.js$/i)) {
        console.log("js matched")
        headers['content-type'] = [{
            "key": "Content-Type",
            "value": "text/javascript",
        }];
    }

    callback(null, response)
}

```

すべてに疲れたのでelseすらつけていない、汎用化すらしていない横着スクリプトの共有です。
easycronでcronジョブを動的に作成、実行する



# Next.jsいいよね
エンジニアのわくてかです。最近 Next.jsとfirestoreできもちよく開発しています。
一緒にサービス開発したい人募集してます :fire: 
https://wktq.me/hackable

今まではユーザーに定期タスクを登録してもらい、タスクで指定した日時にcronジョブを走らせるという実装をしたく調べてみたら、Cron s a Serviceみたいなのが結構あるようで、easycronがジョブ登録APIもあり一番シンプルだったので使ってみました。
ほとんどNext.js関係ないです。タグは釣りです。すみません。

# easycronに登録してアクセストークンを取得
http://easycron.com/user

↑からメールアドレスとパスワードを登録します（WEBからジョブ登録するだけなら登録しなくても使える）

# easycon APIの叩き方
めちゃくちゃシンプルなAPIとなっており、methodを指定してメタデータをparamsで渡すだけです。アクセストークンもparamsに含めます。

`https://www.easycron.com/rest/[method]?token=[token]&name=value`

以下のようなmethodが用意されています。

- list
- add
- detail
- edit
- enable
- disable
- delete
- logs
- log
- timezone

### jobを作成する

今回は新規のタスクを登録したいので、addのドキュメントを見てみます。
https://www.easycron.com/document/add

必須パラメータは、先ほど取得したトークン、叩くURL、cron表記の3つです。
対応しているcronの書き方は↓にまとまっています。
https://www.easycron.com/faq/What-cron-expression-does-easycron-support

タイムゾーンはデフォルトでeasycronに登録した際のユーザーのタイムゾーンを使うようになっています。

```typescript
const data = {
    token: process.env.EASYCRON_TOKEN,
    url: "http://google.com",
    cron_expression: "00 14 * * 3", // 毎週水曜日の午後2時に実行
    // auth_user: 'hoge', // basic認証も対応
    // auth_password: 'password',
};

const param = {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
};

const res = await fetch("https://www.easycron.com/rest/add", param);
```

成功したらcron_jobのidが帰ってきます。
```
{"status":"success","cron_job_id":"3291692"}
```

### jobを削除する
完全な削除と、無効化・有効化があります。全て形式は同じです。

- 完全に削除する場合

```
https://www.easycron.com/rest/delete?token=[token]&id=2107
```

- disableする場合

```
https://www.easycron.com/rest/disable?token=[token]&id=2107
```

- disableしたものを再度有効化したい場合

```
https://www.easycron.com/rest/enable?token=[token]&id=2107
```


# おまけ
ユーザーにcron記法を教えるのは大変なので、cron用のinputがあります。Reactも対応してます。

https://github.com/JossyDevers/cron-expression-input


# 価格
https://www.easycron.com/user/plan
個人利用だったら無料で使えます。
APIからジョブを登録する場合は年間契約が必要です。
$12 / 年のプランに登録すると、一日4,000ジョブまで、分ごとの日時指定ができます。

# 参考記事
https://medium.com/@dbredvick/how-to-create-a-cron-job-with-nextjs-and-now-159aa973c00e
AWSでインターネットとサーバー構築

#初めに
この記事は私がAWSでインターネットとサーバーを構築するまでを簡単にまとめたものとなっています。
メモとして書いていますので詳細な説明が少ないことはご留意ください。

また、この記事はAWS基礎からの基礎からのネットワーク＆サーバー構築という本をもとに進めていきますのでより深く細かいところまで知りたいという方は是非読んでみてください。

https://www.amazon.co.jp/Amazon-Web-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%86%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89-%E6%94%B9%E8%A8%823%E7%89%88-%E5%A4%A7%E6%BE%A4-ebook/dp/B084QQ7TCF


#アーキテクチャ
本記事はこのようなアーキテクチャになるよう構築していきます。

![pra-arc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687228/8ace648a-2292-1e3d-da71-68caf1584f44.png)

#手順
・インターネットを構築する
・サーバーを構築する
・Webサーバーソフトのインストール

##インターネットの構築
AWSのVPCを用いて作成。今回は10.0.0.0/16の範囲で作成しました。
この作成したVPCを二つのサブネットに分割します。
（１）サブネットの作成
１．「サブネット」メニューから「サブネットの作成」をクリック
２．「名前タグ」にサブネット名、「IPv4 CIDRブロック」に割り当てるCIDRブロックを入力（ここでは「10.0.1.0/24」と入力）

###インターネットに接続するための回線を引き込む。
このままではサブネットをインターネットに接続することができないので「インターネットゲートウェイ」を用いて可能にします。

**インターネットへの接続**
１．「インターネットゲートウェイ」からインターネットゲートウェイを作成し先ほど作ったVPC領域をアクションからアタッチする。
２．「ルートテーブル」を作成し、「サブネット」から作成したルートテーブルをパブリックサブネットに割り当てる。
３．「サブネット」のルートテーブルを開き、送信先が「0.0.0.0/0」、ターゲットが「インターネットゲートウェイ」のルートを追加する。

これによってもともと破棄されるよう設定されていた「10.0.0.0/16」以外の宛先のパケットが破棄されなくなり、インターネットにつなげることができます。

##サーバーを構築する
仮想サーバーはAmazon EC2を用いて制作します。

**インスタンスの作成**
１．リージョンが「東京」であることを確認してインスタンスを作成する。（今回使用したAMIとインスタンスタイプはどちらも無料利用枠を使用しました。）
２．インスタンスの詳細情報を設定する。ここでは以下の三つを操作します。
（a）先ほど作成したVPCとパブリックサブネットを選択します。
（b）自動割当パブリックIPを有効にします。
（c）「ネットワークインターフェース」の「プライマリIP」を「10.0.1.10」とする(今回パブリックサブネットを10.0.1.0/24としているため10.0.1.0~10.0.1.255のいずれでもよい)
３．その他はデフォルトで作成する。
４．インスタンスを起動し、キーペアを作成、ダウンロードを行う。

##Webサーバーのインストール
ここではApacheをインストールしていきます。
AWSのサーバー上で下記コマンドを実行します。

```
$sudo yum -y install httpd
$sudo systemctl start httpd.service
$sudo systemctl enable httpd.service
```
これでApacheのインストール、自動的な起動する設定が完了しました。

しかし、先ほど作成したインスタンスの「セキュリティグループ」のデフォルト設定でポート22番しか開いておらずApacheの待ち受けている80番がブロックされて通信できないため設定を変えていきます。

**ポートの開放**
１．セキュリティグループを開き「インバウンド」からポートの編集を行う。
２．タイプに「カスタムTCPルール」、ポート番号に「80」、ソースに「0.0.0.0/0」を入力し保存する。

ここまででWebブラウザにパブリックIPアドレスを入力することでWebサイトにアクセスできるようになりました。

#最後に

これで最初に説明したアーキテクチャが完成しました。
この後にIPアドレスではなくパブリックDNSを作りそれでWebにアクセスできるようにしたりDBサーバーを作成したりを紹介した本で行っているので気になる方は是非読んでみてください。

また、この後に自分で開発したアプリを公開したい場合はこちらの記事を参考にいていただければできると思います。

https://qiita.com/higuchidaisuke/items/ba4a9500d8fe9690f2b8

自分でアプリを作りAWSでデプロイしたいが何もわからなかった自分として今回のAWSでデプロイする試みはインフラの基礎的な知識（ネットワークとは、サーバーとはなど）から学ぶことができたためとてもためになったと感じています。
しかし、時間が経つと忘れやすいのでちゃんと定着させることが今後の課題です！
VS CodeのJupyter NotebookでMarkdownの文字サイズをデフォルトで大きくして読みやすくする

# 課題
Visual Studio Code (VS Code)のエディターのデフォルトフォントサイズは14である。
しかし、これだと小さくて見にくいから、私は普段17にセットしている。
フォントサイズが14(デフォルト)の場合：
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259348/2d704de1-8073-4dc7-874c-c9bec5c5497e.png)

フォントサイズを17にセットする場合：
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259348/52114605-e2e8-f2d6-6bc7-8bb806faa436.png)

なお、フォントサイズの変更は`settings.json`に`"editor.fontSize": 17` を追加することで可能である。

これまではこれで全く問題がなかったのだが、VS CodeでJupyter Notebookの編集をする際に下記の問題が生じた：
Codeのフォントサイズは17の設定を反映するが、Markdownのフォントサイズはデフォルトの14のままであり、Markdownだけが小さくて読みにくい。

フォントサイズが14(デフォルト)の場合：
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259348/fb85788e-a04e-8f98-4f47-829de67503c9.png)
CodeとMarkdownのサイズは同じだが、両方とも小さいからこれらを大きくしたい。


フォントサイズを17にセットする場合：
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259348/184b33be-9d89-82bb-20ec-8a7c1f65b1f6.png)
Codeのフォントサイズは大きくなって見やすくなったが、Markdownのフォントサイズは小さいまま。

# 解決策
フォントサイズではなく、zoomレベルを変更する。
すなわち、`settings.json`に`"window.zoomLevel": 1`を追加する。

結果:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2259348/9768d27f-fa91-730b-9e9a-93c23932ed10.png)
Splunk: 手動実行中のサーチをバックグラウンドに送りたい

Splunk で使用する機会があったついでにメモ。

###### 実施環境： Splunk Free 8.2.2

Splunk で時間のかかるサーチ文を実行中、サーチジョブをバックグラウンドに送りたくなる場合があります。
そのような場合は、以下のようにしてバックグラウンドに送ります。

###### 1. 「ジョブ」→「ジョブをバックグラウンドに送る」を選択

![スクリーンショット 2021-10-17 13.41.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/9ff3974d-d456-ce26-73c0-06958e00feab.png "バックグラウンド1")

###### 2. 「バックグラウンドに送る」を押す

![スクリーンショット 2021-10-17 13.41.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/243a7572-65d7-36f8-6804-1100b3b11489.png "バックグラウンド2")

###### 3. 「完了」を押す

![スクリーンショット 2021-10-17 13.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/2bc5fe1f-4a26-cd69-413a-e946da9d1675.png "バックグラウンド3")

これで、実行中のジョブをバックグラウンドに送ることができます。
バックグラウンドに送ったジョブの状態は、「アクティビティ」→「ジョブ」から確認できます。

![スクリーンショット 2021-10-17 13.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/306d594a-2ea5-818a-d28b-c34b0b2629c3.png "ジョブ管理1")

![スクリーンショット 2021-10-17 13.44.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/1cf6452a-3cf3-ce37-681e-bacf1eb01e02.png "ジョブ管理2")
Webアプリケーション開発のお勉強 #1

#1.この記事の内容

Webアプリケーション開発に関して勉強した連載記事の1回目です．（[連載の目次はこちら](https://qiita.com/ryoma-jp/items/1a0a438313dcb30ef6fc)]）
本記事では，実装するWebアプリケーションの構成について調べた内容を記載します．

#2.Webアプリケーションフレームワークの選定

本記事の執筆時点では主要なフレームワークが3種類あります．
今回はデータ分析や機械学習を扱いますので，Pythonで記述するDjangoを採用しました．

|Webフレームワーク|言語|
|:--|:--|
|Ruby on Rails|Ruby|
|Django|Python|
|Laravel|PHP|

#3.Webサーバ構成

アプリケーションのフレームワークをDjangoに定めましたので，Djangoを前提にサーバやデータベースの構成を考えました．

[Webアプリケーションの基本概念](https://view-s.co.jp/product/webapp/concept/)を参考にさせていただき，安定性や推奨されている点を優先し，下図の構成をとることとしました．

![webserver-structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/983907/4d35d3fd-ce01-33fa-8385-30e8aa99edce.png)


データベースは，データセットと機械学習モデルとの関連や，機械学習モデルのパラメータなど，多くのデータの関係性を加味する必要がある為，機能が豊富とされるPostgreSQLを採用することとしました．

WebページのデザインはBootstrap一択のようでしたので，これを採用します．Bootstrapを用いたCSSフレームワークが無料で公開されていましたが，まずはお勉強ということで，スクラッチで環境を構築してみます．

#4.仮想化

Webアプリケーションの実装を進めるにあたり，Webサーバの構築・起動が必要となりますが，パソコン毎に環境を整えるのはパソコンの移行やアップデート，環境の修正など大変なので，docker-composeを使用して仮想化します．

仮想化の対象は，「Webサーバ」「アプリケーションサーバ」「データベースサーバ」でこれらのDocker Imageをビルドし，コンテナ起動します．

#5.さいごに

本記事で，実装するアプリケーションサーバの構成について調べた内容を整理しました．
次回以降の記事で具体的な実装方法を記載します．

#6.関連リンク

* [どれ使うべき？3大WebフレームワークRails・Django・Laravelを徹底比較してみた](https://paiza.hatenablog.com/entry/2018/05/07/paizacloud_web_application_frameworks)
* [Webアプリケーションの基本概念](https://view-s.co.jp/product/webapp/concept/)
* [PostgreSQL vs MySQL: その違いとは](PostgreSQL vs MySQL: その違いとは)
Webアプリケーション開発のお勉強　目次

# 1.はじめに

Webアプリケーション開発に関して勉強した連載記事の目次です．
Webアプリケーション開発に関して右も左もわからない状態で，一から勉強して環境構築・実装をした内容を記事にしていきます．

記事には調べた内容や考察など，なるべく詳細に記載する予定です．
[コードはGitHubに公開していて](https://github.com/ryoma-jp/AI_Dashboard)，要点や手順は[README.md](https://github.com/ryoma-jp/AI_Dashboard/blob/master/README.md)に記載しています．

情報量が多いので記事を分割して連載形式で投稿していきます．
Webアプリケーション自体は開発途中の為，実装した部分に対して順次記事にして投稿する形となります．

# 2.開発するWebアプリケーションの目標

データ分析，機械学習の結果を一元管理できる勉強用の環境を構築する

* 学習データの統計分析や特徴量分析の結果を可視化できるようにする
* 機械学習モデルの学習・評価に関して，ハイパラやモデル構造等を一元管理して傾向分析しやすくする

# 3.動作環境

|項目|スペック|
|:--|:--|
|OS|Ubuntu 20.04 (WSL2 on Windows10/11)|
|CPU|Intel(R) Core(TM) i7-10700F CPU @ 2.90GHz   2.90 GHz|
|メモリ|32GB|
|GPU|NVIDIA GeForce RTX 2070 SUPER|


# 4.記事一覧

* [#1 Webアプリケーションの構成の選定](https://qiita.com/ryoma-jp/items/1aaa0c6d69b3d012b051)
* [#2 WSL上へのベース環境の実装](https://qiita.com/ryoma-jp/items/e7437de22541355c3d65)
* [#3 Bootstrapの導入](https://qiita.com/ryoma-jp/items/44d04590009bbf7f0158)
* [#4 TensorFlow-GPUでの学習実行](https://qiita.com/ryoma-jp/items/ee6f49b5bd990a2aef15)
* [#5 TensorFlow-GPUでの学習中断](https://qiita.com/ryoma-jp/items/9283b1347327c3b3991c)
* [#6 TensorFlow-GPUでの学習状況の可視化(Tensorboard)](https://qiita.com/ryoma-jp/items/1b4f1cc90531b408b98d)
* [#7 学習パラメータをブラウザから指定](https://qiita.com/ryoma-jp/items/1b4f1cc90531b408b98d)
[SwiftUI]  ロングタップした位置をViewに伝える方法


## はじめに

SwiftUIで、Gestureを使ったUIを作成する機会があり、その時の実装メモを残したいと思います。

## どんなことをするのか

Viewをロングタップして、その場所(座標)をView側に伝える

## 概論

SwiftUIだけでは完結しなかった。
UIViewRepresentableを使って、UIKitのGestureを使う必要がある(iOS14までだと多分、)


## 実際のコード

早速実際のコードです

UIViewRepresentableを使ったところ

```ViewRepresentable.swift
struct ViewRepresentable: UIViewRepresentable {
     
   class Coordinator: NSObject {

      @Binding var point: CGPoint

      init(point: Binding<CGPoint>) {
         _point = point
      }

      @objc func longTapped(_ gesture: UILongPressGestureRecognizer) {
         // stateは適当なイベントで、
         if gesture.state == .began {
            point = gesture.location(in: gesture.view)            
         }        
      }
   }

   /// タップされた座標
   @Binding var point: CGPoint

   func makeUIView(context: Context) -> UIView {
      let view = UIView(frame: .zero)

      let gesture = UILongPressGestureRecognizer(
         target: context.coordinator,
         action: #selector(Coordinator.longTapped(_:))
      )
      view.addGestureRecognizer(gesture)
      return view
   }

   func makeCoordinator() -> ViewRepresentable.Coordinator {
      Coordinator(point: $point)
   }
   
   func updateUIView(_ uiView: UIView, context: Context) {}

}
```

あとはこれを適当なViewに当てはめれば、OKです

```ContentView.swift

struct ContentView: View {
   @State private var point: CGPoint = .zero

   var body: some View {
      ViewRepresentable(point: $point)
         .frame(width: UIScreen.main.bounds.width, 
                height: UIScreen.main.bounds.height)
   }
}
```

以上です。
これでContentViewでロングタップされた座標を取ることができるようになりました

ちなみに、ロングタップされて動いた時の座標は、UIGestureRecognizerのstateを変更すれば取得できます


```ViewRepresentable.swift
   @objc func longTapped(_ gesture: UILongPressGestureRecognizer) {
      // .changedに変更
      if gesture.state == .changed {
         point = gesture.location(in: gesture.view)
      }        
   }
```

## 参考


https://developer.apple.com/documentation/uikit/uigesturerecognizer/state


https://stackoverflow.com/questions/56513942/how-to-detect-a-tap-gesture-location-in-swiftui
JavaScriptの実行コンテキストを理解する

## 実行コンテキストとは
**コードを実行する際の文脈・状況**
→コードがどのような状況で実行されているのかということ

ブラウザ上でコードを実行した場合には`windowオブジェクト`と`this`がJavaScriptエンジンによって準備されます。
コードが実行されている状態によってコンテキストが変わってくるので、これらを含めたものを**実行コンテキスト**と表現します。

## 実行コンテキストの種類
実行コンテキストには以下の３つ種類があります。

- グローバルコンテキスト
- 関数コンテキスト
- evalコンテキスト

なお、evalコンテキストについては、evalという関数自体が非推奨であるため、本記事では扱いません。

基本的にはこの３つのコンテキストが存在します。

## グローバルコンテキスト

グローバルコンテキスト内でコードを実行しているときには以下の３つが使えます。

- 実行中のコンテキスト内の変数と関数
- グローバルオブジェクト
- this


実際のコードで確認してみます。

```html:index.html
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

```

上記は`index.html`内で`main.js`を読み込んでいます。
この`main.js`の直下に書かれたコードが実行される環境が**グローバルコンテキスト**になります。

そして、`main.js`の直下に書かれた変数と関数のことを、**グローバルコンテキスト内の変数と関数**と呼びます。

```javascript:main.js
const a = 'グローバルコンテキスト内の変数';

function b() {
 console.log('グローバルコンテキスト内の関数')
};
```


## 関数コンテキスト
**関数が実行されているときに生み出されるコンテキストのこと**

関数コンテキスト内でコードを実行しているときには以下の5つが使えます。

- 実行中のコンテキスト内の変数と関数
- arguments
- super
- this
- 外部変数

```javascript
const a = '外部変数';

function b() {
 console.log(this, arguments, a);

 const c = '関数コンテキスト内の変数';

 function d() {
  console.log('関数コンテキスト内の関数');
 }
};
```
`funciton b()`の`{　}`の中が、**関数コンテキスト**です。
※superは少し特殊で、この場合は使えません。

外部変数とは、関数の外で宣言された変数のことを指します。

## まとめ
グローバルコンテキスト：JavaScriptファイル内直下の実行環境
関数コンテキスト：関数の宣言の`{ }`で囲われている時のコードの実行環境

## 参考資料
https://www.udemy.com/course/javascript-essence/
送信した内容が改行されていない！？


フロントエンド開発のCSSでつまずきやすい「改行」について紹介します。
今回このテーマを選んだ理由は、改行して送信したはずの文章が改行されていない問題に遭遇したからです。
意外と解決に時間がかかるCSSの悩みは調べるのに苦労するので一例をこの記事にまとめました。

特に
・Webフロントエンドの開発経験がある方

を対象にしています。

### 改行した内容を要素に渡して表示する

今回、Vueの変数に改行された文章が渡される例を説明します。

Vueのマスタッシュ構文に入っている変数`content`にユーザーが入力した内容が渡される場合、以下のような書き方になります。


#### 改行した文章を入力する要素


```vue
<text-area v-model="content" />
```


#### 改行した文章が渡される要素
```vue
<div class="content">
  {{ content }}
</div>
```



変数`content`に、**「おはようございます！　
今日も一日よろしくおねがいします！」**
という改行した文が渡されるとすると
実際は**「おはようございます！　今日も一日よろしくおねがいします！」**
という改行の状態が維持されない問題が起きます。

### 改行できないバグの原因はどこにあるのか？

実はバグが起きた原因は入力するデータを渡した先の要素によって起きたものです。
つまり、今回修正するべき対象は,

```vue
<div class="content">
  {{ content }}
</div>
```
の方です。

### 送信内容の改行を保持するには
では、実際にどのようなコードを書けば改行した状態の文章をそのまま受け取ることができるのでしょうか？
対処法として以下２つのことを実装する必要があります。

1.`div`だけで囲われていた`content`の中にさらに`span`タグを囲む。
2.`div`のclassに`white-space: pre-line`をあてる。

### white-spaceとはなにか？

white-spaceは要素内の半角スペース、改行の表示を指定するプロパティです。

指定できる値は以下のリンクで網羅されています。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

使用するプロパティの値の指定は細かい違いなのでどのようなスタイル変化があるのかを把握する程度に覚えておけば問題ないです。

プロパティの値の中でも自然に改行してくれる`normal`はデフォルトで設定されていますが、今回の場合では改行の状態で表示ができないので`pre-line`に設定する必要があります。
修正すると以下のようなstyleになります。

**template**

```vue
<div class="content">
  <span>{{ content }}</span>
</div>
```

**style**

```css
.content {
  white-space: pre-line;
}
```


この状態で実際に改行した文章を送信すると、改行した状態が反映されて表示されます。
先程の例文に従うと送信内容は
**「おはようございます！　
今日も一日よろしくおねがいします！」**
となります。

CSSは奥が深く、簡単に修正できそうなバグも解決に時間がかかったりするので、どんな種類のプロパティがあってどんなことができるのか把握しておくことが重要だと思います。
Arduino IoT CloudとNode-REDを組み合わせるときのメモ

# はじめに
やることなす事はとても簡単です。
Arduino IoT CloudフローをNode-REDにインストールしてAPIキーを設定するだけの話です。

# 今回の3ステップ
- Arduino IoT CloudでAPIキーを取得する。
- node-red-contrib-arduino-iot-cloudをインストールする。
- 使用するノードにAPIキーを設定する。

# 事前にやるべきこと
- Arduino IoT CloudでThingsが設定されていて、Dashboard等の機能で動作確認ができていること。
- Node-REDが使える環境を持っていること。ちなみに筆者は[enebular](https://www.enebular.com/en/)を用いている。
- ESP32やArduino MKR Wifi などのWifiに繋げられるArduinoボードを持っている。Lチカとセンサデータの取得がゆるく確認できれば良いぐらいであれば、[Arduino MKR Wifi 1010](https://www.switch-science.com/catalog/7384/)をおすすめしています。


# Arduino IoT CloudでAPIキーを取得
APIキーはArduino IoT Cloudログイン後ページのIntegrationsタブ→CREATE API KEYから作成する。
作成後、IDとシークレットキーが表示されるため控えておく。PDFで取得することも可能。
(このタイミング以降はシークレットキーを表示する術がないため、万が一失念した場合は再発行する。)

<img width="400" alt="APIキー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271381/6688d22f-2d83-80df-c968-efa86064c661.png">

# node-red-contrib-arduino-iot-cloudをインストール
フローの説明はこちら
https://flows.nodered.org/node/@arduino/node-red-contrib-arduino-iot-cloud/in/x6nLBn2zSj93

自身の環境のnode-redでnpm installしていただければOKです。
ちなみにenebularであれば設定の「ノードを追加」からインストールすることが可能です。

<img width="400" alt="ノードを追加設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271381/60871e85-fff7-31af-19d6-a9fc1b6be34f.png">

適切にフローがインストールできれば、パレットにこのようなノードが追加されるはず。

<img width="200" alt="ノード.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271381/bde360a3-89f0-610b-f23e-6003cd7cdc91.png">

# 使用するノードにAPIキーを設定する。

新しく加わったArduino IoT Cloudノードをエディタ画面上に配置したあとに、パレットを設定開いてConnectionの設定をする。鉛筆マークをクリックするとClient IDとSecret Keyを設定する場所があるので、最初のステップで取得したIDとキーを設定する。

入力されたキーとIDが正しければ、下記のように作成したThingsやPropertyを勝手に取得してくれる。超ステキ。

<img width="400" alt="ノード設定サジェストつき.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271381/d76fbf03-0d48-5d44-461d-ce6f3d968877.png">

# Arduino IoT Cloudノードそれぞれの説明
こちらを参照する。
https://qiita.com/Inoue_Minoru/private/27152074f0321389dca4


# うまく行かない場合の確認事項
以下、過去の自分に贈る言葉です。

- Thingsで作成したコードはデバイスに書き込まれていますか？
- WiFiには接続されていますか？ ONLINEになっていますか？
- ダッシュボードとつなげてあるべき姿でデバイスは動作していますか？
- node-red-contrib-arduino-iot-cloudはインストールされていますか？ パレットに新しいノードは追加されていますか？
- ノードにClient IDとSecret Keyを入れた後にThingやPropertyはサジェストされていますか？
- ノードで指定したPropertyとDashboardで確認した際のPropertyは一致していますか？
- そもそもデバイスの配線は大丈夫ですか？　確認している間にジャンパや部品は抜けていませんか？ 電源は入っていますか？

# まとめ
- 連携自体は超簡単。Node-REDになれている人ならLチカぐらいは数分で確認できそう。
- とりあえずネット越しにデバイス動かしたい！という人なら是非。

# おまけ
Rumicarと呼ばれる自律動作ラジコンを連携してみた話です。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jnn6HSWqBsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
論文メモ：Multi-Scale Structure-Aware Network for Human Pose Estimation

# 論文
**論文名**
*Multi-Scale Structure-Aware Network for Human Pose Estimation*

**著者**
*Lipeng Ke, Ming-Ching Chang, Honggang Qi, and Siwei Lyu*

**学会**
*ECCV2018*

https://arxiv.org/abs/1803.09894#


# 概要
　 人物姿勢推定のためのNN。deep conv-deconv hourglass modelの課題点4つを改良した手法の提案。簡単にまとめると、キーポイント検出の学習強化・キーポイントのスケール最適化・パーツグルーピング強化・マスキング学習の４つ。以上より、スケールの多様性、オクルージョン、群衆に対する性能がロバストになる。MPⅡにおいてトップ性能を出した。
# 貢献
- multi-scale supervision network (MSS-net)とmulti-scale regression network (MSR-net)の導入によって様々なスケールのキーポイントのローカライズにおけるロバスト性能向上
- structure-aware-lossniよるMSS-netとMSR-netの学習でオクルージョンを回復し、人間骨格をより良く学習
- マスキング学習によってロバスト性能が向上かつネットワークを微調整

<div align='center'>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246925/49d05248-0f9d-f742-293b-55aabea93c62.png", width=500>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246925/e52e6766-91f6-29fb-dec5-e26ab9298847.png", width=500>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246925/ac84a458-25c4-8bb7-b22c-79e9f166b5df.png", width=500>

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246925/2b4adb10-a7ef-0bd3-b5f9-9b9a6fa8063a.png', width=500>

</div>
>Lipeng Ke, Ming-Ching Chang, Honggang Qi, and Siwei Lyu. Multi-scale structure-aware network for human pose estimation. In Vittorio Ferrari, Martial Hebert, Cristian Sminchisescu, and Yair Weiss, editors, ECCV, pages 731–746, 2018.

# 評価
- FLICにおいて精度の改善
- MPⅡにおいてSOTA

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246925/587e9f45-0047-bdea-8742-f09ff0d17e0e.png", width=500>
>Lipeng Ke, Ming-Ching Chang, Honggang Qi, and Siwei Lyu. Multi-scale structure-aware network for human pose estimation. In Vittorio Ferrari, Martial Hebert, Cristian Sminchisescu, and Yair Weiss, editors, ECCV, pages 731–746, 2018.

PCK：Percentage of Correct Keypoints (PCK) は単一人物姿勢推定において利用される評価指標。PCKでは、関節点の推定座標と正解座標の距離が、ある閾値よりも小さいときにその関節点の推定を正しいものとし、推定が正しく行われた割合をその評価値とする。PCKの閾値は人物頭部のサイズ（頭部外接矩形の対角線の長さ）に基づき決定されることが多く、これはPCKhといわれる。例えばPCKh@0.5の場合、頭部サイズの0.5倍を閾値に設定して評価を行う。（https://engineer.dena.com/posts/2019.11/cv-papers-19-2d-human-pose-estimation/）
IntelliJ IDEA(日本語版)でserialVersionUIDを生成する方法

# はじめに
serialVersionUIDを生成する方法をまとめた。

<!--# 発端
 タイトルとアンカー名を編集
1. [Chapter1](#Chapter1)
1. [Chapter2](#Chapter2)
1. [参考文献](#reference) -->

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 発端
serialVersionUIDを生成するメッセージが表示されない
![スクリーンショット 2021-11-07 16.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615760/9a7db949-60c9-7eeb-1604-b6d797aaf6fb.png)


<a id="#Chapter2"></a>
# 解決策
Preference　-> エディター -> インスペクションにある「'serialVersionUID'のないSerializableクラス」をチェックする。
![スクリーンショット 2021-11-07 16.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615760/9656e086-0beb-24de-2db7-eb403d0f8b4d.png)

適用後、クラス名をホバーするとserialVersionUIDを生成するメッセージが表示される。
![スクリーンショット 2021-11-07 16.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615760/646da076-ad92-01a2-a4f4-0a4ededb9b82.png)


<a id="#reference"></a>
# 参考文献
- [https://qiita.com/tenten0213/items/94721d0e3005c79fbbc5](https://qiita.com/tenten0213/items/94721d0e3005c79fbbc5)
[Rails]Formオブジェクトにアソシエーションが定義できない理由

### 解決したいこと

Formオブジェクトに、アソシエーションが定義できないのはなぜか。


### 立てた仮説

アソシエーションは、モデルを利用した「テーブル同士」の関連付け。
テーブル間アクセスに関する設定なので、
そもそも「テーブルがない」フォームオブジェクトにはつけられないと考えた。

フォームオブジェクトにattr_accessorメソッドで、
モデルの属性を追加し、「操作」可能にはするが、
実際に値を保存するのはモデルのテーブルであって、
フォームオブジェクトのテーブルではない。

上記を踏まえると、
ActiveStorageのhas_one_attachedも
フォームオブジェクトにはつけられないと考える。
こちらも、モデルの1つのレコードのidに紐付いて管理されるので、
そもそもレコードを持てないフォームオブジェクトは使えないと考えた。

### 質問して確認した結果

考え方はok。
ちなみに、一意制約もフォームオブジェクトはつけられない。
なぜなら、DBに一度検索しに行くから。

has_one_attachedに関しては、同じ意見を持つが、
検証してみないと確実な答えは出ない。

### 感想

has_one_attachedについては、一度検証してみたいと思った。
横道が気になりすぎてオリアプがつくれないと本末転倒なので、
まずはそちらに注力する。
GCPとローカル間のファイル転送を行う方法

GCP（Google Cloud Platform）とファイルのやり取りをする方法のアウトプットです。
[Linux VM へのファイルの転送 ](https://cloud.google.com/compute/docs/instances/transfer-files?hl=ja)という公式ドキュメントがあるのですが、見にくいので...

## 前提
GCP上のインスタンス設定やローカルからのssh接続は完了しているとします。
また、実行はすべてローカル側からのコマンドで可能です。

## ローカルからファイル（フォルダ）をGCP上に送る
```
gcloud compute scp --project="project名" --zone="zone名" \
--recurse {ローカルのファイルパス} {ノートブック名}:{GCPでのパス}
```
## GCP上のファイル（フォルダ）をローカルに持ってくる
```
gcloud compute scp --project="project名" --zone="zone名" \
--recurse {ノートブック名}:{GCPでのパス} {ローカルのファイルパス}
```
## オプションの説明
公式ドキュメントには、以下のようにあるが上手く行かない場合が多い。
`gcloud compute scp {ローカルのファイルパス} {ノートブック名}:{GCPのパス}`  
以下のオプションを明記すると、コマンドが通るので是非試してほしい。
`--recurse`：フォルダごと転送したいときのコマンド。常に付けておくほうが無難。
`--project="project名"`：プロジェクト名。`AI Platform`で確認できる。
`--zone="zone名"`：ゾーン名。同じく、`AI Platform`で確認できる。
# Amazon LightSailからNTT-PC WebARENA Indigo VPSに移動①

# Amazon LightSailからNTT-PC WebARENA Indigo VPSに移動①

ここまでのあらすじ[1](https://qiita.com/syakesaba/items/34553a66e0d467797629) [2](https://qiita.com/syakesaba/items/375f0b5971c5ba7ad575) [3](https://qiita.com/syakesaba/items/fd87cb6184cbb92dfdee)  

> ぼく「AWS安くて安定して最高や・・・でも個人用途で使うにはまだまだ高い」
> ぼく「円高になるまで国内の安かろう悪かろうなVPSで遊ぶかぁ」
> ぼく「Conohaもさくらもだいぶ前に使ったことあるし・・・[NTT](https://web.arena.ne.jp/indigo/)でも使うか」
> ぼく「折角なので国内VPSの良い点を活かしたことしよう」

# 目次

1. [サービス約款をチェック！](#サービス約款をチェック！)
1. [通信容量無制限を活かそう](#通信容量無制限を活かそう)
1. [参考文献](#参考文献)

# サービス約款をチェック！

約款が日本語で書かれてる！読もう！
価格や為替と言った基本的な部分を除きAWSとの大きな違いは

1. データ通信量がベストエフォートで最悪通信制限をかけられる点
1. 何か悪さしたらまずは東京の裁判所でしばかれる点

である。

- 以下[記載時点の利用規約（Indigo）](https://help.arena.ne.jp/hc/ja/sections/360006052954)から抜粋
    - WebARENA 共通 利用規約
        - "第 28 条 （サービスの制限等）" 
            - "当社は、第 27 条（非常時の利用の制限）の規定による場合のほか、大量の通信の発生が予測されるとき、または本サービスの品質が当社の定める基準を下回ったときには、通信速度の制限を行うなど合理的な範囲で本サービスの利用を制限することができるものとします。"
        - "第 8 章 損害賠償"
            - "第 52 条 （準拠法・管轄裁判所）"
                - "利用規約等の適用の有無を含め利用規約から生じる一切の紛争は日本法を適用して解決するものとし、東京地方裁判所を唯一の第一審の専属的合意管轄裁判所とします。"

# 通信容量無制限を活かそう

### 通信容量無制限ってそんな大事なことなの？

**<font color="red">残念ながら現代技術では"完全な"通信容量無制限を実現することはできない</font>**

- プライベート利用においては通信容量無制限は大きなメリットとなる。
  - 通信容量を喰うアプリケーションを酷使できる。
  - 万が一TCP-SYNのDDoSを喰らった場合、対するSYN-ACKの発信で通信料金が発生しなくなる。
- ビジネス利用においては通信容量無制限は大きなデメリットとなる。
  - 同じリージョンや同じ仮想マシンサーバに共存する他社の通信の影響をもろに受ける”隣人”問題が発生する。
  - ”通信容量実質無制限”を謳ったサーバが横行すると優良誤認表示となる。
  - 全体的にTCP/IPプロトコル・スタックにおけるUDPの安定性は絶望的となる。

プライベートで汚い通信は全部通信容量無制限のサーバに寄せるのが大事。

### 通信容量無制限を活かせるサービスってなんだろう？

今の御時世、通信容量を喰うアプリケーションが多すぎます。
  
- 例：
  - インターネットからのアクセスにオープンで全体通信量が読めないアプリケーション
      - メールサーバ
      - Webサーバ・APIサーバ
  - クローズドサービスではあるが、通信データ容量が大きいアプリケーション
      - 頻繁にアップデートが必要なOS（最近出てきているローリングリリース系OS）
      - Webプロキシサーバ・VPNサーバなどの代行通信サーバー
      - 外部ストレージ・DBサーバーを利用するアプリケーション
      - その他、一気には来ないが恒常的に中規模通信が発生するアプリケーション
  

# 参考文献
- なし

# ②へつづく・・・・
【JavaScript】演算子と優先順位



#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/fcba89f9c5fb2d7332ae

* 演算子と優先順位についての理解を深める

#本題
###1.演算子と優先順位

演算子とは
値(オペランド)を元に処理を行い、**結果を返す**記号
ex. =, +, new...

演算子には優先順位がある

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

21〜0までの優先順位が決められており、21から先に処理する

####例1

実際のコードで優先順位を確認する

```js
// 3と出力される
// +と=では+のほうが優先順位が高い(リンクの表参照)
// よって、先に足し算が行われてから、左辺に右辺が代入される
let a = 1 + 2;
console.log(a);
// *の方が優先順位が高い
let b = 1 + 2 * 3;
console.log(b);
// グループ化が現状最も優先順位が高い
let c = (1 + 2) * 3;
console.log(c);
````


####例2

インクリメント演算子

```js
let a = 0;
// インクリメント演算子は前後どちらにつけるかで結果が変わる
// 後に付けた場合,a = 0という値を返した後に+1する
let b = a++;
// よってaの値は1だが,bの値は0となる
console.log(a,b);
// 前に付けた場合+1された後にbに値が代入される
let c = ++b;
// よってbもcも1となる
console.log(b,c);
````

上記の処理がどのように行われているのか分解する

```js
// 計算がどのように行われているのか
let a = 0;
console.log(a);
let b;

// 後方に++があった場合は以下のようになっている
// let b = a++;
// a = b = a + 1; このようにすると優先順位的にうまく機能しないのでグループ化する
a = (b = a) + 1
// aは0なので、bは0、その後+演算子が働くので0 + 1でaが0となる
console.log(a,b);

// 前方に++があった場合は以下のようになっている
// let b = ++c;
// +から処理が始まる
// b = c = b + 1;
// 優先順位的に代入演算子は右から左へ処理が始まる
b = c = 1;
// （1,1となる）
console.log(b,c);
`````

####例3

関数での演算子と優先順位

```js
// 関数を定義
function fn(){
  let a = 0;
  return a++;
}
// 出力結果は0となる
// aが++される前にreturnで返っている
console.log(fn());
// 出力結果は5となる
// 「!0 = true = 1」と暗黙的に型変換が行われるため
// not演算子のほうが優先順位が高い
console.log(!fn() * 5);
// trueと出力される
// グループ化優先(0 × 5)の後、!演算子でfalse　→ trueと変換される
console.log(!(fn() * 5))
`````



今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
* [Let'sプログラミング JavaScript入門](https://www.javadrive.jp/javascript/)
FastAPIで、すべてのパスのリクエストを拾う方法

# 初めに
flaskで、

```python
@app.route('/<path:path>', methods=['GET', 'POST'])
def catch_all(path):
    # print(path)
    return {"path": path}
```

とかやると、全パス拾えるけど、FastApiでは微妙にやり方が違っていた話

# 方法

```python
from fastapi import FastAPI

app = FastAPI()

@app.api_route("/{path:path}", methods=['GET', 'POST'])
def catch_all(path: str):
    # print(path)
    return {"path": path}
```

# 最後に
URLとフォルダのパス紐づけたいとかそういう時に使えるかと。
【Dimscord】Nim で Discord Bot を作る

# はじめに

私は Python で Discord Bot を作っていたものですが，Nim にも素晴らしい Discord API ラッパーがあるので使っていこうと思います．実は　[Discordnim](https://github.com/Krognol/discordnim) というライブラリもあったのですが，開発が止まってしまっているようなので今回は [Dimscord](https://github.com/krisppurg/dimscord) というライブラリを使っていきます．Nim は初心者なので大目に見てください（編集リクエスト歓迎です）．

## 前提知識

- Nim の基本的な文法

## 著者の環境

- macOS Big Sur v11.5.2
- Nim v1.2.6
- Dimscord v1.3.0

# 本題

## Bot の作成

[Discord Developer Portal](https://discord.com/developers/applications) で右上の New Application をクリックし，Application の名前を入力してください．そして左の方の Bot をクリックし，右の方の Add Bot をクリックしてください．

真ん中の方に TOKEN というのがありますが，これはこれから使うので覚えておいてください．また，これは他の人に知られると乗っ取られてしまうので漏れないようにしましょう．
![スクリーンショット 2021-11-07 14.18.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625302/bda036c1-bc00-9a70-56f3-a8b642310ad7.png)

これで Bot はできたのであなたの Discord のサーバーに追加していきます．左の方にある OAuth2 をクリックし，下の画像を参考に bot というところをクリックしてその下にある URL に飛んで画面の指示に従っていけばサーバーに追加できます．追加できるサーバーがない場合はサーバーを作りましょう．
![スクリーンショット 2021-11-07 14.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625302/a38ea3b7-b08a-d256-0e1e-9c3f22c1d223.png)

## Dimscord のインストール

```
$ nimble install dimscord
```

## 中身を書く

```nim:main.nim
import dimscord, asyncdispatch, options

let discord = newDiscordClient("<your bot token goes here>")

# on_ready イベントの処理
proc onReady(s: Shard, r: Ready) {.event(discord).} =
  echo "Ready as " & $r.user

# message_create イベントの処理
proc messageCreate(s: Shard, m: Message) {.event(discord).} =
  if m.author.bot:
    return
  if m.content == "!ping": # もしメッセージの内容が "!ping" だったら
    discard await discord.api.sendMessage(m.channel_id, "Pong!")

# Discord に接続して， Bot を起動する
waitFor discord.startSession()
```

onReady は基本的に Bot を起動させたときに呼ばれます．messageCreate は Bot が見える範囲でメッセージが送信されたときに呼ばれます．`m.author.bot` が true のときは Bot （自分以外のも含む）がそのメッセージを送信したときであるので，無限ループを防止するために return しています．メッセージの内容は `m.content` に入っているのでこれを使ってコマンドを作ります．`discord.api.sendMessage` はメッセージを返すので discard します．（discard しないでこれを使って色々することもできます．）

## 起動する

```
$ nim c -r -d:ssl main.nim
```

![スクリーンショット 2021-11-07 15.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625302/a3c9e86f-25fa-ab8e-ed8b-55776ebbc9b3.png)

完成！

# おわりに

本当に作るだけで終わりにしてしまいましたが，Dimscord に関してなにか書いてほしいものがあったらコメントでお願いします．私が書けるものでありかつ気が向いたら書きます．

## 参考にさせていただいたサイト

[krisppurg/dimscord](https://github.com/krisppurg/dimscord)
[dimscord](https://krisppurg.github.io/dimscord/dimscord.html)
現場で "Vim" を使用する場面での設定

## この記事の目的
- 使いなれたエディタ（VScode等）を使えない場面（現場での制限等）
- Vimを使う必要がある場面での設定
- 最低限（マウスコピペ・バックスペースでの削除・ハイライト）を使えるように設定したい

### 注意事項
不特定多数の方が使用する環境下での設定変更については
Vim設定が既にある場合も多く、変更は関係者に許可をとった上で実施して下さい。
最悪は「何で設定変えるんだ！！」と怒られます。

＊事前にコピーを取っておいて、作業完了後に元に戻す等
作業後の復旧ができる状態にし、許可を取って実施しましょう。

## `.vimrc` の編集
まずはルートディレクトリ `~/.`に移動し、`.vimrc`ファイルを設定します。
現在存在しない場合は新規にファイル作成し、設定します。

##### 下記設定コードを記載して保存します。
設定内容はコメント行を参考にして下さい。

```~/.vimrc
" -- VIM Settings --
 
" -- settings --
" 文字コードをUTF-8に設定
set fenc=utf-8
" スワップファイルを作らない
set noswapfile
" 入力中のコマンドステータス表示
set showcmd
" クリップボードを使えるようにする。
set clipboard=unnamedplus
" バックスペースによる削除設定
set backspace=indent,eol,start
" オートインデント
set autoindent
" 行末１文字分カーソル移動追加
set virtualedit=onemore
 
 
" -- visual --
" 行番号表示
set number
" 現在の行を強調表示
set cursorline
" カーソル桁の強調表示
set cursorcolumn
" ビープ音の可視化
set visualbell
" 括弧入力時の対応する括弧を表示
set showmatch
" シンタックスハイライトの表示
syntax enable
" 入力中のコマンドステータス表示                                                                                                                                                                                                                                          
set showcmd
" タイトル表示
set title
" ステータス行の表示
set laststatus=2
 
 
" -- search --
" 検索文字列が小文字の場合は大文字小文字を区別なく検索する
set ignorecase
" 検索文字列に大文字が含まれている場合は区別して検索する
set smartcase
" 検索文字列入力時に順次対象文字列にヒットさせる
set incsearch
" 検索時に最後まで行ったら最初に戻る                                                                                                                                                                                                                                          
set wrapscan
" 検索語をハイライト表示
set hlsearch
" ESC連打でハイライト解除
nmap <Esc><Esc> :nohlsearch<CR><Esc>
```

## 終わりに
以上簡単ですが、現場作業時のVim設定についてでした。
Vimは多種のカスタマイズがあり、人により好みは異なると思いますが、
サーバ内（EC2）で設定時に使い慣れたエディタを使用できない等で
Vimを使用しなければいけない場面も多いと思います。
上記設定しておけば、最低限のVim操作で現場設定もしやすいと思います。
JSでWebAPIを叩いてみる！！

- asyncで非同期処理になる
- windowオブジェクトは省略可能

### asyncとawaitで書く

```javascript

async function callApi() {
    const result = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await result.json();
    console.log(users)
    console.log('成功')
}

callApi();
```
↓
fetchやthenで書く

```javascript
function callApi() {
    fetch("https://jsonplaceholder.typicode.com/users")
        .then(function (res) {
            return res.json();
        })
        .then(function (users) {
            console.log(users);
        });
}

callApi();
```