ビジュアル エディタを使う

この記事の内容:

ビジュアル エディタの管理画面

オプティマイズでパターンを作成する前に、ビジュアル エディタを理解しておきましょう。ビジュアル エディタは、下記の 2 つの主要なコンポーネント、アプリバーとエディタ パレットで構成されています。

アプリバー

アプリバーは、パターンの作成時にページ上部に表示されるナビゲーション バーです。アプリバーは 2 つのセクションに分かれており、上部セクションにはテスト名とステータス、パターン名、プレビュー、変更リスト、診断ツール、ヘルプが表示されます。下部セクションには、要素セレクタ、CSS エディタの CSS パスとボタン、インタラクティブ モード、および移動の設定が含まれています。

The app bar in the visual editor.

アプリバーの各設定について詳しくは、ビジュアル エディタの紹介の記事をご覧ください。

エディタ パレット

エディタ パレットはページの右下に表示され、現在選択されている要素の編集コントロールを含みます。青色のバーには、元に戻す、やり直し、閉じる(x)のボタンがあります。[要素を編集] ボタンをクリックすると、テキストや HTML を編集したり、読み込み時に実行される JavaScript を追加したりできます。パレットの下部には、現在選択されている要素のコントロールが表示されます。たとえば、テキスト要素が選択されている場合は、ディメンション、位置、タイポグラフィ、背景、枠線、およびレイアウトを編集できます。

アプリバーとエディタ パレットのすべてのツールについて詳しくは、ビジュアル エディタの紹介の記事をご覧ください。

CSS コードエディタの使用

オプティマイズ ビジュアル エディタでは、スタイルを変更することに加え、CSS コードエディタを使用して、パターン内の CSS スタイルの変更を表示したり編集したりすることもできます。CSS コードエディタで編集した内容は、保存するとオプティマイズのスタイル変更に変換されます。テキスト、HTML などの非 CSS スタイルの変更(要素スタイルなど)は表示されず、CSS コードエディタの影響を受けません。

CSS コードエディタに移動するには、アプリバーの右下の埋め込みボタン(埋め込む)をクリックします。

The embed button in the visual editor.

ボタンをクリックすると、オプティマイズ CSS コードエディタが開きます。

Optimize CSS code editor screenshot.

条件式のサポート

CSS コードエディタは、メディアクエリのような条件式をサポートしており、レスポンシブなページのパターンを簡単に実装できます。たとえば、次の CSS コードを追加すると、500 ピクセル未満の画面のフォントサイズを 14 ピクセルに減らすことができます。

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

高度な CSS コードエディタ

CSS に慣れている場合は、CSS コードエディタでパターン全体を実装できます。ここに追加された CSS は個々のスタイルの変更に変換され、変更リストに表示されます。

同様に、CSS コードエディタからコードをコピーし、本番環境のウェブサイトに展開すると、最も効果的だったパターンを実装できます。

レスポンシブ ビジュアル エディタ

オプティマイズ ビジュアル エディタを使用すると、パターンを複数の画面サイズや端末タイプに対応するようにできます。また、特定の画面幅に適用されるレスポンシブなスタイル変更を行うこともできます。

これを行うには次の 2 つの方法があります。

  1. ビジュアル エディタの上部にある端末メニューで、事前定義された端末のひとつを選択します。特定の端末モデルでパターンをテストする場合は、このオプションを使用します。このオプションは、対応するブラウザのユーザー エージェントをシミュレートします。専用のモバイル版のサイトをお持ちの場合はこのオプションをお選びください。
  2. 端末メニューの一番下から [レスポンシブ] を選択し、レスポンシブ プレビュー方法(下記)のひとつを使用して、異なる画面サイズをシミュレートします。ブラウザ画面の幅と高さに動的に調整するレスポンシブ サイト(パソコン用ウェブブラウザも含む)がある場合は、このオプションを使用します。このオプションを使用すると、ビジュアル エディタを使用してレシポンシブなスタイルの変更を加えることもできます。

Editor: Device menu screenshot

ビジュアル エディタの端末メニュー

レスポンシブ プレビュー

デバイス メニューから [レスポンシブ] を選択すると、パターンを異なる画面サイズでプレビューできます。次の 3 つの方法があります。

  1. 事前定義されたページ幅(320、400、600 ピクセルなど)をシミュレートするには、要素セレクタのすぐ下にある灰色の自動幅バーをクリックします。これは、高さではなく幅のみを変更します。サイトがすでにレスポンシブ CSS を使用している場合、最も一般的な幅のブレークポイントが使用されるため、ページのあらゆるプレビューを簡単に確認できます。
  2. 自動幅バーの下にあるページサイザーに、希望の幅と高さ(ピクセル単位)で値を直接入力し、Return(Enter)キーを押します。
  3. パターンの右側と下側にある濃い灰色のサイズ変更ハンドルをドラッグして、特定の画面サイズをシミュレートし、パターンがどのように変化するかを確認します。これは、ユーザーがブラウザ ウィンドウのサイズを動的に変更したときにパターンがレンダリングされる方法と似ています。

editor-responsive-previewing-ss-fpo

ビジュアル エディタのレスポンシブ プレビューのオプション

レスポンシブな編集

パターンのプレビューに加えて、端末メニューの下部にある [レスポンシブ] を選択すると、ブレークポイント メニューを使用してレスポンシブなスタイル変更を加えることができます。

editor-device-and-breakpoint-menus

端末メニュー(左)とブレークポイント メニュー(右)

ブレークポイント メニューには、サイトに適用される(幅のみ)最も一般的なシンプルなレスポンシブ(つまり、メディアクエリ)制限のオプションが含まれています。サイトがすでにレスポンシブ CSS を使用している場合、最も一般的な幅のブレークポイントが使用され、現在のブレークポイントと調和する変更を行うことができます。

Editor breakpoint menu screenshot

展開されたブレークポイント メニュー

 

ブレークポイント メニューからオプションを選択すると、エディタ パレットを使用するすべてのスタイル変更でこの制限が使用されるようになります。たとえば、ブレークポイント メニューから「最大幅 600 ピクセル」を選択し、ボタンで使用されるフォントサイズを変更すると、そのボタンは 600 ピクセル以上の端末またはブラウザ ウィンドウでは元のフォントが使用され、エディタ パレットでハイライト表示されます。これはスタイルの変更にのみ適用され、テキストやコンテンツの変更には影響しません。

Editor palette constrained by the breakpoint menu.

エディタ パレットは、ブレークポイント メニューで選択された値によって制約される

ブレークポイント メニューの使用時は、サイズ変更ハンドルを使用してレスポンシブなサイズ変更を行なうと、ドラッグ中には動作します(プレビューできるように)が、ページサイズは選択されたブレークポイント幅に自動的に戻ります。

変更リストや CSS コードエディタを使用すると、個々のスタイルを変更するメディアクエリの表示や変更に加え、より複雑なメディアクエリ制限の指定も行うことができます。ブレークポイント メニューの上部にある [すべてのサイズ] を選択すると、レスポンシブ編集モードを終了できます。

変更リスト

ビジュアル エディタで変更を加えると、変更リストが作成されます。変更リストとは、テストするパターンに元のページを変換する基本的な一連の手順と考えてください。現在のパターンの変更の数は、アプリバーに表示されます(例: 上のスクリーンショットでは「変更数は 1」)。変更リストを確認するには、アプリバーの変更回数をクリックします。

オプティマイズでは、変更を実装するために外部のライブラリを読み込んだり使用したりするのではなく、Google タグマネージャ タグをコンパクトな形にして変更手順を実装します。

変更のタイプ

オプティマイズは、以下の変更タイプをサポートしています。

スタイルの変更

要素のサイズと位置を含むスタイル属性の変更を実装するために使用します。

スタイルの変更により、CSS ルールを使用して手順を実装することができます。

#target { color : red }

または、ターゲット要素のスタイル属性を使用します。

<p id="target" style="color : red"> </p>

ビジュアル エディタは、CSS ルール手法に適切な、最も正しい構文に戻します。

ページに新しいルールを上書きする、より具体的な CSS ルールがある場合、ビジュアル エディタは「important」プロパティを使用します。たとえば次のとおりです。

#target { color : red !important}

上記のルールがページのより具体的なルールによって上書きされる場合は、要素のスタイルのみを使用します。

CSS ルール手法は、フリッカー(CSS の読み込み前にスタイルされていないコンテンツが短時間表示される場合に生じる)を最小限に抑えます。これとは対照的に、element.style を使用してスタイル プロパティを変更するには、要素はすでにページ上に存在している必要があります。これにより、変更前にユーザーに短期間表示される機会を増やすことになります。

エディタが選んだオプションを検討し、既存のスタイルの変更を編集することで、そのオプションを変更することができます。

Advanced editor – Edit style dialog screenshot

属性の変更

リンク先や画像のソースなどの要素属性の変更を実装するために使用します。CSS セレクタ、属性や値などのプロパティを検討し、修正することができます。

Advanced editor – edit attribute screenshot

テキストの変更

エディタでインライン テキスト編集を行うときに使用します。子要素にインターリーブされたテキストを要素が含む場合、エディタは変更されたテキストの一部を示します。次の例では、「Some text」など一部だけ変更することができます。編集するには、各部分をクリックするか、Tab キーを押して次の部分に移動します。

<div>
Some text 
<b> a child element </b>
Some other text
</div>

 

次のモードがサポートされています。

  1. 置換: 既存のテキスト部分を置き換えます。
  2. 挿入: 新しいテキスト部分をターゲット要素内の先頭に挿入します。
  3. 末尾に追記: 新しいテキスト部分をターゲット要素内の末尾に挿入します。
  4. 前に挿入: 新しいテキスト部分をターゲット要素の前に挿入します。
  5. 後に挿入: 新しいテキスト部分をターゲット要素の後に挿入します。

Advanced editor - edit text screenshot

テキストの変更は、HTML の変更より安全で他への影響もあまりありません。テキストのみを変更する際におすすめです。テキストの変更はドキュメント構造(および CSS セレクタや他の要素)に対して副作用がないため、ターゲット要素に登録されている可能性のあるイベント ハンドラに影響を与えません。

HTML の変更

新しい HTML に置換する場合や、新しい HTML を挿入する場合に使用します。次のモードがサポートされています。

  • 置換: 既存の HTML コンテンツを置き換えます。
  • 挿入: 新しい HTML コンテンツをターゲット要素内の先頭に挿入します。
  • 要素内末尾に追記: 新しい HTML コンテンツをターゲット要素内の末尾に挿入します。
  • 次より前: 新しい HTML コンテンツをターゲット要素の前に挿入します。
  • 後に挿入: 新しい HTML コンテンツをターゲット要素の後に挿入します。

Advanced editor – Insert text before screenshot

HTML を変更すると、すべての非インラインのイベント ハンドラが失われます。たとえば、次のボタンは HTML の変更(たとえば、「次より前」)後に動作を停止します。
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

初期の HTML コンテンツがブラウザによって解析された後に HTML の変更が発生するため、初期の HTML コンテンツに含まれるどのスクリプトもすでに実行済みになります。このため、編集用に HTML コンテンツを読み込む際は、ビジュアル エディタはスクリプトタグを削除します。新しい HTML コンテンツにスクリプトを含めることはできません。パターンの一部として新しいスクリプトを実行するには、スクリプトの変更(JavaScript を実行)を使用します。既存のスクリプトを変更することはできません。

並べ替えの変更

要素をページの別の位置にドラッグして移動するには、2 つの方法があります。デフォルトの手法は「並べ替えの変更」で、これにより DOM の要素の配置を変更します。要素は、新しい親要素や兄弟要素を持つことになります。この手法では、通常、要素は新しい領域の要素のスタイルを採用します。

メニュー項目などの要素を並べ替える際に、並べ替えの変更を使用します。

並べ替えの変更は、関連するダイアログから変更することができるソースとターゲットの CSS セレクタ、また移動モードで行います。次のモードがサポートされています。

  • 先頭: ソース要素をターゲット要素の最初の子にします。
  • 要素内末尾に移動: ソース要素をターゲット要素の最後の子にします。
  • 前に移動: ソース要素をターゲット要素の前の兄弟にします。
  • 後に移動: ソース要素をターゲット要素の次の兄弟にします。

スクリプトの変更

スクリプトの変更により、オプティマイズは、CSS セレクタに一致するすべての要素上で任意の JavaScript を実行することができます。この変更方法では、オプティマイズは、要素をパラメータとして取得する関数の body として JavaScript を実行することができます。

CSS セレクタの「head」や「body」を使用し、一度だけ JavaScript を実行する(ページにはそのような要素は 1 つしかないので)こともできます。使用するセレクタは、「run at」オプションと組み合わせると、スクリプトを実行するタイミングを決定する前提条件に影響を与えます。詳しくは、後述の変更手順が適用されるタイミングをご覧ください。

CSS セレクタが複数の要素と一致する場合、提供されたスクリプトは、要素ごとに一回、複数回実行されます。各呼び出しでは、要素は関数の 1 つの引数として渡されます。

各呼び出しは、選択したオプションに基づいてできるだけ早い時期に実行されます。オプションは次のとおりです。

  • After opening tag: 一致したエレメントの開始タグだけが解析され、スクリプトが実行するためにページで使用されます。
  • After closing tag: 一致したエレメントのすべてのコンテンツと終了タグが解析されて、スクリプトが実行するためにページで使用されます。

例:

  • セレクタ「head」で「After opening tag」オプションを使用すると、スクリプトの変更はオプティマイズ スニペットが <HEAD> で初めて実行(同期ブロック化実行)される際に実行されます。
  • セレクタ「body」で「After closing tag」オプションを使用すると、スクリプトの変更は document ready(DOMContentLoaded)イベント後に実行されます。

Advanced editor – Run JavaScript screenshot

複数のターゲット要素

他の変更タイプと同様、並べ替えの変更によりソースとターゲットの CSS セレクタを変更して、複数の要素を一致させることができます。たとえば、複数のソース要素を選択することにより、メニューのすべての項目を別のメニューに移動することができます。

並べ替えの変更は、複数の要素に一致するターゲット セレクタもサポートしています。この変更方法を使って、ページのテーブルの 2 つの列や他のテーブル構造の順序を変更することができます。

  • ターゲット要素がソース要素よりも多い場合、追加のターゲット要素は無視されます。
  • ソース要素がターゲット要素よりも多い場合、追加のソース要素は最後のターゲット要素に追加されます。

自由に移動

「自由に移動」は、要素を別の位置に移動するもう 1 つの手法です。この手法を使うには、[移動の設定] で、[自由に移動] オプションを有効にします。

Optimize editor – Move anywhere switch

この手法を使用すると、位置関連のスタイル(左、上、位置など)が変更されます。要素は DOM の同じ位置に残りますが、新しい位置に移動しているように見えます。通常、そのスタイルは影響を受けず、ページの残りの部分は変更されません。

グローバル ボタンや領域(ログイン領域など)の位置とすでに位置の決まっている要素を変更する際に、「自由に移動」を使用します。

並べ替え用に自動選択

このオプションはデフォルトでオンになっています。このオプションを使うと、ドラッグしながら正しいソースとターゲット要素を簡単に選択できます。エディタは正しい要素(例: それに含まれる画像項目 <img> ではなくリスト項目 <li>)を選択し、コンテナ内にある要素(例: リスト要素 <ul>)だけを並べ替えます。

このオプションを無効にすると、DOM の他の位置に任意の要素を並べ替えることができます。[ターゲット要素外で並べ替え] のチェックボックスをオフにすることで、デフォルトの移動モードを「前に移動」や「後に移動」から「先頭」や「要素末尾に移動」に変更できます。

CSS セレクタの構築

ページ領域をクリックすると、クリックされた領域で最下層の要素が選択されます。

階層バーを使用して、祖先要素(同じ領域を占有している要素や、背景の画像や色など、その領域の可視プロパティに影響を及ぼしている要素など)を選択します。階層バーの祖先要素にカーソルを合わせると、各要素が占める領域を確認できます。要素をクリックして選択し、エディタのパレットを使用すると、選択した要素が影響を与えるプロパティを確認できます。

Advanced editor – CSS selector screenshot

変更する要素が選択されたら、エディタが構築する CSS セレクタは正しい要素を一致させることができるため、その変更の重要なプロパティになります。

エディタがセレクタを構築するために使用するアルゴリズムは、次のとおりです。

  • 次により、一意に識別できるまで DOM の祖先を走査します。
    • その ID 属性
    • ページのその要素によってのみ使用されるクラス
    • ドキュメントの <BODY>
  • 選択した要素まで下向きに戻り、次を行います。
    • そのタグを持つ子要素が 1 つだけある場合、タグ名を使用します。
    • ない場合、:nth-of-type セレクタを使用します。
CSS セレクタのヒント
  • ID や一意のクラスのある要素、または ID や一意のクラスのある近い祖先をターゲティングすることをおすすめします。これにより、ページ構造に小さな変更がある場合にパターンの管理が容易になります。
  • クラスを一意の識別子として使用している場合、代表ページ(たとえば、商品が 1 つだけある商品結果ページではなく)をエディタページとして使用してください。
  • いつでも、変更の CSS セレクタを変更したり、独自のセレクタに入力したりすることができます。エディタは、新たに一致した要素をハイライト表示します。
  • ID や固有のクラスを使用するオプション無効にして、セレクタの階層をトリミングすることができます。こうすることで、異なる属性が CMS やデータベースの識別子を使用する場合に役立ちます。

変更手順が適用されるタイミング

オプティマイズ スニペットはページ <HEAD> に読み込まれます。つまり、変更手順の実行時に、ターゲット要素は解析されず、ページで使用できません。

多くのページには、body に同期スクリプトが含まれているため、DOM の準備が遅れます。オプティマイズはフリッカーを回避するために、一致する要素が識別されるまで、80 ミリ秒ごとにドキュメントを監視します。CSS セレクタが複数の同期スクリプトがある複雑なペーシの複数のエレメントと一致する場合、一致する要素が解析されるにつれて、変更は反復しながら漸進的に適用されます。

別の変更タイプは、解析の異なる段階でも適用されます。テキスト、HTML や並べ替えの変更は、一致した要素のすべてのコンテンツと終了タグが解析されたときのみ適用されます。属性とスタイルの変更は開始タグのみを必要とし、スクリプトの変更はユーザが設定することができます。

フリッカーを最小限にするために、要素が一致して変更が適用されるまで、一致した要素を一時的に非表示(初期段階で追加されている <STYLE> タグを使用して)にすることもできます。

  • 変更がグローバル コンテナまたはドキュメントの body に関係する場合は、これらの細かい点が顕著になります。
  • オプティマイズ スニペット実行時に CSS ルールとして実装されるスタイルの変更が <HEAD> に同時に追加されるため、一致した要素が解析されるのを待つ必要はありません。

変更が適用される順序

副作用が伴う場合(後の変更が、以前の変更によって追加された要素を変更する場合など)、変更手順の順序が尊重されます。しかし、オプティマイズでは、副作用がなく後の変更の一致する要素が利用可能な場合、別の順序で変更が適用される場合があります。複数の要素に一致する変更を漸進的に並行して実行する場合さえあります。

オプティマイズにはこのような機能がありますが、ドキュメントを上から下方向に編集することをおすすめします。

アクティベーション イベント

一般に、動的なページや単一ページで構成されたウェブアプリは、初回のページ読み込みが完了した後、必要に応じて追加のデータを読み込みます。こうした処理に対応するため、オプティマイズにはアクティベーション(有効化)イベントと呼ばれる機能が備わっています。詳しくは、アクティベーション イベントをご覧ください。

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。