コードエディター（コード編集）とバリエーションコード

注：
Optimizely を使用すると、バリエーションのコードを手動で簡単に変更できま す。ただし、異なるブラウザーやオペレーティングシステムでページの変更内容が正しく反映されているかは、ご自身で確認してください。jQuery セレクターはブラウザーの種類に関係なく動作しますが、カスタム機能を使用する場合は、実験を実行する前にテストする必要があります。

コードエディターの仕組み

Optimizely エディターでユーザーが変更を加える度に、Optimizely は選択された要素を見つける 1 行の jQuery コードを作成し、エディターでユーザーが選択した変更を 実行します。 エディターの右下の隅にある [<コードの編集>] をクリックすると、コードエディター（「コードストア」とも呼ばれます）が立ち上がり、コードを表示（および編集）することができます。 直接 [<コードの編集>] ボックスで、 JavaScript または jQuery を使用して変更を作成できます。

[適用] をクリックするまで、変更は表示されません。最後に [適用] をクリックした後、または最後に [<コードの編集>] のセクション以外で変更を加えた後のいずれかに、[キャンセル] をクリックすると、[<コードの編集>] セクションで直接加えた変更は削除されます。

注：
コードエディターにはコードを約 100 万行（正確には 996,960 行）保存できます。ただし、バリエーションコードを整理して、できるだけ行数を少なくしてください。コードの行数が数千もあると、ページのロードに時間がかかる場合があります。

[<コードの編集>] で簡単な修正を行う

JavaScript のエキスパートでなくても、jQuery に詳しくなくても、コードエディターを活用することができます。 Optimizely エディターを開き、ブラウザーウィンドウの右下にある青色の「コードの編集」のリンク（ < edit code > ）をクリックしてみてください。このボックスにはすべてのバリエーションコードが収められており、ビジュアルエディターで作成した変更が jQuery の行に変換されています。

ビジュアルエディターで作成したすべての変更が、作成順にコードで表示されます。つまり、[<コードの編集>] ボックスはページ内で行った全変更の「ログ」のようなものです。以前の変更を修正できるだけでなく、取り消したい変更を一緒に削除することもできます。

jQuery は常に、“$("some_selector").do_something()” というフォーマットを使用します。コードボックスで $(" ") の部分にマウスをポイントすると、Optimizely ビジュアルエディターウィンドウの上部に、要素が青いボックスで囲まれて、参照先のコードが示されます。

たとえば、「移動とサイズ変更」ツールで要素の 1 つを一方向に数ピクセル移動すると、次のようなバリエーションコードが表示されます。

$(".hero > h1").css({"position":"relative", "left":"24px", "top":"15px"} );

コードの内容を見ると、"top" と "left" の隣に移動を定義するピクセル数があります。
このピクセル数を変更すると調整を行うことができます。 変更後は「適用」をクリックするだけで、変更をプレビューできます。

エディターで変更した内容も、同じ方法で調整できます。 これには、スタイル編集ツールで加えた CSS の変更も含まれます。

[<コードの編集>] で変更を取り消す

Optimizely は、加えられた変更をすべて順番に記録します。テキストの編集や HTMLの編集などの変更では、過去の変更を上書きしようとすると、Optimizely はその変更を統合する場合があります。

具体的には、テキストの編集は同一要素（セレクター）に対して行った過去のテキスト変更（テキストの編集）を上書きします。HTML の編集は、同一要素（セレクター）へ行った、過去の HTML 変更（HTML の編集）、過去のテキスト変更（テキストの編集）、過去の CSS 変更（スタイルの編集）、属性変更（ハイパーリンクの編集）を上書きします。

ただし、Optimizely はすべての変更にこの処理を行うわけではなく、移動とサイズ変更や再配置などの変更は対象外です。たとえば、ページ要素を左に移動した後、また右に戻した場合は、Optimizely は各移動についてコードを 1 行ずつ作成します。重複するコードの行を追加しすぎると、バリエーションコードが大量に生成され、数千行もの後にスニペットサイズがさらに付加されることになります。

要素を移動させても意図したとおりにならなかった場合は、[元に戻す] をクリックしてから、変更し直すことをお勧めします。

また、[<コードの編集>] ボックスで、最後に加えた変更をコードから直接調整することもできます。ピクセルの微調整を繰り返すような場合は、コード内で変更を加える方法が適しています。要素の移動には、バリエーションコードの "top": または "left":の数字を調整します。 “height”: および “width”: の数字を変更して、サイズを微調整することも可能です。コードで変更を加えた後に [適用] をクリックするだけで、エディターで結果をプレビューできます。

もし間違えても、心配はいりません。 思い通りにならなかった変更はいつでもコードから削除することができます。

Optimizely の元に戻す機能は、右上（または「Z」キー）の [開始/一時停止] ボタンの下にあります。バリエーションコードは、ビジュアルエディターで行ったすべての変更のログのようなものであることを覚えておいてください。右下のコードの編集リンクを開いて、一番下までスクロールします。変更を元に戻したい場合は、元に戻すの代わりに、コードの行を下から削除することもできます。削除したいコードの行が正確に分かっている場合は、その行へ移動して削除することができます。要素を元に近い状態に戻すために Optimizely でさらに変更を加えるよりも、古いコーを削除する方がはるかにシンプルです。 A → B → A という変更を加えた場合、A から A までの過程を定義するバリエーションコードは残り、実験を実行する際に、その過程すべてを実行してしまいます。不要なコードを残した場合のデメリットとしては、フラッシングが起きたり、バリエーションコードを使ってデバッグすることが難しくなったりします。不要なステップを取り除き、まず A → B の変更を行ったバリエーションコードを削除してください。

類似した複数の要素を一括変更する

特定のページ上に類似した要素が複数あり、変更を 1 つずつ行いたくない場合は、[<コードの編集>] を使用して変更することができます。

CSS セレクターの知識が少しあれば、類似した複数の要素を簡単に一括変更できます。

この処理を実行するには、Optimizely エディターを開き、変更したい要素の 1 つをクリックし、必要な変更を加えます。この例では、[スタイル編集] メニューで "color" を "#ff0000" に設定して一部のテキストカラーを赤に変更します。

[<コードの編集>] をクリックすると、下記のようなコードの行が表示されます。

`$(“event-88810.closing.clock”).css({“color”:” #ff0000”});`

注：
実際の数値はこの例とは異なります。

#event-88810 は選択された要素固有の ID です。 確認のため、コンソールでセレクター $(“#event-88810.closing.clock”) をテストすると、要素は 1 つだけ返されます（下記スクリーンショットを参照）。

`.closing.clock` のクラスはより一般的で、期限切れメッセージのすべてに当てはまります。 コンソールでセレクター $(“. closing.clock”); をテストすると、すべてのメッセージが正しく返されます（下記スクリーンショットを参照）。

[<コードの編集>] ボックスにあるコードの行を編集して、固有のセレクター #event-88810 を削除してみてください。新しいコードが、`$(“.closing.clock”).css({“color”:” #ff0000”});` のように表示されるはずです。 [適用] をクリックすると、エディター上で要素すべてが変更されて表示されます。

バリエーションに外部 JAVASCRIPT をロードする

バリエーションの一部に外部 JavaScript をロードしたいですか？ Olark や ClickDesk などの JavaScript ウィジェットを追加してみたいと思うかもしれません。