OmniAICreator/Qiita-1.07M huggingface dataset:
ファイル内のある箇所とある箇所のdiffを見る方法


## (前提知識1): コマンドの実行結果の出力どうしを比較する方法

```terminal
$ diff <(command1) <(command2)
```

## (前提知識2): headとtailでファイルの一部を出力する方法

- あるコマンドの実行結果の10001行目から10100行目までが欲しいときは、以下で取得できる。

```terminal
$ cat test.log | head -n 10100 | tail -n 100
```


## これらを使って、、、

ファイルtest.logの13−41と72−99行目を比較するには、

```terminal
$ diff <(cat test.log | head -n 41 | tail -n 29) <(cat test.log | head -n 99 | tail -n 28)
```

コピペ用以下

```sh
x-y行目 -> head -n y | tail -n (y-x+1)


$ diff <(cat f1 | head -n  | tail -n ) <(cat f2 | head -n  | tail -n )
```

```sh
# 行数を指定する
f1=
start1=
end1=

f2=
start2=
end2=


# x-y行目 -> head -n y | tail -n (y-x+1)


diff <(cat $f1 | head -n $end1  | tail -n $(($end1 - $start1))) <(cat $f2 | head -n $end2 | tail -n $(($end2 - $start2)))
```



## (おまけ) white spacesを無視するオプション


```
   -E, --ignore-tab-expansion
          ignore changes due to tab expansion

   -Z, --ignore-trailing-space
          ignore white space at line end

   -b, --ignore-space-change
          ignore changes in the amount of white space

   -w, --ignore-all-space
          ignore all white space

   -B, --ignore-blank-lines
          ignore changes whose lines are all blank
```
from. https://stackoverflow.com/a/16423101
【kintone】日付でルックアップしたいときの小技

アプリを作っていて、「日付」でルックアップできない！
って困ることありませんか？


**呼び出したいアプリ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/6c539c6b-d877-e604-d732-3e4a00c42d4d.png)


**日報を呼び出したいアプリのルックアップ設定**
日付が選べない・・・！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/ecc416b7-a861-c251-54ab-789d04f6bf89.png)


というわけで今回は、自動計算を使って日付を文字列 (1行)フィールドに書き直して、
日報を文字列の日付でルックアップするという小技を紹介したいと思います。

## 日報に「文字列 (1行)」を追加する
フィールド名は「日付文字列」でもなんでもいいので日付を文字列にしたものだと分かるものにしておきます。

**自動計算する**にチェックを入れて、
計算式は
`DATE_FORMAT(日付, "YYYY-MM-dd", "Asia/Tokyo")`
と入力して保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/12b485db-741e-5ba7-fc06-c3914bbc4c2f.png)


## ルックアップの設定
更新したら、日報を呼び出したいアプリのルックアップ設定をします。
先程追加した「日付文字列」フィールドが選択できるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/1e535e11-ef05-b024-396f-169a83fb29b6.png)


## ルックアップしてみる
「日付文字列」でルックアップして、
「所感、学び」フィールドを「まなび」フィールドにコピーできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/7c301c38-83f8-22dd-3e10-eab499f86a46.png)


めでたしめでたし

## 説明動画も作ってみた
温かい目で見てくださると嬉しいです

[【kintone】日付でルックアップしたいときの小技](http://www.youtube.com/watch?v=qQGdtmBGpVI)
[![【kintone】日付でルックアップしたいときの小技](http://img.youtube.com/vi/qQGdtmBGpVI/0.jpg)](http://www.youtube.com/watch?v=qQGdtmBGpVI)
保存された状態で同じ画面に遷移したい

【概要】
----------------------------------------
<b>1.結論</b>

<b>2.どのようにコーディングしたか</b>

<b>3.開発環境</b>

<b>補足</b>



1.結論
----------------------------------------
<b>redirect_to "/XXXX/#{@@@@@.XXXX.id}"</b>とコーディングする！

<br>

2.どのようにコーディングしたか
----------------------------------------
```ruby
  def create
    @comment = Comment.new(comment_params)
    if @comment.valid?
      @comment.save
      redirect_to "/reports/#{@comment.report.id}"
    end
```

reportという投稿に、さらにその投稿にコメントを付け加えることができるアプリです。その際に、reportの投稿にコメントを付け加え終わった後にrootで最初の画面に戻っても良いと思います。しかし、ちゃんとコメントが残っているかの確認も含めてコメントを投稿する画面に戻したいのでこのようなコーディングになりました。
<br>

3.開発環境
----------------------------------------
Mac catalina 10.15.4
Vscode
Ruby 2.6.5
Rails 6.0.3.3
<br>

補足
----------------------------------------

```ruby
redirect_to report_path(id: current_user)
#devise　gemを使用。
```
としても一応エラーは起きませんが、current_userなので、１番目に登録したのであれば/reports/1という風になってしまい、２番目に投稿したreportとは違う１番目のreportに戻されるので注意が必要です。
<br>
wslttyでWSL2を使う。Windows検索から一発でテーマを設定したwslttyを呼び出す。




# 前置き

Windows10を一気にWeb開発しやすいマシンに押し上げたWSL2。使ってますよね。私は毎日使ってます。(そして再起動している..)
問題はWSL2のCUIを使うためのターミナルです。
おそらくデファクトは Windows Terminal なんだと思いますが、なんであれ、あんなにタイトルバー太いんですかね。

![titlebar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74328/9872c0be-9afb-a8f6-53e6-0c87c7f81386.png)
左がWindows Terminal
右がwsltty
太い。**太すぎるんだぁぁ！**

いやわかっていますよ。タブのためなんですよね。でも私、Ubuntuのためにしか使わないし。
あとデファクトの高さはあるにせよ、configで調整できるといいんだけどなぁ～。

そんなわけで私はwsltty使っています。
wslttyを使うの自体は簡単でインストーラーをダウンロードして起動すれば完了です。

https://github.com/mintty/wsltty/releases

でもこれだけでは設定の道半ばです。
一発で好きなテーマが設定されたターミナルを呼び出せてこそ、本番環境とテスト環境に接続するターミナルの色変えたりとか ~~老害な~~ 使い方ができるというものです。

まずはテーマファイルを作成します。

場所はちょっとたどりづらいですが以下です。

```powershell:path
C:\Users\[user name]\AppData\Roaming\wsltty\themes\
```

Windows的には以下と書いても等価です。

```powershell:path
%APPDATA%\wsltty\themes\
```

例えば以下のような青っぽいテーマにしたいとします。

![blue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74328/8403c103-5370-a483-f294-ad1d5aa4e809.png)


テーマファイルの格納場所に ``blue`` という名前で以下の内容のファイルを作成します


```sh:blue
BackgroundColour=9,36,65
ForegroundColour=217,230,242
CursorColour=217,230,242
Black=0,0,0
BoldBlack=38,38,38
Red=184,122,122
BoldRed=219,189,189
Green=122,184,122
BoldGreen=189,219,189
Yellow=184,184,122
BoldYellow=219,219,189
Blue=122,122,184
BoldBlue=189,189,219
Magenta=184,122,184
BoldMagenta=219,189,219
Cyan=122,184,184
BoldCyan=189,219,219
White=217,217,217
BoldWhite=255,255,255
```

ちなみにこの色指定は、以下のサイトで作成できます。ただトラップがあって **FireFox** でのみ動作しますのでお間違いなく!

http://ciembor.github.io/4bit/

色が決まったら右上の [Get Scheme] -> [.minttyrc] をクリックしてください


テーマファイルが作成できたら、ショートカットを作成します。

```sh
デスクトップ上で右クリック -> コンテキストメニューから新規作成 -> ショートカット
```

開いたダイアログに以下を入力します


```powershell:path
%LOCALAPPDATA%\wsltty\bin\mintty.exe --WSL="Ubuntu-20.04"  --configdir="%APPDATA%\wsltty" -o ThemeFile="%APPDATA%\wsltty\themes\blue" -~  -
```

※ WSLで Ubuntu 20.04を動作させる前提となっております。お手元の環境に合わせて変更してください。

ショートカットの名前は ``blue terminal`` とします。

これで準備が完了しました。


このターミナルを呼び出すためには Windowsキーをクリックして ``blu``とタイプします。
おそらくbluetoothの設定の次あたりに``blue terminal``が表示されているのではないでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74328/4e918f93-3216-ba62-f477-001ab09c634e.png)


それを選択すれば 見事にテーマが設定された wslttyが起動します!

Windowsの検索ってコマンドラインランチャーとしても結構優秀で、Macのspotlightや UbuntuのGnomeDoなんかとほぼ変わらない性能を持っていると感じています。
ショートカットをどこに移動してもだいたい検索してくれます。


私は``blue``以外に ``red`` , ``orange``, ``green``, ``black`` なんかを用意して用途によって切り替えています。
ぜひお試しください。
TAO Core をDockerで動かす

備忘録として

# 環境
macOS Catalina 10.15.7
docker desktop 2.4.0.0
TAO Core 3.3.0-RC2

# 流れ
* [ここ](https://www.taotesting.com/products/core/)からDLして解凍したフォルダに移動
* Terminalで `docker-compose build` を実行 **するとエラーになった**
* エラーメッセージから `docker/phpfpm/Dockerfile` の6行目、apt-getで色々installしている中に `libzstd-dev` を追記
* 改めて `docker-compose build` を実行
* 完了したら　`docker-compose up -d`
* ブラウザで `http://localhost` にアクセスでTAO Installation Wizardのページが開く。

# 気になったこと
* 公式からDLしたのに素直にビルドできないとは
* Installation Wizardの最初にRequirements Checkが表示されるが、`Nginx is not officially supported.`と言われる

中身はまだ触っていないのでこれから
GCC拡張のcleanup属性は大域脱出と共存できない【俺を信じろ】

# GCC拡張のcleanup属性とは？

C言語でC++のRAII的なことができる。[参照](https://qiita.com/ozaki-r/items/954837377a712c531832)

# 大域脱出（nonlocal exit）とは？

C言語では、`setjmp()` / `longjmp()`、略してsjljのこと。[参照](https://www.gnu.org/software/libc/manual/html_node/Non_002dLocal-Exits.html)

# 大域（non-local）とはどういう意味？

コールスタックのフレームひとつが「ローカル」と考える。フレームにはローカル変数が入ってるし。

普通は`return`で一つ根本方向のフレームに戻るだけだが、大域脱出では一つと言わず、いくつでも戻れる（戻らなくてもいい）。ゆえにnon-local。

# コールスタックの根本方向に向かうということは、sjljは例外に似ている？

ある意味では似ている。致命的な違いは、[スタックの巻き戻し](https://en.wikipedia.org/wiki/Call_stack#STACK-UNWINDING)を行わないこと。

行わせる方法はない。抜け道はない。俺を信じろ。

# 共存できないとは？

```C
#include <stdio.h>
#include <setjmp.h>

#define _cleanup_(x) __attribute__((cleanup(x)))
#define _cleanup_free_ _cleanup_(freep)

static jmp_buf buf;

static void freep(void *p) {
    printf("free!\n");
    // free(*(void**) p);
}

static void foo(int jmp) {
    _cleanup_free_ char *c_auto_free = NULL;
    printf("Hello\n");
    if (jmp) {
        longjmp(buf, 1);
    }
}

int main() {
    foo(0);

    if (!setjmp(buf)) {
        foo(1);
    }

    printf("Out\n");
    return 0;
}
```

出力：

```
Hello
free!
Hello
Out
```

longjmp()でmain()に戻ったときには、freep()が実行されない。sjljはスタックの巻き戻しを行わないのでこうなる。

# sjlj以外の方法は？

GCCのC言語には、sjlj以外の大域脱出の方法がない。ないったらない。俺を信じろ。

GCC拡張にはcleanup属性があるのに、なぜスタックの巻き戻しを行う大域脱出の方法がないのか？　わからない。とにかく、ないものはない。俺を信じろ。

# GCC以外なら？

WindowsのC言語には構造化例外(SEH)がある。もちろんMSVC限定、かと思ったら最近のMingwでも使えるらしい。

# まとめ

これは、「プログラミング言語はみんな同じようなもの」と思ったら深刻に大間違いなケースのひとつ。大多数の言語でものすごく頻繁に使われている制御構造2つを同時には使えないのだ。「C言語（GCC）にはこういう制約がある」とよくよく体に染み込ませた上で設計しないと、大域脱出とスタックの巻き戻しの両方をうっかり使ってしまう。

そんな鍛え方をしたくない？　人がいない？　じゃあC言語、もうやめたほうがいいな？
三項演算子について

アプリケーションを作成するにあたり三項演算子について学んだので備忘録として残しておきます。

## 三項演算子とは

> 「if　～　else　～」を一文で書きたいときに使う演算子

例） (結果は同じ)

```ruby:①if〜elseで記述
if hoge == 3
  "true"
else
  "false"
end
```

```ruby:②三項演算子を利用
hoge == 3 ? 'true' : 'false'
```

```条件1 ? 条件１が正しいとき : 条件１が正しくないとき```で使用する

便利そうではあるが式が複雑になるとわかりづらくなりそうなため、うまく使い分けることが大切ではないだろうか。
Rubyのリファレンスには``条件演算子``で載っておりrailsドキュメントには```三項演算子```で載っている。
調べてみたところ違いはなさそう。

### 参考記事
https://wa3.i-3-i.info/word11653.html
Windowsサーバのhostsファイルの場所と書き方

# 設定ファイルの場所

以下のフォルダにhostsファイルがあります。

```
C:\Windows\System32\drivers\etc
```

# 書き方

以下の書き方をすればOK

```
XXX.XXX.XXX.XXX hostname
```
【HTML&CSS】スクロールバーの表示を切り替える

#プログラミング勉強日記
2020年10月19日
overflowの使い方を理解してなかったのでまとめる。

#overflowとは
　要素の領域内に収まりきらないときに表示方法を決めるプロパティ。この要素を<b>ブロック整形コンテキスト</b>といい、div要素がそれに該当する。
　overflowは横方向を指定する`overflow-x`と縦方向を指定する`overflow-y`、両方を指定する`overfloe`がある。設定値は表の通り。

| 設定値 | 説明 |
|:--:|:--:|
| visible | 表示する(規定値) |
| hidden | 表示しない(スクロールバーは表示されないがスクロール可能) |
| clip | 表示しない(スクロールバーも表示されなくスクロール不可) |
| scroll | 内容が収まらない場合にはスクロールバーを表示 | 
| auto | ブラウザに依存する |

#サンプルプログラム

```html:HTMLファイル
<div class="wrapper">
  <div class="contents">
    あいうえお<br>
    かきくけこ<br>
    さしすせそ<br>
    たちつてと<br>
    なにぬねの<br>
    はひふへほ<br>
    まみむめも<br>
    や　ゆ　よ<br>
    らりるれろ<br>
    わ　を　ん
  </div>
</div>
```

```css:CSSファイル
.wrapper {
  height: 200px;
  width: 300px;
  overflow-y: scroll;
}
.contents {
  background-color: rgb(181, 244, 247);
}
````

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/8db481ae-16df-84fc-dbec-7c73e03eeb4b.png)


#参考文献
[スクロールバーの表示・非表示を調整する](http://www.1uphp.com/con2/layout/scrolling.html)
[HTMLでスクロールバーを表示・非表示する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/25158)
ラズパイを使って、【ある作業】を自動化してみた

# はじめに
みなさんの会社では、始業・終業はどういった感じでしょうか？
社内放送で知らせる・時間になったら各々勝手に仕事を始める（終わる）・時間になったら朝会（終礼）を始めるなどなどあるかと思います。

自分が以前勤めていた会社では、
1. ipodで始業時間にアラーム（小音）が鳴る
2. そのアラームを担当の人が止める
3. 以下のようなチャイム（？）を手動で鳴らして社内の人に伝える
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/3c5826f6-fa01-843b-ad28-2cd99e5fdadc.png">
↑これを棒で叩いて鳴らす


という流れでやっていました。

~~正直、毎日アラームを止めてチャイムを叩くのは非効率かなと。~~シンプルにアラームを定刻に鳴らせばいいのではないか。

しかし、***それだと面白みがないのでどうせならこのチャイムを叩く動作を自動化してしまおう！***ということでラズパイ（とPython）を使って自動化しました（勉強がてら）。
ちょうど同期がラズパイを持っていたこともあり同期と二人でネタ半分で作ることにしました。

# 準備
自動化するにあたって、何が必要かをまず調べました。とはいっても幸いラズパイは同期が持っていたので追加で準備するモノはあまりなかったです。購入物は以下の通りです。

- サーボモーター
- ジャンパーワイヤ

どちらもAmazonで購入！サーボモーターは、デジタルマイクロサーボSG90（770円）を買いました。

自動化の仕組みとしてはシンプルで、モーターの角度をプログラムで制御してチャイムを叩くだけ。自動化と言うとかっこいいですがやっていることはたいしたことありません（笑）

# 開発
今回書いたコードはこんな感じです。

```Python
# -*- coding: utf-8 -*-             #エンコードの指定
import RPi.GPIO as GPIO             #GPIO用のモジュールをインポート
import time                         #時間制御用のモジュールをインポート
import sys                          #sysモジュールをインポート

#ポート番号の定義
Servo_pin = 18                      #変数"Servo_pin"に18を格納

#GPIOの設定
GPIO.setmode(GPIO.BCM)              #GPIOのモードを"GPIO.BCM"に設定　GPIOをポート番号で扱う方法に設定
GPIO.setup(Servo_pin, GPIO.OUT)     #GPIO18を出力モードに設定

#PWMの設定
#サーボモータSG90の周波数は50[Hz]
Servo = GPIO.PWM(Servo_pin, 50)     #GPIO.PWM(ポート番号, 周波数[Hz])

Servo.start(0)                      #Servo.start(デューティ比[0-100%])

#角度からデューティ比を求める関数
def servo_angle(angle):
    duty = 2.5 + (12.0 - 2.5) * (angle + 90) / 180   #角度からデューティ比を求める
    Servo.ChangeDutyCycle(duty)                      #デューティ比を変更
    time.sleep(0.2)                                  #0.2秒間待つ

#サーボモータの角度をデューティ比で制御
#Servo.ChangeDutyCycle(デューティ比[0-100%])
servo_angle(0)                 #サーボモータを初期位置に移動
servo_angle(90)                #サーボモータ 90°
servo_angle(0)                 #サーボモータを初期位置に戻す
Servo.stop()                   #サーボモータをストップ
GPIO.cleanup()                 #GPIOをクリーンアップ
sys.exit()                     #プログラムを終了
```

コード自体は、ただサーボモーターの角度を制御するだけなので難しくなくネットにも沢山情報があったのでスムーズにできました。

自分は機械科卒ですが電子工作的なことはあまり経験がなかった（大学では旋盤、溶接、製図等を主に学んでいた）こともありジャンパーワイヤーをつなげる際ですらビビリつつも調べながらやりました。

自動化するということで、始業・終業時間にプログラムが作動するようクーロンで設定しました。
自分はクーロンの存在を知らず、同期から教えてもらいました（勉強になった）

> cronとは、多くのUNIX系OSで標準的に利用される常駐プログラム（デーモン）の一種で、利用者の設定したスケジュールに従って指定されたプログラムを定期的に起動してくれるもの。
参照元：[IT用語辞典 e-Words](http://e-words.jp/w/cron.html)

# できあがったもの
かなーりシンプルです！

![sasatora.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/3ab05319-3db2-8f93-b103-cc850545d108.jpeg)


![ささとら君　photo1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/467bac8d-a819-43c7-9c0b-02100b3eef93.png)


こちらが、デモ動画になります。（音は想像で！）
![ささとら君　動画.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/efac87d9-2b23-d609-eef3-b7c143a13b0d.gif)

どうでしょうか？かなりシュールな仕上がりになりました（笑）
実際に使用する際は、１度しか叩かないようにしております。
これでもうわざわざ手動で叩く必要も無く、かつチャイムの味（？）だけ残すことができました。

# まとめ
今回は、始業・終業のチャイムをラズパイで自動化してみました。

こうやって、生活していて感じたちょっとした不便なこと・非効率的なことを解決することが出来るのがプログラミングの面白さなのかなと思います。
実際にやってみて面白かったし、知らなかったことも学べてとてもいい経験となりました。

みなさんもこんな感じで簡単なモノでいいので作ってみてはいかがでしょうか？
intra-mart 共通マスタの動作検証メモ

別件があり、随分と久しぶりになってしまったのですが
intra-martの検証データを登録している際に困ったことがあったのでメモします。

検証環境
----
Windows10
Chrome　バージョン: 85.0.4183.121（Official Build） （64 ビット）
intra-mart Accel Platform 2020 spring
resin 4.0.64
im-juggling 1.0.20200401
PostgreSQL 9.3

前置き
----
少し前からこの現象が起きることは知っていました。
ですが

☓：Chrome
◯：FireFox

という形でブラウザを変えると先に進めた為、検証を優先して解決方法を調べていませんでした。
その後、社用slackでチームメンバーに質問したところで解決が出来たのですが
どうやら、[intra-martサポートサイト](https://product.intra-mart.support/hc/ja/articles/360018993353)にも書いてあったようです。
まずは素直に検索することは大事だと実感しました…

事象
----
システムセットアップ完了後、マスタ情報を設定するために
共通マスタを開いてユーザー登録の新規詳細を開いたところ、基本タブから他のタブへ移動が出来ない現象が起きました。

![qiita_20201019_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263785/f4a00dff-65b1-c0ca-73ed-64dd8437f586.jpeg)
⇩
![qiita_20201019_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263785/5707bed3-cc85-0a3f-e23b-2fb675fca0e0.png)

結論
----
ブラウザの倍率が100%になっていないと起きる事象の様です。
確かに私のChromeのZOOMは110% になっていたので、100%に戻したら無事にプロファイルタブに遷移することが出来ました。
必ず100%にしないと駄目だったら、ユーザーによっては困るよなと思いつつポチポチしていたら
110%ではパブリックグループ所属のみ開くことが出来て、200%にすると全部開く事ができるようになるようです。
ちなみに200%でも正常に登録することが出来ました。

intra-martは確かに色々な機能がある為、全体的に便利な作りになっていると感じます。
しかし、ITに知見の無いユーザーが利用する場合にはこうした些細な部分にも配慮があると、より良くなると感じました。
[rails]DBのカラムの順番を変更したい時に便利なafterオプション

## 概要

テーブルに新たなカラムを追加して、Sequel Pro等を使って確認する時、新しく追加したカラムが一番最後に表示されて見辛いという経験があり、直す方法について調べてみました。


## 例

[![Image from Gyazo](https://i.gyazo.com/3e2918dfc6aff205bbd99f4cdc704b26.png)](https://gyazo.com/3e2918dfc6aff205bbd99f4cdc704b26)

特に何も指定せずにカラムを追加すると、この図のように、新しく追加したカラム（total_price, is_cancel）がupdated_atの後ろに配置されてしまいます。



## afterオプション

```ruby:migration.rb
class AddColumnToOrders < ActiveRecord::Migration[6.0]
  def change
    add_column :orders, :total_price, :integer, null: false, after: :user_id
    add_column :orders, :is_cancel, :boolean, null: false, default: 0, after: :total_price 
  end
end
```

このように、afterオプションを使って、新しく追加するカラムをどのカラムの後に置きたいか指定することができます！

[![Image from Gyazo](https://i.gyazo.com/9533fdf11702a195a1af72884eb84428.png)](https://gyazo.com/9533fdf11702a195a1af72884eb84428)
user_idカラムの横に新しいカラムを配置することができました。

#### 参考
[railsのmigrationで追加するカラムの順番をコントロールする](https://qiita.com/akira-hamada/items/91c5589e52e247ba8b8b "railsのmigrationで追加するカラムの順番をコントロールする")
LI's README



# qiita\_links

1.  [README.org](https://qiita.com/daddygongon/private/a45682cca56b8d31ac36)
2.  [授業Noteなど](https://qiita.com/Acoe/items/9052a6881a671263fdad)
3.  [google recruit](https://qiita.com/Acoe/items/b5031ee9b92906069dfb)


# equation<span class="timestamp-wrapper"><span class="timestamp">&lt;2020-10-28 Wed&gt;</span></span>

$$\frac{1}{4}$$



------
 - **source** ~/grad_members_20f/members/acoe5781/README.org
【kintone】ボタンクリックで音を鳴らしてみる

kintoneカスタマイズには遊び心？も必要かもしれません。というわけで（どういうわけだか）kintoneのカスタマイズビューに、音が鳴るボタンを置いてみたいと思います。

ボタンの中にJavaScriptを仕込みます。
JavaScriptによる影響等は自己責任でお願いします🙏

環境は
OS：Windows10
ブラウザ：Google chrome
を想定しています。

## 音源の準備
まずは一番大切な音源の準備。こちらのサイトから、好きな音をダウンロードして、解凍しておきましょう。
https://otologic.jp/

私はこちらから**光る05**をダウンロードしました＾＾
https://otologic.jp/free/se/flash01.html

## 音楽ファイルを保存しておくアプリを作る
フィールドは添付ファイルだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/8e411a02-cdbf-e6ee-0075-193cd724f09e.png)

## 作ったアプリに新規レコード追加してダウンロードした音源保存

こんな感じに保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/4c7db348-1bd4-36a8-09f7-d9220402275e.png)

## UPした音源のURLをソースから見つけてコピーしておく
音源をUPしたレコードのページを開いたまま、キーボードの**F12**を押します。
すると開発ツールが表示されます。

### 画像の矢印の部分をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/be2c615f-c635-d2dd-1841-67b026724ff8.png)

### そのままUPしたファイル名をクリックすると、右側にhtmlが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e6f53fb3-f97b-ce4c-b408-fe41f1d14e05.png)

### ↓右側にhtmlが表示されたところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/fd426c06-294a-5e15-8755-f21642fc1739.png)

### ダブルクオーテーションに囲まれているファイルのURLをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/add1a920-1627-4f05-e5c9-871e85df43f9.png)

メモ帳などに貼り付けておきましょう。

## ボタンを設置する一覧を作る
アプリの名前
アプリに一覧を追加します。
カスタマイズビューにして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/57d16a2c-afbe-6362-bf30-d72a203cf8f4.png)

書き込むコードはこんな感じ～。先程コピーしたURLを使います。

```javascript

<audio src="コピーしたURL" id="kirakira"></audio>

<button onclick="document.getElementById('kirakira').play()">✨</button>
```

保存して公開してみましょう！

## ボタンクリックで音が鳴るはず

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/fdda98e3-382b-139b-b488-304f4c4c3d6c.png)

音源をおいておくアプリと、ボタンを設置するアプリが別のアプリでも動きます。
連打には対応してません。鳴り終わってからクリックしてね。

以上です。
[Mac]外部GPUを追加したが使われてなさそうだったときの対処法

![img](https://images-na.ssl-images-amazon.com/images/I/81hTHMk42qL._AC_SL1500_.jpg)
https://www.amazon.co.jp/gp/product/B07CQG2K5K/

# 背景
ちょっと前に外付けGPUを購入したのですが、GPU使う系の処理をしてもなんか早くなってない気がする、、、と思ったら、アプリケーション側で下記の設定が必要なケースだったようで、備忘録。

# 対処方法

1. 変更したいアプリケーションを右クリックでGet Info(日本語だと、「情報を見る」)
![Screen Shot 2020-10-19 at 15.01.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2915/0f927626-465a-a4f7-b315-5597cfe7caf5.png)

2. Prefer External GPU(日本語だと「外部 GPU を優先」)のチェックを入れる
![Screen Shot 2020-10-19 at 15.01.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2915/bf971ce1-739c-0597-bf93-0a469bc4670d.png)

以上です。

# 参考

https://support.apple.com/ja-jp/HT208544

※ というか下記にかいてるのをほぼそのまま書いてます
ファイルコピーしてセル値書き換え@python

#やりたいこと
テンプレートとなるExcelをコピーして、
ファイル名を変更。
ついでに表紙扱いのシートの一部の値だけ書き換えたい。

#背景
仕事上、とあるテンプレートを元に
似たようなファイルをいくつか用意しないといけないのだが、
一部のセル値だけ値の変更が必要。

ファイル複製だけならbatとかでよいが、
値の変更をわざわざExcel開いて書き換えるのも面倒なので。
VBAでも可だがあんまり使いたくない。できればPythonの練習も兼ねたい。

ファイル名とか変更値とかはcsvに定義しておけば
変更楽だし使いまわしできるしいいよね。

#流したスクリプト

```py:cpFileCopyNameByCSVlist.py
import os
import sys
import pandas as pd
import shutil
import openpyxl


csvname = './cpfilelist.csv'
resultFolder = './cpResult/'
templatefilename = './template.xlsx'

shutil.rmtree(resultFolder)
os.mkdir(resultFolder)

#read list from csv
#data = pd.read_csv(csvname).values.tolist()
data = pd.read_csv(csvname, encoding='Shift-JIS').values.tolist()
wsname = 'header'

for row in data:
    #copy template file　renamed by list.csv
    print(row[0] +":"+row[1])
    newFileName = resultFolder + row[0] +'.xlsx'
    newTitleName = row[1]
    shutil.copyfile(templatefilename,newFileName)
    
    # change cell.value from csv valye
    
    wb = openpyxl.load_workbook(newFileName)
    ws=wb[wsname]
    ws['B5'] = newTitleName
    wb.save(newFileName)
    wb.close()

sys.exit(0)
```
#メモ
pandasって便利だなー。

#追記
csv読み込み時にencodingエラーが出る時があるので、明示的にSHIFT-JISで読み込むように一部変更。
WSL1からWSL2にアップデートする

# あらまし

WSL2使いたいんじゃぁ

## 手順

[Windows 10 用 Windows Subsystem for Linux のインストール ガイド](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)に従っていろいろ。

ローカルにインストール済みのWSLのVer2だったので、普段は使わないUbuntuをWSLに変換する。

```shell
PS C:\Users\XXXXX> wsl --list --verbose
  NAME            STATE           VERSION
* WLinux          Running         1
  Ubuntu-18.04    Stopped         1
PS C:\Users\XXXXX> wsl --set-version Ubuntu-18.04 2
変換中です。この処理には数分かかることがあります...
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
変換が完了しました。
PS C:\Users\XXXXX> wsl --list --verbose
  NAME            STATE           VERSION
* WLinux          Running         1
  Ubuntu-18.04    Stopped         2
PS C:\Users\XXXXX> wsl --set-default-version 2
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
```

ここで、DebianをInstall。2になっていることを確認。

```console
PS C:\Users\XXXXX> wsl --list --verbose
  NAME            STATE           VERSION
* WLinux          Running         1
  Ubuntu-18.04    Stopped         2
  Debian          Running         2
```
hamlからhtmlで出力される結果を改行されずに書く方法(小ネタ)

## ■ はじめに

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

・haml,htmlの基礎知識が増える
・検証ツールでの確認がしやすくなる

■情報元（有益な情報ありがとうございます）
[haml でインライン要素の中を改行して書いて1行で出力する](https://github.com/shikakun/tips/issues/59)

## ■ 例

hamlでこんな感じで書くと

![スクリーンショット 2020-10-19 14.34.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/11640c9b-1615-99d1-b5f3-6d3669f4a226.png)

この様に検証ツールでは確認できますが

![スクリーンショット 2020-10-19 14.35.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/711da9ea-3ff6-b9b4-0bc1-230bb86d6fb9.png)

この様に、``%h5.time<>``、``%span<>``と記述すると

![スクリーンショット 2020-10-19 14.38.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/7b0cd4e3-3c2f-0fad-6494-1458899c78b9.png)

余分な改行が消え、見えやすくなります！

![スクリーンショット 2020-10-19 14.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/1e36f852-502a-6aec-0b57-b81943b008c1.png)
maven で Java Web アプリを Azure にデプロイする

# 事前に用意しておく情報

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110265/bc501727-3b76-d149-3909-39ca88d51fcd.png)

以下の情報をコンソールなどで確認しておく

appName <-- 図の(1)
resourceGroup <-- 図の(2)
subscriptionId <-- 図の(3)

# pom.xml

build 部分を以下のようにセットする。
region runtime などについてはサーバー側の環境にあわせて適宜変更する。

```xml
<build>
	<!-- https://docs.microsoft.com/en-us/azure/app-service/app-service-web-get-started-java -->
	<plugins>
		<plugin>
			<artifactId>maven-compiler-plugin</artifactId>
			<version>3.8.1</version>
			<configuration>
				<source>1.8</source>
				<target>1.8</target>
			</configuration>
		</plugin>
		<!--************************************************* -->
		<!-- Deploy to Tomcat in App Service Windows -->
		<!--************************************************* -->
		<plugin>
			<groupId>com.microsoft.azure</groupId>
			<artifactId>azure-webapp-maven-plugin</artifactId>
			<version>1.7.0</version>
			<configuration>
				<!-- Specify v2 schema -->
				<schemaVersion>v2</schemaVersion>
				<!-- App information -->
				<!-- SUBSCRIPTION_ID アプリをデプロイするサブスクリプションの一意の ID -->
				<subscriptionId>your_subscriptionId</subscriptionId>
				<!-- RESOURCEGROUP_NAME -->
				<resourceGroup>your_resourceGroup</resourceGroup>
				<!-- WEBAPP_NAME -->
				<appName>your_appName</appName>
				<!-- REGION -->
				<region>your_region</region>
				<!-- Java Runtime Stack for App Service on Windows -->
				<runtime>
					<os>windows</os>
					<javaVersion>1.8</javaVersion>
					<webContainer>tomcat 9.0</webContainer>
				</runtime>
				<deployment>
					<resources>
						<resource>
							<directory>${project.basedir}/target</directory>
							<includes>
								<include>*.war</include>
							</includes>
						</resource>
					</resources>
				</deployment>
			</configuration>
		</plugin>
	</plugins>
</build>
```

# ログイン

コンソールからログインしておく

```
az login
```

# 実行コマンド

pom.xml のディレクトリに移動して、以下のような感じでコマンドを実行する。
オプションはお好みで変更する。

```
mvn clean package azure-webapp:deploy -Dmaven.test.skip=true
```

## 参照

Quickstart: Create a Java app on Azure App Service - Azure App Service | Microsoft Docs
https://docs.microsoft.com/en-us/azure/app-service/quickstart-java?tabs=javase&pivots=platform-linux

以上です。
GDG DevFest 2020 勉強会に参加した

## 開催日程
* 2020年10月17日（土曜日）

## 場所
* オンライン

## 主催
* GDG Tokyo

## 申し込み
* https://gdg-tokyo.connpass.com/event/190079/

## 費用
* 無料

## DevFestとは
* Google Developer Group (GDG) コミュニティによって世界各地で開かれるデベロッパー向けイベント

## セッション - Flutterはプロダクション開発に耐えうるのか
* モバイルアプリの開発の現状と課題
    * Androidアプリ開発の黎明期
        * MVCフレームワーク
        * Java
        * eclipse, Maven
    * Androidアプリ開発の成熟期
        * MVVM, FLUX
        * Kotlin, Java
        * Dagger2, Gradle, Android Studio
    * 課題
        * iOS/Androidの機能仕様ずれ(SDKやライブラリの差、認識ずれなど)
        * 開発期間の長期化
* クロスプラットフォームの期待と課題
    * 課題
        * アプリ動作の安定性
        * 将来に先行き不安
        * 共通のUI
        * 新機能追加の遅れ
        * FlutterとKotlin MPPのどちらを採用
    * 事例
        * スマホアプリ - Idle Fish
            * カメラ機能で商品検索
            * アプリ評価 ★4.6 DAU 2000万
            * Flutter事例でユーザ数が世界最大級
* アプリ開発で必要な要素
    * アーキテクチャ
        * MVVM, Bloc, Redux, ELM/MVU
    * MVVM + Repository
        * Androidエンジニアはよく使っている
       



## セッション - Angularの静的サイトジェネレーター「Scully」の最新情報
* Scullyとは
    * Angular用のSSG(静的サイトジェネレータ)
    * 2020.09にv1.0.0リリース
    * https://scully.io
* 仕組み
    * AngularアプリケーションをPuppeteerで実行
    * 実行時にプリレングされたHTML -> 読み込み完了でAngularアプリケーションに置き換わる
* 簡単な静的サイト作る方法
    * scullyのインストール
    * scullyの設定ファイル
    * ファイル生成
    * ビルド
* PWA化
    * @angular/service-workerとの組み合わせに課題
    * Workboxなどの利用を推奨
* Scullyの今後
    * ドキュメント拡充
    * プラグイン追加
更新したDockerfileの再読み込みは何をすればいい？

#はじめに
メンバーからもらったDockerや、GitからクローンしてきたDocker。
それぞれローカル環境に沿った内容に書き換えた時はなにをすればいいのか？
簡単な備忘録程度にまとめました。

##結論```docker-compose up --build``` でOK
自分で更新したDockerfileを再読み込みするには、
```docker-compose``` down
```docker-compose up``` だけでは、初回に作ったイメージを利用しちゃうので
```docker-compose up --build```　で１から作り直す必要があります。
cakePHP4でローカル環境を整えるときになぜかDatabaseだけうまくいかない

cakePHP4を始めたばかりの新人です。ちなみに初投稿ですので、多めに見てください。

ローカル環境でMySQLを作ったのはいいが、cakePHP4のサーバーを立てても、Dababaseのところだけ```CakePHP is NOT able to connect to the database.```というエラーがでた点について書こうと思います。

結論をいうと、config/app_local.phpを書き換えることでうまくいきました。

cookbookにはconfig/app.phpを書き換えればいいと書いてあったので、そのとおりに書き換えたのですが、できない。

どうやら、ローカル開発の場合はconfig/app_local.phpの方が優先されるようです。

新人が試しに作るとき、絶対ハマる所だと思うので、同じ所でハマる人が減ればいいなと思います。
初めてOSS貢献してみた



# はじめてOSSにコミットした...:v:

 今回、 @ryo2132  さんが紹介されていた OSS の [type-challenges](https://github.com/type-challenges/type-challenges) というプロジェクトに興味を持ち、ほんの一部ではありますが 人生初めてのOSS活動を行いました！
内容としては未翻訳のページを見つけていって英語の原文を訳していくだけだったのだけど、結構良い影響があったので以下にまとめていきます。

![image](https://pbs.twimg.com/media/EkDBo9aUcAE3h9q?format=jpg&name=small)

#### コミット
https://github.com/type-challenges/type-challenges/commit/f9b3bb0b5f7e9095be840fe3cba154f6f0566693

## OSS活動から得られた良い影響


### 1. 自分の知らない文化を知れ、自身を見つめ直す機会になる

まずこの部分が大きいと思います。
そこでは**普段触らない言語での実装**であったり、**見たこともないディレクトリ構成**だったり、そもそも**それぞれのリポジトリでルールが違います**。
そういった異文化において、これまでの実装方針だったり、コミットメッセージの内容や粒度、どういう流れで問題を見つけ、実装、マージに至るまでなど **エンジニアとして活動していく上での自分自身の動き全体**を見つめ直す良い機会を得られると思いました！


### 2. 知らないツールを使える & 知れる

今回コミットを行ったOSSでは 先達が多く活動しており、コマンド一つで面倒な修正を行ってくれるようなものが作成されていました！
自分自身も結構そういった便利コマンドを作成していくの好きなので、中身の実装を時間が空いたときに追って、参考にしようと思っています。
こういった部分からも、普段しない発想だったり、参考になる実装方法、設計が手に入ることもあると思います。


### 3. 足りていない部分が見え、問題提起を行える

type-challenges はそうは言ってもまだまだ歴史が浅いプロジェクトであることと、翻訳するメンバーがまだ少ないこともあり
[gatsby-ja](https://github.com/gatsbyjs/gatsby-ja) などに比べた場合まだしっかりと基盤が整っていない部分もあります。
そういった、立ち上がり初期の泥臭いところを見つけ、改善していくことができるのも OSSの良いところなのかなと思います。


### 4. 新たなOSSにも貢献したくなる

恐らく最大のポイントがここかも知れません。初めての一歩を出したばかりではありますが、一度踏み出してしまえばもう止まりません。
自分の興味のある言語のライブラリ、普段お世話になっているフレームワークやライブラリ、はたまた https://goofi.now.sh/ のような 
初心者向けに OSS活動を始めやすいリポジトリを紹介してくれるサイトもあったりするので、そこから見つけるのもまた一興ですね！


## まとめ

はじめの一歩ってなかなか踏み出しづらいですが、勇気をだしてやってみることで結構世界が変わることもあるので
恐れずに 楽しむと新しい世界が貴方を待っているかも知れません:relaxed:


#### 紹介いただいた方

* https://qiita.com/kou_pg_0131/items/25b7c0870afa6d41d19b にて 紹介いただきました！
  * @kou_pg_0131 さんありがとうございます m(__)m

* https://qiita.com/yamasan0625/items/fd055caf688b959a1240#_reference-3d27200e8f3a72155d65 にて 紹介いただきました！
  * @yamasan0625 さんありがとうございます m(__)m
オブジェクト指向はゲームづくりに向かない その４


その１：https://qiita.com/mas-yo/items/43101d2e5ef073a1f3f5
その２：https://qiita.com/mas-yo/items/f802b5a6a6b3f47eed71
その３：https://qiita.com/mas-yo/items/cd0ddfebba3348a98b24

前回はECS(Entity Component System)を用いてゲームの設計を始め、土台となる部分ができるとこまでやりました。
引き続き、その１，その２でオブジェクト指向で考えて来たゲームのアップデートを、ECSでやるとどうなるか、見ていきたいと思います。

前回までで、下記の様な設計になっています。

![ecs3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227302/dadb7578-953f-a412-8ff2-4e3c8498f60d.png)


## １ヶ月後

さて、開発が始まって１ヶ月が経ちました。ここで企画から「空を飛ぶ敵を作りたい」という要望が来たとします。
空を飛ぶ敵の要件は

- 障害物の上を通れる
- プレイヤーの物理攻撃は当たらない
- アイテムをドロップする際は、周囲の通れる場所にドロップする。

まず「障害物の上を通れる」を設計してみます。
これまで、そもそも障害物という概念もなかったので、そこから考えます。

![ecs4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227302/6b6dd388-edc9-45cd-fc18-33f676d2790e.png)

新たに `MoveAttribute`コンポーネントと`GroundCollider`コンポーネントを追加しました。

`MoveAttribute`コンポーネントは、キャラの移動属性で、地面を歩くか空を飛ぶかの情報を持っています。
`GroundCollider`は、そのステージに１つだけ存在し、地面のコリジョン情報を持ちます。

そして、`Velocity`システムが、これら２つのコンポーネントを参照し、「ぶつかったらその位置で止まる」という処理を行います。



- プレイヤーの物理攻撃は当たらない

攻撃の当たり判定は、DefenseColliderシステムで行っています。これがMoveAttributeを参照すればOKですが、ここで１つの疑問が浮かびます。仕様では、「プレイヤーの物理攻撃が、飛んでいる敵には当たらない」です。

では、「プレイヤーかどうか」というフラグをどこかに持って判定すべきなのでしょうか？もちろん、答えはNOですね。この仕様の意図するところは、地上→空への物理攻撃が当たらない、ということです。（一応、プランナーに確認を取っても良いですね）
よって、MoveAttributeを参照すれば良いということになります。これで、もし将来空を飛ぶプレイヤーができた時は、空への攻撃も可能になるはずですね。

ところで、もしこれをオブジェクト指向で実装した場合、`Player` `Enemy` といったクラスがありますから、そのまま素直に実装すれば、`Player`クラスから`Enemy`クラスへの攻撃で、敵が空を飛んでいた場合、という条件判定にしてしまいがちです。

でもそれだと、空を飛ぶプレイヤーが出てきたときに破綻してしまいますね。ECSで設計すると、機能単位で実装が分かれるため、仮にあいまいな仕様が来たとしても、実装する段階でそれを具体的な機能に落とし込むことになります。これによって、本来意図するところの機能が、正しく実装されることが期待できます。


- アイテムをドロップする際は、周囲の通れる場所にドロップする。

こちらも、ドロップの機能が設計できる前提の仕様です。

意図するところは、「今までは空を飛ぶ敵がいなかったので、死んだその場にアイテムをドロップしていた。今回空飛ぶ敵が現れた事で、その場にドロップしてしまうと、通れない場所にドロップする可能性が出てきてしまうため、周囲の通れる場所を探してドロップするようにしたい」ということですね。

今進めているECSによる設計では、まだドロップの実装をしていませんので、そこから考えることになります。
そのドロップのシステムが、前述の `GroundCollider` を参照して、ドロップする場所を決定するようなロジックを組めば大丈夫そうです。
この機能の実装については、詳細を省略します。

次は、開発２ヶ月後、
「羽のアイテムを使うとプレイヤーは空を飛べるようにする」
という仕様が生まれた事を想定して、設計を考えてみます。

次回につづく・・・
WSL2でHonKitのPDF出力に失敗したら

# 結論
Ubuntu@WSL2環境でaptから`calibre`をインストールしたのが原因。
calibreの[公式サイト](https://calibre-ebook.com/download_linux)の記述に従ってインストールしましょう。

# 失敗するとどんなエラーが出るのか
aptからインストールしていると以下のようなエラーが出ました。

```
QStandardPaths: XDG_RUNTIME_DIR not set, defaulting to '/tmp/runtime-hogepiyo'
WebEngineContext used before QtWebEngine::initialize() or OpenGL context creation failed.
```

# なぜaptでは駄目なのか
[こちらのサイト](https://higelog.brassworks.jp/3399)に記載されていますが、入るバージョンが大分古いようです。
このサイトではpdfの出力に成功しているようなので、環境次第ではビルドできそうですが、新しいものを入れた方が無難そうです。

と、言ってもあくまで推測なので、100%これで直る保証はないですが。
three.js 3dと2dの連携

demo https://codepen.io/gnjo/pen/zYBBzzj?editors=1010

```js
 //プレーンを用意して、カメラを別に用意して全面に張る。
 ...
 ///////////////////////////////////////
 // 2d world
 var o2=plane2d(renderer)
 ctx2d=o2.ctx2d,update2d=o2.update2d
 ///////////////////////////////////////  
 
//レンダリングの順番を指定する
 ...
function animate(){
 requestAnimationFrame(animate)
 renderer.clear() ////for 2d world/////
 renderer.render(scene, camera)
 update3d()
 update2d() /////////2d world//////////
 draw(ctx2d) ///////
}

```

```js
/////////2d world ////////////////////
function plane2d(renderer){

//レンダリングのオートクリアを外す。
 renderer.autoClear = false;////////////////

 let width=renderer.domElement.width
 ,height=renderer.domElement.height
 ,camera
 ,scene
 ,ctx
 ,canvas
 ;
 //console.log(width,height)

 canvas=document.createElement('canvas')
 canvas.width=width,canvas.height=height
 ctx=canvas.getContext('2d')
 // Create the camera and set the viewport to match the screen dimensions.
 camera = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0, 3 );
 scene = new THREE.Scene();

 // Create texture from rendered graphics.
 var tex = new THREE.Texture(canvas) 
 tex.needsUpdate = true;
 tex.minFilter =THREE.NearestFilter;

 // Create HUD material.
 var material = new THREE.MeshBasicMaterial( {map: tex} );
 material.transparent = true;

 // Create plane to render the HUD. This plane fill the whole screen.
 var planeGeometry = new THREE.PlaneBufferGeometry( width, height );
 var plane = new THREE.Mesh( planeGeometry, material );
 scene.add( plane );

 function update2d(){
  tex.needsUpdate = true;    
  renderer.render(scene, camera);  
 }
 return {ctx2d:ctx,update2d:update2d}
}
///////////////////////////////////////
```
AzureでWPサイト構築して動画再生できない解消

WPサイトをAzureAppServiceで構築した際、動画が自動で再生されなかったので、再生するためのメモ


### 追加したコード
staticContentで再生したい動画の拡張子を追加することで再生できました

``` config
<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
</staticContent>
```

### 設定がない場合404
設定がない場合は、404エラーが出ました

![NoName_2020-10-19_13-20-23_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/0621377c-dce1-7b64-c053-0b04919eb66d.png)


### 追加する箇所はsystem.webServer内

追加する箇所は<system.webServer>内のようでした

``` config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>

    <staticContent>
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
    </staticContent>

  </system.webServer>
</configuration>
```
Fedora 33 (beta)でログがローテートされない落とし穴

環境
Fedora 33(beta) x86_64
cronie-1.5.5-4.fc33.x86_64
cronie-anacron-1.5.5-4.fc33.x86_64
logrotate-3.17.0-3.fc33.x86_64
systemd-246.6-3.fc33.x86_64

症状
logrotateを１時間毎に行いたいが、期待された間隔でローテートされない。

再現手順
(1) Fedora 33 (beta)をミニマムでインストール
(2) cronie, cronie-anacron , crontabsをインストール
(3) rsyslog と logrotate をインストール
(4) /etc/logrotate.d/rsyslog の中で /var/log/messages のローテートに関する
　　設定をログローテートの間隔を１時間毎 (hourly)とする。
(5) 数時間待つ

期待される結果
/var/log/messages などが、１時間毎にローテートされる。

実際の結果
/var/log/messages などが、数時間待ってもローテートされない。

原因
logrotateの起動方法のデフォルトがcronからsystemd-timerに変わったため。
logrotateのデフォルトの動作間隔がdailyであるため。

詳細
昔はlogrotate はcron/anacronから行われてきたが、最近はsystemd-timer を
使ってログのローテートを行う方向にFedoraの開発者は持っていきたいと考えて
いるらしい。　
かつては logrotateのRPMパッケージには /etc/cron.daily/logrotateが含ま
れていたが、

```
* Wed Nov 21 2018 Alejandro Domínguez Muñoz <adomu@net-c.com> - 3.14.0-5
- add make as a build dependency
- replace cron job with a systemd timer unit (#1502085, #1655153)
```

というタイミングで、この設定ファイルが含まれなくなったようだ。
その代わりに /usr/lib/systemd/system/logrotate.timer, logrotate.service 
が含まれるようになっているので、こちらを有効にする必要が有る。

```
# systemctl enable logrotate.timer
```
しばらく待ってみるが、１時間毎にログのローテートが実行されない。
その原因は logrotate.timer 内の初期設定にあった。

```
/usr/lib/systemd/system/logrotate.timer
OnCalendar = daily 
```
となっているため、一日一回（午前0時過ぎ）にlogrotateが起動されるのが初期設定と
なっている。　そのため、logrotate の設定ファイル内に hourly が書かれていても
１時間毎にlogrotateが実行されないため、ログのローテートは行われなかった。

修正方法

```
# cp /usr/lib/systemd/system/logrotate.timer /etc/systemd/system/
# cp /usr/lib/systemd/system/logrotate.service /etc/systemd/system/
# vi /etc/systemd/system/logrotate.timer
修正前: OnCalendar=daily
修正後: OnCalendar=hourly

# systemctl daemon-reload
# systemctl enable logrotate.timer

```

これで期待される動きとなった。

参考
https://bugzilla.redhat.com/show_bug.cgi?id=1757726
WindowsサーバのIISでDjangoを動作させる方法

# 以下は本手順は割愛

* IISのインストール
* IISの基本設定
* Pythonのインストール
* Djangoの基本設定

# 仮想環境の作成

対象のディレクトリに移動して以下を実行

```
python -m venv venv
```

# Djandoとwfastcgiをインストール

まずはvenvを有効化しておく

```
venv\Scripts\activate.bat
```

IISでDjangoを使用する場合、wfastcgiが必要なので合わせてインストール。

```
(venv)> pip install django
(venv)> pip install wfastcgi
```

# wfastcgiの有効化

```
(venv)> venv\Scripts\wfastcgi-enable.exe
```

以下のように出ればOK

```
構成変更を構成コミット パス "MACHINE/WEBROOT/APPHOST" の "MACHINE/WEBROOT/APPHOST" のセクション "system.webServer/fastCgi" に適用しました
"d:\webroot\venv\scripts\python.exe|d:\webroot\venv\lib\site-packages\wfastcgi.py" can now be used as a FastCGI script processor
```

出力されたは後で使います。
```d:\webroot\venv\scripts\python.exe|d:\webroot\venv\lib\site-packages\wfastcgi.py```

# system.webServer/handlers のアンロック

```
(venv)> %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers
```

以下のように出ればOK

```
構成パス "MACHINE/WEBROOT/APPHOST" のセクション "system.webServer/handlers" のロックを解除しました。
```

# ハンドラーマッピングでPythonファイルを実行できるようにする。

[サイト] -> [ハンドラーマッピング] で以下のように設定

scriptProcessorは```wfastcgi-enable.exe```で取得した結果を使うこと。![2020-10-19_13h16_51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247515/1260b0b6-a967-8679-b8ae-0c3495f38072.jpeg)

# web.configの作成

以下のファイルを作成し、Djangoのルートディレクトリに配置。

```xml:web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <appSettings>
        <add key="WSGI_HANDLER" value="django.core.wsgi.get_wsgi_application()" />
        <add key="PYTHONPATH" value="D:\webroot" />
        <add key="DJANGO_SETTINGS_MODULE" value="app.settings" />
    </appSettings>
    <system.webServer>
        <handlers>
            <add name="Python FastCGI"
                 path="*"
                 verb="*"
                 modules="FastCgiModule"
                 scriptProcessor="d:\webroot\venv\scripts\python.exe|d:\webroot\venv\lib\site-packages\wfastcgi.py"
                 resourceType="Unspecified" />
        </handlers>
    </system.webServer>
</configuration>

```

これで準備完了です。
Neural Network Consoleを用いてBGM分類～Neural Network Console Challenge～

#1.はじめに
　この記事はNeural Network Console Challenge(以下NNC)のレポートです。NNCはプログラミングやディープラーニングの知識をあまり必要とせず、直感的にネットワークを設計し、学習させることができるツールです。今回のコンテストでは[Audiostock](https://audiostock.jp/bgm)のBGMデータを用いてBGM分類を行います。


# 2.音声データ
　今回は音声データの前処理をPythonを用いて行いました。Pythonのlibrosaというライブラリにメルスペクトログラムを実装する関数があるのでそれを用いて音声データを3×128×128の画像に変換しました。

## 2.1 メルスペクトログラム
　メルスペクトログラムの前にまずスペクトログラムについて説明します。音声信号の周波数成分を分析する手法の一つとして高速フーリエ変換というものが存在します。音声信号を一定の幅で切り取り、高速フーリエ変換を行うことで、どの周波数成分が強く表れているか調べることができます。切り取った幅を時間軸にずらしてさらに高速フーリエ変換を行い、これを繰り返すことで時間変化に対する周波数成分が分かります。
![42837.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/2d95aa81-0d03-e8d5-ac29-8e5af93cb3e2.jpeg)

　しかし、人間の聴覚は周波数を線形スケールでは認知しないので、周波数成分をメルスケールに変換することで、スペクトログラムをメルスペクトログラムに変換します。

## 2.2 アノテーション
　データファイルのcsvファイルは下の画像のようになっています。タグを見てみると、それぞれの音声に対して単一のタグが設定されているのではなく、複数のタグが設定されていることが分かります。そこで、今回はBGM分類問題をマルチラベル問題として考え、それぞれのタグを予測することにしました。ただし、すべてのラベルに対して予想するのではなく、よく頻出する20個のラベル「"ポップ","ジングル","軽快","楽しい","ロック","ポップス","バラード","さわやか","明るい","シンセサイザー", "元気","感動","希望","ゆったり","優しい","わくわく","淡々","切ない","哀愁","おしゃれ"」に対して予測することにしました。
![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/4dd38256-41a9-ac4c-549a-0e8f04d9ea66.png)




## 2.3 学習・検証用データセット
　データは全てで10802個あり、今回は学習用データと検証用データを7:3の割合で分けることにしました。データを分けるときはsklearnのtrain_test_splitを用い、shuffle=Trueとしました。


# 3.Neural Network Console
## 3.1 ネットワーク設計
　ネットワークの全体像は下の図のようになります。今回はNNCのユニット機能を用いて、BlockとConvという2つのユニットを作成しました。

![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/51dcb2d0-c647-6f19-2ad7-39e7a6399dcf.png)

![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/db483220-9af2-6e9e-156e-996222e125b0.png)

![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/9f00498f-9cd6-dd10-155f-5e7bb2a90ff6.png)

　今回のネットワークはResNetというものを参考に作成しました。ResNetは同じ処理を繰り返すので、NNCのユニット機能を使用しました。そうすることで、一回ユニットを定義すれば、そのユニットを繰り返し使うことができます。さらに、ResNetではレイヤーによって入力サイズが異なるため、レイヤーのargumentという機能を用いて、定義したユニットに対して引数を渡すことで、同じユニットでも異なるカーネルサイズやチャネル数を設定することができます。
　先ほども述べたように今回扱う問題はマルチラベル問題となります。しかし、NNCのドキュメントを見てもマルチクラスに対する方法は書いてありますが、マルチラベル問題に対するレイヤーや損失関数の設計の仕方が載っていなかったので、出力層のAffineの20出力をSliceレイヤーを用いてそれぞれの出力を取り出し、Sigmoid+CrosEntropyで損失を計算しました。また、学習と検証データセットで汎化誤差が小さくなるように最終層においてDropoutを行いました。




## 3.2 学習結果
学習結果は下の図のようになります。NVIDIA Tesla V100を用いると100エポックがたったの2分30秒で学習し終えました。一方で、CPUでは画像はないですが、約10時間かかりました。
![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/c3fbeb1c-10c7-67d5-6bb0-490114d1349f.png)

## 3.3 評価
　検証用データに対しての評価が下の図のようになります。Accuracyを見てみると0.9を超えているものがたくさんあり、ぱっとみ良い予測ができていると思いがちですが、今回はマルチラベル問題であり、多くのラベルが0であるので、全部0に予測すればこれくらいのAccuracyが出るので、他の指標を見ることにします。
　今回はPrecisionの指標を見ることにします。Precisionとは「1と予測したラベルのうち、実際に1であるラベルの割合」を表します。
　ラベルy0は0.6以上、y1は0.9以上であり、良い予測ができている一方で、他のラベルは0.4～0.5であり、約半分しか正しく予測できていないことが分かりました。
![img6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/799136/332f1896-2f22-2ab1-e72c-ffbd09bc4a03.png)


# 4.まとめ
　今回はNeural Network Consokeというツールを用いてBGM分類を行いました。直感的なGUI操作で複雑なニューラルネットワークを設計することができ、また、GPUも利用できるので今後の深層学習においてとても役に立つのではないかと思いました。
twitter api icon サイズ

Twitterのアイコン(プロフィール画像)には6種類のサイズがあります。


mini	24x24
https://pbs.twimg.com/profile_images/000/XXXXXXXX_mini.jpg

normal	48x48
https://pbs.twimg.com/profile_images/000/XXXXXXXX_normal.jpg

bigger	73x73
https://pbs.twimg.com/profile_images/000/XXXXXXXX_bigger.jpg

200x200	200x200
https://pbs.twimg.com/profile_images/000/XXXXXXXX_200x200.jpg

400x400	400x400
https://pbs.twimg.com/profile_images/000/XXXXXXXX_400x400.jpg

original	512x512
https://pbs.twimg.com/profile_images/000/XXXXXXXX.jpg
ターミナルソフトの文字色変更でログイン対象サーバ間違い防ぐ

## 概要
ログイン対象サーバ間違えて内結環境でやる作業を外結環境で実施してしまいそうになったとかあると思います。

## そこで
その間違いの確率下げるため工夫としてターミナル文字色変更です。
例えば内結環境ターミナルだったら通常通り白、外結環境だったら緑！等設定しておけば環境間違いによる事故の確率を下げれると思います。

## 設定方法（putty使っているのでputtyだけ。。）
https://www.st.ryukoku.ac.jp/security/ssh/win/custom.html#:~:text=%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%80%81%5B%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6,%E8%89%B2%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

## 設定変更で気をつけること
全体文字色を明るい緑にするとlsコマンド等で表示される実行権限あるファイルもデフォルトで明るい緑になっていることあるのでぱっと見で実行権限あるのかないのか色でわかりにくいことあった。
なのでなるべく他で使用されなそうな色を勧めます。。。
iOSアプリ開発：タイマーアプリ（4.カウントダウンの実装）

![スクリーンショット 2020-10-28 10.44.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570497/5e1521c0-56af-d702-1b49-3018e47bcde1.png)


##内容
タイマーアプリを作成するためのポイントを複数記事に分けて掲載しています。
この記事では、カウントダウンタイマーで実際に残り時間の表示を1秒毎に更新する手順について掲載します。

##環境

- OS: macOS 10.15.7 (Catalina)
- エディタ： Xcode 12.1
- 言語: Swift
- 主な使用ライブラリ: SwiftUI

##Gitリポジトリ
以下のGitリポジトリのURLからサンプルコードをご覧いただけます。
https://github.com/msnsk/Qiita_Timer.git

##手順
1. TimeManager クラスに Timer クラス publish メソッドを追加する
2. MainView の残り時間の表示を1秒毎に更新する




###1. TimeManager クラスに Timer クラス publish メソッドを追加する

現時点では、スタートボタンを押しても、タイマーステータスは .running に変わりますが、画面上はまだ残り時間がカウントダウンされません。画面上は Picker で設定した時間のまま止まっています。

そこで、このタイマーアプリの肝となる残り時間のカウントダウン表示を実装していきます。

SwiftUI ライブラリにも含まれますが、Swift 言語の一番ベースとなる Foundation ライブラリに用意されている Timer というクラスの publish  というメソッドを利用します。

以下のように記述することで、publish メソッドの引数 every で指定した時間（1秒）ごとに発動するタイマーを変数 timer に格納します。これを View 側で利用することで、何らかのアクションを1秒毎に発動したいときにトリガーになってくれます。ここでは、タイマーアプリが残り時間を1秒毎に更新する際にトリガーとして利用していきます。


```swift:TimeManager.swift
class TimeManager: ObservableObject {
    //（他のプロパティ省略）

    //1秒ごとに発動するTimerクラスのpublishメソッド
    var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    //（メソッド省略）
}
```



###2. MainView の残り時間の表示を1秒毎に更新する

MainView で TimerView を含んでいる一番外側の ZStack に .onReceive モディファイアを追加します。ZStack 内のすべてのViewに反映されます。

この.onReceive モディファイアが TimeManager クラスの timer の1秒毎の発動を受けとります。そして、そのあとのクロージャには timer 発動ごとに実行するコードを記述します。

guard let ~ else 構文で、タイマーステータスが.running 以外の時は何も実行しないようにクロージャには return を記述します。
タイマーステータスが.running であれば、それ以下のif文へ進みます。

if文では、残り時間が 0 より大きい時は、残り時間から1秒引き算し、残り時間が0以下の場合は、タイマーステータスを .stopped に変更するように記述します。


```swift:MainView.swift
struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager
    
    var body: some View {
        ZStack {
            if timeManager.timerStatus == .stopped {
                PickerView()
            } else {
                TimerView()
            }
            
            VStack {
                Spacer()
                ButtonsView()
                    .padding(.bottom)
            }
        }
        //指定した時間（1秒）ごとに発動するtimerをトリガーにしてクロージャ内のコードを実行
        .onReceive(timeManager.timer) { _ in
            //タイマーステータスが.running以外の場合何も実行しない
            guard self.timeManager.timerStatus == .running else { return }
            //残り時間が0より大きい場合
            if self.timeManager.duration > 0 {
                //残り時間から -1 する
                self.timeManager.duration -= 1
                //残り時間が0以下の場合
            } else {
                //タイマーステータスを.stoppedに変更する
                self.timeManager.timerStatus = .stopped
            }
        }
    }
}
```

これでようやくカウントダウンタイマーらしくなってきました。
次回は、アラームの実装をしていきます。
ファビコンやOGP画像の作成便利サイト

## Favicon
このサイトで、ファビコンを一括作成します。
iOS Safari, Android Chrome, Windows 8/10, Mac OS X El Capitan Safari等に対応した画像やサイズを一括で作成出来ます。
https://realfavicongenerator.net/

head内の記述方法も画像を作成すると、表示されるので
それを参考にhtmlを記述すれば表示されます。

個人的な設定は、
・ Favicon for Desktop Browsers and Google Result Pages
　Use the original image as is.
・ Favicon for iOS - Web Clip
　Add a solid, plain background to fill the transparent regions.
・ Favicon for Android Chrome
　Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube...).
・ Windows Metro
　Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions.
・ macOS Safari
　Use a silhouette of the original image. Works well with pictures with significant transparent regions.

また、サイト内のファビコンチェッカーで正常に設定されているかどうかも確認出来ます。
https://realfavicongenerator.net/favicon_checker

## OGP
OGP画像のサイズは、**1200x840**で作成し、
コンテンツは、**500x500**に収まるように作成しました。

作成した画像のチェッカーです。6種類のサイズでどのように表示されるかを確認出来ます。
http://ogimage.tsmallfield.com/

また、Facebook, Twitter, Line, はてなブックマークでどのように表示されるかを確認出来るサイトです。
https://rakko.tools/tools/9/

#### 参考
[OGP画像を設定しよう！Facebook・Twitter・はてなブログ・LINEの最適な画像サイズとは？](https://www.asobou.co.jp/blog/web/ogp)
rubyで約数を算出する

AtCoderにて、与えられた値を階乗したものについて約数の個数を求める問題があったので、解いた際のコードをのっける。

### 問題

https://atcoder.jp/contests/abc052/tasks/arc067_a


### コード

↓パフォーマンスが悪い方（与えられる引数が`20`超えてくると計算が遅くなるのでほぼほぼ使えない）

```ruby

# 標準入力の取得
n = gets.to_i

# 階乗の計算
def factorial(n)
  (1..n).inject(:*)
end

def divider(n)
  ans = factorial(n)
  # 1の約数は1のみ
  return 1 if ans == 1
  i = 1
  # 自身も約数になるため始めに入れておく
  arr = [ans]
  while i <= ans / 2
    arr << i if ans % i == 0
    i += 1
  end
  arr.count % 1000000007
end

p divder_advance(n)


```

<br>

↓パフォーマンスが良い方
[約数を求める公式](https://mathtrain.jp/numberofd)を使用しているパターン


```ruby

require 'prime'
 
n = gets.to_i
 
def factorial(ans)
  (1..ans).inject(:*)
end

# 階乗した値を素因数分解し、約数の公式が使用できる形に整形する
def divder_advance(n)
  target = factorial(n)
  return 1 if target == 1
  # arrs内の各要素に対して、1を加え、指数を展開した配列に書き換える
  ans_map = target.prime_division.map do |ary|
    new_arr = (1..ary[1]).map { |i| ary[0]**i }
    new_arr.unshift(1)
  end
  multiple_array_count(ans_map) % 1000000007
end

# [[1,2,4],[1,3,9]]みたいな配列に対して、[1,2,4]の要素数3と[1,3,9]の要素数3を掛けた9を返す
def multiple_array_count(arr)
  arr.map(&:length).inject(:*)
end
 
p divder_advance(n)

```
まだVMで消耗してるの？ Dockerの良い所、関連用語の解説！

# はじめに
Dockerはコマンド一発で環境構築でき、開発環境をそのまま本番環境に移せるツールです。
今回、簡単にDockerについて解説します！

[【YouTube動画】 まだVMで消耗してるの？ Dockerの良い所、関連用語を解説します！](https://youtu.be/tnNigH6bHNw)
[![Collation](https://img.youtube.com/vi/tnNigH6bHNw/0.jpg)](https://www.youtube.com/watch?v=tnNigH6bHNw)

# VMとコンテナの違い
動画だと[この部分](https://www.youtube.com/watch?v=kK2Dfdc_fEw&t=48s)に相当します。

大きな違いはホストOS (いまメインで使ってるOS) 上で別のOSが動いているかどうかです。

VMではOSの上で別のOSが動いているので、動作が遅いです。
対して、コンテナ技術を使った仮想化では、今使ってるOS上で動かしているので、動作が早いです！

ちなみにコンテナはDockerだけじゃなく、他にもcontainerdやpodmanなどいろんなものがあります。

# Dockerの使い所
動画だと[この部分](https://www.youtube.com/watch?v=kK2Dfdc_fEw&t=101s)になります。
Dockerの利便性として、以下のようなものがあります。

- フロントエンドの実装だけする人や初心者が大変な環境構築を一発でできる
- CircleCIなどCIサービス
- イミュータブル・インフラストラクチャ (環境を毎回新しく作り直せる！)　<br>
  -> パッチを当てて脆弱性を修正する必要がなくなります！

もう開発にはなくてはならないツールですね。

# Dockerの用語まとめ
Docker関連でよく見る単語について紹介しておきます。
動画だと[この部分](https://www.youtube.com/watch?v=kK2Dfdc_fEw&t=254s)です。

- Docker Hub
Docker HubはDockerイメージを保存しておくリポジトリです。
ちなみに2020年11月から、半年間未使用のイメージが削除されるようになったので、気をつけてください (フリープランの人)。

- Dockerfile
作成するDockerイメージの設定を書いておくファイルです。
設定を書くと、RUNやADDなどの命令がある行ごとに中間イメージが作成されます。

- docker-compose
複数のDockerコンテナを連携するために使用します。

- kubernetes
発音は以下のサイトで確認ください。
https://www.youtube.com/watch?v=3uFqJ0IhxVA

コンテナ運用の自動化をするために使います。
kとsの間に8文字あるので、k8sとか略されます。

- Amazon ECR (Amazon Elastic Container Registry)
コンテナイメージをAWS上で管理するために使います。

- Amazon ECS (Amazon Elastic Container Service)
クラスターでコンテナ実行、停止、管理ができるサービスです。

- Amazon EKS (Amazon Elastic Kubernetes Service)
AWS上でk8sを運用するためのサービスです。

- Amazon Fargate
コンテナ向けのサーバレスサービスです。

# まとめ
Dockerについて興味をもっていただけたでしょうか？

もっと詳しく学びたいと思われた方は、以下のQiita記事が大変詳しいので、オススメします！
[いまさらだけどDockerに入門したので分かりやすくまとめてみた](https://qiita.com/gold-kou/items/44860fbda1a34a001fc1)

[twitter](https://twitter.com/yassun_youtuber)や[youtube](https://www.youtube.com/channel/UCajrdoGzHzDogrNrLYYmGsg/featured?view_as=public)でのコメントもお待ちしています！