1. Roll20 ヘルプセンター
  2. シート開発
  3. 一般

最低要件とベストプラクティス

レポジトリ内のキャラクターシートの品質を一定に保つため、すべての提出物は以下の最低条件を満たしている必要があります。 

1. 行動規範

  • Roll20の行動規範はキャラクターシートにも適用され、キャラクターシートはそれを遵守しなければなりません。
  • 知的財産を侵害しないこと。 コミュニティ・シートには、著作権の制限を受ける可能性があるため、キャラクターの創造や進化を含めるべきではありません。 By Roll20」のシートには、ゲームクリエイターとのパートナーシップにより、このようなコンテンツが含まれている場合があります。 ByRoll20'シートのコードから作成されたシートは、キャラクター作成や昇格オプションのコードが削除されていることを確認する必要があります。 他の属性（現在のレベルを含む）に基づいて自動計算される属性を持つことは構わない。 提出されたシートがこのルールに違反している場合は、その旨をお知らせします。
  • キャラクターシートには特別な条件があります。 性別」のエリアを含むキャラクターシートに対する新しいプルリクエストのすべての提出は、（あらかじめ定義された選択肢のリストを含むドロップダウンメニューではなく）オープンテキスト入力にする必要があります。 このガイドラインは、ゲームを促進するためのアプローチにおいて、包括的であろうとする私たちの継続的な努力を反映したものです。 この場合、この小さなプログラム変更に時間をかけて取り組むことが、私たちのコミュニティにとって大きな違いとなる。

2. グッド・コード

  • 最低限のスタイリング。 すべてのキャラクタ・シートは、美的で使いやすいものにするために、少量のCSS & HTMLスタイリングが必要です。 例えば、ウィンドウのサイズが変更されたときに、要素が意図せず重なってしまうようなことがあってはならない。 このシートは、紙版のシートを見慣れている選手にとっては見慣れたものであるはずだ。 紙版と同じである必要はなく、著作権を侵害するようなものであってはならないが、選手が使い方を理解するのに苦労するようなおかしなレイアウトであってはならない。 使いやすさを第一に考えたデザイン。
  • 適切なHTML構文。 アクセシビリティを高め、コミュニティへの貢献のためにコードを保守しやすくするため、適切なHTML構文が推奨されています。 すべての新しいシートは、<div>や<span>要素のような適切なコンテナ要素を使用することが期待されています。 あなたのHTMLファイルは、<head>、または<body> タグを使ってはいけません。
  • Unixサーバーとの互換性が必要です。すべてのCSS、HTML、JSONファイルは、Unixの改行コード（LF）で送信する必要があります。 Googleで検索すれば、お気に入りのテキストエディタで設定する方法がわかるだろう。 さらに、すべての提出書類には、有効なsheet.jsonファイルとプレビュー画像を含める必要があります。 適切なsheet.jsonの作成方法は、GitHubのREADMEに記載されている。
  • Chrome & Firefox対応。 Roll20の公式サポートブラウザはChrome & Firefoxの2つです。 すべてのキャラクタ・シートは、この2つのブラウザで機能性とスタイルをテストする必要があります。

3. 満足のいく経験

  • キャラクターシートはデフォルトでスタンドアロンでなければなりません。 すべての基本的なシート機能は、Roll20 の外部でホストされている画像やフォント、Mod (API) コンパニオンスクリプトなどの外部要件なしに使用できなければなりません。 MOD(API)コンパニオンはキャラクターシートの補助として歓迎されますが、すべての購読レベルのコミュニティメンバーにアクセシビリティ & 機能を保証するために、シートは外部要件なしにデフォルトで使用可能でなければなりません。
  • 新しいシートの作業を始める前に、作業しているシステムのシートが既に存在しないことを確認してください。 同じゲームのために複数のシートを作ることは、パーティを分裂させ、ゲームのコミュニティをRoll20上で成長させることを難しくします！ 1年以上メンテナンスが行われていない既存のコミュニティ・シートのオーバーホールは、元の作者と連絡が取れなければ許される。 そのような場合、既存のキャンペーンのデータが消えないように、古いシートから既存の属性を変換する努力をしなければならない。
  • 機能的なロールボタン。 最高のシートはキャラクターのステータスを記録しているだけでなく、ゲームシステムで最も一般的なロールが埋め込まれている。 これにより、直感的な機能が追加され、新規プレーヤーがゲームをプレーしやすくなった。 システム全体のすべてのロールを含める必要はありませんが、よく使われるロールを適宜含めることで、シートを次のレベルに引き上げることができます。 琥珀無き ロールプレイング・ゲーム」のようなロールのないゲームは、この基準を満たす必要はない。 この要件が適用されないシステム用にシートを設計する場合は、プルリクエストにコメントを含めてください。
  • 入力 & データ追跡用のテキストフィールド。 属性やステータスを持つゲームシステムのキャラクターシートは、ユーザーが自分のデータを追跡できるように、<入力>要素を含むべきである。 可能な限り、属性には標準的な名前を使いましょう。 例えば、「知性」、「強さ」、「知恵」。 これは、キャラクターを別のシートでゲームにインポートした場合に、ほとんどの値を移行できるようにするために重要です。 属性名がすべて異なる場合は、何もインポートできない。 最善の策は、そのシステムの既存のシートを見て、可能な限り、すでに使われているのと同じ属性名を使うことです。 同様に、<textarea>タグは、ユーザーがメモや説明を追加できるよう、必要に応じて含めるべきである。 この要件はシステムによって大きく異なるため、もしあなたがシートを作成しようとしているゲームシステムにこの要件が当てはまらない場合は、プルリクエストにコメントを含めてください。
  • ルールはすぐに入手できなければならない。 自主制作ゲームや自作システム用のシートを提出することができる。 自作ゲームは、それぞれのゲームシステムの著作権を侵害していないことを確認する必要がある。 どちらの場合も、ルールはオンラインで一般公開される必要がある。

ミニマムを超えて

以下の提案は、リポジトリに追加しようとしている新しいキャラクターシートに要求されるものではありません。 フロントエンド開発の初心者であるシート作成者は、シートのバージョン1について、上記の最低要件を満たすことに集中すべきです。 しかし、一度基本に慣れてしまえば、以下の提案はシートをさらに一歩前進させ、本当に輝かせることができる。

  • CSSウィザードリー. 私たちのシート執筆者のコミュニティは、非常に賢く創造的です。 ここでは、キャラクター・シート・システムを活用する方法の例を紹介している。
  • カスタマイズロールテンプレート. ロール・テンプレートは、あなたのキャラクター・シートの配色 & スタイルに合わせてカスタマイズすることができます。 さらに、ゲームシステム特有のメカニクスにマッチしたロール出力の達成を支援するために活用することもできる。
  • シートワーカーは強力なツールだ！. これらのスクリプトはCharacter Sheetsシステムの高度な機能であり、シート作成者は入力値が変更されたときなど、特定のイベント時に実行するJavaScriptを指定することができます。
  • 翻訳キー. キャラクターシートの国際化(i18n)は、あなたのキャラクターシートを翻訳者のコミュニティがその言語に翻訳し、Roll20の誰もがその言語を利用できるようにするものです。 2016年9月より、既存のキャラクターシートの単なる代替翻訳である新しいキャラクターシートは受け付けなくなりました。
  • シートのデフォルト設定. 選択可能なオプションは、カスタム文字シートに付属のsheet.jsonファイルで指定できます。 これらのオプションは、キャラクターシートが使用されているときに、すべてのキャラクターに対してデフォルトの設定を提供します。
  • コンペンディウムの統合. あなたのシートがコンペンディウムと互換性があることを指定することで、プレイヤーはゲームプレイ中に右サイドバーにあるコンペンディウムに直接アクセスできるようになります。 コンペンディウムはまだRoll20で成長中の機能であり、統合はまだ大半のゲームシステムでは利用できない。
  • タイトルに属性名を含める。 title=@{attribute_name}を 追加すると、マクロ作成者が属性の名前を見つけやすくなる。 タイトルは時折、他の目的に使われることがあるので、最善の判断をしてほしい。
  • wikiページへのリンクあなたのシートにwikiページを作成した場合、sheet.jsonの 指示セクションにリンクを貼ることができます。

ベストプラクティス

これは、コミュニティのために保守可能なコードリポジトリを提供するために、シート作者間の一貫性を高めるためのベストプラクティスガイドラインです。

属性／入力

  • 属性名は小文字でなければならない。 一貫性を保つために、みんながこうすることでプログラミングが少し楽になる。
  • RPGには奇妙な言葉がある。 テキスト入力とテキストエリアにはspellcheck="false "を使い、ブラウザがスペルエラーを表示しないようにしましょう。
  • & 入力属性を少なくする。 属性や入力が多ければ多いほど、シートの読み込みは遅くなります。 これは平均的なシートでは心配ないが、D&D 5E Sheet by Rollや パスファインダー(コミュニティ)のような堅牢なシートでは、過剰な属性 & の入力が管理されないまま放置されると、パフォーマンスの問題につながる可能性がある。

Sheetworkers & ロール・テンプレート

  • 非同期のカスケードは避ける。 可能な限り、シートワーカーの非同期カスケードは避けてください。 この例は、getAttrs -> calculations -> setAttrs -> getAttrs -> calculations -> setAttrs…です。 より良い方法は、必要なものすべてをgetAttrsで取得し、最後にsetAttrsで計算することだ。
  • 自動計算された属性上のシートワーカー。 シートワーカーは、イベントが発生したときにトリガーされます。このようなイベントが発生する頻度が低いため、自動計算属性よりもキャラクターシートのパフォーマンスが向上します。

ダークモードのスタイリング詳細

  • テーマ切り替え
    ユーザーがダークモードに切り替えると、仮想テーブルトップは特定のCSSクラス .sheet-darkmodeを <body> 要素に追加します。 スイッチをライトに戻すと、そのクラスは解除される。
  • テーマ変更
    シートの末尾に色の選択肢を追加することで、シートのCSSは次のようにラップされる。 ボディ.シート-ダークモード { }で囲むことで、ユーザーはスイッチを入れたときにその変化を見ることができます。

その他Roll20特有

  • importantは避けること。 CSSで"important "を使用すると、"important "の数が増えてカスケード効果が発生する可能性があるため、可能な限り "important "を使用しないようにしましょう。
  • HTMLのCSSクラス名に sheet-を 含めないでください。 sheet-はHTMLのCSSクラスに自動的に追加されるので、そこで繰り返すのは冗長だ。 また、多くのクラスが使用されている場合は、これを省くことで可読性が向上する。
    • 例えば、HTMLでは、class="sheet-strRow "の代わりにclass="strRow "とする。 警告： <rolltemplate> 要素のクラスでは、上記は真実ではありません。 これらのクラスについては、完全なクラス名（つまり、sheet-で始まる）を指定する必要があります。
  • 最小幅を含める。 シートに最小幅を含めると、サイズ変更に役立ちます。 シートを初めて開いたときのデフォルトの幅（約800px～900px）を超えないようにしてください。 NPCビューのキャラクターシートは小さく、凝ったPCシートは大きくなることがある。
  • ボタンマクロの翻訳には ^{ } を使う。 ボタンマクロで ^{key} を使用すると、適切な言語の翻訳jsonから適切なキーが挿入されます。 これにより、ロール・テンプレートは他の言語にも適応しやすくなります。

GitHub/シート投稿

  • 進行中の作業にはgitブランチを使用してください。 進行中の作業を保存するために、新しいブランチを作成します。 プルリクエストの準備ができたら、完成したコードをroll20-character-sheetsmasterブランチにマージしてください。 こうすることで、未完成のコードでプルリクエストを提出し、コードマージが遅れることを防ぐことができます。 さらに良い方法は、roll20-character-sheets リポジトリをフォークして、GitHub からプルリクエストを提出することです。 
  • すべての画像をGitリポジトリに含める。 画像はGitHubのリポジトリに含めることで、アクセスが容易になり、外部依存が減り、更新が簡単になる。

詳しくはGitHub入門ガイドをご覧ください。

一般的なHTML/CSS/コーディング

Roll20のキャラクターシート作成以外にも応用できる一般的なヒントです。

  • XHTMLの標準に近づけよう。 例えば、次のように要素をスラッシュで終えると<input .../>.
  • インラインスタイルは最後の手段として使用する。 インラインスタイルは保守性の低いコードであり、ほとんどの場合、外部スタイルシートの方が良い選択肢です。 HTMLのstyle =属性はできるだけ少なくしましょう。
  • 読みやすいコードを書く。コードが読みやすければ、他の人も協力しやすくなる。 18 読みやすいコードを書くためのヒント
  • 一般的な HTML/CSS スタイルガイドに従ってください。Roll20 固有のベストプラクティスに反しない限り、推奨されるスタイルガイドに従ってください：
この記事は役に立ちましたか？
37人中25人がこの記事が役に立ったと言っています