OmniAICreator/Qiita-1.07M huggingface dataset:
GTMを使ってNextjsにGoogleAnalyticsを導入してみた

# はじめに
NextjsのアプリケーションにGoogleAnalyticsを導入するのに少し苦労したので備忘録としてまとめます

# 前提
- firebase hostingでホスティングしていること

# 導入手順
## GTMの設定
1. [GoogleTagManager公式](https://marketingplatform.google.com/intl/ja/about/tag-manager/)へ飛んでfirebaseと同じアカウントでログインする
1. 画面に沿ってアカウント・コンテナの作成を行う
    > コンテナ名
    URLが **https:\//example.com** の場合、**example.com**にするとわかりやすい

    ターゲットプラットフォームはwebを選択する。
1. タグを追加する
    以下のように設定する
    ![スクリーンショット 2024-05-05 122703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554025/d272f07e-3e43-977f-e178-309f4f759072.png)
    
    :::note info
    タグIDの設定方法
    GTMのサイトの左上にある矢印マークからホームに戻る
    Googleタグというタブがあるのでそれをクリックすると、自分のfirebaseプロジェクトと同じ名前があるはず。そこのIDをコピーして貼り付け
    **2つIDが存在している場合、どっちか一つだけ貼り付ける**
:::


## Nextjs側の設定
こちらの公式ドキュメントを見れば一発で設定できるかと思います。

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries

僕の場合カスタムイベントを設定しなかったので、GoogleTagManagerコンポーネントを追加すればそれで基本的な設定は完了です。

# 確認方法
GTMのワークスペース(タグの設定をした画面)の右上に、Previewボタンがあるのでそれをクリックします。

# 終わりに
参考にしていたサイトが少し情報が古かったようですが、公式ドキュメントを見ればなんとかなってよかったです。

# About Me
- X(Twitter)

https://twitter.com/shunii_hack
【ChatGPT＋DALL-E3】どんな風にしてプロンプトを書いていますか？


　どうも、カーブミラーです。

　今回は、どんな風にしてプロンプトを書いているのかを、私を例にして書きます。グダグダですw

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はありません。あしからず。
:::

　では、本題です。

　ChatGPTは
　　プロンプトを
　　　重視します。

　例えば、
　　“✘✘✘について教えてください”と
　　　入れれば、それなりの回答は
　　　　得られます。

　しかし、
　　本来、こちらが欲しい回答では
　　　ない場合が多いもの。

　その回答を見て、
　　生成AIは使えない、と
　　　判断するのもわかります。

　それでも
　　どのような回答が欲しいのかを
　　　伝えられれば、生成AIは
　　　　可能性を持った存在だと
　　　　　理解できるはずです。

　そのための
　　チャット形式なわけだし、
　　　そのための
　　　　プロンプトテンプレートが
　　　　　あったりするわけです。
***
　さて、
　　画像生成AIであるDALL-E3は
　　　その点、どうでしょうか？

　今のところ、
　　プロンプトテンプレートは
　　　ありませんが、
　　　　詳細な情報を与えれば、
　　　　　良い結果が出力される
　　　　　　ということは同じです。

　しかし、
　　思い付きで
　　　詳細をイメージしていない場合、
　　　　簡単な言葉での指示に
　　　　　ならざるを得ません。

　というか、
　　私はガチャを期待して
　　　簡単な指示をする場合が
　　　　多いですね😸

　昨日（2024/05/04）も
　　X-Twitter上での
　　　人のポストに反応していました。
　　　　（“オツカレー”と発言）

　その方は、
　　“お疲れ様”のつもりで
　　　使ったのでしょう。

　でも
　　私は“どんなカレーだろう？”と
　　　思ってしまったのです。

　そこで
　　““オツカレー”と聞いて思い付いたものを描画して”と
　　　ChatGPTに指示していました😅

　結果、
　　お疲れなカレー丼が
　　　描画されました🤣

　でも
　　なぜどんぶり？

　まぁ、
　　それは置いといて。

　私は
　　こうした、
　　　単語やちょっとした文章は
　　　　“落書きみたいだな”と
　　　　　思っています。

　特にヒマつぶしの落書きですね。
　　イメージを描き出す落書きとは
　　　違って、ペンを走らせていたら
　　　　出来上がる、あるいは
　　　　　不完全でもやめられる。

　そうしたヒマつぶしの落書きを
　　続けていると、似たような
　　　絵が書けることがあります。

　そこに意味がある
　　のかもしれませんが、
　　　心理学者でもない自分には
　　　　なんとも言えません。

　もしかしたら
　　現在の悩みや
　　　欲しいものを
　　　　無意識的に描いているのかも。

　落書きをChatGPTに渡したら
　　教えてくれるのかな？
　　　やらんけどw

　なんとも
　　参考点があったのかなかったのか
　　　わかりませんでしたね😅

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
語学学習用アプリの開発（途中）

語学学習用のアプリを開発中です。
語学の教科書にはmp3などの音声ファイルが付いていますが、これにテキストの文章を同期させ、音声とともに文章を強調表示させたく、２つのアプリを開発途中です。
1つは、文章に時間タグを埋め込む、SentenceTimeStamper、もうひとつは時間タグを埋め込んだファイルと音声ファイルを同期させ、再生・表示するアプリTextVoicePlayerです。どちらもGitHubにソースコードを公開しています。
これらはPCアプリですが、今後Android版の再生アプリを開発したいと思います。

# SentenceTimeStamper

### 注意：
~~このアプリは、現在ソースコードをダウンロードしてもうまくビルドできないことがあります。（現状、私のPCではリビルドできるのですが、、、原因は何でしょう？）~~
＜追記2024.6.21＞
原因が少しわかってきました。本アプリはNAudio1.9か1.7は.net Framework4.0を使っていて、私の開発pcには入っているのですが、他のPCには入っていないためビルドができないようです。またNAudio.WaveFormRenderer.libはバージョンが2.0にアップしていてこれにも対応しなければいけませんでした。またC#とNAudioを勉強し直しです。）


## アプリの説明
このアプリケーション[SentenceTimeStamper](https://github.com/let-us-study-with-textvoice/SentenceTimeStamper)は、mp3など音声ファイルとその内容を書き起こしたテキストファイルから、音声に同期したテキスト部分を強調して表示させるために、テキストファイルに時間タグを埋め込むための語学学習用のソフトウエアである。

![動作例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501068/c53a72d3-5484-3dc3-9dd9-0e1fd263e308.png)
<iframe width="560" height="315" src="https://www.youtube.com/embed/yUVzrxalX_4?si=eDdpOJnCG0rO0iM5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

時間タグを埋め込んだテキストファイルは、拡張子がstsになり、フォーマットは次のようになる。これは、音楽ファイルにその歌詞を表示させるlrcファイルの考え方を拡張した。

フォーマット
```
[開始時間(分:秒.1/100秒)]テキスト文字[/終了時間(分:秒.1/100秒)]
```
stsファイルの実際の例
```
[00:01.03]　　日本京都大学研究人员的研究表明，[/00:03.74][00:04.10]把利用iPS细胞形成的血液成分[/00:07.42][00:07.68]注入再生不良性贫血的患者体内后[/00:11.00][00:11.39]有望改善患者的症状。[/00:13.20][00:14.01]据悉，[/00:14.31][00:14.76]京都大学已在日本国内率先就这一研究成果[/00:18.63][00:18.84]向政府提交了临床试验申请，[/00:21.76][00:22.95]政府有关部门将于近期开始对申请进行审议。[/00:26.57]
```


## stsファイルを再生・表示するためには、
stsファイルを再生させるためには、[TextVoicePlayer](https://github.com/let-us-study-with-textvoice/TextVoicePlayer)を使うと、再生できます。

stsファイルを再生アプリ：[TextVoicePlaye](https://github.com/let-us-study-with-textvoice/TextVoicePlayer)の紹介
![TextVoicePlayer動作画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501068/97160def-b5be-0328-7bd1-4664bab3ec2e.png)
<iframe width="560" height="315" src="https://www.youtube.com/embed/ppIAsEHOrds?si=kwBgq8P3P2MJnG9R" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

また今後TextVoicePlayerforAndroidを開発したいと思います。（４年前に挑戦したのですが、途中で挫折してしまいました。再チャレンジしようと、このブログを書きました。）


## 使用した技術
このアプリは、[NAudio](https://github.com/naudio/NAudio)を使っています。一部ソースコードをいじっています。~~SentenceTimeStamperは４年ほど前に作ったアプリで、開発当時の事を忘れてしまい、どこをいじったか分かりません。（また、開発メモはHDDが壊れたため、無くなってしまいました。）~~


## 謝辞
このアプリを作るきっかえを与えてくれた、qiitaの記事[「C#でSoundCloudライクな波形を表示する音楽プレーヤを作ってみる」](https://qiita.com/siy1121/items/dd06a5e700dcf9543af7)と、[wa2cさんのMedoly](https://play.google.com/store/apps/details?id=com.wa2c.android.medoly&hl=ja&gl=US)に感謝します。
[wa2c](https://qiita.com/wa2c)さんのMedolyの音声ファイルとLrcファイルを同時に開く技術は、すごいと思います。
バッファロー製ルータとIPv6の組合せでLINEが使えなくなった件

# 問題の概要

自宅のインターネットプロバイダを乗り換えたら、自宅WiFi接続時にiPhoneのLINEで通知は来るのにメッセージが受信できなくなった。問題の解消まで意外に時間がかかってしまったので、同様の問題に遭遇している方の解決のヒントにでもなれば幸いと思い、記憶を辿りつつメモします。(最初に言っておきますが、きちんと検証できた訳ではなく状況から自分なりに原因を推測した話です💦)

## もう少し問題を詳しく

- 自分のAndroidスマホでは特に問題なし。
    - ただしGoogle VPNを有効にしてる方がレスポンスよい。
- 自分以外の家族のiPhoneにLINEの通知は来るけどメッセージを開けない、送れない。
    - WiFiをオフにして5Gで接続すると問題なく使える。
    - それ以外のインターネット検索や動画視聴は可能。  
- WiFI接続した端末から外部サイト：「[あなたの IPv6 をテストしましょう。](https://test-ipv6.com/)」で確認するとIPv6関係が軒並みNG。 (iPhone, Android, Mac共)
    - AndroidスマホでGoogle VPN有効時は全てOK。
- Macでブラウザやメールでの画像表示がワンテンポ遅れる気はしてたが、不自由するほどの問題はなし。
- ルータ設定でIPv6接続をやめてPPoE接続にするとLINEの問題は解消。
    - 接続速度がかなり落ちるので、家族からLINEは我慢するから戻すよう言われる。

# プロバイダ変更

少し前にOCN光から@&ZeroWidthSpace;nifty光に乗り換えた。

# 使用ルータの機種とファームウェアバージョン

- BUFFALO WXR-11000XE12
- Version 1.15

ルータ自体はプロバイダ変更前から引き続き使用。ただOCN光ではインターネット接続をホームゲートウェイ[^2]が行っており本ルータはその下にぶら下げていた。プロバイダ変更に伴い本ルータをインターネット接続に使用するようになった。ファームウェアは購入後2度更新したけど問題の解消には至らず。

# ルータWAN(Internet)側設定

## Internet

![Internet/Internet設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264719/b5bb4952-87a7-9db3-2abc-15bc3087e9fb.png)

@&ZeroWidthSpace;niftyもNTTの光回線を使用しているので、「OCNバーチャルコネクトを使用する」を選択[^1]。プロバイダ変更前はホームゲートウェイ[^2]がルータとしても機能していたけど、プロバイダ変更と同時にホームゲートウェイのルータ機能は無効にされた(ホームゲートウェイ自体は返却せずそのまま使えと言われた)ので、インターネット接続設定をこのルータで行うのは初めて。
ここの設定を行った際、何となくこれまで使用していたGoogle DNSサーバアドレスを設定。これ自体は間違いではないと思うけど、これをやらければ多分ハマることもなかった…。そういえばIPv4の設定しかないな…とは思ったものの、IPv6側は自動設定なのかな…くらいに思っていた。

[^1]:「インターネット＠スタートを行う」で回線タイプの自動検出を行っても同設定となる。
[^2]: 外部サイト： [ホームゲートウェイ（レンタル）｜フレッツ光｜NTT西日本公式](https://flets-w.com/opt/hgw_rent/)

## IPv6

### NDプロクシ

![Internet/IPv6設定(NDプロクシ)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264719/c430e057-2f37-a0a0-b815-5c210d587e06.png)

IPv6の接続方法は、IPv6ルータ機能でWAN→LANパケットをフィルタしてくれるらしい「NDプロクシを使用する」を選択[^1]。これを選択すると図のように他に設定できる項目は表示されないので、その他は自動でよきに設定されるものと思っていた。

### IPv6ネイティブ

![Internet/IPv6設定(IPv6ネイティブ)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264719/da2cf5fa-6307-b330-6626-cd5213ae912c.png)

一方、図のように「IPv6ネイティブを使用する」または「NTTフレックス光ネクストを使用する」を選択すると、DNSサーバ他の設定項目が表示される。図は後から手動でGoogle DNSサーバのIPv6アドレスを入力したところ。ここの初期設定がどのようになってたかはメモとれてなかったけど、当初DNSサーバのIPv6アドレスは入力していなかった。

# 結論

## 何がいけなかった？

- 結果的に[IPv4 DNSサーバアドレスのみ](#internet)指定していたのが原因だったと思う。
    - 当初、[NDプロクシ](#nd%E3%83%97%E3%83%AD%E3%82%AF%E3%82%B7)使用時には設定項目が表示されないため、IPv6 DNSサーバの指定ができない/不要だと思っていた。
    - 色々試す中、IPv4 DNSサーバアドレスを指定しないよう設定変更するとLINE問題が解消した。
    - IPv4 DNSサーバアドレスを指定するとIPv6側も手動設定となるのか？
        - [Internet](#internet)、[IPv6ネイティブ](#ipv6%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96)各設定ページでIPv4, IPv6両方のDNSサーバアドレスを指定することでもLINE問題は解消した。現在はこの状態。
    - だとしたらとっても分かりにくい！
        - バッファローさん、[Internet](#internet)または[NDプロクシ](#nd%E3%83%97%E3%83%AD%E3%82%AF%E3%82%B7)の設定ページにIPv6 DNS設定と説明を表示するべきではないですか？
    - ネットワークにあまり明るくなく詳しい検証もできてないけど、アプリやOSの組合せによっては、相手ホストにIPv6でアクセスできない場合にIPv4でのアクセスを試みないのかな？詳しい方教えてください。

下記はLINE問題解消後のルータの状態。前の状態に戻して検証することができてないけど、問題があった時にはIPv6 DNSサーバアドレスが設定されていなかったのだと思う。推測ばかりでスミマセン:bow_tone3:

![ステータス/システム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264719/a001380c-f370-650b-b7d9-4f242d41f984.png)
LinuC1~3や各種構築標準教科書のハンズオン用のメモ

* [VirtualBox上のゲストOSからホストOSにpingが通らない](#virtualbox上のゲストosからホストosにpingが通らない)
* [Almalinux9でアレをアレしたい時](#almalinux9でアレをアレしたい時)
* [CUI環境でDNSを変更](#cui環境でdnsを変更)
* [OpenLDAP](#openldap)
* [OpenSSH](#openssh)

## VirtualBox上のゲストOSからホストOSにpingが通らない
教科書通りにネットワーク周りを設定し、外部へのpingは通るのに何故かホストOSにだけ通らなかった。
原因は単純で、ホストOSのWindowsファイアウォールの設定だったという…。
![スクリーンショット 2024-05-05 112553.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3692804/65cb3174-e5fa-3577-e13b-182f0499bada.png)

## Almalinux9でアレをアレしたい時
RHELで非推奨になっているパッケージとかはベースリポジトリからインストールできないので、サードパーティーリポジトリのEPELを有効にしてEPELからインストールする。
手順は以下の2行。
`dnf config-manager --set-enabled crb`
`dnf install epel-release epel-next-release`


## CUI環境でDNSを変更
自分はhost0とhost2のOSをCUI環境でインストールしてたので、以下の手順で行った。

DNSの書き換え。
`nmcli con modify enp0s8 ipv4.dns 192.168.56.100`
書き換えた後はenp0s8の接続をオン／オフで更新を反映する。
`nmcli con down enp0s8`
`nmcli con up enp0s8`
ちゃんと更新されたか再度確認。
`nmcli con show enp0s8`


## OpenLDAP
#### 教科書通りに作ったldifってファイルどこに置くの？
LPI日本支部のハンズオン動画では /root/ldif ディレクトリを作成してそこに置いていた。

#### 設定の初期化
ldapaddやmodifyでなんかエラーが出るけど直し方がよくわからんかったのでググったら再インストールしてる人が多かった。
まずはslapdを停止。
`systemctl stop slapd`
/etc/openldapディレクトリの中を削除。
`rm -fr /etc/openldap/*`
/var/lib/ldapディレクトリをDB_CONFIG以外削除。
`find /var/lib/ldap -type f | grep -v -E 'DB_CONFIG' | xargs rm -f `
再インストール。
`yum reinstall openldap openldap-servers openldap-clients`
PythonでGUIチックな業務効率化ツールを作る

業務の諸作業を自動化するツールを作りたかったので調べてみたところ、Panelライブラリというものが良さそうなので使ってみました。Panelライブラリについては以下のページを参考にしてください。

https://qiita.com/8_hisakichi_8/items/717b0c78c00a9de9bd5a

ツールに対する要求としては以下のとおりです。

- フリーソフトインストール禁止の環境でもつかえること
- GUIで使用できること
- 改造が容易であること

要求に対するPanelライブラリの特徴は以下のとおりです。

- フリーソフトインストール禁止の環境でもつかえること -> WSL上のPythonで動くためOK
- GUIで使用できること -> ダッシュボードがあるため、GUIチックに使えるためOK
- 改造が容易であること -> Pythonで動いておりビルド不要かつ、機能追加したい場合新規にスクリプトを作成すればいいのでOK

# 作ったもの

ファイルを一括でリネームするツールです。

https://github.com/wooolwooolwoool/python_work_utils.git

画面イメージは以下のような感じです。良ければ使ってみてください。

![rename_ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596698/6bc88f5d-90f2-5a64-0caf-c1fc50a826df.png)


# 実装方法

実装方法は以下のページを参考にしてください。ここではこのページに記載されていない事項について記載します。

https://qiita.com/8_hisakichi_8/items/717b0c78c00a9de9bd5a

### ダッシュボード起動方法

ダッシュボードを起動したい場合は、以下のようにpanel serveというコマンドに.pyファイルを指定して起動します。.pyファイルは以下のようにワイルドカードを使用することが可能です。

```bash
$ panel serve app/*.py
```

複数のスクリプトを起動させている場合は、http://localhost:5006にアクセスすると、アプリケーションを選択することができます。
機能追加したい場合はスクリプトを追加して、ダッシュボードを再起動すればOKです。

![start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596698/585b6170-e659-6828-abec-bc8b793ced58.png)

### 動的に入力フォームなどを追加、削除したい場合

動的（ボタン押下時など）に入力フォームなどを追加したい場合は、以下のようにpn.Columnなどのコンテナをあらかじめ用意しておき、そこにAppendすることで追加されます。

```python
# リネーム対象ファイル名の表示用コンテナ
rename_inputs_container = pn.Column()
```

```python
input_widget = pn.widgets.TextInput(name=filename, placeholder='リネーム後のファイル名 ※手動で編集可')
rename_inputs_container.append(input_widget)
```

Listと同様に、remove()やclear()も可能です。


## Dockerイメージ作成方法

以下のDockerファイルを参考にしてください。

https://github.com/wooolwooolwoool/python_work_utils/blob/main/Dockerfile
プロジェクトにおけるリスクの考え方と対策

# はじめに
プロジェクトマネージャー試験に出てくるリスクについて残していきます。

## リスクとは

IPAでは、リスクの定義として、「発生確率を持ち、最終的に損失または利益になること」とあります。
設計工程での顧客要望のよる仕様変更、機能の追加等もリスクにあたります。

## リスクの対応はいつから考えているか

問題の発生後に作成するものではなく、事前に作っておくもので、プロジェクト計画段階で作成します。
プロジェクト開始前、要件定義時、設計工程時、開発工程時、テスト工程時、システム移行時等で考える必要があります。
リスクの例としてプロジェクト開始前では、人員確保、顧客の不確定要素がリスクとして上げられます。

人員確保

ほかの仕事との兼ね合いや時期などにより社内、社外から要員を決めます。開発を行う要員が確保できない場合、リスクとなります。

顧客の不確定要素

顧客側のプロジェクト推進体制についても、リスクとなる要素の一つになります。

## マイナスのリスクに対する対応の基本的な考え方

### マイナスリスク例

要件変更のリスク

顧客の要求が途中で変更される可能性がある。
市場環境の変化により、製品・サービスの仕様を変更する必要がある可能性がある。

技術的な問題のリスク

予期せぬバグが発生する可能性がある。

### マイナスリスクの考え方

後で記載するプラスのリスクの考え方でもありますが以下の考え方があります。

エスカレーション

対応策がプロジェクトマネージャーの権限を越えると判断した場合や、プロジェクトのスコープ外である場合にとられる。
プログラムレベルなどの上位権限などで対応される。

転嫁

リスクそのものを第三者へ移すこと。

軽減

リスクの発生確率と発生した場合の影響の大きさを受容可能なレベルまで低下させること。

受容

リスクへの対策を何もとらず、リスクが発生した場合、そのリスクの発生による影響を受け入れること。
許容範囲内としてリスクを容認すること。

## プラスのリスクに対する対応の基本的な考え方

### プラスのリスク例

開発コストの削減

オープンソースソフトウェアやライブラリを活用することで、開発期間を短縮できる可能性がある。アジャイル開発手法を採用することで、開発の無駄を減らすことができる可能性がある。

### プラスリスクの考え方

エスカレーション

マイナスリスクと同じ。

活用

プラスのリスクを確実にするために対応をすること。

共有

プラスのリスクの実行権限を第三者に割り当てること。

強化
プラスのリスクの生じる確率を増加させたり、影響度合いを大きくするための策を講じること。
passcardのような物を作った

# passcardとは

[これ](https://www.makuake.com/project/passcard/)
見た目格好良いしパスワードメモして持ち歩くよりいいじゃん
と思ったんですけど９月発売で先が長いなーと思ったので似たような物作ってみようと思って作りました

９０００円するの高くない？　と思って調べたら、ステンレスに印刷する加工を小ロット注文すると２万円～かかるので passcard は十分お安いですね、シリアルナンバーによる再発行などの管理もあるようですし、そういう面も考えると高いということは無いと思います

# 作ったアプリ
[https://ikuo0.github.io/encrypto_matrix/contents/index.html](https://ikuo0.github.io/encrypto_matrix/contents/index.html)
サーバにデータ送信するような処理は無いので安心して適当にいじくってみてください

[ソースコード](https://github.com/ikuo0/encrypto_matrix/tree/main/contents)

## 使い方
seed update を納得いくまで適当に連打します
表示されている文字変換表を画像とかで手元に保存します

## 文字変換表の使い方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104691/c13944ad-38e1-506a-05ca-43e544c1f63e.png)


### 4桁の暗証番号の作り方
数字４桁のパスワード作成
サンプル画像の　０　１　２　３　を順番に見て
左上の数字だけを順番につなげていきます
４９２６
となります

英数字パスワードを作成したいのであれば右上に注目し繋げると
oDCM
となります

同様に記号を含めたい場合は左下に注目して繋げると
opG1
となり、記号が混ざらないですね
見る場所を下に下げて
８９ａｂ　の欄を使用して左下に注目して繋げます
&(e3
となりました

このように作りたい暗号種類によって「左上（数字）」「右上（英数字）」「左下（英数字記号）」を使い分けます
右下はカードに表示されている文字の対応表です、カードに表示されている文字をランダムに並べ替えたものになります
「左下（英数字記号）」とは記号種類、英語大文字小文字など、構成要素が異なりますので別物です


本家とは使い方が結構違います
本家はそもそもランダムに並べる事で使いやすいと考えており
自分はシンプルな変換表のほうが良いと考えたのでランダムにはせず昇順に並べました


JavaScriptも含んだHTML、CSSのプログラム課題として丁度よい規模感だなーと思いました
robloxでassistant その14

# 概要
robloxでassistantやってみた。

# 質問

DataStoreServiceを教えて

# 回答
DataStoreServiceは、Robloxのデータストアにアクセスするためのクラスです。データストアは、プレイヤーのインベントリアイテムやスキルポイントなど、セッション間で永続化する必要があるデータを保存するために使用されます。データストアは、経験ごとに一貫性があり、異なるサーバー上の場所を含む経験内のどの場所からでも同じデータにアクセスして変更することができます。

データストアに対して細かいパーミッション制御を追加し、StudioやRobloxサーバーの外部からアクセスする場合は、Open Cloud APIを使用することもできます。

Studioでのアクセスを有効にするには、以下の手順を実行します：

ゲームを公開する（File > Publish to Roblox）。
ホームタブから、Game Settingsウィンドウを開きます。
セキュリティセクションで、Enable Studio Access to API Servicesをオンにします。
変更を保存します。
データストアへのアクセスは、Class.DataStoreServiceをスクリプトに含めることで行います。Class.DataStoreService:GetDataStore()関数を使用して、名前でデータストアにアクセスします。例えば以下のようになります：
```
local DataStoreService = game:GetService("DataStoreService")
local experienceStore = DataStoreService:GetDataStore("PlayerExperience")
```
データストアへのアクセスは、サーバースクリプト内でのみ可能です。Class.LocalScript内でクライアント側からアクセスしようとするとエラーが発生します。

新しい経験では、レガシースコープ機能の使用は推奨されていません。代わりに、データストア内のキーをリスト化してプレフィックスを使用することで、キーの整理を行うことができます。既存の経験でスコープを使用している場合は、引き続き使用することができます。

以上がDataStoreServiceに関する基本的な情報です。もし他に質問があればお知らせください。

以上。
robloxでassistant その13

# 概要
robloxでassistantやってみた。

# 質問
leaderstatsを教えて

# 回答

leaderstatsは、Robloxの組み込み機能であり、プレイヤーの統計情報を表示するためのフォルダです。プレイヤーがゲームに参加すると、このフォルダが自動的に作成され、統計情報が保存されます。例えば、スコアや通貨の量などの情報をleaderstatsに保存することができます。leaderstatsは、プレイヤーの統計情報を表示するためのリーダーボードに使用されます。

以下は、leaderstatsを設定するための基本的な手順です：

ServerScriptService内に新しいスクリプトを作成し、名前をPlayerSetupとします。
PlayerSetupスクリプト内に、onPlayerJoinというカスタム関数を作成します。
onPlayerJoin関数内で、leaderstatsという名前のフォルダインスタンスを作成し、プレイヤーに親要素として設定します。
以下は、具体的なコード例です：
```
local function onPlayerJoin(player)
   local leaderstats = Instance.new("Folder")
   leaderstats.Name = "leaderstats"
   leaderstats.Parent = player
end

game.Players.PlayerAdded:Connect(onPlayerJoin)
```
このコードを使用すると、プレイヤーがゲームに参加するたびに、leaderstatsフォルダが作成され、プレイヤーに統計情報を保存するための場所が提供されます。

なお、このコードはプレイヤーの統計情報を保存するだけであり、セッション間での情報の保存にはデータストアという高度なコーディング概念を使用する必要があります。



以上。
robloxでassistant その12

# 概要
robloxでassistantやってみた。

# 質問
RemoteEventを教えて

# 回答

RemoteEventは、Robloxのデータモデル内のオブジェクトであり、クライアントとサーバーの間で非同期な一方向通信を行うために使用されます。
RemoteEventを使用すると、クライアントからサーバーへ、サーバーから特定のクライアントへ、またはサーバーから全てのクライアントへ通信を行うことができます。

RemoteEventを作成するには、Roblox Studioのエクスプローラーウィンドウで以下の手順を実行します：

RemoteEventを挿入したいコンテナの上にカーソルを合わせます。
サーバーとクライアントの両方からアクセスできる場所に配置する必要があります。
例えば、ReplicatedStorageに配置することが一般的ですが、場合によってはWorkspaceやTool内に配置することも適切です。
コンテナ名の右側に表示される ? ボタンをクリックし、RemoteEventインスタンスを挿入します。
インスタンスの名前を目的に応じて変更します。
RemoteEventを作成した後、クライアントからサーバーへ、サーバーからクライアントへ、またはサーバーから全てのクライアントへの一方向通信を行うことができます。

クライアント → サーバー サーバー → クライアント サーバー → 全てのクライアント

クライアントは直接他のクライアントと通信することはできませんが、RemoteEvent:FireServer()メソッドを使用してイベントを発火させ、
イベントハンドラ内でFireClient()またはFireAllClients()を呼び出すことで、実質的に1つのクライアントから別のクライアントにイベントを送信することができます。

詳細なコードサンプルやRemoteEventの詳細については、Robloxの公式ドキュメントの「Remote Events and Callbacks」を参照してください。



以上。
Windowsに標準で載っているOpenSSHは弱い

Windowsに標準でOpenSSHが載るようになって久しいが，Kernelに乗ってしまっているのでOpenSSHのバージョンが上がらないのが玉に瑕．

![img](https://i.imgur.com/havjosS.png)
# cases
- 最新の署名方式に対応できていない．
    - https://github.com/PowerShell/Win32-OpenSSH/issues/1551
- scpが遅い
    - 最新版はもはやscp/rcpプロトコルは使わない．時代はsftp
- 一部のssh-config機能が使えない

そもそも，暗号系でバージョンが上がらないのは非常に危険．

# OpenSSHのバージョン更新

https://github.com/PowerShell/openssh-portable

ここで開発が進められている．自力ビルドしたい人はこちらへ．りどみの一番下にビルド方法が記載されている．

ビルドはめんどくさい!というひとのためにも，コンパイル済みバージョンが用意されている．

https://github.com/PowerShell/Win32-OpenSSH/releases/latest

こちらから，OpenSSH-Win64-vx.x.x.x.msiと書かれたファイルをダウンロードして実行でインストール可能．
robloxでassistant その11

# 概要
robloxでassistantやってみた。

# 質問
ReplicatedStorageを教えて

# 回答

ReplicatedStorageは、Robloxのデータモデル内の特定のコンテナであり、サーバーとクライアントの両方に複製されるオブジェクトを含んでいます。
このコンテナは、サーバーサイドのClass.ScriptやクライアントサイドのClass.LocalScriptなど、両方の側からアクセスされる必要があるClass.ModuleScriptオブジェクトなどに使用されます。
また、必要になるまで3Dワールドに存在する必要のないオブジェクト（例：Class.ParticleEmitter）を複製して親にするためにも、このコンテナを使用することができます。

詳細な情報については、Robloxの公式ドキュメントの「Client-Server Runtime」を参照してください。

以上。
robloxでassistant その10

# 概要
robloxでassistantやってみた。

# 質問
FireServerを教えて

# 回答

FireServerは、Robloxのクライアントからサーバーに対してイベントを発火させるためのメソッドです。以下のように使用します。

RemoteEvent:FireServer(args)
RemoteEventは、クライアントとサーバーの間で非同期な一方通行の通信を可能にするオブジェクトです。
argsは、イベントハンドラーに渡す引数です。
注意点として、サーバー上のイベントハンドラーの最初のパラメータは常にクライアントのPlayerオブジェクトであり、その後に追加のパラメータが続きます。

例えば、以下のように使用することができます。
```
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- RemoteEventの参照を取得
local remoteEvent = ReplicatedStorage:FindFirstChildOfClass("RemoteEvent")

-- イベントを発火させる
remoteEvent:FireServer("Hello, server!")
```

この例では、ReplicatedStorage内のRemoteEventオブジェクトを取得し、FireServerメソッドを使用してイベントを発火させています。
引数として文字列を渡していますが、任意のデータを渡すことができます。

なお、この回答はRobloxのドキュメンテーションに基づいていますが、詳細なコードや設定に関しては、具体的な質問に基づいてさらなる情報を提供することができますので、質問の詳細を教えていただければと思います。


以上。
gpgでパスフレーズ入力画面でループする場合、強度チェックの文字数不足かも。

# gpg @ MacOS terminalでのパスフレーズ入力がループする

## 強度チェックでdenyされているかも

```console
❯ brew info gpg
==> gnupg: stable 2.4.5 (bottled)
GNU Pretty Good Privacy (PGP) package
https://gnupg.org/
Installed
/opt/homebrew/Cellar/gnupg/2.4.5 (140 files, 14.3MB) *
  Poured from bottle using the formulae.brew.sh API on 2024-03-18 at 16:08:46
```

```console
┌─────────────────────────────────────────────────────────────────┐
│ Enter passphrase                                                │
│                                                                 │
│                                                                 │
│ パスフレーズが一致。
│                                                                 │
│ パスフレーズ: ****_____________________________________________   │
│                                                                 │
│ 繰り返****_________________________________________________________
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │                                                             │ │
│ └─────────────────────────────────────────────────────────────┘ │
│         <OK>                               <キャンセル(C)>        │
└─────────────────────────────────────────────────────────────────┘
```

これでOKで遷移すると再びこの入力画面に戻って来る。

どうも実は下部の空のボックスはパスワード強度チェック結果らしい。(cursesのメータ?)

```console
┌─────────────────────────────────────────────────────────────────┐
│ Enter passphrase                                                │
│                                                                 │
│                                                                 │
│ パスフレーズが一致。
│                                                                 │
│ パスフレーズ: ***********______________________________________   │
│                                                                 │
│ 繰り返***********__________________________________________________
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮100%▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮│ │
│ └─────────────────────────────────────────────────────────────┘ │
│         <OK>                               <キャンセル(C)>        │
└─────────────────────────────────────────────────────────────────┘
```

なにか%が出ていれば実行してくれるハズ。

試し中で4桁程度でOKしてたのでハマりました。

UI的バグ。だと思う。```--verbose```でも何も出ない。

```pinentry```とか```GPG_TTY```とかも絡むっぽい。
変数名を冗長にしたら変数名で悩まなくなった

# 変数名を冗長にしたら変数名で悩まなくなった

「短い変数名が良いのだ」という謎のルールを持っていたために長い間、事あるごとに変数名で悩むことが多かったのですが
躊躇なく長い変数名を使うことで変数名の作成で悩む機会を減らしました
という話しをサンプル交えて少しだけしていきます

## 変数名で悩んでしまう例

``` javascript
  var chars_o = getOrigin(); // origin characters の略
  var chars_e = encryptoCharacters(chars_o); // encrypto characters の略
  var chars_c = specialCut(chars_e); // cuted characters の略
  var chars_c = concatFinalForm(chars_c); // concat characters の略
  // 最後で変数名が被ってしまい、こういう場面で悩む
```

こんな感じで、略称作ろうとした時に同じアルファベットが被ったりして「どうしよう？？」となるんですよね
最終的に番号付けたり、2つ目だけフルネームにしたりとか色々足掻いて動作は問題無いけど統一感を失った見た目に汚いコードになってしまったりしてました

## 省略しないことで解決を図る

``` javascript
  var originCharacters = getOrigin();
  var encryptedCharacters = encryptoCharacters(originCharacters);
  var cutedCharacters = specialCut(encryptedCharacters);
  var concatedCharacters = concatFinalForm(cutedCharacters);
```

省略しないことで統一感を失うという事態を回避しました

### 冗長な変数名のデメリット
関数名、クラス名と被った時に結局悩む
具体例の以下の箇所

``` javascript
var encryptedCharacters = encryptoCharacters(originCharacters);
```

関数と変数が名前被りを起こしかけています
こういった場面では、「関数側に動作を付け加える」を根本的なルールとして、そもそもそういう状況を減らします
以下修正後

``` javascript
var encryptoCharacters = createEncryptoCharacters(originCharacters);
```

関数名含めて全体を修正する

``` javascript
  var originCharacters = getOriginString();
  var encryptoCharacters = createEncryptoCharacters(originCharacters);
  var cutCharacters = cutSpecialForm(encryptoCharacters);
  var concatCharacters = concatFinalForm(cutCharacters);
```

諸々修正して統一感を保てたと思います
COBOL時代こんな感じだったのかもとか思いました（COBOLほぼ未経験だけど）


# 短い変数名は格好良い、抽象化と相性が良い（ように見える）
という理由によりわりと最近まで10年以上の期間、短い変数名、関数名にこだわってたんですけど、検索しづらい、置換の時めんどくさいなどのデメリットに耐えられなくなって冗長な変数名、関数名をつけるようになりました
こういった組み方に変更して２年目くらいですが今のところ快適です

オンラインテキストエディタでもローカルでも、入力補完機能が当たり前についているので想像していたほど入力コストがかからずストレスも無いです

chatGPTに目的を告げて変数名を考えさせると割と良い物出してくれるので、それも解決策の一つになりますね

以上でした
Flutter の 2 つのウィジェットについて

## 概要

Flutter の 2 つのウィジェット、StatelessWidget、StatefulWidget についてまとめてみました。
特に StatefulWidget のライフサイクルについて深掘りしてみました。

## StatelessWidget とは

- 状態を持たないウィジェット
- 一度描画されるとその後、状態が変化しない
- 例）固定のテキスト表示、アイコン・画像など

## StatefulWidget とは

- 状態を持つウィジェット
- ユーザーの操作や時間の経過などによって、状態が変化し、見た目や振る舞いが変わる
- 例）チェックボックス、テキストフィールド、カウンターアプリなど

## StatefulWidget のライフサイクルについて

ここでは StatefulWidget のライフサイクルについて深掘りしていきたいと思います。

緑の図形で記載したのが状態、青の図形で記載したのが各状態で呼び出されるメソッドになります。

![スクリーンショット 2024-05-05 10.47.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906968/57a8df5a-3200-ac60-5af7-fb0df41bd783.png)


## 各メソッドの説明

メソッドの簡単な説明は以下になります。

- createState()
  - State オブジェクトを作成する

- initState()
  - 初期化処理を記述する

- didChangeDependencies()
  - 依存するオブジェクトが変更された時に呼び出される

- build()
  - 画面描画を行う。

- didUpdateWidget()
  - 親ウィジェットが更新された時に呼び出される

- setState()
  - 状態が変わったことを通知し、画面を再描画する。

- dispose()
  - 使用されなくなったリソースの解放やクリーンアップ処理を記述する。
LangChainを用いて大量ファイルをロードするVectorDBを作ってみた(1)

![sky.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/c5efd521-480d-2bbd-85e3-196e5af6b42e.jpeg)
# 私の経歴
現在、私は某ユーザ企業の情報システム部門に所属しています。いわゆる「情シス」です。

以前はソフトウェア会社に勤務をしてプログラミングやプロジェクト・リーダーなどをやっていましたが、ソフトウェア開発界隈では「バリュー」（ここでは難易度やお客様が喜んでくれる度合でしょうか）ではなく「人月」（ここではプログラムステップ数若しくは工数）での評価をしていることに漠然と不安を感ていました。
それは、私がそれほどプログラミングをできるわけでもなく、また歳もとってきており、ソフトウェア開発で働き続けることに未来があるのかなぁ、と思っていたからです。

そんなことを考えて、うっすら転職活動をしていた時に、とても素晴らしい経営理念を掲げているユーザ企業を見つけました。
「経営理念が素晴らしい会社は絶対優良な会社だ！」と思い、私はこの会社の「情シス」に転職することにしました。それが私が現在所属している会社です。

「情シス」という部署は初めてだったのですが、プログラミングや設計のスキルよりも、人とうまく折衝できること、「ノウハウ」ならぬ「ノウフー(know who)」（会社の中でこのことは誰が知っているかを分かっていること）が、非常に重要であることを理解しました。
私は人と話をすることがあまり得意ではなかったのですが、会社のいろいろな方々と打合せやお話をすることで、「私に向いている仕事かもしれない」と思ってきました。

ユーザ企業の中では、プログラミング、システム、ITのことを全く知らない方々が多く、少しマクロを組んだりすれば効率が劇的に上がる作業でも、手作業のために大変苦労していることも目の当たりにしてきました。
私は、日本の多くのユーザ企業では、ちょっとしたプログラム・マクロができるようになるだけで、本当にたくさんの方々が楽になると確信しています。
どのようにすれば、会社の皆さんが楽しく仕事の効率を上げることができるのか、現在いろいろ考えています。「RPA」や「ノーコード」などを導入している企業もあるようですが、習得するのにそれなりにハードルが高く、直ぐに浸透させるのは難しそうです。今後の私の課題として捉えています。

また一方で、会社の皆さんのメンタル的な課題も発生しています。例えば部署内の人間関係で悩んだり、仕事の効率が上がらないために上司や同僚から叱られたり。
私は、心理学のメソッドの１つである「NLP」（Neuro-Linguistic-Programming（神経言語プログラミング））を取り入れて、会社の皆さんが楽しく・安心して働けるように今画策しています。これについては追々お話しします。

こんなことを考えながら、日々お仕事をさせていただいています。


# LangChainをやってみようと思ったきっかけ

「LangChain」をやってみようと思ったのはつい最近(2023年12月頃)なのですが、そのきっかけは数年前に兄弟が立ち上げた会社の「Webプラットフォーム」のプログラミングのお手伝いをすることが始まりとなります。
当時(といっても6か月前)私はPythonのプログラミングは初めてで、生成AI（今回はChatGPT）のAPI利用方法も全く知りませんでした。
ただ、過去にプログラミングの経験があったので、何とかなるかなぁ～と思って引き受けました。


# このブログを書くことになった動機


私が考えた構想は、フォルダの中の非定型ファイル群を一気に読込み、その情報を利用して生成AIに問いかけをするという仕組みでした。すなわちタイトルにある「大量ファイルをロードするVectorDB」の実現です。
早速やってみようと思い、「Udemy」や「YouTube」を色々見てみましたが、「LangChain」を全く知らないことと、Pythonプログラミングもままならない状況でしたので、どこから手を付けてよいのか分からない状況でした。
そんな中、LangChainに関するとってもわかりやすい書籍を見つけました。それが「LangChat完全入門」です。
先ずはサンプルをそのままコーディングしてトライ＆エラーを繰り返し、解説を読みながら少しずつ理解してきました。

ある程度コーディングをしていくと、「大量ファイルをロードするVectorDB」が作れるのでは？というようになりました。
また、いろいろなWebサイトをみても、１つのPDFファイルやtextファイルを基にVectorDBへ情報を蓄積させるものはありましたが、大量ファイルを蓄積させるものは、探すことができませんでした。
そこで、私の苦労の連続と共に「大量ファイルをロードするVectorDB」の作り方を執筆してはどうだろうと思ったのが今回のきっかけです。


### 本ブログについて

![langchain完全入門.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/f03bff6f-ad31-96ba-094a-b945067b0fc0.jpeg)



本ブログは、『LangChat完全入門』（田村悠 著）という書籍のサンプルプログラムを参考に、LangChainで大量ファイルを読込み、VectorDBに情報を蓄積させ、その情報を元に生成AIから回答をもらうプログラムを作成するまでのストーリーを何回かに分けて書いていこうと思います。
勿論、ここに記載している内容はノンフィクションです。

次回から、どのようにして「大量ファイルをロードするVectorDB」を作っていったのかを説明していきます。
【用語】アンカーフリー（Anchor-Free）、Feature Pyramid Network（FPN）、センターネス（Center-ness）、アンビギュアスサンプル

E資格用語の備忘録
シラバス2024 4.深層学習の応用 (2)物体検出 ⅲ.FCOS

# アンカーフリー（Anchor-Free）
物体検出の手法の一つで、事前に設定されたアンカーボックス（参照ボックス）を使用せずに、物体の中心や大きさを直接推測する方法。
アンカーボックスを使用する手法と比較して、より柔軟な物体検出が可能になる。

# Feature Pyramid Network（FPN）
物体検出やセマンティックセグメンテーションなどのタスクで使用されるディープラーニングのアーキテクチャ。
異なる解像度の特徴マップを効果的に利用することで、物体の様々なスケールに対して頑健な特徴抽出を可能にする。

# センターネス（Center-ness）
物体検出の手法であるFCOS（Fully Convolutional One-Stage Object Detection）において使用され、ファーチャーマップ上の点とground truthの中心距離を数値化した指標。
物体の中心から離れた点から低品質のバウンディングボックスが予測されることを防ぐために、この指標が学習に加えられる。

# アンビギュアスサンプル
モデルが予測するのが難しい、または不確かなサンプルのことを指す。
サンプルが複数のクラスに属する可能性が高い、あるいはノイズが多いなどの特徴を持つ。
【AtCoder】入茶しました！

## はじめに
はじめまして，shonsukeです．この度ABC352で入茶しました！
入茶報告はありふれていますが，入茶報告までが責務だと勝手に感じております．
灰色でなかなか茶色に上がれない方へ向けて自分のしてきたことをまとめておきます．

![スクリーンショット 2024-05-05 10.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665507/cda6cde3-4702-dff4-b333-6e92601c2389.png)

## 入茶までの軌跡
私がAtCoderを始めたきっかけが，友人からの紹介とインターン参加のためのアルゴリズム問題を解くことでした．
したがって毎日アルゴリズムの勉強をしておらず，勉強する気分になった日か，土曜日のABCがある日だけ少し勉強して参加する日々を送っていました．

その結果，**244日**かかって入茶しました笑

それでも，続けたということが自信になりました．
この経験を通して感じたことは「継続することが何よりも大切である」ということです．
ありきたりですが「**言うは易く行うは難し**」です．
公式によると，茶色は上位30%(?)らしいので達成感はかなりありました．


![スクリーンショット 2024-05-05 9.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665507/5c9e8fcb-bae2-8ee2-94e5-7628760b8c42.png)


## やったこと

- ABC参加(下記以外)
    - 土曜日に予定がある日
    - 自作アプリや研究に没頭してた日
- A, B問題早解き
- C問題アルゴリズム理解
- [AtCoder Problems](https://kenkoooo.com/atcoder)
- [競技プログラミングの鉄則 演習問題集](https://atcoder.jp/contests/tessoku-book/tasks)

毎週必ず参加していたわけではなく，予定がない日や，特に自作アプリ開発に没頭していた日以外は参加するようにしていました．
自分は数学が好きですが，得意という訳でもないため，問題を見てアルゴリズムを瞬時に判断できませんでした．

そこで，アルゴリズムの仕組みや実装方法を理解するようにしました．
ここで大事なのが，練習で解けないからといって落胆する必要はないことです．

**１０分ルールを取り入れ，分からなければ解説を見て理解し，再度問題文を見て解答を見ずに方針を考えるというサイクルを繰り返していました．**

アルゴリズムは膨大に存在していて全てを網羅することは難しいです．しかし広く浅く取り組むことで知見が少しずつ蓄積されていき，成果につながりました．

## 最後に
色々偉そうにいってしまった気がしますが，まだ茶色なので胸を張ってAtCoderできますとは言えません．ここまでかなり長い道のりでしたが，これからも気長に取り組んでいこうと思います(落ちるの怖いので当分UnRatedでやる予定です)．勉強のコツを掴むと順調にレートが上がったので皆様も自分に合った勉強方法を試行錯誤しながら頑張ってください！


## 参考

https://kenkoooo.com/atcoder

https://atcoder.jp/contests/tessoku-book/tasks

https://info.atcoder.jp/overview/contest/rating
AWSで作成するだけで課金されるサービス一覧

## はじめに
AWSを使う上で気をつけたいのが課金要素。
AWSサービスの課金の条件は各サービスによって異なりますが、だいたいは不要なサーバーやストレージは停止か削除しておこうという認識で使っていればある程度課金は最小限にできます。

しかし、中には作った時点で課金されるものがあります。
今回は作成時点で課金されてしまうサービスをまとめました。

## サービス一覧
1. Elastic Load Balancing（ELB）
1. Elastic IP（EIP）
1. NATゲートウェイ
1. VPCエンドポイント
1. AWS ElastiCache
1. Amazon Elastic Block Store (EBS)
1. Amazon Relational Database Service (RDS)
1. Amazon DynamoDB

## Elastic Load Balancing（ELB）
よくあるのがEC2は停止または削除したけど、ELBはそのままにしていて課金されるパターン。
不要になったELBはできるだけ削除しましょう。

https://aws.amazon.com/jp/elasticloadbalancing/pricing/?nc=sn&loc=3

## Elastic IP（EIP）
EC2に紐づけているEIPは課金されませんが、紐づけされていないものは課金されてしまいます。
こちらもよくあるのが、EC2だけ削除して、EIPは削除し忘れるというもの。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#eip-pricing

## NATゲートウェイ
課金で意識しがちなのはサーバーやストレージリソースですが、ネットワークリソースも気をつけましょう。
特にインターネット接続でNATゲートウェイはよく使われるので注意です。

https://aws.amazon.com/jp/vpc/pricing/

## VPCエンドポイント
プライベートネットワークを使っている環境でAWSのサービス間接続を実現するVPCエンドポイント。
こちらは接続するサービスごとにエンドポイントを作成するので、複数作ることがよくあります。
チリツモで値段はあがってしまうので、こちらも注意です。

https://docs.aws.amazon.com/ja_jp/vpc/latest/privatelink/concepts.html

## ストレージ系
次のサービスはすべてストレージ系なので、当たり前ですが作成時点で容量を確保するので課金されてしまいます。
ストレージ系は利用時間に応じてどれくらい課金されるのか把握した上で使いましょう。

- AWS ElastiCache
- Amazon Elastic Block Store (EBS)
- Amazon Relational Database Service (RDS)
- Amazon DynamoDB

## まとめ
AWSサービスはIoTや機械学習系などいろんなサービスがあるので、他にも作成時点で課金されるサービスはあるかと思いますが、今回はアプリケーション開発でよく使うサービスで取り上げました。

事前に課金されるサービスを知っておくのは重要ですが、すべての課金条件を理解するのは難しいので、CloudWatchによる課金アラームの設定も合わせて設定しておく上で、ある程度対策できるので、最初はアラーム設定を少ない額でもあがるように設定しておくのがおすすめです。
AWS: AWS入門(基本編1) - 「AWS」って何?

### 0. 前置き

最近、「クラウド」という言葉をよく聞くようになりました。
このクラウドの中で最も有名なものの 1 つに、「 AWS 」というものがあります。
今回はこの AWS について、ざっくり説明していきます。

### 1. 「クラウド」とは

 AWS について説明するには、まずクラウドについて説明する必要があります。
クラウドは一言でいうと、「インターネット経由で利用するサービス」のことです。

例えば私たちがスマホで電卓アプリを使う場合、電卓アプリ(サービス)は手元にあるスマホの中にインストールされています。

![WS000079.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/5409517d-e625-2414-0a81-028652a1f2cc.jpeg "1_1")

一方、スマホのブラウザで Web サイトに接続し、 Web サイト上で電卓アプリを動かす場合、電卓アプリ(サービス)は手元のスマホの中にはなく、インターネットの向こう側(多くの場合サービスの提供元のサーバ上)にあります。

![WS000080.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/15531f2a-35a4-7df9-03b7-90776979b223.jpeg "1_2")

このように、インターネットの向こう側にあるアプリやサーバなどを利用する形をとるサービスを、「クラウド」と呼びます。
有名なところだと、ストレージサービスの「 Dropbox 」やメールサービスの「 Gmail 」なんかもクラウドの一種になります。

:::note info
反対に、アプリやサーバなどを手元に用意して利用する場合は「オンプレミス(オンプレ)」と呼びます。
:::

クラウドを利用するメリットとしては、例えば以下のようなものがあります。

* アプリやサーバなどが手元に無くてもよいため、低コストで手軽に利用できる
* 複数の場所にデータを分散させることで、災害対策になる
* 利用場所を選ばないので、最近普及してきたリモートワークとも相性がよい

一方で、クラウド利用には以下のようなデメリットもあります。

* 一方的にサービスの利用が制限されたり、サービス自体が終了する可能性もある
* 国外に重要なデータを置く場合は、法律上のリスクにも気を付けなくてはいけない

と、メリットデメリットありますが、最近はメリットの方が大きいとして活用されることが増えてきています。

### 2. 「 AWS 」とは

クラウドの中でも最も有名なものの1つが、「Amazon Web Services ( AWS ) 」です。
 AWS は Amazon.com, Inc. の子会社である Amazon Web Service, Inc. が提供するクラウドで、 2006 年に一般提供が開始されました。

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

:::note info
よく比較される同種のサービスとして、 Microsoft Corporation の「 Microsoft Azure 」や Google LLC の「 Google Cloud Platform ( GCP ) 」があります。
:::

 AWS には様々なサービスがありますが、有名どころだと以下のようなものがあります。

* Elastic Compute Cloud ( EC2 ) : Linux や Windows などのサーバを利用できる
* Simple Storage Service ( S3 ) : ストレージを利用できる
* DynamoDB : データベースを利用できる

 AWS のアカウントを作れば、これらのサービスがすぐに利用できるようになります。

### 3. AWS の料金

 AWS は大半のサービスについて、「使った分だけ払う」形をとっています。
例えば EC2 であれば、 2024 年 5 月現在、東京リージョンで t2.micro の Linux インスタンスを 1 時間使用すると 0.0152 USD ( 1 USD = 160 円で計算すると 2.432 円)となります。

一方で、ある程度の期間の利用を一括契約すると安くできるなど、特殊な契約方法もあります。
例えば上記と同じ条件で 1 年契約とした場合、料金は 1 時間使用で 0.0118 USD と約 22% も安くなります。

最新の情報は以下のページを参照してください。

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

料金見積用のツールもあります。
※画面右上でページの言語を変えられます。

https://calculator.aws/

また、 AWS は制限付きではありますが、無料で利用できる枠も多数存在します。
無料枠のパターンは以下の3パターンに分かれます。

* 12 か月無料： __AWS のアカウントを作成した日から__ 12 か月、一定条件下で無料
* 常に無料：日時にかかわらず一定条件下で無料
* トライアル：__各サービスを最初に利用した時点から__、一定条件下で無料

例えば EC2 の場合は以下の条件で無料となります。

* AWS のアカウントを作成した日から 12 か月以内
* 毎月 750 時間まで( 24 時間 * 31 日 = 744 時間 なので、 1 インスタンスだけなら常に動かせる計算になる)
* Linux、RHEL、SLES、Windows の t2.micro または t3.micro インスタンス
* パブリック IPv4 アドレスも毎月 750 時間まで無料(インスタンスを止めても IP アドレスは割り当てたままだったりするので要注意)

最新の情報は以下のページを参照してください。

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

[戻る](https://qiita.com/frozencatpisces/items/75bf3e19f6328786e336)
AWS: AWS入門


 AWS を使用するための基本的な情報をまとめました。

### 共通

* [「 AWS 」って何? (2024/5/5)](https://qiita.com/frozencatpisces/items/8276b57debcbfe43f58b)
* [アカウントを作成する (2024/5/19)](https://qiita.com/frozencatpisces/items/dc40c9099e981d0330f6)
* [AWS 公式学習コンテンツ・ドキュメントまとめ (2024/6/2)](https://qiita.com/frozencatpisces/items/e847aca6497f53189f20)

### IAM (ユーザ)

* [IAM ユーザーを作成する (2024/6/16)](https://qiita.com/frozencatpisces/items/57c2c25700f997e570a8)
* [多要素認証 ( MFA ) を設定してみる (2024/7/7)](https://qiita.com/frozencatpisces/items/67f00817b260f8c340b7)
* [IAMロールを作成する (2024/11/17)](https://qiita.com/frozencatpisces/items/8bb0ea63b6cc509db023)

### EC2 (サーバ)

* [Linux インスタンスを起動する (2024/7/21)](https://qiita.com/frozencatpisces/items/5e1acb955e3ebb6f4e31)
* [Linux インスタンスに Windows 端末から OpenSSH で接続してみる (2024/8/4)](https://qiita.com/frozencatpisces/items/2a066a36dccee4f886c8)
* [固定の IPv4 アドレスを使用する (2024/10/20)](https://qiita.com/frozencatpisces/items/fe7bfd52fafa9f766cf5)
* [パブリック IP アドレスの利用状況を管理する (2024/11/3)](https://qiita.com/frozencatpisces/items/e730cf23bbecd0595636)

### Lambda (コード実行)

* [関数を作成する (2024/12/1)](https://qiita.com/frozencatpisces/items/94ffae7440444fb49eb2)

### S3 (ストレージ)

* [バケットを作成する (2024/8/18)](https://qiita.com/frozencatpisces/items/27d8f7f3483df797ad21)

### DynamoDB (データベース)

* [テーブルを作成する (2024/9/1)](https://qiita.com/frozencatpisces/items/80753dd69e5c867bfd72)

### RDS (データベース)

* [MySQLデータベースを作成する (2024/12/15)](https://qiita.com/frozencatpisces/items/6fac4192fb7d651c57c6)

### CloudWatch (監視)

* [ダッシュボードを作成する (2024/9/15)](https://qiita.com/frozencatpisces/items/cc35bdfd74063bc0521c)
* [アラームを作成する (2024/10/6)](https://qiita.com/frozencatpisces/items/5c071322d6e2a29a506b)
ロッドアンテナ性能比較

[RTLSDR Scanner](https://qiita.com/yamori813/items/defa95a8783ca99864d7)で見てみました。

アンテナ無し

![non.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/07d88785-354a-8337-4b94-88994151450e.png)

SONY ICF-SW1付属(電池入れてあるのでアクティブ？)　116cm

![act.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/73712dcd-bd2d-c42e-322d-4458cedb27de.png)

SONY DRPC-1付属 68cm

![pas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/986b5b83-0385-8b52-ac20-40b7b0c5c6f0.png)

ただのロッドアンテナ 74cm

![pas2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/13cbcd7d-9552-b1d8-a4dd-394ad525df75.png)

蟹さんモジュールはハードオフで入手した長方形のやつです。チューナーがFitipower FC0012でADS-Bは受信できないのですが、FMはそこそこ受信できます。

T型アンテナも試してみました。

T型ゴールド 140cm

![TG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/cb5df90f-9320-6c39-ba7a-2a20fd3e91ee.png)

T型黒 140cm

![TB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/148f9acd-b398-7d97-ee91-9ef96bf6c18a.png)
rails + mysql8 + kaminariの時にpaginationでtimeoutする

## 起きる問題
mysql8.0.23以降で、select count(*) が、パラレルスキャンによりもの凄い時間がかかるようになってしまうため、kaminariのpaginationで表示がpumaなどがtimeoutしてしまう。


そもそもの問題の詳細はこちら

https://zenn.dev/hmatsu47/articles/mysql80-count-slowdown


## 原因の調査
kaminariではページ数をしらべるために、上記のクエリーを発行しています。
これはkaminariのAR拡張で実装されています。

```ruby:kaminari-activerecord/lib/kaminari/activerecord/active_record_relation_methods.rb

    def total_count(column_name = :all, _options = nil) #:nodoc:
      return @total_count if defined?(@total_count) && @total_count

      # There are some cases that total count can be deduced from loaded records
      if loaded?
        # Total count has to be 0 if loaded records are 0
        return @total_count = 0 if (current_page == 1) && @records.empty?
        # Total count is calculable at the last page
        return @total_count = offset_value + @records.length if @records.any? && (@records.length < limit_value)
      end

      # #count overrides the #select which could include generated columns referenced in #order, so skip #order here, where it's irrelevant to the result anyway
      c = except(:offset, :limit, :order)
      # Remove includes only if they are irrelevant
      c = c.except(:includes, :eager_load, :preload) unless references_eager_loaded_tables?

      c = c.limit(max_pages * limit_value) if max_pages && max_pages.respond_to?(:*)

      # .group returns an OrderedHash that responds to #count
      c = c.count(column_name)
      @total_count = if c.is_a?(Hash) || c.is_a?(ActiveSupport::OrderedHash)
                       c.count(count_name)
                     elsif c.respond_to? :count
                       c.count(column_name)
                     else
                       c
                     end
    end

```

このメソッドの第1引数でcolumn_nameを指定できますが、total_pagesをするところでは、オプションをわたしていないため、常に:allがよばれる仕様になっているようです。そのため、total_pagesを表示すると、常に上記のクエリーが発行されてしまいます。


## 対策
viewでpaginateをよんでいるところで、total_pagesを明示的に指定されるところで上記メソッドにオプションをあたえて、idのみを取得し、limit_valueで割り算することにしました。現状これが一番分かり易い対応方法な感じがします。

```
= paginate @orders, total_pages: @orders.total_count(:id) / @orders.limit_value
```

## これでも遅いとき
しょうがないからidの最後で割り算する

```
= paginate @orders, total_pages: Order.last.id / @orders.limit_value
```

多少あわないけど力業で動くので業務用ならこれでおっけ。



## 余談
- APIからのresponseを全部保管するためtextのmedium_textをつかっているため、:allのパラレルスキャンが死ぬほどかかっているのではないかと推測します。

- あとは、作成日でソートしようとおもってorder(created_at: :desc)とかしたときに、created_atにindexがされていないといった理由もあったので、order(id: :desc)にしました。
AtCoder初心者振り返りメモ ABC352

# ABC352の回
https://atcoder.jp/contests/abc352
# A-問題
https://atcoder.jp/contests/abc352/tasks/abc352_a

![352a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547298/b9f16a8c-722d-75c5-390b-33abaaa63b74.png)


[考察や感想]
情報がたくさん書いてあるが、結局のところXとYの値の間にZが存在するかを判定する問題でした。
解法はすぐに思いついているので、もう少し早く書けるだけでパフォーマンス向上につながると思っています。

````Python:A.py
N,X,Y,Z= map(int,input().split())

# Z が　X　と　Y の間の数字か判定する

# 大小があれば入れ替える
if X > Y:
    X,Y = Y,X

#
if Z > X and Z < Y:
    print("Yes")
else:
    print("No")
````

# B-問題
https://atcoder.jp/contests/abc352/tasks/abc352_b

高橋君は英小文字からなる文字列 S をキーボードで入力しようとしました。
高橋君は画面を見ずにキーボードだけを見てタイピングをしていました。
誤って別の英小文字を入力してしまったときにはその直後にバックスペースキーを押しましたが、バックスペースキーが壊れていたため誤って入力された文字は消去されず、実際に入力された文字列は文字列 T となりました。
また、英小文字以外のキーを誤って押してしまうことはありませんでした。
T のうち高橋君が誤って入力した文字でないものを正しく入力された文字であると定めます。
正しく入力された文字が T の何文字目であるか答えてください。

[考察や感想]
こちらも情報が多いので、入力例出力例を見てロジックを組み立てました。Sの先頭の文字からTの何番目に文字があるかを順に調べて、最後にまとめて出力しました。最初に書いたコードだと同じ文字が連続したときに誤答となるため、「while i < len(S) and j < len(T)」を思いついて正答できました。

````Python:B.py
S = input()
T = input()

ans = []
i = 0
j = 0

# SとTの先頭から文字の一致を確認する
while i < len(S) and j < len(T):

    # 一致したらそのインデックス番号+1 をリストに格納
    if S[i] == T[j]:
        ans.append(j+1)
        i += 1
        j += 1
    else:
    # 一致しない場合は、Tの次の文字を確認する
        j += 1

# リストans を空白区切りで出力する
print(*ans)
````

# C-問題
https://atcoder.jp/contests/abc352/tasks/abc352_c

![352c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547298/fbf86f93-8890-cbd8-50fb-8a7176cba462.png)

[考察や感想]
ノートに出力例を書きながら考察、結局のところ肩の高さを積み重ねているので巨人の順番が関係するのは最後だけ。「頭」の高さが最大の巨人を一番上に配置して地面からの「最大値」を計算する。B問題よりも早く正しい解法を思いつけたので、短時間で正答できました。

````Python:C.py
N = int(input()) 
A = []
B = []
plus = []

for _ in range(N):
    a,b = map(int,input().split())

    A.append(a)    
    B.append(b)

    # 入力を取り込みながら肩から頭までの距離を格納する
    plus.append(b-a)

# 肩から頭まで一番大きな値を取得する
mxplus = max(plus)

# 肩までの距離の集合と　肩から頭まで一番大きな値を足すだけ
ans = sum(A) + mxplus

print(ans)
````
[初級編]7.Tableau Prep Builderの利用方法(インストールとライセンス認証)

# Tableau Prep Builderのインストール
基本的には
https://qiita.com/Tabata_Tableau/items/4c50c13dc246f67946ae
で紹介したTableau Desktopと同じです。

まず、下記サイトにありますとおり、インストール出来るマシンの要件がありますのでご注意ください。
https://www.tableau.com/ja-jp/products/techspecs#prep
OS 要件
Windows
Microsoft Windows 8/8.1、Windows 10 (x64)、Windows 11
・・・

まぁ普通のPCならインストール可能です。
### 
###

次に製品のダウンロードですが、こちらもTableau Desktopと同じく
製品のダウンロードとリリース ノート
https://www.tableau.com/ja-jp/support/releases/prep
または
カスタマーポータル
http://customer.tableau.com/
からダウンロードします。

今回は「製品のダウンロードとリリース ノート」からダウンロードしてみましょう。
例えば、2024.1.2を利用する場合、2024.1.2をクリックし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3758622/e6a4dccf-35a7-88f7-f620-2cb28a9b6843.png)
「TableauPrep-2024-1-2.exe (1012 MB)」をクリックしダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3758622/3e2a101b-3e20-4ff1-94cc-b263958efc55.png)

自分のPCに保存された「TableauPrep-2024-1-2.exe」 をクリックして
指示に従ってインストールします。

インストール手順にいては下記サイトにも記載があるので参考にしてみてください
https://help.tableau.com/current/desktopdeploy/ja-jp/desktop_deploy_download_and_install.htm

インストールが完了するとデスクトップにアイコンが生成されていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3758622/75f02f23-dde0-e55a-7ce0-08dac9172c3a.png)

# Tableau Prep Builderのライセンス認証
インストールが完了したら、次はライセンス認証です。こちらも基本的には
https://qiita.com/Tabata_Tableau/items/4c50c13dc246f67946ae
で紹介したTableau Desktopと同じです。

ただし、同じ端末に既にTableau Desktopをインストールしていてライセンス認証済の場合は、ライセンス認証は求められない場合もございます。

以上です
JavaScript: property消滅

あまりやらないであろう初期化法。不思議な事が起こります。演算後にpropertyが消滅します。
```js
var a=new Number, b=new String;// 0, ""
a.a=b.a=1;
console.log(a.a,b.a);
a+=1;b+=1;
console.log(a.a,b.a)
```
変数がobject型からnumber型、string型になった事が原因です。
以下のように初期化すると、そもそもproperty設定が無効になります。
```js
var a=0,b="";
a.a=b.a=1;
console.log(a.a,b.a);// undefined
a-=1;b-=1;
console.log(a.a,b.a)
```
`new`を省略すると上記同様の結果となります。`Number()`はnumber型、`String()`はstring型となるためです。これらの型はprimitive値型と呼ばれ、以下の7種類あります。
1. 文字列
2. 数値
3. 長整数
4. 論理値
5. undefined
6. Symbol
7. null

全てのprimitive値は不変であり、変更する事が出来ません。
## 裏技もどき
`prototype`を書き替えると、propertyがあたかも最初から存在しているかのように見えます(prototype chain)。
```js
Number.prototype.a=String.prototype.a=1
let a=0,b="";
a++;b++;
console.log(a.a, b.a);
console.log(0..a, "".a)
```
その状況でもpropertyの値は依然として書き替え不能。
```js
Number.prototype.a=String.prototype.a=1;
let a=0,b="";
a.a=b.a=2;
console.log(a.a, b.a)// 1のまま
```
ところがArray等では挙動が異なります。以下の例では何が出力されるのでしょうか?
```js
Array.prototype[0]=0;
let a=[];
a[0]++;
console.log(a[0])
```
undefinedでもNaNでもなく、なんと1となります。これはとってもおいしい挙動です。これを応用すると、あらかじめ任意の初期値を持つ疑似配列を高速かつ大量に召喚できます。以下の通り。
```js
function NxN(){}//配列もどき

let a=256,p=NxN.prototype=Array(a);
for(;p[--a]=a;); //0...255の初期値設定
let A=[]; //2次元配列もどき
for(;a<256;)A[a++]=new NxN;
console.log(A[0].slice(0,100),'\n',A[0].slice(100,200))
```
昔は巨大配列の初期化に長時間を要したので、この技法が非常に有用でした。まあそんな変態的な事をしていた人はほとんどいないと思いますが…
## new Number、new Stringの破壊力
話が少し脱線しますが、とんでもない速度差が出ます
```js
//with new
{
	let N=new Number(1),S=new String(1),t=new Date;
	for(let c=1e7,d=0;c--;)d-=N;
	console.log(new Date-t);
	t=new Date;
	for(let c=1e7,d=0;c--;)d-=S;
	console.log(new Date-t
}
//without new
{
	let N=Number(1),S=String(1),t=new Date;
	for(let c=1e7,d=0;c--;)d-=N
	console.log(new Date-t)
	t=new Date;
	for(let c=1e7,d=0;c--;)d-=S
	console.log(new Date-t)
}
//primitive値
{
	let N=1,S="1",t=new Date;
	for(let c=1e7,d=0;c--;)d-=N
	console.log(new Date-t)
	t=new Date;
	for(let c=1e7,d=0;c--;)d-=S
	console.log(new Date-t)
}
```
`new Number`で初期化された変数は、**演算の時に`valueOf()`が召喚されやがるので、その分余計に時間がかかります**。
`new`なしの場合は残念ながらそこまで低速化できません。object型ではないため`valueOf()`が呼ばれないのです。
以下同様に微妙な振る舞いの違いに気を付けて下さい。まあ2行目と3行目は等価っぽいですが…。
```js
var A0=[], R0=/(?:)/, O0={}, F0=function(){}, B0=false;
var A1=Array(), R1=RegExp(), O1=Object(), F1=Function(), B1=Boolean();
var A2=new Array, R2=new RegExp, O2=new Object, F2=new Function, B2=new Boolean;
```
以下は微妙な違いとやらの一例。aの値は`Date.now()`同様の数値、bの値はNaNとなります。`Date()`の戻り値がstring型であるため起こる悲劇です。
```js
let a=+new Date, b=+Date()
```
Chrome・Edgeでページ全体のスクリーンショットを取得したい

# Chrome

① F12キーを押下して、Devtoolsを起動します。

② Ctrl + Shift + P を押下して、コマンドメニューを起動します。

③ Capture full size screenshotを選択すると、ページ全体のスクリーンショットを取得できます。コマンドメニューにCapatureなどと入力すると、探しやすくなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105859/c335836a-c36d-dc0b-3964-d3c1362001af.png)

# Edge

① Ctrl + Shift + S を押下します

② 「ページ全体をキャプチャ」を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105859/62cbdf0c-0fb6-1b15-dbb7-23a3f9d00dde.png)
【GoogleCloud】インスタンス切り忘れ防止設定

私はKaggleをする際にGoogleCloudのVMインスタンスを利用しています。
ある日、いつも通り朝にKaggleをして、その後にずっと前から計画していた旅行に行ってきました。いいホテルでリフレッシュできました。
帰ってきた翌日、新たな気分でKaggleをするためにGoogleCloudのコンソールを見た時緑色のチェックボックスを見て絶望しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/cc65387b-738d-e0ff-849e-397492e7896b.png)
インスタンスの切り忘れ。旅行期間中お金を垂れ流していました。
妻にも優しく怒られ、対策をしなければと思い調査しました。

## 結論: インスタンススケジュールを設定する
~~停止だけの自動化はすることができなかったため--(PubSubとか組んだらやれるかもしれないが)起動とセットにはなりますがこれが一番簡単でした。~~
@hkty666さんが停止だけもインスタンススケジュール設定できることご教示いただきました！ありがとうございます。（2025.06.08更新）

### 作業
インスタンススケジュールから起動、停止はGoogle Cloudのサービスエージェントから実行されるため、サービスエージェントに必要な権限設定を行います。
`Cloud Console` > `IAM と管理` > `IAM` をクリックし、`Google提供のロール付与を含める` にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/56b7686b-d9b8-cae2-5373-75d3204a5312.png)

`service-(PROJECT_NUMBER)@compute-system.iam.gserviceaccount.com` の編集をクリックし、`Compute インスタンス管理者（v1）（roles/compute.instanceAdmin.v1）` の事前定義ロールを追加し `保存` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/5b9df0c8-ce6d-b26d-0aab-443c5b94372c.png)
これで権限付与が完了。次にインスタンススケジュールを設定します。

`Compute Engine` > `VMインスタンス` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/a0a90565-7c09-8164-6c8b-017ea26bf0d1.png)

`インスタンススケジュール` > `インスタンススケジュールの作成` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/b9933940-162b-cc07-4dd1-44038aa272c4.png)

フォームに入力していきます。私の場合、平日朝の時間利用をしているので以下のように設定しました。

リージョンはスケジュールを設定したいインスタンスと同じリージョンを設定してください。この後インスタンスを紐づけるのですが同リージョンでないと選択肢に現れません。
作成したスケジュールは変更ができないため、変更ある場合は削除して新規で作成することになります。（変更させてほしい…）

:::note info
ここで開始時間を空白にして停止時間のみを設定すれば、停止だけのスケジュールを組むことができます。（2025.06.08更新）
:::

最後に `送信` をクリック


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/899ad333-4d90-828c-d2f4-c8ff7649b27f.png)

これでスケジュールが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3605750/8fd76f97-3cac-0060-2123-1c63866ab5a0.png)

## まとめ
インスタンス切り忘れ防止を目的にしたインスタンススケジュール設定を紹介しました。本来の使い方と少し異なりますが、やりたいことはできました。
GoogleCloudのドキュメントを読んでいるとインスタンススケジュールは最大15分遅れることがあるとのことでした。ただ今回のケースでは遅れたとしても停止できればOKなので問題ないと考えてます。

## 参考文献
[VMインスタンスの自動起動・終了をスケジューリングする設定方法 \- G\-gen Tech Blog](https://blog.g-gen.co.jp/entry/scheduling-stop-and-start-instances)

[VM インスタンスの起動と停止をスケジュールする \| Compute Engine ドキュメント \| Google Cloud](https://cloud.google.com/compute/docs/instances/schedule-instance-start-stop?hl=ja)
Property Parameter Argument の違い【JavaScript】

# はじめに

`Property` `Parameter` `Argument` の違いが曖昧だったのですが、いったん理解できたと思うので共有します。

# `Property`

```js
const obj = {a:1, b:2, c:3}
```
このときの `a` `b` `c` を `Property` と言います。

# `Parameter`

```js
function f (a, b, c) {
  console.log(a + b + c)
}
```
このときの `a` `b` `c` を `Parameter` と言います。

# `Argument`

```js
function f (a, b, c) {
  console.log(a + b + c)
}

f(1, 2, 3)
```
このときの `1` `2` `3` を `Argument` と言います。

# MDNからの引用

https://developer.mozilla.org/en-US/docs/Glossary/Parameter

> 「仮引数 (parameter)」と「実引数 (argument)」の違いに注意してください。
> 
> 関数の仮引数は、関数の定義に掲載されている名前です。
> 関数の実引数は、関数に渡される実際の値です。
> 仮引数は、実引数が提供した値で初期化されます。

なお、MDN はJSに関する膨大な情報を持つ信頼性の高いサイトですが、
完全な一次情報ではないと思っています。

ECMA公式ドキュメントで該当の記述をご存知の方、教えていただけますと幸いです。

また、`Property` については MDN 英語原文のページを参照することをおすすめします。
日本語訳ページでは情報が圧倒的に少ない上、一部誤った情報が掲載されています。

https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript

# 豆知識：予約語

`Property` `Parameter` `Argument` のうち、`Property` には予約語を使用することができます。
（かつてはブラウザによっては禁止だったらしい）

予約語についてはこちら

https://qiita.com/kohki_takatama/items/534bb8d0739d86157d9a

```js
const object = {const: 3, let: 2, var: 1}
```

みたいなこともできるわけですね。可読性が終わるのでやらない方がいいですが。
`example.const.do.break.default`みたいなこともできるわけです（やめろ）

一方、`Parameter` には予約語を使用できません。

```js
function f(const) {
  // SyntaxError
}
```