OmniAICreator/Qiita-1.07M huggingface dataset:
Notionのブラウザ拡張

[アルプ株式会社](https://thealp.co.jp/)でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 23日目のエントリです。
22日目は[Notionの編集履歴とバージョン管理](https://qiita.com/pictiny/items/8c87d64065884bef1fe3)でした。

# Web Clipper
NotionにはChrome用のブラウザ拡張である[Notion Web Clipper](https://chrome.google.com/webstore/detail/notion-web-clipper/knheggckgoiihginacbkhaalnibhilkk)が公式から提供されています。

<img width="329" alt="ブラウザ拡張1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/b3a96d96-f45e-65ea-6626-8da9acb4fdb4.png">

ページタイトル、保存するページ、保存するワークスペースを選択して保存します。
対象のページは自動でNotionのブロックに変換されて保存されます。

<img width="832" alt="ブラウザ拡張2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/4bfded0d-ace3-9320-5300-3e5e58700445.png">

# まとめ
ブロックに変換されるので完全な状態では保存できないのですが、知っていると便利なブラウザ拡張でした。

公式ドキュメントは[Web Clipper](https://www.notion.so/Web-Clipper-ba54b19ecaeb466b8070b9e683c5fce1)にありますのでそちらもご覧ください。
VizCommand32の話でも

CLI Advent Calendar 2019 24日目です。(あれ？今日はいつ？

#VizCommandのレポジトリ

VizCommandというシェルともターミナルエミュレータともコマンドプロンプトエミュレータとも言えないCLIツールを作っています。
https://github.com/bg1bgst333/VizCommand32

#VizCommandの特徴
CUIのコマンド入力の結果出力にGUIを出したり、GUIの操作をしようとするとCUIの入力が補完されたり、CUIとGUIの融合を目指したツールです。
といっても、まだいくつかの機能しかありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87811/318f2d70-87ec-d689-3ebd-32f58dbd6b71.png)

起動するとこんな感じ。
コマンドプロンプトっぽいですが、これエディットコントロールを改造してたり、子ウィンドウを内包できるリストビューを自作したり、いろいろしてます。すべて、C++ + Win32APIで実装されています。

#helloコマンド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87811/2c4ef94b-186a-5dc5-cdb1-95ec019b2d20.png)

Hello, world!

#hello /s

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87811/ecdb3688-5485-170a-a3f6-8e9b1d6a4c7f.png)

スタティックコントロールで表示。

#walkコマンド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87811/7bc44d8c-6e32-f2de-a113-2a25b713a92e.png)

walkでDocuments\testの下に移動します。
いわゆるcdコマンドですね。

#listコマンド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87811/edfd6c41-72e4-1fdb-2916-d7cdb94645ad.png)

listでそのフォルダのファイル一覧を表示します。
いわゆるlsコマンドですね。
これはリストビューのサムネイル表示で対応してます。
(あとでシェルエクステンションでも出来そうなのを知った・・・。)
まだ、クリックとかには対応してません。

#viewコマンド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87811/da782b85-4546-6265-19a8-2c615643ab5b.png)

viewコマンドはファイルを表示するコマンドですが、いまのところはBMP形式しか対応してません。
縦の高さはいま固定になっていますが、スクロールバーで左右上下の端まで見れます。

#その他

最近、スペースを含むファイルパスに対応しましたが、まだインストーラパッケージには含めていません。

#今後

いろいろありますが、簡易ファイル編集とか、ブラウザとか、Twitterクライアントとか、設定ファイルをGUIでポチポチ操作とか、開発支援ツールとか、まあ何でもできますが、おいおいで・・・。
"今年"の呼び方多すぎ

# "今年"の呼び方多すぎ
今年一年の間に"今の年表記は何なんだ?"と沢山考える時期が有ったので残しておく事にしました。


## 2019年
西暦

### 期間
2019/1/1 〜 2019/12/31

## 2019年度
年度

> 事務・会計等の便宜上、ある月日から始まることに定めて区分した、一年間の期間。

### 期間
2019/4/1 〜 2020/3/31

## 平成31年
和暦(旧元号)

> 和暦（われき）は、元号とそれに続く年数によって年を表現する、日本独自の紀年法である。

https://ja.wikipedia.org/wiki/%E5%92%8C%E6%9A%A6

### 期間

2019/1/1 〜 2019/12/31(2019年と同じ)

元号改定日(2019/5/1)まで、2019年の和暦表記は平成31年です。

## 平成31年度
和暦(旧元号) + 年度

### 期間
2019/4/1 〜 2020/3/31(2019年度と同じ)

**元号改定日(2019/5/1)まで、2019年度の和暦表記は平成31年度です。**

## 令和1年
和暦(新元号)

### 期間
２０１９/1/1〜２０20/12/３1(2019年と同じ)

**元号改定日(2019/5/1)以降、2019年の和暦表記は令和1年です。**

## 令和1年度
和暦(新元号) + 年度

### 期間
2019/4/1 〜 2020/3/31(2019年度と同じ)

**元号改定日(2019/5/1)以降、2019年度の和暦表記は令和1年度です。**

## 令和元年
和暦(新元号)
1年と元年表記の仕方が違うだけでどちらを使用しても正しいが、元年表記が一般的との事です。

### 期間

2019/1/1〜2020/12/31(2019年と同じ)

## 令和元年度
和暦(新元号) + 年度
1年と元年表記の仕方が違うだけでどちらを使用しても正しいが、元年表記が一般的との事です。

### 期間

2019/4/1 〜 2020/3/31(2019年度と同じ)
Kotlinでレイアウト部品を動的に設置する方法

# はじめに

こんにちは！[@nsd244](https://twitter.com/nsd244)です。
この記事では、Androidアプリ開発でkotlinを使った場合に動的にレイアウト部品を設置する方法について説明していきます。

# 前提環境

* Android-studio: 3.5.3
* kotlin: 1.3.61
* SDK version: 29
* Gradle version: 5.4.1

# kotlinでレイアウトに部品を設置する方法

サンプルコードを[github](https://github.com/nishidayoshikatsu/KotlinLayout)にあげましたので、参考にしてください。  


以下のコードのonCreateメソッドの中に追記していく形で各要素を設置していきます。
基本的には、レイアウトをxmlで定義すれば、他のButtonなどの要素はレイアウトの中に追加して書いていくことができます。
部品をkotlinで追加することができれば、動的なレイアウトを作成することが可能になります。

```kotlin:MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)  // レイアウトファイルの読み込み
    }
}

```

```XML:activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/MainLinearLayout"
        android:orientation="vertical"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
</LinearLayout>
```

## TextView

```kotlin:MainActivity.kt

val linearLayout = findViewById(R.id.MainLinearLayout) as LinearLayout    // レイアウトファイルにあるレイアウトのidを指定して読み込みます
linearLayout.gravity = Gravity.CENTER   // 画面中央寄せ

val text = TextView(this)
text.text = "ここにテキスト"
text.gravity = Gravity.CENTER
text.textSize = 35F

linearLayout.addView(text)  // レイアウトファイルにテキストビューを追加します

```

## RadioGroup・RadioButton

RadioButtonは、RadioGroupの中に要素を追加していきます。  
ここでは、配列にテキストを格納しておいて、配列の長さ分のRadioButtonを生成しています。  



```kotlin:MainActivity.kt

val linearLayout = findViewById(R.id.MainLinearLayout) as LinearLayout    // レイアウトファイルにあるレイアウトのidを指定して読み込みます
linearLayout.gravity = Gravity.CENTER   // 画面中央寄せ

val radioGroup = RadioGroup(this)
radioGroup.gravity = Gravity.CENTER
radioGroup.orientation = RadioGroup.VERTICAL

val list: List<String> = listOf("サンプル1", "サンプル2", "サンプル3", "サンプル4", "サンプル5")

list.forEach{
    val radioButton = RadioButton(this)
    radioButton.text = it
    radioButton.setPadding(0, 30, 0, 30)
    radioGroup.addView(radioButton) // radioGroupにradioButtonを追加する
    if(it.equals(list[0])){
        radioButton.isChecked = true
    }
}
```

また、選択されているRadioButtonのtextの中身を見るためには、以下のコードで実現できます。  

```kotlin:MainActivity.kt
val id: Int = radioGroup.checkedRadioButtonId
val radiotext: String = radioGroup.findViewById<RadioButton>(id).text.toString()
```

## Button

```kotlin:MainActivity.kt

val linearLayout = findViewById(R.id.MainLinearLayout) as LinearLayout    // レイアウトファイルにあるレイアウトのidを指定して読み込みます
linearLayout.gravity = Gravity.CENTER   // 画面中央寄せ

val button = Button(this)
button.text = "ここにテキスト"

linearLayout.addView(button)
```

Buttonをクリックした際の処理は、

```kotlin:MainActivity.kt

button.setOnClickListener {
	// ここにクリック時の処理を記述する
}

```


# まとめ

kotlinはあまりネットなどに資料が落ちてなくて苦労したので、少しずつ僕の知見をいろいろブログで書いていければなと思っています。  
kotlinで書いていくには、[公式ドキュメント](https://kotlinlang.org/docs/reference/)が一番参考になります。
Gitで複数のコミットをまとめる方法について2通り調べてみた

rebaseでコミットをまとめる際、プチやらかし案件を引き起こしてしまいました。
「複数のコミットをまとめて反映するならpatchを使うと良い」とアドバイスを受けたのですが、ググってみたら、rebaseでまとめる方法が多く紹介されていました。
この2通りの方法の違いが分からず調べたので、自戒を込めて記録しようと思います。

# そもそもの2通りの方法の概要

## 1. patchファイルを当てる方法

複数のコミットを1個の差分にまとめる方法

* `$ git diff -p <派生元ブランチ> <派生先ブランチ> > a.patch`  
2ブランチ間の差分をpatchファイルとして出力します。  
※patchファイル名は任意です
* `$ patch --dry-run -p1 < a.patch`  
ドライラン（テスト実行）で差分ファイルを確認します。
* `$ patch -p1 < a.patch`  
差分を確認後に実際に流し込むと、`git add`の手前の状態になります。
* （＋α）`$ git diff <派生元ブランチ> <派生先ブランチ> | patch -p1`  
このように、1行にまとめて一気に実行することもできます。

## 2. rebaseでまとめる方法

* `$ git rebase -i HEAD~(HEADから遡るコミット数)`  
vimが立ち上がるので、コミットメッセージやコミットの並び等を編集・保存する。
* `$ git push -f origin <branch>`  
**強制プッシュは慎重に！！**
* ※rebase前のコミット履歴はpush済みで、rebase中にコンフリクトしたら次の手順を踏む。
  * `$ git co --ours(--theirs)`  
  片方のブランチの変更のみを一気に適用できない場合は、地道に編集するしか無い...？
  * `$ git add .`
  * `$ git rebase --continue`（コンフリクト解消後にrebaseを続行する）  
  →終わったら再度`$ git push -f origin <branch>`

### 参考サイト

* [[Git] rebase コマンドで複数のコミットを 1 つにまとめる](https://dev.classmethod.jp/tool/git/git-rebase-fixup/)
* [git rebase -i でコミットをまとめて履歴を綺麗にしよう！](http://www-creators.com/archives/2850)
* [まとめた履歴を git push するときは、コンフリクトに注意。](http://www-creators.com/archives/2850#_git_push)
* [gitのコミットの歴史を改変する(git rebase) 1 / 2](https://tkengo.github.io/blog/2013/05/16/git-rebase-reference/)
* [git rebaseでコミットを並べ替える](https://qiita.com/Nunocky/items/44518030674d576c1778)

# rebaseで少々やらかした話

## 何を失敗したのか

```
(@個人ブランチ) $ git merge develop
$ git rebase -i HEAD~xx でコミットをまとめる
$ git push -f origin <branch>
```

上記の手順を踏みました。何が起こるでしょうか？
・・・本ケースのように、まとめようとするコミットの間に、自分以外の人によるコミットが入っている場合は`$ git rebase -i HEAD~xx`を使うのはまずかったのです。
`$ git rebase -i HEAD~xx`でまとめると、他の人のコミットも付け直します。
この際に自分のコミットとしてまとめてしまうので、自分がコミットしたことになってしまいます。
自分の分のコミットだけを先にまとめてからdevelopブランチをマージする必要がありました。
（[こちら](https://qiita.com/KTakata/items/d33185fc0457c08654a5)を参照）

## まとめ

### 全般

* **`$ git push -f origin <branch>`は慎重に！！**
* 自分のコミットが分散している＆他人のコミット入りのブランチをrebaseすると、  
他人のコミットを自分のコミットとしてコミットし直してしまう。
* patchファイルを当てる方法  
→個人ブランチのコミットログを改変するわけではないので、  
個人ブランチの更新分を一括でdevelopブランチに適用する場合にしか使えない  
＝「個人ブランチにしかない差分を1つの差分としてまとめて抽出し、developブランチの先頭コミットにくっつける」イメージ  
※この際、個人ブランチのコミットログは分散したままとなる。

### 対処法

* （このケースに陥ったら）このままマージするとまずい。  
→もしやってしまった場合は、別のブランチ作り直す＆自分の変更分をコミットから取り出すことで対処できる
* `$ git rebase`だと枝の付け根を切り替えるというイメージ。
* 今回のように自分の変更が分散してしまっている場合：  
別ブランチで切り直して、自分の分だけ`cherry-pick`するのが早いと思われる。  
→git操作をミスった際の尻拭いとして使える...
* `$ git reset`も使えると、間違えても修正が楽になる。  
→オプションの`--soft`, `--hard`, `--mixed`も意識できるとなお良し
* マージ相手のブランチにcheckout  
→他人のコミットを改ざんしてしまった個人ブランチをmerge  
→pushせずに`$ git reset HEAD^`で変更分だけ抽出することもできる  
（大量にコンフリクトする可能性はあるが・・・）
もしも私が小学生にGitの魅力を伝えるとしたら

[Git Advent Calendar 2019](https://qiita.com/advent-calendar/2019/git)の25日目の記事です。
私はGitを学び始めたばかりなので、初心者目線でGitの魅力を書きました。Gitをよくご存じの方には、初心者に説明する際の参考にしていただけると嬉しいです。

# はじめに
この記事は、**「Gitってどんなものか全然分からない…」という方**に向けて、Gitのメリットをわかりやすく伝えることを目的とした記事です（詳しい機能や使い方には触れていません）。読み終えた後に、**「Gitってなんだかすごい！」**と思っていただくことが目標です。

# 設定
話を分かりやすくするために、今回は以下の設定で話を進めます。

- 私
    - 塾の先生
- 岡畑くん
    - ポケモンゲームが大好きな小6男子。**最近は”ルビー・サファイア”に夢中**
    - PCは普段全く使わないため、”ファイル”や”ソースコード”という単語はわからない

# ストーリー
## （１）バージョン管理について

- 私「岡畑くん、ルビー・サファイアをプレイしてて、間違ってレポートを書いた(= セーブした)ことある？」
- 岡「うん。この前ふざけてジグザグマにマスターボールを使ったら、そのままうっかりレポートして、マスターボールを無駄にしちゃった（笑）」
- 私「もしそこでGitを使ってたら、マスターボールを使った時よりも前に書いたレポートに戻ることができるんだ！」
- 岡「そうなん？！めっちゃすごい！マスターボールで遊び放題じゃん（笑）」

#### ”ポイント１：Gitを使えば、好きなレポートを書いた(= セーブした)時点に戻れる”

## （２）ブランチについて

- 私「岡畑くん、ゲームを最初から始める時に、3匹のポケモンのうちどれを選んだ？」
- 岡「1番カッコいいキモリを選んだよ！」
- 私「他に良いポケモンはいなかった？」
- 岡「ミズゴロウもいいなって思ったよ」
- 私「Gitを使えば、キモリとミズゴロウを両方とも使ってゲームを楽しめるよ！」
- 岡「えー、ほんと？」
- 私「”ブランチ”って機能を使ったら、2つ以上のストーリーを同時に進めることができるんだ。まず、キモリを選んでゲームを進めてセーブする。次に、ミズゴロウを選んでゲームを進めてセーブする。そうすると、”キモリ編”と”ミズゴロウ編”という2つのストーリーができて、どちらも使えるんだ」
- 岡「おー、すごい！一石二鳥だね。」
- 私「他にも例えば、イーブイを”シャワーズ”・”サンダース”・”ブースター”のどれに進化させようか迷ったときに、3パターンとも試して1番良いものを使うこともできるんだよ！！」
- 岡「それってめっちゃすごいじゃん！」

#### ”ポイント２：ブランチの機能を使えば、いろんなストーリーが楽しめる”

## （３）GitHub

- 私「岡畑くんが一番お気に入りのポケモンって何？」
- 岡「グラードン！！」
- 私「じゃあ、次のテストで90点以上とれたら、GitHubを使って、岡畑くんのグラードンを先生のゲームにコピーして、強くしてから返してあげるよ！」
- 岡「おー！先生ありがとう！がんばるよ！」

#### ”ポイント３：GitHubを使うと、友達と一緒に同じポケモンを育てられる”

## まとめ
- Gitを使うと、
    - 過去のレポートを書いた(= セーブした)時点に戻れる
    - ブランチ機能でいろんなストーリーが楽しめる
- GitHubを使うと、
    - 友達と同じデータを共有して強くできる

## 参考

- [君には1時間でGitについて知ってもらう(with VSCode)](https://qiita.com/jesus_isao/items/63557eba36819faa4ad9)
- [図解！ Gitのブランチ・ツリーをちゃんと読む](https://qiita.com/jesus_isao/items/2a0495c973a4c911c2cc)
マンデルブロ集合で遊ぶ(3D編)

![mande_3d_cut_color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101445/f775dc53-587f-b40b-417a-31b49941202a.png)


# 断面にみえた!?
マンデルブロ集合の可視化表現で、「集合に含まれる部分は真っ黒(または一色)で、含まれない部分は外側に向かってグラデーションや同心円状の縞模様で」という「絵」を見たとき、なんとなく果物みたいなものを縦に割った断面を連想していました。どの果物かといわれればよくわかりませんでしたが・・・

今考えれば、ともかく、「中身が詰まった『何か』の真ん中付近がすっぽり空洞になっているようなものを縦にスパッと切った断面」を見ている、という感覚だったのだと思います。

今回の記事はこの感覚を具現化したような絵を作り、「自己満足」に浸ったときの事を思い出して書いたものです。

# 四元数
あるとき、四元数(quaternion)という、複素数よりもさらに複雑な数で、しかもそれがCGなどの世界で結構役にたっている事を知りました。

四元数は、その名の通り、四つの元(要素)を持つ数の事です。ちなみにマンデルブロ集合を計算する場合に基礎とした「複素数」は実部と虚部からなる「二元数」です。

四つの数の構成としては、

```math
Q = (a, b, c, d) = a + ib + jc + kd
```
というものです。a,b,c,dは実数で、i,j,kは複素数でいうところの虚数単位、つまり、四元数の単位です。
i,j,kの性質は以下の掛け算規則で特徴づけられます。

```math
i^2 = j^2 = k^2 = ijk = -1, 
```
この性質から、四元数の単位同士や四元数同士の掛け算を求める事ができます。

# 四元数でマンデルブロ

複素数の２つの元を２次元の空間の座標とみなしてある計算を行い、その結果がある条件を満たす複素数の点からなる集合がマンデルブロ集合でした。

では、これと同じ方法で、つまり四元数の４つの元を４次元の空間の座標とみなして、マンデルブロ集合を計算したのと同様の繰り返し計算の収束・発散を判定して図形を書けば、何か意味のある図形が生まれるのでしょうか？
私は残念ながら、この事に関する数学的な解析をする素養を持ち合わせていないので、直観を信じ、半ば強引に、

```
ともかくやってみる
```
ことにしました。結果は４次元の座標として得られるので、これも適当に一次元を無視して（４次元を３次元に射影して）可視化してみる事にします。


# c++/boostによる３次元マンデルブロ集合の計算

今回は[c++/boostの四元数のライブラリ](https://www.boost.org/doc/libs/1_66_0/libs/math/doc/html/quaternions.html)を使って計算します。

```c++
#include <iostream>
#include <boost/math/quaternion.hpp>

using namespace std;
using namespace boost::math;

int main(int argc, const char * argv[])
{
  for(float x = -2.0 ; x <= 2.0 ; x += 0.05 ) {
    for(float y = -2.0 ; y <= 2.0 ; y += 0.05 ) {
      for(float z = -2.0 ; z <= 2.0 ; z += 0.05 ) {
        quaternion<float> c(x, y, z, 0);
        quaternion<float> q(0, 0, 0, 0);
        int i;
        float r;
        bool div = false;
        for(i = 0; i < 20; i++) {
           r = abs(q);
           if(r > 4.0) {
              div = true;
              break;
           }
           q = q*q + c;
        }
        if(!div)
          cout << x << " " << y << " " << z << endl;
      }
    }
  }
}
```
コードの構造は、ほぼ、前記事「[マンデルブロ集合で遊ぶ(描画編)]()」と同じです。発散チェックの結果を保持するdivというbool値の変数を使っています。

このプログラムをコンパイルして実行し、標準出力をファイル(tt.dat)にリダイレクとした後、gnuplotを起動し、以下のコマンドを入力します。

```sh
gnuplot> set view equal xyz
gnuplot> splot "tt.dat" with dot
```

１行目は、３次元プロットする場合にx,y,z座標の比率を同じにするという指定です。２行目は３次元プロットを点(dot)で表示する命令です。
これで、以下の表示が得られます。

![mandel_3d_full.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101445/2f45546c-3ee7-fd50-2a3b-a00cdc823264.png)

なんだか、三次元空間の中心に「かたまり」が浮いています。gnuplotのプロットのアウトプットウィンドウによりますが、マウスでインタラクティブに表示角度を変えられる場合には変えて、いろいろな角度からみてみてください。

この図形が、なんとなく、先がとがった回転体である事は確認できると思います。

![mandel_3d_rotate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101445/09bd765f-c817-f9c5-839f-96b6ca7bde4e.gif)


次にこれを、2次元plotしてみます。これによって、データとして出力されているz軸の要素は無視され、解像度は低いものの、おおむね見慣れた（？）マンデルブロ集合の絵になっている事が確認できます。
これは、この3次元図形の断面をみている事になります。

![mandel_cut_3d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101445/9dbbe88a-8060-fa9f-8dea-0f64e153085f.png)

gnuplotのコマンドは、以下です。

```sh
gnuplot> set size ratio -1
gnuplot> plot "tt.dat" 
```

なお、冒頭の画像は、ここまでと同様の方法で3次元画像データを作成し、ボリュームデータの可視化を行ったもので、より「断面」感が出ていると思います。

以上、です。
【HTML/CSS】クリスマスなのでペンギンをHTML/CSSで作ってみた

# ペンギンをHTML/CSSで作る

クリスマスなので、シンプルなペンギンを作ってみました。
HTMLとCSS以外は使っていません。

## 配色を考える

配色を考えるときに、下記のサイトを参考にさせていただきました。
２色の相性の良い組み合わせの配色を簡単にチョイスできます。
https://colorsupplyyy.com/app/

## 完成形
<img width="395" alt="スクリーンショット 2019-12-25 23.43.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355459/5e29ac89-ad9a-8916-3b34-04553973ec84.png">


# ソース
ソースは下記の通りです。
[jsfiddle](https://jsfiddle.net/2vLox5ab/)で作成しました。
別の環境でテストしていないため、別の環境で絵が崩れた場合については
ご了承ください。

**目(class="eyes")の部分はflexボックスを使用しています。
もしよかったら参考にしてみてください。**

## HTML
```html

<div class="penguin">
  <div class="eyes">
    <div class="eye">
      <div class="pupil"></div>
    </div>
    <div class="eye">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth">
    <hr class="mouth_border">
  </div>
  <div class="stomach">
  </div>
</div>
```

## CSS
```css
.penguin {
  display: block;
  background-color: #5BA9FF;
  width: 370px;
  height: 400px;
  border-radius: 35% 35% 0 0;
  margin-top: 20px;
  margin-left: 20px;
}
.eyes {
  display: flex;
  position: absolute;
  margin-top: 52px;
}
.eye {
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 86px;
}
.pupil {
  background: black;
  position: relative;
  margin-top: 5px;
  margin-left: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.mouth {
  background-color: #FFC039;
  position: absolute;
  width: 120px;
  height: 20px;
  margin-top: 110px;
  margin-left: 120px;
  border-radius: 50%;
}
.mouth_border {
  position: relative;
  margin-top: 8px;
}
.stomach {
  background: white;
  position: relative;
  width: 300px;
  height: 180px;
  margin-left: 6%;
  border-radius: 35% 35% 0 0;
  position: absolute;
  bottom: 0;
}
```
VS CodeからSSHでサーバ上のDockerコンテナを操作する

# やりたいこと
手元のPCのVS CodeでSSHで繋がるサーバ上で動くDockerコンテナの中身を弄りたい

#環境
ホストPC・・・Windows10 64bit
リモート先・・・Ubuntu 16.04.5 LTS , Docker version 19.03.1


#前提
リモートサーバ上でDockerが動くこと

VS CodeにRemote Developmentが入っており，SSHでリモートサーバにアクセスできること
やり方はググるといっぱい出てきます．

>Remote Development - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack


#手順
操作はすべてホストPCで完結します．

##Docker Desktopのインストール
日頃からRemote-SSHにお世話になっていたこともあり拡張機能のインストールだけで済むと勝手に思い込んでいましたが，ちゃんとホストPCにもDockerをインストールしないといけませんでした．
これに気づかずにだいぶ時間を無駄にしてしまいました...

>Docker Desktop for Windows - Docker Hub
https://hub.docker.com/editions/community/docker-ce-desktop-windows

インストーラーを実行後，再起動して導入は完了です．
これに関しては他に設定を変えたりはしていません．


##.ssh/configファイルの編集
VS CodeでF1→Remote-SSH: Open Configuration File... を開きます．
ポートフォワーディングを行うためにLocalForward～を追記します．

```config:.ssh>config
Host RemoteServer
    HostName xxx.xxx.xx.xx
    User xxxxxxxx
    Port 22
    IdentityFile "C:\Users\xxxx\.ssh\id_rsa"
    LocalForward 23750 /var/run/docker.sock
```


##VS CodeにDockerの拡張機能をインストール
Remote-SSHでリモートサーバに接続し，接続先のワークスペースにDockerの拡張機能をインストールします．

>Docker - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

インストールしたらVS Codeの設定を変更します．
docker.host と入力して出てきた欄に下記を入力します．

>tcp://localhost:23750

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555270/3fd895b2-7af1-c125-b482-369d4cda6243.png)


作業は以上で完了です．


#実行
サイドバーのリモートエクスプローラーボタンをクリックし，上のプルダウンメニューからContainersを選択するとコンテナ一覧が表示されます．
コンテナの名前の上で右クリックしてConnect to Containerを押すと新しいウィンドウが立ち上がり，コンテナを操作できるようになります．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555270/ddc88b41-ca19-3a7b-3de2-b73a40d3aa8e.png)
この使い方だとクジラアイコンのDocker拡張機能は使えない？みたいなので右クリックで非表示にしています．

#おわりに
これでDockerコンテナ内でコードがガシガシ書けるようになったので良かったです．
Notionの編集履歴とバージョン管理

[アルプ株式会社](https://thealp.co.jp/)でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 22日目のエントリです。
21日目は[NotionはMarkdownでコピペできる](https://qiita.com/pictiny/items/53eae8d2e0899f5940f2)でした。

# バージョン管理
Notionはページの編集履歴を残すバージョン管理の機能があります。

## Updates
ページ右上の`Updates`から履歴を確認することができます。

<img width="486" alt="履歴1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/a5360d1a-9a5c-b673-d6b1-0098b33b62ac.png">

## Page History
右上メニューの`Page History`から復元したページを見ることができます。

<img width="263" alt="履歴2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/d3e3adb9-1e25-5e26-bb66-402f1be139de.png">

ただし`Page History`はFreeプランでは利用できません。
PersonalプランとTermプランでも30日間しか履歴は保存されませんので注意しましょう。

# まとめ
Notionのバージョン管理で最も注意するべきはバージョンが保存される編集の単位です。
Notionはページを保存するアクションが必要ないため、バージョンを切る単位はコントロールできないと思っておいた方がよいでしょう。

公式ドキュメントは[Version history](https://www.notion.so/Version-history-eec3af1f5bc64ba0a712ee5794e12a9c)にありますので、そちらもご覧ください。
Railsコマンド

Railsコマンドの一覧

○rails newコマンド
　→アプリケーションの雛形を作成

```
$ rails new [アプリケーション名]　-d mysql
```

「-d(databaseの略) mysql」はオプション
MySQLをデータベースとして使用する

○rails serverコマンド
　→サーバーを立ち上げる

```
$ rails s
```
「server」を「s」と略しても良い

○Controlキー＋Cキー
　→サーバーを停止

○rails db:createコマンド
　→データベースにテーブルを作成

```
$ rails db:create
```
アプリケーションディレクトリに移動してから実行すること

○rails g controllerコマンド

```
$ rails g controller　[コントローラー名] [アクション名]
```

「g」は「generate」の略
コントローラーを作成、定義できる
※コントローラー名は複数形にすること！

○rails destroy controllerコマンド
→コントローラーを削除できる

```
$ rails destroy controller [コントローラー名]
```
同時に作成されたビューなども一緒削除できる

○rails g modelコマンド
 →モデル、migrationファイルを作成

```
$ rails g model [モデル名]
```

○rails destroy modelコマンド
→モデルを削除できる

```
$ rails destroy model [モデル名]
```

○rails db:migrateコマンド
　→migrationファイルをデータベースに適応させ、テーブルを作成

```
$ rails db:migrate
```

○rails db:rollbackコマンド
　→直近の実行したmigrateファイルの読み込み前の状態に戻す

```
$ rails db:rollback
```
カラム名や型を間違えて作成してしまった時に使用する
※「rails db:migrate」をもう一度行っても変更することはできない

○rails routesコマンド
　→ルートの一覧表を表示

```
$ rails routes 
```
Cypressで非同期処理の完了を待ちたい

ユーザー新規登録をテストでハマったのでメモ。
ユーザー情報はFirebase Authenticationで管理しており、新規登録画面でユーザー登録し、Firebase上にユーザーがきちんと登録されていることを確認後、テスト終了時にFirebase上のユーザー情報を削除したい。

普通にこんな感じでやっても動かない。

```js
const deleteUser = () => {
  return new Promise(resolve => {
    firebase.auth().onAuthStateChanged(user => {
      resolve(user);
    });
  })
}
deleteUser().then(user => user.delete())
```

その後ドキュメントを見直して、`Cypress.Promise`を発見したので試してみる。
https://docs.cypress.io/api/utilities/promise.html#Syntax

```js
const deleteUser = () => {
  return new Cypress.Promise(resolve => {
    // 同じ
  })
}
deleteUser().then(user => user.delete())
```

これも動かない。
Custom Commandsを使うと同期的に実行してくれるみたい。
https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax

> To get your function into the Cypress pipeline you can use custom commands. The documentation doesn't state it, but you can return a Cypress.Promise from them.

> *https://stackoverflow.com/questions/52154037/wait-for-an-own-function-which-returns-a-promise-before-tests-are-executed*

```js
Cypress.Commands.add('deleteFirebaseAccount', () => {
  const firebase = setupFirebase();

  return new Cypress.Promise(resolve => {
    firebase.auth().onAuthStateChanged(user => {
      resolve(user);
    });
  });
});

afterEach(() => {
  cy.deleteFirebaseAccount().then(user => user.delete())
});
```

こんな感じで書いてあげたらうまく動いた。
crontabを捨てsystemdに定期実行を任せよう。

Linux環境で定期的に実行させたい処理はcronで処理するのが一般的かと思います。

30分毎に `exec.sh` を実行する。

```bash
$ crontab -e

0,30 * * * *   /bin/sh ~/exec.sh
```


## systemd
systemdはサービスを管理するための仕組みですが、
例えば、nginxをずっと起動していたいときに

```
$ systemctl start nginx.service
```

みたいな使いかたで、システムをデーモン化するために用いるのがよくある使用方法でしょうか。

```
$ systemctl enable nginx.service
```

また、`enable` で自動起動させるような使い方もあります。




## systemdを作ってみる

`〇〇.service` という設定ファイルを所定の場所に配置するだけで、使用できるようになります。

```:/etc/systemd/system/exec.service
[Unit]
Description=run exec.sh

[Service]
Type=simple
ExecStart=/bin/sh ~/exec.sh

[Install]
WantedBy=multi-user.target
```

`ExecStart=` の部分に実行したいコマンドを入力するだけです。


## 起動してみる

これでsystemdの起動コマンドで、さきほど作成したserviceファイルが実行されるようになります。

```
$ systemctl start exec.service
```

`status` で実行結果がみられます。

```
$ systemctl status exec.service
● exec.service - run exec script
```

## 定期実行させる

ここで本題の定期実行です。
systemdにはtimerという機能もあります。

先程作成した `〇〇.service` と一緒のディレクトリに `〇〇.timer` という設定ファイルを加えます。
〇〇に入るファイル名は共通です。


```:/etc/systemd/system/exec.timer
[Unit]
Description=timer exec.sh

[Timer]
OnUnitActiveSec=30m

[Install]
WantedBy=timers.target
```

これだけで冒頭のcronと同様の処理が可能です。
`OnUnitActiveSec=30m` という書き方ができ、30分毎に実行されるのが直感的です。

```
$ systemctl start exec.timer
```

起動から30毎に実行される。

```
$ systemctl enable exec.timer
```

ログはsystemdなのでjournalctlで確認可能です。

```
$ journalctl -f -u exec.service
```

## systemd.timerのメリット
systemdで設定するメリットとして設定を細かくできる点にあります。

`Persistent=true` で起動時に時間を待たずにすぐに実行開始したり、
`OnBootSec=20min` で逆に起動後20分後から実行するように調整したり可能です。

cronを使用するうえでよく問題になりがちなユーザーと権限の問題も.service側に
`User=username` で好きなuserに実行させることができ、設定ファイルも１つのディレクトリにすべてまとまり管理しやすいです。
VB.netについて

今日は最近話題になってきている
VB.netについて書きます。

# VB.netとは

「Visual Basic .NET」の省略表現。

マイクロソフトが開発した、Windowsで動くプログラムを作るためのプログラミング言語です。

# VB.netの良い点

とにかく簡単でわかりやすい
そのまま仕事で使えることもある

私たちが日常に使うような言葉（自然言語）に似ているため、プログラミング初心者でも分かりやすい。

# VB.netの悪い点

他言語よりも簡単な分、汎用性が欠けることがある

自然言語に近いので簡単に理解しながら学習が進められるというメリットの反面
VisualBasic.NETでしか開発できないアプリもあり、汎用性に欠けてしまいます。

他のプログラミング言語を学習する際にまたゼロからの学習になってしまうので要注意です。

# VB.netの活用シーン

ボタンやテキストボックス等、ユーザーが直接目にする部分の開発に適しています。

各プログラムごとにまとまったコードになっているので、組み合わせるだけでプログラムを作ることができます。

Excel、Outlook、WordなどのWindowsのアプリのプログラム構築も可能で
メールの件名や本文を条件によって分けて自動で返信をしたりなどもできます。

実用例として

* WEB・スマホアプリの開発
* 3Dゲームの開発
* Windowsクラシックアプリの開発
* UWPアプリの開発
* Officeアプリケーションの拡張ツールの開発

#
３次元ベクトルクラスを作る

基本的な言語機能の理解を確認するために、３次元ベクトルクラスをつくってみる。課題は以下：
1. メンバ変数の型はあとから簡単に変えられるようにしておく
2. getter, setterを持ち、クラス外部からアクセスできる
3. コンソールから値をセットできるようにする
4. ３つの数を受け取ってベクトルを返すように変更する。また、x,y,zをデフォルト0で初期化する

#x,y,zを持つクラスv3d
あとでx,y,zの方を変更することも考慮して、別名ele_typeを定義

```C:Step1
class v3d
{
public:
	using ele_type = int;//あとで変更を考慮

private:
	ele_type x;
	ele_type y;
	ele_type z;
};
```

#getter, setter部分
最初はgetter,setterをそれぞれ１つだけで書こうと思ってたが、、、まずはそれぞれの要素x,y,zにgetter,setter設ける。

```C:Step2

class v3d
{
public:
	using ele_type = int;//とりあえずint

private:
	ele_type x;
	ele_type y;
	ele_type z;
public://ここ忘れててprivateになってしまっていたので注意
	ele_type getter_x();
	void setter_x(ele_type X);
    ele_type getter_y();
	void setter_y(ele_type Y);
    ele_type getter_z();
	void setter_z(ele_type Z);
};
v3d::ele_type v3d::getter_x() {
	return x;
}
void v3d::setter_x(ele_type X) {
	x = X;
}
v3d::ele_type v3d::getter_y() {
	return y;
}
void v3d::setter_y(ele_type Y) {
	y = Y;
}
v3d::ele_type v3d::getter_z() {
	return z;
}
void v3d::setter_z(ele_type Z) {
	z = Z;
}
```

#main部分
v3dクラス変数vを作成し、x,y,zを設定する。コンソールから値を設定できるようにした。以下はmain部分

```C:Step4

int main()
{
	int x, y, z = 0;
	std::cout << "xの値を入力してください　:";
	std::cin >> x;
	std::cout << "yの値を入力してください　:";
	std::cin >> y;
	std::cout << "zの値を入力してください　:";
	std::cin >> z;

	v3d v;
	v.setter_x(x);
	v.setter_y(y);
	v.setter_z(z);
}
```
なんだかx,y,zについて、一つ一つ値をsetするのはあんまり気持ちよくない。なのでせめてsetをひとまとめにする。

#setterをまとめる＋デフォルト値0を設定する
以下、追加した関数

```C:Step5
v3d set(v3d::ele_type x = 0, v3d::ele_type y = 0, v3d::ele_type z = 0) {
	v3d v;
	v.setter_x(x);
	v.setter_y(y);
	v.setter_z(z);
}
```
main側ではv3d型変数を作成して、引数を入れたsetを書く。
結局x,y,zそれぞれのsetter部はそのままで、それをまとめて尻拭いしているだけのsetになってしまっているので、１つのsetにすべて押し込む形にする。そしてできたのが以下

```C:Whole
#include <iostream>

class v3d
{
public:
	using ele_type = int;

private:
	ele_type x;
	ele_type y;
	ele_type z;

public:
	ele_type getter_x();
//	void setter_x(ele_type X);
	ele_type getter_y();
//	void setter_y(ele_type Y);
	ele_type getter_z();
//	void setter_z(ele_type Z);

	void set(ele_type X, ele_type Y, ele_type Z);
};
v3d::ele_type v3d::getter_x() {
	return x;
}
/*
void v3d::setter_x(ele_type X) {
	x = X;
}
*/
v3d::ele_type v3d::getter_y() {
	return y;
}
/*
void v3d::setter_y(ele_type Y) {
	y = Y;
}
*/
v3d::ele_type v3d::getter_z() {
	return z;
}
/*
void v3d::setter_z(ele_type Z) {
	z = Z;
}
*/

void v3d::set(v3d::ele_type X = 0, v3d::ele_type Y = 0, v3d::ele_type Z = 0) {
	x = X;
	y = Y;
	z = Z;
}

int main()
{
	v3d vec;
	vec.set(1, 2, 3);
}

```

コンソールからの入力部分は削除。
rails+froala+s3 froalaのエディタ内に画像をアップロードしてそれを、S3に保存するのにつまずいた



froalaの設定

https://www.froala.com/wysiwyg-editor/v2.0/docs/framework-plugins/rails

https://www.froala.com/wysiwyg-editor/docs/sdks/ruby

上のようにgemをいれて設定する。

<h2>つまずいたところ</h2>

froala-editor-s3の設定を終えた後に、いざ画像をアップロードしようとしたときに、consoleで
403(forbidden)がでてずっと止まっていた。

<h2>解決策</h2>

s3側の設定で、バケットのアクセス権限で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508016/23b83cc4-ce62-73da-f407-d3d5c2d0eb9d.png) 
のように設定する。

froalaの公式にはs3側の設定について書いていなかった。
Javascriptレシピ⑧

Javascriptの簡単なメモです。
アプリ制作に応用できる基本レシピですので、参考にされたい方はどうぞ。

###onChangeイベント

```js


<input type='text' id='input_message' value='' onChange='func1()'>

function func1(){
    const input_message = document.getElementId('input_message').value;
    document.getElementById('out').innerHTML = input_message.toUpperCase();

```

###FileReader

CSVや画像ファイルをブラウザから直接読み取ったりアプロード出来ます。

```js

const text = new Blob(['テスト'], {type:'text/plain'});
const file_reader = new FileReader();

file_reaeder.onload = function(e){
    console.log(file_reader.result);
};

file_reader.readAsText(text);

```

###オブジェクトをシリアライズ

シリアライズとはインスタンスを送信可能なように変換することです。
ｊｓではJSON文字列に変換します。
JSON.stringfyメソッドを使用します。
関数のオブジェクト、symbol、undefineシリアライズ出来ません。
配列の中にある場合はnullになります。
第二引数にはkey,valueが渡されます。

```js

const obj = {id='1', name='sds';}
const after_obj = JSON.stringfy(obj, (key,value){
    if(value === null){
        return;)
    }
    return value;
})
```

第三引数はspace変数で、変換後のJSONの文字列のインデントが設定できます。


###FormData

FormDataオブジェクトとはサーバーにデーターを送信する際に使用するオブジェクトです。
ユーザーが入力するデータや任意のデータをサーバーに送信できます。

```js

function func1() {
    const formData = new FormData(document.forms.form1);
    formData.append('key1','value');
    for (item of formData) {
        console.log(item);
    }
    return false;
}

```
【MySQL】DELETEとTRUNCATEの差 ~駆け出しエンジニア編~

こんにちは！
オズビジョン開発グループのShoです。

2019年9月~29歳で未経験から営業→エンジニアになった私が、
脱未経験エンジニアを目指して、業務の中で学んだこと、会社の業務について書いています。
私の現状については最初の投稿をご参照ください。
[[最初の投稿](https://qiita.com/ssuzuki0301/items/ecfde22d30f8f1032c49)]

今回はMySQLのDELETEとTRUNCATEの違いについてです。
どちらもテーブルのデータの削除をしますが、どういった違いがあるのでしょうか。

# 読んで欲しい人
- 経験1年未満のエンジニアの人
- SQLを勉強中の人

# 今回の背景
チームの人と[[本番環境でやらかしちゃった人](https://qiita.com/advent-calendar/2019/yarakashi-production)]のアドベントカレンダー話題で盛り上がり、
「前本番環境のDBで間違ってテーブルをTRUNCATEしちゃった人がいてさ〜〜」
「うわ...考えたくもない...」
というような会話がありました。

私はTRUNCATEについて詳しく知らなかったので、話の深刻さがわかりませんでした。
テーブル消してしまったのか、まぁでも戻せるでしょ！と思いながら、
テーブル削除のSQL文について調べました。

基本的にDELETEしか知らなかったので、その違いを知り、チームの人たちの会話の真意を知りました。

# DELETEとTRUNCATEの違い
「テーブルデータの削除」という意味では同じ処理です。

SQL文にするとこんな感じです。

```sql
DELETE TABLE hoge;

TRUNCATE TABLE hoge;
```

２つの処理を詳しく見てみましょう。
### DELETE
- テーブルのデータを一つずつ削除していく
- **データのみ**が削除されるだけ
- AUTO_INCREMENTの値は初期化されず保持される
- トランザクション制御で**ROLLBACKできる**

DELETEは単純にテーブルデータのみを削除します。
ロールバックによって戻すこともできます。

※AUTO_INCREMENTはカラムに値を指定しなかった場合に
MySQLが自動的に値を割り当ててくれるオプションです。
値は整数で１ずつ増加して連番となります。
例えばid1,id2がすでにあり、続いてidを指定しないで２つのデータを追加すると
id3,id4とそれぞれに自動的にidを割り当ててくれます。

### TRUNCATE
- まずDROP TABLEを実行し、その後再度同じテーブルを作成する
- AUTO_INCREMENTの値も初期化される
- トランザクション制御しても**ROLLBACKできない**

**ログの取得もされず、インデックス処理もされないため、データの復元ができません**

TRUNCATEは一旦、根こそぎテーブルごと削除して、全てなかったことにしてからテーブルを再度作り直すことで、テーブルのデータを削除します。作り直しといった感じです。

DELETEはテーブルの「データのみ」を一つずつ削除するだけです。

なので処理はTRNCATEの方が高速です。

そう、TRUNCATEは間違えて消した！！！が許されません。
消した本番データは戻ってこないのです。。。

ちなみにAUTO_INCREMENTのみを初期化したければ、下記のようなSQL文で可能です。

```sql

ALTER TABLE hoge auto_increment = 1;
```
処理が速いのはいいけど、危ないしDELETEでいいのでは？
と思うかもしれませんが、実際役立つ場面がありました。

# TRUNCATEがあってよかった例
デバッグをした機能のdev環境でのテストが終わり、
コア機能のため入念なチェックをするために
本番環境のデータをdumpしてdev環境にリストアして、再度テストをすることになり
ました。

下記のSQL文で本番環境のデータをdumpし、dev環境にリストアしようとしました。
もちろんdev環境も元に戻すためdev環境のデータもdumpしました。
※具体的な名称、数値は避け{}の変数で表現してます。

```sql
// 本番データをダンプ
mysqldump -u {user} -p{password} -h {host} -t {database} {table} --quote-names --skip-lock-tables --single-transaction | gzip > {table}.{env}.{YYYYMMDD}-bk.sql.gz

// dev環境データもダンプ
mysqldump -u {user} -p{password} -h {host} -t {database} {table} --quote-names --skip-lock-tables --single-transaction | gzip > {table}.{env}.{YYYYMMDD}-bk.sql.gz

// 本番データをdev環境にリストア
gunzip < {table}.{env}.{YYYYMMDD}-bk.sql.gz | mysql -u {user} -p{password} -h {host} -D {database}
```

上記のリストアの結果

```sql
ERROR:Duplicate entry '1' for key 'PRIMARY'
```
keyの重複によりリストアできませんでした。

そこで、TRUNCATEの登場です。
一旦既存のdev環境テーブルを消して、それから本番環境のデータをリストアします。
dev環境テーブルのデータもdumpしてるのであとでリストアすれば問題ない。

```sql

//既存dev環境テーブルをTRUNCATEで削除
TRUNCATE TABLE {table};

// 本番データをdev環境にリストア
gunzip < {table}.{env}.{YYYYMMDD}-bk.sql.gz | mysql -u {user} -p{password} -h {host} -D {database}
```

見事に成功しました！！！
ここでDELETEを使うと、処理が遅いのはもちろん、
AUTO_INCREMENTが初期化されないため、同様のエラーとなってしまいます。

どうやら、上記のSQL文ではテーブルを`DROP TABLE`せず,
`INSERT`のみを行う処理だったようで、一旦DROPする必要があり、
dev環境を元にリストアするデータもあったのでTRUNCATEが最適でした。
(DROPも組み込んでSQL書けるみたいですが、その時は気づかず...)

このように入れ直して、戻すといった作業の時には最適だと思いました。
処理は本当に速かったです。

それぞれの処理をしっかり理解すれば適材適所で使用することができ、
効率的に作業が進められるので、なんとなくの理解は禁物ですね。

とはいえ、データを戻せないのでTRUNCATEを使用する際は十分に注意しましょう。

どなたかの参考になれば幸いです。
VSCodeとVisual StudioでC#の書き味はどれぐらい差がでるのか

# はじめに

Visual Studio のライセンス費用高いですよね。
VSCode でも .NETの開発できるってのは知っていても、実際に使ってみると書き心地とかどれくらい違うのでしょうか？
この記事では VSCode の拡張機能を入れてどんなことができるのか書いてみたいと思います。
※検証する拡張機能はどれもメジャーなものなので既に実務で使われている方の参考にはなりません。
 ただ「へい！C#フレンズ！こんな便利な拡張機能もあるよ！」ってのあったらコメントで教えていただけると嬉しいです:blush:

## 対象読者

- Visual Studio から VSCodeに乗り換えようと検討している方
- これから VSCode でC#を書こうとしている方

# VSCodeでC#開発するときに入れる拡張機能

拡張機能で`C#`で検索して出てくるこちらの`C#`をいれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/efd74c80-03ce-9466-0dc0-81930fea19da.png)

## [C#](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)

これは.csファイルを読み込んだら VSCode にオススメされる拡張機能ですね。
機能の概要は拡張機能C#のサイトにこう書いてあります。

- .NET Core の軽量の開発ツール
- 編集サポート機能（シンタックスハイライト、インテリセンス、定義の参照、使用箇所の参照など）
- デバッグサポート
- Windows、Mac、Linuxでproject.jsonやcsprojを使ったプロジェクトをサポート

実際のコーディングの動画を見てください↓

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/5bdbdb8c-cc3c-9b48-1978-081794466f87.gif)

これをいれると Visual Studio と変わらない書き着心地になった感じがしますね。

### スニペットを積極的に使おう

スニペットとはコードの自動補完機能のことです。
スニペットが上手に効いてくれるので、C#特有の構文を覚える必要はありません。
例えば、動画を例に出すと、`name`や`class`、`prop`と入力するだけで拡張機能C#が用意してくれたスニペットが効くので、後は Tabキー → 入力 → Tabキー →　入力 → ...と繰り返すだけでコードが書けます。

### 参照してる数

Visual Studio 使ったことがなくて不思議に思った方もいるかもしれませんが、書いたコードの上に`0 references`という文字が表示されます。これは実際に参照箇所を表示してくれているので、未使用コードの削除の参考にもなりますね。

### 定義の参照/参照箇所の確認

F12で定義している箇所にジャンプできます。
Shift+Option+F12で参照箇所の確認ができます。

### リファクタリング（名前変更）

定義の参照ができるということは、使用先の名称も自動で変更してくれます。
修正したいクラス名や変数名を選択して`Rename Symbol`を使うと全ての参照先コードをリネームしてくれます。

![ezgif.com-video-to-gif (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/36452729-49b3-3d55-3873-e875f7d46fa3.gif)

### usingの自動補完

例えば、使いたいクラスは分かっているけど、その名前空間が分からないときってありますよね？
jsでいうと使いたいクラスは分かってもimport(≒using)する対象が分からないようなのに似ています。
C#ではusingが書いていない場合、赤波線で警告がでます。そこで、左に表示される黄色のベルマークをクリックすると、C#が「あなたの探しているのは、この名前空間じゃないですか？」って聞いてくれえるので、あとは選択するだけでOKです。

![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/1b34c23d-0df5-ce7b-5523-e31cfa93d537.gif)

以上、ざっと書きましたが...
思ったより拡張機能C#が優れものだったので驚いています。

## [C# XML Documentation Comments](https://marketplace.visualstudio.com/items?itemName=k--kato.docomment)

コメント大事ですよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/a8391afb-13c2-3532-6883-615ac63c0e2f.png)

`///`と書くとコメントを自動で補完してくれます。

![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/7cb66a48-d61a-6d78-0926-9d2da3f98b8f.gif)

# まとめ

VSCode には私が好きなメソッド切り出しのリファクタリング機能が見当たらなかったので、やはり 有償の Visual Studio と比べると見劣りしますが、最低限の機能は揃っているのかなというところ。悪くない。
Zephyr > microSD (SPIモード接続) + FAT > STM32L476 > CMD0のパラメータが異なる (0x94と0x95)

```txt:動作環境
Ubuntu 18.04 LTS
ボード: STM32L476 Nucleo_64 (以下、STM32L476)
ボード: STM32F769 Discovery Kit (以下、STM32F769)
Zephyr 2.1.0-rc1
microSDモジュール: CK-40 (サンハヤト)
ロジック確認: Analog Discovery 2 (AD2)
```

### 前回

- [Zephyr > microSD(SPIモード接続) + FAT > STM32L476で成功、STM32F769で失敗 > ロジックのモニタ](https://qiita.com/7of9/items/bdc3cb24867fc0d0b78c)

### 状況

- STM32L476でmicroSDの処理が成功
- STM32F769でmicroSDの処理が失敗

### 今回

- STM32L476にてロジックを確認中

![Screenshot from 2019-12-25 23-29-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/4d1af236-7ca7-bbf4-9473-a2e973f27bf3.png)

0x40, 0x00, 0x00, 0x00, 0x00, 0x94
を送信している。
CMD0の送信に相当するようだ。

そして、0x01を受信している。

### 実装処理

コマンド送信はdisk_access_spi_sdhc.cの以下の部分で行っているようである。

```.c
static int sdhc_spi_tx_cmd(struct sdhc_spi_data *data, u8_t cmd, u32_t payload)
{
	u8_t buf[SDHC_CMD_SIZE];

	LOG_DBG("cmd%d payload=%u", cmd, payload);
	sdhc_spi_trace(data, 0, 0, NULL, 0);

	/* Encode the command */
	buf[0] = SDHC_TX | (cmd & ~SDHC_START);
	sys_put_be32(payload, &buf[1]);
	buf[SDHC_CMD_BODY_SIZE] = crc7_be(0, buf, SDHC_CMD_BODY_SIZE);

	return sdhc_spi_tx(data, buf, sizeof(buf));
}
```


### 情報

- [SDカードを使ってみよう](https://bluefish.orz.hm/sdoc/psoc_mmc.html)
    - by K.I様

情報感謝です。

上記の例ではCMD0は`const char CMD0[] = {6,0x40,0x00,0x00,0x00,0x00,0x95};`のように定義されている。

Zephyrで送信するCMD0と最後の部分が異なる (0x94と0x95)。

違いはあるが、STM32L476の方の処理は成功している。
C++のtemplateの使い方

#templateとは
C#ではジェネリクスと呼ばれる。非常に柔軟な記法。Templateは非常に有用。以下はサンプルプログラム。
テンプレートの使用法例１

```temple1.cpp
#include<iostream>
#include<string>
#define self	(*this)

template<typename T>
class Hoge
{
public:
	void show(void) 
	{
		std::cout << m_t << std::endl;
	}
	Hoge(T t)
	{
		self.m_t = t;
	}
	~Hoge()
	{

	}
private:
	T m_t;
};

int main(void)
{
	auto hoge0 = new Hoge<int>(1);
	auto hoge1 = new Hoge<std::string>("ロゼガルド放送委員会");
	hoge0->show();
	hoge1->show();
	delete hoge0;
	delete hoge1;
}
```

テンプレートの使用法例２

```temple2.cpp
#include<iostream>
#include<string>

template<typename T>
void show(T a_t) 
{
	std::cout << a_t << std::endl;
}

int main(void)
{
	show(1);
	show("ロゼガルド放送委員会");
}
```
CSSを利用して、蒼穹のファフナーEXODUSにでてくるデジタル時計風のデスクトップアプリを作ってみた

この記事は[たまたま集まった技術＆もの作りが好きな人たち Advent Calendar 2019](https://qiita.com/advent-calendar/2019/by_chance) 25日目の記事です。

# はじめに
初めまして!25日目を担当させていただきます@a2ureと言います
クリスマスですね！**あと３０分切ってますがw**
(ギリギリの投稿です)

今回はテレビアニメ「蒼穹のファフナーEXODUS」に登場するデジタル時計のデスクトップアプリを作ってみました!

作成にHTML,CSSやEletron等を利用しているのですが、私はHTML,CSSといったフロント周りの経験がない、ほぼ初心者なので至らない点が沢山あると思います。
完全にノリと勢いで作ったものなので、「こんなのを作りたかったのね」というゆるい感覚で見ていただければと思っております…!

### 注意
この作品が好きな人間が「**個人の範囲内で楽しむため**」に作成したものになります。
**公式とは一切関係ございません。**

# 作成するデジタル時計について
そもそも「蒼穹のファフナー」という作品を知らない方もいると思うので、軽く説明を。
「[蒼穹のファフナー](http://fafner-beyond.jp/)」は2004年から放送されているロボットアニメシリーズです。
「ファフナー」というロボットに乗り、宇宙からきた生命体「フェストゥム」と戦い・対話し平和を掴もうと生きる人々の物語です。

今回作るのはこの作品のTVシリーズ第2弾にあたる「蒼穹のファフナーEXODUS」に登場するデジタル時計です。
ファフナーのコックピット内で登場し、日時等を教えてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539514/f50cc204-19bc-e7c2-18e0-8ece40ba1595.png)
画像: 蒼穹のファフナーEXODUS第16話より


デザインが好きだったので「こんなデスクトップアプリとかあったらなー」と思ったのがきっかけ。
「**ないなら作ればいい**」精神でCSS,electronを利用してこれのデスクトップアプリを作っていきます。

# 完成品
先に、(GIFになりますが)完成品はこちらになります。
ちなみに今年の6月に作成開始して7月に完成。
約1か月ほどかかりました。
![fd5559534d2053363a1d8e4de96ade24.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539514/db97bec1-f86d-3e4c-d649-3d165e87c75a.gif)


# 作成の流れ
今回は下記3つの工程で作成しました。
- HTML,CSSで再現する
- 時計用のフォントを作成する
- Electronでデスクトップアプリ化

## HTML,CSSで再現する
本編の画像を見ながら、HTML,CSSで模写していきます。
日時を表示する部分はjavascriptを利用しました。

ブラウザ向けにgithubにあげたものがこちらになります。
- [完成品](https://a2ure.github.io/fafner_clock/clock.html)
- [ソースコードはこちら](https://github.com/a2ure/a2ure.github.io/tree/master/fafner_clock)
※ chromeでは表示が少し崩れてしまっているようで、今後修正予定です。(safariでは崩れず表示ができることを確認できました)

再現のために主利用したのは下記になります。
- clip-path
- z-index
- flexbox
- Grid Layout

基本的には
1. clip-pathでパーツを作る
2. z-indexでパーツを重ねる
3. 2で作ったものをflexboxで並べる
4. flexでの配置が難しそうな部分はGrid Layoutを利用
といった事を繰り返しました。

なんと、画像は一切使っておりません!
**なんでCSSだけで頑張ろうと思ったのか私にもわかりません！！**

本当は色々コードについて解説したいのですが、完全にノリと勢いで作っていたので記憶がないです。。

## フォントを作成する
日付を表示しているデジタル文字のフォントを作成していきます。

作成にはCalligraphrを利用しました。
- [Calligraphr](https://www.calligraphr.com/en/?rtom=paintfont&utm_source=paintfont&utm_medium=301) 

本編からデジタル時計の登場するシーンを「0~9」の数字分さがして、ペイントツールで描きました。
作業の様子↓
![Image from iOS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539514/a3cde6b7-ac69-0c0d-98ef-81169ff2e24a.jpeg)


## Electronでデスクトップアプリ化
最後にElectronを利用してデスクトップアプリ化していきます。
- [Electron](https://electronjs.org/)
いつもはmacでプログラミングや作業をしていますが、今回はWindowsで動かしてみたかったのでWindowsにElectronの環境を構築してみました。
- [2019 年版：Electron の環境構築（Windows 向け）](https://toragramming.com/programming/electron/electron-env/)

これで完成です。

# まとめ
完全に勢いで始めたのですが、CSSを触たり、フォントを1から作ってみたり、とても楽しかったです！
でも全部CSSは少し疲れました…🤤

また機会があった際はなにか作ってみようかなと思います！
Python基礎② for文

#Python基礎 for文


```
for 変数名 in イテラブルオブジェクト:
    処理
```

Pythonのfor文は他言語のforeach文と同様に、リスト（配列）などのオブジェクトの要素が順番に変数に代入されて処理が行われる。

```
fruits = ['Apple', 'Berry', 'Orange']

for Kudamono in fruits:
    print(Kudamono)
# Apple
# Berry
# Orange
```

[エンジニア転職参考サイト](https://engineer-work.com)
TJBotzeroをscratchと組み合わせて動かしてみたよ（今の所失敗・・・）


この記事は[TJBot Advent Calendar 2019](https://qiita.com/advent-calendar/2019/tjbot)の21日目の記事です。


## 準備
今回はRaspberry Pi 3B + TJBotzeroハンズオンで使用しているキットでscratchを動かしてみようと思い、
[tjbot-raspbian](https://github.com/tjbotfan/tjbotzero-raspbian/releases)ではなく、素の[raspbian-buster](https://www.raspberrypi.org/downloads/raspbian/)で開始します。

(本当はpi zeroなTJBot zeroで動かしたかったのだけど、DesktopをVNCで使いつつ・・・だと処理能力が足りない）

## ScratchのインストールとGPIO対応
ScratchのイントールとGPIOツールのセットアップを行います。

```bash
sudo apt-get update
sudo apt-get install scratch
wget https://git.io/vQsDn -O isgh8dev.sh
sudo bash isgh8dev.sh
```

## Raspberry Pi設定
ここはTJBot raspibianと同じ設定を行います

```
set +e
sudo raspi-config nonint do_wifi_country JP
sudo raspi-config nonint do_camera 0
sudo raspi-config nonint do_ssh 0
sudo raspi-config nonint do_vnc 0
sudo raspi-config nonint do_resolution 2 16
sudo sh -c 'echo dtoverlay=pwm-2chan,pin=18,func=2,pin2=13,func2=4 >> /boot/config.txt'
amixer -D hw:1 sset Mic 100%
amixer -c 0 sset PCM 100% unmute
set -e
```

```
# 日本語設定
sudo raspi-config nonint do_change_locale ja_JP.UTF-8
# タイムゾーン設定
sudo raspi-config nonint do_change_timezone Asia/Tokyo
# 解像度変更 1280x1024
sudo raspi-config nonint do_resolution 1280 1024
```


##Lチカはできたけど、Scratch 1.4?!

apt-getでインストールできるバージョンが1.4な模様

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/e2b2b871-d57e-e471-dd48-5c6472275f53.png)


## Scratch3はRecommended Softwareからインストール可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/e40d186c-881c-da95-75bc-8f25c29f8dc6.png)

Raspberry Pi財団もblog記事で[公開](https://www.raspberrypi.org/blog/scratch-3-desktop-for-raspbian-on-raspberry-pi/)してました

Raspberry Pi 4が推奨・・・。たしかに。ほしすぎる。

## Scratch3では、GPIOアドオンを後からインストールしよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126158/0560b455-3b33-649c-0ea4-74d71c346b62.png)

音声合成と、翻訳はAWS、Googleを使うみたいだけど、
IBM Cloud版の拡張機能ないか、後日探してみようと思います。


## 動かしてみた
近日公開予定。
（重たいのでPi zeroはNG,Pi 3BでもNGでした

## TODO
- Pi 4を買う？
- WebServer版があるようだけど、GPIO動くかな

## まとめ
Scratchでも今のTJBotハンズオンの内容試せるといいなー
という妄想から始まりましたが、今の所Node-REDがやっぱりいいな、という結論です。
環境面などクリアできたらまたチャレンジしたいです。
EXCELのVBAで２次元配列の特定の列または行を１次元配列に変換する方法

# サンプル
以下のコードで２次元配列を簡単に１次元配列に変換できます。

```vb
Public Sub Sample()
    Dim 二次元配列 As Variant
    Dim 一次元配列 As Variant
    
    二次元配列 = Range("A1:B6")
    
    '３行目を一次元配列化する
    一次元配列 = WorksheetFunction.Index(二次元配列, 3)
    Debug.Print "３行目= " & Join(一次元配列, ",")
    
    '１列目を一次元配列化する
    '一次元配列 = WorksheetFunction.Index(二次元配列, , 1) 'Index関数のHELP的にはできそうですがエラーになります
    'Transpose()関数を使って行と列を入替えます
    一次元配列 = WorksheetFunction.Index(WorksheetFunction.Transpose(二次元配列), 1)
    Debug.Print "１列目= " & Join(一次元配列, ",")
End Sub
```

上記の関数をこのようなセルの状態で実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/5dcd9f38-7ae3-cdd8-8efd-215581514216.png)
結果は以下の様になります
``３行目= 鈴木,28``
``１列目= 名前,佐藤,鈴木,高橋,田中,山田``

 <font color="Red">WorksheetFunction.Index()関数</font>を使用することで２次元配列から１次元配列への変換を実現しています。

**2021/1/9 追記**
データが大量の場合
``一次元配列 = WorksheetFunction.Index(WorksheetFunction.Transpose(二次元配列), 1)``の部分は
``一次元配列 = WorksheetFunction.Transpose(WorksheetFunction.Index(二次元配列, 0, 1))``とした方が、高速です。
```WorksheetFunction.Index(二次元配列, 0, 1)```の結果は1列の2次元配列が返されますが、**WorksheetFunction.Transpose()関数**に1列の2次元配列を渡すと、1次元配列を返すようです。

## 以下の様にユーザ定義の２次元配列でも可能です

```vb
Public Sub Sample2()
    Dim 二次元配列(1 To 5, 1 To 5) As String
    Dim 一次元配列 As Variant
    
    Dim i, j
    For i = 1 To 5
        For j = 1 To 5
            二次元配列(i, j) = Chr(Asc("A") - 1 + j) & i
        Next
    Next
    
    '３行目を一次元配列化する
    一次元配列 = WorksheetFunction.Index(二次元配列, 3)
    Debug.Print "３行目= " & Join(一次元配列, ",")
    
    '１列目を一次元配列化する
    一次元配列 = WorksheetFunction.Index(WorksheetFunction.Transpose(二次元配列), 1)
    Debug.Print "１列目= " & Join(一次元配列, ",")
End Sub
```
結果は以下の様になります
``３行目= A3,B3,C3,D3,E3``
``１列目= A1,A2,A3,A4,A5``

この手法を使えばサンプルコードの様に、１次元配列を引数にとる関数を実行するようなコードが非常に簡潔に記述できるようになります。

# 応用例
ここからは筆者の想像ですが（筆者の環境ではスピルが使えないので）
新しく導入されたSpill関数の1つであるSortBy()関数で以下のような使い方ができるのではないかと想像しています。

```vb
Public Sub Sample3()
    Dim ソート前テーブル(1 To 5, 1 To 5)
    Dim ソート後テーブル As Variant
    Dim 一列目 As Variant
    Dim 二列目 As Variant
    
    Dim i, j
    For i = 1 To 5
        For j = 1 To 5
            テーブル(i, j) = いろいろ設定
        Next
    Next
    
    '１列目と２列目でソートする
    一列目 = WorksheetFunction.Index(WorksheetFunction.Transpose(ソート前テーブル), 1)
    二列目 = WorksheetFunction.Index(WorksheetFunction.Transpose(ソート前テーブル), 2)    
    ソート後テーブル = WorksheetFunction.SortBy(ソート前テーブル, 一列目, , 二列目)
End Sub
```
これが出来れば、内部テーブルのソートが非常に簡単になるのですが...
Spillが使える方だれか報告お願いします。
TJBot zero ハンズオンキットに含まれてるパーツを自分で作ってみよう　スイッチ編

TJBot zero ハンズオンキットに含まれてるパーツを自分で作ってみよう　スイッチ編

取り急ぎ枠だけコミット。年内には埋めます。
NotionはMarkdownでコピペできる

[アルプ株式会社](https://thealp.co.jp/)でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 21日目のエントリです。
20日目は[Notionでドキュメントを公開する](https://qiita.com/pictiny/items/bf4dbb11dc1d0f33e44b)でした。

# コピペ
Notionのブロックを選択してコピーしてテキストに貼り付けるとMarkdown形式になることがあります。

## Bookmark
[Notionで記事をスクラップする](https://qiita.com/pictiny/items/745cfcf562c6429a3efc)で紹介したブックマークのブロックがあります。

<img width="735" alt="ブックマーク2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/58dc0082-b801-9ce6-d372-1acaba212a54.png">

これをコピーすると、テキストの場合には以下のようなMarkdownでペーストされます。

```markdown
[プロジェクト管理やドキュメンテーションにNotionを使おう - Qiita](https://qiita.com/pictiny/items/1f442697bac06bde0205)

[Notionでよく使うショートカット - Qiita](https://qiita.com/pictiny/items/bb1b30739546ba762629)

[Notionでプロフィール画像を設定する - Qiita](https://qiita.com/pictiny/items/2b11d755a1613413edd8)
```

## Board View
Board Viewのデータベースではカードのプレビューが表示されます。

<img width="1180" alt="プロジェクト管理" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/5ed9d939-933c-7860-10d4-98bc544314d0.png">

これをコピーすると、テキストの場合には同じくMarkdownでペーストされます。

# まとめ
NotionはMarkdownと親和性が高くなるよう作られていることがわかります。
ちなみに、MarkdownのテキストをコピーしてNotionに貼り付けても同じようにブックマークやカードが作られるわけではありませんのでご注意ください。
遺伝子のID変換のためのwebツール

### 今更ながら、遺伝子のID変換が面倒だなと思っている人もいるのではないか

#### バッチ処理で様々なID変換してくれるwebツールで、カバーしているIDが最も多いと思われるサイトを見つけたので、メモがわりに残す。

以下のサイトはID変換以外にも様々なことができます。
[bioDBnet　(biological DataBase network)](https://biodbnet-abcc.ncifcrf.gov/)

遺伝子のID変換は、このうちの 
[db2db](https://biodbnet-abcc.ncifcrf.gov/db/db2db.php)
を使います。

HPのタイトルページの内容を以下に引用しておきます。他の機能も試してください。

> biological DataBase network is an application integrating a vast number of biological databases including Gene, UniProt, Ensembl, GO, Affy, RefSeq etc. The databases are created by downloading data from various public resources. They are formatted and maintained in a relational structure at the Advanced Biomedical Computing Center (ABCC).

> In the current release of bioDBnet there are 210 distinct nodes and 754 edges. Details on the integration process, the network and version changes are available under the 'Documents' tab

> Brief notes on what bioDBnet currently offers 

> **db2db** handles all the conversions from one database identifier to another.

> **dbWalk** lets you walk through your own bioDBnet path.

> **dbReport** reports every possible information that it can get for a particular identifier.

> **dbFind** finds the type of identifiers and converts all into a chosen database identifier type

> **dbOrtho** converts identifiers from one organism into homolog identifiers of a different organism

> **dbAnnot** provides different types of annotations for various biological identifiers

> **dbOrg** provides downloadable files of organism wide conversions

> **bioDBnet** also offers supporting analysis tools to the main functions

> **orgTaxon** for finding the taxon ID of an organism

> **goTree** to look at the parents of any go accession

> **chrView** for visualising data on chromosomes

> **bioTaxon** for finding genes, proteins or GO accessions based on search terms
macOSをCatalinaにアップグレードしたら、Emacsが使えなくなった時の対処法

macOS を Catalina にアップグレードしたら、Emacs の dired で ~/Documents の中身を開こうとした時に、

> Listing directory failed but `access-file' worked

なるエラーが出て、「書類」フォルダにアクセスできなくなっていました。

この度、この問題を解決する方法が分かったため、共有します。

# 環境

私の環境は次のとおりです。

- macOS Catalina (Ver. 10.15.2)
- GNU Emacs 26.3 (build 1, x86_64-apple-darwin18.2.0, NS appkit-1671.20 Version 10.14.3 (Build 18D109)) of 2019-09-02

# 問題解決の手順

1. 画面左上のリンゴマークから「システム環境設定」を開く。
2. 「セキュリティとプライバシー」を開く。
3. 「プライバシー」タブを開く。
4. ウィンドウの左半分の一覧から「フルディスクアクセス」を開く。
5. ウィンドウの左下にある錠前をクリックして、ログインパスワードを入力する。
6. これでウィンドウの右半分の一覧にアクセスできるようになるので、その一覧の下の「＋」ボタンをクリックする。
7. ファイル選択ダイアログが開くので、内蔵ドライブのルート（「Macintosh HD」など）を開く。
8. ここで、⌘＋⇧＋[.]（コマンド＋シフト＋ピリオド）を押して、隠しファイルも表示させる。
9. 「/usr/bin」フォルダを選ぶ。（「usr」フォルダ→「bin」フォルダを選ぶということです。）
10. 一番右の一覧から「ruby」を選ぶ。（ファイルがたくさんあるかもしれませんが、落ち着いて。アルファベット順に並んでいます。）
11. 「プライバシー」タブに戻った時に一覧に「ruby」が追加されていることを確認する。
12. ウィンドウの左下にある錠前をクリックして、再びセキュリティロックを有効にする。環境設定を終了する。

これで Emacs の dired から「書類」フォルダにアクセスできるようになっているはずです。

# なぜこの方法で問題が解決するのか

[Stack Exchange の記事](https://emacs.stackexchange.com/questions/53026/how-to-restore-file-system-access-in-macos-catalina#answer-53037)によると、

> Emacs.app actually launches using a ruby script. As a result, MacOS Catalina uses the permissions set for ruby, not the permissions for Emacs.app.

Emacs.app は Ruby のスクリプトを使って起動するため、OS は Ruby のパーミッションに基づいて Emacs のアクセス権を管理している、ということでしょうか?
ですので、Ruby への設定が効いてくる、と。

# 参考文献

- [How to Restore File System Access in macOS Catalina](https://emacs.stackexchange.com/questions/53026/how-to-restore-file-system-access-in-macos-catalina)