OmniAICreator/Qiita-1.07M huggingface dataset:
[Next.js]動的ルーティングページ間で外部データが更新されない問題

## 問題

動的ルーティング（dynamic routing）で生成されるページ内で、パス情報に依存したデータを外部取得している。
他のページから移動したときは正常にデータを取得できるのに、動的パスのページ間で移動すると前のデータが残ってしまう！

## TL;DR

_app.tsxファイルをこの状態から

```tsx:_app.tsx
function MyApp({ Component, pageProps}: AppProps) {
	return (
			...省略...
			<Component {...pageProps} />
	);
}
```
↓下記のように、**router.asPathを元にkey属性を指定**すればOK

```tsx:_app.tsx
function MyApp({ Component, pageProps, router }: AppProps) {
	return (
			...省略...
			<Component {...pageProps} key={router.asPath} />
	);
}
```

## 解説

こちらの[issue](https://github.com/vercel/next.js/issues/9992)で話し合われている内容です。
根本的な原因は、動的ルーティングで生成されるページコンポーネントにkey属性がデフォルトで付いてないため、ルーティングされてもその内容が上手く更新されない事のようです。
なので_app.tsxにあるグローバルなコンポーネントにkeyを付ければ解決するという、分かってみれば非常に分かりやすい解決策でした。

[解決してくれたコメント] (https://github.com/vercel/next.js/issues/9992#issuecomment-784133959) 先月末のコメント、ツイてるな～


### in my case

ちなみにissueはgetStaticPropsなどの外部データロード用の関数についてでしたが、自分の場合は別ファイルにあるサンプル日記データを、動的パスに含まれる日付をもとに検索して、その日の日記を取得し、useReducer()のinitialValueにセットして過去の日記を見るページを作っているときにこの問題にぶつかりました。
ある日の日記から別の日の日記に移動しようとすると、日記の内容が前のままになってしまう状態でした。

上記の方法でreducerのstateを直接反映する部分はスマートに解決できたのですが、
一点、stateのプロパティの内容を判定して日記の記入状態(empty or filled)を表示する部分は、useEffectのdependancyListに「stateに一意の値」（この場合は日記の日付）を指定する必要がありました。

```tsx:.tsx
    const [status, setStatus] = useState<Status>("empty");
	useEffect(() => {
		initStatus({
			inputText1: field1.inputText,
			inputText2: field2.inputText,
			setStatus,
		});
	}, [state.log.date]); //以前は[]にしていた

... //2種類の入力欄がある日記が全部空かどうか判定してstatusを更新する関数
const initStatus = ({ inputText1, inputText2, setStatus }) => {
	const allEmpty = [inputText1, inputText2].every((value) => !value);
	if (!allEmpty) {
		setStatus("filled");
	} else {
		setStatus("empty");
	}
};

```
Figma to React ＜無料のウェブデザインツールFigmaのデザインをReactコードに変換するウェブアプリ＞

# 何が嬉しいの？
Figmaという無料*1のウェブデザインツールのデータをReactのコードに変換してくれます。

*1 個人利用の場合

https://figma-to-react.vercel.app/

これはtwitterで見かけたFigmaからReactコードにコンバートしてくれるウェブアプリです。

https://twitter.com/tomsoderlund/status/1375826499438264324

Next.jsかReact Nativeのどちらかのコードを排出してくれます。

# 使い方

準備する２つのモノ

* コンバートしたいFigmaのURL
* FIGMA ACCESS TOKEN

## FIGMA ACCESS TOKENの取得の仕方

![figma setting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44761/0f58c41e-2e49-de87-8535-a74e37448042.png)

上図のAcount settingから

![figma access token加工済み.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44761/31ac13b8-6065-0431-21cd-17a4cea5c207.png)

Personal access tokensでACCESS TOKENを取得します。

取得の仕方は
＋Create a new personal access token
を押下するとEnter a description for your token
と出るので、ここにURLを貼り付けると発行されます。

## EXPORT FORMAT
REACT NATIVEとNEXT.JS (REACT WEB + STYLED-JSX)のどちらかを選んでGenerate React codeボタンを押下するとコードが生成されます。
市場に価値を提供できるエンジニアになる

初めまして、中島聡さんの様な伝説のエンジニアになりたく、これからエンジニアを目指すことに決めました。

これからの目標はこんな感じです。

1〜3年目
エンジニアとして経験を積みながら、システム開発に必要な知識を習得し、顧客の要望に応えられる能力を身に付け、機械学習を学び、レコメンド機能などを使ったサービスを考える。

4〜5年目
プロジェクトリーダーになり、チーム全体の進捗管理など、前職で培ったマネジメント能力を活かす。

6年目以降
予算の収支を意識しながら、プロジェクトを成功に導けるプロジェクトマネジャーとして活躍。


最終目標は市場に価値を提供できるエンジニア、自分の作ったサービスを多くの人に使ってもらうです！！
皆様、よろしくお願い致します。
【初心者向け】もうz-indexの数字で迷うのはヤメにしたい！

#どうも7noteです。z-indexのめちゃくちゃな指定はもうヤメにします！

要素の前後の優先順位を決めることができる、`z-index`ですが便利です。
便利だけど、適当に指定していると思わぬ順番になってしまい、ぐちゃぐちゃに。。。
重ね順の指定ってムズカシイ。


ということで、**マイルールを決めます！**

## その前に、z-indexについておさらい

>CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
引用元：https://developer.mozilla.org/ja/docs/Web/CSS/z-index


### 1. 「z-indexを何も指定しないと、後ろに書かれた要素が上にくる。」

### 2. 「使えるのは整数のみ。（0やマイナスは可）」

ちなみに最大値「2147483647」、最小値「-2147483647」が限界。

### 3. 「z-indexを有効にするためにはposition指定が必要」

- `position: relative;`
- `position: absolute;`
- `position: fixed;`
- `position: sticky;`

これらが指定されている要素にz-indexを指定することでz-indexが有効化されます。

**※つまり`position: static;`（初期値）には効かない。**

## 本題：z-indexのマイルールを決める
（※以下は私のマイルールです。変更の可能性大。）


|使用場所|数値～|補足|
|:--|:--|:--|
|背景的に使いたい大きな要素|-100||
|背面に隠す要素|-1 ～ -99|疑似要素とか|
|**基準値**|**0**|初期値|
|普段使うもの|1 ～ 98|**バルーン**とか。|
|リンクエリア拡大|99|「biggerlink」や「linkarea」などaタグのクリック範囲を広げるもの|
|スライドショー関連|100|矢印とか・・・のナビとか|
|-|-|-|
|モーダル①|999|※画面固定する要素を含まない|
|**画面固定する要素**|**1000**|画面固定するヘッダーやフッターなど|
|-|-|-|
|固定ヘッダーの上にくるnavメニュー|1010|※ナビゲーションメニューが覆いかぶさるようなやつ|
|-|-|-|
|モーダル②|9999|すべてを覆いつくすモーダル|

## 解説

- 要素の後ろに隠したいもの⇒**マイナス値**
- スクロールができる要素に対して⇒**1～998**
- スクロールができる要素を覆う⇒**999**
- 固定する要素に対して⇒**1000～**

イメージとしてはこんな感じで設定しています。

-背景-
-基準-
-コンテンツ-
-固定コンテンツ-

大きくこの4層に分けることで大体のレイアウトに対応できるようなイメージです。
もちろんサイトのデザインによって変更が必要な場所も出てくると思うので、その際は予備で空いている間等に設定しなおすことでなんとかなるはず・・・


### ▼運用イメージ

たとえばスライドショーの矢印なんかはスクロールができる要素であることが多いので、10とかを設定しておきます。
写真タップで、拡大写真を表示したいようなモーダルの動きは、固定ヘッダーも覆うような全画面のデザインなら9999。モーダルよりも固定ヘッダーを上にしておいておきたい場合は999を指定。もし変更したくなっても1桁変えるだけなので簡単！


## まとめ

まだ実運用経験が少ないルールですので、他にz-indexを使う場面を追加していく予定ではありますが、「私はこうしています！」みたいなルールがあればぜひ共有してください！

参考：
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
https://saruwakakun.com/html-css/basic/z-index
https://tech.basicinc.jp/articles/170


#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Heroku push CSS 反映されない

##問題
CSSを変更し、herokumにpushしたが、反映されていない

##前提条件
このようにコマンドを実行したがうまく行かない

```

$git add .

$git commit -m "コミット名"

//githabにpushする↓
$git push origin master

$git push heroku master

$heroku open

```

##結果
ブラウザの更新ボタンを右クリックし、
キャッシュの削除とハード再読み込み　ボタンを押したら解決。




キャッシュが残っていたみたい。。
RDKit入門⑤：データフレーム内の分子群に対する部分構造検索

この記事は以下の記事の続きとなります。
[RDKit入門④：複数分子の読み込み (後編)とデータフレームの加工][1]
[1]:https://qiita.com/Ru-PNP/items/62a108d92c1ddd522e58
今回はデータフレーム内の分子群に対して部分構造検索を実施します。
いくつか方法があるので順に紹介していきます。
###環境
- windows 10
- python 3.8.5
- RDKit 2020.09.4

---
先にパッケージの読み込みを行います。

```python
from rdkit import Chem
from rdkit.Chem import Draw
import pandas as pd
#パッケージの読み込み
```

前回の記事の最後でデータフレームをpickleファイルとして保存しておきました。
まずはそれを読み込んで作業を再開しましょう。

```python
df_Pt = pd.read_pickle("platinum_dataset_2017.pkl")
#platinum_dataset_2017.pklを読み込み、得られたデータフレームをdf_Ptと定義した。
```

---

###HasSubstructMatchを使う方法について
まずは[1分子に対して部分構造検索をかけたときと同じように][2]HasSubstructMatchを使います。
lambda式と組み合わせて使用します。
以下で臭化アリール・ヨウ化アリールを拾う方法を紹介します。

[2]:https://qiita.com/Ru-PNP/items/58d733ef327677d273fd

```python
query_1 = Chem.MolFromSmarts("c[Br,I]")
#検索したい構造をSMARTS記法で表し、query_1というmolオブジェクトとして定義した。
df_1 = df_Pt[df_Pt['ROMol'].map(lambda x: x.HasSubstructMatch(query_1)) == True]
#query_1の部分構造を有する化合物のデータフレームを作成し、df_1とした。
```

なお、== Trueの部分は省略しても同じdf_1が得られます。
また、末尾を== Falseに書き換えることで、指定した部分構造を持たない化合物群を得ることも。
念の為、df_1に格納された分子のうち最初の20個を表示してみましょう。

```python
Draw.MolsToGridImage(df_1['ROMol'], molsPerRow = 5, maxMols = 20)
#df_1のROMolの列に格納された分子のうち最初の20個を表示した。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144410/4b8f018a-149c-f85d-eca2-f9d3090a7ce0.png)

---

###ge比較演算子を使う方法について
「>=(ge比較演算子)」を用いると、HasSubstructMatch関数を使うより短く書くことができます。
試しにスピロ化合物をピックアップしてみます。

```python
query_2 = Chem.MolFromSmarts("[*x4R2]")
#スピロ原子をSMARTS記法で表し、query_2と定義した。
df_2 = df_Pt[df_Pt['ROMol'] >= query_2]
#query_2の部分構造を有する化合物をピックアップしたデータフレームをつくり、df_2と定義した。
```

この方法を用いるとHasSubstructMatch関数を利用するより短いコードで検索が可能です。
「>=(ge比較演算子)」の他には

- 「==(eq比較演算子)」
- 「!=(ne比較演算子)」
- 「<=(le比較演算子)」

が使用可能ですが、「>=(ge比較演算子)」以外は使用する機会がないと思われます。
念の為、df_2に格納された分子のうち最初の20個を描画してみましょう。

```python
Draw.MolsToGridImage(df_2['ROMol'], molsPerRow = 5, maxMols = 20)
#df_2のROMolの列に格納された分子のうち最初の20個を描画した。
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144410/5728f0a9-8abf-da4a-f947-c64392387dd2.png)


---
###GetSubstructMatchesを使う方法について
[以前紹介したGetSubstructMatches関数とlen関数を組み合わせる][2]ことで、
指定した部分構造を指定した数だけ有する化合物群を拾ってくることも可能です。

```python
query_3 = Chem.MolFromSmarts("n1ccccc1")
#ピリジン骨格をSMARTS記法で表し、query_3と定義した。
df_3 = df_Pt[df_Pt['ROMol'].map(lambda x: len(x.GetSubstructMatches(query_3)) == 3)]
#query_3の部分構造を3つ有する化合物をピックアップしたデータフレームをつくり、df_3と定義した。
```

この場合は「==(eq比較演算子)」以外にも色々な比較演算子を使用することができます。
念の為、df_3に格納された分子を全て描画してみましょう。

```python
Draw.MolsToGridImage(df_3['ROMol'], molsPerRow = 5)
#df_3のROMolの列に格納された分子を全て描画した。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144410/d0372aae-b3d7-580e-5d4c-719b674ff012.png)


---

##おわりに
今回はRDKitを用いて以下の内容を実施いたしました。

- HasSubstructMatch関数を用いた部分構造検索
- ge比較演算子を用いた部分構造検索
- GetSubstructMatches関数とlen関数の組み合わせによる部分構造検索

###参考
今回の記事を書くにあたっては[化学の新しいカタチ](https://future-chem.com/)さんの以下の記事を参考にいたしました。
- [RDKitのPandasToolsでデータ分析を加速する](https://future-chem.com/rdkit-pandastools/)
テーブルに新しいカラムを追加する方法

#目次
<b>①結論</b>
<b>②カラムを追加するコマンド</b>
<b>③マイグレーションの実行方法</b>

##結論
カラムを追加するコマンドを実行し、マイグレーションファイルを実行する。

##②カラムを追加するコマンド

```
rails g migration Addカラム名Toテーブル名 カラム名:データ型
または
rails g migration add_カラム名_toテーブル名 カラム名:データ型

```
例えば、
postテーブルにuser_idのカラムをinteger型で追加したいときには以下ののように記述する。

```
rails g migration add_user_id_to_posts user_id:integer
```

##③マイグレーションの実行方法

```
rails db:migrate
```
上記を実行する
wemosでarduiscope

# 概要

arduinoでvcdファイルを生成する、arduiscopeをwemosでやってみた。

# 使用したライブラリー

https://github.com/safchain/arduiscope

# 写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9e89340b-694e-6ad5-cc4f-ef3ffb581764.jpeg)


# 手順

１．wemosにarduiscope.inoを焼く。
２．python3にpyserialをインストールする。
３．arduiscopy.pyを起動し、scope.vcdを作る。
４．gtkwaveで、scope.vcdを開く。

以上。
Railsがmimemagic無くてbundle installできない

## 概要
2021年3月下旬、Ruby on Railsの依存していたmimemagicの0.3.5以下がyank（削除）されました。そのため以前は`bundle install`ができていたのに急にできなくなった、といった事が起こります。

```
Fetching gem metadata from https://rubygems.org/........
Your bundle is locked to mimemagic (0.3.5), but that version could not be found
in any of the sources listed in your Gemfile. If you haven't changed sources,
that means the author of mimemagic (0.3.5) has removed it. You'll need to update
your bundle to a version other than mimemagic (0.3.5) that hasn't been removed
in order to install.
```

### 対応
本件については数日のあいだで状況が変わっているため、最新の情報をキャッチアップしてください。2021年3月28日時点では、Ruby on Railsの最新版である6.1.3.1にバージョンを上げることで解決できます。

https://weblog.rubyonrails.org/2021/3/26/marcel-upgrade-releases/

```diff:Gemfile
-gem 'rails', '~> 6.1.1'
+gem 'rails', '~> 6.1.3.1'
```

```bash
$ bundle update rails
```

## 参考
なぜこうなったか、その他の対処方法等は各所で議論されていますが、以下がきれいにまとまっています。
[mimemagicの最新動向 \- HackMD](https://hackmd.io/@mametter/mimemagic-info-ja)
[Laravel]キーワードが含まれて”いない”レコードをDBから取得する方法

# キーワードが含まれていないレコードをDBから取得する方法
```php

//Eloquent Model を使用する形
$users = User::where('column名', 'not like', '%'.$keyword.'%')->get();

//Eloquent Model を使用しない形
$users = DB::table('users')->where('column名', 'not like', '%'.$keyword.'%')->get();

```

# 一言
[Laravel公式ドキュメント](https://laravel.com/docs/8.x/eloquent)にも[日本語翻訳版ドキュメント](https://readouble.com/laravel/8.x/ja/eloquent.html)にもないため記事化しました。
sql知ってる人からすると当然こうなるのでドキュメントにはないのでしょうね。
競技プログラミングでよく使われるPython関数その他もろもろ（ABC問題）

チートシートみたいなものなので一度理解した人用です。



# 環境

- Python 3.8.0



# input () 系列

#### 標準input()

```python
n = input()
print(n)
# in:4 
# out:4
```

#### 特定の文字区切りをinput()

```python
a,b = map(int,input().split())    #input().split()でa,bに代入 それぞれをint型に変換
A =list(map(int,input().split()))
print(a)
print(A)
# in:4 9 
# out:4
# out:[4,9]
```

#### 二次配列をinput()

```python
Secondary = [list(map(int,input().split())) for i in range(3)]   #３は配列の長さ
print(Secondary)
# in: 
1 2
5 6
9 10
# out:
[[1, 2], [5, 6], [9, 10]]

```



# 文字列操作

#### 文字列を一文字に分けList化

```python
s="uncia002"
s_list = list(s[i:i+1] for i in range(len(s)))
print(s_list)
print("".join(s_list))　#Listから文字列にする

#['u', 'n', 'c', 'i', 'a', '0', '0', '2']
#uncia002
```

#### 文字列を任意の数に分けList化

```python
s="uncia002"
i=3
s_list = s[:i],s[i:]
print(list(s_list))
#['unc', 'ia002']
```

#### 文字列の比較

```python
defs="LOVINYOU"
def judge_str(index):return "V" in index
print(judge_str(s))
#True
```

# リスト系　append(),extend(),insert()

#### 追加系

```python
A = [1,2,3,5,7]
A.append(11)    #末尾に追加
print(A)
A.extend(['松','竹','梅'])   #リストの結合
print(A)
A.insert(0,0)  #任意の場所に追加（場所,値）
print(A)

#[1, 2, 3, 5, 7, 11]
#[1, 2, 3, 5, 7, 11, '松', '竹', '梅']
#[0, 1, 2, 3, 5, 7, 11, '松', '竹', '梅']
```

#### 削除系

```python
A = ['Python','JavaScript','Python','C']
a3 = A.pop(3)  #指定した位置の要素を削除し、値を取得
print(A)
print(a3)

A.remove('Python')  #指定した値の最初値を削除
print(A)

A=list(range(10))
A_fillted=[i for i in A if i % 2 == 0] #リストから条件式に基づいて削除する
print(A_fillted)

#['Python', 'JavaScript', 'Python']
#C
#['JavaScript', 'Python']
#[0, 2, 4, 6, 8]
```

# mathライブラリ

#### 平方根

```python
import math
print(math.sqrt(5))

#2.23606797749979
```

#### 小数点切り捨て、切り上げ

```python
import math
print(math.floor(10.123)) #切り捨て
print(math.ceil(10.123))　#切り上げ
# 10
# 11
```

int()は四捨五入



# その他

#### min()max()

```python
a,b=5,6
print(min(a,b))
print(max(a,b))

#5
#6
```

#### 絶対値

```python
print(abs(-1.22))
#1.22
```

#### 約数を出力

```python
def make_divisors(n):
    divisors = []
    for i in range(1, int(n**0.5)+1):
        if n % i == 0:
            divisors.append(i)
            if i != n // i:
                divisors.append(n//i)

    divisors.sort()
    return divisors

print(make_divisors(100))

#[1, 2, 4, 5, 10, 20, 25, 50, 100]
```

#### 素数判定(近似)　

```
import math
def is_prime(n):
    if n == 1: return False

    for k in range(2, int(math.sqrt(n)) + 1):
        if n % k == 0:
            return False

    return True

print(is_prime(13))  
```



# 引用

- 約数を高速で列挙するコード(Python) https://qiita.com/LorseKudos/items/9eb560494862c8b4eb56
  2021/03/28閲覧
- 【Python】素数を判別するプログラムを実装するhttps://www.suzu6.net/posts/70-prime-numbers/
  2021/03/28閲覧
セッションについて

#目次
<b>①セッションとは</b>
<b>②ステートフルとステートレス</b>
<b>③セッションメソッドの使い方</b>

##①セッションとは
ステートフルな通信を実現するための仕組みのこと
##②ステートフルとステートレス
普段閲覧しているWebサイトはクライアントとサーバー間でHTTPという形で通信をしていてデーターのやりとりをしている。HTTPのリクエストとレスポンスの仕組みは簡潔になっていて、クライアントとサーバーの1回のやりとりで処理が完結しますので、サーバーは状態を管理することができていない。この状態がステートレスという。逆に状態を維持する仕組みをステートフルという。ステートレスの状態だと、例えば、ログインをした後に、ページを閉じてしまったら毎回ログインをする必要があるので非常に不便になる。データを一定時間保持したければセッション機能を使う。


##③セッションメソッドの使い方
結論としては、sessionにデータを入れるだけ。あとは更新や削除もできる。

◯データの入れ方

```
 session[user_id]= @user.id
```
◯データの削除の仕方
以下の3パターンがある。

```
 session[user_id]= nil

 session[user_id].clear

 session.delete(:user_id)
```
30代未経験でPHPエンジニア(phper)になるなら

## 著者の簡単な紹介
- SESから自社サービスに転職したバックエンドエンジニア
- Laravel好きからのRails好きへ
- 30代で経理からの転職した

## 本やネットで基本的なものを学ぶ

- 変数
- 配列
- if
- foreach...

おすすめサイト
詳しくわかりやすくさらに、サイト全体がかわいいのでとてもよいです。

GRAYCODE
[PHPプログラミング \| GRAYCODE](https://gray-code.com/php/)

## laravelを学ぶ
こちらの本で僕は勉強しました。
こちらを教科書により知りたいことをネットで調べました。

[PHPフレームワーク Laravel入門 \| 掌田津耶乃 \|本 \| 通販 \| Amazon](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-Laravel%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798052582)

## JavaScriptを学ぶ
本やネットで基本的なものを学ぶ

[JavaScript \| GRAYCODE](https://gray-code.com/javascript/)

## html/cssを学ぶ
本やネットで基本的なものを学ぶ

[HTML CSS \| GRAYCODE](https://gray-code.com/html_css/)

## sqlを学ぶ
本やネットで基本的なものを学ぶ
以下略

[PDOについて \| GRAYCODE PHPプログラミング](https://gray-code.com/php/about-pdo/)

## 理想の勉強順序
できれば、基礎的な勉強と、laravelの勉強を行ったりきたりするとよい。

## わからない単語があったら
こちらのサイトで探してみましょう。
すごくわかりやすいです。
絵がかわいい。

別件ですが、こちらのサイトのコラムも非常に参考になります。

[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/index.html)

## 転職
できれば、自社サービスか、一次受けの受託が個人的にはよいと思います。
難しければSESでも。可燃性があるので、これ以上は、書きません。

## メンタルの保ち方
- できなくてあたりまえ
- 自分を許す
- SESでつらい現場なら早めに退場する
- 精神的にやられるとあとあと長引くので早めに休む

## 質問
質問は、自分で調べて仮説を持ってヒントをもらえるようにきく。

## まとめというか感想
30歳超えてエンジニアになってもうすぐ5年になります。
だれかの役に立てばと思い、筆をとりました。

僕もまだまだ勉強中です。
勉強好きな方であれば、エンジニアは楽しいと思いますよ。
Qiita Markdown CheatSheet

本書は筆者がよく使うQiitaのMarkdownのチートシートとして`%yyyy/MM/dd% %hh:mm:ss%`にまとめたものである。

C 2021 2f0833e717

https://qiita.com/2f0833e717/items/7b1277fb50935ee2d04d

* <font color="Red">[!注意] </font>この物語はフィクションです。登場する人物・団体・名称等は架空であり、実在のものとは関係ありません。

---

↓もってけセーラー服
https://qiita.com/2f0833e717/7b1277fb50935ee2d04d.md

---

markdown中のコメント

```
<!-- This is comment. -->
```

---

## menu
[to header1](#header1)

---

# a
## aa
### aaa
#### aaaa

---

*italic*
_italic_

**bold**
__bold__

~~取り消し線~~

`囲うやつ`

<font color="Red">Red</font>

---

$\mathbb{Blackboard Bold}$

---

テキスト[^1]

[^1]: 注釈内容

テキスト[^2]

[^2]: 注釈内容

---

↓URL直貼り
https://www.google.co.jp/

↓URL直貼り（上下に空行）　➡カードになる

https://www.google.co.jp/

↓URL変えたやつ
[Google](https://www.google.co.jp/)

↓画像　※リンクではない
![Google](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png)

↓画像サイズ指定版 width="200"　※リンクではない
<img width="200" alt="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png">

---

> a
>> aa
>>> aaa

---

- a
- a
    - aa
    - aa
        - aaa
        - aaa
            - aaaa
            - aaaa

---

1. a
1. a
    1. a
    1. a
        1. a
        1. a
            1. a
            1. a
                1. a
                1. a
                    1. ...
                    1. ...

---

- [ ] タスク1
- [x] タスク2

---

|a|b|c|
|-|-|-|
|e|f|g|

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |

---

```bash
cd /var/tmp
```

---

折りたたみの 折りたたみの 折りたたみの...
<details open>
	<summary>折りたたみ1</summary>
	<details>
		<summary>折りたたみ2</summary>
	        <pre><code>cd /var/tmp</code></pre>
	</details>
	<details open>
		<summary>折りたたみ3</summary>
	</details>
</details>

---

Qiita記事のURLの末尾に「.md」をつけるとマークダウン

---

[return to menu](#menu)
### header1
ESP32でRFID(RC522)を使ってみる

##やったこと
RFIDが使ってみたくてモジュールを買ってみました。ESP３２と合わせて2000円以下でできるのでオススメです。

##使った機材
・ESP32　DevkitC
・RFID-RC522 以下RC522

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/0aa30c35-2288-41d0-aedb-4632998a186a.jpeg" width=50%>

##事前準備
RC522は事前に半田付けが必要になります。ピン間隔が近いので気を付けながら行いましょう。
下記が例になります。私は下手くそですが、一応これでも動きました。
<img src= "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/a6e72e06-9320-917e-532a-42b19a346c24.jpeg" width=50%>

##接続
ピンの接続についてです。
今回はESP32を使用しています。ピン配置を確認して適切に行ってください。
ESP32については下記の通りです。


|RC522|ESP32
|:---|:---
|RST | IO26
|MISO| IO19
|MOSI| IO23
|SCK| IO18
|SS| IO5

**参考**
[ESP-WROOM32とRC522でRFIDお遊びしてみた](https://qiita.com/kmhumd/items/c2dd0850f9deabb1787c)

##コード
必要なライブラリは「MFRC522」ですのでインストールしましょう。
そのあと、ファイル＞スケッチ例＞MFRC522>DumpInfo を選択。
デフォルトではピン番号がArduino用になっていますので、ESP32用に変えましょう。

例：DumpInfo

```java
#include <SPI.h>
#include <MFRC522.h>

#define RST_PIN   26  
#define SS_PIN    5  
#define MISO_PIN  19 
#define MOSI_PIN  23 
#define SCK_PIN   18 

MFRC522 mfrc522(SS_PIN, RST_PIN);  // Create MFRC522 instance

void setup() {
	Serial.begin(115200);		// Initialize serial communications with the PC
	while (!Serial);		// Do nothing if no serial port is opened (added for Arduinos based on ATMEGA32U4)
	SPI.begin(SCK_PIN, MISO_PIN, MOSI_PIN);
	mfrc522.PCD_Init();		// Init MFRC522
	delay(4);				// Optional delay. Some board do need more time after init to be ready, see Readme
	Serial.println("Hello!!");
	mfrc522.PCD_DumpVersionToSerial();	// Show details of PCD - MFRC522 Card Reader details
	Serial.println(F("Scan PICC to see UID, SAK, type, and data blocks..."));
}

void loop() {
	// Reset the loop if no new card present on the sensor/reader. This saves the entire process when idle.
	if ( ! mfrc522.PICC_IsNewCardPresent()) {
		return;
	}

	// Select one of the cards
	if ( ! mfrc522.PICC_ReadCardSerial()) {
		return;
	}

	// Dump debug info about the card; PICC_HaltA() is automatically called
	mfrc522.PICC_DumpToSerial(&(mfrc522.uid));
}
```

##結果
付属のカードをかざすと下記のような出力を得ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342722/e0c822ad-b78e-281a-5f7d-80818218205d.png" width=90%>

ArduinoIDEがダークモードが気になる方は私の過去記事より導入してみてください。
[ArduinoIDEダークモード for Mac](https://qiita.com/taiyyytai/items/cd7c734b658732eb434c)

##エラーになってしまったとき
[下記のようなエラーができときはこちら](https://qiita.com/taiyyytai/items/1feed0e1ad9eddcfaf50)
**Firmware Version: 0x0 = (unknown)
WARNING: Communication failure, is the MFRC522 properly connected?**


##終わりに
RFIDって難しそうですが、半田さえ付けてさえしまえば簡単でした。これからRFIDでいろいろ遊んでみたいと思います。
JavaScript JSON.parse() ではキーや値はダブルクォーテーションで囲う

# JSON.parse()

うまくいく例

```javascript
let objStr = '{"0": "a", "1": "b", "2": "c"}';
let obj = JSON.parse(objStr);
```



うまくいかない例

```javascript
let objStr = "{'0': 'a', '1': 'b', '2': 'c'}";
let obj = JSON.parse(objStr);
```

エラー内容

```
Unexpected token ' in JSON at position 1
```

JSON.parse()の使い方はこちら

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

> **Objects と Arrays**
>
> プロパティ名は二重引用符で括った文字列にしなければなりません。

# 参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON
入力されたデータからユーザーを特定する方法

#目次
<b>①結論</b>
<b>②find_byメソッドとは</b>
<b>③find_byメソッドの使い方</b>

##①結論
find_byメソッド使用する。

##②find_byとfindの違い

```php:データ取得方法の違い
  1. @user = User.find(params[:id])

  2. @user = User.find_by(email:params[:email],password:[params:password])
```
１については、idの値を指定してデータを取得している

2については、カラムを指定してデータを取得している

##③find_byメソッドの使い方
入力されたデータをもとにユーザーなどを見つけ出したいときに使用する。
例えばログイン機能を実装する場合、メールアドレスやパスワードを入力してログインするが、これは入力されたデータをもとにユーザーを探しているので、find_byメソッドを使用することになる。

余談ですが、ユーザーを探した結果が存在する場合と存在しない場合で場合を分けて考える必要がある。
下記のように記述する。

```
 def アクション名
  @user = User.find_by(email:params[:email],password:params[:password])
  if @user 
   redirect_to ◯◯◯◯
  else
　　render ◯◯◯◯
  end
 end
```
jsp内の九九表


```kuku99.html
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption>九九表</caption>
	<% for(int i=1;i<=9;i++){ %>
		<tr>
			<%for(int j=1;j<=9;j++){ %>
			<td><%=i*j %></td>
			<%} %>
		</tr>
	<%} %>
</table>
</body>
</html>
```

![スクリーンショット 2021-03-28 14.48.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017861/0a5e64cb-bdd0-9353-5243-3cedcea1b812.png)
Entity Framework Coreで行ロックを取得する方法

# Entity Framework Coreで行ロックを取得する方法

Entity Framework Core(以下EF Core)でデータ取得と同時に更新ロック(行ロック)をかける方法を紹介します。
SQLで記述した場合、以下のようなクエリに対応する処理です。

```sql
-- SQL Server
SELECT * FROM [TABLE_NAME] WITH (UPDLOCK)
-- Oracle
SELECT * FROM [TABLE_NAME] FOR UPDATE
```

以下の環境で動作確認を行っています。

* .NET Core 3.1 (C# 8.0)
* Microsoft SQL Server 2016 Express Edition
* Entity Framework Core 5.0.4

## 更新ロックを取得する方法

調べた限りではEF Coreは標準で更新ロックを取得する仕組みを提供していないようです。
その為、生SQLクエリを使用する方法で対応します。

```csharp
// dbSet は DbContext と紐づけられた DbSet<T> のインスタンスです
dbSet.FromSqlRaw<T>($"SELECT * FROM [{テーブル名}] WITH (UPDLOCK)")
```

`FromSqlRaw`メソッドは`IQueryable<T>`を返すため、続けて`Where`メソッド等で対象を絞り込むクエリが実現できます。

繰り返し使用することになると思いますので、共通メソッドを定義すると良いと思われます(以下の例は拡張メソッドとして記述しています)。
その際、クエリを作成するためにテーブル名が必要となりますので、何らかの方法で取得する必要があります。
テーブル名がエンティティ型のクラス名と一致する場合は以下のように書けます(`T`はエンティティ型とします)。

```csharp
public static IQueryable<T> ForUpdate<T>(this DbSet<T> dbSet) where T : class
{
    return dbSet.FromSqlRaw<T>($"SELECT * FROM [{typeof(T).Name}] WITH (UPDLOCK)");
}
```

クラス名がテーブル名と異なる場合は、エンティティクラスに`Table`属性[^1]でテーブル名を対応づけ、これを参照するのが簡単です。[^2]

```csharp
public static IQueryable<T> ForUpdate<T>(this DbSet<T> dbSet) where T : class
{
    var table = (TableAttribute)Attribute.GetCustomAttribute(typeof(T), typeof(TableAttribute));
    return dbSet.FromSqlRaw<T>($"SELECT * FROM [{table.Name}] WITH (UPDLOCK)");
}
```

[^1]: `Table`属性: `System.ComponentModel.DataAnnotations.Schema.TableAttribute`
[^2]: エンティティクラスに`Table`属性を付与する方法は以下を参照ください。<br />https://docs.microsoft.com/ja-jp/ef/core/modeling/entity-types?tabs=data-annotations


## 更新ロックの必要性について

通常、EF CoreはUPDATE等の更新クエリは`SaveChanges`メソッドを実行した時点で発行される為、ロックを取得する時間が最小限となります。

```csharp
// context は DbContext のインスタンスです
using var transaction = context.Database.BeginTransaction();
try
{
    var entities = context.Table.ToList();
　　 // この時点ではロックは取得しない

    // データ編集等

    if (context.SaveChanges() > 0)
    {
        // SaveChangesメソッドで更新系クエリが発行され、更新ロックが取得され、
        // Commitを行うまでの間ロックが保持される
        transaction.Commit();
    }
}
catch
{
    transaction.Rollback();
}
```

ロックの競合を防ぐ観点ではこのままでも良いのですが、データ編集のコストが高い場合にデータの取得から実際に更新を行うまでの間隔が長くなってしまい、他者の更新等が割り込まれてデータの不整合を引き起こす可能性が高まります。
そういった場合ではデータを取得した時点で更新ロックを取得し、データ編集処理中のDB変更を抑制する必要があります。
UnityでAvatarMaskを使い既存のアニメーションを混ぜる

# はじめに
ゲームを作っている際に「この部分の表情変えたいな」とか「この二つのモーションが合わさったやつがあればいいのに」っていうときありますよね！
今回はそんなアニメーションの合成の仕方について解説します！！

#完成動画
走るとジャンプだけの簡単なアニメーション
![afterGif 3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/8cda3757-8fa6-25b8-d22a-49e44916d7bd.gif)




こちらを今回は
![afterGif 1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/23746edd-d735-07bf-7681-d01bf8072b56.gif)




走っている間、ニコニコにしていこうと思います！

#手順
今回使うのはAvaterMaskという機能です。こちらどんなことができるかというと、
アニメーションを顔だけや手だけなど部分的に切り取ることができます。
まずはそのAvatarMaskを作成しましょう！

ProjectウィンドウでCreate→AvatarMaskを選択。名前をFaceMaskにしてください。
![スクリーンショット 2021-03-28 14.23.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/0415e9e6-fea4-efdc-d76c-d206991e91bd.png)
AvatarMaskのHumanoidの中を開き切り取りたい部分のみを緑にしてください。今回は顔を使うのでFaceMaskの顔のみ緑にしてください。
![スクリーンショット 2021-03-28 14.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/99cc5c13-1673-46a9-a2ef-0813c7a1fc00.png)
続いてAnimationControllerを開きLayerタブのプラスボタンから新規レイヤーを追加しましょう。名前はFaceLayerにしてください。
![スクリーンショット 2021-03-28 14.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/6c72cfe7-3796-57f4-1572-2d4f041edd6d.png)
FaceLayerの歯車から設定を変えていきましょう。
Weight=1
Mask=FaceMask
最後にSyncにチェックを入れてください。
![スクリーンショット 2021-03-28 14.34.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/9e5496c8-0c1e-2629-d20a-487beab37535.png)
そうすると今まで使用していたアニメーションコントローラーと同じ形のものになると思います。
その中で混ぜたい部分、今回は走っているときに笑顔のアニメーションを加えるため、RUNのステートを選択MotionにSmile1を入れました。
![スクリーンショット 2021-03-28 14.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251218/e53d2f51-a6ef-ab76-7aa0-3e9564f029d0.png)

これで操作は終わりです。
活用法はかなり多く、武器を持つ上半身＋下半身移動で走ったり、ジャンプして攻撃などかなりのバリエーションを作れると思います。ぜひご活用くださいませ〜〜
Pythonでヤマト運輸の配達状況を一瞬で照会する

## 経緯
会社でECサイトを運営しており，自分の担当は注文の受注から発送までを管理する業務でした．発送したあとに，荷物がちゃんとお客さんのところへ届いているかを確認するため，逐一「[荷物お問い合わせシステム](https://toi.kuronekoyamato.co.jp/cgi-bin/tneko)」で配達状況を調べることがルーチン業務でした．

はじめは次の手順で配達状況を確認していました：

1. ECサイトの管理画面に入力済みの送り状番号を，クリップボードにコピーする．
1. ブックマークから「荷物お問い合わせシステム」を開く．
1. 画面の枠の中に送り状番号を貼り付ける．
1. エンターキーを押して配達状況を照会する．

この作業を一日に十数回くらい繰り返していたので，なかなか手間だな～と思い，次のようなプログラムを作りました．

## 作ったプログラム
上記のように4ステップかかる作業を，次の2ステップに削減できました．

1. ECサイトの管理画面に入力済みの送り状番号を，クリップボードにコピーする．
1. プログラムを実行して，配達状況を照会する．

プログラムは以下の通りです．

```yamato.py
#! python3

import pyperclip
import webbrowser

num = pyperclip.paste()
webbrowser.open('http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id=' + num)
```

このプログラムを実行するためのバッチファイルをデスクトップに置いて使っています．地味に便利です．
[Python][小ネタ] f文字列中で利用されるconversion flag,あるいは変換フラグ(!s, !r, !a)について

#### 概要
Effective Pythonを読んでいると以下のようなコードが。

```python:
class Tool:
    def __init__(self, name, weight):
        self.name = name
        self.weight = weight

    def __repr__(self):
        return f'Tool({self.name!r}, {self.weight})'
```

f文字列自体は日頃から利用していますし、reprメソッドについては「strメソッドよりオフィシャルな返り値で、strメソッドがなかったら代わりに呼び出されたりする」程度の認識はあります。(参考サイト: [Python－特殊メソッド: \_\_repr\_\_と\_\_str\_\_](https://blowup-bbs.com/python-specific-method-repr-str/))

ですが、そのf文字列中で利用されている!rについては全くの初見でした。エクスクラメーションマークは特殊文字扱いなのかGoogleで検索しても上手くヒットしませんし、正式な名称も知らないので無駄に手こずる有様。

ここでは同じような疑問にぶち当たった方のために、メモがてら記事を残しておきます。

#### 結論
ざっくり言ってしまうと、f文字列中の!は、文字列内の{}のところを評価するために**呼び出すメソッドを決定する**ためのものです。[公式サイト](https://docs.python.org/3/reference/lexical_analysis.html#grammar-token-conversion)には以下のように表記があります。

> If a conversion is specified, the result of evaluating the expression is converted before formatting. Conversion '!s' calls str() on the result, '!r' calls repr(), and '!a' calls ascii().

和訳するとこんな感じでしょうか。

> 変換が指定されると、表現を評価した結果がフォーマッティングの前に変換されます。!sではstrメソッドが、!rではreprメソッドが、!aではasciiメソッドが呼ばれます。

簡単なサンプルを作るとこんな感じ?

```python:
class Sample:
    def __init__(self):
        pass
    
    def __repr__(self):
        return "__repr__ method is called."
    
    def __str__(self):
        return "__str__ method is called."
    
    def __ascii__(self):
        return "__ascii__ method is called."


sample = Sample()
print(f"{sample!r}")
print(f"{sample!s}")
print(f"{sample!a}")
```

```:出力結果
__repr__ method is called.
__str__ method is called.
__repr__ method is called.
```

ちなみに、何も指定していないとstrメソッドが呼ばれるようになっています。

```python:
print(f"{sample}")
```
```:出力結果
__str__ method is called.
```

#### まとめ
ということで、変換フラグについての理解はある程度深まりました。冒頭のコードで用いられている!rは、**strクラスに実装されている\_\_repr\_\_メソッドを呼び出す**ための変換フラグということになります。

上と同じ様に3種の変換フラグを使ってf文字列をprintすると、以下のようになります。

```python:
sample_text = "sample"

print(f"{sample_text!r}")
print(f"{sample_text!s}")
print(f"{sample_text!a}")
print(f"{sample_text}")
```

```:出力結果
'sample'
sample
'sample'
sample
```

……正直、'がついているかいないかくらいの違いで大した差はないんじゃない？と思ってしまいます。が、よくよく考えると、文字列であることをきちんと明示させるためには、\_\_repr\_\_メソッドを使うのが賢い気もします。

ここまで読んでくださってありがとうございます。誤りに気づかれたり、あるいは「こんな利点、利用方法があるよ」という知見をお持ちの方は、ぜひコメントにて情報提供していただけると幸いです。

集合知に感謝。
[python]biopythonでゲノミクスに便利なコマンド

#はじめに
ゲノミクスをやってるとしばし、DNA配列と睨めっこしたり、相補鎖見たり、転写産物をみたり、翻訳したりといったことをする。
これまでの私はその都度、配列をWEBのツールとか使って処理したりしてました。

例えば以下のような配列があったとすると、以下のような処理をすることがあります。
>**元のDNA配列**
　ACCCACGCCAACAAGAGCAT
>**転写**
　ACCCACGCCAACAAGAGCAU
>**翻訳(アミノ酸一文字表記)**
　THANKS
>**相補鎖**
　TGGGTGCGGTTGTTCTCGTA
>**相補鎖を反対から読んでいった配列**
　ATGCTCTTGTTGGCGTGGGT
>**相補鎖での翻訳**
　MLLLAW

こんな感じのことを、エクセルなんかを使いつつ非効率に処理してました。

#biopythonだと
biopythonだと上で書いた処理が全て一行のコマンドでできちゃいます。
まずはインポートしたり配列を変数に入れたり。

```python:ライブラリimportとsequenceの準備
from Bio.Seq import Seq
sequence = Seq("ACCCACGCCAACAAGAGCAT")
print(sequence)

# 実行結果
ACCCACGCCAACAAGAGCAT
```

これで準備ができたので、あとは用意したsequenceに関数を実行するだけ。

```python:transcribe()
#転写
print (sequence.transcribe())
# 実行結果
Seq('ACCCACGCCAACAAGAGCAU')
```
```python:translate()
#翻訳
print (sequence.translate())
# 実行結果
Seq('THANKS')
```
```python:complement()
#相補鎖
print (sequence.complement())
# 実行結果
Seq('TGGGTGCGGTTGTTCTCGTA')
```
```python:reverse_complement()
#相補鎖を反対から読んでいった配列
print (sequence.reverse_complement())
# 実行結果
Seq('ATGCTCTTGTTGGCGTGGGT')
```
```python:reverse_complement().translate()
#相補鎖を反対から読んでいった配列を翻訳
print (sequence.reverse_complement().translate())
# 実行結果
Seq('MLLLAW')
```
seq内はすべて普通のpython文字列として扱うことができるので、部分的な切り貼りなんかもできて便利です。

```python:
# 3塩基目から最後まで
print (sequence[2:])
# 先頭から4塩基目まで
print (sequence[:4])
# 逆順に返す
print (sequence[::-1])
#　配列をくっつける
print (sequence + sequence)

# 実行結果
CCACGCCAACAAGAGCAT
ACCC
TACGAGAACAACCGCACCCA
ACCCACGCCAACAAGAGCATACCCACGCCAACAAGAGCAT
```

#Python環境
私の場合はanaconda(Python 3.8.5)を入れてるので、以下のような感じでanaconda.navigatorからbiopythonをインストールしてます。
他のPythonのパッケージと同じくターミナルコマンドでpipを使って入れることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153624/ff83eca4-f7be-83b5-3f5d-51ef414b0959.png)
Google collabとか使う人でも
以下のコマンドを打てばbiopythonをすくに使えます。(先頭に「!」をつけると、ターミナルコマンドになるみたいです。)

```python:
! pip install biopython
```

#他にも色んな機能があるみたいです
他にも以下のような便利機能があります。
まだまだたくさんあると思いますが一部紹介。

```python:GC含有量の確認
from Bio.SeqUtils import GC
print (GC(sequence))
#実行結果
55.0
```
```python:FASTAの読み込み
#sequence.faというFASTAファイルの読み込み
from Bio import SeqIO
record = SeqIO.read ('sequence.fa', 'fasta')
#配列のIDは.idで取得できる
print (sequence.id)
#配列情報は.seqで取得できる
print (sequence.seq)
```

#biopythonの演習に
以下のKaggleの解答がbiopythonいいお勉強になるのでおすすめです！
コードは全部書いてあるので、Google collabとかで実行するだけで、なんか賢くなった気になれますのでおすすめです笑

https://www.kaggle.com/amiiiney/covid-19-proteins-identification-with-biopython/notebook

#ちょっとひとこと
biopythonに入ってる関数はどれも簡単なものばかりでちょっと頑張れば自分でも書けるものばかりですが、
(例えば翻訳の関数なんて、それぞれのコドンに対してアミノ酸が辞書型で登録されているだけという、なんとシンプルだけど自分じゃ絶対書かないめんどくさいやつ笑)
そんな感じなので、用意してくれてるのであれば、使えるものは使っていきましょう！笑

#おわりに
こんな風にバイオインフォマティクスの便利ツールが詰まってるbiopythonを皆さんもぜひ使ってみてください(^^)

以下記事の参考にさせていただきました。ありがとうございます。

https://biomedicalhacks.com/2020-05-12/biopython-basic-1/
Python DashのCSS拡張とBootStrap導入

# Python DashのCSS拡張とBootStrap導入

WebサービスとしてPython Dashを使う場合、そのままだとUI・デザインの拡張性が弱いため
Python DashのCSS拡張とBootStrap導入をまとめた

Python Dashの導入方法は以下の記事を参考

https://qiita.com/morita-toyscreation/items/d1a4d1d57fe600f9b43c

## CSS拡張

Python DashでCSSを使う場合には大きく２パターン

**dash_html_components style指定**

styleをDict追加することが可能
ドキュメントなどはこちらが使われていることが多い

```Python
import dash_html_components as html

app.layout = dbc.Container(
    [
        html.H1("BootStrap Sample", style={"font-size": 100, "color": "red"}),
        html.Hr(),
    ],
)
```

**assets以下にcssを配置**

mediaなど対応する場合には独自cssを使うしかない
assets以下にcssを配置すると独自cssが利用可能
*custom.css*

```CSS
h1 {
    font-size: 100px; 
    color: "red";
}
```



**結果**
![スクリーンショット 2021-03-28 14.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59264/5f7d567d-d675-669d-653f-3dd3234566df.png)




## BootStrap導入

### dash-bootstrap-components

公式サイト

https://dash-bootstrap-components.opensource.faculty.ai/

GitHub

https://github.com/facultyai/dash-bootstrap-components

インストール

```
$ pip install dash-bootstrap-components
````

**導入**

```Python
import dash
import dash_bootstrap_components as dbc


app = dash.Dash(
    __name__,
    suppress_callback_exceptions=True,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ],
)
```

**グリッド**

Python Dash内でBootStrapが利用可能
グリッドの記述方法は以下

```Python
import plotly.express as px


df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")

app.layout = dbc.Container(
    [
        html.H1("BootStrap Sample"),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col(dcc.Graph(figure=fig), md=4),
                dbc.Col(dcc.Graph(figure=fig), md=8),
            ],
            align="center",
        ),
    ],
    fluid=True,
)
```

例：HTML出力
BootStrapのグリッドが利用されていた

```HTML
<div class="container-fluid">
    <h1>BootStrap Sample</h1>
    <hr>
    <div class="align-items-center row">
        <div class="col-md-4">
            <div class="dash-graph">...</div>
        </div>
        <div class="col-md-8">
            <div class="dash-graph">...</div>
        </div>
    </div>
</div>
```

**結果**

BootStrapグリッドが利用されレスポンシブ対応が行われた
dash-bootstrap-componentsを使うことで使い慣れたBootStrapコンポーネントが利用可能はありがたい

他のBootStrapコンポーネントも大体利用可能

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/alert/

*PC*
![スクリーンショット 2021-03-28 14.19.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59264/cdb1a4eb-6c1c-2d46-c5ef-4fdf89c9e47a.png)

*スマホ*
![screencapture-localhost-8080-page-1-2021-03-28-14_19_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59264/0eaf38df-b6f7-08d2-3390-d8a7cf3c75f7.png)

---

いいね！と思ったら LGTM お願いします :clap::clap::clap:

【PR】プログラミング新聞リリースしました！ → https://pronichi.com
【PR】週末ハッカソンというイベントやってます！ → https://weekend-hackathon.toyscreation.jp/about/
VScodeを使ったSassの導入方法【Sass導入してみたいな、という初心者向け記事】


#大前提

####SCSS(=Sass)はCSSに「コンパイル」というのをしないとサイト上には読み込まれないです！！
(※コンパイル=変換という意味です)
まじでこれ大事なんですが、謎にネット上の記事に「.scss拡張子のファイルを作るだけで使えるで」とか書いてあって、戸惑ったので念のため書いておきます。

SCSSは(慣れたら)書くのを楽ちんにする為に導入するのであって、結局HTMLファイル内のheadにパスを通すのはcssファイルになります。

この説明でわかってもらえるかな..。

【コードを書くとき】
index.html　× main.scssでプログラミングライクに楽〜にcssを書く

【実際にサイトを確認する時】
①main.scssファイルをmain.cssファイルに変換する(コンパイルする)
②main.cssが読み込まれた状態のindex.htmlが表示される

# どうやってコンパイルすればいいの？

色々とやり方がありますが、エディタソフトVScodeを使っている場合は自動コンパイルできるプラグインをインストールするのが一番簡単です。

###他にも色々方法はありますが...

gulp.jsというNode.jsベースで作られたタスクランナー(※Webサイト構築に必要な処理をタスクとして自動化してくれるプログラム)や、だったり、があります。
が、導入がなかなかに難しいのでターミナルやコマンドに慣れていない方にはおすすめできませんし、Sassをコンパイルするだけならあまり導入するメリットはないかなと思います。


# コンパイルしてみよう

①まずはVScodeの左のツールバーの下にある、拡張機能ボタンを押して、検索窓で`sass`と検索します
![スクリーンショット 2021-03-28 11.16.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/c313c88d-6ef5-6d39-7628-4dd10fa4b3d9.png)

②Live Sass Compilerというのがあるのでそこをクリックしてinstallしてください
![スクリーンショット 2021-03-28 11.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/bbd8dded-2072-407b-7407-4f3658f1046a.png)

③インストールが終わるとVScodeのエディタ の右下に`Watch Sass`が出現します。
![スクリーンショット 2021-03-28 11.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/01452ad2-c2a3-08e6-250d-7ebfa8bb0485.png)


④あとはscssファイルをコンパイルしたい時にこの`Watch Sass`をクリックするだけで、自動でコンパイルがされてcssファイルが読み込まれたHTMLをサイトで表示することができます〜！簡単！
2021年7月〜2021年8月のハッカソン開催情報まとめ!

2021年03月28日 14:13更新
2021年7月〜2021年8月のハッカソン・ゲームジャム・開発合宿の開催情報を定期的に紹介!!
※こちらは自動的に集めたものになります。
# これから開催されるイベント

### [Lisper の集い 2020](https://tcool.connpass.com/event/144966/)
<img width="300" height="96" alt="Lisper の集い 2020" src="https://connpass-tokyo.s3.amazonaws.com/thumbs/ed/83/ed8383de565fe8a8f77aa40aa10c4363.png" />

2021年07月23日
松月館
[奈良県吉野郡大淀町下渕172](https://www.google.co.jp/maps?q=34.3805,135.788)
定員10人
2021年03月28日 05:13現在 3人参加中
<font color="#FF0000;">あと残り7人</font> 参加可能
2021年5月〜2021年6月のハッカソン開催情報まとめ!

2021年03月28日 14:13更新
2021年5月〜2021年6月のハッカソン・ゲームジャム・開発合宿の開催情報を定期的に紹介!!
※こちらは自動的に集めたものになります。
# これから開催されるイベント

### [2回で学ぶ！IoT講座～ESP32プログラミング入門](https://soleildatadojo.doorkeeper.jp/events/119772)
<img width="300" height="225" alt="2回で学ぶ！IoT講座～ESP32プログラミング入門" src="https://dzpp79ucibp5a.cloudfront.net/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNnVWQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--cf74a0bb8d95b6985c254735799032bdf8cec4f3/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMb0F6QT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--91839951a073aea8822f6907dc8d81559a890706/2days_IoT.png" />

2021年05月09日
SCRIBBLE OSAKA LAB（SOL）（大阪メトロ御堂筋線「淀屋橋」駅から徒歩４分）
[大阪府大阪市北区西天満二丁目５番３号（堂島深川ビル３階）](https://www.google.co.jp/maps?q=34.6951,135.502)
定員8人
2021年03月28日 05:13現在 0人参加中
<font color="#FF0000;">あと残り8人</font> 参加可能

### [［初開催］Startup Weekend 萩](https://swhagi.doorkeeper.jp/events/119660)
<img width="300" height="161" alt="［初開催］Startup Weekend 萩" src="https://dzpp79ucibp5a.cloudfront.net/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeXhLQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--dfab9b82b4c5e47d55cc218c2bc7bc63d53a52bf/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMb0F6QT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--8ce6569ce3b1f779d3cfcdbb6038d926ad4475c7/hagi.jpg" />

2021年05月28日
松陰神社立志殿
[山口県萩市椿東1537番地](https://www.google.co.jp/maps?q=34.4122,131.417)
定員30人
2021年03月28日 05:13現在 5人参加中
<font color="#FF0000;">あと残り25人</font> 参加可能
2021年3月〜2021年4月のハッカソン開催情報まとめ!

2021年03月28日 14:13更新
2021年3月〜2021年4月のハッカソン・ゲームジャム・開発合宿の開催情報を定期的に紹介!!
※こちらは自動的に集めたものになります。
# これから開催されるイベント

### [Eventbrite](https://www.eventbrite.com/e/circular-hackathon-circular-city-week-nyc-tickets-145932370649)
<img width="300" height="150" alt="Eventbrite" src="https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F128910417%2F20119682768%2F1%2Foriginal.20210312-201009?w=1000&amp;auto=format%2Ccompress&amp;q=75&amp;sharp=10&amp;rect=0%2C128%2C800%2C400&amp;s=461594eefd0e276359c16e7b9ce2dc03" />

2021年03月12日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:13現在 0人参加中

### [Eventbrite](https://www.eventbrite.com/e/internet-of-ingestible-things-01-future-crime-tickets-147168225123)
<img width="300" height="150" alt="Eventbrite" src="https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F129943477%2F229953074144%2F1%2Foriginal.20210323-105443?w=1000&amp;auto=format%2Ccompress&amp;q=75&amp;sharp=10&amp;rect=543%2C181%2C1166%2C583&amp;s=c13346ff7f52d45bce3fd28c093fa8c4" />

2021年03月23日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:13現在 0人参加中

### [Mottzy's Jammy Jam](https://itch.io/jam/mottzys-jammy-jam)
<img width="300" height="238" alt="Mottzy&#39;s Jammy Jam" src="https://img.itch.zone/aW1hZ2UyL2phbS8yOTg1NzQvNTQ1Mjk3Ni5wbmc=/original/kNhom4.png" />

2021年04月01日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:13現在 0人参加中

### [[Online] NoCodeを触ってみよう！Startup Weekend Tokyo 地方創生×NoCode プレイベント](https://swtokyo.doorkeeper.jp/events/118780)
<img width="300" height="100" alt="[Online] NoCodeを触ってみよう！Startup Weekend Tokyo 地方創生×NoCode プレイベント" src="https://dzpp79ucibp5a.cloudfront.net/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNjJlQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--50891334ad39d866db8af138ba62882f0dc585e7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMb0F6QT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--8ce6569ce3b1f779d3cfcdbb6038d926ad4475c7/%E3%82%A2%E3%83%BC%E3%83%88%E3%83%9B%E3%82%99%E3%83%BC%E3%83%88%E3%82%99_1_%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC.jpg" />

2021年04月04日

[](https://www.google.co.jp/maps?q=,)
定員125人
2021年03月28日 05:13現在 38人参加中
<font color="#FF0000;">あと残り87人</font> 参加可能

### [[Online] Startup Weekend Tokyo 地方創生×NoCode](https://swtokyo.doorkeeper.jp/events/118213)
<img width="300" height="100" alt="[Online] Startup Weekend Tokyo 地方創生×NoCode" src="https://dzpp79ucibp5a.cloudfront.net/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL3lkQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ff2d833c2326264d198541f51008ea588d21bfe0/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMb0F6QT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--8ce6569ce3b1f779d3cfcdbb6038d926ad4475c7/%E3%82%A2%E3%83%BC%E3%83%88%E3%83%9B%E3%82%99%E3%83%BC%E3%83%88%E3%82%99_1.jpg" />

2021年04月23日

[](https://www.google.co.jp/maps?q=,)
定員125人
2021年03月28日 05:13現在 22人参加中
<font color="#FF0000;">あと残り103人</font> 参加可能
2021年1月〜2021年2月のハッカソン開催情報まとめ!

2021年03月28日 14:13更新
2021年1月〜2021年2月のハッカソン・ゲームジャム・開発合宿の開催情報を定期的に紹介!!
※こちらは自動的に集めたものになります。
# これから開催されるイベント

### [【3/21オンライン】WiDS HIROSHIMA アイデアソン2021＜視聴登録＞ (2021/03/21 14:00〜)](https://widshiroshima.connpass.com/event/200594/)
<img width="300" height="122" alt="【3/21オンライン】WiDS HIROSHIMA アイデアソン2021＜視聴登録＞ (2021/03/21 14:00〜)" src="https://connpass-tokyo.s3.amazonaws.com/thumbs/80/7f/807f8be6ced45928b5dbf8ba0e5be3c2.png" />

2021年01月05日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:13現在 0人参加中

### [LOST IN IDENTITY Hackathon](https://eventornado.com/event/lost-in-identity-hackathon)
<img width="300" height="171" alt="LOST IN IDENTITY Hackathon" src="https://eventornado-files.ams3.cdn.digitaloceanspaces.com/events/86/YvtiUmxG8WSM1jWJm1Cjy8MmrCLK4dA57Ca8z48r_large.jpeg" />

2021年02月23日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:13現在 0人参加中
2020年1月〜2020年2月のハッカソン開催情報まとめ!

2021年03月28日 14:12更新
2020年1月〜2020年2月のハッカソン・ゲームジャム・開発合宿の開催情報を定期的に紹介!!
※こちらは自動的に集めたものになります。
# これから開催されるイベント

### [Hackathon for kids hosted by the Newton LigerBots | Newton South PTSO](http://newtonsouthptso.org/2021/03/21/hackathon-for-kids-hosted-by-the-newton-ligerbots/)
2020年01月01日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:12現在 0人参加中

### [Eventbrite](https://www.eventbrite.com/e/impactathon-at-ucla-anderson-interactive-social-impact-workshop-hackathon-tickets-59045025260)
<img width="300" height="150" alt="Eventbrite" src="https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F59557402%2F10524429897%2F1%2Foriginal.20190402-161938?w=1000&amp;auto=format%2Ccompress&amp;q=75&amp;sharp=10&amp;rect=0%2C42%2C1920%2C960&amp;s=49f984065829531c668139a417361933" />

2020年02月17日
online
[](https://www.google.co.jp/maps?q=,)
2021年03月28日 05:12現在 0人参加中
seeds.rb- 使い方-


##seeds.rbとは

Webアプリの初期データを作ってくれるファイル

この中にテストデータを記述しておくことで、
Webアプリの__動作確認__や__レイアウト修正必要箇所の発見__などができるようになります。
<br>


##書き方

####１つずつテストデータを書いていく場合

```ruby:seeds.rb

#１つずつテストデータを追加する場合
Product.create!(
    name: "チーズ入りクッキー(6枚入り)",
    description: "チーズクッキーは生地となるラングドシャだけでなく、間にサンドしたホワイトチョコにもチーズが入っています。ダイレクトにチーズの美味しさを感じられるのでチーズ好きにはたまらないクッキーです",
    ex_price: "700",
    image: File.open("./app/assets/images/demo_product_image/クッキー.jpg")
  )
```
<br>
`モデル名.create!`から始まり、
`カラム名: "値" `を必要数書くことでテストデータが作成できるようになります。

※画像データは
`カラム名: File.open("ファイルの保存場所/ファイル名")`で登録可能です。<br>
今回はapp/assetsにimagesディレクトリを作成し、
さらにその中に、demo_product_imageディレクトリを作成。
その中にファイルを保存していた為、このような書き方になっています。


####大量のテストデータを入れたい場合

例えば、100個のテストデータを作りたいときはどうしましょう。

上記方法で100個書いてもいいですが、時間がもったいないですよね。
そのようなときは、__繰り返し処理__でデモデータを作ることができます！



```css:seeds.rb
100.times do |n|
  User.create!(
    name: "test#{n + 1}人目", 
    content: "test#{n + 1}回目",
    email: "test{n + 1}@test.com",
    password: "password"
)
end
```
<br>
この記述では、
0~100までの値をブロック変数 __n__ に代入してテストデータを作ります。



テスト１人目 
テスト２人目
テスト３人目
テスト４人目
　・
　・
　・
と100回繰り返し処理を行い、データを作ることができます。


##seeds.rbの反映

seeds.rbを書いただけではテストデータは登録されません。

```ターミナル.
rails db:seed
```
このコマンドでseeds.rbを読み込みます。
<br>
__※注意__
テストデータの読み込みをリセットするコマンド

```ターミナル.
bin/rails db:migrate:reset
```
<br>`seeds.rb`を読み込んで実装中、途中からテストデータを増やしたとします。
再度`rails db:seed`で読み込むとエラーになります。(重複するデータが出てきてしまう)

そのため、途中でテストデータを増やした際には、上記コマンドで一度テストデータの読み込みをリセットしてから再読み込みを行ってください。


##おまけ

####create と create!

どちらでもテストデータの作成を行うことはできます。

しかし、`create`ではバリデーション通りに作らなかった時にテストデータを作ることができません。

様々なカラムにバリデーションを定義していることも想定して、`create!`を使った方が楽だと思われます。

<br>
####それっぽいテストデータを作ってくれるGem

テストデータがtest1、test2、test３では味気ないという方へ

１：fakerというGemを読み込む

```Gemfile.
gem 'faker'
```

```ターミナル.
bundle install
```
ついつい忘れがち(Gem読み込み)


２：seeds.rbにfakerを使ってテストデータを書く

```css:seeds.rb
100.times do |n|
  name = Faker::Name.name
  content = "test"
  email = Faker::Internet.email
  password = "password"

  User.create(
    name: name,
    content: content,
    email: email
  )
end
```

３：seeds.rbの読み込み

```ターミナル.
rails db:seed
```

これでそれっぽい名前とアドレスのテストデータができます。

`faker`をより詳しく知りたい方はこちらを参考にしてください！
[公式リファレンス](https://github.com/faker-ruby/faker)


##さいごに

文字の長さなどによってレイアウトの調整もしやすくなるので、文字の長さを変えたテストデータを複数作ってみても良いかもしれません。

誤字、脱字、知識の誤り等ありましたら、教えていただけると幸いです。
【Rails】rails sでサーバーが起動できない時の対処法

# はじめに
rails sでサーバーが起動できなかった時に行った対処法を記事に残したいと思います。

# エラーの発生
以下のコマンドを実行

```
rails s
```
サーバーが立ち上がらず、このようなエラー文が出ました。

```
Traceback (most recent call last):
	4: from bin/rails:3:in `<main>'
	3: from bin/rails:3:in `load'
	2: from /Users/○○○/●●●/△△△/spring:10:in `<top (required)>'
	1: from /Users/○◯○/●●●/△△△/bin/spring:10:in `read'
/Users/○○○/●●●/△△△/bin/spring:10:in `read': No such file or directory @ rb_sysopen - /Users/○○○/●●●/△△△/Gemfile.lock (Errno::ENOENT)
```

最後の行の一文から、Gemfileが原因と判断しました。

```
directory @ rb_sysopen - /Users/○○○/●●●/△△△/Gemfile.lock (Errno::ENOENT)
```
# 対処法
以下のコマンドを試してみました。

```
bundle install
```
再度rails sコマンドを実行し、サーバーを起動することができました。

# 参考文献
解決にあたり、こちらの記事を参考にさせていただきました。
https://qiita.com/Takeroishi/items/0b8b8788f800ade7a3e5
M5Burnerを使ってM5Stackを工場出荷状態に戻す

## 概要

M5StackやM5stickCを工場出荷状態に戻すための作業です。

## 使用するもの

M5Burner。M5Stackのファームウェアを書き込む公式ソフト。

## 手順

1. [M5Stack 公式サイト](https://m5stack-store.myshopify.com/pages/uiflow)からBurnerをダウンロードする。
2. 対象の商品から必要なBurnerをダウンロードする。
3. Burnをクリック。(Wifiの設定が求められる場合がある)

## 具体的な手順

1. [M5Stack 公式サイト](https://m5stack-store.myshopify.com/pages/uiflow)からBurnerをダウンロード。

Software -> Downloads -> Burner

![スクリーンショット 2021-03-27 11.24.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627146/45d29806-3bf7-d641-501d-71eb5f70674a.png)

2. Burnerを開いて、対象の商品から必要なBurnerをダウンロードする。

3. Burnをクリック。

下記のように`Burn Successfully`と表示されば完了。

![スクリーンショット 2021-03-27 11.21.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627146/cc31a80b-e437-91c8-fce5-299d40f0b2a7.png)

(Wifiの設定が求められる場合がある)

![スクリーンショット 2021-03-27 11.14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627146/d2fdd469-0bb1-f047-6c56-09578da71279.png)


## 最後に

昔とはBurnerのUIが変わっていて「なんだこれ？」となったのでメモ。

PCはWifiに接続しているのになぜかSSIDとPasswordの入力がもとめられたのはなぜでしょう。。。。？

## 参考
- [Beヨンド　初心者向けM5Stackの使い方 出荷時に簡単に戻す方法とプログラムの探し方+拡張ユニット](https://bey.jp/?p=89309)
LaravelのRoute::resourceにルートパラメータを指定する方法

公式ドキュメントになさそうで、試してみないとわからなかったのでメモ。


## 実装

```php
Route::resource('posts', PostController::class)
Route::resource('posts/{post}/comments', CommentController::class)
```

`Route::resource`も他のルーターメソッドと同じ感じにルートパラメータが使えました。


## 参考

ルーティング 8.x （再翻訳中）Laravel
https://readouble.com/laravel/8.x/ja/routing.html
【Go言語】bufioのScanは65536バイトを超えると読み込まない？

# 概要

- bufioのScannerを使ったファイル読み込みはデフォルトでは1行の長さが65536バイトを超えた場合はエラーとなるので1行の最大長を設定しなければならない
- bufioのScannerのエラーハンドリングを忘れない

# やり方

- 初期サイズを与えたbyte配列を生成する
- Buffer関数にbyte配列と1行の最大長のサイズを設定する
- エラーハンドリングを忘れがちなので注意する(これがないとなぜファイルが読めないのか気づけ無い)

```
scanner := bufio.NewScanner(fp)
buf := make([]byte, 65536) // 初期サイズ
scanner.Buffer(buf, 1048576) // 最大サイズ
for scanner.Scan() {
  log.Print(scanner.Text())
}
// エラーハンドリング
if err := scanner.Err(); err != nil {
  log.Printf("scanner. %v", err)
}
```