OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsのレンダリングについて

# 概要
Vue.jsには[Vue.jsの仕組み](https://qiita.com/daiki421/items/21c1f6cb4d6b873e7a1f)で説明したように`{{}}`記号で値をはめ込んで表示させることができますが、複雑な表示を行いたい場合は`{{}}`だけでは難しいです。
このような場合は`render`プロパティを利用します。

# renderとは
renderとはVueが用意したレンダリング用のプロパティのことで、レンダリングとはデータをもとに画面表示を作成する処理のことを言います。
以下のように実装することでHTMLのエレメントを生成して組み込むことができるようになります。

```Vue.js
render: (element) => {
　　　　return element(タグ名, 属性情報, 表示する値);
}
```
これは関数のようなものでelementには引数を入れます。
タグのところには追加するタグ名を書きます。
`<p>`の場合は`"p"`となります。
表示する値には実際に表示するテキストを設定します。
属性というのは一言で言うとフォントサイズやテキストの色などを変更するための情報のことを言います。
element引数にはエレメントをレンダリングする関数が渡されています。
この関数でreturnしているのは`VNode`と呼ばれる仮想DOMと呼ばれるものです。

## 仮想DOMについて
そもそも仮想DOMとはなんなのかについて補足します。
まず、JavaScriptでHTMLタグを操作する場合はDOM(Document Object Model)と呼ばれる仕組みを利用しています。
通常JavaScriptでなんらかの表示を行う際はHTMLを読み込んだ段階でHTMLタグのエレメントを作成します。
このように作られた構造のことをDOMツリーと言います。
Vue.jsではこれの仮想版DOMツリーを使っています。

では通常のDOMと何が違うのか？
通常のDOMではその状態を常にチェックすることはできないので、チェックしたい場合はそのような処理を書かないといません。
ですが、仮想DOMの場合は常にその状態が管理され変更があり次第DOMに即時反映されます。

# まとめ
* Vueで複雑な表示をしたい場合は`render`プロパティを利用します。
* `render`にタグ名, 属性情報, 表示する値を設定することでHTMLエレメントを生成してくれます。
* Vue.jsでは仮想DOMを利用してHTMLタグを操作しています。
IntelliJ などの JetBrains IDE で React をデバッグする

# 概要

JetBrains IDE で React をデバッグする手順を書きます。
調べても最新のが出てこなかったので、、、

React に限らず、 パッケージマネージャーを使用して実行しているアプリケーションはこの方法で行けるはずです。
参考記事には Angular での実行方法も乗っています。（応用すれば Vue もいけると思われます）

# これまでとの相違点

- JetBrains IDE Support という Chrome 拡張機能を使用しない

以前は必要だったみたいですが、手元で試したらなくても行けました。

# 前提条件

- 説明は macOS で行う
- 手順はメニューバーからの選択を始めとしているが、ショートカットやIDE上のアイコンからの操作も可能
- Node がインストールされていること
- Node のパッケージマネージャー（ex. `npm` ）がインストールされていること

# 手順

## NodeJS プラグインのインストール

- Menu > IntelliJ IDEA > Preferences > Plugins を開く
- `NodeJS`　を検索し、インストール

## npm 実行設定

- Menu > Run > Edit Configurations を開く
- 左上の `+` > npm　をクリック
- 以下の項目を設定
  - Name: 任意の名前（ex. `npm start by MyApp` ）を入力
  - pakcage.json: アプリケーションの `pakcage.json` を選択
  - Command: `start` を選択
  - Node interpreter: `node` のインストール先ディレクトリを選択
  - Package manager: `node` のパッケージマネージャー（ex. `npm` ）のインストール先ディレクトリを選択
- `apply` をクリック後、 `OK` をクリック

## debug 実行設定

- Menu > Run > Edit Configurations を開く
- 左上の `+` > JavaScript Debug　をクリック
- 以下の項目を設定
  - Name: 任意の名前（ex. `debug on localhost:3000` ）を入力
  - URL: `http://localhost:3000` を入力
- `apply` をクリック後、 `OK` をクリック

## アプリケーションの実行

- Menu > Run をクリック
- 作成した実行設定（ex. `npm start by MyApp` ）をクリック

## アプリケーションのデバッグ

- 任意の箇所にブレークポイントを設置
- Menu > Run > Debug をクリック
- 作成したデバッグ設定（ex. `debug on localhost:3000` ）をクリック

以上でデバッグツールが表示され、デバッグできれば完了です！

# 参考文献

- [IntelliJ IDEA で Angular や React のデバッグをする](https://qiita.com/nirasan/items/7499a2c7fe9d7e834207)
- [How to run/execute/debug react/redux app from Intellij](https://stackoverflow.com/questions/59076816/how-to-run-execute-debug-react-redux-app-from-intellij)
Git、GitHub？なにそれおいしいの？という人に向けて

# はじめに

かつて私は、GitとGitHubの違いすらわかりませんでした。
今では **No Git & GitHub, No Life.** となっております。
かつての自分に向けて、伝えておきたいことをまとめます。

# まずやるべきこと

こちらの無料講座を１．５倍速で観ることで、**GitとGitHubによって何ができるか**を把握する。

https://www.udemy.com/course/intro_git/

# つぎにすべきこと

GitとGitHubが使えるよう環境整備しましょう。

もしWindowsをお使いでしたら、拙著で恐縮ですが、以下をご参考に。

https://qiita.com/hiyasichuka/items/c8e066ccdb95d68267d6


# さらに頑張ってほしいこと

こちらのGitHubのワークフローを体験できるサービスを利用しましょう。

https://lab.github.com/githubtraining/introduction-to-github

# ついでに

よく使うGitコマンドを以下にまとめておきます。

```shell:よく使うgitコマンド
git pull
git checkout –b ブランチ名 
git add . 
git status 
git commit –m”コミットメッセージ” 
git push –u origin ブランチ名 
git checkout master
git branch
git branch --delete ブランチ名 
```

# ついでのついでに

Git操作に慣れてくるとコマンドを短縮するようエイリアスなど設定します。
拙著で恐縮ですが、ご参考に

https://qiita.com/hiyasichuka/items/1a772742167e9f88a972

以上です。
ARの魔法を手に入れるーーARオブジェクトを指で移動・拡大・回転する方法

#AppleのRealityComposerで作ったARオブジェクトに指のジェスチャーによるコントロールをつける方法です

<img src="https://user-images.githubusercontent.com/23278992/151641920-f4a4f868-2ee9-46d1-bc02-2ad8a883313f.gif">

#RealityComposerは簡単にARオブジェクトをつくれる。でも、どうやって指でコントロールすればいいの？
<img src="https://user-images.githubusercontent.com/23278992/151640218-7423df61-a845-48d2-895a-185834723035.png">
ARオブジェクトをどんどん配置できるRealityComposerは、グラフィック・ユーザー・インターフェースでARコンテンツを作れて便利です。

これらのARを指で操作できたら、魔法みたいじゃないですか？
さて、どうすればそれが実現できるのでしょう？

#これが答えだ

短いコードを書くと実現できます。

まず、シーン構造をプリントしてModelEntityを探します。

```swift
let sceneAnchor = try! Experience.loadScene() // load RealityComposer scene.
print(sceneAnchor)
```

 >'toy_rocket_stylized_lod0' : ModelEntity

そして、コードからオブジェクトに指ジェスチャーでの操作を付与します。

```swift
let rocket = sceneAnchor.findEntity(named: "toy_rocket_stylized_lod0") as! ModelEntity
rocket.generateCollisionShapes(recursive: true)
arView.installGestures(.all, for: rocket)
}
```

移動拡大縮小ができるようになります。

<img src="https://user-images.githubusercontent.com/23278992/151641920-f4a4f868-2ee9-46d1-bc02-2ad8a883313f.gif">
🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

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

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
PHPとイスラエル ←便乗

この記事への便乗です。

- PHPとイスラエル
   - https://qiita.com/jkr_2255/items/06f58bef9a9de96b88ba

```
2箇所ほど存在します。
```

3箇所目を紹介。(といっても、もはや昔話ですが)

# calendar モジュール

その昔、C言語文字列リテラルでヘブライ文字をそのまま入れてました。
なお、UTF−8 とかでなく ISO-8859-8 です。

```
/* names for leap (13-month) year */
char *JewishMonthHebNameLeap[14] =
{
	"", 
	"˙˘¯È",
	"Á˘ÂÔ",
	"ÎÒÏÂ",
	"Ë·˙",
	"˘·Ë",
	"‡„¯ ‡'",
	"‡„¯ ·'",
	"ÈÒÔ",
	"‡ÈÈ¯",
	"ÒÈÂÔ",
	"˙ÓÂÊ",
	"‡·",
	"‡ÏÂÏ"
};

/* names for regular year */
char *JewishMonthHebName[14] =
{
	"", 
	"˙˘¯È",
	"Á˘ÂÔ",
	"ÎÒÏÂ",
	"Ë·˙",
	"˘·Ë",
	"",
	"‡„¯",
	"ÈÒÔ",
	"‡ÈÈ¯",
	"ÒÈÂÔ",
	"˙ÓÂÊ",
	"‡·",
	"‡ÏÂÏ"
};
```

日本語環境の Windows でビルドする時に困りました。今はエスケープされていて問題ないです。

# ISO-8859-8

上記コードの1月の場所を hexdump すると、４バイトが得られます。

![20130201014512.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/d456dc52-cd76-3e74-ddc4-890b20aa39f4.png)

```
fa f9 f8 e9
```

1月に対応するヘブライ語は Tishrei です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/5b1be936-e008-d29b-b982-6701769da5cf.png)

- https://uic.jp/charset/compare/iso-8859-8/windows-1255/

コード表で対応する文字を拾うと、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/150cf235-3a15-2df6-33da-99477cf7ba41.png)

ヘブライ語は右から左に読むので、一致します。


# 当時の記録

 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">PHP にヘブライ語が混ざってコンパイル出来ない件は locale を english に設定するのが正解みたい。
http://ml.php.gr.jp/pipermail/php-dev/2003-March/000718.html
ISO-8859-8 を CP932 として処理して " (ダブルクォーと)が一つ前のバイトに食われて消えて見える訳で。 よや(@yoya) <a href="https://twitter.com/yoya/status/300606461652922368">2013年2月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">https://bugs.php.net/bug.php?id=53521
jewish.c を UTF-8 に変換したパッチを送った中国人がいるけど、公式ではラテン語圏のlocaleを前提にコンパイルしてるので、逆にヘブライ語が表示できなくなる可能性があって、余計なお世話っぽい。CJK 仲間として同情する。 よや(@yoya) <a href="https://twitter.com/yoya/status/300612335079411712">2013年2月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- 当時の日記: PHPソース中のヘブライ語
  - https://yoya.hatenadiary.jp/entry/20130131/php
  - https://yoya.hatenadiary.jp/entry/20130210/php
Fortigate VM（制限機能付き評価版）を利用するまでの流れ

以前より制限機能付き評価ライセンス(15日間有効）であれば無償で利用可能（もちろん一切サポートは受けれません）なことは知っていたのですが、意外と利用までの流れを日本語で説明されたサイトが無いような気がしたので、備忘録も兼ねて。（なんだかんだでようやくネットワークエンジニアぽいこと書き始めました。。。）

## 1. FortiCloudへの登録
まずは下記サイトへアクセスします。

https://support.fortinet.com/welcome/#/


Registerをクリックします。　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/41f42062-cacd-cd8d-7629-5174f28f8b58.png)


Emailアドレスを入力して、Nextをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/21c949fc-f02d-1c59-e558-574ba51b3a9a.png)


しばらくすると登録したアドレス宛てに6桁の数値が記載されたメールが届きますのでVerification Codeにその数値を入れて、下に表示されている画像の文字をCaptcha Codeに入力してNextをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/9c20be9e-476d-45cb-eea6-e87585738044.png)

ログイン用のパスワードを入力してNextをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/43a16cd4-619e-174e-ad3a-cf002fe70946.png)

★印が付いているところをすべて入力or選択して、Agreementをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/8ed45526-1b77-5b1a-cbe0-1999ce72d5a1.png)

画面左下のチェックボックスにチェックを入れてRegisterをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/0d506779-8a62-6836-dc61-630ae06cbd92.png)

Completeをクリックします。アカウントの登録はこれで完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/b26996df-b60c-24b8-0e27-f8fd5d674ea0.png)


## 2. VMのダウンロード

アカウント登録直後は下記のような画面に遷移します。画面中央上にあるSupportからVM Imagesをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/cdb761b4-4bfb-02e7-47f0-fe3731134103.png)
 
ダウンロード可能な画面へ遷移します。Select Platformから自分が利用している仮想基盤（ESXiなど）を選択してダウンロードしてください。※VMWareの方は~~.out.ovf.zipをダウンロードして解凍して利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/40cef509-f354-731f-b967-ee6e61bf2f11.png)


## 3. その他
次回はESXi7にFortigate7.0.4をデプロイします。
sedコマンド基本

文字列置換や抽出に利用されるsedコマンドですが、今までなんとなく使用していたため調べ直してまとめてみました。

## sedコマンドとは
sedとはStream EDitorの略で、入力されたテキストデータを1行ずつ読み込んで指定した処理を適用して出力を行います。主に文字列の置換や抽出に用いられます。

## 基本的な使い方

`echo`コマンドを用いた例が一番わかりやすいです。

```bash
$ echo '一郎くんおはようございます。' | sed 's/一郎/二郎/'
二郎くんおはようございます。
```

このように正規表現を用いて文字列の置換を行うことができます。

また、特定の文字列を空文字に置換するすることにより、文字列の抽出を行うこともできます。

```bash
$ echo 'TEL: 0120-000-000' | sed 's/[A-Z :]//g'
0120-000-000
```

一番基本となる使い方はファイルを指定して処理を行う方法です。

```bash
$ cat hoge.txt
abcdefg

$ sed 's/abc/def/' hoge.txt
defdefg
```
## 用途別コマンド例

### 一致する文字列を全て置換
正規表現の`g`オプションを用いて一致する文字列を全て置換できます。

```bash
$ echo 'abcdefabc' | sed 's/abc/def/g'
defdefdef
```

### 複数の処理を行う
`-e`オプションを使うと複数条件指定できます。

```bash
$ echo abcdefghi | sed -e "s/abc/xxx/" -e "s/ghi/zzz/"
xxxdefzzz
```

### 行を削除
`d`コマンドを用いて特定の行を削除できます。

```bash
$ cat hoge.txt
abcdefg
1234567
aaaaaaa
bbbbbbb

$ sed '1,3d' hoge.txt
bbbbbbb
```

特定の文字列を含む行を削除する場合

```bash
$ sed "/abc/d" hoge.txt
1234567
aaaaaaa
bbbbbbb
```


### ファイルを上書き
`-i`オプションを使用すると、ファイルの内容を上書きすることができます。

```bash
$ cat hoge.txt
abcdefg

$ sed -i 's/abc/def/' hoge.txt
defdefg

$ cat hoge.txt
defdefg
```

### 指定した行だけ表示
`-n`オプションを用いて指定した行を表示できます。

```bash
$ cat hoge.txt
abc
def
ghi
jkl

$ sed -n 2,4p hoge.txt
def
ghi
jkl
```


### 


## まとめ
sedコマンドの基本的な使い方についてまとめてみました。使用方法やオプションなど忘れてしまった際は是非見返してください。

## 参考URL

https://e-words.jp/w/sed.html
【初学者向け】pythonで型チェックしてくれるツールmypyの紹介

# mypyとは
コードを型アノテーションを付ける構文([PEP 484](https://www.python.org/dev/peps/pep-0484/))に基づき、チェックしてくれる静的解析ツールです。

# 導入のモチベーション
本記事では、プログラミング初心者向けに、pythonで型指定をするモチベーションを解説します。

早速ですが、pythonでは型を指定することはできるが、厳密な型チェックは行われない。例えば、

```python
def f(x:int) -> int:
    return x
```
は関数fの引数xに整数が入るよと**宣言**していることになる。ただし、実際には

```
a:int = f(1) 
a #1  OK
b:int = f("gggg") 
b #gggg 型が違うものまで通してしまう。
```

型が違っても関数を実行してその結果を出してしまうので、実はpythonで**型指定というものは表面的なもの**に過ぎない。
本来、指定された型と違う型の引数が代入されたら（上の例でいうとbに対応）、本来そこで型が違うよ！というエラーを出してほしい。

そこで、mypyを導入する。なお、

```python
pip install mypy
```
でインストールできます。

```python
mypy 〇〇.py
```

で〇〇を実行してあげると型をチェックしてくれる。以下の例だとエラーが出る。

```python
value: int = 1

value = "ccc" # mypyはvalueの型が違う違うというエラーを出してくれる
#error: Incompatible types in assignment (expression has type "str", variable has type "int")
```


他の例として


```python
def f(x:int) -> int:
    return x
b:int = f("ggg") #mypyを使えばこのミスを防げる。
#error: Argument 1 to "f" has incompatible type "str"; expected "int"
```


実際の開発では、どのようにして型をつければ良いか、迷うかもしれない。
そこで、python３を使っている人ならば、[mypy チートシート](https://mypy.readthedocs.io/en/stable/cheat_sheet_py3.html)が参考になる。
例えば、typingというモジュールの関数にSequenceがあり、これで配列を表せる。例えば、Sequence[float]で配列に入る変数の型も指定できる。

詳細は、開発チームの方針に合わせた方が良いだろう。


# 余談
ちなみに、pythonと同じように書くことができるjuliaだと型チェックをデフォルトで行なってくれます。

```julia
function f(x::int)
    return x
end

julia> a = f(1)
1

julia> b = f("aaaa")
ERROR: MethodError: no method matching f(::String)
```
julia便利ですね。ただ、ライブラリーの充実度は今の所pythonが優勢なようです。どちらも使えるようになっておくのが今のところいいような気がします。



# 参考記事
python3で型をつける流儀は、[mypy チートシート](https://mypy.readthedocs.io/en/stable/cheat_sheet_py3.html)が参考になる。

[Python の静的型、すごい mypy!]
(https://qiita.com/t2y/items/2a1310608da7b5c4860b)ß
JSON JSON また JSON （playwright x F# で２次元テーブルデータを取得する）

## Summary

ホームページから、playwright で ２次元テーブルデータを取得する

### JSONの取得方法

たとえば２次元表を下記のジャバスクリプトで取得してみる

```javascript
() => {

  const table = document.querySelector('table > tbody');

  return Array.from(table.rows).map((row) =>
    [
      {
          くだもの名: row.cells[0].textContent
        , 価格      : row.cells[1].textContent
        , 備考      : row.cells[2].textContent
      }
    ]);

}

```

### playwrightでF#に取り込む

```fsharp
// dic's key を指定しやすくする
type Fruits =
  | くだもの名
  | 価格
  | 備考
with
  member this.s = this.ToString()

// テーブルの骨格（デシリする際に必要）
type T = {|
  a:{|

    o:{|

      k:string
      v:{|s:string|}

    |}[]

  |}[]

|}


// JSONをdicに変換する
let tableBodyRows (body: JsonElement) =
  body.EnumerateArray()
  |> Seq.map (fun (x:JsonElement) ->
    printfn "%A" x
    JsonSerializer.Deserialize<T>(x)
    |> fun x -> x.a
    |> Array.map(fun y -> y.o)
    |> Array.map(fun x -> x |> Array.map(fun x -> seq{x.k,x.v.s}  ) )
    |> Array.exactlyOne
    |> Seq.concat
    |> dict
  )

// 処理本体
task {

  let! page = page
  let! content = page.EvaluateAsync(javascriptCode)
  content.Value |> tableBodyRows
  |> Seq.iter(fun dic ->
      
    dic.Item Tbl.くだもの名.s |> printfn "%s"

  )

}
```


# おまけ

ホームページからJSONラベル指定せずにとりこむ

```fsharp
// JSONの骨格
type U = {|

  a:{|

    s:string

  |}[]

|}

// JSON -> fsharp collection
let tableBodyRows (body:JsonElement) =
  body.EnumerateArray()
  |> Seq.map (fun (x:JsonElement) ->
    x
    |> JsonSerializer.Deserialize<U>
    |> fun x -> x.a
    |> Array.map(fun y -> y.s)
  )
```

# 現場からは以上です
Windows 11 エクスプローラーのコンテキストメニューを変更する

Windows 11 の エクスプローラーでは、新しいメニューが導入されました。
マウス操作で古いメニューを表示するには、ひと手間かかってしまいます。
レジストリの変更で、従来の動作に戻すことができます。

| 操作                              | 表示されるメニュー |
|:---------------------------------|:---------------|
| 右クリック                         | 新しいメニュー → 古いメニュー   |
| Shift (22H2以降)<br> Shift+F10                        | 古いメニュー      |
| アプリケーションキー（メニューキー）      | 古いメニュー      |

レジストリ操作後、エクスプローラーを再起動してください。

## 右クリックのメニューを古いメニューにする

```
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}]
@=""

[HKEY_CURRENT_USER\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32]
@=""
```


## 右クリックのメニューを新しいメニューにする

```
Windows Registry Editor Version 5.00

[-HKEY_CURRENT_USER\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}]
```

※レジストリの変更は自己責任でお願いします。
【Project Euler】Problem 59: XOR暗号

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 59. XOR暗号

原文 [Problem 59: XOR decryption](https://projecteuler.net/problem=59)

**問題の要約：ファイルの暗号化されたASCIIコードからXOR暗号キーとして使われた3文字を推測して復号文のASCIIコードの和を求めよ**

以下のような条件のもと暗号を解読する問題です。

* 暗号方式はa-zの小文字からなる3文字のASCIIコードを巡回してXORをとる。
* 元の文は普通の英文

考え方は「[頻度分析 (暗号)(Wikipedia)](https://ja.wikipedia.org/wiki/%E9%A0%BB%E5%BA%A6%E5%88%86%E6%9E%90_(%E6%9A%97%E5%8F%B7))」というものを使います。要はすべての可能なキーで復号してみて結果の出現頻度がそれらしいものをキーの候補とします。

今回はキーが3文字を巡回してXORを取るということなので、

1. 暗号文を3文字おきに３つのグループに分ける
1. 各々のグループa-zすべての文字のAsciiコードで複合
1. 複合されたテキストの文字の出現頻度を調べる（Counter）
1. 出現頻度トップ３に" "と"e"が含まれるものをキーの候補（most_common）

それをプロクラムにしたのがこちらです。（リスト**enca**に暗号文のAsciiコードが入っているところからのコード。ファイルからの読み込みは下の方に載せました。）

```python
from collections import Counter
keys = [k for k in range(ord('a'),ord('z')+1)]   # ascii code for a-z
# return the best key candidate, assuming " " and "e" are in top3 common chars 
def bestKey(ea):
  for k in keys: 
    da = [c^k for c in ea]
    top3 = list(dict(Counter(list(map(chr,da))).most_common()[:3]).keys())
    if " " in top3 and "e" in top3:
      return k

# enca : encorded ascii code
EK = [bestKey([enca[i] for i in range(j, len(enca), 3)]) for j in range(3)]
print(f"encryption key: {''.join(list(map(chr,EK)))}")
deca = [enca[i]^EK[i%3] for i in range(len(enca))]
print(f"Answer: {sum(deca)}")
print(f"Original Text: {''.join(list(map(chr,deca)))}")
```

ファイルからの読み込みのコードです。

```python 
#show upload dialog
from google.colab import files
uploaded = files.upload()
f = open("p059_cipher.txt")
fstr = f.read()
f.close()
enca = fstr.split(',')
enca = list(map(int,enca))
print(len(enca),enca[:20])
```
（開発環境：Google Colab）
配列のプロパティから特定の文字列を含むデータを取得する方法

# はじめに
この記事は、エンジニア経験1年の大学生が実務で勉強になったこと、詰まったことをまとめています。間違っている箇所などがございましたら、指摘していただけると幸いです。
※モデル名やプロパティ名など詳細につきましては、架空のものに変更しております。

# 前提
- Ruby: 2.7.5
- Rails: 5.2.4.6
- Neo4j: 9.2.4


# 経緯
実務では社内で使用するツールの開発に携わっており、「データを更新することができない」と報告があった。原因を調査していくと、特定の文字列を含むURLを入力することで、データの更新ができないことがわかった。
そこで、ビジネスの方と話し合い、バリデーションを追加することになった。既存のデータにも特定の文字列を含むURLが存在するため、rakeタスクで該当の文字列を含むURLを削除することになった。
ただ、その該当の文字列を含むURLを取り出すことに詰まった。

# 失敗した方法

```
[1] pry(main)> Company.as(:c).where("c.links =~ '.*/hogehoge/.*'")`
```
railsコンソールを立ち上げ、該当のデータを取得できるか確認した。だが、このクエリでは取得することができなかった。
理由は、`links`プロパティが配列だったので、取得することができなかった。


# 解決した方法

```
[1] pry(main)> Company.as(:c).where("any(x in c.links where x =~ '.*/hogehoge/.*')")

```
上記のコマンドで取得することができた。

# まとめ

配列のプロパティで特定の文字列を含むものを取得する方法はなかなか調べても出てこなかったので、とても苦労しました。今回のような問題に詰まった方に少しでも参考になればと思い、この記事を書きました。間違っていたり、もっと良い方法などがございましたら、コメントなどいただけると幸いです。
【Project Euler】Problem 58: らせんの素数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 58. らせんの素数

原文 [Problem 58: Spiral primes](https://projecteuler.net/problem=58)

**問題の要約：図のように1から順番にマスにらせん状に書いて行ったとき、対角線の数が素数になる割合が10%未満になるときのマスの辺の長さを求めよ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1922159/84fa243a-1748-5dea-3f1b-9f576bbfae3c.png)

[Problem 28: 数のらせんの対角線](https://qiita.com/masa0599/items/31d1313dbc3a2cdeca40)で同様のらせんの対角線の数を求めたので、今回はその数が素数かどうかをチェックします。

```python 
from sympy import isprime
n, d = 1, 0
total, pcount = 1, 0
while True:
  d += 2
  for j in range(4):
    n += d
    if isprime(n): pcount +=1
    total+= 1
  if pcount/total < 0.1: break
print(d+1, pcount/total)
```

（開発環境：Google Colab）
【Project Euler】Problem 57: ２の平方根の収束分数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 57. ２の平方根の収束分数

原文 [Problem 57: Square root convergents](https://projecteuler.net/problem=57)

**問題の要約：２の平方根を1000番目まで連分数展開したものを分数に収束させたとき分子の桁数が分母より大きいものの数を求めよ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1922159/16f30664-a29f-6a8b-da45-e4cc38f18823.png)

要は$\sqrt{2}$の連分数展開$[1,2,2,2,2,\dots]$を分数に変換していくということですが、よく見ると以下のような漸化式が見えてきます。

```math 
E(i) = \frac{m}{n}　のとき　E(i+1) = \frac{2n+m}{n+m}
```
これに従ってプログラムを書くと、

```python 
m1, n1 = 1, 1
count = 0
for i in range(1000):
  m, n = 2*n1+m1, n1+m1
  if len(str(m)) > len(str(n)): count += 1
  m1, n1 = m, n
print(f"Answer: {count})
```

別解として、**sympy**には連分数を表す数列から分数を生成する**continued_fraction_convergents**という関数があるので使ってみます。
残念ながら循環する連分数には対応していないようなので、2が1000個続く$[1,2,2,2,2,\dots]$という配列を作って入力しました。

```python 
from sympy.ntheory.continued_fraction import continued_fraction_convergents 
from sympy import fraction

cf = [1]+[2]*1000
it = continued_fraction_convergents(cf)
print(sum([len(str(x[0]))>len(str(x[1])) for x in [fraction(next(it)) for i in range(1000)]] )) 
```

（開発環境：Google Colab）
GithubPagesでシングルページデザインのサイトを公開する方法

## 概要

NextJsで作ったサイトをGithub-Pagesで公開していて
それをシングルページデザインに変更したところインデックスページ以外へのリンクで404発生

静的に置かれているだけなのでそりゃそうか、となる

ちょっと乱暴だけどカスタム404からNextRouteでasPathからreplaceし直して404を回避した

## 詳細

Github pages で以下の自社サイトを公開しています。

https://www.aya-eiya.work/

このサイトはNextJSで作っており、最初に30分くらいで作った時にはシングルページ・デザインではなくページが分かれていました。

```
　# 以前のコード配置
/pages
  ./index.tsx
  ./company.tsx
  ./house.tsx
   ︙
```
この場合、ビルド結果は


```
index.html
company.html
house.html
   ︙
```
を生成・配置してくれるので、外部から`https://www.aya-eiya.work/company`のようなリンクを貼っても正常に表示できます。

シングルページデザインにする場合、方法はいくつかありますが今回とった方法ではページ内で`/`から`/company`に移動するさいのリロードを回避するため`reouter.push(string,params,{shallow:true})`を使うことにしました。

`{shallow:true}`はpushしてページを移動する際に、NextJSの同一パス内ではリロードをせずにURLを変更できる仕様です。

"同一パス内"を実現するため、ページの配置を以下にします。

```
/pages
  ./index.tsx  (シングルページデザインに変更、また静的配置のインデックスになるので必須)
  ./[pages].tsx (中身はindex.tsxのコンポーネントを返すコンポーネント)
```

こうしたことで、ビルド後で静的に配置されるHTMLは以下となります。

```
./index.html
./[pages].html
```
この場合に、外部から`https://www.aya-eiya.work/company`のようなリンクを貼ってしまうと、静的に置かれたファイルしか見てくれないので404が発生します。

これは困った。

ところがGithub pagesでは404にはNextJSの404ページを採用してくれるので、404でもNextJSが動いているページを表示してくれます。

いったんNextJSが動けば、NextJSのルーター機能でパスを解決すれば表示できるので

```ts
const {path,asPath,replace} = useRouter()
useEffect(() => {
  if(path != asPath) {
     replace(asPath)
  }
},[path,asPath,replace])
```

のようにして、パスをNextJSに解決してもらうことができました。

一瞬404になってちらつきますが、気にしない人は気にしないので簡単なサイトを公開する時には使えるテクニックかもしれません。
FFmpeg コマンド一覧

## はじめに

FFmpeg を用いて動画を編集する機会があり、せっかくなので個人的によく使うコマンドをまとめました。

> 参考：FFmpeg とは？

動画ファイルの切り取り、リサイズ、静止画に切り出す、フレーム補間などの様々な処理を行えるツールとなります。

> 公式ページ

[FFmpeg HP](http://ffmpeg.org/)

## コマンド一覧

### ラウドネス値を調べる

```
$ ./ffmpeg -i input.mp4 -vn -filter_complex ebur128 -f null -
```

### フレームレート（fps）を変更する

`-r` オプションでフレームレートが指定できます。

```
$ ./ffmpeg -i input.mp4 -r 30 output.mp4
```

### 動画から音を削除する

`-an` オプションで音声データを削除することができます。

```
$ ./ffmpeg -i input.mp4 -vcodec copy -an output.mp4
```

### .mov から .mp4 に動画を変換する

QuickTime Player で再生させるためには `-pix_fmt yuv420p` オプションが必要です。


```
$ ./ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
```
Blenderで、Pythonを使って頂点カラーに色を塗る

## やること

オブジェクト内の頂点の高さに応じて、色を塗ってみましょう。
ノードでもできますが、ここではPythonを使います。

## 完成物

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/c21b226e-0c08-540c-1db4-b727372c0eb7.jpeg" width="300">

図はスザンヌの例ですが、どんなメッシュでも同じようにできます。
頂点カラーは、一番高いところを赤に、一番低いところを青にしています。

## 手順

- オブジェクト作成
- Pythonで頂点カラー作成
- マテリアル作成

## やってみよう

最初に、スザンヌを作成してください。

※ スザンヌ以外のメッシュのオブジェクトで試すこともできます。その場合は、後述のコードの`Suzanne`を変えてください。

Sciptingワークスペースで新規作成して、下記をコピペして実行してください。

```py
import colorsys
import bpy

obj = bpy.data.objects["Suzanne"]  # 対象オブジェクト
zz = [v.co[2] for v in obj.data.vertices]  # 頂点の高さ
if not obj.data.vertex_colors:
    obj.select_set(state=True)
    bpy.ops.mesh.vertex_color_add()  # 頂点カラーの作成
vc = obj.data.vertex_colors[0].data  # 頂点カラーのデータ
a = (max(zz) - min(zz)) / 0.7
b = min(zz)

for polygon in obj.data.polygons:
    for i, v in zip(polygon.loop_indices, polygon.vertices):
        h = 0.7 - (zz[v] - b) / a
        vc[i].color = colorsys.hsv_to_rgb(h, 1, 1) + (1,)
```

参考：[BlenderでPythonを実行する方法](https://qiita.com/SaitoTsutomu/items/cec67381a8789b40e377)

Layoutワークスペースに戻ってください。
このままでは、頂点カラーは見えません。マテリアルを設定することで頂点カラーを確認できます。

※ 下記のように、シェーディングのカラーを頂点にするとマテリアルを設定せずに頂点カラーを確認できますが、レンダリングでは色は付きません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/45767f35-4563-7ea7-378d-c1c38b3c4786.jpeg" width="300">

Shadingワークスペースで、マテリアルを新規作成して、下記のようにしてください。頂点カラーノードは、追加の入力にあります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/dcdd3077-8c00-7908-0bd9-9e357c293339.jpeg" width="500">

## Pythonコードの簡単な説明

1つのオブジェクトに対して処理します。対象オブジェクトを下記のように`obj`に入れます。

```py
obj = bpy.data.objects["Suzanne"]  # 対象オブジェクト
```

頂点の高さが必要になるので、頂点ごとの高さを`zz`に入れます。

```py
zz = [v.co[2] for v in obj.data.vertices]  # 頂点の高さ
```

頂点カラーは、オブジェクトの新規作成時には存在していません。1つのオブジェクトに頂点カラーをいくつでも作成できます。コードでは、1つも頂点カラーが存在しないときに、下記で頂点カラーを作成しています。

```py
bpy.ops.mesh.vertex_color_add()  # 頂点カラーの作成
```

頂点カラーを作成すると、オブジェクトデータプロパティで、下記のように確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/79698a44-a2a0-14ad-c2ca-c3fe5deadf1c.jpeg" width="200">

作成した頂点カラー（上記の`Col`）のデータを下記のように`vc`に入れます。

```py
vc = obj.data.vertex_colors[0].data
```

下記のようにして、オブジェクトの面（`polygon`）ごとに処理をします。

```py
for polygon in obj.data.polygons:
```

頂点カラーの値は、「面と頂点の組み合わせ」ごとに持っています。たとえば、`i`番目の「面と頂点の組み合わせ」の色は、`vc[i].color`です。

「面と頂点の組み合わせ」のインデックスは、`polygon.loop_indices`に入っています。
また、対応する頂点のインデックスは、`polygon.vertices`に入っています。

グラデーションはHSVの色相（`h`）を変えることで、作成しています。
`h`の値は、高さが一番高いところが`1`に、低いところが`0.7`になるように計算しています。
HSVからRGBの変換には、`colorsys.hsv_to_rgb`を使います。BlenderのカラーはRGBとアルファの4つの値なので、` + (1,)`でアルファを追加します。

## ノードの例

下記のようにするとノードだけでもできます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/2baab017-4613-9fa5-4a12-4a75e66fe857.jpeg" width="６00">


以上
HTML　テンプレート

コピペで活用する用です。

```php:hello.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name=”description” >
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  
</body>
</html>
```
kubernetes の finalizers について確認したメモ

メモです。
以下を読んで試した時のメモです。

[Using Finalizers to Control Deletion](https://kubernetes.io/blog/2021/05/14/using-finalizers-to-control-deletion/)

また、そもそも `finalizers` とは、という点は以下などを拝見しました。

[Kubernetes の Garbage Collection](https://qiita.com/shmurata/items/499c8b9c636febef531b)

## 環境

```
$alias |grep kubectl
k=kubectl

$k version
Client Version: version.Info{Major:"1", Minor:"22", GitVersion:"v1.22.4", GitCommit:"b695d79d4f967c403a96986f1750a35eb75e75f1", GitTreeState:"clean", BuildDate:"2021-11-17T15:48:33Z", GoVersion:"go1.16.10", Compiler:"gc", Platform:"darwin/amd64"}
Server Version: version.Info{Major:"1", Minor:"21+", GitVersion:"v1.21.5-eks-bc4871b", GitCommit:"5236faf39f1b7a7dabea8df12726f25608131aa9", GitTreeState:"clean", BuildDate:"2021-10-29T23:32:16Z", GoVersion:"go1.16.8", Compiler:"gc", Platform:"linux/amd64"}
```

## やってみた時のメモ

例えば以下のように `finalizers` が指定された `ConfigMap` を作る。

```
# ConfigMap 作成
cat <<EOF | kubectl create -f -
apiVersion: v1
kind: ConfigMap
metadata:
  name: mymap
  finalizers:
  - kubernetes
EOF

# yaml を確認
$k get configmaps mymap -o yaml
apiVersion: v1
kind: ConfigMap
metadata:
  creationTimestamp: "2022-01-28T22:33:44Z"
  finalizers:
  - kubernetes
  name: mymap
  namespace: default
  resourceVersion: "1123879"
  uid: 18dcafff-ca4a-4ebc-88a8-e11b637610f3
```

`finalizers` がある状態で削除を試みる。

```
$kubectl delete configmap/mymap
```

これは処理が完了しない。
`yaml` として見ると `deletionGracePeriodSeconds` 及び `deletionTimestamp` が増えているが、実際にオブジェクトもまだ存在するままとなっている。

```
$k get configmaps mymap
NAME    DATA   AGE
mymap   0      2m11s

$ k get configmap/mymap -o yaml
apiVersion: v1
kind: ConfigMap
metadata:
  creationTimestamp: "2022-01-28T22:33:44Z"
  deletionGracePeriodSeconds: 0
  deletionTimestamp: "2022-01-28T22:36:42Z"
  finalizers:
  - kubernetes
  name: mymap
  namespace: default
  resourceVersion: "1124503"
  uid: 18dcafff-ca4a-4ebc-88a8-e11b637610f3
```

ブログに記述があるが、`finalizers` があるために削除が完了していない。
ブログでは `kubectl patch` によって `finalizers` を削除することで削除が完了している。
同様のことを `kubectl edit` でやってみる。

```
# finalizers のキーを削除
$k edit configmap/mymap
```

具体的には以下のようにする。

```
# Please edit the object below. Lines beginning with a '#' will be ignored,
# and an empty file will abort the edit. If an error occurs while saving this file will be
# reopened with the relevant failures.
#
apiVersion: v1
kind: ConfigMap
metadata:
  creationTimestamp: "2022-01-28T22:33:44Z"
  finalizers:
  name: mymap
  namespace: default
  resourceVersion: "1123879"
  uid: 18dcafff-ca4a-4ebc-88a8-e11b637610f3
~
```

この後オブジェクトが削除されていることを確認。

```
# オブジェクトも削除される
$k get configmap/mymap -o yaml
Error from server (NotFound): configmaps "mymap" not found
```
Rails Cloud9からローカル環境へ（備忘録）２

#前回の続き
時間がだいぶ経ちましたが前回の記事の続きについて記載していきます。

#環境
・macOS BigSur 11.6
・Ruby 2.5.3
・Rails 5.2.6
・Homebrew 3.2.16

---

#MYSQLのインストール

```
$ brew install mysql
```
PASSを通す

```
$ echo 'export PATH="/usr/local/opt/mysql/bin:$PATH"' >> ~/.zshrc
```
設定を反映

```
$ source ~/.zshrc
```
MYSQLの起動、接続確認

```
$ brew services start mysql
%$mysql -uroot
```

#mimemagicのライセンス更新
```
$ bundle install
```
エラー発生

```
An error occurred while installing mimemagic (0.3.10), and Bundler cannot continue.
Make sure that `gem install mimemagic -v '0.3.10' --source 'https://rubygems.org/'` succeeds before bundling.
```

新しいライセンスのmimemagicをインストール

```
$ brew install shared-mime-info
```

再度

```
$ bundle install
```

成功

```
Bundle complete! 18 Gemfile dependencies, 73 gems now installed.
Gems in the group production were not installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
```

#MY SQLの設定変更
サーバー起動

```
$ rails s
```

MYSQLあたりでエラー発生

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1200881/e15d32f7-d7c9-ebab-fac6-2fb1c50c1836.png)


エラーが発生したファイルがあるか確認

どうやらrailsの`config/database.yml`の設定がおかしいようなので、設定を変更

username、password、socketの修正

```
 username: root
 password: 
 socket: /tmp/mysql.sock
```

#アプリ起動

```
$ rails s
```

エラー発生。データベースを作成していなかった。。。

```
$ rails db:create
$ rails db:migrate
$ rails s
```

`localhost:3000`に接続すると、無事にアプリを起動できました！

いろいろな方の知見をお借りしてなんとかできました。
間違い等あればご指導、ご鞭撻のほどよろしくお願いします。
まだまだ勉強が必要ですね。

#参考

https://qiita.com/tkmd35/items/c26d1dffca4be0a4f017
https://qiita.com/koki0527/items/5eb8d8c1ac56dcd05466
Google SheetsでRSSフィードを取得する IMPORTFEED - 便利関数集

## IMPORTFEED

https://support.google.com/docs/answer/3093337?hl=ja

`=importfeed("https://qiita.com/organizations/works-hi/activities.atom", "items", false, 100)` 

だけでGoogle Sheetsにフィードが取得できる。
なので以下のように一覧できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/2ddb882a-83cb-8258-abd3-cc221639ed17.png)

それをデータポータルに接続する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/16abfbfd-c361-cda9-bd00-d6421b18c1f7.png)

と簡単にRSSリーダーになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/9fd32e78-9dbb-eb35-7a8e-81fd5f71463d.png)


### 参考

https://tonari-it.com/spreadsheet-importfeed-blog/

https://techblog.gmo-ap.jp/2022/01/17/spreadsheet-importfeed-google-apps-script-rss-reader/


## Google Translate 

https://support.google.com/docs/answer/3093331?hl=ja

`=googletranslate(訳したいセル,"ja","en")`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/29272720-8967-ca50-d392-57b57a8af3be.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/98a7e230-b7bf-dfe7-245c-4df3c0c95bd4.png)


### 参考

https://ej.alc.co.jp/entry/20170303-gnmt-spreadsheet


## IMAGE

https://support.google.com/docs/answer/3093333?hl=ja

https://support.google.com/docs/answer/3093333?hl=ja&ref_topic=3105411

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/262049b4-4607-d1b3-846d-7248da672403.png)

### 参考

https://qiita.com/kawamasa/items/730969d164a6ab6d90c8
IntelliJ の Vue3 の 新規 File と Live Template 設定

# 概要

Vue3 の開発効率を上げるための、新規コンポーネントのテンプレートと、Live Template のカスタマイズをメモしておく。


# vimport (Vueコンポーネントのimport)

```:タブ押す前
vimport
```
```js:タブ押した後
import  from '@/components/[カーソル].vue'
```
```js:Componentのパスを書くと左辺も勝手に補完される
import Ccc from '@/components/aaa/bbb/Ccc.vue'
```


### カスタマイズ箇所

Editor > Live Templates > Vue > vimport を更新

### 実装内容

##### Template text

```
import $ITEM$ from '@/components/$MODULE$.vue'
```

##### Variables

|Name  |Expression|Default value                      |Skip if defined|
|------|----------|-----------------------------------|---------------|
|MODULE|          |                                   |               |
|ITEM  |          |regularExpression(MODULE,"^.*/","")| v |




# Vue Single File Component

`New` > `Vue Component` で作成されるファイルのテンプレートをカスタマイズ

### カスタマイズ箇所

`Editor` > `File and Code Template` > `Vue Single File Component`


### 実装内容

```vue
<template>
  <div>
    #[[$END$]]#
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, withDefaults } from 'vue'

const props = withDefaults(defineProps<{
}>(), {
})

const emits = defineEmits<{
  (e: '', value: ): void,
}>()
</script>

<style scoped>

</style>
```

- `Reformat according to style` は OFF
- `Enable Live Templates` は ON
【JavaScript】コールバック関数について

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## コールバック関数について

### コールバック関数とは
コールバック関数とは、関数を呼び出す時に、引数に指定する別の関数のことです。
以下の`printHoge`がコールバック関数となります。

```js:コールバック関数

 // printHoge関数を定義
 const printHoge = () => {
  console.log('Hoge');
 };

 // callback関数を呼び出すcall関数を定義
 const call = (callback) => {
  const.log('コールバック関数を呼び出す');
  //callbackを呼び出し
  callback();
 }:

 // 引数にprintHogeを渡して、関数callを呼び出し
 call(printHoge);


/*
console
コールバック関数を呼び出す
Hoge
*/ 


```
Dockerfile の書き方調査

#Dockerfile 命令の書き方

##FROM


```Dockerfile.
FROM <Image名>
```

Image名 は公開リポジトリから取得するのがお手軽。

> [DockerHub](https://hub.docker.com/search?type=image)

python を使用する例は下記の通り。

```Dockerfile.
FROM python
```

##ENV

```Dockerfile.
FROM <Image名>
ENV <キー>=<値>
```

下記設定で立ち上げたコンテナで printenv を実行すると「HOGE=/var/tmp/」が設定されているることを確認できる。
また、 ENV で定義した環境変数は build 中に$<キー>で使用可能となる。※後述の ADD で使用例を記載

```Dockerfile.
FROM python
ENV HOGE=/var/tmp/
```

##ADD

```Dockerfile.
FROM <Image名>
ADD <追加元> <追加先>
```

<追加元> にはファイル、フォルダ、リモートファイルを指定することが可能で、それらを <追加先> で指定したイメージのファイルシステム上のパスに追加することができる。

下記例では、コンテクスト内に配置している test.txt の追加と、 URL 指定で GitHub 上のファイル追加を行う定義をしている。
URL 指定の例は ENV で定義した環境変数を<追加先>として指定している。

```Dockerfile.
FROM python
ENV HOGE=/var/tmp/
ADD test.txt /var/tmp/
ADD https://github.com/pypa/get-pip/raw/3cb8888cc2869620f57d5d2da64da38f516078c7/public/get-pip.py $HOGE

```

> コンテクストは正確に理解できていないが、 Dockerfile を配置しているディレクトリが対象となる模様・・要調査
> 動きとしては Dockerfile と同じ階層に test.txt を配置しておくことでイメージ内にファイルを追加できる。


##参考
> https://docs.docker.jp/engine/reference/builder.html
FigmaのStorybookプラグインで制作フローをこんな風に変えられるかもしれない

## この記事の概要

StorybookのFigmaプラグインについてsneak peekの記事が出ました。

https://storybook.js.org/blog/figma-plugin-sneak-peek/

こちらを読んで、今後こういう変化が起きたら良いなあと思っている内容をまとめてみます。

あくまで予想というか、妄想というか、そういった記事です。

## プラグインの簡単な説明

元記事を読むに、おおよそ以下のようなことができそうです

- Storybook上のStoryとFigmaのComponentが結びつく
- Main componentとStoryが結びつけば、それらのInstanceやVariantsにも紐付く
- Inspect機能のようなものがあり、Storybookを開かずともFigmaとの比較ができる

## 思い描く将来のフロー

1. Figmaでさっとモックアップを作る
    1. 0から1を作り出すとか、低精度でバリエーションを出すフェーズはFigmaの従来の操作性を活かす
1. ひとしきりのモックアップが完成した時点で、Componentをベースにコードを書く
    1. 1つ1つの画面単位での実装はせず、まずは全てのComponentをコードに落とし込むイメージ
1. StoryをFigmaに逆輸入して、実際のデータをもとにした挙動や各種stateを確かめる
    1. 静的モックアップでは限界のある部分をStorybookとの連携で拡張する
1. 問題なければそれぞれの画面を実装する
    1. 2で作ったコンポーネントをレイアウトするのみ、といったイメージ

## これができたら良いなと思う理由

- 静的モックアップ→コードにせよ、コード→静的モックアップにせよ、一方通行で完成させるのは難しい
    - ものを作るにあたって、どうしてもいったりきたりは発生する
    - むしろそういう営みを挟んだ方が最終アウトプットは良いものになるまである
    - そのため、上記のような`静的モックアップ→コードベースのコンポーネント一覧→stateの網羅されたモックアップ→Production`と進められると良いのではないかという予想
- 複数のサービスをまたぐと面倒
    - 一応FigmaとStorybookという2つのプロダクトを使うものの、プラグインとして利用可能であれば実質的な隔たりは少なそう
- ProductionとFigmaの乖離はなくしやすそう
    - Productionにも使っているデータであるStoryをFigmaにimportして使えるのであれば、Figmaのためだけのメンテナンスはあまり要らないのでは？

## 最後に

early accessのために準備はしましたが、いつ頃連絡が来るのか、抽選なのか先着なのか、何も分かっていません。

もし早めに試せることがあればまた記事にしようと思います。
Wordの文書をPDF化したときに図形が消えた話

# 問題

Wordを使用してレポートを書いていた。慣れておらず、図のキャプションは、とりあえず図形に文字を入れたものを使っていた。
レポート書けたからPDFで出力して確認してみると、図形で作ったキャプションだけが消えていた。

# 解決

「文字列の折り返しが行内になっていないからいけないのかな」とか「図形はPDF化したとき消えてしまう仕様なのかな」とかいろいろ考えて、探っているうちに答えが分かりました。

Macの外観モードがダークになっており、作業しているWordの背景は暗い色になっていました。そのため、図形の中の文字は"白色"でした。
そうです。PDFにしたら背景白になりますね。もちろん白色の文字は読めなくなります。

# 最後に
信じられないくらい馬鹿なミス。面白いネタができたと思って書きました。
でも同じ状況になっている人がいて、この記事のおかげでその方の解決に至るまでの時間が短くなればなと思っております。こんなしょうもないミスをする人が自分の他にいたなら。。。
[JS]HTMLの要素を取得する方法

アウトプットとして

JavaScriptの特徴として「HTMLの要素をJavaScript上で取得し操作する」というのがあるので、HTMLの要素を取得する方法について説明できたらと。

#HTMLを取得する
###documentオブジェクト
ブラウザ上の情報を操作する事ができるオブジェクトです。
documentオブジェクトを用いてHTMLを取得する方法は大きく分けて3つ

①id名から取得する
②class名から取得する
③セレクタ名から取得する

##①id名から取得する
###document.getElementById("id名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つです。引数に渡したidを持つ要素を取得します。

```javascript:例
//id名がhogeの要素を指定する場合
document.getElementById("hoge")
```

##②class名から取得する
###document.getElementsByClassName("class名")
classを指定して取得する際に使用します。気をつけたいのは、`getElements`と複数形になっていることです。
id名はhtml上に必ず1つしか存在しないため、document.getElementByIdを用いると1つの要素を取得することになります。一方、HTML上に同じclass名を持つ要素は複数存在することが考えられるため、getElementsByClassNameの場合は同じclassを持つ要素を全て取得することになります。

```javascript:例
//class名がfugaの要素を指定する場合
document.getElementsByClassName("fuga")
```

##③セレクタ名から取得する
###document.querySelectorAll("セレクタ名")
セレクタ名とは、CSSでスタイルを適用するために指定している要素です。HTML上から、引数で指定したセレクタに合致するものをすべて取得します。

頻繁に使用するセレクタ名として、class名、id名、HTMLタグがあります。
書き方として、class名は`(".class名")`、id名は`("#id名")`、HTMLタグは`("タグ名")`と表記します。

```javascript:例
//class名がfugaの要素を指定する場合
document.querySelectorAll(".fuga")

//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")

//h1タグの要素を指定する場合
document.querySelectorAll("h1")
```

##おまけ
###querySelector
querySelectorを用いれば、HTML上から引数で指定したセレクタに合致する要素のうち一番最初に見つかった要素1つを取得することもできます。

```javascript:例
//id名,class名,タグ名の指定方法は、querySelectorAllメソッドと同じ
document.querySelector("セレクタ名") 
```

##まとめ

・documentオブジェクトはブラウザ上の情報を操作する事ができるオブジェクト。
・documentオブジェクトを用いてHTMLを取得する方法は大きく分けて3つ
①id名から取得する(document.getElementById)
②class名から取得する(document.getElementsByClassName)
③セレクタ名から取得する(document.querySelectorAll)

　
JSの苦手意識の原因として「メソッドが長いのでコードが難しそうに見えること」なので、一つ一つ噛み砕いて読めるようになりたい・・・！
※補足等ありましたらコメントいただけると幸いです。
WindowsコマンドプロンプトからPython実行selenium driverの警告を消す 

seleinum driverを使ってブラウザ操作するPythonコードを
コマンドプロンプトから実行したときだけ
コンソールに警告（ワーニング）が大量に出ることがある。これを消す対策。

環境構築するたび忘れてしまいネット検索で探すハメになるからメモ。
動作検証済だが対策はネット記事から拾ったものである。感謝。

前提
AnacondaでインストールしたPython
pipでインストールしたseleniumのバージョンは3.141.0


環境１：
Python3.6
Windows7

モジュール内
\site-packages\selenium\webdriver\common\service.py

修正前

```
            self.process = subprocess.Popen(cmd, env=self.env,
                                            close_fds=platform.system() != 'Windows',
                                            stdout=self.log_file,
                                            stderr=self.log_file,
                                            stdin=PIPE)
```

修正後

```
            self.process = subprocess.Popen(cmd, env=self.env,
                                            close_fds=platform.system() != 'Windows',
                                            stdout=self.log_file,
                                            stderr=self.log_file,
                                            creationflags=0x08000000,  # !!! 追加 !!!
                                            stdin=PIPE)
```



環境２：
Python3.7
Windows10

上の対策では消えなかったが、下の対策（各々のPythonコード内）でワーニングが消えた。

```
    from selenium.webdriver.chrome.options import Options
    from selenium.webdriver import Chrome

    options = Options()
```

↓以下を追加

```
    options.add_argument('--log-level=3')
    options.add_experimental_option('excludeSwitches', ['enable-logging'])
```

↑ここまで

```
    driver = Chrome(options=options)
```

ワーニングが消えてスッキリ。
なぜ消えるのか、なぜ環境で違うのかは知りません。
rubyの例外処理のまとめ

ruby silverの勉強をしていく中で間違えたところがあったのでその解説記事を挙げていきます。
例外処理は、rubysilverでは、この問題は頻繁に出てくるので重要な問題です。
##例外処理とは？
例外処理とは、
**もともと想定されている値などが入力されたときに、どんな処理をするのか？**を書くことをいうんです。
例えば、よく知られているのはNomethoderror, Nameerror, Argumenterror, Syntaxerror などがありますね。
これも立派な例外処理なんですね。



##例外処理の書き方
結論からいうと、以下のような書き方になります。

```
begin
  実行するコード
rescue
  例外が発生した時に、実行するコード
else
  例外が発生しなかったときに、実行するコード
end
```

意外とシンプルなんですね。
では、実際に具体的なコードを書いてみていきましょう！

```
begin 
 puts hoge
rescue => e
  p e
  p e.class # 例外の種類
  p e.message # 例外のメッセージ
else
  p '例外は発生しませんでした'
ensure
  p 'プログラム終了'
end

#<NameError: undefined local variable or method `hoge' for main:Object>
NameError
"undefined local variable or method `hoge' for main:Object"
"プログラム終了"
=> "undefined local variable or method `hoge' for main:Object"
```

例外処理では、変数名をつけて、変数名でエラー情報を取得することがよくあります。その変数名にはeがよく使われます。
今回のコードを解説すると、
2行目のhogeというのは、変数です。hogeは定義されていないので、Nameerrorが出力されることが予想されます。
これを3行目で、変数eに格納します。
rescue内では、エラーが発生した時に実行するコードが書かれています。その中ではクラス名を返すメソッドや、メッセージを返す返すメソッドが記述されています。

7行目のelseでは、例外が発生しなかった場合になされる処理です。つまり、今回のhogeが定義されていたら、rescue内は実行されないので、
else内の処理がされます。

9行目のensureでは、例外の有無に関わらず、最後に実行したい処理です。
今回のコードでいえば、例外があるにしろ、無しにしろ、「'プログラム終了'」を出力します。


他にも以下のようなメソッドがありますので、公式ドキュメントやググって調べてみてください。

| メソッド | 処理 |
|:|:-:|
|  Object#class |エラーのクラスを返します。 |
|  Kernel#raise |エラーを発生させます。  |
|  Exception#backtrace |  エラーのバックトレースを返します。  |
|  Exception#message | エラーのメッセージを返します |

##今回の問題

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485775/1c483dbe-05c1-2006-472f-135d122de43d.png)


上から順に説明していきましょう。
exceptionsという変数に、以下3行を代入しています。


beginからrescueまでは、実行したい処理でしたね。
今回の実行したい処理はraiseです。raiseは意図的に実行したい処理のことです。
本来であれば、

```
raise NomethodError
```
などと書かれていますが、今回はraiseしか書かれていません。
このように引数が何も書かれていないときは、**RuntimeError**が発生します。
そのため、今回の問題ではRuntimeErrorで、それの出力する日本語が、
"特定の例外が発生しました"
が今回の答えなんです。

以上です。
何か間違いがございましたら、ご教示いただけますと幸いです。

【追記】
上の書き方以外の例外クラスを捕捉する際の書き方は以下の通りです。

```
#書き方➀
begin 

rescue NomethodError, NameError

end

#書き方➁
begin 

rescue *[NomethodError, NameError]

end
```
JUnitでのユニットテストに入門してみた


# はじめに
初めまして、Androidエンジニアのバナナと申します。
Android開発の経験年数はそれなりになるのですが、テストコードを書くことなくここまできてしまったため、今年こそはという思いでテストについてまとめていければと思っています。
Androidテストのバイブルと言われている[Androidテスト全書](https://peaks.cc/books/android_testing)を参考に進めていきます
まずは、JUnitを使って簡単なユニットテストをしていきます。　


# テスト対象クラスの作成
今回は簡単な入力ボックスを想定し、8文字以上の英数字の入力であれば真を返すメソッドを持つクラスを作成していきます。

```kotlin:InputChecker.kt
class InputChecker {
    fun isValid(text: String): Boolean {
        if (TextUtils.isEmpty(text)) throw IllegalArgumentException("Cannot be blank")
        return text.length >= 8 && text.matches(Regex("[a-zA-Z0-9]+"))
    }
}
```

# テストクラスの作成
次に、テストクラスの作成をしていきます。
AndroidStudioに上記のテスト対象クラス名にカーソルを合わせて、command+shift+tを押すとテストクラス作成のダイアログが出るため、それに沿ってテストクラスの作成をします。
クラス名は慣習的にテスト対象クラス名+Testとなっているようなので、今回の場合は`InputCheckerTest`とします。
作成されたテストクラスは下記のようになっています。

```kotlin:InputCheckerTest.kt
class InputCheckerTest {

    @Before
    fun setUp() {
    }

    @After
    fun tearDown() {
    }

    @Test
    fun isValid() {
    }
}
```

各アノテーションの役割としては以下の通りです
@Before: テスト実行前に呼び出される。テスト対象クラスのインスタンスなどはここで初期化しておく 
@After: テスト実行後の後処理を書く場所。どういうケースで使うのかはまだわからない
@Test: 実際のテスト処理を書く場所。

今回は@Beforeのタイミングでテスト対象クラスのインスタンス生成のみしておきます。

```
class InputCheckerTest {

    lateinit var target: InputChecker

    @Before
    fun setUp() {
        target = InputChecker()
    }
```

# テストケースの列挙
今回は`8文字以上の英数字`という入力を正常値として扱うため、境界値である7と8を用いて下記のテストケースを検証していきます。

- 7文字の入力をした際に戻り値がfalseであるか
- 8文字の半角英字を入力した際の戻り値がtrueであるか
- 8文字の数値を入力した際の戻り値がtrueであるか
- 8文字の英数値混合の入力をした際の戻り値がtrueであるか
- 8文字の英数字以外の値を入力した際の戻り値がfalseであるか

# テストコードの記述&実行
JUnitのassertThat関数を使い、下記のようなテストコードを記述しました。

```kotlin
    // 7文字以下の際にfalseが返るか
    @Test
    fun isValid_givenLessThan8_returnFalse() {
        val actual = target.isValid("aaaaaaa")
        assertThat(actual, `is`(false))
    }

    // 8文字以上の英字のみの際trueを返すか
    @Test
    fun isValid_gibenAlpha_returnTrue() {
        val actual = target.isValid("aaaaaaaa")
        assertThat(actual, `is`(true))
    }
    
    // 8文字の数字のみの際にtrueを返すか
    @Test
    fun isValid_givenNumeric_returnTrue() {
        val actual = target.isValid("01234567")
        assertThat(actual, `is`(true))
    }

    // 8文字以上の英数字の組み合わせの際trueを返すか
    @Test
    fun isValid_givenAlphaNumeric_returnTrue() {
        val actual = target.isValid("abcd1234")
        assertThat(actual, `is`(true))
    }

    // 8文字以上だが半角英数以外の値を入れた際にfalseを返すか
    @Test
    fun isValid_givenInValidCharacter_returnFalse() {
        val actual = target.isValid("ああああああああ")
        assertThat(actual, `is`(false))
    }
```

クラス名横の実行ボタンをおし、上記を実行した結果は下記の通りです
![スクリーンショット 2022-01-04 15.14.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466399/1d31199e-eb65-13c3-537c-211341c94524.png)
全てのテストケースで、期待通りの戻り値が返ってきていることを確認できました。

# 終わりに
今回は、JUnitを使った初めてのユニットテストに入門しました。
とりあえずはもっと理解を深めていきたいと思います。
Documentation with Sphinx (For bigginer)

# Introduction
I am a newbie of Sphinx, but I think this tool is useful for documentation. 
This article is written as my technical note for my future work.


# My environment
* Windows 10
* Powershell
* pip v19.2.3
* python v3.7

# Procedure
## Installing Sphinx 
I opened powershell, and run the following command. (Python 3.7 is already installed in my PC.)

```
pip install sphinx
```

## Starting a project
After moving to the working directory, run the following command to start documentation.

```
mkdir mydoc
cd mydoc
sphinx-quickstart docs
```
![2022-01-12-sphinx01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/208a1ce3-a285-9b48-e720-ef2e53f194ae.png)

## Start Editing
### style setting
Open source/conf.py and change the html_theme under "Options for HTML output" if necesssary. The list of the themes can be found here, [buitin themes](https://www.sphinx-doc.org/en/master/usage/theming.html#builtin-themes).

### Making a structure
Open the index.rst in the source root, and edit its toctree as below.
 
```
.. toctree::
   :maxdepth: 2
   :numbered:
   :glob:

   chapter1/index
   chapter2/index
```
Add chapter index when necessary.

Prepare subdirectory for each chapter and write a index.rst and relevant doccument. The chapter index (chapterX/index.rst) may include toctree as below.

```
.. toctree::
  :maxdepth: 1

  1-1
  1-2
```

### Code blocks
If we want to insert code blocks during rst editing, we can insert code block with following expression.

```
.. code-block::

   (Your code)
```


### Images
After storing the images into a certan place, a image can be displayed with the following expression.

```
.. image:: ./2-5.png
   :scale: 75%
   :align: center
```

## Building html
From the source, the document will be built via following command.
As I am a windows user, please note that I ran "make.bat" in the powershell.

```
cd docs
./make.bat html
```
# Reference
* https://www.sphinx-doc.org/en/master/index.html
* https://planset-study-sphinx.readthedocs.io/ja/latest/index.html
* https://www.sphinx-doc.org/en/master/usage/theming.html#builtin-themes
Qiskit Gradient Framework はなぜ遅いのか

# Qiskit Gradient Framework は遅い？

量子プログラミングSDKであるQiskitにおいて、その勾配計算(qiskit gradient framework)が妙に遅いことを以前の記事で指摘しました。
[QiskitでQAOA w/勾配降下](https://qiita.com/notori48/items/905f55bc7215fdd05817)

自分で組んだほうが速いという有様です。
[Qiskitで勾配降下法を実装してみる](https://qiita.com/notori48/items/0ab84113afc9204d3e90)

この理由を調べました。
結論は、「オブザーバブルを分解していることにより、回路実行数が数倍に膨れ上がっているから」です。

# 勾配計算に必要な回路実行数

ここでは勾配計算アルゴリズムとしてシンプルな　パラメータシフト　を考えます。
パラメータシフトは数値差分法に（見た目は）よく似た勾配計算手法です。ざっくりこんな感じ。
$\nabla_{\theta}\<H\> = \<H(\theta+\pi/2)\> - \<H(\theta)\>$
$\theta$は量子回路に埋めておいたパラメータです。$\<H\>$はそのような量子回路から得られる出力（オブザーバブル期待値）です。
$\<H\>$を最小にするように$\theta$をgradient descentでupdateしていきます。

勾配計算に上記回路を何度実行する必要があるか考えます。
$\nabla_{\theta}\<H\>$を計算するには、$\<H(\theta+\pi/2)\>$と$\<H(\theta)\>$を計算すれば良いので、量子回路を2度実行すれば良いでしょう(Shotは除きます)。
もし$\theta$が$p$個ある場合、偏微分の考え方から微分計算は独立にやればよいので、回路を$2p$回動かせば良いことになります。[^1]
実際、pennylane SDK ではそのような実装になっています。

しかし **qiskit gradient framework は違う挙動をします。**

# qiskit gradient frameworkの挙動

具体的に、$H = Z_{0} \otimes Z_{1} \otimes I_{3} + I_{0} \otimes Z_{1} \otimes Z_{2} $ というオブザーバブルを考えましょう。
このようなオブザーバブルは、例えばマックスカット問題をQAOAで解く場合に登場します。
$\<H\>$を知るには何度回路を実行すればよいでしょうか？
答えは、1度だけ回路を実行すればよいはずです。

しかしqiskit gradient frameworkでは、これを$Z_{0} \otimes Z_{1} \otimes I_{3}$と$I_{0} \otimes Z_{1} \otimes Z_{2}$に**分解**して、2度の回路実行をします。
何をするにも、もれなく2倍です。
（いちおう、実機実行を意識して・・・という気持ちはわかる）

すると、勾配計算においても、もし$\theta$が$p$個ある場合、回路を$2*(2p)$回動かすことになります。
もっと一般に、オブザーバブルが$k$個のパウリ積の和であるとき、回路を$k*(2p)$回動かすことになります。
$k$が大きいと、勾配計算の計算量は膨れ上がってしまいます。

具体的に、例えば10ノードのフルメッシュのMAXCUTを考えますと、辺の数は$10*9=90$あります。
これをQAOAで解く場合、オブザーバブルは$k=90$個のパウリ積からなります。
もし3レイヤーのQAOAであれば、パラメータ数$p=2*3=6$となります。[^2]
すると、

pennylaneのgradient計算：回路実行数 $2p = 12$
qiskit gradinet framework のgradient計算：回路実行数 $2pk = 1080$

となります。
ひどい差ですね。。

なお、**pennylaneであっても、pennylane-braketなどのプラグインを通してリモートシミュレータ(SV1等)に投げると、braketの仕様(SV1の仕様?)としてオブザーバブルが分解されてしまい、qiskit gradinet framework と同様に回路実行数がえらいことになります。これだけで、ローカルPCよりも遅くなったりします。**

SDKがどうこうではなく、その裏の実行がどうなっているのか　が大事です。注意しましょう。
qiskit gradient framewaork でも、オブザーバブル分解を回避する方法があれば良いでしょう。
そのような方法はまだ見つけれていませんが・・・

なお、pennylaneに実装されている　adjoint や　backpropを使うと、パラメータ数にすら無依存に
勾配計算が可能になります。（1度の回路実行でよくなります）
パラメータ数が多いと劇的に早くなるので、ぜひ使ってみてください。
[PennyLaneによる量子機械学習 ~勾配計算の匠~](https://qiita.com/notori48/items/14655a7aa9306ec80e26)


# まとめ
勾配計算は回路実行数が膨れ上がる傾向にありますので、裏の計算がどうなっているのか、注意しましょう。

[^1]: なお、同一のパラメータが回路の複数箇所に埋まっている場合、それらを独立なものとみなして微分を計算した後に和するようです。
[^2]: 横磁場と縦磁場で x2 になってます。$\gamma$と$\beta$です。