OmniAICreator/Qiita-1.07M huggingface dataset:
AtCoder ARC111 B - Reversible Cards: 最大マッチングアプローチ

https://atcoder.jp/contests/arc111/tasks/arc111_b

最大マッチングなの！？という問題。想定解ではDSU解が紹介されていたので別解としての記録記事。

# 題意
最大マッチングとして良く出てくる典型的な結婚問題として言い換えます。

- N人の人が（このN人とは別の）$4*10^5$人の相手に求婚しようとしています。$(1 \leq N \leq 2*10^5)$
- 各N人は２名$(a, b)$に求婚する($a=b$の事もあります)。
- 求婚された側は1人としか結婚できません。
- 結婚が成立する最大のペアは何組か？

# アプローチと実装のアプローチ
最大マッチングとして考えます。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30938/51ec963b-7b6d-93a5-7c88-e18f61fb7882.png width=50%>

図のように左右にソース$s$とゴール$t$を用意します。二部グラフの左側はカードのノードで右側を書かれた値のノードとして作ります。

ソース$s$から各カード(左の各ノード)に1の流量を流します。これで左のノードは右のノードに1しかフローを流せません。(つまりどちらの値にしかフローを流せません)
カード(左)のノードからはそれぞれの$a,b$である右のノードに対して流量1の辺を張ります。$a=b$の場合、片方にしかフローは流せないので2本の辺を張って良いです。
全右のノードからは$t$に対して流量1の辺を張ります。たくさんの左のノードから選ばれても$t$には1しか流せません。
$t$に到達できるフローは、何らかの左側のノードからの入力がもらえる右側のノードの数(各流量は最大1なので)と言えます。

$s -> t$のmax-flowが答えです。結婚問題での成立したペアの数です。

# 実装
```C++
#include <bits/stdc++.h>
#include <atcoder/all>
#define FOR(i, begin, end) for(int i=(begin),i##_end_=(end);i<i##_end_;i++)
#define REP(i, n) FOR(i,0,n)
using namespace std;
using namespace atcoder;
const int numNode = 2*100000;
const int numColor = 4 * 100000;
const int numGraph = numNode + numColor + 100;
const int snode = numGraph - 3;
const int tnode = numGraph - 2;
int main(int argc, char *argv[]) {
    int n, a, b;
    cin >> n;
    mf_graph<int> mf(numGraph);
    REP(i, n){
        cin >> a >> b;
        a += numNode; b += numNode;
        mf.add_edge(snode, i, 1);
        mf.add_edge(i, a, 1);
        mf.add_edge(i, b, 1);
    }
    FOR(i, numNode, numNode + numColor + 2){
        mf.add_edge(i, tnode, 1);
    }
    cout << mf.flow(snode, tnode) << endl;
}
```
https://atcoder.jp/contests/arc111/submissions/19309625
tinkercadでURLを共有する方法

# この記事でできること
- tinkercadで編集しているプロジェクトを、第三者へ共有することができます。

# やり方
- 下図のように、tinkercadの画面の右上にある、「送信先」を選択します。
![a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1f1fd2af-03a8-0613-68a2-52a1c6109cbc.png)

- 下図のように、「送信」ウィンドウが表示されます。
下の方へスクロールして、「IMまたは電子メールを介して共有」欄にある、「ユーザを招待」を選択します。
![a02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/c17167ff-8521-1c68-f924-6872f6122d5e.png)

- 下図のように、「コラボレート」ウィンドウが表示されます。
「新しいリンクを生成」を選択します。
![a03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3b717b48-0d2a-d551-2193-752e78a59ba7.png)

- 下図のように、「リンクをコピー」が表示されます。選択すると、「リンクがコピーされました」と表示され、クリップボードにURLが貼り付けられました。
その後、メールなどで、「貼り付け」や「ctrl + V」などでペーストすると、URLを貼りつけることができます。
![a04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/7c00e9c8-78ef-085a-3fbb-562b3edeaa2a.png)
Electronアプリで偽クライアントへの対応を考える

# 背景

[前回の記事](https://qiita.com/yusuke-ka/items/6d2e6171f996dd4c01c1)で、エンドユーザーの端末に秘密鍵を保持することなく、署名付きJWTを利用したクライアント認証を導入しようと頑張ってみたけど、結局、ユーザーの端末に偽のクライアントがインストールされてしまった場合には対応できないことが分かった。

ということで、今回はクライアント端末上のElectronアプリと中継サーバーの間で、正しいクライアントかどうかを検証することが出来ないものか考えてみた。

※(注意)自学習を目的として書いています。この記事に記載の内容が最適なやり方とは限りません。

# 偽のクライアントへの対応

[前回までの内容](https://qiita.com/yusuke-ka/items/6d2e6171f996dd4c01c1)を前提に、パブリックなネイティブアプリで、偽クライアントに対応する方法を検討してみる。

## 攻撃について

対応したいと考えている攻撃は、以下のような感じの攻撃。

1. 悪意のあるユーザーが、正規のクライアントアプリを入手後、それを解析して(必要であれば、自分のアカウントを使って)、クライアントIDやリクエスト先のURLを記録し、それを使って、偽のクライアントアプリを作成する。
2. 何らかの方法で、被害者のPCに偽のクライアントアプリをインストールさせる。
3. 被害者は偽のクライアントアプリと知らずに、正規のエンドポイントで認証して認可コードを取得し、さらにアクセストークンまで取得する。
4. 偽のクライアントアプリは、被害者のアクセストークンを攻撃者に送る。もしくは、アクセストークンで被害者に取得させた被害者の秘匿情報を攻撃者に送る。

## 対策について

思いついた対策案を書いてみる。

一応これも、前回試しに作ってみた[構成](https://qiita.com/yusuke-ka/items/6d2e6171f996dd4c01c1#%E6%A7%8B%E6%88%90%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8)が前提になっている。

1. アプリのインストーラーはログイン済みのwebアプリ経由でのダウンロードとし、ダウンロード時に各インストーラーごとに一意なID(以降、クライアントアプリIDとする)をサーバー側で発行し、ログイン中のユーザーのIDを紐づけて、中継サーバー側に保存する。
2. クライアントアプリのインストール時、クライアント端末にクライアントアプリIDを保存する。
3. クライアントアプリは、トークンリクエスト時に、保存したクライアントアプリIDを一緒に中継サーバーに送る。
4. 中継サーバーは、トークンエンドポイントから取得されたトークンの中の「sub」が、クライアントアプリIDに紐づくユーザーIDと一致しているかをチェックし、一致していなければ、トークンをクライアントアプリに返さない。

※補足：アプリをダウンロードしたユーザーしか使えないことになるが、webクライアントで利用ユーザー追加みたいな機能を用意すれば、たぶん対応できる。


## 対策の説明

攻撃者は攻撃者の端末にインストールした正規クライアントアプリのクライアントアプリIDは、コードを解読すれば取得可能なので、偽のアプリを使って、そのクライアントアプリIDを被害者に使わせることは可能と考えられる。

ただ、偽のクライアントアプリからのトークンリクエストで、攻撃者のクライアントアプリIDが中継サーバーに送られてきたら、中継サーバー側はクライアントアプリIDに紐づく「sub」の値が違っていることに気づける(もちろんクライアントアプリIDが送られてこなければリクエストを受け付けないようにする)。

しかしながら、攻撃者が被害者のクライアントアプリIDを入手出来たら破綻してしまうので、前提として、被害者の端末にインストールした偽のクライアントアプリなどから、被害者のクライアントアプリIDを入手するのが困難である必要がある。

## 課題

どうやってクライアントアプリIDを安全にクライアントの端末に保存するかが一番の課題。

keytarを使うと、同じ端末を利用する他のユーザーからは保護されるけど、偽アプリがサービス名を知っている前提であれば、被害者ユーザー自身がインストールした偽アプリからは保護できないことが分かった(少なくともwindowsでは)。

実際に別のアプリID、別のアプリ名を指定したwindows用electronアプリのインストーラーを２つ作成してインストールしたところ、同じサービス名、アカウントを指定すれば、相互にkeytarに保存した値を読み書き出来てしまった。

今のところ、思いつく対策案としては以下のような感じ。

インストーラーダウンロード時に毎回ビルドを走らせ、都度インストーラーが生成されるようにして、コード内にクライアントアプリIDを埋め込んだうえで、コードを難読化するようにする。

こうすれば、直接アクセスできない端末のクライアントアプリIDを取得するのは難しく(めんどくさく)なりそうな気がする。

# さいごに

まぁ、結局のところ、完璧に保護するのは難しく、漏れたときのリスクを鑑みて、どこまでやるかっていう話なのかな。

そもそも、「OIDCとかの仕様で対応できるから、こんなことしなくても大丈夫」みたいな話なら良いんですが、調べてみたけど、このケースに対応できるものがあるのか分からなかった。。。

2021/01/12追記
OIDCの仕様を見ていて、「7.  Self-Issued OpenID Provider」あたりが、今回のようなケースで利用できるんじゃないかと思った。今度調べてみようと思う。
https://openid.net/specs/openid-connect-core-1_0.html#SelfIssued
Reactでfirebaseのconfig.jsファイルにあるappIdとstorageBucketを隠す方法【備忘録】

# 初めに
初心者です。
ある日Reactの勉強のためfirebaseを使用し個人をアプリを作成。
知人にレビューしてもらったところappIdとstorageBucketが公開されており隠す必要があると指摘を受けました。
どうやらセキュリティ的にかなりまずいと...

# 公開しないようにするには

ズバリ環境変数を使用して解決しました。

###1　.rootディレクトリ直下に_.env_ファイルを作成
 
root/
├ src/
　│　└ firebase/
　│　　　└ config.js/
├ env

###2 ._env_ファイルの中身を以下のように記述
create react appの公式サイトを見るとReactで環境変数を作る前は```REACT_APP_```を変数の頭に記載する必要があるため変数名1つ1つに加える。

```javascript:.env
REACT_APP_apiKey="AAAAAAAAAAAAAAAAAAAA"
REACT_APP_authDomain= "BBBBBBBBBBBBBB"
REACT_APP_projectId="CCCCCCCCCCCCCCC"
REACT_APP_storageBucket="DDDDDDDDDDDDDD"
REACT_APP_messagingSenderId="EEEEEEEEEEE"
REACT_APP_appId="1:1111111111:web:1111111111111"
REACT_APP_measurementId="FFFFFFFFFFFF"
```

###3 環境変数を使ってconfig.jsファイルappId等を記述する
他のファイルで環境変数を呼び出す際は変数名の前に```process.env.```を加えてあげればいい

```javascript:.src/firebase/config.js
const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};

export {firebaseConfig};
```

###最後に忘れずに._env_ファイルを.gitigoreに加えてあげる


```javascript:.gitignore
/node_modules
/.pnp
.pnp.js
/coverage
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
.env
```

これでGithubに載せた時に環境変数のおかげでappIdとstorageBucketが公開されないようになりましたね！

>参考：Create React App
https://create-react-app.dev/docs/adding-custom-environment-variables/#referencing-environment-variables-in-the-html
Autoware/ROSのコマンド・Tips・まとめ

# Autoware Docker起動
```
$ sudo ./run.sh
```

# Autoware起動
```
$ cd Autoware
$ source install/setup.bash
$ roslaunch runtime_manager runtime_manager.launch &
```

# TF構造の表示
```
$ rosrun tf view_frames
```

# ノードの可視化コマンド
```
$ rosrun rqt_graph rqt_graph
```

# ROS coreの終了
psで確認して、pid指定してkillする。

# ROSの構造
* ノード：各要素
* トピック：要素から流れる情報/バス
* フレーム：座標系。TFで変換し、ツリー構造に結びつける

# 要確認
AutowareDockerはstopや再起動すると消える？

# 推奨ハードウェア
Linuxマシン
CPU cores: i7以上。8コア。
メモリ: 32GB以上。
GPU NVIDIA Geforce GTX 1080 以上

# SLAM
一覧
https://qiita.com/saitosasaki/items/493c1059ffe3178166bc

# 権限一括変更
```
chmod -R a=rX,u+w path/to/dir
```
ディレクトリまたは実行可能ファイルが 755 に、それ以外が 644 になる。
Tensorflowで自作のデータセットで学習する

# Keras公式のデータセットの構造を確認
```python:test
fashion_mnist = keras.datasets.fashion_mnist
(train_images, train_labels), (test_images, test_labels) = fashion_mnist.load_data()
```

ダウンロードすると実体は下記に保存される

```
~/.keras/datasets/fashion-mnist/
```

# 自作データセット用の画像を準備する
Jpegで手頃な大きさのものを用意

# 用意した画像を読み込んで、学習できる配列にする
4枚の画像を読み込んでみる。
np.arrayで変換しなきゃいけないのはみんなハマるようなので要注意！

```command:エラーの例
ValueError: Failed to find data adapter that can handle input: <class 'numpy.ndarray'>, (<class 'list'> containing values of types {"<class 'int'>"})
```

```python
#ラベル
train_labels = [0, 0, 1, 1]
train_labels = np.array(train_labels) #np.array形式にしないと読み込めないので

#画像を読み込む
train_images = []
for i in range(4):
    print("/img/img"+str(i+1)+".jpeg")
    img_path = "/img/img"+str(i+1)+".jpeg"
    img_raw = tf.io.read_file(img_path)
    img_tensor = tf.image.decode_image(img_raw)
    img_final = tf.image.resize(img_tensor, [28, 28])
    img_gray = tf.image.rgb_to_grayscale(img_final)
    img_squeeze = tf.squeeze(img_gray)
    train_images.append(img_squeeze) #配列に追加していく

train_images = np.array(train_images) #np.array形式にしないと読み込めないので
train_images = train_images / 255.0

```

あれ、、あんまり正しく判定できてない。学習データがよくないかも。。
画像処理で二値化とか、境界線くっきりとかした方がよいか。

出力層が2だと判定ミス、10だと正解。ただ差が明確についてない。
Heapqを使ってみた

# はじめに
pythonのheapqというライブラリを使って，ソートを行う方法を学んだのでメモしました．

# heapqとは
* heapq: ヒープキューアルゴリズムを利用できるライブラリ．ヒープキューは優先度キューの一種．全ての親の値が，その全ての子の値以下であるようなツリー構造を持ち，その構造を利用して効率的に要素を取り出す．
* キュー：複数要素の並び
* 優先度キュー：ある優先度に従って要素を取り出す仕組みを持つキュー．

ヒープキューは，主にソートに用いられる（ヒープソート）．

実行時間については，
全ての値の大小を比較するバブルソートの場合，$O(N^2)$．
対して，ヒープソートの場合，$O(NlogN)$．

# heapqを使って，leetcodeの問題を解いてみた
問題リンク：
https://leetcode.com/problems/kth-largest-element-in-a-stream/discuss/482591/Simple-Python-Solution-or-Maintain-Min-Heap-whose-size-is-always-kept-at-k

```python

import heapq

class KthLargest:
    def __init__(self, k: int, nums: List[int]):
        self.heap = []
        self.k = k
        
        for num in nums:
            self.add(num)
        
    def add(self, val: int) -> int:
        
        heapq.heappush(self.heap, val)
        
        if len(self.heap) > self.k:
            heapq.heappop(self.heap)
            
        return self.heap[0]

```
ラズパイ メモ

自分用。随時更新していきます。

# サーボを動かす
https://jellyware.jp/kurage/raspi/servo.html
サーボは5v/GNDと、GPIO4番ピンに指す。
pythonでGPIOを有効にし、DutyCycleで角度を指定する。

# ディスク使用量を確認する
```
$ df -lh
```

# Ubuntuをインストールしてsshログインする
Raspbianでなく、Ubuntu Desktop 20.10をインストール。
ヘッドアップインストールしようとしたが、connection refused。
ssh serverがなかったようで、下記でインストール。

```
$ sudo apt-get install openssh-server
```

# UbuntuサーバにDesktop表示を追加する
```
$ sudo apt-get install ubuntu-desktop
```
WSL2へのDockerインストール

# WSL2へのDockerインストール

## Docker Desktopをインストール
https://www.docker.com/products/docker-desktop

### インストール時
```
Enable WSL 2 Windows Features
```
がチェックされている事を確認する。

### インストール後歯車アイコンから設定をを起動
```
Resouces
    Configure which WSL 2 distros you want to access Docker from
        Enable integration with my default WSL distro
    Enable integration with additional distros:
        Ubuntu-20.04
```
にチェックがついている事を確認
チェックをつけた場合は再起動。

#### Ubuntu-20.04へログインして動作確認
```bash
docker version
docker-compose version
```
【個人開発】テストユーザーを募集するサイト作ってみた！

#初めに
前、[MENTA](https://menta.work/)の作成者さんが動画で「webアプリは公開してからじゃないと使われるかわからない」って言っていたので
ベータ版専門のアプリ宣伝サイトをつくってみました。
そんなことサイトもまだベータ版でデザインは相当雑です。使われるようになってきたらデザインも変更しますし機能も追加します。

URL:
https://testuser-b.herokuapp.com/

#テストユーザーはなぜ必要？
webアプリは公開しないと需要があるかわかりません。 
「市場調査で調べられる」と思うかもしれないが口先だけ使うと言われただけで、公開したあとその人たちが本当に使うかはわからないんです。

だから、本当に需要があるかどうかは実際に公開してみるしかないのですが
何か月もかけて開発したのに誰にも使われなかった...というのは悲しすぎます。
 webアプリは当たる確率の方が低いです（6%程)

だからヒットしなくてもダメージが少ないようベータ版を作ればいいのですが なかなか使ってもらうのは難しいです。webアプリは万全の状態で宣伝するものなので 今あるwebアプリの宣伝所はベータ版をなかなか受け入れてくれません。 そこでこのTest User βが生まれました。

![test-user.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/b19e2320-cc81-5b4b-98a3-6e865dd7622d.png)

使った技術
rails6
ruby2.7
heroku free（スリープしないよう設定している）

開発時間は数時間
ロゴは自作
開発費用もサーバー代も無料です。

#まとめ
webアプリは公開してからじゃないと使われるかわからない
市場調査だけではわからない

何がともあれ使ってみてください。お願いします(^_-)-☆
URL:
https://testuser-b.herokuapp.com/

僕のツイッターもお願いします。
開発中に気づいたことをつぶやいてます。
https://twitter.com/Yuuki49079799
RailsでExtend(Concerns)を利用してControllerの処理を共通化する。

## 背景
記事一覧をPage#homeに出力したかった。
@ posts = Post.allのデータは、Postモデル、コントローラにある。Pageモデル、コントローラには無い。
PostのデータをPageに持ってくるためにはどうすればいいかググっていた。


## 解決
 この情報をPageに持って行きたい。

```ruby:posts_controller.rb
class PostsController < ApplicationController

    def index
      ＠posts = Post.all
    end
end

```
Pageに取り込む。

```ruby:Page.rb
class Page < ApplicationRecord

   + extend Post::Models
   
end
```

PageでPostの情報を定義してみる。

```ruby:pages_controller.rb
def home
  @posts = Post.all
end
```

出力された。

```ruby:home.html.erb
<%= @posts.each do |p| %>
 <%= p.thumbnail %>
 <%= p.title %> 
 <%= p.tag %> 
 <%= p.content %> 
<% end %> 
```


もっとうまく説明している記事あります。↓
https://github.com/mc-chinju/qiita_clone/commit/262a6178d5a2eb77c6f507cf9386cb61825bfbaf
https://medium.com/@yavuz255/rake-aborted-2da1233a4561
https://railsguides.jp/active_model_basics.html






他のやり方↓
controller/concernにファイルを作って行う方法
https://programming-beginner-zeroichi.jp/articles/142

## ググる時の関連ワード

extend ActiveSupport::Concern
rails concern
GitHub ActionsでFirebaseにデプロイする

GitHub Actionsを使ってFirebaseにホスティングとCloudFunctionsをデプロイする両方を書いてあるものがなかったので
備忘録も兼ねて簡単にまとめます

※ GitHub Actionsとは、リポジトリに対するプッシュやプルリクエスト、Issueの作成などのイベントをトリガーとして、
　事前にyamlファイルで設定した処理を実行する機能です。

# yamlファイルの作成
リポジトリのルートに`.github`というフォルダを作成し、その下に`workflows`というフォルダを作成します。
workflowsの下にyamlファイルを置きます。（ファイル名はなんでもOK）
**[例]**
 sapmle/
　├ .github/
　　　├ workflows
　　　　　　└ develop.yaml

# yamlファイルの中身
```yaml:develop.yaml

name: CI

# ブランチへのPUSHをトリガーとして発火する（この場合developブランチ）
on:
  push:
    branches: 
      - develop

jobs:
  deploy:
    runs-on: ubuntu-latest
 
    strategy:
     # マトリックスの定義。${{ matrix.XXX }}でファイル内で呼び出せる
      matrix:
        node-version: [13.x]
        
    steps:
    - name: Checkout Repository
      uses: actions/checkout@v2
    
    - name: Prepare Node Env
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: install
      run: npm install

    - name: build
      run: npm run build

    - name: Deploy firebase hosting
      uses: w9jds/firebase-action@v1.1.0
      with:
        # ${{ secrets.XXX }} はGitHubのシークレットに設定した値。
        args: deploy --only hosting,firestore --project ${{ secrets.PROJECT_ID }} -f
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

    - name: Ready to deploy functions
      run: |
     # cloudfunctionsのフォルダに移動
        cd functions 
        npm install
    - name: Deploy firebase functions
      uses: w9jds/firebase-action@v1.1.0
      with:
        args: deploy --only functions --project ${{ secrets.PROJECT_ID }} -f
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```

処理の中身
1 npm install で依存関係のインストール
2 ビルド
3 firebase にホスティング
4 CloudFunctionsのフォルダーに移動し、functionsをデプロイ

　

〜以下構文の解説〜
### name
GitHub上のリポジトリのアクションページにワークフローの名前が表示される

### on
ワークフローをトリガーするためのもの
複数のイベントを設定することも可能

### job 
ワークフローで実行される一連のステップ

### steps
ジョブに紐づく一連のタスク


※細かい書き方は以下を参考
https://docs.github.com/ja/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions

# まとめ

今回は最低限のデプロイの記述までですが、実際運用する場合にはCloudFunctionsの環境変数を設定するなど
必要なステップが増えると思いますので、適宜追加してもらえればと思います。
Laravel vue.js axios  500 (Internal Server Error) の解決方法  

##はじめに
この記事では

Laravel vue.js axiosを使って開発しているときに

**500 (Internal Server Error)** 

のエラーに遭遇してどこで処理が止まっているのかを調べるデバック方法をまとめました。

##デバック方法

①　command + option + I キーで　もしくは　右クリックで「検証」ツールを開く

②　consoleタブを押し,500 (Internal Server Error) が出ていることを確認する
![スクリーンショット 2021-01-10 17.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/736238/1d1119a7-b4bf-2fff-5671-ec1ff7a2be94.png)


③　Networkタブを押し, 「all」の項目を押すと現在そのページで使われているファイルを確認することができます
![スクリーンショット 2021-01-10 17.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/736238/00e7c8c4-2b07-eea0-6ab3-b9a14a6bd027.png)


④ ファイル名を選択すると 「message」のところにエラーメッセージが出力されています。
![スクリーンショット 2021-01-10 17.24.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/736238/bdcafe7a-a250-d629-113a-1b09c512487e.png)


今回はidが渡っていなかったので修正したら処理が通るようになりました。


【補足】
[【Vue.js】Vuejsをchromeブラウザでデバッグする方法]
(https://qiita.com/nonkapibara/items/8b587013b6b817d6dfc4)

chromeでVue.js Devtoolsをインストールします。



![スクリーンショット 2021-01-10 18.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/736238/c9985f70-81f1-87b3-c4af-49eee198350e.png)

データの受け渡し、処理の流れを確認することができます。

##おわりに
エラーが出て分からなくなることがありますが、
どこまで処理が走っているのか
どこで処理が止まっているのか
デバックをすることで、処理の流れを把握することができます。
Reactの関数コンポーネントとHooks #1

業務のReactプロジェクトが昨年の秋（2020年）から関数コンポーネント＋TypeScriptに移行しました。
元々はClassコンポーネントだったのですが、なぜ関数コンポーネントなのか？何が優れているのかを知っておきたかったのと、現場で学んだ書き方のTipsなどを記事にしようと思います。

## 関数コンポーネントとは？
Classに比べると簡潔に見通しよく書けるメリットがあったものの、Classの様にStateを持つ事ができなかった。（当たり前ですが、関数は状態を持つことができません。関数の実行が終われば、関数内の変数はスコープから外れ、アクセスできなくなります、クロージャーとかありますが、、）

そこで考案されたのがフックです。フックは、関数コンポーネントの中からReactの機能へ接続（Hooks into）することを実現しました。フックを用いることで、関数コンポーネントにおいてもクラスコンポーネントとほぼ同等の機能を実現することができる様になったわけです。

これによって、関数コンポーネントが主流になったらしいです。

## では、フック(Hooks)とは？
>フックは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。フックは React をクラスなしに使うための機能ですので、クラス内では機能しません。今すぐに既存のコンポーネントを書き換えることはお勧めしませんが、新しく書くコンポーネントで使いたければフックを利用し始めることができます。

React公式ドキュメントから抜粋

ですので、私がフロント開発に携わるサービスもClassコンポーネントが残っていて混在してる状態です。


## では、フックの実例を見ていきましょう。

### useState
その名の通り、state（状態）を扱うためのフックです。
これを使うことで、コンポーネント内で状態を持つことができ、状態の変化で表示を変更できます。
状態と、それを更新するための関数を返します。更新されるとそのコンポーネントは再レンダリングが走り表示も変わります。

いかが例です。更新関数名は `set + 状態名` が一般的です。
```javascript
const [状態, 更新関数] = useState(初期状態);
const [name, setName] = useState("");
```

更新の方法は２種類です。
```javascript
const [count, setCount] = useState<number>(0);

//引数に値を渡す
<button onClick={(e) => setCount(count - 1)}>マイナス</button>

//引数に関数を渡す
<button onClick={(e) => setCount((prevCount) => prevCount + 1)}>プラス</button>
```


### useEffect
副作用の処理（DOMの変更、変数への代入、API通信、イベントリスナー）や、Classでいう、ComponentDidMount、ComponentDidUpdateを行う事ができる。


```javascript
useEffect(() => {
  実行したい処理
},[ 依存する値 ]);
```
第1引数にcallbackを入れて、第2引数に依存する値（監視する値）を配列で入れる
依存する値が変更される時だけ処理を実行させる使い方が一般的ですが、第2引数に入れる値によって以下の様に使い分けでができます。

第2引数に入れる値で以下の様に使い分けることができます。
```javascript
useEffect(() => {
  //何もいれない → レンダリングが走るたびに実行される、非推奨
})

useEffect(() => {
  //空配列 → Componentがマウントされた最初の一回だけ実行（ComponentDidMountと同じ）
}, [])

const [name, setName] = useState("");
useEffect(() => {
  //値を入れる → その値が変更があったときに処理が実行
}, [name])

```
※依存配列が複数ある場合、一つでも変わると再レンダリングが走ってしまうので、useEffectを依存する値ごとに分けるのが一般的です。




**クリーンアップ**
componentWillUnmount的な使い方もこのuseEffectでできます。
サンプルでは、Mount時にクリックを検出してincementNumを発火させるイベントリスナを登録し、「クリーンアップの関数」をreturnする事で、UnMount時に削除をするという事をしています。

```javascript
    const [currentNum, setCurrentNum] = useState(0);
    const incrementNum = () => {
      setCurrentNum(prev => prev + 1)
    }
    useEffect(() => {
      window.addEventListener("mousedown", incrementNum)
      return () => {
        window.removeEventListener("mousedown", incrementNum)
      }
    }, [])

```

[Part2](https://qiita.com/hisashi_matsui/items/c0a96f74e9a48cc7139e)に続く
【Swift】カウントダウン機能の実装方法

#はじめに
個人アプリ作成時にカウントダウン機能を実装したので、
備忘録がてらコマンドの共有をさせていただきます。

GitHubにコードを載せていますのでぜひご覧ください。
-> https://github.com/onishi-app/CountDown

環境
・Apple Swift version 5.3
・XCode version 12.3

#完成形
今回の完成形は次のようになります。
**ボタンタップ後、１秒ずつカウントダウンしていき０秒になったら画面遷移します。**

![カウントダウン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/d2e8d9b1-bb7e-5d3d-8707-856b717e2d3a.gif)

#コード

今回は、カウントダウンを行うViewController.swiftと、
画面遷移先のNextViewController.swiftを定義したのですが、
NextViewController.swiftでの処理は特にないので省略します。

カウントダウンの実装にはTimerクラスを使用したいと思います。

```swift:ViewController.swift

import UIKit

class ViewController: UIViewController {
      
    @IBOutlet weak var countLabel: UILabel!
    @IBOutlet weak var startButton: UIButton!
    
    var time = 5
    var timer = Timer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        countLabel.text = String(time)
        startButton.layer.cornerRadius = 10
    }
    
    // ボタンが押された時の処理
    @IBAction func buttonAction(_ sender: Any) {
        timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { (timer) in
            self.time -= 1
            self.countLabel.text = String(self.time)
            
            if self.time == 0 {
                self.performSegue(withIdentifier: "next", sender: nil)
            }
        })
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        timer.invalidate()
    }
}
```

##コード説明

`viewDidLoad()`内では特に特殊なことはしていません。
Labelのテキスト変数timerの値にし、ボタンの角を丸くしています。

```swift:ViewController.swift

override func viewDidLoad() {
    super.viewDidLoad()
    countLabel.text = String(time)   // text変更
    startButton.layer.cornerRadius = 10   // 丸角
}
```

スタートボタンが押されたタイミングでカウントダウンを開始したいので、
`@IBAction func buttonAction(_ sender: Any) { }`内で定義します。

Timerクラスの`scheduledTimer()`メソッドを使用します。
withTimeIntervalは１秒、repeats（繰り返し）はtrueにします。

メソッド内の処理ですが、timeの値を１減らしLabelの値に再代入しています。
この処理により、ボタンが押されて１秒後にLabelの値も１秒下がることになります。

０秒になったら画面遷移を行うので、
`if self.time == 0 { ・・・ }`の箇所で画面遷移を行っています。

```swift:ViewController.swift

// ボタンが押された時の処理
@IBAction func buttonAction(_ sender: Any) {
    timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { (timer) in
        self.time -= 1
        self.countLabel.text = String(self.time)

        if self.time == 0 {
            self.performSegue(withIdentifier: "next", sender: nil)
        }
    })
}
```

画面遷移を行う際にタイマーを停止したいので、下記のコマンドを記述しております。

`prepare(for segue: UIStoryboardSegue, sender: Any?){ }`は、
`performSegue()`で画面遷移する際に呼ばれるメソッドです。

メソッド内では、`timer.invalidate()`を実行しタイマーを停止しています。

```swift

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    timer.invalidate()
}
```

#さいごに

カウントダウン機能はかなり簡単に実装することが出来るのでぜひ使ってみてください。

Timerクラスを使用すれば、iPhoneのストップウォッチの機能も実装することができます。
（Timerクラスのみでは実装することができないと思いますが・・・）

以上、最後までご覧いただきありがとうございました。
AtCoder ARC111 A. Simple Math 2: 合同式によるM自身の除算, 式変形

300点問題とは...解説が全くわかりませんでした...

https://atcoder.jp/contests/arc111/editorial/491

# 題意
$$ \lfloor \frac{10^N}{M}\rfloor \equiv x (mod M)$$ 
の$x$を求めよ。

# アプローチ
まず、$M$の法の世界なので、以下の式変形を行います。強引に思えるかもしれませんが$mod M$および切り捨ての世界を考えるには非常に効果的なアプローチとなります。

さて、$ 10^N = aM + b$   $(a,bは整数。0  \leq b < M)$おき、$a$を$ a = cM + d $ $(c,dは整数。0  \leq d < M)$とおきます。このとき、
$$ 10^N = (cM + d)M + b = cM^2 + dM + b$$
と表せるので、以下のように変形できます。これは合同式ではなくて等号で表せます。
$$ \lfloor \frac{10^N}{M}\rfloor = 
\lfloor \frac{cM^2 + dM + b}{M}\rfloor = 
\lfloor \frac{cM^2}{M} + \frac{dM}{M}  + \frac{b}{M}\rfloor =
\lfloor cM + d  + \frac{b}{M}\rfloor = 
cM + d$$
最後の式変形は、$cM$と$d$が整数であり、$0 \leq \frac{b}{M} < 1$であること($b$は$M$未満のため)を考えると明らかです。つまり、$\frac{b}{M}$は切り捨てられる小数部分です。さて、問題で与えられた式に当てはめると、 $\lfloor \frac{10^N}{M}\rfloor = cM + d$なのだから、
$$ cM + d \equiv d  (mod M) \Rightarrow \lfloor \frac{10^N}{M}\rfloor \equiv d  (mod M) $$
であることが分かりました。つまり、$d$が求めたい$x$といえます。では、$d$を求めます。

$ 10^N = cM^2 + dM + b = cM^2 + (dM + b)$であったため、$0  \leq b < M$かつ$0  \leq d < M$であることに注意すると、また$M$は1以上の整数であることに注意して、$0 \leq (dM + b) < M^2$は明らかなので、$ 10^N \equiv dM + b (mod M^2) $であることが分かります。<font color=red>つまり、$10$の$M^2$を法とした$N$乗により、$(dM + b)$が得られます。</font>ここで再度、$0  \leq b < M$であったことを思い出すと、
$$ \lfloor \frac{dM + b}{M}\rfloor = \lfloor \frac{dM}{M} + \frac{b}{M} \rfloor =  \lfloor d + \frac{b}{M} \rfloor = d $$
ですから、<font color=red>$(dM + b)$を$M$で割って切り捨てたものが$d$</font>であることが分かりました。

つまり、<b>$10$を$M^2$を法として$N$乗したもの $(dM + b)$ 、を、$M$で割って切り捨てたもの d を、mod dしたもの</b>　が求めたい$x$です。

尚、$0  \leq d < M$であったので、最後のmod dは取っても取らなくてもxと同値になります。

# 実装

```Python
n, m = map(int, input().split())
print((pow(10, n, m*m) // m) % m)
```

https://atcoder.jp/contests/arc111/submissions/19308195
jquery（private, publicプロパティ）

#初めに
　ジャバスクリプトのprivate, publicプロパティがあります。
#private, publicプロパティに対して
①クラスを定義する
②private プロパティ、public プロパティを定義する
③ボタンをクリックすると、クラスのインスタンスを生成し、public プロパティをよぶ
### ①HTML分に以下のHTMLソースを追加する

```html

<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>
```

### ②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
```javascript

// マインオブジェクト
var $main  = $("#main-id");

// クラス定義
var Hoge = function() {

  // private プロパティ
  var privateString = "サンプルテキスト";
  
  // public プロパティの場合、 thisを使う
  this.privateString = privateString;
};

// ボタンオブジェクト
var $button = $("<button>").html("hoge");

// ボタンクリックイベント
$button.click(function() {

   // インスタンス作成
   var hoge = new Hoge();
   
   // public プロパティを呼ぶ
   alert(hoge.privateString);
});

//親オブジェクトに子オブジェクトを追加
$main.append($button);
```
実行
![スクリーンショット 2020-12-23 13.31.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/755e70c5-d231-ccd2-9cd2-aa524fea9651.png)


#private, public関数に対して
①クラスを定義する
②private 関数、public 関数を定義する
③ボタンをクリックすると、クラスのインスタンスを生成し、public 関数をよぶ
### ①HTML分に以下のHTMLソースを追加する
```html

<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>
```

### ②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
```javascript

// マインオブジェクト
var $main  = $("#main-id");

// クラス定義
var Hoge = function() {

  // private プロパティ
  var privateString = "サンプルテキスト";
  
  // public プロパティの場合、 thisを使う
  this.privateString = privateString;
  
  // private 関数
  var show = function() {
    alert(privateString);
  };
  
  // public 関数の場合、thisを使う
  this.show = function() {
      return show();
  }
};

// ボタンオブジェクト
var $button = $("<button>").html("hoge");

// ボタンクリックイベント
$button.click(function() {

   // インスタンス作成
   var hoge = new Hoge();
   
   // public 関数を呼ぶ
   hoge.show();
});

//親オブジェクトに子オブジェクトを追加
$main.append($button);
```
実行
![スクリーンショット 2020-12-23 13.35.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/3ffd1d13-ebb2-a642-de74-9dcb169a5dcf.png)

#public関数に対してprototypeもできます。
例）

```javascript

// クラス定義
var Hoge = function() {

  // private プロパティ
  var privateString = "サンプルテキスト";
  
  // publicの場合、 thisを使う
  this.privateString = privateString;
  

  // private 関数
  var show = function() {
    alert(privateString);
  };
  
  // public 関数の場合、thisを使う
  this.show = function() {
      return show();
  }
};
```

↓　上の方法の代わりに、prototypeもできます

```javascript
// クラス定義
var Hoge = function() {

  // private プロパティ
  var privateString = "サンプルテキスト";

  // public プロパティの場合、 thisを使う
  this.privateString = privateString;
};

// public 関数の場合
Hoge.prototype.show = function() {
    alert(this.privateString);
};

```
結果
![スクリーンショット 2020-12-24 16.22.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/42cfeeb1-2fff-b9aa-d2b8-de0935549bc8.png)



以上
簡易ネットラジオもどき

# 簡易ネットラジオもどき

サーバから PCM データを送信し，手元のクライアントで再生してみるテストです． 容量のない PC で音楽を聞きたいときに使えるかもしれません (?)

## 下ごしらえ

音声ファイルを〆ます． `ffmpeg` で wav に変換して `sox` で裸にします． とりあえず CD 音質に．

```
$ ffmpeg -i hoge.m4a hoge.wav
$ sox hoge.wav -r44100 -c2 -b16 hoge.raw
```

## FIFO 作成

FIFO のうまい使い方が未だにわかりません． この FIFO にはあとで .raw を書き込みます．

```
$ mkfifo queue
```

## サーバ

`nc` を利用して接続を待ち受けます． さっき作った FIFO の中身を (ちょっと細工して) 送信します．

この人は Ctrl-C しないと戻ってきません． この記事の上から順番にやってきた人はここでこの端末が使えなくなります． 次の仮想端末を立ち上げてください．

```
$ tail -n99999999 -f queue | cat | base64 | nc -l 50000
```

`tail -f` で FIFO への追記 (後述) を監視します． `-n99999999` は初回の内容を全部吐いてもらうためのおまじないです．

続く `cat` は気休めのおまじないです． バッファの真似をしているつもりです．

`base64` でデータを 7-bit な感じにします． 受け取り側が 8-bit なデータを受け取れるかわからないのでとりあえず 7-bit な感じにしています．

`nc -l 50000` で 50000 番ポートを listen します． `nc` を雰囲気で使っているのでよくわかりません．

## クライアント

`telnet` でサーバを突きます． 音声再生には `aplay` を利用します．

```
$ telnet サーバアドレス 50000 2>/dev/null | sed '1,3d' | base64 -d | aplay -f cd
```

`telnet` はサーバに接続します． エラーは捨てます．

`sed` は `telnet` の吐くログ “Connecting <サーバアドレス>...” とかを切り捨てます． 必要に応じて変更してください．

`base64 -d` でデコードします．

`aplay` で音声を再生します． `-f cd` は CD 音質を意味します． スピーカのエイジングとかに興味のある人は `cat /dev/urandom | aplay -f cd` とかするとホワイトノイズを聴けますよ．

## 曲の再生

まずはサーバを起動します． ついでクライアントを起動します．
曲を再生するには，作成した FIFO に .raw ファイルを (追加で) 書き込みます．

```
$ cat hoge.raw >> queue &
```

この操作はもしかしたらすぐに戻ってこないかもしれないので `&` を添えてバックグラウンドで動いてもらうことにしました． 続けて曲を追加したい場合は次のように実行すると良いと思います．

```
$ wait; cat fuga.raw >> queue &
```

このコマンド行が返るのはおそらく一つ前の曲が再生し終わる頃でしょう．

---

## おわりに

おわりです．
Xcode デバッグのログを表示させる方法

#あれ、ログはどうやったら表示されるの？
![スクリーンショット 2021-01-10 18.07.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/31cb4616-593e-2c44-a29e-6cc9e66e00f3.jpeg)
久しぶりにXcodeで開発しようとすると、ログが表示されないことに気がついた。。。

**どこをどうやったらログが表示されるのか？**
僕みたいにそういう操作で結構手間取る人も多いかと:joy:

#ログの表示方法
![スクリーンショット 2021-01-10 17.52.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/b3fad38e-cdf6-5782-c52e-f544e24ca384.jpeg)
`View>Debug Area>Activate Console`

これで表示されました。

表示系は基本的に`View`の項目から選べると覚えておこう

![スクリーンショット 2021-01-10 17.52.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/38b28f6b-79fb-16dc-1312-05d678d084b0.jpeg)
httpsが禁止されているサーバーでのGitHub repositryの作り方

# 目的
httpsが禁止されているサーバーでのGitHub repositryの作る。すごく簡単なのだが、コマンドをよく忘れるのでその備忘録。

## GitHubのサイトでレポジトリを作る

https://github.com/

右上のプラスボタンを押す。ここではREPOというレポジトリを作ったとする。

## リモートサーバーでの設定

```
echo "# REPO" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/username/REPO.git
git remote set-url origin git@github.com:username/REPO.git
git push -u origin main
```
下から2行目がポイント。

## 参考文献
- https://www.walbrix.com/jp/blog/2013-11-github-https-ssh.html
Guided Grad-CAMを層毎に出力してみた

Guided Grad-CAMを少し改良し、層毎に出力してみたので、記載します。
VGG16で、犬（Boxer・242）と猫（Tiger Cat・282）それぞれの注目領域を重畳しています。

tsurumesoさんのレポジトリを参考にさせていただきました。感謝いたします。
https://github.com/tsurumeso

## Grad-CAM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/ef1c46d0-a975-d0c4-2231-20da1dcca1b1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/472361b1-a9b3-69fd-6c83-c6ddc0bc1536.png)

## Guided Backpropagation
Guided Backpropagationは入力層を出力するので、可視化画像は変わりません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/71063d9b-dbfd-af3b-79e2-d263b617eb25.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/6eca4762-46f1-fe92-6c47-a44866892e82.png)

## Guided Grad-CAM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/5212931d-d1cf-eec7-0ae2-60230dc07a60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/493607/227f0384-ec26-cf82-e200-1369577f01e0.png)

## 参照

+ Guided Grad-CAM
https://arxiv.org/abs/1610.02391

+ Guided Grad-CAM(Chainer)
https://github.com/tsurumeso/chainer-grad-cam
https://github.com/nishidayoshikatsu/chainer-gradcam-sample
自分用ニューモフィズムの参考サイト（Neumorphism）　

2020年はやると言われていたニューモフィズムのデザインの自分用の参考サイト、XDキットやデザイン系のサイトのURLを貼っていきます（随時更新）


ニューモーフィズムって？
こんな感じで色の変化じゃなくて凹凸で表現するデザインのこと。
![スクリーンショット 2021-01-10 17.41.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764631/41677160-a667-3521-3bd9-86843e0c26a1.png)

<a href="https://webdesign-trends.net/entry/11155">ニューモーフィズムとは？デザイン方法やルールのまとめ</a>
このサイトではどういった成り立ちからデザインが出てきたのかから、どんな参考例があるのかなどを詳しく書いてくれています。
参考例もあり、かなり丁寧に書いてくれているのでわかりやすいとおもいます。

一からXDデザインを作る時に参考にできるサイト
https://note.com/daisuke_mori/n/ndc02162d430a

XDで簡単に使えるニューモーフィズムデザインキット
https://www.behance.net/gallery/93347841/Free-Neomorphic-UI-Kit-for-Adobe-Xd
これはかなり使えるキットだとおもいます。

ニューモーフィズムを実際に活かしたコーポレートサイト（SRA東北さん）
https://www.sra-tohoku.co.jp
かなり可愛いデザインですよね。写真の切り出し方とか、かなり可愛いとおもいます。
下の方のサービス一覧の部分もかなりスタイリッシュな形で良いなとおもいました。（下スクショ）
![スクリーンショット 2021-01-10 17.38.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764631/e199f169-ae59-5757-ecb6-9f374a1614ed.png)


実在するサイトやアプリのニューモーフィズム版を作って見せてくれる人：Ryosuke Yamanoさん
https://twitter.com/ryosuke97
この方はだいぶ前からフォローさせていただいていますが、メルカリやツイッターなど、現在あるサイトのニューモーフィズム版を作ったりして、見せてくれる方です。また、ニューモーフィズムをスライドなどにも活用して、かなりスタイリッシュなデザインになっているのでええなあと思ったりします。
色の配色についての事例やWEB業界についてなどもツイートしてくれる方なのでニューモーフィズムやWEBデザインをみていきたい方はフォローしておいて損はないとおもいます。


なお、勝手に紹介しているのでここに載せられてご迷惑等をおかけしましたらすぐに記事削除させていただきますので、コメント等でお知らせください
[React] firestoreのデータをaxios取得に書き換える

## 開発環境
react : 17.0.1
node : 12.18.2
npm : 6.14.5
firebase : 8.2.1
axios : 0.21.1

## 既存コード
今回はusersコレクションをfirestoreで用意しておき、userのデータをfirestoreから取得し、userのnameを一覧で表示させる実装です。

```react:top.js
import React, { useState, useEffect } from 'react'
import firebase from '../lib/firebase'

const Top = () => {
  const [users, setUsers] = useState([])

  // firestoreからuserのデータを取得する関数
  const getFirestoreUsers = async () => {
    const snapshot = await firebase.firestore().collection('users').get()
    const users = snapshot.docs.map(doc => doc.data())
    setUsers(users)
  }

  useEffect(() => {
    getFirestoreUsers()
  }, [])

  return (
    <div>
      {
        users.map((user, index) => (
          <p key={index}>{user.name}</p>
        ))
      }
    </div>
  )

export default Top
```

## axiosの導入
```terminal
yarn add axios
```

## axiosでfirestoreのデータを取得する
```react:userShow.js
import React, { useState, useEffect } from 'react'
import axios from 'axios'

const UserShow = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    // プロジェクトIDは環境変数で呼び出す
    // process.envを付けるのを忘れずに
    const USERS_URL = `https://firestore.googleapis.com/v1/projects/${process.env.REACT_APP_PROJECT_ID}/databases/(default)/documents/users`
    const fetchUsersData = async () => {
      const result = await axios(USERS_URL)       

      setUsers(result.data.documents)
    }
    fetchUsersData()
  }, [])

  return (
    <div>
      {
        users.map((user, index) => (
          <p key={index}>{user.fields.name.stringValue}</p>
        ))
      }
    </div>
  )
}

export default UserShow
```

※useEffectを少しリファクタリングしました（2021/1/11）

```react:userShow.js
useEffect(() => {
  axios.get(USERS_URL)
    .then(res => res.data.documents)
    .then(fields => setUsers(fields))
}, [])
```

## まとめ
viewで呼び出す記述が長い気がするので、他に良い実装方法があれば教えていただきたいです。。

## 参考記事
[Cloud Firestore REST API を使用する](https://firebase.google.com/docs/firestore/use-rest-api?hl=ja)
[How to fetch data with React Hooks?](https://www.robinwieruch.de/react-hooks-fetch-data)
DataTemplateSelectorを使用したときにオブジェクト参照がオブジェクトインスタンスに設定されていませんとなる

#はじめに
15年ぶりのプログラミング勉強(C#)を始めて、昨年自社アプリを作りました。
この時使用したのは、C#、WPF、Prism、.NET Framework4.8でした。
勉強しながら半分趣味で作ったので、勉強の進捗に合わせるように古いものほど中身がひどく、作り直したい気分です。

最近Microsoftから.NET5が出たので、今度はそのアプリを.NET5対応にしていこうと思っています。
今まで使ったことのない技術など取り入れながら、そこでぶつかった問題や解決したことを描いていければと思います。


#DataTemplateSelectorを使ったらエラーになってしまった
エラーとなった部分はこんな感じ

```C#
        <StackPanel Margin="15">
            <TextBlock Text="{Binding Message}"/>
            <ContentControl Content="{Binding}"
                            ContentTemplateSelector="{StaticResource MessageDialogTemplateSelector}"/>
        </StackPanel>
```
すると、ContentControlのところに波線が出て、"XDG0066 Object reference not set to an instance of an object." (オブジェクト参照がオブジェクトインスタンスに設定されていません)となってしまいました。

利用したDataTemplateは

```C#
    <UserControl.Resources>
        <DataTemplate x:Key="OkOnlyTemplate">
            <Button Content="OK" Command="{Binding OkCommand}"/>
        </DataTemplate>
        <DataTemplate x:Key="YesNoTemplate">
            <StackPanel Orientation="Horizontal">
                <Button Content="Yes" Command="{Binding YesCommand}"/>
                <Button Content="No" Command="{Binding NoCommand}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="OkCancelTemplate">
            <StackPanel Orientation="Horizontal">
                <Button Content="OK" Command="{Binding OkCommand}"/>
                <Button Content="Cancel" Command="{Binding CancelCommand}"/>
            </StackPanel>
        </DataTemplate>
        <templateSelectors:MessageDialogTemplateSelector 
            x:Key="MessageDialogTemplateSelector"
            OkOnlyTemplate="{StaticResource OkOnlyTemplate}"
            YesNoTemplate="{StaticResource YesNoTemplate}"
            OkCancelTemplate="{StaticResource OkCancelTemplate}"/>

    </UserControl.Resources>
```

簡単なメッセージボックスを自作しようと思ったのですが、何がなんだか・・・と困惑。
ただ、ビルド実行はできました。

#原因

原因としては、Visual Studioのデザインビューを表示しようとしても、ContentControlに表示する内容が、デザイン時には決まっていないため、デザインビューを表示できないということのようでした。

じゃあ ContentTemplateをしてしまえばいいのでは？と思いましたが、Microsoftのドキュメントで[ContentTemplateSelectorプロパティとプロパティの両方 ContentTemplate が設定されている場合、このプロパティは無視されます](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.controls.contentcontrol.contenttemplateselector?view=net-5.0)との記述が・・・

#解決
ビルドは実行できるし、このまま放っておこうか(笑)と思っていましたが、XAMLでデザイン時だけ使うというものがあったことを思い出しました。

```C#
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
```

これで、ContentControlのContentTemplateを設定してしまえばいいのでは？

```C#
        <StackPanel Margin="15">
            <TextBlock Text="{Binding Message}"/>
            <ContentControl Content="{Binding}" 
                            d:ContentTemplate="{StaticResource OkOnlyTemplate}"
                            ContentTemplateSelector="{StaticResource MessageDialogTemplateSelector}"/>
        </StackPanel>
```

これでエラーがなくなり、デザインビューも表示できるようになりました。
PyQt5アプリに対してPylintを使う方法

PyQt5を使っているコードに対してPylintを使うと

```
E0611: No name 'QWidget' in module 'foo.bar' (no-name-in-module)
```
のようなエラーが出る。このようなエラーを防ぐには、`pylintrc`ファイルに下記の設定を入れる。

```
[MASTER]
extension-pkg-whitelist=PyQt5
```
AR空間に豆腐を召喚するにあたってハマったポイント

ARアプリを作りたいと思い以下記事を参考にサンプルアプリを作ったのですが
UnityにもARにも慣れていなかったためいくつかハマったポイントがあったので書きます。
<https://qiita.com/shun-shun123/items/1aa646049474d0e244be>

表示されたエラーメッセージを残しておけばよかったのですが、忘れてました…。

## Unityでビルドできない

Project Settings > Player > Others で `Target minimum iOS Version` を 「12」に変更、
`Architecture` を「ARM64」に変更することで解消しました。
![Screen Shot 2021-01-10 at 16.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211475/bfd66b82-c548-89da-2625-a5c7e41fc26f.png)

## XCodeでビルドできない

以下を参考に開発用ビルド証明書を作成、再びUnityでXCodeプロジェクトをビルドすることで
XCodeでビルドできるようになりました。
<https://nekonenene.hatenablog.com/entry/unity-build-to-ios-for-free>

## iOSにインストールできない

以下を参考にXCodeとiOSの対応バージョンを合わせることで解消しました。
<https://developer.apple.com/jp/support/xcode/>

## インストールしたアプリが正常に作動しない

Project Settings > Player > XR Plug-in Management で
`Plug-in Providers`の「ARKit」にチェックを入れることで解消しました。
![Screen Shot 2021-01-10 at 19.20.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211475/97692b0e-c221-8a1c-bac8-050dee705409.png)


## できあがったもの

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">豆腐を召喚できるようになりました <a href="https://t.co/0x5v5j1SJG">pic.twitter.com/0x5v5j1SJG</a></p>&mdash; nerikara (@nerikara4chimi) <a href="https://twitter.com/nerikara4chimi/status/1348123048033935361?ref_src=twsrc%5Etfw">January 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ソースコードは以下です。
https://github.com/nerikara/ar-tofu

## 参考

AR Foundationを使ったプロジェクトの設定については以下を参考にしました。
<https://note.com/npaka/n/nc24ba42aa710>

iOSビルド設定に関してはこちらにも書かれていますね。
<https://qiita.com/ippo/items/d9c046bb365e2666ffdc#%E3%83%93%E3%83%AB%E3%83%89%E8%A8%AD%E5%AE%9A>
Developers.IOの`【2021年】AWS全サービスまとめ`をBS4で一覧にする

# Developers.IOの`【2021年】AWS全サービスまとめ`をBS4で一覧にする

[Developers.IO](https://dev.classmethod.jp/)の[【2021年】AWS全サービスまとめ](https://dev.classmethod.jp/articles/aws-summary-2021/)の記事について、[Beautiful Soup](https://www.crummy.com/software/BeautifulSoup/bs4/doc/#)を利用して一覧にする方法です。

```python
import requests
from bs4 import BeautifulSoup
import re
import pandas as pd

res = requests.get('https://dev.classmethod.jp/articles/aws-summary-2021/')

soup = BeautifulSoup(res.text, 'html.parser')

all_services = []

categories = soup.find_all('h2')

for category in categories:
    category_name = category.text
    if category_name == 'まとめ':
        break
    for el in category.next_siblings:
        if el.name == 'h2':
            break
        if el.name == 'h3':
            service_name = el.text
            service_name = re.sub('[\r\n]', '', service_name)
            service_name = re.sub('^[\s]+', '', service_name)
            service_name = re.sub('[ ]+$', '', service_name)
            service_name = re.sub('\s*\[.+\]\s*', '', service_name)
        
            if not service_name or service_name.startswith('EVENT') or service_name.startswith('Session Summary:'):
                continue
            
            desc_el = el.next_element.next_element.next_element
            desc = desc_el.text
                
            all_services.append({
                'category_name': category_name,
                'service_name': service_name,
                'desc': desc
            })

print(len(all_services))

all_services_df = pd.DataFrame(all_services)
print(all_services_df)
all_services_df.to_csv('aws_all_services.csv', encoding='ms932')
```

## 参考文献

* [【2021年】AWS全サービスまとめ](https://dev.classmethod.jp/articles/aws-summary-2021/)
Anki 2.1.x用アドオンの作り方

[Anki](https://apps.ankiweb.net/) 2.1.xアドオン作成に最低限必要なファイルは2つである。

* `__init__.py`
* `manifest.json`

この2ファイルをZIP圧縮すればアドオンができる。`zip`コマンドを使い、`myaddon.ankiaddon`というアドオンファイルを作るには下記のようにする。

```
$ zip myaddon.ankiaddon __init__.py manifest.json
```

[Writing Anki Add-ons](https://addon-docs.ankiweb.net/#/sharing?id=sharing-via-ankiweb)に従って`zip -r ../myaddon.ankiaddon *`を実行すると、`*`を使っているので、カレントディレクトリにある不要なファイルもアドオンファイルに入ることになる。そのため、`zip -r ../myaddon.ankiaddon *`はおすすめしない。

以降では、`__init__.py`と`manifest.json`それぞれについて簡単に説明する。

## `__init__.py`

AnkiはGUIライブラリとしてPyQt5を使っているので、GUIについては[PyQt5のドキュメント](https://doc.bccnsoft.com/docs/PyQt5/)を読む。PyQt5のドキュメントに不足している部分は、適宜[Qt5のドキュメント](https://doc.qt.io/qt-5/index.html)も参照する。

Anki特有の処理については[Writing Anki Add-ons](https://addon-docs.ankiweb.net/#/)を参照する。また、Ankiのソースコード、特に[pylib/anki](https://github.com/ankitects/anki/tree/2.1.38/pylib/anki)配下を読む。

また、[anki-addons](https://github.com/ankitects/anki-addons)の`demo`ディレクトリにあるアドオンのコードも参考になる。

## `manifest.json`

[Ankiへのpull request](https://github.com/ankitects/anki/pull/283)や[qt/aqt/addon.py](https://github.com/ankitects/anki/blob/2.1.38/qt/aqt/addons.py#L149-L171)を参照しながら、`manifest.json`にJSONデータを書く。

Anki 2.1.38時点では、`package`（フォルダ名）と`name`（ユーザに表示される名前）の2つが`manifest.json`に必須である。必須ではないものとしては、下記がある。

* mod
* conflicts
* min_point_version
* max_point_version
* branch_index
* human_version
LwIPでIPv6

フレッツ光でIPv6が利用できるので[蟹さん](https://github.com/yamori813/rtlbm-mruby)で使っているLwIPのRAWインターフェースでIPv6を使えるようにしてみました。

lwipopts.hにipv6のサポートを入れます。

```c:lwipopts.h
#define LWIP_IPV4       1
#define LWIP_IPV6       1
```

これでsrc/core/ipv6の下のソースファイルをコンパイルしてライブラリに追加します。

rtlbm-mrubyをビルドしてみたところ、ビルドが通らなくなりました。LWIP_IPV6を1にすると型が変わってしまい修正する必要がありました。型はIPv4用の型を直接指定せず共用の方を使うようにしました。

コンパイルが通るようになって、試してみて前と同じように動く事を確認しました。

これでIPv6のサポートを入れます。まず追加したのは以下のコードです。

```c:net.c
        netif_create_ip6_linklocal_address(&netif, 1);
        netif.ip6_autoconfig_enabled = 1;
```

と

```c:rtl_ether.c
        netif->output_ip6 = ethip6_output;
```

です。これでアドレスがインターフェースに追加されます。おそらく最初に実装したときdoc/NO_SYS_SampleCode.cを参考にして自分が削ったのだと思いますが、まったく記憶にありませんでした。

アドレスは拾えたのですが、ping6に応答しません。調べて見たところ、以下の設定で答えるようになりました。[バグ](https://savannah.nongnu.org/bugs/?59319)なのかもしれません。

```c:lwipopts.h
#define LWIP_IPV6_MLD   0
```

アドレスが付いたら次はDNSでIPv6のアドレスを拾えるようにします。これにはdns_gethostbynameではなくてdns_gethostbyname_addrtypeを使います。typeをIPADDR_TYPE_V6(1)を指定するとV4同様にアドレスが拾えます。アドレスは128ビットになっているので、Cコードの中では配列で扱います。

いろいろ考えて見てmruby側のmrbgem(mruby-yabm)にlookup6というメソッドを追加してIPアドレスを文字列で返す事にしました。通常IPv6のアドレスを表記する場合は16ビット毎に:で区切られていて、RFCで0を省略のルールもあるのですが、処理が面倒なので省略しない方式で実装しました。

```
2001:0df0:0232:eea0:0000:0000:0000:fff3
```

これで名前解決はできたので、とりあえずSNTPの処理をIPv6対応にします。蟹さんはHTTPSの証明書の有効期限を確認のためにある程度正確な時間が必要で、RTCがないのでSNTPで時間を合わせるようにしています。SNTPで使えるntp.nict.jpはIPv6のアドレスのサーバもあります。このサーバをlookup6してIPv6のアドレスを拾います。それを既存のsntpメソッドに渡すわけですが、sntpメソッド内でアドレスの文字列が39文字の場合はIPv6でそれ以外はIPv4として処理するようにしました。

IPアドレスを文字列で扱うようにしたのはmruby 2の最初の頃に最上位ビットが立った数値が扱えなかったため、ワークアラウンドでそうしました。

[FreeBSDでsnoop](https://qiita.com/yamori813/items/17da207b73392d4e0f3d)を使いながら確認して、SNTPのUDPのパケットを送信しているとこもIPv6対応にしました。

とりあえずパケットが送られて戻ってくるのですがパケットが処理されません。

いろいろ試していたところRAの処理などが起動後にあるので、数秒まってからSNTPのパケットを送信したところちゃんと動くようになりました。

```ruby
start = yabm.count()
while yabm.count() < start + 3 * 1000 do
end
ntpaddr6 = yabm.lookup6("ntp.nict.jp")
yabm.print ntpaddr6 + "\r\n"
yabm.sntp(ntpaddr6)
```

IoT(Internet of Test)でご愛用のThingspeakは今のところIPv4のみなので、HTTPSなどはおいおい対応してみたいと思います。

何度見てもLwIPのコードは見通しが悪く奇奇怪怪です。誰かもっとまともなスタック作ってくれませんか？

BCMBMにもサポートを入れてみて気がついたのですが、BCMのIFではマルチキャストを受け取らない設定でした。router advertisementは33:33:00:00:00:01で飛んでくるので、これが受けられるようにする必要がありました。

```
#if 1
        WRITECSR(sc, R_RCV_CONFIG, M_RCFG_AM);   /* All multicast */
#else
        WRITECSR(sc, R_RCV_CONFIG, 0);
#endif
```

元々#if 0になっていました。おそらくIPv4の01:00:5eはデフォルトで受けられるけど、それ以外は設定が必要な気がします。

また蟹さんはネットワークバイトオーダーのBig Endianですが、BCMはLittle EndianでV6のアドレスを積むときにhtonlする必要がありました。
Hugo 静的サイトジェネレーターブログを開設してみる④記事contentの作成

前回でトップページを編集したので、今回は記事を作成していく！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/87e00fb4-268c-6e20-c793-ab2c018afa7a.png)
#前回の記事
**[Hugo 静的サイトジェネレーターブログを開設してみる①Hugoインストール編]
(https://qiita.com/SakagamiKeisuke/items/e4ee309a44dce22e6229)**
**[Hugo 静的サイトジェネレーターブログを開設してみる②Netlifyでホスト＆デプロイ実行まで](https://qiita.com/SakagamiKeisuke/items/8a106fcf8f733b6ff12d)**
**[Hugo 静的サイトジェネレーターブログを開設してみる③トップページの編集](https://qiita.com/drafts/6f9dffe5c5fc32456fc9)**

# 前提条件
- 環境例：PC MacBookAir2019 macOS Big Sur
- ファイル階層理解、ターミナル操作、Linuxコマンド、vscode等のエディタ使える
- Git理解、 github個人アカウント登録済み、かつ、作業用リポジトリを準備できる
- Githubリモートからデプロイする、デプロイとはなんぞやを少し理解できる
- 何かしらデプロイ経験があればスムーズ（なくてもできる！し経験値になるのでOK）
- 当方スキル： スクール転職活動でRuby半年、転職後PHP,フレームワークを半年程度の駆け出しエンジニア

# hugo new コマンドでコンテンツ（記事）を作成
公式ドキュメント
https://gohugo.io/commands/hugo_new/

まず、Blog/content/post/配下にある、テーマから移植していた記事を消します。
参考に雛形を見たい時は、themes配下に大元のファイルがあるので大丈夫。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/1b970427-b1a8-f023-345a-6891c8693a32.png)


```Go:Blog/archetypes/default.md
---
title:       "記事のタイトルテキスト"
subtitle:    "記事のサブタイトル"
description: "記事の説明"
date:        "{{ .Date }}"
author:      "KEISUKE SAKAGAMI"
image:       "img/avater-cat.png"
tags:        ["テック", "Hugo", "雑記"]
categories:  ["テック", "健康", "趣味"]
draft:       true
---
```


```Go:メインプロジェクト・トップディレクトリ
//既存のcontent/post/配下にhello_world.mdファイルを作成
Blog% hugo new --kind default.md post/hello_world.md      
//結果               
/Users/user/Blog/content/post/hello_world.md created
```
なぜか、オプションなしで hugo newすると、本来参照しないthemes/archetype/post.mdを参照してしまうので、
オプションでメインディレクトリのarchetype/default.mdを明示的に指定しました

参照もとを複写して、.mdファイルが作成できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/f9ec2edd-9b36-8b8e-c269-4912c776c644.png)


Blog%hugo server -D  で確認します

```Go:メインプロジェクト・トップディレクトリ
//ビルドしてローカル環境で確認
Blog% hugo server -D

ブラウザでhttp://localhost:1313/アクセス
```
ちゃんと記事が表示できたようです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/cd979063-8e29-f026-2884-8ae0835e4f3e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/75578c46-cdad-364b-1e68-0a2e834cdf16.png)


hugo実行　→git push →Netfilyデプロイ実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/3d26bc46-437e-1bc4-8c7a-3f71716aa17c.png)

本番環境でも無事表示できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/e4458a9e-edb4-1c40-5365-73ca8bc86b91.png)


# カテゴリーごとに.mdファイルテンプレートをつくったりできる

```Go:作業ディレクトリ：メインディレクトリトップBlog
// 新しいテンプレートprogramming.mdを作成
Blog% cd archetypes
archetypes% touch programming.md

// programming.mdを好みに編集します

// content/配下にprogrammingディレクトリを作成し、その配下に記事を作成
Blog% hugo new programming/20110111.md 
/Users/user/Blog/content/programming/20110111.md created
```
content/配下にprogramming/20110111.md が生成された
中身もテンプレートどおりになっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617331/08249e2d-418d-29d1-ca29-5bc6bf5cdc7b.png)
組み込みシステムのリアルタイム性とは

#組み込みシステムには厳しい時間制約がある
組み込みシステムはハードウェアとソフトウェアが一体となって構成されており、I/Oの先にはセンサーやモーター、通信回線などが接続されていて、それら全ての動作がタイミングをピッタリ合わせて動作する必要がある。
例えば、自販機にコインを入れて、欲しいもののボタンを押して、何も変化しないまま３秒以上経過すると人間は不安になり、あちこち叩いたり、返却レバーを操作したりする。
この場合、センサーがコインの投入を感知しその情報をマイコンに伝え、投入金額を表示するまでの時間制約は３秒となる。商品ボタンが押されてから指定された商品を排出するためにモーターなどのアクチュエーターを制御しつつ、お釣りの計算をし返却口へ戻す制御をする。
これら一連の動作が遅いと、お客さんがイラついたり、お釣りを受け取り損なってしまうかもしれない。
この例では相手が人間である。人間は３秒以上の我慢ができない。つまり、３秒以内に応答することができればその自販機には「リアルタイム性がある」ということができる。秒というオーダーの時間制約であれば、開発は比較的容易である。
デジカメの場合、撮影ボタンを半押しするとピント合わせと露出調整を行う。続けて撮影ボタンを深く押し込むとシャッターを一瞬開いてイメージセンサ上に投影する。そしてその映像データをSDメモリへ転送して記録し次の撮影に備える。この一連の処理がどれだけ高速に行えるかで１秒間に撮影できる枚数が決定する。
一連の処理を時間制約の仕様以内に済ませることが可能な場合、「リアルタイム性がある」という。
リアルタイム性には以下の２種類がある。

- 処理要求があったときにどの程度の時間で処理に取り掛かることができるか?
- 要求された処理を済ませるのに必要な処理時間はどれくらいか?

#参考文献
坂巻佳壽美, トコトンやさしい組込みシステムの本, 今日からモノ知りシリーズ, 日刊工業新聞社, 2019年.