• [アーティクル]

Razor 構文と ASP.NET Web ページ

第 11 章 Web サイトに電子メールを追加する

目次

  1. Web サイトから電子メール メッセージを送信する
  2. 電子メールを使ってファイルを送信する
  3. その他のリソース

本章では、Web サイトから自動的に電子メール メッセージを送信する方法について解説します。

ここでは次のことを学びます。

  • Web サイトから電子メール メッセージを送信する方法
  • 電子メール メッセージにファイルを添付する方法

本章で紹介する ASP.NET の機能は、以下の通りです。

  • WebMail ヘルパー

1. Web サイトから電子メール メッセージを送信する

Web サイトから電子メールを送信する必要については、さまざまな理由が考えられます。ユーザーに確認メッセージを送信したり、自分自身に (たとえば、新しいユーザーが登録されたといった) 通知を送信したりすることがあります。WebMail ヘルパーは、電子メールの送信を容易にします。

WebMail ヘルパーを使うためには、SMTP サーバーにアクセスする必要があります (STMPは、Simple Mail Transfer Protocol の略です)。SMTP サーバーは、メッセージを受信者のサーバーに転送する、つまり電子メールの外向きを行う電子メール サーバーです。Web サイトのためにホスティング プロバイダーを使う場合は、電子メールを設定するために、SMTP サーバー名を知る必要があります。社内ネットワークで作業しているときは、管理者か IT 部門に連絡して、使える　SMTP サーバーの情報を入手します。自宅で作業する場合は、通常の電子メール プロバイダーが使えるかどうか確かめて、SMTP サーバー名を調べてください。通常は、以下のものが必要です。

  • SMTP サーバー名
  • ポート番号 (通常は 25 ですが、ISP によってはポート 587 を使う必要があります)
  • クレデンシャル (ユーザー名、パスワード)

以下の手順では、2 つのページを作成します。最初のページは、テクニカル サポートの入力フォームを埋めるために使われるような、ユーザーが説明を入力するフォームを持ちます。最初のページは、その情報を 2 つめのページに送ります。2 つめのページでは、コードはユーザーの情報を抽出して、電子メール メッセージを送信します。また、問題レポートを受け取ったことを確認するメッセージを表示します。

図 1

この例を単純化するため、コードは使われるページの中で WebMail ヘルパーを初期化します。しかし、実運用する Web サイトでは、初期化コードはグローバルなファイルの中に置いておく方がよいでしょう。そうすることで、Web サイトのどのファイルからでも使えるように WebMail ヘルパーは初期化されます。より詳細な情報については、「第 18 章 サイト全体の動作をカスタマイズする」を参照してください。

  1. 新しい Web サイトを作成します。
  2. 新たに EmailRequest.cshtml という名前のページを追加し、以下のマークアップを追加します。
<!DOCTYPE html> <html> <head> <title>Request for Assistance</title> </head> <body> <h2>Submit Email Request for Assistance</h2> <form method="post" action="ProcessRequest.cshtml"> <div> Your name: <input type="text" name="customerName" /> </div> <div> Details about your problem: <br /> <textarea name="customerRequest" cols="45" rows="4"></textarea> </div> <div> <input type="submit" value="Submit" /> </div> </form> </body> </html>

フォーム要素の action 属性が ProcessRequest.cshtml に設定されていることに注意してください。これは、このフォームが送信されるのは、そのページであり、今のページに戻るのではないという意味です。

  1. Web サイトに、新たに ProcessRequest.cshtml という名前のページを追加し、以下のコードとマークアップを追加します。
@{ var customerName = Request["customerName"]; var customerRequest = Request["customerRequest"]; try { // Initialize WebMail helper WebMail.SmtpServer = "your-SMTP-host"; WebMail.SmtpPort = 25; WebMail.EnableSsl = true; WebMail.UserName = "your-user-name-here"; WebMail.From = "your-email-address-here"; WebMail.Password = "your-account-password"; // Send email WebMail.Send(to: "target-email-address-here", subject: "Help request from - " + customerName, body: customerRequest ); } catch (Exception ex ) { <text> <b>The email was <em>not</em> sent.</b> The code in the ProcessRequest page must provide an SMTP server name, a user name, a password, and a "from" address. </text> } } <!DOCTYPE html> <html> <head> <title>Request for Assistance</title> </head> <body> <p>Sorry to hear that you are having trouble, <b>@customerName</b>.</p> <p>An email message has been sent to our customer service department regarding the following problem:</p> <p><b>@customerRequest</b></p> </body> </html>

このコードでは、ページに送信されたフォームの項目の値を取得します。次に、WebMail ヘルパーの Send メソッドを呼び出して、電子メール メッセージを作成し、送信します。この場合、使われる値は、フォームから送信された値を連結したテキストを元にしています。

このページのコードは、try/catch ブロックの中にあります。電子メールの送信ができなかった理由が何であれ (たとえば、設定が正しくなかった)、このページが表示されます。<text> タグは、コード ブロックの中のテキストが複数行あることを示すために使われます。(try/catch ブロックや <text> タグの詳細については、「第 2 章 Razor 構文を使った ASP.NET Web プログラミングの紹介」を参照してください。)

  1. コード中の以下の電子メール関連の設定を修正します。
  • your-SMTP-host に、実際にアクセスできる SMTP サーバーの名前を設定します。
  • your-user-name-here に、SMTP サーバー アカウントのユーザー名を設定します。
  • your-email-address-here に、自分自身の電子メールアドレスを設定します。これは、メッセージの送信元となる電子メール アドレスになります。
  • your-account-password に、SMTP サーバー アカウントのパスワードを設定します。
  • target-email-address-here に、メッセージを送りたい人の電子メール アドレスを設定します。通常、これは受信者の電子メール アドレスです。ただし、テストのときは、自分自身にメッセージを送れます。このためには、ここに自分自身の電子メール アドレスを設定します。ページを実行すると、メッセージを受け取ります。
  1. EmailRequest.cshtml ページをブラウザーで実行します。(実行する前に、「ファイル」ワークスペースでこのページが選択されていることを確認してください。)
  2. 自分の名前と問題の説明を入力し、[Submit] ボタンをクリックします。ProcessRequest.cshtml ページにリダイレクトされ、メッセージを確認し、電子メールメッセージが送られます。

図 2

ページのトップへ

2. 電子メールを使ってファイルを送信する

電子メール メッセージにファイルを添付して送信することもできます。以下の手順では、テキスト ファイルと 2 つの HTML ページを作成します。テキストファイルは、電子メールの添付として使います。

  1. Web サイトで、新たにテキストファイルを作成し、MyFile.txt と名付けます。
  2. 以下のテキストをコピーし、このファイルに貼り付けます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. 新たに SendFile.cshtml という名前のページを作成し、以下のマークアップを追加します。
<!DOCTYPE html> <html> <head> <title>Attach File</title> </head> <body> <h2>Submit Email with Attachment</h2> <form method="post" action="ProcessFile.cshtml"> <div> Your name: <input type="text" name="customerName" /> </div> <div> Subject line: <br /> <input type="text" size= 30 name="subjectLine" /> </div> <div> File to attach: <br /> <input type="text" size=60 name="fileAttachment" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> </body> </html>
  1. ProcessFile.cshtml という名前のページを作成し、以下のマークアップを追加します。
@{ var customerName = Request["customerName"]; var subjectLine = Request["subjectLine"]; var fileAttachment = Request["fileAttachment"]; try { // Initialize WebMail helper WebMail.SmtpServer = "your-SMTP-host"; WebMail.SmtpPort = 25; WebMail.EnableSsl = true; WebMail.UserName = "your-user-name-here"; WebMail.From = "your-email-address-here"; WebMail.Password = "your-account-password"; // Create array containing file name var filesList = new string [] { fileAttachment }; // Attach file and send email WebMail.Send(to: "target-email-address-here", subject: subjectLine, body: "File attached. <br />From: " + customerName, filesToAttach: filesList); } catch (Exception ex) { <text> <b>The email was <em>not</em> sent.</b> The code in the ProcessFile page must provide an SMTP server name, a user name, a password, and a "from" address. </text> } } <!DOCTYPE html> <html> <head> <title>Request for Assistance </title> </head> <body> <p><b>@customerName</b>, thank you for your interest.</p> <p>An email message has been sent to our customer service department with the <b>@fileAttachment</b> file attached.</p> </body> </html>
  1. コード中の以下の電子メール関連の設定を修正します。
  • your-SMTP-host に、実際にアクセスできる SMTP サーバーの名前を設定します。
  • your-user-name-here に、SMTP サーバー アカウントのユーザー名を設定します。
  • your-email-address-here に、自分自身の電子メールアドレスを設定します。これは、メッセージの送信元となる電子メール アドレスになります。
  • your-account-password に、SMTP サーバー アカウントのパスワードを設定します。
  • target-email-address-here に、自分の電子メールアドレスを設定します。 (前述のとおり、通常は、誰か他の人に電子メールを送りますが、テストのため、自分自身に送信します。)
  1. SendFile.cshtml ページをブラウザーで実行します。
  2. 名前、タイトル行、添付するテキストファイル名 (MyFile.txt) を入力します。
  3. [Submit] ボタンをクリックします。前述のとおり、ProcessFile.cshtml ページへリダイレクトされ、メッセージを確認し、添付ファイル付きの電子メールメッセージが送られます。

ページのトップへ

3. その他のリソース

ページのトップへ