ウィジェットスタジオ

ウィジェットスタジオは、ウィジェットを書き、プレビューし、公開する場所です。開くには、マイプロフィールから自分のウィジェットを開き、編集を選びます。デスクトップのブラウザが必要です。

画面構成

領域	用途
AIタブ	作りたいものを説明すると、AIがコードを書いたり変更したりします。試験的な機能です。無料プランでは毎月の利用枠があります。
コードタブ	コードエディターです。React、Blotchライブラリ、入力項目、画像が自動補完され、型エラーには赤い下線が付きます。
出力	エディターの下にあります。出力を参照してください。
プレビュー	右側にあります。ウィジェットが表示され、入力の手を止めてから数秒後に描画し直されます。プレビューサイズを選ぶか、プレビューの端をドラッグして、好きなサイズを試せます。枠線メニューでは、利用者がウィジェットの周りに付けられる枠線を試せます。

ツールバーには、最後に公開したバージョン、その後に保存していれば未公開の変更、そして公開ボタンが表示されます。メーターは、ウィジェットのコードの長さの上限をどれだけ使っているかを示します。

メニュー	項目	機能
ファイル	保存	コードと公開入力項目を保存します。Ctrl+S（Macでは⌘S）。
	公開…	最新の保存内容をリリースします。公開とバージョンのリリースを参照してください。
	バージョン履歴…	すべての保存と、それぞれの変更内容です。復元で、エディターに読み込めます。
	ウィジェット設定	名前、説明、アイコン、カテゴリ、公開範囲。ウィジェットの設定を参照してください。
	入力項目	公開入力項目、非公開入力項目、連携。入力項目のタイプを参照してください。
	アセット	アップロードした画像。独自の画像を追加するを参照してください。
	削除	ウィジェットを削除します。誰もインストールしていない間だけ表示されます。
編集	アイコンを挿入…	アイコンを探して、描画するコードを挿入します。Ctrl+Shift+.（Macでは⌘⇧.）。
	プレビューのテーマを切り替え	プレビューをライトテーマとダークテーマで切り替えます。
	整形	コードのレイアウトを整えます。
	変更をクリア	保存していない変更をすべて破棄します。

エディターの下のパネルには3つのタブがあります。

出力には、ウィジェットがconsole.log、console.warn、console.errorで出力したログと、ウィジェットが止まる原因になったエラーが表示されます。エラーの横のAIで修正を選ぶと、修正案が提案されます。console.tableなど、ほかのconsoleメソッドは使えません。
型定義には、インポートしたパッケージについて、エディターが読み込んでいる型定義が表示されます。
ネットワークには、ウィジェットが送ったリクエストとそのレスポンスが表示されます。レスポンスの横の型定義を作成を選ぶと、そのレスポンスに合うTypeScriptの型をコピーできます。

ログを消去を選ぶと、表示中のタブが空になります。鍵のボタンで、自動スクロールのオン・オフを切り替えます。

ウィジェットは、Widgetという名前のコンポーネント、またはファイルのデフォルトエクスポートです。
```
export const Widget = () => {
  // ...
};
```
TypeScriptでもJavaScriptでも書けます。型エラーには下線が付きますが、ウィジェットの描画や公開が止まることはありません。
スタイルはTailwind CSSで指定します。使える色はforegroundとbackgroundだけです。ウィジェットの動作の仕組みを参照してください。
Blotchライブラリからは~lib/で、npmからはバージョンを固定してインポートします。npmパッケージを使うを参照してください。