姫路IT系勉強会 2025.02
=======================

* 開催日: 2025/02/15 13:15
* 司会: wateさん
* 参加人数: 参加者: ???名 (うち学生：0名)
* HackMD: <https://hackmd.io/F98AO1SJTUuFCWhE8Cqq1g>
* connpass: <https://histudy.connpass.com/event/344727/>
* [姫路IT系勉強会 Discordへ参加する](https://discord.gg/rZCeScB)
* **オンライン開催の場合はDiscordのボイスチャットを利用しています**
* Discordは無料プランに乗れる人数(10人以内)なので使っています。
* 有料版でも$15/月程度なら払えなくもないですね。
* Discord以外にも色々ありますので、人数が増えたら検討しましょう。
* [姫路IT系勉強会 Slackへ参加する](https://join.slack.com/t/histudy/shared_invite/zt-ugowinom-ZG0ORhstkrqQGVyjksr_OA)
* 勉強会当日以外での質疑応答やメンバー同士のコミュニケーションに利用しています
* Slackでの話の流れから、突発的に臨時イベントが企画されされるケースがあります
* 画面共有について(オフライン開催時のみ)
* [Chrome ツールバーにキャスト アイコンを追加する](https://support.google.com/chromecast/answer/7249696?hl=ja)

最近のニュース
-----------------

* [姫路IT系勉強会](https://histudy.jp/)

お題
---------------

ここの下にお題(相談したいこと、発表したいことなどなんでも)お書きください。

* `### <ネタ>+(名前)`の形式でお題を記載してください。(任意)
(聞いてほしい話がある、または、相談したい内容がある人だけで結構です)
* 記載するお題は参加者一人につき1つだけ記載するようにお願いします。
(他の参加者が話をする時間がなくなってしまうため)

### お題をここに書く(名前を書く)

(概要や背景などをここに書く)

### Youtube動画にcanvasをオーバーレイさせて、mediaRecorder()で録画することは不可能でしょうか？(igaki)

* Google Mediapipe PoseLandmarker を使って動画・写真の姿勢を探知するFlaskアプリを引き続き作っています。(前回のMySQLが動かない問題はもう一度VPSを最初から作り直してPHP, phpmyadminを導入したところ動作するようになりました。)
* 探知した姿勢でMMDモデルを動かすことはある程度できるようになって（その後ボツになりそうになっていますが : https://igaki12.github.io/miku-poser/ ）、その次にYoutube iframe APIで表示したYoutube動画に推定した姿勢を重ねた形で保存するサイトを作ろうとしているのですが、Youtubeのiframeの上からcanvasを重ねてjavascript mediaRecorder()で録画しようとしてもうまく動きません。以前Youtube APIを使わず普通にアップロードした動画を録画する方法(下記リンク)ではうまくいったのですが、Youtube APIの iframeタグを使った方法でそういったことはできないという仕様なのでしょうか？それとも作り方が悪いのでしょうか？Youtube動画をキャプチャする方法自体はあるのでしょうか？
* youtube API を使った失敗作:https://igaki12.github.io/pose-recorder-youtube/
* 普通に動画をアップロードしたものに姿勢探知を追加するモデル：https://health-discovery.com/
* 今のYoutubeの動画再生にはGPUを使っている。画面のキャプチャはCPU側です。そのためキャプチャはできない。
* ディスクトップのスクリーンショットを録画すれば可能。
* YouTubeで送られてきたデータをCANVASタグで動画を再生する。VP9という形式でWEB3Dを使って再生する形になっている。
* 著作権対策と消費電力の効率のよさがある。
* サービスワーカーでYoutubeのストリームをブラウザに流す方法はあるにはあるがあまりおすすめできない
* YouTubeは仕様を変えてくることがあるので、こういう小細工系は変更によって使えなくなる可能性がある。
* Vimeo は第三者が動画を商業利用を認めているのでYoutubeをあきらめれば。
* [yt-dlp](https://github.com/yt-dlp/yt-dlp) を使っていったんローカルにダウンロードして再生すれば…
* ただし、著作権的にクロ
* 最終的に録画したい?
* デモ用に録画できればいいと思っている。
* ChatGPTに任せてすすめているのはおもしろい
* videoタグで録画している。
* CANVAS上でやっている。screenrecorderで録画はできるかな。
* CANVAS上にCANVASを重ねてやる処理をしてあげないとメモリ消費が増える
* CANVASでフルHDサイズ1枚でメモリ100MB消費する
* 重ねたCANVASを一つにまとめれば消費を抑えられる
* スマフォで軽くするにはGPUを使ってやれば早くなる上にメモリ消費がへる。
* CaptureStreamがとれるのはいい
* ChatGPT o3-mini highになってすごい
* 大きくくずれなくなった
* ソースコードはみないで大丈夫? 信用しているのか。
* 写経はしない?
* ノーチェックはリスクある。
* 外部に出すときにはセキュリティ上のリスクがある。
* 外部に出さないのであれば特に問題はない。
* IPA 安全なウェブサイトの作り方: <https://www.ipa.go.jp/security/vuln/websecurity/about.html>
* ウェブサイトを作ったらどういう攻撃があるか、その攻撃に対してどう対策をしておいたほうがいいか説明している
* インターネットに公開するときのリスクの種類などを把握しましょう
* [体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践](https://amzn.to/41fmF0Z)
* ※少し内容は古いですが基本的なことはわかると思います
* [徳丸浩のWebセキュリティ教室](https://www.amazon.co.jp/%E5%BE%B3%E4%B8%B8%E6%B5%A9%E3%81%AEWeb%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E6%95%99%E5%AE%A4-%E5%BE%B3%E4%B8%B8-%E6%B5%A9/dp/4822279987)とか
* つくりかけの状態で外部からみせない方がいい
* 画面共有などで共有しましょう。
* NASの場合は、どうでしょうか?
* 外部に公開する場合は気をつけたほうがいい
* Buffalo, NECなど各社、脆弱性出してます…
* サポート期間や保証期間などを参考にしましょう。

### 学生に生成AIを使わせるのは難しい（のがた）

* 文科省から年末に「[初等中等教育段階における生成 AIの利活用に関するガイドライン Ver 2.0](https://www.mext.go.jp/a_menu/other/mext_02412.html)」が出ました
* どう変わったかというと、生成AIを止めるのは無理だから使わせる方向に変わった
* 初等中等教育なんで小中高校向けだけど、小中高で方向変わったので大学も変わる方向ですよねー
* ということで学生向けの資料を書いてましたが…
* わりと大変だった！
* 資料は、上の文科省の資料をベースに総務省と文化庁の資料を元に作ったけど、大人も子供もわかってないから理解してもらうように作るのは大変
* [関係情報：情報通信関連：情報通信白書令和6年版](https://www.soumu.go.jp/johotsusintokei/whitepaper/r06.html)
* [生成AIはじめの一歩～生成AIの入門的な使い方と注意点～ | 安心・安全なインターネット利用ガイド | 総務省](https://www.soumu.go.jp/use_the_internet_wisely/special/generativeai/)
* [AIと著作権について | 文化庁](https://www.bunka.go.jp/seisaku/chosakuken/aiandcopyright.html)
* みんな生成AIの使い方わかってないから仕組みの説明と使い方、特に深堀りや更問いをしつこくしろ、出力したものを検証しろ、ってしつこく書いた
* 使わないように教育していたから?(経験不足?)
* 経験不足の面と経験があっても発生している面もある
* 人に質問するのになれておらず、AIに遠慮する
* 機械にいわれたものを盲信する?
* https://chatgpt.com/c/6799dd4c-bab8-8012-bde7-244ffea34e71
* 韓国語の練習で、新しい文法を学んだときに例文をつくるっていうときに、「例文を作る」しかしない
* 自分で例文をつくって問題ないか確認するとかまでは活用しない
* 質問力をあげるしかない?
* AIに対しても人に対してもない
* 質問もまとはずれ
* 質問力をあげるには?
* 脳内のイメージを言語にする
* 言語をまとめる
* AIには「....はわからないんですがどうすればいいですか」と丸投げすればいい
* 文科省の資料にもあまりはっきり書いていない
* プロンプト術みたいなものも、言語化できていない人にはできない、難しい。
* 会話をしながらつみあげればいいと思う
* 長い文章だと費用面が気になっているのかもしれない
* 使い倒すのはなかなかしてくれない
* [超・箇条書き―――「10倍速く、魅力的に」伝える技術](https://amzn.to/4gCNyAJ)
* これを読んでから言語化するのが楽になった by ワテ
* [「仕事を任される人」のチャットには特徴があって、決まってこれ。 #ポエム - Qiita](https://qiita.com/haihaikazuma/items/570cc29f0cc4e6f10a4f)
* 仕事を任される/任されないではなく、情報整理したうえで言語化することで情報の受け取り側の負荷を下げられる
* これが仕事力なのかなって思ってる by ワテ
* 仕事だと議題を先にまとめておくと早いし会議の時間が短くなっていい
* 昔からバグレポートは要点を得ないものが多かったから、AIにもわからないあいまいな入力が多くてもしかたがないのかな。
* まともなバグレポートを書くには整理とか情報のだしおしみを避けるのが重要
* AIにも、情報の不足があればその情報を求めるようにするとかすればいけると思う。
* ゴミをいれるとゴミしかでない Garbage In, Garbage Out
* ただAI はブラッシュアップできるので何回も問合せしよう
* [コーディング支援だけじゃない　「GitHub Copilot」をレガシーコードの文書化や説明に役立てる方法をGitHubが解説：将来のリファクタリングや開発の効率化、高信頼化へ](https://atmarkit.itmedia.co.jp/ait/articles/2501/21/news055.html)
* ドキュメントがないコードに向きあうときにCopilot EditでDocコメント書いてくださいでいける
* Copilot に解説を依頼するとか
* VS Codeなら解説(explain)を使うといい
* 人間難読化コード対策で解読してもらう
* 正規表現パズルを楽にやってもらえる

### 自社サーバーが古すぎてWordPressで使ってるPHPが常に警告がでてしまう問題(dai)
※聞き専です（コメントは適宜可能です）

現在運用しているサービスのオフィシャルサイト（自社サービス）をWordPressで作ってるのですが　自社サーバー（サーバー会社に委託）のPHPが古くてWordPressを最新にできなく、プラグインもバージョンアップができず、どんどん置いてけぼりになってしまっています。
これはやはりエンジニアに相談して早急に対応した方がいいでしょうか？
ちなみに`当サイトのように漏洩してはいけない情報がない場合`でもセキュリティ対策必要でしょうか？
セキュリティ対策しないリスクは具体的に何がありますか？

WordPressのダッシュボード上の警告文

このサイトは古いバージョンの PHP (7.3.16) を実行しており、セキュリティアップデートを受け取れません。更新する必要があります。
PHP とは何ですか ? サイトにどう影響しますか ?
PHP は、WordPress の構築に使用されるプログラミング言語の1つです。PHP の新しいバージョンは、定期的にセキュリティ更新を受け取り、サイトのパフォーマンスを向上する可能性があります。 PHP の推奨バージョンは 7.4 以上です。

* PHP 7.3.1 は 2025年2月現在でサポートされていないバージョンです。
* 参考 ： https://www.php.net/supported-versions.php
* 8系にあげた方がいい
* 7.3.16には対応されていない既知の脆弱性が存在します[CVE-2020-7064](https://nvd.nist.gov/vuln/detail/CVE-2020-7064)
* exif_read_data()を使用しているプラグイン
* Exif Details
* Exif Caption
* 他にもEXIFデータを使ったプラグインがあります
* リスク判定が必要
* リスクがあったとしても条件を満さない場合は不要
* バージョンだけで リスクがあると判断するのは簡単だから
* Copilot Editに直してもらうとか?
* ローカル開発環境を用意して(Docker?)→「Local」を使用
* 開発者モードを有効にして
* Copilot Editで変更して
* 動作確認
* 共有しよう
* サーバーを動かせないのであれば、レンタルサーバーに移動させるというのも可
* 代替のレンタルサーバーを別で確認できるよね
* データベースを別で管理してもよい
* Wordpressやプラグインとかもアップグレードしよう→PHPが古くてあげられない
* OSのバージョンも古いんでしょう?
* 塩漬けがこわい
* まずは情報整理・現状調査かな
* 公開サイトのもよう
* 商流を確認して担当者と相談なども必要
* もっとプラグインや脆弱性の情報を監視しよう。
* 運用するならリスク判断をしないといけない
* 漏洩してはいけない情報がなかったとしてもサーバーののっとりリスクなども検討した方がいい

### ラジコンをTypescriptで作るのは、罠が多い（もりや）
* ドスWAYを作るのを一旦キャンセル
* セグウェイに舞妓さんを載せるとドスWAYになる
* ここでは制御部分はおいておいてラジコン部分をつくる
* Raspberry pi + WebHIDでPS5のDualSense + UBSカメラでラジコンを作ろうとする
* RaspberryPI向けのTypescript環境がNodejs16までしか対応してない
* 全部Javascriptで書き直し
* TypescriptからGPIOにPWM信号が送れない
* 試した範囲でpigpio以外送れない
* 特定のDCモータードライバーでないとPWM信号を処理してくれない（買い直し
* WebHIDでPSのコントローラー使うのに、webhid-ds4を使用
* PS4とPS5で送られてくるバイナリコードが異なる
* ライブラリを書き換え
* Raspberrypiからカメラ映像を配信
* 推奨方法をそのまま使うと、遅延が3～5秒
* 確実に事故をする
* WebRTCで配信する [momo](https://github.com/shiguredo/momo)を使うことで、100ms以下の遅延まで達成
* スマホをVRゴーグル代わりにして、見れたら良いな
* ios17以降、WebXRのAPIが消える
* WebXRのブラウザの対応が進むんじゃなくて減っている
* スマホから傾きを取得、カメラ映像をThreeJSで球体に反映
* ストリートビューっぽいものを作り、スマホの傾きを適応し
* フルスクリーンで表示させて、無理やりVRにする

告知
---------------

### 姫路IT系勉強会3月(3/15)

* 3月の勉強会は会場が変わってます
* 3月15日(土) 13:00 - 17:00
* 姫路労働会館: https://www.himerou.jp/