VRChat ハブページ のスクリーンセーバーとフォトギャラリーに、Dropbox に入れたスクショを自動で反映する仕組みを作りました。

VRChat のスクショは 2160×3840 などデカいので、そのまま git に入れるとリポジトリが太ります。ブラウザから Dropbox を直接読むのも帯域と CORS の点で微妙だったので、VPS で日次バッチ → Cloudflare R2 → 一覧用の JSON だけ push という形にしました。

ざっくり構成

1
2
3
4
5
6

Dropbox（見出しフォルダごとに整理）
  → VPS（毎日バッチ）
  → リサイズ・圧縮
  → Cloudflare R2（画像本体）
  → 一覧 JSON を git push
  → Cloudflare Pages がビルド

git に残すのは一覧 JSON だけです。スクリーンセーバー用の宣材・アバター別の写真・思い出アルバムなど、Dropbox に入れた画像はすべて R2 から配信しています。

Dropbox 側の整理

1
2
3
4
5

VRChatPictures/guetan.dev/
  フレンドさんとの思い出/    … フォトギャラリー（フォルダ名が見出し）
  イベントでの思い出/
  誕生日！/
  （アバター別・宣材・ポスターなど、用途別フォルダ）

ギャラリー用は見出しフォルダに、それ以外は用途別フォルダに放り込むだけ。翌日のバッチでサイトに反映されます。

なぜ R2 か

• git に画像を積まない（一覧用の小さな JSON だけ更新）
• Cloudflare Pages と同じダッシュボードで完結
• egress 無料（スクリーンセーバーで何度読み込まれても転送料ゼロ）
• 無料枠 10 GB/月で、最適化後の写真なら当面 $0

VPS でやっていること

専用ユーザーで cron を回し、だいたい次の流れです。

1. git pull でサイト側の最新を取得
2. rclone で Dropbox から写真を取り込む
3. 長辺 1920 にリサイズして圧縮し、ギャラリー用の一覧 JSON を生成
4. 画像本体を R2 にアップロード
5. 一覧 JSON だけ commit & push → Cloudflare Pages がデプロイ

rclone の Dropbox 認証や R2 の API トークン設定など、細かい手順は README に書いてあります。

サイト側

ページは一覧 JSON を読んで、スクリーンセーバーとギャラリーの表示内容を決めます。画像本体は R2 から配信し、一覧 JSON はサイト本体（Cloudflare Pages）から配る、という分担です。

VRChat ハブページ で動作を確認できます。

このサイトの一番下にずっと「コメント」だけ出ていて，全然使えなかったので，Waline を入れました．

なぜ Waline か

Giscus も楽そうだったんですが，GitHub のリポジトリを public にしないといけない．このブログのソースは非公開のままにしたいのでパスです．

Disqus みたいな外部任せもありましたが，コメントデータは自宅サーバに置きたかったので，小さく Waline だけ Docker で動かす形にしました．

だいたいこういう構成

• 記事はいつも通り Hexo → 静的 HTML
• コメント API だけ別マシン（Proxmox の LXC）の Docker
• 外からは Cloudflare Tunnel で comment.guetan.dev → コンテナ

guetan.dev と comment.guetan.dev は別ホスト名ですが，記事ページに Waline の JS を埋め込んで，裏で API を呼ぶだけです．

ハマったところ（備忘）

SQLite が空
waline.sqlite が 0 バイトのままだと 403 とか 500 とかになる．公式の DB ファイルを最初に置く必要がある．

管理画面の Failed to fetch
.env の SERVER_URL を固定していたせいで，IP で開いたときに API 先がズレた．未設定にして，アクセスしてきた Host に合わせる方がよかった．

hexo s で JS が読めない
unpkg の module だと CORS と DNS でコケた．jsDelivr に変えたらローカルでもコメント欄が出るようになった．

設定メモ

サーバでは ~/docker/waline/ に compose を置いて，restart: unless-stopped で再起動後も勝手に上がるようにしてある．

Hexo 側は themes/light/_config.yml で comment_provider: waline，login: disable（ニックネームだけで書ける）．

細かい手順はリポジトリの deploy/waline/README.md に残してあるので，自分用のメモ代わり．

これで記事の下にちゃんと入力欄が出るようになった．

コメントもらえたらうれしいです（テストでも）．

VRChat SDKでSelected PlatformをAndroidにした状態でGestureMangerやAv3Emulatorなどで再生モードで確認することができます．

アバターの頬の透過レイヤーは，VRC QuestToolsの便利な機能（VQT Platform GameObject Remover）で紹介した海苔ブロッカーを導入すると簡単に対策できますが，例えばメガネといったアクセサリの透過レイヤーにも同様の問題が発生します．

表情の透過レイヤーの対策

まずは，表情の透過レイヤーの対策を紹介します．

まずは，アバターの顔のメッシュから透過レイヤーのマテリアルを探します．

liltoonTransparent といったシェーダーが使われていることが多いと思います．

マテリアルを探せたら，丸いマテリアルのところを右クリックしてSelect Materialを選択すると，Projectのところにそのマテリアルが表示されます．

そのマテリアルを複製して，名前を~~(Quest)などとしておきます．

複製したらそのマテリアルのシェーダをVRChat/Mobile/Particles/Multiplyに変更します．

公式ページに記載の通り，AndroidアバターにはVRChat/Mobileシェーダしか使えません．
海苔化といった透過レイヤの問題はVRCQuestToolsの自動のシェーダー置き換えがうまく行かないことが問題です．

Quest用のマテリアルを作成したら，アバターの根本に存在するVQT Avatar Converter Settingsのマテリアル変換設定の追加のマテリアル変換設定に+を押して追加し，マテリアル変換設定を「マテリアル置替」に設定します．
そのあと，透過がうまくいかないPCアバター用のマテリアルと先ほど複製してシェーダを変更したAndroidアバター用のマテリアルを選択します．

そのあと，VRCQuestToolsでアップロードすると，透過レイヤーの設定ができました！

メガネの透過レイヤーの対策

最後にメガネの透過レイヤーの対策も念のため紹介します．
(Free) Emerald chain glassesを例に紹介します．

応用するだけなので簡単に，，，

メガネの透過レイヤーのマテリアルを探し，複製してシェーダをVRChat/Mobile/Particles/Multiplyに変更します．

Androidアバター用のマテリアルを作成したら，アバターの根本に存在するVQT Avatar Converter Settingsのマテリアル変換設定の追加のマテリアル変換設定に+を押して追加し，マテリアル変換設定を「マテリアル置替」に設定し，マテリアルを選択します．

そのあと，VRCQuestToolsでアップロードすると，透過レイヤーの設定ができました！

Platformによるオブジェクトの切り替え（Object Remover）

例えば，Questアバターには「海苔」が発生する場合があり，その対策として海苔ブロッカーを導入すると容易に対策できます．

対応しているアバターは以下の「マテリアル設定」をするよりも簡単に対策することができます．

しかし，先の非破壊的な(専用アバターをBakeしない)方法だとPCのアバターにも影響が出てしまいます．

そのほかにも，ギミックの多くがQuest対応させるには難しいため，容量削減のため，Questアバターにはギミックを省略させたい場合があります．

そのため，このようなオブジェクトをビルドするPlatformによって切り替える方法をここでは紹介します．

VQT Platform GameObject Remover

ここでは，チョコ棒ゲーム【Modular Avatar対応】を例に紹介します．

海苔ブロッカーも同じようにして導入できます．

ヒエラルキーからPlatformによって切り替えたいオブジェクトを選択し，その根本にVQT Platform GameObject Removerコンポーネントを追加します．

VQT Platform GameObject Removerコンポーネントのチェックマークを外すことで，そのPlatformのビルド時にオブジェクトが削除されます．
つまり，大半のPCギミックならばAndroidで維持のチェックマークを外すことで容量の削減になりますし，海苔ブロッカーならばPCで維持のチェックマークを外すことでPCアバターには影響が出ません．

ギミック以外にもアバター容量を削減するために特定のアクセサリ（ピアスなど）をAndroidアバターで削除することもできます．

AndroidアバターとPCアバターのパラメータの同期の関係で，PCアバターをアップロードしなおすと，Androidアバターもアップロードしなおさないと同期が取れないことがあります．
例えば，Questユーザ空は服が着ていないように見えるなどの問題が発生することがあります．
必ず，PCアバターを先にアップロードし，その後Androidアバターをアップロードしてください．

まず，Avatar Optimizer，AAO Trace and Optimizeをアバターのヒエラルキーに追加してください． 参考

このステップは省略可能ですが，アバターの容量を削減することができます．
これがないと，アバターの容量がオーバーしてしまうことが多いです．

次にVRCQuestTools をVCCにインポートしてください．

その後，VCCのプロジェクト設定からVRCQuestToolsをインポートしてください．

インポートをすると，UnityのToolsにVRCQuestToolsが追加されます．

Convert Avatar for Androidを選択し，設定ダイアログを開きます．

アバターの欄にQuest対応させたいアバターをヒエラルキーからD&Dして選択すると，以下のようなダイアログが表示されますが，OKを押してください．

すると，アバターの設定のダイアログが表示されます．

基本の設定はそのままで構いませんが，多くの場合Avatar Dynamics設定に赤いエラーが表示されています．
これは揺れもの(Phys Bone)の数が多すぎるためです．
Avatar Dynamics設定をクリックし，設定ダイアログを開きます．

推定パフォーマンスランクの欄を確認し，赤いビックリマークになっているところを確認すると，Physbone関連のエラーが表示されています．

いったん，Physboneのすべて解除をクリックすると，

このように推定パフォーマンスランクがGoodになり，アップロードできる状態になりますが，適度にチェックを入れることにより揺れものをいくつか残すことができます．

今回は胸・けも耳・しっぽ・アホ毛を残すことにしました．

各自重要視しているPhysboneを残すようにしてください．

もし，CollidersやContactSenderにもエラーがある場合は，それらも解除してください．

推定パフォーマンスランクに赤いビックリマークがなくなった後，適用を押してください．

その後，手動で変換するを押さずに，そのダイアログを閉じてください.

ここで手動で変換するを押すと，ヒエラルキーにAndroidビルド用にBakeされたアバターが生成されます．
ですが，これを行うとPCアバターを変更する度に手動で変換するを押す必要があり，ヒエラルキーが煩雑になるのでオススメしません．

ダイアログを閉じると，アバターのヒエラルキーの根本にVQT Avatar Converter SettingsやVQT Network ID Assingerが追加されています．
VQT Avatar Converter Settingsコンポーネントで先ほどのダイアログの設定を変更することもできます．

ここまで出来たらあとはアップロードするだけです．

まずはツールバーのVRChat SDKからShow Control Panelを選択し，Selected PlatformをAndroidに変更してください.

Androidが存在しない場合は，公式ページを参考にAndroid Build Supportをインストールしてください．

なお，先にPCアバターをアップロードしてください

その後，ToolsのVRCQuestToolsからShow Avatar Builderを選択してください．

VRChat SDKでアバターを選択したあと，VQT Avatar BuilderのBuild & Publish for Androidをクリックしアップロードします．

VRChat SDKを開いておかないとアップロードできません．

容量がオーバーしているとの旨のエラーが表示されている最も簡単な対応はマテリアルの解像度を下げることです．

アバターの根本のVQT Avatar Converter Settingsのマテリアル変換設定から最大テクスチャサイズを変更して試してみてください．

以上でもっとも簡単なアバターのQuest対応方法を紹介しました．

しかし，この状態だとアバターの透過レイヤーがうまく動かず頬が海苔の状態になったり，眼鏡が透過されないなどの問題が発生することがあります．
そのほかにも，容量の削減方法にももっと賢い方法は以下の二つの記事を参考にしてください．

• VRC QuestToolsの便利な機能（VQT Platform GameObject Remover）
• Questアバターの海苔やメガネの透過不良を対策する方法

中古で天体望遠鏡用の赤道儀を購入しました．

これでポータブル赤道儀を入れて赤道儀は２つになったわけですが．．．

実家においていた天体望遠鏡を送ってもらいました．
VixenのポルタⅡ R130Sfです．

Vixen R130Sf

父からクリスマスプレゼントで中学生?くらいにもらったやつで，月とか木星を見て楽しんでいましたが，大学に進学してからは実家に置いたままでした．
最近天体観測と撮影に興味を持ちだしたのでそのきっかけで送ってもらいました．

アリミゾ式のマウントなので赤道儀と鏡筒の接続は簡単です．
一方で，三脚と赤道儀の接続は難しく，脚をばらしてねじで赤道儀に脚を取り付けました．

赤道儀の電源は12VなのでUSBのPD対応モバイルバッテリーからトリガケーブルを使用して確保します
トリガケーブル

実際に取り付けた野はこんな形です．

これが望遠鏡を通してみたベガの様子です．
一枚目は赤道儀ON，二枚目は赤道儀OFFです．

撮影機材はPENTAX K70 ISO1600 15sです．

かなり効果がありますね．
極軸合わせがかなり適当で北極星を直接視認しての調整はしていないですがこの精度が出ました．
ただ，鏡筒の影響かベガがかなり光芒が出てしまっています．

マウント変換はこれを用いました．

Amazon

SONYのカメラでも撮りたいと思いましたが，Tリング変換が結構高価だったので単純なマウント変換を購入しました．

Amazon

最後にポータブル赤道儀で撮った星景写真でも置いておきます．

中古で買ったVixenのポーラメータの水平器のオイルが気化していました．

そのため，その水平器を取り外そうとしたものの，簡単には取り外せず，熱でプラスティック部を溶かし割り外し，

こちらの商品を購入
https://amzn.asia/d/hNeRgLI

交換しました．
サイズはちょうどです．

初めに

https://qiita.com/stLuciano/items/49652543192f2402e7c8
でntopngという面白そうなものを見つけたので，proxmoxでのポートミラーリングの設定を頑張った備忘録です．

構成

RTX1200でPort Mirroringの設定

コンソールにてadministratorで実行．ROMに書き込むのを忘れずに

1

lan port-mirroring lan1 3 in 1 2 4 5 6 7 8 out 1 2 4 5 6 7 8

proxmoxのネットワークインターフェイスの設定

proxmoxのホストOSにて設定を行う．

1

sudo apt install openvswitch-switch openvswitch-common

openvswitchをインストールしたら次にPort MirroringしているLANのNICに対して OVS Bridgeを作成します．
スクリーンショットではvmbr1です．

その次に，ntopngを動作させるVMにNetwork Deviceを追加します．
この時，Firewallのチェックを外すのを忘れないように．

ここまで作成したら一度そのノードを再起動してください．

再起動後，proxmoxのホストOSにて

1

ovs-vsctl -- --id=@p get port tap101i1     -- --id=@m create mirror name=span1 select-all=true output-port=@p     -- set bridge vmbr1 mirrors=@m

を実行してください．

この時tap101i1のところをtap{VM id}i{net number}に置き換えてください．
今回はVMの番号が101でネットワークデバイスがnet1だったためtap101i1となっています．
つまり，VMの番号が202でPortmirroringしているLANとbridgeしているネットワークデバイスの番号がnet3の場合tap202i3のようになります．

https://forum.proxmox.com/threads/port-mirroring-with-open-vswitch-no-row-tap-in-port-table.84228/

実際にあるかどうかはホストOSにてip aを実行し，tapが存在するかを確認してください．

実行し，よくわからないハッシュ値が出てきたら成功です．

ovs-vsctl: no row "tap101i1" in table Port
が出てきたら失敗です．
おおよそtap101i1がOVS bridgeで作成されていないため見つからないというエラーです．
ここまでの手順を確認してください．

ntopngのインストール

https://packages.ntop.org/
から自分のOSに合うパッケージをダウンロードしてください．
今回はUbuntu用を選択します．

するとこのような画面になりますので，stable buildsのapt-stable.ntop.orgを選択してください．

nightly buildsをインストールしたところGUIがところどころ崩れていたりあるボタンを押すとクラッシュしたりで散々でした．

洗濯するとUbuntuのそれぞれのバージョン用のインストール用のコマンドが表示されるので実行していってください．
下にUbuntu22.04 LTS用のコマンドを記載しておきます．

1
2
3
4
5
6
7
8
9
10

sudo apt-get install software-properties-common wget
sudo add-apt-repository universe
wget https://packages.ntop.org/apt-stable/22.04/all/apt-ntop-stable.deb
sudo chown _apt /var/lib/update-notifier/package-data-downloads/partial/
sudo apt install ./apt-ntop-stable.deb
sudo apt-get clean all
sudo apt-get update
sudo apt-get install pfring-dkms nprobe ntopng n2disk cento
sudo apt-get update
sudo apt-get upgrade

4行目を追加しています．
https://askubuntu.com/questions/954862/couldnt-be-accessed-by-user-apt-pkgacquirerun-13-permission-denied

インストールが完了したら，http://ipアドレス:3000にアクセスし

• user名 : admin
• password : admin
  でログインするとパスワードの変更を求められます．
  ついでに言語もJapaneseを選択しておいてください．

正常にログインができたらインターフェイスの設定に移ります．

左上のインターフェイスの矢印からPortMirroringをしているNICに設定をし

，PortMirroringにしている関係上，送受信の区別がつかないため
左のツールバーのインターフェイス > 詳細から名前の横の設定マークを選択

ミラーされたトラフィックをオンにしてください．

すると，送受信の区別がされ，正常に動作し，自宅のルータを通るすべてのネットワークトラフィックを監視することができるようになりました．

Prime VideoやDiscordなど，特定のサービスのトラフィックはアプリケーションから確認することができるのは面白いです．

qemu-guest-agentのインストール

proxmoxのVMは初期状態ではIPアドレスをWEBインターフェイスから確認することができません．

そこで，VMのOptionsにてQemu Agentを有効化し，

そこで，VMに

1

sudo apt install qemu-guest-agent

をインストールした後に再起動すると

WEBインターフェイスでローカルIPアドレスを確認することができます．

はじめに

このwebサイトおよびメール認証をつけていますがproxmox管理画面などの外部公開にはCloudflareのTunnelを用いています．
自宅はアパートで固定IPを利用できない環境ですが，これを用いると簡単に任意のサービスの外部公開が可能です．
まず，第一段階としてドメインをCloudflareで管理もしくは，ネームサーバとして登録する必要があります．
詳しくはここを見てください．
https://developers.cloudflare.com/fundamentals/setup/account-setup/add-site/

Cloudflare Tunnelの設定

Cloudflareに正常にドメインが登録できたものとして話を進めます．

Cloudflare DashboardのZero Trustを選択し

Access > Tunnelsを選択します．

Create a tunnelを選択し，任意のtunnel名を入力すると

このような画面になります．tunnelのconnectorとして動作させたいパソコンのOSを選択するとインストール方法及び設定方法が記載されていますので従ってください．

nginxの設定

今回は/var/www/html/{サイト名}にある静的サイトを公開する設定で行きます．

1

sudo apt install nginx

/etc/nginx/site-available/{サイト名}を編集する．

1
2
3
4
5
6

server{
    listen 80;
    server_name {IPアドレス};
    root /var/www/html/{サイト名};
    charset UTF-8;
}

site-availableからsite-enabledに対してシンボリックリンクを張る

1

sudo ln -s /etc/nginx/sites-available/{サイト名} /etc/nginx/sites-enabled/{サイト名}

1

sudo nginx -t

で確認ののち

1

sudo systemctl restart nginx.service

でローカルに対して公開が完了します．

tunnelの設定

先ほど設定したtunnelの上にあるPublic Hostnameを選択し，

公開したいローカルのアドレスと公開するドメイン名を登録すると外部に公開することができました．

DDNSの設定

https://r-shibata.hatenablog.com/entry/2021/08/10/201259
を参考に設定