OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】関数とオブジェクト⑥　call,applyとthis


#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/22697dbd8fcf0a65bc02

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.前回のおさらい

**bind**
"this"や引数の参照先を変更。
使用時点では実行しない。

**call,apply**
"this"や引数の参照先を変更。
同時に関数を実行する。

````javascript
// aという関数を定義
function a(){
    // 関数の中でthisが7行目でbindされている
    console.log("hello " + this.name);
}
const b = a.bind({name: "キルア"});
// hello キルアと出力
b();
``````

###callとapply

####例1

bindとcall、applyの比較

````javascript
function a(){
    console.log("hello " + this.name);
}
// bindの中身のオブジェクトを変数killに格納
const kill = {name: "キルア"};

// bindの場合はb();がないと実行されなかった
const b = a.bind(kill);
b();
// applyの場合は第一引数に変数をいれれば実行までしてくれる
a.apply(kill);
// callの場合も同様
a.call(kill);
``````

####例2

callとapplyの比較

#####callの場合

callでは第２引数以下に**関数の引数**を定義することができる

````javascript
function a(name){
    // thisを削除して関数の引数にnameを定義
    console.log("hello " + name);
}
const kill = {name: "キルア"};
// 第２引数に「キルア」と入れると「hello キルア」と実行される
a.call(kill, "キルア");
`````

#####applyの場合

applyでは第２引数以下に**配列**を定義できる

```javascript
// nameの他に,name1を定義
function a(name,name1){
    console.log("hello " + name + ", " + name1);
}
const kill = {name: "キルア"};

// 配列の場合[]に入れ,name1がアルカにあたる
// 配列が展開されてそれぞれaの引数に渡っていく
a.apply(kill, ["キルア", "アルカ"]);
``````

####例3

より実践的なapplyの利用方法

````javascript
// 配列を定義
// １番大きい数字を取り出したい
const array = [1,2,3,4,5];
// Mathオブジェクトのメソッドmaxを使うとコンソールで2と出力される
Math.max(1,2)
// 数が多く展開するのが面倒な時applyを使う
// 第一引数にthisは必要ないのでnullにしておく
// 第二引数は配列を定義し、それを変数に代入
const result = Math.max.apply(null, array);
// ５と出力される
console.log(result);
``````

````javascript
// ES６以降では基本的には下記のように使う
// ...を３つ書くとMathの引数を１つずつ展開するという操作が行われる(apply消す)
const result = Math.max(...array);
console.log(result);
``````

Mathについて

> 組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Mathオブジェクトは、組み込み関数の1つで、数値計算を扱う際に使います。


https://techacademy.jp/magazine/5595


今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
* [JavaScriptでMathオブジェクトを使う方法【初心者向け】](https://techacademy.jp/magazine/5595)
User agent とは

## 勉強前イメージ

ブラウザとかログに書いてあるやつ？

## 調査

### User agent とは

基本的にはwebブラウザ等のwebクライアントを指すことが多く、
httpのログではアプリケーション、OSやリクエストしているユーザーエージェントのバージョン等を識別できるようにする文字列になります。
httpのクライアントは自分の属性に応じたUser agentの字列をヘッダフィールドにセットして送信するのが上記の文字列になります。

User agentを見ることで、
どのOSからアクセスされてるのか、どのブラウザからアクセスされているのか など見ることができます。

例えば、以下の様なアクセスログが見れてたとすると

- windows10
- firefox バージョン92.0

ようなことが見えます。
ブラウザによって記載は少し違いますが、構文はほぼ一緒です。

```
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0"
```

### 実際のアクセスログを見てみる

上記の書式(firefox)であれば、以下のような構文になります。
ただし、User agentは偽装できるので必ずしも正しいアクセスのUser agentということではないです。

```
"Mozilla/5.0 (<platform>, rv:<geckoversion>) Gecko/<geckotrail> Firefox/<firefoxversion>"
```

- platform

ブラウザが動作しているプラットフォーム(OSなど)、またはモバイル端末だったかを示しています。

- geckoversion

Gecko のリリースバージョンです。

- geckotrail

ブラウザーが Gecko を基にしていることを示します

- firefoxversion

firefoxのバージョンを示しています。

## 勉強後イメージ

今までアクセスログ見てもそんな気にしたことなかったけど、構文があるのね。
しかもmozillaのサイトに書いてあるから、それごとに仕分けすると大体は見えると思う

## 参考

- [User-Agent](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/User-Agent)
- [ユーザーエージェント とは 意味/解説/説明 【User Agent, UA】](https://webtan.impress.co.jp/g/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88)
Microsoft Excelの最終列を画面いっぱい表示する

# Microsoft Excelの最終列を画面いっぱい表示する

 Microsft Excelで表を作るとたまに、
「左の方の列は定型的なデータを表示する項目なので幅が決まるのだけれども、
一番右はその説明とかで、長い文章が入ったりするなあ」
という事があると思います。
「できればスクロールせずに全体が読めるようにしたいのだけれども」
というとき、その列を画面の一番右の端まで広げて表示し、
かつ、折返しもつけましょう、というルーチンです。
アクティブシートに対して作用します。

ratio - 罫線幅 * フリー列序数

最初の

```
Const 行幅 = "7.58,9.33,11.25,4.08,21,14,14"
```
は、各列に設定する幅を一番左の列からカンマ区切りで入れてってください。

```

   Columns(フリー列序数).ColumnWidth = (Application.Width - 合計Width + 補正値) / ratio - 罫線幅 * フリー列序数

```
の ” - 罫線幅 * フリー列序数” 部分は罫線とスクロールバーの占める幅を控除したつもりですが、ピッタリいきません。Microsoft Excelがアプリケーションとして占める幅は取得できたのですが、このへんの微調整のうまいやり方、知っている人がいれば教えて下さい。

```
Sub 最終列を目一杯広く表示する()

'A列から右へ、幅が決まっている列の列幅をCSVで指定
Const 行幅 = "7.58,9.33,11.25,4.08,21,14,14"
Dim arr_行幅 As Variant
    arr_行幅 = Split(行幅, ",")

'データを表示できない部分の画面幅
'実はよく分かってなくて適当です。(^^;
Const 補正値 = 20
Const 罫線幅 = 1

Dim フリー列序数 As Long
Dim ratio As Single
Dim 合計Width As Single

Dim n As Long, m As Long
Dim 控除数 As Long

    '目一杯広く表示したい列の序数は、Const行幅で指定した次の列
    フリー列序数 = UBound(arr_行幅) + 2
    
    '幅が決まっている列の専有する列幅を足してゆきます。
    合計Width = 0
    For n = 1 To UBound(arr_行幅) + 1
        Columns(n).ColumnWidth = arr_行幅(n - 1)
        合計Width = 合計Width + Columns(n).EntireColumn.Width
    Next n
    
    'ピクセルと文字数の換算レート
    'Microsoft Excelの画面幅はピクセルでしか出ないみたいなので
    'セル幅指定に普通用いる（単位のない）数字との割合をここで得る。
    ratio = Columns(1).Width / Columns(1).ColumnWidth

    'Microsoft Excel全体の画面幅から幅を定めたセル全体とデータを表示できない部分を減じて
    '最後のセルの幅に指定する。（マイナスになったら知らん。）
    Columns(フリー列序数).ColumnWidth = (Application.Width - 合計Width + 補正値) / ratio - 罫線幅 * フリー列序数
    
    '最後のセルの中身が全部表示できない場合は折り返して表示する。
    Range("1:" & Cells(Rows.Count, 1).End(xlUp).Row).WrapText = True
    Range("1:" & Cells(Rows.Count, 1).End(xlUp).Row).Rows.AutoFit
    
    'おまけで罫線引いてます。
    ActiveSheet.UsedRange.Borders.LineStyle = True
    ActiveSheet.UsedRange.Borders(xlInsideHorizontal).Weight = xlHairline
    
    '一番上の行は見出しと見て二重線で区切る。
    Range(Cells(1, 1), Cells(1, フリー列序数)).Borders(xlEdgeBottom).LineStyle = xlDouble

    '蛇足かも、１行目にフィルタ
    If ActiveSheet.AutoFilterMode = False Then
        Range("A1").AutoFilter
    End If

End Sub
```
nuxt/authのデモを動かす

#手順

以下にあるデモをローカルで動かすため手順を示します。
https://github.com/nuxt-community/auth-module.git

**ソースコード**を**Github**からダウンロードします。

```
git clone https://github.com/nuxt-community/auth-module.git
cd auth-module
```

``` package.json ```を開き、```ts-loader```のバージョンを```^9.2.2 => 8.2.0```に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2087075/c584b748-ce87-a6c4-1852-55ff7fda22c1.png)

次のコマンドを実行します。

```
npm install
npm run dev
```

``` http://localhost:3000 ``` を**ブラウザ**で開き、**デモページ**が動作していることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2087075/3093e5db-247d-c573-efb1-14a03393a2f7.png)


#ts-loaderのバージョンを変更しなかった場合
``` npm run dev ```を実行したとき、``` loaderContext.getOptions ```がないよ、と怒られます。怒らないで～。

```
ERROR  Failed to compile with 1 errors                                 friendly-errors 08:02:57  
ERROR  in ./demo/pages/oauth2mockLogin.vue?vue&type=script&lang=ts&    friendly-errors 08:02:57  
Module build failed (from ./node_modules/ts-loader/index.js):           friendly-errors 08:02:57  
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (C:\workspace\01_Project\07_authnuxtsample\auth-module-test\auth-module\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (C:\workspace\01_Project\07_authnuxtsample\auth-module-test\auth-module\node_modules\ts-loader\dist\index.js:14:21)
```
サンドボックスとは

サンドボックスとは
---
SwiftでIphoneアプリの記事を読んでいるとたまに出てくるサンドボックスを調べました。
セキリュティを高めるものという認識がある人は多いと思います。

すごそうなセキリュティ構造
--
子供が遊べるほど安全という意味でサンドボックスというらしいです。
なんかウイルス対策の一つのようですね。
サンドボックスではみたことないプログラムを動かすための空間が用意してある。
そこの空間内で「こいつがどういう動きをするかみてやる！！」という感じでプログラムを動かしてみて、
「なんか、このプログラム攻撃してくるやつだ！！」となり判断できる
そのためアプリ内で保存されたデータはサンドボックス上で保存されることにより内部（デバイス上）とは分離できる。

と思ったけど全然無敵ではない
---
サンドボックス無敵じゃん！！と思ったのですが、、
実際は仕組みとしてそれほど新しいものではなく、サンドボックスで動かされていることを検知して「僕は普通のプログラムだよ（嘘だけどね！！）」
みたいにサンドボックス内で挙動できるウィルスもたくさんあるらしいので無敵ではない。

以上となります。
FlowDocumentをRTFに変換する

# FlowDocumentをRTFに変換する

以下の記事に関連する記事です。

https://qiita.com/ikutana/items/6a699bd791c73e8ea2c4

上記の記事では、WPFの`RichTextBox`に`FlowDocument`を作って表示するなんてことをしたのですが、保存機能も欲しいですよね。
追加のコーディングを節約しつつファイルを保存できる機能を実装してしまいましょう。

# 最初にやった方法(System.Windows.Forms.RichTextBox)

実は、最初にやったのは、`System.Windows.Forms.RichTextBox`を使った方法です。そう、WPFのはずなのに、なぜかWindowsFormsの`RichTextBox`です。
WPFの`RichTextBox`との間のデータ転送は`Clipboard`を使います。
全選択→コピー→ペースト
って感じです。(ここでは、本題ではないのでソースは記述しません)
`System.Windows.Forms.RichTextBox`は`System.Windows.Forms.RichTextBox.SaveFile`というメソッドを持っており、RTFとして保存できます。

https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.forms.richtextbox.savefile?view=windowsdesktop-5.0#System_Windows_Forms_RichTextBox_SaveFile_System_String_

**クソダサい**というのが最大の欠点です。

# もっといい解決方法（System.Windows.Document.TextRange)

`System.Windows.Document.TextRange`というクラスがあります。これのコンストラクタは、`System.Windows.Documents.TextPointer`を二つとります。
二つの`TextPointer`間のテキストを取得して、クラスにするって感じですかね。
一方で、`System.Windows.Documents.FlowDocument`は、`ContentStart`, `ContentEnd`の二つのプロパティがあり、それぞれ、`FlowDocument`インスタンスの先頭と末尾の`TextPointer`を返します。つまり

``` cs
var theFlowDocumentTextRange = new System.Windows.Documents.TextPointer(theFlowDocument.ContentStart, theFlowDocument.ContentEnd);
```
で、`FlowDocument`のオブジェクトのリッチテキストを`System.Windows.Documents.TextPointer`クラスのインスタンスとして取得できるわけです。
そして、`System.Windows.Documents.TextRange`クラスには、`Save()`というメソッドがあります。なお、`Save()`メソッドの引数は`System.IO.Stream`と`String`です。

``` cs
var theStream = File.OpenWrite(theFileName);
theFlowDocumentTextRange.Save(theStream, System.Windows.DataFormats.Rtf);
theStream.Close();
```
という形でRTFファイルに保存することができます。
なお、`System.Windows.Documents.TextPointer.Save()`メソッドの第2パラメータには、`System.Windows.DataFormats.Rtf`の他に、`System.Windows.DataFormats.Text`、`System.Windows.DataFormats.Xaml`、`System.Windows.DataFormats.XamlPackage`の3種類が指定できます。
violinプロットで可視化したデータの読み方

# 記事を書いたきっかけ
データ分析のインターン業務中に、violinプロットを用いて可視化したデータを説明する機会がありました。

その時に、「あれ、ここって平均値だっけ？中央値だっけ？」とわからなくなったのが怖くなり、調べたのがきっかけです。

violinプロットに関しては、日本語での検索結果は実装方法ばかりで具体的にどう読むのかを書いた記事が現状少ないように思えました。

この辺英語で調べたら一発だったので、翻訳も交えて自分のためにまとめようと思います。

![スクリーンショット 2021-10-20 10.54.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/845778/3774822d-f655-8c24-7b27-ef31b4e60f7a.png)

# 概要
データの可視化で非常にお世話になるヴァイオリンプロットについて詳しくなります。

# 実装
ヴァイオリンプロット??ってなっている人のために、秒で動くipynbファイルを用意しました。
よかったら飛んで見てみてください。

https://colab.research.google.com/drive/1ENfYI0sqOfC5N0d4LpqXnpIOrDX69j33?usp=sharing


サンプルコードは下記二つのURLから持ってきたものです。

https://matplotlib.org/stable/gallery/statistics/customized_violin.html

https://stats.biopapyrus.jp/python/violinplot.html

# 基本的な読み方
![スクリーンショット 2021-10-20 10.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/845778/9444faf7-5b49-adb9-a661-22e3465b1c18.png)

上から順に読んでみると、

- Outside Points ： 分布の外部
- Upper Adjacent Value : 分布の最上位(外れ値は除く)
- Third Quartile : 第3四分位数
- Median : 中央値
- First Quartile : 第1四分位数
- Lower Adjacent Value : 分布の最下位(外れ値は除く)

こんな感じです。真ん中の浮遊系モンスターの格みたいな白い部分が中央値で、元々は箱ひげ図がベースになっていることがわかります。

横にふわふわ広がっているのはカーネル密度推定といいます。
カーネル密度推定の説明は省略させていただきますが、大雑把にデータの分布のしやすさと認識すればいいのではないでしょうか？（統計に強いお方、ご意見あればコメントいただけると幸いです。）

ヴァイオリンプロットの読み方は一旦ここまで。

# 実際の読み取り
可視化して終わり！
では分析の価値は生まれません。

なので、上記で紹介したcolabの、可視化したデータを少し読み取っていきます。

![スクリーンショット 2021-10-21 6.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/845778/25f74805-0096-960c-dcb1-93fc893adda0.png)

このヴァイオリンプロットはまず、

- A.tauschii
- T.aestivum

の2グループに分かれています。この2つを比較したいのでしょう。
ここではAとBのグループということにします。

パラメータとしては、leaf, stem tissue, rootがあります。
縦軸にはdry weightを取っているので、3つのパラメータごとにdry weightがどう分布しているかを言語化していこうと思います。

全体感としては

- dry weight[g]はstem tissue, leaf, rootで大きい順に並びそう
- AよりもBの方がデータにまとまりがありそう
- stem tissueのみBがより重い傾向にありそう

次にパラメータごとに見ていくと、

1. leaf
    - dry weightの中央値の違いは1g以下だが、Aの方がより重い重さを示すデータが多く含まれている
    - Bに安定して10~11あたりの重さを示す傾向がありそう
    - Bの7.5gあたりが若干膨らんでいることから、最小値を示すデータが複数あったことがわかる
1. stem tissue
    - Aのデータにはばらつきが目立つ
    - Bの最小値がAの中央値とほぼ同値と、違いが際立っている 
1. root
    - Aの中央値がBの最大値であり、違いが際立つ
    - Bは比較材料の中で分布が最も狭い


こんな感じで可視化したデータを言語化していきます。


データ分析とはいっても、基本的にやることは仮説検証です。
なので仮説がないことには結論が出せないのですが、ここでは、適当に

仮説：AとBの違いによって、ある植物の部位の乾燥重量は変わるのだろうか？
結論：変わる。なぜなら、乾燥重量(dry weight)はBグループのstem tissueのみが重い傾向にあり、leaf, rootはAグループの方が重いという特徴が見られるから。

とでもしておきましょう。

以上です！
ご精読ありがとうございました！
Google Chromeでないと通過できないチャレンジ


# Permission Sets in Group in the Permission Set Groups Challenge

An internal server error has occurred 
MacのSafariではNGだったようです

[Hi, I am getting an error when under Permission Sets, I click Permission Sets in Group in the Permission Set Groups Challenge.](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000BsxYf)


# Define Sharing Rules" challenge.

["save" button not responding](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000DcwCqSAJ)

It worked when I switched to Chrome. I was having the issue in Safari.

# トレイルヘッドでないですが...

[Unable to access the Call Centers page](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Btekp)

ファイルがダウンロードできない
[I have some users that have Mac computers. They cannot download attachments in Lightning but can in Classic](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000E9Rj7SAF)

# HTML email template error 'Your template contains active content, which can't be verified as safe'

[Having issue with Business Administration Specialist 1 - Step 5](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000E9Y26SAF)


# Projectオブジェクトの共有ルールを作成します

[Projectオブジェクトの共有ルールを作成します](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000EBEu7)


# Chromeでダメだった。

[Failed to initialize a component [Cannot convert undefined or null to object] Failing descriptor: {flexipageEditor:leftPanel}](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000G4zDW)
SpringBootのGradleでWebjarsを利用しBootstrapを使う方法

#はじめに
今回は、SpringBootのGradleプロジェクトでWebjarsを利用してBootstrapを使用する方法を書いていきます。

MavenでのWebjarsを用いてBootstrapのバージョン管理をする記事が多くあったので、Gradleを使用している人の参考になればいいかなと思います。

#build.gradle

```java
dependencies {
    implementation('org.webjars:jquery:3.5.1')
	implementation('org.webjars:bootstrap:4.5.3')
	implementation('org.webjars:webjars-locator:0.40')
}
```
`dependenciesタグ`に上記３つをimplementationしてあげるだけです。

あとは、Bootstrapを使いたいHTMLファイルで必要な記述をするだけです。

##html

```html
<head>
  <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
  <script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
  <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" defer></script>
</head>
```

これだけでBootstrapを使用することが可能になります。
webjarsを用いれば**webjarsにバージョン管理を一任**することができるのでコーディングのみに集中できます。

余談ではありますが、`scriptタグ`の`defer属性`を知らないという方は以下、参考にしてみてください。
> [スクリプト: async, defer](https://ja.javascript.info/script-async-defer)

##依存関係フォルダ
ちゃんとバージョン管理されているか・ダウンロードされているかは`プロジェクトと外部の依存関係`というフォルダを見るとわかります。

![izon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/879778/b483a30e-526b-36cc-834d-77e2d2072d02.png)

上記のようになっていたらwebjarsでの呼び出し・ダウンロード・バージョン管理がなされているとわかるかと思います。


#参考文献
>[後悔しないためのSpring Boot 入門書：Spring 解体新書（第2版）](https://www.amazon.co.jp/%E5%BE%8C%E6%82%94%E3%81%97%E3%81%AA%E3%81%84%E3%81%9F%E3%82%81%E3%81%AESpring-Boot-%E5%85%A5%E9%96%80%E6%9B%B8%EF%BC%9ASpring-%E8%A7%A3%E4%BD%93%E6%96%B0%E6%9B%B8%EF%BC%88%E7%AC%AC2%E7%89%88%EF%BC%89-Spring%E8%A7%A3%E4%BD%93%E6%96%B0%E6%9B%B8-ebook/dp/B08XPBPH9C/ref=pd_sbs_1/356-7220556-1936165?pd_rd_w=9AT5S&pf_rd_p=dd0e5738-5781-4e32-b73e-998b011dad01&pf_rd_r=6ACZVHEYMB5QAP58TVWV&pd_rd_r=3aa765d5-8850-4194-abf5-7fb765fe3e63&pd_rd_wg=uILAD&pd_rd_i=B08XPBPH9C&psc=1)
食の恨みは深いぞ。。。obnizで『コアラのマーチまもるくん』をつくってみた

#空前のコアラのマーチブーム到来
ぎょうぎょうしいタイトルから始まってしまいましたが（笑）
空前のコアラのマーチブームが私の中で起きています。
先日、疲れたから、コアラのマーチを食べよう♪と思ったら・・・
**コアラのマーチがない・・・！！！**
そうです。うちの旦那さんに勝手に食べられました。
**もう二度と、勝手に食べられてたまるか！！！**
食の恨みと、学んだobnizを組み合わせて、
私のコアラのマーチを守る戦いが始まりました。。。

#完成品（コアラのマーチまもるくん）
こうして、obniz×距離センサー×スピーカーを組み合わせて、
私の**『コアラのマーチまもるくん』**が誕生しました！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/c5a844e5-b373-904e-ae6d-3620bd833044.jpeg" width=30%>

コアラのマーチまもるくんの前に、コアラのマーチを置いて、
これが盗られてしまった（20cm以上離れた）際にブザーが鳴るという仕組みです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/9vgjaC_BfYk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


#準備したもの
* [obnize Board 1Y](https://obniz.com/ja/products/obnizboard)
* [スピーカー](https://obniz.com/ja/sdk/parts/Speaker/README.md)
* [超音波距離センサー](https://obniz.com/ja/sdk/parts/HC-SR04/README.md)
* コアラのマーチの空箱

# サンプルコード

実際に書いたコードはこちらです。

```js:distance-speaker
const Obniz = require('obniz');
const obniz = new Obniz('xxxx-xxxx'); // Obniz_IDに自分のIDを入れます

obniz.onconnect = async function () {
　　//超音波距離センサーを利用
    var hcsr04 = obniz.wired("HC-SR04", {gnd:8, echo:9, trigger:10, vcc:11});
　　//繰り返す
    setInterval(function(){
　　//距離を測る
    hcsr04.measure(function( distance ){
  console.log("distance " + distance + " mm")
　　//スピーカーを利用
  const speaker = obniz.wired('Speaker', { signal: 0, gnd: 1 });
　　//もし、距離が20cm以上であれば
  if (distance > 200) {
　　//音が鳴る
    speaker.play(1000);
　　//そうでなければ
  } else {
　　//音が鳴らない
    speaker.stop();
  }
})
//1秒ごとに
}, 1000);
}
```


##コードを書く際に頑張ったポイント
###1．繰り返し実行
公式サイトを見て、[ループを使う](https://obniz.com/ja/doc/guides/basics-of-html-and-javascript/how-to-loop)から、以下のコードを活用しました。

<details><summary>ループを使う</summary><div>

```js
setInterval(function(){
  // every second
}, 1000)
```
</div></details>

###2．Ifで分岐する
はじめてIfが使えて嬉しかったです。。。！！

<details><summary>Ifを使った部分</summary><div>

```js
　　//もし、距離が20cm以上であれば
  if (distance > 200) {
　　//音が鳴る
    speaker.play(1000);
　　//そうでなければ
  } else {
　　//音が鳴らない
    speaker.stop();
  }
```
</div></details>

#7秒の儚い命・・・
7回距離を測ると、` No More pwm Available.`とエラーが出てきて、
途中で止まってしまいます😢
こちらに質問を上げさせていただきました。
https://qiita.com/Izumi0711/questions/dbf333411b955403bbfd
ということで、7秒間だけ全力で『コアラのマーチまもるくん』に感謝しながらも、
もっと学んで『コアラのマーチずっとまもるくん』も作ってみたいと思います！
CI経由でデプロイしたときに変更が全く反映されなかったときの解決方法 error: Your local changes to the following files would be overwritten by merge:

CI経由で本番サーバーにデプロイしたところ、変更が全く反映されなかった。

CIのログを見てみると下のようなエラーが出ていた。

```
error: Your local changes to the following files would be overwritten by merge:
	app/express/yarn.lock
```

知らないうちに本番サーバー内のyarn.lockが書き換えられていて、本番サーバーで`git pull`するときにコンフリクトエラーを起こしたらしい。

そして

```
Step 3/6 : COPY ./express ./
 ---> Using cache
```

変更前のキャッシュをつかってデプロイしたらしい。

# 解決方法

1. 本番サーバーにSSH接続して知らないうちに書き換えられていた箇所を`git diff`で確認。

2. 知らないうちに書き換えられていた箇所を`git checkout .`で元に戻す。

3. 再デプロイするとコンフリクトエラーは起こらず`git pull`でき、変更箇所が正しく反映された。
システムの信頼性について(フォールトトレランス)

# はじめに
本記事では、システムの信頼性における考え方について記述します。
本日学習したものをまとめております。

# システムの信頼性設計
考え方には以下のようなものがあります。

## フォールトアボイダンス（故障排除技術）
構成部品の信頼性を高めて、故障が起きる確率を下げる技術です。
`故障を排除する`という考え方になります。

## フォールトトレランス（耐故障技術）
システムを構成する重要部品を多重化するなど、あらかじめ故障を想定しています。
`故障してもシステムを動かし続ける`という考え方になります。

フォールトトレランスには、他にも考え方が存在しています。

### フェールセーフ
システムの一部が故障した時は、
`システム全体に致命的影響を与えないよう`に、
あらかじめ定めた`安全な状態に移行する設計`のことになります。

`安全性を重視した`考え方になります。

以下のサイトに、このような例の記載がありました。
[フールプルーフ[foolproof]とフェイルセーフ[fail-safe]](https://www.i-learning.jp/topics/column/useful/foolproof.html)
> - 倒れると自動的にスイッチが切れる電気ストーブ
> - 停電の時は降りたままで止まる踏み切りの遮断機
> - 電車の運転手が操作しているデッドマンシステム

### フェールソフト
システムの一部が故障した時は、機能を低下させても、
`システムの運転を継続する設計`のことです。

`継続重視`の考え方になります。

[フェールソフトの意味とは？具体例で紹介！フェールセーフ・アポイダンスとの違いは？](https://aprico-media.com/posts/4144)
> - 飛行機のエンジンは片方のエンジンが完全停止しても飛行できる
> - エアコンのリモコン操作ができなくなっても、本体に電源のオンオフボタンがある


### フールプルーフ
不特定多数の人が操作しても、
`誤作動が起こりにくいようにする設計`のことです。

意図しない操作をした時は、`やり直しさせる`という考え方になります。

以下のサイトに、このような例の記載がありました。
[フールプルーフ[foolproof]とフェイルセーフ[fail-safe]](https://www.i-learning.jp/topics/column/useful/foolproof.html)
> - ふたが閉まっていないと脱水モードが動かない洗濯機
> - ドアが閉じていないと動かない電子レンジ
> - 人が便座に座っていないと水が出ないおしり洗浄機
> - ブレーキを踏んでいないとパーキングからドライブポジションに入らない車のギア（急発進は危険です）


以上です。
ワインのデータをスクレイピングする（vinica編）

僕は今まで自分が飲んだワインの情報をメモしています。
そして、一時期に週2くらいで飲んでいたときに、そのメモを取るのがめんどくさくなったので、一気にワインの情報を集められるようにスクリプトを作成しました。

そして、このスクリプトで取得したデータをGoogle Spreadsheetに貼り付けて、以下のように管理しています。

![20211020_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265324/d648d2ec-689c-38cf-a225-a135c04f7ec5.jpeg)

今回は、そのスクリプトを紹介します。

このスクリプトは開発者ツールで実行します。
以下になります。

## ソース
~~~javascript
// code by utf-8
 
// Use Developer Tool（by ⌥⌘I）
var length_of_taste = 'taste-bar taste-'.length;
var array = [`${[...document.querySelectorAll('span')][4].innerText}`, // ワイン名
             today.getFullYear() + "/" +  today.getMonth() + 1 + "/"+ today.getDate(), // 出会った日
             ``, // Instagramに上げた日
             ``, // 製造年
             `${[...document.querySelectorAll('td')][21].innerText}`, // 色
             ``,// 醸造方法
             ``,// 金額
             ``,// 入手場所
             ``,// 最寄り駅
             `${[...document.querySelectorAll('td')][18].innerText}`, // 原産地
             ``,// 原産国
             ``,// 感想
             ``,// ハッシュタグ
             `${[...document.querySelectorAll('td')][20].innerText}`, // 備考
             location.href, // 参考1
             ``,// 参考2
             ``,// Instagramに貼り付け
             ``,// vinicaフォルダに入れた
             `${[...document.querySelectorAll('div')][27].className}`.substr(length_of_taste,1), // ボリューム（軽い＜重い）
             `${[...document.querySelectorAll('div')][28].className}`.substr(length_of_taste,1), // タンニン（控えめ＜強い）
             `${[...document.querySelectorAll('div')][29].className}`.substr(length_of_taste,1), // 甘み（ドライ＜甘い）
             `${[...document.querySelectorAll('div')][30].className}`.substr(length_of_taste,1), // 酸味（まろやか＜シャープ）
             `${[...document.querySelectorAll('div')][31].className}`.substr(length_of_taste,1) // 果実味（スパイシー＜フルーティ）
            ];
var sep = "\t";
var data = ``;
array.forEach(function(value) {
    data += value;
    data += `${sep}`;
});
 
// This is it!
console.log(data);
~~~

以下、コードの解説ですが、
基本的にこの表記でどのタグの何番目のものを取得するかを指定します。
下の場合だと、4番目のspanから取得します。

~~~javascript
`${[...document.querySelectorAll('span')][4].innerText}`
~~~

この「`` `${～}` ``」の表記は、querySelectorやquerySelectorAllなどの関数を調べているときに偶然見つけました。調べた当初は、この書き方のメリットをほとんど理解しておらず、たまたま自分にしっくり来たので、この表記に落ち着いていましたが、最近少し理解が進んだので、それはまた今度書きます（笑）

そして、タブ文字（”\t”）を区切り文字として、配列arrayを文字列にします。

最後、consoleに出力しておしまい。
![20211020_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265324/82871de5-6fbd-c62a-0e1e-5154c9a0a4e9.jpeg)

原産国の部分とかは、「=IFERROR(LEFT(K2, FIND(">",K2)-2),K2)」とかやって、隣のセルから取ってきています。これで集計すると自分がどの国のワインを今まで飲んでいるかが分かるといった感じです。


今回のスクリプトの紹介はこんなもので終了です。
そして、このスクリプトを実行できない場合は、下に備忘録的なものを貼っておくので、見てみて下さい。


以上になります！


#### 開発者ツールの立ち上げ方
1. 取得したいサイトに行く。今回使ったワインのページは
[ここ](https://vinica.me/Dom-de-Nalys-Ch%C3%A2teauneuf-du-Pape-Rouge-w98)ですが、
別途取得したいワインがあれば、それをvinicaのサイト内で調べてそのワインのページに行く。
1. ブラウザ上で、Ctrl + Shift + C を押す。開発者ツールが立ち上がります。
1. ページ内の欲しい情報がある要素にマウスを合わせるとハイライトされるので、その状態でクリック。
1. 開発者ツール内のコンソールで、このスクリプトを実行。
javascript演習　6日目/３０日

覚えたこと

fetch()はpromise
push()にスプレッド構文

```javascript
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));
```

filterとmatch()
new RegExp()

```javascript
cities.filter(place => {
  const regex = new RegExp(word,'gi');
  return place.match(regex)
});
```
inputにchangeとkeyup

```javascript
searchInput.addEventListener('change' , displayMatches);
searchInput.addEventListener('keyup' , displayMatches);
```


replace()

```javascript
const regex = new RegExp(this.value, 'gi');
place.replace(regex,`<span class="hl">${this.value}</span>`)
```


map()に`${}`して、htmlを書き換える
join()

```javascript
const html = matchArray.map(place => {
    return `
    <li>
      <span class="name">${place.city},${place.state}</span>
      <span class="population">${place.population}</span>
    </li>
    `;
  }).join('')
  suggestions.innerHTML = html;
```

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考

https://www.sejuku.net/blog/24896

https://ja.javascript.info/regexp-introduction

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
[AtCoder][ABC107C] 直線上にある指定の座標間を効率よく移動する方法

## 問題
下図の全ての点を通るような最短経路を考える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102448/09bacb8e-b70f-9480-12b4-09cfd7345806.png)


## 最短経路

これは実はあなたがどの位置にいたとしても下記の２つの最小が最短経路となる。

- 左端に行ってから右端に行く
- 右端に行ってから左端に行く

## なぜそうなるか

あなたが今点0にいるとする。
右端の点7に行くと必ずその途中の点3, 4, 6を通ることになる。
左端の点-5に行くと必ず途中の点-1を通ることになる。
なので全ての点を通るということは、両端の点に移動することと同義となる。

## 練習問題

[ABC107 C - Candles](https://atcoder.jp/contests/abc107/tasks/arc101_a)
複数のキャンドルが直線上にならんでいる。
K個のキャンドルに移動したい場合の最短距離はなにか。

## 解説

K個のキャンドルに移動するための最短距離は連続したK個のキャンドルへの移動になる。
よって全てのキャンドルから連続したK個の距離を全て試せばよい

```cpp
int main() {
    int N, K; cin >> N >> K;
    vector<int> x(N);
    for (int i=0; i<N; i++) {
        cin >> x[i];
    }

    int ans = 1e9;
    for (int i=0; (i+K-1)<N; i++) {
        int left = x[i];
        int right = x[i+K-1];
        ans = min(ans, abs(left)+right-left);
        ans = min(ans, abs(right)+right-left);
    }

    cout << ans << endl;
}
```

## 関連問題

[ABC197 E - Traveler](https://atcoder.jp/contests/abc197/tasks/abc197_e)
WindowsでNUT clientを立ち上げて停電時に自動シャットダウンする

UPSを導入しようと思い立ってOMRONのBY35Sを購入したのだが、純正ソフトはLinuxはCentOSかRedHatしか対応しておらず自分の環境では使えなかった。そこでNUTを導入したが、いくつかpitfallがあったので備忘のために書いておく。この部分は恐らくBY50SでもAPCのUPSでも同じ。

### 目的：
・Ubuntu20.04
・Windows10 Pro
UbuntuをNUT Serverとした2台の同時シャットダウン

### 前提：
・Ubuntu側でのNUT ServerおよびNUT Clientの設定は終了していて、単体でのシャットダウンは実現できているものとする。

なおサードパーティ製GUIである[WinNUT](https://github.com/gawindx/WinNUT-Client)も試してみたがうまく行かず諦めた（これは自分が悪いのかもしれない）

# 概要
 - 公式サイトから[Windows用MSI](https://networkupstools.org/download.html#_binary_packages)をダウンロード
 - OpenSSL内のdll(LIBEYA32.dll, SSLEAY32.dll)をコピー
 - libgcc_s_dw2-1.dllのコピー
 - upsサーバーにアクセスできることを確認
 - clientの設定
 - **サービスのログオンアカウント設定** 
 - サーバーからクライアントをシャットダウンできるか確認
 - 実際にコンセントから抜いて確認


# 主に参考にしたページ
 - https://ameblo.jp/p630/entry-12333636345.html
 - https://forums.serverbuilds.net/t/guide-using-nut-to-power-down-multiple-systems/8383

# 公式サイトから[Windows用MSI](https://networkupstools.org/download.html#_binary_packages)をダウンロード
ここは特に問題なし。以下特記ない限りClient側（Windows上）での操作。

# OpenSSL内のdll(LIBEYA32.dll, SSLEAY32.dll)をコピー
その後、upsc.exeなどを起動しようとするとdllがないと怒られるので、32bit版のOpenSSLをダウンロードしてきて解凍し、`LIBEYA32.dll`, `SSLEAY32.dll`を``C:\Probram Files (x86)\NUT\bin\`と`C:\Probram Files (x86)\NUT\sbin\`にコピーしておく（前者だけでも良いかも）

参考質疑で紹介されていた`http://web.archive.org/web/20160826051001/http:/indy.fulgan.com/SSL/`から`openssl-1.0.2h-i386-win32.zip`を使った。
https://alioth-lists.debian.net/pipermail/nut-upsuser/2016-September/010295.html

# libgcc_s_dw2-1.dllのコピー
これは既知のバグらしい。`libgcc_s_dw2-1.dll`を`c:\Program Files (x86)\NUT\bin\`から`c:\Program 
Files (x86)\NUT\sbin\`にコピーする
https://alioth-lists.debian.net/pipermail/nut-upsuser/2015-September/009880.html

# upsサーバーにアクセスできることを確認
コマンドプロンプトで以下（Powershellだとうまく行かなかった）。
`"C:\Program Files(x86)\NUT\bin\upsc.exe" [ups name]@[server ip]:[port]`

電圧のやドライバの情報が20行くらい出てきたらok。

# clientの設定
NUT Client Configuration>Ubuntu or Windows Official Clientに沿って、nut.confとupsmon.confの設定を行う。
といっても、`C:\Program Files (x86)\NUT\etc`内にある`nut.conf`に

```
MODE=netclient
```
を追記し、

`upsmon.conf`に

```
MONITOR <ups_name>@<NUT_server_IP> 1 <slave_username> <slave_password> slave
```

と、

```
SHUTDOWNCMD "C:\\WINDOWS\\system32\\shutdown.exe -s -t 0"
```

を追記するのみ。

https://forums.serverbuilds.net/t/guide-using-nut-to-power-down-multiple-systems/8383

# サービスのログオンアカウント設定
コンピュータの管理から、`Network UPS Tools`というサービスを確認。**こちらのログオンアカウントをローカルシステムアカウントから管理者権限のあるアカウントに変更しておく。**（これを変更しないとシャットダウンされない。イベントビューワーでアプリケーションログを確認しても特にエラーが出ている様子もなく、時間を溶かしてしまった。分かってしまえば当たり前の話だった…）

# サーバーからクライアントをシャットダウンできるか確認
サーバー、クライアント共にシャットダウンして良いことを確認してから、

```bash
sudo upsmon -c fsd
```
とすると、サーバーからの強制シャットダウンコマンドが各NUT clientに送られ、そこで先ほどupsmon.confに設定したSHUTDOWNCMDが走る。シャットダウンされればok。

もしシャットダウンされなければ、SHUTDOWNCMDの中身("C:\\WINDOWS\\system32\\shutdown.exe -s -t 0")でシャットダウンされることを確認する。

コマンドではシャットダウンされるのに、upsmon経由ではシャットダウンされないときはサービスのログオンアカウントの確認を。

# 実際にコンセントから抜いて確認
ここまで完了していれば、実際にコンセントから抜いた際にWindowsもシャットダウンされるはず。お疲れさまでした。
mysqld --consoleが通らないと思ったらすでにサービスが実行中だっただけの話

備忘録として残します。

先日、MySQLを所用で使うことになったので、既にインストールしてあったバージョン8.0.25を起動しようと試みた。
すると、こんなエラーが出た。
![capture.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576615/3b41cdba-539c-0a49-53db-debc42229a36.png)

某先輩が一瞥して「サービスが動いてるのが原因かもしれないねぇ」と言った。

なんとなく勘でここが怪しそうかな～と思った。
「Can't start server: Bind on TCP/IP port: 通常、各ソケットアドレスに対してプロトコル、ネットワーク アドレス、またはポートのどれか1つのみを使用できます。」

##やったこと
1.バージョンが違うのがいけないのかと思ってMySQL8.0.25から8.0.26にアップグレード
2.パッケージの数が足りないのかと思ってServer,J,Shell以外をMySQL Installerでインストール
3.mysqld --initializeを実行

結局これらをやっても解決しなかった。

##その後
そこで、検索してみたらこんなのが出てきた。
[ＸＡＭＰＰ　ＭｙＳＱＬ　Start エラー ](https://teratail.com/questions/126123)
BAがついた記事では3306番ポートをすでに他のプログラムが使用しており、終了するしかなかったからこうなっていると回答されていた。
そこで、[特定のポート番号を使用しているプロセスを見つけ、終了する方法](https://qiita.com/C_HERO/items/c2e9ab1a7bb3537d4cb4)
を参考にして3306番を使っているプロセスを見つけてみた。

```
C:\WINDOWS\system32>netstat -ano | find "3306"
  TCP         0.0.0.0:3306           0.0.0.0:0              LISTENING       13316
  TCP         0.0.0.0:33060          0.0.0.0:0              LISTENING       13316
  TCP         [::]:3306              [::]:0                 LISTENING       13316
  TCP         [::]:33060             [::]:0                 LISTENING       13316
```
全部PIDが13316番だった。
そこで、[tasklist - プロセス一覧表示](https://yanor.net/wiki/?Windows/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89/tasklist+-+%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%E4%B8%80%E8%A6%A7%E8%A1%A8%E7%A4%BA)
を参考に、PIDが13316番のプロセスを割り出す。

```
C:\WINDOWS\system32>tasklist /fi "PID eq 13316"
イメージ名                     PID セッション名     セッション# メモリ使用量
========================= ======== ================ =========== ============
mysqld.exe                   13316 Services                   0     32,248 K
```

ここから分かる通り、mysqldを起動しようとしてmysqldが障害になっていたのである。
##なぜ起こったか？
これはmysqlの起動設定を自動にしていたため起こったことである。
つまりログイン時に自動起動しないように設定してやれば解決する。
![cpt.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576615/b666125f-a1cc-9e70-8060-98f9da4a8229.png)
サービスからMySQL80を選択し、スタートアップの種類を手動に変更。
その後停止ボタンからサービスを停止する。
![cpt2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576615/f3f273a4-e81c-b589-a0ed-d7621b33a256.png)
証明書などでエラーは出ているが、正常に稼働するようになった。

##そもそも...
こんなことになった根本的な原因はインストール時に
Start the MySQL Server at System Startup
にチェックが入っていたためである。
参考:[MySQLをWindowsサービスに登録する](https://www.dbonline.jp/mysql/install/index4.html)

##教訓
設定は読み飛ばさずにちゃんと読んでインストールしよう。
日本語インストラクションやチュートリアルを調べてやってみても良い。
本来はまらないはずのところで時間を無駄に食うことになるから。
Qiskitで量子SVMにおけるFeature mapの可視化

前回記事では、qiskit_machine_learningでQSVMを実行する方法を紹介しました。
[qiskit_machine_learningでQSVM](https://qiita.com/notori48/items/408edd4433510a6658e1)

QSVMでは、feature map （即ちカーネル)の選択が極めて重要です。
feature mapが問題に適合するかどうかは、ブロッホベクトル空間を見れば多少は推測できます。
[量子SVMにおけるFeature mapの可視化 (ブロッホベクトル空間)](https://qiita.com/notori48/items/cf1bdc37c347cfb20688)

上記記事ではPennyLaneでブロッホベクトル空間の可視化を実装していますが、今回はqiskitでもやってみます。

# 実装

```python
import qiskit.quantum_info as qi
from qiskit.quantum_info import pauli_basis, PauliList
n_qubits = 2
def calc_Bloch_vec(x):
    qc = adhoc_feature_map
    qc = qc.assign_parameters(x) 
    rho = qi.DensityMatrix.from_instruction(qc)
    PauliMat = PauliList(pauli_basis(n_qubits)).to_matrix()
    Bloch_vector = np.zeros((len(PauliMat),1))
    for i in range(0,len(PauliMat)):
        Bloch_vector[i] = rho.expectation_value(PauliMat[i]).real
    return Bloch_vector
```
## 解説
`PauliList(pauli_basis(n_qubits))`
を実行すると、
`PauliList(['II', 'IX', 'IY', 'IZ', 'XI', 'XX', 'XY', 'XZ', 'YI', 'YX',
           'YY', 'YZ', 'ZI', 'ZX', 'ZY', 'ZZ'])`
このように、パウリ行列のテンソル積が返ります。
ブロッホベクトルはこれらと密度行列$\rho$のテンソル積のトレースです。
これは、密度行列$\rho$を持つ量子状態に対する、パウリ行列のテンソル積たちの期待値と言い換えられます。
それを、
`rho.expectation_value`
で計算しています。
これは実数のはずですが、計算誤差で虚部が出てくるので、realだけ取っています。

Bloch vector の中身は、例えば
`array([[ 1.00000000e+00],
       [ 4.03009369e-01],
       [-8.80591536e-01],
       [-2.77555756e-17],
       [ 4.03009369e-01],
       [ 1.73178190e-01],
       [-3.78401248e-01],
       [-2.26672357e-01],
       [-8.80591536e-01],
       [-3.78401248e-01],
       [ 8.26821810e-01],
       [-1.03738316e-01],
       [-5.55111512e-17],
       [-2.26672357e-01],
       [-1.03738316e-01],
       [ 2.77555756e-17]])
`

## Plot

2量子ビットの場合です。

```python
plt.style.use('default')
fig = plt.figure()

a = np.linspace(-1, 1, 50)
b = np.linspace(-1, 1, 50)
A, B = np.meshgrid(a, b)

C = []
for i in range(50):
    for j in range(50):
        x = np.array([A[i][j], B[i][j]])
        c = calc_Bloch_vec(x)
        C.append(c)

C_array = np.array(C)
fig = plt.figure()
for ii in range(16):
    _C = C_array[:,ii].reshape(50, 50)
    ax1 = fig.add_subplot(4, 4, ii+1)
    plt.subplots_adjust(wspace=0.4, hspace=0.6)
    ax1.contourf(A, B, _C, 20, cmap="jet")

plt.show()
```

## 実例

`adhoc_feature_map = ZFeatureMap(feature_dimension=n_qubits,reps=1)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878664/141f4aac-a178-93da-f1b0-a03ed3510a83.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878664/82af4329-6962-b6c0-c723-f8f6b517b993.png)

うまくいっているようです。
グラフの順番はパウリ行列のテンソル積の順番によります。
また数値誤差のせいで「ざりざり」となってみえるグラフもあります。

#所感

実はqiskitでは、`from qiskit.visualization.utils import _paulivec_data`
という関数があり、これにStatevectorを与えることでブロッホベクトルを取り出すことも出来ます。
しかし、`_paulivec_data`という関数にはバグがあるようでして、2量子ビットのブロッホベクトルは16成分あるのに14成分ぐらいしか出力されません。中身を見ると、確かに(なぜか)`ZZ`が無かったりします。
というわけで、自前で作るしかありませんでした。。
こういうときに、「ちゃんと量子計算の理屈がわかっていますか」ということが問われますね。
Kotlin Android Extensions

Android studio 4.1以上ではKotlin Android Extensionsが標準で入っていないようなので、自分で入れる必要があります。

appの下の、build.gradleを開き（二つあるのでpluginsが入っているほう）、少しいじる。

```
plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

```
最後に青のバーが上のほうに表示されるのでSync Nowをクリック。
【Laravel】abort( )を使って例外を発生させる

#はじめに
ユーザーのリクエストが違っていた場合には、真っ白なページではなく、「Not found」など適切なエラーページを返してあげましょう。

#abort関数

```php:MenuController.php
public function edit(Request $request)
{
    $menu = Menu::find($request->id);
    if(\Auth::id() == $menu->user_id){
        return view ('menus.edit', ['menu' => $menu]);
    }
    abort(401);
}
```

`abort()`を使うと、全ての処理を止めて、指定したエラーページを表示させることができます。

`４０１`は未認証という意味なので、認証を受けなければレスポンスを受け取ることができません。

よくあるステータスコードとしては、２００、３０１、３０２、４００、４０１、４０３、４０４、４０５などがあります。
詳しく見たい方はHTTPレスポンスステータスコードと検索してみてください。
Laravelでは４１９、４２２なども用意されています。
Excel の xlsx を perlでパースする

###UNIX (厳密にはFreeBSD）でxlsxをパースしたい。
理由としては、Excelでホームページを作っているからです。

###Spreadsheet::ParseXLSXを使用する

```
use Spreadsheet::ParseXLSX;
```

```
		my $xlsxfile="excel.xlsx";

		print "Parse start $xlsxfile\n";
		my $ExcelObj = Spreadsheet::ParseXLSX->new();  # ParseXLSXのオブジェクト定義
	    
		my $Book = $ExcelObj->parse($xlsxfile);        # xlsxファイル読み込み/book扱い
	    
		for my $Sheet ($Book->worksheets()) {          # worksheetオブジェクト取得
			&GetValuesFromSheet($Sheet,"$xlsxfile.txt");               # worksheetデータ取得へ
		}
```

これで、excel.xlsx.txt が UTF-8のタブ区切りテキストで出力されます。


※Excelのすべての関数を認識して、正しくパースしてくれます。
※Microsoft Excelのファイル以外動作保証はないようです。
※Excel VBA は解析できません。
例外処理で大元のエラー箇所をlogしたい時

# 結論
```some.py
import sys
import traceback
from some_module import some_func

def some_some():
    try:
        some_process...
        some_val = some_func()  # エラーが起こる処理 -> さらに　some_func()で呼んでいるsome_blah_func()でraiseしてるとする
    except Exception as e:
        t, v, tb = sys.exc_info()
        print(traceback.format_tb(tb)[-1])  # <-大元のエラー箇所を出力する
```
すると出力はこんな感じ。

```
some_container     |   File "/some_path/some_blah_module.py", line 30, in some_blah_func
some_container     |   raise
```

# 解説
sys.exc_info()の中にはこんな感じに例外オブジェクトの情報がある

```.py
type, value, tb = sys.exc_info()
print(type)
print(value)
print(tb)
```
↓

```
some_container     | <class 'RuntimeError'>
some_container     | No active exception to reraise
some_container     | <traceback object at xxxxxxxx>
```

なので、traceback.format_tbに、ここで取得したtracebackを食わせると…

```.py
print(traceback.format_tb(tb))
```
```
some_container     | ['  File "/some_path/some.py", line 10, in some_some\n    some_val = some_func()\n', '  File "/some_path/some_moduile.py", line 20, in some_func\n    some_val2 = some_blah_func()\n', '  File "/some_path/some_blah_module.py", line 30, in some_blah_func\n    raise\n']
```
こんな感じ。
要するに、traceback.format_tb(tb)には、遡って各エラー箇所がリストで入っている。
なので、以下で大元をprintできる。

```.py
t, v, tb = sys.exc_info()
print(traceback.format_tb(tb)[-1]) 
```

あとは、これをloggingすればよし。

おわり。
railsチュートリアル第八章 レイアウトを変更する

###レイアウトを変更する
ログイン機能の最初の具体的な応用として、ユーザーがログインしているときとそうでないときでレイアウトを変更してみましょう
ログアウト」リンク、「ユーザー設定」リンク、「ユーザー一覧」リンク、「プロフィール表示」リンクも追加します

```html
<%= link_to "Profile", current_user %>
```

```html
<%= link_to "Profile", user_path(current_user) %>
```



####logged_in?ヘルパーメソッド
app/helpers/sessions_helper.rb

```rb
module SessionsHelper

  # 渡されたユーザーでログインする
  def log_in(user)
    session[:user_id] = user.id
    #sessionメソッドで作成した一時cookiesは自動的に暗号化される
    # ユーザーのブラウザ内の一時cookiesに暗号化済みのユーザーIDが自動で作成
  end
  
  # 現在ログイン中のユーザーを返す（いる場合）
  def current_user
    if session[:user_id]
    # ログインしているユーザーが有効か？
    # このどちらかの状態の場合、Cookieの有効期限をブラウザ終了時にしても、
    # Chrome側の仕様でCookieを保持し続ける
      @current_user ||= User.find_by(id: session[:user_id])
      # current_userかUser.find_by()のどちらかに入っていればいい。
    end
  end
  
  # ユーザーがログインしていればtrue、その他ならfalseを返す
  def logged_in?
    !current_user.nil?
    # current_userがnilでないことを確認
  end
end
```
レイアウトに新しいリンクを追加したので、リスト 8.19にBootstrapのドロップダウンメニュー機能7 を適用できる状態になりました。具体的には、Bootstrapに含まれるCSSのdropdownクラスやdropdown-menuなどを使っています。これらのドロップダウン機能を有効にするため、Railsのapplication.jsファイルを通して、Bootstrapに同梱されているJavaScriptライブラリの他にjQueryも読み込む必要があります

RailsのアセットパイプラインはWebpackとYarnのどちらともうまく動きます。そして上述のJavaScriptをインクルードするには、この両方が必要です。最初の手順として、jQueryとBootstrapのJavaScriptライブラリを、アプリケーションにインストールしましょう

```
$ yarn add jquery@3.4.1 bootstrap@3.4.1
```

####WebpackにjQueryの設定を追加する
config/webpack/environment.js

```js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment
```

####必要なJavaScriptファイルをrequireまたはimportする
app/javascript/packs/application.js

```js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"
```

###演習
1.ブラウザのcookieインスペクタ機能を使って（8.2.1.1）、セッション用のcookieを削除してみてください。ヘッダー部分にあるリンクは非ログイン状態のものになっているでしょうか? 確認してみましょう。
確認

2.もう一度ログインしてみて、ヘッダーのレイアウトが変わったことを確認してみましょう。その後、ブラウザを再起動させ、再び非ログイン状態に戻ったことも確認してみてください。注意: もしブラウザの［閉じたときの状態に戻す］機能をオンにしていると、セッション情報も復元される可能性があります。もしその機能をオンにしている場合、忘れずにオフにしておきましょう（コラム 1.2）。
確認
【学習記録⑤】propsを用いて親コンポーネントから子コンポーネントに値を渡す。

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は[前回の学習記録の記事](https://qiita.com/Ooooooomin_365/items/69921a1aa5e46590acf7)で作成した挨拶アラートを返却するコードを少し改良し、親コンポーネントから子コンポーネントへ値を渡す処理に変更したいと思います。

##サンプルコード
前回の記事ではMorning.vue, Afternoon.vue, Evening.vueそれぞれに挨拶文を書いていましたが、今回はそれらのvueファイルの親コンポーネントであるApp.vueから値を渡しています。
v-bind属性を用いてtemplateタグにそれぞれ挨拶文を渡しています。

```vue:App.vue
<template>
  <div>
    <morning :message="morningMessage"></morning>
    <afternoon :message="afternoonMessage"></afternoon>
    <evening :message="eveningMessage"></evening>
  </div>
</template>

<script>
import Morning from './components/Morning.vue';
import Afternoon from './components/Afternoon.vue';
import Evening from './components/Evening.vue';

export default {
  data(){
    return {
      morningMessage: "おはよう～！",
      afternoonMessage: "こんにちは～！",
      eveningMessage: "こんばんは～！"
    }
  },
  components: {
    Morning,
    Afternoon,
    Evening
  }
}
</script>
```

挨拶文を受け取る子コンポーネントは以下のような感じでpropsプロパティで受け取っています。
（Afternoon.vue, Evening.vueも同様）

```vue:Morning.vue
<template>
  <div>
      {{ message }}
      <button @click="greeting">おはようボタン</button>
  </div>
</template>

<script>
export default {
    props:["message"],
    methods:{
        greeting(){
            alert(this.message);
        }
    }
};
</script>
```

## 出力結果
以下のようにボタンを押すとApp.vueから渡した挨拶文がアラートで出力されます。
動作は[前回の記事](https://qiita.com/Ooooooomin_365/items/69921a1aa5e46590acf7#%E5%87%BA%E5%8A%9B%E7%B5%90%E6%9E%9C)と同じです。
![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/f433bf3e-ad6c-ec30-2ffa-c76545e94f07.png)

#おわりに
コンポーネント、触ってみましたが良い感じですね！
次は子コンポーネントから親コンポーネントに値を渡す学習をしたいと思います。
BuildOptions.SymlinkLibraries

[シンボリックリンク](https://e-words.jp/w/%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AA%E3%83%83%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%AF.html)

```
シンボリックリンクとは、
オペレーティングシステム（OS）のファイルシステムの機能の一つで、
特定のファイルやディレクトリを指し示す別のファイルを作成し、
それを通じて本体を参照できるようにする仕組み
```

UnityからiOSビルド時にBuildOptionsの指定で簡単に設定できる

https://docs.unity3d.com/ja/current/ScriptReference/BuildOptions.SymlinkLibraries.html
dockerでgnu screenを使う

初めまして。くろんです。

Dockerでgnu screenを使おうとして、
普段と違う画面が出て困ったので原因を調べました。

#### 普段の画面はこんなの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2194000/5f13587f-a434-e3d5-01b8-50cf6c977df0.png)

## 今回出てきた画面

1. `docker run -it ubuntu:20.04 bash`
2. `apt update && apt install -y screen`
3. `screen`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2194000/b80e6b6a-12e3-9ea9-a4eb-2a63e607a2b3.png)
補完が使えないし色々不便

## 原因

ここを見るに環境変数の SHELL に値が入っていないと `/bin/sh` になるらしい
https://linuxjm.osdn.jp/html/GNU_screen/man1/screen.1.html
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2194000/06be9605-d34c-ffb9-57cc-a455d2ec5108.png)
実際見てみると `/bin/sh` になってる

`export SHELL=/bin/bash` をDocker内にて設定して `screen` してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2194000/7a9c0ca0-8576-8cd6-461a-3d5233b76953.png)
普段の画面が出ました。

Dockerfile とかで設定する場合には ENV SHELL /bin/bash あたりすればOK

### サンプル

```
FROM ubuntu:20.04

# for gnu screen
ENV SHELL /bin/bash

RUN apt-get update && apt-get install -y \
    screen \
    && rm -rf /var/lib/apt/lists/*
```

では
【Nuxt.js】プロジェクトのディレクトリを整理する

## はじめに
[Nuxt.jsの環境構築]([https://nuxtjs.org/ja/docs/get-started/installation)の手順に従うことで、簡単に新規プロジェクトを作成することができます。
また、プロジェクト追加時に様々なモジュール（テスト用のフレームワークやUIフレームワークなど）を追加インストールすることができます。

追加するモジュールが増えると、ルートディレクトリ上にフォルダやファイルが乱立し、どこに何のモジュールが入っているのかがわかりにくく、初学者はそれだけで億劫になってしまうことがあるので、作業ディレクトリを1つ切って（ここではsrcディレクトリとします）、Nuxtの基本となるファイルをこのディレクトリに移動させるようにします。
こういった、ディレクトリの整理などのプロジェクト全体に影響するものはできるだけプロジェクト初期に実施することをおすすめします。

## プロジェクト作成時のディレクトリ構成
```
root/
  │─.github
  │─.nuxt
  │─.vscode
  │─assets
  │─components
  │─layouts
  │─middleware
  │─node_modules
  │─pages
  │─plugins
  │─static
  │─store
  │─test
  │─nuxt.config.js などの設定ファイル

```

## nuxt.config.jsに作業ファイルの変更内容を追記する

```
srcDir: 'src/',  // 追記する
```

## 作業フォルダをまとめる
ルートディレクトリに```src```ディレクトリを作成し、作業フォルダを```src```ディレクトリ内に移動する

```
mkdir src
mv assets components layouts pages plugins static store middleware src/
```

## 整理後のディレクトリ構成
```
root/
  │─.github
  │─.nuxt
  │─.vscode
  │─node_modules
  │─src
    │─assets
    │─components
    │─layouts
    │─middleware
    │─pages
    │─plugins
    │─static
    │─store
  │─test
  │─nuxt.config.js などの設定ファイル

```

## 最後に
ディレクトリを整理することで、プロジェクトが進んで、TypeScriptの型定義ファイルを```types```フォルダ配下にまとめたい、といった場合などでも、```src```の下にフォルダを配置するとで、作業ディレクトリなのか、そうでないのか、といった線引きが可視化できるかなと思います。  
めんどくさいですが、こういったディレクトリの整理は後々の作業ファイルの増大を見越して早めにやっておくのがよいですね。
Udemy「ネットワークエンジニアを目指す初心者はここから始めよう！「ゼロから学ぶネットワーク基礎」1020

・Virtual
・本来目に見える機器やモノを別の機器の上で機能として動作させる。
　・virtual Switch …サーバーの上でL２スイッチの機能を提供してくれる。
　・Virtual Circuit…１本の回線上で複数の回線があるように見せる。

・Virtual Local Area Network = VLAN
　・ここでのLANはL2スイッチを意味する。
　・VLANとは仮想的なL2スイッチと考えることができる。

VLAN概要
・VLANはブロードキャストドメインを分割できる。
・意図しないホスト間の通信を防ぐセキュリティ上のメリットがある。


VLAN ID
・VLANを識別するためのID,VLAN番号とも呼ぶ。
・０〜4095の番号を使う（0と4095は予約されているので実際は使えない。）
・最大4094個のVLANグループを作れるとは限らない（メーカーや機種による）。


VLAN種類
・Static=静的、Dynamic=動的を意味する。
・StaticVLANは管理者などによって手動で設定される。
・Dynamic VLANはホストが持つ情報に応じて自動で設定される。

ポートVLAN
・ポートVLAN、ポートベースVLANと言う。
・L２スイッチのポートに対してVLAN IDを設定する。
・同じVALN IDがVLANグループになる。
・１つのポートは１つのVLAN番号のみ設定できる。

VLANタギング
・L２スイッチ同士は１本のケーブルで接続する。
・１つのポートは複数のVLANに所属することができる。

IEEE 802.1Q
・メーカー独自よりもIEEE802.1Qが広く使われている。
・VLANタギングはL2スイッチをまたぐときのVLAN方式のこと。L2スイッチ内はポートVLANになる。

IEEE 802.1Qタグ
・TPID（TaG Protocol Identifier)…VLANタグを含むと言う意味、通常は0x8100が入る。
・PCP（Priority Code Point)…フレームに優先度を付ける時に使用する。
・CFI(Canonical Format Identifier)…他プロトコルと互換用に使う。通常は０が入る。
・VLAN ID…具体的なVLAN番号が入る。
Enumについて　簡単まとめ

#今回の内容

* `Enum`について簡単にまとめておきます。

#コードと簡単解説

## Enum{ }を宣言する

* 今回は、`String型`を設定して`Enum{}`を宣言していますので、`enum{}`内は`String型`の値を設定します。

```Swift:
    enum UIKit:String{

        case UIButton = "ボタンです"
        case UILabel = "ラベルです"
        case UITextField = "テキストフィールドです"
        case UITextView = "テキストビューです"
        case UITableView = "テーブルビューです"
        case UICollectionView = "コレクションビューです"

    }
```

## Enum{ }内の値を使う

* 今回の場合、`Enum{}`内の値を使う為には、`UIKit.UIButton.rawValue`の様に`.rawValue`を使用します。

```Swift:
    override func viewDidLoad() {
        super.viewDidLoad()

        print(UIKit.UIButton.rawValue)
        print(UIKit.UICollectionView.rawValue)
    }
```

```:print結果
    ボタンです
    コレクションビューです
``` 

# 終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
yamlの値をシェルで使いたい

シェルスクリプト内でyamlのデータを使いたかった時にちょっと詰まったので共有します。

### 概要

色々解決手法はあると思いますが、以下の方法で解決しました。
`yaml` → `json` → `jq`で取得

#### シェル

```use_yaml.sh
#!/bin/bash
python json_gen.py > hoge.json
FUGA=`jq ".path.to.fuga" hoge.json`
```

`python`で`yml`から`json`に変換して、`jq`で取得して使用しました。
実際には`yaml`のファイル名を`python`に渡してそれを`json`に変換しました。

#### python

```json_gen.py
import yaml, json

with open('./path/to/yml/hoge.yml') as file:
    obj = yaml.safe_load(file)
    js = json.dumps(obj, indent=2)
    print(js)
```
[Flutter] ボタンタップ時に微妙な振動で押した感覚を与える

なぜかあまり出てこないので、書いておきます。iPhoneでホームボタンを押した時などに、振動で実際にボタンが押し込まれたように錯覚させる機能ですね。画面タップ時に使用したりすると、ボタンを押した感覚を味わえるので良いアプリ体験が得られます。

最後のvibrateは毛色が違うのですが、ついでに載せておきます。

```dart
import 'package:flutter/services.dart';

main(){
  HapticFeedback.heavyImpact();
  HapticFeedback.lightImpact();
  HapticFeedback.mediumImpact();
  HapticFeedback.selectionClick();
  HapticFeedback.vibrate();
}
```
tensorflow-macosの正式版のインストール方法

# はじめに
いつの間にかtensorflow-macの正式版が公開されてた
tensorflow-macosのalpha版をインストールする方法が書いてある記事は沢山あるけど正式版をインストールする方法を日本語で書いてあるサイトはまだ少ない
アメリカ語が苦手な私のような人向けにインストール方法をまとめる

この記事はM1 macユーザー向け
Mac Proは知らん！誰か買って！！

# インストール
1. condaのインストール
1. 依存パッケージをインストール
1. 既にインストールされてるtensorflowのアンインストール
1. tensorflow-macosのインストール

の順で行う
condaはtensorflowのインストールに必要、これ以上の事を知りたいならggって
3はまだtensorflowインストールしてないよって人は不要、飛ばしていい

## condaのインストール
[ここ](https://github-releases.githubusercontent.com/221584272/f336c853-2b82-4f48-8232-b513866f6589?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20211025%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211025T072922Z&X-Amz-Expires=300&X-Amz-Signature=86aab0d2d458d7a64192faca95c892817268bb40e598c88b5d3137a82d6be28d&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=221584272&response-content-disposition=attachment%3B%20filename%3DMiniforge3-MacOSX-arm64.sh&response-content-type=application%2Foctet-stream)からcondaをダウンロード
ダウンロード先はダウンロードファイルへ

次に以下のコマンドをターミナルで叩く

```
chmod +x ~/Downloads/Miniforge3-MacOSX-arm64.sh
sh ~/Downloads/Miniforge3-MacOSX-arm64.sh
source ~/miniforge3/bin/activate
```

## 依存パッケージ(tensorflow-deps)をインストール

以下のコマンドを叩いて依存パッケージをインストール

```
conda install -c apple tensorflow-deps
```

## 既にインストールしてあるtensorflowをアンインストール
インストールしてないって人は不要
念のために実行しても特に問題ない

```
# tensorflowをアンインストール
python -m pip uninstall tensorflow-macos
python -m pip uninstall tensorflow-metal
# tensorflow-depsをアップデート
conda install -c apple tensorflow-deps --force-reinstall
```

## tensorflow-macosのインストール

いよいよtensorflow-macosをインストールします
以下のコマンドを叩いてtensorflowをインストール

```
python -m pip install tensorflow-macos
python -m pip install tensorflow-metal
```

# 終わりに

動かしてみました
早いですね〜

以下がapple公式のインストール方法
なんか問題あったらそこ見て

https://developer.apple.com/metal/tensorflow-plugin/