2011年3月 1日 22:26

mailto:のリンクをjQueryで後から付ける

スポンサードリンク

HTMLでご意見を聞くフォームを作っているんですが、会社で聞き取りしたら、ウェブのフォームって嫌いっていう人がおって、理由を聞いたれば、「社名・氏名・メールアドレス・質問内容を全部埋めるのが嫌。一画面にずらっと並んでいて圧倒されてしまう」となむ。

おそらく、モーダルダイアログにしてひとつずつ入力するようにしても結局だめで、行きつくところは「メールアドレス覚えていない」じゃねえかとか思うのですが、いずれにしてもウェブのフォームはだめで、「クリックしたらメールソフトでるじゃん、それでいいよ」とか言われたわけです。

僕的にはメールソフトは月1回立ち上げてメールサーバから抜いている的な使い方（まさしくヌク的な）しかしていなくて、メールソフトは初期設定すらしていなくて、mailto:になっているリンクを踏むと、OutlookやらMail.appやらが起動しやがってクキーとなるほうなので、フォームでいいやろとか思うわけです。ていうかインターネットのホームページを作れるっつーのイコールフォームでメールを出せること、的な感覚を前世紀から引きずっているわけで、フォームは偉いわけです。あとフォームのinput type="text"を指定してもなぜか改行コードが入力されることがあるのでDBに入れる前に制御コードを抜かなくてはならないとか、そーいうじみーなことをやってきた以上今さらmailto:でいいよ、て言われてもちょっとなあとか思うわけです。

しかし、実際にmailto:でいいよ、とか言われたわけで、もうmailto:をアプリ起動のキッカーだとみなして、積極的に使うことに。

でも、htmlにmailto:を書いちゃうとなんだか不安……（メールアドレス回収botに持って行かれそうな意味で）。と思って、とりあえずjQueryを使ったJavaScriptで後からa要素をmailto:にしてみました……

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    ></script>
    <script type="text/javascript">
    $(function(){
      $('.email').each(
        function(){
          $(this).wrapInner('<a href="mailto:'+ $(this).html() + '"></a>');
        });
    });
    </script>
  </head>
  <body>
    <p class="email">hoge@example.com</p>
  </body>
</html>

これで、class="email"を指定した要素の中身がa要素で囲われて、メールアドレスのリンクになります……

でも、メールアドレス風なものがもろ見えじゃんか、という向きには、こんな風に暗号化してみるのはいかがでしょうか・……

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    ></script>
    <script type="text/javascript">
    $(function(){
      $('.email').each(
        function(){
          var text = $(this).text();
          var decrypted = '';
          for ( var i = 0; i < text.length ; i++ ) {
            decrypted += String.fromCharCode(text.charCodeAt( i ) + 1 );
          }
          $(this).html(decrypted).wrapInner('<a href="mailto:'+ decrypted + '"></a>');
        });
    });
    </script>
  </head>
  <body>
    <p class="email">gnfd?dw`lokd-bnl</p>
  </body>
</html>

e-mailが入るところはキャラクターコードをひとつ戻しておきます……これは暗号ですか？いえ、ASCIIコードでのお遊びです。ASCIIコードって偉大ですね……

まあWebに関しては何週か遅れているような気がするけど、自分用メモってことでいいよね。

2011.03.01 22:26 投稿　大野義貴 [Web] | 固定リンク |

スポンサードリンク

トラックバック(1)

トラックバックURL: http://blog.dtpwiki.jp/MTOS/mt-tb.cgi/3512

M.C.P.C. - mailto:のリンクをjQueryで後から付ける(2)：リンクを踏んだ時メールソフトを起動するかどうか選べるように (2011年3月 2日 23:05)

昨日の、 mailto:のリンクをjQueryで後から付けるを書いた後気付いたんですけれども、僕が今作っているサイトって、hCardとかOpen Graphとかで盛大にメールアドレスをメタデータで公開しているサイトなので、メールアドレスの秘匿化するとか盛大に意味がなかったわけです。あと、せっかくmailto:のリンクを付けても、クリックしたら「メールソフトを起動しますか？（はい／いいえ）」のワンクッションがある方が好みです。というわけで、昨日の、メールアドレスのところにa要素でmailto:のリ... 続きを読む