OmniAICreator/Qiita-1.07M huggingface dataset:
【簡単にできる】jQueryでのタブ切り替え


今回、jQueryによるタブの切り替えの方法について、備忘録的に記載していきます。

#HTML
まずは、表示させるHTML部分のコードです。
タブ部分のul要素と表示するコンテンツ部分のul要素の2つを作成します。

```html:qiita.html
<ul class="tabs">
	<li class="active">タブ１</li>
	<li>タブ２</li>
	<li>タブ３</li>
	<li>タブ４</li>
</ul>
<ul class="contents">
	<li class="active">サッカー</li>
	<li>バスケ</li>
	<li>野球</li>
	<li>バレー</li>
</ul>
```

#CSS
次はCSSの記述です。
タブ部はactiveクラスが付与されているタブのみ色を変化させます。
またコンテンツ部は非表示にし、activeクラスが付与されている要素のみを表示する仕様です。

```css:qiita.css
.tabs{overflow:hidden;}
.tabs li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tabs li.active{background:#eee;}
.contents li{display:none;}
.contents .active {padding:20px; display:block;}
ul { list-style: none;}
```

#jQuery

最後にjQueryの記述です。
クリックされたタブに対して、タブ部とコンテンツ部の両方にactiveを付与します。

```javascript:qiita.js
$('.tab li').click(function() {
	var index = $('.tabs li').index(this);
	$('.contents li').removeClass('active');
	$('.contents li').eq(index).addClass('active');
	$('.tabs li').removeClass('active');
	$(this).addClass('active')
});
```

今回は、index()メソッドを用いて何番目のタブがクリックされたかを判別し、
その番号と同じ順番にあるコンテンツ部の要素にactiveを付与する処理にしました。
create-react-native-moduleのexample/iosのビルドに失敗する

## 現象
`create-react-native-module`を使ってNativeModuleを作成しようとしたところ、iosでビルド失敗してシミュレータが起動しなくなってしまった。

```sh
$ create-react-native-module --generate-example Example
```

## 実行環境
実行環境は以下です。
- Xode 11.5
- Cocoapods 1.9.1 (from brew)
- react-native 0.62.2
- create-react-native-module 0.19.0

`react-native ios` ではビルドに失敗して起動しなかったが、Xcodeではビルドしてシミュレータを起動することができた。
Cocoapods側の不具合にでもあるのかなと推測。

## 修正内容

Yogaに関するエラーが出ていたので、StackOverflowで似たようなことを書いてある記事を探してトライ＆エラーで試してみた。
上手くシミュレーターが立ち上がったの解決策のものはCocoapodsの不具合に言及していたコレ↓
https://stackoverflow.com/questions/48705250/react-native-ios-could-not-build-module-yoga-algorithm-file-not-found

POdfileにYogaのヘッダーファイルを
Podfile:

```python
  use_native_modules!

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  add_flipper_pods!

+  def change_lines_in_file(file_path, &change)
+    print "Fixing #{file_path}...\n"
+
+    contents = []
+
+    file = File.open(file_path, 'r')
+    file.each_line do | line |
+        contents << line
+    end
+    file.close
+
+    File.open(file_path, 'w') do |f|
+        f.puts(change.call(contents))
+    end
+  end

  post_install do |installer|
    flipper_post_install(installer)

+    # https://github.com/facebook/yoga/issues/711#issuecomment-381098373
+    change_lines_in_file('./Pods/Target Support Files/yoga/yoga-umbrella.h') do |lines|
+        lines.reject do | line |
+            [
+            '#import "Utils.h"',
+            '#import "YGLayout.h"',
+            '#import "YGNode.h"',
+            '#import "YGNodePrint.h"',
+            '#import "YGStyle.h"',
+            '#import "Yoga-internal.h"',
+            ].include?(line.strip)
+        end
+    end
+  end
end

target 'example-tvOS' do
  # Pods for example-tvOS

  target 'example-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end
```

## 後書き
エラーログを取り忘れてたので別プロジェクトを作ってエラーを再現させようとしたが、一度ビルドできるようになるとエラーが発生しなくなってしまった。
【学習メモ】AWS（SSH　EC2インスタンスへの接続）

##1.目標成果物

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/198f16aa-4b87-fb02-2f44-8d6023a8214e.png)

##2.サーバー構築の作業手順
1.EC2インスタンスを設置する
**2.Apacheをインストールする**←今回はここ
**- SSHでサーバーにログイン**←今回はここ
- Apacheをインストール
3.ファイアウォールを設定する


###サーバーにログインするとは？
（離れた場所にある）サーバーに入って、自分のPCから操作すること

<img width="693" alt="スクリーンショット 2020-05-26 21.30.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/b96853b3-262c-e696-1468-17cc8d495f84.png">

###SSHとは？
サーバーと自分の目の前のPCをセキュアに繋ぐサービスのこと。通信内容が暗号化された遠隔ログインシステム。
<img width="668" alt="スクリーンショット 2020-05-26 21.31.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/0ade5c34-8c73-d886-cef7-a7365eed6e08.png">

ログインする側：SSHクライアント
ログインされる側：SSHサーバー

ただ、サーバー作成者本人だけがログインできるよう、EC2ではSSHログイン時に公開鍵認証を行っている

<img width="729" alt="スクリーンショット 2020-05-26 21.33.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/c8c34e04-c752-ed63-9442-8f558d9e1830.png">

###公開鍵暗号の「暗号」とは？

他の人には内容をわからないようにしてメッセージのやり取りを行うのが暗号

公開鍵暗号のイメージは”南京錠”
<img width="730" alt="スクリーンショット 2020-05-26 21.36.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/cb14c4ef-f2e5-4fa1-71f7-ff48f64f5a9a.png">

ソフィー：「ハリーの公開鍵で暗号化」し暗号文をハリーに送付
ハリー：「ハリーの秘密鍵で復号化」

<img width="741" alt="スクリーンショット 2020-05-26 21.38.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/4d50c08a-f336-a0a7-f75f-41ae9a512cc9.png">

＜イメージ＞
1.自分のPCからEC2にログインしたいのでサーバーにリクエスト
2.サーバーから暗号文をPCに
3.もらった暗号文を秘密鍵で復号化し、サーバーに復号化したデータを送付
4.サーバーが元のデータと会っているか検証する
5.ログインOK！

##3.いざ、SSHでEC2インスタンスに接続を！


サーバーに入る時はターミナルから

```terminal
$ chmod 600 [ ssh-key.pem の保存場所]
$ ssh -i [ ssh-key.pem の保存場所 ec2-user@IPアドレス（パブリックIP）]
```

コマンドの意味
ssh：ssh接続
-i [ ssh-key.pem の保存場所 ec2-user@IPアドレス（パブリックIP）]
：秘密鍵の設定
ex2-user：ユーザー名
@IPアドレス：接続するIPアドレス

こんな感じでログイン完了する。
<img width="564" alt="スクリーンショット 2020-05-26 22.55.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/c9322ef6-8d99-0539-53b0-7d835e42bc7a.png">


サーバーとの接続をきる時は、「exit」

###4.ポート番号について

ポート番号は、プログラムのアドレス。同一コンピュータ内で通信を行うプログラムを識別する時に利用される（＝SSH接続する、HTTP接続するなどの判断をする役割がある）。

<img width="706" alt="スクリーンショット 2020-05-26 22.12.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/be77d9d7-1ae8-f604-a8e6-6a0fbadb0e74.png">

実際は、ターミナルを下記のように操作する。

<img width="661" alt="スクリーンショット 2020-05-26 22.13.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/bf4728b6-113c-da6f-7f5f-f400b24ef343.png">

```terminal
ssh -i ~/（Desktop　※保存場所）/設定したpem ec2-user@IPアドレス
```

サーバーにSSH接続できたら、下記の通りに入力

```terminal
[ec2-user@ip-XX-XX-XX-XX ~]$ sudo lsof -i -n -P
```
**解説**
lsof:どのポート番号でどのプログラムが待ち受けているか確認するコマンド
-i:ネットワークソケットファイルを開くオプション。サーバーの待機ポートとプロセスを一覧表示
-n:IPアドレスをホスト名に変換しないオプション
-P:ポート番号をサービス名に変換しないオプション

LISTEN：他のコンピュータから待ち受けているポート
ESTABLISHED：相手と現在通信中のもの

例：
*22(LISTEN)について
→SSHDと言うプログラムが22番ポートで待ち受けていると意味
「*:」：どのIPアドレスでも接続元として受け付けるという意味


ファイアウォールの設定などは明日アウトプット
【環境構築】Windows10にXAMMPをインストールする方法

XAMMPのインストール方法をご紹介します。画像多めです。

##作業環境
OS：Windows 10
エディション：HOME
バージョン：2004
##XAMPPとは
XAMPPとは
X　→　Cross platform（MacでもWindowsでもLinuxでも利用できる）
A　→　Apache（Webサーバー）
M　→　MariaDB（データベース）
P　→　PHP（プログラム言語）
P　→　Perl（プログラム言語）
の略で、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたものです。
つまり、XAMMPを1つをインストールするだけで、アプリを作成する環境が構築できるのです。
PHPはブラウザだけでは動かないので、PHPを動かすために導入しています。
##XAMPPのインストール方法
###①公式サイトからダウンロード
下記の公式サイトにアクセスします。
https://www.apachefriends.org/jp/index.html
![202005262113.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/0dde21f7-bb06-a07a-2050-860b63fd1a5a.png)
「Windows向けXAMPP」をダウンロードします。
執筆時点（2020/05/26）では、バージョンは7.4.6です。
###②インストールする
ダウンロードが完了したら、ファイルをダブルクリックしてインストールします。基本的にこだわりがなければ、「Next>」を押していくだけです。
![202005262117.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/0b5774bf-48a1-2fd8-c71d-e67c53e0c1ff.png)
セットアップの最初の画面です、「Next>」を押します。
![202005262118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/61e673d0-ca04-ca61-b7b3-f1d8ff0b3d6e.png)
Components（構成要素）を選びます。特に怪しいものはないので、「Next>」を押します。
![202005262119.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/90c768a4-9a89-546a-e647-6c8b6febae4e.png)
インストールするフォルダを選びます。Cドライブ直下で問題ない場合は、そのまま「Next>」を押します。
![202005262214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/fa3bcfc2-0175-86b4-c06f-43b57b79af41.png)
言語の選択の画面です。日本語は選べないので、そのまま「Next>」を押します。
![202005262215.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/5055368a-53d3-80a5-64f2-c933a3013f7a.png)
チェックボックスのチェックを外して、「Next>」を押します。
![202005262216.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/83a77375-f3fc-be8c-1c36-57727629ee63.png)
インストールの準備ができたので、「Next>」を押します。
![202005262227.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/27ec30d9-9c58-cf8b-1445-fc156abefb1b.png)
インストールが始まります。
![202005262228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/199920ca-2ab8-6be3-b84a-67261089ee45.png)
完了したら、「Finish」を押してインストール完了です。
![202005262254.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643170/322cb33f-66bc-e60e-d28f-294098b1013a.png)
インストールが完了したら、上記の画面が表示されます。
特に難しい点などはなくインストールできますが、ポートの競合などが起こる場合があるので、設定については別記事にて解説します。
Flutterでサポートされていない言語の場合に、Android端末で表示される言語

Flutterで多言語化している最中に、`supportedLocales` にリストされていない言語のときに、表示される言語が意図したとおりに動かず少しハマりました。

例として以下の言語設定の場合に、 端末の言語設定がドイツ語の場合 `en` が使用されると思っていました。

```dart

supportedLocales: [
  const Locale('en'),
  const Locale('zh'),
  const Locale('ja'),
],

```

理由は[公式ドキュメント](https://flutter.dev/docs/development/accessibility-and-localization/internationalization)の 以下の文章。
> If an exact match for the device locale isn’t found, then the first supported locale with a matching languageCode is used. If that fails, then the first element of the supportedLocales list is used.

languageCodeが一致するものがない場合、リストの先頭が利用されるはず。。

ですが実行してみると中国語が表示されました。

トライアンドエラーで色々試してみた結果、Androidは端末の言語設定の優先順位も関係するようでした。
今回中国語が表示されたのは、端末の言語設定の優先順位が以下のようになっていたからでした。

1. ドイツ語
2. 中国語
3. 日本語
4. etc...

利用する言語をドイツ語の1つのみにしたところ、期待したとおり英語が表示されました。
ザリガニのエサやり忘れをM5ATOM Matrixで何とかしてみる

# 背景
子どもがザリガニを飼ってるのですが、毎日エサをやり忘れないようにやる気スイッチを作ってみました。そもそもエサやりを忘れることを防ぐことも大切ですが、「あれ？そういえば、今日あげたっけ？」みたいなことにならないようにも使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/943d3825-06ad-c3a4-41d0-98a3b6f142b6.png)

# 仕様
* エサをやる前は光っている
* エサをやって、ボタンを押すとライトが消える
* 夜の12時にリセットされて、また光る
* これの繰り返し

# イメージ図
**エサをあげる前（光ってる！エサをあげなきゃ！）**
![IMG_8885.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/2a597e95-7a78-34dc-733e-692dbc27a8a3.jpeg)

**エサをあげてボタンを押した後（今日のやることは完了）**
![IMG_8886.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/136eadec-58b4-5c5b-d0f0-5373851105db.jpeg)

# まとめ
* 毎日やることのタスク管理アプリなどもあるが、モノなので分かりやすい
* そもそも、子どもがスマホを持ってなくても運用できる
* あとは、エサをあげたけどボタンを押し忘れたみたいにならないように、設置場所とかも重要
* 今回はザリガニのエサやりですが、他のタスクにも応用できそう（水やりとか）


ということで、とりあえずサクッと作ってみました。
仮想化機能Hyper-V (Windows 10)

普段はWindowsしか使わないのですが、論文に掲載されている手法を動作させるためにUbuntu環境の構築が必要になった。何も考えずデュアルブートにしようかと思いつつウェブページを調べていると、どうやらWindows10 Pro以上には標準で仮想化機能Hyper-Vが用意されているっぽい。

# 機能の有効化または無効化

Hyper-Vのツリー以下をすべて有効化する。このとき「ファームウェアで仮想化サポートが無効になっています」というメッセージが表示されて有効化できない場合は、BIOSでCPUの設定「Intel Virtualization Technology」 をEnableに変更する必要がある。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253019/1a3cc975-4e56-d771-5c4d-34bf8826f9cd.png" width=320>

有効化した状態でOKを押下する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253019/126d0d56-352a-0ffc-aaa3-1c082a60fceb.png" width=480>

必要な変更が完了したら、再起動する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253019/356b734a-df73-6038-9ca8-56063c65758d.png" width=480>

# Ubuntu 18.04.3 LTSのインストール

Hyper-Vクイック作成から、Ubuntuをインストールを開始する。このとき、自動でISOのダウンロードが行われるので、事前に用意しておく必要はなかった。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253019/73c6a70b-779e-42cf-2b55-ddd507b99328.png" width=480>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253019/0d7da20b-2f21-1cf9-28cd-b13dd90b7dfc.png" width=480>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253019/0545e41d-9e34-175d-2c20-59fbe5ce286a.png" width=480>
HTML&CSS~中級編~

# プログラミングの勉強日記
2020年5月25日~2020年5月26日

#####ヘッダーとフッター
　ヘッダーとフッターのタグは良く使われるので、HTML5では`<header></header>`と`<footer></footer>`のタグが用意されている。（クラスで名前を付ける必要がない。

#####背景画像の指定：`background-color url(画像のURL)`
　このままでは指定された画像は表示範囲を埋め尽くすまで繰り返し表示される。
　　→`background-size:cover;`を使うと1枚の画像で表示範囲を埋め尽くすように大きさが拡大縮小する

#####要素を中央に配置する
　marginの左右にautoを指定する（<font color=blue>marginにautoを指定するときはwidthを合わせて指定する</font>）
　テキスト等のインライン要素やインライン要素の配置を指定する`text-aligin`プロパティを用いて、`text-align:center`とすると、中央寄せできる。（左寄せ：left　右寄せ：right）

#####文字の間隔を指定：`letterspacing`プロパティ

#####ボタンの作成
　`<a>`タグを指定するが、インライン要素にはwidthやheight、上下のmarginが指定することができない。そこでインラインブロック要素を用いる。

#####インラインブロック要素
　名前の通りインラインブロック要素とはブロック要素とインライン要素の特徴を併せ持つ要素のこと。インライン要素と同様に横に並ぶが、ブロック要素のように幅や高さを持つ。
<img width="521" alt="中級編.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/bfbb7a5c-3c13-711e-404a-bd785d043e2e.png">
`display`プロパティでblock(ブロック要素)、inline-block(インラインブロック要素)、inline(インライン要素)を指定することができる。 ex) `display:inline-block;`
　これを利用して、`<a>`タグでボタンを作るときに`<a>`タグをブロック要素にすることで、テキストのみでなく全体をクリックすることができる。（大きさが親要素一杯に広がるから）

#####カーソルがのったときの状態：hover（セレクタ:hoverで使う）
#####角を丸める：`border-radius`プロパティ
　`border-radius:値;`として使う。数字が大きくなるほど角が丸くなる。
#####要素を透明化させる
　`opacity`プロパティ：透明度は0.0（完全に透明）~1.0（完全に不透明）の数値で指定している。中身全てを透明にする性質がある。
　→背景のみ透明にする場合は`rgba`を用いる。
　 rgba：4つの値をコンマ区切りで入れる。最初の3つの値はrgbで表される色の組み合わせを用いて、最後の4つ目の値が透明にする度合い（0.0~1.0)を指定する。（<font color=blue>その色だけを透明にできる</font>）
#####アニメーションを付ける
　`transition`で「変化の対象」や「変化にかかる時間」などを指定できる。変化の対象にはcolorなどのプロパティを使うが、allを指定するとすべてのプロパティに適用できる。（hoverと組み合わせて使われることが多い）

```css
/*カーソルがのったときに背景の色が赤くなる*/
div{
  transition:all 1s;
}
div:hover{
  background-color:red; 
}
```

#####行間の指定：`line-height`プロパティ
　行の高さを指定できる。（値が大きくなるほど行間は大きくなる）また、要素の縦方向の中央に文字を配置するのにも使える。
<img width="521" alt="中級編2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/a868c08e-cccd-7834-140f-21f0ed56033b.png">

#####文字の太さの指定：`font-weight`プロパティ
　normalもしくはboldを指定する。見出しの`<h1>`要素は初期状態で`font-weight:bold;`になっている。

#####要素同士を重ねて表示する
　`position:absolute`：サイト全体の左上部分を基準として、topやleftなどを用いる。
　`position:relative`：親要素の左上部分を基準として、topやleftなどを用いる。また、要素の位置を変更するためにも使える。

#####影を付ける：`box-shadow`プロパティ
　`box-shadow:水平方向　垂直方向　影の色`を指定する。
#####要素がクリックされている状態：active
　クリックされているときだけCSSを適用できる。
Shopifyで用意されているフォントをliquidで使用する

#経緯
デザイナーさんより、shopifyで用意しているフォントを一部分だけ使用したいとの要望があった。
https://shopify.dev/tutorials/develop-theme-fonts#browse-available-fonts
ここで使いたいフォントを見つけてきたようだ。

##困ったこと
テーマ全体に管理画面からフォントを設定するなどは検索でヒットするが、
cssでfont-familyを設定しての使い方が見当たらない。

##shopifyでのフォントの持ち方
shopifyではフォントはCDNに置いてある。そのため、希望のフォントのCDNのURLを取得できればcssでfont-faceを設定してあとは自由にいつもどおり使うことができる。

##解決方法
※注意※かなり力技で、確実に間違った方法なのできちんとした方法、shopifyが推奨する方法を検討すること。
使っているテーマはDebut。
###1.上記URLより指定されたフォントのHandleを取得する
　　ここではitc_bodoni_seventytwo_n4を使用する。

###2.settings_data.jsonで使用したいフォントのHandleを
"type_header_font": "work_sans_n4",　などに上書きする。

```
{
  "current": {
     ~~略~~
    "type_header_font": "itc_bodoni_seventytwo_n4",
    "type_header_base_size": 30,
    "type_base_font": "itc_bodoni_seventytwo_n4",
    "type_base_size": 16,
　　　~~略~~
```

後でもとに戻すので、適当な場所で良い。

###3.ソースの適当な場所でフォントの情報を表示する
```
 {% assign header_font = settings.type_header_font %}           
 {{ header_font | font_face }}
```
先程のsettings_data.jsonで設定したフォント情報を呼び出してやる。
そうすると画面上にフォント情報が表示される。
今回の例だと、


```
@font-face {
  font-family: "ITC Bodoni Seventytwo";
  font-weight: 400;
  font-style: normal;
  src: url("https://fonts.shopifycdn.com/itc_bodoni_seventytwo/itcbodoniseventytwo_n4.35b85b69a5f5602a2219d69cee05b98f10b229df.woff2?h1=c3RvcmUucGlja2kuanA&hmac=6964601e49fed26c2460227171e04a7fb986d6e1af70f31b4f7ea6362fd3974d") format("woff2"),
       url("https://fonts.shopifycdn.com/itc_bodoni_seventytwo/itcbodoniseventytwo_n4.265b175ca2d7c753d5669b0d8f687673f761b05b.woff?h1=c3RvcmUucGlja2kuanA&hmac=68cd204db2045c48cb019180128abecb9c88dc7d74a9ba824cf278e24e55a8dd") format("woff");
}

```
このような形でフォントの情報を取得することができる。

これをcssファイルの適当な場所に設定してやると希望するフォントを好きな場所で使うことができる。

##最後に
もしかしてこんなことしなくても、font-family: "ITC Bodoni Seventytwo";だけでも使える？
いや、でも"ITC Bodoni Seventytwo"は探してこないといけないしな。。。
もっといいやり方があったら教えて下さい！
MQL5-ストラテジーテスター? 3

#はじめに
この記事は以下リンクのYoutubeビデオを翻訳したものになります。よければそちらもご覧ください。

>https://www.youtube.com/watch?v=MMYwKGAoiYE&list=PLV8YK-9p3TcOmgAFIjntw-GxOJoHp9xwc&index=5&t=0s

前回記事 は以下です。

>https://qiita.com/James_KW/items/2ae64601a1ec88e4eec6
本記事の内容はこの記事の続きになります。

#ストラテジーテスターとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96388/635bb44e-c48c-b402-b4b1-b38812c9e837.png)
ストラテジーテスターとは、ヒストリカルデータを用いてMQL5で作ったEAが実際に利益を出すことができるのかどうかを調べる（バックテスト）ためのものである。

#ストラテジーテスターを開いてみる
ストラテジーテスターを開くためには、ツールバーから[表示]>[ストラテジーテスター]と押していけば開ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96388/75e5c39f-1f4f-15d8-3a33-a58e02d35a1d.png)

真っ先に概要タブが開き、いくつかの選択肢が現れると思うが、今回は[単一]を選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96388/cd3a0bf6-f1a5-662e-a052-fd5f91781aa9.png)

すると、どういう条件でテストするのかを決める欄が登場する。
[エキスパート]：どのエキスパートを使ってテストするのか
[銘柄]：どの銘柄を使うのか、どの時間足でテストするのか
[日付]：どの期間でテストするのか
[フォワードテスト]：フォワードテストテストするのかどうか
[遅延]：通信にかかる時間を計算に入れるのか
【Swift】TableViewでカスタムセルを作成した場合

##個別にセル（xib）を作っている場合、以下のコードで紐付けする。

     //        個別に作成したセル(CustomCell)と紐づける
        tableview.register(UINib(nibName: “カスタムセルのファイル名", bundle: nil), forCellReuseIdentifier: "ID")
        
    }
.NET Frameworkの基礎

##.NET Framework 
・WindowsアプリとWebサービスの構築と実行をサポートするテクノロジ。

**デザイン目的**
⇒・コードがローカルだろうがWebに分散されて保存されようが、リモートで実行されようが、どこでも一貫してオブジェクト指向プログラミングの環境を提供できるということ。
⇒・ソフトウエアの配置やバージョン管理の競合を最小化する実行環境
⇒・作成者が不明・信頼のできないコードも含め、コードを安全に実行できるようにしたコード実行環境
⇒・スクリプトやインタープリターが実行される中でパフォーマンスが心配される問題も回避するコード実行環境を提供
⇒・Windows系の多種多少なアプリケーションの開発において、一貫した方法で作業ができる。
⇒・.NET Frameworkに基づいたコードを他の任意のコードとの統合ができるように、すべての通信を業界標準に準拠して構築すること。

###**.NET Frameworkの特徴**
**・共通言語ランタイム（CLR）**と**.NET Frameworkクラスライブラリ**から構成。
・ADO.NETデータセットやEntityFramework、LINQ to SQL、WCF Data Services、WCF、ASP.NET Webサービス・フォーム・MVC、Windowsフォーム、WPFなど様々なツールを実装

**共通言語ランタイム（CLR）**
⇒・.NET Frameworkの基礎となるコンポーネント
⇒・.NETアプリケーションを実行するためのエンジンとして機能するCLR(Common Language Runtime)
⇒・**メモリ管理、スレッド管理、リモート処理**などの重要なサービスを提供。
⇒・セキュリティや保全性の促進ために厳密なタイプセーフやその他コード整合性を強制的に適用する。

**ADO.NETデータセット**
⇒データベースのデータを扱える技術。
**ADO.NET EntityFramework**
⇒バージョン3.5 SP1で追加された、データアクセス技術。
⇒「エンティティ」を定義することでオブジェクト指向の考えにそってデータベースの取り扱いが行える技術。
**LINQ to SQL**
⇒データベースへのデータの作成がC#やVB(VisualBasic)のソース・コードとして手軽に記述できる言語機能「LINQ(言語統合クエリ)」が使えるデータ・アクセス技術。

**WCF(Windows Communication Foundation)**
⇒3.0で追加された通信技術でSOAP形式やRESTスタイルの通信を実現できる。XML WEBサービスを作成する際に使用。
**WCF Data Services**
⇒3.5 SP1で追加されたデータベースへのデータ・アクセスを提供するREST APIを自動作成するための技術。
ASP.NET WEBサービス
⇒.NETが誕生した際からある通信技術で、SOAP形式でXMLWebサービスを作成できる。
⇒手軽にXMLWebサービスを作成できるというメリット。
**ASP.NET WEBフォーム**
⇒初期の.NETから提供されているWebアプリケーション構築フレームワーク。
⇒イントラネット向けのWebアプリケーションで使われる。
**ASP.NET MVC**
⇒3.5 SP1で追加されたWebアプリケーション構築フレームワーク。
⇒MVC(Model-View-Controller)パターンに基づいてWebアプリケーション開発を行える。
⇒HTML5などのWeb標準対応やスマートフォン向けのWebサイト作成などでも活用。
**Windowsフォーム**
⇒1.0から提供されているWindowsアプリケーション構築用フレームワーク。
⇒Windowsでできるコピペのような機能やドラッグ＆ドロップなどされた時の処理コードを記述できる
**WPF**
⇒3.0で追加されたWindowsアプリケーション構築フレームワーク。
⇒GPUを活用した高度なレンダリング。
⇒XAMLというXML形式のデザイン言語が特徴。
⇒UX(ユーザーの使い勝手）の重要性が注目される中で、より高度なUI（ユーザーインターフェイス）を構築できる技術。
コンポーネント
⇒構成要素。部品。機器。ソフトウェア。ソフトウェアの中では特定の機能の単体の場合も。
タイプセーフ(型安全)
⇒データ型の食い違いによるエラーを防ぐ仕組み。(型に対して決められた定義と仕様パターンを通じて言語やクラスが情報を交換できる機能)

####**REST API**
⇒Webシステムを外部から利用するためのプログラムの呼び出し規約の種類の一つ。
⇒RESTと呼ばれる設計原理に従って作成されたもの。
**・REST(REpresentational State Transfer)**
⇒１．セッションなどの状態管理を行わない。
⇒２．情報を操作する命令の体系があらかじめ定義・共有されている。
⇒３．すべての情報は汎用的な構文で一意に識別される。
⇒４．情報の内部に別の情報や状態へのリンクを含めることが出来る。

###参考資料
・Wikipedia
・C#によるプログラミング入門
・C#によるアプリケーション開発
datepickerのinputにキーボード入力で、/（スラッシュ）や -（ハイフン）でも入力可能にする（yyyymmddなども対応する）

突然クライアントから、**「このカレンダーのフォーム手入力できるようにできる？」**と聞かれ、
`readonly` を外せばすむだろうと思って**「問題ないですよ〜」**と二つ返事したら、
**「よかった、じゃあちゃちゃっとこれよろしく！」**と言われて以下のリストが出てきた。

### 以下で入力できるようにお願いします。
- yyyy/mm/dd
- yyyy-mm-dd
- yyyymmdd
- mm/dd
- mm-dd
- mmdd

**これ聞き方詐欺だ・・・。**
まあいい、やるか。

と思ったら案外といろいろ忘れてしまっていたので、
次にまた聞き方詐欺に引っかかったときのために残しておこう（~o~）

```html
<input type="text" class="datepicker" onblur="datepickerReplace(event)">
```

```javascript
function datepickerReplace(e) {
  const _this = e.target                     // ターゲット
  const today = new Date()                   // 今日
  const currentYear = today.getFullYear()    // 今年の西暦
  const splitString = _this.value.split('')  // 入力値を分割

  // 記号の有無を確認 Boolean
  // スラッシュかハイフンがあったらtrueを返す
  const hasSymbol = splitString.some(string => string === '/' || string === '-')
 
  // / を - に変換した文字列を作成
  // 1文字ずつ評価してスラッシュがきたらハイフンを返すそれ以外、はそのまま返す
  // join() で全てを連結する
  const replaceString = splitString.map(string => string === '/' ? '-' : string).join('')

  if (splitString.length === 10) {
    // yyyy-mm-dd yyyy/mm/dd の場合
    // 連結された値が無効な日付だったら今日の日付を返す、有効な場合は連結された値を返す
    _this.value = new Date(replaceString).toString() === "Invalid Date" ? today : replaceString
  } else if (splitString.length === 8 && !hasSymbol) {
    // yyyymmdd の場合
    // 文字列の最初から4文字を年として、次の2文字を月、最後の2文字を日として定義する
    const year = replaceString.slice(0, 4);
    const month = replaceString.slice(4, 6);
    const day = replaceString.slice(6);
    // 3つをハイフンでつないで連結
    const ymd = `${year}-${month}-${day}`
    _this.value = new Date(ymd).toString() === "Invalid Date" ? today : ymd
  } else if (splitString.length >= 3 && splitString.length <= 5 && hasSymbol) {
    // m-d mm-ddの場合
    const spritMonthDay = replaceString.split('-')
    const monthDayArr = spritMonthDay.map(num => `0${num}`.slice(-2))
    const ymd = `${currentYear}-${monthDayArr.join('-')}`
    _this.value = new Date(ymd).toString() === "Invalid Date" ? today : ymd
  } else if (splitString.length === 4 && !hasSymbol) {
    // mmdd
    const month = replaceString.slice(0, 2);
    const day = replaceString.slice(2);
    const ymd = `${currentYear}-${month}-${day}`
    _this.value = new Date(ymd).toString() === "Invalid Date" ? today : ymd
  } else {
    // その他
    _this.value = today
  }
}
```
猫よりアホな人間と一緒にJavaScript でボス管理bot作らない？変数ってなに？

前回はBotにおしゃべりさせる事を学んだので今回はそれの応用として
変数をやっていこうと思います。
#変数って言う入れ物に色々入れちゃお！

```javascript
let name='ひろくんちゃん';
console.log(name);
```
letでnameって言う入れ物に＝でひろくんちゃんを入れたよ！
console.log(name);でnameの中身のひろくんちゃんが出力されるよ！

#変数の使い道を考えてみよう！
変数を使うことによって変数に入れたお約束が変わってもそれを使った
コードを書き直さなくて済むことが出来るよ！

```javascript

let number=5;
 console.log(number);
let number+3;
 console.log(number);
```
ログには5、8と表示されるはず。
変数に何かを足したり引いたり掛けたり割ったりもできるよ！

コードを書いてると数字だけじゃわかんなくなっちゃうから箱に入れることで
わかりやすくも出来るよ！ちなみに箱の名前は好きにつけていいからね！

#変数によく似た定数ってなに？

```javascript
const name='ひろくんちゃん';
consol.log(name);//出力結果：ひろくんちゃん

name='占拠まん';//エラーになっちゃうよ

consol.log(name);
```

変数はコードの途中で=を使って中身を新しく出来るんだけど、
定数は一度入れたものは変更できないよ！

途中で入れ物の名前をうっかり同じにしちゃっても定数を使えば
エラーで教えてくれるからトラブルが減るよ！

今回はbotのコードを書いていく上で便利な変数定数を学んだよ！
LVMでボリューム同士をまとめる方法

ホームディレクトリにでかい容量割り当てられていて、ルートボリュームとまとめてしまいたい時とかに！

### 現在の状況を確認
```
[root@cmst301 ~]# lvdisplay -C
  LV      VG         Attr       LSize   Pool Origin Data%  Meta%  Move Log Cpy%Sync Convert
  lv_home vg_cmst301 -wi-ao---- 197.68g
  lv_root vg_cmst301 -wi-ao----  50.00g
  lv_swap vg_cmst301 -wi-ao----   7.83g
```

### 対象ディレクトリのバックアップ
```
[root@cmst301 ~]# cp -rp /home /home_bk
```

### fstabの以下の行をコメントアウト
```
/dev/mapper/vg_cmst301-lv_home /home                   ext4    defaults        1 2
```

### homeディレクトリのマウントを解除
```:現在の状況
[root@cmst301 ~]# df -h
Filesystem            Size  Used Avail Use% Mounted on
/dev/mapper/vg_cmst301-lv_root
                       50G  6.0G   41G  13% /
tmpfs                 3.9G     0  3.9G   0% /dev/shm
/dev/sda1             477M   78M  374M  18% /boot
/dev/mapper/vg_cmst301-lv_home
                      195G  416M  185G   1% /home
```

```:マウント解除
[root@cmst301 ~]# umount /home

```

```:確認
[root@cmst301 ~]# df -h
Filesystem            Size  Used Avail Use% Mounted on
/dev/mapper/vg_cmst301-lv_root
                       50G  5.0G   42G  11% /
tmpfs                 3.9G     0  3.9G   0% /dev/shm
/dev/sda1             477M   78M  374M  18% /boot
```

### 論理ボリュームの削除
```
[root@cmst301 ~]# lvremove /dev/vg_cmst301/lv_home
Do you really want to remove active logical volume lv_home? [y/n]: y
  Logical volume "lv_home" successfully removed
```

### 論理ボリュームの拡張
```
[root@cmst301 ~]# lvextend -L +200G /dev/mapper/vg_cmst301-lv_root
  Size of logical volume vg_cmst301/lv_root changed from 247.49 GiB (63357 extents) to 247.59 GiB (63382 extents).
  Logical volume lv_root successfully resized.
```

### ファイルシステムの拡張
```
[root@cmst301 ~]# resize2fs /dev/mapper/vg_cmst301-lv_root
resize2fs 1.41.12 (17-May-2010)
Filesystem at /dev/mapper/vg_cmst301-lv_root is mounted on /; on-line resizing required
old desc_blocks = 4, new_desc_blocks = 16
Performing an on-line resize of /dev/mapper/vg_cmst301-lv_root to 64903168 (4k) blocks.
The filesystem on /dev/mapper/vg_cmst301-lv_root is now 64903168 blocks long.
```

### 拡張結果の確認
```
[root@cmst301 ~]# df -h
Filesystem            Size  Used Avail Use% Mounted on
/dev/mapper/vg_cmst301-lv_root
                      244G  5.0G  227G   3% /
tmpfs                 3.9G     0  3.9G   0% /dev/shm
/dev/sda1             477M   78M  374M  18% /boot
```
C# ストップウォッチクラス

#ストップウォッチクラス

```

using System;

using System.Diagnostics;

namespace myStpWtch
{
	public class CStopWatch
	{		
		public Stopwatch myStopWatch = new Stopwatch();    //時間経過をはかるためのクラス
		public Boolean sw = false;                         //スイッチOFF状態

		public void Start()
		{
			myStopWatch.Start(); //計測開始
			sw = true;           //スイッチON状態
		}

		public void Stop()
		{
			myStopWatch.Stop();	  //計測停止
			sw = false;           //スイッチOFF状態
		}

		public void Reset()
		{
			myStopWatch.Reset();
		}
	}
}
```

#コード
```

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

using System.Diagnostics;
using System.Windows.Forms.DataVisualization.Charting;

using myStpWtch;

namespace myProject
{
	public partial class Form1 : Form
	{
		CStopWatch stpwatch = new CStopWatch();

		public Form1()
		{
			InitializeComponent();
		}

		private void Form1_Load(object sender, EventArgs e)
		{
			//===========================================
			// StopWatch
			//===========================================	

			

		}

		private void btnStart_Click(object sender, EventArgs e)
		{
			if (stpwatch.sw == false)  // OFF状態なら
			{
				stpwatch.Start();					 //時間計測開始
				timer1.Start();						 //時間表示 
				btnReset.Enabled = false;           //リセットボタン不許可
				btnStart.Text = "Stop";             //ストップボタンに変更
			}
			else
			{
				stpwatch.Stop();					//時間計測開始
				timer1.Stop();						//時間固定 
				btnReset.Enabled = true;           //リセットボタン不許可
				btnStart.Text = "Start";             //ストップボタンに変更
			}

		}

		private void btnReset_Click(object sender, EventArgs e)
		{
			stpwatch.Reset();                       //初期化
			txtStpWtch.Text = stpwatch.myStopWatch.Elapsed.ToString();
		}

		private void timer1_Tick(object sender, EventArgs e)
		{
			//label1にスタートから現在までの時間を表示させる
			txtStpWtch.Text = stpwatch.myStopWatch.Elapsed.ToString();
		}
	}
}
```
Rails RESTfulという概念について

#RESTfulとは
Railsには、RESTfulという概念が存在します。
つまり、RESTfulとはHTTPメソッド(GET,POST,PATCH,DELETE)とURLを組み合わせてアクションと紐づけることです。

（例）

```ruby:routes.rb
get '/tasks',to: 'tasks#index'
```

これは、「get というHTTPメソッドと/tasksというURLを受け付けます。」という設定が、最初に定義されています。
そして、それらのリクエストがブラウザからアプリケーションに流れ込んできた時に、tasksコントローラーのindexアクションが動くように定義されています。
すなわち、「GETというHTTPメソッドが、/tasksというURLと一緒に飛んできたら、〇〇という処理（例の場合、コントローラーファイルにあるindexメソッドを起動させるという処理）をします。」という形式の命令文をRESTfulな形式の命令文といいます。
Railsの機能（ルーティング）は、基本的にRESTfulな設計で全てを作るようにできています。
Unity入門　ゲームジャムでゲームを作っていくコツについて

私も　この間のゲームジャムに参加しましたけど。　

１週間で　ゲームを作るというのは　ほんと　
大変ですからね。　

今回は　私のやっている方法を紹介します。　



#　0日目から　2日目　

出来れば、最初の48時間以内に　ある程度のアイデアを固めて　

それを企画書にしていきます。　

企画書といってもそんなたいそうなものではなく、
　ホワイトボードに適当に書いてく感じで　まとめていきます。　

じゃあ、　アイデアはどっから出すのか　という所ですが。　

私の場合は、色んなゲームを片っ端から見ています。　


特に参考にしているのは　

- レトロゲーム　

- インディーゲーム　

- ハイパーカジュアルゲームです。　



この３つは普通に参考になるので　おすすめです。　

あと最初にやることは　

Unityの　コラボレートと　クラウドビルドの設定も必要でしょう。　

コラボレートを使うと　作業の共同ができたり　

バックアップができます。　

そして、　クラウドビルドを使えば、　クラウド側でビルドができるので　

時間を大幅に節約できます。　　

普通のビルドであれば、　1回につき30分以上はかかりますからね。　

クラウドビルドは有料サービスなんですが、　使ったほうがいいでしょう。　



#２日目から　３日目　

ゲームのアイデアがある程度決まったら　

今度は素材集めなどをしていきます。　

アセットストアで探したり、GitHubで探したりと　

色々探して　先に入れておきます。　

サウンドなども　最後につける人もいるかと思いますが　

私は先につけるタイプです。　

使えるものはどんどん使っていくべきでしょう。　



#３日目から　６日まで　

この間でゲームを仕上げていきます。　

時間は、ゲームにもよりますけどほとんどの人は　
１０時間～３０時間ぐらいで　作っている人が多いので　それぐらいを目安にするといいと思います。

私も　この間　出したときは、　だいたい１５時間ぐらいかかりました。　

ゲームを作るときで重要なのは　

やること　と　やらないことを明確にすることです。　

１週間しかないので、　あれもこれも入れようとすると　

普通に間に合いませんからね。　

期限にちゃんと　間に合わせることがもっとも重要です。　

だって、そうゆう企画ですからね　時間厳守ですよ。



特化する部分としない部分を明確にして　

特化する部分に時間を使うようにしていきます。　

特に初心者の人はできることが限られていると思うので　

自分のできる範囲で　特化できる部分を見つけていきましょう。　



初心者の人であれば、　一つのシーンや　一つのフィールドで　

完結するゲームがいいと思います。　

シーンが沢山増えてくると、　クオリティを揃えるのがめんどくさいですからね。　まじで。



あと大事なのは、　操作性だけはちゃんとしたほうがいいです。

操作性が悪いと　どんなゲームもつまんなくなるので　

操作性はちゃんとするべきでしょう。

変な所に拘る人もいますけど、　それだったら操作性に拘ったほうがいいでしょうね。







#６日目から　７日目　

残りの２４時間ぐらいは　基本　

デバッグとテストプレイをしていく時間です。　

作るゲームによっても　違うと思いますが　

デバッグは結構かかります。　　

私もこの間出したときは、　クラウドビルド８回ぐらいやったし　

微調整も４時間ぐらいかかった。　そしてテストプレイもしないと

いけないので　１日ぐらいは平気でかかります。

ゲームを提出するときは、時間に余裕をもたせたほうがいいです。　

最後の最後で　エラーが出ることは普通にありますからね。　

気をつけましょう。　



ＰＳ　

[Unity講座も　販売してまーす。](https://note.com/zazizuzezo22334/n/n90340339a00c)

　
セールは３１日で終了ですよ。
renderとredirect_toの違い

## render
次に指定するViewを指定している。
今持っている変数で新しいViewを構成する。

## redirect_to
次に指定するメソッドを指定している。
ブラウザに対して指定したメソッドにHTTPリクエストを送るように司令する。
リクエストが二回発生してしまうことになる。

例：
=>  GET　home/show
<=  redirect_to
=>  Get  home/index
<=  home/index
画像のSEO対策のついて調べてみた

下記で学習

[【SEO対策】画像検索で上位表示を狙え！Googleイメージアルゴリズムを解説](https://www.specializedblog.com/entry/image_algorithm)

結論は下記です
- 高品質でオリジナルな画像、できればウェブサイトに最適化されたものを使う
- 画像の詳細を説明するようなファイル名をつける（例、×画像01　〇赤い靴）
- ページ上部（スクロール前）に画像を貼る
- 記事の文脈に合致した画像をコンテンツ中央部に貼る
- 適切なAltテキストを入力する
2変数、4分岐の if 文について

### 変数 min_value, max_value が存在するとき、それぞれの条件で処理を変えたい

例えば…

|min_value|max_value |処理    |
|:------- |:-------- |:-------|
|null     |null      |なにもしない |
|null     |not null  |上限より小さいことを検証 |
|not null |null      |下限より大きいことを検証 |
|not null |not null  |範囲内にあることを検証 |


普通はこんな感じ

```java:Main.java

class Main {
    
    public static void main(String[] args) {
        
    }

    private static String hoge(int value, Integer min_value, Integer max_value) {
        if (min_value == null && max_value == null) {
            // なにもしない
            return "";
        }
        if (min_value == null) {
            // 上限チェック
            return "";
        }
        if (max_value == null) {
            // 下限チェック
            return "";
        }
        // 範囲チェック
        return "";
    }

}

```

- パッと見、分かりづらい
- 比較が一つの場合と、四つの場合が存在し、データによっては速度に違いが出る
- 見た目が悪い


### これをなんとか解消したい…

```swift:main.swift
func hoge(_ value: Int, _ min_value: Int?, _ max_value: Int?) -> String {
    // Optional が外れない
    switch(min_value != nil, max_value != nil) {
        case (true,  true):
            return ""   // 範囲チェック
        case (true,  false):
            return ""   // 上限チェック
        case (false, true): 
            return ""   // 下限チェック
        case (false, false):
            return ""   // 何もしない
    }
}
```

Pytyon3 の場合

```python:main.py
def hoge(value, min_value, max_value):
    command = {
        (True, True): lambda: "",    # 範囲チェック
        (True, False): lambda: "",   # 下限チェック
        (False, True): lambda: "",   # 上限チェック
        (False, False): lambda: "",  # なにもしない
    }
    
    return command[(min_value is not None, max_value is not None)]()
```

---

もっと良い方法がありましたら、教えていただきたいです。
Kubernetesでログを見ようとしても"no space left on device"と言われる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193036/e9c75423-ecce-5d7f-0867-26801625e07f.png)

# Minikubeの話
仕事でMinikubeを使っている時の話。
ある時突然こんなメッセージが出てきました

```
$ kubectl log -f hogehoge-controller-xxx
failed to watch file "/var/log/pods/hogehoge/hogehoge-controller/1.log": no space left on device
```

状況としては複数のコンテナをいくつも立ち上げて、ログ祭りになってる様な環境でMinikubeなのでもちろんローカル環境
これを調べても英語しか出てこないので日本語でまとめておこうと思います。

# Chk.1  本当にディスクの空き容量がない
調べませう

```
$ minikube ssh

からの

$ df
Filesystem     1K-blocks      Used Available Use% Mounted on
tmpfs            6344536    464280   5880256   8% /
devtmpfs         3454136         0   3454136   0% /dev
tmpfs            3524740         0   3524740   0% /dev/shm
tmpfs            3524740     34288   3490452   1% /run
tmpfs            3524740         0   3524740   0% /sys/fs/cgroup
tmpfs            3524740        12   3524728   1% /tmp
/dev/sda1       17784772  12684384   4060148  76% /mnt/sda1 <=ここが大事
/Users         488245288 148308708 339936580  31% /Users
$
```

`<=ここが大事` としている「/mnt/sda1」の空き容量がDockerエンジンが使用するスペースの模様。
この例では80%未満なので余裕があります。よって、ディスク容量には問題はなく他の問題の様です。

仮にここが100%とか95%とかだったら本当にディスク容量が足りないので **自己責任** において

```
$ minikube ssh
$ docker system prune -a
```

などとしてクリーンアップしてあげてください。ただし、上記はバルス同等の破壊的クリーンアップなので大事なDockerImageがある場合は適時変えてください。

# Chk.2  ディスク容量は足りているのにエラーになる
これが本稿の本題。
stackoverflow的な海外サーバーで話題に上がっていました。
https://serverfault.com/questions/963529/minikube-k8s-kubectl-failed-to-watch-file-no-space-left-on-device

何を言っているかというと`fs.inotify.max_user_watches`＝ファイルシステム的にユーザが監視できるファイル数の上限
それがデフォルトで限りなく少なく設定されてるから問題が起きるんだよ！　ということらしいです。

で、ここで回答されているのがどこまで正解なのかは不明なのですが、
成功するまで２倍づつ増やしながら試せ。　とのこと

本当かいな:frowning2:

## fs.inotify.max_user_watchesを変更する
minikubeの中で操作します。

まず、今の設定を確認

```
$ minikube  ssh

...中略...

$ sysctl fs.inotify.max_user_watches
fs.inotify.max_user_watches = 8192
```

８１９２。。。少ない。。。のかもしれない笑
アプリ単体ではなくOSとしての監視数なのでなんともいえないですがこれを２倍に設定します。

※ **アバウトに２倍** しても大丈夫です！（理由は後述）

```
sudo sysctl fs.inotify.max_user_watches=16000
```

この状態で一回試して、変わらない様だったらさらに２倍に。。。と言った具合で増やしてみてください。
これでもダメならもっと他の原因だと思われますが、私は遭遇していません

## 後述：アバウトに２倍とは
なぜアバウトに２倍にしてもいいのか。
それは、これが揮発性の設定だからです。

minikube stopとかしてしまうとリセットされてしまいます。
なのでローカル環境なのも相待って、おかしくなっちゃったらリセットしてきちんと設定すればいいのです。

厳密には２の乗数で設定した方が良いのでしょうが、そこに労力をかける意味は特にないと思います:ok_hand:

# 終わり
私は最近あるプロダクトの開発を通してKubernetesやIstio、Docker、YAML等々のホットトピックに触れる機会が多くなっています。難しい、でも奥深くて面白い世界をみれていると思います。

数多くのOSSに支えられた次世代のシステム開発をQiitaの様なメディアを通してボチボチ流布してきますので、ぜひフォローしてみてください！
Azureの課金をアラートする



クラウドを使うとき一番気になるのが課金です。特に無料プランで使おうとしているときは急に課金が発生しないか心配です。とりあえず簡単にメール通知する方法をメモしておきます。
## Azureサブスクリプションに予算を追加する

サブスクリプションの左タブから予算のタブを追加し、作成します。名前、期間、予算などを入力して次へ行きます。
![コメント 2020-05-26 210740.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550841/2adb9205-f197-411e-dc1e-034f404fb386.png)

アラートしたい金額を予算のパーセントで表現し、入力します。アクショングループがない場合は作成します。アクショングループは条件を超えたときに何をするかを登録しておくものです。
*メールを飛ばすだけであればアクショングループ必要ありませんでした。下部のメールアドレス欄に入力すると飛ばしてくれます。
![コメント 2020-05-26 210934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550841/4af8a526-6484-3d3f-9dc2-0501d787534e.png)

下図のようにアクショングループ名やサブスクリプションとアクションを設定します。今回はメールを飛ばすように設定しました。
![コメント 2020-05-26 213814.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550841/a3084810-fb94-91fd-cc4d-ae07f9e733a8.png)

これで課金額が予算を超えたときにメールを飛ばすことができます。先月ミスで無料枠を超えてしまい、1000円程課金してしまったので設定していて助かりました。
Javascriptの for in と for of

今までJavascriptでfor文を書くときは下記の書き方しか知りませんでした。

```javascript
// これまで使用してたfor文
const arry = [1,2,3,4,5,6,7,8,9,10];

for(let i=0; i<arry.length; i++){
    console.log(arry[i]);
}
// 配列arryの1~10まで表示される
```

しかし、他にも for in や、 for of の書き方があったんですね。

```javascript
// for in
const arry = [1,2,3,4,5,6,7,8,9,10];

for(let i in arry){
    console.log(i);
}
// 配列arryの添字が表示されるので0~9が表示される
```

```javascript
// for of
const arry = [1,2,3,4,5,6,7,8,9,10];

for(let v of arry){
    console.log(v);
}
// 配列arryの値が表示されるので1~10が表示される
```

配列arryの中身がひらがなの「あいうえお」ならどうなるか。

```javascript
// for in
const arry = ['あ','い','う','え','お'];

for(let i in arry){
    console.log(i);
}
// 添字が表示されるので0~4が表示される
```

```javascript
// for of
const arry = ['あ','い','う','え','お'];

for(let v of arry){
    console.log(v);
}
// 値が表示されるので あいうえお が表示される
```

for in は添字。
for of は値。

けっこう使うことになりそうなのでしっかりと覚えるために聞いておきました！
【Windows10】CuPyのインストール

CuPyは、GPUを使用して数値計算を行うためのPythonライブラリです。
numpyと概ね同じような機能を持っているようです(が細かいところはそれなりに違っている)。
なお、CuPyはNVIDIA製のGPUを搭載している環境でしか使用できません。

Windows上でのCuPyのインストールには概ね3つの手順が必要になります。

- グラフィックドライバのアップデート
- CUDA Toolkitのインストール
- CuPyのインストール

# グラフィックドライバのアップデート

まず、現在のグラフィックドライバのアップデートがないかを確認し、アップデートがある場合は最新版にしておく。
タスクトレイのNVIDIAアイコンを右クリックし、「NVIDIA GeForce Experience」をクリック。
![NVIDIA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633415/fe862c5f-70d5-a6ff-a361-5992f5fa66f9.png)

その後、表示されたウインドウ上部の「ドライバー」を選択し、さらに「更新プログラムの確認」をクリックする。
必要な更新がある場合はインストールしておく。
![NVIDIA2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633415/964b5c68-65d3-61de-a4b9-1c1243581497.png)

# CUDA Toolkitのインストール

次に「CUDA Toolkit」をインストールする。
「CUDA」は、NVIDIAが提供しているGPU汎用並列コンピューティングプラットフォームである(Wikipediaより)。
要は、GPUで計算を行えるようにするもの。
「CUDA Toolkit」は「CUDA」を使うためのSDKということになる。

下記サイトにアクセスして、「DOWNLOAD CUDA X.X NOW」からダウンロードする。
この時、**インストールする「CUDA Toolkit」のバージョンを記憶しておく**(「CuPy」のインストール時に必要)。
https://developer.nvidia.com/cuda-toolkit
![CUPY2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633415/d6f0c937-189f-4836-ce80-59185d472776.png)

# CuPyのインストール

「CUDA Toolkit」をインストールしたら、「CuPy」のサイトにアクセスする。
画面左側の下の方に、「CuPy」をpipでインストールするためのコマンドが記載されている。
この際、自分がインストールした「CUDA Toolkit」のバージョンに適合する「CuPy」をインストールする必要がある。
コマンドの実行は**Git bash**やコマンドプロンプトで行える。
![CUPY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633415/f0a15fbc-1103-768c-5a52-99dfbd06eb1b.png)

例えば、「CUDA Toolkit」のバージョンが10.2の場合は次のコマンドになる。

```shell:bash
$ pip install cupy-cuda102
```

以上でインストールは完了である。
Drupal 9 を試してみた

Drupal 9 のリリース(2020年6月3日)が迫ってきたので使ってみようとddev使ってやったので忘備録。

手順は
1. Docker desktopのインストール
2. DDEVのインストール
3. Drupalのインストール

システム要件
https://ddev.readthedocs.io/en/stable/
　Windowsでも Mac, LinuxでもDockerが動作すれば大丈夫のようです。

なのでまずは
#1. Docker desktopのインストール
（Docker だけではなくDocker compose も必要。Docker DesktopいれるとComposeも入るようです）
https://www.docker.com/products/docker-desktop
からWindowsかMacかを選んでインストール

# 2.DDEVのインストール

こちらをを参照して
https://ddev.readthedocs.io/en/stable/
（かなり時間がかかります）

# 3.Drupalのインストール

Drupal 9 Quick startを参照して
https://ddev.readthedocs.io/en/stable/users/cli-usage/#drupal-9-quickstart

作業が終わったら
$ddev stop
で止めておきましょう。
再開するときはDrupal 9 を入れたサイトディレクトリに移動
例えば）
$cd my-drupal9-site
そして起動すればいいでしょう。
$ddev start

*その他のコマンド
ddev poweroff：　すべてのプロジェクトをとめる
ProgateのHTML&CSSコースで分かりにくかった部分まとめ

#１.はじめに
この記事はProgateのHTML&CSSコースで個人的に紛らわしいと感じた部分や一緒に覚えておいた方が良い知識をまとめています。
同じプログラミング初学者の助けになればと思い投稿させていただきました。

#2.本題
###ul要素とol要素の違い
ul要素とol要素はリスト作成の際に使用する。

・ul要素
Unordered List（順序のないリスト）の略
先頭が番号ではなく黒点が付く。

・ol要素
Oredered List（順序ありリスト）の略
先頭に数字の連番が付く。

###ブロック要素とインライン要素の違い
・ブロック要素
前後で改行が入り、親要素の幅いっぱいに広がる要素
幅や高さが指定でき、縦に並ぶ
例：div要素，h1要素，p要素

・インライン要素
改行されない要素
幅や高さの指定はできない
例：span要素，a要素

###インラインブロック要素の特徴
CSSで「display」によって利用することができる。
インライン要素とブロック要素の特徴を合わせ持つ。

・インライン要素の特徴
改行が付かない
横並び

・ブロック要素の特徴
幅や高さ，余白を指定できる

###input要素とtextarea要素の違い
・input要素
1行のテキスト入力を受け取るための要素
終了タグは不要
また、type属性を設定することで様々な型を作ることができる
type属性の例：submit右向き矢印ボタン

・textarea要素
複数行のテキスト入力を受け取るための要素

####以上になります！
#3.終わりに
この4点が個人的に紛らわしいと感じたものですね。
特にブロック要素、インライン要素、インラインブロック要素が分かりにくいと思いますのでしっかりと理解しておきましょう！
ありがとうございました！
BigQueryのテーブルの情報を一撃（？）で取ってみる。

#BigQuery１０歳おめでとう！！！！
めでたいです。[１０年ですよ。](https://cloud.google.com/blog/ja/products/data-analytics/bigquery-turns-10)いつもお世話になっています。

#BigQueryのテーブル情報取るのメンドイ
正直面倒くさいですよね。データセット単位でしか取れないですし。
**execute IMMEDIATE** を使いたかっただけなんですけどね。ご飯が炊けるまでにちょっと作ってみました。

#まずはテーブルを作る
結果を格納するテーブルを作りましょう。
野良データセットや野良テーブル探しや、データの増量を毎日見たい場合を想定して、テーブルはパーティションしています。

```sql
create table `satoluxx-gde.table_check.table_meta` 
/*
↑このあたりは自分の環境にあわせてね。
*/
partition by date(check_timestamp)
as
SELECT
  *,
  current_timestamp as check_timestamp
FROM
  `satoluxx-gde.biengine_tutorial.__TABLES__` 
/*
↑このあたりは自分の環境にあわせてね。
*/
WHERE
  1 < 0
```

#スクリプト回す
下記のようなスクリプトを回します。エラー処理もなんにもしていないので、実運用のときは色々改造して使ってやってください。
ちなみにロケーションが混在しているとそこでコケちゃうので、 `loc`のところでデータセットのロケーションを指定してやってください。もちろん、実行するときも同じロケーションじゃないとダメです。

```sql
DECLARE dataset STRING;
DECLARE x int64 DEFAULT 0;
DECLARE loc STRING;

SET loc = 'US';
CREATE temp table dataset_list AS (
  SELECT
    catalog_name || '.' || schema_name || '.__TABLES__' AS dataset_name,
    ROW_NUMBER() OVER (ORDER BY schema_name) AS row_num
  FROM
    INFORMATION_SCHEMA.SCHEMATA
  WHERE
    location = loc);
LOOP
  SET
    x = x + 1;
  SET
    dataset = (
    SELECT
      dataset_name
    FROM
      dataset_list
    WHERE
      row_num = x);
  IF
    dataset IS NULL THEN
  LEAVE;
  END IF;
  EXECUTE IMMEDIATE FORMAT("INSERT INTO `satoluxx-gde.table_check.table_meta` SELECT *,current_timestamp() as check_timestamp FROM `%s`", dataset);
/*
↑このあたりは自分の環境にあわせてね。
*/
END LOOP;
```
実行してみてください。こんな感じでテーブルに入ってると思います。
<img width="1322" alt="スクリーンショット 2020-05-26 21.16.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49108/5dd4e949-f294-37f5-8ddb-51fc72e4b069.png">
やり方次第では、複数のプロジェクトにまたがっても取れるかもですね。
ではまたBigQueryにお世話になりましょう！！！
UIButtonに隠しActionをつける方法

# はじめに
ただどう動くんだろう？って言うだけの話で実用性は皆無です:innocent: 
なんか UIButton に謎のアクションを付けれたというお話です。

# 環境
* Xcode 11.4
* iPhone 11 Pro Max (13.4)

# 実装
1. StoryboardでFirstViewControllerとSecondViewControllerを用意する
2. FirstVCにボタンをのせる
3. IBActionでボタンのアクションをFirstVCに紐付ける（`tappedFirst(_ sender: Any)`）
4. SecondVCにFirstVCのボタンをコピペする
5. IBActionでボタンのアクションをSecondVCに紐付ける（`tappedSecond(_ sender: Any)`）

こんな感じ

<img width="500" alt="storyboard" src="https://user-images.githubusercontent.com/34936885/82897894-539c9100-9f93-11ea-84b4-f19be41255a8.png">

```swift
final class FirstViewController: UIViewController {

    @IBAction private func tappedFirst(_ sender: Any) {
        print("First")
        let vc = storyboard?.instantiateViewController(identifier: "Second")
        navigationController?.pushViewController(vc!, animated: true)
    }
}

final class SecondViewController: UIViewController {

    @IBAction private func tappedSecond(_ sender: Any) {
        print("Second")
    }
}
```

# 現象
Storyboard で SecondVC のボタンを確認すると...  
こうなる！

<img width="300" alt="button_action" src="https://user-images.githubusercontent.com/34936885/82897915-5bf4cc00-9f93-11ea-811b-f26c0628df55.png">

`tappedFirst` がついてる。シュミレータで SecondVC のボタンを押下してみると `Second` と print 表示される。（FirstVCの `tappedFirst(_)` が呼ばれたりはしない）unrecognized selector でクラッシュもしない:clap:

# 調査
下記のようにボタンのカスタムクラスを作り FirstVC と SecondVC のボタンに継承させる。

```swift
class CustomButton: UIButton {

    override func sendActions(for controlEvents: UIControl.Event) {
        print("sendActions")
        super.sendActions(for: controlEvents)
    }

    override func sendAction(_ action: Selector, to target: Any?, for event: UIEvent?) {
        print("sendAction")
        super.sendAction(action, to: target, for: event)
    }

    override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        print("beginTracking")
        return super.beginTracking(touch, with: event)
    }

    override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
        print("endTracking")
        return super.endTracking(touch, with: event)
    }

    override func cancelTracking(with event: UIEvent?) {
        print("cancelTracking")
        super.cancelTracking(with: event)
    }

    override func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControl.Event) {
        print("addTarget")
        super.addTarget(target, action: action, for: controlEvents)
    }
}
```

## FirstVC表示時のログ

```
addTarget
```

## FirstVCのボタン押下時のログ

```
beginTracking
endTracking
sendAction
First
addTarget
```

最後の addTarget は SecondVC 表示時のやつ

## SecondVC表示時のログ

```
addTarget
```

アクションは２つあるけど１回しか呼ばれない:interrobang:

## SecondVCのボタン押下時のログ

```
beginTracking
endTracking
sendAction
Second
```

# 調査結果
SecondVC のボタンの `addTarget` が一回しか呼ばれていないことからそもそも  `tappedFirst ` のアクションは追加されていないみたい:thinking:

<img width="300" alt="button_action" src="https://user-images.githubusercontent.com/34936885/82897915-5bf4cc00-9f93-11ea-811b-f26c0628df55.png">

Storyboardでアクションを付けたボタンを他画面からコピペすれば動作しない謎のアクションを付けることができる！これをすれば他の開発者を惑わすこともたやすいだろう:sunglasses:

# さいごに
実装中に謎のアクションをみつけたので調べてみた結果です。活かせる場はあるだろうか:smiling_imp:
Macのdockerが遅いストレスから解放されよう

# Macのdocker遅い問題

Macで開発している時、主にRailsなのですがdockerを使うと遅くなるのが嫌でずっと避けてましたが、とあるプロジェクトでBFF構成にし開発環境とデプロイ環境をECS化したりとでdocker化の流れに抗えない状況になりました。

ただ、やはり遅い。

dockerが不慣れなこともありますが、Macのdockerなかなか遅い。

そしてMacが遅い件を調べてみてもみなさん困られるのが伺えます。

そんな中で対策としてよく見かけるのが

- docker-sync
- vagrantで別立て

の2つでした。

どちらが最適なのかな？と思い悩んでると、

ありました。dockerのドキュメントにまさにこの件に対しての内容が。

https://docs.docker.com/docker-for-mac/osxfs-caching/

### ボリュームマウントのチューニング

端的にまとめるとv17.04から`cached`と`delegated`というオプションが追加され、書き込み読み込みの一貫性を担保しない(※)代わりにパフォーマンスが向上されるものです。

※コンテナ側で発生した変更がホスト側に書き込みされるまで遅延を許容する。

即時性を求められたり大規模な処理を組むこともなく、開発環境だけで使うことから現状大きな支障はないと思いこちらのオプションを利用することにしました。

### 導入の仕方

- volumesの指定の最後に`:delegated`をつけていつも通り`docker-compose up`を実行

```:例
services:
  app:
    volumes:
      - .:/project/sample_app:delegated
```

### tips

linuxやwindowsユーザーの方と一緒に開発する場合は必要ないかと思うので、そんな時は通常使う`docker-compose.yml`に基本的な設定そのままに`docker-compose-local.yml`のように、別ファイル名のymlを用意します。

そこに例のように`services:`、`サービス名:`、`volumes:`、`マウント先:に:delegateオプション`を追加したものをのみを残し

```
docker-compose -f docker-compose.yml -f docker-compose-local.yml up
```

とオプション指定すればvolumesの指定のみ上書かれるのでMacユーザーの方はこちらを利用したら住み分けできて便利です。

※docker-compose.ymlにversion指定されていたら、versionの指定は合わせます。


### 改善の結果

ただのindexのレコード取得でも数秒、初回アクセスで10秒オーバーするケースがあったものが普通にサクサクと動くようになりました。

プロジェクトの内容や要件に合わせてですが、遅すぎてストレスが激しくdocker嫌いになる前に是非試してみてください。

まず困ったら公式ドキュメントをしっかり読むことの大事さを改めて実感する一件でした。
ESP32-DevKitC-32DのdigitalWrite()

この記事は、2020-05-26に書いて、2020-05-26に更新しました。
***
#概略
ESP32-DevKitC-32DでのdigitalWrite()の話です。
コードを実行すると、LEDが点滅します。

#環境・部品
PC：Windows 10 Professional
開発環境：Arduino IDE 1.8.12
本体：ESP32-DevKitC-32D
LED：赤色LED
抵抗：220Ω

#回路図
<img width="320" alt="ESP-32-DevKitC-32Dの2番ピンに抵抗とLEDを繋ぐ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635194/697b6f9b-a4f2-13b6-6b31-380a261972d1.png">

<img width="320" alt="ESP-32-DevKitC-32Dの2番ピンに抵抗とLEDを繋ぐ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635194/92364c5b-49f8-897c-ad1d-9bf4fb3fb825.png">

#コード

```cpp:digitalWrite.ino
const int pinLed = 2;

void setup() {
    pinMode(pinLed, OUTPUT);
}

void loop() {
    digitalWrite(pinLed, HIGH);
    delay(100);
    digitalWrite(pinLed, LOW);
    delay(400);
}
```

#解説
基本的に、Arduino用のコードがそのまま使えます。
ピン番号の指定は、GPIOピンの番号で指定します。
<img width="320" alt="ESP32のピン配置" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635194/2ead5151-40f1-a10c-3b4c-edc112392ab5.png">
画像は、[ESP32のGitHub](https://github.com/espressif/arduino-esp32)から転載。©Espressif Systems

使えるピンは、GPIOの0、1、2、3、4、5、12、13、14、15、16、17、18、19、21、22、23、25、26、27、32、33です。0番と1番と3番は、使わない方が無難です。
`digitalWrite()`で出力される電圧は、3.3Vです。

#参考
[ESP32のGitHub](https://github.com/espressif/arduino-esp32)（英語）
回路図の[ブレッドボードとESP32-DevKitC-32Dのパーツ](https://twitter.com/ht_deko/status/888760472417083392)は、DEKOさん（@ht_deko
）が作成したものです。感謝！
Slackにボットを作成する始めの一歩

# はじめに
職場でSlackを使っているので、定時処理などのお知らせを投稿出来たらいいなぁと思ってやってみた記録。

# アプリの作成
まず始めにSlackにAppsというものを作る。

https://api.slack.com/apps へアクセス。

「Create an App」をクリック。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/d0bfa274-a975-fcde-c05e-49131afa3d4c.png)

アプリ名を入力し、アプリを作成するワークスペースを選ぶ。そして「Create App」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/f894ccaa-235b-9a5d-c143-b7a2d0d0a3ef.png)

アプリ作成後、アプリの設定画面へ移動するので、Features → App Home をクリック。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/9c289451-9a9a-ce1b-67ed-52790821875c.png)

App Display Name の Edit をクリック。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/1c6eb15c-06b8-35d6-b7a1-996701d278ac.png)

botユーザーの名前を入れて、Addをクリック。これがこのアプリ経由でメッセージなどを発言するユーザーになる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/c585745d-0457-14b6-4d89-94cf7238b59f.png)

名前を入れた後。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/75e5af79-b680-6c30-3f1a-971606461c5f.png)

左のメニューから、Settings → Basic Information をクリック。
Add features and functionality の Bots と Permissions にチェックが付いているのを確認する。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/da0e3928-f041-651b-1825-421b81d9d52d.png)

同じページにある Incoming Webhooks をクリック。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/50369846-4c7d-d3cc-a549-43e8bf81257b.png)

スイッチをOnにする。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/4f68249e-069b-7e10-945b-f07c15c911dc.png)

ページ下部へ移動し、Add New Webhooks to workspace をクリック。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/8542689d-fa10-2145-5e24-c0f102b1dd56.png)

※このとき、下記「インストールするボットユーザーがありません」のエラー画面になる場合は、Botユーザーもしくはパーミッションの設定が足りていないので見直す。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/6e810a00-21ef-86f1-dd47-92dbbe92c1c7.png)

このWebhook URLでメッセージを投稿したりするチャンネルを選んで「許可」をクリック。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/5bfb3d5c-2d91-b3d3-7ca0-709611dfff05.png)

Webhook URLができる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/253aa864-21c9-9969-9509-6716e6f1f3eb.png)

サンプルのcurlコマンドを実行すると、指定したチャンネルへメッセージを投稿できる。
…が、自分のPCでは上手くいかなかったので、PowerShellへ書き直して実行した。

```powershell
$url = "https://hooks.slack.com/services/xxx"
$headers = @{"Content-type" = "application/json"}
$body = "{`"text`":`"Hello, World!`"}"

Invoke-WebRequest -Uri $url -Method POST -Headers $headers -Body $body
```

Slackに投稿された様子。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/8f51c3ad-fb60-675d-e845-f9044c4ddbf1.png)