広告や HTML ページの Web Designer ソースファイルを表示する場合は、コードビューとデザインビューを切り替えられます。コードビューでの編集内容はデザインビューに反映されるため、コードの変更がデザインにどのように影響するかをすぐに確認できます。
コードビューへの切り替え
ウィンドウの右上隅にある [コードビュー] ボタン
をクリックします。
コードビューでは、デザインビューのパネルと一部のメニュー コマンドは使用できません。
をクリックします。コードビュー設定
設定画面では、次の設定を使用してコードビューの書式設定とエディタ オプションを調整できます。
- 色テーマ
- キーマップ
- 行の折り返し
- インデント サイズ
- 自動インデント
- オートコンプリート
- タブにスペースを使用
- ミニマップの表示
オプションの詳細なリストについては、設定画面のページをご覧ください。
コードの操作
次の機能により、コードの記述や編集がしやすくなります。ドキュメント内やファイル間の移動方法についてはコードビューでの移動をご覧ください。
ズーム
コードのテキストサイズを変更するには、フッターバーの右端にあるズーム コントロール（- と +）を使用します。デフォルトでは、コードビューに設定したズームレベルは Google Web Designer により保持されます。
コードブロックの折りたたみ
左余白の矢印を使用すると、コードブロックを折りたたんだり展開したりできます。
インデント
デフォルトでは、新しい行を入力すると自動的にインデントが行われます。コードブロックが適切にインデントされていない場合（たとえば、別のファイルからコピーして貼り付けた場合など）は、その部分を選択して Tab キーを押すことによりインデントできます。
コードのオートコンプリート
デフォルトでは、入力に応じて候補が表示されます。この設定をオフにしている場合は、Ctrl+Space キーを押すことでオート コンプリートを起動できます。
言語モード
Google Web Designer では、ファイル拡張子に応じて構文の色付けやコードの自動補完が行われます。デフォルトの言語モードをオーバーライドするには、フッターで現在の言語をクリックし、ポップアップ メニューから新しい言語を選択します。
GreenSock JavaScript ライブラリ
ディスプレイ＆ビデオ 360 環境や HTML ページ プロジェクトの場合は、メニュー コマンドを使用して GreenSock アニメーション ツールを追加できます。
GreenSock ライブラリを追加するには、次の操作を行います。
- コードビューを表示していることを確認します。
- [ファイル] メニューから、[JS ライブラリを含める] > [GreenSock] を選択します。
- リストからライブラリを選択します。
複数のライブラリを追加するには、この手順を繰り返します。
パブリッシュしたコードとの相違点
コードビューで表示されるコードは、パブリッシュしたドキュメントで表示されるものと必ずしも一致するとは限りません。ドキュメントの作成中に表示されるコードは、スペースの節約のために圧縮されている可能性があります。また、コードによっては、公開ファイルに含まれていてもコードビューには表示されないことがあります。