OmniAICreator/Qiita-1.07M huggingface dataset:
DiscordBotを使ってslackに通知を飛ばす 

## 前書き
みなさんチャットツールなに使ってますかー？
テレワークが増えてきて、何かと使う機会が増えてきているかと思います。その中で"偏見"と"偏見"と"偏見"だけで一番使われているであろうdiscord(前から自分が使ってたから)のbot君を紹介したいと思います

今回はdiscordの特定サーバにユーザがjoinしたらslackに通知するようにしたいと思います

## 環境
+ discord.py: 1.5.1
+ python: 3.8.1
+ requests: 2.25.0

## 書かないこと
+ discordbotのTOKEN準備
+ slack Incoming Webhooksの作成

(一応参考記事だけ載せておきます)

#### slack
[【2020年度版】Slack通知はSlack AppのIncoming Webhooksを使おう！やり方を解説](https://keyama.hatenablog.com/entry/2020/04/21/181451)

#### discord
[Discord Botアカウント初期設定ガイド for Developer](https://qiita.com/1ntegrale9/items/cb285053f2fa5d0cccdf)

## discord.py
discordのapiをwrapperしているライブラリです。
公式ドキュメントがしっかりとしているので、何か困ったら、まず見ることをお勧めします
(https://discordpy.readthedocs.io/ja/latest/api.html)

## 最小構成でお為しbot
公式に最小構成コードが乗っていますので、まずはこちらを動かしたいと思います

### コード
```python:Main.py
import discord

client = discord.Client()

# botが起動したら行われる処理
@client.event
async def on_ready():
    print('We have logged in as {0.user}'.format(client))

# テキストチャンネルに投稿されたことをトリガーに動く
@client.event
async def on_message(message):
    if message.author == client.user:
        return

    if message.content.startswith('$hello'):
        await message.channel.send('Hello!')

client.run('your token here')
```
実際に起動してみましょう

```sh
$ python Main.py
```

discordのチャットで、$helloと入力すると、botからHello!と返ってくると思います

## slackにjoin通知を送る
次に特定のdiscordにユーザがjoinしたらslackに通知を飛ばしたいと思います

### コード
```python
import discord
import requests
import json

# client = discord.Client()
TOKEN = "discordbotのTOKEN"
MY_SERVER = "serverのID"

client = discord.Client()

@client.event
async def on_ready():
    print('We have logged in as {0.user}'.format(client))

@client.event
async def on_member_join(member):
    if member.guild.id == MY_SERVER:
        payload = {
            "text": f"領域展開: {member.name}"
        }
        headers = {'content-type': 'application/json'}
        url = # slack Incoming WebhooksのURL
        response = requests.post(url, data=json.dumps(payload), headers=headers)

client.run(TOKEN)
```

ユーザがjoinしたことをトリガーにon_member_join(member)の中が動きます
中身の処理では、requestsを使用してPOSTをslackのIncoming Webhooksに送っています

では、実際にユーザをJOINして動作確認してみましょう

### ...

### ..

### .


### う...うごかない...
discord APIの仕様が変わり、既存のままだと動かなくなってしまったようです
discord.py君が教えてくれました
[A Primer to Gateway Intents](https://discordpy.readthedocs.io/en/latest/intents.html)


discord.py1.5以降の場合は以下コードに修正・追加してください

```python
intents = discord.Intents.all()
intents.members = True
client = discord.Client(intents=intents)
```

## 動作確認

Slackのチャンネル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355784/ac8f28bb-dd8a-1c77-9430-8942397503a6.png)

ちゃんと見ててくれてますね!

## なんで作ったの?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355784/2ebae99e-bf9c-8b2a-9f11-f1b82efd2829.png)
ラズパイ4でjulius 4.6をセットアップ

参考
[Raspberry PiとJuliusで特定の単語を認識させる | パソコン工房 NEXMAG](https://www.pc-koubou.jp/magazine/19743)

##試した環境
[ReSpeaker Mic Array v2.0](https://www.switch-science.com/catalog/3851/)
USB-Audioクラス対応のマイクなら他のものでも動くと思う

[Raspberry Pi 4 Model B 2GB版](https://www.switch-science.com/catalog/5681/?src=raspberrypi)
イメージは2020-08-20-raspios-buster-armhfに2020/12/10までのアップデートを適用した状態

##julius本体のセットアップ

julius用のディレクトリをホームディレクトリに作成

```shell
cd ~
mkdir julius
cd julius
```
julius Githubリリースページ
https://github.com/julius-speech/julius/releases
今回は4.6を使用した。

```shell
wget https://github.com/julius-speech/julius/archive/v4.6.zip
unzip v4.6.zip
cd julius-4.6
```

julius githubリポジトリREADME.md　1.Build latest Juliusより必要なパッケージと、/dev/dspを追加するためのパッケージを導入

```shell
sudo apt install build-essential zlib1g-dev libsdl2-dev libasound2-dev
sudo apt install alsa-utils sox libsox-fmt-all
```

ビルド&インストール

```shell
./configure --with-mictype=alsa
make -j4
sudo make install
```

##juliusディクテーションキットのセットアップ

julius用のディレクトリに戻ってキット用ディレクトリを作成

```shell
cd ~/julius
mkdir julius-kit
cd julius-kit
```

juliusホームページよりディクテーションキットの配布URLを取得
https://julius.osdn.jp/index.php?q=dictation-kit.html
今回は4.5を使用

```shell
wget https://osdn.net/dl/julius/dictation-kit-4.5.zip
unzip dictation-kit-4.5.zip
```

##マイクのセットアップ
このままではラズパイ内蔵オーディオデバイスの優先順位が高いため、USBマイクが使われない。
そのため優先順位を上げるよう設定する。

```shell
sudo nano /etc/modprobe.d/alsa-base.conf
```

以下をコピペして保存

```shell:alsa-base.conf
options snd slots=snd_usb_audio,snd_bcm2835
options snd_usb_audio index=0
options snd_bcm2835 index=1
```

julius実行時のオーディオデバイスを環境変数として設定

```shell
sudo nano ~/.profile
```
```shell:.profile
export ALSADEV="plughw:0,0"
```

julius用に/dev/dspを追加

```shell
sudo sh -c "echo snd-pcm >> /etc/modules"
```

##ディクテーションキットの動作確認

```shell
cd ~/julius/julius-kit/dicration-kit-4.5/
julius -C main.jconf -C am-gmm.jconf -demo
```

`たすけて！もなふわすい～とる～む！`と喋ってみた結果...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219748/14b1358e-ff7c-8a55-0e44-0bc734c028c5.png)
Simple AD (AWS Directory Service)を消したら大変なことになった話

# 何をしたか

> Simple ADは、AWS Managed Microsoft ADが提供する機能のサブセットを提供しており、ユーザーアカウントやグループメンバーシップの管理、グループポリシーの作成と適用、Amazon EC2インスタンスへのセキュアな接続、Kerberosベースのシングルサインオン（SSO）の提供などが可能です。

こいつを削除しました。


# なぜ消したか

AWSのアカウント自体が特定のプロジェクトのサービス用のアカウントで、
その中にSimple ADがポツリと存在していました。

特にユーザー認証を行っているサービスでもなく、EC2への接続もSSHのため、
「誰かがテストで作ってそのまま忘れたのかな？」と思いました。

**月5,000円** くらいかかっており、費用削減になるかなと思い、
(2年前に) プロジェクトのサーバー構築を担当した（**既に退社している相談役**の）インフラエンジニアの方に、

ワイ「**これ消していいですかー？**」
インフラニキ「**使ってないので消しちゃってください**」

というやり取りのもと、**削除しました**。


# どうなったか

10分も経たずに「 **ページ見れないんだけど？** 」と連絡が来ました。

すべてのEC2からAurora MySQLへの接続ができなくなりました。
本番環境だけでなく開発環境などの **すべてのEC2** において機能しなくなりました。

どうやら、EC2の **名前解決用のDNSサーバー** として運用していたそうです。
EC2からMySQLへはパブリックアクセスとなっており、そのときに指定していたエンドポイントURLからIPが引っ張ってこれない状態になりました。


# 復旧までの死闘

## ～30分

連絡が来てから真っ先にするのは、とりあえずWebサーバーの稼働確認。
SSHでログインして、Webサーバーのサービス確認。

そして、確認中にデータベースへ接続できないことが判明した。

## ～1時間

どうやら、ネットワーク周りが怪しい。
`curl ipconfig.io` をやっても `curl: (6) Couldn't resolve host` のようなエラーが出る。
ホスト名が解決できていない、つまり名前解決ができていないのだ。

よし、Simple AD を作り直そう！

## ～2時間

もちろん、作り直したところで元に戻るわけでもなく…。
**うろ覚えの設定だけ** 打ち込んだ Simple AD に立ち上げました。
（こんなことなら消す前に **スナップショット** 作っておけばよかった）と思っても後の祭り。

今までは妖精さんが勝手に設定してくれてたから、ネットワーク設定なんてわからん。

Simple ADの詳細画面にも「**ディレクトリの DNS 名**」くらいしか書いてない。
他の紐づくサービスへのリンクがあるわけでもない。
もちろん **Route 53** も確認、しかしそんなDNS名は存在していない。

## ～2時間30分

ネットワークのサービスっぽいやつを、手当り次第に確認！
VPC、サブネット、ネットワークACL、DHCPオプションセット…。 **DHCPオプションセット** ！！

やりました！ **ドメイン名** がSimple ADで設定されているものと**同じ**だ！
（**じゃあリンクつけといてくれよ！！！**）と思いながら設定を確認！！

`Simple AD ⇔ DHCPオプションセット ⇔ VPC ⇔ EC2` のような感じで紐付いているようだ。

## ～3時間
なんか「**ドメインネームサーバー**」とかいう項目にローカルIPアドレスっぽいのが2つ書いてある…。
何これと思いつつも、EC2の `/etc/resolve.conf` と比較。

```/etc/resolve.conf
search {Simple ADのDNS名と同じ}
nameserver {DHCPオプションセットの1番目のIPと同じ}
nameserver {DHCPオプションセットの2番目のIPと同じ}
```

これじゃダメなのか！？

## ～4時間

インフラニキ「**AWSに問い合わせてみたら？**」
ワイ「！！」

早速、代理店経由でAWSに問い合わせ。
現在の症状を詳しく記述、**急いでるからこそ** 1発で的確な返事がほしいので、**できる限り詳しく**！

色々調べつつ、40分後くらいに返事。

AWS様「Simple ADのディレクトリのIPアドレスを確認いたしましたところ **現在の設定とは別のIP** で作成されておりました。」

「よし来た！」と思う反面「Simple AD作ったときにそんな項目どこにもなかったけど！？」って思ってしまった。

## ～5時間

新しいIPアドレスで `/etc/resolve.conf` を書き換えよう！

````/etc/resolve.conf`
search {Simple ADのDNS名と同じ}
nameserver {新しいの1番目のIPと同じ}
nameserver {新しいの2番目のIPと同じ}
```

再起動！！

がっ……駄目っ……!

名前解決できない、設定が元に戻ってしまった！！

## ～5時間30分

どうやらDHCPの設定が反映される模様？
そういえば、DHCPオプションセットの設定を変えていなかった！

新しい **DHCPオプションセット** を作成し、新しい **ドメイン名** と**ドメインネームサーバー** を設定！
そして、VPCの紐付け！
EC2を再起動！

いけた！

つながった！！

## ～終戦

すべてのEC2を再起動し、無事完了。

# 戦後処理

無事に終わったと思ったけど、まだまだやることは多い。

## 顛末書

やり取りなどを事細かにまとめました。
ただ、「 **再発防止策** 」については頭を抱えました。

とりあえず、「**属人化を防ぎ、複数人でサーバーの構成を理解し、サーバー設定を触る際はできるだけ大勢に確認したうえでやる**」みたいなことを書いた。


# 終わり

反省はしつつ、インフラエンジニア増やしてくださいと思いました。
クラスの継承について

#はじめに
クラスの継承についてフワッとした理解だったので、自分なりにまとめてみます。
#継承とは
新しくクラスを作成する時に、他のクラスのプロパティ、メソッド、イニシャライザなどの型を再利用する事。
再利用する事で何度も同じことを書かなくて良くなります。
継承先では継承元に追加したい物だけを定義すればいいので楽チン！
ちなみに、継承先のクラスは継承元のクラスのサブクラス、継承元は継承先のスーパークラスと呼ばれています。
#注意点
Swiftでは複数のクラスから継承する事はできなくなっています。
#継承してみた
playgroundで試してみた。
Animalクラスでは定数animalを定義して、イニシャライザで初期化する事で使えるようになります。
初期化された定数animalとanimalを使った関数eatをAnimalクラスは持っています。
コメントアウト部分が実行結果になります。

```swift
class Animal {
    let animal : String
    init(animal: String) {
        self.animal = animal
    }
    func eat() {
        print("\(animal)は食べる")    
    }
}
let animal = Animal(animal: "動物")
animal.eat()      //"動物は食べる\n"
```
次に、DogクラスはAnimalクラスを継承しています。
定数nameとfoodを追加して初期化します。定数animalは継承してるので定義する必要はなく、初期化を行います。
関数eatも同様に継承してるので利用できます。
定数dogにDogクラスそれぞれの定数の値を決めて、関数を使う実体化するとコメントアウトの結果が得られます。

```swift
final class Dog :Animal {
    let name: String
    let food: String
    init(animal: String, name: String, food: String) {
        self.name = name
        self.food = food
        super.init(animal: animal)
    }
    override func eat() {
        print("\(animal)の\(name)は\(food)を食べる")   
    }
}
let dog = Dog(animal: "犬", name: "ポチ", food: "ドックフード")
dog.eat()       //"犬のポチはドックフードを食べる\n"
```

ちなみに、overrideはスーパークラスで定義されているプロパティやメソッドを再定義する事です。
このコードでは、関数eatを再定義して文章の内容を変更しています。
`print("\(animal)は食べる")`→`print("\(animal)の\(name)は\(food)を食べる") `
#参考文献
石川洋資・西川勇世、『[増補改訂第３版] Swift実践入門　直感的な文法と安全性を兼ね備えた言語』、技術評論社、２０２０年４月２８日、４５３ページ
[Elixir] GenServerのアイドルタイムアウト

この記事は [Elixir その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir2) 16日目です。

前日は、「[[Elixir] GenServerのCallとCast](https://qiita.com/mnishiguchi/private/542ec8bcea454b00a32a)」でした。

本日もGenServer関連の話題です。

## はじめに

さて、Elixirの「Let it crash」は本当にAWESOMEで正しくSupervisorを設置されすれば、何か問題があって子プロセスがクラッシュしてもSupervisorが自動でプロセスを再生成してくれます。
便利ですし、感動さえ覚えます。しかしながら、何もかも再起動して良いのでしょうか？　そこをしっかり考えたいです。
Elixirのプロセスがいくら軽量だと言っても、なくてもよいものに関してはないほうが良いと思うのです。

GenServerを書くときには、アイドルタイムアウトの必要性も考えてみても良いかもしれません。

## アイドルタイムアウト設定方法

設定方法は簡単です。

1. GenServerの各callback関数の戻り値の３つ目にミリ秒の整数を指定。
2. `:timeout` messageを処理する`handle_info/2`を追加。その戻り値を`{:stop, :normal, state}`にすることでプロセスを停止させる。

```elixir
defmodule ExampleServer do
  @idle_timeout 3000

  use GenServer, restart: :temporary

  require Logger

  def start_link do
    GenServer.start_link(__MODULE__, nil)
  end

  def init(state) do
    {:ok, nil, @idle_timeout}
  end

  def handle_call(:hello, _, state) do
    {:reply, "Hello", state, @idle_timeout}
  end

  def handle_info(:timeout, state) do
    Logger.info "Shutting down #{inspect(self())}"
    {:stop, :normal, state}
  end
end
```

```elixir
# プロセスをスタート
iex> {:ok, pid} = ExampleServer.start_link
{:ok, #PID<0.135.0>}

# ３秒後自動でプロセス停止
iex>
09:18:59.764 [info]  Shutting down #PID<0.135.0>
```

## さいごに

今後更に新しいことを学んだら随時内容も更新していこうと思います。

---

明日は「[[Elixir] プロセス使用を検討する基準](https://qiita.com/mnishiguchi/items/7e03e6664900f4402d40)」です。引き続き、Elixirを楽しみましょう。

- [Elixir その1 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir)
- [Elixir その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir2)
- [【毎日自動更新】QiitaのElixir LGTMランキング！](https://qiita.com/torifukukaiou/items/1edb3e961acf002478fd) by @torifukukaiou
商品の割引額から税率計算までやってくれるiPhoneショートカット 


##あらすじ
Twitterを眺めているとあるツイートが流れてきた。オリジナルのツイートが見つからないのでここでは説明だけにしておくが、なにやら商品の表示価格と割引率をiPhoneに入力するだけで、割引後の価格がいくらで何円分安く買えるかが一目でわかるアプリがすごい！といった内容であった。割引は大抵20, 30%などキリの良い数字であり、正直これくらいの計算は面倒に感じないので自分は使う機会はない。が、例えば高価な買い物などちゃんと計算を行いたい場面において、この計算に消費税率+10%の計算も加わると少し面倒くささを感じる時がある。なお、この+10%計算は先程のアプリでは対応していないようだ。ここで何となく**「これってiPhoneのショートカットアプリで作れるんじゃね？」**と考え始めてしまった私は早速ショートカットの作成に取りかかった。

##ショートカットの構成
以下の構成で作った。
・表示価格の入力させる
・表示価格が税込か税抜か尋ねる
・何%オフか入力させる
・計算して割引後の価格と割引額、税抜価格の場合は税込価格を表示
"メニューから選択"機能のはいorいいえでif文のように条件を分岐させる

たったこれだけである。以下が実際のショートカットのスクリーンショット。
<img width="500" alt="Screenshot at Oct 27 10-24-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/bb446426-dacf-a934-afb3-23a98df5f571.jpeg">
<img width="500" alt="Screenshot at Oct 27 10-24-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/4d127d4b-6504-817a-60bd-f0f39e3f5bca.jpeg">
<img width="500" alt="Screenshot at Oct 27 10-24-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/8e79f2f4-26f2-cc98-2d30-a5f200868f3a.jpeg">
<img width="500" alt="Screenshot at Oct 27 10-24-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/28557b63-fe93-b1b8-5e45-a315459f7d71.jpeg">
<img width="500" alt="Screenshot at Oct 27 10-24-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/8c316988-d402-bbc4-da17-af4ace410c26.jpeg">
<img width="500" alt="Screenshot at Oct 27 10-24-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330454/1bb7b33a-e6ef-e5d4-85c8-74452eded8e6.jpeg">

##動作チェック
税込1100円の10%オフでの動作
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">割引計算ショートカット<br>税込1100円の10%オフでの動作 <a href="https://t.co/nOSRTZ27li">pic.twitter.com/nOSRTZ27li</a></p>&mdash; ベンゼンのおもちゃ箱 (@zurapoppo_htn) <a href="https://twitter.com/zurapoppo_htn/status/1337398662654148618?ref_src=twsrc%5Etfw">December 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

税抜1000円での10%オフでの動作
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">割引計算ショートカット<br>税抜1000円の10%オフでの動作 <a href="https://t.co/E8dsFZv07D">pic.twitter.com/E8dsFZv07D</a></p>&mdash; ベンゼンのおもちゃ箱 (@zurapoppo_htn) <a href="https://twitter.com/zurapoppo_htn/status/1337399023825637378?ref_src=twsrc%5Etfw">December 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##ショートカットの配布
以下に共有用のリンクを貼っておきます。ダウンロードにはiPhoneの設定->ショートカット->信頼されていないショートカットを許可をオンにする必要があるので各自設定の変更が必要です。

https://www.icloud.com/shortcuts/d3d8d98dee7749b9b894007eb4c623b8
LaravelでS3を使う

# lysystem-aws-s3-v3 1.0 インストール


プロジェクトのルートィレクトリにflysystem-aws-s3-v3 1.0をインストール

```
プロジェクトルート $ composer require league/flysystem-aws-s3-v3 1.0
```
# .envにS3のバケットとアクセスキーの設定

.env に AWS S3へのアクセス認可されてるIAMアカウントのアクセスキーを入力

```
アクセスキーのCSVファイルがあれば、それを参照。

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET=バケット名
```
# コントローラーにS3用のトレイトを入力（必須かは不明）

```
use Illuminate\Support\Facades\Storage;
```

# こんな感じで使う

```
use Illuminate\Support\Facades\Storage;

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

// S3に格納する処理
public function store(Request $request) {

//リクエストから画像を受ける
$image = $request->file('image');

// 第一引数:保存場所(バケット内)のパス
// 第二引数:保存したい画像
// 第三引数: 外部からアクセスするのに必要らしい
Storage::disk('s3')->putFile('/',$image,'public');
}
```
bit wise命令

# はじめに
 - この記事は[ひとりNEONアドベントカレンダー2020](https://qiita.com/advent-calendar/2020/neon-only) 14日目の記事です
 - [昨日はニュートン法で割り算と平方根を計算する命令](https://qiita.com/tomoaki_teshima/items/e72edbcd806b347e6eef)を紹介した。
 - 今日はbit演算子命令を紹介する


![bitwise.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12162/8f3f4439-2d1e-2c69-5e24-8a8e0aab14d2.png)


 - 基本的には整数型のみ
    - `bsl`には浮動小数点数型を、`tst`命令には多項式型を引数に取るタイプの命令が存在する
 - bitwise AND、bitwise OR、bitwise XOR、bitwise NOT、bitwise NOR、bitwise NANDがある。
    - あと`tst`命令と`bsl`命令も紹介する



# OpenCVでの実装の参考
 - [Carotene内の実装](https://github.com/opencv/opencv/blob/b39cd06249213220e802bb64260727711d9fc98c/3rdparty/carotene/src/threshold.cpp#L471-L481)
 - 実際やってるのはしきい値処理

```.cpp
        for (; j < roiw8; j += 8)
        {
            uint8x8_t v0  = vld1_u8(src + j);
            uint8x8_t r0 = vcgt_u8(v0, vthreshold8);
            uint8x8_t r0a = vbic_u8(v0, r0);
            vst1_u8(dst + j, r0a);
        }
        for (; j < size.width; j++)
        {
            *(dst + j) = *(src + j) > threshold ? 0 : *(src + j);
        }
```
 - `bic`命令を使っているが、引数の`r0`は`0xff`か`0`のどちらかの値を持つ
    - `cgt`命令は比較命令で、各ベクトルの対応する要素同士で`v0 < vthreshold`を評価する
    - つまり、`v0`がしきい値未満だと、`0xff`が入り、それ以外だと`0`が入る
    - `bic`命令は、`a AND NOT b`なので、結果、しきい値未満の画素は`0`になる

 - もう1件、`and`命令の確認

```.cpp
            for (; j < roiw8; j += 8)
            {
                uint8x8_t v_src = vld1_u8(src + j);
                uint8x8_t v_dst = vand_u8(vcge_u8(v_src, v_lower8), vcle_u8(v_src, v_upper8));
                vst1_u8(dst + j, v_dst);
            }

            for (; j < size.width; j++)
            {
                u8 srcVal = src[j];
                dst[j] = lowerThreshold <= srcVal && srcVal <= upperThreshold ? 255 : 0;
            }
```
 - `vand`命令の入力2つはやはり`0xff`か`0`のどちらか。
 - それの`and`を取ることで、所定の条件のときだけ255が書き込まれる
 - 最後の一文はベクトルで余った端っこの処理なので、ベクトル処理でなく通常のコード処理である
 - ベクトル命令と見比べてみると各命令の中身がわかる


# 早見表
| 命令 | 引数 | 処理内容 |
|:-:|:-:|:-:|
|`and`   |`a,b`   |`a AND b`    |
|`orr`   |`a,b`   |`a OR b`     |
|`eor`   |`a,b`   |`a XOR b`    |
|`bic`   |`a,b`   |`a AND NOT b`|
|`orn`   |`a,b`   |`a OR NOT b` |
|`mvn`   |`a`     |`NOT a`      |
|`tst`   |`a,b`   |`(a AND b) == 0`  |
|`bsl`   |`a,b,c` |`c XOR ((c XOR b) AND a)`   |


# `tst`
 - `a AND b`が0になるかどうか。
    - 0になれば結果は`0xff`のように、各要素の全ビットが立つ
    - それ以外の場合は、0になる
    - bitwise命令というより、[比較命令](https://qiita.com/tomoaki_teshima/items/019f7d563e83cd0027ee)に近いような？そっちに入れておけばよかったかも？


# `bsl`
 - bitセレクトという変わった命令
 - 引数を3つ取るが、
    - 第1引数(`a`)のbitが1ならば第2引数(`b`)からデータを持ってくる
    - 第1引数(`a`)のbitが0ならば第3引数(`c`)からデータを持ってくる
    - bit単位で`b`と`c`の結果をbit単位で組み合わせる命令で、どちらを持ってくるかは`a`の内容次第

# おわりに
 - bitwise命令を紹介した。
 - bit演算子で結構面白い演算もできるので、この演算の組み合わせで色々やってほしい
 - 明日も手島の執筆の予定で、`dup`命令を紹介する。
0から始めるXcodeの基礎のまとめ

毎日少しずつ追記していきます。

この記事は、よちよちクラスの基礎の基礎です。
開発環境は、Xcode11.5
参考Youtubeサイトは[Swiftアプリ開発入門 Xcode11編](https://www.youtube.com/playlist?list=PLQ5rERkGSxF95L-T9IbrEuEizInbd2siMhttps://www.youtube.com/playlist?list=PLQ5rERkGSxF95L-T9IbrEuEizInbd2siM)

##2020年12月11日
今日は[Xcode11アプリ開発入門Part 7 テキストフィールドの配置と入力文字の取得](https://www.youtube.com/watch?v=mvehJNY5np8&list=PLQ5rERkGSxF95L-T9IbrEuEizInbd2siM&index=7)です。

```swift
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var textfild: UITextField!
    @IBOutlet weak var label: UILabel!
    
    @IBAction func presButton(_ sender: Any) {
        
        print(textfild.text!)
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}
```
ボタンを押した時の処理を「アクション」という。

```swift
    @IBAction func presButton(_ sender: Any) {        
        print(textfild.text!)
    }
```
[presButton]って名前をつけたボタンを押すと{
コンソール領域にプリント（出力する）（テキストフィールドに入力されたテキスト）
って意味のコードとなります。

__＊ボタンの名前について__
[presButton]のように、最初の単語を小文字にして次の単語は大文字で始めるルールがある。

コンソール領域は、アプリを使うユーザーには見えず、
開発者側がXcodeでみることのできるコード。
使用目的は、そのコードがちゃんと稼働しているか確認するため。
qiitaに記事を投稿するための記事

## この記事のゴール

記事を書くなら、多くの人にとって嬉しい形で伝わるように、最低限気を付けたほうが良いポイントを伝えること。

## モチベーション

- 後から見返した時に、何が言いたいのか、読みやすい記事にしたい
- 読み手にとって失礼がないような記事を書きたい

## お品書き

- 良い記事を書くためのロードマップ
    - 用語を正確に
    - 目的を明確にする
    - 具体的な例を入れる
- 技術系の記事に求められる要素
    - 前提となる環境を列挙する

### 良い記事を書くためのロードマップ

いくら尖った技術の事しか扱わないと言っても、人対人なので最低限のお作法を身に着けた上で発信したいですよね。

ということで、記事を書く上で何を意識すべきかをピックアップしてみました。

#### 用語を正確に

用語とは？　例えば Ruby on Rails とかDDDとかPythonとかのそれに当たります。
一口にPythonといっても, バージョン2系と3系で大きく違いますし、ドメインが〜○○という時のドメインとは何文脈のドメインなのかを枕言葉として添えておかないと読み手に誤解を与えかねません。

プログラミングに関する用語は特に抽象的なものだったり、企業によって解釈の違いがありますので、客観的にみて誤解されそうであれば、図やwikiなどを用いてみることをオススメします。

#### 目的を明確にする

極めてシンプルですが、最初にこの記事は何を目的として書かれているのかを宣言しておくことが大事です。

メリットとして

- 書き手が余計な情報を省くことができる(記事の書きやすさに貢献)
- 読み手はパッと見た瞬間に欲しい情報が書かれているかどうか判断しやすい(記事の読みやすさに貢献)

Qiitaであれば、`記事のタイトル = 目的` くらいの気持ちが良いのではと思います。

覚書の情報なのか、困りごとを一般的に解決したいのか大違いですよね。

#### 具体的な例を入れる

エッジケースな記事なら、コピペで使えるコードを載せておくのがベターですね。

抽象的な話（アーキテクチャなど）でも、サンプルコードがあったほうが、ステップ・バイ・ステップで理解が進められるので、
読み手からするとありがたいですね。

もちろん、コードにまで落とし込まなくてもUML図などを用いて視覚的に理解しやすいようにするのも手です。

要は、読み手に疑問を残さないようにしておくことが重要ということ。

### 技術系の記事に求められる要素

#### 前提となる環境を列挙する

列挙するポイントは、その環境が異なった時に書いた内容の期待値が変わる恐れがあるかどうかです。

フロントエンドだと、どのブラウザの何バージョンかですし、
バックエンドはOSやPCのスペックなど。

AWSやGCPなどのクラウドを前提とする場合、具体的に書くほど再現性が高まるので気にした方が良いでしょう。

一例ですが、AWSでNode.jsのAPIサーバーを建てる場合は

- EC2のインスタンスタイプ
- Node.jsのバージョン
- npmのバージョン

は最低限あった方が嬉しいですね。

逆に、この手順通りにすれば確実にこうなるよ、と誘導するやり方も良いですね。
IPhone Safariで要素がキーボードに押し上げられてしまう問題とその対処

# はじめに
この記事は「[リアズ Advent Calendar 2020](https://adventar.org/calendars/5389)」の11日目の記事です。

皆さん初めまして。リアズフロントエンジニアのよしだです。
今年３月に入社して主にフロントエンドエンジニアとして弊社運営の各ライブチャットサイトの
html5対応などサイトの改修を行っています。
人生２度目の転職と新型コロナが重なり今年はあっという間に時が過ぎていきました。
本日はそんなリアズのフロントエンジニアとしての9ヶ月間の勤務の中で、ある不具合とその対応についてお話しします。

# 目次
1. [iPhone Safariだけソフトキーボードが要素を押し上げてしまう](#Chapter1)
1. [対応方法](#Chapter2)
1. [現状](#Chapter3)
1. [終わりに](#Chapter4)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# iPhone Safariだけソフトキーボードが要素を押し上げてしまう
今年の秋頃、何故かiPhoneのsafariだけチャットの入力フォームを押下してソフトキーボードを起動すると
何故か中途半端に要素が押し上げられ、映像の一部が隠れてしまうという状態になっていました。
文字だけではイメージしづらいので実際のチャット画面の画像で説明します。
発言ボタンを押下すると、写真の様に入力フォームが表示され、ソフトウェアキーボードが出現します。
それと同時に要素が少し上にずれてしまい、実際の配信画面が一部隠れてしまっているのがわかるかと思います。
なお、Androidではこの様な挙動は起きず、要素が上に上がってしまうこともありませんでした。
![ダウンロード (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946964/992ab1cd-ab88-0d48-587e-2ddb2d7dd399.png)

何故、iPhone Safariだけこの様な挙動になるのか、それはsafariの仕様?から来るものでした。
具体的に公式のドキュメントなどに記載されていたわけではなく、私が動作を確認して見つけたものなので
断定はできませんが参考程度に次の画像を見てください。
![ダウンロード (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946964/d9d51122-ea9e-bdee-cdcd-b2db9018e1ca.png)
次の画像はVueのデモページで、vueのイメージ画像の配下に適当なinputタグを配置し、フォーカスを当てた時の画像になります。
入力フォームが表示領域の上下等間隔の真ん中に位置していることがお分かりでしょうか？
どうやらiPhone Safariではinputなどの入力要素にフォーカスが当たった場合、自動的に対象のフォームが表示領域の中央に位置する様に自動的に動きます。先ほどの入力フォームもこの挙動があったために、動画部分が画面外に一部押し上げられてしまった様に見えたわけですね。

<a id="#Chapter2"></a>
# 対応方法

実は要素が押し上げられることなく、ソフトキーボードを表示する方法があります。
結論を先に述べると入力フォームを要素の最上部に配置している状態でフォーカスを当てると
表示領域の中央補正がなく、そのままソフトキーボードを表示することができます。
代表的なのはスマホブラウザ版のyahooの検索フォームなどでしょうか。
チャット画面で行うと以下の画像のイメージになります。
![ダウンロード (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/946964/d7acf411-4f52-c730-6a30-af8cc98e3800.png)
しかしこのままではチャットをやるには不格好ですし、使いづらいですね。
そこで、下記の様な実装を行うことにしました。

```
// ソフトウェアキーボード起動中に一時的に入力フォームを画面最上部に移動し、すぐ元の位置に戻す
// はじめに対象の入力フォームの要素を取得する
const form = document.getElementById('入力フォームのId');

// Vueで実装した入力フォーム要素に設定している表示/非表示のフラグを非表示にする
this.status = 非表示時の値

// bottomプロパティを削除し、topプロパティを付与して一瞬画面上部に移動
form[0].style.removeProperty("bottom");
form[0].style.top = "0";
form[0].style.opacity = "0";

// その後すぐ表示/非表示のフラグを表示に変更して、表示時限定で適用されるcssを反映する
// これにより上記のcssが無効となる
this.status = 表示時の値

// 入力フォームにフォーカスする
focus();
```
ソフトウェアキーボードが表示されるのがフォーカスメソッドが実行された後になるので意味がないのでは？
と思われるかもしれません。ですがVueの表示/非表示のフラグを変えてVueが更新されるよりも早く
フォーカスメソッドが実行されるので、入力フォームがまだ画面最上部にある状態でフォーカス、
ソフトウェアキーボードが表示される事で要素を押し上げることなくキーボードが表示されるのです。

本来はソフトキーボードが表示中かどうかjavascriptで取れれば良かったのですが、
残念ながらjavascript側からソフトウェアキーボードが起動途中なのか、表示中かを検知するライブラリは存在しません。
一応表示されているかどうかは表示されている要素の大きさを取得すれば判定はできそうです。
これが最適解とは言い切れませんが、同じ現象でお悩みの方の一助になれば幸いです。

<a id="#Chapter3"></a>
# その後

今のところは不具合の報告もなく動いています。
ただブラウザのアップデートによっては挙動が変わってしまう場合もあるので注意が必要です。
こうやってQiitaに書いて振り返ってみると結構力技によるゴリ押し感がすごいですね……。
もっとスマートにできる方法があればいずれ直してみたいと思います。

<a id="#Chapter3"></a>
# 終わりに

2020年12月現在、リアズではサーバーサイドエンジニアを募集しています。
完全リモートもOKなので、興味がある方は是非募集要項に目を通していただければ幸いです。
[リアズ経験者採用 サーバーサイドエンジニア](https://reas.jp/recruit/wanted/job01a/)
nginxのserver_tokensディレクティブ

server_tokensとは、エラーページと "Server "レスポンスヘッダフィールドにnginxのバージョンを表示するかどうかを設定するディレクティブ
デフォルトはonなのでnginxのバージョンが表示される。

↓デフォルト

```
$ curl localhost -I
HTTP/1.1 200 OK
Server: nginx/1.14.1 * これ
Date: Fri, 11 Dec 2020 14:07:20 GMT
Content-Type: text/html
Content-Length: 4057
Last-Modified: Mon, 07 Oct 2019 21:16:24 GMT
Connection: keep-alive
ETag: "5d9bab28-fd9"
Accept-Ranges: bytes
```

↓offにする。nginxのバージョン情報が消える。

```nginx.conf
server_tokens off;
```

```
$ curl localhost -I
HTTP/1.1 200 OK
Server: nginx
Date: Fri, 11 Dec 2020 14:10:54 GMT
Content-Type: text/html
Content-Length: 4057
Last-Modified: Mon, 07 Oct 2019 21:16:24 GMT
Connection: keep-alive
ETag: "5d9bab28-fd9"
Accept-Ranges: bytes
```
OpenVINOをサービス化へ！略して、OVaaS!①

#はじめに
我が校、東京デザインテクノロジーセンター専門学校では、インテル株式会社様ご協力の元、**OVaaS**というwebサービスを今年の8月から作っています。
皆様に、このプロジェクトを知っていただくためにこの記事を投稿しました。
今後も、連載という形でOVaaSを紹介していきます。
初回は、コンパクトにOvaaSの説明だけを書いています。
どうか温かく見守っていただけますと幸いでございます。

![download.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670396/830be02a-a38b-3785-452f-dffef8d4048b.jpeg)





#目的
Intelでは、**OpenVINO**というソフトウェアを**2018年**からリリースしています。
([OpenVINO,OpenVINOModelServerは、こちらの記事の中で説明しております](https://qiita.com/Tugawa/items/4bf4dddc95bd25b5dad1))


我が校で、8月にインテル株式会社が提供するOpenVINOのハンズオン講義が開催されました。
講義を聞いて、OpenVINOはAIサービスを作るには面白いツールだが、
インストールや設定などがあり、使うまでが色々と面倒だなと感じました。

そこで、誰でもが簡単にOpenVINOを動かせるようなサービスを作れば非常に便利だなと思い、このプロジェクトを立ち上げました。



#OVaaSとは？
**No setup! No command! No code! ​Supports full features of OpenVINO.​**

セットアップ、コマンド、コードを書かずに、OpenVINOを動かすことができる(**OpenVINOのサービス化**)を目指しております。

今は、第一段階として、OpenVINOのデモツールを作成しています。

.......これだけだと、さっぱり伝わらないので、図を用いて簡単にご紹介いたします。

![スクリーンショット 2020-12-18 18.48.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670396/3a56b6be-5617-d4a0-6834-b9e101c9c4b7.png)

1.webサイトに、AIモデルにあったjpegファイル(**handwritten(日本語の手書き文字認識)の場合はwebサイトに付属しているホワイトボードに文字を書いてもらうと、自動でjpegファイルに変換され、アップロードされます**)をアップロードする

2.webサイトにアップロードしたjpegファイルをOpenVINOModelServerに送る

3.OpenVINOModelServerがjpegファイルを推論する

4.推論した結果をwebサイトに送り、結果を表示する

**2~3,3~4の間にjpegファイルの加工処理をしていますが、詳しく書くと長くなってしまうので、次回にさせていただきます。**







#現在の進捗
人間の骨組を認識して写真の上に描画してくれるAIモデルと、日本語の手書き文字を認識して文字列を返すAIモデルのデモをWebサイトに実装しました。


![name.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670396/4debee23-aeb7-ad1d-b143-d8d77aa2477a.gif)





#最後に
OVaaSは、Microsoft Azure上で、構築しています。
学校のAzureAccoutを使用している為、Webサイトは常時稼働はしておりません。
また、OpenVINOModelServerの通信プロトコルの形態上、一人のユーザーがwebサイトでAIモデルのデモを試すと、他のユーザーが使用できないと言う問題が発生しています。

これからも、デモができるAIモデルを増やし、問題を順次解決していく予定です。


GithubのURLは、こちらです！
https://github.com/OVaaS
【書評】プロダクトマネジメント-ビルドトラップを避け顧客に価値を届ける-



https://www.amazon.co.jp/dp/4873119251

第1部 ビルドトラップ

> ビルドトラップとは、組織がアウトカムではなくアウトプットで成功を計測しようとして、行き詰まっている状況のことです。
> 実際に生み出された価値ではなく、機能の開発とリソースに集中してしまっている状況です。
> 企業がユーザーにとっての本当の価を生み出さなくなると、マーケットシェアを失って混乱します。


第2部 プロジェクトマネージャーの役割

> プロジェクトマネージャーは、ビジネスと顧客の両方を深く理解し、価値を生み出す機会を見出す
> 「なぜ」そのプロダクトを作っているのか、どんなアウトカムを生み出すのかといった点をチームが忘れないようにするのもプロジェクトマネージャーの仕事です。

優れたプロジェクトマネージャー

> 目の前の目標を知って、会社の戦略に応じてチームがどの方向に向かうかを理解しているのがプロダクトマネージャーです。

プロダクトのカタ

> 1. 方向性を理解する 企業のビジョンと組織的意図　プロダクトイニシアティブ
> 2. 現状を分析する　目指しているものの現状　イニシアティブ /プロダクトの現状
> 3. 次の目標を設定する　プロダクトイニシアティブ / オプション目標
> 4. プロダクトプロセスのステップを選択する　問題の探索 -> 1に戻る

所感

よく目の前の課題をこなすことに注力しがちだが、それは本質ではない。
アウトカム = 「なんらかのプロジェクトや成果物によって生み出される状態」によって課題解決ができたかどうかが重要。
今期xx件リリースした や、不具合をxx件以下にしたとかは本質ではない。
プロダクトマネージャーは「Why」に対し、責任をもち、チームに対し、なぜやるのかを浸透させる必要がある。これはすごく大事だと思う。
「xxに言われたから開発した」 や 「目標にあるから開発した」 ではない、あくまでも、それを行った結果がどうなったかである。
プロダクトマネージャーがいない場合、そのプロダクトの方向性、そのプロダクトの存在価値が薄れ、現場からの目先の修正依頼や課題を解決することとなり、本質的な部分から横道にそれてしまうのだろうと感じた。



プロダクトマネージャーの次のキャリアとしてのプロダクトマーケティングマネージャー
https://note.com/shige/n/nbf546b4084de

メルカリのPMとしてやってきたこと #弊社のPMはこんなふう
https://note.com/yoshitakagi/n/n3da1511d3eef
Unityでのappstore用スクリーンショットの作り方

app store connectでスクリーンショットを要求されるたびに作り方を忘れてしまうため備忘録をつけることにしました。

手順

unityの操作

File→build Settings→player Settings→playerと選びTarget Device,Target SDKをそれぞれ図のように変更する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/947216/4a2a6770-2832-9c03-31ab-ccca776bddd2.png" width="500">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/947216/6f9856bc-bea1-257a-b9fc-c43d19933c6c.png" width="500">

build and runを押すとXcodeでシミュレーターが起動するのでスクリーンショットボタンを押して写真を取る。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/947216/32a79dce-1e70-60b8-1102-401956de116a.png" width="300">
ABC179: E-Sequence Sum の周期性について

# はじめに
この記事では、ABC179でE問題として出題されたSequence Sumという問題について説明します。
記事を書こうと思った動機としては、「なぜ今回の数列に周期性が存在するのか？」と疑問に思ったからです。
考えてみると周期性が存在するのは当たり前のことなのですが、しっかりと説明している記事が現時点では見当たらなかったので執筆することにしました。

# E - Sequence Sumに登場する数列の周期性
この問題では、$A_{n+1} = {A_n}^2\ \%\ M$ という数列について考えています。
以下、この数列が周期性を持つということを示していきます。
>問題のリンクです 
https://atcoder.jp/contests/abc179/tasks/abc179_e


まず、数列の$i$項目を$A_i$とします。
すると、Modの定義より次の事がわかります。

```math
0 \leqq\ {A_i}^2 \% M\ \leqq M-1\\
\Leftrightarrow 0 \leqq A_{i+1} \leqq M-1
```
この不等式からは数列のどの項も$0$以上$(M-1)$以下の値、つまり$M$通りの値しかとらないということがわかります。


次に、初項を$A_1$としてスタートし、第$M$項である$A_M$まで数列の値を求めたとします。
この時、第$1$項から第$M$項まで被りなし、つまり$A_i \neq A_j, \ (1\leqq i,j \leqq M)$だったとします。
![mod_f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269709/fbf75c11-3b46-d7d9-1c4b-e3ad5a4ca1a5.png)

ここで、第$M+1$項目である$A_{M+1}$を求めると、数列の値は、上で述べたとおり$M$通りしかないので、今までに求めた値$A_i$と一致します。
![mod_f (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269709/8374f8a7-dbd1-097f-d797-120a2d57bd84.png)

上の説明より、数列を有向グラフにすると次のように、サイクルの存在するグラフとして表せます。
![mod_f (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269709/cffacb9d-0fb1-18e9-657c-998d7bf6d812.png)

以上より、$1\leqq i<j \leqq M$に対して$A_i = A_j$となる$i,\ j$が存在することがわかり、第$M$項まで被り無しで求められなかったとしても次のようなグラフで表現できることがわかります。
![mod_f (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269709/2bb3d64b-517b-80a7-c03f-4aa177e0c114.png)

数列の値をどんどん求めていくと、いつかループし始めるというのが上の図からわかると思います。
よって今回の数列には周期性が存在することが示されました。

# おわりに
まだまだ修行中の身なので、間違いや、わかりにくい表現があったら是非教えて頂けると嬉しいです。
もし、この記事の内容が役に立ったらLGTMをして頂くとモチベにつながります。
読んで頂きありがとうございました。
JupyterでNameError: name 'kaggle' is not definedになった件について

KaggleのデータをダウンロードできるKaggle APIを利用しようとしたら`kaggle`はないよと言われたので対処しました

# 問題
Jupyter上で

```
!pip install kaggle
```
でエラーはなくインストールが成功した状態で

```
kaggle competitions files -c titanic
```
をすると`name 'kaggle' is not defined`と怒られてしまう

# 解決策
トークンを取得する必要があった
https://www.currypurin.com/entry/2018/kaggle-api

AccountからTokenを発行して、`kaggle.json`を、`~/.kaggle/kaggle.json`に移動させる

そのあと、Jupyter上ではなく、`Anaconda Prompt`上で上記のコマンドを打ったら成功した

# 最後に
Kaggleを始めたが、環境的なところでたくさんつまずきます
[ PostgreSQL ] connections on Unix domain socket "/var/pgsql_socket/.s.PGSQL.5432"?


# はじめに
なんとなくRailsアプリで遊ぼうと思い
Railsアプリの雛形を作成した後に `rails db:create` としたところ
エラーが発生したので、その解決までを備忘録として書きたいと思います。
ちなみにですが、最終的にuninstallしており正攻法では無いのでご注意ください。

## rails db:create　失敗
使用DBはタイトルにもある通り`PostgreSQL`です。
`rails db:create` としたところ以下のエラーが発生しました。

```
could not connect to server: No such file or directory
    Is the server running locally and accepting
    connections on Unix domain socket "/var/pgsql_socket/.s.PGSQL.5432"?
Couldn't create 'sample_app' database. Please check your configuration.
rake aborted!
PG::ConnectionBad: could not connect to server: No such file or directory
    Is the server running locally and accepting
    connections on Unix domain socket "/var/pgsql_socket/.s.PGSQL.5432"?
```

ファイルが無くて接続が出来ない。みたいなことを言われている気がします。
とりあえず、ログを見てみることにします。

`ログファイル（環境によって異なる場合があります） /usr/local/var/log/postgres.log`

```
$ cat /usr/local/var/log/postgres.log

FATAL:  database files are incompatible with server
DETAIL:  The data directory was initialized by PostgreSQL version 12, which is not compatible with this version 13.0

```

どうやらデータディレクトリが `version 12` なのに対して `version 13.0`を使用しているからダメだよ。的な感じでしょうか。
使用したいversionは今回13.0なので、そちらに合わせたいのですが
私の場合データディレクトリを削除しても、特に問題は無かったため以下のコマンドで削除しました。

```
$ rm -rf /usr/local/var/postgres

$ brew uninstall --force postgresql
```

## 再インストール

先ほどのコマンドで削除したので、改めてインストールしていきます。

```
$ brew install postgres

$ initdb /usr/local/var/postgresql -E utf8
```

そして、DBを起動し

```
$ rails db:create

Created database 'sample_app'
Created database 'sample_app_test'
```

うまくいきました。

# おわりに
今回はデータディレクトリと使用バージョンの不一致からこのようなエラーが発生しました。
私は uninstall して対応しましたが、
きっと別の方法で解決することが望ましいと思います。

ですが、この記事が少しでも誰かの役にたてば良いなと思います。
enebularのファイル機能を使って対象ホストにC言語コードをデプロイして動作させてみた

# 今回やったこと

[enebular](https://www.enebular.com/ja/)の[Flows](https://docs.enebular.com/ja/Flows/Introduction.html)機能ではなく[Files](https://docs.enebular.com/ja/Files/Introduction.html)機能（利用するには[有料プラン](https://www.enebular.com/ja/plan/)の契約が必要です）を使用してデプロイ先のホストでプログラムを実行させてみました。  

## 確認したこと

C言語ファイルのデプロイ時に、デプロイ先でコンパイルを実行して生成された実行ファイルが実行できることを確認しました。


## デプロイ先のホスト環境

- [AWS EC2 Debian](https://aws.amazon.com/marketplace/pp/B073HW9SP3?ref_=srh_res_product_title)上にenebular-agentを[インストール](https://docs.enebular.com/ja/EnebularAgent/Installation.html)したホスト
- [コネクション](https://docs.enebular.com/ja/Deploy/DeployFlow/AWSIoT/MakeAWSIoTConnection.html)はAWS IoT

## プログラム内容

実行時にテキストファイルに文字列を追加する簡単なプログラムとしました。

- プログラムコードファイル　main.c
- プログラムをコンパイルして実行するスクリプトファイル main.sh

### コード

```main.c
#include <stdio.h>

int main(void)
{
    FILE * fp;

    fp = fopen( "./test.txt" , "a" );
    if( fp == NULL ) {
        printf( "file open error\n" );
        return -1;
    }

    fputs("-----+\n" , fp );
  
    fclose(fp);
    return 0;
}
```

```main.sh
gcc -o main main.c ; ./main
```

## 確認手順

あらかじめ、main.shファイルを[デプロイ](https://docs.enebular.com/ja/Files/DeployFile.html)しておくことにより、main.cファイルを[デプロイ](https://docs.enebular.com/ja/Files/DeployFile.html)すると同時にコンパイルして実行することが可能になります。  

### 1. main.shファイルをデプロイします

![main.sh](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146154/80bea467-5e7e-b262-5295-023ba8766e5f.png)

### 2. main.cファイルをデプロイします

「Stage」を「Post-Deploy」に設定することにより、main.cファイルデプロイ後に「Assets Path」に指定しているファイルを実行します。ここではmain.shを指定しています。


![main.c](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146154/892df892-2efc-8ed3-204c-f065b6bf8ca8.png)

### 3. 実行ファイルが生成されているか確認します

デプロイ先のフォルダ「/home/enebular/enebular-runtime-agent/ports/awsiot/assets」を確認してmainファイルとが存在していることを確認します。

```
[root@ip-10-1-10-153:/home/enebular/enebular-runtime-agent/ports/awsiot/assets# ls -l
total 24
-rwxr-xr-x 1 enebular enebular 8792 Dec  5 06:28 main
-rw-r----- 1 enebular enebular  239 Dec  5 06:28 main.c
-rwxr----- 1 enebular enebular   28 Dec  5 06:27 main.sh
-rw-r--r-- 1 enebular enebular    7 Dec  5 06:28 test.txt
[root@ip-10-1-10-153:/home/enebular/enebular-runtime-agent/ports/awsiot/assets#
```

### 4.プログラムが実行されているか確認します 

デプロイ先のフォルダ「/home/enebular/enebular-runtime-agent/ports/awsiot/assets」を確認してtest.txtファイルとが存在していることを確認して、さらにそのtest.txtファイルの内容が「-----+」となっていることを確認します。


```
[root@ip-10-1-10-153:/home/enebular/enebular-runtime-agent/ports/awsiot/assets# ls -l
total 24
-rwxr-xr-x 1 enebular enebular 8792 Dec  5 06:28 main
-rw-r----- 1 enebular enebular  239 Dec  5 06:28 main.c
-rwxr----- 1 enebular enebular   28 Dec  5 06:27 main.sh
-rw-r--r-- 1 enebular enebular    7 Dec  5 06:28 test.txt
[root@ip-10-1-10-153:/home/enebular/enebular-runtime-agent/ports/awsiot/assets# cat test.txt 
-----+
root@ip-10-1-10-153:/home/enebular/enebular-runtime-agent/ports/awsiot/assets# 
```

# まとめ（感想）
- 今回はC言語を使いましたが、ホスト上で動作する言語であれば実行可能のはずなので他の言語でも試してみたいと思います
- Node-REDのフローでは実現できない、または困難なケースに対しては今回の方法で実現できるかもしれないと思いました
- ホストが遠隔地にありコード修正できないものや複数ホストへの対応ができそうなので利用できるケースは多いかと思いました
- rootユーザー権限での設定やホスト再起動等については確認していませんが、作り込むことはできると思うので今後試してみたいと思います
HTTPについて調べる (メモ)

プログラマーは、プログラミングができるだけではなく
もちろんWebに関する知識が必要だと思うのでそれらに関数知識を
更に深めるべくメモ代わりにまとめていきたいと思います

##概要
HTTPとは…HTML 文書などのリソースを取り出すことを可能にするプロトコルのこと
文書全体は、テキスト、レイアウトの定義、画像、動画、スクリプトなどから構成される

例)スマホに画像をダウンロードする
PCにHTML文書をダウンロードする

私たちはインターネットをPCで利用したり、スマホで利用したりしています
さらにOSはWindowsやMac、そしてLinuxなど様々

インターネットを利用している環境によってデータのやり取りをする方法が
異なっていたら不便なので
HTTPという`共通の通信規約`を定めることで、インターネットを利用する環境が
異なっていても、**同じ手順でデータをやり取り**することができるようにした

###プロトコルとは…
手順を定めた規定、取決め
代表的なものが「インターネットプロトコル」
さらに「インターネットプロトコル」の標準になっているものが、**TCP/IP**

プロトコルは、階層化されている

Webブラウザのアドレスバーに
「 `http://www.test.com` 」などと入力した場合の、「`http:`」の部分のこと

Chromeの検証ツールで見ることができる


##特徴
・ステートレス…1回コマンドを送ったら、1回結果が返ってきて終わり
前回のやりとりを持たない
普段、何度もログインしなくて済むのはcookieなどの技術を組み合わせて使用されているから

・HTTPはステートレスであるが**セッションレス**ではない



##HTTPS
例として、ホームページを見るときの流れを取り上げると
**Webブラウザ**が、ホームページがおいてある**Webサーバー**にリクエストをなげる

すると、**Webサーバー**から**Webブラウザ**にホームページの結果(レスポンス)が
返ってくる、その際に使用される約束事が**HTTP**

しかし、HTTPでやり取りするときは、通信の内容が暗号化されずに
中身が見られてしまう可能性がある

そこで「やり取りする内容を暗号化する、HTTPと似ている約束事」
**HTTPS**が作られた
今では広く一般的に使用されている

最後の「S」は「Secure（セキュア）」の「S」

HTTPS化するには、**SSLサーバー証明書（SSL証明書）**が必要となる

注意として、HTTPS化することによって
100％安全というわけではない

##参考記事
https://developer.mozilla.org/ja/docs/Web/HTTP/Overview
https://www.nic.ad.jp/ja/basics/terms/http.html
https://wa3.i-3-i.info/word165.html
https://data.wingarc.com/http-and-https-25449
初心者でも簡単！マウスカーソルについてくるやつを作る方法

# どうも7noteです。カーソルにくっつける要素を作ります。

こんな感じのものを作ります。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/0d94d268-5f52-d10d-5190-1971d5043f88.png)

このようにカーソルについてくる要素の作り方について解説していきます。
**ゆっくり動かしたり、カーソルを好きな画像に変える方法も紹介していきます。**


## 作り方

```index.html
<div id="cursor"></div>  <!-- カーソルについてくる要素 -->
```

```stye.css
#cursor{
  position: fixed;     /* 絶対位置になるように指定 */
  z-index: 2;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
  pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/

/* 以下ついてくる要素の見た目のCSS */
  width: 15px;
  height: 15px;
  background: #CCC;
  border-radius: 50%;
}
```

```script.js
$(function(){

  var cursor=$("#cursor");                // カーソルになる要素を指定
  $(document).on("mousemove",function(e){ // マウスカーソルが動いた時に実行
    var x=e.clientX;                      // カーソルの横座標を取得
    var y=e.clientY;                      // カーソルの縦座標を取得

    //  取得した座標をCSSに反映させる
    cursor.css({
      "top":y+"px",
      "left":x+"px"
    });
  });

});
```


これで実行すれば、マウスカーソルにグレーの●がついてくると思います。

## ダミーカーソルの表示位置をずらしたい

```style.css
#cursor{
  /* 以下を追記 */
  margin: 0 0 0 -20px; /* 表示位置を左に20pxずらす */
}
```

表示位置はカーソルの左上起点になっているので、marginやネガティブマージンを使って調整が可能です。

## ダミーカーソルをふわっと動かしたい

```style.css
#cursor {
  /* 以下を追記 */
  transition: all .2s ease-out;  /* 1コマ1コマ、0.2秒かけて動かすことでふわっと動く */
}
```

## カーソルを好きな画像に変える

別の記事でまとめています。

https://qiita.com/7note/items/486774ddce54431bb6c4


## まとめ

どのホームぺージでも一番見られている場所って、カーソルだと思うんですよね（PCだけですが）。
なのでカーソルに注目してUIやUXを変えていくというのは面白いのかもしれません。
広告がくっついてるカーソルとかも見たことがありますが、個人的には見にくくなってしまうのであんまりかもしれませんね。

ただスマートフォンはもちろんカーソルが出ないので、カーソルが変わらないと困るような作りのホームぺージにはしない方がよいでしょう！

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

rubyを書いてて、データベースを操作する時まとめ。

・起動
rails db / .exit

・rubyで操作したいとき
rails console （起動しない状態で） / exit

・テーブル一覧表示
.tables

・テーブル構造表示
.schema テーブル名

・データの抽出
select フィールド名 from テーブル名;

・レコードの削除（危険）
delete from テーブル名;
delete from テーブル名 where 条件;
Qiita学習記録　HTML/CSS #3

<h2>デイトラDay7</h2>
スマホ用にレスポンシブ対応
・ポイントはメディアクエリとブレイクポイント

```css:style.css
.course-wrapper {
        flex-wrap: wrap;
    }
```
画面の横幅のサイズを超えた時自動的に改行を行うWrap
レスポンシブ表示に限らずPC表示でも役立つ。
flexboxの使い方は奥深いので調べる必要あり。

<h2>デイトラDay8</h2>
ついに自力でのWeb制作開始
<h3>実務でWeb制作する際のtips</h3>

まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
CSSを付けつつデザイン通りに調整していく
という順でコーディングするので、今回はできればHTMLを書き上げてからCSSを書くという手順で挑戦！！

<h3>HTMLを先に書くときに意識しておくべきこと３つ</h3>

<ul>
<li>完成形をイメージしてブロックを作る</li>
<li>どこに何のスタイルを当てるか設計しつつ書く</li>
<li>レスポンシブも見越してブロックを整理する</li>
</ul>


<h2>理解が進んでいない部分</h2>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/898926/4c72d6cb-e31b-82d9-37c8-581f98251642.png" width=70%>

「inputがあるからformもいるな」とセットで覚える必要がある。

```html:index.html
 <form action="#" method="POST">
                <input type="email" name="email" id="email" placeholder="メールアドレス">
                <button type="submit" class="btn btn-register">無料ではじめる</button>
            </form>
```
```css:style.css
input[type="email"],input[type="text"] {
    width: 600px;
    border: 3px solid #d8d8d8;
    font-size: 18px;
    display: block;
    margin: auto;
    padding: 15px;
    border-radius: 999px;
    margin-bottom: 20px;
}
```

```css:style.sheet
.btn {
padding: 20px 60px;
display: inline-block;
background-color: #082b48;
color: #fff;
font-size: 24px;
font-weight: bold;
border-radius: 4px;
border: none;
} 

.btn:hover {
    opacity: 0.7;
    cursor: pointer;
}

.btn-register {
    background-color: #ec6d64;
    display: block;
    margin: auto;
}
```
printデバッグが捗る！listを表示するワンライナー

Pythonでリストをただ単に`print()`で表示すると、1行につながってしまうので読みづらいですよね。
要素ごとに改行を挟んで表示したい、、、そういう時はこうやるのが一番簡単だと思います。

```py
words = ['alpha', 'bravo', 'charlie', 'delta']
print(*words, sep='\n')
```

listだけでなく、generatorなどのIterableなものでも行けます。

```py
sequence = range(10)
print(*sequence, sep='\n')
```

dictならこうです。

```py
prices = dict(orange=100, apple=120, melon=1000)
print(*prices.items(), sep='\n')
```

`*`の機能については「`python` `unpack` `arguments`」あたりで調べてください。

# おまけ

## 後片付け

プロダクションコードにデバッグprint文を残さないように気をつけましょう。
それがプロダクションコードとして必要なデバッグログであるなら、loggerを使って出力するようにしましょう。[^1]

## うっかり対策

自分の場合、うっかりデバッグprint文を残さないように以下のようなコメントを付け、

```py
print(*obj, sep='\n')  # XXX
```

`git push`する前に`grep XXX`したり[^2]IDEの機能[^3]でXXXコメント[^4]を探すようにしています。

## printデバッグの良し悪し

それが効率の良いデバッグ手段なら構わないと思います。

しかし、ループの深ーーーい所でprintして、大量の表示で見るべき箇所を見失った・どこから間違いが混入したのかわからない、みたいなことになっていないでしょうか？
そういう場合はprintデバッグが悪いと決めつけるのではなく、適切に関数化・モジュール化がされていない可能性を考慮すべきでしょう。

最小の実行単位でテストできるようになっていれば、printデバッグも捗ります（もちろん、それ以外もいろいろと捗ります）。

[^1]: 手前味噌ですが[「最初に覚えて欲しいPythonのロギング」](https://qiita.com/utkamioka/items/d43b01fe28aab9364da5)
[^2]: `find . -name "*.py" | xargs grep XXX`
[^3]: PyCharmならSettings...>Editor>TODOに`\bXXX\b.*`を追加して"TODO"タブで一覧表示。Eclipseにも似たような機能があった気がします。
[^4]: [「TODO: 以外のアノテーションコメントをまとめた」](https://qiita.com/taka-kawa/items/673716d77795c937d422)
既存のRoute53を別のEC2につなげる

## 背景
既存のRailsアプリをデプロイしたEC2から、テストで構築した別のVPCでの環境にて同じドメインを使いたかったのでどのようにすれば気軽にドメイン名をスイッチできるのかやってみた。

## 結論
Route53とALBのターゲットグループが重要なポイントだった。

## やり方
- まずはRoute53にて既存のアプリにアタッチされているホストゾーンを選びます。
- Aレコードを、新規に作成したアプリにアタッチされているALBのDNS名に書き換えて保存します。
- ALBのリスナーの追加をします。個人的にここで詰まったのでスクショを置いておきます。
![2020-12-11_22h10_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667634/3f0d6f04-d8d7-aa3a-b748-ba1b73495477.png)

リスナーの追加を押したら次にポートをHTTPS:443に設定し、ターゲットグループは80ポートで使用していたtgを使用します。また、ACMは既存のアプリで使用していたものを使いましょう。
![2020-12-11_22h16_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667634/597c6459-66ee-588e-ecd1-d6356776b1bc.png)

ここまでやればhttpsにて新しく作ったEC2にドメイン名でアクセスできます。

## 所感
あんまり実用的ではなさそうだけどRoute53の依存関係などが理解でき、良い学習になりました。
Tomcatのメモ

Tomcat7のEOLが近づいているので、Tomcatについて調べたのでメモする。

# 1.Tomcatのバージョンについて

|バージョン|対応JDK|EOL|
|:-----|:-----|:-----|
|7.0.*|JDK6～|2021/3/31|
|8.0.*|JDK7～|2018/6/30|
|8.5.*|JDK7～|
|9.0.*|JDK8～|

参考URL:http://tomcat.apache.org/whichversion.html

Tomcat8.5 or 9に上げる必要がある。
nginxのconfで値確認する方法


add_headerディレクティブを使うことで値を確認することができる
`add_header ヘッダー名 値`

```nginx.conf

add_header hoge fuga
add_header document_root $document_root
```

`nginx -s reload`でnginxを再起動し、
`curl -I localhost`でヘッダーのみ出力すると値が見れる

```s
$ curl -I localhost
HTTP/1.1 200 OK
Server: nginx/1.14.1
Date: Fri, 11 Dec 2020 13:16:48 GMT
Content-Type: text/html
Content-Length: 4057
Last-Modified: Mon, 07 Oct 2019 21:16:24 GMT
Connection: keep-alive
ETag: "5d9bab28-fd9"
hoge: fuga * これ
document_root: /usr/share/nginx/html * これ
Accept-Ranges: bytes
```
TypeScriptでコンストラクタのオーバーロードっぽいことやる

# TypeScriptでもオーバーロードがしたい！
Javaとかってオーバーロードがあって、複数のコンストラクタを記述できるじゃないスカ

```Java:Hoge.java
public class Hoge {
    private int hogeee;

    public Hoge() {
        this.hogeee = 0;
    }

    public Hoge(int hogeee) {
        this.hogeee = hogeee;
    }
}
```

これ何気に好きなんでTypeScriptでも同じ感じにやりたい！！！しかも型安全に！！！
でもなぜかQiitaに記事無かったんで、思いついたやつなんとなく書き置きしておきますん。

# 可変長引数を使いましょう
可変長引数の型をいい感じにしてあげると型安全になります。

```TypeScript:Hoge.ts
export default class Hoge {
  private hogeee: number;

  constructor(...params: [] | [number]) {
    if (params.length === 0) {
      this.hogeee = 0;
    } else {
      const [num] = params;
      this.hogeee = num;
    }
  }

  public get hoge() {
    return this.hogeee;
  }
}
```

```TypeScript:index.ts
import Hoge from './Hoge';

const hoge = new Hoge();
const foo = new Hoge(3);
console.log(`hoge: ${hoge.hoge}`); // hoge: 0
console.log(`foo: ${foo.hoge}`); // foo: 3
```

`[] | [number]`以外の引数を許してないので、`new Hoge('foo')`だったり、`new Hoge(4, 2)`だったりは全部エラーになってくれます。すげー
浮動小数点表記法(1.2e-5,1.2e+5)の扱い方

浮動小数点表記法を使用するためメモ。

```
小数点を左に5回シフト
C/C++表記
1.2e-5
意味
1.2*10^(-5)
値
0.000012
```

```
小数点を右に5回シフト
C/C++表記
1.2e+5
意味
1.2*10^5
値
120000
```
PHPって奥が深い

久方ぶりにPHPerに戻って来た。
Hiro_Matasunoです。
最近はいろんなことに出逢いましたのでコードを含め書いていこうかなと思います。
#色んな方法で書けるな
そう言えば最近ワンライナーですがいろんなこと書けるみたいですね。
現職場でいろんな書き方に出会いましたし。

```PHP
(aa == bb || bb == cc)? DD:EE
```
上記ですが昨日知りました。

よくあるワンライナーってよくあるパターンは

```PHP
isset(abc)? abc:"";
is_null(a)? null:ab;
```
だったりしますよね。
自分はよく使ってましたね。
バックエンドだとこれのほうが楽なんですよ

```PHP
if(isset(aaa)){
   aaa = bbb;
}else{
   aaa = null;
}

if(is_null(a)){
   a = null;
}else{
   a = b;
}
```
て書くのがめんどくさくて昔よくこの手のワンライナー使ってましたが。
結構らくさせてもらいました。
ワンライナーの二段重ねもよく書いてました。
データベース格納用変数だったので気を使って作ってましたね

（）？ってif文の代わりをしているみたいですね。
昨日見て覚えました。
使い勝手いいですしね。

#PHPを久方ぶりに書いて思ったことは

最近ですが気がついたことは12/8のPHPその2アドベンドカレンダーにも書きましたが。
守るべきところは絶対守ってくれています。
これが一番助かるのです。
いつでも戻ってこれる。

進化が激しい言語またはスクリプトはすぐ追いつけなくなります。
特にその典型的例がJavascript。
マジ今でもムカついてます。
クラスの書き方にしてもアロー関数の書き方にしてもぐちゃぐちゃです。
それに比べてPHPはしっかりその点守られてると思っています。
あとはデータベースへの対応。
これが一番最高ですね。
初めてOracleに接続するPHPを書いたんですがそれほど困りませんでいた。
それはすでにMySQLをガリガリ使っていたからなんですがデータベースに恐怖を持たずコーディングができています。
オレオレフレームワークと話を聞いてましたがそれ以上のフレームワークをjQueryで書いたことがあるので正直気がつくのが遅かった。
このオレオレフレームワークどっから見ても難しくないというかなんか昔泣く泣く手放したフレームワークにそっくりだったのでびっくりしました。
これがあり得るのもこの業界のいいところです。
こいつにJSON加えてやりたいなぁ。
そうすればもう少し楽できると思います。

#未だに$_POST・$_GETが生きてるのが少し怖い
これは思いましたけど。
やっぱインジェクションされやすくて怖いっすよ。
これ解決する方法は見つかっていてみんなでフレームワーク改造計画を行うときにでも語りたいんですが。
JSONパッシングやればいいのになと思っています。
じつはjQueryフレームワークのバックエンドは実はPHPでJSONパッシングパッシングできるように作ってました。
その経験活かしたいなどこかで。
正直JSONオブジェクトは怖くないし簡単に作れます。

```PHP
$array["aaa"] = bbb;
$array["ccc"] = ccc;
json_encode($array);
```
でJSONオブジェクトできちゃいます。
オブジェクトを配列にしたい場合は

```PHP
$array2 = json_decode($array);
```
これだけで配列化もできちゃいます。

本当はこれで書きたいんですよねコードが。
そうしないとインジェクション対策ができなくなってくるんですよね。
そろそろお時間も良さそうなので今日はここまでにします。
久方ぶりにコード書いてるので間違いあったら指摘ください。

明日は [daikin](https://qiita.com/daikin "daikin")さんです。
初学者らしいので期待してますね。

では。
Firebase AuthenticationのIDトークンをHTTPクライアントのリクエストヘッダーに渡す

レッドインパルスのたかけんです。
REDIMPULZ Advent Calendar 2020 の11日目のエントリーです。

## 自前のバックエンドの認証にFirebase Authenticationを使う

バックエンドの開発で、認証にFirebase Authenticationを使用して、認証をする場合があります。
その際にFirebase Authenticationで取得したIDトークンをAPIリクエスト毎にリクエストヘッダーに含める方法です。

HTTPクライアントには、`ky` を使用しています。

```typescript:lib/firebase
import firebase from 'firebase/app';
import 'firebase/auth';

firebase.apps.length
  ? firebase.app()
  : firebase.initializeApp({
      // 認証情報
    });

export const auth = firebase.auth();
```

```typescript:http
import ky from 'ky';
import firebase from 'firebase';

import { auth } from '@/lib/firebase';

const getUser = () =>
  new Promise<firebase.User>((resolve, reject) =>
    auth.onAuthStateChanged((user) => (user ? resolve(user) : reject()))
  );

const http = ky.create({
  prefixUrl: // APIのエンドポイントのプレフィックス,
  hooks: {
    beforeRequest: [
      async (request) => {
        try {
          const user = await getUser();
          const token = await user.getIdToken();
          request.headers.set('Authorization', `Bearer ${token}`);
        } catch (error) {
          console.log(error);
        }
      },
    ],
  },
});

export default http;
```

### 要点

* onAuthStateChangedのコールバックでuserが取得できるので、Promiseでラップして同期的にuserを取得できるようにする
* beforeRequestはAPIリクエスト毎に呼ばれるのasync/awaitでgetUserを実行し、userを取得
* userのgetIdTokenでIDトークンを取得
* リクエストヘッダーのAuthorizationにIDトークンをセットする

## まとめ

Firebase AuthenticationのIDトークンをAPIクライアントのリクエストヘッダーに渡す方法でした。
`ky` では無く `axios` を使っている人も多いと思いますが、その場合は、interceptorsを使って同様のことができるかと思います。
rails s が上手くいかない時にやってほしいこと

アプリ開発中に、ローカル環境での動作確認のため「localhost:3000」を入力するも画面遷移せず、
不思議に思いターミナルを確認した所、サーバーが起動していませんでした。
色々試行錯誤の末に無事に解決できたので、備忘録として投稿します！

初投稿のため、読みずらかったり分かりにくいと思いますが、
徐々に改善するので温かい目で見て頂ければと思います🙇‍♂️

【前提】
ruby 2.6.5
rails 6.0.0

ターミナルで「rails s」と入力すると

```
=> Booting Puma
=> Rails 6.0.3.4 application starting in development 
=> Run `rails server --help` for more startup options
A server is already running. Check /Users/・・・/tmp/pids/server.pid.
```
「A server is already running.」と表示。「もうサーバーが動いているよ」という
メッセージですが、他のターミナルでもサーバーを立ち上げていませんでした。。。
そんな時は以下2つを試してみましょう（これで解決する人も一定数いるようですが、私の場合はどちらも効果なし）。

①ターミナルを全て閉じて再起動

②server.pidファイルを削除
以下のパスにあるファイルを削除します。

[Railsプロジェクトフォルダ]\tmp\pids\server.pid

正常時は、サーバー終了と同時に削除されるようですが、エラー発生時は残ったままになっていました。

私の場合は上記を行い再度「rails s」を行うと、
「Address already in use」と表示が変わりました。「アドレス？がすでに使われているよ」という
メッセージなのですが、読み換えると「3000番ポートが既に使われているよ」ということのようでした。

ポート3000番を使用しているプロセスを確認するために「lsof -i:3000」と入力。

```
COMMAND     PID            USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
ruby      33163 username   12u  IPv4 0x8fc4708611018a6f      0t0  TCP localhost:hbci (LISTEN)
```

そこで、killコマンドを使い実行中のプロセスを削除します。

「kill -9 PID(この場合は33163)」
再度「lsof -i:3000」を実行し何も表示されなければOK。

この状態で「rails s」を実行すると

```
=> Booting Puma
=> Rails 6.0.3.4 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 3.12.6 (ruby 2.6.5-p114), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
```
成功です！

いきなりサーバーが立ち上がらないと焦ったり不安になりがちですが、
丁寧に状況を把握して地道に仮説・検証を繰り返しましょう！！