OmniAICreator/Qiita-1.07M huggingface dataset:
Java 3大要素(オブジェクト指向) 備忘録

# はじめに：
社外研修が記念すべき10日目になったので、自分用の振り返りとして、まとめてみます。

Javaの大きな特徴といえばオブジェクト指向。
オブジェクト指向の特徴といえば・・・
下記の3つになるとのことで、下記を書いていきます。
<dl>
  <dt>Java 3大要素</dt>
  <dd>継承</dd>
  <dd>多態性</dd>
  <dd>カプセル化</dd>
</dl>


##1.継承

####継承とは
Javaでは、既存のクラスをもとにして、新しいクラスを作成することが可能。
上記のことをクラスを拡張する(extends)という。

新しく拡張したクラスが既存のクラスのメンバを受け継ぐことを継承という。

例) 研修では、車だったので動物でいってみます。

```inheritance.java

package lesson11_second;
//スーパークラス　動物
class Animal {
	protected int age;
	protected String name;
	protected final static String TRIBE = "動物";
	protected  String settingMessage;


	public Animal() {
		this(TRIBE);
		age = 0;
		name = "noname";
	}
	//オーバーライド対応 tribeで振分け用途
	public Animal(String TRIBE) {
		birth(TRIBE);
	}

	public Animal(int age, String name) {
		this();
		this.age = age;
		this.name = name;
		System.out.println("年齢を" + age + "歳" + "\t"
				+ "名前を" + name + "にしました。");
	}

	public void birth(String TRIBE) {
		System.out.println(TRIBE + "が生まれました。");
	}
	public void setAnimal(int age, String name) {
		this.age = age;
		this.name = name;
	}
	public String getAnimal() {
		String settingMessage = "年齢を" + this.age + "歳" + "\t"
				+ "名前を" + this.name + "にしました。";
		return settingMessage;
	}
	public void show() {
		System.out.println("年齢は" + age + "歳です。");
		System.out.println("名前は" + name + "です。");
	}
}

//サブクラス　人間
class People extends Animal {
	private String favoriteFood;
	protected final static String TRIBE = "人間";
	//クラス変数で種族の振分
	public People() {
		super(People.TRIBE);
		favoriteFood = "肉";
	}
	public People(int age, String name, String favoriteFood) {
		super(age, name);
		this.favoriteFood = favoriteFood;
		System.out.println("年齢を" + age + "歳" + "\t"
				+ "名前を" + name + "好きな料理を" + favoriteFood + "にしました。");
	}
	public void setFavoriteFood(String favoriteFood) {
		this.favoriteFood = favoriteFood;
		System.out.println("好きな料理を" + favoriteFood + "にしました。");
	}
	public void show() {
		System.out.println("");
		super.show();
		System.out.println("好きな食べ物は" + favoriteFood + "です。");
	}

}

public class inheritance {

	public static void main(String[] args) {
		Animal animal = new Animal();
		Animal animal2 = new Animal(20, "佐藤");
		People people = new People();
		People people2 = new People(40, "田中次郎", "ハンバーグ");
		people.setAnimal(20, "山田");
		people.setFavoriteFood("カレー");
		people.show();
		//
	}

}


```



##2.多態性

####多態性とは

1つのメソッドが同じ名前で様々な働きをすること。
主に下記の2つの仕組みで実現している。

・オーバーロード
・オーバーライド

#####オーバーロードとは
メソッド名が同じで、メソッドの引数の型、数が異なる場合、
別の処理を同じクラス内に記述が可能。
呼び出しの際に、メソッドに与える引数によって呼び出す機能を指定できる。




#####オーバーライドとは
メソッド名が同じで、メソッドの引数の型、数も同じ。
継承を利用したクラス(サブクラス)で利用し、元々のメソッドの機能を上書きする。

##3.カプセル化
####カプセル化とは

クラス、フィールド、メソッドにアクセス制限ができる。
複数人で開発をする際に、便利。
改修してもらいたくない箇所に関して、アクセス制限をかけることにより、
注意を促せる。(finalとは別)。

アクセス制限は、制限をかけたい対象の前にアクセス修飾子を記述する。
アクセス修飾子の種類は下記の4つ。
・public
・protected
・記述なし
・private

アクセス制限があるフィールドの値を更新するメソッド名は、
set〇〇
アクセス制限があるフィールドの値を取得するメソッド名は、
get〇〇

##終わりに

書いたのは、いいんですけど投稿を忘れていました。
これを投稿したのは、予定の2日後・・・。

研修中は、1週間に1本記事を投稿することを目標に立てたので達成できるように頑張りたいです。

自分の備忘録に書きましたが、内容等が誤っていたらご指摘頂けるとありがたいです。
まだまだ、新人なのでご容赦ください。
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす

最近得た天啓で、 「GitHub Actions はコンテナを windows / mac / ubuntu から選べるということは、 本物の safari と ie11 を selenium-webdriver で動かすことができるのでは？」 と思ってガチャガチャやってみたら、なんとできてしまったので、紹介します。

今回は node で。

```
npm install selenium-webdriver --save-dev
```

```js:.github/workflows/xbrowser.yaml
name: xbrowser

on: [push]

jobs:
  e2e-ie:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: warrenbuckley/Setup-Nuget@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - run: nuget install Selenium.WebDriver.IEDriver -Version 3.150.0
      - run: node scratch.js
        env:
          BROWSER: ie
  e2e-safari:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      - name: Run safari driver
        run: |
          sudo safaridriver --enable
          safaridriver -p 0 &
      - run: node scratch.js
        env:
          BROWSER: safari
```

今回動かしてるスクリプト。 youtube にアクセスして、title を取得するだけ。

```js:scratch.js
const webdriver = require("selenium-webdriver");

function buildCapabilities() {
  switch (process.env.BROWSER) {
    case "ie": {
      process.env.PATH = `${process.env.PATH};${__dirname}/Selenium.WebDriver.IEDriver.3.150.0/driver/;`;
      const capabilities = webdriver.Capabilities.ie();
      capabilities.set("ignoreProtectedModeSettings", true);
      capabilities.set("ignoreZoomSetting", true);
      return capabilities;
    }
    case "safari": {
      return webdriver.Capabilities.safari();
    }
  }
}

async function main() {
  let driver;
  try {
    const capabilities = await buildCapabilities();
    driver = await new webdriver.Builder()
      .withCapabilities(capabilities)
      .build();

    await driver.get("https://www.youtube.com/");
    const title = await driver.getTitle();
    console.log("title", title);
  } catch (e) {
    console.error(e);
    process.exit(1);
  }
  driver && (await driver.quit());
}

main();
```

パスの書き換えのところがちょっと Hacky なんですが、もっときれいに書けるかも

これが動いてる風景 

https://github.com/mizchi/frontend-gh-action-playground/pull/4/checks?check_run_id=229164948

## 感想

えっこれ最高では。

(もうちょっと頑張れば Android Chrome と iOS Emulator も動かせる気がする…)
vue-routerでparamsのidを取得する

# vue-routerでparamsのidを取得する

参考
https://qiita.com/turmericN/items/b849ebe8313d863855b1

以下の記述で取得出来る

```js
this.$route.params['id']
```

例、
axiosで指定するパス内で使用

```js:component
.get(`/api/tasks/${this.$route.params['id']}`)
サーバ1対N通信について勉強中

現在、TCPサーバについて勉強中です。
サーバソフトで1つの受信ポートに複数のクライアントが接続されるようなサーバに興味があり、色々と調べ調べていくと


”1対N通信”という言葉とこのサイトに辿り着きました。
https://qiita.com/7of9/items/8925cce71cbf43448d55


```Unit.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
    IdTCPServer1->DefaultPort = 7000;
    IdTCPServer1->Active = true;
}
//---------------------------------------------------------------------------
void __fastcall TForm1::IdTCPServer1Execute(TIdContext *AContext)
{
    AnsiString rcvdStr;

    // <LF>終端受信
    rcvdStr = AContext->Connection->IOHandler->ReadLn(IndyTextEncoding(932));

    TList *threads;
    TIdContext *ac;

    threads = IdTCPServer1->Contexts->LockList();

    for(int idx=0; idx < threads->Count; idx++) {
        ac = reinterpret_cast<TIdContext *>(threads->Items[idx]);
        ac->Connection->IOHandler->WriteLn(rcvdStr);
    }

    IdTCPServer1->Contexts->UnlockList();
}
//---------------------------------------------------------------------------
```


C++ Builer Communityをインストールして、上記に掲載されたプログラムをコードして動かしてみて、複数のクライアントを同時に接続できていることを

netstat -nao | fine ":12000"

みたいな感じでnetstatで確認することもできました。

ただ、”1対N通信”で使用される



```
    TList *threads;
    //--------（中略）------------    
    threads = IdTCPServer1->Contexts->LockList();
```

1対1通信と1対N通信の違いはこのスレッドを使っているということだと思うのですが、
このスレッドというのはどういう風にイメージしたら良いのかよくわかりません。

このスレッドというTList型のポインターというのは、クライアントが増える度に１つずつ増えていくのでしょうか？

それとも何かしらサーバにデータが受信されるとそれごとに1つずつ増えるという感じなのでしょうか？



```
for(int idx=0; idx < threads->Count; idx++) {
--------（中略）------------ 
}
```

このコード中にあるfor文の中のthreads->Countというのは、サーバに現在接続されているクライアント数という意味なるのでしょうか？


どうぞ、ご教示の程よろしくお願い致します。
Github登録手順　画像付き

#①githubの登録に必要な事項を入力する
https://github.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/9f6194dc-c47a-3799-f4d5-6fac704e9239.png)

#②「検証開始」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/14b2a9d2-d745-a114-c6a0-ed0c8c453dbc.png)

#③動物の上下の向きを正しく表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/1ff7a461-df48-6de2-8562-3670fc6c7f26.png)

#④デフォルト状態の「continue」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/1210f453-d520-bb47-8654-5aca3053471e.png)

#⑤アンケート的なページが表示されるので、入力するかskipする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/9cbb4479-6d85-223a-95c8-2cd84f5ac2c1.png)

#⑥登録アドレス宛にメールを送ったという表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/53de57c1-c8cc-9058-dc57-1699d1674c62.png)


#⑦メールを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/f04e9745-0f01-ca85-5a7b-fa6ab9e6603d.png)

#⑧「Verify email address」をクリックすると登録は完了している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/efcbee45-90ae-0cab-ba38-cca35a81842a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194967/5d016dd5-fc38-d5b0-301d-9ce23bd6f6e7.png)

###以上で登録完了です。お疲れ様でした。
Linux ファイル や ディレクトリ の 詳しい タイムスタンプ を 表示する lsコマンドのオプション

# 目的

- Linuxの任意のディレクトリ内のファイルやディレクトリの詳しいタイムスタンプを出力するコマンドを知る。
- `ls -la`コマンドより詳しいファイルタイムスタンプを出力する。

# 書き方の例

- `ls`コマンドのオプションを利用する。
- 下記のコマンドを実行するディレクトリには何かしらのファイルやディレクトリが存在するものとする
- 下記にLinuxコマンドを記載する。

``` shell
$ ls --full-time
```

# 具体的な例

- 自分のWSLのUbuntu18.04で`ls --full-time`を実行する。
- カレントディレクトリは`/home/ユーザ名`直下である。
- 下記に実行した際のターミナルでの振る舞いを記載する。

``` shell
shun@DESKTOP-AO64T0U:~$ pwd
/home/ユーザ名
shun@DESKTOP-AO64T0U:~$ ls --full-time
total 51928
drwxrwxrwx 1 shun shun      512 2019-09-14 16:33:08.872673300 +0900 first-bolt-app
drwxrwxrwx 1 shun shun      512 2019-09-18 20:59:51.091823900 +0900 git
-rwxr-xr-x 1 shun shun 26092507 2019-07-20 10:16:40.000000000 +0900 ngrok
-rw-rw-rw- 1 shun shun 13466618 2019-09-14 03:51:40.662887500 +0900 ngrok-stable-darwin-amd64.zip
-rw-rw-rw- 1 shun shun 13607069 2019-09-14 16:18:57.671792100 +0900 ngrok-stable-linux-amd64.zip
drwxrwxrwx 1 shun shun      512 2019-09-14 02:00:30.356899700 +0900 slack
drwxrwxrwx 1 shun shun      512 2019-09-14 16:18:27.861724200 +0900 test
```
VS CodeでDocblockを使うとコメントの先頭が"/**/**"となってしまい使えない

## 環境
* VS Codeを使っている
* [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)をインストールしている
* 設定を色々いじっていて何が悪さをしているのか分からない

## 問題
VS Codeで"/\*\*"と入力すると、を使うとコメントの先頭が"/\*\*/\*\*"となってしまい使えない。Gifアニメを見て頂けると、わかると思います。

![2019-09-19 22-18-38.2019-09-19 22_21_27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145550/5d2a637b-be26-d7aa-e5b6-b513ebd510ea.gif)

## 解決策

"autoClosingBrackets"の設定が"Never"となっているのが原因だった。このプラグインは、コメントが自動でクローズされる前提で動く様です。

<img width="1158" alt="Screen Shot 2019-09-19 at 22.55.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145550/f53c5d3f-4386-8eb1-b592-c07be9a8a7ed.png">

設定から"autoClosingBrackets"を検索すると出てきます。
書籍の「ラズパイと通信するAndroidアプリ」をJavaからC#にしてみた

[親子で電子工作入門 ラズパイとスマホでラジコン戦車を作ろう! ](https://www.shuwasystem.co.jp/book/9784798050201.html)

↑の本、AndroidアプリとラズパイがBluetooth(SPP)で通信する内容です。

素晴らしいことにAndroidアプリの方はソースが公開されているのですが、私の環境だとAndroid Studioでエラーが出てコンパイルのやり方がわかりませんでした。

なのでC＃に書き換えました。通信部分だけです。

[RasPiTankAndroid_CSharp](https://github.com/Jirobe/RasPiTankAndroid_CSharp)

多分、動くはず。きっと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500245/54ec909a-38ee-0d32-bdfa-1800a285dada.png)
compat-gccを使ってmysql4.0をビルド

## 手順 (CentOS7) mysql4.0.30

```sh
yum install -y \
 wget \
 ncurses-devel \
 compat-gcc-44 \
 compat-gcc-44-c++

tar xzf mysql-4.0.30.tar.gz
```

```sh:configure
CC=/usr/bin/gcc44
CXX=/usr/bin/g++44
./configure (略)
```

## 手順 (CentOS6) mysql4.0.27

```sh
yum install -y \
 wget \
 ncurses-devel \
 compat-gcc-34 \
 compat-gcc-34-c++

tar xzf mysql-4.0.27.tar.gz
```

### コンパイル時のエラーを回避

* [【CentOS6系】CentOS6.7にMySQL4.0.27をインストールしてみた。 - LAMP環境 - | テラソリューション](http://www.terasol.co.jp/linux/386)

> コンパイル時に「my_fast_mutexattr」が定義されていないとエラーが出る場合がある為、
定義を強制してエラーを回避します。
> 解凍したディレクトリに移動して「mysys/my_thr_init.c」ファイルを修正します。


```sh
cd mysql-4.0.27/
vim mysys/my_thr_init.c
```

```diff:mysys/my_thr_init.c
- #ifdef PTHREAD_ADAPTIVE_MUTEX_INITIALIZER_NP
  pthread_mutexattr_t my_fast_mutexattr;
- #endif
```

```sh:configure
CC=/usr/bin/gcc34
CXX=/usr/bin/g++34
./configure (略)
```
ElixirConf US 2019 レポート

最近，研究開発に忙しくて，Qiita 記事を書いている暇があまり無いですが，この話はさっさと書いたほうがいいので，あげておきます。

ElixirConf US 2019 に行ってきました。

https://elixirconf.com/2019/

* Elixirはバージョン1.9を迎えて，創始者のJosé Valimより「安定期に入った」
「今後はドラスティックな仕様変更は避け，内部的な充実を図る」という宣言がされました。
* Phoenixは Javascript を不要にしリアルタイム通信レンダリングを可能にするLiveViewがさらに充実しました。
* Phoenix 開発元のDockYardから，LumenというElixirからWebAssemblyを生成するライブラリと，Annexというディープラーニングライブラリが発表されました。
* Lumen はおそらく将来的に Phoenix LiveView の中で活用されることになるでしょう。これにより，Javascript 無しの世界観がより加速しそうです。
* Nerves は，分散コンピューティングと実行しながらのアップデートという驚異のデモンストレーションを敢行し注目を集めました。
* 我々は，京大の姉妹プロジェクト Cockatrice とともに Pelemay を発表しました。
* Hastega 改め Pelemay は Elixir Zen スタイルのプログラムを SIMD 命令や GPU に変換してアクセラレートを可能にするライブラリです。
* Cockatrice も同様に Elixir から FPGA を駆動するライブラリです。
* Pelemay は ElixirConf US 2019 での発表とともに仮バージョンをリリースしました。 https://github.com/zeam-vm/pelemay
* ElixirConf US 2019 での発表からまだ3週間くらいしか経っていないのに，海外エンジニアの方々から多大な協力を得て研究開発が進んでいます。(もちろん国内の方々も！)
* また，いくつか Pelemay を導入したいという具体的な案件の話もいただきました。

上記の講演動画を貼っておきます。みなさん，ぜひ見てください！

ElixirConf 2019 - Thursday PM Keynote - José Valim
https://youtu.be/oUZC1s1N42Q
Elixir

ElixirConf 2019 - Friday Evening Keynote - Chris McCord
https://youtu.be/txk4WAlabvI
Phoenix LiveView
相当早口だったので，ほとんど聞き取れなかったです。

ElixirConf 2019 - Day 1 Morning Keynote - Brian Cardarella, Luke Imhoff, Paul Schoenfelder
https://youtu.be/uMgTIlgYB-U
Lumen (WebAssembly)

ElixirConf 2019 - Annex: Introducing an Easy to Use... - Jason Goldberger
https://youtu.be/Np5nSEfKLeg
Deep Learning
魚のメタファーが登場して ??? となりました。後で講演者に質問したのですが，それほど深い意味は無いとのことです。

ElixirConf 2019 - Day 2 Morning Keynote - Justin Schneck
https://youtu.be/fRP_dVton7o
Nerves

ElixConf 2019 - Cockatrice: A Hardware Design Environment with Elixir - Hideki Takase
https://youtu.be/BJbXpwS-g1A
Cockatrice

ElixirConf 2019 - Return of Wabi-Sabi: Hastega Will Bring More and... - Susumu Yamazaki
https://youtu.be/uCkPyfFhPxI
Hastega 改め Pelemay
[停止中] 東電管内の停電状況を取得するAPIを作った

**[2020/3/25より、東電PGのサイトが変更されたことにより現時点では本APIの運用ができておりません。ご指摘ありがとうございます。](https://qiita.com/ryo-a/items/9a30a664a6f60c602c9b#comment-90df586f2fb231dec727)**
**本記事は記録としてのみ残しています**

令和元年台風第15号の影響で千葉県の停電が長引いている状況で、何かCivic Tech的に出来ることはないものかと思い、シンプルなAPIを作成しました。

## TL;DR

- 電力会社の停電情報ページが使いづらいため、非公式API **[jp-power-outage](https://ryo-a.github.io/jp-power-outage/)** を作った。
    - **現時点では東京電力（東京電力パワーグリッド）管内のみ対応**
    - そのうち（需要があれば && 時間があれば）各地の電力会社を網羅したい
    - そもそも非公式APIなんか作らなくても良いように、電力会社は公共性の高い情報に関して機械判読性の高いデータを提供してほしい……
- Pythonでスクレイピングし、~~GitHub Pagesで配信している~~
    - 10分に1回、東電のページを巡回してstaticなJSONを生成する形式のためこれで十分
    - **（2019-10-12 追記）**過去データに関する容量の制限を考慮し、さくらVPS（東京第2リージョン）へ移動した

## URL

**https://ryo-a.github.io/jp-power-outage/**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185296/430759ec-a856-2053-c55a-340843822c26.png)


### 最新の停電情報
10分おきにクロール
**`http://teiden.info/api/v1/latest/都道府県名.json`**
（旧URL: `https://ryo-a.github.io/jp-power-outage/api/v1/latest/都道府県名.json`）

|都道府県|URL|
|:---|:---|
|茨城県| http://teiden.info/api/v1/latest/ibaraki.json|
|栃木県|http://teiden.info/api/v1/latest/tochigi.json|
|群馬県|http://teiden.info/api/v1/latest/gunma.json|
|埼玉県|http://teiden.info/api/v1/latest/saitama.json|
|千葉県|http://teiden.info/api/v1/latest/chiba.json|
|東京都|http://teiden.info/api/v1/latest/tokyo.json|
|神奈川県|http://teiden.info/api/v1/latest/kanagawa.json|
|山梨県|http://teiden.info/api/v1/latest/yamanashi.json|
|静岡県|http://teiden.info/api/v1/latest/shizuoka.json|


### 過去の停電情報

`http://teiden.info/api/v1/old/YYYY/MM/DD/都道府県名/都道府県名-HHmm.json`

例: 2019年9月20日 0:10取得の千葉県の停電情報
`http://teiden.info/api/v1/old/2019/09/20/chiba/chiba-0010.json`

GitHub Pagesでホストできる容量に上限があるので、過去データは2ヶ月を目処に削除しようかと現時点では考えています。


## 実装

Python + beautifulsoupでHTMLをスクレイピングしているだけです。
東電のページに余計な負荷をかけないため、停電情報が出ている自治体のページのみ取得してアクセスするようにしています。

エリア名で取得しやすいように市町村名・エリア名をキーにしたJSONを生成しています。

## 運用

~~雑に~~ シンプルにcronでPythonスクリプトを回し、その情報をGitHubにpushしています。
cronで回すスクリプトと公開用のrepoを分けているため、スクリプトでは `-C` オプションを付けてgitを叩いています。

```py
cmd_commit = f'git -C {output_repo_dir} commit -am "update ({datetime.now().isoformat()})"'
```


## 謝辞

今回のAPIのみならず、普段から各種アドバイスに乗ってくれている[RY_2718](https://twitter.com/RY_2718)氏, [kn1cht](https://twitter.com/kn1cht)氏. [min](https://twitter.com/min_poo_san)氏に感謝いたします。
Freenomの無料ドメインと、有料ドメインとの違い

みなさんお馴染み、無料で使えるドメインのFreenomについてです。
登録自体は簡単に行えます。
管理画面もわかりやすいUIになっているので、困ることなく使えるかと思います。
※登録等については[ 無料のドメインを取得する - @teekay ](https://qiita.com/teekay/items/135dc67e39f24997019e)がわかりやすくていいですね。

FAQ等が英語になっていたので、気になって調べた内容についてまとめました。
各項目には公式FAQへのリンクを貼ってます。

# TL;DR

- [更新は無料で出来るの？](#更新は無料で出来るの)
- [無料ドメインと、有料ドメインの違いは？](無料ドメインと、有料ドメインの違いは？)
- [無料ドメインの移管はできる？](無料ドメインの移管はできる)

## 更新は無料で出来るの？

出来ます。ただし、無料で更新ができるのは期限切れの2週間前からです。
それ以前に前もって延長を行いたい場合は、有料ドメインへのアップグレードが必要となります。
https://my.freenom.com/knowledgebase.php?action=displayarticle&id=2

## 無料ドメインと、有料ドメインの違いは？

[このページ](https://www.freenom.com/ja/freeandpaiddomains.html)において、無料ドメインと有料ドメインの違いについて、以下のように対比されています。

|                  	|          無料ドメイン         	|      有料ドメイン      	|
|:----------------:	|:-----------------------------:	|:----------------------:	|
| 法的ライセンス権 	|              なし             	|          あり          	|
|      転送権      	|              なし             	|          あり          	|
|       WHOIS      	| 「FREENUM」の名前が登録される 	| 自分の名前を登録できる 	|

### 法的ライセンス権ってなに...？
登録の際に同意を求められる [Term of Condition](http://www.freenom.com/en/termsandconditions.html)において、それっぽい記載がありました。


>As a PAID domain name registrant, you receive the benefits of holding the legal license rights of the domain name. This means that you can register the domain for a longer period of time (1-10 years) and where you identify yourselves in the WHOIS record of the domain. Legal license holders (paid domain name registrants) are able to sell or transfer their domains - just like it is common with any top level domain.

法的ライセンス権を持っていると、

- 1～10年のスパンで更新をすることができる
- 普通のドメインのように、譲渡、売却ができる

上記のことが可能になるようです。


##　無料ドメインの移管はできる？
できません。
https://my.freenom.com/knowledgebase.php?action=displayarticle&id=43

有料ドメインについては以下の手順で可能です。
https://my.freenom.com/knowledgebase.php?action=displayarticle&id=67

# 参考
- [公式ページ](https://www.freenom.com/)
- [公式FAQ](https://my.freenom.com/knowledgebase.php)

# あとがき
使用していた`.net`ドメインが失効しまして。
踏み台サーバ兼作業用サーバとして運用しているconohaのサーバに割り当ててたんですが、SSHログインとか色々するときにIPアドレスで指定するとなると結構不便でした。
乗り換え先を探していたところ、Freenumで無料でドメインが利用できるとのことだったので、ざっとドキュメントを確認してみた次第です。

年間1000円ちょっとをケチるのもなんか情けない話ですが、<b>お金を使わなくていいところは、極力使わずに行きましょう！</b>😀
vagrantに作成した開発環境でLaravel6.0のログイン画面を表示するまでのメモ

## 概要
Laravel6.0 では、それまであったmake:authのartisanコマンドがなくなって、laravel/uiを利用する方法に変更になりました。
はまりどころがあったのでメモを残しときます。

## 環境
OS：CentOS 7.2（vagrant）
PHP：7.2.22
Laravel：6.0.3

## 手順

### laravel/uiのインストール

``` console
$ composer require laravel/ui --dev
```

### ファイルの展開
 
``` console
$ php artisan ui vue --auth
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.
```

「npm install」と「npm run dev」を実行するようなメッセージが表示されましたが、
npmをインストールしていなかったので、インストールします。

### npmのインストール

``` console
$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
$ nvm install stable
```

### node_modulesをマウントする

このまま「npm install」を実行しようとするとvagrantの共有フォルダ内にシンボリックリンクが作成できずにエラーになります。
「--no-bin-links」のオプションを付ければ「npm install」は成功しますが、「npm run dev」でエラーが出てしまいます。

そこで[こちら](http://jjtake.hatenablog.jp/entry/2017/10/22/004650)の記事を参考に、
node_modulesフォルダを共有フォルダの外に出しマウントします。

```
$ mkdir ~/node_modules
$ cd /vagrant
$ mkdir node_modules
$ sudo mount -B ~/node_modules /vagrant/node_modules
```

### パッケージのインストール

```
npm install
```

### JavaScriptファイル、CSSファイルの作成

```
npm run dev
```

これでログイン画面が表示されるようになりました。

![ログイン画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/157083/43f17030-46bb-a8a9-f91a-4b88a97aebd6.png)


### おまけ

このままだとvagrantを起動するたびにmountコマンドを実行しなければならないので、Vagrantfileにprovisionとしてコマンドを追記しておきます

``` ruby:Vagrantfile

config.vm.provision "shell",
  run: "always",
  inline: "sudo mount -B /home/vagrant/node_modules /vagrant/node_modules"
```

## 参考サイト
[認証 6.0 Laravel](https://readouble.com/laravel/6.0/ja/authentication.html)
[WindowsホストでVirtualBoxでLaravel-Mix 、やっとできた - 墨と鉛筆](http://jjtake.hatenablog.jp/entry/2017/10/22/004650)
[Isolating node_modules in Vagrant](https://medium.com/@dtinth/isolating-node-modules-in-vagrant-9e646067b36)
GitHubで他人のユーザー名を奪い取った件

GitHubのユーザー名を変更しよう。（唐突）

思い立ったが吉日、
`adunyan`から`adzunyan`に変えるため、意気揚々とSettings画面へ。。。

![f544d528a37265852407ddb7cfbf6207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174833/d9722310-9666-ecd5-44dd-b9d35bdc4bc6.png)

。。。あれぇ。。。？
赤文字部分の文言が変わってる。。。？

画像ではTrademark Policyなるものの表示になってますが
当時は

> もし既に使われているユーザ名にしたかったら、レビューするから連絡してね！！

的なことを英語で書いてあったんです（気のせいだったらごめんなさい）

そんなことできるのか！？と衝撃を受けた私ですが、

早速ググって出てきた[こちら](https://qiita.com/delphinus/items/7ebba704b3bad4603e81)の記事を参考にしながら
GitHubに問い合わせてみました！

## 拙い英語でお問い合わせ

![fd33cd055caf2adf84e95249234cc01d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174833/0601aeb8-78f4-d7d1-3ebb-87537ab18aee.png)

はい
晒すのも恥ずかしい感じの英文ですが、

たった7時間後に返信が！？

![0f13e3526c35ad59ecfbb1ffdb32194c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174833/7fe579eb-5bbe-df64-cf2c-f962dc0ccd1d.png)


> あんたラッキーだよ！解放したから早く変更してね！
> 誰かに取られたらもう解放できないよ┐(´∀｀)┌

的な内容と解釈したのですぐさま変更画面へ！

誰かに横取りされるなんてこともなく無事変更ができました！

ということで

**GitHubではユーザ―名を既に取られていても諦めないで！！**

というお話でした～！

(GitHubの非アクティブユーザーには人権がないってことか)
データサイエンティスト協会 セミナー2019 第4回 参加記

# 概要
[データサイエンティスト協会 セミナー2019 第4回](https://techplay.jp/event/745068)に参加してきました。
スマホでメモしたので全部は書き留められず、自分が重要だと思った部分だけ記録しました。

## 日本IBM株式会社 西川さん

### 気象データの利用はまだまだ
- 気象庁の天気予報は精度85%：[ソースは多分このへん](https://www.data.jma.go.jp/fcd/yoho/kensho/yohohyoka_top.html)
- 韓国の天気予報は精度46%(2017年)：[Naverの記事](https://news.naver.com/main/ranking/read.nhn?mid=etc&sid1=111&rankingType=popular_day&oid=008&aid=0003922766&date=20170822&type=1&rankingSeq=8&rankingSectionId=103)
- 気象庁の精度は145年分の観測データに基づくもの：[1875年から観測してるようだ](https://www.jma.go.jp/jma/kishou/intro/gyomu/index2.html)
- 気象データの利用企業は1.3%：[ビッグデータの流通量の推計及びビッグデータの活用実態に関する調査研究](http://www.soumu.go.jp/johotsusintokei/linkdata/h27_03_houkoku.pdf)p.16 図表4-5

### IBMでの気象データ活用事例紹介

- 乱気流と運航履歴を用いて航空運航業務最適化：[多分これ](https://business.weather.com/industry-solutions/aviation)
- WBGT指標と複数の変数を使用して熱中症による搬送地域を予測する

### [The Weather Company](https://en.wikipedia.org/wiki/The_Weather_Company) の気象データ活用事例紹介

- スーパーの商品などを天気、地域ごとによく売れたものを可視化、天気予報と組み合わせて需要予測もできるGUIを提供
- 製造業にて露天温度と不良品発生率の関係を求め、天気予報をもとに不良品発生率を予測する

### 参考
- [気象業務はいま2019](http://www.jma.go.jp/jma/kishou/books/hakusho/2019/index.html)
- [平成27年版情報通信白書](http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/pdf/index.html)

## 株式会社ルグラン 泉さん
### 海外では気象データが活用されている

- 製薬企業で気象データと口コミからインフルエンザの流行を予測し薬の販促をする
- 経済に対する日常的な天候の変動の影響は、米国の国内総生産全体の3.4％ほどになる（2011年）：[Weather Costs US Economy Hundreds of Billions Annually](https://www.accuweather.com/en/weather-news/weather-costs-the-us-economy-h-1/51526)

### 気象データ活用事例

- 天気や気温の変化に合わせその日のコーディネートをリコメンド：[TNQL(テンキュール)](https://info.tnql.jp/)
- テンキュールでは働く女性が顧客と合うときに同じ格好をすることを回避する機能として自撮りをログとして保存できるようにし、このログを元にファッションの好みを学習してレコメンドに活かすようにしている
- テンキュールAPIはファッション以外にも適用できるレコメンドエンジンもある 

他にも

- 香水は天候によって香りの立ち方（蒸発）が変わるので、天候に基づいて香水をリコメンド
- フェスに行くときの服装は天気で変えたいのでコーディネートをリコメンド
- IoT家電（エアコン）の使用状況と位置情報、天候情報から化粧品などをリコメンド

### 気象データ活用あるある

1. 差分が重要 -> ずっと暑かった後の寒い日とずっと寒かった後の寒い日では意味が異なる
2. 平日と休日で効果が違う -> 雨の日はデパートに来る客数が減るが、平日の雨と休日の雨では特性が異なる
3. 予報と当日の天気のどちらが影響を与えるのか？ -> 顧客の行動は天気予報に影響されたものか、当日の天気に影響されたものか、見極めが必要

## 東京ガス株式会社 笹谷さん
### 気象データ活用事例

- 電力の卸市場には天候が影響。卸価格をヘッジする保険の販売：[損保ジャパン](https://www.nikkei.com/article/DGXMZO49676650R10C19A9EE9000/)
- ヒートショック啓蒙：[ヒートショック予報](https://home.tokyo-gas.co.jp/living/bathroom/hotdry/heatshock.html)
- ガスメーターの不調には気温が影響。生成モデルで不調の発生件数を予測し、分布を算出。故障修理の出動予測体制最適化を実施。

他にも課題あり

- 発電機のガスタービンの効率は温度の影響を受ける
- 屋外給湯器の不調は気温に左右される

### データ活用の観点
人 -> 行動変容 -> 予測を行い計画に盛り込む
モノ -> エネルギー効率の変動 -> リスク管理や調達戦略に活かす
モノ -> 設備故障 -> 故障修理の体制を最適化する

- 過去のデータは原因究明や事象の特徴を把握するのに使用し、長期の計画や改善などに活かす
- 未来の予測は計画を最適化したり、予防対策に活かす
VuetifyのCalendarsを日本語化してみる

# VuetifyのCalendarsを日本語化してみる

## 結論
[Github](https://github.com/yamanakata1/nuxt_demo/commit/665404e071613678f36c3e02edee81833da5673a)

```html:calendar.vue
<v-calendar
  ...
  locale="ja-jp"
  :day-format="timestamp => new Date(timestamp.date).getDate()"
  :month-format="timestamp => (new Date(timestamp.date).getMonth() + 1) + ' /'"
  ...
></v-calendar>
```

## 参考
 - [VuetifyのDatePickerを日本語化してみる](https://sugimotonote.com/2019/03/03/post-1321/)
 - [Calendar component](https://vuetifyjs.com/ja/components/calendars)
 - [vuetify/timestamp.ts](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VCalendar/util/timestamp.ts)
(createNativeLocaleFormatter)
Amazon S◯Sを一言で表すと

# はじめに
AWSにはS◯Sっていう名前のサービスが多いですよね。
どれも似たようなサービスで、真ん中の一文字だけで違いを判断するのは難しい気がします（私だけ？）。
ということで、それらの違いについて簡単に書いてみました。簡単に。

# Amazon S◯S
S◯Sという名前（略称）のサービスは以下の3つになります。

- SQS
- SNS
- SES

それぞれみていきましょう

## Amazon SQS
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251142/da0451fb-0a7e-7895-29d7-8e6168dce264.png' width=30%>

- Simple Queue Serviceの略
- 完全マネージド（ユーザ管理不要）なメッセージキューイングサービス
- 意外にもAWSの中で最も歴史が深いサービスらしい(サービスインは2004年)
- Queue（キュー）とは、筒状の入れ物のようなイメージのもの
- キューを利用してコンポーネント間でメッセージのやり取りを行うことで、コンポーネント間をつなぐ
- 疎結合な（互いに影響を与えにくい）アーキテクチャを実現することができるサービス

### 結局、SQSとは
**つなぐサービス**
![sqsイメージ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251142/09761011-b84d-3002-dcac-4b6306addd16.jpeg)


## Amazon SNS
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251142/f43273b1-157a-398f-9a93-016906f250d5.png' width=30%>

- Simple Notification Serviceの略
- Notification=通知 のとおり、完全マネージドのプッシュ型の通知サービス
- SMS, email, HTTP/HTTPS, モバイル通知などを通じてメッセージを配信する
- SQSやLambdaとの連携も可能
- メッセージをプロトコルごとに変換する部分もやってくれるので、通知する人はプロトコルの違いを意識せずに配信できる

### 結局、SNSとは
**知らせるサービス**
![snsイメージ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251142/0fc27870-b40a-68b5-4fcd-3dde9e1af04a.jpeg)


## Amazon SES
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251142/7c693356-0c6d-1cc8-4dd7-f5e4eb71fec3.png' width=30%>

- Simple Email Serviceの略
- Eメールに特化したサービス
- SMTPプロトコルやAPIを通じてメールを送受信する
- 受信したEmailをS3に配信することも可能

### 結局、SESとは
**メールの送受信サービス**
![sesイメージ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251142/34032f58-991d-4bb1-fc42-251e0ec737b7.jpeg)

# まとめ
- SQSはつなぐサービス
- SNSは知らせるサービス
- SESはメールサービス

# 参考資料
- [公式ドキュメント](https://docs.aws.amazon.com/index.html?nc2=h_ql_doc)
- [AWS Black Belt（サービス別事例集）](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
- [AWS認定資格試験テキスト AWS認定 ソリューションアーキテクト-アソシエイト](https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-NRI%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/dp/479739739X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2TJ91KIVGFV3S&keywords=aws%E8%AA%8D%E5%AE%9A%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88&qid=1562596228&s=gateway&sprefix=aws%E8%AA%8D%E5%AE%9A%2Caps%2C122&sr=8-1)
ウンコ大回転

# ウンコ大回転
まずはこれを見て欲しい

![unko.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/5ce4c65d-f67d-f71e-1fd3-9070b07c2b46.gif)

# これは何なのか

Twitter で「Hello, World!」なんて表示するより「うんこ」って表示した方が断然子供達楽しいだろ的な論説を見て、それはたしかにそうだ！と得心した結果出来た物である！

# 解説
## 設計画面

このウンコは Delphi 10.3.2 でノーコードで作りました。
設計時の画面はこんな感じ。
すでに子供が喜びそう！！！（個人の感想です）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/7f834068-18b1-5412-01a3-4ee73b56273c.png)
※背景が青いのは Transparent が True、つまりこのフォームは透過フォームでウンコが表示されているところ以外はフォームが存在しないことを示しています

ここの構造ビューを見ても解るとおり、[TFloatAnimation](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Ani.TFloatAnimation) / [TColorKeyAnimation](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Ani.TColorKeyAnimation) を使って制御しています。
これらの Animation コンポーネントから親となるレイアウトを制御しています。
あと、表示している「💩」は↓のように絵文字を利用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/0c021792-150b-5a49-494d-4c634268d31c.png)

ただ💩が表示されるだけだとちょっと寂しいなあと思ったので [TGlowEffect](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Effects.TGlowEffect) を付けて後光を表現しました。

また Animation コンポーネントだと [TextSettings.FontColor](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Graphics.TTextSettings.FontColor)は変更できないため [TFillRGBEffect](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Filter.Effects.TFillRGBEffect)を使ってフォントを塗りつぶし、その塗りつぶし色を TColorKeyAnimation で切り替えています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/8f105010-a436-3331-b5c0-c7f0782ac81f.png)

### TColorKeyAnimation

ここで、あまりメジャーではない [TColorKeyAnimation](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Ani.TColorKeyAnimation) を簡単に解説します。
TColorKeyAnimation は KeyFrame を指定できるアニメーションで、各キー間の値を滑らかに変化させてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/8ab6133d-90df-4de2-6778-f84704b41ee5.png)

keyFrame の最小値は 0.0 そして最大値は 1.0 です（単位はありません。0.0 → 1.0 を実際のアニメーション持続時間に比率で割り振ります）
この範囲であれば KeyFrame を自由に配置できます。
KeyFrame はこの Keys プロパティから設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/dd6e9b74-6e75-b1d4-b9fe-25c4d0e61dd5.png)

今回は虹色に変化させたかったので KeyFrame は 8 個設定しました。
7 個では無く 8 個の理由は 7 個目の紫から 8 個目の赤に変化させることで最初の 0 番目の赤に綺麗に繋げるためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/8e0cf531-ad07-3678-b7fb-19e9b815c7a3.png)

↓実際の設定はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/7869ae80-5e25-419b-bab6-f1cde995a927.png)

TFloatAnimation, TColorKeyAnimation の２つのアニメーション、そして TGlowEffect と TRGBFillEffect という２つのエフェクト、たったこれだけで一番上のアニメーションが制御されています。

# さいごに
このように Delphi を使うとコードを書かずにコンポーネントを配置するだけで動きのあるアプリケーションを簡単に作成できます。

でも！**ノーコードで書いたら、プログラミング学んでなくない！？！？**

でも！ Delphi みたいに簡単に動く物が作れるならプログラムの導入には最適ではないですかね！？

ということで興味が沸いた方は無料の Delphi 10.3 Rio Release 2 Community Edition を使ってみてくださいね！
なんとビックリなことに Windows, macOS, iOS, Android のアプリも作れちゃうし、なんならウンコ大回転を変更無しで Android でデプロイしたりできちゃうんですよ。真のワンソース開発環境といわれる由縁ですね！

■ Delphi Community Edition ダウンロード URL
https://www.embarcadero.com/jp/products/delphi/starter/free-download
Blocsのタブ付きコンテンツでアクティブなタブのスタイルを変更する

注:Mac用のWebデザインソフト「Blocs」の記事を書いていますが、現段階ではメモ代わりなので投稿内容はランダムです。（そのうち整理したい）

Blocsのパーツで「Tabbed Content（タブ付きコンテンツ）」があります。一つの画面で複数の画面（?）の内容を切り替えて表示させたいときによく使われますね。
さて、このタブ付きコンテンツですが、現在内容を表示しているタブのスタイルはクラスマネージャーで以下のクラスを指定します。
## タブ用のクラス
- .nav-tabs .nav-item.show .nav-link
通常のタブのスタイル（多分）
- .nav-tabs .nav-link.active
アクティブなタブのスタイル

## クラスマネジャーの開き方
画面右下のアイコンをクリック
![20190920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397881/3f6b3dc2-9b88-94e5-9e18-f2cd449e5460.png)

クラスマネージャーのウィンドウが開くので右上の + をクリック
![20190920_".png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397881/94d82f93-a3a2-5bdd-0560-821e08fa244f.png)

Class Nameに上記のクラスを入力し、Add Classをクリックします。
![201909203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397881/5eef6c8d-632f-7aef-7062-7ac4e90e8e00.png)

なお注意点として入力したクラスにスペースが含まれているとAdd Classをクリックした際、ダイアログが表示されますが、今回の場合は**必ず「No, leave spaces intact」をクリック**します。
Yes, replace spaces with dashes をクリックするとスペースがダッシュ（ハイフン）に置き換えられます。

> 参考
> [Tabs Background Color](https://forum.blocsapp.com/t/tabs-background-color/6381)
【日本語変数名で学ぶ】 音を鳴らすタイミングをawaitで管理する

よい人事とは何か考える日々を送っています。GENYAです。

動くもの
https://codesandbox.io/s/sound-promise-quwxm

## 課題感
[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) を使って音を鳴らす仕組みを作っていて
音のタイミングを測りながら調整するときにasync/awaitを使いたかったがnew audio().play()はpromiseを返していなかった。

##実装したこと
音のタイミング管理をpromiseベースで実装した。

タイミングを測る部分についてはタイミング調整時にわかりやすいよう羅列して書くようにする。

```js

// ----- sound.js
const 音源のURL =
  "https://raw.githubusercontent.com/wilf312/test/master/docs/trumpet1.mp3";

const オーディオAPI = new Audio(音源のURL);

export const 音を鳴らす = () => {
  return new Promise(resolve => {
    オーディオAPI.onended = resolve;

    オーディオAPI.play();
  });
};


export const 待つ = (time: number) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, time);
  });
};


// ----- index.js
import { 音を鳴らす} from "./sound";

// 実際のタイミングを制御する関数
const 実行 = async () => {
  await 待つ(1500);
  await 音を鳴らす();
  await 待つ(5000);
  await 音を鳴らす();
};

実行();

```

## まとめ
実行関数 部分に どのタイミングで音を鳴らすかの制御をまとめることで管理を楽にできるようになりました。
音を鳴らすこと自体が実装していて少なかったのですが、
今回触ってみて楽しかったので良かったら参考にしてみてください。
macOSにAWS CLIをインストールしてコマンド操作をするまでの初期設定

詳細はこちらのリンクをみてください
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-macos.html

##前提条件
pythonがインストールされていること
※macはデフォルトで、pyhtonがインストールされているので、アンインストールされてない限り必要ないと思います。。。

##AWS CLIをインストール
```terminal:terminal
$ pip install awscli
```

確認のためバージョン確認

```terminal:terminal
$ aws --version
```
##AWS CLIのconfig設定
以下のコマンドを入力すると、AWS CLI によって、アクセスキー、シークレットアクセスキー、AWS リージョン、出力形式の 4 つの情報の入力が求められます。

```terminal:terminal
//ユーザ名を指定する
$ aws configure --profile <ユーザ名>
AWS Access Key ID [None]: {アクセスキー}
AWS Secret Access Key [None]: {シークレットアクセスキー}
Default region name [None]: ap-northeast-1
Default output format [None]: json
```
ちなみに、--profile <ユーザ名>を省略するとdefault という名前のプロファイルに保存されます。

###プロファイルの確認

```terminal:terminal
//指定のプロファイル
$ aws configure list --profile <ユーザ名>

//デフォルト
$ aws configure list
```

以上で登録完了です！
過去のブランチにチェックアウトする方法

経緯としては、本番に反映したものにバグが発生してたので、少し前のブランチに切り替えた際にやりました！

###リモートブランチの履歴を取得するコマンド「git fetch」
調べたところ、git fetch は、リモートリポジトリから、ブランチの情報をローカルリポジトリに取得するためのコマンドらしいです。

なので、例えば、ローカルに欲しいブランチがなかった場合、以下のコマンドを行う。

```terminal:terminal
// リモートリポジトリ名がoriginのhogeブランチに関する履歴と参照を取得する
$ git fetch origin hoge
```
これで、ローカルリポジトリに情報を取得できたので、チェックアウトする。

```terminal:terminal
// ブランチ名をhogeにチェックアウト
$ git checkout hoge
```

基本開発の際はSourcetreeを使って作業してるので、こうやって実際に調べて、コマンドを打って理解するって大事ですね！！
router-linkで動的なURLを生成する

# router-linkで動的なURLを生成する方法

参考にしました。

http://tectek.net/?p=366

vue-router側

```js:router.js

{ path: '/tasks/:id', name: 'tasks', component: TaskEdit }
```

component側

```js:component.vue
// to=""ではなく、 :to="{{ }}"とする to=""では変数展開が出来ない
// nameとparamsを指定する

// 省略しているがv-forの中なので、
// paramに、task.idを渡すことで、それぞれのtaskへのリンクを生成出来る

<td><router-link :to="{name: 'tasks', params: {id: task.id}}" class="signup-link">task edit</router-link></td>
```

<img width="492" alt="スクリーンショット 2019-09-20 0.32.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287122/1ace1c56-9d08-b277-48bd-ea2ef8a9fdeb.png">

もし

```
/tasks/:id/edit
```
のようなURLにしたいなら、

```js:router.js
{ path: '/tasks/:id/edit', name: 'tasks', component: TaskEdit }
```
とすれば良い。
https://www.ritolab.com/entry/180

さらに、

```
/tasks/:id/edit/:hoge_id
```

リソース/:id/リソース/:hoge_id
という風にしたいなら、

1
router-linkのparamsに、id部分に合致するパラメータを指定

2
router.jsのpathへ
**リソース/id/リソース/hoge_id**
のように記述する

```js:component.vue
<td><router-link :to="{name: 'tasks', params: {id: task.id, edit_id: 10}}" class="signup-link">task edit</router-link></td>
```

```js:router.js
{ path: '/tasks/:id/edit/:edit_id', name: 'tasks', component: TaskEdit }
```

上記の場合、

**task/1/edit/10**

というリンクが生成されます。

<img width="618" alt="スクリーンショット 2019-09-20 7.46.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287122/fee7df1c-914d-782a-ec1d-8a23bd1f6bb2.png">
Windows Virtual Desktop(WVD)におけるWindows 10 Enterprise Multi-session,ver 1809の日本語化

#AzureでのWVD検証
満を持してMicrosoftがVDI製品を発表したとのことで、検証することにした。
何より価格がクソ安い。
さすがMicrosoft。。
が早速試練が降りかかる。

#Deployできない。。。

偉大なる↓のページの作者の手順に従ってプールをデプロイしようとするが何度やっってもできない。
https://www.cloudou.net/windows-virtual-desktop/wvd002/

必ず以下エラーで失敗する。

```
リソース操作が完了し、ターミナル プロビジョニング状態は 'Failed' です。
```

詳細を確認すると下記のようなエラーが発生していた。


"{\"status\":\"Failed\",\"error\":{\"code\":\"ResourceOperationFailure\",\"message\":\"リソース操作が完了し、ターミナル プロビジョニング状態は 'Failed' です。\",\"details\":[{\"code\":\"VMExtensionProvisioningError\",\"message\":\"拡張機能 'dscextension' を処理しているときに、VM がエラーを報告しました。エラー メッセージ: \\\"The DSC Extension failed to execute: <f:WSManFault xmlns:f=\\\"http://schemas.microsoft.com/wbem/wsman/1/wsmanfault\\\" Code=\\\"2\\\" Machine=\\\"localhost\\\"><f:Message><f:ProviderFault provider=\\\"Config provider\\\" path=\\\"%systemroot%\\\\system32\\\\WsmSvc.dll\\\"><f:WSManFault xmlns:f=\\\"http://schemas.microsoft.com/wbem/wsman/1/wsmanfault\\\" Code=\\\"2\\\" Machine=\\\"VDI05-0.test.XXXXXX\\\"><f:Message>Unable to check the status of the firewall. </f:Message></f:WSManFault></f:ProviderFault></f:Message></f:WSManFault>.\\nMore information about the failure can be found in the logs located under 'C:\\\\WindowsAzure\\\\Logs\\\\Plugins\\\\Microsoft.Powershell.DSC\\\\2.79.0.0' on the VM.\\\"。\"}]}}"


これを調査してみると↓のページに行き着いた。
https://stackoverflow.com/questions/39592408/fix-unable-to-check-the-status-of-the-firewall-of-set-wsmanquickconfig
https://support.microsoft.com/en-us/help/2697738/unable-to-check-the-status-of-the-firewall-error-message-when-you-run
https://tech.guitarrapc.com/entry/2014/02/10/204833?amp=1

結果から申し上げると、日本語のLangueagePackがイケてなくて日本語化に失敗しており、ホストプールデプロイの際にエラー起こしているらしい。

#回避方法
回避方法は以下の通り、***日本語化する前に、***
Powershellにて以下コマンドを実行してリモート管理の規則を作成する。

```powershell:Powershell
netsh advfirewall firewall add rule name="Windows Remote Management (HTTP-In)" dir=in action=allow service=any enable=yes profile=any localport=5985 protocol=tcp
```

また、以下コマンドを実行して、Firewallの規則を有効化させる。
本当は有効化させるコマンドではないんですけどね。。

```powershell:Powershell
Enable-PSRemoting -Force
```

成功すると以下のような表示が

```
PS C:\Users\WVDLocal> Enable-PSRemoting -Force
WinRM has been updated to receive requests.
WinRM service type changed successfully.
WinRM service started.

WinRM has been updated for remote management.
Configured LocalAccountTokenFilterPolicy to grant administrative rights remotely to local users.

PS C:\Users\WVDLocal>
```

その後日本語化
ちなみに何度やっても1903はEdgeがバグってしまって日本語化できなかった。
やり方が悪いのか。それともまだ作り込んでいる途中なのか。。
yum で Mozc をインストールできるようになった

## CentOS で Mozc
従来、 Mozc を yum でインストールできるリポジトリはなかった。
いつの間にか、EPEL リポジトリから Mozc をインストールできるようになっている。
CentOS 7.7 になったタイミングで追加された...？

```bash
$ cat /etc/redhat-release
CentOS Linux release 7.7.1908 (Core)
$ yum list installed | grep mozc
ibus-mozc.x86_64                          2.17.2322.102-1.el7        @epel      
mozc.x86_64                               2.17.2322.102-1.el7        @epel    
```

## 従来はどうしていたか
難しそうなので、諦めてAnthyを使ってた。

参考記事：https://qiita.com/TANATY/items/8c0c17d54ab81fd1b491
Thinking Forth 適当訳


# Thinking Forth 適当訳 

成果物はこちら
https://thinking-forth-ja.readthedocs.io/ja/latest/

なぜかsphinxにコンバートしたかったのでsphinx形式です。

githubは上記readthedocsから辿ってね。githubにはcloneしてkindle形式作る方法も書いてあります。

# どんな本？
1980年代に翻訳済の「FORTH入門」(原題 Starting FORTH)と対になると言われながら
いままで翻訳がでてきませんでした。2000年代になって電子版はPDSとなったので、
その電子版(LaTeX版)を元に翻訳を行いました。

# 注意
2000年代の電子版は「初版(1984年)に忠実に」と言う方針で行われたため、
内容も追加のpreface以外当時のままとなっています。

できれば1994年版まえがきから読んでやってください。著者は海より深く反省しています。

全般的に「大昔はそうだったよなぁ」というおおらかな気持ちで読んでいただけると幸いです。

# Authors
Leo Brodie wrote Thinking Forth in 1984.
Since the book went out of print now the second time (due to FIG folding up - FIG did the reprint),
he allowed to publish Thinking Forth as electronic book under a Creative Commons license (attribute, non-commercial, share-alike).

# References

## Thinking Forth Project

[http://thinking-forth.sourceforge.net/](http://thinking-forth.sourceforge.net/)

## SOURCEFORGE Thinking Forth

Home/Browse/Development/Software Development/Thinking Forth

[https://sourceforge.net/projects/thinking-forth/](https://sourceforge.net/projects/thinking-forth/)
PowerShellの闇 - 配列の戻り値編

# 突然ですがクイズです

csvのデータ件数を数えるPowerShellコマンドを実行します。
2行のcsvファイルに対して実行したところ、`2`が結果として表示されました。（先頭の`AAA,BBB`はcsvヘッダです）

```text:test.csv
AAA,BBB
1,2
3,4
```

```powershell:PowerShellコマンド
PS C:\Users\hoge> (import-csv test.csv).count
2
```

　　
では、同じPowerShellコマンドを次のようなデータ1件のcsvファイルに実行したらどうなるでしょうか

```text:test.csv
AAA,BBB
1,2
```

# 答え

**何も表示されません**

```powershell
PS C:\Users\hoge> (import-csv test.csv).count
PS C:\Users\hoge>
```

# いいたいこと
## 原因の解説
PowerShellのコマンドは結果の個数によって型が変わるものがあります。たとえば次のようになることがあります

|結果の個数|型|例|
|---|---|---|
|2個以上|配列|@(1,2,3)|
|1個|要素単体|1|
|0個|$null|$null|

2個以上の時は配列なので`.count`で個数が取得できますが、1個の時は配列ではなく要素単体です。

1個の時は要素のcountプロパティへアクセスし、countプロパティがないと結果が`$null`となってしまいます。

データ1件の`test.csv`では`(import-csv test.csv).count`が`$null`になってしまうのが、
何も表示されなかった理由です。

なお、この挙動になるかどうかはコマンド次第です。`import-csv`や`get-aduser`なんかでは起きます。
`ls`は要素が`count`プロパティを持っていてかつ`1`を返すので、
結果が1個でも`.count`で`1`を返してくれます

ちなみに`$null.count`はエラーではなく`0`になります。なので結果が0個なら`.count`で`0`が表示されます

## 回避策
世間の記事では`@()`で包んで配列にするのが多いようです

```powershell
@(import-csv test.csv).count
```

これだと確かに結果が1個の時は配列にできますが、
結果が2個以上の時は「配列の配列」になってしまい`.count`が`1`を返すと思うかもしれません。

しかし、PowerShellは「配列の配列」は配列に変換するので、問題ありません。（~~むしろそのPowerShellの仕様が問題な気も~~）
`@(@(1,2,3))` => `@(1,2,3)`

別の方法として個数を数える`measure`を使うこともできます。
配列だろうとオブジェクトだろうと`$null`だろうとうまく数えてくれます

```powershell
(import-csv test.csv | measure).count
```
`| measure`は配列の個数が多いと重くなるそうですが、そんなに多くない時は問題ありません。


# さらなる闇
test.csvの中身をヘッダのみのデータ0件にしてみます

```text:test.csv
AAA,BBB
```

データ0件のcsvでは確かに読み込み結果は`$null`のようです...

```powershell
PS C:\Users\hoge> (import-csv test.csv) -eq $null
True
PS C:\Users\hoge> $csv = (import-csv test.csv)
PS C:\Users\hoge> $csv -eq $null
True
PS C:\Users\hoge> $csv.gettype()
null 値の式ではメソッドを呼び出せません。
発生場所 行:1 文字:1
+ $csv.gettype()
+ ~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (:) []、RuntimeException
    + FullyQualifiedErrorId : InvokeMethodOnNull
```

しかし`@()`で包むと挙動が`$null`と違います。
**`$null`のようで`$null`では無い何か**のようです・・・

```powershell
PS C:\Users\hoge> @($csv).count
0
PS C:\Users\hoge> @($null).count
1
PS C:\Users\hoge> $a = $null
PS C:\Users\hoge> @($a).count
1
```

気が向けば次回でこのあたりの記事も書きます

# 参考
[PowerShellのCountプロパティについてあれやこれや](https://blog.shibata.tech/entry/2015/11/06/212944)
[そろそろ PowerShell の一次配列の罠と回避について一言いっておくか](https://tech.guitarrapc.com/entry/2015/09/05/012733)

# 補足
以上は PowerShell 5.1.18362.145 で動かしています。バージョンによって挙動が変わる部分もあるようなのでご注意ください
Ruby2.6の'oneshot coverage'を使用して本番稼働してるRailsアプリケーションのデッドコードを見つける

# Ruby2.6の'oneshot coverage'を使用して本番稼働してるRailsアプリケーションのデッドコードを見つける

この記事では、Ruby2.6から追加された`oneshot coverage`を使用して、
本番稼働しているRailsアプリケーションのカバレッジを取得してデッドコードを見つける手順を説明します。

## oneshot coverageとは
Ruby2.6から標準ライブラリ`Coverage`の`start`メソッドに引数`oneshot_lines: true`が指定する事で指定したファイルの中から行単位で実行の有無が集計できるというものです。

詳細は機能ページを確認して下さい。
https://bugs.ruby-lang.org/issues/15022
https://docs.ruby-lang.org/en/master/Coverage.html

## Railsアプリケーションに適用する

### 1. gem 'oneshot_coverage'のインストール
`gem 'oneshot_coverage'`を使います。
See: https://github.com/riseshia/oneshot_coverage

railsアプリケーションの場合、リクエスト単位で実行されたファイルと行毎の実行の有無を計測してくれます。

```ruby:Gemfile
gem 'rails'
# NOTE: 内部で`defined?(Rails)`を使用しているのでrailsの後に記述する
gem 'oneshot_coverage'
```

### 2. `OneshotCoverage::Logger::FileLogger`をrequireする
今回は計測したカバレッジをログ出力したいので、`OneshotCoverage::Logger::FileLogger`を使用します。
その為にインストールしたgemを編集する必要があります。

`$ bundle open oneshot_coverage`して、`lib/oneshot_coverage.rb`に以下の行を追加します。

```diff
require "coverage"
require "digest/md5"

require "oneshot_coverage/logger/null_logger"
+ require "oneshot_coverage/logger/file_logger"
require "oneshot_coverage/railtie" if defined?(Rails)
```

### 3. `oneshot_coverage`の設定ファイルを作成する

`config/application.rb`か、`confing/initializers/oneshot_coverage.rb`を作成して設定値を記述します。
See: https://github.com/riseshia/oneshot_coverage#configuration

今回はログに出力したいので、以下の様に設定します。

```
logfile_path = 'log/oneshot_coverage.log'
OneshotCoverage.configure(
  target_path: Rails.root,
  logger: OneshotCoverage::Logger::FileLogger.new(logfile_path),
  emit_term: nil,
)
OneshotCoverage.start
```


ログファイルは、rails rootの`log/oneshot_coverage.log`にファイルが作成され、書き込みが行われます。

### 確認

`rails server`でサーバーを起動してリクエストを送ると、`log/oneshot_coverage.log`にログが出力される事が確認できると思います。
初心者が1週間でUnityシェーダーを学んでみた

# はじめに
シェーダーについて何もわからない初心者が1週間勉強して，
わかったこと・勉強法などをまとめました．

※シェーダーについての説明はしません．
# やったこと
基本的に「Unityの教科書」で有名な北村愛実様のブログを読んで，動かしていました．
7日間でマスターするUnityシェーダ入門
http://nn-hokuson.hatenablog.com/entry/2018/02/15/140037

わからないことは適宜Google先生に質問
公式ドキュメントは必読ですが，知りたいことをピンポイントで検索するのには向いていないかも．

# ブログの感想
ブログめっちゃわかりやすい！！！！！！！！！！
シェーダーどうやって勉強しようかなと迷っている初心者の方は，本を買う前に絶対やってみた方がいいです．

プロジェクトの設定の仕方からシェーダーのアルゴリズムまで，
誰が読んでもわかるようなやさしい言葉で解説されています．

ただ，読むだけでは身につかないため，ハンズオン形式で動かしてみることが大切です．

シェーダーでは，「何だこの数字」「どっからこの計算出てきた」みたいなことがあるので，
その場合は自分でパラメータをいじってみるのがいいと思います．
Unityではプロパティーをエディタ上で変えられ，結果も簡単に確認できます．

# シェーダーを学んでみた感想
む．むずかしい．．．
というのが正直な感想です．
基本的な書き方は，その他のプログラミング言語と遜色なく理解できるのですが，
いざ「こんなシェーダー作りたい」と思っても計算式がなかなか思いつきません．

また，他の人のコードを読んでも，「どうしてその計算式になったのか」は記されていないので，
理解はできてもゼロから自分で書く力にはなりにくい印象です．

でも，，，
**楽しい**です！！！
なんたって，Unityでの表現が圧倒的に広がりますからね．
ゼロからシェーダーを書けなくても，公開アセットのシェーダーをちょこっといじるだけでも結構変わります．
あと，勉強する前までは「僕シェーダーはわからないんです」っていう苦手意識がありましたが，
たった1週間勉強するだけで，苦手意識も薄れ，ツイッターで回ってくるシェーダーの凄さも理解できるようになりました．

特に，就活中の学生はシェーダーの話振られてもある程度答えられるようになりますし，
1週間だけでもシェーダーに捧げてもいいのではないでしょうか．

# 今後の勉強方法
- パラメーターをいじったり，シェーダーを掛け合わせてみたり，とにかくてきとーにいじってみる
- Shadertoy(https://www.shadertoy.com) のGLSLをUnityで再現してみる
- シェーダーグラフの本読みたい

# 参考になるサイト
Unity ShaderLab ノート　(https://qiita.com/nmxi/items/bfd10a3b3f519878e74e)
ShaderLabについてまとめられており，シェーダーを書くとき開いておくと便利です．

YTTMWORK (https://yttm-work.jp/shader/shader_index.html)
レンダリングパイプラインやHLSLの基礎がわかりやすくまとめてあります．

Unityのトゥーンシェーダについて調べてみた　(http://tips.hecomi.com/entry/2015/04/25/214050)
Unity付属のトゥーンシェーダーについて解説されています．

The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe (https://thebookofshaders.com/00/)
多くのシェーダーが載っており，見てるだけでも楽しいです．
初ポートフォリオについて　FWなし開発


# 概要

## 自己紹介
初めまして、ユズのすけです。Qiita初投稿です。
未経験からエンジニアを目指して、勉強中です。


## 学習の過程
２月半ばから、プログラミングの勉強をはじめマイペースで学習を続けています。
ポートフォリオは、２つめです。

１つめのポートフォリオはシフト表アプリを作っていました。
しかし、その時の自分の技術では難しく
さらに誤ってデータを消してしまいました。そのため途中で諦めてしまっています。
いつかリベンジしたいです！
** （当たり前ですが、皆さんは絶対バックアップをとってください）**

## 作ったもの
１作目の失敗経験から、もっと簡単でシンプルなモノから始めることにしました。
今回取り組んだアプリは機能を抑えました。
それでも開発はなかなか苦労しましたし時間もかかりました。
このくらいの難易度で初めて良かったと今は思っています。

ポートフォリオの解説
<iframe width="560" height="315" src="https://www.youtube.com/embed/j1lh3vBh-fQ?si=jPDPdLFqYrjsdgPa" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


デプロイ先のURLを貼ろうと思いましたが、今回ログイン機能を作らなかったので、ネット上にアップロードするのは、あまりよくないんじゃないかと考え、動画での紹介にします。

後に反省点の項目でも、お話ししますがログイン機能は絶対入れた方が良いと思います。


>制作環境

>- 動作確認 GoogleChrom バージョン(77.0.3865.75)
- ローカル環境 MAMP 5.3 /MySQL 7.3.1
- PHP HTML5 CSS3 Javascript で制作



## 電子ノートについて
#### 制作しようと思った理由
- 現在の職場では、A4のノートを使った伝達方法を採用しているのですが、これをアプリ化する事で、現在の紙媒体形式よりも、入力の手間、見やすさ、検索の速さや、容易さ、同時観覧、同時入力などのメリットがあり、時間のロス、労働力を減らすことなどが出来、その部分を患者さんと向き合う時時間に当てられるなど、恩恵があるのではないかと思い制作を決意しました


#### 主な機能
1. 伝達したい内容の入力の補助機能
2. 伝達内容の中で何度も重複して使用されるであろう、職員氏名、患者氏名、職種をDBに登録し、DBから引き出す事で入力を簡素化
3. 登録された伝達内容を、職員ごと、患者ごと、全体伝達事項の３つに分類して検索する機能
4. 支持された内容を、１クリックで達成する事ができる機能


#### 工夫した点
1. エラーの把握の為に、error_logにデバックログ関数を作って、自身でエラー箇所を把握しやすくしました。デバックログの関数はスイッチで操作できるようにして、デバックを行わない時は、ログに表示されないように工夫しました
2. エラー時や動作成功時のメッセージの出し方を複数作り、色んな表現の練習に努めました
3. Ajaxを使い、アプリの動作の快適性、動作の高速化を目指すと同時に、Ajaxの使用方法を使い方を学びました
4. jsやCSSアニメーションを使う事で、言語への理解を深めながら、見た目の良さをできる限り向上させるように努めています
5. オブジェクト指向を一部に取り入れる事で、コードの保守性を高くする事を意識し、オブジェクト指向のコードの書き方の練習に努めた
6. 学んだ技術をなるべく多く使いながら、難しいモノを目指しすぎないように、シンプルなものなるよう作りました


#### 制作時のスキル
- CSS3
- HTML5
- PHP
- MYSQL
- JavaScript
- JQuery




### 課題
1. キーワード検索の実装
2. jsを使いすぎたのか少し重いため、CSSアニメーションに置き換えて動作を高速化したい
3. ログイン機能を入れる
4. 複数人の情報登録を一括で登録できるようにする
5. ページング機能が、うまく動いてないので修正する