OmniAICreator/Qiita-1.07M huggingface dataset:
Ubuntu で Chrome の古いバージョンを使う方法

Chrome の 84　あたりから、クロスサイト　クッキーが簡単には使えなくなりました。その為に、サイトの表示が変わることもありました。
それを、確認する為に、クロスサイト　クッキーを受け付けていた Chrome 80 で確認する必要が出てきました。
次のサイトから、Chrome 80 をダウンロードします。
[Google Chrome Older Versions Download (Windows, Linux & Mac)](https://www.slimjet.com/chrome/google-chrome-old-version.php)
64-bit deb for Ubuntu/Debian から、80.0.3987.149　を選びます。
ダウンロードすると、
google-chrome-stable_current_amd64.deb という名前になります。
そこで、
google-chrome-stable_80_amd64.deb　にリネームします。

今使っている Chrome のアンインストール

```bash
sudo dpkg --purge google-chrome-stable
```

Chrome 80 のインストール

```bash
sudo dpkg -i google-chrome-stable_80_amd64.deb
```

インストールした Chrome のバージョン

```text
chrome://settings/help
```

![chrome_settei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/be55b23f-b1d5-0e70-e29f-ceed77e82eb1.png)
【Dart】リスト内の条件分岐で何も入れないようにする方法

初投稿です。なにか不備などがありましたらコメントください! m(__)m
※Dartのバージョンは2.12.3です


❌ 三項演算子での条件分岐
---

```dart:三項演算子
void main() {
  final flag = false;
  final list = [
    flag ? 'foo' : null,
  ];
  print(list);
}

//→ [null]
```


三項演算子でリストの中で条件分岐をする場合、条件がどちらになっても値が入ってしまいます。

⭕️ リスト内のifでの条件分岐
---


```dart:構文
[if (条件) foo]
```

Dartでは↑の書き方ができ、条件がtrueの場合に限りfooがリストに入り、falseの場合だと何も入れない、といった動きができるようになります。

<br/>


```dart:リスト内のif
void main() {
  final flag = false;
  final list = [
    if (flag) 'foo',
  ];
  print(list);
}

//→ []
```
これで条件分岐で何も入れないようにすることができました🎉


Flutterでの使用例
---
ColumnやRowなどのchildren内でnullを使わずに、ある条件のときだけ表示する、といった事ができるようになります。

<p class="codepen" data-height="341" data-theme-id="light" data-default-tab="js,result" data-user="7wataaa" data-slug-hash="xxgBZVm" style="height: 341px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="xxgBZVm">
  <span>See the Pen <a href="https://codepen.io/7wataaa/pen/xxgBZVm">
  xxgBZVm</a> by 7wataaa (<a href="https://codepen.io/7wataaa">@7wataaa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
mGearを使ってリグを作ってみる

Mayaのプラグイン、mGearの使い方を学習したんで、備忘録を付けていきます。
この記事を読めば、とりあえずmGearを使ってリグを作ることができます。

## mGearのインストール方法

mGearのインストール方法はmGearのインストール方法はこちらの[mGear3.7.8がリリースされたのでMacにインストールしてみた。【備忘録】 ](https://qiita.com/__mittsu__/items/55d9bf134f7a92a92bdd)の記事を参考にして下さい。

https://qiita.com/__mittsu__/items/55d9bf134f7a92a92bdd

## 『shifter Guide Manager』ウィンドウからリグを作る

mGearはガイドを作り→リグを作る、という順番で作業していきます。

細かい設定は色々ありますが、とりあえずリグを作ってみましょう。

1. mGear>shifter>Guide Manager
    『shifter Guide Manager』ウィンドウが出てくる
2. 『arm_2int_01』を選択>Draw Componentをクリック
    arm_2int_01のガイドが出来上がります。
3. アウトライナから『guide』ノードを選択>mGear>shifter>Build From Selection
    2で作ったガイドにそって、リグが出来上がります。

とりあえずリグっぽいのは出来ました。
【ガイドを作って、リグを作る。】
mGearの基本的な使い方はこんな感じです。

## ガイドを編集してリグを作る

今度は『leg_2int_01』を使い足のリグを作ってみます。

1. 上記1、２の手順でガイドを作る
2. 『leg_C0_ankle』、『leg_C0_knee』を動かし、ガイドを編集
3. 上記３と同様に、guideを選んだ状態でBuild From Selectionをクリック

編集したガイドの通り、リグが生成されます。
このようにガイドを作り、編集することで、任意の場所にリグが作れます。

## 作ったガイドをシンメトリーコピーする

今度はガイドを作り、反対側に反転コピーします。

1. 上記の手順で『leg_2int_01』のガイドを作る
2. アウトライナから『leg_L0_root』を選択し、transXに『１』を入力
   向かって右方向にちょっとだけ動かす感じです。
3. 『leg_L0_root』を選択>mGear>shifter>settings
   ガイドの設定ウィンドウが現れます。
4. Main Settingsタブの『side』を『center』から『Left』に変更
5. 『leg_L0_root』を選択>mGear>shifter>Duplcate Sym
   ガイドが反転コピーされます。
6. guideを選択し、Build From Selectionでリグを作る
   ガイドにそったリグが出来ます。

こんな感じでガイドを反転コピーさせ、左右のリグを作っていきます。

## ガイドで階層を組み人形のリグを作る

今度はガイドに親子関係を作り、よりリグっぽくしていきます。

1. 『shifter Guide Manager』から『spin_FK_01』のガイドを作る
2. アウトライナから『guide』を選んだ状態で『leg_2int_01』のガイドを作る
    guideノードの下に『leg_L0_root』が出来ます。
3. ２と同様に腕や首のガイドも作り、体の階層を作っていきます。
4. guideを選択し、Build From Selectionでリグを作る

このように個々のパーツを組み合わせ、ガイドに親子関係を作ることで、階層構造を持ったリグが作れます。

## 所感：ガイドの操作を覚えたら、とりあえずリグは作れる

- ガイドを作る
- ガイドを編集する
- ガイドを組み合わせる

これらの基本的な操作ができれば、
『mGearを使って、とりあえずリグを作る』
ってことは出来ます。

後はパーツの特徴や設定方法を理解すれば、mGearによるリグ作成は問題ない気がします。

mGearはリグを作れる便利ツール、くらいの認識でしたが、思ってる以上にスゴいツールなんだと理解しました。

今までのリグ作業が何だったのかと思うくらい便利ですね。
作業時間も短くなるので、アニメーションやモデリングといった、よりクリエイティブな部分にリソースを割けそうです。

モジュラーリギングって考え方、もっと業界に広まるといいですね〜
Flexboxを自由に操ってジョージア国旗を作ってみました。

Flexboxを使って国旗を作る
ジョージア国旗

![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/12d1ef7a-ade6-b015-7bea-cc31e96f7263.png)




目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
[Css Flexboxのチートシート] (https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　ジョージア国旗を調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```html

<div class="georgia">
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>   
  </div>
```

```css
.georgia {
  width: 500px;
  height: 300px;
  background-color: red;
  border: 1px solid black;
  margin: 200px auto;
}

.gia {
  width: 220px;
  height: 125px;
  background-color: pink;
}

```

この状態で一旦ブラウザで確認　↓

![スクリーンショット (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/4436506f-0566-c218-9088-a02181360f7e.png)



```css

.georgia {
  width: 500px;
  height: 300px;
  background-color: red;
  border: 1px solid black;
  margin: 200px auto;

  display: flex; ※追加
  flex-wrap: wrap;　※追加
  justify-content: space-between;　※追加
  align-content: space-between; ※　追加
}

```

`display: flex;`を使って、４個の`<div>`を上下左右に納めました。



![スクリーンショット (68).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/dd55d1b3-2d83-4960-c08a-aa664593a7eb.png)


```css
.georgia1 {
  width: 40px;
  height: 20px;
  background-color: orange;
}

.georgia2 {
  width: 20px;
  height: 80px;
  background-color: aquamarine;
}
```

<font color="pink"> ピンク部分<font>に
<font color="red"> 赤い十字<font>を作っていきます　↓

```css

.georgia1 { ※追加
  width: 40px;
  height: 20px;
  background-color: orange;
}

.georgia2 {　※追加
  width: 20px;
  height: 80px;
  background-color: aquamarine;
}
```

ピンクのボックスに３個の`<div>`の箱を作ります。
解りやすいように色を付けています

![スクリーンショット (71).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/3cdabe7c-004b-dab7-f5aa-cd8bcf86b95c.png)

上記の３個に`display: flex;`を付けます


```css
.gia {
  width: 220px;
  height: 125px;
  background-color: pink;

  display: flex;　※追加
  justify-content: center;　※追加
  align-items: center;　※追加
}
```

![スクリーンショット (72).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/f26da39f-c9c8-4637-706f-4dd9f58626d0.png)

最後に、色を整えてあげたら完成です。

![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/3a522eb5-d12b-c241-efa3-33e561c1165c.png)


##まとめ
大きい『赤十字』を作成するのに、最初は赤い十字を作りましたが
「小さい赤十字」を上手に作成できなかったので、
赤をベースに白い箱を作り、そこに`Flexbox`をつけました。

今回は以上です！
ありがとうございました
cssでファミコン風表現

google fontsに日本語書体のバリエーションが8種類も増えており、その中にドット風のテキストも含まれてました。

今までドット文字を使う場合はフォントをダウンロードし、読み込んで使うことがほとんどだったのですがgoogle fontsに追加されたおかげで気軽にドット文字を使うことができるようになり、いくつかcodepenで使用してみました。

## メニュー
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="cahid0814" data-slug-hash="rNxOrWa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="dot menu ">
  <span>See the Pen <a href="https://codepen.io/cahid0814/pen/rNxOrWa">
  dot menu </a> by cahid (<a href="https://codepen.io/cahid0814">@cahid0814</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## テキスト
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="cahid0814" data-slug-hash="WNRmrKd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="dot text">
  <span>See the Pen <a href="https://codepen.io/cahid0814/pen/WNRmrKd">
  dot text</a> by cahid (<a href="https://codepen.io/cahid0814">@cahid0814</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 触ってみた感想
- importするだけなので気楽に使える
- ちょこっと装飾するだけで雰囲気が出る
- [Fontsworksさんの記事](https://fontworks.co.jp/news/2021/01/15/9531/)を見ると他にも色々なフォントが追加されてるので覚えておくと提案できそう
[Rails6] 共通処理をbefore_actionにまとめる

#概要
コントローラのなかで処理を共通化したい場合の方法をして`before_action`を使うことを学んだので、
その方法をメモします。


#方法
* idからDBを一つ取得する処理を共通化する

###privateに共通化する処理を記述

```.rb
  private
  def set_question
    @question = Question.find(params[:id])
  end
```

###before_actionを記述

```.rb
class QuestionsController < ApplicationController
  before_action :set_question
end
```

###実行するアクションを指定したい場合は`onlyオプション`を追加で記述

```.rb
class QuestionsController < ApplicationController
  before_action :set_question, only: [:show, :edit, :destroy, :update]
end
```

###実行しないアクションを指定する場合は`exceptオプション`を追加で記述

```.rb
class QuestionsController < ApplicationController
  before_action :set_question, except: [:index]
end
```


#参考文献
[【Rails】before_actionの使い方を徹底解説！
](https://pikawaka.com/rails/before_action)
Selenium ボタンの表示文字列でクリック

#1.ボタン名(ボタンの表示文字列)でクリック

CssSelectorを使用すると、forループ等をせずに表示文字列等でエレメントを見つけられます。

```HTML.html
    <input type="submit" value="登録" />
```

```C#.cs
    driver.FindElement(By.CssSelector("input[value='登録']")).Click();
または
    driver.FindElement(By.CssSelector("input[value='登録']")).Submit();
```

```Java.java
   driver.findElement(By.cssSelector("input[value='登録']")).click();
または
   driver.findElement(By.cssSelector("input[value='登録']")).submit();
```

```Python.py
    driver.find_element_by_css_selector("input[value='登録']").click()
または
    driver.find_element_by_css_selector("input[value='登録']").submit()
```

記述方法は異なりますが、XPathで同じことができます。

```C#.cs
    driver.FindElement(By.XPath("//input[@value='登録']")).Click();
または
    driver.FindElement(By.XPath("//input[@value='登録']")).Submit();
```

```Java.java
   driver.findElement(By.xpath("//input[@value='登録']")).click();
または
   driver.findElement(By.xpath("//input[@value='登録']")).submit();
```

```Python.py
    driver.find_element_by_xpath("//input[@value='登録']").click()
または
    driver.find_element_by_xpath("//input[@value='登録']").submit()
```

XPathの参考：[Seleniumで要素を選択する方法まとめ - Qiita](https://qiita.com/VA_nakatsu/items/0095755dc48ad7e86e2f)
【Mac版】クリップボードに一瞬で日時を入れる方法

@tatsubeyさんの記事「[クリップボードに一瞬で日時を入れる方法](https://qiita.com/tatsubey/items/25856a61a2e8b3942ca5)」に触発され、Macでも欲しいなと思い作りました。


## コマンド

コマンドとしては下記の通りで、現在時刻が`yyyymmdd_hhmmss`形式でコピーされる。`date`コマンドに指定する引数で書式を変えることができる。

```shell
echo -n `date +"%Y%m%d_%H%M%S"`|pbcopy
```

これをnowという名前でalias定義する。

```shell
alias now='echo -n `date +"%Y%m%d_%H%M%S"`|pbcopy'
```

こうすると、ターミナルで`now`と打てば、現在時刻がコピーされるので、`⌘V`（ペースト）で取り込める。

でも、これだと、いちいちターミナルを起動する必要があるので、ショートカットキーに割り当てることにする。

## ショートカットキーの割り当て

次の2ステップが必要です。
 1. Automatorで新規アクションを登録する
 2. 登録したアクションにショートカットキーを割り当てる

### 1. Automatorで新規アクションを登録する

まず**Automatorを起動**する。アプリケーションに見当たらないので検索した方が早い。
![スクリーンショット 2021-04-26 14.30.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/8e438cb1-26e1-93d5-f822-2fb5345a7e63.png)

**新規書類**を選択する
![スクリーンショット 2021-04-26 14.30.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/2e235ac7-baa9-2c9d-48a5-2593c2458618.png)

**クイックアクション**を**選択**する
![スクリーンショット 2021-04-26 14.31.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/fc903ceb-a8ca-df22-9eb2-44a96bc42ed4.png)

「**スクリプト**」で検索し、「**シェルスクリプト実行**」を右側のペインにドラッグ＆ドロップする。
![スクリーンショット 2021-04-26 14.31.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/2792e919-3b34-707a-eaf9-96726091f3fb.png)


「**ワークフローが受け取る項目**」は「**入力なし**」を選び、実行するコマンドに

```
echo -n `date +"%Y%m%d_%H%M%S"`|pbcopy
```
を指定する。
![スクリーンショット 2021-04-26 14.12.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/a4c810b6-ec51-f52e-59ab-3e3c63450717.png)

`⌘S`(保存)で任意の名称で保存する。ここでは`now`と指定した。
![スクリーンショット 2021-04-26 13.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/235612a6-0deb-8a5c-69a5-b7e69cfd3bf2.png)

以上で、Automatorのアクションの登録が完了した。
次は、これにショートカットキーを割り当てる。

### 2. ショートカットキーの割り当て

システム環境の「**キーボード**」を選択する
![スクリーンショット 2021-04-26 14.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/83a3bdd3-f262-063f-bfdc-f7da5d744b9c.png)

「**ショートカット**」タブを選択し、左ペインで**サービス**を選択する。
![スクリーンショット 2021-04-26 15.00.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/c4c7fb88-2fe1-75ef-7ee5-d5361c053f7b.png)
右側のペインで`now`を探し、チェックを入れ、任意のショートカットキーを割り当てる。
![スクリーンショット 2021-04-26 13.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/0d685279-16ea-b965-c261-9ca35b306cb8.png)
この例では`⇧F1`を指定した。指定するキーコンビネーションによっては上手く機能しない場合があるので、何パターンか試して欲しい。
![スクリーンショット 2021-04-26 13.58.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/cf55e8a3-2519-5ace-704e-fecf7ad143c9.png)

以上でショートカットキーの割り当てが完了した。

これで、指定したショートカットキーで現在時刻がコピーされ、`⌘V`（ペースト）で取り込めるはずである。

## 余談

BetterTouchToolユーザの方なら、BTTでショートカット呼び出しを定義した方が早いかもしれません。


以上
WebページタイトルとURLを一発でコピーできるBookmarklet

個人的によく使うBookmarkletの紹介です。

出来ること： 現在表示しているWebページのタイトルとURLをポップアップしてくれて、コピペできる。
誰かに参考ページを紹介する際になどにURLだけ貼るとぶっきらぼうな感じになりますが、タイトルをつけるとわかりやすくなったりします。

### コード：
```
(function() {
    window.prompt("Title+URL", document.title + "\r\n" + document.URL);
})();
```

### Bookmarklet用に改行をなくして、プロトコルとして*javascript：*を追加:
```
javascript:(function(){window.prompt("Title+URL",document.title+"\r\n"+document.URL);})();
```
ブックマークバーにある適当なブックマークのURLを上記に入れ替え、そのブックマークボタンをクリックすると動作するようになります。

こんな感じで動きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490870/c447075a-a93d-692c-46a0-bb2d7ea4d563.png)


一応、タイトルとURLを改行で分けて２段になるようにしてあります。

こんな感じで。

zamaezaaa - Qiita
https://qiita.com/zamaezaaa
Git チェリーピックする 個人メモ

# 目的

- チェリーピックの方法を個人メモ的にまとめる

# 方法

- コミットをピックしてきたいブランチに移動する。
- 下記コマンドを実行してチェリーピックを行う。

    ```terminal
    $ git cherry-pick ピックしたいコミットID
    ```
Node - Koa - Typescript Project の始め方

# はじめに
業務で`Koa`を使うことになったので、[Githubのサンプル](https://github.com/javieraviles/node-typescript-koa-rest)に沿って勉強していきます。

# Node - Koa - Typescript Project の始め方

## サンプルをクローン
```
mkdir sample-pjt && cd sample-pjt
git clone https://github.com/javieraviles/node-typescript-koa-rest 
cd node-typescript-koa-rest
yarn
```

## ローカルで開発する場合の微修正
SSLの説明で書かれている通り、`server.ts`の微修正が必要です。

```server.ts
...

createConnection({
  type: 'postgres',
  url: config.databaseUrl,
  synchronize: true,
  logging: false,
  entities: config.dbEntitiesPath,
  ssl: config.dbsslconn, // if not development, will use SSL
  // ↓この中身をコメントアウトする
  extra: { 
    // ssl: {
    //   rejectUnauthorized: false, // Heroku uses self signed certificates
    // },
  },
})

...
```

また、`.example.env`を`.env`に修正します。

## DBコンテナをホスト
portが被るので、postgresアプリを起動している場合は、コンテナを立ち上げる前に停止しておきましょう。

```
docker-compose up 
```

## ローカル開発スタート
```
yarn watch-server
```

## DBの動作確認
とりあえずmigrationが成功していることがわかります。

```
docker-compose exec db psql -U user apidb

apidb=# \dt
       List of relations
 Schema | Name | Type  | Owner 
--------+------+-------+-------
 public | user | table | user
(1 row)

apidb=# select * from "user"; #ちゃんと"user"にしてくださいね。一応。
 id | name | email 
----+------+-------
(0 rows)
```

また、`http://localhost:8080/`にアクセスしてブラウザ上で確認することもできます。
![スクリーンショット 2021-04-27 20.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/1d066561-1ae9-7f10-ede5-0cea68a3fed5.png)


##JWTの設定
説明に書いてある通り、Bearerトークン（下記）を設定してリクエストします。

```
Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEiLCJuYW1lIjoiSmF2aWVyIEF2aWxlcyIsImVtYWlsIjoiYXZpbGVzbG9wZXouamF2aWVyQGdtYWlsLmNvbSJ9.rgOobROftUYSWphkdNfxoN2cgKiqNXd4Km4oz6Ex4ng
```
`https://jwt.io/#debugger-io`でトークンの中身を見ることもできます。

![スクリーンショット 2021-04-26 19.41.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/eb55a356-4ea0-de37-d08f-2fdfba2de272.png)


##POSTMANでの動作確認
![スクリーンショット 2021-04-26 17.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/044788ef-c7b2-a27b-523e-076eb5729045.png)
![スクリーンショット 2021-04-26 17.29.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/30a7e1fe-27a8-1fe9-1eec-dafa6c230875.png)


##SwaggerでAPIのドキュメントを見る
`http://localhost:3000/swagger-json`にAPIドキュメントが出力されます。
このエンドポイントはデフォルト設定で上記URLになっていますが、`src/protectedRoutes.ts`の中で設定することができます。
![スクリーンショット 2021-04-29 17.30.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/f062be34-c481-b198-3614-abe301b6f354.png)



[Swagger Editor](https://editor.swagger.io/?_ga=2.172242347.949544593.1619683480-637566651.1619506826#)に上のURLを読み込ませればAPIのドキュメントを表示することができます。

![スクリーンショット 2021-04-29 17.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/b9397581-106f-3e12-88ff-a34d966a2273.png)


#最後に
[このサンプル](https://github.com/javieraviles/node-typescript-koa-rest)はリクエストのvalidationやJWTのハンドリングを全て示してくれています。ありがたく使わせていただきましょう。
SpringBootでsmall test　JUnit5 × jMockit　ver

## はじめに
SpringBootでテストを、となった際にテストサイズを考えsmall testのUnitテストを実装したいという場面があるが、small testをどのように実装するのかについて記載した記事をあまり見かけないので、自身の備忘録としても残しておく。
**※ググると大抵dependencyに`spring test`系を持たせているものが見つかるが、ミニマムのunit testを実装する上ではそれらは不要。**

この記事を読むと分かる事は以下。

- SpringBootにおける**jMockit**でのsmall testを導入する際の依存関係（pom.xmlの内容）
- DI(`@Autowired`)されているフィールドの扱い方などテストコードの基本的な書き方

## small testとは
[関連記事の方を参照](#関連記事)

## カバレッジの話
[関連記事の方を参照](#関連記事)

## JUnit5×jMockitでsmall test
### SpringBootにおけるjMockitでのsmall testを導入する際の依存関係（pom.xmlの内容）
プロジェクト(パッケージ)管理ツールにmavenを使っている場合、pom.xmlは以下のようになる。
※色々省略しているが、samll testであれば基本的に`spring-boot-starter-test`などの依存は不要。

```xml:pom.xml
<project xmlns="・・・">
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
    </parent>

    <properties>
        <junit-jupiter.version>5.7.1</junit-jupiter.version>
        <jmockit.version>1.49</jmockit.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- jdbc, json, lombokなどなど -->
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.jmockit</groupId>
            <artifactId>jmockit</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>
```

### DI(@Autowired)されているフィールドの扱い方などテストコードの基本的な書き方
まずjMockitを使うため、`@ExtendWith`で`JMockitExtension.class`を宣言し継承する。
SpringでDI(`@Autowired`)されている各フィールドは`@Injectable`でmock化する。
また、それらをtest対象のクラスにinjectするために、test対象クラスに対しては`@Tested`を記載しmockを注入する。
基本的なパターンとしては以下のような実装になる。
※jMockitの使い方・構文については[ここ](https://jmockit.github.io/index.html)を参照。
※SpringでのjMockitについては[ここ](https://jmockit.github.io/tutorial/EnterpriseApplications.html#spring)を参照。

```java:SampleTest.java
// 省略
@ExtendWith(JMockitExtension.class)
class SampleTest {

  @Injectable
  private Hoge mockHoge;
  @Injectable               
  private Fuga mockFuga;

  @Tested
  private Sample testClass;
  
  @Test
  void testFoo() {
    mockGetHoge("hoge");
    assertEquals("hoge", testClass.foo());
  }

  private void mockGetHoge(String resultValue) {
    new Expectations() {
      {                                                         
        mockHoge.getHoge();                                                         
        result = resultValue;
      }
    };
  }
  // 省略
}
```

## 関連記事
- [SpringBootでsmall test　JUnit5 × Mockito　ver](https://qiita.com/yuta-katayama-23/items/14d1dece1b51744ae379)

## 参考文献
- https://testing.googleblog.com/2010/12/test-sizes.html
消費税計算③


#概要
①inputタブのid属性に入力した値をインプット
②JS側で計算（加工）今回は消費税の計算になります。
③テーブルタグに出力。


#①HTML　インプット

```index.html
<form>
    <label>式:</label>
    <input  type="tel" placeholder="価格を入力してください" id="number">
    <input class="btn" type="button" value="計算"id="count">
  </form>
```
テキスト、ボタンそれぞれにid属性を付けます。

#②JS　加工、アウトプット

```index.js
const reckoning = document.querySelector('[type="button"]');
      reckoning.addEventListener('click',e =>{
        function totalTax() {
          const taxNot = document.getElementById('number').value;
          console.log(taxNot);
          const total = Math.round(taxNot * (1+0.1)); 
          return total; 
        }
        const sub = totalTax();
       
        document.getElementById('total').textContent = sub;
        

      });
```

①ボタンを押す（イベント）発生
②テキストから値を取得(valueプロパティ　▶　フォームのインプットやtextareaの値や文字列を取得し、要素の中身を操作します。)
③Math.roundで小数点以下を四捨五入します。
④定数subに関数を呼び出す。
⑤テキストのid取得し、subを代入。
⑥テーブルに出力
Cookie（クッキー）とセッションの関係やキャッシュとの違いについて整理


※2022年から技術系の記事は[個人ブログ](https://yamaday0u.net/category/programmer/)に投稿しております。ぜひこちらもご覧ください→[yamaday0u Blog](https://yamaday0u.net/category/programmer/)

今回は業界未経験からのITエンジニア転職を目指して活動中のぼくが、初心者には違いがわかりにくいCookieとセッション、キャッシュについて調べたことを整理します。

## 結論：Cookieを使ってセッション管理という仕組みを実現している
セッションは仕組みで、Cookieは手段というわけです。

## Cookie（クッキー）とは
Cookieとは、クライアントコンピュータ（Webブラウザ）が持っているデータを保存できる領域のことです。
また、WebサーバがWebブラウザのこの領域に預けておくテキストファイルのことも意味します。

Webブラウザが、あるWebサーバに初めて接続したとき、WebサーバはそのWebサーバ専用のテキストファイルを生成し、Webブラウザの中にあるCookieという領域に預けます。

このテキストファイルには個人を識別するための情報（セッションID）が保存されています。

そして次回以降、WebブラウザがWebサーバーに接続したときには、Webブラウザがその情報をWebサーバーに送信します。

このような仕組みによって、Webサーバは、個々のクライアントコンピュータが前回使用していた情報を読み取ることができるようになります。

これにより前回のログイン情報が引き継がれて再度IDやパスワードを入力せずにログインできたり、ショッピングサイトで前回カートに入れたままの商品データが引き継がれたりといったことが実現されています。

#### Webブラウザとは
ちなみにWebブラウザはインターネットへ接続してウェブページやインターネット上のサービス・システムなどを閲覧したり操作したりできるソフトウェア(Google Chrome, safariなど)を指します。

## セッションとは
セッションは、通信の始まりから終わりまでの一連の流れを指します。
たとえば、WebブラウザからWebサーバへ接続した時点でセッションが始まり、Webサーバから切断するとセッションが終了します。

この一連の流れを管理することをセッション管理と言います。

セッション管理は、Webサーバ上でサービスを提供するといった際に、アクセスしているユーザーの識別や処理の状態を管理するために必要になります。

## Cookieを使ったセッション管理の流れ
Cookieとセッションについてそれぞれ整理したところで、Cookieを使ったセッション管理の流れも整理します。
以下のようなやりとりでセッション管理をします。

1. WebブラウザがWebサーバにリクエスト（通信の始まり）
1. Webサーバが個人を識別するためのセッションIDを生成し、WebブラウザのCookieに保存
1. WebサーバではセッションIDをキーにユーザー情報や処理状況を保存
1. 次回通信時にCookieに保存したセッションIDをWebブラウザからWebサーバに送信
1. 送信されたセッションIDを読み取りその通信がユーザーの情報や処理状況を復元

## なぜCookieが必要なのか
WebブラウザとWebサーバ間で行われるHTTP通信がステートレス、状態を持たない通信のためです。
状態を持たない通信というのは、この通信が、前のページからの続きなのか、関連したアクセスからなのか、その情報を持たないでリクエスト・レスポンスをしている通信ということです。

この通信では、ショッピングサイトで買い物しているときに前のページで商品を入れるリクエストをしたのに、レスポンスされたページでは商品が買い物カゴに入っていないという事態が発生します。

これを解決するために、Cookieを使ったセッション管理をするわけですね。

関連投稿記事：[HTTPとHTTPS、SSLについて整理する（Qiita）](https://qiita.com/yamaday0u/items/3606db49af0f35c2fa23)

## キャッシュとは
キャッシュとは、一度読み込んだWebページのデータを一時的にWebブラウザに保存しておく仕組みのことです。

同じページを再度表示するときに、この一時保存されたデータを使えば、ページを毎回読み込まなくても済むので、素早く再表示されるというメリットがあります。

一方で、Webページの最新情報が反映されない（スーパーリロードによって解決できる）ことや、キャッシュデータが溜まりすぎると端末のメモリの空き容量を圧迫して動作不良を引き起こす危険がある（キャッシュデータを削除すればOK）ことなどがデメリットとしてあります。

## Cookieとキャッシュの違い
以上のことから、Cookieとキャッシュには以下の違いがあります。

- CookieはセッションIDを保存（ユーザー情報や処理状況を管理するため）
- キャッシュはページ情報を保存（再度同じページを素早く読み込むため）

## 参考資料
[初心者でもわかる『Cookie（クッキー）』講座 危険性やスマホでの設定方法もズバリ解説（TIME & SPACE by KDDI）](https://time-space.kddi.com/ict-keywords/20180726/2392)
[4歳娘「パパ、セッションとCookieってなあに？」（Qiita）](https://qiita.com/Yametaro/items/9b65a21940e001554719)
[意外と知らない？ITトレンド用語 セッションとは（ICT Business Online）](https://www.ntt.com/bizon/glossary/j-s/session.html)
**↓このサイトが一番わかりやすかったです!↓**
[Cookieとセッションについてわかりやすく解説します！（ウマロのゲームブログ）](https://umaroidblog.com/webtechnology1)
[初心者でもわかる『キャッシュ』講座 Cookie（クッキー）との違いや削除方法など解説（TIME & SPACE）](https://time-space.kddi.com/ict-keywords/20191210/2798)
GitHub Actionで自動デプロイ

#GitHub Actions とは
GitHub ActionsはCIツールで、GitHubで自動デプロイをすることができる。
CircleCIなどと同じようにGitリポジトリのアクションを起点に操作できる。
ほぼ無料で使用することが可能。

#設定に必要なもの
CI設定ファイルをGitリポジトリにコミットする。
.github/workflows/deploy-server.yml

#設定方法
今回の例では、ワードプレスのテーマファイルをGitで管理し、マスターブランチにコミット/マージされたタイミングでサーバー（Xserverを使用）へデプロイする。

##設定ファイルの作成
管理しているリポジトリに ディレクトリ.github/workflows/ を作成し、ymlファイルを作成する

```
name: deploy wordpress theme
  
on:
  push:
    branches:
      - master
  
jobs:
  deploy:
  
    runs-on: ubuntu-latest
  
    steps:
      - uses: actions/checkout@v1
 
      - name: ssh key generate
        run: echo "$SSH_PRIVATE_KEY" > key && chmod 600 key
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
 
      - name: rsync deploy
        run: rsync -auzrv --delete ./ $SSH_USER@$SSH_HOST:$DEPLOY_PATH --exclude ".git/" --exclude ".github/"  -e "ssh -i key -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -p ${SSH_PORT}"
        env:
          SSH_USER: ${{ secrets.SSH_USER }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
          SSH_PORT: ${{ secrets.SSH_PORT }}
```


**name:**
このスクリプトの説明


**on:**
**　push:**
**　　branches:**
**　　　- master**
何が起きた時にこのスクリプトを起動するか
この例では、マスターブランチにプッシュされた時に起動する

**jobs:**
実際に行う操作を記述する 

**${{ secrets.SSH_USER }}**
${{ }}で囲まれた箇所はGithubで設定することで設定ファイルに記載せずに実行時にGithubから読み込まれる。

## 変数を定義する
Settings>Secretsで非公開にした変数を定義する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631498/825844cb-b131-b124-bf45-5aaa7ded9d79.png)

#実行結果の確認
Githubでコミットし、マスターブランチにPushする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631498/a25d7ab2-b77f-3fd1-6058-b38a1d0aa8ca.png)
Actionsタブで結果を確認し、緑のチェックが表示されていればデプロイ成功
GitHub ActionsでLaravelのPHPUnitを並列実行

# 背景

- GitHub Actionsでのテストの数が多すぎるので分散処理がしたい
- 良参考記事があったのでそれを元にLaravel用に設定
- Laravelは5.5~6.xを想定

## 結論

```.github/workflows/phpunit.yml
name: PHPUnit
on:
.
.
.
#略


jobs:
  test-php:
    name: Test PHP
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        parallelism: [5]
        id: [0,1,2,3,4]
.
.
.
#略
    services:
      mysql:
        image: mysql:5.7
.
.
.
#略
    steps:
      - uses: actions/checkout@v2
      - name: Setup PHP
.
.
.
#略
      - name: Run Tests
        run: |
          find tests/ -name '*Test.php' | sort | awk "NR % ${{ matrix.parallelism }} == ${{ matrix.id }}" | xargs php ./create_multithread_phpunit_xml.php
          ./vendor/bin/phpunit --configuration ./ci_phpunit.xml
```


```create_multithread_phpunit_xml.php
<?php

$baseDir = realpath('./');
$files   = array_slice($argv, 1);
$xmlFileStringData = [];
foreach ($files as $file) {
    $xmlFileStringData[] = "<file>{$baseDir}/{$file}</file>";
}
$testFileString = implode("\n", $xmlFileStringData);
$template = <<<XML
<?xml version="1.0" encoding="UTF-8"?>
<phpunit backupGlobals="false"
         backupStaticAttributes="false"
         bootstrap="vendor/autoload.php"
         colors="true"
         convertErrorsToExceptions="true"
         convertNoticesToExceptions="true"
         convertWarningsToExceptions="true"
         processIsolation="false"
         stopOnFailure="false">
        <testsuite name="Test Case">
            {$testFileString}
        </testsuite>
    <php>
        <env name="APP_ENV" value="testing"/>
        <env name="CACHE_DRIVER" value="array"/>
        <env name="SESSION_DRIVER" value="array"/>
        <env name="QUEUE_DRIVER" value="sync"/>
        <env name="DB_DATABASE" value="test_db"/>
        <env name="DB_USERNAME" value="root"/>
        <env name="DB_PASSWORD" value="root"/>
    </php>
</phpunit>
XML;

file_put_contents("ci_phpunit.xml", $template);
```

基本的には[GithubActions で phpunit の並列実行](https://kojirooooocks.hatenablog.com/entry/2021/03/03/213000)を参照いただけると。

## 結果

こうなる。

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

## 参考記事

[GithubActions で phpunit の並列実行](https://kojirooooocks.hatenablog.com/entry/2021/03/03/213000)
REPLモード


SwiftにはREPLモードでプログラムを動かすことができます。

## 実行方法

ターミナルを開き、

>swift

もしくは

>xcrun swift

で、Swift REPLモードを起動できます。

## ステートメント

```
  1> let name = "Tanaka"
name: String = "Tanaka"
  2> print("Hello, \(name)")
Hello, Tanaka
```

Swiftのステートメントを入力すると、REPLEは対話形式で応答します。

## 関数

```
5> func sample(name: String) {
6.	return name
7. }  
```

REPLでは関数も書くことができます。
関数をかく時は、最初の一文の行番号には最後に>がつきます。関数ステートメントのように、連続する行のステートメントは、行番号の後ろに.ピリオドがつきます。

## 終了方法

REPLを終了したい時は、
> :exit

で終了することができます。



# まとめ
実際の開発で使うことはほとんどないですが、何か新しい技術や計算処理を実験したい時などは、PlaygroundやREPLが使えそうです。

# 参考
[増補改訂第3版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plusシリーズ)
Apple M1でJekyllを使えるようにする

Apple M1でJekyllを動かすのに少し手間取ったのでここに対処法書きます。
自分はrubyの環境も無かったのでその作り方も載せておきます。

### homebrewインストール

ターミナルを起動し、以下叩きます。

```zsh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/kohei/.zprofile
```

### rbenvをインストール

```zsh
brew install rbenv
```

/Users/(ユーザ名)/.zshrc に以下追加します。

```zsh
eval "$(rbenv init -)"
```

以下コマンドでrbenvのバージョンが表示されればOK.

```zsh
exec $SHELL -l
rbenv --version
```

### rubyをインストール

以下にて、インストール可能なrubyのバージョンを確認します。

```zsh
rbenv install --list
```

以下のように表示されます。
自分は2.7.3のバージョンをインストールしました。

```zsh
2.5.9
2.6.7
2.7.3
3.0.1
jruby-9.2.17.0
mruby-2.1.2
rbx-5.0
truffleruby-21.0.0
truffleruby+graalvm-21.0.0

Only latest stable releases for each Ruby implementation are shown.
Use 'rbenv install --list-all / -L' to show all local versions.
```

以下にてインストール、デフォルトのバージョンを2.7.3にしました。

```zsh
rbenv install 2.7.3
rbenv global 2.7.3
exec $SHELL -l
ruby --version
```

### jekyllを起動

Gemfile.lockがある場合はそれを削除し、以下実行。
色々試したのですが、依存gemのバージョン固定では実行できず。。

```zsh
sudo gem install bundler jekyll
bundle exec jekyll serve
```

メモから復元した情報なので、ちょっと不足あるかもしれません。。。
参考程度にしていただけるとありがたいです。
vscodeで特定ファイルのworkspace上の監視を解除する方法

# はじめに
データ解析等をしている際にデータを含むディレクトリを直接プロジェクト上に含む際に以下のようなエラーを得ることがあります．

```
Visual Studio Code is unable to watch for file changes in this large workspace
```

このエラーの場当たり的な対応方法は監視できるファイル数の上限を増やすことですが，一般的にこのような対応方法は単純に動作不良や電力消費の上昇，速度下降等につながるため避けたいです．

そこである特定のファイルのみの変更・追跡を無視するようにする方法を記します．

# 方法
現在のworkspaceに `.vscode/settings.json`が存在しない場合はまず作成します．

```bash
$ cd <the path to the workspace>
$ mkdir .vscode/
$ touch .vscode/settings.json
```

次に以下の内容を`settings.json` に加えます．

```json
"files.watcherExclude": {
    "**/<the path to the file or directory to ignore>": true,
}
```

例：

```json
"files.watcherExclude": {
    "**/data/**": true,
    "**/figure/**": true,
}
```

上記の方法により，vscodeのUI上で指定されたファイルやディレクトリが表示されなくなりますが，当然ファイルシステム上には残っているので実装上の問題は全く起こりません．


[参考: User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings)
Webで使われるデータ形式（HTML,CSS,画像,動画,音声）

# マークアップ言語
![マークアップ言語.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999125/9d5e66e2-cd11-6e70-dfe4-19d9151d8791.jpeg)

## HTML(HyperText Markup Language)
HTMLは、Webに特化したマークアップ言語（文字データになんらかの情報や構造を持たせるもの）である。
HTML文書は、**タグ**によって囲まれた文章によって構成される。タグは「**開始タグ**」と「**終了タグ**」からなる。開始タグ、文章、終了タグの塊を**要素**と呼ぶ。
HTMLの先頭におく**DOCTYPE宣言**は、バージョン形式を伝える。
開発当初は文書とリンクを表すだけのものであったが、バージョンアップにより機能が追加されていった。現在は2017年に勧告されたHTML5.2が最新版である。
## XML(Extensible Markup Language)
XMLはHTMLと同じマークアップ言語であるが、HTMLに比べ、さまざまな用途に汎用的に利用できる。
XMLもHTMLも元は**SGML（Standard Generalized Markup Language）**を改良した言語である。HTMLはWeb文書（ハイパーテキスト）の記述に特化したのに対し、XMLは個別の目的に応じてタグを独自に定義することで汎用的に利用できる。
## XHTML(Extensible HyperText Markup Language)
XHTMLは、HTMLをXMLの文法で再定義したものである。HTMLより書式が厳密になり、タグの省略や大文字の混在が許されなくなるなどの違いがある。
XHTMLはXMLの一種であるため、別のXMLで定義された文書をXHTML文書内に埋め込むことができる。埋め込み利用されるものとして、MathML(XMLで記述された数式)やSVG(XMLで記述された画像)などがある。
# CSS(Cascading Style Sheets)
CSSはHTMLやXMLの体裁を表現する記述で、**スタイルシート**とも呼ばれる。
CSSが登場する以前は、HTML内で体裁を整えていたが、文書の構造の記述と体裁の記述が入り混じってしまっていた。CSS登場後は文書構造と体裁の棲み分けが可能になった。
よって、共通のCSSを適用させたり、クライアントの種類ごとに表示を切り替えるといったこともできるようになった。
# 画像データ
Webで扱われる画像データは、ネットワーク転送量を減らすため、基本的にデータサイズが小さくなる。
## JPEG(Joint Photographic Experts Group)
Jpeg(ジェイペグ)形式は１６６７万色を扱えるため、写真の画像形式としてよく使われる。人間が気づかないデータを削ることで圧縮しているので、画質が劣化しやすい。
## GIF(Graphics Interchange Format)
GIF(ジフ)形式は２５６食しか扱えないが、データの圧縮方法がJpegと異なるため画像の劣化が発生しない。
特定の色を透過色にしたり、複数のGIF画像を使ってアニメーションにしたりできる。
## PNG(Portable Network Graphics)
PNG(ピング)形式はGIFの特許問題（GIFの圧縮技術の特許を持っていたUNISYS社の利用料請求）により開発されたもので、１６７７万色以上を扱える。
透明色が扱え画質の劣化が起きず、同じ内容でもGIFよりデータサイズが小さくなる。
# 音声・動画配信
インターネットでの転送時間短縮のため、音声・動画ファイルも画像ファイル同様にデータを圧縮する。
データ圧縮には**コーデック**というソフトが用いられ、圧縮を**エンコード**、再生のために伸長することを**デコード**という。
音声ファイルではMP3やACC、動画ファイルではMPEG-4やWMVがある。

| コーデック  | 拡張子         | 説明・用途    |
| ------ | ----------- | -------- |
| AAC    | .aac .m4aなど | iPod 着うた |
| WMA    | .wma        | PC向け音源   |
| MPEG-4 | .m4v mp4など  | スマホ向け動画  |
| WMV    | .wmv        | PC向け動画   |
| MPEG-2 | .mpg m2p    | DVD 地デジ  |

## ダウンロード配信
音声・動画の配信方法は大きく分けて２種類ある。１つは「Webサーバーからダウンロードしてもらい、それを再生する」という**ダウンロード配信**である。
ユーザーがファイル全体をダウンロードしてから再生する方法と、ファイルをダウンロードしながら再生する方法（**プログレッシブダウンロード配信**）がある（YouTubeやニコニコ動画など）。
しかし、配信したファイルはユーザーに残るため著作権のあるデータ配信には向いていない。
２つめは、この問題を解決する**ストリーミング配信**である（AbemaTVやニコニコ生放送など）。この方法では、ファイルを細かく分割し、細切れにしたデータを配信する。再生したデータは都度削除されるので著作権問題は解決するが、細切れにして転送するためのストリーミングサーバーを用意する必要がある。

# 参考
[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/gp/product/B06XNMMC9S/ref=ppx_yo_dt_b_d_asin_title_o05?ie=UTF8&psc=1)
ジェネリクス関数とジェネリクスプロトコル


#ジェネリクス関数

通常の関数は、引数の型を決めたり、返り値の型を決めなければいけません。
しかし、ジェネリクト関数では、Int型でもString型でもどんな型でも対応してくれることができます。

書き方はこんな感じ。

```
//ジェネリクスを指定
func sample<T>(x:T, y:T) -> T {
    return x + y
}
```

ジェネリクス関数を使用したい時は、関数名の後ろに<T>をつけます。Tじゃなくても良いんですが、一般的にはT。

これだと関数内で演算が行われることになるので、その場合は数値でないといけなくなります。
その場合は下記のように「関数名<T: Numeric」と指定することで、数値型要素を持つ関数であることを宣言します。

```
//ジェネリクスを指定
func sample<T:Numeric>(x:T,y:T) -> T {
    return x + y
}
```

こうすることで、Int, Double, Floatなど数値型であればどの型にも対応することが可能になります。



# ジェネリクスプロトコル

プロトコルにジェネリクスを使用することで、Int型とString型のクラスを定義したりすることができます。

```
//プロトコルの定義
protocol FruitsProtocol {
    associatedtype T
    var item:T { get }     
    func fruitvalue(item:T) 
}


//クラス（Int型)
class Fruits1:FruitsProtocol {

    var item:Int = 100
    
    func fruitvalue(item: Int) {
        self.item += 100
    }
}

//クラス（String型）
class Fruits2:FruitsProtocol {

    var item:String = "100"
    
    func fruitvalue(item: String) {
        self.item = item + "円です"
    }
}
```

プロトコルでジェネリクスを使用する時は、
associatedtype T
のように任意の型を指定します。

# 参考
[増補改訂第3版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plusシリーズ)
[Rails]ActiveHash使用の際のエラー（undefined method `current_scope' ）

# はじめに
とてもしょーもないミスで1時間も浪費しましたので、二度と内容にこちらに備忘としてアウトプットいたします。

# 発生したエラー
以下のようなエラーが出ました。最初は誤字等を睨んだのですが、、そんなことはなく、、

![スクリーンショット 2021-04-26 16.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128031/cb9cbf19-1741-4109-4738-026716eee92e.png)


# 解決方法
こちらの一文を書くことを忘れていました。

```game.rb
class Game < ApplicationRecord
#この一文
  extend ActiveHash::Associations::ActiveRecordExtensions 

　belongs_to :level;
```


ActiveHashを用いて、belongs_toを設定するには、
extend ActiveHash::Associations::ActiveRecordExtensionsと記述してmoduleを取り込む必要がありました。

# 終わりに
エラーが出たときは、基礎の基礎から立ち返ることをここに誓います（笑）
時間は大切に。
【すぐに使えて便利】MotionBoardの簡易集計表をつかってみた

#最初に
MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/04c48011-e65b-88dd-f666-a838819636e4.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e777e485-f3d0-3dc7-57e2-ddddd2df8860.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7bc601e7-ace8-cafa-2313-c2d66b9de500.gif" width=60%>
綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
[MotionBoard　体験デモについて（公式HPより）](https://www.wingarc.com/product/motionboard/demo/index.html)

<details><summary>【MotionBoardとは】</summary><div>
様々なデータソースからデータをあつめ、１つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657180/877897e8-35d1-b055-a80c-b9051866bc38.png" width=60%>
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社　MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
</div></details>

みなさんはこの機能をつかったことがありますか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/6c1dfef2-ff7c-5046-49d5-9cd2ec7881bd.png)


グラフを出したときに、あわせて数字も出したいときにMotionBoardでは簡易集計表を出すことができます。
名前の通り、あくまで簡易的に表が出てくるのですが、重宝されるタイミングが多いので、知っておいて損はなしです。


#簡易集計表のよいところ
もうシンプルです。
正直「これが出来る、それだけで良い」と思えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/f712f858-d838-83de-f054-8df04e915089.png)

時系列で横に長いグラフになっても、上のグラフと下の集計表の幅がズレないんです。
MotionBoardは複数のグラフを連携させてひとつのボードを作るのですが、グラフ間の幅の調整が難しかったりします。
グラフに付随するこの集計表であれば、デフォルトで幅調整してくれるので、とても重宝します。

設定も簡単です。
「チャート編集」→「折れ線・棒系設定 > 全般」から簡易集計表を表示するに ✅ を入れればOKです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/86acc89a-5ada-241a-0afc-06f7ca1cb6bb.png" width=50%>


簡易ゆえに設定できる箇所も少ないです。
（全部の集計項目じゃなくて、必要なものだけ表示・・・はできませんでした）

#代用するなら
もし目的が「グラフの中に数値を表示したい」のであれば、データラベルもつかえると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4a94938b-e25d-4087-f781-51232a086f6a.png)

設定方法は「チャート編集」→「折れ線・棒系設定 > 棒共通」→データラベルの初期表示
です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/296d7165-4b8e-9adc-7e17-17477e8ee1be.png)

こちらの方がシンプルですが、情報がギュッと寄ってしまうこともありますので、やりたい目的によって別れると思います。


#おわりに
いかがだったでしょうか？
MotionBoardは様々な表現が可能となっておりますので、「こんな機能があるのか」と頭の片隅に入れておいていただけますと幸いです。
【React】ざっくりReact-Router-Domを導入する

<h2>React-Router-Domを導入したい</h2>
URLによって表示内容をフロント側で変更する「ReactRouterDom」について書いていきます。

今回使う環境はReact+RailsAPI環境です。
環境構築に関しては以下を参照してください。

https://qiita.com/GalaxyNeko/items/ade06300b955a2a9f78d

<h2>インストール</h2>
Reactをインストールしたディレクトリで以下のコマンドを実行して、React-Router-Domをインストールしてください。

```terminal:ターミナル
npm install react-router-dom


中略
+ react-router-dom@5.2.0
added 340 packages from 91 contributors, removed 230 packages, updated 1458 packages and audited 1808 packages in 1537.164s

132 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

<h2>React－Router-Domを実装</h2>
以下のようにファイルにコードを書いていきます。

```react:App.js
//react-router-domで使うものをimportする
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

//切り替え先のcomponentをimportする
import {SampleA} from './components/sampleA.jsx'
import {SampleB} from './components/sampleB.jsx'
import {SampleC} from './components/sampleC.jsx'

function App() {
  return (
{/*全体を<Router><Switch>で囲む*/}
　<Router>
   <Switch>
    {/* <Route>で個々のルーティングを定義する */}
    <Route 
          exact
          path="/sampleA">
    <SampleA />
    </Route>
    <Route 
          exact
          path="/sampleB">
    <SampleB />
    </Route>
    <Route 
          exact
          path="/sampleC">
    <SampleC />
    </Route>
　 </Switch>
 </Router>
)
}
export default App;
```

Routeについて書きますと、今回のコードでは以下を使用しております。

```react:Routeについて
<Route 
 exact
 path="/SampleA">
 <SampleA />
</Route>
```

exactを使用すると pathで指定したURLが完全一致したときのみ動作するようになります。
exactをつけないと、pathで指定したURLと部分一致で動作するようになります。

基本的にはexactをつけておいて、意図しないURLが発火した時に表示されないように制御するといいかなと思います。


pathに関しては、どういったURLに対して、動作するかを定義しています。
そして、URLが一致した場合、< Route>< /Route>の間に挟んだ処理を実行します。

<h2>切り替える先のjsxを定義する</h2>
ここでは、< Route>< /Route>の中身、指定のURLを入力されると表示される画面の本体を書いていきます。
このようにAPP.jsに直接書かず、別ファイルに切り出すことで部品のようにコードを管理できます。

Routeで表示する中身を簡単に書いていきます。

```react:src/components/SampleA.jsx
import React, {Fragment} from 'react'

export const SampleA = () => { 
  return (
    <Fragment>
　　　sampleAページ
    </Fragment>
  )
}
```

```react:src/components/SampleB.jsx
import React, {Fragment} from 'react'

export const SampleB = () => { 
  return (
    <Fragment>
     sampleBページ
    </Fragment>
  )
}
```

```react:src/components/SampleC.jsx
import React, {Fragment} from 'react'

export const SampleC = () => { 
  return (
    <Fragment>
　　　sampleCページ
    </Fragment>
  )
}
```

<h2>実装確認</h2>
実装したコードを動かしてみます。
npmstartコマンドを実行した後に、、http://localhost:3000/SampleAなど、pathに設定したURLにアクセスしてみましょう。

```terminal:コードを動かす
npm start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/b2085120-9e9a-0799-ee1d-02b180ee5b0f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/e4ef1984-3fba-f495-ebe8-d118c5211715.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/a1f300f5-94f7-31b8-7847-97447710cad2.png)

ちなみに、http://localhost:3000 だと、path='/'と定義していないため、何もレンダリングされません。
適宜、表示させたいpathと中身をRouterで定義していきましょう!

<h2>参考</h2>
RailsとReactでUberEats風SPAアプリケーションをつくってみよう！
https://www.techpit.jp/courses/138/curriculums/141/sections/1048/parts/4151
Rails Dir.tmpdir 一時的なディレクトリを作成する

## この記事について
`Dir.tmpdir`を使用して一時的なディレクトリを作成する方法を書いた記事。
https://docs.ruby-lang.org/ja/latest/method/Dir/s/mktmpdir.html


## どんな時に必要なの？
１度限りの画像を生成したくて`tmp/hoge.png`と決め打ちすると、複数セッションだと同じ画像が共有されてしまう可能性がある。そんな時にユーザー別にディレクトリを用意してやって共有できないようにしてやる。そこで`Dir.tmpdir`を使う！

他にも単純に「一時的に欲しい」という時に使えれば便利かも。

## 作成方法その① ブロックを与える
ブロックの評価が終わると作成された一時ディレクトリやその配下にあったファイルを`FileUtils.#remove_entry`で勝手に削除してくれる。

```ruby
require 'tmpdir'

Dir.mktmpdir do |dir|
  puts dir
  #=> /var/folders/11/rq5ty2dj3_v0gybj_pmpl2gr0000gn/T/d20210426-40593-1f65en                                         
end

puts dir
#=> NameError (undefined local variable or method `dir' for main:Object)
# ブロックを抜けると作成されたディレクトリ及びその以下のファイルは削除される。
```

**でも、時には自分の好きなタイミングで一時ディレクトリを削除したいよね！！！**


## 作成方法その② ブロックを与えずに生成（好きなタイミングで削除）
ブロックを与えずに作成するには`Dir.mktmpdir`を使用する。
明示的に削除するためには`FileUtils.remove_entry_secure`を使用する。

```ruby
require 'tmpdir'

tmp_dir = Dir.mktmpdir
puts tmp_dir
#=> /var/folders/11/rq5ty2dj3_v0gybj_pmpl2gr0000gn/T/d20210426-40593-r8sklf
# ブロックを与えない場合は、ディレクトリは存在する。

FileUtils.remove_entry_secure tmp_dir
# FileUtils.remove_entry_securで明示的に削除するまで、作成されたディレクトリは存在する

```


## 変わった使い方（決まった単語を入れたい時）
### ディレクトリ名の先頭に決まった単語を入れたい場合

```ruby
require 'tmpdir'

tmp_dir = Dir.mktmpdir("foo")

Dir.mktmpdir("foo") do |dir|
  puts dir
  # 出力例:一時ディレクトリ の名前の先頭に'foo' をつける。
  #=> /var/folders/11/rq5ty2dj3_v0gybj_pmpl2gr0000gn/T/foo20210426-40593-bujxit"
#                                                      ^^^
end
```

### ディレクトリ名の先頭と末尾に決まった単語を入れたい場合

```ruby
require 'tmpdir'

Dir.mktmpdir(["foo", "bar"]) do |dir|
  puts dir
  # 出力例: 一時ディレクトリの名前の先頭に'foo' 、最後に'bar'をつける。
  #=> /var/folders/11/rq5ty2dj3_v0gybj_pmpl2gr0000gn/T/foo20210426-40593-bujxitbar"
  #                                                    ^^^                     ^^^
end
```


### ディレクトリ名の末尾に決まった単語を入れたい場合

```ruby
require 'tmpdir'

Dir.mktmpdir([nil, "bar"]) do|dir|
  puts dir
  # 出力例: 一時ディレクトリの名前の先頭に'foo' 、最後に'bar'をつける。
  #=> /var/folders/11/rq5ty2dj3_v0gybj_pmpl2gr0000gn/T/20210426-40593-bujxitbar"
  #                                                                         ^^^
end
```



### 補足
入れたい単語を指定しない場合（`nil`）は、ディレクトリ名の先頭に`d`が付帯される。

```ruby
/var/folders/11/rq5ty2dj3_v0gybj_pmpl2gr0000gn/T/d20210426-40593-1f65en 
#　　　　　　　　　　　　　　　　　　　　　　　　　　　   ^
```
オブジェクトってなんや／カスタムオブジェクトの作り方を添えて


SalesForceの勉強を始めて19日目:hugging:
はじめましての単語がいっぱいで頭がいっぱいいっぱいになってきたので、
備忘録として記録します:hugging:

－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－

今日はこの3つ
#####1. オブジェクト
#####2. 標準オブジェクト
#####3. カスタムオブジェクト


##用語
###1. オブジェクト
　情報やデータの塊のこと。
　「Accounts (取引先名)」っていうオブジェクト
　「Opportunity (商談)」っていうオブジェクト

###2. 標準オブジェクト
　Salesforceにもともと含まれてるオブジェクト
　「取引先名」とか「取引先責任者」とか「商談」とか、みんなが使いそうなやつは、標準オブジェクトとしてSalesforceが既に入れてくれてる。優しいね。

###3. カスタムオブジェクト
　標準オブジェクトにはない、企業や業種特有の情報を保存したいときに作るオブジェクト。
　例えば、不動産屋さんやったら、「Property (物件)」っていうオブジェクトを作る、的な。


##カスタムオブジェクトの作り方
####1. [設定]ギア ⇒ [設定] ⇒ [オブジェクトマネージャ]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261412/82f7709a-4f6b-dc77-bac0-f6e0658c5a51.png)

####2. [作成] ⇒ [カスタムオブジェクト]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261412/089bcba5-7bda-bb88-df7d-45f5f14af54f.png)

####3.  必須項目 ＋ オプションを入力
　※1. データ型
　　・テキスト：レコードに名前を自由につけれる
　　・自動採番：レコードが作成されるごとに自動で番号が付与される

　※2. 追加の機能
　　・レポートを許可：オブジェクトを基にしたレポートが作れるようになる (レポートタイプが自動で作られる)
　　・活動を許可：活動履歴を確認できる
　　・項目履歴管理：項目の変更履歴を追跡できるようになる
　　・Chatterグループ内で許可：オブジェクトのレコードをChatterグループに追加できるようになる

　※3. リリース状況
　　・開発中：他のユーザは参照不可
　　・リリース済み：他のユーザも参照可 (オブジェクトへのアクセス権限が必要)

　※4. 検索状況
　　・検索を許可：(カスタムタブを設定すると、) オブジェクトを検索できるようになる

　※5. オブジェクト作成オプション
　　・デフォルトのページレイアウトに、メモと添付ファイルを追加する：メモと添付ファイルが関連リストに追加される
　　・カスタムオブジェクトの保存後、新規カスタムタブウィザードを起動する：オブジェクト作成後、続けてタブの作成ができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261412/380f75b4-e96f-6db8-671a-b669a4c3f838.png)

####4. [保存]ボタンをクリック
　※続けてカスタムオブジェクトを作成する場合は、[保存&新規]ボタンをクリック:mouse_three_button:



－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－:smiling_imp:－ Fin. －:smiling_imp:－・－・－:smiling_imp:－・－・－:smiling_imp:－・－・－
JuliaのRef

Juliaの分散関係のコードを読んでいたら、こんなコードを見つけて。

https://github.com/JuliaLang/julia/blob/master/stdlib/Distributed/src/Distributed.jl

``` julia
const REF_ID = Ref(1)
next_ref_id() = (id = REF_ID[]; REF_ID[] = id+1; id)
```

どうも、インクリメントしてユニークなIDを作っているらしい。`Ref`というのは参照をとりだすもので、`[]`という演算子はderefするものらしい。つまり、Cで書くと

``` C
static int counter = 1;
int * REF_ID = &counter;
int next_ref_id() {
   int id = *REF_ID;
   *REF_ID = id + 1;
   return id;
}
```
みたいなことをやっているらしい。

うーん、こんなことできるのか。おそるべしJulia。
railsの検索フォームで簡単に入力した値を戻す

# 概要

検索用フォームは、例えばクエリに付く変数名を短くしたいとか、複数のモデルにまたがるとか、単純にカラムに対応してない値で検索させたいなど、モデルを使わず実装することが多いと思います。

モデルを使わないとinput-textやtextareaならまだしも、select、checkboxなどは入力させた値をHTMLタグに反映させるのに、IF文で分岐して属性値を書き込むので結構結構めんどくさいです。数が増えればなおさら。編集フォームの表にサクッと値を戻したい！というのが今回のテーマです。

# ポイント

ポイントは３つです。

* ActiveModel::ModelとActiveModel::Attributesを使って検索専用のモデルを作る。
* ActiveRecord::Type::Valueを継承したカスタムタイプを使う。
* パラメータにモデルの名前がつかないようにする。

## 検索用のモデル

```rb
# app/models/searches/sales_type.rb
module Searches
  class SalesType
    include ActiveModel::Model
    include ActiveModel::Attributes

    attribute :cid, :integer
    attribute :itid, :integer
    attribute :price_type, :string
    attribute :exclude_percent, :string
    attribute :user_relation, :string
    attribute :share, :string
    attribute :shop_ids_and, :boolean
    attribute :shop_ids, :integer_array
  end
end
```

読み込めるところだったらどこでもいいのですが、今回は`app/models/searches/`に作ってみました。型に関してですが、booleanなんかは飛んでくるのは`'1'`、`'0'`なんですけど、form_withがモデルを想定してるので`true`、`false`でもうまく値を戻してくれます。もちろんここは:stringでも期待通りの動きをします。:integerになってるところも:stringでも大丈夫ですね。まあ、なんとなく実際の型に合わせといたほうが落ち着きがいいかなと思いこうしました。

問題はinteger_arrayになってるところですね。これは後述するカスタムタイプです。ここはフォームを作るところで下記のように生成しています。

```erb
<%= form.collection_check_boxes(:shop_ids, Shop.alived.ordered, :id, :name, include_hidden: false) do |cb|%>
  <div class="form-check form-check-inline">
    <%= cb.check_box class: 'form-check-input' %>
    <%= cb.label class: 'form-check-label' do%>
      <%= cb.text %> 
    <%end%>
  </div>
<%- end -%>
```

こうするとidはintegerの配列になり、[最終的なチェック](https://github.com/rails/rails/blob/68bb2650d59a7aaff57cbaf9bb0dd65782c89489/actionview/lib/action_view/helpers/tags/check_box.rb#L52)は`include?`で見ていますので文字列の配列だとチェックが戻りません（ここで結構ハマりました）。

## カスタムタイプ


```rb
# config/initializers/active_model_types.rb

class IntegerArray < ActiveRecord::Type::Value
  def cast_value(value)
    value.map(&:to_i)
  end
end

ActiveModel::Type.register(:integer_array, IntegerArray)
```

カスタムタイプはフルにモデルで使うなら多分もっと色々設定しないとダメだと思いますが、今回は値を戻すためだけなのでこれだけでOKです。

## パラメータからモデル名を削除

で、このモデルをViewで使えるようにして

```rb
def index
  @for_search = Searches::SalesType.new(params.permit(
    :cid,
    :itid,
    :price_type,
    :exclude_percent,
    :user_relation,
    :share,
    :shop_ids_and,
    shop_ids: []
  ))
```

```erb
<%= form_with model: @for_search, url: sales_type_index_path, local: true, method: :get do |form| %>
```

viewでこんな感じしてやれば値は戻るのですが、パラメターの名前に`searches_sales_type[cid]`というながったらしいscope名が付きます。まあ、これでもrequireしてやれば動きますが、項目が多かったり、選択肢の多い配列があるとURLが長くなっちゃいます（URLの長さについては色々な調査をおこっなってる方がいらっしゃりますし、SEO的な観点の意見も散見されます。気になるか方は一度調べてみて下さい。）。

そこで`searches_sales_type`を外せないの？と思ってソースを追ってみたらscopeに空文字を渡すとなくなるのがわかりました。

```erb
<%= form_with model: @for_search, scope: '', url: sales_type_index_path, local: true, method: :get do |form| %>
```

[ここ](https://github.com/rails/rails/blob/68bb2650d59a7aaff57cbaf9bb0dd65782c89489/actionview/lib/action_view/helpers/form_helper.rb#L744)で`scope ||= ...`となっているのでnilでなければ空文字になり、名前は`cid`だけになります。値も無事戻りました。

ただ、ドキュメントにはないのでバージョンでどうなるかわかりません。そこは留意しておいてください。