非コーダーのためのjQuery
この記事では、Optimizely Code Editorで使用できる一般的なjQuery関数を紹介します。
普段ビジュアルエディターを使って編集している方もぜひご覧ください。
jQueryの機能とOptimizelyでの活用方法
ページの要素を変更することで、ウェブページのA/Bテストを行います。Optimizelyは、JavaScriptライブラリであるjQueryを利用して、ページの要素を変更いたします。
ビジュアルエディターで編集するとき、エディタの右上隅にある" [>-] "ボタンをクリックしてください。Optimizelyが生成した、対応可能なjQueryが表示されます。
この記事では、jQueryのコード行の読み込む方法と、エディタで使用される一般的なメソッドをご紹介していきます。
ベーシックなjQueryコードは、以下のものになります。
ピリオドの前の最初に書かれた部分が「セレクタ」と言い、変更する要素やIDやクラスを指定します。
エディタは最もユニークであるIDを持つ要素を初めに識別します。CSSの場合と同様に、IDはポンド記号やハッシュタグ記号(#)で識別されます。クラスの場合は、先頭のピリオド(.)で識別されます。ピリオド以降の部分を、"メソッド"と呼びます。
メソッドはセレクタを変更します。上記のサンプルコードの場合、html()メソッドは、選択した要素のHTMLテキストを"Hello World"に変更します。
また、一般的に、エディタを使用して要素のスタイルを変更できます。その場合、選択した要素のCSSプロパティを変更するCSS()メソッドを使用します。先ほどの例に戻り、"Hello World"テキストの色を青（16進数：#1964af）に変更したいとします。その場合、セレクタは同じで、html()メソッドをcss()に置き換えます。コード行は次のようになります。
中括弧｛｝と二重引用符””内にある2つの項目は、「CSSプロパティ」と、「要素をどう変更したいのかを表した値」になります。メソッドの完全なリストは、jQueryのドキュメンテーション内にありますのでご覧ください。
共通のjQueryメソッド
このセクションでは、ビジュアルエディターを使って編集する場合や、自分で簡単な変更をしたい場合に表示される、いくつかの異なるメソッドについて解説していきます。
.attr()メソッドは、「一致する要素セットの最初の要素の属性の値を取得するか、一致する要素全てに対して１つ以上の属性を設定する」を表します。attrメソッドに関しては、jQueryサイトのドキュメントをご覧ください。
→ http://api.jquery.com/?s=attr
最初のケースでは、セレクタが属性として割り当てられた画像ソースを取得しているため、既存の画像が変更されたり、選択した要素に追加されます。２番目のケースでは、セレクタは引用符で囲まれたURLにリンクするハイパーリンクに変換されます。.attr()メソッドのコールは、画像変更機能やハイパーリンク作成機能を使用したときに、最も一般的に生成されます。
.replaceWith()メソッドは「一致した要素セット内にある各要素を、提供された新しいコンテンツに置き換え、削除された要素セットを返す」ことを表します。replaceWithメソッドに関しては、jQueryサイトのドキュメントをご覧ください。
→ http://api.jquery.com/?s=replaceWith
この場合、"selector"IDを持つセレクタは、その内容が"Hello World"というフレーズになるよう、分割されたコンテンツに置き換えられます。WYSIWYGエディターの場合、このメソッドは"Edit HTML"を使用したときに最も一般的に生成されます。
.detach().insertBefore()メソッド（実際のメソッド）は、「選択した要素をDOMの親要素と子要素から削除し、クラス”class1"の要素の前に挿入する」ことを表します。htmlツリー上では、以前挿入した要素と同じ"レベル"になります。つまり、(".class1")の親要素にも子要素にもなれないことになります。エディターでは、並べ替え機能を使用する際に生成されたこれらの要素が表示されます。
.detach().insertBefore()メソッドとは異なり、後に挿入される以外は上記と同様です。並び替え機能でもこれらのメソッドが生成されます。
.prepend()メソッドは、「#snazzyの前にセレクタを追加」することを表します。.insertBefore()と同様に#snazzyと同じレベルになります。つまり、#snazzyの親要素にも子要素にもならなことになります。
後半を除いて、上記の.prependメソッドと同様になります。多くの場合、画像などの要素を挿入する際にappend()メソッドが生成されます。
ページ上でjQueryセレクターを手動で探索する方法
場合によっては、バリエーション内の要素を変更するだけでなく、ページ上で移動させたいと考えるかもしれません。要素を移動させるとき、Optimizelyは本質的にどこを探せばよいかわからない可能性があります。その場合、人間の手でjQueryセレクタを使用して識別・変更させましょう。
要素にjQueryメソッドを適用させるために使用する識別子、jQueryセレクタは、要素のIDやクラス、タグ、CSSパスになるでしょう。
IDは唯一のもので、ひとつの要素にのみ関連付けることができます。クラスは唯一のものではなく、同様の属性を持つ要素のグループ全体に適用できます。
HTMLタグは、ブラウザがコンテンツをフォーマットとして表示する方法を定義する、Webページ内の隠しキーワードです。クラスとIDは、HTMLタグの属性です。
例えば、<p>タグで段落を定義すると、次のようになります。
クラスを属性として追加すると次のようになります。
HTMLやHTMLタグについてさらに詳しく知りたい場合は下のリンクをクリックください。
→ https://developer.mozilla.org/en-US/docs/Web/HTML/Element
CSSパスは、ページ上の要素の配置を示します（もしくは、DOMと呼ばれるドキュメントオブジェクトモデルを表します。これは、HTMLページ構造を参照する別の方法です）。一般的に、ビジュアルエディターはIDやクラスを用いて要素を識別し、要素に「変更」を適用します。IDやクラスが認識されない場合は、エディターはCSSパスを代わりに認識の手段として使用します。
注：Web技術に精通していない方は、DOMをある地域、CSSパスはDOM内の住所として捉えてください。重要なことは、要素が移動すると、そのパスも変化するということです。以前のCSSパス（もしくは住所）はまだ存在しますが、新しい要素がそこに存在するかどうかを示すものとなります（もしくは、新しい要素がまだ移動されていない場合は、要素が全くないことになります）。
ナビゲーションメニューや検索結果ページ、ドロップダウンメニューは、情報が異なって分類・表示される可能性がある要素の例です。nav要素の順序をテストしたい場合や、最も左のポジションに異動させてメニューオプションを強調表示したい場合は、CSSパスをjQueryセレクタとして使用するのは好ましくありません。なぜなら、上記のような要素のCSSパスが変化すると、エディターがパスを正確に指していない可能性があるからです。
・jQueryセレクタの手動検索
位置に関係なく要素を変更させたい場合は、DOM内にある要素手動検索のjQueryメソッドを使用してください。jQueryの「conteins」メソッドは、特定のテキストを含む要素を検索できるようにするため、DOMをトラバースする方法の一つになります。
特定のnav要素、例えば"Where We Are"リンクをターゲットにするには、以下のようにDOMをトラバースする必要があります。
この場合、適切なセレクタは次のものになります。
jQueryトラバーサルメソッドについての完全なリストは、以下のURLページをご覧ください。
Related Articles
