KAEDE Hack blog

kaede0902 技術ブログ お仕事募集中。

マイナンバーカード申請をする(横浜市)

https://www.kojinbango-card.go.jp/kofushinse-smartphone/

説明わかりやすい

f:id:kei_s_lifehack:20210419121617j:plain

スマフォ申請をするには交付申請書というのが必要

マイナンバーカード通知カードではない

調べたら申請書の申請に身分証明が複数必要なので私は無理だった

だが郵送ならそれらがなくても行ける!!

f:id:kei_s_lifehack:20210419123308j:plain

https://www.city.yokohama.lg.jp/kurashi/koseki-zei-hoken/todokede/koseki-juminhyo/mynumber/cardsinseisyo.html

郵送の場合はここから用紙と封筒に貼る宛名を印刷して、マイナンバーと顔写真を貼って送ればいいらしい。

まとめ

横浜市

マイナンバー通知カードのみがあり

マイナンバー カード 申請書 がなく

身分証明書が複数ない場合は、

市役所のページから空の申請書と封筒宛名を DL して

コンビニなどで申請書、封筒、顔写真、を印刷する

そしてマイナンバーと住所を記入して顔写真を貼って提出!

Linuc 101 Linux コマンド -- fmt, nl, pr,sort -- cat の拡張。

たくさんある

una.soragoto.net

ここをみると fmt の他にもたくさんあるが、使ったものから覚える

fmt

ふみちゃん!ではなく ForMaT

fmt -w MaxWidth FileName

で表示の最大幅を指定して出力できる

I am kaede

のテキストファイルを作成

fmt -w 1 self
I
am
kaede

fmt -w 5 self
I am
kaede

fmt -w 10 self 
I am kaede

このテキストファイルの内容は 10 文字なので、5 文字なら I am まで、 10 文字なら全てが入る。

nl

Number Line

行番号をつけて表示する

cat self
I am kaede
He is kaede
She is kaede

nl self
     1  I am kaede
     2  He is kaede
     3  She is kaede

pr

PRint

pdf がでたりするわけではないので印刷ではないと解釈する

ヘッダーとか幅とか整形した形で出力。

una.soragoto.net

画面表示のためにファイルの

  • ヘッダー部分に何を表示するか
  • どこからどこまで印刷するか
  • 幅は何文字にするか

を指定して出力できる

sort

eng-entrance.com

sort -n FileName

で改行区切りの数値データを並べ替えられる

cat acend 
5
3
2
9

cat で表示すると当然バラバラのままだが

sort -n acend 
2
3
5
9

sort -n を使うと小さい数値から昇順に並んで行くようになった

sort -r acend 
9
5
3
2

Riverse, 反対で降順、大きい順から小さい順に降るようになった。

まとめ

4つの cat 拡張コマンドをまとめた

fmt -w で幅を指定して出力

nl で行番号つけて出力

pr で 印刷っぽく整形して出力

sort -n で 改行区切りの数値テキストを小さい順に並び替えて出力

ができる!

Linuc 101 Linux コマンド -- grep, seq -- ファイルの内容の抽出と正規表現と

grep

よく ls の内容を絞るのに使う。

ls
a       ab      abc
ls | grep ab
ab
abc

引数の文字を含むモノに絞る。

cat の戻り値も絞れる。

fgrep との違い

mondai.ping-t.com

この問題によると fgrep では正規表現が使えない

試してみる

そもそも正規表現が機能してない問題

touch hoge
touch HOGE
ls
hoge

大文字小文字ではファイルは作成できなかった

なので ls ではなく cat でやる

cat fileForGrepReg.txt 
hoge
HOGE
cat fileForGrepReg.txt | grep 'hoge'
cat fileForGrepReg.txt | grep 'hoge|HOGE'
cat fileForGrepReg.txt | fgrep 'hoge'
hoge
cat fileForGrepReg.txt | fgrep 'hoge|HOGE'

cat | grep では 文字列指定も or 指定も動かず

cat | fgrep では文字列指定のみが動いた

grep FileName では

grep 'hoge|HOGE' fileForGrepReg.txt 
grep 'hoge' fileForGrepReg.txt 
hoge

or が動いてない、これ or の書き方違うんじゃないか?

www-creators.com

あってる

拡張性期表現をする

bi.biopapyrus.jp

-E をつけないと受付ないらしい。試してみる

grep 'hoge|HOGE' fileForGrepReg.txt 
grep -E 'hoge|HOGE' fileForGrepReg.txt 
hoge
HOGE

できた!!! 拡張正規表現の E らしい。

| は原初的な正規表現ではなかった。

fgrep を今度こそ検証

fgrep 'hoge|HOGE' fileForGrepReg.txt 
fgrep -E 'hoge|HOGE' fileForGrepReg.txt 
hoge
HOGE

fgrep も -E 使えば拡張正規表現はでる

fgrep 'hog.' fileForGrepReg.txt 
fgrep -E 'hog.' fileForGrepReg.txt 
hoge
grep 'hog.' fileForGrepReg.txt 
hoge

しかし通常正規表現の場合、fgrep は -E をつけないと結果を返さないが

grep は -E をつけなくても返した。

つまり通常の grep は -E がなくても or などの難しいものを含まない正規表現なら使えるようだ。

seq

JS ゲーム製作 p5.js 複数円の衝突を関数化する - 円を増やす準備

何をするか

p5.js

kei-s-lifehack.hatenablog.com

前回の記事で 2円の衝突判定の実装をやったが、関数化はされていなかったので、 ゲームを作るために必要な関数化を行う。

そのために以下の処理を行う

2円のオブジェクト化

円の描画

テキストの描画

2円のオブジェクトからの距離の計算

2円のオブジェクトからの衝突の是非の計算

を関数化していく

円をオブジェクト化する

変数でのベタ書き

最初はこうしていた。

  let x0 = 120;
  let y0 = 180;
  let r0 = 60;

  let x1 = mouseX;
  let y1 = mouseY;
  let r1 = 120;

固定座標の 円 0 と mouse の座標が同期される 円 1 の 座標と半径を変数で記述していた

オブジェクトにする

function draw() {
  const circleA = {
    x: 120,
    y: 180,
    r: 60,
  };
  const circleB = {
    x: mouseX,
    y: mouseY,
    r: 120,
  }
}

draw() の関数内にオブジェクトとして円を作る。

そうするとこれから書く距離の測定や衝突の判断に、円のオブジェクトを2つ指定するだけでよくなる。

なお draw() 関数外だと mouseX, mouseY が機能しない。

距離の取得

距離の取得の処理

  let distance = sqrt( (x1-x0)**2 + (y1-y0)**2 );
  let distanceComma2 = nfc(distance, 2);
  let distanceText = `Distance: ${distanceComma2}`;

まず、前回に2つの円から距離を取る処理を書いた

これを関数化する

距離の取得の関数化

function getDistance(circleObjectA, circleObjectB) {
  let x0 = circleObjectA.x;
  let y0 = circleObjectA.y;
  let x1 = circleObjectB.x;
  let y1 = circleObjectB.y;

  let distance = sqrt( (x1-x0)**2 + (y1-y0)**2 );
  let distanceComma2 = nfc(distance, 2);
  let distanceText = `Distance: ${distanceComma2}`;
  return distanceText;
}

これで 2円から距離を返す関数ができた。使ってみる

  const distanceOf0and1 = getDistance(circleA, circleB);
  console.log(distanceOf0and1);

  sketch.js:8 Distance: 246.45

ちゃんと計算されているのが確認できた。


円の表示

  circle(x0, y0, 2*r0)
  circle(x1, y1, 2*r1)

これで描画していたのを、円をオブジェクト化したので

function drawCircle(circleObject){
  circle(circleObject.x, circleObject.y, 2*circleObject.r)
}
  drawCircle(circleA)
  drawCircle(circleB)

こうなる

テキストの表示

関数化する前

  strokeWeight(1);
  stroke(0);
  textSize(32);
  text(distanceText, 3, 420);

その度にスタイルを記述した後に text() で書いてた

関数化する

スタイルを固定化して関数化する。

function displayText(message,fromLeft,fromTop){
  strokeWeight(1);
  stroke(0);
  textSize(32);
  text(message, fromLeft, fromTop);
}

先ほど getDistance() で取得したテキストを使って

  displayText(distanceOf0and1, 3, 420)

f:id:kei_s_lifehack:20210416080551p:plain

ちゃんと表示された。


衝突

ここまでで 円のオブジェクト化と描画系と距離の計算まで関数化したので

ようやく衝突処理もオブジェクト化できる

関数化する前

  let isHit = distanceOf0and1 < r0 + r1;

衝突判定は2つの円の距離より各円の半径の和が小さいかどうかで判定する。これを関数化したい

関数化後

function isHit(circleA, circleB) {
  let distance = getDistance(circleA, circleB);
  let isHit = distance < circleA.r + circleB.r;
  return isHit
}

  isHit(circleA, circleB)

これで円を増やしても実装できる!

kaede0902.github.io

実際に動いているコードはこちら

github.com

ブランチはこちら。Pull Request あったらください

Linuc 101 Linux コマンド - ファイルタイプ、権限、タイムスタンプの変更

why

vi で作り、開き編集し保存し

rm で削除して

mv で移動させて

cp でコピーする

のは基本の前提式として、

それ以外にも普段気にしない ファイルの状態操作があったのでまとめる

  • 作成時刻
  • アクセス時刻
  • 権限
  • 所有者

などがある

参考

山本 道子,大竹 龍史. Linux教科書 LinuCレベル1 スピードマスター問題集 Version10.0対応 (Japanese Edition) (Kindle Locations 1255-1256). Kindle Edition.

参考

山本 道子,大竹 龍史. Linux教科書 LinuCレベル1 スピードマスター問題集 Version10.0対応 (Japanese Edition) (Kindle Locations 1255-1256). Kindle Edition.

ファイルタイプの概念と ls -l での表示

ja.m.wikipedia.org

ファイルとハードリンク、ディレクトリ、シンボリック、の総称をファイルタイプという

ディレクトリにあるエントリを 表示する ls に、-l ( long ? ) の引数をつけると、 詳細情報を表示することができる。


ファイルタイプを判別。

最初の1文字目でわかる。

ls -l

-rw-r--r--  2 kaede  staff      21 Apr 14 22:40 2234.txt
-rw-r--r--  2 kaede  staff      21 Apr 14 22:40 2234link
lrwxr-xr-x  1 kaede  staff       8 Apr 15 19:42 2234linkSyn -> 2234.txt
drwxr-xr-x  2 kaede  staff      64 Apr 14 23:23 testDir

上から

  1. テキストファイル
  2. そのテキストファイルへのハードリンク
  3. そのテキストファイルへのシンボリックリンク
  4. ディレクト

がある。

最初の1文字目がそれぞれ

  1. -
  2. -
  3. l
  4. d

となっているように、

テキストファイルまたはハードリンクは -

シンボリックリンクl ( link )

ディレクトリは d ( directory )

として表示される。

ja.m.wikipedia.org

通常のファイルも一つ目のハードリンクのことであり、2つめのハードリンクもファイル扱いになる。


ファイルの権限の読み方と変更と注意点

kei-s-lifehack.hatenablog.com

別の記事に分けた。

read, write, exe,

user, group, others,


ファイルたちの作成時刻の確認と変更

ファイルの作製時間の確認

ファイルを 22:30 作成と 22:34 作成して試す

ll
total 0
-rw-r--r--  1 kaede  staff  0 Apr 14 22:30 2230.txt
-rw-r--r--  1 kaede  staff  0 Apr 14 22:34 2234.txt

実行時刻などが表示された。確かに作った時間が見える。

touch で変更できる


file

全ての エントリを表示する ls だけではなく単体のファイル情報を表示する file コマンドもある。

file YourFileName -- 1つのファイルの中身の状態を表示

さっきのディレクトリで打ってみる

file 2234.txt 
2234.txt: empty
vi 2234.txt 

file 2234.txt 
2234.txt: ASCII text

ファイルの中身がわかるようだ。中身がないと empty 、 utf8 で書き込んでいると ASCII text と表示された

file 動揺.jpeg 
動揺.jpeg: JPEG image data, JFIF standard 1.01, aspect ratio, density 72x72, segment length 16, progressive, precision 8, 1100x1098, components 3

画像のファイルだと、形式とアスペクト比、画像サイズなどがわかる!ファイルサイズは出ないようだ。

Linux ファイルとディレクトリの権限の見方と操作と注意点 -rwxrw-r-- 754

why

ファイルの詳細確認記事を書いていたら、権限まわりが長くなったので、単体で記事にした

ファイルの権限について - rwx rw- r-- などの文字列の詳細

web.tku.ac.jp

Linuc 101 の知識と、この記事を参考にしている

ls -l では 各ファイルの種類や時刻のほかに、 パーミッション ( 権限 ) も表示されている。

read と write と execute の 3 つの操作を

自分とグループのメンバーと他人ができる権限があるかが示される。

空の テキストファイルと空のディレクトリを作って見てみる。

ls -l
-rw-r--r--  1 kaede  staff      21 Apr 14 22:40 2234.txt
drwxr-xr-x  2 kaede  staff      64 Apr 14 23:23 testDir

先ほどの空のファイルと空のフォルダの例でみていく。

最初の -d が そのアイテムの種類で

そこから そのユーザー、グループ、その他のユーザーの読み書き実行権限が表示されている。

2234.txt ファイルでの -rw-r--r-- の詳細

この例の 2234.txt では -rw-r--r-- を

- ( This is a file)

rw- ( 自分は読み書きができるが実行ができない )

r-- ( グループでは読めるが、書き込みも実行もできない )

r-- ( 他のユーザでは読めるが、書き込みも実行もできない )

に分解できる。

testDir ディレクトリでの drwxr-xr-x の詳細

一方 testDir では drwxr-xr-x となっていて、分解すると

d ( This is a directory)

rwx ( 自分は読み書き実行が全てできる )

r-x ( 所属グループでは読みと実行はできるが、書き込みができない )

r-x ( その他のユーザでは読みと実行はできるが、書き込みができない )

となる

ディレクトリの「実行」はディレクトリの中にファイルやディレクトリを作ったり削除すること。

数字での表し方 と付け方

これらの Read, Write, Exe, の権限は数字でも表せる。

足し算で権限のパワーがわかる。

Read は 4

Write は 2

Exe は 1

なので

読み書き実行全部できる場合は 7

読み書きはできるが、実行権がない場合は 6

中身の確認と実行はできるが、書き込みができない場合は 5

読めるだけの場合は 4

になる。

それを 前述の 自分に与える権限、グループのメンバーに与える権限、他人に与える権限、で 3 つ並べるので、よく環境構築で出てくる

chmod 755

のように 3 つ並ぶことになる。

chmod は権限をファイルなどにつけるコマンド。

以前 Twitter で話題になっていた 脳死で 777 をつけると危険というのは、グループのメンバや他人にまで 書き込み権限や実行権限を与えるのは危険だということだと理解できた。

https://eng-entrance.com/linux-command-umask#umask

またファイル作成時のデフォルトの権限は umask という値に基づいて決定されている。

umask で現在の umask 値を確認できる。

umask 値は 権限とは逆で 7 が最弱で 0 が最強になる。7から引いた値になる。

デフォルトは 002 なので

ファイルを作ると 775 になり

umask を変更して 755 にすると

作成されるファイルは 022 になる。

まとめ

ls -l で ファイルやフォルダの権限情報が出せる

drwxr-xr-x だったら d, rwx, r-x, r-x, と分割して

これはディレクトリで、自分は read write execute ができて、グループのメンバー は write のみができなくて、他人も write のみができない、と中身をみることができる。

また権限の強度を 7 ~ 4 で与えられて、グループや他人にまで 7 のパワーを与えるととてもまずい。

次にやりたいこと

グループのメンバーや他人ができる権限をこれでできて〜と書きつつも実際に試せていない。

他のユーザーを作ってログインして、実際に実行してみたり、

他人としてシェルに入って実行してみたり、実際に試して結果を付け加えたい

JS ゲーム製作 -- p5.js で円の衝突を実装する

why

前回のライブラリがうまく使えなくて困っていたところ

パフォーマンス遅くてもいいなら自分で作ればすぐだよ

と聞いたので作ってみる

参考

www.youtube.com

ヘロンの数学 さんのチャンネル

この動画では円と線分の衝突を扱っているが、円の方が圧倒的にシンプルなのでとりあえずこれをマスターすることにする

円などの名前

  • 円0: c0
  • 円1: c1
  • 円0 の半径: r0
  • 円1 の半径: r1
  • 円 0 と 円 1 の距離: d

接触条件

円 0 と 円 1 の半径を足したものが 2つの円の 距離と同じであれば、その時

二つの円はちょうど接触していることになる。

つまり d が r0 + r1 以下の時になる。計算誤差によりちょうど接触するときは取れないため、未満の条件で考えるので良いらしい。

p5 で実際に出す

ヘロン氏は HTML Canvas を直接かかかず、p5.js を使っている

p5js.jp

公式サイト

github.com

リポジトリ

www.npmjs.com

ちゃんと npm にもあった

しかし CDN でなく、DL だと $25 かかるらしい?

実際に p5 を動かし、 100 x 100 の Canvas に 20, 50, 100, の円を書く

癖で npm i p5 したが、今回は React まで使わないので必要なかった

index.html を書いて

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

CDN で読み込む

ファイル名を sketch.js にして

<script src="sketch.js"></script>

読み込んで スケッチを書き始める

function setUp() {
  createCanvas(100, 100);
}
function draw() {
  ellipse(50,50,20,20);
}

f:id:kei_s_lifehack:20210413210846p:plain

100 x 100 の canvas を作って 50,50 から 20,20 の 円を作れた。小さい。

f:id:kei_s_lifehack:20210413210952p:plain

50, 50, のサイズにもできた。少し大きい。

f:id:kei_s_lifehack:20210413211107p:plain

100 x 100 のサイズだとギリギリはみ出す。

Chrome Dev Tool の Mobile S だと 1/4 しか出ないバグ

f:id:kei_s_lifehack:20210413211409p:plain

Dev Tool の 320px の Mobile S の枠でリロードすると、なぜか 1/4 相当しか出ない。

f:id:kei_s_lifehack:20210413211536p:plain

カスタムレイアウトの Mi9 の 343px だと全部でる。なぜだろう


x 100 y100 を超えられない問題 は typo だった

f:id:kei_s_lifehack:20210413212327p:plain

動画のコードでは createCanvas で 領域を 480 x 480 に伸ばしているが

CDN 読み込みで

function setUp() {
  createCanvas(480, 480);
}
function draw() {
  ellipse(100,50,100,100);
}

480 480 の領域まで使えるようにして、円を 50 から 150 の位置まで描けるようにしても、途中で切れてしまう。

DevTool で見てみると Canvas の大きさが 100 から拡張できていない。

原因は setup() 関数を setUp() と書き続けていたからだった。

キャメルケースじゃないんかい!!!!!!!!!!

f:id:kei_s_lifehack:20210413220146p:plain

解決!100 x 100 の壁を超えられた!!


二種類の重なっている円を描く

動画のコードをほぼそのまま使って円を描く

function setup() {
  createCanvas(900, 900);
}

function draw() {
  background(124,124,124);

  let x0 = 120;
  let y0 = 180;
  let r0 = 60;

  let x1 = 240;
  let y1 = 150;
  let r1 = 120;

  noFill();
  strokeWeight(3);

  circle(x0, y0, 2*r0)
  circle(x1, y1, 2*r1)
}

この時に backgroud を setup の方に書くと重なりまくって大変なことになる。

f:id:kei_s_lifehack:20210413225437p:plain

2円の中心からの距離を測る

  let d = sqrt( (x1-x0)**2 + (y1-y0)**2 );
  let distanceText = `Distance: ${d}`
  console.log(distanceText);

  strokeWeight(1);
  stroke(0);
  textSize(32);
  text(distanceText, 3, 420);

二点間の距離 D は

円 0 の x 座標と 円 1 の x 座標 の差分 の二乗

円 0 の y 座標と 円 1 の y 座標 の差分 の二乗

を足して、ルートにすれば出る

f:id:kei_s_lifehack:20210413230337p:plain

これで距離が出た。現在の円の中心同士の距離は 120 のようだ。

円1 の中心をマウスカーソルの位置と同期する

非常に難しそうだが、p5.js にはこの機能が組み込まれている

  let x1 = mouseX;
  let y1 = mouseY;

mouseX, mouseY と入れるだけ!!!

f:id:kei_s_lifehack:20210413231952p:plain

f:id:kei_s_lifehack:20210413232005p:plain

円を近づけたり離したりすると、中心からの距離が減ったり増えたりするのがわかる!

距離から衝突判定の処理を作る

先ほどので距離は取れているので

  let isHit = distance < r0 + r1;

を追加すれば OK

あとは表示のコードを書いて

  let isHit = distance < r0 + r1;
  let isHitText = `2 Circles are Hit?: ${isHit}`;
  text(isHitText, 3, 520)

f:id:kei_s_lifehack:20210413233220p:plain

f:id:kei_s_lifehack:20210413233231p:plain

衝突がわかる!!!ゲーム製作の第一歩だ!!!

kaede0902.github.io

動く!!!よし!!

f:id:kei_s_lifehack:20210413233643p:plain

スマフォだとこのサイズ感。

機能確認の目標達成!!!

まとめ

p5.js は

function setUp() {
  createCanvas(480, 480);
}
function draw() {
  ellipse(100,50,100,100);
}

これで Canvas 初期化して円が描ける

  let x0 = 120;
  let y0 = 180;
  let r0 = 60;

  let x1 = mouseX;
  let y1 = mouseY;
  let r1 = 120;

  noFill();
  strokeWeight(3);

  circle(x0, y0, 2*r0)
  circle(x1, y1, 2*r1)

こうすると、片方の円はマウスの座標と同期する。マウスで円を動かせる。

  let distance = sqrt( (x1-x0)**2 + (y1-y0)**2 );
  let isHit = distance < r0 + r1;

この公式で距離を計算し、当たっているかを計算できる

それを全て実装するとこうなる!!!

kaede0902.github.io