ページエディターで快適な作業環境を提供する方法

ページエディターでは制作担当者がインライン編集を行って、表示される状態を確認しながら作業できるWYSIWYG環境でコンテンツを作成および編集できるようになっています。エディターには、モジュールとテンプレートのコードと、HubSpotアプリのCSS/JSの両方を含むウェブページのプレビューを示すiframeが組み込まれています。ただしテンプレートまたはモジュールのCSS/JSが原因で、エディターに問題が発生することがあります。この記事では、こうした問題を回避するためのベストプラクティスについて説明します。

エディター内でのテスト

開発したアセットを配信する前に、HubSpotのコンテンツエディター内でテストすることが重要です。エディター内でのテストは、エディターと競合するスタイル設定の特定にも、スムーズな作業環境の実現にも効果的です。

以下に、エディター内で実行できるテストの例を示します。

  • [スタイル]ドロップダウンメニューのオプション(フォント、テキストサイズ)とツールバーのオプション(位置合わせ、色)を使用して、テキストの書式を設定する
  • リッチ テキスト ツールバーのオプション(埋め込み、リンク、画像、パーソナライズトークン)をクリックして挿入する
  • インラインエディター内でリッチテキスト要素のプラグイン(埋め込み、リンク、画像、パーソナライズトークン)をクリックし、UIが正常に動作して期待どおりに表示されることを確かめる

具体的な指定

主に、カスタムのJavaScriptまたはCSSが具体的ではない場合に、コンテンツエディターに問題が発生する可能性があります。コードの記述方法によって異なる形で、カスタムコードがエディターを干渉するリスクが現れます。一例として、次の関数を見てください。

$('body').click(function(event){ $('.blog-listing-wrapper .post-listing .post-item').siblings().find('.right').removeClass('social-active'); event.stopPropagation(); });

この関数は、body要素がクリックされると実行されます。このコードではevent.stopPropagation()が呼び出されるため、イベントがdocumentまたはwindowに到達しません。このような要素に関連付けられているイベントリスナーがある場合に、そのイベントリスナーのコードは実行されません。上記のコードの問題は、要素がクリックされるたびにclickハンドラーが実行され、インラインエディターに問題が発生することです。Reactによってwindow要素にclickハンドラーが追加されることが原因です。全てのクリックを捕捉するのではなく、必要な場合にだけclickハンドラーを追加する方が適切です。例えば、ユーザーによるサイドメニューを開くためのボタンクリックの時点でclickハンドラーを追加し、クリックが発生したらハンドラーを削除します。

また、labelのような汎用セレクターを使用する場合も、CSSに問題が発生することがあります。可能な場合は、ウェブページの特定箇所に限定したセレクター(.hs-form labelなど)を使用することが望まれます。

!importantタグの使用を避ける

!importantは、スタイルルールを他のものより優先させるために使用するタグです。ウェブコンテンツの制作時に、labelinput[type="text"]のような単純な要素セレクターで!importantを使用するのは適切ではありませんが、選択したスタイルルールよりも具体的に変更する場合に使用されることが少なくありません。!importantを使用すると、選択したルールが優先されるため、そのルールが具体的ではない場合でも所定のアセットに適用されます。

代わりに、セレクターを具体的に指定することにより、!importantを使用しなくても済むようにしてください。これにより、必要な要素以外にわたって適用される広範なルールを設定することなく、スタイルの設定対象にする要素を特定できます。また、HubSpotのボイラープレートCSSファイルを参照して、CSSの混在回避に向けてセレクターの活用方法を理解することもできます。

!importantの使用を回避する方法

例えばフォーム内の<label>要素の全てを白にする目的で、CSS内で<label>要素に!importantが使用されることがあります。

label, legend { color: white !important; }

しかし特定の要素をスタイルルールのセレクターとして使用するのは広範なため、その意図に反してコンテンツエディター内の全ての<label>タグが白になってしまいます。このスタイルルールは、HubSpotのリンク挿入プラグインに採用されている<label>要素を除外しないことから、プラグイン上のフィールドのラベルが欠落しているような表示になります。

以下のスタイルルールのように具体的なセレクターを使用することで、白を追加するフォームモジュールのラベルにだけ白を追加でき、コンテンツエディター内の他のラベルには影響を与えません。フォームのスタイルを設定する際に使用できるセレクターについて理解を深めていただけるように、開発者向けの資料を掲載しています。

.hs-form label, .hs-form .hs-form-field > label, .hs-form .hs-field-desc { color: white; }

.hs-inline-editとwindow.hsInEditorを使用する

HubSpotのコンテンツエディターでは、コンテンツのプレビューの読み込みにiframeを使用しています。このiframeの.hs-inline-editは、<html>に追加されるクラスです。また、window.hsInEditorは「true」と定義されます。この2つの項目は、インラインエディターの初期化時に、コンテンツがHubSpotコンテンツエディター内にあるかどうかを開発者が確かめる方法として利用できます。

.hs-inline-editを使用することで、エディターによるウェブページの読み込み時に適用しないCSSを記述して、CSSの混在を回避できます。インライン編集に影響する問題がJavaScriptにある場合は、window.hsInEditor変数を使用して、エディター内で実行されると問題になる部分的なコードを無効にすることができます。

.hs-inline-editを使用する方法

エディター内でのみルールを適用するセレクターの前に.hs-inline-editを追加します。

例えば、次のCSSでは疑似セレクター:not()を利用しています。

:not(.hs-inline-edit) label { color: white; }

別の方法として、HubSpot固有のクラスを利用することもできます。

例えば、ページ内に固定ヘッダーがあり、エディター内のリッチ テキスト ツールバーが固定ヘッダーの下に隠れる場合、ウェブサイトのUIレイヤーを最上位のz-indexに配置していることが考えられます。通常、この配置は(どうしても必要な場合を除いて)ベストプラクティスではありません。これは、エディター内では特に問題になります。コンテンツがインラインコントロールの上にレンダリングされる可能性があるためです。最善の結果を得るために、ウェブサイトのUIレイヤーを[X] z-indexの下に配置するようにしてください。それには、セレクター.hs-inline-editの後に固定ヘッダーのセレクター(header)を続けて、z-indexの値を2147483599にします。

.hs-inline-edit .header { z-index: 2147483599; }

window.hsInEditorを使用する方法

エディターの読み込み後にJavaScript関数が起動されるようにするには、window.hsInEditorを使用して何らかの処理を行うかどうかの判定条件を含めると役立ちます。以下のように、jQueryドキュメントのreadyハンドラーを利用することを検討してください。

jQuery(document).ready(function($) { if (window.hsInEditor) { return; } // so other stuff $('.some_widget').fancyThing(); });

jQueryドキュメントのreadyの部分は、貴社のHubSpotサイトがjQueryを使用している場合にのみ機能します。


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。