---
title: 姫路IT勉強会 2021.11
langs: ja-jp
---
# 姫路IT系勉強会 2021.11

* 開催日: 2021/11/20 13:15 -
* 司会: fu7mu4さん
* 参加人数: 参加者: 7名(みんなLisperにならないかな)学生 0名
* HackMD: https://hackmd.io/lMp76xL1SWenu-iiV_Cfow
* connpass: https://connpass.com/event/230284/
* ハッシュタグ：[#histudy](https://twitter.com/search?q=%23histudy&src=typd)
* Discord(オンラインミーティング専用)姫路IT系勉強会招待コード: https://discord.gg/rZCeScB
* Discordは無料プランに乗れる人数(10人以内)なので使っています。
* 有料版でも$15/月程度なら払えなくもないですね。
* Discord以外にも色々ありますので、人数が増えたら検討しましょう。

## 今月のニュースまたはネタ

ネタが思いつかない人用に今月のニュースをはじめました。

- [関西オープンフォーラム 2021.11.13](https://www.k-of.jp/2021/) 20周年だそうです。でました?
- [1/29 Open Source Conference 2022 Online/Osaka](https://ospn.connpass.com/event/230246/)
- [VImが30歳](https://gigazine.net/news/20211105-vim-30th-anniversary/) ~~ビルジョイだってもうviは使ってないぞ~~
- [Advent Calender 2021](https://qiita.com/advent-calendar/2021) 書きますか? 読みますか?
- [Excel 関数のプログラミング言語 Power-Fx](https://docs.microsoft.com/ja-jp/power-platform/power-fx/overview) が [オープンソース化](https://memo.tyoshida.me/power-platform/powerapps/microsoft-power-fx-opensource-published/)
- [日本知的財産協会](https://www.jipa.or.jp/)の知財管理誌 11 月号に企業におけるOSSコンプライアンス業務推進に関する考察 という題で投稿しました ~~ただの自慢です。~~
- GoogleCast、スマホ必須かつ設定スマホの位置情報教えろに成り果ててました。[一層Evilになった](https://ja.wikipedia.org/wiki/%E9%82%AA%E6%82%AA%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%AA)印象です
- [KOF2021](https://www.k-of.jp/2021/) 視聴しました!
- ありがとうございます！
- もうじき動画公開します
## 自己紹介
* イモケンピで既に盛り上がりました

## 今日のお題

### [Windows 11](https://www.microsoft.com/ja-jp/windows/windows-11)になりました（かねだ）
- InsiderPreviewのWindowsUpdateが失敗し続け、とうとう有効期限切れになったためクリーンインストール（再インストール扱い）を断行
- 3ヶ月は長いですね。
- サポートの電話があるらしい
- その結果、[WSL2](https://docs.microsoft.com/ja-jp/windows/wsl/install)と[VirtualBox](https://www.virtualbox.org/)が併用できるようになりました（Windows 10の再インストールではできなかった）
- WSL1 も残っているが必要ない
- 様子見 Dockerがちゃんと動くかわからないかな。
- 仮想化周りがどうか
- WSL2 だと Xがつかえる?
- [X Server Microsoft Store ja-JP](https://www.microsoft.com/ja-jp/p/x-server/9npnjfwnl9m0#activetab=pivot:overviewtab)
- フリーのXサーバーの実装はいっぱいあるから売れない?
- [VcXsrv](https://sourceforge.net/projects/vcxsrv/)
- サポートがないと買えない、企業向けか
- ゲーム開発向けか？ 対応OSにXbox/Holo Lensがある
- もう Linux のディストリビューションになったらいい。
- とりあえず、Gitlab を Windowsにインストールする方法はありませんでした。https://www.gitlab.jp/install/
- Android のアプリが動く?などの話
- Android コンテナ上で動くらしいが、実態は [Qemu](https://www.qemu.org/)?
- Android アプリ は Amazon からしかインストールできない?
- インサイダープレビューにて一応Amazonからアプリをインストールする方法自体は[公開](https://forest.watch.impress.co.jp/docs/news/1360146.html)されています
- PWA が マイクロソフトストア から配信できるようになる?
- 先駆けてか不明ですがPWA化してある動画編集・配信アプリが[公開](https://app.clipchamp.com/signup)されています
- Windows は道具であまり深入りしたくない
- Windows2000 はよかった
- Windows98 は毎月再インストールしていた
- Windows からの移行
- Linux は快適
- メインマシンを移行しないと、だめ。サブマシンだけ移行したらだめ
- macOS も同様
- ベンダーロックが多い
- キーボードに慣れるのもちょっと大変
- 移行時に [ansible](https://www.redhat.com/ja/topics/automation/learning-ansible-tutorial) を使いだしたが Windows では動作しなかったから
- 仮想化環境がないと仕事できないので更新できないときがある
- macOSに慣れるまで3ヶ月くらいかかったが、それだけの価値はある
- 慣れたらWindowsにはもう戻りたくない
- [Homebrew](https://brew.sh/index_ja)などもこなれてきているし
- 仮想化?の[msys2](https://www.msys2.org/)は [git bash](https://gitforwindows.org/)の中に生き残っている
- [winget](https://github.com/microsoft/winget-cli)。あ、そういうのもありましたっけ
- [Nuget](https://docs.microsoft.com/ja-jp/nuget/what-is-nuget)は結構前からあるんだから、OSにも入れて欲しかったなあ
- [choco](https://docs.microsoft.com/ja-jp/nuget/what-is-nuget) とか [scoop](https://scoop.sh/) があるのでもういらない子?
- winget アンインストール実装されなかった?
- scoop でインストールしたものを Windows からアンインストールすると scoop にインストール情報が残ってしまう
- mac mini高い。
- でも値上げはしていない。昔から最安モデルは$699で変わってない
- 為替が悪い。昔MacMini買ったときは92-82円だった
### 自宅のProxMoxも７系にアップグレードしました（かねだ）
- 特に何事もなく
- dist upgrade で問題なくアップグレードできてしまった。
- 話題になりませんねぇ
- [FreeBSD](https://www.freebsd.org/ja/) なんてどうですか
- 茨の道です。
- 失礼な。本家本元ですぞ。
- でも情報少ないよね...
- [freebsd handbook](https://docs.freebsd.org/ja/books/handbook/)を読みましょう
- Ports経由のインストールめんどうです。
- make一発ですから簡単です。
- 今はバイナリパッケージもあります。
- 昔は [OpenOffice.org](https://www.freebsd.org/ja/) のビルドにまる一日くらいかかりましたっけ。
- MacもユーザーランドはFreeBSD だから Macユーザーは FreeBSD ユーザーだよ派
- HomebrewでGNU入れています。
- BSD系は(ちょっと)使いにくい...
- ls hoge -alF がエラーになる
- date とかGNUと違いすぎる
- gls みたいに g が先頭につくので alias をつけている
- ちゃんと macOSにも [macports](https://www.macports.org/) という portsシステムはあるよ。

## 休憩. 再開は 15:05 からです。

### サービスの重要データのバックアップはどうしてる? (fu7mu4)
- 上司よりRedmine建てろとの命令が下った
- バックアップどうしましょう?
ｰ ひとしきり上司とはなしたが、どうも話がまとまらない
- 擬似的に事故を起こして、思い知らせてやってはどうか
- Windowsは標準のバックアップツールでNASをバックアップ先に
- サーバは月イチくらいでデータを別のドライブに[rsync](https://wiki.archlinux.jp/index.php/Rsync)。
- ローカルに直近のものをバックアップ
- 古いバックアップを別ストレージに移す
- AWSのオブジェクトストレージで冗長化なら古いものは自動的に削除することもできる
- ライフサイクル設定や権限
- バックアップからリストアできるか検証する
- ハードを分けておく原則
- ムネナガ家はメイン機とNASで分離
- データの重要度とコストで
- 別拠点にバックアップしたりしてます?
- どこまで冗長するかは、データの重要度しだい
- [RAID (Wikipedia)](https://ja.wikipedia.org/wiki/RAID) を バックアップと勘違い
- 某社長さんは苦闘の末にバックアップの重要性を学習
- RAIDにしたから大丈夫 → コントローラーが吹っ飛ぶ
- 外付けのHDDに保存してるから大丈夫 → [ランサムウェア](https://www.ipa.go.jp/security/anshin/ransom_tokusetsu.html)を食らって吹っ飛んだ
- [SharePoint](https://support.microsoft.com/ja-jp/office/sharepoint-%E3%81%A8%E3%81%AF-97b915e6-651b-43b2-827d-fb25777f446f) で世代管理型バックアップ → アカウントを乗っ取られて吹っ飛んだ
- データ消失最大のリスクは人間
- 上司とか古参社員とか、我流を振り回す人が特に危険
- ヒューマンエラー
- どうしたらバックアップが大事だという感覚をもってもらえるのか？
- いっぺんデータを飛ばしてみる
- 逆に延々とデータを捨てられない例も
- 事務仕事で一つのエクセルシートに何年も書き溜めてた
- シートを分けることさえせずに下へ下へと書き足していました
- 一行目が3年前でした
- ライフサイクルを設定すべきでは
- ちゃんとした事務は実は保存期間を決めてて、過ぎたら廃棄
- 経理関係とか法定の保存期間＝社内の保存期間だったりする
- 業務のフローを考えてないからそうなる
- 意識低いIT系もよくやる
- バックアップのライフサイクル
- ストレージも無限じゃない、コストもかかる
- コンプラの関係で外部におけないデータもある
- マイナンバー
- SSHの鍵はUSBメモリにバックアップしています
- 不測の事態はおこる
- いかに復旧できるようにするかを考えて設計しましょう
- Webサービスのバックアップは?
- Slackはアーカイブをダウンロードできます。
- Slackは置き捨てで。フロー情報とストック情報は別に管理しましょう。
- しゃーないから避難訓練するかー
- やはり思い知らせるしかない
- 仕様をきちんと保存する習慣を身につけるのに苦労しました。

### 勉強会公式サイトのSSL発行にCertBotはどうだろう？（ムネナガ）

[Let's Encrypt](https://letsencrypt.org/ja/) のSSL自動発行の仕組み([dehydrated](https://github.com/dehydrated-io/dehydrated))が動作していない。そのためには1と2のどちらか
1. dehyrrated をそのまま採用をつづける
- 読むのに時間がかかりそう。
- → DNS認証のクライアントでこけていることまでがわかっている。
- dehydrated は shell scriptの勉強にいいらしい
2. [Certbot](https://certbot.eff.org/) を採用する。
- http認証、nginx はプラグインが要る
- サーバーを止めずに更新させるためにはプラグインが必要
- python製
- pip からインストールする必要がある。失敗しやすい
- どっちにするかは、まあ好み
- python2系とpython3系の問題がある
- どっちも apt で入る
- [パッケージ検索](https://packages.debian.org/ja/)
- 現状のAnsibleだと [dehydrated](https://dehydrated.io/) -> `lexicon sakuracloud create` や
[server/templates/dehydrated at master · histudy/server](https://github.com/histudy/server/tree/master/templates/dehydrated) で対応しているものがある。
- DNS認証にしないとワイルドカード証明書が取得できない
- ワイルドカード証明はあとでもいいかな?
- ワイルドカードで取っておくとサブドメインが気軽にできる
- 現在のコードはメールサーバでSMTPSに対応させたかったのでDNS認証
- テストサーバにSSL取得＆自動更新が仕込めたらDNSでサーバー切り替えて移行完了。
- そもそも、スタティックなHTMLだけのサイトにSSL要る？ [姫路IT系勉強会 移行ステージングサイト](http://test.histudy.jp/)
- 原理的にはいらないです
- 業務となると必須です
- わざわざ http でいい、という案件はない
- 拡張性がない
- センシティブなデータを格納できない
- 問い合わせフォームが設置できない
- googleformを使うこともできるが、お金貰いにくい案件と
- Google様が「httpsで安全なインターネットを」とおっしゃってますし
- [Chrome 94にて非HTTPSサイトへの警告機能が搭載へ 将来は標準化も検討 - Engadget 日本版](https://japanese.engadget.com/chrome-94-030008391.html?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8&guce_referrer_sig=AQAAAJGRECusHcP0zREdAZZpTIYOl20_CsZaXXgA-_lUA5QRql92F5ALmQWK3lEvUEl_xaEpmReuOJCzOhV6dBEuvRJTY7EiDWv3t_fZyrAgkerjVKpgi66XobUFG9iXHi38GZIEzuG-keJxxX5OPSs7OmsyM8qVpg_qM1y-Ag-25nr0)

- 認証方式
- https認証、サーバー方式はルート直下にファイルを設置してそのファイルの存在確認ををする
- DNS認証はDNSレコードに特定のキーが存在することを確認
- certbot-dns-route53
- https://certbot-dns-route53.readthedocs.io/en/stable/
- lexicon
- コンソールからDNSレコードにごにょごにょしたり、フックを使用したりするもの
- https://github.com/AnalogJ/lexicon

- cron に更新処理をセットする
- 1日１回実行かけるとか
- Let's Encryptの証明書は３ヶ月で切れるけど、切れる前にリクエスト出すのは問題ない
- １日１回ぐらいの発行は余裕
- CertBot なら証明書の残り日数を判定して、実際に発行リクエストかけるか判定してくれます
- ansibleで管理するときは、すべてansible ですること
- *一部処理を手動でするのは禁止*
- 参考
- packageの検索
- debian は https://packages.debian.org で検索できる
- https://packages.debian.org/search?keywords=dehydrated&searchon=names&section=all
- https://packages.debian.org/search?suite=default&section=all&arch=any&searchon=names&keywords=lexicon
- ubuntu は https://packages.ubuntu.com/ja/ から検索できる

### メールが届かない騒ぎに巻き込まれました(さとう、[小ネタ](https://www.kuzuore.com/misc/documents/dqn.html#20211120))
* やったこととか、どうしてるのかとか聞いてみます
- firewall設定が原因だった
- 送信先が原因
- でも送信元にも問題ありそう。TLSとかやってないし
- 送信側の [qmail (Wikipedia)](https://ja.wikipedia.org/wiki/Qmail) は 1998年で開発が終了しているので、採用しないほうがいいのではないか。
- フォークプロジェクトは複数あるようです。[notqmail](https://github.com/notqmail/notqmail)とか
- 送信元のメールログを確認できれば、もう少し解決の役にたったかも
- 伝言ゲームで、担当者にまともに伝わらなかったのでは
- さとう → 送信元ユーザ → 客先担当者(何段か) → オペレーター の可能性
- ちょっと大きな組織だとありがち
- 原因調査のためにメールヘッダーを先方に要求できていればよかったかも
- エラーメールをeml形式にして、添付してもらうべきではありました
- メールやめたい
- SPAM などが多いのでメールをおくりたくないし受けたくない
- もはやパスワードリセット手段でしかない
- Redmine などの代替方法を使いたい
- [PPAP](https://ja.wikipedia.org/wiki/PPAP_(%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3)) はやめよう。ダメ、絶対
- メールアドレスは個人の識別子としては便利なフォーマット(個人名@家族名みたいな感じ)
- メールを送ると属人的になりやすい
- 複数のメッセージングサービスに跨るプロトコルが標準化実装されれば、SMTPも役割を終えることができるかも
- 現状は程遠いけど
- マイクロソフトは メール認証方式を替るとの話
- [Microsoft Exchange Online/Google Workspaceの基本認証廃止に伴うサイボウズの対応](https://www.cybozuconf.com/-/oauth)
- ブラックリスト入りしてしまうとスパム対策で全く応答を返さないこともある（アドレスの実在判定ができないように）
- 携帯会社が特に多いですがスパム判定したメールのエラーを返さない事が多々
- 相手先ごとに判定ルールを細かく設定している由
- 秒間10セッション投げると駄目！とか、SPF未設定！、DNSの情報と不一致！など
- セッション数とか色々

## 休憩 16:45 から再開します。

### フロントエンドのログ監視がしたい（ふなつ）
- Google Analyticsのイベントとか絡ませたい
- ログの収集から利用方法までをざっくりと話したい
- バックエンドの話もいれてもいいです。
- [syslog (Wikipedia)](https://ja.wikipedia.org/wiki/Syslog) の検知すべきものでも
- このあたりトラッキングのブロック入れてるユーザーも想定
- [シングルページアプリケーション(SPA)](https://e-words.jp/w/%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html)を作ってみたが、現状はログ関係は特にない
ｰ ブラウザ側の状態は、デフォルトだとサーバサイドでは何も分からない
- ログの目的は?
- ログの目的としてはこのようなものがある。
- Google Analytics からするとコンバージョン?
- 機能に対する KPI にすることもある
- 機能の利用率等
- 想定外の操作のバグ検知
- 外部連携サービスの異常の検知
- どこのログを検知したい?
- [シングルページアプリ(SPA)](https://e-words.jp/w/%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html)だと、バックエンドはAPIの使用しかわからない。
- 異常時は例外をスロー
- 適切な例外をお願いします!
- 型が違うなども
- [JavaScriptの例外(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error)
- 例外をキャッチしたときにログに書く
- フレームワークが例外をキャッチできる
- 大本がキャッチできる
- シングルページアプリケーションで例外処理を書くのはよくない?
- ログのレベル、ログの出力環境も注意
- PHPならエラーレポーティングなどをつかう。
- PHPなら独自のエラーハンドリングもいじれる
- エラーもすべてログストアにほりこめる
- プロダクトフェーズなのか開発フェーズなのかによっても異なる
- ブラウザのプラグインがバグを吐くこともある
- トラッキングされたくないユーザーもいる
- 利用規約を書いていないサービスを信用できない人もいる
- データをとるツールに過度に依存するのはよくない
- マーケティング目的?
- ユーザーの動作をとりたくなる場合
- Google Analytics を使うなら パラメーターをきっちりチューニングしないといけない
- ログ出力
- ページの切り替わり時にフロントからバックエンドに投げる
- ログ収集用のAPIを作成するのが良いのでは

- ログ収集
* エラーモニタリングならいくつかある
[7 Application Monitoring Tools to Catch Errors on Frontend](https://geekflare.com/frontend-web-monitoring/)
- [Sentry](https://sentry.io/welcome/)とかとか
- CVとかKPI関係はGoogle Analyticsに丸投げして一切実装しないのが安全かも
- セキュリティとかパフォーマンス考えたら、実装が大変
- ログ分析
- 監視体制…etc
- データストア
- [datadog](https://www.datadoghq.com/ja/)
- ログデータは、検索性が求められないので、[MongDB](https://www.mongodb.com/)なども検討できる。
- フロントで出たエラーをみてもどうしようもないことがある。
- SPAを作成するときに [Nuxt.js](https://nuxtjs.org/ja/)や[Next.js](https://nextjs.org/)を使用しているとき、サードパーティの動作がからんできて使いものにならないデータしかとれないことがある。
- 動作毎にログを書きだす方がいいこともある。
- エラーったらサーバ側に即時送信させるとか
- フロント側だけでエラーをとるのがむりなことがある。
- ちなみに
- Nuxt.jsは[Vue.js](https://jp.vuejs.org/index.html)ベースでサーバーサイドレンダリングとSPAと両方書ける
- Next.jsは[React](https://ja.reactjs.org/)ベースでサーバーサイドレンダリングもできて高機能
- [クロージャー(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)を使用するとよりデータがとれないことも。
- JavaScriptは[コンパイル](https://developer.mozilla.org/ja/docs/Glossary/Compile)すると、行番号があてにならないことがある。
- [WordPressブロックエディタ](https://ja.wordpress.org/team/handbook/block-editor/getting-started/)とか`bundled-react.js 1245行目 Unknownオブジェクト` とか言われても困る
- 逆にミニファイされてると全部１行
- ロギング目的をきめて設計しないと有効な収集できない(セキュリティなのかマーケィングなのか)
- バックエンドに投げてしまった方がいい
- 責任境界線を引く
- 場合によっては、ログを[ローカルストレージ (MDN)](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage)やセキュアクッキーに貯めざるをえない
- パフォーマンスとかの問題
- ただし、ブラウザ側にログを溜めるとセキュリティホールにもなりえる
- ローカルストレージはアクセス制御がない、弱く他ドメインからよまれるから。
- [secure cookie (MDN)](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies#restrict_access_to_cookies)に保存するのが良い
- [ミッションクリティカル](https://www.weeklybcn.com/journal/column/detail/20110428_40058.html) なものは フロントで処理させないという設計方針([アーキテクチャ (Wikipedia)](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%BB%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3))もある。
- ビジネス要件も絡んでくる、プログラマもビジネスを理解すべき論
- 戦略と戦術は違う
- go言語の [irisフレームワーク](https://github.com/kataras/iris) 良さそう

### WebGLが色々使えそうでした（もりや）
* 前回顔出しパネルを作った話の続きで、改良した結果、こちらで一回意見を聞いてこいと言われました。
* [Web GL (WDN)](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) はいいぞ。
* [OpenGLES](https://www.khronos.org/opengles/) から派生した3Dグラフィックスを扱うライブラリ。
* OpenGLES は Microsoft の [ActiveX (Wikipedia)](https://ja.wikipedia.org/wiki/ActiveX) をさまざまな環境につかえるようにしたもの。特に組み込み環境などでも対応している。
* 例えば [Android でも使用](https://developer.android.com/guide/topics/graphics/opengl?hl=ja)できます。
* Web GLは そのActive Xのような機能がWeb で扱える。
* Vertex shader(位置または三角形のポリゴン) と pixel Shader(色)を自力で書く懐かしいコードを書く事でWeb上で3Dが書ける
* WebGL2.0からは最近のGPGPU を使えるようにもなっている
* Shaderの処理が非常に汎用的なため、グラフィック外の処理も普通にかける
* map 関数みたいなもの。一気にデータを渡して一連のデータ列に適用させることができる。
* GPGPUを使わずとも、画像の状態にデータを変換できればGPUで処理をさせることが出来る
* [テッセレーション](https://docs.microsoft.com/ja-jp/windows/uwp/graphics-concepts/tessellator-stage--ts-)なる技術とか影の表現で、この変技が多用されていた気が
* 古の技として画像データの[アルファ値 (Wikipedia)](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E5%80%A4_(%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E7%94%BB%E5%83%8F))に計算の結果をいれておき、画像から計算データをとりだすといったことが行われていた。
* WEB GL から GPUが使えるようになってこの古の技がつかわなくてくなった。
* WebGL2.0からShaderで処理させた結果を直接受け取れるようになったので、よりGPUが汎用的に使えるように