OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】RailsにReactをインストールしようとしてエラーが出たときの対処法【React】Gemfile`: You cannot specify the same gem twice with different version requirements.

<h2>症状</h2>
<a href="https://qiita.com/k-penguin-sato/items/e3cc04f787cf3254cfae">この記事</a>を参考に、RailsにReactをインストールするために、bundle installしたらエラーが出てしまいました。

Rails v6.0.3

```ruby:Gemfile
gem 'react-rails'
gem 'webpacker'
```

```terminal:ターミナル
bundle install

[!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: webpacker (>= 0) and webpacker (= 4.0.7). Bundler cannot continue.

 #  from /home/ubuntu/environment/neighbor_food/Gemfile:18
 #  -------------------------------------------
 #  gem 'sass-rails',                 '5.1.0'
 >  gem 'webpacker',                  '4.0.7'
 #  gem 'turbolinks',                 '5.2.0'
```

<h2>解決方法</h2>
Gemファイルの記載をエラーの文言通りにバージョンを追加したら、installが通りました。

```ruby:Gemfile
gem 'sass-rails',                 '5.1.0'
gem 'webpacker',                  '4.0.7'
```

```terminal:ターミナル
bundle install
```


<h2>参考</h2>
ReactをRailsと共に使う方法
https://qiita.com/k-penguin-sato/items/e3cc04f787cf3254cfae
Node.jsのCLIでローディングを実装する

# はじめに
とある情報をエクスポートするプログラムを作成していた時に、情報量が多くエクスポートに時間が少しかかるとプログラムが動作しているのかどうか不安になるときがありました。
そんなとき、よく見る、ローディング表示をすれば動作しているのかハングしてしまっているのかがわかるので、実装したいと思いました。

#環境
- Node v10.16.3
- Typescript 4.0.2
- npm 6.14.9
- git version 2.23.0.windows.1
- Windows 10 Pro

# 参考サイト
[【Node.js】CLIでロード中にクルクル回るアレ(スピナー)を作る](https://www.ultra-noob.com/blog/2020/2020-04-14-%E3%80%90node-js%E3%80%91cli%E3%81%A7%E3%83%AD%E3%83%BC%E3%83%89%E4%B8%AD%E3%81%AB%E3%82%AF%E3%83%AB%E3%82%AF%E3%83%AB%E5%9B%9E%E3%82%8B%E3%82%A2%E3%83%AC-%E3%82%B9%E3%83%94%E3%83%8A%E3%83%BC-%E3%82%92%E4%BD%9C%E3%82%8B/ "【Node.js】CLIでロード中にクルクル回るアレ(スピナー)を作る")

# コード
- `Loading.ts`ローディングスタート及びエンドの関数を提供

```typescript:Loading.ts
import rl from 'readline'

const spin_char = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]

let spin_count = 0;
const spin = (message: string) => {
  process.stdout.write('\x1B[?25l') //カーソルを消す
  rl.clearLine(process.stdout, 0) //行をすべて削除
  rl.moveCursor(process.stdout, -9999, 0) //一番左側に戻る
  process.stdout.write(`${spin_char[spin_count]} ${message}`) //spin_charの配列で描画
  spin_count++ //要素番号計算
  spin_count >= spin_char.length ? spin_count = 0 : null //要素番号のリセット
}

export const loading = (msg: string) => setInterval(() => {
  spin(msg);
}, 200);

export const endloading = (loading: NodeJS.Timeout, msg: string) => {
  clearInterval(loading)
  rl.clearLine(process.stdout, 0) // 行をすべて削除
  process.stdout.write(`\n${msg}`)//end Message
  process.stderr.write('\x1B[?25h') //ローディングで消したカーソルを戻す
}

```

## 使用例
`loading('ローディング中に表示したい文字列')`
`endLoading(loadingの返り値 ,'終了時に表示したい文字列')`
上記をそれぞれローディングスタート、ローディングエンドのタイミングで呼ぶ

```QueryCollection.ts
//start Loading
const loadingstart = loading('Query a collection')
//Discovery query
const resquery = await queryCollection(url, apikey, environmentid, collectionid, version)
//end Loading
endloading(loadingstart, 'Query a collection Finished!!')

```

### 使用イメージ
![cliLoading (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649992/8d7ae4df-f312-2d8c-b640-fa6cc3e4e5bb.gif)


# 最後に
Loading.tsの`spin_char`や表示速度等をカスタマイズしていけば自分好みのローディングアニメーションを作ることもできますので是非活用ください。
Databricks on AWS > Oracle DB on RDS 接続時のドライバ設定

Databricks から Oracle DB を参照する際のメモです。
ネットワーク設定も終わったしあとはドキュメントにあるとおりやれば大丈夫だろうと思っていたのですが、ドライバのバージョンで詰まったので記しておきます。

### Oracle Driver
今回は VAR ファイルを用います。ダウンロードページはこちら。

https://www.oracle.com/database/technologies/appdev/jdbc-ucp-183-downloads.html

手元の Databricks クラスタでは Runtime 7.5 を利用していますが、最新バージョンの ojdbc11.jar だと java が対応してないと怒られました。かわりに ojdbc8.jar を用います。以下をダウンロード。

![2021-03-30_00h24_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/96893094-4a84-8abc-5c08-daf94bcf0da8.png)

### ドライバインストール
管理しやすそうなディレクトリにアップロードします。ドライバ自体は秘匿すべき情報ではないので DBFS 配下でよいでしょう。 
![2021-03-30_00h28_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/4b9aaa0e-7c73-6780-9057-35bd5e315999.png)

ドライバのパスを控えておきます。
![2021-03-30_00h29_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/f8693b95-97f6-8b68-25a4-517969455b9a.png)

Spark API Format をコピー
![2021-03-30_00h30_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/6770c28d-ead8-f001-f3dd-67020e13c072.png)

Cluster > Libraries > Install New > JDBC/S3 > Jar と進み、コピーしたファイルパスを貼り付けて Install をクリック
![2021-03-30_00h32_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/eab7e974-f231-3a33-b51c-753ec1e9bc6d.png)

この状態になれば完了
![2021-03-30_00h34_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363781/62d5f11a-d82e-98ce-4f64-b5ca86e7267f.png)

### 接続
この状態であればこちらのドキュメントのクエリを叩くことで、Databricks のテーブルと同様にアクセスすることができます。

https://docs.databricks.com/data/data-sources/oracle.html

```sql:create_oracle_table
CREATE TABLE oracle_table
USING org.apache.spark.sql.jdbc
OPTIONS (
  dbtable 'table_name',
  driver 'oracle.jdbc.driver.OracleDriver',
  user 'username',
  password 'pasword',
  url 'jdbc:oracle:thin://@<hostname>:1521/<db>')
```

テーブル化できれば以下のようにクエリ発行可能です。

```python:python
%sql
SELECT * from oracle_table
```

```python:python
query = "SELECT * from oracle_table"
df = spark.sql(query)
```


### 参考 (上記以外)
https://docs.oracle.com/cd/E83857_01/paas/atp-cloud/atpdg/prepare-jdbc-thin-connections.html#GUID-2E28209A-4A9B-43E4-8F72-0230568CE66E

https://spark.apache.org/docs/latest/sql-data-sources-jdbc.html

https://docs.databricks.com/administration-guide/cloud-configurations/aws/vpc-peering.html

https://docs.databricks.com/dev-tools/api/latest/libraries.html
【Firebase】ウェブサイトで Firebase Authentication を使ってみる

# ウェブサイトで Firebase Authentication を使ってみる

こちらvue-cliでFirebase Authenticationを使って、ユーザ登録機能の実装したので備忘録として書きます！

## 1. アプリを Firebase に接続する
1. [vue.jsのログイン認証をFirebase Authenticationを使って構築](https://reffect.co.jp/vue/vue-js-authentication-by-firebase)を参考に、プロジェクト作成〜アプリ登録を行う。

2. FirebaseのSDKが表示が表示されるので、vueのプロジェクトに貼り付ける（こちら外部jsファイルにして読み込むのが良いっぽい）

## 2. 新しいユーザーを登録する
ユーザーがフォームに入力したら、ユーザーから提供されたメールアドレスとパスワードを検証し、それらを ```firebase.auth()```の```createUserWithEmailAndPassword``` メソッドに渡す

```js
        signUp: function (context, payload) {
            firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
                .then(() => {
                    firebase.auth().currentUser.updateProfile({
                    displayName: payload.username,
                    },)
                .then(() => {
                    context.commit('AddToState', payload)
                })
                .then(() => {
                    router.push('/')
                })
                })
                .catch(error => {
                    alert(error.message)
                })
        },

```

## 3. 既存のユーザーをログインさせる
こちら実装中・・・

## 4. 認証状態オブザーバーを設定し、ユーザーデータを取得する
こちら実装中・・・

適宜更新します！
# 参考

https://firebase.google.com/docs/auth/web/start?hl=ja

https://reffect.co.jp/vue/vue-js-authentication-by-firebase
AWSの主要サービスについて


知識ゼロから理解した事を纏めたものであり、認識齟齬があった場合はご連絡下さい。

##目次
[Amazon Elastic Compute Cloud (Amazon EC2)](#amazon-elastic-compute-cloud-amazon-ec2)
[Elastic Load Balancing (ELB)](#elastic-load-balancing-elb)
[Amazon Simple Storage Service (S3)](#amazon-simple-storage-service-s3)
[Amazon Virtual Private Cloud (VPC)](#amazon-virtual-private-cloud-vpc)
[AWS Direct Connect](#aws-direct-connect)
[Amazon Simple Queue Service (Amazon SQS)](#amazon-simple-queue-service-amazon-sqs)
[AWS Identity and Access Management (IAM)](#aws-identity-and-access-management-iam)
[Amazon CloudWatch](#amazon-cloudwatch)


##Amazon Elastic Compute Cloud (Amazon EC2)
AWSの中核のサービスの1つであり、主に仮想サーバを作成・管理する内容である。
仮想サーバーは「インスタンス」と呼ばれている。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/concepts.html

##Elastic Load Balancing (ELB)
ELBとは、負荷分散装置である。
(外部から送られてくるデータや処理要求を、同等に機能する複数のシステムに振り分け、一台あたりの負荷を抑える装置)
EC2インスタンスの前に設置され、複数のインスタンスに通信を振り分ける。
ELBをを使用することによって可用性や拡張性が高いシステムを比較的容易に構築することが出来る。

https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/userguide/what-is-load-balancing.html

##Amazon Simple Storage Service (S3)
S3は、オンラインストレージサービス。
データ容量を気にすることなく保存することができ、耐久性と可用性の高さも優れている。
※最大99.999999999%の耐久性と99.99%の可用性といった高い信頼性がある

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/Welcome.html


##Amazon Virtual Private Cloud (VPC)
VPCとは、AWSのネットワーク内に論理的に分離したネットワークを作成するサービス。
※ユーザー専用のプライベートなクラウド環境を提供するサービス

https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/what-is-amazon-vpc.html

##AWS Direct Connect
AWSが提供する専用接続サービス。
ユーザーのネットワーク環境からAWSまでインターネットを経由せずプライベートな接続を確立することが可能となっている。

https://docs.aws.amazon.com/ja_jp/directconnect/latest/UserGuide/Welcome.html

##Amazon Simple Queue Service (Amazon SQS)
SQSは、メッセージキューイング(Message Queueing)サービス。
安全で耐久性があり、スケーラブルな分散ネットワークメッセージキューサービス。

https://docs.aws.amazon.com/ja_jp/AWSSimpleQueueService/latest/SQSDeveloperGuide/welcome.html

##AWS Identity and Access Management (IAM)
IAMは、AWSのアカウント管理サービス。
ユーザやグループに対してのAWSのリソースに対するアクセスコントロールを行うことが出来る。

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/introduction.html

##Amazon CloudWatch
CloudWatchは、AWS上のリソースやアプリケーションのモニタリングサービス。
リソースに対して任意の条件で監視することが出来る。

https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html
【Firebase】Firebase Authentication導入

# Firebase Authentication導入
vueとfirebaseでアプリを作る上でこちら備忘録として書きますー！

## Firebase Authenticationとは

Firebase Authenticationを使用し、アプリでユーザー ID を識別することにより、以下が可能になる

- ユーザーデータをクラウドに安全に保存
- ユーザーのすべてのデバイスで、カスタマイズされた同じ体験を提供

また、以下が用意されている

- バックエンドサービス
- 使いやすいSDK
- アプリでのユーザー認証に使用できる UI ライブラリ

## 主な機能

### FirebaseUI Auth

### Firebase SDK Authentication
→今回はこちらを使用した

## 仕組み
### アプリへのユーザーのログインを行う流れ
1.ユーザーから認証情報を取得する。

- 認証情報には、以下が含まれる
  - ユーザーのメールアドレス
  - パスワード
  - フェデレーション ID
  - プロバイダの OAuth トークン

2.取得した認証情報を Firebase Authentication SDK に渡す。3.Google のバックエンド サービスによって認証情報が検証され、クライアントにレスポンスが返される。

### ログインが成功すると・・・

以下が可能になる

- ユーザーの基本的なプロフィール情報にアクセス
- 他の Firebase サービスに保存されているデータへのユーザーのアクセスを制御
- 提供された認証トークンを使用して、独自のバックエンド サービスでユーザーの ID の検証

# 参考
https://firebase.google.com/docs/auth?hl=ja

次回は、「ウェブサイトで Firebase Authentication を使ってみる」について書きます！
SourcetreeでPermission deniedされてGithubにpushできない時の対処法 [403エラー]


**状況：**
メンターとリポジトリを共有し、Collaborator登録も済んでいる状態でSourcetreeからGithubにpushしようとしたら以下のようなエラーが出ました。
``remote: Permission to ユーザー名/xxxxxx.git denied to "別のユーザー名".
fatal: unable to access 'https://github.com/ユーザー名/xxxxx.git/': The requested URL returned error: 403``

**環境：**
Sourcetree 4.1.0

**試したこと：**
・Gitを最新バージョンにアップデートしてSourcetreeの環境設定→Gitで設定する
　やり方は[こちらの記事](https://qiita.com/takm-reason/items/1c368d14a76cf1ccedde)を参考にしました。
・ アカウントを一回削除して連携しなおしてみる
・pushする時に左端のチェックボックスをチェックした後一回外してもう一回チェックする
![スクリーンショット 2021-03-30 0.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893593/97019f29-e33c-2c59-4fed-24091953df4a.png)
上記の方法で解決することもあるそうなので、試してみてください。



#解決方法

Sourcetreeのローカルリポジトリの設定からURLを
**https://ユーザー名:パスワード@github.com/別のユーザー名/ファイル名.git**
に変更する
![スクリーンショット 2021-03-29 23.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893593/c9e02855-d006-3567-4899-5f83c17b700f.png)
Sourcetree側から「URLにパスワードを含めるのは推奨しない」というようなメッセージが出ますがOKするとpushできるようになりました。
推奨方法ではないようなので別の方法が見つかったら追記します。

#参考サイト
[リモートにpushしたときにエラーになる - Atlassian Community](https://community.atlassian.com/t5/Sourcetree-questions/%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%ABpush%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B/qaq-p/1387429)
[Changing remote repository path on SourceTree using Git or Mercurial - Sourcetree Support](https://confluence.atlassian.com/sourcetreekb/changing-remote-repository-path-on-sourcetree-using-git-or-mercurial-785616227.html)
[git pushでpermission deniedされ403エラーになってしまう - teratail](https://teratail.com/questions/73843)
iOSのIDFAの多言語対応で少しハマったのでメモ(Privacy - Tracking Usage Description)

#IDFAの多言語について

今回、開発しました日本語学習アプリが多言語に対応させてしまっているため、
多くの言語をIDFAに対応させるために少しハマりましたので、
(本来なら以前より色々、残しておきたかったのですが)
今回ちょうどQiitaの使い方を学ぶいい機会なので、メモのつもりで書きます。


<b>Xcodeの<b>

info.plist
↓
Privacy - Tracking Usage Description
↓
String

に<b>「パーソナライズされた広告を配信するために使用されます。」</b>
のようなコメントを入れないといけないとのことで

<b>すっかり忘れていまして、何も入れてませんでした:joy:</b>

なので、アップデート申請を<b>無事にリジェクト</b>されました。

(その後、アップデートが無事通りましての記事公開です)

一つの言語なら簡単なのですが


<b>簡単に書きますと、Info.plistを増やすのではなく</b>

![スクリーンショット 2021-03-28 17.44.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248272/2c48146f-21e9-8049-a1c9-103aac97175c.png)
こうみたいです！

<b>File → New → File → Strings File</b>

で<b>Strings File</b>を作りまして、Info.Plistを選択すると右の方にLocalization
がありますので、チェック入れますとInfoPlist.stringsが増えていきます。

![スクリーンショット 2021-03-28 17.50.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248272/c7d59e6b-e0e7-9a7f-09f0-0fd49c222957.png)


そのStringsファイルに


```ml:InfoPlist.strings
NSUserTrackingUsageDescription = "Your data will be used to deliver personalized ads to you";
```
のような感じで入れますと、言語の変更ができます。

#ちなみに

当アプリはたくさんの言語を入れていまして...
![スクリーンショット-2021-03-28-21.10.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248272/ce7d5c97-e7cd-7129-0e40-ae65de75acdf.png)
チェックマークを連続で押そうとすると
![スクリーンショット 2021-03-28 21.06.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1248272/fe6040c4-f0fe-d44c-8a7f-440d13112ad0.png)
Xcodeさん<b>「ちょ、待てよ:anger::anger::anger::anger::anger::anger::anger::anger::anger:」</b>

<b>と、怒られます！</b>:joy:

なので<b>結構大変した！</b>
(あんまり同じことをされる方は少ないと思いますが)

どなたかの参考になれば幸いです！

<b>環境</b>
Xcode Version 12.3 (12C33)
iOS 14.3

#参考サイト
https://i-app-tec.com/ios/localization.html

https://stackoverflow.com/questions/25736700/how-to-localise-a-string-inside-the-ios-info-plist-file
【VBA】文字列の中のひらがなをカタカナに、カタカナをひらがなに変換する方法

今回は、文字列の中のひらがなをカタカナに、カタカナをひらがなに変換するマクロです。

サンプルデータは以下の図をご覧ください。

![サンプル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242278/071caa65-f6fd-3168-1593-16f95b22443f.jpeg)


↓実践動画になります。
https://youtu.be/-dah3Y-jN1Q

ソースコードは下記の通りです。

```

Sub 文字の変換()

    ' ひらがなをカタカナに変換
    Cells(2, 3) = StrConv(Cells(2, 2), vbKatakana)
    
    ' カタカナをひらがなに変換
    Cells(3, 3) = StrConv(Cells(3, 2), vbHiragana)

End Sub

```

詳細を説明します。

>StrConv(Cells(2, 2), vbKatakana)

こちらは、カタカナに変換をしています。

StrConvは文字列を特定の形式に変換する時に使います。

詳細を知りたい方は、下記の記事がいいかと思います。
http://officetanaka.net/excel/vba/function/strconv.htm

第1引き数には、対象の文字列を指定して、第2引数には何に変換するのかを指定します。
カタカナに変換する時は、「vbKatakana」を使用します。


>StrConv(Cells(3, 2), vbHiragana)

こちらは、ひらがなに変換しています。
第2引数に「vbHiragana」を指定することで、ひらがなに変換出来ます。

以上が、文字列をひらがな、あるいは、カタカナに変換する方法でした。
Ubuntu Mate 20.04 on Raspberry Pi 4 Model B上のOpenVINOでPoseEstimationのデモを動作させる

# 用意した物

1. Raspberry Pi 4 Model B (メモリ4GB)
1. Ubuntu Mate 20.04とOpenVINO/OpenModelZooを導入済みのmicroSDカード(https://qiita.com/yohama/items/c62ede31f28b7dd05ddc)
1. Intel Neural Compute Stick 2

# 前準備

学習済みモデルをOpenVINOで実行できるIR形式に変換するために必要な依存ライブラリがあるので、インストールしておきます。

```bash
sudo apt install -y protobuf-compiler
pip3 install onnx torch
```

onnxのインストールには、内部でビルドプロセスが動いていたらしく、10分弱かかりました。

# 学習済みモデルのダウンロード

OpenModelZooを利用して、PoseEstimation用の学習済みモデルsingle-human-pose-estimation-0001と、ObjectDetection用の学習済みモデルmobilenet-ssdをダウンロードします。

```bash
cd ~/open_model_zoo/tools/downloader
./downloader.py --name single-human-pose-estimation-0001 --precisions=FP16
./downloader.py --name mobilenet-ssd --precisions=FP16
```

# 学習済みモデルをIR形式に変換

ダウンロードした学習済みモデルを、OpenVINOで実行できるIR形式に変換します。

```bash
cd ~/open_model_zoo/tools/downloader
./converter.py --name single-human-pose-estimation-0001 --precisions=FP16
./converter.py --name mobilenet-ssd --precisions=FP16
```

IR形式への変換には、3分半程度かかりました。

# 動作確認

まず、動作確認用の動画ファイルを用意します。

ここでは、Intelのサンプル動画をダウンロードしてきます。

```bash
wget https://github.com/intel-iot-devkit/sample-videos/raw/master/face-demographics-walking.mp4
```

次に、OpenModelZooのインストールディレクトリの中に、PoseEstimationのサンプルコードsingle_human_pose_estimation_demo.pyが入っているので、先ほどIR形式に変換したsingle-human-pose-estimation-0001とmobilenet-ssdをモデルに指定し、ダウンロードしたサンプル動画を入力動画として、実行します。

```bash
python3 ~/open_model_zoo/demos/python_demos/single_human_pose_estimation_demo/single_human_pose_estimation_demo.py -m_od ~/open_model_zoo/tools/downloader/public/mobilenet-ssd/FP16/mobilenet-ssd.xml -m_hpe ~/open_model_zoo/tools/downloader/public/single-human-pose-estimation-0001/FP16/single-human-pose-estimation-0001.xml -d MYRIAD -i ~/face-demographics-walking.mp4
```

しばらくすると、以下のように動画像中の人物付近に、single-human-pose-estimation-0001によるPoseEstimation結果である顔特徴と関節の位置（赤・青・緑の点群）と、mobilenet-ssdによるObjectDetection結果である青い矩形が重畳描画されます。

![20210329_pose_estimation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/1aa0bbdb-29d1-0979-5403-6c141c45482d.png)

![20210329_pose_estimation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/f859b686-542b-19ac-4726-9a1f8d40b4ba.png)

ObjectDetectionは25-30FPS程度でほぼリアルタイムで回りますが、PoseEstimationは1FPS程度なので、動画像中に人物が映ると、急にスローモーションのようになります。

# 参考サイト

https://openvino.jp/single-human-pose-estimation-demo-windows/
FirebaseのFunctionsの関数をローカルでエミュレーションする方法

nuxt.js＋Firebaseでの開発にて、Functionsの関数をローカルでデバッグしたくなった時に辿り着いた方法を備忘録として残します。Functionsへのdeployはそこそこに時間がかかるのでデバッグが大変ですが、ローカルでエミュレーションすることで大幅に時間を短縮できます。

追記(2021/03/30)：こちらの方法は残念ながらバックグラウンド関数トリガー（firestoreのドキュメントの変更をトリガーにするなど）では使用できない様です。[functions.https.onCallトリガー](https://firebase.google.com/docs/functions/callable)などで使用可能となっています。

# 結論
### 1. firebaseに関するプラグインを下記の様に設定する

```/plugins/firebase.js
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/functions'
import config from '~/firebaseConfig.json'

if (!firebase.apps.length) {
  firebase.initializeApp({ ...config })
}

export default ({ app }, inject) => {
  inject('firebase', firebase)
  inject('firestore', firebase.firestore())
  inject('fireAuth', firebase.auth())
  inject('fireStorage', firebase.storage())
  inject('fireFunc', firebase.functions())
}

// 下記がローカルでFunctionsの関数をエミュレーションする設定
// Functionsサーバーを利用する際はコメントアウトでOK
//-------------------------------------------------------
const functions = firebase.functions()
functions.useFunctionsEmulator('http://localhost:5000')
//-------------------------------------------------------
```
### 2. 1つ目のterminalにて「firebase serve --only functions」で関数のエミュレーション開始
### 3. 2つ目のterminalにて「npm run dev」で開発サーバーを起動

この手順でFunctionsの内容の編集とデバッグを同時進行で行うことができるはずです。

# 補足：Functionsのロケーションをデフォルトから変更する場合
下記の様にFunctionsのロケーションを設定し、「this.$fireFunc~~」のようにFunctionsを呼び出す場合、Functionsのサーバーにアクセスしてしまうため、**ローカルでエミュレーションできません**。ローカルでエミュレーションする際は、デフォルトのFunctionsのサーバーにアクセスするように設定します。

```/plugins/firebase.js
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/functions'
import config from '~/firebaseConfig.json'

if (!firebase.apps.length) {
  firebase.initializeApp({ ...config })
}

export default ({ app }, inject) => {
  inject('firebase', firebase)
  inject('firestore', firebase.firestore())
  inject('fireAuth', firebase.auth())
  inject('fireStorage', firebase.storage())
  // ↓ロケーションを東京に変更、ローカルでエミュレーションする際はこちらはコメントアウトする
  inject('fireFunc', firebase.app().functions('asia-northeast1')) 
  // ↓ローカルでエミュレーションする際はこちらを使用
  // inject('fireFunc', firebase.functions())
}

const functions = firebase.functions()
functions.useFunctionsEmulator('http://localhost:5000') //このままでは機能しない
```

# 最後に
読んでいただきありがとうございます。
同じ問題に直面した方のお役に立てたら幸いです。

当方初学者のため、間違いの訂正/アドバイス歓迎しております。

参考記事
[ローカル環境でCloud Functions for Firebase（特にCallable関数）の動作テストをする](https://qiita.com/zaburo/items/9698ccb26dd4e0c37ab0)
[Cloud Functions のロケーション](https://firebase.google.com/docs/functions/locations?hl=ja)
H2 Databaseを用いてテスト用データを作成

## やりたいこと

JunitテストにDB接続のテストデータを作成するために、H2データベースを利用して、Windows10 環境でテストデータを作成してみたので、メモを書きます。

環境は以下となります。
* Java 1.8
* H2 [1.3.175](https://code.google.com/archive/p/h2database/downloads)


## H2データベースの起動
H2データベースの[Zipファイル](https://code.google.com/archive/p/h2database/downloads)を展開して、binフォルダ配下の`h2.bat`をダブルクリックします。

![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/a84acc6b-26db-6405-df33-248fd2f3cdbc.png)

正常に起動できたら、以下のような画面が表示されます。

![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/a5fc80f9-a693-273d-7b97-b861e26c138c.png)

今回は、ロカール上の作業のため、「保存済み設定」でH2 Databaseのモード を「Generic H2(Embedded)」を選択します。

JDBC URLのところ、`jdbc:h2:./../test`を指定します。
デフォルドのユーザー名は、`sa`、パスワード不要です。

接続ボタンを押下すると、テストデータ作成用画面に遷移できます。
![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/2c398965-ec6c-42a0-6c04-3ccae5875342.png)


## テストデータの作成
以下のSQLを実行します。

```
CREATE TABLE OPE(USER_ID CHAR(22), COMPANY_NM VARCHAR(100), DEPARTMENT_NM VARCHAR(100));
CREATE TABLE PROJECT(PROJECT_ID CHAR(22), PROJECT_NAME VARCHAR(100), PROJECT_TYPE VARCHAR(100));
```

```
INSERT INTO OPE (USER_ID, COMPANY_NM, DEPARTMENT_NM) VALUES('111111111', 'サンプル', 'sample');
INSERT INTO OPE (USER_ID, COMPANY_NM, DEPARTMENT_NM) VALUES('0000000001', 'サンプル2', 'sample2');
INSERT INTO PROJECT (PROJECT_ID, PROJECT_NAME, PROJECT_TYPE) VALUES('0000000001', 'メリオダス', 'test');
INSERT INTO PROJECT (PROJECT_ID, PROJECT_NAME, PROJECT_TYPE) VALUES('0000001017', 'メリオダス2', 'test2');
```

データベースの左側に`OPE`と`PROJECT`のテーブルを生成されます。
![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/37f44768-a69d-097d-ca01-a0b213db7d5d.png)


また、`test.h2.db`のファイルが生成されたため、このデータベースを利用して、Junitテストを実行できます。

今回、H2バージョンは `1.3.x` なので、生成されたデータベースファイルは `<databaseName>.h2.db` です。
H2バージョン `1.4.x` 以上を利用する場合、生成されるデータベースファイルは `<databaseName>.mv.db` です。


![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/3da7a06d-486e-0010-7de5-6e76d26fbbe6.png)

注意点、現時点最新のH2バージョン `1.4.200`のデータベースを利用する際、以下のエラーが出でました。
H2データベースのissue [#2078](https://github.com/h2database/h2database/issues/2078)にも同じ事象が出ているそうです。その場合、`1.4.199`のバージョンを利用してください。

```
java.lang.IllegalStateException: Unable to read the page at position 281474976722688 [1.4.199/6]
...

```


※データベースにログインする際、パスワードを追加したい場合、以下のコマンドを実行します。

```
ALTER USER sa SET PASSWORD 'password'
```
「http://からhttps://へ強制リダイレクトを設定する方法」と「常時SSLのメリット・デメリット」

# どうも7noteです。常時SSL化のメリットデメリットから、リダイレクトの設定方法まで。
SSLへのリダイレクト方法を毎回毎回調べてしまうので、忘れないようにここへ！
「.htaccess」
```.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>
```
これでhttp://の方へアクセスされたとしても強制的にhttps://へリダイレクト処理がされます。
※既に.htaccessに1,2,5行目が書かれている場合は、3,4行目を間に追加するだけでOK!
## そもそも常時SSL化するメリット・デメリットは？
### ◎ メリット
#### 1. 「セキュリティの強化」
ログイン情報などの個人情報の盗聴を防げる。
#### 2. 「信頼性の向上」
SSLを知っているユーザーへ信頼をアピールできる。
#### 3. 「アクセス解析の精度向上」
リファラー（どのページからユーザーが来たかの情報）を受け取ることができるので、分析やアクセス解析の精度が上がる。
#### 4. 「SEOに有利」
google先生が「SSL対応しているサイトはSEOの評価上げますよ」と公表しています。
### ✗ デメリット
#### 1. 「運用コストの増加」
SSLの証明書の発行にお金がかかる場合があります。ドメインやサーバーの契約内容を確認して、SSLの対応状況や費用を確認しましょう。
#### 2. 「広告収入の減少リスク」
httpsがすべてのコンテンツに対応していないと、広告の掲載ができない。現状既に広告運用をしているサイトは要注意。
#### 3. 「リファラーが渡せなくなる」
httpのサイトへリファラー（どのページからユーザーが来たかの情報）が渡せなくなるので、リンク先のサイトがhttpのままなら分析できないなどのデメリットが発生するかも。
## まとめ
常時SSLに設定するのは難しくなく、簡単に設定できます。
もちろんサイトによって重要視すべき部分が違うので一概に常時SSLが良いとは言い切れませんが、基本的にはメリットの方が大きいと捉えられることが多いのではないかと思います。
一時的に手間などが発生するかもしれませんが、長い目で見れば早めに対応しておくのがベターかなというのが私の意見です。
参考：
http://blog.ko-atrandom.com/?p=266
https://growthseed.jp/experts/seo/ssl-merit/#SSL-3
#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
pythonでバブルソート

pythonで実装練習２
今回も、pythonで実装練習です。
題材は、バブルソートですが、pythonでは、L.sort()で並び替えは可能です。

■ バブルソート

```python:
N = int(input())
L = list(map(int,input().split()))

for i in range(1,N):
    for j in range(1,N-i+1):
        if L[-j] < L[-j-1]:
            tmp = L[-j]
            L[-j] = L[-j-1]
            L[-j-1] = tmp
        print(L)
```

■ input

```
5
5 3 2 4 1
```
■output

```
[5, 3, 2, 1, 4]
[5, 3, 1, 2, 4]
[5, 1, 3, 2, 4]
[1, 5, 3, 2, 4]
[1, 5, 3, 2, 4]
[1, 5, 2, 3, 4]
[1, 2, 5, 3, 4]
[1, 2, 5, 3, 4]
[1, 2, 3, 5, 4]
[1, 2, 3, 4, 5]
```
QiitaのMarkdown記法が変更 注釈とリンクが死ぬ

# まとめ

引用かつコードブロック記法を一行で書いたパターン
<pre>
\>\`\`\`
\`\`\`
</pre>

が奇数個あると、
注釈記法とリファレンス式のリンク記法が機能しなくなる。
(パーサの問題だと思われるが観測できたのが[]まわり)

# 解決方法

引用とコードを一行ずらす

<pre>
>
```
```
</pre>

# 現象の認識日

2021年03月24日
昔の自分の記事を見たときに

# キャプチャ

![キャプチャ1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62354/571ead01-946f-9bd0-9566-a3872af0cf1f.jpeg)

![キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62354/cccf54d4-45ed-e55b-87d3-9f06597c130e.jpeg)

![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62354/8841e7f4-6df5-4963-9751-3cce152e3194.jpeg)

![キャプチャ4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62354/cea2b17c-eb6d-231e-e1f2-730638cb2868.jpeg)

***

常用していた記法なので複数記事に影響があるはず。
全記事チェックも面倒だし更新日時が最新になっちゃうしで放置中。

***


https://qiita.com/Qiita/items/c686397e4a0f4f11683d
>**コードブロック上下に空行を挿入しないと正しく表示されないことがあります。**

> 引用の中に別のMarkdownを使用することも可能です。

***

>
```
ok
```

[qiita]
[qiita]:https://qiita.com

>```
ng
```

[qiita2]
[qiita2]:https://qiita.com
【vscode】Todo+を使ってみる

初書：2021/03/29
VSCode：バージョン: 1.54.3
Todo+：4.18.3

# 前書き

vscodeの拡張機能で何かいいの無いかなあと探っていたらTodo+というタスク管理があったので、使ってみることにする。

# インストール

[Todo+ - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus)

vscodeの拡張機能からインストールするだけ。
ちなみに、「Todo+」で検索すると２つ出てくるのだが、片方はプレビュー版？らしい。ので注意書きがない方をインストールする。

それだけ。

# 早速使ってみる

コマンドパレット（`command+shift+p`）から、`Todo: Open`を選択すると、拡張子なしの`TODO`ファイルが作成される。
中身はこんな感じ

```txt:TODO
Todo:(1)
  ☐ Item
```

## タスクを追加する

インデントを合わせて、タスク名を記述。

```txt:TODO
Todo:(1)
  ☐ Item
  何かやるタスク
```

記述したら、その行で`option+enter`もしくは`command+enter`を押すと、自動的に先頭に四角が付き、タグの右の個数が2に増える。
（操作は順番を入れ替えることが可能）

ちなみにタスクに色々と設定ができる

### 今日やることを宣言する

後ろに`@today`をつける。すると、タグ自体がハイライトされる。
メリットは今のところ不明。。

### 予想時間を記述する。

`@1h`や`@2.5h`など、タスクの完了に必要な時間を記述する。
これを記述することで、タグの横に合計の必要時間が表示されたり、タスクを開始したときに経過時間ではなくカウントダウンになる。
まあ残り時間が0になっても通知は来ないので、参考程度になるくらい。

### 優先順位をつける

`@high`や`@low`、`@critical`をつけることが出来る。これも@todayと同じくハイライトされるだけであり、見た目以外に変化するものはなさそう。
なお、今日やることや優先順位でハイライト出来るものは、`settings.json`で`todo.tags.names`をいじることで変更できる。

## タグを追加する

タスクと同じくインデントを合わせてタグ名を記述し、最後に`:`を記述する

```txt:TODO
Todo:(2)
  ☐ Item
  ☐ 何かやるタスク
新たなタグ:
```

色が変わればダグ付は完了。このように、タグをつけてカテゴリ分けすることが可能。

## タスクを開始する

ただ単に追加するだけならメモ帳でいいので、作業を開始するときは開始することを宣言することができる。
やり方は簡単で、該当行にカーソルを合わせて`option+s`を押す。
そうすると、`@started(21-03-29 21:39)`という表記が後ろにつく。これで完了。

ステータスバーに、開始からの経過時間がカウントされていることが確認できる。

## タスクを終了する

始めたタスクはいつかは終了する。（よね？？）
開始と同様、カーソルを合わせ、`option+d`を押す。
そうすると、終了時間と、終了にかかった時間が記録される。これで作業は終了。

## タスクをキャンセルする

そんな時もある。そのときは`option+c`を押す。
ちなみに終了したタスクで間違えてキャンセルを打つと、完了時間と経過時間が削除されるので、カーソルの位置に注意。

## タスクをアーカイブに移動する

作業が終わった/キャンセルされた作業を、アーカイブに移動することができる。
`command+shift+a`を押すだけ。
なお、このコマンドは個別に移動することはできず、終了したタスクやキャンセルされたタグが全てアーカイブに移動する。
`Archive`と書かれたタグに移動するが、この名前を変更するときは、`settings.json`の`todo.archive.name`で変更できる。

# プログラムに埋め込む

ここまではTODOファイルでの操作だったが、実は普通のプログラムの中にもTODOリストを埋め込むことができる。

やり方は簡単、例えばJavascriptの場合は、

```js:index.js
// TODO: todo test
alert("this is test.");
```
といった感じで、コメント記号 + (0以上の空白) + TODO: でtodoリストを記述することが出来る。
とりあえず総当たりで試した感じ、

```
// TODO: todo test
/* TODO: todo test */
/** TODO: todo test */
# TODO: todo test
<!-- TODO: todo test -->
```
などは対応している模様。詳しくは`todo.embedded.regex`の正規表現を解析してください（読むの諦め）。
また、`TODO`以外にも、`FIXME`、`FIX`、`BUG`、`UGLY`、`HACK`、`NOTE`、`IDEA`、`REVIEW`、`DEBUG`、`OPTIMIZE`に対応している。

ちなみに埋め込んだプログラムは、アクティビティバーに追加されたチェックマークのところの`EMBEDDED`で確認、ジャンプすることが可能。
ただし、TODOファイルと違い、スタートとかはできない。

# プログラムに埋め込まれたTODOファイルを作成する

コマンドパレット（`command+shift+p`）から、`Todo: Open Embedded`を選択すると作成される。

# 終わりに

とりあえず機能関係を書いてみた。結構使い勝手がいいという風に聞いているので、もしかしたら気づいていない機能もあるかもしれない。

# 参考サイト

[VSCodeでタスク管理 - Reincarnation+#Tech](https://fereria.github.io/reincarnation_tech/10_Programming/50_VSCode/vscode_task/)
google nest hubで子供がパウパトロールの曲をかけれるようにする

Qiita初記事です。

google nest hubを買いました。
google homeは音だけだったから使いにくいかなと思って二の足を踏んでいたんですが、google nest hubというディスプレイ付きのgoogle homeが発売されているのを知り、買ってみました。

子供たち(6歳と3歳)も、はずかしいぃとか言いながら、"おっけーぐるぐる いまなんじ？"とか言い始めてくれて、これは、もっとぐるぐるさんと仲良くなっていただこう！ということで、子供たちが大好きなパウパトロールの歌をぐるぐるさんにかけてもらうための設定をしました。

# spotifyとの接続
簡単です。google homeのアプリを開いて、設定→音楽から、その他の音楽サービスの中のspotifyを選ぶだけ。
アカウントリンクしてよいか聞いてくるので、アカウントをリンクボタンを押します。
アクセス権を聞いてくるので、同意するを押します（私は押しましたが、気になる方はちゃんと細かくご確認ください）

私は、SpotifyのPremium会員なので好きな曲をかけれますが、Premiumじゃない方はどう動作するのかはわからないです。
ちなみに、これを機に、妻もPremium会員になりました（Spotify Premium Duoプランにしました）

# spotifyでプレイリストを作成
spotifyアプリのMy Libraryから、プレイリストを作成ボタンを押し、"パウパトロール"という名前で保存。
曲を追加ボタンを押して、"PAW Patrol Opening Theme"の横のプラスボタンを押します。
これで完了。1曲だけ入ったプレイリストが作られます。

これをやらないと、パウパトロールの知らない歌が流れてしまいます。

# 完成
これで、"おーけー、ぐーぐる、パウパトロールをかけて" で、パウパトロールの曲が流れます！
(spotify的に英語の歌しかなかったので、日本語じゃなくて英語の歌しかこのやり方では再生できないです)

子供たちのたどたどしい日本語でもちゃんとgoogle nest hubは認識してくれるようで、パウパトロールの歌を子供たちが聞きたいときに聞けるようになって、子供たちがもっとぐるぐるさんと仲良しになりました。めでたしめでたし。


-------
2021年3月から始めたスマートホーム化はこちらに一覧化しています（2021年5月時点）

https://qiita.com/tosshie/private/738a85184d6cdaf20b3e
Windows10 Proでリモートディスクトップできないとき

# 最近のWindows10はめんどくさい
 OSインストール時にマイクロソフトアカウントなしでユーザーが作れなかったりするのが、よくない気がする。

## 設定
* WindowsにログインするときPINではなくマイクロソフトアカウントでWindows10Proに1回ログインしておく（たぶんこれやらないとダメ）
* 設定からリモートディスクトップを検索して「リモートディスクトップを有効にする」をON
* 同じ設定画面の「このPCに接続する方法」のPC名をメモする(クライアント接続で使う)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185049/0c72ab78-1cea-a1fe-2d85-2c3990f86627.png)


# ファイアーウォールの設定
セキュリティソフトがESETの場合は以下の設定を追加すればOK
対話式にして永続を適当にクリック後に以下の設定を残して他を削除してもよい
## 一般
svchost.exe/TermServiceの通信を許可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185049/88ad5a8a-a95f-0d26-6b31-61af3c0ce6b4.png)

方向：内向き
アクション：許可
プロトコル：TCPおよびUDP


## ローカル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185049/ca20a336-4477-7545-7aa5-b063ca943b18.png)

アプリケーション
C:\Windows\System32\svchost.exe
サービス
TermService

# クライアント
クライアント側で接続先のPC名で接続する。IP addressでもOK

これでVPNで自宅に入って操作可能になるはず！
pythonで挿入ソートを実装

pythonでプログラミングの基礎練習１
*注意 pythonではL.sort()で並び替え可能ですが、アルゴリズム実装の練習として、コメントいただければ幸いです！

■ 挿入ソートの実装

```
N = int(input())
L = list(map(int,input().split()))

for i in range(N):
    for j in range(i):
        if L[i] < L[j]:
            ins = L[i]
            L[j+1:i+1] = L[j:i]
            L[j] = ins
            print(L)
```

■ input例

```
6
5 4 2 3 1 6
```
■ output例

```
[4, 5, 2, 3, 1, 6]
[2, 4, 5, 3, 1, 6]
[2, 3, 4, 5, 1, 6]
[1, 2, 3, 4, 5, 6]
```
NFCネイルチップをLチカしてみた

# はじめに

NFCに反応するLEDネイルチップをLチカしてみた。

![IMG_7398.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/fead169c-966c-bfa8-1da6-4e2895447c3f.jpeg)

<iframe width="560" height="315" src="https://www.youtube.com/embed/lZ5tZKdNcDE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 環境

- Raspberry Pi 3 Model B+
- 非接触ICカードリーダ/ライタ (RC-S310)
- NFCネイルチップ

# 手順

## 1. libpafeをダウンロードする

```bash
$ wget http://hito.music.coocan.jp/pasori/libpafe-0.0.8.tar.gz
```

## 2. libpafeをビルドする

```bash
$ sudo apt install libusb-1.0-0-dev
$ tar xvzf libpafe-0.0.8.tar.gz
$ cd libpafe-0.0.8/
$ ./configure
$ make
```
## 3. libpafeをインストールする

```bash
$ sudo make install
```

```bash
$ sudo vi /lib/udev/rules.d/60-libpafe.rules
```

```text:60-libpafe.rules
ACTION!="add", GOTO="pasori_rules_end"
SUBSYSTEM=="usb_device", GOTO="pasori_rules_start"
SUBSYSTEM!="usb", GOTO="pasori_rules_end"
LABEL="pasori_rules_start"

ATTRS{idVendor}=="054c", ATTRS{idProduct}=="006c", MODE="0664", GROUP="plugdev"
ATTRS{idVendor}=="054c", ATTRS{idProduct}=="01bb", MODE="0664", GROUP="plugdev"
ATTRS{idVendor}=="054c", ATTRS{idProduct}=="02e1", MODE="0664", GROUP="plugdev"

LABEL="pasori_rules_end"
```

```bash
$ sudo ln -s /lib/udev/rules.d/60-libpafe.rules /etc/udev/rules.d/
$ sudo udevadm control --reload-rules
$ sudo reboot
```

## 4. libpafe-rubyをダウンロードする

```bash
$ wget http://hito.music.coocan.jp/pasori/libpafe-ruby-0.0.8.tar.gz
```

## 5. libpafe-rubyをビルドする

```bash
$ sudo apt-get install ruby ruby2.5-dev
$ tar xvzf libpafe-ruby-0.0.8.tar.gz 
$ cd libpafe-ruby/
$ ruby extconf.rb
$ make
```

## 6. libpafe-rubyをインストールする

```bash
$ sudo make install
```

## 7. サンプルプログラムを実行する

```bash
$ ruby sample/felica_dump.rb
```
if文〜JS〜

今回は関数とif文について学習していきます！！
まず、関数の前にif文について学習していきます。

#if文について
if文とは条件分岐のときに使います。

```main.js
if (条件式){
 trueだったときの処理
} else if (条件式){
 falseだったときの処理
} else {
 どちらにも当てはまんなかったとき
}
```
上記のように流れていきます。

では、実際にプログラムを書いていきましょう。

まず、変数か定数を定義します。
Jsでは、変数はlet,定数はconstを宣言します。前の記事でも学習しましたが、変数は入れ替えができますが定数は変更することができないので注意しましょう、1つのプログラムを書く中では変数ではなく定数を極力使うようにしましょう！！

```main.js
const score = 10;

    if (score >= 80) {
      document.write("よくできました");
    } else if　(score >= 60) {
      document.write("半分取れました！！更に頑張りましょう！！");
    } else {
      document.write("頑張れよ");
    }
```
定数constに10点を代入します。基準10点になります。
ここで、if文で条件式をかきます。
①scoreが80点以上だったら
②scoreが60点以上だったら
③全てに当てはまらなかった場合
の条件式をかきます。

console.logではなく、今回はdocument.writeでブラウザに表示するようにしました。
ただ、この、if分でもいいのですが、長いので省略しちゃいましょう👍

```main.js
 score >= 80 ? document.write("よくできました") : document.write("半分取れました！！更に頑張りましょう！！") 
```

となります！！
AWS (Amazon Web Services) について

知識ゼロから理解した事を纏めたものであり、認識齟齬があった場合はご連絡下さい。

<h2>目次</h2>
[1.AWSとは](#1AWSとは)
[2.クラウドとは](#2クラウドとは)
[3.物理サーバとは](#3物理サーバとは)
[4.物理サーバとAWSとの違い](#4物理サーバとAWSとの違い)
[5.AWSサービス種類について](#5AWSサービス種類について)

##1.AWSとは
AWSとはAmazon Web Servicesの略であり、Amazonが提供しているクラウドサービス。
ネットワークを経由して仮想コンピューターやストレージを始めとする様々なサービスが提供されており、法人・個人問わず様々な方が利用している。

https://aws.amazon.com/jp/what-is-aws/

##2.クラウドとは
クラウドとはクラウドコンピューティングの略。

クラウドとはユーザーがインフラやソフトウェアを持っていなくても、インターネットを通じて、サービスを必要な時必要な分だけ利用できる仕組み。

https://aws.amazon.com/jp/cloud/

##3.物理サーバとは
物理サーバとは、物理的な実体としてのサーバコンピュータそのもののこと。サーバのハードウェア上で構築・実行されているシステムのこと。

##4.物理サーバとAWSとの違い
物理サーバーとAWSとでは以下のような違いがあります。

|  | 物理サーバー | AWS |
|:-----------|:------------|:------------|
| コスト       | 初期に全額必要 | 初期コスト不要<p>(使用した分だけ料金が発生)|
| サーバの完成期間|数週間～数か月<p>(主に機器納品に時間を要する)|数分       |
| サーバの追加変更| 時間とコストがかかる|追加変更の時間もコストもかからない|

##5.AWSサービス種類について
AWSには、100以上のサービスが存在している。
AWSのサービスの特徴として、利用料金が初期費用不要の時間課金という点がある。
初期費用は不要であり使用した分のみ料金が発生するので、必要な分だけのサーバー(インスタンス)を必要な時期に作成し、不要な場合は削除といった使い方が出来る。

https://aws.amazon.com/jp/products/
【ExcelVBA】文字列結合の速度比較

# はじめに

以前に[【ExcelVBA】文字列操作用のユーティリティ関数を自作してみた](https://qiita.com/nkojima/items/a1702d5b0964a119c07b)という記事を書きましたが、この記事では文字列から空白を除去したり、文字列中に部分文字列が含まれるかを調べたりする処理をまとめたもので、文字列結合については全く触れていませんでした。

そこで2年ほど前に書いた[【Java】文字列結合の速度比較](https://qiita.com/nkojima/items/0098dccbe4a593bc0306)という記事と同様に、文字列を単純に結合させる場合と、少し工夫した場合とで速度比較をしてみました。


# テスト環境

* PC
  * CPU：Ryzen7 3700X
  * RAM：32GB
  * SSD：Samsung SSD 970 EVO Plus 500GB
* Excel：Excel 2013 (32bit)

# テストに使用したコード

* "abc"という文字を10万回結合するコードを3種類作成して、速度比較をしてみました。
  * 「&」を用いた単純な文字列結合
  * 固定長の配列＋Join関数を用いた文字列結合
  * 動的配列＋Join関数を用いた文字列結合
* [こちらの記事](https://www.sejuku.net/blog/34347)ではMid関数を使った高速化の方法も紹介されていましたが、今回は割愛しました。

```vb:StringConcat.bas
Option Explicit

'------------------------------------------------------------------------------
' 文字列結合の速度比較
'------------------------------------------------------------------------------

' 結合させる文字列
Private Const SAMPLE_TXT As String = "abc"

' メイン処理
Sub main()
    Call SimpleConcat
    Call ArrayJoin
    Call DynamicArrayJoin
End Sub

' 単純な文字列結合
Sub SimpleConcat()
    Dim startTime As Double, endTime As Double, processTime As Double
    startTime = Timer

    Dim i As Long
    Dim buff As String
    
    For i = 0 To (100000 - 1)
        buff = buff & SAMPLE_TXT
    Next i
    
    endTime = Timer
    processTime = endTime - startTime
    Debug.Print "SimpleConcatの処理時間：" & processTime
End Sub

' 固定長の配列を使った文字列結合
Sub ArrayJoin()
    Dim startTime As Double, endTime As Double, processTime As Double
    startTime = Timer

    Dim i As Long
    Dim buff As String
    Dim ary(99999) As String
    
    For i = 0 To (100000 - 1)
        ary(i) = SAMPLE_TXT
    Next i
    buff = Join(ary, "")
    
    endTime = Timer
    processTime = endTime - startTime
    Debug.Print "ArrayJoinの処理時間：" & processTime
End Sub

' 動的配列を使った文字列結合
Sub DynamicArrayJoin()
    Dim startTime As Double, endTime As Double, processTime As Double
    startTime = Timer

    Dim i As Long
    Dim buff As String
    Dim ary() As String
    
    For i = 0 To (100000 - 1)
        ReDim Preserve ary(i)
        ary(i) = SAMPLE_TXT
    Next i
    buff = Join(ary, "")
    
    endTime = Timer
    processTime = endTime - startTime
    Debug.Print "DynamicArrayJoinの処理時間：" & processTime
End Sub
```

# テスト結果

```text:テスト結果
SimpleConcatの処理時間：2.265625
ArrayJoinの処理時間：0.015625
DynamicArrayJoinの処理時間：0.015625
```


# テスト結果の考察

* 予想通り、単純な文字列結合が2秒以上と最も遅かったです。
* 固定長の配列を使った方法が最も速いかと思いましたが、意外にも動的配列を使った方法と同じ処理時間でした。
  * テスト後に気になって調べてみたところ、[こちらの記事](https://vbabeginner.net/speed-up-vba-join/)では「（配列の要素数を徐々に拡張するよりも）Redimで事前に要素数を確保しておく方が速い」と書かれていましたが、私の環境ではいずれも変わらない結果でした。
  * `Redim Preserve...`による配列の要素数変更は、高スペックなPCだと無視できるほどコストが小さい処理なのかもしれません。
  * あるいはExcelのバージョンによって動作速度が異なっている可能性もありますが、現時点でははっきりとした理由が分かりません。

# まとめ

* ちょっとした文字列結合なら「&」でも問題なさそう。
* 文字列を連結させてCSVやHTMLなど大きなテキストデータを生成する際に、処理時間を少しでも短くしたいのであれば、配列（もしくは動的配列）＋JOINを使うのも良さそう。

# 参考URL

* [【VBA入門】文字列の結合を高速にする方法(Mid、Join)](https://www.sejuku.net/blog/34347)
* [VBAの高速化（文字列の連結はJoinで行う）](https://vbabeginner.net/speed-up-vba-join/)
Userテーブルからの外部キーを複数取得する方法

# はじめに
ユーザー（reviewer）がユーザー（reviewee）をレビューする機能を実装するために行った、usersテーブルから２つの外部キーを取得する方法について記述したいと思います。

# 外部キーを複数取得

通常、外部キーを取得する際は

```:マイグレーションファイル
t.references :user, foreign_key: true
```

上記のようにすることで、参照先（usersテーブル）をもとにテーブル内に user_id というカラムが作成されます。
railsのデフォルトでは、外部キーを表す命名規則が${model名}_idと決まっているため、同じmodelを参照する外部キーがそのままでは設定できない。

今回の場合は、同じテーブル内に複数の外部キーを取得したいので

```:マイグレーションファイル
class CreateReviews < ActiveRecord::Migration[6.0]
  def change
    create_table :reviews do |t|
      t.integer    :score,    null: false
      t.text       :content
      t.references :reviewer, foreign_key: {to_table: :users}
      t.references :reviewee, foreign_key: {to_table: :users}
      t.timestamps
    end
  end
end
```

ポイントは {to_table: :users} の箇所で、
references 型カラムを定義している部分でオプション :foreign_key にサブオプション :to_table を参照先テーブル名とともに指定することで、正しく参照先テーブルを参照し、テーブル（reviewsテーブル）が作成することができます。

# アソシエーション
modelの belongs_to/has_many で foreign_key を明示的に指定する。

```:user.rb
class User < ApplicationRecord

　（省略）

  has_many :reviewer_reviews, class_name: 'Review', :foreign_key => 'reviewer_id'
  has_many :reviewee_reviews, class_name: 'Review', :foreign_key => 'reviewee_id'
  
  (省略)

end

```

```:review.rb
class Review < ApplicationRecord
  belongs_to :reviewer, :class_name => 'User', :foreign_key => 'reviewer_id'
  belongs_to :reviewee, :class_name => 'User', :foreign_key => 'reviewee_id'
end
```



```:例
has_many :reviewer_reviews, class_name: 'Review', :foreign_key => 'reviewer_id'
```
Reviewテーブル(class_name: 'Review')の
reviewer_id(:foreign_key => 'reviewer_id'）を
reviewer_reviews(has_many :reviewer_reviews)として取得できる。

# 参考
https://qiita.com/kymmt90/items/03cb9366ff87db69f539
https://qiita.com/takeoverjp/items/bb56d6a8eae191cd3732
【Rails】adminページのアクセス制限方法


こんにちは、たにーです。

今回もadminについてです。

**admin専用のページには、adminだけが見れるのが当たり前だと思います。
ただ、チーム開発で他のチームでアクセス制限が出来ていないのが見られました。**

今回は、その設定方法をまとめます。
他にも方法があると思いますが、チームメンバーで考えた結果これぐらいかなと思ってます。

他にあれば教えてください。

#adminページのアクセス制限

下記は、現在のルートです。
adminでitemのindex~showまであるとします。

```rb:terminal
             Prefix Verb       URI   Pattern                 Controller#Action
        admin_items GET    /admin/items(.:format)            admin/items#index
                    POST   /admin/items(.:format)            admin/items#create
     new_admin_item GET    /admin/items/new(.:format)        admin/items#new
    edit_admin_item GET    /admin/items/:id/edit(.:format)   admin/items#edit
         admin_item GET    /admin/items/:id(.:format)        admin/items#show
```

もし、アクセル制限を行わないと、
管理者でない通常のお客さんでも商品登録が出来ちゃいます。(笑)

##方法①

adminがもつコントローラーにそれぞれ記述する。

```rb:items_controller.rb
 before_action :authenticate_admin!
```
autehntiateは、「認証する」という意味です。

つまりこの記述は、

**「このコントローラー(items_controller)に記述してあるアクションは、adminだけが使用できるよ。
　だから、アクションを実行する前に、adminであるか確認してね。」**　

を意味します。

adminじゃなければ、ログイン画面に遷移されます。

##方法②

apllicationコントローラーで纏めてアクセス制限を行う方法。

```rb:application_controller.rb

class ApplicationController < ActionController::Base
  before_action :authenticate_admin!, if: :admin_url 
  
  def admin_url
    request.fullpath.include?("/admin")
  end
 
end
```

分解して解説します。

###before_aciton
```rb:application_controller.rb
  before_action :authenticate_admin!, if: :admin_url
```
=> ①で説明しているのでベースは省きます。
　　ifの部分ですが、「admin_urlを参照する」を意味します。
　　
　　この後に、「admin_url」のメソッドが記述します。

###admin_url

```rb:application_controller.rb  
  def admin_url
    request.fullpath.include?("/admin")
  end
```
=> request.fullpathで、飛んだ先のpathを全て取得します。
　　include?(val)で、valと同じ要素が含まれていれば、trueを返します。
　　
　　つまり、**パスに「/admin」が含まれているかどうかを確認する。**です。

となります。

なので、 まとめると、

**「pathに/adminが含まれている全てのページは、adminでログインしないと見れないよ。」**

となります。


以上、たにーでした。

#参考文献

https://techacademy.jp/magazine/7464

https://railsguides.jp/action_controller_overview.html

http://l-light-note.hatenablog.com/entry/2018/04/26/140301

https://docs.ruby-lang.org/ja/latest/method/Array/i/include=3f.html
【Firebase】Firebase Cloud Firestoreとは

# Cloud Firestoreとは

## 公式より
>Google の柔軟でスケーラブルな NoSQL クラウド データベースを使用して、クライアント側開発とサーバー側開発のデータを保存、同期する

→Firebaseが提供しているNoSQLベースのデータベース

## Firebaseが提供している2つのデータベース

### Cloud Firestore（新しい）

- RealTime Databaseの高機能版

### RealTime Database（古い）

- 元々Firebase提供していたデータベース

公式でも、基本的にはCloud Firestoreを勧められている

## 2種類の概念

![スクリーンショット 2021-03-29 22.28.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979873/ca6fd6cb-c1db-3e33-0f07-81936f04be44.png)

### ドキュメント
- フォルダ > ドキュメント > dataの構造で格納される
- key:value型
- データに型指定できる
- ドキュメントの中にさらにドキュメント（サブコレクション）を作れる

### コレクション

- 複数のドキュメントを格納する
- コレクション毎に同じカテゴリのドキュメントを格納する

## 注意
### ドキュメント
- ドキュメントIDは重複してはいけない
- 同じカテゴリのドキュメントでも異なるコレクション（情報）を持てる
### コレクション
- 同じカテゴリのドキュメントを1つのコレクションに格納できる

![スクリーンショット 2021-03-29 22.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979873/e2d2ce5e-03a1-ad88-bda0-e41bc62cdfac.png)

- コレクションを分ける場合異なるコレクション名をつける

- サブコレクション
  - ドキュメントの中にコレクションを作成する

![スクリーンショット 2021-03-29 22.27.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979873/edeb66b8-6a0a-c0b5-1768-6878521845e7.png)

次回はCloud Firestore実践！！
konva.js で地図を描く (2) 

[前回]()の続き
次はkonvaのいろんな図形を使って、簡易的な地図を描いていきます

# グループの生成
画像や図形たちをグループ化します

```js:sample.js
var group = new Konva.Group({
    x: 10,
    y: 10
});
```
作った要素をこのグループに追加していく

# 軌跡の描画
line のオブジェクトを使って描画
lineは[x0, y0, x1, y1, x2, y2 .....] という座標を指定して、そのポイントを結ぶ線を描きます

convasの座標は
左上が(0,0)右下が(200, 200) (例:canvasのサイズが200pxの時)
なので、左上を始点にして

* x(正の方向)→ 右側にlineが描かれる (負の時は逆)
* y(正の方向)→ 下側にlineが描かれる (負の時は逆)

lineを描く例
今回は各lineのポイントごとにクリックイベントなど拾えるように、各区間ごとに線を描いていきます

```js:sample.js
// [x,y]の座標が詰まった配列
var table = [[3,10],[5,20],[10,50],[30,60],[50,80],[80,100],[100,100],[110,120],[120,150],[150,170]];
   
for (let i = 1; i < table.length; i++) {
	var prevX = table[i-1][0];
	var prevY = table[i-1][1];
	var currentX = table[i][0];
	var currentY = table[i][1];
	console.log(i, px, py, cx, cy);

	var line = new Konva.Line({
	    points: [prevX, prevY, currentX, currentY],
	    stroke: '#696969',
	    strokeWidth: 3,
	    lineCap: 'round',
	    lineJoin: 'round',
	    id: `line_${i}`  //lineごとにidをふれる
	})
	line.on('mouseup', (e) => {
	    console.log(e.currentTarget.attrs.id); //クリックした時にid取得できる
	});
	    group.add(line);
	}
```

# スタート地点とゴール地点を用意

今回はスタート地点を○、ゴール地点を☆で生成

```js:sample.js
let start = new Konva.Circle({
    x: table[0][0], //配置場所
    y: table[0][1], //配置場所
    radius: 10,
    fill: 'red',
    stroke: 'black'
});
group.add(start) //作った要素はgroupに追加


let goal = new Konva.Star({
    x: table[table.length-1][0], //配置場所
    y: table[table.length-1][1], //配置場所
    numPoints: 5,
    innerRadius: 7,
    outerRadius: 15,
    fill: 'yellow',
    stroke: 'black'
});
group.add(goal) //作った要素はgroupに追加

```

# 最後描画する

```js:sample.js
  layer.add(group); // 最後groupをlayerにaddする
  stage.add(layer); // layerをstageにaddする
  layer.draw();     // 描画

```

# 結果
こんな感じのmapができる
さらにアニメーションをつけたり、各要素にクリックイベントつけたりなど、簡単にできるので便利でした！
![map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76550/60edbe29-ae0f-3d1e-8eb3-39080a1f6c33.png)


# 注意点
groupにaddする時は、addする順番で描画されるため、順番が重要(後から追加されたものが上にくる)
layerを分けて、[zIndex](https://konvajs.org/docs/groups_and_layers/zIndex.html)を設定することで上にくる要素を変更できる
konva.js で地図を描く (1)

#konva.jsとは
* [konva.js](https://konvajs.org/)
  * デスクトップやモバイルアプリケーション向けの2Dキャンバスライブラリ
  * 図形や画像を描画したり、アニメーションしたり、イベントリスナーをつけたりなどが簡単にできる

今回はこのkonva.jsを使って簡易的な地図を描いた内容をまとめます

#html側
```html:samle.html
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="canvas-container"></div>
  </body>
</html>

```
html側はdivを用意するだけ

# ライブラリ読み込み

スクリプトタグに以下埋め込み
``<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>``

or 

``npm install konva``

or

[公式サイト](https://konvajs.org/)からダウンロード

* [konva@7.0.3](https://unpkg.com/konva@7.0.3/konva.js)
* [konva@7.0.3(min)](https://unpkg.com/konva@7.0.3/konva.min.js)

# js側の実装
### konva.jsの構造

[公式サイト](https://konvajs.org/)より引用

```
              Stage  <--- (1)divのidを取得してstageを用意
                |
         +------+------+
         |             |
       Layer         Layer  <--- (2)layerを用意
         |             |
   +-----+-----+     Shape  <--- (3)要素を用意。複数ある場合はグループ化できる
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape
```

```js:sample.js

// (1) divのidを取得してstageを用意
const stage = new Konva.Stage({
  container: 'canvas-container', //親要素のdivタグのidを指定
  width: 200, //キャンバスの横幅
  height: 200 //キャンバスの高さ
});

// (2)layerを用意
const layer = new Konva.Layer();

// (3)要素を用意。まずはマップの枠(四角)を用意
const box = new Konva.Rect({
  x: 0, //配置場所
  y: 0, //配置場所
  width: 200, //横幅
  height: 200, //高さ
  fill: "#ffffff", //塗り潰しの色
  stroke: "#000", //枠線の色
  strokeWidth: 1, //枠線の太さ
  opacity: 1, //透過率
  cornerRadius: [3, 3, 3, 3] //四角の角を丸める
});

layer.add(box); //作った四角をlayerにadd
stage.add(layer); //layerをstageにadd (階層の上に順番に追加していく)

layer.draw(); //これで描画


```

# 結果
まずこれで四角がcanvasに描かれる
(内部的にはこんな感じでdivの中にcanvasが生成されている)

```result.html
<div id="canvas-container">
  <div class="konvajs-content" role="presentation" style="position: relative; user-select: none; width: 200px; height: 200px;">
  <canvas width="400" height="400" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; display: block;">
  </canvas>
  </div>
</div>
```
Jest mockClear(), mockReset(), mockRestore() の違い

Jest の `mockClear()`, `mockReset()`, `mockRestore()` の違いが分かりづらいのでまとめておく。
また `jest.clearAllMocks()`, `jest.resetAllMocks()`, `jest.restoreAllMocks()` もすべてのモックが対象になるだけで挙動としては同じ。


## `mockClear()`

`mockFn.mock.calls`, `mockFn.mock.instances` を初期化する。

```ts
const now = () => Date.now();

describe('mock example', () => {
  const mockedDateNow = jest.spyOn(Date, 'now').mockReturnValue(0);

  it('mockClear', () => {
    now();
    mockedDateNow.mockClear();
    // calls, instances はすべて初期化されている
    expect(mockedDateNow.mock.calls.length).toBe(0);
    expect(mockedDateNow.mock.instances.length).toBe(0);
    // mockReturnValue の設定は初期化されていない
    expect(now()).toBe(0);
  });
});
```


## `mockReset()`

`mockFn.mock`, `mockFn.mock.calls`, `mockFn.mock.instances` を初期化する。
また `mockImplementation`, `mockReturnValue` 等で設定した実装、戻り値もすべてリセットされる。

```ts
const now = () => Date.now();

describe('mock example', () => {
  const mockedDateNow = jest.spyOn(Date, 'now').mockReturnValue(0);

  it('mockReset', () => {
    now();
    mockedDateNow.mockReset();
    // calls, instances はすべて初期化されている
    expect(mockedDateNow.mock.calls.length).toBe(0);
    expect(mockedDateNow.mock.instances.length).toBe(0);
    // mockReturnValue の設定も初期化されている
    expect(now()).not.toBe(0);
  });
});
```

## `mockRestore()`

`jest.spyOn` によって作成されたモックをオリジナルのものへ戻す。

```ts
const now = () => Date.now();

describe('mock example', () => {
  const mockedDateNow = jest.spyOn(Date, 'now').mockReturnValue(0);

  it('mockRestore', () => {
    now();
    mockedDateNow.mockRestore();
    // mockRestore（） により Date.now がモックでなくなっている
    expect((Date.now as any).mock).toBe(undefined);
  });
});
```
初めてのPython学習-基礎③-

#繰り返し処理
for文以外にも**while文**
while「ある条件に当てはまる間、処理を繰り返す」


**while 条件式:**


```py
例
x = 1

while x <= 100:
    print(x)
    x += 1
```

```
①条件式で使う変数xを1と定義
②xが100以下のとき以下の処理を繰り返す
③xを出力する
④xに1を足す（繰り返しのたびに1ずつ増えていく）

※while文では処理の最後に必ず変数の値を更新する
※変数の値を更新する記載は必ずwhile文の中（インデント）
　→無限ループ
```

繰り返し処理の終了
**break**

```py
numbers = [1,2,3,4,5,6]
for number in numbers:
    print(number)
    if number == 3:
        break
```

その周の処理だけをスキップ
**continue**

```py
numbers = [1,2,3,4,5,6]
for number in numbers:
    if number % 2 == 0:
        continue
    print(number)
```