姫路IT勉強会 2022.09

--- title: 姫路IT勉強会 2022.09 langs: ja-jp --- 姫路IT系勉強会 2022.09 =========================== * 開催日: 2022/09/17 13:15 - * 司会: wateさん * 参加人数: 参加者: 97名 (うち学生 0名) * HackMD: <https://hackmd.io/BzddBOS0SvyrXa5BspZh_A> * connpass: <https://connpass.com/event/259471> * ハッシュタグ：[#histudy](https://twitter.com/search?q=%23histudy&src=typd) * [姫路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での話の流れから、突発的に臨時イベントが企画されされるケースがあります最近のニュース --------------- * 画像AIとか * [midjourney](https://www.midjourney.com/home/) * [stable diffusion](https://stability.ai/blog/stable-diffusion-public-release) * [mimic](https://www.itmedia.co.jp/news/articles/2208/30/news205.html) * [Heroku 無料枠修了のおしらせ](https://blog.heroku.com/next-chapter) * [slack 9/1からメッセージ保持期間が90日になる](https://slack.com/intl/ja-jp/help/articles/7050776459923-%E3%83%97%E3%83%AD%E3%83%97%E3%83%A9%E3%83%B3%E3%81%AE%E6%96%99%E9%87%91%E6%94%B9%E5%AE%9A%E3%81%A8%E3%83%95%E3%83%AA%E3%83%BC%E3%83%97%E3%83%A9%E3%83%B3%E3%81%AE%E6%9C%80%E6%96%B0%E6%83%85%E5%A0%B1) * [cocoa終了](https://github.com/cocoa-mhlw/cocoa/issues/1144) * [TAROMAN](https://www.nhk.jp/p/taroman/ts/M7359Q6PQY/) お題 --------------- ここの下にお題(相談したいこと、発表したいことなどなんでも)おかきください。 ※`### <ネタ>+(名前)`の形式でお題を記載してください。 ### dev containerの威力だってどうでした? (fu7mu4->wate) - 単純にどうだったかをききたいなというもの - 時間なかったら消してください。 - WEBのサーバーサイドをやっていたときに、構築が大変 - VSCodeがいろいろやってくれる - コマンドが不要になる。 - コマンドが必要な場合はちょっと - Dockerがよしなにやってくれる - dev containerの起動でほぼ使える - 勉強会の例だと Hugo サーバー+スクリプトこみこみのものを用意できる。 - あとは編集してコミットでOK - フロントエンドのユーザーやデザイナーにはいい。 - 便利に環境をわたせる - VSCodeの拡張をいれておくことができる。 - 例 histudy の devcontainer の設定[devcontainer.json](https://github.com/histudy/site/blob/master/.devcontainer/devcontainer.json) - [Viteっておいしいの？ - HackMD](https://hackmd.io/AK9gHK85Qp-_cbx4owYI5Q) - VS codeにこれをぶち込む - [Remote Development - Visual Studio Marketplace:](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) - そしてDockerfileを置いたフォルダーを開くとDockerの環境が使える - お便利情報 - [Microsoftの設定のリポジトリ](https://github.com/microsoft/vscode-dev-containers/tree/main/containers) - [pythonの設定例](https://github.com/microsoft/vscode-dev-containers/blob/main/containers/python-3/.devcontainer/devcontainer.json) - [dev-container の lifecycle script(公式リファレンス)](https://containers.dev/implementors/json_reference/#lifecycle-scripts) Dockerでイメージを作成後にShellを走らせるなど - [dev-container life cycle scroiptの例](https://github.com/microsoft/vscode-dev-containers/blob/main/containers/php/.devcontainer/devcontainer.json#L35) - MariaDBの文字コードとか。 - **開発環境限定**の便利コマンドを追加するとか - [pict](https://github.com/microsoft/pict) テストを[ペアワイズ法](https://qiita.com/bremen/items/6eceddc534d87fc797cc)で減らす - [exa](https://github.com/ogham/exa) ls の代替 - [bat](https://github.com/sharkdp/bat) cat の代替 - [tbls](https://github.com/k1LoW/tbls) DBのtableをドキュメント化するもの - [もっと使いやすいコマンドラインツール10選](https://zenn.dev/the_exile/articles/5176b7a5c29bce) ### 「集中している」のを通知する装置を作ってみました（もりや） * Web会議中等を扉に通知できないか？という話を、ランニングしながら再考 * 海外製の某ポルノサイトのレポートに、より集中した状態ほど、視線の動きが減るというレポートが * 視線の動きから集中度を数値化し、アピールする装置を考案 * Webカメラから顔の検出：TensorflowJS * 黒目の位置から視線、分散を計算：WebAssenble + Rust * 顔が光る：WebGL * 装置とのリアルタイム通信：WebSocket + nodejs serial * 本体：３Dプリンター＋レーザー加工機 * 制御：Arduino * 使用技術だけなら過去最大規模になっています。 * いかなる技術・知識もシステムをつくる一要素でしかない、良い好例になった気がします。 * 黒目の動きから分散が一定値以下になると、装置が発光 * 集中している時間に応じて、色が変わる * 集中度が一定条件を満たすと更に変わる * エンダーーーーーーーー * 技術的にはWASMとリアルタイム通信部分が一番問題 * Rust の WASM と WASI * WebAssenblyにはいくつか分岐した技術があります * WASM：WebAssenblyの略で、WASM向けにコンパイルされた多言語のバイナリを実行 * WASI：WASMの実行環境を外出しし、ブラウザの制限を回避した動作(ファイルの読み書きなど)がおこなえる * Proxy-WASM：[Envoy](https://www.envoyproxy.io/)など、ProxyにWASMの実行環境を実装し、コンパイル可能なすべての言語のプラグイン、フィルターを実装出来る * WASMの実装時の問題点 * 読み込ませるバイナリのロードに時間がかかり、処理の間に挟む格好では使用できない * 該当ページの表示と同時か、読み込み中などでロードを挟む必要がある * WASMとJS間のデータのやり取りに、WASMで変数or配列のポインターのを生成 * ポインターをJSに返し、そこにデータを代入するor参照する、方法が最速 * これ以外の方法では文字or文字列のやり取りしかできない上に、100msec以上の時間がかかる * 整数を処理させる場合、ほぼ間違いなくJSで処理を書いたほうが早い * WASM実装のメリット * コンパイル可能なすべての言語で、作成済みの関数、クラス、ライブラリを非常に少ない手間で移植できる * 複雑・膨大な量のFloatを処理する場合にはjs比１０倍以上の高速化が行える * Rustで実装すると出来上がるバイナリが他言語より圧倒的に小さくなり、ロードが有利 * 外部と情報をやりとりするときはむずかしい * WebSocket + Pythonでは、WebSocketサーバーとSerial通信機能を同時に連携するのが上手くいかない。 * マルチスレッド、マルチタスク、どちらの方法でも共通変数の相互参照が上手くいかない * マルチスレッドに至っては、Flaskが内部でマルチスレッド動作しているため、そのままでは動作すらしない * NodejsのSerial通信＋WebSocketだと上手く行く * 内容を問わず、コールバック関数の形で処理を渡すことができれば、どんな処理でも動いてしまうので、プログラム構造に問題がなければ気持ち悪い実装が簡単にできる * 低遅延で実装でき、Aruduinoとの通信、WebSocket通信、HTTPのAPI、全てを連携できるので、使い勝手もいい * [Maker faire のイベント](https://makezine.jp/events)にでたらどうか? ### 勉強がてらJamstackなサイトを構築したい（中山） * よくあるコーポレートサイトっぽいものをサーバーレスに構築したい * 環境作る → コードを書く → デプロイする... をモダンな形で一通りやりたい　 * 参考： * Nextjs+S3： https://zenn.dev/hamo/articles/0a96c4d27097bd * Nextsj+microCMS： https://blog.microcms.io/microcms-next-jamstack-blog/ * フロントはNextjs（React） * コンテンツ管理はmicroCMS * バックエンドはAWS * S3にデプロイ * Serverless Frameworkを使いつつ、Cloudfront Functionで検証環境だけBasic認証させる * Codebuildで自動デプロイ * Laravel + react vs https://redwoodjs.com/ * redwoodはどうか? * Laravel と react は会社で使用しているから * 複数言語をいれていると大変じゃないかな? * 技術スタックが複数あると勉強は大変 * いっきにやると厳しい * node(フロント)+docker(サーバーサイドレンダリング) でどうかな? * 勉強にはこっちがおすすめでは? * あとでnode+postgresqlのようなdev-containerにすすむのもあり * たとえば、Laravel はどこでViewでわかれているのかを調べると、[inertia.js](https://reffect.co.jp/laravel/laravel-inertia-js) とわかるけど大変。 * Laravel7 * Laravel自体を変更することがある? * PHPをいじることあるがサーバーをいじったことがない * やはり node でいいのではん? * Linux の勉強をするなら、dev-containerか、Dockerか VirtualBoxで環境を作成して問題があれば削除の方がいいと思う。 * 最近は学習することが多くて困る * 何をどうすればいいのかわからない。 * webpackのメリットは何? * Dockerやパッケージは? * [vite](https://ja.vitejs.dev/) * 日本語化されている? * 薄くも使える? * redux はやめた方がいいのでは? 専任が増えそうになりならHookがお勧めです * 専門を作成するのはどうか? * 例えば react をメイン領域として Docker で環境を作成というのはいいかも * DockerはEC2にボンと投げるだけにとどめておく * 最近の開発環境においつくのは辛い * ネットで調べると中途半端な情報が多い * 公式のドキュメントを見よう * react なら node+postgresql のような標準的な環境で勉強する * あとで postgresql が必要になったら、またみていくといい。 * わからないときは? * [connpassのhistudy](https://histudy.connpass.com/event/259471/) のページから hackmd にいく * slack できく * discord できく ### 授業でWebアプリ作成をやることになりました(のがた) * 「Webアプリ作成」という授業をやることになりました * 他の授業でPython使ってるしPythonがいいかなと思ったり * Flaskでいいかなー * こういう本あるしベースにすればいいかなー * Pythonではじめる Webサービス＆スマホアプリの書きかた・作りかた（クジラ飛行机） | 書籍本 | ソシム https://www.socym.co.jp/book/1251 * と、軽く考えてたけど、範囲広くない？と気がついた * この本、そのままじゃ無理じゃね？ * 仕方ない。自分で資料書くか * 8月終了 * dev containerも使っております * Dockerfile: https://gist.github.com/nogajun/902b74f2f41e8c2a3451834899bf8f7d * [Common LispでWebアプリ開発入門](https://qiita.com/fireflower0/items/1a36e14e7a0d45464c10)とかあるよー ### 姫路IT系勉強会の姫路IT系勉強会のキーワードなどを改善してはどうか? (fu7mu4) - [connpassの姫路IT系勉強会](https://histudy.connpass.com/event/259471/)の姫路IT系勉強会のキーワードや過去のお題(例) に訴求力がないような気がするので改善のネタ出しがしたい。 #### 勉強会の進行方法、注意事項 - 付箋より最近は CodiMdで話題を募って、CodiMD上で順番を調整しているので、書き直した方がいいのかもしれない。 #### 勉強会のキーワードや過去のお題の例 - jQueryなどのキーワードは古い - HTML5 は必要? ## おしらせ * 12/3 加古川商工会議所で State of the map Japan(オープンストリートマップ)のイベントがあります。 * 11/11,11/12 [KOF2022](https://www.k-of.jp/2022/)が開催予定(ハイブリッド) * 日時:11/11(前夜祭)、11/12(本番) * 場所: 大阪南港ATC [ITM棟 10F](https://www.atc-co.com/guide/floor.php?tenant_area=23) * 姫路IT系勉強会はオンラインで開催：今後はオンラインとオフラインを交互に開催する

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.