OmniAICreator/Qiita-1.07M huggingface dataset:
2021年の振り返り

###はじめに
2021年の振り返りをまとめます。
2021年は、社会人として、仕事としてITに関わる一年となりました。あっという間でしたが、学びの深い一年になりました。学んだことを来年にも活かすため、記事として形に残そうと思います。

###振り返り
2021年に学んだことの振り返りを社会人・ITを仕事にする人の視点からまとめます。概要は以下の通りです。
★学んだことまとめ

| 視点 | 学び | 概要 |
|:-:|:-:|:--|
| 社会人  | リサーチ力  | ・何のために（目的）、何をリサーチし（想定する結果・イメージ像）、どのくらい時間をかけるか（コスト）を意識することが重要  |
| 社会人 | 責任感の重要さ  | ・常に、誰のために・何のために仕事をしているかを考えることが重要  |
| IT | 質問力  | ・自分が質問をするときは、なぜ分からないか、こうなるのではないかと質問を通して仮説検証し、次に活かすことが重要<br>・回答者の工数を奪っていることを忘れてはいけない  |
| IT | 読解力  | ・公式ドキュメントなどから読み取れる人は強い<br>・読み取ったこと、新たに知ったことは必ず見える形でストックすることが重要 |

###社会人視点での学び
####リサーチ力
社会人一年目、本当にわからないことがたくさんある毎日です。一つ解決してもまたわからないことが増えます。要するにたくさんリサーチする必要があるということです。はじめはとりえあずわからなくなったら一旦調べて次に進むといった仕事の仕方でした。しかし、それだと時間がかかるだけでなく、ほんとに知りたいこととは的外れなものをリサーチしていたりと、あまり意味のないリサーチになっていました。そこで私が重要だと感じたことは<b>何のために（目的）、何をリサーチし（想定する結果・イメージ像）、どのくらい時間をかけるか（コスト）を意識すること</b>です。ポイントは、<b>目的・想定イメージ・コスト</b>の３つです。目的は、リサーチ結果をどうしたいのか、何のためにリサーチするのかを認識することです。想定イメージは、リサーチ結果として、どういったものが上がってくるかをイメージすることです。まずどういった結果になるかを自身で考えることで、自身の頭に定着しやすくなると思います。コストは、リサーチの時間・工数をどのくらいとるかです。漠然と期限を決めずにリサーチをすると、だらだらと時間が伸びて、仕事の遅延につながります。期限を明確にしていれば、ここまで調べてわからなかったら質問しようなど、次の行動につながります。

####責任感の重要さ
責任感は、仕事をするうえで一番大切なことだと思います。具体的には、<b>常に、誰のために・何のために仕事をしているかを考えること</b>です。理由は、責任感の有無で、仕事の結果・質が大きく変化すると考えるからです。自分がサービスを受ける側である場合、適当な仕事をされるとすごく嫌な気持ちになります。仕事をするということは、誰かにサービスを提供する側であり、対価をいただいているということです。そのことを意識することができていれば、適当な仕事はできないはずです。この意識を体にしみこませられるよう、これからも仕事に一生懸命取り組むつもりです。

###ITを仕事にする視点での学び
####質問力
質問する際に重要なことは２点あります。一点目は、<b>自分が質問をするとき、なぜ分からないか、こうなるのではないかと質問を通して仮説検証し、次に活かすこと</b>です。なぜ分からないかを考えることで、調べればわかることではないか？と自分に問いなおすことができます。後ほど記載しますが、質問するということは、回答者の工数を奪うということです。調べればわかることはなるべく自身で解決するべきです。また質問を通して仮説検証することで、次回同じエラーが起きた際に、検証結果を打ち手として使うことができます。ただ何も考えずに聞くだけではすぐ忘れてしまいます。二点目は、<b>回答者の工数を奪っていることを忘れてはいけない</b>ということです。リサーチ力でも書きましたが、コストがかかっています。その意識は忘れてはいけないです。

####読解力
ITに携わり感じたことは、私は公式ドキュメントが全然読めないということでした。公式ドキュメントには、よりよい実装につながることがたくさん書いてあります。またリサーチして、必ず検索結果として知りたい内容が出てきます。なのに読めない！となっていた一年間でしたが、エラーを爆速で解決している先輩たちは必ず公式ドキュメントを読みこなしていました。たくさん読むことで抵抗がなくなり少しずつ読めるようになるとアドバイスをいただいたので、これからも実践します。また<b>読み取ったこと、新たに知ったことは必ず見える形でストックすること</b>が非常に重要です。やりっぱなしだとすぐに忘れてしまいます。学んだことは見える化しいつでも見返せる状態を作ることで忘れないようになります。また人に説明できるようになることで、より定着します。私は、これからもQiitaに記事を書くことで忘れないように、仕事に活かせるように学びをストックしていきます。
###まとめ
毎日の仕事でたくさん学ぶことがあります。忘れないようこれからも定期的にまとめていきます。
また周りの方々への感謝を忘れずに、来年も頑張ります。
(完全)準同型暗号の最前線２（原理編）: TFHEの原理 #5 Identity Key Switching

# 目次
1. [(完全)準同型暗号の最前線1（入門編)](https://qiita.com/nindanaoto/items/98335ad4d32b927effa9)
2. [(完全)準同型暗号の最前線２（原理編）: TFHEの原理 #1 TLWE](https://qiita.com/nindanaoto/items/82b63cb5453380c029b1)
3. [(完全)準同型暗号の最前線２（原理編）: TFHEの原理 #2 TRLWE & SampleExtarctIndex](https://qiita.com/nindanaoto/items/6796dcf21a37362ce557)
4. [(完全)準同型暗号の最前線２（原理編）: TFHEの原理 #3 TRGSW & CMUX](https://qiita.com/nindanaoto/items/5d33dcbabddfb3f6880e)
5. [(完全)準同型暗号の最前線２（原理編）: TFHEの原理 #4 Blind Rotate](https://qiita.com/nindanaoto/items/c1941561d5d3524bf02a)
6. (完全)準同型暗号の最前線２（原理編）: TFHEの原理 #5 Identity Key Switching←イマココ

# 初めに

これを説明すればHomNANDは今までの全部くっつけたら終わりですね。
もう１年が終わってしまう......

# 全体の中での位置づけ
![IdentityKeySwitchHomNANDdiagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251439/239228f9-dcb9-5c7a-56e3-34bcdf296d59.png)

Identity Key Switchingとは、恒等関数とKey Switchingを同時に適用する操作のことです。Key Switching自体は一般にはリプシッツ関数を同時に適用できるのですが、HomNANDでは恒等関数だけで問題ありません。

Key Switchingというのはその名前の通り、秘密鍵を変更する操作のことをいいます。ここでは、TLWEもちろん、秘密鍵で復号して再度暗号化するわけにはいかないので、暗号の上で復号関数に近いものを評価することになります。ここでは、TLWEからTLWEへのものだけを扱いますが、一般にはTLWEからTRLWE、TRLWEからTRLWEもあります。([これ](https://eprint.iacr.org/2020/015)とか)


# Key Switchingのアイデア
前回お話ししたBlind Rotateは非線形関数である符号関数を含む復号関数全体を評価していましたが、Key Switchingでは線形な部分だけ、つまり$b-\mathbf{a}\cdot\mathbf{s}$の部分だけを評価します。ノイズを除去するためには非線形関数である符号関数を適用する必要がありますから、Key Switchingではノイズは除去されず、ノイズは増加します。

# Identity Key Switchingのアルゴリズム

## ナイーブな実装

Identity Key Switchingの発想はExternal Productに近しいものです。実際、TRLWEからTRLWEの場合は自然にExternal Productを使って表現することができます。近い発想というのは具体的には、TorusとTorusの乗算は定義できないので、入力となるTLWEを整数に丸めて分解するという発想です。

ここではTLWElvl1からTLWElvl0への変換を考えるので、TLWElvl1の鍵($\mathbf{S}$)をTLWElvl0($\mathbf{s})$の暗号文として暗号化します。$b$の方は自明なTLWElvl0の暗号文として$(\mathbf{0},b)$と表現できます。なので、残りの$\mathbf{a}\cdot\mathbf{s}$を暗号文上で計算できればよく、つまりは$a_i\cdot s_i$をうまく計算できればそれらを全部足し合わせるわけでよいことになります。

Identity Key SwitchingにおいてExternal Productでの$Bg$に相当するパラメータが$base$で、$l$に相当するパラメータが$t$です。$base$は$Bg$と同様に実装では高速化のために$base=2^{basebit}$のように２冪にとります。

これらのアイデアだけを用いた場合、Identitiy Key Switchingのアルゴリズムはこのようになります。$KS_{ij}$は$\frac{S_i}{2^{j\cdot basebit}}$を暗号化したTLWElvl0の暗号文です。

```
b̃=b
for i from 0 to n
  ãᵢ = 0
prec_offset = 1 << (32 - (1 + basebit * t)) //四捨五入のため
for i from 0 to N-1
  āᵢ = aᵢ+prec_offset //四捨五入
  for j from 0 to t-1
    âᵢⱼ= ⌊baseʲ⋅āᵢ/2³²⌋ mod base
    (𝐚̃,b̃) -= âᵢⱼ ⋅ KSᵢⱼ
return (𝐚̃,b̃)
```

## 最適化された実装

ナイーブな実装にはまだ２つ最適化の余地があります。一つには、$base^j$倍して丸めるのを$base=2^{basebit}$の形であることを利用してbit演算に置き換えることができます。もう一つは、乗算の排除です。乗算をするとノイズがその分だけ大きくなってしまうため、$K_{ijk}=\frac{k\cdot S_i}{2^{j\cdot basebit}}$とし鍵へのアクセスで乗算を置きかえます。メモリ消費量は増えますが、ノイズの観点での改善はBlind Rotate側でのパラメータの調整の余地を増やすので全体としての高速化を実現できます。

これらを適用するとIdentitiy Key Swithingのアルゴリズムは以下のようになります。$k=0$のときは0との加算になるのでそもそもスキップできます。

```
IdentityKeSwitching((𝐚,b),𝐊𝐒)
  b̃=b
  for i from 0 to n-1
    ãᵢ = 0
  prec_offset = 1 << (32 - (1 + basebit * t)) //四捨五入のため
  for i from 0 to N-1
    āᵢ = aᵢ+prec_offset //四捨五入
    for j from 0 to t-1
      k = (āᵢ >> (32 - (j+1)⋅basebit))&(2ᵇᵃˢᵉᵇⁱᵗ - 1)
      if k != 0
        (𝐚̃,b̃) -= KSᵢⱼₖ
  return (𝐚̃,b̃)
```

# 次回

これでほとんどHomNANDに必要な説明は終わりで、次回でそれらをくっつけて終わりです。年末年始の休みに片付けてしまいたいけれど気分次第......
AWS(EC2)で組込みクロス開発環境構築・運用し料金管理で失敗した話

#これはなに?
以前、[AWS(EC2)でSTM32MP1 用の組込みLinux(OpenSTLinux)をコンパイルした件](https://qiita.com/gracehime/items/aae78d84759e72c65cc0)というタイトルで記事を書きました。
この記事ではEC2で組込みクロス開発環境を構築し、組込みLinux(OpenSTLinux)をコンパイルする作業手順について書きました。
今回は構築した環境を一定期間運用し、料金管理で失敗した事例を紹介します。

#EC2の設定条件
EC2インスタンスの設定条件は次のとおりです。

 - リージョン：東京
 - インスタンス：t3.large
 - ストレージ：Magnetic provisioned storage


#通常時の料金
失敗事例を書く前に通常使用時の月額使用料金について紹介します。
以前の記事でも紹介しましたが組込みLinuxをコンパイルしたときにかかった料金は2021年6月分で合計**$32.60ドル**でした。

![2106-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171866/061523f8-d70b-4024-7ee4-b97e5edffac8.png)

![2106-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171866/33838795-7145-ed99-5f35-3d70a94c6f91.png)


使用料金のうち大部分を占めるのは次の２つの項目です。

## EC2動作時間
請求書の項目はつぎの項目になります。

Elastic Compute Cloud
Asia Pacific (Tokyo)
Amazon Elastic Compute Cloud running Linux/UNIX
$0.1088 per On Demand Linux t3.large Instance Hour

動作時間は**115.281 Hrs**で料金が**$12.54**でした。


## ストレージ(EBS)容量
請求書の項目はつぎの項目になります。

EBS
$0.08 per 1 million I/O requests - Asia Pacific (Tokyo)
$0.08 per GB-month of Magnetic provisioned storage

I/O requestsは3,038,597.000 IOsで$0.24でした。
storageは**209.778 GB**で**$16.78**でした。


#失敗談
失敗事例は次の２つです。

##1. EC2を停止しなかった件
2021年9月の月額料金ですが合計で**$114.43**になってしまいました。
9月はEC2を使って作業した記憶がなかったのでこの請求書を見たときに驚きました。
原因としてはEC2のインスタンスを【停止】状態にしていなかったことが原因だと思います。

![2109-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171866/794634ca-ffb4-d898-53dd-55c0b32646ec.png)

![2109-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171866/9ce8a6bc-0d44-d50d-a4c0-348bc85e6510.png)


請求書の次の項目が

Elastic Compute Cloud
Asia Pacific (Tokyo)
Amazon Elastic Compute Cloud running Linux/UNIX
$0.1088 per On Demand Linux t3.large Instance Hour

**720.000 Hrs**で**$78.34**となっていました。
9月の1ヶ月間、EC2を停止状態にせずに放置していました。


##2. ストレージの料金についての理解不足
EC2を停止していてもストレージを使用していた場合は料金が発生することを意識していませんでした。
2021年7月の請求書を事例に説明します。
7月はEC2を【停止】状態としていましたが、ストレージの料金が記載されています。

![2107-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171866/57741eca-d6b3-57a4-8c2f-db393802a9e2.png)

![2107-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171866/a4f7c8cd-fa26-bb53-2616-aca7a9251add.png)

Elastic Compute Cloud
Asia Pacific (Tokyo)

の項目欄に
**Amazon Elastic Compute Cloud running Linux/UNIX**
は存在しませんが、
EBS
$0.08 per GB-month of Magnetic provisioned storage

storageは**320.000002 GB**で**$25.60**でした。


#失敗から得た教訓
##1. 使わないならEC2インスタンスを止める
EC2を使わない(将来的に使う予定はあるが今は使わない)ならインスタンスを停止にしておくべきでした。
使わないなら止める、家の電気料金と同じですね。

##２. 今後もEC2を使わないならインスタンスを削除する
EC2を使わない(将来的に使う予定もなくなった)ならインスタンスを削除することも検討するのが良いと思います。
月額サブスクを契約したが利用しない状況と似ていますね。


#最後に
この記事を見た方のなにかお役に立てれば嬉しいです。
最後まで読んでいただきありがとうございました。
2021年の振り返り

## 2021年の振り返り

こんにちは、かずやんです！皆さん、年末いかがお過ごしでしょうか？
今年も早いもので、2021年も最終日となりましたね！ :tada:
大晦日ということもあるので、今年取り組んだことを振り返りつつ、来年やりたいことをゆるりと書きたいと思います。

## インターン
今年は一年を通して様々なインターンに参加させていただきました。

### 3月 CyberAgent

今年初めてのインターンは CA のフロントエンド開発型インターンでした。
ECサイトを構築するというテーマのハッカソン型のインターンで、音声で駆動するサイトを開発し、アイデアのユニークさが評価され、**2位を受賞することができました！**
技術的にレベルが高い方も参加されており、メンターの方にコードレビューをしていただき、データ管理周りなどで課題が見つかるなど、とても勉強になるインターンでした。

### 8月 AWS

夏あたりから、インフラまわりを触ることが増えてきてクラウドベンダーの仕事に興味を持ち始めたことと、単純に **GAFA でインターンをしてみたい** という願望から、AWS のインターンに参加しました。
インターンでは実際にうまく設定がされていない AWS環境のデバッグ・サポート業務のデモを取り組むことができ、とても楽しかったです。
また、面接対策などでインフラ構成を深く勉強する機会になり、フロントエンド以外の分野へ知見が広がったのが良かったです。

### 9月 DeNA

夏休みの後半は DeNA の短期開発型インターンに参加しました。
「大人数が同時アクセスするチャットアプリ」を想定した課題が与えられ、既存の **伸びしろがあるアプリ** を改善するという内容でした。
インターンでは自分には持ち合わせない圧倒的な技術力を持った方がたくさん参加されており、事前に噂で聞いていた通りの文字通り **レベルの高いインターン** でした。
自分がメインで取り組んでいたフロント周りだけでなく、**インフラやバックエンドとの連携、コミュニケーション力などエンジニアとして必須の能力が試される内容でした。**
チームメンバーも明るく誠実な方に恵まれ、インターン後も一緒にゲームをしたりするなど、横のつながりもできた充実したインターンでした。

### 10月 NTT DATA

夏休みも終わり、就活をぼちぼち意識する時期になったということで、日系大手のプロジェクト（実務ベースの開発）型インターンに参加しました。
初の出社インターンということもあり、5年ぶりに東京に行きました。
Terraform を用いた AWS 環境の自動構築という内容で、実際に利用されるシステムのインフラ開発を行いました。
大手ならではのセキュリティの強さに驚かされたり、社員の方に毎日ご飯に連れて行っていただいたりなど、業務以外の面でも興味深いことが多く、楽しかったです。

## ハッカソン・コンペ
### Open Hack U vol.4
https://hacku.connpass.com/event/201528/

Twitter で知り合った、お互い顔も知らないメンバーと共にハッカソンに出場しました。
貸し忘れ、借り忘れを防ぐことができる LINE Bot と Webアプリを連携できるアプリを開発をました。

その中で、ハッカソンでは初めてのバックエンド側の開発をおこない、エンドポイントまわりの開発を担当しました。
アーキテクチャの理解や、フロントエンドとは違った開発環境など勉強になったハッカソンでした。
メンバーの方がとても優秀でアイデア、エンジニアリング力、デザイン力のバランスがよいチームで、チームメンバーのおかげで**優秀賞を受賞できました。**

### 第5回和歌山県データ利活用コンペティション
自ら収集したデータについて、統計分析をおこない、実際の施策提案につなげるという、データハンドリングから分析の先の施策提案の部分まで、一気通貫してチームで経験できたことが本当に良かったです。
また、審査がスライドであったこともあり、伝わりやすい資料とは何かということを勉強し、プレゼン資料の作成力が向上しました。
結果は振るわなかったですが、来年はメンターとしても参加してみたいと思いました。

### 富士フィルム 第7回Brain(s)コンテスト
12月から機械学習を用いた、医療画像に関する分析コンペに出場しています。
深層学習や keras の使い方、画像分析に関する知見が新しく身に付き、深層学習まわりの研究に興味を持ち始めました。
年明けまで続くので、結果を残せるように頑張りたいです。

## 登壇
### ハッカソン START DASH! LT
https://osushi-academy.connpass.com/event/214332/

ハッカソンの参加経験などを活かして、今までハッカソンに参加されたことがない向けに紹介する LT会に招待いただき登壇しました。
ハッカソンでのアイデアの集め方などを紹介し、エンジニア育成の一助になることができました。

今年の登壇は招待していただいた 1回のみでしたが、来年は積極医的にエンジニアコミュニティづくりとイベント登壇に励んでいきたいと思います。

## OSS
### Vite
https://ja.vitejs.dev/

超高速ビルドツールの Vite がお気に入りで技術を早く日本に浸透させたいという思いから、ドキュメントの翻訳を積極的に行っていました。
Vue のコアメンバーともコミュニケーションを取りながら行うことができました。

### Vue A11y
https://vue-a11y.com/jp/

web アクセシビリティに興味を持ち始め、Vue コミュニティでの活動内容や理解を広めるために日本語版ページの開発に携わっていました。

## 就活
インターンの流れで 2社から内定をいただきました。まだもう少し年明けも就活をする予定なので、身が固まってから就活エントリを含めた記事を書きたいと思います。

## 大学・研究
研究室の先輩と知り合うことができました。日々統計や研究室の先輩としてサポートしていただき、感謝しています。
また、先生からも様々なコンペについて紹介いただいたり、日々の悩み相談をさせていただいたりなど、自由にさせていただける環境が最高です。
来年は理論の基礎を固めながら機械学習を活かした研究をしていきたいと思います。

## 2021 年お世話になった技術たち
#### フロントエンド
- Vue / Nuxt
- React / Next.js
- Svelte
- JavaScript / TypeScript
- TailwindCSS
- Chakra UI

#### バックエンド
- Golang
- Python / Flask
- PHP

#### インフラ
- AWS / Terraform
- Docker
- Heroku
- Oracle


#### データ分析・機械学習
- Python / Tensorflow
- R
Googleスプレッドシートのquery関数でリアルタイムにグラフを更新する

# はじめに

アンケートなどの入力データが更新(追加)される度にリアルタイムにグラフを更新したい場合にGoogleスプレッドシートのquery関数が便利でした。

# query関数

A列に入力データ(例えば、1〜8の数字)が追加されていきます。
E1セルに以下のquery関数を入力すると、E2〜E10セルに集計結果が表示されます。

```bash
=query(A:A,"select count(A) group by A",1)
```

![スクリーンショット 2021-12-31 21.54.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/009ccde1-c4f8-ced7-2312-5cac4c51a325.png)

# シートとグラフ

A列が更新(A列にデータが追加)されると集計結果が更新され、グラフに反映されます。

![GAS_SS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c3614c93-195b-bc16-c51c-cf2717c55068.jpeg)

# 外部キーボード(UIcreator)からデータを更新(追加)する

フットペダルを踏んだりやゲーミングボタンを押してデータを更新することも可能です。

![IMG_9283.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/cbb90bf6-5ca6-4e78-e35c-9af433cff83e.jpeg)

![IMG_9395.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8c0f509f-eb99-eb05-e8f2-c6524c140b0a.jpeg)

# Node-REDダッシュボードからデータを更新(追加)する

Googleスプレッドシート・ノードを使用してNode-REDからスプレッドシートのデータを更新することが可能です。

https://flows.nodered.org/node/node-red-contrib-google-sheets

Node-REDのダッシュボードのボタンを押すとGoogleスプレッドシートにデータが追加され、グラフに反映されることが確認できます。

![Node-RED.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0d7000df-fa18-3f76-72be-803d963e792f.jpeg)

![dashboard.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/990d9205-93bf-255e-a66f-398c8f371f40.jpeg)

![spreadsheet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ff65624f-db50-d04a-b231-404a2a67fc44.jpeg)
grep sed awkでの文字列除外

ではさっそく

grepでの除外方法

```
grep -v cpu grep.txt
```

sedでの除外方法

```
sed /cpu/d sed.txt
```

awkでの除外方法

```
awk '!/cpu/ {print}' sedtest.txt
```

https://maku77.github.io/sed/awk/delete-matched-lines.html
FigmaのInspectを見るときに鵜呑みにしない方が良いCSSのコード

## この記事の概要

FigmaにはInspect機能がありサイズや色、余白などが見れます。
かなり便利な機能なのですが、一部のプロパティはそのままコピペして実装しない方が良いので紹介した記事です。

なお、iOSとAndroidのコードも出力されるものの今回はスコープ外とします。

## プロパティ一覧

### position

ルート要素のFrameには`relative`、それ以外の大抵の要素は`absolute`、Auto layout内の要素は`static`が指定されているはずです。
普通のレイアウトで済む要素でもpositionが指定されているので、基本的な無視しましょう。

もちろん`left`や`top`も記載しないでOKです。

### font-family

既に運営しているサイトであれば、body要素にでもfont-familyが記載してあると思います。
カスケードされているので1つ1つの要素で指定する必要がありません。

### background: url();

背景に色が指定されているときは良いのですが、画像が指定されているときはそのままコピペできるものではありません。
実際のコードであればパスを指定しますから、ファイル名だけ書いてあっても動きませんよね。

### box-sizing: border-box;

borderがある要素にだけ`box-sizing: border-box;`が指定されているようです。
昨今のWebサイトであればreset.css的なもので全ての要素を`border-box`に指定していることが多いので、あえて書かずとも大丈夫な場合が多いでしょう。

### order

Auto layoutの中の要素に書かれています。

たしかに書かれている通りの数値を指定すれば見た目通りの並び順になるのですが、アクセシビリティの観点から言ってマークアップの順番と見た目の並び順を変えるのは良くありません。

Figmaの見た目通りに、左から（or 上から）順にマークアップしていけばorderを指定しなくても大丈夫です。
Windows 11 で Internet Explorerの起動するアイコンを作る方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/254aa393-6b76-370d-deb5-3bd96f532038.png)

誰でも思いつく方法だと思いますが、参考までに記載します。

##Windows 11上でIEを起動するvbsを作る
詳しくは[Windows11でInternet Exploer11を起動する方法](https://qiita.com/lumin/items/bd2a8e90efb4010e2804) より

##ie.vbs のショートカットを作る

##ie - へのショートカット.lnk を Internet Explorer.lnk にリネームする

##Internet Explorer.lnk のアイコンを設定する
アイコンの変更を行ない、
%ProgramFiles%\Internet Explorer\iexplore.exe
をアイコンのファイルとして指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/5bce2561-076f-a79d-e62f-d4853717cde1.png)

##スタートメニューに登録する

上記の Internet Explorer.lnk を
%APPDATA%\Roaming\Microsoft\Windows\Start Menu\Programs

にコピーする。

##スタートにピン留めをする
スタートメニューから　Internet Explorer と検索し、右クリックしてピン留めをします。

#あくまで非奨励ブラウザです。ご利用はほどほどに
参考：[Windows 11 にある Internet Explorer で使えること](https://qiita.com/nanakochi123456/items/ce433d4ff5f6d6a52e28)
1回のPOSTで複数テーブルに情報を登録する方法


※とある駆け出し未熟者エンジニアの備忘録です。

例えば、新規書籍登録という機能があったとします。
本の情報、在庫の情報という二つのテーブルを用意します。

本のテーブル＝Books
在庫のテーブル＝Stocks

Booksテーブルにuser_id、title、author、typeのカラムがあり、
Stocksテーブルにはbook_id、stockというカラムがあったとします。

登録を行う場合、BooksとStocksのカラムに情報を登録する場合は下記のようなコードで実行する事ができます。

```php:BookController.php
public function store(Request $request){
        $book = new Book();
        $book->title = $request->title;
        $book->author = $request->author;
        $book->type = $request->type;
        $book->user_id = $request->user()->id;
        $book->save();

        $stock = new Stock();
        $stock->stock = $request->stock;
        $stock->book_id = $request->user()->id;
        $stock->save();
        return redirect('book/create');
    }
```

このようにBookクラスとStockクラスのインスタンスを作成する事で、1回のPOSTでそれぞれのテーブルに情報を登録する事ができます。

ちなみに
下記のようにfillableの設定がされているのであれば

```php:Book.php
class Book extends Model
{
    protected $fillable = ['user_id', 'title', 'author', 'type'];
}
```

fillを使うとコードの量が減るので便利。

```php:BookController.php
public function store(Request $request){
        $book = new Book();
        $book->fill($request->all());
        $book->save();

        $stock = new Stock();
        $stock->stock = $request->stock;
        $stock->book_id = $request->user()->id;
        $stock->save();
        return redirect('book/create');
    }
```

あとはweb.php側のルーティングで

```php:web.php
Route::('/', BookController@store)->name('store');
```

view側では

```php:〇〇blade.php
<form action="{{ route('store') }}" method="post">
@csrf
<button type="submit">登録</button>
</form>
```

このようなコードでDBに情報が反映できるかと思います。
脳死で使える円と線分の交差判定アルゴリズム

中身を理解しなくても使える円と線分の判定に関する資料がなかったので備忘録として作成しました。
数式が嫌いな方は設定とアルゴリズムだけご覧ください。

## 設定
### 円
- 中心 $O(0, 0)$
    - 円の中心が原点にない場合は、原点に来るように座標変換し、最後に逆変換すれば良い
- 半径 $r$

### 線分
- 始点$A(x_a, y_a)$
- 終点$B(x_b, y_b)$

## 導出
以下一文字のベクトル($\vec{A}$)は位置ベクトルを表す.

円と線分の交点$P$は、$0<t<1$を用いて、以下の2式を満たすはずである.

```math
\vec{P} = \vec{A} + t\vec{AB} =(1-t)\vec{A}+t\vec{B} \\\
|\vec{OP}|=|\vec{P} - \vec{O}|=r
```

連立して整理すると、

```math
((1-t)x_a+tx_b)^2+((1-t)y_a+ty_b)^2=r^2
```

tについて整理すると、

```math
at^2+bt+c=0 \\\
a = x_a^2+x_b^2+y_a^2+y_b^2-2x_ax_b-2y_ay_b \\\
b = 2x_ax_b+2y_ay_b-2x_a^2-2y_a^2 \\\
c = x_a^2+y_a^2-r^2
```

ここで、

```math
D = b^2-4ac
```
と定義すると、判別式から$D<0$の場合交差しない

$D>0$の場合、直線$AB$は円と交差してそのとき$t$は、

```math
t=\frac{-b±\sqrt{b^2-4ac}}{2a}
```
となり、直線$AB$と円の交点$P$は、以下で求められる

```math
\vec{P} = \vec{A}+t\vec{AB}
```

ここで、点$P$が線分$AB$上に存在するための条件は以下の式を満たすことである.

```math
0 \le t \le 1
```

## 判定アルゴリズムまとめ

$1.$ $a, b, c$を定義する

```math
a = x_a^2+x_b^2+y_a^2+y_b^2-2x_ax_b-2y_ay_b \\\
b = 2x_ax_b+2y_ay_b-2x_a^2-2y_a^2 \\\
c = x_a^2+y_a^2-r^2
```

$2.$ $D=b^2-4ac$を定義し、$D \lt 0$なら交差しない

$3.$ $D \ge 0$の場合、$t$を計算する

```math
t=\frac{-b±\sqrt{b^2-4ac}}{2a}
```

$4.$ 2つの$t$のうち、条件$0 \le t \le 1$を満たすものについて点Pを以下のように計算する

```math
\vec{P} = \vec{A}+t\vec{AB}
```

$5.$ 点Pは求める交点である. 
ここで、条件を満たすtが存在しない場合線分$AB$は円と交差しない.
逆に、$t$が2種類存在する場合、小さい方がより点Aに近い交点である.
npmとyarn

この記事は ミライトデザイン Advent Calendar 2021 13日目（のつもり）の記事です。

業務でnpmとyarnをいじることが多かったので、
そもそもnpmとyarnってなんだろうってことで調べてみました。

## npm ってなに？
JavaScriptパッケージマネージャー。
Node.jsに同梱されているもの。
各パッケージのバージョンは、package-lock.jsonにかかれている。
[npm](https://github.com/npm/cli)

## yarn ってなに？
こちらもJavaScriptパッケージマネージャー。
npmの後から出てきたもので、npmと互換性がある。
自分でインストールする必要あり。
各パッケージのバージョンは。yarn.lockにかかれている。
[yarn](https://yarnpkg.com/)


## パッケージマネージャーとは
各ソフトウェアのインストールや更新、他のソフトウェアとの依存関係を管理するためのもの。
依存関係のパッケージを手動で1つずつインストールするのは大変だが、
パッケージマネージャーでまとめて管理できるようになる。

## npmとyarnの違い
yarnはnpmと互換性があるため、どちらも同じように使うことが可能。
package.jsonは同じものを使用できる。

インストールの速度はyarnの方が速く、npmの方が遅い。
yarnはパッケージインストール時にチェックサムを用いて検証することができるので、安全なパッケージのインストールが可能。

## どちらを使えばいいんだろうか？
業務で使用するにあたり、どちらがいいのかと調べてみたが、
好きな方を使えばいいよって書かれている記事が多かったです。
ただ、「どちらか」好きな方を使えば良いのであって、
両方を入れるのは良くないらしいです。
それぞれのバージョンが記載されているlockファイル（package-lock.jsonとyarn.lock）に書かれているバージョンが異なる場合、
バージョン管理している意味がなくなっちゃいますもんね。。。
（人によって、インストールするパッケージのバージョンが異なっちゃうので）

## 後書き
今回はざっくりと調べてみたことをまとめただけなので、
引き続きもう少し詳しく調べてみようかなと思います！

### 参考
https://github.com/npm/cli
https://yarnpkg.com/
https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
https://tcd-theme.com/2021/10/javascript-npm.html
FigJamからFigmaにコピペしてもそのまま使えるオブジェクト・そうでないオブジェクト

## この記事の概要

Figma社から出ているオンラインホワイトボードツールのFigJamですが、一部のオブジェクトはFigmaにコピペしてもそのまま使えます。
それらの特徴を記事にしました。

## FigJamのオブジェクトと、それぞれの説明

### Marker, Highlighter

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/dd44e511-666e-e344-42c7-bc9a32b011e2.png)

コピペした際は通常のPathと同様に扱われる。

### Shape

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/8c03639a-125e-8c7d-09f4-6c18b67148a6.png)

どの形状であってもOK。（テキストを追加・編集できる）
コピペした際はFigJamと同様に、テキスト量にあわせてサイズが変わる。

### Sticker

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4fcf0ff0-dee4-65a5-907a-774bdd75f0ef.png)

コピペ可能なものの、Figma上ではサインの有無を変更できない。

### Text

コピペした際は通常のTextと同様に扱われる。

### Connector

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4c251f39-81e4-16e9-7020-4d32f29156b0.png)

FigJamからFigmaにコピペして1番有用だと思われる。
Frame同士を繋げられて、なおかつ繋いだFrameを動かしても追従してくれる。

### Stamp

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/7bde5e9a-74ab-fc76-6ab8-f8cecc7434d0.png)

コピペは可能なものの、Figma上で入れ替えたりはできない。

### Widgets

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/686584e9-bd4e-e686-6fec-3d86f6221194.png)

Widgetsのままではペーストできない。
`Widgets cannot be pasted into Figma`と表示され、すぐ横に`Paste as layers`と書かれたボタンがある。
そちらを押下すると通常のグラフィック要素としてペーストされる。

### Media

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e4d8f526-6404-66ea-ca0c-c86b46aa3a65.png)

Mediaのままではペーストできない。
`Embeds cannot be pasted into Figma`と表示され、すぐ横に`Paste as layers`と書かれたボタンがある。
そちらを押下すると通常のグラフィック要素としてペーストされる。

### Code block

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/b9a8450a-4519-010e-8b6a-81262186feae.png)

ペーストできない。
`Can't paste code blocks from FigJam to Design Files`と表示されるのみ。

WidgetsとMediaは`Paste as layers`ボタンを押せばグラフィック要素としてペースト可能だったものの、こちらは一切ペーストできない。
ubuntu20.04でOAK-D Liteを動かす

# はじめに
LuxonisからOAK-D-Liteが届いたのでubunntu20.04LTSでPythonデモを動かしてみた

以下商品ページ


https://shop.luxonis.com/collections/oak-d-lite-early-bird/products/oak-d-lite-ff-early-bird-ks


# 環境
OS : ubuntu20.04LTS
Python : 3.8

# 準備

## 必要なパッケージのインストール

```bash
sudo wget -qO- http://docs.luxonis.com/_static/install_dependencies.sh | bash
```

## DepthAI APIのインストール

```bash
$ python3 -m pip install depthai
```



## Pythonパッケージのインストール

```bash
$ git clone https://github.com/luxonis/depthai.git
$ cd depthai/
$ ./install_requirements.py 
```

## udevルールの追加

```bash
$ echo 'SUBSYSTEM=="usb", ATTRS{idVendor}=="03e7", MODE="0666"' | sudo tee /etc/udev/rules.d/80-movidius.rules
```

# デモの実行

```bash
$ python3 depthai_demo.py 
```



# 参考

https://aicam.jp/tech/oak/ubuntu16

https://zenn.dev/karaage0703/articles/e7794b85529437
2021年最終日に未経験の私がスマートスピーカーを完成させた話


![スクリーンショット 2021-12-31 18.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128354/0ade381e-f0eb-a432-fc0c-cc997459a3ac.png)

#なぜスマートスピーカを作るに至ったのか？
2021年はAI関連の書籍を4冊ぐらい読む機会がありました。
「いまこそ知りたいAI ビジネス」という本に出会いました。
そこで著者である石角友愛さんが「アメリカの小学生でも自作のスマートスピーカー作ることができる。」と述べており、アメリカの小学生が出来るのであればと、ラズパイ未経験、開発未経験の私も試してみようと思いAIY Projects (Voice Kit)を購入しました。

#私が購入したキット
私が購入したのは、Google AIY Voice Kit V1
**※V2の購入をおすすめします。**
**　V1はラズパイが付属ではないので、キットを揃える必要があります。**

#Raspberry Piのセットアップ
私が参考にした記事はこちらです。
手順通りにやっていけば問題なくセットアップが完了されます！

https://killtime.blog/raspberry-pi-getting-started-with-no-display/

<img width="400" alt="[スクリーンショット 2021-12-31 19.17.16.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128354/3a0ab914-87c0-8d1a-e658-c3cd6cd12dec.png">

#ラズパイのセットアップ完了後
ここからは公式サイトのドキュメントを確認しながら進めました！
下記公式サイト

https://aiyprojects.withgoogle.com/voice-v1/

#Google Cloud/Assistantのセットアップ
私は公式だけではクリアにならなかった部分は下記の記事を参考にしました。
私が参考にしたのは3.Google Cloud/Assistantのセットアップの部分です。

https://deviceplus.jp/hobby/entry_y11/

#苦戦したところまとめ
【問題1】
どこかでファイルかAPIの応答が期待するものと違っていることでエラーが発生。
```./assistant_library_demo.py```を実行後

![スクリーンショット 2021-12-31 19.48.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128354/3f0216ab-5f4c-0a39-8bf5-0a622150ffc5.png)

原因を解析したところファイルの場所移動が必要ということが判明したので
```rm ~/assistant.json```で今あるファイルを削除
```mv ./assistant.json ~/assistant.json```でファイルを移動して解決しました。

![スクリーンショット 2021-12-31 19.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128354/82bb5d21-8f72-7fbf-8088-4287c1535693.png)
```./assistant_library_demo.py```で再度コマンド
Enter the authorization code:を要求されるようになるので、”Please visit this URL”と書いてある所の後ろのURLを、ブラウザに貼り付けてGoogleアカウントでログインします。
その後、出力されるキーをラズパイ側の”Enter the authorization code”とある部分に貼り付けて、認証完了です。

【問題2】
どこかでバージョン間の互換性が壊れていることが発覚。
```pip3 install google-assistant-library==1.0.0```を実行。
![スクリーンショット 2021-12-31 19.59.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128354/291f9d52-4c72-2cf2-5758-28f838ea7904.png)
解決させるのに参考にした記事

https://qiita.com/yujimny/items/b6ca4ab17c714d949f2e

この一連の流れによってこでファイルパスが指定されていて、正しいファイルを正しい配置になり、期待通りファイルが読み込まれるようになりました。


https://github.com/google/aiyprojects-raspbian/blob/aiyprojects/src/aiy/assistant/auth_helpers.py#L46

すべての問題が解消されたので```./assistant_library_demo.py```を実行すると
「Hey Google」とか言うと応答するようになりました！！

ついに完成！！！！！！
SREについて学ぶ - SLI/SLO編

## はじめに
サイトリライアビリティエンジニアリング（SRE）について学んだことをアウトプットしたいと思います。
今回は、サービスレベル指標（SLI）/ サービスレベル目標（SLO）編です。

## サービスレベル
サービスを適切に管理するには、サービスの重要な振る舞いを定義して、その計測と評価の方法を決定する必要があります。
一般的にサービスレベルアグリーメント（SLA）という用語が知られていますが、SLAは複数の意味で使われており、文脈に応じて数多くの意味に取られることから、指標（SLI）、目標（SLO）、アグリーメント（SLA）と用語を分けて意味が明確となるよう定義します。

- サービスレベル指標（SLI）
SLI（Service Level Indicators）は、サービスレベル指標の略です。
SLIは、提供しているサービスのレベルを計測する指標を定義します。
重要なSLIとしては、サービスの可用性、レイテンシ、スループット 等があります。

- サービスレベル目標（SLO）
SLO（Service Level Objectives）は、サービスレベル目標の略です。
SLOは、SLIで計測されるサービスレベルのターゲット値またはターゲット値の範囲です。
例えば、SLIがレスポンスのレイテンシである場合、平均レイテンシを100ms以下にするというSLOを設定します。

- サービスレベルアグリーメント（SLA）
SLA（Service Level Agreements）は、サービスレベルアグリーメントの略です。
SLAは、ユーザーとの間で結ぶ、明示的、あるいは暗黙の契約であり、SLOを満たした場合、満たさなかった場合に関する規定（払い戻しやペナルティ等）が含まれます。

## ユーザの関心事に着目する
SLI/SLOを検討する際は、自分たちが計測できることではなく、ユーザーが気にすることは何か？を考えて、測定する指標を検討します。
ユーザーが気にすることを計測するのが、難しかったり不可能だったりする場合、何らかの方法でユーザーが求めることに近似した指標とすることもありますが、単純に計測しやすいことから始めてしまえば、あまり有益でないSLI/SLOができてしまう可能性がある為、慎重に選択する必要があります。

## サービスの期待値を明確にする
SLI/SLOを定義することでサービスの期待値が明確になる為、ユーザーは自分のユースケースに適しているか理解することができるようになります。
ただし、ユーザーは提供されると言われたものに基いてではなく、実際に提供されるものに基いて構築を行うことを意識する必要があります。
サービスの実際のパフォーマンスが明言されているSLOより遥かに優れている場合、ユーザーはその実際のパフォーマンスに依存するようになります。
なので、サービスの可用性が過剰に高い場合は、システムの計画停止を意図的に行う等の運用をすることで、ユーザーから過度に依存されることを避けることができます。

## さいごに
サービスとして100%の可用性を目指すことは現実的ではありませんから、サービスレベルをSLI / SLO / SLA として具体的に定義することは非常に重要だと思います。
また、ユーザーは実際に提供されるものに基いて構築を行うということを意識してサービスレベルを決定することも大事なことだと思いました。
Figmaのウィンドウ操作やオブジェクト選択を極力キーボードだけで完結させたいときのショートカット

## この記事の概要

Figmaに限りませんが、ソフトを効率良く操作するためにはショートカットの必修は肝となります。

各ツールのショートカットは割とみなさん使いこなしていらっしゃると思うので、ウィンドウ操作まわりのショートカットをピックアップして紹介します。

## 操作とショートカット一覧

### 次のPageへ進む

```
⇟ (Page down)
ラップトップなら fn + ↓
```

### 前のPageへ戻る

```
⇞ (Page up)
ラップトップなら fn + ↑
```

### Page全体を俯瞰する

```
⇧ + 1
```

### 選択した要素を画面いっぱいに表示する

```
⇧ + 2
```

### 選択している要素の、操作エリアでの右隣のFrameにフォーカスを移す

```
N
```

### 選択している要素の、操作エリアでの左隣のFrameにフォーカスを移す

```
⇧ + N
```

### 選択している要素の次のFrameを選択する

```
⇥
```

### 選択している要素の前のFrameを選択する

```
⇧ + ⇥
```

### 選択している要素の子要素を展開して選択する

```
↩
```

### 選択している要素の親要素を選択する

```
⇧ + ↩
```

### Layersパネルを開く

```
⌥ + 1
```

### Assetsパネルを開く

```
⌥ + 2
```

### Designパネルを開く

```
⌥ + 8
```

### Prototypeパネルを開く

```
⌥ + 9
```

### Inspectパネルを開く

```
⌥ + 0
```

### Componentsウィンドウを開く


```
⇧ + I
```

### Quick actionsを開く

```
⌘ + /
```

### Tabを閉じる

```
⌘ + W
```

### 閉じたTabを再度開く

```
⇧ + ⌘ + T
```
Windows 11 にある Internet Explorer で使えること

#非奨励です！Windows 11でも Internet Explorerが使えます。

起動方法は [Windows11でInternet Exploer11を起動する方法](https://qiita.com/lumin/items/bd2a8e90efb4010e2804) より


##IEを立ち上げてみると？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/6e4a1720-3cc2-fd98-22d4-8f92b99422f4.png)

なにもかも真っ白です。

ちなみに左上にあるLastpassとamazonはメーカーPCであるため、このPCに最初からインストールされていたものです。

##アドレスバーで検索すると？
きちんとbingで検索ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/6ead24d2-c735-b194-bb79-fd7c414da3c8.png)

右の検索フォームも使用できます。

##設定画面を開示してみる
違う感じがします。機能が削られた感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/186a8820-9e17-50a9-3eda-1365bef58c0a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/f26558a5-a476-4bfd-9426-88a684dcfbb0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/e78573e8-5bf6-6552-362b-659615ce4161.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/15334ea1-7fc3-d5b4-d08e-9b8b2be7f986.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/2e06bd45-e9eb-588f-4da8-74951aa47b88.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/14b2d16c-cb78-b3e9-56df-aeaa9e677775.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/857fd635-ab8f-f7d7-847c-d41a7e0a7bce.png)

しかし、これはWindows 11のインターネットオプションと全く同一です。

##試しにスタートページを設定してみる

とおもいきや、できません！
IEが起動しなくなる恐れがありますので、JavaScript等から無理やり設定をしないことをお勧めします。

もし、無理やり設定して動かなくなったら、そのURLをレジストリエディタ上で検索すれば、削除できそうなレジストリの候補にヒットすると思います。


##Windows 11 IEでやってみたこと
* ハンゲームのActive-Xで起動するゲームのインストール
* Internet ExplorerのテキストエディタによるHTMLのソース表示機能 (秀丸エディタを使用）
* Webページのファイルへの保存
* お気に入り機能　（スタートページが設定できない代用として使えます）

##念のため
* 普段のウェブブラウジングとしては決して使用しないでください。
* IEでしか動作しないサイトでの利用にとどめてください。
* IEサポート終了のためのIE対応開発にとどめてください（できれば、[EdgeのInternet Explorerモード](https://docs.microsoft.com/ja-jp/deployedge/edge-ie-mode)のが良いです）　例えば [こんなスクリプト](https://qiita.com/nanakochi123456/items/e119a582dac242602d8b)の動作確認にはほしいかもしれません。
*
【勉強めも】React Router

#BrowserRouter
React Routerを使うためのコンポーネント。
基本的にReact Routerを使う場合はBrowserRouterで囲ってあげる。

```react:BrowserRouter
 <BrowserRouter>
  <Switch>
   <Router path="/" component="Home" />
   <Router path="/hoge" component="Hoge" />
  </Switch>
 </BrowserRouter>
```
※Switchコンポーネントはv6からRoutesコンポーネントに変更になったっぽい。
BrowserRouterのほかにもHashRouterというコンポーネントを使う方法もあるらしい。

両者の違いは以下とのこと。古いブラウザもサポートする場合は後者になりそう。
・BrowserRouterはHTML5のhistory APIを使用
・HashRouterはwindow.locationを使用


#Link

#Router

#Switch
v6ではなくなっているよう。
最初にマッチしたURLのみをレンダリングしてくれる。
Switchで囲わないときは一致したURLはすべてレンダリングされる。
[デジタル開発]NotionのAPIを使ってPythonからデータベースの値を取得する。

#Pythonコード

Notionのデータベース上の値を取得するPythonコードです。
下記の[Secret Token]と[Database ID]を適宜自分の環境に合わせて変えるだけです。

▶︎ 下記のPythonライブラリを用いています。
https://github.com/ramnes/notion-sdk-py

▶︎ NotionのAPI導入、Secret Token取得については下記のサイトを参照してください。
https://dev.classmethod.jp/articles/try-notion-api-with-postman/

▶︎ NotionのDatabase ID取得については下記のサイトを参照してください。
https://zenn.dev/5t111111/articles/785fec8d21d82b

▶︎ Notionのデータベースはこちら↓
https://opaque-pixie-26c.notion.site/Main-Page-Sample-68e2f924703f471ab0ac4b8b1a0bdf32

![66703A5C-08D0-4AF2-BE31-EADE52703874.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487027/bc7ed844-a4a9-421d-60f4-afface30f5d1.jpeg)

▶︎ その結果をNASA CEAの入力として使えば設計作業を全てデジタル化できます。
NASA CEAは実際のロケットエンジン開発現場でも使われている性能解析ソフトウェアです。
最近、Pythonから簡単に呼び出せるWrapperが出たので、全てがPython上で完結して超便利。
https://github.com/bluedack-space/OnlineRocketDesigner/blob/main/RocketEnginePeformance.ipynb

``````Python:NotionApiGetValueFromDatabase.py
import os
from notion_client import Client
token: str = os.environ.get("NOTION_TOKEN", "[Secret Token]")
notion = Client(auth=token)

dic ={
        "database_id": "[Database ID]",
        "filter": {
            "property": "Design Parameter",
            "text": {
                "contains": "[KEY]",
            },
        },
    }

import json
def json_ReplaceKey(dic,strTarget,strReplace):
    buff = json.dumps(dic)
    buff = buff.replace(strTarget,strReplace)
    dicRet = json.loads(buff)
    return dicRet

def getValue(notion,dic,Key=None):
    dicNew = json_ReplaceKey(dic,strTarget='[KEY]',strReplace=Key)
    result = notion.databases.query(**dicNew)
    value  = result['results'][0]['properties']['Design Value']['rich_text'][0]['plain_text']
    return value

value  = getValue(notion,dic,Key='Chamber Pressure')
Pc     = float(value)
print("Chamber Pressure[MPa]:"+str(Pc))

FuelName = getValue(notion,dic,Key='Fuel')
print("Fuel[-]:"+str(FuelName))

OxName   = getValue(notion,dic,Key='Oxidizer')
print("Oxidizer[-]:"+str(OxName))
``````

出力結果は下記のとおりです。

``````
Chamber Pressure[MPa]:11.0
Fuel[-]:LH2
Oxidizer[-]:LOX
``````
ラズパイイメージの焼き方（21/12/31時点）

## 要点
* MicroSDにラズパイOSを焼くときは、Raspbery Pi Imagerで焼く
* 色んなOSが選べる。
* フォーマットも同ツールでできる（っぽい）
* イメージは自動ダウンロード。ISOファイル等も選択可能
* 超らくちん

## 過去の話
MicroSDのデータが飛んでしまったので、今回再インストールをした。
使用モデルは、Raspberry Pi 4 Model B (RAM 4GB)。
以下、過去のインストールメモ。イメージを焼くツール以外は下記参照。

https://qiita.com/rootpia/items/4ec94793a7d77686fbef

## 今回の話
以前はMicroSDにOSイメージを焼くときに、dd for Windowsとか、NOOBSを使っていたが
最近はRaspberry Pi Imagerを使うようになった。

https://www.raspberrypi.com/software/

1. Windows版をインストール  
    Operating SystemにRecommendのOSを選択。Storageに焼くドライブを選択。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490864/c0dc41ff-f1c6-7938-239e-7bf71f7bad68.png" width=480 />

2. Writeボタンを押下
    しばらく放置すると、イメージのダウンロードと書き込みが行われる。

## 選択できるOS（詳細未確認）
Operating Systemでは以下選択可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490864/04e0e78d-3fde-9120-7a2a-471b6e3fdea2.png)

以下、ざっと眺めたメモ。

|見出し|内容のメモ|
|-|-|
|Raspberry Pi OS （Recommend）  |多分これを選んでおけばOK。使用モデルによっては使えないケースがあるかもしれない。 |
|Raspberry Pi OS （other）      |Legacyバージョンとかが選べる。 |
|Other general purpose OS       |Ubuntu, ManjaroLinuxなど。DebianベースのOS？？ |
|Media player                   | LibreELECなど。Media再生用OSっぽい？？|
|Emuration and game OS          |RetroPleなど。ゲーム専用OS？？ |
|Other specific purpose OS      |OctoPi（3Dプリンター用）、デジタルサイネージ用、スマートホーム用、etc.. |
|Other language-specific OS     |ロシア語用のOSのみ…？ |
|Misc utilitiy Images           |BootLoader |
|Erace                          |ストレージをフォーマットする |
|Use custom                     |ローカルストレージからファイルを選択 |
mediapipeで取った顔特徴点をstreamlitで表示する

初投稿  
mediapipeで取った顔特徴点をwebアプリ上で見れたらいいな~と思ったので  
streamlit使ったんですけど意外と苦戦したので振り返りように
###作ったアプリ
画像を入力すると顔を検出して特徴点を取った結果を表示します 
![スクリーンショット 2022-01-01 16.51.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956371/2c3a4df6-73f8-1899-315d-6ad2ab7129b9.png)

![スクリーンショット 2022-01-01 16.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/956371/04244ac1-e9eb-3113-a44e-c1d0b950c9fd.png)



画像を入れると特徴点とった顔画像を出力します、以下コード  

```
import cv2
import pandas as pd
import numpy as np
import mediapipe as mp
import streamlit as st
from PIL import Image, ImageOps , ImageDraw, ImageFont

mp_drawing = mp.solutions.drawing_utils
mp_face_mesh = mp.solutions.face_mesh

def mediapipe_static(dir_input,max_num_faces,min_detection_confidence):

    drawing_spec = mp_drawing.DrawingSpec(thickness=1, circle_radius=1)

    results = mp_face_mesh.FaceMesh(
        static_image_mode=True,
        max_num_faces=max_num_faces,
        min_detection_confidence=min_detection_confidence).process(cv2.cvtColor(np.array(dir_input), cv2.COLOR_BGR2RGB))

    annotated_image = np.array(dir_input)
        
    for face_landmarks in results.multi_face_landmarks:
        mp_drawing.draw_landmarks(
            image=annotated_image,
            landmark_list=face_landmarks,
            connections=mp_face_mesh.FACEMESH_TESSELATION,
            landmark_drawing_spec=drawing_spec,
            connection_drawing_spec=drawing_spec)

    return annotated_image

st.write(
    """ # Mediapipeから顔特徴点を表示します!!"""
)
st.sidebar.info("設定")
max_num_faces = st.sidebar.slider('max num faces:', 1, 4, 2, 1)
min_detection_confidence = st.sidebar.slider('Minimum detection confidence:', 0.1, 1.0, 0.5, 0.1)
st.sidebar.info("顔入力")
uploaded_files = st.sidebar.file_uploader('Choose a image file to predict')
if uploaded_files is not None:
    image_pil_array = Image.open(uploaded_files)
    st.image(
        image_pil_array, caption='uploaded image',
        use_column_width=True
    )
    track_button = st.sidebar.button('Track Faces')
    if track_button:
        annotated_images = mediapipe_static(image_pil_array, max_num_faces, min_detection_confidence)
        st.image(annotated_images)
```

今後は取った点を分析して認識結果とか出したいですね
後、たまにstreamlitが動かなくなる時あるのでそれも原因見つけたい

### 参考サイト
mediapipe face mesh 公式ドキュメント
https://google.github.io/mediapipe/solutions/face_mesh.html
streamlitでのスライドバーの参考
https://cafe-mickey.com/python/streamlit-8/
Next.jsでとりあえずPrettierを設定する

## 1 prettierモジュールの追加

```bash
$ yarn add prettier
```

## 2 VSCodeのprettier拡張機能を追加

-  VSCodeの設定で自動保存時に自動整形をONにすると効率があがる

## 3 プロジェクトフォルダのルートに`.prettierrc`ファイルの作成

`.prettierrc`ファイルの作成し下記の様に記述する

```json
{
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true,
}
```
letter-spacingを指定したら中央揃えのズレが生じた。

# はじめに
中央寄せのテキストで`「letter-spacing」`を設定したら、中央からズレてしまった。その解決方法を調べてみた。

調整前
![STAYHOME (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782276/86332fa5-5226-a9f2-67a6-43647548fb49.png)


#解決策
`「letter-spacing」`に続き`「text-indent」`を設定する。
どちらの値も一緒にすることでちょうど真ん中に調整することができました。

調整後
![STAYHOME (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782276/ad97d529-c2ea-3ccc-4de4-b7c1f3fe1098.png)
現在選択しているチェックボックスを取得する(ReactとuseState)

# 目的
- チェックボックスで選択した通りの内容をステートで持つ
- useStateを利用する

## 例
![スクリーンショット 2021-12-31 18.45.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57455/682d9c19-d636-2f47-fd45-9495c1a1c6f2.png)

- チェックボックスを選択し、ステートを更新する
 
![スクリーンショット 2021-12-31 18.45.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57455/31fe33a8-35d4-b39e-bf4f-fde636e6818b.png)

- チェックボックスで選択した通りにステートが更新されていることを、jsonで出力し確認できる


## ポイント
- state更新は非同期に実行される。そのため、他のステート更新を前提にした参照をすると思い通りにならないことがある
- HOOKSのuseStateはマージしない。

## コード例

```javascript:App.js
import React, {useState, useEffect} from "react";
import Checkbox from '@mui/material/Checkbox';


const App = (props) => {
// 今回保持するステート。c1~4の４つのチェックボックスの状態をそれぞれ持つ
  const [chk, setChk] = useState({
    c1:false,
    c2:false,
    c3:false,
    c4:false,
  })

// チェックボックスの更新を検知しステートを更新する
  const hndlChk1 = (event) => {
// checkBoxのバリューは event.target.checked で取得できる

// ポイント１の箇所
// setChk(別のステートの値を参照して更新したい値); という書き方をすると、更新タイミングが非同期のためうまくいかない
// useStateは、更新値に関数を与えることができる
    setChk(prev => {
// 関数のパラメータ（prev） に、前のステートを持っている。その値を使って、更新する新しい値を定義し、returnでstateに返す
      console.log("PREV>")
      console.log(prev);
      console.log("<PREV")
      console.log(prev);
// ポイント２の箇所
// useStateはクラスでのstateと異なり、マージされない。そのため、以下のように、stateに持たせる全ての属性を与える必要がある
// 更新したい属性だけをsetStateで与えると、与えたもの意外消える
      let data = {
        chk1: event.target.checked,
        chk2:prev.chk2,
        chk3:prev.chk3,
        chk4:prev.chk4,
      }
      return data
    });
  }

// 以下 hndlChk1と同じことをそれぞれのチェックボックスで実施
  const hndlChk2 = (event) => {
    setChk(prev => {
      console.log("PREV>")
      console.log(prev);
      console.log("<PREV")
      console.log(prev);
      let data = {
        chk1:prev.chk1,
        chk2:event.target.checked,
        chk3:prev.chk3,
        chk4:prev.chk4,
      }
      return data
    });
  }
  const hndlChk3 = (event) => {
    setChk(prev => {
      console.log("PREV>")
      console.log(prev);
      console.log("<PREV")
      console.log(prev);
      let data = {
        chk1:prev.chk1,
        chk2:prev.chk2,
        chk3:event.target.checked,
        chk4:prev.chk4,
      }
      return data
    });
  }
  const hndlChk4 = (event) => {
    setChk(prev => {
      console.log("PREV>")
      console.log(prev);
      console.log("<PREV")
      console.log(prev);
      let data = {
        chk1:prev.chk1,
        chk2:prev.chk2,
        chk3:prev.chk3,
        chk4:event.target.checked,
      }
      return data
    });
  }
  return(
    <Box>
// onChangeで、チェックボックスの変更イベントを取得する
      <FormControlLabel control={<Checkbox onChange={hndlChk1}/>} label="チェックボックス1" />
      <FormControlLabel control={<Checkbox onChange={hndlChk2}/>} label="チェックボックス1" />
      <FormControlLabel control={<Checkbox onChange={hndlChk3}/>} label="チェックボックス1" />
      <FormControlLabel control={<Checkbox onChange={hndlChk4}/>} label="チェックボックス1" />
    <Box>
      現在のcheckBoxステートの内容 <br></br>
      {JSON.stringify(chk)}
    </Box>
  </Box>
  )
}
export default App;
```
「デバイスサイズが変わってもテキストの改行位置を揃えたい」って言われたときに読む記事

## この記事の概要

クライアントなどから「デバイスサイズが変わってもテキストの改行位置を揃えたいんですよ」と言われたときに役に立つかもしれない記事です。
綺麗な指定とは言えないかもしれないけど、要望は叶えられるであろうCSSの書き方をまとめました。

## 状況設定

今回は以下の設定で進めます。
文字数や余白はそれぞれのプロジェクトごとで違うでしょうから、適宜読み替えてください。

- どのデバイスから見ても1行あたり15文字
- テキストのまわりのpaddingは16px

| 1行15文字で、テキスト周辺に16pxのpaddingがあるイメージ |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0aed4cd2-920a-d6aa-ff9a-87a142497aa9.png) |

## 完成物

| 横幅320px | 横幅375px | 横幅414px |
| --- | --- | --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/dffc4349-6750-2bde-0a1a-8f3d109d2d83.png) | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4c664863-c65c-0000-966b-b9d48927ab6b.png) | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e84a2efa-5a68-8efe-fe12-2437c62ef23c.png) |

少し見づらいですが、画像上部にある`Dimensions`が変わっているのに改行位置が同じなことがお分かりいただけると思います。
ディスプレイサイズが大きくなると、それにあわせてfont-sizeも大きくなっているのです。

## コード

```html
<div class="container">
  <p class="text">
    <!-- ここにテキストが入る -->
  </p>
  <!-- 以下繰り返し -->
</div>
```

```css
.container {
  padding: 16px;
}

.text {
  font-size: calc((100vw - 32px) / 15);
  /* 32px = 左側のpadding 16px + 右側のpadding 16px */
  /* 15 = 1行あたりの文字数 */
}
```

## 仕組み

- 日本語の文字は（特別な設定をしなければ）高さ=幅である
    - font-sizeで指定した値は1文字あたりのwidthとイコールになる
- 100vw = 画面の横幅いっぱいである
- つまり100vwを、1行あたりの文字数で割れば良い
    - ただし、コンテンツに余白がある場合は先ににその値を引かないといけない
Deep Learning from scratch vol.2

# abstract
本ページでは, NNの起源となるアルゴリズム, **パーセプトロン**(Perceptron)についてまとめる.
参考資料：[O'REILLY&reg;「ゼロから作るDeep Learning ~Pythonで学ぶディープラーニングの理論と実装~」](https://www.oreilly.co.jp/books/9784873117584/)
# Perceptron
:::note info
参考資料上におけるパーセプトロンとは, 「人工ニューロン」「単純パーセプトロン」と呼ばれる類のもの. 基本的な処理内容は同じ.
&harr; 多層パーセプトロン
:::
## パーセプトロンの動作原理
パーセプトロンの動作原理をモデル化すると, 以下の式で表される.

```math
y = 
\left\{
\begin{array}{cc}
0 & (w_{1}x_{1} + w_{2}x_{2} \leq \theta)\\
1 & (w_{1}x_{1} + w_{2}x_{2} > \theta)
\end{array}
\right.
```

ここで$w_{\*}$は重み, $\theta_{\*}$は閾値であり, 入力と重みの総和が閾値を超えたときのみ1を出力する. その状態を**ニューロンが発火する**と表現される.
この式を一般化するため, $b = -\theta$と置くと, 上の式は以下の形に書き換えられる.

```math
y = 
\left\{
\begin{array}{cc}
0 & (b + w_{1}x_{1} + w_{2}x_{2} \leq 0)\\
1 & (b + w_{1}x_{1} + w_{2}x_{2} > 0)
\end{array}
\right.
```

上記式で置いた$b$をバイアスと呼ぶ. ここで重みとの違いをまとめる.

* weight(重み)：入力信号の重要度をコントロールするパラメータ
* bias(バイアス)：発火しやすさをコントロールするパラメータ

## 多層パーセプトロン
上記の式では線形領域を表現しており, 非線形領域を表現できない. しかし, パーセプトロンは**層を重ねること**ができ, 非線形領域を表現することができる.

### XORゲートの作成
上記の式だけではXORゲートは実装できない. そこで, 線形領域で表されるANDゲート, NANDゲート, ORゲートを使って実装する.
$x_{1}$, $x_{2}$と$y$に関する真理値表を書くと以下のようになる.

|$x_{1}$|$x_{2}$|$y$|
|:---:|:---:|:---:|
|0|0|0|
|0|1|1|
|1|0|1|
|1|1|0|

上記の真理値表を表現すると以下の配線になる.
![6785cc90-16c9-32fb-c76d-639bc2e52d89.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2043769/ed373bb5-0fd1-1d0f-5876-a1be2c2bc82f.jpeg)
NANDゲートの出力を$s_{1}$, ORゲートの出力を$s_{2}$とすると以下のコードで実装される.

```python
# NAND, OR, ANDは別のスクリプトで実装済み
def XOR(x1, x2):
    s1 = NAND(x1, x2)
    s2 = OR(x1, x2)
    y = AND(s1, s2)
    return y
```
この構造をパーセプトロンにより表記すると, 以下の形となる.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2043769/a874a0ea-e5f5-6e6a-5289-aa6379c767d7.png)
このように層を複数重ねたパーセプトロンを**多層パーセプトロン**と呼ぶ.
動作フローを詳しく説明する.

1. 第0層の2つのニューロンが入力信号を受け取り, 第1層のニューロンへ信号を送る. 
2. 第1層のニューロンが第2層のニューロンへ信号を送り, 第2層目のニューロン$y$を出力する.

このように層を重ねることで, 複雑な処理を実装することができる.
LatexでAppendixを分離しなければならないときにlabelのみ別途定義する方法

# はじめに
会議論文等のページ数が限られた論文においてAppendixを利用することがしばしばあります．一方で，Appendixは提出用のpdfに含めることができない場合がよくあります．そのときにlabelだけを保持するときに利用した方法をまとめます．（最善でないかもしれませんが，自分が考えうる最善の方法を提示します．）
参考にした情報は[こちら](https://tex.stackexchange.com/questions/18191/defining-custom-labels)．

# 方法
以下のようなコードを利用するとlabelのみ明示的に定義することができるので

```latex

\documentclass{article}
\usepackage[hidelinks]{hyperref}

\makeatletter
\newcommand{\customlabel}[2]{%
   \protected@write \@auxout {}{\string \newlabel {#1}{{#2}{\thepage}{#2}{#1}{}} }%
   \hypertarget{#1}{}
}
\makeatother

\newif\ifappendix
% appendixを含める場合
\appendixtrue
% appendixを含めない場合（つまり，labelを明示的に定義する必要有）
\appendixfalse

\begin{document}

% 主要部分 (appendixの引用を含む)
\input{sections/section01.tex}
\input{sections/section02.tex}
...
\input{sections/sectionN.tex}

\ifappendix
% appendixの内容を記述したファイルをimport
\input{appendix/appendix01.tex}
\input{appendix/appendix02.tex}
...
\input{appendix/appendixN.tex}

\else
% appendixをimportしない代わりにlabelを明示的に定義する必要有
\customlabel{section:first}{1}
\customlabel{section:second}{2}
\customlabel{section:third}{3}
...
\customlabel{section:N}{N}

\fi

Section~\ref{section:first} % 「Section 1」と表示される
\end{document}
```
【Python覚書】twitterAPI TEST on centos stream 8(003)_twitter投稿まで

#はじめに

今月の初めの方にTwitter APIの申請したのですが、4回ほど審査を繰り返し、やっと使えるようになりました。
ただ、審査承認がおりてから、なかなか時間を作ることが出来ず放置していたので、とりあえず、APIを使った投稿だけ試してみようと思います。

# tweepyのインストール

```bash
pip install tweepy
```

#タイムラインのツイートを取得

```python:sample_program01.py
import tweepy
 
# 取得したキーを格納
myAPIKey = "xxxxxxxxxxxxxxxxxxxxx"
myAPISecret = "xxxxxxxxxxxxxxxxxxxxx"
myAccessToken = "xxxxxxxxxxxxxxxxxxxxx"
myAccessSecret = "xxxxxxxxxxxxxxxxxxxxx"
 
# Twitter API認証
auth = tweepy.OAuthHandler(myAPIKey, myAPISecret) 
# アクセストークン設定
auth.set_access_token(myAccessToken, myAccessSecret) 
# オブジェクト設定
api = tweepy.API(auth) 

#タイムライン取得
result = api.home_timeline(count=1)

for tweet in result:
    print('='*80)
    print('ツイートID : ', tweet.id)
    print('ツイート時間 : ', tweet.created_at)
    print('ツイート本文 : ', tweet.text)
    print('ユーザ名 : ', tweet.user.name) 
    print('スクリーンネーム : ', tweet.user.screen_name) 
    print('フォロー数 : ', tweet.user.friends_count) 
    print('フォロワー数 : ', tweet.user.followers_count) 
    print('概要 : ', tweet.user.description) 
    print('='*80)
```

```
================================================================================
ツイートID :  1476809584132395008
ツイート時間 :  2021-12-31 06:56:57+00:00
ツイート本文 :  記事を投稿しました！ 【Python覚書】selenium on raspberry pi(002) on #Qiita https://t.co/Zb1ftBCDHI
ユーザ名 :  おーちゃん
スクリーンネーム :  384XZdN05sRFoqh
フォロー数 :  0
フォロワー数 :  0
概要 :  特に好きな作家：東野圭吾、京極夏彦
特に好きな本：悪意、女郎蜘蛛の理
趣味：パソコン、読書、動画視聴

IT技術、株、読書感想について、まったりつぶやくつもりで始めたけど、特に考えなしに投稿してます。
================================================================================
```

おー。。。
キチンと取得できている事に感動。

#続けてTwitter投稿(失敗)
```python:sample_program02.py
# 投稿テスト
api.update_status("投稿テスト")
```
```bash
Traceback (most recent call last):
  File "studyData.py", line 17, in <module>
    api.update_status("投稿テスト")
  File "/usr/local/lib/python3.8/site-packages/tweepy/api.py", line 46, in wrapper
    return method(*args, **kwargs)
  File "/usr/local/lib/python3.8/site-packages/tweepy/api.py", line 1121, in update_status
    return self.request(
  File "/usr/local/lib/python3.8/site-packages/tweepy/api.py", line 257, in request
    raise Unauthorized(resp)
tweepy.errors.Unauthorized: 401 Unauthorized
```
権限不足で失敗しているようです。

![WS671636.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530912/cc7a4016-4ada-940c-86f0-25ed965b74da.jpeg)


#twitter Developperのダッシュボードから権限付与

![WS671637.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530912/809b1bb8-db35-1ab1-8ae7-828ad6ba1bf4.jpeg)

##アクセストークンの再発行
![WS671638.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530912/37345bf7-d06e-d651-6a5d-8ee83c7780c2.jpeg)

Callback URIとWebサイトはまだ設定していないので、「example.com」のものを利用させていただく。

##再実行して成功！

再度、下記のpythonを実行

```python:sample_program03.py
# 投稿テスト
api.update_status("投稿テスト")
```
![WS671639.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530912/e3d5293a-ddb1-cfa3-41c1-36d945b330d0.jpeg)


ようやく、スタートラインに立てたというところですね。
これから、調べて活用させていただきます。
標準入力から文字列を流し込みつつ、geditやGVimを開く

## 結論

ハイフン `-` をつける。

```
echo "吾輩はネコである。名前はまだニャーい。" | gedit - 
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/e585901d-f548-40c0-95bf-a7b5c02ae5f9.png)

GVimでも動く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/731672f7-8474-d2f3-0800-2c6601bae796.png)

VSCodeでもいけるようだ。

諸事情により、GUIのエディタばかり試したが、`nano` や `vim` などのCLIのテキストエディタもこれでいけるようである。`emacs` はこれだとうまくいかないので何か違うみたい…。

この記事は以上です。
Powershell の関数定義で気を付けること

自分向けの忘備です。

# Powershell の関数定義で気を付けること

関数定義を Javascript みたいに書きたくなる。

```powershell:
function foo( $a, $b ) {
    return $a + $b
}

Write-Host foo( "AAA", "BBB" )
```

=> foo AAA BBB
AAABBB を期待していたのだけれど、それとは異なる結果である。


さては関数定義が悪いのだろう、デバッグのヒントとなるよう、コロンを埋め込んでみる。

```powershell:
function foo( $a, $b ) {
    return "{0}:{1}" -f $a, $b
}

Write-Host foo( "AAA", "BBB" )
```

=> foo AAA BBB
前と同じ結果だし、コロンすら表示されないってどういうこと？


実は、定義側ではなく、呼び出し側に問題がある。
試しに、上記の呼び出し方を分解しててみると

```powershell:
function foo( $a, $b ) {
    return "{0}:{1}" -f $a, $b
}

Write-Host foo
Write-Host ( "AAA", "BBB" )
```

=> foo
=> AAA BBB
関数 foo を評価せぬまま終了していることがわかる。

正解は、これ。

```powershell:
function foo( $a, $b ) {
    return "{0}:{1}" -f $a, $b
}

Write-Host (foo "AAA" "BBB")
```

関数名と引数をスペース区切りで並列に書く。その全体を括弧で囲う。

括弧は式評価の意味なのでさしたる特別感はないけれど、引数はスペース区切りなのね...