OmniAICreator/Qiita-1.07M huggingface dataset:
【備忘録】django rest frameworkのプロジェクト作成まで

## django rest frameworkを利用した際、やったことを忘れそうなので、可能な限りわかりやすく（あほな自分が後で見て分かるようにｗ）記載しておく。

# 開発環境
- OS：Windows10 Pro
- VS CODE：1.66.2

# バージョン
  - python：3.10.4
  - django：4.0.4
 
# Action
1．djangoのプロジェクトを作成。以下のコマンドを実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/9e99f624-91bf-42c9-9c73-8f7e433f7264.png)

2．以下のコマンドを実行し、作成したプロジェクトを実行してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/6058758e-355e-f693-3773-44e11529625e.png)

3．以下の内容が表示されたら、実行成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/3a8e12ff-50a0-ce88-bc5f-f634ee5fe500.png)

4．以下のURLにアクセスすると、こんな画面が表示される。
　http://127.0.0.1:8000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/e9fbd6ee-e864-f6fb-49bd-f105f8c9ffc3.png)

5．以下のコマンドを実行し、django rest frameworkをインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/a4ec58d4-44ec-b7d7-5e5e-ef47b0d07b74.png)

6．以下が表示されたら成功となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/9d5e8301-14a7-40ff-bab6-beb297ed21d4.png)

7．作成したdjangoプロジェクトをVisual Studio codeで開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/e689ae19-ca28-48a2-f36f-3355e9a8c23c.png)

8．settings.pyを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/8cd70f91-8a68-4610-4a26-59965501fabf.png)

9．settings.pyの「INSTALLED_APPS」に以下を追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/ee682510-5a23-d576-5eee-0b236f6470ca.png)

以上

思ったより簡単だったｗ
Runtime（ランタイム）とは？

# 使い方
例えばAWS Lambda関数で言語(実行環境)を指定する時に使用する。

```
  Function:
    Runtime: python3.9
```

# 由来
ランタイムという言葉の由来は
ランタイムライブラリ
ランタイムパッケージ
ランタイムエンジン
ランタイムモジュール
とのこと。

意味は**実行時に必要な物。**
略称として**修飾表現**が残ったから初見ではわかりにくいかも。


# 日本語でも同じ？
日本語でも値があれば**修飾表現**で足りることもあるから考え方は似ていると思う。

例えば
**帰宅時間 19:00**
**帰宅 19:00**

個人的には後者の書き方が簡潔で好きかな。
結びつけるとランタイムという略称にも賛同するようになってきた。
Ubuntuに好きなGoのバージョンをaptでインストールする

## golang-backportsをapt repositoryに追加する

```
sudo add-apt-repository ppa:longsleep/golang-backports
sudo apt update
```

## バージョンを指定してgoをインストールする

```
sudo apt install golang-1.18
```

## 設定

```bash:~/.profile
GOPATH=~/go
GOROOT=/usr/lib/go-1.18

PATH=$GOROOT/bin:$PATH
```
100日後くらいに個人開発するぞ！day006

# 今日はコンテンツを作ってみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/d7179c9a-305e-8ec8-a45f-7738b5d1f72f.png)

```
- <span>要素
    - <span>要素とは
        - HTMLの文中の一部にCSSを適用させたい場合にHTMLを<span>要素で囲んで<span>タグへCSSを指定する
    - 例：h1タイトルの一部を赤色にしたい場合
        - HTML
            - <h1>ようこそ<span>Hollo World</span>へ</h1>
        - CSS
            - span{color:red;}
- ブロック要素とインライン要素
    - ブロック要素：前後で改行が入り、親要素の幅いっぱいに広がる要素
        - 例：<div>要素、<h1>要素、<p>要素
    - インライン要素：改行されない要素
        - 例：<span>要素、<a>要素
- ボーダー（枠線）
    - ボーダーを着けたい場合はborderプロパティを用いて太さ・種類・色を指定します
    - 定型分：{border:太さ 種類 色;}
    - 特定の場所にのみ付けたい場合は「border-方向」を指定します
        - 上だけに付けたい場合：border-top
        - 下だけに付けたい場合：border-bottom
        - 右だけに付けたい場合：border-right
        - 左だけに付けたい場合：border-left
- ボックスモデル
    - ボックスモデルはHTMLの全ての要素にborderがあり、要素と枠線の間の余白がpadding、枠線と外側の余白がmarginで構成されていると認識する概念です。
- paddingとmargin
    - padding：HTMLの要素とborderの間の余白を作る
        - 例：全方位に10pxの余白を作りたい場合
            - {padding:10px}
    - margin:borderと外側の余白を作る
        - 例：全方位に10pxの余白を作りたい場合
            - {margin:10px;}
- 上下左右の余白を細かく指定したい場合
    - 上下左右の特定の余白だけ指定したい場合
        - 上だけ20px：{padding(もしくはmargin)-top:20px;}
        - 下だけ20px：{padding(もしくはmargin)-bottom:20px;}
        - 左だけ20px：{padding(もしくはmargin)-left:20px;}
        - 右だけ20px：{padding(もしくはmargin)-right:20px;}
    - [省略形①]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上から時計回りに指定）
        - 上40px右30px下20px左10px：{padding(もしくはmargin):40px 30px 20px 10px;}
    - [省略形②]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上下・左右で指定）
        - 上20px右10px下20px左10px：{padding(もしくはmargin):20px 10px;}



```
MacにOracle VM VirtualBoxをインストールする

# Oracle VM VirtualBoxとは
Oracle社が提供しているオープンソフトウエアとして公開されている仮想化ソフトウェアです。

# Oracle VM VirtualBoxをインストールする
Oracle VM VirtualBoxを[こちらのサイト](https://www.virtualbox.org/wiki/Downloads)からダウンロードします。

ダウンロードしたファイルをダブルクリックし、インストールします。
インストール画面の指示に従って、「VirtualBox.pkg」をダブルクリックしてください。
![スクリーンショット 2022-04-24 7.06.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14202/1e92452f-9a43-763b-62c0-5e6f3f07d6a9.png)

「続ける」をクリックしてください。
![スクリーンショット 2022-04-24 7.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14202/f754a0f1-5888-4c0a-7245-6fdc7ed08290.png)

「インストール」をクリックしてください。
![スクリーンショット 2022-04-24 7.08.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14202/4010b8c7-6e14-3b16-a601-e43a425885f6.png)

「閉じる」をクリックしてください。
![スクリーンショット 2022-04-24 7.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14202/be067875-e04a-dd35-77fb-74b97a8e43cd.png)

以上で、Oracle VM VirtualBoxのインストールは終わりです。
IdeaPad Duet ChromebookにGo言語をインストールする

# パッケージを最新化する
インストールされているパッケージを最新化します。
```
$ sudo apt clean
$ sudo apt update
$ sudo apt full-upgrade -y
```

# 必要なパッケージをインストールする
必要なパッケージをインストールします。
```
$ sudo apt install build-essential -y
$ sudo apt install exuberant-ctags
```

# Goをダウンロードする
IdeaPad Duet ChromebookのCPUはARMです。
[Goのダウンロードサイト](https://go.dev/dl/)からLinux ARMのファイルをダウンロードします。
ここでは、go1.20.3.linux-arm64.tar.gzをダウンロードしました。

# ファイルを解凍する
```
$ sudo mv go1.20.3.linux-arm64.tar.gz /usr/local
$ cd /usr/local
$ sudo tar -zxvf go1.20.3.linux-arm64.tar.gz
```

# Goの環境変数を設定する
.profileに以下を追加します。
```
export PATH=$PATH:/usr/local/go/bin
```

.profileを再読み込みします。
```
$ source .profile
```

# Goの稼働を確認する
```
$ go version
go version go1.20.3 linux/arm64
```
2022/4/24主にITとかセキュリティの記事

ランサムウェア「Hive」のハッカー、「Microsoft Exchange Server」狙う(4/22)
https://japan.zdnet.com/article/35186682/

人気のオープンソース脅威インテリジェンス／脅威ハンティングツール7選(4/22)
https://atmarkit.itmedia.co.jp/ait/spv/2204/22/news101.html

猛威振るう「Emotet」の感染確認ツールがアップデート　検知手法を追加(4/22)
https://www.itmedia.co.jp/news/spv/2204/22/news176.html

Androidに音楽再生で乗っ取りの脆弱性。パッチは公開済み(4/22)
https://pc.watch.impress.co.jp/docs/news/1404859.html

「アカウントを乗っ取られた」「投げ銭してくれるファンに殺された」実際にあったライブ配信者の被害(4/21)
https://finance.yahoo.co.jp/news/detail/20220421-00582313-toyo-column

Spring Cloud Function における HTTP ヘッダの処理に起因する遠隔からの任意のコード実行につながる脆弱性（Scan Tech Report）(4/22)
https://s.netsecurity.ne.jp/article/2022/04/22/47504.html

ハッカー集団・アノニマス、「見せかけ漏洩」で企業翻弄(4/22)
https://www.nikkei.com/article/DGXZQOUC121TR0S2A410C2000000/

本人も保護者も知りたい「18歳の成人」がセキュリティで気をつけること(4/22)
https://ascii.jp/elem/000/004/089/4089545/?rss

防衛省がNATOのサイバー演習参加▼中国企業、カナダのリチウム資源会社に出資▼米専門家、中国の知財窃盗に「新たな多国間体制の構築を」▼ 国際造船市場への需要で中国海軍の能力押し上げか(4/22)
https://mb.epochtimes.jp/2022/04/104953.html

日本旅行とジャスミーがブロックチェーンとエッジAIによるユーザー生成コンテンツ（UGC）活用に向けた実証実験を開始(4/22)
https://thebridge.jp/prtimes/436781

深刻さを増すシャドーITの脅威
新たな働き方に潜むリスクへどのように対応すべきか
https://japan.zdnet.com/extra/security_trendsummer_202204/

バイナンス、7億円強を回収──アクシーのハッキングに関連した暗号資産(4/22)
https://www.coindeskjapan.com/147378/

豪金融規制当局、仮想通貨政策のロードマップを公開(4/22)
https://jp.cointelegraph.com/news/australian-prudential-regulator-releases-roadmap-for-cryptocurrency-policy

いつか終わるNFTブーム　イノベーションは起こるのか(4/22)
https://www.nikkei.com/article/DGXZQOUC194RJ0Z10C22A4000000/

意外と知らないIT用語、プロトコルとは？｜プロトコル意味や種類を解説【インターネット基本のき】 | サライ.jp｜小学館の雑誌『サライ』公式サイト(4/21)
https://serai.jp/living/1066274

ポリゴン(Polygon)Web3向けのゼロ知識証明を活用した「ポリゴンID」を発表(4/21)
https://coinchoice.net/polygon-introducing-polygon-id-zero-knowledge-identity/

ネット掲示板での議論が検索結果の上部に表示される検索エンジンが海外で登場、賛否両論(4/22)
https://internet.watch.impress.co.jp/docs/yajiuma/1404865.html

Windows 11 Insider Preview Home、SMB1がデフォルト無効に(4/22)
https://www.zaikei.co.jp/article/20220422/669702.html

NBAは深刻な脆弱性を理由にNFTコレクションの作成を一時停止(4/22)
https://nextmoney.jp/?p=49894

Microsoft、JavaScriptに型注釈を追加する「Types as Comments」を提案(4/22)
https://atmarkit.itmedia.co.jp/ait/spv/2204/22/news049.html

合計520の脆弱性に対処　Oracleが2022年4月のクリティカルパッチアップデートを公開(4/21)
https://www.itmedia.co.jp/enterprise/spv/2204/21/news043.html

e-TaxなどでIE11が推奨環境から外れる、6月17日より 国税庁がMicrosoftのサポート終了に伴う対応を発表(4/22)
https://gunosy.com/articles/eo4Qv

Operational Excellence 実行の勘どころ マスターブラックベルトが語る本音の話(4/22)
https://www.gmp-platform.com/article_detail.html?id=13754&lang=ja

オバマ元米大統領、「SNSは米国の二極化に影響を及ぼした」と語り対策を提示(4/22)
https://www.itmedia.co.jp/news/spv/2204/22/news106.html

Google Chromeを今すぐアップデートしよう(4/22)
https://www.lifehacker.jp/article/2204why-you-need-to-update-google-chrome-as-soon-as-you-can/

Google、欧州でCookie同意バナーの全拒否ボタン提供開始へ(4/22)
https://www.itmedia.co.jp/news/spv/2204/22/news128.html
C言語のstatic がメモリを保つことの検証実験

# 目的
static がメモリを保持するとはなんぞや？ということを疑問に思ったので、実験してみた。
個人用の記録です。

# 環境
機種: MacBook Pro 2018
プロセッサ: 2.3GHz Quad-Core Intel Core i5
メモリ: 8GB
clang
```
$ clang -v
Apple clang version 13.1.6 (clang-1316.0.21.2.3)
```

# コード

```C
#include<stdio.h>

int* f(void) {
    static int x = 0;
    // int x = 0; // 比較用
    x = x + 1;
    printf("&x = %p\n", &x);
    return &x;
}

int main(void) {
    int *s = f();
    int *l = f();
    printf("&s = %p\n", s);
    printf("&l = %p\n", l);
    printf("%d\n", *s);
    return 0;
}
```
(2022/04/25)フォーマット指定子が間違っていたので、%x→%pへ修正

# 結果

static int x で宣言した方の出力:
```
&x = 0x10edf2010
&x = 0x10edf2010
&s = 0x10edf2010
&l = 0x10edf2010
2

```

(auto) int x で宣言した方の出力:
```
&x = 0x7ff7b246e28c
&x = 0x7ff7b246e28c
&s = 0x7ff7b246e28c
&l = 0x7ff7b246e28c
-362620741
```
(2022/04/25)%xでの表示結果から%pでの表示結果に変更。

# 考察
~~static で修飾した方はメモリの中身が書き換えられていないが、修飾していない方はメモリの中身が書きかわっている。static はメモリを確保したら、プログラムが動いている間はその領域を確保したままにするという修飾子なんだろうと考えられる。
また、static を宣言した方は、1 が結果として返ってきてほしいのに 2 が返ってきている。これは、static でメモリ領域を確保すると、一回目で確保している領域を初期化せず書き換え続けるというのが実装で決められていると考えられる。正しいかどうかはわからない。~~

# 感想
ポインタ楽しい。

# 追記
(2022/04/25)
コメントでC言語の仕様についての言及があったので、そちらの方を先に参考してから記事を出した方がよかったですね。ご指摘ありがとうございます。
Rubyのテスト(Minitest)を初めて使ってみた

Rubyのテストフレームワークを使ってみました。
<h2>テストを書くことについて</h2>
前提として、テストを書くことは非常に重要で、
環境が壊れていないこと、コードが記載通りに実行できることの確認をすることができます。

環境が壊れていなくても、
バージョンの違いなどによって、動くはずのコードが実は動いていない!!など、起こり得ることです。

基本的に、以下の順序で行うものだと学びました。
① 意図的にエラーが起こることを確かめる(異常系)
② ①を変更して、正常に動作することを確かめる(正常系)


今回は、RubyのテストフレームワークのMinitestについてです。
上記の、①、②の順序でテストを実行してみます。
<h2>テストの実行と解説</h2>

コードをまずは書いてみましょう。
```
require 'minitest/autorun' 

class RubyTest < Minitest::Test
  def test_ruby
    assert_equal 1, 1 + 1
  end
end
```

まずは、以下でMinitestライブラリを呼び出します。
require 'minitest/autorun'

次に、以下の関数内を言語化すると、
想定では、結果が1になります。その命令は、1 + 1と記載しています。


なので、適切にfailureが出ることの確認をします。
これは、よく異常系とか呼ばれるものですね。
```
  def test_ruby
    assert_equal 1, 1 + 1
  end
```
では、実行してみましょう。
<h2>異常系テストの実行</h2>
(base) yusuke@mbp training % ruby test01.rb

------------------------------------

Run options: --seed 43079

#Running:

F

Failure:
RubyTest#test_ruby [/Users/yusuke/ruby/training/Ruby_Pro/minitest.rb:5]:
Expected: 1
  Actual: 2


rails test Users/yusuke/ruby/training/Ruby_Pro/minitest.rb:4



Finished in 0.001410s, 709.2198 runs/s, 709.2198 assertions/s.
1 runs, 1 assertions, 1 failures, 0 errors, 0 skips

1つの実行で、1つのfailure(失敗)と出ているので、想定通りです。

<h2>正常系テストの実行</h2>

次に、想定結果を2として、1 + 1を実行します。
これで、成功となれば、適切にコードが動くことを証明できます。
```
class RubyTest < Minitest::Test
  def test_ruby
    assert_equal 2, 1 + 1
  end
end
```
では、実行してみます。
(base) yusuke@mbp training % ruby test01.rb

Run options: --seed 27994

#Running:

.

Finished in 0.000966s, 1035.1973 runs/s, 1035.1973 assertions/s.
1 runs, 1 assertions, 0 failures, 0 errors, 0 skips

今回は、1回の実行で、１つの成功と表示がされました。
想定通りに動きましたね。

今後、少しずつテストマスターを目指していきます。
【paiza】スキルチェックでSランク・Aランクになる為の最短ルート

# はじめに
paizaスキルチェックでSランクになりました。
今思えばSランクになるまでずいぶんと遠回りしたなぁ・・・と思いましたので、最初からこうしておけばよかった！という方法を共有します。
また、初めて書くQiitaブログですので、技術的な話に限らず、記事の書き方などについてなど、いろんなアドバイスを頂けますと嬉しいです


# 目次
1. paizaスキルチェックについて
2. この記事の対象者
3. 執筆者がSランクになるまでの経緯
4. 同じランクの問題にも種類がある
5. 手っ取り早くランク上げたいならアルゴリズムを勉強しよう
6. 問題の選び方
7. 問題を解けるようになるまで
8. まとめ

# 1.paizaスキルチェックについて
paizaスキルチェックでは、一度問題にチャレンジして不正解だと、もう一度その問題を解いてもランクやレートが上がらなくなってしまいます。
そうなると、スキルチェック問題を解いてランクを上げたいと思っても、何の対策もせずにチャレンジするのはちょっと怖いですよね。
そんな悩みを持っている方向けに

* paizaでAランク・Sランク問題を解くにあたって、どのくらい勉強したら受かりそうか
* paizaでAランク・Sランクになるための小技

を紹介します

# 2.この記事の対象者
 * paizaスキルチェックでSランクになる方法を知りたい
 * paizaスキルチェックでAランクになる方法を知りたい
 * paizaスキルチェックで効率的に早くランクを上げる方法を知りたい
 * if文for文レベルの簡単な文法を理解できる


# 3.執筆者がSランクになるまでの経緯

* 大学生の頃、paizaで勉強し始めて、Bランク問題まで解けるようになる
* いわゆる「プログラミング完全に理解した」状態になり、無計画にAランク問題に挑戦しまくるが、全部間違える
* しばらくスキルチェックから離れた後、AtCoderにハマる
* AtCoderで茶色ランクになる
* paizaスキルチェックでもSランクになる


# 4.同じランクの問題にも種類がある

Bランクまでの問題は似たような物が多く、求められるスキルや知識も大体同じですが、Ａランク以上になってくると種類があります。

Aランク以上の問題には
* 問題文通りのロジックを実装するだけでなく、データ的な解釈をして実装する問題
* 条件が複雑に絡み合っている問題を高い精度で実装する問題
* 典型的なアルゴリズムを使って実装する問題

等があります。同じランクの問題でも求められるものが違うので、同じランクでも人によって解ける問題とそうでないものが分かれます。


# 5.手っ取り早くランク上げたいならアルゴリズムを勉強しよう

結論、手っ取り早くAランク以上になりたいなら、アルゴリズムの勉強をして、アルゴリズムを使う問題を解くことをお勧めします。
というのも、paizaに出てくるAランク以上の問題の中には、有名なアルゴリズムを使って、典型的な方法で解く問題がいくつかあるからです。
例えば動的計画法や幅優先探索みたいなアルゴリズムを使った問題は結構出ます。問題の内容も、アルゴリズムの書籍や、AtCoderの典型問題みたいなものが多いです。こういった問題は、その人の実装力より、「そのアルゴリズムを知っているかどうか」で解けるかが決まる問題なので、アルゴリズムの勉強さえすれば高確率でＡランク以上の問題を解けるようになります。

# 6.問題タイトルから内容を予測しよう
あまり具体的な事を書くとpaizaの規約に違反しそうですが、paizaスキルチェックでは事前に問題のタイトルを知る事が出来ます。このタイトルから問題の内容が大きなヒントになります。これによって、典型的なアルゴリズムを使って実装する問題を選びます。

例えば「所得税の計算」なんてタイトルの問題があるとしたら、おそらく年収と課税所得別の税率のテーブルが標準入力で与えられて、支払う所得税を計算する問題なのかなあ？なんて予測が立てられます。これと同じように、問題のタイトルから有名なアルゴリズムを使いそうな問題を選びます。逆にこの予測を立てれないタイトルの問題は、自分が知らないアルゴリズムの問題か、アルゴリズムの知識より実装力が求められる問題の可能性が高いので、解かない方が賢明です。

# 7.問題を解けるようになるまで
典型的なアルゴリズムについて書かれている本を一通り読めばpaizaでSランクになれます。本に出てくるアルゴリズムを完璧に理解してなくても、アルゴリズムの概要と、そのアルゴリズムを使った典型的な問題を1つでも知っていればよいです。そうすれば問題のタイトルから自分の知ってるアルゴリズムで解けそうかどうがわかります。

おすすめの本は以下です

問題解決力を鍛える！アルゴリズムとデータ構造 
https://www.amazon.co.jp/dp/B08PV83L3N/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

アルゴリズム実技検定 公式テキスト
https://www.amazon.co.jp/dp/B08QRNJ7M3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

どちらも典型的なアルゴリズムについて体系的に学べるのでおすすめです。


# 8.まとめ
paizaスキルチェックでAランク以上になる手順は以下です
1. アルゴリズムについて学ぶ
2. 一通り問題のタイトルを確認し、自分の知ってるアルゴリズムで解けそうな問題を選ぶ
3. 参考書の答えを参考にしながら問題を解く
Keycloakの新しい管理コンソール（New Admin Console）を使ってみる

# はじめに
先日新たにリリースされたKeycloak 18.0.0にて、かねてから開発されていた新しい管理コンソールがプレビュー版として利用できるようになりました。

https://www.keycloak.org/docs/latest/release_notes/index.html#new-admin-console-preview

※Keycloak 19からはこの新しい管理コンソールがデフォルトになる予定のようです。

今回はこの新しい管理コンソールを試してみます。
# 新しい管理コンソールを有効化する
Keycloak 18.0.0は以下からダウンロードしたものを利用します。

https://github.com/keycloak/keycloak/releases/download/18.0.0/keycloak-18.0.0.zip

普通に起動するだけでは、新しい管理コンソールが有効化されません。
そのため、以下のように`features`オプションに`admin2`を付与して有効化します（以下はWindowsでの実行例のため、kc.batの箇所は適宜実行環境に応じて置き換えてください）。

```
keycloak-18.0.0\bin>kc.bat start-dev --features admin2
```

なお、管理者ユーザを未作成の場合は以下にアクセスしてGUIから管理者ユーザを作成しておいてください。こちらのUIは特に新しくなっていないようです。

http://localhost:8080/


起動後、管理コンソールにアクセスすると新しい管理コンソールが適用されて起動します。

http://localhost:8080/admin/master/console/

パッと見、あまり代わり映えがないように見えますが、認証フローがグラフィカルに表示できるようになっていたりいくつかの変更が見られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116164/6f6176a9-31a2-8e52-0d20-26ff75111930.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116164/89c4be27-3af4-6433-9066-2e29a4a7f899.png)

ちなみに、この新しい管理コンソールはテーマとなっているため、`Realm Settings > Themesタブ > Admin console Theme`より古い管理コンソールのテーマである`keycloak`に戻すこともできます（逆に、既にAdmin console Themeに`keycloak`が設定されている場合、ここから`keycloak.v2`に変更しないと新しい管理コンソールのテーマが適用でされないはず…）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116164/45f74861-7899-de2c-82c6-63f9e8071a37.png)

以上、結構簡単に新しい管理コンソールを使うことができました。
次バージョンであるKeycloak 19からデフォルトになる予定なので、今のうちに慣れておくとよいでしょう。
ubuntu22.04LTSのブートUSBをMacで作成する

以下の通り、2022/4/26にubuntu22.04がリリースされました！

> [https://releases.ubuntu.com/22.04/](https://releases.ubuntu.com/22.04/)
> Ubuntu 22.04 LTS (Jammy Jellyfish)

本家サイトからダウンロードすると時間が掛かるので、日本国内のミラーサイトからダウンロードすると便利です。
これは、以下のUbuntuのリリースイメージ（注意：Ubuntuのパッケージではない）から例えば山形大学などのURLを選択してDesktopイメージを取得すればOK！

> [日本国内のダウンロードサイト](https://www.ubuntulinux.jp/products/JapaneseMirrors)
> Ubuntuのリリースイメージ
> 山形大学
> http://ftp.yz.yamagata-u.ac.jp/pub/linux/ubuntu/releases/
> Ubuntu 22.04 LTS (Jammy Jellyfish)

ダウンロードしたら以下の手順でブートUSBを作成すればOKであった。

> [Ubuntu20.04LTSのブートUSBをMacで作成する](https://qiita.com/seigot/items/faea0998e17c40b3a63e)

その後は、これまで同様にブートUSBから起動してGUIからインストールを進めれば良い。
以上です。

# 参考
[https://releases.ubuntu.com/22.04/](https://releases.ubuntu.com/22.04/)
[日本国内のダウンロードサイト](https://www.ubuntulinux.jp/products/JapaneseMirrors)
[Ubuntu20.04LTSのブートUSBをMacで作成する](https://qiita.com/seigot/items/faea0998e17c40b3a63e)
matplotlibで凡例(Legend)のみを出力する方法

matplotlibで凡例(Legend)のみを出力しようとした際の調査・実施内容の備忘録です。

# 基本的な凡例出力の実装例

とりあえずデータ無しで図に凡例のみを表示しようとすると実装コードは大体こんな感じになる。

```python:
import matplotlib.pyplot as plt

fig, ax = plt.subplots()

# 色ラベル情報のみプロット(データなし)
colors = ["red", "blue", "green", "yellow", "magenta", "olive"]
for color in colors:
    ax.plot([], [], marker="s", color=color, label=color, linestyle="none")

# 凡例設定
legend = ax.legend(frameon=False, handletextpad=0, ncol=2, columnspacing=1)

# 図出力
fig.savefig("legend.png", dpi=300)
```
![legend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138429/cd29ec8a-b815-2919-de3b-4c9588737ae5.png)
このままでは、1. 枠線・XY軸ラベルが邪魔、2. 凡例以外の余白が大きい、という2つの問題点がある上記の図が出力される。

# 凡例領域のみの図出力実装例

前項の凡例出力の問題点はそれぞれ以下のように解決することができる。

1. 枠線・XY軸ラベルが邪魔
それぞれ対応するオブジェクトの`set_visible`関数により非表示化
2. 凡例以外の余白が大きい
凡例のバウンディングボックス座標を取得し、`fig.savefig`で図保存時に`bbox_inches`を設定することで、凡例領域のみを保存するように対応

```python
import matplotlib.pyplot as plt

fig, ax = plt.subplots()

# 枠線(Spines)・XY軸(Axis)ラベル非表示
for spine in ax.spines.values():
    spine.set_visible(False)
ax.axes.get_xaxis().set_visible(False)
ax.axes.get_yaxis().set_visible(False)

# 色ラベル情報のみプロット(データなし)
colors = ["red", "blue", "green", "yellow", "magenta", "olive"]
for color in colors:
    ax.plot([], [], marker="s", color=color, label=color, linestyle="none")

# 凡例設定
legend = ax.legend(frameon=False, handletextpad=0, ncol=2, columnspacing=1)

# 凡例のバウンディングボックス座標(bbox)を取得
legend_fig = legend.figure
legend_fig.canvas.draw()
bbox = legend.get_window_extent().transformed(legend_fig.dpi_scale_trans.inverted())

# 凡例領域のみの図出力
fig.savefig("legend.png", bbox_inches=bbox, dpi=300)
```
![legend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138429/a91f7564-c812-32a1-7b05-30ca935f8c69.png)
コードを実行すると、凡例領域のみを切り取った上記の図を出力することが確認できた。

# 参考

https://stackoverflow.com/questions/4534480/get-legend-as-a-separate-picture-in-matplotlib
郵便番号を入力すると住所を自動入力してくれるフォーム【コピペでOK】

# コード全文
ECサイトのフォーム等でよく見る郵便番号で住所が自動入力されるやつを[郵便番号検索API](http://zipcloud.ibsnet.co.jp/doc/api)を活用して作成してみました。
下記のコードをコピペすれば最低限使える1画面が完成するので用途に合わせてHTMLなど改変してください。

[動作確認用サンプルページ](https://yutami-works.github.io/address-form-parts/)

``` html:addressForm.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>郵便番号フォーム</title>
</head>
<body>

<h3>郵便番号で住所が自動入力されるフォーム</h3>
<p>郵便番号で探す</p>
<div>
  <input type="text" id="searchBox" placeholder="例:1638001(ﾊｲﾌﾝなし)" onkeyup="inputCheck ()">
  <button type="button" onclick="searchAddress ()">探す</button>
</div>
<div id="check" ></div>
<p>住所：<input type="text" id="addressForm"></p>
<p>番地：<input type="text"></p>
<button type="button" onclick="dummyPost ()">送信</button>

<script>
  async function searchAddress () {
    const postalCode = document.getElementById("searchBox").value;
    const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + postalCode;
    const response = await fetch(url);
    const data = await response.json();
    if(!(data['results'])) {
      document.getElementById( "check" ).innerHTML = '該当データなし';
    } else {
      const address = data['results'][0]['address1'] + data['results'][0]['address2'] + data['results'][0]['address3']
      document.getElementById( "addressForm" ).value = address;
    }
  }

  function inputCheck() {
    const inputValue = document.getElementById( "searchBox" ).value;
    if (!(inputValue.match(/^[0-9]+$/)) || !(inputValue.length === 7)) {
      document.getElementById( "check" ).innerHTML = '半角数字7桁で入力してください！';
    } else {
      document.getElementById( "check" ).innerHTML = '';
    }
  }

  function dummyPost () {
    alert('送信はしないぜ')
  }
</script>
</body>
</html>
```

# コード解説
使った機能をそれぞれ備忘録としてまとめておく

## WebAPI
[郵便番号検索API](http://zipcloud.ibsnet.co.jp/doc/api)
今回はこちらのWebAPIを使用させていただきました。
利用方法は上記サイトに詳しく書かれているのでそちらを参照してください。

## async / await
JSで非同期処理を書く際に使う。
同期処理と非同期処理については「[この記事にある図](https://www.wareko.jp/blog/control-timing-of-synchronous-processing-and-asynchronous-processing-with-javascript-promise)」と「[この記事にある例え話](https://zenn.dev/hinoshin/articles/212ba4e993377c)」を組み合わせて読むと非常にわかりやすかった。
```JavaScript
const response = await fetch(url);
const data = await response.json();
```
今回のコードで言うとこの部分が該当する。
JS内の処理は同期処理だけれどAPIを叩いてるところは非同期処理となっている。
awaitをつけることで「値が返ってくるまで次の処理に進むのは待ってくれよなー頼むよー」ができるようになる。
※awaitがないとresponseが空のまま処理が進んでエラーになる。
awaitはasyncで定義することで使えるようになる。

## HTML
- placeholder
フォーム等にあらかじめ入力されている灰色の文字を作れる
- onclick
クリックされたらJSを発火させる時に使える
- onkeyup
キーが離されたのを検知してJSを発火させる時に使える

# おわりに
認識違いなどあればコメントいただけますと幸いです。
一旦は自分のノート的な形で残しておきたかったので、もう少し勉強してわかりやすく修正します。
未経験からのJava基礎アウトプット①


## 概要
Javaの基礎の基礎（継承の前まで）を学んだから、アウトプットしていく。
正直まだ全然イメージがわかない。どうやってこのプログラムを実装するのかもよく分からない・・・。
コンパイルして、動いて、それでどうするの？って感じです。でも、せっかく学んだこと忘れたくないし！繰り返し勉強していけば理解できるはず。
初心者の手探りのアウトプットなので、間違っているところがあれば教えていただければと思います。随時修正します。

## クラスの作成

クラスの作り方は
```Java:
public class HelloWorld{}
```


- 頭文字は大文字にすること。
- ｛｝これを「クラスブロック」という。
- クラスの中にさらに「mainメソッド」のブロックを作っていく。

```Java:
public static void main(String[]args)
```

・・・文字列の意味はまだ分からず。実際使うときはstaticが入っているほうが少数だと聞いた。
- mainメソッドのクラスブロック内に囲われた部分を「スコープ」という。
## 文字の出力
```Java:
System.out.println("テキスト");
```
テキストの表示や、コードが正常に動いているかの確認に使う。
printinではなく、println（プリントライン）。いろいろ種類があるけれど、lnがついているものは改行されて出力されるイメージ。


## コメント
 
```Java:
//コメント                       //・・・一文のとき。

/*テキスト*/                     //・・・複数文のとき。
```
## 型の基本
今の段階でよく出る型のリテラルをまとめる。
リテラル・・・ソースコードに直接書く値。

### int
int は整数の型。サイズは32ビット。
```Java:
int num;
num = 10;
```

### long
longは整数の型。64ビットまで表現できる。
```Java:
long num;
num = 10000000000000l;
```
数値の後ろにLをつけると、long型として表示できる。
### double
```Java:
double dnum;
dnum = 10;
```
出力した結果は「10.0」になる。サイズは64ビット。
この型で書かないと、整数で出力されて、四捨五入されて表示される間違いが起きる！気を付けよう。

### char
```Java:
char moji = 'あ';
```
文字を記述できる。サイズは16ビット。
### String
```Java:
String str = "なまえ";
```
複数の文字列を記述できる。

### String
```Java:
boolean flag = true;
```
trueかfalseで出力される。


わかりやすい変数名をつけることが大切！

### 型の変換 / キャスト

javaはかしこいので、自動で型を変換してくれます。
```Java:
int num = 10;
double dnum = num;   //サイズが大きい型→小さい型だからOK

double dnum = 10.5;
int num = dnum;  //小さい→大きい型だから、コンパイルエラーになる
```
でも、こうなってしまう。
そこで「キャスト」が必要。
### キャスト
`変数 = （変換したい型）【代入する値】`
```Java:
num = (int) dnum;
```
int型のdnumだよ、と明示する。


一旦区切り！
工場勤務だった私が勉強する気になれない時の気持ちの切り替え方

# 初めに
工場勤務だった頃の私は、時間になれば体を動かし自然と仕事に没頭している
ということがよくありましたが、業界を変え今までのやり方では
自分で決めた時間になっても気分が上がらないなんてこともあり
なかなかモチベーションが上がらず苦労しました

そこで実際に私が勉強や仕事に対するモチベーションを上げる為に行なっていたことを紹介します



# 場所を変える
自宅の中でもいつも休憩する定位置ではない場所でやってみる
自宅を出てカフェを利用してみる　など
場所を変えることで気分が入れ替わりやる気向上につながったりします
また、インドア派の私の持論ですが　カフェを利用することで
「わざわざ勉強のために外出したのだから」という理由で勉強をしようという気になりますw

# 集中へのトリガーとなる行動を決める
勉強する時には温かい紅茶を入れる
喫茶店のBGMをかける　
スクワットをストレッチなどの軽い運動　など
その行動をとることによって集中へのスイッチを入れる方法です
習慣として身体に覚えさせれば、条件反射で自然と勉強する気があがったり集中できたりします

# とにかくやり始める
「やらなきゃ」と考えているだけでずるずると時間だけが過ぎてしまうことがあると思います
そんなときはとにかく　PCを開く！本を開く！
簡単なコードからでも書いてみる！
始めてみるといつの間にか集中できていることが多いです

# 終わりに
今回紹介した方法は実際にエンジニアになってからでも使っています
リモート可能な時でもなるべく事務所を利用したり
食後や低気圧など　外的要因によって集中できない時などは
自分の気持ちだけではうまくスイッチを入れることができない事を経験したので
そういう時に今回の様な自分に合ったスイッチを切り替えるための方法を見つけておく、なるべく増やしておくといいかもしれませんね
ターミナルのコマンド（複製、別タブ、終了）


- メモ
## コマンド
まずはターミナルの基礎からやっていきましょうかね。

- 新しいウィンドウを開く　→ `command + n`
- 別タブを開く　→ `command + t`
- シェルの終了（一つのタブならウィンドウの終了、複数のタブならタブの終了）　→ `command + w`


## おまけ
- [環境設定]から[プロファイル]を開くとターミナルの画面デザインの変更が可能
C、C++で最低限のHTTPサーバー


## 概要

C、C++で最低限のHTTPサーバーはどんな感じなのか？

## 基本的な流れ

1. socket
2. bind
3. listen
4. while
   1. accept
   2. recv
   3. send
   4. close

## コード

```Makefile
CXXFLAGS = -std=c++17
CFLAGS = CXXFLAGS

main:
```

```c++

#include <cerrno>
#include <cstdio>
#include <string>

#include <netinet/in.h>
#include <sys/socket.h>
#include <sys/types.h>
#include <unistd.h>

int main() {
  const int sockFd = socket(AF_INET, SOCK_STREAM, 0);
  if (sockFd == -1) {
    std::perror(nullptr);
    return EXIT_FAILURE;
  }
  {
    const int flag = 1;
    if (setsockopt(sockFd, SOL_SOCKET, SO_REUSEADDR, &flag, sizeof(flag)) ==
        -1) {
      std::perror(nullptr);
      return EXIT_FAILURE;
    }
  }
  {
    sockaddr_in addr {};
    addr.sin_family = AF_INET;
    addr.sin_port = htons(8080);
    addr.sin_addr.s_addr = INADDR_ANY;
    if (bind(sockFd, reinterpret_cast<sockaddr *>(&addr), sizeof(addr)) == -1) {
      std::perror(nullptr);
      return EXIT_FAILURE;
    }
  }
  if (listen(sockFd, 16) == -1) {
    std::perror(nullptr);
    return EXIT_FAILURE;
  }
  while (true) {
    const int acceptedFd = accept(sockFd, nullptr, nullptr);
    if (acceptedFd == -1) {
      std::perror(nullptr);
      return EXIT_FAILURE;
    }
    {
      char buf[1024]{};
      const ssize_t readSize = recv(acceptedFd, buf, sizeof(buf), 0);
      if (readSize == 0) {
        std::printf("Peer shutdown.\n");
        close(acceptedFd);
        continue;
      }
      const auto requestStr = std::string(buf, readSize);
      const auto requestLine = requestStr.substr(0, requestStr.find("\r\n"));
      std::printf("%s\n", requestLine.c_str());
    }
    {
      const std::string body("Hello World!");
      std::string header;
      header += "HTTP/1.1 200 OK\r\n";
      header += "Content-Type: text/plain\r\n";
      header += "Content-Length: " + std::to_string(body.size()) + "\r\n";
      const std::string response = header + "\r\n" + body;
      send(acceptedFd, response.c_str(), response.size(), 0);
    }
    close(acceptedFd);
  }
  return 0;
}
```

これで、ブラウザで、`http://localhost:8080/` を見に行くと Hello World! が見れる。

## 理解を深める

`man` で関数名を調べていくと理解が深まっていく。
そこからの誘導がある `man 7 ip` や `man 7 socket` あたりも良さそう。

## その他

短時間で再実行すると `bind` が失敗することがあり、調べたところ、
`setsockopt(..., SO_REUSEADDR, ...)` を設定すると対策となることが分かり、設定するようにした。
このあたりも `man 7 ip` に記載がある。

また、`recv` がゼロで返ってくることがあり、
これは、`man recv` や POSIX によると、socket peer が shutdown したときのようなので、
対策処理を追加した。

## まとめ

最低限のHTTPサーバー実装の流れが分かった。
【javascript】TABLEのセルの内容を二次元配列で取得

前回までの記事

https://qiita.com/noenture/items/71ee266ec2a8a16a0fbe

https://qiita.com/noenture/items/098661275542930e0566

# 概要

前回までと比べて、処理とコードを簡潔に。
そして、取得データをテキストに限らず任意の関数で自由に取得できるように変更。


# コード


```javascript:
const getTable = (table, func) => {
	const collector = []
	
	const tableRows = table.rows
	const numOfCols = ((cnt, i) => {
		const headerCells = tableRows[0].cells
		while (++i < headerCells.length) cnt += headerCells[i].colSpan
		return cnt
	})(0, -1)
	const rowspanCounter = Array(numOfCols).fill(0)
	
	let pointY = 0, pointX, cellIndex, copiedTimes
	for (const numOfRows = tableRows.length; pointY < numOfRows; pointY++) {
		const columns = []
		
		const tr = tableRows[pointY]
		for (pointX = cellIndex = 0; pointX < numOfCols; pointX++) {
			if (rowspanCounter[pointX]) {
				columns.push( collector[pointY - 1][pointX] )
				rowspanCounter[pointX]--
				continue
			}
			const td = tr.cells[cellIndex],
				edited = func(td, tr),
				rowSpan = td.rowSpan,
				colSpan = numOfCols < td.colSpan + pointX ? numOfCols : td.colSpan
			for (copiedTimes = 0; copiedTimes < colSpan;) {
				columns.push(edited)
				rowspanCounter[pointX + copiedTimes++] += rowSpan - 1
			}
			pointX += colSpan - 1
			cellIndex++
		}
		collector.push(columns)
	}
	return collector
}

const table = getTable(document.getElementsByTagName('table')[0], cell => cell.textContent)
console.table(table)

```

第一引数に対象のテーブルを指定。
第二引数に各セルを処理する関数。

セル処理用関数の引数は
１．処理する`TD`
２．処理するTDの親要素`TR`
となります。

# 追記

```javascript
const getTable = (tbl,fn) => {
	const arr = Array.from({length:tbl.rows.length},() => [])
	,maxCol = [...tbl.rows[0].cells].reduce((n,z) => n + z.colSpan,0)
 	
	for(let y=0,x=0;y<tbl.rows.length;y++,x=0){
		const tr = tbl.rows[y].cells
		for(const td of tr){
			const elm = fn(td,tr)
			for(;x<maxCol;x++){
				if(x in arr[y] === false) break
			}
			for(let p=0;p<td.colSpan;p++,x++){
				if(x>=maxCol) break
				for(let q=0;q<td.rowSpan;q++) arr[y+q][x] = elm
			}
		}
	}
	return arr
}

const table = getTable(document.getElementsByTagName('table')[0], cell => cell.textContent.trim())

console.table(table)

```
Djangoコマンド集

### Djangoバージョン確認
```console
python -m django --version
```

### Djangoのプロジェクト作成
```console
django-admin startproject [プロジェクト名]
```
### マイグレーションファイルを作成
```console
py manage.py makemigrations [アプリ名]
```

### マイグレート
```console
py manage.py migrate
```

### 管理ユーザーの作成
```console
py manage.py createsuperuser
```

### テストデータのロード
```console
py manage.py loaddata [jsonファイル]
```
Kali Linuxでのワークスペース（Windowsでのマルチデスクトップ）の切り替えショートカット

# 概要
KaliLinuxでマルチデスクトップをあまり使わないせいで、ショートカットキーを忘れてしまう事が良くあるので、備忘録を残しておきます。

# ワークスペースの切り替えのショートカットキー
- kali linuxでのワークスペース(マルチデスクトップ)の切り替えのショートカット
`Ctrl` + `Alt` + → or ←
- Windowsでのマルチデスクトップの切り替えのショートカット
`Win` + `Ctrl` + → or ←
[初心者向け]　背景画像を画面サイズに合わせたい。時

# はじめに
メモ程度の記事です。
背景画像が繰り返されたり、なんかいい感じになってくれない時
ググるとすごく詳しく書いてあるサイトはあるけど、
「とりあえずやり方だけ教えてよ」っていう方の役に立てればと思います。笑

# 背景画像をいい感じにフィットさせるやり方
とりあえずこの
[background-position: center;]と[background-size: cover;]
をcssに入れるといい感じになると思います

```.css
.body{
  /* 画像を背景画像に */
  background-image: url("../img/image.jpg");

  /* 背景を真ん中にしてくれる */
  background-position: center;
  /*背景画像のサイズを自動調整 */
  background-size: cover;
}
```
# 少しだけ解説
1、背景にしたい画像はhtmlとかcssが入っているファイルの中に入れておいてください

2、CSSで背景画像を入れたいところに、
[  background-image: url("../img/image.jpg"); ]を書く。
url() の()の中何を書けばいいか分からないよって方は
url("⚪︎")　　←この⚪︎が書いてあるところで、 ./　  か　../  
と打ってみてください。   それで画像の名前が出てきたら、画像の名前を押せばokです!
出てこなかったらちょっと他のサイトで調べてみてください。笑

3、あとは続けて　
  background-position: center; と
  background-size: cover;　をCSSに書いて終わりです!

## background-position: center;
背景画像を上下左右中央に配置してくれる
## background-size: cover;
画像を「背景になる範囲」が全て隠れるサイズにしてくれる（縦横比保持）
らしいです。　
僕はただいい感じなるんだと思って使ってます笑
Arduinoのコンパイルエラー error: '\U0000feff' does not name a type について

## 概要
Mac用のArduinoIDEでスケッチ検証・コンパイルすると error: '\U0000feff' does not name a type が発生する原因について。
◎該当する行（１行目）を削除すれば解消されます。

さてとあるスケッチを検証・コンパイルすると、1行目で
```
motor_ctrl.cpp:1:1: error: '\U0000feff' does not name a type
    1 | ﻿//--------------------------------------------------------------------------------
      |  
exit status 1
'\U0000feff' does not name a type
```
こんなエラーが発生しました。
![U0000feff' does not name a type.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/1167c751-f79a-9ac0-012a-a20a9fe52913.png)

見た感じ、//-- とコメント行なので問題なさそうですが・・・

## 原因
Wikipediaより
バイト順マーク (バイトじゅんマーク、英: byte order mark) あるいはバイトオーダーマークとは、通称BOM（ボム）といわれるUnicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E9%A0%86%E3%83%9E%E3%83%BC%E3%82%AF

バイナリエディタでファイルを確認してみますと、先頭3バイトに EFBBBFが書き込まれており、UTF-8のテキストファイルとなっていました。
Mac版Arduinoではエラーとなってしまうので、該当行を削除すればエラーは解消されます。
![bom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/575af4ce-908b-1fa7-8391-9018b6e1c595.png)

## ん？
error: '\U0000feff' does not name a type
UTF-8 BOM : 0xEF 0xBB 0xBF　　(EFBBBF)
エラー内に '\U0000feff' とありますがBOMはefbbbfなので何を拾ってきているのでしょうかね。
バウンスメール とは

## 勉強前イメージ

エラーになったりしたメールがかえってくること？

## 調査

### バウンスメール とは

バウンス(Bounces)は跳ね返すという意味があり
送信したメールがエラーになって送信者に戻されるメールのことを指します。
基本的には送信元が MAILER-DAEMON や Postmaster になってることが多いです。
バウンスメールには以下のような情報が記載されています。

- バウンスされた日時
- 送信先のメールサーバの情報
- エラーコード
- バウンスの理由

### バウンスメールの種類

バウンスメールには以下の2種類あります。

- ソフトバウンス

一時的な理由による配信エラーのことで
一定時間おけば配信される場合もあるようなメールです。
例えばメールのサイズが大きすぎたり、受信先のメールサーバがダウン
または受信者のメールボックスの容量がいっぱいになってるなどがあります。

- ハードバウンス

恒久的な理由による配信エラーのことで、
一時的な問題ではなく何度送信しても解決しないような問題です。
例えば、メールアドレスが存在しないだったり、スパムメールと疑われたりという理由があります。
特にメールアドレスが存在せずに返ってくることが多いです。

## 勉強後イメージ

宛先がなくて返ってくるメールのことバウンスメールっていうんや・・・
存在は知ってたけど、名前は知らなかった

## 参考

- [バウンスメールとは？その仕組みと原因、対策について](https://www.onemarketing.jp/lab/lead-nurturing/bounce-mail_171)
- [バウンスメールが発生する理由と対策方法](https://baremail.jp/blog/2019/10/09/315/)
YouTubeの動画再生数をスクレイピングする


「[jseval](https://github.com/yuis-ice/jseval)」を使用してYouTubeの動画再生数データを取得、スクレイピングするプログラムを書いてみます。

dockerをインストールして、Linux環境下で以下のように実行。 

```js
docker run --rm jseval \
        --url "https://www.youtube.com/watch?v=kJQP7kiw5Fk" \
        --evaluate "$(cat <<- EOT
            (async function(){

                function waitForElm(selector) { // wait for element
                    return new Promise(resolve => {
                        if (document.querySelector(selector)) {
                            return resolve(document.querySelector(selector));
                        }

                        const observer = new MutationObserver(mutations => {
                            if (document.querySelector(selector)) {
                                resolve(document.querySelector(selector));
                                observer.disconnect();
                            }
                        });

                        observer.observe(document.body, {
                            childList: true,
                            subtree: true
                        });
                    });
                }

                await waitForElm('#count > ytd-video-view-count-renderer > span.view-count.style-scope.ytd-video-view-count-renderer');

                return JSON.stringify(
                    document.querySelector('#count > ytd-video-view-count-renderer > span.view-count.style-scope.ytd-video-view-count-renderer').innerText
                )

            })();
EOT
        )" \
        --headless \
        --output 
```

なお、この記事は教育目的であり、記事内のプログラムがそれ以外の目的で使用されることを想定していません。
laravelマイグレーションで複数カラムのunique制約を削除する方法

## 課題

laravelのマイグレーション実行時、複数カラムのunique制約を削除する際、以下のようなエラーが発生して正しく削除されない事があります。

```php
SQLSTATE[HY000]: General error: 1553 Cannot drop index 'identity_providers_user_id_provider_name_unique':needed in a foreign key constraint (SQL: alter table `table_name` drop index `identity_providers_user_id_provider_name_unique`)
```

unique制約を削除したい対象が外部キー制約も適用されている場合、外部キー制約を先に削除する必要があります。

## 解決方法

先に外部キー制約を削除してからunique制約を削除するようにします。

例えば、以下ようなケースの場合、マイグレーションはこのように記述します。

- identity_providersテーブルにuser_id, provider_nameに対して複合ユニークが適用されている
- user_idカラムにはUsersテーブルに外部キー制約が適用されている

```php
    public function up()
    {
        Schema::table('identity_providers', function (Blueprint $table) {
            $table->dropForeign(['user_id']); // 外部キー制約を削除する
            $table->dropUnique(['user_id', 'provider_name']); // user_idとprovider_nameのユニークを削除する
            $table->foreign('user_id')->references('id')->on('users'); // 外部キー制約を再度適用する
        });
    }
```
AWS SSO でコンソール画面にログインする（マルチアカウントも可）

# 初めに

この記事は以下のブログを参考にやってみたものです。

https://aws.amazon.com/jp/blogs/startup/techblog-iam-sso-practice/

# AWS SSO の環境構築

以下の記事の「AWS SSO の環境構築」の章に沿って進めます。

https://qiita.com/quryu/items/e2f16cb87c8b83d09e62#aws-sso-%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89

# IAM ID プロバイダの作成

以下の記事の「IAM ID プロバイダの作成」の章に沿って進めます。

https://qiita.com/quryu/items/e2f16cb87c8b83d09e62#iam-id-%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%81%AE%E4%BD%9C%E6%88%90

# SSO で許可セットを作成する

SSO のコンソール画面を開き、左のナビゲーションペインから「アクセス許可セット」をクリックします。その後、以下の画面の「許可セットを作成」をクリックします。

![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/391bf4a1-7355-cbad-b637-53a73a777c20.png)

許可セットのタイプでは「事前定義された許可セット」をクリックします。

![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/5e1a0bdf-ae1a-6f7a-6b66-a586ccdc93fa.png)

ポリシーでは「PowerUserAccess」をクリックします。その後「次へ」をクリックします。

![43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/e7251e23-a046-cd9e-6cfa-417300296556.png)

「次へ」をクリックします。

![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/6b4bd558-19d9-dc21-3c42-b327c3753699.png)

確認画面で「作成」をクリックします。

![45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/629bf097-4be2-434c-dd03-8816a685bc3a.png)

# AWS アカウントにユーザーまたはグループを割り当てる

左のナビゲーションペインから「AWS アカウント」を選択し、どの AWS アカウントにユーザーまたはグループを割り当てるかを選択します。以下は AWS Organizations の組織構造を表しています。一番上が組織の Root です。その下にメンバーアカウントが 2 つあります。

![46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/29756347-41c3-00bb-e694-426dbae0fe90.png)


ユーザーまたはグループを選択し、「Next」をクリックします。

![47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/1394eca6-9ce8-c2b0-210a-269db1ec455a.png)

作成したアクセス許可セットを選択し、「Next」をクリックします。

![48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/af935274-5cc4-dcf0-e5d9-8785759835dc.png)

「送信」をクリックします。

![49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/050c12a2-c939-6abb-33d1-566b5ce793d1.png)

ナビゲーションペインから「設定」をクリックし、ユーザーポータル URL をクリックします。

![50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/a7d3c312-5497-3fe9-5860-aab129209031.png)

以下の「Management console」をクリックし、ユーザー名とパスワードを入力します。

![51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/dec3d167-4403-d10c-a685-2b3648a901da.png)

以下のようにコンソール画面にログインできます。

![52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/91c5882b-eb04-8d06-6978-1fc38de7c020.png)

# マルチアカウントにログイン

前章ではシングルアカウントへのログインでしたが、組織構造の部分で 2 つのメンバーアカウントに対して両方チェックを入れることでマルチアカウントでのログインが可能です。

![58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/49d376fa-c844-0ea0-b085-4d4742d1185f.png)

ユーザーポータルを開くと 2 つのアカウントが表示されます。

![59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/df5dcb6f-d75e-92bd-7aae-71e016de725b.png)

マルチアカウントの部分は以下の記事を参考にしました。

https://qiita.com/f-daiki/items/7306385cb699e2464990

# 参考記事

https://aws.amazon.com/jp/blogs/startup/techblog-iam-sso-practice/

https://qiita.com/f-daiki/items/7306385cb699e2464990
Windowsで「pip install --upgrade pip」を実行してエラーが出たときの対処法

# はじめに

WindowsでPythonのpipをupgradeしようと思って「pip install --upgrade pip」のコマンドを実行すると
エラーが出て，更にpipが消えてコマンドが使えない事態に陥ることがある．

そうなってしまった際，pipを再インストールしなければならない．
ここではその手順を説明する．

**※補足※**
コマンドプロンプトを管理者として実行し，「pip install --upgrade pip」ではなく，以下のコマンドを使用するとエラーが出なくて済むようだ．
```
python -m pip install --upgrade pip
```

# pip再インストールの手順

1.https://bootstrap.pypa.io/get-pip.py ←このリンクを右クリックしてリンク先を保存する  

2.コマンドプロンプト or Powershellで先程のファイルを保存したディレクトリに移動し，次のコマンドを実行する

```
python get-pip.py
```

3.次のコマンドを実行してバージョンが表示されたら再インストール成功
```
pip --version
```


# 参考

https://www.curict.com/item/5a/5ac72d2.html

https://qiita.com/suzuki_y/items/3261ffa9b67410803443
CocoaPods対応で苦戦


![スクリーンショット 2022-04-23 19.07.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/cf135566-ae44-4ee0-470e-19ca116fc5cc.png)

# 発生してるエラー&警告
①Githubのユーザー名が違う

②summary: The summary is not meaningful.

③[iOS] file patterns: The `source_files` pattern did not match any file.

④[iOS] license: Unable to find a license file


この4つです
①に関してはなんで？って感じなのですが修正していきます

# 修正
**①ユーザー名の修正**
```diff_ruby
- s.homepage         = 'https://github.com/SNQ-0/Twifter'
+ s.homepage         = 'https://github.com/SNQ-2001/Twifter'
```
```diff_ruby
- s.source           = { :git => 'https://github.com/SNQ-0/Twifter.git', :tag => s.version.to_s }
+ s.source           = { :git => 'https://github.com/SNQ-2001/Twifter.git', :tag => s.version.to_s }
```
---
**②summary: The summary is not meaningful.の修正**
おそらくsummaryが初期値のままだと出るエラーな気がします
```diff_ruby
- s.summary          = 'A short description of Twifter.'
+ s.summary          = 'Twitter library with no developer account required'
```

---

**③[iOS] file patterns: The `source_files` pattern did not match any file.の修正**
これに苦戦しました
```diff_ruby
- s.source_files = 'Twifter/Classes/**/*'
+ s.source_files = 'Sources/**/*.swift'
```

---

**④[iOS] license: Unable to find a license fileの修正**

ローカルにLICENSEを追加する

---

**全て修正したところで問題発生！！**

---

# 新しいエラー&警告が出現
⑤description: The description is shorter than the summary.

⑥[iOS] swift: The validator used Swift `4.0` by default because no Swift version was specified. To specify a Swift version during validation, add the `swift_versions` attribute in your podspec. Note that usage of a `.swift-version` file is now deprecated.

# 再び修正
**⑤description: The description is shorter than the summary.の修正**

先ほどのsummaryと同じ様に初期値なので警告されてる気がします
```diff_ruby
  s.description      = <<-DESC
- TODO: Add long description of the pod here.
+ This library allows you to manipulate the Twitter API without a developer account.
                       DESC
```

---

**⑥[iOS] swift: The validator used Swift `4.0` by default because no Swift version was specified.〜の修正**
Swiftのバージョン記載してねってことだと思います。
```diff_ruby
+ s.swift_version = '5.5'
```

# 合格！！
![スクリーンショット 2022-04-23 20.02.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6e9d9530-1ee0-208f-f72e-d48a8bbe6289.png)
まだ下にLICENSE関係の警告が出てますが一応合格しました

# 追記
「Twifter」という名前が被っていて`pod trunk push`できない事がわかりました笑
名前の競合を回避する方法が分かったら別で記事書きます😭

# ちょっと紹介
自作パッケージをリリースする際にめっちゃ為になった記事です

https://qiita.com/uhooi/items/2f36b85f5f41cbd35189

https://qiita.com/uhooi/items/689801dad2cf2e0a37b4

https://qiita.com/uhooi/items/5ce382cb0c1c6bc018d9

https://qiita.com/uhooi/items/ada0a02737ecb2d1c8d7
[Android+Vulkan+Ray Tracing]3Dモデルをレンダリングしてみた

# 概要
Andoridでraytracing pipelineを作成し、モデルをレンダリングできた。
ray tracing pipelineの作成方法などは他を参考にしていただくとして、ここではAndroidでの導入する際の注意点をまとめようと思う。
vulkanでのray tracing pipelineの作成方法は私も過去に記事を書いているのでそれを見ていただけるとありがたいが、他の記事を参照してただくのも理解の手助けとなると思う。
私の記事はこちら
https://qiita.com/Aqoole/items/b9801ee0b5f3388cdd4d

# 注意点
<font color = "Red">ヨーロッパ向けに販売されているGalaxy S22シリーズでしかray tracingを試せない。</font>(2022/4/23現在)
Galaxy S22はヨーロッパ向けとそれ以外の地域でSoCが異なっており、
* ヨーロッパ向け : Exynos2200 (Gpu : Samsung Xclipse 920)
* それ以外の地域向け : Snapdragon 898

となっている。
Xclipse920はAMDとSamsungが共同開発したGPUであることから、デスクトップ向けAMD製GPUで使えたvulkanの拡張機能などが使えるようになっているため、vulkanでray tracing pipelineを作成することが可能となっている。
この記事を読んでS22を買おうと思われる方は稀だと思うが、日本で買ってもray tracingを試せないので注意してほしい。
(私はAmazon UKで買いました。)

# 参考画像
レンダリングしてみたのがこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1446998/0b73d791-160b-6876-2e64-437b829e9b89.png)

モデルの権利表記
>Fuse Woman 1 is created by Leonardo Carvalho
>https://skfb.ly/6S9UN
>LICENSE Creative Commons Attribution
>https://creativecommons.org/licenses/by/4.0/legalcode

手前にガラスのキューブを置いて、屈折させている。
ray tracingでは屈折や反射を簡単に書けるところが便利だと思う。

# 開発環境
* Windows
* Android Studio Bumblebee | 2021.1.1 Patch 3
* minSdkVersion : 30 (Android 11)
* NDK Version : 25.0.8221429

Andorid11からndkで提供される画像デコードライブラリを使用することができる。
https://developer.android.com/ndk/guides/image-decoder?hl=ja
私の実装ではこれを用いているのでminSdkVersionを30としているが、例えばstb_imageなどを使うのならこの制限の限りではない。
NDK Versionについては2022/4/23現在で最新版の25.0.8221429を必ず使用する必要がある。
このバージョンでないとvulkanのバージョンが低く、ray tracing用の関数を使うことができない。

# 実装の注意点
## shaderのコンパイル
app/src/main/shaders/ 配下に.vert, .fragのshaderを置くと、Android Studioがプロジェクトのビルド時に自動でshaderをコンパイルしてくれていたが、ray tracing用の.rgen, .rmiss, .rchitのshaderは自動でコンパイルしてくれないので、手動でspvファイルにコンパイルする必要がある。
コンパイルしたファイルは以下に格納する。

``` cpp
app\build\intermediates\assets\debug\mergeDebugAssets\shaders
```
https://developer.android.com/ndk/guides/graphics/shader-compilers?hl=ja

## ログ
原因不明だが、拡張機能を有効にしているにも関わらず、有効になっていない旨のログが記録される。
拡張機能を使っている関数すべてで出力されるので、buffer device addressを取得している

``` c++
vkgetdeviceaddress
```
でも記録されていまい、この関数はframeのupdateごとに呼ぶ関数なので、ログがvkgetdeviceaddressを使えないというもので埋まってしまう。
根本原因を調査するか、vkgetdeviceaddressの関数のときのみログに記録しないなどの対応が必要で、私は暫定で後者の対応をしている。

# 最後に
はてなブログにも色々書いているので、興味のある方はご覧ください。
https://blog.hatena.ne.jp/Aqoole_Hateena/aqoole-hateena.hatenablog.com/
ソースコードはGitHubに上げております。
https://github.com/kodai731/Aqoole-Engine-Android-Vulkan-Rendering-Engine-

<details> <summary>個人的な感想</summary>

「このままでは埋もれてしまう」という謎の焦燥感に駆られて、昨年のGWの休日をすべて費やして本気でray tracingの勉強をはじめて、およそ1年たった。
その時に書いた記事がこちらで、これが私の初Qiita。
https://qiita.com/Aqoole/items/5121cd64dc88ee4d9daf
当時はサンプルコードから少し広げるだけで精一杯だったが、あれからも調査・勉強を続け、今は最近発売されたAndroidでしかできないray tracingを早めに試せていることには満足している。
Androidでray tracingされるゲームが広がったとしてもまだまだ先のことで、そもそも広がらないかもしれないが、ゲームの可能性が広がる分野ではあると思っているので、今後も調査と勉強は続けたい。
全く役に立たない、個人的な感想に最後まで目を通して頂いてありがとうございます。
</details>
[ARKit] ARCoachingOverlayViewを表示する。

#  ARCoatingOverlayViewとは
カメラから取得したライブ映像にオーバーレイ（上にかぶせる形で）でViewを表示させる。
ARKitが実世界をトラッキングするためにデバイスを動かしてほしいというコーチングをする際に、このViewを表示させてユーザーに指示を出す。


# 実際の表示するまでの手順

1 ARSessionを設定する

```swift
 let coachingView = ARCoachingOverlayView()
.
.
.

coachingView.session = sceneView.session
```

2 ARCoachingOverlayViewのDelegateメソッドを設定する

```swift
coachingView.delegate = self
```
ARCoachingOverlayViewを実装するには下記のDelegateを委任する必要ある。

ARCoachingOverlayViewDelegate
下記三つのメソッドを持っている。

```swift
func coachingOverlayViewWillActivate(ARCoachingOverlayView)
 // コーチングが表示される前に呼ばれる

func coachingOverlayViewDidDeactivate(ARCoachingOverlayView)
// コーチングの非表示が完了したら呼ばれる。

func coachingOverlayViewDidRequestSessionReset(ARCoachingOverlayView)
//ARsessionはそもそもアプリを実行中ではないとトラッキングできない。セッションが中断すると中断前後でARオブジェクトが不自然にな場所に描画されてしまう。
//それを防ぐためにARSessionがrelocalization(リローカライズ)というの状態に入る。ここはARsessionが頑張ってくれているのでARオブジェクトを表示しない方が良い。（SessionInterruptionEndedのでコンテンツを非表示にすると良い）
//そのため同じ場所でアプリを開くとリローカライズさえ失敗しなければ同じARオブジェクトが表示される。
//ARCoachingOverlayViewのやり直しボタン(StartOver Button)を押すと,このDelegateメソッドが発火する。(ここでリローカライズで表示できていたARオブジェクトを非表示にできる）

```
* ARSessionの状態遷移　

https://developer.apple.com/jp/documentation/arkit/managing_session_lifecycle_and_tracking_quality/

![スクリーンショット 2022-04-23 21.40.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1474285/cb90ead4-c417-8325-1f7a-f0b0e9748e54.png)



4 ARSessionの状態を自動表示を行うかを設定する
トラッキング状態が不十分だとコーチングを再描画するか否かを設定する。

```swift
coachingView.activatesAutomatically = true
```

5 認識させたい目的の設定。

ARCoachingOverlayViewにはgoalというプロパティが存在する。
実世界のどの部分をトラッキングすることを目的とするかを設定する
列挙型で4つの種類が存在する。

https://developer.apple.com/documentation/arkit/arcoachingoverlayview/3192180-goal

```swift
enum Goal {
 case anyPlane
 // どれでも床なら
case horizontalPlane
//水平面
case tracking
// 基本的なトラッキング設定
case verticalPlane
// 垂直面
case geoTracking
 //正確な地理的位置
}

```
(祝IE廃止)かつてIEでは動いていたJavaScriptの書き方

# はじめに
2022年6月15日にいよいよIEが完全終了ということで、だいぶ昔にIEで動いていたけれど突然動かなくなって困った、バニラなJavaScriptの書き方を自分がメモしてた分備忘録として残す。(2度と使わないことを願う)

### onpropertychange
IE専用のイベント(IE10まで)、onchangeとの違いはDOM操作でのvalue変更時にもイベントが発火する。
```change.html
    <body>
            <input id="btn" type="button"  onclick="btnClick();" value="ボタン"/>
            <input id="text" type="text"  onpropertychange="textChange();" value=""/>
    </body>
    <script>
        function btnClick(){
            document.getElementById("text").value="ほげほげ"
        };
        function textChange(){
            console.log(document.getElementById("text").value)
        };
    </script>
```
上記ソースではボタンを押すとtextChange()も実行される。onchangeでは実行されない。
onchangeで同様の処理をさせる場合は、btnClick()内でdocument.getElementById("text").onchange()を実行させて発火させるかする。
(そもそもインラインスクリプトがよろしくない、jQuery使っておけという話ではあるが)

### createElementの変数表記
だいぶ昔のIE(8ぐらい？)ではcreateElementの変数で属性まで指定可能だった。
```createElement1.js
var element=document.createElement('<div align="center" class="hoge">');
```
現在のブラウザで同様の処理をする場合は、setAttributeやclassNameで指定。
```createElement2.js
var element=document.createElement('div');
element.setAttribute('align','center');
element.className="hoge";
```
### インラインスクリプトの関数名
インラインスクリプトで関数名「list()」を使用していたものが、IEのある時を境に関数が存在しないというエラーが発生。
```onclick.html
<input id="btn" type="button"  onclick="list();" value="リスト"/>
```
今調べたらIE10から使えなくなっている。chrome、edge、firefoxも現状使えない。
予約語の関係なのか現在も原因不明。他の単語もだめだったりするのだろうか？知っている人がいたら誰か教えて。
当時は関数名を変えて対応していたが、そもそもインラインスクリプトが以下略。

## まとめ
IEだけ使えないという物は数あれど、逆にIEにしか(それも古いバージョンしか)使えない物もあるのが厄介極まりなかった思い出。
久しぶりに見てこんな書き方もあったなぁと感傷に浸りつつ、今の書き方もいつしか時代遅れになる事を考えて書いていかないとなぁと思いました。（小並感)