| Anchor | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
...
Yellowfinは、独自のコードウィジェットを作成するためのツールおよびリソースも提供しています。コードモードを使用してウィジェットのパーツをテストし、コードウィジェットを開発する開発者向けの追加リソースページも参照してください。
バイラテラルエディター
コードモードでの編集は、ビジュアルモードで即座に可視化されるため、JavaScriptを通して追加されたすべての対話機能や、HTMLを通してウィジェットプロパティに追加されたカスタマイズ、CSSを通した全体的なキャンバスデザインは、ビジュアルエディターに自動的に同期され、利用できるようになります。同様に、ビジュアルモードで行われた変更も、コードモードへ即座に反映されます。
...
プレゼントのコードモードを有効にする手順は、ダッシュボードの場合と同様です。より詳細な情報は、こちらを参照してください。
...
コードモードエディターの理解
以下のダイアグラムは、コードモードの機能を紹介しています。
...
| Column | ||
|---|---|---|
| ||
|
...
| width | 70% |
|---|
...
こちらのコードエディターで、プレゼンテーションのコードを記述し、編集します。
...
オブジェクト一覧
画面左側のオブジェクト一覧には、プレゼンテーションに追加されたすべてのオブジェクトが表示されます。こちらの一覧を使用して、次のアクションを実行できます。
- オブジェクト名にマウスオーバーするか、これをクリックすることで、コードエディターのHTML項目で対象のコードを強調表示します。これにより、簡単にコードを見つけることができます。
- 横にある削除アイコンを使用して、オブジェクトを削除します。
- コードエディターに表示される順序で、オブジェクトを確認します。新規オブジェクトは一覧の最後に追加されますが、オブジェクトをコードエディター内で移動した場合、これを反映して一覧が更新されます。これにより、その配置に従って、エディター内でコード要素を簡単に見つけることができます。
簡単にデバッグ
以下に示すように、エラーや間違いのあるコードには、エラーアイコンが表示されます。
コードモードのヒント
- プレビューモードで、カスタムコード機能をテストします（プレビューモードには、プレゼンテーションビルダーの右上にある「プレビューモード」ボタンからアクセスすることができます）。
- 他のプレゼンテーションで再利用したいコード機能は、コードウィジェットに保存することができます。ウィジェットとしてパッケージ化する前に、こちらでテストをします。ウィジェットは、プラグイン管理から追加することができ、プレゼンテーションビルダーのコードウィジェット一覧に表示されます。
- 特定のオブジェクトのコーティングを容易にするためには、プロパティパネルからキャンバスにドラッグした各コンテンツに名前を付けます。これにより、コードモードで対象のオブジェクトをより簡単に見つけることができます。
独自のウィジェットの作成
...