ガイド&その他の資料
英語から翻訳·
69
144
JanitorAIの上級者向けバイオデザイン · Melancholuxによる無料コミュニティガイド
やあ、みんな。Melだよ。🤍
今日のガイドを共有する前に、先週の出来事への対応についてお詫びをさせて。みんなが当然期待していたような対応ができなかった。防衛的で未熟だったし、他のJanitorコミュニティとの過去の意見の相違でも同じような振る舞いがあったと自覚している。
問題となったコンテンツを削除するつもりはない。同時に、不快感を生むなら今後そういった種類のコンテンツを繰り返すつもりもない。ある話題を楽しむか嫌うかは一つのこと、それを理由に実際の人間を攻撃するのはまた別のこと。たとえ誰かが明らかに挑発しようとしていても、返信しないという選択ができる。私たちの言葉が相手にどれほど深く影響するかはわからないし、少しの思いやりは何のコストもかからない。
ご迷惑をおかけしたこと、そしてこれを投稿するのにこんなに時間がかかったことをお詫びします。最近は異常に疲れていて、一日の大半を寝て過ごしていた。それは言い訳じゃなくて、静かだった理由の説明。辛抱強く待ってくれてありがとう。
さて、本当に共有したいこと:上級Janitorバイオを実験して学んだすべてのこと。テクニックを秘匿せずに、もっと多くのクリエイターが自分たちの楽しめるものを作れるようにしたい。おかえりなさい。🌷
プレーンテキストの代わりに、HTMLとインラインCSSを組み合わせて、ミニチュアのインターフェースを作れる:フェイクのスマホ、チャット吹き出し、オープニングシーンのファイル、画像ギャラリー、音楽プレイヤー、さらにはフェイクアプリまで。このガイドには目に見えるデモと、そのすぐ下に編集可能なコードが含まれている。学ぶために何かをダウンロードする必要はない。
style="..."を付けるとうまく機能する。グローバルの<style>や<script>は削除されることがある。以下に説明するAPIの回避策は非公式であり、プラットフォームの変更後に動作しなくなる可能性がある。甘い新しいガイドができたよ!
<p style="text-align:center;">甘い新しいガイドができたよ!</p> <p style="text-align:center;"></p> <p style="text-align:center;"><img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;max-width:100%;height:auto;margin:0 auto;"></p>
廊下の向こう側
若い人たちがAmenポーズってやつをやってるのを見たの...
<p style="background:white;border-radius:15px;padding:10px;">笑わないでね。もう送ったことを後悔してる。</p>
</div>
<div style="width:268px;max-width:100%;margin:auto;background:#171416;border-radius:42px;padding:9px;">
<div style="border-radius:34px;overflow:hidden;background:#f9f1ea;font-family:Arial,sans-serif;">
<div style="padding:12px;text-align:center;background:white;color:#41313a;"><b>クララ 🌸</b><br><small>廊下の向こう側</small></div>
<div style="padding:12px;color:#5d4b52;">
<p style="background:white;border-radius:15px;padding:10px;">若い人たちがAmenポーズってやつをやってるのを見たの...</p>
<img src="https://ella.janitorai.com/media-approved/tFa0-Leebkg_pPplQvxBj.webp" style="max-width:100%;height:auto;border-radius:12px;">
<p style="background:white;border-radius:15px;padding:10px;">笑わないでね。もう送ったことを後悔してる。</p>
</div>
</div>
</div>
01 · 新しい隣人への花束
彼女はただあなたを歓迎したかっただけなのに...
シーンを開く ↓
<details style="border:1px solid #d3a8b8;border-radius:15px;overflow:hidden;">
<summary style="cursor:pointer;list-style:none;display:block;background:linear-gradient(transparent,rgba(38,24,35,.88)),url('https://ella.janitorai.com/media-approved/ovh2DAZQGTdr78LhhS9Gw.webp');background-size:cover;background-position:center;padding:42% 18px 20px;text-align:center;color:white;">
<b>01 · 新しい隣人への花束</b><br>
<i>彼女はただあなたを歓迎したかっただけなのに...</i><br>
<small>シーンを開く ↓</small>
</summary>
<div style="padding:17px;background:#fff8f1;color:#73505c;">クララは小さな花束を持ってノックする。突然、予想以上にはにかんで。</div>
</details>✦ ファイルIV — 鍵のかかった扉
タオル一枚。とんだ廊下の惨事。
エントリーを開く ↓
<details style="border:1px solid #bca47b;background:#f4e7c9;border-radius:13px;color:#4d3926;"> <summary style="cursor:pointer;list-style:none;padding:18px;font-family:Georgia,serif;">✦ ファイルIV — 鍵のかかった扉<br><i>タオル一枚。とんだ廊下の惨事。</i><br><small>エントリーを開く ↓</small></summary> <div style="padding:16px;border-top:1px dashed #c5ad89;">このシーンには画像がないので、紙そのものがビジュアルテーマになる。</div> </details>
架空の記録 · 184日後
指令員: 911、緊急事態は何ですか?
エリカ: お願い... {{user}}に電話して。
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
<b>☎ 911 指令アーカイブ</b>
<p>架空の記録 · 184日後</p>
<audio controls preload="metadata" style="width:100%;">
<source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
</audio>
<p><b>指令員:</b> 911、緊急事態は何ですか?</p>
<p><b>エリカ:</b> お願い... {{user}}に電話して。</p>
</div><div style="display:flex;overflow-x:auto;gap:12px;padding:10px;"> <img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;"> <img src="https://ella.janitorai.com/media-approved/eEY7icr8-9ZhuhcKNd3KC.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;"> </div>
コミュニティに参加 ↗
<a href="https://discord.gg/Uvz7TG5ceJ" style="display:block;text-decoration:none;background:linear-gradient(transparent,rgba(21,17,28,.90)),url('https://ella.janitorai.com/media-approved/8OpbhA9D9TkCTKK-W31wG.webp');background-size:cover;background-position:center;padding:31% 12px 20px;text-align:center;border-radius:14px;color:white;"><b>REGINA'S DEN</b><br><small>コミュニティに参加 ↗</small></a>一部のクリエイターはアニメーション付きプロフィールエフェクト、CSSタブ、ホバートランジション、スクロールギャラリーを使っている。この例は、モーション低減設定に対応した穏やかな浮遊ステッカーを示している。このCSSはキャラクターのバイオ内で機能すると仮定せず、プロフィールCSS/HTMLエリアに置こう。
<style>
/* プロフィールCSS用、キャラクターバイオ用ではない */
@keyframes gentleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.my-profile-sticker { display:inline-block;animation:gentleFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .my-profile-sticker { animation:none; } }
</style>
<span class="my-profile-sticker">🌸 おかえりなさい!</span>
1. 自分が所有するキャラクターを作成または開く。できれば未公開のテストボットがいい。2. 現在の説明をバックアップする。3. HTMLページを作る。4. キャラクターURLからUUIDを見つける。5. 自分のアクセストークンをローカルで取得する。6. 圧縮されたHTML説明を含むPATCHスクリプトを使う。7. 再読み込みして公開ページをデスクトップとモバイルで確認する。
デスクトップでJanitorにサインインし、DevTools → コンソールを開いて、これをローカルで実行し、コピーした値は非公開にしておこう。
(async () => {
const getCookie = n => {
const p = ("; " + document.cookie).split("; " + n + "=");
return p.length === 2 ? p.pop().split(";").shift() : null;
};
const m = document.cookie.match(/(?:^|;\s*)(sb-[^=]+-auth-token)(?:\.\d+)?=/);
const base = m ? m[1] : "sb-auth-auth-token";
let raw = getCookie(base);
if (!raw) {
const chunks = [];
for (let i = 0; ; i++) {
const c = getCookie(base + "." + i);
if (c === null) break;
chunks.push(c);
}
raw = chunks.join("");
}
if (!raw) throw new Error("No Janitor session found.");
let json;
if (raw.startsWith("base64-")) {
let b64 = raw.slice(7).replace(/-/g, "+").replace(/_/g, "/");
while (b64.length % 4) b64 += "=";
json = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
} else { json = decodeURIComponent(raw); }
const token = JSON.parse(json)?.access_token;
if (!token) throw new Error("No access_token found.");
copy(token);
console.log("✅ Your own access token was copied locally.");
})();これが私たちが使うAPIリクエストのシェル。キャラクターUUID、自分のプライベートトークン、圧縮されたHTMLペイロードを置き換えよう。ペイロードは完全なHTMLのgzip → base64表現で、通常はローカルまたはコードツールで生成する。
(async()=>{
const CHARACTER_ID="YOUR_CHARACTER_UUID";
const ACCESS_TOKEN="YOUR_PRIVATE_ACCESS_TOKEN";
const bin=Uint8Array.from(atob("YOUR_GZIP_BASE64_HTML"),c=>c.charCodeAt(0));
const ds=new DecompressionStream("gzip");
const description=await new Response(new Blob([bin]).stream().pipeThrough(ds)).text();
const r=await fetch("https://janitorai.com/mb/characters/"+CHARACTER_ID,{
method:"PATCH",credentials:"include",
headers:{"content-type":"application/json","authorization":"Bearer "+ACCESS_TOKEN},
body:JSON.stringify({description})
});
console.log("HTTP STATUS:",r.status);console.log("RESPONSE:",await r.text());
})();カード、テキストボックス、レイアウトがどう作られたか学びたい?公開キャラクターページでDevToolsを開いてピッカーを実行しよう。表示中の要素にホバーして、クリックするとそのouterHTMLをコピー、Escapeを押すとキャンセル。これは構造の研究に役立つ;計算されたスタイル、プライベートデータ、スクリプト生成の挙動は含まれない。
(() => {
let current = null;
const mark = e => {
if (current) current.style.outline = "";
current = e.target;
current.style.outline = "3px solid #ff8db1";
};
const stop = () => {
document.removeEventListener("mouseover", mark, true);
document.removeEventListener("click", pick, true);
document.removeEventListener("keydown", key, true);
if (current) current.style.outline = "";
};
const key = e => { if (e.key === "Escape") { stop(); console.log("Picker cancelled."); } };
const pick = async e => {
e.preventDefault(); e.stopImmediatePropagation();
const element = e.target;
stop();
const html = element.outerHTML;
try { await navigator.clipboard.writeText(html); console.log("HTML copied."); }
catch { copy(html); console.log("HTML copied using DevTools."); }
};
document.addEventListener("mouseover", mark, true);
document.addEventListener("click", pick, true);
document.addEventListener("keydown", key, true);
console.log("Hover and click an element to copy its rendered HTML. ESC cancels.");
})();
✓ <div>、<span>、<img>、<a>、<details>、<summary>を優先する。
✓ キャラクター説明ではスタイルをインラインに保つ。
✓ 巨大な固定幅は避け、モバイルでの読みやすさを確認する。
✓ 縦長と横長の写真を分ける。
✓ 一つのテンプレートを色替えするのではなく、各ボットに独自のビジュアル言語を与える。
✓ 偽のボタンではなく実際のリンクを使う。
✓ 可能な場合は<audio controls>とアクセシブルな文字起こしを使う。
✓ 実験する前に以前のバイオをバックアップする。
✓ {{user}}のようなプレースホルダーを保持する。
✓ 公開説明の中に自分の実際のアクセストークンを絶対に入れない。
作成済み 10月21日
更新済み 10月21日
公開済み 10月21日