OmniAICreator/Qiita-1.07M huggingface dataset:
日本語に合うフォントに変更する時にGoogle Fontsが超絶便利だったのでメモ

長年この業界にいる方ならお馴染みかもしれませんが、Google Fontsが良かったってことでメモ。


[Google Fonts公式サイト](https://fonts.google.com)
<h2>経緯</h2>

プログラミング初心者。
PHPをメインに勉強中で、勉強がてらWebアプリ作ってる中で、デザインに関してはBootstrapのテンプレ参考にしたりしてるのですが、どれも基本Web画面の言葉が英語で書かれてる。

んで、それを日本語に直してやるんですが、どうにもダサい。
カクカクしてて、陳腐な感じになる。
そこで、フォント変えたいな。と色々ググってた中で、Google Fontsの存在に行き着く。

<h2>使い方</h2>

<img width="1395" alt="スクリーンショット 2019-09-13 00.08.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494524/5b7739ea-9a96-3879-e449-da24352e428b.png">

こんな感じの画面で、上部赤い部分、現在「japanese」になってますが、そこで言語を選べます。
その下には、各フォントごとにこんな感じだよーって、ずらっと並んでて気に入ったのを選びます。


気に入ったフォントがあったら、フォントの横にある＋マークをクリック。
<img width="1395" alt="スクリーンショット 2019-09-13 00.22.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494524/b94e9817-5660-d7ac-7563-ebc8a9ec5ec2.png">


すると右下になんか黒いのが出現するので、次はそれをクリック。
<img width="1395" alt="スクリーンショット 2019-09-13 00.22.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494524/3a507d56-aefd-ccaa-86c4-3e30a0b7d4ff.png">


こんな感じの画面が出てきて、黒マルで囲った場所に書かれているコードをheadタグ内に記述すれば、あら不思議。フォントが変わります。
<img width="1395" alt="スクリーンショット 2019-09-13 00.23.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494524/0c85b988-ca77-0118-9cd4-55828d5727c1.png">



参考：[Webフォントとは？Webフォントを利用してWebサイトのデザイン性を高めよう](https://www.asobou.co.jp/blog/web/webfont)
document.getElementsByTagNameを使うと配列のような形式で戻ってくる

自分学習用メモ。
`document.getElementsByTagName(タグ名)`を使うと配列のような形式が変数に入る。

```sample.js
var button = document.getElementsByTagName('button');
console.log(button);
```
![スクリーンショット 2019-09-13 0.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127391/c931f38d-7fdf-1f7c-6d9f-c7fdf6205146.png)

ボタンの色を変えたい場合は、直接styleのプロパティのbackgroundColorに色を入れてみる.

```sample.js
var button = document.getElementsByTagName('button');
button[0].style.backgroundColor = '#f00';
```
![スクリーンショット 2019-09-13 0.03.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127391/129ce52b-81c4-d92d-16dc-f6c59143359e.png)
[web広告]仕組みを知る(SSP,DSP,DMP)

#用語
__SSP(Supply-Side Platform)__
媒体社側の広告収益を最大化するためのプラットフォーム
__DSP(Demand-Side Platform)__
広告主側の広告効果を最大化、最適化するためのプラットフォーム
__DMP(Data Management Platform)__
自社や外部などの様々なデータを抱合し、分割・正規化し、それらを保存・管理するプラットフォーム

#全体像
<img width="486" alt="検索結果_-_Evernote_Web_版.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239734/db295015-ab7f-1fcf-40ec-2ad0b96ceb6f.png">

① あるサイトに訪れるとサイトからSSPに広告リクエストが通信されます。
② SSPは受け取ったを広告リクエストを分析し、連携している各DSPに入札リクエスト(*1)を通信します。
③ 各DSPは受け取った入札リクエストを分析し、広告配信をしたい場合は入札レスポンス(*2)を通信します。
④ SSPは各DSPからの入札レスポンスを分析し、最も価格の高い入札レスポンスを決定し、サイトに返します。
⑤ 入札に競り勝った広告がサイトに表示され掲載されます。


(*1)入札リクエストの主な内容
`ユーザーID / 掲載先ドメイン / 広告枠ID / 広告サイズ / コンテンツカテゴリ / 許可する広告フォーマット / ユーザエージェン / その他データ`
(*2)入札レスポンスの主な内容
`入札金額 / DSPの広告タグ / その他のデータ`

DSPは、なるべく効率的に広告配信をするために、入札条件を設定する必要があります。
例えば、
`（例）関東在住,30代,広告主サイトに訪れた事のないユーザー`に広告を配信したい等
のような形です。
SSPは、DSPの条件を満たさないと広告を買ってもらえないので、なるべく多くのユーザ情報をDSPに渡して入札させる必要があります。

# DMPは何すんの？？
そこで、DMPが登場します。
 DMPは実際に広告主サイトに訪れたユーザ-情報、媒体サイト情報、オフラインデータや外部データ等あらゆるオーディエンスデータを全て統合し、管理するプラットフォーム
 この大量のデータをSSP、DSPに提供することで広告配信最適化の精度が向上
 また、従来のCookieを利用したリターゲティングでは、デバイスを横断したターゲティングはできませんでしたが、__DMPを利用することでデバイスを横断したターゲティングも可能__

#引用
https://admage.jp/blog_003_ssp-dsp-dmp.html
Unityの勉強 - Physicsで物理エンジンを試してみる - Collider 編

おはようございます。こんにちは。こんばんわ。じだらくです
前回Unityで主にRigidbodyを使った力学処理を中心にまとめたんですが、今回はColliderで衝突判定をやってみたいと思います

前回の投稿↓
[Unityの勉強 - Physicsで物理エンジンを試してみる -](https://qiita.com/J-drk/items/e38ca8e24dcb37b248fa)

前回の続きなので環境は `Unity 2019.2.2f1` です

<h2>衝突判定の種類</h2>
衝突判定には2種類存在している
- Collisionモード（衝突モード）
- Triggerモード（すり抜けモード）


<h3>Collisionモード</h3>
衝突そのものの判定だけでなく跳ね返りなどの応答も反応する（物理的な反応）

<h3>Triggerモード</h3>
衝突の検出だけを行うモード。跳ね返りなどはなくすり抜ける
ObjectのInspectorでis Triggerをtrueにすることでモード選択できる

---

検知はスクリプトを使用して行います
Colliderの特定のイベントFunctionで判定できる

| 状態 |CollisionMode|TriggerMode|
|:-----------:|:-----------:|:-----------:|
|衝突した瞬間|OnCollisionEnter2D|OnTriggerEnter2D|
|衝突の最中|OnCollisionStay2D |OnTriggerStay2D|
|衝突が終わった|OnCollisionExit2D |OnTriggerExit2D|

※ 3Dの場合はSuffix2Dが取り除かれます

- 当たり判定を取り込むときは対象のGameObject両方にColliderコンポーネントをつける必要がある
- 跳ね返りなどの物理挙動をさせるとき（CollisionMode）は両方にRigidbodyをつける

まとめると、こんな感じですね！

Physicsを利用した物理演算について学んでまいりました！
また別の項目をまとめたらメモを投稿しようと思います。
rails server時にcannot load such file -- bootsnap/setup (LoadError)と表示され、起動しない場合の対処法

#はじめに
railsチュートリアルをローカル環境でやってみようとしたら、サーバーが立ち上がらずハマったので解決策を投稿
#環境
rails 5.2.3
#エラーメッセージ
```ruby:ruby
cannot load such file -- bootsnap/setup (LoadError)
```
#原因
bootsnapがインストールされていない
#対処
```ruby:Gemfile
gem 'bootsnap', '>= 1.1.0', require: false
```
を書き足してbundle installを実行
Minecraft Datapack 作成の小技1

# 概要
マイクラ人狼のデータパックを作ってて、
「共有して車輪の再発明を防ごう！」
と思ったので、
マイクラのコマンドで使える小技を羅列していく。

## 小技集
### サーバに居る参加者人数を数える
タイトルそのまま。
データパックじゃなくても、**__コマンドブロックでもできます__**

`NUM` というスコアボードを作成して、
`DUMMY` というダミープレイヤーの `NUM` に
参加者人数がストアされる。

```mcfunction:count.mcfunction
scoreboard objectives add NUM dummy
scoreboard players set NUM 0
execute as @a run scoreboard players add DUMMY NUM 1
```

### 簡易的なタイマーを作る
データパックでしか使用できない…かな?
データパックの `tick.json` の機能を使用。
`tick.json` からは `ontick.mcfunction` を参照する。

```json:(datapack)/data/minecraft/tags/functions/tick.json
{
  "replace": false,
  "values": [
    "timer:ontick"
  ]
}
```
#### 準備
準備するスコアボードがいくつかある。
 - `TICK` ... 1tickを計測
 - `SECOND` ... 設定したいタイマーの時間をここにセット
 - `20` ... 剰余計算のため
 
```mcfunction:set_scoreboard.mcfunction
scoreboard objectives add TICK dummy
scoreboard objectives add SECOND dummy
scoreboard objectives add 20 dummy
scoreboard players set Timer TICK 0
scoreboard players set Timer SECOND 12000 (測りたい秒数)
scoreboard players set Timer 20 20
```

`tick.json` から参照する `ontick.mcfunction` は以下。

```mcfunction:ontick.mcfunction
scoreboard players add Timer TICK 1
scoreboard players operation Timer TICK %= Timer 20
execute if score Timer TICK matches 0 unless score Timer SECOND matches 0 run scoreboard players remove Timer SECOND 1
```

#### 機構
1tickごとに `TICK` の値が増加していき、
`TICK` が20で割り切れた時に、 `SECOND` の値を減少させていく。
Next.jsでAPIを書く

### docsへのリンク
https://nextjs.org/docs#api-routes
https://github.com/zeit/next.js/blob/master/examples/api-routes
フォルダ構成とかは↑のgithubを見るのがおすすめ

### 1. サーバー側の処理を書くファイルをつくる

pages/api/の中に置く
apiを叩くときは`http://localhost:3000/api/<ファイル名>`にアクセス
expressとかの`server.js`に相当

```
ルート
└ pages
   └ api
      └ [word].tsx #apiの中にフォルダがあっても良い
```

ポイント: ファイル名を[]でくくると、URLのクエリパラメータに応じた処理ができる (i.e. サーバー側に変数が渡せる

### 2. サーバー側の処理を書く

クエリパラメータを受け取って、パラメータを入れたメッセージを返すだけのレスポンス

```typescript
export default ({ query: { word } }, res) => {
 res.status(200).json({ message: `you requested for ${word} ` });
};
```

### 3. クライアント側の処理を書く

いつものpagesの中に書けばok

```typescript
const word = 'hogehoge';
const response = await fetch(`http://localhost:3000/api/${word}`);
const data = await response.json();
console.log(data);
```

### 4. 確認

コンソールに "you requested for hogehoge" と出ればok
ターミナルを使ってみる

#この記事について

　この記事は初めてターミナルの扱いを学習する自分に向けた学習記録である。



###touchコマンド　ファイルを作成する

```
~$ touch hoge.txt      //hoge.txtが作成される
```

###catコマンド　ファイルを開く

```
~$ cat hogehoge.txt    //hogehoge.txtが開かれる
```

###mkdirコマンド　ディレクトリ（フォルダ）を作成する
mkdir→make directory

```
~$ mkdir hoge          //hogeディレクトリが作成される
```

###cdコマンド　ディレクトリを移動する
自分が今いるディレクトリ→カレントディレクトリ
cd→change directory

```
$ cd hoge             //hogeディレクトリに移動する

hoge $ cd ..          //「..」で一つ親のディレクトリに移動できる

hoge $ cd             //ディレクトリを指定せず、cdのみで実行すると
~$                    //ホームディレクトリへ移動する。
```

###pwdコマンド　ルートディレクトリからカレントディレクトリまでの階層が全て表示される。
ルートディレクトリ→一番親の階層のディレクトリ

```
~$ pwd
```

###lsコマンド　ディレクトリの中身の一覧が表示される。
表示されるディレクトリとファイルは１つ子の階層のみ。
ls→list

```
~$ ls
```

##ファイルの移動やコピーについて
###mvコマンド　ファイルを移動させる/ファイル名を変更する
・「mv ファイル名 ディレクトリ名」とすることで指定したディレクトリにファイルを移動させることができる。
mv→move
・「mv ファイル名 新しいファイル名」とすることでファイル名を変更できる。
・「mv ディレクトリ名 ディレクトリ名」とすることでディレクトリ名を変更できる。

```
~$ mv hogehoge.txt hoge
　　//hogehoge.txtファイルがhogeディレクトリに移動される。

~$ mv hogehoge.txt hoge2.txt
　　//hogehoge.txtというファイル名がhoge2.txtに変更される。
```

###cpコマンド　ファイルまたはディレクトリをコピーする
#### ・ファイルをコピーする場合
「cp コピーするファイル名 新しいファイル名」とすることでコピーすることができる。
cp→copy

```
~$ cp hogehoge.txt hogehoge2.txt
　　//hogehoge.txtのコピーファイルであるhogehoge2.txtファイルが生成された。
```

####・ディレクトリをコピーする場合
「cp -r コピーするディレクトリ名 新しいディレクトリ名」とすることでコピーできる。

```
~$ cp -r hoge hoge2
　　//hogeディレクトリのコピーディレクトリであるhoge2ディレクトリが生成された。
```

###rmコマンド　ファイルまたはディレクトリを削除する
####・ファイルを削除する場合
「rm ファイル名」とすることで削除できる。
rm→remove

```
~$ rm hogehoge2.txt      //hogehoge2.txtが削除される。
```

####・ディレクトリを削除する場合
「rm -r ディレクトリ」とすることでディレクトリを削除できる。

```
~$ rm -r hoge2           //hoge2ディレクトリが削除される。
```
Reactでタグネストを動的に変えたいときの小技

Reactでコンポーネントを作る際に、状況によってタグの有無や重なり方が変わることがありますが、うまくすればJSXの中へ条件分岐を入れずに処理できます。

## TL; DR

* JSXのタグに指定するのは大文字の変数
* 大文字の変数に小文字のタグ名を入れることもできる
* タグを消したければ`React.Fragment`も使える

## JSXをJavaScriptに変換すると

JSXでは`<div>`のようなHTMLにも存在するタグや、`<Component>`のようなReactのコンポーネントをタグにできますが、JavaScriptに変換する場合のルールはシンプルです（[React公式](https://ja.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)）。

* `<`の次が小文字で始まる場合、`React.createElement`の第一引数は`'div'`のような文字列となる
* `<`の次が大文字の場合、`React.createElement`の第一引数はその名前の変数になる

### 変数なので、変更もできる

ふつう、`<Component>`のように指定するものは`import`などで手に入れたコンポーネントですが、これに限られません。

たとえば、`prop`や`state`[^1]にコンポーネントを入れて、動作に応じて切り替えることも可能です。また、その場で生成した変数をJSXに指定しても構わないので、「他の`prop`や`state`を見て、その場でセットするコンポーネントを切り替える」ことも可能です。

### コンポーネント間以外にも使える

`React.createElement`の引数に小文字のタグ名を指定できれば、それは変数経由でも構いません。タグ名の文字列を大文字の名前の変数に入れることで、変数の内容に応じてタグが切り替わるようになります。

```jsx
const Tag = someCondition ? 'p' : 'span';
return <Tag>{ someContent }</Tag>;
```

さらに、「状況によってはあるタグを消したい」という場合に、そのタグの変数に`React.Fragment`を代入してしまえば、構築した仮想DOMから当該のタグは消滅します。画面幅によってテーブルを組み替えるなど、状況によってタグの存在から違う場合に便利かもしれません。



[^1]: コンポーネントはクラスにしろ関数にしろ`typeof`が`function`となりますので、そのまま`state`にセットしようとすると、更新関数とみなされて失敗するパターンがあることは要注意です。
メールキューの縮小手順(デフラグ)

メールキューファイルが肥大化すると、ドライブを圧迫する。本来は増加を見越してサイジングをすべきだが、それ以外の対応としてデフラグ処理でサイズを小さくできる。

注意点:
A.メールキューファイル以上の空き容量が必要。デフラグ用の一時領域として使用される
B.サービス停止を伴うためデフラグ中はメール送受信が不可

手順:
1.コマンドプロンプトを管理者権限で起動
2.Microsoft Exchange Transport Serviceを停止
3.cd C:\ProgramFiles\Microsoft\ExchangeServer\V15\TransportRoles\data\Queue
4.Eseutil /d "mail.que"
5.Microsoft Exchange Transport Serviceを起動

手順3のメールキューのフォルダーは環境によって変更している場合があるため、環境に合わせる。
[Rails6.0]Action Textで作成した内容をslimで表示する

# Action Textとは
Rails6からAction Textが追加され、とても手軽にリッチテキストエディタを実装できるようになりました。
導入に関しては多くの方が記事にされているのでここでは割愛させて頂きます。

このAction Textは、`has_rich_text`メソッドで指定したカラムに`ActionText::RichText`オブジェクトを保存します。
例えば以下のようなモデルがあったとき、

```app/model/article.rb
class Article < ApplicationRecord
  has_rich_text :content
end
```

保存された内容は

```erb
<%= @article.content %>
```

というような形でHTMLとして取り出せます。

# slimだとうまく表示されない？
これ、ERBなら綺麗に出力してくれるのですが、slimで

```slim
= @article.content
```

と書くとHTMLがそのまま文字として出力されてしまいます。

<img width="671" alt="スクリーンショット 2019-09-12 22.01.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449905/0b973b71-2592-8f6a-4909-d6526f16eeaa.png">


こんなHTMLむき出しのままではとてもじゃないけど使えない！
ERBならHTMLをタグとして扱ってくれるので、ERBで書き直すしかないのかと思っていたのですが…

# `=`ではなく`==`を使う

githubのissueによると、slimの`=`はHTMLの内容を**エスケープして**表示してくれるようです。

https://github.com/rails/rails/issues/36955

なのでこの場合は`=`ではなく`==`を使うことでHTMLの内容をエスケープせずに表示することができます。

```slim
== @article.content
```

<img width="671" alt="スクリーンショット 2019-09-12 22.02.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449905/d675b4ff-2793-cf9e-7280-53589094c42d.png">


期待通りの結果になりました！

# エスケープしなくて大丈夫なの？

HTMLをエスケープしてしまったら、XSSの脆弱性は大丈夫なの？と思ったので

```javascript
<script>
  alert('XSS');
</script>
```

をフォームの入力に含めて保存してみました。
alertが表示されると思ったのですが…

<img width="671" alt="スクリーンショット 2019-09-12 22.23.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449905/fa8a7039-9191-4aae-112a-51067596725e.png">


scriptタグはちゃんとエスケープしてくれます。なんで？
[slimのREADME](https://github.com/slim-template/slim/blob/master/README.jp.md)を読んでみましたがイマイチ理由が分からず。どなたかコメントでご教授いただけると幸いです。

# まとめ

兎にも角にもAction Textとslimを両立させることができて一安心です。

何か直すべき点、間違った記述があればコメント等で指摘していただければと思います。

# 参考文献

https://railsguides.jp/action_text_overview.html
https://tech.mof-mof.co.jp/blog/rails6-actiontext.html
剰余演算の符号は「被除数と同符号」な言語が多い, ただし Python と Ruby を除く

いままで何気なく剰余演算, 例えば `5.5 % 2.0 == 1.5` を書いてましたが, 実は結構危うかったので報告します. 本記事の内容は全部 [wikipedia](https://ja.wikipedia.org/wiki/%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97) に載っているんですけどね.

# 剰余演算

2 つの正の数 $x$, $l$ (整数でも整数でなくてもよい) が与えられたとき
$$x = n l + r$$
を満たす非負の整数 $n$ と実数 $r \in [ 0, l )$ が一意に存在します. そこで $n$ を __商__ (quotient), $r$ を __剰余__ (remainder) と呼び, $r$ を $x \% l$ と書きます. また, 等式
$$r = x \% l$$
において $x$ を __被除数__ (dividend), $l$ を __除数__ (divisor) と呼びます. ここまでは人類の常識ですね.

問題は, $x$ または $l$ が負の数を取り得るように剰余演算を拡張する際に生じます. つまり, 2 つのゼロでない数 $x$, $l$ が与えられたとき, やはり $n \in \mathbb{Z}$ および適当な区間 $I$ に含まれる $r$ を用いる一意的な表示
$$x = n l + r$$
が存在しますが, 「適当な区間」$I$ つまり剰余 $r$ の取り得る範囲はどのように設定すべきでしょうか?

この問題に対する考えられる解答としては次の 4 パターンがあり得ます.

* __常に正__: $r \in [ 0, | l | )$. 
* __除数と同符号__: $l > 0$ のとき $r \in [ 0, l )$, $l < 0$ のとき $r \in ( l, 0 ]$.
* __被除数と同符号__: $x > 0$ のとき $r \in [ 0, | l | )$, $x < 0$ のとき $x \in (-|l|, 0 ]$.
* __0 に近い側__: $r \in ( -|l|/2, |l|/2 ]$.

どの選択肢を採用するかは純粋に定義/仕様の問題です. そして困ったことに, 言語ごとに仕様が異なるのです.


# 整数型の場合

`%` 演算子として提供される整数剰余演算は, 多くの言語で __被除数と同符号__ が採用されています. これには C/C++, Go, Java, JavaScript, Julia, OCaml, PHP, Rust などが含まれます. Fortran の `mod` 関数もそうです. しかし, そうでない言語も多くあります:

* __除数と同符号__: Lua, Mathematica, Python, Ruby など.
* Lisp, Prolog, Haskell, Julia: これらの言語はいずれも `mod` が除数と同符号, `rem` が被除数と同符号の演算になっています. なお Julia では `%` は `rem` の意味です.

そう, __Python/Ruby と C/C++/Julia/Rust で仕様が違う__ のです. さらに言うと, これに伴って __除算の結果__ (上の記法では整数 $n$) も両グループ間で一致しないということになります. なぜならば, (整数の場合) 商 $n = x/l$ とは $x = n l + r$ を満たす整数 $n$ ですから, 剰余 $r$ が違えば商 $n$ も変わります. 実際, Python では `-3//2 == -2`, C/C++/Rust 等では `-3/2 == -1` になります. 

# 浮動小数点数の場合

浮動小数点数に対しても演算子 `%` が定義されている言語は限られていますが Rust と Python, Julia ではちゃんと定義されていて, 整数型のときと同じ仕様になっています. なお C/C++ は `fmod`/`std::fmod` 関数がこの機能を提供します. 

# 補足

* Python の `math.fmod` 関数は __被除数と同符号__ な剰余演算を提供します. 
* Ruby の `Numeric#remainder` 関数は __被除数と同符号__ な剰余演算を提供します. (コメントに基づいて追記 2019-09-15)
* Fortran の `mod` 関数は __被除数と同符号__, `modulo` は __除数と同符号__ な剰余演算を提供します. (コメントに基づいて追記 2019-09-15)
* ゼロによる剰余 ($x\%0$) はゼロ除算と同じく定義されません. Rust で検証したところ, コンパイラが気づいたらコンパイルが通らず, 通ってしまった場合, 整数ならパニックし, 浮動小数点数なら NaN になりました. Python では整数/浮動小数点数どちらもエラーになります.

# 参考文献

* [剰余演算 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%89%B0%E4%BD%99%E6%BC%94%E7%AE%97)
* 先行研究その1: [C++における負の整数の割り算および余りについて](https://qiita.com/MusicScience37/items/e5dea9b0f31c60f9ffe7)
* 先行研究その2: [余り(剰余)の性質をプログラムに活かす](https://qiita.com/yaju/items/aad350c6662d9d3b77cd)
* 先行研究その3: [負数の剰余を計算してはならない](https://shunirr.hatenablog.jp/entry/20120409/1333993409)
Railsチュートリアル１章でつまづいたこと

　つい最近Railsチュートリアルの1週目を完了しました。全部を通して見て一番大変だった部分はと聞かれると、やはり第1章かなと思います。難度的には優しいとは思うんですが、初めからわからないことだらけだったので、結構苦戦しました。ですので、今回は第1章付近で僕が苦戦した部分とその解決法を３つほど書いていきます。確かこの３つで一週間近く潰れた気がします。

開発環境
  macbookPro2018 13inch
  AWS cloud9

## ssh鍵にメールアドレスはいらない
　第１章　1.4.3でgitbuketにssh鍵を登録する場面があります。sshキーの作成方法は「[秘密鍵・公開鍵を作成する（Mac）](https://qiita.com/reflet/items/0c338df07d9f6c6ef776)」がわかりやすかったので、そちらを参照してください。

ssh鍵は

```
$ cat ~/.ssh/id_rsa.pub
ssh-rsa AA......... == example@example.com
```

で見ることができます。（コードは見やすくする為に「...」で省略してます。）ただし、この中には一部必要ないものもあります。それがメールアドレスの部分です。上のコードでいう

```
example@example.com
```

の部分はssh鍵に必要ない部分なので、その部分以外をgitbuketに登録すれば大丈夫です。

## 起動するたびにherokuがない
　herokuをインストールするコードはRailsチュートリアルに書いてあって、実際それを実行すればheroku自体を使うことはできます。しかし、翌日になって見たら使えない。というかherokuのバージョン調べて見たらこう出てきた。

```
$ heroku -v
heroku: command not found
```
　消えとるやん！でも、まあ消えてるなら入れるしかないので、もう一度入れ直す。一応正常に動く。
　翌日。また消えとるやん！また入れる直す。一応正常に動く。予想通り翌日にまた消える。

　正直、これは入れ直せばいいだけなので、何とかなります。自分もこの状態でRailsチュートリアル最後までやりました。ただ、めんどいので改善を試みました。
　具体的にやったことは２つあって、この２つをやったらherokuが消えなくなりました。ただ、どこで消えなくなったのかわからないので、もしかしたらどちらかだけでも改善するかもです。
　２つともbashというシェルスクリプトに関するものです。シェルスクリプトはまあ、人間とpcの仲介人みたいなものだそうです。詳しくはわからないので、とりあえず試したことだけ記載しときます。

###1
 $vi ~/.bashrcを開いてその一番下の行に下記コードを追加すること

```
source $HOME/.profile > /dev/null
```

　[herokuをインストールしたはずが、消えていた](https://teratail.com/questions/157274)参照

###2
　~/.bash_profileを作成すること

```
$ touch ~/.bash_profile
```

[.bash_profileと.bashrcのまとめ](https://qiita.com/takutoki/items/021b804b9957fe65e093)参照


## herokuにデプロイする前にyamlを変更する

　Railsチュートリアルでは開発環境をMYSQL,
herokuでの本番環境の時はPostgreSQL
という風に分けられてます。
　Railsチュートリアルでは、Gemfileだけそのように記述しているわけなんですが、
これだと多分下記のようなバグが発生します。

```
2018-11-02T03:02:43.589214+00:00 app[web.1]: /app/vendor/bundle/ruby/2.4.0/gems/activerecord-5.1.6/lib/active_record/connection_adapters/connection_specification.rb:188:in `rescue in spec': Specified 'sqlite3' for database adapter, but the gem is not loaded. Add `gem 'sqlite3'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord). (Gem::LoadError)
```

バグを発生させない為には、
configディレクトリ内にあるdatabase.ymlのproductionを下記のように変更する必要があります。

```database.yml
production:
  <<: *default
  database: db/production.postgresql
```

[Railsチュートリアル第一章　Herokuへデプロイすると"Application error"](https://teratail.com/questions/155754)参照
tsx in Nuxt.js (Composition API 先取り)

`Vue Composition API` の発表が先日ありましたが、 `Nuxt v2.9.2` でそれを使って `tsx` を書く環境の構築に中々ハマったので、備忘録も兼ねてまとめておきます。

## はじめに

[公式](https://typescript.nuxtjs.org/)を参考に、 `TypeScript` 環境を構築しておいてください。また、邪悪な `JavaScript` の駆逐のためにも、 `@nuxt/typescript-runtime` は忘れずにインストールしましょう。

## セットアップ

まず、必要なものをインストールします。

```shell
$ yarn add @vue/composition-api
$ yarn add -D babel-preset-vca-jsx
```

次に `plugin` を登録します。これは[公式](https://github.com/vuejs/composition-api)の通りなので、コピペさせていただきます。

```typescript
// @/plugins/compositionAPI.ts
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);
```

```typescript
// nuxt.config.ts
const config: Configuration = {
  ...
  pliugins: ['@/plugins/compositionAPI.ts'],
  ...
}
```

最後に、`babel` の設定を拡張します。 `tsx` で書くためには、 `createComponent ` を `h` にマッピングしてもらわないとできないので、 `babel-preset-vca-jsx` の力を借ります。自分はここに気づくのにハマってしまいました。

```typescript
// nuxt.config.ts
const config: Configuration = {
  ...
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [require.resolve('babel-preset-vca-jsx')],
          [
            require.resolve('@nuxt/babel-preset-app'),
            {
              targets: isServer ? { node: 'current' } : { ie: '9' },
            },
          ],
        ]
      },
    },
  },
  ...
}
```

## サンプル

```typescript
// hoge.tsx
import { createComponent } from '@vue/composition-api'

export default createComponent({
  setup() {
    return () => (
      <div>
        <p>hogehoge</p>
      </div>
    )
  },
})
```

## 終わりに

以上で `tsx` で書けるようセットアップができました。あとは、[Composition API](https://vue-composition-api-rfc.netlify.com/)や、[React hooks との比較](https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32)等を参考にして、型安全で幸せな `tsx` ライフを送っていきましょう。
C#の重箱の隅をつつく　～引数の位置で処理効率がビミョーに変わる～

# TL;DR

`public static int Add(int cx, int dx, int r8, int r9, int s1, int s2, int s3, int s4)` [^1]

のような割とアレなメソッドが有ったとき、`cx～r9`に対する処理と`s1～s4`に対する処理で、前者の方がわずかに速かった。

但し、今回の検証は、逆アセンブリ眺めていて、ホントに差が出たら楽しいな的な、完全に逆側からのアプローチしてみて、**ホントに差が出たね～。うれし～な✨**って意味しか無いので、その辺ご了承の程

[^1]: 見る人が見ればこれ見ただけで何やりたいのか、どー言う結論なのかすぐわかっちゃう程度のネタばらしではあるw


# 試してみたこと

```cs
	public class ParameterPositionBench
	{
		private const int Iteration = 800_000_000;

		[MethodImpl(MethodImplOptions.NoInlining)]
		public static int AddReg(int cx, int dx, int r8, int r9, int s1, int s2, int s3, int s4)
		{
			return cx + dx + r8 + r9;
		}

		[MethodImpl(MethodImplOptions.NoInlining)]
		public static int AddStack(int cx, int dx, int r8, int r9, int s1, int s2, int s3, int s4)
		{
			return s1 + s2 + s3 + s4;
		}

		[Benchmark]
		public int UseRegister()
		{
			var accum = 0;

			for (int i = 0; i < Iteration; i++)
			{
				accum += AddReg(++i, ++i, ++i, ++i, ++i, ++i, ++i, ++i);
			}

			return accum;
		}

		[Benchmark]
		public int UseStack()
		{
			var accum = 0;

			for (int i = 0; i < Iteration; i++)
			{
				accum += AddStack(++i, ++i, ++i, ++i, ++i, ++i, ++i, ++i);
			}

			return accum;
		}
	}

```



こいつを試してみて差が出るか?と言うことで試したら、以下の結果を得た

``` ini

BenchmarkDotNet=v0.11.5, OS=Windows 10.0.18362
AMD Ryzen 7 1700X, 1 CPU, 16 logical and 8 physical cores
.NET Core SDK=2.2.402
  [Host]     : .NET Core 2.2.7 (CoreCLR 4.6.28008.02, CoreFX 4.6.28008.03), 64bit RyuJIT
  DefaultJob : .NET Core 2.2.7 (CoreCLR 4.6.28008.02, CoreFX 4.6.28008.03), 64bit RyuJIT


```
| Method      |     Mean |     Error |    StdDev |
| ----------- | -------: | --------: | --------: |
| UseRegister | 240.7 ms | 0.4538 ms | 0.4245 ms |
| UseStack    | 261.6 ms | 0.3216 ms | 0.2851 ms |



えらく微妙だけど差が出てるは出てる。



# なぜ差が出るのか

ぱっと見た感じ、`AddReg`の方は、前半分の4つの引数を加算してるし、`AddStack`の方は、後ろ半分の4つを加算してるので、本来差が出そうにはない。

これがなんで差が出てしまうかというと、[x64 calling convention](https://docs.microsoft.com/ja-jp/cpp/build/x64-calling-convention?view=vs-2019#parameter-passing)に書いてある

>The first four integer arguments are passed in registers. Integer values are passed in left-to-right order in RCX, RDX, R8, and R9, respectively.　Arguments five and higher are passed on the stack. 

の通り、引数が整数の場合、最初の4つはレジスタ渡し、それ以降はスタック渡しになるので。

で、スタック渡しよりレジスタ渡しの方が速くなるんじゃなかろうか?

と適当に考えて適当に試してみたら本当に速かった。



# インライン処理されると無意味に　～まとめにかえて～

今回の検証というか重箱の隅つついてみた結果は重箱の隅つついたらやっぱり差が出た程度の意味しかやっぱり無い。

推測も含むけど、この程度の極めて単純な処理であれば、概ね全てかL1キャッシュに乗るのでメモリとのやりとりにはならないだろうし、実際ならないからこそこの程度の差しか出なかったと考えられる。

そして、`[MethodImpl(MethodImplOptions.NoInlining)]`こいつを付けないと、実は全く同じ処理になるw

これは、NoInlining処理しないと極めて単純すぎるためInliningされて未使用変数の除去が発生し、結果同じバイナリになってしまう。

逆に、属性無しでもInliningされない程度に複雑な処理であれば、この程度の差は実処理の処理時間のノイズに紛れて多分差異が見いだせないかと。

なので、今回の件は、**逆アセンブリで推測されることが実際差異として出てくるの?**って気になって試したら実際目に見える形で差異が出てきたよていどの話にしかならないんじゃないかなと思います。
Docker for WindowsでMariaDBのデータを永続化

# はじめに

『[Laravel環境をDockerで](https://qiita.com/imp555sti/items/affa9800ce20a4d34c45)』から始めたDocker for Windows生活
ネットの記事を見て見様見真似でやってみるもMariaDBのデータ永続化ができゃしない
かならずエラーが発生してMariaDBが起動しない状態

回避方法は無いか漁ってたらある[Issue](https://github.com/docker-library/percona/issues/42)にたどり着きました。
そしてそこには回避方法も記載されているではありませんか！
って事で困りごと1つ目のMariaDBのデータ永続化についてご紹介します。

## 環境
- Windows10 Pro
- docker for windows (docker desctop community) (ver.2.1.0.2)

# docker-compose.yaml(失敗例)

MariaDBが起動しない場合のDockerfileおよびdocker-composeをご紹介します。
一般的なMySQLの手法としてこのような記述のサイトが多いかと思います。

```yaml:docker-compose.yaml
version: '3'
services:
  mariadb:
    container_name: laravel_mariadb
    build: ./mariadb/
    image: laravel_mariadb:10.4.7
    ports:
      - 3306:3306
    volumes:
      - ./mariadb/data:/var/lib/mysql          # ← 問題の箇所
    environment:
      - MYSQL_DATABASE=laravel_db
      - MYSQL_ROOT_PASSWORD=root@1234
      - MYSQL_USER=laravel
      - MYSQL_PASSWORD=laravel@1234
```

この場合、MariaDBのBuildは成功しますが、upするとInnoDB作成時にエラーを履いてこけます。

# docker-compose.yaml(成功例)

[Issue](https://github.com/docker-library/percona/issues/42)を元にした例です。
MariaDB用のVolumeをコンテナ化しているのがポイントとなります。

```yaml:docker-compose.yaml
version: '3'
services:
  mariadb:
    container_name: laravel_mariadb
    build: ./mariadb/
    image: laravel_mariadb:10.4.7
    ports:
      - 3306:3306
    volumes:
      - dbvolume/data:/var/lib/mysql          # ← 問題の箇所
    environment:
      - MYSQL_DATABASE=laravel_db
      - MYSQL_ROOT_PASSWORD=root@1234
      - MYSQL_USER=laravel
      - MYSQL_PASSWORD=laravel@1234

volumes:                                      # ← Volumesでデータ領域をコンテナとして定義
  dbvolume:
```

これでコンテナのVolumeを消さない限りはデータは存続できます。

これで1点は解決しました！

# 参考

- [can mount volumes from host for MySQL data on Windows Docker #42](https://github.com/docker-library/percona/issues/42)
Railsでの動的タイトル表示を実装した

どうも、Rails学習2ヶ月とちょっとのChihaと申します。
タイトルの通りです。スクールでのチーム開発にて触る機会があったので備忘録。

## 開発環境
- Ruby on Rails 5.2.2
- Ruby 2.5.1
- haml-rails

## 動的タイトル表示とは？
そもそもの話、ここで言うタイトルとはブラウザのタブの所に表示される文字のことです。
それを、
![スクリーンショット 2019-09-12 21.44.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492745/cbc91b39-c77e-9e81-c292-0ae6129d495e.png)
![スクリーンショット 2019-09-12 21.52.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492745/db42832e-53a0-f336-f455-eb5fe1d82cdb.png)
こう言う感じで、ページの目的によって表示を変えるやつを実装しました。

ブラウザのタイトルは、views/layouts/application.html.erb(僕の環境ではapplication.html.haml)に書かれたhead内のtitleタグの中身を参照して表示されます。

```haml
!!!
%html
  %head
    %meta{content:  "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    %title FreemarketSample58a
```
こんな感じです。
![スクリーンショット 2019-09-12 21.50.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492745/ab392e99-9838-2b37-a93c-5a3a7157a8e2.png)

このtitleタグの中身は

```
$ rails new アプリケーション名
```
をした時のタイトルがそのまま書かれてます。
このままだと全てのページがFreemarketSample58aというタイトルになってしまいます。

そこで、全ページ同じ表記だと味気無いので変更しようと思ったわけです。
（というか作成してるアプリの見本が動的タイトル表示だった）
今回はcontent_forを使って実装しました。
（ほとんどこちらの記事そのままです。）
https://techracho.bpsinc.jp/hachi8833/2018_05_15/55812

```haml
/application.html.haml(または何かしらのレイアウトファイル)
!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    %title 
      = content_for?(:html_title) ? yield(:html_title) : "FreemarketSample58a" 
```

今回はcontent_forで:html_titleが飛んできていた場合、そのまま表示させてあげる設定にしました。

ビューファイルには、適当な場所に

```haml
/show.html.haml(何らかのビューファイル)
- content_for(:html_title) {'表示させたい内容'}
```

としてあげると表示できます。僕は他の記述と混ざらないように１行目に置きました。
最初はタイトルの数だけレイアウト置くなどというトンデモコーディングしてました。流石にメンターに注意されました。反省。

ということで、これで無事に動的タイトル表示が実装できました。

## 最後に
引き続き細々と記事書ける気力があった時に書いていこうかなと思います。
まだまだ学習２ヶ月ほどのド初心者ですので、より良いコード、間違った点などがあればご教授頂けると幸いです。

## 参考記事
https://techracho.bpsinc.jp/hachi8833/2018_05_15/55812
Redmineのプロジェクトメニューから概要と活動を削除する(超簡単プラグイン作成)

# やりたいこと
プロジェクトメニューにある【概要】と【活動】のタブを削除したい。
こんな感じにしたい。
![概要活動削除.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207850/d9833256-a90d-3496-7e55-f209f72d83bc.png)


# 参考
[Computer Practice]
(http://cpractice.seesaa.net/article/168636970.html)

[Redmineのプラグイン(Plugin)を開発する~個人的まとめ~　@KTakata ]
(https://qiita.com/KTakata/items/d53eec3f71644ca7d9ff)

[Redmineガイド -プラグイン チュートリアル-]
(http://guide.redmine.jp/Plugin_Tutorial/)

# 動作環境
Redmine 3.4.3
Ruby 2.4.2
Rails 4.2.8

# やり方
2つの方法があります。
1つは
[プロジェクトメニューの項目表示順序の変更方法]
(https://qiita.com/tamaryoo/items/b06105b308f727ff13e4)
に書いた方法で[/var/lib/redmine/lib/redmine.rb]の277,278行目の

```
   menu.push :overview, { :controller => 'projects', :action => 'show' }
   menu.push :activity, { :controller => 'activities', :action => 'index' }
```
を削除します。

もう1つはプラグインを作成することで実装することも可能です。
超簡単なので開発できない人でもできると思います。

例:redmine_change_menuuiという名前のプラグインを作る
1.　プラグインの土台作成

```
# export RAILS_ENV="production"
おまじない。
# bundle exec rails generate redmine_plugin redmine_change_menuui
# bundle exec rails generate redmine_plugin_controller redmine_change_menuui # redmine_change_menuui index
# bundle exec rails generate redmine_plugin_model redmine_change_menuui change_menuui_model
# ls /var/lib/redmine/plugins/redmine_change_menuui/
redmine_change_menuuiができているのを確認する
```
2.　init.rbの編集
プラグインのファイルを編集します。
[/var/lib/redmine/plugins/init.rb]
上部の方はプラグインの基本情報(管理画面で表示される情報)を記載。
下部でプロジェクトメニューから消す項目を記載。
気をつけるのはプラグインで実装している項目はエラーとなるので消せません。

```rb:init.rb
Redmine::Plugin.register :redmine_change_menuui do
  name 'Change Project Menu UI plugin'
  author 'Ryosuke Yamamoto'
  description 'Delete overviews and activities from the project menu.'
  version '0.0.1'
  url 'https://qiita.com/tamaryoo'
  author_url 'https://qiita.com/tamaryoo'

Redmine::MenuManager.map :project_menu do |menu|
    menu.delete :overview
    menu.delete :activity
  end
end
```

3.　プラグインの実装
後はいつもどおりにプラグインを実装すれば完了です。(手順は割愛します)
マスタとトランザクション 

##マスタとは
・DBの主体となるテーブル。
・登録・参照処理が行われた場合に、マスタと位置付けされたDBがWhere条件に入る。
・日常的に流動するとは限らないテーブル。

(例)
・売上テーブル
・支払いテーブル

##マスタデータとは
＊企業内データベースなどで、業務を遂行する際の基礎情報となるデータのこと。それらを集約したファイルやデータベースのテーブルなど。

##マスタデータの特徴
・頻繁な追加・更新が発生しない。
・更新は管理者に限られる。
・データの管理を目的としている。

##トランザクションデータとは
企業の情報システムなどが扱うデータの種類の一つで、業務に伴って発生した出来事の詳細を記録したデータのこと。

##トランザクションデータの特徴
・日々追加・更新が発生する。
・更新は各ユーザーが行える。
・集客を目的としている。

##マスタとトランザクションの違い
マスタデータとトランザクションデータは、そもそもの利用目的が異なるため、テーブル設計をするときに「マスタなのかトランザクションなのか」を区別する必要がある。
この二つのデータ種別を、勤怠管理のデータ構造に紐づけると以下のようになる。

| 種別 | カラム名 |
|:-----------|:------------|
| マスタデータ | 従業員、部署、勤務体系、役職 |
| トランザクションデータ |勤務時間、休憩時間 |

トランザクションデータのプライマリと、マスタデータのプライマリを紐づけておくと、管理がしやすくなる。
残業時間だけ別カラムで分けると、会社全体の残業時間の算出とかも容易にできそう。


##テーブルとは
・DBの用途によって種類分けされたデータが格納された情報。
Ruby on Rails5でid以外のカラムを主キーに設定している場合にidを取り出す

スキーマレベルではPrimary keyを変えていない場合でも、モデル定義の中で主キーを変えることができます。
もともとはRailsの規約どおりに`id`を主キーとして使っていたけれども、途中からUUIDを主キーとして使うようになって↑のようなことをするケースもあるのではないでしょうか。

```ruby
class Foo < ApplicationRecord
  self.primary_key = 'uuid'
end
```

しかし、これをするとDBのレコードには入っているはずの`id`を`foo.id`のような形で取り出すことができなくなります。
Railsコンソールに入って次のようにやってみると試すことができます。

```ruby
> Foo.class_eval { primary_key = 'created_at' }
> Foo.first.id
```

`created_at`の値が返ってくるかと思います。

この場合、レコードに入っている`id`を取り出すには、次のようにします。

```
foo.attributes['id']
```

(余談)
もともとRails3で動いていたプロジェクトをRails5を使うように一気にアップデートしているときに、`foo.id`がidカラムの値ではなくて`self.primary_key`に与えたカラムの値を返すように変わっていることに気づきました。
なのでいつからか仕様変更があったようです。
MacのターミナルでPythonのバージョンを切り替える方法

#MacのターミナルでPythonのバージョンを切り替える方法

MacではターミナルからPythonを初めからコンパイルすることが可能です．
しかし，バージョンがPython2. だったりPython3.だったりすると思います．

そこで切り替える為の，コマンドを下に記します．

```:python.py
alias python="python3"
```
マイクロマウスをはじめまチュー（１）

#はじめに
電子工作を始めて４か月ぐらい経ちました。
これまで、下記の本を見ながら、実際に物を作ってきました。

- 「カラー図解 Rasperry Piではじめる機械学習 基礎からディープラーニングまで」
- 「カラー図解 最新 Raspberry Piで学ぶ電子工作 作って動かしてしくみがわかる」
- 「実例で学ぶRaspberry Pi電子工作 作りながら応用力を身につける」
- 「Raspberry Piで学ぶ ROSロボット入門」
- 「60日でできる！二足歩行ロボット自作入門」
- 「二足歩行ロボット 工作＆プログラミング」

ここまでやってきて、そろそろ何か本格的にやってみたいと思っています。
何をやるにしてもモチベーションを維持するためには、何かの大会に出場するのが良いと考えました。
まず思いついたのが、二足歩行ロボットの格闘競技大会である[「ROBO-ONE」](http://www.robo-one.com/)だったのですが、
オフィシャルWEBサイトの情報を読んでいくと、これはハードルが高すぎると感じました。
そして、他のロボットの大会を探していって、[「マイクロマウス競技会」](https://www.ntf.or.jp/mouse/)に行きつきました。

#思い立ったが吉日
マイクロマウス競技会には、いくつかの競技があるのですが、クラシックマウス競技に関するWEBサイトが多かったので、この競技に出場することを目標に定めました。
まずハードウェアから作ろうと思ったのですが、あまり知識がない状態では難しいと感じ、組み立てキットの[「Pi:Co Classic3」](https://www.rt-net.jp/products/pico3)を購入し、ソフトウェアの作成に注力することにしました。この組み立てキットは、約5万円ぐらいするので購入を躊躇してしまいますが。
[アールティロボットショップ](https://www.rt-shop.jp/)に注文したら、すぐに届きました。

さあ、マイクロマウスをはじめまチュー。
![IMG_20190912_214158.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490861/cb2c3e8b-6e67-c201-1e50-713f4eb6f781.jpeg)
PelemayのサンプルDemoを動かしてみる

# はじめに
- Hastega改め[Pelemay](https://github.com/zeam-vm/pelemay)と言うそうです
- [山崎先生](https://twitter.com/zacky1972)のプレゼンテーション [ElixirConf 2019 - Return of Wabi-Sabi: Hastega Will Bring More and... - Susumu Yamazaki](https://www.youtube.com/watch?v=uCkPyfFhPxI) の29分ころからはじまるDemoをやってみたいとおもいます
- 私のMacには、[Homebrew](https://brew.sh/index_ja)でインストールした[Elixir](https://elixir-lang.org/)がインストールされています

```bash
$ elixir -v
Erlang/OTP 22 [erts-10.4.3] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe] [dtrace]

Elixir 1.9.0 (compiled with Erlang/OTP 22)
```

# Demoをやってみる

```bash
$ git clone https://github.com/zeam-vm/pelemay.git
$ cd pelemay/
$ mix deps.get
$ mix bench
(略)
## LogisticMapBench
benchmark na iterations   average time 
Accelerated        5000   739.98 µs/op
Enum               1000   1566.13 µs/op
Flow                500   3899.45 µs/op
```

- 実行しているマシンが違うので結果は[YouTube](https://www.youtube.com/watch?v=uCkPyfFhPxI)とは違いますが傾向は同じなので成功でしょう
    - git clone しかしていないような……
    - いやいや `mix bench` なるものははじめて知ったし、「人類にとっては小さな一歩だが、[@torifukukaiou](https://twitter.com/torifukukaiou)にとっては大きな飛躍である!」 
        - あれ！？
- 私が実行しているマシン
    - macOS Mojave バージョン 10.14.6
    - MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
    - プロセッサ 2.5GHz Intel Core i7
    - メモリ 16 GB 2133 MHz LPDDR3
    - グラフィックス Intel Iris Plus Graphics 640 1536 MB

# 少し中身をみてみる
- lib/sample.exの中に以下が定義されている
    - [Sample.logistic_map](https://github.com/zeam-vm/pelemay/blob/7efbe5a2757466a77a7b2450ec15737efa7b62f2/lib/sample.ex#L51): use [Pelemay](https://github.com/zeam-vm/pelemay)
        - defpelemayっていうので包まれている感じ
    - [Sample.flow_logistic_map](https://github.com/zeam-vm/pelemay/blob/7efbe5a2757466a77a7b2450ec15737efa7b62f2/lib/sample.ex#L80): use [Flow](https://github.com/plataformatec/flow)
    - [Sample.enum_logistic_map](https://github.com/zeam-vm/pelemay/blob/7efbe5a2757466a77a7b2450ec15737efa7b62f2/lib/sample.ex#L66): use [Enum](https://hexdocs.pm/elixir/Enum.html)
- defpelemayの下のいくつかの関数はベンチマークのDemoには関係なさそうにみえたので消してみる
    - `mix bench` うん、うごいた、うごいた

```diff
diff --git a/lib/sample.ex b/lib/sample.ex
index ca73ee0..855d56c 100644
--- a/lib/sample.ex
+++ b/lib/sample.ex
@@ -20,34 +20,6 @@ defmodule Sample do

   defpelemay do
-    def list_minus_2(list) do
-      list
-      |> Enum.map(&(&1 - 2))
-    end
-
-    def list_plus_2(list) do
-      list
-      |> Enum.map(fn x -> x + 2 end)
-    end
-
-    def list_mult_2(list) do
-      list
-      |> Enum.map(fn x -> x * 2 end)
-    end
-
-    def list_div_2(list) do
-      list
-      |> Enum.map(&(&1 / 2))
-    end
-
-    def list_mod_2(list) do
-      list |> Enum.map(&rem(&1, 2))
-    end
-
-    def list_mod2_plus1(list) do
-      list |> Enum.map(&(rem(&1, 2) + 1))
-    end
-
     def logistic_map(list) do
       list
       |> Enum.map(&rem(22 * &1 * (&1 + 1), 6_700_417))
```
- 余りを計算することを繰り返しているとおもうのですが、6700417ってなにだろう?
    - [第五フェルマー数の余素因数](http://integers.hatenablog.com/entry/2016/05/09/212026)
    - これかな?
    - あっていたとしても ??? なのですがアタクシには

- bench/logistic_map_bench.exs にベンチマーク用のコードが書いてある
npmとJasmineでテスト環境を整える

Jasmineの公式URLをたどってのインストールが手間なため、npmを使ってコマンドラインで簡単にインストールする手順をまとめました。

# (1/5)環境 + ツール
- Windows
- Windows PowerShell
→ Git Bash でもOK
- node.js
- Jasmine

※node.jsはすでにインストールされているものとします。

# (2/5)Jasmine をインストール
npm公式：[jasmine - npm](https://www.npmjs.com/package/jasmine)

まずはWindows PowerShellを起動。
プロジェクトのルートディレクトリ( C:\Users\●●●●●\project )に移動し、npm を使って Jasmine をインストール。

```
C:\Users\●●●●●\project> npm install --save-dev jasmine
```

yarn がインストールされている場合は ~~yarn install jasmine~~ → yarn add jasmine でも可能。
処理が完了すると、ルートディレクトリ内に以下のファイルとディレクトリが作成されます。
参考：
・[yarn install | Yarn](https://classic.yarnpkg.com/lang/en/docs/cli/install/)
・[jasmine | Yarn - Package Manager](https://yarnpkg.com/package/jasmine)

```
node_modules
package-lock.json
```

# (3/5)Jasmine の準備
次に先ほどインストールした Jasmine を用いて、プロジェクト内で Jasmine を使う準備をします。
以下のコマンドを実行してください。

```
C:\Users\●●●●●\project> node_modules/.bin/jasmine init
```

すると、ルートディレクトリ内に spec ディレクトリが追加されます。

```
node_modules
spec
┗ support
   ┗ jasmine.json
package-lock.json
```

テスト対象となる js ファイルや、テスト処理を書き込んだ js ファイルは spec ディレクトリ直下に配置します。

# (4/5)テストコードを書く
Jasmine を使った単体テストには以下の2つのファイルが必要です。
- テスト対象となる js ファイル
- テスト処理を書き込んだ js ファイル

以降、両者のサンプルを作成していきます。

## helloWorld.js (テスト対象となる js ファイル)
```JavaScript:helloWorld.js
var helloWorld = function() {
  return 'Hello, World!';
}

module.exports = helloWorld;
```

## helloWorld_spec.js (テスト処理を書き込んだ js ファイル)
```JavaScript:helloWorld_spec.js
var helloWorld = require('./helloWorld');

describe('Hello World', function() {
  it('says hello world', function() {
    expect(helloWorld()).toEqual('Hello, World!');
  });
});
```
上記2つのファイルを作成した後のディレクトリ構成は以下。

```
node_modules
spec
┣ support
┃ ┗ jasmine.json
┣ helloWorld.js (追加)
┗ helloWorld_spec.js (追加)
paclage-lock.json
```
# (5/5)テスト実行
以下コマンドでテストを実行します。

```
C:\Users\●●●●●\project\spec> ../node_modules/.bin/jasmine helloWorld_spec.js
```

実行後、コードに間違いがなければ以下が表示されます。

```
Randomized with seed ○○○○○
Started
.


1 spec, 0 failures
Finished in 0.026 seconds
Randomized with seed ○○○○○ (jasmine --random=true --seed=○○○○○)
```

これで「npmでJasmineをインストールした後テスト環境を整えるまで」の手順は完了です。

# 参考
こちらの記事を参考にさせていただきました。

- [jasmine - npm](https://www.npmjs.com/package/jasmine)
→ npm公式のJasmineモジュール。
- [Node.js Setup](https://jasmine.github.io/setup/nodejs.html)
→ npm で Jasmine をインストールした際の設定手順を解説。
- [【JavaScript】TDDをするためにNode.jsとJasmineを導入する（Ubuntu 16.04） - Learning to Code](http://yzume.hatenablog.com/entry/2018/02/02/010136)
Automation Anywhere★基本入門「Loop①」★

「Loop　①」です。
繰り返し処理しましょう。:yum:
今回は、一番使用頻度が高い「ExcelのLoop」です
単純に、列への連続データ入力を行います。


※Automation Anywhere★基本入門「Excel」★で、取得データ表示をMessage BOXで行っています。


「Excel」コマンドを開き、開く準備を行ってください。
どの列にデータを連続入力を行いたいか→「B列に入力を行いたい」
なので「Specific Cell」に値を設定

◆ここでシステム変数を使用します。
counterをF2で探してセットし、入力を行いたい列を先頭に指定

「B counter」→B列でカウンターを回すよ

他にもExcelコマンドを使用した入力方法もありますが、そのBot作成にあったやり方を臨機応変に設定すればOKです。

「Cell Value」へ入力値を設定しSaveします。

<img width="270" alt="999.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489732/1c75f085-286a-f4b9-efb3-422f04399ff7.png">



「Loop」コマンドを開きます。
ExcelのLoopを行うので、前回同様にExcel～をチェック
Saveして閉じると、、、「End Loop」が一緒にセットされます

<img width="246" alt="99無題.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489732/8a583766-db25-2214-5be7-d1a083310871.png">

Loopの中に緑のコードが入りますが「comment」なので、削除してもコメント入力しても,どちらでもOKです。

最後に「close spreadSheet」を入れて、AA自体をSaveします。
Runしてみて下さい。

・B列に
・連続してデータが入力され
・A列のデータ数分繰り返して終了
・保存して閉じる

・Excelファイルを開き、正しく入力がされている事を確認。

この動作となれば完成です。

<img width="541" alt="無題.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489732/30118b94-5053-cc1c-d5c2-907c74f3f246.png">


さて、ここ「おや？」と思った方がいらっしゃいますでしょうか？
「・A列のデータ数分繰り返して終了」なのですが。。。。
なんでA列が？？

AAでExcelを扱う際に「Get All Cells」をOpenとセットで組み込む事が多いのです。
「Get All Cells」する事で「AAがExcelにあるデータ全体を保持」して、そのデータを操作しているので「・A列のデータ分～」と記載しました(例外もありますが)

もし、連続データ入力が止まらない場合、データ入力されている場所以外に「何かが入力されている」事があるので、適当な場所までを行削除して、再度Runしてみて下さい、だいたいコレで解決します。
解決しない場合は、セル範囲を選択するという事も可能です。


とても基本的な「Loop」操作です。
AAは「データが、ファイルが、フォルダがetc」ある限り、あったらなかったら等でLoopを実行するシンプルで分かりやすい内容で設定を行っています。

Loop　②では、もう少し実務に近い形のLoop処理を行いたいと思います。









Automation Anywhere　★基本入門★
「Loop①」これにて終了！
お読みいただき、ありがとうございました:kissing_closed_eyes:


次回は「IF」を使用して、条件分岐で好きな動物に💖をつけます。








![uploading-0]()
新Edgeブラウザ登場に伴うIEサポート終了についてチームのコンセンサスを得るためのシンプルなテンプレ

> ポエムです。コードは一行もでてきません。

Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。

とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず…

そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。

> かれこれ2年前(2017年)。
> 今のサービスがまだ設計段階だったころに、
>  「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、
> ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、
>  「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、
> なかなか強烈な拒否反応がバコーンと返ってきたりしてたもんです。

あれから2年が経過し、実際の顧客の姿も色々と見えてきたので、前回の反省も踏まえ、恐る恐るチームのSlackに(↓)こんな投げ込みをしてみました。


----

サマリ: 2020年のWindows UpdateでEdgeブラウザの中身が入れ替わり、ほぼChrome相当になります。
IEは限られた人だけが利用するブラウザになるため、我々の○○サービスとしても対応が必要になります。



MSは2020年に実施されるWindows Updateで、
Windowsに付属のブラウザ(IE, Edge)についても大きなアップデートを行う予定です。

- Edgeブラウザの中身をChromiumベースで作り直し、旧Edgeを新Edgeで完全に入れ替えます
- 旧EdgeはWindows10限定でしたが、新EdgeはWindows7/8/8.1/10,iOS,Android,Macに配布されます
    - Windows7は2020/01でサポートが切れますが新Edgeは配布されます
- 一般ユーザがIEを使わなくなるように誘導されます
    - 旧Edgeブラウザのメニューに用意されていた現在のページをIEで開きなおす機能は、新Edgeブラウザに存在しません
    - 以前のIEのように、レスポンスヘッダによる誘導やmetaタグによるターゲットブラウザの指定はできません
    - IEを起動するためのトリガー(アイコンなど)がOSレベルで隠匿されるかどうかはTBDです
- 新EdgeにはIEタブ機能が用意され、企業のアプリケーション資産が引き続き機能するように配慮されています
    - IEタブはIE専用に書かれた(IEでしか動作しない)アプリケーション資産をもっている企業向けの機能です。一般ユーザは利用できません
    - 企業側が管理するホワイトリスト(URLのリスト)にマッチするページにアクセスすると自動的にそのページをIEタブで開きます

早ければ、2020年5月のWindows Updateでこの変化が訪れます。

新Edgeは https://www.microsoftedgeinsider.com/en-us/download/ でベータ版が配布されており、現時点で評価が可能です。

○○ のサポートブラウザは IE11, PC Chrome, Chrome for Android, Mobile Safari ですが、
ここにWindows上で動作する新Edgeブラウザのサポートを追加し、過渡期が過ぎたら IEサポートを段階的に終息させていけたらと考えています。

----

やるべき事や対応時期が明らかになっている事もあり、2年前のような反対意見もなく、賛成する意見に包まれました。

私の現場以外でも、同様のテーマで(水面下で)議論が行われていると思いますが、このエントリがそんな方々への一助になれば幸いです。

> 文中の○○の部分にはお好きな言葉を入れてご利用ください
Storybookでtypescriptファイルを拡張子なしでインポートしたい

`js`から`ｔｓ`に移行中、プロダクトはちゃんと`webpack.config.js`が設定されてるので動いたけど、
`Storybook`が壊れて困ったのでメモとして残しておく。

```js:.storybook/webpack.config.js
module.exports = async ({ config, mode }) => {
  ...
  config.resolve.extensions.push('.ts');

  return config;
};

```

こんな感じで設定すればOK。

[Debug the default webpack config](https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config)
にあるように、現状の`config`の`resolve.extensions`を確認した上で追加。
Gitのtagを理解する

# Gitのタグとは？
Gitのタグとはコミットにわかりやすい名前をつけたエイリアスです。
これによって履歴内の特定のコミットを参照しやすくなります。

# タグの種類
Gitのタグにはいくつかの種類が存在します。

### 軽量タグ(Lightweight Tags)

軽量タグは特定のコミットに名前のみを付ける事ができます。

### 注釈付きタグ(Annotated Tags)

注釈付きタグではコミットに「名前」・「コメント」・「署名」等の情報を付ける事ができます。
注釈付きタグの詳細は[こちら](https://git-scm.com/book/en/v2/Git-Basics-Tagging)を参考にしてください。

# タグを作成する

### 軽量タグ

以下コマンドで先頭のコミットに`tag-name`の名前を付ける事ができます。

```
$ git tag <tag-name>
```

### 注釈付きタグ
上記で記載した通り注釈付きのタグには名前以外の付随情報を付ける事が可能です。

以下のように`-a`で注釈付きタグを作成する事を明示し、`-m`でタグにメッセージを付ける事が可能です。
(作成者や作成日時はタグ作成時に自動で付与されます。)

```
$ git tag -a <tag-name> -m "message"
```

# HEAD以外のコミットにタグを付ける
コミットハッシュを指定する事で最新のコミット以外にも自由自在にタグを付ける事ができます。

```
$ git tag -a <tag-name> <commit-hash> -m "message"
```

以下に例を示します。

```
$ git tag -a v0.1.0 9fceb02 -m "Initial release"
```
# タグのリストを表示する

以下のコマンドで作成したタグのリストを表示できます。

```
$ git tag
```

特定のタグのみ表示したい場合以下のようなコマンドが使用できます。
(下記ではv1.0を含むタグのみ表示します。)

```
$ git tag -l "v1.0"
```

# タグをリモートで共有する

### 特定のタグを共有する
以下のコマンドで特定のタグをリモートで共有できます。

```
$ git push origin <tag-name>
```

### 全てのタグを共有する
以下のコマンドでローカルの全てのタグをリモートで共有できます。

```
$ git push origin --tags
```

# タグを削除する
以下コマンドで特定のタグを削除する事ができます。

### ローカルのタグの削除
```
$ git tag -d <tag-name>
```

### リモートのタグの削除

```
$ git push origin --delete <tag-name>
```

# 参照
- [Git - Tagging](https://git-scm.com/book/en/v2/Git-Basics-Tagging)
[JavaScript] イテレータ型の XPathResult オブジェクトを iterable にする

# 問題

[document.evaluate](https://developer.mozilla.org/ja/docs/Web/API/Document/evaluate) は第 4 引数に以下のどちらかを指定した場合、専用のイテレータを返す。

* `XPathResult.UNORDERED_NODE_ITERATOR_TYPE`
* `XPathResult.ORDERED_NODE_ITERATOR_TYPE` 

ただし、このイテレータは [iterable プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) を満たしていないため [for...of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of) や [Array.from()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) が使えない :sob:

```js
const getHeaders = () => {
  const resultType = XPathResult.ORDERED_NODE_ITERATOR_TYPE;
  return document.evaluate('//h1', document, null, resultType, null);
};

const xPathResult1 = getHeaders();
for (const node of xPathResult1) console.log(node);
// Uncaught TypeError: xPathResult is not iterable

const xPathResult2 = getHeaders();
Array.from(xPathResult2);
// []

const xPathResult3 = getHeaders();
[...xPathResult3]
// Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
```

# 解決策

[Generator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator) オブジェクトに変換するとよい。なぜなら Generator オブジェクトは iterable プロトコルに従っているからだ。

```js
const getHeaders = () => {
  const resultType = XPathResult.ORDERED_NODE_ITERATOR_TYPE;
  return document.evaluate('//h1', document, null, resultType, null);
};

// イテレータ型の XPathResult オブジェクトを Generator オブジェクトに変換する。
const makeIterable = function*(xPathResult) {
  while (true) {
    const node = xPathResult.iterateNext();
    if (!node) break;
    yield node;
  }
};

const xPathResult1 = getHeaders();
for (const node of makeIterable(xPathResult1)) console.log(node);
// h1
// h1
// h1

const xPathResult2 = getHeaders();
Array.from(makeIterable(xPathResult2));
// [h1, h1, h1]

const xPathResult3 = getHeaders();
[...makeIterable(xPathResult3)];
// [h1, h1, h1]
```

# 参考

* MDN
    * [Introduction to using XPath in JavaScript](https://developer.mozilla.org/ja/docs/Introduction_to_using_XPath_in_JavaScript)
    * [反復処理プロトコル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
    * [Generator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator)
Vue.jsで、何かの処理後にリロードする

# Vue.jsで、何かの処理後にリロードする

参考にしました。
https://qiita.com/CeMoReOn/items/4ce640bee42bf1a0cbd7

axiosでRailsにPOSTしてGoogleカレンダーにイベントを登録したが、ページ遷移しないのでカレンダーに反映されない。

リロードすると反映されるので意図的にリロードしたい。

vue-routerの機能を使うと出来る。

肝はこれ。

```js
this.$router.go({path: this.$router.currentRoute.path, force: true})
```

1.
$router.goを使用。

2.
引数のpathに、遷移したいパスを指定する。
今回は現在のパス(this.$router.currentRoute.path)を渡す。
すると、現在のパスに遷移してくれる。

以下のようにパスを直指定しても同様に動きました。

```js

this.$router.go({path: '/calendars', force: true})
```

最終的に以下のようになりました。

```js:calendar.vue
   methods: {
      createEvent: function() {
        axios
        .post('/calendars',
          {
            calendar: {
              start: this.calendar.start,
              end: this.calendar.end,
              summary: this.calendar.summary,
              description: this.calendar.description
            }
          }
        ).then((res) => {
          console.log(`Success... ${res.data}`),
          this.calendar.start = '',
          this.calendar.end = '',
          this.calendar.summary = '',
          this.calendar.description = '',
          this.$router.go({path: this.$router.currentRoute.path, force: true})
        }, (error) => {
          console.log(error)
        })
      }
    }
```

これでPOST後にリロードされ、欲しい挙動になった。
【Swift】guard文について

##guard文とは
guard文とはif文と同じような、条件分岐の文法のことを指します。この文法のif文と違う点は、最初の分岐点がfalse判定の時に処理される文だということです。そのため後続の処理を行う時にtrue判定が返っているということになります。

##定義
guard文の定義文は以下になります。
guardの後に条件式を記述し、その後にif文だとfalse判定の時に記述するelseを書きます。
中括弧内はfalseのときの処理を記述し、ポイントはこの処理をの最後にguard文が記述されるスコープの外に退出する必要があるということです。次のサンプルコードで説明します。

```
guard 条件式 else {
  条件式がfalseの場合に実行される文
　guard文が記述されるスコープの外に退出する必要がある。
}
```

##サンプルコード
以下がサンプルコードになります。
guard文内の処理はaが０より小さい値であった場合に処理を行い文字列をプリント、そうでない場合は1をプリントで終了です。
**注意点としてはreturnでスコープ外に退出していますが、この退出するというのはguard文から出るということではなく、この場合関数から出るということになります。あくまでスコープ外っていうのを注意してください。
そしてもう一つ注意点としてはスコープからの退出はコンパイラによってチェックされているため、しっかり退出しないとコンパイルエラーになるので注意が必要です。**

```
//関数定義
func printIfPositive(_ a: Int) {

//guard文定義
  guard a > 0 else{

　　//falseの場合に処理
    print("数値は0未満です")

　　//スコープ外に退出
    return
  }
  print a
}
//結果
 printIfPositive(1)

//結果
1
```

##guard-let文
guard-let文は条件文内でletを用いることで、値を代入し、それを判定する文です。
説明が非常に分かりにくいと思うので、とりあえず下記のサンプルコードを見てください。
guard-let文の条件式内でintにaが代入されていて、そしてInt型かどうかを判定しています。
この文法で特に注意するべき点は条件文で定義した定数がguardのスコープ内なら、使えるということです。
今回の場合だとsomeFunction内がスコープの範囲になるので、その中では使えることになります。

```
func someFunciton() {
  let a: Any = 1

  guard let int = a as? Int else {
    print("aはInt型ではありません")
    return
  }
  //intはguard文以降でも使用可能
  print("値はInt型の\(int)です")
}

someFunction()

//結果
値はInt型の１です
```
Solidityでstring[]を利用する方法

#Solidityでstring[]を利用できないケース
Solidityでは、引数や戻り値でstring[]を利用できません。
stringは文字数が不定のバイト列であり、string[]は本質的には二次元配列byte[][]となります。Solidityでは計算にGasを使用するのですが、この不定のバイト数を扱う場合メモリ領域の最適化ができません。そのため、現在Solidityでstring[]の戻り値、引数はサポートされていません。

#Solidityでstring[]を利用する方法

`Experimental Feature`ですが、以下の記述を記入します。

```solidity:example.sol
pragma experimental ABIEncoderV2;
```

`pragma`キーワードは特定のコンパイラの機能を有効にする記述です。
実験中の仕様ですが、ABIEncoderV2を利用することでstring[]をコンパイル可能となります。しかし、まだ十分にテストされておらず、まだ最適化もされていないためgas代金が多少高くなってしまう可能性があるので注意してください.

##参考
https://solidity.readthedocs.io/en/v0.5.3/layout-of-source-files.html