モジュール開発
新規モジュールの作成
モジュールでは、モジュール化されたアセット、ファイル、コードを追加し、バージョン管理システムでプロジェクト にインポートすることができます。 これにより、プロジェクトコードを主要な差別化要因に集中させることができ、作成したモジュールによって共通の機能を簡単にインポートすることができます。
ワークスペースに新しいモジュールを作成する:
- ワークスペースのダッシュボードから、「モジュール」タブをクリックします:
- ワークスペースダッシュボードの "モジュール "タブから、"新規モジュールの作成 "をクリックします。
また、プロジェクトのコンテキスト内で、新しいモジュールを直接作成することもできます。 Cloud EditorのModulesの隣にある「+」ボタンを押します。 そして「モジュールの作成」をクリックし、以下の指示に従います。
モジュールの基本情報を入力します:モジュールID(このIDはワークスペース urlに表示され、プロジェクトコードでモジュールを参照するために使用することができます)、およびモジュールタイトルを入力してください。 モジュールタイトルは、後でモジュール設定ページで編集することができます。
モジュールを作成すると、Cloud Editor内のmodule.jsファイルが表示されます。 ここから、モジュールの開発を始めることができます。 モジュール開発の詳細は、「モジュールの開発」セクションを参照してください。
モジュールの開発
モジュール開発は、プロジェクト開発とは少し違います。 モジュールは単独で実行することはできず、プロジェクトにインポートした後にのみ実行することができます。 モジュールは、Cloud Editorのモジュール固有のビュー、またはプロジェクトのコンテキスト内で開発することができます。 モジュールは、開発されたワークスペースでのみ、 利用可能です。
モジュールをプロジェクトにインポートしたときにのみプレビューできるため、モジュール固有のビューでモジュールを開発する場合、Cloud Editorの トップナビゲーションに「プレビュー」ボタンは表示されません。
モジュールの主な構成要素は以下の通りです:
manifest.json
manifest.json
内に、モジュールをプロジェクトにインポートする際にビジュアルコンフィギュレーターで編集可能なパラメータを作成することができます。 module.js
コードは、モジュールマニフェストで利用可能にしたパラメータをサブスクライブし、プロジェクトのコンテキスト内でモジュールを構成する際に、ユーザー入力に基づいて動的に変更することができます。
モジュールコンフィグビルダーは、自動的に1つのパラメータグループが利用可能な状態で起動します。 パラメータグループは、プロジェクトでモジュールを使用する際に、パラメータを論理的に分割して表現し、視覚的にグループ化するために使用することができます。
- グループ名をダブルクリックすると、コンフィググループの名前を変更できます。
- 「新規設定グループ」ボタンを押して、新規グループを追加します。
- コンフィググループにパラメータを追加する場合は、「+ New parameter」を押してください。
- パラメータを新規に作成する場合は、パラメータに名前を付ける必要があります。 この名前は、モジュールやプロジェクトコードで使用される可能性があるため、スペースや特殊文字を含めないようにする必要があります。
- パラメータの種類を選択します。 現在サポートされているパラメータタイプは、
String
,Number
,Boolean
, &Resource
. - 選択したら、"次へ"を押してください。
注意: コンフィググループやグループ内のパラメーターの順番は、プロジェクト内でモジュールを使用する際に、ユーザーに表示される順番を決定するものです。 グループ内のパラメーターの並び替えや、コンフィググループの並び替えは、ドラッグで簡単に行うことができます。 あるグループから別のグループにパラメータを切り替えるには、パラメータフィールドの矢印アイコンを押して、パラメータを移動させたいグループをドロップダウンから選択します。
モジュールパラメーターの種類とオプション
モジュールのモジュールマニフェストを作成する場合、 String
, Number
, Boolean
, & Resource
などの異なるパラメータタイプから選択することが可能です。 各パラメータータイプの詳細:
String
文字列パラメータには、以下の編集可能な項目があります:
パラメータフィールド | タイプ | 説明 |
---|---|---|
Label (1) | String | モジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。 |
Default [Optional] (2) | String | モジュールをプロジェクトにインポートする際に、何も指定されなかった場合のデフォルトの文字列値です。 デフォルトは""です。 |
Number
Numberパラメータには、以下の編集可能なフィールドがあります:
パラメータフィールド | タイプ | 説明 |
---|---|---|
Label (1) | String | モジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。 |
Default [Optional] (2) | Number | モジュールをプロジェクトにインポートする際に、何も指定されなかった場合のデフォルトの数値です。 デフォルトは null です。 |
Min [Optional] (3) | Number | モジュールをプロジェクトにインポートする際に、ユーザーが入力できる最大数値。 デフォルトは null です。 |
Max [Optional] (4) | Number | モジュールをプロジェクトにインポートする際に、ユーザーが入力できる最小の数値。 デフォルトは null です。 |
Boolean
Boolean パラメータには、以下の編集可能なフィールドがあります:
パラメータフィールド | タイプ | 概要 |
---|---|---|
Label (1) | String | モジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。 |
Default [Optional] (2) | Boolean | モジュールをプロジェクトにインポートする際に、何も指定しなかった場合のデフォルトのブーリアン値です。 デフォルトは false です。 |
Trueの場合Label [Optional] (3) | String | モジュールがプロジェクトにインポートされたときに設定UIに表示される、true booleanオプションのラベルです。 デフォルトは true . |
Falseの場合Label [Optional] (4) | String | モジュールがプロジェクトにインポートされたときに、設定UIに表示されるfalse booleanオプションのラベルです。 デフォルトは false です。 |
Resource
リソースパラメータには、以下の編集可能なフィールドがあります:
パラメータフィールド | タイプ | 説明 |
---|---|---|
Label (1) | String | モジュールがプロジェクトにインポートされたときに設定UIに表示される、パラメータの可読性の高い名前です。 デフォルトは、パラメータ名に基づいて動的に生成されます。 |
Allow None (2) | Boolean | モジュールをプロジェクトにインポートする際に、設定UIから明示的にリソースをNULLに設定する機能の有効・無効を設定します。 デフォルトは false です。 |
Allowed Asset Extensions [Optional] (3) | File Types | モジュールがプロジェクトにインポートされたときに、設定UIに表示される方法で指定されたファイルタイプをアップロードする機能を有効にします。 デフォルトはすべてのファイルタイプです。 |
Default Resource [Optional] (4) | File | モジュールをプロジェクトにインポートする際に、何も指定されなかった場合のデフォルトのリソースです。 デフォルトは null です。 |
module.js
module.js
は、8th Wallモジュールのメインエントランスポイントです。 module.js
のコードは、プロジェクトがロードされる前に を実行します。 また、他のファイルやアセットを追加して、module.js
の中で参照することもできます。
モジュールは、その目的や開発スタイルによって、大きく異なることがあります。 通常、モジュールは、以下の要素のいくつかを含んでいます:
モジュール設定値のサブスクリプション
import {subscribe} from 'config' // config はモジュールオプションにアクセスする方法です
subscribe((config) => {
// あなたのコードはここで config に何かをします
})
プロジェクトコードで参照されるプロパティをエクスポートする
export {
// プロパティをここにエクスポートする
}.
README.md
モジュールのファイルディレクトリに README.md
というファイルを作成するだけで、モジュールにreadmeを含めることができます。 プロジェクトのreadmeと同様に、モジュールのreadmeもマークダウンを使ってフォーマットすることができ、写真やビデオなどのアセットを含めることができます。
注意: モジュールにReadmeがある場合、 バージョンをデプロイするときに、自動的にモジュールと一緒にパッケージ化されます。 この適切なモジュールのreadmeは、プロジェクトで使用されているモジュールのバージョンに応じて、モジュールのコンテキストに表示されます。
プロジェクトの文脈の中でモジュールを開発する
ワークスペースが所有するモジュールで、プロジェクトのコンテキスト内で開発モードを有効にするには、モジュール設定ページで「開発モード」(下の画像で赤く表示されている)をオンにします。 開発モードを有効にすると、モジュールの基礎となるコードとファイルが左サイドペインに表示されるようになります。
モジュールがプロジェクトのコンテキスト内で開発モードになっている場合、設定ページに追加オプションが表示されます:モジュールクライアントコントロール(青緑色)、モジュール展開ボタン(ピンク色)、ビジュアル設定ページのコンテンツの編集と設定の使用を切り替えるための「編集モード(Edit mode)」トグルがあります。
プロジェクトのコンテキスト内でモジュールを開発していて、変更があった場合、クラウドエディターの「変更を放棄・元に戻す」オプションが更新されます。 特定の変更をステージングさせるかどうかを選択することができます。 ステージングさせる変更があるプロジェクトやモジュールは、コードのステージングを完了させる前に、コミットメッセージを追加する必要があります。
プロジェクトのコンテキスト内でモジュールを開発しているときに変更があった場合、Cloud Editorの「放棄」 & 「変更を戻す」オプションが更新されます。 プロジェクトの変更のみを放棄/取り消すか、プロジェクトと開発中のモジュールの両方の変更を放棄/取り消すかを選択することができます。
モジュールのデプロイメント
モジュールのデプロイ
モジュールをデプロイすることで、安定版を共有することができ、またプロジェクトがモジュールのアップデートをサブスクライブできるようになります。 これによって、壊れないモジュールの更新を自動的にプロジェクトにプッシュすることができます。
モジュールを初めてデプロイする場合
- Cloud Editorのモジュール別ビューから開発する場合は、右上の「Deploy」ボタンを押します。 プロジェクトのコンテキスト内からモジュールを開発する場合、モジュール設定ページの右上にある「Deploy」ボタンを押します。
- モジュールのタイトルを確認します。
- モジュールのバージョンに応じたコミットを選択します。
- リリースノートセクションに初期モジュールの機能の説明を書き出す。 このセクションでは、マークダウン形式で記入できます。
- 「次へ」をクリックします。
- オプションで、モジュールの説明やカバー画像を追加することができます。 モジュールをプロジェクトに取り込む際のモジュールインポートフローで、モジュールの説明とカバー画像が表示されます。 説明とカバー画像を追加することでモジュールを差別化し、ワークスペースの他のメンバーにモジュールの使用に関するコンテキストを共有できます。
- 「Deploy」をクリックします。
モジュールのアップデートを展開する
モジュールアップデートの展開は、モジュールの初回展開と同様で、さらに2つの 展開オプションがあります。
- Version Type: モジュールのアップデートを展開する際に、アップデートがバグフィックス、新機能、メジャーリリースのいずれであるかを選択する画面が表示されます。
- バグフィックス: 既存の問題に対するリファクタリングコード & 修正に選択されるべきです。 バグフィックスまたは新機能に登録されたモジュールを持つプロジェクトは、新しいバグフィックスモジュールバージョンが利用可能になると、自動的にアップデートを受け取ります。
- 新機能:モジュールに壊れない機能を追加した場合に選択する。 新機能に登録されたモジュールを持つプロジェクトは、新機能モジュールの新しいバージョンが利用可能になると、自動的にアップデートを受け取ります。
- メジャーリリース: 大幅な変更があり、既存モジュールが動かなくなる場合に選択するものです。 モジュールを持つプロジェクトは、メジャーリリースの自動更新を受けません。
- プレリリースとして設定する: バージョンタイプを選択した後、そのバージョンをプレリリースとしてマークすることができます。 これは、モジュールのバージョンがプレリリースであることを他のユーザーに通知するためのプレリリースバッジを追加します。バージョンのタイプがバグフィックスまたは新機能である場合、バージョンがプレリリースとしてマークされている間は、プロジェクトは自動アップデートを受け取ることもありません。 プロジェクトにインポートされたモジュールでプレリリースバージョンを使用するには、バージョンの固定対象からプレリリースバージョンを手動で選択します。
モジュールのプレリリース編集
プレリリースが有効な場合、プレリリースを促進するか、放棄するまで、プレリリース版を更新し続けることができます。
モジュールプレリリースを編集するには:
- 事前に新しいバージョンをプレリリースとして設定した後、Cloud Editorのモジュール別ビューから開発する場合は、右上の「Deploy」ボタンを押します。 新しいバージョンをプレリリースとして設定した後、プロジェクトのコンテキストからモジュールを開発する場合、モジュール設定ページの右上にある「Deploy」ボタンを押します。
- プレリリースの新しいコミットを選択するか、現在のコミットを維持します。
- 「リリースノート」のモジュールバージョン機能の説明を変更する。 このセクションでは、マークダウン形式で記入できます。
- プレリリースを標準リリースに変換する準備ができた場合は、「リリースに昇格する」チェックボックスをオンにします。
- 「プレリリースを破棄する」を押すと、プレリリースを削除することができます。 プレリリースが現在設定されているものとは異なるバージョンタイプを選択するために使用されます(例:バグフィックスからメジャーリリースに移行し、変更を加える)。 現在プレリリースに固定されているモジュールを持つプロジェクトはサブスクライブされたアップデートを受け取るか、手動で変更されるまで、プレリリースバージョンで実行し続けます。
- 「Deploy」ボタンを押すと、編集したプレリリースの変更が利用可能になります(プレリリースを更新するか、チェックボックスが選択されている場合はリリースに昇格します):