OmniAICreator/Qiita-1.07M huggingface dataset:
PowerVC 導入で作成されるユーザー、グループ

##### はじめに

PowerVC 導入で作成されるユーザー・グループを確認する機会があったので参考で記載します。


----
##### 環境

・RHEL 8.4 ppc64le
　PowerVC 2.0.2.1




----
##### 確認方法

他に何も導入されていないRHEL 8.4 のデフォルト導入のサーバーと、RHEL8.4 に PowerVC 2.0.2.1 を導入したサーバーでのユーザー・グループの差異を比較しました。


----
##### ユーザー

PowerVC 導入で作成されたと思われるユーザーは以下でした。

```
apache:x:48:48:Apache:/usr/share/httpd:/sbin/nologin
hacluster:x:189:189:PowerVC HA Cluster Administrator:/home/hacluster:/sbin/nologin
rpc:x:32:32:Rpcbind Daemon:/var/lib/rpcbind:/sbin/nologin
rpcuser:x:29:29:RPC Service User:/var/lib/nfs:/sbin/nologin
haproxy:x:975:975:PVC Haproxy User:/var/lib/haproxy:/bin/false
mysql:x:27:27:MySQL Server:/var/lib/mysql:/sbin/nologin
memcached:x:974:974:Memcached daemon:/run/memcached:/sbin/nologin
epmd:x:973:973:Erlang Port Mapper Daemon:/dev/null:/sbin/nologin
rabbitmq:x:972:972:RabbitMQ messaging server:/var/lib/rabbitmq:/sbin/nologin
zookeeper:x:971:971::/:/sbin/nologin
openvswitch:x:970:970:Open vSwitch Daemons:/:/sbin/nologin
gnocchi:x:969:969:OpenStack gnocchi Daemons:/var/lib/gnocchi:/sbin/nologin
neutron:x:1000:1003:OpenStack Neutron Daemons:/var/lib/neutron:/sbin/nologin
glance:x:1001:1004:OpenStack Glance Daemons:/var/lib/glance:/sbin/nologin
nova:x:1002:1005:OpenStack Nova Daemons:/var/lib/nova:/sbin/nologin
keystone:x:1003:1006:OpenStack Keystone Daemons:/var/lib/keystone:/sbin/nologin
radvd:x:75:75:radvd user:/:/sbin/nologin
cinder:x:1004:1007:OpenStack Cinder Daemons:/var/lib/cinder:/sbin/nologin
saslauth:x:968:76:Saslauthd user:/run/saslauthd:/sbin/nologin
ceilometer:x:1005:1008:OpenStack ceilometer Daemons:/var/lib/ceilometer:/sbin/nologin
panko:x:1006:1009:OpenStack panko Daemons:/var/lib/panko:/sbin/nologin
bumblebee:x:967:967:IBM OpenStack Notification:/var/lib/bumblebee:/sbin/nologin
placement:x:966:966:IBM OpenStack SSK Daemons:/var/lib/placement:/sbin/nologin
swift:x:1007:1010:OpenStack Swift Daemons:/var/lib/swift:/sbin/nologin
ttv-validation:x:965:965:IBM OpenStack Validator Daemons:/var/lib/ttv-validation:/sbin/nologin
clerk:x:964:964:IBM OpenStack SSK Daemons:/var/lib/clerk:/sbin/nologin
mongod:x:963:963:mongod:/var/lib/mongo:/bin/false
pvcui:x:962:962:pvcui:/var/lib/pvcui:/sbin/nologin
```

##### グループ


PowerVC 導入で作成されたと思われるグループは以下でした。


```
pvcservices:x:1000:cinder,glance,keystone,neutron,nova,ceilometer,panko,gnocchi,bumblebee,placement,swift,ttv-validation,clerk,pvcui
apache:x:48:
powervc-filter:x:1001:root
haclient:x:189:
rpc:x:32:
rpcuser:x:29:
haproxy:x:975:
mysql:x:27:
memcached:x:974:
epmd:x:973:
rabbitmq:x:972:
zookeeper:x:971:
openvswitch:x:970:
hugetlbfs:x:1002:openvswitch
gnocchi:x:969:
neutron:x:1003:
glance:x:1004:
nova:x:1005:
keystone:x:1006:
radvd:x:75:
cinder:x:1007:
saslauth:x:76:
ceilometer:x:1008:
panko:x:1009:
bumblebee:x:967:
placement:x:966:
swift:x:1010:
ttv-validation:x:965:
clerk:x:964:
mongod:x:963:
pvcui:x:962:
```

---

UID、GID は環境によって変わると考えられます。

以上です。
「第一回プログラミング教育について話し合う会」に参加したので、その感想

「第一回プログラミング教育について話し合う会」に参加しました。

https://opt.connpass.com/event/240392/

私自身は、どちらかと言うと、初学者にプログラミングを教える側の立場で仕事をしています（もちろん、詳しくない領域では、ほかの人に教わることもあります）。今回の会には大きな刺激を受けたので、発表の中からいくつかピックアップして感想を書くことにしました。

# 2年目に入った小学校プログラミング教育 －その現状と課題－

> 2020年4月，プログラミング教育を含む新しい小学校学習指導要領が実施された。しかし，新型コロナウイルス感染症の影響もあり，プログラミングを体験する授業はあまり行われていない。そうなった経緯について，過去の小学校のプログラミング教育を振り返り，産業界や官邸，文科省の思惑，新しい教育や学校の在り方などが交錯する中で進められた取り組みから読み解く。そして，それを受けて移行期間中に多くの学校で実施されたコンピューターを使わない「アンプラグド」を用いた授業を紹介し，その問題と背景にある「プログラミング恐怖症」に対する解決法を提案する。


小学校の先生方は、プログラミング教育として「正解のあるアルゴリズムの穴埋め問題」を作ってしまうという話が印象に残りました。

古い話ですが、私がセンター試験を受けた頃は、数学の選択問題に「数値計算とコンピュータ」というものがありました。しかし、これはまさにアルゴリズムの穴埋め問題でした。

このような穴埋め問題は、確かに、アルゴリズムを読み解く力をテストすることはできるのだろうと思います。しかし、「プログラミング的思考」を育てるためのものにはならないはずです。

https://www3.nhk.or.jp/news/html/20210407/k10012960401000.html

このような問題を解く体験をプログラミング体験だと勘違いしてしまったら、本当にもったいないと思いました。

プログラミング的思考を育てるために重要なのは、「正解」のアルゴリズムを作り上げる体験ではありません。「ここの記述を変えたらどうなるのか」というような、好奇心や偶然に基づく実験・試行回数を高め、即座にその結果がフィードバックされるような体験です。そのような体験を大事にしないといけないのだと認識しました。


# 意識的な学習につながる仕掛けのつくり方

> よりよい学習をするためには、学び手が次の3項目を身につけることが重要です。
> 
> - 意図をもって取り組めること
> - 学習のための基礎体力があること
> - 未来の姿をイメージできること
>
> 本発表では、上記項目の必要性を確認し、それらを実現するための具体的な取り組みや実践する上での悩みについて説明します。

https://docs.google.com/presentation/d/1qaNofECrbB9v4weKYLcwVeiQ4erAn7sgLv6n2TrE-oQ/edit?usp=sharing

発表の中では、[「慣れてくると進んで壊しにいくようになる」](https://docs.google.com/presentation/d/1qaNofECrbB9v4weKYLcwVeiQ4erAn7sgLv6n2TrE-oQ/edit#slide=id.g11ee17fc4c6_0_112)という話が印象に残りました。

聞いている中で、私が大学の授業でプログラミングを学んだときの思い出を連想しました。たしか、for文を使って指定された文字列を出力するという課題を解いていたときのことだったと思います。

↓こんなイメージ

```
*
**
***
****
*****
```

私は課題をこなしていたのですが、おそらくコードの記述を間違い、無限ループが発生してしまいました。
その結果、コンソールが高速にスクロールしながら文字列の小さな塊が瞬間移動し続けるという結果になりました。しかし、それがあまりに予想外の動作だったため、静かな授業中に一人吹き出してしまいました。

そのバグを直した後も、再現できないものか、もっとおもしろい挙動にならないものかとしばらく試していた記憶があります。

プログラムの破壊を試みるのは、おもしろい体験です。

最近は、ふと思い立って、部屋のGoogle Homeに「OK, Google。 2 割る 0 は？」と試してみたりしました。ゼロ除算エラーが起きたらどうなるのかを試したかったのです。

プログラミング教育をする際には、そのような体験を意図的に増やしたいと思いました。

# 初めてエンジニアインターンの育成に取り組んで考えたこと

> 会社として初めてエンジニアインターンを受け入れることになり、2ヶ月ほど育成に取り組んできました。育成すると口で言うのは簡単ですが、実際にやってみると想像以上に大変なことの連続です。今回はその内容や考えたことについてざっくばらんにお話しします。

https://speakerdeck.com/texmeijin/chu-meteenziniaintanfalseyu-cheng-niqu-rizu-ndekao-etakoto

プログラミング初学者に「例外処理について理解してきて」と指示をすると、調べてきたことを真面目にノートにまとめてくる。しかし、その状態で「じゃあ例外処理を書いて」というと1文字も書けないという話がありました。

そう。手元で動かさないと、プログラムを書く能力は身につかないのです。

自転車の乗り方の理論を知っていても、実際に自転車に乗れるわけではないのと同じです。

私は、必ずしも「ゼロイチで作りたいもの」は必要ないと思っているのですが、自分のアイデアを試した結果、フィードバックがもらえるフィールドは重要だと感じています。

20年前の私の場合は、それがCGIゲームの改造でした。今は何が良いのでしょうか。

https://note.com/flyaway/n/n558c14232fd9

# 感想まとめ

これら3つの発表に共通していたのは、「とにかく自分の手で自分のアイデアを試し、試行回数を高める」ということだったと思います。

教える側は、それを実現するために「教わる人(または集団)を取り巻く環境」をデザインしなければなりません。しかし、意図的にそのような環境を作り出すためには、どうすればよいのでしょう。

私自身は、それを実現するためのアイデアが浮かんでは消え、浮かんでは消え・・・を繰り返しています。そのため、とっさの場面でそれらのアイデアが浮かばず、応用ができていません。

アイデアをすぐに引き出せるようにするには、それらをどこかにまとめておく必要があると感じました。そのアイデア集については、また別の記事で・・・。

# 関連記事

https://qiita.com/e99h2121/items/8adccec78cd757bbda59
ハッキングの遊びができるもの見つけた！

## 脆弱サイト

https://weakness-runteq.herokuapp.com/

## 入力コマンド

1 XSS（投稿）

```
<marquee>ひさじゅのほーむぺーじ</marquee>
```

3. SQLインジェクションカテゴリのvalueを以下に変更

```
SELECT m.user_id, m.message, u.tel as created_at, m.category FROM messages as m join users as u on u.id = m.user_id order by m.id desc
```

セッションハイジャック

```
<script>document.cookie='session_key=a3cde67fd955af54b319678d6e;';</script>
```
Android の Wi-Fi 関連の実装についての話

## はじめに

今更ながら Android で Wi-Fi まわりの実装を行う機会があったので個人的にまとめました。
いくつかのメソッドは `This method was deprecated in API level 29.` なので注意が必要です。

> Android Developers Reference

- [WifiManager](https://developer.android.com/reference/android/net/wifi/WifiManager)

- [WifiInfo](https://developer.android.com/reference/android/net/wifi/WifiInfo)

## パーミッション

AndroidManifest.xml に以下を追加します。

```
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
```

## Wi-Fi が有効かどうか取得する

Wi-Fi が有効か無効かを取得します。

```Java
// Java
WifiManager manager = (WifiManager) getSystemService(WIFI_SERVICE);
boolean enabled = manager.isWifiEnabled();
```

```Kotlin
// Kotlin
val manager = applicationContext.getSystemService(WIFI_SERVICE) as WifiManager
val enabled = manager.isWifiEnabled
```

## Wi-Fi の情報を取得する

- SSID

```Java
// Java
WifiManager manager = (WifiManager) getSystemService(WIFI_SERVICE);
WifiInfo info = manager.getConnectionInfo();
String ssid = info.getSSID();
```

## Wi-Fi に接続する

登録済みの Wi-Fi に接続します。

```Java
// Java
WifiManager manager = (WifiManager) getSystemService(WIFI_SERVICE);
WifiConfiguration config = null;
for (WifiConfiguration network : manager.getConfiguredNetworks()) {
    if (network.SSID.equals('"' + `ssid` + '"')) {
        config = network;
        break;
    }
}
if (config != null) {
    wm.enableNetwork(config.networkId, true);
}
```

## Wi-Fi を切断する

Wi-Fi を無効にします。

```Java
// Java
WifiManager manager = (WifiManager) getSystemService(WIFI_SERVICE);
WifiInfo info = manager.getConnectionInfo();
manager.disableNetwork(info.getNetworkId());
```
久しぶりにGNS3（その９：L2トンネリング/ブリッジ）

# L2トンネリング/ブリッジ
物理的に接続されていないネットワーク間で同一セグメントを実現する。L2トンネリング（L2TP）とかL2ブリッジなどと言うらしい。参考にしたサイトは下記。
- [L3 ネットワーク間の L2 ブリッジングの設定例](https://www.cisco.com/c/ja_jp/support/docs/ip/layer-two-tunnel-protocol-l2tp/116266-configure-l2-00.html)

## トポロジー
![Topology(DHCP)2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/40eddd43-b392-5794-640c-9fb4c12249bc.png)
- 両端のPC1とR4（ルーター）とが同一セグメント（ネットワーク：10.0.0.0/24）
- PC1はDHCP Client、R4はDHCP Server
- PC1とR4とは複数のネットワーク（ここではR2-R1-R3）を通じて接続

## 設定
PC1は自明のため省略。

### R2
L2TP（疑似回線）の設定。カプセル化方式（L2TPv3）および対象とする物理I/Fの指定。

```
pseudowire-class test
 encapsulation l2tpv3
 ip local interface FastEthernet0/0
```

カプセル化される物理I/Fには実IPアドレスをアサイン。

```
interface FastEthernet0/0
 ip address 192.168.1.2 255.255.255.0
```

トンネリング対象となる物理I/FにはIPアドレスをアサインせず、上述したL2TP、カプセル化の対向となるIPアドレス、IDなどを指定する。最後のid、"1 2"と指定しているが、対向ルーターR3では、"2 1"と指定するようだ。

```
interface FastEthernet0/1
 no ip address
 xconnect 192.168.2.2 1 encapsulation l2tpv3 manual pw-class test
  l2tp id 1 2
```

スタティックルートをカプセル化する物理I/Fに設定。

```
ip route 0.0.0.0 0.0.0.0 FastEthernet0/0
```

### R3
R2とほぼ同じのため、説明省略。

```
pseudowire-class test
 encapsulation l2tpv3
 ip local interface FastEthernet0/0

interface FastEthernet0/0
 ip address 192.168.2.2 255.255.255.0

interface FastEthernet0/1
 no ip address
 xconnect 192.168.1.2 1 encapsulation l2tpv3 manual pw-class test
  l2tp id 2 1

ip route 0.0.0.0 0.0.0.0 FastEthernet0/0
```

### R1
これもほぼ自明。

```
interface FastEthernet0/0
 ip address 192.168.1.1 255.255.255.0

interface FastEthernet0/1
 ip address 192.168.2.1 255.255.255.0
```

### R4
IPアドレスアサイン及びDHCPサーバーの設定。

```
ip dhcp excluded-address 10.0.0.101 10.0.0.254

ip dhcp pool TEST
   network 10.0.0.0 255.255.255.0
   default-router 10.0.0.254 

interface FastEthernet0/0
 ip address 10.0.0.254 255.255.255.0
```

## 検証
### PC1からのDHCPによるIPアドレス取得
PC1とR2とのWiresharkデータ。
![DHCP packetのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/9c38f48e-1d79-3156-38e7-99610823e292.png)
R2とR1とのWiresharkデータ。
![L2TP(DHCP) packetのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/6ac174af-d9c1-2142-b39a-29d03d10609f.png)
L2TPヘッダ直後のデータ（"ff ff ... "）が、PC1からR2へのDHCP Discoverパケットとなっていることがわかる。

### PC1からのR4へのping
PC1とR2とのWiresharkデータ。
![ICMP packetのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/155d8986-2d72-17eb-ad30-fc6eaddb6832.png)
R2とR1とのWiresharkデータ。
![L2TP(ICMP) packetのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/c53ee6c0-37f7-ecd4-0fd2-eaf05d001261.png)
こちらでも、L2TPヘッダ直後のデータ（"c4 04 ... "）が、PC1からR2へのICMP Echo Requestのパケットとなっていることがわかる。

EOF.
初心者が覚えたい変数名の付け方にはこんなものがあります

どうも備忘録職人です。
今回は変数名をテーマにしたいと思います。
僕自身区別もついていないければ、適切に名前を付けられていない自覚があるので記事にしました。
タグにはC#がついていますが、どの言語も共通で使用されていたり、一般的な記法があったりするため、覚えてたいところです。
ということでいきましょうか！

# 変数名の命名ルール
変数名の命名時には大前提として以下のルールを守る必要があります。
これさえ守れればどんな名前を付けてもOK(変数の中身はどんなものなのか分かりやすければ尚良し)
## 使える文字
- aからzの小文字、AからZの大文字
- 0から9の数字
- アンダースコア(_)

## 守るべきルール
- 日本語の文字は使わない
- 数字は変数名の先頭の文字には使えない
- キーワード(予約語)や参照可能なメソッド名、クラス名は使えない(変数名の一部に使うことはできる)

では、以上のルールを守った上で、「記法」というものをご紹介します。

# 変数名の命名方式
記法というものはいくつか種類があり、使う用途や言語によって命名方式が違うようです。
C#での一般的な記法もあるので、まずは記法の種類をリストにしてご紹介します。

| 命名方式 | 例 |
|:-:|:-:|
| ハンガリアン記法  | intNumber  |
| キャメルケース  | outputText  |
| スネークケース  | output_text  |
| パスカル記法  | UserName  |
| 大文字方式  | USERNAME  |

では続いてそれぞれの命名方式についての内容をお伝えします。

## ハンガリアン記法
最初の3文字に接頭辞(プレフィックスと呼ばれるもの)をくっつけてから変数名を付けるパターンですね。
この接頭辞(プレフィックス)ですが、意味としては「わかりやすくするための情報」と覚えておけば良いかと思います。
リストの例だとintNumberですが、int型のintNumberという変数だよという感じでわかりやすいのではないかと…

## キャメルケース
別名:ローワーキャメルケース
複数の単語を繋げて、先頭の単語は小文字、それ以降の単語の頭文字を大文字とする記法です。
適切な変数名かどうかはさておき、例を挙げるとするならば「lowerCamelCase」という感じですね。
キャメルは日本語でラクダを意味するのですが、それぞれの頭文字が大文字になっているため、ラクダのように見えますね。
この記法はC#で一般的な記法の一つとされています。

## スネークケース
単語と単語の間をアンダーバー(_)でつなげる記法です。
アンダーバーで単語がつながっているため、スペースが入っているように見えて読みやすいなと感じます。
こちらもC#では一般的な記法とされています。

## パスカル記法
別名:アッパーキャメルケース
先ほどのローワーキャメルケースとは違い、複数の単語を繋げて全ての単語の頭文字を大文字とする記法です。
例:UpperCamelCase
C#では変数名よりも**クラス名の命名時**に一般的に使用されます。

## 大文字方式
単語の全ての文字を大文字とする記法です。
この記法は定数(プログラミング用語としては「ていすう」と読みます)の命名時に使われます。
定数とはいついかなるときも病める時も値を変えないもののことです。(対する変数は値が目まぐるしく変わったりします)
税率とかってなかなか変わらないので、そういうものを定数として扱います。
定数の大文字方式での記法は、割とどの言語でもあるイメージです。

# 最後に
そんなわけで今回は記法についてご紹介しましたが、もしかしたら企業さんによってはちょっと違うかもしれないです。
同じC#を扱っていても、「弊社はこの記法を使っている！」なんてこともあるかも？
もしかしたらリストに挙げた記法ではないかもしれません。
そんな時は柔軟に対応しましょう。

また、言語によっても記法が違います。
そんな時も柔軟に対応しましょう。

まぁ個人開発が主ならそこまで気にしなくていいのかなと思いますが、覚えておいて損はないかと思います。
チームとして参画された時に重宝しますし。
とは言いましたが、僕は独学なのでその辺は知りません話笑
僕の勝手な推測です笑

ばいばい！
[AndroidStudio]他の人のプロジェクトを開いた時にエラーが出たら

# 概要
他の人から受け取ったプロジェクトをAndroidStudioで開こうとした時、以下のようなエラーが出る事があります。

SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file

![スクリーンショット 2022-03-26 7.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/9d42b9bb-bd03-0f21-0f92-1087b4b6c832.png)


このエラーの解決方法を共有します。
（ファイルの内容を変更しますので、大切なファイルを扱う方はバックアップを取っておくといいかもしれません）

# 本文

プロジェクトフォルダの一番トップにlocal.propertiesファイルがあります（もし無かったら空ファイルを作成してファイル名をlocal.propertiesにして下さい）
このファイルを開くとプロジェクト作成者の環境用の設定が書かれているので、それを全て削除してファイルを保存します。

![スクリーンショット 2022-03-26 7.56.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/e631098c-9373-2603-2616-50b579f60c55.png)

AndroidStudio上でFile > Sync Project with Gradle Filesを選ぶとエラーが消えます！

![スクリーンショット 2022-03-26 8.07.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/bc2b9f7f-490b-27a0-ebee-f557871bd30f.png)
HTMLとWebブラウザ

# HTMLとは?(記述言語)
ハイパーテキストを記述するための言語がHTML(Hyper Text Markup Language)。
HTMLが使えるようになると、webページを作成できるようになる。
マークアップ言語のひとつ。
ハイパーリンクや「ここはタイトル」「ここは段落」など、タグと呼ばれるマークによって表現する。
タグには要素の始まりを表す「開始タグ」と終わりを表す「終了タグ」があり、テキストを挟むように記述する。HTMLで記述された文書やそれに付随する画像をまとめてコンテンツと呼ぶ。
## 主なタグ

https://developer.mozilla.org/ja/docs/Web/HTML/Element

# Webブラウザ(表示プログラム)
ハイパーテキストは、人間がそのまま読むには適していないので、ハイパーテキストを解釈して人間が読みやすい形に変えて表示してくれるのがWebブラウザと呼ばれるプログラム。
Webブラウザの種類によって表示の方法に多少の違いはあるが、HTMLのルールは世界共通。

# 参考
* [イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F-%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%B0%8F%E6%9E%97-%E6%81%AD%E5%B9%B3/dp/4797388811/ref=asc_df_4797388811/?tag=jpgo-22&linkCode=df0&hvadid=295704876452&hvpos=&hvnetw=g&hvrand=15357321002661338070&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009210&hvtargid=pla-526274317363&psc=1&th=1&psc=1)


前職は経理でよくインターネットバンキングを利用していたが、IEしか対応していない機能もあったのを思い出した。今どうなっているのだろう。セキュリティは大丈夫なのだろうか。
文字だけのLinuxを使うときなどWebブラウザのありがたみを感じる。Webブラウザ開発した人すげえ。
OracleVM VirtualBox_Apache設定

# 1. 事前

httpdを起動する。
```ruby
# systemctl start httpd.service
```
ブラウザで「http://IPアドレス」を入力する。
IPアドレスはteratermでCentOSにログインする際のアドレスと同じ。
結果としてはアクセス不可になる。
CentOS上のFirewallが有効になっていることが原因のため、
httpd通信を許可する設定を行っていく必要がある。

# 2.設定変更

```ruby
# firewall-cmd --add-service=http --zone=public --permanent
success
```
Firewall設定を読み込むために再起動を行う。
```
# firewall-cmd --reload
success
```
Firewall設定で、サービス欄にhttpが追加されていることを確認をする。
```
# firewall-cmd --zone=public --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3
  sources:
  services: dhcpv6-client http ssh
  ports:
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:
```
再度ブラウザで「http://IPアドレス」を入力する。
Apatcheのデフォルトページが表示されることを確認する。

# 3.ページを作成する
```
# vi /var/www/html/index.html
<html>
<head>
 <title>Test Page</title>
</head>
 <h1>Hello Apache</h1>
</body>
</html>
```
OracleVM VirtualBox_SSH接続(ホストオンリーアダプター)

# 1.ネットワーク設定の確認
OracleVM VirtualBoxを起動する。[ツール]を選択した状態で[ネットワーク]を選択後、[作成]を選択する→自動でIPアドレスがアサインされる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2528418/91b46bf6-32e3-b0bb-73a7-4901d6d1fabe.png)
作成後、表示される[VirtualBox Host Only Ethernet Adapter]のIPアドレスを確認する。（192.168.56.1)


対象のマシンを選択した状態で[設定]→[ネットワーク]→[アダプター2]を選択する。
```rub
ネットワークアダプターを有効化：チェック
割り当て：ホストオンリーアダプター
名前：選択されたままの内容（VirtualBox Host-Only Ethernet Adapter）
```

CentOSの電源をオンにしターミナルをあげる。
```ruby
$ su - 
# nmtui
```
nmtui:Linuxのネットワークインターフェースを設定する際に使用するコマンド

NetworkManager TUIが起動されるので
→ Edit a connection
→ enp0s3
→ Automatically connet にチェック（スペースキーで入れる）
→ OK（前の画面に戻る）
→ 文字化けしているenp0s3の上のEthernet(***)を選択する
→ Profilenameを「enp0s8」に変更する
→ IPv4Configurationを「Manual」に変更する
→ 右側のShowを選択し、詳細を開く
→ 先ほど設定したホストOSのIpv4を下限、ネットマスクを上限としてIPアドレスを入力する
(192.168.56.2)
→ Addressesにアドレスを入れる
→ AutomaticallyConnectにチェック（スペースキーで入れる）
→前の画面に戻る
→Backでさらに戻る
→Quitを押す

```ruby
# systemctl restart NetworkManager
# systemctl restart network
```

Teratermを起動する
ホストは設定したホストOSのIPv4アドレスを記入する
ポートは22でOK

# エラー

ホストネットワークインターフェース作成時に下記のエラーが出力。
```
ホストネットワークインターフェースの作成に失敗しました。

Assertion failed: [!aInterfaceName.isEmpty()] at 'F:\tinderbox\win-6.1\src\VBox\Main\src-server\HostNetworkInterfaceImpl.cpp' (76) in long __cdecl HostNetworkInterface::init(class com::Utf8Str,class com::Utf8Str,class com::Guid,enum __MIDL___MIDL_itf_VirtualBox_0000_0000_0046).

Please contact the product vendor!.

終了コード : E_FAIL (0x80004005)
コンポーネント: HostNetworkInterfaceWrap
インターフェース: IHostNetworkInterface {455f8c45-44a0-a470-ba20-27890b96dba9}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2528418/7331061d-3cb9-f2d1-2ea7-76494360cf3e.png)



## 実施したこと
##### ・virtualboxの再インストール⇒失敗
##### ・CLIからホストネットワークインターフェースの作成⇒失敗
```
C:\Users\[username]>cd C:\Program Files (x86)\Oracle\VirtualBox

C:\Program Files (x86)\Oracle\VirtualBox>
C:\Program Files (x86)\Oracle\VirtualBox>
C:\Program Files (x86)\Oracle\VirtualBox>VBoxManage.exe hostonlyif create
0%...
Progress state: E_INVALIDARG
VBoxManage.exe: error: Failed to create the host-only adapter
VBoxManage.exe: error: Assertion failed: [!aInterfaceName.isEmpty()] at 'F:\tinderbox\win-6.1\src\VBox\Main\src-server\HostNetworkInterfaceImpl.cpp' (76) in long __cdecl HostNetworkInterface::init(class com::Utf8Str,class com::Utf8Str,class com::Guid,enum __MIDL___MIDL_itf_VirtualBox_0000_0000_0046).
VBoxManage.exe: error: Please contact the product vendor!
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface
VBoxManage.exe: error: Context: "enum RTEXITCODE __cdecl handleCreate(struct HandlerArg *)" at line 95 of file VBoxManageHostonly.cpp

C:\Program Files (x86)\Oracle\VirtualBox>
```
◆所感
・virtualbox自体のエラーに見える（仮想ディスク起因ではない）
・
ユーザーにレビューの評価を懇願する文章例 ~Chrome拡張 FireShot~

# 例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/5452e016-cc3e-cc08-dd40-5d596c813db6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/69a8d4e0-3fbb-4c15-d21e-efb0c4ac5805.png)

# リンク先はChromeStore

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/f6e3c979-1167-b0e0-c480-7dbf78a7cc9c.png)











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
〜WebサイトこんなUIは嫌だ〜 商品説明がどこにも無いと思ったらタブで隠されている (ららぽーと公式通販サイト / 三井ショッピングパーク)

1分探したわ！！！

商品説明はユーザーにとって最も重要な情報。
最重要な情報を分かりづらいUIで隠すな！！！！

Amazonでは最も目立つ位置に表示させているぞ。

ららぽーと公式通販サイト / 三井ショッピングパーク さん聞こえてますか！
(サイトのロゴとtitleタグのサービス名が違うけどどっちなの？？)


# 選択前

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/20e7c0e3-12e0-1b9f-b0c3-24c19a7ec8ec.png)


# 選択後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/c2f73c8d-9e38-b83c-6aa4-6502ab43dc7e.png)


# 全体

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/30a6f158-db2d-df80-917a-1fa1ef670d46.png)



# URL

https://mitsui-shopping-park.com/ec/p/1420200004383?ef_id=Cj0KCQjw0PWRBhDKARIsAPKHFGg1JsE1UTXS_7jEIYmClnZUeQaJ6spBh3J5vzT5A5e49XKeo2vkaRIaAhnKEALw_wcB:G:s&utm_medium=listing&utm_source=google&utm_campaign=ssc&utm_term=op201904&gclid=Cj0KCQjw0PWRBhDKARIsAPKHFGg1JsE1UTXS_7jEIYmClnZUeQaJ6spBh3J5vzT5A5e49XKeo2vkaRIaAhnKEALw_wcB











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
「第一回プログラミング教育について話し合う会」をながら視聴したので、その資料など

https://opt.connpass.com/event/240392/

「第一回プログラミング教育について話し合う会」をながら視聴状態ながら視聴したので、その資料集です。


## まとめ
https://togetter.com/li/1863710

### マンツーマンプログラミング教育をやってみての知見

https://docs.google.com/presentation/d/1s_-YnHeYISLtZvmrspyxGdCuDLYf0NKOnrCtYeHTusE/edit#slide=id.p

### 玩具じゃなくて本物で教えよう

https://twitter.com/masuda220/status/1507164627561447529?s=20&t=y1CeVI8v94I45H--FiQYXw

<script async class="speakerdeck-embed" data-id="04c067d01ae44db8b5b30d9301afbfbc" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

### 鯛焼きの是非 その限界について

https://twitter.com/hyperkinoko/status/1507281238478159873?s=20&t=CiBZJzzfn0fQLBrfzxWU_Q

<script async class="speakerdeck-embed" data-id="2dd772d96f3042dcacf885a12cd5e5bc" data-ratio="1.77725118483412" src="//speakerdeck.com/assets/embed.js"></script>

### 意識的な学習につながる仕掛けのつくり方

https://twitter.com/mohirara/status/1507326974410498048?s=20&t=LLeDU0i7CejKEYz50eXc_w

https://docs.google.com/presentation/d/1qaNofECrbB9v4weKYLcwVeiQ4erAn7sgLv6n2TrE-oQ/edit

#### 紹介されているもの

https://www.nytimes.com/games/wordle/index.html

https://typingland.higopage.com/jp.html

https://www.amazon.co.jp/dp/4946553193/

![](https://images-na.ssl-images-amazon.com/images/I/41DR9S69NZL._SX339_BO1,204,203,200_.jpg)

https://www.kb-kentei.net/



### 非情報系大学生を対象としたプログラミング関連授業の円滑な実施とそれを支える技術

<iframe src="//www.slideshare.net/slideshow/embed_code/key/2nHmmAU6293SfG" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/TakeshiKojima4/ss-251284075" title="非情報系大学生を対象としたプログラミング関連授業の円滑な実施とそれを支える技術" target="_blank">非情報系大学生を対象としたプログラミング関連授業の円滑な実施とそれを支える技術</a> </strong> from <strong><a href="//www.slideshare.net/TakeshiKojima4" target="_blank">TakeshiKojima4</a></strong> </div>

### 情報オリンピック（JOI）の事業の一環で、中高生にC++を教えてきた話

https://twitter.com/TumoiYorozu/status/1507330694967873536?s=20&t=LLeDU0i7CejKEYz50eXc_w

### 教える側が知らないプログラミングの３つのこと

https://twitter.com/kis/status/1507575247607767040?s=20&t=SMNQYNDn9OGq4o2P8pEnVQ

<script async class="speakerdeck-embed" data-id="9f3c65c35f564ab79435de22c7f1481c" data-ratio="1.77849462365591" src="//speakerdeck.com/assets/embed.js"></script>

### 初めてエンジニアインターンの育成に取り組んで考えたこと

https://twitter.com/Meijin_garden/status/1507335191127560200?s=20&t=S_KfghsRALA5sGkCjaYHtQ

<script async class="speakerdeck-embed" data-id="67b9250268f0484dab0d5e122acb437d" data-ratio="1.77725118483412" src="//speakerdeck.com/assets/embed.js"></script>

### 小学校でのよりよいプログラミング授業の形態とは？ 

https://docs.google.com/presentation/d/16ryaWObodB9p2RVfzMtsWf70BypMLIHKvL2j4Rj7aEE/edit#slide=id.p

## 感想

いきなり何の話をするんだと言われそうだが

https://www.famitsu.com/news/202203/25255891.html

私はWordleが最近のヒントだと思っている。

- ルールは簡単
- 語彙力無いなりに工夫して挑戦できる
- 毎日やってしまう
- 結果をシェアすることの中毒性

で、そのゲーム性と教育ってもはや組み合わせとして普通なのだよなという感想です。
家の都合で集中して聴けなかったので資料をちゃんと読み直したい... 


以上です～
【Docker】docker-compose.ymlのvolumesのlong syntaxとshort syntaxの違い

## はじめに
　本記事は、プログラミング初学者、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## docker-compose.ymlのvolumesのlong syntaxとshort syntaxの違い
### long syntax
```docker-compose.yml
  db:
    image: mysql:8.0.28
    command: --default-authentication-plugin=mysql_native_password && bash -c "chmod +x /docker-entrypoint-initdb.d/00_grant.sh"
    healthcheck:
      test: mysqladmin ping -h db -u$${MYSQL_USER} -p$${MYSQL_PASSWORD}
      interval: 1s
    restart: on-failure
    volumes:
      - mysql_data:/var/lib/mysql
      - type: bind
        source: ${MY_CNF_PATH}
        target: /etc/mysql/conf.d/my.cnf
      - type: bind
        source: ${INITDB_PATH}
        target: /docker-entrypoint-initdb.d

```
起動時にホストに指定したファイルが存在しない場合にはエラーが発生する。


### short syntax
```docker-compose.yml
 api:
    build: .
    volumes:
      - .:/myapp

````
起動時にホストに指定したファイルが存在しない場合には自動的にファイルが作成される。
Gitのサブコマンド風エイリアスを作成したい

## はじめに
- Gitの各種サブコマンドをショートカットしたコマンドを呼び出したい
 
パッと思いつくのはailiasでしょうか

```.bashrc
alias gitco = "git commit"
```
ただ、`git co`のようなエイリアスはサブコマンドとして処理されてしまうためできません

## 解決法

> git-hogeというファイル名で作成した、スクリプトのパスを通しておくとgit hogeで実行してくれます

例えば

```~/.bin/git-co
#!/bin/bash
git commit $@

# $@で このコマンドが呼び出されたときの引数をすべて取得できます
```
作成したらbashなどのシェルで実行権限との付与とパスを通します
```shell
$ chmod +u ~/.bin/git-co
$ export PATH="$PATH:$HOME/.bin/"
```
これで`git co`を`git checkout`のエイリアスとして実行できます。

### Tips
git-hogeはシェルスクリプトとして書けるのでシバンをPythonといったインタプリタに指定して記述できます！


## もっとエレガントな解決法
Gitはaliasを組む機能があるので[^1]単純なエイリアスを組みたい場合
```Shell
$ git config --global alias.co checkout
```
これで完結します。(オチ)

## 参考文献
[^1]:https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-Git-%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9
粗い同一視 ~粗幾何学の初歩の初歩~

　位相幾何では連続変形に対して不変であるような空間の "細かい" 構造に着目しますが、粗幾何では逆に "粗い" 構造を考えます。どれくらい粗いかというと、$\mathbb{Z}$ と $\mathbb{R}$ ってどちらも遠くから眺めると直線っぽくない？ ってくらいの同一視をするほどの粗さです。位相的に見ればこれらのふたつは "詰まり具合" が全然違うものなのですが、点同士が離れているといっても高々有限くらいだろうと考えるとなんとなく同一視できそうな気もしてきますね。

# 粗同値と位相同型
　具体的にどうやって同値関係を定めるのか見ていきましょう。距離空間から距離空間への写像 $f:X\rightarrow Y$ が**粗同値写像**であるとは、$f$ が粗写像であって、

```math
\left\{ \
\begin{align}
g\circ f &\simeq_c {id_X} \\
f\circ g &\simeq_c {id_Y}
\end{align}
\right.

```

が成り立つような粗写像 $g:Y\rightarrow X$ が存在することをいいます。$id$ は恒等写像を意味します。粗同値写像が存在するような距離空間は**粗同値**であるといいます。このことをとりあえずここでは $X \cong_C Y $ と表すことにしましょう。
　未定義の言葉と記号が出てきていますが、この説明は少し後に回して、比較的馴染み深い位相同型について復習してみましょう。位相空間から位相空間への写像 $f:X\rightarrow Y$ が**位相同型写像**であるとは、$f$ が連続写像であって、

```math
\left\{ \
\begin{align}
g\circ f &= {id_X} \\
f\circ g &= {id_Y}
\end{align}
\right.

```

が成り立つような連続写像 $g:Y\rightarrow X$ が存在することをいいます。位相同型写像が存在するような位相空間は**位相同型**であるといい、このことは $X \cong Y$ と表されます。比較してみると大体同じ定義であることがわかります。粗同値の定義で違うのは距離の入った空間を考えることと、連続写像のかわりに粗写像を考えていることと、$=$ が $\simeq_c$ に緩められていることです。

# 粗写像と一様連続写像
　粗同値が位相同型に似た概念であることは感じ取ってもらえたかと思います。ここで先ほどの未定義語たちを拾っておきましょう。
　距離空間上の写像 $f_1, f_2: X\rightarrow Y$ に対してある定数 $C>0$ を選べば任意の $x \in X$ に対し $$d_Y\left(f_1\left(x\right),f_2\left(x\right)\right) < C$$
とおさえられるとき $f_1, f_2$ は**近い**といいます。ここではこのことを $f_1 \simeq_c f_2$ で表すことにします。
　距離空間上の写像 $f:X\rightarrow Y$ が**粗写像**であるとは、ボルノロガスかつプロパーであることをいいます。$f$ が**ボルノロガス**であるとは、任意の $\delta > 0$ に対してある $\varepsilon_\delta > 0$ が選べて、任意の $x_1, x_2 \in X$ に対して
$$ d_X\left(x_1, x_2\right) \leq \delta \Longrightarrow d_Y\left(f\left(x_1\right), f\left(x_2\right)\right) \leq \varepsilon_\delta$$
が成り立つことをいいます。要は「写った先で距離が離れすぎない」ということです。$f$ が**プロパー**であるとは、有界集合 $B \subset Y$ の $f$ による逆像 $f^{-1}\left(B\right)$ が有界集合 であることをいいます。
　これらの条件は既に知っているような概念の定義に似ています。開集合の連続写像による逆像は開集合ですし、ボルノロガスは一様連続と似ています。**一様連続写像**は任意の $\varepsilon > 0$ に対してある $\delta_\varepsilon > 0$ が選べて、任意の $x_1, x_2 \in X$ に対して
$$ d_X\left(x_1, x_2\right) \leq \delta_\varepsilon \Longrightarrow d_Y\left(f\left(x_1\right), f\left(x_2\right)\right) \leq \varepsilon$$
が成り立つことをいいます。$f$ で写る前と写った先での点の距離 $\delta, \varepsilon$ の依存関係が逆になっています。

# ℤ と ℝ の粗同値性
　これまでに見た定義で $\mathbb{Z}$ と $\mathbb{R}$ が同一視できるか確認してみましょう。写像 $f:\mathbb{Z}\rightarrow \mathbb{R}$ を $f\left(x\right) = x$ とすれば、これは明らかにボルノロガスかつプロパーです。また、$g: \mathbb{R}\rightarrow\mathbb{Z}$ を「受け取った実数の整数部分を返す写像」とすれば、$g\circ f$ と $f \circ g$ はどちらも恒等写像といつでも $1$ 未満の差しかないため、近くなります。よって、$\mathbb{Z} \cong_C \mathbb{R}$ であることがわかります。$1$ 次元に限らず $n \geq 2$ で $\mathbb{Z}^n$ と $\mathbb{R}^n$ も同一視できることが同様にわかります。



# 参考文献
- [深谷友宏, 粗幾何学入門. サイエンス社, 2019.](https://www.saiensu.co.jp/search/?isbn=978-4-7819-1459-6&y=2019)

# 修正履歴
2022.6.24 訳語の間違いを修正。
「YMM4」台本機能を使うと音声・テキストファイル同時読み込みができないのをPYTHONで何とかする。


:::note warn
この問題は修正されました。
v4.7.0.0 にて「台本ファイル読み込み時、カスタムボイスの字幕が読み込まれない問題を修正」が行われたため
必要なくなりました！やったね！！
:::
# 便利なゆっくりMovieMaker4のちょっとした「落とし穴」
動画を作るのに、ゆっくりMovieMaker4の台本機能を使わせてもらってるのですが。
ちょっとした不便が生じるようになってしまいました。

# 音声付属のセリフテキストを読み込んでくれない...

例えばこういう状況の時...

```dir : ./example
example ┳ Voice ┳ hoge.wav
        ┃       ┗ hoge.txt
        ┗ hoge.csv
```

```hoge.txt
ほげに効く薬 
```

```hoge.csv
hoge,./example/Voice/hoge.wav
```

今まで台本機能からhoge.csvを読み込みタイムラインに追加すると

音声ファイルのパス(./example/Voice/hoge.wav)を検出
↓
./example/Voice/hoge.txt の有無を確認( 無ければパス名を表示 )
↓
./example/Voice/hoge.txt から、テキストデータ「ほげに効く薬」を取得。
↓
「ほげに効く薬」をセリフとして設定( 発音欄は ./example/Voice/hoge.wav のままで音声を読み込む )

という処理が行われていたのですが。
この機能そのものがなくなったか、あるいは不具合なのか、
パスをそのままセリフ欄に表示するようになってしまいました。

![StyleCapture_2022-03-25_22-27-06_935.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605736/847e4b0e-55e9-8ca7-d187-7269f68ec7ba.png)


# ゆっくりMovieMakerプロジェクトファイル(.ymmp)を弄って不具合を解消する。

そこでPythonコードを使い、この処理の代用を行う仕組みを考えました。

台本をタイムラインに読み込んだ状態で.ymmpファイルを出力しておき。
この.ymmpファイルに手を加えます。

標準のpythonモジュールの他に chardet urllib3 のモジュールが必要なので、
pythonコードを使う前にインストールしておいてください。

```console : console
-m pip install chardet
-m pip install urllib3 
```

```purge.py
import re
import os
from chardet import detect
import urllib

fromPath = "C://xxx/???.ymmp" #ここに「変換したいファイルの絶対パス」を入力する。
toPath = "./result.ymmp" #ここに「出力先ファイル」の 絶対パス|相対パス を入力する

NG = {
    "enc":[ #誤判定しそうなエンコードを置き換える
        [
            ["MacCyrillic","Windows-1252"]
        ],
        [
            "Shift_JIS"
        ]
    ]
}

#################################################################
#################################################################

fp = open(fromPath,mode="r",encoding='utf_8_sig')
data = fp.read()
fp.close()
Serif = re.findall(r'"Serif": ".*.wav"',data)
Hatsuon = re.findall(r'"Hatsuon": ".*.wav"',data)
for i in Serif:
    tamp = i.replace('"Serif": ','"Hatsuon": ')
    if tamp in Hatsuon:
        m = re.search(r'[^"][A-Z:].*.wav',tamp)
        path = m.group()
        t_path = path.replace(".wav",".txt")
        if os.path.isfile(t_path):
            text = False
            with open(t_path,mode="rb") as fp:
                e = fp.read()
                enc = detect(e)
                if(enc['encoding'] in NG["enc"][0][0]):
                    enc['encoding'] = NG["enc"][1][0]
                with open(t_path,mode="r",encoding=enc['encoding']) as fp:
                    text = fp.read()
            if text != False:
                text = text.strip()
                text = i.replace(path,text)
                data = data.replace(i,text)
            print(text,enc)
fp = open(toPath,mode="w",encoding='utf_8_sig')
fp.write(data)
fp.close()
```

セリフ欄と発音欄が同じ「音声ファイルパス(.wav)」である場合に、同じディレクトリの同じ名前の.txtを読み込んでセリフ欄に適用します。

音声合成サービス毎にテキストファイルの文字エンコードが異なるため。
エンコードを確認してから、再度、テキストを読み込んでいます。
Laravel最低限これだけは押さえたいブレードの共通化方法

自分の勉強メモ用です。

雛形を作っておく

/resources/views/layout/common.blade.php

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>
```

`@yield('title')`や`@yield('content')`のように表示内容を変えたい部分を変数的な感じでyieldを埋めておく

実際に呼び出す側のファイル

/resources/views/index.blade.php

```
// 呼び出す雛形を@extendsで指定する。
// ディレクトリが違うのは「.」で繋げて指定する
@extends('layout.common')

// 表示内容を変えたい変数部分は@sectionで指定する
@section('title', 'インデックスページ')

@section('content')
    <h1>このページはインデックスページです。</h1>
    <p>ダミーダミーダミー</p>
@endsection
```
SQL Server: 本番作業ガイドライン - テーブル作成

# 背景
DBのスキーマを変更する際や、データを大量に更新する際はブロッキングによるタイムアウトエラー多発などの障害が発生しやすいです。
組織によっては専門のチームがスキーマの変更をすべて請け負う体制になっている場合もあると思いますが、各開発者やSREが本番環境にリリースする場合もあるかと思います。

そのようなケースで事故なく本番環境へスキーマ変更等をリリースできるように、ガイドラインを整備したいと思い考えてみました。専門知識を持った人がリリースを請け負うのがDBA的な志向だとすると、誰でも安全にリリースできるような仕組みを整えるのはDBRE的な志向だといえます。

今回はテーブル作成についてまとめました。

# 必須のknowledge
なし

# リスクと問題発生時のサービス影響
なし

# 実施手順
### １．テーブルのCREATE文を実行

# 所要時間
基本的に瞬時に完了します。

# 問題が発生したとき
基本的にこの操作で問題が起きることはありません。

ただし、外部キー制約を同時に作成する場合は、[外部キー制約作成のガイドライン](https://qiita.com/maaaaaaaa/items/42f1ff530012dc08f554)を確認してください。

# 実施後の確認項目
なし

# 注意事項
なし
py2appでアプリを作るとアイコンが踊るときがあるので調査してみた

fileをDockへdropしたときに起動するアプリを作る過程で、アイコンが踊るときと踊らないときがあったので調査してみました。


# 環境
- os: macOS Mojave
- Python: 3.9
- py2app: 0.27

# 結果
```python
# setup.py
OPTIONS["argv_emulation"] = {"argv_emulation": True}
```
というコードをsetup.pyに挿入してdrag and dropを有効にすると、アイコンが踊るの止めることができました。

# 追加調査
生成されたapp folder内のpython fileの以下のコードをコメントアウトするとアイコンが踊りだすことを確認

```python
# ⁨dist/⁨helloworld.app⁩/⁨Contents⁩/⁨Resources⁩/__boot__.py
    while running[0] and now - start < timeout[0]:
        event = ctypes.c_void_p()

        sts = carbon.ReceiveNextEvent(
            1,
            ctypes.byref(eventType),
            start + timeout[0] - now,
            TRUE,
            ctypes.byref(event),
        )

        if sts == eventLoopTimedOutErr:
            break

        elif sts != 0:
            print("argvemulator warning: fetching events failed")
            break

        sts = carbon.AEProcessEvent(event)
        if sts != 0:
        
            print("argvemulator warning: processing events failed")
            break
```
"carbon.ReceiveNextEvent " という関数が原因だと思いますが深みにはまりそうだったので調査を打ち切りました。

wiki: Carbon（カーボン）は、Classic Mac OSのToolbox API (Application Programming Interface) をMac OS X用に整理・移植したAPIであり、Classic Mac OS用アプリケーションをMac OS X向けに移植しやすくするために開発された。


# その他
調査に使ったapp生成用file
```python
# helloworld.py
print('hello')
import time
time.sleep(4)
print('end')
```
```python
# setup.py
from setuptools import setup

APP = ['helloworld.py']
DATA_FILES = []
OPTIONS = {}
OPTIONS["argv_emulation"] = {"argv_emulation": True}

setup(
    app=APP,
    data_files=DATA_FILES,
    options={'py2app': OPTIONS},
    setup_requires=['py2app'],
)

```

terminal上で実行した生成コマンド
```cd
python setup.py py2app
```

# 備考
システム環境設定>Dock>起動中のアプリケーションをアニメーションで表示 のチェックボックスをOFFにすることでアイコンが踊るのを止めることができるので、ユーザ側で対処することも可能
SQL Server: 本番作業ガイドライン - 外部キー制約作成

# 背景
DBのスキーマを変更する際や、データを大量に更新する際はブロッキングによるタイムアウトエラー多発などの障害が発生しやすいです。
組織によっては専門のチームがスキーマの変更をすべて請け負う体制になっている場合もあると思いますが、各開発者やSREが本番環境にリリースする場合もあるかと思います。

そのようなケースで事故なく本番環境へスキーマ変更等をリリースできるように、ガイドラインを整備したいと思い考えてみました。専門知識を持った人がリリースを請け負うのがDBA的な志向だとすると、誰でも安全にリリースできるような仕組みを整えるのはDBRE的な志向だといえます。

今回は外部キー制約作成についてまとめました。

# 必須のknowledge
[ロック](https://qiita.com/maaaaaaaa/items/38fd95b142b07acf7700)

# リスクと問題発生時のサービス影響
| リスク                 | 問題発生時のサービス影響            | 
|-------------------------|-------------------|
| 対象のテーブルに長時間ロックをかけることでブロッキングを起こしクエリタイムアウト多発につながることがある| 運用中サービス内の一部ページの読み込みがいつまでも終わらず、ユーザーにエラーが返る  |


# 実施手順
### １．外部キーを追加する側のテーブルレコード数を確認

外部キーを追加する側のテーブルレコード数が多ければ多いほど、外部キー制約を作成するクエリの実行時間が長くなります。
その間はSch-Mロックが獲得されるため、該当テーブルへのあらゆるクエリがブロックされます。
したがって、外部キーを追加する側のテーブルは新規テーブルまたはレコード数が十分に少ない（1000レコード未満目安）場合に限って、安全にリリースが可能となります。

レコード数が多い場合テーブルに外部キー制約を作成したい場合は、メンテナンス期間を設けることを検討してください。

### ２．外部キー制約作成クエリの実行
事前にタイムアウトを設定してクエリを実行します。

```sql
set lock_timeout 1000
 
ALTER TABLE [dbo].[table_1] WITH CHECK ADD FOREIGN KEY([column_1]) REFERENCES [dbo].[table_2] ([column_1])
```

タイムアウトした場合は何度実行しても問題ありません。クエリが成功するまで繰り返します。

# 所要時間

```sql
ALTER TABLE [dbo].[table_1] WITH CHECK ADD FOREIGN KEY([column_1])
REFERENCES [dbo].[table_2] ([column_1])
```

の実行速度は、

- REFERENCESに設定しているテーブル（=table_2）のレコード数には依存しない
- 外部キーを追加する側のテーブル（=table_1）のレコード数には依存する
  - 「with check」なので、既存レコードのカラム値が参照先テーブルに存在するかのチェックが走るため。

# 問題が発生したとき
クエリ実行を取り消しましょう。
明示的にトランザクションを開いている場合は必ずrollbackしてトランザクションを終了させます。

# 実施後の確認項目
- アプリケーションのエラーログでエラーが急に多発するようになっていないか確認
- サーバーで現在実行中のクエリリストを確認し、スロークエリが多発していないかを確認

# 注意事項
- トランザクションを明示的に開始（begin tran）した場合は、必ずcommitまたはrollbackさせます。ロックを獲得する時間を最小限に抑えましょう。
- どうしても削除が成功しない場合は[こちら](https://qiita.com/maaaaaaaa/items/4e31220292135f4622d4)の手順を参考に、成功するまでリトライするクエリを実行します。
猫じゃらしを作ろう #2

なんてこった...
Unityのオブジェクトで\#1の跳ね返りができてしまいました。。

# 必要なもの
* Unity Hub ver:3.1.1(多分新しくても問題ないでしょう)
* 猫への愛情
* 遊び心
* C#若干の知識

# 手順
1. [言語を英語に戻す](#言語を英語に戻す)
1. [\#1で実装したUpdateメソッドを削除する](#1で実装したupdateメソッドを削除する)
1. [オブジェクトの準備](#オブジェクトの準備)
1. [壁の設定](#壁の設定)
1. [球の設定](#球の設定)

## 言語を英語に戻す
色々調べているとみんな英語のまま作業してる感じなんですね。
言語を英語に戻しておきます。

## \#1で実装したUpdateメソッドを削除する
前回実装したのはいらない子になります。。

## オブジェクトの準備
下記のような感じにオブジェクトを用意します。

"Wall"と"PlayObject"は"Create Empty"で空のものを作って、前者には2Dの四角形オブジェクトを4つ入れます。
後者には前回作った円オブジェクトを入れます(ドラッグ&ドロップでできます)。
![objects.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/9d18e810-2c76-f29d-6d66-1b83e1652c0b.png)

構成を見てなんとなく察すると思いますが、画面外の判定をするオブジェクトを配置することで、円とそのオブジェクトの衝突を判定する感じですね。
前回は無理やり過ぎました。。（笑）

## 壁の設定
### 配置
まずは4つのオブジェクトの大きさや位置を調整します。
厚さや配置方法は好みですが、私は4隅が重なった配置にしています。
- 縦長の枠
  - Scale X:0.5, Y:11, Z:1
  - 左側のX地点: -9.75
  - 右側のX地点: 9.75
- 横長の枠
  - Scale X:20, Y:0.5, Z:1
  - 下側のY地点: -5.25
  - 上側のY地点: 5.25
私は上記のような設定をしましたが、四角形の枠ができていれば問題ないです。
また、色はデフォルトで白でしたが透過率を上げて透明にしてもよいかもしれません。

![wall_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/892e083a-8fcc-0beb-8ec2-8153e6406c39.png)

### コンポーネント
そしてそれぞれの壁にBoxCollider2Dのコンポーネントをセットします。
これで壁に物理判定ができるようです。
![boxcollider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/4aeca47d-d130-4f10-9b7d-53ffe14a5147.png)

## 球の設定
### コンポーネント追加
さて肝になる部分です。
"跳ね返り"を定義するために、Assetフォルダを右クリックして"Physic Material 2D"というものを選択します。
これが摩擦係数や反発係数を持つ情報なようです。

![create_physicmaterial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/12dab2d7-6612-db4a-c20f-7fae69a70b4a.png)

そしてこれを前回作成した"Rigidbody 2D"のMaterialにセットします(名前は変えた方がいいです)
![rigidbody.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/87f3f9a5-db93-c3f4-a5d3-8deb72da360a.png)

更に！この球にも壁と同じように判定を与える必要があるので、球に"Circle Collider 2D"を追加します。
![circlecollider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/10740bef-79bd-1083-e8f0-184630a5d407.png)

### 動かしてみる
動かすとなんと物理判定があります！！！
が！！跳ね返りませんでした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/01db962d-e882-cd55-ce8a-a90eef05818e.gif" width=50%>

ここでAssetに追加した"physic Material 2D"の設定を変更しましょう。
- Friction: 摩擦係数 → 0 (減衰はいらないので)
- Bounciness: 反発係数 → 1 (元の速度を維持したまま跳ね返してもらいます)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/4f287574-3faa-f938-8193-4d26f410b27d.gif" width=50%>

これで跳ね返りました！！


物理的な計算はオブジェクトを使えないか考えることが大事そうですね。
Unity素人でスミマセン！！
お詫びに画面で遊ぶ猫を。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/2e1d66ed-3d22-08e8-5386-62c35f8d8dc3.jpeg" width=50%>

## 追記
なんとなんと、"Dynamic Sprite"オブジェクトを追加することで、"Circle Collider 2D", "Ridgidbody 2D"コンポーネントを適用したCircleオブジェクトが生成できました。
やっぱりよく使われるものはあるんですね～
![dynamicsprite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478155/4ff8cd69-214b-eefa-20f1-4d5a06e4a3e3.png)

← PREV: [ゴリ押しで球を反射させてみた(素人)](https://qiita.com/tosix13/items/5342c0ec0b466ac7f31f)
exchangeratesapi.io APIから為替の全レートを取得する

# はじめに
@itTkmさんの

https://qiita.com/itTkm/items/bdf2d1ac51a8ebf58aa4

[@ittkm/exchangeratesapi](https://www.npmjs.com/package/@ittkm/exchangeratesapi)を使用してフリープラン(リクエスト上限 1000/月)で取得します。

> What is an API Request?
>>Pricing is based on the number of monthly API Requests offered for each individual Subscription Plan. Accessing any type of exchangeratesapi.io forex data using a valid API Access Key counts as one "API Request". Unlike most other providers, any API Endpoint or feature requested (including Time-Frame & Currency-Change Queries, as well as requesting multiple currencies at once) counts as only one API Request.

[Frequently Asked Questions](https://exchangeratesapi.io/faq/)

今回の取得方法の場合、全レートを取得してもリクエストのカウントは1です。

# 全レート取得
**currencyExchange(とutilities)は公開されていない関数**なので[@ittkm/exchangeratesapiリポジトリ](https://github.com/itTkm/exchangeratesapi/blob/main/src/index.ts)からコピペするか、[公開するように修正したフォークリポジトリ](https://github.com/s-n-1-0/exchangeratesapi)からインストールしてください。

```ts
import {exchangeratesapi, IExchangeratesapiResponse, utilities} from "@ittkm/exchangeratesapi";
const {currencyExchange} = utilities;

      // const api = new exchangeratesapi(exchangeratesapiKey);
      // const result:IExchangeratesapiResponse = await api.latest();
      if (result.success) {
        const ratePairs:any = {};
        const rates = result.rates;
        const rateKeys = Object.keys(rates);
        rateKeys.forEach((key)=>{
          const newBase = rates[key];
          rateKeys.forEach((newKey)=>{
            const symbol = rates[newKey];
            ratePairs[key+newKey] = currencyExchange(newBase, symbol);
          });
        });

      console.log(ratePairs); //-> "{"AEDAED":1,"AEDAFN":23.927648,"AEDALL":30.172867,"AEDAMD":133.105265,"AEDANG":0.490964,"AEDAOA":124.060"...
    }
```

クロスレートでexchangeratesapi.ioから取得した通貨同士のレートを求めています。
ウクライナ侵攻に伴うサイバー攻撃関連ニュースをまとめてみる

ウクライナ 各省庁のウェブサイトがハッキングされ閲覧不能に
2022年1月14日
https://www3.nhk.or.jp/news/html/20220114/k10013431701000.html
<br />
<br />
ウクライナ政府のサイトがダウン、前日にも複数のサイバー攻撃
2022.02.24
https://www.cnn.co.jp/tech/35183942.html
<br />
<br />
ランサムウェア集団「Lockbit 2.0」、ロシアのウクライナ侵攻に関与しないと声明　「無害な仕事から得る金銭にしか興味がない」
2022年02月28日
https://www.itmedia.co.jp/news/articles/2202/28/news175.html
<br />
<br />
ハッカー集団がＳＮＳで誤情報活動、ウクライナ軍高官ら標的
2022年2月28日
https://jp.reuters.com/article/ukraine-crisis-meta-platforms-idJPKBN2KX0G4
<br />
<br />
ウクライナがロシアにハッキングで対抗する「IT部隊」を募集し反撃、テックリーダーにも参加を呼びかけ
2022年2月28日
https://jp.techcrunch.com/2022/02/28/2022-02-27-ukraine-takes-the-resistance-to-cyberspace-assembling-an-it-army-to-hack-sites-from-russia-and-its-allies-calls-on-tech-leaders-to-get-involved/
ウクライナ政府　SNS　「IT Army of Ukraine」
https://twitter.com/itarmyua
<br />
<br />
ロシアのウクライナ侵攻支持を宣言したContiランサムウェアグループの内部チャットがネットに流出
2022年3月01日 
https://jp.techcrunch.com/2022/03/01/2022-02-28-conti-ransomware-chats-leaked/
<br />
<br />
サイバー攻撃25倍に増加　ウクライナ侵攻からリスク高まる
[2022/03/04 11:47]
https://news.tv-asahi.co.jp/news_economy/articles/000246803.html
<br />
<br />
｢ウクライナは実験場｣露サイバー攻撃の真の怖さ過去には電力会社への攻撃で大規模停電も
2022/03/06
https://toyokeizai.net/articles/-/536240
<br />
<br />
「アノニマス」ロシアで国営放送などにハッキング　ウクライナの映像流す
[2022/03/08 07:05]
https://news.tv-asahi.co.jp/news_international/articles/000247203.html
<br />
<br />
ウクライナ侵攻のフェイクニュースを確認できるウェブサイトが登場
世界数十カ国から120ものファクトチェック機関が参加
2022年3月15日
https://www.timeout.jp/tokyo/ja/news/ukrainefacts-org-031522わあたいわ
<br />
<br />
ディープフェイク悪用“ゼレンスキー大統領”が国民に降伏呼びかけるニセ動画 見分ける自信ありますか？
2022年3月18日
https://www.fnn.jp/articles/-/333829
<br />
<br />
2、3月企業へサイバー攻撃急増　ウクライナ侵攻後
2022/3/20
https://nordot.app/878168315733245952
<br />
<br />
アノニマス「ロシア中銀をハッキング」　内部文書の公開を予告
2022/3/24
https://mainichi.jp/articles/20220324/k00/00m/030/353000c
https://twitter.com/YourAnonTV/status/1506769001040551937
基本情報技術者試験対策　15日目

基本情報技術者試験勉強　15日目
-
この記事の目的
-
今年の5月に基本情報技術者試験を合格するために、過去問で間違えた箇所をただまとめる自分のための記事

プロフィール
-
・文系大学の３年生
・ITパスポートは保有
・ウェブアプリやサイト作成を個人で行ったことがある程度
・猫好き

間違った箇所
-
①実効アクセス時間の求め方
(キャッシュメモリのアクセス時間×ヒット率)＋主記憶のアクセス時間×(1－ヒット率)
例: キャッシュアクセス時間（10ナノ秒)、主記憶のアクセス時間（60ナノ秒)、ヒット率(0.9)
(10 × 0.9) + 60 × (1-0.9) = 9 + 6 = 15


②直接アドレス指定
アドレス部の値をそのまま有効アドレスとする。
間接アドレス指定
アドレス部の値で主記憶上のアドレスを指定し、そのアドレスに格納されている値を有効アドレスとする。
指標アドレス指定
アドレス部の値にインデックスレジスタの値を加えたものを有効アドレスとする。
基底アドレス指定
アドレス部の値にベースレジスタの値を加えたものを有効アドレスとする。
相対アドレス指定
アドレス部の値にプログラムカウンタの値を加えたものを有効アドレスとする。
即値アドレス指定
アドレス部の値を有効アドレスではなく、そのまま演算対象データとする。

③動的リンクライブラリ
アプリケーションの実行中，必要になったときにOSによって連係される

④フールプルーフ
アプリケーションを間違って終了してもデータを失わないように，アプリケーション側の機能で編集中のデータのコピーを常に記憶媒体に保存

⑤フォールトアボイダンス
一部機能の障害によってシステムが停止しないよう，ハードウェアやソフトウェアを十分に検証し，信頼性の高いものだけでシステムを構成す

⑥静的積算法
プログラムを実際には実行せずに，机上でシステムの処理を解析して，個々の命令の出現回数や実行回数の予測値から処理時間を推定し，性能を評価する

⑦ステークホルダアナリシス
システム開発で上流工程における要求分析の精度と質を向上させるために行われるステークホルダに対する分析手法

⑧TLB(Translation Lookaside Buffer
仮想記憶のアドレス変換を高速に行う

⑨メモリ管理ユニット
仮想記憶のページング処理を高速に行う

⑩サラミ法
不正行為が表面化しない程度に，多数の資産から少しずつ詐取する方法


>引用
基本情報技術者試験ドットコム
https://www.fe-siken.com
知っていると便利なLinuxコマンド

# 概要
インフラエンジニアからWebエンジニアに変わってからあまりシェルを叩くことも少なくなってきました。
しかし、たまにLinux上で作業することもあるので、備忘録として知ってたら便利そうなコマンド類をまとめておきます。

※必要そうな内容は気づいた時点で追記していきます。
vimコマンドやシェルスクリプトについては別記事として載せるかこの記事内でまとめるか検討中です。

# コマンドオプション
who
w
現在ログインしているユーザを確認

rpm -ivh
-i パッケージのインストール
-v 詳細な情報を表示する
-h 進行状況を「#」で表示する

rpm -qa
-q パッケージ名　指定したパッケージがインストールされているか照会する
-a インストール済みのすべてのパッケージを表示する

history
!番号　でhistoryに表示されている番号のコマンドを実行
!!    直前に実行したコマンドを再実行する
!?文字列    指定した文字列を含むコマンドを実行する
history | grep '検索文字列'　実行したコマンドを検索する

ls
-l    詳細情報を表示
-t    日付順に表示
-r    並びを反転

cp
-f    同名ファイルがあれば上書き
-i    上書きするかどうか確認する
-p    コピー元ファイルの属性(所有者、所有グループ、アクセス権、タイムスタンプ)含めてコピー
-r    ディレクトリ内を再帰的にコピー

rm
-f    確認なし
-i    確認有り
-r    サブディレクトリ含めて削除

rmdir    空のディレクトリを削除
-p    複数階層の空ディレクトリ削除

nohup
SSHセッションを閉じても中断されずに最後まで実行してくれる

# ショートカット
Ctrl + D カーソルの1文字削除
Ctrl + H カーソル左の1文字削除
Ctrl + L  画面クリア
Ctrl + Z  処理を一時停止
Ctrl + S  画面への出力を停止する
Ctrl + Q  画面への出力を再開する

# コマンド連結
;    どんなときも次の処理に移る
&&    前が成功したときだけ
||    前が失敗したときだけ

例）
(date; pwd; ll) > result.log    複数コマンドの結果をファイル出力

# 現場の所感
* lsよりもllコマンドを使う人のほうが多い
* more、less、viewだとviewコマンド使う人のほうが多い
* バッチ処理でシェルスクリプト作るなら手続き型よりオプション型のほうがnohupなどでまわせるので便利
HTML+CSSでタコピーを書いてみたっぴ

つい先日完結した「タコピーの原罪」という漫画に出てくるタコピーという癒しのマスコットキャラクターをHTML+CSSで描いてみました　🐙

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwypwgP" data-user="tamanugi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/tamanugi/pen/VwypwgP">
  happy-octopus</a> by tamanugi (<a href="https://codepen.io/tamanugi">@tamanugi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


構成要素はシンプルなので、基本　`border-radius` で丸を作って組み合わせただけになります
`box-shadow` などを使ってもうちょっと立体感出せたらもっとはっぴーになるかなと思いましたがCSS力が足りずに断念しました・・・ 

「こうすればもうちょっと上手にかけるっぴ!」というコメントいただけたら嬉しいです！

## 参考にした記事とか

https://qiita.com/nezurika/items/47d2ffed4212bbab99f0
[vue]github pagesで表示されない

github pagesでvueプロジェクトを公開した際、なぜか真っ白なページになっていたのでその解決法を書く。

# 原因
jsなどassetsファイルへのパスが間違っている。

公開されるパス:
https://\<gitアカウント名\>.github.io/\<プロジェクト名\>/

一方build後のindex.htmlはjsの読み込みを絶対パスで表記しているのでファイルが読み込めない。

期待しているパス:
https://\<gitアカウント名\>.github.io/

```index.html
<script src="/js/chunk-vendors.a3f55a0f.js"></script>
```

# 解決法
相対パスに直せば良い。

vue.config.jsに書けばbuild時に相対パスで出力してくれる。
```vue.config.js
module.exports = defineConfig({
  // ...
  assetsDir: './',
  publicPath: './',
})
```

```index.html
<script src="js/chunk-vendors.a3f55a0f.js"></script>
```

ちなみにgithub pagesへの公開は
npm の [gh-pages](https://www.npmjs.com/package/gh-pages)を使うと楽だった

# 参考
https://www.shookuro.com/entry/2019/02/02/174655
いつまでも，古いママやってんじゃねえよって話(1)

https://qiita.com/yatra9/items/a4b58020ebf478b87a1e

ここに書くのも，それでも，Julia 1.7.2 での話。そのうち古くなる。

# 2. バージョンと詳細な環境を表示する

```Julia
println(VERSION)
versioninfo(true)
```

前者はよい。

```Julia
VERSION
v"1.7.2"
```

後者は， versioninfo() の引数はキーワード引数になった。verbose=true，省略されたときは verbose=false と同じ。

```Julia
versioninfo(verbose=true)

Julia Version 1.7.2
Commit bf53498635 (2022-02-06 15:21 UTC)
Platform Info:
  OS: macOS (arm64-apple-darwin21.2.0)
  uname: Darwin 21.4.0 Darwin Kernel Version 21.4.0: Fri Mar 18 00:47:26 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T8101 x86_64 i386
  CPU: Apple M1: 
              speed         user         nice          sys         idle          irq
       #1    24 MHz      36148 s          0 s      19309 s     126707 s          0 s
       #2    24 MHz      34748 s          0 s      18261 s     129146 s          0 s
       #3    24 MHz      31810 s          0 s      16147 s     134198 s          0 s
       #4    24 MHz      29373 s          0 s      14668 s     138114 s          0 s
       #5    24 MHz       2626 s          0 s       1167 s     178362 s          0 s
       #6    24 MHz       1472 s          0 s        611 s     180072 s          0 s
       #7    24 MHz        931 s          0 s        283 s     180941 s          0 s
       #8    24 MHz        704 s          0 s        180 s     181271 s          0 s
       
  Memory: 8.0 GB (102.296875 MB free)
  Uptime: 19901.0 sec
  Load Avg:  2.2998046875  2.15380859375  1.962890625
  WORD_SIZE: 64
  LIBM: libopenlibm
  LLVM: libLLVM-12.0.1 (ORCJIT, cyclone)
Environment:
  JLAB_DESKTOP_HOME = /Users/foo/Desktop/jupyter-lab
  PATH = /Applications/Julia-1.7.app/Contents/Resources/julia/bin:/Users/foo/Library/jupyterlab-desktop/jlab_server/bin:/Users/foo/Library/jupyterlab-desktop/jlab_server/condabin:/Users/foo/miniforge3/bin:/usr/local/opt/qt@5/bin:/Library/Frameworks/Python.framework/Versions/3.10/bin:/Library/Frameworks/Python.framework/Versions/3.9/bin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/TeX/texbin:/opt/X11/bin:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/opt/ImageMagick/bin:/node_modules/.bin:/Applications/JupyterLab.app/Contents/MacOS:/Users/foo/Library/Python/3.8/bin
  XPC_FLAGS = 0x0
  HOME = /Users/foo
```
及び
```JuliA
versioninfo() # default: versioninfo(verbose=false)

Julia Version 1.7.2
Commit bf53498635 (2022-02-06 15:21 UTC)
Platform Info:
  OS: macOS (arm64-apple-darwin21.2.0)
  CPU: Apple M1
  WORD_SIZE: 64
  LIBM: libopenlibm
```