> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/editor/16hi0x2edv.md). # コードエディターの使い方 ### 概要 コードエディターは、ウェブサイト上の変更をコード化したいユーザーのための高度な機能です。 VWOのネイティブな操作のコードをニーズに応じて修正し、カスタムコードをツールに追加することができます。VWO操作のためのJSコードスニペットの詳細については、[こちらをクリック](https://help.vwo.com/hc/en-us/articles/360021530593)してください。 {% hint style="info" %} コードエディターは現在、A/Bテストとパーソナライズでのみ利用可能です。 {% endhint %} \[**コードエディター**]を使用すると、バリエーションコードを直接修正したり、外部のJS/CSSをバリエーションに追加したり、テストレベルでコードを修正することも可能です。 コードエディターの使い方は次の通りです。 * [コードエディターにアクセスする](#id-2) * [バリエーション内のコードを修正する](#id-3) * [テスト用のJS/CSSを追加する](#id-4) * [HTMLを追加する](#id-5) * [その他の設定](#id-6) ### **コードエディターにアクセスする** キャンペーン作成画面の、\[Configuration] > \[バリエーション]で、\[Code editor]を選択して「ビュー」もしくは「編集」から開いてください。
また、ビジュアルエディターで開いている場合、下部にある\[**コード**]（< />）をクリックすると、コード専用エディターに切り替えることもできます。
コードエディター画面では、カスタムの\[**JavaScript/CSS**]を追加することができます。このオプションを使用すると、バリエーションに外部JS/CSSを追加することもできます。外部JS/CSSの追加について詳しくは、「[キャンペーン前後のJS/CSSの追加方法](https://help.vwo.com/hc/en-us/articles/360020928393)」を参照してください。 ![](/files/yN7HDLE4orWaXg4nJcgK) ### **バリエーション内のコードを修正する** バリエーションのコードスニペットを修正するには、下部にある\[**コード**]（< />）をクリックします。下記のような編集画面が表示されます。
VWOは、ビジュアルエディターを使用してウェブサイトのページを変更するたびに、バックエンドにJavaScriptのコードを1行ずつ作成します。生成されたコードスニペットを修正して、要素への変更を実行することができます。 エディターでカスタムコードを書いたり、既存の操作を変更したりすることができます。VWO表記を使用した場合、エディターは自動的にそれらを識別し、VWO操作にマッピングします。ただし、表記がデフォルトのVWO操作にマッピングされない場合は、カスタムの JS/CSS操作として記録されます。VWO操作の一覧については、「[VWO エディター標準操作のJavaScript コードスニペット](https://help.vwo.com/hc/en-us/articles/360021530593)」を参照してください。 ### **テスト用のJS/CSSを追加する** コードエディターを使用すると、テストレベルのJS/CSSを追加することもできます。テストJS/CSSは、すべてのバリエーションとコントロールを含む、あなたのウェブサイト全体で実行されるコードです。 コントロールも含め、すべてのテストページで変更を実施する場合は、グローバルJS/CSSを追加します。 エディター右下の\[**キャンペーンJS/CSS**]をクリックすると、下記のような編集画面が表示されます。
テスト用JS/CSSの追加については、「[キャンペーン前後のJS/CSSの追加方法](https://help.vwo.com/hc/en-us/articles/360020928393)」を参照してください。 ### **HTMLを追加する** ウェブサイトで使用しているいずれかの要素のカスタムコードを使用してページに変更を加えるときは、\[**コード**]>\[**HTML**]セクションを使用します。 これで、コードが追加できるように白紙のキャンバスが表示されます。
カスタムコードで要素を追加することでウェブサイト上で変更を加えたいときは、\[**コード**] > \[**HTML**]セクションから行います。ゼロからコーディングすることも、既に開発されているウェブサイトの要素を再利用することも可能です。 カスタムHTMLコードを追加すると、新しいコンテンツがページの一番下に追加されます。追加されたコンテンツは、必要に応じてWebページ上で並べ替えたり、移動させたりすることができます。また、HTML内のJavascript関数を入れて、ページ上で使用する[ウィジェット](https://help.vwo.com/hc/en-us/articles/360039014073)を作成することもできます。 例えば、以前のキャンペーンで使用したバナーやポップアップ・ウィジェットのコードを使用したい場合、そのHTMLを取得してページに追加するだけです。エディターで、お客様のご要望に応じてコンテンツを修正したり、配置を変えたりすることができます。 ウェブページのカスタムHTMLを使用して簡単に実行できるテストのアイデアについては、「[製品の更新情報](https://vwo.com/product-updates/introduce-new-content-on-the-page-using-html/)」を参照してください。 ### **その他の設定** 下記はコードエディターで作業する際に使用できる設定です。
* **コードの折り返し：**長いコード行をエディター内で折り返すことができます。これにより、読みやすくなります。※JavaScriptでのみご利用可能です。 * **Enable Code Linting：**Lintingとは、ソースコードにプログラム上の誤りやスタイル上の誤りがないかを自動的にチェックすることです。これは、lintツール（別称 linter）を使用して行われます。lintツールは、基本的な静的コード解析ツールです。 * **コードの候補を表示：**可視性スコープ内のクラス、メソッド、フィールド、キーワードの名前を補完するのに役立ちます。これにより、コーディングを高速化し、キーボードで入力する時間を短縮することができます。※JavaScriptでのみご利用可能です。 * **Minify JavaScript/CSS code：**機能を変更せずにソース コードから不要な文字をすべて削除する方法です。詳細は[「コードエディターでJavaScript/CSSコードを縮小する」](https://help.vwo.com/hc/en-us/articles/900000646046-Minify-JavaScript-CSS-Code-in-VWO-Code-Editor)を参照してください。 ※本ページは[\[原文：Minify JavaScript/CSS Code in VWO Code Editor\]](https://help.vwo.com/hc/en-us/articles/900000646046-Minify-JavaScript-CSS-Code-in-VWO-Code-Editor)を翻訳・加筆修正しています。