---
title: 姫路IT勉強会 2024.11
description: 姫路IT勉強会 2024.1
lang: ja-jp
---
姫路IT系勉強会 2024.11
=======================

* 開催日: 2024/11/16 13:15
* 司会: wateさん
* 参加人数: 参加者: ???名 (うち学生：0名)
* HackMD: <https://hackmd.io/0W3o6SD4R3CkA9cL1F_Ekw>
* connpass: <https://histudy.connpass.com/event/336201/>
* [姫路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/)
* [Gimp 3.0 RC1リリース](https://www.gimp.org/news/2024/11/06/gimp-3-0-RC1-released/)

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

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

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

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

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

### FLASKで....(igaki)

- Xserverで無理やりminicondaをインストールして、今回opencv-pythonと[mediapipe](https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ja)をimportしてあれこれ画像加工するflaskアプリを作りたいのですが、サーバー上で動作確認済みの

import cv2 
import mediapipe

の導入ができません(サーバー上ではSSH接続を介して動作するが、CGIを介したpython3.8のFlaskでは動作しなくなる)

- サービスの選定必要がある
- VPSとレンタルサーバーの違い
- レンタルサーバーだと共有サーバーなのでいろいろといらないサービスや制限がある。
- VPS はOSがはいった直後の状態で借りる。インストールからあとは全部カスタマイズする必要がある。
- VPS では Xserverか Sakura Internet
- サーバーレスでやろうとしたらお値段の問題があったので、Xserverになった。
- Xserever で venv を使えそう。
- 参考URL：
- [ネコでもわかる！さくらのVPS講座 〜第一回：VPSてなんだろう？〜](https://knowledge.sakura.ad.jp/7938/)
- [さくらのVPSを使ってシステム開発に必要な知識を学ぶ 〜第1回〜](https://knowledge.sakura.ad.jp/34159/)
- 自分ならWSGIサーバー(Waitrell)とFlaskプログラムをコンテナにまとめて動かすかなー
- フロントにNginxコンテナとか置いて
- 今回の話だとVPSやクラウドは難しそう
- VercelでFlaskが動くみたい
- Flask Hello World – Vercel <https://vercel.com/templates/python/flask-hello-world>
- 今回のケースだと無理ぽい
- メモリサイズも大きいときびしいかもしれない
- 動画などでアップロードの時間などを考えるとかなり青天井になるので
- 物理サーバーにする?
- いったんローカル環境で消費するメモリサイズを調べた方がいい。
- react js でできないか?
- OpenCVでやりたいことによってはローカルで処理できない可能性はある
- [mediapipe](https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ja)はかなり難しい
- リアルタイムにこだわる必要はないかも
- 処理終了後にメール通知など
- サーバーとクライアントでどうするかを検討しましょう。
- 最近はフロントだけしか意識しない人が多いが経済的な面まで考えている
- コンテナで実行して結果だけをXServerに格納する方法がある?
- GPUをつかう場合、解析処理だけ[高火力DOC](https://www.sakura.ad.jp/koukaryoku-dok/)を使うという手段もあります
- Dockerでタスクを作って処理をさせる→結果をXserver側からGETするで使えそう
- ただし待ち行列があるためリアルタイムではありません
- システムパスがとおっていない?
- 指定方法が間違っている?
- 相対パスなら大丈夫かも
- 公開ディレクトリにはいっていない?
- 将来のpythonではcgiがサポートされなくなってしまうのでよくない。
- 今の動かしかたではよくない。
- VPSで動かした方がいいかな。VPSで環境構築する力を身についた方がいい。
- PASS(Vercel)でいくか、VPSでやるか。

### 作成した楽譜アプリを見てほしい（cake）

- https://musicnotes.sytes.net/
- https://github.com/NicociN1/MusicNotesPlayer
- 音楽再生にあわせて、インポートしたタブ譜を表示して同期して流す
- タブ譜は手動で書いているから、そのエディタがあった方がいい
- ギターを引いている人から使い勝手の要望を聞いた方がいい
- 決まったコード進行をいれるUIがほしい
- 自動で色わけしたらどうか
- メディアファイルから自動音楽
- [高校生が音楽をそれぞれの楽器の音ごとに分解して楽譜化するオープンソースツール「Audio Decomposition」をゼロから開発 - GIGAZINE](https://gigazine.net/news/20241112-audio-decomposition/)
- タブ普の部分をSVGにしたとき、ずれたのでCSSで書いたんだけど？
- HTMLとかSVGは起点とずれる
- HTML：左上
- SVG：右上
- 先の方もみたいとなると、楽譜の拡大縮小がしたくなるかも
- `use context` を使うのはあまりよくない?
- 複数のコンポーネント間のデータを引き渡すにはどうすればいいのかで、`use context`がある。
- `redux`を使うといいが、 react のお作法・主流にはあっていない

### バイポーラ型ニッケル水素電池

- 従来型の電池は複数の電池をつないだもの。全固体電池。
- トヨタも採用する「バイポーラ型電池」、出力を向上できる仕組みとは：今こそ知りたい電池のあれこれ（7）（1/3 ページ） - MONOist <https://monoist.itmedia.co.jp/mn/articles/2110/11/news012.html>
- リチウムイオンではなく不燃性
- リチウムイオン電池のバイポーラ型も生産する予定あり
- リチウムイオンはレアメタルを消費するので、中国依存がある

### Githubのお手本のコードをどうやって検索したらいいいですか?（cake）

- お手本にすることがあまりない。ライブラリのリポジトリをみることが多い。
- ChatGPTにきく?
- 信頼できるかどうかが問題
- うらとりできるかどうか
- Gemini を使う?
- 検索結果を提示してくれるので比較的信頼できる
- Claoud がいい?
- コード生成とロールプレイは強い
- SVGは弱い? SVGを生成にはよわい。外部検索をしてくれない。
- 使い捨てスクリプトを聞くといい
- どんなコードを探している?
- Githubをみたらいいと聞いたことがある。
- 普段つかっているライブラリを見る。メジャーなライブラリを読む。
- SVGを使うためのライブラリがある
- 例えば、<https://www.npmjs.com/search?q=SVG>
- でライブラリを探してそのコードを読む
- Chromeの検索エンジンに <https://www.npmjs.com/search?q=%s> を追加しておくと便利
- 類似しているソフトのライブラリをよむ
- エラーコードやエラーメッセージを検索することはある
- 公式ドキュメントを読むには NotebookLM にいれててから問合せるといい。
- だいたい Markdown だから 全部連結させてながす。
- PDF化してAIに質問するのもある。
- こういうコードがほしいというのではなく、タグなどで検索することはある。
- githubのトレンドを追いかけていって最新技術を追いかけるなど
- Qiitaやzenn でトレンドを追う
- DIFYでなんとかできないか?
- LocalLMでよくでてくる。
- 複数のAIを使いたい。
- <https://tldv.io/ja/> 議事録生成AIで生成した議事をOpenAIに誤字修正させたい
- AI になんのドキュメントを読めばいいかを聞くとか
- どこを読めばいいのかを聞く

### 作成した掲示板アプリをみてほしい（cake）

* 家庭内掲示板
* 書き込みなどができる
* verselにアップロードしていて
* PostgreSQLを使っている
* prismを使っている
* アカウントは Next..を使っている
* スレッドがしたいとか。返信できるようにするとか。
* 複数人数で使っているときにリアルタイムで表示できるかどうか
* 最初から入力用のモーダルを用意するとか
* マストドンにつなぐとかもできるのでは

### 作成したタイピングソフトを見てほしい (cake)

* タイピングソフト
* AIにタイピング文字列を生成される
* よくできている。
* 単語間はスペースで移動するのがよいと思う
* 画面がきれい
* AIで生成できる文章の種類を指定できる機能がほしい
* プログラミング用とか
* シチュエーションを指定した英会話とか
* 英語検定などの文章を参考にした英語学習用とか
* アイディアがないかも?
* おもしろそうな情報を探すとか
* なんだったら slack でなにかきけばいいかも
* モチベーションがあがる、あがらないに注意するとか
* <https://career-anchors.rere.page/> キャリアアンカーで自分の傾向を知っておくとか

### [ジョーク枠] ブランチ名の規則 (fu7mu4)

* アレなルールによって開発がアレになる例です。
* スライド(Impress)ありです。
* rebase は考えちゃだめ!

### [雑談] 最近のAI検索エンジン使ってる? (fu7mu4)

* https://www.perplexity.ai/
* https://www.genspark.ai/
* https://felo.ai/search

### [Income Gain Technique、略してIT枠]株価の自動予測は難しい（もりや）

* 株のネタしか無い？ので、ITに当てはめてみました。
* 株価はグラフと企業情報を見ると、目で見て判断する分にはだいたい上がる下がるは予測しやすい
* 上がってる株は基本的に上がる
* 下がっている株は基本的に下がる
* 問題はそれが適切か？
* 機械的に判定しようとすると、分岐条件があまりにも多いのでどうするか？
* 定量化できるなら、AIで判定？

### 日本のTCP/IP教育はたぶん間違っている（主に文系向け）（妖介）

- 新卒の営業を教育してます
- 世の中にある入門書はいきなりパケット分割・ヘッダの話にから入ってて、いきなりハードルがあがる
- 概念を掴むために宛先（IP）と宛先内の誰（ポート）の話から入るべきでは
- ぶっちゃけパケット分割・ウィンドウ制御はその次でいい
- 最後にまとめてデータグラム・パケット・フレームの話でまとめてあげるといい
- これに行き着くのに1年かかりました

### [予備のネタ枠]BFFアーキテクチャについての素朴な疑問(ワテ)

昨今のネット上の記事を見てると以下のようなアーキテクチャを見かけると思います。

Frontend <-> BFF(Backend For Frontend) <-> Backend(API) <-> DB(Database)

参考URL：[流行りのBFFアーキテクチャとは？｜Offers Tech Blog](
https://zenn.dev/overflow_offers/articles/20220418-what-is-bff-architecture)

上記のような記事を見てて思うのですが、
元バックエンドの人の目から見て、[Prisma]や[TypeORM]のようなものがあるのに
わざわざ別にBackendを用意する必要性があるのか未だに釈然としません。

なんのために別でBackendを必要とするんでしょうか??
(わざわざBackendを通さなくてもBFF部分でデータベースを操作すればいいやん、
そうすればFrontendとBackendで仕様をすり合わせるとかいう無駄なすり合わせ作業が必要なくなるんじゃね？的な)

[Prisma]: https://www.prisma.io/
[TypeORM]: https://typeorm.io/

### 最近の近況（のがた）

- 韓国語の影絵をやってました
- 韓国語のセリフは、感情とイントネーションの場所が難しい
- メガネを2つにしました
- 近眼が強くて老眼なので遠近メガネがつらい
- 1mしか見えないメガネも作りました
- 最近買った本
- Linuxの資格を取りたいという話で調べたら、LPICよりLinux Essentialsがよさそう
- Linux Essentials: <https://learning.lpi.org/ja/learning-materials/010-160/>
- Pythonの教科書としては、実教出版の本が良さそう
- 詳細（プログラムのつくりかた Python 入門編 Lv.0）｜実教出版: <https://www.jikkyo.co.jp/book/detail/22510035/>
- 最近のSNS
- MastodonとThreadsにいます
- Threadsの伸びがすごい
- BlueSkyはメディアの取り上げが多いけど話題、人数的にはThreadsが上回ってる気がする

### レーザー加工機(10W)買いました。（園田）

- 作っているモルックへの刻印と、コースターへの刻印とかを考えていますが、試しに100均の４００ｘ３００のベニヤ板でトレーを作ろとしています。Inkscapeでデータを作ろうと、pythonでプログラムを組んでSVGデータを作って、加工機用のLaserGRBLソフトで変換すると、一筆書き風になってくれません。どうしたものかと？

### 姫路界隈のユニバーサルスポーツ（障碍者）関連情報をまとめるサイトを作りたい。（園田）

- ユニバーサルスポーツのボランティアグループでのお話の中で、団体の運営者の高齢化の問題や、障碍者が情報を得やすいようにするのにはどうしたらいいのかという話になりました。やっぱりポータルサイトかなということなのですが、どうするのがいいかなと思っている段階です。何か良いものがあれば教えてください。

### 明後日「令和６年度第１回姫路ライフ・スマート都市推進コンソーシアム総会」というのに参加します。（園田）

- <https://www.city.himeji.lg.jp/shisei/0000026399.html> です。外部有識者ということなんです。ご存じですか？
- 姫路市のサイト見にくいですよね
- GOV.UKのデザインシステムは見やすい
- GOV.UK Design System <https://design-system.service.gov.uk/>

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

### イベント名(開催日時)

(イベントの概要をここに書く)