OmniAICreator/Qiita-1.07M huggingface dataset:
Reactの重要キーワード

#Reactの重要キーワード

##state
・ユーザーの動きに合わせて変わる値。
・stateの値を更新するときはsetState()を使う。

##コンポーネント
・Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作る。
・ コンポーネントとは要はUIの部品。

##props
コンポーネントに渡すデータ

##jsx
・見た目を作る部分。htmlのように書ける。
・一つの要素の中に書く。
・jsx内でコメントは以下のように書く

```
　{/* コメント */}
```

・{}内はjs

##
【Rails】 フラッシュメッセージ使い分け

はじめに
---
お恥ずかしながら、私は最近までフラッシュメッセージってflash[:notice] = ⚪︎⚪︎と書いておけばいいんだろうくらいの認識しかありませんでした。ポートフォリオ作成時にフラッシュメッセージの使い分けの方法があることを知り、少し理解を深めることができたので、自身の備忘録として残しておきたいと思います。
<br>

開発環境
---
ruby 2.6.3
Rails 5.2.4.4
<br>

フラッシュメッセージって何？
---
何かの処理を行った後に画面に表示されるメッセージのことを指します。
例） ● ログイン時
　　　　「ログインに成功しました」
　　 ● 記事の投稿時
　　　　「記事の投稿に成功しました」
<br>

見本
---
![スクリーンショット 2021-02-20 1.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/490c727a-fc15-8463-6746-9244c84515e2.png)


フラッシュメッセージの種類
---
####● flash
次のリクエストまで表示させることができる。
＝ redirect_toの際に使用する。
※render時に使用すると次のリクエスト時までメッセージが画面に表示され続けてしまうので、不適切になります。

####● flash.now
現在のリクエストまでしか表示できない。
＝ renderの際に使用する。

---

####● notice
通知を出す時。主に成功した時のメッセージなど。

####● alert
警告の通知を出す時。何かの動作に失敗時など。


コントローラー
---
今回は、投稿した際の保存成功時と失敗時にメッセージが表示されるようにしています。

```books_contoroller.rb

def create
 @book = Book.new(book_params)
 @book.user_id = current_user.id
 if @book.save
  redirect_to books_path, notice: = "投稿に成功しました"
 else
  flash.now[:alert] = "投稿に失敗しました"
  render :new
 end
end

# 2行に分けて記述することも可能
# redirect_to books_path
# flash[:notice] = "投稿に成功しました"

```

ビュー
---
viewにもフラッシュメッセージが表示されるように記述を加えます。
※フラッシュメッセージを表示させるタイミングは何度もあるかと思いますので、部分テンプレートに書き出し、呼び出す形にしています。

```books/index.html.erb
<%= render 'layout/flash' %>

<% @books.each do |book| %>
 <%= book.user.name %>
 <%= book.title %>
 <%= book.content %>
<% end %>

```
```layout/_flash.html.erb
<% if notice %>
 <%= notice %>
<% elsif alert %>
 <%= alert %>
<% end %>

```

終わり
---
今回は以上になります。
私自身もプログラミング初心者ですが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
【LaTeX】tableofcontentsにいい感じでlistoftablesをつなげたい

LaTeXでレポートを書いているのですが、単純に

```latex
\tableofcontents

\listoftables
```

とすると、tableofcontentsの最後のB 表下の B.1とかがインデントされません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/1d95e99d-a78a-14c3-07e0-4ad210b4e04e.png)

なので、うまくインデントする方法を考えました。
これにより、ableofcontentsにいい感じでlistoftablesをつなげられます。


```latex
\usepackage{tocloft}
・・・
\setcounter{tocdepth}{3}
% 3 = \subsubsectionまで
\tableofcontents

\makeatletter
\renewcommand\listoftables{%
    \@starttoc{lot}%
}
\makeatother %listoftablesのタイトルを表示しない
\cftsetindents{tab}{3.80em}{3.25em} % listoftablesをうまい感じでインデントする
\listoftables
```

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/546b703b-15db-0eec-80f3-36d1d1f5324b.png)

# Reference

- https://tex.stackexchange.com/questions/461216/remove-indentation-in-table-of-contents
- https://tex.stackexchange.com/questions/200795/remove-list-of-figures-title
-
[Ruby on Rails]   CSSが反応してくれない時の対処法

自身の備忘録を書いて行きます。


　　
CSSを書いても全く反応してくれないことがありました。
なんでや？と思い調べて行くと、ちゃんと動いてくれるようになりました。

それの解決策を書いて行きます。

##解決策

```layouts/application.html.erb
 <%= stylesheet_link_tag 'application', media: 'all'%>
```


上記の記述をすることでCSSを読みこむようになりました。
こちらはCSSの類を全て読みこんでくれる記述らしいです。


　　

その他に
ユーザー管理機能(devise使用の場合)の
ログイン等の配置を動かす場合は

```config/initializers/devise.rb
config.scoped_views = true
```
上記の記述は元々、247行目でコメントアウトになっている
**config.scoped_views = false**
こういった記述になっている。

それをコメントアウトを外して**true**にすればいいらしい。

　　

実際、両方やってたら問題なく動いているので、
今の所は大丈夫そう。
初心者がTensorFlowを使ってみる〜TensorFlowのインストール〜（1日目）

#はじめに
##現状の知識
TensorFlow面白いよと言われたけど、機械学習できるの？機械学習って結局なんなん？っていうくらいわかってない。

pythonはスクレイピングで使う程度で、使いこなせてないよ。（PHPは仕事で使ってるのでプログラミング初心者というわけではないけど）

##勉強の進め方
Qiitaにメモしつつ、ゆっくり進めていくので、多分果てしない時間がかかる。
あと暇なタイミングで少しずつ進めるので、進みは遅いはずです。詰まったところはしっかり調べていく。

##目標
とりあえずなんか作る！そんでなにができるものなのか把握しとく（今は何ができるのかわからない）


---
###勉強スタート
---

#TensorFlowのインストールとエラー対応
とりあえず機械学習できるやつなんでしょ？っていうのはわかったので、まずインストールしてくよ。
[公式]https://www.tensorflow.org/install/pip?hl=ja
これのページに書いてある下記コマンドを実行

###インストール
```
pip install --upgrade tensorflow
```

###インストール確認
```
python -c "import tensorflow as tf;print(tf.reduce_sum(tf.random.normal([1000, 1000])))"
```


###エラー出ました（Could not import the lzma module.）
```
 UserWarning: Could not import the lzma module. Your installed Python is incomplete. Attempting to use lzma compression will result in a RuntimeError.
  warnings.warn(msg)
```

###原因
```
Could not import the lzma module.
```
lzmaがないよっていうことらしい。

###対応方法
lzmaを入れて、pythonのアンインストール＋再インストールをしなくちゃいけないとのこと。
下記のようにbrewで入るらしいので、一旦入れてみる

```
brew install xz
```

このあとpyenvでアンインストールと、再インストールを行うとのこと。


```
アンインストール
pyenv uninstall 3.7.5
```

```
再インストール
pyenv install 3.7.5
```

またpipで入れたライブラリが消えてしまった。。辛い。

###もう一回インストールと確認
```
インストール
pip install --upgrade tensorflow
```

###確認
```
確認
python -c "import tensorflow as tf;print(tf.reduce_sum(tf.random.normal([1000, 1000])))"

2021-02-20 00:00:12.799993: I tensorflow/core/platform/cpu_feature_guard.cc:142] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations:  AVX2 FMA
To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags.
tf.Tensor(-796.5173, shape=(), dtype=float32)
```

AVX2 FMA使いたかったら再構築しろよ！みたいなことが書いてあるけど、どうやらスルーしておkなやつらしい。
速度がちょっと遅いとかそれくらい。
なのでこれで環境構築終了！！


#最後に
なんかpythonでGUI使う時もだけどしょっちゅう再インストールして、pipでパッケージを入れ直してって繰り返してる気がする・・。
site-packageのディレクトリにpipで入れたパッケージファイルまとまってるんだけどこれバックアップして上書きすればいいんだろか？

もう少しやりたかったけど、AWS障害であわあわして疲れちゃったので今日(1日目)は勉強おわり。
1ページを4分割で両面印刷したときに、つぎのページが裏面になるようにする

# 何がしたいか
pdfファイルで、A4を４面分割し、両面印刷するときを考える。
デフォルトだと次のような順序でページが割り当てられると思う。

![普通.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336657/8c2eb0d2-f5d2-2ed1-3dbd-e8279c8bc819.png)

　そのまま用紙を読むぶんにはこれでOKなのだが、今回わたしは用紙をバラバラに切りわけて、冊子にしたいとおもっている。そのため、両面印刷したときに、ちょうど次のページが真裏に来るようにページの順序を入れ替えたいのだ。
　こうすれば、印刷したあとで紙を切ると両面のペアになってくれる。

![並び替えた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336657/e1c7ffd8-4ac7-e1fc-6665-e587124c5ade.png)

![重ねる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336657/bddb1a11-976a-e380-549b-43bfbd17b46b.png)


# プログラム
PyPDF2を利用した。もともとpdfの結合として使っていたが、ページの並び替えにも役立つようだ。


``` python
import PyPDF2

def sorting(i):
    lst = [0, 2, 4, 6, 3, 1, 7, 5]
    q = i % 8
    return lst[q]


targetPdf = PyPDF2.PdfFileReader('./target.pdf')
sortedPdf = PyPDF2.PdfFileWriter()
merger = PyPDF2.PdfFileMerger()

sort = []

for i in range(int(targetPdf.getNumPages() / 8) * 8):
    sort.append(sorting(i) + int(i / 8) * 8)

for i in range(int(targetPdf.getNumPages() / 8) * 8):
    sortedPdf.addPage(targetPdf.getPage(sort[i]))


with open('./sorted.pdf', 'wb') as f:
    sortedPdf.write(f)

```
ページ数が8で割り切れない場合の処理がかけていない。
一旦、あまりの箇所は対象から除外することで回避している。

# なんでこんなことがしたかったか（背景）
　実はコンビニだとA4とA3の印刷代金が変わらない（らしい）。いままでA4の２分割(小冊子)を利用していたが、A3を４分割すれば半額で済むではないかと気付いた。
Project Euler 問題7 「10001番目の素数」

## 問題
10001番目の素数を求めよ。

> By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13.
What is the 10 001st prime number?

## コード(Python)
```python
def isPrimeNum(num, primeNums):
    for primeNum in primeNums:
        if num % primeNum == 0:
            return False;
        if primeNum * primeNum > num:
            return True;

def getNextPrimeNum(primeNums):
    num = primeNums[-1] + 1;
    while (isPrimeNum(num, primeNums) == False):
        num += 1;
    return num;

primeNums = [2]
while(len(primeNums) < 10001):
    next = getNextPrimeNum(primeNums)
    primeNums.append(next)
print(primeNums[-1])
```
処理時間は約0.1秒でした。

```python

# 5行目
if primeNum * primeNum > num:
```

の処理を抜くと6秒くらいになります。ループを削る工夫って大事なんだなぁ。
Rails ERDのススメ

# About Rails ERD📗

Railsのテーブル情報を自動生成するためのgem
https://github.com/voormedia/rails-erd
ER図をpdfで出力することができる。

こんな感じ⬇️
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241228/4b31e0b5-65f3-4097-eba7-1994af410882.png)

# Getting started 🎉
for mac

`brew intall graphviz`

```gemfile:gemfile
gem install ‘rails-erd’, group: :development
```


- 設定でmigrationの度に自動生成することも可能

# Pros and cons
### 👍
クライアント・新入メンバーへの説明するのに便利

### 👎
関連にもよるがテーブル数が50超えてくるとごちゃごちゃしてすごく見づらい

内部の開発に関しては、モデル数20以下の場合annotateで十分
ある程度の規模のサービスの場合、LucidChartやdraw.ioで作図するするのがオススメ
画像と音声の同期問題

# 画像と音声で正確な同期ができないケース

映像信号処理回路（グラフィックカードなど）と音声信号処理回路（サウンドカードなど）で、動作クロックの根源が異なる場合で問題が生じます。（外部接続する画像出力装置と、音声出力装置の組み合わせでもあり得ます）

例えば、

　　映像信号処理回路のクロック： 300MHz で誤差 ±30kHz (100ppm)
　　音声信号処理回路のクロック： 200MHz で誤差 ±40kHz (200ppm)

とします。問題は、誤差があることですが、誤差のない製品を作る（量産する）ことは不可能なので

　　**誤差があることを前提**

にしなければなりません。

# どれくらいズレるのか？

例として、ディスプレイへの出力を毎秒 50 フレームとする（ディスプレイとの同期による影響は考慮しない）と、50 フレームでは、

　　映像： 1 ± 0.0001 秒
　　音声： 1 ± 0.0002 秒

の処理時間になり、最大で 0.0003 秒の差が発生します。

１フレームは 0.02 秒なので、約66秒で、１フレーム分の差がつきます。

面倒なので、１分で１フレームの差とすると

　　５０分の動画再生で、映像と音声が１秒もズレる

ことになります。

これより良い環境もあれば、悪い環境もあるでしょう。

# どんな不具合が出るのか？

この問題を考慮していない再生プログラムでは、映像または音声のバッファー オーバーフロー時の処理によって

- 映像：止まる、早送り
- 音声：途切れる、欠落

などが、瞬間的または一時的、断続的に生じることになります。

# 対処法方

映像の動きより音声の不具合の方が、視聴者のダメージは大きいので、音声優先で対処することなにります。また、表示画面の更新間隔は微調整できないシステムが殆どなので

　　表示映像の時刻と、再生済み音声の時刻を比較して
　　音声の再生速度（ピッチ）を人には分からないレベルで微調整

することになるでしょう。
yukicoder contest 283 参戦記

# yukicoder contest 283 参戦記

## [B 1399 すごろくで世界旅行 (構築)](https://yukicoder.me/problems/no/1399)

D=1 のときは全ての頂点同士を行き来できるようにしないといけないが、それ以外であれば中継点を一つ決めて底と全ての頂点を行き来できるようにすればいい. 開始頂点から1に行き、1から1に行くを繰り返し、1から終了頂点に行くといった感じになる.

```python
V, D = map(int, input().split())

t = [[0] * V for _ in range(V)]
if D == 1:
    t = [[1] * V for _ in range(V)]
else:
    for i in range(V):
        t[0][i] = 1
        t[i][0] = 1
for i in range(V):
    print(*t[i], sep='')
```
【PHP】queryとprepare/execute/fetchの意味

# 初めに
・PHP/MySQLを触り始めて1か月
・[こちら] (https://qiita.com/TkTkTkTkTako/items/d32fd686ce5335101e2a)のアプリ開発をした際に思った疑問点を深く学んでみようと思い記事を執筆


# 課題
PHP側でデータベースから値を取得したり、データベースに値を保存したりする際に

```
$members = $db->prepare('...');
$members->execute('...');
$member = $members->fetch();
```
や

```
$member = $db->query('...');
```

を何気なく使っていましたが、各関数の意味をしっかり理解せずに使っていました。


# 現在の理解(Before)
現在の私の各関数の理解は以下の通りです。

### query
SELECT文を使い、かつ**foreachで繰り返し処理をする際**に使う関数
### prepare
SELECT文を使い、かつ**取り出す値が単体である**(繰り返し処理等をしない)際に使う関数

### execute
prepareとペアで使うので、**prepareで取得したデータベース上の値**をPHPで受け取る

### fetch
executeで取り出した値を列毎に**配列で受け取る**

# 学習結果(After)

### query
・SQLステートメントを実行し、結果セットをPDOStatementオブジェクトとして返す
　⇒prepareとexecuteを一緒に実行する
・prepareとの違い：変動値がない場合

```
// 変動値がないコード
$pdo->query('SELECT * FROM user');
```
答え合わせ：×

### prepare
文を実行する準備を行い、文オブジェクトを返す
⇒実行したいSQL文をセットする
・queryとの違い：変動値がある場合

```
// 変動値があるコード
$stmt = $pdo->prepare("SELECT * FROM user WHERE name=:name");
```
答え合わせ：△

### execute
SQLステートメントを実行し、作用した行数を返す
⇒SQLの実行
答え合わせ：△

### fetch
結果セットから次の行を取得する
⇒executeで取得した行の値を取得する
答え合わせ：〇

#まとめ
・特にqueryとprepare/executeの違いが言語化しつつ学べました。
・イメージは間違えていなかったことがわかりましたが、公式ドキュメントを見ると適切な言葉選びをされている、と実感し改めて1次情報で学習を進めることの大切さを学びました。
Linux版OBSで仮想カメラを使えるようにする話

Ubuntuで遠隔会議するにあたり、画面表示にこだわりたくOBSををインストールした。しかしWindows版にはあった仮想カメラがLinux版にはなかった。

#tl;dr
Ubuntu(Linux全般？)で、仮想カメラを使うためには、[画面キャプチャ結果をダミーのビデオデバイスとして認識させる、カーネルモジュール"v4l2loopback"](https://jonathanbossenger.com/obs-studio-linux-virtual-camera/ "OBS Studio 26.1.0 for Linux – Now with Virtual Camera Support")が必要とのこと。

#環境
+ ubuntu 18.04.1
+ OBS 26.1.1(64bit)  

#インストール
いつもどおりアプトるだけ。
他のディストリビューションでも、同様に(pacman等で)インストールできるはず。

```
sudo apt install -y v4l2loopback-dkms
```

## 追記(2021/2/25)
apt で入手できるモジュールでは、以下のエラーが出てしまいOBS上の仮想カメラもクリックできない場合があるとのこと。
（コメントありがとうございます）

<font size='1' color=#151515>実はOBSで動作確認をしていませんでした・・・m(T_T)m</font><br>

[askubuntu](https://askubuntu.com/questions/1263554/sudo-modprobe-v4l2loopback-modprobe-error-could-not-insert-v4l2loopback-bad)
[teratail](https://teratail.com/questions/281687)

```
sudo modprobe v4l2loopback
modprobe: ERROR: could not insert 'v4l2loopback': Bad address
```

対策として、まずはインストールした"v4l2loopback"を削除。

```
sudo apt remove v4l2loopback-dkms
```

続いて[githubに上がっているモジュール](https://github.com/umlaeute/v4l2loopback)を説明に従ってインストール。

```
make && sudo make install  
```

インストール完了したので、カーネルモジュールの依存関係を更新。

```
sudo depmod -a
```


#結果
できた。
![Screenshot from 2021-02-20 00-14-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269597/fa782da7-70f0-1b72-3ead-4d219e7e17e2.png)


#最後に
Linuxを触るようになって、どんなキーワードで調べるべきか、嗅覚が育ってきた気がする。
AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた（パート①）

皆さんこんにちは！

最近、暖かったり寒かったり気温の変化が激しく大変ですね。

インドア大学生の僕にはあまり関係ないんですけどね（笑）

ってことで今回はAWS初心者がHTTPS化されたサイトをアップロードしていく流れをご紹介したいと思います。

タイトルが長いということは、書く内容も必然と長くなっていくので２つに分けて説明していきます。

流れとしては以下のようになります。

1. 静的サイトをS3へデプロイ
2. お名前ドットコムでドメイン登録
3. Route53で独自ドメイン登録（ここまでがパート①）
4. CertificateManagerでSSL証明書の発行（ここからパート②）
5. CloudFrontで独自ドメインでアクセス

こんな感じになります。

パート1に関しては、他の方が記事を挙げているのでそれらを見て頂く形になります。

パート2からはつまずくポイントが少しあるので、それらをしっかりと理解しながら説明していきます。

何事も最初ってかなり時間がかかったり、つまづいたりすることが多いのでぜひこの記事を参考にして頂けたらなと思います。

よかったら、LGTMお願いします！

それでは一緒に説明を見ていきましょう！

#1. 静的サイトをS3へデプロイ#

これは僕が記事を書くよりも下記の記事の方が分かりやすいので、こちらを参照の下、S3へデプロイしてください！

・[Amazon S3でSPAをサクッと公開する](https://qiita.com/kiyokiyo_kzsby/items/77bdb81a1ce1852b30ca)

S3へデプロイする時が一番壁にぶち当たるポイントだと思うので、デプロイするときにエラーが出た場合はこちらの記事を見てみてください。

・[AWSのS3でデプロイするときにエラーが出た時の話](https://qiita.com/akki-memo/items/450e912185e52753da66)

結構時間がかかると思うので頑張ってください！

#2. お名前ドットコムでドメイン登録#

こちらも僕が記事として書くよりも、他の方の記事の方が円滑に登録を行えるのでいくつか記事をご紹介して頂きます。

ドメイン登録を行う際は自分の用途に合わせてドメインを指定してください。

・[お名前.comの登録方法・ドメイン取得方法【初心者向けに解説！】](https://agousa.com/onamae-domain/)

・[【ブログ初心者向け】お名前.comで独自ドメインを取得する方法をステップごとに解説](https://tekito-style.me/columns/domain-onamae)

ご協力誠にありがとうございます。

以下、説明用のドメインは``example.com``とします。

#3. Route53で独自ドメイン登録#

これでパート①は最後になります。

ここまで中々骨のある作業だった思いますが、最後はすごく簡単なので肩の力を抜いてご覧下さい！

AWSコンソールの検索欄で「Route53」と入力してクリックしてください。

するとこのような画面になると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/d3140006-9d87-76ee-9338-05d3e2750a09.png)

もしかしたら違うかも。

そしたら、左のメニュー欄の「ホストゾーン」をクリックし、ホストゾーンの作成をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/4d59d9f8-0051-9529-be12-6b09f56f1af9.png)

<font color="red">※重要</font>  画像のようにドメイン名には自分で決めたドメインの前に``www.``のように何か名前をを付けて下さい。今回は分かりやすく説明するために``www.example.com``とします。

タイプはサイトを一般公開するので「パブリックホストゾーン」とします。

そして、無事完成されたら成功です！

パート①ここまでとします。

S3へデプロイするのが一番難しいと思います。

ただ、されさえできてしまえば後は簡単な作業です。

パート②はこちらの記事になります。

[AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた（パート②）](https://qiita.com/akki-memo/items/bb2b01912c016a4b90a5)

パート②はパート①に比べてやることも少ないので、あともう少し頑張りましょう！

以上、「AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた（パート①）」

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading
3つのstepでサイト表示速度をアップした話

# 3つのステップとは
サイトのコーディングがほぼ完了した際に、パフォーマンスが低すぎるとびっくりして、
なにが方法がないのか、色々調べて、検証してみた結果をまとめた記事です。
早速ですが、3つのステップはこちらです。

- CSSファイル、JSファイルを圧縮・軽量化(Minify)する
- img要素を「loading=“lazy”」を付与する
- content-visibility: auto;でコンテンツの遅延読み込み

※**IEと戦う戦士なら諦めましょう。**

# 1. CSSファイル、JSファイルを圧縮・軽量化(Minify)する
2021年のサイト制作現場で、ファイルを圧縮しない選択肢はないでしょう。
Webpackで開発する際に、ミニファイは当たり前ですが、
Webpackを使う以外の場合でも、ファイルを簡単にミニファイする方法がございます。

![スクリーンショット 2021-02-19 22.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/27bc19b3-f135-135a-8c9d-7de442af8e91.png)

こちら、VScodeの**「JS & CSS Minifer」**という拡張機能です。
使い方について、Google先生に聞けば、丁寧に教えるから、ここで省略します。
一度圧縮されたファイルを元に戻る便利な拡張機能もあります。
**「Prettier – Code formatter」**

ただし、圧縮されたファイルを**「Prettier – Code formatter」**で戻ったあと、最後のセミコロンが省略されてしまう場合があります。

~~~css
 p {
    color: #000;
    font-size: 16px;
    margin: 15px auto /* ここのセミコロンがなくなっちゃう！！！ */
  }
~~~

何も仕掛けていないときのサイトは36点！ ひどすぎる！！
![スクリーンショット 2021-02-19 23.16.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/d2f7adfe-c1bc-6b92-2a71-a2a5e509a431.png)

ミニファイ後
![スクリーンショット 2021-02-19 23.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/8707641a-aafa-63cf-96b3-9d2e6c81ab80.png)
![スクリーンショット 2021-02-19 23.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/d0456b62-8c44-c910-d496-668ddec245b0.png)

がっかり！ほとんど変わっていないじゃん。

でも、大丈夫！次の策があります。

# 2. img要素を``loading=“lazy”``を付与する
使い方はとっても簡単、img属性に``loading=“lazy”``を追加するだけです。

~~~html
<img src="pic.png" alt="画像の詳細" loading="lazy">
~~~

``loading=“lazy”``の効果はどうだい？
![スクリーンショット 2021-02-19 23.39.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/efa0076b-4eb8-3bb4-826b-c502fb76b7ad.png)

ちょっと微妙ですね！

最後、最新のやり方を導入してみたいと思います。


# 3. content-visibility: auto;でコンテンツの遅延読み込み
使い方も簡単。セクションごとに指定するだけです。

~~~css
section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;　
}
~~~

MDNの解説はこちらです。
https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility

参考記事はGoogleのブログです。
https://web.dev/content-visibility/

ちなみに、後こちらの日本語記事もみつけました。
- [表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説](https://techblog.yahoo.co.jp/entry/2020090830016393/)

すぐ検証してみました。
![スクリーンショット 2021-02-20 0.00.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/7201eab2-d296-8d64-4eb7-c44f7cc96944.png)

![スクリーンショット 2021-02-19 23.51.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657751/8f89557f-48a6-ecf0-31d1-18db0d15b4f1.png)

さすが最新技術！　早くなりました！

今度、もっと掘り下げてみたいと思います。
パイソンのイラスト生成WebアプリをReactで作った

## パイソンについて

うすうす感づいているかもしれませんが、この記事にはPython言語の話は出てきません。それでもこうしてこの記事に出会えたのも何かのご縁、ちょっとだけでも覗いていっていただけませんか。

普段Python言語を使っているソフトウェアエンジニアの方でも本物のパイソンを見たり触ったりしたことのある人は少ないのではないでしょうか。今日はそんなパイソンの魅力だけでもおぼえて帰っていただければと思います。

パイソンは日本語でニシキヘビと呼ばれていますが日本の野生では生息していません。美しい模様と、いかつい顔立ちが特徴のヘビです。

毒を持たず、鳴き声やにおいもなく、アレルギー源となる体毛もなく、餌は週に1回、寿命も10〜20年と長く飼いやすいため、犬や猫を飼えない事情がある人でも飼育できるペットとして近年人気が出ています。

特にボールパイソンは性格もおとなしく、大きくなりすぎないため初心者でも比較的安心して飼育できます。また、ボールパイソンはペットスネークの中でも美しいモルフのバリエーションが圧倒的という点でもおすすめです。


## モルフとは

模様や色で分類される品種をモルフと呼びます。ボールパイソンは非常に多彩なモルフが特徴で、希少で人気のあるモルフは高額で取引されます。飼育下でのヘビの繁殖はそれほど難しくなく、好みのモルフを掛け合わせてあらたなモルフを作出する愛好家も多いです。

そのためここ数年で膨大な種類のモルフが生み出されてきました。これらのモルフの特徴をおぼえるのが大変なので作ったのが、今回紹介するウェブアプリBall Python Virtual Morph Makerです。

## Ball Python Virtual Morph Maker

https://smallpinkmouse.github.io/virtualmorph/
https://github.com/smallpinkmouse/virtualmorph
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/aa622f84-d575-ab15-ada7-9b0cd0911381.png)


色や模様の特徴をGUIで設定することができます。望むパターンができたら、Renderingボタンを押すとトグロを巻いたイラストが生成されます。

フレームワークはReactを使用、グラフィックの描画はp5.js、スライダーはrc-slider、カラーピッカーはreact-colorを使っています。

設定したパラメータをjson形式でローカルに保存して、後から再現できるようにしています。

## モルフの特徴

ノーマルモルフのボールパイソンは逆三角形の斑紋(Blotch)とその中の2つの点が特徴で、宇宙人の顔に見えるためAlien Headと呼ばれています。
![normal_pattern.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/e4beac03-5903-5675-4c95-af4bd44b6138.png)

モハベモルフの場合、斑紋の黄色味が強くなり中の点の数もひとつになります。Keyholeとも呼ばれます。
![mojave_pattern.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/0d38931d-47e9-7441-b93b-d503f98813b4.png)

スパイダーモルフの場合は、斑紋が大きくなり隙間が蜘蛛の糸のように細くなります。中の点は消失します。
![spider_pattern.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/832a2144-7715-45d8-3d0c-c23a3a4f856e.png)

## 生成したイラスト

レンダリングしたイラストはこのようになります。

ノーマルモルフの頭部は黒く、目はクリっとしています。
![normal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/9701ccc5-4eed-01ee-1cee-c3ff4d5defa0.png)

野生下ではニュースになるくらい希少なアルビノも、爬虫類ブリーダーの間では遺伝を管理されているため、入手しやすいポピュラーなモルフとなっています。黄色の色素は残るため体色は完全に白にはならず、また目は赤くなります。
![albino.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/f1b4f162-eb0f-b2ee-57be-2b828635655a.png)

パイドとかパイボールと呼ばれる、印刷ミスのように模様が白く抜けるモルフも人気があります。
![pied.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/d3cd5148-4c21-76fd-3569-49f8c0cfd940.png)


スパイダーは前述のように蜘蛛の巣のような模様が特徴です。頭部や虹彩も少し色が抜けて、猫目になる個体が多いようです。
![spider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/a7169002-b832-3415-b9a2-5d38e63e5093.png)

横の斑紋が完全に消失して、背中の線だけが高速道路のセンターラインのように残るフリーウェイという品種です。
![freeway.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/28e77431-71e9-35a6-f153-49665e5c6833.png)


## 最後に

ボールパイソンがいかに多彩で美しい模様を持つかが伝わったでしょうか。
苦手な人もいるかと思うので、実物の写真はここまで出しませんでしたが、もし興味がわいたなら世界最大のボールパイソン情報サイトWorld of Ball Pythonsを見てみてください。
http://www.worldofballpythons.com/

最後に我が家で飼っているナムパイ君をごらんください。パステルクラウンというパステルとクラウン両方の特徴を引き継いだモルフになります。
![20210501snake_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1128058/ea68f2d5-5d99-3fad-9d9b-1e659523f86c.png)
git push -u origin mainでpushされずerrorになる

rails tutorialのversion 6.0の１章でgitの扱い方を学びながら進めていたがgit push -u origin mainをしたら下記のようなエラーに遭遇した

#terminal

```
error: src refspec main does not match any
error: failed to push some refs to '自分のgithubアカウント'
```

#原因
2020/10月からgithubはレポジトリ名をmasterからmainに変更したためmainでpushしてもレポジトリ名が違うためerrorになるとのこと

次のようにgit branchで調べるとその通りだった

```
% git branch
* master
```

ので次のようにブランチを変えて解決

```
% git branch -M main
% git branch
* main
```

まだまだ初学者なのだと実感させられる

#参考になったURL
https://deepblue-ts.co.jp/tips/git-push-error/
KabuStationAPIを他サーバからリバースプロキシ利用して利用する

# 更新
* WebsocketのPROXY設定を追加
 
# 発端
株コムAPIは、Windowsアプリのkabuステーションをローカル起動している際にのみ利用可能であり、一般公開されているAPIではない。
仕組み的にはkabuステーション起動中のみ、`localhost:18081`(開発),`localhost:18080`(本番)のサーバが起動される。

この二つのサーバプロセスは、きっちりCORSが適用されており、ブラウザからは、このWindows上のIPを指定して、リクエストを送ってもCORSによって弾かれる。

## kabu station api
https://kabucom.github.io/kabusapi/reference/index.html#tag/auth

# 目的
他PC（Ubuntu）のブラウザ（主にReact等のJS）からもアクセスしたかったので、この制限を乗り越えて利用できる環境構築を行う。

## 対応
Apacheの導入。
Apacheのリバースプロキシ機能を使い、この制限をクリアする。

具体的には、以下の対応を実施。
すべて、`httpd.conf`に対する記述である。

### 1. モジュール有効化

```
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so
```

### 2. Listen ポートを2つ用意

```
Listen 28080
Listen 28081
```

### 3. リバースプロキシ定義を導入

```
<VirtualHost *:28080>
	ProxyRequests Off
	ProxyPass /kabusapi/websocket ws://localhost:18080/kabusapi/websocket
	ProxyPassReverse /kabusapi/websocket ws://localhost:18080/kabusapi/websocket
    ProxyPass / http://localhost:18080/
	ProxyPassReverse / http://localhost:18080/
</VirtualHost>

<VirtualHost *:28081>
	ProxyRequests Off
	ProxyPass /kabusapi/websocket ws://localhost:18081/kabusapi/websocket
	ProxyPassReverse /kabusapi/websocket ws://localhost:18081/kabusapi/websocket
	ProxyPass / http://localhost:18081/
	ProxyPassReverse / http://localhost:18081/
</VirtualHost>
```

## 結果
これにより、別PCの自作ReactサイトからCORSの制限を超えつつ、APIと通信ができた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/317c0e8e-59fa-8aa2-dbc6-c276113e9067.png)
※自作サイトからのアクセス。ここでは、JavaScriptのfetchAPIから、WindowsPCの28081ポートに対して、kabu station API の認証を通しています。
[Ruby on Rails]  devise導入後の Mysql  エラー

自身の備忘録を書いて行きます。

**devise**のgemを導入後**エラー**が出てきました。


##原因
まず、devise専用のストロングパラメータを記述していなかった事。
こちらの記述です。
　　　　



```application_controller.rb
before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end
```

Railsでは、悪意のあるユーザーの入力に対してセキュリティ対策を行わないと保存できない仕組みがあります。
通常のテーブルに保存する際はストロングパラメータを使用しましたが、deviseを使ったモデルの場合は方法が異なります。

ここで使われている、
**devise_parameter_sanitizerメソッド**と言うのは
「特定のカラムを許容する」メソッドです。


##もう一つの原因

```migrate/1111111_devise_create_users.rb
 def change
    create_table :users do |t|
      ## Database authenticatable
      t.string     :nickname,           null: false
      t.string     :email,              null: false, default: ""
      t.string     :encrypted_password, null: false, default: ""

```

マイグレーションのファイルのnicknameカラムに
**default制約**がなかったのが原因だった。

絶絶対つける必要があるわけでもないが、
状況を見ながらつけた方が良さそう。（deviseの時しか使ったことないけど...）
[Rails] 改行をブラウザに反映するメソッド [brタグなど]

#simple_format とは
simple_formatは、改行文字を含むテキストをブラウザ上で表示させる時に使われるヘルパーメソッドです。
文字列を＜p＞で囲む
改行には＜br＞を付与
連続した改行については、＜/p＞＜p＞を付与

simple_formatの記述フォーマットはこちらです。
simple_format(文字列 [オプション or HTML属性 or イベント属性])

RailsのERBファイルに埋め込む場合には以下のように記述します。
<%= simple_format(入力値) %>



オプション      |  説明
-------------|-------------------------------
:sanitize    |  サニタイズ
:wrapper_tag |  文字列を囲むタグHTML属性

---
#sanitizeオプション
sanitizeオプション付け加えることによって、一部の危険なHTMLタグを取り除いてくれます。

```ruby:
<%= simple_format(入力値, sanitize: true)%>
```

---
#wrapper_tagオプション
「wrapper_tag」を追加することで＜p＞ではなく、別の指定したタグで囲むことができます。

```ruby:
<%= simple_format(入力値, {}, wrapper_tag: "div")%>
```

---
#具体例（こんな感じです）
<%= "佐藤　ましろさん＜br＞に100円分のギフトを贈ります" %>
[![Image from Gyazo](https://i.gyazo.com/48d91bc5452fbc3cdc2b32f5c73d48e7.png)](https://gyazo.com/48d91bc5452fbc3cdc2b32f5c73d48e7)
<%= simple_format("佐藤　ましろさん＜br＞に100円分のギフトを贈ります") %>
[![Image from Gyazo](https://i.gyazo.com/65fa24d1cdf39327e2d04864c8a07b31.png)](https://gyazo.com/65fa24d1cdf39327e2d04864c8a07b31)
ファイル内の改行コードを確認する and 置換するには？

# 背景
Linux上で作成したファイルをWindows上で編集する時にデータが崩れたため、中身を確認したかった

# コード

``` sh
cat -e test.txt
a$
```

改行コードのLFは$、CRは^Mで表示されます。

Linux -> Windows

``` sh
sed -E "s/$/\r/g" test.txt
a^M$
```
PythonでHello Worldしてみる話

転職活動してるとpython pythonと言われるので、触れておいたほうがいいなと思い勉強です。

# Pythonのインストール
[Python公式](https://www.python.org/)からダウンロードとインストールを行います。

![スクリーンショット 2021-02-19 22.58.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/3b71c985-1053-7ce3-fa68-0247bd716d20.png)

installerをクリックしてインストールします。

```
%python -V
Python 2.7.16
```

~~と出てればインストールされています。~~
どうやら、macosのcatalinaだと2.x系表示があるみたいですね。
後日調べてみます。
[【Mac】Python のデフォルトをPython 2.7.xからPython 3.x.xにきちんと切り替えるんだ！戻してたまるか](https://dev.classmethod.jp/articles/python-path-settings/)

# Pythonの便利パッケージAnacondaのインストール
どうやら、Pythonのライブラリ化されたパッケージ（ディストリビューション）をまとめて落としてこれるような
ものとしてAnacondaというものがあるそうです。便利そうなのでインストールしてみます。
[Anaconda公式](https://www.anaconda.com/)

Individual Editionは、無料で提供されているそうです。
![スクリーンショット 2021-02-19 23.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/aed9b6ea-34b8-3786-05cb-7eaf84a7a7a2.png)

ちなみにインストール後は、環境設定をしないとちゃんと動かないそうなので、環境設定をする必要があります。
[MacOS版Anacondaのインストール](https://www.python.jp/install/anaconda/macos/install.html)
どうやら、Mac版の場合は、condaコマンド、というものを使えるようにする設定が必要だそうでです。

```
%ls -la /opt/anaconda3/bin
```
とするとcondaがあるのがわかります。

![スクリーンショット 2021-02-19 23.17.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/82e23cc5-d562-b2d3-89fa-a2df0fe8c89d.png)

macOs catalinaであればzshなので、下記のような設定です。

```
/opt/anaconda3/bin/conda init zsh
```
ターミナルを再起動して、

```
%conda
```
と打つと、認識するようになる。

# 対話モードでHello Worldしてみる
Pythonには対話モードなるものがあるらしく、そこで直接pythonを記述すれば、そのまま実行されるらしい。

```
%python
```
これで対話モードになる。
![スクリーンショット 2021-02-19 23.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/bbde6315-980e-87bf-4a3c-81423f79c2d8.png)

![スクリーンショット 2021-02-19 23.25.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/ac42ed9e-05b9-0365-0f85-ecdc545fa257.png)

で、そのままHello worldすることができました。


# Hello worldをファイルから実行する
なんだかんだいいつつ、ファイルからやっぱり実行したいですよね。

![スクリーンショット 2021-02-19 23.31.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/efda2324-9b3a-ccb8-f457-60f4f197f49a.png)

と一文書いたファイルをhelloworld.pyとして保存します。
実行するときは、

```
%python helloworld.py
Hello World
```

とこんな感じで実行されます。


# 参考
[Python入門](https://www.javadrive.jp/python/#section_install)
[備忘録] Raspberry Pi に ROS2 環境をセットアップ

# はじめに
ROS2 foxy を Raspberry Pi にインストールしましたが、最新版でまとまった情報がなかったため、備忘録として残しておきます。基本的に、公式ページの手順に沿っていけば、問題なくインストールできました。

# 環境
- Ubuntu 20.04 LTS
- ROS2 foxy
- Raspberry Pi 3

# Ubuntu のインストール

UbuntuのRaspberry Pi向け公式イメージを利用します。[公式ページ](https://ubuntu.com/download/raspberry-pi)の手順に沿って設定を行います。ROS2 foxy を使用する場合、Ubuntu 20.04 LTS (64bit) が良いと思います。

# Raspberry Pi の立ち上げ

上記手順通りに進め、ログインします。

- デフォルトのユーザ名: `ubuntu`
- デフォルトのパスワード: `ubuntu`

タイムゾーンの設定をします。

```console
$ timedatectl set-timezone Asia/Tokyo
```

# ROS2 のインストール

今回は、最新版であるfoxyを使用します。[公式ページ](https://index.ros.org/doc/ros2/Installation/Foxy/Linux-Install-Debians/)を参照してインストールします。基本的に手順通りに沿っていけばよいですが、以下の点を注意します。

- desktop と base の2種類存在するので、必要に応じて選択します

```console
$ sudo apt install ros-foxy-ros-base
```

- bashrc を設定します

```console
$ source /opt/ros/foxy/setup.bash
$ echo "source /opt/ros/foxy/setup.bash" >> ~/.bashrc
```

- ROS2 コマンドの補完ができるよう、argcomplete をインストールします

```console
$ sudo apt install -y python3-pip
$ pip3 install -U argcomplete
```

- ROS2 周辺ツールもインストールしておきます

```console
$ sudo apt install python3-colcon-common-extensions
# sudo apt install python3-rosdep2
```

# ビルド

アプリケーションをビルドして問題なく設定できていることを確認します。

```console
$ mkdir -p ~/ros2_ws/src
$ cd ~/ros2_ws/src
$ git clone <任意のリポジトリ>
$ colcon build
```
ESP32 で ピン状態変化割り込みで Guru Meditation Error

# 状況

スイッチにつなげたピンに状態変化割り込みを

```

  attachInterrupt(SWITCH_PIN, RELEASE1, RISING);
```

と設定して、スイッチを連打すると時々リセットがかかってしまう。


# 環境

- ESP32 by Espressif System Version 1.0.4
- Arduino 1.8.13
- ESP32 WROOM-32E


# エラー出力


リセット時、シリアルモニターに以下のエラーが出る

```

Guru Meditation Error: Core  1 panic'ed (Inte
rrupt wdt timeout on CPU1)

```

# コード



```

/* Core  1 panic'ed (Interrupt wdt timeout on CPU1)
 * Error Check program  
 */

#define SWITCH_PIN 35// or 12,13, 14,34,35
#define BEEP_PIN 2
#define DELAY 0   // if 0 then sometime error 
int timercounter = 0;
static int SWPushed = 0; 
static int SWPushing = 0;
void IRAM_ATTR RELEASE1() {
  static unsigned long nowtime;
  static unsigned long oldtime = 0;
    Serial.println("RELEASE");   //  sometime error
    nowtime = millis();
  if ( 150 < ( nowtime - oldtime )) {
    SWPushed = 1;
    SWPushing = 0;
  }
  oldtime = nowtime;
}
void setup() {
  Serial.begin(115200);
  pinMode(SWITCH_PIN, INPUT_PULLUP);
  attachInterrupt(SWITCH_PIN, RELEASE1, RISING);
  // when reboot attention
  pinMode(BEEP_PIN, OUTPUT);
  digitalWrite(BEEP_PIN, HIGH);  //  再起動した時にわかりやすいように音を鳴らす
  delay(4000);
  digitalWrite(BEEP_PIN, LOW);   
}
void loop()
{
  for ( int i = 0 ; i < 20 ; i++)
  {
    Serial.println("########");
    delay(DELAY);
  }
  delay(100);
}

```

# 調査

```

#define DELAY 0   // if 0 then sometime error 
```


これを  1 にするとエラーが起きなくなる。
あるいは、以下の割り込みルーチン内の Serial.println をコメントアウトするとエラーが起きなくなる。

```

void IRAM_ATTR RELEASE1() {
  static unsigned long nowtime;
  static unsigned long oldtime = 0;
    Serial.println("RELEASE");   //  sometime error
```

# 仮説

```

  for ( int i = 0 ; i < 20 ; i++)
  {
    Serial.println("########");
    delay(DELAY);
  }
```

メインルーチン中のこの箇所の DELAY が 0 だとシリアル出力しっぱなしになる。
割り込み中のシリアル出力と競合し、ウォッチドッグが発動してしまうのではないか。

# 対処

割り込み中のシリアル出力をコメントアウトで対処した。数万回スイッチを押したがリセットは起きなくなった。
OpenSSL::Cipher::CipherErrorの解決【超初心者】

超初心者につき違ったら本当にごめんなさい。備忘録です。

<h2>OpenSSL::Cipher::CipherErrorが出た</h2>
config/master.key: No such file or directoryとかのエラーが出た時も使えるかも。AWSにてEC2とかMySQLとかRDSとかで開発環境・本番環境の勉強中、OpenSSL::Cipher::CipherErrorが出ました。これは鍵の受け渡しが上手くいっていない時に出るエラーです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110799/4e93908a-d636-e0ff-73f7-ec9fca1e8d62.png" width=70%>
credentials.yml.encとmaster.keyが鍵穴と鍵の関係性になっているのですが、本番環境(私でいうとEC2)に鍵穴と鍵が無かったり、鍵穴と鍵が正しいものでは無かった時にOpenSSL::Cipher::CipherErrorが出ます。

↓これは正しく送られた時の流れ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110799/f1079369-f7e4-0057-fc1d-d819a45da004.png"width=70%>
<sup>わざわざmaster.keyだけは直接送るんですねえ</sup>
なんでこんな面倒なことするの!?というと、Git Hubは誰でも見れちゃうからキケン！という事で鍵だけはGit Hubからではなく直接送りましょうね～となっている（とりあえずそう習った）
<h2>解決方法</h2>
①開発環境（私だとcloud9）のconfig/credentials.yml.encを削除

```
②EDITOR=vim rails credentials:edit　#開発環境のターミナル
③scp -i ~/.ssh/EC2の鍵.pem config/master.key ec2-user@IPアドレス:アプリケーション名/config　#開発環境のターミナル
④新しくなったcredentials.yml.encをGit Hubへpush　#開発環境のターミナル
```
⑤本番環境（私だとEC2）に接続する

```
⑥[ec2-user@ip-xxx-xxx-xx-xx appname]$git pull origin master　#本番環境のアプリケーション内で行う
```

で解決すると思います。
もし本番環境のcredentials.yml.encとmaster.keyが開発環境と同じか確認する場合は

```terminal:
[ec2-user@ip-xxx-xxx-xx-xx appname]$find / -name credentials.yml
/home/ec2-user/appname/config/credentials.yml.enc #出力結果
[ec2-user@ip-xxx-xxx-xx-xx appname]$vi /home/ec2-user/appname/config/credentials.yml.enc
```
でviに入ると見れます。私はviに慣れてなくて超怖かったんですが、:q!で保存せず戻れるし、:wqで保存して出られるので急に画面が変わってびっくりしても落ち着けば大丈夫（たぶん！）

<h2>おまけ</h2>

```
bundle exec rails assets:precompile RAILS_ENV=production
```
をしたら、

```
rails aborted! LoadError: Could not load the 'mysq12' Active Record adapter. Ensure that the adapter is spelled correctly in config/database.yml and that you've added the necessary adapter gem to your Gemfile.
```
とエラーが出てうーん。。。と悩んだ話。Gemfileとかbundlerとか色々見てみたけど分からず･･･

<h2>おまけの結論</h2>
<h3>mysql12(mysqlじゅうに)になってました！！！</h3>
いや本当こんなこと！？いや私アホすぎん！？悩んだ５時間の無駄さ！色々調べたのに悔しい!

database.ymlとGemfileをviで直して解決しました･･･orz

打ち間違いには注意！エルと１の打ち間違いは10回以上やってますわよ？私よ、反省してくれ。
配列、繰り返し処理について

★配列・・・「変数」が一つしか値を扱えないに対し、配列を用いると複数の値をまとめて配列[]に保存可。
配列は仕切りのある箱のようなもの。

★連想配列・・・基本は配列と同じ仕様で、配列との違いは、個々の要素を管理するのにインデックス番号ではなく、「キー」と呼ばれる文字列などの値を指定することができる点。

$test = [];
上記のように変数に空の配列[]を代入して、
配列[$●●,$●●]のように複数値を入れることで、まとまった処理が可能になる。

例）$books = [];(変数に空の配列を代入)→連想配列or配列 $books[] = [$●●, $●●, $●●];　(それぞれの変数を配列にまとめて変数に入れる)
配列は[0,1,2]、連想配列は[キー => $●●, キー => $●●]呼び出せる(whileと組み合わせて0から順番に呼び出すこともできる)

★繰り返し処理
foreach文・・・whileがある条件を満たす限りループするに対して、配列または連想配列の全要素に対して、先頭のデータから順に繰り返し処理を行うための命令。

foreachは配列以外の要素も繰り返しされてしまったので、置く場所は繰り返したい処理のすぐ上に置くこと。
そうだ、SQLを勉強しよう13

#はじめに
最近はなんとなくSQL文を読むことは出来るけど、まだ書ける気がしないから、ちゃんと手を動かして学習しないといけないなと感じています。

##複数行副問い合わせ

検索の結果が、単一列の値となる副問い合わせです。
単一列とは、
列は一列だけ（属性は一つ）、
行は1行以上ということです。
簡単に言えば、縦一列！

単一行副問い合わせでは、検索の結果がたった一つの値でした。

##いつ使う？

- IN,ANY,ALL演算子でよく使います。
- WHERE句の条件式やSELECT文のFROM句

```sql
SELECT *
FROM 期末テスト集計
WHERE 教科 IN (SELECT 教科 FROM 中間テスト集計)
```

##最後に
複数行副問い合わせの検索結果は1つ以上を呼び出していることを意識する。
direnvとは？

## direnv

レポジトリ：https://github.com/direnv/direnv

## direnvが解決してくれること

ターミナルで出力した環境変数を、カレントディレクトリに移動した時だけ有効にしてくれる。

複数のアプリを同時に開発する時に便利そう。

## 導入
もう自分は前に導入してしまったので、導入方法は他を参照して下さい。
https://qiita.com/kompiro/items/5fc46089247a56243a62

## 使い方
環境変数を `.envrc` に書き込む。

```
$ echo export FOO=foo > .envrc
```

`direnv: error .envrc is blocked. Run direnv allow to approve its content. ` というエラー（セキュリティシステムが.envrcをロードするのをブロックする）がでたら、

```
$ direnv allow
```
で解決。

## 🚨注意！

`.envrc`　をGitHubにpushしない。そのために、`.gitignore`に`.envrc`を追加しておく。

## 参考記事
https://qiita.com/kompiro/items/5fc46089247a56243a62

## まとめ
ほぼ、参考記事のままになってしまいましたが、まとめたおかげで頭が整理されました。もし参考になればLGTMなどお願いします!
【LaTeX】表を限界まで横幅を埋めて表示する方法

重回帰分析の結果をstargazerで6つならべて表示しようとしたら、はみ出てしまった。
stargazerで「no.space = TRUE」オプションをオンにして空白を削っても収まらなかった。

どうすれば紙面からはみ出ないかを考えてみた。

結果として、textwidthを超えた幅のテーブルを中央に表示することができます。

# 手法
以下のアイデアで、中央に表を置くことができました。
- 表の部分だけ余白を減らして、センタリングできる範囲が広くなるようにする[^1]
- tabulrをセンタリングする
- 表の大きさを調整する

# LaTeXのソース
ライブラリを読み込んで、

```latex
\usepackage{chngpage}
```

tabularの前に

```latex
\begin{adjustwidth}{-1in}{-1in} \begin{center} \resizebox{1.2\textwidth}{!}{ %サイズ調整開始
```

tabularの後に

```latex
} \end{center} \end{adjustwidth} %サイズ調整終わり
```
と入れます。

```latex
\usepackage{chngpage}

....

\begin{table}[!htbp] \centering 
    \caption{Specifiacations} 
    \label{hyob_3} 
    \begin{adjustwidth}{-1in}{-1in} \begin{center} \resizebox{1.2\textwidth}{!}{ %サイズ調整開始
        \begin{tabular}{@{\extracolsep{5pt}}lcccccc} 
            \\[-1.8ex]\hline 
            \hline \\[-1.8ex] 
            & \multicolumn{6}{c}{\textit{Dependent variable:}} \\ 
           \cline{2-7} 
           \\[-1.8ex] & \multicolumn{6}{c}{log(price)} \\ 
           \\[-1.8ex] & (1) & (2) & (3) & (4) & (5) & (6)\\ 
           \hline \\[-1.8ex] 
           \hline 
           \hline \\[-1.8ex] 
           \textit{Note:}  & \multicolumn{6}{r}{$^{*}$p$<$0.1; $^{**}$p$<$0.05; $^{***}$p$<$0.01} \\ 
           \end{tabular}
  } \end{center} \end{adjustwidth} %サイズ調整終わり
\end{table} 
```

# 変化
## before
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/8a5e904b-e343-2d40-f0ae-e50b682457cc.png)

## after
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/8293374c-7db7-33ae-1e1e-7a1c8fc2b14d.png)

[^1]: https://stackoverflow.com/questions/722613/centering-a-table-wider-than-the-text-column
【初心者でもわかる】css1行！画像や要素を左右反転させたり上下反転させる方法

# どうも7noteです。上下左右の反転方法。

画像を配置するとき、左右を反転させた画像が必要な場合わざわざフォトショップなどの画像編集ツールを使う必要はありません。

CSSで簡単に反転することができます。

**今回使う画像**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/e7aebe76-7f71-a361-cc11-90291d4a1956.png)


## 左右を反転させる方法

```style.css
img {
  transform: scale(-1, 1); /* 左右反転 */
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/5487fab9-e191-033d-41fa-3995c4df3f9d.png)

## 上下を反転させる方法

```style.css
img {
  transform: scale(1, -1); /* 上下反転 */
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/1bbf93fb-7366-c363-f780-2354ea40e3dc.png)

## 上下左右を反転させる方法（逆さま）

```style.css
img {
  transform: scale(-1, -1);   /* 上下左右反転 */
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/3ddbd58e-bb23-92bc-79e7-43fb7348fefc.png)


これは逆さまになっているのと同じなので、rotateでも同じことができます。

```style.css
img {
  transform: rotate(180deg); /* 逆さま */
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/3ddbd58e-bb23-92bc-79e7-43fb7348fefc.png)
※上と同じ

## まとめ

普通は反転なんかあまり使わないかもしれないですが、左右対称のものなどは画像パーツ1つだけで対応できたりしますね。
他にもオシャレに見せたり、アニメーションと組み合わせても面白いかもしれません。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
DockerでPortainerを動かす

## portainerって何？

Docker環境管理ツールです
https://www.portainer.io/

## 対象

Dockerコマンド打つのめんどくさい…
sshするのめんどくさい…
的な人向け

## 前提

Dockerのインストールは済ませておくこと

## インストール

```bash
$ docker run \
    --detach \
    --publish 9000:9000 \
    --name portainer \
    --restart always \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume portainer_data:/data \
    portainer/portainer-ce
```

## 確認

`http://localhost:9000`にアクセスし、管理画面が出てくれば成功
最短Docker初回インストール

# Docker初回インストール

## なんだかんだで公式が一番

ubuntu20.04に入れました
参考
https://docs.docker.com/engine/install/ubuntu/

```bash
$ sudo apt-get remove docker docker-engine docker.io containerd runc
```

```bash
$ sudo apt-get update

$ sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
```

```bash
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

```bash
$ sudo apt-key fingerprint 0EBFCD88

pub   rsa4096 2017-02-22 [SCEA]
      9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid           [ unknown] Docker Release (CE deb) <docker@docker.com>
sub   rsa4096 2017-02-22 [S]
```

```bash
$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
```

```bash
 $ sudo apt-get update
 $ sudo apt-get install docker-ce docker-ce-cli containerd.io
```

```bash
$ sudo docker run hello-world
```
M5Stack UIFlow MicroPython で新型コロナウイルス接触確認アプリ検出

#概要

M5Stack UIFlow (最新版は 1.7.2) で BLE を使っての、いろいろ接続確認。今回は 新型コロナウイルス接触確認アプリ COCOA を検出します。いくつかあるArduinoでの実装例を参考にしながら、MicroPython での実装です。


- BLE のスキャンを行って COCOA のサービスUUID(0xfd6f) を持つデバイスのアドレスおよび rssi(電波強度) を取得
- rssi の値の降順で表示
- 上記処理を繰り返す

#環境

- M5Stack Core2 (UIFlow 1.7.2)

#実行結果

![IMG_6141.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133064/d5d0a47b-efe2-d6c4-99c8-de7f26b8a67f.jpeg)


#プログラム

プログラムの bluetooth 関連の実装は、公式 MicroPython の例 [examples/bluetooth](https://github.com/micropython/micropython/tree/master/examples/bluetooth) を参考にしています。

表示は M5Label を使ってみましたが、プロポーショナルフォントしかないので、今回のような表示には不向きかも。
lcd.print() を使った方が見やすい表示になる気がします。

```python
from micropython import const
from ble.ble_advertising import decode_services
import bluetooth
import ubinascii
import struct
import time

_IRQ_SCAN_RESULT = const(5)
_IRQ_SCAN_DONE = const(6)
_ADV_NONCONN_IND = const(0x03)
_COCOA_UUID = bluetooth.UUID(0xfd6f)

class BLECentral:
    def __init__(self, ble):
        self._ble = ble
        self._cocoa_list = {}
        self._scanning = False
        self._ble.active(True)
        self._ble.irq(self._irq)

    def _irq(self, event, data):
      if event == _IRQ_SCAN_RESULT:
        addr_type, addr, adv_type, rssi, adv_data = data
        if adv_type == _ADV_NONCONN_IND and _COCOA_UUID in decode_services(adv_data):
          self._cocoa_list[ubinascii.hexlify(addr).decode()] = rssi
      elif event == _IRQ_SCAN_DONE:
        self._scanning = False

    def scan(self, duration=2000):
        self._cocoa_list = {}
        self._scanning = True
        self._ble.gap_scan(duration, 30000, 30000)

    def cocoa_list(self):
        return self._cocoa_list

    def is_scanning(self):
        return self._scanning


from m5stack import *
from m5stack_ui import *
from uiflow import *

screen = M5Screen()
screen.clean_screen()
screen.set_screen_bg_color(0xFFFFFF)

count_label = M5Label('COCOA Count: ', x=20, y=10, font=FONT_MONT_24, color=0x000, parent=None)
cocoa_count = M5Label('0', x=240, y=10, font=FONT_MONT_24, color=0x000, parent=None)
cocoa_addr = []
cocoa_rssi = []
for i in range(5):
  cocoa_addr.append(M5Label('------------', x=20, y=50+35*i, font=FONT_MONT_24, color=0x000, parent=None))
  cocoa_rssi.append(M5Label('---', x=240, y=50+35*i, font=FONT_MONT_24, color=0x000, parent=None))

ble = bluetooth.BLE()
central = BLECentral(ble)

for n in range(20):
    print('===== scan begin =====', n)
    
    central.scan(3000)
    while central.is_scanning():
        time.sleep_ms(100)
    
    cocoa_count.set_text(str(len(central.cocoa_list())))
    cocoa_list = sorted(central.cocoa_list().items(), key=lambda x:x[1], reverse=True)[:len(cocoa_addr)]
    for i, cocoa in enumerate(cocoa_list):
        print(i, cocoa[0], cocoa[1])
        cocoa_addr[i].set_text(cocoa[0])
        cocoa_rssi[i].set_text(str(cocoa[1]))
    for i in range(len(cocoa_list), len(cocoa_addr)):
        print(i, '------------', '---')
        cocoa_addr[i].set_text('------------')
        cocoa_rssi[i].set_text('---')

    time.sleep_ms(2000)
```
[Ansible]moleculeでIdempotence testを除外する

shellやcommandモジュールを使用していて、moleculeでtest実行時に下記エラーが出て失敗してしまう場合

```
CRITICAL Idempotence test failed because of the following tasks:
```


[公式ドキュメント](https://molecule.readthedocs.io/en/latest/configuration.html#id7)

>Molecule will skip tasks which are tagged with either molecule-notest or notest. >With the tag molecule-idempotence-notest tasks are only skipped during the >idempotence action step.

下記のようにtagを付けたタスクでIdempotence testをスキップできる。

```yaml

- name: Update sudo
  command:
    cmd: "rpm -Fvh ~/sudo-1.9.5-3.el6.x86_64.rpm"
  become: "yes"
  tags:
    - molecule-idempotence-notest
```
Pardot のプロセスオートメーション (Salesforce Classic) ⇒ オートメーションツールの使用開始

１．オートメーションツールのうち、マーケティング要素から直接自動化できるのはどれですか?
２．Pardot でワークフローを自動化する 2 つの理由はどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/be0dbc50-0260-671d-e1fa-29949599bf0d.png)
concrete5 でエラー画面を強制的に表示するよう config テキストファイルを作ってアップロードして設定する方法


concrete5 サイトで、エラー時のデバッグを強制的に表示させるようにするための config ファイルのオーバーライドです。

例えばサイトでエラーが表示されて、管理画面にもログインできず、何も確認できない場合、この `application/config/concrete.php` ファイルをサーバーにアップロードしてください。

ログインすることができらら管理画面からデバッグモードをオンにすることはできますが、それもできなかい場合の対策です。

GitHub のレポジトリにアップしています。
https://github.com/katzueno/concrete5_config_debug_mode/blob/master/application/config/concrete.php


また解決した後、`config/concrete.php` ファイルを削除するのを忘れずにお願いします。
Eclipse + javaFX を使えるようにする（javaSE15）

メモ

https://gluonhq.com/products/javafx/
【JavaFX Windows SDK】をDLしてどこかに配置&解凍


run > run configurations
java application > Main
Auguments
VM arguments
--module-path "C:\Program Files\Java\javafx-sdk-11.0.2\lib" --add-modules javafx.controls,javafx.fxml


window > preference
java > Build Path > user libraries
javafx-sdk-11.0.2\libのjarを追加


プロジェクトを作るときにCreate module-info.java file のチェックを外す。
AWS ELBとは？

# ELBとは？
**「アクセスを複数台のEC2インスタンスに分散する役割を持つ」**

アクセスを分散させる目的
**①負荷分散**
**②可用性確保：他のインスタンスに障害が発生した場合でも、他のインスタンスでサービスを継続して提供できる**

##シングルAZ構成とマルチAZ構成
複数EC2インスタンスが存在する場合、ドメイン名にELB作成時に各AZのELBのグローバルIPアドレスが登録される。

**DNSラウンドロビン方式**
ELBにリクエスト　→　各AZのELBにリクエストが分散される　→　AZで稼働するEC2インスタンスにリクエスト分散
![スクリーンショット 2021-02-19 20.44.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/6aaab126-35f7-dc5a-4fcc-b4d2ae991106.png)

![スクリーンショット 2021-02-19 20.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/3ef51d81-3cf8-374e-a814-d91c1f11e0bd.png)




**Cross-Zone Load Balancing(クロスゾーン負荷分散)**
各AZのELBは全てのAZに存在するEC2インスタンスにリクエストが分散できるようになる。
![スクリーンショット 2021-02-19 21.02.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/f3655a4f-60ad-8d55-e563-d5585fb94786.png)

**External-ELB**：インターネットからのリクエストを受け付ける
**Internal-ELB**：VPCサブネット内のリクエストのみを受け付ける

##ヘルスチェック
インスタンスの状態を監視することが可能
**ポート監視**：対象のポートがListen状態になっているか監視
**サービス監視**：HTTP.,HTTPSの場合HTMLファイルへのアクセス可否を確認

##スティッキーセッション
**同じユーザからきたリクエストは同じインスタンスで処理する機能。**

#ELBの作成
**①ロードバランサー選択
②ロードバランサーの作成選択
③Application Load Balancer選択**

![スクリーンショット 2021-02-19 21.19.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/6173ccc2-4fac-6ae3-1380-fe21b4e3459b.png)






![スクリーンショット 2021-02-19 21.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/51c2076f-8873-16d9-b387-ce7fcf15d9b0.png)




**④各項目設定**
**名前**：名前記述
**スキーマ**：External-ELBなら「インターネット向け」、Internal-ELBなら「内部」にチェック
IPアドレスタイプ：サポートするIPアドレスタイプを選択。

**⑤リスナー選択**
**リスナー**：ELBで受信するプロトコルやポート、ELBからインスタンスに連携するプロトコルやポートを設定する。

![スクリーンショット 2021-02-19 21.22.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/b3b90654-746e-b42f-2626-9b73449b0a66.png)

**⑥アベイラビリティゾーン選択**
ELBを作成するVPCとサブネット選択
![スクリーンショット 2021-02-19 21.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/0278ac9a-5278-2d6f-e37b-b1d9ec9dd5ca.png)

**⑦セキュリティグループ選択**
![スクリーンショット 2021-02-19 21.23.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/2683bada-bd65-b2e2-798f-dc8598e12731.png)

**⑧ターゲットグループ設定**
![スクリーンショット 2021-02-19 21.25.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/b9475e25-b9bc-2e3e-38b0-e406e630a299.png)

**⑨ヘルスチェック設定**
**プロトコル**：使用するもの選択
**パス**：ヘルスチェックのためにアクセスするパス指定。
**正常のしきい値**：インスタンスが正常であると判断するまでのヘルスチェック回数指定
**非正常のしきい値**：インスタンスが異常であると判断するまでのヘルスチェック回数指定
**タイムアウト**：結果がインスタンスから返ってくるまでの応答待ち時間指定
**間隔**：ヘルスチェックの実行間隔指定
**成功コード**：成功時に返すコード番号指定
![スクリーンショット 2021-02-19 21.25.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/5ff66ac7-5e28-bc21-f198-ddf8fd1e6d15.png)

**⑩登録するインスタンス選択**
**⑪登録済みに追加**
![スクリーンショット 2021-02-19 21.48.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/b4187701-7275-e3e3-93e8-b3558857d431.png)

**⑫インスタンス選択**
![スクリーンショット 2021-02-19 21.48.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/3358a18a-e2b2-9d93-4353-70119de24f07.png)


**確認**をクリックし、確認画面が表示されるので**作成をクリックしてELB作成完了！！！！**
【Swift5】カスタムクラスをUserDefaultsへ保存する

# カスタムクラスでスマートにコーディングするぜ！

みなさんご存知の通り、Swiftにももちろんカスタムクラスを作る機能があります。
しかし！カスタムクラスはUserDefaultsに直接保存できない！~~（Realm使えよ）~~
そこでSwift5でのUserDefalutsへのカスタムクラス保存をまとめておきます。


# カスタムクラスをバイナリ形式に変換する
```swift:Task.swift
import UIKit

class Task: NSObject, NSCoding {
    var name: String!
    var date: Date!
    
    // 初期化
    init(id: Int, name: String, date: Date) {
        self.name = name
        self.date = date
    }

    // ここから変換用コード
    // NSKeyedArchiverで呼び出されるエンコード処理
    func encode(with coder: NSCoder) {
        coder.encode(self.name, forKey: "name")
        coder.encode(self.date, forKey: "date")
    }
    
    // NSKeyedUnarchiverで呼び出されるデコード処理
    required init?(coder: NSCoder) {
        name = coder.decodeObject(forKey: "name") as? String
        date = coder.decodeObject(forKey: "date") as? Date
    }
}
```

やり方は、いつものカスタムクラスに`encode`と`decode`に関する処理を書いておくだけです。


# 保存
```swift:ViewController.swift
// 保存するカスタムクラスを含む配列
var tasksArray: [Task] = []
let task = Task.init(name: "タスク名", date: Date())
tasksArray.append(task)

// バイナリ形式にエンコード
let data = try! NSKeyedArchiver.archivedData(withRootObject: tasksArray, requiringSecureCoding: false)

// 変換したものをUserDefaultsへ保存
UserDefaults.standard.set(tasksArrayData, forKey: "tasksArray")
```


# 取得
```swift:ViewController.swift
// バイナリ形式のものをUserDefaultsから取得
let data = UserDefaults.standard.object(forKey: "tasksArray") as! Data

// 取得したものをデコード
tasksArray = try! NSKeyedUnarchiver.unarchiveTopLevelObjectWithData(data) as! [Task]
```

こんな感じ。


# おしまい
ほんとはtryで失敗した時のエラーハンドリングもした方が丁寧です。
備忘録:DjangoとReactで簡易Youtubeを作成するためにやった事 

#概要
- [DjangoとReactで簡易Youtubeを作る](https://qiita.com/enuii3/items/d0621e6029b7e9b30709)👈今ここ

- [Anacondaでプロジェクトを作成](https://qiita.com/ezaqiita/items/c109d9b8e21a1db42085)

- [バックエンドの作成](https://qiita.com/enuii3/items/1a9da78fdc080fe2adc5)

- [フロントエンドの作成](https://qiita.com/enuii3/items/d70eaf1860229004358c)

##tips
- makemigrationsはマイグレーションファイルの作成コマンド
- migrateはデータベースに反映させるコマンド
- 標準だとローカル環境でsqlite3を使用するようになっている
- 本番環境だとPostgresQLを使用するようになっている？（好きなものが使える）
- os.path.join(BASE_URL, 'media')はBASE_URL / 'media'と同じ
- 同期処理は一言でいうとシングルタスク、非同期処理はマルチタスク。同期処理は一つの処理が完了してから次の処理を実行するのに対して、非同期処理は複数のタスクを同時に熟す処理のこと。(例 コンビニの店員が、商品を温めながら会計をするのか 、温めが終わってから会計をするのかの違い)