ガイド&その他の資料

英語から翻訳

Guide & More Stuff

69

144

JanitorAIの上級者向けバイオデザイン · Melancholuxによる無料コミュニティガイド

REGINA'S WORKSHOP // コミュニティリソース上級バイオハンドブックスマホ · アーカイブ · イントロ · オーディオ · ギャラリー · Console PATCH · その他
00 // REGINA'S WORKSHOP始める前のひとことお詫びと、いくつかの説明と、感謝を込めて。

やあ、みんな。Melだよ。🤍

今日のガイドを共有する前に、先週の出来事への対応についてお詫びをさせて。みんなが当然期待していたような対応ができなかった。防衛的で未熟だったし、他のJanitorコミュニティとの過去の意見の相違でも同じような振る舞いがあったと自覚している。

問題となったコンテンツを削除するつもりはない。同時に、不快感を生むなら今後そういった種類のコンテンツを繰り返すつもりもない。ある話題を楽しむか嫌うかは一つのこと、それを理由に実際の人間を攻撃するのはまた別のこと。たとえ誰かが明らかに挑発しようとしていても、返信しないという選択ができる。私たちの言葉が相手にどれほど深く影響するかはわからないし、少しの思いやりは何のコストもかからない。

ご迷惑をおかけしたこと、そしてこれを投稿するのにこんなに時間がかかったことをお詫びします。最近は異常に疲れていて、一日の大半を寝て過ごしていた。それは言い訳じゃなくて、静かだった理由の説明。辛抱強く待ってくれてありがとう。

さて、本当に共有したいこと:上級Janitorバイオを実験して学んだすべてのこと。テクニックを秘匿せずに、もっと多くのクリエイターが自分たちの楽しめるものを作れるようにしたい。おかえりなさい。🌷

01 // REGINA'S WORKSHOP上級バイオとは?キャラクター説明の中にある小さなテーマ付きページ。

プレーンテキストの代わりに、HTMLとインラインCSSを組み合わせて、ミニチュアのインターフェースを作れる:フェイクのスマホ、チャット吹き出し、オープニングシーンのファイル、画像ギャラリー、音楽プレイヤー、さらにはフェイクアプリまで。このガイドには目に見えるデモと、そのすぐ下に編集可能なコードが含まれている。学ぶために何かをダウンロードする必要はない。

2つの異なるシステム:クリエイタープロフィールのCSSはあなたのプロフィールとそのネイティブカードに影響する。キャラクター説明のHTMLは通常、各要素にstyle="..."を付けるとうまく機能する。グローバルの<style>や<script>は削除されることがある。以下に説明するAPIの回避策は非公式であり、プラットフォームの変更後に動作しなくなる可能性がある。
02 // REGINA'S WORKSHOPプレビュー画像を維持するボットカードでは第一印象が大事。
ニュートラルなプレビューヘッダー
シンプルな段落マークアップから始めよう。私たちの経験では、これで最初の画像が公開プレビューに表示される可能性が高まる。すべてのJanitorのアップデートで保証されるわけではない。

甘い新しいガイドができたよ!

ソースコード — 選択してコピー
<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>
03 // REGINA'S WORKSHOP小さなスマホ私たちのフェイクチャットUI:JavaScript不要。
クララ、Amenポーズを試す
スマホの枠、チャット吹き出し、写真とステータスエリア。テキストと画像を自分のキャラクターに合わせて変更しよう。
クララ 🌸
廊下の向こう側

若い人たちが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>
04 // REGINA'S WORKSHOPオープニングシナリオタイトルの背景に画像を敷いたシネマティックなカード。
カバーアート付きの展開式イントロ
カードをクリックするとシナリオの詳細が現れる。画像は要約の背景であり、切り離された画像ではない。
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>
05 // REGINA'S WORKSHOPオーディオと文字起こしボイスメッセージや架空のシーンを再生可能にしよう。
エリカ — 指令記録
MP3の直接URL + ネイティブHTMLプレイヤー + オプションの文字起こし。自動再生は当てにしないで。
☎ 911 指令アーカイブ

架空の記録 · 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>
06 // REGINA'S WORKSHOP画像ギャラリーとコミュニティリンク縦横の向きを分けて、本当にクリックできるカードを作ろう。
スクロールする画像ストリップ
縦長と横長の両方の形式がある場合は、それぞれ別のセクションにまとめよう。
ソースコード — 選択してコピー
<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>
Discordバナーをボタンに
実際のhrefを使おう。バナー全体がクリック可能な面になる。
REGINA'S DEN
コミュニティに参加 ↗
ソースコード — 選択してコピー
<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>
07 // REGINA'S WORKSHOPアニメーション:実際に機能するものプロフィールCSSで重要な区別。

一部のクリエイターはアニメーション付きプロフィールエフェクト、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>
08 // REGINA'S WORKSHOP私たちのコンソールPATCHメソッドの仕組み上級説明を実験したいクリエイター向け。

1. 自分が所有するキャラクターを作成または開く。できれば未公開のテストボットがいい。2. 現在の説明をバックアップする。3. HTMLページを作る。4. キャラクターURLからUUIDを見つける。5. 自分のアクセストークンをローカルで取得する。6. 圧縮されたHTML説明を含むPATCHスクリプトを使う。7. 再読み込みして公開ページをデスクトップとモバイルで確認する。

重要: アクセストークンはログイン資格情報であり、公開コードではない。自分のアカウントにサインインしている時だけ取得しよう。他のクリエイターに送ったり、スクリーンショットに貼り付けたり、ボット内で公開したりしないで。以下のコードはローカルのJanitorクッキーを読んでトークンを自分のクリップボードにコピーするだけで、サードパーティのサーバーには一切接続しない。ブラウザやクッキーの変更により機能しなくなる可能性がある。
ステップA — 自分のトークン

デスクトップで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.");
})();
ステップB — PATCHの形

これが私たちが使う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());
})();
見知らぬ人から渡されたスクリプトを盲目的に実行しないこと。送信先のURLを読み、自分自身のキャラクターだけを更新することを確認しよう。これは非公式な方法であり、互換性や将来のセキュリティ制限を回避する許可を約束するものではない。
09 // REGINA'S WORKSHOPインスピレーションのための要素ピッカー公開ページの要素をクリックして、レンダリングされたHTMLを検査しよう。

カード、テキストボックス、レイアウトがどう作られたか学びたい?公開キャラクターページで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.");
})();
他のクリエイターの作品は学習の参考として使い、適切な場合はクレジットを。彼らの正確なデザインやアートを自分のものとして再投稿しないこと。また、コピーした要素が同一に見えるには外部スタイルが必要な場合がある。
10 // REGINA'S WORKSHOP苦労して学んだこと公開前の実用的なチェック。
✓ カードプレビューにはニュートラルな最初の段落と実際の画像を使う。
✓ <div>、<span>、<img>、<a>、<details>、<summary>を優先する。
✓ キャラクター説明ではスタイルをインラインに保つ。
✓ 巨大な固定幅は避け、モバイルでの読みやすさを確認する。
✓ 縦長と横長の写真を分ける。
✓ 一つのテンプレートを色替えするのではなく、各ボットに独自のビジュアル言語を与える。
✓ 偽のボタンではなく実際のリンクを使う。
✓ 可能な場合は<audio controls>とアクセシブルな文字起こしを使う。
✓ 実験する前に以前のバイオをバックアップする。
✓ {{user}}のようなプレースホルダーを保持する。
✓ 公開説明の中に自分の実際のアクセストークンを絶対に入れない。
自分のキャラクターらしいものを作ろう。教室のノート、小さなスマホ、事件アーカイブ、魔法の本 — 彼らの物語に属するものなら何でも。MELANCHOLUXの他の作品 ↗ふわふわでいてね、みんな。 — Mel & Regina 🌸🤍

作成済み 10月21日

更新済み 10月21日

公開済み 10月21日

公開チャット