OmniAICreator/Qiita-1.07M huggingface dataset:
MongoDB起動時にSocketExceptionが出た場合の対処法

## MongoDBを導入！しかし...

公式のMacOS版の[インストールガイド](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)に沿って進めていくが...

```
2020-02-22T06:19:45.373+0900 E  QUERY    [js] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused :
connect@src/mongo/shell/mongo.js:341:17
@(connect):2:6
2020-02-22T06:19:45.375+0900 F  -        [main] exception: connect failed
2020-02-22T06:19:45.375+0900 E  -        [main] exiting with code 1
```

のエラーが発生。色々記事を検索したところ
[こちら](https://medium.com/@stefanledin/how-to-solve-the-failed-to-unlink-socket-file-error-in-mongodb-d4cd478f8366)の記事の内容で解決しました。


```
$ rm /tmp/mongodb-27017.sock
```
```
$ brew services restart mongodb-community
Stopping `mongodb-community`... (might take a while)
==> Successfully stopped `mongodb-community` (label: homebrew.mxcl.mongodb-community)
```

```
$ mongo
MongoDB shell version v4.2.3
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
MongoDB server version: 4.2.3
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
	http://docs.mongodb.org/
Questions? Try the support group
	http://groups.google.com/group/mongodb-user

>

```

起動した！

## 関連記事
- [インストールガイド(MongoDB公式)](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
- [How to solve the “Failed to unlink socket file” error in MongoDB](https://medium.com/@stefanledin/how-to-solve-the-failed-to-unlink-socket-file-error-in-mongodb-d4cd478f8366)
"STARDOG Studio" install for Ubuntu or WIndows10

# 1.What "STARDOG Studio"??
StardogはDB要素であるPlatform部と、Interface部であるStudio部に分かれています。
私達がSPARQLを発行したり、RDFを確認したりする場合は、CUIベースであるよりStudioを使ったほうが便利でしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10574/73819ad7-f6b4-846c-0bdd-0eec0477f8da.png)

# 2.How to install stardog studio??
ここではUbuntuとWiodnws10を紹介することにします。Mac？自宅のMacha壊れたので割愛します。
## 2-1.Ubuntu
Ubuntuでは現状dockerでのインストールが一番手順も少なく簡単でしょう。

```bash:install.sh
$ docker pull stardog/stardog-studio:current
$ docker start stardog-studio
```

このあとBrowserでlocalhost:8888にアクセスするとStudioが登場。

## 2-2.windows10
Stardog公式からexeファイルをダウンロードするだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10574/21db2c6e-20ea-7b9e-b67f-5185800df6d0.png)


# 3.How to connect the stardog platform??
最後にStardog platformとの接続方法を説明します。
下図右下の赤い電源マークをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10574/e85344f9-a8f7-8cda-0931-255f3d7d9c7c.png)
connectポップアップが出るので、下記のように必要事項を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10574/05dbc7d0-7ec0-9a8c-16d9-7dab582d3bb8.png)
成功メッセージが出れば成功（当たり前か...）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10574/869d6e73-d2c2-c277-013e-bc51968a8bfd.png)

# 4.Tutorials
もし直ぐに投入すべきRDFが手元にない場合、チュートリアルをお勧めする。
Beatlesの簡単なRDFを元にSPARQLの基本を実行しながら勉強できる。
Browser版なら翻訳噛ませば非常に分かりやすい勉強教材の出来上がり！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10574/9dae7b4e-268a-400f-c291-632fb04dbd4c.png)

以上
ゼロコスト抽象化とグラフィックス

#今回はゼロコスト抽象化とグラフィックスです
窓よりChromeOSやiPhone,Androidのような小さ目OS程恩恵が大きいはず。
1.Rust製ハイパーバイザー>>仮想マシン(起動)
2.Rust製ハイパーバイザー>>メインOS(起動)
3.仮想マシン<繋げる(ハイパーバイザー)>メインOS
4.仮想マシンはJITとして起動。
5.ハイパーバイザーがOSやハイドウェアの違いを吸収。
6.OSやハードウェアに応じた最適化コードと描画方法で提供
7.メインOSのファイルサイズや最適化に応じた速度で起動。

実質的なAOTコンパイル時処理が相当量(3~4倍)増加するが、(5倍くらい)見やすいコードと確実な可用性、(2倍くらいの)信頼性、(5倍くらいの)保守性、更には(30倍くらいの)安全性の高い高品質コードを生成出来る。
シェーダー言語は実質的な(静的型付け)オブジェクト指向型関数言語のようなもので一切の安全性破壊の省略(thisの省略やメンバー参照の変更を起こす時にメンバー変数用キーワードなど)と一部参照以外変更禁止といったことをすることでソフトウェア品質が向上する。尚、静的型付けの強い型付け関数型言語での最適化は強力である。これを利用すれば上記のことがいとも簡単に出来る。
クラス変数

```py
class T(object):

    #クラス変数（全てのオブジェクトで共有される
    words = []

    def add_word(self,word):
        #クラス変数にアクセスするときはselfを付けるので注意
        self.words.append(word)


c = T()
c.add_word('add 1')
c.add_word('add 2')
print(c.words)#['add 1', 'add 2']

d = T()
d.add_word('add 3')
d.add_word('add 4')
print(d.words) #['add 1', 'add 2', 'add 3', 'add 4']
```

共有されない書き方

```.py
class T(object):

    def __init__(self):
        self.words = []

    def add_word(self,word):
        #クラス変数にアクセスするときはselfを付けるので注意
        self.words.append(word)

c = T()
c.add_word('add 1')
c.add_word('add 2')
print(c.words)#['add 1', 'add 2']

d = T()
d.add_word('add 3')
d.add_word('add 4')
print(d.words) #['add 3', 'add 4']
```
多重継承

```py
class Person(object):
    def run(self):
        print('Person run')


class Car(object):
    def run(self):
        print('Car run')


class PersonCarRobot(Car,Person):
    def fly(self):
        pass


person_car_robot = PersonCarRobot()
person_car_robot.run() #Car runと出力される→先に呼ばれた方のクラスのメソッドが実行される
```
抽象クラス

```py
import abc


class Car(metaclass=abc.ABCMeta):
    def __init__(self,model=None):
        self.model = model

    @abc.abstractmethod
    def run(self):
        pass


class ToyotaCar(Car):
    def __init__(self, model,enable_auto_run=False):
        super().__init__(model)
        self.enable_auto_run = enable_auto_run
        
    #継承したクラスでオーバーライドさせないとオブジェクトを生成した時にエラーになる
    def run(self):
        print('fast fun')


toyota_car = ToyotaCar('Lexus')
```
初心者によるプログラミング学習ログ 247日目

#100日チャレンジの247日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

247日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>247日目<br>・youtubeで、Jsのアコーディオンメニュー模写<br>・Udemyで、Js講座<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1231668847490420736?ref_src=twsrc%5Etfw">February 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
TidalCyclesをエディタ経由のみで動かす準備。

## はじめに

### これは何

自分がTidalCycles使うときにエディタだけ操作すればコントロール可能な環境・ショートカットをまとめたものです。

#### 環境

Windows10
SuperCollider 3.10
VSCode 1.42.1
Haskell platform 8.4.3

### ソースにコピペ可能なチートシート

```haskell:test.tidal
-- TidalCycles Use Command/Settings in VSCode
-- https://tidalcycles.org/index.php/Windows_installation

-- 0.Installed Software
-- SuperCollider
-- Haskell
-- SuperDirt
-- VSCode
-- (in VSCode)TidalCycles Extension
-- (in VSCode)Haskell Syntax Highlight Extension

-- 1.VSCode Extension Command
-- shift+Enter: one-liner eval
-- ctrl+enter : Multi-liner eval

-- 2.Existed VSCode shortcut
-- Boot Terminal : Ctrl+Shift+@
-- View Terminal : Ctrl+@
-- Output : Ctrl+Shift+U
-- Editor Focus Move : Ctrl+1~9

-- 3.new(added) VSCode shortcut
-- task kill : Ctrl+k
-- Editor font size change : Ctrl+Alt+[/]
-- Panel open/select : Ctrl+Q

-- 4.Terminal Command(Boot SuperCollider)
-- Execute SC server(Required fixing PATH) : 
--   boot "sclang.exe"
--   or boot "scide.exe"

-- 5.Haskell settings
-- http://verytired.hateblo.jp/entry/2019/02/08/065603
```

## 解説

### 0.Installed Software

そのままですね。
必要なソフトウェアをインストールする形です。
基本的にはチュートリアル経由で準備してくと問題ないはずです。

あとExtensionは早いとこインストールでもいいはずです。

### 1.VSCode Extension Command

「shift+Enter」で１行の評価、
「ctrl+enter」で複数行の評価を行います。

ここで注意なのが、複数行の定義。
エディタExtensionとしては、１行以上空き行が存在すると複数行の区切りになるため、連続で書くと勝手に解釈されるケースがあります。
そのため、複数行の定義を自分で行う必要があることに注意してください。

### 2.Existed VSCode shortcut

既に存在するショートカットですね。

ターミナルの新規作成 : Ctrl+Shift+@
ターミナルの表示 : Ctrl+@
出力メッセージの表示 : Ctrl+Shift+U
エディタのフォーカス : Ctrl+1~9

エディタのフォーカスはターミナル出力した際には必要かもしれません。

### 3.new(added) VSCode shortcut

VSCode上で新規に追加したショートカットです。

タスク終了（SuperCollider） : Ctrl+k
エディタ部分のみのフォント変更 : Ctrl+Alt+"["か"]"
パネル項目選択 : Ctrl+Q

CommonLispでSlime使っていたときはよく再起動しましたけど、SuperCollider自体を再起動することはあまりないかもしれませんね。
あとパネルを開く場合、サウンドを再生できる項目も選べるみたいなのでこれ活用するのもアリかと。（自分はまだ試せてないです）
ちなみに開いたパネルへのショートカットはCtrl+0です、パネル自体の開閉はCrtl+Bで可能です。

### 4.Terminal Command(Boot SuperCollider)

SuperColliderがインストールされている場所にパスを切って、
直接実行ファイルを起動できるようにすること。

"sclang.exe":IDEが必要ないサーバ・クライアントプログラム
"scide.exe":IDEつきサーバ・クライアントプログラム

Synthの定義や設定を変更しながら使う場合はscide.exe、セットが固定されてる場合はsclang.exe使うという場合分けが可能です。
あとsclang.exeはVSCodeから終了することができるため便利です。
自分はそこまでサンプルを差し替える必要ないのでsclang.exe使ってます。

### 5.Haskell settings

拡張子".tidal"をHaskellのシンタックスハイライトに対応させるための記述です。
詳細はURL見るほうが確実です。

## おわりに

ざっくりとした理解だと自分でコントロールが困難なので、割とメモってます。
Vue.jsでコンポーネント更新後に要素をスクロール(TypeScript)

# 結論
・nextTickで更新を待ってから位置を取得する

# 失敗するコード
この書き方だと、コンポーネントの切り替えが間に合わず、取得位置が切り替え前の位置になる場合があり、思った位置にスクロールしてくれない

```javascript
// 表示中のコンポーネントの切り替えなど
this.switchComponent(); 

// 上端を基準とする位置を取得
const selectedElement: Element = document.getElementsByClassName('className')[0];
const elementPosition: number = selectedElement.getBoundingClientRect().top;
const currentPosition: number = window.pageYOffset;
const targetPosition: number = elementPosition + currentPosition;

// スクロール
window.scrollTo({
    top: targetPosition,
    behavior: 'smooth',
});
```

# 成功するコード
this.$nextTickでコンポーネントの更新を待つことで、切り替え後の位置を正確に取得出来、思った通りの位置にスクロールされる

```javascript
// 表示中のコンポーネントの切り替えなど
this.switchComponent(); 

this.$nextTick(() => {
    // 上端を基準とする位置を取得
    const selectedElement: Element = document.getElementsByClassName('className')[0];
    const elementPosition: number = selectedElement.getBoundingClientRect().top;
    const currentPosition: number = window.pageYOffset;
    onst targetPosition: number = elementPosition + currentPosition;

    // スクロール
    window.scrollTo({
        top: targetPosition,
        behavior: 'smooth',
    });
});
```

# もうちょいすっきり

```javascript
// 表示中のコンポーネントの切り替えなど
this.switchComponent(); 

// this.$nexTickがPromiseを返すので
await this.$nextTick(();

// 上端を基準とする位置を取得
const selectedElement: Element = document.getElementsByClassName('className')[0];
const elementPosition: number = selectedElement.getBoundingClientRect().top;
const currentPosition: number = window.pageYOffset;
const targetPosition: number = elementPosition + currentPosition;

// スクロール
window.scrollTo({
    top: targetPosition,
    behavior: 'smooth',
});

```
e-typing(タイピングゲーム)で自作の文章で練習できるようにする

##はじめに
e-typingという有名なタイピングゲームがあります。
https://www.e-typing.ne.jp/

これ自分で作った文章入力出来たら面白そうと思ってトライしてみました。

##やったこと
- e-typingを解析して仕組みを知る
- 自分のサーバーに移植する
- 自分で作った例文を読み込めるようにする
- 実際にプレイしてみる

##結果
実際に完成したもの。
![typing](https://tialight.com/wp-content/uploads/2019/12/typing_original.gif)
もちろんデザインとかシステムとか全く同じなのでただのe-typingクローンです。
しかし、ちゃんと自作の例文を使ってタイピング練習できます。

##判明したこと
e-typingの例文データは暗号化された状態でサーバーから送られてくることがわかりました。
それをJavaScriptでデコードした後に表示しているみたいです。

例文の元データはこんなかんじ

```text
s0=#0#mmdlfjrxeedlekeglkemumbamlevtmhrkmdvamzzgzevtmybmbdmamzzbidlktuzjbevumxbx#1#jcemumvrytdvtxdwwbfvavlsxmdmumwxawfvambuvxevtmyrxpdvtvzzpnemtmhbfyemuvwwcmfmambkitemalgfpwemavxrl#2#mqdbgnbldbfbgklvufebgqldmodbgnxeihebonbxexerskmutqdbgqlbwvdbsqxvqxebskmekeebsqmtqbfrokvzqnfbonlblvfbgnmwvpdrgnvwesebokxbnfdbsqmwnwfbsqlembfrgkrvmbebowguvudbgnbmdlfbgqlgdhfrsnlmj#3#811
```
複合化キーみたいなものも含まれていて、とても面白い仕組みです。

##さいごに
ほぼ丸パクリなので公開などは行わない予定です。
欲しい方がいれば送ります（いらないでしょうけど笑）

以上になります。
Chrome80からデフォルトでURLのフラグメントでテキストを指定してスクロールできるようになったので試してみた

**初心者です。間違いなどありましたら教えていただけるとありがたいです。**

参考

- [Scroll To Text Fragment と :~:text | blog.jxck.io](https://blog.jxck.io/entries/2019-10-16/scroll-to-text-fragment.html)
- [Scroll To Text Fragment - Chrome Platform Status](https://chromestatus.com/feature/4733392803332096)

urlで何かしらテキストを指定して、ページの特定の部分にリンクできます。
ブラウザはテキストを強調表示し、スクロールして表示してくれる機能です。

---

# Scroll To Text Fragment

例えば「 https://ja.wikipedia.org/wiki/ネコ#:~:text=ネコ科動物を指す 」にリンクすると指定の場所までスクロールしてくれるのを確認できました

![apFYpVND0o.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/2678fd73-9c62-fa14-b8f4-915f5ddf64c6.gif)

---

今までもhtmlのid属性に対して、「 https://ja.wikipedia.org/wiki/ネコ#体格 」 などとフラグメント付きでリンクしてもその場所までスクロースしてくれたのですが、
これだとhtmlが`<div id="体格">`となっている場所にしかできなかったので、本当にリンクしたい部分と若干ずれていたり、id属性がないとそもそもページ内を指定してリンクすることができなかったので、個人的にこの機能は便利だと思いました。:grinning:

# 構文

```
:~:text=[prefix-,]textStart[,textEnd][,-suffix]
```

---

`textStart`のみが必須で、残りはオプショナルです

- `textStart` のみを指定した場合はその文字と一致する場所にスクロールしてくれるようでした

https://ja.wikipedia.org/wiki/ネコ#:~:text=ネコ科動物を指す

- `textEnd`も指定すると、`textStart`と`textEnd`の範囲で参照できます

指定テキストが長い場合はこちらの方が良さそうです

https://ja.wikipedia.org/wiki/ネコ#:~:text=穀物には手を出さず,家畜化に繋がった

<img width="1110" alt="Screen Shot 2020-02-24 at 0.40.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/c09c9ae9-2e2a-88e8-6217-69f0806ed805.png">

---

- `prefix-`、`-suffix` を指定すると指定の文字がページ内に複数ある場合に絞り込める

`prefix-`、`-suffix`無しの場合

ページ内の一番最初の「リビアヤマネコ」にスクロールしてくれる

https://ja.wikipedia.org/wiki/ネコ#:~:text=リビアヤマネコ

<img width="1000" alt="Screen Shot 2020-02-24 at 1.11.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/14308514-b619-2ebf-c3e3-bf79ee0820b0.png">

`prefix-`ありの場合

「亜種」という文字の次の「リビアヤマネコ」にスクロールしてくれる

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3#:~:text=亜種-,リビアヤマネコ

<img width="1034" alt="Screen Shot 2020-02-24 at 1.14.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/36cf3459-f76c-c6c7-0c20-92e0ba2bc615.png">

`-suffix`ありの場合

「の生息」という文字の前の「リビアヤマネコ」にスクロールしてくれる

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3#:~:text=リビアヤマネコ,-の生息

<img width="973" alt="Screen Shot 2020-02-24 at 1.18.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/94642ed0-f571-28da-825e-29b3791ece92.png">

以上です。見ていただいてありがとうございました。:bow:
バイナリファイルをcatやtailしてしまいターミナルが文字化けしたときの対処法

バイナリファイルをcatで見てみようとしたら、文字化けしてしまい冷や汗をかきました。
Webに転がってる情報をまとめた対処法とaliasの設定を書いていきます。

##文字化けした状態
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536529/2f290396-79eb-2654-c72d-01b4fabafb5d.png)

##対処法その１
```
reset
```
resetコマンドで端末をリセットします。これで直らない場合もあるみたいです。
その場合はresetコマンドより**強力な方法でリセット**します。

##対処法その２
```
echo ^[c
```
echo「スペース」「Ctrl+v」「Esc」「c」「Enter」と入力する。


##aliasの設定
```
alias clearbin="echo -e '\ec'"
```
バイナリになったものをクリアするので、単純にclearbinとしました。
echo -eでエスケープ文字を解釈するようにしています。
eが「Esc」になり、cはそのままですね。

##豆知識(なぜ直るのか)
対処法その2でなぜなおるのか、全然わかんなかったので調べました。

```
echo
```

echo「スペース」「Ctrl+v」を押すとこんな感じになりますね。
「Ctrl+v」は「Esc」を入力するための準備的なもので単体だとなにも表示が出ません。
「Esc」をただ押しても入力できないので、この準備がいるみたいです。

```
echo ^[
```
続いて「Esc」を押すと、こうなります。

```
echo ^[c
```
それに付け加えて「c」を入力
「Esc」と「c」でresetコマンドより強力な端末のリセットが行えるようです。
最後に「Enter」を押して終了ですね。

##「Esc」の表し方
aliasに設定するときに、「Esc」を8進数や16進数で表すことができるようです。
###8進数の場合
```
alias clearbin="echo -e '\033c'"
```
###16進数の場合
```
alias clearbin="echo -e '\0x1bc'"
```

##参考になった記事
[ANSI エスケープシーケンスについて](https://dyama.org/2014/04/ansi-escape-sequence/)
[What does printf(“\033c” ) mean?](https://stackoverflow.com/questions/47503734/what-does-printf-033c-mean)
Web 会議 に Face Tracking 付き 3D アバターで参加する

###はじめに

2020年2月に開催された [Cisco DevNet アイデアソン＆ハッカソン 2020 東京](https://gblogs.cisco.com/jp/2020/02/devnet-ideathon-hackathon-tokyo-2020-1/)  において、以前より気になっていた「Web 会議 ｘ 3D モデル」というアイデアが出てきたことをきっかけに、関連技術や有償ソフトウェアを利用しない実現方法などを調べてみた。

結果、特にプログラミング技術を駆使せず、かつ FaceRig を購入せずとも、2つのソフトをインストールすることで Face Tracking された状態で 3D アバターとして Web 会議に参加することができるとわかった。

👇アイデアソン＆ハッカソンの一コマ ー 昨今の事情にミートした今すぐ機能追加してほしい非常に優れたアイデアでした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437531/a9422a9d-7e41-989f-3aad-4b413204571b.png)
https://twitter.com/jj1lfc/status/1228193833545945088?s=20


###前提条件

- Web 会議システムにパソコンから参加する（TelePresence や TV 会議専用端末などは範囲外）
- パソコンには (内蔵/外付け) カメラがついている
- Windows OS （自分は Windows10 pro VM 版を利用）

###手順
####3tene のインストール

公式サイトでパッケージ落としてインストールする。最初から 3D モデルがサンプルでついてくるのが親切。

https://3tene.com
https://3tene.com/readme/

#### UnityCapture のインストール

https://github.com/schellingb/UnityCapture
>Unity Capture is a Windows DirectShow Filter that allows you to stream a rendered camera directly to another application.
In more simple terms, it essentially makes Unity simulate a web cam device on Windows that shows a rendered camera.
This project is based on UnityCam by Yamen Saraiji with added features and big performance improvements. It supports lag-free 1080p at 60 FPS on moderate PCs and can handle 4K resolutions on a faster PC. It also supports capturing multiple cameras and alpha channel (transparency) in receiving applications that support it (like OBS).

ということで、例えばカメラで撮影したものに何か処理したものを他アプリケーションへ受け渡すための仮想のカメラデバイスという理解をしている。

インストール方法は下記参照のこと。
https://twitter.com/3tene2/status/1020258307490033664?lang=en

インストールが完了すると、カメラデバイスとして `Unity Video Capture` がご利用のアプリケーションで選択可能となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437531/4e0d1235-fd04-f020-17d5-d6773d618468.png)
（Webex Meeting でカメラ設定を見た様子）


### 起動

この状態で 3tene を起動し、お好きな 3D モデルを配置すると会議アプリケーションにおけるカメラにはそちらの映像がインプットとして利用されるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437531/362482c6-f85e-82e5-4286-716d9d000e69.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437531/a066e2cb-55b7-d93f-c50c-033dec5f5eab.png)
（会議の様子（Webex Meeting を利用））
参考までにこのキャラクターは[東北ずん子](https://zunko.jp)さんというらしい。

###今後の展望

- soundflower のような仮想マイクをかませて音声にリアルタイムでエフェクトをかける
- 背景を取り込む（人物部分だけ 3D アバターとする）
- macOS 対応（mac OSX における UnityCapture の代替方法をご存じの方教えて下さい。OBS や webcamoid などについて調べています）
- プレゼンテーション（画面共有）時におけるミニアイコンのオーバーレイ（OBS 画面キャプチャｘ背景色フィルタでできそう）

###参照

http://meme-x.jp/2018/09/3tene/
https://www.moguravr.com/teator-beta-version/
https://facevtuber.com

###宣伝

[Cisco Webex Meetings 90日間無償支援プログラム](https://www.cisco.com/c/m/ja_jp/solutions/collaboration/webex90days.html) なるものがあるようですのでみなさまリモートワークにご活用してみてはいかがでしょうか。
準同型性暗号と決定性ワレット(導入編)

#はじめに
ブロックチェーンに関わる技術を数学的に理解するため
今回は準同型性暗号と決定性ワレットにスポットを当てました。
ネットや書籍からインプットしたものを自分の為にアウトプットしただけですのであしからず
#イメージ
準同型性暗号は暗号学的に広く用いられる技術です。
とりわけ、RSA暗号やElGamel暗号などの公開鍵暗号はこの特徴を有しています。
とっつきやすいイメージとしては

**・秘密鍵を持たなくても暗号文のまま計算ができる暗号化方式**

　　　　　　↓　　つまり

**・公開鍵と秘密鍵を独立に生成することができる**
**・暗号化されたデータをそのまま検索可能になる**
**・複数組織のデータを異なる鍵で暗号化したまま照合可能になる**

こんなことができます。

どういう場面で利用されているのかと言うと

・仮想通貨による決済時に匿名性を保つ
・クラウド上での処理をデータを隠したまま行う
・電子マネーや電子投票における暗号プロトコル

などです。


#そもそも準同型性って？？
「準同型性」とは数学用語で,
**ある操作をしてから足したり掛けたりしたものが、足したり掛けたりしてからある操作をしたものと同じときの状態** を指します。
例えば操作f(x)と変数a,bがあったとして

         f(a) + f(b) = f(a + b)       (1)
         f(a) * f(b) = f(a * b)       (2)

を満たすときにfが準同型であるというのです。
(ここでの二項演算子は代数演算)

さらに、準同型暗号にはいくつかの種類があります。
その中でもよく使われるのが加法準同型と完全準同型です。
これらは以下の特徴を有します。

| 種類 | 加法準同型 | 完全準同型  | 
|:--|:--|:--|:--|
| 速度 | ○（速い） | ×（遅い）|  
| 暗号文サイズ | ○(小さい) | ×（大きい） |  
| 機能 | △（加法のみ） |◎（任意の操作） | 

完全準同型は2009年に発見され暗号で、多くの企業が開発に注力しているようです。
#ECDSAの公開鍵と秘密鍵の準同型性
ビットコインで用いられるECDSAには準同型性があるので公開鍵の足し算は、楕円曲線暗号の点の加法の定義から式(3)のようになります。
(a+b)というスカラーの和による秘密鍵から作られた公開鍵は、秘密鍵aから作られた公開鍵と秘密鍵bから作られた公開鍵の楕円曲線上の和になっていることを意味します。

         (a+b)G = aG + bG　           (3)
 

*注意：左辺はGの位数nを法とするスカラーの加法であり足し算を意味するものではない
　　　右辺は楕円曲線上の和になっていることを意味する。

#決定性ワレット
ランダムに秘密鍵と公開鍵を生成するのではなく、親の鍵から子の鍵を生成する方法で暗号鍵を管理するワレットを**決定性ワレット**と呼びます。これに対し、秘密鍵と公開鍵が一対一に対応する従来のワレットを**非決定性ワレット(ランダムワレット)**と呼びます。

非決定性ワレットではなく決定性ワレットを用いるメリットは
・保管する秘密鍵の数が少なくて済む
・紛失してもシードさえあれば再構築可能
逆にデメリットは
・シードが他人に漏れた場合、自分のビットコイン情報が全て盗まれる危険がある
・シードを紛失した場合、全てのアドレスが凍結される
などです。

簡単に理屈を確認します

まず、privを最初の秘密鍵、privGを最初の公開鍵とします。
また、i = 1,2,3... を整数によるインデックスとします。
さらに、(priv + i)を新しい秘密鍵とすると、これに対応する公開鍵は式(4)のようになります。


    (priv + i)G = privG + iG        (4)

ここでprivを親秘密鍵、privGを親公開鍵と呼ぶとことにすると、一つの親公開鍵と秘密鍵のペアから必要な数だけの子公開鍵と秘密鍵のペアを作成することができます。
このようにして決定性ワレットが作成されます。

ここで問題が一点

パラメータとして公開してあるGと公開鍵privGは第三者に筒抜け、つまりインデックスiを一つずつ調べて右辺を解析し、左辺と同じものを探せば生成された公開鍵が最初の公開鍵と同一の送金主体であることがわかってしまいます。

#鍵の親子関係を推定できなくする
この問題を解決する為に、次の対策を施します

1.インデックスに加えて、256ビットの乱数cを追加する
　　　　　　　　　　　　↓
2.これにハッシュ関数を適用し、依存関係を断ち切る
　　　　　　　　　　　　
つまり、推定する候補を現実的に探索不可能な数にした上で、ハッシュ関数を用いて不可逆性を持たせるわけです。

このようなインデックスと乱数を持ったハッシュ値を**チェーンコード**と呼びます。
     
     chain_code = h(i,c)
この時、楕円曲線上の加法準同型性によって、式(5)の関係が成立します。

     (priv + chain_code)G = privG + chain_codeG (5)

最初の秘密鍵mをマスター秘密鍵と呼び、マスター秘密鍵から作成された公開鍵M = mGを
マスター公開鍵と呼びます。ビットコインの決定性ワレットではマスター秘密鍵と最初のチェーンコードが最初の起点ではなくこの二つの女王を生成する　ルートシードというデータを秘密情報の起点にしています。
(ルートシードは128,256,512ビットの乱数)
*注意：これは、ハッシュにかける際に用いた乱数ではないです



#まとめ

ホットストレージとコールドストレージの間を守る技術として、チェーンコードはとても有効な手段だと感じます。この技術を支えるバックグラウンドで準同型暗号のような数学的アプローチが必要になってくるので代数学や楕円曲線に関して少し知見が溜まってきたら次はこの辺を記事にしたいと思います。
次回は決定性ワレットについて詳しく記事を書くつもりです。

#参考
参考[1] 書籍：ブロックチェーン プログラミング
https://www.kspub.co.jp/book/detail/1538313.html
参考[2]　サイト：準同型暗号の最前線1(入門編)
https://qiita.com/herumi/items/d8645efe2cc5be2e7ee3
参考[3]　サイト：暗号文のままで計算しよう-準同型暗号入門
https://www.slideshare.net/herumi/ss-59758244
参考[4] サイト：Gunosy
https://blockchain.gunosy.io/entry/2017/12/21/165314
ちなみに参考2と参考3の著者が同じ方でした。
タスクバー起動のショートカット

# タスクバー起動のショートカット
タスクバーに下記のようなアイコンがあると思います。
(アイコンは人によって違いますが。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67358/6d9a9182-a179-5a24-3931-7e22c370d633.png)

このアイコンの起動の時にいつもマウスを移動させていましたが、
ふとした間違いから気付いたショートカット。
~~ブラウザのタブ選択でCtrl+番号のタイポ~~

`Windowsキー + 番号`
**タスクバーの左から順に1,2,3,4となっています。**
そのため、上の画像から言うと、
Windows+1を押すとエクスプローラが起動。
windows+2を押すとVisualStudioCodeが起動・・・
といった感じにアプリケーションを起動することが出来ます。

また、アプリケーションが起動済の場合は、そのアプリケーションがアクティブになります。

その他、細かい使い方は実際に使ってみて試してみてください。
【SwiftUI】TextFieldに初期値を入れる


initではなくて`.onAppear`で初期値を代入する

```swift
struct ContentView: View {
    @State var text:String = ""
    
    var body: some View {
        TextField("", text: $text)
        .onAppear {
            // ここで初期値を代入
            self.text = "default text"
        }
    }
}
EC2(Amazon Linux2)へfishシェルをインストール

# EPELレポジトリの追加
Extra Packages for Enterprise Linux (EPEL) リポジトリを追加します。

```
$ sudo amazon-linux-extras install -y epel
```

# Fishのインストール
Fishをインストールします。

```
$ sudo yum -y install fish
```

Fishシェルに入ります。

```
$ fish
Welcome to fish, the friendly interactive shell
Type help for instructions on how to use fish
>
```

# Fisherのインストール
Fishシェルに入った状態で、Fishのパッケージマネージャ`Fisher`をインストールします。

```
> curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
```

👀確認

```
> fisher -v
```

🚀試しにテーマをインストール

```
> fisher add oh-my-fish/theme-agnoster
```

# その他
fishテーマ`theme-agnoster`等をインストールした場合、クライアント側に`powerlineフォント`がないと、一部文字化けします。
[ここ](https://github.com/powerline/fonts)等からダウンロードし、クライアントへフォントの追加が必要です。

📖[WSL環境 (Windows10) でPowerlineフォントをインストールする](https://qiita.com/mosh_shu/items/0dc06e8b4aecf7d68316)

以上。
llvm-mingw + cmake で dll + import lib を作るメモ

## 背景

llvm-mingw + cmake で, Windows dll バイナリを作り, import lib も生成したい

## dll build, import lib を作る.

`-DCMAKE_WINDOWS_EXPORT_ALL_SYMBOLS=On -DBUILD_SHARED_LIBS=On` とする.

libmylib.dll.a という感じで, MSVC 互換(?) import lib(?)ができます(MSVC とリンクできるかは未検証).

あとは, llvm-mingw で -lmylib とすれば, この import lib とリンクしてくれる模様.
MSVC でリンクする場合は, .lib にファイル名変更が必要かもしれません.

MSVC とは異なり, `__declspec( dllimport )`, `__declspec( dllexport )` などの記述をソースコードに行う必要はありません.

## 注意点

cross-compile では, うまく動かないかもしれません.
WSL で cmake bootstrap しましたら, `-fPIC` が付与されてコンパイルエラーになりました.

## rpath 相当?

Windows では, rpath 相当の機能は直接にはありません.

The Search for Auto-Loaded DLLs and Windows rpath
http://ibob.github.io/blog/2018/12/16/windows-rpath/

.dll を .exe と同じところにおくか, PATH 環境変数を設定するか, dll 探索パスをアプリ側で `SetDllDirectory` で指定する必要があります.

また, llvm-mingw で C++ コードをコンパイルしている場合, STL などのランタイムとして `libc++.dll`, `libunwind.dll` が必要になります.


とりあえずは CMake で post build コマンドで, .dll を .exe の場所 or build folder にコピーするのがよいと思います.
LINE で送ったＱＲコード画像をＩＤに変換する

# 背景

昔作った、LINE で薬箱の管理をするためのデバイスの制御で、
LINE で送ったQRコード画像をIDに変換することがあったのでメモしておく。

デバイスそのものの詳細はこちら。
https://protopedia.net/prototype/c164bbc9d6c72a52c599bbb43d8db8e1

デバイスの紹介動画はこちら（2:00 あたりから）
https://www.youtube.com/watch?v=Ld_jOXHXZXg

この制御では、薬箱のIDをQRコード化しておき、
薬箱に張り付けられたＱＲコードを撮影してLINE でbot に送信すると、
bot を制御するサーバでLINEユーザと薬箱のIDとを関連付ける。

薬箱を開けると、関連付けられたLINEユーザに通知が飛び、
薬箱がいつ開けられた≒薬が飲まれたのかを記録し、
薬の管理ができるというもの。

# 前提条件

- LINE Messaging API を登録していること
 - webhook のURL も設定していること
 - アクセストークンを発行して取得しておくこと
- NodeRed 環境を構築済みであること
- 公開されているNodeRed のノードの一つである[node-red-contrib-qrdecode(以下qrdecodeノード)](https://flows.nodered.org/node/node-red-contrib-qrdecode) を使うので、Nodered でインストールしておくこと

# やること
## http in ノードを設置し、LINE API からのリクエストを受信する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143965/3863c35c-8952-d57a-2763-b6d8fba9f6e2.png)
webhook のURL をここで設定しておく。
LINE API からのリクエストがmsg.payload に入ってくる。

## 画像をリクエストする

1. Javascript を実行する
 1. LINE API からのリクエストからユーザＩＤとメッセージＩＤを取得する
 2. メッセージＩＤから画像を取得するためのリクエスト用のURLを生成する
 3. アクセストークンからURLリクエスト時のヘッダを生成する
 4. ユーザＩＤから画像を保存するパスを生成する
2. http request を発行する(http request ノードを配置)
 - メソッドはGET
 - 出力形式は「バイナリバッファ」 
3. ファイルに画像を保存する(file ノードを配置)
 - ノードのプロパティではファイル名を指定しない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143965/bcfee9ee-dd26-2189-8308-d53487ecda12.png)

Javascript のコードはこちら。

```
// 1. LINE API からのリクエストからユーザＩＤとメッセージＩＤを取得する
var event = msg.payload; 

// まず、イベント種別がmessage のもので、メッセージ種別がimage かどうかを判定する。
if(event.type == "message" && event.message.type == "image") {
    // 2. メッセージＩＤから画像を取得するためのリクエスト用のURLを生成する
    msg.url = "https://api.line.me/v2/bot/message/"+ event.message.id + "/content"; 

    // 3. アクセストークンからURLリクエスト時のヘッダを生成する
    msg.headers = {
        "Authorization" : "Bearer " + "####", // ここにアクセストークンを入れる
        "Content-Type": "application/jpeg",
    };

    // 4. ユーザＩＤから画像を保存するパスを生成する
    // LINE で送信された画像を一時的に保存しておくファイル名。特定のディレクトリでファイル名をユーザＩＤとしておく。
    // 一連の処理が終わったら消しておく
    msg.filename = "/home/hogehoge/storage/" + event.source.userId + ".jpg";

    return msg;
}

```
# QR コードをデコードする

1. Javascript を事項する
  1. msg.payload にデコードする画像へのパスを代入する
2. qrdecode ノードを実行する
3. デコード結果を取得する
  - msg.payload にデコード結果が入っている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143965/db0954fb-68bc-d3dd-71cf-d605d98cce91.png)

Javascript のコードはこちら。

```
msg.payload = msg.filename; 

return msg;
```
関数中でグローバル変数と同名のローカル変数を定義した場合

下記の関数定義中の変数`bar`は、関数のブロック内に`bar`の定義がないためグローバル変数と解釈されます。

```python
def foo():
    print(bar)
```

下記のコードは、`foo`の呼び出し前にグローバル変数`bar`が定義されているので成功します。

```python
bar = 4

def foo():
    print(bar)

foo()  # => 4
```

`foo`のグローバル変数は、`foo`のコードオブジェクトの属性`co_names`で確認できます。

```python
foo.__code__.co_names  # => ('print', 'bar')
```

ちなみにPythonの[公式ドキュメント](https://docs.python.org/3/library/inspect.html)では、`co_names`はローカル変数名の`tuple`と書いてありますが、[(ローカル変数名と自由変数を除く)名前の間違い](https://stackoverflow.com/questions/45147260/what-is-co-names)です。

下記の関数定義中の`bar`は、関数のブロック内に`bar`が定義されているため、ローカル変数と解釈されます。

```python
def foo():
    print(bar)
    bar = 3
```

```python
foo.__code__.co_names  # => ('print',)
```

`foo`のローカル変数は、`foo`のコードオブジェクトの属性`co_varnames`で確認できます。

```python
foo.__code__.co_varnames  # => ('bar',)
```

この解釈は、関数定義が行われたときに決まるため、`bar`の定義の前に`bar`があってもグローバル変数とは解釈されず、次のようにエラーになります。


```python
bar = 4

def foo():
    print(bar)
    bar = 3

foo()  
# => UnboundLocalError: local variable 'bar' referenced before assignment
```

つまり、関数ブロック中の名前は、関数定義の段階でグローバル変数かローカル変数か（もしくは自由変数か）に決まっており、名前への代入時点でグローバル変数からローカル変数にリバインドされるのではありません。

さらに、リストなどの内包表記は新たなスコープを導入しますが、最初の`for`に対応するイテラブルのみ、外側のスコープで解釈されます。下記の例は成功しますが、リスト内包表記内の3つの`bar`のうち、一番右の`bar`は`foo`のスコープ、すなわちグローバル変数の`bar`と解釈されるためです。

```python
bar = range(3)

def foo():
    print([bar for bar in bar])

foo()  # => [0, 1, 2]
```
Rails6 Access denied for user 'root'@'localhost' (using password: NO)のエラー

# 目的

- 記事名のエラーが出た時の筆者の解決方法をまとめる
- とりあえずエラーを回避する方法をまとめる、MySQLのrootパスワードをRailsの設定ファイルに直接記載するので個人プロダクト以上のアプリでは本方法はオススメしない。

# 筆者の環境

- Rails version
    - 6.0.2.1
- MySQL vsersion
    - Ver 8.0.18 for osx10.13 on x86_64 (Homebrew)
- OS
    - macOS 10.13.6 

# 手順概要

1. MySQLのrootパスワードを確認
1. RailsのDB設定ファイルにMySQLのrootアカウントのパスワードを入力
1. 接続確認

# 手順詳細

1. MySQLのrootパスワードを確認
    1. すでに知っている方はこの手順は飛ばす。
    1. パスワードを失念した場合は下記の方法に従いパスワードを再設定する。
        - [MySQL 8.0.18 のrootパスワードを忘れた時のリセット方法](https://qiita.com/miriwo/items/1880e9d2ebcfd3c0e60d)
1. RailsのDB設定ファイルにMySQLのrootアカウントのパスワードを入力
    1. 下記のファイルを開く
        - アプリ名ディレクトリ/config
            - database.yml
    1. パスワードを追加する。
        - `password: `の後ろにMySQLのrootアカウントのパスワードを記入する。

            ```
            # MySQL. Versions 5.5.8 and up are supported.
            #
            # Install the MySQL driver
            #   gem install mysql2
            #
            # Ensure the MySQL gem is defined in your Gemfile
            #   gem 'mysql2'
            #
            # And be sure to use new-style password hashing:
            #   https://dev.mysql.com/doc/refman/5.7/en/password-hashing.html
            #
            default: &default
              adapter: mysql2
              encoding: utf8mb4
              pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
              username: root
              password: 
              host: localhost
            ```
1. 接続確認
    1. `$ rails s`などを実行してローカル環境でエラーが出ないか確認する。
WordPressでbitnamiのバナーを削除する方法

LightSailの「WordPress Certified by Bitnami および Automattic 5.3.0」
WordPressのバージョンは5.3.2です。

巷で見かけるコマンド(bnconfig)が存在しなくてなっていたようなので、一応備忘録として残しておきます。

```
$ sudo /opt/bitnami/apps/wordpress/bnconfig.disabled --disable_banner 1
```


```
$ sudo /opt/bitnami/ctlscript.sh restart apache
```

[公式](https://docs.bitnami.com/aws/how-to/bitnami-remove-banner/)はまだドキュメントが更新されてないようです。（純粋なバージョン差かわかりませんが。）

## 参考
[I can’t find the bnconfig tool](https://community.bitnami.com/t/i-cant-find-the-bnconfig-tool/72018)
Laravel フォームリクエストのauthorize()を活用してみる

よくよく考えれば当り前なんだけど、解説されてなくて気づけなかった...

# フォームリクエストとは？
[バリデーション 5.8 Laravel](https://readouble.com/laravel/5.8/ja/validation.html)のフォームリクエストバリデーションセクションに説明があります。
HTTPリクエストをバリデーションしたりできるものです。

# フォームリクエストクラスのできること
## Requestクラスで使えるメソッドがすべて使える
```php
$this->input('hoge');

// /posts/{post} とかになってるURLの{post}の部分にアクセス
$this->post;
```
`Request`を継承しているのでもちろん使えるんですよね（自戒）
`{post}`にあたる部分の名前に自信がない場合は`php artisan route:list`で確認できます。

# `authorize()`のできること
## bool型で認証の可否を判断
`true`を返せば認証が成功したとして、処理を継続する。
`false`を返せば認証に問題があるとして、`403`を返す。

## DIされられる

```php
public function authorize(HogeRepository $repository){
    $repository->fuga();
    // ...
    return $bool;
}
```
クラスをDIして、それを使ったオレオレ認証処理を作れる。

# 組み合わせる
こんなテーブルがあるとする

| カラム名 | 役割 |
|:-:|:-:|
| id | 主キー |
| message | メッセージ |
| edit_key | ハッシュ化された編集キー |

フォームでメッセージと編集キーを入力すると、データベースにそれが保存され、それを消したり、編集したりしたくば編集キーを使って認証をするという感じ。
URLは`/messages/{message}`として、HTTPリクエストヘッダに編集キーを付け、PUTリクエストでアクセスされたものと想定。

## `authorize()`メソッドで認証
```php
public function authorize(){
   $model = Message::findOrFail($this->message);
   return Hash::check($this->header('edit-key', $model->edit_key);
}
```

`$this->message`にはレコードのIDを含ませる。
そこからレコードを取得し、保存していたハッシュ化された編集キーと送信された生の編集キーを`Hash::check()`で照合する。
`Hash::check()`は2値が同じものであれば`true`を、異なるものであれば`false`を返すので、これに認証の可否を任せています。

もっと複雑な認証ロジックを実装する場合は、それを他のクラスへ切り出し、`authorize()`へDIしてやればスッキリさを維持しつつ、理想的な処理を行えると思います。

---

Laravelはとても便利だ... ありがたや...
新米フロントエンドエンジニア がお世話になってるサイトまとめ

## はじめに
今月よりフロントエンドエンジニアとして働き始めたあくしおです。
業務で進めていく中で自分が普段参考にしていたり勉強で使用しているサイトを羅列していこうと思います。

「こんなもん参考にしてるうちはダメだぞ！」って声もあるかもしれませんが許してください

## HTML編

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257500/41ab8c6a-4854-f74b-0dcd-e55fc982e86b.png" width= 70%>
[HTML Reference - A free guide](https://htmlreference.io/)

<img width="673" alt="スクリーンショット 2020-02-23 23.25.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257500/d90c81da-cef2-86de-d071-2c5b1e852b79.png">

タグが非常に分かりやすくまとまっており（アルファベット順）画像の通り、そのタグが`inline要素`なのか
`block要素`なのかなどが視覚的に非常に分かりやすくなっています。

そのままタグをクリックするとそのタグについての説明が記載されています。
使い所やサンプルコードまで乗っているのでめちゃくちゃオススメのサイトです。
英語のサイトになるのですがChromeの拡張機能などで十分理解できるレベルに翻訳されるので英語アレルギーのある方もぜひ！

[HTML入れ子チートシート](https://yoshikawaweb.com/element/)

その名のとおりHTML5のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示してくれます。


## CSS編

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257500/8fb7cf40-5544-2d3a-319d-ff6198c43d46.png" width= 70%>
[CSS Reference - A free guide](https://cssreference.io/)

はい。先ほどのサイトの姉妹サイトです
HTML ReferenceのCSSバージョンだと思っていただければ問題ありません。
~~ここに長々と説明書くより元のサイト飛んでもらえれば一番分かりやすい~~

### Sass
はい。CSSのメタ言語（CSSプリプロセッサ）Sassですね
読み方はサスなんでしょうか、サースなんでしょうか、今だに分かっていません。

いきなり脱線しましたがおすすめサイトはこちらになります。
[SassMeister](https://www.sassmeister.com/)
<img width="634" alt="スクリーンショット 2020-02-23 23.49.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257500/c208152a-b8a9-0bd9-07a3-223641f79def.png">

このように入力したSassのコードをリアルタイムでCSSにコンパイルしてくれるツールです。 Sassが使える環境を構築しなくても、手軽にSassを試すことができます。

有名なので知っている方も多いかと思います。
即座にコンパイル結果が出力されるのでSassの扱いに慣れてないうちは特にいいのではと思います。

## JavaScript編

勉強サイトばかりです。

[現代のJavaScriptチュートリアル](https://ja.javascript.info/)
その名の通りチュートリアルです。
基本的なことから高度なトピックまで扱われているので個人的にイチオシサイトです

しかしかなりのボリュームがあるので毎日少しずつやっていくのがいいと思います。
ちなみにオススメしている本人は終わってません。すいません


![icon-128x128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257500/795da802-731b-3d91-a7ae-93ece11a7a9c.png)
[js-primer](https://jsprimer.net/intro/)

二つ目はこちら
著書は有名なazuさんです。2016年よりAngular日本ユーザー会の代表を務めておられるようです　（凄い...

こちらもJavaScriptを学び始める初心者の方にオススメです！
海外のチュートリアルを訳した感じの違和感？のある感じではなく最初から日本人の方が書かれているので自然に読めます！


##終わりに

とりあえずパッと思いついたものだけですが羅列してみました。
他にもこんなサイトあるぞ、とかこのサイトもオススメや。みたいなのがあればコメントで教えてください！

それではみなさまお元気で
【業務効率化】スクリーンショットの保存先を変更する方法(Mac)

所有するMacで画面キャプチャするたびにデスクトップ上に膨らんでいったため、ターミナルを使ってデスクトップのディレクトリ(フォルダ)に保存先を変更したメモとして残します。

# 環境
・ Mac OS Catalina：　v10.15.3

# ターミナルからの手順（入力コマンド）
##1. デスクトップ(本体)からデスクトップ上のディレクトリに変更
※ディレクトリ名は「sample」とする

```
$ defaults write com.apple.screencapture location ~/Desktop/sample/
```

##2. SystemUIServerを再起動し、設定を反映

```
$ killall SystemUIServer
```

終了。

#その他

##デフォルト（デスクトップ上）に設定を戻したい

```
$ defaults delete com.apple.screencapture location
```

##カットキャプチャーコマンド

```
command(⌘) ＋ shift ＋  4
```

# 参考
[Macのスクリーンショットの保存先を変更する]()
[Mac - スクリーンショットで撮影した画像の保存場所を変更](https://pc-karuma.net/mac-customize-screencapture-location/)
[【Mac】スクリーンショットの保存先を変更する方法](https://upd.world/mac-screencapture-location/)
OpenID Connect RP-Initiated Logoutベストプラクティス

OpenID Connectでは、RPでログアウトを実行したときにOPからもログアウトする方法（RP-Initiated Logout）が [OpenID Connect Session Management 1.0 (draft 28)](https://openid.net/specs/openid-connect-session-1_0.html#RPLogout) という仕様で定義されている。

この仕様を実装する際のベストプラクティスについて、RFCや各社の実装をもとに検討した。

#### ベストプラクティス

* DOS攻撃（CSRF等でのend_session_endpointへのリクエスト送信）対策
  * First PatryのSSO連携で利用する場合はid_token_hintの指定を必須とする。
  * id_token_hint指定を強制できない場合は、ログアウト確認ダイアログを挟む。

* post_logout_urlの検証
  * id_token_hintの指定を必須とできる場合は、IDトークンのaudに指定されるクライアントに登録された値と検証するのが手軽。
  * そうでない場合は、登録された全てのクライアントの登録値と検証するか、SSOでログイン中のクライアントに絞って検証することもできる。

#### RFCから読み取れること

* id_token_hintの指定はRECOMMENDED、post_logout_uriとstateの指定はOPTIONALとなっている。
* post_logout_uriは事前の登録が必要となっているが、検証ロジックの詳細は記載されていない。
* OPはユーザーにOPからもログアウトを希望するかを確認すべき（SHOULD）となっている。
* id_token_hintが指定されない場合は、DOS攻撃を防ぐためにユーザーにログアウトをするか確認するという方法が、Security Considerationで言及されている。

#### 各社の実装仕様

[IdentityServer4](https://identityserver.io/)（[参考](http://docs.identityserver.io/en/3.1.0/endpoints/endsession.html)）

* id_token_hintを指定すると、ログアウトを実行するか確認するダイアログ表示をスキップできる。
* post_logout_redirect_uri、stateはid_token_hintを指定した場合のみ利用可能となる。

[gluu](https://www.gluu.org/)（[参考1](https://gluu.org/docs/ce/operation/logout/)、[参考2](https://gluu.org/docs/ce/api-guide/openid-connect-api/#openid-connect-end-session-api)）

* ガイドライン上はid_token_hint、session_idを指定しない場合もOPでのログアウトが実行されるとあるが、APIリファレンスではid_token_hintが必須となっている。（APIリファレンスの方が誤植？）
* post_logout_redirect_uriの検証は、SSOに参加しているクライアントのいずれかに登録された値である場合に正当となる。
* post_logout_redirect_uriを指定しない場合もOPでのログアウトは実行されるが、HTTP 400ステータスコードが返却される。

[Conect2id](https://connect2id.com/)（[参考](https://connect2id.com/products/server/docs/api/logout)）

* id_token_hintは指定を推奨とされている。
* post_logout_redirect_uriはid_token_hintを指定した場合のみ利用可能となる。

[Hydra](https://www.ory.sh/hydra/)（[参考1](https://www.ory.sh/docs/hydra/implementing-consent#user-logout)、[参考2](https://github.com/ory/hydra/issues/1472)）

* id_token_hintが必須指定となっている。
* GitHub Issueのコメントからは、id_token_hintからclient_id（aud）を取得してpost_logout_redirect_uriの検証を行っているようである。

[okta](https://www.okta.com/)（[参考](https://developer.okta.com/docs/reference/api/oidc/#logout)）

* id_token_hintが必須指定となっている。
* post_logout_redirect_uriは任意指定であり、指定しない場合はOPのログイン画面にリダイレクトされる。

[Azure Active Directory B2C](https://azure.microsoft.com/ja-jp/services/active-directory-b2c/)（[参考](https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/openid-connect#send-a-sign-out-request)）

* id_token_hintは任意指定であるが、post_logout_redirect_uriを利用するためには指定が必要となる。（id_token_hintに紐づくクライアント設定からpost_redirect_uriの検証をしているようである。）
* 「ログアウト要求にIDトークンを必要としない」という設定をした場合には、id_token_hintの代わりにclient_idを指定できるようになる。
【Spring-boot】pom.xml設定変更でエラーが出た件

##概要
SpringBootで開発環境にweb.jarライブラリを追加しようとしたところエラーが発生したので、
備忘録として載せます。

##環境(ざっくり）
macOS　
Eclipse
SpringToolSuite4

##事象
mavenの依存関係に`web.jar`ライブラリの`Bootstrap`と`Jquery`を追加しようとして、pom.xmlファイルを編集したところ、`Falied to read artifact descriptor org.webjars.bootstrap:jar:3.3.71`のエラーが出力された。

###変更箇所　
`<dependencies>`要素内に`<dependency>`要素を２つ追加

```
	<dependency>
		<groupId>org.webjars</groupId>
		<artifactId>jquery</artifactId>
		<version>1.11.1</version>
	</dependency>
	<dependency>
		<groupId>org.webjars</groupId>
		<artifactId>bootstrap</artifactId>
		<version>3.3.7-1</version>
	</dependency>
```

##解決方法
`〜/.m２/Repository`配下のファルダを全て削除して、プロジェクトファルダを右クリック→Maven→プロジェクトの更新をクリック

更新作業するときに`〜/.m２/`配下にMavenのキャッシュが存在するらしいですね。。
以下のリンクが大いに参考になりました。感謝です。
https://qiita.com/ASHITSUBO/items/0d30c1ddf476d2ec96b7
「とりあえずプログラミングでも」という姿勢で学ぶのは時間の無駄

「プログラミング学ぶのは格好いい」

「プログラミングが出来ると食いはぐれない」

と、ここ数年色々な人が言っています。

「将来、プログラミングは必須のスキルになる」

という眉唾物の言葉も聞こえます。
学生向けのプログラミングスクールもありますし、実際意識の高い学生は、とりあえず…ということでプログラミングを勉強し始めている人もいるみたいです。

結論から言います。


「とりあえず」というつもりで高い金出してプログラミングスクールに通ったりするのは時間とお金の無駄ですのでやめた方がいいです。やるならば真剣に学んで、とりあえずポートフォリオ一つは作りぬくつもりでやりましょう。


#開発関係の部署に異動して現実を知る

僕は昨年、プログラムを使ってシステムを開発する部署に配属されました。僕自身、これまでプログラミングに興味はそれなりにありましたし、仕事で単純作業を自動化するためのスクリプトや、エクセルのVBAはそれなりに書いてきましたので、本格的なプログラマーではないですがそこら辺の「にわか」よりは経験値を持っていたつもりです。

しかし、いざ配属されて仕事に取り組んでみると一つのシステムを開発することは、スクリプトで自動化するなんて比較にならないくらい大変です。

開発環境を整え、開発ルールを把握し（GITでのバージョン管理なんてやったことない）、さらには未経験の言語を習得する必要があります。
無論、製品としてリリースするためには入門書に載っているような書き方では駄目です。

ハードルは高いのですが、否が応でも「やらざるを得ない」状況になって毎日アップアップしながら学習してきました。少なくとも未経験の言語でも文法の習得にいつまでも時間をかけられません…



#片手間に「ちょっと嗜む」勉強では現場では役に立たない

先述の通り、ちょっと嗜むレベルで学習したところでサービスも開発できないですし、現場では役に立ちません。

もしマクロを使って自動化したいというのならVBAを勉強するのもありですが、IT知識を身に着けることを目的とするならば基本情報技術者取得を目指すことの方が無難です。


#プログラミングを学んでサービスを開発できる人はどんな人か？

現役エンジニアでも、会社に所属して、否が応でも技術を習得しないといけない事態になって、毎日いっぱいいっぱいになってから専門性を磨いている人が多数派です。
それでも耐えられずにドロップアウトする人もいます。

マークザッカーバーグのようにサービス開発のために技術習得が苦にならないという人は、そうそういません。
大抵の人はそこまで自分を追い込めないですし、自分で事業を起こしたいというような人は「幅広い見識をおさめたい」と言う気持ちを持っていることは多いですが、一つのエラーのために何時間もソースコードやウェブとにらめっこするのに耐えられる人はどれくらいいるでしょう。

もしもプログラミングを学んでそれを活かして事業を起こしたいという人は以下のことができるかどうか考えてみて、もし難しそうでしたら具体的な開発は誰かにアウトソースすることを強く勧めます。



・会社のような組織で「やらないといけない」ことを突き付けられなくても目的を達成するために自分を追い込めるか？
・一つのエラーのために何時間も画面とにらめっこすることに耐えられるか？
・本当に習得したいか？
・自分のなしたいことにプログラミングが必要で、かつ自分でやるしかない事態なのか？

以上のことを踏まえてからプログラミング学習に取り掛かっても遅くはありません。
「プログラミングがビジネスマンの必須スキルになる」という人もいますが、そもそもビジネスマン全員が電気工事できるわけないですよね？電気は50年以上前から日本に欠かせないインフラにもかかわらず。
そういうことです。
[Python]nCr mod 素数 を計算する

# 前提
[ABC156 D Bouquet](https://atcoder.jp/contests/abc156/tasks/abc156_d) を解くために必要になった。この問題の条件は
$p = 10^{9}+7$
$2 \leq n \leq 10^{9}$
$1 \leq r \leq 2 \times 10^{5}$

後に [ABC167 E Colorful Blocks](https://atcoder.jp/contests/abc167/tasks/abc167_e) を解くときに、拡張されたユークリッドの互除法を使ったので追加した。

# 結論

```python:フェルマーの小定理を使った方法
def ncr(n, r, mod):
    ret = 1
    for i in range(1, r+1):
        ret = (ret * (n-i+1) * pow(i, mod-2, mod)) % mod
    return ret
```

```python:拡張ユークリッドの互除法を使った方法
def ncr_eu(n, r, mod):
    ret = 1
    if r < n:
        inv = [1]
        for i in range(1, r+1):
            inv.append(max(1, (-(mod//i) * inv[mod % i]) % mod))
            ret = ret*(n+1-i)*inv[i] % mod
    return ret
```

ただし `mod` は素数


# 解説
## 組み合わせの数
$n$ 個の中から $r$ 個を選ぶ組み合わせは

```math
_n C _r = \frac{n!}{r!(n-r)!}
```

なので単純に

```python
from math import factorial

def ncr(n, r):
    return factorial(n) // factorial(r) // factorial(n-r)
```

としたいところだが、非常に遅い。

## フェルマーの小定理

早く計算するために $x!\pmod{p}$ を計算して `factorial` を置き換えたいが、単純に

```math
_n C _r \equiv \frac{n!\bmod p}{(r!\bmod p)((n-r)!\bmod p)}\bmod p
```
とはならないらしい。そこで、フェルマーの小定理を持ち出す。

```math
a^{p-1} \equiv 1 \bmod p
```
$a$ と $p$ が互いに素なとき、両辺を $a$ で割ることができ、

```math
a^{p-2} \equiv a^{-1} \bmod p
```
が得られる。 この $a^{-1}$ を逆元（ぎゃくげん）というらしい。
これを使うと

```math
_n C _r \equiv (n!\bmod p)((r!)^{p-2}\bmod p)(((n-r)!)^{p-2}\bmod p) \bmod p
```

となって、掛け算だけであらわせる。

### 繰り返し二乗法

ここで多用する $x^{p-2}$ を高速に計算するために、

```math
\begin{eqnarray}
x^{2} &=& x \cdot x \\
x^{4} &=& x^{2} \cdot x^{2} \\
x^{8} &=& x^{4} \cdot x^{4} \\
\cdots
\end{eqnarray}
```
として計算量を減らすテクニックだが、 Python では標準の `pow` を使ったほうが早い。

<details><summary>実装例</summary><div>

```python
def bpow(x, y, z):
    a = 1
    while y:
        if y & 1:
            a = (a*x) % z
        x = (x*x) % z
        y >>= 1
    return a
```
</div></details>

## 拡張されたユークリッドの互除法

ユークリッドの互除法といいつつ、もっと直感的な方法で求められる。$p$ を $a$ で割った商を $q$、剰余を $r$ とすると、

```math
\begin{eqnarray}
p &=& qa+r \\
0 &\equiv& qa + r \bmod p \\
0 &\equiv& q + a^{-1} r \bmod p \\
a^{-1} &\equiv& -q \cdot r^{-1} \bmod p \\
\end{eqnarray}
```
区間 $[1, a)$ の逆元を使って$a$ の逆元を計算するので、$_n C _r$ の $n$ が固定で $r$ が複数必要になる場合に効率が良い。

参考：[よくやる二項係数 (nCk mod. p)、逆元 (a^-1 mod. p) の求め方 - けんちょんの競プロ精進記録](https://drken1215.hatenablog.com/entry/2018/06/08/210000)
【Unity】Unityの環境構築をしてみた ~Unity プロジェクトの作成まで~

# 0. はじめに

最近、強化学習について勉強をはじめました。
できたらかなり面白そうですよね！
僕は、YouTuber [こーじ](https://www.youtube.com/channel/UCrkqNT0_Fd5_TIWdjey6K0A) さんにかなりハマってます。発想から実装まで全て面白いです。
ぜひチャンネル登録してみてください！

今回はこーじさんが Youtube で Unity の環境構築について動画化されてたので、僕もやってみました。

# 1. 概要

この動画では、
 1. Unity をインストール
 2. 自分のプロジェクトを作成
 3. 強化学習のライブラリ(ML-Agents)をダウンロード
 4. 必要なものを自分のプロジェクトに移す
 5. brew をインストール
 6. brew で pyenvをインストール
 7. pyenv で anaconda をインストール
 8. anaconda で python の仮想環境を作成
 9. 仮想環境内に mlagents をインストール

の手順で紹介されています。

ちなみに、僕のPCのスペックは、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/20f33c24-9c86-e15e-b262-d7f0fcbbe850.png)

こんな感じです。
こーじさんは Mojave ですが、僕は Catalina なのでその辺でシェルとかの違いが出てきそうですね。

参考：[Catalinaでデフォルトシェルが「zsh」に変わる、bashとの違いは?](https://news.mynavi.jp/article/osxhack-241/)



# 2. Unity のインストール

## 2.1. Unity Hub のダウンロード
[Unityをダウンロード](https://unity3d.com/jp/get-unity/download)から Unity Hubをダウンロードします。

ダウンロードファイルを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/a17d1955-e6e0-d12c-6d11-d2268a060a8c.png)

をAgreeします。

mac特有のアイコンを Application にドロップするやつをして、Finderとかから Unity Hub を起動します。
すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/ad901d73-7e71-5862-3b41-dd7ffeb06f36.png)

これが出てきます。これで Unity Hub が使えます。

## 2.2. Unity Hub のサインイン・ライセンス認証
右上の人のアイコンをクリックして、サインインに進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/b15c142a-a8ec-3912-619d-beeb5b70847d.png)

サインインした後、ライセンスを認証すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/ebde5edb-4cb9-4121-c593-05e44da33a5d.png)

までいけます。僕は趣味範囲での利用なので、Personal で登録しました。

### 【注意点！！】
ここで、アカウントのユーザーを日本語にしていると後の工程でエラーが起きるみたいです。
ローマ字(英語)に書き換えておきましょう。


## 2.3. Unityエディターのインストール先の指定

右上の歯車アイコンから、一般に入るとこんな画面が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/c5409a01-3a49-5d17-ea65-7dc770d6e410.png)

ここでインストール先を指定してあげます。



# 2.3. Unity のインストール

こーじさんは Unity 2019.2.21f1 を使ってますが、僕は Unity 2019.3.2f1 にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/ffd16c9d-b8c8-3b79-0750-6078060fc44c.png)

次へで進んで、
モジュールをインストールに加えるのところでは、
- Visual Studio for Mac
- Linux Build Support(Mono)
- Mac Build Support(IL2CPP)
- Documentation
- 日本語

にチェックを付けました。

先に進んでインストールを実行します。
これはかなり時間かかります。
まじで時間かかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/4b548c66-58c0-7538-be25-bf98bd37bbf0.png)

気長に待って...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/de5500a9-ab3d-0c0d-e39c-8ed061cc236d.png)

インストール完了！

# 3. 新しい Unity プロジェクトの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/888d1f1a-4b04-782c-2e8d-d0075bf90a80.png)

ここに、プロジェクト名と保存先を指定して、新しい Unity プロジェクトを作成します。
今回は3Dのプロジェクトを作成しました。

作成ボタンを押すと新しいプロジェクトができます。

プロジェクトを起動しようとしても、
「パスが存在しません」みたいに怒られた場合は、もう一度上記の2.3.のインストール先の指定が正しくできているか確認してください。

プロジェクトを起動すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541751/ea1b903c-213e-1b5d-9ad6-8085e40580d8.png)

でーん。
灰色のやつ！

続きはまた次回。
kintoneでボタンを消したいときにすぐにクラスを見つける方法

##「レコード追加ボタンを消したい」
kintoneのカスタマイズを行っていて、標準の設定からレコードのアクセス権を設定することはできても、
何かしらの状況でレコード一覧画面やレコード詳細画面に表示している「レコード追加ボタン」を
非表示にしたいときがありました。

<img width="430" alt="スクリーンショット 2020-02-23 1.43.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100759/50852fa8-43af-9722-ee5e-aa76f2d4ef27.png">


無理やりCSSで見えなくなるように制御すればいいことはわかっていたものの、
要素を探すのにすこし手こずってしまったので解決方法をメモとして残しておきます。

## 使用するツール

消したい要素のクラスを確認する際はGoogle Chromeの開発者ツールを使用する。
（`F12`を押せばすぐに出てきます）
kintoneのカスタマイズをする際によく使う機能ではありますが、
要素を探す際にもとっても役に立ちます。

## ボタンを消す手順

![css_kintone2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100759/623f5b43-8665-0d57-3355-593dd041e0a2.gif)

上記のGifを参考にしていただければいいのですが、少しずつ書いていこうと思います。

1. 開発者ツールを開き、Elementsタブを表示する。
2. モバイル画面切り替えボタンの左に選択ツールがあるので、選択ツールをクリックする。
3. kintoneの画面上で操作したいボタンにカーソルをあわせてクリックする。
4. ElementsタブのHTMLコードの中に選択した部分を記述しているクラスが表示される。
5. ダブルクリックしてコピーする。
6. kintoneのCSSカスタマイズファイルに非表示にするようにコードを書く。
7. kintoneアプリにCSSファイルを適用する。

CSSに記述する際は以下のように記述すると消えます。

```CSS:kintone_example.css
/*
.<消したいクラス> {
display: none;
}
*/

.gaia-argoui-app-menu-add.gaia-argoui-app-menu {
display: none;
}
```

同じようにモバイル版でもクラスを探してCSSで記述してあげると、ボタンを消すことができました。
ただ、モバイル版はPC版とはボタンの位置がかなり違っていて、
ボタンのクラスを見つけるのが大変だったので、この方法がより役に立つなと感じました！
今度からはすぐに消せるのでひと安心。
yukicoder No.995 タピオカオイシクナーレ

yukicoder No.995 → [問題リンク](https://yukicoder.me/problems/no/995)
数学的な解法と行列累乗を使う解法がある。今回は前者。
##### 解法
$p/q$ といちいち言うのは面倒なので、以降は $r=p/q$ とする。
実際の実装でも、$p/q$ をなんらかの変数に入れておくと楽に実装できるだろう。

タピオカは確率 $r$ で移動し、$1-r$ で移動しないので、反復試行の確率により、タピオカが $i$ 回移動する確率は$$P_i:={}_K\mathrm{C}_ir^i(1-r)^{K-i}$$である。

最初からミルクティーに入っていたタピオカが最終的にミルクティーの中にいる確率は、タピオカが偶数回移動した場合なので、$P$ の偶数番目の項の和となる。
数式できちんと書くと$$\displaystyle\sum_{i=0}^{\lfloor K/2 \rfloor}P_{2i}$$である。

ここで、二項定理より$$\bigl((1-r)+r\bigr)^K=\sum_{i=0}^K P_i \tag{1}$$$$\bigl((1-r)-r\bigr)^K=\sum_{i=0}^K (-1)^iP_i\tag{2}$$が成り立つ。
$(1)$ と $(2)$ を足し合わせると、奇数番目の項は+と-で打ち消し合い、偶数番目の項だけが2倍された形で残る。
また、$(1)$ の左辺は $1$ であり、$(2)$ の左辺は $(1-2r)^K$ である。
よって、最初からミルクティーに入っていたタピオカが最終的にミルクティーの中にいる確率は$$\frac12\bigl(1+(1-2r)^K\bigr)$$となる。

最初はキッチンにあったタピオカが最終的にミルクティーの中にいる確率は、タピオカが奇数回移動した場合なので、$P$ の奇数番目の項の和となる。
今度は $(1)$ から $(2)$ を引くと、偶数番目の項は打ち消し合い、奇数番目の項だけが2倍された形で残る。
よって、最初はキッチンにあったタピオカが最終的にミルクティーの中にいる確率は$$\frac12\bigl(1-(1-2r)^K\bigr)$$となる。

期待値は (美味しさ) $\times$ (ミルクティーに入る確率) なので、求める答えは$$(\ b\ の先頭\ M\ 項の和\ )\times\frac12\bigl(1+(1-2r)^K\bigr)+(\ b\ の末尾\ N-M\ 項の和\ )\times\frac12\bigl(1-(1-2r)^K\bigr)$$
となる。$K$ 乗を求めるには繰り返し二乗法を使えばよい。

[提出コード](https://yukicoder.me/submissions/433832)
deviseインストール後rails s でローカルサーバー起動しない

自分用忘備録
環境
ruby 2.6.3
rails 5.2.4

undefined method `config' for Devise:Module (NoMethodError)
config/initializers/devise.rb
Devise.setup do |config|
~~
Devise.config.sign_out_via = :get
Deviseを入れていて、二重にしてしまったのが、原因。
config.sign_out_via = :get
に修正。
無事開通。
computedによるclass変更

# はじめに
公式にある基礎なのですが、最近Vueを仕事で使っていなくて忘れてしまうので、ちょっと書いておきます。

何かしらのアクションで、styleを変更する事はよくあります。
例えば、clickなどアクションへの反応、validationのエラー、処理の成功失敗などです。

~~`v-bind:class`を使う方法もありますが、~~公式にあるように`computed（算出プロパティ）`を利用するのが一般的とのこと。
~~実際やってみると、computed利用の方が、~~状態をdataプロパティ、処理をcomputedにまとめられるのでコード全体がわかりやすくなると思いました。

# 流れ
1. イベントでメソッド実行
2. dataのプロパティの値を変更
3. computed（算出プロパティ）でclassを変更
4. styleのclassが変わる

# サンプル
ボタン押下でclassが変わります。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="H_Naito" data-slug-hash="abOBXRa" 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="Change class by 'computed'">
  <span>See the Pen <a href="https://codepen.io/H_Naito/pen/abOBXRa">
  Change class by 'computed'</a> by H.N (<a href="https://codepen.io/H_Naito">@H_Naito</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 参考
https://jp.vuejs.org/v2/guide/class-and-style.html