OmniAICreator/Qiita-1.07M huggingface dataset:
Reactアプリを作って、v17にダウングレードし、レンタルサーバーにデプロイするまで

### 追記
まあ、最新バージョンを使ってほしいですが。

# まずは、Reactアプリ作る
アプリを作成し、動作確認する
```
npx create-react-app プロジェクト名
cd プロジェクト名
npm start
```
`node.js`や`yarn`、`npm`、`create-react-app`のインストールは[appendix](#Appendix)に。
# 最新はv18になっているので、v17にダウングレード
`package.json`の`dependencies`を修正
```json:package.json
# 省略
"dependencies": {
  "@testing-library/jest-dom": "^5.16.2",
  "@testing-library/react": "^11.2.7",
  "@testing-library/user-event": "^12.8.3",
  "react": "^17.0.2",
  "react-beautiful-dnd": "^13.1.0",
  "react-dom": "^17.0.2",
  "react-scripts": "5.0.0",
  "web-vitals": "^0.2.4"
},
# 省略
```
`package-lock.json`と`node_modules`を削除し、再構築
```
rm package-lock.json
rm -r node_modules
yarn install
```
React17の記述に修正
```javascript:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
```
# レンタルサーバーで公開
`package.json`の該当箇所を以下のように修正
```json:package.json
# 省略
“homepage”: “公開URL”,
“name”: “react-app”,
“version”: “0.1.0”,
“private”: true,
# 省略
```
`public`フォルダ内に`.htaccess`ファイルを作成
```:.htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```
ビルドします
```
npm run build
```
`build`フォルダ内のファイル全てを公開URL配下のディレクトリに移し、デプロイ完了！

# Appendix
### node.jsとyarnをインストール
#### For Mac
```
# nvm インストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# nvm 有効化 (このコマンドがエラーになる場合: ターミナル を閉じ、再度開いて次の手順へ)
source ~/.zshrc
# node(安定版)のインストール
nvm install --lts
# nodeのバージョンを確認(インストールされているかチェック)
node --version
# v16.16.0 みたいにバージョン情報が出力されたら成功！
```
```
# yarn を全体にインストール
npm i yarn -g
# yarnのバージョン情報を確認(インストールされているかチェック)
yarn --version
# 1.22.19 みたいにバージョン情報が出力されたら成功
```
#### For Windows10
Windows PowerShell（管理者として実行する）でWSL2をインストール
```
wsl --install
```
Windows Terminalを以下よりインストール

https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701
```
# コマンドからURLにアクセスできるようにする
sudo apt-get install curl
# パスワードはWSL2で設定したものを入力
# nvm インストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# nvm 有効化 (このコマンドがエラーになる場合: WindowsTerminal を閉じ、再度開いて次の手順へ)
source ~/.bashrc
# node(安定版)のインストール
nvm install --lts
# nodeのバージョンを確認(インストールされているかチェック)
node --version
# v16.16.0 みたいにバージョン情報が出力されたら成功！
```
```
# yarn を全体にインストール
npm i yarn -g
# yarnのバージョン情報を確認(インストールされているかチェック)
yarn --version
# 1.22.19 みたいにバージョン情報が出力されたら成功
```
### 念の為
`npm`のインストールと`create-react-app`のインストール
```
npm install -g npm
npm install -g create-react-app
```

### 参考サイト
https://qiita.com/GrowUp-Haruno/items/93c94b5f314655ed457e

https://kubogen.com/web-programing-300/
【Android】たまに出てくるJSON、Gsonってなんなの？

# はじめに
Android開発をやっていてたまに目にする　「JSON」「GSON」という言葉が気になったので、調べたものを記事に残します

# JSON
「JavaScript Object Notification」の略で、**JavaScriptで値を取り扱う**ためのドキュメント
プログラム開発の際に作る仕様解説書や説明書、設計書、フローチャートのことです

JSONを使いメリットは
・テキスト量が少ないため、高速な通信を求められる場合には非常に有用
・値と項目のペアで記載するため視覚的にも非常に確認しやすい
・「通信におけるデータフォーマット」と「ブラウザ内でのデータ保持」の両方に適用できるため、サーバーからのデータをそのまま利用できる

という点です　

# Gson
Gsonは**Javaのライブラリ＊*で、JSONデータをJava Objectsに変換したり、Java ObjectsをJSONデータに変換したりすることが出来る。

上記で書いたJOSNをJavaでも使えるように変換するためのようですね

使い方は
build.gradle(app)のdependencies内に


    implementation 'com.google.code.gson:gson:2.8.6'
を追加するだけのようです　※数字部分はバージョンによって異なる

参考

https://qiita.com/naoi/items/6b184700b2a41fb46356

https://qiita.com/vram/items/1641fa87088c24431677

＃ おわりに
たまに出てくる謎の単語にモヤモヤしていましたが、今回調べてみてスッキリしました！
使う機会があったら、その様子を記事にできたらいいない思います
親要素にhover時、子要素だけCSSを適用する【CSS】【Tailwind CSS】

# はじめに
最近はフロント(Vue 3)の実装をよくやっています。

データの受け渡しやページの切り替えとかの実装が主でしたが、
機能の大枠が完成してきたこともあり、デザイン当ての機会が増えてきました。

デザイン当てでCSS(Tailwind CSS)を使っていくわけですが、
コンポーネントが入れ子になっている関係で、親要素と子要素が多少複雑になり、
CSSの難しさを感じました。

その中で、**親要素にhover時、子要素だけCSSを適用する**ことは、
結構勉強になったと感じたので備忘録的に書いていきます。

Tailwind CSSでの実装でしたが、CSSの実装も調べてみたので、
それぞれのケースを見ていきましょう。


|  目次  |
| ---- |
|  [1.今回の実装](#1-今回の実装)  |
|  [2.CSSの場合](#2-cssの場合)  |
|  [3.Tailwind CSSの場合](#3-tailwind-cssの場合)  |
|  [4.おわりに](#4-おわりに)  |

# 1. 今回の実装
ボタンにhoverすると、
* ボタン全体がやや透明になる
* アイコンの色だけがピンクになる(ボタンの色は変わらない)

というデザインを実装します。
![button.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729568/e83cb2f9-d9d4-82f0-2e63-7067df948ad6.gif)

今回のファイル構成は下記
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729568/b15aeabe-7b78-f7c8-f68d-10c23f38581b.png)

アイコンはfontawesomeを用いるので、
index.htmlとtailwind.htmlそれぞれのheadタグ内で読み込みます。
```html
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
```


# 2. CSSの場合
## index.htmlの記述
まずはheadタグ内でCSSの読み込みをします。
```index.html
<link rel="stylesheet" href="css/main.css">
```

bodyタグ内
```index.html
<body>
  <div class="btn">
    <i class="fa-brands fa-twitter icon"></i>
  </div>
</body>
```

## main.cssの記述
ボタンだけのCSS
```main.css
.btn {
  width: 80px;
  border-radius: 20px;
  border-color: rgb(29, 155, 240);
  text-align: center;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
  background-color: rgb(29, 155, 240);
}

.icon {
  color: white;
}
```
ボタンにhoverした時のCSS
```main.css
/* ボタンにhoverした時、やや透明にする */
.btn:hover {
  opacity: 0.8;
}

/* ボタンにhoverした時、アイコンの色をピンクに変える */
.btn:hover .icon {
  color: rgb(255, 155, 240);
}
```

ポイントは、**ボタンにhoverした時**です。アイコンではありません。
下記のような記述だと、**アイコンにhoverした時**という別の実装となります。
```css
.icon:hover {
  color: rgb(255, 155, 240);
}
```
# 3. Tailwind CSSの場合
(※この記事執筆時のTailwindのバージョンは3.1.6になります。)

まずはTailwind CSSをCDNで使えるようにheadタグ内に記述
```tailwind.html
<script src="https://cdn.tailwindcss.com"></script>
```
他の読み込み方等は[ドキュメント](https://tailwindcss.com/docs/installation)で確認してください。

次に色の定義とシャドウの定義をheadタグ内に記述
```tailwind.html
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            twitter: 'rgba(29, 155, 240)',
            hoverIcon: 'rgb(255, 155, 240)',
          },
          boxShadow: {
            box: '0 10px 25px 0 rgba(0, 0, 0, .5)',
          }
        }
      }
    }
  </script>
```

最後にbodyタグ内
```tailwind.html
<body class="m-[8px]">
  <div class="group w-[80px] bg-twitter border-twitter hover:opacity-80 rounded-[20px] text-center shadow-box">
    <i class="group-hover:text-hoverIcon fa-brands fa-twitter text-white"></i>
  </div>
</body>
```
(一応、bodyにmarginの8pxをつけてindex.htmlの表示と合わせておきます。)
親要素であるdivタグのクラスに**group**を、
子要素であるiタグのクラスに**group:hover**を記述しています。
このように記述することで、CSSの時と同じく、ボタンにhoberした時にアイコンの色だけピンクになります。

[公式ドキュメント(v.1.9.0)](https://tailwindcss.jp/docs/pseudo-class-variants#group-hover)にも記載されていますが、groupを設定してあげることで、
**特定の親要素にカーソルを合わせるときに子要素のスタイルを設定できる**んですね。

# 4. おわりに

実装をする中で、指定した色が反映されないことや、hoverしても色が変わらないといったことが
何度かありましたが、CSSの優先順位を考慮してあげると解決できる内容でした。
~~正直、そこまでCSSを勉強しておらず単なる知識不足でしたが、~~
何事も初心に戻ることが大切であると感じました。
Tkinterのボタン配置方法いろいろ(pack,grid,place)

## はじめに
仕事でTkinterを使う機会ができたので、少し勉強しています。
基礎的な内容ですが、ヴィジェットの配置方法が複数あってわかりづらかったので、ボタンを使っていろいろ試してまとめてみました。

## pack()メソッドを使ってボタンを配置する
メソッドの引数にどこから並べるのかを記載してボタンを設置します。
以下の例ではTOPが2個あるので、ボタン5の位置がボタン1の下に積みあがるような配置になっています。

``` python:in
import tkinter as tk

base = tk.Tk()
base.geometry('500x400')
base.title('Button-set-test')

button1 = tk.Button(base, text='ボタン1').pack(side=tk.TOP)
button2 = tk.Button(base, text='ボタン2').pack(side=tk.LEFT)
button3 = tk.Button(base, text='ボタン3').pack(side=tk.RIGHT)
button4 = tk.Button(base, text='ボタン4').pack(side=tk.BOTTOM)
button5 = tk.Button(base, text='ボタン5').pack(side=tk.TOP)

base.mainloop()
```

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1359985/1d8c4d06-bcbf-d301-086e-6c4470b73fa8.png width=50%>

## grid()メソッドを使ってボタンを配置する
ボタンを格子状に並べて配置することができます。
最も小さい数値のボタンが左上に配置され、そこから数が小さい順に積みあがっていくような形になります。以下の例ではボタン5はもっと右下に配置されるかなと思いましたが、ボタン4の斜め下に配置されました。

``` python:in
import tkinter as tk

base = tk.Tk()
base.geometry('500x400')
base.title('Button-set-test')

button1 = tk.Button(base, text='ボタン1').grid(row=0,column=0)
button2 = tk.Button(base, text='ボタン2').grid(row=0,column=1)
button3 = tk.Button(base, text='ボタン3').grid(row=1,column=1)
button4 = tk.Button(base, text='ボタン4').grid(row=2,column=2)
button5 = tk.Button(base, text='ボタン5').grid(row=8,column=8)

base.mainloop()
```

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1359985/4da67560-d241-1976-65fd-67425ebda3f2.png width=50%>

## place()メソッドを使ってボタンを配置する
ピクセル単位で座標を設定してボタンを配置することができます。
ほかの2つと違い積みあがるイメージではないので、一番使いやすいと感じました。
以下の例ではボタン5の位置をボタン1の近くにしてみました。座標が近いと被ってしまうようなので、配置には注意が必要だなと思いました。

``` python:in
import tkinter as tk

base = tk.Tk()
base.geometry('500x400')
base.title('Button-set-test')

button1 = tk.Button(base, text='ボタン1').place(x=100,y=100)
button2 = tk.Button(base, text='ボタン2').place(x=200,y=100)
button3 = tk.Button(base, text='ボタン3').place(x=300,y=100)
button4 = tk.Button(base, text='ボタン4').place(x=300,y=200)
button5 = tk.Button(base, text='ボタン5').place(x=110,y=110)

base.mainloop()
```

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1359985/8314f2a3-4cdf-16bd-c907-3dd219df068a.png width=50%>
【#32 エンジニア転職学習】Go WebApplications　http/template

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

使用しているGoのUdemy教材後半部分である、
Webアプリ作成演習を学習していきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。


https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
本日はGoのwebアプリ用標準パッケージを中心に学習しました。

* ioutil
* http.ListenAndServe
* **http/template　<--Topics!**
* http.Redirect

# http/template
各ハンドラーからHTMLファイルを読み書きを可能にするメソッド等が入っているパッケージです。フロントエンドとバックエンドの連携が見れたので、少し感動です。
* `template.ParseFiles(File名)`で指定ファイルのテンプレートを作成
* template.Executeで指定ファイルへ出力を書き込む
* HTML内
    * `{{}}`と囲むことでstructの呼び出しや、printfの使用ができる


使用している教材はこちら↓


https://www.udemy.com/course/go-fintech/


# おわりに
最後までお読みいただきありがとうございました。
アドバイス・応援コメント等いただけますと幸いです。
スマホからValorantのストアを確認するDiscord Bot



## Valorant Bot
この記事は非常によくまとめられていた[Valorantの新ストア確認Botが出たらしい！](https://yart-lab.net/discord-valorant-bot/)の方の記事を参考に作っています。あらかじめご了承ください。

　
　

Valorantのストア情報が日替わりで毎日起動して確認しなくてはいけない！！！なんて思っている方いると思います！

そんな方にとてもおすすめするBotがあるので今回はそれを紹介していきたいと思います！

Botの追加は[Valorant Bot](https://discord.com/api/oauth2/authorize?client_id=990827352558813215&permissions=268435456&scope=bot%20applications.commands)こちらからできるのですが、BotをDiscordサーバーに追加しなくても使う方法があるのでそちらも併せて紹介したいと思います。サーバーに追加する方は追加した後「使い方」の章まで飛ばしてください。

まずは導入方法です！

## Valorant Botの導入
Valorant Botを使うには二つ方法があります。
まず一つは先ほど言った[Valorant Bot](https://discord.com/api/oauth2/authorize?client_id=990827352558813215&permissions=268435456&scope=bot%20applications.commands)から直接Botをサーバーに導入する方法です。

もう一つが[Valorant Bot Server](https://discord.gg/Z6xEAaKz7H)こちらのサーバーに一度入り、Botに直接コマンドを送ることでストア情報を確認する方法です。

どちらが好みかは人によると思いますが、サーバーにBotを導入するのはすぐできると思うのでもう一つの方法を解説します。

### サーバーに参加
[Valorant Bot Server](https://discord.gg/Z6xEAaKz7H)まずはこちらのサーバーに参加します。
[Disboard Valorant Bot Server](https://disboard.org/ja/server/880684749897728051)でも紹介されているサーバーです。

そうすると左上に「Valorant Bot」がいるはずなのでクリックして「@ Valorant Botへメッセージを送信」とあるところに適当にメッセージを送信します。

![Valorant Bot DM](https://yart-lab.net/wp-content/uploads/2022/07/e8020074a05a5ab953046f1f7fc1a295.png)

すると自分のDMの所にValorant Botがいるはずなのでこれで導入完了です。

以降はサーバーに追加した場合と同じ手順ですのでまとめて説明します。

## 使い方
ここからは使い方の説明です。

### Register
```shell
/register
```

を実行すると専用の画面が開きます。
![Valorant Bot Register](https://yart-lab.net/wp-content/uploads/2022/07/73d74a44d338541d9771ec2c979ae931-1024x129.png)


そこにValorantのユーザー名とパスワードを入力してください。
(Valorant(Riot)にログインする際のユーザー名とパスワードです！)

![Valorant Bot Register](https://yart-lab.net/wp-content/uploads/2022/07/0d42835cbe25d8650e8a2f065311012c.png)


うまくいけば
![Valorant Bot Register](https://yart-lab.net/wp-content/uploads/2022/07/42a75cf15e09bec9e61639ec454b89dc.png)

以下のように「Successfully Registered」と表示されます。
これで登録は完了です。
(Riotの2段階認証はオフにしてください！)

このコマンドで入力した情報は(コマンドを実行したことすら)誰にもわからないのでBotが導入されているどこのサーバーでも登録できます。

### Store
```shell
/store
```
![Valorant Bot Store](https://yart-lab.net/wp-content/uploads/2022/07/424a7c72d66d9d4d52267d11438d4b9b.png)

を実行するとしばらくしてストア情報が表示されます。

![Valorant Bot Store](https://yart-lab.net/wp-content/uploads/2022/07/62c951a5d683a250fbb49f350eb10d0d.png)

「Fetching Your Valorant Store」と表示されて少しすると

ストア情報が正常に取得出来ました！！よかったー！！

青いスキンの名前をクリックすると動画も見れるようです！動画がそもそも存在しないのもあるみたい。。。

UIもシンプルで分かりやすくていいですね...！

数が多いのでシンプルなのはありがたいです。。。

## さいごに
このValorant Botは現在も更新をし続けているようです！

私は送っていないですがBotの説明欄に機能提案やバグ報告のフォームもあるみたいなのでいい機能案が思いついたら送ってみたいですね！

(Valorant側の制約も厳しいので無理なものも多いみたいですが送ってみるだけ。。。)

ということで今回はストア情報が見れる[Valorant Bot](https://discord.com/api/oauth2/authorize?client_id=990827352558813215&permissions=268435456&scope=bot%20applications.commands)の紹介でした。

ユーザーの要望を聞いてくれるボットはうれしいですね！

これからも使っていこうと思います！

それでは！

> この記事は非常によくまとめられていた[こちら](https://yart-lab.net/discord-valorant-bot/)の方の記事を参考に作っています。あらかじめご了承ください。
bashにgitのブランチ名を表示

.bashrc
以下2行追記(Ubuntu)
```
GIT_PS1_SHOWDIRTYSTATE=true
export PS1='\[\033[01;32m\]\u@\h\[\033[01;33m\] \w \[\033[01;31m\]$(__git_ps1 "(%s)") \n\[\033[01;34m\]\$\[\033[00m\] '
```
ロリポップサーバーでFlaskを使おう！

## 目次
[概要](#概要)
[Helloワールドを出そう](#Helloワールドを出そう)

## 概要
__Flaskを使用してWebアプルを展開したいがVPS借りるほどのお金がない__
↓
__VPSが使えないならロリポップサーバーを使えばいいじゃない__

ということで、メモと宣伝がてらここに記しておきます。
この記事ではとりあえずロリポップサーバー上でFlaskを用いて作ったページを表示することを目指します。  
権限設定などはまたのでそのためのメモです。

__Flask上でSQL Archemyを使った検索システムを展開したい場合は以下のStep2以降もぜひぜひ参考にしてください！！__

https://gemma-knight.sygenmaki.com/entry/2022/07/17/ロリポップサーバーにFlaskで検索システムを作ろう

## Helloワールドを出そう

ディレクトリ構成は以下のようにします
```

$ ll
-rwx------ 1 <ユーザー名> LolipopUser 190  6月 25 19:56 index.cgi
-rw------- 1 <ユーザー名> LolipopUser 191  6月 25 20:53 views.py

```

- view.py
```python
from flask import Flask, render_template,request, redirect

app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello Test"


if __name__ == '__main__':
    app.run(debug=True)
```

- index.cgi
```
#!/usr/local/bin/python3
from wsgiref.handlers import CGIHandler
#from helloFlask import app

from views import app

#from flaskr import create_app
#app = create_app()
CGIHandler().run(app)
```
PMTiles で地理院地図Vectorタイルをホストする

gsi-mbtiles-tool で取得した地理院地図 Vector タイルを、PMTiles 形式に変換してみました。

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/74bc5761-813c-a5b4-a7c0-e29f58121160.jpeg)

# 使用したツールの導入
Python の pmtiles パッケージを使いました。

https://github.com/protomaps/PMTiles

Raspberry Pi OS で使う場合、Python3 系で使う必要があります。Python2 系ではエラーが出ます。インストールの際のコマンドラインは次のとおりでした。

```zsh
sudo pip3 install pmtiles
```

# MBTiles から PMTiles への変換
```zsh
pmtiles-convert --overwrite --gzip experimental_bvmap.mbtiles
 experimental_bvmap.pmtiles
pmtiles-convert --overwrite experimental_bvmap.mbtiles
 experimental_bvmap_raw.pmtiles
```
これで、gzip 圧縮ををしたものと、していないものの両方ができます。lsでファイルサイズを確認すると、次の通りになります。
```zsh
-rw-r--r--  1 pi pi  23G Jan  8  2022 experimental_bvmap.mbtiles
-rw-r--r--  1 pi pi  21G Jul 17 18:59 experimental_bvmap.pmtiles
-rw-r--r--  1 pi pi  36G Jul 17 21:11 experimental_bvmap_raw.pmtiles
```
変換した PMTiles ファイルは、当座、次の URL で実際に触ってみていただくことができます。

- https://protomaps.github.io/PMTiles/?url=https%3A%2F%2Fx.optgeo.org%2Fkagami%2Fexperimental_bvmap.pmtiles
- https://protomaps.github.io/PMTiles/?url=https%3A%2F%2Fx.optgeo.org%2Fkagami%2Fexperimental_bvmap_raw.pmtiles

いずれの場合も、一応表示できているタイルと、どうもうまく表示されていないタイルとがあるように思います。
HSVで行う簡易水彩

# 環境
Unity2021.2.18f1

# 概要
ポストエフェクトで水彩っぽい表現です。
HSV変換し、適当にいい感じのパラメータに調整し、RGBに戻します。
階調化も行っています。

![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/kenken5050/20220717/20220717194641.png)

元は以下で、こはくちゃん達のモデルをStandardシェーダに変えています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/kenken5050/20220717/20220717194622.png)
# コード
[ここ](https://kenken5050.hatenablog.com/entry/2022/07/17/195819)に全コード載せています。

以下のようなかんじで彩度と明度を調整しています。
```hlsl
float3 hsv = rgb2hsv(col.rgb);
hsv.y = saturate(hsv.y + (1.0 - (gray * _SaturateScale)));
hsv.z = clamp(gray, _ValueMin, 1.0);
col.rgb = hsv2rgb(hsv);
```

# 参考
https://kazupon.org/defold-shader-rgb2hsv/
PostgreSQL14の公式 document を読んでいこうと思う

## 背景
なんとなく、日々の input が少ないと思うところがあり、最近流行りの [Deepl 課金](https://togetter.com/li/1915736)もしてしまったので、何か英語 document を読んでみたいと思った。

## 読むもの
* https://www.postgresql.org/docs/14/index.html
  * 仕事で Postgresql を扱っているため、むしろ一度腰を据えて読んでみたかったと思っていた

## 何を書く
* あまり技術的な検証記事を書くつもりは今のところはない。
* あくまで知らなかったことやわからないところなどを備忘録的に書いていこうと思う。
Bokeh グラフ再利用時のRuntimeError:Models must be ...に対応する

Bokehで一度描画したグラフを、違うレイアウトで再利用しようとするとRuntimeError: Models must be owned by only a single document, ... というエラーがでます。

```python
from bokeh.plotting import figure, show
from bokeh.layouts import gridplot

p = figure()
p.scatter([1, 2, 3], [4, 5, 6])

show(p)

show(gridplot([[p]]))  # ここでエラー
```

これは一度showしたところで、グラフにIDがつくためのようです。
このエラーを回避するためには、IDをリセットする必要があります。

```python
from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.models import Model

p = figure()
p.scatter([1, 2, 3], [4, 5, 6])

show(p)

# p内部のModel型の要素を選択して、IDをリセットする
for model in p.select(Model):
    prev_doc = model.document
    model._document = None
    if prev_doc:
        prev_doc.remove_root(model)

show(gridplot([[p]]))
```

日本語ではあまり情報が探せなかったので、備忘録として書いておきました。
cscの作法 その242

# 概要
cscの作法、調べてみた。
練習問題やってみた。

# 練習問題
ファイルをhashしてvirustotalに投げて、判定せよ。

# サンプルコード

```
using System.Collections;
using System.IO;
using System;
using System.Text;
using System.Linq;
using System.Security.Cryptography;
using LitJson;
using System.Net;
using System.Net.Http;

namespace app
{
	class test0 {
		static void Main(string[] args) {
			ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls | SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12;
			if (args.Length == 0)
			{
				Console.WriteLine("cert0 file");
				return;
			}
			byte[] byteValue = File.ReadAllBytes(args[0]);
			SHA256 crypto = new SHA256CryptoServiceProvider();
			byte[] hashValue = crypto.ComputeHash(byteValue);
			var hash = String.Join("", hashValue.Select(x => x.ToString("x2")).ToArray());
			Console.WriteLine(hash);
			string url = "https://www.virustotal.com/vtapi/v2/file/report?apikey=******&resource=" + hash;
			HttpClient client = new HttpClient();
			string response = client.GetStringAsync(url).Result;
			LitJson.JsonData json = LitJson.JsonMapper.ToObject(response);
			try
			{
				Console.WriteLine("total: " + json["total"]);
				Console.WriteLine("positive: " + json["positives"]);
			}
			catch (Exception ex)
			{
				Console.WriteLine("pass");
			}
		}
	}
}






```

# 実行結果

```
>virustotal2 myenc.txt
pass

>
```


以上。
Azureのお勉強#01【Microsoft Power Platform × Pleasanter 外部API連携 ノーコード開発①】

<h1>概要</h1>
今回はこちらの、動画で学習していこうと思います！

第1回目　配信デビュー！！Microsoft Power Platform × Pleasanter 外部API連携 ノーコード開発①【Study with me/RPA】


まずは、PowerPlatformのPower Virtual AgentsをTeams上で使用できるようにしていきます。
まず、Teamsでチームを作成し、今回は「Pleasanter用」としました。
![スクリーンショット 2022-10-09 2.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/6efb89b7-c133-1e24-73d5-ceb4a361864b.png)

次に、Power Virtual Agentsを始めてみましょう。
検索窓に「Power Virtual Agents」と打ち込み、Power Virtual Agentsのページを開きます。
![スクリーンショット 2022-10-09 2.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/1d5d86ff-d9ba-2df0-bcdd-ba48f2253fc4.png)

その後「今すぐ始める」をクリック!
チャットボットを作成する画面に飛ぶので、先ほど作成したチーム「Pleasanter用」を選択し、続行をクリック
チャットボットの名前を「顧客情報取得」と入力し、作成を押します。
こんな感じで、ボットを作成する画面になればOK！
![スクリーンショット 2022-10-09 3.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/413bfd65-a2da-2c2b-ce29-118c7996ae19.png)

作成が完了したら、上のタブから、「チャットボット」を選択し、顧客情報取得の三点タブリーダーをクリックし、「トピック」を作っていきます
![スクリーンショット 2022-10-09 3.08.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/d7104f16-f2f7-4301-9d96-cacff2ea5976.png)

現在導入されている既存のトピックが表示されたら、「新しいトピック」をクリックし新しいトピックを作成していきましょう。
現在は既存の解答方法しか持っていないチャットボットに新しい解答方法を学習させる手順です。
フレーズの追加に「取得」と打ち込み、ENTERを２回押します。
![スクリーンショット 2022-10-09 3.12.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/6b68ea90-f62f-6140-8f1c-a7370e056f3c.png)

そして、追加されたことを確認したら、下のワークフローのメッセージに「Pleasanterからデータを取得しますか？」と入力します。
その後、「保存」をクリックし、「ボットのテスト」をクリックし、ボットのテストを行っていきます。
![スクリーンショット 2022-10-09 3.17.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/db2865d3-b788-decc-8ce6-5087c8538302.png)
メッセージに「取得」と入力し、送信してみます。送信して「Pleasanterからデータを取得しますか？」と帰ってくれば成功です！
![スクリーンショット 2022-10-09 3.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2502107/e952218f-86b9-d863-efc0-068c657f407f.png)

次に、Pleasanterのインストールと設定を行なっていきます。
Gradleテスト時にテスト用の環境変数をセットする方法


# この記事の概要
Gradleでテストを実行する際の、テスト用環境変数をセットする方法を紹介します。

筆者はHottyDBという検索エンジンとレコメンドエンジンの機能を搭載したRDBMSを個人開発しています。
この記事では、そのHottyDBを開発する際に利用した方法を紹介したいと思います！

ちなみに、過去の記事でHottyDBに関する解説もしていますので、よければそちらも参照してみてください！！

https://qiita.com/toru1055/items/0fe400989373823e9c78

# build.gradleへの追記
以下のようなブロックを `build.gradle`へ追記してください。
```
tasks.withType(Test) {
    systemProperty("`環境変数名1`", `設定値1`)
    systemProperty("`環境変数名2`", `設定値2`)
    ...
}
```


例：環境変数=`SAMPLE_VAL`に値=`3`を設定する場合
```
tasks.withType(Test) {
    systemProperty("SAMPLE_VAL", 3)
}
```

# 環境変数の利用方法(例)
上記例の場合、下記のようにしてJavaプログラムから環境変数を取得できます。
```
int val = Integer.getInteger("SAMPLE_VAL", 5);
```
※デフォルト値を `5` とする場合

---

以上で手順は終了です！

ぜひお試しください！！
やばい！コマンドアプレットに「shutdown now」を設定してしまった！

# はじめに

この記事は、僕がやらかしたミスと、それをどう解決したか書いたものです。
やらかしたミスは、タイトルのとおりです。

# 環境

OS: Linux Mint 20.2

# ことの発端

僕「MATEパネルに『コマンドアプレット』ってものがあるのか」
僕「さっそく使ってみよう」
![コマンドアプレットでBluetoothマウスのバッテリー残量を表示する様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643544/7ceb2d75-e272-849e-3f53-f8857931b261.png)
僕「なるほど、コマンドを設定するとそのコマンドを一定間隔で実行して、その結果を表示してくれるのか」
僕「……」

***<font color="red">僕「これ、 shutdown コマンドを設定したらどうなるんだろう？」</font>***

僕「試してみよう」

|&emsp;&emsp;&emsp;アプレットの設定のコマンド&emsp;&emsp;❎|
|:-:|
|コマンド: <code>shutdown&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</code>|

僕「あれ？何も表示されない」
僕「さすがにシャットダウンはできないようになってるのかな？」

|&emsp;&emsp;&emsp;アプレットの設定のコマンド&emsp;&emsp;❎|
|:-:|
|コマンド: <code>shutdown now&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</code>|

PC「ﾌﾟﾂﾝｯ」
僕「あ」

僕「…………」

***僕「そういえば、アプレットって電源落としても残ってるよな……」***

（やらかしに気づき冷や汗が湧き出る）

僕「と、とりあえず起動してみよう」
（ログイン）
PC「ﾌﾟﾂﾝｯ」
僕「あ（絶望）」

# 状況

コマンドアプレットに `shutdown` を設定したときに何も表示されなかったのは、 shutdown コマンドのメッセージが**標準エラー出力**に出力されていたからであり、アプレットに表示されないだけでしっかり機能していました。つまり、この時点で、ログイン1分後に自動でシャットダウンされる爆弾は完成していたのです。
しかし、そんなことは露ほども考えなかった僕は、コマンドに `now` を追加してしまい、1分のわずかな猶予すら消え失せ、ログイン直後にシャットダウンを開始する悪魔が誕生してしまいました。そして、ログイン不可能な状態に陥ってしまったのです。

# 解決

とりあえずGoogleで検索してみましたが、有力な情報は見つかりませんでした。こんな馬鹿なことをしている人は、他にいないのでしょう。
誰かに聞くのも恥ずかしいので、自力での解決を試みます。

### 1. 他のユーザを経由してログイン

MATEパッドのアプレットはユーザごとに設定する機能なので、他のユーザでならログインできます。
ログインできたら、シェルを起動して、 [su コマンド](https://kazmax.zpp.jp/linux_beginner/su.html)で問題のユーザにログインします。

```shell-session
他のユーザ:~$ su - 問題のユーザ
パスワード: 
問題のユーザ:~$ 
```

他のユーザがなければ、 <kbd>`Ctrl`</kbd>+<kbd>`Alt`</kbd>+<kbd>`F1`</kbd> を押して、仮想コンソールからログインしてもいいかもしれません。
要は、GUIでログインしなければいいのです。

### 2. grepで検索

次に、 [grep コマンド](https://kazmax.zpp.jp/cmd/g/grep.1.html)で問題の原因となっている `shutdown now` を検索します。
すると、次のようになりました。

```shell-session
問題のユーザ:~$ grep 'shutdown now' -rl .  # -r: 各ディレクトリ下を再帰的に検索, -l: ファイル名のみ出力
./.bash_history
./.config/dconf/user
問題のユーザ:~$ 
```

2つのファイルで検出されました。
.bash_history はBashの履歴ファイルなので、 ~/.config/dconf/user にコマンドアプレットに設定したコマンドが保存されていると考えられます。

### 3. お好きなエディタで `shutdown now` を削除

あとは、見つけたファイルから `shutdown now` の部分を削除すれば解決です。
僕は Vim を使って編集しました。 
```shell-session
問題のユーザ:~$ vim ~/.config/dconf/user -c 's/shutdown now/echo nyaaan/' -c wq
問題のユーザ:~$ 
```

# 結果

おそるおそるログインしてみると……
![PC「nyaaan」](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643544/ef4d7bb0-9a9a-3bdc-3812-0f618cb7ee18.png)
うまく変更されていました。
やったね。

# まとめ

気軽に shutdown コマンドを打たないようにしましょう！

# おわりに

とほほ…
もう shutdown コマンドはこりごりなーん…
サイバーセキュリティお嬢様「クラッカー？何それ食べられますの？」

# ある日

じいや「ところでお嬢様」
じいや「**サイバー攻撃**は、何者がどんな目的でやっているのかご存知ですかな？」

CSお嬢様「そんなの、悪いやつが...カネ目当てですの？」
CSお嬢様「そういえばよくドラマや映画で**ハッカー**が登場しましてよ！」
CSお嬢様「そう、**ハッカーがカネ目当てやイタズラでやっているイメージ**ですわー！」

じいや「そうですな、これからは２回に分けて」
じいや「ハッカーについて勉強していきましょうか」


# ハッカーとは

じいや「ハッカーといえば」
じいや「お嬢様がおっしゃられたようなイメージを持っている方が多いでしょうな」

じいや「しかし」

じいや「元々は**コンピュータについて高い知識や技術を持った人**のことをハッカーと呼んでいたのですぞ」
じいや「ちなみに、彼らが行う行為を『**ハッキング**』と呼ぶのです」

じいや「今日では多くのメディアが、悪意を持ってハッキングを行う者に対して『ハッカー』と呼んでおりますが」

CSお嬢様「実際には意味合いは違うということね、じいや」

じいや「Exactly（そのとおりでございます）、ですぞ」

## 正義のハッカー（ホワイトハッカー）とは
CSお嬢様「悪意を持たない、ハッキングをする人のことは何て呼びますの？」

じいや「ホワイトハットハッカーとか、ホワイトハッカーですな」
じいや「後述するブラックハッカーのサイバー攻撃を守るために、セキュリティ対策を行うのが仕事ですぞ」
じいや「お嬢様にはもちろん、ホワイトハッカーを目指して欲しいものですな」

CSお嬢様「もちろんですわー！」

## 悪意のハッカー（ブラックハッカー/クラッカー）とは
CSお嬢様「ではホワイトの反対はブラックですの？」

じいや「今回のお嬢様はなかなか冴えていらっしゃいますな」
じいや「その通り、ホワイトハットハッカー、ホワイトハッカーの対義語はブラックハットハッカー、ブラックハッカーですぞ」

CSお嬢様「どうして帽子（hat）なんですの？」

じいや「いい質問ですぞ」
じいや「帽子の色は**役割**を表しているのです」
じいや「他にもグリーンハット、ブルーハット、レッドハットが存在しますぞい」

CSお嬢様「**プリキュアで例えるとグリーンはキュアミルキー、ブルーはキュアコスモ、レッドはキュアスターみたいな感じですわね？**」
じいや「スター☆トゥインクルプリキュアですな」

じいや「また、悪意のハッカーのことをクラッカーとも呼びますな」

CSお嬢様「**クラッカー？何それ食べられますの？**」

じいや「cracker、確かにお菓子のクラッカーと同じ単語ですが」
じいや「ここでは防御されているものを割って侵入することを意味しますぞい」
じいや「彼らが行う行為を『クラッキング』とも呼びますぞ」
じいや「覚えておくと良いでしょう」

CSお嬢様「クラッカーは悪い奴、覚えましたわー！」

# おわりに
じいや「どうでしたかな」

CSお嬢様「私ハッカーについてだいぶ詳しくなりましてよ」
CSお嬢様「ありがとうじいや」

じいや「これからも少しずつセキュリティの知識を身につけて」
じいや「**真のサイバーセキュリティお嬢様**を目指すのですぞ」

CSお嬢様「わたくし頑張りましてよー！」

# 参考文献
[インターネットの安全・安心ハンドブック](https://security-portal.nisc.go.jp/handbook/index.html)
ホワイトハッカーの教科書

### 前回までのあらすじ
[サイバーセキュリティお嬢様「CIAってなんですの？」](https://qiita.com/choco_py3/items/51c04bdc8bfe25fe84f3)
[サイバーセキュリティお嬢様「しんせいせい...ってなんですの？」](https://qiita.com/choco_py3/items/0d05409534f267e40001)
[サイバーセキュリティお嬢様「き...脆弱性ってなんですの？」](https://qiita.com/choco_py3/items/15479e37b011c34abf36)
[サイバーセキュリティお嬢様「マルウェア...？スキーウェアのお仲間ですの？」](https://qiita.com/choco_py3/items/00af04f6906de4135b48)

### 次回以降
[サイバーセキュリティお嬢様「ハクティビストってなんですの？」](https://qiita.com/choco_py3/items/262df8fc893cf7fd303f)
[サイバーセキュリティお嬢様「F5攻撃（アタック）ってなんですの？」](https://qiita.com/choco_py3/items/f0164dedc7e4b761b25d)
[サイバーセキュリティお嬢様「SQLいんじぇくしょん...ってなんですの？」](https://qiita.com/choco_py3/items/4a597f25f0c3dbbea437)
[サイバーセキュリティお嬢様「クロスサイトスクリプティング？...美味しそうですわぁ！」](https://qiita.com/choco_py3/items/f3bb70ecf819bb55ad80)

# 宣伝
[技術書典13](https://techbookfest.org/event/tbf13)にサークル参加予定です。
良かったら[Twitter](https://twitter.com/choco_py3)フォローしてください！
アイデアの作り方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406339/e4ad7c7e-11b2-5bb5-39bb-42ab79dafbac.png)

(※ 画像はstable diffusionで作成)

https://www.amazon.co.jp/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9-%E3%82%B8%E3%82%A7%E3%83%BC%E3%83%A0%E3%82%B9-W-%E3%83%A4%E3%83%B3%E3%82%B0/dp/4484881047/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3JGTG69XPDQUJ&keywords=%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%E6%96%B9&qid=1636038759&sprefix=%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%81%AE%E3%81%A4%E3%81%8F%E3%82%8A%2Cinstant-video%2C261&sr=8-1

## 書籍概要
- 1940年から読み継がれる超古典名著。コンパクト（50ページ弱）にアイデアの発想プロセスが説明されている

## なんで読んだのか？
- 昔買って積んでたから
- 普通に使えそうな内容だから

## 読んだ感想
### 全体概要
この本は全100 ページと短く、さらにそのうちの 4 割ぐらいが指揮者による解説やあとがきです。
つまり、本文は 60 ページぐらいと非常に短い本文です。
そのため、サクッと 1 時間経たずに読めてしまいます。
それでいて、アイディアを作るエッセンスが非常に詰まっています。

読むときの注意事項として、元々広告業界の人に向けて作られているため、広告に関する内容が多いです。エッセンスはどんな分野の人にも適用できる内容かと思いますので関係ないところは差し引いて読むのがよいかと思います。

この本が書いたのを非常に古く原著の初版は 1940 年らしいです。
実践の仕方として紙のファイルを活用するなどの方法が書かれていますが、現実の現代の方法ではできない内容かと思いますので、そこも読み替えて今なりの方法を考えてみると良いかと思います。

### アイデアの作り方
- 重要な概念
    - アイデアの作り方としては重要な考え方として、アイデアは既存の事象の組み合わせであるということです。
- 作り方
    - アイデアの作り方には5 つのステップがあります
    1. 情報収集📑
        - 1 つ目のステップは情報を集めるということです。情報を集めるには、情報の種類として①「特殊情報＝アイデアを作りたいターゲットに関するジャンルの情報」及び②「一般的な情報」の 2種類があります。まず、それらを集めて第2段階に入ります。
    2. 熟考🤔 
        -  第 2 段階はそれを集めた情報を精査して、細かく見て、さらにそれらを組み合わせて新しい組み合わせがないかをひたすら考えることです。この組み合わせを精魂が突き果てるまでやり続けます。それをやり続けてもう無理だというところまで行ったら第2段階は終わりです。
    3. 普段通り🛀
        -  次の3段階は何もしないことです。一旦、その代理段階で考えたことを頭の外に置きましょう。その上で日常生活を行います。なお、その時になるべく感じを心を刺激するような音楽であったりだとか、映画でやったりだとか小説だったりだとか、それらのものに触れることが重要になります。つまり、第2段階でいろんな情報を咀嚼して体の中に取り込んで、第 3 段階でそれらを紹介してアイデアが出てくるのを待つという段階になります。
    4. A-ha💡  
        -  第4段階がいよいよアイデアが生まれるという段階になります。それらは太下瞬間に訪れます。こちらの認識していない時に訪れます。
    5. 適用🧩 
        -  第5段階がそれが生まれたアイデアを現実の世界に当てはめるという段階です。ここで多くのアイデアが失敗に終わります。なぜならばアイデアを現実の世界に当てはまるには数多くの努力がえ必要となるためです。その団員旅行、何かを乗り越えて、ようやく有益なアイディアというものが確立されるわけです
systemdのユニットファイルを読み込むパスを知りたい

systemdのユニットファイルを配置しようと、配置場所を考えていた際に、どのパスのファイルを読み込んでいるのか気になったので調べた。

なお、環境はUbuntu22.04。

## 結論

以下のようにするとわかる。

```
$ systemctl --no-pager --property UnitPath show
UnitPath=/etc/systemd/system.control /run/systemd/system.control /run/systemd/transient /run/systemd/generator.early /etc/systemd/system /etc/systemd/system.attached /run/systemd/system /run/systemd/system.attached /run/systemd/generator /usr/local/lib/systemd/system /lib/systemd/system /usr/lib/systemd/system /run/systemd/generator.late
```

以下はこの記事において蛇足だが、
実際に配置する場所としては、

[Ubuntu Manpage: systemd-system.conf, system.conf.d, systemd-user.conf, user.conf.d - System and session](https://manpages.ubuntu.com/manpages/xenial/man5/systemd-system.conf.5.html) に、

> When packages need to customize the configuration, they can install configuration snippets in /usr/lib/systemd/*.conf.d/. Files in /etc/ are reserved for the local administrator, who may use this logic to override the configuration files installed by vendor packages.

とあるのを考慮すると、
`/usr/lib/systemd/system`配下に配置するのが良さそうな感じがする。

## Ref

- [debian - Why does a systemd unit file at `/usr/lib/systemd/system/` still works for Ubuntu? - Unix & Linux Stack Exchange](https://unix.stackexchange.com/questions/508226/why-does-a-systemd-unit-file-at-usr-lib-systemd-system-still-works-for-ubunt)
- [Ubuntu Manpage: systemctl - Control the systemd system and service manager](https://manpages.ubuntu.com/manpages/xenial/man1/systemctl.1.html)
- [Ubuntu Manpage: systemd-system.conf, system.conf.d, systemd-user.conf, user.conf.d - System and session](https://manpages.ubuntu.com/manpages/xenial/man5/systemd-system.conf.5.html)
python selfについてまとめる


#### はじめに
この記事では、pythonのselfについてまとめていきます。
自分の中でselfへの理解が曖昧だったので、記事を書くことにしました。

まず、初めにクラスとインスタンスから説明していきます。

クラスとはオブジェクトの処理を一つにまとめたものです。**よく金型とか設計図みたいな表現がされます。** インスタンスはクラスの実体化を意味します。 **Aの設計図からAを作り出すことです。**
では、実際のPythonのソースコードでこの挙動を見ていきましょう。

```python:sample.py
class Student:
  def __init__(self, name):
      self.name = name

  def hello(self):
      print(self.name)

exe = Student("山田太郎")
exe.hello()
```

exe=Student("山田太郎")の部分でインスタンスを生成しています。

```python:sample.py
  def __init__(self, name):
     self.name = name
```

このdef__init__()は特殊な関数でクラスを呼び出した時に最初に呼ばれる関数。
イニシャライザとも呼ばれてたりします。

処理の流れとしては、exe=Student("山田太郎")でインスタンスを生成→イニシャライザが呼び出される流れです。

#### selfって何？

それではこの記事の主題であるselfについて書いていきます。
**selfとは、インスタンス自身。**

selfは慣例的にselfとなっているだけで、実はここの名前は指定がない。
ただ、selfにしておいた方が無難。

```python:sample.py
 class Student:
  def __init__(self, name):
      self.name = name

  def hello(self):
      print(self.name)

exe = Student("山田太郎")
exe.hello()

```

```python:sample.py
exe = Student("山田太郎")
```

イニシャライザにはselfとnameの二種類があるが、インスタンスの生成時に引数が1つなのはselfがインスタンス自身のため。
インスタンスそのものを引数として渡す必要がないため、山田太郎だけ引数として渡せばいい。

#### イニシャライザにselfを使わないとどうなるの？

```python:sample.py
class Student:
  def __init__(self):
      name = "山田太郎"

  def hello(self):
      print(self.name)

exe = Student()
exe.hello()
```


```python:実行結果
AttributeError: 'Student' object has no attribute 'name'
```

先程、説明した通り、**selfとはインスタンスそのもの**を指します。
self.nameとnameの違いとして、**self.nameはインスタンスにnameという属性を追加している。**
**これがインスタンス変数と呼ばれるものの正体**
一方の先程のコードではnameだけの指定なのでインスタンスにname属性が追加される訳ではない。
なので値が参照できないとのエラーが出力される。

#### インスタンスメソッドにselfを渡さないとどうなる？

```python:sample.py
def hello(self):
  print(self.name)
```
先程のhelloメソッドはインスタンスメソッドと呼ばれるメソッドです。
インスタンスメソッドとはインスタンスを用いて使用するメソッドです。

```python:sample.py
def hello():
    print("あいうえお")
```

つまり、引数にselfがない関数を定義すると、
```python:sample.py
TypeError: hello() takes 0 positional arguments but 1 was given
```
この様に引数が定義されていないとエラーが返ってきます。

インスタンスメソッド以外にもクラスメソッドやスタティックメソッドなどあり、クラスメソッドやスタティックメソッドを使う場合はデコレートする必要がある。


#### インスタンスメソッドの中でクラス変数を参照する時はどうする？

```python:sample.py
class Student:
  hoge = "hoge"

  def __init__(self, name):
      self.name = name

```

このhogeの部分はクラス変数です。
クラスで共通して使用する変数です。
**インスタンスはクラスを実体化したものなので、インスタンスからクラス変数へアクセスすることができます。**

```python:sample.py
class Student:
  hoge = "hoge"

  def __init__(self, name):
      self.name = name

  def hello(self):
      print(self.hoge)

exe = Student("山田太郎")
exe.hello()
```

なので、上のコードの様にselfからクラス変数へアクセスできます。
では、クラス変数とインスタンス変数の変数名が同じ場合はどうなるでしょうか？

```python:sample.py
class Student:
  name = "hoge"

  def __init__(self, name):
      self.name = name

  def hello(self):
      print(self.name)

exe = Student("山田太郎")
exe.hello()
```

**インスタンス変数とクラス変数が同じ場合はインスタンス変数が優先される。**
なので、ここでは山田太郎が出力される。

#### **2022/08/15　追記**
あくまでインスタンス変数の属性が優先して使用されるだけであって、クラス変数の値を書き換えている訳ではない。
**<font color="red">クラス変数はインスタンス変数によって隠蔽される。**
なので、クラス変数を参照すると、hogeがそのまま出力されてくる。
ただ同名の場合はインスタンス変数が優先されてしまうので、インスタンス変数とクラス変数の名前を同じにすることは極力避けるべき。



#### まとめ
selfとはインスタンスそのものを表す。
インスタンスはクラスを実体化させたもの。


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

https://prograshi.com/language/python/py-self-in-class/
Visual Studio CodeのJava環境でエラー出たとき

## 経緯

知り合いの方からJavaをVSCodeで動かすときにエラーが出たとの相談があった。
自分はMacを使ったことがないので調べながらサポートしてみた。

#### 発生したエラー

![qOe0qJxZ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224453/cef8bb4e-e811-2301-18e7-a2625a69edb5.png)

```
There is no valid JAVA_HOME setting to launch Gradle Language Server.
Please check your "java.jdt.ls.java.home" setting.
```

## 結論

「Open Settings」ボタンで開く `settings.json` にjava.homeを設定する。
記事によっては `"java.home": "/Library~"`と書かれているが、
エラーで出た `java.jdt.ls.java.home` を指定することで解消した。

```json:settings.json
"java.jdt.ls.java.home": "/Library/Java/JavaVirtualMachines/amazon-corretto-18.jdk/Contents/Home"
```

## おまけ

発生した方は以下のようになっていたので上記結論のように書き換えた。

```json:settings.json
"spring-boot.ls.java.home": ""
```

## なぞ

Windows環境だとJDKインストール時にJAVA_HOME設定されたので
自分ではこんな現象起きたことがなかったがMacだとJAVA_HOME設定されないのか？
VueでWebアプリ作成#2:Topページの修正

前回の続きです。
今回はTopページを変更します。

作成したVue Cliプロジェクトのデフォルトのソースを書き替えていきます。

HomeView.vueのファイル名を変更し、デフォルトのソースを消してゼロから書いています。
```php:TopView.vue
<template>
   <div class="top">
     <h1>これはTopページです！</h1>
   </div>
</template>

<script>
  export default({
     name:"TopView"
  });
</script>
```
リンクのテキストをTopに変更、styleにはscssを設定しています。
```php:App.vue
<template>
  <nav>
    <router-link to="/">Top</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>
<style lang="scss">
</style>
```
ルーティングもTopViewに変更しています。
```php:router/index.js
import { createRouter, createWebHistory } from "vue-router";
import TopView from "../views/TopView.vue";

const routes = [
  {
    path: "/",
    name: "top",
    component: TopView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];
```
とても簡単な変更でした。
ここをどんどん変えていって、それなりのWebアプリにしたいと思います。
M1MacでMySQL5.7のイメージがのエラーで起動できないからMySQL8.0で起動する

個人の学習用にMySQL5.7用のイメージを立ち上げようと思ったら以下エラーで拒まれてしまいました・・・

```
no matching manifest for linux/arm64/v8 in the manifest list entries
```

ARMアーキテクチャのイメージがなく、失敗したというものでした。
素直にamdのイメージを実行してもよかったのですが、どうせならバージョンあげて実行することにしました。

:::note warn
諸般の事情でmysql5.7を使わなきゃいけない方は以下を指定してください
`platform: linux/amd64`
:::

## my.cnf作成

以下の設定をファイルに外出しします。

```my.cnf
[mysqld]
character-set-server = utf8mb4
collation-server = utf8mb4_bin
default-authentication-plugin = mysql_native_password
```

それぞれ、文字コードの設定、照合順序、認証方式の設定が書かれています。
MySQL8.0.4からデフォルトの認証方式が変更されているため、ここでは以前のデフォルトと認証方式を指定しています。

## my.cnfをマウントする

```docker-compose.yml
services:
  mysql: 
    image: mysql:8.0
    volumes:
      - ./my.cnf:/etc/mysql/conf.d/my.cnf
```

以下のように`my.cnf`を`/etc/mysql/conf.d/my.cnf`にマウントしてあげると先程の設定を読み込んでくれます。

以上で、MySQL8.0でも起動できるようになりました！ :tada:
m1 mac mini 初期設定

# 記述範囲
起動してからBrewをインストールするまで。

# Rosetta 2 install
```
softwareupdate --install-rosetta
```

# Root Password Initilize
```
sudo passwd root
```

# Brew Download & Install
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

## BrewをPathへ追加
https://chicog.me/posts/sr4qml2wg
```
### zshを利用していない場合は、.bashrc または、.bash_profileを変更する
vi ~/.zshrc

### 以下を追加して保存して閉じる
export PATH=/opt/homebrew/bin:$PATH

### 設定を再読み込み
source ~/.zshrc
```

# Git install
```
brew install git
git --version
```

# Node install
```
brew install node
```

# Yarn install
```
brew install yarn
```

# Operation not permitted
> java.io.UncheckedIOException: java.nio.file.FileSystemException: /var/folders/v1/4njrfxs104vf274cpjjj1vm40000gn/T/com.apple.iCal/TemporaryItems: Operation not permitted

フルディスクアクセスを与える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/1ae9ae38-df67-2d14-0c4f-141ea0eb39a4.png)
Certbotの新しいインストール方法

# 何が書いてあるか
EC2(AmazonLinux V2)でのcertbotのインストール方法が変わりました。
昔の方法でやると
```
Your system is not supported by certbot-auto anymore.
Certbot cannot be installed.
```
のようなエラーが出てしまい継続できません。

`snap`を使った方法でインストールするやり方で回避できるようで、この方法を備忘録的に残しておきます。

## インストール手順
※以降はrootユーザーで実行してください。

### snapdのリポジトリ設定
wgetコマンドを実行してsnapdのリポジトリをダウンロードします。
```sh
$ cd /etc/yum.repos.d/
$ wget https://people.canonical.com/~mvo/snapd/amazon-linux2/snapd-amzn2.repo
```

yum.confの最後に1行設定(exclude=snapd-*.el7 snap-*.el7)を追加します。
```sh
$ vi /etc/yum.conf
・・・・・
exclude=snapd-*.el7 snap-*.el7
```

### snapdのインストール
yumを利用してsnapdのインストールを行います。
```sh
$ yum install snapd
```

### snapdの起動設定
snapdを起動しつつ、自動起動設定を行います。

```sh 
$ systemctl enable --now snapd.socket
```

### コマンドのリンク
snapへのシンボリックリンクを生成します。
```sh
$ ln -s /var/lib/snapd/snap /snap
```

### certbotインストール
snapでcertbotをインストールします。
```sh
$ snap install --classic certbot
```
※私がここで遭遇したエラーの原因は`yum`でインストールした`certbot`が残っていたためでした。

証明書の取得などは今まで通りでできるようです。
今までのインストールの仕方（gitHub版らしい）が廃止された理由は掴めてません。（誰か知っていたら教えてください。）
Azureのお勉強開発

<h1>概要</h1>
Microsoftさんの製品により理解度を深めるため、次はAzureの勉強を始めていきたい!<br>

学習は動画や本を中心に行っていく！<br>
最初に目標を立てるのがとても大切だと考えています。<br>
なので、目標を建てて、それを着実に達成していこうと考えています。<br>

<h1>目標</h1>
試験 AZ-900: Microsoft Azure の基礎に合格する！<br>
Azureを使用して、Hackathonなどに参加し、実際に動かす！<br>

<h1>学習に用いる予定のコンテンツ</h1>
<ul>
    <h3>1.Youtube</h3>
    <ul>
        <li>
            <h4><a href="https://www.youtube.com/channel/UCV6RBsjd_mzOyuJoNHyLX6A/videos">1-1.よわよわイカエンジニアあきのゆるゆる勉強会</a>
            </h4>
        </li>
        <ul>
            <li>
                <h5>1-1-1.第1回目</h5>
                <a href="https://www.youtube.com/watch?v=Nll8xAxpQ4k&t=641s">配信デビュー！！Microsoft Power Platform ×
                    Pleasanter 外部API連携 ノーコード開発①【Study with me/RPA】
                </a><br>
                ==>
                <a>学習ノート</a>
            </li>
            <li>
                <h5>1-1-2.第2回目</h5>
            </li>
            <li>
                <h5>1-1-3.第3回目</h5>
            </li>
        </ul>
        <li>
            <h4><a href="https://www.youtube.com/channel/UCbYatXqIz_h_Qp0y3AHqoQg/videos">1-2.Microsoft Learn Student
                    Ambassadors Japan</a></h4>
        </li>
        <ul>
            <li>
                <h5>1-2-1.第1回目</h5>
            </li>
            <li>
                <h5>1-2-2.第2回目</h5>
            </li>
            <li>
                <h5>1-2-3.第3回目</h5>
            </li>
        </ul>
    </ul>
    <h3>2.本や参考書</h3>
    <ul>
        <li>
            <h4><a href="https://www.amazon.co.jp/dp/4865942319">2-1.合格対策 Microsoft認定 AZ-900:Microsoft Azure
                    Fundamentalsテキスト&問題集</a></h4>
        </li>
        <ul>
            <li>
                <h5>2-1-1.第1章</h5>
            </li>
            <li>
                <h5>2-1-2.第2章</h5>
            </li>
            <li>
                <h5>2-1-3.第3章</h5>
            </li>
        </ul>
        <li>
            <h4><a href="https://www.amazon.co.jp/dp/481561086X">2-2.Microsoft認定資格試験テキスト AZ-900:Microsoft Azure
                    Fundamentals</a></h4>
        </li>
        <ul>
            <li>
                <h5>2-2-1.第1章</h5>
            </li>
            <li>
                <h5>2-2-2.第2章</h5>
            </li>
            <li>
                <h5>2-2-3.第3章</h5>
            </li>
        </ul>
        <li>
            <h4><a href="https://www.amazon.co.jp/dp/429501141X">2-3.(模擬問題付き)徹底攻略 Microsoft Azure
                    Fundamentals教科書[AZ-900]対応</a></h4>
        </li>
        <ul>
            <li>
                <h5>2-3-1.第1章</h5>
            </li>
            <li>
                <h5>2-3-2.第2章</h5>
            </li>
            <li>
                <h5>2-3-3.第3章</h5>
            </li>
        </ul>
    </ul>
    <ul>
c#でlibyara その9

# 概要
c#でlibyaraやってみた。
練習問題やってみた。

# 練習問題
sality のyaraルールを探せ。

# サンプルコード

```
rule win_sality_auto {
	strings:
		$sequence_0 = { 02040a 8845fc 8b4dfc 81e1ff000000 }
		$sequence_1 = { 0311 52 6878563412 e8???????? }
		$sequence_2 = { 0302 50 6878563412 e8???????? }
		$sequence_3 = { 0302 8945fc 8b4d10 8b55fc }
		$sequence_4 = { 837d1400 741c 8b4d10 51 8b550c }
		$sequence_5 = { 0302 50 6a00 e8???????? }
		$sequence_6 = { 02c8 884dec 8b55f0 83c201 }
		$sequence_7 = { 0255fc 8855ec 8b45ec 25ff000000 }
		$sequence_8 = { 50 e8???????? 8d9547164000 52 }
		$sequence_9 = { 6a00 6a00 ff9585144000 50 }
		$sequence_10 = { 3b4218 75e2 3b4218 7502 eb35 8b7224 }
		$sequence_11 = { 8d9533164000 52 50 ff953a144000 }
		$sequence_12 = { 2f 8803 43 80e904 73ec }
		$sequence_13 = { 83c404 eb0a 59 83c304 }
		$sequence_14 = { 0f858c000000 8d8578274000 68fe010000 50 6a00 }
		$sequence_15 = { 56 52 ff953a144000 e8???????? 8907 5a 83c704 }
		$sequence_16 = { 014304 c3 53 56 }
		$sequence_17 = { 00fb fb 804880bc 280d???????? }
		$sequence_18 = { 0306 50 8d5604 e8???????? }
		$sequence_19 = { 0306 50 8b4e04 8d5608 }
		$sequence_20 = { 0007 7307 c607ff 8ac1 }
		$sequence_21 = { 0202 7466 0fb77202 8b7a04 }
		$sequence_22 = { 010d???????? 83c004 5f 5e }
		$sequence_23 = { 031e ff7608 ff7604 e8???????? }
	condition:
		7 of them and filesize < 1523712
}


```

以上。
VisualStudioでインラインアセンブラ

**【私が思うアセンブリ言語（読まなくてもよい）】**
「今更？」「そんなのやってなんの役に立つの？」と言われることがあるアセンブリ言語だが、私は高級言語を使う上でも役に立つ知識だと思っている。
その根拠として、高級言語でコードを書いているときに「アセンブリコードだとこうなるんだろうな」という予測ができるようになるからだ。
アセンブリ言語は機械語と1対1の関係になっているため、知識として持っておくと、高級言語でできないこととできることを理解することができる。
私はそのように考えているので、アセンブリ言語は知っておいて損はないと思っている。
**【インラインアセンブラの環境説明】**
・Visual Studio 2022
・デスクトップ開発環境（C++）
**【使い方】**
__asmブロックを使う

使用例：　
```c
#include <stdio.h>
#include <conio.h>

int main(void){
char ca;

__asm{
mov ah,ca
add ah,ca
mov ca,ah
}

printf("%c",ca);

_getch();

return 0;

}
```
このようにして、__asmブロックの中でアセンブリ言語を使用することができるのだ。
設定を「Release」「x86」にしておかないとコンパイルできなくなっている。
必然的に使えるレジスタは32bitまでとなっている。
C言語の領域で定義した変数をインラインアセンブラ内で使うこともできるが、変数とレジスタの容量を合わせる必要がある。
charが８bit、shortが16bit、intが32bitである。
レジスタの容量については別枠で紹介したいと思う。
サイバーキルチェーン とは

## 勉強前イメージ

キル・・・！

## 調査

### サイバーキルチェーン とは

英語でCyber Kill Chainと書きます。
サイバー攻撃は段階を踏んで行われるようになり、その段階を構造化したものをサイバーキルチェーンと言います。
2009年に提唱され、標的型攻撃の一連の行動を7段階に分けて表されています。

元々キルチェーンは軍で使用される言葉で
敵の攻撃の構造をモデル化したもので、現在の敵の攻撃を当てはめて効率的に防御することが可能になります。

### 7段階について

サイバーキルチェーンの7段階は以下になります。

- 偵察(Reconnaissance)

攻撃者が攻撃する標的の企業や組織を調査します。

- 武器化(Weaponization)

標的に合わせた攻撃方法の選定やプログラムの開発を行います。
[ダークウェブ](https://qiita.com/miyuki_samitani/items/3518a865324e294643e8) などでも情報の売買がされている攻撃者がいます。

- デリバリー(Delivery)

標的側攻撃を用いて標的にメールなどでマルウェアなどを送り込みます。

- エクスプロイト(Exploitation)

送り込んだマルウェアなどの攻撃ツールを標的に実行させます。
ここで攻撃を行います。

- インストール(Installation)

サーバの乗っ取りや、デバイスで攻撃コードを実行させます。
攻撃からすぐに行うこともあれば、一定時間をおいてから実施することもあります。

- C&C(Command & Control)

ここでは乗っ取ったデバイスを遠隔操作してデバイスから機密情報を盗んだリ他の箇所へ情報を送ったりします。

- 目的の実行(Actions on Objectives)

最初に計画したものの実行を完了させます。
最後に行動の痕跡を消すことで発見された後の操作を難しくさせます。

## 勉強後イメージ

確かに一つ一つやっていく工程があるからそこの場所で要点を押さえるといいのか・・・

## 参考

- [サイバーキルチェーン](https://eset-info.canon-its.jp/malware_info/term/detail/00162.html)
- [サイバーキルチェーンとは？攻撃の手口や対策方法について徹底解説](https://cybersecurity-jp.com/column/33507)
初心者　MySQL8に挑戦する 5

# phpMyAdmin ?

　たった一つのデータが入っているテーブルを呼び出して、一つ一つ入れるのかぁ、といきなりため息が出る。ちょっとYouTubeに逃げる。もちろんネコとかではなくMySQLがらみの動画だけれど。
　phpMyAdmin、というプラットフォーム（？）の話をしている人がいる。なんか便利そう。でもその人はWindowsで使っている。Macでも動くかな。
　M1MacにphpMyAdminを入れる方法、が、すぐ見つかる。homebrewとphpとMySQLがすでに入ってるのが前提。phpが入ってないな。
　M1Macにphpを入れる、もすぐ見つかる。M1Macに･･･・という記事、多くなったなあ。

　じゃあ、入れてみるかな、と思いつつ、ちょっと立ち止まる。確かにterminalで打つより楽そうな気がする。だけど、これ、なんのためにあるんだろう。私に必要なのか？　これってずっと、MySQLそのものを触るためのプラットフォームじゃないんだろうか。要はデータベースを作る人、保守・改善する人、のためじゃないのかな。

　私はというと、フロントも自分で作る個人開発だ。terminalからデータを入れるのがイヤなら、さっさとフロントにつなげて、フロントから入れたらいいんじゃないのか。

## mysql1 !

https://pub.dev/packages/mysql1/example

　ということで、ぐだぐだ言ってないでflutterに繋いでみることにする。サンプルコードを貼っただけのプロジェクト、当然コードにエラーは出ない。UIも何にもないから、コンソールにうまく途中経過が表示されるかどうかだけが目安だ。
　で・・・・、走らせると、なんちゃらいっぱい文句を言われる。
　で、気の短い私はこういうとき、いったん止めて、なにも直さずにまた走らせる。ただのバカでしょ、と思うけど、うまく行くこともあるんだ。いや、ちゃんと走るという意味ではなく、エラーの内容が変わった。さっきは、意味わかりません、な内容だったが、今回はすごくシンプルで､即理解できる。

- ****というテーブルはすでに存在しています。

　つまりこうだ。サンプルコードは以下のようになっている。
- データベースに接続する。
- テーブルをつくる。
- データを挿入する。（できたよ、とコンソールに表示）
- そのデータを取ってみる。（できたよ、とコンソールに表示）
- そのデータを編集する。
- 新しいデータを取ってみる。（できたよ、とコンソールに表示）
- 接続を終了する。

　つまり、接続して、テーブルを作るところまではできたのだ。なので、テーブル名を変えて、新しいテーブルを作ってみた。するとまた最初の、意味わかりませんなエラーに戻った。

　でもきっと、新しいテーブルはできているだろう。なので、テーブルを作る部分をコメントアウトして、接続する、データを入れる、にしてみたのだが、また新しいエラーになった。これは英語としてはやさしい。

- Cannot write to socket, it is closed.

　英語が簡単だからといって、対処できるわけではない。しょうがないからコメントアウトを外して、また新しい名前でテーブルをつくる。すると、最初から見ないふりを続けてきたエラー文に戻る。

[VERBOSE-2:dart_vm_initializer.cc(39)] Unhandled Exception: RangeError (byteOffset): Invalid value: Not in inclusive range 0..5: 7
#0      _ByteDataView.getUint16 (dart:typed_data-patch/typed_data_patch.dart:4822:7)
#1      Buffer.readUint16 (package:mysql1/src/buffer.dart:240:24)
#2      new PrepareOkPacket (package:mysql1/src/prepared_statements/prepare_ok_packet.dart:20:30)
#3      Handler.checkResponse (package:mysql1/src/handlers/handler.dart:68:24)
#4      PrepareHandler.processResponse (package:mysql1/src/prepared_statements/prepare_handler.dart:45:18)
#5      ReqRespConnection._handleData (package:mysql1/src/single_connection.dart:355:32)
#6      ReqRespConnection._handleHeader (package:mysql1/src/single_connection.dart:324:13)
<asynchronous suspension>
#7      ReqRespConnection._readPacket (package:mysql1/src/single_connection.dart:309:7)
<asynchronous suspension>

　はい、ぜんぜんわかりません。

　試しにterminalから見てみると、当然、テーブルがいくつもできている。そして、昨日作ったテーブルにはたった一つのデータが、そして他のテーブルは空っぽ。

　ということで、今日はここで挫折。また明日。

https://qiita.com/dongri727/items/7bbe07e7eaa81134af79

https://qiita.com/dongri727/items/8c2b4125530d4b0147eb
YouTubeに日本語字幕をつけよう😁

# はじめに

たまに聞かれるので記事化しておきます。Live配信された動画などは、終了後数時間空けると自動翻訳の選択肢が出てきます。

# YouTubeの組み込み機能を使う

再生ウィンドウ右下のキーボードのようなボタンをクリックすると字幕が付きます。押したときにはその動画の言語で字幕が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/74780f9e-39ae-2c48-3f3d-fd71088aac18.png)

次にとなりの歯車マークを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/35ec5d6b-8619-7d47-4932-323bd405ee11.png)

複数の選択肢がでてきます。この中で**自動翻訳**を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/181a7a93-77ad-bda5-f84b-e019990f3bc2.png)

自動翻訳をする言語を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/4cae4ccf-2f60-0413-ba57-1cd00c99042d.png)

日本語字幕がつきました～😃

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/7456014f-8f93-cdc3-9927-db4cfae0d495.png)

# アドインを活用する手も😁

アドインを活用するともっと便利になる場合もあります。英語と日本語の字幕を両方表示したり、字幕をダウンロードやコピーができたり。いろいろ種類もあるのでぜひ探してみてください～。

https://microsoftedge.microsoft.com/addons/detail/youtube%E2%84%A2-%E3%83%87%E3%83%A5%E3%82%A2%E3%83%AB%E5%AD%97%E5%B9%95/kicjdgmlfepkcglkdcaalgikoaphdbbp?hl=ja-JA
【AWS】CloudFront

# CloudFrontとは

CDN(Content Delivery Network)のこと。
HTMLファイル,CSS,画像と言った静的コンテンツをキャッシュして、オリジンサーバの代わりに配信するもの。画像や動画といった容量の大きいコンテンツをユーザーからのアクセスのたびにオリジンサーバーが処理してしまうと、サーバの負荷が高くなってしまう。
そこでその負担を肩代わりしてくれる「影武者」を用意するのだが、それが「エッジサーバ」と呼ばれるもの。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665477/1e981a42-ad3e-c2cb-14e8-2aed8c548ffa.png)


エッジサーバは現2022年7月時点で[47か国、90都市、310台](https://aws.amazon.com/jp/cloudfront/features/?whats-new-cloudfront.sort-by=item.additionalFields.postDateTime&whats-new-cloudfront.sort-order=desc)設置されているとのこと。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665477/e67adb0f-2ad3-e2ab-76f8-22797a361a48.png)

# エッジロケーションとは
>エッジロケーションとは、CDN（コンテンツデリバリネットワーク）などで、閲覧者へのコンテンツ配信のために分散配置された拠点および設備のこと。大手サービスでは全世界の主要都市に配置されている。


# ディストリビューション
何だかよくわからないが２種類あるとのこと。
ダウンロードディストリビューションとストリーミングディストリビューションの2つがある。
ダウンロードディストリビューションはHTML,CSS,画像等を配信するときに使われるもの。
ストリーミングディストリビューションは動画のリアルタイム配信の際に使われるもの。


# 参考
・[Amazon CloudFrontについて](https://spc-jpn.co.jp/blog/14177/)

https://e-words.jp/w/%E3%82%A8%E3%83%83%E3%82%B8%E3%83%AD%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html
【AWS】Amazon Redshift

# Redshiftとは？
AWSが提供するデータウェアハウス向けのデータベースサービス。
これまで一般的に提供されてきたデータウェアハウスの導入コストと比較して10分の1~100分の1程度で始めることができる。参入障壁を大きく下げてくれた。


# AWSサービスにおける立ち位置
全体像の一例として以下が挙げられる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2665477/426855a8-4ee6-be47-1643-784b6507464a.png)

S3はAWSが提供するインターネット用ストレージサービスで、AWSのあらゆるサービスで利用されている。上のデータ分析環境においては、Redshiftにデータを取り込むための「データ置き場」として利用します。



# 参考
・[Amazon Redshiftで構築するビッグデータ分析環境の構成要素と全体像](https://codezine.jp/article/detail/7774)