OmniAICreator/Qiita-1.07M huggingface dataset:
paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 隣接リスト

隣接リスト (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step2

# 解答例
問題文に沿って実装します。ソートをすることを覚えておいてください。
```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");

//頂点の数 N と、辺の数 M 
const [N, M] = lines[0].split(" ").map(Number);

//隣接リストh
//準備
let h  = [];
for (let i = 1; i <= N; i++) {
    h.push([]);
}

for (let i = 1; i <= M; i++) {
    const [a, b] = lines[i].split(" ").map(Number);
    //隣接リスト作成
    h[a - 1].push(b - 1);
    h[b - 1].push(a - 1);
}

//隣接リストの各行の頂点番号は昇順にソート
h.map(row =>row.sort((a, b) => a - b));

//隣接リスト出力
console.log(h.map(row => row.join("")).join("\n"));
```
準備のところは１行でも書けます。
```javascript
//準備
let h  = Array(N).fill(0).map(v => v = []);
```
ソートと出力の部分は、まとめられます。
```javascript
//隣接リストの各行の頂点番号は昇順にソート
//隣接リスト出力
console.log(h.map(row => row.sort((a, b) => a - b).join("")).join("\n"));
```
ES Lint がJSのimportを勝手に削除するのを止める方法

## 症状
Nuxtのpluginsを利用し、
```
import {foo} from foofoo;
// 保存すると、import from foofoo; になってしまう
```
と記述しても、ESLintの不要なimportを自動削除(整形)するオプションがONになっていると消されてしまいます。

普段は良いのですが、pluginのようにimport関連だけ記述しておきたいような場合には非常に邪魔で、保存できなくなります。

## 解決方法
VSCodeの拡張機能のESLintの設定を変更します。
ESLintのsettings.json内に
```
"editor.codeActionsOnSave"
```
という項目があるはずです。

そこで
```
"source.organizeImports": false,
```
と記述し、importの整形をオフにします。

これで完了です。
初めての個人開発日記【Laravel】#1

# 作りたいWebアプリ
**”休日の予定を与えてくれるサービス”** を作っていきたいと思っています。

大学では授業の組み方によっては丸一日授業が全くない日が週に１、２回ほどあり、結構暇なことが多いのですが、せっかくの休日なのにネトフリやYoutubeをみたりしているとあっという間に1日が過ぎてしまいその日を無駄にしてしまった気分になることがたまにあります。

みなさんもせっかくの休日なのに予定が無くなにをしようか考えているといつの間にかもう夕方になってしまっていたり、ネットサーフィンで1日を無駄にしてしまった経験があるのではないでしょうか？

そんな経験から休日の予定を勝手に与えてくれるサービスがあればいいなと思い今回のサービスを考えました。

# 実装する予定の機能
箇条書きで欲しい機能を書き出してみました。
- ルーレットでやることが決まる
  - ルーレットの目がミッションになっている
  - ミッション例
    - 美術館に行く
    - 映画を見に行く
    - 行ったことのないカフェに行くetc...
- Twitterへの投稿機能
  - 投稿するとポイントゲット
  - ポイントのランキング化（月間）
  - 達成した日数の通算を見られる
    - カレンダーでスタンプ？
- ルーレットのカスタマイズ機能
  - 自分の好きなことでルーレットをカスタマイズできる
- ミッションの追加機能
  - 自分のルーレットにそのミッションを追加できる。
  - 他のユーザーが考えたミッションも追加できる。
  - 公開か非公開か選択
- ユーザー登録機能

まだ固まりきっていない部分や、技術的にできるかどうかわからない部分もあるので、作成していく段階でなくなったり、他の機能に変わったり、新しい機能が欲しくなったりするかもしれませんが今のところはだいたいこのような感じで開発を進めていこうと思います。
Amazon Neptuneサーバーレスを作ってみる

## 手順
Serverlessを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/71b0efe2-69cc-3b3e-d51d-13141c980501.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/a930b57b-5d95-bc75-4a37-a96c59c939f5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/8d311f31-f502-8ab7-78ff-8e4b10fd369b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/2e44093d-3a70-17ea-9d97-5f0b85350f84.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/2c11845e-3901-e515-7d95-07edf3a58b5a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/c73d4f9d-3d83-219f-1f75-54fd436ce488.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/cf3a4311-808e-12a4-fa74-68e7a8f4bbf1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/0009423a-e90c-ce86-f75a-a17abb81ed34.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367069/8ab95b13-5569-a651-82a2-b81e26d2633a.png)
Power BI workout - Display units / 表示単位

日本時間 11/7、突然の実装で面食らっていました。あわわわしてても仕方がないので対処を考えてみます。
レポートは済んでいるので製品チームなどからのおしらせを待つといいよ。

https://twitter.com/PowerBIxyz/status/1593438492121440257?s=20&t=naxOW7Aijmx8A0v5_qN6uA


# 起きていること
カードビジュアルを例にして、これまでは Power BI サービスを使用する時の言語を日本語(ja-JP)に指定していた時でも表示単位は Ｔ/ bn / M / K になっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/c5b8a7b6-53b9-fcfa-4bf6-94c4cf543acc.png)
ですが、表示単位も使用する言語に合わせて翻訳された単位が使用され始めています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/5d11d1c4-9c3e-d925-6492-6d07acb8aff6.png)
言語に合わせた実装は素晴らしいことだと思うのだけど、少し問題があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/524a6b8b-1cde-36be-1735-4e261078e586.png)
は？うっかりすると思ってもない表示になるのです。
# 対処方法
現時点で考えた対処方法を列挙
- サービスを使用する言語を en-US にする
- カスタム書式を使う

**サービスを使用する言語を en-US にする**
もっとも簡単だけど、レポートユーザが了解してくれるかどうか。

**カスタム書式を使う**
ちょっとひと手間ではあるけれども、以降の同じような出来事にも対応できそうだ。
表示用のメジャーを追加する。ただし、表示単位を使用した投影であることを明示しなければならない。

```Measure:Sales&#x20;amount&#x20;(百万)
Sales amount (百万) = [Sales amount]
```
たとえば 小数なし百万単位にするならカスタム書式を `#,##0,,;(#,##0,,)` にする。小数点以下必要ならカスタム書式に追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/f3d38d2b-dc1b-900f-637a-7057e938ca68.png)
ビジュアルの表示単位を "なし" にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/3f7d9f3f-87f5-9d98-48aa-9432f412f86b.png)
ね、簡単でしょ🤩ずっと使えるかどうかは知らない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/ff202ab1-f411-b127-36db-3038d241a2c1.png)

# 思ったこと🙄
~~プンスカ💢~~ プンスカおしまい

Power BI リリース当初は T / bn / M / K 表記ではなく日本語表記だったの。ただ、日本語フォントで表示できていなくて直してほしいっていうことしてた。

https://twitter.com/PowerBIxyz/status/1589478090664992768?s=20&t=naxOW7Aijmx8A0v5_qN6uA

もうすっかり慣れてしまった今のスタイルを変えるなら考えておくことはありそうだ。例えば、カード ビジュアルだと既定で使用されるフォントが異なりバランス悪すぎるし、じゃぁ、日本語フォントを定義するにしても難解すぎるよね。
表示する言葉を単純に翻訳するだけでは必ずトレードオフも発生するし、数字の読みかたって言語ごとに違うよね。

# その他
https://powerbi.connpass.com/

- [Power BI 勉強会 - connpass](https://powerbi.connpass.com/)
- [Power BI Desktop を使い始めるには](http://qiita.com/PowerBIxyz/items/6c4735cb5b5712e70981)
- [Excel で Power Query を使い始めるには](http://qiita.com/PowerBIxyz/items/52e563037b855a099ca9)
paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 隣接行列

隣接行列 (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step1

# 解答例
問題文に沿って実装します。
```javascript
const fs = require("fs");
const input = fs.readFileSync("/dev/stdin", "utf-8").trim();
const lines = input.split("\n");
//頂点の数 N と、辺の数 M 
const [N, M] = lines[0].split(" ").map(Number);

//隣接行列
//初期化
let g = [];
for (let i = 0; i < N; i++) {
    g.push(Array(N).fill(0));
}

for (let i = 1; i <= M; i++) {
    //各辺の両端の頂点 a_i , b_i 
    const [a, b] = lines[i].split(" ").map(Number);
    //頂点aと頂点bが辺で結ばれているので
    g[a - 1][b - 1] = 1;
    g[b - 1][a - 1] = 1;
}

//隣接行列出力
console.log(g.map(row => row.join("")).join("\n"));
```

隣接行列の初期化は以下のように一行でも書けます。
```javascript
let g = Array(N).fill(0).map(v => v = Array(N).fill(0));
```
paiza.ioでelixir その46

# 概要
paiza.ioでelixirやってみた。
練習問題やってみた。

# 練習問題
List.update_atをEnumで実装せよ。

# サンプルコード

```


[1, 2, 3]
|> List.update_at(1, &(&1 + 2))
|> IO.inspect

[1, 2, 3]
|> Enum.with_index
|> Enum.map(fn {val, ind} ->
    cond do
    ind == 1 ->
        val + 2
    true ->
        val
    end
end)
|> IO.inspect
        
            
```

# 実行結果

```
[1, 4, 3]
[1, 4, 3]

```

# 成果物

https://paiza.io/projects/JfcDlNzgjKXVssMkDoYj9g

以上。
プロジェクトの「コスト」

コスト見積の前提となる```工数```とは、ある作業を完了させるために必要な時間数のこと。
単位として```人日```や```人月```を用いる。人日は「ひとりの担当者が```その作業を終えるのに何日必要か```を表す。例えば、ある作業に５人日必要なら、１人のエンジニアが作業すれば作業期間は５日間になる。同じ作業に５人のエンジニアを投入して行えば、１日で完了する計算になる。

# 代表的なコスト見積手法
### 類推見積り（類似法）
```過去に行った類似するシステムの開発をもと```に、新システムとの```相違点```などを分析して、必要な工数とコストを見積もる手法

### パラメトリック見積り（係数見積り)
過去のデータと見積もる値に関わる変数との```統計的な関係```を用いて、```数学的に工数やコスト```を求める。ファンクションポイント法、COCOMOなどがある。
### 三点見積り
項目ごとに```３通りの値```を予測し、それぞれ重み（期待値)を掛けて見積値を算出する手法。
幅のある3つの```想定値で工数を予想```することで、より正確な見積値を算出できる。
#### 楽観値
```作業がうまく進んだ場合```

#### 最頻値
```いつものペースで完了できた場合```

#### 悲観値
```いろいろあって進みが遅くなった場合```
一般に、楽観値と悲観値の重み（期待値）は「１」、最頻値の重み（期待値）は「４』として計算し、その合計値を期待値の合計(1+1＋４＝６）で割って見積値を求める。
見積値＝（楽観値＊１＋最頻値＊４＋悲観値＊１）/６

### ボトムアップ見積り（標準タスク法、標準値法）
個々の作業を洗い出し、作業ごとに一定の基準で見積もる方法。WBSの最小単位であるワークパッケージやさらに```小さく作業を分割したアクティビティから工数とコストを予測して合計```することで、```システム全体にかかる工数やコストを算出する```。

### LOC法（Lines Of Code：プログラムステップ法）
システム全体の機能を```プログラムレベルまで分割・詳細化```し、プログラムのソースコードの行数(ステップ数)
に基づいて```開発工数を見積もる```方法。ただし、```開発環境や使用するプログラム言語が同一でないと、正確に見積もることができない```。

# COCOMO(COnstructive COst MOdel)
予測されるソースコードの総行数に「プログラムの特性、用いるハードウェアの特性、プロジェクトマネージャーやエンジニアのスキル...]などの```補正係数```を掛け、工数やコストを見積もる手法。改良版の```COCOMOⅡ```では、FP法などの概念を取り入れ、```企画・設計や成果物の検証工程など、開発全工程の見積りが可能```になった。

# ファンクションポイント（Function Point）法：FP法
ファンクションとは、機能のこと。```FP法```では、プログラムに含まれる```機能の数```や```その機能の複雑度```などから、必要なコストや工数を見積もる。機能に注目するため、```非エンジニアにもわかりやすく```、```ユーザ自身が見積もることが可能な方法。
なお求められたFP値は開発規模の尺度なるが、算出したFP値に単位当あたりの標準値を掛け合わせることで```コストや工数、作業期間などを定量的```に見積もることができる。

## FP法の５つの機能分類
FP法では機能を5つのタイプに分類し、これを```ユーザファンクションタイプ```と呼ぶ。
### 外部入力
```外部インタフェースファイル```を受け取り、これによって内部論理ファイルの作成、更新、削除などに出力する機能

### 外部出力
プログラムが内部論理ファイルの作成、更新、削除などを行い、```他のプログラムや装置などに出力```する機能

### 内部論理ファイル
```プログラムが扱うデータや制御情報のまとまり```のこと。作成、更新、削除を、このプログラム自身が行う。

### 外部インタフェースファイル
```他のプログラムやユーザから入力された、データや制御情報のまとまり```のこと。

### 外部紹介
外部インタフェースファイルを参照する機能。
```参照情報を単に画面の出力```したり、```他のプログラムへ渡すための機能```で、内部論理ファイルの書き換えは行わない。

## FP法の計算方法
FP法の計算は、まずプログラムに含まれた機能をユーザファンクションタイプごとに分ける。次にタイプ別の合計個数と、その```タイプの機能の複雑どによる重み付け係数```をかけてFP（ファンクションポイント)値を算出。さらに他のプログラムとの関係性などを基に定義された```プログラム全体の複雑度を示す補正係数```を掛け合わせ、プログラム全体のFP値を計算する。

# 関連記事
https://qiita.com/yasushi-jp/items/d128a06a5f6e6e22a0df

# 出典
https://gihyo.jp/book/2022/978-4-297-12375-8
Lightsail Google Search Consoleによる所有権の確認

# GoogleSearchConsoleによる所有権の確認方法
どこにHTMLをアップロードするのか迷ったので投稿します。

## できること
GoogleSearchConsoleによる所有権の確認ができるようになる。

## 環境
+ AWS LightSail
    + WordPressを同時にインストールした環境

## 手順
1. URLプレフィックスにて認証を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442933/b45c200f-ee30-4d97-eb22-d56a6c1d0d08.png)

1. 提示されたhtmlファイルをダウンロードする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442933/567413ff-5923-b970-dd24-820ebee405a0.png)

1. ダウンロードしたHTMLを以下のパスにSFTPにて送信する
~~~
/opt/bitnami/wordpress
~~~

＊不明点があればコメントください


## 参考文献
https://kinsta.com/jp/blog/google-site-verification/
Aurora Serverlessってサーバレスなのはわかるんだけどだからなんやねん。

# Amazon Aurora serverless
RDSの監視設計でリソースの扱いについてわかってなかったからさらっと調べてみたこと。
たぶんまだまだわかっていないこともあるけど、一旦備忘として記載。
またわかったことあったら追記
## 概要
Aurora Serverlessについて<br>
###  Aurora Serverless v1<br>
- インスタンスタイプ他を管理せず使える <br>
  - ユーザが管理するのはACU(Aurora Capacity Unit)とよばれるもの<br>
  - メモリ/CPU/Network容量の最小値と最大値のみ<br>
- Auto Scaling<br>
  - クライアントアプリケーションにより生成される負荷に対応してシームレスに実行される。<br>
  →ここでいう" 負荷 "とはCPU使用率とDBへの接続数<br>
  - Aurora Serverless v1 DB クラスターにアクティブな接続がない場合、容量ゼロ (0 ACU) にスケールダウン<br>(SecondsUntilAutoPause値:デフォルト5分の非アクティブ期間で0 ACUになる。)<br>
  - スケーリングポイント(スケーリングを実施するためのチェックポイント)を特定してスケールされる。<br>（SecondsBeforeTimeout値:デフォルト5分）<br>
:::note alert
- ※スケーリングポイントは以下のタイミングを除く。
    - クエリの実行時間が長い
    - トランザクションが進行中である
    - テンポラリテーブルまたはテーブルがロックされている
:::
- Manual Scaling
  - トランザクションが指数関数的に増加するような突然の極端な事態に対応するためにスケーリング操作を手動で開始することができる。
  
- 一定時間アクセスがない場合、自動停止する。
- 実行中は最小1ACUから2倍ずつスケーリングされる
- Multi-AZじゃない
- Read Replica未対応

[Aurora Serverless v1 の仕組み](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v1.how-it-works.html#aurora-serverless.how-it-works.auto-scaling)

### Aurora Serverless v2<br>
- 最小0.5ACUから0.5ACU刻みでスペックアップ・スペックダウンされる
- Amazon Aurora が持つすべての機能を提供 <br>（マルチAZ構成、最大で16インスタンスの立ち上げ、グローバルデータベースなど）
- スケーリングの際にトランザクションやDBコネクションに影響を与えない
- Multi-AZ
- Read Replica対応

[Aurora Serverless v2 の仕組み](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.how-it-works.html)

## Amazon Aurora Serverless v1、v2の違い
|                | v1                                                                                           | v2                                                                                               |
| -------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| ACU            | <ul><li>MySQL <br> 最小：1 <br> 最大：256 <br> </li><li>PosgreSQl <br>最小：1 <br> 最大：384 | <ul><li>MySQL <br> 最小：0.5 <br> 最大：128 <br></li><li>PosgreSQl <br> 最小：0.5 <br> 最大：128 |
| 料金           | 1ACUあたり0.10　USD/時間                                                                     | 1ACUあたり0.20　USD/時間                                                                         |
| マルチAZ機能   | なし                                                                                         | 可能                                                                                             |
| クラスター停止 | 自動停止可能                                                                                 | 手動停止が必要                                                                                   |

## 最後に
ちょっと突貫で情報を集めたんだけど、ローカルに保存すると
あれどこいったあれフォルダ、ん？あれってなる系なのでQiitaに。
Macのキーボードで記号を打つ方法

中点(·)やパイ(π)を打つ時、かな入力にして「中点」や「パイ」と打って変換していました。
半角入力から、かな入力に変更するの、なんか嫌ですよね。
半角入力で記号を打ちたいときは`shift`や`option`、`shift + option`を押しながら打つといいみたいです。
比較的使うコマンドと困った時に使える特殊文字のカンニングペーパーを簡単にまとめました。
Macの日本語JISキーボードの環境です。

# 比較的使うコマンド

| 記号・特殊文字 | キーボードショートカット |
|:-:|:-:|
| • | `option` + `8` |
| · | `option` + `shift` + `9`  |
| > | `shift` + `.(ピリオド)`  |
| ≥ | `option` + `.(ピリオド)`  |
| < | `shift` + `,(コンマ)`  |
| ≤ | `option` + `,(コンマ)`  |
| π | `option` + `p`  |
| µ | `option` + `m` |
| ÷ | `option` + `/` |
| … | `option` + `;(セミコロン)` |
| Å | `shift` + `option` + `a` |

# Macの特殊文字入力のカンニングペーパー

困った時はこちらで確認できます。
右上から「キーボードビューアを表示」をクリック。

![スクリーンショット 2022-11-07 15.58.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1881340/be6df2bd-34de-8ca5-7171-48d0916b3ba9.png)

【キーボード配列】

![スクリーンショット 2022-11-07 15.59.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1881340/bc497607-6707-4d77-8c24-c1f2bd3513e7.png)

【`shift` 同時に押すと入力できる文字】

![スクリーンショット 2022-11-07 15.59.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1881340/56190e5f-7762-0546-7cfd-2cb98b0a0778.png)


【`option` 同時に押すと入力できる文字】


![スクリーンショット 2022-11-07 16.00.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1881340/64b48bee-d2a2-1ed4-1ccd-c7db50b9a365.png)


【`shift` + `option` 同時に押すと入力できる文字】

![スクリーンショット 2022-11-07 16.00.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1881340/2e3378db-e189-f266-d432-23a1f98ae446.png)


# 最後に

Å(オングストローム)は、長さの単位で、10$¯^{10}$ m (10のマイナス10乗メートル)です。

この記事は以下を参考にしました。


https://interest-speaker.com/mac%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%81%A7%E6%89%93%E3%81%A1%E3%81%9F%E3%81%84%E6%96%87%E5%AD%97%E3%81%8C%E8%A6%8B%E5%BD%93%E3%81%9F%E3%82%89%E3%81%AA%E3%81%84%E3%81%A8/

https://www.chrome-life.com/mac/2952/
Proxmox VE 7 で Amazon Linux 2 を走らせる手順まとめ

# Proxmox VE 7 で Amazon Liunx 2 を走らせる手順まとめ
##### 1. ノードのシェルで、ローカルの適当な場所にAWSの公式イメージを落としておきます。
```
# wget https://cdn.amazonlinux.com/os-images/2.0.20221004.0/kvm/amzn2-kvm-2.0.20221004.0-x86_64.xfs.gpt.qcow2
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/b951c24b-2c5e-07a6-3042-14ae8e26245b.png)

##### 2. 別途、seed.isoを作って、GUIからアップロードしておきます。詳しくは[こちら](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/amazon-linux-2-virtual-machine.html)。
```
# nano meta-data

local-hostname: hogehoge
network-interfaces: |
  auto eth0
  iface eth0 inet dhcp
```
```
# nano user-data

#cloud-config
users:
  - default
chpasswd:
  list: |
    ec2-user:supersecret
ssh_pwauth: True
locale: ja_JP.UTF-8

runcmd:
  - [ cp, /usr/share/zoneinfo/Asia/Tokyo, /etc/localtime]
```
```
# genisoimage -output seed.iso -volid cidata -joliet -rock user-data meta-data
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/3de0baad-3f34-368e-c742-14d23878b82e.png)

##### 3.seed.isoをCDにマウントして普通にVMを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/7bfa662d-575e-fd79-5399-285c112207d9.png)
この際、すべてをvirtio等にしてしまうと、VMに供給されるエントロピーが不足して、gssproxyなど、乱数を使用するデーモンが起動できなくなる場合がありますので、CPUはhostにしておく等の必要があります。
また、cloud-initデバイスでログインID等を構成する場合は、isoのマウント等は必要ありません。
##### 4.ノードのシェルで、VMにAWS公式イメージ（先ほどダウンロードしたもの）をインポートします。qmコマンドについて詳しくは[こちら](https://pve.proxmox.com/pve-docs/qm.1.html)。
```
# qm importdisk 100 ~/amzn2-kvm-2.0.20221004.0-x86_64.xfs.gpt.qcow2 local-lvm -format qcow2
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/b8635ea2-1d6a-5660-0354-d96374689127.png)
##### 5.インポートしたディスクは、Unused Disk0 等になっているので、GUIからマウントします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/85580cfd-303b-a0c8-a6a7-b6146e267ddf.png)
##### 6.VMを作った際にできたディスクは、GUIから Detatch > Remove しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/26d20f8b-2977-abb7-b99a-decea3d423c6.png)

##### 7.VMの Options > Boot Order から、ブート順を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/e7097b48-ae6c-93d3-666d-eb404ea819f2.png)

##### 8.PowerONで起動するはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995798/a9378c42-bf3b-bd12-2674-6869486bfbc9.png)
【JavaScript】同一オリジン間ではwindow.postMessage()ではなくBroadcastChannelを使う

ブラウザのウィンドウ間でメッセージをやりとりする方法は`window.postMessage()`を使う方法が有名ですが、もう一つ`BroadcastChannel`というものを使った方法もあります。二者の特徴をまとめたのが以下です。

- `window.postMessage()`
    - 異なるオリジン間でメッセージの送受信が可能
    - 送信相手のwindowへの参照が必要
- `BroadcastChannel`
    - 同一オリジン間でしかメッセージの送受信ができない
    - 送信相手への参照が必要がない

ということで同一オリジンのウィンドウ間のメッセージのやりとりは`BroadcastChannel`を使うべきです。他のサイトはメッセージを受信することができないのでセキュリティ的に好ましいですし、開発者としても送信相手へのwindow参照を持つ必要がなく実装が単純になります。逆にオリジンを跨ぐ場合は`window.postMessage()`を使うしかないということになります。

ちなみに`BroadcastChannel`は主要なブラウザ全てでサポート済みです。

https://caniuse.com/broadcastchannel

# 使用方法
BroadcastChannelにはチャンネルという概念があり、あるチャンネルに送られたメッセージは同じチャンネルでしか受信されません。チャンネルは`BroadcastChannel`のコンストラクタにチャンネル名を与えることで指定します。以下の例ではチャンネル名として`channelName`を指定しています。

使い方は非常にシンプルです。

## 送信方法

```js
const channel = new BroadcastChannel('channelName');
channel.postMessage(message);
```

`message`は送信するメッセージです。`message`として送れる型の制約は正確に述べると複雑ですが、少なくともJSONと対応する型は送れます。オブジェクトや配列をネストした複合型でもOKです。

## 受信方法

```js
const channel = new BroadcastChannel('channelName');
channel.addEventListener('message', ev => {
  const message = ev.data;
});
```

上記コードにより`channel.postMessage(message)`で送信したメッセージが変数`message`として受信されます。

以上！

# 補足: 同一オリジンとは？
補足としてここでいう「同一オリジン」の意味を説明します。ここでいう「オリジン」とは簡単に言えばスクリプトが動いているブラウザのアドレスバーに表示されているURLのホスト名より前側(ポートがあるならポートより前側)の部分のことです。

まず一般にオリジンとはプロトコル、ホスト名、ポート番号の組のことです。例えば`http://example.com:8080/path.html`というURLのオリジンは`http://example.com:8080`です。

そしてここでいうオリジンがなんのオリジンかというと、閲覧コンテキストのオリジンと説明できます。閲覧コンテキストのオリジンとは先程の通り簡単に言えばブラウザのアドレスバーのURLのオリジンです。**スクリプトファイル自体のURLではありません。** つまり例えば以下のHTMLページが`https://www.example.com/index.html`として表示されている場合、その`<script>`タグのスクリプトの閲覧コンテキストはスクリプトファイルのURLのオリジンである`https://other.domain.net` **ではなく** `https://www.example.com`です。

```html:https://www.example.com/index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://other.domain.net/index.js"></script>
  </head>
  <body>
  </body>
</html>
```

以上で説明したオリジンが同じスクリプト同士では`BroadcastChannel`で通信できるということです。

# あとがき
`window.postMessage()`は前から知ってたけど`BroadcastChannel`は最近知ったので、みんな知らないんじゃね？と勝手に思って書いた記事。
amplify configureでエラーが出た際の対処法

「[AWS Hands-on for Beginners AWS Amplify を用いた Web サイトの構築方法を学ぼう](https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-amplify-2022-reg-event.html)」の実施中、
AWS Cloud9で`amplify configure`を実行した際に以下のエラーが発生しました。

```bash
$ amplify configure
Downloading release from https://package.cli.amplify.aws/10.4.0/amplify-pkg-linux-x64.tgz
node:internal/buffer:959
    super(bufferOrLength, byteOffset, length);
    ^

RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at new Uint8Array (<anonymous>)
    at new FastBuffer (node:internal/buffer:959:5)
    at createUnsafeBuffer (node:internal/buffer:1062:12)
    at allocate (node:buffer:415:10)
    at Function.allocUnsafe (node:buffer:380:10)
    at Function.concat (node:buffer:558:25)
    at Extract.<anonymous> (/home/ec2-user/.nvm/versions/node/v16.18.0/lib/node_modules/@aws-amplify/cli/lib/binary.js:127:37)
    at Extract.emit (node:events:525:35)
    at finishMaybe (/home/ec2-user/.nvm/versions/node/v16.18.0/lib/node_modules/@aws-amplify/cli/node_modules/readable-stream/lib/_stream_writable.js:624:14)
$ 
```

# 環境

- Instance type：**t3.small** (2 GiB RAM + 2 vCPU)
- Platform：Amazon Linux 2

# 対処法
インスタンスタイプを **m5.large** (8 GiB RAM + 2 vCPU)にして実行するとエラーが発生しませんでした。

```
$ free -h
              total        used        free      shared  buff/cache   available
Mem:           7.6G        561M        6.5G        524K        502M        6.8G
Swap:          488M          0B        488M
$ 
$ amplify configure
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
：
```

ハンズオンでは t3.small を使用するよう案内がありましたが、もし同様の事象が発生したらお試しください。
Pythonに パラメータとして日付を渡してみました - 第三弾

## 概要

データ分析において、データ抽出に年月のみ指定し、その年月の月初から月末までを取得する、、、、そんな理由でサクッと作ってみました。の第三弾！
Azureの請求データを CostManagement から取得するときに年月のみを指定し、その年月のデータを抽出することを想定しています。

ちなみに、[第一弾の記事](https://qiita.com/turupon/items/022cc53a086edb8e58d0)、[第二弾の記事](https://qiita.com/turupon/items/bc613cd074dfa76c12a3) はこちらになります。

### 実行環境

macOS Monterey 12.3.1
python 3.8.12

### 実行プログラム

```python:BillingMonth.py
from datetime import *
from dateutil.relativedelta import relativedelta
import argparse
import sys

# パラメータ年月から月初-月末の取得
def month_period(bm):
        
    try :
        # 月初
        bm = bm + '-01'
        fm_datetime = datetime.strptime(bm, '%Y-%m-%d')
        bm_fm = fm_datetime.strftime('%Y-%m-%d')
        
        # 月末 (来月の1日に合わせて1日分戻る)
        to_datetime = fm_datetime + relativedelta(months=+1,day=1,days=-1)
        bm_to = to_datetime.strftime('%Y-%m-%d')
        
        # print(fm_datetime)
        # print(bm_fm)
        # print(to_datetime)
        # print(bm_to)
        return bm_fm, bm_to
    except ValueError as e :
        print("ValueError = ", e)
        sys.exit()


# 画面表示
def period_to_display(bm_fm, bm_to):
    print('抽出期間 : ', bm_fm + ' 〜 ' + bm_to, '\n')


if __name__ == '__main__':
    parser = argparse.ArgumentParser(description='パラメータに年月を渡し、月初から月末までの年月日を返す')
    parser.add_argument('-b', '--bm', type=str, required=True, help='取得する年月(yyyy-mm)')
    args = parser.parse_args()

    bm_fm, bm_to = month_period(args.bm)
    period_to_display(bm_fm, bm_to)
```

### プログラムのHELP表示
 
```
$ python BillingMonth.py -h       
usage: BillingMonth.py [-h] -b BM

パラメータに年月を渡し、月初から月末までの年月日を返す

optional arguments:
  -h, --help      show this help message and exit
  -b BM, --bm BM  取得する年月(yyyy-mm)
```

### プログラムの実行
 
```
## うるう年
$ python BillingMonth.py -b 2020-02
抽出期間 :  2020-02-01 〜 2020-02-29 

## ふつうの年
$ python BillingMonth.py -b 2022-02
抽出期間 :  2022-02-01 〜 2022-02-28 

$ python BillingMonth.py -b 2022-4 
抽出期間 :  2022-04-01 〜 2022-04-30 
```

### まとめ

これでAzureの請求データを年月指定でその月のデータのみを取得することができるようになります。また、[この説明](https://learn.microsoft.com/ja-jp/rest/api/cost-management/query/usage?tabs=HTTP#querytimeperiod) から 時分秒の指定 がなくとも 日付のみ でその日の 23:59:59 までのデータをすべて取得できるようです。
【IBM Application Gateway】コンテナレジストリの変更について

# コンテナレジストリの変更について
これまでDocker Hubで提供されていたIBM Application Gatewayのコンテナイメージの提供先が変更となります。

Docker Hub でのイメージ提供は、2022年12月31までとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/11483863-7b00-cf71-8721-456169a52b8d.png)

新しいイメージは以下から取得できます。
https://docs.verify.ibm.com/gateway/docs/containers#ibm-application-gateway
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/a53b1346-b8ba-c2e3-19cb-943e035a1b81.png)


# イメージをPullしてみる

```
#podman pull icr.io/ibmappgateway/ibm-application-gateway:22.07
Trying to pull icr.io/ibmappgateway/ibm-application-gateway:22.07...
Getting image source signatures
Checking if image destination supports signatures
Copying blob 67d8ef478732 done
Copying blob a96e4e55e78a done
Copying blob fad38545ca8c done
Copying blob 0c374926e926 done
Copying config b0c9f955c5 done
Writing manifest to image destination
Storing signatures
b0c9f955c5f63b34fbf5d7a2b9dfeebabf3a9044a986aaef02e9b3398511c3f8

#  podman images
REPOSITORY                                    TAG         IMAGE ID      CREATED        SIZE
icr.io/ibmappgateway/ibm-application-gateway  22.07       b0c9f955c5f6  3 months ago   272 MB
```

# 参考
- https://docs.verify.ibm.com/gateway/docs/containers
- https://docs.verify.ibm.com/gateway/docs/containers#ibm-application-gateway
【データ基盤構築/BigQuery】毎日実行されるワークフローの中の特定のジョブに、週一回だけ実行されるように設定する

# 今回の課題
ETLツールを使用して複数のジョブが組み込まれたワークフローを組み、
そのワークフローを毎日実行している。

その中に週次データを取得するためのジョブを一つ組み込みたいのだが、
週次データを取得するジョブなので毎日実行する必要が無い。
そのため、週次データを取得するジョブだけは毎週日曜日にだけ実行されるように設定したい。

## 今回の課題を解決するクエリ
```SQL
select
    *
from
    `テーブル名`
where
    extract(dayofweek from [今日の日付が格納された変数。current_date()など。]) = 1 -- 日曜のみ実行されるように条件指定
    and date >= [13日前の日付が格納された変数]               -- 2週間前の月曜
    and date <= [7日前の日付が格納された変数]                -- 1週間前の日曜
```
WHERE句で上記のような述語を指定することで、
毎日このクエリを実行しても、
`毎週日曜日に13日前～7日前の週次データを返す`ように実装することができる。

理由はワークフローが実行された日が日曜ではなかった場合、
下記の部分がfalseとなり、データが抽出されないからだ。
```sql
extract(dayofweek from [今日の日付が格納された変数。current_date()など。]) = 1
```


# おまけ
下記のようなクエリが実行されるジョブをワークフローに組み込むことで、
月初のみ実行されるクエリを実装することもできる。
```SQL
select
    *
from
    `テーブル名`
where
    date_trunc([today()のような今日の日付が格納された変数], month) = [today()のような今日の日付が格納された変数]
```

以上です。
ノーコードツールAdalo – データベースコレクションから1個の情報を選んで詳細ページを表示する

たとえばデータベースに Thanksという名前のコレクションがある時に、リストではなくてその中の1個の詳細ページを表示したい。どうするのだろうか。

詳細ページは単独で存在するわけではない気がした。
Listのリンク先として「Current Thanks」を選ぶと、リストの要素をクリックした時に別ページに遷移する。
遷移先ページではマジックテキストとしてコンポーネントで「Current Thanks」の情報を選ぶことが出来るようになる。

これで詳細ページが出来るようだ。


![image](https://user-images.githubusercontent.com/13635059/200242061-0063266e-277f-4f0a-b4ed-ed7f42883489.png)


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
GitHubの初PUSHまで（Windows）

・Gitダウンロード
・githubアカウント作成
・githubでリモートリポジトリ作成
・ローカルリポジトリの作成
　ex)
  mkdir github
  cd github←ここにソースファイル格納しとく
  git add ファイル名
  git commit -m "first commit"
  git log←コミットできたか確認
  git push origin master

・pushの時にファイル存在しないなどのエラー出たら
　git add で追加したURLがHTTPになってないか→SSHにする
　SSHにするときのカギの設定方法は
 　https://qiita.com/shizuma/items/2b2f873a0034839e47ce　


   SSHの公開鍵の中身をgithubに登録するところを間違えていた。
$ clip < ~/.ssh/id_rsa.pub　
を使うと正しくコピーできており、成功した

・間違えた時
git remote rename [変更前リポジトリ名] [変更後リポジトリ名]
git remote set-url origin [変更先のURL]
昔書いたソースコードをSnykにかけてみた

　　昔書いたコードを何らかの理由でもう一度使用するかなにかするときにライブラリーのバージンとか気になるなーと思ったことはないでしょうか。いろんなやり方があるのでしょうが、この前知人がSnykというものを教えてくれたので試してみました。
SnykというのはDevSecOpsのツールで脆弱性などのチェックを開発をしながら行えるようなツールのようです。
やってみたのは
-昔書いたソースコードを探して(Githubから）
-Snykに登録

  それだけです。今回はNode.jsのソースコードでやってみました。
こちらがSnykのウェブサイトです。
https://snyk.io/
無料で登録できます。
登録できたらGitHubのレジストリーをプロジェクトという形で登録できます。
こちらは登録後にログインした後のダッシュボード画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/85165402-b161-34b8-d565-1e4db0b4e836.png)
まず最初にGitHubのレポジトリーを登録しましょう。
左側のメニューからProjectを選択、右上にある"Add Project"をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/38d7bc73-ff32-195e-72f2-e8021a11c865.png)
GitHubを選んでクリックするとご自分のGitHubのレポジトリーリストが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/5b1a510f-4ec7-4c26-3858-b764bca235d5.png)
チェックしたいレポジトリーを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/19ce0be7-9c8c-babd-aaab-8a67cc77e6f3.png)
自動的にいくつかのファイル、ソースコードがチェックsれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/14de05d5-bc15-ea36-22e3-3a38cf02e854.png)
ソースコードのここら辺が怪しいよ、とか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/39e248be-ad3a-8d5e-8e5b-589235516f54.png)
ライブラリーが古いよ、とか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/1e34ebcf-ce42-ee2d-4f01-837f75c32b75.png)
色々アドバイスされます。Fixしたい場合は　Fix this vulnerability をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/fd69f5a0-950c-6c3f-005d-99338c0f28e3.png)
プルリクエストを作ってくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/656885bb-e8db-fd60-1591-db602d19e186.png)
マージすれば完了。
昔のコードをもう一度使ってみる前に試してみるといいのかも。
Databricks Feature Storeワークフローの概要

[Feature Store workflow overview \| Databricks on AWS](https://docs.databricks.com/machine-learning/feature-store/workflow-overview-and-notebook.html) [2022/9/23時点]の翻訳です。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

本書では、オンラインとバッチの両方のユースケースにおける機械学習ワークフローでのDatabricks Feature Storeの使い方の概要を説明します。

Feature Storeを用いた典型的な機械学習ワークフローは以下のパスを踏みます。

1. 生のデータを特徴量に変換するコードを記述し、必要な特徴量を格納するSparkデータフレームを作成します。
1. Feature Storeで[特徴量テーブルとしてデータフレームを書き込みます](https://qiita.com/taka_yayoi/items/88ddec323537febf7784#databricks-feature-store%E3%81%AB%E7%89%B9%E5%BE%B4%E9%87%8F%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90)。
1. 特徴量ストアからの特徴量を用いてモデルをトレーニングします。これを行う際、モデルはトレーニングで使われた特徴量の仕様を格納します。モデルを推論に使う際、自動で適切な特徴量テーブルから特徴量を結合します。
1. モデルを[モデルレジストリ](https://qiita.com/taka_yayoi/items/e7a4bec6420eb7069995)に登録します。

これで、新規データに対する予測を行う際にモデルを使うことができる様になります。

バッチユースケースにおいては、モデルは必要な特徴量をFeature Storeから自動で取得します。
![](https://docs.databricks.com/_images/feature-store-flow-gcp.png)

リアルタイムサービングのユースケースでは、特徴量を[オンラインストア](https://docs.databricks.com/machine-learning/feature-store/online-feature-stores.html)に公開します。

推論時には、モデルはオンラインの特徴量ストアから事前計算済みの特徴量を読み込み、モデルサービングエンドポイントにクライアントからリクエストされたデータと結合します。
![](https://docs.databricks.com/_images/feature-store-flow-with-online-store.png)

# サンプルノートブック

Feature Storeタクシーサンプルノートブックでは、特徴量の作成、更新、モデルトレーニングとバッチ推論での活用のプロセスを説明します。

## Feature Storeタクシーサンプルノートブック

https://docs.databricks.com/_static/notebooks/machine-learning/feature-store-taxi-example.html

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
Kubernetes / OpenShift における IBM HTTP Server のサポートについて

タイトルの件、[こちら](https://www.ibm.com/support/pages/【information】ibm-http-server-websphereihsのサポートについて "Information】IBM HTTP Server for WebSphere(IHS)のサポートについて") の最下部に
>IHSとWASプラグイン、WASを同一のPod内に構成したIHS:WAS=1:1構成の場合のみ、例外的にサポートされます

とあります。

ですが、Pod 内のコンテナの構成については記載がありません。上のリンク先からリンクされている [こちら](https://publib.boulder.ibm.com/httpserv/ihsdiag/openshift.html "IHS openshift FAQ") にも記載がありません。
考えられる構成として以下の 2つがあるのですが、どちらがサポートされるのか念のため問い合わせてみました。

1\. 1コンテナ構成
1コンテナに IHS + プラグイン + WAS を構成する。そのコンテナを Pod に収容する。


2\. 2コンテナ構成
1コンテナに IHS + プラグインを、別のコンテナに WAS を構成する。これら 2つのコンテナを 1 Pod に収容する。

結果、サポートされるのは 2. の 2コンテナ構成でした。
IHS + プラグイン + WAS を 1つのコンテナに構成してしまうとサポートされませんのでご注意下さい。
Azure Fundamentals(AZ-900)：Azure の基礎: Azureの管理とガバナンスについて説明する「Service Trust Portal」

Microsoft Learnを用いたMicrosoft Azure Fundamentals(AZ-900)の試験内容をまとめる投稿です。
この投稿ではMicrosoft Learnで学ぶ内容をできるだけ簡潔にまとめております。
Azureの勉強を一から始める方の参考になれば幸いです。

## 今回の学習内容
**◆「Service Trust Portal」**
◇対応するMicrosoft Learn ラーニングパス
[Azure の基礎: Azureの管理とガバナンスについて説明する](https://learn.microsoft.com/ja-jp/training/paths/describe-azure-management-governance/)
◇対応するモジュール
[Service Trust Portal の目的について説明する](https://learn.microsoft.com/ja-jp/training/modules/describe-features-tools-azure-for-governance-compliance/6-describe-purpose-of-service-trust-portal)

※前回の投稿は下記から確認できます。
[Azure Fundamentals(AZ-900)：Azure の基礎: Azureの管理とガバナンスについて説明する「リソースロック」](https://qiita.com/fsd-jume/items/86c6c4378b7fb5c7eb8c)

## Service Trust Portal
**Microsoftのセキュリティ、プライバシー、コンプライアンスプラクティスに関する様々なコンテンツ、ツール、その他のリソースへのアクセスを提供**

### Service Trust Portalの提供内容(一例)
**◆豊富なセキュリティ実装と設計情報**
・Microsoft Cloudサービスによるデータ保護の方法など

**◆業界と地域に適用されるドキュメントやリソース**
・様々な地域のポリシーと規制に対するコンプライアンスを説明するドキュメント
・メディアやエンタメ業界向けのリソース
・米国政府機関のお客様専用のリソースなど

**◆Microsoft Cloudにおけるセキュリティ、コンプライアンス、プライバシーに関する詳細情報**
・一般的データ保護規則(GDPR)の特定の要件に対処できるサービスの機能
・GDPRをサポートするためにMicrosoftが取った技術的および組織的な措置に関するドキュメントなど

**◆センターに関する情報やよく寄せられる質問**
・セキュリティとコンプライアンスセンター
・Microsoftグローバルデータセンターなど

## 次の学習内容
**◆Azureと対話するためのツール**

https://qiita.com/fsd-jume/items/2bcd6f47f14553d4c4b0

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/e4ec76959adb547ac5e8
初めての個人開発日記【Laravel】#0

# Webアプリを開発してみたい！
大学でプログラミングの授業をきっかけにプログラミングに興味を持ち、これまでにHTML, CSS, javascript, React, PHP, Laravelの勉強を独学で行ってきました。
そろそろ何か自分のアイデアを形にできるのではないか？と感じたのでこれから数回にわたって、Laravelを用いたWebアプリ開発の開発日記を発信していこうと思います。Qiitaに記事を投稿すること自体が初めてなので拙い部分もあると思いますが読んでいただけると嬉しいです。
Adalo の Form の Set Automatically Field は hidden 的な動きをするようだ

入力フォームでユーザー入力を受け付けるのではなく、規定の値を受け渡すことが出来るようだ。
たとえば Books を作るページがある時、Name が必ず Foo になるフォームを作ってみる。

![image](https://user-images.githubusercontent.com/13635059/200234921-e58b3a85-6f7f-45d8-a750-d4462a82b447.png)
![image](https://user-images.githubusercontent.com/13635059/200234928-eda9f621-97c8-40f1-94cb-fa94ff3dbfb1.png)
![image](https://user-images.githubusercontent.com/13635059/200234940-1e82b181-584e-4673-bfb3-9f15cbd35328.png)

https://help.adalo.com/how-to/form-status


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
Azure仮想マシンサービスの特徴

●Azure仮想マシンサービスの特徴
・さまざまなOS、性能が選択できる
・迅速に展開できる
・柔軟に性能を変更できる
・強固なセキュリティとコンプライアンスが確保されている
・運用コストが抑えられる

●仮想マシンの作成計画
・仮想マシンの名前
・リージョン
・サイズ
・ディスク
・イメージ
・可用性オプション
・仮想ネットワーク及びサブネット

●仮想マシンのサイズ
サイズは後から変更できるが、サイズ変更には仮想マシンの再起動が必要。
【データ基盤構築/BigQuery】transaction処理を使用して、テーブルの差分更新を実装する。

# 今回の課題
BigQueryのトランザクション機能を使って、
データマートを差分更新する際に、冪等性の担保&データ欠損防止ができるように実装したい。

参考：[冪等性とは「同じ操作を何度繰り返しても、同じ結果が得られる性質」のこと](https://qiita.com/suin/items/316cb8aaf8dfcf11abae)

# トランザクション処理とは
簡潔に言うと、
`begin transaction`から`commit transaction`の中（トランザクション内）の複数のクエリの処理を、
１つの処理として実行して管理する仕組み。

トランザクション内で１でも処理が失敗した場合は、
すべての処理がトランザクション開始前に戻る。
といったイメージ。


参考：[BigQueryでトランザクション処理がサポート開始！！](https://dev.classmethod.jp/articles/bigquery-release-multi-statement-transactions/)


# 差分更新の実装方法
### 処理の流れ
1. トランザクション開始
2. TEMPテーブルを生成
3. 差分データ分を更新したいテーブルからDELETE（更新データを削除）
4. TEMPテーブルの内容をINSERT
5. TEMPテーブルの削除
6. トランザクション終了



### 使用クエリ
※使用しない部分はコメントアウト、使用する部分はコメントアウト解除。
　というかたちで記述しておくと、全量洗い替えしたくなった時でも便利。
```SQL
/* トランザクションでロールバックできるように調整 */
begin transaction; -- トランザクションはプレビューなので注意

/* 日付関連UDF */
create temp function yesterday() as (
    date('$yesterday$') -- 前日のこと
);

/* この部分は、初回・全量洗い替えの時用 */
-- create or replace table
--     `差分データを追加したいデータマートテーブル`
-- as

/* 一時テーブルを生成 */
create temp table 一時テーブル名 as
select
    *
from
    `元データ`
where 
    date = yesterday() --データを取得したい時点を指定する
;

delete
from
    `差分データを追加したいデータマートテーブル`
where
    date = yesterday() -- 上記で一時テーブルを生成したのと同じ時間のデータをデータマートから削除する。
;

/* 一時テーブルの内容をINSERT */
insert `差分データを追加したいデータマートテーブル`
select
    *
from
    `一時テーブル名`
;

/* 一時テーブルを削除しておく。*/
drop table `一時テーブル名`;

commit transaction;
```

# 使用例
実際に業務内でどのように使用したのかメモ
### 1)1回目の処理でデータマートを生成する
まずは、差分更新が必要なテーブルを用意する。（既にデータマートが存在する場合は、このクエリは不要）
```SQL
create temp function yesterday() as (
    date('$yesterday$')
);

create or replace table
    `result_table`
as

select
    date
    , fruit
    , revenue
from
    `fruit_revenue_table`
where
    1=1
;
```
#### 実行結果
|date|fruit|revenue|
|:-:|:-:|:-:|
|2022-11-01|りんご|200|
|2022-11-05|りんご|200|
|2022-11-05|みかん|300|

### 2)2回目以降の処理はこちらのクエリで処理を走らせる
* 前日分のデータが格納された一時テーブルを作る。
* 冪等性担保のために、前日分データをデータマートから除去する。
* データマートに一時テーブルのデータを挿入する。

これで差分更新が実現できる。
```SQL
create temp function yesterday() as (
    date('$yesterday$') -- 前日のこと
);

create temp table result_table_temp as
select
    *
from
    `fruit_revenue_table`
where 
    date = yesterday() -- 前日の売り上げを取得する
;

delete
from
    `result_table`
where
    date = yesterday() -- 冪等性担保のために、前日の売り上げをresult_tableから除去する。
;

/* 一時テーブルの内容をresult_tableにINSERT */
insert `result_table`
select
    *
from
    result_table_temp
;

/* 一時テーブルを削除しておく。*/
drop table result_table_temp;

commit transaction;
```
#### 実行結果
|date|fruit|revenue|
|:-:|:-:|:-:|
|2022-11-01|りんご|200|
|2022-11-05|りんご|200|
|2022-11-05|みかん|300|
|2022-11-06|いちご|300|
|2022-11-06|りんご|200|

以上です。
データエンジニアとして歩みをすすめる道標

## データエンジニアリングロードマップ(引用元: [今からはじめる、データエンジニアリング・ロードマップ](https://gihyo.jp/article/2022/10/primenumber-01datamanagement))
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673036/6d8b6c27-6436-f38e-ef75-2b0deea71c9d.png)

## データエンジニアとして最も大切なのは 【分析課題の整理】
- 手段から入ると、使用者に使われない分析基盤が出来上がる
- 目的は何で、誰の、どんな課題を解決するのか、といったゴール設定がとても大切
## 初級データエンジニア
- 前提知識→データの統合、蓄積→データの提供
- 上記が[[最小構成]]で実装できるレベル
- 社内外でメンターや顧問を探して、最短ルートで学びながら失敗の少ないデータ分析基盤ベストプラクティスを身につけること
## 中級データエンジニア
- 初級データエンジニアの領域を、より多くのデータ種類や量をふまえてシステム構築、運用保守ができる
- さらに、発生する課題の解決として、データ品質や利便性の向上→組織への浸透まで実装できるレベル
- 分析の品質や効率性を上げて、組織そのもののグロースを意識することも重要ポイントであり、組織とともに分析基盤が成長する状態を作ること
## 上級データエンジニア
- キャリアパスは2種類
- ジェネラリスト
	- 中級データエンジニアまでの領域を一通り学んでおり、チームを指揮しながら組織においてインパクトの大きいデータ分析課題を解決することができる
- スペシャリスト
	- 要素技術の一部に関して、最新の技術を駆使しながらより難易度の高い課題を解決する能力が必要
	- 膨大な量のデータを、一定時間内に高速に処理するETLに関する能力など
## 自身の当面の目指すところ
- 初級データエンジニアとして名乗れるようになること
- スキルセット
	- SQLに関する最低限の知識
	- DWHにデータ統合を行い、ETLを使いデータを提供
		- Change Data Caputure
		- Data Streaming
	- 統合したデータを可視化するためのBIツールの活用
	- DWH内にデータマートを作成し、分析しやすい形にデータを整備（データモデリング）
	- ジョブを管理し自動化するための、ワークフローオーケストレーション
### 参考記事
https://gihyo.jp/article/2022/10/primenumber-01datamanagement
UIHostingControllerをpresentしてdismissする

まだまだ移行期なので、UIKitな画面からSwiftUIなViewを表示したい時があるのでメモ。

```TestView.swift
struct TestView: View {

    var dismiss: (() -> Void)?

    var body: some View {
        NavigationView {
            Text("Test View")
            .navigationTitle("List Navigation Sample")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading, content: {
                    closeButton {
                        dismiss?()
                    }
                })
            }
        }
    }

    private func closeButton(_ action: @escaping () -> Void) -> some View {
        Button(action: action) {
            Image(systemName: "xmark")
        }
        .foregroundColor(.black)
    }
}
```

```TestHostingController.swift
final class TestHostingController: UIHostingController<TestView> {

    init() {
        super.init(rootView: TestView())
        rootView.dismiss = { [weak self] in // ← rootView経由でハンドラを設定するのがポイント
            self?.dismiss(animated: true)
        }
    }

    @MainActor required dynamic init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
```

```SomeViewController.swift
// 表示する側のサンプルコード
let hosting = TestHostingController()
hosting.modalPresentationStyle = .fullScreen
navigationController?.present(hosting, animated: true)
```

もちろんpushも可能。
modalだと、以降のナビゲーションをSwiftUIで書けるので良いかもしれない。
「Bad state: No element」というエラーの対処法

# はじめに
<!-- 発端や概要を記載 -->
プチ記事というか、私的なメモ、備忘録に近い内容ですが、同じくエラーに困っている方がいればとおもい公開しておきます。
Flutterで開発中に、「Bad state: No element」というエラーが出たのですが、スタックトレースを遡っても原因がよくわからなかったので、手当たり次第にググって解決法を見つけました。
同じく原因わからない方の参考になれば幸いです。

# 解決法
解決法というかエラーの原因ですが、`List`で`firstWhere`を使っている箇所でリストが空の場合や一致する要素がない場合に発生するようです。
→ [参考記事](https://stackoverflow.com/questions/52354195/list-firstwhere-bad-state-no-element)

なので、私の場合、怪しい個所を探して、リストが空の場合にガードする処理を入れて防ぎました。

参考記事によると、`orElse`を指定すると大丈夫みたいです。
`list.firstWhere((a) => a == b, orElse: () => print('No matching element.'));`

また、下記のような拡張メソッドもあるみたいです。
```dar
import 'package:collection/collection.dart';

list.firstWhereOrNull((element) => element == other);
```
Mac買ってしたこと(2022)

新しいMACBOOKを買って、TIME MACHINEで移行したが、追加でいくつかしたので、半分自分用にメモ


- iTerm2のインストール(と思ったがAppStoreから開けた？)
- Dual Displayの位置の再設定
- CapsLockキーにCtrlを割り当て
- Alfredをインストール(と思ったがAppStoreから開くと起動できた？)
- Evernoteのインストール
- Microsoft Word, Excel, PowerPointのインストール
- と思ったらMicrosoftの認証通らずブラウザでログインの上再インストール💦


意外とすることはなかった。
また何か追加でしたら追記する。

追記
- Xcodeの再ダウンロード＆インストール
- Dropboxの接続
[Blazor]子コンポーネントのCSSに手を加えずに親コンポーネントのスタイルを適用させる

備忘録。

# 事象
コンポーネント化されたプロジェクト内の共通部品を使用する際、自身が作成している画面に子コンポーネントとしてそのまま取り入れようとすると見た目に統一性がなくなってしまう為、一部のスタイルは変更したい。（フォントサイズを小さくしたい等）
しかし、プロジェクトのルール等の都合によって直接子コンポーネントのCSSを編集することは禁止されている…

# 対処
親コンポーネント（自身が作成している画面）のCSSにて`::deep`を付与することにより、子や孫のコンポーネントにも親と同様のスタイルが適用される。

```css:Parent.css(親コンポーネントのCSS)
::deep h3 { 
    font-size: 12px;
}
```

# 参考
- https://learn.microsoft.com/ja-jp/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0#child-component-support
クラッシュやANRが多いとPlayストアの掲載情報に警告が表示されるぞ

2022 年 11 月 2 日に Android Developers Blog で次の記事が公開されました。

><b>[Raising the bar on technical quality on Google Play](https://android-developers.googleblog.com/2022/10/raising-bar-on-technical-quality-on-google-play.html)</b>
02 November 2022

翻訳すると「 <b>`Google Play の技術的品質の基準を引き上げる`</b> 」とのことだ。具体的には次のように <font color="Red">2022 年 11 月 30 日から、PlayStore のアプリ情報に警告文が表示される</font> らしい。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33505/0882b8ec-ed4e-362a-afbc-0fc407087c68.png" width="40%" />

出典）[Raising the bar on technical quality on Google Play](https://android-developers.googleblog.com/2022/10/raising-bar-on-technical-quality-on-google-play.html)

## なぜPlayStoreに警告文が表示されるようになるのか

同日に公開された「[Play it forward: Evolving our platform for another decade of developer success](https://android-developers.googleblog.com/2022/11/play-it-forward.html)」を見ると、ユーザーはダウンロードしたアプリやゲームに優れたエクスペリエンスを期待しており、Googleはそれに答えるため「ユーザーに信頼できるエクスペリエンスを提供する」と書かれています。

そのためクラッシュやANRが頻発するアプリケーションは警告または Google Play ストア からの除外が適応されていくということです。

## 指標

今回設けられる指標は次のとおりです。

|コアバイタル  |全体  |電話モデルごと  |
|---|:-:|:-:|
|ユーザーが認識するクラッシュ率  |1.09%  |8%  |
|ユーザーが認識した ANR 率  |0.57%  |8%  |

※ 「ユーザーが認識した ANR 率」とは、具体的に "`アプリケーションが応答しない`" または "`5 秒間フリーズ`" になります。

## Android Vitals でアプリの品質をモニタリングしよう

[Android Vitals](https://developer.android.com/topic/performance/vitals) は、Android デバイスの Google Play アプリの安定性とパフォーマンスを改善するための Google の取り組みです。今のアプリがどうなっているのかは Android Vitals を見てみると良いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33505/6fd2ac1e-a8d6-611d-8548-79afc137ce94.png" />

ただAndroid Vitals を Play Console で定期的に確認より [Play Developer Reporting API](https://developers.google.com/play/developer/reporting) を使って CI で継続的に確認したほうがよいです（というかおすすめされてる

Android Vitals における統計情報の確認は次の記事もあわせて見ておくと良いです。
https://support.google.com/googleplay/android-developer/answer/9844486?hl=ja

## 今後について

Google は引き続き品質向上を目指しています。特に Blog の最後には次に書いてあるとおり<font color="Red">安定性指標 2% 以下を目指している</font>ことが記載されています。

> Although we’re starting at 8%, we’d like developers to aim for per-phone stability metrics that are no worse than 2%.

まずはリリースされているアプリの Android Vitals を確認し、リファクタリングなどの改善を通じで 2% を切ることを目指しましょう！
unity package template

```package.json
{
  "dependencies": {
    "com.unity.collab-proxy": "1.17.2",
    "com.unity.ide.rider": "3.0.15",
    "com.unity.ide.visualstudio": "2.0.16",
    "com.unity.ide.vscode": "1.2.5",
    "com.unity.live-capture": "1.1.1",
    "com.unity.render-pipelines.universal": "12.1.7",
    "com.unity.test-framework": "1.1.31",
    "com.unity.textmeshpro": "3.0.6",
    "com.unity.timeline": "1.6.4",
    "com.unity.ugui": "1.0.0",
    "com.unity.visualscripting": "1.7.8",
    "com.vrmc.gltf": "https://github.com/vrm-c/UniVRM.git?path=/Assets/UniGLTF#v0.104.2",
    "com.vrmc.univrm": "https://github.com/vrm-c/UniVRM.git?path=/Assets/VRM#v0.104.2",
    "com.vrmc.vrm": "https://github.com/vrm-c/UniVRM.git?path=/Assets/VRM10#v0.104.2",
    "com.vrmc.vrmshaders": "https://github.com/vrm-c/UniVRM.git?path=/Assets/VRMShaders#v0.104.2",
    "com.unity.modules.ai": "1.0.0",
    "com.unity.modules.androidjni": "1.0.0",
    "com.unity.modules.animation": "1.0.0",
    "com.unity.modules.assetbundle": "1.0.0",
    "com.unity.modules.audio": "1.0.0",
    "com.unity.modules.cloth": "1.0.0",
    "com.unity.modules.director": "1.0.0",
    "com.unity.modules.imageconversion": "1.0.0",
    "com.unity.modules.imgui": "1.0.0",
    "com.unity.modules.jsonserialize": "1.0.0",
    "com.unity.modules.particlesystem": "1.0.0",
    "com.unity.modules.physics": "1.0.0",
    "com.unity.modules.physics2d": "1.0.0",
    "com.unity.modules.screencapture": "1.0.0",
    "com.unity.modules.terrain": "1.0.0",
    "com.unity.modules.terrainphysics": "1.0.0",
    "com.unity.modules.tilemap": "1.0.0",
    "com.unity.modules.ui": "1.0.0",
    "com.unity.modules.uielements": "1.0.0",
    "com.unity.modules.umbra": "1.0.0",
    "com.unity.modules.unityanalytics": "1.0.0",
    "com.unity.modules.unitywebrequest": "1.0.0",
    "com.unity.modules.unitywebrequestassetbundle": "1.0.0",
    "com.unity.modules.unitywebrequestaudio": "1.0.0",
    "com.unity.modules.unitywebrequesttexture": "1.0.0",
    "com.unity.modules.unitywebrequestwww": "1.0.0",
    "com.unity.modules.vehicles": "1.0.0",
    "com.unity.modules.video": "1.0.0",
    "com.unity.modules.vr": "1.0.0",
    "com.unity.modules.wind": "1.0.0",
    "com.unity.modules.xr": "1.0.0",
    "com.unity.formats.fbx": "4.2.0",
    "com.unity.postprocessing": "3.2.2",
    "com.unity.probuilder": "3.0.9",
    "com.unity.cinemachine": "2.8.6"
  }
}
```
M1 MacでAWS Lambdaへ dockerイメージを cdk deploy すると exec format error になる

# 現象
M1 MacでAWS LambdaへDockerイメージをcdk deployしたところ、デプロイはうまくいきますが、Lambdaを動かすとexec format error になります。

```
IMAGE	Launch error: fork/exec /lambda-entrypoint.sh: exec format error	Entrypoint: [/lambda-entrypoint.sh]	Cmd: [app.handler]	WorkingDir: [/var/task]
```

# 対策
いろいろ調べるとM1 Mac上ではDockerイメージのビルドのデフォルトがArm64になっている（当たり前だが）ためでした。対処法として環境変数を設定してDockerのビルドのデフォルトを変更することもできるらしいですが、それだとコードを他の人に渡したときに同様のエラーを発生させることになるので、Dockerfileに記述するのがいいのではないかと思います。

```Dockerfile:Dockerfile
FROM --platform=linux/amd64 public.ecr.aws/lambda/python:3.8
```

上記のように「--platform=linux/amd64」をいれてあげるとM1 Mac上でビルドされたDockerイメージがAWS Lambdaで動きます。

ちなみにいろいろ検索して[Stack Overflow](https://stackoverflow.com/questions/71373337/invalidentrypoint-for-aws-lambda-with-python-docker-container)で同様の現象に直面している人がいて、対処法がわかりました。

# 所感
今回は人から譲り受けた環境で cdk deploy してこのような事象が発生しました。発生したエラーからは対処法に結びつきづらいので、ハマるとなかなかの時間を取られてしまうと思います。AWSは全くの素人なので、対処法にたどり着くまでになかなかの時間を要しました。ちなみにMac上でDockerを立ち上げる前にcdk deployすると別のエラーが発生します。これもなかなか気づきづらい。
node jest導入（チュートリアル）

## jestを使う前にやること
まず、npmとnodeはインストールすること。
npmインストール：https://docs.npmjs.com/cli/v7/commands/npm-install 　（参考）
nodeインストール：https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09 （mac参考）

```
// プロジェクトのルートディレクトリで実行。空っぽのpackage-lock.jsonができる
npm install

// 指定したバージョン
nodebrew install-binary {version}
// 最新のバージョン
nodebrew install-binary latest
```
## jestインストール
下記のコマンドでjestをインストールすると、package-lock.jsonにいろいろ設定が追加される。

```
npm install --save-dev jest
```


## ファイルの作成
■テストしたいファイル作成（sum.js）

```
function sum(a, b) {
  return a + b;
}
module.exports = sum;
```

■テストファイル（sum.test.js）

```
const sum = require('./sum');
 
test('adds 1 + 2 to equal 3', () => {
  // expext(テストしたいメソッド名(第一引数, 第二引数)).toBe(returnされる値);
  expect(sum(1, 2)).toBe(3);
});
```

■pakage.jsonに追加

```
{
  "scripts": {
    "test": "jest"
  }
}
```

## テストコマンド
以下のコマンドでテストを実行する

```
npm run test
```

```
[jest] npm run test                                                                                                                                                                                                                 14:44:36

> jest@1.0.0 test /Users/yamada-min/Desktop/study/code/jest
> jest

 PASS  ./sum.test.js
  ✓ adds 1 + 2 to equal 3 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.034 s
Ran all test suites.
```

テスト実行後、上記の様な結果になっていればテスト成功。
失敗した場合はFAILになり、どこがエラーになっているのか詳細もでてくる。
【UE4.UE5】ゲームアイコンを変えよう！！


# ・ゲームアイコンを変えよう
初めてゲームアイコンを変更する人は、この動画のように少しつまずくかもしれません。

https://gyazo.com/1a860aa47e089cedad011f04b21a3d2f

<br>
<br>
<br>

### ・こんな人に読んで欲しい
**「写真が表示されないよ...」**
**「PNGやJPEGでもダメだった...」** みたいな感じです。（3分前の自分みたいに）
<br>
<br>
<br>
<br>
### ・解決方法
そういうときは基本的に、**「拡張子」** が悪いかもしれません。
**「ICO」** に変換しましょう！（今回はPNG→ICOに変換しました）

https://convertio.co/ja/png-ico/


https://convertio.co/ja/jpg-ico/
<br>
<br>
<br>
### ・解決方法その二（おまけ）

今回は **「256×256」** で作成しました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843707/cb6d1a11-91fd-d23b-52d1-9b8bed7e98dd.png)

これでサイズを変更できます（たくさん変更できる！！）

https://resizeappicon.com/

<br>
<br>
<br>
<br>
スクショはGyazoで撮っています
無料でクラウドストレージが無制限ですし、直近10枚までならスクショが見れます
この記事のスクショやGIFにも使われてるんで、おすすめです

https://gyazo.com/about?lang=ja

あと前よりも記事が綺麗にかけたの凄いでしょ（）
<br>
<br>
<br>
<br>
## ・参考
https://youtu.be/AHTGqrEpwI0

https://unrealengine.hatenablog.com/entry/2016/08/09/234919

<br>
<br>
<br>

## ・宣伝

Noto

https://note.com/ggrks_ue4

Discord鯖　　(気軽に進捗上げてね、デバッグ募集とかもOK！)

http://discord.gg/xBMBWbrRDS

Twitter　(今すぐフォローしやがってくださいませ)
https://twitter.com/MapleSyrup77