Gatsby Starter Blog RSS Feed

718boxster(982)にて自力でAndroidAutoを有効化する！

Sat, 26 Jul 2025 10:00:00 GMT

Porsche 718 Boxster (2018年モデル) 買いました！

いやーーーーーー買っちまいましたよ！！ボクスター！
(実は去年の夏ごろに購入していたのです、忙しくて記事化できず...^^;)
オープントップでMR、しかもチョーパワフル！
これが真の人馬一体だと痛感しましたね...
もはや私が下手すぎて足引っ張ってるぐらい^^;
あともちろんMTです！
PDKも素晴らしいと思うのですが、あくまで速さではなく泥臭い楽しさ重視です！
あとMTのほうがリセールも高いことを信じてます！！！

高かったけど、今後のボクスターはEV化するだの、MTは駆逐されていくだろうと
あと、もし家庭を持つ（全く想像できんが...）ことになったら真っ先に切り捨て候補になるだろうということで
めちゃ奮発しましたよ〜〜〜いや〜買ってよかった！
楽しいし所有欲も鬼満たされる...ε-(´∀｀*)ﾎｯ

ですが、ただただ走って満足するだけじゃないのが私、ゆきまくらでございます^^;
コーディングだの、PCMの設定だの色々いじっていきますぞい！
んで、これが第一弾です！

完全に自己責任でお願いします！文鎮化してもゆきまくらは一切責任とりません！
完全に自己責任でお願いします！文鎮化してもゆきまくらは一切責任とりません！
完全に自己責任でお願いします！文鎮化してもゆきまくらは一切責任とりません！

...3回言ったからヨシ!(もし文鎮化したら修理代めっちゃ高そうだからね...)

ネタソース

(YouTube)Android Auto and Apple Car Play on a 2017 Porsche Macan
↑Macanとなっていますが、多分おなじPCMだとおもったのでこれを参考にしました

下準備

PC(OS問わず)
- SDカードをさせるようにしておくこと(USBアダプタでも可)
SDカード
PCM4系のポルシェ

PCでの作業

ファイルのダウンロード

プレリリースを除いた、最新のM.I.BのリリースのSource Code(zip)をダウンロードする
- 私は、V3.6.0 - QR EditionのSource Code(zip)をダウンロードしました
mibsolution.oneからパッチをダウンロードする
- ユーザー名guest、パスワードguestでログインする
- M.I.B→(最新の日付)_M.I.B_Patchesをダウンロードする
  - 私は、20230926_M.I.B_Patchesでした

SDカードの準備

車でPCMのバージョンを確認する
- Home画面→ 設定 タブ→ ソフトウェアアップデート → バージョン情報
- 自分のは MHI2_JP_POG11_P0816 0816 でした
SDカードをFat32にて、8GB以下でフォーマットする(←ココ重要)
- 私は、16GBのSDに対してFat32で4GBでフォーマットしました
M.I.Bのzipファイルを解凍し、それをフォーマットしたSDにまるっとコピーする
SDカードのルートディレクトリにpatchesというディレクトリがあるので、そこに(最新の日付)_M.I.B_Patches.7zの中身をまるっとコピーする
patches のなかに1.で確認したファイルがあるか確認する。無い場合、諦めるか、近い日付や名前のファイルをコピーし自分のPCMに合うものにリネームする
- 完全自己責任です！普通に文鎮化する可能性があるので覚悟してください!!!
- 私が作成した&成功したファイル(MHI2_JP_POG11_P0816 0816)
SDカードのルートディレクトリに_Swdlautorun.txtがあるので、Swdlautorun.txtにリネームする
- これを行うと、SDカードをPCMに差したときに自動でアップデートが立ち上がるようになる

ボクスターでの作業

SDカードをナビ下のSD1スロットに挿入します
イグニッションをオンにします (エンジンは始動しないでください!)
自動実行を設定している場合、アップデートは自動的に開始されます
- 更新中は3回ほど再起動します。このプロセスが完了するまで待ちます。3回目の再起動後、5分間のタイマーを設定します
- 設定していない場合は、ナビでSD1からのソフトウェアアップデートを選択してください
「Home」ボタンを押してHome画面に戻し、「Car」ボタンと「Tuner」ボタンを同時に5秒間押し続けると、緑色のメニューが表示されます
インフォテインメントディスプレイの右側にあるスクロールホイールを使い、「MIB」メニューボタンまでスクロールダウン(左スクロール)します。スクロールホイールを押し込んで確定します。
この新しいメニューでさらにスクロールダウンし、「patch_unit_aio」メニューが表示されるまで進みます。スクロールホイールを押し込んで確定します
「Patch Now」ボタンまでスクロールダウンし、エンターを押してこの選択を確定します。いくつかの作業が開始されます
これが完了したら、「Home」を押してHome画面に戻ります。
センターコンソールにUSBケーブルでスマートフォンと接続し、AndroidAutoをペアリングすると接続できるはず

Wireless Android Auto (おまけ)

これでナビがネィティブにAndroidAuto対応できたので、あとは安い汎用品の無線化アダプタを買えば無線化できます!
本当は私が買ったも(4000円弱ぐらい)のを紹介したかったのですが、残念ながら終売...(´・ω・｀)ｼｮﾎﾞｰﾝ
一応、それっぽいやつのリンク貼っときます
(使えるかは保証しませんよ！)

〆

＿人人人人人人人人人＿
＞裏切りのRX-8!!! ＜
￣Y^Y^Y^Y^Y^Y^Y￣

本当は2台持ちしたかった...
では(^^)ノシ

NodeRedの自作ノードでDIコンテナを使ってみた(LT会のパワポ)

Thu, 30 Jan 2025 21:00:00 GMT

スライド

ビジュアルプログラミングIoTLT vol.19で発表した内容です

Github

node-red-contrib-di-container-demo

stm32-rsのDevContainer環境設定

Mon, 27 Jan 2025 08:30:00 GMT

あいさつ

2025年あけましておめでとうございますm(_ _)m
昨年は、いろいろありました...

元日から大地震
転職(愛知→東京)
車の買い替え(後日記事化予定)

漢字1文字で表すならば「動」か「変」が似つかわしい1年でした！
今年のモットーとしては、英語をなんとかしたいってところですかね...
ということで、今年もどうぞよろしくおねがい致しますm(_ _)m

stm32-rsについて

RustはLLVMを経て様々なアーキテクチャのバイナリを生成することができます。
stm32は皆さんご存知STMicroのマイコンなわけですが、Arm系アーキテクチャ(ただしマイコン用)なのでLLVMとしても対応しています。
Rustの素晴らしいDX(開発体験の方ね)をこの高コスパのマイコン開発に活かせれるわけです！

ただ、(STM32のビルドツールなどの)開発環境を整えるのが若干めんどいのが欠点...
この記事はそれすらを解決しようという目的です。

前提条件・事前準備

Ubuntu22.04かDebian12のLinuxOSマシン
- それ以外はカーネルパニックになっても知らないぞ！（・∀・）ﾆﾔﾆﾔ
  - WSL2は想定してないが、USB-IPの仕様次第?(そもそもまだ入ってなかったっけ?)
- 新しいバージョンな分には問題ないはず...
- 一応、Ubuntu20.04でもデバック開始とブレークポイントできた
VSCode
- Dev Container拡張機能
Docker
- DevContainerする場合はそりゃ必要。ない人は入れよう！
  - curl -fsSL get.docker.com -o get-docker.sh && sh get-docker.sh && sudo gpasswd -a $USER docker && sudo docker run hello-world && rm -f get-docker.sh
    - いつもお世話になってるQiita記事(ありがとうございます)
stm32マイコン(Nucleoでも可)
- J-Link化されている場合は本記事スコープ外
st-link(Nucleoじゃない場合は必要)

手順

任意のフォルダを作成し、それをVSCodeで開く
.devcontainerフォルダを作成し、その中にdevcontainer.jsonとinit.shを作成

(ホストOSのバージョンが古い場合は、imageを調整してください)

devcontainer.json

Copy

{
	"name": "Ubuntu",
	"image": "mcr.microsoft.com/devcontainers/base:jammy",	"features": {
		"ghcr.io/devcontainers/features/rust:1": {},
		"ghcr.io/devcontainers/features/common-utils:2": {
            "username": "root"
        },
        "ghcr.io/devcontainers/features/git:1": {}
	},


    "containerEnv": {},
    "remoteEnv": {},

	// ## IDE
    "customizations": {
        "vscode": {
            "extensions": ["marus25.cortex-debug"],
            "settings": {}
        }
    },

	"postCreateCommand": ".devcontainer/init.sh && cd /home/developer && tar -xvf /home/developer/gcc-arm-none-eabi.tar.bz",

	"remoteUser": "root",
	"runArgs": [ "-v","/dev:/dev", "--network" , "host","--device-cgroup-rule","c 189:* rmw"]
}

init.sh

Copy

#!/bin/sh
sudo apt update
sudo apt install -y openocd pkg-config gdb-multiarch aria2
sudo ln -s /usr/bin/gdb-multiarch /usr/bin/arm-none-eabi-gdb

aria2c -x16 -s16 -d /home/developer -o gcc-arm-none-eabi.tar.bz https://developer.arm.com/-/media/Files/downloads/gnu-rm/10.3-2021.10/gcc-arm-none-eabi-10.3-2021.10-x86_64-linux.tar.bz2?rev=78196d3461ba4c9089a67b5f33edf82a&hash=5631ACEF1F8F237389F14B41566964EC


rustup target add thumbv6m-none-eabi
rustup target add thumbv7em-none-eabi
rustup target add thumbv7em-none-eabihf
rustup target add thumbv7m-none-eabi

cargo install cargo-generate

# tar -xvf /home/developer/gcc-arm-none-eabi.tar.bz

あとはこのQiita記事に習って設定を進める
デバックは、OpenOCDを選択して実行すること

(おまけ)Embedded-halを使うともう少し開発しやすくなるはず

Example

ゆきまくら製の例(Github)

念の為注意

多分、Github CodeSpaceでは(クラウドのため)実行とデバックできないので注意
- もしかするとUSB-IPを頑張ればできるかもだけど、この記事ではスコープ外とする

〆

DockerとDevContainer優秀すぎ問題。
案外、組み込み開発では話題に上がりにくいコンテナ仮想化ですが、
普通に設定次第でハードデバイスにアクセスできるので、
この界隈でももっと話題になっても良いと思ってます。
(コンテナ仮想化の原理的にはできて当然なんよな)

意外と環境構築で躓く人って多いと思うんです(私も昔はそうだった)
なので「誰もが、迷わず、素早く」構築できることって結構重要だと思います。

是非是非、みなさんもRust✕STM32開発挑戦してみてくださいね！

では(^^)ノシ

RX-8の一年点検に行ってきました！

Tue, 25 Jun 2024 11:15:00 GMT

ディーラーにて一年点検

毎度の通りです。
なんやかんやディーラーが落ち着く（脳死）
最寄りが比較的建物が新しいディーラーだからちょっと高級感あって割と好きなんすよね〜

圧縮測定

さぁ！今年も圧縮測ります！
前回も言いましたが、RE用のコンプレッションテスターはどうやら常備していないようなので
予約時に宣言をお忘れなく！

結果

フロント

リア

...てか今気づいたんだけど、250rpm換算し忘れてるなこれ

去年との比較

昨年との比較マトリクスです

年	フロントrpm	フロント1	フロント2	フロント3	リアrpm	リア1	リア2	リア3
2023	250	6.6	6.6	6.5	250	7.2	7.1	6.9
2024	264	6.9	7.0	6.8	260	7.5	7.4	7.1

250rpm換算で考えるとほぼ一緒って感じですね!
下がってなくて良かったぁぁ😎

シンセレネシス×PCVバルブクリーナーの感想

結論、結構良かった！
気持ちかもしれないけど吹け上がりは良くなった気がする
ただ、今年の3月ごろからなんとなく吹け上がりが悪くなったり、(ただでさえ低い)低速トルクが若干落ちたような気がした
まぁ、変えてから10ヶ月近く経ってたわけですし、しゃーなしかな😅
今回の1年点検で変えてからはまた元通り！いいね👍

〆

今回は一年点検ということで、店舗で2時間ほど待機で終わりました
前回と大きく違うのは今回はコンプレッションテストの様子を見学させてもらえました！
そのためカラー写真というわけです
昨今の自動車の不正の煽りを受けてるのでしょうね...(てかあれは国交省も悪いだろ😡)
手間なのは承知ですが、車を愛する1ユーザーとしては非常に良い取り組みだと心から思いました！

...実はここだけの話その日の午前に新たなお車を成約致しまして...
これで8ちゃんに異常が見つかったら...と内申ヒヤヒヤしておりました^^;
(クラッチが軋むって？🙉🙉🙉🙉🙉🙉🙉🙉)
いやぁね？そんなカツカツで新しく車買うなよと。あほんだらかと
でもね？次の車は8ちゃんに負けないぐらい楽しく、かつロマンチックなので楽しみです！
かといって8ちゃんは正直手放したくないと思ってます、頑張って2台維持したいなぁ...

さて、今回の合計金額は

商品名	価格(円、税込)	技術料(円、税込)
シンセレネシス 0W-30	13,420	1,540
PCVバルブクリーナー	3,410	-
ガスケット	99	-
純正オイルフィルター	1,551	770
コンプレッションテスト	-	10,010
1年点検整備【乗用車】レギュラー	-	22,330
(合計)	18,480	34,650

全合計で53,130円(税込)となりました！
もともとの見積もりでは6万と言われてたので安くなってて助かった...
8ちゃん楽しいよこれからもよろしくね😎
では(^^)ノシ

【備忘録】LeadingQualityまとめ

Sat, 22 Jun 2024 09:00:00 GMT

手法

各章にまとめがあるのでそれを箇条書き方式で詳細を枝生やしていく ※ゆきまくらが思ったことは項目末尾に (感想) と記載している

1章品質と価値

歴史は繰り返す。ソフトウェア開発も製造業と同じように初めは 速さという最適化を重視し、次に品質を通じて顧客価値を重視
- TQM(Total Quality Management:総合品質管理)
  - 品質を「生産工程に焦点を合わす」のでなく、 「顧客への価値提供」 と定義した
粗悪な品質は顧客・会社・あなたのキャリアの「３つのC」に悪影響を及ぼす
- 品質がお粗末だったために企業が支払ったコストを合わせると、2017年は約200兆円と算出されている
  - その年のカナダのGDPに匹敵する金額
- バグフィックに疲弊し続ける環境ではエネルギー・創造性・モチベーションがチームから失われる
  - このような状況ではいくらマネジメントしても悪循環しか起こり得ない
「3つのC」に良い影響を及ぼすために、ビジネスの成果と顧客価値に当てるべき
- テストをするという「プロセス」にとらわれるのではなく、顧客価値を意識してビルド・機能開発・バグフィックの優先度を決めるべき

2章 3つの品質ナラティブ

ナラティブとは...
- 「物語」「話術」「語り」といった意味を持つ
  - 相手（患者、部下、顧客など）視点での物語を重視すること
  - ナラティブとは？【意味をわかりやすく】ストーリーとの違い(カオナビ)
品質ナラティブとは、企業で品質について考えたり話したりしてるその「語られ方」
組織の品質文化は、意識して表明しているかどうかに関わらず、品質ナラティブとして存在している
- 文化というものの本質はどのような立場であろうと、誰もがその企業の文化を宿していること
  - 例えば、文化という概念に疑り深い起業家が「文化とか言う曖昧なものなどどうでも良い！結果とパフォーマンスがすべてだ！」という発言こそがその文化を示している
品質ナラティブは以下で構成される
- 責任ナラティブ: 誰が品質に責任を持つかが考えられ、語られている
  - 例):経営層の判断により、AndroidアプリよりもiOSアプリに優先度を割きすぎた結果、Androidアプリの品質が壊滅的になり、結果として競合にユーザーを奪取された
- テストナラティブ: 品質向上につながる正しいテスト技法はどれか・どのツールを使うべきかが考えられ、語られている
  - 例):ある特定のテスト技法やツールさえあれば、品質を向上させられると錯覚してしまうこと
    - 銀の弾丸はない
    - 戦略とは本質的に問題解決であり、裁量のアプローチは直面する具体的な問題により異なってくる
- 価値ナラティブ: 品質に投資した場合の見返り（ROI: 投資収益率）が考えられ、語られている
  - 例:)品質を最大化すべき投資として扱う人と、最小化すべきコストとして扱う人
    - 経営人は品質への投資がもたらす具体的な価値を必ずしも納得しているわけでない
品質ナラティブを理解することは、組織の品質文化を転換するための第一歩である
- まず、現在の社内のナラティブを把握する
  - 組織のさまざまな授業員に「業務で耳にする、品質に関する発言のトップ3」を聞くと従業員が品質についてどう考えているかフィルタリングされていない答えが得られる
- 次にそれをどのようにしたいかを考える
  - 品質を社内外でどう認識してほしいのか
  - 1年後にはどんなチームになっていてほしいのか

3章品質文化醸成

社内で品質のリーダーシップを発揮するためには、影響力と説得力を身につけねばならない
- リーダーであれば何らかの形で「売らない売り込み」に何時間も費やしている
影響力を発揮できるようにする方法は以下である
- 誰を味方につけるかを知る、そして彼らのモチベーション・目標としているもの・恐れているものが何であるかを知る
  - 重要なステークホルダーの洗い出し、彼らにゴールや課題、反対する理由や彼らが属するチームに与える影響を質問してみる
    - 説得して味方につけたい相手のことを詳しく知れば、確実にアピールできる伝え方が見つかる
      - より多くの賛同者の支持を集められるだろうし、アイデアは更に明快に理解されるだろう
  - 経営層を相手に話すときは、顧客とビジネスにどんな影響があるかを中心に捉えるべき
    - システムアーキテクチャ構築の原理のビューを彷彿とさせた(感想)
- チーム同士・メンバー同士の共感を生み出して連携と相互理解を深めること
  - 例):営業部長とカスタマーサポート部長を入れ替えたら共感が醸成され、いかに目標を達成するかにフォーカスした共通の視点が作られた
    - ここまで大げさにやらずとも、短期間的に異なる分野の人々が同じ業務を行うことでアイデアを共有すればよい
      - ペアリングセッションという
    - Atlassian社では開発エンジニアと品質チームをうまくペアにしている
      - この例では品質チームから探索的テストのやり方を教わり、良いテストシナリオを開発者が導けるようにしている
    - ランチ&ラーニング
      - 経営陣と昼食をとりながら対話する活動
      - 経営陣と運用面を担う人たちとの間に醸成される共感もある
- 自分の考えに重みを持たせるために、エビデンスを用いて品質ナラティブを補強すること
  - 社内から得られるエビデンス
    - 自社で持っている情報やデータ、チームで試した取り組みなど
  - 社外から得られるエビデンス
    - 他社事例や統計情報など
      - ただし、共感してもらうというより信頼してもらうためと捉えるべき
- 勢いを生み出すために、社内で品質推進者を増やすこと
  - アイデアを受け入れてくれそうな役員を見つけ関係を構築しよう

4章手動テストと自動テスト

自動テストは銀の弾丸でない。間違ったテストは逆に品質を悪化させる可能性がある
- 本の事例たち
  - テストインフラの一部を最適化しすぎた
  - アプリケーションの一部は自動テストが実行可能になるよりもずっと早く変更されていった
  - テストインフラは壊れたままだった
  - 複数の異なるテストツールをすべて一緒に動作させようとして、大変な時間を要した
  - バグが自動テストをかいくぐっていき、ユーザビリティが壊滅的になっていった
「すべてのテストを自動化できるか？」という疑問に対しては、テストに以下のタイプがあることを考え答えを出す
- 調査 : 認識されていない情報を明らかにするためのテスト
  - テストケースの想像力が大事
  - どれだけ多くの探索的テストができるか
- 検証 : プロダクトの情報が期待通りかをチェックするテスト
  - 何が起こるべきかを期待した状態で行われる
    - 通常は成功か失敗かの2択しか無い
「すべてのテストを自動化すべきだろうか？」という質問に対する答えは、以下の要素から考える
- そのテストを自動化した場合、変更の手を入れることなく長期にわたって利用できるか
- 自動化したいテストケースの手順が比較的シンプルなものか
- テストを自動化することで手動で行うよりもコストを抑えられるか
- これらの話は単体テストの考え方/使い方が詳しい(超良書)

5章プロダクトの成熟度と品質

ユーザーは、イノベーターからアーリーアダプターを経て、レイトマジョリティやラガードへと増えていく
- - 引用:イノベーター理論をわかりやすく解説！【事例あり】東大IPC
製品ライフサイクルの中で、QA(Quality Assurance、品質保証)へのアプローチが変化するのは、大きく3つにカテゴライズされる
- 実証段階: プロダクトマーケットフィットを模索する
  - ヒットするかわからないため、品質というよりも以下にPoCできるか
    - プロダクトの初期ユーザーは問題に寛容なユーザーが多い傾向だが、成熟した業界であるほど期待値は通常高くなる
- 予測可能段階: スケールに向けて安定したインフラを模索する
  - 通常、チームがこの段階で焦点を当てるのはソフトウェアの安定性
    - 実証実験での不足したテストを挽回しなければならない
      - TDDベースで開発するとリファクタもしやすい
- スケーリング段階: マイナスの影響を最小限に抑え、成長への扉を開け放つ
  - この段階になると1%の影響すらブランドイメージに大打撃を与えかねない
    - ブランドというのは、すべての資産の出来の良さに関連付けて認識されるもの
うまく行かなくなってきたというのは、必ずしもQAが失敗し始めたことの表れとは限らない
- ニーズの変化に合わせて戦略を適応させることが、成功のために必要だと示唆されている
  - プロダクトが成熟して複雑になり、同時ユーザーが増えるにつれ品質に関する課題が変わっていく

6章継続的テストとフィードバックループ

本当の継続的テストを提供するためには、最初のコンセプトから稼働後まで、すべての段階でテストを行う必要がある
- 自動テストはソフトウェア開発ライフサイクルを構成する要素の1つにすぎない
- 85%以上のバグが開発の設計とビルドの段階で生じており、ときには1行もコードを書かないうちにバグが混入することもあり
  - 早い工程でバグフィックスしたほうがコストが抑えれる
    - 確かコストは指数関数的に増えたはず(感想、ソースは忘れた)
開発パイプラインをよく理解し、それぞれの段階で開発チームにどのようなフィードバックを提供する必要があるか知る
どんな情報が求められているかに応じて実施するテストの種類が決まる
テストの種類ごとにフィードバックループは異なっており、得られる情報・かかるコスト・フィードバックまでの時間に違いがある
- ユニットテストは即座に結果がわかるが、探索的テストは中には数日もかかるものがある
フィードバックの最適化には以下の分類がある
- スピードよりも価値を優先する
  - どれだけフィードバックが早くても、エンジニアが求める情報でないと意味がない！
- 同時並行のテスト実行でスケールを拡大する
  - テストが可能な限りモジュール化され、分離していることが大事
- 継続的改善を通じて学ぶ
  - ただバグを見つけるだけでなく、同じミスが2度と起こらないように振り返り(レトロスペクティブ)をするべき
- チームを活かすインフラを構築する
  - 開発パイプラインをマップ化し、どこでどのようなフィードバックが必要なのか特定することがベストな改善の余地の探り方
  - 詳細は7章で語られる

7章テストインフラへの投資

品質を上げる方法はテストだけではなく、問題を迅速に修正できるようなインフラが整備されていることも重要
- 自動テスト、自動デプロイ、容易なロールバック
CDが実装されると、本番環境で問題が発見された場合に迅速にリリースしたり、ロールバックしたりできる
モニタリングとアラートシステムは「原因ベース」ではなく「現象ベース」であるべき
- これにより、チームはユーザーが被った影響に集中できる
  - ユーザーが本当に気にしていること
    - 正常に使えること: 「ページが見つからない」と表示されるエラーが起こったり、画像が表示されないなどの、何かが利用できない状態で無いこと
    - レイテンシー: データのロードが常にクイックに行われること
    - 完全性・永続性・最新であること: 格納されているデータがセキュアに守られていて、使いたいときに使えること
    - 機能: 使いたい機能が正しく利用できること
    - 情報セキュリティのCIAにつながるものを感じた（感想）
本番環境でのテストでは、ユーザーが使用するものに最も近い環境でテストを行うことでプロダクトの品質を最も明確に理解できる
- 例): 開発エンジニアが継続的にデプロイし、重要な指標に関わる影響をモニタリングし、問題が発生したときにロールバックできる強固なインフラを整備する
  - より本質的なテストの価値をQAチームも開発チームも見出すことができるようになった
- カナリアリリースという手法もある
  - プロダクトを開発する社内チームや一部のユーザーだけに対し、限定的に機能をリリースする手法
本番環境でのテストを実施するにはベストプラクティスに習熟していなくてはならず、それさえやればその他のテストは不要と考えるべきではない
- あくまで本番環境のテストは手法の一つに過ぎず、本番環境以外のテストを一切しないと大問題になる！

8章チームと会社の成長指標

成長指標は企業の成長に最も大きな影響を与え、顧客が企業のプロダクトやサービスから最も価値を得ているところに見出される
- 虚栄の評価基準(リーン・スタートアップより)
  - 成果につながっているように感じられるが、行動に繋がりにくく、ビジネスの成功とも相関しない数値である
    - 例): テスト実行にかかる時間や検出バグ数など
      - それを最終的なゴールにするのではなく、顧客価値という道のりの途中にある分には問題ないはず(感想)
成長指標は主に以下に分類される
- アテンションベース（注目ベース）: B2C企業でよく適用される
  - プロダクトの本質がエンターテインメントや情報を提供するものである場合に有効
    - ユーザーがどれだけの時間を費やしたかに注目した成長指標
- トランザクションベース（取引ベース）: Eコマースやマーケットプレイスを手掛ける企業でよく適用される
  - プロダクトの本質が、ユーザーに商品やサービスを購入させることである場合に有効
    - ユーザー体験を最適化すること及び購入行動の摩擦を低減させることに注目する成長指標
- プロダクティビティーベース(生産性ベース): B2B企業でよく適用される
  - プロダクトの本質がデジタルタスクやワークフローを完遂できるよう顧客を支援する場合に有効
    - 顧客に与えられたタスクをどれだけ素早く成功させられるかに注目する成長指標
成長指標を特定するには顧客に提供してコアバリューを調べ、それを測定に利用する
- ビジネスのコアと自分たちの作業を結びつけることで、取り組みの価値を自チーム内、同僚、マネージャーと共有できる
企業の成長指標が何であるべきかが特定されたら、品質に関わるすべての活動をその指標に集中したものにする
- こうすると、企業の成長を促進するものを中心としたチーム連携が図れる

9章ローカルペルソナ

共感エンジニアリング
- エンジニアが顧客や顧客を直接サポートする人と一緒に時間を過ごすことで、プロダクトや機能の開発にあたって顧客がどう考えるかを理解できる
  - デザイン思考と通ずるものを感じた(感想)
    - 共感（Empathize）
    - 定義（Define）
    - 概念化（Ideate）
    - 試作（Prototype）
    - テスト（Test）
アプリケーション利用者のユーザー体験は利用しているデバイスやOS、そして場所によりまったく新しいものとなる
- お国柄ってやつ(感想)
顧客が求める品質を確実に体験できるようにするには、実環境でのテストを目標にする必要がある
- プロダクトがローカルペルソナに対して確実に価値を発揮できるかを確かめれるよう、テストをローカライズできるかが重要
ローカルペルソナの環境でテストするために取れる方法には以下のものがある
- チームを現地に派遣してテストする
  - 持てる限りのデバイスをチームに持たせ、ローカルペルソナと同じ環境でテストを行うやり方
    - コストはかかるが、現地特有の問題を一番把握できる
- ベータ版のユーザーなど既存のユーザーの力を借りてプロダクトをテストする
  - 欠点としてコミュニティーを管理するのに追加のコストや手間がかかり、ボランティアのメンバーはクラッシュログや再現手順などを明確に与えてくれないかもしれない
- クラウドソーシング型のテストプロパイダーなどの外部パートナーと協力する

10章品質戦略のリード

ビジョンが必ず先だ
- 明確なビジョンがあればそのうち正しい戦略がついてくる。
まず自分自身のビジョンを定め、それが自分の会社・チーム・部門のビジョンに沿っているか確かめる
- 優れたリーダーなら誰でも自分がすることの理由を明確に理解することから始めると指摘されている
  - TEDトークの「優れたリーダーはどうやって行動を促すか」より
- 自分自身のビジョンは長期的に、チームでのビジョンは1〜2年を目安に
目的地と現在地を評価してスタート地点とし、戦略を策定するために何が重要なのかを理解する
- 現在の品質ナラティブ、プロダクト成熟度、プロセス
戦略策定のプロセスに従って考えているときに混乱していないとしたら、おそらくそれは間違ったやり方をしている
- 戦略というのは、チームが一緒になって海の真ん中に落とされるようなもの
  - もし混乱せずにプロセスを進められる人がいるなら、やり方を間違っている可能性が高い
  - どれだけ経験を積み重ねたとしても、戦略策定は考えて考えて考え抜く必要がある！
- 品質ナラティブ、テスト、価値、チームのスキルとキャパの観点を交えて検討
リソースの制約と、望む場所に到達するためにほかに何か必要なものがないかを考慮すること
戦略がうまくいかないときにはピボットしてもいいし、調整してもいい
- ピボット:ビジネスを軌道修正するために企業経営や事業戦略を転換すること

〆

今まで、エンジニアとしての品質ばかりを注視してましたが、
会社の文化やナラティブから品質を高めるというアプローチが非常に興味深く、面白かったです！
本書はOSC2024Nagoyaにてこの本を訳された方のプレゼンで存在を知ったのですが、本当に買ってよかった...
良書だと思います。ぜひ経営層にも一読していただきたい内容ですな😎

個人的な独断と偏見な感覚だと
ビジネス色6、技術色4な感覚です。
ですが、エンジニアでも十分読めるし、なんならイメージすることだって容易なぐらいでした。

いやーやっぱりイベントに足を運ぶのはいいものですね...
一期一会ですな😋

では(^^)ノシ

360度カメラ動画の音を消す[GoProFusion]

Wed, 12 Jun 2024 08:00:00 GMT

背景

先日、会社のメンバーと遊びに行く機会がありました
そのときに、アクティビティを360度カメラで撮影すると面白いかな〜と思い、
GoProFusionという360度カメラを中古で買いました！
本体のお値段としては15000円ほどで、2018年発売、新品だと88000円もするらしい（ワォ

GoPro社としては初の360度カメラらしく、色々クセがありますが、
意外とキレイに撮れます

んまぁ、色々撮影したわけで、
360度映像となると共有がなかなか難しい...🤔

今回はYouTubeにアップロードし、URL知ってる人のみの限定公開という形で
共有することにしました

ずっととりっぱで、イケないことまで喋ってたりするので
今回はそれをごっそり除こうという企画です！^^;

下準備

以下のものを準備しとく

360度映像ソース(.mp4がおすすめ)
- 今回はGoPro Fusion Studioでエンコードしたものを使用
FFmpeg
- いつもの。音を取り除く
Spatial Media Metadata Injector(GoogleのOSS)
- こいつが動画に360度のメタ情報を埋め込むツール

音を取り除く

Copy

ffmpeg -i 360度動画.mp4 -vcodec copy -an 生成される無音の360度動画.mp4

-anがキモ
こいつが音を消すやつ

メタ情報を埋め込む

Spatial Media Metadata Injectorを起動
My video is spherical (360)にチェックを入れる
Openをクリックし、生成される無音の360度動画.mp4を選択
Inject metadataをクリックすると、保存先を聞かれるので指定する
出来上がりを待つべし待つべし
- 意外とすぐ終わる

GoPro Playerなどで生成した無音360度動画がちゃんと360度モードで見れるか確認してください

YouTubeにアップロードする

手順にしたがって普通にうｐる
- アップロードしてみないと360度動画として上がったかが確認できないっぽそう

〆

360度カメラ、結構面白いです
ただ、

電池持ち悪い
エンコードに少々難あり
- 特にGoProFusionは公式から見捨てられた感

GoProFusionには大きく2つのエンコード手段があります

スマホのGoPro Quikアプリにてエンコード
PCのGoPro Fusion Studioにてエンコード

エンコード速度としては、 スマホのほうがPCの20〜30倍ぐらいエンコード速いです

そうなると、スマホでいいじゃんってなるのですが、
PCでやったほうがカメラのつなぎ目の処理が上手に感じるんですよね...
まぁなんで、急ぎな映像じゃない場合はPCでやったほうがいいのかなと思いました
(それにストレージも結構食うしね^^;)

んまぁ、そんな感じでよい360度カメラライフをお送りください〜😎
(純正も互換品もバッテリーパックがほぼ市場になくて困ってる...orz)

では(^^)ノシ

CSharpの拡張メソッドで関数型言語のパイプ演算子風を考える

Tue, 04 Jun 2024 08:00:00 GMT

背景

先週、オープンソースカンファレンス名古屋というイベントに参加してきました！
そこで、NervesというElixirベースの開発フレームワークの存在を知り、絶賛Elixirお勉強中でございます
(いやTypeScriptやれよ)

当方、Elixirが実質初の関数型言語でございまして、
色々学びが多くて嬉しいです（語彙力

その中でパイプ演算子というものが非常に興味を持ちました
ざっくりどういうものかを説明すると

Copy

foo(bar(baz(new_function(other_function()))))

というクソ入れ子なブツを

Copy

other_function() |> new_function() |> baz() |> bar() |> foo()

という書き方ができるというものです

入れ子がスッキリするのも良いのですが、自分的には
本来呼ばれる順番がシーケンシャルに並んでいるところに美しさを感じました

ふむ、これは是非CSharpでも活かしたいと思ったわけです
(Linqだってある意味同じことをしてるじゃないですか！Linqはいいぞ!)

完成品

Githubのレポ
 Nugetでも配布しました！

解説

中の実装は以下のみです！

Copy

/// <summary>
/// 関数型言語のパイプ演算子のような機能を拡張メソッドにて提供する
/// </summary>
/// <typeparam name="T">対象となる値の型</typeparam>
/// <param name="value"></param>
/// <param name="action">返り値がVoidとなる任意の処理</param>
/// <returns>拡張メソッドの引数valueの値が何も処理されずにそのまま返される</returns>
public static T Pipe<T>(this T value, Action<T> action)
{
    action(value);
    return value;
}

/// <summary>
/// 関数型言語のパイプ演算子のような機能を拡張メソッドにて提供する
/// </summary>
/// <typeparam name="FromT">対象となる値の型</typeparam>
/// <typeparam name="ToT">引数funcによって変形された返り値の型</typeparam>
/// <param name="value"></param>
/// <param name="func">任意の値を加工する処理</param>
/// <returns>引数funcによって変形された返り値</returns>
public static ToT Pipe<FromT, ToT>(this FromT value, Func<FromT, ToT> func)
    => func(value);

この2つで、結構やりたいことができます

ケース1 つらつら処理をつなげる

※Should().Be()ってやつはFluentAssertionっていうテストのヘルパー的奴です

Copy

int value = 1;

value.Pipe(x => x + 100)
    .Pipe(x => x.Should().Be(101));

ケース2 引数を省略

Copy

int value = 1;

// 事前に関数を定義しておくと...       
Func<int, int> addFunc = x => x + 100;

// 自動的にマッピング!
value.Pipe(addFunc)
    .Pipe(x => x.Should().Be(101));

※お察しかと思いますが、関数の引数が2つ以上ある場合や型がマッチしない場合はラムダ式必須です
※もちろん、Func型でなくても普通に定義した関数でも同等のことができます

ケース3 処理の間にログ的な出力を差し込む

Copy

var value = new DummyRecord(1, "yukimakura");

var thruFlag = false;

Func<DummyRecord, int> tfFunc = x => x.ID;
Action<int> modThruFlag = x => thruFlag = true;
Func<int, int> addFunc = x => x + 100;
value.Pipe(tfFunc)
    .Pipe(modThruFlag) //こいつをたとえばConsole.WriteLineとかにしても良い、そうするとtfFuncの返り値の値が標準出力される
    .Pipe(addFunc)
    .Pipe(x => x.Should().Be(101));

thruFlag.Should().BeTrue();

...ふむふむ、なかなか魅力的ではないですか？（・∀・）ﾆﾔﾆﾔ

デメリットの考察

...さて、表面上はいいことづくしなように見えてしまいますが、
このCSharpという王道オブジェクト指向言語において考えなければならない問題があります

如何にこの関数型アプローチがハマるか

まず、これが根本的に致命傷かもしれません
純粋関数のような実装ばかりしていればこのアプローチにハマると思います
しかし、大半の場合はオブジェクトに操作が紐づくケースだと思います
...といいますか、オブジェクト思考だと一般論的にはそちらのほうが美しいとされることも多いのではないのでしょうか？

Copy

internal class HogeClass{
    public int Count {get; private set;} = 0;

    public int CountUpAndGet(int count){
        Count += count;
        return Count;
    }
}

てきな、CountUpAndGet()を呼ぶごとに結果が変わる、
純粋関数ではないような作りです

これだと、関数型アプローチにはハマらないと思いますが
別にこれは絶対悪というわけではないと思います
(もっとも、単体テストを考えたときに脆いテストになってしまいそうですが...
参考:UnitTesting)

知らない人がこのコードを見たときの違和感

...これは慣れてもらうしかない部分もあるかもしれませんが、
直感的な部分で、「これ、意味あるの？」と思われる方も居られる気はします

事実、これを導入したからと言って圧倒的に開発しやすくなっただとか、
処理性能が上がっただとかは無いです

あくまで、考え方的な話にはなると思いますが、
入れ子構造よりも、行われる処理が文頭からシーケンシャルに行われるというナチュラル感や、コードの文字数の削減(ただし微々たるもの、チリツモやで！)の恩恵はあるので私は無駄だとは思いません

昨今、多様性多様性と大絶叫している世の中なのでチームで開発する場合は
合意形成が大事だと思います(当たりさわりの無い言い回し)

〆

書いてるうちに途中でPipe()よりもThen()のほうが適切に思えてきたゆきまくらです^^;

この件はぶっちゃけ正解はない世界だと思いますが、
影響の少ない範囲で用法用量守って効率的に開発する分にはいいと思います
なにも、オブジェクト指向言語だからといってオブジェクト指向のパラダイムに縛られる必要は無いのです！
(たとえは、JavaのSpringだってAOP(アスペクト指向プログラミング)を練り込んできてるでしょう？)
まぁ、ユースケースをイメージすると、DIおよびストラテジーパターンを採用しているアーキテクチャなシステムがあると想定して、その末端の各ストラテジーにこの手法を採用するとかは影響範囲が大きくなくて比較的導入しやすいのかなとは思います

純粋関数であることの利点としてはUnitTestingでも書いてあるように、
単体テストの単純化および脆くなりにくいテストの構築に貢献してくれるはずです
なので、パラダイムの(用法用量を守った)多様性も注視して今後は開発していくのが何よりも重要なのでしょう(持論)

では(^^)ノシ

BlazorとPixiJSを融合させてみるぞ

Tue, 02 Apr 2024 10:00:00 GMT

前置き

Blazorでグラフィカルなアプリケーションを作るとき皆さんはどうしますか？
...といいますかぶっちゃけあまりニーズが少ないのか、はたまたこれから出てくるのか🤔

ちょいと仕事でBlazorでグラフィカルなアプリケーションを作らなければならず、
とりあえず、BECanvasというHTML5のCanvasをC#にラッピングしてくれるライブラリを使っていました。
しかし、お察しの通りヤツはGPUをあまり賢く使ってくれません。
(結果激重になってしまった...orz)
と、言うわけでGPUを上手に使うことで見事SDGsを果たそうという企画です（大げさ

レポ＆デモ

ゆきまくら製デモのレポです

デモの概要を軽く説明すると、Click meを押すとキャンバス上に■が現れます。
その■をクリックまたはタップすると、色が変わり、キャンバス外のlask clickobjの項目に選択されたオブジェクトの情報が表示される感じです。
Pixi-Viewportも導入してあるので、思うがままにヌルヌル拡大縮小できます!

問題点

PixiJSの導入バージョン及び、Pixi-Viewportの導入バージョンが古め
- なんか、Pixi-Viewportが最新だと言うこと聞いてくれなかった...(´・ω・`)
  - さらに最新のPixiJSだとWebGPU対応周りで結構変わってるっぽい？
- 裏を返せば、Pixi-Viewport使わない方は最新を導入してください

詳解

気が向いたら書きます＆レポの方も気が向いたらコメント追記します（おい

〆

昨日はエイプリルフールだからなんかネタぶっこもうかと思って、
音のソノリティ✕アル中カラカラ（もう古い？）の動画でも作ろうかなと思ってたが、
Tictokでやってる人見つけてしかもそんなにバズってなかったので萎えました（おい

にしても、PixiJSとかWebGLすごいね...
こんなお手軽にプラットフォーム気にぜずGPU上手に使えるとは...
標準化及びそれに準拠してる方々には頭が上がりませんな^^;
では(^^)ノシ

ThinkPadX1C6のファンをNidecから変えて比較してみる！

Sun, 10 Mar 2024 10:00:00 GMT

ネタ元

reddit
↑概要としては、夫婦でThinkPad X1 Carbon Gen6を買ったのだが、
妻の機体が明らかにうるさい＆サーマルスロットリングが起きているというもの
ちなみに、うるさい方がNidec製の模様(日本電産どうした！！？)

んで、うちの子も裏蓋開けたらNidec製でした...
Ubuntuでは、パワーマネジメントが上手いのかぶっちゃけあんまり気にならなかったのですが、
ひょんな事から、Windowsのゲームが遊びたくなり、Windowsで使うと、めちゃくちゃ悲惨！！！
ということで、アリエクで仕入れてみたので比較しますぞい

商品リンクはこちら

写真で見る違い

写真左側が今回買ったファンで、右側がNidecファンです
ひと目見ただけで明らかに通気口のサイズが違うことが分かります
Nidecは空気吸う気ほとんどないですね^^;

余談ですが、アリエクの写真ではよくわからないメーカーの絵だったので期待していなかったのですが、
実際届いたものを見ると、Delta製のシールが貼ってありました！
まぁ、その代わりに中古っぽかったですけど、良しとしましょう（寛容

ベンチマークや観測方法

TH3P4G3にてRTX2080を外付け
3DMarkのFireStrike（アルティメットじゃないやつ）
Windows11 23H2
OpenHardwareMonitorにて1Hzごとにセンサーデータをロギング

計測結果

CPUの使用率、温度、動作周波数の推移

CPUの使用率、温度、動作周波数の3つの観点でグラフ化しました
※微妙にデータの取得数が違うのはご了承ください🙇‍♀🙇‍♀🙇‍♀

3DMarkの結果

Nidec

Delta

約20%もスコアが向上しました！！！

考察とか感想とか

換装前は起動しただけで100℃手前
- そりゃクロック上がらんわな...
  - 2.2GHzが平均ぐらい。それ以上は上がらん
音は静かになった
- 計測手段を持っていないので官能検査ではあるが、静かに鳴った気がする
風量も増えた気がする
- 官能検査（以下略

結論

おすすめ！
ThinkPad X1C6が気に入ってるなら5000円の投資の価値ありかと

では(^^)ノシ

10万円アンダーでディザスタリカバリ対応のSSDのNASを構築するぜ！（概要編)

Sat, 10 Feb 2024 15:00:00 GMT

経緯・モチベーション

2024年1月1日、北陸に大きな地震が牙を剥きました。
ちょうど実家に帰っていた私は家族総出で津波から逃げたわけですが、そんな中で姉貴がラップトップの心配をめちゃくちゃしてました
姉貴は所謂ネト充側の人間でして、データが非常に重要とのこと

ラップトップを家に置いてきたことをとても後悔していました
今回は偶然何事もなかったので良かったですが、
この際せっかく遠隔地に私がいるのにこの状況を活かさないのはもったいないと思い、
構築しようと思い至ったわけです

すでに実家にはNASがあり、そこに家族写真などのデータもあるため、父親も案外乗り気になってくれて、SSDを買ってくれました(実質総額の半分を出してくれました、ありがとう)
...まぁ、フルSSDの部分は私のロマンなんですけどね^^;

全体の構成図

ざっくりとしたソフト構成

MiniPC(ゆきまくらのお家)

SoftEther VPN Server

OSはOpenWRTのAmd64版
- DDで書き込んだ
4系
- OpenWRTのパッケージマネージャーでは5系と4系がラインナップされてるのだが、何故か5系だと、OpenVPNのポート設定が変えれなかったため
- ホントはDockerで入れたかったけど、DockerでやるとTapデバイス周りでコケたので断念
SecureNATは無効化
- スループット上げるため

NFSサーバー

外付けHDDをネットワークストレージにするため
バックアップ用で、1日1回程度で実家SSDNASとrsyncする
- 原則、他のPCはこのHDDNASにアクセスしない
Dockerにて構築予定

MiniPC(実家)

mdadm

SSD4枚をソフトウェアRaid0化する
- ちなみにフルSSD化するモチベは静かなのと、小さいのと、ランダムアクセスが速いから
  - シーケンシャルアクセスを極めても1Gbpsのネットじゃ活きん...(´；ω；｀)

Samba Server

普段みんながアクセスする用
Dockerにて構築予定
- 2TBほどTimeMachine設定

登場人物紹介

MiniPC(ゆきまくらのお家)

メルカリで買った中古のMiniPC
小さいくせに、本体に電源ユニット内蔵なのが結構気に入ってる

Price : ￥9,000
Model：FUJITSU FMVB10001
CPU : Core i5-7500T CPU @ 2.70GHz
RAM : DDR4 6GB
OS : OpenWRT (23.05.2 (r23630-842932a63d))

MiniPC(実家のNAS)

ヤフオクで買った中古のMiniPC
電源ユニットは外だしだが、ミニPCのくせにUSB3が6つのあるのが気に入ってる

Price : ￥5,000
Model：NEC Mate MC-T
CPU : Core i3-6100T CPU @ 3.20GHz
RAM : DDR4 8GB
OS : Ubuntu 22.04.3 LTS

OpenWRT導入済みHub

引っ越しした当時、ヤマダ電気で買ったIODataの最安Wifiルーター(たしか4000円台で買ったはず？)
偶然OpenWRTに対応してた
最安のくせに、OpenWRT入れてみたら結構性能良くて感動した

Price : ￥4,000（ぐらい
Model: WN-DX1167R
CPU : MediaTek MT7621A @ 880MHz
- しれっと2コア4スレなのすごい

SSDたち

CFDの2TBのSSD

Price : ￥13000 x 4 = ￥52000
速度は少し遅いが、値段の割にTLCでTBWが1200TBWあったのが決め手で購入
USBアダプタはアリエクにて購入
- ￥5,000

HDD

WDBlueの8TB(WD80EAZZ)

Price : ￥17000
定番のWDBlue。安くて評価も高いためこれにする
USBアダプタはAmazonにて
- ￥2,000

合計金額

約￥94,000でした!!

一部丼勘定ですみません🙇‍♀

〆

今回はここまでとさせてもらいます
一部のものはすでに設定が終わっているので、
各コンポーネントたちは追々記事化していきます
どちらの家もIPv4 over IPv6なので、スループットが安定して200Mbps以上出ています
そのため常時接続でも実用的かと睨んでいます
実際、家族の協力を得て私の家のVPNサーバーにつないだ状態でOoklaのIPA Server 400Gでベンチしたところ、午後8時ぐらいだったにも関わらず、250Mbps以上出てました
10万アンダーと書かれているものの、半分はSSDなので、HDDにすることで大幅なコスト削減が可能かと思われます少し、複雑で多少ハードルは高いかもしれませんが、
災害等に備えるのも悪くないのではないでしょうか？

また、VPNで同じネットワークに参加できるので、遠隔地のPS5にリモート接続や、遠隔地のテレビ視聴など副産物があります
なかなか良いですね

話変わって、この記事はMeta Quest2を被りながらUbuntuマシンで書いております
最近VisionProが出て、MRにてPCの画面を見ながらの作業ってどうなんだろうと思い、
手元にあったQuest2で試しているわけです
Linuxマシンでは無理だろな...と思い調べてみるとImmersedというソフトがなんとLinuxも対応しているではありませんか！！
ということでやってみた次第です

ブラインドタッチができると結構ありだなーって思います
ただ、純正ストラップだとやはり視界がぼやけやすいかもあと慣れてないので目が疲れる...
けどめちゃくちゃトラックポイントとヨギボーの相性いいです（笑）みなさんもお試しあれ^^;

では(^^)ノシ

copyqでwin10のようなクリップボード履歴をUbuntuで味わおう！

Sat, 10 Feb 2024 10:00:00 GMT

Win10以降のクリップボード履歴、良き

正直あまりWindowsが好きではないゆきまくらです（ドモドモ
ただ、近年のWindowsで Win + v で呼び出せるアイツ、クッソ便利なんよなぁ...
...ということで、Ubuntuちゃんでもこれを実現していきましょう！

copyqを導入する

Copy

sudo apt install copyq

簡単お手軽ですな(^^)

セットアップ

UbuntuのOSの設定から、super + vのショートカットを消す

2. UbuntuのGUIメニューからcopyqを起動 3. 設定画面を開く 4. 自動起動ON 5. マウスカーソルの下にメインウィンドウを表示のショートカットをsuper + vにする

動作確認

任意の場所で super + vを押すことで、
マウスポインターの周辺にcopyqの履歴画面が出てこればOK!

〆

Ubuntuが120％使いやすくなったぞ！（雑
では(^^)ノシ

TH3P4G3(85W版)とTeslaP40をUbuntu22.04でセットアップした【外付けGPU】

Sat, 10 Feb 2024 09:00:00 GMT

この記事のTeslaP40版です

そもそもなぜTesla P40🤔？

今、LLMがアツい！（そんなのわかってる
最近では結構ローカルでLLMを動かす遊びができたりします
GoogleさんやらMicrosoftさんやらはスマホで動かす用の小規模言語モデルというもの開発中とのこと(SLMって言うらしいよ)

ローカルLLMをやるにあたって死活問題なのが、そうVRAM!
LLama系で量子化したモデルでも賢いのを使おうとすると平気で何十ギガも食ってくる(ﾋﾟｴﾝ
そこで、目をつけたのがTesla P40です

ざっとスペック

項目	内容
Cudaコア数	3840
Compute Capability	6.1
VRAM	24GB
TDP	250W
詳細はTechPowerUpさんにて

なんと24GB！！
でも、RTX3090やRTX4090だって24GB...
それにTeslaなんて....お高いんでしょう？🤔

...それがなんとebayやアリエクでは 2〜3マソで買えるのです!(もちろん中古ね)
多分、データセンターの世代交代による引退品が大量に流れてきてるのでしょうねぇ

ちな、スペック的にはGTX1080Ti相当とのこと
つまり、TensorCoreは搭載されておりません...（悲しい
それでもいいという方はお試しあれ！（なんせ安いからシクッてもあんまりイタくないのがいいよね

物理的な構成

TH3P4G3(85W)

PCIeをThunderbolt3に変換するアダプタ

Tesla P40 24GB

ebayで買った
- 1週間で届いた（SFExpress速い。しゅごい

ATX-1260GA1 80PLUS BRONZE 600W (Enhance製)

ハードオフで3300円買った動作保証品(ジャンクじゃない)

ThinkPad X1 Carbon Gen6

相棒
スペック
- Intel Core i7 8650U
- 16GB RAM(速度はシラネ)
- 訳あってWLANはBroadcom bcm94360ng
  - お察しください(^_^;)

いろいろやったこと

nvflashでcomputeモードからgraphicsモードに切り替える

これがコンシューマ機との大きな違い pcieのデバイスのアクセス領域をちょめちょめして高速化する機能がデフォで有効らしく(Resizable BAR)、
それが、原因でdmesgにてエラー吐きながら認識・再認識を繰り返します なので、まずGPU側にてそれを無効化します

頑張ってnvflashというユーティリティを入手する
eGPUを接続し、ubuntuの設定→このシステムについて→ソフトウェアとアップデート→追加のドライバにてX.Org.X.serverになっているか確認する

なってないなら、sudo apt remove nvidia*とかでいろいろ消したりしてX.Orgに切り替える
- もし、これをやってネットが死んだら、下の方にあるおまけを参考にしてみてください

sudo ./nvflash --listでデバイスが認識されているのを確認し、
sudo ./nvflash --gpumode graphicsを実行する

nvidiaのドライバをインストール

GPUをThinkPadにぶっ挿す
設定→このシステムについて→ソフトウェアのアップデート→追加のドライバータブを開く
nvidia-driver-535(プロプライエタリ)を選択し変更の適用
再起動せず、eGPU Switcherのセットアップに続く

eGPU Switcherのセットアップ

このQiitaの記事を参考にしました

eGPU Switcherをインストール&セットアップ

Copy

sudo add-apt-repository ppa:hertg/egpu-switcher
sudo apt update
sudo apt install -y egpu-switcher
sudo egpu-switcher setup

再起動

※もし、GUIが死んでもCtrl+Alt+ファンクションキー(F2〜F6)で
CUIの別セッション開けれるのでそこで頑張ってなんとか復旧してください！(力技)

(オプション)Dockerのインストール&セットアップ

私は、あまり環境を汚したくないので、基本コンテナで開発してます。
ネイティブにCUDAを入れるのは汚れる＆ダルいのでDockerでやっちゃいます。

DockerのインストールいつもこのQiitaを参考にさせてもらってます

Copy

curl -fsSL get.docker.com -o get-docker.sh && sh get-docker.sh && sudo gpasswd -a $USER docker && sudo docker run hello-world && rm -f get-docker.sh

再起動
Nvidia Container Toolkitのインストール＆セットアップ

このzennを参考にしました

Copy

distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \
  && curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-keyring.gpg \
  && curl -s -L https://nvidia.github.io/libnvidia-container/$distribution/libnvidia-container.list | \
  sed 's#deb https://#deb [signed-by=/usr/share/keyrings/nvidia-container-toolkit-keyring.gpg] https://#g' | \
  sudo tee /etc/apt/sources.list.d/nvidia-container-toolkit.list

> sudo apt update && sudo apt install -y nvidia-container-toolkit

sudo nvidia-ctk runtime configure --runtime=docker
sudo systemctl restart docker

コンテナ内でGPUが認識されているか確認する

Copy

docker run --rm --gpus all nvidia/cuda:12.0.0-base-ubuntu22.04 nvidia-smi

これで、nvidia-smiを確認できればおｋ！

Copy

+---------------------------------------------------------------------------------------+
| NVIDIA-SMI 545.29.06              Driver Version: 545.29.06    CUDA Version: 12.3     |
|-----------------------------------------+----------------------+----------------------+
| GPU  Name                 Persistence-M | Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp   Perf          Pwr:Usage/Cap |         Memory-Usage | GPU-Util  Compute M. |
|                                         |                      |               MIG M. |
|=========================================+======================+======================|
|   0  Tesla P40                      Off | 00000000:3E:00.0 Off |                  Off |
| N/A   36C    P8               9W / 250W |      4MiB / 24576MiB |      0%      Default |
|                                         |                      |                  N/A |
+-----------------------------------------+----------------------+----------------------+
                                                                                         
+---------------------------------------------------------------------------------------+
| Processes:                                                                            |
|  GPU   GI   CI        PID   Type   Process name                            GPU Memory |
|        ID   ID                                                             Usage      |
|=======================================================================================|
|  No running processes found                                                           |
+---------------------------------------------------------------------------------------+

(オプション)ECCを有効化・無効化する

ここでは言及しませんが、さすがデータセンター用でECCが使えるようです

(おまけ)みすってネットが死んだとき

クリーンな環境だとあまり問題にならないですが、
すでにnvidiaのドライバ等入れてたときにそれを一旦消すと、
たまに大事なものも一緒に消してしまうらしいです
(私はRTX2080のときとP40のときで2回ネット周りがまるっと死んだ)

まぁあくまで私の環境での復旧策ということで。

カーネルのバージョンを調べる

Copy

uname -a

出力

Copy

Linux yukimakura-ThinkPad-X1-Carbon-6th 6.5.0-17-generic #17~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue Jan 16 14:32:32 UTC 2 x86_64 x86_64 x86_64 GNU/Linux

これで、カーネルのバージョンが 6.5.0-17-genericということが分かりました

別のマシン(PCでもスマホでも可)を用意し、linux-modules-extraを拾ってくる

そう、このモジュールがうっかり消されてしまうモジュールです！
こいつがないからネットにつながらないのです（この原因がわかるのに何時間も費やした...

pkgs.orgから該当するカーネルバージョンのlinux-modules-extraを探してダウンロードします
それをUSBメモリなどのリムーバブルディスクにてコピーし、

Copy

sudo dpkg -i ./がいとうするlinux-modules-extra

してインストールすると復活するはず？

〆

最初、試しで買ったときにデバイスが認識を繰り返して、
dmesgでBar周りでエラー吐きまくったときは正直絶望しましたが、
なんとかなってほんと良かったです…
VRAMが24GBあれば量子化モデルであれば34BパラメーターのLLMとかいけちゃいます(yiとかね)
ぜひぜひラップトップ勢も、諦めずに外付けTelsaで遊んでみては？

おまけのおまけで、同環境でRTX2080とP40をBlenderベンチした結果貼っときます

テスト項目	GPU	結果
monster	RTX2080	1298.992945
monster	P40	386.695855
junkshop	RTX2080	699.879324
junkshop	P40	250.4996267
classroom	RTX2080	619.444119
classroom	P40	190.203885

差開きスギィ....!
では(^^)ノシ

Winlatorのコンテナ内を日本語化する

Mon, 05 Feb 2024 08:00:00 GMT

閑話休題(挨拶)

みなさま、あけましておめでとうございます（は？
...ってもう2月ですね、すんません。
今年初記事でございます
元日は実家に戻っていたのですが...
やれ地震だの大津波警報だのてんやわんやな正月でした...
落ち着いて酒も飲めなかった...
一応、サービスエリアまで死ぬ気で家族で逃げたので被災者です（被災者ヅラすな
なんせ実家すぐ海なんでね...怖くてしゃーなかったです
震源地の人はいまも辛い思いをされてると思います。
復興は大変だと思いますが、ぜひとも頑張ってください（ある意味残酷な言葉よな

準備物

Winlator Mr.J Fix41(V3.2).apk と main.3.com.winlator.obb
ファイラーアプリ

How To

Mr.J版APKをインストール
(Amdroid 11以降の場合)任意のフォルダーの権限をWinlator宛に適切に割当、そこに、main.3.com.winlator.obbを設置する
- これをしないとobbのインポートに失敗するため要注意(これにハマった)
Winlatorを起動する
起動したあと、権限が求められるので承認し、Unable to find the obb image.とポップアップが出るが、Cancelを押す
アプリ内のSettingsを開き、一番下までスクロールするとInstall OBB Imageボタンがあるのでそれを押し、Open Fileを押す
2で設置したobbファイルを選択する
Installed Versionが0.0から変わっていることを確認する
トップページへ戻り、適当なコンテナを作成し、起動
コンテナ内のStartボタンを押し、System Environment→Local Area Settings→Japan-ja_JPを押す

10. コンテナ再起動して、日本語化されているか確認する

以上!

〆

このブログで一番盛り上がっていたWinlatorネタです（笑）
Winlatorの記事だけ異様にアクセスされてるという...
やっぱみんなギャルゲーをポータブル化したいんやなぁって
本当は、サクラノ刻のムービー再生時問題解決してから記事化しようかと思ってたのですが、 12時間ぐらい格闘してもダメだったんで、一旦日本語化のみで上げます。
いくつか、心当たりはついていて

どうやら、ムービーのコーデックはwmvらしく、これがめんどくさい
- DXVK ✕ Wine 64bitがwmvとすこぶる相性悪いらしい
そもそもwmvのコーデックが入ってない？
- Mr.J版だとそうかも？
- ピュア版のWinlatorだと、DXVKは相変わらずダメだが、WineD3Dだと途中まで行ける

が調べた結果です。 winetrickが使えればもう少し進めやすいのですが、それがないのがキツイ... 海外のフォーラムのニキが、wmvというクソコーデックのせいでゲームができないのは問題だと嘆いていました...ほんとそれな...

...まぁもう少し調べてみます
Ethornellさん、もうそろそろ動画のコーデックをx264とかにしませんかね??
最近、ガンダムSEEDのラクス構文というのが密かに流行っているらしいのですが、
それを借りると、
「ゲームの中でwmvを再生したいのではありません。やりたいゲームの中にwmvが紛れ込んでいるのです！」ってお気持ち。

今日はここまで！
では(^^)ノシ

LLama2系モデル(Xwin-LM)でSemanticKernelやってみた【LLamaSharp】

Sun, 03 Dec 2023 22:00:00 GMT

背景

最近、生成AIが激アツですね。
私もその熱に影響を受けた一人なわけで。
クラウドで生成できるAIはお手軽かつ賢くて素晴らしいのですが、
やはり、仕事の情報やプライベートの情報をホイホイクラウドに投げるのもね...
...というのは建前で！本当は手持ちGPUで出来たほうが浪漫があるじゃないですか！(結局それかよ)

世間ではもっぱらクラウドで処理する系の生成AIばかり取り上げられていますが、
LLama系モデルを使うと逸般の誤家庭のPCでできるので、
今日はそれをベースにSemanticKernelができるというLLamaSharpで遊んでみます！

PCの構成はこちらの記事をご覧ください！

前提条件

dockerでnvidiaのGPU(CUDA11以降)が使えること
VRAMが8GB以上あること
- なくてもいいが、その代わり使うモデルを変えたり、ModelParamsのGpuLayerCountを減らしたりして調整すること
VSCodeをインストールすること
VSCodeの拡張機能に Dev Conainersをインストールすること

ソースコード

yukimakura/llamasharp_SK_Demo

手順

私のデモレポをクローンする

Copy

git clone https://github.com/yukimakura/llamasharp_SK_Demo.git

vscodeで私のレポを開く

Copy

code ./llamasharp_SK_Demo

F1を押し、「Dev Container: Reopen in Container」をクリックする

4. 開発コンテナのセットアップが終わるまで待つ
5. ターミナルを開き、以下を実行してモデルをダウンロードする
合計10GB以上ダウンロードが行われるので要注意！

Copy

chmod 755 downloadModels.sh
./downloadModels.sh

モデルのダウンロードが終わったら、dotnet runする

Copy

cd llamaSk
dotnet run

遊び方

起動時に アトリと会話する場合は 1 を、SemanticKernelのデモは 2 を入力と出るので半角数字で1か2を入力する

普通に会話する (1)

このモードは普通にllamaのモデルと会話するだけです。
ちょいちょいアホなところが可愛いです。

ちなみになぜ「アトリ」かというと、私が好きなギャルゲーのキャラだからです！笑
2024年にアニメ化するので絶対に見てくれってばよ！
ATRIはいいぞぉ(^^)
ATRI公式サイト

SemanticKernelする (2)

これは、残念ながらアトリちゃんを混ぜ込めませんでした...(´；ω；｀)
事前に設定してあるPluginを文章から読み出すデモです。
このデモでは

{場所}の天気を教えて
- これに対する答えは、{場所}は槍の雨が降るでしょう。(嘘です。実装めんどいからやってない)と返答します
{場所}のニュースを教えて
- これに対する答えは、{場所}をGoogleのニュースAPIから取得して、上位5件のニュースのタイトルを取得して出力します
{方向}のモーターを回して
- これに対する答えは、{方向}側のモーターをまわします！boooooooo!と返答します

といった問に対して答えるプラグインを実装しています。

ただし、所詮13BのLLMなので、関数を呼んでくれないことが多々あります。
...というか呼んでくれないほうが多いぐらいかもヽ(･ω･)/ｽﾞｺｰ

動画

〆

うん、おもしろい！
まだ実用性は乏しいですが、夢と浪漫がありますな〜
そして、一つ思ったことは、SemanticKernelはある程度モデルが賢くないと成り立たないということ！（当たり前）
まぁ、こういう課題も案外すぐに解決されていくのでしょうね...
最近、MicroSoftがマシンリソースの削減のためにモデルの軽量化やASICの製作など躍起になっていますが、徐々に少ないリソースや専用ASICなどによってオンプレ生成AIは身近になっていくことでしょう！
AI戦国時代の到来ですな!!

今日は記事を2連投しました！
意外とLLamaSharpの調整に時間がかかってしまい、
こんな時間になってしまった...
オムニのロボットのネタとかもあるのに...
それはまた今度ということで！（絶対書けよ未来の自分）
では(^^)ノシ

TH3P4G3(85W版)とRTX2080をUbuntu22.04でセットアップした【外付けGPU】

Sun, 03 Dec 2023 18:00:00 GMT

TH3P4G3(85W版)ってなんぞ？

...まぁ、こんな辺境ブログの記事にぶち当たる方には蛇足と思いますが、
中華製外付けGPUアダプターです。
私が購入したTH3P4G3のリンク

2マン前後で購入でき、そのくせThunderbolt3のデイジーチェーン接続にも対応という
高コスパなのがとても魅力的です。
しかも！この85W版はノートPCに85WまでThunderbolt3経由で給電できるというスグレモノ！
なんか、見た感じ今年の後半に出たっぽい？
ほとんど従来版(65W)と値段も変わらないのでこれをポチりました。

これはどうでもいい情報ですが、私はちょうど独身の日セールで
クーポンマシマシで買えたので、約1.6マンほどで買えました〜
ラッキー(^^)

物理的な構成

TH3P4G3(85W)

主役(？)
PCIeをThunderbolt3に変換するアダプタ
しれっと意外と高いThunderbolt3ケーブルが同封なの助かる

GeForce RTX™ 2080 GamingPro OC (PALiT製)

メルカリで激安で買ったGPU
VRAMは8GB
なんかファンがブン回るとクソうるさい

ATX-1260GA1 80PLUS BRONZE 600W (Enhance製)

ハードオフで3300円買った動作保証品(ジャンクじゃない)

ThinkPad X1 Carbon Gen6

相棒
スペック
- Intel Core i7 8650U
- 16GB RAM(速度はシラネ)
- 訳あってWLANはBroadcom bcm94360ng
  - お察しください(^_^;)

いろいろやったこと

nvidiaのドライバをインストール

GPUをThinkPadにぶっ挿す
設定→このシステムについて→ソフトウェアのアップデート→追加のドライバータブを開く
nvidia-driver-535(プロプライエタリ)を選択し変更の適用
再起動せず、eGPU Switcherのセットアップに続く

eGPU Switcherのセットアップ

このQiitaの記事を参考にしました

eGPU Switcherをインストール&セットアップ

Copy

sudo add-apt-repository ppa:hertg/egpu-switcher
sudo apt update
sudo apt install -y egpu-switcher
sudo egpu-switcher setup

再起動

※もし、GUIが死んでもCtrl+Alt+ファンクションキー(F2〜F6)で
CUIの別セッション開けれるのでそこで頑張ってなんとか復旧してください！(力技)

(オプション)Dockerのインストール&セットアップ

私は、あまり環境を汚したくないので、基本コンテナで開発してます。
ネイティブにCUDAを入れるのは汚れる＆ダルいのでDockerでやっちゃいます。

DockerのインストールいつもこのQiitaを参考にさせてもらってます

Copy

curl -fsSL get.docker.com -o get-docker.sh && sh get-docker.sh && sudo gpasswd -a $USER docker && sudo docker run hello-world && rm -f get-docker.sh

再起動
Nvidia Container Toolkitのインストール＆セットアップ

このzennを参考にしました

Copy

distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \
  && curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-keyring.gpg \
  && curl -s -L https://nvidia.github.io/libnvidia-container/$distribution/libnvidia-container.list | \
  sed 's#deb https://#deb [signed-by=/usr/share/keyrings/nvidia-container-toolkit-keyring.gpg] https://#g' | \
  sudo tee /etc/apt/sources.list.d/nvidia-container-toolkit.list

> sudo apt update && sudo apt install -y nvidia-container-toolkit

sudo nvidia-ctk runtime configure --runtime=docker
sudo systemctl restart docker

コンテナ内でGPUが認識されているか確認する

Copy

docker run --rm --gpus all nvidia/cuda:12.0.0-base-ubuntu22.04 nvidia-smi

これで、nvidia-smiを確認できればおｋ！

〆

eGPU Switcherによってめちゃくちゃ快適なeGPU✕Ubuntu環境ができました！
自分は3DCGというよりも、生成AIで遊びたいので、あまりVRAMの無駄遣いをしたくありません。
その点、ラップトップだと内蔵グラフィックスがあるので、
そいつで描画させて、GPUはCUDAだけみたいな感じが可能です。
はたまた、描画にGPUを使いたければ、eGPU Switcherをいじったり、
GPUの映像端子にケーブルさすなりすればRTXぱわーを感じれるわけですな。

ちな、安定性は3日間起動しっぱなしでもモウマンタイだったので
自分的には💯でした。
(ただし、描画は内蔵グラ設定)

今回かかった金額(ノートPC除く)は

GPU (20000円)
電源 (3300円)
TH3P4G3 85W (15744円)

で合計39044円!
ギリ4マン切った！やったぜ！

TH3P4G3、おすすめです。
(写真撮り忘れたけど、梱包が結構しっかりしてて驚いた)
みなさんも是非遊んでみてくださいな！
では(^^)ノシ

RDRAのすゝめ(LT会のパワポ)

Sat, 18 Nov 2023 21:00:00 GMT

背景

エンジニアの輪 at 名古屋(第6回)にて発表させて頂いた資料です。
今回は生意気にも上流工程の話です。
生意気上等でも、個人的にはここまで要件定義における具体的なフレームワークって無いと思い感動し、どうしても皆さんに共有したかったので発表しました。
（知らないだけならごめんなさいm(_ _)m)
RDRAの詳細については、神崎先生の本やRDRA.jpに委ねます。
私事で恐縮ですが、今、開発業務をしていて正直少しRDRAを当てはめにくいのですが、
それでもアクターに与える価値ドリブンで要件定義が出来るのって素晴らしいと思います。

Copy

俺たちの技術、すげぇだろ？ == 顧客が本当に求めていたもの

は必ずしも当てはまらないのでね...(むしろほとんど無いのでは？)

アクター(ステークホルダ)の要求をいかに引き出して、それを仕様化できるのほんとすごいわ...
また、このスライドは結構急ぎで作った＆私もRDRAと出会ってそんなに時間が経っていないので、
ミスリードな解釈があるかもしれません...
その時はご指摘いただけると幸いです。

スライド

Foundational C# をサクッと取得してみた

Wed, 20 Sep 2023 21:30:00 GMT

背景

Javaとかは認定資格とかが結構いろいろあるが、
C#は全くと言っていいほどそういうものがなかった。
(厳密には2022年あたりまであったのだが廃止となった)
それが！急に2023年8月末にMSがfreeCodeCampとコラボと言う形で
Foundational C# Certificationという資格を打ち出した！
しかも無料！
...てなわけでやってみた！

MSLearnに登録し、6つのラーニングパスをすべてクリアする

ここに公式のラーニングパスのまとめがあるので、全てクリアする

これがなかなかのボリューム。公式曰く30時間分ほどらしい

6つのトロフィーが取得されているか確認する

トロフィー一覧を確認する
6つあればOK！

freeCodeCampにログインし、それぞれのトロフィーと連携する

MSLearnのトランスクリプトを開く
リンクの共有→リンクの生成→リンクのコピーをクリックする

freeCodeCampのC＃のページに飛び、ログインする
Coursesのそれぞれ最後にTrophy - コースの名前があるのでそれをクリックする
Your Microsoft Transcript Linkに先程コピーしたURLを貼り付け、Link Accountをクリックする

Verify Trophyをクリックする
残りのコースの項目もVerifyする

これ、実はミソでTrophyさえすべてVerifyできれば試験を受けれる

お受験する！

あとは残されたFoundational C# with Microsoft Certification Examをクリアするのみ！

問題数は80問
英語（ブラウザの翻訳機能をつかえばOK）
制限時間はなし(ただし計測はされる)
70%以上解ければ合格

ちなみにゆきまくらは

Copy

Foundational C# with Microsoft Certification 
Exam: Passed 
Number of questions: 80 Correct answers: 72
Percent correct: 90% 
Time: 32:02

であった

証明書を発行する

freeCodeCampのSettingsに飛ぶ
Username、Nameを設定する（Saveを忘れずに）
Privacy Settingsにて、My profile、My name、My certifications、My timelineをPublicに変更する(Saveを忘れずに)

4. Academic Honesty Policyに同意する

I agree to freeCodeCamp's Academic Honestry Policy.をクリック

5. スクロールし、Foundational C# with MicrosoftのClaim Certificationをクリックする

以上！お疲れ様でした(^^)

ゆきまくらの証明証書

〆

ネットのニュース記事にて見つけて、早速飛び乗ってみました！
MSLearnをまともに使ったことなく、当初勘違いでfreeCodeCampにてトロフィーを発行するものだと思っていました。(ちゃんと読めって話ですよね...)
もちろん、日本語の紹介ブログや記事もないわけで最初戸惑いましたがなんとかクリアできました！ヤッタネ👍
自称最速日本語紹介記事になったと思います。ええ。

当方はある程度C#触れるので今回はめちゃくちゃ飛ばしながらやりましたが、
(約1.5hぐらいで取得できました)
学習コンテンツとしてはとても良質だと思います。
それこそ、企業でも新卒の教育コンテンツとしても使ってもよし、趣味でやってもよしと活用の幅は広いと思います。
しかも無料ネ！(激アツ)
ありがとうございます...MS様...

そして今回改めてMSLearnの優秀さに気づけれました！
Azureの勉強とかもMSLearnでガンガン勧めていこうかと。

では今日はこんなところで！
では(^^)ノシ

AndroidスマホでWindowsノベルゲー(ギャルゲー)めっちゃ捗ろうぜ！(winlator)

Sat, 19 Aug 2023 23:30:00 GMT

日本語化版記事書きました！

Winlatorのコンテナ内を日本語化する

背景

買ったギャルゲーが消化しきれない!!
...皆さん、このような悩みは誰しも1度や2度、
100度ほど思ったことがあるのではないでしょうか？
私は日頃思ってます (煩悩おい
そんなみなさんに朗報です！今回はそのソリューションを提案します！！
これで世界平和です!(^_^)

Winlatorのご紹介

Winlatorとは

Winlatorとは、Android(Arm64でも可)上で、
Wine環境をコンテナ化してくれる神アプリである。
HWアクセラレーションもある程度効くし、ネットワーク通信も、音声も出力される。

Wineとは

Wineとは、WindowsアプリケーションをUnix/Linux系のOS上で動かせるようにするプログラムである。
Wineはエミュレーターではなく、Windows APIを変換して動かす方式で、Mac OSやLinux、Androidで動作させることが出来る。 簡単に言えばWineは、Linux上でWindowsを動作させているのではなく、LinuxにWindowsと同じ挙動をさせているのである。(Wikipedia引用) →つまり、CPUエミュレーションを行っていないため、Windowsエミュレータに比べパフォーマンスの劣化が少ないことが特徴。

動作確認環境

Galaxy S23 Ultra (docomo) 512GB
- CPU SoC: Snapdragon® 8 Gen 2 Mobile Platform for Galaxy
- RAM 12GB & 仮想RAM8GB
- One UI 5.1
- Android 13
- ルート化はしていません。

Winlatorの導入(2023-08-19現在)

WinlatorのAPKをスマホでダウンロードする。
main.1.com.winlator.obbをスマホでダウンロードする。
WinlatorのAPKをインストールする。
初回起動時にmain.1.com.winlator.obbの場所を聞かれるので、指定する。

サクラの刻、やってみた！

発売日に買ったくせに全然進めれてないサクラの刻を捗らせてみようと思います
このゲーム、ほとんどエッチシーンが無いので、内容的には割とどこでも出来ちゃうんですよね〜

事前準備

適当な手段で、スマホのDownloadフォルダーにサクラの刻のアプリケーションを入れる
(できれば)OPムービー以降のセーブデータもスマホのDownloadフォルダーに入れとく
- 理由は後述

Winlatorの設定

画面右上のの「＋」を押して、コンテナを作成する

2. 作成したコンテナの「︙」をタップし、Editをタップする 3. 以下のように設定する 4. 作成したコンテナの「︙」をタップし、Runをタップする 5. サクラの刻のセーブデータをDドライブからCドライブに移行しておく
- このDドライブは。スマホのDownloadフォルダーがマッピングされている（超便利）
- 詳細は割愛(ざっくりいうと、ユーザーの中のAppDataのRoamingにある)
- 日本語は文字化けしているが気にせず頑張る
6. エクスプローラーが開くので、Dドライブ→サクラの刻のexeを開く
- このとき、インストーラーではなく、直接ゲームのexeを起動すること(インストーラーは多分起動しない？)
7. Enjoy!
- 当方の環境では、平均50FPSぐらいで安定。
- 音声は、DX ComponentsをすべてNativeにすることで音切れなく安定
- Builtinにすると、時々ポツポツ音切れが見られる

現状、yukimakuraが直面してる問題

OPムービーで死ぬ

これは、なかなか難しい問題です...
多分、Winlatorの問題ではなくWineの問題かと思われ...
実は、macOSのWineにて以前Wine上でサクラの刻やってたのですが、
ここでも、ムービーに切り替わると死んでました...
まぁ、しゃーなしで、OPムービーを超えたセーブデータを読み込むしか無いですね...
↓途中まで再生できるが、毎回ここで死ぬ

↓以下、ムービーを途中まで再生できた設定

アプリを一瞬でもバックグラウンドにすると、マウスカーソルが死ぬ(クリックできなくなる)

これ、結構困ってます。
現状だと、うっかりブラウザや他のチャットアプリなど切り替えると、
クリックが効かなくなるんですよね...
これ私だけ？？🤔

(おまけ)Steamはインストール出来たけど、肝心のSteam自体が激重

ついでに、NeedyGirl Overdoseもスマホで出来たらな。と思って、
挑戦してみたのですが、Steamが重すぎてコンテンツのインストールが大変でした。
スマホでいつでも超絶最かわ天使ちゃんを拝みたいので、もう少し粘ります。
続報あったら、追記か新しく記事起こすかも。

〆

まぁぁぁぁぁじで感動した
これ、ガチで長年の夢だったんですよね。
それこそ、6年越しレベル。
昔、AsusがZenfone2というスマホを販売していて、自分がそれだったのですが、
そいつは当時珍しくRAM4GB積んでいて、かつAtom搭載だったんです。
正直爆熱だわ、電池持ちクソ悪いわでいい印象がほぼなかったスマホでしたが、
唯一Atomということで、Winアプリを動かせれるんじゃないかと期待させられました。
一応、CrossOverというアプリが自分が求めるものに近かったのですが、
さすがAtom、実用皆無でした...(:3」∠)
それが！！！いよいよ！！！！スナドラのAndroidで動くわけです！！！！ 全俺が泣いた(´；ω；｀)ｳｯ…
~~Windows11(aarch64版)のx64エミュレーションなんて要らんかったんや~~
では(^^)ノシ

ユニットテストについて学んだ事や思う事まとめ(LT会のパワポ)

Sat, 19 Aug 2023 23:00:00 GMT

背景

第2回ITたこ焼きの会にて発表したスライドです。
自分語りですが、ユニットテストと言われて初学者はすぐにピンと来る方は、
案外少ないのでは無いでしょうか？
少なくとも、自分はあまりピンときませんでした。
その中で、一筋の光明として出会ったのが、Unit Testing(Manning社)、日本語版という本でした。
この本が教えてくれたこととして、自分的に一番トキメイたことは、
ユニットテストは、時としてアーキテクチャの見直しの機会や気付きを与えてくれることでした。
システム設計の世界は正解がない分、奥深く、そして個性が出る世界だな。としみじみ考えさせられました。
このスライドをみて、少しでもこの世界を味わっていただける方がおられると幸いです（何様だ！笑

スライド

CSharpのgRPCサーバーでUDSとTCP同時受けする

Tue, 08 Aug 2023 08:15:00 GMT

TL;DR

Kestrelの設定を変更すればOK
- MSのソースを真似ればできる
デモソースはここ(ゆきまくらのGithub)

ざっくり解説

サーバーサイド

Program.cs

Copy

using serverside.Services;
using grpcschema;
using Microsoft.AspNetCore.Server.Kestrel.Core;

var builder = WebApplication.CreateBuilder(args);

// Additional configuration is required to successfully run gRPC on macOS.
// For instructions on how to configure Kestrel and gRPC clients on macOS, visit https://go.microsoft.com/fwlink/?linkid=2099682

// Add services to the container.
builder.Services.AddGrpc();

var udsAddress = Path.Combine(Path.GetTempPath(), "socket.tmp");builder.WebHost.ConfigureKestrel(serverOptions =>{    serverOptions.ListenUnixSocket(udsAddress, listenOptions =>    {        listenOptions.Protocols = HttpProtocols.Http2;    });    serverOptions.Listen(System.Net.IPAddress.Parse("0.0.0.0"),18686, ListenOptions =>    {        ListenOptions.Protocols = HttpProtocols.Http2;    });});
var app = builder.Build();



// Configure the HTTP request pipeline.
app.MapGrpcService<GreeterService>();
app.MapGet("/", () => "Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");

app.Run();

Kestrelの設定にて、ListenUnixSocket(16〜19行目)でUDSの受け設定をし、
Listen(20〜23行目)でTCPの受け設定をしている。

クライアントサイド

TCP

UnitTest.cs(一部抜粋)

Copy

[Fact]
public async Task TCPTest()
{
    
    var channel = GrpcChannel.ForAddress(TCPAddress);
    var req = new grpcschema.HelloRequest() { Name = "てぃーしーぴぃそけっと" };

    var client = new grpcschema.Greeter.GreeterClient(channel);

    var reply = await client.SayHelloAsync(req);

    reply.Message.Should().Be("Hello " + req.Name);
}

５行目でTCPでのサーバーのアドレスを設定している

UDS(UnixDomainSocket)

クライアントサイドのUDSでは、
UDSのコールバック処理を別途用意する必要がある

UnixDomainSocketsConnectionFactory.cs

Copy

using System.Net;
using System.Net.Sockets;

namespace clientside;

public class UnixDomainSocketsConnectionFactory
{
    private readonly EndPoint endPoint;

    public UnixDomainSocketsConnectionFactory(EndPoint endPoint)
    {
        this.endPoint = endPoint;
    }

    public async ValueTask<Stream> ConnectAsync(SocketsHttpConnectionContext _,
        CancellationToken cancellationToken = default)
    {
        var socket = new Socket(AddressFamily.Unix, SocketType.Stream, ProtocolType.Unspecified);

        try
        {
            await socket.ConnectAsync(this.endPoint, cancellationToken).ConfigureAwait(false);
            return new NetworkStream(socket, true);
        }
        catch
        {
            socket.Dispose();
            throw;
        }
    }
}

UnitTest.cs(一部抜粋)

Copy

[Fact]
public async Task UDSTest()
{
    var udsEndPoint = new UnixDomainSocketEndPoint(UDSAddress);    var connectionFactory = new UnixDomainSocketsConnectionFactory(udsEndPoint);    var socketsHttpHandler = new SocketsHttpHandler    {        ConnectCallback = connectionFactory.ConnectAsync    };    var channel = GrpcChannel.ForAddress(        TCPAddress, //←これはなんでもいい(無視される)            new GrpcChannelOptions    {        HttpHandler = socketsHttpHandler    });    var req = new grpcschema.HelloRequest() { Name = "ゆにっくすどめいんそけっと" };
    var client = new grpcschema.Greeter.GreeterClient(channel);

    var reply = await client.SayHelloAsync(req);

    reply.Message.Should().Be("Hello " + req.Name);
}

11行目でTCPのアドレスが引数として要求されるが、無視されるので、適当な値をいれる。

〆と注意点

注意点として、Kestrelから

Copy

warn: Microsoft.AspNetCore.Server.Kestrel[0]
      Overriding address(es) 'http://localhost:5151'. Binding to endpoints defined via IConfiguration and/or UseKestrel() instead.

と警告が吐かれる。
まぁ、内容を読めば、「せやな」としか言いようが無いので...

案外、簡単かつお手軽にUDS対応が出来ることがわかったと思います。
また、.Net7からUDSはお手軽に使えるようになりましたが、
.Net8からは名前付きパイプ経由も出来るようになるらしいです。
選択肢が増えることは良いことだぁ(^^)
あと、タイトルだけCSharpとなっているのは、
なんか#を入れるとルーティングが狂うからです。（おい
では(^^)ノシ

DependencyInjectionのすゝめ(LT会のパワポ)

Sun, 06 Aug 2023 18:15:00 GMT

背景

エンジニアの輪 at 大阪(第10回)にて発表させて頂いた資料です。
DependencyInjection(以下DIと略す)コンテナは様々な言語やフレームワークで標準サポートされているようですが、
今回の発表会で、「とりあえず使ってはいるのだけれど、正直旨味がいまいちピンとこない」との方がチラホラ見られました。
それを聞いて私も、めっっっちゃ気持ち分かるわ... となりました(^_^;)
ずるい言い方をすると、結局のところはDIを意識して設計・製作しないと腹落ちしないんですよね。
出来るなら、まずDIで実装してみる。→どこがDIか、具体的になぜどこからどう注入されるのかというのを分かる人から聞くのがやはり効率が良いのでしょうかね？

今回のLT会でドメイン駆動設計(以下DDDと略す)のテーマのあったのですが、私は今のところDDDの本質や旨味を腹落ちしきってないです。
ですが、DDDの経験者さんも結局抽象的な概念で、ぶっちゃけ哲学といえば哲学だからDDDで実装してみたり、DDDで実装されてるコードやプロジェクトをみたり携わらないと納得しないと思うと言われてしまいました。
圧倒的納得っ....!!!

スライド

32Bitとか64Bitって、あれなんなん？(LT会のパワポ)

Sun, 23 Jul 2023 09:15:00 GMT

背景

第1回ITたこ焼きの会にて発表したスライドです。
自分語りになって恐縮ですが、
学生時代、自分はこの32bitとや64bitの違いが
ピンとこない期間が長かったです。
それが分かった転機がCPUの創りかた(神書籍、エンジニアは必読レベル)や
学校でのPICアセンブラの授業でした。
正直プログラムやコンピュータを触り始めた方にとって、
わかりやすいかどうかは微妙ですが、
コンピュータの根底の部分の一つなのでぜひ理解した上で
使っていただければと思っております。（何様のつもりか
ただただ、テクニカルな話を述べるだけでもつまらないので、
小ネタ的にゲームハードも交えた変遷を取り入れてみました。
届け俺の思いっ！！

スライド

Nextjs 13で環境変数が倒せなかった話

Sun, 23 Jul 2023 08:45:00 GMT

背景

職場でフロントエンドがNextjs(13)、バックエンドにC#のgRPC-Webサーバーの
システムを構築しております。
フロントエンドからバックエンドのgRPC-Webサーバーを直接叩くので、
フロントエンド側にgRPC-WebサーバーのURLを伝搬しなければなりません。
ある程度製作が進んだところで
デプロイについていろいろ考え始めたところ、
まぁ鉄板にコンテナに包もうと思ったわけです。
コンテナ化するならURLの設定値は環境変数経由で
渡したほうが良さそうだなと。

ところが...どっこい！

いろいろ試しても王道策はダメ！
_(:3」∠) < ﾀｶｻﾞﾜｼﾞｭﾝｽｹ
はぁ...
んで、妥協案と言いますか...折衷案？を考えたので
一応シェアする感じです。
王道なやり方ご存じの方、教えてくださると感謝カンゲキ雨嵐とな。

※毎度お馴染み、当方はtypescriptやweb系技術についてズブの素人です。ご注意ください。

いろいろ試した王道策

process.env

こいつが一番記事が多い＆王道そう。
ただこいつ、ビルド時に解決されちゃうんですよね...
というわけで断念...

publicRuntimeConfigとserverRuntimeConfig

これが、一番やりたいことに近そうだったのですが、
当方の環境だと、ビルドエラーが出ちゃうんですよね...
一応GithubのIssueにも上がってますが、使い物にならないという結論に...

折衷案（のつもり？）

大雑把な概要と手順

~~まぁ、とても愚直に設定を返すAPIを実装して、~~
~~ それを初期化時に呼び出す感じです。~~
~~サーバーサイドのAPIならprocess.envが使えたので、~~
~~そこで、~~
~~1. サーバーサイドで環境変数から設定オブジェクトを作成~~
~~2. Webクライアントが初期化時にサーバーサイドのAPIを叩いて設定オブジェクトを受信＆読み込み~~
~~といったフローです。~~
~~まぁ、愚直で王道だよね。~~

↑ゆきまくらの勘違いでした！結局この方法もビルド時に埋め込まれます！(2023-07-23追記)
以下の項目はサーバーサイドAPIの実装例程度にとどめた認識をお願いします🙇

実装の簡単なガイド

なんか、Nextjs13で結構APIの実装方法が変わったみたい？
こちらのサイトを参考にしました。

サーバーサイド

src/app/api/settingsにフォルダを作る
そのフォルダ内にroute.tsを作成する。

route.ts

Copy

export async function GET(request: NextRequest) {
  
  //適当な設定情報を格納したクラス
  const settingobj = { foo: process.env.FOO, };

  return NextResponse.json(settingobj);
}

クライアントサイド

クライアントサイドの任意の場所でfetch('/api/settings')呼ぶ。
(つまり、HTTPAPIをコールするってこと)

(ヒント？？).bodyファイル(2023-07-23追記)

.next/server/app/apiディレクトリにsettings.bodyというファイルが生成されており、
こいつを試しに手で変えてやると、ビルド後の変数の値が切り替わった。
(つまり、ビルド後のファイルを直に編集)
ただ、これを実運用に持っていくには、あまりに邪道過ぎてやりたくないな...
困ったものだ...(´Д｀)ﾊｧ…

〆

まぁ、クライアントサイドが環境変数直接アクセスできないのは
理論的には分からなくもない。
けどさぁ、例えば動的にデリバリーするコンテンツの変数を
配信直前に変更できる工夫とかはあってもいいようにも思えてしまう。
(欲張りか？)
今までWebUIのシステムをまともに考えた事がなかったから、
圧倒的に経験値が足りなくて辛み...
まぁ楽しいのだけれども。
実は、まだ当方では完全解決とまでは行ってなくて、
~~DIコンテナに設定を注入するアーキテクチャにしてしまったため、~~
~~この設定を読み出す関数をコールする~~
~~タイミングに悩んでいるところであるヽ(･ω･)/ｽﾞｺｰ~~
↑これはDAOに実装を固めて、だましだまし使うことにした。(2023-07-23追記)
一難去ってまた一難、泣きっ面に蜂、弱り目に祟り目、虎口に逃れて竜穴に入る...
では(^^)ノシ

NextjsでDIコンテナ経由でイベントを発火してみる[typescript]

Sat, 08 Jul 2023 11:10:00 GMT

背景

仕事でWebUIでアプリを作ることになり、いろいろ勉強中です。
偶然、このブログを作っていた事が色々役に立ちました。
まぁそんなこんなで、コンポーネントをまたいでやり取りするケースが出てきて、
いろいろ考えたわけです。

当方、C#が今のところ一番得意なようで、
もしC#で組むならDIコンテナ✕イベントでやるなと。
ということで、TSでもDIコンテナ✕イベントをやる方法を模索しました。
ホントはMessagePipeのようにDIコンテナの
セットアップが簡単にできるやつがあったら良かったんですが、
見つけられなかった(ぶっちゃけそんなにガチに探してないです、あったら教えてくださいm(_ _)m)
ので、nanoeventsとinversifyを組み合わせて見ることにしました。

※当方はtypescriptやweb系技術についてズブの素人です。ご注意ください。

結論(ソース)

Githubに置きました
Dockerで環境構築してください。
Dockerで環境構築する際はぜひこの記事も参考にしてみてください！

また、お初ですが、devcontainer.jsonを設置してあるので、
Github Codespaceを使うとセットアップが自動化されます。
便利な世の中だなぁ...（しみじみ

詳解

DIコンテナとnanoeventsの導入

依存解決

inversifyを導入(記事いっぱいあるため割愛)
nanoeventsを導入

shell

Copy

yarn add nanoevents

イベントをハンドリングするインターフェースとクラスの準備

新規にIHogeEventProvider.tsxを作成する

IHogeEVentProvider.tsx

Copy

export interface CallbackFunc {
    (push: boolean): void;
}

export interface IHogeEventProvider{
    publish: (push:boolean) => void,
    subscribe: (cbFunc:CallbackFunc) => void
}

新規にIHogeEvent.tsxを作成する

IHogeEvent.tsx

Copy

export interface IHogeEvent {
    push: (push: boolean) => void;
}

新規にHogeEventProvider.tsxを作成する

HogeEventProvider.tsx

Copy

import { CallbackFunc, IHogeEventProvider } from "@/interfaces/IHogeEventProvider"
import { IHogeEvent } from "@/interfaces/eventSchemas/IHogeEvent"
import { injectable } from "inversify";
import { Emitter, createNanoEvents } from "nanoevents"
import 'reflect-metadata'

@injectable()
export class HogeEventProvider implements IHogeEventProvider {
    private emitter: Emitter<IHogeEvent>;

    constructor(){
        this.emitter = createNanoEvents<IHogeEvent>();
    }

    public publish(push: boolean) {
        this.emitter.emit('push',push);
    }

    public subscribe(cbFunc: CallbackFunc) {
        this.emitter.on('push',push => {
            cbFunc(push);
        })
    }

}

DIコンテナのセットアップ

tsconfig.jsonを修正

"experimentalDecorators": trueと"emitDecoratorMetadata": trueを追加

tsconfig.json

Copy

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

next.config.jsを修正

next.config.js

Copy

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        instrumentationHook: true
    }
}

module.exports = nextConfig

新規にTypes.tsを作成する
この中にはDIコンテナに登録するための型情報リストが格納されると思ってもらって良い

Types.ts

Copy

import { IHogeEventProvider } from "@/interfaces/IHogeEventProvider"
const TYPES = {
    IHogeEventProvider: Symbol.for('IHogeEventProvider'),
  }
  
  export { TYPES }

新規にinversify.config.tsを作成する
この中で、DIコンテナの登録処理を行う

inversify.config.ts

Copy

import { Container } from 'inversify'
import { TYPES } from '@/dependencyInjections/Types'
import { IHogeEventProvider } from '@/interfaces/IHogeEventProvider'
import { HogeEventProvider } from '@/implements/HogeEventProvider'

const myContainer = new Container()
myContainer.bind<IHogeEventProvider>(TYPES.IHogeEventProvider).to(HogeEventProvider).inSingletonScope()

export { myContainer }

DIコンテナとイベントの呼び出し方・使い方

Subscriber

例として、LeftComponent.tsxで示す

LeftComponent.tsx

Copy

import React, { useState } from "react";
import { myContainer } from "@/dependencyInjections/inversify.config";
import { HogeEventProvider } from "@/implements/HogeEventProvider";
import { TYPES } from "@/dependencyInjections/Types";
type Props = {};

const LeftComponent = (props: Props) => {
    const eventAction = myContainer.get<HogeEventProvider>(TYPES.IHogeEventProvider);    const [isOn, setIsOn] = useState(false);

    eventAction.subscribe(x => {        setIsOn(!isOn);    });
    return (
        <>
        ひだりのこんぽーねんと<br/>
        {isOn ? "おん" : "おっふ"}<br/>
        <br/>
        </>
    );
};

export default LeftComponent;

8行目でDIコンテナからEventProviderを取り出し、
11-13行目でイベント購読のコールバック処理を記述している

Publisher

例として、RightComponent.tsxで示す

RightComponent.tsx

Copy

import React, { useState } from "react";
import { myContainer } from "@/dependencyInjections/inversify.config";
import { HogeEventProvider } from "@/implements/HogeEventProvider";
import { TYPES } from "@/dependencyInjections/Types";
import { Button } from 'antd';

type Props = {};

const RightComponent = (props: Props) => {
    const eventAction = myContainer.get<HogeEventProvider>(TYPES.IHogeEventProvider);
    return (
        <div>
            右のコンポーネント<br/>
            <Button type="primary"  onClick={x => eventAction.publish(true)} > Button </Button>        </div>
    );
};

export default RightComponent;

10行目でDIコンテナからEventProviderを取り出し、
15行目でイベントの発信を行っている

実行の様子

RightComponentにあるButtonを押すことで、
LeftComponentの表示が切り替わっているのがわかる

もちろんイベントのため、
複数の一斉購読も可能

〆

DIコンテナから使う側はほぼMessagePipeと同じ使用感になったので
結構満足です(｀・ω・´)
しかし、DIコンテナの登録が鬼面倒くさいですね...
これなんとかしたいなぁ...

まぁとりあえずこれで比較的キレイ＆楽チンに
コンポーネント間通信ができるようになりましたね！
めでたしめでたし？
では(^^)ノシ

いいか？Dockerで開発するときに動的生成フォルダはBindMountしちゃいけないぞ？約束だぞ？

Wed, 05 Jul 2023 22:10:00 GMT

背景

...とにかくGatsbyのビルドが遅い！（●｀ε´●）ﾌﾟﾝｽｶ
明らかに遅すぎてもはやコンテナ環境が悪いのでは？といろいろ調べた結果そのとおりでした。

まぁ、使ってるコンピュータもそんなにいいものではないですし、
なにせ爆熱でサーマルスロットリング起きてる説濃厚なので...

↓あがいた跡

たしかにgRPC FUSEからVirtioFSにしたら早くなった気がする！

...けどGatsbyあきらかにビルド遅すぎんか

Gatsbyが遅いのか、i7 8650が遅いのか...
ﾌｧｲｯｯ！！ pic.twitter.com/bNYD8N7boO
— クワイン·ゆき·まくらすきぃ (@yukimakura86) June 29, 2023

やったこと

とりあえず、Docker Desktopの設定を変える

gRPC FUSE からVirtioFSに変更→あまり変わらず...

node_modulesのみをVolumeMountにする

爆速！！！

↑今回の本題です
※当たり前ですが、ネイティブよりは早くなりませんよ
これでネイティブより早いと言うことは、
「いやーやっぱり生音声よりハイレゾ音源のほうが良い音質だな〜」
って言ってるのと似てると思います。

(おさらい)VolumeMountとBindMountってなぁに？

BindMountとVolumeMountは、Dockerコンテナ内にデータを永続化するための2つの異なる方法です。

BindMountは、ホストマシン上の特定のファイルやディレクトリをコンテナ内に直接マウントすることができます。
これにより、コンテナ内からホストマシン上のファイルやディレクトリにアクセスすることができます。
ただし、ホストマシンのファイルシステムに依存しており、可搬性が低いという欠点があります。
一方、VolumeMountはDockerによって完全に管理される独立したストレージ領域です。
ホストマシン上のディレクトリ構造やOSに依存せず、複数のコンテナ間で安全に共有することができます。
また、ボリュームはDocker CLIコマンドやDocker APIを使用して管理することができます。

...とBingAI先生が申しております(｀・ω・´)

パフォーマンスに関しては全然まっっったく違います！
BindMountは引くほど遅いです
(すくなくともWSL2とmacに関しては。Linuxはまだ未検証)
2019年ごろからIssueに上がっていますが未だにOpenのままのようです

簡易ベンチマーク

計測環境

ホスト

ThinkPad X1 Carbon Gen6
- Hardware
  - Core i7 8650u
  - RAM 16GB (LPDDR3 2133MHz)
  - SUNEAST SE900NVG3-01TB
  - Broadcom BCM94360NG
- Software
  - macOS 12.6.3 (Monterey)
  - Docker Desktop 4.16.2 (95914)

コンテナ

node:18-bullseye

結果

Pure : シンプルなBindMount
(ex) -v $(pwd)/tmp:/ws

Delegated : Delegatedオプション付きのBindMount
(ex) -v &(pwd)/tmp:/ws:delegated

VolumeMountNM : node_modulesのみVolumeMount
(ex) -v node_module_volume:/ws/node_modules

npm install

マウント条件	real	user	sys
Delegated	6m46.746s	5m25.364s	3m47.648s
Pure	8m15.052s	6m38.064s	3m50.435s
Delegated & VolumeMountNM	1m50.672s	2m6.004s	1m15.796s
Pure & VolumeMountNM	1m46.771s	2m0.373s	1m1.540s

gatsby build

マウント条件	real	user	sys
Delegated	8m32.072s	8m26.974s	4m0.114s
Pure	7m7.828s	6m42.795s	1m39.654s
Delegated & VolumeMountNM	1m13.318s	2m19.687s	0m13.755s
Pure & VolumeMountNM	2m13.731s	8m21.418s	1m1.227s

〆

当方も積極的にDockerを使ってきたつもりでしたが、
お恥ずかしいことにこのことに今まで気づきませんでした...
でもまさか、こんなに差があるとは...恐ろしや...
今回の例はGatsbyでしたが、Gatsbyに限らず全てに共通することと思っています。
コンテナ仮想化はめちゃくちゃ便利ですが、
罠もいろいろありそうなのでしっかり学んだ上で活用していきたいですなぁ
WSL2の環境でも試しましたが、この記事の結果と似た傾向を示していたので、
ぜひお試しあれ。

小ネタですが、BingAI先生にBindMountとVolumeMountのパフォーマンスについて
聞いたところ、全く正反対のことを答えて来やがりました...
みなさんも用法用量を守って活用しましょうね(^_^;)
では(^^)ノシ

RX-8の車検に行ってきました！

Sun, 02 Jul 2023 22:45:00 GMT

ディーラー車検

昨年の1年点検は安上げようとオートバックスにお願いしました。
ところがどっこい、8ちゃんはエンジン以外でも特殊なところがたくさんあるようで、ラジエターまわりの寿命が来ていたのですが、扱えないと断られてしまいました...
んで、ディーラーに持ってって15マソかけて冷却周りの取っ替えをしました。
そんなかんじで、悩むの面倒くさいので今回ははじめからディーラーにお願いしたわけであります。

圧縮測定

自分がうちの子を購入してから、一回も圧縮比を測定したことなかったので
これを機に一緒にお願いしました。
ロータリーエンジンはレシプロと明らかに構造が違うので、レシプロ用の圧縮測定器が使えないのです...
なので、事前に言っておかないと、測定機がディーラーになかったりするので配慮が必要です。
(本音を言うならディーラーなら1つぐらい常備しておいて貰いたいものですが...)

結果

たしかNo1がフロント、No2がリアって言っていた気がします。
2008年ものの後期RX-8TypeSで、走行距離は75000kmぐらいです。
うーん、極端に悪くはないけど、良くもないなぁ...
もともと、中古で買ったときも店側から圧縮はあんまり良くないので、
期待しないでくださいと言われていました。
ちなみにエンジン切る時に吹かさないと、偶にカブることがあります。

クラッチが軋む問題

長距離の下道ドライブをしていると、クラッチのオンオフを繰り返すことになりますね。それで、しばらくするとなんか、クラッチペダルの根本のほうがｷｼｷｼ...鳴くようになるんですよね...
んで、また放置しとくとケロッと治ってる。ディーラーの人に相談してみましたが、あまり聞かない症例っぽい？とりあえず、根本のバネ機構付近にグリスをつけてもらって様子見となりました。

エンジンオイル

いままでは、WacosのProstage-s 0w-30を使っていたのですが、
ディーラーということで、シンセレネシスを初投入してみました！
ただ、シンセレネシスだと4L缶となってしまい、400ml足りない
(Renesis用ならキッチリ合せておこうよ...)らしいので、
残りの400mlはPCVバルブクリーナーというものを勧められたので試しに入れてみました。
一応ロータリーエンジンにも実績あると言っていたので信じます！！！

下回り洗浄

雪国や潮風に当たる環境で走行するならやっといたほうがいいと進められたのですが、
いまのところその予定はない...
ただ！もう15年選手となる車なので、奮発しちゃいました！
(ムダヅカイジャナイヨ！)

金額明細

ドドーンと公開しちゃいます！
20マンぎり行かないかな〜と思ってたら足出た(笑)
そいえば驚いたのですが、今の発煙筒って車のガラス割る機能も備えてるんですって！
忘れないようにせな...

(おまけ)代車はMazda3

マツダコネクトもサクサクうごくし、内装おしゃれだし、世界観作り込まれてて、そして安い。
もっと売れててもおかしくないと思うぐらいいい車でした！
RX-8にマツコネをつけるか、Mazda3にロータリーエンジンを積むか、
悩ましいなぁ（笑）
でもやっぱりRX-8のほうが楽しいですね...
高級指向なので、静音性がなかなか高かったです。
故にエキゾーストがあまり聞こえてこない...
ジレンマなんだなぁ...

〆

いやー最初の見積もりで18マンって言われてて、故障箇所見つかって30マンとか、それ以上になったらどうしよう...
と怯えていたのですが、いい意味で裏切られた結果となったってのがお気持ちです。
うちの子はフルラッピングしてるので、洗車機に入れられないのですが、
そこは気を利かせてくれたようで電話で断りを入れてくれました！嬉しいね(^^)
あと、ドンピシャ今月から、
車の車検シールの貼る位置が、運転席側の右端に貼ることが義務化されたそうです！
そして、ディーラーの担当者さんが、右上に張ったにも関わらず、
右上を意識しすぎて、前のやつ(バックミラーの裏に貼ってあった)やつを
剥がし忘れるというお茶目なシーンがありましたとさ。では(^^)ノシ

GatsbyでComponents内クエリを書くと、useStaticQueryがエラーを吐く話

Sun, 02 Jul 2023 22:30:00 GMT

経緯

サイドバーにタグ一覧コンポーネントや月別アーカイブコンポーネントを作成していると、発生した。
なかなかググっても解決策は出てこず...

Copy

Unhandled Runtime Error
Close
One unhandled runtime error found in your files. See the list below to fix it:


Error in function useStaticQuery in ./.cache/static-query.js:83
The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

./.cache/static-query.js:83
Open in Editor
  81 |     return context[query].data
  82 |   } else {
> 83 |     throw new Error(
     |          ^
  84 |       `The result of this StaticQuery could not be fetched.\n\n` +
  85 |         `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +
  86 |         `please open an issue in https://github.com/gatsbyjs/gatsby/issues`

解決策(あくまで自分の環境での話)

基本、GraphiQLでクエリを作成・確認をしてからそれを脳死コピペで使っていたのが原因だった。

みんなquery名が MyQueryとなってしまっており、
どうやら基本的にはクエリ名の競合はNGなようだ。
クエリ名をみんなバラバラにしたところ、
エラーが出なくなった。

〆

圧倒的初見殺しッッッ！

皆さんもお気をつけて。 (^^)ノシ

Gatsbyブログに月別アーカイブを追加

Thu, 29 Jun 2023 23:13:00 GMT

前提条件

GraphQLのスキーマとして、gatsby-starter-blogをベースとする

コード

コンポーネント作成

src/components下にmonthlyarchives.jsを作成し、以下コピペ

monthlyarchives.js

Copy

import { graphql, useStaticQuery, Link } from "gatsby"
import React from 'react'
import styled from '@emotion/styled'

const MonthlyArchives = () => {

    const Wrapper = styled.div`
  `

    const groupBy = (array, getKey) =>
        Array.from(
            array.reduce((map, cur, idx, src) => {
                const key = getKey(cur, idx, src);
                const list = map.get(key);
                if (list) list.push(cur);
                else map.set(key, [cur]);
                return map;
            }, new Map())
        );


    const data = useStaticQuery(graphql`
  query MonthlyArchiveQuery {
    allMarkdownRemark {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            date
          }
        }
      }
    }
  }
  `)

    let groupingData = groupBy(data.allMarkdownRemark.edges.map(item => [item.node.frontmatter.date.substring(0, 7), item.node]), item => item);
    let yearGropuingDara = groupBy(groupingData.map(x => [x[0][0].substring(0, 4), x]), x => x[0]);
    return (
        <Wrapper >
            <center>
            <h4>月別アーカイブ</h4>
            </center>
            <ol style={{ listStyle: `none` , paddingLeft: '1em' }}>
                {yearGropuingDara.map(yearGr => {
                    return (
                        <li>
                            <details>
                                <summary>{yearGr[0]}({yearGr[1].map(x => x[0][1][1]).flat(Infinity).length})</summary>
                                <ol style={{ listStyle: `none` , paddingLeft: '1em'}}>
                                    {groupBy(yearGr[1].map(x => [x[1][0][0], x[1][0][1]]), x => x[0]).map(month => {
                                        return (
                                            <li>
                                                <details>
                                                    <summary>{month[0]}({month[1].map(x => x[1]).flat(Infinity).length})</summary>
                                                    <ol style={{ listStyle: `none` , paddingLeft: '1em'}}>
                                                        {month[1].sort((a,b) => a[1].frontmatter.date - b[1].frontmatter.date).map(days => {
                                                            return (
                                                                <li>
                                                                    <Link to={days[1].fields.slug} itemProp="url">
                                                                        <span>{days[1].frontmatter.title}</span>
                                                                    </Link>
                                                                </li>
                                                            )
                                                        })}
                                                    </ol>
                                                </details>
                                            </li>
                                        )
                                    })}
                                </ol>
                            </details>
                        </li>
                    )
                }
                )
                }
            </ol>
        </Wrapper>
    )
}

export default MonthlyArchives

使用例

あとは任意の場所にコンポーネントを宣言する

hoge.js

Copy

import { graphql, useStaticQuery } from "gatsby"
import React from 'react'
import MonthlyArchives from "./monthlyarchives"
const Hoge = () => {


  return (
    <div >
        <MonthlyArchives />    </div>
  )
}

こんな感じになる↓

〆

ぶっちゃけクソコードだと思ってます（おい
名前付きタプルとか使えばいいんだろうな〜
とか思いながらめんどくさがって配列地獄になってしまった...
というか！一番驚いたのが、groupBy関数が標準になってない事！
厳密には、最近ようやく標準化されたけど、現状まだSafariしか対応してなさそう！

↑きれいな > の字。アスキーアートを感じた
では(^^)ノシ

GatsbyブログにDisqusでコメント欄導入

Tue, 27 Jun 2023 21:30:00 GMT

Gatsbyは静的サイトなわけで、
当然コメントなどの動的コンテンツを扱えない。
今回はDisqusというサービスを導入して、ブログにコメント欄をお手軽に導入する話。

Disqusに登録する

この画面でアカウント登録する
コメントを追加するブログの情報を入力する

自分のサイトにコーディングしていく

disqusのプラグインを導入する

shell

Copy

npm install --save gatsby-plugin-disqus

様々なフレームワークから選択を迫られるので、Gatsbyを選択し、

下図の赤枠で囲った領域をgatsby-config.jsに追記しとく

5. 自分のサイトの埋め込みたい箇所にDisqusを埋め込む

example.js

Copy

import { graphql, useStaticQuery } from "gatsby"
import React from 'react'
import { Disqus } from 'gatsby-plugin-disqus'
const Hoge = ({
  data: { previous, next, site, markdownRemark: post },
  location,
}) => {

    let disqusConfig = {        url: `${encodeURI(site.siteMetadata?.siteUrl + post.fields?.slug)}`,        identifier: post.id,        title: siteTitle,    }    return (
        <div >
            <Disqus config={disqusConfig} />        </div>
    )
}

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
        siteUrl
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
      fields{
        slug
      }
      tableOfContents
      timeToRead
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`

(オプション)アクションボタンを消す

デフォルトだと、以下のようなアクションボタンが付いてくる

自分は不要と感じたので無効化する。

6. disqusの管理サイトに飛び、対象のサイトを選択し、Settingsタブ→Reactions→Turn Reactions offをクリックする

すると、サイトの方でリアクションが消える

以上。

〆

当初は勉強がてらにコメントシステムも実装してみようかな〜とか思ったんです。
(1インスタンスだけへちょいConohaのVPSを契約してるのでそいつを使おうかと)
けど、スパム対策とか、セキュリティとかいろいろ考えるとめんどくさくなってきた（おい）ので、
既存のサービスをマッシュアップしようとしたわけです。

どうやら、広告もついてきてしまうようですが、
まぁサービスの運営維持費を考えれば当然のことですよね...
なので、自分的には受け入れようと思います。
では。(^^)ノシ

ブログ新設しました！

Mon, 26 Jun 2023 21:15:00 GMT

挨拶

みなさんこんにちは！
いやーとうとう作っちゃいましたよ！新ブログ！
以前のブログはBloggerにお世話になっていましたが、

カスタムが大変
記事の編集のためのテキストエディタがなかなか使いにくい
- MarkDownで書けるようにカスタムしても、テキストエディタはHTMLしか基本受け付けないので変な補完が入る

...まぁそんなこんなな悩みを抱えていた矢先、
Gatsbyというフレームワークを知る。
Web界隈では結構有名なフレームワークらしくって、
何よりもGithub Pagesにデプロイできると聞き居ても立ってもおられず...

具体的に乗り換えて感動した話

reactベースなのでコンポーネントごとに要素を管理できる

BloggerではクソデカモノリスCSSをいじらなければ行けなかったので

Gitにてお手軽にバージョン管理できる

事故ったときに死に戻りできるのは良きかな良きかな

プラグインが豊富でお手軽にカスタマイズできる

自分的には、ソースコードをペタペタすることが多いので、
お手軽にソースコードのシンタックスハイライトや、行表示、コピーボタンなどが実現できるのが
衝撃的でしたね...

胸キュン.sh

Copy

echo "こんな感じのやつができるのがトキメイた♥"

デプロイ前に手元で動作確認できる

Bloggerでは、記事単体ではできたのですが、サイトレイアウトの変更では出来なかった事なので...

今後拡張していきたいこと(2023-06-26現在)

月別アーカイブ

前のブログであった機能なので...

ToCの自動追従機能

カッチョイイから。

頭出しボタン

あったらおしゃれ？（謎観念

意見を聞けたら良いがな

タグ機能

〆

Web界隈はあんまりやらないので結構いい勉強になりました。
Gatsbyの環境をDockerで構築したのですが、
ThinkPad X1C6ちゃんのRAMが制作開始当時は８GBしかなく結構カツカツでした(^^;)
中華から怪しい基盤を入手することによりCPUもRAMも性能アップを果たし、なんとか使えるように...
それでもぶっちゃけGatsbyってビルド遅い気がするんですよね。
聞いた話によると、Gatsbyよりもビルドが早かったりするものがあるようなので気にはなりますが、
ひとまずこれで継続したいと思います。
そんなこんなで！
今後とも、「ゆきふるまくらの。」をよろしくお願いします。m( _)m

react-device-detectでお手軽にスマホ対応する

Mon, 26 Jun 2023 21:00:00 GMT

手順

npmかyarnでreact-device-detectをインストール

shell

Copy

npm install react-device-detect

実装する

Hoge.js

Copy

import { graphql, useStaticQuery } from "gatsby"
import React from 'react'
import { BrowserView, MobileView } from "react-device-detect"
const Hoge = () => {


  return (
    <div >
        <BrowserView>            <h1>ブラウザだけだよ！！！</h1>        </BrowserView>        <MobileView>            <h2>スマホだけだよ！！</h2>        </MobileView>    </div>
  )
}

3行めでインポートして、
PCブラウザのみで表示したいコンテンツは
<BrowserView>でくくる。
スマホブラウザのみで表示したいコンテンツは
<MoblieView>でくくる。
以上。

補足

iPad AirではChromeでもSafariでもモバイル扱いになる様子。
当方のiPad AirでのChromeでは、PC版をリクエストしても、モバイルのままの様子。

〆

簡単杉

こんなにお手軽に切り替え実装ができるだなんて夢にも思わんかったわ...
ホント進歩してますな...

Gatsby Starter Blog RSS Feed

718boxster(982)にて自力でAndroidAutoを有効化する！

Porsche 718 Boxster (2018年モデル) 買いました！

ネタソース

下準備

PCでの作業

ファイルのダウンロード

SDカードの準備

ボクスターでの作業

Wireless Android Auto (おまけ)

〆

NodeRedの自作ノードでDIコンテナを使ってみた(LT会のパワポ)

スライド

Github

stm32-rsのDevContainer環境設定

あいさつ

stm32-rsについて

前提条件・事前準備

手順

Example

念の為注意

〆

RX-8の一年点検に行ってきました！

ディーラーにて一年点検

圧縮測定

結果

フロント

リア

去年との比較

シンセレネシス×PCVバルブクリーナーの感想

〆

【備忘録】LeadingQualityまとめ

手法

1章 品質と価値

2章 3つの品質ナラティブ

3章 品質文化醸成

4章 手動テストと自動テスト

5章 プロダクトの成熟度と品質

6章 継続的テストとフィードバックループ

7章 テストインフラへの投資

8章 チームと会社の成長指標

9章 ローカルペルソナ

10章 品質戦略のリード

〆

360度カメラ動画の音を消す[GoProFusion]

背景

下準備

音を取り除く

メタ情報を埋め込む

YouTubeにアップロードする

〆

CSharpの拡張メソッドで関数型言語のパイプ演算子風を考える

背景

完成品

解説

ケース1 つらつら処理をつなげる

ケース2 引数を省略

ケース3 処理の間にログ的な出力を差し込む

デメリットの考察

如何にこの関数型アプローチがハマるか

知らない人がこのコードを見たときの違和感

〆

BlazorとPixiJSを融合させてみるぞ

前置き

レポ＆デモ

問題点

詳解

〆

ThinkPadX1C6のファンをNidecから変えて比較してみる！

ネタ元

写真で見る違い

ベンチマークや観測方法

計測結果

CPUの使用率、温度、動作周波数の推移

3DMarkの結果

Nidec

Delta

考察とか感想とか

結論

10万円アンダーでディザスタリカバリ対応のSSDのNASを構築するぜ！（概要編)

1章品質と価値

3章品質文化醸成

4章手動テストと自動テスト

5章プロダクトの成熟度と品質

6章継続的テストとフィードバックループ

7章テストインフラへの投資

8章チームと会社の成長指標

9章ローカルペルソナ

10章品質戦略のリード