【HTMLメール】NO.1 ajaxで取り込んだDOM要素のCSSやスクリプトが機能しない場合はこうすると良い

スポンサーリンク

HTMLメールを利用(送信)する際に、HTMLエディタを使ったり、HTMLを直接書いたりするのがちょっと(いや、かなり)大変なので、HTMLメールを簡単に作成できて送信できる仕組みがあったらいいなぁ?と思い、今回作成してみました。

特に、HTMLメールは、一般的はホームページ等で使用するHTML(特にCSS)とは、使える機能や使い方(書き方)が少々異なり注意が必要なため、簡単で間違いのないHTMLメールを作成し送信する仕組みがあればとても便利だと思ったことから今回のシステム構築に至ったわけです。

そこで遭遇したCSSやスクリプトが機能しないという事象への対応方法について記載しました。

HTMLメールをパーツごとに作成する

HTMLメールを作成する際、外部のHTML送信サービスを利用したり、最初から最後まで一気通貫でHTML文を書いてメールを作成するというのが一般的でしょう。

外部のHTML送信サービスを利用した場合は、HTMLメールの送信と送信後の管理(未読・既読やステップメール等)をするぐらいしかできず、他のシステムなどと連携することはできません。

また、直接HTML文を書くのは、HTMLの知識が少なからず必要になります。

*一般の企業さんで、HTMLの知識を持っている人はそれほど多くはないでしょう...

それであれば、外部サービスは使わずに、そしてHTML文を直接書くこともなく、簡単に誰でもHTMLメール作成するためには、メールの内容をパーツごと(冒頭分、説明文、画像、リンク等)に分け、それらを文字だけを入力し、その後に各パーツを組み合わせていく方式が簡単で一番使いやすいのでは?...と思ったので、今回はそのような方式としてみました。

メールの内容を入力する際には、HTMLの知識がない人でも簡単に入力できるよう、文字だけを入力する方式とします。

もちろん、文字の中に、文字色を変えたり、文字サイズを変えたりと、HTML文のちょっとした知識がある人であれば、HTML文を途中で書き込んでも構いません。

HTMLメールの各パーツを組み合わせる際、途中に新たなパーツを追加したり、パーツの順番を入れ替えたりすることもあるでしょうから、それらにも対応できるようにします。

プレビュー画面内のCSSやスクリプトが機能しない

HTMLメールの作成の流れは、まず、各パーツの情報を入力しデータベースに登録します。

その後、登録したHTMLメールの各パーツを、表示する順番にデータベースから読み込んでプレビュー画面を表示させます。

プレビュー画面の中では、各パーツをドラッグ・ドロップで入れ替えることができるようにします。

そのプレビュー画面は、外部のプログラムで作成(bbb.php)し、それをaaa.php内のプレビュー画面を表示する箇所にajax(datatype=text)で取り込むのですが、残念ならが取り込んだプレビュー画面ではCSSやスクリプトが機能しない状態になってしまいます。

機能しない時の処理関連図、プログラムの流れは下図のとおりです。

HTMLメール作成システム処理関連図(CSS・スクリプトが機能しない)

HTMLメール作成システム処理関連図(CSS・スクリプトが機能しない)

 

なぜ動的に追加した要素のCSSやスクリプトが機能しない?

動的に追加した要素のCSSが機能しない、またはスクリプトが機能しないという件への対応方法については、多くのサイトで紹介されています。

これらのサイト情報を参考に、様々な方法を試しましたが、結果としてはCSSやスクリプトが機能することはありませんでした。

私なりに考えたのは、次のとおりです(あくまで私見です)。

今回のページでは、aaa.phpで作成している元ページに、ajaxでbbb.phpで作成したメールプレビュー用のページを追加挿入(差し込み)しています。

aaa.phpで定義されているCSSやスクリプトは、aaa.phpのページが表示された時点(ロードが完了した時点)を基に機能します。

しかし、その後にajaxでbbb.phpのメールプレビュー用ページを追加挿入するため、aaa.phpで定義されているCSSやスクリプトが機能しないのでは?(追加挿入されたことに気づかない?)

もしそうであれば、bbb.phpの中で、メールプレビュー用のCSSやスクリプトを定義してあげれば機能するのでは?という発想です。

それをわかりやすく(?)書いたのが下図になります。

CSSやスクリプトが機能しない時との違いは、CSSやスクリプトをbbb.php内で定義したということです。

HTMLメール作成システム処理関連図(CSS・スクリプトが機能)

HTMLメール作成システム処理関連図(CSS・スクリプトが機能)

 

無事にCSSもスクリプトも機能した

結果、メールプレビュー用のCSSもスクリプトも無事機能させることができました。

考えてみれば、至極当然のことのようにも思います。

思考を柔軟にすることが重要であることを改めて感じた今回の事象でした。

HTMLメール作成画面はこんな感じ

最後に、HTML作成画面はこんな感じになります。まだ、装飾なども施していないためなんともサッパリとした画面です(笑)。

これから、少しでもきれいな画面に変えていく予定です。

以上、最後までお読みいただきありがとうございました。

同じようなことでお困りの方の参考になれば幸いです。

HTMLメール作成画面

HTMLメール作成画面

 

 

この記事が気に入ったら
いいね ! してね

Twitter でzooを

スポンサーリンク

コメントを残す

*