OmniAICreator/Qiita-1.07M huggingface dataset:
Vueで始めるLIFFアプリケーション

vue-cli で作成したプロジェクトに対して、 npm パッケージから liff をインストールして、使うところまでを紹介します。

7月に LIFF SDK が npm パッケージとして公開され、これまでの CDN 読み込みとはまた別の方法で LIFF を利用できるようになっています。

※ 筆者はmac osで開発してます。

## プロジェクトの作成

とりあえず vue-cli で プロジェクトを作ってしまいます

```bash
yarn global add @vue/cli
vue create liff-vue
# いくつか項目選択を経て、ディレクトリが作成される

cd liff-vue
```

下記コマンドで、サーバーが立ち上がるところまで確認します。

```bash
yarn serve
```

![スクリーンショット 2020-12-19 23.53.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/43e0df38-da06-7705-fdd1-0ccc8f7362eb.png)

## ngrok を使用する

LIFF の利用のために,https でアプリを公開している必要があります。
サーバーを用意する、S3などにあげるなどが勿論良いですが、今回は簡単にやるために ngrok を使用してローカルでたてた vue アプリを外部に公開する形をとります。

```bash
brew install ngrok
```

ngrok のコマンドは下記です。

```bash
ngrok http 8080

# Docker で開発している場合はこっちを使用
# ngrok http -host-header="0.0.0.0:8080" 8080
```

また、 package.json を編集しておきます。

```json:package.json
"vue": {
   "devServer": {
      "disableHostCheck": true
  }
}
```

## LINE Developers のページから LIFFアプリを登録する

![スクリーンショット 2020-12-20 0.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/ca985a53-3ec2-51dd-414a-c597c020bb4f.png)

作成すると、LIFF IDが発行されるので、こちらをメモっておきましょう。

![スクリーンショット 2020-12-20 0.16.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/785f5c8f-f70f-4cca-9b88-72dbb8440ff3.png)

## LIFF をインストール、導入する

LIFF をさっとインストールしちゃいましょう。

```bash
yarn add @line/liff
```

```vue:src/App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  loggedIn: {{ loggedIn }}
  {{ profile.displayName }}
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// LIFFをimportする
import liff from '@line/liff'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      loggedIn: false,
      profile: {},
      displayName: "",
    }
  },
  mounted() {
    // 最初に必ず実行する
    liff
      .init({ liffId: 'myLiffId' }) // LIFF IDを貼る
      .then(() => {
        this.loggedIn = liff.isLoggedIn()
        this.getProfile()
      })
      .catch((err) => {
        // Error happens during initialization
        this.occoredError = 'error:' + err
      })
  },
  methods: {
    // ログインユーザーのプロフィールを取得する
    getProfile() {
      liff.getProfile()
      .then(profile => {
        this.profile = profile
      })
    }
  }
}
</script>
```

LIFF アプリを発行した時にでる URL にスマホのLINEからアクセスしてみましょう。

![IMG_9967.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/20b849b1-39df-9ac5-3bdb-f21a3bfdbdea.jpeg)

これでひとまずは簡単な LIFF アプリケーションの出来上がりです。

[リファレンス](https://developers.line.biz/ja/reference/liff/)も充実しているので、是非いろいろ触ってみてください！
psqlの使い方（ライトユーザー向け）

# 🚀起動
```
$ psql -h {接続先アドレス} -p {接続先ポート} -U {接続ユーザー}
```

### 例：ローカル接続
```
$ psql -h localhost -p 5432 -U postgres
```
※`-h`は省略可。
※`-p`も、デフォルト（5432）であれば省略可。

# psqlの終了
```
# \q
```

# 👀データベース一覧の確認
```
# \l
```

# 🛠️データベース作成

```
# create database {データベース名};
```

### 例：`sample`という名前のデータベースを作成

```
# create database sample;
```

# カレントデータベースの変更

```
# \c {データベース名}
```

### 例：`sample`データベースへ変更

```
# \c sample
```

# 👀テーブル一覧の確認
```
# \z
```

# 👀テーブル定義の確認
```
# \d {テーブル名}
```

以上。
0埋め (Elixir)

先頭に0を埋めたいことありませんか？
ありますよね？

@tksmaru さんの[言語別 0埋め数字を作成する方法](https://qiita.com/tksmaru/items/0f9283d0c5f0ee716f2f) みたいな感じのことです。

# たとえばRuby

```ruby
irb(main):001:0> '%04d' % 55
=> "0055"
```

[Elixir](https://elixir-lang.org/)ではどうやればいいのでしょうか:interrobang:

# [String.pad_leading/3](https://hexdocs.pm/elixir/String.html#pad_leading/3)

## example

```elixir
iex> String.pad_leading("55", 4, "0")
"0055"

iex> String.pad_leading("abc", 5)
"  abc"

iex> String.pad_leading("abc", 4, "12")
"1abc"

iex> String.pad_leading("abc", 6, "12")
"121abc"

iex> String.pad_leading("abc", 5, ["1", "23"])
"123abc"
```

お仲間に[String.pad_trailing/3](https://hexdocs.pm/elixir/String.html#pad_trailing/3)があります

# Wrapping Up :christmas_tree::santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5::christmas_tree: 
- Enjoy [Elixir](https://elixir-lang.org/) !!! :rocket::rocket::rocket:
がんばらないIaCの温度感

この記事は[Wanoグループ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/wano-group)１9日目の記事になります。19ったら19です。

AWSでInfrastructure as Code、やってるでしょうか。
やるにしても辛いことも多いですね。
最近やってるものの構成や困ったところをメモしておきます。


## 今やってる構成
現行プロダクトでは、

* s3やrdsなどステートフルなものや、ライフサイクル上いろんなアプリから参照されるものは「コンポーネント目線で水平分割」(terraform)
* インフラという以上にアプリ寄りのコンポーネントや最悪消えてもいいものは「サービス目線で自由に垂直分割」(ツール自由)

くらいでふわふわやってます。


以下のような構成です。


```
v2
├── data_id
│   ├── 01_emulated_resources.tf
│   ├── 02_existed_resources.tf
│   ├── 03_ssm_params.tf
│   ├── Readme.md
│   ├── outputs.tf
│   └── variables.tf
├── production
│   ├── ap-northeast-1
│   │   ├── backend
│   │   └── service
│   └── global
│       ├── 000_route53_hostzone
│       ├── 010_acm
│       ├── 015_cdn
│       └── 020_route53_record
└── stage
    ├── ap-northeast-1
    │   ├── backend
    │   └── service
    └── global
        ├── 000_route53_hostzone
        ├── 010_acm
        ├── 015_cdn
        └── 020_route53_record


```

だんだん「がんばらないIaC」がテーマになっていったので、

* 愚直な構成でworkspaceは使わない
* moduleはあんまり使わない
* 過度なtfstateやcloudformation stackの水平分割/DRYは行わない(せいぜいステートフルなものに留める)
* 変更頻度が少ないものは非IaCな既存リソース使ってもOK(ただしmoduleとしてarn等の集約はする)

くらいの温度感でやっています。


## 垂直/水平、ライフサイクルの視座
IaCはそもそも「宣言的であること」「冪等であること」に核心があり、jsonやらyamlやらhclやらのDSLで記述することから始まったと認識しています。
どっちかというとweb3層っぽいのの基盤を構築するのが得意だったんですね。
  
ですが特にSaaSやらビジネスロジックよりのコンポーネントやらも併せて扱いたいという欲求が出てきて、現実にはデプロイライフサイクルと依存関係で皆一回は分割構成に迷うことになるかと思います。

よくある例だと、「Lambda」ですね。
「依存関係や認可管理はIaCツール内で解決したいけど、コード自体はバリバリビジネスロジックなので別で管理/デプロイしたい」ということがちょくちょくあります。
  

現行プロジェクトでは、ちょっとしたものはIaCツール上でコードも一緒にデプロイしちゃっています。  
それとは別に、「重要なロジックを持ったLambda」や「StepFunctionsなどばりばりにビジネスロジックを持ったクラウドコンポーネント」は、**LambdaやStepFunctionsなどガワやダミーだけterraformでデプロイ(Create)し、ロジックやコード本体は別デプロイ(Update)とする**みたいなことをやっています。
(terraformはignore_changeがあるのでこういうことはしやすいです。)

もちろん、サーバーレスアプリなどそもそもビジネスロジック寄りのシステムはそれ全体で垂直分割する、などの判断もあるかと思います。 
その場合でもライフサイクルや他のアプリとの関係などの視座は必要ですね。



## 宣言的であることと依存関係と

tfstateやstackを分けると、現実には宣言的と言いながらもデプロイオペレーションが発生します。
よくある例だとroute53,cloudfront,acm,s3の関係性が考えたようには依存が一方向に綺麗にはならない、みたいなやつですね。
このへんはterraformなりcloudformationなりの問題というより、AWS初期のコンポーネントにありがちな相互依存や独自arn生成みたいなものが辛さの中心にある気がします。
gitopsとかCIでインフラ構築されてる方とかこれみんなどうやってるんですかね?


今は前述のコード例のように、tfstate(stack)別にprefixで番号を振り、**擬似的に依存の順番を表現**しています。


## これから
大きくなっていくシステムを助ける上で、これからもクラウドコンポーネントにはだいぶお世話になっていきます。と同時にそれを適切に管理するためのプラクティスも2021年は引き続き学んでいきたいですね。ただしあんまりがっつりがんばらない。
Azure Functions × Cosmos DB を型安全でさらに高速に開発する🐍

[求ム！Pythonを使ってAzureで開発する時のTips！【PR】日本マイクロソフト Advent Calendar 2020](https://qiita.com/advent-calendar/2020/azure-python) 20日目の記事です。

# はじめに
[Azure Functions](https://azure.microsoft.com/ja-jp/services/functions/) は他の FaaS と比べて、**簡単に開発環境を作れる**のが利点だと考えていて、個人的にはブログのデータ収集や JPHacks2020 に参加したときに使用しています。特に、**Cosmos DB との相性が非常に良く**、簡単にデータの取得や更新をすることができます。

しかし、「[Azure Functions 2.x 以降に対する Azure Cosmos DB の入力バインド | Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-bindings-cosmosdb-v2-input?tabs=python)」でも紹介されているように、関数内で Cosmos DB から持ってくるデータの型は `DocumentList` となります。これはソースをみると、`Document` クラスのリストと記載されており、**どのようにデータにアクセスすればよいか一見わかりません**。
また、具体的な問題として例をあげて説明します：

```python
import azure.functions as func

def main(req: func.HttpRequest, users: func.DocumentList):
    username = users["name"]
    id = users["id"]
```

このとき、Cosmos DB から持ってきたユーザーのデータである `users` に果たして `name`、`id` というプロパティはあるのでしょうか？また、`id` は `str` 型を返すのでしょうか、`int` 型なのでしょうか？ Cosmos DB にいちいちアクセスして確認するのは面倒です。

この記事ではこの問題を解決し、**開発速度と開発体験**を向上させます🐍

# 解決策
上記の問題を解決するために**個人ライブラリを作成しました**。個人ライブラリについては、「[個人ライブラリのススメ(for Python🐍)](https://qiita.com/syakoo/items/deddeb91e2a0313a45f7)」を見てください。

リポジトリ ↓
[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398510/ceccb37d-c47f-e391-6967-d08bd95180a1.png" alt="azfunc-extensions" width="400px" />](https://github.com/syakoo/azfunc-extensions)
pip でインストールできます(使用する際は GitHub にスターをいただけると嬉しいです)：

```console
$ pip install git+https://github.com/syakoo/azfunc-extensions
```

## Document と Dataclass のコンバーター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398510/1f92a59f-1506-e555-4b29-386e028f131b.png)

関数内で持ってきた `Document` クラスと Python の `dataclass` を変換する関数を作成しました。要は、**スキーマとして作成したデータクラスに `Document` を変換**します。データクラスについては「[Python3.7以上のデータ格納はdataclassを活用しよう | Qiita](https://qiita.com/ttyszk/items/01934dc42cbd4f6665d2)」が参考になります。

それでは使い方を簡単に説明していきます。
### doc2dc(doc: Document, dc: DataClass) -> DataClass
`Document` を `dataclass` に変換する関数。

```python
from dataclasses import dataclass
from azfunc_extensions import doc2dc

@dataclass
class User:
    name: str
    age: int
    id: str

# Document → User
user = doc2dc(doc, User)
```

### dc2doc(dc: DataClass) -> Document
`dataclass` を `Document` に変換する関数。Cosmos DB への out 時には `Document` に戻す必要があるため作成しました。

```python
from dataclasses import dataclass
from azfunc_extensions import doc2dc

@dataclass
class User:
    name: str
    age: int
    id: str

user = User("syakoo", 22, '1')
# User → Document
doc = dc2doc(user) # <azure.Document at 0x7f189f516160>
```

## 開発体験(DX) について
具体的にどのように変わったかというと、**どんなパラメータがあるのか**だったり、**それぞれのパラメータの型**が一目でわかるようになります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398510/2ebab85f-d223-aade-f4e5-dd1b3c06c0f0.png)

# 具体例
具体的にこのライブラリを使用して関数を作ってみました。ぜひ参考にしてください：

- repo: https://github.com/syakoo/advent-calendar2020_azure_python

# おわりに
今回は Azure Functions × Cosmos DB の**開発速度と開発体験を上げる** Tips を紹介しました。リクエストからパラメータ持ってくる処理も結構めんどいので、それも型補完できればいいなーと思いました。
kubectlでunable to read client-certのエラーが出たときの対処法

minikubeでkubectlを実行した際に、**unable to read client-cert** のエラーが出たので、その解決方法の備忘録です。
root以外のユーザーで作業していました。


# 環境
- CentOS7.9
- minikube 1.16.0
- kubectl 1.20.1


# エラーの内容
kubectlをインストール後、バージョンを確認しようとしたところ、以下のエラーが出ました。

```
$ kubectl version
Error in configuration:
* unable to read client-cert /root/.minikube/profiles/minikube/client.crt for minikube due to open /root/.minikube/profiles/minikube/client.crt: permission denied
* unable to read client-key /root/.minikube/profiles/minikube/client.key for minikube due to open /root/.minikube/profiles/minikube/client.key: permission denied
* unable to read certificate-authority /root/.minikube/ca.crt for minikube due to open /root/.minikube/ca.crt: permission denied
```


# 原因


原因は minikube start をしたときに以下のメッセージが出るのですが、コマンドを実行しただけで、以下記載の **独自の設定の上書き** をしていなかったためです。

```
❗  kubectl と minikube の構成は /root に保存されます
❗  kubectl か minikube コマンドを独自のユーザーとして使用するには、そのコマンドの再配置が必要な場合があります。たとえば、独自の設定を上書きするには、以下を実行します


    ▪ sudo mv /root/.kube /root/.minikube $HOME
    ▪ sudo chown -R $USER $HOME/.kube $HOME/.minikube
```


kubectlの設定情報は以下コマンドで確認が出来ます。確かに/rootを見るようになっています。

```
$ kubectl config view
apiVersion: v1
clusters:
- cluster:
    certificate-authority: /root/.minikube/ca.crt
    server: https://10.0.2.15:8443
  name: minikube
contexts:
- context:
    cluster: minikube
    namespace: default
    user: minikube
  name: minikube
current-context: minikube
kind: Config
preferences: {}
users:
- name: minikube
  user:
    client-certificate: /root/.minikube/profiles/minikube/client.crt
    client-key: /root/.minikube/profiles/minikube/client.key
```

# 対応方法

~/.kube/config を開き、`/root/` と書かれている部分を自身のホームディレクトリに変更します。
[Ruby on Rails] エラーメッセージの表示方法

#バリデーションを定義する
モデル内で定義します。

```
class　User < ApplicationRecord
  validates :name, {presence: true}
  validates :email, {presence: true}
end
```

上記では、nameとemailの空の投稿を制限しました。


#viewでエラーメッセージを表示する
エラーメッセージはエラーが発生すると、 `error.full_message`内に配列で入ります。

```
<% if @user.errors.any? %>
  <% @user.errors.full_messages.each do |message| %>
    <%= message %>
  <% end %>  
<% end %>
```

`@user` のエラーがあった場合、 `@user.errors.full_messages` をすべて出力します。

#エラーメッセージを日本語にする
エラーメッセージはデフォルトでは英語になっているので日本語化しましょう。

##`Gem file` に追記
`Gem file` に以下を追加し `bundle install` してください。

```
 gem 'rails-i18n'
```

## `config/application.rb` に追記
`config/application.rb`　に以下を追加し、サーバーを再起動してください。

```
config.i18n.default_locale = :ja
```

##ユーザーカラムの日本語化
このままでは、以下のようにエラーメッセージの `value` 部分が日本語化されていません。

```
["nameを入力してください"]
```


`config/locales/models/`　に、　`ja.yml`　というファイルを作成します。
`ja.yml`　のファイルに以下を追記します。


```
ja:
  activerecord:
    
    attributes:
      user:
        name:名前
　　     email:メール
```

最後に `config/application.rb` にこのymlファイルの読み込む一文を追記します。

```
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.yml').to_s]
```

完成です。

```
["名前を入力してください"]
```
ルーティングをネストすると…

#はじめに
　ルーティングをネストするには、`do~end`で囲う。

##ルーティングをネストして、URLを作成する

```ruby:config/routes.rb
resources :class_rooms, only: [:index, :new, :create, :show] do
  resources :messages, only: [:index, :create, :destroy]
  resources :posts, only: [:index, :new, :create]
  resources :users, only: [:show, :edit, :update]
end
```
do~endでネストすることで、messages,posts,usersのURLの前にclass_roomsを入れることが出来、IDを含めることができた。階層をつくっていくイメージで作成した。
【swift】CMPedometerで歩数を取得する

#swiftで歩数を取得するぞ！
appleが提供しているコアモーションというフレームワークの，
歩数まわりを取り扱うCMPedometerを使います．
[公式ドキュメント](https://developer.apple.com/documentation/coremotion/cmpedometer?language=objc)

意外とつまづいたので備忘録のようなものです．
swift初学者なので間違ってたら教えてください:flushed:

##stepCountとCMPedometer
前は[CMStepCounter](https://developer.apple.com/documentation/coremotion/cmstepcounter)というのがあったらしい．
今は非推奨のようなのでCMPedometerを使います．

##準備
- CoreMotionをインポートする
...その前にプロジェクト名をクリックして出てくる画面でCoreMotionのフレームワークを追加しておきます．
![framework.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464247/0c10e767-1183-a6ce-9d80-9453189e16ca.png)

- Info.plistに書き込む
適当なところに行を追加して
Keyに`Privacy - Motion Usage Description`，
TypeをString，Valueに使用用途を入力する．
初めて使う時に使っていいか聞くやつです．
これがないとクラッシュなんとかってエラーが出てきます．

##コードを書きます！
```ViewController.swift
let pedometer = CMPedometer()

//CMPedometerが利用可能かどうか
if CMPedometer.isStepCountingAvailable() {

    //計測
    pedometer.startUpdates(from: Date(), withHandler: {(pedometerData, error) in
        if let e = error {
            print(e.localizedDescription)
            return
        }
        guard let data = pedometerData else {
            return
        }
        let step = data.numberOfSteps
        DispatchQueue.main.async {
            label.text = "\(step) 歩"
        }
    })
}

//終わらせたいタイミングで
pedometer.stopUpdates()
```

`CMPedometer()`はメンバ変数になるようにしないと不具合が起きるっぽいです
###isStepCountingAvailable
まずデバイスでCMPedometerが利用可能か調べます
Bool値で返ってきます

###startUpdatesとstartPedometerUpdatesFromDate
調べてると`startPedometerUpdatesFromDate`というのも出てくるが，
Xcodeでは無いと言われる:disappointed_relieved:

[startUpdatesのドキュメント](https://developer.apple.com/documentation/coremotion/cmpedometer/1613950-startupdates)
[startPedometerUpdatesFromDateのドキュメント](https://developer.apple.com/documentation/coremotion/cmpedometer/1613950-startpedometerupdatesfromdate?language=objc)

多分引数にNSDateを使うかDateを使うかという違いなのかなと思う．
NSDateは非推奨らしいので，Dateを使う`startUpdates`を使います．

####queryPedometerDataは？
過去の指定期間の歩数を取得するメソッド
[queryPedometerDataのドキュメント](https://developer.apple.com/documentation/coremotion/cmpedometer/1613946-querypedometerdata)

`startUpdates`は過去の指定日時から現在までのデータを取得出来ます．

###startUpdatesの引数について
`Date()`メソッドを宣言した時にその時点の時刻を取得できるので
これを計測しはじめの時刻として第一引数に渡してます

第二引数には`CMPedometerHandler`を渡します．
`{(pedometerData, error) in 処理}`と書いているところです．
[CMPedometerHandlerのドキュメント](https://developer.apple.com/documentation/coremotion/cmpedometer/1613950-startpedometerupdatesfromdate?language=objc)

###DispatchQueue.main.async
ラベルに歩数を表示する時にメインスレッドに非同期処理しないと遅延するらしいのでこうしています．
(...それでも表示遅いと感じます:thinking:)

##CMPedometerData
CMPedometerでは歩数以外にも推定移動距離や移動ペース，階段を登った段数など色々取得できます
[CMPedometerで取得できるデータ](https://developer.apple.com/documentation/coremotion/cmpedometerhandler)

***
なんだか似たようなものが使えたり使えなかったり混乱したのでまとめてみました．
他にもHealthCareを使ったものもあるみたいです:zipper_mouth:

###参考にしました
https://faboplatform.github.io/SwiftDocs/4.coremotion/003_coremotion/
https://teratail.com/questions/90251
15日目：噴水から学ぶUVスクロール


この記事はアドベントカレンダー「[【VCI】テーマパーク を作ろう](https://adventar.org/calendars/5855) 」の15日目の記事です。

# 今回の内容
今回は噴水を作りながら以下の内容を学んでいきます
　・UVスクロールの使い方
UVスクロールとは以下のようにテクスチャをずらすことで、まるでアニメーションな動きを表現できる技法です。
![uvscroll_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/35c4e33a-4bdc-e8a9-d8c4-59c214e528ea.gif)
今回はスクリプトは使用しません。

# Blenderの設定
今回は噴水の水の流れをUVスクロールで表現したいと思います。
Blenderは特に新しい技術は使用しません。以下のように噴水の水の部分を作成し、長方形にUV展開します。
画像の上から下に水が流れるようにしたいため、噴水の高い位置をUVの上の方、低い位置を下の方に来るようにUV頂点を配置しています。
![20201219-233341.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/ace42839-bd57-53fe-a09a-5da99da4aa74.png)

#Unityの設定
Blenderで作成したモデルをProjectに入れ、マテリアルを展開します。
水部分のマテリアルのシェーダーをVRM>MTOONに変更します。
するとマテリアルの設定画面にAutoAnimationという設定項目が出てくるかと思います。こちらがUVスクロールの設定です。
今回は水の画像が上から下に移動するようにしたいため、以下のようにScrollYに0.1を設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/90e048f3-078b-1ce8-4f6f-dfecf1759bc9.png)

UVスクロールはUnity上でも再生が可能です、Unity画面の上の方の再生ボタンを押すと再生されますので、そこで動きを見ながら値を調整するとやりやすいかと思います。


これで設定完了です。以下のように噴水の水が流れるようになりました。
![uvscroll_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64877/4d559bd6-96a9-7ae9-6998-8af638a2c07c.gif)



# 終わりに 
いかがでしたでしょうか？
今回は使いませんでしたが、画像の一部のみをスクロールしたい場合はMaskという機能を使えばできるみたいです。
次回の内容は未定です。
Nuxt.jsでNavigationBarのhoverには@mouseoverを使う

この記事は、[岩手県立大学 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ipu) 19日目の記事です。

# 今回学ぶこと
Nuxt.jsで、NavigationBarのhoverを実装するには@mouseover, mouseleaveをつかう！

# 目指す成果物
![](https://storage.googleapis.com/zenn-user-upload/u0qrwdslsaxoct3esnlmf0f78vjo)

# ソースコード
こちらのソースコードを参照しつつ読み進めていただけると、理解されやすいかと思います。
https://github.com/syuheifujita/nuxt-sample-app

# ステップ
## 1. VueやNuxtの本質である、Componentの概念を理解する
こちらの動画は英語なんですが、`HTML/CSS`をかいた経験がある人レベルの方ならばわかりやすい内容だと感じました。

nuxt初心者が一番初めに見る動画（英語）：
https://www.youtube.com/watch?v=nteDXuqBfn0&list=PLllRbPzZQq_4r_UBfXf46bMNL2rcDdjTy&index=1

ポイントは、こちらをみながら実装してみてざっくりと`Nuxt.js`や`Vue.js`のcomponentの概念を理解することです！

## 2.  NavigationBarの作り方動画をやってみる
次に、
Componentの概念を理解できた方であれば、このステップもすんなりいけるかと思います。
ここでもいい動画があったので共有します。

NavigationBarの作り方の動画（英語）：
https://www.youtube.com/watch?v=vUcUdpBcmF8&t=876s

ポイント3つ
- `Navbar.vue`, `Dropdown.vue`の2つにcomponentを分散
- `v-for`で繰り返しでDropdownに使うリストを生成
- `v-if`で表示非表示の状態管理

## 3.  マウスのhoverした時のイベント処理の記事を実践
最後に、マウスのhoverした時のイベント処理の実装ですが、結論から言うと、`＠mouseover`と`@mouseleave`を用いてイベントを取得して、表示の状態を切り替えることでDropdownの実装をしました。

こちらの、イベント処理についての記事がとても参考になりましたので共有しておきます。

イベント処理についての記事（英語）：
https://michaelnthiessen.com/hover-in-vue/

ポイント3つ
- `＠mouseover`と`@mouseleave`を用いてイベントを取得できる
- 変数`isHoverFlag`を定義して、イベント取得の度にture, falseを切り替える
- `v-if="isHoverFlag"`のisHoverFlagがtureの場合、そこの<div>タグが表示される

```Dropdown.vue
<template>
    <div class="menu-item" @mouseover="isHoverFlag = true" @mouseleave="isHoverFlag = false">
        <a>{{ title }}</a>
        <svg viewBox="0 0 1030 638" width="10">
            <path d="M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z" 
            fill="#000"></path>
        </svg>
        <div class="sub-menu" v-if="isHoverFlag">
            <div v-for="(item, i) in items" :key="i" class="menu-item">
                <a :href="item.link">{{ item.title }}</a>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'

export default {
    name: 'dropdown',
    props: ['title', 'items'],
    data() {
        return {
            isHoverFlag: false,            
        }
    }
}
</script>

<style>
nav .menu-item svg {
    width: 10px;
    margin-left: 10px;
}

nav .menu-item .sub-menu {
    position: absolute;
    background-color: white;
    top: calc(100%);
    left: 0px;
    width: max-content;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}
</style>
```

# 参考資料
## nuxt初心者が一番初めに見る動画
https://www.youtube.com/watch?v=nteDXuqBfn0&list=PLllRbPzZQq_4r_UBfXf46bMNL2rcDdjTy&index=1

## navbarの作り方の動画
https://www.youtube.com/watch?v=vUcUdpBcmF8&t=876s

## イベント処理についての記事（英語）
https://michaelnthiessen.com/hover-in-vue/
プログラミング言語未経験者でもSORACOM使ってIoT体験してみたい

この記事は [SORACOM Advent Calendar 2020](https://qiita.com/advent-calendar/2020/soracom) の 20 日目の記事です。

#はじめに

コロナ禍で仕事がめっさ忙しくなった SORACOM UG 信州 & 農業活用コミュニティ の中の人の @ko2a です。

2020年の SORACOM UG というと・・・オンラインイベントが開催されるようになり、また新たな試みとして「SORACOM UG ビギナーズ」が始まりました。

ふとビギナーズのステップアップに何がよいのだろう？と、過去のUGでのハンズオンと思い返してみると、Raspberry PiやWioなどプログラミング言語を書いていくスタイルメインで、プログラミングはじめて触ります！って人だと取っつきにくいものが多い印象があります。
Scratchのようにビジュアルプログラミング言語できないかな？と思ってみたら、M5StackとUIFlowを使えばWebベースなビジュアルプログラミングで簡単にできるのでは？ということで、通信費も安価なM5Stack用Sigfoxモジュールを使って試してみました。

#おことわり
本業が忙しくてろくに勉強する間もなく、データがアップされているところを確認するとこで終わってしまいましたorz
できればM5Stackシリーズの豊富なセンサーを活用したサンプルを組みたかったのですが・・・初挑戦のUIFlowは難しかったです。

もちっとクラウドとかIoTとかのお仕事メインにしたいなぁ・・・

#必要なもの

* M5Stack Basic/Gray
Basic https://www.switch-science.com/catalog/3647/
Gray https://www.switch-science.com/catalog/3648/

* M5Stack用Sigfoxモジュール
https://www.switch-science.com/catalog/6624/

* インターネット接続可能なPC

* クレジットカード
ソラコムを利用するために必要です。

#手順

##1. M5StackとSigfoxモジュールの組み立て

M5StackとSigfoxモジュールを組み立てます。

[参考] IoT向けネット「Sigfox」を試す、年額1000円サービスの使い勝手
https://xtech.nikkei.com/atcl/nxt/column/18/01109/120700012/

##2. SORACOM Air for Sigfoxへ登録

通常は「Sigfox Buy」に登録するように、とありますが、そうしてしまうとSORACOMの便利なサービスが利用できなくなるので、Sigfoxモジュールの情報をSORACOMへ登録します。

[参考] M5Stack用SigfoxモジュールをSORACOM Air for Sigfoxで利用する方法
https://blog.soracom.com/ja-jp/2020/10/15/howto-use-sigfox-module-for-m5stack-with-soracom-air/#co-index-2

##3. UIFlowの準備

M5Stack公式サイトのUIFlow Quick Startの手順どおりセットアップします。
https://docs.m5stack.com/#/en/quick_start/m5core/m5stack_core_get_started_MicroPython

Google Chromeの翻訳機能を使えばある程度精度の良い日本語になりますが、やることをざくっと説明すると

1. M5ドライバーのインストール
2. ファームウェア書き込みツール「M5Burner」のインストール
3. UIFlow用ファームウェアの書き込み（＋WiFi設定）
4. インターネットモードで起動してAPIキーを取得
5. APIキーをWebブラウザ開発環境に設定する https://flow.m5stack.com/

となります。

##4. UIFlowでSigfoxモジュールからデータを送る

@intm さんの記事を参考に、UIFlowでSigfoxモジュールからデータを送る処理を組みます。
[M5Stack用Sigfoxモジュールの使い方](https://qiita.com/intm/items/5b6b56d3c9c52e216982)

UIFLowの実装
![20201219_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/32f12398-7082-9335-7365-8bb6cfa42d18.png)

##5. SORACOM User Consoleで確認

手順4で作った簡易アプリのA/Bボタンを使って送信する値を変更し、Cボタン押下でデータを送信します。
![20201219_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49240/0e71e362-1c14-1774-7f7a-d18c5655df39.png)

#課題あれやこれや

これでビジュアルプログラミングで簡単にできるぞ！
・・・と思っていたのですが、試してたら結構ハードル高いことに気づいた。

* 16進数の変換にコード書いてる
* マイナスの値どうする？（signed/unsignedの話持ち出すの？
* 小数点の値どうする？（float使う？10倍して整数で送る？

温度データなど送ろうとすると、どうしてもマイナス値や小数の扱いを考慮しないといけないので、こういったところはビギナーズ向けじゃないなぁと。
データフォーマットの設計は難しい。

#おわりに

ビジュアルプログラミングなら簡単にできる、と高を括ってたら盛大に躓きましたね・・・
ふつうのプログラミング言語に慣れていると、どうブロックを並べてロジック組めばよいか考えるのが煩わしい。

あと、M5Stackシリーズのセンサーを使って何かアプリを組もうとしたら、データ変換とバイナリパーサーの使い方をマスターしないとつらいですね。
そのあたりを学習するにはよいかもしれません。

バイナリパーサー詳細
https://dev.soracom.io/jp/docs/binary_parser/

#参考資料

* M5Stack UIFlow Tutorial
https://docs.m5stack.com/#/en/uiflow/uiflow_home_page

* M5Stack COM.X Sigfoxの使い方
https://www.kccs-iot.jp/20200918-technical/

* M5Stack用SigfoxモジュールをSORACOM Air for Sigfoxで利用する方法
https://blog.soracom.com/ja-jp/2020/10/15/howto-use-sigfox-module-for-m5stack-with-soracom-air/
Linkify.addLinksでリンク化したURLの遷移前に確認ダイアログを出したい

# 調べた経緯
teratailでLinkify.addLinksで自動リンク化したものをタップした時にダイアログで
遷移確認のダイアログを出したいとの質問があったので調べた。

# 解決方法
タップ時、ブラウザに飛ばそうとしてIntentで``override fun startActivity(intent: Intent?)``に入ってくるので
そこでキャッチしてあげれば良い。

```
override fun startActivity(intent: Intent?) {

        // とりあえず、アラートダイアログから飛んできたときとそれ以外のときを判別
        val alertFlg = intent?.getBooleanExtra("alert", false)

        // アラートダイアログから飛んできてる場合はそのままブラウザを開かせる
        if(alertFlg!!){
            // こいつが呼ばれるとブラウザが開く
            super.startActivity(intent)
            return
        }

        // ダイアログを表示する
        val urlData = intent.data
        AlertDialog.Builder(this)
                .setMessage("アプリを離れます")
                .setPositiveButton("OK") { _, _->
                    val urlStr = Uri.parse(urlData.toString())
                    val myIntent = Intent(Intent.ACTION_VIEW, (Uri.parse(urlStr.toString())))
                    myIntent.putExtra("alert", true)
                    startActivity(myIntent)
                }
                .setNegativeButton("キャンセル", null)
                .show()

    }
```

実際に動かす際にはもう少し配慮するコードを書く必要がありそうだが
とりあえずキャッチしてダイアログを出すところまでは上記でできる。
Macro.camelize/1 (Elixir)



[Macro.camelize/1](https://hexdocs.pm/elixir/Macro.html#camelize/1)をご存知でしょうか？

# example

```elixir
iex> Macro.camelize("foo_bar")
"FooBar"
```

> If uppercase characters are present, they are not modified in any way as a mechanism to preserve acronyms:
(大文字が存在する場合は、頭字語[^1]を保持するため、変更をしない)

[^1]: [https://ja.wikipedia.org/wiki/頭字語](https://ja.wikipedia.org/wiki/%E9%A0%AD%E5%AD%97%E8%AA%9E)

```elixir
iex> Macro.camelize("API.V1")
"API.V1"
iex> Macro.camelize("API_SPEC")
"API_SPEC"
```

私がこれを知ったきっかけはですね。
[docomo_text_to_speech](https://github.com/TORIFUKUKaiou/docomo_text_to_speech)というHexを公開しておりまして、こちらを[Kian Meng Ang](https://github.com/kianmeng)[^2] さんという方がリファクタリングをしてくださいました。
アウトプットするとインプットを得られるという例なのかもしれません。
(例: LTすると知らない方から話しかけてもらえて、その方から新しい知識をもらえる)

[^2]: [NervesJP/nerves-devcontainer](https://github.com/NervesJP/nerves-devcontainer) へのプルリクエスト → [Fix typos and markdowns #8](https://github.com/NervesJP/nerves-devcontainer/pull/8)。みなさんのところにもプルリク届くかもしれません :rocket::rocket::rocket: 

[Macro.camelize/1](https://hexdocs.pm/elixir/Macro.html#camelize/1)を使っている箇所
:point_down::point_down_tone1::point_down_tone2::point_down_tone3::point_down_tone4::point_down_tone5: 

[https://github.com/TORIFUKUKaiou/docomo_text_to_speech/pull/6/files#diff-76b1051c1b786a646a3c6e50e8dc2e71611e801484d7e6d4a80a753272094eacR112](https://github.com/TORIFUKUKaiou/docomo_text_to_speech/pull/6/files#diff-76b1051c1b786a646a3c6e50e8dc2e71611e801484d7e6d4a80a753272094eacR112)

# Wrapping Up :christmas_tree::santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5::christmas_tree:
- Enjoy [Elixir](https://elixir-lang.org/) !!! :rocket::rocket::rocket:
電源回路の「しくみ」と「基本」2章 (3)ブリッジ整流の電源設計

# ブリッジ整流を用いた電源設計
[前回](https://qiita.com/ikenohotori/items/ca276b8bc566ecda6140)はブリッジ整流回路に必要な部品の定格をまとめた。
今回は実際にtinaを使って回路設計＆シュミレーションをしてみる章。

##仕様
以下の回路を設計したい

・出力電圧・電流：12V・1A
・出力リプル：5％以下
・回路：ブリッジ整流回路

## 部品選定
__①トランス__
トランスは12Vや15V等さまざまあるが、以下を気にして選ぶ。

・直流出力電圧はおおよそ交流の最大値になる[^1]
[^1]: 意味がわらかん。交流の「実効値」と出力の直流は同じ電圧になるのではないのか。
・ダイオード1個あたり1Vの電圧降下がある（電圧降下は直列回路に繋がる抵抗で考えればよい。ブリッジ整流回路の場合、直列には2個のダイオードが繋がっているため、降下は2Vとなる。つまり12+2=14V（実効値10V）のトランスが必要。）
・出力電流とトランス容量は異なる。（前回の記事より、トランスで作れる電流は、負荷に流す電流より2倍くらい大きい必要がある。全波整流の場合、1.65倍の電流が必要となる。）

以上を加味すると、トランスは出力10V、容量1.65A以上のものを選定すればよい。

__②ダイオード__
ダイオードは、平均電流と逆耐電圧を気にする。

・平均電流：全波整流の平均電流は負荷電流の半分なので、0.5A
・逆耐電圧：逆耐電圧はトランスの出力電圧の最大値なので、14V

__③コンデンサ__
コンデンサはシュミレーションをしてみて適切な容量を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/ead0704c-8715-44df-1a27-f199774eab56.png)

上の3本のグラフが、出力電圧。コンデンサの容量が大きいほど、波のゆれが小さい。
下の3本のグラフが、電流。コンデンサの容量が大きいほど、波が高い（突入電流が大きい）

仕様はリプル含有率5％なので、
リプル含有率 = 交流部分のVPP / 2√2 / 直流電圧 × 100％　より、
交流のVPP = 5 ×　2√2 × 10V / 100 = 1.4V

シュミレーションの結果から、VPP=1.4Vとなるコンデンサを探すと、C=6000uFあれば十分となる。

# 過渡解析
シュミレーションの結果、出力電圧は以下のようなシュミレーションとなる。
上のグラフが無負荷の場合、下のグラフが12Ω負荷の場合。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/0636f69e-7161-f3d0-0f7a-2394051f29a5.png)
VisionでHand Pose Detection 手のトラッキング

![Dec-19-2020 23-39-38.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/69a87a19-1524-3941-bcfc-8b410ec9caf3.gif)![Dec-19-2020 23-39-55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/70d84682-3bf4-d946-dcde-a36bacb4e81a.gif)

iOS14から手のポイントを認識できるようになりました。
上のお絵かきはAppleのサンプルプロジェクトです。
この記事では、画像から手のポイントを取る手順を紹介します。

#手順

リクエスト実行までは、いつものVisionと同じです。

###1.Visionをインポート。

```swift

import Vision
```

###2.リクエストを作成。

```swift

var handPoseRequest = VNDetectHumanHandPoseRequest()
handPoseRequest.maximumHandCount = 1 // 検出するての数
```

###3.ImageRequestHandlerで実行。
AVFoundationのCaptureOutputメソッドなどでフレームのPixelBufferを当て込みます。

```swift
let handler = VNImageRequestHandler(cvPixelBuffer:pixelBuffer, orientation: .up, options: [:])
do {
    try handler.perform([handPoseRequest!])
    guard let observation = handPoseRequest?.results?.first as? VNHumanHandPoseObservation else { return }
    // maximumHandCountで設定した手の数だけObservationを取得できます。
} catch let error {
    print(error)
}
```

###4.指の各ポイントへのアクセス

例えば、人差し指の先のポイントへのアクセスは以下。

```swift
let indexFingerTip = try observation.recognizedPoints(.all)[.indexTip]
print(indexFingerTip)
```
>Optional([0.984453; 0.562278])

ポイントは与えた画像の向きなどによって原点が変化するので、X軸Y軸を確認しましょう。


#取得できるポイント一覧

５本の指それぞれの先の、第一関節、第二関節、付け根と、手首の２１ポイントが取得できます。

|指  |先  |第一関節  |第二関節|付け根|
|---|---|---|---|---|
|親指|.thumbTIP |.thumbIP|.thumbMP|.thumbCMC|
|人差し指  |.indexTip  |.indexDIP |.indexPIP |.indexMCP|
|中指  |.middleTip  |.middleDIP |.middlePIP |.middleMCP|
|薬指  |.ringTip  |.ringDIP |.ringPIP |.ringMCP|
|小指  |.littleTip  |.littleDIP |.littlePIP |.littleMCP|

手首は.wrist

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
「ノーコード」勉強してみた！

# はじめに！

今年の夏から秋にかけて「ノーコード」というものを勉強しました！

ですが、最初アプリ開発をしたことがある自分としては…

「コードなしでアプリが作れるってどういうこと？」


そこで！

ノーコードを勉強して作ったものを紹介しつつ、できたことを紹介していきたいと思います！


# 作ったもの

**ぐるわけのデータ部分**　　　です！

まず、「ぐるわけ」ってなんだよって話なんですけど…

これは以前私が作ったアプリです！

詳しくは↓

アプリの概要(はてなブログ)　→　https://sato-na.hatenablog.com/entry/2020/08/15/205239

コード(github)/kotlin　→　https://github.com/sato-na/guruwake_kotlin

コード(github)/java　→　https://github.com/sato-na/guruwake_java

ザッと説明すると

`メンバーと分ける数を入力すると、グループ分けを勝手にしてくれるアプリ`

です

ですが、今は毎回メンバーを入力しなければいけないんです…

決まったメンバーを何回も分けたいって思うときないですか！？

そこで！

そのメンバーをデータとして保存する部分をノーコードで作りました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/dcc0d761-af10-9ec6-f8a0-35a92a59e49d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/00226e05-e28a-571e-55e2-9db08b9b74f6.png)


# できたこと

## データベース編

### groupシート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/a6a4d2de-e9cb-10ca-cd13-19c23bd26ed5.png)

### memberシート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/d476d8b1-50f1-4503-0ebc-b97c4c1791ed.png)

- 画像を入れられる

- 他のシートとの依存関係を書ける

## デザイン編

- データの追加ができる

- データの検索ができる

- グループで分けてまとめて表示できる

- リスト表示やタイル表示ができる


# 感想

ちょっとアプリを作ることに全振りして記事がおろそかになったかもしれません・・・

ごめんなさい・・・

ですが！

本当にコードを一つも書かずにアプリを作れることにとても感動しました！

アプリ開発初心者に向けてはもちろんですが、

コードで作りたいもののデモ代わりに作るという使い方もありだなと思いました

特にデータの実装ではどんなデータが必要か、どんな構成にすべきかなどが

簡単に考えられるんじゃないかなと思いました


総じて……… **ノーコード面白い！！**
typescript string to number

文字列を数字に変換する。

typescript v4.1.2

## Number()
nullを渡すと0になる。

```
let num = Number('1')
console.log(num) // 1

num = Number('1.1')
console.log(num) // 1.1

num = Number('あ')
console.log(num) // Nan

num = Number(null)
console.log(num) // 0
```

## parseInt
1.1のような少数は1になる。また、parseIntは文字列しか受け付けないのでnullは渡せない

```
let num = parseInt('1')
console.log(num) // 1

num = parseInt('1.1')
console.log(num) // 1

num = parseInt('あ')
console.log(num) // Nan

// エラー
num = parseInt(null)
console.log(num) // Nan
```

## parseFloat
少数の文字列も少数として数値に変換できる。文字列しか受け付けないのでnullは渡せない

```
let num = parseFloat('1')
console.log(num) // 1

num = parseFloat('1.1')
console.log(num) // 1.1

num = parseFloat('あ')
console.log(num) // NaN

// エラー
num = parseFloat(null)
console.log(num) // NaN
```

## +変換
+を付けることで数値に変換できる。

```
let num = +'1'
console.log(num) // 1

num = +'1.1'
console.log(num) // 1.1

num = +'あ'
console.log(num) // NaN

// エラー
num = +null
console.log(num) // 0
```
Anacondaのアンインストール

#1. はじめに
Anacondaをインストールしたのだが、どうも調子が悪く使えないので
アンインストールしようと考えた。

参照サイト：[Windows10でAnaconda/Minicondaをアンインストールする方法](https://insilico-notebook.com/conda-uninstall/)


#2. Aanaconda-Clean
Anacondaのファイルシステムをほとんど理解していないため、Anaconda-Cleanを利用したい。
ところが、

```
conda install anaconda-clean
```

こちらのコマンドを実行するとどうやらcondaコマンドが使えないらしい。

PATHの追加をすることになった。

#3. PATHの追加
`コントロールパネル>>システムとセキュリティ>>システム>>システムの詳細設定>>環境変数`で設定可能。

大学で少し学んだものの、詳しくは理解していない。
時間をかけた上で辿り着いたのがこちら。
`C:\ProgramData\Anaconda3\Library\bin`

ようやくcondaが使える！！


#4. Anaconda-Cleanを再実行
というわけで続き。
`anaconda-clean`はインストールできた。

```
$ anaconda-clean
```

...あれ？
`'anaconda-clean' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。`

またか！！

結果、`Anaconda-Clean.exe`というファイルを自力で探し出し実行したらなんとか行けた。

#5. Anaconda3のアンインストール
あとは`コントロールパネル>>プログラム>>プログラムのアンインストール`から
`Anaconda3 (Python~)`をアンインストールして終わりっと。
綺麗に消せてたらいいな。

#6. まとめ
初めて記事を書いてみましたがなんだか楽しかったです。
pythonのpackage依存関係と仮想環境管理ツールPoetry

# Poetryは何？
- python package依存関係を管理する
- プロジェクト専用の仮想環境を構築できる（
    - 依存するpython versionを指定できる
    - 依存するpackage versionを指定できる
- ruby bundleと似てるツール

# インストール
https://python-poetry.org/docs/
macの場合のpython scriptでインストール

```shell
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python -
```

pipを使ってインストール

```shell
pip install --user poetry
```

# 設定しておくと便利なこと
以下のように設定すると、仮想環境がproject folderの以下で作成され、vscodeがpython環境を自動識別できるので、vscode intellisenseが機能する

```shell
poetry config virtualenvs.in-project true
```

# projectにpoetryを導入
以下のコマンドでpyproject.toml(rubyのgemfileみたいなもの)を作成する

```shell
poetry init
```

# 依存するpackageを追加
以下のコマンドで依存するpackageを仮想環境へinstallしつづ、pyproject.tomlに依存packageが指定される

```shell
poetry add pendulum
poetry add pendulum@^2.0.5  # versionも指定する場合
poetry add "pendulum>=2.0.5"  # versionも指定する場合
```


# pyproject.toml, poetry.lockに設定した依存packageをinstall
```shell
poetry install
```

# packageをアップデートする
#### 依存する全てのpackageをアップデートしたい場合

```python
poetry update
```

#### 特定のpackageをアップデートしたい場合
```python
poetry update fastapi
```

# 仮想環境でコードを実行したい時
#### 仮想環境に入りたい場合
```shell
poetry shell 
```

#### 仮想環境で何かを実行したい場合
```shell
poetry run uvicorn main:app --reload
```

# package依存関係を表示したい場合
```shell
poetry show --tree
```


# 参考
https://python-poetry.org/
自作キーボード5 ファームウェア作成

前回PCB基盤を発注し、到着を待っている間にファームウェアのソースをDebugしながら待つ。

またもや、さぼるために、ある程度のファームウェアソースを作ってくれるサイトがあった。

[最初のころ](https://qiita.com/kirin123kirin/items/77c7f1ffc9bc04698ce5)に
http://www.keyboard-layout-editor.com/
で作ったレイアウトデータを流用し、

* https://kbfirmware.com/ で読み込んでポチポチ設定を入れてやると、あらまqmk_firmwareソースを自動生成してくれる。

これで出来上がったものをElite-Cに書き込んで、Amazonで買った[ブレッドボード](https://amzn.to/2J5WAwl)で動作をテストしてみる。
まじで電子工作や回路の知識なかったのでこれ買っておいてよかった。はんだ付けせずにサクッとテストできる

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B086GJT83Q/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B086GJT83Q&linkCode=as2&tag=kirin123kirin-22&linkId=cb9387a246ffa10854f5e6fb8071ccaf"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B086GJT83Q&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=kirin123kirin-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kirin123kirin-22&l=am2&o=9&a=B086GJT83Q" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
【Jenkins：Mac】GitHubチェックアウト

# 概要
GitHubのチェックアウトしてなんやかんやしたい
とりあえずチェックアウトだけ試す
Jenkins側の設定をメインに記載するので、GitHubのSSH認証周りは済んでるものとします

Jenkinsバージョン：2.270
Git plugin：4.5.0（Jenkinsインストール時に推奨プラグインを選択してればGit関連は基本入ってるはず）
※Jenkinsとプラグインのバージョンが異なると動作しない可能性があります

# 1. 認証情報の追加
Jenkinsのログアウトボタンの横に現在のユーザー名が書いてあると思うのでそこの▼ボタンから
認証情報 > User > グローバルドメイン > 認証情報の追加
![jenkins13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216261/69ac4171-70ac-0f92-1cdf-048e86b533d9.png)
**種類**を「SSHユーザー名と秘密鍵」にして
**ID**は空白
**説明**は任意（空白でも可）
**ユーザー名**は適当になにか入れる
**秘密鍵**は「直接入力」を選択して鍵の「Add」ボタンを押して入力欄にGitHubの認証用に作成したid_rsa（id_rsa.pubじゃない方）の中身をコピペして貼り付けます
**パスフレーズ**は空白でいいです
これで保存するとグローバルドメインのリストに追加されます
IDが割り振られているのでこれを後々使用します

# 2. スクリプト作成

Pipelineで作成します
適当にジョブ作ってPipelineScriptに下記を記述

```:コード
node
{
    stage ("git")
    {
        checkout([$class: "GitSCM", branches: [[name: "master"]], doGenerateSubmoduleConfigurations: false, extensions: [[$class: "CheckoutOption", timeout: 30]], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "XXXXX", url: "git@github.com:XXXXX/XXXXX.git"]]])
    }
}
```

記載するのはシンプルです

引数を１つずつ解説していくと

**$class**
使用するプラグイン名「"GitSCM"」固定

**branches**
プルするブランチ名を記載
今回は固定ですがこれはパラメータに出した方がビルド時に変更できるので楽

**doGenerateSubmoduleConfigurations**
今回はサブモジュールは含まないので「false」

**extensions**
色々な拡張設定ができるんですがとりあえずチェックアウト時のタイムアウトを設定しておく
[[$class: "CheckoutOption", timeout: 30]]

**submoduleCfg**
今回はサブモジュールは含まないので空で

**userRemoteConfigs**
ここで認証と落としてくるリポジトリのurlを指定します
credentialsId: １で登録したIDを記載
url: リポジトリのurl

# 3. 実行
これでビルド実行してエラーにならなければ完了
そうだ、永続的にログイン状態を保持する機能を付けよう

リロードするたびにログインする

そんな負担ユーザーには掛けられないですよね？？？

今回はそんなお悩みを、読み終わったときには、「こんなに簡単なんだ！」って思うくらい簡単に説明します！（モジュールをインストールして、プラグインするだけ）


#モジュールのインストール#

以下のコマンドを入力し、モジュールをインストールします。

```
npm install vuex-persistedstate
yarn
```

#プラグイン#

ユーザー認証を行っているファイル（今回はstore/index.js）にて行います。

```store/index.js

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";  
//モジュールをインポートします

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [createPersistedState()],  //プラグイン
  state: {
    auth: true,  //ユーザーがログインしているか
    user: "",    //ユーザー情報
  },
});

```

これでauthのtrue（ログイン）状態が保持されます。

**こんなに簡単です！！**

以上、永続的にログイン状態を保持する方法でした！

良かったら、LGTM、コメントお待ちしております。

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

Thank you for reading
matplotlibで散布図を描くサンプル

#例として「男女グループ別・身長・体重別・読書量」の散布図を描きます。
scatter は、特定の集団の、グループ別、ＸＹ別の大きさグラフを描くイメージです。
,
#ソース
```PYTHON
import matplotlib.pyplot as plt
import pandas as pd

#サンプルデータ
dt={"x身長"       :[ 170,170,150,150,140,140,165,165,155,155] ,
      "y体重"     :[  55, 51, 60, 66, 80, 65, 77, 67, 58, 57] ,
      "s読書量" :[ 700, 67, 80, 30, 55, 34, 45, 10,930,929] ,
       "c性別"    :[   1,  2,  1,  2,  1,  2,  1,  2,  1,  2] 
    }
df=pd.DataFrame(dt)

#描画
fig, ax = plt.subplots()
scatter = ax.scatter(df['x身長'], df['y体重'], c=df['c性別'], s=df['s読書量'], alpha=0.5 )

#タイトル等 
ax.set_xlabel("x身長" , fontsize=15, fontname="MS Gothic")
ax.set_ylabel("y体重" , fontsize=15, fontname="MS Gothic")
ax.set_title('身長　体重　性別別　読書量の分布' , fontname="MS Gothic")

#男女ラベル
legend1=ax.legend(scatter.legend_elements()[0], ["男","女"]   ,  loc="lower left", prop={"family":"MS Gothic"}   ) 
legend1.set_title("c性別"   ,  prop={"family":"MS Gothic"} )
ax.add_artist(legend1)

#読書量ラベル
handles, labels = scatter.legend_elements(prop="sizes",  num=3 , alpha=0.6)
legend2 = ax.legend(handles, labels, loc="upper right",  prop={"family":"MS Gothic"} )
legend2.set_title("s読書量"   ,  prop={"family":"MS Gothic"} )

ax.grid(True)
fig.tight_layout()
 
plt.show()
```

#結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/84f79731-7613-c8f3-e564-d4ec68e4f9e9.png)


#参考
[Scatter Demo2](https://matplotlib.org/3.3.3/gallery/lines_bars_and_markers/scatter_demo2.html#sphx-glr-gallery-lines-bars-and-markers-scatter-demo2-py)
[Scatter plot](https://matplotlib.org/3.3.3/gallery/shapes_and_collections/scatter.html#sphx-glr-gallery-shapes-and-collections-scatter-py)
[Scatter plots with a legend](https://matplotlib.org/3.3.3/gallery/lines_bars_and_markers/scatter_with_legend.html#sphx-glr-gallery-lines-bars-and-markers-scatter-with-legend-py)
[matplotlib.pyplot.scatter](https://matplotlib.org/3.3.3/api/_as_gen/matplotlib.pyplot.scatter.html)
[Matplotlibで簡単に日本語を表示する方法（Windows）](https://gammasoft.jp/blog/matplotlib-japanese-fonts/)
[凡例の中に日本語タイトルを表示する【matplotlib】](https://srbrnote.work/archives/1718)
パナソニックプログラミングコンテスト (AtCoder Beginner Contest 186) 参戦記

# パナソニックプログラミングコンテスト (AtCoder Beginner Contest 186) 参戦記

## [ABC186A - Brick](https://atcoder.jp/contests/abc186/tasks/abc186_a)

1分で突破. 書くだけ.

```python
N, W = map(int, input().split())

print(N // W)
```

## [ABC186B - Blocks on Grid](https://atcoder.jp/contests/abc186/tasks/abc186_b)

2分で突破. 書くだけ.

```python
H, W, *A = map(int, open(0).read().split())

print(sum(A) - min(A) * H * W)
```

## [ABC186C - Unlucky 7](https://atcoder.jp/contests/abc186/tasks/abc186_c)

4分で突破. Python は oct 関数で8進数の文字列に変換できるので、それを使うと楽.

```python
N = int(input())

result = 0
for i in range(1, N + 1):
    if oct(i).count('7') + str(i).count('7') == 0:
        result += 1
print(result)
```

## [ABC186D - Sum of difference](https://atcoder.jp/contests/abc186/tasks/abc186_d)

12分半で突破. Aの順序は変えても答えに影響はないので、ソートしてしまえば絶対値が外せる. 後は合計を使って *O*(*N*) に落とせば解ける.

```python
N, *A = map(int, open(0).read().split())

A.sort()
s = sum(A)
result = 0
for i in range(N):
    a = A[i]
    s -= a
    result += s - a * (N - i - 1)
print(result)
```

## [ABC186E - Throne](https://atcoder.jp/contests/abc186/tasks/abc186_e)

突破できず. *O*(1) ないし、*O*(log<i>N</i>) で回数計算する方法が思いつかず.

## [ABC186F -  	Rook on Grid](https://atcoder.jp/contests/abc186/tasks/abc186_f)

突破できず. E問題を完全に捨てて、こっちに注力したら解けたかもしれない.
高校生がFFT(高速フーリエ変換)を理解してみた【第2回】連続フーリエ変換の導入part1

#はじめに
【お詫び】
前回に第2回で説明すると書いたフーリエ変換との関係性ですが、
第3回の間違いのため訂正します。(第1回側は更新済み)


第2回目では、第1回で求めた値の$\sum$の部分を一般化して、近似について深堀りしていきます。
第1回の内容を先に見ることを推奨します。
[【第0回】目次と概要](https://qiita.com/nekoMIMI_CatEye/items/d8fcb12132779cf4631c)
[【第1回】単純なモデルを解いてなれる](https://qiita.com/nekoMIMI_CatEye/items/7082f58cfcdeac5bddab)

#本記事の対象
高校3年生までの知識がわかっている人
具体的には
* 級数・無限級数 

#前回のあらすじ
【問題】下の式が最小になる$a_k$を求めよ。($a_k$の値をいじって$x$を$\sin$の集合で近似せよ。)

```math
\int^{\pi}_{-\pi}(x-\sum^{n}_{k=1}a_k\sin kx)^2 dx　(a = {a_1, a_2, \cdots , a_k})
```

【式の変形】

```math
\int^{\pi}_{-\pi}(x-\sum^{n}_{k=1}a_k\sin kx)^2 dx=\frac{2}{3}\pi^3-\frac{1}{\pi}\sum^{n}_{k=1}{b_k}^2+\pi\sum^{n}_{k=1}(a_k-\frac{1}{\pi}b_k)^2\\
\left(b_k = \frac{-2\pi(-1)^k}{k}\right)
```

__【方程式】1, 2項目が$a_k$によって変化しない定数部分のため, 3項目が0になるように方程式を立てました。__

```math
\pi\sum^{n}_{k=1}(a_k-\frac{1}{\pi}b_k)^2 = 0\\
\left(b_k = \frac{-2\pi(-1)^k}{k}\right)
```

【解】

```math
a_k = -2\frac{(-1)^k}{k}
```
# 級数から無限級数へ
前回解いた問題は$\sum$が$k=1$から$n$の部分まででしたが, $n\rightarrow\infty$に一般化します。

```math
\frac{2}{3}\pi^3-\frac{1}{\pi}\sum^{\infty}_{k=1}{b_k}^2+\pi\sum^{\infty}_{k=1}(a_k-\frac{1}{\pi}b_k)^2\\
\left(b_k = \frac{-2\pi(-1)^k}{k}\right)
```

さて, あらすじで__【方程式】__ の欄を太字にしました。$a_k$を最小にする時点で、方程式が満たされるので第3項目は確実に0になります。
また、1項目は完全な定数です。
2項目は$a_k$が変化しても値は変化しませんが, $n$の値が変わると値は変化します。
$n\rightarrow\infty$にすることによって、第1項目と第2項目の和がどのような値になるか
(これも0に近づくのか)を調べてみます。

#とりあえずの式変形
1項目と2項目の和

```math
\displaystyle\frac{2}{3}\pi^3-\frac{1}{\pi}\sum^{\infty}_{k=1}{b_k}^2
```

まず、$b_k$の値を代入します。

```math
 = \displaystyle \frac{2}{3}\pi^3-\frac{1}{\pi}\sum^{\infty}_{k=1}\left(\frac{-2\pi(-1)^k}{k}\right)^2\\
```

2乗を展開します。

```math
 = \displaystyle \frac{2}{3}\pi^3-\frac{1}{\pi}\sum^{\infty}_{k=1}\left(\frac{4\pi^2(-1)^{2k}}{k^2}\right)\\
```

-1の偶数乗は1なので$(-1)^{2k}$を消します。

```math
= \displaystyle \frac{2}{3}\pi^3-\frac{1}{\pi}\sum^{\infty}_{k=1}\frac{4\pi^2}{k^2}\\
```

$4\pi^2$は定数なので$\sum$の外に出します。

```math
= \displaystyle \frac{2}{3}\pi^3-\frac{4\pi^2}{\pi}\sum^{\infty}_{k=1}\frac{1}{k^2}\\
= \displaystyle \frac{2}{3}\pi^3-4\pi\sum^{\infty}_{k=1}\frac{1}{k^2}
```

式変形ができました。無限級数の中の値がわかればよさそうです。

#無限級数の中身
この問題は__バーゼル問題__といって、このようになることが知られています。

```math
\sum^{\infty}_{k=1}\frac{1}{k^2} = \frac{\pi^2}{6}
```
この式は私はわからなかったので証明しません。
__バーゼル問題 高校数学__とかで調べると方法がが出てくるので興味があれば調べてみてください。

#結局、値はどうなるの？
代入するとすぐに結果がわかります。

```math
\begin{align}
\begin{array}{rcl}
&=& \displaystyle \frac{2}{3}\pi^3-4\pi\cdot \frac{\pi^2}{6}\\
&=& \displaystyle \frac{2}{3}\pi^3-\frac{2}{3}\pi^3\\
&=& \displaystyle 0\\
\end{array}
\end{align}
```
0になりました。
ここから、$n\rightarrow\infty$にすることで、値を完全に近似できることがわかりました。
#最後に
今回は一般化part1ということで, $\sum$を一般化していきました(果たしてこれは一般化といえるのだろうか)。
次回は近似する関数、される関数を一般化して, フーリエ変換の公式に少し足を踏み入れていきます。

今回は説明がけっこう短かった。

次回: [【第3回】連続フーリエ変換の導入part2](https://qiita.com/nekoMIMI_CatEye/items/dfbcc60da3b05563605e)
SQLite3の基本操作

軽量なデータベースで、サーバーとしてではなくアプリケーションに組み込んで利用。（スマホアプリなどにも利用される）

**『1データベース、1ファイル』**で扱いやすい。ファイルをコピーすればバックアップが取れるし、削除すれば消える。

ちょっとしたアプリケーションを作る場合に便利なので基本操作をまとめておく。
<hr>


## インストール
https://www.sqlite.org/download.html
Download > Precompiled Binaries for Windows > sqlite-tools-win32-x86-3340000.zip
からダウンロードしてsqlite3.exeを任意の場所に保存。

## バージョン確認
```sqlite3 --version```

## 起動方法
```sqlite3 mydb.db```

ファイルが存在すれば開くし、なければ新規作成（ファイルはDBを更新した段階で作成される）

## テーブル一覧の確認
<code>.tables</code>

SQLiteのシステムコマンドはドット( . )から始まる。SQLと異なりシステムコマンドの末尾にセミコロン( ; )は不要。

## カラムの確認
```.schema [table name]```

```.schema``` だけだと全テーブルのカラムを表示

Data type | Description
----------|--------------
integer   |整数型
real      |浮動小数点型
text      |文字列型
blob      |無制限スカラ型（画像データなど）
null      |格納されたデータに応じて自動的に決定

ただし、他のDBとの互換性向上のため型の表記はゆるめ。

こういった表現でもcreate tableすることができる。
（例）int, tinyint, double, varchar(255)

## SQLiteの終了方法
<code>.exit</code>　もしくは　```ctrl + C```　で終了。

## システムコマンド一覧
　```.help```

## 外部ファイルの扱い方
### SQLファイルの読み込み

* SQLite起動時に読み込む場合

```sqlite3 mydb.b < sample.sql```

* SQLite起動後に読み込む場合

```.read sample.sql```

### SQLファイルのコメント
```--コメント```　もしくは　```/* コメント */```

### サンプルデータ
```sql:sample.sql
create table if not exists sample_table (id integer primary key autoincrement, name text, col text);

insert into sample_table (name, col) values ('aaa', '111');
insert into sample_table (name, col) values ('bbb', '222');
insert into sample_table (name, col) values ('ccc', '333');
```
UseEffectで関数が無限ループ実行するのを防ぐ

## useEffect
- hookの機能
- 明示的に呼び出すことはできない
- Bodyのみに定義できる（returnの中などには書けない）


## コード
- useEffectの引数に、`[]`を渡さないと無限ループになってしまう
    - よくはわからない
    - https://qiita.com/sijiaoh/items/95aba67e589515a06b31

```react
  useEffect(() => {
      (async()=>{
          //非同期でデータを取得
          const request = axios.create({
              baseURL: "http://127.0.0.1:1323",
              method: "GET"
          })

          const result = await request.get('/getdomains');//Pod一覧を取得

          if(result.data) {
              setPod(result.data);
          }
          console.log(result.data)
          console.log(result.data[0].Name)
      })();
  },[]);
```
言語の分類

## 概要
応用情報の復習です。

## 手続型言語
問題解決のための処理手順を、1文ずつ順を追って記述する。
記述する文の種類には、変数などを宣言する宣言文、変数に値を設定する代入分、分岐や繰り返しを表現する制御文があります。
制御文を記述すると、1文ずつ逐次的に実行するだけでなく、変数によって命令の実行順序を変更することができます。

#### 代表的な言語

- COBOL
- C
- BASIC

## 関数型言語
再帰処理向きの言語です。
関数の定義と呼び出しによってプログラムを記述します。
定義の記述は、[関数(引数の並び)=式]

#### 代表的な言語

- Lisp

## 論理型言語
述語論理を基礎とした論理式によってプログラムを記述します。

#### 代表的な言語

- Prolog

## オブジェクト指向言語
"オブジェクト"をプログラム構成の基本とするのが、オブジェクト指向言語です。

#### 代表的な言語
- Java
- C++

## マークアップ言語
タグ<・・・>,</・・・>と呼ばれる特殊な文字列で囲い、文書の構造や文字の大きさなどの修飾情報を記述していく言語

#### 代表的な言語
- XML(Extensible Markup Language)

## スクリプト言語
簡易的なプログラミング言語

#### 代表的な言語
- Python
- JavaScript
- Perl
- Ruby

---

※**JSON**
JavaScriptのオブジェクト記法を用いたデータ交換フォーマット

※**YAML**
再帰的に定義された頭字語であり "YAML Ain't a Markup Language"（YAMLはマークアップ言語じゃない）の意味である。