開発者デバッグ

1.利用シーン

「開発者デバッグ」のプレビューは、「初期効果のプレビュー」+「レイアウトの調整」に分けられます。

1.プレビュー：開発者デバッグプレビューでテンプレートが正常に動作する場合、PC側のプレビューも必ず正常に動作できます。また、テンプレートの自動調整のロジックは、テンプレートの初期効果に基づいているため、「開発者デバッグ」でプレビュー効果が良くなれば、テンプレートの自動調整効果も良くなります。

2.レイアウトの調整：テンプレート作成時に比較的複雑なスタイル需要がある場合、「開発者デバッグ」のプレビューでダッシュボードのレイアウトを調整し、クリックして保存するだけでデバッグできます。

2.機能の概要

テンプレートのプレビュー方法のプルダウンリストには「開発者デバッグ」があり、これにカーソルを合わせると、「クリックしてブラウザデバッグモードに切り替える」が表示され、クリックするとブラウザでレイアウトをWYSIWYGに調整できます。

注：旧バージョンのデシジョンレポートの場合、開発者デバッグプレビューを使用する前に、ショートカットツールバーの「新バージョンに変換」ボタンをクリックし、変換する必要があります。

なお、開発者デバッグを使ってテンプレートをプレビューした後は、下の画像のようにデザイナーがテンプレートをロックします。ロックされた状態ではデザイナーはテンプレートを開くことができません。

1.コンポーネントの位置を調整する

カーソルをコンポーネントに移動し、下図のようにマウスの左ボタンを押しながらドラッグすることで調整できます。

ドラッグの際、補助線（コンポーネントの境界が揃うと赤い補助線が表示されます）や自動吸着機能（列全体位置に近づくと自動吸着します）を使って、他のコンポーネントを列全体させることができます。

コンポーネントを選択すると、左上に白い四角いボックスが表示されるが、これはコンポーネントのサイズではなく、水平・垂直方向の位置座標で、コンポーネントが列全体しているか判断するのに利用できます。

2.コンポーネントの位置を調整する

コンポーネントを選択すると、下図のように境界線に8つの白いピンポイントが表示され、様々な角からコンポーネントのサイズを変更することができ、カーソルを置いてドラッグできます。

また、リサイズ時にコンポーネントの縦横比を維持するロック機能にも対応しており、次の画像のようにコンポーネントの縦横比を維持することができます。

ロック機能を有効にする方法：コンポーネントを選択し、コンポーネントの右上にホバーツールバーが表示され、中の「コンポーネントのスケールをロック」ツールをクリックします。

3.コンポーネントの階層を調整する

コンポーネントが重なっている場合、次の画像のようにコンポーネントの階層を調整できます。

階層を調整する方法：コンポーネントを選択し、コンポーネントの右上にホバーツールバーが表示され、[最前面へ移動]、[最背面へ移動]、[前面へ移動]、[背面へ移動]をクリックしてください。

4. 変更の保存と取り消し

開発者デバッグでは、ページの上部にツールパネルがあり、次のような4つのツールが用意されています。

• 保存：レイアウトやコンポーネントを変更した後、「保存ボタン」をクリックすると、変更が保存され、デザイナーのテンプレートが有効になります。

• 取り消し:変更を元に戻す。最大5ステップまでサポートされています。

• 元に戻す：取り消した操作を元に戻します。 最大5ステップまでサポートされています。

• 固定をキャンセル：このツールパネルはデフォルトで固定されており、このボタンをクリックすると、カーソルがこのエリアから離れると自動でツールパネルが非表示になります。
  

最初にブラウザ側の「保存」ボタンをクリックすると、次ののダイアログボックスがポップアップしますが、ダイアログボックスを閉じた後は、ブラウザの cookies をクリアしない限り、再びダイアログボックスがポップアップすることはありません。

5.開発者デバッグプレビュー

URL経由でレポートにアクセスする場合、開発者デバッグもサポートされており、URLに &op=editable_preview を追加するだけです。

例えば、次のテンプレートを表示します：form11.frm

ブラウザのアドレスバーにhttp://localhost:8075/webroot/decision/view/report?viewlet=form11.frm&op=editable_previewと入力するだけです。

注：リモートデザインの場合、テンプレートの開発者デバッグURLにアクセスできるのは、そのテンプレートの編集権限を持つユーザーのみで、他のユーザーはアクセスする権限がありません。

6.非固定bodyレイアウトの効果

テンプレート本体が非固定レイアウトの場合、開発者デバッグ時のコンポーネント位置やコンポーネントレベルの調整はできなく、コンポーネントサイズのみが可能であり、コンポーネントのサイズが互いに影響し合うことになります。

固定レイアウトには上記の制約がなく、上記のリサイズ操作をすべてサポートします。

7.二重コンポーネントに対する特別な操作

TabブロックとAbsolute canvasブロックは、いずれも他のコンポーネントとネストすることができ、次の表に示すように、開発者デバッグのための特別な操作方法があります。