OmniAICreator/Qiita-1.07M huggingface dataset:
SpeceliftでGoogle CloudのIaC(Terraform)のCI/CDをサクッと試す

IaCのCI/CDツールとしては、[Terraform Cloud](https://cloud.hashicorp.com/products/terraform)が有名な気がするが、[Specelift](https://docs.spacelift.io/)というツールを試してみた。

# 準備
## Speceliftのアカウント発行

[Top Page](https://spacelift.io/)からアカウントを作成する。今回はGitHubアカウントを利用した。
リポジトリは、デフォルトではAllになっているが、必要なもののみにした方が安全と思う。

## Stack作成
![Stacks · pict3 2022-07-03 17-14-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51320/c3bc4fd5-4572-9f47-9acf-8307bfb1c0f6.png)

Speceliftにて操作する。
右上のボタンからStackを作る。
設定内容はシンプルなので、直感的に進められると思う。自分自身が少し躓いたのが、今回の検証用にリポジトリを作成した際に、最初は空のままだった。そのため、ブランチがブランクのままで進めることができなかった。
とりあえず、README.mdをmainブランチにPushすることで進めることができた。

## Google CloudのIntegration設定

Speceliftにて操作する。
作ったStackのSettingタブからIntegrationsパネルを開く。
DropDownリストからGoogle Cloud Platform（余談だが、これは旧名で今はGoogle Cloudと呼ぶべき）を選択する。
サービスアカウントが表示されるので控えておく。

## IAMのprincipalを追加

Google Cloudコンソールから操作。
サービスアカウントを登録する。公式ガイダンスではOrganizationレベルでの設定が例示されているが、本当にそのニーズがない限りはやめた方がいいと思う。そしてそのニーズが発生することはあまりないと思っている。
今回は、プロジェクトレベルで設定した。


以上で、準備完了！

# CI/CDを試す

## Terraformテンプレートの作成
適当なTerraformテンプレートを作る。
ここでは以下のようなものを作った。

```
provider "google" {
  project = "<Your Project>"
}

resource "google_storage_bucket" "MULTI_REGIONAL" {
  name     = "<Bucket name>"
  storage_class = "MULTI_REGIONAL"
  location = "us"
}

```

## TerraformテンプレートのPUSH

リポジトリにPUSHすると、SpeceliftのStackが発動する。Speceliftのサービス側でコンテナが生成されて実行されているらしい。
TerraformのPlanが終わると、SpeceliftにてConfirm待ちとなる。

![redeploy bucket · test google cloud 2022-07-03 16-35-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51320/43fc6887-5ee7-7854-4eaf-1542dd8d2d41.png)

Planの内容を確認して、Confirmボタンを押下すれば、Applyされてリソースが生成される。

コードを変更して再度PUSHすれば、もう一度、Stackが発火する。

## Speceliftで確認

StackがCompleteされると共に、他のUIにも反映される。

こちらは、リソース一覧。ユーザーとそのユーザーが作成したリソースが紐づけられて表示される。
![Spacelift 2022-07-03 17-41-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51320/45fafd07-a54f-c25e-427f-c2672f3f6561.png)

こちらは、実行履歴。ユーザーまたはコミットが、どのStackを発動させたのか、またその結果を確認できる。
カーソルを合わせると、具体的なユーザー名も確認できる。
![Spacelift 2022-07-03 17-42-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51320/1b0a79ec-9c60-57a4-f3a7-0ac395b652be.png)

# まとめ
CI/CDの構築は、実際には運用まで考えた設計をしないと、将来破綻することが多い。
とくにインフラ部分まで含めたCI/CDを作る場合、同一のパイプラインに集約するのか分割するのか、そもそも本当にインフラ部分もIaCを継続的に管理していくのか考えるべきことは多い。

ただ、サクッと試す分には非常に簡単で、UIも直感的で綺麗なので興味のある方は試してみましょう！
Elasticsearchで見る検索エンジンの仕組み(6): Lukeでインデックス操作編

##### [前回] [Elasticsearchで見る検索エンジンの仕組み(5): スコアリング編](https://qiita.com/mingchun_zhao/items/fec5cde5053dfbdf87ed)

## はじめに

前回は、全文検索のスコアリングを理解しました。
今回は、Lukeを使用し、Elasticsearchインデックスを覗いてみます。

## Lukeとは

- Apache Luceneのインデックスを閲覧するツール
- Apache Lucene 8.1以降に同梱されている

## Lukeをインストール

### Apache Luceneをインストール

- 最新の[Lucene 9.2.0](https://lucene.apache.org/core/downloads.html)をダウンロード

- `lucene-9.2.0.tgz`を展開し、以下luke.cmdを実行
    - `lucene-9.2.0\bin\luke.cmd`

- インデックスのディレクトリパスを選択し、`OK`
        - 例: `elasticsearch-8.3.1\data\indices\9bB7DSaISvShB2XHCWlloA`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/0ec0dd56-e4f7-19a9-04a4-245a303534c6.png)

- Overviewタブで、フィールドを選択し、`Show Top Terms`をクリックすると、トークン出現頻度順にランク表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/1ed1bfa2-231e-bad0-e3b0-cbb58a031fb8.png)


- Commitsタブで、インデックス世代別詳細情報を確認できる
    - 各種物理ファイル
    - ドキュメントの数

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/4e329a0d-7797-61cc-038c-920039677195.png)

- Analysisタブで、アナライザーを試す
    - `Char Filters`
    - `Tokenizer`
    - `Token Filters`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/021c21d6-9bf6-8118-e910-0e4e3e655f17.png)


## おわりに

Lukeツールを使って、Elasticsearchインデックスを操作してみました。
次回も続きます。お楽しみに。

##### [次回] [Elasticsearchで見る検索エンジンの仕組み(7): マッピング編](https://qiita.com/mingchun_zhao/items/ff5b538d27d31e5ef6da)
Windows11でClassic ASP（レガシーASP）実行環境を構築する

# はじめに
↓過去に書いた記事のアップデートです。

https://qiita.com/danishi/items/ded2131eefbe50c1e567

未だに使われるところでは使われているClassic ASP（[Active Server Pages](https://ja.wikipedia.org/wiki/Active_Server_Pages)）。
VBScriptやJScriptでサーバーサイド処理を記述して、IIS上で動くWebアプリを作ることができる技術です。

2000年以降一度もアップデートされてない枯れた技術ですが、Windows11でも実行環境を整えることができるのでその手順を紹介します。

# IISの有効化

IIS（Internet Information Services）はWindowsに標準搭載されているWebサーバ。
ASPはこれじゃないと動かせないので（頑張ればApacheでも動かせるらしい）、まずはIISを有効化する。

コントロールパネルの「プログラムと機能」から「Windowsの機能の有効化または無効化」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/d17f26b5-985f-9d1a-0215-55cc3d7ba073.png)

「インターネットインフォメーションサービス」にチェックを入れる。
下層の機能にも勝手にチェックが入るが「ASP」にはチェックが入らないので自分で入れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/89f7f057-5c3f-3422-0857-2996ba344efd.png)

OKを押してしばらく待つとIISが有効化される。

IISを有効化するとデフォルトのWebサイトが構成されるので、ブラウザで「[http://localhost/](http://localhost/)」にアクセスする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/a1949121-1b47-8a20-0801-f777f29d9f97.png)

IISが立ち上がってることが確認できた。
（デフォルトサイトは80番ポートで構成されるので、他のアプリとかが80番ポート使ってるとうまくいかないかも）

# Classic ASPを動かす

デフォルトページの階層が「`C:\inetpub\wwwroot\`」なので、ここに適当なASPファイルを作る。

```html:index.asp
<html>
<body>
<%
Response.Write "<p>Hello Classic ASP!</p>"
%>
<p><%= Now() %></p>
</body>
</html>
```

「[http://localhost/index.asp](http://localhost/index.asp)」にアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/7fee127e-94b0-54fc-097d-a9a3ca54ea7c.png)

これで最低限のASPの実行環境は整う。

# IISの設定

ただし、動かしたいASP Webアプリの構成によってはいくつか追加でIISの設定をしないと動かない場合がある。

IISマネージャーを起動する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/59b2bce7-79c9-ed3d-e9fa-83e254f765e1.png)

Windowsキー＋Rキーで起動できる「ファイル名を指定して実行」に`inetmgr`と入力して起動すると簡単。

![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/43f465f5-4422-8e3e-e4bb-a7d6abcfa464.png)

## 64bit環境で32bitの外部コンポーネント（DLLなど）を呼び出している場合

Server.CreateObject()のところで、
「Microsoft VBScript 実行時 エラー '800a01ad' ActiveX コンポーネントはオブジェクトを作成できません。」
というエラーがでる。

「アプリケーション プール」を選択しサイトに指定している「アプリケーション プール」を選択。
右クリックから「詳細設定」を開き、32ビットアプリケーションの有効化を「True」にする。

![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/096fc7b4-d99f-dc41-b603-13ec9b3e484b.png)

32bit環境で動かしている場合は設定の必要はない（多分設定できない）。

## ドキュメントルートより上位の階層のファイルを読み込んでいる場合

デフォルトの設定では、ドキュメントルートより上位階層のディレクトリを参照することができない。
ドキュメントルートより上位階層のインクルードファイルなどを読み込んでいるWebアプリの場合、これを許可する必要がある（ディレクトリトラバーサル攻撃の危険性が高まりセキュリティ的によろしくないので本来は仮想ディレクトリで参照したほうがよい）。

サイトを選択し「ASP」を選択する。
ASPの構成プロパティが表示されるので、その中から「親パスを有効にする」を選び「True」にする。

![{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96507/fc88d326-0c8a-9a0f-7955-2616e7852402.png)

---

最新バージョンでは試してないですがWindows Serverでも「役割と機能の追加」から同じような手順で実行環境を用意できます。
Ruby 練習問題２ ~二重ハッシュ~

こんにちは、プログラミング初学者"fujitacoma"です！

今回は、Ruby練習問題シリーズの２回目です。
1回目より少しは難易度上がったかな、、？

それでは早速始めます！

# 問題
配列の内部に、複数のユーザーの情報をハッシュとして持つ変数user_dataがあります。
```ruby
user_data = [
 {user: {profile: {name: 'George'}}},
 {user: {profile: {name: 'Alice'}}},
 {user: {profile: {name: 'Taro'}}},
]
```
user_dataを利用して、全てのユーザーの名前だけが出力されるようにRubyでコーディングしてください。
ただし、出力結果は次のようになるものとします。
```
George
Alice
Taro
```


# 解答と解説

### 模範解答
```ruby
user_data.each do |u|
  puts u[:user][:profile][:name]
end
```
もしくは
```ruby
user_data.each{ |u| puts u.dig(:user, :profile, :name) }
```

### 解説
ハッシュから特定の値を取得する場合は、その値に対応するキーを指定します。
以下の書き方で取得ができます。
```
ハッシュ[取得したい値のキー]
```
また、二重ハッシュから特定の値を取得する場合は、取得したい値のキーまで連続して指定すると取得できます。
```
ハッシュ[取得したい値のキー][取得したい値のキー]
```
今回取得したい値は、George, Alice, Taroという値です。
よって、取得したい値に対応するキーはnameというキーだということが分かります。
そのため、nameというキーまで連続して指定すると、George, Alice, Taroという値を取得できます。
```ruby
ハッシュ[:user][:profile][:name]
```
また、今回は配列の中にハッシュが格納されています。
そのため、each文でハッシュの1つ1つを取り出した上で、上記の記述を行うことが必要です。
```ruby
user_data.each do |u|
  puts u[:user][:profile][:name]
end
```
発展的な別解として、digメソッドを用いても取得できます。
digメソッドはRubyに標準で組み込まれているメソッドで、多重階層にあるハッシュの値をまとめて取得できます。

# 最後に
いかがでしたでしょうか！
eachメソッドを使う際はいつも||の中の変数名を考えすぎてしまいます。笑

今回、別解として出てきたdigメソッドも便利なメソッドですので、どこかで記事にできればと思います！

ここまでお読み頂き、有難うございました！
flutter で iosの実機テストをするまで



## 実機テストの手順

```shell
$ flutter clean

$ flutter build ios
```

次のコマンドで利用可能なデバイス一覧を確認する。

```shell
$ flutter devices

iPhone 13 Pro (mobile) • A15A87AB-EE19-477A-8823-1371F4FF61D4 • ios            • iOS 15.5 19F77
macOS (desktop)     • macos                     • darwin-x64     • macOS 12.4 21F79 darwin-x64
Chrome (web)        • chrome                    • web-javascript • Google Chrome 102.0.5005.115
```

ここで、`A15A87AB-EE19-477A-8823-1371F4FF61D4`が実機テスト可能なiphoneのデバイスIDとなる。

次のコマンドを実行することで実機にインストールされる。

```shell
# 'A'は device IDの頭文字
flutter install -d A　　
```

## 参考文献

https://harublog.site/developer-identifiers

https://zenn.dev/nnabeyang/scraps/62cea9e93a4409


https://apptopi.jp/2021/02/12/iphone-udid/2/
100日後くらいに個人開発するぞ！day050

## 今日は引数を学んでみた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/d0ac2ad0-346b-3f06-e1e2-f7988a2f4ff1.png)

## Ruby学習レッスンIIIを修了！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/6d27f32f-45d9-d656-b88d-b9a123f7fce4.png)





## 今日の学び

### キーワード引数
* キーワード引数を用いた書き方をすることで呼び出し側で引数を明記することができる
* 定義側で引数の値にコロン「：」を付けて呼び出し側で値の前に引数名を書くとキーワード引数をもつメソッドを書くことができる
    * 例
        * `def introduce(name:,age:,height:)`
        * `puts "こんにちは"`
        * `puts "私の名前は#{name}です" `
        * `puts "私は#{age}歳です" `
        * `puts "私の身長は#{height}cmです"`
        * `end` 
        * `introduce(name:"山田太郎",age:10,heithg:160)`
Elasticsearchで見る検索エンジンの仕組み(4): サンプルデータでクエリ編

##### [前回] [Elasticsearchで見る検索エンジンの仕組み(3): インデックス/トークナイズ編](https://qiita.com/mingchun_zhao/items/00a62daff310010b08dd)

## はじめに

前回は、全文検索のインデックスとトークナイズを理解しました。
今回は、Elasticsearch付属のサンプルデータでクエリ検証です。

## サンプルデータをインデクシング

- Kibanaトップ画面で、`Try sample data`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/bc721440-9187-f910-1d76-e598f8d9d078.png)


- `Sample flight data`の`Add data`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/f9493f97-7a9b-a537-b554-3c8adf72bbdf.png)

## 検索クエリを実行

- 左サイドメニューを、下にスクロールし、`Dev Tools`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/7e53eb4c-7788-8258-676a-599626d6800d.png)

- インデックスを確認
    - `GET _cat/indices`クエリを実行
    - `kibana_sample_data_flights`インデックスが作成されている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/162b89b2-8447-4504-9227-49787dedf59e.png)

- `kibana_sample_data_flights`インデックスに対し、検索クエリを実行
```
GET /kibana_sample_data_flights/_search
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/a5fdf2ce-aa77-dd68-1fa9-e7bc5e19fe10.png)

- `DestCountry`フィールドが`AU`のドキュメントを検索
    - 416件ヒット
```
GET /kibana_sample_data_flights/_search
{
  "query": {
    "match": {
      "DestCountry": "AU"
    }
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/4cd93a4a-2f22-808e-8513-c7e5818bafcf.png)

- `DestCountry`フィールドが`AU`、かつ`OriginCountry`が`PR`のドキュメントを検索
    - 10件ヒット
```
GET /kibana_sample_data_flights/_search
{
  "query": {
    "bool": {
      "must": [
        {"match": { "DestCountry": "AU" }},
        {"match": { "OriginCountry": "PR" }}
      ]
    }
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/7275b320-1e04-2ead-bdd3-dc3aa99d96df.png)

## おわりに

サンプルデータを用いて、全文検索を行ってみました。
次回も続きます。お楽しみに。

##### [次回] [Elasticsearchで見る検索エンジンの仕組み(5): スコアリング編](https://qiita.com/mingchun_zhao/items/fec5cde5053dfbdf87ed)
【おすすめ】VSCodeのテーマとフォント

# 楽しいコーディングライフのために！
VSCodeは拡張機能もたくさんありますがエディター配色やアイコンも変えられますよね〜
自分はコードを書くときにそういった外観にもこだわったりしています^ ^

今回は今まで使ってきた中で、使いやすかったり、見やすかったり
したものをいくつかご紹介します〜
# 配色テーマ
まずは配色テーマについてご紹介します^ ^

紹介する配色テーマはライト・ダークの２タイプの系統のテーマから選べます。

## Noctis

https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis

[https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis](https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis)

### 概要

11種類の配色があって、ライト系とダーク系の2つのタイプから選べます。
| **テーマ名** | **テーマタイプ** |
|:-:|:-:|
| Noctis Lux | ライト系 |
| Noctis Hibernus | ライト系 |
| Noctis Lilac | ライト系 |
| Noctis | ダーク系 |
| Noctis Azureus | ダーク系 |
| Noctis Bordo | ダーク系 |
| Noctis Obsucuro | ダーク系 |
| Noctis Sereno | ダーク系 |
| Noctis Uva | ダーク系 |
| Noctis Viola | ダーク系 |
| Noctis Minimus | ダーク系 |

#### おすすめポイント
ライト系とダーク系の両方のテーマから選ぶことができるので、自分の好きな色合いでエディターを装飾できます^ ^

これらの中で一番おすすめな配色はダーク系の**Noctis Minimus**です！

**文字色が落ち着いていて、背景とのコントラストも丁度いい**です^ ^

文字色の彩度が高く、目がチカチカしてしまう方は一度使ってみてください！

# アイコンテーマ
続いては、アイコンテーマをご紹介します^ ^

アイコンテーマのおすすめは二つあります！

## Nonicon

https://marketplace.visualstudio.com/items?itemName=yamatsum.vscode-nonicons


[https://marketplace.visualstudio.com/items?itemName=yamatsum.vscode-nonicons](https://marketplace.visualstudio.com/items?itemName=yamatsum.vscode-nonicons)

### 概要

- **どシンプル**なアイコン
- **なじみやすく、可愛らしさがある**
- 像やラクダのロゴが**ゆるさがいい**

#### おすすめポイント

Noniconはすごく**シンプルなアイコン**です^ ^

あまり角張った感じのアイコンではなく、丸みを帯びていて親しみやすく、緩い感じのアイコンになっています。

よく見るPHPやPython, JavaScriptのアイコンが用意されています。

ただ、**全ての言語等のアイコンが用意されているわけではない**ので、アイコンの追加を楽しみにしてコーディングしていくのがいいですね^ ^

## file-icons

https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons

[https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons](https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons)

### 概要
- **幅広いアイコンを網羅している**
- **アイコンからファイルがわかりやすい**
- アイコンの色を**有色か白色か選べる**

#### おすすめポイント

file-iconsは**ほとんどのアイコンが網羅**されています^ ^

**言語ごとのロゴに対応**しているので、アイコンからすぐに何のファイルかを確認できて**わかりやすい**のが特徴です。

ロゴの色も**白色に統一できるので、シンプルにまとめること**もできます。

なぜかアイコンの中にマインクラフトのクリーパーの顔があったりします笑
ご存じの方は探してみてください^ ^


# フォント
最後にフォントをご紹介します^ ^

フォントもおすすめは二つあります！

## Iosevka

https://typeof.net/Iosevka/

[https://typeof.net/Iosevka/](https://typeof.net/Iosevka/)

### 概要
 - **無料**
 - **合字フォント**
 - いくつかの**フォントスタイル**

#### おすすめポイント

Iosevkaは**無料**で使えるフォントです^ ^

**アロー関数の矢印などもスマートに表示できる合字フォント**で、コードも見やすくなるのが特徴です。

フォントのスタイルもいくつか用意されていて、**自分好みにそれぞれの文字を細かくカスタマイズ**することもできます。

スタイルカスタマイズに集中するのもありですね笑

## Cartgraph CF

https://connary.com/cartograph.html

[Cartgraph CF](https://connary.com/cartograph.html)

### 概要
 - **有料**
 - **合字フォント**
 - 斜体は**筆記体のような字体**

#### おすすめポイント

Cartgraph CFは**有料**のフォントです。
一番安くても**約5000円**ほどします笑

**手書きで書いた筆記体のような字体**なのが特徴で、自分はこのフォントがお気に入りで使っています。

こちらも合字フォントなので、コードが見やすくなります。

配色テーマで紹介した[Noctis](https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis)の紹介ページでこのフォントが使用されているので、興味がある方は再度確認してみてください^ ^

# まとめ

今回は**VSCodeのエディターの外観部分**でおすすめの**配色・アイコン・フォント**を紹介してきました。

コードを書いていくのも楽しいかもしれませんが、さらにエディターを自分好みにしてより良い環境を構築して、最高のコーディングライフを過ごしましょう！
Docker + Rails + Remote-Containers【VSCode】

## Docker + Next.js + Remote-Containers

```.devcontainer/devcontainer.json
{
  "name": "myapp-backend",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "api",
  "workspaceFolder": "/",
  "initializeCommand": "ssh-add ~/.ssh/id_rsa"
}

```
```.devcontainer/Dockerfile
FROM ruby:3.1.2
ARG APP_NAME=myapp-backend
ARG USER_NAME=ruby
ENV RUBYGEMS_VERSION=3.3.10
ENV TZ=Asia/Tokyo

WORKDIR /${APP_NAME}

COPY Gemfile Gemfile.lock /${APP_NAME}
RUN gem update --system ${RUBYGEMS_VERSION} && \
    bundle install

COPY /docker/api/entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

RUN adduser ${USER_NAME} && \
    chown -R ${USER_NAME} /${APP_NAME} && \
    chown -R ${USER_NAME} ${GEM_HOME}
USER ${USER_NAME}

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]
```

```/docker-compose.yml
version: '3.9'
services:
  db:
    platform: linux/x86_64
    image: mysql:8.0.28
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - ./src/db/mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password

  api:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - ./src:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
```
SQLAlchemy modelにsetterとgetterを設定する方法

## まとめ(結論だけ知りたい人用)
下記リンク先のコードを参考にしてください。
[modelにsetterとgetterを設定したコード](#modelクラスのコード)

**ただしprotectedなattributeにはアクセスしないという
共通認識が必要なコードとなっています。**
***
コード内容を理解したい方は記事本文をどうぞ

## 概要
SQLAlchemyではmodelオブジェクトのattributeに直接値を代入することが可能です。
しかしmodelオブジェクトの内容変更がDBのレコード更新という動作に繋がりやすく、
単純なattributeの変更だと思っていた処理が、実はDB上のレコードの更新処理だった
というような動作内容への誤認識を招きやすくしています。

今回はattributeのsetterとgetterを実装することで、
attributeの読み出しは可能だが、代入はできないという性質を持つ
modelクラスの実装例を見ていきます。

## 定義するモデル
今回定義するモデルの内容は以下の通り
| Field | Type | Null | Key | Default | Extra |
|-|-|-|-|-|-|
|id|varchar(26)|NO|PRI|NULL||
|name|varchar(255)|NO||NULL||
|email|varchar(255)|YES||NULL||

## modelクラスのコード
以下の通り
```python
from sqlalchemy.orm import declarative_base
from sqlalchemy.orm import synonym
from sqlalchemy.schema import Column
from sqlalchemy.types import VARCHAR


Base = declarative_base()


class User(Base):
    __tablename__ = "user"
    _user_id = Column(VARCHAR(26), name="id", primary_key=True)
    _name = Column(VARCHAR(255), name="name", nullable=False)
    _email = Column(VARCHAR(255), name="email")

    def __init__(self, user_id=None, name=None, email=None) -> None:
        self._user_id = user_id
        self._name = name
        self._email = email

    @property
    def user_id(self):
        return self._user_id

    @property
    def name(self):
        return self._name

    @property
    def email(self):
        return self._email

    def update_name(self, name): # 抽象的なデータ操作メソッドを定義可能
        self._name = name

    # setterを書く例として定義。
    # 明示的に定義しなくてもAttributeErrorを発生してくれる。
    @name.setter
    def name(self, value):
        raise AttributeError

    name = synonym('_name', descriptor=name)
    user_id = synonym('_user_id', descriptor=user_id)
    email = synonym('_email', descriptor=email)
```

## コード解説
- **Column**
  全てprotectedな変数としてアクセスを禁じることを明示します。
  仕様的には参照可能ですが、言語上の共通認識としての普通はアクセスしないという思想に依存させます。

  ちなみにname manglingを利用すればいいと考えると思うのですが、
  後述のsynonymが利用できなくなるため利用できません。

- **@&#xFFF0;property**
getterを定義しています。

- **@&#xFFF0;[var].setter**
setterを定義しています。

- **synonym**
カラムのエイリアスを定義します。
getter/setterを使うだけであれば、synonymを使わないでも問題ありません。
しかし、以下のようにfilterを使う場合、attributeの参照で問題が発生します。

```python
session.query(User).filter(User.name == "John").all()
```
　 この時に生成されるクエリは以下の通り
```sql
SELECT user.id AS user_id, user.name AS user_name, user.email AS user_email 
FROM user 
WHERE false = 1
```
　 明らかに意図していないクエリが発行されています。

　 次にsynonymを追加した場合、
```sql
SELECT user.id AS user_id, user.name AS user_name, user.email AS user_email 
FROM user 
WHERE user.name = 'John'
```
　 意図したとおりのクエリになっていることが分かります。

　 ちなみにsynonymを使用しなかった場合、以下の方法で意図したクエリを発行できます。
```python
session.query(User).filter(User._name == "John").all()
```
　 しかし、protectedなattributeを指定するのはあまり良いコードとは言えないです。
2022/7/4主にITとかセキュリティの記事

経産省 サイバー攻撃被害の会社に異例の改善命令 対策に不備(7/2)
https://www3.nhk.or.jp/news/html/20220702/k10013698571000.html

iCloudプライベートリレーを悪用したサイバー攻撃発見！IPを隠しWebサイトに無制限にアクセス(7/2)
https://www.appps.jp/367821/

増加するモバイル広告の裏で増え続けるモバイル広告詐欺の実態と対策(7/1)
https://ecclab.empowershop.co.jp/archives/77467

米国はハッカー帝国、盗聴帝国、機密窃取帝国　中国外交部(7/1)
https://news.livedoor.com/article/detail/22432713/

元カナダ政府職員、サイバー犯罪グループとの関与から米国で有罪判決(7/2)
https://news.mynavi.jp/techplus/article/20220702-2385216/

オラクル創業者ラリー・エリソン、新たな挑戦は全米医療データベースの構築(7/2)
https://forbesjapan.com/articles/detail/48481

IE終了で困っている人へ、「Internet Explorer（IE）モード」の使い方をわかりやすく解説(7/1)
https://news.infoseek.co.jp/article/allabout_68599/?tpgnr=it

宮城県の自治体、個人情報持ち出し用ケースの紛失対策にAirTagを導入(7/2)
https://iphone-mania.jp/news-466876/

TikTok、米国ユーザーの個人情報を中国共産党に提供せず(7/2)
https://www.afpbb.com/articles/-/3412652?cx_part=topstory

マイナポイント申請が滞る　サイトにアクセス集中(7/1)
https://www.tokyo-np.co.jp/article/186941

KDDIの大規模通信障害が長期化、トヨタやセコムのサービスにも影響(7/3)
https://xtech.nikkei.com/atcl/nxt/column/18/01537/00395/
AWS VPC/サブネットを作成する(2022年)


## 目標
こんな感じのVPCとサブネットの構成を作る
![Untitled Diagram.drawio (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1287520/a8a61797-b9e3-b362-2701-4c74b462bc14.png)

## 手順 

- AWSのマネジメントコンソールからVPCを作成クリック
VPCの作成画面からサブネットの作成まで一気にできるようです。(VPCなどタブをクリック)
下記画像の赤線部分を編集しています。

VPCのCIDERブロック設定

![VPC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1287520/0d2985ea-ee10-5038-ca89-054eb5739bf9.png)

サブネットのCIDERブロック設定とVPCエンドポイントをなしにする
![VPC２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1287520/2720121e-8c1f-774d-2429-2b6f60a60f6c.png)


インターネットゲートウェイのアタッチまでは自動でされないようなので、
publicサブネットのルートテーブルを修正します。
![スクリーンショット 2022-07-03 22.25.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1287520/078bf69b-cf24-c3c2-358a-079494649970.png)


### VPCとサブネットについて

#### VPC
VPCとはAWS上に仮装的に割り当てられたプライベートネットワーク空間です。(日本語むずい)
ざっくり言うと、VPCという大きい枠をとってその中でネットワーク環境を作りましょうというイメージです。(この大枠は下記のCIDEブロックで設定します。)

#### サブネット
VPCで設定した範囲の中でさらに小さい枠でネットワークの割り当て範囲を決めましょうという仕組みです。(これもCIDERで割り当ての範囲を決めます。)

### CIDERブロック(サブネットマスク)について

- CIDERブロックとは簡単に言うと、IPアドレスの割り当て範囲を決めるためのルールです。
0~255.0~255.0~255.0~255のIPアドレス範囲の中からCIDERブロックを設定することで必要な割り当てを指定することができます。

####  今回の構成
- VPC: 10.0.0.0/24 = 10.0.0.0~255の範囲が使用できる

- VPC内部
  - パブリックサブネット1a　: 10.0.0.0/27 = 10.0.0.0~10.0.0.31の範囲を使用できる
  - プライベートサブネット1a: 10.0.0.160/27 = 10.0.0.160~10.0.0.191の範囲を使用できる
  - パブリックサブネット1c　: 10.0.0.32/27 = 10.0.0.32~10.0.0.63の範囲を使用できる
  - プライベートサブネット1c: 10.0.0.192/27 = 10.0.0.192~10.0.0.223の範囲を使用できる 
  

参考: CIDER計算サイト(https://www.softel.co.jp/labs/tools/network/)

### インターネットゲートウェイについて

- VPCと外側のネットワークをつなぐためのものです。こちらを設定することでVPC内の閉じられた世界から、外側のオープンな世界につながることができます。
このオープンな世界につながっているサブネットがパブリックサブネットと呼ばれています。

### あとがき

- 忘れてしまいそうなので、簡単にVPC・サブネットを構築手順を記述しました。この中にEC2やRDSを設定してWebアプリのデプロイをすることができます。
業務でインフラに深く関わる機会はあまりないので間違ってることもあるかもしれません。(インフラむずい...)
ROS2(Windows)触ってみた感じ

# チュートリアルをやっていて
基本、コピー&ペーストで動かすことができます。
当たり前ですが、基本はコマンドプロンプトでことが進みます。
ただ、たまに公式のコマンドが間違えていることがあります。


# よく使うコマンド
``` 
call C:\opt\ros\foxy\x64\local_setup.bat 
```

https://aka.ms/ros
私はROS2インストールの代替案としてこのサイトに従い、ROS2をインストールしました。
なので、公式チュートリアルにあるコマンドとはフォルダー名が違っています。
代替案でインストールする場合、フォルダー名がチュートリアルとは違うことに気を付けてください。
torch.Tensorの配列の操作

a = 1
b = 2
x = [1, 2]
y = [4, 5]

# x, yから[1, 2, 4, 5]を作る
torch.cat((x, y), dim=0)

# x, yから[[1,2], [3, 4]]を作る
torch.stack((x, y))

# x, yから[[1,3], [2, 3]]を作る
torch.stack((x, y), dim=1)

# xにaをappendして、[1,2,1]を作る
torch.cat([x, torch.Tensor(a)])
Djangoで作成したWebアプリケーションを無料で公開する(PythonAnywhere)

# 1. はじめに
前回の「[DjangoでHello Worldを表示する](https://qiita.com/t-shirayama/items/bc18d924dc672c7215cd)」で作成したWebアプリケーションをPythonAnywhereというサービスを使用して無料で公開します。

# 2. PythonAnywhereとは
PythonAnywhereはDjangoやFlaskなどのPythonのWebフレームワークに特化したホスティングサービスです。無料プランがあるため勉強用やお試しで利用することができます。無料プランだと制限は多いですが、有料プランに切り替えることで実運用も可能になります。

# 3. デプロイ
GitHubとPythonAnywhereを連携してデプロイします。

# 3.1 GitHubにソースコードをプッシュ
まず、GitHubにリポジトリを作成し、下記のコマンドでソースコードをプッシュします。
コマンドは前回作業していた一番上のmysiteフォルダに移動して実行します。

```
$ git init
$ git config --global user.name 【ユーザ名】
$ git config --global user.email 【メールアドレス】
$ git add --all .
$ git commit -m "My Django app, first commit"
$ git remote add origin https://github.com/<your-github-username>/<repositoryname>.git
$ git push -u origin master
```

## 3.2 PythonAnywhereの無料プランのアカウント作成
PythonAnywhereの無料プランのアカウントを作成します。
登録はユーザ名、メールアドレス、パスワードのみです。クレジットカードなどの登録は不要です。

## 3.3 PythonAnywhere APIトークンの作成
次にPythonAnywhereにサインインした後、APIトークンを作成しておきます。
画面右上のAccountをクリックし、AccountページのAPI Tokenタブで「Create a new API token」をクリックして作成します。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641338/2afea736-a28e-e762-238f-1d528eb50efe.png)

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641338/ed14ff65-13eb-143f-4eca-463fd6fcc406.png)

## 3.4 PythonAnywhere でサイトを設定
PythonAnywhereのコンソールでサイトの設定していきます。
まず、pipでpythonanywhereのパッケージをインストールします。

```
$ pip3.9 install --user pythonanywhere
```

次に下記のコマンドを実行し、サイトの設定します。
GitHubからクローンし、Webアプリケーションの公開まですべて自動で行ってくれます。
```
$ pa_autoconfigure_django.py --python=3.9 https://github.com/<your-github-username>/<repositoryname>.git
```

最後に管理画面にログインできるようにsuperuser(サイトの全てを管理するユーザー)を作成します。
```
$ python manage.py createsuperuser
```

## 3.6 動作確認
作成したWebアプリケーションが公開されているか確認します。
無料プランの場合、ドメインは「ユーザ名.pythonanywhere.com」になっています。

管理画面(https://ユーザ名.pythonanywhere.com/admin/)
![管理画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641338/975bb3f9-d5d2-da20-7796-f6cdb8d6545f.png)

Hello Worldのページ(https://ユーザ名.pythonanywhere.com/hello/)
![hello_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641338/0311fc2d-3285-9518-1ace-3fb9de8cbb62.png)


# 4. おわりに
今回はDjangoで作成したWebアプリケーションを無料で公開してみました。
Djangoには多くの機能があるので勉強してどんどん追加していこうと思います。
【Rails】missing required keys: [:id]の原因と対策

# はじめに
ある投稿(postテーブル)に対して、いいね(favoriteテーブル)を削除する(destroyアクション)を実行すると、掲題のエラーが発生した。これについて、原因と対策を記す。

下記テーブルは作成済み。
userテーブル
postテーブル
favoriteテーブル
| No |    項目     |   内容    |
|---:|-------------|------------|
| 1  |      OS       |   Mac     |
| 2  |       Ruby      |   2.6.3   |
| 3  |       rails      |      6.0.4 |
# 原因: favoritesテーブルの主キー:idが渡せていない
rails routesでルーティングを見てみると、favoritesテーブルに主キーを渡さなければいけない。
```言語名:ターミナル
post_favorite DELETE /posts/:post_id/favorites/:id(.:format) favorites#destroy
```
しかし、現状のコードでは渡せていなかったのが、エラーの原因のようだ。

# 対策: routesの設定を変える
https://qiita.com/yama_diary/items/038d6a093e8db8e7d991

三日間悩み、調べ、辿り着いたのがこの記事だった。
原因が主キーの渡しにあることもこの記事に気付かされたので、とても感謝している。。。
上記の記事と同様の対策を行なっていく。

そもそも主キーを渡す必要ないため、routesを変える方針で進める。
destroyアクションの時に、user_idとpost_idを検索してfavoritesテーブルからレコードを引っ張るので主キーがなくても情報が揃っているため。
```favorites_controller.rb
def destroy
    @post = Post.find(params[:post_id])
    favorite = current_user.favorites.find_by(post_id: @post.id)
    favorite.destroy
```
# 結果
**resources**を**resource**に変える。
resources（変更前）
```routes.rb
  resources :posts do
    resources :favorites, only: [:create, :destroy]
  end
```
```言語名:ターミナル
post_favorite DELETE /posts/:post_id/favorites/:id(.:format) favorites#destroy
```
resouce（変更後）
```routes.rb
  resources :posts do
    resource :favorites, only: [:create, :destroy]
  end
```
```言語名:ターミナル
post_favorites DELETE /posts/:post_id/favorites(.:format) favorites#destroy 
```
これで、エラーが消えた。
# おわりに
いいね機能をAjaxを使って実装する際に起こったエラーである。
このコードをまとめたら、投稿したいと思う。
【Selenium】急にAttributeError: 'WebDriver' object has no attributeが起きた


# 結論
seleniumのバージョン4.3.0から、find_element_by_*系のメソッドが廃止されて使えなくなった。

# 経緯
今まで通りスクレイピングしている時に、環境を新しく作って動かしたらエラーが出た


# 該当のソースコード
```python:scraping.py
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

options = webdriver.ChromeOptions()
options.add_argument("--headless")
browser = webdriver.Chrome(ChromeDriverManager().install(),options=options)
url = "https://www.google.co.jp/imghp?hl=ja"
browser.get(url)

kw_search = browser.find_element_by_css_selector("#sbtc > div > div.a4bIc > input")
```
# エラー文
```python
Traceback (most recent call last):
  File "/Users/syoshika/.../scraping.py", line 22, in <module>
    kw_search = browser.find_element_by_css_selector("#sbtc > div > div.a4bIc > input")
AttributeError: 'WebDriver' object has no attribute 'find_element_by_css_selector'
```

# 予想
エラーは直訳で、**「"WebDriver"は"find_element_by_css_selector"という属性を持ってませんよ」** 。
要するに定義されてないメソッドを使おうとしてるからエラーが来てるのかな？
こういうときは大体誤字ってる場合が多いんだけどそうでもなさそう。いつもこれ使ってたのにー。

# 原因

どうやら、find_elements_by_*系メソッドは **バージョン4.3.0で廃止された** みたい。

https://github.com/SeleniumHQ/selenium/blob/a4995e2c096239b42c373f26498a6c9bb4f2b3e7/py/CHANGES#L2

> Selenium 4.3.0
Deprecated find_element_by_* and find_elements_by_* are now removed (#10712)

そういえば環境作り直した時に、Seleniumのバージョンを指定せずにインストールしてたわ。

試しにインストールされたSeleniumのバージョンを確認してみる

```shell:Terminal
 pip list | grep selenium
```

```shell:結果
>>> selenium   4.3.0
```

やっぱりか。
最新バージョンがインストールされてたのでダメだったんだね。

というか、Selenium4系から元々メソッドの書き方が変わってた。

```python:3系
driver.find_elements_by_class_name("content")
```

```python:4系
# 引数にまとめて書くやり方に統一される
from selenium.webdriver.common.by import By
driver.find_elements(By.CLASS_NAME, "content")
```

# 対策

### 4.3.0よりも前をインストール
4.3.0より前のバージョンを再インストールすれば動いた。

```shell
pip install selenium==4.1.0
```
---
### 4系の書き方に合わせる

もしくはコードを4系と同じようにしてしまう。

```python
from selenium.webdriver.common.by import By
kw_search = browser.find_element(By.CSS_SELECTOR, "#sbtc > div > div.a4bIc > input")
```

# 終わりに

（2022年7月4日 現在）
10日前にアプデが入ったばっかりみたいでした。


現行のSeleniumを使った記事はほとんど前の書き方だから、一旦自分の中で整理してからコードを読み替える必要がありそう。

# 参考にしたサイト

https://github.com/SeleniumHQ/selenium/blob/a4995e2c096239b42c373f26498a6c9bb4f2b3e7/py/CHANGES#L2
備忘録：matplotlibでベクトル描画（2D / 3D）

# とりあえず２次元描画
( x, y ) 座標で平面ベクトルを表示してみた

# ソースコード
```python3:python3
import numpy as np
import matplotlib.pyplot as plt

# 座標設定関数
def coordinate(axes, range_x, range_y, grid = True,
               xyline = True, xlabel = "x", ylabel = "y"):
    axes.set_xlabel(xlabel, fontsize = 16)
    axes.set_ylabel(ylabel, fontsize = 16)
    axes.set_xlim(range_x[0], range_x[1])
    axes.set_ylim(range_y[0], range_y[1])
    if grid == True:
        axes.grid()
    if xyline == True:
        axes.axhline(0, color = "gray")
        axes.axvline(0, color = "gray")

# ベクトル描画関数
def visual_vector(axes, loc, vector, color = "red"):
    axes.quiver(loc[0], loc[1],
              vector[0], vector[1], color = color,
              angles = 'xy', scale_units = 'xy', scale = 1)

# FigureとAxes
fig = plt.figure(figsize = (5, 5))
ax = fig.add_subplot(111)

# 座標を設定
coordinate(ax, [-3, 3], [-3, 3])

# ベクトルv,wを定義
v = np.array([2, 1])
w = np.array([-1, 1])

# [0,0]を始点にvを描画（赤）
visual_vector(ax, [0, 0], v, "red")

# vの終点を始点にwを描画（青）
visual_vector(ax, v, w, "blue")

# [0,0]を始点にv+wを描画（ベクトルの和＝緑）
visual_vector(ax, [0, 0], v + w, "green")

plt.show()
```
# 描画結果
![python02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/226eb8f0-91fa-062d-b681-a2b0779282da.png)
```math
\vec{a} + \vec{b} = \vec{c} \\

\left(\!
    \begin{array}{c}
      2 \\
      0
    \end{array}
  \!\right) + 
\left(\!
    \begin{array}{c}
      -1 \\
      1
    \end{array}
  \!\right) =
\left(\!
    \begin{array}{c}
      1 \\
      1
    \end{array}
  \!\right)
```
こんな感じに描画できました。
そこで、３次元にも挑戦！！！
# ３次元ベクトル
## ソースコード
```Python3:python3

import numpy as np
import matplotlib.pyplot as plt

# 3D座標設定関数
def coordinate_3d(axes, range_x, range_y, range_z, grid = True):
    axes.set_xlabel("x", fontsize = 16)
    axes.set_ylabel("y", fontsize = 16)
    axes.set_zlabel("z", fontsize = 16)
    axes.set_xlim(range_x[0], range_x[1])
    axes.set_ylim(range_y[0], range_y[1])
    axes.set_zlim(range_z[0], range_z[1])
    if grid == True:
        axes.grid()

# 3Dベクトル描画関数
def visual_vector_3d(axes, loc, vector, color = "red"):
    axes.quiver(loc[0], loc[1], loc[2],
              vector[0], vector[1], vector[2],
              color = color, length = 1,
              arrow_length_ratio = 0.2)

# FigureとAxes
fig = plt.figure(figsize = (10, 10))
ax = fig.add_subplot(111, projection='3d')

# 3D座標を設定
coordinate_3d(ax, [-10, 10], [-10, 10], [-10, 10], grid = True)

# 始点を設定
loc = [-7.5, -7.5, -10.0]

# 3Dベクトルを定義
v = [14.5, 15.5, 18.0]

# 3Dベクトルを配置
visual_vector_3d(ax, loc, v, "red")
plt.show()
```
## じゃ描画結果
![python03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/5fafb4ea-69bb-fd8f-9e1f-75064485c04d.png)
始点を
```math
\left(\!
    \begin{array}{c}
      -7.5 \\
      -7.5 \\
      -10.0
    \end{array}
  \!\right)
```
ベクトルは
```math
\left(\!
    \begin{array}{c}
      14.5 \\
      15.5 \\
      18.0
    \end{array}
  \!\right)
```
終点を
```math
\left(\!
    \begin{array}{c}
      7.0 \\
      8.0 \\
      8.0
    \end{array}
  \!\right)
```
にしてみました。なんかそれっぽくなりました。
今週の学び　第10回

# 今週の学び

jQueryなど

- コードの短縮
  - 自分で関数を定義して、使うたびに呼び出すようにする

- data()
  - 「data()」を使うと HTML 要素内に付与された data 属性に対して、取得・設定・変更などが簡単に行えるようになる
    【 対象要素.data() 】のように取得しようと考えている要素に data()メソッドを実行する
    個別の id を取得するなら【 対象要素.data( 属性名 ) 】のように引数へ data 属性名を指定
    「data-name」「data-age」という 2 つの data 属性が付与されているなら、取得する方を「data('name')」などと記述する

- 三項演算子
  - JavaScript では唯一の、3 つのオペランドをとる演算子

- Number()
  - なんでも付ければ良いものではない
    電話番号などで「0」が表示されなかったりする

- .slice()

  - 文字列の先頭、末尾、それぞれから指定した数だけ文字を削除する
    先頭から 2 文字を削除
    let a = str.slice( 2 ) ;
    末尾から 2 文字を削除
    let b = str.slice( 0, -2 ) ;

- 変数

  - jquery では同じ処理は変数にできる

- .hide()

  - 各要素のうち、表示状態にあるものを非表示にする

- .show()

  - 各要素のうち、非表示状態にあるものを表示する

- attr()
  - attr()は CSS の関数で、選択された要素の属性の値を受け取りスタイルシートの中で使うために使用される

- .data()
  - 「data 属性」へ任意の値を保持させておくことで、あとから JavaScript や jQuery で取得・変更できる

- .slice
  - slice() メソッドは、start と end が配列の中の項目のインデックスを表している場合、start から end まで (end は含まれない) で選択された配列の一部の浅いコピーを新しい配列オブジェクトに作成して返す

# まとめ

三項演算子の使い方や$(this)の使い方など難しいが、1つ1つ確実に覚えていく
React開発の階層構造

## ファイルの階層構造
何をどこに置けばいいのかメモ程度に

## public
<h4>実際にweb上に公開されるもの</h4>
index.htmlやロゴなど

## src
cssやreactのプログラム関係のもの
実際に触るのはこの中のもの
AWS CDK + TypeScript でサーバレス開発その1 : Hello world!

# 概要

AWS CDKでサーバレス環境を構築するシンプルな方法のメモ。

# 前提

- 筆者の環境はMac + VSCode。
- AWS CDKを使ったことがある。
- Node.jsがインストールされている。

# 手順

## 雛形の作成

aws-cdkを使ってプロジェクトの雛形を作成する。

```bash:ターミナル
mkdir project-name
cd project-name
cdk init app --language typescript
```

TypeScriptは直接ts-nodeが実行するので、typescriptパッケージはアンインストールしておく。tsconfig.jsonも削除する。

```bash:ターミナル
npm uninstall typescript
rm tsconfig.json
```

package.jsonからtsc関連のスクリプトも削除しておく。

```diff:package.json
  "scripts": {
-    "build": "tsc",
-    "watch": "tsc -w",
    "test": "jest",
    "cdk": "cdk"
  },
```

lambdaのビルドに使うesbuildをインストールする。

```bash:ターミナル
npm install --save-dev esbuild
```

## lambdaの作成

CDKでlambdaを作成する。

```typescript:lib/project-name-stack.ts
import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as lambda from 'aws-cdk-lib/aws-lambda-nodejs'; // aws-lambda-nodejsのインポートを追加

export class ProjectNameStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    // lambdaを作成
    let apiFunction = new lambda.NodejsFunction(this, 'api', {
      bundling: {
        sourceMap: true,
        minify: true,
      },
    });
    
  }
}
```

同じディレクトリにproject-name-stack.api.tsファイルを作成する。("api"は上でNodejsFunctionのコンストラクタの第二引数に渡した文字列。)

```typescript:lib/project-name-stack.api.ts
import * as lambda from 'aws-lambda';
export const handler = async (event: lambda.APIGatewayEvent, context: lambda.Context): Promise<lambda.APIGatewayProxyResult> => {
  // 「Hello world!」に続けてパスを表示するだけの関数
  return {
    statusCode: 200,
    headers: { 'Content-Type': 'text/plain' },
    body: `Hello world! This is ${event.path}\n`,
  };
};
```

aws-lambdaのインポートがエラーになるのでインストールする。(これでevent等の引数に補完が効くようになる。)

```bash:ターミナル
npm install @types/aws-lambda
```

## APIGatewayの作成

CDKでAPIGatewayを作成する。

```typescript:lib/project-name-stack.ts
import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as apigateway from 'aws-cdk-lib/aws-apigateway'; // aws-apigatewayのインポートを追加
import * as lambda from 'aws-cdk-lib/aws-lambda-nodejs';

export class ProjectNameStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const apiFunction = new lambda.NodejsFunction(this, 'api', {
      bundling: {
        sourceMap: true,
        minify: true,
      },
    });
    // APIGatewayを作成
    const apiGateway = new apigateway.LambdaRestApi(this, 'api-gateway', {
      handler: apiFunction,
      endpointTypes: [apigateway.EndpointType.REGIONAL],
    });

  }
}
```

## デプロイ

まず、今回のデプロイで発生する差分を確認する。

```bash:ターミナル
cdk diff
```

初回なので、全てのリソースが追加されることが確認できる。
確認したら、デプロイする。

```bash:ターミナル
cdk deploy
```

## 動作確認

デプロイが完了すると、次のように出力される。

```bash:ターミナル
Outputs:
ProjectNameStack.apigatewayEndpointXXXXXXXX = https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/
```

このURLをブラウザで開いて次のように表示されれば成功。

```
Hello world! This is /
```

# まとめ

サーバレスで簡単にHello world!を表示することができた。
次回は今回作ったAPIでDynamoDBを操作してみる(予定)。
Ubuntu18.04でDocker環境を立てるのに躓いたところ

# はじめに
どうも、べちおです。

山奥の大学で学生エンジニアをしています。
よろしくお願いいたします

# 今回の内容
今回はUbuntuでDockerを動かす方法を紹介したいと思います。(二番煎じ以上だけれど。。。)
以下に参考にした記事を掲載します。
また、以下の記事を参考に、UbuntuにDocker環境を立てました。

https://www.softek.co.jp/SID/support/sidfmvm/guide/install-docker-ubuntu1804.html

しかし、ここで<font color="red">**注意点**</font>です！
上記の方の方法ではうまくいかない事例があることがわかりました。(私なんですがね...)
上手くいかない原因、それは自身の環境が・・・

<font color="red">Proxy環境</font>なのか<font color="red">そうではない</font>のか

というところです。

ここを間違えてしまうと、Dockerコマンドを使用できても、イメージをpullできない(通信ができない・イメージをダウンロードできない)状態になってしまいます。(実際に私がそうでした)
同じような現象に悩まされている方もいらっしゃるかもしれないので、解決した方法を共有します！


# 実装環境
- Ubuntu 18.04.6LTS
- メモリ		18GiB (17.6GiB)
- プロセッサ	Intel core i7 CPU 920 @2.67GHz*8
- グラフィック	NVIDIA GeForce GTX 1650/PCle/SSE2
- Docker 20.10.17

# 結論
上記のリンクで私が詰まった箇所は「**DockerにProxyを設定する**」、というところです。
また一番大切なところは、

<font color="red">**自信の環境がProxyサーバを経由する必要がある場合はDockerにProxyの設定が必要**</font>

ということです。直接外部のネットワークにアクセスすることが可能な場合には、Proxy設定は**不要**とのことでした。(私は完全にそこを見落とししていました...)

# 改善方法
まず、Dockerを導入した段階で自身が
- Proxyサーバを経由する必要が**ある**のか(外部ネットワークへのアクセスが必要なのか)
- Proxyサーバを経由する必要が**ない**のか(直接外部ネットワークにアクセスすることが可能なのか)

を簡単に確認する方法を紹介します。とりあえず以下のコマンドを入力してみましょう。お馴染みのHello-Worldです。

```:terminal
$ docker run hello-world
```

実行に成功した場合は以下のようなログが出力されます。

```:terminal
$ docker run hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (arm64v8)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

実行に失敗した場合はエラーが出るかと思います。その際はProxy設定が必要だったのかそうではないのかが判断つくと思います。

Proxy設定をおこなってエラーが出てしまった場合は、以下のファイルの中を編集すると解決するかと思います。具体的には以下の2文をコメントアウトします。

```
$ sudo vi /etc/systemd/system/docker.service.d/http-proxy.conf
```
```
[Service]
 #Environment="HTTP_PROXY=http://proxy.example.com:8080/"
 #Environment="HTTPS_PROXY=http://proxy.example.com:8080/"
```
上記の変更を適用します。
```
$ sudo systemctl daemon-reload
```
Dockerを再起動します。
```
$ sudo systemctl restart docker
```

ここで再度```$ docker run hello-world```を実行することでイメージをpullすることができたかと思います。

# まとめ
私自身DockerもUbuntuもほぼ初めましての状態だったこともあり、知識不足のためこのようなことが起きてしまいました。
これからどんどんDocker・Ubuntuを触っていきますので、情報を共有していきたいと思います。

今後ともよろしくお願いいたします。
Springでコンポーネントの起動・停止処理を実装する

Springでコンポーネントの起動・停止処理（初期化・破棄処理）を実装する方法を調べてみました。

# SmartLifecycleを実装する

起動・停止処理という切り口の場合は、`SmartLifecycle`を利用するのが良さげっぽい。DIコンテナ起動時に`start`メソッドが呼び出され、DIコンテナ停止時に`stop`メソッドが呼び出される。

```java
@Component
public class MyComponent implements SmartLifecycle {
  private boolean active;

  @Override
  public void start() {
    System.out.println("start " + getClass());
    this.active = true;
  }

  @Override
  public void stop() {
    System.out.println("stop " + getClass());
    this.active = false;
  }

  @Override
  public boolean isRunning() {
    return active;
  }
}
```

`getPhase`メソッドをオーバライドすれば、起動・停止する順番（フェーズ）を制御することもできる。起動時は数値が小さいコンポーネントのメソッドから順に呼び出され、停止時は数値が大きいコンポーネントのメソッドから順に呼び出される。

```java
  @Override
  public int getPhase() {
    return 0;
  }
```

:::note info
`Lifecycle`インタフェースを実装することで同じようなことはできるが順序(フェーズ)のサポートはない。
:::

# InitializingBean/DisposableBeanを実装する

`InitializingBean`/`DisposableBean`を実装することで同じようなことできそうだが、起動・停止処理というよりかは、コンポーネントの初期化・破棄処理を実装するためのインターフェースなので役割がちょっと違う気はします。

```java
@Component
public class MyComponent implements InitializingBean, DisposableBean {
  @Override
  public void afterPropertiesSet() throws Exception {
    System.out.println("afterPropertiesSet " + getClass());
  }

  @Override
  public void destroy() throws Exception {
    System.out.println("destroy " + getClass());
  }
}  
```

# まとめ

上記以外にも初期化・破棄処理を実装・実行する方法はありますが、今回はあえてSpringが提供するインタフェースを実装する方法に限定してみました。
引き算の流れを見てみよう

# ５−３をする
0011(3)を−３にする
10000-0011をして補数を導き出す。
一応１０進数になおす
１６ー３は１３なので１１０１になる。

０１０１＋１１０１をする
１００１０になる。
桁から溢れたビットは切り捨て
００１０（２）になった。
成功！

# 負数
０より小さい数。
出典 https://kotobank.jp/word/%E8%B2%A0%E6%95%B0-124764

# ２の補数
次の桁に繰り上がる数に上がるための数

# 問題
負数を２の歩数で表すとき、全てのビットが１であるんビットの２進数”１１１１...111"が表す数値又はその数式はどれか。
まず問題の意味がわからなかった。
答えを見た。
"1111...111"が２の補数であった。その２の補数が表すのは次のうちどれかと言うことなのか?
そうすれば答えがわかる。

２の補数を表すためには対象となる数字を反転させてその後に１を足す。
その状態になったのが１１１１１１...11であるから
まず１を引く
1111111...0になり、反転させると0000..01になる。
そして負の数だから
−１になるのか。

# 気づき
補数を少し理解できた。

# 問題
ある整数値を、負数を２の補数で表現する２進数表記法で表すと最下位２ビットは”１１”であった。１０進数表記法の下で、その整数値を４で割った時のあまりに関する記述として、最適なものはどれか。ここで助産の章は、絶対値の小数点以下を切り捨てるのとする。
ア その整数値が正ならば３
イ その整数値が負ならば−３
ウ その整数値が負ならば３
エ その整数値の正負にかかわらず０

# 思ったこと
文の意味がわからなかった。
もう少し読解力を身につけたい。
ある整数値が２進数表記法で負数を表現してあるのか？
それともただ２進数表記法で表現しているの？
負数か負数じゃないのかわからなかった。

あと```ここで除算の商は絶対値の小数点以下を切り捨てるものとする。```と書かれてあって
正直わからない。
頭がパニックになった。
そのせいもあって匙を投げてしまった。

# 解説を見た。
整数値を２真数表記法で表しているだけだった。それが...11だった。
仮の２進数で想定して問題を解いていた。
解説では３ビットの２進数を使っていた。
主に１１１と（ー１）０１１（３）を使っていた。
これを４で割っていた。
一応それぞれを４で割ると
１１１(整数は負）は０余ー１、０１１（整数は正）は０あまり３
アは当てはまっている。
イは合っていない
ウはあっていない
エはー１と３なので余りが０にならない。

## 気づき
まだまだ問題を解かなくてはダメだな。
問題に慣れていこう。
頑張ろう。

出典 キタミ式イラストIT塾　基本情報技術者　令和０３年
【React Native】Firebaseの最新バージョン（9.8.4）でエラーが出る件

# エラーの内容
・「React Native + Expo」アプリ にFirebaseの最新バージョン（9.8.4）をインストールし、公式ドキュメントでおこなっている初期化処理を記述。
・「expo start」でiOSシュミレーターを起動した際、以下エラーが発生

初期化処理
``` react
import { initializeApp } from 'firebase/app';


const firebaseConfig = {
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
};

// Initialize Firebase
 initializeApp(firebaseConfig);
```
※firebaseConfigに記載したAPI Keyは[公式サイト](https://docs.expo.dev/guides/using-firebase/#using-expo-with-firestore)から引用。実際はFirebaseプロジェクト作成時にできる自分専用のコードを記載している。

![Screen Shot 2022-07-03 at 23.59.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/3ae87bb5-9df7-9a30-7e89-4d2832daafca.png)
![Screen Shot 2022-07-04 at 0.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/5d97bafa-d11f-3db7-e3e2-38793849b9b6.png)

initializeApp関数を呼び出した際にこのエラーが発生するよう。

エラーの内容で気になる箇所は、以下の
「However, this package itself specifies a `main` module field that could not be resolved.
Indeed, none of these files exist:」
部分。
日本語訳すると
「しかし、このパッケージ自体が `main` モジュールのフィールドを指定しており、解決できませんでした。
実際、これらのファイルは一つも存在しません。」
何かファイル（というかパッケージ？）が足りないのか。。

# 解決策（というか対応策）
firebase のバージョンを9.8.4から公式ドキュメントの例で使われている9.1.0に変える。
```
yarn add 'firebase@9.1.0'
```
[Expo公式 Using Firebase](https://docs.expo.dev/guides/using-firebase/#using-expo-with-firestore)

これで取り敢えずエラーは解消され、initializeAppを呼び出しても正常にシュミレーターが起動するようになりました。

# まとめ
取り敢えず、同じ９系だし最新のExpo公式ドキュメントで使われている記述なので、大きな問題はないと思い「9.1.0」を使用することにしました。
お茶を濁すような解決策ではあるけれど、８系に落とすよりはマシかなと、甘めに判断。。

どなたか9.8.4でも上記エラー起きずにFirebaseと連携する方法知っていれば、ご教授いただきたいです。。

# 後日談
↓こちらのやり方で、あっさり解決。無事、9.8.4でもFirebase連携できるようになりました。
@sugasaki さん、良い記事ありがとうございます。。！（面識ないのでこの場でこっそりお礼）
https://qiita.com/sugasaki/items/9e642329b83094a081fb
↑参考文献も後で確認し理解を深めよう。
RLWE による定数サイズの暗号文を持つ Leveled Multikey FHE③

この記事は [勝手に秘密計算アドベントカレンダー](https://qiita.com/kenmaro/items/3e8a124ce4306fe040dc) の10日目の記事です．

下記の論文の解説をメインに行なっていきます．

[V. Daza, P. Morillo, and S. Rovira: "Leveled Multikey FHE with constant-size ciphertexts from RLWE", Cryptology ePrint Archive, 2022.](https://eprint.iacr.org/2022/447)

記事全体として，全４部作を予定しています．

第１回：[RLWE による定数サイズの暗号文を持つ Leveled Multikey FHE①](https://qiita.com/0917laplace/items/e3bafb2ebf299a9d0d43)
第２回：[RLWE による定数サイズの暗号文を持つ Leveled Multikey FHE②](https://qiita.com/0917laplace/items/2ff2085be85b67b3165a)

今回（第３回）は

- CDKS 方式
- relinearization key

の２本立てで書いていきます（論文でいうところの 4.1 Adding homomorphic capabilities まで）．

**突貫で書いてしまった部分もあるので，大いに誤りを含む可能性があります．誤字・脱字レベルでも構いませんので，ご指摘ください．
また，予告なしに内容の加筆や構成の変更を行うことがありますが，読みやすくするためのものですので，ご容赦ください**

# CDKS 方式
[前回の「Relinearazation」](https://qiita.com/0917laplace/items/2ff2085be85b67b3165a#relinearization) で参加者 $i, j$ の秘密鍵 $s_i, s_j$ の積が必要で，そのためには CDKS 方式を使うと書きました．
今回はそのCDKS方式を導入します．

![Leveled_3_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/03bb337e-affb-3d36-adba-9aacf5348ff3.png)

復号はあっさり書いていますが，うまく条件をつけると，$c_0, c_2$ から $m$ を復号できます（~~今回は復号を使わないから書いていないんだと思うんですけど，個人的には書いてほしいですねぇ・・・いや自分で調べろよって感じですが~~）．

![Leveled_3_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/9d25d68d-7448-acc5-cfc4-32f4a28b6ca9.png)

「ここで」以下の条件が人工的だったり，$\approx$ ではなく $=$ だったりしますが，その辺は最後に注を入れています．

証明です．

![Leveled_3_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/e10e700b-041c-66c6-3b8c-d226b20de3f9.png)

![Leveled_3_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/02b1d17d-760b-2eaf-134a-64e29906f5cc.png)

注です．

![Leveled_3_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/528d7ceb-a6f6-f6c3-006a-58b10747aa46.png)


# relinearization key

早速スクショから．それぞれがどのように relinearization key を作るのか，からです．

![Leveled_3_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/d26e2d0d-e2b5-6e41-b25d-b21221c4cb2a.png)

$\hat{\mathrm{rlk}}$ を扱いやすい形に変形します．

![Leveled_3_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/32693bf1-e4b8-1c61-7ea5-14fea951ef19.png)

上記の $\hat{\mathrm{rlk}}$ を使って，3成分の暗号文を2成分の暗号文へと変形します．

![Leveled_3_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/861bd6f8-1bbf-8c86-12e8-be5ae19bc824.png)

めでたしめでたし・・・とは少しいかない話を最後に入れます．

![Leveled_3_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1298501/492202df-88cd-3591-c94c-51d7cbb15093.png)

そこで，CDKS 方式での命題を用いることで，この値を求められます．

--------------------------
今回の内容はここまでです．ここまでご覧になってくださった方々ありがとうございます！
matplotlibを使ってグラフの面積を可視化する｜備忘録

# きっかけと概要
数学を教えるときに、
```math
S =\int_{0}^{3}\{f(x)-g(x)\}dx
```
とか積分して面積を求めることがありますが、
***これをなんとか可視化できんかいな？***
って思ってやってみました。備忘録です。

# ソースコード
```python3:python3
import numpy as np
import matplotlib.pyplot as plt

# y = x**2
def mkdata(n):
  np.random.seed(0)
  px = []
  py = []
  for i in range(n):
    x = np.random.random()
    y = np.random.random()

    # y = x**2 未満の時プロット
    if y < x**2:
      px.append(x)
      py.append(y)

  return px, py

### 散布図を描く ###
# 発生させる乱数の個数：10000
# 点の大きさ：1
plt.scatter(*mkdata(10000), s=1, c="red")

# y = x**2のグラフを重ねて描く
xrange = np.arange(0, 1, 0.01)
plt.plot(xrange, xrange**2)

plt.show()
```

# 散布図グラフ描画
![python01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409451/ff5c1964-1aa2-3e88-4cda-c077ddd03253.png)
ハイ、こんな感じで面積がわかりまーす。
jQuery DataTables を使ってリッチなテーブルをサクッと作るか！

自分用メモ。

# 目的
[jQuery DataTables](https://datatables.net/) を使ってサクッと多機能テーブルを作る。

# 実装
#### table を用意する
今回は HTML でべた書きされたテーブルをサクッと多機能化する。

```html
<table id="my-table" class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>1234567890</td>
            <td>Me</td>
            <td>Japan</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>37564</td>
            <td>You</td>
            <td>Japan</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>18782</td>
            <td>He</td>
            <td>United States</td>
        </tr>
    </tbody>
</table>
```

#### CSS を CDN で追加する
head ブロックに以下を追加する。
```html
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
```
:::note warn
バージョンはその時々で適当なやつを。
:::

#### JS を CDN で追加する
jQuery より後ろに以下を追加する。
```html
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
```
:::note warn
バージョンはその時々で適当なやつを。
:::

#### テーブルを初期化する
```js
$(document).ready(function() {
    $('#my-table').DataTable();
});
```

# できた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107938/8274bf71-ba8b-2b35-5266-a524730cc62b.png)
あとはスタイルを調整したり、不要な機能を削除したりしてカスタマイズ。