ひつじTips

技術系いろいろつまみ食います。

ノートPC(ThinkPad X1 Carbon 6th)のキートップが1個だけ壊れたので、キー単品をアメリカから取り寄せて直した(QuikFixLaptopKeys・送料込み$17.97)

長年愛用してるThinkPad X1 Carbon 6th gen(2018年)のPgDnのキートップが壊れちゃいました。(子どもにやられました。届くところに置いてたのが悪い。。)

PgDnキーのキートップがとれちゃった。。

適当にググると、Lenovoに修理依頼したら8万円の見積りになっただの、PCバラしてキーボード丸ごと交換するだの、物騒な事例が出てきてツラ😢、、なのですが、Claude Sonnet5ちゃんにキートップを1個単位で売ってくれるアメリカの通販サイト QuikFixLaptopKeys を教えてもらってそこで買いました!

www.quikfixlaptopkeys.com

送料込みで$17.97、注文から19日で到着、純正と遜色ない(というかむしろキレイな)ものが届いて、ちゃんとハマりました。すばらしい👏👏

AIに聞けば出てくる解決策とはいえ、実際の事例がないと手を出しにくいよなぁ。。と思って本記事でどんな感じだったかを書きます。

# ……が、書いてる途中の裏取りでほぼ同じ事例の記事↓を見つけました。。まぁ使ってるサービスは異なるのでよしとしましょう。。

memobun.hatenablog.com

  • 壊れたもの:キートップ側のツメ
  • 採用しなかった(できなかった)選択肢
    • メーカー修理・修理業者 → 金額的にNG
    • 国内のパーツ屋 → 欠品中のためNG
    • メルカリでキーボードごと購入 → 失敗
  • キートップを1個単位で売ってくれる海外通販がある
  • QuikFixLaptopKeysでの購入手順
    • キーの選択
    • 購入・支払い
    • 配送
  • キーを直す
  • 注意点
  • さいごに
続きを読む

Streamlit カスタムコンポーネントを作って、pip installできるようにして、サンプルアプリをCommunity Cloudへデプロイする

タイトルの通り。基本的にはこのQiita記事↓のままなんだけど、細々やらないといけないこともあり、自分の環境に合わせたバージョンで書きやす。

qiita.com

そもそもStreamlitとは、pythonでWebアプリ作れる便利なやつです。まぁこの記事に辿り着く人は知ってるか。

バックエンド/フロントエンドとか考えずにpythonでWebアプリ化できるのは便利ですね。

streamlit.io

そして、Streamlitはコンポーネントを自作することができます!

Reactで作ったHTMLをiframeで突っ込んでるだけなので、割と何でもできそうです(ReactなしでももちろんOK)。python側との入出力も備わってます。

公式のカスタムコンポーネントチュートリアルはここから。とりあえず一点は実際と異なるところを見つけてますが、まぁ基本的には問題なさそうです。

docs.streamlit.io

しかも、StreamlitがCommunity Cloudという名前でデプロイできる環境を用意してくれてます(Next.jsにおけるVercelみたいな?)

リソースも思ったよりある?かなと思います(2025/2時点、参考: Manage your app - Streamlit Docs

  • CPU: 0.078 cores minimum, 2 cores maximum
  • Memory: 690MB minimum, 2.7GBs maximum
  • Storage: No minimum, 50GB maximum

https://share.streamlit.io/explore?sort=most+viewedshare.streamlit.io

ちなみに今回自分が作ったコンポーネントはめちゃシンプルで、string配列を引数にクリックできるリストを作ってくれるだけです(標準にありそうなものですが見つけられず…)

col1, col2 = st.columns([1, 1])
with col1:
  def on_click(name: str) -> None:
    print(f"clicked: {name}")
    st.session_state['clicked'] = name

  st.header("Clickable list:")
  clickable_list(["aaa", "bbb", "ccc"], on_click, key="clickable_list")

with col2:
  st.header("Result:")
  if "clicked" in st.session_state:
    st.write(f"Clicked: {st.session_state['clicked'] or 'none'}")


と実装すると、以下のようになります。

streamlit-clickable-listのデモ

ここで実際に動かせます!:https://demopy-esoz75md8bttxnf4zvk9wa.streamlit.app

コンポーネントのインストール:

pip install streamlit-clickable-list


ソース: github.com

  • 前準備
    • 環境構築
      • pythonプロジェクトの作成
      • streamlitのインストール
      • テンプレをコピペ
      • フロントのモジュールをインストール
    • 動作確認
      • ReactのWebサーバを実行
      • streamlitアプリを実行
      • ブラウザで確認
    • その他もろもろ、必要に応じて
      • [WSLの場合] コンポーネント編集でホットリロードするために、ファイルをポーリングで監視させる
      • [WSLの場合] Streamlitアプリの編集でホットリロードするために、ファイルをポーリングで監視させる
      • [vscodeを使う場合] デフォルトのインタプリタを仮想環境に設定
  • Streamlit カスタムコンポーネントの実装
    • コンポーネント名の書き換え
      • my_componentのフォルダ名を任意の名前に書き換え
      • streamlit_<your_comp_name>/__init__.pyを書き換え
      • js側の名前も変更しておく
      • 改めて動作確認
    • Reactの実装
      • python-React間の入出力について
      • Reactコンポーネントで、Streamlit.setFrameHeight関数を必ず呼ぶ
      • python側から設定されるコールバック関数の実行
  • pip installできるようにする
    • PyPIにアカウント作成
    • 各種ファイルの設定
      • Manifest.inの作成
      • ライセンスの設定
      • リリース関連情報の設定
    • PyPIにリリースする
      • React側をビルド
      • Streamlitコンポーネントをリリースモードに変更
      • リリース前の動作確認
      • バージョンの更新
      • python側をビルド
      • githubにpush・tag付け
      • PyPIへのプッシュ
      • pip installできるか確認
  • サンプルアプリをCommunity Cloudへデプロイ
    • サンプルアプリの準備
      • サンプルアプリの作成
    • Streamlit Community Cloudのアカウント作成
    • Streamlit Community Cloudでアプリ作成
    • デプロイ
  • コミュニティへ報告
  • 終わりに(Streamlitの個人的感想)
続きを読む

Webアプリをgithub pagesで公開するときの個人的メモ

最近Github pagesを使ってWebアプリを立て続けに(とはいえ2コだけど)作ったので、やることメモっておく。

ちなみに作ったのは以下の2つ(遊んでね!)

mu-777.github.io

mu-777.github.io

  • Github pagesの設定をする
  • Reactアプリのときは、baseをレポジトリ名に変える
  • Reactアプリのときは、ビルド成果物をdocsに置く
  • OGP画像を作る
  • faviconを作る
  • sitemapを作るよう設定する
  • OGP用のmetaタグを入れる
  • Googleアナリティクスに追加する
  • Googleサーチコンソールにsitemapを登録する
続きを読む

素のHTMLだけで360パノラマ画像を表示する(Three.jsなどを使わずに、エクイレクタングラー形式画像をひずみなく表示する)

RICOH THETAやInsta360などのカメラで撮影できる360パノラマ画像(業界用語的にはエクイレクタングラー形式画像)はそのままだと以下のような画像で、ゆがんだように見えます

Kings Cross Railway Station Concourse 360x180, London, UK - Diliff, CC BY-SA 3.0 <https://creativecommons.org/licenses/by-sa/3.0>, ウィキメディア・コモンズ経由で

なので通常は、以下のようにひずみのないような人が見やすい表示(以下、360ビュー表示)をさせます。

A-Frameを使った360ビュー表示(ドラッグで見る方向も変えられる)

一般的に、Webで360ビュー表示するには3D系ライブラリを使うと思います。例えばThree.js(WebGLライブラリ)やA-Frame(WebVRフレームワーク)などです。ちなみに、上の360ビュー表示はA-Frameを使っています。

が、本記事では3D系ライブラリなどを使わずHTMLだけ(具体的にはsvg(とちょっとした事前処理))で360ビュー表示を実現する方法をまとめます。

# 厳密にはsvgは"素のHTML"ではないと思うのでタイトル詐欺感はあるかもですが…...標準的なブラウザでのHTMLで追加ライブラリ等なく使えるという意味で"素のHTML"と言わせてください🙏

最終的には、こんな感じになります。ドラッグで向きも変えられます。

svgを使った360ビュー表示(ドラッグで見る方向も変えられる)

以下、これを実現する方法を説明します。本記事で使用する各種コードはここにあります。

github.com


2024/10/24 追記 Webアプリにしてみたので、とりあえず理屈はわからなくてもsvgで360ビュー表示したい人はこちらを使ってみてください:

mu-777.github.io

  • モチベーション
  • 基本方針
  • [前置き] feDisplacementMapの仕様の確認
  • ①360ビュー表示用のMap画像の作成
  • ② Map画像をfeDisplacementMapへ割り当てたHTMLを実装
  • ③ 見ている向きを変える処理の追加
  • ここまでの問題
続きを読む

Shaderで囲碁を打てるようにする実装

めっちゃ前にShaderでプレイアブルな囲碁を作ったのですが、その実装の解説をしまっす。

mu-777.hatenablog.com

要は、これ↓をどう実装したか、というネタです(盤面をクリックしてみてください、石が打てます!(と思ったら、Shadertoyのiframeバグってる?動かせない場合はshadertoyへ))


だいぶ前のネタではあるのですが、久々にシェーダで遊ぼうかなと思ってて、復習がてら実装を見直してみた次第です。

時間をあけて見てみると全然シェーダっぽくない非効率的な実装になっていて参考にはならないかと思います*1が、まぁ実時間で動いてるのでいいかなと(コンパイルはちょっと長いですが。。)

実際の実装は、ShaderToyを見てください(githubにも上げてますが、ShaderToy上でしか動かないので。。)

  • 前置き・スコープ
  • 全体戦略
  • 盤状態バッファの作り方(内容)
  • 盤状態バッファの作り方(実装)
  • 盤の描画と座標系
  • 基本の座標系
    • 素の盤の描画
    • 石の描画
    • アゲハマの描画と座標系
  • 石を打つ
  • 囲みに関する処理
    • コウの判定
    • 囲みの判定
  • 終わりに

*1:誰が何の参考にするためにこのエントリを見るんでしょうかw

続きを読む

YouTubeの文字起こしUIをReactで実装してみる

タイトル通りです!

YouTubeの文字起こしUIとは下図の右のようなやつです(キングオージャーめちゃくちゃおもしろいです!!!)

YouTubeの文字起こしの例(出典: 『「王様戦隊キングオージャー」ヒメノとリタがガールズトークで素顔丸見え!? 変身ポーズ披露&一問一答でわちゃわちゃ!』(oricon))

まぁそんなに難しくはなく,ただ実装してみた,という感じです.

最終成果物は以下のリンクのようなものです.ここを見れば雰囲気わかるかと思います.

https://mu-777.github.io/videojs-transcript-sample/

mu-777.github.io

コードはここです.Reactわかる人はコード見たほうが早いと思います.

github.com

ReactもJavascriptも雰囲気でやってるので,なんかオカシイこと言ってたらすみません.

続きを読む

[Unity]CustomEditorを使わずに,同じクラスの他の変数の状態によってインスペクタ上の変数を動的に編集不可にしたり,非表示にしたりする方法

こちらの記事ではbool型変数によって,変数の編集可/不可・表示/非表示を制御していました

mu-777.hatenablog.com

が,本記事ではそれの拡張版で,int/enum,string,float型の変数によっても制御できるようにします.

(本記事だけで内容は完結してますので,前記事を事前に読む必要はありません)

つまり何ができるか,ということですが,

例えばこういう実装で

public class ConditionalDisableAttrTest : MonoBehaviour
{
    public enum FlagEnum { A, B, C }
    [Header("Enum control")]
    public FlagEnum flagEnum = FlagEnum.A;

    [ConditionalDisableInInspector("flagEnum", (int)FlagEnum.A)]
    public string editableStrIfEnumA = "AAA";

    [ConditionalDisableInInspector("flagEnum", (int)FlagEnum.B)]
    public string editableStrIfEnumB = "BBB";

    [ConditionalDisableInInspector("flagEnum", (int)FlagEnum.C)]
    public string editableStrIfEnumC = "CCC";
}


こういう感じに編集可/不可を制御できたり,

simple enum conditional control in inspector
FlagEnumの設定値によって,他の変数の編集可/不可を制御できる

こうすれば,

public class ConditionalDisableAttrTest : MonoBehaviour
{
    [System.Serializable]
    public struct TestStruct
    {
        public Vector3 p;
        public Quaternion q;
    }

    [Header("String control")]
    public string flagStr = "A";

    [ConditionalDisableInInspector("flagStr", "A", conditionalInvisible: true)]
    public TestStruct visibleStructIfA;
}


表示/非表示を制御できたりします.(自作クラス/構造体も可)

simple string conditional control in inspector
flagStrが”A”のときだけインスペクタに表示される


こういうことをしたくて「Unity インスペクタ 変数 動的」とかでググると,CustomEditorを使う方法が出てきます.

が,これだとCustomEditorで対応したクラスでしか使えない = 他のクラスの変数に使い回しができなくて,ちょろっと使いたいときに不便な感じです.

(プロダクトレベルとかで,しっかり作り込む場合はこちらの方がいいと思いますが)

ということで,今回はCustomEditorは使わずに,任意のクラスの変数に適用できるAttributeを使って実装しています.

正直Unityのエディタ拡張は全然詳しくないので,バグってたらすみません.
一通りの型で使えることは確認しましたが,漏れもあるだろうし,基本正常系しか確認できてません.他のAttributeとの組合せ時とかも未検証です(免責事項)


あまり複雑な実装はいらない,以下のようにシンプルにbool変数で制御するだけでよい,という方は,前記事をご覧ください

編集可/不可 表示/非表示
flag conditional control in inspector
flagがfalseのときは編集不可になる
flagがfalseのときはインスペクタから見えなくなる
続きを読む